@charset "UTF-8";

:root {
	
  --site-color-black:    #18212B;
  --site-color-blue:     #025EAC;
	--site-color-darkblue: #003E78;
  --site-color-deepblue: #0F2F66;
	--site-color-lightsky: #CCDFEE;
  --site-color-sky:      #19AAF1;
  --site-color-red:      #FF3B30;
  --site-color-brown:    #84292F;
	--site-color-yellow:   #FFE500;
  --site-color-dark:     #667085;
  --site-color-lightgray:#878D96;
  --site-color-gray:     #5A6D83;
	--site-color-grayout:  #DDE1E6;
	
 	--site-bg-blue: #EAF4FF;
 	--site-bg-pink: #FFE0E2;
 	--site-bg-gray: #F3F4F6;
	--site-bg-dark: #F2F4F8;

	--line-height-low:    1.2;
	--line-height-middle: 1.6;
	--line-height-high:   2.0;
	
	--border-solid-blue:  #025EAC 1px solid;
	--border-solid-frame: #CADAEC 1px solid;
	--border-solid-list:  #DDE1E6 1px solid;
	--border-solid-input: #C1C7CD 1px solid;
	
	--table-border: #C1C7CD 1px solid;
	--table-th-bg:  #DDE1E6;
	--table-td-bg:  #FFFFFF;
	
	--radius-01: 12px;
	--radius-02:  8px;
	--radius-03:  4px;
	
	--opacity:    0.7;
	--transition: 0.3s;
	
	/* 標準フォント */
	--font-family: "Noto Sans JP", 'IBM Plex Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
		
	/* 各種会員メニュー 表示幅 */
	--customer-frame: 1200px;
	
	/* アイコン画像 */
	--bg-image-cart:   url("../../img/usr/icon/ico_cart_w.png");
	--bg-image-time:   url("../../img/usr/icon/ico_time.png");
	--bg-image-blank:  url("../../img/usr/icon/ico_blanklink.png");
	--bg-image-select: url("../../img/usr/icon/ico_select_bg.png");
	--bg-image-time:   url("../../img/usr/icon/ico_time.png");
	--bg-image-bookmark-on:  url("../../img/usr/icon/ico_bookmark_btn_on.png");
	--bg-image-bookmark-off: url("../../img/usr/icon/ico_bookmark_btn_off.png");
	--bg-image-arrow-white: url("../../img/usr/icon/ico_arrow_white.png");
	--bg-image-arrow-sky:   url("../../img/usr/icon/ico_arrow_sky.png");
	--bg-image-arrow-blue:  url("../../img/usr/icon/ico_arrow_blue.png");
	--bg-image-arrow-deep:  url("../../img/usr/icon/ico_arrow_deepblue.png");
	--bg-image-arrow-dark:  url("../../img/usr/icon/ico_arrow_dark.png");
	--bg-image-arrow-black: url("../../img/usr/icon/ico_arrow_black.png");
}

html {
	height: 100%;
	background: none;
	clear: both;
	box-sizing: border-box;
}
body {
	width: 100%;
	height: 100%;
	min-height: 101vh;
	padding: 0;
	margin: 0;
  font-family: var(--font-family);
	font-size: 16px;
	font-weight: 400;
  color: var(--site-color-black);
	background: var(--site-bg-gray);
	clear: both;
	box-sizing: border-box;
}

body * { box-sizing: border-box;}
img    { max-width: 100%; vertical-align: top;}
strong { font-weight: 700;}
a      { color: var(--site-color-black); transition: var(--transition);}
a:link    { text-decoration: none; color: var(--site-color-black);}
a:visited { text-decoration: none; color: var(--site-color-black);}
a:active  { text-decoration: underline;}
a:hover   { text-decoration: underline; opacity: var(--opacity);}

/* ----------------------------------
 COMMON Class
---------------------------------- */
.for-site-pc { display: none !important;}

.xlarge_ { font-size: 144%;}
.large_  { font-size: 120%;}
.small_  { font-size:  80%;}
.xsmall_ { font-size:  64%;}
.small_ + p.small_ { margin-top: 10px;}

.clearfix_:before,
.clearfix_:after { content: ''; display: table;}
.clearfix_:after { clear: both;}
.clearfix_ { zoom: 1;}

.leftfloat_     { float: left; display: inline;}
.rightfloat_    { float: right; display: inline;}
img.leftfloat_  { margin: 0 10px 10px 0;}
img.rightfloat_ { margin: 0 0 10px 10px;}

.lefttext_    { text-align: left;}
.righttext_   { text-align: right;}
.centertext_  { text-align: center;}

.disp_none_   { display: none;}
.hidden_      { margin: 10px 0; visibility: hidden; clear: both;}
.nocell_      { border: none !important; background-color: transparent !important;}
.hiddenEnter_ { width: 0; height: 0; float: left; display: none;}

.for-sp-dsp { display: none;}

@media (max-width: 768px) {
	.for-sp-dsp { display: block;}
}

/* ----------------------------------
 Form Parts
---------------------------------- */
input[type="text"],
input[type="tel"],
input[type="zip"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 40px;
  padding: 2px 10px;
  border: var(--border-solid-input) !important;
  border-radius: var(--radius-03) !important;
  outline: none;
	font-size: 14px;
	font-weight: 400;
  background-color: #FFF;
  box-shadow: none;
  box-sizing: border-box;
}
input[type="date"] {
	width: 170px;
}
input.qty-popup-input {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
	background-color: #FFF;
	background-image: url("../../img/usr/icon/ico_qtyinput_bg.png");
	background-position: calc(100% - 8px) center;
	-webkit-background-size: 8px auto;
	background-size: 8px auto;
	background-repeat: no-repeat;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 40px;
  padding: 2px 32px 2px 10px;
  border: var(--border-solid-input) !important;
  border-radius: var(--radius-03) !important;
  outline: none;
	font-size: 14px;
	font-weight: 400;
  background-color: #FFF !important;
	background-image: var(--bg-image-select) !important;
	background-repeat: no-repeat !important;
	background-position: calc(100% - 10px) center !important;
	-webkit-background-size: 10px auto !important;
	background-size: 10px auto !important;
  box-shadow: none;
  box-sizing: border-box;
}
textarea {
  width: 100%;
  max-width: 100%;
	height: auto;
  padding: 16px !important;
}
pre.agreebody_ {
	width: 100%;
  max-height: 200px;
  padding: 16px;
	margin: 0;
  border: var(--border-solid-input) !important;
  border-radius: var(--radius-03) !important;
  outline: none;
	font-size: 12px;
	font-weight: 400;
	word-break: break-all;
  background: #FFF;
  box-shadow: none;
  box-sizing: border-box;
}

/* image */
input[type="image"] { transition: var(--transition); cursor: pointer;}
input[type="image"]:hover { opacity: var(--opacity);}
input[type="image"]:disabled { cursor: not-allowed;}
input[type="image"]:disabled:hover { opacity: 1.0;}

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

/* checkbox */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 5px 0 0;
  border: var(--border-solid-input) !important;
	border-radius: var(--radius-03) !important;
  outline: 0;
  background-color: var(--site-color-grayout) !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
  -webkit-background-size: 10px auto !important;
  background-size: 10px auto !important;
  position: relative;
  transition: var(--transition);
}
input[type="checkbox"]:before { transition: var(--transition);}
input[type="checkbox"]:checked {
	border-radius: var(--radius-03) !important;
	border-color: var(--site-color-black) !important;
	background-color: var(--site-color-black) !important;
	background-image: url("../../img/usr/icon/ico_check.png") !important;
}

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

.forgotpass_ a::before { display: none !important;}

/* ----------------------------------
 HEADLINE
---------------------------------- */
#container .common_headline1_ {
	width: 100% !important;
  padding: 0;
  margin: 0 0 32px 0 !important;
	border: none;
  font-size: 24px !important;
  font-weight: 700;
  line-height: var(--line-height-low);
  color: var(--site-color-deepblue);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
	justify-content: center;
}
#container .common_headline2_ {
	padding: 0 0 0 24px;
	margin: 0 0 16px !important;
	border: none;
	font-size: 17px;
	font-weight: 700;
  line-height: var(--line-height-low);
	color: var(--site-color-black);
	background: transparent;
	display: flex;
	align-items: center;
  box-sizing: border-box;
  position: relative;
}
#container .common_headline2_::before {
	content: '';
	width: 14px;
	display: block;
	background: linear-gradient(90deg, #19AAF1 0%, rgba(54, 225, 191, 0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
#container .common_headline3_ { padding: 0 0 8px; margin: 0 0 16px; border-bottom: var(--border-solid-list); font-size: 14px; font-weight: 700;}
#container .common_headline4_ { padding: 0; margin: 0 0 16px; border: none; font-size: 14px; font-weight: 700;}
#container .img_headline_     { margin-bottom: 10px;}

/* ----------------------------------
 ERROR
---------------------------------- */
.error_ { color: var(--site-color-brown); font-weight: 400; word-break: break-all; color: var(--site-color-red);}
div.error_   { padding: 10px 16px; margin: 10px auto 20px; border: none; border-radius: 0; text-align: left; color: var(--site-color-brown); background-color: var(--site-bg-pink);}
table.error_ { padding: 10px 16px; margin: 10px auto 20px; border: none; background-color: #FFF; text-align: left;}
ul.error_    { margin-left: 16px; color: var(--site-color-brown);}
input[name="address.x"] + .error_ { margin-left: 15px;}

/* ----------------------------------
 MESSAGE
---------------------------------- */
div.info_ { width: 100%; padding: 20px; margin: 0 auto 30px; border: none; border-radius: var(--radius-02); font-weight: 400; background: #FFF; box-sizing: border-box;}
div.info_ .info_ { font-size: 14px; font-weight: 400; word-break: break-all;}
table.info_ { max-width: 94%; padding: 8px 8px 4px 8px; margin: 4px auto; border: var(--border-solid-frame); font-size: 14px; font-weight: 400; text-align: left; background-color: #FFF;}

div.message_ { width: 100%; padding: 16px; margin: 0 auto 30px; border: none; color: var(--site-color-black); background: #FFF; box-sizing: border-box;}
p.message_   { margin: 10px 0; font-size: 14px;}
.message_ a  { font-size: 14px; text-decoration: underline;}

div.block_message_   { width: 100%; padding: 16px; margin-bottom: 30px; background: #FFF; box-sizing: border-box;}
table.block_message_ { width: 100%; padding: 16px; margin-bottom: 30px; background: #FFF; box-sizing: border-box;}

div.notice_ {
  width: 100%;
  padding: 16px;
  margin-bottom: 30px;
  border: var(--site-color-red) 1px solid;
  border-radius: var(--radius-02);
  color: var(--site-color-red);
  background: #FFF;
  box-sizing: border-box;
}
div.notice_ p + p { margin-top: 10px;}
div.notice_ p.centertext_ { text-align: center;}
div.notice_ p.centertext_ a { text-decoration: underline;}
table.notice_ { max-width: 94%; padding: 8px 8px 4px 8px; margin: 4px auto; border: var(--site-color-red) 1px solid; text-align: left; background-color: #FFF;}

.top_comment_ { margin-bottom: 10px;}
div.supplier_event_ .top_comment_ { margin-top: 10px;}

/* ----------------------------------
 Icon
---------------------------------- */
.block-icon { display: flex; flex-wrap: wrap; gap: 4px;}
.block-icon:has(span) { margin: 0 0 10px;}
.block-icon .text-icon {
  height: 24px;
  padding: 0 6px;
	margin: 0;
  border: var(--table-border);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.0;
  color: var(--site-color-black);
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.block-icon .image-icon { max-height: 24px; margin: 0; display: flex; justify-content: center; align-items: center;}
.block-icon .image-icon img { width: auto; height: 24px; margin: 0 !important; vertical-align: top;}

.block-icon .text-icon.icon-name-auto-onsale { border-color: var(--site-color-red); background: var(--site-color-red); color: #FFF;}
.block-icon .text-icon.icon-name-auto-reservation { border-color: var(--site-color-blue); background: #FFF; color: var(--site-color-blue);}
.block-icon .text-icon.icon-name-auto-new { border-color: var(--site-color-yellow); background: var(--site-color-yellow); color: var(--site-color-black);}
.block-icon .text-icon.icon-name-osusume { border-color: #607500; background: #FFF; color: #607500;}

@media (max-width: 768px) {
	.block-icon .text-icon { height: 20px; font-size: 10px;}
	.block-icon .image-icon { max-height: 20px;}
	.block-icon .image-icon img { height: 20px;}
}

/* ----------------------------------
 PRICE
---------------------------------- */
.price_pop_ { font-size: 11px; color: var(--site-color-red); display: block;}
.price_ { font-size: 14px; font-weight: 700; overflow-wrap: break-word;}
.tax_class_name_ { padding: 0; margin: 0 8px; font-size: 11px;}

/* ---------------------------------------
 PanKuzu
---------------------------------------- */
.navitopicpath_ {
  width: auto;
  padding: 10px 16px;
  margin: 0 0 24px !important;
  font-size: 0;
  word-break: keep-all;
  display: flex;
  align-items: center;
  overflow-x: auto;
  position: relative;
}
div.wrapper_ .navitopicpath_ { margin: 0 -16px 24px !important;}
.navitopicpath_:has(ul) { flex-direction: column; align-items: flex-start;}
.navitopicpath_ a {
  padding: 0;
  margin: 0 10px 0 0;
  font-size: 10px;
  font-weight: 400;
  text-decoration: none;
  line-height: var(--line-height-low);
  color: var(--site-color-blue);
  display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}
.navitopicpath_ a::after {
	content: '';
	width: 1.2em;
	margin: 0 0 0 10px;
	border-top: var(--border-solid-frame);
	display: inline-block;
	transform: rotate(-45deg);
}
.navitopicpath_ a.topicpath_home_ { padding: 0; margin: 0 10px 0 0; color: var(--site-color-blue);}
.navitopicpath_ a.topicpath_home_::before {
	content: '';
	width: 24px;
	height: 24px;
	margin: 0 8px 0 0;
	display: inline-block;
	background-color: none;
	background-image: url("../../img/usr/icon/ico_home.png");
	background-position: left center;
	-webkit-background-size: 24px auto;
	background-size: 24px auto;
	background-repeat: no-repeat;
}
.navitopicpath_ > a:last-of-type { color: var(--site-color-black);}
.navitopicpath_ > a:last-of-type::after { display: none !important;}
.navitopicpath_ li > span { padding: 0 7px; font-size: 12px; font-weight: 700; line-height: var(--line-height-low); display: inline-block;}
.navitopicpath_ ul { width: auto; margin: 0; font-size: 0; display: flex; flex-wrap: nowrap; align-items: center; position: relative; z-index: 2;}
.navitopicpath_ li { font-size: 0;}
.navitopicpath_ li.topicpath_home_ a { font-size: 10px; background: none;}
.navitopicpath_ li:last-of-type a { color: var(--site-color-black);}
.navitopicpath_ li:last-of-type a::after { display: none !important;}

/* ----------------------------------
 FILTER
---------------------------------- */
div.block-goods-filter { display: none !important;}

/* ----------------------------------
 STYLE
---------------------------------- */
div.block-goods-list--display-style-items { display: none !important;}

/* ----------------------------------
 SORT
---------------------------------- */
div.block-goods-list--sort-order-items { display: none !important;}

/* ----------------------------------
 PAGER
---------------------------------- */
.page-category div.navipage_,
.page-gere div.navipage_,
.page-event div.navipage_ { display: none !important;}

div.navipage_ { font-size: 14px; text-align: center;}
div.navipage_.top_ { font-size: 14px; text-align: center; justify-content: center;}
div.navipage_.bottom_ { display: none !important;}

div.navipage_frame_ { margin: 20px 0; font-size: 0; text-align: left; display: flex !important; justify-content: center !important; align-items: center !important;}
div.navipage_frame_.top_ { margin: 0 0 40px 0; text-align: left; display: block;}
div.navipage_frame_ .navipage_sum_ { padding: 0; margin: 0; font-size: 14px;}
div.navipage_frame_ .navipage_sum_ span { margin: 0 3px 0 0; font-size: 14px; font-weight: 700;}
div.navipage_.bottom_ { margin: 40px 0 60px; text-align: left; display: block;}
div.navipage_.bottom_ span.navipage_sum_ { display: none;}
div.navipage_frame_ { display: flex; align-items: center; justify-content: center; gap: 10px;}
div.navipage_frame_ .navipage_reverse_ { min-width: 66px; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px;}
div.navipage_frame_ .navipage_pages_   { padding: 0; margin: 0 15px; display: flex; align-items: center; gap: 10px;}
div.navipage_frame_ .navipage_forward_ { min-width: 66px; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px;}
div.navipage_frame_ .navipage_pages_ li { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; background: none !important;}
div.navipage_frame_ .navipage_pages_ li.dots { font-size: 12px; font-weight: 700; text-align: center; color: var(--site-color-black);}
div.navipage_frame_ .navipage_pages_ li a { 
	width: 100%;
	height: 100%;
	border: var(--border-solid-blue);
	border-radius: var(--radius-02);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--site-color-blue);
	transition: var(--transition);
}
div.navipage_frame_ .navipage_pages_ li a:hover { border: #999 1px solid; opacity: 1.0;}
div.navipage_frame_ .navipage_pages_ li.navipage_now_ span { 
	width: 100%;
	height: 100%;
	border-radius: var(--radius-02);
	border: var(--site-color-deepblue) 1px solid;
	font-size: 12px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--site-color-deepblue);
}
div.navipage_frame_ .navipage_reverse_ span.navipage_first_,
div.navipage_frame_ .navipage_reverse_ span.navipage_prev_,
div.navipage_frame_ .navipage_forward_ span.navipage_next_,
div.navipage_frame_ .navipage_forward_ span.navipage_last_ { width: 28px; height: 28px; background: none;}
div.navipage_frame_ .navipage_reverse_ .navipage_first_ a,
div.navipage_frame_ .navipage_reverse_ .navipage_prev_ a,
div.navipage_frame_ .navipage_forward_ .navipage_next_ a,
div.navipage_frame_ .navipage_forward_ .navipage_last_ a { 
	width: 100%;
	height: 100%;
	border-radius: var(--radius-01);
	display: block;
	background-color: #FFF;
	background-repeat: no-repeat;
	-webkit-background-size: auto 12px;
	background-size: auto 12px;
	background-position: center;
	box-shadow: none;
}
div.navipage_frame_ .navipage_reverse_ .navipage_first_ a { background-image: url("../../img/usr/common/ico_nav_first.png");}
div.navipage_frame_ .navipage_reverse_ .navipage_prev_ a  { background-image: url("../../img/usr/common/ico_nav_prev.png");}
div.navipage_frame_ .navipage_forward_ .navipage_next_ a  { background-image: url("../../img/usr/common/ico_nav_next.png");}
div.navipage_frame_ .navipage_forward_ .navipage_last_ a  { background-image: url("../../img/usr/common/ico_nav_last.png");}
div.navipage_frame_ .navipage_reverse_ .navipage_first_ a::before,
div.navipage_frame_ .navipage_reverse_ .navipage_prev_ a::before,
div.navipage_frame_ .navipage_forward_ .navipage_next_ a::before,
div.navipage_frame_ .navipage_forward_ .navipage_last_ a::before,
div.navipage_frame_ .navipage_reverse_ .navipage_first_ a::after,
div.navipage_frame_ .navipage_forward_ .navipage_last_ a::after { display: none !important;}

/* ----------------------------------
 FORM
---------------------------------- */
table    { border-collapse: collapse !important;}
table th { border-collapse: collapse !important; font-size: 14px; font-weight: 700;}
table td { border-collapse: collapse !important; font-size: 14px; font-weight: 400; word-break: break-all;}

.formlist_    { width: 100%; margin: 0 auto;}
.formlist_ th { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 700; color: var(--site-color-black); background: var(--table-th-bg);}
.formlist_ td { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 400; color: var(--site-color-black); background: var(--table-td-bg);}
.formlist_ td.updatebtn_ a { text-decoration: none;}
.formlist_ td.updatebtn_ a .small_ { font-size: 11px;}
.formlist_.goods_detail_ { font-family: var(--font-family) !important;}

ul.formlist_    { width: 100%; margin: 0 auto; border: none; border-bottom: var(--border-solid-list);}
ul.formlist_ li { padding: 10px 0; margin: 0; border: none; border-bottom: none; font-size: 13px; font-weight: 400; color: var(--site-color-black); background: transparent;}
ul.formlist_ li.title_ { padding: 10px 0 0; border: none; border-top: var(--border-solid-list); font-weight: 400; color: var(--site-color-black); background: transparent;}
ul.formlist_ li:first-of-type.title_ { border-top: none;}
ul.formlist_ li.input_must_ input + label { margin-right: 10px;}
ul.formlist_ li:not(.title_) { padding: 10px 0; color: var(--site-color-black); background: transparent;}
ul.formlist_ li .small_ { color: var(--site-color-dark);}

.formdetail_    { width: 100%; margin: 0 auto; border: var(--table-border);}
.formdetail_ th { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 700; color: var(--site-color-black); background: var(--table-th-bg);}
.formdetail_ td { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 400; color: var(--site-color-black); background: var(--table-td-bg);}

ul.formdetail_    { width: 100%; margin: 0 auto; border: none; border-bottom: var(--border-solid-list);}
ul.formdetail_ li { padding: 10px 0; margin: 0; border: none; border-bottom: none; font-size: 13px; font-weight: 400; color: var(--site-color-black); background: transparent;}
ul.formdetail_ li.title_ { padding: 10px 0 0; border: none; border-top: var(--border-solid-list); font-weight: 400; color: var(--site-color-black); background: transparent;}
ul.formdetail_ li:first-of-type.title_ { border-top: none;}
ul.formdetail_ li.input_must_ input + label { margin-right: 10px;}
ul.formdetail_ li:not(.title_) { padding: 10px 0; color: var(--site-color-black); background: transparent;}
ul.formdetail_ li .small_ { color: var(--site-color-dark);}

.formdetailcard_    { border-collapse: collapse; margin: 0 auto;}
.formdetailcard_ th { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 700; color: var(--site-color-black); background: var(--table-th-bg);}
.formdetailcard_ td { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 400; color: var(--site-color-black); background: var(--table-td-bg);}

.formsublist_ th { padding: 10px; border: var(--table-border); font-size: 14px; font-weight: 700; color: var(--site-color-black); background: var(--table-th-bg);}
.formsublist_ td { padding: 10px; border: var(--table-border); font-size: 14px); font-weight: 400; color: var(--site-color-black); background: var(--table-td-bg);}

table.formlist_.precart_list_ { border: var(--table-border);}
td.precart_rgdt_ { border-bottom: var(--table-border) !important;}
td.precart_detail_ { border-bottom: var(--table-border);}
td.precart_detail_ > table > tbody > tr > td.precart_detail_ { border: none !important;}

img[src*="sys/check.gif"] { height: 20px;}
.icon-sys-must-wrap { padding: 0; margin: 0 10px; line-height: 1.0; display: inline-block;}
.icon-sys-must-wrap .icon-sys-must {
	width: 40px;
	height: 18px;
	padding: 0 0 1px;
  margin: 0;
	border: var(--site-color-red) 1px solid;
	border-radius: 18px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.0;
  color: var(--site-color-red);
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* js フォームパーツカスタマイズ */
.input-label-wrapper .input-label-unit { display: block;}
.input-label-wrapper .input-label-unit + .input-label-unit { margin-top: 10px;}

/* ----------------------------------
 BUTTON
---------------------------------- */
.btn,
.btn:hover { text-decoration: none;}

.btn-small {
  width: 60px;
  height: 30px;
  margin: 4px 8px 4px 0;
  border: var(--site-bg-gray) 1px solid;
  border-radius: var(--radius-02);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.0;
  box-shadow: none;
}
.btn-small:active   { top: 0;}
.btn-small:disabled { color: #cfcfcf; opacity: 0.8;}

.btn-slender { width: 145px; height: 30px; margin: 4px 8px 4px 0; border-radius: var(--radius-02); font-size: 12px; font-weight: 700; line-height: 1.0; box-shadow: none;}
.btn-wide    { width: 220px; height: 45px; margin: 4px 8px 4px 0; border-radius: var(--radius-02); font-size: 16px; font-weight: 700; line-height: 1.0; box-shadow: none;}
.btn-medium  { width:  85px; height: 30px; margin: 5px 8px 5px 0; border-radius: var(--radius-02); font-size: 14px; font-weight: 700; line-height: 1.0; box-shadow: none;}

.btn-update  { padding: 5px 10px 5px 30px; border: var(--site-bg-gray) 1px solid; border-radius: var(--radius-02); color: var(--site-color-black);}
.btn-update::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url(../../img/usr/icon_update.png);
  background-size: 16px;
  position: absolute;
  left: 10px;
  top: calc(50% - 8px);
}

.submit_:has([class*="btn"]),
div.submit_:has([class*="btn"]) { margin: 30px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;}

.btn-large,
div.submit_ .btn-large {
	width: 100%;
	height: 48px;
	padding: 0;
	margin: 0 10px;
	border-radius: var(--radius-03);
	font-size: 14px;
	font-weight: 700;
	overflow: visible;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: none !important;
	position: relative;
	transition: 0.3s;
	cursor: pointer;
}
.btn-large:active,
div.submit_ .btn-large:active { top: 0;}
.btn-large:disabled,
div.submit_ .btn-large:disabled { opacity: 0.5 !important;}

.btn-secondary,
div.submit_ .btn-secondary { order: 3;}

.btn-primary,
div.submit_ .btn-primary { border: var(--border-solid-blue); color: #FFF; background-color: var(--site-color-blue);}
.btn-secondary,
div.submit_ .btn-secondary { border: var(--site-color-dark) 1px solid; color: var(--site-color-dark); background-color: transparent;}
.btn-secondary[name*="delete"],
div.submit_ .btn-secondary[name*="delete"] { border: var(--site-color-grayout) 1px solid; color: #FFF; background-color: var(--site-color-grayout);}
.btn-default,
div.submit_ .btn-default { border: var(--border-solid-blue); color: #FFF; background-color: var(--site-color-blue);}
.btn-tertiary,
div.submit_ .btn-tertiary { border: var(--border-solid-blue); color: #FFF; background-color: var(--site-color-blue);}
.btn-neutral,
div.submit_ .btn-neutral { border: #767676 1px solid; color: #fff; background: #767676;}
.button_mini_,
div.submit_ .button_mini_ { height: 25px; padding: 3px; border: #333 1px solid; border-radius: var(--radius-02); background-color: #fff;}

/* カートボタン */
div.add-cart-btn a.btn_cart_ {
  width: 100%;
  height: 48px;
	padding: 0 5px 0 30px;
  border: none;
	border-radius: var(--radius-03);
  font-size: 15px;
	font-weight: 700;
  text-align: center;
  text-decoration: none;
	line-height: 1.0;
  color: #fff;
  display: flex;
	justify-content: center;
	align-items: center;
  background: var(--site-color-sky);
	transition: var(--transition);
  position: relative;
}
div.add-cart-btn a.btn_cart_:hover { opacity: var(--opacity);}
div.add-cart-btn a.btn_cart_::before {
	content: '';
	width: 22px;
	height: 22px;
	background-image: var(--bg-image-cart);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: block;
}

.btn_cart_.cart_s_button_ {
  width: 135px;
  height: 20px;
  padding: 10px;
  border: 0;
  border-radius: var(--radius-03);
  color: #fff;
  background-color: var(--site-color-sky);
  font-size: 13px;
  position: relative;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.add-cart-icon { position: relative;}
.cartbox_ .btn_cart_,
.cartbox2_ .btn_cart_ {
  width: 200px;
  padding: 12px 10px;
  border-radius: var(--radius-03);
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  color: #fff;
  display: inline-block;
  background: var(--site-color-sky);
  position: relative;
}
.cartbox_ .btn_cart_:hover,
.cartbox2_ .btn_cart_:hover { opacity: var(--opacity);}

.btn_cart_.cart_button_,
.btn_cart_.cart-small-btn,
.btn_cart_.cart_button_slender_ {
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-03);
  background: var(--site-color-sky);
  font-size: 13px;
	font-weight: 700;
  text-decoration: none;
  color: #FFF;
  position: relative;
}
.btn_cart_.cart_button_ { width: 160px; height: 40px;}
.btn_cart_.cart-small-btn { width: 30px; height: 20px;}

.btn_cart_.cart_button_:hover,
.btn_cart_.cart-small-btn:hover,
.btn_cart_.cart_button_slender_:hover { opacity: var(--opacity);}

/* パーツボタン */
.move_button_,
.move_button_bk_,
.move_button_orange_,
input.move_button_,
input.move_button_bk_,
input.move_button_orange_ {
  padding: 10px 16px !important;
  margin: 4px;
  border-radius: var(--radius-03);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none !important;
	line-height: 1.0;
  display: inline-block;
	box-shadow: none !important;
  position: relative;
  overflow: visible;
  cursor: pointer;
	transition: var(--transition);
}
.move_button_,
input.move_button_ { border: var(--border-solid-blue); color: var(--site-color-blue); background-color: transparent;}
.move_button_bk_,
input.move_button_bk_ { border: var(--site-bg-gray) 1px solid; color: var(--site-color-black); background-color: var(--site-bg-gray);}
.move_button_bk_:disabled,
input.move_button_bk_:disabled { color: var(--site-color-grayout);}
.move_button_orange_,
input.move_button_orange_ { border: var(--border-solid-blue); color: #FFF; background-color: var(--site-color-blue);}