@charset "UTF-8";
/* CSS Document */

#not_found .contents p{
text-align:center;
}
#not_found .contents .more_btn_outer {
    text-align: center;
    margin-top: var(--gap2);
}

#wrapper{
	}
	#wrapper:before{
		content: "";
		display: block;
		height: 70px;
		}
	.headernone #wrapper:before{
		display: none;
		}

header{
	background-color: var(--bg-color1);
	position: fixed;
	z-index: 1000;
	width: 100vw;
	top: 0;
	left: 0;
	}
	header .contents{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap1);
		padding: 10px 0;
		}
	header .logowrap{
		margin-right: auto;
		}

.fixed header{
	}
	@media screen and (max-width: 781px) {
		header .contents{
			gap: 10px;
			}
		header .logowrap a.logo{
			width: 110px;
			height: 26px;
			}
	}
	@media screen and (max-width: 599px) {
		#wrapper:before{
			/*height: 112px;*/
			height: 165px;
			}
		header .contents{
			padding: 0 0;
			}
		header .logowrap a.logo{
			width: 90px;
			height: 26px;
			}
	}
.loggedout header .contents.wide{
min-height:70px;
}
nav.navmain{
	display: block;
	position: absolute;
	top: 0;
	left: -70vw;
	width: 70vw;
	height: 100vh;
	background: #fff;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	}
	nav.navmain > ul{
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap1); 
		padding: var(--gap2) var(--gap2) 110px; 
		}
	nav.navmain > ul > li{
		flex-basis: calc( 50% - var(--gap1) / 2 );
		padding-bottom: var(--gap1);
		border-bottom: 1px solid var(--border-color2);
		}
	nav.navmain > ul > li:first-child{
		flex-basis: 100%;
		}
	nav.navmain .mainmenu > a{
		font-size: 1.3rem;
		padding: 8px 0;
		color: var(--accent-color1);
		padding: 8px;
		display: flex;
		align-items: center;
		gap: 5px;
		}
	nav.navmain .mainmenu > a > .ja{
		font-size: .8rem;
		color: var(--accent-color3);
		margin-left: auto;
		}
	nav.navmain .submenu.depth1{
		display: block;
		}
	nav.navmain .submenu.depth1 > ul > li > a{
		display: block;
		padding: 8px 20px 8px 30px;
		position: relative;
		color: var(--accent-color1);
		}
	nav.navmain .submenu.depth1 > ul > li > a::before{
		content: "";
	    width: 12px;
	    height: 12px;
		border: 1px solid var(--accent-color3);
	    border-radius: 6px;
	    margin-right: 6px;
		position: absolute;
		left: 10px;
		top: 13px;
		transition: all .3s;
		}
	nav.navmain .submenu.depth1 > ul > li > a.slide::after{
		content: "\21";
		font-family: 'aveda';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 10px;
		color: var(--border-color1);
		line-height: inherit;
		position: absolute;
		right: 10px;
		top: 50%;
		line-height: 10px;
		margin-top: -5px;
		}
	nav.navmain .submenu.depth1 > ul > li > a.slideup::after{
		content: "\24";
		}
	nav.navmain .submenu.depth2{
		padding: 0 0 0 5px;
		display: none;
		}
	nav.navmain .submenu.depth2 > ul > li > a{
		display: block;
		padding: 4px 20px;
		position: relative;
		color: var(--txt-color);
		font-size: .9rem;
		letter-spacing: 0;
		}
	nav.navmain .submenu.depth2 > ul > li > a::before{
	    content: "";
	    display: block;
	    width: 1px;
	    height: 16px;
	    position: absolute;
	    left: 10px;
	    top: 9px;
	    background-image: linear-gradient(to bottom, var(--accent-color3), var(--accent-color3) 1px, transparent 1px, transparent 1px);
	    background-size: 1px 3px;
	    background-repeat: repeat-y;
		}
	nav.navmain .submenu.depth2 > ul > li > a::after{
		content: "\23";
		font-family: 'aveda';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 10px;
		color: var(--border-color1);
		line-height: inherit;
		position: absolute;
		right: 10px;
		top: 50%;
		line-height: 10px;
		margin-top: -5px;
		}
	nav.navmain a:hover{
		background: #fafafa;
		}
	nav.navmain li.current > div > a,
	nav.navmain li.current > a{
		background: var(--bg-color3);
		}
	nav.navmain .cartcnt{
		display: inline-block;
		background-color: var(--accent-color2);
		width: 18px;
		height: 18px;
		font-size: 12px;
		font-weight: normal;
		border-radius: 9px;
		text-align: center;
		line-height: 18px;
		font-family: "Barlow Semi Condensed", sans-serif;
		color: #fff;
		margin: 0 0 0 5px; 
		}
	@media screen and (max-width: 1000px) {
		nav.navmain > ul > li{
			flex-basis: 100%;
			}
		nav.navmain .submenu.depth1{
			display: none;
			}
	}
	@media screen and (max-width: 599px) {
		nav.navmain{
			left: -80vw;
			width: 80vw;
			}
	}

nav.navsub{
	flex-basis: 65%;
	}
	nav.navsub > ul{
		display: flex;
		gap: var(--gap1);
		}
	nav.navsub > ul > li:nth-child(2){
		margin-left: auto;
		}
	nav.navsub a.i-search{
		display: none;
		}
	@media screen and (max-width: 781px) {
		nav.navsub > ul{
			gap: 10px;
			}
	}
	@media screen and (max-width: 599px) {
		nav.navsub .btn1{
			border: none;
			padding: 0;
			border-radius: 0;
			background: none !important;
			min-width: unset;
			padding: 0 5px;
			}
		nav.navsub .btn1::before{
			font-size: 30px;
			}
		nav.navsub > ul{
			justify-content: end;
			gap: 10px;
			}
		nav.navsub > ul > li:nth-child(2) {
			margin-left: 0;
			}
		nav.navsub a.i-search{
			display: block;
		    align-items: center;
		    justify-content: center;
		    text-decoration: none;
		    width: 40px;
		    height: 50px;
		    line-height: 50px;
			overflow: hidden;
			cursor: pointer;
			opacity: 0;
			transition: .3s;
			}
		nav.navsub a.i-search::before {
			display: block;
		    width: 40px;
		    height: 50px;
		    line-height: 50px;
			text-align: center;
	        font-size: 26px;
			margin: 0;
			color: var(--accent-color1) !important;
		    }
		.fixed nav.navsub a.i-search{
			opacity: 1;
			}
	}

.searchbox{
	margin-top: 5px;
	}
	.searchbox form{
		position: relative;
		margin: 0 auto;
		/*width: 40vw;*/
		width: 50vw;
		max-width: 500px;
		display: flex;
		border: 1px solid var(--border-color1);
		border-radius: var(--border-radius1);
		overflow: hidden;
		}
	.searchbox.sp form{
		width: auto;
		max-width: 100%;
		}
	.searchbox select{
		background: #fff;
		border: none;
		border-radius: 0;
	    -webkit-appearance: none !important;
		height: 40px;
	    line-height: 40px;
		border-right: 1px solid var(--border-color1);
		position: relative;
		font-size: inherit;
		color: var(--txt-color);
		font-size: .9rem;
		padding: 0 30px 0 10px;
		/*width: 100px;*/
		width: fit-content;
		}
	.searchbox input{
		display: block;
	    max-width: 100%;
		width: 100%;
	    height: 40px;
	    line-height: 40px;
	    padding: 0 40px 0 10px;
	    color: var(--accent-color1);
	    border: none;
	    outline: none;
	    background: #fff;
		border: none;
		border-radius: 0;
	    -webkit-appearance: none !important;
		font-size: .9rem;
		}
	.searchbox button{
		display: block;
		width: 40px;
		height: 40px;
		opacity: 0;
		border: 0;
		background: transparent;
		-webkit-appearance: none !important;
		margin: 0 !important;
		position: absolute;
		top: 0;
		right: 0;
		}
	.searchbox form::before,
	.searchbox:has(select) form::after{
		display: block;
		font-family: 'aveda' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: var(--accent-color3);
		width: 22px;
		height: 22px;
		line-height: 22px;
		position: absolute;
		pointer-events: none;
		}
	.searchbox form::before{
		content: "\39";
		font-size: 22px;
		top: 9px;
		right: 9px;
		}
	.searchbox:has(select) form::after{
		content: "\21";
		font-size: 14px;
		top: 9px;
		/*left: 75px;*/
		left: calc(50% - 1.5rem);
		}

	@media screen and (max-width: 1024px) {
		.searchbox select {
		width: 130px;
		}

		.searchbox:has(select) form::after {
		left: 100px;
		}
	}

	@media screen and (max-width: 599px) {
		.search .searchbox{
			background: var(--bg-color3);
			margin: 0;
			padding: 10px 0;
			position: absolute;
			top: 50px;
			left: 0;
			width: 100%;
			z-index: -2;
			transition: .3s;
			}
		.searchbox form{
			width: 84vw;
			display: flex;
			flex-direction: column;
			}

			.searchbox:has(select) form::after {
			left: auto;
			right: 40px;
			}

			.searchbox input {
			border-top: 1px solid var(--border-color1);
			padding-right: 10px;
			}

			.searchbox select {
			width: calc(100% - 40px);
			}
		header::before{
			content: "";
			display: block;
			width: 100vw;
			height: 50px;
			background-color: var(--bg-color1);
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			}
		.fixed .search .searchbox{
			top: -60px;
			}
		.fixed .search .searchbox.show{
			top: 50px;
			}
	}



.empty_wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    min-height: 200px;
    justify-content: center;
}
.empty_wrap span{
    font-size:3rem;
}


.overlay {
    display:none;
    background: #00000022;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.overlay.active{
    display: flex;
}

.overlay .popup {
    background: #fff;
    padding: 32px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    position: relative;
    border-radius: 8px;
    text-align: center;
}



#addToCartForm .is_limit_item{
    margin-top: 0.5rem;
    text-align: right;
    display: block;
    font-size:15px;
}
#addToCartForm .is_limit_item small{
    display: block;
}
#addToCartForm .is_limit_item div{
    display: flex;
    flex-direction: column;
}
.overlay .popup.cart {
    text-align:initial;
}
.overlay .popup i {
    font-size: 3rem;
}

.overlay .popup i.i-favoritef{
color: var(--accent-color2);
}

.menu-trigger{
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	min-width: 30px;
	display: block;
	text-align: center;
	}
	.menu-trigger i{
		display: none;
		}
	.menu-trigger .icon,
	.menu-trigger .icon span {
		display: block;
		transition: all .3s;
		box-sizing: border-box;
		}
	.menu-trigger .icon{
		display: inline-block;
		vertical-align: middle;
		position: relative;
		width: 30px;
		height: 19px;
		cursor: pointer;
		}
	.menu-trigger .icon span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: var(--accent-color1);
		}
	.menu-trigger .icon span:nth-of-type(1) {
		top: 0;
		}
	.menu-trigger .icon span:nth-of-type(2) {
		top: 9px;
		}
	.menu-trigger .icon span:nth-of-type(3) {
		bottom: 0;
		}
	.menuopen .menu-trigger .icon span:nth-of-type(1) {
		transform: translateY(9px) rotate(-45deg);
		}
	.menuopen .menu-trigger .icon span:nth-of-type(2) {
		opacity: 0;
		}
	.menuopen .menu-trigger .icon span:nth-of-type(3) {
		transform: translateY(-9px) rotate(45deg);
		}
	#wrapper{
		transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
		}
	.menuopen #wrapper{
		transform: translateX(70vw);
		overflow: visible;
		}
	.menuopen #wrapperoverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgb(0 0 0 / 5%);
		z-index: 999;
		}
	.menuopen header {
		z-index: 1000;
		}
	@media screen and (max-width: 599px) {
		.menuopen #wrapper{
			transform: translateX(80vw);
			}
	}


footer{
	background: var(--bg-color1);
	border-top: 1px solid var(--bg-color2);
	text-align: center;
	}
	footer .contents{
		padding: var(--gap3) 0;
		}
	footer .logowrap{
		text-align: center;
		margin-bottom: var(--gap3);
		}
		footer .logowrap > *{
			margin: 0 auto;
			}
		footer .logowrap > .logo2{
			margin-top: var(--gap1);
			}
	footer .sitemap{
		display: flex;
		justify-content: center;
		}
		footer .sitemap ul{
			padding: 0 var(--gap2);
			flex-basis: 30%;
			}
		footer .sitemap ul:not(:first-child){
			border-left: 1px solid var(--border-color2);
			}
		footer .sitemap ul li{
			margin: 10px 0;
			}
		footer .sitemap ul li a{
			font-size: .9rem;
			text-decoration: none;
			}
	footer .snslink{
		display: flex;
		justify-content: center;
		margin-top: var(--gap2);
		}
		footer .snslink li{
			width: 40px;
			height: 40px;
			position: relative;
			overflow: hidden;
			}
		footer .snslink li:before{
			font-size: 20px;
			line-height: 40px;
			width: 40px;
			height: 40px;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			pointer-events: none;
			}
		footer .snslink li a{
			display: block;
			width: 40px;
			height: 40px;
			text-align: left;
			text-indent: -9999px;
			}
	footer #copyright{
		background: var(--bg-color1);
		border-top: 1px solid var(--bg-color3);
		}
		footer #copyright .contents{
			text-align: center;
			font-size: .8rem;
			color: var(--accent-color3);
			padding: var(--gap2);
			}
	footer #gotop{
		color: var(--accent-color1);
		background: var(--bg-color1);
		border: 1px solid var(--border-color1);
		position: fixed;
		z-index: 10;
		bottom: 2vw;
		right: 2vw;
		text-align: center;
		width: 50px;
		height: 50px;
		text-decoration: none;
		border-radius: var(--border-radius1);
		}
		footer #gotop:before{
			display: block;
			margin: 0;
			font-size: 1rem;
			text-align: center;
			line-height: 50px;
			}
		footer #gotop span{
			display: none;
			}
		footer #gotop:hover{
			background-color: var(--bg-color2);
			}


	@media screen and (max-width: 781px) {
		footer .sitemap ul{
			padding: 0 var(--gap2);
			flex-basis: 50%;
			}
	}
	@media screen and (max-width: 599px) {
		footer .sitemap{
			display: none;
			}
		footer .logowrap{
			margin: 0;
			}
		footer .logowrap > .logo{
			width: 110px;
	        height: 26px;
			}
		footer .logowrap > .logo2{
			width: 80px;
			height: 80px;
			}
	}

/* -------- top ---------------*/
#top_mainvisual{
	}
	#top_mainvisual #main-carousel{
		padding: 0 var(--gap3) var(--gap2);
		}
	#top_mainvisual .inner{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		gap: var(--gap3);
		}
	#top_mainvisual .img{
		flex-basis: 50%;
		}
	#top_mainvisual .img + .cont{
		flex-basis: 50%;
		}
	#top_mainvisual .cont{
		padding: 0;
		flex-basis: 90%;
		}
	#top_mainvisual h3{
		font-size: 1.8rem;
		color: var(--accent-color1);
		margin: 0;
		}
	#top_mainvisual .txt{
		margin: var(--gap1) 0 0;
		}
	#top_mainvisual .btn{
		margin: var(--gap1) 0 0;
		}
	#top_mainvisual .btn .btn2{
		min-width: 200px;
		}
	@media screen and (max-width: 781px) {
		#top_mainvisual #main-carousel{
			padding: 0 0 var(--gap2);
			}
		#top_mainvisual .inner{
			gap: var(--gap2);
			}
		#top_mainvisual .splide__arrows{
			display: none;
			}
	}
	@media screen and (max-width: 599px) {
		#top_mainvisual{
			margin-top: var(--gap2);
			}
		#top_mainvisual .inner{
			flex-wrap: wrap;
			gap: var(--gap1);
			}
		#top_mainvisual .img{
			flex-basis: 100%;
			max-width: 280px;
			}
		#top_mainvisual .cont{
			flex-basis: 100% !important;
			}
	}
#top_topics{
	border-top: 1px solid var(--border-color2);
	border-bottom: 1px solid var(--border-color2);
	}
	#top_topics .contents{
		display: flex;
		align-items: center;
		}
	#top_topics .htitle{
		margin: 0;
		display: flex;
		align-items: center;
		border-right: 1px solid var(--border-color2);
		margin-right: var(--gap2);
		padding-right: var(--gap2);
		}
	#top_topics .htitle h2{
		font-size: 1rem;
		margin: 0;
		}
	#top_topics .htitle a{
		display: none;
		}
	#top_topics .cont{
		display: flex;
		align-items: center;
		gap: 10px;
		}
	#top_topics h3{
		font-size: 1rem;
		margin: 0;
		}
	#top_topics h3 a{
		display: block;
		padding: 10px 0;
		}
	#top_topics h3 span{
		display: block;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-height: 24px;
		height: 24px;
		text-overflow: ellipsis;
		overflow: hidden;
		}
	@media screen and (max-width: 599px) {
		#top_topics .htitle{
			margin-right: 10px;
			padding-right: 10px;
			}
		#top_topics .cont{
			display: block;
			padding-top: 10px;
			}
		#top_topics h3 a{
			padding-top: 0;
			}
	}

#top_campaign{
	background: var(--bg-color3);
	padding: var(--gap3) 0;
	margin-bottom: 0;
	}

/* -------- login ---------------*/
#login{
	}
	#login_form{
		}
		#login_form .contents{
			background: url(../images/imglogin01.png) no-repeat left center;
			background-size: 48%;
			padding-left: 45%;
			}
		#login_form.passwordreset .contents{
			background: none;
			padding-left: 22.5%;
			padding-right: 22.5%;
			margin: 0 auto;
			}
		#login_form .logowrap{
			text-align: center;
			}
		#login_form .logowrap span{
			margin: 0 auto;
			}
		#login_form h1{
			margin-top: var(--gap1);
			text-align: center;
			font-size: 1.2rem;
			}
		#login_form article{
			margin-top: var(--gap2);
			}
		#login_form article + article{
			margin-top: var(--gap2);
			padding-top: var(--gap2);
			border-top: 1px solid var(--border-color2);
			}
		#login_form h2{
			margin-bottom: var(--gap1);
			}
		#login_form article label{
			display: block;
			margin-top: 10px;
			color: var(--accent-color1);
			}
		#login_form article .input{
			position: relative;
			}
		#login_form article input[type="text"],
		#login_form article input[type="password"]{
			width: 100%;
			font-weight: bold;
			color: #000;
			font-size: 1.1rem;
			font-family: "Barlow Semi Condensed", sans-serif;
			letter-spacing: .2rem;
			padding: 0 10px;
			}
		#login_form article .btnarea{
			margin-top: var(--gap1);
			}
		#login_form article .btnarea .btn3{
			width: 100%;
			}
		#login_form article .btnarea + .sub{
			margin-top: var(--gap1);
			}
	
	#login_special{
		background: var(--bg-color3);
	    padding: var(--gap3) 0;
		}
		#login_special .columns.loginwrap1 .column .img{
			width: 180px;
			max-width: 100%;
			margin: 0 auto;
			}
		#login_special .columns.loginwrap1 .column h3{
			font-size: 1.2rem;
			color: var(--accent-color1);
			text-align: center;
			margin: var(--gap1) 0 0;
			border: none;
			padding: 0;
			font-weight: 600;
			}
		#login_special .columns.loginwrap1 .column .txt{
			margin: var(--gap1) 0 0;
			}
	#login_start{
		}
		#login_start ol{
			display: flex;
			gap: var(--gap3);
			counter-reset: number 0;
			}
		#login_start ol li{
			border: 1px solid var(--border-color1);
			padding: var(--gap2);
			border-radius: var(--border-radius1);
			position: relative;
			flex-basis: 33.333333%;
			}
		#login_start ol li::before{
			counter-increment: number 1;
			content: counter(number);
			display: block;
			font-family: "Barlow Semi Condensed", sans-serif;
			font-size: 1.6rem;
			display: block;
			text-align: center;
			margin-bottom: 10px;
			color: var(--accent-color3);
			}
		#login_start ol li:not(:last-child)::after{
			content: "";
			width: 20px;
			height: 20px;
			transform: rotate(45deg);
			border-top: 1px solid var(--border-color1);
			border-right: 1px solid var(--border-color1);
			position: absolute;
			top: 50%;
			right: calc( -1 * var(--gap3) / 2 );
			margin-top: -10px;
			margin-right: -5px;
			}
	#login_faq{
		background: var(--bg-color3);
	    padding: var(--gap3) 0;
		margin-bottom: 0;
		}
		#login_faq .faq dl dd{
			background: #fff;
			}
	#login_next{
		background: var(--bg-color2);
		padding: var(--gap3) 0;
		margin-bottom: 0;
		}
		#login_next h2{
			font-size: 1.2rem;
			text-align: center;
			}
		#login_next .btn{
			display: flex;
			justify-content: center;
			gap: var(--gap2);
			}
	@media screen and (max-width: 781px) {
		.logowrap .logol{
			height: 50px;
			}
		#login_form h1{
			font-size: 1.1rem;
			}
		#login_form .contents{
			background: url(../images/imglogin01.png) no-repeat center bottom;
			background-size: 100%;
			padding-left: 0;
			}
		#login_form.passwordreset .contents{
			padding-right: 0;
			padding-left: 0;
			}
		#login_form .wrap{
			width: 400px;
			max-width: 100%;
			background: #ffffffbf;
			padding: var(--gap2);
			margin: 0 auto;
			box-shadow: 0 0 20px #e8e5e0;
			border-radius: var(--border-radius1);
			margin-top: var(--gap2);
			}
		#login_form article{
			margin-top: 0;
			}
		#login_form article + article{
			margin-top: var(--gap1);
			padding-top: var(--gap1);
			border-top: 1px solid var(--border-color2);
			}
	}
	@media screen and (max-width: 599px) {
		.logowrap .logol{
			height: 40px;
			}
		#login_special .columns.loginwrap1{
			gap: 0;
			}
		#login_start ol{
			flex-wrap: wrap;
			}
		#login_start ol li{
			flex-basis: 100%;
			}
		#login_start ol li:not(:last-child)::after{
			border-top: none;
			border-right: 1px solid var(--border-color1);
			border-bottom: 1px solid var(--border-color1);
			top: unset;
			bottom: calc( -1 * var(--gap3) / 2 );
			left: 50%;
			right: unset;
			margin-top: 0;
			margin-bottom: -5px;
			margin-left: -10px;
			margin-right: 0;
			}
		#login_next{
			background: var(--bg-color2);
			padding: var(--gap3) 0;
			margin-bottom: 0;
			}
			#login_next h2{
				font-size: 1.2rem;
				text-align: center;
				}
			#login_next .btn{
				flex-wrap: wrap;
				gap: var(--gap1);
				flex-direction: column-reverse;
				}
			#login_next .btn > *{
				flex-basis: 100%;
				}
	}

/* -------- item list ---------------*/
#item_list{
	}
	#item_list .btn{
		margin-top: var(--gap3);
		}
	#item_list .btn2{
		min-width: 300px;
		cursor: pointer;
		}

/* -------- item detail ---------------*/
#item_detail{
	}
	#item_detail .repeat{
		border: 1px solid var(--border-color2);
		margin-bottom: var(--gap2);
		padding: 20px;
		color: var(--accent-color1);
		border-radius: var(--border-radius1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--bg-color3);
		gap: 10px;
		}
	#item_detail .itemcontent{
		display: flex;
		gap: var(--gap2);
		}
	#item_detail .itemimg{
		flex-basis: 50%;
		display: flex;
		gap:2rem;
		}
		#item_detail #main-carousel{
			order:2;
			}
		#item_detail #thumbnail-carousel{
			order:1;
			}
		#item_detail #main-carousel .splide__slide{
			background-size: contain !important;
			max-height: 550px;
			}
		#item_detail #main-carousel .splide__slide img{
			width: 100%;
			height: 100%;
			object-fit: contain;
			}
		#item_detail #thumbnail-carousel .splide__track{
			max-height: 550px;
			}
		#item_detail #thumbnail-carousel .splide__slide {
			opacity: 0.6;
			background-size: contain !important;
			border: 1px solid transparent;
			}
		#item_detail #thumbnail-carousel .splide__slide.is-active {
			border: 1px solid var(--border-color1);
			}
		#item_detail #thumbnail-carousel .splide__slide.is-active {
			opacity: 1;
			}
	#item_detail .itemdetail{
		flex-basis: 50%;
		}
		#item_detail .copy{
			font-size: 1.4rem;
			}
		#item_detail .txt{
			margin-top: var(--gap2);
			}

		#item_detail .variation {
			/*margin-top: var(--gap2);
			border-top: 1px solid var(--border-color2);*/
			border-bottom: 1px solid var(--border-color2);
			display: block;  
			padding: 0;
			}

		#item_detail .variation+.information{
				margin-top:0px;
			}
			#item_detail .variation dl {
				padding: 15px 0;
				}
			#item_detail .variation dt{
				text-align: center;
				margin-bottom: 10px;
				}
			#item_detail .variation dt span:not(:first-child)::before{
				content: " / ";
				}
			#item_detail .variation dd {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 2%;
				row-gap: 10px;
				}
			#item_detail .variation input[type="radio"]{
				position: absolute;
				white-space: nowrap;
				width: 1px;
				height: 1px;
				overflow: hidden;
				border: 0;
				padding: 0;
				clip: rect(0 0 0 0);
				clip-path: inset(50%); 
				margin: -1px;
				}
			#item_detail .variation label{
				padding: 22px 10px 18px 10px;
				border-radius: var(--border-radius1);
				text-align: center;
				cursor: pointer;
				border: 1px solid var(--border-color2);
				position: relative;
				display: flex;
				flex-wrap: wrap;
				flex-basis: 32%;
				text-align: center;
				align-items: center;
				justify-content: center;
				max-width: 115px;
				}
				#item_detail .variation label:has(input:disabled) {
				pointer-events: none;
				opacity: 0.5;
				background: #ddd;
				}
			#item_detail .variation label:has(input[type="radio"]:checked) {
				border: 1px solid var(--border-color1);
				}
			#item_detail .variation label:hover{
				border: 1px solid var(--border-color3);
				}
			#item_detail .variation label > span{
				display: block;
				white-space: nowrap;
				}
			#item_detail .variation label	.discount_amount {
				background-color: var(--accent-color4);
				color: #fff;
				font-weight: 700;
				font-size: 12px;
				margin-right: 0.5rem;
				padding: 0rem 0.3rem 0rem 0.3rem;
				border-radius: 5px 0;
				vertical-align: middle;
				position: absolute;
				top: -1px;
				left: -1px;
			}
			#item_detail .variation .var_1,
			#item_detail .variation .var_2{
				font-size: 1rem;
				color: var(--accent-color1);
				}
			#item_detail .variation .size{
				font-size: 1.2rem;
				color: var(--accent-color1);
				display: block;
				width: 100%;
				}

			/* ------- descount ------ */
			#item_detail .information .discount_wrap {
				margin: calc(var(--gap1) / 10) 0 0;
			}
			#item_detail .information .discount_wrap .discount_ttl {
				background-color: var(--accent-color4);
				color: #fff;
				font-weight: 700;
				font-size: 12px;
				letter-spacing: 0.5px;
				margin-right: 0.5rem;
				padding: 0.2rem 0.5rem 0.2rem 0.5rem;
				border-radius: 5px;
				vertical-align: middle;
			}
			#item_detail .information .discount_wrap .discount_period {
				color: var(--accent-color4);
				font-weight: 700;
				font-size: 12px;
				letter-spacing: 0.2px;
    		vertical-align: bottom;
			}
			#item_detail .variation .price{
				display: block;
				color: var(--accent-color3);
				display: block;
				width: 100%;
				}
				
			#item_detail .variation .price.normal {
				display: block;
				color: var(--accent-color3);
				font-size: 16px;
				text-decoration: line-through;
				color: var(--border-color1);
				}

			#item_detail .information .price .normal .mark,
			#item_detail .information .price .normal .num {
				color: var(--accent-color3);
				font-size: 16px;
				text-decoration: line-through;
				color: var(--border-color1);
				}
				
			#item_detail .variation .price.discount {
				display: block;
				color: var(--accent-color1);
				font-size: 20px;
				}
			#item_detail .variation .price.deducted {
				display: block;
				color: var(--accent-color1);
				font-size: 12px;
				}
			#item_detail .variation .var_ttl {
				font-size: 0.8rem;
				}
			#item_detail .variation .var_outofstock{
				color: var(--border-color2);
				border: 1px dashed var(--border-color2) !important;
				pointer-events: none;
				}
			#item_detail .variation label.var_outofstock > span{
				color: var(--border-color1);
				}
			#item_detail .variation .var_outofstock .txt.red {
				color: var(--accent-color4);
				}
			#item_detail .outofstock_txt {
				color: var(--accent-color4);
				font-size: 1.1rem;
				font-weight: bold;
				}
			#item_detail .btn4.outofstock {
				border: 1px solid #ccc;
				background-color: #ccc;
				color: #fff;
				pointer-events: none;
				}

/*
.contents em {
	color: #666;
	font-size: 1.1rem;
	font-style: normal;
	display: block;
	font-weight: bold;
	margin-bottom: 0.5rem;
	}
#item_detail .itemdetail .txt_2 {
	margin-top: 1rem;
	}
#item_detail .variation {
	display: block;  
	padding: 0px 0;
	}
#item_detail .variation dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 15px 0;
	}
#item_detail .variation dt {
	flex-basis: 30%;
	}
#item_detail .variation dd {
	display: flex;  
	justify-content: left;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	width: 70%;
	}
#item_detail .variation .var_1,
#item_detail .variation .var_2,
#item_detail .variation .size {
	font-size: 0.8rem;
	white-space: nowrap;
	display: block;
	}
#item_detail .variation .var_1 .var_txt,
#item_detail .variation .var_2 .var_txt {    
	font-size: 1rem;
	color: #000;
	}
#item_detail .variation .var_ttl {
	font-size: 0.8rem;
	}


.outofstock_txt {
	color: #c92b6b;
	font-size: 1.1rem;
	font-style: normal;
	display: block;
	font-weight: bold;
	margin-bottom: 0.5rem;
	}
.outofstock {
	border: 1px solid #ccc;
	background-color: #ccc;
	}
.outofstock:hover {
	border: 1px solid #ccc;
	background-color: #ccc;
	color: #fff;
	}
.var_outofstock {
	color: #999;
	border-style: dashed!important;
	}
#item_detail .variation .var_outofstock .var_2,
#item_detail .variation .var_outofstock .size {
	color: #999;
	}
#item_detail .variation .var_outofstock .txt.red {
	color: #c92b6b;
	}
*/

		#item_detail .information{
			margin-top: var(--gap2);
			}
			#item_detail .information dl{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding: 15px 0;
				border-bottom: 1px solid var(--border-color2);
				}
			#item_detail .information dl dt{
				flex-basis: 24%;
				}
			#item_detail .information dl dd{
				flex-basis: 76%;
				color: var(--accent-color1);
				}
			#item_detail .information .price .descount_aomunt {
				font-size: 2.4rem;
				color: #fff;
				background-color: var(--accent-color4);
				border-radius: 3px;
				font-size: 18px;
				letter-spacing: 0.5px;
				margin-right: 0.5rem;
				padding: 0.2rem 0.3rem 0.1rem 0.3rem;
				border-radius: 5px;
				vertical-align: middle;
			}
			#item_detail .information .price .num,
			#item_detail .information .price .mark{
				font-size: 2.4rem;
				color: var(--accent-color1);
				/* letter-spacing: .2rem; */
 			  letter-spacing: 0.05px;
				vertical-align: middle;
				}
			#item_detail .information .price .postage,
			#item_detail .information .price .postage .num {
				color: var(--accent-color3);
				font-size: 1.1rem;
				font-weight: bold;
				}

			#item_detail .information .limit_per_time b{

			}
		#item_detail .next{
			margin-top: var(--gap2);
			background: var(--bg-color3);
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-radius: var(--border-radius1);
			border: 1px solid var(--border-color2);
			}
			#item_detail .next .buynum{
				flex-basis: 30%;
				}
			#item_detail .next .btn4{
				flex-basis: 70%;
				}
			#item_detail .next .btn4.disabled{
			background: #ddd;
			border-color: #ddd;
			pointer-events: none;
			}
			#item_detail .next .pointfavorite{
				flex-basis: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid var(--border-color2);
				padding-top: 10px;
				}
			#item_detail .next .buynum{
				flex-basis: 30%;
				}
			#item_detail .next .btn4{
				flex-basis: calc( 70% - var(--gap1) );
				margin-left: auto;
				}
			#item_detail .favorite a{
				display: block;
				width: auto;
				height: 40px;
				line-height: 40px;
				text-align: left;
				text-decoration: none;
				}
			#item_detail .favorite a::before{
				display: inline-block;
				vertical-align: middle;
				width: auto;
				height: auto;
				margin-right: 3px;
				}
			#item_detail .buynum{
				display: flex;
				}
			#item_detail .buynum label{
				display: none;
				}
			#item_detail .buynum input{
				background: transparent;
				border: none;
				width: 3rem;
				font-size: 1.4rem;
				text-align: center;
				cursor: default;
				color: #000;
				-webkit-text-fill-color:#000;
				opacity: 1;
				}
			#item_detail .buynum button{
				border: 1px solid var(--border-color1);
				border-radius: var(--border-radius1);
				width: 40px;
				height: 40px;
				font-size: 1.4rem;
				background: #fff;
				}
	@media screen and (max-width: 1120px) {
		#item_detail .next .buynum{
			flex-basis: 100%;
			display: flex;
			justify-content: center;
			}
		#item_detail .next .btn4{
			flex-basis: 100%;
			}
	}
	@media screen and (max-width: 781px) {
		#item_detail .itemcontent{
			flex-wrap: wrap;
			}
		#item_detail .itemimg,
		#item_detail .itemdetail{
			flex-basis: 100%;
			}
	}
	@media screen and (max-width: 599px) {
		#item_detail .repeat{
			flex-wrap: wrap;
			gap: 10px;
			}
		#item_detail .repeat a{
			display: block;
			margin: 0 auto;
			}
		#item_detail #main-carousel .splide__slide{
			max-height: 400px;
			}
		#item_detail #thumbnail-carousel .splide__track{
			max-height: 400px;
			}
		#item_detail .next .pointfavorite{
			flex-wrap: wrap;
			}
		#item_detail .next .point,
		#item_detail .next .favorite{
			flex-basis: 100%;
			text-align: center;
			}
		#item_detail .next .favorite a{
			text-align: center;
			}
	}

/* -------- guide ---------------*/
#guide{
	font-size: 1.1rem;
	}
	.faq dl{
		display: block;
		margin: 0 0 0 var(--gap2);
		}
	.faq dl dt{
		display: block;
		border: none;
		padding: 10px 0;
		display: flex;
		cursor: pointer;
		}
	.faq dl dt::before{
		content: "Q";
		font-family: "Barlow Semi Condensed", sans-serif;
		font-size: 1.6rem;
		color: var(--accent-color3);
		margin-right: 10px;
		}
	.faq dl dd{
		border: none;
		background: var(--bg-color3);
		padding: var(--gap2);
		padding-left: calc( var(--gap2) + 30px);
		border-radius: var(--border-radius1);
		position: relative;
		margin-left: var(--gap2);
		display: none;
		}
	.faq dl dd::before{
		content: "A";
		font-family: "Barlow Semi Condensed", sans-serif;
		font-size: 1.6rem;
		color: var(--accent-color3);
		position: absolute;
		left: var(--gap2);
		}
	.faq h5{
		font-size: 1rem;
		}
	.faq h5:before{
		width: 14px;
		height: 14px;
		border-radius: 7px;
		top: 5px;
		}
	@media screen and (max-width: 599px) {
		.faq dl{
			margin: 0;
			}
		.faq dl dd{
			padding-left: var(--gap2);
			margin-left: 0;
			}
		.faq dl dd::before{
			position: static;
			display: block;
			margin-bottom: 10px;
			}
	}

/* -------- information ---------------*/
#information{
	}
	#information #list .columns .column .img{
		border: 1px solid var(--border-color2);
		}
	#information #list .columns{
		gap: var(--gap3);
		}
	#information #list .columns.columns2 .column{
		flex-basis: calc( 50% - var(--gap3) / 2 );
		}
	#information #list .columns.columns2 a{
		text-decoration: none;
		}
	#information #detail .title{
		border-bottom: 1px solid var(--border-color1);
		padding-bottom: var(--gap1);
		margin-bottom: var(--gap1);
		}
	#information #detail .date{
		margin-bottom: var(--gap1);
		}
	#information #detail .img{
	margin: var(--gap3);
		}
	#information #detail .cont{
		line-height: 2;
		word-break:break-all;
		font-size: 1.1rem;
		}

		#information #detail .img img {
		max-height: 300px;
		display: block;
		margin: 0 auto;
		}
	@media screen and (max-width: 781px) {
		#information #list .columns{
			gap: var(--gap2);
			}
		#information #list .columns.columns2 .column{
			flex-basis: 100%;
			}
	}

/* -------- salonsearch ---------------*/
#salonsearch{
	margin-bottom: var(--gap1);
	}
	#salonsearch dl{
		border: 0;
		}
#salonresult{
	margin-left: 30%;
	padding: var(--gap1) var(--gap2) var(--gap2);
	border: 1px solid var(--border-color1);
	background-color: var(--bg-color1);
	border-radius: var(--border-radius1);
	}
	#salonresult dl{
		border: 0;
		}
	#salonresult dt,
	#salonresult dd{
		border: 0;
		padding: 0;
		margin-top: var(--gap1);
		}
	#salonresult dt{
		flex-basis: 25%;
		width: 25%;
		}
	#salonresult dd{
		flex-basis: 75%;
		width: 75%;
		}
	#salonresult .salonname{
		font-size: 1.1rem;
		font-weight: bold;
		color: var(--accent-color1);
		}
	#salonresult .staffname{
		font-size: 1.1rem;
		font-weight: bold;
		color: var(--accent-color1);
		}
	#salonresult .staff{
		display: flex;
		justify-content: start;
		align-items: center;
		gap: var(--gap1);
		}
	#salonresult .img{
		width: 90px;
		height: 90px;
		border: 1px solid var(--border-color2);
		border-radius: 45px;
		overflow: hidden;
		}
		#salonresult .img img {
			object-fit: cover;
		}
	#salonresult .next{
		margin-top: var(--gap1);
		}
	@media screen and (max-width: 599px) {
		#salonresult{
			margin-left: 0;
			}
		#salonresult dl{
			display: flex;
			flex-wrap: wrap;
			}
	}

#download{
	.contents{
		text-align: center;
		& > p{
			max-width: 500px;
			margin: 0 auto;
			text-align: left;
			}
		& > .img{
			max-width: 300px;
			margin: var(--gap2) auto 0;
			}
		}
	.htitle{
		justify-content: center;
		& h2{
			text-align: center;
			}
		.en{
			display: inline-block;
			color: var(--accent-color1);
			margin: 0 20px 0 0;
			}
		.ja{
			display: inline-block;
			font-size: 2.2rem;
			color: var(--accent-color1);
			margin: 0;
			}
		}
	.wrapapp{
		background: var(--bg-color1);
		border-radius: var(--border-radius1);
		padding: var(--gap2);
		margin: var(--gap2) 0;
		
		& h3{
			border: none;
			padding: 0;
			margin: 0;
			font-size: 2rem;
			margin-bottom: var(--gap1);
			}
		& h3 span{
			color: var(--accent-color2);
			}
		& ul{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--gap1);
			}
		& ul li:nth-child(1) img{ width: 140px; }
		& ul li:nth-child(2) img{ width: 192px; }
		& ul li:nth-child(3) img{ width: 229px; }
		& li a {
			padding: 0 1rem;
		}
		}
	#downloadtop{
		.logowrap{
			display: flex;
			justify-content: center;
			}
		& h1{
			margin-top: var(--gap1);
			text-align: center;
			font-size: 1.2rem;
			}
		& h2{
			margin-top: var(--gap3);
			text-align: center;
			font-size: 2.4rem;
			}
		& p{
			max-width: 500px;
			margin: 0 auto;
			text-align: left;
			}
		& ul{
			margin-top: var(--gap2);
			display: flex;
			justify-content: center;
			gap: var(--gap3);
			counter-reset: section;
			}
		& li{
			counter-increment: section;
			}
		& li:not(:first-child){
			border-left: 1px solid var(--border-color2);
			padding-left: var(--gap3);
			}
		& li a{
			display: block;
			text-decoration: none;
			position: relative;
			padding: 60px 0 175px;
			}
		& li a:before{
			content: counter(section);
			display: block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			margin-left: -25px;
			background: var(--accent-color2);
			border-radius: 25px;
			color: #fff;
			font-family: "Barlow Semi Condensed", sans-serif;
			font-size: 22px;
			position: absolute;
			left: 50%;
			top: 0;
			}
		& li a:after{
			display: block;
			font-family: 'aveda' !important;
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			color: var(--accent-color3);
			width: 20px;
			height: 20px;
			line-height: 20px;
			margin-left: -10px;
			pointer-events: none;
			content: "\21";
			font-size: 20px;
			position: absolute;
			left: 50%;
			bottom: 0;
			}
		.title{
			display: block;
			height: 3.5rem;
			}
		.img{
			display: block;
			position: absolute;
			width: 100px;
			height: 154.7px;
			bottom: 20px;
			left: 50%;
			margin-left: -50px;
			}
		}
	#download01{
		background: var(--bg-color3);
		padding: var(--gap3) 0;
		.contents > p{
			text-align: center;
			}
		.txt{
			margin-top: var(--gap1);
			text-align: left;
			}
		.sub{
			color: var(--accent-color3);
			font-size: .9rem;
			text-align: left;
			}
		}
	#download02{
		}
	#download03{
		background: var(--bg-color3);
		padding: var(--gap3) 0;
		}
	#download04{
		.wrapapp{
			padding: 0 var(--gap2);
	        margin: 0;
			}
		}	
	}
	@media screen and (max-width: 599px) {
	#download{
		.contents > .img{
			max-width: 240px;
			}
		.htitle{
			.en{ font-size: 1.4rem; }
			.ja{ font-size: 1.8rem; }
			}
		.wrapapp{
			& h3{ font-size: 1.6rem; }
			& ul{
				flex-wrap: wrap;
				}
			& ul li{ flex-basis: calc( 50% - var(--gap1)/2 );}
			& ul li:first-child{ flex-basis: 100%; }
			& ul li img{ margin: 0 auto; }
			}
		#downloadtop{
			& h2{
				font-size: 2rem;
				}
			& ul{
				gap: var(--gap2);
				}
			& li{
				flex-basis: 33%;
				}
			& li:not(:first-child){
				border-left: 0;
				padding-left: 0;
				}
			& li a{
				padding: 50px 0 155px;
				}
			& li a:before{
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin-left: -20px;
				border-radius: 20px;
				font-size: 18px;
				}
			.title{
				height: 5rem;
				}
			.img{
				width: 80px;
				height: 124px;
				margin-left: -40px;
				}
			}
		#download01{
			.contents > p {
	            text-align: left;
		        }
			}	
		}

	}