@charset "UTF-8";
/* PETIT EBISU シミュレーター
   位置・サイズは simulator.js の LAYOUT で管理し、
   ここでは CSS 変数（--base-x など）として受け取るだけにしている。
   ショップのページに影響しないよう、すべての指定はシミュレーターのルート（.sim）の中だけに効かせる。 */

.sim,
.sim *,
.sim *::before,
.sim *::after {
  box-sizing: border-box;
}

/* 書体・文字色・背景はシミュレーターの中だけ（ショップの body には触らない） */
.sim {
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #222;
  background: #fff;
}

/* PC：左（完成イメージ・選択中の内容・ボタン）を少し広めの2カラム */
.sim {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 40px 80px;
  align-items: start;
}

/* ---------- 完成イメージ ---------- */

/* 横長のブックカバーに合わせて横長（4:3）にし、上下の余白を減らす */
.sim .preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 開いたブックカバー（横長）
   cqw（カバー幅に対する %）でステッチを指定するため、コンテナにしている */
.sim .cover {
  container-type: inline-size;
  /* ステッチ共通：1針ずつ短い線として見える縫い目
     （PCのカバー幅 約574px で 太さ約0.9px・糸約4.5px・間隔約2.8px）
     スマホで点の列に潰れないよう、それぞれ下限を付けている */
  --stitch-width: max(0.7px, 0.157cqw);
  --stitch-dash: max(3px, 0.78cqw);
  --stitch-gap: max(2px, 0.48cqw);
  /* 糸色：JS が各革画像の代表色を少し明るくして設定する（読めない場合の色） */
  --stitch-color-body: rgba(28, 18, 12, 0.85);
  --stitch-color-base: rgba(28, 18, 12, 0.85);
  --stitch-color-letter: rgba(28, 18, 12, 0.85);
  /* 縫い目の下のごく薄い溝（糸の並びを1本の縫い線にまとめる） */
  --stitch-groove: rgba(0, 0, 0, 0.06);
  /* 革の裁断面（コバ） */
  --leather-edge: rgba(25, 15, 10, 0.38);
  position: relative;
  width: 92%;
  aspect-ratio: 1.45 / 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* 本体の最外周：革の裁断面（コバ）の細い濃色ライン */
.sim .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 max(0.5px, 0.14cqw) var(--leather-edge);
  pointer-events: none;
}

/* 本体の革：1000×1000 の画像の横幅をそのままカバーの横幅に当て（引き伸ばし・繰り返しなし）、
   高さ方向だけ中央で切り出す（カバー 1.45:1 → 1000×約690 の範囲）。
   シボの大きさは元画像のまま、完成イメージ全体の縮小率だけで小さくなる */
.sim .cover-body {
  position: absolute;
  inset: 0;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* 中央の折り目（簡易表現） */
.sim .cover-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 12%;
  transform: translateX(-50%);
  /* 実物の折り筋：深い谷や黒い線ではなく、中央がやわらかく少し明るい帯になり、
     その左右にごく弱い陰影がある程度。革のテクスチャは透けて見えたまま */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.03) 24%,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 0.05) 43%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.05) 57%,
    rgba(255, 255, 255, 0) 64%,
    rgba(0, 0, 0, 0.03) 76%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* 丸台座：中心座標(--base-x, --base-y)、直径 --base-size（すべてカバー幅/高さに対する%） */
.sim .cover-base {
  position: absolute;
  left: var(--base-x);
  top: var(--base-y);
  width: var(--base-size);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* 本体と同じ倍率：革画像の横幅をカバーの横幅（100cqw）に合わせ、
     その中央部分を円形に切り抜いて見せる（同じ革を同じ距離から見ている状態） */
  background-size: 100cqw auto;
  background-position: center center;
  background-repeat: no-repeat;
  /* 1つ目：円の外周の革端（コバ） / 2つ目：影 */
  box-shadow:
    inset 0 0 0 max(0.5px, 0.14cqw) var(--leather-edge),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 文字：事前計算した文字の形（SVG の clipPath）でクロコ画像を切り抜く
   --letter-size と --letter-shift-* は JS が文字ごとに計算する
   （文字部分の中心を (--letter-x, --letter-y) に合わせる） */
.sim .cover-letter {
  display: block;
  position: absolute;
  /* --letter-dx / --letter-dy：JS の LETTER_ADJUST による文字別の位置調整 */
  left: calc(var(--letter-x) + var(--letter-dx, 0cqw));
  top: calc(var(--letter-y) + var(--letter-dy, 0cqw));
  width: var(--letter-size);
  aspect-ratio: 1 / 1;
  transform: translate(
    calc(-50% + var(--letter-shift-x, 0%)),
    calc(-50% + var(--letter-shift-y, 0%))
  );
  overflow: visible;
  visibility: hidden; /* 大きさの計算が終わるまで隠す */
}

/* ---------- ステッチ ---------- */

.sim .stitch {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  /* 糸のわずかな立体感：糸の下側にごく薄い影 */
  filter: drop-shadow(0 0.5px 0 rgba(0, 0, 0, 0.28));
}

.sim .stitch-body { --stitch-color: var(--stitch-color-body); }
.sim .stitch-base { --stitch-color: var(--stitch-color-base); }
.sim .stitch-letter { --stitch-color: var(--stitch-color-letter); }

/* 縫い目：短い直線の糸を並べる（端は butt で丸めない） */
.sim .stitch-line {
  fill: none;
  stroke: var(--stitch-color);
  stroke-width: var(--stitch-width);
  stroke-dasharray: var(--stitch-dash) var(--stitch-gap);
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke; /* 太さ・ピッチを画面上の大きさで揃える */
}

/* 縫い目の下の薄い溝：糸と糸の間もつながって見え、遠目に細い縫い線になる */
.sim .stitch-groove {
  fill: none;
  stroke: var(--stitch-groove);
  stroke-width: calc(var(--stitch-width) * 1.6);
  vector-effect: non-scaling-stroke;
}

/* 本体：外周の革端から約0.8%内側（PCで約4.5px）。四辺のみ */
.sim .stitch-body {
  --inset: 0.78cqw;
  left: var(--inset);
  top: var(--inset);
  width: calc(100% - var(--inset) * 2);
  height: calc(100% - var(--inset) * 2);
}

.sim .stitch-body rect {
  width: 100%;
  height: 100%;
  rx: 0.2cqw;
}

/* 丸台座：円の革端から約0.6%内側（PCで約3.5px）。丸台座と一緒に動く */
.sim .stitch-base {
  inset: 0;
  width: 100%;
  height: 100%;
}

.sim .stitch-base circle {
  r: calc(50% - 0.6cqw);
}

/* ---------- 選択中の内容 ---------- */

/* 選択中の内容：完成イメージの下に、横幅いっぱいの罫線ボックスで表示 */
.sim .summary {
  margin-top: 32px;
  background: #fff;
  border: 1px solid #e5e5e5;
}

.sim .summary-info {
  padding: 18px 24px;
}

.sim .summary-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sim .summary-list {
  margin: 0;
}

.sim .summary-row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.6;
}

.sim .summary-row dt {
  color: #777;
}

.sim .summary-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- 操作 ---------- */

.sim .control-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* 01〜05 の各項目：細いグレー罫線で区切る */
.sim .control-group {
  padding: 28px 0;
  border-top: 1px solid #e5e5e5;
}

.sim .control-group:first-child {
  padding-top: 0;
  border-top: 0;
}

/* 見出し（番号＋項目名）と説明文を横に並べる（01・02） */
.sim .control-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 16px;
}

.sim .control-head .control-title {
  margin: 0;
}

.sim .control-num {
  margin-right: 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sim .control-desc {
  margin: 0;
  font-size: 12px;
  color: #999;
}

/* カラー選択：実画像のサムネイル＋色名
   色名はボタンの title（JS で設定済み）を ::after で表示している */
.sim .swatches {
  --swatch-size: 56px;
  --swatch-active: #8a6d4f; /* 選択中の枠：ブラウン */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 30px 6px; /* 縦の間隔は色名の分 */
  justify-items: center;
  padding-bottom: 24px; /* 最後の行の色名の分 */
}

.sim .swatches--round {
  --swatch-size: 48px;
}

.sim .swatch {
  position: relative;
  width: var(--swatch-size);
  height: var(--swatch-size);
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px #e0e0e0;
  cursor: pointer;
}

.sim .swatch::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1.3;
  color: #555;
  white-space: nowrap;
}

/* 選択中：外側に白いすき間＋細いブラウンの枠 */
.sim .swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--swatch-active);
}

.sim .swatch.is-active::after {
  color: #222;
  font-weight: 600;
}

/* 丸台座：円形の色見本 */
.sim .swatches--round .swatch {
  border-radius: 50%;
}

/* 文字 A〜Z：白背景＋細いグレー罫線のコンパクトなグリッド */
.sim .letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
}

.sim .letter-btn {
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  color: #222;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
}

.sim .letter-btn:hover {
  border-color: #b9a58f;
}

/* 選択中：薄いベージュ背景＋細いブラウン枠 */
.sim .letter-btn.is-active {
  background: #f6efe6;
  border-color: #8a6d4f;
  font-weight: 600;
}

/* 文字のカラー（クロコ）：横長サムネイル＋表示名（PCで5列×2段） */
.sim .croc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 18px 14px;
}

.sim .croc-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: #555;
  background: none;
  border: 0;
  cursor: pointer;
}

.sim .croc-thumb {
  display: block;
  margin: 3px 3px 0; /* 選択枠の分 */
  aspect-ratio: 2 / 1;
  border-radius: 2px;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px #e0e0e0;
}

/* 選択中：外側に白いすき間＋細いブラウンの枠（01・02と同じ） */
.sim .croc-btn.is-active .croc-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #8a6d4f;
}

.sim .croc-btn.is-active .croc-name {
  color: #222;
  font-weight: 600;
}

.sim .croc-name {
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all; /* 長い名前は「・」の位置で折り返す */
  overflow-wrap: anywhere; /* それでも入らない場合の保険 */
}

/* 05 本の綴じ方：ラジオマーク＋名前＋開く向きの説明（2列） */
.sim .binding-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.sim .binding-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  color: #222;
  text-align: left;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
}

.sim .binding-btn:hover {
  border-color: #b9a58f;
}

/* 選択中：薄いベージュ背景＋細いブラウン枠（03と同じ） */
.sim .binding-btn.is-active {
  background: #f6efe6;
  border-color: #8a6d4f;
}

/* ラジオマーク：未選択は白い○、選択中は○の中にブラウンの● */
.sim .binding-radio {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #bbb;
  border-radius: 50%;
  background: #fff;
}

.sim .binding-btn.is-active .binding-radio {
  border-color: #8a6d4f;
}

.sim .binding-btn.is-active .binding-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #8a6d4f;
}

.sim .binding-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sim .binding-name {
  font-size: 15px;
  font-weight: 600;
}

.sim .binding-note {
  font-size: 12px;
  color: #666;
}

/* ---------- スマホ：1カラム ---------- */

@media (max-width: 767px) {
  .sim {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 16px 16px 48px;
  }

  .sim .summary {
    margin-top: 24px;
  }

  .sim .summary-info {
    padding: 16px;
  }

  .sim .control-group {
    padding: 24px 0;
  }

  /* 完成イメージの影：白枠の下余白（約20px）に収まるよう短くする（下方向 約19px）。
     短くした分、濃さを少しだけ上げて弱く見えないようにする */
  .sim .cover {
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
  }

  /* 綴じ方：横2列だと説明文が途中で折り返して窮屈なため、縦2段にする */
  .sim .binding-buttons {
    grid-template-columns: 1fr;
  }

  /* クロコ：スマホでは3列程度 */
  .sim .croc-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}

/* ==========================================================
   ページ上部の説明（シミュレーターの直前に置く .sim-intro）
   ショップのページやシミュレーター本体に影響しないよう、
   すべて .sim-intro の中だけに効かせる
   ========================================================== */

.sim-intro,
.sim-intro *,
.sim-intro *::before,
.sim-intro *::after {
  box-sizing: border-box;
}

.sim-intro {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px 8px;
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #222;
  background: #fff;
  text-align: center;
}

.sim-intro .sim-intro-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #8a6d4f;
}

.sim-intro .sim-intro-title {
  margin: 0 0 24px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #222;
}

.sim-intro .sim-intro-lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: 15px;
  line-height: 2;
  color: #444;
}

/* 使い方 */
.sim-intro .sim-howto {
  margin: 48px 0 0;
  padding: 40px 40px 32px;
  background: #f8f5f0; /* 薄いベージュ */
  text-align: left;
}

.sim-intro .sim-howto-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #8a6d4f;
  text-align: center;
}

.sim-intro .sim-howto-title {
  margin: 0 0 32px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: #222;
}

.sim-intro .sim-howto-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-intro .sim-howto-step {
  margin: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid #e8e1d8;
}

.sim-intro .sim-howto-num {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #222;
}

.sim-intro .sim-howto-step-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #222;
}

.sim-intro .sim-howto-step-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #555;
}

.sim-intro .sim-howto-note {
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: #444;
  text-align: center;
}

/* 注意書き */
.sim-intro .sim-intro-notes {
  margin: 28px auto 0;
  padding: 0;
  max-width: 760px;
  list-style: none;
  text-align: left;
}

.sim-intro .sim-intro-notes li {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 12px;
  line-height: 2;
  color: #777;
}

/* タブレット：使い方は縦並び */
@media (max-width: 1099px) {
  .sim-intro .sim-howto-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* スマホ */
@media (max-width: 767px) {
  .sim-intro {
    padding: 40px 16px 0;
  }

  .sim-intro .sim-intro-title {
    margin-bottom: 18px;
    font-size: 19px;
    letter-spacing: 0.04em;
  }

  .sim-intro .sim-intro-lead {
    font-size: 14px;
    text-align: left;
  }

  .sim-intro .sim-howto {
    margin-top: 32px;
    padding: 28px 16px 24px;
  }

  .sim-intro .sim-howto-title {
    margin-bottom: 20px;
  }

  .sim-intro .sim-howto-step {
    padding: 18px 16px;
  }

  .sim-intro .sim-howto-note {
    text-align: left;
  }
}