@charset "utf-8";

/* ============================================================
   naka_3（君へ）
   - ページの地色は #4a84d8。これは naka3_2 の下端色と完全に同一
     （実測: rgb(74,132,216)・ばらつき0）なので、背景画像が終わっても
     継ぎ目なく色が続く。原稿量が変わっても破綻しない。
   - naka3_3 は上下端とも完全透明、naka3_4 は上端が透明なので、
     どちらも地色の上にそのまま重ねられる。
   - 位置合わせは % 指定。padding/width の % は「要素幅」基準で、
     background-size:100% と同じ基準になるため、vw より正確に連動する。
============================================================ */
.n3-main {
  font-family: var(--font-hiragino);
  font-feature-settings: "palt";
  background-color: #4a84d8;
  color: var(--color-white);
}

/* ============================================================
   上部：背景イラスト＋人物＋本文
============================================================ */
/* section 自体には opacity をかけないこと。
   opacity が 1 未満の要素は重ね合わせコンテキストを作るため、子の
   .n3-top__char（z-index:101）が #header（z-index:100）より下に閉じ込められ、
   opacity が 1 になった瞬間にレイヤーが組み替わって一瞬途切れる。
   フェードは .n3-top__bg / __char / __content の3レイヤーが個別に持つ */
.n3-top {
  position: relative;
  /* サブタイトルの位置。カンプの「英文ポエム下端 → サブタイトル上端 = 187px」
     （KENTA指定）を満たすよう実測で確定した値。カンプの y1020/1602 = 63.7% にほぼ一致する */
  padding-top: 63.1%;
  padding-bottom: 0;
}

/* 背景イラスト。section 全面に敷く（z-index なし＝ヘッダーより下） */
.n3-top__bg {
  position: absolute;
  inset: 0;
  background-image: url(../img/naka3/naka3_2.webp);
  background-image: image-set(url(../img/naka3/naka3_2.webp) 1x,
                              url(../img/naka3/naka3_2@2x.webp) 2x);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
}

/* 人物（切り抜き）: カンプ実測 1256/1602 = 78.4%、左上に密着。
   本体は通常レイヤー（ヘッダーより後ろ）。ヘッダーバーより前に出すのは
   __head で重ねた「頭だけ」に限る（KENTA指示）。
   ここを丸ごと前面にすると、スクロール時に体や上着までバーの前を通ってしまう */
.n3-top__char {
  position: absolute;
  left: 0;
  top: 0;
  width: 78.4%;
  pointer-events: none;
}
.n3-top__char img {
  display: block;
  width: 100%;
  height: auto;
}

/* 頭だけのコピー。__char と完全に同じ座標・同じ幅・同じ画像URLなので
   追加のダウンロードは発生しない。頭の下端でマスクして消し、
   その部分だけを #header（z-index:100）より前に出す。
   z-index の付け替えではなく常時この状態なので、切り替わる瞬間が出ない。
   マスクをグラデーションにしているのは、スクロールで境目がバーを横切る時に
   一直線のカットが見えないようにするため（下には同じ絵が敷いてある） */
.n3-top__head {
  position: absolute;
  left: 0;
  top: 0;
  width: 78.4%;
  /* .menu(200) / .menu__shade(199) より前面に置く。101 のままだと閉じるあいだ
     0.62秒フル表示の幕に隠れ続け、visibility:hidden が効いた瞬間だけ頭が出る
     ＝「閉じ切った後に遅れてパッと表示される」になる（KENTA指摘） */
  z-index: 201;
  pointer-events: none;
  /* 消す/戻すは opacity ではなく filter で行う。この要素は js-loading
     （opacity を使う初回フェード）を持っているので opacity は触れない */
  filter: opacity(1);
  /* 閉じる時：幕の矩形がバーと1px以内で一致するのは 0.39s 以降（実測）。
     そこに収めることで、まだ動いている段階で頭が現れる印象を消す */
  transition: filter 0.15s ease-out 0.45s;
  /* 髪の毛先まで＝画像上から約17%。24%（首まわり）で完全に消える */
  -webkit-mask-image: linear-gradient(to bottom, #000 17%, rgba(0, 0, 0, 0) 24%);
  mask-image: linear-gradient(to bottom, #000 17%, rgba(0, 0, 0, 0) 24%);
}
.n3-top__head img {
  display: block;
  width: 100%;
  height: auto;
}

/* メニューを開いている間は消す。開く時はパネルが頭の領域を覆いきる
   約120msに合わせて、遅延なしで消す */
html.is-menu-open .n3-top__head {
  filter: opacity(0);
  /* 開く時：パネルが頭（画面上端〜352px）を覆いきるのは実測 約75ms。
     これより長いと覆われる前に薄くなって残像に見える */
  transition: filter 0.08s linear 0s;
}

/* 本文はイラスト本体より前・ヘッダーより後ろ */
.n3-top__content {
  position: relative;
  z-index: 1;
}

/* ============================================================
   本文カラム
   カンプ実測: 幅640px / 1601px基準 → 1366基準に換算して 54.6rem
============================================================ */
.n3-body__content {
  margin: 0 auto;
  width: 54.6rem;
  max-width: 90%;
  /* ビジュアルと重ねたときテキストが必ず前面に来るように */
  position: relative;
  z-index: 1;
}
.n3-body__inner {
  margin: 0 2.5rem;
}
/* 直下の p だけを本文として扱う（リード内の英文には効かせない） */
.n3-body__inner > p {
  margin-bottom: 3.4rem;
  line-height: 2.08;
  letter-spacing: 0.03em;
  word-wrap: break-word;
  font-feature-settings: "palt";
}
.n3-body__inner > p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   リード（サブタイトル）※画像に焼き込まれていないためHTMLテキスト
============================================================ */
.n3-lead {
  margin-bottom: 7rem;
  text-align: center;
}
.n3-lead__ttl {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  transform: skewX(-6deg);
}
.n3-lead__en {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* ============================================================
   斜めカットのビジュアル（本文の途中・全幅）
============================================================ */
/* カンプではテキストがこのビジュアルに重なる（実測 上下とも -168px）。
   透明帯14pxを足した 182px / 1601 = 11.37% を負マージンで再現。
   % は要素幅基準なので背景のスケールと自動で連動する。 */
.n3-cut {
  margin: -11.37% 0;
}
.n3-cut img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   下部ビジュアル（全幅・上端が透明なので地色に溶ける）
============================================================ */
/* カンプでは最終テキストがこのビジュアルに 46px 重なる。
   上端の透明帯105pxを足した 151px / 1601 = 9.43% を負マージンで再現。 */
.n3-bottom {
  margin-top: -9.43%;
}
.n3-bottom img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   フッターまわり（naka_3 専用デザイン）
   正はカンプ docs/naka03_調整.svg。実測でわかったこと：
   - 背景は白パネルではなくページ地色 #4a84d8 のベタ塗り。角丸も無い
   - #footer は <main class="n3-main"> の外にあるので、地色は body に置く
     （naka3.css は naka_3 だけが読むのでスコープは閉じている）
   - フッター内容ブロック（ロゴ106px / 組織名14px / ナビ12px /
     コピーライト10px と相互の間隔）はカンプと 1:1 で一致しているため
     共通スタイルのまま触らない。罫線・見出し・カードだけが
     1601基準（換算 0.8532）で、こちらを合わせ込む
============================================================ */
body {
  background-color: #4a84d8;
}
/* 下端の角丸オブジェクト。カンプ naka03_調整.svg の実測：
   - 角丸パス `cls-93` は塗り #4a84d8 ＝ 地色と同じ。x 25.34〜1582.11（幅1556.77）、
     下端 y=1399.92、下2角のみ角丸 31.61。artboard 下端 1473.52 まで 73.6px 余白
   - 影は 1649×181 の黒ラスターを opacity .15 で敷いたもの。50%点から逆算すると
     ぼかし前の矩形はパネルを下に 28.8px ずらした位置、立ち上がり ≒ 80px
   → 換算係数 1366/1602.28 = 0.8525 で 左右1.95rem ／ 下の余白6.27rem
   地色と同色なので、影だけが角丸の形を見せる（カンプと同じ構造）。
   角丸は naka_1 と同じ共通値（PC 5rem／タブレット・SP 3rem）に統一するので
   ここでは上書きしない（KENTA指示）。

   影は box-shadow ではなく「下端をまたぐ横帯」を1本敷く。box-shadow だと
   パネルの左右の辺すべてに均一に出て、境界線が上まで通って見えてしまう
   （KENTA指摘）。カンプも 1649×181 の帯を1本だけ・opacity .15 で敷いており、
   下端まわりだけ影が出て上に行くほど消える。
   実測: ぼかし前の矩形はパネル幅と同じ・高さ101px（下端の72px上〜28.8px下）、
   立ち上がりから σ ≒ 15.6px → 1366換算で 高さ8.6rem・下端の2.46rem下・blur 1.3rem */
#footer {
  padding: 0 1.95rem 6.27rem;
  background: none;
  color: var(--color-text);
  position: relative;
}
#footer::before {
  content: '';
  position: absolute;
  left: 1.95rem;
  right: 1.95rem;
  /* blur のにじみは半径の約3倍（1.3rem × 3 ≒ 3.9rem）広がる。
     bottom がそれ未満だと、にじみが #footer の下端を超えて切れる（KENTA指摘）。
     必ず「bottom ≧ blur × 3」を保つこと */
  bottom: 4.2rem;
  height: 8.6rem;
  border-radius: 0 0 var(--radius-header) var(--radius-header);
  background: rgba(0, 0, 0, 0.15);
  filter: blur(1.3rem);
  pointer-events: none;
}
.footer__wrap {
  /* カンプ: コピーライト文字下端 → ページ下端 153px。うち 62.7px はパネルの外側 */
  padding-bottom: 9.03rem;
  background: #4a84d8;
}

/* 「最新の研究成果」見出し（カンプ 46.35px・skewX(-7)）
   上マージンは % 指定。包含ブロック幅（＝ビューポート幅）基準なので
   下部イラストのスケールに自動連動し、ブレークポイントごとの上書きが要らない。
   カンプ実測「イラスト下端 → 見出しインク上端 131px」＝ 1366換算 111.8px を
   line-height の半leading分を引いた見た目で満たす値（実測で確定）。 */
.n3-cards-ttl {
  /* 文字下端 → カード上端が見た目 81.5px になる値（実測で確定） */
  margin: 7.35% 0 7.07rem;
  text-align: center;
  font-size: 3.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
/* 斜体は span 側に。h2 に直接かけると .js-fade.is-on（詳細度0,2,0）の
   transform:translateY(0) が勝ってフェード完了時に消える。
   inline-block なのでテキスト幅ぶんしか傾かず、横オーバーフローも出ない */
.n3-cards-ttl span {
  display: inline-block;
  transform: skewX(-7deg);
}

/* サイズ・間隔は naka_1 / naka_2 と同じ共通値を使う（KENTA指示で統一）。
   このページで上書きするのは「カード下端 → 罫線」の距離だけ */
.banner-list {
  margin-bottom: 18.9rem;    /* カンプ 221.6 ×0.8532 */
}

/* 罫線。フッター内容カラム（115.6rem）より外側に広い点がカンプ通り */
.n3-footer-line {
  /* 罫線 → 組織名の文字上端が見た目 82.6px になる値（実測で確定） */
  margin: 0 auto 7.82rem;
  width: 88.7%;
  max-width: 121.1rem;
  height: 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}

/* ============================================================
   レスポンシブ：タブレット（768〜1023px）
============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .n3-body__content { max-width: 89.3%; }
  .n3-cards-ttl { margin-bottom: 5.7rem; font-size: 3.1rem; }
  .banner-list { margin-bottom: 14.9rem; }
  .n3-footer-line { margin-bottom: 5.8rem; }
  #footer { padding: 0 1.7rem 5rem; }
  /* bottom は blur(1rem) の3倍以上を確保（にじみが切れないように） */
  #footer::before { left: 1.7rem; right: 1.7rem; bottom: 3.4rem; height: 6.9rem; filter: blur(1rem); }
  .footer__wrap { padding-bottom: 7rem; }
  .n3-lead { margin-bottom: 5.5rem; }
  .n3-lead__ttl { font-size: 2rem; }
  .n3-lead__en { font-size: 1.3rem; }
  .n3-body__inner p { font-size: 1.32rem; line-height: 2.09; }
  /* 重なり量はベース定義の -11.37% を使う（上書きしない） */
}

/* ============================================================
   レスポンシブ：SP（〜767px）
   SP専用の書き出し素材が無いため、全幅表示のまま比率で追従させる。
   位置指定が全て % なので、KV内のテキスト位置は自動的に保たれる。
============================================================ */
@media (max-width: 767px) {
  /* 素材 naka3_2.webp は自身の2465行目（高さの81.77%）で絵柄が全幅に切れており、
     そこから下は地色 #4a84d8 のベタ。background-size:100% auto なので、
     この段差は画面幅によらず要素上端から 153.9vw の位置に来る。
     PCでは .n3-cut が覆い隠すため見えないが、SPでは露出する（KENTA指摘）。
     段差の手前から絵柄を溶かして消す。段差より下は元々地色と同色なので
     マスクで消しても見た目は変わらない。 */
  .n3-top__bg {
    -webkit-mask-image: linear-gradient(to bottom, #000 120vw, transparent 152vw);
            mask-image: linear-gradient(to bottom, #000 120vw, transparent 152vw);
  }

  .n3-body__content {
    margin: 0 1.9rem;
    width: auto;
    max-width: none;
  }
  /* 重なり量はベース定義の -11.37% を使う（% なので画像スケールに自動連動する） */
  .n3-cards-ttl { margin-bottom: 4.4rem; font-size: 2.6rem; }
  .banner-list { margin-bottom: 11rem; }
  .n3-footer-line { width: auto; margin: 0 1.9rem 4.6rem; max-width: none; }
  /* 角丸オブジェクトも naka_1 のSPパディング（1.5rem）に合わせて内側に */
  /* 下パディング（パネル下端 → ページ下端の帯）は共通と同じ 2.2rem＝375px幅で22px。
     css/style.css のSPと必ず揃えること */
  #footer { padding: 0 1.5rem 2.2rem; }
  /* 影が下端まで続かず、途中で終わっていた（KENTA指摘）。
     bottom: 2.4rem だと矩形の下辺がページ下端の 24px 上にあり、
     にじみの裾を足しても下端の 10px ほど手前で消えて、そこから下は地色のベタになる。
     1.2rem まで下げてパネル下の帯（34px）を「濃い影 → 自然に消える」で埋める。

     以前の「bottom ≧ blur × 3」は、下端より下へ染み出した分がどのみち見えない
     ことへの経験則。CSS の blur(r) は標準偏差 = r なので残量は正規分布で出せる：
       σ = 7px、下辺を下端の 12px 上 → 0.15 × (1 − Φ(12 ÷ 7)) = 0.15 × 0.043 ≒ 0.0065
       → #4a84d8 に対して 1/255 未満。段差にはならない
     数値を動かすときはこの式で残量を確認すること */
  #footer::before { left: 1.5rem; right: 1.5rem; bottom: 1.2rem; height: 4.7rem; filter: blur(0.7rem); }
  /* 共通値（css/style.css のSP）と同じ 2.4rem だが、ここに書かないと効かない。
     naka3.css のベース定義 .footer__wrap { padding-bottom: 9.03rem } は
     メディアクエリの外にあり、後から読まれるぶん style.css のSP指定に勝ってしまうため。
     共通値を変えるときはこの行も一緒に直すこと */
  .footer__wrap { padding-bottom: 2.4rem; }
  .n3-body__inner { margin: 0; }
  .n3-lead { margin-bottom: 4.5rem; }
  /* SPはカラム幅337pxに対して余白が10pxしか残らなかったため一段小さく */
  .n3-lead__ttl { font-size: 1.6rem; line-height: 1.65; }
  .n3-lead__en { font-size: 1rem; margin-top: 1.2rem; }
  .n3-body__inner p { line-height: 2; text-align: justify; }
}