@charset "utf-8";

/* main ------------- */
.main { position: relative; }
.main .main_logo img { height: 280px; }

#slider, .backstretch {
	width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center; 
}


.scroll_down { position: absolute; bottom: 20px; right: 0; left: 0; margin: auto; text-align: center; color: #fff; }
.scroll_down span { position: absolute; margin-left: -10px; width: 20px; height: 40px; top: -30px; left: 50%;
	border: 1px solid #fff; border-radius: 50px; box-sizing: border-box; }
.scroll_down span::before { content: ""; position: absolute; top: 10px; left: 50%; width: 5px; height: 5px; margin-left: -3px; background-color: #fff; border-radius: 100%; -webkit-animation: scroll_anime 2s infinite; animation: scroll_anime 2s infinite; box-sizing: border-box; }

@keyframes scroll_anime {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* secTitle */
.secTitle { font-size: 3em; color: #fff; line-height: 1.3; }
.secTitle .en_ttl { font-size: .458em; }


/* button */
[class^="button"] { display: inline-block; min-width: 280px; padding: .5em; overflow: hidden; 
	text-decoration: none; border: 2px solid #fff; position: relative; }
[class^="button"]::before { content: ""; position: absolute; z-index: -1; top: 0; right: -50px; bottom: 0; left: 0; 
	border-right: 50px solid transparent; border-bottom: 80px solid #fff;
	-webkit-transform: translateX(-100%); transform: translateX(-100%);
	-webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }
[class^="button"][class*="-white"] { color: #fff; }
[class^="button"][class*="-white"]:hover { color: #000; }
[class^="button"]:hover::before { -webkit-transform: translateX(0); transform: translateX(0); }


/* #main ------------- */
#main { background-color: #0f0f0f; }

/* message */
.message { background: url("../img/top/message_img01.png") no-repeat top left / contain; }
.message .secTitle { color: #ccbea5; }
.message .lead_box > div { margin-left: auto; }
.message .lead_box .txt { color: #fff; line-height: 2.875; }
.message .lead_box .ttl { color: #c19445; font-size: 2.375em; }


/* menu */
.menu > div { margin-top: 160px; }
.menu_box { position: relative; }
.menu_box .img_box { width: calc(100% - 40%); min-height: 500px; }
.menu_box .img_box figure img { width: 100%; }

.menu_box.banquet_plan .img_box { background: url(../img/top/banquet_img.jpg) no-repeat center / cover; }
.menu_box.season_menu .img_box { background: url("../img/top/season_menu_img.jpg") no-repeat center / cover; }

.menu_box .ttl { /*display: inline-block;*/ position: absolute; width: 160px; top: -80px; left: 50px; font-size: 2.375em; line-height: 1.3; background-color: rgba(28,28,32,.85); color: #fff; }
.menu_box .ttl::before { content: ""; position: absolute; top: 0; left: 0; width: 0;
height: 0;
border-style: solid;
border-width: 36px 36px 0 0;
border-color: #c19445 transparent transparent transparent; }
.menu_box .ttl h2 { display: block; /*margin: 0 auto;*/ padding: 1.5em 0;
	/*webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;*/ 
-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed; }
/*.menu_box .ttl h2 > span { webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }*/
.menu_box .ttl .en_ttl { font-size: .474em; }
.menu > div:nth-child(even) .ttl { /*display: inline-block;*/ left: auto; right: 50px; }


.menu_box .lead_box { z-index: 0; /*width: 100%;*/ min-width: 600px; margin-left: -50px; padding: 5% 0;
	text-align: center; color: #fff; }
.menu > div:nth-child(even) .lead_box { margin-right: -50px; margin-left: auto; }



.menu_box .lead_box .txt { font-size: 1.125em; line-height: 2.1; }
.menu_box .lead_box .btn { margin: 40px 0 0; }

.menu_list { margin-top: 120px; }
.menu_list li { text-align: center; }
.menu_list li a { position: relative;
    z-index: 2;
    overflow: hidden;
    display: block;
    height: 100%;
    padding: 15%;
    text-align: center;
    color: #fff; }
.menu_list li a::before { content: "";
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid #fff; }




.menu_list li .bg_img { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; 
background: no-repeat center / cover; }
.menu_list li:nth-child(1) .bg_img { background-image: url("../img/top/breakfast_img.jpg"); }
.menu_list li:nth-child(2) .bg_img { background-image: url("../img/top/lunch_img.jpg"); }
.menu_list li:nth-child(3) .bg_img { background-image: url("../img/top/dinner_img.jpg"); }

.menu_list li .ttl { font-size: 2.375em; line-height: 1.5; }
.menu_list li .ttl span { display: block; font-size: .45em; }
.menu_list li .time { margin: 0; }


/* shop */
.shop { z-index: 0; margin-top: 120px; position: relative; }
.shop::before { content: ""; position: absolute; z-index: -1; top: 150px; right: 0; left: 0; width: 100%; height: 100%;
	background-color: #1c1c20; }
.shop .img_box { background: url("../img/top/shop_img.jpg") no-repeat center / cover; }
.shop .img_box .shop_logo { z-index: 0; width: 40%; margin-left: auto; padding: 85px 138px 85px 42px;  background: #ccbea5; position: relative; }
.shop .img_box .shop_logo::before { content: "";
    display: block;
	position: absolute;
	z-index: -1;
    width: 40%;
    height: 100%; 
    top: 0;
    left: 0;   
    background: #ccbea5;
    -webkit-transform: skewX(-20deg) scaleX(2);
    -ms-transform: skewX(-20deg) scaleX(2);
    transform: skewX(-20deg) scaleX(2); }
.shop .img_box .shop_logo .logo img { height: 190px; }



.shop .lead_box .shop_d { color: #fff; }
.shop .lead_box .shop_d p { margin-top: 0; }
.shop .lead_box .shop_d p a { color: #fff; }
.shop .lead_box .time { margin-top: 40px; }
.shop .lead_box .time .ttl { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #fff; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
	
	.menu_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	.menu_list li { width: 33.33%; }
	
  .menu > div:nth-child(even) .img_box { order: 1; }
	
	.menu_box .lead_box { border: 2px solid #eeeeee; position: relative; }
	.menu_box .lead_box::before { content: ""; position: absolute; z-index: -1; top: 11px; right: 11px;
		width: 101%; height: 101%; border: 2px solid #eeeeee; }
	
	
	
	

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
	
	
	.message .lead_box { padding: 193px 0 206px; background: url("../img/top/message_img02.png") no-repeat bottom right / 50%; }
	.message .lead_box > div { height: 450px; }
	
	.shop .lead_box { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: -80px; }
	.shop .lead_box .secTitle { margin-left: 55px; }
	.shop .lead_box .shop_d { width: 30%; margin: 130px 0 0 60px; }
	.shop .lead_box .map { flex: 1; -webkit-box-flex: 1; margin: 130px 0 0 50px; }
	

}

/* 1400以下 */
@media screen and (max-width: 1400px) {
	
	.menu_box .lead_box { min-width: 470px; padding: 3% 0; }

}

/* 1200以下 */
@media screen and (max-width: 1200px) {
	
	.menu_box .img_box { width: calc(100% - 50%); }
	.menu_box .lead_box { min-width: 420px; padding: 3% 0; }
	.menu_box .lead_box .txt { font-size: 1em; }

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {


}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
	
	.message { background-size: 53%; background-position: top right; }
	.message .lead_box { padding: 80px 0 0; }
	
	.menu_box .img_box { min-height: 250px; }
	.menu_box .ttl { width: 110px; top: -40px; left: 25px; font-size: 1.3em; }
	
	.menu_list li a::before { top: 10px; left: 10px; right: 10px; bottom: 10px; }
	.menu_list li .ttl { font-size: 2em; }
	
	
	.shop .img_box .shop_logo { padding: 40px 40px 40px 0; }
	.shop .lead_box .shop_d { margin-top: 30px; }
	.shop .lead_box .time { margin-top: 20px; }
	.shop .lead_box .map { margin-top: 30px; }

}


/* 760以下 */
@media screen and (max-width: 760px) {
	
	.menu_box .img_box { width: 100%; }
	.menu_box .lead_box { min-width: auto; width: 100%; margin: 30px 15px 0 35px; }
	.menu > div:nth-child(even) .lead_box { min-width: auto; width: 100%; margin: 30px 15px 0 35px; }
	
}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
	
	
	.message .lead_box .ttl { font-size: 2em; }
	
	.menu > div { margin-top: 80px; }
	.menu_box .lead_box,
	.menu > div:nth-child(even) .lead_box { margin: 0 15px; }
	.menu_box .ttl { width: 80px; }
	.menu_box .ttl::before { border-width: 18px 18px 0 0; }
	
	
	.shop .img_box .shop_logo { padding: 20px 20px 20px 0; }
	.shop .img_box .shop_logo::before { width: 45%; }
	
	
	

}