@charset "utf-8";

/* ---------------------------------------- 
 - restaurant_menu
---------------------------------------- */
.restaurant_menu {
	width: 90%;
	max-width: 1200px;
	margin: 90px auto;
    padding-top: 90px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-top: solid 1px #92a395;
}
.restaurant_menu .visual {
	width: 57%;
	max-width: 680px;
}
.restaurant_menu .txt_box {
	width: 39%;
	max-width: 460px;
}
.restaurant_menu .txt_box .ttl {
	margin-bottom: 1.0em;
}
.restaurant_menu .txt_box .ttl .en {
	font-size: 4.6rem;
	font-weight: 200;
	line-height: 1.2;
	color:#657568;
}
.restaurant_menu .txt_box .ttl .jp {
	font-size: 1.8rem;
	display: block;
}
.restaurant_menu .txt_box .hours {
	padding-left: 1.0em;	
	border-left:solid 1px #92a395;
	line-height: 1.6;
}
.restaurant_menu .txt_box .txt {
	margin-top: 1.5em;
}
.restaurant_menu .txt_box ul.notice {
	font-size: 1.4rem;
	text-indent: -1.0em;
	margin-left: 1.0em;
	margin-top: 1.0em;
	line-height: 1.6;
}
.restaurant_menu .txt_box ul.notice li {
	margin-bottom: 0.5em;
}
.restaurant_menu .txt_box ul.notice li:last-child {
	margin-bottom: 0;
}
.restaurant_menu .txt_box .link_btn {
	font-size: 1.6rem;
	margin-top: 30px;
}
@media screen and (max-width: 768px) {
	.restaurant_menu {
		margin: 50px auto;
        padding-top: 50px;
		display: block;
	}
	.restaurant_menu .visual {
		width: 100%;
		margin-bottom: 30px;
	}
	.restaurant_menu .txt_box {
		width: 100%;
	}
	.restaurant_menu .txt_box .ttl {
		margin-bottom: 1.0em;
	}
	.restaurant_menu .txt_box .ttl .en {
		font-size: 2.6rem;
		font-weight: 300;
	}
	.restaurant_menu .txt_box .ttl .jp {
		font-size: 1.6rem;
	}	
	.restaurant_menu .txt_box .hours {
		font-size: 1.4rem;
	}
	.restaurant_menu .txt_box .link_btn {
		margin-top: 20px;
	}
}

/* ---------------------------------------- 
 - .other_box
---------------------------------------- */
.other_box {
	width: 90%;
	max-width: 1200px;
	margin: 120px auto 60px;
	background: #d0d1cc;
	box-sizing: border-box;
	text-align: center;
	padding: 65px 85px;
}
.other_box > .ttl {
	margin-bottom: 2.5em;
}
.other_box > .ttl .en {
	font-size:4.6rem;
	font-weight: 200;
	line-height:1.4;
	color: #657568;
}
.other_box > .ttl .jp {
	display: block;
	font-size:1.8rem;
}
.other_box .visual_box {
	width: 100%;
	max-width: 1010px;
	margin: 0 auto 35px;
	display: flex;
	justify-content: space-between;
}
.other_box .visual_box .visual {
	width: 48%;
	max-width: 490px;
}
.other_box > .txt {
	width: 100%;
	max-width: 1010px;
	margin: 0 auto;
	text-align: left;
}
@media screen and (max-width: 768px) {
	.other_box {
		margin: 50px auto;
		padding: 30px 5%;
	}
	.other_box > .ttl {
		margin-bottom: 1.5em;
	}
	.other_box > .ttl .en {
		font-size:2.6rem;
		font-weight: 300;
	}
	.other_box > .ttl .jp {
		font-size:1.6rem;
	}
	.other_box .visual_box {
		margin-bottom: 20px;
	}
}

/* ---------------------------------------- 
 - .end_box
---------------------------------------- */
.end_box {
	width: 90%;
	max-width: 1200px;
	margin: 65px auto 120px;
	text-align: center;
	font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
	.end_box {
		margin: 50px auto;
		font-size: 1.5rem;
	}
}

/* ---------------------------------------- 
 - .modal_contents
---------------------------------------- */
.modal_contents{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
	z-index: 100;
	background-color: #dddeda;
}
.modal_contents.active{
	opacity: 1;
	visibility: visible;
}
/* modal_box */
.modal_box{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 70px 5% 50px;
}
.modal_box .inner{
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
.modal_box .inner > .ttl {
	margin-bottom: 2.0em;
	text-align: center;
}
.modal_box .inner > .ttl .en {
	font-size: 4.6rem;
	font-weight: 200;
	color: #657568;
	display: block;
	line-height: 1.4;
}
.modal_box .inner > .ttl .jp {
	font-size: 1.8rem;
	display: block;
}
/* menu_list */
.modal_box ul.menu_list{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 55px;
}
.modal_box ul.menu_list li{
	width: 47%;
	margin-bottom: 55px;
	text-align: left;
}
.modal_box ul.menu_list li .txt{
	margin-top: 1.0em;
}
.modal_box ul.menu_list li .txt .mark-new{
	font-size: 1.3rem;
	font-weight: 400;
	color:#a00101;
	margin-right: 0.5em;
}
.modal_box ul.menu_list li ul.notice li {
	text-indent:-1.0em;
	margin-left:1.0em;
	font-size:1.4rem;
}
/* other_menu */
.modal_box .other_menu {
	border-top:solid 1px #92a395;
	padding-top: 50px;
}
.modal_box .other_menu > .ttl {
	font-size: 3.0rem;
	font-weight: 200;
	color: #657568;
	line-height: 1.4;
	text-align: center;
}
.modal_box .other_menu > ul.menu_list {
	margin-top: 35px;
}
/* other_btn */
.other_btn {
	width: 90%;
	max-width: 1200px;
	margin: 35px auto 50px;
	text-align: center;
}
.other_btn .btn a {
    position: relative;
    width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #657568;
	color: #fff;
	text-decoration: none;
	transition: .3s;
    border-radius: 75px;
	padding: 20px 45px 20px 25px;
	font-size: 2.4rem;
	font-weight: 200;
	line-height: 1.4;
}
.other_btn .btn a:hover {
	opacity: 0.6;
}
.other_btn .btn a::after {
    content: '';
    display: inline-block;
    background-image: url(/assets/images/common/ico_blank_wht.svg);
    background-size: contain;
    vertical-align: text-bottom;
    background-position: left top;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 38px;
    width: 20px;
    height: 20px;
    transform: translate(0, -50%);
}
/* modal_close */
.modal_close {
	width: 125px;
	height: 34px;
	position: fixed;
    top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 1000;
	border-radius: 50px;
    transition: opacity .3s;
	cursor: pointer;
	background-color: #92a395;
}
.modal_close i {
	position: absolute;
    top: 13px;
	left: 25px;
    display: block;
    width: 25px;
    height: 1px;
    margin: auto;
	margin-top: 4px;
    background: #fff;
	transition: .3s;
    transform: rotate(-45deg);
}
.modal_close i::after {
	display: block;
    width: 25px;
    height: 1px;
    content: '';
    transition: .3s;
    background: #fff;
	transform: rotate(90deg);
}
.modal_close .txt{
	line-height: 34px;
	font-size: 1.3rem;
	padding-left: 35px;
	color:#fff;
}
.modal_close:hover {
	opacity:0.6;
}
@media screen and (max-width: 768px) {
	/* modal_box */
	.modal_box .inner > .ttl {
		margin-bottom: 1.5em;
	}
	.modal_box .inner > .ttl .en {
		font-size: 2.8rem;
		font-weight: 300;
	}
	.modal_box .inner > .ttl .jp {
		font-size: 1.6rem;
	}
	/* menu_list */
	.modal_box ul.menu_list{
		margin-top: 35px;
	}
	.modal_box ul.menu_list li{
		margin-bottom: 40px;
	}
	.modal_box ul.menu_list li .txt{
		margin-top: 0.5em;
		font-size: 1.4rem;
	}
	.modal_box ul.menu_list li .txt .mark-new{
		font-size: 1.2rem;
	}
	.modal_box ul.menu_list li ul.notice li {
		font-size:1.3rem;
	}
	/* other_menu */
	.modal_box .other_menu {
		padding-top: 35px;
	}
	.modal_box .other_menu > .ttl {
		font-size: 2.6rem;
		font-weight: 300;
	}
	.modal_box .other_menu > ul.menu_list {
		margin-top: 20px;
	}
	/* other_btn */
	.other_btn {
		width: 100%;
		margin: 20px auto 35px;
	}
	.other_btn .btn a {
		border-radius: 50px;
		padding: 10px 20px 10px 10px;
		font-size: 1.5rem;
		font-weight: 300;
	}
	.other_btn .btn a::after {
		right: 15px;
		width: 15px;
		height: 15px;
	}
	/* modal_close */
	.modal_close {
		width: 100px;
		height: 30px;
		top: 20px;
		right: 4%;
	}
	.modal_close i {
		width: 20px;
		left: 20px;
		margin-top: 2px;
	}
	.modal_close i::after {
		width: 20px;
	}
	.modal_close .txt{
		line-height: 30px;
		font-size: 1.2rem;
		padding-left: 30px;
	}
}
@media screen and (max-width: 480px) {
	/* menu_list */
	.modal_box ul.menu_list {
        display: block;
    }
	.modal_box ul.menu_list li{
		width: 100%;
	}
}