@charset "utf-8";

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

@media screen and (min-width:800px){
	.dispSP{
		display:none !important;
	}
}
@media screen and (max-width:799px){
	.dispPC{
		display:none !important;
	}
}



/* ========================================================================
	variables
======================================================================== */
* {
	--font-family:'Noto Sans JP' ,sans-serif;
	--font-family2:'Poppins' ,'Noto Sans JP' ,sans-serif;

}


/* ============================================================================================================
	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 ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	vertical-align:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
	font-style:inherit;
}


/* ========================================================================
	tag default
======================================================================== */
html ,body {
	position:relative;
	min-height:100%;
	height:100%;
}
a {
	color:inherit;
	text-decoration:none;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

img {
	vertical-align:top;
	max-width:100%;
	max-height:100%;
}

ul,ol,li{
	list-style:none;
}

.aFrame {
	display:block;
}


/* ============================================================================================================
	common style
============================================================================================================ */
body{
	font-size:16px;
	line-height:1.6;
	color:#000;
	background:#fff;
	font-family:var(--font-family);
	text-align:center;
}
#foreLayer{
	position:relative;
	margin:0 auto;
	z-index:2;
}
#foreLayer #foreLayer-inner {
	position:relative;
	z-index:1;
}
#backLayer{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
	overflow:hidden;
}
#backLayer > img{
	width:1920px;
	max-width:none;
	max-height:none;
}

main > .innerFrame {
	padding-bottom:2em;
}

@media screen and (min-width:800px){
	.innerFrame {
		width:1280px;
		margin:0 auto;
	}
}

@media screen and (max-width:799px){
	#foreLayer{
		width:480px;
		height:100%;
	}
	.innerFrame {
		width:100%;
	}
	#backLayer > img {
		object-fit:cover;
		width:100%;
		height:100%;
		object-position:90%;
	}
}


/* ========================================================================
	page-title
======================================================================== */
.page-title {
	padding-top:3em;
	color:#f60;
	text-shadow:1px 1px 0em #000 ,1px 1px 0.5em #fff;
	font-weight:500;
	line-height:1.1;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column-reverse;
}
.page-title > span.jp {
	font-size:240%;
}
.page-title > span.en {
	font-size:360%;
	font-family:var(--font-family2);
	font-weight:bold;
}

@media screen and (max-width:799px){
	.page-title > span.jp {
		font-size:200%;
	}
	.page-title > span.en {
		font-size:300%;
	}
}


/* ========================================================================
	info box
======================================================================== */
.infoSection {
	padding:3em 0 0.5em;
}

.infoBox {
	margin:0 auto;
	background:rgba(255,255,255,0.9);
	border:1px solid #fff;
	box-shadow:0 0 3px #000;
}
.infoBox.just {
	display:inline-block;
}
.infoBox.padding {
	padding:0.5em;
}

.infoBox .box-title {
	padding:0.3em 0;
	font-size:130%;
	color:#fff;
	background:#f90;
}

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


/* ========================================================================
	iframe
======================================================================== */
.iframe-outer {
	line-height:1;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
.iframe-outer > * {
	display:block;
	width:100%;
	height:100%;
	height:-webkit-fill-available;
}



/* ========================================================================
	shop info
======================================================================== */
.shop-flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.shop-flex > .logo {
}

.shop-flex > .shop-info {
	text-shadow:1px 1px 1em #fff;
}
.shop-flex > .shop-info .name {
	font-size:130%;
}
.shop-flex > .shop-info .addr {
	font-size:110%;
}
.shop-flex > .shop-info .tel a {
}

.shop-flex > .shop-info .tel a {
	display:inline-block;
	padding-left:1.1em;
	font-size:260%;
	line-height:1.2;
	background:url(images/icons/tel.png) 0 50% no-repeat;
	background-size:0.9em;
	font-family:var(--font-family2);
}

@media screen and (max-width:799px){
	.shop-flex {
		align-items:center;
		flex-direction:column-reverse;
	}
	.shop-flex > .logo {
		width:60%;
		padding-top:0.5em;
	}
}







/* ============================================================================================================
	header
============================================================================================================ */
#header-bg {
	background:rgba(255,255,255,0.5);
}


/* ========================================================================
	common header
======================================================================== */
header .shop-flex {
	justify-content:space-between;
}


@media screen and (min-width:800px){
	header .shop-flex > .logo img {
		height:160px;
	}
}
@media screen and (max-width:799px){
	header .shop-flex {
		padding-bottom:0.5em;
		box-shadow:0 0px 3px #999;
		flex-direction:column;
	}
}



/* ========================================================================
	toppage header
======================================================================== */
.top-flex {
	padding:0.5em 0;
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}
.top-image {
	width:calc(100% - 260px);
	padding-right:20px;
}
.top-image img{
	border:1px solid #fff;
	box-shadow:0 0 3px #000;
}

.top-side {
	width:260px;
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	flex-direction:column;
}

.top-side .aFrame {
	border:1px solid #fff;
	box-shadow:0 0 3px #000;
}
.top-side a.aFrame:hover {
	box-shadow:0 0 3px 1px #f06;
}

.top-side > .top-diary img {
	width:100%;
	max-height:200px;
}
.top-side > .top-movie iframe {
	display:block;
}

@media screen and (max-width:799px){
	.top-flex {
		flex-direction:column;
	}
	.top-flex .shop-flex {
		padding-top:0.5em;
	}
	.top-image {
		width:100%;
		padding:0;
	}
}



/* ========================================================================
	h1
======================================================================== */
#h1 {
	color:#fff;
	background:rgba(255,153,0,0.8);
	padding-bottom:0.1em;
}
#h1 h1 {
	font-size:90%;
}


/* ========================================================================
	pc navi
======================================================================== */
#header-nav {
	color:#fff;
	text-shadow:1px 1px 0 #666;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	background:rgba(255,153,0,0.8);
	box-shadow:0 0 3px #666;
	position:sticky;
	top:0;
	left:0;
	z-index:10;
}

#header-nav .nav-ul {
	display:flex;
}
#header-nav .nav-ul > li {
	flex-grow:1;
}
#header-nav .nav-ul > li a {
	position:relative;
	padding:0.6em 0 0.8em;
	line-height:1.3;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column-reverse;
}
#header-nav .nav-ul > li a .en {
	font-size:130%;
	font-family:var(--font-family2);
}
#header-nav .nav-ul > li a .jp {
	font-size:90%;
}

#header-nav .nav-ul > li a:before {
	content:"";
	position:absolute;
	bottom:0.3em;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:3px;
	background:#fff;
	border-bottom:1px solid #000;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	transform:scaleX(0);
}
#header-nav .nav-ul > li.active a:before ,
#header-nav .nav-ul > li:not(.active) a:hover:before {
	transform:scaleX(0.9);
}



/* ============================================================================================================
	footer
============================================================================================================ */
footer {
	padding:2em 0;
	text-shadow:1px 1px 0 #fff;
	background:rgba(255,153,0,0.6);
	border-top:1px solid #fff;
	box-shadow:0 1px 5px #666;
}


@media screen and (min-width:800px){
	footer .shop-flex > * {
		padding:0 2em;
	}
	footer .shop-flex > .logo img {
		height:160px;
	}
}


/* ========================================================================
	group-link
======================================================================== */
#group-link {
	padding:6em 2em;
}
#group-link a {
	display:inline-block;
	border:1px solid #fff;
	box-shadow:0 0 3px #000;
}
#group-link a:hover {
	box-shadow:0 0 5px 3px #f60;
}



/* ========================================================================
	sp menu
======================================================================== */

#spMenuOpen {
	display:none;
}


@media screen and (max-width:799px){

	/* ========================================================================
		toggle icon
	======================================================================== */
	#spMenuIcon {
		position:fixed;
		top:10px;
		right:10px;
		z-index:1010;
		height:60px;
		width:60px;
		background-color:#fff;
		border:1px solid #999;
		border-radius:5px;
		display:flex;
		justify-content:center;
		align-items:center;
	}

	#spMenuIcon .icon-text {
		display:none;
	}
	#spMenuIcon > .bar,
	#spMenuIcon > .bar:before,
	#spMenuIcon > .bar:after {
		content:'';
		position:absolute;
		display:block;
		height:3px;
		width:25px;
		margin:0;
		padding:0;
		border-radius:3px;
		background-color:#000;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	#spMenuIcon > .bar:before {
		bottom:8px;
	}
	#spMenuIcon > .bar:after {
		top:8px;
	}

	#spMenuOpen:checked ~ #foreLayer #spMenuIcon .bar {
		background-color:transparent;
	}
	#spMenuOpen:checked ~ #foreLayer #spMenuIcon .bar:before {
		transform:rotate(45deg);
		bottom:0;
	}
	#spMenuOpen:checked ~ #foreLayer #spMenuIcon .bar:after {
		transform:rotate(-45deg);
		top:0;
	}

	#spMenuOpen:checked ~ #foreLayer #foreLayer-inner {
		pointer-events:none;
	}


	/* ========================================================================
		menu panel
	======================================================================== */
	#spMenuPanel {
		position:fixed;
		top:0;
		left:105%;
		z-index:1000;
		width:100%;
		height:100%;
		overflow:hidden;
		color:#000;
		background-color:rgba(255,255,255,0.9);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
	}
	#spMenuOpen:checked ~ #foreLayer #spMenuPanel {
		left:0;
	}
	body:has(input#spMenuOpen:checked) {
		overflow:hidden;
	}

	#spMenuPanel .spMenu-inner{
		display:block;
		width:100vw;
		height:100vh;
		text-align:center;
		background-color:rgba(255,255,255,0.9);
		background:#fff;
	}


	/* ====================================
		menu title
	==================================== */
	#spMenuPanel .menu-title{
		padding:0.5em;
	}

	#spMenuPanel .menu-title-inner{
		width:100%;
		line-height:2.5;
		font-size:160%;
		font-weight:bold;
		color:#fff;
		background:#f90;
		border-radius:0.3em;
	}

	/* ====================================
		menu info
	==================================== */
	#spMenuPanel .shop-flex {
		flex-direction:column;
	}


	/* ====================================
		menu list
	==================================== */
	#spMenuPanel .menu-list{
		padding:2em 2em 0;
		line-height:3.5;

		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
	}
	#spMenuPanel .menu-list > .nav-li{
		width:100%;
		background-color:rgba(238, 238, 238, 0.3);
		border:solid 1px #999;
	}
	#spMenuPanel .menu-list a {
		display:block;
	}
	#spMenuPanel .menu-list > .nav-li .en{
		display:none;
	}
}


/* ========================================================================
	top button
======================================================================== */
#topButton {
	display:none;
	position:fixed;
	right:0.3em;
	bottom:0.3em;
	width:3.6em;
	height:3.6em;
	z-index:990;
}
#topButton > .anchorLink {
	width:100%;
	height:100%;
	line-height:1.2;
	cursor:pointer;
	color:#fff;
	background:rgba(255,51,153,0.8);
	border:1px solid #fff;
	border-radius:0.5em;
	box-shadow:0 0 3px #000;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;

	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}

@media screen and (min-width:800px){
	#topButton > .anchorLink {
		background:rgba(255,153,0,0.7);
	}
	#topButton > .anchorLink:hover {
		background:rgba(255,102,0,1);
	}
}