@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}





/* ================================================================================

	メイン画像

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
	}
	body.customize-support .main_top {
		height: calc( 100vh - 32px );
	}
	.main_top img {
		width: 300px;
		height: auto;
	}
	/* Safariハック */
	_:lang(x)+_:-webkit-full-screen-document, .main_top img {
		margin-top: -100px;
	}


	/* スクロールアニメ */
	.scroll-anime {
		position: absolute;
		text-align: center;
		bottom: 50px;
		width: 100%;
	}
	/* Safariハック */
	_:lang(x)+_:-webkit-full-screen-document, .scroll-anime {
		bottom: 160px;
	}
	.scroll-anime a {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-left: 1px solid #121a53;
		border-bottom: 1px solid #121a53;
		transform: rotate(-45deg);
		animation: scroll-anime 2.5s infinite;
		pointer-events: none;
	}

	@keyframes scroll-anime {
		0% {
			transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: rotate(-45deg) translate(-16px, 16px);
			opacity: 0;
		}
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
	}
	body.customize-support .main_top {
		height: calc( 100vh - 46px );
	}
	.main_top img {
		width: 46vw;
		height: auto;
	}
	/* Safariハック */
	_:lang(x)+_:-webkit-full-screen-document, .main_top img {
		margin-top: -7vw;
	}

	/* スクロールアニメ */
	.scroll-anime {
		position: absolute;
		text-align: center;
		bottom: 10vw;
		width: 100%;
	}
	/* Safariハック */
	_:lang(x)+_:-webkit-full-screen-document, .scroll-anime {
		bottom: 26vw;
	}
	.scroll-anime a {
		display: inline-block;
		width: 5vw;
		height: 5vw;
		border-left: 1px solid #121a53;
		border-bottom: 1px solid #121a53;
		transform: rotate(-45deg);
		animation: scroll-anime 2.5s infinite;
		pointer-events: none;
	}

	@keyframes scroll-anime {
		0% {
			transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: rotate(-45deg) translate(-16px, 16px);
			opacity: 0;
		}
	}
}











/* ================================================================================

	セクション

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* 2カラム
	----------------------------------------------- */
	.col2_1,
	.col2_1_long,
	.col2_1_middle,
	.col2_1_short,
	.col2_1_vshort,
	.col2_1_mshort {
		margin-right: 20px;
	}
	.col2_2,
	.col2_2_long,
	.col2_2_middle,
	.col2_2_short,
	.col2_2_vshort,
	.col2_2_mshort {
		margin-left: 20px;
	}

	/* 3カラム
	----------------------------------------------- */
	.col3_1 {
		margin-right: 20px;
	}
	.col3_2 {
		margin-left: 10px;
		margin-right: 10px;
	}
	.col3_3 {
		margin-left: 20px;
	}

}




/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* 2カラム
	----------------------------------------------- */
	.col2_1 {
	}
	.col2_1_long {
		margin-top: 16vw;
	}
	.col2_1_middle {
		margin-top: 12vw;
	}
	.col2_1_short {
		margin-top: 8vw;
	}
	.col2_1_vshort {
		margin-top: 4vw;
	}
	.col2_1_mshort {
		margin-top: 3vw;
	}

	.col2_2 {
	}
	.col2_2_long {
		margin-top: 16vw;
	}
	.col2_2_middle {
		margin-top: 12vw;
	}
	.col2_2_short {
		margin-top: 8vw;
	}
	.col2_2_vshort {
		margin-top: 4vw;
	}
	.col2_2_mshort {
		margin-top: 3vw;
	}

	/* 3カラム
	----------------------------------------------- */
	.col3_1 {
		margin-top: 0;
	}
	.col3_2,
	.col3_3 {
		margin-top: 12vw;
	}

}





/* ================================================================================

	マージンボックス

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* 上にマージンを空ける
	----------------------------------------------- */
	.top_long {
		margin-top: 120px;
	}
	.top_middle {
		margin-top: 80px;
	}
	.top_short {
		margin-top: 40px;
	}
	.top_vshort {
		margin-top: 20px;
	}
	.top_mshort {
		margin-top: 10px;
	}

	/* 下にマージンを空ける
	----------------------------------------------- */
	.bottom_long {
		margin-bottom: 120px;
	}
	.bottom_middle {
		margin-bottom: 80px;
	}
	.bottom_short {
		margin-bottom: 40px;
	}
	.bottom_vshort {
		margin-bottom: 20px;
	}
	.bottom_mshort {
		margin-bottom: 10px;
	}

}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* 上にマージンを空ける
	----------------------------------------------- */
	.top_long {
		margin-top: 16vw;
	}
	.top_middle {
		margin-top: 12vw;
	}
	.top_short {
		margin-top: 8vw;
	}
	.top_vshort {
		margin-top: 4vw;
	}
	.top_mshort {
		margin-top: 3vw;
	}

	/* 下にマージンを空ける
	----------------------------------------------- */
	.bottom_long {
		margin-bottom: 16vw;
	}
	.bottom_middle {
		margin-bottom: 12vw;
	}
	.bottom_short {
		margin-bottom: 8vw;
	}
	.bottom_vshort {
		margin-bottom: 4vw;
	}
	.bottom_mshort {
		margin-bottom: 3vw;
	}

}




/* ================================================================================

	パディングボックス

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* 上にパディングを空ける
	----------------------------------------------- */
	.p_top_long {
		padding-top: 120px;
	}
	.p_top_middle {
		padding-top: 80px;
	}
	.p_top_short {
		padding-top: 40px;
	}
	.p_top_vshort {
		padding-top: 20px;
	}
	.p_top_mshort {
		padding-top: 10px;
	}

	/* 下にパディングを空ける
	----------------------------------------------- */
	.p_bottom_long {
		padding-bottom: 120px;
	}
	.p_bottom_middle {
		padding-bottom: 80px;
	}
	.p_bottom_short {
		padding-bottom: 40px;
	}
	.p_bottom_vshort {
		padding-bottom: 20px;
	}
	.p_bottom_mshort {
		padding-bottom: 10px;
	}

	/* 両方にパディングを空ける
	----------------------------------------------- */
	.row_long {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.row_middle {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.row_short {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.row_vshort {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.row_mshort {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* 上にパディングを空ける
	----------------------------------------------- */
	.p_top_long {
		padding-top: 16vw;
	}
	.p_top_middle {
		padding-top: 12vw;
	}
	.p_top_short {
		padding-top: 8vw;
	}
	.p_top_vshort {
		padding-top: 4vw;
	}
	.p_top_mshort {
		padding-top: 3vw;
	}

	/* 下にパディングを空ける
	----------------------------------------------- */
	.p_bottom_long {
		padding-bottom: 16vw;
	}
	.p_bottom_middle {
		padding-bottom: 12vw;
	}
	.p_bottom_short {
		padding-bottom: 8vw;
	}
	.p_bottom_vshort {
		padding-bottom: 4vw;
	}
	.p_bottom_mshort {
		padding-bottom: 3vw;
	}

	/* 両方にパディングを空ける
	----------------------------------------------- */
	.row_long {
		padding-top: 16vw;
		padding-bottom: 16vw;
	}
	.row_middle {
		padding-top: 12vw;
		padding-bottom: 12vw;
	}
	.row_short {
		padding-top: 8vw;
		padding-bottom: 8vw;
	}
	.row_vshort {
		padding-top: 4vw;
		padding-bottom: 4vw;
	}
	.row_mshort {
		padding-top: 3vw;
		padding-bottom: 3vw;
	}


	/* 背景色を伸ばす
	----------------------------------------------- */
	.row_sp {
		padding-left: 4vw !important;
		padding-right: 4vw !important;
	}
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	あいさつ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row01 {
		padding-top: 90px;
		margin-top: 90px;
	}

	/* 画像 */
	.illust_nippon img {
		width: 264px;
		height: auto;
	}

	/* テキスト */
	.text_top {
		font-size: 18px;
		line-height: 2;
		letter-spacing: 0.03em;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row01 {
		padding: 20vw 12vw 0;
		margin-top: 20vw;
	}

	/* 画像 */
	.illust_nippon img {
		width: 42vw;
		height: auto;
	}

	/* テキスト */
	.text_top {
		font-size: 3.5vw;
		line-height: 2;
		letter-spacing: 0.03em;
	}
}





/* ================================================================================

	お品書き

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row02 {
		padding-top: 90px;
		margin-top: 90px;
	}

	/* 見出し */
	.title_top {
	}
	.title_top.title_top3 {
	}
	.title_top h2 {
		font-size: 26px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-indent: 0.03em;
		text-align: center;
	}

	/* 画像 お品書き */
	.illust_menu img {
		width: 270px;
		height: auto;
	}
	/* 画像 お飲み物 */
	.illust_drink img {
		width: 280px;
		height: auto;
	}


	/* メニュー表ボックス */
	.table_box {
		margin-top: 60px;
	}
	.col3_1 {
		margin-right: 20px;
	}
	.col3_2 {
		margin-left: 10px;
		margin-right: 10px;
	}
	.col3_3 {
		margin-left: 20px;
	}

	/* 見出し2 */
	.title_top2 {
	}
	.title_top2 h3 {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.4 !important;
		letter-spacing: 0.03em;
		text-indent: 0.03em;
		text-align: center;
		margin-bottom: 8px;
	}
	.title_top2 h3 small {
		font-size: 0.7em;
		font-weight: 400;
		color: #777777;
	}

	/* メニューテーブル */
	.menu_table01 {
	}
	.menu_table01 table {
		width: 100%;
		border-bottom: 1px solid #eeeeee;
	}
	.menu_table01 tr {
	}
	.menu_table01 tr:not(.exp_tr) {
		border-top: 1px solid #eeeeee;
	}
	.menu_table01 tr:not(.exp_tr):first-of-type {
		border-top: none;
	}
	.menu_table01 th {
		width: 70% !important;
		font-size: 16px;
		font-weight: normal;
		text-align: left;
		padding: 8px;
	}
	.menu_table01 td {
		width: 30% !important;
		font-size: 18px;
		font-weight: normal;
		text-align: right;
		padding: 8px;
	}
	.menu_table01 tr.exp_tr td {
		font-size: 12px;
		color: #777777;
		text-align: left;
		padding: 0 8px 8px 8px;
	}

	/* 大盛り等 */
	.top_options {
		margin-top: 40px; 
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row02 {
		padding: 20vw 12vw 0;
		margin-top: 20vw;
	}

	/* 見出し */
	.title_top {
	}
	.title_top h2 {
		font-size: 5vw;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-indent: 0.03em;
		text-align: center;
	}

	/* 画像 お品書き */
	.illust_menu img {
		width: 38vw;
		height: auto;
	}
	/* 画像 お飲み物 */
	.illust_drink img {
		width: 40vw;
		height: auto;
	}

	/* メニュー表ボックス */
	.table_box {
		margin-top: 12vw;
	}
	.col3_1 {
	}
	.col3_2 {
		margin-top: 12vw;
	}
	.col3_3 {
		margin-top: 12vw;
	}

	/* 見出し2 */
	.title_top2 {
	}
	.title_top2 h3 {
		font-size: 4vw;
		font-weight: 600;
		line-height: 1.4 !important;
		letter-spacing: 0.03em;
		text-indent: 0.03em;
		text-align: center;
		margin-bottom: 2vw;
	}
	.title_top2 h3 small {
		font-size: 0.7em;
		font-weight: 400;
		color: #777777;
	}

	/* メニューテーブル */
	.menu_table01 {
	}
	.menu_table01 table {
		width: 100%;
		border-bottom: 1px solid #eeeeee;
	}
	.menu_table01 tr {
	}
	.menu_table01 tr:not(.exp_tr) {
		border-top: 1px solid #eeeeee;
	}
	.menu_table01 tr:not(.exp_tr):first-of-type {
		border-top: none;
	}
	.menu_table01 th {
		width: 75% !important;
		font-size: 3.5vw;
		font-weight: normal;
		text-align: left;
		padding: 2vw;
	}
	.menu_table01 td {
		width: 25% !important;
		font-size: 3.5vw;
		font-weight: normal;
		text-align: right;
		padding: 2vw;
	}
	.menu_table01 tr.exp_tr td {
		font-size: 3.0vw;
		color: #777777;
		text-align: left;
		padding: 0 2vw 2vw 2vw;
	}

	/* 大盛り等 */
	.top_options {
		margin-top: 12vw; 
	}
}





/* ================================================================================

	店舗情報

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row03 {
		padding-top: 90px;
		margin-top: 90px;
	}

	/* 画像 */
	.illust_kominka img {
		width: 290px;
		height: auto;
		margin-left: 10px;
	}

	/* テキスト */
	.text_access {
		margin-top: 20px;
		font-size: 18px;
		line-height: 2;
		letter-spacing: 0.03em;
	}
	.text_access a {
		padding-bottom: 0.2em;
		border-bottom: 1px solid;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row03 {
		padding: 20vw 12vw 0;
		margin-top: 20vw;
	}

	/* 画像 */
	.illust_kominka img {
		width: 42vw;
		height: auto;
		margin-left: 1vw;
	}

	/* テキスト */
	.text_access {
		margin-top: 4vw;
		font-size: 3.5vw;
		line-height: 2;
		letter-spacing: 0.03em;
	}
	.text_access a {
		display: inline-block;
		border-bottom: 1px solid;
	}
}

/*ポップアップ
 -------------------------------------------------*/
/* PC設定
----------------------------------------------- */
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    min-width: 500px;
    background-color: #fff;
}

.onetime_popup_content {
	font-size: 24px;
    padding: 60px 30px;
    text-align: center;
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.onetime_popup_content {
	font-size: 34px;
}