@charset "utf-8";

/* =========================================================
   モバイル設計

   PC 由来の指定がそのまま残っていて、スマホでは
   ・左右の余白が 8px しかなく文字が画面端に張り付く
   ・セクションごとに余白量がバラバラ
   ・本文 14px・行間もまちまち
   ・タップ領域が 44px を切るものがある
   という状態だったので、ここで一度モバイル基準に揃える。

   このファイルは最後に読み込むこと。
   ========================================================= */

:root {
  /* 余白の段階（8 の倍数） */
  --sp-gutter: 20px;   /* 画面左右 */
  --sp-gap-s: 1.2rem;
  --sp-gap-m: 2rem;
  --sp-gap-l: 3.2rem;
  --sp-section: 8rem;  /* セクションの上下 */
  --sp-radius: 18px;   /* カードの角丸 */
}

@media screen and (max-width: 767px) {
  body {
    /* 旧 8px。左右の余白はこの変数を見ている箇所が多いので、ここで一括して広げる */
    --section-spMargin: var(--sp-gutter);
    --section-margin: var(--sp-gutter);
  }

  /* -------------------------------------------------------
     1. 左右の余白を全セクションで揃える
     ------------------------------------------------------- */
  .p-beliefs,
  .p-profile,
  .p-facts,
  .p-share,
  .p-roots,
  .section-vision,
  .section-message-thanks .p-message-wrap,
  .l-blog-main {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  .p-message-text,
  .section-message[data-sticky-name='01'] .p-greeting-wrap {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  /* -------------------------------------------------------
     2. セクションの縦リズムを揃える
     ------------------------------------------------------- */
  .section-beliefs,
  .section-profile,
  .section-roots {
    padding-top: var(--sp-section);
    padding-bottom: var(--sp-section);
  }

  .section-share {
    padding-top: 0;
    padding-bottom: var(--sp-section);
  }

  .c-section-title {
    font-size: 4.4rem;
  }

  .c-section-title .title-ja {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }

  /* -------------------------------------------------------
     3. 本文の読みやすさ（15px / 行間 1.9 に統一）
     ------------------------------------------------------- */
  .c-belief-text,
  .c-facts-text,
  .c-facts-note,
  .c-facts-list li,
  .c-def-row dd,
  .c-vision-text p,
  .p-beliefs-lead,
  .section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p {
    font-size: 1.5rem;
    line-height: 1.9;
  }

  .section-message[data-sticky-name='01'] .p-message-text p {
    font-size: 1.5rem;
    line-height: 1.95;
  }

  /* 見出し・カードタイトル */
  .c-belief-title,
  .c-card-title,
  .c-facts-title,
  .section-message-thanks .p-message-wrap li .c-text .c-text-02 {
    font-size: 1.8rem;
    line-height: 1.55;
  }

  /* 補助テキスト */
  .c-blog-meta,
  .c-def-row dt,
  .c-figure-note,
  .c-roots-hint {
    font-size: 1.25rem;
  }

  .c-mv-copy-sub {
    font-size: 1.25rem;
  }

  /* -------------------------------------------------------
     4. カードの形をひとつに（角丸・余白・影）
     ------------------------------------------------------- */
  .c-belief,
  .p-profile-card,
  .p-facts-inner,
  .section-message-thanks .p-message-wrap li,
  .p-blog-list li {
    border-radius: var(--sp-radius);
    padding: 2.4rem 2rem;
    margin-bottom: var(--sp-gap-s);
  }

  .p-beliefs-list {
    gap: var(--sp-gap-s);
  }

  .p-profile {
    gap: var(--sp-gap-s);
  }

  .p-facts {
    margin-top: var(--sp-gap-s);
  }

  .p-vision {
    border-radius: var(--sp-radius);
    padding: 5.6rem var(--sp-gap-m) 6rem;
  }

  .c-vision-figures {
    border-radius: var(--sp-radius);
  }

  /* -------------------------------------------------------
     5. タップ領域を 44px 以上に
     ------------------------------------------------------- */
  .c-roots-arrow {
    width: 52px;
    height: 52px;
  }

  .c-roots-rail-item {
    min-height: 48px;
    padding-top: 2.6rem;
  }

  .c-share-btn,
  .c-blog-viewall .c-button,
  .c-blog-back .c-button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-blog-viewall .c-button,
  .c-blog-back .c-button {
    padding: 0 2.4rem;
    border-radius: 999px;
  }

  .c-facts-link a,
  .c-blog-more {
    min-height: 44px;
    align-items: center;
  }

  /* 6 項目目だけ nth-child の指定がなく背景が抜けていた。
     もともと項目ごとに違う画像を敷いていた名残なので、全項目を同じ面に揃える */
  header ul .c-menu-item {
    min-height: 56px;
    display: flex;
    align-items: center;
    background: #def3fb;
    border-radius: 0 12rem 12rem 0;
  }

  /* ハンバーガーは 36px しかなく指で押しづらい */
  header button.js-menu-trigger {
    width: 44px;
    height: 44px;
  }

  /* 年表レールは端まで流したいので ol 側で余白を持つ */
  .p-roots-rail ol {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  /* -------------------------------------------------------
     6. 装飾の整理
     ------------------------------------------------------- */
  /* 背景の流れる大きな文字は SP では邪魔になるので薄く・低く */
  .section-message[data-sticky-name='01'] .scrub-text {
    height: 12rem;
    opacity: 0.5;
  }

  /* will-change は「これから動く」という GPU への予約。
     SP ではこの文字を動かさない（scrubText.ts）ので、予約したままだと
     画面数枚ぶんの幅のテクスチャを確保し続けるだけになる。 */
  .section-message[data-sticky-name='01'] .scrub-text p,
  .scrub-text-10thcontent p,
  .scrub-text-share p {
    will-change: auto;
  }

  /* 端末のガラスの反射。
     傾きはポインタのある環境だけの演出（roots.ts の hover:hover 判定）なので
     SP では一切動かないが、mix-blend-mode が付いているだけで
     iPhone モック全体が毎フレーム合成し直される。SP では外す。 */
  .c-iphone-glare {
    mix-blend-mode: normal;
    will-change: auto;
    opacity: 0.28;
  }

  /* 傾きに使う 3D 空間も、SP では作らない。
     ページ送りの奥行きは Swiper 自身が .swiper-3d に perspective:1200px を
     付けて作っているので、こちらを外しても動きは変わらない。
     3D コンテキストがあると中の要素がすべて 3D 合成の経路に乗るため、
     使わないなら無いほうがよい。 */
  .c-roots-tilt {
    perspective: none;
  }

  .c-iphone {
    transform-style: flat;
  }

  /* -------------------------------------------------------
     8. スクロール連動する大きな面をレイヤーに固定する

     この 2 つは 390x2000 前後の単色ドーム（角丸 9999px）で、
     スクロール量に合わせて位置が変わり続ける。
     scrub は「アニメーション」ではなく連続したスタイル変更なので、
     ブラウザが自動でレイヤーに逃がしてくれるとは限らず、
     そうならなかった場合はこの大きな丸いマスクを毎フレーム塗り直すことになる。

     will-change で先にレイヤーを取っておくと、1 回描いたものを
     動かすだけになる。上で外している will-change とは逆の判断だが、
     あちらは「動かないのに予約している」、こちらは「実際に動く」ので付ける。
     ------------------------------------------------------- */
  .c-mainV-bg,
  .c-sectionMessage-bg {
    will-change: transform;
  }

  /* 記事一覧の左右余白は上で付けているので二重にしない */
  .section-message-thanks .p-content {
    padding-left: 0;
    padding-right: 0;
  }

  /* -------------------------------------------------------
     7. 読み進めやすさ

     Playwright で計測したところ、フレームレート（中央値 6.9ms）も
     フリック後の惰性（966ms）も問題がなかった。
     読みづらさの原因は速度ではなく組版のほうだったので、ここで直す。
     ------------------------------------------------------- */

  /* WHO I AM の本文が中央揃えだった。
     PC は <br class="pc-only"> で改行位置を決め打ちしているので中央でも整うが、
     SP はその br が消えて自然改行になるため、行頭が毎行ずれて
     次の行の入り口を目で探すことになる。日本語の長文では左揃え一択。 */
  .section-message[data-sticky-name='01'] .p-message-text p {
    text-align: left;
  }

  /* body の letter-spacing: 0.1em は見出し向けの値。
     15px の本文に効くと 1 行 18 文字まで減って視線が何度も折り返す。
     本文だけ 0.04em に締めて、1 行 22〜23 文字にする。 */
  .section-message[data-sticky-name='01'] .p-message-text p,
  .p-greeting-wrap .c-message p,
  .c-belief-text,
  .c-vision-text p,
  .c-facts-text,
  .c-facts-note,
  .c-def-row dd,
  .p-beliefs-lead,
  .c-blog-card .c-text .c-message-text {
    letter-spacing: 0.04em;
  }

  /* 記事の抜粋だけ 13px と、本文より 2px 小さかった。
     一覧は「読むかどうか」を決める場所なので、本文と同じ大きさにする。 */
  .p-blog-list .c-blog-card .c-text .c-message-text,
  .section-message-thanks .p-message-wrap li .c-text .c-message-text {
    font-size: 1.5rem;
    line-height: 1.9;
  }

  /* 経歴の本文だけ 15.5px / 行送り 2.0 で、他（15px / 1.9）と揃っていなかった */
  .c-read-text {
    font-size: 1.5rem;
    line-height: 1.9;
  }

  /* セクションの間隔は 93 / 80 / 160 / 80 / 80 / 80 で、
     roots → beliefs だけ上下の余白が重なって倍の 160px 空いていた。
     ここで話が途切れて見えるので、他と同じ 80px に揃える。
     （section-message の下の 9vh は sticky 演出の助走なので触らない） */
  .section-roots {
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------
   ローディング（全幅共通・画像をやめてテキストに）
   ------------------------------------------------------- */
.js-loading .p-loading {
  gap: 1.6rem;
}

.c-loading-name {
  font-size: clamp(3.6rem, 11vw, 7rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-blue);
}

.c-loading-sub {
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  letter-spacing: 0.18em;
  color: var(--color-text-black);
  opacity: 0.6;
}