@charset "UTF-8";
/* ▼▼▼ 既存のCSSコード ▼▼▼ */
html, body {
  overflow: initial;
}

[data-page=basemake-kit] #contents { /* data-page 属性を basemake-kit に合わせる */
  padding-top: 60px;
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  [data-page=basemake-kit] #contents {
    padding-bottom: 140px;
  }
}
@media only screen and (max-width: 767px) {
  [data-page=basemake-kit] #contents {
    padding-bottom: 90px;
  }
}
[data-page=basemake-kit] .item-info {
  margin-bottom: 20px;
}
[data-page=basemake-kit] .item-info_msg {
  background: transparent;
  font-size: 1.2rem;
}
[data-page=basemake-kit] .cmd-section {
  margin-top: 0;
}
[data-page=basemake-kit] h1.title {
  font-weight: 500;
}
@media (min-width: 768px) {
  [data-page=basemake-kit] h1.title {
    font-size: 2.6rem;
  }
}
@media only screen and (max-width: 767px) {
  [data-page=basemake-kit] h1.title {
    font-size: 1.8rem;
  }
}
[data-page=basemake-kit] .item-info.tcenter.-soldout {
  margin-top: 20px;
}
[data-page=basemake-kit] .item-info.tcenter.-soldout span {
  font-weight: bold;
  border-color: #C80421;
  color: #C80421;
}
[data-page=basemake-kit] .tcenter.mv {
  margin-top: 60px;
}
[data-page=basemake-kit] .cmd-title-section._h2 {
  margin-top: 60px;
  margin-bottom: 40px;
  font-weight: 500;
}
@media (min-width: 768px) {
  [data-page=basemake-kit] .cmd-title-section._h2 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  [data-page=basemake-kit] .cmd-title-section._h2 {
    font-size: 1.7rem;
  }
}
[data-page=basemake-kit] .cpb-text {
  margin-bottom: 20px;
}
/* [data-page=basemake-kit] .cpb-accordion ... 以下、既存のアコーディオン等のスタイルは省略せずそのまま記述 ... */
[data-page=basemake-kit] .cpb-accordion { overflow: hidden; margin-top:60px; margin-inline: auto; border-top: 1px solid #000; border-bottom: 1px solid #000; }
@media (min-width: 768px) { [data-page=basemake-kit] .cpb-accordion { width: 350px; } }
@media only screen and (max-width: 767px) { [data-page=basemake-kit] .cpb-accordion { max-width: 350px; width: 100%; } }
[data-page=basemake-kit] .cpb-accordion-question { cursor: pointer; align-items: flex-start; justify-content: flex-start; position: relative; }
@media (min-width: 768px) { [data-page=basemake-kit] .cpb-accordion-question { padding: 20px 20px 20px 0; } }
@media only screen and (max-width: 767px) { [data-page=basemake-kit] .cpb-accordion-question { padding: 20px 0; } }
[data-page=basemake-kit] .cpb-accordion-state { position: absolute; margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; right: 8px; top: calc(50% - 10px); }
[data-page=basemake-kit] .cpb-accordion-state::before, [data-page=basemake-kit] .cpb-accordion-state::after { content: ""; background-color: #000; position: absolute; top: calc(50% - 1px); left: 0; width: 16px; height: 1px; }
[data-page=basemake-kit] .cpb-accordion-state::before { transition: transform 0.1s ease-out; transform: rotate(90deg); transform-origin: center; }
[data-page=basemake-kit] .cpb-accordion-state.-close::before { transform: rotate(0deg); }
[data-page=basemake-kit] .cpb-accordion-question-content { display: block; font-size: 1.5rem; }
@media (min-width: 768px) { [data-page=basemake-kit] .cpb-accordion-question-content { font-size: 1.5rem; } }
[data-page=basemake-kit] .cpb-accordion-answer { overflow: hidden; }
[data-page=basemake-kit] .cpb-accordion-question, [data-page=basemake-kit] .cpb-accordion-answer-inner { display: flex; }
[data-page=basemake-kit] .cpb-accordion-answer-content { letter-spacing: 0.03em; font-size: 1.4rem; }
@media (min-width: 768px) { [data-page=basemake-kit] .cpb-accordion-answer-content { padding-block: 10px; } }
@media only screen and (max-width: 767px) { [data-page=basemake-kit] .cpb-accordion-answer-content { padding-block: 10px; } }
[data-page=basemake-kit] .cpb-accordion-answer-content li { line-height: 1.8; text-indent: -1em; padding-left: 1em; }
[data-page=basemake-kit] .cpb-accordion-answer-content li::before { content: "・"; }
[data-page=basemake-kit] summary::-webkit-details-marker { display: none; }
[data-page=basemake-kit] .cpb-products-button a.is-disable { transition-duration: 0s; background-color: #d3d2cf; color: #807f7d; pointer-events: none; border-color: #d3d2cf; }
[data-page=basemake-kit] .cmd-products_card_submit a span { font-size: 1.1rem; }
[data-page=basemake-kit] .cpb-products_reccomend_contents { margin-top: 0; margin-bottom: 60px; }
@media (min-width: 768px) { [data-page=basemake-kit] .cpb-products_reccomend_contents._no-slider > .cmd-box_container > .cpb-products_reccomend_box:nth-of-type(n+3) { margin-top: 20px; } }
@media only screen and (max-width: 767px) { [data-page=basemake-kit] .cpb-products_reccomend_contents._no-slider > .cmd-box_container > .cpb-products_reccomend_box:nth-of-type(n+2) { margin-top: 20px; } }
[data-page=basemake-kit] .cpb-products_reccomend_contents .cmd-products_card > a { padding-bottom: 0; }
[data-page=basemake-kit] .cpb-products_reccomend_contents .cmd-products_card_submit { margin-top: 0 !important; }
[data-page=basemake-kit] .cpb-products_reccomend_contents p.item-name { margin-bottom: 20px; }
@media (min-width: 768px) { [data-page=basemake-kit] .cpb-products_reccomend_contents p.item-name { height: 3.34em; } }
[data-page=basemake-kit] .cpb-products_reccomend_contents._no-slider > .cmd-box_container > .cpb-products_reccomend_box > a > .txtarea { margin-top: 20px; }
[data-page=basemake-kit] .cpb-products-price { margin: 30px auto; max-width: 350px; }
[data-page=basemake-kit] .cmd-section .cmd-title-section._h3 { margin-top: 0; }
[data-page=basemake-kit] .cmd-contents_cover > .cmd-section.cmd-wide_container.cmd-visual_container._fill:last-child { margin-top: 60px; margin-bottom: 0 !important; }
@media (min-width: 768px) { [data-page=basemake-kit] .cmd-visual_card h2 { font-size: 2rem; } }
@media only screen and (max-width: 767px) { [data-page=basemake-kit] .cmd-visual_card h2 { margin-bottom: 40px; font-size: 1.7rem; } }
@media only screen and (max-width: 767px) { [data-page=basemake-kit] .cmd-visual_container .cmd-visual_txt { padding-top: 20px; } }
[data-page=basemake-kit] .cmd-visual_txt .cmd-button_box > .button { font-size: 1.5rem; }
[data-page=basemake-kit] .cpb-products-button { position: relative; margin: 0 auto; width: 350px; border: none; background: #45433e; text-align: center; color: #fff; display: block; }
[data-page=basemake-kit] .cpb-products-button a { color: #fff; text-decoration: none; display: block; padding: 20px 0; width: 100%; height: 100%; }
[data-page=basemake-kit] .cpb-products-button span { position: relative; display: inline-block; padding-left: 30px; }
[data-page=basemake-kit] .cpb-products-button span:before { position: absolute; top: 50%; left: 0; background: url(/sw/onlinestore/assets_static/img/icon_cart_wht.svg) no-repeat 50%; background-size: contain; content: ""; display: inline-block; margin-right: 10px; height: 20px; width: 20px; transform: translateY(-50%); }
[data-page=basemake-kit] .cmd-indent_list.dots { padding-left:65px; }
[data-page=basemake-kit] .cpb-accordion-answer-content li { margin-bottom: 10px; }
/* ▲▲▲ 既存のCSSコード ▲▲▲ */


/* ▼▼▼ 商品選択セクション用CSS (ラジオボタン選択状態セレクタ修正) ▼▼▼ */
/* コンテナ */
.product-selector-container { max-width: 520px; margin: 30px auto; background-color: #f5f5f5; padding: 24px; box-sizing: border-box; font-size: 1.4rem; border: 1px solid #ddd; border-radius: 4px; }
/* ヘッダー */
.product-selector-container .ps-header { height: auto; padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; font-size: 1.6rem; font-weight: bold; color: #333; border-bottom: 1px solid #ccc; width: 100%; margin: 0 0 20px 0; box-sizing: border-box; }
/* セクションタイトル */
.product-selector-container .ps-section-title { margin: 0 0 20px 0; font-size: 1.4rem; color: #000; font-weight: bold; }
/* 商品グループ */
.product-selector-container .ps-product-group { margin-bottom: 32px; }
/* 商品アイテム */
.product-selector-container .ps-product-item { display: flex; align-items: center; background-color: #fff; padding: 10px; margin-bottom: 16px; transition: background-color 0.3s; position: relative; border: 1px solid #eee; box-sizing: border-box; }
.product-selector-container .ps-product-item.is-selected { background-color: #f1ede4; border-color: #d3c0a5; }
.product-selector-container .ps-product-item.is-disable { opacity: 0.5; pointer-events: none; }
.product-selector-container .ps-product-item.is-disable::after { content: "選択できません"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); color: #333; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; text-align: center; }
.product-selector-container .ps-custom-select .ps-option[disabled] { opacity: 0.4; cursor: not-allowed; background-color: #eee !important; }
.product-selector-container #ps-category-a .ps-product-item:not(.is-disable) { cursor: pointer; }
.product-selector-container .ps-product-item img { width: 80px; height: 80px; object-fit: cover; margin-right: 10px; flex-shrink: 0; }
.product-selector-container .ps-product-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.product-selector-container .ps-product-name { font-size: 1.4rem; margin-bottom: 8px; line-height: 1.4; }
/* プルダウン関連 */
.product-selector-container .ps-custom-select-wrapper { position: relative; width: 100%; max-width: 280px; }
.product-selector-container .ps-custom-select .ps-selected-option { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 30px; padding: 0 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 1.3rem; text-align: left; box-sizing: border-box; appearance: none; -webkit-appearance: none; font-family: inherit; color: inherit; margin: 0; }
.product-selector-container .ps-custom-select .ps-selected-option-text { flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 5px; display: flex; align-items: center; }
.product-selector-container .ps-custom-select .ps-dropdown-arrow { font-size: 10px; color: #666; transition: transform 0.2s ease; flex-shrink: 0; }
.product-selector-container .ps-custom-select.open .ps-dropdown-arrow { transform: rotate(180deg); }
.product-selector-container .ps-custom-select .ps-options { display: none; flex-wrap: wrap; padding: 4px; border: 1px solid #ccc; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 10; max-height: 200px; overflow-y: auto; box-sizing: border-box; }
.product-selector-container .ps-custom-select.open .ps-options { display: flex; }
.product-selector-container .ps-custom-select .ps-option { width: 50%; box-sizing: border-box; padding: 8px; cursor: pointer; transition: background-color 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* .product-selector-container .ps-custom-select .ps-option.is-selected { background-color: #e0e0e0; } /* 背景色での選択表現は削除またはコメントアウト */
.product-selector-container .ps-custom-select .ps-option:hover { background-color: #f0f0f0; }
.product-selector-container .ps-custom-select .ps-option img { width: 60px; height: 60px; object-fit: cover; margin-bottom: 4px; }
.product-selector-container .ps-custom-select .ps-option .ps-color-name { font-size: 1.2rem; line-height: 1.3; }
.product-selector-container .ps-selected-option-text .option-inner-content { display: flex; align-items: center; font-size: 1.2rem; }
.product-selector-container .ps-selected-option-text .option-inner-content img { width: 20px; height: 20px; margin-right: 5px; flex-shrink: 0; }
/* 合計金額エリア */
.product-selector-container .ps-total-area { margin-top: 24px; padding: 16px; background-color: #e8e8e8; text-align: center; font-weight: bold; font-size: 1.4rem; }
/* 購入ボタン スタイル修正 */
.product-selector-container .ps-buy-button { display: flex; align-items: center; justify-content: center; background-color: #ccc; color: #fff; border: none; font-size: 1.4rem; text-align: center; width: 100%; padding: 16px 0; margin-top: 16px; margin-bottom: 30px; cursor: default; opacity: 1; pointer-events: none; text-decoration: none !important; transition: background-color 0.3s; border-radius: 4px; }
.product-selector-container .ps-buy-button.is-active { background-color: #45433E; pointer-events: auto; cursor: pointer; border-radius: 0; text-decoration: none !important; }
.product-selector-container .ps-buy-button .ps-buy-button-icon { display: none; width: 20px; height: 20px; background: url('dummy_icon.svg') no-repeat center center; background-size: contain; margin-right: 10px; flex-shrink: 0; }
.product-selector-container .ps-buy-button.is-active .ps-buy-button-icon { display: inline-block; }
.product-selector-container .ps-buy-button .ps-buy-button-text { line-height: 1; text-decoration: none; }
/* 区切り線 */
.product-selector-container .ps-divider { display: flex; align-items: center; justify-content: center; margin: 24px 0; }
.product-selector-container .ps-divider::before, .product-selector-container .ps-divider::after { content: ""; flex: 1; height: 1px; background-color: #ccc; margin: 0 8px; }
.product-selector-container .ps-divider span { font-size: 16px; font-weight: bold; color: #666; }
/* レスポンシブ対応 */
@media screen and (max-width: 767px) { .product-selector-container { padding: 16px; } .product-selector-container .ps-custom-select-wrapper { max-width: none; } }

/* ▼▼▼ ラジオボタン風アイコンのスタイル (セレクタ修正版) ▼▼▼ */
/* アイコン共通スタイル */
.product-selector-container .ps-radio-icon { display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; box-sizing: border-box; position: relative; flex-shrink: 0; background-color: #fff; }
/* --- カテゴリA --- */
.product-selector-container #ps-category-a .ps-radio-icon { margin-right: 10px; vertical-align: middle; }
.product-selector-container #ps-category-a .ps-product-name { margin-bottom: 0; }
/* --- カテゴリB --- */
.product-selector-container #ps-category-b .ps-option img { margin-bottom: 8px; }
.product-selector-container #ps-category-b .ps-option-text-wrapper { display: inline-flex; align-items: center; justify-content: center; }
.product-selector-container #ps-category-b .ps-radio-icon { margin-right: 5px; margin-bottom: 0; }
/* --- 選択状態 --- */
/* ★★★ セレクタ修正箇所 ★★★ */
/* カテゴリA 選択時 */
.product-selector-container #ps-category-a .ps-product-item.is-selected .ps-radio-icon { border-color: #333; }
.product-selector-container #ps-category-a .ps-product-item.is-selected .ps-radio-icon::after { content: ''; display: block; width: 8px; height: 8px; background-color: #333; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* カテゴリB 選択時 */
.product-selector-container #ps-category-b .ps-option.is-selected .ps-radio-icon { border-color: #333; }
.product-selector-container #ps-category-b .ps-option.is-selected .ps-radio-icon::after { content: ''; display: block; width: 8px; height: 8px; background-color: #333; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* ▲▲▲ ラジオボタン風アイコンのスタイル ▲▲▲ */

/* ▼▼▼ バナーエリア (マージンのみ指定) ▼▼▼ */
#banner-area { margin-top: 60px; }
/* ▲▲▲ バナーエリア ▲▲▲ */

/* 既存の末尾スタイル */
@media print, screen and (min-width: 993px) { div.cmd-indent_list.asterisk_ajust, ul.cmd-indent_list.asterisk_ajust { width: calc(100% + 2.4em)!important; margin-left: -1.4em!important; } }
@media print, screen and (min-width: 768px) and (max-width: 992px) { div.cmd-indent_list.asterisk_ajust, ul.cmd-indent_list.asterisk_ajust { width: calc(100% + 1em)!important; margin-left: -0.1em!important; } }


/* 画面幅が992px以下の場合に適用 */
@media screen and (max-width: 992px) {

  /* .box要素の幅制限を解除する試み */
  [data-page=basemake-kit] .cmd-box_container .box {
    width: auto !important; /* width指定を上書き */
    max-width: none !important; /* max-width指定を上書き */
    /* 必要に応じて、box自体を中央に寄せる */
    /* margin-left: auto !important; */
    /* margin-right: auto !important; */
    /* padding: 0 !important; */ /* 不要なpaddingがあれば解除 */
  }

  /* box内の p.tcenter.mv の中央揃えを確実にする */
  [data-page=basemake-kit] .cmd-box_container .box p.tcenter.mv {
     text-align: center !important;
  }

  /* 画像がブロック要素になっていて中央寄せが必要な場合 */
  /* [data-page=basemake-kit] .cmd-box_container .box p.tcenter.mv img {
     display: block !important;
     margin-left: auto !important;
     margin-right: auto !important;
  } */
  /* または、画像がインライン要素として扱われるようにする場合 */
   [data-page=basemake-kit] .cmd-box_container .box p.tcenter.mv img {
      display: inline-block !important; /* text-align:centerが効くように */
   }

}