@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700;900&display=swap');

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');
@font-face {
	font-family:'CGothic';
	src:url('images/fonts/CGothic.ttf') format('truetype');
}
@font-face {
	font-family:'CSerif';
	src:url('images/fonts/CSerif.ttf') format('truetype');
}
*/

/* ==========================================================================================================================================
	variables
=========================================================================================================================================== */
* {
	--base-font:'Noto Serif JP',serif;
	--title-font:'Noto Serif JP',serif;
}


@media screen and (min-width:800px) { 
	.xElements > :nth-child(2) ,
	.dispSP {
		display:none !important;
	}
}
@media screen and (max-width:799px) { 
	.xElements > :nth-child(1) ,
	.dispPC {
		display:none !important;
	}
}
.noDisp {
	display:none !important;
}

@keyframes animateBlink {
	  0% { opacity:1; }
	100% { opacity:0.1; }
}


/* ==============================================
	CSS reset
=============================================== */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
strong ,em ,i ,small ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	font-size:100%;
	padding:0.1em 0.3em;
	margin:0;
	letter-spacing:1px;
	color:#eee;
	background:#333;
	border:1px solid #666;
	font-family:var(--base-font);
}
input[type="submit"] ,button {
	padding:0.3em 2em;
}

html ,body {
	min-height:100%;
	height:100%;
}
a ,a:before ,a:after {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
}

img {
	max-width:100%;
	vertical-align:top;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
img.lazyload {
	background: url(images/noimage/loading.gif) 50% 50% no-repeat;
}
img.lazyloaded {
}

ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
blockquote ,q {
	quotes:none;
}
blockquote:before ,blockquote:after
,q:before ,q:after {
	content:'';
	content:none;
}
.iframeOuter {
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
.iframeOuter > * {
	display:block;
	width:100%;
	height:100%;
	height:-webkit-fill-available;
}

small {
	font-size:90%;
}

/* ==============================================
	cleafix
=============================================== */
.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	line-height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	display: block; /* for IE8 */
	zoom: 1; 
}

/* ============================================================================================
	common
============================================================================================= */
body {
	position:relative;
	color:#fff;
	background:#000;
	font-size:16px;
	font-weight:bold;
	line-height:1.8;
	font-family:var(--base-font);
}
#bgLayer {
	width:100%;
	margin:0 auto;
}



@media screen and (min-width:800px) { 
	#bgLayer {
		max-width:1920px;
		min-width:1200px;
	}
}
@media screen and (max-width:799px) { 
	body {
		line-height:1.6;
	}
	#bgLayer {
		width:480px;
	}
}



/* ==============================================
	contents
=============================================== */
section ,aside {
	padding:6em 0;
	scroll-margin-top:8em;
	background:transparent 50% 100% no-repeat;
	background-size:cover;
}

.innerFrame {
	position:relative;
	width:1200px;
	margin:0 auto;
	padding:0 1em;
}

@media screen and (min-width:800px) {
	.fullFrame {
		position:relative;
		width:100%;
		margin:0 auto;
	}
}
@media screen and (max-width:799px) {
	.innerFrame {
		width:480px;
	}
	section ,aside {
		padding:3em 0;
		scroll-margin-top:3em;
	}
}



/* ==============================================
	background
=============================================== */
.bg1 {
	--title-color:#500;
}
.bg2 {
	--title-color:#003;
}
.bg3 {
	--title-color:#073;
}
.bg4 {
	--title-color:#500;
}
.bg5 {
	--title-color:#024;
}
.bg7 {
	--title-color:#e40;
}

.bg1.lazyloaded {
	background-image:url(images/common/back01.webp);
}
.bg2.lazyloaded {
	background-image:url(images/common/back02.webp);
}
.bg3.lazyloaded {
	background-image:url(images/common/back03.webp);
}
.bg4.lazyloaded {
	background-image:url(images/common/back04.webp);
}
.bg5.lazyloaded {
	background-image:url(images/common/back05.webp);
}
.bg6.lazyloaded {
	background-image:url(images/common/back06.webp);
}
.bg7.lazyloaded {
	background-image:linear-gradient(180deg ,#fb3 ,#e61);
}


/* ==============================================
	titlebar
=============================================== */
.titleBar {
	width:100%;
	margin:0 auto;
	padding-bottom:6em;
	filter:drop-shadow(0 0 0.3em #fff);
}
.titleBarBG {
	padding:0.2em 0;
	color:#ff6;
	border-top:0.4em solid var(--title-color);
	border-bottom:0.4em solid var(--title-color);
	clip-path: polygon( 0 0 ,2em 50% ,0 100% ,100% 100% ,calc(100% - 2em) 50% ,100% 0);
}
.titleBarBG > * {
	display:block;
	line-height:1.2;
	padding:0.4em 0 0.5em;
	background:var(--title-color);
	text-align:center;
}
.titleBarBG span {
	font-size:250%;
	font-family:var(--title-font);
	letter-spacing:0.05em;
	text-indent:0.05em;
}

.titleBar img {
	height:6em;
}


@media screen and (max-width:799px) {
	.titleBar {
		padding-bottom:3em;
	}
	.titleBarBG > * {
	}

	.titleBar:not(.sub) span:nth-child(1) {
		font-size:220%;
	}

	.titleBar img {
		height:4.5em;
	}
}



/* =================================================================
flex
==================================================================== */

.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.base {
	align-items:baseline;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}
.flex.col4 > * {
	width:calc(100% / 4);
}

.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}




/* ==============================================
	common attribute
=============================================== */
.left {
	text-align:left;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}


.noData {
	padding:5em 0 10em;
	width:100%;
	text-align:center;
}

.strong {
	font-size:120%;
}

.bold {
	font-weight:bold;
}

.border {
	border:1px solid #666;
}

.nowrap {
	white-space: nowrap;
}


/* ==========================================================================================================================================
	base layout
=========================================================================================================================================== */
.tel-link {
	font-size:200%;
}
.tel-link img {
	height:1.2em;
}
.tel-link span {
	padding-left:0.3em;
	font-weight:900;
}


@media screen and (max-width:799px) { 
	.tel-link {
		font-size:160%;
	}
	.tel-link span {
		padding-left:0.2em;
	}
}


/* ==============================================
	pagetop button
=============================================== */
#scrollTop {
	position:fixed;
	right:0.5em;
	bottom:0.5em;
	width:4em;
	aspect-ratio:1/1;
	cursor:pointer;
	display:none;
}
#scrollTopInner {
	width:100%;
	height:100%;
	line-height:1.2;
	background:rgba(0,0,0,0.6);
	border:1px solid #ccc;
	border-radius:0.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
#scrollTopInner:hover {
	filter:brightness(1.2);
}


@media screen and (max-width:799px) { 
	#scrollTop {
		width:3em;
	}
	#scrollTopInner span {
		font-size:80%;
	}
}


/* ==============================================
	sns button
=============================================== */
.snsList {
	padding-top:1.5em;
}
.snsList-cell {
	padding:0 0.5em;
}

.snsList-cell a {
	display:block;
	padding:2px;
	background:#000;
	border-radius:50%;
}
.snsList-cell img {
	max-width:4em;
}

@media screen and (min-width:800px) { 
	.snsList-cell a:hover {
		filter:invert(1);
	}
}


/* ============================================================================================
	google_translate
============================================================================================= */
.skiptranslate ,
#google_translate_element {
	display:none;
}
body {
	top:0 !important;
}

.trans {
	margin-left:auto;
}
.lang_button_cell {
	padding-left:0.5em;
}
.lang_button {
	padding:0 1em;
	border:2px solid #ccc;
	border-radius:0.3em;
 	transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
	cursor:pointer;
}
.lang_button img {
	height:1.3em;
	outline:1px solid #666;
}
.lang_button span {
	font-size:90%;
	padding-left:0.3em;
	padding-bottom:0.1em;
	font-weight:bold;
}

@media screen and (min-width:800px) {
	.lang_button:hover {
		background:rgba(153,153,153,0.8);
	}
	@media screen and (max-width:1400px) {
		.trans {
			font-size:85%;
		}
	}
}
@media screen and (max-width:799px) {
	.trans {
		margin:0 auto;
		font-size:75%;
	}
}

html[lang='ja'] .disp-en ,
html[lang='en'] .disp-ja {
	display:none;
}

html[lang='ja'] .lang_button[data-lang='ja'] ,
html[lang='en'] .lang_button[data-lang='en'] {
	color:#000;
	background:rgba(255,255,255,0.8);
}


/* ============================================================================================
	header
============================================================================================= */
h1 {
	font-size:80%;
	line-height:1.2;
	padding-left:0.5em;
}

@media screen and (max-width:799px) { 
	h1 {
		font-size:70%;
	}
}

.sp-logo {
}
.sp-logo img {
	max-height:4.5em;
}


/* ==============================================
	header
=============================================== */
header {
	position:sticky;
	top:0;
	left:0;
	right:0;
	z-index:10000;
	background:rgba(0,0,0,0.8);
	border-bottom:1px solid #666;
	white-space:nowrap;
}

#headerInfo {
	padding:0.3em 1em;
}
#headerInfo .logo a {
	display: flex;
	justify-content:center;
	align-items: center;
	height: 100%;
}
#headerInfo .logo img {
	height:5em;
}

#headerInfo .trans-info {
	flex-grow:1;
}

#headerInfo .info {
	width:100%;
	padding-bottom:0.3em;
	line-height:1.3;
	text-align:right;
	flex-grow:1;
}


@media screen and (min-width:800px) { 
	header img {
		transition:all 0.3s ease;
	 	-webkit-transition:all 0.3s ease;
	}

	/* ==============================================
		header nav
	=============================================== */

	header .contents-navi {
		flex-grow:1;
	}
	header .navMenu {
		max-width:1000px;
		margin:0 auto;
		display:flex;
		justify-content:center;
		align-items:center;
		font-family:var(--title-font);
	}
	header .navMenu .navCell {
		flex-grow:1;
		position:relative;
		display:flex;
		justify-content:center;
		align-items:center;
	}

	header .navMenu .aLink {
		width:100%;
		padding:0.5em 0.5em;
		color:#fff;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	header .navMenu .aLink > span:nth-child(1) {
		font-size:180%;
	}
	header .navMenu .aLink > span:nth-child(2) {
		display:none;
	}

	header .navMenu .aLink:hover {
		background:rgba(255,255,255,0.3);
	}

	@media screen and (max-width:1400px) {
		#headerInfo .logo img {
			max-height:6em;
		}
		header .navMenu .aLink > span:nth-child(1) {
			font-size:150%;
		}
	}
}


@media screen and (max-width:799px) { 
	#headerInfo {
		padding:0 4em 0 0;
	}

	#headerInfo .logo img {
		height:3.5em;
	}

	#headerInfo .trans-info {
		padding:0.5em 0;
		align-items:center;
	}

	#headerInfo .info {
		margin:0 auto;
		padding:0;
		justify-content:center;
	}

	.SPMenu {
		position:fixed;
		top:0.55em;
		right:0.6em;
		padding:0.2em;
		background:rgba(0,0,0,0.6);
		border-radius:0.4em;
	}

	.SPMenuIcon {
		position:relative;
		width:3em;
		height:3em;
		border:1px solid #fff;
		border-radius:0.3em;
	}

	.SPMenuIcon span ,
	.SPMenuIcon:before ,
	.SPMenuIcon:after {
		position:absolute;
		top:50%;
		margin-top:-2px;
		left:0.3em;
		right:0.3em;
		display:block;
		height:3px;
		border-radius:1.5px;
		background:#fff;
	 	transition:all 0.3s ease;
	    -webkit-transition:all 0.3s ease;
	}
	.SPMenuIcon:before {
		content:"";
		top:25%;
	}
	.SPMenuIcon:after {
		content:"";
		top:75%;
	}

	.menuOn .SPMenuIcon span {
		opacity:0;
	}
	.menuOn .SPMenuIcon:before {
		top:50%;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	.menuOn .SPMenuIcon:after {
		top:50%;
		-webkit-transform:rotate(135deg);
		transform:rotate(135deg);
	}


	header .contents-navi {
		position:fixed;
		top:-110%;
		left:0;
		width:100%;
		height:100%;
		padding:1em;
		text-align:center;
		background:rgba(0,0,0,0.8);
		overflow:auto;
	 	transition:all 0.3s ease;
	    -webkit-transition:all 0.3s ease;
	}

	#headerInfo .spNavTop .logo img {
		height: 6em;
	}
	.spNavTop .trans {
		padding:0.5em 0 1em;
		font-size:110%;
	}
	.spNavTop .trans .lang_button {
		padding:0.3em 1em;
	}

	header .navMenu {
		padding:0.2em 1em;
		border-top:4px dotted #eee;
		border-bottom:4px dotted #eee;
		text-align:left;
		font-family:var(--title-font);
	}
	header .navMenu .navCell + .navCell {
		border-top:1px solid #666;
	}

	header .navMenu .aLink {
		display:block;
		width:100%;
		padding:1em 2em;
		color:#fff;
	}
	header .navMenu .aLink > span:nth-child(1) {
		font-size:160%;
		font-weight:bold;
	}
	header .navMenu .aLink > span:nth-child(2) {
		display:none;
	}

	.spNavBottom {
		padding-top:1.2em;
	}

	.spNavBottom .tel-link {
		font-size:200%;
	}

	.menuOn {
		overflow:hidden;
	}
	.menuOn header .contents-navi {
		top:0;
	}
	.menuOn #fv ,
	.menuOn main ,
	.menuOn footer ,
	.menuOn #scrollTop {
		filter:blur(4px);
	}
}









/* ============================================================================================
	main
============================================================================================= */
main {
	overflow:hidden;
}
main > :last-child {
	padding-bottom:6em;
}


.nopage {
	padding:2em;
	min-height:40vh;

}
.nopage a {
	color:#06f;
}
.nopage a:hover {
	color:#f06;
}


@media screen and (max-width:799px) {
	main > :last-child {
		padding-bottom:3em;
	}
}



/* ============================================================================================
	footer
============================================================================================= */



/* ==============================================
	footer
=============================================== */
#footerInfo {
	text-align:center;
	background:#222;
	border-top:2px solid #666;
}
#footerInfo .logo {
	padding:2em 0 1em;
}
#footerInfo .logo img {
	width:480px;
	max-width:70%;
}
#footerInfo #copyright {
	padding:4em 0;
	font-size:90%;
}


@media screen and (max-width:799px) {
	#footerInfo .logo {
		padding-bottom:0.5em;
	}

	#footerInfo .name {
		font-size:120%;
	}

	#footerInfo .text {
		padding:0.5em 0;
		line-height:1.4;
	}

	#footerInfo #copyright {
		padding:2.5em 0;
		font-size:80%;
	}
}






/* ============================================================================================
	contents block
============================================================================================= */

/* ============================================================================================
	fv
============================================================================================= */
#fv {
	position:relative;
	text-align:center;
}

#fv .video {
	position:relative;
	z-index:2;
	width:100%;
	height:calc(100vh - 7.6em);
}
#video-pc {
	width:100%;
	height:100%;
	object-fit:cover;
}
#video-sp {
	width:100%;
	height:100%;
	object-fit:cover;
}

#fv .logo {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	opacity:0;
}
#fv .logo > * {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#fv .logo .bg {
	z-index:11;
}
#fv .logo .bg img {
	width:100%;
	height:100%;
	object-fit:cover;
}
#fv .logo .fg {
	z-index:12;
}
#fv .logo .fg img {
	max-width:50%;
	height:80%;
	object-fit:contain;
}
#fv .logo .text {
	padding-top:5vh;
	z-index:13;
}



@media screen and (max-width:799px) {
	#fv .logo .fg img {
		max-width:90%;
	}
	#fv .video
		aspect-ratio:404/720;
	}
}



/* ============================================================================================
	event
============================================================================================= */
#slider {
	text-align:center;
}
#slider img{
	max-height:70vh;
}

.bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top:-3em;
	width:3em;
	aspect-ratio:4/5;
	text-indent:-9999px;
	z-index: 9999;
	background:#222;
	outline:1px solid #666;
	border-radius:0.3em;
}
.bx-controls-direction a.bx-prev {
	left:0.5em;
}
.bx-controls-direction a.bx-next {
	right:0.5em;
}

.bx-controls-direction a:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	width:100%;
	height:100%;
	background:#fff;
	clip-path:polygon( 62% 10% ,20% 50% ,62% 90% ,80% 90% ,38% 50% ,80% 10% );
}
.bx-controls-direction a.bx-next:after {
	transform:rotateY(180deg);
}


@media screen and (min-width:800px) {
	.bx-controls-direction a:hover {
		background:#555;
		outline:1px solid #999;
	}
}
@media screen and (max-width:799px) {
	#slider img{
		max-width:90%;
		height:60vh;
		object-fit:contain;
	}
	.bx-controls-direction a {
		font-size:80%;
		background: rgba(0,0,0,0.3);
	}
	.bx-controls-direction a.bx-prev {
		left:-1em;
	}
	.bx-controls-direction a.bx-next {
		right:-1em;
	}
}



/* ============================================================================================
	concept
============================================================================================= */
.concept-main {
	background:url(images/contents/concept.webp) 50% 50% no-repeat;
	background-size:cover;
	padding:5em 1em;
}
.concept-main .conceptFrame {
	width:1100px;
	max-width:100%;
	margin:0 auto;
	padding:2em 4em 4em;
	background:rgba(0,0,0,0.7);
}
.concept-main .conceptFrame h3 {
	padding:1em 0;
	text-align:center;
	font-size:220%;
	font-weight:bold;
	font-family:var(--title-font);
}
.concept-main .conceptFrame h3 span + span {
	padding-left:0.5em;
}
.concept-main .conceptFrame h3 + p {
	padding-top:0.5em;
}
.concept-main .conceptFrame p {
	font-size:130%;
	line-height:1.8;
}


@media screen and (max-width:799px) {
	.concept-main .conceptFrame {
		padding:1em 1em 2em;
	}
	.concept-main .conceptFrame h3 {
		padding:0.5em 0;
		font-size:160%;
	}
	.concept-main .conceptFrame h3 span {
		display:block;
		text-align:left;
	}
	.concept-main .conceptFrame h3 span + span {
		padding-left:0;
		text-align:right;
	}
	.concept-main .conceptFrame p {
		padding:0 0.5em 0 1em;
		font-size:110%;
	}
}


/* ============================================================================================
	menu
============================================================================================= */
.cateBar {
	width:100%;
	margin:0 auto;
	padding-bottom:3em;
	text-align:center;
}
.cateBarBG {
	color:#ff6;
	background:linear-gradient( 90deg , #090 ,#fc0 ,#f00 ,#f60 ,#f90);
}
.cateBarBG span {
	font-size:250%;
	font-family:var(--title-font);
	letter-spacing:0.05em;
	text-indent:0.05em;
}

@media screen and (max-width:799px) {
	.cateBar {
		padding-bottom:1.5em;
	}
	.cateBarBG span {
		font-size:220%;
	}
}



/* ==============================================
	menu catch photo
=============================================== */
.menu-catch {
	position:relative;
	padding:0 1em;
}
.menu-catch.col2 > * {
	aspect-ratio:3/2;
}

.menu-catch .text {
	background:rgba(255,0,0,0.6);
}
.menu-catch .text .em {
	font-size:180%;
}

.menu-catch .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
}

@media screen and (max-width:799px) {
	.menu-catch.col2 .photo {
		width:100%;
	}

	.menu-catch.col2 .text {
		position:absolute;
		top:0;
		left:1.5em;
		width:calc(100% - 3em);
		height:100%;
		background:transparent;
	}
	.menu-catch.col2 .text p {
		width:100%;
		padding:0.5em 0;
		background:rgba(255,51,0,0.9);
	}
	.menu-catch.col2 .text .em {
		font-size:150%;
		font-weight:900;
	}
}



/* ==============================================
	drink
=============================================== */
.menuFrame {
	padding:3em 2em;
	color:#fff;
	border:2px solid #000;
}
.menuFrame.food {
	margin-top:3em;
}

.menu-photo {
	width:90%;
	margin:0 auto;
}

.menu-list {
	text-align:center;
}

.menu-list > div + div {
	padding-top:3em;
}

.menu-list-cell {
	padding:0 1em;
}

.menu-list-cell h4 {
	color:#f60;
	background:#fc0;
	font-size:160%;
	font-weight:900;
}
.menu-list-cell p {
	padding:0.5em 0 1em;
	font-size:140%;
}

.menu-list .textBox {
	width:80%;
	margin:0 auto;
	padding:1.5em;
	color:#fff;
	background:rgba(255,0,0,0.6);
	outline: 1px solid #f99;
}
.menu-list .textBox h4 ,
.menu-list .textBox p.em {
	font-size:180%;
}
.menu-list .textBox h4 {
	padding-bottom:0.5em;
}
.menu-list .textBox p {
	font-size:120%;
}

@media screen and (max-width:799px) {
	.menuFrame {
		padding:1.5em 1em;
	}

	.menu-list > div + div {
		padding-top:1.5em;
	}

	.menu-list .flex.col2 > .menu-list-cell {
		width:100%;
	}

	.menu-list-cell h4 {
		font-weight:900;
	}
	.menu-list-cell p {
		font-size:130%;
	}

	.menu-list .textBox {
		width:100%;
		padding:1.5em 0;
	}
	.menu-list .textBox h4 ,
	.menu-list .textBox p.em {

		font-size:140%;
	}
	.menu-list .textBox p {
		font-size:100%;
	}

}


/* ==============================================
	food
=============================================== */
.food-list {
	padding-bottom:2em;
	text-align:center;
}
.food-cell {
	padding:0 0.5em 1em;
}

.food-cell-inner {
	height:100%;
	padding:0.5em;
	background:#fb0;
}
.food-cell .photo {
	padding-bottom:0.5em;
}
.food-cell .photo img {
	width:100%;
	height:12em;
	object-fit:cover;
}

.food-cell .info {
	height:calc(100% - 12em - 0.5em);
	padding:0.5em;
	background:rgba(255,0,0,0.4);
}

.food-cell .head {
	padding-bottom:0.5em;
}
.food-cell .head h4 {
	font-size:130%;
}

.food-cell .text {
	padding:0.5em 1em 0;
	border-top:1px solid #fff;
}
.food-cell .text p {
}

@media screen and (max-width:799px) {
	.food-list {
		padding-bottom:0.5em;
	}

	.food-list.flex.col3 > * {
		width:calc(100% / 2);
		padding:0 0.1em 1em;
	}

	.food-cell-inner {
		padding:0.2em;
	}

	.food-cell .photo {
		padding-bottom:0.2em;
	}
	.food-cell .photo img {
		height:8em;
	}

	.food-cell .info {
		height:calc(100% - 8em - 0.2em);
		padding:0.2em;
	}
	.food-cell .head {
		padding-bottom:0.3em;
	}
	.food-cell .head h4 {
		font-size:110%;
		word-break:keep-all;
	}

	.food-cell .text {
		padding:0.3em;
	}
	.food-cell .text p {
		font-size:95%;
	}
	html[lang='ja'] .food-cell .text p {
		text-align:justify;
	}
	.food-cell .text p br {
		display:none;
	}
}




/* ============================================================================================
	party
============================================================================================= */
.party-main {
	text-align:center;
}

.party-main .image {
	width:60%;
	margin:0 auto;
}

.party-main h3 {
	font-size:220%;
	padding:1em 0;
	font-family:var(--title-font);
	font-weight:bold;
}

.party-main .text {
	width:80%;
	margin:0 auto;
	padding:1.5em;
	font-size:150%;
	color:#fff;
	background:rgba(255,255,255,0.2);
}
.party-main .text p {
	padding:0.2em 0;
}

@media screen and (max-width:799px) {
	.party-main .image {
		width:90%;
	}

	.party-main h3 {
		font-size:160%;
	}

	.party-main .text {
		width:100%;
		padding:1em 0;
		font-size:110%;
	}
}




/* ============================================================================================
	gallery
============================================================================================= */
.gallery-list.col4 > * {
	padding:0.3em;
}
.gallery-list.col4 .cell-inner {
	aspect-ratio:1/1;
	overflow:hidden;
	cursor:pointer;
}
.gallery-list.col4 img {
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
 	transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
	outline:1px solid #999;
}

@media screen and (min-width:800px) {
	.gallery-list.col4 .cell:hover img {
		transform:scale(1.1);
	}
}

@media screen and (max-width:799px) {
	.gallery-list.col4 > * {
		width:calc(100% / 2);
	}
}


/* ==============================================
	sp
=============================================== */
#gallerySP {
}
#gallerySP li > div {
	padding:0 1em;
}
#gallerySP li .cell-inner {
	aspect-ratio:1/1;
	padding:0.3em;
}
#gallerySP li img {
	width:100%;
	display:block;
	aspect-ratio:1/1;
	object-fit:cover;
	outline:1px solid #999;
}


/* ==============================================
	spotlight custom
=============================================== */
body #spotlight .header {
	height:60px;
}
body #spotlight .header div {
	width:80px;
	height:60px;
	padding-top:20px;
	opacity:0.7;
}
body #spotlight .icon {
	background-size:40px;
}



/* ============================================================================================
	sns
============================================================================================= */
.snsFrame.flex.col2 > * {
	padding:0 2em;
}
.snsFrame h2 {
	text-align:center;
	padding-bottom:1em;
}
.snsFrame h2 img {
	width:80%;
}

@media screen and (max-width:799px) {
	.snsFrame.flex.col2 {
		flex-wrap:wrap;
	}
	.snsFrame.flex.col2 > * {
		width:100%;
		padding:0;
	}
	.snsFrame.flex.col2 > * + * {
		padding-top:2em;
	}


}


 
/* ==============================================
	instagram
=============================================== */
.instaImages {
	padding:0 1em 2em;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.instaImages > div {
	width:calc(100% / 3);
	padding:3px;
}
.instaImages > div:nth-child(n + 10) {
	display:none;
}
.instaImages > div > a {
	position:relative;
	display:block;
}
.instaImages > div > a > * {
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.instaImages > div > a > *:not(span) {
	display:block !important;
}
.instaImages > div.video > a:after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25%;
	aspect-ratio:1/1;
	background:url(images/icons/instagram_reel_w.png) 50% 50% no-repeat;
	background-size:contain;
	filter:drop-shadow(0 0 3px #666);
	z-index:10;
}
.instaImages > div > a > span {
	display:none;
}
.instaImages > div.noData {
	width:100%;
	text-align:center;
	padding:3em 0;
	font-size:90%;
	color:#666;
}

.facebookFrame {
	padding:0 1em 2em;
}
.facebookFrame > div {
}
.facebookFrame iframe {
	width:100%;
	aspect-ratio:1/1;
}


@media screen and (min-width:800px) {
	.instaImages > div > a:hover {
		opacity:0.8;
	}

}



/* ============================================================================================
	access
============================================================================================= */
#access iframe {
	width:100% !important;
}

@media screen and (max-width:799px) {
	#access iframe {
		max-height:50vh;
	}
}




/* ============================================================================================
	shop information
============================================================================================= */
.shopFrame.flex {
	padding:0 4em;
}

.shopFrame.flex > .image {
	width:40%;
	height:100%;
	padding-top:1em;
}
.shopFrame.flex > .image img {
	aspect-ratio:4/3;
	object-fit:cover;
}
.shopFrame.flex > .text {
	width:55%;
	padding-left:2em;
}


.shop-data {
	font-size:120%;
}
.shop-data th ,
.shop-data td {
	padding:0.3em 0.8em;
	vertical-align:top;
}
.shop-data th {
	text-align:right;
}
.shop-data td {
	text-align:left;
}


@media screen and (max-width:799px) {
	.shopFrame.flex {
		padding:0;
		flex-direction:column;
	}

	.shopFrame.flex > .image {
		width:100%;
		padding:0 1em;
	}

	.shopFrame.flex > .text {
		width:100%;
		padding:1em 0 0;
	}

	.shop-data {
		margin:0 auto;
		font-size:110%;
	}
	html[lang='en'] .shop-data {
		font-size:100%;
	}


	.shop-data th ,
	.shop-data td {
		padding:0.3em;
	}
}