label strong {
  font-size: 1rem;
}
/* メッセージ全体の共通スタイル */
#error-message {
  padding: 0.75em 1em;
  margin: 3em 0 -3em; 
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #ffeaea;
  color: #d00000;  
  text-align: center;
  border: 1px solid #f5bcbc;
  display: none; /* 初期は非表示 */
}

/* === バナー === */
.estimate-banner-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0 0 3rem;
  justify-content: center;
}

.banner-card {
  flex: 1 1 45%;
  background: #f4faff;
  border-left: 5px solid #3399cc;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.banner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}




.banner-link {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  color: #333;
}

.banner-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.banner-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}


.form-step {
  margin-bottom:3rem;
}

.step-title .modal-trigger {
  color: #003366; /* ネイビーで統一感 */
  font-weight: normal;
  font-size: 0.85em;
  margin-left: 1em;
  text-decoration: none; /* アンダーラインを消す */
  transition: color 0.2s ease;
}

.step-title .modal-trigger:hover {
  color: #cc0000; /* 赤系に変化 */
}
.see-detail::after {
  content: "➤";
  margin-left: 0.4em;
  font-size: 1.1em;
  vertical-align: middle;
}


.estimate-wrapper {
  max-width: 1000px;
  margin: 0 auto 50px;
  background: #f7f7f7;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* === ステップタイトル === */
.step-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 2rem 0 1rem;
  position: relative;
}

.step-title .required {
  font-size: 0.9rem;
  color: #cc0033;
  margin-left: 1rem;
}

.step-title::before {
  content: attr(data-step);
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  margin-right: 0.5rem;
}

/* === カーテンスタイル === */
.style-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.style-option {
  border: 1px solid #ccc;
  background-color:#fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  font-size:1.1rem;
  transition: border 0.3s;
}

.style-option input {
  display: none;
}

.style-option {
  display: flex;
  justify-content: center; /* 横方向中央揃え */
  align-items: center;     /* 縦方向中央揃え（念のため） */
  cursor: pointer;
  padding: 10px;
}

.style-option label {
  display: flex;
  align-items: center;     /* 画像と文字を縦方向中央揃え */
  justify-content: center; /* 横方向中央揃え（任意） */
  gap: 0.5em;               /* 画像と文字の間隔 */
}

.style-option img {
  max-width: 100%;
  height: auto;
}

.style-option:has(input[type="radio"]:checked) {
    border-color: #d10000;
    background: #fff7f7;
    box-shadow: 0 0 0 2px #b42c32;
}

/* === サイズセクション === */
.size-box {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.size-item {
  flex: 1 1 300px;
  min-width: 250px;
}

.size-item label {
  display: block;
  margin-bottom: 0.5rem;
}

.size-item .desc {
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.25rem;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.input-group .measure-btn {
  margin-left: auto;
}

.input-group input[type="number"] {
  flex: 1;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  max-width: 120px;
}

.unit {
  font-size: 1rem;
  color: #333;
}

.measure-btn {
  padding: 0.5rem 1rem;
  background: #555;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.measure-btn:hover {
  background: #999;
}

/* === 開き方セクション === */
.opening-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.option-box input[type="radio"] {
  display: none;
}

.option-box .box-content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.option-box .box-content img {
  flex: 0 0 29%; /* 3 ÷ (3+4) = 0.42857... */
  max-width: 100%;
  height: auto;
}

.option-box .text {
  font-size: 0.9rem;
  color: #333;
}

.option-box:has(input[type="radio"]:checked) {
    border-color: #d10000;
    background: #fff7f7;
    box-shadow: 0 0 0 2px #b42c32;
}


/* === タッセル・オプション === */
.option-step {
  background: #f4f4f4;
  padding: 2rem;
  border-radius: 8px;
}

.option-group {
  background: #fff;
  padding: 1.5rem;
  border-radius: 6px;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.option-detail {
  font-size: 0.85rem;
  color: #777;
  text-decoration: underline;
  cursor: pointer;
}

.option-desc {
  font-size: 0.9rem;
  color: #666;
}

.option-radio-group {
  display: flex;
  gap: 2rem;
}

.radio-label {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  color: #222;
}

.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-radio {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
}

.radio-label input[type="radio"]:checked ~ .custom-radio {
  border-color: #b42c32;

}

.radio-label input[type="radio"]:checked ~ .custom-radio::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #b42c32;
}

.hook-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hook-option {
  flex: 1 1 calc(50% - 1rem);
  cursor: pointer;
  border-radius: 10px;
  transition: border 0.3s ease;
}

.hook-option input[type="radio"] {
  display: none;
}


.hook-images {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 60px;
}

.hook-images img {
  display: block;
  width: 100px;
  height: auto;
  border-radius: 4px;
}


.hook-text {
  font-size: 0.9rem;
  line-height: 1.4;
  flex: 1;
}

/* --- カーテン種別のカードスタイル --- */
.option-box-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
}

.option-box {
  flex: 1 1 280px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
  background: #fff;
  position: relative;
}

.option-box-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.option-box img {
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
/*  margin-bottom: 0.75rem; */
}

.option-label {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.option-desc {
  font-size: 0.9rem;
  color: #555;
}

/* チェック時の枠線と影 */
.option-box input[type="radio"]:checked + .option-box-inner,
.option-box input[type="radio"]:checked ~ .option-box-inner {

}

.option-box:hover {
  border-color: #c83232;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .05);

}
.style-option:hover {
  background-color: #f9f9f9;
  border: 1px solid #000;

}

/* === アイコン === */

.icon-large {
  font-size: 1.3em;  /* ← テキストよりやや大きく */
  vertical-align: middle;
  margin-right: 0.3em; /* テキストとの間に少し余白 */
}


/* === ボタン === */
/* 通常状態：全3つのモーダルボタンに共通スタイル */
#open-fabric-modal,
#open-frontfabric-modal,
#open-backfabric-modal {
  display: inline-flex;
  padding: 0.8em 3em;
  font-size: 1rem;  
  align-items: center;   /* ← 縦方向中央揃え */
  justify-content: center; /* ← 水平方向中央揃え（必要なら） */
  background-color: #003366;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}


/* ホバー時：色と軽い浮き感 */
#open-fabric-modal:hover,
#open-frontfabric-modal:hover,
#open-backfabric-modal:hover {
  cursor: pointer;
  background-color: #001f4d;
  transform: translateY(-1px);
}

/* アクティブ時（クリック） */
#open-fabric-modal:active,
#open-frontfabric-modal:active,
#open-backfabric-modal:active {
  background-color: #002a66;
  transform: translateY(0);
}


/* === 選択された生地表示 === */
#selected-backfabric-info,
#selected-frontfabric-info,
#selected-fabric-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
#selected-backfabric-thumbnail,
#selected-frontfabric-thumbnail,
#selected-fabric-thumbnail {
  width: 240px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#selected-backfabric-name,#selected-backfabric-price 
#selected-frontfabric-name,#selected-frontfabric-price 
#selected-fabric-name,#selected-fabric-price {
  font-size:1rem;
}

/* === 見積価格表示 === */
.estimate-price-box {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-top: 5rem;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  color: #003366;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
#estimate-price {
  font-size: 1.5rem;
}
.tax-note {
  font-weight: normal;
  font-size: 1rem; /* または 12px などお好みで */
}

/* === モーダル === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  overflow-y: auto; /* ← スマホで長いモーダルにも対応 */
  z-index: 999999;
  box-sizing: border-box;
}

.modal {
  background: #fff;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 0.5rem; /* ← 上から一定の余白に固定 */
  margin-bottom: 0.5rem;
  max-height: none; /* ← 高さは内容に任せる */
  padding: 1.5rem;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 9999999;
}
.modal-detail {
  background: #fff;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 0.5rem; /* ← 上から一定の余白に固定 */
  margin-bottom: 0.5rem;
  max-height: none; /* ← 高さは内容に任せる */
  padding: 1.5rem;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 9999999;
}

.modal-content-scroll {
  overflow-y: auto;
  max-height: 100vh; /* 中身が長い場合のスクロールエリア */
  flex: 1;
  padding-right: 0.5rem;
}

.modal-close {
  position: absolute;
  top: -0.5rem;
  right: 0.3rem;           /* ← スクロールバーを避けて内側に */
  font-size: 2.5rem;
  line-height: 1;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 10000;
}

/* タイトル */
.modal-title-h2 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 2rem;
  text-align: center;
}
.modal-title-h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
/* 行（画像とテキスト） */
.modal-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1.5rem;
}

.modal-image img {
  width: 386px;
  height: auto;
  border: 1px solid #ccc;
  display: block;
}

.modal-text h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.modal-text modal {
  font-size: 0.95rem;
  line-height: 1.6;
}


/* === タブ === */
.fabric-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.fabric-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  background: #eee;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.fabric-tabs button.active {
  background: #003366;
  color: #fff;
}

/* === 生地一覧 === */
.fabric-item {
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.75rem 0.75rem 0.75rem;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.fabric-item p {
  line-height:1.4;
  margin: 0;
}
.fabric-item .item_price {
  margin-top:10px;
}

.fabric-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 0.75rem;
}
.fabric-item:hover {
  background-color: #f4faff;
  border-color: #007BFF;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}
.fabric-item.selected {
  border: 2px solid #007BFF;
}
.fabric-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* default: 2列 */
  gap: 1rem;
/*  padding: 1rem 0; */
}
#selected-backfabric-info.hidden-info,
#selected-frontfabric-info.hidden-info,
#selected-fabric-info.hidden-info {
  display: none;
}

.fabric-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.sample-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  color: #003366;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.3s;
}

.sample-link i {
  margin-left: 0.4em;
  font-size: 1.1em;
}

.sample-link:hover {
  color: #0055aa;
}

@media (min-width: 768px) {
  .fabric-list-grid {
    grid-template-columns: repeat(5, 1fr); /* PC: 5列 */
  }
}

@media (max-width: 768px) {
  .option-box-group {
    flex-direction: column;
  }
  .option-box {
    flex: 1 1 48%;
    min-height: auto;
    padding: 0.75rem;
  }

  .hook-option {
    flex: 1 1 100%;
  }

  .hook-images {
    flex-direction: row;
    justify-content: center;
  }
  .opening-options {
 /*   flex-direction: column; */
  }
  .modal {
	margin-top: 3rem; /* ← 上から一定の余白に固定 */
	margin-bottom: 3rem;
  }
  .modal-detail {
	margin-top: 3rem; /* ← 上から一定の余白に固定 */
	margin-bottom: 3rem;
  }
}


@media (max-width: 600px) {
  .size-box {
 /*   flex-direction: column; */
  }

  .style-options {
    grid-template-columns: 1fr;
  }
}

/* モバイル対応 */
@media (max-width: 768px) {
  .measure-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .measure-image img {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .modal-row {
    flex-direction: column;
  }
  .modal-image img {
    width: 100%;
  }
  .modal-image,
  .modal-text {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 768px) {
  .modal-text {
    order: 1;
  }
  .modal-image {
    order: 2;
  }
}



.sofa-style-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
}

.sofa-option-box {
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 6px;
  background: #fff;
  transition: box-shadow 0.3s, background-color 0.3s;
}

/* ソファ：仕様を選択（Step3）だけ縦センター */
.sofa-specification-section .opening-options .option-box .box-content{
  align-items: center; /* ← flex-start を上書き */
}

.sofa-specification-section .opening-options .option-box .text{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.2em; /* 2行の高さを確保（お好みで調整） */
}



@media (max-width: 768px) {
  .sofa-option-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.sofa-option-box input[type="radio"] {
  display: none;
}

.sofa-box-content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.sofa-box-content img {
  flex: 0 0 30%;
  max-width: 100%;
  height: auto;
}

.sofa-text {
  font-size: 0.9rem;
  color: #333;
}

.sofa-option-box:has(input[type="radio"]:checked) {
  border-color: #d10000;
  background: #fff7f7;
  box-shadow: 0 0 0 2px #b42c32;
}

.sofa-selector {
  font-family: sans-serif;
  max-width: 900px;
  margin: 0 auto;
}

.sofa-step1, .sofa-step2 {
  margin-bottom: 2em;
}

.sofa-series-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.series-btn {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 6px;
  font-weight: bold;
  box-sizing: border-box;
  transition: box-shadow 0.3s;
}
.series-btn:hover {
  background-color: #f9f9f9;
  border: 1px solid #000;
}
.series-btn.active {
  border-color: #d10000;
  background-color: #fff7f7;
}


@media (max-width: 768px) {
  .size-card {
    flex: 1 1 100%;
  }
}

.sofa-size-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* ← PCでは常に3列 */
  gap: 1rem;
}

@media (max-width: 768px) {
  .sofa-size-options {
    grid-template-columns: 1fr;  /* ← モバイルでは1列 */
  }
}

.size-card {
  border: 1px solid #ccc;
  padding: 1em;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
  transition: box-shadow 0.3s;
}

.size-card img {
  max-width: 100%;
  height: auto;
}

.size-card:hover {
  background-color: #f9f9f9;
  border: 1px solid #000;
  cursor: pointer;
}

.size-card.selected {
  border-color: #d10000;
  background-color: #fff7f7;
  box-shadow: 0 0 0 2px #b42c32;
}

/* ==============================
   カーテン商品ページ：1カラム補正
============================== */

body.single .curtain-order-wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 60px;
  box-sizing: border-box;
}

/* カーテン専用フォームを中央寄せ */
.curtain-order-wrapper.estimate-wrapper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* 商品詳細側の右カラム幅に引っ張られる場合の補正 */
.curtain-order-fullwidth,
.curtain-order-fullwidth .curtain-order-wrapper {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* カーテン商品ページの本文エリアを幅いっぱいにする */
.single_item .curtain-order-fullwidth,
.item-info .curtain-order-fullwidth,
.item-info .curtain-order-wrapper {
  float: none;
  clear: both;
}

/* 余白が左に出る場合の保険 */
.curtain-order-wrapper {
  transform: none;
}
.curtain-order-fullwidth {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: block;
  clear: both;
}

.curtain-order-fullwidth .estimate-wrapper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/* ==============================
   カーテン商品ページ：フォーム見出し調整
============================== */
.curtain-order-heading {
  margin: -2rem -2rem 2.5rem;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.curtain-order-heading__bar {
  background: #9da4ad;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  padding: 1.15rem 1rem;
}

.curtain-order-heading__body {
  background: #f7f7f7;
  padding: 1rem 2rem 0;
}

.curtain-order-heading__body p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: #555;
}

@media (max-width: 768px) {
  .curtain-order-heading {
    margin: -2rem -2rem 2rem;
  }

  .curtain-order-heading__bar {
    font-size: 1.25rem;
    padding: 1rem;
  }

  .curtain-order-heading__body {
    padding: .9rem 1.25rem 0;
  }
}


/* ==============================
   カーテン商品ページ：開き方・サイズ表示調整
============================== */
.size-item .size-help {
  margin: 0 0 .65rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #666;
}

.opening-options.option-box-group {
  align-items: stretch;
}

.opening-options .option-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
}

.opening-options .option-box-inner {
  width: 100%;
  min-height: 62px;
  justify-content: center;
}

.opening-options--standard .option-box {
  flex: 1 1 calc(33.333% - 1rem);
}

.opening-options--cafe .option-box {
  flex: 1 1 calc(50% - 1rem);
}

/* フック・タッセルのラジオボタンを文字の縦中央へ */
.option-radio-group {
  align-items: center;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  line-height: 1.4;
}

.custom-radio {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .opening-options--standard .option-box,
  .opening-options--cafe .option-box {
    flex: 1 1 100%;
  }
}



/* ==============================
   P&C オーダーカーテン：コロニアルチェック見積りページ寄せ
   - ステップ見出しを短く整理
   - サイズ入力の説明文を横並びカードに合わせる
   - 開き方／フックをカード型に統一
   - ラジオボタンの縦位置補正
============================== */

.curtain-order-wrapper .curtain-order-heading__bar {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.curtain-order-wrapper .curtain-order-heading__body {
  padding: 1.2rem 1.5rem 0;
}

.curtain-order-wrapper .form-step {
  margin-bottom: 3.2rem;
}

.curtain-order-wrapper .step-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  line-height: 1.45;
  margin: 2.4rem 0 1.2rem;
}

.curtain-order-wrapper .step-title::before {
  flex: 0 0 32px;
  margin-right: .2rem;
}

.curtain-order-wrapper .step-title .required {
  margin-left: .3rem;
}

.curtain-order-wrapper .step-title .step-note {
  font-size: .9rem;
  color: #b42c32;
  font-weight: 600;
  margin-left: .4rem;
}

.curtain-order-wrapper .size-box--colonial {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 1.5rem 1.6rem;
}

.curtain-order-wrapper .size-box--colonial .size-item {
  min-width: 0;
  padding: .4rem 1.5rem;
}

.curtain-order-wrapper .size-box--colonial .size-item + .size-item {
  border-left: 1px solid #e5e0d8;
}

.curtain-order-wrapper .size-item label {
  display: block;
  margin-bottom: .75rem;
}

.curtain-order-wrapper .size-item label strong {
  display: inline-block;
  margin-right: .5rem;
  font-size: 1rem;
}

.curtain-order-wrapper .size-item label .desc {
  display: inline;
  font-size: .8rem;
  color: #666;
  line-height: 1.7;
}

.curtain-order-wrapper .size-box--colonial .input-group {
  margin-top: .45rem;
}

.curtain-order-wrapper .size-box--colonial input[type="number"] {
  max-width: 145px;
  height: 42px;
  background: #fff;
}

.curtain-order-wrapper .option-box-group--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.curtain-order-wrapper .opening-options--cafe {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.curtain-order-wrapper .option-box-group--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.curtain-order-wrapper .option-box--horizontal {
  flex: initial;
  min-height: 96px;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
}

.curtain-order-wrapper .option-box--horizontal .box-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.curtain-order-wrapper .option-box--horizontal .text {
  width: 100%;
  text-align: left;
  line-height: 1.65;
}

.curtain-order-wrapper .option-box--horizontal .text strong {
  display: block;
  margin-bottom: .15rem;
  font-size: 1rem;
  color: #222;
}

.curtain-order-wrapper .option-box--horizontal .text span {
  display: block;
  color: #666;
  font-size: .9rem;
}

.curtain-order-wrapper .option-box--horizontal:has(input[type="radio"]:checked) {
  border-color: #b42c32;
  background: #fff7f7;
  box-shadow: 0 0 0 1px #b42c32;
}



.curtain-order-wrapper .tassel-option-group {
  padding: 1.4rem 1.6rem;
}

.curtain-order-wrapper .tassel-option-group .option-desc {
  margin: 0 0 1.1rem;
}

.curtain-order-wrapper .option-radio-group {
  align-items: center;
  gap: 1.8rem;
}

.curtain-order-wrapper .radio-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-left: 28px;
  line-height: 1.4;
}

.curtain-order-wrapper .radio-label .custom-radio {
  top: 50%;
  transform: translateY(-50%);
}

.curtain-order-wrapper .radio-label input[type="radio"]:checked ~ .custom-radio::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .curtain-order-wrapper .size-box--colonial {
    grid-template-columns: 1fr;
  }

  .curtain-order-wrapper .size-box--colonial .size-item {
    padding: .4rem 0;
  }

  .curtain-order-wrapper .size-box--colonial .size-item + .size-item {
    border-left: 0;
    border-top: 1px solid #e5e0d8;
    padding-top: 1.3rem;
    margin-top: 1.3rem;
  }

  .curtain-order-wrapper .option-box-group--three,
  .curtain-order-wrapper .opening-options--cafe,
  .curtain-order-wrapper .option-box-group--two {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   開き方・フック：画像付きカード
============================== */
.option-box--image .box-content {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  width: 100%;
}

.option-box--image .option-box-image {
  width: 96px;
  max-width: 32%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.option-box--image .text {
  flex: 1;
  min-width: 0;
}

.option-box--image .text strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.4;
}

.option-box--image .text span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #666;
}

/* 画像付きカードでは、縦方向の中央ズレを防止 */
.opening-options .option-box--image,
.hook-options .option-box--image {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 600px) {
  .option-box--image .box-content {
    gap: 12px;
  }

  .option-box--image .option-box-image {
    width: 72px;
    max-width: 28%;
  }

  .option-box--image .text span {
    font-size: 0.85rem;
  }
}


/* ==============================
   サイズ：測り方ボタン
============================== */
.curtain-order-wrapper .input-group--with-measure {
  align-items: center;
  gap: 10px;
}

.curtain-order-wrapper .input-group--with-measure input[type="number"] {
  max-width: 130px;
}

.curtain-order-wrapper .input-group--with-measure .measure-btn {
  margin-left: auto;
  min-width: 138px;
  padding: .65rem 1rem;
  background: #8a8784;
  color: #fff;
  border-radius: 5px;
  line-height: 1.2;
  white-space: nowrap;
}

.curtain-order-wrapper .input-group--with-measure .measure-btn:hover {
  background: #6f6b68;
}

body.curtain-modal-open {
  overflow: hidden;
}

.curtain-order-wrapper .modal-detail {
  margin-top: 4vh;
  margin-bottom: 4vh;
}

.curtain-order-wrapper .modal-close {
  font-family: Arial, sans-serif;
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .input-group--with-measure {
    flex-wrap: wrap;
  }

  .curtain-order-wrapper .input-group--with-measure .measure-btn {
    width: 100%;
    margin-left: 0;
  }
}


/* ==============================
   微調整：画像付きカード・測り方ボタン
   - チェックマークが文字に重ならないようにする
   - 測り方ボタンの位置を入力欄と揃える
============================== */
.curtain-order-wrapper .option-box--horizontal {
  box-sizing: border-box;
  padding-right: 52px;
  overflow: hidden;
}

.curtain-order-wrapper .option-box--horizontal .box-content {
  min-width: 0;
}

.curtain-order-wrapper .option-box--image .text {
  min-width: 0;
  padding-right: 6px;
}

.curtain-order-wrapper .option-box--image .text strong,
.curtain-order-wrapper .option-box--image .text span {
  overflow-wrap: anywhere;
}

.curtain-order-wrapper .option-box--horizontal:has(input[type="radio"]:checked)::after {
  right: 22px;
  top: 50%;
  z-index: 2;
  line-height: 1;
  pointer-events: none;
}

.curtain-order-wrapper .input-group--with-measure {
  display: grid;
  grid-template-columns: minmax(88px, 128px) auto max-content;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 10px;
}

.curtain-order-wrapper .input-group--with-measure input[type="number"] {
  width: 100%;
  max-width: none;
  height: 38px;
  box-sizing: border-box;
}

.curtain-order-wrapper .input-group--with-measure .unit {
  line-height: 38px;
  white-space: nowrap;
}

.curtain-order-wrapper .input-group--with-measure .measure-btn {
  margin-left: 0;
  min-width: 132px;
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .input-group--with-measure {
    grid-template-columns: minmax(100px, 1fr) auto;
  }

  .curtain-order-wrapper .input-group--with-measure .measure-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 600px) {
  .curtain-order-wrapper .option-box--horizontal {
    padding-right: 42px;
  }

  .curtain-order-wrapper .option-box--horizontal:has(input[type="radio"]:checked)::after {
    right: 16px;
  }
}


/* ==============================
   P&C生地選択モーダル
============================== */
.fabric-select-modal .modal--fabric {
  max-width: 980px;
  padding: 30px 34px 36px;
}

.fabric-modal-lead {
  margin: -8px 0 22px;
  color: #666;
  font-size: 0.95rem;
  text-align: center;
}

.fabric-select-modal .fabric-tabs {
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.fabric-select-modal .fabric-tabs button {
  min-width: 110px;
  padding: 10px 18px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  background: #fff;
  color: #333;
}

.fabric-select-modal .fabric-tabs button.active {
  border-color: #0b416e;
  background: #0b416e;
  color: #fff;
}

.fabric-select-modal .fabric-list-grid {
  gap: 18px;
}

.fabric-select-modal .fabric-item {
  appearance: none;
  width: 100%;
  border: 1px solid #ddd;
  background: #fff;
  font-family: inherit;
  color: inherit;
  padding: 10px;
}

.fabric-select-modal .fabric-item:hover {
  border-color: #b42c32;
  background: #fffafa;
  box-shadow: none;
}

.fabric-select-modal .fabric-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.fabric-select-modal .fabric-item .fabric-item__name {
  min-height: 4.8em;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  font-weight: normal;
  letter-spacing: 0;
  color: #333;
}

.fabric-select-modal .fabric-item .item_price {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  color: #444;
}

.fabric-empty-message {
  grid-column: 1 / -1;
  margin: 24px 0;
  text-align: center;
  color: #777;
}

#selected-fabric-info,
#selected-frontfabric-info,
#selected-backfabric-info {
  padding: 14px;
  border: 1px solid #e4e4e4;
  background: #fff;
  max-width: 540px;
}

#selected-fabric-info img,
#selected-frontfabric-info img,
#selected-backfabric-info img {
  width: 108px;
  height: 108px;
  object-fit: cover;
}

#selected-fabric-name,
#selected-frontfabric-name,
#selected-backfabric-name {
  margin: 0 0 7px;
  line-height: 1.6;
  font-weight: 600;
}

#selected-fabric-price,
#selected-frontfabric-price,
#selected-backfabric-price {
  margin: 0;
  color: #555;
}

@media screen and (max-width: 768px) {
  .fabric-select-modal .modal--fabric {
    padding: 22px 16px 24px;
  }

  .fabric-select-modal .fabric-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .fabric-select-modal .fabric-item .fabric-item__name {
    font-size: 0.82rem;
    min-height: auto;
  }

  .fabric-select-modal .fabric-item .item_price {
    font-size: 0.82rem;
  }

  #selected-fabric-info,
  #selected-frontfabric-info,
  #selected-backfabric-info {
    max-width: 100%;
  }
}


/* ==============================
   Step7：仕上がり確認・カートエリア
============================== */
.curtain-cart-section .step-title {
  margin-bottom: 1.35rem;
}

.curtain-confirm-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1.02fr) minmax(300px, .98fr);
  gap: 24px;
  align-items: start;
}

.confirm-block-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
}

.curtain-preview-panel {
  padding: 12px;
  border: 1px solid #e1e1e1;
  background: #fff;
}

.curtain-preview-panel .curtain-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 295px;
  padding: 20px;
  border: 1px solid #ededed;
  background: #fff;
  color: #777;
  text-align: center;
  box-sizing: border-box;
}

.curtain-preview-panel .curtain-preview-placeholder p {
  margin: 0;
}

.curtain-confirm-notes {
  margin-top: 16px;
  color: #555;
  font-size: .78rem;
  line-height: 1.75;
}

.curtain-confirm-notes h5 {
  margin: 0 0 8px;
  color: #222;
  font-size: .9rem;
  font-weight: 700;
}

.curtain-confirm-notes ul {
  margin: 0;
  padding-left: 1.25em;
}

.curtain-confirm-summary-col {
  min-width: 0;
}

.curtain-confirm-product-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f3f3f3;
  box-sizing: border-box;
}

.curtain-confirm-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #fff;
}

.curtain-confirm-thumb img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.curtain-confirm-thumb img[src=""] {
  visibility: hidden;
}

.curtain-confirm-product-name {
  min-width: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.55;
  color: #222;
}

.curtain-confirm-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.confirm-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 12px;
  background: #f3f3f3;
  box-sizing: border-box;
}

.confirm-label,
.confirm-value {
  font-size: .86rem;
  line-height: 1.55;
  color: #333;
}

.confirm-label {
  font-weight: 700;
}

.confirm-value {
  min-width: 0;
  word-break: break-word;
}

.confirm-row--meter {
  margin-top: 2px;
}

.curtain-confirm-purchase {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: 22px;
  margin-top: 20px;
}

.confirm-qty-box label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  color: #444;
}

.confirm-qty-box select {
  width: 62px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #d7d7d7;
  background: #fff;
  color: #333;
}

.confirm-price-box-large {
  min-width: 150px;
  text-align: right;
}

.confirm-price-label {
  margin-bottom: 4px;
  font-size: .78rem;
  color: #444;
}

.confirm-price-value {
  color: #222;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.confirm-cart-button-wrap {
  margin-top: 18px;
}

.confirm-cart-button {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 12px;
  border: 0;
  border-radius: 2px;
  background: #ad2635;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.confirm-cart-button:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.confirm-cart-button-wrap .desc {
  margin: 8px 0 0;
  text-align: center;
  font-size: .75rem;
  color: #777;
}

.curtain-cart-temporary {
  margin-top: 2rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .curtain-confirm-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .curtain-preview-panel .curtain-preview-placeholder {
    min-height: 210px;
  }

  .confirm-row {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .curtain-confirm-purchase {
    justify-content: space-between;
  }
}

/* ==========================================================
   仕上がりイメージ：通常カーテン／カフェカーテン
   PC・モバイルで寸法線を個別調整できるように整理
========================================================== */

/* ------------------------------------------
   通常カーテン：PC調整値
------------------------------------------ */
.curtain-finish-preview:not(.shade-finish-preview) {
  --preview-figure-width: 400px;
  --preview-height-space: 42px;

  /* 横寸法線 */
  --preview-width-line-left-inset: 12px;
  --preview-width-line-right-inset: 13px;
  --preview-width-line-bottom-adjust: 17px;
  --preview-width-endline-height: 18px;

  /* 縦寸法線 */
  --preview-height-line-right-adjust: 30px;
  --preview-height-line-top-adjust: 10px;
  --preview-height-line-bottom-adjust: 0px;
  --preview-height-endline-width: 18px;

  background: #fff;
}

/* ------------------------------------------
   カフェカーテン：PC調整値
------------------------------------------ */
.curtain-finish-preview:not(.shade-finish-preview)[data-style="cafe"] {
  --preview-width-line-left-inset: 10px;
  --preview-width-line-right-inset: 9px;
  --preview-width-line-bottom-adjust: 16px;

  --preview-height-line-right-adjust: 25px;
  --preview-height-line-top-adjust: 0px;
  --preview-height-line-bottom-adjust: 0px;
}

/* ------------------------------------------
   通常カーテン／カフェカーテン：共通構造
------------------------------------------ */
.curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__rail-size {
  position: relative;
  width: min(100%, calc(var(--preview-figure-width) + var(--preview-height-space)));
  margin: 0 auto;
  padding: 6px var(--preview-height-space) 10px 0;
  text-align: center;
  box-sizing: border-box;
}

.curtain-finish-preview__rail-size .preview-caption,
.shade-finish-preview__window-size .preview-caption {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #666;
}

.curtain-finish-preview__rail-size .preview-dimension-text,
.shade-finish-preview__window-size .preview-dimension-text {
  display: block;
  font-size: 0.94rem;
  line-height: 1.4;
  font-weight: 700;
  color: #333;
}

.curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__image-stage {
  position: relative;
  width: min(100%, calc(var(--preview-figure-width) + var(--preview-height-space)));
  margin: 0 auto;
  padding-right: var(--preview-height-space);
  box-sizing: border-box;
}

.curtain-finish-preview__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 328px;
  object-fit: contain;
  object-position: center top;
}

/* ------------------------------------------
   通常カーテン／カフェカーテン：横寸法線
------------------------------------------ */
.curtain-finish-preview:not(.shade-finish-preview) .preview-width-line {
  position: absolute;
  left: var(--preview-width-line-left-inset);
  right: calc(var(--preview-height-space) + var(--preview-width-line-right-inset));
  bottom: var(--preview-width-line-bottom-adjust);
  height: 1px;
  background: #555;
}

.curtain-finish-preview:not(.shade-finish-preview) .preview-width-line::before,
.curtain-finish-preview:not(.shade-finish-preview) .preview-width-line::after {
  position: absolute;
  top: -4px;
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  z-index: 2;
}

.curtain-finish-preview:not(.shade-finish-preview) .preview-width-line::before {
  left: -1px;
  border-right: 7px solid #555;
}

.curtain-finish-preview:not(.shade-finish-preview) .preview-width-line::after {
  right: -1px;
  border-left: 7px solid #555;
}

/* 横寸法線の両端の1px縦棒 */
.curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__rail-size::before,
.curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__rail-size::after {
  position: absolute;
  bottom: calc(var(--preview-width-line-bottom-adjust) - (var(--preview-width-endline-height) / 2));
  width: 1px;
  height: var(--preview-width-endline-height);
  content: "";
  background: #555;
  z-index: 1;
}

.curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__rail-size::before {
  left: var(--preview-width-line-left-inset);
}

.curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__rail-size::after {
  right: calc(var(--preview-height-space) + var(--preview-width-line-right-inset));
}

/* ------------------------------------------
   通常カーテン／カフェカーテン：縦寸法線
------------------------------------------ */
.curtain-finish-preview:not(.shade-finish-preview) .preview-height-line {
  position: absolute;
  top: var(--preview-height-line-top-adjust);
  right: calc(var(--preview-height-line-right-adjust) - (var(--preview-height-endline-width) / 2));
  bottom: var(--preview-height-line-bottom-adjust);
  width: var(--preview-height-endline-width);
  background-color: transparent;
  background-image:
    linear-gradient(#555, #555),
    linear-gradient(#555, #555),
    linear-gradient(#555, #555);
  background-repeat: no-repeat;
  background-position:
    center center,
    center top,
    center bottom;
  background-size:
    1px 100%,
    var(--preview-height-endline-width) 1px,
    var(--preview-height-endline-width) 1px;
}

.curtain-finish-preview:not(.shade-finish-preview) .preview-height-line::before,
.curtain-finish-preview:not(.shade-finish-preview) .preview-height-line::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.curtain-finish-preview:not(.shade-finish-preview) .preview-height-line::before {
  top: -1px;
  border-bottom: 7px solid #555;
}

.curtain-finish-preview:not(.shade-finish-preview) .preview-height-line::after {
  bottom: -1px;
  border-top: 7px solid #555;
}

.preview-height-line span {
  position: absolute;
  top: 50%;
  left: calc(50% + 14px);
  display: block;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  color: #333;
  white-space: nowrap;
}

.preview-option-caption {
  margin: 12px 0 14px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #555;
}

.preview-option-caption span {
  font-weight: 600;
}

.preview-finish-background {
  margin: 0 auto;
  max-width: 310px;
  padding: 6px 12px;
  border-radius: 2px;
  background: #f4f4f4;
  text-align: center;
  box-sizing: border-box;
}

.preview-finish-text {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  color: #333;
}

/* ------------------------------------------
   通常カーテン／カフェカーテン：モバイル調整値
------------------------------------------ */
@media screen and (max-width: 768px) {
  .curtain-finish-preview:not(.shade-finish-preview) {
    --preview-figure-width: 100%;
    --preview-height-space: 35px;

    --preview-width-line-left-inset: 20px;
    --preview-width-line-right-inset: 20px;
    --preview-width-line-bottom-adjust: 14px;

    --preview-height-line-right-adjust: 24px;
    --preview-height-line-top-adjust: 8px;
    --preview-height-line-bottom-adjust: 0px;
  }

  .curtain-finish-preview:not(.shade-finish-preview)[data-style="cafe"] {
    --preview-width-line-left-inset: 18px;
    --preview-width-line-right-inset: 18px;
    --preview-width-line-bottom-adjust: 13px;

    --preview-height-line-right-adjust: 22px;
    --preview-height-line-top-adjust: 0px;
    --preview-height-line-bottom-adjust: 0px;
  }

  .curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__rail-size,
  .curtain-finish-preview:not(.shade-finish-preview) .curtain-finish-preview__image-stage {
    width: 100%;
  }

  .curtain-finish-preview__image {
    max-height: none;
  }
}

/* ==============================
   オーダーカーテン：Welcartカート送信ボタン
   現在の estimate-curtain.css の末尾に追記
============================== */
#pc-curtain-submit {
  padding: 0;
  height: auto;
  background: transparent;
}

#pc-curtain-submit input[type="submit"],
#pc-curtain-submit button[type="submit"] {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 2px;
  background: #ad2635;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

#pc-curtain-submit.is-disabled input[type="submit"],
#pc-curtain-submit.is-disabled button[type="submit"],
#pc-curtain-submit input[type="submit"]:disabled,
#pc-curtain-submit button[type="submit"]:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.pc-curtain-cart-error {
  margin-top: 10px;
  color: #b42c32;
  font-size: .9rem;
  line-height: 1.7;
}

/* ==============================
   オーダーカーテン：数量プルダウンの矢印表示
============================== */
.confirm-qty-box select#confirm-qty {
  display: block;
  width: 72px;
  height: 44px;
  padding: 0 34px 0 14px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background-color: #fff;

  /* ブラウザ標準矢印をリセットし、独自矢印を表示 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 10px 6px;

  font-size: 14px;
  color: #333;
  cursor: pointer;
  box-sizing: border-box;
}

.confirm-qty-box select#confirm-qty:focus {
  outline: none;
  border-color: #999;
}

/* IE系の標準矢印を非表示 */
.confirm-qty-box select#confirm-qty::-ms-expand {
  display: none;
}

/* ==============================
   オーダーカーテン：未入力・未選択の案内表示
   現在の estimate-curtain.css の末尾に追記
============================== */
.curtain-input-guidance {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e8b5b8;
  border-radius: 3px;
  background: #fff4f4;
  color: #a92b34;
  font-size: .84rem;
  line-height: 1.65;
}

.curtain-input-guidance strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}

.curtain-input-guidance span {
  display: block;
}

.curtain-input-guidance.is-complete {
  display: none;
}

.curtain-confirm-summary-col .confirm-value.is-required {
  color: #b23038;
  font-weight: 600;
}

.curtain-confirm-summary-col .confirm-value.is-waiting,
.curtain-confirm-summary-col .confirm-price-value.is-waiting {
  color: #8a8a8a;
  font-size: .85rem;
  font-weight: 400;
}

#pc-curtain-submit.is-disabled + .pc-curtain-cart-error + .desc,
#pc-curtain-submit-message {
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  .curtain-input-guidance {
    margin-bottom: 12px;
    padding: 11px 12px;
    font-size: .82rem;
  }
}

/* =========================================
   ローマンシェード：測り方モーダル
   幅・高さ画像の表示サイズ統一
========================================= */

#modal-measure-width-shade .modal-row,
#modal-measure-height-shade .modal-row {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	margin-bottom: 32px;
}

#modal-measure-width-shade .modal-row:last-child,
#modal-measure-height-shade .modal-row:last-child {
	margin-bottom: 0;
}

#modal-measure-width-shade .modal-image,
#modal-measure-height-shade .modal-image {
	width: 300px;
	min-width: 300px;
	flex: 0 0 300px;
}

#modal-measure-width-shade .modal-image img,
#modal-measure-height-shade .modal-image img {
	display: block;
	width: 300px;
	height: auto;
	max-width: none;
}

#modal-measure-width-shade .modal-text,
#modal-measure-height-shade .modal-text {
	flex: 1;
	min-width: 0;
}

#modal-measure-width-shade .modal-title-h3,
#modal-measure-height-shade .modal-title-h3 {
	margin-top: 0;
}

/* スマートフォン */
@media screen and (max-width: 767px) {

	#modal-measure-width-shade .modal-row,
	#modal-measure-height-shade .modal-row {
		display: block;
		margin-bottom: 28px;
	}

	#modal-measure-width-shade .modal-image,
	#modal-measure-height-shade .modal-image {
		width: 100%;
		min-width: 0;
		max-width: 300px;
		margin: 0 auto 18px;
	}

	#modal-measure-width-shade .modal-image img,
	#modal-measure-height-shade .modal-image img {
		width: 100%;
		height: auto;
		max-width: 300px;
	}
}

/* ==========================================================
   測り方モーダル：画像幅を統一
   - 幅の測り方
   - 高さの測り方
========================================================== */

/* PC：画像列と説明文列を固定レイアウトにする */
#modal-measure-width .modal-row,
#modal-measure-height .modal-row {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* 画像エリアの横幅を統一 */
#modal-measure-width .modal-image,
#modal-measure-height .modal-image {
  width: 350px;
  min-width: 350px;
}

/* すべての測り方画像を同じ横幅で表示 */
#modal-measure-width .modal-image img,
#modal-measure-height .modal-image img {
  display: block;
  width: 350px;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* 説明文側が残りの横幅を使用 */
#modal-measure-width .modal-text,
#modal-measure-height .modal-text {
  min-width: 0;
}

/* 見出し位置を揃える */
#modal-measure-width .modal-text .modal-title-h3,
#modal-measure-height .modal-text .modal-title-h3 {
  margin-top: 0;
}

/* スマホ：画像と文章を縦並びにする */
@media screen and (max-width: 768px) {
  #modal-measure-width .modal-row,
  #modal-measure-height .modal-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  #modal-measure-width .modal-image,
  #modal-measure-height .modal-image {
    width: 100%;
    min-width: 0;
  }

  #modal-measure-width .modal-image img,
  #modal-measure-height .modal-image img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}


/* =========================================
   オーダーカーテン：生地選択ページ
========================================= */

.curtain-fabric-select {
	max-width: 1040px;
	margin: 0 auto 60px;
	padding: 0 4px;
	box-sizing: border-box;
}

.curtain-style-intro {
	margin: 28px 0 44px;
}

.curtain-style-intro__image {
	max-width: 720px;
	margin: 0 auto 24px;
	overflow: hidden;
	background: #f6f6f6;
}

.curtain-style-intro__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
}

.curtain-style-intro__body {
	max-width: 720px;
	margin: 0 auto;
}

.curtain-style-intro__label {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #777;
}

.curtain-style-intro__title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
}

.curtain-style-intro__text {
	font-size: 14px;
	line-height: 1.8;
	color: #555;
}

.curtain-fabric-select__heading {
	margin: 0 0 26px;
	text-align: center;
}

.curtain-fabric-select__heading h2 {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.curtain-fabric-select__heading p {
	margin: 0;
	font-size: 14px;
	color: #666;
	line-height: 1.8;
}

.curtain-fabric-list-section {
	margin: 42px 0 56px;
}

.curtain-fabric-list-section__title {
	margin: 0 0 22px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* 生地一覧グリッド */
.curtain-fabric-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
}

/* 生地カード */
.curtain-fabric-card {
	margin: 0;
	background: #fff;
}

.curtain-fabric-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	border: 1px solid #e3e3e3;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.curtain-fabric-card__link:hover {
	border-color: #acc1d7;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* 画像サイズを固定 */
.curtain-fabric-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f7f7f7;
}

.curtain-fabric-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.curtain-fabric-card__link:hover .curtain-fabric-card__image img {
	transform: scale(1.035);
}

.curtain-fabric-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: #eef3f7;
	color: #829db8;
	font-size: 12px;
	letter-spacing: 0.12em;
}

.curtain-fabric-card__body {
	padding: 12px 12px 14px;
}

.curtain-fabric-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 11px;
	color: #777;
}

.curtain-fabric-card__meta span {
	display: inline-block;
	padding: 2px 7px;
	background: #f3f6f9;
	color: #657d95;
}

.curtain-fabric-card__title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.55;
}

.curtain-fabric-card__price {
	margin: 0 0 6px;
	font-size: 12px;
	color: #555;
}

.curtain-fabric-card__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 12px;
	font-size: 10px;
	color: #777;
	line-height: 1.6;
}

.curtain-fabric-card__button {
	display: inline-block;
	margin-top: 4px;
	padding: 7px 14px;
	border: 1px solid #acc1d7;
	color: #657d95;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.06em;
}

.curtain-fabric-card__link:hover .curtain-fabric-card__button {
	background: #acc1d7;
	color: #fff;
}

.curtain-fabric-list__empty {
	margin: 0;
	padding: 24px;
	background: #f8f8f8;
	color: #777;
	font-size: 14px;
	text-align: center;
}

/* ダブルシェード Back選択時のメッセージ */
.curtain-fabric-selected-note {
	margin: 0 0 28px;
	padding: 14px 18px;
	background: #eef3f7;
	color: #555;
	font-size: 14px;
	line-height: 1.7;
}

.curtain-fabric-selected-note p {
	margin: 0;
}

.curtain-fabric-selected-note a {
	color: #657d95;
	text-decoration: underline;
}


/* =========================================
   オーダーカーテン：生地選択ページ
   スタイル別ページ / 生地一覧 / 選択済み生地表示
========================================= */

.curtain-fabric-select {
	max-width: 1040px;
	margin: 0 auto 60px;
	padding: 0 4px;
	box-sizing: border-box;
}

/* =========================================
   スタイルページ上部
========================================= */

.curtain-style-intro {
	margin: 28px 0 44px;
}

.curtain-style-intro__image {
	max-width: 760px;
	margin: 0 auto 24px;
	overflow: hidden;
	background: #f6f6f6;
}

.curtain-style-intro__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 430px;
	object-fit: cover;
}

.curtain-style-intro__body {
	max-width: 760px;
	margin: 0 auto;
}

.curtain-style-intro__label {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #777;
}

.curtain-style-intro__title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
}

.curtain-style-intro__text {
	font-size: 14px;
	line-height: 1.8;
	color: #555;
}

.curtain-style-intro__text p {
	margin: 0 0 1em;
}

/* =========================================
   生地選択見出し
========================================= */

.curtain-fabric-select__heading {
	margin: 0 0 28px;
	text-align: center;
}

.curtain-fabric-select__heading h2 {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.curtain-fabric-select__heading p {
	margin: 0;
	font-size: 14px;
	color: #666;
	line-height: 1.8;
}

.curtain-fabric-list-section {
	margin: 42px 0 58px;
}

.curtain-fabric-list-section__title {
	margin: 0 0 22px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* =========================================
   生地一覧グリッド
   PC：4列
========================================= */

.curtain-fabric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 20px;
}

/* =========================================
   生地カード
========================================= */

.curtain-fabric-card {
	margin: 0;
	background: #fff;
}

.curtain-fabric-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	border: 1px solid #e3e3e3;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.curtain-fabric-card__link:hover {
	border-color: #acc1d7;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.curtain-fabric-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f7f7f7;
}

.curtain-fabric-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.curtain-fabric-card__link:hover .curtain-fabric-card__image img {
	transform: scale(1.035);
}

.curtain-fabric-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: #eef3f7;
	color: #829db8;
	font-size: 12px;
	letter-spacing: 0.12em;
}

.curtain-fabric-card__body {
	padding: 12px 12px 14px;
}

.curtain-fabric-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 7px;
	font-size: 10px;
	color: #777;
}

.curtain-fabric-card__meta span {
	display: inline-block;
	padding: 2px 6px;
	background: #f3f6f9;
	color: #657d95;
	line-height: 1.5;
}

.curtain-fabric-card__title {
	margin: 0 0 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
}

.curtain-fabric-card__price {
	margin: 0 0 6px;
	font-size: 12px;
	color: #555;
}

.curtain-fabric-card__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 8px;
	margin: 0 0 10px;
	font-size: 10px;
	color: #777;
	line-height: 1.6;
}

.curtain-fabric-card__button {
	display: inline-block;
	margin-top: 4px;
	padding: 7px 12px;
	border: 1px solid #acc1d7;
	color: #60768c;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.06em;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.curtain-fabric-card__link:hover .curtain-fabric-card__button {
	background: #acc1d7;
	color: #fff;
}

.curtain-fabric-list__empty {
	margin: 0;
	padding: 24px;
	background: #f8f8f8;
	color: #777;
	font-size: 14px;
	text-align: center;
}

/* =========================================
   ダブルシェード Back選択時メッセージ
========================================= */

.curtain-fabric-selected-note {
	margin: 0 0 28px;
	padding: 14px 18px;
	background: #eef3f7;
	color: #555;
	font-size: 14px;
	line-height: 1.7;
}

.curtain-fabric-selected-note p {
	margin: 0;
}

.curtain-fabric-selected-note a {
	color: #657d95;
	text-decoration: underline;
}

/* =========================================
   選択済み生地表示
========================================= */

.curtain-selected-fabric-summary {
	max-width: 1040px;
	margin: 0 auto 36px;
	padding: 0 4px;
	box-sizing: border-box;
}

.curtain-selected-fabric-summary__heading {
	margin: 0 0 24px;
	text-align: center;
}

.curtain-selected-fabric-summary__heading h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.curtain-selected-fabric-summary__heading p {
	margin: 0;
	font-size: 14px;
	color: #666;
}

.curtain-selected-fabric-summary__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.curtain-selected-fabric-card {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 24px;
	padding: 22px;
	border: 1px solid #e3e3e3;
	background: #fff;
}

.curtain-selected-fabric-card__image {
	width: 280px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f7f7f7;
}

.curtain-selected-fabric-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.curtain-selected-fabric-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #eef3f7;
	color: #829db8;
	font-size: 12px;
}

.curtain-selected-fabric-card__body {
	min-width: 0;
}

.curtain-selected-fabric-card__label {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #657d95;
}

.curtain-selected-fabric-card__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}

.curtain-selected-fabric-card__meta,
.curtain-selected-fabric-card__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 10px;
	font-size: 13px;
	color: #666;
}

.curtain-selected-fabric-card__description {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.9;
	color: #555;
}

.curtain-selected-fabric-card__description p {
	margin: 0 0 1em;
}

.curtain-selected-fabric-card__change {
	margin: 16px 0 0;
	font-size: 13px;
}

.curtain-selected-fabric-card__change a {
	color: #657d95;
	text-decoration: underline;
}

.curtain-selected-fabric-summary__error {
	padding: 24px;
	background: #fff7f7;
	border: 1px solid #e5c5c5;
	color: #8a3333;
	text-align: center;
}

/* =========================================
   Responsive
========================================= */

/* 小さめPC：3列 */
@media screen and (max-width: 1100px) {
	.curtain-fabric-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* タブレット：2列 */
@media screen and (max-width: 960px) {
	.curtain-fabric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.curtain-selected-fabric-card {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.curtain-selected-fabric-card__image {
		width: 220px;
	}
}

/* スマホ：1列 */
@media screen and (max-width: 767px) {
	.curtain-fabric-select,
	.curtain-selected-fabric-summary {
		padding: 0 15px;
	}

	.curtain-style-intro {
		margin: 24px 0 36px;
	}

	.curtain-style-intro__image {
		max-width: 100%;
	}

	.curtain-style-intro__image img {
		max-height: none;
	}

	.curtain-fabric-select__heading h2,
	.curtain-selected-fabric-summary__heading h2 {
		font-size: 21px;
	}

	.curtain-fabric-select__heading p,
	.curtain-selected-fabric-summary__heading p {
		font-size: 13px;
	}

	.curtain-fabric-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.curtain-fabric-card__image {
		aspect-ratio: 4 / 3;
	}

	.curtain-fabric-card__body {
		padding: 14px 14px 16px;
	}

	.curtain-fabric-card__title {
		font-size: 14px;
	}

	.curtain-selected-fabric-card {
		display: block;
		padding: 16px;
	}

	.curtain-selected-fabric-card__image {
		width: 100%;
		margin-bottom: 16px;
		aspect-ratio: 4 / 3;
	}

	.curtain-selected-fabric-card__title {
		font-size: 18px;
	}

	.curtain-style-intro__title {
		font-size: 20px;
	}
}

/* 選択済み生地：生地を選び直すボタン */
.curtain-selected-fabric-card__change {
	margin: 24px 0 0;
}

.curtain-selected-fabric-card__change a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 10px 18px;
	border: 1px solid #acc1d7;
	background: #fff;
	color: #829db8;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease;
}

.curtain-selected-fabric-card__change a::before {
	content: "←";
	margin-right: 8px;
	font-size: 14px;
	line-height: 1;
}

.curtain-selected-fabric-card__change a:hover {
	background: #acc1d7;
	border-color: #acc1d7;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================
   ローマンシェード：選択カード・仕上がりイメージ
   PC・モバイルで寸法線を個別調整できるように整理
========================================================== */

/* ------------------------------
   選択カード：共通
------------------------------ */
.shade-choice-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.shade-choice-grid--mount {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shade-choice-grid--operation {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shade-choice-card {
  display: block;
  position: relative;
  cursor: pointer;
}

.shade-choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shade-choice-card__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 138px;
  padding: 18px;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.shade-choice-card:hover .shade-choice-card__inner {
  border-color: #c83232;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .05);
}

.shade-choice-card input[type="radio"]:checked + .shade-choice-card__inner {
  border: 2px solid #c83232;
  background: #fff8f8;
  box-shadow: 0 5px 14px rgba(200, 50, 50, .07);
}

.shade-choice-card__image {
  flex: 0 0 96px;
  max-width: 96px;
}

.shade-choice-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

.shade-choice-card__content {
/*  flex: 1 1 auto; */
  min-width: 0;
}

.shade-choice-card__title {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #222;
}

.shade-choice-card__desc {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  color: #444;
}

.shade-choice-card--operation .shade-choice-card__inner {
  justify-content: center;
  min-height: 100px;
  padding: 16px 22px;
}

.shade-choice-card--operation .shade-choice-card__image {
  flex: 0 0 105px;
  max-width: 105px;
}

.shade-choice-card--operation .shade-choice-card__title {
  margin-bottom: 0;
  font-size: 15px;
  text-align: center;
}

/* ------------------------------
   ローマンシェード：PC調整値
   横寸法線の縦棒は --shade-width-line-left/right を調整
------------------------------ */
.shade-finish-preview {
  --shade-window-size-width: 352px;
  --shade-image-width: 352px;
  --shade-image-stage-min-height: 340px;
  --shade-image-stage-padding: 0px;

  /* 横寸法線 */
  --shade-width-line-left: 17px;
  --shade-width-line-right: 17px;
  --shade-width-line-bottom: 17px;
  --shade-width-endline-height: 18px;

  /* 縦寸法線 */
  --shade-height-line-top: 0%;
  --shade-height-line-right: -10px;
  --shade-height-line-bottom: 70px;
  --shade-height-endline-width: 18px;

  background: #fff;
}

/* ローマンシェード上部の横寸法線エリア */
.shade-finish-preview__window-size,
.shade-finish-preview .curtain-finish-preview__rail-size {
  position: relative;
  width: min(100%, var(--shade-window-size-width));
  margin: 0 auto 8px;
  padding: 6px 0 0px;
  text-align: center;
  box-sizing: border-box;
}

/* HTML修正前の .preview-width-line と、修正後の .shade-preview-width-line の両方に対応 */
.shade-finish-preview .preview-width-line,
.shade-preview-width-line {
  position: absolute;
  left: var(--shade-width-line-left);
  right: var(--shade-width-line-right);
  bottom: var(--shade-width-line-bottom);
  height: 1px;
  background: #555;
}

.shade-finish-preview .preview-width-line::before,
.shade-finish-preview .preview-width-line::after,
.shade-preview-width-line::before,
.shade-preview-width-line::after {
  position: absolute;
  top: -4px;
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  z-index: 2;
}

.shade-finish-preview .preview-width-line::before,
.shade-preview-width-line::before {
  left: -1px;
  border-right: 7px solid #555;
}

.shade-finish-preview .preview-width-line::after,
.shade-preview-width-line::after {
  right: -1px;
  border-left: 7px solid #555;
}

/* 横寸法線の両端の1px縦棒 */
.shade-finish-preview__window-size::before,
.shade-finish-preview__window-size::after,
.shade-finish-preview .curtain-finish-preview__rail-size::before,
.shade-finish-preview .curtain-finish-preview__rail-size::after {
  position: absolute;
  bottom: calc(var(--shade-width-line-bottom) - (var(--shade-width-endline-height) / 2));
  width: 1px;
  height: var(--shade-width-endline-height);
  content: "";
  background: #555;
  z-index: 1;
}

.shade-finish-preview__window-size::before,
.shade-finish-preview .curtain-finish-preview__rail-size::before {
  left: var(--shade-width-line-left);
}

.shade-finish-preview__window-size::after,
.shade-finish-preview .curtain-finish-preview__rail-size::after {
  right: var(--shade-width-line-right);
}

/* 画像ステージ */
.shade-finish-preview__image-stage,
.shade-finish-preview .curtain-finish-preview__image-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--shade-image-stage-min-height);
  padding-right: var(--shade-image-stage-padding);
  background: #fff;
  box-sizing: border-box;
}

/* 画像と縦寸法線の基準枠 */
.shade-preview-image-wrap {
  position: relative;
  display: inline-block;
  width: min(100%, var(--shade-image-width));
  margin: 0 auto;
}

.shade-preview-image-wrap .shade-preview-image,
.shade-preview-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* 縦寸法線 */
.shade-preview-image-wrap .shade-preview-height-line,
.shade-finish-preview .shade-preview-height-line {
  position: absolute;
  top: var(--shade-height-line-top);
  right: calc(var(--shade-height-line-right) - (var(--shade-height-endline-width) / 2));
  bottom: var(--shade-height-line-bottom);
  width: var(--shade-height-endline-width);
  height: auto;
  background-color: transparent;
  background-image:
    linear-gradient(#555, #555),
    linear-gradient(#555, #555),
    linear-gradient(#555, #555);
  background-repeat: no-repeat;
  background-position:
    center center,
    center top,
    center bottom;
  background-size:
    1px 100%,
    var(--shade-height-endline-width) 1px,
    var(--shade-height-endline-width) 1px;
}

.shade-finish-preview .shade-preview-height-line::before,
.shade-finish-preview .shade-preview-height-line::after {
  left: 50%;
  transform: translateX(-50%);
}

.shade-finish-preview .shade-preview-height-line span {
  left: calc(50% + 14px);
}

/* 小計の待機表示クラスが残って薄く見える問題の保険 */
.confirm-price-value:not(.is-waiting):not(.is-required) {
  color: #222;
  font-weight: 700;
}

#curtain-input-guidance[style*="display: none"] {
  display: none !important;
}

/* ------------------------------
   タブレット
------------------------------ */
@media screen and (max-width: 991px) {
  .shade-choice-grid--mount,
  .shade-choice-grid--operation {
    grid-template-columns: 1fr;
  }

  .shade-choice-card__image {
    flex-basis: 90px;
    max-width: 90px;
  }

  .shade-choice-card--operation .shade-choice-card__image {
    flex-basis: 120px;
    max-width: 120px;
  }
}

/* ------------------------------
   ローマンシェード：モバイル調整値
------------------------------ */
@media screen and (max-width: 767px) {
  .shade-finish-preview {
    --shade-window-size-width: 300px;
    --shade-image-width: 300px;
    --shade-image-stage-min-height: 260px;
    --shade-image-stage-padding: 14px;

    --shade-width-line-left: 45px;
    --shade-width-line-right: 45px;
    --shade-width-line-bottom: 14px;

    --shade-height-line-right: -14px;
    --shade-height-line-bottom: 50px;
  }

  /* ローマンシェード／ダブルシェード：スマホでも画像左・文言右に表示 */
  .shade-choice-card__inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-height: auto;
    padding: 16px 16px;
    gap: 14px;
  }

  .shade-choice-card__image,
  .shade-choice-card--operation .shade-choice-card__image {
    flex: 0 0 82px;
    width: 82px;
    max-width: 82px;
    margin: 0;
  }

  .shade-choice-card__image img,
  .shade-choice-card--operation .shade-choice-card__image img {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    object-fit: contain;
  }

  .shade-choice-card__content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }

  .shade-choice-card__title,
  .shade-choice-card--operation .shade-choice-card__title {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
  }

  .shade-choice-card__desc {
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
  }
}

/* ==========================================================
   ローマンシェード：縦寸法線の上下矢印を復活
========================================================== */

.shade-finish-preview .shade-preview-height-line::before,
.shade-finish-preview .shade-preview-height-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  z-index: 3;
}

.shade-finish-preview .shade-preview-height-line::before {
  top: -1px;
  border-bottom: 7px solid #555;
}

.shade-finish-preview .shade-preview-height-line::after {
  bottom: -1px;
  border-top: 7px solid #555;
}




/* ==============================
   シェード：操作方式カード 横並び
============================== */

.shade-choice-grid--operation-method {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

.shade-choice-grid--operation-method .shade-choice-card {
	width: 100%;
	margin: 0;
}

.shade-choice-grid--operation-method .shade-choice-card__inner {
	display: flex;
	align-items: center;
	gap: 18px;
/*	min-height: 150px;  */
	padding: 18px;
}

.shade-choice-grid--operation-method .shade-choice-card__image {
	flex: 0 0 96px;
	width: 96px;
	text-align: center;
}

.shade-choice-grid--operation-method .shade-choice-card__image img {
	display: block;
	width: 90px;
	height: 90px;
	margin: 0 auto;
	object-fit: contain;
}

.shade-choice-grid--operation-method .shade-choice-card__content {
	flex: 1 1 auto;
	min-width: 0;
}

.shade-choice-grid--operation-method .shade-choice-card__title {
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.shade-choice-grid--operation-method .shade-choice-card__desc {
	display: block;
	font-size: 14px;
	line-height: 1.7;
	color: #444;
}

/* スマホでは1列 */
@media (max-width: 767px) {
	.shade-choice-grid--operation-method {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.shade-choice-grid--operation-method .shade-choice-card__inner {
		min-height: auto;
		padding: 16px 16px;
		gap: 14px;
	}

	.shade-choice-grid--operation-method .shade-choice-card__image {
    	flex: 0 0 80px;
    	width: 80px;
   	}

	.shade-choice-grid--operation-method .shade-choice-card__image img {
		width: 70px;
		height: 70px;
	}

	.shade-choice-grid--operation-method .shade-choice-card__title {
		font-size: 16px;
	}

	.shade-choice-grid--operation-method .shade-choice-card__desc {
		font-size: 13px;
	}
}



/* =========================================
   選択済み生地：商品詳細風レイアウト
========================================= */
#curtain-order-form {
	scroll-margin-top: 90px;
}

.curtain-selected-fabric-card--product {
	display: grid;
	grid-template-columns: minmax(300px, 0.88fr) minmax(360px, 1.12fr);
	gap: 38px;
	align-items: start;
	padding: 0;
	border: 0;
	background: #fff;
}

.curtain-selected-fabric-card--product + .curtain-selected-fabric-card--product {
	margin-top: 48px;
	padding-top: 44px;
	border-top: 1px solid #e5e5e5;
}

.curtain-selected-fabric-card__gallery {
	min-width: 0;
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	border: 0;
	background: #f7f7f7;
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__image img,
.curtain-selected-fabric-card__main-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.curtain-selected-fabric-card__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.curtain-selected-fabric-card__thumb {
	appearance: none;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1px solid #e2e2e2;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
}

.curtain-selected-fabric-card__thumb.is-active {
	border-color: #222;
	box-shadow: inset 0 0 0 1px #222;
}

.curtain-selected-fabric-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.curtain-selected-fabric-card__thumb:hover img {
	transform: scale(1.04);
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__body {
	min-width: 0;
	padding-top: 2px;
}

.curtain-selected-fabric-card__topline {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 10px;
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__label {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: #657d95;
}

.curtain-selected-fabric-card__code {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
	text-align: right;
	white-space: nowrap;
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__title {
	margin: 0 0 18px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: #111;
}

.curtain-selected-fabric-card__detail-table {
	margin: 0 0 20px;
	border: 1px solid #e3e3e3;
	border-bottom: 0;
}

.curtain-selected-fabric-card__detail-row {
	display: grid;
	grid-template-columns: 40% 60%;
	border-bottom: 1px solid #e3e3e3;
}

.curtain-selected-fabric-card__detail-label {
	padding: 10px 20px;
	background: #ddd;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: #222;
}

.curtain-selected-fabric-card__detail-value {
	padding: 10px 20px;
	background: #fff;
	font-size: 16px;
	line-height: 1.7;
	color: #222;
}

.curtain-selected-fabric-card__fabric-type {
	color: #555;
}

.curtain-selected-fabric-card__purchase {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	margin: 0 0 20px;
}

.curtain-selected-fabric-card__stock {
	font-size: 15px;
	line-height: 1.5;
	color: #222;
}

.curtain-selected-fabric-card__stock.is-soldout {
	color: #b42c32;
	font-weight: 700;
}

.curtain-selected-fabric-card__price {
	text-align: right;
	white-space: nowrap;
}

.curtain-selected-fabric-card__price-number {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: #111;
}

.curtain-selected-fabric-card__price-unit {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.curtain-selected-fabric-card__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
	gap: 12px;
	align-items: center;
	margin: 0 0 22px;
}

.curtain-selected-fabric-card__order-button,
.curtain-selected-fabric-card__change-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 18px;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.curtain-selected-fabric-card__order-button {
	border: 1px solid #ad2635;
	background: #ad2635;
	color: #fff;
}

.curtain-selected-fabric-card__order-button::after {
	content: "⌄";
	margin-left: 10px;
	font-size: 20px;
	line-height: 1;
}

.curtain-selected-fabric-card__order-button:hover {
	background: #8f1f2b;
	border-color: #8f1f2b;
	color: #fff;
	text-decoration: none;
}

.curtain-selected-fabric-card__order-button.is-disabled {
	border-color: #b8b8b8;
	background: #b8b8b8;
	color: #fff;
	cursor: not-allowed;
}

.curtain-selected-fabric-card__order-button.is-disabled::after {
	content: none;
}

.curtain-selected-fabric-card__change-button {
	border: 1px solid #d8d8d8;
	background: #fff;
	color: #777;
}

.curtain-selected-fabric-card__change-button::before {
	content: "←";
	margin-right: 8px;
}

.curtain-selected-fabric-card__change-button:hover {
	border-color: #acc1d7;
	background: #acc1d7;
	color: #fff;
	text-decoration: none;
}

.curtain-selected-fabric-card__stock-alert {
	margin: 0 0 18px;
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__description {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
	font-size: 15px;
	line-height: 2;
	color: #333;
}

.curtain-selected-fabric-card--product .curtain-selected-fabric-card__description p {
	margin: 0 0 1em;
}

.curtain-selected-fabric-card__change {
	display: none;
}

@media screen and (max-width: 960px) {
	.curtain-selected-fabric-card--product {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.curtain-selected-fabric-card__purchase {
		align-items: flex-start;
	}

	.curtain-selected-fabric-card__price {
		text-align: left;
	}
}

@media screen and (max-width: 767px) {
	.curtain-selected-fabric-card--product {
		display: block;
		padding: 0;
	}

	.curtain-selected-fabric-card--product .curtain-selected-fabric-card__image {
		width: 100%;
		margin-bottom: 0;
		aspect-ratio: 4 / 3;
	}

	.curtain-selected-fabric-card__thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		margin: 12px 0 22px;
	}

	.curtain-selected-fabric-card__topline {
		display: block;
	}

	.curtain-selected-fabric-card__code {
		margin-top: 5px;
		text-align: left;
		white-space: normal;
	}

	.curtain-selected-fabric-card--product .curtain-selected-fabric-card__title {
		font-size: 20px;
	}

	.curtain-selected-fabric-card__detail-row {
		grid-template-columns: 34% 66%;
	}

	.curtain-selected-fabric-card__detail-label,
	.curtain-selected-fabric-card__detail-value {
		padding: 8px 14px;
		font-size: 14px;
	}

	.curtain-selected-fabric-card__price-number {
		font-size: 26px;
	}

	.curtain-selected-fabric-card__actions {
		grid-template-columns: 1fr;
	}

	.curtain-selected-fabric-card__order-button,
	.curtain-selected-fabric-card__change-button {
		width: 100%;
	}
}

/* =========================================
   微調整：オーダー入力ボタン矢印・選択時レ点非表示
========================================= */
.curtain-selected-fabric-card__order-button::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 12px;
	margin-top: -5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	line-height: 1;
}

.curtain-selected-fabric-card__order-button.is-disabled::after {
	content: none;
	display: none;
}

.curtain-order-wrapper .option-box:has(input[type="radio"]:checked)::after,
.curtain-order-wrapper .option-box--horizontal:has(input[type="radio"]:checked)::after,
.curtain-order-wrapper .style-option:has(input[type="radio"]:checked)::after,
.shade-choice-card:has(input[type="radio"]:checked)::after,
.shade-choice-card__inner::after {
	content: none !important;
	display: none !important;
}

.curtain-order-wrapper .option-box,
.curtain-order-wrapper .option-box--horizontal {
	padding-right: 1.25rem !important;
}


/* =========================================
   仕上がりイメージ：寸法線は画像側に埋め込み済みのため非表示
========================================= */
.preview-width-line,
.preview-height-line,
.shade-preview-width-line,
.shade-preview-height-line {
	display: none !important;
}

/* 寸法線用の高さ表示ボックスも使わない */
.preview-height-value-box,
.shade-preview-height-value-box {
	display: none !important;
}

/* =========================================
   仕上がりイメージ：寸法線画像埋め込み後の最終調整
   - 画像側に入れた寸法線と重複する線・端棒は非表示
   - 高さの数値（H---cm）だけ右側に表示
========================================= */
.curtain-finish-preview__rail-size::before,
.curtain-finish-preview__rail-size::after,
.shade-finish-preview__window-size::before,
.shade-finish-preview__window-size::after,
.shade-finish-preview .curtain-finish-preview__rail-size::before,
.shade-finish-preview .curtain-finish-preview__rail-size::after,
.preview-width-line,
.preview-height-line,
.shade-preview-width-line,
.shade-preview-height-line {
	display: none !important;
	content: none !important;
}

.preview-height-value-box,
.shade-preview-height-value-box {
	display: block !important;
	position: absolute;
	top: 50%;
	left: calc(100% - 80px);
	transform: translateY(-50%);
	width: 90px;
	height: 24px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	box-sizing: border-box;
	z-index: 3;
}

.preview-height-value-box .preview-caption,
.shade-preview-height-value-box .preview-caption {
	display: none !important;
}

.preview-height-value-box .preview-dimension-text,
.shade-preview-height-value-box .preview-dimension-text {
	display: block;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	transform: rotate(90deg);
	transform-origin: center center;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: #222;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	.preview-height-value-box,
	.shade-preview-height-value-box {
		left: calc(100% - 55px);
	}
}
/* =========================================
   生地一覧：SOLD OUT表示
========================================= */

.curtain-fabric-card__image {
	position: relative;
}

.curtain-fabric-card.is-soldout .curtain-fabric-card__link,
.curtain-fabric-card__link--disabled {
	cursor: default;
}

.curtain-fabric-card.is-soldout .curtain-fabric-card__image img {
	filter: grayscale(20%);
	opacity: 0.65;
}

.curtain-fabric-card__soldout {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.68);
	color: #b42c32;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
}

.curtain-fabric-card__soldout .text {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	padding: 8px 14px;
	border: 1px solid #b42c32;
	background: rgba(255, 255, 255, 0.92);
	line-height: 1.4;
}

.curtain-fabric-card__soldout .sub_text {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.curtain-fabric-card__button--soldout {
	border-color: #ccc;
	background: #f3f3f3;
	color: #999;
	cursor: default;
}

.curtain-fabric-card.is-soldout .curtain-fabric-card__link:hover,
.curtain-fabric-card__link--disabled:hover {
	border-color: #e3e3e3;
	box-shadow: none;
}

.curtain-fabric-card.is-soldout .curtain-fabric-card__link:hover .curtain-fabric-card__image img,
.curtain-fabric-card__link--disabled:hover .curtain-fabric-card__image img {
	transform: none;
}

/* =========================================
   オーダー入力：選択生地の在庫不足アラート
========================================= */
.curtain-stock-alert {
	margin: 18px 0 26px;
	padding: 14px 16px;
	border: 1px solid #e2a5aa;
	border-left: 5px solid #b42c32;
	background: #fff4f4;
	color: #9f2630;
	font-size: 0.9rem;
	line-height: 1.7;
	box-sizing: border-box;
}

.curtain-stock-alert strong {
	display: block;
	margin-bottom: 2px;
	font-size: 0.95rem;
	font-weight: 700;
}

.curtain-stock-alert span {
	display: block;
}

.curtain-stock-alert::before {
	content: "⚠";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0 8px 0 0;
	border-radius: 50%;
	background: #b42c32;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	vertical-align: 1px;
}

.curtain-input-guidance.is-stock-error {
	border-color: #e2a5aa;
	background: #fff0f0;
	color: #9f2630;
}

#pc-curtain-submit.is-disabled input[type="submit"],
#pc-curtain-submit.is-disabled button[type="submit"] {
	background: #b8b8b8;
}

@media screen and (max-width: 768px) {
	.curtain-stock-alert {
		margin: 14px 0 22px;
		padding: 12px 13px;
		font-size: 0.84rem;
	}
}

/* =========================================
   小計：「円（税込）」のサイズ調整
========================================= */
.confirm-price-value .price-unit,
.price-unit {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.08em;
}

/* =========================================
   選択済み生地：ラベル「選択生地」を白抜き表示
========================================= */
body .curtain-selected-fabric-card__label {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 34px;
	margin: 0 0 14px !important;
	padding: 7px 16px !important;
	background: #657d95 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.08em;
	border-radius: 2px;
}

/* =========================================
   選択済み生地：メイン画像 Lightbox
========================================= */
.curtain-selected-fabric-card__image-button {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	cursor: zoom-in;
	overflow: hidden;
}

.curtain-selected-fabric-card__image-button:focus-visible {
	outline: 3px solid rgba(95, 120, 140, 0.55);
	outline-offset: 3px;
}

.curtain-selected-fabric-card__image-button .curtain-selected-fabric-card__main-image {
	transition: transform 0.28s ease;
}

.curtain-selected-fabric-card__image-button:hover .curtain-selected-fabric-card__main-image {
	transform: scale(1.025);
}

.curtain-selected-fabric-card__image {
	position: relative;
}

.curtain-selected-fabric-card__image::after {
	content: "拡大";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.58);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.curtain-selected-fabric-card__image:has(.curtain-selected-fabric-card__image-button):hover::after {
	opacity: 1;
}

.curtain-fabric-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 56px 24px 32px;
	background: rgba(0, 0, 0, 0.82);
	box-sizing: border-box;
}

.curtain-fabric-lightbox.is-open {
	display: flex;
}

body.curtain-fabric-lightbox-open {
	overflow: hidden;
}

.curtain-fabric-lightbox__inner {
	max-width: min(1120px, 96vw);
	max-height: calc(100vh - 96px);
}

.curtain-fabric-lightbox__image {
	display: block;
	max-width: min(1120px, 96vw);
	max-height: calc(100vh - 96px);
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
	background: #fff;
}

.curtain-fabric-lightbox__close {
	position: fixed;
	top: 16px;
	right: 18px;
	z-index: 1000001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

.curtain-fabric-lightbox__close:hover,
.curtain-fabric-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	outline: none;
}

@media screen and (max-width: 767px) {
	.curtain-selected-fabric-card__image::after {
		opacity: 1;
		right: 10px;
		bottom: 10px;
		font-size: 11px;
	}

	.curtain-fabric-lightbox {
		padding: 58px 12px 24px;
	}

	.curtain-fabric-lightbox__inner,
	.curtain-fabric-lightbox__image {
		max-width: 96vw;
		max-height: calc(100vh - 92px);
	}

	.curtain-fabric-lightbox__close {
		top: 10px;
		right: 10px;
		width: 42px;
		height: 42px;
		font-size: 32px;
	}
}

/* =========================================
   ローマンシェード：たたみ上げ幅 詳細リンク・モーダル
========================================= */
.curtain-order-wrapper .step-title--with-detail {
  align-items: center;
}

.curtain-order-wrapper .step-title--with-detail .step-title__main {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.curtain-order-wrapper .step-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-left: 0.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #657d95;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

.curtain-order-wrapper .step-detail-link::after {
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.curtain-order-wrapper .step-detail-link:hover {
  color: #b42c32;
}

.modal-detail--shade-fold {
  max-width: 760px;
}

.modal-detail--shade-fold .modal-content-scroll {
  padding: 28px 34px 34px;
}

.shade-fold-modal-content {
  max-width: 620px;
  margin: 0 auto;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.9;
}

.shade-fold-modal-content p {
  margin: 0 0 1.1em;
}

.shade-fold-modal-image {
  margin-top: 20px;
  text-align: center;
}

.shade-fold-modal-image img {
  display: inline-block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .step-detail-link {
    margin-left: 0;
    font-size: 0.82rem;
  }

  .modal-detail--shade-fold .modal-content-scroll {
    padding: 22px 18px 28px;
  }

  .shade-fold-modal-content {
    font-size: 0.88rem;
    line-height: 1.8;
  }
}

/* =========================================
   生地一覧：素材カテゴリ別見出し
   Linen / Cotton / Fabric Other
========================================= */

.curtain-fabric-material-section {
	margin: 0 0 46px;
}

.curtain-fabric-material-section:last-child {
	margin-bottom: 0;
}

.curtain-fabric-material-heading {
	margin: 0 0 18px;
	padding: 16px 18px;
	border-left: 4px solid #5f788c;
	background: #f6f8f9;
	box-sizing: border-box;
}

.curtain-fabric-material-heading__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: #222;
}

.curtain-fabric-material-heading__description {
	max-width: 860px;
	font-size: 13px;
	line-height: 1.8;
	color: #555;
}

.curtain-fabric-material-heading__description p {
	margin: 0;
}

.curtain-fabric-list-section__title + .curtain-fabric-material-section {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	.curtain-fabric-material-section {
		margin-bottom: 36px;
	}

	.curtain-fabric-material-heading {
		margin-bottom: 14px;
		padding: 13px 14px;
	}

	.curtain-fabric-material-heading__title {
		font-size: 17px;
	}

	.curtain-fabric-material-heading__description {
		font-size: 12px;
		line-height: 1.75;
	}
}

/* =========================================
   生地一覧：素材カテゴリ別見出し
   Linen / Cotton / Fabric Other
   ※説明文なしのシンプル表示
========================================= */

.curtain-fabric-material-section {
	margin: 0 0 46px;
}

.curtain-fabric-material-section:last-child {
	margin-bottom: 0;
}

.curtain-fabric-material-heading {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 4px solid #5f788c;
	background: #f6f8f9;
	box-sizing: border-box;
}

.curtain-fabric-material-heading__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: #222;
}

.curtain-fabric-list-section__title + .curtain-fabric-material-section {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	.curtain-fabric-material-section {
		margin-bottom: 36px;
	}

	.curtain-fabric-material-heading {
		margin-bottom: 14px;
		padding: 11px 14px;
	}

	.curtain-fabric-material-heading__title {
		font-size: 17px;
	}
}
/* =========================================
   生地一覧：素材カテゴリ説明文を非表示
========================================= */
.curtain-fabric-material-heading__description {
	display: none !important;
}

/* =========================================
   生地一覧：Linen / Cotton 見出しをやわらかく調整
========================================= */

.curtain-fabric-material-group__title {
	margin: 0 0 18px;
	padding: 10px 14px 10px 16px;
	border-left: 3px solid #acc1d7;
	background: #fbfbfb;
    border-left-color: #c4d1dc;
	color: #333;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.curtain-fabric-material-group {
	margin: 0 0 34px;
}

.curtain-fabric-material-group + .curtain-fabric-material-group {
	margin-top: 26px;
}

#back-fabric-select {
	scroll-margin-top: 150px;
}

/* =========================================
   オーダー入力する：アンカー位置調整
   固定ヘッダーやメニューに「オーダーを入力する」見出しが隠れないようにする
========================================= */
#curtain-order-form {
	scroll-margin-top: 165px;
}

@media screen and (max-width: 768px) {
	#curtain-order-form {
		scroll-margin-top: 115px;
	}
}

/* =========================================
   選択済み生地：PhotoSwipe対応フリックスライダー
   - 通常表示はscroll-snapでフリック
   - 拡大表示はPhotoSwipeで左右矢印・スマホスワイプ対応
========================================= */
.curtain-selected-fabric-card__gallery[data-fabric-gallery] {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.curtain-selected-fabric-card__slider[data-fabric-track] {
	display: flex;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	background: #f7f7f7;
	box-sizing: border-box;
	scrollbar-width: none;
}

.curtain-selected-fabric-card__slider[data-fabric-track]::-webkit-scrollbar {
	display: none;
}

.curtain-selected-fabric-card__slide {
	position: relative;
	display: block;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	height: 100%;
	scroll-snap-align: start;
	overflow: hidden;
	background: #f7f7f7;
	text-decoration: none;
	cursor: zoom-in;
	box-sizing: border-box;
}

.curtain-selected-fabric-card__slide-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.28s ease;
}

.curtain-selected-fabric-card__slide:hover .curtain-selected-fabric-card__slide-image {
	transform: scale(1.025);
}

.curtain-selected-fabric-card__slide::after {
	content: "拡大";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.58);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.curtain-selected-fabric-card__slide:hover::after {
	opacity: 1;
}

.curtain-selected-fabric-card__thumb {
	appearance: none;
	-webkit-appearance: none;
}

.pswp {
	z-index: 2147483000;
}

/* 旧独自LightboxのCSSが残っていても表示させない */
.curtain-fabric-lightbox {
	display: none !important;
}

@media screen and (max-width: 767px) {
	.curtain-selected-fabric-card__gallery[data-fabric-gallery],
	.curtain-selected-fabric-card__slider[data-fabric-track] {
		width: 100%;
		max-width: 100%;
	}

	.curtain-selected-fabric-card__slider[data-fabric-track] {
		aspect-ratio: 1 / 1;
	}

	.curtain-selected-fabric-card__slide::after {
		opacity: 1;
		right: 10px;
		bottom: 10px;
		font-size: 11px;
	}

	.curtain-selected-fabric-card__thumbs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		margin: 12px 0 22px;
	}
}

/* =========================================
   タッセル項目：スマホ表示崩れ補正
========================================= */
@media screen and (max-width: 767px) {
	.curtain-order-wrapper .tassel-option-group {
		padding: 1.2rem 1.25rem;
	}

	.curtain-order-wrapper .tassel-option-group .option-radio-group {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.8rem;
		align-items: start;
	}

	.curtain-order-wrapper .tassel-option-group .radio-label {
		display: flex;
		align-items: flex-start;
		width: 100%;
		min-height: 28px;
		padding-left: 34px;
		font-size: 1rem;
		line-height: 1.65;
		box-sizing: border-box;
		white-space: normal;
	}

	.curtain-order-wrapper .tassel-option-group .radio-label .custom-radio {
		top: 0.85em;
		transform: translateY(-50%);
	}

	.curtain-order-wrapper .tassel-option-group .tassel-price-note {
		display: inline;
		margin-left: 0.35em;
		font-size: 0.95em;
		line-height: 1.65;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.curtain-order-wrapper .tassel-option-group .tassel-price-meta {
		display: block;
		margin: -0.25rem 0 0 34px;
		font-size: 0.86rem;
		line-height: 1.75;
		color: #444;
	}

	.curtain-order-wrapper .tassel-option-group .tassel-price-breakdown,
	.curtain-order-wrapper .tassel-option-group .tassel-price-help {
		display: block;
		margin: 0.15rem 0 0;
		font-size: inherit;
		line-height: inherit;
		color: #444;
	}

	.curtain-order-wrapper .tassel-option-group .tassel-price-breakdown:empty {
		display: none;
	}
}

/* =========================================
   スマホ：ステップ見出しの番号だけ改行される問題を補正
========================================= */
@media screen and (max-width: 767px) {
	.curtain-order-wrapper .step-title {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 0.55rem;
		row-gap: 0.3rem;
		align-items: start;
		margin: 2.2rem 0 1.1rem;
		line-height: 1.45;
	}

	.curtain-order-wrapper .step-title::before {
		grid-column: 1;
		grid-row: 1;
		width: 32px;
		height: 32px;
		line-height: 32px;
		margin: 0;
	}

	.curtain-order-wrapper .step-title .required,
	.curtain-order-wrapper .step-title .step-note,
	.curtain-order-wrapper .step-title .modal-trigger,
	.curtain-order-wrapper .step-title .step-title__main {
		grid-column: 2;
	}
}

/* =========================================
   選択済み生地：PhotoSwipe版メイン画像崩れ補正
   - 横並び画像がメイン画像内に全部表示される問題を回避
   - メイン画像は常に1枚だけ表示
   - スマホの通常表示フリックはJSで画像切替
========================================= */
body .curtain-selected-fabric-card__gallery[data-fabric-gallery] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

body .curtain-selected-fabric-card__slider[data-fabric-track] {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	box-sizing: border-box !important;
	scroll-snap-type: none !important;
}

body .curtain-selected-fabric-card__slide {
	display: none !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	text-decoration: none !important;
	cursor: zoom-in !important;
	box-sizing: border-box !important;
}

body .curtain-selected-fabric-card__slide.is-active {
	display: block !important;
}

body .curtain-selected-fabric-card__slide-image,
body .curtain-selected-fabric-card__slide .curtain-selected-fabric-card__main-image {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

body .curtain-selected-fabric-card__slide:hover .curtain-selected-fabric-card__slide-image {
	transform: scale(1.025);
}

@media screen and (max-width: 767px) {
	body .curtain-selected-fabric-card__slider[data-fabric-track] {
		aspect-ratio: 4 / 3 !important;
		touch-action: pan-y !important;
	}

	body .curtain-selected-fabric-card__slide {
		touch-action: pan-y !important;
	}

	body .curtain-selected-fabric-card__thumbs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		margin: 12px 0 22px;
	}
}

/* =========================================
   選択済み生地：PhotoSwipe版 通常表示切替 v2
   - JSで is-active を切り替える前提に固定
   - 非アクティブ画像はクリック・表示対象から外す
========================================= */
body .curtain-selected-fabric-card__slider[data-fabric-track] {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	box-sizing: border-box !important;
}

body .curtain-selected-fabric-card__slider[data-fabric-track] > a.curtain-selected-fabric-card__slide {
	display: none !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	text-decoration: none !important;
	cursor: zoom-in !important;
	box-sizing: border-box !important;
	pointer-events: none !important;
}

body .curtain-selected-fabric-card__slider[data-fabric-track] > a.curtain-selected-fabric-card__slide.is-active {
	display: block !important;
	pointer-events: auto !important;
	z-index: 2 !important;
}

body .curtain-selected-fabric-card__slider[data-fabric-track] .curtain-selected-fabric-card__slide-image,
body .curtain-selected-fabric-card__slider[data-fabric-track] .curtain-selected-fabric-card__main-image {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

body .curtain-selected-fabric-card__thumb {
	touch-action: manipulation;
}

body .curtain-selected-fabric-card__thumb.is-active {
	border-color: #222 !important;
	box-shadow: inset 0 0 0 1px #222 !important;
}

@media screen and (max-width: 767px) {
	body .curtain-selected-fabric-card__slider[data-fabric-track] {
		aspect-ratio: 4 / 3 !important;
		touch-action: pan-y !important;
	}

	body .curtain-selected-fabric-card__slider[data-fabric-track] > a.curtain-selected-fabric-card__slide {
		touch-action: pan-y !important;
	}
}

/* =========================================
   選択済み生地：PhotoSwipe版 メイン画像1枚差し替え方式
   - 表示用メイン画像は1枚のみ
   - サムネイルクリック / スマホフリックで src・href を差し替え
========================================= */
body .curtain-selected-fabric-card__gallery[data-fabric-gallery] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

body .curtain-selected-fabric-card__main[data-fabric-track] {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	box-sizing: border-box !important;
	touch-action: pan-y !important;
}

body .curtain-selected-fabric-card__main-link {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	text-decoration: none !important;
	cursor: zoom-in !important;
	box-sizing: border-box !important;
	touch-action: pan-y !important;
}

body .curtain-selected-fabric-card__main-link::after {
	content: "拡大";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.58);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
}

body .curtain-selected-fabric-card__main-link:hover::after {
	opacity: 1;
}

body .curtain-selected-fabric-card__main-link img,
body .curtain-selected-fabric-card__main-link .curtain-selected-fabric-card__main-image {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	transition: transform 0.25s ease;
}

body .curtain-selected-fabric-card__main-link:hover img {
	transform: scale(1.025);
}

body .curtain-selected-fabric-card__pswp-gallery[hidden] {
	display: none !important;
}

body .curtain-selected-fabric-card__thumb {
	touch-action: manipulation;
}

body .curtain-selected-fabric-card__thumb.is-active {
	border-color: #222 !important;
	box-shadow: inset 0 0 0 1px #222 !important;
}

@media screen and (max-width: 767px) {
	body .curtain-selected-fabric-card__main[data-fabric-track] {
		aspect-ratio: 4 / 3 !important;
	}

	body .curtain-selected-fabric-card__main-link::after {
		opacity: 1;
		right: 10px;
		bottom: 10px;
		font-size: 11px;
	}

	body .curtain-selected-fabric-card__thumbs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		margin: 12px 0 22px;
	}
}

/* =========================================
   PhotoSwipe：メイン画像1枚差し替え方式 v2
   - PhotoSwipeを直接起動する方式に変更
   - 既存ヘッダーより前面に出す保険
========================================= */
.pswp {
	z-index: 2147483000 !important;
}

/* =========================================
   PhotoSwipe：二重起動防止 v3
   - 通常表示側から PhotoSwipe用 a / data-pswp属性を撤去
   - メイン画像は button + img として表示
   - PhotoSwipeはJS配列から直接起動
========================================= */
body .curtain-selected-fabric-card__main-button {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	background: #f7f7f7 !important;
	text-decoration: none !important;
	cursor: zoom-in !important;
	box-sizing: border-box !important;
	touch-action: pan-y !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

body .curtain-selected-fabric-card__main-button::after {
	content: "拡大";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.58);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
}

body .curtain-selected-fabric-card__main-button:hover::after,
body .curtain-selected-fabric-card__main-button:focus-visible::after {
	opacity: 1;
}

body .curtain-selected-fabric-card__main-button img,
body .curtain-selected-fabric-card__main-button .curtain-selected-fabric-card__main-image {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	transition: transform 0.25s ease;
}

body .curtain-selected-fabric-card__main-button:hover img {
	transform: scale(1.025);
}

body .curtain-selected-fabric-card__main-link,
body .curtain-selected-fabric-card__pswp-gallery {
	display: none !important;
}

.pswp {
	z-index: 2147483000 !important;
}

@media screen and (max-width: 767px) {
	body .curtain-selected-fabric-card__main-button::after {
		opacity: 1;
		right: 10px;
		bottom: 10px;
		font-size: 11px;
	}
}

/* =========================================
   選択済み生地：メイン画像スライドアニメーション
   - 通常表示のサムネイル切替 / スマホフリック時にスライド
   - PhotoSwipeの挙動には干渉しない
========================================= */
body .curtain-selected-fabric-card__main-button {
	position: relative !important;
	overflow: hidden !important;
}

body .curtain-selected-fabric-card__main-button[data-slide-animating="1"] {
	pointer-events: none;
}

body .curtain-selected-fabric-card__slide-ghost {
	position: absolute !important;
	inset: 0 !important;
	z-index: 4 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	pointer-events: none !important;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

body .curtain-selected-fabric-card__slide-ghost--incoming {
	z-index: 5 !important;
}

body .curtain-selected-fabric-card__main-button.is-slide-next .curtain-selected-fabric-card__slide-ghost--incoming {
	animation: pcCurtainFabricSlideInFromRight 0.34s ease both;
}

body .curtain-selected-fabric-card__main-button.is-slide-next .curtain-selected-fabric-card__slide-ghost--outgoing {
	animation: pcCurtainFabricSlideOutToLeft 0.34s ease both;
}

body .curtain-selected-fabric-card__main-button.is-slide-prev .curtain-selected-fabric-card__slide-ghost--incoming {
	animation: pcCurtainFabricSlideInFromLeft 0.34s ease both;
}

body .curtain-selected-fabric-card__main-button.is-slide-prev .curtain-selected-fabric-card__slide-ghost--outgoing {
	animation: pcCurtainFabricSlideOutToRight 0.34s ease both;
}

@keyframes pcCurtainFabricSlideInFromRight {
	from {
		transform: translate3d(100%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes pcCurtainFabricSlideOutToLeft {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes pcCurtainFabricSlideInFromLeft {
	from {
		transform: translate3d(-100%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes pcCurtainFabricSlideOutToRight {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(100%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body .curtain-selected-fabric-card__slide-ghost {
		animation: none !important;
	}
}

/* =========================================
   選択済み生地：PC表示のメイン画像幅を512pxに調整
   - スライドアニメーション版CSSをベースに追加
   - 生地詳細画面の左メイン画像を512px固定
   - サムネイル幅もメイン画像に合わせる
   - 960px以下は既存レスポンシブを優先
========================================= */
@media screen and (min-width: 961px) {
	body .curtain-selected-fabric-card--product {
		grid-template-columns: 512px minmax(0, 1fr) !important;
		gap: 38px;
	}

	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__gallery {
		width: 512px !important;
		max-width: 100% !important;
	}

	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main[data-fabric-track],
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__image {
		width: 512px !important;
		max-width: 100% !important;
		aspect-ratio: 1 / 1 !important;
	}

	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__thumbs {
		width: 512px !important;
		max-width: 100% !important;
	}
}

/* =========================================
   生地一覧ページ：上部スタイル紹介画像を800×600に調整
   - PCでは800px × 600px
   - スマホでは横幅100%で4:3比率を維持
========================================= */
.curtain-style-intro__image {
	width: 800px !important;
	max-width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
	background: #f6f6f6 !important;
}

.curtain-style-intro__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

@media screen and (max-width: 767px) {
	.curtain-style-intro__image {
		width: 100% !important;
		aspect-ratio: 4 / 3 !important;
	}
}

/* =========================================
   生地一覧ページ：上部スタイル紹介画像スライドショー
   - curtain-fabric-list.php の出力クラスに合わせた修正版
   - 赤枠部分（.curtain-style-intro__image）にメイン画像＋サブ画像を横スライド表示
========================================= */

/* 赤枠の外枠。既存の800×600指定をそのまま維持 */
.curtain-style-intro__image.curtain-style-intro__slider {
	position: relative !important;
	width: 800px !important;
	max-width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
	background: #f6f6f6 !important;
}

/* PHP側の class="curtain-style-intro__slide-track" に合わせる */
.curtain-style-intro__slide-track,
.curtain-style-intro__slider [data-curtain-style-slider-track] {
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: transform 0.35s ease !important;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* 各スライド */
.curtain-style-intro__slide,
.curtain-style-intro__slider [data-curtain-style-slide] {
	display: block !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	min-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #f6f6f6 !important;
}

/* JSが aria-hidden を切り替えても横並びレイアウトを維持 */
.curtain-style-intro__slide[aria-hidden="true"],
.curtain-style-intro__slider [data-curtain-style-slide][aria-hidden="true"] {
	display: block !important;
	visibility: visible !important;
}

/* スライド内画像 */
.curtain-style-intro__slide img,
.curtain-style-intro__slider [data-curtain-style-slide] img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* 左右矢印 */
.curtain-style-intro__nav {
	position: absolute !important;
	top: 50% !important;
	z-index: 5 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.5) !important;
	color: #333 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transform: translateY(-50%) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}

.curtain-style-intro__nav:hover {
	background: rgba(255, 255, 255, 0.96) !important;
}

.curtain-style-intro__nav::before {
	content: "" !important;
	display: block !important;
	width: 11px !important;
	height: 11px !important;
	border-top: 2px solid #333 !important;
	border-right: 2px solid #333 !important;
}

.curtain-style-intro__nav--prev {
	left: 14px !important;
}

.curtain-style-intro__nav--prev::before {
	margin-left: 4px !important;
	transform: rotate(-135deg) !important;
}

.curtain-style-intro__nav--next {
	right: 14px !important;
}

.curtain-style-intro__nav--next::before {
	margin-right: 4px !important;
	transform: rotate(45deg) !important;
}
/* 通常時：矢印を非表示 */
.curtain-style-intro__slider .curtain-style-intro__nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.25s ease;
}

/* マウスホバー時：矢印を表示 */
.curtain-style-intro__slider:hover .curtain-style-intro__nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* キーボード操作時も表示 */
.curtain-style-intro__slider:focus-within .curtain-style-intro__nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* スマホ・タブレットはhoverがないので常時表示 */
@media (hover: none) {
  .curtain-style-intro__slider .curtain-style-intro__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media screen and (max-width: 767px) {
	.curtain-style-intro__image.curtain-style-intro__slider {
		width: 100% !important;
		aspect-ratio: 4 / 3 !important;
	}

	.curtain-style-intro__nav {
		width: 36px !important;
		height: 36px !important;
	}

	.curtain-style-intro__nav--prev {
		left: 10px !important;
	}

	.curtain-style-intro__nav--next {
		right: 10px !important;
	}
}

@media screen and (max-width: 767px) {
    .estimate-wrapper {
      padding: 1rem;
    }
    .radio-label {
      margin-top:10px;
      font-size: 0.9rem;
    }
    .curtain-order-wrapper .step-detail-link {
        justify-content: left;
    }
}

/* =========================================
   オーダーカーテン入力：仕上りサイズ表示・備考欄
========================================= */
.curtain-order-wrapper .curtain-finish-size-field {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.curtain-order-wrapper .curtain-finish-size-field label {
  display: block;
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.curtain-order-wrapper .input-group--finish-display {
  display: grid;
  grid-template-columns: minmax(88px, 128px) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 10px;
}

.curtain-order-wrapper .input-group--finish-display input[readonly] {
  width: 100%;
  max-width: none;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 2px;
  background: #f7f7f7;
  color: #333;
  box-sizing: border-box;
}

.curtain-order-wrapper .input-group--finish-display .unit {
  line-height: 38px;
  white-space: nowrap;
}

.curtain-remarks-section {
  margin-top: -0.5rem;
}

.curtain-remarks-group {
  padding: 1.4rem 1.6rem;
}

.curtain-remarks-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

.curtain-remarks-title span {
  display: inline-block;
  margin-left: 0.45em;
  padding: 2px 7px;
  border: 1px solid #ddd;
  border-radius: 999px;
  color: #777;
  font-size: 0.72rem;
  font-weight: 500;
  vertical-align: 0.12em;
}

.curtain-remarks-textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  margin-top: 0.9rem;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.75;
  resize: vertical;
  box-sizing: border-box;
}

.curtain-remarks-textarea:focus {
  outline: none;
  border-color: #acc1d7;
  box-shadow: 0 0 0 2px rgba(172, 193, 215, 0.25);
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .input-group--finish-display {
    grid-template-columns: minmax(100px, 1fr) auto;
  }

  .curtain-remarks-group {
    padding: 1.2rem 1.25rem;
  }

  .curtain-remarks-textarea {
    min-height: 130px;
    font-size: 0.9rem;
  }
}

/* =========================================
   オーダーカーテン入力：仕上りサイズを入力可能にする
   - レールサイズ入力の下に仕上りサイズ入力を配置
   - スクリーンショットに合わせて、説明文を薄いグレー帯で表示
========================================= */
.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  margin: 10px 0 8px;
  padding: 7px 12px;
  background: #f7f7f7;
  box-sizing: border-box;
  line-height: 1.55;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label strong {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label .desc {
  display: inline;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #666;
}

.curtain-order-wrapper .input-group--finish-input {
  display: grid;
  grid-template-columns: minmax(88px, 128px) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 8px;
}

.curtain-order-wrapper .input-group--finish-input input[type="number"] {
  width: 100%;
  max-width: none;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}

.curtain-order-wrapper .input-group--finish-input .unit {
  line-height: 38px;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label .desc {
    font-size: 0.78rem;
  }

  .curtain-order-wrapper .input-group--finish-input {
    grid-template-columns: minmax(100px, 1fr) auto;
  }
}


/* =========================================
   通常カーテン：サイズ入力欄の背景・ベースライン調整
   - 仕上り幅／仕上り高さの説明帯は白背景
   - 幅／高さ／仕上り幅／仕上り高さのinput位置を揃える
========================================= */
.curtain-order-wrapper .size-box--curtain-finish-input .size-item > label {
  min-height: 52px;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}

.curtain-order-wrapper .size-box--curtain-finish-input .input-group--with-measure,
.curtain-order-wrapper .size-box--curtain-finish-input .input-group--finish-input {
  grid-template-columns: 128px auto max-content;
  align-items: center;
  margin-top: 0;
}

.curtain-order-wrapper .size-box--curtain-finish-input .input-group--finish-input {
  grid-template-columns: 128px auto;
}

.curtain-order-wrapper .size-box--curtain-finish-input .input-group--with-measure input[type="number"],
.curtain-order-wrapper .size-box--curtain-finish-input .input-group--finish-input input[type="number"] {
  width: 128px;
  max-width: 128px;
  height: 38px;
  box-sizing: border-box;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field {
  margin-top: 14px;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
  min-height: 46px;
  margin: 0 0 8px;
  padding: 7px 12px 7px 0;
  background: #fff;
  align-items: center;
  box-sizing: border-box;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label .desc {
  line-height: 1.55;
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .size-box--curtain-finish-input .size-item > label {
    min-height: auto;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .input-group--with-measure {
    grid-template-columns: minmax(100px, 128px) auto;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .input-group--finish-input {
    grid-template-columns: minmax(100px, 128px) auto;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .input-group--with-measure input[type="number"],
  .curtain-order-wrapper .size-box--curtain-finish-input .input-group--finish-input input[type="number"] {
    width: 100%;
    max-width: 128px;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
    min-height: auto;
    padding: 7px 0;
    background: #fff;
  }
}

/* =========================================
   通常カーテン：サイズ入力説明文の整形 v2
   - 幅／高さ／仕上り幅／仕上り高さの説明文を読みやすく整理
   - 入力欄のベースラインは維持
========================================= */
.curtain-order-wrapper .size-box--curtain-finish-input .size-item > label,
.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.curtain-order-wrapper .size-box--curtain-finish-input .size-item > label {
  min-height: 58px !important;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
  min-height: 50px !important;
  margin-bottom: 12px !important;
}

.curtain-order-wrapper .size-box--curtain-finish-input .size-item > label strong,
.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label strong {
  display: block !important;
  margin: 0 !important;
  padding-top: 1px !important;
  color: #222 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
}

.curtain-order-wrapper .size-box--curtain-finish-input .size-item > label .desc,
.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label .desc {
  display: block !important;
  min-width: 0 !important;
  max-width: 420px !important;
  margin: 0 !important;
  color: #666 !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field {
  margin-top: 24px !important;
}

.curtain-order-wrapper .size-box--curtain-finish-input .input-group--with-measure,
.curtain-order-wrapper .size-box--curtain-finish-input .input-group--finish-input {
  margin-top: 0 !important;
}

@media screen and (max-width: 768px) {
  .curtain-order-wrapper .size-box--curtain-finish-input .size-item > label,
  .curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label {
    grid-template-columns: 1fr !important;
    row-gap: 3px !important;
    min-height: auto !important;
    margin-bottom: 10px !important;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .size-item > label .desc,
  .curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field__label .desc {
    max-width: none !important;
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
  }

  .curtain-order-wrapper .size-box--curtain-finish-input .curtain-finish-size-field {
    margin-top: 20px !important;
  }
}

/* =========================================
   スマホ：選択済み生地・カーテン画像を正方形表示
   - PCと同じくメイン画像を1:1に固定
   - 既存のスマホ用 4:3 指定を最終上書き
========================================= */
@media screen and (max-width: 767px) {
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__gallery[data-fabric-gallery] {
		width: 100% !important;
		max-width: 100% !important;
	}

	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main[data-fabric-track],
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__image,
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__slider[data-fabric-track] {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 1 / 1 !important;
	}

	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-button,
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-link,
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-button img,
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-link img,
	body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-image {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}
}

/* =========================================
   選択済み生地：フォーム画面メイン画像を6:7表示
   - 「選択した生地」ブロック左側のメイン画像
   - PC／スマホともに6:7で表示
   - 既存の正方形・4:3指定を最終上書き
========================================= */
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main[data-fabric-track],
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__image,
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__slider[data-fabric-track] {
	aspect-ratio: 6 / 7 !important;
}

body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-button,
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-link,
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-button img,
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-link img,
body .curtain-selected-fabric-card--product .curtain-selected-fabric-card__main-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}