@charset "UTF-8";
/*
 * tool-sim.css
 * 無料ツール（2026-09）
 *   対象: /tools/order-labor-cost-simulator/
 * doc-open.css のトークンと版面（.p-docOpen__inner）に乗せる前提の追加分。
 * 主指標が「モバイルでの資料DL件数」なので、入力はすべてスライダーと
 * チップにして、ソフトキーボードを一度も出さない構成にしている。
 */

/* ==========================================================================
   入力フォーム
   ========================================================================== */
.p-simForm {
  margin-top: 24px;
  padding: 20px 16px;
  border: 1px solid var(--docOpen-line);
  border-radius: 12px;
  background: #fff;
}

.p-simField + .p-simField {
  margin-top: 24px;
}

/* PCでは箱の右端をページの版面（1040px）に揃えるのがこのページ群の作法だが、
   スライダーを1040px幅で引き伸ばすと動かしにくい。箱の幅は揃えたまま、
   中身を2列にして1本あたりの長さを抑える。 */
@media screen and (min-width: 768px) {
  .p-simForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 44px;
    padding: 28px 32px;
  }

  .p-simForm > .p-simField.-biz,
  .p-simForm > .p-simDetails {
    grid-column: 1 / -1;
  }

  .p-simForm > .p-simField + .p-simField {
    margin-top: 0;
  }

  .p-simDetails__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 44px;
  }

  .p-simDetails__body > .p-simField + .p-simField {
    margin-top: 0;
  }

  .p-simDetails__body > .p-simDetails__reset {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

.p-simField__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  line-height: 1.5;
}

.p-simField__value {
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--docOpen-txt);
}

.p-simField__value b {
  margin-right: 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--docOpen-primary);
}

.p-simField__hint {
  margin-top: 6px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #5a6a72;
}

.p-simField__hint b {
  font-weight: 700;
  color: var(--docOpen-navy);
}

.p-simField__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 1.1rem;
  color: #7c8b91;
}

/* 業態チップ ------------------------------------------------------------- */
.p-simField.-biz {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--docOpen-line);
}

.p-simChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.p-simChip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

/* 見た目はチップだが実体はラジオ。キーボード操作を壊さないよう、
   input は隠さずに透明にして重ねている */
.p-simChip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* 指で押す前提なので、高さは42px確保する（親指のタップ目標に寄せる） */
.p-simChip__txt {
  display: block;
  padding: 11px 16px;
  border: 1px solid var(--docOpen-line);
  border-radius: 999px;
  background: #fff;
  font-size: 1.3rem;
  font-weight: 500;
  color: #4a656f;
  transition: background-color .15s, border-color .15s, color .15s;
}

.p-simChip input:checked + .p-simChip__txt {
  border-color: var(--docOpen-primary);
  background: var(--docOpen-primary);
  color: #fff;
  font-weight: 700;
}

.p-simChip input:focus-visible + .p-simChip__txt {
  outline: 2px solid var(--docOpen-navy);
  outline-offset: 2px;
}

/* スライダー ------------------------------------------------------------- */
/* 指で動かす前提なので、つまみは 28px（Appleのタップ目標44pxに対し、
   トラック上下の余白を含めて確保している） */
.p-simRange {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.p-simRange::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #e2edef;
}

.p-simRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--docOpen-primary);
  box-shadow: 0 1px 4px rgba(18, 59, 94, .3);
}

.p-simRange::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #e2edef;
}

.p-simRange::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--docOpen-primary);
  box-shadow: 0 1px 4px rgba(18, 59, 94, .3);
}

.p-simRange:focus-visible {
  outline: 2px solid var(--docOpen-navy);
  outline-offset: 2px;
}

/* 詳細設定 --------------------------------------------------------------- */
.p-simDetails {
  margin-top: 24px;
  border-top: 1px dashed var(--docOpen-line);
}

.p-simDetails__summary {
  padding: 16px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  cursor: pointer;
}

.p-simDetails__body {
  padding-top: 20px;
}

.p-simDetails__reset {
  display: block;
  margin: 24px auto 0;
  padding: 8px 20px;
  border: 1px solid var(--docOpen-line);
  border-radius: 999px;
  background: #fff;
  font-size: 1.2rem;
  color: #5a6a72;
  cursor: pointer;
}

/* 時給フィールドの中に入れて、時給に付随する設定であることを見た目でも示す */
.p-simCheck {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--docOpen-line);
  cursor: pointer;
}

.p-simCheck input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--docOpen-primary);
}

.p-simCheck__txt {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--docOpen-txt);
}

/* ==========================================================================
   結果：現状値
   この画面で一番大きく出すのは削減額ではなく「いまかかっている額」。
   入力者自身の数値なので断定でき、優良誤認の懸念も生じない。
   ========================================================================== */
.p-simNow {
  padding: 24px 20px;
  border: 2px solid var(--docOpen-navy);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.p-simNow__badge {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--docOpen-navy);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.p-simNow__hdg {
  margin-top: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  line-height: 1.5;
}

.p-simNow__main {
  margin-top: 8px;
  color: var(--docOpen-navy);
}

.p-simNow__num {
  font-family: "Montserrat", sans-serif;
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.p-simNow__unit {
  margin-left: 4px;
  font-size: 1.6rem;
  font-weight: 700;
}

.p-simNow__sub {
  margin-top: 8px;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--docOpen-txt);
}

.p-simNow__sub b {
  font-family: "Montserrat", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--docOpen-navy);
}

.p-simNow__note {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #5a6a72;
}

@media screen and (min-width: 768px) {
  .p-simNow {
    padding: 32px 40px;
  }

  .p-simNow__num {
    font-size: 6.4rem;
  }
}

/* ==========================================================================
   結果：置き換えられる範囲（レンジ）
   ========================================================================== */
.p-simSaved {
  margin-top: 16px;
  padding: 24px 20px;
  border: 1px solid #cfe9e3;
  border-radius: 12px;
  background: #f2fbf9;
  text-align: center;
}

.p-simSaved__hdg {
  font-size: 1.4rem;
  font-weight: 700;
  color: #12866f;
  line-height: 1.5;
}

.p-simSaved__main {
  margin-top: 6px;
  color: #12866f;
}

.p-simSaved__num {
  font-family: "Montserrat", sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.15;
}

.p-simSaved__tilde {
  margin: 0 6px;
  font-size: 2.2rem;
  font-weight: 500;
}

.p-simSaved__unit {
  margin-left: 4px;
  font-size: 1.5rem;
  font-weight: 700;
}

.p-simSaved__sub {
  margin-top: 6px;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #17806f;
}

.p-simSaved__sub b {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
}

/* 注記は打消し表示ではなく本文と同じ可読性で置く。
   小さくすると、それ自体が優良誤認を疑われる要素になる */
.p-simSaved__disclaimer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #cfe9e3;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #4a656f;
  text-align: left;
}

.p-simSaved__disclaimer b {
  font-weight: 700;
  color: #c2402c;
}

@media screen and (min-width: 768px) {
  .p-simSaved {
    padding: 28px 40px;
  }

  .p-simSaved__num {
    font-size: 4.8rem;
  }

  .p-simSaved__disclaimer {
    text-align: center;
  }
}

/* ==========================================================================
   結果：作業ごとの内訳
   ========================================================================== */
.p-simBreakdown {
  margin-top: 24px;
}

.p-simBreakdown__hdg {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--docOpen-navy);
}

/* 表は横に伸びるので、はみ出しはページ全体ではなく表の中で処理する */
.p-simBreakdown__scroll {
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-simBreakdown__note {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #5a6a72;
}

.p-simTable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 1.3rem;
  background: #fff;
}

.p-simTable th,
.p-simTable td {
  padding: 10px 12px;
  border: 1px solid var(--docOpen-line);
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.p-simTable thead th {
  background: var(--docOpen-bg);
  font-weight: 700;
  color: var(--docOpen-navy);
  white-space: nowrap;
}

.p-simTable tbody th,
.p-simTable tfoot th {
  font-weight: 700;
  color: var(--docOpen-navy);
  white-space: nowrap;
}

.p-simTable tfoot th,
.p-simTable tfoot td {
  background: var(--docOpen-bg);
  font-weight: 700;
}

.p-simTable__num {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

/* 現状値に対する各作業の割合。数字だけでは大小がつかみにくいため添える */
.p-simTable__bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: #e2edef;
}

.p-simTable__barFill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--docOpen-primary);
}

/* ==========================================================================
   引用（導入店の言葉）
   ========================================================================== */
.p-simQuote {
  margin: 24px 0 0;
  padding: 20px;
  border-left: 4px solid var(--docOpen-primary);
  background: var(--docOpen-bg);
}

.p-simQuote__txt {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--docOpen-navy);
}

.p-simQuote__from {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #5a6a72;
}

.p-simQuote__link {
  margin-left: 10px;
  color: #12866f;
  text-decoration: underline;
}

/* ==========================================================================
   浮いた時間の使い道（3パターン）
   ========================================================================== */
.p-simUse {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 768px) {
  .p-simUse {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-simUse__item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--docOpen-line);
  border-radius: 12px;
  background: #fff;
}

.p-simUse__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--docOpen-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.p-simUse__hdg {
  margin-top: 12px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  line-height: 1.4;
}

.p-simUse__txt {
  margin-top: 8px;
  font-size: 1.3rem;
  line-height: 1.8;
}

.p-simUse__case {
  margin-top: auto;
  padding-top: 14px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #5a6a72;
}

.p-simUse__case b {
  font-weight: 700;
  color: #12866f;
}

.p-simUse__link {
  display: block;
  margin-top: 6px;
  color: #12866f;
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================================================================
   席数が近い事例
   ========================================================================== */
.p-simCases {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 768px) {
  .p-simCases {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-simCase__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--docOpen-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}

.p-simCase__link:hover,
.p-simCase__link:focus-visible {
  border-color: var(--docOpen-primary);
  box-shadow: 0 2px 10px rgba(18, 59, 94, .08);
}

.p-simCase__seats {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--docOpen-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--docOpen-navy);
}

.p-simCase__name {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  line-height: 1.5;
}

.p-simCase__biz {
  margin-top: 2px;
  font-size: 1.2rem;
  color: #7c8b91;
}

.p-simCase__metric {
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  color: #12866f;
}

.p-simCase__action {
  margin-top: auto;
  padding-top: 12px;
  font-size: 1.2rem;
  color: #5a6a72;
  text-decoration: underline;
}

/* ==========================================================================
   計算方法（AI検索・検索エンジンに読ませる本文。折りたたまない）
   ========================================================================== */
.p-simH3 {
  margin-top: 32px;
  padding-left: 12px;
  border-left: 4px solid var(--docOpen-primary);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  line-height: 1.4;
}

.p-simText {
  margin-top: 12px;
  font-size: 1.4rem;
  line-height: 1.9;
}

.p-simFormula {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--docOpen-line);
  border-radius: 10px;
  background: var(--docOpen-bg);
}

.p-simFormula__line {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--docOpen-navy);
}

.p-simFormula__line + .p-simFormula__line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #cfe0e4;
}

.p-simExample,
.p-simNotes {
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.p-simExample__item,
.p-simNotes__item {
  position: relative;
  padding-left: 18px;
  font-size: 1.35rem;
  line-height: 1.9;
}

.p-simExample__item + .p-simExample__item,
.p-simNotes__item + .p-simNotes__item {
  margin-top: 6px;
}

.p-simExample__item::before,
.p-simNotes__item::before {
  content: "";
  position: absolute;
  top: .85em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--docOpen-primary);
}

.p-simExample__item b {
  font-weight: 700;
  color: var(--docOpen-navy);
}

/* ==========================================================================
   下部固定バー（doc-open.css の .p-checkBar を流用しつつ、
   金額は桁が多いので数字部分だけ調整する）
   ========================================================================== */
.p-simPage .p-checkBar__num {
  font-family: "Montserrat", sans-serif;
}

/* ==========================================================================
   印刷
   ========================================================================== */
@media print {
  .p-simForm,
  .p-simUse__link,
  .p-simCase__action {
    break-inside: avoid;
  }

  .p-simRange,
  .p-simDetails__reset {
    display: none;
  }
}

/* ==========================================================================
   前回入力の復元
   黙って値が入っていると「初期値」と誤解されるため、必ず明示する
   ========================================================================== */
.p-simRestored {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 20px;
  padding: 10px 14px;
  border: 1px solid #f6efdb;
  border-radius: 8px;
  background: #fdf8e9;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #6b5a2a;
}

.p-simRestored__reset {
  padding: 4px 12px;
  border: 1px solid #e2d6ae;
  border-radius: 999px;
  background: #fff;
  font-size: 1.2rem;
  color: #6b5a2a;
  cursor: pointer;
}

/* 中央寄せの見出しは、文字数によって末尾1文字だけが次行に落ちる。
   意味のかたまりを inline-block にして、そこで折り返させる */
.p-simNow__hdgUnit {
  display: inline-block;
}

/* 表の3列目（置き換えられる範囲）はスマホでは見切れる。
   スクロールできることが分からないと、一番見たい列に気づかれない */
.p-simScrollHint {
  margin-top: 6px;
  font-size: 1.1rem;
  color: #7c8b91;
}

.p-simScrollHint::before {
  content: "→ ";
}

@media screen and (min-width: 768px) {
  .p-simScrollHint {
    display: none;
  }
}

/* ==========================================================================
   /tools/ 専用ヘッダー
   サービスサイト共通ヘッダー（ロゴ＋資料請求CTA＋グローバルナビ）は使わない。
   「登録不要・製品を問わず使える」ページの最上部に資料請求CTAがあると、
   ページの主張と見た目が矛盾する。運営元は "by poscube" で明示して隠さない。
   ========================================================================== */
.p-toolHeader {
  border-bottom: 1px solid var(--docOpen-line);
  background: #fff;
}

.p-toolHeader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1080px;
  min-height: 56px;
  margin: 0 auto;
  padding: 8px 20px;
}

.p-toolHeader__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.p-toolHeader__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--docOpen-navy);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.p-toolHeader__by {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #7c8b91;
}

/* ロゴは 132x78 の縦長。高さ基準で置いて、文字と光学的に揃える */
.p-toolHeader__logo {
  display: block;
  width: auto;
  height: 26px;
}

.p-toolHeader__site {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #4a656f;
  text-decoration: none;
}

.p-toolHeader__site::after {
  content: " →";
  color: #9fb0b7;
}

.p-toolHeader__site:hover,
.p-toolHeader__site:focus-visible {
  color: #12866f;
  text-decoration: underline;
}

/* スマホでは名乗り＋ロゴだけにする。390px幅では両方を1行に収めると
   ロゴを縮めるしかなく、かえって読めなくなる。サイトへの戻り導線は
   すぐ下のパンくず（TOP）とフッターが担っているので、ここは落として良い。 */
@media screen and (max-width: 767px) {
  .p-toolHeader__site {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .p-toolHeader__inner {
    min-height: 64px;
  }

  .p-toolHeader__name {
    font-size: 1.6rem;
  }

  .p-toolHeader__logo {
    height: 30px;
  }

  .p-toolHeader__site {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   /tools/ の KV
   共通KVは緑のグラデーション帯（linear-gradient(90deg,#e9ffbe,#ebfffc)）＋
   パーセント指定の大きな余白（スマホは上30.59%）で、サービスサイトの顔になっている。
   ツールのページでは、ここを白地に落として緑はアクセント1点に絞る。
   main.min.css はビルド生成物なので触らず、.p-simPage でスコープして上書きする。
   （.p-simPage .foo は .foo より詳細度が高いので、メディアクエリ内の指定にも勝つ）
   ========================================================================== */
.p-simPage .l-section-lowerKv {
  background: #fff;
  border-bottom: 1px solid var(--docOpen-line);
}

.p-simPage .l-section-lowerKv__inner {
  padding: 32px 20px 26px;
}

/* 白地では半透明白のピルが消えるので、淡いミントのチップに置き換える。
   #12866f / #eafaf6 は本文でも使っている組み合わせでコントラスト比が足りている */
.p-simPage .p-docOpenKv .c-hdg-kv__enTxt {
  background: #eafaf6;
  color: #12866f;
}

@media screen and (min-width: 768px) {
  .p-simPage .l-section-lowerKv__inner {
    padding: 56px 20px 44px;
  }
}

/* ==========================================================================
   /tools/ のパンくず
   サイト共通では .c-breadcrumb がスマホで display:none になっている。
   ツールのページはヘッダーからグローバルナビと公式サイトリンクを外しているため、
   ここを出さないと「スマホからサイトへ戻る導線がフッターだけ」になってしまう。
   事例詳細（.l-section-caseStudyDetailBreadcrumb）に同じ扱いの先例がある。
   区切りの矢印は共通指定がPC側のメディアクエリ内にあるため、ここで持ち直す。
   ========================================================================== */
/* 共通の .l-section-breadcrumb は padding:0 20px がPC側のメディアクエリ内にあり、
   スマホでは padding:0 になっている（普段は非表示なので露見しない）。
   本文（.p-docOpen__inner）の 20px に揃えないと、パンくずだけ画面端に貼り付く。 */
.p-simPage .l-section-breadcrumb {
  padding: 0 20px;
}

.p-simPage .c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  font-size: 1.2rem;
  line-height: 1.8;
}

.p-simPage .c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-simPage .c-breadcrumb__item::after {
  display: inline-block;
  content: "";
  width: 7px;
  height: 10px;
  background: url(/assets/img/icon/ico-arrow-bk.svg) no-repeat center;
  background-size: contain;
}

.p-simPage .c-breadcrumb__item:last-child::after {
  display: none;
}

@media screen and (min-width: 768px) {
  .p-simPage .c-breadcrumb {
    gap: 12px;
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   /tools/ 専用フッター
   共通フッターの問い合わせCTAエリアとバナー3枚は載せない。ヘッダーから
   資料請求CTAを外した意図が、フッターの売り込みで打ち消されるため。
   代わりに運営元の表示は共通フッターより厚くしている。
   ========================================================================== */
.p-toolFooter {
  border-top: 1px solid var(--docOpen-line);
  background: var(--docOpen-bg);
}

.p-toolFooter__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 20px 30px;
}

/* 「誰が作った道具か」を最初に読ませる。中立に見せるために運営元をぼかすのではなく、
   明示することが信頼の担保になるので、本文と同じ可読性で置く */
.p-toolFooter__operator {
  font-size: 1.2rem;
  line-height: 1.9;
  color: #4a656f;
}

.p-toolFooter__operator a {
  color: #12866f;
  text-decoration: underline;
}

.p-toolFooter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.p-toolFooter__linkItem a {
  font-size: 1.2rem;
  color: #4a656f;
  text-decoration: none;
}

.p-toolFooter__linkItem a:hover,
.p-toolFooter__linkItem a:focus-visible {
  color: #12866f;
  text-decoration: underline;
}

.p-toolFooter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--docOpen-line);
}

.p-toolFooter__logo {
  display: block;
  width: auto;
  height: 22px;
}

.p-toolFooter__copy {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  color: #7c8b91;
}

@media screen and (min-width: 768px) {
  .p-toolFooter__inner {
    padding: 32px 20px 36px;
  }

  .p-toolFooter__operator {
    font-size: 1.3rem;
  }

  .p-toolFooter__linkItem a {
    font-size: 1.3rem;
  }

  .p-toolFooter__logo {
    height: 26px;
  }
}

/* ==========================================================================
   対象者の明記
   lead_capture_playbook §2「対象者の明記＋中身のチラ見せ」で 0.5% → 1.16% の実績。
   「向いていない場合」を並べているのは、このツールで答えが出ない人を早く帰すため。
   ページ下部の「導入が向かないケース」とは別物（あちらはモバイルオーダー自体の適否）。
   ツールが1画面目から遠ざからないよう、PCでは2列に並べて縦を使わない。
   ========================================================================== */
.p-simFor {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 18px 20px;
  border: 1px solid var(--docOpen-line);
  border-radius: 12px;
  background: #fff;
}

@media screen and (min-width: 768px) {
  .p-simFor {
    grid-template-columns: 1fr 1fr;
    gap: 12px 36px;
    padding: 24px 28px 26px;
  }
}

.p-simFor__hdg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-simFor__hdg.-fit {
  color: #12866f;
}

.p-simFor__hdg.-unfit {
  color: #5b7285;
}

/* ○ と − のマークは装飾なので aria から外さず、記号そのものを持たせない
   （読み上げで「まる」「ハイフン」と読まれても意味が壊れないように見出し語を先に置く） */
.p-simFor__hdg::before {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.p-simFor__hdg.-fit::before {
  content: "○";
  background: #29baa2;
}

.p-simFor__hdg.-unfit::before {
  content: "−";
  background: #9fb0b7;
}

.p-simFor__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.p-simFor__item {
  position: relative;
  padding-left: 14px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #4a656f;
}

.p-simFor__item + .p-simFor__item {
  margin-top: 7px;
}

.p-simFor__item::before {
  content: "";
  position: absolute;
  top: .8em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cfe0e4;
}

.p-simFor__item b {
  font-weight: 700;
  color: var(--docOpen-navy);
}

.p-simFor__item a {
  color: #12866f;
  text-decoration: underline;
}

/* 何円/時で換算したか。「167時間 / 231,000円」だけでは 167×1,200 で
   検算した人と数字が合わないため、金額の出ている場所に必ず出す。 */
.p-simNow__rate {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--docOpen-bg);
  font-size: 1.2rem;
  line-height: 1.6;
  color: #4a656f;
}

/* ツール名を「注文受付・会計の人件費シミュレーター」にしたので、KVを3段にする。
   スコープを示す「注文受付・会計の」は本体より小さく置き、
   Simulator（チップ）→ スコープ → ツール名 → 問いかけ の順に読ませる。 */
.p-simPage .p-docOpenKv .c-hdg-kv__txt.-lead {
  margin-bottom: 2px;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #3f5d70;
}

@media screen and (min-width: 768px) {
  .p-simPage .p-docOpenKv .c-hdg-kv__txt.-lead {
    font-size: 2.2rem;
  }
}

/* 折りたたみ内の小見出し（削減率のグループ） */
.p-simSubHdg {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--docOpen-line);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--docOpen-navy);
}

.p-simFieldNote {
  margin-top: 12px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #5a6a72;
}

.p-simFieldNote a {
  color: #12866f;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  /* 2列グリッドの中で、小見出しと注記は横幅いっぱいを使う */
  .p-simDetails__body > .p-simSubHdg,
  .p-simDetails__body > .p-simFieldNote {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .p-simDetails__body > .p-simSubHdg {
    padding-top: 20px;
  }
}

/* レンジの数字に「控えめ / 標準」を直接付ける。
   注記に書いてあっても数字から離れていると読み取られない。
   inline-flex の列にすると、1行目（数字）のベースラインが 〜 や「万円 / 月」と
   そろい、ラベルはベースラインに影響せず下に落ちる。 */
.p-simSaved__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 6px;
}

.p-simSaved__side {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.p-simSaved__sideLabel {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #17806f;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .p-simSaved__sideLabel {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   会計方法の選択
   会計の削減率は「いまの運用」で決まる（すでにハンディ/OESなら二度打ちは
   発生していないので0%）。結果を大きく動かす分岐なので、折りたたみに入れず
   常時表示にしている。選択肢の文が長いのでチップではなくリスト型のラジオ。
   ========================================================================== */
.p-simField.-mode {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--docOpen-line);
}

.p-simRadios {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.p-simRadio {
  position: relative;
  display: block;
  cursor: pointer;
}

/* input は隠さず透明にして重ねる（キーボード操作を壊さない） */
.p-simRadio input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.p-simRadio__body {
  display: block;
  padding: 12px 14px 12px 38px;
  border: 1px solid var(--docOpen-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, background-color .15s;
}

/* ラジオの丸を疑似要素で描く */
.p-simRadio__body::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 13px;
  width: 16px;
  height: 16px;
  border: 2px solid #b9cbd1;
  border-radius: 50%;
  background: #fff;
}

.p-simRadio input:checked + .p-simRadio__body {
  border-color: var(--docOpen-primary);
  background: #f2fbf9;
}

.p-simRadio input:checked + .p-simRadio__body::before {
  border-color: var(--docOpen-primary);
  background: radial-gradient(circle, var(--docOpen-primary) 0 42%, #fff 46% 100%);
}

.p-simRadio input:focus-visible + .p-simRadio__body {
  outline: 2px solid var(--docOpen-navy);
  outline-offset: 2px;
}

.p-simRadio__title {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--docOpen-txt);
}

.p-simRadio__title b {
  font-weight: 700;
  color: var(--docOpen-navy);
}

.p-simRadio__txt {
  display: block;
  margin-top: 3px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #5a6a72;
}

@media screen and (min-width: 768px) {
  .p-simRadios {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* レンジの見出し直下に置く、対象方式の注記。
   poscube はテーブルオーダーを提供していないが、計算は両方に共通なので
   中立なツールとして両方を対象にしている。どちらでも同じであることを明示する。 */
.p-simSaved__scope {
  margin-top: 4px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #4a656f;
}

/* 売上方向の効果は2経路（客単価・回転率）なので、3列グリッドを2列にする */
@media screen and (min-width: 768px) {
  .p-simUse.-two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1つのカードに事例が2件入るので、1件ずつ行を分ける（続けて書くと
   「事例を見る」の直後に次の店名が来て読めない） */
.p-simUse__caseRow {
  display: block;
}

.p-simUse__caseRow + .p-simUse__caseRow {
  margin-top: 6px;
}

.p-simUse.-two .p-simUse__link {
  display: inline-block;
  margin: 0 0 0 8px;
}