/* =========================================================
   マンション管理組合のミカタ｜さくら事務所
   新レイアウト
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --red:      #cc3a4a;
  --red-dark: #aa2228;
  --blue:     #0075c1;
  --ink:      #1f1f1f;
  --ink-soft: #444444;
  --line:     #cfcfcf;
  --gold:     #b08c3a;   /* 賞状の額縁用。装飾のみで文字色には使いません */
  --bg:       #ffffff;
  --bg-soft:  #faf6f6;
  --bg-tint:  #faf6f6;

  --ph-bg:    #f0f0f0;
  --ph-line:  #b9b9b9;
  --ph-text:  #767676;

  --font: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
          "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
  --fs-base: 18px;
  --maxw: 1120px;
  --radius: 6px;
}

/* ---------- ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--red-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- レイアウト共通 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: 64px; }

/* 背景色は「白 → 薄いピンク」の2色を必ず交互に並べます。
   .section--soft を付けたセクションがピンク、付けないセクションが白です。
   ▼上から下の並び（セクションを追加・並べ替えする際はこの交互を崩さないでください）
     ファーストビュー 白／お困りごと ピンク／サービス 白／選ばれる理由 ピンク／
     業界団体と管理組合様からの評価 白／メディア掲載 ピンク／資料ダウンロード 白／
     新着情報 ピンク／YouTube 白／お役立ち情報 ピンク／よくある質問 白／
     最終CTA こいグレー
   ※メディアロゴ帯（.medialogos）はファーストビューに続く帯なので白のままです
     （ロゴの視認性を確保するため）。
   ※.section--tint は未使用のため削除しました（--bg-soft と同値だったため）。
     --bg-tint 自体はヘッダー上部帯と人物写真の下地で使用中です。 */
.section--soft { background: var(--bg-soft); }
.center { text-align: center; }

/* スマホだけで効く改行。PCでは display:none なので改行しません。
   長い見出しを「意味のかたまり」で折り返したいときに使います。
   ブラウザ任せの折り返しだと語の途中（例：「サービスを／ご」）で切れて
   読みにくくなるため、切る位置を指定するためのものです。 */
.br-sp { display: none; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head::after {
  content: "";
  display: block;
  width: 84px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--red);
}
.section-title { font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 900; line-height: 1.45; }
.section-title .accent { color: var(--red-dark); }
.section-lead { margin-top: 14px; font-size: 1.04rem; color: var(--ink-soft); }

/* ---------- 画像プレースホルダ（共通） ---------- */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; border: 2px dashed var(--ph-line); border-radius: var(--radius);
  background: var(--ph-bg); color: var(--ph-text);
  font-weight: 700; font-size: .92rem; line-height: 1.7;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 58px; padding: 12px 32px;
  font-size: 1.16rem; font-weight: 700; line-height: 1.3;
  border-radius: 999px; border: 2px solid transparent; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); color: #fff; }
.btn--outline { background: #fff; color: var(--red-dark); border-color: var(--red); }
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--lg { min-height: 66px; font-size: 1.26rem; padding: 14px 40px; }





/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 3px solid var(--red); }
.site-header__main .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 112px; }
.site-header__nav { border-top: 1px solid var(--line); background: #fff; }
.brand { flex: none; }
.brand__logo { display: block; line-height: 1; }
.brand__logo img { display: block; width: 292px; height: auto; }
.header-cta { display: flex; align-items: center; gap: 38px; }
.site-header .btn { min-width: 250px; min-height: 58px; padding: 12px 32px; border-radius: 999px; white-space: nowrap; font-size: 1.16rem; font-weight: 700; }
.site-header .btn--primary,
.cta-final .btn--primary {
  border-color: var(--red);
  transition: background-color .2s ease, color .2s ease;
}
.site-header .btn--primary:hover,
.site-header .btn--primary:focus-visible,
.cta-final .btn--primary:hover,
.cta-final .btn--primary:focus-visible {
  background: #fff;
  color: var(--red-dark);
}
.header-tel { text-align: right; line-height: 1.25; }
.header-tel__line { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.header-tel__badge { display: inline-grid; place-items: center; min-width: 46px; height: 38px; padding-inline: 8px; background: #eb7090; color: #fff; font-size: .92rem; font-weight: 900; letter-spacing: .05em; }
.header-tel .num { display: block; font-size: 2rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; }
.header-tel .num a { color: inherit; }
.header-tel .lbl { display: block; margin-top: 3px; font-size: .9rem; color: var(--ink); font-weight: 900; white-space: nowrap; }
.header-tel .lbl .em { color: var(--red-dark); font-weight: 900; }
.nav-toggle { display: none; }

.gnav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; width: 100%; }
.gnav__item { position: relative; display: flex; min-width: 0; }
.gnav__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 26px;
  transform: translateY(-50%);
  background: #d8a6aa;
}
.gnav__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  color: var(--ink); font-weight: 700; font-size: 1.06rem; line-height: 1.4;
  padding: 15px 24px; white-space: nowrap;
  background: none; border: 0; font-family: inherit;
}
.gnav__link:hover { color: var(--red-dark); background: var(--bg-tint); text-decoration: none; }





/* ---------- 最終CTA ---------- */
.cta-final { background: #494245; color: #fff; text-align: center; }
.cta-final h2 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 900; color: #fff; line-height: 1.45; }
.cta-final p { margin-top: 14px; font-size: 1.12rem; }
.cta-final__actions { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
/* セレクタに要素名を足しています。`.cta-final__tel` だけでは
   `.cta-final p`（1.12rem）の方が詳細度が高く、font-size が効きません。 */
.cta-final p.cta-final__tel { margin-top: 24px; font-size: 1rem; }
/* 電話番号はハイフンで折り返されます（実際に「050-1745-」「3309」で切れていました）。
   nowrap で必ず1つのまとまりとして扱います。ヘッダーの電話番号と同じ対処です。 */
.cta-final__tel .num { font-size: 1.75rem; font-weight: 900; color: #fff; white-space: nowrap; }
.cta-final__tel .num a { color: inherit; }
.cta-final p.cta-final__area { margin-top: 18px; font-size: .98rem; }
.cta-final__area a { color: #fff; text-decoration: underline; }




/* ---------- フッター（サイトマップ型） ----------
   本体サイト（sakurajimusyo.com）のフッターに揃えています。
   全ページ共通で19サービスへの内部リンクを供給する役割があるため、
   サービス列を減らさないでください（SEO上の内部リンク確保）。 */
.site-footer { background: var(--bg-soft); color: var(--ink); border-top: 1px solid var(--line); padding-block: 48px 22px; font-size: .95rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--red-dark); }
.footer-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; margin: 0 auto 32px; }
.footer-banner { display: block; overflow: hidden; border: 1px solid #d8d0d1; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(45,38,40,.08); transition: transform .2s ease, box-shadow .2s ease; }
.footer-banner:hover,
.footer-banner:focus-visible { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(45,38,40,.14); }
.footer-banner img { display: block; width: 100%; height: auto; aspect-ratio: 14 / 5; object-fit: cover; }
.footer-sitemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 34px; }
.fcol__ttl { margin: 28px 0 14px; padding-bottom: 10px; text-align: center; color: var(--red-dark); font-weight: 900; font-size: 1.02rem; line-height: 1.5; border-bottom: 1px solid var(--line); }
.fcol > .fcol__ttl:first-child { margin-top: 0; }
.fcol__list { list-style: none; padding: 0; }
.fcol__list li { position: relative; margin-bottom: 9px; padding-left: 1.3em; line-height: 1.7; }
.fcol__list li::before { content: "—"; position: absolute; left: 0; color: var(--red); }
.footer-cta { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.footer-cta .btn { min-height: 54px; font-size: 1.06rem; padding: 10px 26px; }
.footer-cta .btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.footer-cta .btn--primary:hover,
.footer-cta .btn--primary:focus-visible { background: #fff; color: var(--red-dark); }
.footer-cta .btn--outline { background: #fff; color: var(--red-dark); border-color: var(--red); }
.footer-cta .btn--outline:hover,
.footer-cta .btn--outline:focus-visible { background: var(--red); color: #fff; }
.footer-cta .btn--line { background: #06c755; color: #fff; border-color: #06c755; }
.footer-cta .btn--line:hover,
.footer-cta .btn--line:focus-visible { background: #fff; color: #008c3b; }
.footer-meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 14px 30px; align-items: start; font-size: .88rem; color: var(--ink-soft); line-height: 1.8; }
/* 住所のあとで改行し、TEL/FAXを次の行に落としています。
   番号がハイフンで折り返さないよう nowrap も指定しています
   （ヘッダー・最終CTAの電話番号と同じ対処）。 */
.footer-meta__tel { white-space: nowrap; }
.footer-meta__brand strong { color: var(--ink); }
.footer-meta__links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.footer-meta__notice { grid-column: 1 / -1; white-space: nowrap; }
.footer-copy { margin-top: 16px; text-align: center; font-size: .84rem; color: var(--ink-soft); }

/* モバイル追従CTA */
.sticky-cta { display: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 980px) {
  .site-header__main .wrap { min-height: 88px; gap: 20px; }
  .brand__logo img { width: 238px; }
  .header-cta { gap: 18px; }
  .site-header .btn { min-width: 205px; min-height: 58px; padding-inline: 20px; }
  .header-tel .num { font-size: 1.5rem; }
  .header-tel__badge { min-width: 40px; height: 32px; font-size: .8rem; }
  
  .footer-sitemap { grid-template-columns: repeat(2, 1fr); }
  /* 1カラムになる幅では「番号 → 見出し → 写真 → 本文」の順にします。
     ------------------------------------------------------------
     写真は HTML上では .reason-row__body の“外”にあるため、そのままだと
     本文をすべて読み終えた最後に写真が来ます。見出しの直後に置きたいので、
     .reason-row__body を display: contents にして中の要素を .reason-row の
     直接の子として扱い、order で写真を見出しの次に差し込んでいます
     （ファーストビューで使っているのと同じ手法です）。
     ・gap は 0 にしています。display: contents で子要素が全部 flex の項目に
       なるため、gap を残すと番号と見出しの間などにも18pxが入ってしまいます。
       間隔は各要素の margin で作ります。
     ・偶数行の写真を左に出すPCの指定（order: -1）も、ここでは 3 に上書きして
       01〜03すべて同じ並び順に揃えています。
     ・並び替えは見た目だけで、HTMLの読み上げ順（番号→見出し→本文→写真）は
       変わりません。写真は装飾のため、読み上げ順が前後しても意味は崩れません。 */
  /* align-items は基本ルールで center（PCの2カラムで写真と本文を天地中央に
     揃えるため）です。1カラムでは縦並びになるので center が“横方向の中央寄せ”
     として効いてしまい、番号(01/02/03)やリンクが中央に寄ってしまいます。
     stretch に戻して、番号は左・リンクは右（justify-content: flex-end）のままにします。 */
  /* 見出し「さくら事務所が選ばれる理由」と「01」の間を詰めます。
     .section-head の margin-bottom と .reason-row の padding-top の合計です。
     「01」は44.8pxの大きな数字で字面の上に余白があるため、
     数値どおりより広く見えます。合計34pxにしています。

     ・2行目以降の padding-top（40px）は変えていません。区切り線と次の番号の
       間隔はそのままにしたいためです（隣接セレクタで1行目だけを対象にしています）。
     ・PCは従来どおり80pxのままです（横幅が広く、詰まって見えないため）。 */

  .header-tel .lbl { display: none; }
  .site-header__nav { display: none; }
  .site-header.is-open .site-header__nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 0; border-bottom: 3px solid var(--red);
    padding-bottom: 10px; max-height: 76vh; overflow-y: auto;
  }
  .site-header.is-open .gnav { grid-template-columns: 1fr; align-items: stretch; }
  .site-header.is-open .gnav__item { display: block; border: 0; border-bottom: 1px solid var(--line); }
  .site-header.is-open .gnav__item::before { display: none; }
  .site-header.is-open .gnav__link { width: 100%; justify-content: space-between; padding: 16px 6px; font-size: 1.1rem; }
}
@media (max-width: 720px) {
  /* 50代以上が主読者のため、スマホでも本文サイズは下げません（18pxのまま） */

  /* スマホでセクション見出し・リードを1行に収める
     ------------------------------------------------------------
     PCの指定（clamp の下限 1.7rem＝27.2px）がそのままスマホにも効いていたため、
     375px幅では「こんなお困りごとはありませんか？」が392px必要なのに
     使える幅が335pxしかなく、「か？」だけが2行目に落ちていました。
     ・PCの値（1.7rem／1.04rem）を上限に置いたまま、vw で頭を押さえています。
       min() なので721px以上には影響せず、境界で文字サイズが飛びません。
     ・実機幅 375px / 360px / 320px で1行になることを実測で確認しています
       （375px:21.8px ／ 360px:20.9px ／ 320px:18.6px）。
     ・リードの vw 指定は 360px 以下で必要です。スマホの文（「判断には、…」）は
       375pxなら等倍でも収まりますが、360pxでは323px必要／316pxしかないためです。
     ・「テレビ出演・メディア掲載／最新情報」だけは2行ですが、
       これは <br> で意図的に改行しているものです。
     ・見出しはこの1行で全セクションに効きます。個別に指定を足すと
       セクションごとに文字サイズがバラつくので、増やさないでください。 */
  .section-title { font-size: min(1.7rem, 5.8vw); }
  /* サービス一覧のリードで「工事も管理も請け負わない第三者の立場で／対応します。」と
     改行させています（br.br-sp）。この1行目は 16.64px で311px必要で、
     375px幅なら収まりますが320px幅では276pxしかなく、指定位置以外でも折り返します。
     そのためPCの値を上限に vw で頭を押さえています。
     375pxでは等倍（16.64px）のままなので、他セクションのリードの見た目は変わりません。 */
  .section-lead  { font-size: min(1.04rem, 4.5vw); }
  /* .pc-only ＝ PCだけに出す文字（スマホでは隠す）。
     ・お困りごとのリード：PCは「管理組合の判断には、…」の完全な文、
       スマホは「判断には、…」。文字サイズだけでは1行に収まらず
       （13.6pxまで落とす必要があり小さすぎる）、PCの文言は変えたくないためです。
     ・お役立ち情報のリード：「知識を、」の読点。スマホでは同じ位置で改行するので、
       読点と改行が重なって間延びしないよう読点だけ隠しています。
       ここは文字サイズの調整は不要です（一番長い行が239pxで、320px幅でも収まります）。
     テキストはHTMLに1つしか持たせていません（同じ文を2つ置くと重複コンテンツに
     なるため）。スマホ専用の改行 .br-sp と対になる指定です。 */
  .pc-only { display: none; }

  .section { padding-block: 48px; }
  .site-header__main .wrap { min-height: 72px; }
  .brand__logo img { width: min(180px, 62vw); }
  /* 変更：スマホでも理由セクションの画像を表示します。
     ただし4:3のままでは縦を取りすぎるため、16:9に切り替えて高さを抑えています。
     【DES/DEV】実画像は1ファイルで両対応させるため、<img> に
     object-fit: cover を指定してください（PC＝4:3／スマホ＝16:9でトリミング）。
     どちらの比率でも主題が切れない構図でご用意ください。 */
  .worry-grid, .col-grid, .yt-grid, .svc-panels, .footer-sitemap, .footer-banners,
  .footer-meta { grid-template-columns: 1fr; }
  .footer-meta__notice { white-space: normal; }
  .footer-meta__links { justify-content: flex-start; }
  .footer-cta .btn { width: 100%; }
  .header-tel { display: none; }
  .header-cta > .btn { display: none; }
  .hero__actions .btn, .cta-final__actions .btn { width: 100%; }

  /* 最終CTAの改行を整えます。
     ・見出し「まずは、お気軽にご相談ください。」は27.2pxで385px必要ですが
       使える幅は333pxしかなく、「さい。」だけが2行目に落ちていました。
       PCの値を上限に vw で押さえて1行に収めます（375px→22.5px／320px→19.2px）。
     ・リード・電話・注記は br.br-sp で意味の区切りに改行位置を指定しています。
     ・注記は2文に分けても1文目が371px必要なため、こちらもサイズに上限を付けます
       （375px→15.4px／320px→13.1px）。 */
  .cta-final h2 { font-size: min(1.7rem, 6vw); }
  .cta-final p.cta-final__area { font-size: min(.98rem, 4.1vw); }
  
  .br-sp { display: inline; }

  /* 「その悩みに応えるサービスを／ご用意しています。」
     「工事会社にも管理会社にも属さない立場で、／組合の判断を支えます。」
     の位置で改行させています（br.br-sp）。
     ただし文字サイズが等倍のままだと、狭い画面で1行目が入りきらず
     指定した位置以外でも折り返してしまいます。
       ・「その悩みに応えるサービスを」は 26.4px で326px必要／375pxでは331pxしかない
       ・「工事会社にも…立場で、」は 16px で305px必要／320px幅では276pxしかない
     そこでPCの値を上限に vw で頭を押さえ、320pxまで指定どおりの2行になるように
     しています（min() なので721px以上には影響しません）。 */
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
  }
  .sticky-cta .btn { flex: 1; min-height: 52px; font-size: 1.04rem; padding: 8px 10px; }
  body { padding-bottom: 72px; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; }
  .nav-toggle span { width: 26px; height: 3px; background: var(--ink); border-radius: 2px; }
}

/* ワイヤーフレームであることを示す帯（本番では削除） */
.wf-ribbon{background:#f4f4f4;color:#aa2228;text-align:center;font-weight: 900;
  font-size:.88rem;padding:8px 12px;border-bottom:1px dashed #aa2228;}

/* ============================================================
   スマホのメニューボタン
   ・赤の箱＋白抜きアイコン＋「メニュー」の文字。線3本だけにしないでください
     （何のボタンか伝わらなくなります）。
   ・開いている間は「閉じる」＋×印に変わります。
   ・タップ領域は 58x52px 以上を確保しています。
   ============================================================ */
@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    width: 58px; min-height: 52px; padding: 8px 6px 6px;
    background: var(--red); color: #fff;
    border: 0; border-radius: 8px;
  }
  .nav-toggle span {
    width: 24px; height: 2.5px; background: #fff; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle::after {
    content: "メニュー"; margin-top: 3px;
    font-size: .64rem; font-weight: 900; line-height: 1; letter-spacing: .02em;
  }
  /* 開いているとき */
  .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .site-header.is-open .nav-toggle::after { content: "閉じる"; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}



/* ============================================================
   ★スマホのメニュー：「サービス」を押すとカテゴリが出てくる開閉式
   ------------------------------------------------------------
   ・ドロワー内の「サービス」を押すと、5カテゴリが下に開きます。
     カテゴリ名を選ぶと、画面のサービスセクションの該当カテゴリへ移動します。
   ・PCでは従来どおりリンク1本（サービス一覧へ）のままです。
   ・画面内のサービスセクションの見せ方は変更していません。
   ============================================================ */
.gnav__sub { display: none; }
.gnav__link--sp { display: none; }

@media (max-width: 980px) {
  .gnav__link--pc { display: none; }
  .gnav__link--sp { display: flex; text-align: left; }
  /* 開閉の目印 */
  /* 開閉の目印。＋より三角のほうが「下に開く」と伝わりやすいため。
     小さいサイズでもはっきり見えるよう、塗りつぶしの ▼ を使っています
     （白抜きの ▽ にする場合はこの2文字を差し替えてください）。 */
  .gnav__link--sp::after {
    content: "▼"; color: var(--red); font-size: 1rem; font-weight: 900; line-height: 1;
    transition: transform .2s ease;
  }
  .gnav__item--has-sub.is-sub-open .gnav__link--sp::after { content: "▲"; }

  /* カテゴリの一覧 */
  .gnav__item--has-sub.is-sub-open .gnav__sub { display: block; padding: 0 0 10px; }
  .gnav__sub a {
    position: relative; display: block; padding: 13px 6px 13px 26px;
    color: var(--ink); font-size: 1rem; font-weight: 700; text-decoration: none;
  }
  .gnav__sub a::before {
    content: ""; position: absolute; left: 8px; top: 50%;
    width: 10px; height: 2px; background: var(--red);
  }
  .gnav__sub li + li { border-top: 1px dashed var(--line); }
}

@media (max-width: 720px) {
  /* アンカーで飛んだとき、追従ヘッダーに隠れないように */
  .svc-panel { scroll-margin-top: 92px; }
  #services, #reasons, #media, #faq, #news, #columns, #download { scroll-margin-top: 88px; }
}

/* ============================================================
   ★PC：下にスクロールすると、グローバルナビだけが上端に残る
   ------------------------------------------------------------
   ・上段（ロゴ・電話・相談ボタン）は通常どおり流れて消え、
     下段のナビ（55px）だけが固定されます。
   ・仕組み：ヘッダー全体を position:sticky のまま、上段の高さ分だけ
     上へずらして固定しています（top を負の値にする）。
     上端まで戻ると上段も自然に戻ります。
   ・上段の高さは JavaScript で実測して --header-main-h に入れています。
     JSが動かない場合も 112px（実測値）で正しく動きます。
   ・スマホ（980px以下）はナビがドロワーに入るため、従来どおり
     ヘッダー全体が固定されます。
   ============================================================ */
@media (min-width: 981px) {
  .site-header { top: calc(-1 * var(--header-main-h, 112px)); }

  /* 固定されたナビ（55px）に見出しが隠れないようにする */
  #services, #reasons, #media, #faq, #news, #columns, #download,
  .svc-panel { scroll-margin-top: 74px; }
}

/* ============================================================
   PCヘッダーの構成（3段）
   ------------------------------------------------------------
   ・1段目：運営会社の表記のみ。この帯にリンクはありません。
     区切り線と地色は付けず、ロゴと一体に見せています。
   ・2段目：ロゴ ／ 電話 ／ 相談ボタン
   ・3段目：グローバルナビ6項目
     （サービス／選ばれる理由／メディア実績／よくある質問／お役立ち情報／会社概要）
     PCは6列グリッド、スマホはドロワー内に縦積み。ナビ行にボタンは置きません。
   ・スクロールすると1・2段目は流れ、3段目のナビだけが上端に固定されます。
     2段目の高さはJavaScriptで実測して --header-main-h に入れています
     （JSが動かない場合も 112px で正しく動きます）。
   ・スマホ（980px以下）はヘッダー全体が固定＋ドロワーです。
   ============================================================ */
.site-header__util { display: none; }

@media (min-width: 981px) {
  /* --- 運営会社の表記（ロゴと一体で見せる） ---
     区切り線と地色は付けません（背景はロゴ行と同じ白）。
     「運営会社の説明 → ロゴ」がひとつのかたまりとして読めるようにするためです。
     ヘッダー全体は下辺の赤3pxで区切られるので、境目がなくても輪郭は保たれます。 */
  .site-header__util { display: block; background: #fff; }
  /* min-height をやめ、上だけに余白を持たせています。
     min-height があると文字の下に余白が残り、ロゴから離れて見えるためです。 */
  .site-header__util .wrap { display: flex; align-items: center; gap: 20px; min-height: 0; padding-top: 8px; padding-bottom: 0; }
  /* 本文の line-height 1.9 を継ぐと、文字の下に約6pxの空きができてロゴから離れます。
     1行しかない文なので 1.35 まで詰めています。 */
  .site-header__util-brand { font-size: .76rem; font-weight: 700; line-height: 1.35; color: var(--ink-soft); white-space: nowrap; }

  /* --- メイン1行 --- */
  .site-header__main .wrap { min-height: 88px; gap: 16px; }
  .brand__logo img { width: 205px; }
  .site-header__nav { border-top: 0; flex: 1 1 auto; min-width: 0; }
  /* ナビ行は共通の .wrap（max-width: 1120px／左右20px／中央寄せ）に従わせています。
     max-width を外すと、大きな画面でナビだけが画面いっぱいに広がり、
     ロゴ行・各セクション・フッターと左右がずれます。
     上下の区切り線と赤い下辺は .site-header__nav / .site-header 側に付いているため、
     線は画面いっぱいに引かれます（ヘッダーの構造線として意図的）。 */
  .gnav { display: flex; width: auto; justify-content: center; }
  .gnav__item:not(:first-child)::before { display: none; }   /* 1行なので区切り線は外す */
  /* スマホのドロワー専用の項目はPCでは出しません（6列グリッドを崩さないため） */
  .gnav__item--sp { display: none; }
  .gnav__link { padding: 10px 13px; font-size: 1.02rem; }
  .header-cta { gap: 16px; }
  .site-header .btn { padding: 13px 22px; }
  .header-tel__badge { min-width: 38px; height: 32px; }
  .header-tel .num { font-size: 1.85rem; }
  .header-tel .lbl { font-size: .78rem; }

  /* --- 上帯の高さ分だけずらして、メイン1行を固定 --- */
  .site-header { top: calc(-1 * var(--header-util-h, 33px)); }

  /* 固定されたメイン行（約89px）に見出しが隠れないように */
  #services, #reasons, #media, #faq, #news, #columns, #download,
  .svc-panel { scroll-margin-top: 108px; }
}

/* 電話番号は nowrap ＋ 縮まない指定にしています。
   外すとハイフンで「050-1745-」「3309」と2行に折れます。 */

/* 電話番号がハイフンで折り返さないようにする（全幅共通の安全策） */
.header-tel { flex: 0 0 auto; }
.header-tel .num { white-space: nowrap; }
.header-tel__line { flex-wrap: nowrap; }

@media (min-width: 981px) {
  /* --- メイン行：ロゴ／電話／相談ボタン --- */
  /* ロゴは幅240px＝高さ約81px。92pxだとロゴの上下に約6pxずつ余白が入るため、
     86pxまで詰めて上帯の文字に寄せています（相談ボタンは58pxなので収まります）。 */
  .site-header__main .wrap { min-height: 86px; gap: 24px; }
  .brand__logo img { width: 240px; }
  .header-cta { gap: 22px; flex: 0 0 auto; }
  .site-header .btn { padding: 14px 26px; }
  .header-tel .num { font-size: 1.9rem; }
  .header-tel .lbl { font-size: .8rem; }

  /* --- ナビ行（固定される） --- */
  .site-header__nav { border-top: 1px solid var(--line); }
  .site-header__nav .wrap { display: flex; align-items: stretch; gap: 16px; }
  /* 列数はナビ項目数と揃えてください（項目を増減したらこの数字も変更） */
  .gnav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 1 1 auto; width: auto; }
  .gnav__link { padding: 15px 12px; font-size: 1.06rem; }
  .gnav__item:not(:first-child)::before { display: block; }   /* 区切り線を戻す */
  /* 先頭の .gnav__item--sp はPCでは非表示のため、その次の「サービス」が
     :not(:first-child) に該当してしまいます。左端に線が出ないよう打ち消します。
     上の指定と詳細度が同じなので、必ずこの位置（あと）に置いてください。 */
  .gnav__item--sp + .gnav__item::before { display: none; }


  /* --- 上帯とメイン行の高さ分だけずらして、ナビ行を固定 --- */
  .site-header { top: calc(-1 * var(--header-above-nav-h, 126px)); }

  /* 固定されたナビ行（約56px）に見出しが隠れないように */
  #services, #reasons, #media, #faq, #news, #columns, #download,
  .svc-panel { scroll-margin-top: 76px; }
}

/* ============================================================
   右下の追従CTA（PCのみ）
   ------------------------------------------------------------
   ・表示条件：PC（981px以上）／スクロール600px超／最終CTAが画面外
   ・アニメーションは prefers-reduced-motion に配慮しています
   ============================================================ */
.float-cta { display: none; }

@media (min-width: 981px) {
  /* 「押せる」ことが一目で伝わるように、次の3つを組み合わせています。
       ① 右端に白い丸＋矢印（サイトの他のリンクと同じ「›」を使用）
       ② 下辺に濃い赤の縁を入れて、浮いたボタンらしい立体感を出す
       ③ 押すと沈む（:active）／触ると白地に色が反転する（:hover）
     文字だけの赤い塊だと「見出し」や「ラベル」に見えてしまうためです。 */
  .float-cta {
    /* min-width で幅を確保しているため、justify-content: center が無いと
       テキストが左に寄ります（自然な幅より約21px広いので、その分が右に余る）。 */
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px;
    position: fixed; right: 24px; bottom: 24px; z-index: 60;
    min-width: 215px; padding: 14px 28px;
    /* 枠線は通常時は「赤地に赤」で見えませんが、ホバーで白に反転したときの輪郭になります。
       常に持たせておくことで、反転してもボタンの大きさが変わりません（box-sizing: border-box）。
       padding を 16/30 → 14/28 にして、枠線2px分を相殺しています。 */
    background: var(--red); color: #fff; border: 2px solid var(--red);
    border-radius: 999px; text-decoration: none;
    box-shadow: 0 4px 0 var(--red-dark), 0 9px 24px rgba(82, 42, 48, .32);
    /* カーソルの印を右下に重ねるための基準 */
    overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .25s ease, transform .18s ease, visibility .25s ease,
                background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .18s ease;
  }
  .float-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  /* 他のボタンと同じく、触ると白地に反転します（.btn--primary:hover と同じ挙動） */
  .float-cta:hover, .float-cta:focus-visible {
    background: #fff; color: var(--red-dark); border-color: var(--red); text-decoration: none;
  }
  .float-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  /* 触ると「押し込まれる」。下辺の縁が縮んで沈むので、押した感じが出ます */
  .float-cta.is-visible:hover,
  .float-cta.is-visible:focus-visible {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--red-dark), 0 6px 16px rgba(82, 42, 48, .34);
  }
  .float-cta.is-visible:hover .float-cta__cursor {
    animation: none; transform: translate(-1px, 1px) scale(.96);
  }
  /* 押したときに沈む */
  .float-cta.is-visible:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--red-dark), 0 3px 10px rgba(82, 42, 48, .3);
  }
  .float-cta__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .float-cta__main { font-size: 1.14rem; font-weight: 900; white-space: nowrap; }
  .float-cta__sub { margin-top: 2px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
  /* 右下に重ねるマウスカーソルの印。
     赤い塊が「ラベル」に見えてしまう問題への対策で、
     「これは押せるものだ」を図で直接伝えます。
     ボタンの輪郭から少しはみ出させることで、上に載っている感じを出しています。 */
  .float-cta__cursor {
    /* 丸い背景は付けません（カーソルの形だけを見せます）。
       ボタンの外にはみ出した部分が背景に溶けないよう、影で輪郭を付けています。
       クリックを表す放射線を添えて「押せる」ことを図で伝えます。 */
    position: absolute; right: -12px; bottom: -16px;
    display: grid; place-items: center;
    filter: drop-shadow(0 1px 3px rgba(45, 38, 40, .4));
    transition: transform .18s ease;
  }
  .float-cta__cursor svg { display: block; }
  /* ときどき小さく動かして「触れるもの」だと気づかせる */
  @keyframes float-cta-tap {
    0%, 68%, 100% { transform: translate(0, 0); }
    78%           { transform: translate(-3px, -3px); }
    88%           { transform: translate(0, 0); }
  }
  .float-cta.is-visible .float-cta__cursor { animation: float-cta-tap 2.8s ease-in-out infinite; }
  .float-cta:hover .float-cta__cursor { animation: none; transform: translate(-2px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを控える設定の端末では、揺れを止めます（印は出したままにします） */
  .float-cta { transition: none; }
  .float-cta.is-visible .float-cta__cursor { animation: none; }
}

/* ============================================================
   全ボタンを「押し込む」形に統一 ＋ ホバーで色反転
   ------------------------------------------------------------
   ・下辺に濃い色の縁を入れて「押せる立体感」を出します。
     触ると2px、押すと4px沈み、それに合わせて縁が縮みます。
   ・色反転は基本ルール（.btn--primary / .btn--outline）で全ボタンに効かせています。
   ・ホバーの沈み込みは @media (hover: hover) に入れています。
     タップ後にホバー状態が残る端末で、沈んだままになるのを防ぐためです。
     押下（:active）は外に置いているので、スマホのタップでも効きます。
   ・transform と box-shadow を含む transition を後段で再定義しています
     （個別ルールに上書きされないようにするため）。
   ・LINEボタン（.btn--line）は対象外です。公式のデザイン規定に沿った素材を
     使う想定のため、独自の立体感や沈み込みを加えていません。
   ============================================================ */
.btn {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .12s ease;
}
/* 既存ルールが transition を上書きしてしまう箇所を上書きし直す */
.site-header .btn, .cta-final .btn, .svc-panel--cta .btn,
.download__actions .btn, .footer-cta .btn, .hero__actions .btn, .sticky-cta .btn {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .12s ease;
}

/* 押せる立体感（下辺の縁） */
.btn--primary { box-shadow: 0 4px 0 var(--red-dark); }
.btn--outline { box-shadow: 0 4px 0 var(--red); }

/* 色反転（全ボタン共通に） */
.btn--primary:hover, .btn--primary:focus-visible {
  background: #fff; color: var(--red-dark); border-color: var(--red);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--red); color: #fff; border-color: var(--red);
}

/* マウス操作の端末だけ、ホバーで沈ませる */
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-dark); }
  .btn--outline:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--red); }
}

/* 押した瞬間はさらに深く沈む（スマホのタップでも効きます）
   LINEボタンは下辺の縁が無いため、沈ませないよう除外しています */
.btn:not(.btn--line):active { transform: translateY(4px); }
.btn--primary:active { box-shadow: 0 0 0 var(--red-dark); }
.btn--outline:active { box-shadow: 0 0 0 var(--red); }

@media (prefers-reduced-motion: reduce) {
  /* 動きを控える設定では沈む動きを止めます（色反転は残します） */
  .btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  .btn--primary:hover, .btn--outline:hover, .btn:active { transform: none; }
}





/*旧レイアウト対応*/
#mainContent article {
    margin-right: 0 !important;
}