@charset "UTF-8";

/*#wrapper { margin-top:0; }*/

header #logo { position:fixed; top:30px; left:30px; z-index:999; }
header #btn_menu,
header #btn_reserve,
header #btn_reserve-calender,
header #btn_premium { display:none; }
header.active #logo { display:none!important; }
header.active #btn_menu,
header.active #btn_reserve,
header.active #btn_premium { display:block!important; }

#con_mv {
	position:fixed; left:0; top:0; z-index:-1; width:100%; height:720px; display:flex; justify-content:center; align-items:center; overflow:hidden;
	background-position:center; background-repeat:no-repeat; background-size:cover; }
#con_mv > h2 {
	display:flex; justify-content:center; align-items:center; margin-top: -60px!important;
	width:120px; height:340px; color:#fff; font-size:40px; letter-spacing:0.1em; background:url("../img/con_mv_bg.png");
	-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#con_mv .banner{position:absolute;left:30px;bottom:30px;display:flex;max-width:310px}


.short #con_mv { height:300px; background-image:url("../img/con_mv.jpg"); }
.short #con_mv > h2 { width:auto; height:100px; padding:0 80px; font-size:28px; -webkit-writing-mode:unset; -ms-writing-mode:lr-tb; writing-mode:unset; margin-top: 0!important; }

#contents { position:relative; margin-top:720px; background:#fff; z-index:0; }
.short #contents { margin-top:300px; }

.intro { padding:80px 0; }
.intro h3 { position:relative; margin-bottom:30px; padding-bottom:30px; text-align:center; font-size:30px; line-height:1.5; }
.intro h3:after { content:""; display:block; width:30px; height:1px; background:#c2c2c2; position:absolute; bottom:0; left:50%; margin-left:-15px; }
.intro p { text-align:center; font-size:15px; line-height:2.5; }

.intro .button { display:flex; justify-content:space-between; margin-top:80px; }
.intro .button li { width:23.8%; height:380px; text-align:center; }
.intro .button li a {
	display:flex; position:relative; height:100%; font-size:26px; font-weight:bold; background:#000; color:#fff; justify-content:center; align-items:center;
	-webkit-box-shadow: inset 0 0 23px 0 rgba(0,0,0,0.23); -moz-box-shadow: inset 0 0 23px 0 rgba(0,0,0,0.23); box-shadow: inset 0 0 23px 0 rgba(0,0,0,0.23); }
.intro .button li a span { position:relative; z-index:1; }
.intro .button li a span small{display:block;margin-top:5px;font-size:16px;line-height:1.3;background:rgba(0,0,0,.7);padding:10px}
.intro .button li a:before {
	content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0;
	background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0;
	-webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear;
	-webkit-backface-visibility:hidden; backface-visibility:hidden; }
.intro .button li a:hover:before { opacity:0.7; }

.intro .title { margin-top:-160px; padding:60px 20px 0; text-align:center; color:#3e3e3e; background:#fff; overflow-x: hidden;}
.intro .title h2 { font-size:30px; }
.intro .title p { margin-top:20px; font-size:16px; line-height:2; }

#popup-area .popup_bg {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 50;}
#popup-area .popup_block {position: absolute; left: 50%; top: 50%; width: 620px; padding: 40px 0 20px; color: #fff; text-align: center; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,0.41); background: url(/img/popup/bg.jpg) center top / cover no-repeat; transform: translate(-50%, -50%);}
#popup-area .popup_block .close {position: absolute; top: -20px; right: -20px; width: 42px; height: 42px; background-color: #fff; border: none; border-radius: 50%; cursor: pointer;}
#popup-area .popup_block .close:after {content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; background: url(/img/popup/close.png);}
#popup-area .popup_block .logo {position: absolute; left: 0; top: 0;}
#popup-area .popup_block .list {display: flex; margin-top: 15px; background-color: rgba(0,0,0,0.4);}
#popup-area .popup_block .list > li {position: relative; width: calc(100% / 2); padding: 25px 30px 5px; font-feature-settings: "palt" 1;}
#popup-area .popup_block .list > li:before {content: ""; position: absolute; left: 50%; top: -14px; width: 28px; height: 28px; margin-left: -14px; background-size: 100% auto; background-repeat: no-repeat;}
#popup-area .popup_block .list > li:nth-of-type(1):before {background-image: url(/img/popup/num1.png);}
#popup-area .popup_block .list > li:nth-of-type(2):before {background-image: url(/img/popup/num2.png);}
#popup-area .popup_block .list > li:nth-of-type(3):before {background-image: url(/img/popup/num3.png);}
#popup-area .popup_block .list > li + li:after {content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: rgba(220,203,163,0.4); transform: rotate(6deg);}
#popup-area .popup_block .list > li .num {margin-bottom: 0.5em; color: #dfca99; font-size: 20px; line-height: 1.25;}
#popup-area .popup_block .list > li .condition {margin-bottom: 0; line-height: 1.4;}
#popup-area .popup_block .list > li .benefit {margin-bottom: 0; font-size: 18px; font-weight: bold; line-height: 1.4;}
#popup-area .popup_block .cancel {position: relative; display: block; width: 460px; margin: 20px auto; padding: 20px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; background-color: #a1292f; border: 1px solid #fff; border-radius: 3px; cursor: pointer;}
#popup-area .popup_block .back {padding: 0; color: #fff; text-align: center; background-color: transparent; border: none; cursor: pointer;}

@media (max-width: 1280px) {

}

@media (max-width: 1000px) {
	.intro .button { margin-top:50px; }
	.intro .button li { height:280px; }
	.intro .button li a { font-size:24px; }
}

@media (min-width: 768px) {
	.br-pc {display: block !important;}
	.br-sp {display: none !important;}
}

@media (max-width: 768px) {
	.br-pc {display: none !important;}
	.br-sp {display: block !important;}

	header.active #btn_reserve, header.active #btn_premium {display: none !important;}
	#con_mv { height:640px; }
	#con_mv .banner{width:100%;max-width:inherit;left:0;bottom:70px;text-align:center}
	#con_mv .banner a{margin:auto;max-width:200px;display:inline-block}
	#contents { margin-top:640px; }
	.intro { padding:40px 0; }
	.intro h3 { font-size:24px; }
	.intro p { font-size:14px; }
	.intro .button { flex-wrap:wrap; }
	.intro .button li { width:49%; height:150px; }
	.intro .button li:nth-child(n+3) { margin-top:2%; }
	.intro .button li a { font-size:22px; }
	.intro .title { margin-top:-130px; padding:30px 20px 0; }
	.intro .title h2 { font-size:24px; }
	.intro .button li a span small{font-size:14px;}
}

@media (max-width: 680px) {
	#popup-area .popup_block {width: 90%;}
	#popup-area .popup_block .close {top: -10px; right: -10px; width: 30px; height: 30px;}
	#popup-area .popup_block .logo {width: 30%;}
	#popup-area .popup_block .ttl div img {width: 50%;}
	#popup-area .popup_block .list {display: block;}
	#popup-area .popup_block .list > li {width: 100%; padding: 0 10px;}
	#popup-area .popup_block .list > li + li {margin-top: 1em;}
	#popup-area .popup_block .list > li:before {left: 10px; top: -3px; margin-left: 0;}
	#popup-area .popup_block .list > li + li:after {content: none;}
	#popup-area .popup_block .list > li .num {margin-bottom: 0;}
	#popup-area .popup_block .list > li .num br {display: none;}
	#popup-area .popup_block .list > li .benefit {font-size: 16px;}
	#popup-area .popup_block .list > li .benefit br {display: none;}
	#popup-area .popup_block .cancel {width: 90%; margin: 10px auto; padding: 10px;}
}

/* @media (min-width: 769px) {
	header #btn_menu,
	header #btn_reserve,
	header #btn_reserve-calender,
	header #btn_premium { display:block; }
} */

@media (max-width: 600px) {
	header #logo { top:20px; left:0; right: 0; margin: auto; width: 70px;}
	header #logo img { width:100px; }


	header #btn_menu,
	/* header #btn_reserve, */
	header #btn_reserve-calender { display:block;z-index: 1002;}
	/* header #btn_premium { display:block; } */
	header #btn_premium a{ display:none; }
	header.active #logo { display:none!important; }
	header.active #btn_menu,
	header.active #btn_reserve,
	header.active #btn_premium { display:block!important; }


	#con_mv { height:480px; }
	#con_mv > h2 { padding:45px 20px; font-size:30px; height: 280px; }
	.short #con_mv { height:250px; }
	.short #con_mv > h2 { height:70px; padding:0 40px; font-size:20px; }
	#contents { margin-top:480px; }
	.short #contents { margin-top:250px; }

	.intro p br { display:none; }
  .intro.dinner-intro p br { display:inline; }
	.intro .title h2 { font-size:20px; }
	.intro .title p { margin-top:10px; font-size:14px; }

}

@media (max-width: 400px) {
	#con_mv > h2 { font-size:24px; }

	.intro h3 { font-size:20px; }
	.intro p { line-height:2; }
	.intro .button li a { font-size:18px; }
}