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

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


:root {
	--txt-color: #444;
	--accent-color1: #000;
	--accent-color2: #2bb1c9;
	--accent-color3: #666;
	--accent-color4: #c92b6b;
	
	--border-color1: #9d9d9d;
	--border-color2: #ddd;
	--border-color3: #ccc;
	
	--bg-color1: #fff;
	--bg-color2: #e8e8e8;
	--bg-color3: #f6f6f6;

	--border-radius1: 5px;
	
	--gap1: 20px;
	--gap2: 40px;
	--gap3: 80px;
	}

@media screen and (max-width: 599px) {
	:root {	
		--gap1: 3vw;
		--gap2: 6vw;
		--gap3: 9vw;
		}
}


/*
	Made by Elly Loel - https://ellyloel.com/
	参考記事:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
	メモ:
	- :where()は簡単に上書きできるように詳細度を低くするために使用しています。
*/

* {
	/* すべてのデフォルトのマージンを削除 */
	margin: 0;
	/* すべてのデフォルトのパディングを削除 */
	padding: 0;
	/* line-heightをemベースでcalc()で計算。font-sizeを小さくするとline-heightは大きくなり、font-sizeを大きくするとline-heightは小さくなります。参考: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
	line-height: calc(0.35rem + 1em + 0.35rem);
	}
	
/* より直感的なボックスサイズのモデルを使用 */
*,
::before,
::after {
	box-sizing: border-box;
	/* 要素のはみ出しを確認 */
	/*outline: 2px red solid;*/
	}
	
/* fieldset, progress, meter以外のすべての要素でボーダーを削除し、背景に適切なデフォルトを設定 */
*:where(:not(fieldset, progress, meter)) {
	border-width: 0;
	border-style: solid;
	background-origin: border-box;
	background-repeat: no-repeat;
	}
	


html {
	/* アプリケーションでパーセントによる高さを許可する	*/
	block-size: 100%;
	/* テキストのサイズはfont-sizeのみで制御されるようにする */
	-webkit-text-size-adjust: none;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size: 14px;
	}
	@media screen and (max-width: 599px) {
		html{
			font-size: 13px;
			}
	}
	/* 減速を好まないユーザーのためにスムーズなスクロールを実現 */
	@media (prefers-reduced-motion: no-preference) {
		html:focus-within {
			scroll-behavior: smooth;
			}
	}
  
body {
	/* テキストのレンダリングを改善 */
	-webkit-font-smoothing: antialiased;
	/* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
	text-rendering: optimizeSpeed;
	/* アプリケーションでパーセントによる高さを許可する */
	min-block-size: 100%;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */
	/* scrollbar-gutter: stable both-edges; バグが修正されるまで削除: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
	font-size: 1rem;
	letter-spacing: .05rem;
	line-height: 1.8;
	font-style: normal;
	}
  
	@supports (-webkit-touch-callout: none) {
		body {
			/* The hack for Safari */
			height: -webkit-fill-available;
			}
	}
/* 各メディア要素のデフォルトを改善 */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
	}
:where(img, svg, video) {
	block-size: auto;
	max-inline-size: 100%;
	max-width: 100%;
	height: auto;
	}
/* ストロークを削除し、fillの塗りつぶしカラーはフォントカラーを継承 */
:where(svg) {
	stroke: none;
	fill: currentColor;
	}
  
/* fill属性のないSVG */
:where(svg):where(:not([fill])) {
	/* fillを取り除き、ストロークのカラーはフォントカラーを継承 */
	stroke: currentColor;
	fill: none;
	/* 丸みを帯びたストローク */
	stroke-linecap: round;
	stroke-linejoin: round;
	}
  
/* width属性のないSVGのサイズを設定 */
:where(svg):where(:not([width])) {
	inline-size: 5rem;
	}
  
/* フォーム内のタイポグラフィのスタイルを削除 */
:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
	color: inherit;
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	/* -webkit-appearance: none; */
	/* -moz-appearance: none; */
	/* appearance: none; */
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	}
:where(input, button, textarea, select)::-webkit-search-decoration {
	display: none;
	}
:where(input, button, textarea, select)::focus {
	outline-offset: -2px;
	}
input:-internal-autofill-selected {
	background-image: none !important;
	background-color: transprent!important;
	}
/* textareaのサイズ変更は垂直のみにし、ブラウザがサポートしている場合にのみblockにします */
:where(textarea) {
	resize: vertical;
	}
@supports (resize: block) {
	:where(textarea) {
		resize: block;
		}
}
  
/* テキストのオーバーフローを回避 */
:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	}
  
/* リストの役割をするul、ol要素のリストスタイルを削除。デフォルトのスタイルが削除されることを示唆しています */
:where(ul, ol)[role="list"] {
	list-style: none;
	}
  
/* クラスを持たないアンカータグに、より読みやすい下線スタイルを設定。アンカータグに設定することもできますが、コンフリクトを引き起こす可能性があります */
a:not([class]) {
	text-decoration-skip-ink: auto;
	}
  
/* インタラクティブな要素は適切なカーソルを設定して操作できることを明確にする */
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
	cursor: pointer;
	touch-action: manipulation;
	}
:where(input[type="file"]) {
	cursor: auto;
	}
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
	cursor: pointer;
	}

*:focus {
	outline: none;
	}
/* フォーカスのアウトラインをアニメーション化 */
@media (prefers-reduced-motion: no-preference) {
	:focus-visible {
		transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
		}
	:where(:not(:active)):focus-visible {
		transition-duration: 0.25s;
		}
}
:where(:not(:active)):focus-visible {
	outline-offset: 5px;
	}

/* ユーザーがボタンのテキストを選択できないようにする */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	text-align: center;
	}

/* 無効化されたボタンには無効化されたカーソルを表示 */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
	cursor: not-allowed;
	}



/*===================================================================
//  common
//=================================================================*/

body {
	color: var(--txt-color);
	background-color: var(--bg-color1);
	}
a {
	color: var(--accent-color1);
	text-decoration: none;
	transition: all .3s;
	}
main a{
	text-decoration: underline;
	text-underline-offset: 3px;
	}
#top a{
	text-decoration: none;
	}
a:hover {
	color: var(--accent-color3);
	text-decoration: none;
	}
a:active {
	color: var(--accent-color3);
	text-decoration: none;
	}

.left  {float:left;}
.right {float:right;}

.alignc {text-align:center;}
.alignl {text-align:left;}
.alignr {text-align:right;}

.none         {display:none;}
.block        {display:block;}
.inline-block {display:inline-block;}
.inline       {display:inline;}
.flex         {display:flex; width: 100%;}

.hidden  {overflow:hidden;}
.visible {overflow:visible;}

.vertical-t {vertical-align:top;}
.vertical-m {vertical-align:middle;}
.vertical-b {vertical-align:bottom;}

.font-bold     {font-weight:bold;}
.font-normal   {font-weight:normal;}

.en        {font-family: "Barlow Semi Condensed", sans-serif; letter-spacing: .2rem; font-optical-sizing: auto; font-weight: 400; font-style: normal; text-transform: uppercase; }
.serif 		{font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}
.sans-serif {font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}

.radius-5 {border-radius:5px;}

.box {box-sizing:border-box;}
.relative {position:relative;}

.anime {transition:all .3s;}

.no-margin-t  {margin-top:0!important;}
.no-margin-b  {margin-bottom:0!important;}
.no-margin-l  {margin-left:0!important;}
.no-margin-r  {margin-right:0!important;}
.no-padding-t {padding-top:0!important;}
.no-padding-b {padding-bottom:0!important;}
.no-padding-l {padding-left:0!important;}
.no-padding-r {padding-right:0!important;}

.space-top          {padding-top: 2.5em;}
.space-btm          {padding-bottom: 2em;}
.contents-space-top {padding-top: 5em;}
.contents-space-btm {padding-bottom: 4.5em;}
.contents-most-top  {padding-top: 10em;}
.contents-most-btm  {padding-bottom: 10em;}

.after-arrow:after                     {content:" ≫";}
.after-endmark:not(:last-child):after  {content: " / ";}
.ellipsis                              {width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block;}

.noscroll {position: fixed; overflow-y: scroll;}
.bg-c     {background-position: center top; background-repeat: no-repeat;}

ul,ol {
  list-style: none;
}
.appear-contents,
.appear-delay > li {position: relative; opacity: 0; top: 20px; -webkit-transform: translate3d(0,0,0);}

table.base-table     {width: 100%; border-collapse: collapse;}

/*
@media(hover: hover) {
  a:hover,
  a:hover img,
  button:hover {opacity:0.7 !important; transition:all .3s; cursor: pointer;}
  a:hover img.alpha {opacity:0.7;}
}
*/

.sp {display: none;}
.pc {display: block;}

@media screen and (max-width: 599px) {
.caution.not_buy{
    flex-direction: column;
	}
	.pc {display: none;}
	.sp {display: block;}
}


/*===================================================================
//  icon
//=================================================================*/
@font-face {
	font-family: 'aveda';
	src:
		url('../fonts/aveda.ttf?p7qpcm') format('truetype'),
		url('../fonts/aveda.woff?p7qpcm') format('woff'),
		url('../fonts/aveda.svg?p7qpcm#aveda') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
	}

[class^="i-"]:before, 
[class*=" i-"]:before,
[class^="i-after-"]:after, 
[class*=" i-after-"]:after{
	font-family: 'aveda' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
[class^="i-"]:before, 
[class*=" i-"]:before {
	margin-right: 4px;
	}

[class^="i-after-"]:after,
[class*=" i-after-"]:after {
	margin-left: 4px;
	}
.i-arrow_down:before { content: "\21"; }
.i-arrow_left:before { content: "\22"; }
.i-arrow_right:before { content: "\23"; }
.i-arrow_top:before { content: "\24"; }
.i-arrow2_bottom:before { content: "\25"; }
.i-arrow2_left:before { content: "\26"; }
.i-arrow2_right:before { content: "\27"; }
.i-arrow2_top:before { content: "\28"; }
.i-blank:before { content: "\29"; }
.i-arrow_left2:before { content: "\2a"; }
.i-arrow_right2:before { content: "\2b"; }
.i-cart:before { content: "\2c"; }
.i-eye:before { content: "\2d"; }
.i-eyef:before { content: "\2e"; }
.i-facebook:before { content: "\2f"; }
.i-x:before { content: "\30"; }
.i-instagram:before { content: "\31"; }
.i-youtube:before { content: "\32"; }
.i-favorite:before { content: "\33"; }
.i-favoritef:before { content: "\34"; }
.i-home:before { content: "\35"; }
.i-mail:before { content: "\36"; }
.i-map:before { content: "\37"; }
.i-person:before { content: "\38"; }
.i-search:before { content: "\39"; }
.i-tel:before { content: "\3a"; }
.i-fax:before { content: "\3b"; }
.i-check:before { content: "\3c"; }
.i-verified:before { content: "\3d"; }
.i-remove:before { content: "\3e"; }
.i-badge:before { content: "\3f"; }
.i-edit:before { content: "\40"; }
.i-history:before { content: "\41"; }
.i-key:before { content: "\42"; }
.i-point:before { content: "\43"; }
.i-ticket:before { content: "\44"; }

.i-after-arrowright:after { content: "\23"; }
.i-after-arrowbottom:after { content: "\21"; }


a[href*="https://goo.gl/maps/"]:after,
a[target="_blank"]:after,
a[href$=".pdf"]:after{
	font-family: 'aveda' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
a[href*="https://goo.gl/maps/"]:after {
	content: " \37";
	}
a[target="_blank"]:hover:after{
	content: " \29"; 
	}


/*===================================================================
// form
//=================================================================*/
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"]{
	border: 1px solid var(--border-color3);
	background: #fff;
	padding: 5px;
	height: 40px;
	line-height: 40px;
	transition: all 0.2s ease-in-out 0s;
	border-radius: var(--border-radius1);
	font-size: 1rem;
	max-width: 100%;
	font-family: inherit;
	color: #000;
}
input[type="search"]{
	padding: 5px;
	height: 40px;
	line-height: 40px;
	}
input[type="radio"]{
	margin: 0 10px;
	}
input[type="checkbox"]{
	margin: 0 10px;
	}
input[type="submit"],
input[type="button"]{
	transition: all .3s;
	cursor: pointer;
	-webkit-appearance: none;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	padding: 8px 20px;
	min-width: 200px;
	max-width: 100%;
	line-height: 1.6;
	font-family: inherit;
	font-weight: 600;
	font-size: 1.1rem;
	z-index: 2;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	border: none;
	border: 1px solid var(--accent-color1);
	border-radius: var(--border-radius1);
	background-color: var(--accent-color1);
	color: #fff;
	}
	input[type="button"]{
		border: 1px solid var(--accent-color3);
		background-color: var(--accent-color3);
		color: #fff;
		}

	input[type="submit"]:hover{
		border: 1px solid var(--accent-color3);
		background-color: var(--accent-color3);
		color: #fff;
		}
	input[type="button"]:hover{
		background-color: #fff;
		color: var(--accent-color3);
		}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus{
	border-color: #000;
	outline: 0;
	background-color: #f0fdff;
}
textarea.line-disabled,
input[type="text"].line-disabled,
input[type="password"].line-disabled,
input[type="datetime"].line-disabled,
input[type="datetime-local"].line-disabled,
input[type="date"].line-disabled,
input[type="month"].line-disabled,
input[type="time"].line-disabled,
input[type="week"].line-disabled,
input[type="number"].line-disabled,
input[type="email"].line-disabled,
input[type="url"].line-disabled,
input[type="search"].line-disabled,
input[type="tel"].line-disabled,
input[type="color"].line-disabled,
input.input-text.line-disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="submit"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="color"]:disabled{
	background: #f2f2f2;
	cursor: no-drop;
}
textarea {
	height: auto;
	line-height: 1.8em;
	width: 98%;
}
select {
	border: 1px solid #ccc;
	height: 40px;
	color: #000;
	font-size: 1rem;
	padding: 0 15px;
	background-color: #ffffff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	background-position: 93% center;
	background-repeat: no-repeat;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
	cursor: pointer;
}
select:focus {
	border-color: #000;
}
.inputs{
	width: 100px;
	}
.inputm{
	width: 320px;
	}
.inputl{
	width: 450px;
	}
.caution{
	background: var(--bg-color3);
	border: 1px solid var(--border-color2);
	margin: var(--gap1) 0;
	padding: var(--gap1);
	border-radius: var(--border-radius1);
	font-size: .9rem;
	}
.caution.not_buy{
    justify-content: space-between;
    gap: 1rem;
    display: flex;
    align-items: center;
	}
	.caution::empty{
		display: none;
		}
	.caution.i-verified{
		display: flex;
		gap: var(--gap1);
		}
	.caution.i-verified::before{
		font-size: 50px;
		color: var(--border-color3);
		}

.error{
	background: var(--accent-color4);
	color: #fff;
	margin: var(--gap1) 0;
	padding: var(--gap1);
	border-radius: var(--border-radius1);
	font-size: .9rem;
	}
	.error::empty{
		display: none;
		}

.common_message{
    margin: var(--gap1) 0;
    padding: var(--gap1);
    border-radius: var(--border-radius1);
    font-size: .9rem;
    background: #f6f6f6;
}
.common_message::empty{
		display: none;
		}
.passcheck{
	display: block;
	text-decoration: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	}
	.passcheck::before{
			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: 40px;
			height: 40px;
			line-height: 40px;
			pointer-events: none;
			content: "\2d";
			font-size: 30px;
			}
		.passcheck.checked::before{
			content: "\2e";
			}

/*===================================================================
//  parts
//=================================================================*/

h1{
	font-size: 1.3rem;
	font-weight: normal;
	}

h2{
	font-size: 1.8rem;
	text-align: left;
	font-weight: normal;
	color: var(--accent-color1);
	margin: var(--gap2) 0;
	}
	h2:first-child{
		margin-top: 0;
		}
	h2:last-child{
		margin-bottom: 0;
		}
	h2 .en{
		display: block;
		}
	h2 .ja{
		display: block;
		font-size: .9rem;
		color: var(--accent-color3);
		margin-top: 5px;
		}
	h2.hlarge{
		font-size: 2rem;
		text-align: center;
		margin-bottom: var(--gap3);
		}

h3{
	font-size: 1.4rem;
	font-weight: normal;
	color: var(--accent-color1);
	padding: 15px 0;
	border-top: 1px solid var(--border-color1);
	border-bottom: 1px solid var(--border-color1);
	margin: var(--gap2) 0;
	}
	#top h3{
		border: none;
		padding: 0;
		}

h4{
	font-size: 1.2rem;
	background: var(--bg-color2);
	color: var(--accent-color1);
	padding: 10px var(--gap1);
	margin: var(--gap1) 0;
	font-weight: 600;
	}
h5{
	font-size: 1.2rem;
	color:  var(--accent-color1);
	padding: 0 0 0 24px;
	margin: var(--gap1) 0;
	position: relative;
	font-weight: 600;
	}
	h5:before{
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		border-radius: 9px;
		border: 1px solid var(--accent-color1);
		position: absolute;
		left: 0;
		top: 4px;
		}
h6{
	font-size: 1.1rem;
	color:  var(--accent-color1);
	font-weight: 600;
	margin: var(--gap1) 0;
	}

@media screen and (max-width: 599px) {
	h2{
		font-size: 1.4rem;
		}
	h2.hlarge{
		font-size: 1.8rem;
		}
	h3{
		font-size: 1.3rem;
		}
}


.htitle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap1);
	margin-bottom: var(--gap2);
	}
	.htitle h2{
		font-size: 1.6rem;
		margin: 0 !important;
		color: var(--accent-color1);
		}
	.htitle p{
		color: var(--accent-color3);
		margin-right: auto;
		font-size: .9rem;
		}
	.htitle a{
		font-size: .9rem;
		text-decoration: none;
		}
	@media screen and (max-width: 599px) {
		.htitle{
			display: block;
			}
		.htitle p{
			margin-top: 5px;
			}
	
	}

p + p{
	margin-top: 10px;
	}

.tagactive ol{
	margin: 30px 0 30px 20px;
	}
	.tagactive ol > li{
		list-style-type: decimal;
		margin-bottom: 10px;
		}
	.tagactive ol > li > ol > li{
		list-style-type: lower-roman;
		}
	.tagactive ol:first-child{
		margin-top: 0;
		}
	.tagactive ol:last-child{
		margin-bottom: 0;
		}
.tagactive ul{
	margin: 30px 0 30px 20px;
	}
	.tagactive ul > li{
		list-style-type: disc;
		margin-bottom: 10px;
		}
	.tagactive ul > li > ul > li{
		list-style-type: circle;
		}
	.tagactive ul:first-child{
		margin-top: 0;
		}
	.tagactive ul:last-child{
		margin-bottom: 0;
		}
.tagactive dl{
	display: flex;
	flex-wrap: wrap;
	}
	.tagactive dl dt,
	.tagactive dl dd{
		padding: var(--gap1);
		}
	.tagactive dl dt{
		flex-basis: 30%;
		border-bottom: 1px solid var(--border-color1);
		}
	.tagactive dl dd{
		flex-basis: 70%;
		border-bottom: 1px solid var(--border-color2);
		}

hr.spacer1{
	height: var(--gap1);
	}
hr.spacer2{
	height: var(--gap2);
	}

.contents{
	width: 1320px;
	max-width: 84vw;
	margin: 0 auto;
	text-align: left;
	}
	.contents.wide{
		width: 1320px;
		max-width: 96vw;

		}
	.contents.narrow{
		width: 980px;
		}
	@media screen and (max-width: 599px) {
		.contents.wide{
			max-width: 84vw;
			}
	}


main > section{
	margin: var(--gap3) 0;
	width: 100vw;
	}
	main > section + section{
		margin-top: 0;
		}


.btn1{ /* iconbtn */
	border: 1px solid var(--border-color1);
	background-color: var(--bg-color1);
	border-radius: var(--border-radius1);
	padding: 0 10px;
	color: var(--txt-color);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
	}
	.btn1:hover{
		background-color: var(--bg-color2);
		}
	.btn1::before{
		color: var(--accent-color1);
		font-size: 24px;
		margin: 0;
		}
	.btn1 .title{
		display: none;
		}
	.btn1 .cartcnt{
		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;
		}
.btn2{ 
	border: 1px solid var(--border-color1);
	border-radius: var(--border-radius1);
	background-color: var(--bg-color1);
	padding: 8px 20px;
	font-weight: normal;
	font-size: .9rem;
	color: var(--accent-color1);
	display: inline-block;
	align-items: center;
	text-decoration: none;
	text-align: center;
	}
	.btn2:hover{
		background-color: var(--bg-color3);
		color: var(--accent-color1);
		}
	@media screen and (max-width: 599px) {
		.btn2{ 
			padding: 6px 10px;
			}
	}
.btn3{ 
	border: 1px solid var(--accent-color1);
	border-radius: var(--border-radius1);
	background-color: var(--accent-color1);
	padding: 8px 20px;
	min-width: 200px;
	font-weight: 600;
	font-size: 1.1rem;
	color: #fff;
	display: inline-block;
	align-items: center;
	text-decoration: none;
	text-align: center;
	}
	.btn3:hover{
		border: 1px solid var(--accent-color3);
		background-color: var(--accent-color3);
		color: #fff;
		}

.btn4{ 
	border: 1px solid var(--accent-color2);
	border-radius: var(--border-radius1);
	background-color: var(--accent-color2);
	padding: 14px 20px;
	width: 100%;
	min-width: 200px;
	font-weight: 600;
	font-size: 1.2rem;
	color: #fff;
	display: inline-block;
	align-items: center;
	text-decoration: none;
	text-align: center;
	}
	.btn4:hover{
		border: 1px solid var(--accent-color2);
		background-color: #fff;
		color: var(--accent-color2);
		}

.btn5{ 
	border: 1px solid var(--accent-color2);
	border-radius: var(--border-radius1);
	background-color: var(--accent-color2);
	padding: 8px 20px;
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	display: inline-block;
	align-items: center;
	text-decoration: none;
	text-align: center;
	}
	.btn5:hover{
		background-color: #fff;
		color: var(--accent-color2);
		}
	@media screen and (max-width: 599px) {
		.btn5{ 
			padding: 6px 10px;
			}
	}
.btnback{ 
	border: 1px solid var(--border-color1);
	border-radius: var(--border-radius1);
	background-color: var(--bg-color1);
	padding: 18px 20px;
	font-weight: normal;
	font-size: 1rem;
	color: var(--accent-color1);
	display: inline-block;
	align-items: center;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	line-height: 1.2rem;
	}
	.btnback:hover{
		background-color: var(--bg-color3);
		color: var(--accent-color1);
		}
.btnnext,
input.btnnext{
	border: 1px solid var(--accent-color2);
	border-radius: var(--border-radius1);
	background-color: var(--accent-color2);
	padding: 18px 20px;
	min-width: 200px;
	max-width: 100%;
	font-weight: 600;
	font-size: 1.2rem;
	color: #fff;
	align-items: center;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	line-height: 1.2rem;
	}
	.btnnext:hover,
	input.btnnext:hover{
		border: 1px solid var(--accent-color2);
		background-color: #fff;
		color: var(--accent-color2);
		}

.btnnext.withdraw{
	border: 1px solid var(--accent-color4);
	background-color: var(--accent-color4);
	}
	.btnnext.withdraw:hover{
		border: 1px solid var(--accent-color4);
		background-color: #fff;
		color: var(--accent-color4);
		}

.listbtn{
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap1);
	}
	.listbtn a{
		border: 1px solid var(--border-color1);
		border-radius: var(--border-radius1);
		background-color: var(--bg-color1);
		padding: 8px 20px;
		font-weight: normal;
		font-size: .9rem;
		color: var(--accent-color1);
		display: inline-block;
		align-items: center;
		text-decoration: none;
		text-align: center;
		}
	.listbtn a:hover{
		background-color: var(--bg-color3);
		color: var(--accent-color1);
		}
	.listbtn a::after{
		color: var(--accent-color2);
		}
	@media screen and (max-width: 599px) {
		.listbtn li{
			flex-basis: calc( 50% - var(--gap1) / 2)
			}
		.listbtn a{
			display: block;
			}
	}
.columns{
	display: flex;
	justify-content: start; 
	align-items: top;
	flex-wrap: nowrap;
	gap: var(--gap2); 
	}
	.columns.columnswrap{
		flex-wrap: wrap;
		}
	.columns.columns2 .column{
		flex-basis: calc( 50% - var(--gap2) / 2 );
		}
	.columns.columns3 .column{
		flex-basis: calc( 33.333333% - var(--gap2) * 2/3 );
		}
	.columns.columns4 .column{
		flex-basis: calc( 25% - var(--gap2) * 3/4 );
		}
	.columns + .btn{
		margin-top: var(--gap2);
		text-align: center;
		}
	/* ------- wrap1 ------ */
	.columns.wrap1 .column{
		overflow: hidden;
		position: relative;
		}
	.columns.wrap1 .column .img{
		width: 100%;
		margin: 0;
		}
	.columns.wrap1 .column h3{
		font-size: 1rem;
		color: var(--accent-color1);
		text-align: left;
		margin: var(--gap1) 0 0;
		border: none;
		padding: 0;
		font-weight: 600;
		}
	.columns.wrap1 .column .category{
		margin: calc(var(--gap1)/2) 0 0;
		}
	.columns.wrap1 .column .txt{
		font-size: .9rem;
		margin: calc(var(--gap1)/2) 0 0;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		max-height: 4.86rem;
		overflow: hidden;
		}
	.columns.wrap1 .column .price{
		font-size: 1rem;
		font-size: 20px;
		color: var(--accent-color1);
		margin: calc(var(--gap1)/2) 0 0;
		font-weight: 600;
		}
	.columns.wrap1 .column .btn{
		margin: var(--gap1) 0 0;
		}
	.columns.wrap1 .favorite{
		position: absolute;
		top: 0;
		right: 0;
		}

	/* ------- descount ------ */
	.columns.wrap1 .column .discount_wrap {
    margin: calc(var(--gap1) / 2) 0 0;
	}
	/* .columns.wrap1 .column .discount_wrap .discount_amount {
		font-weight: 700;
		font-size: 12px;
    margin-right: 0.5rem;
		background-color: var(--accent-color4);
		color: #fff;
    padding: 0.2rem 0.3rem 0.1rem 0.3rem;
    border-radius: 5px;
    vertical-align: middle;
	} */
	.columns.wrap1 .column .discount_wrap .discount_ttl {
		background-color: var(--accent-color4);
		color: #fff;
    padding: 0.2rem 0.3rem 0.1rem 0.3rem;
    border-radius: 5px;
    vertical-align: middle;
		font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.5px;
	}
	.columns.wrap1 .column .price.discount {
		font-weight: 700;
		font-size: 20px;
    margin-top: 0;
    margin: calc(var(--gap1) / 3) 0 0;
    display: block;
    width: 100%;
	}
	.columns.wrap1 .column .price.normal {
		text-decoration: line-through;
		font-size: 16px;
		color: var(--border-color1);
    margin-top: 0;
    display: block;
    width: 100%;
	}






	/* ------- wrap2 ------ */
	.columns.wrap2 .column{
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: start;
		gap: var(--gap1);
		}
	.columns.wrap2 .column .img{
		flex-basis: 30%;
		min-width: 100px;
		}
	.columns.wrap2 .column .cont{
		flex-basis: 70%;
		}
	.columns.wrap2 .column h3{
		font-size: 1rem;
		color: var(--accent-color1);
		text-align: left;
		margin: 5px 0 0;
		border: none;
		padding: 0;
		font-weight: 600;
		}

	/* ------- wrap3 ------ */
	.columns.wrap3 .column{
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--gap1);
		}
	.columns.wrap3 .column .img{
		flex-basis: 45%;
		}
	.columns.wrap3 .column .cont{
		flex-basis: 55%;
		}
	.columns.wrap3 .column h3{
		text-align: left;
		margin: 0;
		border: none;
		padding: 0;
		}
	.columns.wrap3 .column .txt{
		margin: var(--gap1) 0 0;
		}
	.columns.wrap3 .column .btn{
		margin: var(--gap1) 0 0;
		}
	@media screen and (max-width: 781px) {
		.columns{
			flex-wrap: wrap;
			}
		.columns.columns2 .column{
			flex-basis: 100%;
			}
		.columns.columns4 .column{
			flex-basis: calc( 50% - var(--gap2) / 2 );
			}
	}
	@media screen and (max-width: 599px) {
		.columns.columns3 .column{
			flex-basis: 100%;
			}
	}

.frame1{
	border: 1px solid var(--border-color2);
	padding: var(--gap3);
	border-radius: var(--border-radius1);
	}

.aspect{
	width: 100%;
	overflow: hidden;
	position: relative;
	}
	.aspect1-1{
		aspect-ratio: 1 / 1;
		}
	.aspect16-9{
		aspect-ratio: 16 / 9;
		}
	.aspect a{
		display: block;
		width: 100%;
		height: 100%;
		}
	.aspect img{
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		display: block;
		padding: 0;
		z-index: 0;
		box-sizing: border-box;
		object-fit: contain;
		object-position: center;
		}
	.aspect.cover img{
		object-fit: cover;
		}
	.aspect iframe{
		width: 100%;
		height: 100%;
		}


.category{
	display: flex;
	flex-wrap: wrap;
	/* gap: 5px; */
	}
	.category a{
		font-size: .8rem;
		font-weight: bold;
		display: inline-block;
		color: #fff;
		background: var(--accent-color3);
		padding: 0 10px;
		border-radius: var(--border-radius1);
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
    margin: 2px;
		}

.date{
	font-size: .9rem;
	color: var(--accent-color3);
	font-family: "Barlow Semi Condensed", sans-serif;
	letter-spacing: .15rem;
	}


.logowrap{
	}
	.logowrap > *{
		display: block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		text-indent: -9999px;
		transition: .3s;
		}
	.logowrap .logo{
		background-image: url(../images/logo.png);
		width: 140px;
		height: 30px;
		}
	.logowrap .logol{
		background-image: url(../images/logo3.png);
		width: 258px;
		height: 70px;
		}
	.logowrap .logo2{
		background-image: url(../images/logo2.png);
		width: 100px;
		height: 100px;
		}

.favorite a{
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	overflow: hidden;
	text-decoration: none;
	}
	.favorite a::before{
		display: block;
		font-size: 24px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		margin: 0;
		}
	.favorite a.i-favorite{
		color: var(--accent-color1);
		}
	.favorite a:hover,
	.favorite a.i-favoritef{
		color: var(--accent-color2);
		}


.tabmenu{
	max-width: 100vw;
    overflow: auto;
	}
	.tabmenu ul{
		display: flex;
		align-items: end;
		gap: var(--gap1);
		justify-content:space-around;
		}
	.tabmenu li{
		flex: 1 1 30%;
		text-align: center;
		padding: var(--gap2) var(--gap2) var(--gap1);
		background: var(--bg-color3);
		border-radius: var(--border-radius1) var(--border-radius1) 0 0;
		cursor: pointer;
		transition: .3s;
		}
	.tabmenu li.current{
		background: var(--bg-color2);
		padding: var(--gap2);
		}
	.tabmenu li:hover{
		padding: var(--gap2);
		}
	.tabmenu li .en{
		display: block;
		font-size: 1.6rem;
		color: var(--accent-color1);
		white-space: nowrap;
		}
	.tabmenu li .ja{
		display: block;
		font-size: .9rem;
		white-space: nowrap;
		}
	@media screen and (max-width: 781px) {
		.tabmenu li{
			padding: var(--gap2) var(--gap1) var(--gap1);
			}
		.tabmenu li.current{
			padding: var(--gap2) var(--gap1) ;
			}
		.tabmenu li:hover{
			padding: var(--gap2) var(--gap1) ;
			}
	}
	@media screen and (max-width: 599px) {
			.tabmenu{
			margin:0px 2rem;
			}
		.tabmenu li .en{
			display: none;
			}
		.tabmenu ul{
			gap: 10px;
			justify-content: start;
			}

		.tabmenu li{
			padding: var(--gap1) var(--gap1) 10px;
			}
		.tabmenu li.current{
			padding: var(--gap1) var(--gap1) ;
			}
		.tabmenu li:hover{
			padding: var(--gap1) var(--gap1) ;
			}
	}

.tabcontents{
	background: var(--bg-color2);
	padding: var(--gap3) 0;
	display: none;
	}
	#top_searchitem > .tabcontents:first-of-type{
		display: block;
		}
	.tabcontents h2{
		display: none;
		}
	.tabcontents section{
		}
	.tabcontents section + section{
		margin-top: var(--gap2);
		}
	.tabcontents section > h3{
		margin: 0 0 var(--gap2);
		position: relative;
		padding-left: 26px !important;
		}
	.tabcontents section > h3:before{
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		border-radius: 9px;
		border:1px solid var(--accent-color1);
		position: absolute;
		left: 0;
		top: 5px;
		}
	@media screen and (max-width: 599px) {
		.tabcontents h2{
			display: block;
			}
	}

.sortbox{
	display: block;
	display: flex;
	justify-content: end;
	margin-bottom: var(--gap2);
	}
	.sortbox form{
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--bg-color3);
		padding: 10px var(--gap1);
		}

.sortbox + .pagenav {
    margin-top: 0px;
    margin-bottom: 3rem;
}


	.sortbox select{
		max-width: 120px;
		}
	@media screen and (max-width: 599px) {
		.sortbox{
			display: block;
			}
		.sortbox form{
			justify-content: end;
			}
	}

.breadcrumb {
	padding: 10px 0;
	font-size: .8rem;
	background: var(--bg-color3);
	width: 100vw;
	}
	.breadcrumb:has(+ .breadcrumb){
		display: none;
		}
	.breadcrumb ul{
		display: flex;
		flex-wrap: wrap;
    gap: 1.5rem;
		}

/*
	.breadcrumb li:not(:last-child)::after {
		display: inline-block;
		content: "\23";
		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: #666;
		font-size: 10px;
		margin: 0 5px;
		}
*/

	.breadcrumb li:not(:last-child)::after {
		display: inline-block;
		content: "\23";
		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: #666;
		font-size: 10px;
		margin: 0 5px;
		position: absolute;
		top: 0;
 		right: -1.5rem;
		}
	.breadcrumb li{
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100%;
		/*overflow: hidden;*/
    position: relative;
		}
	@media screen and (max-width: 599px) {
		.breadcrumb {
			padding: 10px 0 0;
			background: none
			}
	}

.splide .splide__arrow {
    background: none;
    border-radius: 0;
    cursor: pointer;
	width: 50px;
	height: 50px;
    display: block;
    opacity: 1;
    padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.splide .splide__arrows svg{
		display: none;
		}
	.splide .splide__arrow::before{
		content: "";
		width: 30px;
		height: 30px;
		transform: rotate(45deg);
		}
	.splide .splide__arrow--prev::before{
		border-bottom: 1px solid var(--border-color1);
		border-left: 1px solid var(--border-color1);
		}
	.splide .splide__arrow--next::before{
		border-top: 1px solid var(--border-color1);
		border-right: 1px solid var(--border-color1);
		}
	.splide .splide__pagination {
		position: absolute;
		bottom: 0;
		padding: 0;
		}
	.splide .splide__pagination__page {
		background: var(--border-color2);
		border: 0;
		border-radius: 0;
		display: inline-block;
		width: 20px;
		height: 5px;
		margin: 0;
		opacity: 1;
		padding: 0;
		}
	.splide .splide__pagination__page.is-active {
		background: var(--border-color1);
		transform: unset;
		z-index: 1
		}

.forms dl{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--border-color1);
	}
	.forms dl:has( + dl){
		border-bottom: none;
		}
	.forms dl dt,
	.forms dl dd{
		display: block;
		padding: var(--gap1);
		}
	.forms dl dt{
		flex-basis: 30%;
		width: 30%;
		border-top: 1px solid var(--border-color1);
		font-weight: bold;
		color: var(--accent-color1);
		}
	.forms dl dd{
		flex-basis: 70%;
		width: 70%;
		border-top: 1px solid var(--border-color2);
		position:relative;
		}
	.forms dl dd + dd{
		margin-left: 30%;
		}
	.forms em {
		display: inline-block;
		color: #fff;
		font-style: normal;
		background: var(--accent-color2);
		font-weight: bold;
		font-size: .8rem;
		padding: 0 10px;
		border-radius: var(--border-radius1);
		margin-left: 5px;
		}
	.forms dt b {
		display: none;
		}
	.forms small {
	    display: block;
	    padding-top: 8px;
	    font-size: .9rem;
		}
	.forms i{
		font-style: normal;
		font-size: .9rem;
		}
	.forms dd.zip i a{
		display: none;
		}
	.forms dd input[type=text],
	.forms dd input[type=tel],
	.forms dd input[type=email],
	.forms dd input[type=number],
	.forms dd input[type=password] {
		width: 500px;
		max-width: 100%;
		}
	.forms dd.name input {
		width: 120px;
		}
	.forms dd.zip input,
	.forms dd.tel input,
	.forms dd.salon input,
	.forms dd.birth input,
	.forms dd.credit input,
	.forms dd.security input{
		width: 90px;
		}
	.forms dd.credit input{
		width: 70px;
		}
		.forms dd.birth.edit input[readonly]{
		pointer-events: none;
		background-color: #ededed;
		color: #888;
		}

	.forms dd.totalprice{
		font-size: 2rem;
		color: var(--accent-color1);
		}
	.forms .termscheck{
		text-align: center;
		}
		.forms small .red{
		color:var(--accent-color4);
		}
	.forms .termscontent{
		height: 200px;
		overflow: scroll;
		border: 1px solid var(--border-color2);
		padding: var(--gap1);
		margin: var(--gap1) 0;
		text-align: left;
		}
	.forms .termscontent h3{
		border: none;
		padding: 0;
		font-size: 1.2rem;
		margin: var(--gap1) 0;
		}
	@media screen and (max-width: 599px) {
		.forms dl{
			display: block;
			flex-wrap: wrap;
			border-bottom: 1px solid var(--border-color2);
			}
		.forms dl dt{
			width: auto;
			padding: var(--gap1) 0;
			border-top: 1px solid var(--border-color2);
			}
		.forms dl dd{
			width: auto;
			border-top: none;
			padding-top: 0;
			padding: 0 0 var(--gap1);
			}
		.forms dl dd + dd{
			margin-left: 0;
			}
		.forms .next{
			flex-wrap: wrap;
			}
		.forms .next > *{
			flex-basis: 100%;
			}
		.forms dd.credit input{
			width: 50px;
			}
	}

.next{
	margin-top: var(--gap2);
	background: var(--bg-color3);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: var(--gap1);
	justify-content: space-between;
	border-radius: var(--border-radius1);
	border: 1px solid var(--border-color2);
	}
        #cart .cart_wrapper_inner .next{
    flex-wrap: wrap;
    justify-content: end;

}
#cart .cart_wrapper_inner .next p {
    width: 100%;
}
	.next.top{
		margin-top: 0;
		margin-bottom: var(--gap2);
		}
	.next p{
		margin-right: auto;
		}
	@media screen and (max-width: 599px) {
		.next{
			flex-wrap: wrap;
			}
		.next > *{
			flex-basis: 100%;
			}
		.next.has-back .btnnext{
			order: 2;
			}
		.next.has-back .btnback{
			order: 3;
			}
	}

.progresstrackers{
	display: flex;
	justify-content:space-evenly;
	position: relative;
	margin-bottom: var(--gap2);
	}
	.progresstrackers::before{
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		position: absolute;
		top: 25px;
		z-index: -1;
		background: var(--border-color2);
		}
	.progresstracker{
		flex: 1 1 20%;
		text-align: center;
		}
	.progresstracker .num{
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 25px;
		text-align: center;
		background: var(--border-color2);
		font-family: "Barlow Semi Condensed", sans-serif;
		font-size: 20px;
		color: #fff;
		margin: 0 auto;
		}
	.progresstracker .txt{
		color: var(--accent-color3);
		margin-top: 5px;
		font-size: .9rem;
		padding: 0 5px;
		}
	.progresstracker.current .num{
		background: var(--accent-color2);
		}
	.progresstracker.current .txt{
		color: var(--accent-color1);
		}

.pagenav{
	margin: var(--gap3) 0 0;
	}
	.pagenav ul{
		display: flex;
		gap: 10px;
		justify-content: center;
		flex-wrap: wrap;
		}
	.pagenav li > a,
	.pagenav li > span{
		display: block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid var(--border-color1);
		border-radius: var(--border-radius1);
		}
	.pagenav li > span{
		border: 1px solid var(--border-color2);
		color: var(--border-color2);
		}
	.pagenav li.current > span{
		border: 1px solid var(--accent-color1);
		background: var(--accent-color1);
		color: #fff;
		}
	.pagenav li a{
		text-decoration: none;
		}
		.pagenav li.selected a {
		background: #000;
		border: 1px solid #000;
		color: #fff;
		}
	.pagenav li a:hover{
		background: var(--bg-color2)
		}
	.pagenav li span::before{
		margin: 0;
		}
	@media screen and (max-width: 599px) {
		.pagenav ul:has( > li:nth-child(8)) li.page:not(.current){
			display: none;
			}
		.pagenav ul:has( > li:nth-child(8)) li.current + li.page,
		.pagenav ul:has( > li:nth-child(8)) li.current + li.page + li.page,
		.pagenav ul:has( > li:nth-child(8)) li.page:has(+ li.current),
		.pagenav ul:has( > li:nth-child(8)) li.page:has(+ li.page + li.current){
			display: block;
			}
	}