/* ==========================================================================
   トップだけの CSS（キャンバス案E v51 の TopE）
   --------------------------------------------------------------------------
   トップでだけ読む（inc/assets.php。style.css のあと）。共通の部品（英字の帯・4つの仕事・検索とAI・数字の組・実績・保守・
   診断・費用の目安の部品・LINE予約の料金・よくある質問）は style.css の 12〜21章にある。
   色・余白・角丸・影は style.css の :root のトークンだけを使う（verify_site.py が見張る）。
   ========================================================================== */

/* ==========================================================================
   1. ヒーロー（見出し・説明・ボタンと、実績が切り替わる大きな画面・検索窓・スマホ）
   ========================================================================== */

/* ■ ヒーローと「こんなご相談」の境目（キャンバスとの食い違い。2026-11-03 に直した）
   キャンバスは、画面の組に負の margin-bottom（clamp(-150px, -8cqi, -36px)）を付けている。この margin は面と段の外へ抜け
   （margin の相殺）、次の「こんなご相談」の段をヒーローの下へ 36〜150px 潜らせる。潜る量が段の上の余白 36px を超える
   幅 450px より広い画面では、見出し「こんなご相談をいただいています」と1段目の流れる帯がヒーローの下に隠れていた。
   ヒーローの見た目（画面とスマホの全体が見える）はキャンバスのまま、幅 450px 以下のキャンバスと同じ組み方
   （潜る量＝上の余白＝36px）をどの幅でも使う：組の margin を付けず、段の上の余白を 0 にする。
   幅 390px ではキャンバスと同じ位置。幅 1440px では、見出しと1段目が見えるぶん（79px）だけページが長くなる。 */
.p-top-hero__text {
  padding-block: var(--sp-hero-top) var(--sp-hero-bottom);
  gap: var(--sp-hero-gap-top);
}

.p-top-hero__title {
  padding-bottom: 0;
}

/* 2行の見出し。行ごとに区切り、頭の4文字を緑に */
.p-top-hero__title .u-ch-wrap {
  flex-direction: column;
  align-items: center;
}

.p-top-hero__title .u-ch-group {
  display: block;
  padding-bottom: 0.12em;
}

.p-top-hero__em {
  color: var(--c-green);
}

.p-top-hero__lead {
  max-width: 38em;
}

.p-top-hero__stage {
  max-width: var(--w-visual);
  margin-inline: auto;
  padding-inline: var(--sp-stage-inline);
}

.p-top-hero__tilt {
  position: relative;
  padding-top: var(--sp-tilt-top);
}

.p-top-hero__window {
  position: relative;
  max-width: var(--w-visual-inner);
  margin: 0 auto;
  border-radius: var(--r-14) var(--r-14) 0 0;
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--sh-visual-2);
}

.p-top-hero__bar {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding-block: var(--s-10);
  padding-inline: var(--s-16);
  border-bottom: 1px solid var(--c-line-menu);
  background: var(--c-window-bar);
}

.p-top-hero__dots {
  display: flex;
  flex: 0 0 auto;
  gap: var(--s-6);
}

.p-top-hero__dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  background: var(--c-window-dot);
}

.p-top-hero__url-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.p-top-hero__url {
  box-sizing: border-box;
  max-width: 100%;
  padding-block: var(--s-3);
  padding-inline: var(--s-16);
  border-radius: var(--r-pill);
  background: var(--c-chip);
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-top-hero__spacer {
  display: block;
  flex: 0 0 auto;
  width: 42px;
}

.p-top-hero__screen {
  position: relative;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  background: var(--c-frame);
}

.p-top-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 浮いている検索窓（打ち込まれる文字） */
.p-top-hero__pill {
  position: absolute;
  left: var(--sp-pill-left);
  bottom: 36%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding-block: var(--s-12);
  padding-inline: var(--s-16) var(--s-20);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-pill);
  line-height: 1.4;
  font-weight: 700;
  box-shadow: var(--sh-pill);
}

.p-top-hero__pill svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--c-green);
}

/* 浮いているスマホ */
.p-top-hero__phone {
  position: absolute;
  right: var(--sp-phone-right);
  bottom: var(--sp-phone-bottom);
  z-index: 2;
  box-sizing: border-box;
  width: clamp(92px, 14cqi, 210px);
  padding: var(--sp-phone-pad);
  border-radius: var(--r-phone);
  background: var(--c-ink);
  box-shadow: var(--sh-hero-phone);
}

.p-top-hero__phone-screen {
  position: relative;
  aspect-ratio: 9 / 18;
  border-radius: var(--r-phone-inner);
  overflow: hidden;
  background: var(--c-frame);
}

/* ==========================================================================
   2. こんなご相談をいただいています（2段で流れる吹き出し）
   流れる吹き出しは飾り（aria-hidden）。読み上げには、見出しの下の見えないリストを使う。
   ========================================================================== */
.p-top-requests {
  overflow: hidden;
  background: var(--c-bg);
}

/* 上の余白はキャンバスでは 36px だが、ヒーローの下に 36px 潜っていたので、見え方は 0（上の「ヒーローと…の境目」） */
.p-top-requests__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: 0 var(--s-2);
}

.p-top-requests__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-4) var(--s-14);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-top-requests__en {
  line-height: inherit;
}

/* 英字の札の字（2026-11-13 から front-page.php の data-en。見出しの文に混ぜない） */
.p-top-requests__en::before {
  content: attr(data-en);
}

.p-top-requests__rows {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding-block: var(--s-12) var(--s-22);
}

.p-top-requests__row {
  display: flex;
  width: max-content;
}

.p-top-requests__set {
  display: flex;
  gap: var(--s-10);
  padding-inline-end: var(--s-10);
}

.p-top-requests__chip {
  flex: 0 0 auto;
  padding-block: var(--s-9);
  padding-inline: var(--s-18);
  border: 1px solid var(--c-surface);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}

/* 同じ文が HTML に何度も並ばないように、文は data-text から出す（キャンバスの2段目と同じやり方を、1段目にも使った） */
.p-top-requests__chip::before {
  content: attr(data-text);
}

/* ==========================================================================
   3. プラナートについて（塗られる大きな一文と、代表のカード）
   ========================================================================== */
.p-top-about {
  align-items: center;
  text-align: center;
}

.p-top-about__statement {
  max-width: 24em;
  font-size: var(--fs-statement);
  line-height: 1.55;
  font-weight: 700;
  font-feature-settings: 'palt';
  text-wrap: balance;
}

.p-top-about__card {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--w-narrow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-24) var(--s-36);
  padding: var(--sp-about-card);
  border-radius: var(--r-card);
  background: var(--c-surface);
  text-align: left;
}

.p-top-about__card--text {
  max-width: 46em;  /* 写真が無いとき（文だけ）。文の1行が長くなりすぎないように（2026-11-09。front-page.php） */
}

.p-top-about__photo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(110px, 10cqi, 148px);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: var(--r-22);
  overflow: hidden;
  background: var(--c-frame);
}

.p-top-about__body {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.p-top-about__quote {
  color: var(--c-ink);
  font-size: var(--fs-quote);
  line-height: 1.55;
  font-weight: 700;
  text-wrap: balance;
}

.p-top-about__text {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.9;
}

.p-top-about__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-14);
}

.p-top-about__name {
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

/* ==========================================================================
   4. 英字の帯（トップは上下の余白だけほかのページと違う：上 12px・下 44px）
   ========================================================================== */
.p-top-band {
  padding-block: var(--s-12) var(--s-44);
}

/* ==========================================================================
   5. 費用の目安（簡易版）の組み方。選ぶボタン・−／＋・回る数字は style.css 19章
   ========================================================================== */
.p-top-estimate {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-12);
}

.p-top-estimate__form {
  box-sizing: border-box;
  flex: 3 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-28);
  padding: var(--sp-card-sm);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.p-top-estimate__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.p-top-estimate__group[hidden] {
  display: none;
}

.p-top-estimate__label {
  color: var(--c-ink);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
}

.p-top-estimate__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s-12);
}

.p-top-estimate__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12) var(--s-20);
}

.p-top-estimate__hint {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
}

.p-top-estimate__result {
  box-sizing: border-box;
  flex: 2 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-22);
  padding: var(--sp-est-result);
  border-radius: var(--r-card);
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.p-top-estimate__result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-10);
}

.p-top-estimate__plan {
  color: var(--c-on-dark-strong);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.p-top-estimate__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.p-top-estimate__block--monthly {
  padding-top: var(--s-18);
  border-top: 1px solid var(--c-dark-line-2);
}

.p-top-estimate__caption {
  color: var(--c-on-dark-sub);
  font-size: 14px;
  line-height: 1.5;
}

.p-top-estimate__mark {
  font-size: 10px;
}

.p-top-estimate__initial {
  color: var(--c-on-dark);
  font-size: var(--fs-est-initial);
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.p-top-estimate__monthly {
  color: var(--c-on-dark);
  font-size: var(--fs-est-monthly);
  line-height: 1.25;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.p-top-estimate__note {
  color: var(--c-on-dark-sub);
  font-size: 13px;
  line-height: 1.7;
}

.p-top-estimate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-20);
  margin-top: auto;
}

/* ==========================================================================
   6. 注（※1・※2）
   キャンバスではフッターのいちばん上（ほかのページのパンくずの所）にまとめてあったが、2026-11-04 素人の目の見直し P-34 で、
   印のすぐ近くへ移した（実績・会社案内のヒーローの注 .c-hero__note と同じ見せ方。front-page.php の注のコメント）。
   ※1 は黒い面の中の文と同じ .p-top-estimate__note（5章）。※2 は実績の数字のすぐ下のここ。
   前にあった、ページのいちばん下の注の面（.p-top-notes）と、その線に合わせたフッターの上の余白（.l-footer__inner の 24px）は、
   注を移したので外した（フッターの上の余白は、ほかのページと同じ style.css 11章の 20px）。
   ========================================================================== */
.p-top-works__figures {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.p-top-works__note {
  padding-inline: var(--s-4);
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
}

/* ==========================================================================
   7. 動き（トップだけの物。共通の動きは style.css 28章）
   ========================================================================== */
@keyframes pa-slide {
  0% { opacity: 0; }
  4% { opacity: 1; }
  33% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes pa-ken {
  from { scale: 1; }
  to { scale: 1.05; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 見出しの1文字ずつの間と、説明の出る時間は、トップだけ少し違う（キャンバス TopE：.035s と .7s。ほかのページは .045s と .6s） */
  .is-motion .p-top-hero .u-ch {
    animation-delay: calc(.1s + var(--i, 0) * .035s);
  }

  .is-motion .p-top-hero__lead {
    animation-delay: .7s;
  }

  /* 画面の中の3枚が切り替わり、ゆっくり大きくなる */
  .is-motion .p-top-hero__slide {
    animation: pa-slide 12s linear infinite;
  }

  .is-motion .p-top-hero__slide--2 {
    animation-delay: -8s;
  }

  .is-motion .p-top-hero__slide--3 {
    animation-delay: -4s;
  }

  .is-motion .p-top-hero__slide img {
    animation: pa-ken 12s ease-out infinite alternate;
  }

  /* マウスに合わせて、検索窓とスマホが少しずれる（--mx/--my は motion.js が .c-hero に入れる） */
  .is-motion .p-top-hero__pill {
    transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0);
  }

  .is-motion .p-top-hero__phone {
    transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 12px), 0);
  }

  /* こんなご相談：2段が別の速さで、逆の向きに流れる */
  .is-motion .p-top-requests__row {
    animation: pa-marquee 105s linear infinite;
  }

  .is-motion .p-top-requests__row--rev {
    animation-direction: reverse;
    animation-duration: 129s;
  }
}

@container (max-width: 760px) {
  .is-motion .p-top-hero__pill,
  .is-motion .p-top-hero__phone {
    transform: none;
  }
}