@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@200..700,0..1&display=swap');


/* ============================================================================================
	web font
============================================================================================= */
:root {
	--font-family:'Zen Old Mincho',serif;
	--font-weight:600;
	--font-bold:900;

	--content-padding:6em;
	--accent-color:#fd9347;
	--accent-color2:#fc9;
}
@media screen and (max-width:799px) { 
	:root {
		--content-padding:4em;
	}
}



/* ============================================================================================
	CSS reset
============================================================================================= */
* {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	margin:0;
	padding:0;
	border:0 none;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
	vertical-align:inherit;
}
.bx-wrapper * {
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}
ol ,ul ,li {
	list-style:none;
}
button {
	padding:0.3em 1em;
}
a ,a:before ,a:after {
	color:inherit;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}


img {
	vertical-align:bottom;
	max-width:100%;
	max-height:100%;
}
main img {
	filter:drop-shadow(3px 3px 3px #999);
}
blockquote ,q {
	quotes:none;
}
blockquote:before ,blockquote:after
,q:before ,q:after {
	content:'';
	content:none;
}
header ,footer ,nav ,main ,article ,section ,aside {
	position:relative;
	display:block;
}

.noDisp ,
.altText {
	display:none !important;
}


.left {
	text-align:justify;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}

/* ============================================================================================
	animation pattern
============================================================================================= */
.animeFrame {
	position:relative;
	overflow:hidden;
}
.animated:not(.free) {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:block;
	z-index:5;
}

@-webkit-keyframes blink {
	0%{opacity:1;} 100%{opacity:0.4;}
}
@-moz-keyframes blink {
	0%{opacity:1;} 100%{opacity:0.4;}
}
@keyframes blink{
	0%{opacity:1;} 100%{opacity:0.4;}
}




/* ============================================================================================
	body layout
============================================================================================= */
body{
	line-height:1.8;
	font-size:16px;
	font-weight:var(--font-weight);
	color:#000;
	background:#fff;
	font-family:var(--font-family);
	text-align:justify;
}
small {
	font-size:90%;
}
em {
	font-size:120%;
}

.outer {
}
.inner {
	width:1280px;
	margin:0 auto;
}

.flex {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
}


@media screen and (min-width:800px) { 
	.sp ,
	.xElement > :nth-child(2) {
		display:none !important;
	}
}
@media screen and (max-width:799px) { 
	.pc ,
	.xElement > :nth-child(1) {
		display:none !important;
	}
	.inner {
		width:480px;
	}
}



/* ==============================================
	pagetoplink button
=============================================== */
#pagetopLink {
	position:fixed;
	right:1em;
	bottom:1em;
	display:none;
	width:4em !important;
	height:4em !important;
}
#pagetopLink .flex {
	width:100%;
	height:100%;
	color:#fff;
	background:var(--accent-color);
	border:2px solid #fff;
	border-radius:0.3em;
	line-height:1.2;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;

	cursor:pointer;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

@media screen and (min-width:800px) { 
	#pagetopLink:hover .flex {
		filter:contrast(1.5);
	}
}
@media screen and (max-width:799px) { 
	#pagetopLink {
		width:3em !important;
		height:3em !important;
	}
}



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

@media screen and (max-width:799px){
	body #spotlight .header div {
		opacity:1;
	}
}


/* ==============================================
	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.video > a:after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25%;
	aspect-ratio:1/1;
	background:url(images2/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;
}
.instaImages > div:nth-child(n + 10) {
	display:none;
}

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

}




/* ============================================================================================
	header
============================================================================================= */
header #h1 {
	font-size:90%;
	color:#fff;
	background:var(--accent-color);
}

#header .flex {
	padding:1em 0.5em;
	justify-content:space-between;
}

.headerLogo img {
	height:4em;
}

.headerButton {
	display:flex;
	justify-content:flex-end;
}
.contactButton {
	width:13em;
	color:#fff;
	background:var(--accent-color);
	border:2px solid var(--accent-color);
	border-radius:0.3em;
	text-align:center;
}
.contactButton span {
	font-size:110%;
	font-weight:bold;
}

.headerTel {
	line-height:1.2;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
}
.headerTel > span {
	padding-right:15px;
}
.headerTel a.telIcon {
	display:block;
	font-size:28px;
	line-height:36px;
	padding-left:42px;
	background:url(images_re/icons/tel.webp) 0 50% no-repeat;
	background-size:contain;
}

@media screen and (min-width:800px) { 
	header #h1 .inner ,
	#header.inner {
		width:100%;
		min-width:1280px;
		max-width:1600px;
	}
	header #header li {
		height:100%;
	}
	.contactButton:hover {
		filter:contrast(1.5);
	}
}
@media screen and (max-width:799px) { 
	header {
		position:sticky;
		top:-1px;
		left:0;
		right:0;
		z-index:10000;
		background:rgba(255,255,255,0.95);
	}
	#header .flex {
		position:relative;
		z-index:10;
		width:480px;
		margin:0 auto;
		padding:0.3em 0.5em;
		box-shadow:0 1px 3px #666;
	}
	#header img {
		max-height:3em;
	}
	#header .flex > :nth-child(1) {
		margin-right:auto;
	}
	.headerButton {
		padding-right:0.5em;
	}

	.contactButton {
		width:10em;
		line-height:1.3;
	}
	.contactButton span {
		font-size:100%;
	}
}




/* ==============================================
	header nav
=============================================== */
@media screen and (min-width:800px) { 
	#headerNav {
		position:sticky;
		z-index:10000;
		top:0;
		left:0;
		right:0;
		background:#fff;
		box-shadow:0 0 3px #ccc;
	}
	#headerNav .inner {
		width:100%;
		min-width:1280px;
		max-width:1600px;
	}
	#headerNav nav ul.flex {
		padding:1em 0 0.5em;
		justify-content:space-evenly;
	}
	#headerNav nav ul.flex li a {
		position:relative;
		display:block;
		width:100%;
		height:100%;
		padding:0.3em 0.5em 1em;
		font-weight:var(--font-bold);
	}
	#headerNav nav ul.flex li a span {
		font-size:130%;
	}
	#headerNav nav ul.flex li a:before {
		content:"";
		position:absolute;
		left:50%;
		bottom:0.5em;
		display:block;
		width:5em;
		height:0.5em;
		background:#666;
		clip-path:polygon( 50% 0 ,100% 100% ,0 100% );
		transform:translateX(-50%);
		opacity:0;
	}

	#headerNav nav ul.flex li.active a:before {
		background:var(--accent-color);
		clip-path:polygon( 50% 100% ,100% 0 ,0 0 );
		opacity:1;
	}
	#headerNav nav ul.flex li a span:nth-child(1) {
		display:none;
	}
	#headerNav nav ul.flex li:not(.active) a:hover:before {
		opacity:1;
	}

	#headerNav nav ul.flex li.navMenu09 ,
	#headerNav nav ul.flex li.navMenu10 ,
	#headerNav nav ul.flex li.navMenu11 {
		display:none;
	}
}
@media screen and (max-width:799px) { 
	#headerNav {
		position:fixed;
		z-index:9999;
		top:0;
		bottom:0;
		right:0;
		margin-right:-110%;
		width:100%;
		height:100%;
		background:rgba(255,255,255,0.9);
		backdrop-filter:blur(4px);
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
	}
	#headerNav.on {
		margin-right:0%;
	}
	#headerNav nav ul.flex {
		padding:5em 1em 0;
		display:block;
	}
	#headerNav nav ul.flex li {
		width:100%;
		padding-bottom:0.5em;
	}

	#headerNav nav ul.flex li:not(.sp) a {
		padding:0.5em 0;
		line-height:1.4;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column-reverse;
	}
	#headerNav nav ul.flex li a span:nth-child(1){
		font-size:90%;
		display:none;
	}
	#headerNav nav ul.flex li a span:nth-child(2){
		font-size:140%;
	}

	#headerNav nav .headerTel {
		padding-top:1em;
		display:flex;
		justify-content:center;
		flex-direction:column;
	}
	#headerNav nav .headerTel > span {
		padding:0 0 0.3em;
		font-size:110%;
	}

	#headerNav nav ul.flex li.navMenuSNS {
		padding-top:15px;
		display:flex;
		justify-content:center;
		gap:10px
	}
	#headerNav nav ul.flex li.navMenuSNS img {
		width:60px;
	}
}


/* ============================================================================================
	footer
============================================================================================= */
/* ==============================================
	footer map
=============================================== */
#footerMap {
	width:100%;
	margin:0 auto;
}
#footerMap h2 {
	color:#630;
	font-size:240%;
	line-height:2em;
	text-align:center;
}
#footerMap #map {
	width:100%;
	height:30vw;
	min-height:400px;
}
@media screen and (min-width:800px) {
	#footerMap {
		min-width:1000px;
	}
}
@media screen and (max-width:799px) {
	#footerMap {
		width:480px;
		padding:0;
	}
}



/* ==============================================
	footer
=============================================== */
footer .outer {
	padding:2em 0;
	line-height:1.6;
	background:var(--accent-color2);
	text-align:center;
}
footer .outer .inner > div {
	padding-top:2em;
}
@media screen and (max-width:799px) { 
	footer .outer {
		padding-bottom:2em;
		font-size:85%;
	}
	footer .outer .inner #footerInfo h2 img {
		max-width:80%;
	}
}



/* ==============================================
	footer nav
=============================================== */
#footerNav {
}
#footerNav ul.navMenu.flex {
	justify-content:space-around;
}
#footerNav ul.navMenu.flex a {
	padding:0 0.5em;
	border-bottom:2px solid transparent;
}
#footerNav ul.navMenu.flex a:hover {
	border-bottom-color:#000;
}
#footerNav ul.navMenu.flex a span:nth-child(2) {
	display:none;
}



/* ==============================================
	footer copyright
=============================================== */
footer #copyright {
	padding:0.5em 0;
	border-top:4px solid #70000e;
	text-align:center;
}
@media screen and (max-width:799px) { 
	footer #copyright {
		font-size:90%;
		line-height:1.6;
	}
	footer #copyright a {
		display:block;
	}
}


/* ============================================================================================
	main layout
============================================================================================= */
main > * {
	padding-bottom:var(--content-padding);
}
main > * > .inner {
	padding:0 1em;
}
@media screen and (max-width:799px) { 
	main > * {
		padding-bottom:var(--content-padding);
	}
	main > * > .inner {
		padding:0 0.5em;
	}
}



/* ==============================================
	page title
=============================================== */
.page-header {
	position:relative;
	overflow:hidden;
}
.page-header-image {
	display:flex;
	justify-content:center;
}
.page-header-image img {
	max-width:none;
}
.page-header h2 {
	text-align:center;
}
.page-header .inner {
	color:#fff;
}
.page-header .inner h2 {
	padding:2em 0.5em 1em;
	border-bottom:2px solid #fff;
	display:flex;
	justify-content:flex-start;
	align-items:baseline;
	line-height:1;
}
.page-header .inner h2 span {
	font-size:500%;
}
.page-header .inner h2 span .small {
	font-size:40%;
}
.page-header .inner p {
	padding:1.5em;
	font-weight:var(--font-bold);
	line-height:1.6;
}
.page-header .inner p span {
	font-size:180%;
}

@media screen and (min-width:800px) { 
	.page-header {
		min-width:1280px;
	}
}
@media screen and (max-width:799px) { 
	.page-header-image img {
		height:18em;
	}
	.page-header-image img.tall {
		height:28em;
	}
	.page-header .inner h2 {
		padding-top:1em;
	}
	.page-header .inner h2 span {
		font-size:250%;
	}
	.page-header .inner p {
		padding:1em;
	}
	.page-header .inner p span {
		font-size:105%;
	}
}



/* ============================================================================================
	common layout
============================================================================================= */
.message-center {
	text-align: center;
	padding:4em 1em;
	line-height:2;
}
.message-center.noPadding {
	padding:0 1em;
}
.message-center span {
	font-size:160%;
}
.message-center > * + * {
	padding-top:1em;
}

@media screen and (max-width:799px) {
	.message-center {
		line-height:1.6;
	}
	.message-center span {
		font-size:130%;
	}
}


/* ==============================================
	topFlex - type1 / rev
=============================================== */
.topFlex.type1 .flex {
	align-items: flex-start;
}
.topFlex.type1.rev .flex {
	flex-direction:row-reverse;
}
.topFlex.type1 li {
	padding:0 1em;
}
.topFlex.type1 .info {
	width:60%;
	text-align:left;
}
.topFlex.type1 .info h2 {
	padding:0 1.5em 0.2em;
	line-height:1.4;
	border-bottom:2px solid #000;
}
.topFlex.type1 .info h2 span {
	font-size:200%;
}
.topFlex.type1 .infoText {
	padding:1.5em;
}
.topFlex.type1 .infoText p {
	line-height:2;
	font-size:120%;
}
.topFlex.type1 .image {
	width:40%;
}
.topFlex.type1 .image img {
	width:80%;
}

@media screen and (max-width:799px) {
	.topFlex.type1 .flex ,
	.topFlex.type1.rev .flex {
		flex-direction:column;
	}
	.topFlex.type1 .info ,
	.topFlex.type1 .image {
		width:100%;
	}
	.topFlex.type1 .info h2 {
		padding:0 1em 0.2em;
	}
	.topFlex.type1 .info h2 span {
		font-size:160%;
	}
	.topFlex.type1 .infoText {
		padding:1.5em 0.5em;
	}
	.topFlex.type1 .infoText p {
		line-height:1.8;
		font-size:110%;
	}
}



/* ==============================================
	topFlex - type2 / rev
=============================================== */
.topFlex.type2 h2 {
	padding:0 1.5em 1em;
	line-height:1.4;
	border-bottom:2px solid #000;
	text-align:center;
}
.topFlex.type2 h2 span {
	font-size:200%;
}

.topFlex.type2 .flex {
	padding-top:3em;
	align-items:flex-start;
}
.topFlex.type2.rev .flex {
	flex-direction:row-reverse;
}
.topFlex.type2 li {
	padding:0 1em;
}
.topFlex.type2 .info {
	width:55%;
	text-align:left;
}
.topFlex.type2.noImage .info {
	width:100%;
}
.topFlex.type2.noImage h2 {
	text-align:left;
}
.topFlex.type2 .infoText {
	padding:0 1.5em;
}
.topFlex.type2 .infoText p {
	font-size:120%;
	line-height:2.2;
}
.topFlex.type2 .image {
	width:45%;
}
.topFlex.type2 .image img {
	width:90%;
}


@media screen and (max-width:799px) {
	.topFlex.type2 h2 {
		margin:0 1em;
		padding:0 1em 0.2em;
		text-align:left;
	}
	.topFlex.type2 h2 span {
		font-size:160%;
	}

	.topFlex.type2 .flex ,
	.topFlex.type2.rev .flex {
		padding-top:0;
		flex-direction:column;
	}
	.topFlex.type2 .info ,
	.topFlex.type2 .image {
		width:100%;
	}
	.topFlex.type2 .infoText {
		padding:1.5em 0.5em;
	}
	.topFlex.type2 .infoText p {
		line-height:1.8;
		font-size:110%;
	}

}


/* ============================================================================================
	01top layout
============================================================================================= */

/* ==============================================
	01top - 01
=============================================== */
.top01-p {
	padding-top:var(--content-padding);
	text-align:center;
}
.top01-p p {
	font-size:150%;
}

@media screen and (max-width:799px) { 
	.top01-p p {
		padding:0 0.5em;
		font-size:120%;
		text-align:left;
	}
}



/* ==============================================
	01top - 02
=============================================== */
.snsFlex .flex {
	justify-content:space-between;
	flex-wrap:initial;
	align-items:stretch;
}
.snsFlex .flex > li {
	width:48%;
	box-shadow: 0px 0px 3px #666;
}

.newsWidget ,
.instaWidget {
	background:#fff;
	border-radius:5px;
}
.newsWidget h2 ,
.instaWidget h2 {
	padding:0 10px 0.2em;
	font-size:36px;
	line-height:1.4em;
	text-align:center;
}

@media screen and (min-width:800px) {
	.snsFlex .flex > li {
		overflow:auto;
	}
}
@media screen and (max-width:799px) {
	.snsFlex .flex {
		flex-direction:column;
	}
	.snsFlex .flex > li {
		width:100%;
	}
	.snsFlex .newsWidget h2 ,
	.snsFlex .instaWidget h2 {
		padding:0.2em 0;
		font-size:200%;
	}

	.snsFlex .newsWidget {
		margin-top:2em;
	}

}


/* ============================================================================================
	news list
============================================================================================= */
.newsList {
}
.newsList li {
	padding:1em;
}
.newsList li + li {
	border-top:1px solid #999;
}

.newsList li h3.flex {
	padding:0 0.5em;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
	text-align:left;
}
.newsList li h3.flex > * {
	width:100%;
}
.newsList li h3.flex .date {
	font-size:90%;
}
.newsList li h3.flex .new:before {
	content:"NEW";
	display:inline-block;
	margin-right:0.5em;
	padding:0 0.5em;
	line-height:1.6;
	font-size:90%;
	color:#fff;
	background:#c00;
}
.newsList li h3.flex .text {
	font-size:130%;
}

.newsList li div.infoText {
	padding:0.5em 1em;
	line-height:1.6;
	text-align:left;
}

@media screen and (max-width:799px) {
	.newsList li {
		padding:1em 0.5em;
	}
}





/* ==============================================
	01top - 04
=============================================== */
#top04 .bg {
	background:url("images_re/contents/01top-04bg.webp") 50% 50% no-repeat;
	background-size:cover;
}
#top04 .bg .inner {
	padding:0;
}
#top04 .animeFrame {
	padding:1em 1em 2em;
	line-height:1.6;
	color:#fff;
	text-shadow:0 0 5px #000 ,1px 1px 0 #000;
	text-align:left;
	font-weight:var(--font-bold);
}
#top04 .animeFrame h2 span{
	font-size:500%;
}
#top04 .animeFrame p {
	padding-top:0.5em;
}
#top04 .animeFrame p span{
	font-size:180%;
}


@media screen and (max-width:799px) { 
	#top04 .animeFrame h2 span{
		font-size:250%;
	}
	#top04 .animeFrame p span{
		font-size:120%;
	}

}





/* ==============================================
	01top - 08
=============================================== */
#top08 .inner .flex {
	justify-content:space-between;
	align-items:flex-start;
}
#top08 .inner .flex li {
}
#top08 .inner .flex li {
	width:50%;
	text-align:center;
}
#top08 .inner .flex li a {
	display:block;
	padding:1em;
	font-size:120%;
	line-height:1.6;
}

@media screen and (max-width:799px) { 
	#top08 .inner .flex {
		flex-direction:column;
		align-items:center;
	}
	#top08 .inner .flex li {
		width:80%;
	}
	#top08 .inner .flex li a {
		font-size:110%;
	}
}



/* ============================================================================================
	02menu layout
============================================================================================= */
/* ==============================================
	02menu - 01
=============================================== */
#menu01 {
}


/* ==============================================
	02menu - 02
=============================================== */
#menu02 {
}
#menu02 .inner .menuOuter {
	display:block;
}
#menu02 .inner .menuOuter h2 {
	padding-bottom:0.5em;
}
#menu02 .inner .menuOuter p.text {
	text-align:center;
	padding-bottom:0.5em;
}
#menu02 .inner .menuOuter p.text em {
	font-size:24px;
	line-height:2em;
}
#menu02 .inner .menuOuter ul li.flex {
	font-size:16px;
	line-height:2em;
	padding-bottom:0.5em;
}
#menu02 .inner .menuOuter ul li.flex > * {
	padding:0 20px;
}


@media screen and (max-width:799px) { 
	#menu02 .inner .menuOuter p.text {
	}
	#menu02 .inner .menuOuter p.text em {
		font-size:20px;
	}
}


/* ============================================================================================
	04gin layout
============================================================================================= */

/* ==============================================
	04gin - 04
=============================================== */
#gin04 .bg .inner {
	position:relative;
	padding:0;
}
#gin04 .bg .inner .pc .gin04-img {
	opacity:0;
}
#gin04 .bg .inner .gin04-binList.flex {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	padding:160px 3px 30px;
	background:url("images_re/contents/04gin-04bgInner.webp") 0 0 no-repeat;
}
#gin04 .bg .inner .gin04-binList .gin04-bin {
	width:142px;
	height:100%;
	padding-top:330px;
	opacity:0;
	font-size:110%;
	line-height:1.4;
	color:#fff;
	background:url("images_re/contents/04gin-04img.webp") 50% 0 no-repeat;
	-webkit-transition:all 0.4s ease;
	transition:all 0.4s ease;
	cursor:pointer;
	text-align:center;
}
#gin04 .bg .inner .gin04-binList .gin04-bin.on {
	opacity:1;
}
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin1"] { background-position:  -3px -160px; }
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin2"] { background-position:-145px -160px; }
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin3"] { background-position:-287px -160px; }
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin4"] { background-position:-429px -160px; }
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin5"] { background-position:-571px -160px; }
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin6"] { background-position:-713px -160px; }
#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin7"] { background-position:-855px -160px; }


#gin04 .bg .inner .outerWindow .innerWindow {
	position:relative;
	width:1000px;
	margin:0 auto;
}

#gin04-binText {
	position:absolute;
	top:20px;
	left:0;
	right:0;
	width:100%;
	padding:0 2em;
	line-height:1.6;
	font-size:120%;
	color:#fff;
	text-shadow:1px 1px 0 #000,0 0 3px #000,0 0 10px #000;
	text-align:center;
	-webkit-transition:all 0.4s ease;
	transition:all 0.4s ease;
	opacity:0.8;
}
#gin04-binText.on {
	opacity:1;
}


#gin04 .bg .inner p {
	text-align:right;
	padding:50px 20px 200px;
	color:#fff;
	text-shadow:1px 1px 0 #000,0 0 3px #000,0 0 5px #000,0 0 10px #000;
	font-size:18px;
	line-height:2.2em;
}

@media screen and (max-width:799px) { 
	#gin04 {
		background:none;
	}
	#gin04 .bg .inner .outerWindow {
		width:100%;
		height:100%;
		position:relative;
	}
	#gin04 .bg .inner p {
		padding:20px 10px;
		font-size:16px;
		line-height:1.8em;
	}

	#gin04 .bg .inner .sp {
		width:480px;
		padding-bottom:60px;
		margin:0 auto;
	}
	#gin04 .bg .inner .sp .gin04-binList {
	}
	#gin04 .bg .inner .sp .gin04-binList li {
		position:relative;
		padding:0 20px;
	}
	#gin04 .bg .inner .sp .gin04-binList li > .gin04-img {
	}
	#gin04 .bg .inner .sp .gin04-binList li > .flex {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		padding:160px 10px 30px;
	}
	#gin04 .bg .inner .sp .gin04-binList li > .flex div {
		width:140px;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-box-shadow:none;
		box-shadow:none;
		outline:none;
		font-size:110%;
	}
	#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin2"] { background-position:-120px -160px; }
	#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin3"] { background-position:-260px -160px; }
	#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin4"] { background-position:-400px -160px; }
	#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin5"] { background-position:-565px -160px; }
	#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin6"] { background-position:-705px -160px; }
	#gin04 .bg .inner .gin04-binList .gin04-bin[data-id="gin04-bin7"] { background-position:-845px -160px; }

	#gin04-binText {
		top:1em;
		width:440px;
		margin:0 auto;
		padding:0 1em;
		font-size:120%;
		line-height:1.6;
		text-align:left;
		z-index:1000;
	}

	#gin04 .swiper-button-prev ,
	#gin04 .swiper-button-next {
		width:40px;
		height:40px;
		margin-top:-40px;
		background-size:40px 40px;
		z-index:1010;
	}
	#gin04 .swiper-button-prev {
		background-image:url(images_re/icons/arrow_left.webp);
		left:-5px;
	}
	#gin04 .swiper-button-next {
		background-image:url(images_re/icons/arrow_right.webp);
		right:-5px;
	}
	#gin04 .swiper-pagination-bullet {
		width:24px;
		height:24px;
		background:#000;
	}
	#gin04 .swiper-pagination-bullet-active {
		background:#333;
	}

	#gin04 .swiper-container-horizontal > .swiper-pagination-bullets {
		botttom:0;
	}
	#gin04 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
		margin:0 8px;
	}
}



/* ============================================================================================
	05concept layout
============================================================================================= */

/* ==============================================
	05concept - 03
=============================================== */
#concept03 .bg {
	background:url("images_re/contents/05concept-03bg.webp") 50% 50% no-repeat;
	background-size:cover;
}
#concept03 .bg .inner {
	padding:30px 50px 300px;
}
#concept03 .bg .inner p strong {
	color:#fff;
	text-shadow:1px 1px 0 #000,0 0 3px #000,0 0 10px #000;
	font-size:36px;
	line-height:1.8em;
}
@media screen and (max-width:799px) { 
	#concept03 .bg .inner {
		padding:30px 20px 200px;
	}
	#concept03 .bg .inner p strong {
		font-size:26px;
		font-weight:var(--font-bold);
	}
}




/* ============================================================================================
	07access layout
============================================================================================= */

/* ==============================================
	07access - 01
=============================================== */
#access01 .inner h3 {
	text-align:center;
	padding-bottom:3em;
}
#access01 .inner h3 span {
	font-size:240%;
}
#access01 .inner .flex {
	flex-direction:row-reverse;
	align-items:flex-start;
}
#access01 .inner .flex > * {
	width:45%;
	padding:0 10px;
}
#access01 .inner .flex > dl {
	width:55%;
	font-size:110%;
	line-height:1.6;
	text-align:left;
}
#access01 .inner .flex > dl dt {
	padding-top:0.3em;
	padding-left:1em;
	font-weight:var(--font-bold);
	border-top:2px dotted #633;
}
#access01 .inner .flex > dl dd {
	padding-left:3em;
	padding-bottom:0.3em;
}
#access01 .inner .flex > dl dd:last-child {
	border-bottom:2px dotted #633;
}

@media screen and (max-width:799px) { 
	#access01 .inner h3 {
		padding:30px 0 10px;
	}
	#access01 .inner h3 span {
		font-size:180%;
	}

	#access01 .inner .flex {
		flex-direction:column;
		flex-wrap:wrap;
	}
	#access01 .inner .flex > * {
		width:100% !important;
		padding:0 5px;
	}
	#access01 .inner .flex > dl {
	}
	#access01 .inner .flex > dl dt {
		padding-left:0.5em;
	}
	#access01 .inner .flex > dl dd {
		padding-left:1.5em;
	}
	#access01 .inner .flex > *:nth-child(2) {
		width:100% !important;
		padding:20px 100px;
	}
}



/* ==============================================
	07access - 02
=============================================== */
#access02 #routeFrame {
	position:relative;
	overflow:hidden;
}
#access02 #routeFrame #footStamp {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:100%;
}
#access02 #routeFrame #routePoint {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:100%;
}
#access02 #routeFrame #routePoint li {
	position:absolute;
}
#access02 #routeFrame #routePoint li img {
	box-shadow:8px 8px 0 rgba(102,102,102,0.4);
}
#access02 #routeFrame #routePoint li#route1 {
	top:310px;
	right:90px;
	width:400px;
}
#access02 #routeFrame #routePoint li#route2 {
	top:545px;
	left:70px;
	width:290px;
}
#access02 #routeFrame #routePoint li#route2:after {
	content:"";
	position:absolute;
	top:-215px;
	left:-25px;
	display:block;
	width:320px;
	height:240px;
	background:url(images_re/contents/07map-02img3girl.webp) 50% 0 no-repeat;
	background-size:contain;
}
#access02 #routeFrame #routePoint li#route3 {
	top:970px;
	right:235px;
	width:290px;
}
#access02 #routeFrame #routePoint li#route3:after {
	content:"";
	position:absolute;
	top:10px;
	right:-210px;
	display:block;
	width:320px;
	height:240px;
	background:url(images_re/contents/07map-02img2girl-2.webp) 50% 0 no-repeat;
	background-size:contain;
}
#access02 #routeFrame #routePoint li#route4 {
	top:1420px;
	right:190px;
	width:290px;
}
#access02 #routeFrame #routePoint li#route4:after {
	content:"";
	position:absolute;
	top:30px;
	right:-220px;
	display:block;
	width:320px;
	height:375px;
	background:url(images_re/contents/07map-02img4girl.webp) 50% 0 no-repeat;
	background-size:contain;
}
#access02 #routeFrame #routePoint li#route5 {
	top:1610px;
	left:25px;
	width:290px;
}


@media screen and (max-width:799px) {
	#access02 img {
		max-height:initial !important;
	}
	#access02 #routeFrame #routePoint li img {
		box-shadow:5px 5px 0 rgba(102,102,102,0.4);
	}
	#access02 #routeFrame #routePoint li#route1 {
		top:160px;
		right:40px;
		width:180px;
	}
	#access02 #routeFrame #routePoint li#route2 {
		top:255px;
		left:20px;
		width:150px;
	}
	#access02 #routeFrame #routePoint li#route2:after {
		top:-120px;
		left:-20px;
		width:180px;
	}
	#access02 #routeFrame #routePoint li#route3 {
		top:465px;
		right:110px;
		width:140px;
	}
	#access02 #routeFrame #routePoint li#route3:after {
		top:0px;
		right:-110px;
		width:170px;
	}
	#access02 #routeFrame #routePoint li#route4 {
		top:680px;
		right:85px;
		width:145px;
	}
	#access02 #routeFrame #routePoint li#route4:after {
		top:15px;
		right:-110px;
		width:170px;
	}
	#access02 #routeFrame #routePoint li#route5 {
		top:750px;
		left:10px;
		width:140px;
	}
}




/* ============================================================================================
	08lady layout
============================================================================================= */




/* ============================================================================================
	09contact layout
============================================================================================= */
#contact02 {
}
#contact02 .inner .menuOuter {
	display:block;
}
#contact02 .inner .menuOuter .flex {
	flex-direction:row-reverse;
	justify-content:space-between;
	flex-wrap:initial;
	align-items:flex-start;
}
#contact02 .inner .menuOuter .flex li {
	width:50%;
	padding:0 1em;
}
#contact02 .inner .menuOuter .flex li p {
	text-align:left;
	padding-bottom:1em;
}
#contact02 .inner .menuOuter .flex li p em {
	font-size:120%;
}
#contact02 .inner .menuOuter p strong {
	display:block;
	padding:2em 0 1.5em;
	text-align:center;
	font-size:150%;
	line-height:1.4;
}

.contactImage {
	width:80%;
}

@media screen and (max-width:799px) { 
	#contact02 .inner .menuOuter .flex {
		flex-wrap:wrap;
	}
	#contact02 .inner .menuOuter .flex li {
		width:100%;
	}
	#contact02 .inner .menuOuter .flex li p {
		text-align:center;
	}
	#contact02 .inner .menuOuter p strong {
		font-size:120%;
	}

}


/* ============================================================================================
	10link layout
============================================================================================= */
#link01 .inner #aboutLink {
	padding:30px 50px;
}
#link01 .inner #aboutLink p {
	line-height:3em;
}
#link01 .inner #aboutLink .flex {
	flex-wrap:wrap;
	aling-items:center;
}
#link01 .inner #aboutLink .flex > * {
	width:70%;
	padding:20px 20px 0px;
	text-align:left;
}
#link01 .inner #aboutLink .flex > dt {
	width:30%;
	text-align:right;
}
@media screen and (max-width:799px) { 
	#link01 .inner #aboutLink {
		padding:20px 10px;
		font-size:14px;
	}
	#link01 .inner #aboutLink p {
		line-height:2em;
	}
}


/* ==============================================
	10link - 01 - links
=============================================== */
#link01 .inner .bannerList {
	padding:30px;
}
#link01 .inner .bannerList h3 {
	font-size:16px;
	color:#fff;
	background:#000;
	padding:3px 10px;
}
#link01 .inner .bannerList .notice {
	padding:20px;
}
#link01 .inner .bannerList .linkList {
	width:100%;
	border-collapse:collapse;
}
#link01 .inner .bannerList .linkList tr > * {
	padding:10px 20px;
	vertical-align:middle;
}
#link01 .inner .bannerList .linkList tr > th {
	text-align:right;
}
#link01 .inner .bannerList .linkList tr:hover{
	background:rgba(153,153,153,0.4);
}
@media screen and (max-width:799px) {
	#link01 .inner .bannerList {
		padding:30px 10px;
	}
	#link01 .inner .bannerList .linkList tr > * {
		padding:10px 5px;
	}
	#link01 .inner .bannerList .linkList tr > th {
		width:30%;
	}
	#link01 .inner .bannerList .notice {
		font-size:14px;
		padding:10px;
	}
}



/* ============================================================================================
	11recruit layout
============================================================================================= */
/* ==============================================
	11recruit - recruitDetails
=============================================== */
.recruitDetails {
}
.recruitDetails .inner .menuOuter {
	display:block;
}
.recruitDetails .inner .menuOuter h2 {
	padding-bottom:30px;
}
.recruitDetails .inner .menuOuter dl.flex {
	justify-content:space-between;
	flex-wrap:wrap;
	align-items:stretch;
}
.recruitDetails .inner .menuOuter dl.flex > dt {
	width:20%;
	padding:5px 10px;
	text-shadow:1px 1px 1px #000;
	background:rgba(204,153,102,0.6);
	border-bottom:1px solid #666;
}
.recruitDetails .inner .menuOuter dl.flex > dd {
	width:80%;
	padding:5px 10px;
	color:#000;
	background:rgba(255,255,255,0.9);
	border-bottom:1px solid #666;
	text-align:left;
}
@media screen and (max-width:799px) { 
	.recruitDetails .inner .menuOuter h2 {
		padding-bottom:10px;
	}
	.recruitDetails .inner .menuOuter dl.flex > dt {
		padding:5px 0;
	}
	.recruitDetails .inner .menuOuter dl.flex > dd {
		padding:5px;
	}
}



/* ==============================================
	11recruit - recruit form
=============================================== */
#recruitForm {
}
#recruitForm .inner .menuOuter {
	display:block;
}
#recruitForm .inner .menuOuter h2 {
	padding-bottom:30px;
}
#recruitForm .inner .menuOuter dl.flex {
	justify-content:space-between;
	flex-wrap:wrap;
	align-items:stretch;
}
#recruitForm .inner .menuOuter dl.flex > dt {
	position:relative;
	width:40%;
	padding:15px 10px;
	text-shadow:1px 1px 1px #000;
	background:rgba(204,153,102,0.6);
	border-bottom:1px solid #666;
	display:flex;
	align-items:center;
}
#recruitForm .inner .menuOuter dl.flex > dt > span {
	width:100%;
}
#recruitForm .inner .menuOuter dl.flex > dd {
	position:relative;
	width:60%;
	padding:15px 10px;
	color:#000;
	background:rgba(255,255,255,0.9);
	border-bottom:1px solid #666;
	text-align:left;
}
#recruitForm .inner .menuOuter dl.flex .required:after {
	content:attr(data-text);
	padding:3px 0.5em;
	font-size:14px;
	line-height:1em;
	color:#fff;
	background:rgba(255,0,0,0.6);
	border-radius:3px;
	text-align:center;
}
#recruitForm .inner .menuOuter dl.flex .error {
	display:block;
	color:#f00;
}
@media screen and (min-width:800px) { 
	#recruitForm .inner .menuOuter dl.flex .required:after {
		position:absolute;
		top:calc(50% - 10px);
		right:10px;
		display:block;
	}
}
@media screen and (max-width:799px) { 
	#recruitForm .inner .menuOuter dl.flex > dt {
		padding:15px 0px;
	}
	#recruitForm .inner .menuOuter dl.flex .required:after {
		display:inline-block;
		margin-left:0.5em;
	}
}


/* ==============================================
	11recruit - form parts
=============================================== */
#recruitForm input ,
#recruitForm select ,
#recruitForm textarea {
	padding:0.2em 0.5em;
	font-size:16px;
	border:1px solid #ccc;
	border-radius:3px;
	font-family:"メイリオ",sans-serif;
}
#recruitForm select {
/*
	padding-bottom:0.5em;
*/
}
#recruitForm input[type="submit"] {
	padding:5px 20px;
}

#recruitForm label {
	padding:0 1em;
}
#recruitForm .widthS {
	width:5em;
	max-width:90%;
}
#recruitForm .widthM {
	width:10em;
	max-width:90%;
}
#recruitForm .widthL {
	width:90%;
}
#recruitForm textarea {
	width:90%;
	height:5em;
}

#recruitForm .formButton {
	padding:20px;
	text-align:center;
}



/* ============================================================================================
	11recruit-send layout
============================================================================================= */
#recthanks01 {
}
#recthanks01 .inner .menuOuter {
	display:block;
	margin-top:30px;
}
#recthanks01 .inner .menuOuter h3 {
	font-size:24px;
	border-bottom:1px solid #fff;
	padding:10px 15px 20px;
}
#recthanks01 .inner .menuOuter p {
	padding:15px 15px 0;
}

#recthanks01 .inner .menuOuter .sendIP {
	padding-top:30px;
	color:#999;
	font-size:10px;
	line-height:1.4em;
	text-align:right;
}

@media screen and (max-width:799px) { 
	#recthanks01 .inner .menuOuter h3 {
		font-size:20px;
		padding:5px 5px 20px;
	}
	#recthanks01 .inner .menuOuter p {
		padding:15px 5px 0;
	}
}





/* ============================================================================================
	information list
============================================================================================= */
.infoList {
	padding:0 20px;
}
.infoList li {
	margin-top:30px;
	padding:20px;
	background:rgba(255,255,255,0.4);
	border-radius:10px;
	box-shadow:0 0 5px #666;
}
.infoList li h2.flex {
	padding:0.3em 0.5em;
	color:#fff;
	background:#000;
	font-size:24px;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
	text-align:left;
}
.infoList li h2.flex > span:nth-child(2) {
	width:100%;
	font-size:16px;
	text-align:right;
}
.infoList li h2.flex > span.new:before {
	content:"NEW";
	display:inline-block;
	padding:0 0.5em;
	margin-right:0.5em;
	font-size:20px;
	color:#fff;
	background:#c00;
}
.infoList li h2.flex > span > span.newItem:before {
	content:"新入荷";
	display:inline-block;
	padding:0 0.5em;
	margin-right:0.5em;
	font-size:20px;
	color:#fff;
	background:#90c;
}


.infoList li div.infoImage {
	padding-top:30px;
	text-align:center;
}
.infoList li div.infoImage img {
	max-width:50%;
}
.infoList li div.infoText {
	font-size:110%;
	line-height:1.6;
	padding:2em 3em;
}

@media screen and (max-width:799px) { 
	.infoList {
		padding:0;
	}
	.infoList li {
		margin-top:20px;
		padding:10px;
		border-radius:5px;
	}
	.infoList li h2.flex {
		font-size:20px;
		flex-wrap:wrap;
	}
	.infoList li h2.flex > span:nth-child(2) {
		width:100%;
		font-size:12px;
		line-height:1em;
		text-align:right;
	}
	.infoList li h2.flex > span.new:before {
		font-size:14px;
		vertical-align:bottom;
	}
	.infoList li h2.flex > span > span.newItem:before {
		font-size:14px;
		vertical-align:bottom;
	}
	.infoList li div.infoImage {
		padding-top:10px;
	}
	.infoList li div.infoText {
		font-size:16px;
		padding:20px 10px 10px;
	}

}




/* ==============================================
	pageLinks
=============================================== */
.pageLinks {
	padding:10px 30px;
	text-align:right;
	font-size:16px;
}
.pageLinks a.active {
	color:#f00;
}

@media screen and (max-width:799px) { 
	.pageLinks {
		padding:10px 0;
	}
	.pageLinks a {
		padding-right:0.5em;
	}
}




/* ============================================================================================
	menu list
============================================================================================= */
/* ==============================================
	seletor
=============================================== */
#menuSelector.flex {
	padding:50px 0;
	justify-content:space-around;
}
#menuSelector.flex li {
	padding:0 0.5em;
	font-size:30px;
	color:#600;
	border-bottom:4px solid transparent;
	cursor:pointer;
	-webkit-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
#menuSelector.flex li.on {
	border-bottom:4px solid #900;
}
#menuSelector.flex li:not(.on):hover {
	border-bottom:4px solid #c00;
}

@media screen and (max-width:799px) { 
	#menuSelector.flex li {
		padding:0 0.3em;
		font-size:20px;
		border-bottom:2px solid transparent;
	}
	#menuSelector.flex li.on {
		border-bottom:2px solid #900;
	}
	#menuSelector.flex li:not(.on):hover {
		border-bottom:2px solid #c00;
	}
}



/* ==============================================
	menu board
=============================================== */
.menuOuter {
	width:100% !important;
	height:auto !important;
	padding:15px !important;
	background:rgba(34,17,17,0.6);
	display:none;
}
.menuOuter .menuInner {
	padding:20px;
	color:#fff;
	background:rgba(34,17,17,0.3);
	border:2px solid #fff;
}

.menuOuter .menuInner h2 {
	font-size:40px;
	line-height:1.2em;
	text-align:center;
	padding-bottom:50px;
}
.menuOuter .menuInner h2 span {
	display:block;
	font-size:16px;
	line-height:1.2em;
}

.menuOuter .menuInner .menuSubCate {
	padding-bottom:30px;
}
.menuOuter .menuInner .menuSubCate h3 {
	font-size:30px;
	line-height:1.2em;
	text-align:center;
}
.menuOuter .menuInner .menuSubCate h3 span {
	display:block;
	font-size:12px;
	line-height:1.2em;
}

.menuOuter .menuInner .menuSubCate ul.menuList.flex {
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
	padding-bottom:20px;
}
.menuOuter .menuInner .menuSubCate ul.menuList.flex li {
	width:31.3%;
	margin:30px 1% 0;
	padding:5px 3px;
	border-top:2px dotted #ccc;
	border-bottom:2px dotted #ccc;
}

.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.name {
	text-align:left;
	font-size:16px;
	line-height:1.2em;
	height:2.4em;
}

.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value {
	text-align:right;
	font-size:14px;
	padding:0 10px;
}

.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span {
	display:inline-block;
	width:49.5%;
	text-align:left;
}
.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.price {
	width:60%;
	text-align:right;
}

.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.price:before ,
.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.single:before ,
.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.double:before {
	display:inline-block;
	padding:0 5px;
	margin-right:5px;
	font-size:10px;
	line-height:1.6em;
}
.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.price:before {
	content:"PRICE";
	background:#600;
}
.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.single:before {
	content:"SINGLE";
	background:#300;
}
.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span.double:before {
	content:"DOUBLE";
	background:#900;
}

@media screen and (max-width:799px) { 
	.menuOuter {
		padding:10px !important;
	}
	.menuOuter .menuInner {
		padding:10px;
	}

	.menuOuter .menuInner h2 {
		font-size:24px;
		padding-bottom:30px;
	}
	.menuOuter .menuInner h2 span {
		font-size:16px;
	}

	.menuOuter .menuInner .menuSubCate h3 {
		font-size:20px;
	}
	.menuOuter .menuInner .menuSubCate ul.menuList.flex li {
		width:48%;
		margin:15px 1% 0;
	}
	.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.name {
		font-size:14px;
	}
	.menuOuter .menuInner .menuSubCate ul.menuList.flex li p.value span {
		width:100% !important;
		text-align:right !important;
	}
}




/* ==============================================
	catch
=============================================== */
.pageCatch {
}
.pageCatch .animeFrame {
}
.pageCatch .animeFrame .animated {
	padding:15px 30px;
	color:#fff;
	text-shadow:0 0 5px #000,1px 1px 0 #000;
	text-align:left;
}
.pageCatch .animeFrame .animated h3 {
	font-size:96px;
	line-height:1em;
	letter-spacing:0.05em;
	padding-bottom:0.3em;
}
.pageCatch .animeFrame .animated h3 span.small {
	padding-left:0.5em;
	font-size:36px;
	line-height:1em;
}
.pageCatch .animeFrame .animated p {
	font-size:18px;
	line-height:2;
	letter-spacing:0.05em;
}
.pageCatch .animeFrame .animated p.sub {
	font-size:32px;
	font-weight:var(--font-bold);
	line-height:1.2;
	letter-spacing:0.01em;
}
.pageCatch .animeFrame .animated p.text {
	padding-top:3em;
}

@media screen and (max-width:799px) { 
	.pageCatch .animeFrame .animated {
		padding:10px 15px 0;
	}
	.pageCatch .animeFrame .animated h3 {
		font-size:40px;
	}
	.pageCatch .animeFrame .animated h3 span.small {
		font-size:18px;
	}
	.pageCatch .animeFrame .animated p {
		line-height:1.6em;
		font-size:14px;
		letter-spacing:-1px;
	}
	.pageCatch .animeFrame .animated p.sub {
		font-size:18px;
	}
	.pageCatch .animeFrame .animated p.text {
		padding-top:1em;
	}
}


/* ==============================================
	YouTube
=============================================== */
.infoList#youtube .infoText {
	text-align:center;
}
@media screen and (max-width:799px) { 
	.infoList#youtube .infoText > * {
		width:100% !important;
		height:240px !important;
	}
}




/* ==============================================
	footer SNS icons
=============================================== */
footer #snsLinks {
	padding-top:20px;
	display:flex;
	justify-content:center;
}
footer #snsLinks > div {
	width:60px;
	margin:0 10px;
}
footer #snsLinks > div a {
	display:inline-block;
	-webkit-transition:all 0.2s ease;
	transition:all 0.2s ease;
}
footer #snsLinks > div a img {
	border-radius:9px;
	border:1px solid #666;
}
footer #snsLinks > div a:hover {
	filter:drop-shadow(0 0 5px #fff);
}





/* ==============================================
	2023.2.6
	fruits cocktail
=============================================== */
#f-cocktail03 .swiper-outer {
	padding:2em;
}

.f-cocktail-mov {
	padding:0 0.5em 2em;
	display:flex;
	justify-content:space-evenly;
	flex-wrap:wrap;
	text-align:center;
}
.f-cocktail-mov > li {
	position:relative;
	width:calc(100% / 3);
	padding:0 0.5em 1em;
	cursor:pointer;
}
.f-cocktail-mov.type-image > li {
	width:calc(100% / 5);
}

.f-cocktail-mov .title {
	line-height:1.3;
	padding-bottom:0.5em;
}

.f-cocktail-mov .image > * {
	width:100%;
	object-fit:cover;
	aspect-ratio:2/3;

	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

.f-cocktail-mov:not(.type-image) li:after {
	content:"\e1c4";
	font-family:'Material Symbols Outlined';
	font-variation-settings:
		'FILL' 1
		,'wght' 400
		,'GRAD' 0
		,'opsz' 24;
	position:absolute;
	left:50%;
	top:50%;
	z-index:10;
	transform:translate(-50%,-50%);
	font-size:400%;
	line-height:1;
	color:#fff;
	background:#f60;
	border-radius:50%;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.f-cocktail-mov li:hover:after {
	color:#f60;
	background:#fff;
}

@media screen and (min-width:800px) { 
	.f-cocktail-mov:not(.type-image) .image > * {
		filter:grayscale(0.8);
		aspect-ratio:1/1;
	}
	.f-cocktail-mov:not(.type-image) li:hover .image > * {
		filter:grayscale(0);
	}
}
@media screen and (max-width:799px) { 
	#f-cocktail03 .swiper-outer {
		padding:0;
	}

	.f-cocktail-mov ,
	.f-cocktail-mov > li {
		padding:0 0.2em 1em;
	}
	.f-cocktail-mov .title {
		font-size: 90%;
	}
	.f-cocktail-mov .image > * {
		aspect-ratio:2/3;
	}
	.f-cocktail-mov li:after {
		font-size:300%;
	}

	.f-cocktail-mov.type-image > li {
		width:calc(100% / 3);
	}
}

.modal-video {
	background-color:rgba(0,0,0,0.7) !important;
	backdrop-filter:blur(0.2em);
}
.modal-video .modal-video-body {
	max-width:1200px;
	padding:1em;
}

.modal-video .modal-video-movie-wrap {
	height:calc(100% - 8em) !important;
}

.modal-video-movie-wrap iframe {
	outline:3px solid #fff;
}

.modal-video-movie-wrap .modal-video-close-btn:before ,
.modal-video-movie-wrap .modal-video-close-btn:after {
	height:5px;
}