@charset "UTF-8";

:root {
  --usr-scrollbar-width: 0;
	
  --color-base:   #333333;
  --color-main:   #41140E;
  --color-sub:    #E25213;
  --color-bg:     #F2F2F2;
  --color-sale:   #E25213;
  --color-alert:  #E25213;
	--color-valid:  #EEF8FA;
	
  --color-red:    #E62019;
  --color-orange: #E25213;
  --color-yellow: #FFDC76;
  --color-green:  #C4DE47;
  --color-blue:   #1C99B9;
  --color-salmon: #FFF2ED;
  --color-cream:  #FFF7E2;
  --color-gold:   #BC8B2A;
  --color-brown:  #41140E;
  --color-gray:   #666666;
	
  --button-bg1:   #E25213;
  --button-bg2:   #41140E;
  --button-bg3:   #C9C9C9;
  --button-bg4:   #333333;
  --button-bg5:   #FFDC76;
	
  --font-size-H1:      28px;
  --font-size-H2:      24px;
  --font-size-H3:      20px;
  --font-size-H4:      18px;
  --font-size-H5:      16px;
	
  --font-size-xlarge:  18px;
  --font-size-large:   16px;
  --font-size-main:    15px;
  --font-size-sub:     14px;
  --font-size-small:   13px;
  --font-size-xsmall:  12px;
	
	--line-height-low:    1.2;
	--line-height-middle: 1.6;
	--line-height-high:   2.0;
	
	--border-radius: 8px;
	--border-radius-half: 4px;
	
	--border-dot:    #C9C9C9 2px dotted;
	--border-solid1: #DEDEDE 1px solid;
	--border-solid2: #F9F9F9 1px solid;
	--border-solid3: #C9C9C9 1px solid;
	
	--ttl-image1: url("../../img/usr/common/ico_title_bg.png");
	
	--image-arrow-w:  url("../../img/usr/common/ico_arrow_w.png");
	--image-arrow-bl: url("../../img/usr/common/ico_arrow_bl.png");
	--image-arrow-br: url("../../img/usr/common/ico_arrow_br.png");
	--image-arrow-or: url("../../img/usr/common/ico_arrow_or.png");
	--image-arrow-go: url("../../img/usr/common/ico_arrow_go.png");
	
	--image-icon-blank:    url("../../img/usr/common/ico_blanklink.png") no-repeat center center / 14px 14px;
	--image-icon-blank-or: url("../../img/usr/common/ico_blanklink_or.png") no-repeat center center / 14px 14px;
	--image-icon-blank-w:  url("../../img/usr/common/ico_blanklink_w.png") no-repeat center center / 14px 14px;
	
	--opacity:      0.7;
	--transition:   0.3s;
	--box-shadow: 0 2px 4px rgb(0,0,0,0.1);
	--box-shadow-item: 0 3px 9px 0 rgb(0,0,0,0.06);
	
	/* 標準フォント */
	--font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	
	/* レイアウト左右の余白 */
	--layout-basic-padding: 20px;
	--layout-basic-padding-minus: -20px;
	
	/* ヘッダーの高さ */
	--layout-header-height: 58px;
	
	/* 商品一覧 カートボタン */
	--goods-list-cart-height: 36px;
	--goods-list-cart-font-size: 15px;
	--goods-list-cart-icon-padding: 20px;
	--goods-list-cart-icon-image: url("../../img/usr/common/ico_cart_br.png");
	--goods-list-cart-icon-position: calc(50% - 2.3em) center;
	--goods-list-cart-icon-size: 23px auto;
	
	/* 商品一覧 サブカテゴリー */
  --sub-category-item-height: 43px;
  --sub-category-item-a-padding: 2px 30px 2px 20px;
	
	/* 商品詳細用ブックマークアイコン */
	--goods-bookmark-icon-white:        url("../../img/usr/common/ico_goods_bookmark_white.png");
	--goods-bookmark-icon-gray:         url("../../img/usr/common/ico_goods_bookmark_gray.png");
	--goods-bookmark-icon-black-solid:  url("../../img/usr/common/ico_goods_bookmark_black_solid.png");
	--goods-bookmark-icon-orange:       url("../../img/usr/common/ico_goods_bookmark_orange.png");
	--goods-bookmark-icon-orange-solid: url("../../img/usr/common/ico_goods_bookmark_orange_solid.png");
	--goods-bookmark-icon-gold:         url("../../img/usr/common/ico_goods_bookmark_gold.png");
	--goods-bookmark-icon-gold-solid:   url("../../img/usr/common/ico_goods_bookmark_gold_solid.png");
	--goods-bookmark-icon-blue:         url("../../img/usr/common/ico_goods_bookmark_blue.png");
	--goods-bookmark-icon-blue-solid:   url("../../img/usr/common/ico_goods_bookmark_blue_solid.png");
	
	/* 注文フローSTEP */
	--order-flow-step-color : #F5F5F5;
	--order-flow-step-color-active : #E25213;
}

body {
  font-family: var(--font-family);
	font-size: var(--font-size-main);
	font-weight: 500;
  color: var(--color-base);
}

body * { box-sizing: border-box;}
img    { max-width: 100%; vertical-align: top;}
a      { color: var(--color-base);}

/* fade image in after load */
.lazyload    { opacity: 0;}
.lazyloading { opacity: 1;}
.lazyloaded  { opacity: 1; transition: opacity 200ms;}

#loading { display: none;}
#loading.spinner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start; background: #FFF; position: fixed; left: 0; z-index: 3;}
.spin-loader { position: relative; margin-top: 50px;}
.spin-loader > div { width: 5px; height: 15px; animation-fill-mode: both; position: absolute;}
.spin-loader > div { border-radius: 2px; margin: 2px; background: gray;}
.spin-loader > div:nth-child(1) { top:     20px; left:        0; animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;}
.spin-loader > div:nth-child(2) { top:  13.64px; left:  13.64px; transform: rotate(-45deg); animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;}
.spin-loader > div:nth-child(3) { top:        0; left:     20px; transform: rotate(90deg); animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;}
.spin-loader > div:nth-child(4) { top: -13.64px; left:  13.64px; transform: rotate(45deg); animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;}
.spin-loader > div:nth-child(5) { top:    -20px; left:        0; animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;}
.spin-loader > div:nth-child(6) { top: -13.64px; left: -13.64px; transform: rotate(-45deg); animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;}
.spin-loader > div:nth-child(7) { top:      0px; left:    -20px; transform: rotate(90deg); animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;}
.spin-loader > div:nth-child(8) { top:  13.64px; left: -13.64px; transform: rotate(45deg); animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;}

@keyframes line-spin-fade-loader { 
	50%  { opacity: .3;}
  100% { opacity:  1;}
}

/* Vue fade-in */
.fade-enter-active,
.fade-leave-active { transition: opacity 0.2s;}
.fade-enter,
.fade-leave-to { opacity: 0;}

.for-device-pc { display: none !important;}

@media screen and (min-width: 1001px) {
	.for-sp { display: none !important;}
}
@media screen and (max-width: 1000px) {
	.for-pc { display: none !important;}
}

/* ----------------------------------
 表示デバイス切替ボタン
---------------------------------- */
#switchObject { display: none !important;}

/* ----------------------------------
 Headline
---------------------------------- */
h1, .h1 { padding: 0; margin: 0 0 24px; border: 0; font-size: var(--font-size-H1); font-weight: 700; text-align: center; line-height: var(--line-height-low); color: var(--color-main); background: none;}
h2, .h2 { padding: 0; margin: 0 0 16px; border: 0; font-size: var(--font-size-H2); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main); background: none;}
h3, .h3 { padding: 0; margin: 0 0 16px; border: 0; font-size: var(--font-size-H3); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main); background: none;}
h4, .h4 { padding: 0; margin: 0; border: 0; font-size: var(--font-size-H4); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main); background: none;}
h5, .h5 { border: 0; font-size: var(--font-size-H5); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main); background: none;}

h1[class*="block"][class*="-header"] { margin: 0 0 24px;}
h2[class*="block"][class*="-header"] { margin: 0 0 16px;}

.legend {
	padding: 0 0 0 36px;
	margin: 30px 0 20px;
	border: none;
	font-size: var(--font-size-H3);
	font-weight: 700;
	line-height: var(--line-height-low);
	color: var(--color-main);
	background: none;
	position: relative;
}
.legend::before {
	content: '';
	width: 24px;
	height: 24px;
	background-image: var(--ttl-image1);
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
	position: absolute;
	top: 0;
	left: 0;
}

/* ----------------------------------
 Design Headline
---------------------------------- */
.design-headline {
	padding: 0 0 0 36px;
	margin: 0 0 20px;
	font-size: var(--font-size-H3);
	font-weight: 700;
	line-height: var(--line-height-low);
	color: var(--color-main);
	position: relative;
}
.design-headline::before {
	content: '';
	width: 24px;
	height: 24px;
	background-image: var(--ttl-image1);
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
	position: absolute;
	top: 0;
	left: 0;
}

.design-block-title {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-size: var(--font-size-H2);
  font-weight: 700;
	text-align: left;
	line-height: 1.0;
  letter-spacing: 0.04em;
	color: var(--color-main);
}
.design-block-title .ttl {
  font-size: var(--font-size-H2);
  font-weight: 700;
	line-height: 1.0;
  letter-spacing: 0.04em;
	color: var(--color-main);
}
.design-block-title .eng {
	margin: 16px 0 0;
  font-size: var(--font-size-sub);
  font-weight: 700;
	color: var(--color-gold);
  display: block;
}

/* ----------------------------------
 Form Parts
---------------------------------- */
/* input */
input[type="text"],
input[type="tel"],
input[type="zip"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
	max-width: 100%;
  min-height: 42px;
  padding: 4px 10px;
  border: #C9C9C9 1px solid;
  border-radius: var(--border-radius-half);
  outline: none;
	font-size: var(--font-size-sub);
	font-weight: 500;
  background-color: #FFF;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
	max-width: 100%;
  height: 42px;
  padding: 4px 20px 4px 6px;
  border: var(--border-solid3);
  border-radius: var(--border-radius-half);
  outline: none;
	font-weight: 500;
  line-height: 34px;
  background-color: #FFF;
	background-image: url("../../img/usr/common/ico_select_bg.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 6px) center;
	-webkit-background-size: 8px auto;
	background-size: 8px auto;
}
input[type="number"] {
	max-width: 100%;
  min-width: 50px;
  min-height: 42px;
  padding: 4px;
  border: var(--border-solid3);
  border-radius: var(--border-radius-half);
	font-weight: 500;
  outline: none;
  background-color: #FFF;
  box-sizing: border-box;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="text"][name="name"],
input[type="text"][name="name2"],
input[type="text"][name="s_name"],
input[type="text"][name="s_name2"],
input[type="text"][name="d_name"],
input[type="text"][name="d_name2"],
input[type="text"][name="kana"],
input[type="text"][name="kana2"],
input[type="text"][name="s_kana"],
input[type="text"][name="s_kana2"],
input[type="text"][name="d_kana"],
input[type="text"][name="d_kana2"] { width: 200px;}

/* radio */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  margin-right: 5px;
  border: var(--border-solid3);
  border-radius: 10px;
  background: #FFF;
  position: relative;
  outline: 0;
  transition: 0.3s;
}
input[type="radio"]:before {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0;
  border: #FFF 1px solid;
  border-radius: 10px;
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  display: block;
  background: #FFF;
  transition: 0.3s;
}
input[type="radio"]:checked {}
input[type="radio"]:checked:before { border: var(--color-main) 1px solid; background: var(--color-main);}
input[type="radio"]:checked + label { font-weight: 700;}

/* checkbox */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  margin-right: 5px;
  border: var(--border-solid3);
	border-radius: var(--border-radius-half);
  background: #FFF;
  position: relative;
  outline: 0;
  transition: 0.3s;
}
input[type="checkbox"]:before { transition: 0.3s;}
input[type="checkbox"]:checked { border: var(--color-sub) 1px solid; background: var(--color-sub);}
input[type="checkbox"]:checked:before {
  content: "";
  width: 10px;
  height: 6px;
  margin: 0;
  border-right: #FFF 2px solid;
  border-top: #FFF 2px solid;
  transform: rotate(135deg);
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 4px);
  display: block;
}
input[type="checkbox"]:checked + label { font-weight: 700;}

input[name="pwd_display"] { margin-top: -5px;}
.page-estimate input[name="pwd_display"] { margin-top: 0;}

select[name*="card_y"],
select[name*="year"],
select[name*="yy_"]  { min-width: 6em; text-align: center;}
select[name*="card_method"],
select[name*="card_divide"],
select[name*="card_m"],
select[name*="month"],
select[name*="date"],
select[name*="mm_"],
select[name*="dd_"] { min-width: 4em; text-align: center;}

.required:after {
  content: "必須";
  padding: 5px 7px;
  border-radius: 2px;
  font-size: var(--font-size-small);
  text-align: center;
	line-height: var(--line-height-low);
  color: #fff;
  white-space: nowrap;
  vertical-align: baseline;
  display: inline-block;
  background-color: var(--color-red);
}

.help-block {
	font-size: var(--font-size-small);
	color: var(--color-gray);
}

.form-control-design-vertical {
	display: inline-block;
}
.form-control-design-vertical label { 
	display: block;
}
.form-control-design-required {
	padding: 10px;
	border-radius: var(--border-radius);
	display: inline-block;
	background: var(--color-salmon);
}
.form-control-design-vertical + p,
.form-control-design-vertical + div,
.form-control-design-required + p,
.form-control-design-required + div { margin-top: 10px;}


/* ----------------------------------
 Fieldset
---------------------------------- */
/* テーブル */
.table { width: 100%; border: var(--border-solid1); border-collapse: collapse; table-layout: fixed;}
.table th { width: 35%; padding: 5px; border: var(--border-solid1); border-collapse: collapse; font-size: var(--font-size-sub); font-weight: normal; background: var(--color-bg);}
.table td { padding: 5px; border: var(--border-solid1); border-collapse: collapse; font-size: var(--font-size-sub); background: #FFF;}

/* 入力フォーム */
.fieldset { margin: 10px 0;}
.fieldset .form-group { margin: 10px 0 20px; border-top: var(--border-solid1); background: var(--color-bg);}
.fieldset .constraint { padding: 8px 0 0 0; margin: 0; float: left;}
.fieldset .form-label { padding: 8px 10px; margin: 0; float: left;}
.fieldset .form-label label { font-weight: bold;}
.fieldset .form-control { padding: 20px 10px 10px; border-top: var(--border-solid1); clear: both; background: #FFF;}
.fieldset .form-control .form-input-wrapper input[type="text"] { width: 100%;}

/* 縦型入力フォーム */
.fieldset-vertical { margin: 10px 0;}
.fieldset-vertical .form-group { margin: 10px 0 20px; border-top: var(--border-solid1); background: var(--color-bg);}
.fieldset-vertical .constraint { padding: 8px 0 0 0; margin: 0; float: left;}
.fieldset-vertical .form-label { padding: 8px 10px; margin: 0; float: left;}
.fieldset-vertical .form-label label { font-weight: bold;}
.fieldset-vertical .form-control { padding: 20px 10px 10px; border-top: var(--border-solid1); clear: both; background: #FFF;}
.form-input-wrapper { display: inline-block;}
.fieldset-vertical .form-control .form-input-wrapper input[type="text"] { width: 100%;}

.required:after {
  content: "必須";
  padding: 4px 7px;
  border-radius: 2px;
  font-size: var(--font-size-small);
	font-weight: 700;
  text-align: center;
	line-height: 1.0;
  color: #fff;
  white-space: nowrap;
  vertical-align: baseline;
  display: inline-block;
  background-color: var(--color-red);
}

.help-block {
	font-size: var(--font-size-small);
	color: var(--color-gray);
}

.form-control-design-vertical {
	display: inline-block;
}
.form-control-design-vertical label { 
	display: block;
}
.form-control-design-required {
	padding: 10px;
	border-radius: var(--border-radius);
	display: inline-block;
	background: var(--color-salmon);
}
.form-control-design-vertical + p,
.form-control-design-vertical + div,
.form-control-design-required + p,
.form-control-design-required + div { margin-top: 10px;}

/* ----------------------------------
 Error / Message
---------------------------------- */
.count-msg { color: var(--color-sub); font-size: var(--font-size-small);}
.count-msg-another { color: var(--color-blue); font-size: var(--font-size-small);}
.form-error { color: var(--color-red); font-size: var(--font-size-small);}
.block-common-alert { border-color: var(--color-red); color: var(--color-red); background: var(--color-salmon);}
.block-common-alert-list--items { color: var(--color-red);}

.alert {
  padding: 10px 10px 10px 40px;
  margin: 10px 0;
	border-radius: var(--border-radius);
  border: var(--color-red) 1px solid;
  color: var(--color-red);
  background-color: var(--color-salmon);
  background-repeat: no-repeat;
  background-image: url(../../img/sys/icon/alert.png);
  background-position: 10px 50%;
  background-size: 20px auto;
  overflow: hidden;
  position: relative;
}

.success {
  padding: 10px 10px 10px 40px;
  margin: 10px 0;
	border-radius: var(--border-radius); 
  border: var(--color-blue) 1px solid;
  color: var(--color-blue);
  background-color: #F8FCFD;
  background-image: url(../../img/sys/icon/success.png);
  background-repeat: no-repeat;
  background-position: 10px 50%;
  background-size: 20px auto;
  overflow: hidden;
  position: relative;
}

/* ----------------------------------
 EFO
---------------------------------- */
.js-efo::after {
	content: '';
	width: 24px;
	height: 24px;
	border-radius: 24px;
	margin: 8px 0 0 8px;
	background-color: #FFF;
	display: inline-block;
	vertical-align: top;
}
.js-efo:has(.efo-valid)::after { 
	background-color: var(--color-main);
	background-image: url("../../img/usr/common/ico_efo_check.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 20px auto;
	background-size: 20px auto;
}
.js-efo:has(input[type="radio"])::after,
.js-efo:has(input[type="checkbox"])::after,
.js-efo:has(textarea)::after {
	display: none !important;
}
.js-efo + .form-error { margin-top: 5px;}

.js-efo.checktype_name { display: flex; align-items: center;}
.js-efo.checktype_name + .js-efo.checktype_name { margin-top: 16px;}
.js-efo.checktype_name > label { width: 3em;}

.js-efo.checktype_kana { display: flex; align-items: center;}
.js-efo.checktype_kana + .js-efo.checktype_kana { margin-top: 16px;}
.js-efo.checktype_kana > label { width: 3em;}

.js-efo input[type="text"],
.js-efo input[type="tel"],
.js-efo input[type="zip"],
.js-efo input[type="email"],
.js-efo input[type="search"],
.js-efo input[type="password"],
.js-efo input[type="url"],
.js-efo input[type="number"] { max-width: calc(100% - 40px);}

.js-efo input[type="text"][name="name"],
.js-efo input[type="text"][name="name2"],
.js-efo input[type="text"][name="s_name"],
.js-efo input[type="text"][name="s_name2"],
.js-efo input[type="text"][name="d_name"],
.js-efo input[type="text"][name="d_name2"],
.js-efo input[type="text"][name="kana"],
.js-efo input[type="text"][name="kana2"],
.js-efo input[type="text"][name="s_kana"],
.js-efo input[type="text"][name="s_kana2"],
.js-efo input[type="text"][name="d_kana"],
.js-efo input[type="text"][name="d_kana2"] { width: calc(100% - 40px - 3em);}

input[type="text"].efo-error,
input[type="tel"].efo-error,
input[type="email"].efo-error,
input[type="search"].efo-error,
input[type="password"].efo-error,
input[type="url"].efo-error,
input[type="number"].efo-error,
select.efo-error,
textarea.efo-error,
.form-control:has(.form-error) input[type="text"].efo-required,
.form-control:has(.form-error) input[type="tel"].efo-required,
.form-control:has(.form-error) input[type="zip"].efo-required,
.form-control:has(.form-error) input[type="email"].efo-required,
.form-control:has(.form-error) input[type="search"].efo-required,
.form-control:has(.form-error) input[type="password"].efo-required,
.form-control:has(.form-error) input[type="url"].efo-required,
.form-control:has(.form-error) input[type="number"].efo-required,
.form-control:has(.form-error) select.efo-required,
.form-control:has(.form-error) textarea.efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="text"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="tel"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="zip"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="email"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="search"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="password"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="url"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) input[type="number"].efo-required,
.form-control:has([class*="js-efo-form-error-"]) select.efo-required,
.form-control:has([class*="js-efo-form-error-"]) textarea.efo-required,
.form-control:has(.count-msg) input[type="text"],
.form-control:has(.count-msg) input[type="password"] { 
	background-color: var(--color-salmon);
}

input[type="text"].efo-valid,
input[type="tel"].efo-valid,
input[type="email"].efo-valid,
input[type="search"].efo-valid,
input[type="password"].efo-valid,
input[type="url"].efo-valid,
input[type="number"].efo-valid,
select.efo-valid,
textarea.efo-valid { background-color: var(--color-valid);}

input[name="addr2"].efo-caution   { background-color: none;}
input[name="s_addr2"].efo-caution { background-color: none;}
input[name="d_addr2"].efo-caution { background-color: none;}

/* ----------------------------------
 Price
---------------------------------- */
.price {
	font-size: var(--font-size-large);
	color: var(--color-base);
}
.price .yen {
	margin-left: 2px;
	font-size: var(--font-size-xsmall);
	color: var(--color-base);
}
.default-price {
	font-size: var(--font-size-xsmall);
  text-decoration: line-through;
	text-decoration-color: var(--color-sale);
}

/* ----------------------------------
 Pankuzu
---------------------------------- */
.pane-topic-path { padding: 0 var(--layout-basic-padding); margin: 0 auto;}
.block-topic-path { padding: 0; margin: 0 var(--layout-basic-padding-minus) 16px 0; font-size: 12px; background: transparent; overflow: hidden;}
.pane-contents .pane-main .pane-topic-path { padding: 0;}
.pane-contents .block-topic-path,
.pane-contents .pane-main .block-topic-path,
.pane-contents .container .pane-main .block-topic-path { margin: 0 var(--layout-basic-padding-minus) 16px 0;}
.block-topic-path--list { padding: 10px 0; max-width: none; width: auto; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: scroll;}
.block-topic-path--list + .block-topic-path--list { padding-top: 0;}
.block-topic-path--list li { padding-right: 12px; font-size: 0; word-break: keep-all; line-height: var(--line-height-low); position: relative;}
.block-topic-path--list li:not(:first-child) { padding-left: 12px;}
.block-topic-path--list li:not(:first-child)::before {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 10px;
  border-right: var(--color-base) 1px solid;
  border-top: var(--color-base) 1px solid;
  position: absolute;
	top: calc(50% - 4px);
	left: -12px;
  display: block;
  transform: rotate(45deg);
}
.block-topic-path--list li:last-child { padding-right: 16px;}
.block-topic-path--list a { padding-left: 6px; font-size: var(--font-size-sub); text-decoration: none; word-break: keep-all; white-space: nowrap; transition: var(--transition);}
.block-topic-path--list .block-topic-path--item__home a { padding-left: 0; font-size: var(--font-size-sub); text-decoration: underline; color: var(--color-sub);}
.block-topic-path--list span { font-size: var(--font-size-sub);}
.block-topic-path--list span.block-topic-path--delimiter { font-size: 0; display: none;}

/* ----------------------------------
 Pager
---------------------------------- */
.pager {
	padding: 0;
  margin: 0;
  border: none;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.block-goods-list-naviframe--top .pager,
.pager[class*="-pager-top"] .pager,
[class*="-pager-top"] .pager {
  padding: 20px 0;
	justify-content: flex-start;
}
.block-goods-list-naviframe--top .pagination,
.pager[class*="-pager-top"] .pagination,
[class*="-pager-top"] .pagination {
  display: none;
}
.block-goods-list-naviframe--bottom .pager,
.pager[class*="-pager-bottom"] .pager,
[class*="-pager-bottom"] .pager {
  padding: 30px 0 50px;
}
.block-goods-list-naviframe--bottom .pager-scope,
.block-goods-list-naviframe--bottom .pager-total,
.pager[class*="-pager-bottom"] .pager-scope,
.pager[class*="-pager-bottom"] .pager-total,
[class*="-pager-bottom"] .pager-scope,
[class*="-pager-bottom"] .pager-total {
  display: none;
}

.block-goods-list-naviframe--top { display: none;}
.block-goods-list-naviframe--bottom .pager { padding: 30px 0 50px;}
.pager-total { padding: 0; margin: 0;}
.pager-current { color: var(--color-base);}
.pagination li {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 3px;
  border: none;
  border-radius: 40px;
  color: var(--color-base);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination li a,
.pagination li span {
  width: 40px;
  height: 40px;
  padding: 2px 0 0;
  border: none;
  border-radius: 40px;
  font-size: var(--font-size-main);
  font-weight: 700;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.pagination li a       { border: var(--color-bg) 2px solid; color: var(--color-base); background: var(--color-bg);}
.pagination li a:hover { border: var(--button-bg1) 2px solid; color: var(--button-bg1); background: #FFF;}
.pagination li span    { border: var(--button-bg1) 2px solid; color: #FFF; background: var(--button-bg1);}
.pagination li.pager-first a,
.pagination li.pager-previous a,
.pagination li.pager-next a,
.pagination li.pager-last a { border: var(--button-bg2) 2px solid; display: block; font-size: 0; background: var(--button-bg2); position: relative;}
.pagination li.pager-first a::before,
.pagination li.pager-first a::after,
.pagination li.pager-previous a::before,
.pagination li.pager-next a::before,
.pagination li.pager-last a::before,
.pagination li.pager-last a::after { content: ''; width: 8px; height: 8px; border-top: #FFF 2px solid; border-left: #FFF 2px solid; position: absolute; top: calc(50% - 4px); display: block;}
.pagination li.pager-first a::before    { left:  12px; transform: rotate(-45deg);}
.pagination li.pager-first a::after     { left:  18px; transform: rotate(-45deg);}
.pagination li.pager-previous a::before { left:  16px; transform: rotate(-45deg);}
.pagination li.pager-next a::before     { right: 16px; transform: rotate(135deg);}
.pagination li.pager-last a::before     { right: 12px; transform: rotate(135deg);}
.pagination li.pager-last a::after      { right: 18px; transform: rotate(135deg);}

.pagination li.pager-first a:hover,
.pagination li.pager-previous a:hover,
.pagination li.pager-next a:hover,
.pagination li.pager-last a:hover { background: #FFF;}
.pagination li.pager-first a:hover::before,
.pagination li.pager-first a:hover::after,
.pagination li.pager-previous a:hover::before,
.pagination li.pager-next a:hover::before,
.pagination li.pager-last a:hover::before,
.pagination li.pager-last a:hover::after { border-top: var(--button-bg2) 2px solid; border-left: var(--button-bg2) 2px solid;}

.pagination li.pager-previous,
.pagination li.pager-next { display: none;}

/* ----------------------------------
 Goodslist Style
---------------------------------- */
.block-goods-list--display-style-items { display: none !important;}
.block-goods-list--display-style-items .block-style--header {}
.block-goods-list--display-style-items .block-style--header h2 {}
.block-style--element-bg { width: 100%; height: 100%; display: block; visibility: hidden; transition: all 0.3s; opacity: 0.0; cursor: pointer; position: fixed; top: 0; left: 0; z-index: 150;}
.block-style--element-bg.is-show { visibility: visible; opacity: 1.0;}
.block-style--element.is-show { visibility: visible; opacity: 1.0;}
.block-style--element select { display: none;}
.block-style--element ul.block-style--list { display: block;}
.block-style--element ul.block-style--list a,
.block-style--element ul.block-style--list span { padding: 3px 0 3px 24px; font-size: var(--font-size-sub); text-decoration: none; position: relative; display: block;}

/* ----------------------------------
 Goodslist Sort
---------------------------------- */
.block-goods-list--sort-order-items .block-sort--header { width: 100%; display: flex; justify-content: flex-end; align-items: center; background: transparent;}
.block-goods-list--sort-order-items .block-sort--header > h2 { 
	min-width: 170px;
	height: 40px;
	padding: 10px 20px 10px 40px;
	margin: 0 0 0 auto;
	border: var(--border-solid3);
	border-radius: 40px;
	font-size: var(--font-size-main);
	font-weight: 700;
	text-align: center;
	color: var(--color-base);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFF;
	background-image: url("../../img/usr/common/ico_sort.png");
	background-repeat: no-repeat;
	background-position: 16px center;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
	cursor: pointer;
}
.block-sort--element {
  width: 100%;
  min-width: auto;
  height: 100%; 
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  background: rgba(51, 51, 51, 0.6);
	visibility: inherit;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
	opacity: 1.0;
  display: none;
}
.block-sort--element .block-sort--select-head { padding: 0; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center;}
.block-sort--element .block-sort--select-head .design-close { margin: 0; text-align: center; position: relative; top: -10px;}
.block-sort--element .block-sort--select-head .design-close-btn { background-color: var(--color-bg);}
.block-goods-list--sort-order-items-selectbox { width: 100%; padding: 0; margin: 0; border: none; display: flex; flex-direction: column;}
.block-goods-list--sort-order-items-selectbox label {
  width: 100%;
  padding: 10px;
  margin: 0;
  border: none;
  font-size: var(--font-size-main);
  color: var(--color-base);
  display: flex;
  align-items: center;
  column-gap: 10px;
	cursor: pointer;
}
.block-goods-list--sort-order-items-selectbox label + label { margin-top: 10px;}

body.sort-on { overflow: hidden;}
body.sort-on .block-goods-list--sort-order-items .block-sort--element { display: block;}
body.sort-on .block-goods-list--sort-order-items .block-sort--element .block-sort--select {
	height: auto;
  padding: 30px 20px;
  border-radius: 16px 16px 0 0;
  background: #FFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 151;
}

/* ----------------------------------
 ActionButton
---------------------------------- */
.btn {
	line-height: 1.0;
	box-shadow: none;
	position: relative;
}
.action-buttons {
	padding: 0 16px;
}
.action-buttons:has(.action) {
	margin: 20px 0;
}
.action {
	min-width: 300px;
	height: 48px;
}
.action .btn,
.action .btn a {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 10px 0 0 0;
  border-width: 2px;
  border-radius: 72px;
  font-size: var(--font-size-xlarge);
  font-weight: 700;
	text-decoration: none;
	line-height: 1.0;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	transition: var(--transition);
}
.action .btn:has(a) {
	padding: 0;
	border-width: 0;
}

.btn-cart,
.btn-cart a      { border: var(--button-bg5) 2px solid; background-color: var(--button-bg5); color: var(--color-main);}
.btn-secondary,
.btn-secondary a { border: var(--button-bg4) 2px solid; background-color: var(--button-bg4);}
.btn-danger,
.btn-danger a    { border: var(--button-bg3) 2px solid; background-color: var(--button-bg3);}
.btn-default,
.btn-default a   { border: var(--button-bg2) 2px solid; background-color: var(--button-bg2); color: #FFF;}
.btn-primary,
.btn-primary a   { border: var(--button-bg1) 2px solid; background-color: var(--button-bg1);}
.btn-primary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #FFF 2px solid;
  border-top: #FFF 2px solid;
  position: absolute;
  right: 16px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
input.btn-primary {
	background-image: var(--image-arrow-w);
	background-repeat: no-repeat;
	background-position: calc(100% - 16px) center;
	background-size: 16px 16px;
}

/* ----------------------------------
 Design ボタン
---------------------------------- */
.design-button {
  width: 100%;
  height: 100%;
  border-radius: 48px;
  font-size: var(--font-size-sub);
  font-weight: 700;
	text-decoration: none !important;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	transition: var(--transition);
	cursor: pointer;
}
.design-button::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #FFF 2px solid;
  border-top: #FFF 2px solid;
  position: absolute;
  right: 16px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.design-button.no-arrow::after {
  display: none;
}

.design-button.btn-color1 { border: var(--button-bg1) 2px solid; background-color: var(--button-bg1);}
.design-button.btn-color2 { border: var(--button-bg2) 2px solid; background-color: var(--button-bg2);}
.design-button.btn-color3 { border: var(--button-bg3) 2px solid; background-color: var(--button-bg3);}
.design-button.btn-color4 { border: var(--button-bg4) 2px solid; background-color: var(--button-bg4);}
.design-button.btn-color5 { border: var(--button-bg5) 2px solid; color: var(--color-main); background-color: var(--button-bg5);}
.design-button.btn-detail { border: var(--border-solid1); color: var(--color-base); background-color: #FFF;}
.design-button.btn-detail::after { border-color: var(--color-gray); right: 10px;}

/* ----------------------------------
 Design パーツ
---------------------------------- */
.design-close-btn { width: 40px; height: 40px; margin: 0 auto; border-radius: 40px; background: #FFF; display: block; position: relative; cursor: pointer; transition: var(--transition);}
.design-close-btn::before,
.design-close-btn::after { 
	content: '';
	width: 18px;
	border-top: var(--button-bg2) 2px solid;
	display: block;
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 9px);
	transform: rotate(45deg);
}
.design-close-btn::after { 
	transform: rotate(-45deg);
}

/* ----------------------------------
 Swiper パーツ
---------------------------------- */
.swiper-controls { height: 32px; display: flex; justify-content: space-between; align-items: center; column-gap: 8px;}
.swiper-controls .swiper-button-prev { order: 1;}
.swiper-controls .swiper-pagination  { order: 2;}
.swiper-controls .swiper-button-next { order: 3;}
.swiper-controls .btn-stop  { order: 4;}
.swiper-controls .btn-start { order: 5;}

.swiper-controls .swiper-button-prev,
.swiper-controls .swiper-button-next {
  width: 32px;
  height: 32px;
	padding: 0;
  margin: 0;
  border-radius: 32px;
  background: var(--button-bg2);
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
	cursor: pointer;
}
.swiper-controls .swiper-button-prev::after,
.swiper-controls .swiper-button-next::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: #FFF 2px solid;
  border-top: #FFF 2px solid;
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 5px);
  display: block;
  transform: rotate(-135deg);
}
.swiper-controls .swiper-button-next::after { left: calc(50% - 6px); transform: rotate(45deg);}

.swiper-controls .swiper-pagination { width: auto; font-size: var(--font-size-main); line-height: 1.0; position: relative; top: auto; left: auto; right: auto; bottom: auto;}
.swiper-controls .swiper-pagination span { font-size: var(--font-size-main);}
.swiper-controls .swiper-pagination span.swiper-pagination-current { margin-right: 8px;}
.swiper-controls .swiper-pagination span.swiper-pagination-total   { margin-left: 8px;}

.swiper-controls .btn-stop,
.swiper-controls .btn-start { width: 32px; height: 32px; border-radius: 32px; border: var(--button-bg2) 2px solid; display: block; cursor: pointer;}
.swiper-controls .btn-stop  { background: #FFF url("../../img/usr/common/ico_slider_stop.png") no-repeat center center / auto 16px;}
.swiper-controls .btn-start { background: #FFF url("../../img/usr/common/ico_slider_start.png") no-repeat center center / auto 16px;}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled { opacity: 0.1 !important;}

/* ----------------------------------
 Modal
---------------------------------- */
.modal-content { border-radius: var(--border-radius); background-color: var(--color-bg); box-shadow: var(--box-shadow);}
.modal-header { padding: 16px 20px; border-radius: var(--border-radius) var(--border-radius) 0 0; font-size: var(--font-size-xlarge); background-color: var(--color-base); position: relative;}
.modal-header .modal-close {
  width: 40px;
  height: 40px;
  margin: 0 auto;
	border: var(--button-bg3) 2px solid;
  border-radius: 40px;
  font-size: 0;
  background: var(--button-bg3);
  display: block;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  transition: var(--transition);
}
.modal-header .modal-close::before,
.modal-header .modal-close::after { 
	content: '';
	width: 18px;
	border-top: #FFF 2px solid;
	display: block;
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 9px);
	transform: rotate(45deg);
}
.modal-header .modal-close::after { transform: rotate(-45deg);}
.modal-body { max-height: 70vh; overflow: hidden; overflow-y: scroll;}
.modal-body ul { border-top: var(--border-dot);}
.modal-body li { border-bottom: var(--border-dot);}
.modal-body li a { max-width: 100%; padding: 12px 30px 12px 0; color: var(--color-base); display: flex; align-items: center; position: relative; transition: var(--transition);}
.modal-body li a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  position: absolute;
  right: 16px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.modal-title { font-weight: 700;}
.modal-body .block-member-terms--header { margin: 0 0 20px; font-size: var(--font-size-H2); text-align: left; color: var(--color-base);}
.modal-footer .btn { min-height: 42px; border-radius: 40px; font-weight: 700;}

/* ----------------------------------
 RevicoStar
---------------------------------- */
[class*="block-"] .revico-star .starability-result { 
	width: 142px; height: 30px;
	background-image: url("../../img/usr/user_review/star_yellow.png") !important;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: left 0 top 0;
}
[class*="block-"] .revico-star [data-rating="5"] { background-position: left 0 top 0;}
[class*="block-"] .revico-star [data-rating="4"] { background-position: left 20% top 0;}
[class*="block-"] .revico-star [data-rating="3"] { background-position: left 40% top 0;}
[class*="block-"] .revico-star [data-rating="2"] { background-position: left 60% top 0;}
[class*="block-"] .revico-star [data-rating="1"] { background-position: left 80% top 0;}
[class*="block-"] .revico-star [data-rating="0"] { background-position: left 100% top 0;}
[class*="block-"] .revico-star [data-rating="4.5"] { background-image: url("../../img/usr/user_review/star_yellow_half.png") !important; background-position: left 0 top 0;}
[class*="block-"] .revico-star [data-rating="3.5"] { background-image: url("../../img/usr/user_review/star_yellow_half.png") !important; background-position: left 20% top 0;}
[class*="block-"] .revico-star [data-rating="2.5"] { background-image: url("../../img/usr/user_review/star_yellow_half.png") !important; background-position: left 40% top 0;}
[class*="block-"] .revico-star [data-rating="1.5"] { background-image: url("../../img/usr/user_review/star_yellow_half.png") !important; background-position: left 60% top 0;}
[class*="block-"] .revico-star [data-rating="0.5"] { background-image: url("../../img/usr/user_review/star_yellow_half.png") !important; background-position: left 80% top 0;}
[class*="block-"] .revico-star .revico-star-block { display: flex; align-items: center;}
[class*="block-"] .revico-star .revico-star-block--rate  { margin: 0; transform: scale(0.5); transform-origin: left; position: relative; top: 2px;}
[class*="block-"] .revico-star .revico-star-block--title { margin: 2px 0 0; font-size: var(--font-size-sub); font-weight: 700; color: var(--color-base); position: relative; left: -60px;}
[class*="block-"] .revico-star .revico-star-block--total { margin: 3px 0 0; font-size: var(--font-size-xsmall); font-weight: 500; word-break: keep-all; color: var(--color-base); position: relative; left: -60px;}

/* ----------------------------------
 Customer
---------------------------------- */
[class^='block-'][class$='-customer-name'] { margin: 0 0 16px; font-size: var(--font-size-main); display: none;}
[class^='block-'][class*='-completed'][class*='-message']         { font-size: var(--font-size-main); text-align: center;}
[class^='block-'][class*='-completed'][class*='-message'] p       { font-size: var(--font-size-main); text-align: center;}
[class^='block-'][class*='-completed'][class*='-message'] span    { font-size: var(--font-size-main);}
[class^='block-'][class*='-completed'][class*='-message'] a       { font-size: var(--font-size-main); text-decoration: underline; transition: var(--transition);}

.block-icon-image--angle-right:after {
  content: '';
  width: 8px;
  height: 8px;
  margin: 0 5px 10px 0;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  display: inline-block;
  transform: rotate(45deg);
}

/* ----------------------------------
 FormParts
---------------------------------- */
.input-label-wrapper { padding: 16px; border-radius: var(--border-radius-half); background: var(--color-salmon); display: inline-block;}
.input-label-wrapper .input-label-unit + .input-label-unit { margin-left: 12px;}