/*
 * WordPress統合用の追加スタイル
 *
 * デザイナー納品の style.css には手を入れず、WP実データ由来のマークアップ
 * （wysiwygの段落・[caption]ショートコード・align系クラス等）への対応だけを
 * このファイルに集約する。
 */

/* ===== インタビュー本文（voice_content / user_content の wysiwyg） ===== */

/* wpautopが生成する段落の行間（モックアップは <i> 区切りで余白を作っていた） */
.p-case-interview__body p + p {
  margin-top: 27px;
}

/* 本文中の画像は枠内に収める */
.p-case-interview__body img {
  max-width: 100%;
  height: auto;
}

/* [caption] ショートコード（人物写真＋肩書き）: 旧サイト同様に右寄せ回り込み */
.p-case-interview__body .wp-caption {
  max-width: 100%;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
}

.p-case-interview__body .wp-caption.alignright,
.p-case-interview__body img.alignright {
  float: right;
  margin: 0 0 16px 24px;
}

.p-case-interview__body .wp-caption.alignleft,
.p-case-interview__body img.alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.p-case-interview__body .wp-caption .wp-caption-text {
  margin: 8px 0 0;
}

/* 回り込みの解除 */
.p-case-interview__content::after {
  content: "";
  display: block;
  clear: both;
}

/* ===== Cookie同意パネル（旧テーマの機能を新デザインのトーンで） ===== */

.lv2-gdpr {
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 24px;
  color: #fff;
  background: rgb(2 78 82 / 96%);
  font-size: 14px;
  line-height: 1.7;
}

.lv2-gdpr__inner {
  display: flex;
  max-width: 960px;
  margin: 0 auto;
  align-items: center;
  gap: 24px;
}

.lv2-gdpr__inner a {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}

.lv2-gdpr__agree {
  flex: 0 0 auto;
  padding: 10px 32px;
  border: 1px solid #fff;
  border-radius: 24px;
  color: var(--primary);
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.lv2-gdpr__agree:hover {
  color: #fff;
  background: transparent;
}

@media (max-width: 768px) {
  .lv2-gdpr__inner {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }
}

/* ===== よくある質問 ===== */

/* 回答は複数段落になり得るためラッパーで受ける（.p-faq-item__answer p と同じフレックス挙動） */
.p-faq-item__answer-body {
  min-width: 0;
  flex: 1 1 auto;
}

.p-faq-item__answer-body p + p {
  margin-top: 1em;
}

.p-faq-item__answer-body a {
  color: var(--primary);
  text-decoration: underline;
}

/* ===== お知らせ詳細 ===== */

/* アイキャッチ画像は枠(407px)いっぱいにトリミング表示 */
.p-news-detail-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文（the_content）の段落・画像 */
.p-news-detail-card__body p + p {
  margin-top: 27px;
}

.p-news-detail-card__body img {
  max-width: 100%;
  height: auto;
}

.p-news-detail-card__body a {
  color: var(--primary);
  text-decoration: underline;
}

/* ===== お問い合わせ（CF7 5.3.2 + add-confirm） ===== */

/* CF7が挿入するラッパーspanをブロック化して入力欄を全幅にする */
.p-contact-field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* バリデーションエラー文言 */
.p-contact-field .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #d23b3b;
  font-size: 14px;
}

/* フォーム全体の応答メッセージ */
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-size: 15px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #d23b3b;
  color: #d23b3b;
}

/* 同意チェック（acceptance）: CF7 の入れ子 span を透過させ、デザインの
   「.p-contact-consent > input + span」と同じ構造として静的 CSS をそのまま効かせる
   （チェックボックス 32px/24px・gap 8px・SP の幅指定は静的側の定義が当たる） */
.p-contact-consent .wpcf7-form-control-wrap,
.p-contact-consent .wpcf7-form-control,
.p-contact-consent .wpcf7-list-item {
  display: contents;
}

.p-contact-consent label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-contact-consent .wpcf7-list-item-label a {
  color: #186df5;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .p-contact-consent .wpcf7-list-item-label {
    width: 166px;
  }
}

/* 確認ステップ（add-confirm）: 入力欄を「表示」らしく見せる */
.wpcf7 .wpcf7c-conf {
  border-color: transparent;
  color: var(--text);
  background: #f2f8f8;
}

.wpcf7 .wpcf7c-conf:hover,
.wpcf7 .wpcf7c-conf:focus {
  border-color: transparent;
  box-shadow: none;
}

/* 確認ステップの案内文（step2でのみ表示される） */
.p-contact-confirm-lead {
  margin: 32px 0 0;
}

/* ボタン列: 確認ボタン(step1) / 送信・修正ボタン(step2) */
.p-contact-actions {
  display: flex;
  margin-top: 0; /* カードとボタンの間隔はデザインの 40px（静的 CSS 側）に任せる */
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* CF7 の入力欄（inline-block）は行ボックスのベースライン分だけ下に隙間ができ、
   デザインより 7px 高くなるため、ラッパーと入力欄を block にする */
.p-contact-field .wpcf7-form-control-wrap,
.p-contact-field .wpcf7-form-control-wrap > .wpcf7-form-control {
  display: block;
}

/* CF7のボタンは input 要素のため、デザインのflex前提を input 向けに読み替える */
input.p-contact-submit,
input.p-contact-confirm-submit {
  display: block;
  width: 220px;
  height: 50px;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

input.p-contact-confirm-edit {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 768px) {
  /* SPでは回り込みをやめて縦積みにする */
  .p-case-interview__body .wp-caption.alignright,
  .p-case-interview__body .wp-caption.alignleft,
  .p-case-interview__body img.alignright,
  .p-case-interview__body img.alignleft {
    float: none;
    margin: 0 auto 16px;
    display: block;
  }

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

/* ---------------------------------------------------------------
 * 2026-09-15 社内確認の指摘対応
 * ------------------------------------------------------------- */

/* CF7 の送信ボタンは input 要素で子要素（デザインの <span> 文字・<i> 矢印）を持てないため、
   静的 9/29 版の配置（文字 = 左 30px 固定／矢印 = icon-arrow-right.svg 11px・右 20px）を
   padding-left と背景画像で再現する。矢印の形は icon-arrow-right.svg（角丸三角）と同じ */
input.p-contact-submit,
input.p-contact-confirm-submit {
  padding: 0 0 0 30px;
  text-align: left;
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 11px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none'%3E%3Cg transform='rotate(90 5.5 5.5)'%3E%3Cg transform='translate(1.46742 1)'%3E%3Cpath d='M3.16656 .5C3.55146-.166666 4.51371-.166667 4.89861.5L7.92969 5.75C8.31459 6.41667 7.83347 7.25 7.06367 7.25H1.00149C.231692 7.25-.249434 6.41667.135466 5.75L3.16656.5Z' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

input.p-contact-submit:hover,
input.p-contact-submit:focus-visible,
input.p-contact-confirm-submit:hover,
input.p-contact-confirm-submit:focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none'%3E%3Cg transform='rotate(90 5.5 5.5)'%3E%3Cg transform='translate(1.46742 1)'%3E%3Cpath d='M3.16656 .5C3.55146-.166666 4.51371-.166667 4.89861.5L7.92969 5.75C8.31459 6.41667 7.83347 7.25 7.06367 7.25H1.00149C.231692 7.25-.249434 6.41667.135466 5.75L3.16656.5Z' fill='%2302797e'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 同意チェック: CF7 が <p> で包むため親の中央寄せが効かない → 自身で中央寄せ */
.p-contact-consent {
  justify-content: center;
}

/* ---------------------------------------------------------------
 * 2026-09-17 テスト送信の指摘対応（Backlog -25）
 * ------------------------------------------------------------- */

/* ① ホバー時: 静的 CSS のホバーは background ショートハンド（#fff）のため、
   矢印の背景画像の repeat/position/size が初期値に戻り矢印が敷き詰められていた。
   ホバー側でも同じ指定を持たせる */
input.p-contact-submit:hover,
input.p-contact-submit:focus-visible,
input.p-contact-confirm-submit:hover,
input.p-contact-confirm-submit:focus-visible {
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 11px 11px;
}

/* 送信ボタンの幅は静的 contact/confirm/ の 140px（確認ボタンは 220px のまま） */
input.p-contact-confirm-submit {
  width: 140px;
}

/* ② 確認ステップ: 静的 contact/confirm/ と同じ「案内文 → 項目カード → 送信/修正」にする。
   カード（dl.p-contact-confirm-card）は contact-confirm.js が生成し、
   .p-contact-main に is-confirm が付く。項目カードの見た目は静的 CSS がそのまま当たる */
.p-contact-main.is-confirm .p-contact-main__inner {
  transform: translateX(1px); /* 静的 .p-contact-confirm-main__inner と同じ */
}

.p-contact-main.is-confirm .p-contact-lead,
.p-contact-main.is-confirm .p-contact-form__card {
  display: none;
}

/* 案内文とカードの間隔は静的の 16px（フォームの gap 40px から 24px 詰める） */
.p-contact-main.is-confirm .p-contact-confirm-lead {
  margin: 0 0 -24px;
}

/* お問い合わせ内容の改行を確認画面でも保つ */
.p-contact-main.is-confirm .p-contact-confirm-card dd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* CF7 が送信ボタンの後ろに差し込む読み込み中アイコンがボタン列の高さを押し広げないようにする */
.p-contact-actions > span {
  position: relative;
}

.p-contact-actions .ajax-loader {
  position: absolute;
  top: 13px;
  left: 100%;
  margin: 0 0 0 8px;
}

@media (max-width: 768px) {
  /* SP は静的のカード上 16px・フォーム gap 32px → 16px 詰める */
  .p-contact-main.is-confirm .p-contact-confirm-lead {
    margin: 0 0 -16px;
  }

  .p-contact-main.is-confirm .p-contact-main__inner {
    transform: none;
  }

  /* 送信する／内容を修正する の間隔 = 静的 .p-contact-confirm-action の SP gap（9/29 版で 2.2222vw → 4.4444vw） */
  .p-contact-main.is-confirm .p-contact-actions {
    gap: 4.4444vw;
  }
}

/* ---------------------------------------------------------------
 * 2026-09-29 静的 9/29 版の送信ボタン（SP）
 * ------------------------------------------------------------- */

/* 上の input 向け指定（幅 220px/140px・高さ 50px・矢印 11px）は SP でも勝ってしまうため、
   静的 SP の幅（61.1111vw / 38.8889vw）・高さ（13.8889vw）・矢印サイズ（3.0556vw）に戻す。
   文字の左 30px・矢印の右 20px は静的でも SP で px 固定のまま */
@media (max-width: 768px) {
  input.p-contact-submit {
    width: 61.1111vw;
    height: 13.8889vw;
  }

  input.p-contact-confirm-submit {
    width: 38.8889vw;
    height: 13.8889vw;
  }

  input.p-contact-submit,
  input.p-contact-confirm-submit,
  input.p-contact-submit:hover,
  input.p-contact-submit:focus-visible,
  input.p-contact-confirm-submit:hover,
  input.p-contact-confirm-submit:focus-visible {
    background-size: 3.0556vw 3.0556vw;
  }
}

/* ---------------------------------------------------------------
 * 2026-09-29 インタビューの並び 見出し → 本文 → 写真（Backlog -34）
 * ------------------------------------------------------------- */

/* 間隔の値は入れ替え前と同じ: 見出し→先頭要素 = .p-case-interview__content の margin-top、
   本文と写真の間 = 静的の写真→本文（.p-case-interview__body の margin-top 24px／SP 3.3333vw） */
.p-case-interview__content--body-first > .p-case-interview__body {
  margin-top: 0;
}

.p-case-interview__content--body-first > .p-case-interview__media {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .p-case-interview__content--body-first > .p-case-interview__media {
    margin-top: 3.3333vw;
  }
}

/* ---------------------------------------------------------------
 * 2026-09-29 Backlog -32 追加分・-36
 * ------------------------------------------------------------- */

/* -36 TOP 事例動画: YouTube 埋め込み。大きさ・角丸は従来のサムネイル画像（376x210・8px）と同じ */
.p-top-results__movie {
  width: 376px;
  height: 210px;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.p-top-results__movie iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -32 「絞り込み」見出しの下線を #02a6ac（--primary-bright）→ #02797E（--primary）へ（浅野さん 9/29）。
   見出しは SP のみ表示（PC は非表示） */
@media (max-width: 768px) {
  .p-case-filter--sp h2,
  .p-news-filter h2 {
    border-bottom-color: var(--primary);
  }

  /* -32 TOP お知らせの1件目だけ縦に大きい: 静的の SP は1件目だけ height 34.1667vw 固定
     （静的見本の1件目がタイトル2行だったため）。実データは1行なので他と同じ min-height に任せる。
     2行のときの自然高さは 5.5556*2 + 7.5 + 2.2222 + 6.6667*2 = 34.1667vw で静的見本と同じ */
  .c-list-news li:first-child a {
    height: auto;
  }

  /* 上の1件目が 6.6667vw 低くなった分、お知らせ欄の最小高さ（静的の固定高さ 156.6667vw 由来）も同じだけ下げ、
     「全てのお知らせを見る」から欄の下端までの間隔を静的と同じに保つ（件数・行数が増えれば従来どおり伸びる） */
  .p-top-news {
    min-height: 150vw;
  }

  .p-top-results__movie {
    width: calc(100vw - 13.3333vw);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 2.2222vw;
  }

  /* -32 TOP「全ての導入実績を見る」の上が詰まる（浅野さん 9/30 13:21「24px あけて」）。
     静的の SP は欄を固定高さ（112.5vw + 219.1667vw）にし、事例（top 143.0556vw）とボタン（bottom 15.5556vw）を
     絶対配置しているため、YouTube 埋め込みや紹介文の折り返しで事例が見本より高くなるとボタンに重なっていた。
     事例とボタンだけ通常の流れに戻し、事例の下端から 24px（6.6667vw）でボタンを置き、欄の高さを中身に追従させる。
     事例の開始位置（143.0556vw）とボタン下の余白（15.5556vw）は静的と同じ。地図・見出しは静的の絶対配置のまま */
  .p-top-results {
    height: auto;
    padding: 143.0556vw 0 15.5556vw;
  }

  .p-top-results__cases {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
  }

  .p-top-results__button {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    margin: 6.6667vw auto 0;
    transform: none;
  }
}

/* ---------------------------------------------------------------
 * 2026-09-29 ドロップシャドウをデザインの値に（Backlog -35 浅野さん 13:32・15:00 / Figma 0928 node 522-7380）
 * 静的はどちらも 0 1px 3px #c9c9c9。SP は 360px 基準で vw 換算（1px = 0.2778vw）
 * ------------------------------------------------------------- */

/* 導入実績カード: X0 Y1 ぼかし6 #C9C9C9 100% */
.p-case-card {
  box-shadow: 0 1px 6px rgb(0 0 0 / 21%);
}

/* 伊根町などの関連記事バナー: X3 Y3 ぼかし7 #D3D3D8 18% */
.p-case-related {
  box-shadow: 3px 3px 7px rgb(211 211 216 / 18%);
}

/* カード全体クリックのフォーカス表示（-27）も外側の影を上の値に揃える */
@supports selector(:has(a)) {
  .p-case-card:has(.p-case-card__body > a:focus-visible) {
    box-shadow:
      inset 0 0 0 3px #ffb000,
      0 1px 6px rgb(0 0 0 / 21%);
  }
}

@media (max-width: 768px) {
  .p-case-card {
    box-shadow: 0 0.2778vw 1.6667vw rgb(0 0 0 / 21%);
  }

  .p-case-related {
    box-shadow: 0.8333vw 0.8333vw 1.9444vw rgb(211 211 216 / 18%);
  }

  @supports selector(:has(a)) {
    .p-case-card:has(.p-case-card__body > a:focus-visible) {
      box-shadow:
        inset 0 0 0 3px #ffb000,
        0 0.2778vw 1.6667vw rgb(0 0 0 / 21%);
    }
  }
}

/* ---------------------------------------------------------------
 * 2026-09-30 お知らせ一覧のカード・お問い合わせの枠も導入実績カードと同じ影に（Backlog -35 浅野さん 9/29 19:43）
 * 確認画面・完了画面の枠はフォームと同じ流れの画面なので合わせて揃える。
 * お知らせカードのホバー／フォーカスの影は静的のまま（:hover の方が詳細度が高いので上書きされない）
 * ------------------------------------------------------------- */
.p-news-card a,
.p-contact-form__card,
.p-contact-confirm-card,
.p-contact-complete-card {
  box-shadow: 0 1px 6px rgb(0 0 0 / 21%);
}

@media (max-width: 768px) {
  .p-news-card a,
  .p-contact-form__card,
  .p-contact-confirm-card,
  .p-contact-complete-card {
    box-shadow: 0 0.2778vw 1.6667vw rgb(0 0 0 / 21%);
  }
}

/* 2026-09-30 お知らせ詳細の本文枠・FAQ・導入実績詳細の自治体情報枠も同じ影に（Backlog -35 浅野さん 10:28）
 * お知らせ詳細は内側の線（inset）を残したまま外側の影だけ替える。
 * 自治体情報枠の SP は静的が元から 0 0.2778vw 1.6667vw なので PC のみ */
.p-news-detail-card {
  box-shadow: inset 0 0 0 1px rgb(211 211 216 / 50%), 0 1px 6px rgb(0 0 0 / 21%);
}

.p-faq-item,
.p-case-detail-profile {
  box-shadow: 0 1px 6px rgb(0 0 0 / 21%);
}

@media (max-width: 768px) {
  .p-news-detail-card {
    box-shadow: inset 0 0 0 0.2778vw rgb(211 211 216 / 50%), 0 0.2778vw 1.6667vw rgb(0 0 0 / 21%);
  }

  .p-faq-item,
  .p-case-detail-profile {
    box-shadow: 0 0.2778vw 1.6667vw rgb(0 0 0 / 21%);
  }
}


/* 2026-10-05 Figma 1002 版の戻り（Backlog -37） */

/* サービス詳細 PC: ページ内ナビのボタン群を本文（960px）の左端にそろえる。
 * 静的 9/29 版で幅 739px（＝ボタン4つ分）の中央寄せに変わっていたため、枠だけ本文幅に戻す。ボタンの幅・間隔は変えない */
@media (min-width: 769px) {
  .p-feature-nav {
    width: 100%;
    max-width: 960px;
  }
}

/* 導入実績カード: 人口規模は折り返さない（「1万人以上5万人未満」を1行で）。
 * 静的 9/29 版は幅 151px 固定＋「以上」の後で改行していた（改行は functions.php の lv2_population_card_html で入れていた） */
.p-case-card__title span {
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* SP メニューボタン: 開いた時（閉じる）も閉じた時と同じ幅にする。静的は開いた時だけ 21.1111vw。
   * 幅を 2.5vw 広げた分、×印とラベルを 1.25vw 右へ送って中央を保つ */
  .c-header__menu[aria-expanded="true"] {
    width: 23.6111vw;
  }

  .c-header__menu[aria-expanded="true"] span:nth-child(1),
  .c-header__menu[aria-expanded="true"] span:nth-child(3) {
    left: 9.3056vw;
  }

  .c-header__menu[aria-expanded="true"] em {
    left: 7.9167vw;
  }

  /* 導入実績 SP: 「絞り込み」見出しのアイコンを文字の中心にそろえる。
   * 行の高さ 6.6667vw・アイコン 4.1667vw なので (6.6667 - 4.1667) / 2 = 1.25vw（静的は 1.6667vw で少し下） */
  .p-case-filter--sp h2 > span {
    top: 1.25vw;
  }
}

/* TOP SP: 「選べる2つのプラン」上下の波形の端に出る細い線を消す（Backlog -37）。
 * 波形（疑似要素）は白地の上に SVG を敷いており、欄の地色 #eaf9fb と接する端が小数 px になると、
 * 端の 1px だけ SVG が届かず下地の白が透ける（iPhone 実機・Mac Safari で再現）。
 * SVG の下にもう1層、端の 2px だけ欄の地色にしたグラデーションを敷く。波の曲線は端から 2px 以内に来ないので見た目は変わらない */
@media (max-width: 768px) {
  .p-top-plans::before {
    background-image: url("../images/top-wave-top-sp.svg"), linear-gradient(to bottom, #fff calc(100% - 2px), #eaf9fb calc(100% - 2px));
    background-size: 100% auto, 100% 100%;
  }

  .p-top-plans::after {
    background-image: url("../images/top-wave-bottom-sp.svg"), linear-gradient(to bottom, #eaf9fb 2px, #fff 2px);
    background-size: 100% auto, 100% 100%;
  }
}

/* お問い合わせ完了画面: SP は案内文を文ごとに改行せず、1 つの段落のように続けて表示する（先方指示 2026-10-05・Backlog -37）。
 * PC は従来どおり文ごとに改行するので、HTML は段落 3 つのまま、SP だけ段落を行内表示にしてつなげる */
@media (max-width: 768px) {
  .p-contact-complete-card > div > p {
    display: inline;
  }
}

/* 2026-10-07 先方の追加修正（Backlog -38） */

/* -38 4. 影の「乗算」: 影の色 #c9c9c9（不透明）を黒 21% の半透明に機械置換した（style.css の 21 箇所と本ファイルの 10 箇所）。
 * 白地では同じ見え方（255 × 0.79 ≒ 201 = c9）、色の付いた地では Figma の乗算と同じになる。CSS の box-shadow に乗算指定は無いための代替 */

/* -38 1. フッター下の余白をなくす（全ページ TOP の PC と同じ 0 に）。
 * 静的はページ種別ごとに body / .l-container の下に padding を持っていた（デザインデータのフレームのはみ出し＝デザイン側のミス） */
.feature,
.faq .l-container,
.case-list {
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .feature,
  .case-list {
    padding-bottom: 0;
  }

  /* TOP の SP は .l-container の下に margin が付いていた（5.6567vw ≒ 22px@390） */
  .home .l-container {
    margin-bottom: 0;
  }
}

/* -38 2. 先頭へボタン: 位置を右 56px・下 56px（PC）に。表示タイミングは main.js（現行サイトの値を継承）。
 * 止まる位置は main.js（PC はページ下端から 240px＝-39、SP はフッターの上端） */
@media (min-width: 769px) {
  .c-page-top {
    right: 56px;
    bottom: 56px;
  }
}

/* 止まる位置に達した後は、main.js がボタンの bottom を持ち上げる（現行サイトの .stop 相当。
 * position は fixed のまま bottom だけ動かすので、右の位置や幅は変わらない）。bottom の transition は切る（スクロールに追従させる） */
.c-page-top {
  transition: color .3s ease, background-color .3s ease, opacity .3s ease, transform .3s ease;
}

/* 2026-10-13 改行位置の調整（Backlog -40）。PC のみ。改行は <br class="u-pc-only">、
 * 改行で行末に来る読点は <span class="u-pc-sr-only">、</span> で PC だけ見えなくする（SP の文言・折り返しは変えない）。
 * display:none だと読み上げからも消える（「お届けしデジタル化」と続けて読まれる）ため、画面上だけ隠して読み上げには残す */
@media (min-width: 769px) {
  .u-pc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* 「〜まで 1 行で表示」の指定（TOP スマートプラン・サービス 防災備蓄管理システム）。折り返させない。
 * スマートプランは 2 行目（「暮らしを〜デジタル化の」）も対象（行頭の「 が全角幅になり 1 文字溢れるため）。
 * 1 行は段落幅より少し長い（スマートプラン 575px・557px／段落 554px、防災備蓄 414px／段落 404px）。
 * そのままだとグリッドの列が文字に合わせて広がり、カードの幅や画像の位置がずれるため、
 * 列の幅は据え置き（min-width: 0）、文字だけを右へはみ出させる（防災備蓄はカードの右の余白 32px の内側に収まる） */
@media (min-width: 769px) {
  .u-pc-nowrap {
    white-space: nowrap;
  }

  .p-top-plans__item--smart .p-top-plans__detail,
  .p-feature-options__list article {
    min-width: 0;
  }
}