/*
 * 選ばれる理由（/benefits/）2026-10 再編の追加スタイル
 * - main.min.css の既存クラスはそのまま使い、このページで足した要素と、文字組みの調整だけをここに書く
 * - 旗「人手が限られても、サービスの質は落とさない。」と3つの柱（止まらない・迷わない・伝わる）
 * - 変更したら benefits/index.html の ?v= を上げる
 *
 * 文字組みはトップページ（/）の実測値にそろえる（2026-10-07 計測）
 *               SP（375px）           PC（1366px）
 *   見出し2     24px / 1.5 / 700      34px / 1.5 / 700   … トップ「機能」見出し 24px・34px
 *   カード見出し 18px / 1.4 / 700      20px / 1.4 / 700   … トップ 課題カード見出し 16〜18px・20px
 *   小見出し     16px / 1.5 / 700      18px / 1.5 / 700
 *   本文         14px / 1.8 / 500      16px / 1.8 / 500   … トップ Pickup・課題カード本文 14px・16px、weight 500
 *   声の引用     16px / 1.75 / 700     16px / 1.75 / 700  … トップ 事例カルーセルの見出し
 *   リンク       14px / 1.7 / 700                         … トップ「詳しく見る」14px
 *   注記         12px / 1.6 / 400                         … トップ 導入店ロゴ帯の注記
 *   比較表のセル 本文と同じ大きさ・行間だけ 1.6（横スクロールの表で縦に伸びすぎないように）
 */

/* ---------- 文字組み: 既存クラスの上書き ---------- */
.p-benefits-reason__title,
.p-benefits-comparison__title,
.p-benefits-voice__title {
  font-size: 2.4rem;
  line-height: 1.5;
}
.p-benefits-reason__detailTitle {
  font-size: 1.8rem;
  line-height: 1.4;
  white-space: normal;
}
.p-benefits-reason__detailTitle > span {
  display: flex;
  flex-direction: column;
}
.p-benefits-reason__detailItem dt {
  font-size: 1.6rem;
  line-height: 1.5;
}
/* 項目名を語の途中で折り返さない（<wbr> の位置でだけ折り返す） */
.p-benefitsV2-keep {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.p-benefits-reason__detailItem dd,
.p-benefits-suitable__detailItem,
.p-benefits-comparison__table td {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
}
.p-benefits-comparison__table th,
.p-benefits-comparison__table td {
  font-size: 1.4rem;
  line-height: 1.6;
}
.p-benefits-reason__detailItem dd span,
.p-benefits-voice__detailText {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
}
.p-benefits-voice__detailTitle {
  font-size: 1.6rem;
  line-height: 1.75;
}

/* ---------- Hero: 旗の下の柱とリード ---------- */
.p-benefitsV2-heroPillars {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  color: #333;
}
.p-benefitsV2-heroLead {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

/* ---------- 数字の帯の注記 ---------- */
.p-benefitsV2-note {
  margin-top: 1.6rem;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  color: #666;
}

/* ---------- 3つの柱 ---------- */
.p-benefitsV2-reasonLead {
  margin: -2.4rem 0 4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
}
.p-benefitsV2-sub {
  margin-top: .4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #29baa2;
}
.p-benefitsV2-role {
  display: inline-block;
  margin: -1.2rem 0 1.6rem;
  padding: .2rem 1rem;
  border: 1px solid #29baa2;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #1f8f7c;
  background: #fff;
}
.p-benefitsV2-caseLink {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
  color: #1f8f7c;
  text-decoration: underline;
  text-underline-offset: .3em;
}
.p-benefitsV2-caseLink::after {
  content: " →";
}

/* ---------- 向いている店舗の下: セグメントへの入口 ---------- */
.p-benefitsV2-segments {
  display: grid;
  gap: .8rem;
  margin-top: 2rem;
}
.p-benefitsV2-segments a {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.6rem;
  border: 1px solid #cfe9e4;
  border-radius: .8rem;
  background: #fff;
  color: #1f8f7c;
}
.p-benefitsV2-segments span {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #555;
}
.p-benefitsV2-segments b {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
}
.p-benefitsV2-segments b::after {
  content: " →";
}

/* ---------- お店からの声: 柱のタグと5件の並び ---------- */
.p-benefitsV2-tag {
  align-self: flex-start;
  margin-bottom: .8rem;
  padding: .1rem .9rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  background: #29baa2;
}
.p-benefitsV2-more {
  margin-top: 3.2rem;
  text-align: center;
}
.p-benefitsV2-more a {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
  color: #1f8f7c;
  text-decoration: underline;
  text-underline-offset: .3em;
}
.p-benefitsV2-more a::after {
  content: " →";
}

@media screen and (min-width: 768px), print {
  .p-benefits-reason__title,
  .p-benefits-comparison__title,
  .p-benefits-voice__title {
    font-size: 3.4rem;
  }
  .p-benefits-reason__detailTitle {
    font-size: 2rem;
  }
  .p-benefits-reason__detailItem dt {
    font-size: 1.8rem;
  }
  .p-benefits-reason__detailItem dd,
  .p-benefits-suitable__detailItem,
  .p-benefits-comparison__table td {
    font-size: 1.6rem;
  }
  .p-benefits-comparison__table th {
    font-size: 1.6rem;
  }
  .p-benefitsV2-heroPillars {
    font-size: 2.2rem;
  }
  .p-benefitsV2-heroLead,
  .p-benefitsV2-reasonLead {
    font-size: 1.6rem;
  }
  .p-benefitsV2-sub {
    font-size: 1.8rem;
  }
  .p-benefitsV2-segments a {
    flex-direction: row;
    align-items: baseline;
    gap: 1.2rem;
  }
  .p-benefits-voice__list {
    flex-wrap: wrap;
    gap: 3.2rem;
  }
  .p-benefits-voice__item {
    width: calc((100% - 6.4rem) / 3);
  }
}

/* ==========================================================
   2026-10-14 見直し（v3）: 3つの理由を .p-benV3-* に組み替え、実績・比較表・お客様の声を調整
   ねらい: 「目に止まる一文」（各柱のキャッチ・実績の数字）と「読ませる説明」（リード・機能の本文）の差をはっきりさせる。
   色: 見出し・キャッチは黒、説明は灰、注記はさらに薄く。オレンジは「導入店の成果」だけ（紹介資料と同じ使い分け） */

:root {
  --bv3-ink: #1a1a1a;
  --bv3-ink2: #4b5a61;
  --bv3-note: #7a858a;
  --bv3-teal: #29baa2;
  --bv3-tealDk: #12866f;
  --bv3-sun: #f2af44;
  --bv3-sunDk: #c46f0c;
  --bv3-line: #dcece8;
}

/* ---------- 実績の数字: SPで3段に積むと1画面を使い切るので、横3列のコンパクト表示に ---------- */
@media screen and (max-width: 767px) {
  .p-benefits-achievements__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; }
  .p-benefits-achievements__item { padding: 0 6px; background-size: auto 70%; background-position: left 60%, right 60%; text-align: center; }
  .p-benefits-achievements__item > dt { padding: 0; font-size: 1.1rem; line-height: 1.4; min-height: 3.1em; display: flex; align-items: flex-end; justify-content: center; }
  .p-benefits-achievements__item > dd { padding: 0; font-size: 1.1rem; }
  .p-benefits-achievements__item > dd > em { font-size: 3rem; margin-right: 2px; }
}

/* ---------- 3つの理由: 柱ごとのジャンプ ---------- */
.p-benV3-jump { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; padding: 0; list-style: none; }
.p-benV3-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 99px;
  background: #fff; border: 1px solid var(--bv3-line); font-size: 1.4rem; font-weight: 700; color: var(--bv3-ink);
  text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.p-benV3-jump a span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bv3-teal); color: #fff; font-size: 1.2rem; font-family: Montserrat, sans-serif; }
.p-benV3-jump a:hover { border-color: var(--bv3-teal); }

/* ---------- 柱のカード ---------- */
.p-benV3-pillars { display: grid; gap: 24px; margin-top: 24px; }
.p-benV3-pillar {
  scroll-margin-top: 110px;
  background: #fff; border-radius: 16px; padding: 24px 20px; box-shadow: 0 6px 24px rgba(18, 134, 111, .08);
  display: grid; gap: 18px; grid-template-areas: "head" "img" "feats" "proof";
}
.p-benV3-pillar__head { grid-area: head; }
.p-benV3-pillar__img { grid-area: img; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.p-benV3-pillar__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-benV3-feats { grid-area: feats; }
.p-benV3-proof { grid-area: proof; }

/* ラベル（番号・柱の名前・役割）: 小さく、色で区別 */
.p-benV3-pillar__label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.p-benV3-pillar__num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bv3-teal); color: #fff; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.5rem; }
.p-benV3-pillar__name { font-size: 1.6rem; font-weight: 700; color: var(--bv3-tealDk); letter-spacing: .06em; }
.p-benV3-pillar__role { font-size: 1.1rem; font-weight: 700; color: var(--bv3-tealDk); border: 1px solid #bfe9e1; border-radius: 99px; padding: 2px 10px; background: #f2fbf9; }

/* キャッチ: 目に止める一文。いちばん大きく、黒で */
.p-benV3-pillar__catch { margin: 0; font-size: 2.4rem; line-height: 1.45; font-weight: 700; color: var(--bv3-ink); letter-spacing: .01em; }
.p-benV3-pillar__catch .nb { display: inline-block; }
/* リード: 読ませる説明。太さは普通、少し大きめ、灰 */
.p-benV3-pillar__lead { margin: 12px 0 0; font-size: 1.5rem; line-height: 1.9; font-weight: 500; color: var(--bv3-ink2); }

/* 機能: 見出しは黒の太字（コロンなし）、本文は灰、注記はさらに薄く */
.p-benV3-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-benV3-feat { background: #f6fbfa; border-radius: 10px; padding: 14px 16px; }
.p-benV3-feat__title { position: relative; margin: 0 0 6px; padding-left: 24px; font-size: 1.6rem; line-height: 1.5; font-weight: 700; color: var(--bv3-ink); }
.p-benV3-feat__title::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bv3-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.p-benV3-feat__title sup { font-size: .6em; }
.p-benV3-feat__txt { margin: 0; font-size: 1.4rem; line-height: 1.8; color: var(--bv3-ink2); }
.p-benV3-feat__note { margin: 6px 0 0; font-size: 1.15rem; line-height: 1.6; color: var(--bv3-note); }

/* 実績: 導入店の成果はオレンジ。数字を大きく、事例名は小さく */
.p-benV3-proof {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
  background: #fff8ec; border: 1px solid #f6dcae; border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit;
}
.p-benV3-proof__num { grid-row: span 2; font-family: Montserrat, "Noto Sans JP", sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--bv3-sunDk); white-space: nowrap; line-height: 1; }
.p-benV3-proof__num b { font-size: 3.6rem; letter-spacing: -.01em; }
.p-benV3-proof__num i { font-style: normal; font-size: 5rem; line-height: .6; display: block; padding-top: 14px; }
.p-benV3-proof__body { display: grid; gap: 2px; }
.p-benV3-proof__txt { font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: var(--bv3-ink); }
.p-benV3-proof__who { font-size: 1.2rem; color: var(--bv3-ink2); }
.p-benV3-proof__more { grid-column: 2; font-size: 1.3rem; font-weight: 700; color: var(--bv3-sunDk); }
.p-benV3-proof__more::after { content: " →"; }
.p-benV3-proof:hover .p-benV3-proof__more { text-decoration: underline; }

@media screen and (min-width: 768px) {
  .p-benV3-jump { margin-top: 28px; gap: 14px; }
  .p-benV3-jump a { font-size: 1.6rem; padding: 10px 22px 10px 10px; }
  .p-benV3-pillars { gap: 40px; margin-top: 36px; }
  .p-benV3-pillar {
    padding: 40px 44px; gap: 28px 40px;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "head img" "feats feats" "proof proof";
    align-items: center;
  }
  .p-benV3-pillar__img { aspect-ratio: 4 / 3; }
  .p-benV3-pillar__name { font-size: 1.8rem; }
  .p-benV3-pillar__role { font-size: 1.2rem; }
  .p-benV3-pillar__catch { font-size: 3.4rem; }
  .p-benV3-pillar__lead { font-size: 1.7rem; margin-top: 16px; }
  .p-benV3-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .p-benV3-feats.-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-benV3-feat { padding: 18px 18px 20px; }
  .p-benV3-feat__title { font-size: 1.7rem; }
  .p-benV3-feat__txt { font-size: 1.5rem; }
  .p-benV3-proof { grid-template-columns: auto 1fr auto; padding: 18px 28px; gap: 0 24px; }
  .p-benV3-proof__num { grid-row: auto; }
  .p-benV3-proof__num b { font-size: 4.4rem; }
  .p-benV3-proof__txt { font-size: 1.7rem; }
  .p-benV3-proof__who { font-size: 1.3rem; }
  .p-benV3-proof__more { grid-column: auto; font-size: 1.4rem; }
}

/* 3つの理由の横幅（2026-10-30）: PCではトップページと同じ「左右20px・最大1280px」まで広げる
   （main.min.css の .l-section-benefitsReason__inner は最大1080px・左右32px。共通CSSは触らずここで上書き）。
   広がった分は写真の列と機能カードに回す。写真の列は1200px以上で380→440px */
@media screen and (min-width: 768px) {
  .l-section-benefitsReason__inner { max-width: 1320px; padding-left: 20px; padding-right: 20px; }
}
@media screen and (min-width: 1200px) {
  .p-benV3-pillar { grid-template-columns: minmax(0, 1fr) 440px; padding: 44px 52px; gap: 32px 48px; }
}

/* ---------- 比較表 ---------- */
/* PC: poscube列だけ太字・濃く。「一般的」は灰、「影響」は普通の太さ */
.p-benefits-comparison__table td { font-weight: 500; color: var(--bv3-ink2); }
.p-benefits-comparison__table td.is-poscube { font-weight: 700; color: var(--bv3-ink); background: #f2fbf9; }
/* SP: 横スクロールだと肝心の poscube 列が画面外に隠れるので、行ごとのカードに */
@media screen and (max-width: 767px) {
  .p-benefits-comparison__body { overflow: visible !important; }
  .p-benefits-comparison__body .scroll-hint-icon-wrap, .p-benefits-comparison__body .scroll-hint-icon { display: none !important; }
  .p-benefits-comparison__table, .p-benefits-comparison__table tbody, .p-benefits-comparison__table tr,
  .p-benefits-comparison__table th, .p-benefits-comparison__table td { display: block; width: auto !important; min-width: 0 !important; }
  .p-benefits-comparison__table { border: 0 !important; }
  .p-benefits-comparison__table thead { display: none; }
  .p-benefits-comparison__table tr { background: #fff; border: 1px solid var(--bv3-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
  .p-benefits-comparison__table tbody th { background: #f2fbf9 !important; border: 0 !important; padding: 12px 14px !important; font-size: 1.5rem !important; color: var(--bv3-ink) !important; text-align: left !important; }
  .p-benefits-comparison__table td { border: 0 !important; border-top: 1px solid #eef3f2 !important; padding: 10px 14px !important; font-size: 1.4rem !important; line-height: 1.7; text-align: left !important; background: #fff !important; }
  .p-benefits-comparison__table td::before { content: attr(data-label); display: block; font-size: 1.1rem; font-weight: 700; color: var(--bv3-note); margin-bottom: 2px; }
  .p-benefits-comparison__table td.is-poscube { background: #f2fbf9 !important; }
  .p-benefits-comparison__table td.is-poscube::before { color: var(--bv3-tealDk); }
}

/* ---------- お客様の声: 要の言葉にマーカー ---------- */
.p-benV3-hl { background: linear-gradient(transparent 62%, rgba(242, 175, 68, .45) 62%); color: inherit; padding: 0 1px; }

/* 細部の調整 */
@media screen and (min-width: 768px) {
  .p-benV3-feats.-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l-section-benefitsComparison .p-benefits-comparison__table tbody td:nth-child(4) { font-weight: 500; color: var(--bv3-ink); }
@media screen and (max-width: 767px) {
  .p-benV3-pillar__catch { font-size: 2.1rem; }
  .p-benV3-jump { gap: 6px; flex-wrap: nowrap; }
  .p-benV3-jump a { font-size: 1.3rem; padding: 6px 12px 6px 6px; gap: 6px; }
  .p-benV3-jump a span { width: 20px; height: 20px; font-size: 1.1rem; }
  .l-section-benefitsComparison .p-benefits-comparison__table td,
  .l-section-benefitsComparison .p-benefits-comparison__table th { box-shadow: none !important; outline: 0 !important; }
  .l-section-benefitsComparison .p-benefits-comparison__table td::after,
  .l-section-benefitsComparison .p-benefits-comparison__table th::after { display: none !important; }
}
@media screen and (max-width: 767px) {
  .p-benefits-achievements__item { background: #fff !important; border-radius: 10px; padding: 10px 4px 12px; box-shadow: 0 2px 8px rgba(18,134,111,.08); }
  .p-benefits-achievements__item > dt { min-height: 2.9em; font-size: 1.1rem; }
  .p-benefits-achievements__item > dd > em { font-size: 2.8rem; }
}
@media screen and (max-width: 767px) {
  .p-benefits-achievements__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100%; }
  .p-benefits-achievements__item { width: auto !important; min-width: 0; margin: 0 !important; }
}
@media screen and (max-width: 767px) {
  .p-benefits-achievements__item > dd { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; line-height: 1.2; }
  .p-benefits-achievements__item > dd > em { font-size: 2.6rem; }
}
@media screen and (max-width: 767px) {
  .p-benefits-achievements__item > dt { white-space: normal !important; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
}

/* ---------- 実績の数字 SP: 3枚の見出しと数字の位置・カードの高さをそろえる（2026-11-02） ----------
   「遠隔操作時の復旧目安」が「目/安」で折れ、1枚目だけ「店舗以上」が2行目に落ちてカードの高さが違っていた */
.p-benefitsV2-nb { display: inline-block; }
@media screen and (max-width: 767px) {
  .p-benefits-achievements__list { align-items: stretch !important; }
  .p-benefits-achievements__item > dt { min-height: 2.9em; align-items: flex-end; }
  .p-benefits-achievements__item > dd { min-height: 2.6em; align-content: flex-start; }
}