@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);
/* Update 20230317 ver.2 */
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
a{text-decoration: none;}
a:hover {color : red;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	}
	
#top_t
{
	padding-top:100px;
	clear: both;
	text-align: center;
	background-image:url(../img/top_title02.png);
	background-size: contain;
	background-repeat: no-repeat;

}
#top_coment
{
	margin-top: 3em; 
	clear: both;
	text-align: center;
	background-image:url(../img/bg_02.png);
	background-size: contain;
	background-repeat: no-repeat;
	
}
.bg_img{
	clear: both;
	text-align: center;
}
#s_works_bg{
	clear: both;
	text-align: center;
	background-image:url(../img/bg_s_wo.jpg);
	background-repeat: no-repeat;
}
.h_line{
	clear: both;
	text-align: center;
	background-image:url(../img/h_line01.gif);
	background-repeat: no-repeat;
}

.logo{position: absolute; top:10px; right: 100px;}

	/* navi
------------------------------------------------------------*/
#navi{
	clear: both;
	text-align: center;
	font-size: 16px;
	font-weight:bold;
	
}
nav ul { overflow : hidden;
		}
nav ul li { float : left;}
nav ul li a {
display : block;
font-size: 16px;
padding : 10px 16px;
text-decoration: none;
color: #000;
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}

	/* フッター
	------------------------------------------------------------*/
	#footer{
		clear: both;
		padding: 10px 10px 50px 0;
		text-align: center;
		font-size: 14px;
	}
	

section{
  clear: both;text-align: center;
}
section.work{margin-left: 20%; margin-right: 20%;}
section.sche{margin-left: 10%; margin-right: 10%;}
div.sche01{
	margin-left: 15%;text-align: left;
}
section.adres{margin-left: 10%; margin-right: 10%;}
.adres01{
	margin-left: 15%;text-align: left;
}
.adres02{
	margin-left: 15%;text-align: left;
	border-spacing: 3em;
}

h1{
	font-size: 34px;
	font-weight:bold;
	text-align: center;
}

h2{
	font-size: 28px;
	font-weight:bold;
	text-align: center;
	margin-top: 1em;
}

.h2a{
	font-size: 28px; font-weight:bold; text-align: left; margin-top: 1em;}

h3{
	
	font-size: 22px;
	font-weight:bold;
	text-align: center;
	line-height: 1.6;
	margin-left: 12%;
	margin-right: 12%;
	font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
	
}
h4{
	
	font-size: 16px;
	font-weight:bolder;
	text-align: center;
	line-height: 2;
}

.h4a{font-size: 16px; font-weight:bolder; margin-top: 2em;}

h5{
	clear: both;
	text-align: left;
	font-size: 18px;
	font-weight:bold;
	margin-left: 12%;
	margin-right: 12%;
}
h6{
	clear: both;
	font-size: 20px;
	font-weight:bold;
	text-align: center;
	line-height: 2;
}
 
 td.adress{
	padding: 2em;
}

table.prog_photo
{clear: both;
	border-spacing: 20px;
}
td.ad_p{padding: 2em;}
.op-left-top{object-position: left top;
}
.op-right-top{object-position: right top}

.inner{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 40px;
}

	
	/* RESPONSIVE 設定
	------------------------------------------------------------*/
	
	@media only screen and (min-width: 800px){
		body{
			font-size:14px;
		}
		
		#wrapper{
			width: 100%;
		}
		
		#content{
			width: 80%;
		}
		
			
	  #footer{
			padding: 30px 10px 70px 0;
		}
	}
	
	
	@media only screen and (min-width: 641px){
		.col2 li{
			width: 60%;
			vertical-align: top;
		}
		.col2 li:first-child{
			width: 35%;
			padding-right: 4%;
		}
	}
	
	@media only screen and (max-width: 640px){
		.innerS{
			width: 94%;
			padding-bottom: 30px;
		}
		#gallery li{
			float: none;
			width: 100%;
		}
		.article img{
			float: none;
			display: block;
			margin: 0 auto 20px;
		}
		#map iframe{
			width: 96% !important;
			left: 2%;
		}
	}
	
	@media only screen and (max-width: 799px){
		#sidebar{
			position: fixed;
			width: 100%;
			z-index:500;
		}
		
		#sidebarWrap{
			position: relative;
			width: 100%;
			height: 60px;
			background: #fff;
			border-bottom: 1px solid #ccc;
		}
		
		#sidebar h1{
			text-align: center;
			padding-top: 15px;
		}
		
		#sidebar h1 img{
			width: auto !important;
			max-height: 25px;
		}
		
	  a#menu{
		  display: inline-block;
		  position: relative;
		  width: 40px;
		  height: 40px;
		  margin: 10px;
		}
	
		#menuBtn{
		  display: block;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 18px;
		  height: 2px;
		  margin: -1px 0 0 -7px;
		  background: #000;
		  transition: .2s;
		}
	
		#menuBtn:before, #menuBtn:after{
		  display: block;
		  content: "";
		  position: absolute;
		  top: 50%;
		  left: 0;
		  width: 18px;
		  height: 2px;
		  background: #000;
		  transition: .3s;
		}
	
		#menuBtn:before{
		  margin-top: -7px;
		}
	
		#menuBtn:after{
		  margin-top: 5px;
		}
	
		a#menu .close{
		  background: transparent;
		}
	
		a#menu .close:before, a#menu .close:after{
		  margin-top: 0;
		}
	
		a#menu .close:before{
		  transform: rotate(-45deg);
		  -webkit-transform: rotate(-45deg);
		}
	
		a#menu .close:after{
		  transform: rotate(-135deg);
		  -webkit-transform: rotate(-135deg);
		}
	
		.panel{
			width: 100%;
			display: none;
			overflow: hidden;
			position: relative;
			left: 0;
			top: -10px;
			z-index: 100;
		}
	
		#mainnav{
			position: absolute;
			top: 0;
			width: 100%;
			text-align: right;
		}
	
		#mainnav ul{
			border-bottom: 1px solid #ccc;
			background: #fff;
			text-align: left;
		}
	
		#mainnav li a{
			position: relative;
			display: block;
			padding: 15px 25px;
			border-bottom: 1px solid #ccc;
			color: #000;
			font-weight: 400;
		}
		#mainnav li a:before{
			display: block;
			content: "";
			position: absolute;
			top: 50%;
			left: 5px;
			width: 6px;
			height: 6px;
			margin: -4px 0 0 0;
			border-top: solid 2px #000;
			border-right: solid 2px #000;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		#mainnav #sns li{
			display: inline-block;
		}
		#mainnav #sns li a{
			position: relative;
			display: inline-block;
			padding: 15px 10px 0;
			border: 0;
		}
		#mainnav #sns li a:before{
			border: 0;
		}
		.col4 li{
			margin: 0 auto 50px;
			display: block;
			text-align: center;
		}
		section h2{
			margin: 55px auto;
		}
	}