@charset "utf-8";

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

@font-face {
	font-family:'CGothic';
	src:url('images/fonts/CGothic.ttf') format('truetype');
}

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

/* ============================================================================================ 配色
	var(--xxx)で使用する
point color #e94c81
============================================================================================= */
:root,:before,:after {
	--main-color:#e94c81;

	--body-bg:#fff;
	--body-text:#111;
	--notes-text:#999;

	--font-family:'Noto Sans JP',sans-serif;

	--topnavi-text:#111;
	--topnavi-bg:#fff;
	--topnavi-border:5px solid var(--main-color);
	--topnavi-subborder:#ccc;
	--topnavi-link-border:3px solid transparent;
	--topnavi-active-text:var(--main-color);
	--topnavi-active-bg:#fff;
	--topnavi-active-border:3px solid var(--main-color);

	--title-font-family:'Noto Sans JP',sans-serif;

	--discount-cell-bg:#7b6a56;



	--button-more-text:#fff;
	--button-more-bg:var(--main-color);

	--button-scrolltop-text:#fff;
	--button-scrolltop-bg:var(--main-color);

	--button-text:#fff;
	--button-orange-bg:#f59e01;
	--button-orange-bg-hover:#c57e01;
	--button-green-bg:#90c320;
	--button-blue-bg:#52c2f0;
	--button-pink-bg:#ef85b3;

	--shop-header-bg:#f4f8e1;
	--shop-border-color:#91c314;

	--shop-news-bg:#eef6df;

	--shop-tab-text:#fff;
	--shop-tab-shop-bg:#53c2f0;
	--shop-tab-shoprecruit-bg:#ef85b3;
	--shop-title-text:#fff;
	--shop-title-bg:#91c314;
	--shop-table-border:#91c314;
	--shop-table-icon-bg:#e4f1e0;

	--shop-table-link:#06f;
	--shop-table-link-hover:#f06;

	--result-detail-bg:#a1d334;

	--width-pc:1200px;
	--width-sp:480px;

	--news-link-hover:#efe468;
	--news-date:#e06a10;

	--column-bg:#f4f4f4;
	--column-bg-hover:#eda;
	--column-date-text:#333;

	--discount-text:#333;
	--discount-bg:#fff;
	--discount-border:1px solid #ccc;
	--discount-hover-bg:#fef;

	--staff-text:#000;
	--staff-bg:#e4f1e0;

	--ranking-selector-text:#666;
	--ranking-selector-bg:#eee;
	--ranking-selector-bg-hover:#ddd;
	--ranking-selector-border:#666;

	--form-text:#000;
	--form-bg:#fff;
	--form-border:1px solid #999;
	--form-border-focus:1px solid var(--main-color);

	--form-label-text:#fff;
	--form-label-required:#f66;
	--form-label-optional:#39f;

	--form-checked-bg:#9fc;

	--form-button-text:#fff;
	--form-button-bg:#0c9;
	--form-button-bg-hover:#096;

	--form-error-text:#fff;
	--form-error-bg:#f66;

	--pager-text:#fff;
	--pager-bg:#c1e974;
	--pager-bg-hover:#91c314;

	--top-banner-bg:#fff0f8;
	--banner-hover-text:#f00;
	--banner-hover-bg:rgba(255,221,238,0.6);
}


/* ============================================================================================ CSS reset
	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:baseline;
	font-size:inherit;
	font-weight:inherit;
}
button ,input ,textarea ,select {
	font-size:16px;
	line-height:1.6;
	padding:5px;
	letter-spacing:1px;
	font-family:var(--font-family);
	color:var(--form-text);
	background:var(--form-bg);
	border:var(--form-border);
	border-radius:0.3em;
}

input[type="submit"] ,button {
	font-size:16px;
	padding:10px 30px;
	font-family:inherit;
}

html ,body {
	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 ,video {
	vertical-align:top;
	max-width:100%;
    max-height:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

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

table {
	border-collapse:collapse;
	border-spacing:0;
}

pre{
	white-space:pre-wrap;
	font-size:90%;
	font-family:var(--font-family);
}
pre.fs90{
	font-size:90%;
}
.h3 + pre.fs90{
	padding:0 1em;;
}

.bx-wrapper * {
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

:target {
	scroll-margin-top:140px;
}


/* ============================================================================================ common
	common
============================================================================================ */
.sendIP {
	margin-top:1em;
	color:#666;
	font-size:xx-small;
	text-align:right;
}

.nopage {
	padding:5em 0 10em;
	text-align:center;
}

/* ============================================== text-align */
.align-c {
	text-align:center;
}
.align-l {
	text-align:left;
}
.align-r {
	text-align:right;
}

.anchorLink {
	cursor:pointer;
}

a.text-link {
	color:#00f;
	text-decoration:underline;
}
a.text-link:hover {
	color:#f00;
}



/* ============================================== ellipsis */
.ellipsis {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

/* ============================================== clamp */
.clamp {
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
}
.clamp.l2 {
	-webkit-line-clamp:2;
}
.clamp.l3 {
	-webkit-line-clamp:3;
}
.clamp.l4 {
	-webkit-line-clamp:4;
}
.clamp.l5 {
	-webkit-line-clamp:5;
}
.clamp.l6 {
	-webkit-line-clamp:6;
}



/* ============================================== content-block */
.content-block {
	padding:2em 1em 3em;
}
#main-contents > .content-block:first-child {
	padding-top:0.5em;
}

#side-contents .content-block {
	padding:1em 0.5em 2em;
}

main .content-block.sub {
	padding-top:0;
}

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


/* ==============================================
	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.wrap {
	flex-wrap:wrap;
}

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


/* ==============================================
	flex event cell
=============================================== */
.flex.evenCells {
	padding:0 0.5em;
}
.flex.evenCells > * {
	padding:0 0.5em;
}
.flex.evenCells.col2 > * {
	width:calc(100% / 2);
}
.flex.evenCells.col3 > * {
	width:calc(100% / 3);
}
.flex.evenCells.col4 > * {
	width:calc(100% / 4);
}
.flex.evenCells.col5 > * {
	width:calc(100% / 5);
}


.evenCells .image {
	width:100%;
	outline:1px solid #ccc;
}
.evenCells .image > img {
	width:100%;
	height:100%;
	object-fit:cover;
}





.line-2 {
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.line-3 {
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}
.line-4 {
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:4;
}


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



/* ============================================================================================ titlebar
	h2 titlebar
============================================================================================ */
.h2 {
	padding:0.3em 0;
	font-family:var(--title-font-family);
	border:2px solid #999;
	border-bottom-width:5px;
}

.h2 > * {
	padding:0.3em 1em 0.4em;
	line-height:1;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}

.h2 > * > * {
	font-size:150%;
}
.h2 > * > *.size_s {
	font-size:110%;
}


#side-contents .h2 {
	color:#fff;
	background:#666;
	border:2px solid #666;
}
#side-contents .h2 > * {
	justify-content:center;
}
#side-contents .h2 > * > * {
	font-size:130%;
}
#side-contents .h2 > * > *:before {
	content:"●";
	font-size:90%;
	padding-right:0.3em;
}



/* ==============================================
	shop label
=============================================== */
.label .cate {
	color:#fff;
	border-radius:0.3em;
	font-size:80%;
	line-height:1.5;
	padding:0 0.3em;
}
.label .cate.bg-1{
	background:var(--button-orange-bg);
	background:var(--main-color);
}
.label .cate.bg-2{
	background:var(--button-green-bg);
}
.label .cate.bg-3{
	background:var(--button-blue-bg);
}
.label .cate.bg-4{
	background:var(--button-pink-bg);
}



/* ==============================================
	pager
=============================================== */
.pager {
	padding-top:2em;
}
.pager.flex {
}
.pager ul li {
	padding:0.3em;
}
.pager ul li a.flex {
	width:2.5em;
	height:2.5em;
	color:var(--pager-text);
	background:var(--pager-bg);
	border-radius:0.3em;
}
.pager ul li.active a.flex {
	background:var(--pager-bg-hover);
}
.pager ul li.active a.flex span {
	padding-bottom:0.1em;
	font-size:150%;
	font-weight:bold;
}

.pager ul li:not(.active) a.flex:hover {
	background:var(--pager-bg-hover);
}






/* ============================================================================================ form
	form
============================================================================================ */
.form-notes p + p{
	padding-top:1em;
}

#form {
	padding-top:2em;
}

#form-table {
	width:800px;
	max-width:100%;
	margin:0 auto;
}


dl#form-table {
	width:100%;
	max-width:720px;
	margin:0 auto;
	padding-top:1em;
}

dl#form-table dt {
	padding:1.5em 0 0;
}

dl#form-table dd {
	padding-left:1em;
	padding-top:0.5em;
}


@media screen and (max-width:799px){
	.form-notes {
		padding:0 1em;
		font-size:100%;
		line-height:1.6;
	}
	.form-header h1 {
		font-size:240%;
	}
	.form-wrapper dl {
		padding:0 0.5em;
		font-size:120%;
	}

	.form-wrapper {
		padding:0 0 3em;
	}

	.form-notes.wide p{
		padding-bottom:1em;
	}
}




/* ====================================================================
	form - optional / required
==================================================================== */
.optional,
.required{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.optional:before,
.required:before{
	content:attr(data-text);
	display:inline-block;
	margin-right:0.5em;
	padding:0.1em 0.5em 0.2em;
	color:var(--form-label-text);
	background:var(--form-label-required);
	border-radius:0.3em;
	font-size:80%;
}
.optional:before{
	background:var(--form-label-optional);
}

@media screen and (max-width:799px){
	.required{
		justify-content:flex-start;
	}

	.optional:before,
	.required:before{
		margin-right:0.3em;
		padding:0.1em 0.3em 0.2em;
	}
}



/* ====================================================================
	form - field
==================================================================== */
input ,textarea{
	width:100%;
	-webkit-appearance:none; 
	appearance:none;
	border-radius:0.3em;
}
input[type='radio'] ,input[type='checkbox']{
	width:1em;
	height:1em;
	-webkit-appearance:auto; 
	appearance:auto;
}

input:not([type="submit"]){
	border:var(--form-border);
	padding:0.3em 0.5em;
}

.textarea-text{
	padding:2.5em 5em !important;
}

textarea{
	resize:none;
	height:8em;
	padding:0.5em;
	border:var(--form-border);
	word-break:break-all;
}
textarea.fs80{
	font-size:80%;
	height:4.5em;
}
span.check {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
span.check > label {
	padding-left:0.3em;
}


.field-group.flex {
	justify-content:flex-start;
	flex-wrap:wrap;
}
.field-group.flex > * {
	padding:0.3em 0 0.3em 1em;
	min-width:50%;
}
.field-group.flex > *.flex {
	justify-content:flex-start;
}
.field-group.flex > *.hr {
	width:100%;
}

input[type="checkbox"] ,
input[type="radio"] {
	position:relative;
	width:20px;
	z-index:2;
}
input[type="checkbox"] + label ,
input[type="radio"] + label {
	position:relative;
	margin-left:-2em;
	padding:0.5em 1em 0.5em 2em;
	border-radius:0.3em;
	transition:all 0.1s ease;
	-webkit-transition:all 0.1s ease;
}
input[type="checkbox"] + label > span ,
input[type="radio"] + label > span {
	padding-left:0.3em;
}
input[type="checkbox"]:checked + label ,
input[type="radio"]:checked + label {
	background:var(--form-checked-bg);
}

input:focus ,textarea:focus{
	border:var(--form-border-focus);
	outline:none;
	background:var(--form-bg-focus);
}


@media screen and (max-width:799px){
	.field-group.flex > * {
		width:100%;
	}

	input[type="submit"]{
		width:auto;
		padding:0.5em 1em;
	}

	input:focus[type="submit"]{
		opacity:0.8;
		border:none;
		outline:none;
		background:var(--form-bg-hover);
	}
}



/* ====================================================================
	form - button
==================================================================== */
.formButton{
	padding:2em 0 2em 1em;
	text-align:center;
}
.formButton.contact{
	padding:4em 0;
}
input[type="submit"] ,.formButton a{
	width:auto;
	padding:0.8em 3em;
	color:var(--form-button-text);
	background:var(--form-button-bg);
	font-size:100%;
	line-height:1;
	text-indent:0.3em;
	letter-spacing:0.3em;
	border:none;
	outline:none;
	transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	cursor:pointer;
}
input[type="submit"]:hover ,.formButton a:hover {
	background:var(--form-button-bg-hover);
}

.formButton a{
	display:inline-block;
	font-size:100%;
	text-indent:0.1em;
	letter-spacing:0.1em;
	border-radius:0.5em;
}

@media screen and (max-width:799px){
	.button-wrapper{
		padding:2em 7em 0;
	}
}


/* ====================================================================
	form - error
==================================================================== */
.error {
	padding:0.1em 2em 0.2em;
	font-size:80%;
	color:var(--form-error-text);
	background:var(--form-error-bg);
	border-radius:0.3em;
}





/* ============================================================================================ banner
	banner
============================================================================================ */
.banner a {
	padding:0.5em 0;
	line-height:1.4;
}
.banner a:not(.flex),
.banner a span:not(.flex){
	display:block;
	width:100%;
}

.banner a img {
}
.banner a:hover {
	color:var(--banner-hover-text);
	background:var(--banner-hover-bg);
}


#bottom-banner .banner.flex{
	padding:0 0.2em;
}
#bottom-banner .banner.flex > *{
	padding:0.2em;
}



.banner#event-list a .image {
	position:relative;
}
.banner#event-list a .image:before {
	content:'';
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
}
.banner#event-list a .image > img {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	object-fit:cover;
}



.banner#discount-list li {
	padding-bottom:1em;
}

.banner#discount-list a.flex {
	color:var(--discount-text);
	background:var(--discount-bg);
	border:var(--discount-border);
}
.banner#discount-list a.flex:hover {
	background:var(--discount-hover-bg);
}

.banner#discount-list a.flex > .image {
	position:relative;
	width:35%;
}
.banner#discount-list a.flex > .image:before {
	content:'';
	display:block;
	width:100%;
	height:0;
	padding-top:75%;
}
.banner#discount-list a.flex > .image > img {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	object-fit:cover;
}


.banner#discount-list a.flex > .flex {
	width:calc(100% - 35%);
	padding-left:0.5em;
	line-height:1.6;
}
.banner#discount-list a.flex > .flex .shop {
	font-size:90%;
}
.banner#discount-list a.flex > .flex .more {
	margin-top:auto;
	font-size:80%;
}



@media screen and (max-width:799px){
	#middle-banner .banner {
		display:flex;
		justify-content:flex-start;
		flex-wrap:wrap;
	}
	#middle-banner .banner > * {
		width:100%;
	}

	#side-banner .banner {
		display:block;
		padding-bottom:0.5em;
		text-align:center;
		white-space:nowrap;
		overflow-y:auto;
	}
	#side-banner .banner > * {
		display:inline-block;
		width:40vw;
		vertical-align:top;
	}
	#side-banner .banner a .text {
		white-space:normal;
		text-align:left;
	}


	#bottom-banner .banner.flex{
		display:block;
		padding-bottom:0.5em !important;
		text-align:center;
		white-space:nowrap;
		overflow-y:auto;
	}
	#bottom-banner .banner.flex > *{
		display:inline-block;
		width:40vw;
		padding:0.3em 0;
		vertical-align:top;
	}
	#bottom-banner .banner a {
		padding:0.3em;
	}
	#bottom-banner .banner a .text {
		white-space:normal;
		text-align:left;
	}
}







/* ============================================================================================ button
	button
============================================================================================ */
/* ====================================================================
	more button
==================================================================== */
.more-block {
	padding-top:1.5em;
}
.more-button {
	position:relative;
	display:block;
	width:8em;
	font-size:110%;
	margin-left:auto;
	color:var(--button-more-text);
	background:var(--button-more-bg);
	border:1px solid var(--button-more-bg);
	text-align:center;
	overflow:hidden;
}
.more-button:before {
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
	display:block;
	background:var(--button-more-text);
	transform-origin:right;
	transform:scaleX(0%);
	transition:transform 0.3s ease;
	-webkit-transition:transform 0.3s ease;
}
.more-button > span {
	position:relative;
	z-index:2;
}
.more-button > span:after {
	content:'>>';
	padding-left:0.5em;
}


.more-button:hover {
	color:var(--button-more-bg);
}
.more-button:hover:before {
	transform-origin:left;
	transform:scaleX(100%);
}



/* ============================================== more back */
.more-block.back {
	padding-top:3em;
}
.more-block.back .more-button {
	font-size:90%;
	width:10em;
	margin:0 auto;
}
.more-block.back .more-button:before {
	transform-origin:left;
}

.more-block.back .more-button > span:before {
	content:'<<';
	padding-right:0.5em;
}
.more-block.back .more-button > span:after {
	content:none;
}

.more-block.back .more-button:hover:before {
	transform-origin:right;
}


/* ====================================================================
	scrolltop button
==================================================================== */
#scrolltop-button {
	display:none;
	position:fixed;
	right:0.5em;
	bottom:0.5em;
	width:4em;
	height:4em;
	line-height:1;
}

#scrolltop-button .flex {
	width:100%;
	height:100%;
	color:var(--button-scrolltop-text);
	background:var(--button-scrolltop-bg);
	border:1px solid var(--button-scrolltop-text);
	border-radius:0.3em;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	filter:saturate(0.3);
}
#scrolltop-button .flex:hover {
	filter:saturate(1);
}




/* ============================================================================================
	base
============================================================================================ */
html,body{
	margin:0;
	padding:0;
}

body{
	position:relative;
	font-size:16px;
	line-height:1.8;
	color:#111;
	background-color:#fff;
	font-family:var(--font-family);
}
#bgLayer{
	margin:0 auto;
}
.innerFrame{
	width:var(--width-pc);
	margin:0 auto;
}

@media screen and (max-width:799px){
	#bgLayer{
		width:var(--width-sp);
	}
	.innerFrame{
		width:100%;
	}
}





/* ============================================================================================
	header
		#h1
		#top-banner
		#header
============================================================================================ */
#h1 {
	color:#fff;
	background:var(--main-color);
}


#top-banner {
	padding:1em 0;
	background:var(--top-banner-bg);
}

#top-banner .evenCells .image {
	width:550px;
	max-width:100%;
	aspect-ratio:550/100;
}


#header {
	padding:0.5em;
}

.header-freesearch {
	padding-bottom:0.3em;
}
.header-freesearch form.flex {
	height:2.4em;
}
.header-freesearch form.flex > * {
	height:100%;
}
.header-freesearch form.flex input {
	height:100%;
}
.header-freesearch form.flex input[type='text'] {
	width:20em;
	border-radius:0.3em 0 0 0.3em;
}
.header-freesearch form.flex input[type='image'] {
	padding:0.5em;
	border-radius:0 0.3em 0.3em 0;
	background:#999;
}



@media screen and (max-width:799px){
	#h1 {
		font-size:90%;
		text-align:center;
	}

	#top-banner .flex.evenCells.col2 {
		flex-wrap:wrap;
	}
	#top-banner .flex.evenCells.col2 > * {
		width:100%;
		padding:0;
	}

	#header.flex.bottom {
		align-items:center;
		flex-direction:column;
	}

	.header-freesearch {
		padding-top:1em;
	}
}




/* ============================================================================================
	#sticky-menu
		- base
			- #topnavi
		- fixed
			- #topnavi
============================================================================================ */
#sticky-menu *{
/*
	transition:all 0.1s ease;
	-webkit-transition:all 0.1s ease;
*/
}

/* ====================================================================
	#topnavi - base
==================================================================== */
#sticky-menu {
	position:relative;
	color:var(--topnavi-text);
	background:var(--topnavi-bg);
	border-bottom:var(--topnavi-border);
	z-index:100;
	box-shadow:0 0 0.3em #ccc;
}
#sticky-menu > .flex{
	width:var(--width-pc);
	margin:0 auto;
	padding:0 1em;
	text-align:center;
}
#sticky-menu .logo{
	width:0;
	height:72px;
}
#sticky-menu .logo a{
	padding:0.3em 0;
	height:100%;
}

#sticky-menu .logo img{
	max-height:100%;
}


@media screen and (max-width:799px){
	#sticky-menu > .flex {
		width:100%;
		padding:0;
	}
	.fixed-topnavi #sticky-menu .logo {
	}
	#sticky-menu .logo a.flex {
		justify-content:center;
		align-items:center;
	}
}


/* ==============================================
	#topnavi - base - #topnavi
=============================================== */
#sticky-menu .mainnavi {
	flex-grow:1;
	font-family:var(--title-font-family);
	min-height:100%;
}
#sticky-menu .mainnavi .navMenu.flex {
	height:100%;
}
#sticky-menu .mainnavi .navi-cell{
	position:relative;
	width:calc(100% / 3);
	padding-left:1px;
}
#sticky-menu .mainnavi .navi-cell:before,
#sticky-menu .mainnavi .navi-cell:last-child:after{
	content:"";
	position:absolute;
	top:1em;
	bottom:1em;
	width:1px;
	background:var(--topnavi-text);
}
#sticky-menu .mainnavi .navi-cell:before{
	left:0;
}
#sticky-menu .mainnavi .navi-cell:last-child:after{
	right:0;
}
#sticky-menu .mainnavi .navi-cell a,
#sticky-menu .mainnavi .navi-cell > .aLink{
	position:relative;
	padding:1em 0;
	line-height:1.4;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
}
#sticky-menu .mainnavi .navi-cell a > .flex ,
#sticky-menu .mainnavi .navi-cell > .aLink > .flex {
	padding:0 1.5em 0.3em;
	border-bottom:var(--topnavi-link-border);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
#sticky-menu .mainnavi .navi-cell > .aLink > .flex > .mark {
	padding:0 1em 0 0;
}
#sticky-menu .mainnavi .navi-cell > .aLink > .flex > .base + .mark {
	padding:0 0 0 1em;
}
#sticky-menu .mainnavi .navi-cell > * .txt1{
	font-size:130%;
	font-weight:bold;
}
#sticky-menu .mainnavi .navi-cell > * .txt2{
	font-size:90%;
}
#sticky-menu .mainnavi .navi-cell a:hover > .flex ,
#sticky-menu .mainnavi .navi-cell.active > .aLink > .flex {
	color:var(--topnavi-active-text);
	background:var(--topnavi-active-bg);
	border-bottom:var(--topnavi-active-border);
}

@media screen and (max-width:799px){
	#sticky-menu .mainnavi .navMenu.flex {
		height:50%;
		align-items:stretch;
		flex-wrap:wrap;
	}
	#sticky-menu .mainnavi .navi-cell.id1 {
		display:none;
	}
	#sticky-menu .mainnavi .navi-cell{
		min-height:100%;
	}
	#sticky-menu .mainnavi .navi-cell a,
	#sticky-menu .mainnavi .navi-cell > .aLink{
		height:100%;
		padding:0.5em 0;
	}
	#sticky-menu .mainnavi .navi-cell a > .flex ,
	#sticky-menu .mainnavi .navi-cell > .aLink > .flex {
		padding:0.2em 0.5em;
	}
	#sticky-menu .mainnavi .navi-cell > * .txt1{
		font-size:130%;
		line-height:1;
	}
	#sticky-menu .mainnavi .navi-cell > * .txt2{
		font-size:80%;
	}

	#sticky-menu .mainnavi .navi-cell:nth-child(3n+2):before ,
	#sticky-menu .mainnavi .navi-cell:last-child:after {
		content:none;
	}

	.fixed-topnavi #sticky-menu .mainnavi {
		font-size:80%;
	}


}


/* ====================================================================
	header nav lv2
==================================================================== */
#sticky-menu .mainnavi .navi-cell .lv2 {
	display:none;
	position:absolute;
	top:100%;
	left:-1px;
	right:-1px;
	border-style:none solid solid;
	border-width:0 1px 1px;
	border-color:var(--topnavi-text);
	background:var(--topnavi-bg);
}
#sticky-menu .mainnavi .navi-cell .lv2 li {
	position:relative;
	padding-top:1px;
}
#sticky-menu .mainnavi .navi-cell .lv2 li:before {
	content:"";
	position:absolute;
	top:0;
	left:2em;
	right:2em;
	height:1px;
	background:var(--topnavi-subborder);
}
#sticky-menu .mainnavi .navi-cell .lv2 a {
	padding-top:1px;
}
#sticky-menu .mainnavi .navi-cell .lv2 a {
	padding:0.8em 0;
}
#sticky-menu .mainnavi .navi-cell .lv2 .txt1{
	font-size:130%;
}
#sticky-menu .mainnavi .navi-cell .lv2 .txt2{
	font-size:85%;
}

#sticky-menu .mainnavi .navi-cell.on .lv2 {
	display:block;
}

@media screen and (max-width:799px){
	#sticky-menu .mainnavi .navi-cell.on .lv2 {
		left:calc(-100% + 1px);
		right:-1px);
	}
}




/* ====================================================================
	#sticky-menu .mainnavi - fixed
==================================================================== */
.fixed-topnavi #sticky-menu{
	position:fixed;
	top:0;
	left:0;
	right:0;
}

.fixed-topnavi #sticky-menu > .flex{
	padding-left:0.5em;
}
.fixed-topnavi #sticky-menu .logo{
	display:initial;
	width:calc(100% / 4);
}

@media screen and (max-width:799px){
	.fixed-topnavi #sticky-menu .logo{
		width:calc(100% / 3);
	}
}


/* ==============================================
	#sticky-menu .mainnavi - fixed - #sticky-menu .mainnavi
=============================================== */
.fixed-topnavi #sticky-menu .mainnavi .navi-cell{
	width:calc(100% / 3);
}
.fixed-topnavi #sticky-menu .mainnavi .navi-cell:first-child {
	display:none;
}

@media screen and (min-width:800px){
	.fixed-topnavi #sticky-menu .mainnavi .navi-cell > a,
	.fixed-topnavi #sticky-menu .mainnavi .navi-cell > .aLink{
		height:4em;
		padding:0.3em 0 0.5em;
		line-height:1.2;
	}

	.fixed-topnavi #sticky-menu .mainnavi .navi-cell > * .txt1{
		font-size:120%;
	}
	.fixed-topnavi #sticky-menu .mainnavi .navi-cell > * .txt2{
		font-size:85%;
	}

	.fixed-topnavi #sticky-menu .mainnavi .navi-cell .lv2 a {
		padding:0.5em 0;
	}
}




/* ============================================================================================
	footer
		#footer
			#footer-info
				.flex-left
					#footer-logo
					#footer-links
				.footer-snslink
		#footer-siteinfo
			.mainnavi
		#copyright
============================================================================================ */
#footer {
	border-top:5px solid var(--main-color);
	background:#fef1f8;
}
#footer-info {
	padding:2em;
}


#footer-links {
	padding-top:1em;
	padding-left:1em;
	font-size:90%;
}
#footer-links h2 {
	color:#f06;
	text-decoration:underline;
}
#footer-links h3 {
	padding-top:0.5em;
	padding-left:0.5em;
	font-weight:bold;
}
#footer-links a {
	margin-left:1em;
}
#footer-links h3 + a {
	margin-left:1.5em;
}

.footer-snslink.flex {
}
.footer-snslink.flex > div {
	width:5em;
	padding:0.3em;
}
.footer-snslink.flex > div a:hover {
	filter:invert(1);
}




@media screen and (max-width:799px){
	#footer-info.flex {
		flex-direction:column;
		justify-content:center;
		align-items:center;
		text-align:center;
	}
	#footer-info.flex > .flex-left {
	}
	#footer-info.flex > .footer-snslink.flex.right {
		padding-top:2em;
	}

	#footer-links {
		padding:1em 0 0;
	}
	#footer-links h3 {
		padding:0.5em 0 0;
	}
	#footer-links a ,
	#footer-links h3 + a {
		margin:0 0.5em;
	}

	.footernavi .navMenu.flex {
		flex-wrap:wrap;
		align-items:center;
	}
}



/* ====================================================================
	#footernavi
==================================================================== */
.footernavi {
	padding:1em 0;
}
.footernavi .navMenu.flex {
}
.footernavi .navi-cell{
	padding:0 0.5em;
}
.footernavi .navi-cell > a {
	padding:0 0.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	border-bottom:2px solid transparent;
}
.footernavi .navi-cell > a:before{
	content:"●";
}
.footernavi .navi-cell > a .txt2{
	display:none;
}
.footernavi .navi-cell > a:hover{
	color:#f06;
	border-bottom-color:#f06;
}



/* ====================================================================
	#copyright
==================================================================== */
#copyright{
	padding:0.5em 0;
}
#copyright .size-s{
	font-size:90%;
}



/* ============================================================================================
	main
		#main-contents
		#side-contents
============================================================================================ */
main.flex{
	padding:0 1em;
}
main.flex > #main-contents{
	width:calc(100% - 300px);
	padding:2em 0;
}
main.flex > #side-contents{
	width:300px;
	padding-left:2em;
	min-height:100%;
}


.side-inner {
	height:100%;
	padding:2em 0;
}


.fixed-topnavi main.flex {
	padding-top:4em;
}

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

	main.flex > #main-contents{
		width:100%;
	}
	main.flex > #side-contents{
		width:100%;
		padding:0;
		min-height:auto;
	}
	.side-inner {
		padding:2em 1em;
	}
}


/* ====================================================================
	side - pickup shop
==================================================================== */
.side-pickup {
}
.side-pickup a {
	display:block;
	padding:0.3em;
	text-align:center;
}
.side-pickup a .image {
	padding:0 1em;
}
.side-pickup a .image img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
}
.side-pickup a .text {
	padding:0.3em 0;
	line-height:1.3;
}
.side-pickup a .text .area {
	font-size:85%;
}

.side-pickup a:hover {
	color:var(--banner-hover-text);
	background:var(--banner-hover-bg);
}




#side-contents .content-block.rank-selector.flex {
	padding:1em 1em 0;
	text-align:center;
}

.rank-selector.flex > div {
	color:var(--ranking-selector-text);
	background:var(--ranking-selector-bg);
	border-style:solid;
	border-color:var(--ranking-selector-border);
	border-width:1px 0;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.rank-selector.flex > div.on {
	color:var(--ranking-selector-bg);
	background:var(--ranking-selector-text);
}
.rank-selector.flex > div:not(.on) {
	cursor:pointer;
}
.rank-selector.flex > div:not(.on):hover {
	background:var(--ranking-selector-bg-hover);
	opacity:0.9;
}

.rank-selector.flex > div.week {
	border-left-width:1px;
	border-radius:0.5em 0 0 0.5em;
}
.rank-selector.flex > div.now {
	border-right-width:1px;
	border-radius:0 0.5em 0.5em 0;
}

.ranking-block {
	width:100% !important;
	padding:1em 0.5em 2em !important;
}


@media screen and (max-width:799px){
	.ranking-block {
		padding-bottom:0.5em !important;
		text-align:center;
		white-space:nowrap;
		overflow-y:auto;
	}
	.ranking-block > .side-pickup {
		display:inline-block;
		width:40vw;
	}
}



/* ============================================================================================ news
	news
============================================================================================ */

/* ====================================================================
	news - list
==================================================================== */
.news-list {
}
.news-list li > .flex {
	padding:0.5em;
	border-bottom:1px dashed #999;
}
.news-list li > .flex > * {
	white-space:nowrap;
}
.news-list li > .flex > * + * {
	margin-left:0.8em;
}
.news-list li > .flex > .date {
	color:var(--main-color);
}
.news-list li > .flex > .site,
.news-list li > .flex > .shop{
	color:var(--button-text);
	border-radius:0.3em;
	font-size:80%;
	line-height:1.5;
	padding:0 0.3em;
}

.news-list li > .flex > .site {
	background:var(--button-orange-bg);
}
.news-list li > .flex > .shop {
	background:var(--button-green-bg);
}

.news-list li > .flex > .head {
}


.news-list li > a.flex:hover {
	background:#fef;
}


@media screen and (max-width:799px){
	.news-list li > .flex {
		flex-wrap:wrap;
	}

	.news-list li > .flex > .head {
		width:100%;
	}
}


/* ====================================================================
	news - article
==================================================================== */
.news-content {
}

.news-content .image {
	text-align:center;
	padding-bottom:2em;
}

.subText {
	padding-top:2em;
}
.subText .subText-Row {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.subText .h {
	width:4.2em;
	text-align:center;
}
.subText .d {
	display:flex;
	align-items:center;
}
.subText a {
	padding:0 0.3em;
	color:#00f;
	text-decoration:underline;
}
.subText a:hover {
	color:#f06;
}


/* ============================================================================================ column
	column
============================================================================================ */
.column-list {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.column-list li {
	width:calc(100% / 3);
	padding:0.5em;
}
.column-list li > a {
	display:block;
	padding:0.3em 0.3em 0.5em;
	background:var(--column-bg);
}
.column-list li > a:hover {
	background:var(--column-bg-hover);
}


@media screen and (max-width:799px){
	.column-list li {
		width:calc(100% / 2);
	}
}


/* ============================================== column - image /  */
.column-list .image {
	position:relative;
	text-align:center;
	overflow:hidden;
}
.column-list .image:before {
	content:"";
	display:block;
	width:100%;
	height:0;
	padding-top:calc(100% * 3 / 4);
	background:#fff;
}
.column-list .image img {
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
}


/* ============================================== column - label */
.column-list .label {
	font-size:90%;
	padding:0.3em 0.3em 0;
}
.column-list .label .date {
	color:var(--column-date-text);
	padding-right:0.3em;
}



/* ============================================== column - head */
.column-list .head {
	line-height:1.6;
	height:calc(1.6em * 3);
	padding:0 0.5em;
}




/* ====================================================================
	column - event
==================================================================== */
.column-list.event {
}

.column-list.event .image:before {
	padding-top:100%;
}
.column-list.event .image img {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	object-fit:cover;
}

.column-list.event .head {
	line-height:1.6;
	height:1.6em;
	padding:0 0.5em;
}


.column-list.event li > a:hover .image img {
	transform:scale(1.1);
}



/* ============================================================================================ discount
	discount
============================================================================================ */
.discount-list {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.discount-list li {
	width:calc(100% / 2);
	padding:0.5em;
}
.discount-list li > a {
	padding:0.5em;
	color:var(--discount-text);
	background:var(--discount-bg);
	border:var(--discount-border);
	display:flex;
}
.discount-list li > a:hover {
	background:var(--discount-hover-bg);
}


@media screen and (max-width:799px){
	.discount-list li {
		width:100%;
	}
}



/* ============================================== discount - image /  */
.discount-list .image {
	width:40%;
	aspect-ratio:1/1;
	position:relative;
	text-align:center;
	overflow:hidden;
}
.discount-list .image img {
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

@media screen and (max-width:799px){
	.discount-list .image {
		width:30%;
	}
}


/* ============================================== column - label */
.discount-list .label {
	width:60%;
	padding-left:0.5em;
}


@media screen and (max-width:799px){
	.discount-list .label {
		width:70%;
	}
}



/* ============================================== column - label > * */
.discount-list .date {
	width:100%;
	font-size:90%;
	text-align:right;
}
.discount-list .head {
	width:100%;
	padding-top:0.3em;
	font-size:90%;
	line-height:1.4;
	height:calc(1.4em * 5 + 0.3em);
}

.discount-list .linkText {
	font-size:90%;
	margin:auto auto 0;
}


@media screen and (max-width:799px){
	.discount-list .head {
	}
	.discount-list .linkText {
		font-size:85%;
	}
}



/* ============================================================================================ shop page
	search page
============================================================================================ */
.h3 {
	padding-bottom:0.8em;
}
.h3 > * {
	padding:0 1em;
	color:var(--h3-text);
	background:var(--h3-bg);
	font-family: var(--title-font-family);
}
.h3 > * .en {
	font-size:120%;
}
.h3 > * .jp {
	font-size:90%;
}


.searchNotes {
	text-align:right;
	padding-top:0.5em;
	color:var(--notes-text);
}
.searchNotes > span {
	font-size:80%;
}


.field-group.flex.search + .h3 {
	padding-top:2em;
}

.field-group.flex.search > *.flex > label.flex {
	width:100%;
	border-bottom:1px dashed #ccc;
}
.field-group.flex.search > *.flex > label.flex .en {
	white-space:nowrap;
}
.field-group.flex.search > *.flex > label.flex .jp {
	white-space:nowrap;
	font-size:90%;
}

.freetext {
	width:60%;
	padding:0 1em
}

.submit {
	padding:4em 0 3em;
	text-align:center;
}
.submit input[type="submit"] {
	padding: 0.5em 3em;
	text-indent:0.2em;
	letter-spacing:0.2em;
	font-size:160%;
	background:var(--button-orange-bg);
	font-family: var(--title-font-family);
}
.submit input[type="submit"]:hover {
	background:var(--button-orange-bg-hover);
}



/* ============================================================================================ shop page
	shop page
============================================================================================ */

/* ============================================== layout */
#page-shop main.innerFrame.flex {
	flex-wrap:wrap;
	width:100%;
	padding:0;
}

#shop-main > #main-contents{
	width:calc(100% - 300px);
	padding:2em 0;
}
#shop-main > #side-contents{
	width:300px;
	padding-left:2em;
	min-height:100%;
}
#shop-main .side-inner {
	padding-top:1em;
}


@media screen and (max-width:799px){
	#shop-main.flex {
		display:block;
		padding:0 0.5em;
	}
	#shop-main > #main-contents{
		width:100%;
	}
	#shop-main > #side-contents{
		width:100%;
		padding:2em 0 0;
		min-height:auto;
	}
}



/* ============================================== shop - breadcrumb list */
#breadcrumbs {
	width:100%;
	border-bottom:1px dashed #ccc;
}
#breadcrumbs .innerFrame {
	padding:0.8em 0;
	display:flex;
}
#breadcrumbs .path{
	font-size:85%;
}
#breadcrumbs .path + .path:before {
	content:">";
	padding:0 1em;
}
#breadcrumbs a {
	text-decoration:underline;
	border-radius:0.3em;
	padding:0 0.5em;
}
#breadcrumbs a:hover {
	color:#f00;
	background:#fef;
}

@media screen and (max-width:799px){
	#breadcrumbs .innerFrame {
		flex-wrap:wrap;
	}
	#breadcrumbs .innerFrame > *:first-child {
		width:100%;
	}
}


/* ============================================== shop - header */
#shop-header.innerFrame {
	padding:1em;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	border-bottom:1px solid #ddd;
}

.shop-header-info {
}
.shop-header-info .name {
	font-size:220%;
	font-weight:bold;
}
.shop-header-info .area {
	line-height:1.4;
	font-size:110%;
	font-weight:bold;
}
.shop-header-info .sub {
	line-height:1.4;
	font-size:110%;
	font-weight:bold;
}



.features {
	padding-top:0.5em;
	display:flex;
}

.features > .feature-cell {
	padding:0 0.3em;
}

.features > .feature-cell > span {
	padding:0 0.8em 0.1em;
	font-weight:bold;
	color:#fff;
	background:#69c;
	border-radius:0.3em;
	display:flex;
}



#shop-header .tel {
	min-width:400px;
	padding-top:calc(45px + 0.6em);
	padding-left:calc(110px + 0.6em);
	padding-right:0.6em;
	padding-bottom:0.6em;
	background:url(images/common/shoptel_label.png) 0.6em 0.6em no-repeat #eee;
	background-size:400px;
	border-radius:0.5em;
}

#shop-header .tel a {
	line-height:1.2;
	font-size:250%;
	font-weight:bold;
	padding-left:1.2em;
	background:url(images/icons/icon_tel.png) 0 60% no-repeat;
	background-size:1em;
	display:flex;
	align-items:center;
}


@media screen and (max-width:799px){
	#shop-header.innerFrame {
		display:block;
	}
	.shop-header-info {
		padding-bottom:1em;
	}
	.shop-header-info .area {
		padding-left:1em;
	}
	.shop-header-info .sub {
		text-align: right;
	}

	#shop-header .tel {
		min-width:100%;
		padding-top:calc(45px + 1.3em);
		padding-left:0.6em;
		background-position:50% 0.6em;
		display:flex;
		justify-content:center;
	}
}





/* ============================================== shop - news */
.news-box {
	padding:0 1em;
}

.shop-news-cell {
	padding-bottom:2em;
}
.shop-news-box {
	padding:1em 1.5em;
	font-size:90%;
	border:1px solid #999;
}

.shop-news-header {
	width:100%;
	padding:0 1em;
	border-bottom:2px solid #666;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
.shop-news-cell .title {
	font-size:150%;
	font-weight:bold;
}
.shop-news-cell .date {
	white-space:nowrap;
}

.shop-news-cell .body {
	display:flex;
	justify-content:center;
	align-items:stretch;
}
.shop-news-cell .body > * {
	padding:1em;
}

.shop-news-cell .body > .image {
	width:35%;
	padding-top:2em;
	text-align:center;
}
.shop-news-cell .body > .text {
	flex-grow:1;
	width:calc(100% - 35%);
}


@media screen and (max-width:799px){
	.news-box {
		padding:0;
	}
	.shop-news-box {
		padding:0.5em;
	}
	.shop-news-cell .body > .image {
		padding:0.8em 0.5em;
	}
	.shop-news-cell .body > .text {
		padding:0.5em;
	}

	.shop-news-cell {
		padding:0.5em;
	}
}


.shop-news-box.discount {
	border:3px solid var(--main-color);
	padding:0.8em;
}
.shop-news-cell .shop-news-box.discount .body > .image {
	padding-top:1em;
}



/* ============================================== shop - cast */
.content-main.type-5 {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
	text-align:center;
}

.content-main.type-5 > * {
	width:calc(100% / 5);
	padding:0 0.2em 1em;
}




/* ============================================== shop - table */
table.shop-table {
	width:100%;
}
table.shop-table th ,
table.shop-table td {
	padding:0.5em 1em;
	border:1px solid #ccc;
}
table.shop-table td {
	width:70%;
}
table.shop-table td.map {
	padding:1em;
}
table.shop-table td.map .address {
	padding-top:0.8em;
	text-align:center;
}

@media screen and (max-width:799px){
	table.shop-table th ,
	table.shop-table td {
		padding:0.3em 0.5em;
	}

	table.shop-table th {
		width:7em;
	}
}



table.shop-table a.textLink {
	padding:0 0.3em;
	color:var(--shop-table-link);
	border-bottom:1px solid var(--shop-table-link);
}
table.shop-table a.textLink:hover {
	color:var(--shop-table-link-hover);
	border-bottom-color:var(--shop-table-link-hover);
}





/* ============================================== shop sub navi */
#shop-tab {
	position:sticky;
	width:100%;
	top:69px;
	border-top:1px solid #ccc;
	border-bottom:3px solid var(--main-color);
	background:#f9f9f9;
	z-index:10;
}
#shop-tab-list {
	display:flex;
	justify-content:center;
	align-items:center;
}
#shop-tab-list > li {
	width:calc(100% / 8);
}
#shop-tab-list > li > * {
	width:100%;
	height:3.5em;
	line-height:1.2;
	color:#000;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	cursor:pointer;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
#shop-tab-list > li > *.noLink {
	color:#ccc;
	cursor:initial;
}
#shop-tab-list > li > *:not(.noLink):hover {
	color:#fff;
	background:var(--main-color);
}

#shop-tab-list > li > a:after {
	content:"";
	width:1.2em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_link.png) 100% 50% no-repeat;
	background-size:1em;
	filter:brightness(0);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
#shop-tab-list > li > *:not(.noLink):hover:after {
	filter:brightness(0) invert(1);
}


@media screen and (max-width:799px){
	#shop-tab {
		top:79px;
	}
}


/* ============================================== shop link button */
#shop-link-button-list {
	padding-bottom:3em;
	display:flex;
	justify-content:space-evenly;
	align-items:center;
	text-align:center;
}
#shop-link-button-list > li {
	flex-grow:1;
	width:calc(100% / 3);
	padding:0 1em;
}
#shop-link-button-list > li > * {
	display:block;
	width:100%;
	padding:0.5em 0;
	font-size:110%;
	color:#fff;
	background:#96c;
	border:3px solid #c9f;
	border-radius:0.5em;
}
#shop-link-button-list > li > *.noLink {
	border-color:#c6f;
	filter:grayscale(1) brightness(1.8);
}

#shop-link-button-list > li > *.more-button:before {
	bottom:-2px;
}
#shop-link-button-list > li > *.more-button span {
	display:flex;
	justify-content:center;
	align-items:center;
	letter-spacing:-1px;
}

#shop-link-button-list > li > *.more-button span:after {
	content:"";
	width:1.2em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_link.png) 100% 50% no-repeat;
	background-size:1em;
	filter:brightness(0) invert(1);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
#shop-link-button-list > li > *.more-button.noIcon span:after {
	content:none;
}

#shop-link-button-list > li > *.more-button:hover {
	color:#96c;
}
#shop-link-button-list > li > *.more-button:hover span:after {
	filter:brightness(1.2) hue-rotate(30deg);
}



@media screen and (max-width:799px){
	#shop-link-button-list > li {
		padding:0 0.5em;
	}
}


/* ============================================== shop side */

.shop-side {
	width:100%;
}
.shop-side .more-button {
	--color:#9c3;
}
.shop-side .more-button.official {
	--color:#f90;
}

.shop-side .more-button {
	display:block;
	width:100%;
	height:5em;
	color:var(--color);
	background:#fff;
	border:2px solid var(--color);
	border-left-width:1em;
	display:flex;
	justify-content:center;
	align-items:center;
}
.shop-side a span {
	font-size:150%;
}
.shop-side .more-button:before {
	background:var(--color);
}
.shop-side .more-button > span:after {
	content:none;
}

.shop-side .more-button:hover {
	color:#fff;
}



/* ============================================== shop side > sns */
.snsLink h3 {
	padding:0.3em 1em;
	font-size:120%;
	color:#fff;
	background:#1aaae9;
}
.snsLink-list {
	border:1px solid #1aaae9;
	overflow:hidden;
}
.snsLink .sns-block {
	padding:1em 0.5em 0.5em;
}
.snsLink iframe {
	max-width:232px !important;
	min-width:auto !important;
}


@media screen and (max-width:799px){
	.snsLink iframe {
    	max-width: 396px !important;
	}
}


.shoprecruit .snsLink.line h3 {
	background:#090;
	margin-bottom:1em;
}
.snsLink.line .image {
	padding:0 0.5em 1em;
}
.snsLink.line .image img {
	border:1px solid #ccc;
}


/* ============================================================================================ shop recruit */
.shoprecruit .features > .feature-cell > span {
	background:#f69;
}
.shoprecruit #shop-header .tel {
	background-color:#fdf;
}

.shoprecruit .small {
	font-size:70%;
}

.shoprecruit .h2 {
	border-color:#f6c;
}

.shoprecruit #shop-link-button-list > li > * {
	filter:hue-rotate(45deg);
}


.shop-side .more-button.shop {
	filter:hue-rotate(150deg);
}

.shoprecruit .snsLink h3 {
	background-color:#c6f;
}
.shoprecruit .snsLink-list {
	border-color:#c6f;
}



/* ============================================================================================ result
	.resultCell
		.resultCell-inner.flex
			.image
			.style
				.label
			.basic
				.name
				.addr
			.price
				.total
				.reference
					.playtime
					.bathingfee
			.info
				.contact
					.tel1
					.tel2
					.reserve1
					.reserve2
			.button
============================================================================================ */
.resultBlock {
	padding:2em 0;
}

.resultList {
	padding:1em 0.5em;
}

.grade0 {
	--bg-color:#fec;
	--border-color:#b85;
}
.grade1 {
	--bg-color:#fee;
	--border-color:#e68;
}
.grade2 {
	--bg-color:#feb;
	--border-color:#f90;
}
.grade3 {
	--bg-color:#def;
	--border-color:#2ae;
}
.grade4 {
	--bg-color:#cfe;
	--border-color:#2a7;
}
.grade5 {
	--bg-color:#ff9;
	--border-color:#f90;
}



.gradeHeader {
	padding:0.3em 0;
	background:var(--bg-color);
	border-left:1.8em solid var(--border-color);
	border-bottom:2px solid var(--border-color);
}
.gradeHeader h3 {
	padding-left:1em;
	font-size:120%;
	font-weight:bold;
}
.gradeHeader h3 .notes {
	padding-left:1em;
	font-size:80%;
	color:var(--border-color);
	filter:brightness(0.8);
}


/* ============================================== resultCell */
.resultCell {
	padding-bottom:0.8em;
}
.resultCell-inner.flex {
	height:80px;
	line-height:1;
	background:#fcf2cf;
	box-shadow:2px 2px 0 #ccc;
	text-align:center;
}
.resultCell-inner.flex > div {
	height:100%;
}
.resultCell-inner.flex > div:nth-child(2n) {
	background:#fef5e3;
}


.resultCell-inner div {
	width:100%;
}
.resultCell-inner a {
	width:100%;
	height:100%;
}
.resultCell-inner a:not(.flex) {
	display:block;
}


/* ============================================== resultCell - image */
.resultCell-inner.flex > .image {
	width:80px;
	padding:5px;
	aspect-ratio:1/1;
}
.resultCell-inner.flex > .image img {
	width:100%;
	height:100%;
	object-fit:cover;
}


/* ============================================== resultCell - style */
.resultCell-inner.flex > .style.flex {
	width:60px;
	padding:0 2px;
}
.resultCell-inner.flex > .style.flex > .label {
	margin-top:2px;
	height:30%;
	font-size:70%;
	color:#fff;
	background:#009946;
	overflow:hidden;
}


/* ============================================== resultCell - basic */
.resultCell-inner.flex > .basic.flex {
	width:220px;
	padding:0 2px;
}
.resultCell-inner.flex > .basic.flex > .name {
	height:55px;
	line-height:1.2;
	color:var(--main-color);
	font-size:120%;
	font-weight:bold;
	border-bottom:1px solid #999;
}
.resultCell-inner.flex > .basic.flex > .addr {
	flex-grow:1;
	font-size:75%;
}
.resultCell-inner.flex > .basic.flex a:hover {
	background:#f7dbda
}


/* ============================================== resultCell - price */
.resultCell-inner.flex > .price.flex {
	width:150px;
	padding:0 2px;
}
.resultCell-inner.flex > .price.flex > .total {
	height:55px;
	color:var(--main-color);
	font-size:120%;
	font-weight:bold;
	border-bottom:1px solid #999;
}
.resultCell-inner.flex > .price.flex > .reference.flex {
	flex-grow:1;
	font-size:75%;
}
.resultCell-inner.flex > .price.flex > .reference.flex > .playtime {
	width:40%;
}
.resultCell-inner.flex > .price.flex > .reference.flex > .bathingfee {
	width:60%;
}


/* ============================================== resultCell - info */
.resultCell-inner.flex > .info.flex {
	width:270px;
	padding:0 2px;
}

.resultCell-inner.flex > .info.flex > .contact.flex {
	height:55px;
	padding:2px;
	border-bottom:1px solid #999;
}
.resultCell-inner.flex > .info.flex > .contact.flex > div {
	width:25%;
	height:100%;
	padding:2px;
}
.resultCell-inner.flex > .info.flex > .contact.flex > div.c2 {
	width:50%;
}
.resultCell-inner.flex > .info.flex > .contact.flex > div > a.flex {
	color:var(--main-color);
	font-size:95%;
	font-weight:bold;
	background:#fff;
	box-shadow:1px 1px 0 #ccc;
}
.resultCell-inner.flex > .info.flex > .contact.flex > div > a.flex:hover {
	background:#f7dbda
}

.resultCell-inner.flex > .info.flex > .etc.flex {
	flex-grow:1;
	font-size:80%;
}
.resultCell-inner.flex > .info.flex > .etc.flex > div.time {
	width:50%
}
.resultCell-inner.flex > .info.flex > .etc.flex > div.courtesy {
	width:50%
}



/* ============================================== resultCell - button */
.resultCell-inner.flex > .button.flex {
	flex-grow:1;
	width:auto;
	padding:3px;
}
.resultCell-inner.flex > .button.flex > div {
	height:50%;
	padding:3px 0;
} 
.resultCell-inner.flex > .button.flex > div > a.flex {
	font-size:85%;
	color:#fff;
	border-radius:5px;
	box-shadow:1px 1px 0 #999;
}

.resultCell-inner.flex > .button.flex > div.shopLINK > a.flex {
	background:#09f;
}
.resultCell-inner.flex > .button.flex > div.shopLINK > a.flex:hover {
	background:#03f;
}

.resultCell-inner.flex > .button.flex > div.recruitLINK > a.flex {
	background:#f6c;
}
.resultCell-inner.flex > .button.flex > div.recruitLINK > a.flex:hover {
	background:#f39;
}




.resultCell.header .resultCell-inner.flex {
	height:40px;
	background:#f4f4f4;
}
.resultCell.header .resultCell-inner.flex > div:nth-child(2n) {
	background:#fafafa;
}
.resultCell.header .image ,
.resultCell.header .style ,
.resultCell.header .resultCell-inner.flex > .basic.flex > .addr ,
.resultCell.header .resultCell-inner.flex > .price.flex > .reference.flex ,
.resultCell.header .resultCell-inner.flex > .info.flex > .etc.flex {
	font-size:75%;
}
.resultCell.header .resultCell-inner.flex > .basic.flex > .name ,
.resultCell.header .resultCell-inner.flex > .price.flex > .total ,
.resultCell.header .resultCell-inner.flex > .info.flex > .contact.flex {
	height:24px;
}
.resultCell.header .resultCell-inner.flex > .basic.flex > .name ,
.resultCell.header .resultCell-inner.flex > .price.flex > .total ,
.resultCell.header .info .contact ,
.resultCell.header .button {
	color:var(--body-text);
	font-size:90%;
	font-weight:bold;
}

@media screen and (max-width:799px){
	.resultCell-inner.flex {
		height:162px;
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	.resultCell.header .resultCell-inner.flex {
		height:82px;
	}
	.resultCell-inner.flex > div {
		height:calc(100% / 2);
		border-bottom:1px solid #666;
	}


	.resultCell-inner.flex > div.image {
		order:1;
		width:80px;
	}
	.resultCell-inner.flex > div.basic.flex {
		order:2;
		width:calc(100% - 80px - 30%);
	}
	.resultCell-inner.flex > div.price.flex {
		order:3;
		width:30%;
	}
	.resultCell-inner.flex > div.style.flex {
		order:4;
		width:80px;
	}
	.resultCell-inner.flex > div.info.flex {
		order:5;
		width:calc(100% - 80px - 20%);
	}
	.resultCell-inner.flex > div.button.flex {
		order:6;
		width:20%;
	}

	.recruit .resultCell-inner.flex > div.basic.flex {
		width:calc(100% - 80px);
	}

}





/* ============================================================================================ abouot link
	about link
============================================================================================ */
.banners-table{
	padding:2em 1em;
}

table.banners {
	font-size:90%;
	margin:0 auto;
}
table.banners th ,
table.banners td {
	padding:0.3em 0.5em;
	border:1px solid #ccc;
}
table.banners th {
	vertical-align:middle;
	white-space:nowrap;
}
table.banners td {
	position:relative;
	line-height:1;
	width:600px;
}
table.banners td.copytext {
	padding-right:1.5em;
}
table.banners td.copytext textarea {
	height:6.4em;
	cursor:pointer;
}

table.banners td .clip-copy {
	position:absolute;
	top:0;
	right:0;
	width:2em;
	height:2em;
	padding:0.2em;
	background:#fff;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	border-radius:0 0 0 0.5em;
	cursor:pointer;
}
table.banners td .clip-copy:hover {
	background:#eef;
}


@media screen and (max-width:799px){
	table.banners td {
		width:250px;
	}
}



/* ============================================================================================ about us
	about us
============================================================================================ */
dl.aboutus {
	min-width:420px;
}
dl.aboutus dt {
}
dl.aboutus dt:before {
	content:"◇";
}
dl.aboutus dd {
	padding-left:3em;
	padding-bottom:1em;
}



/* ============================================================================================ search all check
	search all check
============================================================================================ */
.area-title {
	width:100%;
}
.area-title > input {
	align-self:center;
}
.area-title > input + span {
	margin-right:auto;
}


/* ============================================================================================ news selector
	news selector
============================================================================================ */
#newsSelectors {
	width:100%;
	padding-top:2em;
	display:flex;
	justify-content:center;
	align-items:center;
}
#newsSelectors .newsSelect {
	padding:0 1em;
}
#newsSelectors .newsSelect a {
	display:block;
	border-radius:0.3em;
	font-size:110%;
	line-height:1.8;
	padding:0 1em;
	border-style:solid;
	border-width:2px;
}
#newsSelectors .newsSelect.bg-0 a {
	color:var(--button-blue-bg);
	border-color:var(--button-blue-bg);
}
#newsSelectors .newsSelect.bg-1 a {
	color:var(--main-color);
	border-color:var(--main-color);
}
#newsSelectors .newsSelect.bg-2 a {
	color:var(--button-green-bg);
	border-color:var(--button-green-bg);
}

#newsSelectors .newsSelect.bg-0.on a ,
#newsSelectors .newsSelect.bg-0 a:hover {
	color:var(--button-text);
	background:var(--button-blue-bg);
}
#newsSelectors .newsSelect.bg-1.on a ,
#newsSelectors .newsSelect.bg-1 a:hover {
	color:#fff;
	background:var(--main-color);
}
#newsSelectors .newsSelect.bg-2.on a ,
#newsSelectors .newsSelect.bg-2 a:hover {
	color:var(--button-text);
	background:var(--button-green-bg);
}


@media screen and (max-width:799px){
	#newsSelectors {
		justify-content:space-evenly;
	}
	#newsSelectors .newsSelect {
		padding:0;
	}
	#newsSelectors .newsSelect a {
		font-size:100%;
		line-height:2;
	}
}