@charset "utf-8";
/* ============================================================
   boys.stpr.com リニューアル（B案）追加スタイル
   - style.css の後に読み込む。style.css は一切変更しない
   - 現行のデザイン語彙を踏襲: 角丸ゼロ／影ゼロ／斜めクリップ 17.6vw／
     ボーダーは border-image のグラデ／最大幅 1072px／左右 1.5rem
   - PC を基準に書き、1280px・640px で上書き（style.css と同じ順序）
   ============================================================ */

/* ---------- 共通 ---------- */
.rn_in{
    max-width: 1072px;
    margin: auto;
    padding: 0 1.5rem 0 1.5rem;
    box-sizing: border-box;
    position: relative;
    z-index: 500;
}

/* パネル地（募集要項の箱と同じ）*/
.rn_panel{
    background-image:
        repeating-linear-gradient(#192348, #192348 2px, transparent 0, transparent 4px),
        linear-gradient(90deg, #192348, #3e509a);
}

/* style.css の ul.notice は font-weight:350 だが、Noto Sans JP は 400/500/700 しか
   読み込んでいないため実際は 400 で描かれている。宣言と実描画を一致させる。
   （style.css は触らない方針なので、ここで上書きする。見た目は変わらない）*/
ul.notice{ font-weight: 400; }

/* グラデのボーダー（現行の h3・SNS ボタンと同じ語彙）*/
.rn_border{
    border: 1px solid #fff;
    border-image: linear-gradient(90deg, #88e4ff, #c5c9ff) 1;
}

/******************************************************/
/* KV：True&Lip・すにすて の集合（2026-09-16 修正依頼） */
/* 位置は top/left 基準で書く（.mv_area は position を   */
/* 持たないため bottom 基準だと画面の高さに引っ張られる）*/
/******************************************************/
/* メンバー枠。縦横比は build_site.py がインラインで出す（KV_FRAME_W / KV_FRAME_H）。
   13人の並び・大きさは build_site.py の KV_PLACE。ここでは枠の置き場所と大きさだけ持つ。
   ブレイクポイントは元のサイトと同じ 1280px / 640px だけ。PC の KV は元どおり画面幅に比例して拡大縮小する（大きさはすべて vw）。
   --L … 左端（とリングロゴの右端）。他のセクションの文字の左端
         （.rn_in / .area02 = max-width 1072px + 左右 1.5rem → 50vw − 512px）に合わせる。
         1440px より広い画面では 1440px のときの比率 14.44vw で頭打ち（縦書きがあった頃の名残。2026-09-17 に縦書きは廃止）
         （= 1440px 以上は KV 全体が 1440px の構図のまま拡大される）*/
.mv_area{
    --L: min(calc(50vw - 512px), 14.44vw);
}
/* 上端はロゴ（白い板と影の左下 約27vw）の下。2026-09-17 に縦書きを廃止したので 51vw → 29vw へ上げた。
   立ち絵は全身。下辺は背景 kv_back の斜めの下辺（実測: y = 96.4vw − 0.1848x）で切る
   （2026-09-17 までは下を mask-image で透かしていたが、透けて見えるので廃止）*/
.mv_members{
    --kv-w: 68vw;
    position: absolute;
    left: var(--L);
    top: var(--kv-top, 29vw);
    width: var(--kv-w);
    z-index: 2;
    pointer-events: none;
    /* 斜めの下辺: 枠の左端の y = 96.4 − 0.1848L − top、右端はそこから 0.1848 × 幅 だけ上 */
    /* 左は 2026-09-17 に True&Lip を広げたので -5% → -10% まではみ出せるようにした */
    clip-path: polygon(-10% -5%, 105% -5%,
        105% calc(96.4vw - 0.1848 * var(--L) - var(--kv-top, 29vw) - 0.1848 * var(--kv-w) * 1.05),
        -10% calc(96.4vw - 0.1848 * var(--L) - var(--kv-top, 29vw) + 0.1848 * var(--kv-w) * .10));
}
.mv_members img{
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
}
/* KV のコピー（「STPR BOYS AUDITION -RE:BOOT-」「さぁ、はじめよう」）。デザインチームのロゴが届くまでの仮の文字。
   メンバー枠（.mv_members）の中に absolute で置く。2026-09-17 指示で、文字の大きさに合わせた四角いロゴの形（背景色つき）に。
   メンバーの足先は見えてよい。横はメンバー枠の中央、上端はメンバー枠の高さの 48%（前列のベルトの少し下）*/
.mv_catch{
    position: absolute;
    left: 50%;
    top: 48%;
    translate: -50% 0;
    box-sizing: border-box;
    padding: 3.1vw 5.9vw;   /* 2026-09-17「もっとデカく」「PCも大きく」で PC は文字・余白とも約 2 倍（1.6vw 3vw → 2.2vw 4.2vw → 3.1vw 5.9vw。文字 2.2・1.8 → 3.1・2.5 → 4.3・3.5vw）*/
    white-space: nowrap;
    background: #101731;
    text-align: center;
    color: #fff;
}
.mv_catch span{ display: block; }
.mv_catch .en{
    font-size: 4.3vw;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .03em;
}
.mv_catch .jp{
    font-size: 3.5vw;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .1em;
    margin-top: .2em;
}

/* ロゴは背景 kv_back の上辺（画像のある所と無い所の境目）にまたがせる。
   上辺の実測: y = 18.3vw − 0.182x。左端は --L（他のセクションの左端）
   → ロゴ中央（x = L + 20.25vw）の上辺の y から、ロゴの高さ 15.34vw の半分を引く
     = 18.3vw − 0.182L − 11.36vw */
.mv_title{
    position: absolute;
    left: var(--L);
    /* 板とロゴを skewY で傾けると右上の角が約 3.7vw 上がり、画面の上端で切れるので 3.2vw 下げる（2026-09-16）*/
    top: calc(18.3vw - 0.182 * var(--L) - 8.16vw);
    z-index: 4;
}
.mv_title img{ display: block; width: 40.5vw; transform: skewY(-10deg); }   /* ロゴも板と一緒に右上がり 10°（PC・SP 共通）*/
/* ロゴ下の白い四角（紺の文字が暗い所に沈まないように）。skewY(-10deg) で縦の辺は垂直のまま、右上がりに 10° 傾ける
   （2026-09-14 指定値。PC・SP 共通で、ロゴ画像も同じく傾ける）。
   文字の外の余白は 上＝ロゴの高さの約15%・左右＝ロゴの幅の約7%（下は文字ぎりぎり）*/
.mv_title::before{
    content: "";
    position: absolute;
    inset: -9.5% -2.5% 5% -1.5%;
    z-index: -1;
    background: #fff;
    transform: skewY(-10deg);
    pointer-events: none;
}
/* ロゴ下の影。白い四角と同じ形・同じ傾きを右下へずらして後ろ（z-index -2）に敷く。
   黒だと暗い背景に沈むので、ロゴのアクセントに合わせた青。ずらし量は translate（transform と別指定なので SP の傾き上書きと干渉しない）*/
.mv_title::after{
    content: "";
    position: absolute;
    inset: -9.5% -2.5% 5% -1.5%;
    z-index: -2;
    background: rgb(59 108 255 / 40%);   /* 2026-09-16 指示で v44 の色に戻す（v45〜v53 は rgb(30 77 225 / 20%)）*/
    transform: skewY(-10deg);
    translate: .6vw .6vw;
    pointer-events: none;
}

/* リングロゴは左上 → 右下（背景の下辺より下の暗い部分）へ */
/* 右端は --L にそろえ、上端は背景の斜めの線（リングの左端の位置）から 1vw 下 */
.mv_area .mv_logo,
.mv_area .mv_logo_ring{
    left: auto;
    top: calc(78.92vw + 0.1848 * var(--L) + 3.4vw);
    right: var(--L);
    z-index: 4;
}
.mv_area .mv_logo img,
.mv_area .mv_logo_ring img{ width: 13vw; }
/* 縦書き「今度は、君の番」（.mv_tx）は 2026-09-17 の指示で廃止（HTML から外した）*/

/******************************************************/
/* 開催中のオーディション（KV 直下・斜めクリップなし）  */
/* 2026-09-16 修正依頼でカード2枚 → 1枠に。見出しなし  */
/******************************************************/
.area_open{
    position: relative;
    z-index: +2;
    width: 100%;
    box-sizing: border-box;
    padding: 6vw 0 2vw 0;
}

.area_open .rd_set{
    max-width: 1072px;
    margin: auto;
    padding: 0 1.5rem 0 1.5rem;
    box-sizing: border-box;
    color: #e6e7ea;
    position: relative;
    z-index: 500;
}

/* 地と枠は募集要項の箱と同じ語彙（2px ストライプ＋グラデの枠）*/
.rd_one{
    max-width: 720px;
    margin: auto;
    box-sizing: border-box;
    padding: 2.5rem 1.5rem 2.25rem 1.5rem;
    text-align: center;
    background-image:
        repeating-linear-gradient(#192348, #192348 2px, transparent 0, transparent 4px),
        linear-gradient(90deg, #192348, #3e509a);
    border: 1px solid #fff;
    border-image: linear-gradient(90deg, #88e4ff, #c5c9ff) 1;
}

.rd_name{
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
}

.rd_limit{
    font-size: 100%;
    line-height: 1.8;
    letter-spacing: .05em;
    margin-top: .25rem;
}

/* style.css の .entry_btn は ≤1280 で上下 5rem/4rem の余白を持つので、枠の中では詰める。
   見本はボタンが枠の幅の4割ほどなので、ほかの ENTRY（最大 310px）より小さくする */
.rd_one .entry_btn{ margin: 1.5rem 0 0 0; }
/* 上限は画面幅で持つ。% にすると、2026-09-24 に a を inline-block にしてから「a の幅（240px）の 70%」になり、
   画像が 168px に縮んで 240px の a の左に寄っていた */
.rd_one .entry_btn img{ width: 240px; max-width: 60vw; }

/* KV 直下に「開催中のオーディション」が入ったぶん、紹介文の頭を離す。
   現行は KV のすぐ下が紹介文だったため上マージンを持っていない */
.area02{ margin-top: 10vw; }

/******************************************************/
/* 紹介文の下の動画エリア（2026-09-16 修正依頼）        */
/* URL 未受領のあいだは 16:9 の仮の枠。届いたら iframe  */
/******************************************************/
.rn_video{
    position: relative;
    z-index: 500;
    max-width: 720px;
    margin: 90px auto 0 auto;
}

.rn_video_in{
    position: relative;
    aspect-ratio: 16 / 9;
    background-image:
        repeating-linear-gradient(#192348, #192348 2px, transparent 0, transparent 4px),
        linear-gradient(90deg, #192348, #3e509a);
    border: 1px solid #fff;
    border-image: linear-gradient(90deg, #88e4ff, #c5c9ff) 1;
}

.rn_video_in iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.rn_video_ph{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #8dc9e8;
    font-size: 90%;
    letter-spacing: .15em;
}

/* 再生マーク（角丸ゼロの語彙に合わせて三角だけ）*/
.rn_video_ph .play{
    width: 56px;
    height: 64px;
    background-image: linear-gradient(90deg, #d460fb, #00b5ff, #c9f6ff);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/******************************************************/
/* 目指せる未来 / 4つの強み（2026-09-16 修正依頼）      */
/* 旧「アイドル枠」「ストリーマー枠」の位置に置き換え    */
/******************************************************/
.area_waku{
    position: relative;
    z-index: +2;
    width: 100%;
    margin: -17.6vw auto 0 auto;
    box-sizing: border-box;
    clip-path: polygon(0 17.6vw, 100% 0, 100% calc(100% - 17.6vw), 0 100%);
}

/* 明→暗→明→暗… の交互を崩さない
   area03(明) → future(暗) → strength(明) → area04(暗) → area05(明) → area06(暗) */
/* 目指せる未来はセクション自体の背景色を持たない（2026-09-17 指示で #101731 を削除）。下のページ背景（紺地＋三角の模様）がそのまま見える */
/* 4つの強みは 募集要項（area03）・メンバー（area05）と同じドット地（2026-09-17 指示。それまではベタ白）*/
.area_strength{
    background: url("/static/assets/Recruitment_dot_pattern.webp") no-repeat left top;
    background-size: cover;
}

.area_waku .wk_set{
    max-width: 1072px;
    margin: auto;
    padding: 0 1.5rem 0 1.5rem;
    box-sizing: border-box;
    position: relative;
    z-index: 500;
}

.area_future .wk_set{ color: #e6e7ea; }
.area_strength .wk_set{ color: #0c1023; }

/* 見出し（テキスト）。見本は 和文ボールド＋グラデの線 だけ */
.wk_hd{
    position: relative;
    display: inline-block;
    line-height: 1;
}

.wk_hd .jp{
    position: relative;
    display: block;
    font-size: 3.125rem;
    font-weight: 700;
    line-height: 1.12;
}

.wk_hd .bar{
    display: block;
    height: 2px;
    margin-top: 14px;
    background-image: linear-gradient(90deg, #d460fb, #00b5ff, #c9f6ff);
}

/* 箱は募集要項の箱（.ol_box div）と同じ語彙。文字は見本どおり中央揃え */
.ft_list,
.st_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.ft_list li,
.st_list li{
    list-style: none;
    box-sizing: border-box;
    text-align: center;
    color: #e6e7ea;
    background-image:
        repeating-linear-gradient(#192348, #192348 2px, transparent 0, transparent 4px),
        linear-gradient(90deg, #192348, #3e509a);
    border: 1px solid #fff;
    border-image: linear-gradient(90deg, #88e4ff, #c5c9ff) 1;
}

/* 目指せる未来: 5項目。PC 3列（2段目の2つは中央）／ ≤1280 2列 ／ スマホ 1列 */
.ft_list li{
    flex: 0 0 calc((100% - 40px) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7.5rem;
    padding: 1.75rem 1.25rem;
    font-size: 100%;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .05em;
    flex-direction: column;
}
/* 中身（.ft_in）は 2026-09-24 調整希望案のブロック（ファイル末尾）で、添え書き＋大きな役割名を白い枠で囲む */

/* 4つの強み: 見出し＋本文。PC 2×2 ／ スマホ 1列 */
.st_list li{
    flex: 0 0 calc((100% - 20px) / 2);
    padding: 2rem 1.75rem;
}

.st_list h3{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
}

/* 行末に「す。」だけが残るような折り返しを避ける（Chrome は文節で折り返す。未対応のブラウザは通常の折り返し）*/
.st_list h3,
.st_list p{
    word-break: auto-phrase;
    text-wrap: pretty;
}

.st_list p{
    margin-top: .75rem;
    font-size: 90%;
    line-height: 1.9;
    letter-spacing: .03em;
}

/* 応募ボタンは現行と同じ画像ボタン（.entry_btn）。コースごとには置かず、募集要項の下に1つ（2026-09-15）*/
.area03 .entry_btn{ margin-top: 50px; }

/******************************************************/
/* メンバー（スライダー → カード）                      */
/******************************************************/
.area05 .member_set{
    max-width: 1072px;
    margin: auto;
    padding: 0 1.5rem 0 1.5rem;
    box-sizing: border-box;
    color: #0c1023;
    position: relative;
    z-index: 500;
}

.mb_grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 22px;
    margin-top: 50px;
}

.mb_card{ cursor: pointer; }

.mb_img{ overflow: hidden; border-radius: 8px; }   /* 2026-09-14 指示で角丸（デザイン語彙「角丸ゼロ」の例外）*/

.mb_img img{
    width: 100%;
    display: block;
    transition: transform .7s;
}

.mb_card:hover .mb_img img{ transform: scale(1.06); }

.mb_name{
    font-size: 100%;
    font-weight: 700;
    line-height: 160%;
    margin-top: .75rem;
}

.mb_en{
    font-family: "Teko", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
    letter-spacing: .08em;
    color: #4292ff;
    font-weight: 300;
}

/******************************************************/
@media screen and (max-width: 1280px) {

    /* KV：メンバーは画面幅いっぱい（左右 3vw あけ）で、見本どおりロゴのすぐ下（ロゴの白い板と影の左下 約36vw）。
       2026-09-17 までは縦書き「今度は、君の番」に顔が重ならないよう 77vw から並べていたが、縦書きの廃止で 38vw へ上げた。
       立ち絵は全身。下辺は背景 kv_back_sp の斜めの下辺（y = 151.38vw − 0.1778x）で切る。
       枠の中の y に直すと 151.38 − 0.1778 × (3 + x) − 38。左に 10%・右に 5% 広げた位置（x = −9.4vw / 98.7vw）で 114.5vw / 95.3vw
       （今の並びでは足元がこの線より上に収まるので、実際には切れない）*/
    .mv_members{ --kv-w: 94vw; left: 3vw; top: 38vw; clip-path: polygon(-10% -5%, 105% -5%, 105% 95.3vw, -10% 114.5vw); }
    /* KV のコピー: 文字だけ SP の大きさにする（位置はメンバー枠に対する % なので PC と共通）*/
    .mv_catch{ padding: 4.9vw 8.4vw; }   /* 約 1.4 倍（旧 3.5vw 6vw / 文字 4.8vw・4.2vw）*/
    .mv_catch .en{ font-size: 6.7vw; }
    .mv_catch .jp{ font-size: 5.9vw; }
    /* ロゴは幅 50vw、左端はメンバーと同じ 6vw。SP はロゴと白い四角を skewY(-10deg) で右上がりに傾ける（2026-09-14 指定値） */
    .mv_title{ left: 6vw; top: 9vw; }
    .mv_title::after{ translate: 1.5vw 1.5vw; }
    .mv_title img{ width: 50vw; padding: 6px 0; }
    .mv_area .mv_logo,
    .mv_area .mv_logo_ring{ top: 137vw; right: 4.8vw; }   /* 背景の下辺（リングの位置で 134.5〜137vw）より下の余白に置く */
    .mv_area .mv_logo img,
    .mv_area .mv_logo_ring img{ width: 14.8vw; }
    .area_open{ padding: 8vw 0 2vw 0; }
    .rd_name{ font-size: 1.5rem; }

    .area02{ margin-top: 8vw; }   /* この幅から .kv_title 側にも 5vw が乗る */
    /* 元はここに応募ボタン（画像 130px ＋ 上下 9rem）があり、次の .area03 の斜めの切り口との間を空けていた。
       ボタンを枠セクションへ移したら最後の1文（熱い想いを〜）が .area03 の下に隠れた（実測の重なり 390px:94 / 800px:65 / 1280px:90）ので、そのぶん空ける */
    .area02{ padding-bottom: 130px; }

    .rn_video{ margin-top: 60px; }

    .wk_hd .jp{ font-size: 2.625rem; }
    .ft_list, .st_list{ gap: 16px; margin-top: 40px; }
    .ft_list li{ flex-basis: calc((100% - 16px) / 2); min-height: 6.5rem; padding: 1.5rem 1.25rem; }
    .st_list li{ flex-basis: calc((100% - 16px) / 2); padding: 1.75rem 1.5rem; }

    .mb_grid{ grid-template-columns: repeat(3, 1fr); }
}

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

    .area_open{ padding: 12vw 0 4vw 0; }
    .rd_one{ padding: 2rem 1.25rem 1.75rem 1.25rem; }
    .rd_one .entry_btn img{ width: 200px; }
    .rd_name{ font-size: 1.25rem; }
    .rd_limit{ font-size: 90%; }

    .area02{ margin-top: 12vw; }
    /* style.css はこの幅で .area02 に overflow:hidden ＋ margin-bottom:-65px。中の光（mv_spot）が .area02 の下端で水平に切れ、
       次の .area03 の斜めの切り口（左端で 17.6vw 下がる）との間に「光の切れ目＋素の背景色」の帯が出ていた（527px 幅で約 28px）。
       食い込みを斜めの左端と同じ 17.6vw にして切れ目を .area03 の下へ隠す。.area03 の位置は変えないよう padding で差し引き
       （旧: 130px − 65px ＝ +65px → 新: (65px + 17.6vw) − 17.6vw ＝ +65px）*/
    /* 2026-09-17: 動画 → 募集要項の上辺を 72px（--sec-gap）空けるため 65px → 72px */
    .area02{ margin-bottom: -17.6vw; padding-bottom: calc(72px + 17.6vw); }

    .rn_video{ margin-top: 40px; }
    .rn_video_ph .play{ width: 42px; height: 48px; }

    /* 「STPR BOYS PROJECT 4つの強み」が 390px 幅で1行に収まる大きさ */
    .wk_hd .jp{ font-size: 1.375rem; }
    .wk_hd .bar{ margin-top: 10px; }

    /* スマホは 1 列 */
    .ft_list, .st_list{ gap: 14px; margin-top: 30px; }
    /* 「ジャンルを凌駕する「マルチクリエイター」」「STPRだから実現できる圧倒的な大舞台」が 390px 幅で1行に収まる大きさ */
    .ft_list li{ flex-basis: 100%; min-height: 5.5rem; padding: 1.25rem .75rem; letter-spacing: .02em; }
    .st_list li{ flex-basis: 100%; padding: 1.25rem .75rem; }
    .st_list h3{ font-size: 1rem; letter-spacing: .02em; }
    .st_list p{ margin-top: .5rem; font-size: 80%; line-height: 1.8; }


    .mb_grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .mb_name{ font-size: 90%; }
    .mb_en{ font-size: .75rem; }
}

/******************************************************/
/* セクションの始まりと終わりの余白（2026-09-17）        */
/* 「窮屈に見えないように十分に余白を」の指示で、斜めの境目から最初・最後の要素までを
   --sec-gap（390〜900px は 72px、それより広い画面は 8vw、上限 128px）以上にそろえる。
   調整前の実測（斜めの境目から最短距離）: 390px 幅で上 22〜53px・下 0〜33px（選考フローの下は 0px）、
   800px 幅で上 40px・下 8〜41px、1440px 幅で上 64〜70px・下 27〜58px。
   斜めの深さは その位置で 17.6vw ×（1 − 文字の左端 / 画面幅）。文字の左端は max(1.5rem, 50vw − 512px) なので、
   深さ ≒ min(17.6vw, 8.8vw + 90px)。上下の padding を「深さ + --sec-gap」にする。
   style.css の各ブレイクポイントの padding より後に読むので、ここ1か所で全幅に効く（FAQ だけ style.css が !important）*/
/******************************************************/
:root{ --sec-gap: clamp(72px, 8vw, 128px); --sec-slant: min(17.6vw, calc(8.8vw + 90px)); }

.area03,
.area_waku,
.area04,
.area05{
    padding-top: calc(var(--sec-slant) + var(--sec-gap));
    padding-bottom: calc(var(--sec-slant) + var(--sec-gap));
}
/* 募集要項の背景の大きなロゴ（.logo_mark。style.css で section の上端から top 133px / ≤1280 140px / ≤640 30px）は、
   上の余白を増やしたぶん同じだけ下げて、見出しとの位置関係を元のままにする（旧 padding-top: 19.6vw / 22vw / 27vw）*/
.area03 .logo_mark{ top: calc(133px + var(--sec-slant) + var(--sec-gap) - 19.6vw); }
@media screen and (max-width: 1280px) {
    .area03 .logo_mark{ top: calc(140px + var(--sec-slant) + var(--sec-gap) - 22vw); }
}
@media screen and (max-width: 640px) {
    .area03 .logo_mark{ top: calc(30px + var(--sec-slant) + var(--sec-gap) - 27vw); }
}
/* FAQ は下が斜めでない（次はフッター）。下は ENTRY ボタンの下の余白との合計で --sec-gap にする */
.area06{
    padding-top: calc(var(--sec-slant) + var(--sec-gap)) !important;
    padding-bottom: var(--sec-gap) !important;
}

/* KV のリングロゴ → KV の下のコピー。調整前は 390px 幅で 23px・800px で 39px・1440px で 94px */
.area_open{ padding-top: calc(6vw + 1.5vw); }

/* 紹介文の動画 → 募集要項の斜めの上辺。PC は動画の右端（50vw + 360px）での斜めの深さが 8.8vw − 63px しかない
   （調整前 1440px 幅で 63px）ので、足りないぶんを下の余白で足す */
@media screen and (min-width: 1281px) {
    .area02{ padding-bottom: max(0px, calc(var(--sec-gap) - 8.8vw + 63px)); }
}

@media screen and (max-width: 1280px) {
    .area_open{ padding-top: calc(8vw + 40px); }
    /* style.css の .entry_btn は ≤1280 で下に 4rem の余白を持つので、そのぶん引く */
    .area06{ padding-bottom: max(8px, calc(var(--sec-gap) - 4rem)) !important; }
}

@media screen and (max-width: 640px) {
    .area_open{ padding-top: calc(12vw + 52px); }
}


/******************************************************/
/* 2026-09-24 調整希望案（../assets/BOYSオーディションサイト調整希望案.pdf） */
/* 「濃紺で暗い → 明るい印象に。星・光のモチーフ」       */
/******************************************************/

/* ---- ページ全体の背景 ----
   単色の #101731 をやめ、先方支給の STPR BOYS Festival《Stars Light》告知画像の背景（make_bg_assets.py で PSD から
   文字を除いて合成）を敷く。紺 → 青い光 → 白い光。三角の格子（back_triangle.svg）は元どおり上に重ねる。
   iPhone の Safari は background-attachment: fixed を解さないので、position: fixed の疑似要素に載せる */
/* html に #101731 があるので body の背景は html 側に持たせ、body 自体は透明にする
   （body に色があると、body の箱の背景が z-index: -1 の疑似要素より上に塗られて画像が隠れる）*/
html{ background: #1f2a7a; }
body{ background: transparent; }
body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        url("/static/assets/back_triangle.svg") no-repeat center top / cover,
        linear-gradient(to bottom, rgb(255 255 255 / 0%) 45%, rgb(96 140 255 / 28%) 100%),
        url("/static/assets/bg_stars_pc.webp") no-repeat center center / cover;
}
@media screen and (max-aspect-ratio: 1/1) {
    body::before{
        background:
            url("/static/assets/back_triangle.svg") no-repeat center top / cover,
            linear-gradient(to bottom, rgb(255 255 255 / 0%) 45%, rgb(96 140 255 / 28%) 100%),
            url("/static/assets/bg_stars_sp.webp") no-repeat center center / cover;
    }
}
/* FAQ は元の単色（#101731）をやめてページの背景を見せる */
.area06{ background: transparent; }

/* 選考フローの背景: 暗い部分を明るく、明るい部分の彩度を上げた版（make_bg_assets.py） */
.area04{ background-image: url("/static/assets/Selection_back_bright.jpg"); }
@media screen and (max-width: 1280px) {
    .area04{ background-image: url("/static/assets/Selection_back_sp_bright.jpg"); }
}

/* ---- △▽（背景を流れるモチーフ）: 降る → 上ってくる ----
   JS（function.js）は --top に 0〜100vh の乱数を入れて最初の数個を画面に散らす。上りでは逆向きにずらす */
.c-ani-particles__item{
    animation-name: rn_particles_up;
    transform: translateY(calc(var(--top) * -1));
}
@keyframes rn_particles_up {
    0%   { top: calc(100vh + 100px); opacity: 0; }
    1%   { opacity: 1; }
    99%  { opacity: 1; }
    100% { top: -100px; opacity: 0; }
}

/* ---- マーカー（強調）----
   紺地の白文字の下に、サイトのバーと同じ 紫 → 水色 を半透明で。文字の下 45% に引く。
   行をまたいでも各行に同じ線が出るよう box-decoration-break: clone */
.rn_mk{
    background-image: linear-gradient(90deg, rgb(212 96 251 / 62%), rgb(0 181 255 / 62%));
    background-repeat: no-repeat;
    background-size: 100% 45%;
    background-position: 0 95%;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
/* 文節（build_site.py の ph()）。文節の途中では改行しない */
.ph{ display: inline-block; }

/* 紹介文は △（.c-ani-particles の z-index 1）より手前に出す。背景が明るくなったので白い文字に薄い影 */
.area02{ z-index: 2; }
.area02 .txt_wrap{ text-shadow: 0 0 10px rgb(20 26 90 / 55%); }
/* 紹介文のキャッチ2か所: 太字＋マーカー。水色だった締めの2行も白にして他の文より目立たせる */
.area02 .rn_catch{ font-weight: 700; color: #fff; }
/* 動画の上の余白（下のブロックとの距離が近い、の指示）。
   紹介文は skewY(-10deg) で左端が下に垂れる（画面幅の約 8%）ので、狭い画面は vw で足す。
   実測の見た目の間隔（最後の行の一番低い所 → 動画の上端）: 1440px 132px ／ 800px 約 100px ／ 390px 約 90px */
.rn_video{ margin-top: 170px; }

/* ---- ENTRY ボタン: 彩度を上げ、周りに幾何学模様とキラ（make_deco_svgs.py の deco_entry.svg）----
   飾りの SVG はボタン画像（474x198）より 上下 56・左右 70 広いので、その比率で外へ広げる */
.entry_btn a{ position: relative; display: inline-block; vertical-align: top; }
/* 飾りはボタンの左右に 14.8% ずつ出るので、狭い画面では飾りごと画面に収まる幅にする（360px 幅で横にはみ出していた）*/
.entry_btn img{ display: block; filter: saturate(1.35); max-width: min(310px, calc((100vw - 24px) / 1.3)); }
.entry_btn a::before{
    content: "";
    position: absolute;
    inset: -28.283% -14.768%;
    background: url("/static/assets/deco_entry.svg") center / 100% 100% no-repeat;
    pointer-events: none;
}
/* 明るいドット地（募集要項）では白いキラが消えるので色つきの版 */
.area03 .entry_btn a::before{ background-image: url("/static/assets/deco_entry_l.svg"); }

/* ---- 箱（開催中・募集要項・目指せる未来・4つの強み）: ENTRY ボタンに合わせた影とキラ ----
   影は右下にずらした 紫 → 水色 の板（z-index: -1 で箱の後ろ）。キラは右上と左下の角に掛ける */
.rd_one,
.area03 .ol_box > div,
.ft_list li,
.st_list li{
    position: relative;
    --rn-shadow: 10px;
}
.rd_one::after,
.area03 .ol_box > div::after,
.ft_list li::after,
.st_list li::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    translate: var(--rn-shadow) var(--rn-shadow);
    background: linear-gradient(90deg, #b36bff, #5fd8ff);
    pointer-events: none;
}
/* 右上の大きなキラは、中心が箱の角にちょうど重なると、影の水色と合わさって角が丸く見えた（2026-09-24 指摘）。
   飾りの箱を 34px 外へ広げて右上のキラを角の外（右上へ約 13px）へ出す。左下は 12px 内側に置いて元の位置のまま */
.rd_one::before,
.area03 .ol_box > div::before,
.ft_list li::before,
.st_list li::before{
    content: "";
    position: absolute;
    inset: -34px;
    z-index: 1;
    background:
        url("/static/assets/deco_card_tr.svg") right top / 56px no-repeat,
        url("/static/assets/deco_card_bl.svg") left 12px bottom 12px / 44px no-repeat;
    pointer-events: none;
}
.area03 .ol_box > div::before,
.st_list li::before{
    background-image: url("/static/assets/deco_card_tr_l.svg"), url("/static/assets/deco_card_bl_l.svg");
}

/* ---- 見出しの強調（添付の「LOREM IPSUM」の扱い: 太い白文字を白い枠で囲む）---- */
/* 募集要項の「応募条件」「歓迎条件」。style.css の グラデの細い枠（border-image !important）を白い枠に替える */
.area03 .ol_box h3{
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    padding: .4em 1.2em .45em;
    margin-bottom: 20px;
    border: 2px solid #fff !important;
    border-image: none !important;
}
/* 4つの強みの見出し */
.st_list h3{
    display: inline-block;
    padding: .4em 1em .45em;
    border: 2px solid #fff;
    font-size: 1.3rem;
    letter-spacing: .06em;
}
/* 詳細文は左寄せ（2026-09-24 指示。見出しは中央のまま）。改行は build_site.py 側で 文ごと＋文節の区切り（<wbr>）。
   keep-all で <wbr> の位置でだけ折り返す（word-break: auto-phrase は Chrome 119〜のみで Safari は正式版未対応のため使わない）。
   text-wrap: pretty は最後の行が極端に短くなるのを避ける（Chrome 117〜・Safari 26〜。未対応のブラウザは無視）*/
.st_list p{
    margin-top: 1.1rem;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
/* 目指せる未来: 箱そのものを白い 2px の枠にする（2026-09-24。箱の細い枠の中にさらに白い枠があり「枠の中に枠」になっていたため）。
   中身は 添え書き（小・水色）→ 役割名（大きな太字）→ 短いグラデの線 */
.ft_list li{
    border: 2px solid #fff;
    border-image: none;
}
.ft_in{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ft_ttl::after{
    content: "";
    display: block;
    width: 2.6em;
    height: 2px;
    margin: .55em auto 0;
    background-image: linear-gradient(90deg, #d460fb, #00b5ff, #c9f6ff);
}
/* PC の3列で「「アイドル・アーティスト」」が1行に収まるよう、箱の左右の余白を詰める */
.ft_list li{ padding-left: 1rem; padding-right: 1rem; }
.ft_sub{
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .14em;
    color: #8dc9e8;
}
.ft_ttl{
    margin-top: .15em;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---- FAQ: 回答の文字色を質問と同じにしてマーカー ---- */
.area06 .a{ color: inherit; }

@media screen and (max-width: 1280px) {
    .rn_video{ margin-top: calc(100px + 8vw); }
    /* 1280px 以下は箱の外の余白が 24px（左右 1.5rem）しかないので、飾りの箱も 24px までにする
       （34px のままだと 800px 幅で 9px 横にはみ出した。2026-09-24 実測）。キラを小さくして右上のキラは角の外へ約 8px */
    .rd_one::before,
    .area03 .ol_box > div::before,
    .ft_list li::before,
    .st_list li::before{
        inset: -24px;
        background-size: 44px, 34px;
        background-position: right top, left 8px bottom 8px;
    }
}

@media screen and (max-width: 640px) {
    .rn_video{ margin-top: calc(85px + 8vw); }
    .rd_one,
    .area03 .ol_box > div,
    .ft_list li,
    .st_list li{ --rn-shadow: 7px; }

    .area03 .ol_box h3{ font-size: 1.2rem; }
    .st_list h3{ font-size: 1rem; padding: .35em .7em .4em; letter-spacing: .02em; }
    .ft_sub{ font-size: .75rem; }
    .ft_ttl{ font-size: 1.1rem; }
    /* 紹介文: 字間を詰めて、文節の途中で折り返さない幅にする（元 .25em）*/
    .area02 .aera02_txt01,
    .area02 .aera02_txt02{ letter-spacing: .14em; }
}


/******************************************************/
/* 2026-09-24（v18）                                   */
/******************************************************/
/* FAQ の回答のリンク（プライバシーポリシー）。reset.css の a{color:#737dff}（青紫）がマーカーの紫〜青と重なって
   読めなかったので、白の太字＋下線にする。長い URL がスマホで枠からはみ出さないよう、どこでも折り返せるようにする */
.area06 .a a{
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
}

/* 紹介文の右の列の1つ目の文。決め打ちの改行はせず（v24）、幅に応じて文節（<wbr>）でだけ折り返す（keep-all は Safari 9〜対応）。
   text-wrap: pretty は最後の行が1文節だけ残るのを避ける（Chrome 117〜・Safari 26〜。未対応のブラウザは無視）。
   <br class="rn_br_sp"> はスマホ（〜640px）だけ改行する（今は使っていない）*/
.area02 .rn_kp{
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.area02 .rn_kp .nw{ white-space: nowrap; }   /* 「プロデュース＆」（＆の前で折り返さない）*/
br.rn_br_sp{ display: none; }
@media screen and (max-width: 640px) {
    br.rn_br_sp{ display: inline; }
}


/******************************************************/
/* 目指せる未来: アイコン付きの「5つの進路」（2026-09-24・v19）
   箱（縞の地＋白い枠＋太字＋下線）だと「見出しだけで本文が表示されていない」ように見えると指摘があり作り直した。
   箱をやめ、丸いアイコン＋添え書き（小）＋役割名（太字）の一覧にする。
   PC（1281px〜）: 5列に横一列 ／ タブレット: 3＋2（アイコンが上）／ スマホ（〜640px）: アイコンが左のリスト
   ※ 丸いアイコンの枠と光は、このブロックだけの例外（元のサイトは角丸ゼロ・影ゼロ） */
/******************************************************/
.ft_list{
    gap: 28px 8px;
    margin-top: 56px;
}
.ft_list li{
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: none;
    border: 0;
    border-image: none;
}
/* 他の箱と共通の 影（::after）・キラ（::before）は付けない */
.ft_list li::before,
.ft_list li::after{ content: none; }

/* 丸いアイコン: 紺の地にサイトの 紫 → 水色 の枠（border-box のグラデで2重の背景）、白い線画 */
.ft_ic{
    display: grid;
    place-items: center;
    width: 108px;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgb(255 255 255 / 22%), transparent 58%) padding-box,
        linear-gradient(150deg, #243283, #16205a) padding-box,
        linear-gradient(135deg, #d460fb, #00b5ff 60%, #c9f6ff) border-box;
    box-shadow: 0 0 28px rgb(0 181 255 / 38%);
    color: #fff;
}
.ft_ic svg{ width: 48%; height: auto; display: block; }

.ft_in{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0;
    padding: 0;
    margin-top: 18px;
}
/* 背景の明るい光の上でも読めるよう、添え書きは明るい水色＋紺のにじみ */
.ft_sub{
    font-size: .875rem;
    letter-spacing: .12em;
    color: #c4ecff;
    text-shadow: 0 0 8px rgb(20 26 90 / 80%), 0 0 2px rgb(20 26 90 / 70%);
}
/* PC の5列は1列 約198px。役割名（最長「「トップストリーマー」」など 11 字）が入る 1.05rem にする */
.ft_ttl{
    margin-top: .3em;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .02em;
    word-break: keep-all;
    text-shadow: 0 0 10px rgb(20 26 90 / 80%), 0 0 2px rgb(20 26 90 / 70%);
}
.ft_ttl::after{ content: none; }
.ft_ttl .nw{ white-space: nowrap; }

@media screen and (max-width: 1280px) {
    .ft_list{ gap: 36px 12px; }
    .ft_list li{ flex: 0 0 calc((100% - 24px) / 3); padding: 0; min-height: 0; }
}

@media screen and (max-width: 640px) {
    /* スマホ: アイコンが左・文字が右のリスト。項目の間に細い線 */
    .ft_list{ gap: 0; margin-top: 28px; }
    .ft_list li{
        flex: 0 0 100%;
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 16px 4px;
        text-align: left;
        border-bottom: 1px solid rgb(136 228 255 / 35%);
    }
    .ft_list li:first-child{ border-top: 1px solid rgb(136 228 255 / 35%); }
    .ft_ic{ width: 64px; flex: 0 0 64px; border-width: 2px; box-shadow: 0 0 16px rgb(0 181 255 / 35%); }
    .ft_in{ align-items: flex-start; margin-top: 0; }
    .ft_sub{ font-size: .8125rem; }
    .ft_ttl{ font-size: 1.02rem; margin-top: .15em; }
}


/******************************************************/
/* 余白を広げる（2026-09-24・v20「ラグジュアリーに見せたいので狭い所は直して」）
   実測で狭かった所を、PC / スマホ で次の目安にそろえる:
     見出し → 中身 64〜72px / 40px〜 ・ 箱の内側 40px前後 / 24〜36px ・ 箱どうし 32px / 24px
   変更前の実測（PC 1440 / SP 390）: 目指せる未来 見出し→一覧 56/28・SP の1項目の上下 16 ／ 4つの強み 箱の内側 32x28 / 20x12・箱どうし 20 ／
   FAQ 見出し→箱 30・箱の内側 20・箱どうし 22 ／ 開催中 名前→締切 4 ／ 募集要項 箱の内側 32x24 ／ メンバー カードの間 32x22 / 24x16
   選考フローの白いカードの中（元のサイトの作り）は変えていない */
/******************************************************/
/* 開催中の枠 */
.rd_one{ padding: 52px 40px 48px; }
.rd_limit{ margin-top: .6rem; }
.rd_one .entry_btn{ margin-top: 2rem; }

/* 募集要項 */
.area03 .ol_box{ margin: 64px 0 56px; }
.area03 .ol_box > div{ padding: 40px 40px 44px; }
.area03 .ol_box h3{ margin-bottom: 26px; }

/* 目指せる未来。PC・タブレット（641px〜）は丸いアイコンを大きく（2026-09-24 指示。108 / 96 → 140px。
   1列の幅は PC 約198px・タブレット 約190px〜）。スマホはアイコンが左のリストなので 64px のまま */
.ft_list{ margin-top: 72px; row-gap: 56px; }
@media screen and (min-width: 641px) {
    .ft_ic{ width: 140px; border-width: 3.5px; box-shadow: 0 0 34px rgb(0 181 255 / 40%); }
    .ft_in{ margin-top: 24px; }
}

/* 4つの強み */
.st_list{ margin-top: 64px; gap: 32px; }
/* 2列の幅は間隔（gap）ぶんを引いて出す（間隔だけ変えると2列に収まらず1列に落ちる）*/
.st_list li{ flex-basis: calc((100% - 32px) / 2); padding: 44px 40px 48px; }
.st_list p{ margin-top: 1.5rem; }

/* 選考フロー: 見出し → カード */
.area04 .flow_box{ margin-top: 64px; }

/* メンバー */
.area05 .mb_grid{ margin-top: 64px; gap: 48px 32px; }

/* FAQ */
.area06 .faq_box{ margin: 56px 0 56px; }
.area06 .f_box_in{ padding: 28px 32px 30px; margin-bottom: 28px; }
.area06 .a{ margin-top: 16px; }

@media screen and (max-width: 1280px) {
    .rd_one{ padding: 44px 32px 40px; }
    .area03 .ol_box > div{ padding: 36px 32px 40px; }
    .ft_list{ margin-top: 56px; row-gap: 52px; }
    .st_list{ margin-top: 56px; gap: 28px; }
    .st_list li{ flex-basis: calc((100% - 28px) / 2); padding: 40px 32px 44px; }
    .area05 .mb_grid{ gap: 40px 24px; }
}

@media screen and (max-width: 640px) {
    /* スマホの 見出し → 中身 は 52px にそろえる（元の 50px より狭くしない）*/
    .rd_one{ padding: 40px 24px 36px; }
    .area03 .ol_box{ margin: 52px 0 48px; }
    .area03 .ol_box > div{ padding: 32px 24px 36px; }
    .area03 .ol_box .ol_left{ margin-bottom: 36px; }
    .ft_list{ margin-top: 52px; row-gap: 0; }
    .ft_list li{ padding: 26px 6px; gap: 22px; }
    .st_list{ margin-top: 52px; gap: 32px; }
    .st_list li{ flex-basis: 100%; padding: 36px 24px 40px; }
    .st_list p{ margin-top: 1.25rem; }
    .area04 .flow_box{ margin-top: 52px; }
    .area05 .mb_grid{ margin-top: 52px; gap: 36px 18px; }
    .area06 .faq_box{ margin: 52px 0 48px; }
    .area06 .f_box_in{ padding: 24px 22px 26px; margin-bottom: 24px; }
}


/* ENTRY ボタンの上の隙間（2026-09-24・v21「エントリーボタンの上にしっかり隙間を」）。
   ボタンの周りの飾り（deco_entry.svg）は画像の高さの 28.3% ぶん上に出る（PC 310px 幅で約37px）。
   ボタン画像ではなく「飾りの上端」から直前の文まで、PC 約72px / スマホ 約48px 空ける
   （変更前は飾りの上端から 3〜19px しかなかった）。開催中の枠の中は 28px / 24px */
.area03 .entry_btn,
.area04 .entry_btn,
.area06 .entry_btn{ margin-top: 110px; }
.rd_one .entry_btn{ margin-top: 56px; }
@media screen and (max-width: 640px) {
    .area03 .entry_btn,
    .area04 .entry_btn,
    .area06 .entry_btn{ margin-top: 84px; }
    .rd_one .entry_btn{ margin-top: 48px; }
}



/* ENTRY ボタンの下の隙間（2026-09-24・v23「下もちゃんと隙間を」）。
   ボタンの周りの飾り（deco_entry.svg）は画像の下にも高さの 28.3% 出る（= 画像の幅の 11.81%。PC 310px で約37px）。
   飾りの下端を中身の終わりとみなして余白を取る。変更前の実測（飾りの下端から）:
   開催中の枠の下辺まで PC 21px・1280px 以下 13px／FAQ → フッター PC 79px・1280px 以下 35〜66px。
   募集要項・選考フローの下（斜めの境目まで 105px 以上）は変えない */
/* FAQ: 飾りの下端 → フッターを --sec-gap（他のセクションの終わりと同じ）に。
   1280px 以下で style.css の .entry_btn が持つ下 4rem は使わず、padding を --sec-gap に戻す */
.area06 .entry_btn{ margin-bottom: calc(min(310px, (100vw - 24px) / 1.3) * .1181); }
@media screen and (max-width: 1280px) {
    .area06{ padding-bottom: var(--sec-gap) !important; }
}
/* 開催中の枠: 飾りの下端 → 枠の下辺を、枠の上の余白（52 / 44 / 40px）と同じにする。
   枠の中の ENTRY は 240px（スマホ 200px）なので飾りの出は 28px / 24px */
.rd_one{ padding-bottom: 52px; }
.rd_one .entry_btn{ margin-bottom: 28px; }
@media screen and (max-width: 1280px) {
    .rd_one{ padding-bottom: 44px; }
}
@media screen and (max-width: 640px) {
    .rd_one{ padding-bottom: 40px; }
    .rd_one .entry_btn{ margin-bottom: 24px; }
}


/* 紹介文「活動が大好きな君が、〜」を PC（1281px〜）だけ2行に（2026-09-24・v25 指示）:
     活動が大好きな君が、より一層活躍できるよう、これまでSTPRが培ってきた／様々なノウハウをもって全力でプロデュース＆サポートいたします。
   右の列（.aera02_txt02）は style.css で幅 60%（左の列 50% と合わせて 110% を flex が縮めて 556px、文字の幅は 524px）。
   2行は 647px / 570px あって収まらないので、文字の大きさ・字間はそのままで 右の列の外（右）へはみ出させる（指示で決定。1440px 幅で右端 1340px）。
   nowrap のままだと右の列が縮められなくなって左の列を押す（左の本文の折り返しが変わる）ので、右の列に min-width: 0。
   この nowrap は上の text-wrap: pretty（折り返す）より後に書くこと（text-wrap と white-space は同じ設定を奪い合い、後の方が効く）。
   Chrome は nowrap でも <wbr> の位置で折り返す（WebKit は折り返さない。2026-09-24 実測で Chrome だけ4行になった）ので、PC では <wbr> を display: none にする。
   v26: タブレット（641〜1280px）も「培ってきた」の後で改行（指示）。タブレットは1列で画面幅いっぱいなので はみ出させず、入りきらない幅では文節で折り返す */
br.rn_br_wide{ display: none; }
@media screen and (min-width: 641px) {
    br.rn_br_wide{ display: inline; }
    /* 1行目が入りきらない幅（約 641〜690px）で「培ってきた」だけの行ができないよう、「これまでSTPRが培ってきた」の中では折り返さない */
    .area02 .rn_kp .jn wbr{ display: none; }
}
@media screen and (min-width: 1281px) {
    .area02 .aera02_txt02{ min-width: 0; }
    .area02 .rn_kp{ white-space: nowrap; }
    .area02 .rn_kp wbr{ display: none; }
}


/* KV 左上のロゴを、デザインチームの確定ロゴ（white 版 kv_logo_audition_white.webp）に差し替え（2026-09-24・v27〜v28）。
   ロゴ自体に右上がりの角度がついているので skewY はかけない（指示）。位置と幅（PC 40.5vw・1280px 以下 50vw）は今までのまま。
   ロゴの後ろは左が暗い青・右（1280px 以下）がステージの明るい光で、white 版だけでは右半分が溶ける（基本ロゴ・単色＝紺は逆に左半分が沈む。3版とも実測）。
   v27 の紺のぼかし影（drop-shadow）は「ダサい」、v28 の紺の板（前の白い板と同じ形）は「変」（いずれも指摘）。
   v29 は「border やぼかしを駆使して」で、傾けた すりガラスの板＋細い白の枠線にした。
   v30 は「skew しなくていい」「border いらない」「border をぼかしすりガラスに」で、傾けない・枠線なし・四角のふちをぼかしたすりガラスにした。
   v31 は「四角い枠でなく、ロゴを囲むようなすりガラスに」（指示）: すりガラスをロゴの形に切り抜く。
   型は make_logo_halo.py が作る kv_logo_audition_halo.webp（ロゴの不透明な所を 80px 太らせて文字の間も埋め、ふちを 32px ぼかした白い影絵。
   ロゴの外に 160px ずつ余白付き）。それを mask-image にするので、inset はその余白に合わせて 上下 −160/518・左右 −160/1620。
   v32 は「外枠ぼかし無くした版見てみたい」で、型のふちのぼかしを 32px → 2px（くっきり）にした（CSS は変えず、型を make_logo_halo.py 80 2 で作り直しただけ）。
   v33 で v31 と v32 を見比べてもらい「v31 で良い」→ 型をふちのぼかし 32px に戻した（make_logo_halo.py 80 32。今の既定値）。
   v34 で紺の濃さを 34% → 20%（指示「background の濃さ 20% でいい」）。
   ぼかしは強め（blur 18px・saturate 140%・紺 20%）。四角・楕円のぼかしより、ロゴの形のほうが「囲む」感じになる。全幅共通 */
.mv_title img{ transform: none; filter: none; }
.mv_title::before{
    transform: none;
    inset: -30.888% -9.877%;
    background: rgb(16 23 49 / 20%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-mask: url("/static/assets/kv_logo_audition_halo.webp") center / 100% 100% no-repeat;
    mask: url("/static/assets/kv_logo_audition_halo.webp") center / 100% 100% no-repeat;
}
/* 1280px 以下は旧ロゴ用に画像へ上下 6px の padding があり、型の位置が 6px ずれる。padding を外し、そのぶん top を 6px 下げてロゴの位置は変えない */
@media screen and (max-width: 1280px) {
    .mv_title{ top: calc(9vw + 6px); }
    .mv_title img{ padding: 0; }
}
.mv_title::after{ content: none; }

/******************************************************/
/* ファーストビューを1枚絵に（2026-09-30・v35）          */
/******************************************************/
/* 指示「assets/KV素材 これをファーストビューにして」。デザインチームの完成画像（v35・v36 は 1920×1080、v37〜 B 版 1920×1643）を KV の中身としてそのまま置く。
   切り抜き・位置の調整はせず、画面の幅いっぱいに縦横比のまま出す（全幅共通。スマホも同じ画像）。
   HTML は build_site.py の KV_IMAGE（None で v34 までの KV に戻る。そのときこのブロックは効かない）。
   style.css の背景 kv_back / kv_back_sp と高さ（PC 98.5vw・1280px 以下 1125/1704）は外す。
   光（mv_spot）は残し、画像の後ろに回す */
.mv_area.mv_fv{
    background: none;
    height: auto;
    aspect-ratio: auto;
}
.mv_fv_img{
    position: relative;
    z-index: 1;
    margin: 0;
}
.mv_fv_img img{
    display: block;
    width: 100%;
    height: auto;
}

/******************************************************/
/* 紹介文の見出しロゴを本文の左端にそろえる（2026-09-30・v36） */
/******************************************************/
/* 指示「.kv_title の画像の border-left の位置（テキストのはじまる位置）に揃えたいので、左に寄せて」。
   画像 kv_title_audition.webp（1388×669）の中で、「STPR BOYS」を囲む枠の左の線は x = 107（その左は帯のグラデだけ）。
   本文（.aera02_txt01）は画像の左端より padding ぶん内側（PC 1rem・1280px 以下 .5rem。style.css）から始まる。
   → 画像を「画像の幅 × 107/1388 − padding」だけ左へ動かすと、枠の左の線が本文の書き出しにそろう。
   translate の % は画像自身の幅に対する値なので、画像の大きさ（最大 725px・狭い画面は幅いっぱい）が変わってもそろう。
   並び（下の本文の位置）は変えない */
.kv_title img{ translate: calc(1rem - 107 / 1388 * 100%) 0; }
@media screen and (max-width: 1280px) {
    .kv_title img{ translate: calc(.5rem - 107 / 1388 * 100%) 0; }
}

/******************************************************/
/* ファーストビュー: PC は本文の幅に・1280px 以下は下を詰める（2026-10-01・v38） */
/******************************************************/
/* 依頼「web版は横幅を下と合わせて」「sp版はバナーの下を詰めて」。決めた値（2026-10-01 指示）:
   - PC（1281px〜）: バナーの幅を本文と同じ 1024px（募集要項・4つの強み・メンバーの箱、紹介文の本文と同じ幅。
     どれも max-width 1072px から左右 1.5rem を引いた幅）にして中央に置く。左右はページの背景。上下の余白は今のまま
   - 1280px 以下（スマホ・タブレット）: バナーの下端 → 開催中の枠の上端を 24px に（元は 390px で約 99px・800px で 104px）。
     枠の右上のキラ（飾りの箱）はこの幅で枠の 24px 外まで出るので、24px ならバナーに重ならない
   どちらも KV が1枚絵のとき（.mv_area.mv_fv）だけ効く。KV_IMAGE = None に戻せば元の余白に戻る */
@media screen and (min-width: 1281px) {
    .mv_fv_img{
        max-width: calc(1072px - 3rem);
        margin: 0 auto;
    }
}
@media screen and (max-width: 1280px) {
    .mv_area.mv_fv + .area_open{ padding-top: 24px; }
}

/******************************************************/
/* 開催中の枠をボタンだけに（2026-10-01・v39）           */
/******************************************************/
/* 依頼「KV まわりがきれいになると ENTRY ボタンの外側のボックスが気になる。枠と文字・締め切りなしで、
   （募集要項の ENTRY と）同様にボタン直置きに」→ 箱・名前・締め切りを外し、ENTRY ボタンだけを置く（HTML は build_site.py の OPEN_BOX）。
   ボタンの大きさは募集要項などほかの ENTRY と同じ（最大 310px。狭い画面は飾りごと画面に収まる幅）。飾りは暗い地用の白い版のまま。
   位置は v38 の箱と同じにする: 飾りの上端 ＝ 箱の上端（KV の下端から PC 7.5vw・1280px 以下 24px）、飾りの下端 ＝ 箱の下辺
   （その下の余白・紹介文の位置は変わらない）。飾り（deco_entry.svg）は画像の上下に画像の幅の 11.81% ずつ出る */
.area_open_btn{
    --rn-entry-deco: calc(min(310px, (100vw - 24px) / 1.3) * .1181);
    padding-top: calc(7.5vw + var(--rn-entry-deco));
}
.area_open_btn .entry_btn{ margin: 0 0 var(--rn-entry-deco); }
@media screen and (max-width: 1280px) {
    .mv_area.mv_fv + .area_open_btn{ padding-top: calc(24px + var(--rn-entry-deco)); }
}

/******************************************************/
/* 紹介文: 見出しロゴなし・1280px 以下は中央揃え／KV 下の ENTRY をスマホで小さく（2026-10-01・v40） */
/******************************************************/
/* 依頼のモック（スマホ）で、ENTRY の下の見出しロゴ「STPR BOYS AUDITION」が消え、紹介文が中央揃えになっていた。
   文面は「ボタンが若干大きいので、バナーの文字の大きさと違和感が出ないよう小さく」。決めた値（2026-10-01 指示）:
   - 見出しロゴは全幅で出さない（HTML は build_site.py の KV_TITLE_SHOW）。紹介文は見出しロゴのあった位置から始める
     （ENTRY の飾りの下端 → 紹介文の列の上端 ＝ v39 の 飾りの下端 → 見出しロゴの上端。641px 以上はロゴを外すだけで同じになり、
     640px 以下はロゴの上の余白 40px（style.css .kv_title）が一緒に消えるので、本文の列に 40px 足す）
   - 紹介文（キャッチ・本文・締めの2行）は 1列になる 1280px 以下で中央揃え。PC の2列は左揃えのまま
   - KV の下の ENTRY は 640px 以下で、ほかの ENTRY の 8割（390px 幅で 282 → 225px）。上下の間隔は飾りの大きさに合わせて保つ */
@media screen and (max-width: 1280px) {
    .area02 .aera02_txt01,
    .area02 .aera02_txt02{ text-align: center; }
}
@media screen and (max-width: 640px) {
    .area02 .txt_wrap{ margin-top: 40px; }
    .area_open_btn{
        --rn-entry-w: calc(min(310px, (100vw - 24px) / 1.3) * .8);
        --rn-entry-deco: calc(var(--rn-entry-w) * .1181);
    }
    .area_open_btn .entry_btn img{ width: var(--rn-entry-w); max-width: none; }
}

/******************************************************/
/* KV の下の ENTRY: スマホ・タブレットの上を少し広げる（2026-10-01・v41） */
/******************************************************/
/* 指示「スマホ・タブレット版の1つ目のエントリーボタンの上マージン少し広げて」。
   1280px 以下の KV の下端 → ENTRY の飾りの上端を 24px（v38〜v40）→ 40px に。PC（7.5vw）と下の余白は変えない */
@media screen and (max-width: 1280px) {
    .mv_area.mv_fv + .area_open_btn{ padding-top: calc(40px + var(--rn-entry-deco)); }
}

/******************************************************/
/* KV の下の ENTRY: PC もスマホ・タブレットと同じ間隔に（2026-10-01・v42） */
/******************************************************/
/* 指示「PC の1つ目のエントリーボタンは KV と離れすぎてるので、スマホ・タブレットを参考にパディングを詰めて」。
   PC（1281px〜）の KV の下端 → ENTRY の飾りの上端を 7.5vw（1440px で 108px・1920px で 144px）→ 40px に。
   タブレットと PC はボタンが同じ 310px なので、1280px 以下（v41）と同じ 40px にした。下の余白は変えない */
@media screen and (min-width: 1281px) {
    .mv_area.mv_fv + .area_open_btn{ padding-top: calc(40px + var(--rn-entry-deco)); }
}

/******************************************************/
/* KV の下の ENTRY をさらに 2割小さく（2026-10-01・v43） */
/******************************************************/
/* 指示「エントリーボタンもう少し（20% 前後）だけ小さくして」→ KV の下の1つ目の ENTRY だけ、全幅で今の 8割に。
   PC・タブレット 310 → 248px、640px 以下はほかの ENTRY の 8割（v40）→ 6.4割（390px 幅で 225 → 180px）。
   ほかのセクションの ENTRY は変えない。KV → 飾りの上端（40px）と 飾りの下端 → 紹介文は、飾りの大きさに合わせて保つ */
.area_open_btn{
    --rn-entry-w: calc(min(310px, (100vw - 24px) / 1.3) * .8);
    --rn-entry-deco: calc(var(--rn-entry-w) * .1181);
}
.area_open_btn .entry_btn img{ width: var(--rn-entry-w); max-width: none; }
@media screen and (max-width: 640px) {
    .area_open_btn{ --rn-entry-w: calc(min(310px, (100vw - 24px) / 1.3) * .64); }
}

/******************************************************/
/* 公式 LINE ボタン（KV 下の ENTRY の下）・採用ボタン（ページの下）（2026-10-28・v45） */
/******************************************************/
/* 依頼「オーディション案内の公式 LINE 追加リンクをどこかに」「下の方に採用ページへのボタン」（推奨で判断）。
   - LINE: KV の下の ENTRY のすぐ下。ENTRY より目立たせない大きさで、採用ボタンと同じ見た目（緑・影は浮くのでやめた）
   - 採用: FAQ の ENTRY の下。白い細枠（ほかの見出しの枠と同じ紫 → 水色の線）の控えめなボタン
   どちらも別タブで開く */
/* 2026-10-28 LINE は「ボタン → ENTRY 4か所すべての下に案内の文」に変更（ボタンは ENTRY と並んで強弱が崩れ、ここだけ浮いたため）。
   2026-10-29 依頼で文末の → を LINE 公式アカウントのロゴ（緑の地に白・配布データ無加工）に替え、ロゴをリンクにした。
   ロゴは高さ 13px（ガイドラインの最小は 10px）。周りの余白（ロゴの高さの約 0.85 倍）より広く、緑の地を上下 11px・左右 16px 取る。
   案内は .entry_btn の中にあるので、ENTRY の上下の余白はそのまま。飾りは画像の下へ画像幅の 11.81% 出るので、
   上はその分＋28px（640px 以下 24px）空け、下は同じ分を引いて「飾りの下端 → 次の要素」の間を今までと同じにする */
.entry_btn{ --rn-deco: calc(min(310px, (100vw - 24px) / 1.3) * .1181); }
.area_open_btn .entry_btn{ --rn-deco: var(--rn-entry-deco); }
.entry_btn .rn_line_link{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: calc(var(--rn-deco) + 28px) auto calc(-1 * var(--rn-deco));   /* 2026-10-29「上をもう少し」で 40px にしたが「戻して」で 28px */
    padding: 0 16px;
}
.entry_btn .rn_line_link .txt{
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: .06em;
    word-break: keep-all;
    color: #e6e7ea;
    /* 2026-10-29「視認性悪いのでうっすら」→ 紹介文の見出しと同じ紺のぼかし。*/
    text-shadow: 0 0 8px rgb(20 26 90 / 80%), 0 0 2px rgb(20 26 90 / 70%);
}
.entry_btn .rn_line_link a.logo{
    position: static;
    display: block;
    padding: 11px 16px;
    background: #06C755;
    line-height: 0;
}
.entry_btn .rn_line_link a.logo::before{ content: none; }
.entry_btn .rn_line_link a.logo img{
    display: block;
    width: auto;
    height: 13px;   /* 2026-10-29「でかい」16 → 13px（ガイドラインの最小は 10px）*/
    max-width: none;
    filter: none;
}
.entry_btn .rn_line_link a.logo:hover{ filter: brightness(1.06); }
.entry_btn .rn_line_link a.logo:focus-visible{ outline: 2px solid #88e4ff; outline-offset: 3px; }
@media screen and (max-width: 640px) {
    .entry_btn .rn_line_link{ margin-top: calc(var(--rn-deco) + 24px); gap: 12px; }
    .entry_btn .rn_line_link .txt{ font-size: 12px; }
}
/* 募集要項は明るいドット地なので、本文と同じ紺の文字にする */
.area03 .entry_btn .rn_line_link .txt{
    color: #0c1023;
    /* 紺の文字に紺の影はにじむだけなので、ここだけ同じ強さの白い影 */
    text-shadow: 0 0 8px rgb(255 255 255 / 90%), 0 0 2px rgb(255 255 255 / 80%);
}

.rn_recruit{ margin-top: 72px; text-align: center; color: #fff; }
.rn_recruit_txt{ font-size: 14px; letter-spacing: .08em; }
.rn_recruit_btn{ margin-top: 14px; }
.rn_recruit_btn a{
    display: inline-block;
    min-width: min(280px, 80vw);
    padding: 12px 28px;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-image: linear-gradient(90deg, #88e4ff, #c5c9ff) 1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    background: rgb(16 23 49 / 45%);
}
.rn_recruit_btn a::after{ content: " ↗"; font-weight: 400; }
.rn_recruit_btn a:hover{ background: rgb(16 23 49 / 70%); }
@media screen and (max-width: 640px) {
    .rn_recruit{ margin-top: 56px; }
    .rn_recruit_txt{ font-size: 13px; }
}

/******************************************************/
/* KV の下の ENTRY を画面幅に合わせて伸び縮みさせる（2026-10-29） */
/******************************************************/
/* 指摘「1つ目のエントリーボタンが画面幅に応じてサイズが変化しない」。v43 までは 641px 以上で 248px・431〜640px で 198px の固定だった
   （KV は画面に合わせて伸び縮みするので、タブレットではボタンだけ大きく見えた）。
   決めてある大きさ（PC 248px・390px 幅で 180px）はそのまま、そのあいだを画面幅に比例してつなぐ:
   390px → 180px、1280px → 248px の直線（1281px 以上は KV が 1024px で止まるのでボタンも 248px で止める）。
   430px 以下は v43 の式（ほかの ENTRY の 6.4 割）のほうが小さいので、そちらで縮む。飾りの間隔は --rn-entry-deco が追従する */
.area_open_btn{
    --rn-entry-w: min(248px, calc((100vw - 24px) / 1.3 * .64), calc(180px + (100vw - 390px) * .0764));
}
@media screen and (max-width: 640px) {
    .area_open_btn{ --rn-entry-w: min(248px, calc((100vw - 24px) / 1.3 * .64), calc(180px + (100vw - 390px) * .0764)); }
}

/******************************************************/
/* ENTRY ボタンを全部同じ大きさに・全体を少し小さく（2026-10-29） */
/******************************************************/
/* 指示「1つ目のエントリーボタンが2つ目以降と揃ってない → 揃えて。代わりに全体的に若干小さく」。
   KV の下・募集要項・選考フロー・FAQ の4つとも同じ式: 上限は元の大きさ（310px）の 9 割の 279px、
   390px 幅で 225px（ほかの ENTRY の 8 割＝10/1 に1つ目を小さくしたときの大きさ）、そのあいだは画面幅に比例（1280px で 279px）。
   390px より狭い画面は（画面幅 − 24px）÷ 1.3 の 8 割で縮む（飾りごと画面に収まる幅）。
   飾りは画像の上下に画像幅の 11.81% 出るので、飾りの大きさが変わっても間隔が変わらないようにする:
   KV の下（--rn-entry-deco）・ENTRY の下の LINE の案内（--rn-deco）・FAQ の下（margin-bottom）はもともと飾りに追従。
   募集要項・選考フロー・FAQ の上（直前の文 → 飾りの上端）は、元の 310px 前提の飾りの分を引いて今の飾りの分を足し、今までと同じ間にする */
.entry_btn,
.area_open_btn{
    --rn-entry-w: min(279px, calc((100vw - 24px) / 1.3 * .8), calc(225px + (100vw - 390px) * .0607));
    --rn-entry-deco: calc(var(--rn-entry-w) * .1181);
}
.entry_btn{ --rn-deco: var(--rn-entry-deco); }
.entry_btn img,
.area_open_btn .entry_btn img{ width: var(--rn-entry-w); max-width: none; }
.area06 .entry_btn{ margin-bottom: var(--rn-deco); }
.area03 .entry_btn,
.area04 .entry_btn,
.area06 .entry_btn{ margin-top: calc(110px - min(310px, (100vw - 24px) / 1.3) * .1181 + var(--rn-deco)); }
@media screen and (max-width: 640px) {
    .area03 .entry_btn,
    .area04 .entry_btn,
    .area06 .entry_btn{ margin-top: calc(84px - min(310px, (100vw - 24px) / 1.3) * .1181 + var(--rn-deco)); }
}
/* 2つ目以降は、ENTRY の下の余白（style.css の 4rem・採用の 72px など）が飾りの分と重なって決まっていたので、
   LINE の案内の下で引く分も元の 310px 前提の飾りの分にして、ロゴ → 次の要素を今までと同じにする */
.area03 .entry_btn .rn_line_link,
.area04 .entry_btn .rn_line_link,
.area06 .entry_btn .rn_line_link{ margin-bottom: calc(-1 * min(310px, (100vw - 24px) / 1.3) * .1181); }

/******************************************************/
/* 4つの強みの箱のキラを少し外へ（2026-10-29） */
/******************************************************/
/* 指示「.st_list li の右上や左下の飾りの先が li と縦のラインで揃ってるのでずらして」→「数px外に向かってずらしてほしいだけ。箱ごとには変えず統一」。
   飾りの箱（::before）を広げて、右上のキラは右上へ・左下のキラは左下へ、4つとも同じだけ動かす。
   PC 34 → 38px（4px 外へ）、1280px 以下 24 → 27px（3px 外へ） */
/* 2026-10-29 指示「募集要項の箱と若干ずれるので、募集要項側を 4つの強みに合わせて」で募集要項も同じ値 */
.st_list li::before,
.area03 .ol_box > div::before{ inset: -38px; }
@media screen and (max-width: 1280px) {
    .st_list li::before,
    .area03 .ol_box > div::before{ inset: -27px; }
    /* 640px 以下は箱の外が 24px しかなく、飾りの箱（透明な部分）が画面の横に 2〜3px 出て横スクロールになった。
       この区画はもともと clip-path で斜めに切り抜いていて画面外は見えないので、横のはみ出しだけ切る（キラの先は画面内に収まる）*/
    .area_strength{ overflow-x: clip; }
}

/******************************************************/
/* 動き（2026-10-29）: KV・セクションの表示・ボタン */
/******************************************************/
/* 指示「全体的にシンプルなアニメーション。KV はちょっと凝ったもの」「ボタンもアニメ」。
   「視差効果を減らす」設定（prefers-reduced-motion）のときは全部止める（末尾） */

/* ---- KV（.mv_fv に kv-a / kv-b / kv-c。build_site.py の KV_ANIM）---- */
.mv_fv_img{ overflow: hidden; }
/* a・c: 少し大きい状態からゆっくり元の大きさに戻りながら表示 → 斜めの光の帯が1回だけ左から右へ横切る（本番は c） */
@keyframes rn_kv_zoom{ from{ opacity: 0; scale: 1.08; } to{ opacity: 1; scale: 1; } }
/* 2026-10-29「a+b で、光が横切るのは最初だけでいい」→ 表示し終わる頃に1回だけ横切る */
@keyframes rn_kv_sweep{ from{ translate: -100% 0; } to{ translate: 270% 0; } }
.kv-a .mv_fv_img img,
.kv-c .mv_fv_img img{ animation: rn_kv_zoom 1.8s cubic-bezier(.2, .7, .2, 1) both; }
.kv-a .mv_fv_img::after,
.kv-c .mv_fv_img::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    /* 帯は細めで中心を明るく。合成（screen・soft-light）はこの画像の上でほぼ見えなかったので、普通の白の半透明 */
    background: linear-gradient(118deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .18) 44%, rgb(255 255 255 / .45) 50%, rgb(255 255 255 / .18) 56%, rgb(255 255 255 / 0) 70%);
    translate: -100% 0;
    animation: rn_kv_sweep 1.7s ease-in-out 1.4s 1 both;
    pointer-events: none;
}
/* b: ふわっと表示 */
@keyframes rn_kv_fade{ from{ opacity: 0; } to{ opacity: 1; } }
.kv-b .mv_fv_img img{ animation: rn_kv_fade 1.4s ease both; }
/* b・c: キラ（ENTRY の周りと同じ 4 つの尖りの形）が場所ごとに時間をずらして明滅する */
.rn_kv_tw{ display: none; position: absolute; inset: 0; pointer-events: none; }
.kv-b .rn_kv_tw,
.kv-c .rn_kv_tw{ display: block; }
@keyframes rn_kv_twinkle{
    0%, 100%{ opacity: 0; scale: .3; rotate: 0deg; }
    50%{ opacity: 1; scale: 1; rotate: 45deg; }
}
.rn_kv_tw i{
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0,-1 Q0.13,-0.13 1,0 Q0.13,0.13 0,1 Q-0.13,0.13 -1,0 Q-0.13,-0.13 0,-1Z' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgb(136 228 255 / .95));
    opacity: 0;
    animation: rn_kv_twinkle var(--t, 3.2s) ease-in-out var(--d) infinite;
}

/* ---- セクション: 画面に入ったら下から少し浮き上がって表示（JS が .rv-ready と .rv を付けたときだけ）---- */
.rv-ready .rv{
    opacity: 0;
    translate: 0 28px;
    transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1);
}
.rv-ready .rv.is-in{ opacity: 1; translate: none; }

/* ---- ボタン ---- */
/* ENTRY: ゆっくり上下にゆれる＋ボタンの形に沿って光が走る（3.6 秒ごと）。マウスを乗せると少し大きく */
@keyframes rn_btn_float{ from{ translate: 0 0; } to{ translate: 0 -6px; } }
@keyframes rn_btn_shine{ 0%{ background-position: -100% 0; } 35%, 100%{ background-position: 200% 0; } }
.entry_btn > a{
    animation: rn_btn_float 2.4s ease-in-out infinite alternate;
    transition: scale .25s ease;
}
.entry_btn > a:hover{ scale: 1.04; }
.entry_btn > a::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .7) 50%, rgb(255 255 255 / 0) 70%) no-repeat;
    background-size: 50% 100%;
    background-position: -100% 0;
    -webkit-mask: url("/static/assets/btn.webp") center / 100% 100% no-repeat;
    mask: url("/static/assets/btn.webp") center / 100% 100% no-repeat;
    animation: rn_btn_shine 3.6s ease-in-out 1s infinite;
    pointer-events: none;
}
/* LINE: マウスを乗せると少し浮く（ロゴ自体には効果を付けない＝ガイドライン） */
.entry_btn .rn_line_link a.logo{ transition: translate .2s ease, filter .2s ease; }
.entry_btn .rn_line_link a.logo:hover{ translate: 0 -2px; }
/* 採用: マウスを乗せると少し浮いて、矢印が右上へ動く */
.rn_recruit_btn a{ transition: translate .2s ease, background .2s ease; }
.rn_recruit_btn a:hover{ translate: 0 -2px; }
.rn_recruit_btn a::after{ display: inline-block; transition: translate .2s ease; }
.rn_recruit_btn a:hover::after{ translate: 2px -2px; }

@media (prefers-reduced-motion: reduce){
    .mv_fv_img img,
    .mv_fv_img::after,
    .rn_kv_tw i,
    .entry_btn > a,
    .entry_btn > a::after{ animation: none !important; }
    .mv_fv_img::after,
    .rn_kv_tw{ display: none !important; }
    .rv-ready .rv{ opacity: 1; translate: none; transition: none; }
}

/******************************************************/
/* 採用の案内をフッターへ（2026-10-29） */
/******************************************************/
/* 指示「フッターのプライバシーポリシーの上に」「文言は消さなくていい」「採用情報はボタンデザインに」「プラポリとのマージンはしっかり」。
   文とボタンの見た目は 10/28 の .rn_recruit のまま。フッター（.copyright_area は行の高さ 270%・灰色の文字）の中なので、
   行の高さと文字の色を戻し、上の余白はフッターの上の余白に任せて 0、プライバシーポリシーとの間を PC 48px・640px 以下 40px */
.copyright_area .rn_recruit{ margin: 0 0 48px; line-height: 1.7; color: #fff; }
.copyright_area .rn_recruit_btn a{ line-height: 1.7; }
@media screen and (max-width: 640px) {
    .copyright_area .rn_recruit{ margin: 0 0 40px; }
}
/* 2026-10-29 指示「フッターと LINE 公式アカウントのボタンとの間も広く」: FAQ の LINE ボタンの下 → フッターを PC 48px・640px 以下 40px 広げる（1440px で 112 → 160px・390px で 65 → 105px）*/
/*   margin は ENTRY の下の余白と重なって一部が消えるので、重ならない padding で足す */
.area06 .entry_btn .rn_line_link{ padding-bottom: 48px; }
@media screen and (max-width: 640px) {
    .area06 .entry_btn .rn_line_link{ padding-bottom: 40px; }
}

/* 選考フローの下の注意書き（選考ステップは変更する可能性〜／合格はデビューを確約〜）の上を詰める（2026-10-29 指示）。
   style.css の .flow_box の下 50px → 24px（全幅） */
.area04 .flow_box{ margin-bottom: 24px; }
/* 同じ注意書きは明るい網の上で読みにくいので、LINE の案内の文と同じ紺のぼかしの影（2026-10-29 指示）*/
.area04 .notice{ text-shadow: 0 0 8px rgb(20 26 90 / 80%), 0 0 2px rgb(20 26 90 / 70%); }

/* 動画の上下の間をそろえる（2026-10-29 指示「動画の上下マージンどっちも同じくらいに」）。
   上 = 紹介文のいちばん下の文字（PC は左右2列のうち下まで伸びる左の列）→ 動画の上端、下 = 動画の下端 → 募集要項の斜めの境目（動画の中央で）。
   上は動画の margin-top、下は動画の margin-bottom で合わせる（区画の高さは動画と一緒に動くので、上だけ動かしても下は変わらない）。
   変更前（見た目の間）: 1440px で 上 約 75〜115 / 下 178、1024px で 上 約 135 / 下 220、390px で 上 約 120 / 下 106。
   変更後はどの幅も上と下の差が 20px 前後（PC は紹介文の折り返しが Chrome と Safari で違い、上が ±20px ほど違う）。測り方は check/video_gap.js */
.rn_video{ margin-top: 192px; margin-bottom: -28px; }
@media screen and (max-width: 1280px) {
    .rn_video{ margin-top: calc(125px + 8.47vw); margin-bottom: -35px; }
}
@media screen and (max-width: 640px) {
    .rn_video{ margin-top: calc(61px + 12.64vw); margin-bottom: calc(23.7px - 4.64vw); }
}