@charset "UTF-8";
/* CSS Document */
#wrapper{
	padding-top: 85px;
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	}
#globalheader{
	position: fixed;
	z-index: 1000;
	width: 100vw;
	top: 0;
	left: 0;
	background: #ffffff66;
	backdrop-filter: blur(10px);
	.is-constrained{
		padding: 0;
		gap: var(--gaps);
		justify-content:space-between;
		}
	.sitetitle{
		gap: var(--gaps);
		.title{
			font-size: var(--fontxs);
			font-family: var(--serif);
			color: var(--txt-color);
			font-weight: bold;
			}
		}
	nav.nav-main{
		& > ul{
			font-size: var(--fonts);
			font-family: var(--serif);
			}
		& a{
			display: block;
			color: var(--txt-color);
			padding: var(--gap) 0;
			position: relative;
			}
		& a::before{
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 3px;
			background: var(--accent-color1);
			transform: scale(0, 1);
			transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
			}
		& a:hover::before,
		& .current a::before{
			transform: scale(1);
			}
		}
	#searchbox{
		width: 22vw;
		}
	.st-buttons{
		gap: var(--gaps);
		margin: 0;
		}
	.menu-trigger{
		cursor: pointer;
		text-decoration: none;
		display: none;
		text-align: center;
		line-height: 1.6;
		& i{
			font-size: 12px;
			font-family: var(--serif);
			color: var(--txt-color);
			white-space: nowrap;
			display: inline-block;
			line-height: 1.6;
			.close{
				display: none;
				}
			}
		.iconwrap,
		.iconwrap span {
			display: block;
			transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
			box-sizing: border-box;
			margin: 0 auto;
			}
		.iconwrap{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			}
		.icon{
			vertical-align: middle;
			position: relative;
			width: 20px;
			height: 18px;
			margin: 5px auto;
			cursor: pointer;
			}
		.icon span {
			position: absolute;
			left: 0;
			width: 100%;
			height: 1.5px;
			background-color: var(--txt-color);
			}
		.icon span:nth-of-type(1) {
			top: 0;
			}
		.icon span:nth-of-type(2) {
			top: 8px;
			}
		.icon span:nth-of-type(3) {
			bottom: 0;
			}
		}
	}
@media screen and (max-width: 1120px) {
#globalheader{
	padding: var(--gaps) 0;
	.nav-main, #searchbox{ display:none; }
	.menu-trigger{ display: block; }
	}
}
@media screen and (max-width: 599px) {
#wrapper{
	padding-top: 60px;
	}
#globalheader{
	.menu-trigger{
		min-width: 40px;
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		& i{ display: none; }
		}
	.st-buttons{
	    .is-icon{
			.st-button__link{
				min-width: 40px;
				min-height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				& i{ display: none; }
				}
			}
		}
	}
}
.menuopen{
	#wrapper{
		transform: translateX( min( 80vw, 300px) );
		}
	#wrapperoverlay {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgb(0 0 0 / 5%);
		}
	#globalheader .menu-trigger{
		& i{
			.close{ display: block; }
			.open{ display: none; }
			}
		.icon span:nth-of-type(1) {
			transform: translateY(8.5px) rotate(-45deg);
			}
		.icon span:nth-of-type(2) {
			opacity: 0;
			}
		.icon span:nth-of-type(3) {
			transform: translateY(-8.5px) rotate(45deg);
			}
		}
	}
#nav{
	display: block;
	position: fixed;
	z-index: 1;
	top: 0;
	left: calc( min( 80vw, 300px) * -1 );
	width: min( 80vw, 300px);
	height: 100vh;
	background: #fff;
	padding: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	.contents-wrapper{
		display: flex;
		gap: var(--gap);
		flex-wrap: wrap;
		margin: var(--gap) var(--gap) 100px;
		text-align: left;
		.category-list,
		.menulist{
			flex-basis: 100%;
			}
		.menucart{ order: 1; }
		.menusignin{ order: 2; }
		.item-search{ order: 3; }
		.category-list{ order: 4; }
		.menumypage{ order: 5; }
		.menusite{ order: 6; }
		.item-search{
			width: 100%;
			}
		.category-list .category-list-name,
		.menulist .menuname{
			font-family: var(--serif);
			font-size: var(--font);
			&:not(:has(a)),
			& a{
				display: block;
				padding: var(--gapxs);
				position: relative;
				color: var(--txt-color);
				background: var(--bg-color3);
				display: flex;
				gap: 3px;
				}
			& a:hover{
					background: var(--bg-color4);
					}
			}
		.category-list .list-items,
		.menulist ul{
			font-family: var(--serif);
			font-size: var(--fonts);
			.list-item,
			& li{
				position: relative;
			    border-bottom: 1px dotted var(--border-color1);
				& a{
					display: block;
					padding: var(--gapxs);
					position: relative;
					color: var(--txt-color);
					}
				& a:has(.badge){
					padding-right: 20px;
					}
				&.active a{
					background: var(--bg-color4);
					}
				& a:hover{
					background: var(--bg-color3);
					}
				}
			.badge{
				display: block;
				background: #b7bec4;
				color: var(--bg-color1);
				font-size: 10px;
				width: 18px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				border-radius: 10px;
				position: absolute;
				right: 5px;
				top: 50%;
				margin-top: -9px;
				}
			}
		}
	}
footer{
	background: var(--bg-color4);
	.sitetitle{
		justify-content: center;
		gap: var(--gaps);
		margin-bottom: var(--gap);
		.title{
			font-size: var(--fonts);
			font-family: var(--serif);
			color: var(--txt-color);
			font-weight: bold;
			}
		}
	.nav-footer{
		padding: 0;
		margin-bottom: var(--gapl);
		.is-flex{
			gap: var(--gaps) var(--gap);
			}
		& a{
			color: var(--txt-color);
			}
		}
	.copyright{
		padding: 0;
		color: var(--txt-color3);
		}
	}
.sc-orderentry-control {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #58738a96;
	backdrop-filter: blur(10px);
	color: #fff;
	.not-verified{
		width: auto;
        max-width: calc( var(--wtw) - 80px );
		margin: 0 auto;
		text-align: left;
		padding: var(--gaps) 80px var(--gaps) 0;
		display: flex;
		gap: var(--gap);
		align-items: center;
		justify-content: space-between;
		.msg {
		    font-size: var(--fontxs);
			}
		.signin{
			white-space: nowrap;
			}
		}
	.entrycontext-default{
		width: auto;
        max-width: calc( var(--wtw) - 80px );
		margin: 0 auto;
		text-align: left;
		padding: var(--gaps) 80px var(--gaps) 0;
		display: flex;
		gap: var(--gap);
		align-items: center;
		justify-content: space-between;
		.main{
			flex-basis: 60%;
			.description{
				font-size: var(--fontxs);
				}
			}
		.summary{
			flex-basis: 30%;
			margin-left: auto;
			& li{
				display: flex;
				align-items: center;
				}
			.total-qty{
				font-size: var(--fontxs);
				}
			.label{
				flex-basis: 50%;
				font-size: var(--fonts);
				}
			.value{
				flex-basis: 50%;
				font-family: var(--serif);
				}
			}
		.controls{
			display: flex;
			gap: var(--gaps);
			& button{
				white-space: nowrap;
				}
			}
		}
	.not-verified .signin a,
	.entrycontext-default .controls button{
		display: inline-block;
		padding: 4px 10px;
		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(--fonts);
		color: var(--accent-color2);
		border: 1px solid var(--accent-color2);
		background: #fff;
		min-width: 80px;
		text-align: center;
		cursor: pointer;
		line-height: 1.6;
		letter-spacing: .05rem;
		box-sizing: border-box;
		&:hover{
			background: var(--accent-color2);
			color: #fff;
			}
		}
	}
@media screen and (max-width: 781px) {
.sc-orderentry-control {
	.not-verified,
	.entrycontext-default{
		max-width: var(--wtm);
		padding: var(--gaps) 0;
		gap: var(--gaps);
		}
	.entrycontext-default{
		.main{
			flex: 1 1 60%;
			}
		.summary{
			flex: 1 1 20%;
			& li{
				display: block;
				}
			.label{
				display: none;
				}
			.value{
				font-size: var(--fonts);
				white-space: nowrap;
				}
			}
		.controls{
			flex: 1 1 30%;
			}
		}
	}
}
#nav-side{
	position: fixed;
	z-index: 1000;
	width: 80px;
	right: 0;
	bottom: 28px;
	overflow: hidden;
	border-radius: 5px 0 0 5px;
	.st-buttons{
		margin: 0;
		}
	.is-icon{
		margin-bottom: 2px;
		&:last-child{
			margin-bottom: 0;
			}
		.st-button__link{
			display: block;
			width: auto;
			padding: var(--gaps);
			background: var(--accent-color5);
			color: var(--bg-color1);
			&:hover{
				background: var(--accent-color1);
				}
			& i{
				margin-top: 3px;
				}
			}
		&.to-top .st-button__link{
			background: var(--bg-color4);
			color: var(--txt-color);
			font-size: var(--font);
			& i{
				display: none;
				}
			.material-symbols-outlined{
				font-size: 24px;
				}
			}
		.count{
			background: var(--bg-color1);
			color: var(--accent-color5);
			right: var(--gaps);
			top: var(--gaps);
			}
		}
	}
@media screen and (max-width: 781px) {
#nav-side{
	width: 100vw;
	right: unset;
	left: 0;
	bottom: 0;
	border-radius: 0;
	background: var(--bg-color1);
	.st-buttons{
		display: flex;
		gap: 1px;
		justify-content: space-between;
		}
	.is-icon{
		margin-bottom: 0;
		display: flex;
		flex-grow: 1;
		.st-button__link{
			flex: 1 1 100%;
			display: flex;
			& i{
				margin-top: 0;
				white-space: normal;
				& br{ display: none; }
				}
			}
		.count{ position: static; }
		}
	}
}
@media screen and (max-width: 460px) {
#nav-side .is-icon .st-button__link i br{ display: inline-block; }
}
#contactbox{
	padding: var(--gapl) 0;
	&.is-wrap3{
		padding: var(--gap);
		}
	.st-columns{
		align-items: center;
		gap: var(--gap);
		}
	.st-column{
		flex-grow: 1;
		}
	.title{
		text-align: center;
		& span{
			color: var(--accent-color2);
			font-family: var(--sans-serif);
			margin-left: 20px;
			}
		}
	.number{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--gapxs);
		letter-spacing: .2rem;
		white-space: nowrap;
		.material-symbols-outlined{
			font-size: var(--fontxl);
			}
		}
	.sub{
		text-align: center;
		color: var(--txt-color3);
		}
	}
#guidebox{
	border-top: 1px solid var(--border-color3);
	border-bottom: 1px solid var(--border-color3);
	margin-bottom: var(--gapl);
	padding: var(--gapl) 0;
	.icon .material-symbols-outlined{
		background: var(--bg-color1);
		}
	.icon a .material-symbols-outlined:hover{
		background: var(--bg-color3);
		}
	h4{
		border-bottom: none;
		font-size: var(--font);
		padding: 0;
		}
	}
#postage{
	background: var(--bg-color4);
	font-family: var(--serif);
	font-size: var(--fonts);
	.is-constrained{
		padding: calc( var(--gap) * 2 / 3 ) 0;
		}
	& strong{
		color: #1e2087;
		}
	}
@media screen and (max-width: 781px) {
#postage{
	font-family: var(--sans-serif);
	font-size: var(--fontxs);
	.is-align-center{ text-align: left;}
	}
}
/* -------- search box ---------------*/
.item-search,
.isf-keywords{
	& form{
		position: relative;
		margin: 0 auto;
		width: 100%;
		display: flex;
		border: 1px solid var(--border-color3);
		border-radius: 4px;
		overflow: hidden;
		& div{
			width: 100%;
			}
		}
	& input{
		display: block;
	    max-width: 100%;
		width: 100%;
	    height: 40px;
	    line-height: 40px;
	    padding: 0 40px 0 10px;
	    color: var(--txt-color);
	    border: none;
	    outline: none;
	    background: #fff;
		border: none;
		border-radius: 0;
	    -webkit-appearance: none !important;
		font-size: var(--fonts);
		}
	& button{
		display: block;
		padding: 0;
		width: 40px;
		height: 40px;
		border: 0;
		min-width: unset;
		border-radius: 0;
		background: transparent;
		color: var(--border-color3);
		-webkit-appearance: none !important;
		margin: 0 !important;
		position: absolute;
		top: 0;
		right: 0;
		.material-symbols-outlined{
			display: none;
			}
		&::before{
			content: "search";
			font-family: 'Material Symbols Outlined';
			font-weight: normal;
			font-style: normal;
			line-height: 40px;
			font-size: 30px;
			letter-spacing: normal;
			text-transform: none;
			display: block;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-webkit-font-feature-settings: 'liga';
			-webkit-font-smoothing: antialiased;
			}
		}
	}
.item-search-suggest{
	position: relative;
	.item-list{
		border: 1px solid var(--border-color1);
		border-top: none;
		padding-left: var(--gaps);
		position: absolute;
		width: 100%;
		z-index: 1;
		top: 0;
		left: 0;
		background: #fff;
		box-sizing: border-box;
		.item-list-each{
			display: flex;
			align-items: center;
			.item-thumbnail-img-wrapper{
				flex-basis: 20%;
				}
			.item-dtl{
				flex-basis: 80%;
				font-size: var(--fontxs);
				line-height: 1.6;
				.summary{ display: none; }
				& a{
					display: block;
					padding: var(--gapxs);
					color: var(--txt-color);
					}
				}
				.no-img{
					display: none;
					}
			}
		.view-more-items a{
			display: block;
			font-size: var(--fontxs);
			text-align: center;
			padding: var(--gaps);
			}
		}
	}
/* -------- top ---------------*/
#top_mainvisual{
	.inner{
		height: 100%;
		box-sizing: border-box;
		padding: var(--gapl);
		display: flex;
		gap: 0 var(--gapl);
		align-items: center;
		justify-content: space-between;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		}
	.img{
		order: 2;
		flex: 1 1 50%;
		text-align: center;
		}
	.cont{
		order: 1;
		flex: 1 1 50%;
		text-align: left;
		}
	.st-buttons{
		.is-outline{
			.st-button__link{
				white-space: nowrap;
				color: var(--txt-color);
				border: none;
				background-color: var(--bg-color1);
				box-shadow: 4px 4px 8px rgb(0 0 0 / 24%);
				&::before{
					color: var(--border-color3);
					}
				&:visited{
					color: var(--txt-color);
					}
				&:hover {
					color: var(--txt-color);
					background-color: var(--bg-color1);
					box-shadow: 2px 2px 4px rgb(0 0 0 / 24%);
					}
				&:hover::before{
					color: var(--border-color3);
					}
				}
			}
		}
	& p {
		margin-top: var(--gapxs);
		text-shadow: 0px 0px 10px #fff;
		}
	}
#top_topics{
	background: var(--bg-color4);
	.is-constrained{
		padding: var(--gaps) 0;
		}
	.splide__slide{
		display: flex;
		align-items: center;
		justify-content: center;
		}
	.cont{
		gap: var(--gap);
		}
	.title{
	    font-size: var(--fonts);
		& a{
			color: var(--txt-color2);
			}
		}
	}
#officiallink{
	.st-cover__inner-container{
		text-align: center;
		}
	.logowrap{
		margin-bottom: var(--gap);
		}
	}
.top-newslist{
	margin-bottom: var(--gapxl) !important;
	text-align: left;
	.panel-heading{
		display: none;
		}
	.panel-body{
		}
	}
@media screen and (max-width: 781px) {
#top_mainvisual{
	.splide__arrows{ display: none; }
	.splide__pagination{ right: var(--gap); left: unset; }
	.inner{
		flex-wrap: wrap;
		gap: 0;
		padding: var(--gap) var(--gap) var(--gapl);
		}
	.img{
		order: 1;
		flex-basis: 100%;
		text-align: right;
		& img{
			width: 60%;
			}
		}
	.cont{
		text-align: left;
		order: 2;
		flex-basis: 100%;
		margin-top: calc( var(--gapxl) * -1 );
		}
	}
#top_sublink{
	.st-columns.is-column2{
		& > .st-column{
			flex-basis: 100%;
			}
		}
	}
}
@media screen and (max-width: 599px) {
#top_mainvisual{
	.inner{
		padding: var(--gap) var(--gap) var(--gapxl);
		}
	}
#officiallink{
	& p{
		text-align: left;
		& br{ display: none; }
		}
	}
}
/* -------- item list ---------------*/
#category-txc{
	.txc-header:has(img){
		margin-bottom: var(--gaps);
		}
	.txc-description{
		font-family: var(--serif);
		}
	}
.item-list-heading{
	display: flex;
	gap: var(--gaps) var(--gap);
	align-items: center;
	justify-content:space-between;
	margin: 0;
	flex-wrap: wrap;
	.heading{
		border-bottom: none;
		border-right: 1px solid var(--border-color1);
		font-size: var(--font);
		font-family: var(--serif);
		padding: 0 var(--gaps) 0 0;
		margin: 0;
		font-size: var(--fonts);
		}
	.category-item-list-sorting{
		display: flex;
		gap: var(--gap);
		align-items: center;
		& ul{
			display: flex;
			gap: var(--gap);
			align-items: center;
			}
		& li a{
			display: block;
			padding: 7px 0 4px;
			border-bottom: 3px solid transparent;
			font-size: var(--fonts);
			}
		& li.active a{
			border-bottom: 3px solid var(--accent-color1);
			}
		}
	.page-position{
		color: var(--txt-color3);
		font-family: var(--serif);
		font-size: var(--fonts);
		text-align: right;
		flex-grow: 1;
		}
	}
#category-txc + .item-list-heading{
	margin: var(--gap) 0 0;
	}
#itemlist #container{
	.item-list{
		display: grid;
		gap: var(--gap);
		grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
		container-type: inline-size;
		margin: var(--gapl) 0;
		}
	}
#site_aside1{
	.isf-panel-heading,
	.category-list-name{
		border-bottom: none;
		background: var(--bg-color4);
		padding: var(--gapxs);
		font-size: var(--font);
		font-family: var(--serif);
		text-align: center;
		margin-bottom: var(--gaps);
		}
	.isf-heading{
		font-size: var(--fonts);
	    color: var(--accent-color2);
	    margin: var(--gaps) 0;
		font-family: var(--serif);
		font-weight: bold;
		text-align: center;
		}
	.isf-keywords{
		margin-bottom:var(--gap);
		}
	.isf-body ul{
		margin-bottom: var(--gapl);
		font-family: var(--serif);
		font-size: var(--fonts);
		& li{
			position: relative;
		    border-bottom: 1px solid var(--border-color1);
			}
		& li a{
			display: block;
			padding: var(--gapxs);
			padding-right: 20px;
			position: relative;
			color: var(--txt-color);
			}
		& li.active a{
			background: var(--bg-color4);
			}
		& li a:hover{
			background: var(--bg-color3);
			}
		}
	.isf-subcategory{
		margin-bottom: -2em;
		}
	.list-items{
		margin-bottom: var(--gapl);
		font-family: var(--serif);
		font-size: var(--fonts);
		.list-item{
			position: relative;
		    border-bottom: 1px solid var(--border-color1);
			}
		.list-item a{
			display: block;
			padding: var(--gapxs);
			padding-right: 20px;
			position: relative;
			color: var(--txt-color);
			}
		.list-item.active a{
			background: var(--bg-color4);
			}
		.list-item a:hover{
			background: var(--bg-color3);
			}
		}
	.badge{
		display: block;
		background: #b7bec4;
		color: var(--bg-color1);
		font-size: 10px;
		width: 18px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		border-radius: 10px;
		position: absolute;
		right: 5px;
		top: 50%;
		margin-top: -9px;
		}
	}
.category-item-list .breadcrumbs{
	padding-top: 0;
	margin-bottom: var(--gap);
	}
@media screen and (max-width: 599px) {
.item-list-heading{
	.heading{
		display: none;
		}
	}
#itemlist #container{
	.item-list{
		grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
		}
	}
}
@media screen and (max-width: 781px) {
body#itemlist #outer{
	margin-top: 0 !important;
	.category-item-list .breadcrumbs{
		padding-top: var(--gaps);
		}
	.item-list-heading{
		margin-top: var(--gapxl);
		}
	#site_aside1{
		display: none;
		position: fixed;
		z-index: 2;
		top: 0;
		left: calc( min( 80vw, 300px) * -1 );
		width: min( 80vw, 300px);
		height: 100vh;
		background: #fff;
		padding: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		.contents-wrapper{
			margin: var(--gap) var(--gap) 100px;
			text-align: left;
			}
		}
	}
}
/* -------- item detail ---------------*/
#item-contents-main,
#item-contents-text{
    padding: var(--gapxl) 0;
	}
#item-contents-text{
	padding-top: 0;
	}
#page_aside2{
	padding-top: 0;
	}
#item-contents-main{
	display: flex;
	gap: var(--gap) var(--gapl);
	align-items: start;
	justify-content: space-between;
	#item-contents-image{
		flex: 1 1 40%;
		position: relative;
		.item-image-main:has(+.item-image-subs),
		.item-image-subs{
			display: none;
			}
		.item-tags{
			position: absolute;
			z-index: 1;
			width: 100%;
			top: 0;
			left: 0;
			display: flex;
			gap: var(--gaps);
			.item-tag{
				display: inline-block;
				border: 1px solid var(--txt-color);
				color: var(--txt-color);
				font-size: var(--fonts);
				padding: 2px 10px;
			    background: #ffffff66;
			    backdrop-filter: blur(10px);
				margin: 0;
				}
			}
		}
	#item-contents-purchase{
		flex: 1 1 60%;
		h1.item-name{
			margin-bottom: var(--gapl);
			.item-name{
				display: block;
			    font-size: var(--fontxl);
			    font-weight: normal;
			    line-height: 1.6;
				font-family: var(--serif);
				margin-bottom: var(--gaps);
				}
			}
		.item-code{
			display: block;
			font-size: var(--font);
			font-weight: normal;
			color: var(--txt-color3);
			display: flex;
			gap: var(--gapxs);
			}
		.item-purchase-list{
	        border: 1px solid var(--border-color1);
	        background: var(--bg-color3);
	        padding: var(--gap);
	        margin: var(--gap) auto;
			div.item-purchase{
				margin-top: var(--gap);
	            padding-top: var(--gap);
	            border-top: 1px solid var(--border-color1);
				&:first-child{
					margin: 0;
					padding: 0;
					border: none;
					}
				h2.item-name{
		            font-size: var(--fontm);
		            font-weight: bold;
		            margin: 0;
					padding: 0;
					margin-bottom: var(--gaps);
					display: flex;
					gap: var(--gaps);
					align-items: start;
					.item-name{
						display: block;
						margin-bottom: var(--gapxs);
						}
					&::before{
						content: "通常購入";
						background: var(--accent-color2);
						text-align: center;
						color: var(--bg-color1);
						font-size: var(--fonts);
						padding: 4px 10px;
						display: block;
						font-weight: bold;
						font-family: var(--serif);
						white-space: nowrap;
						}
					}
				.label:not(:empty){
					margin-bottom: var(--gap);
					}
				.offering-description:not(:empty){
					margin-bottom: var(--gap);
					}
				.regular-price,
				.selling-price,
				.discount-price,
				.points{
					display: flex;
					border-bottom: 1px dotted var(--border-color1);
					padding-bottom: var(--gaps);
					margin-bottom: var(--gaps);
					}
				.price-label{
					flex-basis: 30%;
					color: var(--txt-color3);
					}
				.price{
					}
				.regular-price{
					.price{
						text-decoration: line-through;
						& strong{
							font-weight: normal;
							}
						}
					}
				.selling-price{
					.price{
						& strong{
							font-size: var(--fontxl);
							font-family: var(--serif);
							margin-right: 4px;
							color: var(--accent-color2);
							}
						}
					}
				.discount-price{
					&::before{
						content: "";
						display: block;
						flex-basis: 30%;
						}
					}
				.points{
					& span:first-child{
						flex-basis: 30%;
						}
					.points-to-grant{
						font-weight: bold;
						color: var(--accent-color2);
						}
					}
				.stock-message{
					font-size: var(--fontxs);
					color: var(--accent-color2);
					}
				.delivery-message{
					font-size: var(--fontxs);
					}
				form.item-purchase{
					margin-top: var(--gap);
					display: flex;
					align-items: center;
					button.btn{
						min-width: unset;
						width: 100%;
						}
					.item-qty{
						flex-basis: 30%;
						}
					.btn-group{
						flex-basis: 70%;
						flex-wrap: wrap;
						}
					.btn-group:has(button.btn:nth-child(2)){
						button.btn{
							width: calc( 50% - var(--gaps)/ 2 );
							}
						}
					.screen-message{
						flex-basis: 100%;
						}
					}
				}
			div.item-purchase.rpa-exclusive{
				h2.item-name{
					&::before{
						content: "定期購入";
						background: var(--accent-color6);
						}
					}
				.selling-price .price strong,
				.points .points-to-grant,
				.stock-message{
					color: var(--accent-color3);
					}
				}
			.item-add-favorite{
				margin-top: var(--gap);
	            padding-top: var(--gap);
	            border-top: 1px solid var(--border-color1);
				display: flex;
				justify-content: center;
				}
			}
		}
	.item-extra{
		.text-contents{
			& caption{
				text-align: left;
	            font-size: var(--fontm);
	            font-weight: bold;
	            margin: var(--gaps) 0;
				font-family: var(--serif);
				}
			& td{
				border-bottom: 1px solid var(--border-color1);
				padding: var(--gaps);
				}
			& th{
				width: 30%;
				text-align: left;
				font-family: var(--serif);
				border-bottom: 1px solid var(--accent-color1);
				color: var(--accent-color2);
				font-weight: normal;
				}
			}
		div.item-variation{
			margin-top: var(--gap);
			.header{
				text-align: left;
	            font-size: var(--fontm);
	            font-weight: bold;
	            margin: var(--gaps) 0;
				font-family: var(--serif);
				}
			.item-variation{
				display: grid;
				gap: var(--gap);
				grid-template-columns: repeat(3, minmax(0, 1fr));
				}
			.item-text{
				font-weight: bold;
				font-family: var(--serif);
				& a{
					color: var(--txt-color);
					}
				}
			}
		}
	}
@media screen and (max-width: 781px) {
#item-contents-main{
	flex-wrap: wrap;
	#item-contents-image{
		flex: 1 1 100%;
		text-align: center;
		.item-image-main,
		#main-carousel{
			width: 300px;
			max-width: 100%;
			margin: 0 auto;
			}
		}
	#item-contents-purchase{
		flex: 1 1 100%;
		}
	}
}
/* -------- reviews ---------------*/
#item-reviews-res{
	& h2{
	    font-size: var(--fontxl);
	    font-weight: normal;
	    line-height: 1.6;
		text-align: center;
		font-family: var(--serif);
		&::before{
			content: "reviews";
	        display: block;
	        text-transform: uppercase;
	        font-style: italic;
	        color: var(--accent-color1);
	        font-size: var(--fonts);
	        line-height: 3;
			font-family: var(--lang);
	        font-weight: normal;
	        -webkit-font-smoothing: antialiased;
	        -moz-osx-font-smoothing: grayscale;
			}
		}
	.itemreview-list-body{
		}
	.itemreview-list-footer{
		text-align: right;
		}
	}
.review-aggregation{
	display: flex;
	gap: var(--gap);
	justify-content: space-between;
	}
.rv-summary{
	flex-basis: 50%;
	border: 1px solid var(--border-color1);
	background: var(--bg-color3);
	padding: var(--gap);
	.review-avg,
	.review-count{
		display: flex;
		align-items: center;
		gap: var(--gap);
		}
	}
.rv-histgram{
	flex-basis: 50%;
	.rv-histgram-each{
		display: flex;
		align-items: center;
		gap: var(--gap);
		}
	.count{
		font-size: var(--fonts);
		}
	.percentage{
		flex: 1 1 70%;
		}
	}
.progress{
	.progress-bar{
		background: var(--accent-color4);
		line-height: 1.6;
		font-size: var(--fontxs);
		text-align: center;
		color: #fff;
		}
	}
.rv-stars{
	display: flex;
	gap: 2px;
	.rv-star{
		display: block;
		width: 16px;
		height: 16px;
		background:url(/resources/imgec/common/star1.png) no-repeat center;
		background-size: contain;
		}
	.rv-star-empty{
		background-image:url(/resources/imgec/common/star3.png);
		}
	}
.customer-review{
	display: flex;
	flex-wrap: wrap;
	gap: var(--gaps);
	margin: var(--gap) 0;
	border-bottom: 1px solid var(--border-color1);
	padding-bottom: var(--gap);
	&:last-child{
		border-bottom: none;
		padding-bottom: 0;
		}
	.heading{
		flex-basis: 100%;
		display: flex;
		align-items: center;
		gap: var(--gap);
		.subject{
			font-weight: bold;
			 font-size: var(--fontm);
			}
		.reviewer a{
			color: var(--txt-color);
			}
		.written{
			color: var(--txt-color3);
			font-family: var(--serif);
			font-size: var(--fontxs);
			}
		}
	.body{
		flex: 1 1 70%;
		}
	.images{
		flex-basis: calc( 30% - var(--gaps));
		}
	.control{
			flex-basis: 100%;
			display: flex;
			gap: var(--gaps);
			justify-content: center;
			}
	.item-review-comments{
		flex-basis: 100%;
		.comment{
			background: var(--bg-color3);
			border-left: 3px solid var(--border-color1);
			padding: var(--gap);
			margin-left: var(--gapl);
			.heading{
				flex-basis: 100%;
				display: flex;
				align-items: center;
				gap: var(--gap);
				.comment-poster a{
					color: var(--txt-color);
					}
				.date{
					color: var(--txt-color3);
					font-family: var(--serif);
					font-size: var(--fontxs);
					}
				}
			}
		}
	}
.add-new-review{
	margin-top: var(--gap);
	display: flex;
	justify-content: center;
	}
@media screen and (max-width: 781px) {
.review-aggregation{
	flex-wrap: wrap;
	}
.rv-summary{
	flex-basis: 100%;
	}
.rv-histgram{
	flex-basis: 100%;
	}
.customer-review{
	.heading{
		gap: 0 var(--gap);
		flex-wrap: wrap;
		.rate{
			flex: 0 0 20%;
			}
		.subject{
			flex: 0 0 70%;
			}
		}
	}
}
/* -------- reviews detail---------------*/
#container > .review-list .itemreview-list{
    padding: 0 0 var(--gapxl);
	.itemreview-list-heading{
		border-bottom: 1px solid var(--border-color1);
		padding-bottom: var(--gap);
		margin-bottom: var(--gapl);
		.review-aggregation{
			margin-bottom: var(--gapl);
			}
		.review-aggregation + div{
			display: flex;
	        gap: var(--gap);
	        align-items: center;
			font-size: var(--fonts);
			& div{
				display: flex;
				gap: var(--gap);
				align-items: center;
				}
			& a{
				display: block;
				padding: 7px 0 4px;
				border-bottom: 3px solid transparent;
				}
			}
		.page-position{
	        color: var(--txt-color3);
	        font-family: var(--serif);
	        font-size: var(--fonts);
			}
		}
	}
.wr-item{
	display: flex;
	gap: var(--gap);
	margin-bottom: var(--gap);
	align-items: center;
	justify-content: center;
	.col:first-child{ flex-basis: 120px; }
	.col:last-child{  }
	.item-name{
		display: block;
		font-size: var(--fontm);
		font-weight: normal;
		line-height: 1.6;
		font-family: var(--serif);
		margin-bottom: var(--gaps);
		& a{
			color: var(--txt-color);
			}
		}
	}
/* -------- subscription detail ---------------*/
#subscription{
	margin-bottom: 0;
	.subsccolumn{
		gap: var(--gapl);
		}
	.pointtitle{
		justify-content: start;
		& h3{
			margin-bottom: var(--gaps);
			color:var(--accent-color6);
			font-weight: bold;
			}
		.point{
			background: var(--accent-color6);
			width: 80px;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1px;
			border-radius: 40px;
			text-align: center;
			font-size: 14px;
			color: #fff;
			line-height: 1;		
			& strong{
				font-size: 30px;
				}
			}
		&.pointtitle1{
			margin-bottom: 0;
			& h3{
				font-size: var(--fontm);
				color: var(--txt-color);
				}
			& h3 strong{
				display: block;
				font-size: var(--fontxl);
				color:var(--accent-color6);
				}
			}
		}
	.subscimgcolumn{
		gap: 100px;
		position: relative;
		margin-top: 0;
		&::before{
			content: "or";
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			background: var(--bg-color2);
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 25px;
			text-align: center;
			font-size: 16px;
			font-family: var(--serif);
			color: #fff;
			margin-top: -25px;
			margin-left: -25px;
			}
		.st-image{
			margin-bottom: 0;
			}
		& p{
			background: var(--bg-color2);
			padding: 4px 10px;
			border-radius: 5px;
			text-align: center;
			color: #
			}
		}
	}
@media screen and (max-width: 781px) {
#subscription{
	padding: var(--gap);
	.subsccolumn{
		gap: var(--gap);
		flex-wrap: wrap;
		> .st-column{
			flex: 1 1 100%;
			}
		}
	.pointtitle{
		gap: var(--gaps);
		.point{
			width: 60px;
			height: 60px;
			font-size: 13px;	
			& strong{
				font-size: 20px;
				}
			}
		}
	}
}
#contactbox2{
	border: 3px solid var(--accent-color6);
	padding: var(--gapl);
	box-sizing:border-box;
	.st-table{
		& table{
			border: none;
			display: block;
			}
		& tbody{
			display: block;
			}
		& tr{
			display: flex;
			align-items: center;
			margin-top: var(--gap);
			flex-wrap: wrap;
			}
		& td{
			padding: 0;
			border: none;
			width: auto;
			vertical-align: middle;
			display: block;
			flex-grow: 1;
			}
		& td:nth-child(1){
			background: var(--accent-color6);
			flex-basis: 20%;
			text-align: center;
			color: #fff;
			position: relative;
			font-weight: bold;
			font-size: var(--fonts);
			line-height: 27px;
			}
		& td:nth-child(1)::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 0;
			border-style: solid;
			border-width: 14px 0 14px 15px;
			border-color: transparent transparent transparent var(--accent-color6);
			translate: 100% -50%;
			}
		& td:nth-child(2){
			font-size: var(--fontxl);
			font-family: var(--serif);
			text-align: center;
			letter-spacing: .2rem;
			line-height: 1.2;
			flex-basis: 50%;
			white-space: nowrap;
			}
		& td:nth-child(3){
			flex-basis: 30%;
			color: var(--txt-color2);
			font-size: var(--fonts);
			}
		.furi{
			font-size: var(--fonts);
			display: block;
			font-family: var(--sans-serif);
			}
		.material-symbols-outlined {
	        font-size: var(--fontxl);
			margin-right: 4px;
			vertical-align: middle;
	        }
		& a{
			font-size: var(--fontm);
			letter-spacing: .1rem;
			}
		}
	}
@media screen and (max-width: 781px) {
#contactbox2{
	.st-table{
		& td:nth-child(3){
			flex-basis: 100%;
			margin-top: var(--gaps);
			text-align: center;
			}
		}
	}
}
@media screen and (max-width: 599px) {
#contactbox2{
	.st-table{
		& td:nth-child(1)::after {
			display: none;
			}
		& td:nth-child(2){
			flex-basis: 100%;
			margin-top: var(--gaps);
			text-align: center;
			}
		}
	}
}
/* -------- q & a ---------------*/
.is-qa.st-group{
	.is-q{
		display: flex;
		align-items: center;
		gap: var(--gaps);
		margin: 0 0 var(--gaps);
		font-size: var(--fontm);
		border: 1px solid var(--border-color3);
		padding: var(--gaps);
		cursor: pointer;
		transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		&::before{
			content: "Q";
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			font-size: 20px;
			font-family: var(--lang);
			background: var(--accent-color5);
			color: #fff;
			flex-basis: 40px;
			}
		&::after{
			content: "＋";
			font-size: 20px;
			flex-basis: 20px;
			color: var(--border-color3);
			}
		&.show::after{
			content: "−";
			}
		& p{
			flex: 1 1 calc( 100% - 40px - var(--gaps));
			}
		}
	.is-a{
		display: none;
		gap: var(--gaps);
		margin: 0 0 var(--gap) var(--gap);
		border: 1px solid var(--border-color1);
		padding: var(--gaps);
		padding-left: calc(var(--gaps) *2 + 40px);
		position: relative;
		&::before{
			content: "A";
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			font-size: 20px;
			font-family: var(--lang);
			background: var(--accent-color6);
			color: #fff;
			position: absolute;
			left: var(--gaps);
			top: var(--gaps);
			flex-basis: 40px;
			}
		}
	}
/* -------- voice media ---------------*/
.is-voice.st-group{
	& dl{
		background: var(--bg-color4);
		padding: var(--gap);
		border-radius: 10px;
		margin-bottom: var(--gap);
		position: relative;
		margin-right: 20px;
		&::after{
			content: "";
			position: absolute;
			top: 50%;
			right: 0;
			border-style: solid;
			border-width: 10px 0 10px 15px;
			border-color: transparent transparent transparent var(--bg-color4);
			translate: 100% -50%;
			}
		}
	& dl:nth-child(2n){
		margin-right: 0;
		margin-left: 20px;
		&::after{
			right: unset;
			left: 0;
			border-width: 10px 15px 10px 0;
			border-color: transparent var(--bg-color4) transparent transparent;
			translate: -100% -50%;
			}
		}
	& dt{
		font-size: var(--fontm);
		font-weight: bold;
		font-family: var(--serif);
		margin-bottom: var(--gap);
		border-bottom: 1px solid var(--border-color2);
		padding-bottom: var(--gaps);
		}
	}
.is-voiceshops.st-group{
	.is-voiceshop.st-group{
		margin-bottom: var(--gapl);
		}
	.img{
		position: relative;
		.imgOver{
			width: 110%;
			position: absolute;
			bottom: -100px;
			right: -20%;
			}
		}
	.st-heading{
		font-size: var(--fontxl);
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: var(--gap);
		border-bottom: none;
		padding: 0;
		&:has(bdo){
			font-size: var(--fontm);
			}
		& bdo{
			font-size: var(--fontxxl);
			line-height: 1.2;
			margin-right: var(--gaps);
			}
		}
	.place{
		font-family: var(--serif);
		margin: var(--gap) 0;
		font-size: var(--fontm);
		padding-right: 40%;
		}
	.name{
		margin-bottom: var(--gaps);
		font-weight: bold;
		}
	}
/* -------- news ---------------*/
.news-entries .news-entry{
	list-style-type: none;
	margin: 0;
	padding: var(--gap) var(--gaps);
	border-bottom: 1px solid var(--border-color1);
	font-size: var(--fonts);
	&:first-child{
		border-top: 1px solid var(--border-color1);
		}
	.header{
		display: flex;
		justify-content: space-between;
		}
	.meta{
		display: flex;
		gap: var(--gap);
		flex-basis: 26%;
		.release-date span{
			font-style: italic;
			font-family: var(--serif);
			font-size: var(--fontxs);
			}
		.news-type span{
			display: block;
			text-decoration: none;
			font-style: italic;
			color: var(--accent-color1);
			font-family: var(--serif);
			font-size: var(--fontxs);
			}
		}
	.headline{
		flex-basis: 70%;
		}
	.body{
		margin-left: 30%;
		}
	}
@media screen and (max-width: 781px) {
.news-entries .news-entry{
	.header{
		display: block;
		}
	.headline{
		margin-top: var(--gapxs);
		}
	.body{
		margin-left: 0;
		}
	}
}
#newsentries .news-entries .news-entry{
	margin-bottom: var(--gapl);
	.header{
		margin-bottom: var(--gaps);
		}
	.headline{
		font-size: var(--fontm);
		}
	.body{
		}
	}
#newsentries .news-archive .news-entries .news-entry{
	margin-bottom: 0;
	}
#news #page-wrapper{
	.news-entry-header{
		border-bottom: 1px solid var(--border-color1);
		margin-bottom: var(--gap);
		padding-bottom: var(--gap);
		}
	.news-entry-subject{
	    font-size: var(--fontl);
	    font-weight: normal;
	    font-family: var(--serif);
		}
	.release-date{
		font-family: var(--serif);
		font-size: var(--fontxs);
		font-style: italic;
		text-align: right;
		}
	.news-entry-body{
		line-height: 2.2;
		}
	.trailer-link{
		margin-top: var(--gapl);
		text-align: center;
		& a{
			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);
				}
			}
		}
	}
/* -------- ordercontract ---------------*/
#ordercontract_content{
	width: var(--wt);
	max-width: var(--wtm);
	text-align: left;
	margin: var(--gapxl) auto;
	& h1{
		text-align: center;
		margin-bottom: var(--gapl);
		}
	& table{
		width: 100%;
		border: 0;
		border-spacing: 0;
		border-top: 1px solid var(--border-color1);
		}
	& th,
	& td{
		padding: var(--gap);
		border: none;
		border-bottom: 1px solid var(--border-color1);
		}
	& th{
		border-bottom: 1px solid var(--border-color1);
		background: var(--bg-color3);
		font-weight: normal;
		text-align: center;
		font-family: var(--serif);
		width: 30%;
		}
	}
/* -------- contact ---------------*/
body#form #container,
#account__close_account #container{
	& h3{
		font-size: var(--fontxl);
	    line-height: 1.6;
	    font-family: var(--serif);
	    font-weight: normal;
	    text-align: center;
		margin: var(--gapxl) auto var(--gapl);
		}
	.form-note{
		margin-bottom: var(--gap) !important;
		}
	.form-inquiry,
	.form-inquiry_guest{
		& > div:first-child,
		& > div:has(+.formrow-submit){
		    background: var(--bg-color3);
		    border: 1px solid var(--border-color1);
		    margin: var(--gap) 0;
		    padding: var(--gap);
		    font-size: var(--fonts);
			& hr{
				display: none;
				}
			}
		& > div:first-child{
			margin-top: 0;
			}
		}
	}
/* -------- signin ---------------*/
.exag-signin{
	.name{
		display: none;
		}
	.content{
		text-align: center;
		& div{
			margin: 0 auto;
			}
		}
	.description{
		margin-top: var(--gaps);
		text-align: center;
		}
	}
.signout-message .note{
	text-align: center;
	}
#reminder-entry-form{
	.submit-note{
		 margin-top: var(--gap);
		}
	}
#loginhelp{
	padding: 0;
	}
@media screen and (max-width: 599px) {
#loginhelp .st-column{ flex: 1 1 100%; }
}
/* -------- mypege ---------------*/
/* mypegetop */
#account__account{
	.account-info{
		margin-bottom: var(--gap);
		.account-name{
			text-align: center;
			font-size: var(--fontm);
			font-family: var(--serif);
			display: flex;
			gap: var(--gapxs);
			justify-content: center;
			align-items: center;
			&::before{
				content: "account_circle";
			    font-family: 'Material Symbols Outlined';
			    font-weight: normal;
			    font-style: normal;
			    font-size: 30px;
			    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;
				color: var(--accent-color5);
				}
			}
		}
	.account-point{
		padding: var(--gap) 0;
		.account-point-wrap{
			display: flex;
			justify-content: center;
			font-family: var(--serif);
			.account-haspoint,
			.account-expirepoint{
				display: flex;
				align-items: center;
				padding: 0 var(--gap);
				}
			.account-haspoint{
				flex-basis: 40%;
				.account-haspoint__label{
					white-space: nowrap;
					}
				.account-haspoint__amount{
					flex-grow: 1;
					text-align: right;
					color: var(--accent-color2);
					}
				& span{
					font-size:var(--fontl);
					font-weight: bold;
					}
				}
			.account-expirepoint{
				flex-basis: 60%;
				border-left: 1px solid var(--border-color1);
				.account-expirepoint__label{ 
					white-space: nowrap;
					}
				.account-expirepoint__amount{
					flex-grow: 1;
					text-align: right;
					& span{
						font-weight: bold;
						}
					& b{
						font-size:var(--fontxs);
						font-weight: normal;
						color: var(--txt-color3);
						font-family: var(--sans-serif);
						}
					}
				}
			}
		.account-point-link{
			padding: var(--gaps)  var(--gap) 0;
			text-align: right;
			font-size:var(--fonts);
			}
		}
	.account-menus{
		& > div{
			margin-bottom: var(--gapl);
			}
		.menu-group-header{
	        background: var(--accent-color5);
	        color: #fff;
	        font-size: var(--fontm);
	        padding: var(--gapxs) var(--gaps);
	        border: none;
			}
		.account-menu-list{
			display: flex;
			flex-wrap: wrap;
		    gap: var(--gapl) var(--gap);
		    align-items: start;
		    margin: var(--gap) 0;
			& li{
				flex-basis: calc(25% - var(--gap) * 3 / 4);
				}
			&:not(:has(li:nth-child(4))) li{
				flex-basis: calc(33.33333% - var(--gap) * 2 / 3);
				}
			& li > a{
				display: block;
				font-family: var(--serif);
				color: var(--txt-color);
				font-size: var(--font);
			    border-bottom: 1px solid var(--border-color1);
			    padding-bottom: var(--gaps);
			    margin: var(--gaps) 0;
			    font-weight: normal;
				}
			& li > a::before{
				content: "";
			    font-family: 'Material Symbols Outlined';
			    font-weight: normal;
			    font-style: normal;
			    letter-spacing: normal;
			    text-transform: none;
			    white-space: nowrap;
			    word-wrap: normal;
			    direction: ltr;
			    -webkit-font-feature-settings: 'liga';
			    -webkit-font-smoothing: antialiased;
				display: block;
		        width: 70px;
		        height: 70px;
		        background: var(--bg-color4);
		        border-radius: 35px;
		        margin: 0 auto;
		        font-size: 35px;
		        line-height: 70px;
				text-align: center;
		        color: var(--txt-color);
		        transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
				margin-bottom: var(--gaps);
				}
			.note{
				font-size: var(--fonts);
				}
			}
		}
	.menu-EmailPassword > a::before{ content: "id_card" !important; }
	.menu-ManageAddressBook > a::before{ content: "home_work" !important; }
	.menu-ManageDefaultPaymentMethod > a::before{ content: "credit_card" !important; }
	.menu-Point > a::before{ content: "diamond_shine" !important; }
	.menu-ViewOrderHistory > a::before{ content: "local_shipping" !important; }
	.menu-ViewOrders > a::before{ content: "shopping_bag_speed" !important; }
	.menu-ViewRegularPurchase > a::before{ content: "bookmark" !important; }
	.menu-EditAccountProperties > a::before{ content: "user_attributes" !important; }
	.menu-CloseAccount > a::before{ content: "account_circle_off" !important; }
	.menu-inquiry > a::before{ content: "stacked_email" !important; }
	.menu-ViewInquiriesHistory > a::before{ content: "stacked_email" !important; }
	.menu-Signout > a::before{ content: "logout" !important; }
	.menu-sys_qanda > a::before{ content: "question_exchange" !important; }
	.menu-YourReviews > a::before{ content: "reviews" !important; }
	}
#account__manage_addressbook{
	.btn-group{
		margin-bottom: var(--gap) !important;
		display: flex;
		justify-content: center;
		}
	.panel-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		gap: var(--gap);
		& li{
			flex-basis: calc(33% - var(--gap) * 2 / 3);
			}
		.panel{
			background: var(--bg-color3);
			height: 100%;
			margin-bottom: 0;
			}
		.name{
			font-weight: bold;
			}
		.kana{
			color: var(--txt-color3);
			font-size: var(--fontxs);
			}
		.addresses,
		.phone-numbers{
			font-size: var(--fonts);
			}
		.msg-sm{
			display: block;
			margin-top: var(--gaps);
			background: var(--accent-color1);
			font-size: var(--fonts);
			padding: 4px var(--gaps);
			}
		.panel-footer .btn-group{
			margin-bottom: 0 !important;
			flex-wrap: wrap;
			.btn{
				min-width: unset;
				}
			.btn.btn-use-as-default{
				flex-basis: 100%;
				}
			}
		}
	}
#account__manage_paymentmethod{
	#add-new-payment-method h2{
		background: var(--accent-color5);
		color: #fff;
		font-size: var(--fontm);
		padding: var(--gapxs) var(--gaps);
		border: none;
		margin-bottom: var(--gap);
		}
	.method-name,
	.pm-heading{
		margin-top: var(--gap);
		margin-bottom: var(--gaps);
		font-weight: bold;
		}
	.control{
		display: flex;
		justify-content: center;
		margin-top: var(--gap);
		}
	}
#account__view_points_history{
	.points-summary{
		margin-top: var(--gap) !important;
		}
	.points-summary{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--gaps) var(--gap);
		}
	.wrapper{
		display: flex;
		gap: var(--gaps);
		align-items: center;
		.label{
			}
		.value{
			font-weight: bold;
			font-family: var(--serif);
			}
		}
	.points-amount-available .value{
		font-size: var(--fontl);
		color: var(--accent-color2);
		}
	& table{
		width: 100%;
		border: 0;
		border-spacing: 0;
		border-top: 1px solid var(--border-color1);
		}
	& th{
		border-bottom: 1px solid var(--border-color1);
		background: var(--bg-color3);
		font-weight: normal;
		}
	& th,
	& td{
		padding: var(--gaps) var(--gaps);
		border: none;
		border-bottom: 1px solid var(--border-color1);
		vertical-align: top;
		text-align: center;
		font-size: var(--fonts);
		}
	}
#account__view_order_history,
#account__view_orders,
#account__order,
#account__close_account,
#account__view_inquiries,
#account__view_regular_purchase_subscriptions,
#account__order_inquiry,
#order__payment_status{
	.ordersmr-shipment > .panel-heading{
		background: var(--bg-color3);
		}
	.delivery .panels,
	.shipment-valid .shipment-header{
		display: flex;
		gap: var(--gaps);
		justify-content: space-between;
		font-size: var(--fonts);
		& > li,
		& > div{
			flex: 1 1 25%;
			background: var(--bg-color3);
			padding: var(--gaps) var(--gap);
			box-sizing: border-box;
			}
		& h5,
		& h6{
			font-size: var(--font);
			color: var(--txt-color);
			margin: 0;
			font-family: var(--sans-serif);
			padding: 0;
			text-decoration: none;
			&::before{ display:none; }
			}
		}
	.delivery-tracking{
		.control{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0 var(--gaps);
			}
		& button{
			padding: 0;
			color: var(--accent-color2);
			border: none;
			background: none;
			min-width: unset;
			line-height: 1.8;
			text-decoration: underline;
			text-underline-offset: 3px;
			font-size: var(--fonts);
			}
		}
	.order-shipments .shipment-delivery-address,
	.order-shipments .shipment-contents .delivery,
	.shipment-valid .shipment-delivery-address,
	.shipment-valid .shipment-contents .delivery{
		display: flex;
		gap: var(--gaps);
		justify-content: space-between;
		margin-top: var(--gap);
		& > div{
			flex: 1 1 25%;
			border: 1px solid var(--border-color1);
			.person-label{
				background: var(--accent-color5);
	            color: #fff;
	            padding: var(--gaps) var(--gap);
	            font-family: var(--serif);
				}
			.person-contents{
				padding: var(--gaps) var(--gap);
				}
			}
		.kana{
			color: var(--txt-color3);
			font-size: var(--fontxs);
			}
		.name{
			font-weight: bold;
			}
		.place,
		.phone-number,
		.email{
			font-size: var(--fonts);
			}
		}
	.order-shipments .delivery,
	.shipment-valid .delivery{
		margin-bottom: var(--gap);
		& table{
			width: 100%;
			border: 0;
			border-spacing: 0;
			}
		& caption{
			background: var(--accent-color5);
			color: #fff;
			padding: var(--gaps) var(--gap);
			font-family: var(--serif);
			text-align: left;
			}
		& tbody{
			display: block;
			padding: var(--gaps) var(--gap);
			}
		& th,
		& td{
			padding: var(--gapxs) 0;
			width: auto;
			vertical-align: top;
			}
		& th{
			padding-right: var(--gaps);
			}
		}
	.itemdetails .add-new-review{
		margin-top: var(--gaps);
		}
	.amount-table{
	    border: none;
	    padding: 0;
	    border-radius: 0;
	    box-shadow: unset;
	    font-family: var(--serif);
		margin: var(--gap) 0 var(--gap) 50%;
		}
	span.status{
		background: var(--bg-color1);
		padding: 0 10px;
		display: inline-block;
		font-size: var(--fonts);
		border: 1px solid var(--accent-color1);
		}
	.itemdetails{
		.itemdetail-row{
			.item{ 
				flex: 0 0 50%;
				}
			.purchase-contents{
				flex: 0 0 calc( 30% - var(--gaps));
				}
			}
		}
	.order-items h4{
		border-bottom: none;
		padding-bottom: 0;
		font-weight: bold;
		margin: var(--gap) 0;
		}
	.order-shipments{
		.shipment{
			padding-bottom: var(--gap);
			margin-bottom: var(--gap);
			border-bottom: 3px solid var(--border-color1);
			&:last-child{ border: none; }
			}
		}
	.order-buttons{
		display: flex;
		gap: var(--gaps);
		justify-content: center;
		text-align: center;
		flex-wrap: wrap;
		.note{ margin-top: var(--gaps);}
		}
	.request-paymentmethod-reset{
		background: var(--bg-color5);
		border: 1px solid var(--accent-color4);
		margin-bottom: var(--gap);
		padding: var(--gap);
		& h3{
			font-size: var(--fontm);
			font-family: var(--sans-serif);
			font-weight: bold;
			margin-bottom: var(--gaps);
			color: var(--accent-color4);
			}
		.order-reset-paymentmethod-form{
			.description{
				margin-top: var(--gaps);
				}
			}
		}
	}
#order__payment_status{
	.status{
		margin-bottom: var(--gap);
		background: var(--bg-color3);
		padding: var(--gaps) var(--gap);
		box-sizing: border-box;
		.label{
            font-weight: bold;
			}
		}
	}
#account__order_inquiry{
	.order-inq .btn{
		margin-top: var(--gap)
		}
	}
#account__view_orders{
	#page-title .description .view-orders-title-desc{
		padding: 0 !important;
		font-size: var(--font) !important;
		}
	}
#account__view_regular_purchase_subscriptions,
#account__view_regular_purchase_schedule,
#account__edit_regular_purchase_consignee,
#account__edit_regular_purchase_payment{
	.rp-subscriptions-nav-list .rp-subscriptions-nav-list{
		margin-bottom: var(--gapl);
		border-bottom: 1px solid var(--border-color1);
		display: flex;
		align-items: end;
		justify-content: center;
		gap: var(--gaps);
		.rp-subscriptions-nav-item{
			border: 1px solid var(--border-color1);
			border-bottom-color: transparent;
			border-radius: 5px 5px 0 0;
			margin-bottom: -1px;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			& a{
				display: block;
				padding: var(--gaps) var(--gaps) var(--gapxs);
				background: var(--bg-color4);
				color: var(--txt-color);
				overflow: hidden;
				text-overflow: ellipsis;
				}
			& a:hover{
				background: #fff;
				}
			&.active{
				padding: var(--gaps);
				border-bottom-color: #fff;
				}
			}
		}
	.panel{
		.wrapper{
			display: flex;
			gap: var(--gap);
			& > div{
				flex: 1 1 50%;
				}
			.kana{
				color: var(--txt-color3);
				font-size: var(--fontxs);
				}
			.name{
				font-weight: bold;
				}
			.place,
			.phone-number,
			.email{
				font-size: var(--fonts);
				}
			.payment-method-name{
				font-weight: bold;
				margin-bottom: var(--gaps)
				}
			.paymententry-note{
				& th, & td {
					padding: var(--gapxs) var(--gaps);
					}
				}
			}
		.panel-footer{
			.btn-group{
				margin: var(--gap) 0;
				flex-wrap: wrap;
				& > div{
					flex-basis: calc( 50% - var(--gaps)/2 );
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					}
				.note{
					display: block;
					font-size: var(--fonts);
					margin-top: var(--gapxs);
					}
				}
			.update-shipping-schedule{
				text-align: center;
				.switch{
					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);
						}
					}
				& form{
					margin-top: var(--gap);
					display: flex;
					align-items: center;
					justify-content: center;
					gap: var(--gaps);
					}
				}
			}
		}
	.edit-next-rpentry{
		display: flex;
		justify-content: center;
		}
	.items{
		.item{
			display: flex;
			align-items: center;
			gap: var(--gaps);
			.item-thumbnail-img-wrapper{
				flex: 1 1 150px;
				}
			.item-text{
				flex: 1 1 90%;
				font-size: var(--fonts);
				& a{
					display: block;
					font-weight: bold;
					margin-bottom: var(--gapxs);
					}
				.unit-price,
				.rpi-qty,
				.subtotal-price{
					display: flex;
					flex-wrap: wrap;
					gap: 0 var(--gaps);
					& h6{
						margin: 0;
						font-family: var(--sans-serif);
						font-weight: normal;
						font-size: var(--fonts);
						}
					}
				}
			}
		}
	}
#account__write_review{
	.panel-review-item .panel-heading{
		margin-bottom: var(--gap);
		text-align: center;
		}
	}
#account__write_review_complete{
	.back-link{
		text-align: center !important;
		}
	.back-link a{
		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);
			}
		}
	}
#account__view_inquiries{
	.description{
		border: none;
		background: none;
		padding: 0;
		text-align: center;
		&::before{ display: none; }
		}
	.inquiries-list .panel > .panel-heading{
		padding: var(--gaps) var(--gap) !important;
		.inq-type{
			text-align:left; 
			font-weight: bold;
			}
		.inq-date{
			text-align:right;
			font-family: var(--serif);
			}
		}
	.inq-item{
		display: flex;
		gap: var(--gap);
		margin-bottom: var(--gaps);
		.inq-item-label{
			flex: 1 1 30%;
			font-weight: bold;
			}
		.inq-item-values{
			flex: 1 1 70%;
			}
		}
	.inq-response{
		background: var(--bg-color3);
		border-left: 3px solid var(--border-color1);
		margin-left: var(--gapl);
		margin-top: var(--gap);
		.inq-resp-heading{
			background: var(--border-color1);
			display: flex;
			gap: var(--gaps);
			justify-content: space-between;
			padding: var(--gaps) var(--gap);
			.inq-resp-user{
				font-weight: bold;
				}
			.inq-resp-date{
				font-family: var(--serif);
				}
			}
		.inq-resp-content{
			padding: var(--gap);
			}
		.inq-re-entry{
			padding: var(--gap);
			}
		}
	}
@media screen and (max-width: 781px) {
#account__account{
	.account-point{
		.account-point-wrap{
			flex-wrap: wrap;
			justify-content: start;
			.account-haspoint,
			.account-expirepoint{
				border-left: none;
				flex-basis: 100%;
				}
			}
		}
	.account-menus{
		.account-menu-list{
			& li{ flex-basis: calc(50% - var(--gap) * 1 / 2) !important; }
			}
		}
	}
#account__manage_addressbook{
	.panel-list{
		& li{
			flex-basis: 100%;
			}
		}
	}
#account__view_points_history{
	div:has( > table.points-detail){
		overflow-x: scroll;
		& table.points-detail{
			& th, & td{ white-space: nowrap; }
			}
		}
	}
#account__view_order_history,
#account__view_orders,
#account__order,
#account__close_account,
#account__view_inquiries,
#account__view_regular_purchase_subscriptions,
#account__order_inquiry,
#order__payment_status{
	.delivery .panels,
	.shipment-valid .shipment-header{
		flex-wrap: wrap;
		& > li, & > div{ flex: 1 1 100%; }
		}
	.order-shipments .shipment-delivery-address,
	.order-shipments .shipment-contents .delivery,
	.shipment-valid .shipment-delivery-address,
	.shipment-valid .shipment-contents .delivery{
		flex-wrap: wrap;
		& > div{ flex: 1 1 100%; }
		}
	.order-shipments .delivery,
	.shipment-valid .delivery{
		margin-bottom: var(--gap);
		& table{
			width: 100%;
			border: 0;
			border-spacing: 0;
			}
		& caption{
			background: var(--accent-color5);
			color: #fff;
			padding: var(--gaps) var(--gap);
			font-family: var(--serif);
			text-align: left;
			}
		& tbody{
			display: block;
			padding: var(--gaps) var(--gap);
			}
		& th,
		& td{
			padding: var(--gapxs) 0;
			width: auto;
			vertical-align: top;
			}
		& th{
			padding-right: var(--gaps);
			}
		}
	.itemdetails .add-new-review{ text-align: right; }
	.amount-table{
	    border: none;
	    padding: 0;
	    border-radius: 0;
	    box-shadow: unset;
	    font-family: var(--serif);
		margin: var(--gap) 0 var(--gap) 50%;
		}
	span.status{
		background: var(--bg-color1);
		padding: 0 10px;
		display: inline-block;
		font-size: var(--fonts);
		border: 1px solid var(--accent-color1);
		}
	.itemdetails{
		.itemdetail-row{
			.item{ 
				flex: 1 1 100%;
				}
			.purchase-contents,
			.extra-controls{
				box-sizing: border-box;
				flex: 1 1 calc( 50% - var(--gaps));
				}
			}
		}
	.order-items h4{
		border-bottom: none;
		padding-bottom: 0;
		font-weight: bold;
		margin: var(--gap) 0;
		}
	.order-shipments{
		.shipment{
			padding-bottom: var(--gap);
			margin-bottom: var(--gap);
			border-bottom: 3px solid var(--border-color1);
			&:last-child{ border: none; }
			}
		}
	.order-buttons{
		display: flex;
		gap: var(--gaps);
		justify-content: center;
		text-align: center;
		.note{ margin-top: var(--gaps);}
		}
	}
#account__view_regular_purchase_subscriptions{
	.panel{
		.wrapper{
			flex-wrap: wrap;
			& > div{
				flex: 1 1 100%;
				}
			}
		.panel-footer{
			.btn-group{
				& > div{ flex-basis: 100%; justify-content: start;}
				}
			}
		}
	}
}
/* -------- cart ---------------*/
#order__signin_to_checkout .form-order-signin,
#order__signin_to_checkout .form-order-signup{
	& > h2{
		font-size: var(--fontl);
		text-align: center;
		}
	.signin-intro{
		margin-top: var(--gap);
		}
	.exag-signin{
	    border: none;
		border-top: 1px solid var(--border-color1);
	    padding: var(--gap) 0 0;
	    border-radius: 0;
	    box-shadow: unset;
	    box-sizing: border-box;
	    margin: var(--gap) auto 0 !important;
		}
	& fieldset.acc-signup{
		margin-top: 0;
		border-top: none;
		padding-top: 0;
		& legend{
			display: none;
			}
		}
	.signup-note{
		margin-bottom: var(--gap);
		}
	}
#order__confirm{
	.shipments h2{
		font-size: var(--fontl);
		font-weight: normal;
		flex-wrap: wrap;
		margin: var(--gap) 0;
		font-family: var(--serif);
		}
	.shipment-each > h3{
		background: var(--accent-color2);
		color: #fff;
		font-size: var(--fontm);
		padding: var(--gapxs) var(--gaps);
		border: none;
		margin: var(--gap) 0;
		}
	#checkout-control{
		margin-bottom: var(--gapxl);
		}
	}
#order__payment #order-entry-content,
#account__edit_regular_purchase_payment{	
	h2{
		background: var(--accent-color5);
        color: #fff;
        font-size: var(--fontm);
        padding: var(--gapxs) var(--gaps);
        border: none;
        margin-bottom: var(--gap);		
		}
	.method-name,
	.pm-heading{
		margin-top: var(--gap);
		margin-bottom: var(--gaps);
		font-weight: bold;
		}
	.control{
		display: flex;
		justify-content: center;
		margin-top: var(--gap);
		}
	}
#order__complete{
	.main-message{
		margin-bottom: var(--gap) !important;
		}
	.main-contents{
		.view-order-detail{
			text-align: center;
			& a{
				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);
					}
				}
			}
		}
	.request-paymentmethod-reset{
		margin-top: var(--gap);
		.order-reset-paymentmethod-form{
			text-align: center;
			.description{
				margin-top: var(--gap);
				text-align: left;
				}
			}
		}
	}
.order-cancel-edit{
	& a{
		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(--txt-color3);
		background: var(--txt-color3);
		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(--txt-color3);
			}
		}
	}
.itemdetails{
	.itemdetails-caption{
		margin: var(--gaps) 0;
		& h3{
			font-size: var(--fontm);
			font-weight: bold;
			}
		}
	.itemdetails-header{
		font-size: var(--fonts);
		background: var(--bg-color4);
		.itemdetail-row{
			padding: var(--gaps) 0;
			border-bottom: none;
			}
		.item{
			justify-content: center;
			}
		.quantity{
			text-align: center;
			}
		.subtotal{
			text-align: center !important;
			}
		}
	.itemdetails-body{
		font-size: var(--fonts);
		}
	.itemdetails-body-present{
		border-top: 1px solid var(--border-color1);
		}
	.itemdetail-row{
		display: flex;
		justify-content: start;
		gap: var(--gaps);
		padding: var(--gap) 0;
		border-bottom: 1px solid var(--border-color1);
		&:last-child{ border-bottom: none;}
		.item{ 
			flex: 1 1 70%;
			}
		.purchase-contents{
			flex: 0 0 calc( 30% - var(--gaps));
			}
		}
	.item{
		display: flex;
		gap: var(--gaps);
		.goods-with-control{
			flex: 0 0 70%;
			}
		.control{
			flex: 0 0 calc( 30% - var(--gaps));
			.cart-save-item{
				margin-bottom: var(--gapxs);
				}
			.wrapper > a{
				text-decoration: underline;
                text-underline-offset: 3px;
				font-size: var(--fontxs);
				}
			}
		}
	.purchase-contents{
		display: flex;
		gap: var(--gaps);
		.quantity{
			flex: 0 0 45%;
			text-align: center;
			.item-qty-label{
				font-size: var(--fontxs);
				color: var(--txt-color3);
				}
			.show-update-qty{
				margin: var(--gapxs) 0;	
				}
			.error {
				position: absolute;
				white-space: nowrap;
				margin-left: -30px;
			}
			}
			.quantity:has(.error) {
				padding-bottom: 100px;
			}
		.remove-one .btn{
			font-size: var(--fontxs);
			color: var(--accent-color2);
			text-decoration: underline;
            text-underline-offset: 3px;
			cursor: pointer;
			&:hover {
				color: var(--accent-color1);
				}
			}
		.move-item-wrapper{
			margin-top: var(--gaps);
			}
		.subtotal{
			flex: 1 1 50%;
			text-align: right;
			.amount{
				font-family: var(--serif);
				font-size: var(--fontxs);
				}
			& strong{
				font-size: var(--font);
				margin: 0 4px;
				}
			.tax{
				display: block;
				color: var(--txt-color2);
				font-family: var(--serif);
				font-size: var(--fontxs);
				}
			}
		}
	.goods{
		display: flex;
		gap: var(--gaps);
		justify-content: space-between;
		.item-thumbnail-img-wrapper{
			flex: 0 0 100px;
			.item-thumbnail-img{
				max-width: 100px;
				min-width: 100px;
				}
			.no-img{
				display: none;
				}
			}
		.goods-text{
			flex: 1 1 80%;
			}
		}
	.goods-text{
		.goods-text-heading{
			.item-name{
				& a{
					font-weight: bold;
					}
				.code{
					color: var(--txt-color3);
					font-family: var(--lang);
					}
				}
			}
		.rp-opt-value{
			.rp-opt-conf{
	            border: 1px solid var(--accent-color6);
				color: #fff;
				font-size: var(--fontxs);
				background: var(--accent-color6);
				border-radius: 2px;
				padding: 2px 10px;
				}
			.rp-opt-next{
				display: block;
				font-size: var(--fontxs);
				color: var(--accent-color6);
				}
			}
		.purchases-messages{
			font-size: var(--fontxs);
			color: var(--txt-color3);
			}
		.unit-price{
	        font-weight: normal;
			font-size: var(--fontxs);
			font-family: var(--serif);
			& strong{
				font-size: var(--font);
				margin-right: 4px;
				}
			}
		.item-options{
			font-size: var(--fontxs);
			.item-option{
				display: flex;
				gap: var(--gaps);
				justify-content: start;
				}
			.item-option-name{
				flex-basis: 20%;
				}
			.item-option-value{
				flex-basis: 80%;
				}
			.update-itemoptions a{
				text-decoration: underline;
				text-underline-offset: 3px;
				}
			}
		.unit-price{
			}
		}
	.control{
		.rp-conf-wrapper{
			border-radius: 2px;
			font-size: var(--fontxs);
			margin-bottom: var(--gaps);
			.rp-opts{
				display: flex;
				gap: var(--gapxs);
				}
			& select{
				max-width: 100%;
				}
			}
		.rp-alternatives{
			border-radius: 2px;
			padding: var(--gapxs) var(--gaps);
			font-size: var(--fontxs);
			background: var(--accent-color6);
			color: #fff;
			margin-bottom: var(--gaps);
			text-align: left;
			& ul{
				font-size: var(--fontxs);
				}
			& a{
				color: #fff;
				text-decoration: underline;
				text-underline-offset: 3px;
				}
			}
		.cartitem-basic-control{
			font-size: var(--fontxs);
			color:  var(--accent-color2);
			.remove-item{
				text-decoration: underline;
				text-underline-offset: 3px;
				}
			.save-item{
				text-decoration: underline;
				text-underline-offset: 3px;
				}
			}
		}
	.itemoptions{
		border-top: 1px dashed var(--border-color1);
		padding-top: var(--gaps);
		margin-left: calc( 100px + var(--gaps));
		display: flex;
		gap: var(--gaps);
		justify-content: start;
		.itemoption-control{
			.formrow{
				display: flex;
				gap: var(--gaps);
				justify-content: start;
				align-items: center;
				padding: 0;
				border: none;
				}
			}
		.btn-update-itemoptions{
			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;
				}
			}
		}
	.show-update-qty .clickable,
	.cart-save-item .ready-cartitem{
		display: inline-block;
		padding: 4px 10px;
		font-size: var(--fonts);
		color: var(--accent-color2);
		border: 1px solid var(--accent-color2);
		background: #fff;
		min-width: 80px;
		border-radius: 5px;
		transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
		font-family: var(--serif);
		line-height: 1.6;
		cursor: pointer;
		&:hover{
			background: var(--accent-color2);
			color: #fff;
			}
		}
	}
.cart-clear-all{
	margin-top: var(--gap);
	display:flex;
	justify-content: end;
	}
.rp-batch{
	border: 1px solid var(--accent-color6);
	padding: var(--gap);
	margin-top: var(--gap);
	& h4{
		font-family: var(--serif);
		color: var(--accent-color6);
		border-bottom: 1px solid var(--accent-color6);
		}
	.rp-conf-wrapper{
		margin-top: var(--gapxs);
		}
	}
.price-total{
	font-size: var(--font);
	background: var(--bg-color4);
	margin-top: var(--gap);
	.row{
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		gap: var(--gapxs) var(--gap);
		justify-content: end;
		padding: var(--gap);
		font-family: var(--serif);
		}
	.subtotal{
		& strong{
			font-size: var(--fontl);
			line-height: 1;
			margin: 0 6px;
			}
		.tax{
			color: var(--txt-color2);
			}
		}
	}
.present-applied{
	border: 1px solid var(--accent-color1);
	.caption{
		background: var(--accent-color1);
		color: #fff;
        padding: var(--gaps) var(--gap);
        font-family: var(--serif);
		}
	.present-list{
		padding: 0 var(--gap);
		}
	}
.present-list{
	& li{
		padding: var(--gap) 0;
		border-bottom: 1px solid var(--border-color1);
		&:last-child{ border: none; }
		}
	.name-and-code{
		display: block;
		margin-bottom: var(--gaps);
		.name{
			font-weight: bold;
			}
		.code{
			color: var(--txt-color3);
			font-family: var(--lang);
			}
		}
	.present-option{
		& label{
			display: block;
			padding: 4px 0;
			}
		}
	}
.update-present-option{
	text-align: center;
	}
.cart-checkout{
	margin-top: var(--gap);
	display:flex;
	justify-content: center;
	&:has(.error){
		flex-wrap: wrap;
		}
	.error{
		flex-basis: 100%;
		}
	}
@media screen and (max-width: 781px) {
.itemdetails{
	.itemdetails-header{
		display: none;
		}
	.itemdetail-row{
		flex-wrap: wrap;
		.item{ 
			flex: 1 1 100%;
			align-items: center;
			}
		.purchase-contents{ 
			flex: 1 1 100%;
			align-items: center;
			padding: var(--gaps) var(--gap);
			background: var(--bg-color3);
			.quantity{ 
				flex-basis: 30%; 
				.error {
					margin-top: 15px;
					margin-left: 30px;
				}
			}
			.subtotal .tax{ display: inline-block; }
			.quantity:has(.error) {
				padding-bottom: 0;
			}
			}
			.purchase-contents:has(.error){
				padding-bottom: 110px;
			}
		}
	.item{
		flex-wrap: wrap;
		.goods-with-control{ flex: 1 1 100%;}
		.control{ flex: 1 1 100%; text-align: right; }
		}
	.control{
		.cartitem-basic-control{
			text-align: right;
			}
		}
	.itemoptions{
		border-top: 1px dashed var(--border-color1);
		justify-content: end;
		.itemoption-control{
			.formrow{ flex-wrap: nowrap; }
			.input-control{  gap: 0; }
			}
		}
	.goods{
		flex-wrap: wrap;
		.item-thumbnail-img-wrapper{ flex: 0 0 100px; }
		.goods-text{ flex: 1 1 calc( 100% - 100px - var(--gaps)); }
		.extra-controls{ flex: 1 1 100%; text-align: center; }
		}
	}
}
#paymet-order-invoice{
	display: flex;
	justify-content: end;
	margin: var(--gap) 0;
	.amount-table{
		width: 500px;
		}
	}
.amount-table{
	border: 1px solid var(--border-color1);
	padding: var(--gap);
	border-radius: 10px;
	box-shadow: 0 0 10px var(--border-color1);
	font-family: var(--serif);
	& table{
		border: none;
		border-spacing: 0;
		width: 100%;
		}
	& th,
	& td{
		padding: 5px 0;
		border-bottom: 1px solid var(--border-color1);
		}
	& th{
		font-weight: normal;
		}
	.amount{
		text-align: right;
		}
	.total{
		color: var(--accent-color4);
		.amount{
			font-size: var(--fontl);
			font-weight: bold;
			}
		}
	.spmt-ttl-amt .amount{
		font-weight: bold;
		font-size: var(--fontm);
		}
	.msg-paymentfee-excluded{
		margin-top: var(--gaps);
		font-size: var(--fonts);
		}
	}
#pm-description{
	text-align: center;
	}
.cardlogo{
	border: 1px solid var(--border-color1);
	margin: var(--gaps) auto !important;
	width: 800px;
	max-width: 96% !important;
	padding: var(--gaps);
	font-size: var(--fonts);
	.cardlogo__head{
		font-weight: bold;
		font-size: inherit !important;
		}
	.cardlogo__desc{
		font-size: inherit !important;
		}
	.cardlogo__list,
	.cardlogo__list-3ds{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--gaps);
		margin: var(--gaps) 0 !important;
		padding: 0 !important;
		.cardlogo__item,
		.cardlogo__item-3ds{
			width: auto;
			}
		.cardlogo__item img{
			max-width: 70px;
			max-height: 40px;
			}
		.cardlogo__item-3ds img{
			max-width: 120px;
			max-height: 40px;
			}
		}
	}
.payment-method-list .payment-method{
	margin-bottom: var(--gapl);
	border-top: 3px solid var(--border-color1);
	&:last-child{
		margin-bottom: 0;
		}
	&:first-child{
		border-top: none;
		}
	.pm-trailing{
		text-align: center;
		margin-top: var(--gap);
		}
	.pm-submit{
		.extra-control{
			margin-top: var(--gaps);
			}
		}
	.pm-use-as-default{
		margin-top: var(--gaps);
		}
	}
#reminder-done{
	margin-top: var(--gapxl);
	.msg-head{
		font-size: var(--fontl);
		font-family: var(--serif);
		margin-bottom: var(--gap);
		}
	.btn-submit{
		text-align: center;
		margin-top: var(--gap);
		}
	.link-updatepass{
		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);
			}
		}
	}
#order-entry-content,
#account__edit_regular_purchase_consignee,
#account__view_regular_purchase_orderentry{
	#order-entry-order,
	.shipment-entry-adr{
		display: flex;
		gap: var(--gap);
		margin-bottom: var(--gap);
		flex-wrap: wrap;
		}
	.panel{
		flex: 1 1 calc(50% - var(--gap)/2);
		}
	.person-contents{
		.kana{
			color: var(--txt-color3);
			font-size: var(--fontxs);
			}
		.name{
			font-weight: bold;
			}
		.place,
		.phone-number,
		.email{
			font-size: var(--fonts);
			}
		}
	.use-points{
		.available-points-amount{
			font-size: var(--fonts);
			}
		.control{
			margin: 0 0 var(--gaps);
			display: flex;
			gap: var(--gaps);
			align-items: center;
			.btn{
				padding: 0;
				color: var(--accent-color2);
				border: none;
				background: none;
				min-width: unset;
				line-height: 1.8;
				text-decoration: underline;
				text-underline-offset: 3px;
				&:hover{
					background: none;
					color: unset;
					}
				}
			}
		}
	.payment-method{
		.payment-method-name{
			font-weight: bold;
			}
		}
	.itemdetail-row{
		.item{
			flex: 1 1 50%;
			}
		.purchase-contents{
			flex: 1 1 50%;
			}
		}
	.move-item-wrapper{
		& > .note{
			margin: var(--gap) 0;
			color: var(--accent-color4);
			font-size: var(--fonts);
			}
		.move-item-dst{
			& > li{
		        border: 1px solid var(--accent-color2);
				border-radius: 5px;
				margin-top: var(--gaps);
				padding: var(--gaps) var(--gap);
				cursor: pointer;
				.label{
					color: var(--accent-color2);
					font-family: var(--serif);
					margin-bottom: var(--gapxs);
					}
				.note{
					font-size: var(--fonts);
					}
				&.active{
					background: #fff;
					border: 1px solid var(--accent-color2);
					}
				&.inactive{
					background: var(--bg-color3);
					border: 1px solid var(--border-color1);
					}
				&:hover{
					border: 1px solid var(--accent-color2);
					}
				}
			}
		.addressbook{
			margin: var(--gap) 0; 
			}
		.form-body{
			margin: var(--gap) 0; 
			}
		.btn-moveitem{
			margin: var(--gap) 0;
			display: flex;
			justify-content: center;
			}
		}
	.itemdetails.move-item-context{
		margin: 0 var(--gap);
		}
	.price-total,
	.present-applied,
	.update-present-option{
		margin: 0 var(--gap) var(--gap);
		}
	.amount-table{
		margin: var(--gap);
		width: 500px;
		margin-left: auto;
		}
	.checkout{
		display: flex;
		justify-content: center;
		}
	.addressbook{
		.ab-list{
			margin: var(--gap) 0;
			& li{
		        border: 1px solid var(--border-color1);
				border-radius: 5px;
				margin-top: var(--gaps);
				cursor: pointer;
				&:hover{
					 border: 1px solid var(--accent-color2);
					}
				}
			.naa{
				display: flex;
				padding: var(--gaps) var(--gap);
				}
			.name{
				flex: 0 0 30%;
				font-weight: bold;
				}
			.address{
				flex: 0 0 70%;
				}
			}
		}
	.shipments h2{
		font-size: var(--fontl);
	    font-weight: normal;
	    flex-wrap: wrap;
	    margin: var(--gap) 0;
	    font-family: var(--serif);
		}
	.person{
		border: 1px solid var(--border-color1);
		position: relative;
		flex-basis: 100%;
		box-sizing: border-box;
		& > .person-label{
			background: var(--accent-color1);
			color: #fff;
			padding: var(--gaps) var(--gap);
			font-family: var(--serif);
			}
		& > .person-contents{
			padding: var(--gaps) var(--gap);
			}
		}
	.submit-box{
		text-align: center;
		margin-bottom: var(--gap);
		.note{
			margin-top: var(--gaps);	
			}
		}
	}
.delivery-service-conf{
	margin-top: var(--gap);
	& li{
		display: flex;
		align-items: center;
		gap: var(--gap);
		margin-bottom: var(--gapxs);
		padding-bottom: var(--gapxs);
		border-bottom: 1px dotted var(--border-color1);
		& h4{
			border: none;
			padding: 0;
			margin: 0;
			font-size: var(--font);
			font-weight: bold;
			flex-basis: 20%;
			font-family: var(--sans-serif);
			}
		& div{
			flex-basis: 80%;
			}
		}
	}
.order-cancel-edit{
	display: flex;
	justify-content: center;
	margin-top: var(--gap);
	}
.addressbook{
	margin-bottom: var(--gap);
	.ab-hdr{
		text-align: center;
		}
	}
.paymententry-note{
	& table{
		width: 100%;
		border: 0;
		border-spacing: 0;
		}
	& th{
		border-bottom: 1px solid var(--border-color1);
		background: var(--bg-color3);
		font-weight: normal;
		width: 30%;
		}
	& th,
	& td{
		padding: var(--gaps) var(--gaps);
		border: none;
		border-bottom: 1px solid var(--border-color1);
		vertical-align: top;
		}
	}
@media screen and (max-width: 781px) {
.itemdetails{
	.itemdetails-header{
		display: none;
		}
	.itemdetail-row{
		flex-wrap: wrap;
		.item{ 
			flex: 1 1 100%;
			align-items: center;
			}
		.purchase-contents{ 
			flex: 1 1 100%;
			align-items: center;
			padding: var(--gaps) var(--gap);
			background: var(--bg-color3);
			.quantity{ flex-basis: 30%; }
			.subtotal .tax{ display: inline-block; }
			}
		}
	.item{
		flex-wrap: wrap;
		.goods-with-control{ flex: 1 1 100%;}
		.control{ flex: 1 1 100%; text-align: right; }
		}
	.control{
		.cartitem-basic-control{
			text-align: right;
			}
		}
	.itemoptions{
		border-top: 1px dashed var(--border-color1);
		justify-content: end;
		.itemoption-control{
			.formrow{ flex-wrap: nowrap; }
			.input-control{  gap: 0; }
			}
		}
	.goods{
		flex-wrap: wrap;
		.item-thumbnail-img-wrapper{ flex: 0 0 100px; }
		.goods-text{ flex: 1 1 calc( 100% - 100px - var(--gaps)); }
		.extra-controls{ flex: 1 1 100%; text-align: center; }
		}
	}
#order-entry-content,
#account__edit_regular_purchase_consignee,
#account__view_regular_purchase_orderentry{
	.panel{
		flex: 1 1 100%;
		}
	.itemdetail-row{
		.item{
			flex: 1 1 50%;
			}
		.purchase-contents{
			flex: 1 1 50%;
			}
		}
	.amount-table{
		margin: var(--gap) 0;
		width: auto;
		}
	}
.delivery-service-conf{
	& li{
		align-items: start;
		& h4{ flex-basis: 40%; }
		& div{ flex-basis: 60%; }
		}
	}
}
/*------------------------------------------------*/
#page.reason{
	.st-group.is-wrap2{
		padding: var(--gap);
		margin: var(--gap) 0;
		&:last-child{ margin-bottom: 0};
		}
	}
#page.point{
	.st-buttons.is-flex{
		align-items: unset;
		.st-button.is-next{
			flex-basis: calc( 25% - var(--gap) * 3 / 4 );
			box-sizing: border-box;
			.st-button__link{
				min-width: unset;
				display: block;
				height: 100%;
				font-size: var(--fonts);
				padding: var(--gaps);
				text-align: center;
				box-sizing: border-box;
				& strong{
					display: block;
					font-size: var(--fontm);
					}
				.material-symbols-outlined{
					display: none;
					}
				}
			}
		}
	.st-heading.is-title1{
		font-size: var(--fontl);
		& strong{
			font-size: var(--fontxl);
			}
		}
	.st-group.is-wrap1{
		background: #fff;
		}
	}
#odashi{
	--accent-color1: #c0b3a8;
	--accent-color2: #a38b78;
	--accent-color5: #c0b3a8;
	--border-color3: #c0b3a8;
	.st-image.is-mainimg{
		position: relative;
		padding-bottom: 100px;
		margin-bottom: 0;
		.back{
			width: 100%;
			height: 600px;
			object-fit: cover;
			object-position: center;
			}
		.name{
			position: absolute;
			width: 200px;
			top: 40px;
			left: 50%;
			margin-left: -100px;
			}
		.com{
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 280px;
			margin-left: -160px;
			}
		}
	}
#page.nucca,
#nucca{
	--accent-color2: #a2abbc;
	--accent-color5: #8791a5;
	--border-color3: #a2abbc;
	.st-image.is-mainimg{
		position: relative;
		padding-bottom: 200px;
		margin-bottom: 0;
		.back{
			width: 100%;
			height: 440px;
			object-fit: cover;
			object-position: center;
			}
		.name{
			position: absolute;
			width: 220px;
			top: 100px;
			left: 50%;
			margin-left: -110px;
			}
		.com{
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 300px;
			margin-left: -150px;
			}
		}
	.st-group.is-constrained:last-child{
		padding-bottom: 0;
		}
	.st-heading.is-title3{
		position: relative;
		padding-bottom: 0;
		margin-bottom: var(--gapl);
		color: var(--accent-color5);
		border: none;
		& span{
			background: #fff;
			padding: 0 var(--gaps);
			}
		&::after{
			content:"";
			display: block;
			width: 100%;
			height: 4px;
			background: var(--border-color3);
			position: absolute;
			z-index: -1;
			left: 0;
			top: var(--gap);
			bottom: unset;
			margin-left: 0;
			}
		}
	.st-heading.is-titleimg{
		position: relative;
		padding: var(--gaps) var(--gaps) var(--gaps) 100px;
		background: var(--accent-color5);
		color: #fff;
		font-size: var(--fontl);
		& img{
			max-height: 160px;
			position: absolute;
			left: 30px;
			bottom: -30px;
			}
		& bdo{
			color: #fff;
			font-size: var(--fontm);
			display: block;
			font-style: normal;
			line-height: 1.8;
			}
		}
	h3{ 
		& bdo{
			color: var(--accent-color2);
			font-size: var(--fontm);
			display: block;
			font-style: normal;
			}
		}
	h4 {
		border: none;
	    border-left: 4px solid var(--border-color3);
	    padding-bottom: 0;
		padding-left: var(--gaps);
	    margin: 0 0 var(--gaps);
	    font-weight: bold;
	    font-family: var(--sans-serif);
		&.is-title1{
			font-family: var(--serif);
			font-weight: normal;
			padding: var(--gapxs) var(--gaps);
			background: var(--accent-color5);
			}
		& bdo{
			color: var(--accent-color5);
			font-size: var(--fontl);
			font-family: var(--lang);
			text-transform: uppercase;
			}
		}
	h5 {
	    font-size: var(--font);
	    font-family: var(--sans-serif);
		}
	h5:has(strong){
		color: var(--txt-color);
		font-weight: normal;
		& strong{
			font-weight: bold;
			color:  var(--accent-color2);
			margin-right: 4px;
			}
		}
	& > .st-cover{
		.st-image img{
			max-width: 30%;
			}
		}
	.st-heading{
		&:has(img){
			display: flex;
			gap: var(--gaps) var(--gaps);
			align-items: center;
			&.is-align-center{
				justify-content: center;
				}
			}
		}
	.st-cover.is-campaign{
		height: 600px;
		&.is-position-top-right .st-cover__inner-container{
			padding-left: min(40vw, 880px);
			.st-image{
				margin: var(--gap);
				text-align: center;
				}
			.st-image img{
				max-width: 100%;
				}
			}
		}
	.st-buttons {
	    & .is-next {
	        .st-button__link {
	            min-width: unset;
		        }
		    }
		}
	.st-columns {
	    gap: var(--gap);
		&.is-columnsnucca{
			.st-column:first-child{ flex-basis: 60%; }
			.st-column:last-child{ flex-basis: calc( 40% - var(--gap)); }
			}
		}
	.st-group.is-wrappoint{
		background: var(--bg-color4);
		padding: var(--gap);
		margin-top: var(--gap);
		display: flex;
		align-items: center;
		justify-content: start;
		gap: var(--gaps);
		.is-point{
			flex: 0 0 80px;
			width: 80px;
			height: 80px;
			line-height: 80px;
			border-radius: 40px;
			text-align: center;
			background: var(--accent-color5);
			font-family: var(--lang);
			text-transform: uppercase;
			color: #fff;
			font-size: var(--font);
			}
		}
	.st-columns.columnhowto{
		position: relative;
		.st-column:last-child{
			position: relative;
			padding-right: 60px;
			box-sizing: border-box;
			}
		.st-image{
			margin: 0;
			}
		.st-image.is-imgover{
			position: absolute;
			top: 0;
			right: 0;
			width: 120px;
			margin: 0;
			}
		}
	.is-red{
		background: #c30d23;
		padding: var(--gap);
		color: #fff;
		margin: var(--gap) 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--gaps);
		}
	.is-blue{
		background: var(--accent-color5);
		padding: var(--gaps) var(--gap);
		color: #fff;
		}
	.is-blue2{
		background: #33466b;
		padding: var(--gap);
		color: #fff;
		align-items: end !important;
		}
	.st-column .is-blue{
		padding: var(--gaps) var(--gaps);
		}
	.is-yellow{
		background: #f9f3e5;
		padding: var(--gap);
		&.st-group{
			margin: var(--gap) 0;
			&:first-child{ margin-top: 0; }
			&:last-child{ margin-bottom: 0; }
			}
		}
	}
@media screen and (max-width: 781px) {
#page.point{
	.st-buttons.is-flex{
		.st-button.is-next{
			flex-basis: calc( 50% - var(--gap) / 2 );
			}
		}
	}
#page.nucca,
#nucca{
	.st-cover.is-campaign{
		height: 500px;
		&.is-position-top-right .st-cover__inner-container{
			margin-bottom: auto;
			}
		}
	}
}
@media screen and (max-width: 599px) {
#page.point{
	.st-buttons.is-flex{
		.st-button.is-next{
			flex-basis: 100%;
			}
		}
	.st-heading.is-title1{
		text-align: center;
		& strong{
			display: block;
			}
		}
	}
#odashi{
	.st-image.is-mainimg{
		padding-bottom: 80px;
		.back{
			width: 100%;
			height: 400px;
			}
		.name{
			width: 160px;
			top: 20px;
			margin-left: -80px;
			}
		.com{
			left: 50%;
			width: 200px;
			margin-left: -110px;
			}
		}
	}
#page.nucca,
#nucca{
	.st-image.is-mainimg{
		padding-bottom: 180px;
		.back{
			height: 300px;
			}
		.name{
			top: 60px;
			width: 180px;
			margin-left: -90px;
			}
		.com{
			width: 240px;
			margin-left: -120px;
			}
		}
	.st-cover.is-campaign{
		height: 400px;
		}
	.st-columns {
		&.is-columnsnucca{
			.st-column:first-child{ flex-basis: 100%; order: 2; }
			.st-column:last-child{ flex-basis: 100%; order: 1; }
			}
		}
	}
}