@charset "UTF-8";
/*
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-family: YakuHanMP, "Noto Serif JP", serif;
*/
@font-face {
  font-family: 'samucafe';
  src:
    url('fonts/samucafe.ttf?1ck0sn') format('truetype'),
    url('fonts/samucafe.woff?1ck0sn') format('woff'),
    url('fonts/samucafe.svg?1ck0sn#samucafe') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'samucafe' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-instagram::before {
  content: "\69";
}


/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/11/28
* Last update : 2017/11/28
* Made by     : Matsuoka Tomoaki
* Updated by  : Matsuoka Tomoaki
*
**********************************************************************/


/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-weight: 500; font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; counter-reset: number 0; color: #4d4d4d; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}



/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/
body{ background: #B3082D;}


/* header
**********************************************************************/
header{ width: 100%; height: 60px; background: #B3082D; position: fixed; top: 0; left: 0; z-index: 999;}
header h1{ width: 196px; height: 35px; position: absolute; top: 12px; left: 16px;}
header ul{ height: 0; margin: 60px 0 0 0; background: rgba(179,8,45,0.75); overflow: hidden; transition: all .4s;}
header ul.active{ height: 305px;}
header ul li{ margin: 1px 0 0 0;}
header ul li a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; background: rgba(106,7,29,0.75); font-size: 16px; color: #FFFFFF; text-align: center; letter-spacing: 2px;}
header ul li a._rsv { color: #FFFF00; }
header ul li.reserv{ width: 100%; height: 50px; position: fixed; right: 0; bottom: 0;}
header ul li.reserv a{ width: 100%; height: 50px; background: rgba(43,2,48,1); line-height: 50px; position: relative;}

header ul li.reserv a::after{ content: ""; width: 13px; height: 16px; background: url(../img/res_arrow.svg) no-repeat; position: absolute; top: 16px; right: 15px;}
header ul li.reserv a span{ display: inline-block;}
header ul li.reserv a span:nth-child(1){ padding: 0 8px 0 0; font-size: 17px;}
header ul li.reserv a span:nth-child(2){ font-size: 15px;}
header a.trigger,
header a.trigger span{ display: inline-block; transition: all .4s;}
header a.trigger{ width: 30px; height: 18px; position: absolute; top: 20px; right: 16px;}
header a.trigger span{ width: 100%; height: 2px; background: #FFFFFF; position: absolute; left: 0;}
header a.trigger span:nth-of-type(1){ top: 0;}
header a.trigger span:nth-of-type(2){ top: 9px;}
header a.trigger span:nth-of-type(3){ top: 18px;}
header a.trigger.active span:nth-of-type(1){ transform: translateY(10px) rotate(-45deg);}
header a.trigger.active span:nth-of-type(2){ opacity: 0;}
header a.trigger.active span:nth-of-type(3){ transform: translateY(-8px) rotate(45deg);}
@media only screen and (min-width: 681px) {
	header ul li.reserv{ display: none; }
}



.sp-only { display: none !important; }
.sp-only-2 { display: none !important; }
.pc-only { display: block !important; }
.pc-only-2 { display: inline-block !important; }
@media screen and (max-width: 680px) {
	.sp-only { display: block !important; }
	.sp-only-2 { display: inline-block !important; }
	.pc-only { display: none !important; }
	.pc-only-2 { display: none !important; }
}

/* main
**********************************************************************/
main{ width: calc(100vw - 32px); height: calc(100vw * 0.8); margin: 60px auto 0 auto; background: url(../img/main_bg.jpg) no-repeat; background-size: 100% 100%; overflow: hidden; position: relative;}
main h2{ display: block; width: 100%; font-size: 14px; line-height: 1.5; color: #FFFFFF; font-weight: 300; letter-spacing: 2px; text-align: center; position: absolute; top: calc(100vw * 0.08); z-index: 3; text-shadow: 0px 0px 3px #333333;}
main h2 span{ display: block; font: 14px/1.5 "RogueSerifW00-Medium";}
@media print, screen and (min-width: 550px){
  main h2,
  main h2 span{ font-size: 20px;}
}
main .logo{ width: calc(100vw * 0.35); height: calc(100vw * 0.35 * 0.94); position: absolute; top:calc(((100vw * 0.8) - (100vw * 0.35 * 0.94)) / 2); left:calc((100vw - (100vw * 0.35 + 30px)) / 2); }

main .left{ width: auto; height: 100%; position: absolute; top: 0px; left: 0px;}
main .right{ width: auto; height: 100%; position: absolute; top: 0px; right: 0px;}
.howto .left,
.howto .right { display: none; }

/* band
**********************************************************************/
.band{ height: 0; margin: 0; background: rgba(0,0,0,0.4); font: 15px/31px "DIN"; color: #FFFFFF; text-align: center; letter-spacing: 2px; position: relative; z-index: 4;}


/* title
**********************************************************************/
section h3{ font: 500 28px YakuHanJP_Noto, "Noto Sans JP", sans-serif; color: #FFFF00; line-height: 1.321; letter-spacing: 2px; text-align: center; }
section h4{ font-size: 16px; line-height: 1.5; color: #FFFFFF; font-weight: 300; letter-spacing: 2px; text-align: center;}
section h4 span{ display: block; font: 16px/1.3 "RogueSerifW00-Medium";}


/* logo under mv
**********************************************************************/
.logo_undermv { position: relative; padding-top: 54px; padding-bottom: 74px; text-align: center; }
.logo_undermv::before { position: absolute; top: 0; left: 0; width: 55%; height: 100%; clip-path: polygon(0 0, 0% 100%, 100% 0); background: #6b0b1b; content: ""; z-index: 0; }


.news-sl-wrap-outer { position: relative; margin-top: 62px; z-index: 10; overflow: hidden; }
.news-sl-wrap { margin-top: 20px; }
/*
.news-sl-wrap {
	width: calc(100% + 30px); padding: 0 15px;
	margin-left: -15px;
	overflow: hidden;
}
*/

.news-sl { width: 278px; border-radius: 5px; margin-left: 15px; margin-right: 15px; overflow: hidden; box-shadow: 8px 8px 8px 5px rgba(96, 12, 12, 0.5); }
.news-sl__thumb { margin: 0; width: 100%; height: 180px; overflow: hidden;}
.news-sl__cont { background: #fff; padding: 16px 16px 13px; min-height: 158px; }

.news-sl__pf { display: flex; align-items: center; margin-bottom: 13px; }
.news-sl__pf__img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 8px; }
.news-sl__pf__txt {  }
.news-sl__pf__txt strong,
.news-sl__pf__txt span { display: block; font-size: 13px; font-weight: 400; line-height: 1; text-align: left; }
.news-sl__pf__txt strong { margin-bottom: 6px; }
.news-sl__pf__article { font-size: 13px; font-weight: 400; line-height: 1.4615; text-align: left; }
.news-sl__pf__article a{ color: #333;}
.btn-news-ig { display: flex; justify-content: center; align-items: center; width: calc(100% - 80px); height: 56px; border: 1px solid #ffff00; margin-top: 10px; margin-left: auto; margin-right: auto; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; text-align: center; color: #ffff00; }
.btn-news-ig::before { margin-right: 10px; font-family: 'samucafe'; font-size: 16px; font-weight: 500; line-height: 1; content: "i"; }

.news-sl-wrap .slick-track { padding-bottom: 30px; }

.news-sl-wrap .slick-prev,
.news-sl-wrap .slick-next { width: 40px; height: 40px; background: #000; border-radius: 50%; z-index: 50; }

.news-sl-wrap .slick-prev::before,
.news-sl-wrap .slick-next::before { position: absolute; top: 50%; width: 10px; height: 10px; border-right: 2px solid #fff; border-top: 2px solid #fff; content: ""; }
.news-sl-wrap .slick-prev::before { left: 50%; transform: translate(-30%, -50%) rotate(225deg); }
.news-sl-wrap .slick-next::before { right: 50%; transform: translate(30%, -50%) rotate(45deg) ; }

@media print, screen and (max-width: 680px){
	.news-sl-wrap .slick-prev { left: 50%; transform: translateX(-400%); }
	.news-sl-wrap .slick-next { right: 50%; transform: translateX(400%); }
}
@media print, screen and (min-width: 681px){
	.logo_undermv { margin: 0; padding: 128px 0 80px; }
	
	/*.logo_undermv::before { width: 69%; height: calc(100% - 136px); }*/
	.logo_undermv::before { left: 50%; transform: translateX(-74%); width: 70%; height: calc(100% - 136px); }
	.news-sl-wrap { transform: translateX(10px); width: 920px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; padding-bottom: 30px; }
	.news-sl-wrap .slick-prev,
	.news-sl-wrap .slick-next { width: 50px; height: 50px; }
	.news-sl-wrap .slick-prev { left: -74px; }
	.news-sl-wrap .slick-next { right: -48px; }
	.btn-news-ig { max-width: 320px; transition: .4s; }
	.btn-news-ig:hover { background: #ffff00; color: #b3082d; }
	.btn-news-ig::before { transition: .4s; }
	.btn-news-ig:hover::before { color: #b3082d; }
}


.btn-news-ig { display: flex; justify-content: center; align-items: center; width: calc(100% - 80px); height: 56px; border: 1px solid #ffff00; margin-top: 10px; margin-left: auto; margin-right: auto; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; text-align: center; color: #ffff00; }
.btn-news-ig::before { margin-right: 10px; font-family: 'samucafe'; font-size: 16px; font-weight: 500; line-height: 1; content: "i"; }



/* whats
**********************************************************************/
#whats{ position: relative;}
.whats-wrap { position: relative; }
/*#whats h3{ display: block; width: 100%; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); z-index: 5;}*/




.whats__cent h4{ margin: 0 0 25px 0;}
.whats__cent p{ font-size:14px; line-height: 1.5; color: #FFFFFF;}
.whats__cent p br{ display: none;}
.whats__cent p.en{ margin: 20px 0 0 0; font-size: 13px;}
@media print, screen and (max-width: 680px){
	.whats__cent{ padding: 25px 16px;}
	#whats ul{ width: 100%; overflow: hidden;}
	#whats ul li{ width: 33%; height: calc(100vw * 0.33 * 0.69 - 2px); float: left; overflow-y: hidden;}
	#whats ul li:last-child{ width: 34%;}
}
@media print, screen and (min-width: 681px){
	#whats{ background: #6c051b; padding-top: 128px; }
	.whats-wrap { width: 830px; background: #B2082D; margin-left: auto; margin-right: auto; padding-bottom: 108px; }
	.whats-wrap::before { position: absolute; top: 0; right: 200px; width: calc(50% + 50vw - 200px); height: 100%; background: #B2082D; content: ""; z-index: 0; }
	#whats h3,
	.whats__cent,
	.whats__wrap ul { position: relative; z-index: 10; }
	#whats h3 { top: -30px; text-align: left; }
	.whats__cent h4 { margin-bottom: 66px; text-align: left; }
	.whats__cent  p { font-size: 15px; line-height: 1.9; }
	.whats__cent p.en { margin-top: 66px; }
	.whats__cent p br { display: block; }
	#whats ul { position: absolute; top: 60px; right: -160px; display: inline-flex; flex-direction: column; }
	#whats ul li { width: 320px; }
	#whats ul li:not(:last-of-type) { margin-bottom: 15px; }
	#whats ul li img { width: 100%; }
}

    

/* information
**********************************************************************/
#information{ padding: 30px 16px 34px 16px; background: url(../img/howto_bg.jpg) no-repeat center top; background-size: auto 100%;}
#information .wrap{ padding: 22px 26px 33px 26px; background: rgba(0,0,0,.3); position: relative; counter-reset: number 0;}
#information .wrap h3{ position: absolute; top: -21px; left: 50%; transform: translateX(-50%);}

/*#information .wrap dl dt span{ margin: 0 0 0 10px; font-family: "RogueSerifW00-Medium"; font-weight: normal; letter-spacing: 1px;}*/

#information .wrap dl dd{ margin: 0 0 15px 0; font-size: 14px; color: #FFFF00; line-height: 1.3; text-align: center;}
#information .wrap dl dd strong{ margin: 0 5px 0 0; font-size: 15px;}
#information .wrap dl dd span{ margin: 0 0 0 3px; font-family: "RogueSerifW00-Medium"; font-weight: normal; letter-spacing: 1px;}
#information .wrap dl dd span.spbr{ display: block;}
#information .wrap dl dd .time{ margin: 8px 0 0 0;}
#information .wrap dl dd .time span{ font-size: 16px;}
#information .wrap dl dd .price { line-height: 1; }
#information .wrap dl dd .price strong { margin-right: 0; font-size: 31px; font-weight: 400; }
#information .wrap dl dd .price span { margin-left: 0; font-size: 14px; }
#information .wrap dl dd .food{ font-size: 13px; color: #FFFFFF; line-height: 1.4; text-align: left; overflow: hidden;}
#information .wrap dl dd .food .left{ width: 85%; margin: 16px auto 0 auto;}
#information .wrap dl dd .food .right{ width: 85%; margin: 16px auto 0 auto; padding: 0;}
#information .wrap dl dd .food .right li{ display: flex; margin: 0 0 8px 0; font-size: 14px; color: #FFFF00; font-weight: bold; align-items: center; justify-content: flex-start;}
#information .wrap dl dd .food .right li::before{ display: inline-flex; content: ""; width: 18px; height: 18px; margin: 0 5px 0 0; background: #FFFF00; font: 15px/1 "RogueSerifW00-Medium"; color: #9F212E; align-items: center; justify-content: center; counter-increment: number 1; content: counter(number); border-radius: 50% 50%;}
#information .wrap dl dd .food .right li span{ margin: 0 0 0 10px;}
#information h4{ margin: 13px 0; padding: 5px 0; background: #AA082D; font-size: 15px; font-weight: bold; line-height: 1.2; letter-spacing: 0;}
#information h4 span{ display: inline; margin: 0 0 0 5px; font-size: 15px; letter-spacing: 1px;}
#information h4.howto-ttl { display: flex; justify-content: center; align-items: center; font: 400 12px YakuHanMP, "Noto Serif JP", serif; }
#information h4.howto-ttl span { margin-right: 10px; padding-bottom: 3px; font: 500 20px YakuHanJP_Noto, "Noto Sans JP", sans-serif; }
#information .howto{ counter-reset: number 0;}
#information .howto ol{ margin: 0; padding: 0;}
#information .howto ol li{ padding: 2px 0 15px 37px; font-size: 14px; font-weight: bold; line-height: 1.4; color: #FFFFFF; letter-spacing: 0; background: url(../img/howto_line.svg) repeat-y 15px top/1px 1px; position: relative;}
#information .howto ol li span{ display: block; margin: 3px 0 0 0; font-weight: normal;}
#information .howto ol li::before{ display: inline-flex; content: ""; width: 30px; height: 30px; background: #AA082D; color: #FFFFFF; align-items: center; justify-content: center; counter-increment: number 1; content: counter(number); border-radius: 50% 50%; position: absolute; top: 0; left: 0;}
#information .howto ol.right li:last-child{ background: none;}
@media only screen and (min-width: 681px) {
	#information h4.howto-ttl { margin-bottom: 10px; font-size: 22px; }
	#information h4.howto-ttl span { font-size: 30px; }
}



/* movies
**********************************************************************/
#movies{ padding: 16px;}
#movies ul li.coming{ width: calc(100vw - 32px); margin: 20px 0 0 0; height: calc((100vw - 32px) * 0.56); padding: calc((100vw - 32px) * 0.56 * 0.26) 0 0 0; background: url(../img/movie_img_coming.png) no-repeat; background-size: cover; text-align: center;}
#movies ul li.coming p{ margin: 0 0 10px 0; font: 15px/24px "RogueSerifW00-Medium"; color: #FFFFFF; letter-spacing: 2px;}
#movies ul li.coming img{ width: calc(100vw * 0.12); height: auto;}
#movies ul li{ width: 100%; margin: 20px 0 0 0;}
#movies ul li a{ display: block; width: 100%; height: calc((100vw - 32px) * 0.68); background: #000; position: relative;}
#movies ul li a::after{ content: ""; width: 50px; height: 50px; background: url(../img/movie_icon_start.svg) no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#movies ul li a img{ width: 100%; height: calc((100vw - 32px) * 0.68); opacity: .7; transition: all .3s;}
#movies ul li a:hover img{ opacity: .3;}
#movies ul li h4{ margin: 10px 0 0 0; font-size: 14px; font-weight: bold; line-height: 1.2; letter-spacing: 0; text-align: left;}
#movies ul li p{ font: 14px/1.2 "RogueSerifW00-Medium"; color: #FFFFFF; letter-spacing: 1px; text-align: left; }


/* goods
**********************************************************************/
#goods{ margin: 20px 0 0 0; padding: 10px 0 20px 0; background: #80002C; position: relative;}
#goods h3{ display: block; width: 100%; position: absolute; top: -17px; z-index: 5;}
#goods ul li{ width: calc(100% - 32px); margin: 20px auto 0 auto;}
#goods ul li a{ display: block; width: 100%; height: calc((100vw - 32px) * 0.68); position: relative;}
#goods ul li a img{ width: 100%; height: calc((100vw - 32px) * 0.68);}
#goods ul li h4{ margin: 10px 0 0 0; font-size: 14px; font-weight: bold; line-height: 1.2; letter-spacing: 0; text-align: left;}
#goods ul li p{ font: 14px/1.2 "RogueSerifW00-Medium"; color: #FFFFFF; letter-spacing: 1px;}


/* access
**********************************************************************/
#access { position: relative; padding: 16px; }
#access::before { position: absolute; top: 0; left: 0; display: block; width: 100vw; height: 120px; background: #6b0b1b; content: ""; z-index: 0; }
#access h3 { position: relative; z-index: 10;}
#access #googlemap{ width: 100%; aspect-ratio: 16 / 9; margin: 20px 0 0 0; background: #999999; position: relative; overflow: hidden;}
#access #googlemap iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#access #googlemap img[src="img/access_icon.svg"]{ width: 100% !important; height: 100% !important;}
#access ul li{ margin: 10px 0 0 0; font-size: 14px; line-height: 1.5; color: #80002C;}
#access ul li strong{ display: block;}
#access ul li a{ color: #80002C;}
@media only screen and (min-width: 681px) {
	#access::before { height: 223px; }
}


/* footer
**********************************************************************/
footer ul{ display: flex; justify-content: center; align-items: center; width: 230px; margin: 20px auto 0; }
footer ul li{ width: 25px; }
footer ul li:not(:last-child) { margin-right: 20px; }
footer p{ padding: 20px 0 30px 0; font: 12px/1.0 "RogueSerifW00-Medium"; color: #FFFFFF; letter-spacing: 2px; text-align: center; font-feature-settings : "liga" off;
}
footer .ologo{ width: 100%; background: #fff; text-align: center;}
footer .ologo span{ display: inline-block; height: 27px; padding: 0 0 0 40px; background: url(../img/ologo.png) no-repeat left 2px; background-size: auto 23px; font-size: 15px; font-weight: bold; line-height: 27px; color: #000099;}


/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/

@media print, screen and (min-width: 681px){
  body{ background: #B3082D; min-width: 1050px;}
}


/* header
**********************************************************************/
@media print, screen and (min-width: 681px){
  header ul li.reserv{ width: 120px; height: 60px; margin: 0; position: fixed; right: 62px; top: 0;}
  header ul li.reserv a{ display: block; width: 120px; height: 60px; padding: 14px 0 0 21px; background: rgba(43,2,48,0.85); line-height: 1; text-align: left;}
  header ul li.reserv a::after{ top: 15px; right: 20px;}
  header ul li.reserv a span{ display: block;}
  header ul li.reserv a span:nth-child(1){ padding: 0 0 2px 0; font-size: 18px;}
  header ul li.reserv a span:nth-child(2){ font-size: 12px;}
}

@media print, screen and (min-width: 1050px){
  header{ height: 60px;}
  header h1{ width: 224px; height: 40px; top: 50%; transform: translateY(-50%); left: 30px;}
  header ul{ height: auto; margin-top: 0; background: none; letter-spacing: 0; position: absolute; top: 0; right: 30px; transition: none;}
  header ul li{ margin: 0 0 0 20px; float: left;}
  header ul li a{ display: inline; height: auto !important; background: none; font-size: 17px; line-height: 60px; letter-spacing: 1px;}
  header ul li.reserv{ width: 110px !important; height: 75px !important; right: 30px;}
  header ul li.reserv a{ width: 110px !important; height: 75px !important; padding: 21px 0 0 18px;}
  header ul li.reserv a::after{ top: 22px; right: 17px;}
  header ul li.reserv a span:nth-child(1){ font-size: 18px;}
  header ul li.reserv a span:nth-child(2){ font-size: 11px;}
  header a.trigger{ display:none;}
}



/* main
**********************************************************************/
@media print, screen and (min-width: 681px){
  main{ width: 990px; height: calc(100vh - 60px); margin-top: 60px; background-size: cover;}
  main h2{ padding: 0 0 0 40px; font-size: 20px; line-height: 1.5; position: absolute; top: calc((100vh - 500px) / 2);}
  main h2 span{ font-size: 26px;}
  main .logo{ width: 344px; height: 340px; top: calc((100vh - 340px) / 2); left: 330px;}
}
@media print, screen and (min-width: 1050px){
  main{ width: calc(100% - 60px); height: calc(100vh - 75px); min-height: 680px; margin-top: 75px;}
  main .logo{ top: calc((100vh - 340px) / 2); left: calc((100vw - 344px) / 2 - 20px);}
}


/* band
*********************************************************************
@media print, screen and (min-width: 681px){
  .band{ height: 900px; margin: 0; font: 29px/43px "DIN"; letter-spacing: 3px;}
}
*/
/* whats
*********************************************************************
@media print, screen and (min-width: 681px){
  #whats{ width: 909px; background: #B2082D; position: relative; z-index: 5;}
}
@media print, screen and (min-width: 1050px){
  #whats{ width: calc((100vw + 768px) / 2);}
}
@media print, screen and (min-width: 681px){
  #whats h3{ text-align: left; top: -30px; left: 75px;}
}
@media print, screen and (min-width: 1050px){
  #whats h3{ left: calc((100vw - 900px) / 2);}
}
@media print, screen and (min-width: 681px){
  #whats ul{ width: 320px; position: absolute; top: 60px; left: 709px;}
}
@media print, screen and (min-width: 1050px){
  #whats ul{ left: calc((100vw + 368px) / 2);}
}
@media print, screen and (min-width: 681px){
  #whats ul li{ width: 320px; height: auto; margin: 0 0 15px 0; float: none;}
  #whats ul li:last-child{ width: 320px;}
  .whats__cent { width: 630px; margin: 0 auto; padding: 0; position: absolute; top: 0; left: 75px;}
}
@media print, screen and (min-width: 1050px){
  .whats__cent { left: calc((100vw - 900px) / 2);}
}
@media print, screen and (min-width: 681px){
  .whats__cent  h4{ margin: 70px 0 50px 0; text-align: left;}
  .whats__cent  p{ font-size:15px; line-height: 1.9;}
  .whats__cent  p br{ display: block;}
  .whats__cent  p.en{ margin: 40px 0 0 0; font-size: 14px;}
}
*/

/* title
**********************************************************************/
@media print, screen and (min-width: 681px){
  section h3{ font-size: 42px; letter-spacing: 3px;}
  section h4{ font-size: 27px; letter-spacing: 3px;}
  section h4 span{ font-size: 37px;}
}


/* information
**********************************************************************/
@media print, screen and (min-width: 681px){
  #information{ padding: 60px 0 140px 0; background-size: 100% 100%;}
  #information .wrap{ width: 900px; margin: 0 auto; padding: 44px 80px 85px 80px;}
  #information .wrap h3{ top: -30px;}
/*  #information .wrap dl dt{ margin: 0 0 23px 0; padding: 7px 0 8px 0; font-size: 18px; letter-spacing: 2px;}*/
  #information .wrap dl dt span{ font-size: 20px;}
  #information .wrap dl dd{ margin: 0 0 40px 0; font-size: 17px;}
  #information .wrap dl dd:last-of-type{ margin: 0;}
  #information .wrap dl dd strong{ margin: 0 10px 0 0; font-size: 22px;}
  #information .wrap dl dd span{ margin: 0 0 0 5px; letter-spacing: 2px;}
  #information .wrap dl dd span.spbr{ display: inline;}
  #information .wrap dl dd .time{ margin: 10px 0 0 0; font-size: 22px;}
  #information .wrap dl dd .time span{ font-size: 24px;}
  #information .wrap dl dd .price strong { font-size: 45px; }
  #information .wrap dl dd .price span { font-size: 26px; }
  #information .wrap dl dd .food{ font-size: 14px; line-height: 1.5;}
  #information .wrap dl dd .food .left{ width: 304px; margin: 21px 0 0 0; float: left;}
  #information .wrap dl dd .food .right{ width: 352px; margin: 21px 0 0 0; padding: 5px 0 0 0; float: right;}
  #information .wrap dl dd .food .right li{ margin: 0 0 18px 0; font-size: 18px;}
  #information .wrap dl dd .food .right li::before{ width: 20px; height: 20px; margin: 0 8px 0 0; font-size: 18px;}
  #information h4{ width: 900px; margin: 40px auto 30px auto; padding: 7px 0 8px 0; font-size: 18px; letter-spacing: 2px;}
  #information h4 span{ display: inline; margin: 0 0 0 8px; font-size: 22px; letter-spacing: 2px;}
  #information .howto{ width: 900px; margin: 0 auto; overflow: hidden;}
  #information .howto ol li{ padding: 2px 0 23px 50px; font-size: 14px; line-height: 1.3; background: url(../img/howto_line.svg) repeat-y 20px top/1px 1px;}
  #information .howto ol li span{ margin: 6px 0 0 0;}
  #information .howto ol li::before{ width: 40px; height: 40px; font-size: 18px;}
  #information .howto ol.left{ width: 480px; float: left;}
  #information .howto ol.left li:last-child{ background: none;}
  #information .howto ol.right{ width: 400px; float: right;}
}


/* movies
**********************************************************************/
@media print, screen and (min-width: 681px){
  #movies{ padding: 50px 0 60px;}
  #movies ul{ width: 900px; margin: 30px auto 0; overflow: hidden;}
  #movies ul li.coming{ height: 242px; padding: 80px 0 0 0;}
  #movies ul li.coming p{ margin: 0 0 15px 0; font-size: 20px;}
  #movies ul li.coming img{ width: 50px; height: 50px;}
  #movies ul li{ width: 288px; margin: 0 18px 0 0; float: left;}
  #movies ul li a,
  #movies ul li img{ height: 195px !important;}
  #movies ul li:last-child{ margin: 0;}
}


/* goods
**********************************************************************/
@media print, screen and (min-width: 681px){
  #goods h3{ display: block; width: 100%; position: absolute; top: -30px; z-index: 5;}
  #goods ul{ width: 900px; margin: 50px auto; overflow: hidden;}
  #goods ul li{ width: 288px; margin: 0 18px 20px 0; float: left;}
  #goods ul li:nth-child(3n){ margin: 0 0 20px 0;}
  #goods ul li a{ height: 195px !important; background: #FFFFFF;}
  #goods ul li a img{ height: 195px !important; transition: all .3s;}
  #goods ul li a:hover img{ opacity: .7;}
}


/* access
*********************************************************************
@media print, screen and (min-width: 681px){
  #access{ width: 100%; padding: 50px 30px 30px; margin: -30px auto 0; position: relative; z-index: 6;}
}
@media print, screen and (min-width: 1050px){
  #access{ width: calc(100% - 60px);}
}
*/
@media print, screen and (min-width: 681px){
  #access #googlemap{ background: #999; margin-top: 36px; }
}
@media print, screen and (min-width: 681px){
  #access ul{ margin: 20px 0 0 0;}
  #access ul li{ margin: 3px 0 0 0;}
  #access ul li br{ display: none;}
  #access ul li strong{ display: inline; font-size: 16px; margin: 0 20px 0 0;}
}


/* footer
**********************************************************************/
@media print, screen and (min-width: 681px){
  footer ul{ margin-top:72px; }
}




/*************************************************************************************************************************
* news用
*************************************************************************************************************************/
main.news{ display: flex; width: calc(100vw - 32px); height: 130px; margin: 60px auto 0 auto; background: url(../img/news_mainimg.jpg) no-repeat; background-size: cover; align-items: center; justify-content: center;}
main.news h2{ display: inline; font: 38px/1.2 "RogueSerifW00-Medium"; color: #FFFF00; position: relative; top: auto; left: auto;}
@media print, screen and (min-width: 550px){
  main.news h2{ font-size: 38px;}
}
@media print, screen and (min-width: 681px){
  main.news{ width: calc(100% - 60px); height: 200px; margin-top: 60px; background-size: cover;}
  main.news h2{ font-size: 42px;}
}
@media print, screen and (min-width: 1050px){
  main.news{ width: calc(100% - 60px); margin-top: 75px;}
}
@media print, screen and (min-width: 1050px) and (min-height: 900px){
  main.news{ background-size: cover;}
}

#news{ padding: 30px 16px 0;}
#news ul li{ margin: 0 0 30px 0;}
#news ul li > img{ margin: 10px 0;}
#news ul li dl dt{ font-size: 15px; font-weight: bold; line-height: 1.3; color: #FFFFFF;}
#news ul li dl dt span{ display: inline-block; margin: 0 0 5px 0; padding: 1px 3px 2px 3px; background: #000000; font: 13px/1 "RogueSerifW00-Medium"; color: #FFFFFF;}
#news ul li dl dd{ margin: 8px 0 0 0; padding: 8px 0 0 0; font-size: 14px; color: #FFFFFF; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.5);}
#news ul li dl dd a{ margin: 0 2px; color: #FFFFFF; text-decoration: underline;}
@media print, screen and (min-width: 681px){
  #news{ width: 940px; margin: 80px auto 0 auto; padding: 0 0 30px 0;}
  #news ul li{ display: flex; margin: 0 0 50px 0; justify-content: flex-start; align-items: flex-start;}
  #news ul li > img{ flex-shrink: 0; width: 320px; margin: 0 20px; height: auto; align-items: flex-start;}
  #news ul li dl{ padding: 0 20px;}
  #news ul li dl dt{ font-size: 20px;}
  #news ul li dl dt span{ margin: 0 0 10px 0; padding: 2px 5px 3px 5px; font-size: 15px;}
  #news ul li dl dd{ margin: 12px 0 0 0; padding: 12px 0 0 0; font-size: 15px; line-height: 1.6;}
}


.copyright { font-size: 10px; font-weight: 400; line-height: 1; text-align: center; }
.copyright > a { color: #fff; }


/* youtube設定 */
.mv { position: relative; margin-top: 60px; padding-top: 100%; overflow: hidden; }/* padding-top: 56.25%;*/
#youtube { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.77777778%; /* 16:9 の幅→16 ÷ 9＝ 177.77% */ height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */ min-height: 100%; min-width: 100%; }
#youtube .ytp-chrome-top { display: none; }
/*youtubeがクリックされないためのマスク*/
.mv__bgmask { position: absolute; z-index: 2; top:0; width:100%; height: 100%; background-color: rgba(0,0,0,0.0); mix-blend-mode: multiply; }




@media only screen and (min-width: 681px) {
	.mv { min-height: inherit; margin-top: 60px; padding-top: 56.25%; }
	#youtube { min-height: 101%; }
	
}



/*************************************************************************************************************************
* Objective Fit Image
*************************************************************************************************************************/
.ofi-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ofi-contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/*************************************************************************************************************************
	Additonal CSS 20240826
*************************************************************************************************************************/
.btn-rsv { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; max-width: 660px; width: calc(100% - 56px); height: 34px; background: rgb(248,251,255); background: linear-gradient(90deg, rgba(248,251,255,1) 0%, rgba(223,236,238,1) 20%, rgba(200,216,223,1) 50%, rgba(223,236,238,1) 60%, rgba(225,238,240,1) 70%, rgba(200,216,223,1) 85%, rgba(244,255,255,1) 100%); border-radius: 17px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.2); padding-left: 44px; font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; line-height: 1; color: #b10e31; z-index: 100; }
.btn-rsv::before { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: block; width: 26px; height: 26px; background: url("../img/f_icon_cirarr.svg") no-repeat center/contain; content: ""; }
.btn-rsv strong { font-size: 14px; font-weight: 700; }
.btn-rsv span { margin-left: 8px; font-size: 10px; font-weight: 400; }

.btn-rsv.fixed { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); }
.logo-wrap { position: relative;  color: #fff; z-index: 10; }
.logo-wrap .logo img { width: 158px; }
.logo-ttl { font-family: YakuHanMP, "Noto Serif JP", serif; font-size: 22px; font-weight: 400; line-height: 1.5; text-align: left; }
.logo-txt { margin-top: 12px; font: 400 15px YakuHanJP_Noto, "Noto Sans JP", sans-serif; line-height: 1.7334; }
@media only screen and (max-width: 680px) {
	.logo-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	.logo {  }
	.logo-ttl { margin-left: 10px; }
	.logo-txt { width: 100%; }

}
@media only screen and (min-width: 681px) {
	.btn-rsv { top: -45px; height: 90px; border-radius: 45px; padding-left: 96px; overflow: hidden; }
	.btn-rsv::before { left: 26px; width: 50px; height: 50px; transition: .4s; }
	.btn-rsv:hover::before { left: 31px; }
	.btn-rsv::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #fff; transition: .4s; opacity: 0; content: ""; mix-blend-mode: overlay; z-index: 10; pointer-events: none; }
	.btn-rsv:hover::after { opacity: 0.2; }
	.btn-rsv strong { font-size: 29px; }
	.btn-rsv span { margin-top: 5px; margin-left: 14px; font-size: 21px; }
	.btn-rsv.fixed { top: 80px; }
	.logo-wrap { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 0px; }
	.logo-wrap .logo { grid-area: 1 / 1 / 3 / 2; margin-right: 78px; text-align: right; }
	.logo-wrap .logo img { width: 365px; }
	.logo-ttl,
	.logo-txt { display: flex; }
	.logo-ttl { grid-area: 1 / 2 / 2 / 3; align-items: flex-end; font-size: 37px; line-height: 1.351; }
	.logo-txt { grid-area: 2 / 2 / 3 / 3; margin-top: 26px; line-height: 2; text-align: left; }
}

/*	What's	*/
.whats_exp-wrap { width: calc(100% - 50px); margin-top: 20px; padding-bottom: 34px; color: #fff; }
.whats_exp {  }

.whats_exp__ttl { font: 400 22px YakuHanMP, "Noto Serif JP", serif; line-height: 1.4; letter-spacing: 0; text-align: left; }
.whats_exp__txt { margin-top: 8px; font: 400 13px YakuHanJP_Noto, "Noto Sans JP", sans-serif; line-height: 2; }

.whats_exp--en { margin-bottom: 32px; text-align: left; }
.whats_exp--en .whats_exp__txt { margin-top: 5px; line-height: 1.5714; }
@media only screen and (max-width: 680px) {
	.whats_exp-wrap { margin-left: auto; margin-right: auto; }
}
@media only screen and (min-width: 681px) {
	.whats_exp-wrap { position: relative; width: 610px; }
	.whats_exp__ttl { font-size: 30px; line-height: 1.334; }
	.whats_exp__txt { margin-top: 22px; font-size: 15px; line-height: 2; }
	.whats_exp--en { margin-bottom: 47px; }
	.whats_exp--en .whats_exp__txt { margin-top: 24px; font-size: 17px; line-height: 1.647; }
}

/*	Schedule	*/
.sche-wrap { position: relative; display: flex; margin-top: -4px; margin-bottom: 16px; color: #ffff00; }
.sche-ttl { display: flex; justify-content: center; align-items: center; height: 30px; background-color: transparent !important; border: 1px solid #ffff00; font-size: 16px; font-weight: 400 !important; line-height: 1; letter-spacing: 0.05em; text-indent: 0.05em; text-align: center; color: #ffff00 !important; }
.price .sche-ttl { margin-bottom: 10px; }
.sche {  }

.sche__tbl {font-weight: 400; }
.sche__tbl th,
.sche__tbl td { padding-top: 5px; padding-bottom: 5px; }
.sche__tbl th { width: 60px; font-size: 12px; }
.sche__tbl td { font-size: 16px; line-height: 1.5; }
.sche__tbl .vert-top { vertical-align: text-top; }
._cirnum li::before { margin-right: 4px; font-weight: 700; }
._cirnum li:nth-child(1)::before { content: "\02460"; }
._cirnum li:nth-child(2)::before { content: "\02461"; }
._cirnum li:nth-child(3)::before { content: "\02462"; }
._cirnum li:nth-child(4)::before { content: "\02463"; }

.price-txt { margin-top: 33px; font-size: 13px; font-weight: 400; line-height: 1.769; text-align: center; color: #ffff00; }
@media only screen and (max-width: 680px) {
	.sche-wrap { flex-direction: column; }
	.sche:first-of-type { order: 1; }
	.sche-wrap::before { order: 2; display: block; width: 100%; height: 2px; background: url("../img/ptn_dot_land.svg") repeat-x 0 50%/auto 2px; margin: 12px 0; content: ""; }
	.sche:last-of-type { order: 3; }
}
@media only screen and (min-width: 681px) {
	.sche-wrap { flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; }
	.sche-wrap::before { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: block; width: 2px; height: calc(100% - 140px); background: url("../img/ptn_dot_vert.svg") repeat-y 50% 0%/2px auto; content: ""; }
	.sche-ttl { width: 100% !important; height: 46px; padding: 0 !important; font-size: 20px !important; }
	.sche { width: 50%; }
	.sche:last-of-type { padding-left: 40px; }
	.sche__tbl th { width: 74px; font-size: 16px; }
	.sche__tbl td { font-size: 22px; line-height: 1.5; }
	.price .sche-ttl { margin-bottom: 22px; }
	.price-txt { margin-top: 46px; font-size: 16px; line-height: 2; }
}


/*	Schedule	*/

.food__ttl { color: #fff; }
.food__ttl__main { font-size: 13px; font-weight: 700; line-height: 1.5384; }
.food__ttl__sub { margin-top: 10px; font-size: 12px; line-height: 1.58334; }

.food__list { margin: 20px 0 0; padding: 0; }
.food__list__item { position: relative; padding-left: 21px; font-size: 13px; font-weight: 400; line-height: 1; color: #fff; }
.food__list__item:not(:last-of-type) { margin-bottom: 10px; }
.food__list__item::before,
.food__list__item::after { position: absolute; top: 50%; transform: translateY(-40%); display: block; }
.food__list__item::before { left: 0; width: 15px; height: 15px; background: #ffff00; border-radius: 50%; content: ""; }
.food__list__item::after { left: 0; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; counter-increment: number 1;content: counter(number) " "; font-size: 11px; font-weight: 700; color: #b2062d; z-index: 10; }

@media only screen and (max-width: 680px) {
	.food { padding-top: 17px; }
	.food__ttl { position: relative; padding-left: 18px; }
	.food__ttl::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 3px; height: calc(100% - 10px); background: #fff; content: ""; }
	.food__map { margin-top: 22px; }
}
@media only screen and (min-width: 681px) {
	.food { position: relative; margin-top: 60px; padding-left: 350px; }
	.food__ttl__main { font-size: 17px; line-height: 1.529; }
	.food__ttl__sub { margin-top: 8px; font-size: 15px; line-height: 1.7334; }
	.food__map { position: absolute; top: 6px; left: 0; }
	.food__map img { width: 305px; }
	.food__list { margin-top: 28px; }
	.food__list__item { padding-left: 24px; font-size: 14px; }
	.food__list__item:not(:last-of-type) { margin-bottom: 13px; }
}


.access-wrap { position: relative; background: #fff; margin-top: 16px; padding: 30px 27px 27px; z-index: 10; }
.access {  }
.access__ttl { font: 400 21px YakuHanMP, "Noto Serif JP", serif; line-height: 1; color: #b2062d; }
.access__txt { font-size: 12px; font-weight: 400; line-height: 1.41667; text-align: left; }
.access__txt p:not(:last-of-type) { margin-bottom: 5px; }
.access__txt a { color: #4d4d4d; }
@media only screen and (max-width: 680px) {
	.access__ttl { margin-bottom: 12px; }
}
@media only screen and (min-width: 681px) {
	#access { padding: 32px 0 0; }
	.access-wrap { width: 1000px; margin-top: 16px; margin-left: auto; margin-right: auto; padding: 47px 50px 50px; }
	.access { display: flex; align-items: center; }
	.access__ttl { margin-right: 30px; font-size: 27px; font: 400 21px YakuHanMP, "Noto Serif JP", serif; line-height: 1; color: #b2062d; }
	.access__txt { font-size: 14px; line-height: 1.2; }
	.access__txt p:not(:last-of-type) { margin-bottom: 5px; }
}

.taxi-wrap { margin-top: 16px; }
.taxi {  }
.taxi__ttl { display: flex; justify-content: center; align-items: baseline; border: 1px solid #b2062d; padding: 5px 0 7px; font-family: YakuHanMP, "Noto Serif JP", serif; font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: #b2062d; }
.taxi__ttl::before { margin-right: 4px; font-size: 10px; content: "from"; }
.taxi__img { display: block; margin-top: 12px; }
@media only screen and (max-width: 680px) {
	.taxi:not(:last-of-type) { margin-bottom: 20px; }
}
@media only screen and (min-width: 681px) {
	.taxi-wrap { display: flex; justify-content: space-between; margin-top: 43px; }
	.taxi { width: calc(50% - 20px); }
	.taxi__ttl { padding: 8px 0 10px; font-size: 20px; }
	.taxi__ttl::before { font-size: 13px; }
	.taxi__img { margin-top: 20px; }
}

/* resevation modal */
.rsv-modal{ opacity: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -10; transition: opacity .3s;}
.rsv-modal.active{ opacity: 1; z-index: 2000;}
.rsv-overlay{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.rsv-area { background: #fff; width: calc(100% - 112px); max-width: 602px; padding: 30px 30px 30px; position: relative; z-index: 2; overflow: hidden; font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; }
.rsv-area::before { position: absolute; top: -7px; right: -7px; display: block; width: 130px; height: 130px; background: url("../img/obj_modal_deco_sp.svg") no-repeat center/contain; content: ""; opacity: .1; z-index: 50; mix-blend-mode: multiply; pointer-events: none; }
.rsv-ttl { font-size: 13px; font-weight: 400; line-height: 1; color: #b10e31; }
.rsv-ttl strong { display: block; margin-bottom: 5px; font-size: 17px; font-weight: 700; }
.rsv-btn-wrap { margin-top: 15px; }
.rsv-btn:not(:first-of-type) { margin-top: 8px; }
.rsv-btn a { display: flex; justify-content: center; align-items: center; height: 50px; background: #b10e31; font-size: 14px; font-weight: 500; line-height: 1; text-align: center; color: #fff; }
.rsv-close { display: block; position: absolute; width: 22px; height: 22px; top: 10px; right: 10px; text-indent: 100%; white-space: nowrap; overflow: hidden; transform: rotate(45deg); }
.rsv-close::before,
.rsv-close::after{ content: ""; background: #b10e31; position: absolute;}
.rsv-close::before{ width: 1px; height: 100%; top: 0; left: 50%; transform: translateX(-50%);}
.rsv-close::after{ width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%);}

@media print, screen and (min-width: 780px){
	.rsv-area{ width: calc(100% - 100px); padding: 35px 35px 35px;}
	.rsv-area::before { top: 50%; transform: translateY(-50%); right: 10px; width: 281px; height: 308px; background-image: url("../img/obj_modal_deco_pc.svg"); }
	.rsv-ttl { font-size: 23px; }
	.rsv-ttl strong { margin-bottom: 7px; font-size: 27px; }
	.rsv-btn-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 9px; }
	.rsv-btn { width: calc(50% - 4px); border: 1px solid #b10e31; transition: .4s; }
	.rsv-btn,
	.rsv-btn:not(:first-of-type) { margin-top: 8px; }
	.rsv-btn a { height: 40px; font-size: 15px; transition: .4s; }
	.rsv-btn:hover a { background: #fff; color: #b10e31; }
		
	.rsv-close{ top: 20px; right: 20px;}
}



/*		*/
@media only screen and (max-width: 680px) {
	
}
@media only screen and (min-width: 681px) {
	
}