@charset "utf-8";

@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');
}



@media screen and (min-width:800px) {
	.bannerHover:hover {
		filter:drop-shadow(0 0 0.5em #666);
	}
}



@media screen and (min-width:800px) {
	.footer-shop-info > * {
		padding:3em 3em 0;
	}
}
@media screen and (max-width:799px) {
	.footer-shop-info.flex {
		display:block;
	}
}

/* ==============================================
	fv
=============================================== */
#fv-image {
	
}

@media screen and (max-width:799px) {
	#fv-image img {
		width:100%;
	}
}



/* ==============================================
	slider
=============================================== */
#homeSliderLoader {
	width:100%;
	padding:10em 0;
	text-align:center;
}
#homeSlider {
	margin:0 auto;
	padding:0 2em;
	opacity:0;
}
#homeSlider li {
	text-align:center;
}
#homeSlider li img {
	width:100%;
	max-width:960px;
	margin:0 auto;
	aspect-ratio:4/3;
	object-fit:contain;
}
#homeSlider li a {
	display:block;
	line-height:1;
}
#homeSlider li a img {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
#homeSlider li a:hover img {
	opacity:0.8;
}

#homeSliderBlock #bx-pager a {
	width:auto;
	max-width:120px;
}
#homeSliderBlock #bx-pager a img {
	border:2px solid transparent;
}
#homeSliderBlock #bx-pager a.active img {
	border-color:#f06;
}


@media screen and (max-width:799px) {
	#homeSliderBlock #bx-pager a {
		max-width:100px;
	}
	#homeSlider li img {
		width: calc(100% - 2em);
	}
}


#movie {
	padding-top:6em;
	text-align:center;
}
video {
	max-width:100%;
	padding: 3px;
	background: #fff;
	outline: 3px solid #f69;
	border-radius:0.3em;
}

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


/* ==============================================
	description table
=============================================== */
.rec-table-cover {
	padding-top:3em;
}

.rec-table {
	width:100%;
	max-width:1000px;
	margin:0 auto;
}

.rec-table .rec-th,
.rec-table .rec-td {
	padding:1em 1.5em;
	line-height:1.8;
	vertical-align:top;
	font-size:120%;
	border-bottom:solid 1px #e1ccd3;
}

.rec-table .rec-th {
	white-space:nowrap;
	text-align:right;
	background-color:#fbd6e7;
	color:#804267;
}

.rec-table .rec-td {
	background-color:#fff;
	color:#595355;
}

.rec-table .text-1 {
	display:flex;
	flex-wrap:wrap;
}
.rec-table .text-1 .cover {
	padding:0 0.2em 0.5em;
	font-size:90%;
}

.rec-table .text-1 .item {
	background-color:#e6599b;
	color:#fff;
	padding:0.2em 0.5em;
	border-radius:0.3em;
}

@media screen and (max-width:799px) {
	.rec-table-cover {
		padding:3em 0.5em 0;
	}

	.rec-table .rec-th,
	.rec-table .rec-td {
		padding:0.5em 0.6em;
		line-height:1.6;
		font-size:110%;
	}

	.rec-table .text-1 {
		font-size:90%;
	}
	.rec-table .text-1 .cover {
		padding: 0 0.15em 0.3em;
	}
	.rec-table .text-1 .item {
		padding-top:0.1em;
	}
}



/* ==============================================
	voice
=============================================== */
#voice {
	width:1100px;
	max-width:100%;
	margin:0 auto;
	padding-top:3em;
}

#voice .message {
	position:relative;
	width:100%;
	height:calc(300px + 2.5em);
}
#voice .message li {
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
	padding-bottom:2.5em !important;
}
#voice .message-frame {
	position:relative;
	width:100%;
	height:100%;
	padding:1.5em 2em;
	background:#fbe0ec;
	border:3px solid #ec75a9;
	border-radius:0.8em;
}

#voice .message .voice-1 {
	--voice-num:1;
}
#voice .message .voice-2 {
	--voice-num:2;
	display:none;
}
#voice .message .voice-3 {
	--voice-num:3;
	display:none;
}
#voice .message .voice-4 {
	--voice-num:4;
	display:none;
}


#voice .message-frame:before ,
#voice .message-frame:after {
	content:"";
	position:absolute;
	bottom:-2em;
	left:calc(25% * var(--voice-num) - 12.5% );
	z-index:1;
	display:block;
	width:3em;
	aspect-ratio:3/2;
	margin-left:-1.5em;
	background:#ec75a9;
	clip-path:polygon( 0 0 ,100% 0 ,50% 100% );
}
#voice .message-frame:after {
	bottom:-1.7em;
	background:#fbe0ec;
	z-index:2;
}



#voice .message-frame .name {
	width:7em;
	aspect-ratio:1/1;
	color:#fff;
	background-color:#ec75a9;
	border-radius:50%;
}
#voice .message-frame .name span {
	font-size:150%;
}

#voice .message-frame .text {
	width:calc(100% - 7em);
	padding-left:2em;
}
#voice .message-frame .text p {
	font-size:120%;
	line-height:1.8;
	text-align:justify;
}

}

#voice .photo li {
	padding:0 1em;
}
#voice .photo li .image {
	border-radius:50%;
	cursor:pointer;
	text-align:center;
}
#voice .photo li .image .name {
	font-size:150%;
	font-weight:bold;
	font-family:"Noto Serif JP" ,serif;
}

@media screen and (max-width:799px) {
	#voice {
		padding:3em 0.5em 0;
	}
	#voice .message-frame {
		padding:1em 0.5em;
	}
	#voice .message-frame .name {
		width:4.5em;
	}
	#voice .message-frame .name span {
		font-size:130%;
	}
	#voice .message-frame .text {
		width:calc(100% - 4.5em);
		max-height:100%;
		padding-left:0.5em;
		padding-right:0.3em;
		overflow:scroll;
		
	}
	#voice .message-frame .text p {
		font-size:105%;
		line-height:1.6;
		padding:0.5em 0.8em;
		background:rgba(255,255,255,0.3);
	}
	#voice .photo li {
		padding:0 0.1em;
	}
}



/* ==============================================
	faq
=============================================== */
.blog-frame {
	padding:3em 0.5em 0;
}
.blog-frame iframe {
	display:block;
	margin:0 auto;
	outline:1px solid #f6c;
}


/* ==============================================
	faq
=============================================== */
.faq {
	padding:1em;
	color:#fff;
	text-shadow:1px 2px 1px #666,1px 2px 1px #666;
}
.faq-cell {
	padding:2em;
	border-bottom:solid 3px #e9c3d2;
}

.faq-cell .q {
	padding-right:4em;
	cursor:pointer;
	--bgcolor:#ae81b8;
}

.faq-cell .a {
	width:100% !important;
	padding-top:1em;
	padding-left:4em !important;
	--bgcolor:#ec74a1;
}

.faq-cell .label {
	position:relative;
	z-index:2;
	width:5em;
	aspect-ratio:1/1;
	background-color:var(--bgcolor);
	border-radius:50%;
}
.faq-cell .label span {
	line-height:1;
	font-size:330%;
	font-weight:bold;
	font-family:'CGothic',sans-serif;
}

.faq-cell .baloon-frame {
	position:relative;
	z-index:1;
	width:calc(100% - 5em);
	padding-left:2.5em;
}

.faq-cell .baloon {
	min-height:5em;
	padding:1em 2em;
	background-color:var(--bgcolor);
	border-radius:0.5em;
}
.faq-cell .a .baloon {
	padding-right:1em;
}

.faq-cell .q .baloon .text {
	font-size:150%;
}
.faq-cell .a .baloon .text {
	font-size:135%;
	line-height:1.8;
}

.faq-cell .q .opclo {
	text-align:center;
	line-height:1.1;
}
.faq-cell .q .opclo:after {
	content:"OPEN ▼";
	font-size:110%;
	white-space:pre;
}
.faq-cell .q.open .opclo:after {
	content:"CLOSE ▲";
}

@media screen and (min-width:800px) {
	.faq-cell .baloon-frame:before {
		content:"";
		position:absolute;
		top:1.8em;
		left:0.6em;
		display:block;
		width:2em;
		height:1.8em;
		background-color:var(--bgcolor);
		clip-path:polygon( 0 100% ,100% 0 ,100% 100% );
	}
}

@media screen and (max-width:799px) {
	.faq-cell {
		padding:1em 0.5em 1.5em;
	}
	.faq-cell .q {
		padding-right:0;
		flex-direction:column;
	}
	.faq-cell .a {
		padding-top:0.5em;
		padding-left:0 !important;
		flex-direction:column;
	}
	.faq-cell .label {
		width:3em;
	}
	.faq-cell .label span {
		font-size:200%;
	}
	.faq-cell .baloon-frame {
		width:100%;
		margin-top:-1.5em;
		padding-left:1.5em;
	}
	.faq-cell .baloon {
		padding:1em 0.5em 1em 1em;
	}
	.faq-cell .q .baloon .text {
		font-size:130%;
	}
	.faq-cell .a .baloon .text {
		font-size:120%;
		line-height:1.6;
	}
	.faq-cell .q .opclo {
		width:3em;
	}
	.faq-cell .q .opclo:after {
		content:"OPEN\a▼";
		font-size:80%;
	}
	.faq-cell .q.open .opclo:after {
		content:"CLOSE\a▲";
	}
}



/* ==============================================
	X banner
=============================================== */

.xBanner {
	width:100%;
	max-width:920px;
	margin:0 auto;
	padding:2em 1em 4em;
}
.xBanner a {
	display:block;
	border:2px solid #666;
	border-radius: 0.5em;
    overflow: hidden;
}

@media screen and (min-width:800px){
	.xBanner a:hover {
		box-shadow:0 0 0.3em #000;
	}
}

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