/*
 * アイパネル「アイパネルについて」(/help/about-ipanel)専用スタイル — handoff 066
 *
 * 061 レビューの松浦さん指摘(B-1〜B-6)を受け、モック
 * https://ipanel-top-renewal.digden134.workers.dev/help/about-ipanel に合わせて作り直したもの。
 *
 * 【スコープ方針】
 *   全ルールを body クラス `.ipanel-rtsub--about` 配下に限定する。
 *   `.rtsub-hero` / `.rtsub-sec` / `.rtsub-final` などは A・C・D・E ページと共有のクラスなので、
 *   B ページの都合でそれらを書き換えると他ページに波及する。そのため B 専用の
 *   `rtabout-*` クラスを新設し、共通ファイル ipanel-renewal-sub.css には一切手を入れない
 *   (065 で同ファイルの削除時にブレースを取り残して CSS が壊れる事故があったため、
 *    066 では同ファイルを開かない方針にした)。
 *
 * 【値の出どころ】
 *   モックのビルド済み CSS(/assets/index-DFNCUc5Q.css)から該当セレクタを実測して移植。
 *   モックは基底ルールを `.about-page` で上書きしている箇所があるため、
 *   **上書き後の値**を採用している(例: ヒーロー背景は基底 `--cream` → `.about-page` で `#fff`)。
 *
 * 【ブレイクポイント】モックに合わせて 980px / 760px / 640px。
 */

/* ============================================================
 * 1. ヒーロー(B-1 / B-2)
 * ============================================================
 * B-1: 見出しを大きく / 背景を白に / 「求人発信メディアです。」をオレンジに /
 *      本文をオレンジ丸ブレット付きの段落構造に / 「出会いのきっかけ」をオレンジ強調
 * B-2: モックがヒーローに統合している 2 つの文
 *      (「あなたの街には、まだ素敵な人がいっぱいいます。」= narrative の締め /
 *       「パネルとの偶然の出会いが、応募への一歩につながります。」= 画像の figcaption)
 *      を実装でもヒーロー内に置く。独立セクションは Twig 側から削除済み。
 */
.ipanel-rtsub--about .rtabout-hero {
    display: grid;
    grid-template-columns: 44% 56%;   /* モック: .about-hero */
    min-height: 900px;
    /* モック基底は var(--cream) だが .about-page で #fff に上書きされている。
       松浦さん指摘「背景に色がついている / モックは白」はこれが根拠。 */
    background: #fff;
    position: relative;
    overflow: hidden;
}

.ipanel-rtsub--about .rtabout-hero__copy {
    position: relative;
    z-index: 2;
    padding: 96px 3vw 92px 7vw;
    background: #fff;
}

/* モック: .about-page .about-hero h1.about-hero-lead(基底 4.3vw を 3vw に上書き) */
.ipanel-rtsub--about .rtabout-hero__lead {
    margin: 24px 0 0;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .04em;
}
.ipanel-rtsub--about .rtabout-hero__lead strong {
    color: var(--rts-orange);
    font-weight: 600;
}

/* オレンジの縦ライン + 各段落頭のオレンジ丸(モック: .about-narrative) */
.ipanel-rtsub--about .rtabout-narrative {
    position: relative;
    margin-top: 44px;
    padding: 34px 0 0 32px;
    border-top: 1px solid #ded5c8;
    font-size: 14px;
    line-height: 1.9;
    color: #5f5a53;
}
.ipanel-rtsub--about .rtabout-narrative::before {
    content: "";
    position: absolute;
    top: 48px;
    left: 0;
    width: 2px;
    height: 78%;
    background: linear-gradient(var(--rts-orange), rgba(245, 130, 19, .08));
}
.ipanel-rtsub--about .rtabout-narrative p {
    position: relative;
    margin: 0 0 19px;
}
.ipanel-rtsub--about .rtabout-narrative p::before {
    content: "";
    position: absolute;
    top: .75em;
    left: -35px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rts-orange);
    /* モック基底は cream のリングだが .about-page で #fff に上書き */
    box-shadow: 0 0 0 5px #fff;
}
.ipanel-rtsub--about .rtabout-narrative__closing {
    margin-top: 28px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.8;
    color: var(--rts-ink);
}

/* 「出会いのきっかけ」のオレンジ強調(モック: .encounter-emphasis) */
.ipanel-rtsub--about .rtabout-em {
    display: inline-block;
    margin: 0 .18em;
    font-size: 1.28em;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--rts-orange);
}

.ipanel-rtsub--about .rtabout-hero__visual {
    position: relative;
    align-self: stretch;
    min-height: 900px;
    margin: 0;
    background: #fff;
}
.ipanel-rtsub--about .rtabout-hero__visual img {
    position: absolute;
    top: 50%;
    left: -45%;
    width: 145%;
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    object-fit: contain;
    object-position: center;
}
/* 左端をコピー側の白に溶かす overlay(モック: .about-page .about-hero-visual:after) */
.ipanel-rtsub--about .rtabout-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .38) 11%, transparent 28%);
}
/* B-2 の縦帯(オレンジの左罫 + 半透明白地の小さいキャプション) */
.ipanel-rtsub--about .rtabout-hero__visual figcaption {
    position: absolute;
    right: 5vw;
    bottom: 42px;
    z-index: 2;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .88);
    border-left: 2px solid var(--rts-orange);
    color: #6a6259;
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1.7;
}

/* ============================================================
 * 2. アイパネルの3つの特徴(B-3)
 * ============================================================
 * 横 3 カラムの小カード → 縦積みで 1 項目ずつ大きく展開。
 * 大きなオレンジ数字 + オレンジ丸の中に QR / 連動 / 対話。
 */
.ipanel-rtsub--about .rtabout-featIntro {
    background: #fff;
    text-align: center;
    padding: 125px 7vw 85px;
}
.ipanel-rtsub--about .rtabout-featIntro__title {
    margin: 15px 0 20px;
    font-size: clamp(40px, 4.4vw, 62px);
    font-weight: 600;
    line-height: 1.4;
}
.ipanel-rtsub--about .rtabout-featIntro__lead {
    margin: 0;
    color: var(--rts-ink-soft);
    font-size: 15px;
    line-height: 2;
}

.ipanel-rtsub--about .rtabout-featList {
    width: min(1180px, 88vw);
    margin: 0 auto 135px;
    border-top: 1px solid var(--rts-line);
}
.ipanel-rtsub--about .rtabout-featRow {
    position: relative;
    display: grid;
    grid-template-columns: 120px 260px 1fr;
    align-items: center;
    gap: 55px;
    min-height: 410px;
    padding: 70px 30px;
    border-bottom: 1px solid var(--rts-line);
}
/* 数字とシンボルの間の縦罫(モック: .feature-row:after) */
.ipanel-rtsub--about .rtabout-featRow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 178px;
    width: 1px;
    background: var(--rts-line);
}
.ipanel-rtsub--about .rtabout-featRow__no {
    align-self: start;
    padding-top: 16px;
    color: var(--rts-orange);
    font-size: 68px;
    line-height: 1;
}
.ipanel-rtsub--about .rtabout-featRow__symbol {
    position: relative;
    display: grid;
    place-items: center;
    width: 235px;
    height: 235px;
    border-radius: 50%;
    background: #fff8ed;
}
.ipanel-rtsub--about .rtabout-featRow__symbol::before,
.ipanel-rtsub--about .rtabout-featRow__symbol::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(245, 130, 19, .38);
    border-radius: 50%;
}
.ipanel-rtsub--about .rtabout-featRow__symbol::before { inset: 17px; }
.ipanel-rtsub--about .rtabout-featRow__symbol::after {
    top: 50%;
    right: 10px;
    width: 11px;
    height: 11px;
    border: 4px solid #fff;
    background: var(--rts-orange);
}
.ipanel-rtsub--about .rtabout-featRow__symbol span {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--rts-orange);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .08em;
}
.ipanel-rtsub--about .rtabout-featRow__title {
    margin: 12px 0 16px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    line-height: 1.35;
}
.ipanel-rtsub--about .rtabout-featRow__caption {
    margin: 0 0 25px;
    color: var(--rts-ink);
    font-size: 18px;
    line-height: 1.8;
}
.ipanel-rtsub--about .rtabout-featRow__body {
    max-width: 610px;
    margin: 0;
    color: var(--rts-ink-soft);
    font-size: 14px;
    line-height: 2.15;
}
.ipanel-rtsub--about .rtabout-featRow__body a {
    color: var(--rts-orange-dark);
    font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
 * 3. 掲げる。知ってもらう。応募してもらう。(B-4)
 * ============================================================
 * 縦積み 3 段カード → 横 3 カラム。上端の罫にオレンジのドットで進行を示す。
 * 右上に薄オレンジの半円(モック: .about-flow:before)。
 */
.ipanel-rtsub--about .rtabout-flow {
    position: relative;
    overflow: hidden;
    background: #fffaf3;
    text-align: center;
    padding: 125px 7vw 110px;
}
.ipanel-rtsub--about .rtabout-flow::before {
    content: "";
    position: absolute;
    top: -170px;
    right: -170px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(245, 130, 19, .16);
    border-radius: 50%;
}
.ipanel-rtsub--about .rtabout-flow__title {
    margin: 15px 0 20px;
    font-size: clamp(40px, 4.4vw, 62px);
    font-weight: 600;
    line-height: 1.4;
}
.ipanel-rtsub--about .rtabout-flow__lead {
    margin: 0;
    color: var(--rts-ink-soft);
    font-size: 15px;
    line-height: 2;
}

.ipanel-rtsub--about .rtabout-journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(1080px, 90vw);
    margin: 75px auto 0;
    border-top: 1px solid #d9cdbd;
}
.ipanel-rtsub--about .rtabout-journey::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 33.333%;
    height: 2px;
    background: var(--rts-orange);
}
.ipanel-rtsub--about .rtabout-journey__item {
    position: relative;
    min-width: 0;
    text-align: left;
    padding: 52px 6% 42px;
    border-right: 1px solid #e1d7c9;
}
.ipanel-rtsub--about .rtabout-journey__item:last-child { border-right: 0; }
.ipanel-rtsub--about .rtabout-journey__item::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 11px;
    height: 11px;
    border: 3px solid #fffaf3;
    border-radius: 50%;
    background: var(--rts-orange);
    box-shadow: 0 0 0 1px var(--rts-orange);
}
.ipanel-rtsub--about .rtabout-journey__index {
    display: block;
    color: var(--rts-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
}
.ipanel-rtsub--about .rtabout-journey__item strong {
    display: block;
    margin: 14px 0 18px;
    font-size: clamp(27px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.35;
}
.ipanel-rtsub--about .rtabout-journey__item p {
    margin: 0;
    color: var(--rts-ink-soft);
    font-size: 13px;
    line-height: 1.9;
}
.ipanel-rtsub--about .rtabout-journey__end {
    width: min(1080px, 90vw);
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid #d9cdbd;
    text-align: right;
    color: #70685f;
    font-size: 13px;
    letter-spacing: .06em;
}

/* ============================================================
 * 4. オレンジ CTA(B-5)
 * ============================================================
 * 見出しをゆったり大きく。「半径2kmの求人発信メディア」の隣に白地のロゴバッジ。
 */
.ipanel-rtsub--about .rtabout-cta {
    background: var(--rts-orange);
    color: #fff;
    text-align: center;
    padding: 125px 5vw 120px;
}
.ipanel-rtsub--about .rtabout-cta__title {
    margin: 18px 0 28px;
    font-size: clamp(38px, 4.2vw, 60px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .04em;
}
.ipanel-rtsub--about .rtabout-cta__brandline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
}
.ipanel-rtsub--about .rtabout-cta__logo {
    display: flex;
    align-items: center;
    width: 170px;
    min-height: 46px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 8px;
}
.ipanel-rtsub--about .rtabout-cta__logo img { width: 100%; height: auto; }

.ipanel-rtsub--about .rtabout-cta__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 42px;
}
.ipanel-rtsub--about .rtabout-cta__actions a {
    min-width: 220px;
    padding: 18px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
}
.ipanel-rtsub--about .rtabout-cta__actions a:hover { transform: translateY(-2px); }
.ipanel-rtsub--about .rtabout-cta__primary { background: #25231f; color: #fff; }
.ipanel-rtsub--about .rtabout-cta__primary:hover { background: #000; color: #fff; }
.ipanel-rtsub--about .rtabout-cta__primary span { margin-left: 24px; }
.ipanel-rtsub--about .rtabout-cta__secondary { border: 1px solid rgba(255, 255, 255, .8); color: #fff; }
.ipanel-rtsub--about .rtabout-cta__secondary:hover { background: #fff; color: var(--rts-orange); }

/* ============================================================
 * 5. レスポンシブ
 * ============================================================
 * モックのブレイクポイントをそのまま踏襲する。
 *   980px: ヒーローを 1 カラムに落とす
 *   640px: 主要ブレイクポイント(特徴・流れ・CTA の縦積み化)
 *   760px: さらに詰める上書き(モックでは 640 の後ろに置かれていて後勝ちになる)
 * モックのファイル内での順序が 640 → 760 なので、こちらも同じ順序で書く。
 * 順序を入れ替えると 390px で 760 の指定が 640 に負ける。
 */

/* --- 980px 以下: ヒーローを 1 カラムに --- */
@media screen and (max-width: 980px) {
    .ipanel-rtsub--about .rtabout-hero { grid-template-columns: 1fr; }
    .ipanel-rtsub--about .rtabout-hero__copy { padding: 90px 8vw; }
    .ipanel-rtsub--about .rtabout-hero__visual { min-height: 610px; }
    .ipanel-rtsub--about .rtabout-hero__visual img { width: 100%; left: 0; }
    .ipanel-rtsub--about .rtabout-hero__visual::after {
        background: linear-gradient(180deg, #fff 0%, transparent 18%);
    }
}

/* --- 640px 以下: 主要ブレイクポイント --- */
@media screen and (max-width: 640px) {
    .ipanel-rtsub--about .rtabout-brDesk { display: none; }

    .ipanel-rtsub--about .rtabout-hero { display: block; }
    .ipanel-rtsub--about .rtabout-hero__copy { padding: 72px 24px 60px; }
    .ipanel-rtsub--about .rtabout-hero__lead { margin-top: 20px; font-size: 34px; }
    .ipanel-rtsub--about .rtabout-narrative { padding-left: 25px; font-size: 13px; }
    .ipanel-rtsub--about .rtabout-narrative p::before { left: -28px; }
    .ipanel-rtsub--about .rtabout-narrative__closing { font-size: 17px; }
    .ipanel-rtsub--about .rtabout-hero__visual { aspect-ratio: 1 / 1.08; min-height: auto; }
    .ipanel-rtsub--about .rtabout-hero__visual figcaption {
        font-size: 10px;
        bottom: 22px;
        left: 18px;
        right: 18px;
    }

    .ipanel-rtsub--about .rtabout-featIntro { padding: 88px 22px 58px; }
    .ipanel-rtsub--about .rtabout-featIntro__title,
    .ipanel-rtsub--about .rtabout-flow__title { font-size: 36px; }
    .ipanel-rtsub--about .rtabout-featIntro__lead { text-align: left; font-size: 13px; }
    .ipanel-rtsub--about .rtabout-featIntro__lead br { display: none; }

    .ipanel-rtsub--about .rtabout-featList {
        width: calc(100% - 44px);
        margin-bottom: 90px;
    }
    .ipanel-rtsub--about .rtabout-featRow {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        min-height: auto;
        padding: 55px 0;
    }
    .ipanel-rtsub--about .rtabout-featRow::after { display: none; }
    .ipanel-rtsub--about .rtabout-featRow__no {
        position: absolute;
        top: 55px;
        right: 0;
        padding: 0;
        font-size: 50px;
        opacity: .35;
    }
    .ipanel-rtsub--about .rtabout-featRow__symbol {
        align-self: center;
        width: 170px;
        height: 170px;
    }
    .ipanel-rtsub--about .rtabout-featRow__symbol span {
        width: 82px;
        height: 82px;
        font-size: 19px;
    }
    /* grid/flex の子は min-width:auto なので、長い本文で行がはみ出さないよう明示的に 0 にする
       (054 の送料表で踏んだのと同じ罠) */
    .ipanel-rtsub--about .rtabout-featRow__content { min-width: 0; width: 100%; }
    .ipanel-rtsub--about .rtabout-featRow__title { padding-right: 40px; font-size: 30px; }
    .ipanel-rtsub--about .rtabout-featRow__caption { font-size: 16px; line-height: 1.7; }
    .ipanel-rtsub--about .rtabout-featRow__body { font-size: 13px; }

    .ipanel-rtsub--about .rtabout-flow { padding: 88px 22px; }
    .ipanel-rtsub--about .rtabout-flow__lead { font-size: 13px; }
    .ipanel-rtsub--about .rtabout-journey {
        display: block;
        width: 100%;
        margin-top: 58px;
        border-top: 0;
        border-left: 1px solid #d9cdbd;
    }
    .ipanel-rtsub--about .rtabout-journey::before {
        top: 0;
        left: -1px;
        width: 2px;
        height: 33.333%;
    }
    .ipanel-rtsub--about .rtabout-journey__item {
        text-align: left;
        padding: 0 0 44px 35px;
        border-right: 0;
    }
    .ipanel-rtsub--about .rtabout-journey__item::before { top: 5px; left: -6px; }
    .ipanel-rtsub--about .rtabout-journey__item strong { font-size: 30px; }
    .ipanel-rtsub--about .rtabout-journey__end {
        width: 100%;
        padding-top: 22px;
        text-align: left;
        line-height: 1.8;
    }

    .ipanel-rtsub--about .rtabout-cta { padding: 90px 22px; }
    .ipanel-rtsub--about .rtabout-cta__title { font-size: 34px; }
    .ipanel-rtsub--about .rtabout-cta__brandline { flex-direction: column; gap: 14px; }
    .ipanel-rtsub--about .rtabout-cta__logo { width: 160px; }
    .ipanel-rtsub--about .rtabout-cta__actions { flex-direction: column; align-items: center; }
    .ipanel-rtsub--about .rtabout-cta__actions a { width: 100%; max-width: 310px; }
}

/* --- 760px 以下: モック側で 640 の後ろに置かれている追い込み用の上書き --- */
@media screen and (max-width: 760px) {
    .ipanel-rtsub--about .rtabout-hero { min-height: 0; }
    .ipanel-rtsub--about .rtabout-hero__copy { padding: 62px 22px 54px; }
    .ipanel-rtsub--about .rtabout-hero__lead { font-size: clamp(31px, 9.5vw, 38px); }
    .ipanel-rtsub--about .rtabout-hero__visual {
        aspect-ratio: 2;
        min-height: 0;
        background: #fff;
    }
    .ipanel-rtsub--about .rtabout-hero__visual img {
        position: absolute;
        inset: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        transform: none;
        object-fit: contain;
        object-position: center;
    }
    .ipanel-rtsub--about .rtabout-hero__visual::after { display: none; }
    .ipanel-rtsub--about .rtabout-hero__visual figcaption {
        padding: 8px 12px;
        bottom: 10px;
        left: 12px;
        right: 12px;
    }

    .ipanel-rtsub--about .rtabout-featIntro { padding: 78px 22px 52px; }
    .ipanel-rtsub--about .rtabout-featList { width: calc(100% - 40px); }
    .ipanel-rtsub--about .rtabout-featRow { padding: 48px 0; }
    .ipanel-rtsub--about .rtabout-featRow__symbol { width: 150px; height: 150px; }
    .ipanel-rtsub--about .rtabout-flow { padding: 78px 22px; }
}