@charset "utf-8";

/*-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;scroll-behavior: smooth;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:30px/1.75 "heisei-maru-gothic-std","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;color:#582f12;animation:fadeIn 2s ease 0s 1 normal; font-feature-settings : "palt";font-weight: 400; font-style: normal; }
/*"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
/*::after{ display: block; clear: both; content: '';}*/

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#582f12;}
a:hover,a:active{color:#582f12;}


/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}
.drawer{display:none;}

/* メイン画像
*****************************************************/
#kv{ position: relative;}
.webp #kv { background: url("images/webp/kv.webp") no-repeat center center / cover; }
.no-webp #kv { background:url(images/kv.jpg) no-repeat center center / cover; }


.fixedMenu{ position: fixed; top: 0; right: 0; z-index: 100;}
h1{ margin: 35px 0 0 35px; float: left;}

.kvtxt1 {animation-name: kvtxt1; animation-timing-function: ease-in-out; animation-duration: 2s; margin:200px 150px 100px;}
@keyframes kvtxt1 {
0% {opacity: 0;transform:translate(-150px, 0);}
100% {opacity: 1;transform:translate(0, 0);}
}

.kvtxt2 {animation-name: kvtxt2; animation-timing-function: ease-in-out; animation-duration: 2s; text-align: right; padding-bottom: 200px; padding-right: 50px; box-sizing: border-box;}
@keyframes kvtxt2 {
0% {opacity: 0;transform:translate(0, 300px);}
100% {opacity: 1;transform:translate(0, 0);}
}

#menutit{ width: 400px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; border-radius: 10px 10px 0 0;font-family: "donguri-kana", sans-serif; font-size: 36px; color: #fea637; text-align: center;}
.webp #menutit { background-image: url("images/webp/icon4.webp"),url("images/webp/bg1.webp"); background-repeat: no-repeat, repeat; background-position: left 80px center; }
.no-webp #menutit { background-image: url("images/icon4.png"),url("images/bg1.jpg"); background-repeat: no-repeat, repeat; background-position: left 80px center; }

@media only screen and (max-width:768px){
.webp #kv { background: url("images/webp/sp_kv.webp") no-repeat center center / cover; }
.no-webp #kv { background:url(images/sp_kv.jpg) no-repeat center center / cover; }
.fixedMenu{ width: 50%; text-align: right;}
h1{ margin: 0; float: none; width: 40%; padding: 10px;}
.kvtxt1{ width: 100%; padding:100px 20px 30px; margin: 0; box-sizing: border-box;}
.kvtxt2{ width: 100%; padding-right: 20px;}
.kvtxt2 img{ width: 80%;}
#menutit{ width: 80%; padding: 5px 20px;font-size: 20px;}
.webp #menutit { background-image: url("images/webp/icon4.webp"),url("images/webp/bg1.webp"); background-repeat: no-repeat, repeat; background-position: left 50px center; }
.no-webp #menutit { background-image: url("images/icon4.png"),url("images/bg1.jpg"); background-repeat: no-repeat, repeat; background-position: left 50px center; }
}



/* コンテンツ
*****************************************************/
section::after{ display: block; clear: both; content: '';}
main{display:block;box-sizing:border-box;}
main .inner{max-width:1200px;width:96%;margin:0 auto;padding:0;box-sizing:border-box;}

.webp #imenu { background: url("images/webp/bg1.webp");}
.no-webp #imenu { background:url("images/bg1.jpg");}
#imenu ul{ display: flex; padding: 50px 0;}
#imenu ul li{ width: 100%; text-align: center;}
#iprofile{ position: relative; padding: 100px 0; box-shadow: inset 0px 6px 7px -5px rgba(0, 0, 0, 0.45);}
.webp #iprofile { background: url("images/webp/bg2.webp")no-repeat center center / cover;}
.no-webp #iprofile { background:url("images/bg2.jpg")no-repeat center center / cover;}
#iprofile h2{ position: absolute; top: 50px; right: 0; font-size: 30px;font-family: ff-providence-web-pro, sans-serif; padding: 0 20px;}
.webp #iprofile h2 { background: url("images/webp/profiletit.webp") no-repeat right bottom;}
.no-webp #iprofile h2 { background:url("images/profiletit.png") no-repeat right bottom;}
#iprofile .img{ float: left;}
#iprofile .txt{ float: right;}
#iprofile table{ width: 100%;}
#iprofile table th,#iprofile table td{font-size: 30px; padding: 30px 50px;}
#iprofile table th{ font-weight: 800;}
.webp #iprofile table th { background: url("images/webp/icon5.webp") no-repeat left top 35px;}
.no-webp #iprofile table th { background:url("images/icon5.png") no-repeat left top 35px;}
#iaccess{ width: 100%; height: 500px;}
#iaccess iframe{ width: 100%; height: 100%;}

@media only screen and (max-width:768px){
#imenu ul{ display: block; padding: 30px 0;}
#imenu ul li{ width: 80%; margin: 0 auto 20px;}
#iprofile .img{ float: none; width: 80%; margin: 0 auto 20px; text-align: center;}
#iprofile .txt{ float: none;}
#iprofile table{ width: 96%; margin: 0 auto;}
#iprofile table th,#iprofile table td{font-size: 20px; padding: 10px 0;}
.webp #iprofile table th { background: url("images/webp/icon5.webp") no-repeat left top 6px; background-size: 16% auto;}
.no-webp #iprofile table th { background:url("images/icon5.png") no-repeat left top 6px; background-size: 16% auto;}
#iprofile table th{ padding-left: 55px; box-sizing: border-box;}
#iprofile{ padding: 100px 0 50px;}
}

@media only screen and (max-width:644px){
.webp #iprofile table th { background: url("images/webp/icon5.webp") no-repeat left top 16px; background-size: 20% auto;}
.no-webp #iprofile table th { background:url("images/icon5.png") no-repeat left top 16px; background-size: 20% auto;}
#iprofile table th{ padding-left: 27px; box-sizing: border-box;}
}

#face{ margin-bottom: 100px; }
#face .inner{border-bottom: 1px dashed#582f12; padding-bottom: 50px;}
#face .img,#face .txt{ text-align: center;}
#face .img{ margin-bottom: 50px;}
#face .txt .midashi{ font-size: 40px; font-weight: 800; margin-bottom: 20px;}

@media only screen and (max-width:768px){
#face{ margin-bottom: 50px; }
#face .inner{ padding-bottom: 30px;}
#face .img{ margin-bottom: 20px;}
#face .txt .midashi{ font-size: 25px;}
}


/* 共通
*****************************************************/
.webp body#inpage { background: url("images/webp/bg3.webp"); background-size: 100% auto; }
.no-webp body#inpage { background:url(images/bg3.jpg); background-size: 100% auto; }

#inpage h2{ font-size: 50px; text-align: center;font-weight: 800; margin-bottom: 50px; line-height: 1.2; margin-top: 50px; letter-spacing: 0.2rem;}
#inpage h2 span{font-family: ff-providence-web-pro, sans-serif; font-size: 40px;line-height: 1;}

#inpage #info .inner{ margin-bottom: 100px;}
#inpage #info .inner::after{ display: block; clear: both; content: '';}
#inpage #info .img{ float: left; width: 40%;}
#inpage #info .txt{ float: right; width: 58%; padding-top: 20px;}

#inpage #menutit{ width: 400px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; border-radius: 10px 10px 0 0;font-family: "donguri-kana", sans-serif; font-size: 36px; color: #fea637; text-align: center;}
.webp #inpage #menutit { background-image: url("images/webp/icon4.webp"),url("images/webp/bg1.webp"); background-repeat: no-repeat, repeat; background-position: left 80px center; }
.no-webp #inpage #menutit { background-image: url("images/icon4.png"),url("images/bg1.jpg"); background-repeat: no-repeat, repeat; background-position: left 80px center; }

#inpage #price{ padding: 50px 0;}
.webp #inpage #price { background: url("images/webp/bg1.webp");}
.no-webp #inpage #price { background:url("images/bg1.jpg");}

#inpage h4{ font-size: 30px; text-align: center;font-weight: 800; margin-bottom: 50px; line-height: 1.2; letter-spacing: 0.2rem; background: #feab24; color: #fff; padding: 15px 0 5px; border-radius: 5px;}
#inpage h4 span{font-family: ff-providence-web-pro, sans-serif; font-size: 20px;line-height: 1;}

#inpage #price table{ width: 100%; margin-bottom: 100px;}
#inpage #price table th,#inpage #price table td{ font-size: 20px; padding-bottom: 30px; padding-top: 30px; border-bottom: 1px dashed #582f12; }
#inpage #price table span{ font-weight: 800;}
#inpage #price table td{ text-align: right;}

.webp #inpage #imenu { background: none;}
.no-webp #inpage #imenu { background:none;}

#inpage #iprofile{ padding: 50px 0; box-shadow: none;}
.webp #inpage #iprofile { background: none;}
.no-webp #inpage #iprofile { background:none;}
#inpage #iprofile .inner::after{ display: block; clear: both; content: '';}

#inpage #price .map{ text-align: center;}

#inpage #price .menutxt{ font-size: 25px; margin-bottom: 50px;text-align: center;}
#inpage .subtxt{ font-size: 25px;}

@media only screen and (max-width:768px){
#inpage #info .inner{ margin-bottom: 50px;}

#inpage h2{ margin-bottom: 30px;}

#inpage #info .img{ float: none; width: 80%; margin: 0 auto; text-align: center;}
#inpage #info .txt{ float: none; width: 100%; padding-top: 20px; margin: 0 auto 50px;}

#inpage #menutit{ width: 80%; padding: 5px 20px;font-size: 20px;}
.webp #inpage #menutit { background-image: url("images/webp/icon4.webp"),url("images/webp/bg1.webp"); background-repeat: no-repeat, repeat; background-position: left 50px center; }
.no-webp #inpage #menutit { background-image: url("images/icon4.png"),url("images/bg1.jpg"); background-repeat: no-repeat, repeat; background-position: left 50px center; }

#inpage h4{ margin-bottom: 20px;}
#inpage #price table th,#inpage #price table td{ width: 100%; display: block;}
#inpage #price table th{ border-bottom: none; padding-bottom: 0;}
}

@media only screen and (max-width:768px){
#inpage #price .menutxt{ font-size: 18px; margin-bottom: 20px;text-align: center;}
#inpage .subtxt{ font-size: 18px;}
}

/* フッター
*****************************************************/
footer{box-sizing:border-box; background: #fff; height: 150px;}
footer .logo{float: left; padding: 20px 50px;}
address{float: right; padding: 50px; font-size: 16px;}

@media only screen and (max-width:768px){
footer{ height: auto;}
footer .logo{ width: 80%; margin: 0 auto;}
footer .logo,address{ float: none; text-align: center; padding: 10px;}
}

/* グローバルナビゲーション
*****************************************************/
nav#mainNav{ width: 50%; margin: 0 auto;}
nav#mainNav::after{ display: block; clear: both; content: '';}
nav#mainNav ul{ display: flex; padding-top: 50px;}
nav#mainNav ul li{ width: 100%; text-align: center;}
nav#mainNav a{ color: #fff; font-size: 18px;font-family: "donguri-kana", sans-serif; display: block; transition: 0.2s;}
nav#mainNav a:hover{ opacity: 0.5;}
nav#mainNav ul li:nth-child(2) a{ font-size: 21px;font-family: ff-providence-web-pro, sans-serif;}
.webp nav#mainNav ul li:nth-child(1) { background: url("images/webp/icon1.webp") no-repeat left 50px center; }
.no-webp nav#mainNav ul li:nth-child(1) { background: url(images/icon1.png) no-repeat left 50px center; }
.webp nav#mainNav ul li:nth-child(2) { background: url("images/webp/icon2.webp") no-repeat left 30px center; }
.no-webp nav#mainNav ul li:nth-child(2) { background: url(images/icon2.png) no-repeat left 30px center; }
.webp nav#mainNav ul li:nth-child(3) { background: url("images/webp/icon3.webp") no-repeat left 55px center; }
.no-webp nav#mainNav ul li:nth-child(3) { background: url(images/icon3.png) no-repeat left 55px center; }
nav#mainNav ul li{position: relative;}
nav#mainNav ul li.has-child ul{position: absolute;	left:0;	top:40px;z-index: 4;background:#fea637;	width:180px; visibility: hidden;opacity: 0; transition: all .3s; display: block;padding-top: 10px; margin-left: 45px; border-radius: 5px;}
nav#mainNav ul li.has-child ul li{ background: none; text-align: left; padding: 10px; box-sizing: border-box;}
nav#mainNav ul li.has-child ul li a{font-family: "heisei-maru-gothic-std", sans-serif!important;}
nav#mainNav ul li.has-child ul li:nth-child(2) a{ font-size: 18px;}
nav#mainNav ul li.has-child:hover > ul,nav#mainNav ul li.has-child ul li:hover > ul,nav#mainNav ul li.has-child:active > ul,nav#mainNav ul li.has-child ul li:active > ul{  visibility: visible;  opacity: 1;}
.webp nav#mainNav ul li.has-child:nth-child(1) li { background: none; }
.no-webp nav#mainNav ul li.has-child:nth-child(1) li { background: none; }
.webp nav#mainNav ul li.has-child:nth-child(2) li { background: none; }
.no-webp nav#mainNav ul li.has-child:nth-child(2) li { background: none; }
.webp nav#mainNav ul li.has-child:nth-child(3) li { background: none; }
.no-webp nav#mainNav ul li.has-child:nth-child(3) lis { background: none; }



/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:768px){
.pcDisp{display:none;}
.spDisp{display:block;}
div.drawer{display:block;}
nav#mainNav{display:none;}
body{font:20px/1.75 "heisei-maru-gothic-std","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;color:#582f12;animation:fadeIn 2s ease 0s 1 normal; font-feature-settings : "palt";font-weight: 400; font-style: normal; }
}