﻿@charset "UTF-8";

/* ----------------------------------
 商品詳細
---------------------------------- */
/* レイアウト */
body.page-goods .container_ { overflow: hidden;}
body.page-goods .container_ .contents_ .single_mainframe_ { width: 100%; overflow: inherit;}
body.page-goods .mainframe_ { overflow: inherit;}
div.goodsproductdetail_ { width: 100%; margin: 55px 0 60px; display: flex; justify-content: flex-start; gap: 24px;}
body.page-goods:has(.navitopicpath_) div.goodsproductdetail_ { margin-top: 0;}
div.goodsproductdetail_ #gallery { width: calc(50% - 12px);}
div.goodsproductdetail_ .goodsspec_leftframe_ { width: calc(50% - 12px); padding: 24px; border-radius: var(--radius-03); background: #FFF;}
#container { overflow: hidden;}
#container #contentArea div.wrapper_ div.contents_ { max-width: 1500px; padding: 0 40px; margin: 0 auto;}

@media (max-width: 768px) {
	div.goodsproductdetail_ { display: flex; flex-direction: column; gap: 24px;}
	div.goodsproductdetail_ #gallery { width: 100%;}
	div.goodsproductdetail_ #gallery .main-frame { margin: 0 -16px;}
	div.goodsproductdetail_ .goodsspec_leftframe_ { width: 100%; padding: 16px;}
	#container #contentArea div.wrapper_ div.contents_ { padding: 0;}
}

/* パンくず */
.page-goods	.navitopicpath_ { padding: 16px 40px;}
.page-goods	.navitopicpath_ a ,
.page-goods	.navitopicpath_ li > span,
.page-goods	.navitopicpath_ li.topicpath_home_ a { font-size: 14px;}

@media (max-width: 768px) {
	.page-goods	div.wrapper_ .navitopicpath_ { padding: 10px 16px; margin-bottom: 0 !important;}
	.page-goods	.navitopicpath_ a,
	.page-goods	.navitopicpath_ li > span,
	.page-goods	.navitopicpath_ li.topicpath_home_ a { font-size: 10px;}
}

/* ----------------------------------
 上部フレーム
---------------------------------- */
/* 左フレーム
---------------------------------- */
/* L画像 */
div.goodsproductdetail_ #gallery .swiper { margin-bottom: 0;}
div.goodsproductdetail_ #gallery .swiper:has(img) { margin-bottom: 10px;}
div.goodsproductdetail_ #gallery .swiper-slider-main { padding: 0; margin: 0 0 10px; border: none;}
div.goodsproductdetail_ #gallery:has(.swiper-slider-thumbnail[style*="display: none"]) .swiper-slider-main { margin-bottom: 30px;}
div.goodsproductdetail_ #gallery .swiper-slider-main li { width: 100%; height: auto; padding: 0; margin: 0;}
div.goodsproductdetail_ #gallery .swiper-slider-main li .image { position: relative;}
div.goodsproductdetail_ #gallery .swiper-slider-main li .figure { width: 100%; padding: 0; margin: 0; font-size: 0; display: flex; justify-content: center; align-items: center;}
div.goodsproductdetail_ #gallery .swiper-slider-main li .figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
	border: none !important;
  border-radius: var(--radius-02);
  vertical-align: top;
  object-fit: contain;
}

@media (max-width: 768px) {
	div.goodsproductdetail_ #gallery:has(.swiper-slider-thumbnail[style*="display: none"]) .swiper-slider-main { margin-bottom: 0;}
	div.goodsproductdetail_ #gallery .swiper-slider-main { width: calc(100% + 32px); max-width: none; margin: 0 -16px;}
	div.goodsproductdetail_ #gallery .swiper-slider-main li .figure img { border-radius: 0;}
}

/* C画像 */
	div.goodsproductdetail_ .goodsimg_ .img_c_ { margin-bottom: 0;}
	div.goodsproductdetail_ .goodsimg_ .img_c_ img { border-radius: var(--radius-02);}

@media (max-width: 768px) {
	div.goodsproductdetail_ .goodsimg_ .img_c_ img { border-radius: var(--radius-03);}
}

/* サムネイル画像 */
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail { width: 100%; padding: 0; margin: 0 0 30px; display: block;}
div.goodsproductdetail_ #gallery ul.swiper-slider-thumbnail,
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail ul { display: flex; flex-wrap: wrap; gap: 6px;}
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail li {
  width: calc((100% - 6px * 9)/10);
  height: auto;
  margin: 0 !important;
	border: var(--border-solid-list);
	border-radius: var(--radius-03);
  position: relative;
}
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail li.swiper-slide-thumb-active { border: var(--border-solid-blue);}
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail li .image { width: 100%; padding: 100% 0 0; position: relative;}
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail li .figure {
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
div.goodsproductdetail_ #gallery .swiper-slider-thumbnail li .figure img { 
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border: none !important;
	border-radius: 2px;
	vertical-align: top !important;
	object-fit: contain;
}

/* サムネイル画像 - バリエーション時 */
div.goodsproductdetail_ #gallery.goodsimg2_ .etc_goodsimg2_ { padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px;}
div.goodsproductdetail_ #gallery.goodsimg2_ .etc_goodsimg2_ .etc_goodsimg2_item_ {
  width: calc((100% - 10px * 3)/4);
  height: auto;
  padding: calc(((100% - 10px * 3)/4) * 0.556) 0 0;
  margin: 0 !important;
	border: var(--border-solid-frame);
  position: relative;
}
div.goodsproductdetail_ #gallery.goodsimg2_ .etc_goodsimg2_ .etc_goodsimg2_item_.active_ { border: var(--border-solid-alert);}
div.goodsproductdetail_ #gallery.goodsimg2_ .etc_goodsimg2_ .etc_goodsimg2_item_ .image_,
div.goodsproductdetail_ #gallery.goodsimg2_ .etc_goodsimg2_ .etc_goodsimg2_item_ .image_ figure {
  width: 100%;
  padding: 0;
  margin: 0;
	font-size: 10px;
	line-height: var(--line-height-low);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
	bottom: 0;
}
div.goodsproductdetail_ #gallery.goodsimg2_ .etc_goodsimg2_ .etc_goodsimg2_item_ .image_ figure img { 
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border: none !important;
	vertical-align: top !important;
	object-fit: contain;
}

/* 取扱説明書 */
div.goodsproductdetail_ .goods-affix-list { margin: 30px 0;}

/* 右フレーム
---------------------------------- */
/* 商品名 */
div.goodsproductdetail_ h1.goods_name_ { padding: 0; margin: 0 0 20px; border: none; font-size: 26px; font-weight: 700; line-height: var(--line-height-low);}

@media (max-width: 768px) {
	div.goodsproductdetail_ h1.goods_name_ { font-size: 20px;}
}

/* アイコン */
div.goodsproductdetail_ .block-icon:has(span) { margin: 0 0 20px;}

/* 価格＆施工時間 */
div.goodsproductdetail_ div.goodsspec_detail_ { margin: 0 0 12px; border: var(--border-solid-list); border-radius: var(--radius-03);}
div.goodsproductdetail_ div.price-data-frame { display: flex;}
div.goodsproductdetail_ div.price-data-frame .price-data-head {
	padding: 8px 16px;
  border-right: var(--border-solid-list);
	font-size: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div.goodsproductdetail_ div.price-data-frame .price-data-head::before {
	content: '';
	width: 100%;
	height: 24px;
	display: block;
	background-image: url("../../img/usr/icon/ico_price.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
div.goodsproductdetail_ div.price-data-frame .price-data-body { padding: 8px 16px; flex: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;}
div.goodsproductdetail_ div.price-data-frame .price-data-body * { font-size: 16px;}
div.goodsproductdetail_ div.price-data-frame .price-data-body .price_pop_ { width: 100%; font-size: 14px; text-align: left; color: var(--site-color-red);}
div.goodsproductdetail_ div.price-data-frame .price-data-body .name   { font-size: 16px;}
div.goodsproductdetail_ div.price-data-frame .price-data-body .carton { font-size: 16px;}
div.goodsproductdetail_ div.price-data-frame .price-data-body .qty    { font-size: 16px;}
div.goodsproductdetail_ div.price-data-frame .price-data-body .price  { font-size: 16px;}
div.goodsproductdetail_ div.price-data-frame .price-data-body .yen    { font-size: 12px;}
div.goodsproductdetail_ div.price-data-frame .price-data-body .tax    { font-size: 12px;}
div.goodsproductdetail_ div.price-data-frame dl { display: flex;}
div.goodsproductdetail_ div.price-data-frame dl dt { padding: 0 6px 0 0; font-size: 16px; position: relative;}
div.goodsproductdetail_ div.price-data-frame dl dd { font-size: 16px; text-align: right;}
div.goodsproductdetail_ div.price-data-frame dl.spec-semiclosed {}
div.goodsproductdetail_ div.price-data-frame dl.spec-semiclosed dt .name {}
div.goodsproductdetail_ div.price-data-frame dl.spec-semiclosed dt .carton {}
div.goodsproductdetail_ div.price-data-frame dl.spec-semiclosed dt .qty {}
div.goodsproductdetail_ div.price-data-frame dl.spec-salesprice {}
div.goodsproductdetail_ div.price-data-frame dl.spec-salesprice dt .name {}
div.goodsproductdetail_ div.price-data-frame dl.spec-salesprice dt .carton {}
div.goodsproductdetail_ div.price-data-frame dl.spec-salesprice dt .qty {}
div.goodsproductdetail_ div.price-data-frame dl.spec-default-price {}
div.goodsproductdetail_ div.price-data-frame dl.spec-default-price dt { display: none;}
div.goodsproductdetail_ div.price-data-frame dl.spec-default-price dd { text-decoration: line-through; font-size: 12px; color: var(--site-color-lightgray);}
div.goodsproductdetail_ div.price-data-frame dl.spec-diff-price { display: none;}
div.goodsproductdetail_ div.price-data-frame dl.spec-diff-price dt { font-size: 14px; color: var(--site-color-red);}
div.goodsproductdetail_ div.price-data-frame dl.spec-diff-price dd { font-size: 14px; color: var(--site-color-red);}
div.goodsproductdetail_ div.price-data-frame p.spec-salesprice-detail {}
div.goodsproductdetail_ div.price-data-frame p.spec-volumediscountline { display: flex; align-items: center;}
div.goodsproductdetail_ div.price-data-frame p.spec-volumediscountline .qty {}
div.goodsproductdetail_ div.price-data-frame p.spec-volumediscountline .price {}
div.goodsproductdetail_ div.price-data-frame.on-sale dl.spec-salesprice dd,
div.goodsproductdetail_ div.price-data-frame.on-sale dl.spec-salesprice span,
div.goodsproductdetail_ div.price-data-frame.on-sale p.spec-salesprice-detail,
div.goodsproductdetail_ div.price-data-frame.on-sale p.spec-salesprice-detail span,
div.goodsproductdetail_ div.price-data-frame.on-sale p.spec-volumediscountline,
div.goodsproductdetail_ div.price-data-frame.on-sale p.spec-volumediscountline span { color: var(--site-color-red);}
div.goodsproductdetail_ div.a-few-words {
  padding: 8px 16px;
  border-top: var(--border-solid-list);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}
div.goodsproductdetail_ div.a-few-words::after {
	content: '※目安時間です';
	font-size: 11px;
	word-break: keep-all;
	white-space: nowrap;
	color: var(--site-color-dark);
}
div.goodsproductdetail_ div.a-few-words .txt { min-height: 28px; font-size: 14px; display: flex; align-items: center; gap: 10px;}
div.goodsproductdetail_ div.a-few-words .txt::before {
	content: '';
	width: 18px;
	min-width: 18px;
	height: 18px;
	display: inline-block;
	background-color: transparent;
	background-image: var(--bg-image-time);
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}

@media (max-width: 768px) {
	div.goodsproductdetail_ div.price-data-frame .price-data-head { font-size: 14px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body * { font-size: 14px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .price_pop_ { font-size: 12px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .name   { font-size: 14px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .carton { font-size: 14px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .qty    { font-size: 14px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .price  { font-size: 14px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .yen    { font-size: 10px;}
	div.goodsproductdetail_ div.price-data-frame .price-data-body .tax    { font-size: 10px;}
}

/* 各種スペック（非表示） */
div.goodsproductdetail_ div.goodsspec_detail_other_ { padding: 16px; margin: 0 0 12px; border: var(--border-solid-list); border-radius: var(--radius-03); display: none !important;}
div.goodsproductdetail_ div.goodsspec_detail_other_:has(dt) { display: block !important;}
div.goodsproductdetail_ div.goodsspec_detail_other_ dl { display: flex;}
div.goodsproductdetail_ div.goodsspec_detail_other_ dl dt {
  width: 180px;
  min-width: 180px;
  padding: 0 15px 0 0;
  font-size: 16px;
  font-weight: 400;
  word-break: keep-all;
  white-space: nowrap;
  position: relative;
}
div.goodsproductdetail_ div.goodsspec_detail_other_ dl dt::after { content: '：'; position: absolute; top: 0; right: 12px;}
div.goodsproductdetail_ div.goodsspec_detail_other_ dl dd { font-size: 16px; font-weight: 400;}

/* 商品コメント2 */
div.goodscomment2_ { margin: 0;}
div.goodsproductdetail_ .attention-head {
  min-height: 32px;
  padding: 6px 32px;
	margin: 0 0 10px;
  border-radius: 32px;
	font-size: 13px;
	color: var(--site-color-brown);
  background: var(--site-bg-pink);
	display: flex;
	justify-content: center;
	align-items: center;
}
div.goodsproductdetail_ .attention-text { margin: 0 0 10px; font-size: 14px;}

@media (max-width: 768px) {
	div.goodsproductdetail_ .attention-head { font-size: 12px;}
}

/* カートボタンとお気に入り */
div.cartbox-wrapper { display: flex; flex-wrap: nowrap; gap: 8px;}
div.cartbox-wrapper div.cartbox-button-frame { flex: 1;}
div.cartbox-wrapper div.cartbox-button-frame .cartbox_ { padding: 0; margin: 0; display: flex; align-items: center; gap: 8px;}
div.cartbox-wrapper div.cartbox-button-frame-semiclosedlogin {}
div.cartbox-wrapper div.cartbox-button-frame-qtyttl { font-size: 12px;}
div.cartbox-wrapper div.cartbox-button-frame-qtyinput { width: 120px; min-width: 120px;}
div.cartbox-wrapper div.cartbox-button-frame-qtyinput .order_qty_ { width: 100%; height: 48px; margin: 0; text-align: center; border-color: var(--site-color-black) !important;}
div.cartbox-wrapper div.cartbox-button-frame-unit { font-size: 12px; display: none !important;}
div.cartbox-wrapper div.cartbox-button-frame-cartlink { flex: 1;}
div.cartbox-wrapper div.cartbox-button-frame-cartlink a.btn_cart_ {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-03);
  display: flex;
  justify-content: center;
  align-items: center;
	background: var(--site-color-sky);
}
div.cartbox-wrapper div.cartbox-button-frame-cartlink a.btn_cart_::before {
	content: '';
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: none;
	background-image: var(--bg-image-cart);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: inline-block;
	position: relative;
	top: 0;
	left: -5px;
}
div.cartbox-wrapper div.cartbox-button-frame-agreeform {}
div.cartbox-wrapper div.cartbox-button-frame-agreegoods { flex: 1;}
div.cartbox-wrapper div.cartbox-bookmark-frame .btn.btn-add-bookmark {
  width: 48px;
  min-width: 48px;
  height: 48px;
	border: var(--border-solid-blue);
	border-radius: var(--radius-03);
	font-size: 0;
	text-decoration: none;
	color: var(--site-color-blue);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	background-image: url("../../img/usr/icon/ico_bookmark.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 24px auto;
	background-size: 24px auto;
	cursor: pointer;
}
div.cartbox-wrapper div.cartbox-bookmark-frame .btn-registed-bookmark {
  width: 48px;
  min-width: 48px;
  height: 48px;
	border: var(--border-solid-blue);
	border-radius: var(--radius-03);
	font-size: 0;
	text-decoration: none;
	color: var(--site-color-blue);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	background-image: url("../../img/usr/icon/ico_bookmark_btn_on.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 24px auto;
	background-size: 24px auto;
	cursor: pointer;
}

@media (max-width: 1000px) {
	div.cartbox-wrapper { flex-wrap: wrap; gap: 20px;}
	div.cartbox-wrapper div.cartbox-button-frame { width: 100%;}
	div.cartbox-wrapper div.cartbox-bookmark-frame { width: 100%;}
	div.cartbox-wrapper div.cartbox-bookmark-frame .btn.btn-add-bookmark { width: 100%; font-size: 14px; background: #FFF;}
	div.cartbox-wrapper div.cartbox-bookmark-frame .btn-registed-bookmark { width: 100%; font-size: 14px; background: #FFF;}
	div.cartbox-wrapper div.cartbox-button-frame-qtyinput { width: 80px; min-width: 80px;}
}
@media (max-width: 768px) {
}

/* 親カテゴリーへ戻るボタン */
div.to_backcategory_ { margin: 32px 0 0; display: flex; justify-content: center;}
div.to_backcategory_ a {
  width: 100%;
  min-height: 48px;
	padding: 8px 16px;
  margin: 0 auto;
	border: var(--border-solid-blue);
	border-radius: var(--radius-03);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	color: var(--site-color-blue);
  display: flex;
  justify-content: center;
  align-items: center;
	background: transparent;
	cursor: pointer;
	transition: var(--transition);
}
div.to_backcategory_ a:hover { opacity: var(--opacity);}
div.to_backcategory_ a::before {
	content: '';
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	border-radius: 20px;
	line-height: 1.0;
	font-size: 8px;
	font-weight: 400;
	display: inline-block;
	background-color: transparent;
	background-image: var(--bg-image-arrow-blue);
	-webkit-background-size: 10px auto;
	background-size: 10px auto;
	background-position: center;
	background-repeat: no-repeat;
  transform: rotate(180deg);
}
@media (max-width: 1000px) {
	div.to_backcategory_ { margin: 10px 0 0; display: flex; justify-content: center;}
	div.to_backcategory_ a { min-width: 100%;}
}

/* バリエーションセレクト */
div.goodsproductdetail_ .goodsspec_ .goodsspec2_ { display: block;}
div.goodsproductdetail_ .goodsspec_ .goodsspec2_ .goodsspec_frame_ { margin: 0 0 20px;}
div.goodsproductdetail_ .goodsspec_ .variation_select_ { padding: 0; margin: 20px 0;}
div.goodsproductdetail_ .goodsspec_ .variation_select_ h2.variation_title_ { 
	padding: 0;
	margin: 0 0 10px;
	border: none;
	font-size: 14px;
	font-weight: 400;
	background: none;
}
div.goodsproductdetail_ .goodsspec_ .variation_select_ .variation_ { margin: 0; display: block;}
div.goodsproductdetail_ .goodsspec_ .variation_select_ select { width: 100%; max-width: 100%; height: 40px; margin: 0; border-color: #666 !important;}
div.goodsproductdetail_ .goodsspec_ .variation_select_ select + select { margin-top: 15px;}

div.goodsproductdetail_ .variation_select_frame_ { margin: 20px 0; display: flex; align-items: center; gap: 10px;}
div.goodsproductdetail_ .variation_select_frame_ select { width: 100%; max-width: 100%; height: 40px; margin: 0; border-color: #666 !important;}
div.goodsproductdetail_ .variation_select_frame_ select + select { margin-top: 15px;}

/* セット内容 */
div.goodsproductdetail_ div.goodsset_ { padding: 0; margin: 30px 0 20px;}
div.goodsproductdetail_ div.goodsset_ .goodsset_title_ { padding: 0; margin: 0 0 10px; font-size: 16px; font-weight: 700;}

/* カートボタン */
div.cartbox_button_frame_ { margin: 40px 0 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px;}
div.cartbox_button_frame_ .notice_text_ { width: 100%; font-size: 16px; text-align: center; color: var(--site-color-red);}
div.cartbox_button_frame_ .edit_link_btn_ { width: calc(50% - 10px);}
div.cartbox_button_frame_ .edit_link_btn_ .btn_edit_ {
  width: 100%;
  height: 60px;
  padding: 12px 10px;
	border: none;
  border-radius: var(--radius-02);
	outline: none;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--site-color-blue);
  position: relative;
}
div.cartbox_button_frame_ .cart_link_btn_ { width: calc(50% - 10px);}
div.cartbox_button_frame_ .cart_link_btn_ .btn_cart_ {
	width: 100%;
	height: 60px;
	border: none;
	outline: none;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
div.cartbox_button_frame_ .cart_link_btn_ .btn_cart_.disabled_ { color: #999; background: var(--site-bg-gray); cursor: not-allowed;}
div.cartbox_button_frame_ .cart_link_btn_ .btn_cart_.disabled_:hover { opacity: 1.0;}
div.cartbox2_ { margin: 40px 0 20px; display: flex; justify-content: flex-end; gap: 20px;}
div.cartbox2_ > .btn_cart_ { max-width: calc(50% - 10px);}
div.cartbox2_ .btn_cart_ { width: 100%; height: 60px; border: none; outline: none; font-size: 20px; display: flex; justify-content: center; align-items: center;}

/* 詳細情報へのリンク */
div.to_detaillink_ { display: none !important;}
div.to_detaillink_ a {
  width: 360px;
  height: 56px;
  margin: 32px auto 0;
	border: var(--border-solid-blue);
	border-radius: var(--radius-03);
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: var(--site-color-blue);
  display: flex;
  justify-content: center;
  align-items: center;
	background: transparent;
	cursor: pointer;
	transition: var(--transition);
}
div.to_detaillink_ a:hover { opacity: var(--opacity);}
div.to_detaillink_ a::after {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 10px;
  border-right: var(--border-solid-blue);
  border-top: var(--border-solid-blue);
  display: inline-block;
	position: relative;
	top: 1px;
  transform: rotate(45deg);
}

/* ----------------------------------
 下部フレーム
---------------------------------- */
/* バリエーションリスト */
h2.goods_variation_list_ {
	padding: 0 0 0 24px;
	margin: 0 0 20px;
	border: none;
	font-size: 20px;
	font-weight: 700;
  line-height: var(--line-height-low);
	color: var(--site-color-blue);
	background: transparent;
	display: flex;
	align-items: center;
  box-sizing: border-box;
  position: relative;
}
h2.goods_variation_list_::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;
}

/* オプション一覧 */
div.togetherlist_ div.togetherlist_head_ { display: none;}
div.togetherlist_:has(.StyleP_Item_) div.togetherlist_head_ {
	width: 100%;
	min-height: 64px;
	border-radius: var(--radius-03) var(--radius-03) 0 0;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 18px;
	background-color: var(--site-color-grayout);
	box-sizing: border-box;
}
div.togetherlist_ div.togetherlist_head_ p.title {
	height: 100%;
	padding: 0 0 0 24px;
	margin: 0;
	border-radius: var(--radius-03) var(--radius-03) 0 0;
	font-size: 16px;
	font-weight: 700;
	word-break: keep-all;
	white-space: nowrap;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	background: var(--site-color-grayout);
	box-sizing: border-box;
}
div.togetherlist_ div.togetherlist_head_ p.title::before {
	content: '';
	width: 30px;
	height: 30px;
	display: block;
	background-color: transparent;
	background-image: url("../../img/usr/icon/ico_setting.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 30px auto;
	background-size: 30px auto;
	box-sizing: border-box;
}
div.togetherlist_ div.togetherlist_head_ div.goodscomment5_ { margin: 0; font-size: 15px; font-weight: 400; color: var(--site-color-brown);}
div.togetherlist_ div.goods_:has(div.StyleP_Frame_) { position: relative;}
div.togetherlist_ div.goods_:has(div.StyleP_Frame_)::before {
	content: '';
	width: 100%;
	border-top: var(--border-solid-list);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
div.togetherlist_ div.StyleP_Frame_ { padding: 0; border-radius: 0; border-left: var(--border-solid-list); background: #FFF; position: relative;}
div.togetherlist_ div.StyleP_Frame_::before,
div.togetherlist_ div.StyleP_Frame_::after  { content: ''; display: block; position: absolute;}
div.togetherlist_ div.StyleP_Frame_::before { width: 100%; border-top: var(--border-solid-list); left: 0; right: 0; bottom: 0; z-index: 2;}
div.togetherlist_ div.StyleP_Frame_::after  { height: 100%; border-right: var(--border-solid-list); top: 0; right: 0; bottom: 0; z-index: 2;}
div.togetherlist_ div.StyleP_Frame_ ul.StyleP_Line_ { gap: 0;}
div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ { width: calc(100% / 3); border-bottom: var(--border-solid-list); border-right: var(--border-solid-list);}
div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ div.a-few-words::after {
	content: '※目安時間です';
	font-size: 11px;
	word-break: keep-all;
	white-space: nowrap;
	color: var(--site-color-dark);
}
div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ div.block-icon { display: flex;}
div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ div.bottom-frame { display: none;}

@media (max-width: 1360px) {
	div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ { width: 50%;}
}
@media (max-width: 1000px) {
	div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ { width: 100%;}
}
@media (max-width: 768px) {
	div.togetherlist_:has(.StyleP_Item_) div.togetherlist_head_ { height: auto; border-radius: 0; display: block; background: transparent;}
	div.togetherlist_ div.togetherlist_head_ p.title { min-height: 48px; padding: 0 16px; font-size: 14px; justify-content: center;}
	div.togetherlist_ div.togetherlist_head_ p.title::before { width: 20px; height: 20px; -webkit-background-size: 20px auto; background-size: 20px auto;}
	div.togetherlist_ div.togetherlist_head_ div.goodscomment5_ { padding: 16px 16px 0; font-size: 11px; text-align: center; background: #FFF;}
	div.togetherlist_ div.goods_:has(div.StyleP_Frame_)::before { display: none;}
	div.togetherlist_ div.StyleP_Frame_ { padding: 0 16px 16px; border-radius: 0; border: none;}
	div.togetherlist_ div.StyleP_Frame_::before,
	div.togetherlist_ div.StyleP_Frame_::after { display: none;}
	div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ { border-right: none; border-bottom: none;}
	div.togetherlist_ div.StyleP_Frame_ li.StyleP_Item_ div.a-few-words::after { font-size: 10px;}
}

/* 関連商品一覧 */
div.accessory_list_ div.accessorylist_head_ { display: none;}
div.accessory_list_:has(.StyleP_Item_) div.accessorylist_head_ {
	width: 100%;
	min-height: 64px;
	border-radius: var(--radius-03) var(--radius-03) 0 0;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 18px;
	background-color: var(--site-color-grayout);
	box-sizing: border-box;
}
div.accessory_list_ div.accessorylist_head_ p.title {
	height: 100%;
	padding: 0 0 0 24px;
	margin: 0;
	border-radius: var(--radius-03) var(--radius-03) 0 0;
	font-size: 16px;
	font-weight: 700;
	word-break: keep-all;
	white-space: nowrap;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	background: var(--site-color-grayout);
	box-sizing: border-box;
}
div.accessory_list_ div.accessorylist_head_ p.title::before {
	content: '';
	width: 30px;
	height: 30px;
	display: block;
	background-color: transparent;
	background-image: url("../../img/usr/icon/ico_setting.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 30px auto;
	background-size: 30px auto;
	box-sizing: border-box;
}
div.accessory_list_ div.accessorylist_head_ div.goodscomment5_ { margin: 0; font-size: 15px; font-weight: 400; color: var(--site-color-brown);}
div.accessory_list_ div.goods_:has(div.StyleP_Frame_) { position: relative;}
div.accessory_list_ div.goods_:has(div.StyleP_Frame_)::before {
	content: '';
	width: 100%;
	border-top: var(--border-solid-list);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
div.accessory_list_ div.StyleP_Frame_ { padding: 0; border-radius: 0; border-left: var(--border-solid-list); background: #FFF; position: relative;}
div.accessory_list_ div.StyleP_Frame_::before,
div.accessory_list_ div.StyleP_Frame_::after  { content: ''; display: block; position: absolute;}
div.accessory_list_ div.StyleP_Frame_::before { width: 100%; border-top: var(--border-solid-list); left: 0; right: 0; bottom: 0; z-index: 2;}
div.accessory_list_ div.StyleP_Frame_::after  { height: 100%; border-right: var(--border-solid-list); top: 0; right: 0; bottom: 0; z-index: 2;}
div.accessory_list_ div.StyleP_Frame_ ul.StyleP_Line_ { gap: 0;}
div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ { width: calc(100% / 3); border-bottom: var(--border-solid-list); border-right: var(--border-solid-list);}
div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ div.a-few-words::after {
	content: '※目安時間です';
	font-size: 11px;
	word-break: keep-all;
	white-space: nowrap;
	color: var(--site-color-dark);
}
div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ div.comment1_ { display: block;}
div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ div.block-icon { display: flex;}
div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ div.bottom-frame { display: none;}

@media (max-width: 1360px) {
	div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ { width: 50%;}
}
@media (max-width: 1000px) {
	div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ { width: 100%;}
}
@media (max-width: 768px) {
	div.accessory_list_:has(.StyleP_Item_)  div.accessorylist_head_ { height: auto; border-radius: 0; display: block; background: transparent;}
	div.accessory_list_ div.accessorylist_head_ p.title { min-height: 48px; padding: 0 16px; font-size: 14px; justify-content: center;}
	div.accessory_list_ div.accessorylist_head_ p.title::before { width: 20px; height: 20px; -webkit-background-size: 20px auto; background-size: 20px auto;}
	div.accessory_list_ div.accessorylist_head_ div.goodscomment5_ { padding: 16px 16px 0; font-size: 11px; text-align: center;  background: #FFF;}
	div.accessory_list_ div.goods_:has(div.StyleP_Frame_)::before { display: none;}
	div.accessory_list_ div.StyleP_Frame_ { padding: 0 16px 16px; border-radius: 0; border: none;}
	div.accessory_list_ div.StyleP_Frame_::before,
	div.accessory_list_ div.StyleP_Frame_::after { display: none;}
	div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ { border-right: none; border-bottom: none;}
	div.accessory_list_ div.StyleP_Frame_ li.StyleP_Item_ div.a-few-words::after { font-size: 10px;}
}

/* ----------------------------------
 メニュー概要／クリーニングの流れ
---------------------------------- */
#menu_detail_contents { margin: 40px 0;}
#menu_detail_contents #menu_tab { display: flex; align-items: center; gap: 12px;}
#menu_detail_contents #menu_tab li {
  height: 85px;
	padding: 10px;
  border-radius: var(--radius-02) var(--radius-02) 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
  flex: 1;
  background: var(--site-color-grayout);
  position: relative;
  z-index: 1;
}
#menu_detail_contents #menu_tab li:not(.is-open) { padding: 10px 10px 15px; bottom: -10px; cursor: pointer;}
#menu_detail_contents #menu_tab li.is-open { background: #FFF;}
#menu_detail_contents #menu_tab li span { font-size: 16px; font-weight: 400; color: var(--site-color-lightgray);}
#menu_detail_contents #menu_tab li.is-open span { font-weight: 700; color: var(--site-color-deepblue);}
#menu_detail_contents .menu-body { padding: 32px; border-radius: 0 0 var(--radius-02) var(--radius-02); background: #FFF; position: relative; z-index: 2;}
#menu_detail_contents .menu-body .menu-box { display: none;}
#menu_detail_contents .menu-body .menu-box:first-child { display: block;}
#menu_detail_contents .menu-body h2 { margin: 0 0 20px; font-size: 20px; font-weight: 700; text-align: left; color: var(--site-color-deepblue);}
#menu_detail_contents .menu-body h2.center { text-align: center;}
#menu_detail_contents .menu-body h3 { margin: 0 0 20px; font-size: 16px; font-weight: 700; text-align: left;}
#menu_detail_contents .menu-body h3.center { text-align: center;}
#menu_detail_contents .menu-body .top-text { margin: 0 0 20px; font-size: 16px; font-weight: 400; text-align: left;}
#menu_detail_contents .menu-body .top-text.center { text-align: center;}
#menu_detail_contents .column-box { display: flex; flex-wrap: wrap; gap: 24px;}
#menu_detail_contents .column-box + .column-box { margin-top: 30px;}
#menu_detail_contents .column-box .column-image { width: calc(50% - 12px);}
#menu_detail_contents .column-box .column-image img { border-radius: var(--radius-02);}
#menu_detail_contents .column-box .column-desc { width: calc(50% - 12px);}
#menu_detail_contents .mark-list li { padding: 0 0 0 1em; font-size: 16px; text-indent: -1em; list-style: inside disc;}
#menu_detail_contents .mark-list li + li { margin-top: 6px;}
#menu_detail_contents .flow-list { display: flex; flex-wrap: wrap; gap: 24px;}
#menu_detail_contents .flow-list li { width: calc((100% - 24px * 2)/3);}
#menu_detail_contents .flow-list li .image { margin: 0 0 16px;}
#menu_detail_contents .flow-list li .image img { border-radius: var(--radius-02);}
#menu_detail_contents .flow-list li .name  { margin: 0 0 10px; font-size: 16px; font-weight: 700;}
#menu_detail_contents .flow-list li .text  { font-size: 14px;}

@media (max-width: 768px) {
	#menu_detail_contents #menu_tab { gap: 0;}
	#menu_detail_contents #menu_tab li { height: 44px; padding: 6px; border-radius: var(--radius-03) var(--radius-03) 0 0;}
	#menu_detail_contents #menu_tab li span { font-size: 12px;}
	#menu_detail_contents #menu_tab li:not(.is-open) { padding: 6px 6px 15px;}
	#menu_detail_contents .menu-body { padding: 16px;}
	#menu_detail_contents .menu-body h2 { margin: 0 0 10px; font-size: 15px; color: var(--site-color-black);}
	#menu_detail_contents .menu-body h3 { margin: 0 0 10px; font-size: 15px;}
	#menu_detail_contents .column-box { flex-direction: column;}
	#menu_detail_contents .column-box + .column-box { margin-top: 20px;}
	#menu_detail_contents .column-box .column-image { width: 100%;}
	#menu_detail_contents .column-box .column-desc  { width: 100%;}
	#menu_detail_contents .mark-list li { font-size: 13px;}
	#menu_detail_contents .flow-list { flex-direction: column;}
	#menu_detail_contents .flow-list li { width: 100%;}
	#menu_detail_contents .flow-list li + li { padding-top: 20px; border-top: var(--border-solid-list);}
	#menu_detail_contents .flow-list li .image { margin: 0 0 16px;}
	#menu_detail_contents .flow-list li .name  { font-size: 14px;}
	#menu_detail_contents .flow-list li .text  { font-size: 12px;}
}

/* ----------------------------------
 注意事項
---------------------------------- */
#attention_list_frame { margin: 40px 0; padding: 32px; border-radius: var(--radius-02); background: #FFF;}
#attention_list_frame .attention-head {
  min-height: 32px;
  padding: 6px 32px;
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--site-color-brown);
  background: var(--site-bg-pink);
	display: flex;
	justify-content: center;
	align-items: center;
}
#attention_list_frame .attention-box + .attention-box { margin-top: 40px;}
#attention_list_frame .attention-ttl { margin: 0 0 20px; font-size: 20px; font-weight: 700; text-align: center;}
#attention_list_frame .attention-list li { padding: 0 0 0 1em; font-size: 16px; text-indent: -1em; list-style: inside disc;}
#attention_list_frame .attention-ttl.red { color: var(--site-color-brown);}
#attention_list_frame .attention-list.red li { color: var(--site-color-brown);}
#attention_list_frame .attention-list li.red { color: var(--site-color-brown);}
#attention_list_frame .attention-list li + li { margin-top: 6px;}

@media (max-width: 768px) {
	#attention_list_frame { padding: 16px;}
	#attention_list_frame .attention-head { font-size: 12px;}
	#attention_list_frame .attention-ttl { font-size: 15px; text-align: left;}
	#attention_list_frame .attention-list li { font-size: 13px; text-indent: -1em;}
}

/* ----------------------------------
 対象エリア
---------------------------------- */
#target_area_frame { margin: 40px 0;}
#target_area_frame h2 {
	padding: 0 0 0 24px;
	margin: 0 0 20px;
	border: none;
	font-size: 20px;
	font-weight: 700;
  line-height: var(--line-height-low);
	color: var(--site-color-blue);
	background: transparent;
	display: flex;
	align-items: center;
  box-sizing: border-box;
  position: relative;
}
#target_area_frame h2::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;
}
#target_area_frame #area_tab { border-radius: var(--radius-02) var(--radius-02) 0 0; display: flex; align-items: center; gap: 0 1px; overflow: hidden;}
#target_area_frame #area_tab li {
	width: calc((100% - 1px * 6)/7);
  height: 56px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  cursor: pointer;
}
#target_area_frame #area_tab li span { font-size: 16px; font-weight: 700;}
#target_area_frame #area_tab li.is-open { background: var(--site-color-blue);}
#target_area_frame #area_tab li.is-open span { color: #FFF;}
#target_area_frame #area_tab li.is-disabled { cursor: auto;}
#target_area_frame #area_tab li.is-disabled span { color: var(--site-color-grayout);}
#target_area_frame .area-frame { padding: 16px; border-radius: 0 0 var(--radius-02) var(--radius-02); background: var(--site-color-grayout);}
#target_area_frame .area-frame .area-head  { display: none;}
#target_area_frame .area-frame .area-box   { display: none;}
#target_area_frame .pref-box:first-of-type { border-radius: var(--radius-02) var(--radius-02) 0 0; overflow: hidden;}
#target_area_frame .pref-box:last-of-type  { border-radius: 0 0 var(--radius-02) var(--radius-02); overflow: hidden;}
#target_area_frame .pref-box + .pref-box   { border-top: var(--border-solid-list);}
#target_area_frame .pref-box h3.pref-name  {
  min-height: 52px;
  padding: 5px 32px 5px 16px;
  font-size: 15px;
	color: var(--site-color-grayout);
  display: flex;
  align-items: center;
  background: #FFF;
  position: relative;
}
#target_area_frame .pref-box:has(li) h3.pref-name { color: var(--site-color-black); cursor: pointer;}
#target_area_frame .pref-box h3.pref-name::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--site-color-lightsky) 2px solid;
  border-top: var(--site-color-lightsky) 2px solid;
  position: absolute;
  right: 25px;
  top: calc(50% - 7px);
  display: block;
  transform: rotate(135deg);
	transition: var(--transition);
}
#target_area_frame .pref-box:has(li) h3.pref-name::after { border-right: var(--site-color-blue) 2px solid; border-top: var(--site-color-blue) 2px solid;}
#target_area_frame .pref-box:has(li) h3.pref-name.is-open::after { top: calc(50% - 2px); transform: rotate(-45deg);}
#target_area_frame .pref-box .area-list { display: none;}
#target_area_frame .pref-box .area-list li { min-height: 46px; border-top: var(--border-solid-list); display: flex; align-items: stretch; background: var(--site-bg-dark);}
#target_area_frame .pref-box .area-list li .pick {
  width: 46px;
	min-width: 46px;
	margin: 0 16px 0 0;
  font-size: 16px;
	font-weight: 700;
	color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--site-color-deepblue);
}
#target_area_frame .pref-box .area-list li .name { margin: auto 0; font-size: 16px;}

@media (max-width: 768px) {
	#target_area_frame h2 { margin: 0 0 16px; font-size: 17px; color: var(--site-color-black);}
	#target_area_frame #area_tab { display: none;}
	#target_area_frame .area-frame { padding: 0; border-radius: var(--radius-02); background: transparent; overflow: hidden;}
	#target_area_frame .area-frame .area-head {
	  height: 56px;
	  padding: 6px 38px 6px 16px;
	  border-top: var(--border-solid-list);
	  display: flex;
	  align-items: center;
	  cursor: pointer;
	  background: #FFF;
		position: relative;
	}
	#target_area_frame .area-frame .area-head:not(.is-disabled)::before {
		content: '';
		width: 28px;
		height: 28px;
		border-radius: 28px;
		background: #FFF;
		position: absolute;
		top: calc(50% - 14px);
		right: 12px;
	}
	#target_area_frame .area-frame .area-head:not(.is-disabled)::after {
		content: '';
		width: 6px;
		height: 6px;
		border-right: var(--site-color-blue) 2px solid;
		border-top: var(--site-color-blue) 2px solid;
		position: absolute;
		right: 22px;
		top: calc(50% - 6px);
		display: block;
		transform: rotate(135deg);
		transition: var(--transition);
	}
	#target_area_frame .area-frame .area-head.is-open:not(.is-disabled)::before { background: var(--site-bg-blue);}
	#target_area_frame .area-frame .area-head.is-open:not(.is-disabled)::after { transform: rotate(-45deg); top: calc(50% - 3px);}
	#target_area_frame .area-frame .area-head:first-of-type { border-top: none;}
	#target_area_frame .area-frame .area-head span { font-size: 16px; font-weight: 700;}
	#target_area_frame .area-frame .area-head.is-disabled { cursor: auto;}
	#target_area_frame .area-frame .area-head.is-disabled span { color: var(--site-color-grayout);}
	#target_area_frame .area-frame .area-box { padding: 16px; border-radius: 0; background: var(--site-color-grayout);}
	#target_area_frame .pref-box h3.pref-name::after {
		width: 6px;
		height: 6px;
		border-right: var(--site-color-lightsky) 1px solid;
		border-top: var(--site-color-lightsky) 1px solid;
		top: calc(50% - 6px);
		right: 22px;
	}
	#target_area_frame .pref-box:has(li) h3.pref-name::after { border-right: var(--border-solid-blue); border-top: var(--border-solid-blue);}
}

/* ----------------------------------
 購入手続きに戻るボタン
---------------------------------- */
.block-return-top { margin: 32px 0 0;}
.block-return-top .block-return-top-button {
  width: 360px;
  height: 56px;
  margin: 32px auto 0;
	border: var(--border-solid-blue);
	border-radius: var(--radius-03);
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: var(--site-color-blue);
  display: flex;
  justify-content: center;
  align-items: center;
	background: transparent;
	cursor: pointer;
	transition: var(--transition);
}
.block-return-top .block-return-top-button:hover { opacity: var(--opacity);}
.block-return-top .block-return-top-button::after {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 10px;
  border-right: var(--border-solid-blue);
  border-top: var(--border-solid-blue);
  display: inline-block;
	position: relative;
	top: 3px;
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
	.block-return-top .block-return-top-button { width: 100%; margin-top: 24px;}
}

/* ----------------------------------
 カート投入時の注意事項
---------------------------------- */
body.page-goods:has(.ui-widget-overlay) { overflow: hidden;}
body.page-goods div.ui-widget-overlay { display: block; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 1.0; z-index: 9999;}
body.page-goods div.ui-widget-content#dialog-agree {
  min-width: 720px;
  padding: 0;
  margin: auto;
  border: none;
  border-radius: 16px;
  background: #FFF;
  overflow: hidden;
  position: relative;
  z-index: 10000;
}
body.page-goods #dialog-agree div.ui-widget-header {
  min-height: 44px;
  padding: 5px 32px;
  font-size: 13px;
  text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
  background: var(--site-bg-dark);
  position: relative;
}
body.page-goods #dialog-agree div.ui-widget-header .ui-dialog-title { font-size: 13px; font-weight: 400; color: var(--site-color-black);}
body.page-goods #dialog-agree div.ui-widget-header .ui-button.ui-corner-all {
	width: 28px;
	height: 28px;
	border-radius: 28px;
	font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
  background: #C1C7CD;
  position: absolute;
  top: calc(50% - 14px);
  right: 7px;
	cursor: pointer;
}
body.page-goods #dialog-agree div.ui-widget-header .ui-button.ui-corner-all::before,
body.page-goods #dialog-agree div.ui-widget-header .ui-button.ui-corner-all::after {
	content: '';
	width: 12px;
	border-top: #FFF 1px solid;
	font-size: 0;
	display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  left: calc(50% - 6px);
	transform: rotate(45deg);
}
body.page-goods #dialog-agree div.ui-widget-header .ui-button.ui-corner-all::after { transform: rotate(-45deg);}
body.page-goods #dialog-agree div.ui-widget-header .ui-button.ui-corner-all span { display: none !important;}
body.page-goods #dialog-agree div.ui-widget-content[id^="agree"] { padding: 32px 32px 1px; background: #FFF;}
body.page-goods #dialog-agree div.agree-text-head { margin: 0 0 16px; font-size: 16px; font-weight: 700; text-align: left;}
body.page-goods #dialog-agree div.agree-text-wrap { max-height: 260px; margin: 0 0 16px; font-size: 14px; font-weight: 400; text-align: left; overflow-y: auto;}
body.page-goods #dialog-agree .agree-confirm-ttl { margin: 0 0 16px; font-size: 13px; font-weight: 400; text-align: center; color: var(--site-color-red);}
body.page-goods #dialog-agree .agree-confirm-ttl br { display: none;}
body.page-goods #dialog-agree .agree-confirm-check:disabled { cursor: not-allowed;}
body.page-goods #dialog-agree label:has(.agree-confirm-check:disabled) { opacity: 0.4;}
body.page-goods #dialog-agree .agree-confirm-wrap { display: flex; justify-content: center; align-items: center;}
body.page-goods #dialog-agree .agree-confirm-wrap label { display: flex; justify-content: center; align-items: center; font-size: 14px; gap: 12px;}
body.page-goods #dialog-agree .agree-confirm-wrap label input[type="checkbox"] {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  margin: 0;
}
body.page-goods #dialog-agree .ui-dialog-buttonpane { padding: 0; margin: 16px 0 32px;}
body.page-goods #dialog-agree .ui-dialog-buttonset  { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;}
body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button {
	width: 100%;
	max-width: 278px;
	height: 48px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.0;
	border: var(--site-color-sky) 1px solid;
	border-radius: var(--radius-03);
	display: flex;
	justify-content: center;
	align-items: center;
}
body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button.ui-state-disabled { border: var(--site-color-grayout) 1px solid; opacity: 1.0;}
body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button.btn-agree-go-cart { color: #FFF; background: var(--site-color-sky);}
body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button.btn-agree-go-cart.ui-state-disabled { background: var(--site-color-grayout);}
body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button.btn-agree-add-cart { font-size: 12px; font-weight: 400; color: var(--site-color-sky); background: #FFF;}
body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button.btn-agree-add-cart.ui-state-disabled { color: var(--site-color-grayout); background: #FFF;}

/* 注意事項内「こちら」リンクによる画面切替（お掃除対象範囲など） */
body.page-goods #dialog-agree .js-agree-scope-link { color: var(--site-color-sky); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}
body.page-goods #dialog-agree .js-agree-scope-link:hover { text-decoration: none; opacity: var(--site-opacity);}
body.page-goods #dialog-agree button.js-agree-scope-link { padding: 0; font: inherit; color: var(--site-color-sky); background: none; border: none;}
body.page-goods #dialog-agree .agree-scope-back {
	display: none;
	height: 28px;
	padding: 0 10px 0 22px;
	font-size: 13px;
	color: var(--site-color-black);
	background: none;
	border: none;
	border-radius: 14px;
	position: absolute;
	top: calc(50% - 14px);
	left: 7px;
	cursor: pointer;
}
body.page-goods #dialog-agree .agree-scope-back::before {
	content: '';
	width: 7px;
	height: 7px;
	border-left: currentColor 1px solid;
	border-bottom: currentColor 1px solid;
	position: absolute;
	top: calc(50% - 4px);
	left: 11px;
	transform: rotate(45deg);
}
body.page-goods #dialog-agree .agree-scope-back:hover { background: rgba(0, 0, 0, 0.06);}
body.page-goods #dialog-agree .agree-scope-view { display: none;}
body.page-goods #dialog-agree .agree-scope-inner { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;}
body.page-goods #dialog-agree .agree-scope-img { display: block; max-width: 100%; height: auto; margin: 0 auto;}
body.page-goods #dialog-agree .agree-scope-foot { margin: 16px 0 32px; display: flex; justify-content: center;}
body.page-goods #dialog-agree .agree-scope-back-btn {
	width: 100%;
	max-width: 278px;
	height: 48px;
	font-size: 12px;
	font-weight: 400;
	color: var(--site-color-sky);
	background: #FFF;
	border: var(--site-color-sky) 1px solid;
	border-radius: var(--radius-03);
	cursor: pointer;
}
body.page-goods #dialog-agree.is-agree-scope div.ui-widget-content[id^="agree"] > *:not(.agree-scope-view) { display: none;}
body.page-goods #dialog-agree.is-agree-scope .agree-scope-view { display: block;}
body.page-goods #dialog-agree.is-agree-scope .agree-scope-back { display: block;}
body.page-goods #dialog-agree.is-agree-scope .ui-dialog-buttonpane { display: none;}
body.page-goods #dialog-agree.is-agree-scope div.ui-widget-header .ui-button.ui-dialog-titlebar-close { display: none;}
body.page-goods #dialog-agree div.ui-widget-content.is-agree-enter-forward { animation: agreeScopeInR .22s ease-out;}
body.page-goods #dialog-agree div.ui-widget-content.is-agree-enter-back { animation: agreeScopeInL .22s ease-out;}

@keyframes agreeScopeInR { from { opacity: 0; transform: translateX(32px);}}
@keyframes agreeScopeInL { from { opacity: 0; transform: translateX(-32px);}}

@media (max-width: 768px) {
	body.page-goods div.ui-widget-content#dialog-agree { min-width: calc(100% - 32px); width: calc(100% - 32px); margin: 0 auto;}
	body.page-goods #dialog-agree div.agree-text-head { margin: 0 0 10px; font-size: 13px;}
	body.page-goods #dialog-agree div.agree-text-wrap { margin: 0 0 10px; max-height: 200px; font-size: 13px;}
	body.page-goods #dialog-agree .agree-confirm-ttl  { margin: 0 0 10px; font-size: 11px;}
	body.page-goods #dialog-agree .agree-confirm-ttl br { display: block;}
	body.page-goods #dialog-agree .ui-dialog-buttonpane { padding: 0 32px;}
	body.page-goods #dialog-agree .ui-dialog-buttonset .ui-button {	max-width: unset;}
	body.page-goods #dialog-agree .agree-scope-inner { max-height: 50vh;}
	body.page-goods #dialog-agree .agree-scope-foot { margin: 10px 0 32px;}
	body.page-goods #dialog-agree .agree-scope-back-btn { max-width: unset;}
}
