@charset "UTF-8";

/* =========================================================
   aap_commons.r_note.css

   場所 : salient-child/css/aap_commons.r_note.css
   役割 : R-NOTE の差分

   ---------------------------------------------------------
   参照 : core / models / labo_commons
   最後に読まれる = 一番強い

   シリーズが持つものは、たぶん本当に少ない
   骨（行送り・禁則・ぶら下げ・話者交代）は commons
   日本語の物理法則なので、R でも STUDY でも POSE でも同じ

   色は人が持つ。シリーズが持たない
   同じ JURI が STUDY にも POSE にも出るから

   ---------------------------------------------------------
   ※ 35本読んで分かったこと（2026-07-17）

   指南書01 v1.0 §8 は「色味とテキストの味だけ」と書いていた
   間違いだった。シリーズは名前と幅も持つ

   色     → 人が持つ        （正しかった）
   名前   → シリーズが持つ  （修正）
   幅     → シリーズが持つ  （追加）
   文体   → 誰も持たない    （テキストが持つ）

   話者名が4種類ある
   R-NOTE        おじさん
   STUDY001-002  AAP아저씨
   STUDY003-004  AAPアジョシ
   STYLE         AAP（プロデューサー）/ AAPおじさん

   R-NOTE は models のデフォルトのまま = 何も書かなくていい
   差分が出るのは STUDY / STYLE の側

   ---------------------------------------------------------
   スコープ : body.category-r_note

   カテゴリー = アイデンティティ
   r-note は「R シリーズ」ではなく
   「RINA の人生の見せ方の一つ」

   その人の人生の層に、その人の CSS が刺さる
   ========================================================= */


/* ---------------------------------------------------------
   01. R-NOTE に立てるのは4人だけ

   R は RINA の R
   R-NOTE は語る側の舞台であって、撮られる側の舞台ではない

   立てる   RINA / EINA / KUNA / NARI
   立てない S_MODEL 全員

   どれだけ絵として強くても、S_MODEL は R-NOTE に呼ばない

   ※ ただし R10 で「JURIのスタディに持ってったほうが」と
     名前だけは出る。出演しないだけ
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   02. 壁（limit）の前の区切り余白を消す

   aap_container_r_section の隣接ルール（commons）が
   Row 間に padding-top:5em + border を入れる = 装飾の区切り
   でも壁は会話の直後に、区切りなしで来てほしい
   壁を含む Row だけ、その区切りを打ち消す
   --------------------------------------------------------- */

/* 壁の Row（aap_labo_limit を含む column）の上余白と線を消す */
.vc_column-inner:has(.aap_labo_limit) {
    padding-top: 0 !important;
    border-top: none !important;
}
/* ---------------------------------------------------------
   02. 今は空

   要ると分かってから書く
   記事を HTML 化する中で、足りないものだけ足す

   設計したものではなく、書いてきたものが出る

   ---------------------------------------------------------
   候補（35本で見えているが、まだ commons で足りている）

   ・クイズの絵文字（🍌 R5 / 🎮 R6）は本文に書く
   ・目次の型（層 / 章 / 話）は limit_toc で足りる
   ・RINAの推測/考察/予測の揺れ → 呼び名は本文
   --------------------------------------------------------- */


/* body.category-r_note .aap_labo_quiz  { } */
/* body.category-r_note .aap_labo_ref   { } */
/* body.category-r_note .aap_labo_limit { } */


/* =========================================================
   aap_labo_r_end  R-NOTE の締め（RINAが引き取る着地点）

   場所 : aap_commons.r_note.css
   役割 : R-NOTE本編の出口。RINAが両論を引き取り、
          おじさんの芯を押しつけずに置く結論ブロック
          rnews_end と対。結論を「読ませる」ので
          本文サイズ・四辺の枠・上のオレンジ線で立てる

   起点はコンテナ（.aap_container_r_section）
   body には依存しない = AL の設計
   段落間は親（Salientのp padding-bottom）に任せる
   ========================================================= */

.aap_container_r_section .aap_labo_r_end {
    margin: 4em 0 2.4em;
    padding: 2.2em 2em 1.8em;
    border: 1px solid var(--aap-rule);
    border-top: 3px solid var(--aap-orange);   /* 上の太線＝結論の帽子 */
    border-radius: 14px;
    background: #fff;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_container_r_section .aap_labo_r_end .aap_labo_r_end_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.3em;
    color: var(--aap-black);
    margin: 0 0 1.2em;
    letter-spacing: 0.02em;
}

/* 段落の margin は持たない。親の p padding-bottom に任せる */
.aap_container_r_section .aap_labo_r_end p {
    margin: 0;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_container_r_section .aap_labo_r_end p:last-child {
    padding-bottom: 0;
}


/* =========================================================
   aap_labo_r_about  R-NOTE の紹介（記事末のABOUT）

   役割 : 締めの後に置く AAP-R-NOTE の案内
          断り書き（※）とは別。オレンジのミニラベルで
          「これは番組紹介」と分からせる薄グレーの箱
   ========================================================= */

.aap_container_r_section .aap_labo_r_about {
    margin: 1.6em 0 0;
    padding: 1.4em 1.6em;
    background: rgba( 138, 138, 138, 0.05 );
    border-radius: 10px;
    font-size: var(--aap-fs-small);
    line-height: 1.9;
    color: var(--aap-gray);
}

.aap_container_r_section .aap_labo_r_about .aap_labo_r_about_head {
    font-family: var(--aap-font-num);   /* Anton */
    color: var(--aap-orange);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.6em;
}


/* ---------------------------------------------------------
   02. aap_labo_r_trivia  ちょこっと豆知識カード

   JURI(STUDY)の例文カードの器を R-NOTE に転用
   ラベル=オレンジ(R-NOTEの色) / グレー枠 / 区切り線 / ※補足
   中身は語学3段ではなく「見出し+本文+注」のうんちく型
   起点はコンテナ = body非依存(ALの設計)
   --------------------------------------------------------- */

.aap_container_r_section .aap_labo_r_trivia {
position: relative;
margin: 2.4em 0;
padding: 1.8em 1.8em 1.4em;
background: #FAFAFA;
border: 1px solid var(--aap-rule);
border-radius: 14px;
font-size: var(--aap-fs-body);
line-height: var(--aap-lh-jp);
color: var(--aap-black);
}

/* 右上のミニラベル「豆知識」 */
.aap_container_r_section .aap_labo_r_trivia::after {
content: "豆知識";
position: absolute;
top: -0.9em;
right: 1.2em;
padding: 0.25em 0.9em;
background: var(--aap-orange);
color: #fff;
font-family: var(--aap-font-title);
font-weight: 900;
font-size: 0.8rem;
letter-spacing: 0.06em;
border-radius: 999px;
}

/* 見出し行 */
.aap_container_r_section .aap_labo_r_trivia .aap_labo_r_trivia_head {
font-family: var(--aap-font-title);
font-weight: 900;
font-size: 1.1em;
color: var(--aap-black);
text-align: center;
margin: 0 0 1em;
letter-spacing: 0.01em;
}

/* 本文段落。margin は親の p padding-bottom に任せる */
.aap_container_r_section .aap_labo_r_trivia p {
margin: 0;
line-break: strict;
word-break: normal;
text-align: left;
overflow-wrap: break-word;
}

/* ※補足。区切り線を挟んで一段引く */
.aap_container_r_section .aap_labo_r_trivia .aap_labo_r_trivia_note {
margin-top: 1.2em;
padding-top: 1em;
border-top: 1px solid var(--aap-rule);
font-size: var(--aap-fs-small);
text-align: left;
color: var(--aap-gray);
line-height: 1.9;
}

/* もっと読む外部リンク。中央に置く */
.aap_container_r_section .aap_labo_r_trivia .aap_labo_r_trivia_more {
    display: block;
    text-align: center;
    margin-top: 1em;
    font-size: var(--aap-fs-small);
    font-weight: 700;
    color: var(--aap-orange);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.aap_container_r_section .aap_labo_r_trivia .aap_labo_r_trivia_more::after {
    content: " ›";
    font-family: var(--aap-font-num);
}

.aap_container_r_section .aap_labo_r_trivia .aap_labo_r_trivia_more:hover {
    text-decoration: underline;
}


/* =========================================================
   aap_labo_r_qa  いいりな / ちょい悪りな 対比Q&A

   場所 : aap_commons.r_note.css
   役割 : 同じ質問に「いいりな」と「ちょい悪りな」が
          左右で答える対比ブロック。善悪が一目で割れて見える。
          R17（AI回）の中核演出。フィルターON/OFFの実演。

   起点はコンテナ = body非依存（ALの設計）
   段落marginは親のp padding-bottomに任せる
   色 : いい=緑系 / 悪=黄・黒系。変数が無ければ器内で直接指定
   ========================================================= */

.aap_container_r_section .aap_labo_r_qa {
    margin: 2.4em 0;
}

/* 質問行（おじさんの問い） */
.aap_container_r_section .aap_labo_r_qa .aap_labo_r_qa_q {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.15em;
    color: var(--aap-black);
    margin: 0 0 0.9em;
    line-height: var(--aap-lh-jp);
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Q番号バッジ */
.aap_container_r_section .aap_labo_r_qa .aap_labo_r_qa_num {
    font-family: var(--aap-font-num);   /* Anton */
    background: var(--aap-orange);
    color: #fff;
    font-size: 0.85em;
    padding: 0.1em 0.55em;
    border-radius: 6px;
    margin-right: 0.6em;
    letter-spacing: 0.04em;
}

/* 質問の補足（小さい丸カッコ） */
.aap_container_r_section .aap_labo_r_qa .aap_labo_r_qa_sub {
    display: inline-block;
    font-family: var(--aap-font-body, inherit);
    font-weight: 400;
    font-size: 0.8em;
    color: var(--aap-gray);
    margin-left: 0.3em;
}

/* 左右ペア。PC=横並び / スマホ=縦積み */
.aap_container_r_section .aap_labo_r_qa .aap_labo_r_qa_pair {
    display: flex;
    gap: 1em;
}
@media (max-width: 600px) {
    .aap_container_r_section .aap_labo_r_qa .aap_labo_r_qa_pair {
        flex-direction: column;
    }
}

/* いい/悪 共通の箱 */
.aap_container_r_section .aap_labo_r_qa_good,
.aap_container_r_section .aap_labo_r_qa_evil {
    flex: 1 1 0;
    padding: 1.2em 1.3em 1em;
    border-radius: 12px;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
}

/* いいりな：清楚・緑系 */
.aap_container_r_section .aap_labo_r_qa_good {
    background: rgba( 76, 175, 120, 0.06 );
    border: 1px solid rgba( 76, 175, 120, 0.45 );
}

/* ちょい悪りな：毒・黄/黒系 */
.aap_container_r_section .aap_labo_r_qa_evil {
    background: rgba( 20, 20, 20, 0.85 );
    border: 1px solid rgba( 214, 178, 30, 0.55 );
    color: #f2f2f2;
}

/* 名前ラベル */
.aap_container_r_section .aap_labo_r_qa_name {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 0.9em;
    letter-spacing: 0.04em;
    margin: 0 0 0.6em;
}
.aap_container_r_section .aap_labo_r_qa_good .aap_labo_r_qa_name {
    color: #2f9e5f;   /* 緑 */
}
.aap_container_r_section .aap_labo_r_qa_evil .aap_labo_r_qa_name {
    color: #e6c227;   /* 黄（獣の目） */
}

/* セリフ本文。margin は親任せ */
.aap_container_r_section .aap_labo_r_qa_line {
    margin: 0;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Q&Aの答えセリフ = 会話と同じ明朝(Shippori)。左右とも */
.aap_container_r_section .aap_labo_r_qa_line {
    font-family: var(--aap-font-serif);
}


/* =========================================================
   aap_labo_analysis  RINAの考察（右上ラベル付き・汎用分析ボックス）

   場所 : aap_labo_mark.css
   役割 : RINAが世間の声を束ねて「分析」を渡すブロック。
          R-NEWS / LOG どこでも使える汎用。右上にオレンジの
          「RINAの考察」ラベルが浮く。豆知識(左寄せ見出し)とは別物＝
          こちらは"考える"箱。study_knowledgeの右上ラベル構造を
          借り、色をRINAのオレンジに。body非依存・自クラスで完結
   ========================================================= */

.aap_labo_analysis {
    position: relative;
    margin: 2.4em 0;
    padding: 1.8em 1.8em 1.4em;
    background: #FAFAFA;
    border: 1px solid var(--aap-rule);
    border-radius: 14px;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

/* 右上ラベル：オレンジの塗り（枠線をまたいで浮く） */
.aap_labo_analysis .aap_labo_analysis_label {
    position: absolute;
    top: 0;
    right: 1.2em;
    transform: translateY(-50%);
    background: var(--aap-orange);
    color: #fff;
    font-family: var(--aap-font-title);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    padding: 0.35em 1em;
    border-radius: 999px;
}

/* 見出し行（任意）。中央に置く */
.aap_labo_analysis .aap_labo_analysis_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-black);
    text-align: center;
    margin: 0 0 1em;
    letter-spacing: 0.01em;
}

/* 本文段落 */
.aap_labo_analysis p {
    margin: 0 0 0.9em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

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

/* 項目の頭（ひとつ・ふたつ・みっつ）を立てる */
.aap_labo_analysis b {
    font-weight: 700;
    color: var(--aap-black);
}

/* 末尾の注記（※）＝線で区切って一段下・グレー */
.aap_labo_analysis .aap_labo_analysis_note {
    margin-top: 1.2em;
    padding-top: 1em;
    border-top: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-small);
    color: var(--aap-gray);
    line-height: 1.9;
}


/* =========================================================
   aap_labo_setsumei  「説明しよう」挿入ボックス

   場所 : aap_commons.r_note.css
   役割 : ゲーム/アニメの「説明しよう！」的な単発の解説挿入。
          物語を止めて設定を一気に説明する枠。豆知識(事実)とも
          会話(talk)とも違う＝ナレーションの声。r_trivia の作法に
          準拠（起点=コンテナ・本文margin無し・フォントは親任せ）
   ========================================================= */

.aap_container_r_section .aap_labo_setsumei {
    margin: 2.4em 0;
    padding: 1.8em 1.8em 1.4em;
    background: rgba( 244, 117, 33, 0.04 );
    border-left: 4px solid var(--aap-orange);
    border-radius: 14px;
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

/* 見出しラベル「説明しよう」＝左寄せ */
/* 見出しラベル「説明しよう」＝margin持たない（Salientのp padding-bottomに任せる） */
.aap_container_r_section .aap_labo_setsumei .aap_labo_setsumei_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-orange);
    margin: 0;
    letter-spacing: 0.02em;
}

/* 本文段落＝margin無し・左揃え・フォントは親任せ（r_trivia と同じ作法） */
.aap_container_r_section .aap_labo_setsumei p {
    margin: 0;
    line-break: strict;
    word-break: normal;
    text-align: left;
    overflow-wrap: break-word;
}

/* =========================================================
   aap_labo_r_card  RINAの学習カード（右上ラベル・RINAオレンジ）

   場所 : aap_commons.r_note.css
   役割 : aap_study_knowledge（JURIの例文カード）のRINA版。
          会話がメイン、ここは一段引いたグレーの小箱。
          右上にRINAオレンジのラベルを1点乗せる。
          豆知識(r_trivia・中央見出しのうんちく型)とは別＝
          こちらは一段引いた"おまけ"の温度。色だけJURI版から差し替え
   ========================================================= */

.aap_labo_r_card {
    position: relative;
    margin: 1.8em 0 2em;
    padding: 1.4em 1.4em 1.1em;
    background: rgba( 138, 138, 138, 0.05 );   /* ごく薄いグレー。会話より一段沈める */
    border-radius: 10px;
    border: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-small);            /* 本文より小さく＝おまけの記号 */
    line-height: 1.85;
    color: var(--aap-black);
}

/* 右上ラベル：RINAオレンジの塗り（枠線をまたいで浮く） */
.aap_labo_r_card .aap_labo_r_card_label {
    position: absolute;
    top: 0;
    right: 1.2em;
    transform: translateY(-50%);
    background: var(--aap-orange);
    color: #fff;
    font-family: var(--aap-font-title);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    padding: 0.35em 1em;
    border-radius: 999px;
}

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

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

/* 見出し行（任意・カード内の小見出し）＝立てる */
.aap_labo_r_card b,
.aap_labo_r_card strong {
    font-weight: 700;
    color: var(--aap-black);
}

/* 末尾の注記（※）は線で区切って一段下・グレー */
.aap_labo_r_card .aap_labo_r_card_note {
    color: var(--aap-gray);
    margin-top: 0.9em;
    padding-top: 0.7em;
    border-top: 1px solid var(--aap-rule);
}