@charset "UTF-8";

/* =========================================================
   aap_front.css

   場所 : salient-child/css/aap_front.css
   役割 : TOP 専用

   ---------------------------------------------------------
   参照 : core / fonts
   知らない : 記事本文（aap_labo_*）

   TOP は WPBakery で組む
   記事本文の見出しは aap_labo_* が持つ
   ここは「素の H を置くページ」= TOP の見た目だけ

   使い方 :
   TOP の一番外の Row に Extra Class Name「aap-front」を付ける
   その中の H2〜H5 が自動でレスポンシブになる

   ---------------------------------------------------------
   ※ 書体の @font-face は aap_fonts.css に移した
      ここは font-family で名前を呼ぶだけ
      （役割を分ける : fonts は登録、front は使用）
   ---------------------------------------------------------
   ========================================================= */


/* =========================================================
   01. aap-hero-main : ODYSSEY AAP（主役）

   Anton の巨大見出し
   サイズは Salient の Fit Text に任せる = font-size を書かない
   書くと横ピッタリが壊れる
   ========================================================= */

.aap-hero-main,
.aap-hero-main * {
    font-family: 'Anton AAP', "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 400 !important;   /* Anton は 400 で既に極太 */
    letter-spacing: 0.01em;        /* Anton は詰めない */
}


/* =========================================================
   02. aap-hero-sub : Living With AI...（脇役）

   主役と差をつける = 階層
   Anton にしない。Playfair の斜体で引く
   サイズは Text Element（H4 等）の clamp に任せる
   = font-size を書かない。Hの遊びに乗せる
   ========================================================= */

.aap-hero-sub,
.aap-hero-sub * {
    font-family: 'Playfair AAP', Georgia, serif !important;
    font-weight: 400 !important;
    font-style: italic;                            /* 斜体にすると更に優雅 */
    letter-spacing: 0;
    color: var(--aap-gray);
    font-size: clamp(1.2rem, 3vw, 2.2rem) !important;
    line-height: 1.4 !important;
}

/* =========================================================
   03. aap-sec-label / aap-sec-title : セクション見出し

   ヒーロー（aap-hero-*）の弟分
   TOP の各セクション（ODYSSEY 列・LABO 列 等）の見出しに当てる
   Text Element の Extra Class Name に付けるだけで書体が決まる

   hero  = ページの主役（巨大）
   sec   = セクションの主役（中）

   ---------------------------------------------------------
   命名は「見た目の大小」で決める。要素の種類（Heading/Text）で決めない

   Salient は「上の小さいラベル」を Heading ウィジェット、
   「下の大きい見出し」を Text ウィジェットで組むことがある
   ＝ 要素の種類と見た目の大小がねじれる

   だから head/sub でなく label/title にする
   label = 小さいラベル（上）／ title = 大きい主役（下）
   名前を見れば大小が分かる。どの要素に当てても迷わない
   ========================================================= */


/* --- aap-sec-label  ラベル（小・上に置く） ---
   例：ODYSSEY / LABO
   明朝で一段引く。主役の上に静かに置く小見出し
   hero-sub が Playfair(英字)なのに対し、label は日本語も来るので明朝 */
.aap-sec-label,
.aap-sec-label * {
    font-family: var(--aap-font-sub) !important;   /* 明朝 */
    font-weight: 300 !important;
    letter-spacing: 0.08em;
    line-height: 1.7 !important;
    color: var(--aap-gray);
}


/* --- aap-sec-title  タイトル（大・主役） ---
   例：今日は、何が知りたい?
   Zen Kaku の太字。セクションの顔

   日本語の折り返し：
   word-break: auto-phrase で文節の切れ目で折る
   （「知りた／い」のような文字途中の破断を防ぐ）
   line-break: strict で禁則処理（句読点が行頭に来ない）
   font-size は clamp。スマホで大きくなりすぎない */
.aap-sec-title,
.aap-sec-title * {
    font-family: var(--aap-font-title) !important;   /* Zen Kaku */
    font-weight: 900 !important;
    letter-spacing: 0.02em;
    line-height: 1.5 !important;
    color: var(--aap-black);
    line-break: strict;
    word-break: auto-phrase;
    overflow-wrap: break-word;
}