/**
 * ヘルプ（/guide/ 配下）専用スタイル。
 *
 * help.php はテーマのマークアップを使わない自己完結HTMLで、テーマCSSは
 * repoton_dequeue_foreign_styles() で断っている。よってここが唯一の見た目の定義。
 *
 * 【設計方針】LP（lp.css・E案「ボールド」）と同じ言語で書く。具体的には
 *   - 青ベタ(#1089EF)の面 ＋ 白文字
 *   - Noto Sans JP 900 の巨大タイポ（clamp）
 *   - 縁取り文字（-webkit-text-stroke）
 *   - 2px の太い罫で仕切る行組み（lp.css の .rlp-row と同じ作り）
 *   - 白の完全丸ピル（border-radius: 999px）のCTA
 *   - 青いカード ＋ マスコット白抜きの透かし
 * 淡い枠線のカードや細字は使わない。読ませる本文だけを白地に置く。
 *
 * リセットは .rhp の内側に閉じて管理バーを壊さない。テーマと競合しないので
 * !important は不要。詳細度は「後から書いたものが勝つ」で足りる範囲に収める。
 */

body.rhp-body { margin: 0; background: #fff; }

.rhp {
    --h-blue: #1089EF;
    --h-deep: #0A6BC2;
    --h-ink: #0B1B2B;
    --h-sub: #5D6B79;
    --h-line: #E2E8F0;
    --h-paper: #F4F8FC;
    --h-pale: #EAF4FE;

    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    color: var(--h-ink);
    line-height: 1.9;
    font-feature-settings: "palt";
    overflow-x: clip;
}
.rhp, .rhp *, .rhp *::before, .rhp *::after { margin: 0; padding: 0; box-sizing: border-box; }
.rhp img { max-width: 100%; height: auto; }

/* ヘッダーは assets/header.css（templates/parts/header.php）に移した。LPと共有している */

/* ===== 目次ページのヒーロー（LPのヒーローと同じ組み） ===== */
.rhp-hero {
    background: var(--h-blue); color: #fff;
    padding: 7vh max(28px, 5vw) 8vh;
    position: relative; overflow: hidden;
}
.rhp-hero-in { max-width: 1080px; margin: 0 auto; position: relative; }
.rhp-hero h1 {
    font-size: clamp(2.4rem, 7.6vw, 5.4rem);
    font-weight: 900; line-height: 1.24; letter-spacing: 0.01em;
}
.rhp-out { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.85); }
.rhp-hero p {
    margin-top: 26px; max-width: 34em;
    font-size: clamp(0.95rem, 1.7vw, 1.1rem); font-weight: 700;
}
/* LPと同じマスコット白抜きの透かし。絵を差し替えるときは mascot-white.png も作り直す */
.rhp-mascot {
    position: absolute; right: 2vw; bottom: -3vh;
    width: clamp(150px, 20vw, 300px); aspect-ratio: 1 / 1;
    background: url(mascot-white.png) right bottom / contain no-repeat;
    opacity: 0.14;
    pointer-events: none; user-select: none;
}

/* ===== 下層ページの青帯 ===== */
.rhp-bar {
    background: var(--h-blue); color: #fff;
    padding: 44px max(28px, 5vw) 48px;
}
.rhp-bar-in { max-width: 1080px; margin: 0 auto; }
.rhp-crumb { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.7); }
.rhp .rhp-crumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.rhp .rhp-crumb a:hover { color: #fff; }
.rhp-crumb span { margin: 0 8px; color: rgba(255,255,255,0.4); }
.rhp-title {
    margin-top: 10px;
    font-size: clamp(1.8rem, 4.6vw, 3.1rem); font-weight: 900; line-height: 1.35;
}

/* ===== レイアウト ===== */
.rhp-wrap {
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    max-width: 1080px; margin: 0 auto; padding: 56px max(28px, 5vw) 30px;
}

/* ===== サイドバー ===== */
.rhp-side { position: sticky; top: 30px; align-self: start; }
.rhp-side-title {
    margin-bottom: 14px; padding-left: 12px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; color: #A5B4C0;
}
.rhp .rhp-side-link {
    display: block; padding: 9px 12px; margin-bottom: 2px;
    font-size: 0.88rem; font-weight: 700; color: var(--h-sub);
    text-decoration: none; border-radius: 9px;
    transition: background 0.14s, color 0.14s;
}
.rhp .rhp-side-link:hover { background: var(--h-paper); color: var(--h-ink); }
.rhp .rhp-side-link.on { background: var(--h-pale); color: var(--h-blue); }

/* ===== 本文 ===== */
.rhp-content a { color: var(--h-blue); font-weight: 700; }
.rhp-content a:not(.g-row):not(.wp-block-button__link) { text-decoration: underline; text-underline-offset: 3px; }
/* 見出しはLPの行組みと同じ2pxの太い罫で仕切る */
.rhp-content h2 {
    margin: 2.6em 0 0.9em; padding-top: 26px;
    border-top: 2px solid var(--h-ink);
    font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 900; line-height: 1.55;
}
.rhp-content h2:first-child { margin-top: 0; }
.rhp-content h2 b { color: var(--h-blue); }
.rhp-content h3 { margin: 2em 0 0.6em; font-size: 1.08rem; font-weight: 800; }
.rhp-content p { margin: 1em 0; }
.rhp-content ul, .rhp-content ol { margin: 1.1em 0 1.5em; padding-left: 1.4em; }
.rhp-content li { margin-bottom: 0.55em; }
.rhp-content li::marker { color: var(--h-blue); font-weight: 700; }
.rhp-content strong { font-weight: 900; }

/* 注意書き（Cocoonのブロックをそのまま流用しているのでクラス名は受ける） */
.rhp-content .blank-box,
.rhp-content .block-box {
    margin: 1.9em 0; padding: 24px 28px;
    background: var(--h-paper); border-radius: 18px;
}
.rhp-content .blank-box p:first-child,
.rhp-content .block-box p:first-child { margin-top: 0; }
.rhp-content .blank-box p:last-child,
.rhp-content .block-box p:last-child { margin-bottom: 0; }

/* ボタン（LPのCTAと同じ完全丸ピル・900ウェイト） */
.rhp-content .wp-block-buttons { display: flex; justify-content: center; margin: 2.6em 0; }
.rhp-content .wp-block-button__link {
    display: inline-block; text-decoration: none;
    font-weight: 900; font-size: 1.02rem; color: #fff;
    background: var(--h-blue); border-radius: 999px; padding: 17px 44px;
    transition: transform 0.15s, background 0.15s;
}
.rhp-content .wp-block-button__link:hover { transform: translateY(-2px); background: var(--h-deep); }

/* ===== 目次ページの行組み（lp.css の .rlp-row と同じ作り） ===== */
.rhp .g-row {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center;
    padding: 26px 6px; border-top: 2px solid var(--h-ink);
    text-decoration: none; color: inherit;
    transition: background 0.2s, padding-left 0.2s;
}
.rhp .g-row:last-child { border-bottom: 2px solid var(--h-ink); }
.rhp .g-row:hover { background: rgba(16,137,239,0.06); padding-left: 18px; }
.g-no { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--h-blue); }
.g-tt { font-size: clamp(1.05rem, 2.3vw, 1.45rem); font-weight: 900; line-height: 1.5; }
.g-dd { font-size: 0.84rem; font-weight: 500; line-height: 1.8; color: var(--h-sub); max-width: 330px; text-align: right; }

/* 旧レイアウト向けの戻り導線はサイドバーがあるので出さない */
.rhp .g-back { display: none; }

/* ===== クロージング（LPの青カードと同じ） ===== */
.rhp-last { padding: 90px max(28px, 5vw) 100px; }
.rhp-last-in {
    max-width: 1080px; margin: 0 auto;
    background: var(--h-blue); border-radius: 28px; padding: 66px 40px;
    text-align: center; position: relative; overflow: hidden;
}
.rhp-last-in::after {
    content: ""; position: absolute; right: 6px; bottom: -14px;
    width: clamp(120px, 15vw, 190px); aspect-ratio: 1 / 1;
    background: url(mascot-white.png) right bottom / contain no-repeat;
    opacity: 0.18; pointer-events: none;
}
.rhp-last h2 {
    position: relative; color: #fff;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem); font-weight: 900; line-height: 1.5;
    margin-bottom: 28px;
}
.rhp .rhp-last-cta {
    position: relative;
    display: inline-block; text-decoration: none; font-weight: 900; font-size: 1.02rem;
    color: var(--h-blue); background: #fff; border-radius: 999px; padding: 17px 44px;
    transition: transform 0.15s;
}
.rhp .rhp-last-cta:hover { transform: translateY(-2px); }
.rhp-last small {
    position: relative; display: block; margin-top: 16px;
    font-size: 0.78rem; color: rgba(255,255,255,0.75);
}

/* ===== フッター（LPと同じ） ===== */
.rhp-foot {
    background: var(--h-paper); color: var(--h-sub);
    padding: 30px max(28px, 5vw);
    display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
    font-size: 0.74rem;
}
.rhp-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.rhp .rhp-foot a { color: var(--h-sub); text-decoration: none; }
.rhp .rhp-foot a:hover { color: var(--h-ink); }

/* ===== モバイル ===== */
@media (max-width: 880px) {
    .rhp-wrap { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
    /* 罫は下の行組み（.g-row の border-top）が引くので、ここでは引かない。
       両方引くと2pxの線が2本並んで見える */
    .rhp-side { position: static; padding-bottom: 4px; }
    .rhp-side nav { display: flex; flex-wrap: wrap; gap: 6px; }
    .rhp .rhp-side-link {
        padding: 7px 15px; margin: 0;
        border: 1.5px solid var(--h-line); border-radius: 999px; font-size: 0.8rem;
    }
    .rhp .rhp-side-link.on { border-color: transparent; }
    .rhp .g-row { grid-template-columns: 48px 1fr; gap: 8px 16px; padding: 22px 4px; }
    .g-dd { grid-column: 2; text-align: left; max-width: none; }
    /* 画面が狭いと透かしの主張が強くなるので、小さく薄くする */
    .rhp-mascot { width: 140px; right: -6px; bottom: -1vh; opacity: 0.11; }
    .rhp-last { padding: 60px max(20px, 4vw) 70px; }
    .rhp-last-in { padding: 48px 26px; border-radius: 22px; }
    .rhp-last-in::after { width: 100px; opacity: 0.15; }
}