@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Noto+Serif+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0..1,0');
:root {
	--txt-color: #000;
	--txt-color2: #444;
	--txt-color3: #888;
	--accent-color1: #a0c3e0;
	--accent-color2: #5f8baf;
	--accent-color3: #36825a;
	--accent-color4: #da8645;
	--accent-color5: #99abba;
	--accent-color6: #739f88;
	--border-color1: #ddd;
	--border-color2: #fff;
	--border-color3: #99abba;
	--bg-color1: #fff;
	--bg-color2: #a0c3e0;
	--bg-color3: #f8f9fa;
	--bg-color4: #e8edf1;
	--bg-color5: #fff9f4;
	--bg-color6: #f2fbf7;
	--font:  16px;
	--fontxs: .8rem;
	--fonts: .9rem;
	--fontm: 1.2rem;
	--fontl:  1.6rem;
	--fontxl: 2.0rem;
	--fontxxl: 3rem;
	--gapxs: 7px;
	--gaps: 14px;
	--gap: 30px;
	--gapl: 60px;
	--gapxl: 90px;
	--wt: 1320px;
	--wtm: 90vw;
	--wtw: 96vw;
	--serif: "Noto Serif JP", '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro', serif;
	--sans-serif: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	--lang: "Crimson Pro", sans-serif;
	}
@media screen and (max-width: 599px) {
:root {
	--font:  14px;
	--fontxs: .8rem;
	--fonts: .9rem;
	--fontm: 1.1rem;
	--fontl:  1.3rem;
	--fontxl: 1.6rem;
	--fontxxl: 2rem;
	--gapxs: 5px;
	--gaps: 10px;
	--gap: 5vw;
	--gapl: 8vw;
	--gapxl: 11vw;
	--wtm: 90vw;
	--wtw: 96vw;
	}
}
/* --------------------------------------------------- global */
* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-style: normal;
	}
html{
	width: 100%;
	overflow-x: hidden;
	font-size: var(--font);
	}
body {
	font-family: var(--sans-serif);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--txt-color);
	text-align: center;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	width: 100%;
	overflow-x: hidden;
	background: #fff;
	letter-spacing: .08rem;
	}
a {
	color: var(--accent-color2);
	text-decoration: none;
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	&:hover {
		color: var(--accent-color1);
		text-decoration: none;
		}
	&:active {
		color: var(--accent-color1);
		text-decoration: none;
		}
	}
/* --------------------------------------------------- icon */
.material-symbols-outlined {
	font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
	}
a[target="_blank"]:after,
a[href*="https://goo.gl/maps/"]:after,
a[href*="https://maps.app.goo.gl/"]:after,
a[href$=".pdf"]:after{
	font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline;
	vertical-align: top;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
	font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
	}
a[target="_blank"]:after{
	content: "arrow_outward";
	}
a[href*="https://goo.gl/maps/"]:after,
a[href*="https://maps.app.goo.gl/"]:after{
	content: "map";
	}
a[href$=".pdf"]:after{
	content: "picture_as_pdf";
	}
.st-image a[target="_blank"]:after, 
.st-image a[target="_blank"]:after {
	content: ""; 
	}
.icon{
	text-align: center;
	margin-bottom: var(--gaps);
	.material-symbols-outlined{
		display: block;
		width: 70px;
		height: 70px;
		background: var(--bg-color4);
		border-radius: 35px;
		margin: 0 auto;
		font-size: 35px;
		line-height: 70px;
		color: var(--txt-color);
		transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		}
	& a{
		display: block;
		width: 70px;
		height: 70px;
		margin: 0 auto;
		}
	& a:hover .material-symbols-outlined{
		background: var(--bg-color2);
		}
	}
/* --------------------------------------------------- common */
img {
	border: none;
	max-width: 100%;
	height: auto;
	}
.displaynone{
	display: none !important;
	}
time{
	font-style: italic;
	font-family: var(--serif);
	font-size: var(--fontxs);
	}
.category{
	display: flex;
	gap: var(--gaps);
	& a{
		display: block;
		text-decoration: none;
		font-style: italic;
		color: var(--accent-color1);
		font-family: var(--serif);
		font-size: var(--fontxs);
		}
	}
.pc-only {display: block;}
.sp-only {display: none;}
.pc {display: block;}
.tb {display: none;}
.sp {display: none;}
@media screen and (max-width: 781px) {
.pc:has(+.tb) {display: none;}
.tb {display: block;}
}
@media screen and (max-width: 599px) {
.pc, .pc-only {display: none;}
.sp, .sp-only {display: block;}
}
.logo{
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-indent: -9999px;
	transition: .3s;
	background-image: url(/resources/imgec/common/logo1.png);
	width: 150px;
	height: 40px;
	&.logo-white{
		background-image: url(/resources/imgec/common/logo2.png);
		}
	&.logol{
		width: 220px;
		height: 60px;
		}
	}
@media screen and (max-width: 599px) {
.logo{
	width: 100px;
	height: 28px;
	&.logol{
		width: 120px;
		height: 33px;
		}
	}
}
.is-constrained{
	width: var(--wt);
	max-width: var(--wtm);
	margin: 0 auto;
	padding: var(--gapxl) 0;
	text-align: left;
	&.is-narrow{
		width: 900px;
		}
	&.is-fit{
		width: auto;
		max-width: var(--wtw);
		}
	& + .is-constrained{
		padding-top: 0;
		}
	&.is-grid  + .st-group.is-constrained{
		padding: var(--gapxl) 0;
		}
	&.is-bgcolor{
		padding: var(--gapxl) 0 !important;
		position: relative;
		&::before{
			content: "";
			display: block;
			position: absolute;
			z-index: -1;
			inset-inline: 50%;
			width: 100vw;
			height: 100%;
			top: 0;
			margin-inline: -50vw;
			background-color: var(--bg-color3);
			}
		}
	&.is-bgcolor + .st-group.is-constrained{
		padding-top: var(--gapxl);
		}
	}
.is-margin-top{ margin-top: var(--gap); }
.is-font-size-xxl{ font-size: var(--fontxxl); line-height: 1.2; }
.is-font-size-xl{ font-size: var(--fontxl); }
.is-font-size-l{ font-size: var(--fontl); }
.is-font-size-m{ font-size: var(--fontm); }
.is-font-size-s{ font-size: var(--fonts); }
.is-font-size-xs{ font-size: var(--fontxs); }
.is-align-center{ text-align: center; }
.is-align-right{ text-align: right; }
.is-align-left{ text-align: left; }
.is-color1{ color: var(--accent-color1); }
.is-color2{ color: var(--accent-color2); }
.is-color3{ color: var(--accent-color3); }
.is-color4{ color: var(--accent-color4); }
.is-color5{ color: var(--accent-color5); }
.is-color6{ color: var(--accent-color6); }
.is-flex{
	display: flex;
	gap: var(--gap);
	align-items: center;
    justify-content: space-between;
	}
.is-grid { 
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 25%), 1fr));
	}
.is-wrap{
	flex-wrap: wrap;
	justify-content: start;
	}
.is-justification-left{ justify-content: start; }
.is-justification-center{ justify-content: center; }
.is-justification-right{ justify-content: end; }
.is-vertically-aligned-center{ align-items: center !important;}
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	}
.st-heading,
.st-post-title{
	font-family: var(--serif);
	& bdo{
		font-family: var(--lang);
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		}
	&.is-title1{
		background: var(--accent-color5);
		color: #fff;
		padding: var(--gapxs) var(--gaps);
		border: none;
		&:first-child{ margin-top: 0; }
		}
	&.is-title2{
		background: var(--accent-color6);
		color: #fff;
		padding: var(--gapxs) var(--gaps);
		border: none;
		&:first-child{ margin-top: 0; }
		}
	&.is-title3{
		position: relative;
		padding-bottom: var(--gap);
		margin-bottom: var(--gapl);
		border: none;
		&::after{
			content:"";
			display: block;
			width: 100px;
			height: 1px;
			background: var(--border-color3);
			position: absolute;
			left: 50%;
			bottom: 0;
			margin-left: -50px;
			}
		}
	}
h1{ 
	font-size: var(--fontxl);
	line-height: 1.6;
	font-family: var(--serif);
	font-weight: normal;
	}
h2{ 
	font-size: var(--fontxl);
	font-weight: normal;
	line-height: 1.6;
	margin: var(--gapl) 0;
	font-family: var(--serif);
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& bdo{
		display: block;
		text-transform: uppercase;
		font-style: italic;
		color: var(--accent-color1);
		font-size: var(--fonts);
		line-height: 3;
		}
	}
h3{ 
	font-size: var(--fontl);
	font-weight: normal;
	flex-wrap: wrap;
	margin: var(--gap) 0;
	font-family: var(--serif);
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& bdo{
		text-transform: uppercase;
		font-style: italic;
		color: var(--accent-color1);
		font-size: var(--fonts);
		display: block;
		}
	&.is-title1,
	&.is-title2{
		margin: var(--gapl) 0;
		}
	}
h4{ 
	font-size: var(--fontm);
	border-bottom: 1px solid var(--border-color1);
	padding-bottom: var(--gaps);
	margin: var(--gaps) 0;
	font-weight: normal;
	font-family: var(--serif);
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& a{
		color: var(--txt-color);
		}
	&.is-title1,
	&.is-title2{
		margin: var(--gap) 0;
		}
	}
h5{ 
	font-size: var(--fontm);
	color: var(--accent-color2);
	margin: var(--gaps) 0;
	font-family: var(--serif);
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	}
h6{ 
	font-size: var(--font);
	display: inline-block;
	margin: var(--gaps) 0;
	font-family: var(--serif);
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	}
ul.st-list{
	margin: var(--gaps) 0;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& li{
		list-style-type: disc;
		margin-bottom: var(--gapxs);
		margin-left: 24px;
		padding-left: var(--gapxs);
		}
	&.is-linklist{ /* link list title detail*/
		border-top: 1px solid var(--border-color1);
		& li{
			list-style-type: none;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid var(--border-color1);
			font-size: var(--fonts);
			}
		& a{
			padding: var(--gap) var(--gaps);
			padding-right: 40px;
			position: relative;
			display: flex;
			color: var(--txt-color2);
			}
		& a:hover{
			background: var(--bg-color3);
			}
		& a strong{
			display: block;
			flex: 30% 0 0;
			font-family: var(--lang);
			color: var(--accent-color2);
			font-size: var(--font);
			}
		& a::after{
			font-family: 'Material Symbols Outlined';
		    font-weight: normal;
		    font-style: normal;
		    display: inline-block;
			vertical-align: middle;
		    -webkit-font-feature-settings: 'liga';
		    -webkit-font-smoothing: antialiased;
			font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
			content: "arrow_right_alt";
			font-size: 20px;
			line-height: 1;
			color: var(--border-color1);
			position: absolute;
			right: 10px;
			top: 50%;
			margin-top: -10px;
			transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
			}
		& a:hover::after{
			color: var(--text-color);
			}
		}
	&.listsymbols{ /* icon list*/
		display: flex;
		justify-content: start;
		&.material-symbols-outlined{
			font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;
			}
		& li{
			list-style-type: none;
			margin: 0 -3px 0 0;
			padding: 0;
			font-size: 22px;
			color: var(--accent-color4);
			}
		}
	}
ol.st-list{
	margin: var(--gaps) 0;
	counter-reset: item;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& li{
		margin-bottom: var(--gapxs);
		padding-left: 40px;
		position: relative;
		}
	& li:before {
		counter-increment: item;
		content: counter(item);
		border: 1px solid var(--accent-color1);
		color: var(--accent-color1);
		font-family: var(--lang);
		display: inline-block;
		position: absolute;
		width: 24px;
		line-height: 24px;
		text-align: center;
		left: 0;
		top: 0;
		}
	}
dl.st-list{
	margin: var(--gaps) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gaps);
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& dt{
		flex: 1 1 calc( 50% - var(--gaps) / 2);
		}
	& dd{
		flex: 1 1 calc( 50% - var(--gaps) / 2);
		}
	}
.st-group{
	box-sizing:border-box;
	&.is-wrap1{
		border: 1px solid var(--border-color1);
		background: var(--bg-color3);
		padding: var(--gap);
		margin: var(--gap) auto;
		&:last-child{ margin-bottom: 0; }
		}
	&.is-wrap2{
		border: 1px solid var(--border-color1);
		background: var(--bg-color3);
		padding: var(--gapl);
		margin: var(--gapxl) auto;
		}
	&.is-wrap3{
		border: 1px solid var(--border-color1);
		padding: var(--gapl) var(--gap);
		border-radius: 10px;
		box-shadow: 0 0 10px var(--border-color1);
		&:has(+ .is-wrap3){
			margin-bottom: var(--gapl);
			}
		}
	&.is-simplewrap{
		border: 1px solid var(--border-color1);
		background: var(--bg-color3);
		padding: var(--gap);
		margin: 0;
		}
	}
.st-cover{
	padding: 0;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	.st-cover__inner-container{
	    position: relative;
		}
	&.has-parallax{
		.st-cover__image-background{
			background-attachment: fixed;
			background-attachment: unset;
		    background-repeat: no-repeat;
		    background-size: cover;
		    border: none;
		    bottom: 0;
		    box-shadow: none;
		    height: 100%;
		    left: 0;
		    margin: 0;
		    max-height: none;
		    max-width: none;
		    object-fit: cover;
		    outline: none;
		    padding: 0;
		    position: absolute;
		    right: 0;
		    top: 0;
		    width: 100%;
			box-sizing: border-box;
			}
		}
	& + .st-cover{
		margin-top: var(--gapxs);
		}
	& > img{
		border: none;
	    bottom: 0;
	    box-shadow: none;
	    height: 100%;
	    left: 0;
	    margin: 0;
	    max-height: none;
	    max-width: none;
	    object-fit: cover;
	    outline: none;
	    padding: 0;
	    position: absolute;
	    right: 0;
	    top: 0;
	    width: 100%;
		object-position: center;
		}
	&.is-position-top-left .st-cover__inner-container,
	&.is-position-top-center .st-cover__inner-container,
	&.is-position-top-right .st-cover__inner-container{
		align-items: flex-start !important;
		}
	&.is-position-bottom-left .st-cover__inner-container,
	&.is-position-bottom-center .st-cover__inner-container,
	&.is-position-bottom-right .st-cover__inner-container{
		align-items: flex-end !important;
		}
	&.is-position-top-left .st-cover__inner-container,
	&.is-position-center-left .st-cover__inner-container,
	&.is-position-bottom-left .st-cover__inner-container,
	&.is-left .st-cover__inner-container{
		padding-right: min(50vw, 880px);
		}
	&.is-position-top-right .st-cover__inner-container,
	&.is-position-center-right .st-cover__inner-container,
	&.is-position-bottom-right .st-cover__inner-container,
	&.is-right .st-cover__inner-container{
		padding-left: min(50vw, 880px);
		}
	& P{
		font-size: var(--fonts);
		}
	&.is-light{
		color: var(--txt-color);
		& bdo{
			color: var(--txt-color);
			}
		.is-simplebutton .st-button__link{
			color: var(--txt-color);
			border-bottom: 1px solid var(--txt-color);;
			&::before{
				color: var(--txt-color);
				}
			&:visited{
				color: var(--txt-color);
				}
			&:hover {
				color: var(--txt-color);
				border-bottom: 1px solid var(--txt-color);
				opacity: .5;
				}
			&:hover::before{
				color: var(--txt-color);
				}
			}
		}
	&.is-dark{
		color: #fff;
		    text-shadow: 0px 0px 10px #000000cc;
		& bdo{
			color: #fff;
			}
		.is-simplebutton .st-button__link{
			color: #fff;
			border-bottom: 1px solid #fff;
			&::before{
				color: #fff;
				}
			&:visited{
				color: #fff;
				}
			&:hover {
				color: #fff;
				border-bottom: 1px solid #fff;
				opacity: .5;
				}
			&:hover::before{
				color: #fff;
				}
			}
		}
	&:has(.st-post-title){
		}
	}
.st-columns{
	gap: var(--gapl) var(--gap);
	align-items: start;
	margin: var(--gap) 0;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& > .st-column:empty{
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		}
	&.is-column4{
		& > .st-column{
			flex-basis: calc( 25% - var(--gap)*3/4 );
			}
		&:not(:has(.st-column:nth-child(4))){
			justify-content: center;
			}
		}
	&.is-column3{
		& > .st-column{
			flex-basis: calc( 33% - var(--gap)*2/3 );
			}
		&:not(:has(.st-column:nth-child(3))){
			justify-content: center;
			}
		}
	&.is-column2{
		gap: var(--gap);
		& > .st-column{
			flex-basis: calc( 50% - var(--gap)*1/2 );
			}
		&:not(:has(.st-column:nth-child(2))){
			justify-content: center;
			}
		}
	&.is-column1{
		flex-wrap: wrap;
		justify-content: center;
		& > .st-column{
			flex: 1 1 100%;
			}
		}
	&.is-column12{
		& > .st-column:first-child{ flex-basis: 30%; }
		& > .st-column:last-child{ flex-basis: calc( 70% - var(--gap) ); }
		}
	&.is-column21{
		& > .st-column:first-child{ flex-basis: calc( 70% - var(--gap) ); }
		& > .st-column:last-child{ flex-basis: 30%; }
		}
	}
.post-title{
	&:has(+.st-cover .st-post-title){
		display: none;
		}
	}
.st-buttons {
	margin: var(--gap) 0;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	&.is-flex{
		gap: var(--gaps) var(--gap);
		}
	.st-button__link{
		text-align: left;
		text-decoration: none;
		outline: none;
		padding: var(--gaps) 50px var(--gaps) 30px;
		line-height: 1.6;
		z-index: 2;
		vertical-align: middle;
		max-width: 100%;
		min-width: unset;
		position: relative;
		border-radius: 5px;
		transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		font-family: var(--serif);
		color: var(--bg-color1);
		border: 1px solid var(--txt-color);
		background-color: var(--txt-color);
		text-decoration: none;
		font-size: var(--fonts);
		display: block;
		&::before{
			font-family: 'Material Symbols Outlined';
			font-weight: normal;
			font-style: normal;
			display: inline-block;
			vertical-align: middle;
			-webkit-font-feature-settings: 'liga';
			-webkit-font-smoothing: antialiased;
			font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
			content: "arrow_right_alt";
			font-size: 20px;
			line-height: 1;
			color: var(--bg-color1);
			position: absolute;
			right: 10px;
			top: 50%;
			margin-top: -10px;
			transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
			}
		&:has(.material-symbols-outlined){
			display: flex;
			gap: 4px;
			align-items: center;
			justify-content: center;
			padding: var(--gaps) 30px;
			}
		&:has(.material-symbols-outlined)::before{
			display: none;
			}
		.text{
			}
		.plus{
			white-space: nowrap;
			}
		&[target="_blank"]::before {
			content: "arrow_outward";
			}
		&[target="_blank"]::after {
			display: none;
			}
		&:visited{
			color: var(--bg-color1);
			}
		&:hover {
			color: var(--bg-color1);
			background-color: var(--accent-color2);
			border: 1px solid var(--accent-color2);
			}
		&:hover::before{
			right: 5px;
			color: var(--bg-color1);
			}
		}
	.is-outline{
		.st-button__link{
			color: var(--txt-color);
			border: 1px solid var(--border-color3);
			background-color: var(--bg-color1);
			text-shadow: none;
			&::before{
				color: var(--border-color3);
				}
			&:visited{
				color: var(--txt-color);
				}
			&:hover {
				color: var(--bg-color1);
				background-color: var(--border-color3);
				}
			&:hover::before{
				right: 5px;
				color: var(--bg-color1);
				}
			}
		}
	.is-simplebutton{ 
		.st-button__link{
			border-radius: 0;
			padding: var(--gapxs) 30px var(--gapxs) 0;
			font-size: var(--fonts);
			color: var(--txt-color2);
			border: none;
			border-bottom: 1px solid var(--border-color1);
			background-color: transparent;
			&::before{
				right: 0;
				color: var(--txt-color3);
				}
			&:visited{
				color: var(--txt-color3);
				}
			&:hover {
				color: var(--txt-color);
				background-color: transparent;
				border-bottom: 1px solid var(--txt-color);
				}
			&:hover::before{
				right: 0;
				color: var(--txt-color);
				}
			}
		}
	.is-cart1{
		.st-button__link{
			color: var(--bg-color1);
			border: none;
			background-color: var(--accent-color5);
			padding: var(--gaps);
			&:hover {
				opacity: .7;
				}
			}
		}
	.is-cart2{
		.st-button__link{
			color: var(--bg-color1);
			border: none;
			background-color: var(--accent-color6);
			padding: var(--gaps);
			&:hover {
				opacity: .7;
				}
			}
		}
	.is-next{
		.st-button__link{
			color: var(--txt-color);
			border: none;
			background-color: var(--accent-color2);
			color: var(--bg-color1);
			font-size: var(--font);
			min-width: 240px;
			&::before{
				color: var(--bg-color1);
				}
			&:visited{
				color: var(--bg-color1);
				}
			&:hover {
				opacity: .7;
				}
			}
		}
	.is-back{
		}
	.is-icon{
		background: transparent ;
		margin: 0;
		padding: 0;
		.st-button__link{
			border-radius: 0;
			padding: 0;
			border: none;
			background: transparent;
			color: var(--txt-color);
			text-align: center;
			display: block;
			.material-symbols-outlined{
				font-size: 30px;
				display: block;
				}
			& i{
				display: inline-block;
				font-size: 12px;
				white-space: nowrap;
				line-height: 1.6;
				}
			.count{
				display: block;
				background: var(--accent-color1);
				color: var(--bg-color1);
				font-size: 11px;
				width: 18px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				border-radius: 10px;
				position: absolute;
				right: 5px;
				top: 0;
				}
			&::before{
				display: none;
				}
			&:visited{
				color: var(--txt-color);
				}
			&:hover {
				color: var(--accent-color1);
				background: transparent;
				border: none;
				}
			}
		}
	&.is-pagelink{
		background: var(--bg-color3);
		margin: 0;
		padding: var(--gap) 5vw;
		.st-button__link{
			border-radius: 0;
			padding: 0;
			font-size: var(--fonts);
			color: var(--txt-color2);
			border: none;
			background-color: transparent;
			&::before{
				display: none;
				}
			&:visited{
				color: var(--txt-color3);
				}
			&:hover {
				color: var(--txt-color);
				background-color: transparent;
				}
			}
		}
	}
.st-table{
	margin: var(--gap) 0;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& figcaption{
		}
	& table{
		width: 100%;
		border: 0;
		border-spacing: 0;
		height: auto !important;
		border-top: 1px solid var(--border-color1);
		}
	& thead{
		border: unset;
		}
	& th{
		border-bottom: 1px solid var(--border-color1);
		background: var(--bg-color3);
		font-weight: normal;
		}
	& th,
	& td{
		padding: var(--gap) var(--gaps);
		border: none;
		border-bottom: 1px solid var(--border-color1);
		width: auto;
		vertical-align: top;
		}
	&.is-stripes{
		& table{
			border-top: unset;
			}
		& th,
		& td{
			padding: var(--gaps);
			border: unset;
			}
		& th{
			background-color: var(--bg-color1);
			border-bottom: 1px solid var(--border-color1);
			}
		& table tr:nth-child(odd) {
		    background-color: var(--bg-color3);
			}
		}
	&.is-leftth{
		& table{
			border-top: unset;
			}
		& td{
			border-bottom: 1px solid var(--border-color1);
			}
		& td:first-child,
		& th{
			width: 30%;
			text-align: center;
			font-family: var(--serif);
			border-bottom: 1px solid var(--accent-color1);
			}
		}
	&.is-leftths{
		& table{
			border-top: unset;
			}
		& td{
			border-bottom: 1px solid var(--border-color1);
			padding: var(--gaps);
			}
		& td:first-child{
			width: 30%;
			text-align: left;
			font-family: var(--serif);
			border-bottom: 1px solid var(--accent-color1);
			color: var(--accent-color2);
			}
		}
	&.is-simple{
		& table{
			border: 2px solid var(--accent-color1);
			}
		& td{
			border: none;
			border-top: 1px solid var(--accent-color1);
			border-left: 1px dotted var(--accent-color1);
			padding: var(--gaps);
			}
		& td:first-child{
			width: 30%;
			text-align: center;
			font-family: var(--serif);
			color: var(--accent-color2);
			border-left: none;
			}
		& tr:first-child td{
			border-top: none;
			}
		& td:empty{
			border-top: none;
			}
		}
	}
.st-image{
	margin: var(--gap) 0;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	& figcaption {
		color: var(--txt-color);
		font-size: var(--font);
		font-family: var(--serif);
		text-align: center;
		}
	& a{
		display: block;
		}
	}
.st-media-text{
	margin: 0;
	direction: ltr;
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	&.is-vertically-aligned-top .st-media-text__content{ align-self: start; }
	&.is-vertically-aligned-middle .st-media-text__content{ align-self: center; }
	&.is-vertically-aligned-bottom .st-media-text__content{ align-self: end; }
	.st-media-text__content{
		padding: var(--gapl);
		padding-right: 0;
		}
	.st-media-text__media{
		overflow: hidden;
		}
	.st-media-text__media a:hover img{
		transform: scale(1.1);
		transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		}
	&.has-media-on-the-right {
	    grid-template-columns: 1fr 50%;
		.st-media-text__content{
		    grid-column: 1;
		    grid-row: 1;
			padding: var(--gapl);
			padding-left: 0;
			}
		.st-media-text__media{
		    grid-column: 2;
		    grid-row: 1;
			}
		}
	}
@media screen and (max-width: 781px) {
.st-cover{
	min-height: 300px;
	}
.st-columns{
	&.is-column4,
	&.is-column3{
		& > .st-column{
			flex-basis: calc( 50% - var(--gap)*1/2 );
			}
		}
	}
.st-media-text{
	grid-template-columns: 100% !important;
	margin-bottom: var(--gap);
	.st-media-text__content{
		padding: 0 !important;
		grid-column: 1 !important;
		grid-row: 2 !important;
		}
	.st-media-text__media{
		grid-column: 1 !important;
		grid-row: 1 !important;
		text-align: center;
		margin-bottom: var(--gaps);
		}
	}
}
@media screen and (max-width: 599px) {
.st-cover{
	min-height: 300px;
	&.has-parallax{
		.st-cover__image-background{
			background-attachment:unset;
			}
		}
	}
.st-columns{
	&.is-column2,
	&.is-column3{
		& > .st-column{
			flex-basis: 100%;
			}
		}
	&.is-column12,
	&.is-column21{
		gap: var(--gap);
		& > .st-column:first-child{ flex-basis: 100%; }
		& > .st-column:last-child{ flex-basis: 100%; }
		}
	}
.st-buttons {
	.is-cart1,
	.is-cart2{
		.st-button__link{
			padding: var(--gapxs) var(--gaps);
			}
		}
	}
}
.st-separator{
	margin: var(--gapl) auto;
	display: block;
	width: 100px;
	height: 1px;
	border: none;
	border-bottom: 1px solid var(--border-color3);
	&.is-wide{
		width: 100%;
		border-bottom: 1px solid var(--border-color1);
		}
	&.is-dots{
		margin: var(--gaps) 0;
		width: 100%;
		border-bottom: 3px dotted var(--border-color1);
		}
	}
.st-embed{
	&.st-embed-youtube.aspect-16-9{
		.st-embed__wrapper {
			width: 100%;
			aspect-ratio: 16 / 9;
			}
		& iframe {
			width: 100%;
			height: 100%;
			}
		}
	}
.st-spacer{
	}
.st-social-links{
	justify-content: center;
	gap: var(--gaps);
	}
.textshadow1{
	text-shadow: 0px 0px 10px #000;
	}
.iconfree{
	padding-left: 50px;
	background: url(images/free.svg) no-repeat 0 center;
	letter-spacing: .14rem;
	background-size: 36px;
	}
.iconfreeblack{
	padding-left: 50px;
	background: url(images/free2.svg) no-repeat 0 center;
	letter-spacing: .14rem;
	background-size: 36px;
	}
.is-wordwrap{
	border: 1px solid #fff;
	padding: 0 20px;
	display: inline-block;
	border-radius: 20px;
	font-family: var(--serif);
	margin: var(--gaps) 0;
	}
.is-wordwrap2{
	background: var(--accent-color5);
	color: #fff;
	padding: 4px 15px;
	display: inline-block;
	border-radius: 5px;
	font-family: var(--serif);
	margin: var(--gaps) 0;
	}
.is-wordpoint{
	font-family: var(--serif);
	color: var(--accent-color2);
	}
.is-subtext{
	color: var(--txt-color3);
	}
.is-filter1:not(.st-media-text),
.is-filter1.st-media-text .st-media-text__media{
	filter: saturate(80%);
	background: #a7c0d3;
	& img { mix-blend-mode: multiply; min-width: 100%; min-height: 100%; }
	& .st-cover__image-background { mix-blend-mode: multiply; }
	}
.is-filter2:not(.st-media-text),
.is-filter2.st-media-text .st-media-text__media{
	filter: saturate(80%);
	background: #d8cec7;
	& img { mix-blend-mode: multiply; min-width: 100%; min-height: 100%; }
	& .st-cover__image-background { mix-blend-mode: multiply; }
	}
.is-filter3:not(.st-media-text),
.is-filter3.st-media-text .st-media-text__media{
	filter: saturate(80%);
	background: #aeb7af;
	& img { mix-blend-mode: multiply; min-width: 100%; min-height: 100%; }
	& .st-cover__image-background { mix-blend-mode: multiply; }
	}
.is-filter4:not(.st-media-text),
.is-filter4.st-media-text .st-media-text__media{
	filter: saturate(80%);
	opacity: .8;
	background: #fff;
	& img { min-width: 100%; min-height: 100%; }
	}
.is-serif{ font-family: var(--serif); }
.is-sans-serif{ font-family: var(--sans-serif);}
.is-lang{
	font-family: var(--lang);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.2;
	letter-spacing: .05rem;
	}
.is-langupper{
	font-family: var(--lang);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.2;
	letter-spacing: .05rem;
	text-transform: uppercase;
	}
.is-spacers{ height: var(--gaps) !important; }
.is-spacerm{ height: var(--gap) !important; }
.is-spacerl{ height: var(--gapl) !important; }
.is-spacerxl{ height: var(--gapxl) !important; }
.gridimglink.st-group{
	gap: var(--gapxs);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	.imgontxt{
		position: relative;
		.st-image{
			margin: 0;
			overflow: hidden;
			height: 100%;
			box-sizing: border-box;
			& a{
				display: block;
				height: 100%;
				}
			}
		.st-group{
			position: absolute;
			width: 100%;
			height: auto;
			left: 0;
			top: 0;
			padding: var(--gap);
			text-align: left;
			color: #fff;
			pointer-events: none;
			&.bottom{
				top: unset;
				bottom: 0;
				}
			}
		}
	.imgontxt:hover img{
		transform: scale(1.1);
		transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		}
	.st-group.is-grid{
		gap: var(--gapxs);
		.imgontxt{ 
			.st-group{
				padding: var(--gaps);
				}
			&:nth-child(3) .st-group,
			&:nth-child(4) .st-group{
				top: unset;
				bottom: 0;
				}
			}
		}
	.link1{
		margin-bottom: var(--gaps);
		padding-bottom: var(--gaps);
		border-bottom: 1px solid var(--border-color2);
		position: relative;
		&::after{
			font-family: 'Material Symbols Outlined';
			font-weight: normal;
			font-style: normal;
			display: inline-block;
			vertical-align: middle;
			-webkit-font-feature-settings: 'liga';
			-webkit-font-smoothing: antialiased;
			font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
			content: "arrow_right_alt";
			font-size: 20px;
			line-height: 1;
			color: var(--border-color2);
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -10px;
			transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
			}
		}
	.imgundertxt{
		text-align: left;
		padding: var(--gaps);
		h4{
			font-size: var(--font);
			font-weight: normal;
			border: none;
			padding: 0;
			}
		p{
			font-size: var(--fonts);
			color: var(--txt-color2);
			}
		}
	}
	@media screen and (max-width: 781px) {
		.gridimglink.st-group{
			grid-template-columns: repeat(2, minmax(0, 1fr));
			}
	}
/* --------------------------------------------------- form */
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"]{
	border: 1px solid var(--border-color1);
	background: var(--bg-color1);
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 2px;
	font-size: 1rem;
	max-width: 100%;
	font-family: inherit;
	box-sizing: border-box;
	padding: .5rem 1rem;
	outline: 0;
	}
input[type="radio"],
input[type="checkbox"]{
	margin: 0 10px;
	}
textarea {
	height: auto;
	line-height: 1.8;
	width: 100%;
	padding: .5rem 1rem;
	}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
input.input-text:focus {
	border-color: #000;
	outline: 0;
	}
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="color"]:disabled{
	background: #f2f2f2;
	cursor: no-drop;
	}
input.required {
	background-color: var(--bg-color5);
	}
input.valid {
	background-color: var(--bg-color4);
	border: 1px solid var(--border-color3);
	}
input.error {
	background-color: var(--bg-color5);
	border: 1px solid var(--accent-color4);
	}
.input-required,
.input-may-required{
	font-size: var(--fontxs);
	color: var(--accent-color4);
	border: 1px solid var(--accent-color4);
	padding: 0 4px;
	white-space: nowrap;
	}
.input-may-required{
	opacity: .5;
	}
select {
	border: 1px solid var(--border-color1);
	background: var(--bg-color1);
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	color: var(--txt-color);
	font-size: 1rem;
	max-width: 100%;
	font-family: inherit;
	border-radius: 2px;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: .5rem 1rem;
	}
select:focus {
	border-color: #000;
	}
button{
	padding: 14px 20px;
	vertical-align: middle;
	max-width: 100%;
	position: relative;
	border-radius: 5px;
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	font-family: var(--serif);
	font-size: var(--font);
	color: var(--bg-color1);
	border: 1px solid var(--accent-color2);
	background: var(--accent-color2);
	min-width: 240px;
	text-align: center;
	cursor: pointer;
	line-height: 1.6;
	letter-spacing: .05rem;
	box-sizing: border-box;
	&:hover{
		background: var(--bg-color1);
		color: var(--accent-color2);
		}
	&[data-action="back"]{
		border: 1px solid #999;
		background: #999;
		}
	&[data-action="back"]:hover{
		background: var(--bg-color1);
		color: #999;
		}
	&.is-small{
		padding: 4px 10px;
		font-size: var(--fonts);
		color: var(--accent-color2);
		border: 1px solid var(--accent-color2);
		background: #fff;
		min-width: 80px;
		&:hover{
			background: var(--accent-color2);
			color: #fff;
			}
		.material-symbols-outlined{
			vertical-align: middle;
			margin-right: 2px;
			}
		}
	}
.btn-group{
	display: flex;
	gap: var(--gaps);
	}
button.btn,
a.btn{
	display: inline-block;
	padding: 14px 20px;
	vertical-align: middle;
	max-width: 100%;
	position: relative;
	border-radius: 5px;
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	font-family: var(--serif);
	font-size: var(--font);
	color: var(--bg-color1);
	border: 1px solid var(--accent-color2);
	background: var(--accent-color2);
	min-width: 240px;
	text-align: center;
	cursor: pointer;
	line-height: 1.6;
	letter-spacing: .05rem;
	box-sizing: border-box;
	&:hover{
		background: var(--bg-color1);
		color: var(--accent-color2);
		}
	&:disabled{
		pointer-events: none;
		opacity: .4;
		}
	&.btn-sm{
		padding: 4px 10px;
		font-size: var(--fonts);
		color: var(--accent-color2);
		border: 1px solid var(--accent-color2);
		background: #fff;
		min-width: 80px;
		&:hover{
			background: var(--accent-color2);
			color: #fff;
			}
		}
	&.add-item-to-cart,
	&.checkout-item,
	&.btn-add-favorite-item,
	&.btn-edit,
	&.btn-delete{
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 4px;
		&::before{
			content: "add_shopping_cart";
			display: inline-block;
		    font-family: 'Material Symbols Outlined';
		    font-weight: normal;
		    font-style: normal;
		    font-size: 24px;
		    line-height: 1;
		    letter-spacing: normal;
		    text-transform: none;
		    display: inline-block;
		    white-space: nowrap;
		    word-wrap: normal;
		    direction: ltr;
		    -webkit-font-feature-settings: 'liga';
		    -webkit-font-smoothing: antialiased;
			box-sizing: border-box;
			}
		}
	&.checkout-item::before{
		content: "shopping_cart";
		}
	&.btn-add-favorite-item{
		background: transparent;
		border: 1px solid var(--txt-color);
		color: var(--txt-color);
		padding: 8px;
		&:hover{
			border-color: var(--accent-color2);
			color: var(--accent-color2);
			}
		&::before{
			content: "heart_plus";
			}
		}
	&.btn-edit::before{
		content: "edit";
		}
	&.btn-delete::before{
		content: "delete";
		}
	}
.rpa-exclusive button.btn{
	&.add-item-to-cart{
		border-color: var(--accent-color6);
		background-color: var(--accent-color6);
		}
	&.add-item-to-cart:hover{
		background-color: var(--bg-color1);
		color: var(--accent-color6);
		}
	&.add-item-to-cart::before{
		content: "bookmark_add";
		}
	}
.inputs{ width: 100px; }
.inputm{ width: 320px; }
.inputl{ width: 450px; }
.form,
.pm-body{
	.form-note{
		margin-bottom: var(--gap);
		}
	& fieldset{
		border: none;
		margin: 0;
		padding: 0;
		&:has(legend){
			margin-top: var(--gapl);
			border-top: 1px solid var(--accent-color2);
			padding-top: var(--gap);
			}
		}
	& legend{
		background: #fff;
		padding: 0 1em;
		text-align: center;
		color: var(--accent-color2);
		position: relative;
		font-family: var(--serif);
		}
	.formrow{
		display: flex;
		gap: var(--gap);
		align-items: center;
		padding: var(--gaps) 0;
		border-bottom: 1px solid var(--border-color1);
		.input-label{
			flex: 1 1 30%;
			display: flex;
			gap: var(--gaps);
			align-items: center;
			justify-content: space-between;
			.input-name{
				}
			}
		.input-control{
			flex: 1 1 70%;
			display: flex;
			gap: var(--gaps);
			align-items: center;
			position: relative;
			.input-group{
				flex: 1 1 60%;
				& input[type=text],
				& input[type=email],
				& input[type=tel], 
				& input[type=number],
				& input[type=password] {
					width: 100%;
					}
				& label{
					display: block;
					}
				}
			.input-note{
				flex: 1 1 40%;
				font-size: var(--fontxs);
				}
			.nmessage{
				color: #fff;
				font-size: var(--fontxs);
				background: var(--accent-color4);
				padding: 2px var(--gapxs);
				position: absolute;
				left: 0;
				bottom: -2em;
				}
			}
		}
	.formrow-submit{
		margin-top: var(--gap);
		text-align: center;
		.note{
			margin-bottom: var(--gap);
			}
		.submit-note{
			margin-top: var(--gap);
			}
		}
	.reminder{
		margin-top: var(--gaps);
		text-align: center;
		font-size: var(--fonts);
		}
	.privacy-policy{
		height: 300px;
		overflow-y: scroll;
		border: 1px solid var(--border-color1);
		padding: var(--gap);
		margin-top: var(--gap);
		.head{
			font-size: var(--font);
			text-align: center;
			margin-bottom: var(--gaps);
			}
		.body{
			font-size: var(--fontxs);
			& dt{
				margin: var(--gaps) 0;
				}
			& dd{
				margin-left: var(--gaps);
					white-space: pre-line;
				}
			.sig{
				text-align: right;
				}
			}
		}
	div.btn-submit{
		margin-top: var(--gap);
		text-align: center;
		}
	div.reminder{
		margin-top: var(--gaps);
		text-align: center;
		}
	}
@media screen and (max-width: 781px) {
.form,
.pm-body{
	.formrow{
		flex-wrap: wrap;
		gap: var(--gaps);
		.input-label{
			flex: 1 1 100%;
			justify-content: start;
			}
		.input-control{
			flex: 1 1 100%;
			flex-wrap: wrap;
			gap: var(--gapxs);
			.input-group{
				flex: 1 1 100%;
				}
			.input-note{
				flex: 1 1 100%;
				}
			}
		}
	}
}
div.caution,
div.message,
div.error,
div.alert,
.signin-intro,
.purchasertag-msg,
#page-title .description{
	background: var(--bg-color3);
	border: 1px solid var(--border-color1);
	padding: var(--gap);
	font-size: var(--fonts);
	box-sizing:border-box;
	padding-left: calc( var(--gap) * 2 + var(--gapxs) );
	position: relative;
	margin: var(--gap) 0;
	&:first-child{ margin-top: 0; }
	&:last-child{ margin-bottom: 0; }
	&:has( + #page-title){margin-top: var(--gap);}
	&::empty{
		display: none;
		}
	& h2{
		font-size: var(--fontm);
	    border-bottom: 1px solid var(--border-color1);
	    padding-bottom: var(--gaps);
	    margin: 0 0 var(--gaps);
	    font-weight: normal;
		}
	&::before{
		content:"warning";
		font-family: 'Material Symbols Outlined';
	    font-weight: normal;
	    font-style: normal;
		font-size: var(--gap);
		color: var(--accent-color2);
		position: absolute;
		top: var(--gap);
		left: var(--gap);
		opacity: .5;
	    line-height: 1;
	    letter-spacing: normal;
	    text-transform: none;
	    display: inline-block;
	    white-space: nowrap;
	    word-wrap: normal;
	    direction: ltr;
	    -webkit-font-feature-settings: 'liga';
	    -webkit-font-smoothing: antialiased;
		}
	&:has(h2){
		padding-left: calc( var(--gap) + var(--gapl) + var(--gapxs) );
		}
	&:has(h2)::before{
		font-size: var(--gapl);
		margin-top: -4px;
		}
	}
#container > div.error:first-child {
    margin-top: 40px;
}
#page-title .description{
	margin: 0 auto var(--gapl) !important;
	}
div.message{
	background: var(--bg-color6);
	border: 1px solid var(--accent-color3);
	&::before{
		content:"info" !important;
		color: var(--accent-color6) !important;
		}
	}
div.error,
.purchasertag-msg{
	background: var(--bg-color5);
	border: 1px solid var(--accent-color4);
	&::before{
		content:"error" !important;
		color: var(--accent-color4) !important;
		}
	& div{
		border: none !important;
		background: none !important;
		padding: 0 !important;
		}
	}
div.alert{
	background: var(--bg-color5);
	border: 1px solid var(--accent-color4);
	&::empty{
		display: none;
		}
	&::before{
		content:"error" !important;
		color: var(--accent-color4) !important;
		}
	}
div.empty,
div.alert-cart-empty,
div.msg-not-reviewed{
	border: 3px dotted var(--border-color1);
	text-align: center;
	background: none;
	color: var(--border-color1);
	font-weight: bold;
	padding: var(--gapl);
	&::before{
		display: none !important;
		}
	}
#close-account-request-processing{
	background: var(--bg-color5);
	border: 1px solid var(--accent-color4);
	padding: var(--gaps) var(--gap);
	font-size: var(--fonts);
	box-sizing:border-box;
	position: relative;
	margin: var(--gap) 0;
	}
.unmask-pass{
	cursor: pointer;
	& span{
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		overflow: hidden;
		margin-top: -44px;
		}
	& span::before{
		font-family: 'Material Symbols Outlined';
		font-weight: normal;
		font-style: normal;
		display: inline-block;
		vertical-align: middle;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
		font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
		font-size: 30px;
		line-height: 1;
		color: var(--txt-color3);
		transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		}
	.label-unmask::before{
		content: "visibility";
		}
	.label-mask::before{
		content: "visibility_off";
		}
	}
input[type=password]:has( + .password-str-meter){
	padding-right: 40px;
	}
@media screen and (max-width: 599px) {
.unmask-pass{
	& span{ margin-top: -40px; }
	}
}
/* --------------------------------------------------- splide */
.splide{
	.splide__slide{
		opacity: .8;
		transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		}
	.splide__slide.is-active{
		opacity: 1;
		}
	.splide__arrow {
	    background: none;
	    border-radius: 0;
	    cursor: pointer;
	    width: 50px;
	    height: 50px;
	    opacity: 1;
	    padding: 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    min-width: unset;
		}
	.splide__arrow svg{
		display: none;
		}
	.splide__arrow::before{
		content: "";
		width: 24px;
		height: 24px;
		transform: rotate(45deg);
		}
	.splide__arrow--prev::before{
		border-bottom: 2px solid var(--bg-color1);
		border-left: 2px solid var(--bg-color1);
		}
	.splide__arrow--next::before{
		border-top: 2px solid var(--bg-color1);
		border-right: 2px solid var(--bg-color1);
		}
	.splide__pagination {
		position: absolute;
		bottom: 20px;
		padding: 0;
		gap: 15px;
		}
	.splide__pagination__page {
		background: var(--border-color3);
		border: 0;
		border-radius: 0;
		display: inline-block;
		width: 10px;
		height: 10px;
		margin: 0;
		opacity: 1;
		padding: 0;
		min-width: unset;
		border-radius: 5px;
		}
	.splide__pagination__page.is-active {
		background: var(--accent-color2);
		transform: unset;
		z-index: 1
		}
	}
/* --------------------------------------------------- image aspect*/
.aspect{
	width: 100%;
	overflow: hidden;
	position: relative;
	&.aspect1-1{
		aspect-ratio: 1 / 1;
		}
	&.aspect16-9{
		aspect-ratio: 16 / 9;
		}
	& a{
		display: block;
		width: 100%;
		height: 100%;
		}
	& img{
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		display: block;
		padding: 0;
		z-index: 0;
		box-sizing: border-box;
		object-fit: cover;
		object-position: center;
		}
	&.cover img{
		object-fit: cover;
		}
	& iframe{
		width: 100%;
		height: 100%;
		}
	}
/* --------------------------------------------------- other common */
body:not(.top,.freepage) #outer,
body:where(.top,.freepage) #outer #container .sc,
body:where(.top,.freepage) #outer #page_aside2 .sc{
	width: var(--wt);
	max-width: var(--wtm);
	text-align: left;
	margin: 0 auto var(--gapxl);
	}
body:not(.top,.freepage) #outer:not(:has(#page-title)){
	margin-top:var(--gapxl);
	}
body#item #outer{
	margin: 0 auto var(--gapxl) !important;
	}
body#itemlist #outer{
	display: flex;
	gap: var(--gapl);
	align-items: start;
	margin: var(--gapxl) auto !important;
	#site_aside1{ flex: 0 0 20%; }
	#mid{ flex: 1 1 70%; }
	}
body:not(.top,.freepage) #outer #page-title{
	& h1{
	    text-align: center;
		margin: var(--gapxl) auto var(--gapl);
		}
	& + .form-note,
	& + .note{
		margin-bottom: var(--gap) !important;
		}
	}
.sc-display{
	padding: var(--gapxl) 0;
	&:has( + .is-constrained),
	&:has( + .sc-display){
		margin-bottom: 0 !important;
		}
	& + .is-constrained,
	& + .sc-display{
		padding-top: 0;
		}
	.panel-heading{
		.display-name{
			display: none;
			}
		margin-bottom: var(--gapl);
		}
	.panel-body{
		.item-display{
			display: grid;
			gap: var(--gap);
			grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
		    container-type: inline-size;
			}
		}
	}
@media screen and (max-width: 781px) {
body#itemlist #outer{
	display: block;
	}
}
@media screen and (max-width: 599px) {
.sc-display{
	.panel-body{
		.item-display{
			grid-template-columns: repeat(1, minmax(0, 1fr));
			}
		}
	}
}
/* is-wrap3 */
.signin-form,
.signup-form,
.exag-signin,
.form-body,
.form-order-signin,
.form-order-signup,
#default-payment-entry,
#add-new-payment-method,
#select-payment-method,
#current-rp-payment,
#update-rp-payment,
.points-summary,
.account-point,
.edit-account-properties-form,
#main-cart,
#main-cart-saved,
form.order-inq,
#news #page-wrapper,
#order__complete .request-paymentmethod-reset,
#reminder-done{
	border: 1px solid var(--border-color1);
	padding: var(--gapl) var(--gap);
	border-radius: 10px;
	box-shadow: 0 0 10px var(--border-color1);
	margin-bottom: var(--gapl) !important;
	box-sizing: border-box;
	& h3{
		text-align: center;
		}
	.form-body{
		border: none;
		padding: 0;
		border-radius: unset;
		box-shadow:unset;
		margin-bottom: 0 !important;
		}
	}
#account__close_account,
#order__confirm,
#order__payment{
	.form-body{
		border: none;
		padding: 0;
		border-radius: unset;
		box-shadow:unset;
		margin-bottom: 0 !important;
		}
	}
/* panel */
*:not(.sc,.write-review) > .panel{
	border: 1px solid var(--border-color1);
	position: relative;
	box-sizing: border-box;
	&:has(.body){
		& > .header{
			background: var(--accent-color5);
			color: #fff;
			padding: var(--gaps) var(--gap);
			font-family: var(--serif);
			}
		& > .body{
			padding: var(--gaps) var(--gap);
			}
		& > .control{
			position: absolute;
			top: var(--gaps);
			right: var(--gaps);
			margin-top: -4px;
			}
		}
	&:has(.panel-body){
		margin-bottom: var(--gapl);
		& > .panel-heading{
			background: var(--accent-color1);
			padding: var(--gap);
			display: flex;
			gap: var(--gaps);
			justify-content: space-between;
			& > div{
				text-align: center;
				flex: 1 1 20%;
				}
			& h5{
				font-size: var(--font);
				color: var(--txt-color);
				margin: 0;
				font-family: var(--sans-serif);
				}
			}
		& > .panel-body{
			margin: var(--gap) var(--gap);
			}
		& > .panel-footer{
			margin: var(--gap) var(--gap);
			}
		}
	.panel-body .btn,
	.panel-heading a,
	.panel-heading button,
	.panel-footer:not(.order-buttons) .btn,
	.control .btn,
	.itemdetails button.btn{
	    display: inline-block;
	    vertical-align: middle;
	    max-width: 100%;
	    position: relative;
	    border-radius: 5px;
	    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	    font-family: var(--serif);
	    text-align: center;
	    cursor: pointer;
	    line-height: 1.6;
	    letter-spacing: .05rem;
	    box-sizing: border-box;
		padding: 4px 10px;
		font-size: var(--fonts);
		color: var(--accent-color2);
		border: 1px solid var(--accent-color2);
		background: #fff;
		min-width: 150px;
		&:hover{
			background: var(--accent-color2);
			color: #fff;
			}
		}
	}
@media screen and (max-width: 781px) {
*:not(.sc,.write-review) > .panel{
	&:has(.panel-body){
		& > .panel-heading{
			flex-wrap: wrap;
			& > div{
				text-align: left;
				flex: 1 1 100%;
				display: flex;
				gap: var(--gaps)
				}
			& h5{
				flex-basis: 40%;
				}
			}
		}
	}
}
.item-tags{
	display: flex;
	gap: var(--gaps);
	.item-tag{
		display: inline-block;
		font-size: var(--fontxs);
		padding: 1px var(--gapxs);
		margin: var(--gapxs) 0;
		background-color: #fff;
		color: var(--accent-color3);
		border:1px solid var(--accent-color3);
		border-radius:2px;
		width: auto;
		}
	}
.onetime-message{
	width: 100vw !important;
	max-width: unset !important;
	text-align: center !important;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	background: #ffc69e80;
    backdrop-filter: blur(10px);
	padding: var(--gaps) 0;
    font-family: var(--serif);
    font-size: var(--fonts);
	.msg{
		max-width: var(--wtw);
		margin: 0 auto;
		}
	}
.product-small{
	.st-image{
		margin-bottom: var(--gaps);
		}
	.code{
		color: var(--txt-color3);
		}
	.name{
		margin: 0;
		font-weight: bold;
		margin-top: var(--gapxs);
		}
	.name a{
		color: var(--txt-color);
		}
	.sub-2{
		display: block;
		font-size: var(--fonts);
		font-family: var(--sans-serif);
		font-weight: normal;
		margin-top: var(--gapxs);
		color: var(--txt-color2);
		letter-spacing: 0;
		}
	.pricetitle1{
		color: var(--accent-color5);
		line-height: 1;
		}
	.pricetitle2{
		color: var(--accent-color6);
		line-height: 1;
		}
	.price{
		& strong{
			font-size: var(--fontm);
			margin-right: 2px;
			font-weight: normal;
			color:var(--txt-color);
			}
		.mark{
			color:var(--txt-color);
			font-size: var(--fontss);
			}
		.tax{
			color:var(--txt-color);
			font-size: var(--fontss);
			white-space: nowrap;
			}
		}
	.st-columns{
		margin: var(--gaps) 0 0;
		padding-top: var(--gaps);
		border-top: 1px solid var(--border-color1);
		gap: 0;
		}
	.st-buttons, .st-button{
		display: block;
		}	
	.st-button__link{
		width: 100%;
		}
	}
@media screen and (max-width: 599px) {
.product-small{
	display: flex;
	gap: var(--gap);
	align-items: start;
	justify-content: space-between;
	padding-bottom: var(--gap);
	border-bottom: 1px solid var(--border-color1);
	.st-image{
		margin-bottom: 0;
		flex: 1 1 40%;
		}
	.cont{
		flex: 1 1 60%;
		}
	.st-columns{
		display: block;
		margin: var(--gaps) 0 0;
		padding-top: 0;
		border-top: 0;
		}
	.st-column:has(.price){
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gaps);
		margin-bottom: var(--gapxs);
		}
	}
}
.category-small{
	text-align: center;
	.st-image{
		margin: 0 auto;
		}
	.name{
		margin: var(--gaps) 0 0;
		}
	.name a{
		color:var(--txt-color);
		}
	}
.pagination{
	& ul{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--gaps);
		}
	& li a{
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		border: 1px solid var(--border-color1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--txt-color3);
		background: var(--bg-color1);
		font-family: var(--lang);
		font-size: var(--fontm);
		}
	& li a:hover{
		background: var(--bg-color3);
		}
	& li.disabled{
		display: none;
		}
	& li.active a{
		border: 1px solid var(--accent-color1);
		background: var(--accent-color1) !important;
		color: #fff;
		}
	}
.breadcrumbs{
	border-bottom: 1px solid var(--border-color1);
	padding: var(--gaps) 0;
	& ul{
		max-width: var(--wtm);
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		font-size: var(--fontxs);
		font-family: var(--serif);
		border: none;
		padding: 0;
		& li{
			}
		& li:has(a)::after{
			content: "/";
			color: var(--border-color1);
			display: inline-block;
			margin: 0 var(--gapxs);
			}
		}
	}
.breadcrumb{
	border-bottom: 1px solid var(--border-color1);
	padding: var(--gaps) 0;
	& ol{
		max-width: var(--wtm);
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		font-size: var(--fontxs);
		font-family: var(--serif);
		& li{
			}
		& li:has(a)::after{
			content: "/";
			color: var(--border-color1);
			display: inline-block;
			margin: 0 var(--gapxs);
			}
		}
	}