/* ============================================================
   きてこ 公式サイト — トップページ専用のスタイル

   ★ ここには「トップにしか無いもの」だけを置く。
     ヘッダー・フッター・ボタン・トークンなど、全ページで使うものは
     site.css が持つ。同じセレクタを両方に書かないこと。

   ★ 共通のものをトップだけ変えたいときは、必ず .home を頭に付ける
     （例: .home .section { padding: 104px 0; }）。
     付けずに書くと、site.css の定義を黙って上書きすることになり、
     どちらが本当なのか分からなくなる。実際 2026/09/14 まで、
     .h2 が 46px と 40px、.section が 104px と 88px で食い違っていた。
     読み込み順でたまたまトップ側が勝っていただけで、意図した形では
     なかった。同名のセレクタは今ゼロにしてある。

   .home は <body class="home"> が付ける（site/pages/index.html の bodyclass）。
   ============================================================ */

.home .section { padding: 104px 0; }
.home .h2 { font-size: 46px; line-height: 1.35; font-weight: 900; color: var(--ink); }
.home .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 56px; }

/* ── ヘッダー ── */

/* ── ヒーロー ── */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #FFF4F7 0%, #FFFFFF 55%, #FFF1E6 100%); padding: 72px 0 72px; }
.hero::before { content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,97,142,.18), rgba(240,97,142,0)); right: -140px; top: -220px; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: 15px; font-weight: 700; color: var(--ink-2); box-shadow: 0 4px 14px rgba(240,97,142,.08); }
.badge.line { color: #fff; border-color: var(--line-green); background: var(--line-green); box-shadow: 0 6px 16px rgba(6,199,85,.28); }
.hero h1 { font-size: 62px; line-height: 1.2; font-weight: 900; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--brand); }
.h1-sub { font-size: 19px; font-weight: 700; color: var(--ink-2); line-height: 1.7; }
.hero .lead { font-size: 18px; color: var(--ink-2); max-width: 560px; }
.entrances { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; }
.entrance { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 2px solid var(--brand); color: var(--ink); transition: transform .15s, box-shadow .15s; }
.entrance:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(240,97,142,.18); color: var(--ink); }
.entrance.customer { border-color: var(--rule-soft); }
.entrance.customer:hover { border-color: var(--brand); }
.entrance small { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--brand-dark); }
.entrance b { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 22px; font-weight: 900; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.entrance b::after { content: ""; width: 10px; height: 10px; border-top: 2.5px solid var(--brand); border-right: 2.5px solid var(--brand); transform: rotate(45deg); flex-shrink: 0; }
.entrance span { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.hero-visual { position: relative; }
.hero-photo { border-radius: 200px 200px 32px 32px; overflow: hidden; box-shadow: 0 30px 70px rgba(178,56,97,.18); aspect-ratio: 4 / 5; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.float { position: absolute; background: #fff; border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 14px 40px rgba(178,56,97,.16); font-size: 13px; }
.float .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--line-green); color: #fff; }
.float .ic svg { width: 20px; height: 20px; }
.float b { display: block; font-size: 14px; color: var(--ink); }
.float span { font-size: 12px; color: var(--ink-3); }
.float-1 { left: -24px; bottom: 90px; }

/* ── 業種別バナー（FV直下） ── */
.industries { padding: 56px 0 96px; }
.ind-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.ind-head .section-head { margin-bottom: 0; }
.ind-nav { margin-top: 0; flex-shrink: 0; gap: 12px; }
/* 一行の流れるスライダー。
   画面の端で切れて続きがあると分かるよう、.wrap の外に出して全幅で使う。

   JSが無いときは「横にスクロールできる一行」のまま止まっている（.on が付かない）。
   動かないだけで、指でも矢印キーでも最後まで見られる。
   JSが付ける .on で、複製した2組目を使って途切れなく流す。 */
.ind-marquee { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ind-marquee::-webkit-scrollbar { display: none; }
.ind-track { display: flex; gap: 20px; width: max-content; padding: 4px max(24px, calc(50vw - 620px)); }
/* 自動送りは CSS アニメーションではなく、実際の横スクロール位置を
   少しずつ進めて出している。CSS の transform で動かすと見た目は同じでも
   「止めたあと指で動かす」ができない（スクロール位置が動いていないため）。
   スクロールで動かしていれば、指でも矢印キーでも、そのまま続きを送れる。 */
.ind-marquee.on .ind-track { padding: 4px 0; }
/* 端を薄く落として、画面の外へ続いていることを示す */
.ind-marquee.on::before, .ind-marquee.on::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none; }
.ind-marquee.on::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.ind-marquee.on::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
/* 幅はいちばん長い「整体・リラクゼーション」が1行に収まるところで決めている。
   12文字 × 22px ＋ 矢印16px ＋ 左右の余白48px ＝ 328px。
   これより狭いと語の途中で折れる（「リラクゼー／ション」）。
   長い業種名を足すときは、ここも見直すこと。 */
.ind-marquee .ind-body b { font-size: 22px; }
.ind { flex: 0 0 340px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; border-radius: 22px; overflow: hidden; color: #fff; background: var(--brand-deep); transition: transform .15s, box-shadow .15s; }
.ind:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(240,97,142,.26); color: #fff; }
.ind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ind:hover img { transform: scale(1.04); }
/* 黒い覆いは硬かったので、ブランドのピンク #B23861 に変えた（2026/09/14）。
   **写真の文字の真下が明るい**（整体は平均236＝ほぼ白）ので、薄くすると
   白文字が沈む。実際の写真から合成色を測って濃さを決めた。
   明るいピンクは、薄く広く敷くと白文字が沈む。逆に**下だけほぼ不透明**に
   すれば、色そのもののコントラスト（#B23861 と白で 5.8）が効く。
   そのため上35%は完全な透明のまま、下で一気に色を置いている。
   2026/09/15 に #f0618e へ変更。明るくしたぶん白文字は下がるので、
   覆いの立ち上がりを 35%→32%、下の濃さを .9→.96 にして稼いである。
   それでも小さい文字は 4.5 に届かない（色を明るくすると白では届かない）。
   覆いはカード全体ではなく「文字の入れ物」にかけている。カード全体に
   かけていたときは、文字の位置によって濃さが変わり、下2行が写真の
   明るい部分に乗って 2.1〜2.3 まで落ちていた（2026/09/15 実測）。
   実際の写真で測った比:
   いじるときは数値で測り直すこと。目では「読めている気」になる。 */
.ind::after { display: none; }
.ind-body { position: relative; z-index: 1; padding: 66px 24px 22px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, rgba(240,97,142,0) 0%, rgba(240,97,142,.97) 42%, rgba(240,97,142,1) 100%); }
.ind-body small { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: #fff; }
.ind-body b { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 25px; font-weight: 900; display: flex; justify-content: space-between; align-items: center; gap: 8px; line-height: 1.3; }
.ind-body b::after { content: ""; width: 10px; height: 10px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); flex-shrink: 0; }
.ind-body span { font-size: 14px; color: #fff; line-height: 1.6; }
.ind-status { position: absolute; left: 16px; top: 16px; z-index: 1; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--brand-dark); }
.ind-status.soon { background: rgba(240,97,142,.95); color: #fff; }
.ind.other { background: linear-gradient(160deg, #FFF4F7, #FDE9F0); color: var(--ink); border: 2px dashed var(--brand); }
.ind.other::after { display: none; }
/* 覆いは .ind-body に移した（2026/09/15）。「そのほかのお店」は写真が無く
   文字も濃い色なので、その覆いを外し、上の余白も元に戻す。
   移したときにこの上書きを入れ忘れて、薄いカードにピンクが敷かれた。 */
.ind.other .ind-body { background: none; padding-top: 22px; }
.ind.other:hover { color: var(--ink); }
.ind.other .ind-body small { color: var(--brand-dark); }
.ind.other .ind-body b::after { border-color: var(--brand); }
.ind.other .ind-body span { color: var(--ink-2); }

/* ── 3つの約束 ── */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.promise { padding: 36px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.promise .icon-lg { width: 84px; height: 84px; }
.promise .icon-lg svg { width: 40px; height: 40px; }
.promise h3 { font-size: 24px; line-height: 1.45; font-weight: 900; }
.promise p { font-size: 17px; color: var(--ink-2); }

/* ── 写真＋文章の段 ── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split.rev .split-copy { order: 2; }
.split-copy { display: flex; flex-direction: column; gap: 18px; }
.split-copy .section-head { margin-bottom: 0; }
.split-copy ul { display: flex; flex-direction: column; gap: 10px; }
.split-copy li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; color: var(--ink-2); }
.split-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 24px 60px rgba(178,56,97,.14); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ── 「くわしく」リンクと、送りボタン ── */
.slider-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 20px; }
.slider-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--rule-soft); background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.slider-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.slider-btn svg { width: 18px; height: 18px; }

/* ── お客様向け ── */
.cust-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cust-card { padding: 26px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.cust-card h3 { font-size: 20px; font-weight: 900; }
.cust-card p { font-size: 16px; color: var(--ink-2); }
.callout { margin-top: 24px; padding: 22px 26px; border-radius: 18px; background: #fff; border: 2px solid var(--brand); display: flex; flex-direction: column; gap: 6px; }
.callout b { font-size: 18px; }
.callout p { font-size: 16px; color: var(--ink-2); }

/* ── お知らせ＋静岡 ── */
.news-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.home .news-list li { display: grid; grid-template-columns: 110px 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); font-size: 17px; }
.news-list a { color: var(--ink); }
.news-list a:hover { color: var(--brand-dark); }
.local-card { border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--rule); display: flex; flex-direction: column; }
.local-card .photo { aspect-ratio: 16 / 9; position: relative; }
.local-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.local-card .stamp { position: absolute; right: 18px; top: 18px; width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, #F0618E, #F79A4D); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; line-height: 1.2; transform: rotate(-8deg); box-shadow: 0 12px 26px rgba(217,73,122,.3); }
.local-card .stamp b { font-size: 20px; } .local-card .stamp small { font-size: 9px; letter-spacing: .1em; }
.local-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.local-card h2 { font-size: 22px; font-weight: 900; }
.local-card p { font-size: 16px; color: var(--ink-2); }

/* ── 締めのCTA ── */
.home .cta-band { position: relative; background: linear-gradient(135deg, #FDE9F0 0%, #FFF4F7 50%, #FFF1E6 100%); padding: 104px 0; overflow: hidden; }
.home .cta-band h2 { font-size: 50px; font-weight: 900; line-height: 1.3; }

/* ── フッター（販売LPと同じ） ── */
/* .footer-col a の白文字が .btn-white より強く、白地に白文字で消えていた。詳細度を上げて戻す */

/* ── スマホの追従ボタン ── */

/* ── 右下のフローティング（お客様に見える画面のデモ） ──
   緑一色のボタンは硬かったので、白地＋スマホの絵に変えた。
   すこし傾けて、押すと起き上がる。
   追従する申込ボタン（.sticky-cta）は 980px 以下で画面の下端に出るので、
   フローティングはその上へ逃がす。重ねると両方押せなくなる。
   「エミュレーター」という言葉は表に出さない（役割で呼ぶ）。 */
/* ここには「緑の帯に白文字」だった頃の .demo-fab が残っていて、
   後ろにある分だけ上の定義に勝っていた。.demo-fab small の色が
   rgba(255,255,255,.86) になるため、白い背景に白い文字が乗り、
   「スマホ画面で」が見えなくなっていた（文字は出ている。読めないだけ）。
   2026/09/14 に削除。フッターの .btn-white が白地に白文字だったのと同じ壊れ方。 */

/* ── スクロールで現れる（.in は JS が付ける。JS が動かなければ全部見える） ── */
html.rv-on .promises .rv:nth-child(2), html.rv-on .cust-cards .rv:nth-child(2) { transition-delay: .12s; }
html.rv-on .promises .rv:nth-child(3), html.rv-on .cust-cards .rv:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ind img, .ind, .entrance, .demo-fab { transition: none; }
  /* 勝手に動くものを止める設定なので、業種のスライダーも流さない。
     横スクロールに戻すので、指でも矢印キーでも最後まで見られる。 */
  /* 自動送りを止めるのは JS 側（勝手に動くものを出さない設定なので）。
     ボタンと指での送りは残す。自分で動かすぶんには困らない。 */
  .ind-marquee { scroll-behavior: auto !important; }
}

/* ── タブレット ── */
@media (min-width: 761px) and (max-width: 1080px) {
  .wrap { width: calc(100% - 40px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero h1 { font-size: 50px; }
  .hero-photo { aspect-ratio: 16 / 10; border-radius: 28px; }
  .promises, .cust-cards { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split.rev .split-copy { order: 0; }
  .split-photo { aspect-ratio: 16 / 9; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ── スマホ ── */
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .home .section { padding: 68px 0; }
  .home .h2 { font-size: 30px; }
  .home .section-head { margin-bottom: 36px; }
  .hero { padding: 40px 0 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero h1 { font-size: 40px; }
  .h1-sub { font-size: 16px; }
  .hero .lead { font-size: 16.5px; }
  .entrances { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { aspect-ratio: 4 / 3; border-radius: 120px 120px 24px 24px; }
  .float-1 { left: 0; bottom: 16px; }
  .industries { padding: 40px 0 68px; }
  .ind-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ind-track { gap: 14px; }
  .ind { min-height: 200px; flex-basis: 280px; }
  .ind-body b { font-size: 22px; }
  .promises, .cust-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .promise { padding: 26px 22px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split.rev .split-copy { order: 0; }
  .split-photo { aspect-ratio: 16 / 10; order: -1; }
  .cta-row .btn { width: 100%; }
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home .news-list li { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; gap: 6px 12px; padding: 14px 0; font-size: 16px; }
  .news-list li a { grid-column: 1 / -1; }
  .home .cta-band { padding: 72px 0; }
  .home .cta-band h2 { font-size: 32px; }
}.ind[hidden] { display: none !important; }   /* 準備中の業種はトップでは隠す（2026/10/16 判断 D3）。公開したら hidden を外す */
.ind-marquee:not(.on) .ind-track { margin: 0 auto; }   /* 回さないとき（カードが少ないとき）は真ん中に並べる */
.ind-nav[hidden] { display: none !important; }