@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;
	
  --icon-bg:      #41140E;
	
  --font-size-H1:      42px;
  --font-size-H2:      32px;
  --font-size-H3:      24px;
  --font-size-H4:      20px;
  --font-size-H5:      16px;
	
  --font-size-xlarge:  20px;
  --font-size-large:   18px;
  --font-size-main:    16px;
  --font-size-sub:     15px;
  --font-size-small:   14px;
  --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;
	
	--border-pane-left-menu: #E1E1E1 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-max-width: 1486px;
	--layout-base-padding: 0 60px;
	
	/* ヘッダーの高さ */
	--layout-header-height: 92px;
	
	/* 商品一覧 カートボタン */
	--goods-list-cart-height: 36px;
	--goods-list-cart-icon-padding: 20px;
	--goods-list-cart-icon-image: url("../../img/usr/common/ico_cart_br.png");
	--goods-list-cart-icon-image-hover: 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: 56px;
  --sub-category-item-a-padding: 5px 30px 5px 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");
	
	/* 各種会員メニュー 表示幅 */
	--customer-frame: 1000px;
	
	/* 注文フローSTEP */
	--order-flow-step-color : #F5F5F5;
	--order-flow-step-color-active : #E25213;
	
	/* 注文フローレイアウト */
	--order-flow-right-sidemenu-width: 350px;
	--order-flow-right-sidemenu-margin: 60px;
	--order-flow-left-contents-width: calc(100% - var(--order-flow-right-sidemenu-width) - var(--order-flow-right-sidemenu-margin));
		
}

body {
  font-family: var(--font-family);
	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;}

.for-device-sp { 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 40px; border: 0; font-size: var(--font-size-H1); font-weight: 700; line-height: var(--line-height-low); text-align: center; color: var(--color-main);}
h2, .h2 { padding: 0; margin: 0 0 24px; border: 0; font-size: var(--font-size-H2); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main);}
h3, .h3 { padding: 0; margin: 0 0 24px; border: 0; font-size: var(--font-size-H3); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main);}
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);}
h5, .h5 { border: 0; font-size: var(--font-size-H5); font-weight: 700; line-height: var(--line-height-low); color: var(--color-main);}

.legend {
	padding: 0 0 0 36px;
	margin: 60px 0 20px;
	border: none;
	font-size: var(--font-size-H4);
	font-weight: 700;
	line-height: var(--line-height-low);
	color: var(--color-main);
	position: relative;
}
.legend::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 Headline
---------------------------------- */
.design-headline {
	padding: 0 0 0 36px;
	margin: 0 0 20px;
	font-size: var(--font-size-H4);
	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 top;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
	position: absolute;
	top: 0;
	left: 0;
}

.design-block-title {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  font-size: var(--font-size-H2);
  font-weight: 700;
	line-height: 1.0;
  letter-spacing: 0.04em;
	text-align: left;
	color: var(--color-main);
	position: relative;
}
.design-block-title:has(.eng) {
  margin-bottom: 20px;
}
.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-main);
	font-weight: 500;
  background-color: #FFF;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
	max-width: 100%;
  height: 42px;
  padding: 4px 20px 4px 12px;
  border: var(--border-solid3);
  border-radius: var(--border-radius-half);
  outline: none;
	font-size: var(--font-size-main);
	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% - 8px) center;
	-webkit-background-size: 10px auto;
	background-size: 10px 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);
  outline: none;
	font-size: var(--font-size-main);
	font-weight: 500;
  background-color: #FFF;
  box-sizing: border-box;
}
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;}

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;}

/* ----------------------------------
 Fieldset
---------------------------------- */
/* テーブル */
.table { border: var(--border-solid1); border-collapse: collapse;}
.table th { border: var(--border-solid1); border-collapse: collapse; font-size: var(--font-size-main); font-weight: bold; background: var(--color-bg);}
.table td {padding: 10px; border: var(--border-solid1); border-collapse: collapse; font-size: var(--font-size-main);}

/* 縦型入力フォーム */
.fieldset-vertical { margin: 24px 0;}
.fieldset-vertical .form-group { margin: 5px 0 10px 0;}
.fieldset-vertical .form-label { padding: 10px 20px; margin: 0 0 10px; font-size: var(--font-size-main); text-align: left; background: var(--color-bg); vertical-align: middle;}
.fieldset-vertical .form-label label { font-size: var(--font-size-main); font-weight: bold;}
.fieldset-vertical .constraint { margin: 0 0 5px 0;}
.fieldset-vertical .form-control { padding: 10px 20px; clear: both;}

/* 横型入力フォーム */
.fieldset { width: 100%; margin: 24px 0;}
.fieldset .form-group { width: 100%; border-top: var(--border-solid1); border-bottom: var(--border-solid1); display: table;}
.fieldset .form-group + .form-group { border-top: none;}
.fieldset .form-label { width: 23%; padding: 20px 10px 20px 20px; font-size: var(--font-size-main); text-align: left; vertical-align: middle; background: var(--color-bg); display: table-cell;}
.fieldset .form-label label { font-weight: bold;}
.fieldset .constraint { width: 65px; padding: 5px; vertical-align: middle; background: var(--color-bg); display: table-cell;}
.fieldset .form-control { padding: 20px; font-size: var(--font-size-main); vertical-align: middle; display: table-cell;}

.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);
}

.help-append {
	font-size: var(--font-size-small);
	color: var(--color-base);
}


.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;}

/* ----------------------------------
 EFO
---------------------------------- */
.js-efo::after {
	content: '';
	width: 24px;
	height: 24px;
	border-radius: 24px;
	margin: 8px 16px 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 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% - 80px);}

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;}

/* ----------------------------------
 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;
}

.block-common-alert {
  padding: 10px;
  margin: 10px 0;
	border-radius: var(--border-radius); 
  border: var(--color-red) 1px solid;
  color: var(--color-red);
  background-color: var(--color-salmon);
}

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

/* ----------------------------------
 Pankuzu
---------------------------------- */
.pane-topic-path { width: auto; max-width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto;}
.block-topic-path { padding: 20px 0; font-size: 12px;}
.block-topic-path--list li { padding-right: 12px; font-size: 0; 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 a { padding-left: 12px; font-size: var(--font-size-sub); text-decoration: none; word-break: keep-all; white-space: nowrap; transition: var(--transition);}
.block-topic-path--list a:hover { color: var(--color-sub);}
.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 .block-topic-path--item__home a:hover { text-decoration: none;}
.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--pager-top .pager,
.pager[class*="-pager-top"] .pager,
[class*="-pager-top"] .pager {
  padding: 20px 0;
	justify-content: flex-start;
}
.block-goods-list--pager-top .pagination,
.pager[class*="-pager-top"] .pagination,
[class*="-pager-top"] .pagination {
  display: none;
}
.block-goods-list--pager-bottom .pager,
.pager[class*="-pager-bottom"] .pager,
[class*="-pager-bottom"] .pager {
  padding: 30px 0 50px;
}
.block-goods-list--pager-bottom .pager-scope,
.block-goods-list--pager-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;
}

.page-event [class*="-pager-top"] .pager,
.page-genre [class*="-pager-top"] .pager,
.page-category [class*="-pager-top"] .pager { display: none;}
.page-event [class*="-pager-bottom"] .pager,
.page-genre [class*="-pager-bottom"] .pager,
.page-category [class*="-pager-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 5px;
  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;}

/* ----------------------------------
 Goodslist Style
---------------------------------- */
dl.block-goods-list--display-style-items { display: none !important;}
dl.block-goods-list--display-style-items > dt { display: none;}
dl.block-goods-list--display-style-items > dd, { margin: 0; font-size: var(--font-size-sub); display: block;}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list { font-size: var(--font-size-sub); display: flex; flex-wrap: wrap; gap: 20px;}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li a { padding-left: 21px; text-decoration: none; position: relative; display: block; transition: var(--transition);}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li a:hover { color: var(--color-sub);}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li.active { padding-left: 24px; font-weight: 700; color: var(--color-main); position: relative;}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li.active::before {
  content: '';
  width: 17px;
  height: 17px;
  border: var(--border-solid1);
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: calc(50% - 8.5px);
  left: 0;
  z-index: 1;
}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li.active::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-main);
  position: absolute;
  top: calc(50% - 4.5px);
  left: 4px;
  z-index: 2;
}
dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li a::before {
  content: '';
  width: 17px;
  height: 17px;
  border: var(--border-solid1);
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: calc(50% - 8.5px);
  left: 0;
  z-index: 1;
}

/* ----------------------------------
 Goodslist Sort
---------------------------------- */
dl.block-goods-list--sort-order-items { margin: 12px 0 0; display: flex;}
dl.block-goods-list--sort-order-items > dt { display: none;}
dl.block-goods-list--sort-order-items > dd { margin: 0; font-size: var(--font-size-sub); display: block;}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list { font-size: var(--font-size-sub); display: flex; flex-wrap: wrap; gap: 20px;}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li a { padding-left: 24px; text-decoration: none; position: relative; display: block; transition: var(--transition);}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li a:hover { color: var(--color-sub);}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li.active { padding-left: 24px; font-weight: 700; color: var(--color-main); position: relative;}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li.active::before {
  content: '';
  width: 17px;
  height: 17px;
  border: var(--border-solid1);
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: calc(50% - 8.5px);
  left: 0;
  z-index: 1;
}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li.active::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-main);
  position: absolute;
  top: calc(50% - 4.5px);
  left: 4px;
  z-index: 2;
}
dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li a::before {
  content: '';
  width: 17px;
  height: 17px;
  border: var(--border-solid1);
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: calc(50% - 8.5px);
  left: 0;
  z-index: 1;
}

/* ----------------------------------
 ActionButton
---------------------------------- */
.btn[class*="btn-"] {
  border-radius: 35px;
	font-size: var(--font-size-sub);
	line-height: 1.0;
	position: relative;
}
.action-buttons:has(.action) {
	margin: 40px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
.action {
	min-width: 300px;
	height: 56px;
}
.action .btn,
.action .btn a {
	width: 100%;
	height: 100%;
	padding: 0 40px;
	margin: 0;
  border-width: 2px;
  border-radius: 72px;
  font-size: var(--font-size-xlarge);
  font-weight: 700;
	text-decoration: none;
	line-height: 1.0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	transition: var(--transition);
}
.action .btn:has(a) {
	padding: 0;
	border-width: 0;
}

.btn-default,
.btn-default a { border: var(--button-bg2) 2px solid; color: #FFF; background-color: var(--button-bg2); transition: var(--transition);}
.btn-default:hover,
.btn-default:hover a { color: var(--button-bg2); background-color: #FFF;}
.btn-default:hover::after { border-color: var(--button-bg2);}

.btn-primary,
.btn-primary a { border: var(--button-bg1) 2px solid; color: #FFF; background-color: var(--button-bg1); transition: var(--transition);}
.btn-primary:hover,
.btn-primary:hover a { color: var(--button-bg1); background-color: #FFF;}
.btn-primary:hover::after { border-color: var(--button-bg1); color: var(--button-bg1);}

input.btn-primary {
	background-image: var(--image-arrow-w);
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
	background-size: 16px 16px;
}
input.btn-primary:hover { background-image: var(--image-arrow-or);}

.btn-danger,
.btn-danger a { border: var(--button-bg3) 2px solid; color: #FFF; background-color: var(--button-bg3); transition: var(--transition);}
.btn-danger:hover,
.btn-danger:hover a { color: var(--button-bg3); background-color: #FFF;}
.btn-danger:hover::after { border-color: var(--button-bg3);}

.btn-secondary,
.btn-secondary a { border: var(--button-bg4) 2px solid; color: var(--button-bg4); background-color: #FFF; transition: var(--transition);}
.btn-secondary:hover,
.btn-secondary:hover a { color: var(--button-bg4); background-color: #FFF;}
.btn-secondary:hover::after { border-color: var(--button-bg4);}

.btn-cart,
.btn-cart a { border: var(--button-bg5) 2px solid; color: var(--color-main); background-color: var(--button-bg5); transition: var(--transition);}
.btn-cart:hover,
.btn-cart:hover a { background-color: #FFF;}
.btn-cart:hover::after { border-color: var(--button-bg5);}

/* ----------------------------------
 Design ボタン
---------------------------------- */
.design-button {
  width: 100%;
  height: 100%;
  border-radius: 72px;
  font-size: var(--font-size-sub);
  font-weight: 700;
	text-decoration: none;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	transition: var(--transition);
	cursor: pointer;
}
.design-button:hover {
	text-decoration: none;
}
.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-color1:hover { text-decoration: none; color: var(--button-bg1); background-color: #FFF;}
.design-button.btn-color1:hover::after { border-color: var(--button-bg1);}

.design-button.btn-color2 { border: var(--button-bg2) 2px solid; background-color: var(--button-bg2);}
.design-button.btn-color2:hover { text-decoration: none; color: var(--button-bg2); background-color: #FFF;}
.design-button.btn-color2:hover::after { border-color: var(--button-bg2);}

.design-button.btn-color3 { border: var(--button-bg3) 2px solid; background-color: var(--button-bg3);}
.design-button.btn-color3:hover { text-decoration: none; color: var(--button-bg3); background-color: #FFF;}
.design-button.btn-color3:hover::after { border-color: var(--button-bg3);}

.design-button.btn-color4 { border: var(--button-bg4) 2px solid; background-color: var(--button-bg4);}
.design-button.btn-color4:hover { text-decoration: none; color: var(--button-bg4); background-color: #FFF;}
.design-button.btn-color4:hover::after { border-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-color5:hover { color: var(--button-bg5); background-color: #FFF;}
.design-button.btn-color5:hover::after { border-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);}
.design-button.btn-detail:hover { border-color: var(--color-sub); color: var(--color-sub);}
.design-button.btn-detail:hover::after { border-color: var(--color-sub);}

/* ----------------------------------
 Design パーツ
---------------------------------- */
.design-close-btn { width: 44px; height: 44px; margin: 0 auto; border-radius: 44px; 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);
}
.design-close-btn:hover { background: var(--button-bg2);}
.design-close-btn:hover::before,
.design-close-btn:hover::after { 
	border-top: #FFF 2px solid;
}

/* ----------------------------------
 Swiper パーツ
---------------------------------- */
.swiper-controls { height: 48px; display: flex; justify-content: space-between; align-items: center; column-gap: 12px;}
.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: 48px;
  height: 48px;
	padding: 0;
  margin: 0;
  border-radius: 48px;
	border: var(--button-bg2) 2px solid;
  background: var(--button-bg2);
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
	cursor: pointer;
	transition: var(--transition);
}
.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-button-prev:hover,
.swiper-controls .swiper-button-next:hover { background: #FFF;}
.swiper-controls .swiper-button-prev:hover::after,
.swiper-controls .swiper-button-next:hover::after { border-right: var(--button-bg2) 2px solid; border-top: var(--button-bg2) 2px solid;}

.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: 48px; height: 48px; border-radius: 48px; border: var(--button-bg2) 1px solid; display: block; cursor: pointer; transition: var(--transition);}
.swiper-controls .btn-stop,
.swiper-controls .btn-start:hover { opacity: var(--opacity);}
.swiper-controls .btn-stop  { background: #FFF url("../../img/usr/common/ico_slider_stop.png") no-repeat center center / auto 20px;}
.swiper-controls .btn-start { background: #FFF url("../../img/usr/common/ico_slider_start.png") no-repeat center center / auto 20px;}

.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: 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: 44px;
  height: 44px;
  margin: 0 auto;
	border: var(--button-bg3) 2px solid;
  border-radius: 44px;
  font-size: 0;
  background: var(--button-bg3);
  display: block;
  position: absolute;
  top: -16px;
  right: -16px;
  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-header .modal-close:hover { background: #FFF;}
.modal-header .modal-close:hover::before,
.modal-header .modal-close:hover::after { border-color: var(--button-bg3);}
.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); 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-body li a:hover { color: var(--color-sub);}
.modal-body li a:hover::after { border-color: var(--color-sub);}
.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);}

/* ----------------------------------
 RevicoStar
---------------------------------- */
[class*="block-"] .revico-star .starability-result { 
	width: 150px; height: 35px;
	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.8); transform-origin: left; position: relative; top: 2px;}
[class*="block-"] .revico-star .revico-star-block--title { margin: 0; font-size: var(--font-size-main); font-weight: 700; color: var(--color-base); position: relative; left: -20px;}
[class*="block-"] .revico-star .revico-star-block--total { margin: 3px 0 0; font-size: var(--font-size-xsmall); font-weight: 500; color: var(--color-base); position: relative; left: -20px;}

@media screen and (max-width: 1366px) {
	[class*="block-"] .revico-star .revico-star-block--rate  { transform: scale(0.6);}
	[class*="block-"] .revico-star .revico-star-block--title { left: -55px;}
	[class*="block-"] .revico-star .revico-star-block--total { left: -55px;}
}

/* ----------------------------------
 Customer
---------------------------------- */
[class^='block-'][class*='-customer-name'] { margin: 0 0 20px; 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);}
[class^='block-'][class*='-completed'][class*='-message'] a:hover { color: var(--color-sub);}
[class^='block-'][class*='-value-label'] { word-break: keep-all;}

/* ----------------------------------
 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;}

/* ----------------------------------
 Modal
---------------------------------- */
.modal-dialog .modal-footer .btn { min-height: 42px;}