@charset "UTF-8";

/* =========================================================
   aap_labo_commons.css

   場所 : salient-child/css/aap_labo_commons.css
   役割 : 箱。90% がここ

   ---------------------------------------------------------
   参照 : core / models
   知らない : series

   commons とは = Salient の commons に「ない」もの
   Salient が持っているものは Salient にやらせる
   持っていない領域（日本語の会話・日本語の箱）だけ書く

   Salient は日本語を考えていない
   持っていないのではない。英語の答えしか持っていない
   ---------------------------------------------------------

   コンポーネントはシリーズを知らない
   会話は R のものではない。AAP は会話式でブログを書く
   だから全シリーズに乗る

   名前 :
   aap_container_*  Row。塊が何か。シリーズを知る唯一の場所
   aap_col_*        Col。中身がどう並ぶか
   aap_labo_*       AAP が書いた中身。シリーズを知らない
   aap_[salient名]  Salient UI への塩味
   is-*             人と状態
   ========================================================= */


/* =========================================================
   01. aap_labo_talk  会話
   ========================================================= */

/* ---------------------------------------------------------
   Salient の UI は一切使わない
   理由 : 全て英文ベース
        スペース区切り前提の折り返し
        inline-block による字送り破壊
        ラテン文字用ベースライン
        3往復でも汚い

   ここは Salient が持っていない領域なので、自分で作る
   --------------------------------------------------------- */

.aap_labo_talk {
    font-family: 'Shippori AAP', var(--aap-font-jp-mincho);  /* セリフ＝明朝。脚本の質感 */
    line-height: var(--aap-lh-jp);
    font-size: var(--aap-fs-body);
    color: var(--aap-black);
}

.aap_labo_talk p {
    margin: 0;
    padding: 0 0 0 var(--aap-name-w);
    text-indent: calc( -1 * var(--aap-name-w) );
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    font-feature-settings: "palt" 1;
    text-align: left;
}

/* 名前を出す場所を決めるのは commons
   名前の中身と色を持つのは models

   width の em は ::before 自身の font-size 基準
   0.88em を指定しているので、そのままだと --aap-name-w が 0.88 倍に縮む
   親の padding-left は 1.0em 基準なので、1行目だけ本文が左にズレる
   0.88 で割って実幅を親と一致させる */
   /* 注意 : ::before の em は ::before 自身の font-size 基準
   font-size を変えたら、その中の em 指定は全部その倍率に引っ張られる
   width / padding / margin に em を使うときは必ず割り戻す
   同系統 : aap_mk_box の text-indent:0（親の負インデントを継承して潰れる） */
.aap_labo_talk p::before {
    font-family: var(--aap-font-jp-gothic);
    display: inline-block;
    width: calc( var(--aap-name-w) / 0.88 );
    text-indent: 0;
    font-weight: 700;
    font-size: 0.88em;
}



/* 連投は名前を消す
   HTML 側で何もしなくていい
   ★ただし is-shadow（裏の姿）が絡む隣接は「別人」＝省略しない。
     裏リナ(is-rina is-shadow)と通常リナ(is-rina)は同じ is-rina のため、
     :not(.is-shadow) を付けないと連投扱いで後ろの名前が消える */
.aap_labo_talk .is-rina:not(.is-shadow)   + .is-rina:not(.is-shadow)::before,
.aap_labo_talk .is-eina:not(.is-shadow)   + .is-eina:not(.is-shadow)::before,
.aap_labo_talk .is-oji:not(.is-shadow)    + .is-oji:not(.is-shadow)::before,
.aap_labo_talk .is-nari:not(.is-shadow)   + .is-nari:not(.is-shadow)::before,
.aap_labo_talk .is-haruka:not(.is-shadow) + .is-haruka:not(.is-shadow)::before,
.aap_labo_talk .is-nanami:not(.is-shadow) + .is-nanami:not(.is-shadow)::before,
.aap_labo_talk .is-sangha:not(.is-shadow) + .is-sangha:not(.is-shadow)::before,
.aap_labo_talk .is-shiori:not(.is-shadow) + .is-shiori:not(.is-shadow)::before,
.aap_labo_talk .is-juri:not(.is-shadow)   + .is-juri:not(.is-shadow)::before,
.aap_labo_talk .is-kuna:not(.is-shadow)   + .is-kuna:not(.is-shadow)::before {
    content: "";
}

/* 話者が変わったら呼吸を置く
   連投 0.6em / 交代 1.4em
   スマホは名前が上の行に出るので、距離だけで伝わる */
.aap_labo_talk p + p:not(.aap_labo_t) {
    margin-top: 0.8em;
}

/* 話者が変わったら呼吸を置く（連投は詰める）
   ★is-shadow が絡む隣接は「別人」＝詰めない（呼吸を置く） */
.aap_labo_talk .is-rina:not(.is-shadow)   + .is-rina:not(.is-shadow),
.aap_labo_talk .is-eina:not(.is-shadow)   + .is-eina:not(.is-shadow),
.aap_labo_talk .is-oji:not(.is-shadow)    + .is-oji:not(.is-shadow),
.aap_labo_talk .is-nari:not(.is-shadow)   + .is-nari:not(.is-shadow),
.aap_labo_talk .is-haruka:not(.is-shadow) + .is-haruka:not(.is-shadow),
.aap_labo_talk .is-nanami:not(.is-shadow) + .is-nanami:not(.is-shadow),
.aap_labo_talk .is-sangha:not(.is-shadow) + .is-sangha:not(.is-shadow),
.aap_labo_talk .is-shiori:not(.is-shadow) + .is-shiori:not(.is-shadow),
.aap_labo_talk .is-juri:not(.is-shadow)   + .is-juri:not(.is-shadow),
.aap_labo_talk .is-kuna:not(.is-shadow)   + .is-kuna:not(.is-shadow) {
    margin-top: 0;
}



/* ---------------------------------------------------------
   01-2. aap_labo_t  ト書き

   35本で6種類出た
   R12 は17個。ほぼ全発言にト書き。もう脚本

   動作       （黙って聞いている）（指を立てる）
   心の声     （あれ、おじさん、ちょっと記憶ちがうかも……）
   説明ラベル （軽く説明）
   感情       （思わず感情が出る）
   即答       （即答で）（即答）
   内緒話     （おじさんには、ちゃんと続き話しますからね）

   内緒話だけ特殊 = ト書きではなく「別の相手への発言」
   --------------------------------------------------------- */

.aap_labo_talk .aap_labo_t {
    color: var(--aap-gray);
    font-size: 0.94em;
}

/* 心の声。地の声より一段引く */
.aap_labo_talk .aap_labo_t_in {
    color: var(--aap-gray);
    font-size: 0.94em;
    font-style: italic;
}

/* 内緒話。相手が変わっている */
.aap_labo_talk .aap_labo_t_aside {
    color: var(--aap-gray);
    font-size: 0.94em;
}


/* ---------------------------------------------------------
   01-3. aap_labo_stage  ト書き・地の文

   カッコなしの独立行。小説の地の文
   話者名も出ない

   午後、暇つぶしのAAPアジョシがJURIに話しかける。JURIは本を読んでいる。
   JURIが止まる。今まで考えたことがなかった問いだった。
   夕方。閉店後のサロン。アシスタント2年目、22歳のNANAMIが、床を掃いている。
   撮影スタート。

   出典 : STUDY003 / STYLE002A
   --------------------------------------------------------- */

.aap_labo_stage {
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-gray);
    margin: 1.8em 0;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_stage p {
    margin: 0 0 0.6em;
}

.aap_labo_stage p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   01-4. aap_labo_aside  語り手 → 読者

   ト書きでも会話でもない
   語り手が読者に話しかける

   （※読者の皆さんは、この髪の主に、心当たりがあるかもしれません。
     NANAMIは、まだ知りません。）

   出典 : STYLE002A
   --------------------------------------------------------- */

.aap_labo_aside {
    font-size: var(--aap-fs-small);
    line-height: 1.9;
    color: var(--aap-gray);
    margin: 1.4em 0;
    padding-left: 1em;
    border-left: 1px solid var(--aap-rule);
    line-break: strict;
    word-break: normal;
}


/* ---------------------------------------------------------
   01-5. aap_labo_mono  独白

   一人で喋る。会話ではない
   talk から名前を消したものではない
   ぶら下げも話者交代も要らない = 構造が違う

   出典 : R1 / R2 / STYLE001（本体）
   --------------------------------------------------------- */

/* 独白に名前は出さない
   models の .is-rina::before は commons が呼ぶかどうかを決める
   mono はリナが一人で喋る箱。名前を呼ぶ相手がいない */
.aap_labo_mono > p::before,
.aap_labo_mono::before {
    content: none;
}

.aap_labo_mono {
    font-family: var(--aap-font-body);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_mono p {
    margin: 0;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

/* 行送りの余りを上下から削る
   line-height: 2.0 は複数行の中の間隔のため
   1行の段落にも余りが付いて、下に半行分残る */
.aap_labo_mono p::before,
.aap_labo_mono p::after {
    content: "";
    display: block;
    height: 0;
}

.aap_labo_mono p::before {
    margin-top: calc((1 - var(--aap-lh-jp)) * 0.5em);
}

.aap_labo_mono p::after {
    margin-bottom: calc((1 - var(--aap-lh-jp)) * 0.5em);
}

.aap_labo_mono p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   01-6. aap_labo_kr  韓国語

   span で当てる。行単位で言語を切れない
   日本語の中にハングルが点在する

   <p class="is-sangha">…ない、ない。<span class="aap_labo_kr">없어</span>(ないよ)</p>

   誰が喋るかではなく、その行が何語かで決まる
   JURI が日本語を喋ることもある

   分かち書きがあるので単語で折れる

   タイトル / 見出し / 会話 / ト書き / 話者名 どこにでも来る
   --------------------------------------------------------- */

.aap_labo_kr {
    font-family: var(--aap-font-kr-gothic);
    word-break: keep-all;
}

/* 行ごと韓国語のとき
   <p class="is-juri aap_labo_kr_line">또 봐요、アジョシ。</p> */
.aap_labo_kr_line {
    font-family: var(--aap-font-kr-gothic);
    line-height: var(--aap-lh-kr);
    word-break: keep-all;
}


/* ---------------------------------------------------------
   01-7. aap_labo_ex  例文

   ハングル + （日本語訳）のセット
   会話ではない。教材

   그 사람 진짜 미쳤어. (あの人マジで頭おかしい)

   3層版もある（STUDY002「10選」）
   シーン（日本語）→ 例文（ハングル）→ 訳

   出典 : STUDY001 / STUDY002
   --------------------------------------------------------- */

.aap_labo_ex {
    margin: 1.4em 0;
    padding: 1em 1.2em;
    border-left: 3px solid var(--aap-rule);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-kr);
    color: var(--aap-black);
}

.aap_labo_ex p {
    margin: 0 0 0.5em;
    word-break: keep-all;
}

.aap_labo_ex p:last-child {
    margin-bottom: 0;
}

/* 例文のハングル部分 */
.aap_labo_ex .aap_labo_kr {
    font-weight: 700;
}

/* 訳 */
.aap_labo_ex .aap_labo_ex_jp {
    color: var(--aap-gray);
    font-size: 0.92em;
}

/* シーン（3層版の1行目） */
.aap_labo_ex .aap_labo_ex_scene {
    color: var(--aap-gray);
    font-size: 0.92em;
    margin-bottom: 0.3em;
}


/* =========================================================
   02. aap_labo_lead  リード
   記事の入口。固定文が入る
   ========================================================= */

.aap_labo_lead {
    font-family: var(--aap-font-sub);
    font-size: var(--aap-fs-body);
    line-height: 1.9;
    color: var(--aap-black);
    margin-bottom: 2.4em;
    padding-left: 1em;
    border-left: 2px solid var(--aap-rule);
    text-align: left;          /* ← 追加。親の中央揃えを拾わせない */
}

.aap_labo_lead p {
    margin: 0 0 0.8em;
    padding-bottom: 0;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_lead p:last-child {
    margin-bottom: 0;
}

/* @aap-labo / タグ */
.aap_labo_lead .aap_labo_meta {
    font-size: var(--aap-fs-small);
    color: var(--aap-gray);
    margin-top: 1.2em;
}


/* ---------------------------------------------------------
   02-2. aap_labo_meta_line  メタ1行

   @aap-labo｜AAP-MODEL:00 RINA

   R1 から全記事にある
   記事の頭と末尾。誰の記事かの署名
   --------------------------------------------------------- */

.aap_labo_meta_line {
    font-family: var(--aap-font-body);
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-gray);
    margin: 0.4em 0 0;
    letter-spacing: 0.04em;
    text-align: left; 
}


/* =========================================================
   03. aap_labo_door  扉
   画像 + キャプション
   画像は Salient の Single Image に任せる
   ここは余白とキャプションだけ
   ========================================================= */

.aap_labo_door {
    margin-bottom: 2.8em;
}

.aap_labo_door figcaption,
.aap_labo_door .aap_labo_cap {
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-gray);
    margin-top: 0.8em;
}


/* =========================================================
   04. aap_labo_head  見出し

   35本で3種類出た

   語りかけ    「パクチー嫌いは遺伝子のせい」── これ、半分しか本当じゃない
   番号        ① そもそも「ブンパラ」って、どこかの民族の掛け声?
   絵文字+【】 ⚠️ 【注意点】髪質別の「限界値」と、失客口コミから見る絶望ヘア

   記号が見出しの一部になる
   🍌 🎮 📝 📚 ▼ ⚡️ 💡 🌡️ 🧴 ⏭️ 🖼️ ☕️ 🎨 ✦
   ========================================================= */

.aap_labo_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.5em;      /* ← 足す */
    line-height: 1.5;      /* ← 1.35 は詰まりすぎ */
    color: var(--aap-black);
    margin: 0 0 1.6em;
    line-break: strict;
    word-break: normal;
}

/* =========================================================
   04-1. aap_labo_section  セクションの頭
   Salient の Animated Text をやめて自作
   英語（大）＝見出し語・Anton／日本語（小）＝意味・明朝グレー
   head（記事タイトル器）とは別。talk / door の兄弟
   余白は margin で持つ = Salient の p 強制を踏まない
   ========================================================= */
.aap_labo_section {
    text-align: center;
    margin: 3.5em 0 2.4em;
}
.aap_labo_section .aap_labo_section_en {
    font-family: var(--aap-font-num);
    font-size: clamp(2.2rem, 7vw, 4rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: var(--aap-black);
    margin: 0;
    padding: 0;
}
.aap_labo_section .aap_labo_section_ja {
    font-family: var(--aap-font-serif);
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-gray);
    margin: 0.7em 0 0;
    padding: 0;
    font-feature-settings: "palt" 1;
    line-break: strict;
    word-break: normal;
}


/* ---------------------------------------------------------
   04-2. aap_labo_chap  章見出し

   番号付き大見出し。章がある記事

   1. おじさん、400時間が消えた話
   2. P6とP4リバイバル、今わかっていること
   おわりに — おじさんとRINA        ← これだけ番号なし

   出典 : R7
   --------------------------------------------------------- */

.aap_labo_chap {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.35em;
    line-height: 1.35;
    color: var(--aap-black);
    margin: 3.5em 0 1.6em;
    padding-bottom: 0.6em;
    border-bottom: 2px solid var(--aap-rule);
    line-break: strict;
    word-break: normal;
}


/* ---------------------------------------------------------
   04-3. aap_labo_sub  サブタイトル

   ヘッダー法則1 : タイトル2行 + サブ2行
   1行目 = 引っかかり / 2行目 = 受け

   3型ある
   1行     日本語に無いこの一語が、売れるアイドルと〜（R10）
   2行     日本がキャッシュレスになりきれない、本当の理由
           ―― おじさんがレジ前で〜 ――（R8）
   〜〜囲み 〜雨の日のネットから、おじさんは知らずに"圏"の中にいた〜（R12）

   本文では抜粋（Excerpt）がこれになる
   ここは本文中に置くとき用
   --------------------------------------------------------- */

.aap_labo_sub {
    font-family: var(--aap-font-sub);
    font-size: 1.05em;
    line-height: 1.9;
    color: var(--aap-gray);
    margin: 0 0 2.4em;
    line-break: strict;
    word-break: normal;
}


/* =========================================================
   04-4. aap_labo_list  箇条書き

   3種類

   情報の列   公開されたのはティザー映像のみ。雨の墓地、〜（R7）
   定義       丸顔さん：「丸みが強調されるのが〜」（STYLE001）
   手順       1. オイルを手に取り、〜（STYLE001）
   ========================================================= */

.aap_labo_list {
    margin: 1.8em 0;
    padding: 0;
    list-style: none !important;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_list li {
    margin: 0 0 0.8em;
    list-style: none !important;
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_list li::before {
    content: "・";
    display: inline-block;
    width: 1.2em;
    text-indent: 0;
    color: var(--aap-orange);
}

.aap_labo_list li:last-child {
    margin-bottom: 0;
}

/* 手順型。番号を振る */
.aap_labo_list_step {
    margin: 1.8em 0;
    padding: 0;
    list-style: none!important;   /* ← 親が握ってるので !important */
    counter-reset: aap_step;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_list_step li {
    counter-increment: aap_step;
    margin: 0 0 0.8em;
    list-style: none !important;   /* ← 追加 */
    padding-left: 1.8em;
    text-indent: -1.8em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_list_step li::before {
    content: counter( aap_step ) ".";
    display: inline-block;
    width: 1.8em;
    text-indent: 0;
    color: var(--aap-orange);
    font-weight: 700;
}

.aap_labo_list_step li:last-child {
    margin-bottom: 0;
}

/* 定義型。見出し + 中身 */
.aap_labo_list_def {
    margin: 1.8em 0;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_list_def dt {
    font-weight: 700;
    color: var(--aap-orange);
    margin: 0 0 0.3em;
}

.aap_labo_list_def dd {
    margin: 0 0 1.4em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_list_def dd:last-child {
    margin-bottom: 0;
}


/* =========================================================
   04-5. aap_labo_vs  対比

   ❌「우리 팬 미쳤어」=日本人ファンの前ではNG
   ✅「우리 팬 너무 좋아」=「うちのファン大好き」で言い換えろ

   ⭕️ メリット / ❌ デメリット

   記号は本文に書く。CSS は箱だけ
   出典 : STUDY001 / STYLE001 / STYLE002
   ========================================================= */

.aap_labo_vs {
    margin: 2em 0;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_vs .aap_labo_vs_ok,
.aap_labo_vs .aap_labo_vs_ng {
    margin: 0 0 1em;
    padding: 0.9em 1.2em;
    line-break: strict;
    word-break: normal;
}

.aap_labo_vs .aap_labo_vs_ok {
    border-left: 3px solid var(--aap-orange);
}

.aap_labo_vs .aap_labo_vs_ng {
    border-left: 3px solid var(--aap-rule);
    color: var(--aap-gray);
}

.aap_labo_vs > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   04-6. aap_labo_table  表

   年代・髪質                推奨温度
   30代後半・通常カラー毛      120℃ 〜 130℃

   出典 : STYLE002
   ========================================================= */

.aap_labo_table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-black);
}

.aap_labo_table th,
.aap_labo_table td {
    padding: 0.8em 1em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--aap-rule);
    line-break: strict;
    word-break: normal;
}

.aap_labo_table th {
    font-weight: 700;
    color: var(--aap-gray);
    border-bottom-width: 2px;
}

/* =========================================================
   04-6-2. aap_labo_report  DRレポートの箱（EINA印）

   EINA が DR（ディープリサーチ）で持ってくる外部資料
   RINA オレンジの記事の中で「これは EINA のもの」を
   青い箱で視覚宣言する。にらみ合いの構図と呼応

   中身は軽い対比表。8軸フルは載せない（重い）
   RINA が拾った要点だけ。表は EINA ブルーで立てる
   右上ラベルは Anton・ブルー塗り（knowledge の EINA 版）
   ========================================================= */
.aap_labo_report {
    position: relative;
    margin: 2.4em 0;
    padding: 1.8em 1.6em 1.4em;
    border: 1px solid var(--aap-blue);
    border-radius: 12px;
    background: rgba( 59, 138, 240, 0.04 );   /* ごく薄い EINA ブルー */
}

/* 右上ラベル：EINAブルーの塗り（枠をまたいで浮く） */
.aap_labo_report .aap_labo_report_label {
    position: absolute;
    top: 0;
    right: 1.4em;
    transform: translateY(-50%);
    background: var(--aap-blue);
    color: #fff;
    font-family: var(--aap-font-num);   /* Anton */
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    padding: 0.4em 1.1em;
    border-radius: 999px;
}

.aap_labo_report table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aap-fs-small);
    line-height: 1.7;
    color: var(--aap-black);
}

.aap_labo_report th,
.aap_labo_report td {
    padding: 0.9em 1em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--aap-rule);
    line-break: strict;
    word-break: normal;
}

/* 列見出し（若い世代 / 年輩世代）= EINAブルー */
.aap_labo_report thead th {
    font-family: var(--aap-font-title);
    font-weight: 700;
    color: var(--aap-blue);
    border-bottom: 2px solid var(--aap-blue);
}

/* 左端の軸ラベル（タイプ / 距離感）= グレー小 */
.aap_labo_report tbody th {
    font-weight: 700;
    color: var(--aap-gray);
    white-space: nowrap;
    width: 6em;
}

.aap_labo_report tbody tr:last-child th,
.aap_labo_report tbody tr:last-child td {
    border-bottom: none;
}

/* キャプション（要点の一言・8軸から抜いた注記） */
.aap_labo_report .aap_labo_report_cap {
    font-family: var(--aap-font-serif);
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-gray);
    margin: 1em 0 0;
    padding-top: 0.9em;
    border-top: 1px solid var(--aap-rule);
}


/* =========================================================
   04-7. aap_labo_matrix  マトリクス

   3層セット × N

   ① 丸顔 × 30代後半
   スマホで見せるオーダー文:「〜」
   解決する課題:〜
   注意点:〜

   記事が道具になる
   「スマホでこの画面をそのまま美容師に見せてオーダーしてください」

   出典 : STYLE002（6パターン）
   ========================================================= */

.aap_labo_matrix {
    margin: 2.4em 0;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_matrix .aap_labo_matrix_item {
    margin: 0 0 2em;
    padding: 1.4em 1.6em;
    border: 1px solid var(--aap-rule);
}

.aap_labo_matrix .aap_labo_matrix_head {
    font-weight: 700;
    color: var(--aap-orange);
    margin: 0 0 0.8em;
}

.aap_labo_matrix dt {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--aap-gray);
    margin: 0 0 0.2em;
}

.aap_labo_matrix dd {
    margin: 0 0 1em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_matrix dd:last-child {
    margin-bottom: 0;
}

.aap_labo_matrix .aap_labo_matrix_item:last-child {
    margin-bottom: 0;
}


/* =========================================================
   04-8. aap_labo_note  注記

   5種類

   イメージ       ※本アクスタはイメージです。
   AI生成         ※本記事の画像はすべてAIで生成したオリジナルです。
   AI予測         ※ ここからはAIの予測に過ぎません。外れても、RINAを責めないでください。
   シリーズ説明   ※AAP-STUDYシリーズは、〜の会話形式でお届けします。
   フィクション   ※サロン描写はフィクションです。

   ※ は本文に書く。CSS は箱だけ
   ========================================================= */

.aap_labo_note {
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-gray);
    margin: 1.2em 0;
    text-align: left;          /* ← 追加。親の中央揃えを拾わせない */
    line-break: strict;
    word-break: normal;
}


/* =========================================================
   04-9. aap_labo_guess  推測

   有料記事の締めの型。目次の最後に定位置がある

   リナ：ここからは、リナの推測です。ちゃんとした裏付けがある話じゃなくて、
        今ある材料から予想する話。そこは正直に分けておくね。

   呼び名が揺れている : 推測（R4/R8）/ 考察（R9）/ 予測（R10/R11）

   裏付けのある話と、そうでない話に、自分で線を引く箱
   ========================================================= */

.aap_labo_guess {
    margin: 2.4em 0;
    padding: 1.4em 1.6em;
    border: 1px dashed var(--aap-rule);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_guess .aap_labo_guess_head {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--aap-gray);
    margin: 0 0 0.8em;
}

/* =========================================================
   04-9-1. aap_labo_end  締め

   記事全体の結論。着地点
   リード（入口）と対になる出口
   本文から切り離して、ここが結論だと分からせる
   ========================================================= */

.aap_labo_end {
    margin: 3.5em 0 2em;
    padding: 1.8em 1.8em 1.6em;
    border-left: 3px solid var(--aap-orange);
    background: rgba( 138, 138, 138, 0.03 );   /* 0.05 → 0.03。もっと薄く */
    font-size: var(--aap-fs-small);
    line-height: 1.85;
    color: var(--aap-black);
}

.aap_labo_end .aap_labo_end_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-black);
    margin: 0 0 1em;
}

.aap_labo_end p {
    margin: 0 0 0.8em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_end p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   04-10. aap_labo_goods  グッズ

   画像 + グッズ会話 + ※イメージです
   R1（アクスタ）→ R2（缶バッジ）→ R5（ビッグアクスタ）→ R6（ドッグタグ）
   ========================================================= */

.aap_labo_goods {
    margin: 3em 0;
}

/* =========================================================
   04-11. aap_labo_rank  順位

   第3位 → 画像 → 講評
   第1位 → どどどどどおおん。→ 画像 → 講評

   出典 : R7
   ========================================================= */

.aap_labo_rank {
    margin: 2.4em 0;
}

.aap_labo_rank .aap_labo_rank_num {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.2em;
    color: var(--aap-orange);
    margin: 0 0 0.8em;
}

.aap_labo_rank .aap_labo_rank_body {
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
    margin-top: 1.2em;
    line-break: strict;
    word-break: normal;
}


/* =========================================================
   04-12. aap_labo_next  次回予告

   次回予告
   AAP-STUDY002:使い方間違うとえらいことになる言葉シリーズ第2弾「헐シリーズ」

   R系にはない。STUDY / STYLE の型
   輪が明示される
   ========================================================= */

.aap_labo_next {
    margin: 3em 0;
    padding: 1.4em 1.6em;
    border-top: 1px solid var(--aap-rule);
    border-bottom: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_next .aap_labo_next_head {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--aap-orange);
    margin: 0 0 0.6em;
}


/* =========================================================
   04-13. aap_labo_about  シリーズ説明

   ※AAP-STUDYシリーズは、AAP-S_MODEL03のJURIと
   AAPアジョシの会話形式でお届けします。

   note と同じ役割。記事の末尾に置く
   ========================================================= */

.aap_labo_about {
    margin: 2.4em 0;
    font-size: var(--aap-fs-small);
    line-height: 1.8;
    color: var(--aap-gray);
    line-break: strict;
    word-break: normal;
}


/* =========================================================
   05. aap_labo_quiz  設問
   問題 + 選択肢
   ========================================================= */

.aap_labo_quiz {
    margin: 3em 0;
    padding: 1.6em 1.6em 1.4em;
    border: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_quiz .aap_labo_q {
    font-weight: 700;
    margin: 0 0 1em;
    line-break: strict;
    word-break: normal;
}

.aap_labo_quiz ol {
    margin: 0;
    padding: 0;
    list-style: none !important;   /* ← !important */
    counter-reset: aap_q;
}

.aap_labo_quiz ol li {
    counter-increment: aap_q;
    list-style: none !important;   /* ← !important */
    margin: 0 0 0.5em;
    padding-left: 2.2em;
    text-indent: -2.2em;
    line-break: strict;
    word-break: normal;
}

/* A / B / C / D */
.aap_labo_quiz ol li::before {
    content: counter( aap_q, upper-alpha ) ".";
    display: inline-block;
    width: 2.2em;
    text-indent: 0;
    color: var(--aap-orange);
    font-weight: 700;
}

.aap_labo_quiz ol li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   06. aap_labo_answer  答え合わせ
   答え + 解説
   ========================================================= */

.aap_labo_answer {
    margin: 3em 0;
    padding-top: 1.4em;
    border-top: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_answer dl {
    margin: 0;
}

.aap_labo_answer dt {
    font-weight: 700;
    color: var(--aap-orange);
    margin: 0 0 0.3em;
}

.aap_labo_answer dd {
    margin: 0 0 1.4em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_answer dd:last-child {
    margin-bottom: 0;
}


/* =========================================================
   07. aap_labo_ref  裏付け
   参考にした研究・資料
   顔が出る唯一の場所
   使わない話では、この要素ごと削る

   「どこの骨の馬かわからない書き手の有料記事は売れない」
   リンクの列が骨の証明

   R1-R3 = 0本 / R4 = 6本 / R6 = 13本（小見出し付き）
   R7 = 0本（自分の話だから）
   R4 の方が R12 より強い
   ========================================================= */

.aap_labo_ref {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 3em;
    padding-top: 1.4em;
    border-top: 1px solid var(--aap-rule);
}

.aap_labo_ref .aap_labo_face {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;   /* Salient の max-width:100% を殺す */
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 !important;          /* Salient の margin-bottom:15px も消す */
    object-fit: cover;             /* 丸に画像をきれいに収める */
}

.aap_labo_ref .aap_labo_ref_body {
    font-size: var(--aap-fs-small);
    line-height: 1.9;
    color: var(--aap-gray);
    padding-top: 0.3em;
}

.aap_labo_ref .aap_labo_ref_body p {
    margin: 0 0 0.5em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_ref .aap_labo_ref_body p:last-child {
    margin-bottom: 0;
}

.aap_labo_ref a {
    color: var(--aap-gray);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.aap_labo_ref a:hover {
    color: var(--aap-orange);
}

/* 小見出し付き（R6型）
   リンクが13本になると、束ねないと読めない */
.aap_labo_ref .aap_labo_ref_head {
    font-size: 0.92em;
    font-weight: 700;
    color: var(--aap-black);
    margin: 1.4em 0 0.4em;
}

.aap_labo_ref .aap_labo_ref_head:first-child {
    margin-top: 0;
}

/* 締め文
   「この記事は、3つのAIに同じテーマを調べさせて、突き合わせて作っています。
     それぞれ違う角度の調査結果を、最後はおじさんの「〜」という体感でまとめました。」
   「〜」だけ記事ごと */
.aap_labo_ref .aap_labo_ref_close {
    margin-top: 1.4em;
    padding-top: 1em;
    border-top: 1px solid var(--aap-rule);
}


/* =========================================================
   07-2. aap_labo_limit  壁（有料への扉）

   AL に3000文字 + ALらしさ
   NOTE には100文字のプロローグ + AL リンク + LIMITED-BOX

   Google → NOTE → AL（無料層はここで巡回に入る）
   有料が要る人だけ NOTE へ戻る
   NOTE は保管措置。稼ぐ場所ではない

   鍵は目次。「開けますか」を置くだけ

   ---------------------------------------------------------
   壁の3ブロック（R3A で確定）

   Section 1  目次      自前 HTML + このCSS
   Section 2  動画      Salient の Video Lightbox（8秒・表紙が動く）
   Section 3  ボタン    Salient の Button（note へ）

   Section 1 だけ Raw HTML。2と3は Salient の UI で置く
   記事ごとに変わるのは目次のテキストと URL だけ

   ---------------------------------------------------------
   35本で5型出た。進化の記録そのもの

   R3       散文型。＝＝＝＝＝ を文字で殴る
   R8/R9    層型。第一層〜第五層 + 最奥 + RINAの推測
   R10      章型。第1章〜第9章
   RE-NOTE  ★ラベル型。4. おじさんの夜　★一次情報の核心
   R12      4ブロック型（完成形）
   STUDY003 二層目次型。無料の目次 + 有料の目次

   層 → 章 → 話。物語になった

   ---------------------------------------------------------
   注釈

   01. 箱
   02. head（オレンジのピル。境界の宣言）
   03. title（PRIVATE NOTE。場所の名前）
   04. intro（前置き）
   05. 目次（主役）
   06. ★ラベル（RE-NOTE型）
   07. 構成の説明（R12の2ブロック目）
   08. pitch（この先について）
   09. 価格
   10. note 表紙バナー（壁の後に置く独立要素・現在は Section 3 のボタンに置換）

   オーバーアクションにしない。「買え」の圧を出さない
   壁の目次は明朝。記事本文と地続きに見せる
   日本の有料コンテンツに合う控えめさ = 記事の格を守る
   ========================================================= */

/* 00. wall  有料パートの壁ぜんたい
    白紙の上に、一段だけ明るい紙が乗る
    枠と角丸で「ここから先は別の場所」を示す
    オレンジは中身(目次・P・ペン)だけに置き、器は無彩色で締める
    Row(.wpb_row)に付くため、Salientのpaddingを上書きする */
.aap_labo_limit.wpb_row {
background: var(--aap-paper, #FAFAFA);
border: 1px solid #E8E8E8;
border-radius: 16px;
padding: 2.4em 2.4em !important;
margin: 2.4em 0 !important;
}

/* スマホ: 左右を詰めて、中身が縁に貼り付かない量にする */
@media only screen and (max-width: 690px) {
.aap_labo_limit.wpb_row {
padding: 1.8em 1.4em !important;
border-radius: 12px;
}
}

/* 中の3セクション(目次カード・動画・noteボタン)の間隔をそろえる */
.aap_labo_limit.wpb_row > .row-bg-wrap + .row_col_wrap_12 > *,
.aap_labo_limit.wpb_row .wpb_column > .vc_column-inner > * {
margin-top: 2.4em;
}
.aap_labo_limit.wpb_row .wpb_column > .vc_column-inner > *:first-child {
margin-top: 0;
}   

/* 01. 箱 */
.aap_labo_limit {
    margin: 1.5em 0;
    padding: 2em 0;
    text-align: center;   /* head / title / intro を中央に */
    border-top: 2px solid var(--aap-rule);
    border-bottom: 2px solid var(--aap-rule);
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

/* Salient は p に padding-bottom を吐く
   箱の中の間隔は margin だけで決めたい
   ただし head（ピル）は自前の padding を持つので除外 */
.aap_labo_limit p:not(.aap_labo_limit_head) {
    padding-bottom: 0 !important;
}


/* 02. head  黒のピル

   ＝＝＝ をやめて、丸バッジで「境界」を印象づける
   静かだけど、デザインの芯がある

   背景は黒。PRIVATE NOTE（黒）と揃えて「黒の親子」にする
   オレンジは title の P 1文字に集中させる = アクセントは1点に絞る
   末尾の「。」は付けない（HTML 側で入れない） */
.aap_labo_limit .aap_labo_limit_head {
display: inline-block;
font-family: var(--aap-font-jp-gothic);
font-weight: 700;
font-size: 0.85em;
letter-spacing: 0.12em;
color: #fff;
background: var(--aap-black);
padding: 0.55em 1.6em;
border-radius: 999px;
margin: 0 auto 1.6em;
line-break: strict;
word-break: normal;
}


/* 03. title  PRIVATE NOTE

   壁の顔。ここから先は別の場所、を文字だけで作る
   線でも背景色でも囲わない。文字の大きさだけで境界にする

   head = 境界の宣言 / title = 場所の名前

   Anton。Content 幅（700px）に収まるサイズ
   フル幅の企業サイト型（9vw）は使わない
   目次は「答え」ではなく「問い」を並べる場所なので
   堂々と見せるレイアウトは構造に合わない

   P の1文字だけオレンジ。#AAP_R_NOTE の R と同じ手
   黒で統一した中に、オレンジを1点だけ差す */
.aap_labo_limit .aap_labo_limit_title {
font-family: 'Anton AAP', var(--aap-font-num);
font-weight: 400;
font-size: clamp(2rem, 6vw, 3.2rem);
line-height: 1.1;
letter-spacing: 0.03em;
color: var(--aap-black);
margin: 0 0 0.8em;
}

/* title の P だけオレンジ */
.aap_labo_limit .aap_labo_limit_p {
color: var(--aap-orange);
}


/* 04. intro  前置き
    このあと、おじさんとリナが話すのは、こんなこと。

    左に RINA のアイコン、右に手書き風のひとこと
    RINA が「これから話すよ」と語りかける温度を出す
    手書き = 会話の前の、肩の力が抜けた声 */
.aap_labo_limit .aap_labo_limit_intro {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8em;
font-family: 'Zen Kurenaido AAP', var(--aap-font-jp-gothic);
font-size: 1.05em;
line-height: 1.7;
color: var(--aap-gray);
margin: 0 0 2.4em;
font-feature-settings: "palt" 1;
    }

/* テキスト側を一つの箱にまとめ、幅の上限と改行を制御する */
.aap_labo_limit .aap_labo_limit_intro_txt {
flex: 0 1 auto;
max-width: 16em;
word-break: auto-phrase;
text-align: left;
    }

.aap_labo_limit .aap_labo_limit_intro_face {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
border-radius: 50%;
flex-shrink: 0;
margin: 0 !important;
object-fit: cover;
}

/* 05. 目次が主役

   ― マーカーで問いを1つずつ立てる
   明朝（Shippori）で本文の会話と地続きに見せる

   項目ごとに薄い罫線。章立てとして数えられるようにする
   上下に padding。問いを1つずつ立てる = 詰めない
   palt。「」や "" が多いので約物を締める

   番号（01/02/03）は振らない
   数え上げると問いの余韻が消える
   答えを見せない目次なので、静かに並べるほうが構造に合う */
.aap_labo_limit .aap_labo_limit_toc {
    margin: 0 0 2.4em;
    padding: 0;
    list-style: none !important;
    border-top: 1px solid var(--aap-rule);
    text-align: left;
}

.aap_labo_limit .aap_labo_limit_toc li {
    list-style: none !important;
    font-family: var(--aap-font-serif);
    font-size: 1.05em;
    line-height: 1.7;
    margin: 0;
    padding: 1.1em 0 1.1em 1.4em;
    text-indent: -1.4em;
    border-bottom: 1px solid var(--aap-rule);
    font-feature-settings: "palt" 1;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_limit .aap_labo_limit_toc li::before {
    content: "―";
    display: inline-block;
    width: 1.4em;
    text-indent: 0;
    color: var(--aap-orange);
}


/* 06. ★ラベル（RE-NOTE型）
   4. おじさんの夜　★一次情報の核心 */
.aap_labo_limit .aap_labo_limit_star {
    color: var(--aap-orange);
    font-size: 0.9em;
    margin-left: 0.5em;
}


/* 07. 構成の説明（R12の2ブロック目）
   ここから先は、GPT・Gemini・Claude（リナ）のAIリサーチ ＋ 〜 */
.aap_labo_limit .aap_labo_limit_about {
    font-size: var(--aap-fs-small);
    line-height: 1.9;
    color: var(--aap-gray);
    margin: 0 0 2em;
    line-break: strict;
    word-break: normal;
}


/* 08. pitch  この先について

   「読んでも、1円も安くなりません。クーポンも、配りません。
     ただ、二度と『踊らされない』自分に、なれます。」
   明朝で。本文と地続きに */
.aap_labo_limit .aap_labo_limit_pitch {
    font-family: var(--aap-font-serif);
    margin: 0 0 1.6em;
    text-align: left;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}


/* 09. 価格。500円。約2万文字。 */
.aap_labo_limit .aap_labo_limit_price {
    font-family: var(--aap-font-title);
    font-weight: 700;
    color: var(--aap-black);
}


/* 10. note 表紙バナー（壁の後に置く独立要素）

   表紙画像をクリックで note の有料記事へ
   派手なボタンにしない。表紙をそっと置いて静かに押せる
   AL は無料の巡回、note は有料の帰着。その導線

   R3A 以降は Section 3 の Salient Button に置き換わっている
   静止画のバナーを使う記事のために残す */
.aap_labo_note_banner {
    display: block;
    max-width: 480px;
    margin: 1.5em auto 3em;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aap_labo_note_banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.13 );
}

.aap_labo_note_banner img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 !important;
    border-radius: 10px;
}



/* =========================================================
   07-3. aap_labo_cast  登場人物

   R12 で確定。壁の手前に置く
   「EINA が出る」が売りになる

   おじさん（AAPアジョシ） ── 気になったことを、ぜんぶ投げる人。
                             今日、実際に5万円のルーターに騙されかけたリアル人物。
   RINA（AAP-MODEL:00） ── 調べて答える仮想人物。
   EINA（AAP-MODEL:000） ── 手紙で、いちばんえげつない事実を足してくる仮想人物。

   リアル人物 / 仮想人物を明記する
   おじさんだけリアル

   丸を出すなら Salient の Circle Images（塩味 = aap_circle_image_box）
   ここはテキスト版
   ========================================================= */

.aap_labo_cast {
    margin: 2em 0;
    font-size: var(--aap-fs-small);
    line-height: 1.9;
    color: var(--aap-black);
}

.aap_labo_cast .aap_labo_cast_head {
    font-weight: 700;
    color: var(--aap-gray);
    margin: 0 0 1em;
}

.aap_labo_cast dl {
    margin: 0;
}

.aap_labo_cast dt {
    font-weight: 700;
    margin: 0 0 0.2em;
}

.aap_labo_cast dd {
    margin: 0 0 1.2em;
    color: var(--aap-gray);
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_cast dd:last-child {
    margin-bottom: 0;
}

/* 名前の色は models が持つ
   ここでは is-rina / is-eina / is-oji を dt に付ける
   ただし ::before は出したくないので殺す */
.aap_labo_cast dt.is-rina::before,
.aap_labo_cast dt.is-eina::before,
.aap_labo_cast dt.is-oji::before {
    content: none;
}

.aap_labo_cast dt.is-rina { color: var(--aap-orange); }
.aap_labo_cast dt.is-eina { color: var(--aap-blue); }
.aap_labo_cast dt.is-oji  { color: var(--aap-gray); }


/* =========================================================
   07-4. aap_labo_meta  協働研究レポート

   AAP 最大の発明
   制作過程そのものを記事にする箱

   AAPおじさん:「第1弾の記事ですけど……絵文字が多くなかったですかね?」
   HARUKA:「……あなたがそうプロンプトを書いたんだろう?」
   HARUKA:「前回の『AIに人格を丸投げしたら過剰な絵文字と幼い語尾が出現した』という
          現象自体、AI共存の観察データとしては面白いサンプルだったんじゃない?」

   前回の失敗を消さずに、記事の中で回収する
   型を破るとき、破ることを先に言う（R7「今日は逆」も同型）

   素性は隠すが、AI とどう作っているかは全部見せる
   それが「AIとの共存」の実装

   出典 : STYLE002 / R7
   ========================================================= */

.aap_labo_meta {
    margin: 0 0 3em;
    padding: 1.6em 1.8em;
    background: rgba( 138, 138, 138, 0.06 );
}

.aap_labo_meta .aap_labo_meta_head {
    font-family: var(--aap-font-title);
    font-weight: 700;
    font-size: 0.95em;
    color: var(--aap-gray);
    margin: 0 0 1.2em;
}


/* =========================================================
   08. Salient UI への塩味（component）

   Salient が持っているものは Salient にやらせる
   英語前提の部分だけ上書きする
   マークアップも既存 CSS もそのまま残る

   二通りある
   1. Extra Class Name で足す（aap_ を被せる）
   2. 親のクラスを直接叩く（Salient が自動で出すもの）

   2 は親と喧嘩するので !important
   それ以外では使わない
   ========================================================= */


/* ---------------------------------------------------------
   08-1. ヘッダー
   .row.featured-media-under-header

   Salient が投稿の標準機能から自動で出す
   タイトル / カテゴリ / 抜粋 / アイキャッチ
   Global Section で全記事に配る
   組まない。出たものを直す

   ---------------------------------------------------------
   何を出すか（新方針）

   タイトル = 日本語が主役。Zen で太く、2行
             識別子（R1 / HdS1 / JdS1）はタイトル文字列の頭に畳む
             例）R1 パクチーが「石鹸の味」って言う人へ。それ、遺伝子のせいにしてない?

   抜粋     = AAP-NOTE-R1 などの正式表記 + 2〜3行サマリー
             ブログのみ表示。TOP のカードには出ない（Salient 標準の出し分け）

   カスタムフィールドもオーバーライドも使わない
   Salient が持つ「タイトル」と「抜粋」の2器だけで組む

   ---------------------------------------------------------
   何が壊れているか

   1. センター揃い
      日本語には単語の切れ目がない
      センターに置くと両端がギザギザして事故に見える
      → 左揃えに倒す

   2. タイトルがヒラギノで痩せる
      Salient Typography を空にしたので system font に落ちた
      → Zen Kaku AAP で締める（front.css §00-2 でセルフホスト）
        欧文の識別子も日本語も、同じ Zen で1本に通す

   ---------------------------------------------------------
   Salient が持ってる値は動かさない
   Salient が置いた位置だけ動かす

   触らない : max-width / アニメ
   倒す     : text-align / margin / font-family / weight / line-height

   タイトルのクラスは .entry-title
   Salient は h1 に直接 font-size:54px を吐くので
   .featured-media-under-header h1 で狙って上書きする

   親のデザインを使う。でも日本語に最適化されていない
   だから !important。全部その記録
   --------------------------------------------------------- */

/* Blog Content Width 700 に対し、ヘッダーだけ広げ直す
   Salient は @media(min-width:1000px) で __content に max-width:700px を吐く
   詳細度が高いので !important で上書き */
.featured-media-under-header__content {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 中身を左に倒す */
.featured-media-under-header__content {
    text-align: left !important;
}

.featured-media-under-header__cat-wrap,
.featured-media-under-header__meta-wrap {
    justify-content: flex-start !important;
}

/* 記事タイトル = 日本語主役。Zen で太く、2行
   Salient は h1 に font-size:54px を直接吐くので、その子孫で狙う
   line-height 1.1 は英字用。日本語2行では詰まるので 1.5 に開ける */
.featured-media-under-header h1.entry-title {
    font-family: 'Zen Kaku AAP', var(--aap-font-jp-gothic) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;              /* 0.02em → 0。角ゴは詰めて塊に */
    line-height: 1.4 !important;               /* 1.5 → 1.4。2行を一つの塊に */
    font-size: clamp(1.6rem, 4.2vw, 3rem) !important;
    max-width: 22em;
    margin-left: auto !important;
    margin-right: auto !important;
    font-feature-settings: "palt" 1;           /* 約物の余白を詰める。ヒラギノ超えの隠し味 */
}

/* 抜粋 = 正式表記 + サマリー。ブログのみ。Zen で本文寄り
   タイトルより一段細く。左に倒す */
.featured-media-under-header__excerpt {
    font-family: 'Zen Kaku AAP', var(--aap-font-jp-gothic) !important;
    font-weight: 400 !important;
    line-height: 1.9 !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* 著者は出さない
   AAP は全記事1人名義。著者名・アバターを出す意味がない
   Salient が dynamic-css で display:inline-flex を後から吐くので !important */
.featured-media-under-header__meta-wrap .meta-author {
    display: none !important;
}

.featured-media-under-header__meta-wrap .meta-date::before {
    display: none !important;
}


/* ---------------------------------------------------------
   08-2. aap_labo_image  Single Image への塩味

   画像は Salient に任せる
   Image Size / Max Width / Lazy Load / Caption 全部持っている
   CSS Class Name に aap_labo_image を入れる

   ---------------------------------------------------------
   Salient は Single Image に下の余白を持たせない
   Raw HTML の div も持たない → 密着する
   ここで離す

   サイズは記事ごとに違う
   Row 1 は正方形、他のセクションはバラバラ
   だから CSS でサイズを決めない。Salient の UI が決める
   --------------------------------------------------------- */

.aap_labo_image {
    margin-bottom: 2.4em;
}

/* --- Single Image  Salient に任せる ---
   Image Size / Max Width / Lazy Load / Caption は Salient が持つ
   ここは余白とキャプションだけ

   Row / Col の Margin 設定は使わない
   35本×何十枚を手で設定すると、忘れる・バラつく
   CSS が1箇所で持つ

   img-with-aniamtion-wrap は Salient のタイポ
   aniamtion。直せない。そのまま使う */

/* 画像と次の要素の間 */
.wpb_column .img-with-aniamtion-wrap {
    margin-bottom: 2.4em;
}

/* キャプション
   画像の注釈。本文と混ざらないよう、はっきり差をつける
   小さく・斜体・字間広め = 「これは注釈」の記号 */
.img-with-aniamtion-wrap .img-caption {
    text-align: center;
    font-family: var(--aap-font-en-mincho);   /* Playfair 系。英数が主なら映える */
    font-size: 0.8em;
    font-style: italic;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--aap-gray);
    margin-top: 0.8em;
    margin-bottom: 2.4em;
    padding-bottom: 0;
}


/* =========================================================
   08-3. aap_cast_circles / aap_cast_label  登場人物（CAST）

   Salient の Circle Images と Animated Title を借りる
   丸の重なり・border-radius・background-size・アニメは Salient が持つ
   AAP が足すのは「丸を中央に」「名前は隠す」「CAST を Anton に」だけ

   手動運用 : WPBakery で丸に画像を1つずつ選ぶ
   その記事の顔を毎回選ぶ = 変幻自在。PHP 連携はしない

   名前は出さない :
   Salient の Circle Images は「1画像 = 1名前」に対応しない
   名前は __text に全員まとめて1行（RINA、MEMUMI）
   丸とバランスが悪いので隠す。登場人物は顔で見せる
   （画像タイトルに名前を入れても可。alt に残り、画面には出ない）
   ========================================================= */

.aap_cast_circles {
    margin-bottom: 2em;
}

/* 丸を中央に重ねる（Salient の overlapping はそのまま活かす） */
.aap_cast_circles .nectar-circle-images__inner {
    justify-content: center !important;
}

/* 名前は隠す（顔で見せる） */
.aap_cast_circles .nectar-circle-images__text {
    display: none !important;
}


/* --- aap_cast_label  CAST ラベル（Anton・英字） ---
   Salient の Animated Title（nectar-split-heading）に付ける
   分割された各文字の span まで Anton を届かせる */
.aap_cast_label,
.aap_cast_label * {
    font-family: var(--aap-font-num) !important;   /* Anton */
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------
   08-4. aap_labo_note_btn  NOTE へのボタン

   壁の3ブロック目
   目次（自前）→ 動画（Salient）→ ボタン（Salient）

   Salient の Button に CSS Class Name で当てる
   形（Pill = border_radius_100px）とサイズは Salient の UI が持つ

   ---------------------------------------------------------
   ここで触るのは色・書体・余白だけ

   transform / box-shadow / transition は書かない
   Salient のボタンはホバーエフェクトを擬似要素で持っている
   こちらから transform をかけると、そのアニメーションが死ぬ

   色は CSS 変数で差し替える
   --nectar-button-color を上書きすれば hover も擬似要素もまとめて効く
   --nectar-accent-color は触らない（サイト全体のアクセント色が変わる）

   クラスが付くのは .nectar-cta（ラッパー）
   実際の塗りは .link_wrap
   --------------------------------------------------------- */

.nectar-cta.aap_labo_note_btn {
    --nectar-button-color: var(--aap-orange);
    margin: 3em auto 4em !important;
}

.nectar-cta.aap_labo_note_btn .link_wrap {
    font-family: var(--aap-font-jp-gothic) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

/* =========================================================
   08-5. aap_labo_more  もっと読みたい人へ

   読者を外の一次ソースへ送り出すリンク集
   ref（07）と対になる

   ref  = 裏付け・自分の証明（守り）「この骨の書き手だ」
   more = 読者への贈り物（攻め）「もっと読めるよ」

   RINA が浅く語ったテーマの、深い場所への入口
   全シリーズ共通。話を掘る回でも、画像を掘る回でも使う
   淡々と。押しつけない
   ========================================================= */

.aap_labo_more {
    margin: 2.4em 0 3em;
    font-size: var(--aap-fs-small);
    line-height: 1.9;
    color: var(--aap-gray);
}

/* 見出し「▼ もっと読みたい人へ」 */
.aap_labo_more .aap_labo_more_head {
    color: var(--aap-gray);
    margin: 0 0 0.8em;
    line-break: strict;
    word-break: normal;
}

.aap_labo_more ul {
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.aap_labo_more li {
    list-style: none !important;
    margin: 0 0 0.6em;
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_labo_more li::before {
    content: "・";
    display: inline-block;
    width: 1.2em;
    text-indent: 0;
    color: var(--aap-orange);
}

.aap_labo_more li:last-child {
    margin-bottom: 0;
}

/* リンク本体。控えめ。ホバーでオレンジ */
.aap_labo_more a {
    color: var(--aap-gray);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.aap_labo_more a:hover {
    color: var(--aap-orange);
}


/* =========================================================
   09. Row の間

   Row 同士の切れ目
   Shape Divider は使わない。装飾だから

   5em の空白 → 1px の線 → 5em の空白
   線が真ん中に来る

   Row 1個 = セクション1個
   R1 には「プロローグ」「第1話」と書いていないが、構造はそこにある
   後から発明した器に、先に書いたものを入れる
   テキストは1文字も変えない

   aap_container_* = Row。塊が何か
   シリーズを知る唯一の場所
   ========================================================= */

/* §09 Row間 — セレクタリストに rnews を追加 */
.aap_container_r_section + .aap_container_r_section,
.aap_container_rnews_section + .aap_container_rnews_section,   /* ← 追加 */
.aap_container_study_section + .aap_container_study_section,
.aap_container_style_section + .aap_container_style_section,
.aap_container_pose_section + .aap_container_pose_section {
    margin-top: 5em;
}

/* 線は Col の内側に引く
   Row に引くと Salient の Col padding の分だけ左に飛び出す
   中身と同じ左端から始めたい */
/* 線も同じく（Col内側に引く方） */
.aap_container_r_section + .aap_container_r_section .wpb_column > .vc_column-inner,
.aap_container_rnews_section + .aap_container_rnews_section .wpb_column > .vc_column-inner,   /* ← 追加 */
.aap_container_study_section + .aap_container_study_section .wpb_column > .vc_column-inner,
.aap_container_style_section + .aap_container_style_section .wpb_column > .vc_column-inner,
.aap_container_pose_section + .aap_container_pose_section .wpb_column > .vc_column-inner {
    padding-top: 5em;
    border-top: 1px solid var(--aap-rule);
}

/* =========================================================
   R-NEWS ticker  流れるテロップ（報道枠の看板）
   Extra Class: aap_rnews_ticker
   ========================================================= */

/* 帯（外枠） */


.aap_rnews_ticker {
    background: var(--aap-series-odyssey);
    padding: 0.3em 0;
    overflow: hidden;
}

.aap_rnews_ticker * {
    font-family: 'Zen Kaku AAP', var(--aap-font-jp-gothic) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #fff !important;
    letter-spacing: 0.06em;
}

/* ★追加：テロップ内h1の余白を潰す（line-height 62px が犯人） */
.aap_rnews_ticker h1 {
    line-height: 1 !important;
    margin: 0 !important;
}



/* =========================================================
   10. スマホ

   幅がないのでぶら下げをやめ、名前を上の行に置く
   media query は必須
   入れないと 5.5em のぶら下げが残り、本文が1行7〜8文字になる
   ========================================================= */

@media only screen and (max-width: 690px) {

    .aap_labo_talk {
        font-size: var(--aap-fs-body-sp);
        line-height: var(--aap-lh-jp-sp);
    }

    .aap_labo_talk p {
        padding-left: 0;
        text-indent: 0;
    }

    .aap_labo_talk p::before {
        display: block;
        width: auto;
        margin-bottom: 0.1em;
    }

    .aap_labo_section {
        margin: 2.4em 0 1.8em;
    }

    .aap_labo_mono,
    .aap_labo_stage {
        font-size: var(--aap-fs-body-sp);
        line-height: var(--aap-lh-jp-sp);
    }

    .aap_labo_quiz,
    .aap_labo_guess,
    .aap_labo_next {
        padding: 1.2em 1.2em 1em;
    }

    .aap_labo_matrix .aap_labo_matrix_item {
        padding: 1.2em 1.2em;
    }

    .aap_labo_meta {
        padding: 1.2em 1.2em;
    }

    /* 表は横に逃がす
       日本語の表は縮めると読めなくなる
       畳むより、スクロールさせた方が速い */
    .aap_labo_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    

    .aap_labo_ex {
        padding: 0.9em 1em;
    }

    /* Salient は 40px 固定。4人のレビュアー想定
       AAP は最大8人。スマホで潰れるので幅だけ倒す */
    .aap_circle_image_box .nectar-circle-images__image {
        width: 30px !important;
    }

    .aap_container_r_section + .aap_container_r_section,
    .aap_container_rnews_section + .aap_container_rnews_section,
    .aap_container_study_section + .aap_container_study_section,
    .aap_container_style_section + .aap_container_style_section,
    .aap_container_pose_section + .aap_container_pose_section {
        margin-top: 3.5em;
    }

    .aap_container_r_section + .aap_container_r_section .wpb_column > .vc_column-inner,
    .aap_container_rnews_section + .aap_container_rnews_section .wpb_column > .vc_column-inner,
    .aap_container_study_section + .aap_container_style_section .wpb_column > .vc_column-inner,
    .aap_container_style_section + .aap_container_style_section .wpb_column > .vc_column-inner,
    .aap_container_pose_section + .aap_container_pose_section .wpb_column > .vc_column-inner {
        padding-top: 3.5em;
    }

}