/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#303030; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom; -webkit-backface-visibility: hidden; image-rendering: -webkit-optimize-contrast;}
.sp{ display:none;}
.wrap{ width:1192px; max-width:100%; margin:0 auto; position:relative;}
p{ font-size:1em; line-height:1.6em; margin:0 auto;}
a:hover img{ opacity:0.8;}
h1.title{ margin:50px auto 30px;}



/*トグルボタン*/
#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.6); margin-top:60px; position:relative; z-index:1;}
#navi_toggle ul{ margin:0px 15px 0 0; }

#menubtn{
	width:40px;
	height:41px;
	display:none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header { width:1092px; max-width:91%; margin:0 auto; overflow:hidden; position:relative; padding:20px 0 30px 9%;}
header h1.logo{ max-width:40%; float:left;}
header ul.nav { width:720px; margin:33px 30px 0 auto; text-align:right;}
header ul.nav li{ font-size:0.9em; display:inline-block; margin-right:5px; text-align:center; letter-spacing:0.1em;}
header ul.nav li span{ font-size:1.3em; font-family:'Franklin Gothic Medium'; letter-spacing:0.2em;}
header ul.nav li a{ display:block; width:100%; height:100%; padding:6px;}
header ul.nav li a:hover{ color:#934b74;}
ul.sns_nav { margin:20px 30px 0 0; text-align:right;}
ul.sns_nav li{ display:inline-block; margin-right:10px;}


#navi_toggle{ padding:20px 0;}
#navi_toggle ul.s_nav{ width:100%; margin-left:auto;}
#navi_toggle ul.s_nav li{ border-bottom:1px solid #ddd; margin:0px 0 4px; text-align:left;}
#navi_toggle ul.s_nav li img{ margin-right:5px;}
#navi_toggle ul.s_nav li span{ display:inline-block; font-size:1.2em; font-family:'Franklin Gothic Medium'; letter-spacing:0.2em; margin-right:10px;}
#navi_toggle ul.s_nav li a{ display:block; width:100%; height:100%; padding:12px 15px 4px 15px;}
#navi_toggle ul.sns{ text-align:left; margin:20px 0 0 15px;}
#navi_toggle ul.sns li{ border:none; display:inline-block; margin:0 5px 0 0;}



/*フッター*/
#footer_wrap{ width:100%; background:#e5ebee; padding:30px 0;}
footer{ width:965px; max-width:95%; margin:0 auto; overflow:hidden;}
footer .left_box{ width:290px; max-width:100%; text-align:left; float:left; line-height:1.2em;}
footer h1{ padding:5px 0;}
footer p{ font-size:1em; padding:0; margin:0;}

footer ul.nav{ padding:40px 0 0 330px; text-align:left;}
footer ul.nav li{ display:inline-block; margin:0 15px 15px 0; font-size:0.8em; line-height:1.4em; letter-spacing:0.1em;}
footer ul.nav li span{ font-size:1.2em; font-family:'Franklin Gothic Medium'; letter-spacing:0.2em;}

/*トップページ*/

h1.top_mainimage{ width:1192px; max-width:91%; margin:0 auto 140px; padding:0 0 0 9%;}

#top .sec1,#top .sec2,#top .sec3{ width:1200px; max-width:100%; margin:100px auto; display:flex; justify-content:left; flex-wrap:wrap;}
#top .right_box{ width:790px; max-width:60%;}
#top .left_box{ width:330px; max-width:35%; margin:80px 0 0 5%;}

#top .right_box p{ max-width:90%; margin:0 auto; font-size:1.4rem; line-height:2em; text-align:left; padding:20px;}

#about dl{ max-width:90%; font-size:1.2em; margin:50px auto;  display:flex; justify-content:left; flex-wrap:wrap;}
#about dl dt{ padding:20px 0; width:125px; border-bottom:1px solid #000; text-align:left;}
#about dl dd{ padding:20px 0; width:calc(100% - 145px); border-bottom:1px solid #888889; text-align:left; margin-left:20px;}






/*グーぐるマップ*/
.gmap {
position: relative;
width:700px;
padding-bottom: 30%;
height: 0;
overflow: hidden;
max-width:100%;
margin:20px auto 0;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width: 1192px){


}


/*960以下
 */
@media screen and (max-width: 960px){
header h1.logo{ width:200px;}
header ul.nav { margin:20px 0 0 auto;}


h1.top_mainimage{  margin:0 auto 70px;}



}
@media screen and (max-width: 860px){

header{max-width:98%; padding:10px 0 20px 0;}
header ul.nav li{margin-right:3px; letter-spacing:0.05em;}
header ul.nav { margin:15px 0 0 auto;}
ul.sns_nav {margin:20px 10px 0 auto;}
footer ul.sns_nav li{ margin-right:5px;}


#top .sec1,#top .sec2,#top .sec3{ margin:60px auto; display:block;}
#top .right_box{ max-width:100%;}
#top .left_box{ max-width:100%; margin:0;}



}





/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
#menubtn{ display:block;}
header ul.nav{ display:none;}
header ul.sns_nav{ display:none;}

footer .left_box{ float:none;}
footer ul.nav{ padding:20px 0 20px 10px; text-align:left;}


h1.top_mainimage {max-width:95%; padding:0 0 0 5%; margin:0 auto 30px;}
.spno{ display:none;}



}






/*560以下 */
@media screen and (max-width: 560px){


#about dl{ max-width:90%; font-size:1.2em; margin:50px auto;  display:flex; justify-content:left; flex-wrap:wrap;}

#about dl dt{ width:100%; padding:15px 5px 5px; border-bottom:1px dotted #000;}
#about dl dd{ width:100%; padding:20px 5px; margin-left:0; text-align:left;}
#about dl dt:last-of-type{ border-bottom:1px dotted #000;}


.mainimage1{ width:100%; height:180px; object-fit: cover;}
.mainimage2{ width:100%; height:100px; object-fit: cover;}
.mainimage3{ width:100%; height:140px; object-fit: cover;}



/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){



}

