@charset "utf-8";

html {font-size: 62.5%;}
body {text-align: left; font-size: 1.4rem; color:#000; line-height:100%; font-feature-settings: "palt"; letter-spacing: 0.05em}
body {font-family: 'Noto Sans JP', sans-serif; font-weight: 400;}
body {background: url("../img/bg.png"); background-size: 64px;}
body {height: 100%; -webkit-text-size-adjust: 100%;}

#wrapper {height:100%; width: 100%;}

@media screen and (min-width: 500px){
	#wrapper {width:500px; margin: 0 auto;}
}

a{color:#1e3264}
a:hover , .a:hover {opacity: 0.8; transition: all 0.4s; cursor: pointer}

/*-------------------------------
font
-------------------------------*/
@font-face {
	font-family: 'Gordita Medium';
	font-style: normal;
	font-weight: normal;
	src: local('Gordita Medium'), url('Gordita Medium.woff') format('woff');
}

@font-face {
	font-family: 'Gordita Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Gordita Regular'), url('Gordita Regular.woff') format('woff');
}

.Barlow{font-family: 'Barlow', sans-serif; }
.Gordita{font-family:'Gordita Medium', sans-serif; }

/*-------------------------------
grobal navi
-------------------------------*/
header h1 {position: fixed; top: 20px; left: 20px; }
header #g-navi {height: 60px; width: 120px; display: flex; position: fixed; top: 0; right: 0; z-index: 1001;}

.fixed {position: fixed;  width: 100%; height: 100%;}
#drawer {width: 100%; background-color: #1e3264; display: none; height: 100%; position: fixed; top: 0; left: 0; z-index: 1002; overflow-y: scroll; -webkit-overflow-scrolling:touch;}
#close-btn {position: fixed; top: 0; right: 0;}

nav > ul{position: fixed; display: flex; flex-direction: row-reverse; left: 50%; top: 50%; transform: translate(-50%,-50%);}
nav > ul{border-right: 1px solid rgba(255,255,255,0.1)}
nav > ul > li a{height: 240px; display: block; border-left: 1px solid rgba(255,255,255,0.1); padding: 0 18px;}

/*-------------------------------
main
-------------------------------*/
#main {width: 100%; overflow: hidden;}
#main #logo {position: relative; left: calc(50% - 123px); margin-top: 160px;}
#main #anchor {position: relative; left: calc(100% - 199px - 20px); margin-top: 40px; padding-bottom: 20px;}
#main #bento {position: absolute; left: 40px ; bottom: 0px;}

/*-------------------------------
news
-------------------------------*/
#news {width: 92%; margin: -80px auto 0; padding-top: 80px;}
#news h3 {font-size: 1.6rem; border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 24px;}
#news dl {margin-bottom: 60px}
#news dt {padding: 20px 0 12px}
#news dd {font-size: 1.2rem; color: #666; font-family: 'Barlow', sans-serif; border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 20px}

#entrance img {border-radius: 10px;}

/*-------------------------------
message
-------------------------------*/
#message {width: 92%; margin: -20px auto 0; padding-top: 80px}
#message h3 {position: absolute; right: 30px}
#message #face {position: absolute; right: 12px; margin-top: 312px; transform:rotate(3deg); mix-blend-mode: multiply;}
#message p {line-height: 2.4em; margin-top: 20px; margin-left: 15px;}
#message p:first-of-type {margin-top: 40px;}

@media screen and (min-width: 500px){
	#message h3 {right: calc((100% - 500px)/2 + 30px);}
	#message #face {right: calc((100% - 500px)/2 + 12px);}
}

/*-------------------------------
menu
-------------------------------*/
#menu {width: 100%; padding: 80px 0; margin-top: 80px; background-color: rgba(0,0,0,.05)}
#menu .inner {width: 92%; margin: 0 auto;}

#menu h3 {text-align: center;}
#menu .s-ttl {color: #d70c18; font-size: 1rem; text-align: center; margin-top: 20px; font-family:'Gordita Medium', sans-serif;}
#menu .photo {margin: 48px 0 28px;}
#menu dl {margin: 0 auto; width: 88%;}
#menu dt {padding: 12px 0 4px; line-height: 1.6em}
#menu dd {font-size: 1.2rem; color: #666; font-family: 'Barlow', sans-serif; border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 14px}
#menu .etc {margin: 20px auto 0; width: 88%;}
#menu .more {display: flex; justify-content: space-around; width: 160px; height: 48px; border-radius: 24px; box-shadow: 4px 6px 8px 4px rgba(0,0,0,0.1); margin: 48px auto 0; line-height: 48px; background: url("../img/arrow.svg") no-repeat #FFF 136px 21px; background-size: 10px 6px; }
#menu .more.active{background: url("../img/arrow2.svg") no-repeat #FFF 136px 21px; background-size: 10px 6px;}
#menu .more:before{content: 'もっと見る'}
#menu .more.active:before{content: '閉じる'}
#menu .more:hover {color: #d70c18; }
#menu .content {display: none;}

/*-------------------------------
takeout
-------------------------------*/
#takeout {width: 100%; padding: 80px 0; overflow: hidden;}
#takeout .ttl {position: absolute; right: 20px;}
.tate-ttl {position: absolute; color: #d70c18; font-size: 1rem; font-family:'Gordita Medium', sans-serif; top:1px; left: -24px; letter-spacing: 0.3em;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

#takeout .takeout-cont {background: url("../img/base.svg") no-repeat; height: 386px; width: 100%; color: #FFF;}
#takeout .cont01 {margin-top: 50px}
#takeout .cont02 {margin-top: -15px; transform: scaleX(-1);}
#takeout .cont03 {margin-top: -15px}
#takeout .cont04 {margin-top: -15px; transform: scaleX(-1);}
#takeout .hanten {transform: scaleX(-1);}
#takeout .recommend {height: 80px; width: 80px; font-size: 1.6rem; text-align: center; line-height: 1.4em; position: relative;}
#takeout .cont-left .recommend {margin-left: 15px;}
#takeout .cont-right .recommend {margin-left: calc(100% - 95px);}
#takeout .recommend p {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80px;}
#takeout .cont-left .recommend span:first-child {font-size: 1.4rem; font-weight: 500;}
#takeout .cont-left .photo {margin: -50px 0 0 20px}
#takeout .cont-right .recommend span:first-child {font-size: 1.2rem; font-weight: 500;}
#takeout .cont-right .photo {margin: -30px 0 0 calc(100% - 340px);}
#takeout .cont03 .photo {margin: -40px 0 0 25px}
#takeout .cont04 .photo {margin: -40px 0 0 calc(100% - 320px);}
#takeout .textArea { text-align: center; width: 280px; margin-top: 15px; font-size: 1.8rem; font-weight: 500;}
#takeout .cont-right .textArea {margin-left: calc(100% - 280px);}
#takeout .name span:first-child {line-height: 1.8em;}
#takeout .name span:last-child {font-family:'Gordita Medium', sans-serif; line-height: 1.8em;}
#takeout .set {text-align: center; margin-top: 40px; font-size: 1.8rem; font-weight: 500;}
#takeout .tel {text-align: center; width: 92%; padding: 32px 0 16px; margin: 32px auto 0; border-radius: 15px; box-shadow: 4px 6px 8px 4px rgba(0,0,0,0.1); background-color: #FFF;}
#takeout .tel span:first-child {line-height: 1.8em; font-weight: 500;}
#takeout .tel span:last-child {font-family:'Gordita Medium', sans-serif; font-size: 2.4rem; line-height: 2.5em}

@media screen and (min-width: 500px){
	#takeout .ttl {right: calc((100% - 500px)/2 + 30px);}
}

/*-------------------------------
shop
-------------------------------*/
#shop {width: 100%; padding: 80px 0 48px; background-color: rgba(0,0,0,.05)}
#shop .inner {width: 92%; margin: 0 auto;}

#shop h3 {text-align: center;}
#shop .s-ttl {color: #d70c18; font-size: 1rem; text-align: center; margin-top: 20px; font-family:'Gordita Medium', sans-serif;}
#shop .photo {margin: 48px 0 8px;}

#shop .info {display: flex; margin-top: 40px;}
#shop .info .shop-ttl {width: 80px; position: relative;}
#shop .tate-ttl {left: 28px;}

#shop .info .shop-info {padding-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,.1); width: 100%; margin-top: -0.2em;}
#shop .info:last-child .shop-info {padding-bottom: 0px; border-bottom: none;}
#shop .info .shop-info p {line-height: 1.6em;}
#shop .info .att {font-family:'Gordita Medium', sans-serif; font-size: 1.8rem}

.t10 {padding-top: 10px;}
.red {color: #d70c18;}

/*-------------------------------
footer
-------------------------------*/
footer {width:100%; background-color: #FFF; font-family:'Gordita Regular', sans-serif; font-size: 1.1rem; text-align: center; padding: 20px 0 16px;}