/* ============================================================
   料金シミュレーターページ固有CSS — simulator.html
   （共通分は common/css/common.css を参照。色・角丸・影は既存トークンのみ）
   ============================================================ */
main [id]{ scroll-margin-top:100px; }

/* ============================================================
   sections（price.css / results.css と同じ定義を踏襲）
   ============================================================ */
.sec{ padding:clamp(56px, 8vw, 96px) 0; }
.sec--paper{ background:var(--paper); }
.sec--cream{ background:var(--cream); }

.sim{ max-width:760px; margin-inline:auto; }
.sim [hidden]{ display:none; }

/* ---------- JS無効時 ---------- */
.sim-noscript{
  background:var(--tan-pale);
  border:2px solid var(--ink);
  border-radius:18px;
  padding:24px clamp(20px, 3vw, 30px);
  display:grid;
  justify-items:start;
  gap:16px;
}
.sim-noscript p{ font-size:.95rem; }

/* ============================================================
   質問
   ============================================================ */
.sim-q{ animation:simIn .5s var(--ease-pop) both; }
.sim-q[hidden]{ display:none; }

@keyframes simIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.sim-qno{
  display:flex;
  align-items:center;
  gap:.9em;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--tan-deep);
  margin-bottom:12px;
}
.sim-qno .num{ font-feature-settings:"tnum" 1; }
.sim-multi{
  letter-spacing:.06em;
  color:var(--sky-deep);
  background:var(--sky-pale);
  border-radius:999px;
  padding:3px 12px;
}

.sim-qt{
  font-size:clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight:900;
  line-height:1.5;
}
.sim-qt:focus{ outline:none; }
.sim-qt:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:4px;
  border-radius:6px;
}
.sim-qlead{
  margin-top:12px;
  color:var(--ink-soft);
  font-size:.95rem;
  word-break:auto-phrase;
}

/* ---------- 選択肢 ---------- */
.sim-choices{
  list-style:none;
  margin-top:clamp(22px, 3vw, 30px);
  display:grid;
  gap:12px;
}
.sim-choice{
  width:100%;
  display:grid;
  gap:5px;
  text-align:left;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow:0 3px 0 var(--ink);
  padding:18px clamp(18px, 2.5vw, 24px);
  cursor:pointer;
  transition:transform .25s var(--ease-pop), box-shadow .25s var(--ease-pop), background .25s;
}
.sim-choice:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 0 var(--ink);
  background:var(--tan-pale);
}
.sim-choice:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--ink);
}
.sim-choice--soft{
  background:var(--cream);
  border-style:dashed;
}
.sim-choice--soft:hover{ background:var(--tan-pale); }

.sim-c-label{
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.02em;
}
.sim-c-note{
  font-size:.86rem;
  font-weight:500;
  color:var(--ink-soft);
  line-height:1.75;
  word-break:auto-phrase;
}

/* ---------- 複数選択（Q4） ---------- */
.sim-choices--multi .sim-choice{
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:4px 14px;
}
.sim-c-check{
  grid-row:1 / span 2;
  width:24px;
  height:24px;
  margin-top:2px;
  border:2px solid var(--ink);
  border-radius:7px;
  background:var(--paper);
  position:relative;
}
.sim-choice.is-on{ background:var(--tan-pale); }
.sim-choice.is-on .sim-c-check{ background:var(--tangerine); }
.sim-choice.is-on .sim-c-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:6px;
  height:12px;
  border:solid var(--ink);
  border-width:0 3px 3px 0;
  transform:rotate(42deg);
}
.sim-choices--multi .sim-c-label,
.sim-choices--multi .sim-c-note{ grid-column:2; }

.sim-q-foot{
  margin-top:clamp(24px, 3vw, 32px);
  display:flex;
  justify-content:center;
}

/* ---------- 戻る ---------- */
.sim-nav{
  margin-top:24px;
  display:flex;
}
.sim button.tlink{
  background:none;
  border:0;
  padding:0;
  font-family:inherit;
  font-size:.92rem;
  cursor:pointer;
}

/* ============================================================
   結果
   ============================================================ */
.sim-result{ animation:simIn .5s var(--ease-pop) both; }
.sim-result[hidden]{ display:none; }
.sim-result-t{ font-size:clamp(1.6rem, 3.4vw, 2.4rem); }
.sim-result-t:focus{ outline:none; }
.sim-result-t:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:4px;
  border-radius:6px;
}

.sim-main{ margin-top:clamp(26px, 4vw, 36px); }

.sim-main-card{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(24px, 4vw, 36px);
  display:grid;
  gap:8px;
}
.sim-main-card--ask,
.sim-main-card--consult{ background:var(--sky-pale); }

.sim-main-name{
  font-size:1.02rem;
  font-weight:900;
}
.sim-main-price{
  font-size:clamp(1.7rem, 5.5vw, 2.6rem);
  font-weight:900;
  line-height:1.35;
  color:var(--tan-deep);
  font-feature-settings:"tnum" 1;
  overflow-wrap:anywhere;
}
.sim-main-note{
  font-size:.9rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}

.sim-group-lead{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:14px;
}

.sim-assumed{
  margin-top:18px;
  background:var(--sky-pale);
  border-radius:14px;
  padding:14px 18px;
  font-size:.88rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}

/* ---------- 追加オプション／公開後 ---------- */
.sim-extra{
  margin-top:clamp(26px, 4vw, 36px);
  background:var(--paper);
  border:2px dashed var(--dash);
  border-radius:18px;
  padding:clamp(20px, 3vw, 28px);
}
.sim-extra-t{
  font-size:.95rem;
  font-weight:900;
  letter-spacing:.06em;
  color:var(--sky-deep);
  margin-bottom:6px;
}
.sim-extra-foot{
  margin-top:12px;
  font-size:.86rem;
  color:var(--ink-soft);
}

.sim-rows{ list-style:none; }
.sim-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 18px;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.sim-row:first-child{ border-top:0; padding-top:6px; }
.sim-row:last-child{ padding-bottom:0; }
.sim-row-name{ font-weight:900; font-size:.95rem; }
.sim-row-price{
  font-weight:900;
  color:var(--tan-deep);
  font-size:.95rem;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
  text-align:right;
}
.sim-row-note{
  grid-column:1 / -1;
  font-size:.86rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}

/* ---------- 合計を出さない・約束にしない ---------- */
.sim-nototal{
  margin-top:clamp(26px, 4vw, 36px);
  font-size:.95rem;
  font-weight:700;
  word-break:auto-phrase;
}
.sim-promise{
  margin-top:14px;
  font-size:.9rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}

/* ---------- 注記（price.css の .price-notes と同じ見た目） ---------- */
.sim-notes{
  margin-top:clamp(26px, 4vw, 36px);
  background:var(--tan-pale);
  border-radius:18px;
  padding:22px clamp(20px, 3vw, 32px);
  display:grid;
  gap:8px;
}
.sim-notes p{
  font-size:.9rem;
  padding-left:1.3em;
  position:relative;
  word-break:auto-phrase;
}
.sim-notes p::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--tangerine);
}

/* ---------- 結果のCTA ---------- */
.sim-cta{
  margin-top:clamp(30px, 4vw, 44px);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(26px, 4vw, 38px);
  display:grid;
  justify-items:start;
  gap:12px;
}
.sim-cta-t{ font-size:clamp(1.2rem, 2.6vw, 1.5rem); }
.sim-cta p{
  font-size:.95rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}
.sim-cta .btn{ margin-top:10px; }

/* ---------- 実績 ---------- */
.sim-works{
  margin-top:clamp(30px, 4vw, 44px);
  display:grid;
  justify-items:start;
  gap:14px;
}
.sim-works-t{ font-size:1.05rem; }
.sim-works-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.sim-work{
  background:var(--sky-pale);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:7px 18px;
  font-size:.88rem;
  font-weight:700;
}

/* ---------- やり直し ---------- */
.sim-redo{
  margin-top:clamp(26px, 4vw, 36px);
  display:flex;
  justify-content:center;
}

/* ---------- 料金表への導線（JS無効でも見える） ---------- */
.sim-foot{
  margin-top:clamp(36px, 5vw, 52px);
  padding-top:clamp(24px, 3vw, 32px);
  border-top:2px dashed var(--dash);
  display:flex;
  flex-wrap:wrap;
  gap:8px 36px;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:768px){
  .sim-row{ grid-template-columns:1fr; }
  .sim-row-price{ text-align:left; white-space:normal; }
}

@media (max-width:480px){
  .sim-choice{ padding:16px 16px; }
  .sim-c-label{ font-size:.98rem; }
  .sim-q-foot .btn{ width:100%; }
  .sim-cta .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .sim-q,
  .sim-result{ animation:none; }
  .sim-choice{ transition:none; }
}