/* ================================
   参加者ページ（/for-participants/）
   template-participant.php と template-participant-v2.php の共通スタイル。スコープ: .oe-pp
   - 書体はサイト共通の Noto Sans JP（このページ専用のフォントは読み込まない）
   - 色は 墨・紙・黄 の3色。土曜の青と日曜の赤だけを差し色に使う
   - グラデーション・ぼかした影・角丸のカードは使わず、罫線と余白で組む
   - 写真は assets/img/participants/（出力は template-parts/participants/photo.php、出典は THIRD-PARTY.md）
   - アイコンはテーマ共通の細線アイコン（assets/icons）を .oe-pp-ico で包んで使う
   - このページはヘッダー分の padding-top が付かないため、ヒーローで確保する
================================ */

.oe-pp {
    --pp-ink: #1a1a1a;
    --pp-text: #33312e;
    --pp-muted: #6b6860;
    --pp-paper: #f6f3ec;
    --pp-line: rgba(26, 26, 26, .18);
    --pp-yellow: #ffcc02;
    --pp-red: #d9432f;
    --pp-blue: #3848a0;
    --pp-header: 96px;
    --pp-gap: 104px;

    background: var(--pp-paper);
    color: var(--pp-text);
    font-size: 16px;
    line-height: 2;
    letter-spacing: .04em;
    line-break: strict;
    overflow-x: hidden;
    overflow-x: clip;
}

/* 詳細度0のリセット（各要素の指定を優先させる） */
.oe-pp :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.oe-pp :where(ul, ol) { padding: 0; list-style: none; }
.oe-pp :where(h1, h2, h3) { color: var(--pp-ink); font-feature-settings: "palt"; }
.oe-pp :where(a, summary):focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 4px; }

.oe-pp [id] { scroll-margin-top: var(--pp-header); }

/* 見出しの改行位置を制御（日本語の1文字だけ改行を防ぐ） */
.oe-pp .nb { display: inline-block; }

.oe-pp__container {
    width: 100%;
    max-width: 1168px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Section base ---------- */
.oe-pp__section { padding: var(--pp-gap) 0; }
.oe-pp__section--white { background: #fff; }
.oe-pp__section--ink { background: var(--pp-ink); color: #dcd8ce; }

/* 同じ地色が続くセクションは、地色を変えずに罫線で区切る */
.oe-pp__section--ruled { padding-top: 0; }
.oe-pp__section--ruled > .oe-pp__container::before {
    content: '';
    display: block;
    margin-bottom: var(--pp-gap);
    border-top: 1px solid var(--pp-line);
}

.oe-pp__head { margin-bottom: 56px; }

.oe-pp__label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
    color: var(--pp-ink);
}
.oe-pp__label::before {
    content: '';
    flex: none;
    width: 28px;
    border-top: 1px solid currentColor;
}

.oe-pp__title {
    font-size: clamp(26px, 3.3vw, 40px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
}

.oe-pp__lead {
    max-width: 760px;
    margin-top: 24px;
    line-height: 2.1;
}

/* 左に見出し、右に内容を置く2段組み */
.oe-pp-cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px 80px;
    align-items: start;
}
.oe-pp-cols > .oe-pp__head { margin-bottom: 0; }
/* 見出しの列が狭いので、1行に収まる大きさまで下げる */
.oe-pp-cols .oe-pp__title { font-size: clamp(26px, 2.9vw, 36px); }

/* ---------- Buttons / links ---------- */
.oe-pp__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
}

.oe-pp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 60px;
    padding: 0 26px 0 32px;
    border-radius: 999px;
    background: var(--pp-ink);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background-color .2s ease;
}
.oe-pp__btn:hover { background: #45423c; color: #fff; }

.oe-pp__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    box-shadow: 0 1px 0 currentColor;
    color: var(--pp-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .06em;
    text-decoration: none;
}
.oe-pp__link:hover { color: var(--pp-ink); box-shadow: 0 2px 0 currentColor; }

/* 枠だけの小さなラベル（「初参加向き」「例：2時間」など） */
.oe-pp__tag {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid var(--pp-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .08em;
    color: var(--pp-ink);
}

/* 本文のあとに添えるひとこと */
.oe-pp-note {
    margin-top: 56px;
    font-weight: 700;
    line-height: 2.1;
    color: var(--pp-ink);
}
.oe-pp-note::before {
    content: '';
    display: block;
    width: 28px;
    margin-bottom: 18px;
    border-top: 1px solid currentColor;
}

/* ---------- 写真・アイコン ---------- */
/* 高さの決まった枠ではトリミングして埋め、決まっていない枠では元の縦横比で表示される */
.oe-pp :where(picture) { display: block; }
.oe-pp :where(picture) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 写真の注記（※写真はイメージです） */
.oe-pp__caption {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pp-muted);
}

/* 細線アイコン。黄色い丸を右下に少しずらして敷く */
.oe-pp-ico {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 60px;
    height: 60px;
}
.oe-pp-ico::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pp-yellow);
}
.oe-pp-ico img { position: relative; width: 52px; height: 52px; }
.oe-pp-ico--sm { width: 48px; height: 48px; }
.oe-pp-ico--sm::before { width: 30px; height: 30px; }
.oe-pp-ico--sm img { width: 42px; height: 42px; }
/* 黄色い面の上では丸を白に */
.oe-pp-ico--on-yellow::before { background: #fff; }

.oe-pp__arrow { transition: transform .2s ease; }
a:hover .oe-pp__arrow { transform: translateX(4px); }
a:hover .oe-pp__arrow--down { transform: translateY(3px); }
a:hover .oe-pp__arrow--up { transform: translateY(-3px); }

/* ---------- Hero ---------- */
/* 4列グリッド：左右の余白＋コピー＋手帳。黄色の面は手帳の列から画面の右端まで敷く。
   面の上端に夕方の写真を置き、その下端に手帳を重ねる（夕方 → 予定） */
.oe-pp-hero {
    --pp-hero-w: min(1120px, 100% - 48px);
    display: grid;
    grid-template-columns: 1fr calc(var(--pp-hero-w) * .55) calc(var(--pp-hero-w) * .45) 1fr;
}
.oe-pp-hero::before {
    content: '';
    grid-area: 1 / 3 / 2 / 5;
    background: var(--pp-yellow);
}

.oe-pp-hero__copy {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    padding: calc(var(--pp-header) + 64px) 40px 96px 0;
}

.oe-pp-hero__title {
    font-size: clamp(48px, 5.4vw, 68px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .02em;
}
/* 句点を夕日の色に */
.oe-pp-hero__dot { color: var(--pp-red); }

.oe-pp-hero__lead {
    margin: 32px 0 44px;
    line-height: 2.1;
}

.oe-pp-hero__photo {
    grid-area: 1 / 3 / 2 / 5;
    align-self: start;
    height: 300px;
}
/* 夕日が切れない位置でトリミングする */
.oe-pp-hero__photo img { object-position: 50% 25%; }

.oe-pp-hero__plan {
    position: relative;
    grid-area: 1 / 3 / 2 / 4;
    align-self: start;
    padding: 228px 0 56px 48px;
}

/* ヒーロー右：バーチカル手帳ふうの「今週末の予定」。1行＝1時間（10時〜17時台） */
.oe-pp-plan {
    padding: 20px 18px 18px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(26, 26, 26, .08), 0 20px 30px -22px rgba(26, 26, 26, .55);
}

.oe-pp-plan__cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 12px;
    border-bottom: 2px solid var(--pp-ink);
}
.oe-pp-plan__cap-title { font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--pp-ink); }
.oe-pp-plan__cap-note { font-size: 12px; color: var(--pp-muted); }

.oe-pp-plan__grid {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto repeat(8, minmax(48px, auto));
    border-bottom: 1px solid var(--pp-line);
}
/* 土曜と日曜の境界線 */
.oe-pp-plan__grid::before {
    content: '';
    grid-area: 1 / 3 / -1 / 4;
    border-left: 1px solid var(--pp-line);
}

.oe-pp-plan__day {
    grid-row: 1;
    padding: 10px 10px 8px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}
.oe-pp-plan__day--sat { grid-column: 2; color: var(--pp-blue); }
.oe-pp-plan__day--sun { grid-column: 3; color: var(--pp-red); }
.oe-pp-plan__day small { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; }

.oe-pp-plan__hour {
    grid-column: 1 / -1;
    padding: 5px 0 0 2px;
    border-top: 1px solid var(--pp-line);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--pp-muted);
    font-variant-numeric: tabular-nums;
}
/* 17時台＝夕方 */
.oe-pp-plan__hour--evening { background: #ffe6cf; color: #a8481f; font-weight: 700; }

.oe-pp-plan__entry {
    margin: 3px 5px;
    padding: 7px 9px;
    border-radius: 3px;
    background: var(--pp-yellow);
    color: var(--pp-ink);
    letter-spacing: 0;
}
.oe-pp-plan__entry--game { grid-area: 6 / 2 / 8 / 3; }  /* 土 14:00–16:00 */
.oe-pp-plan__entry--walk { grid-area: 2 / 3 / 4 / 4; }  /* 日 10:00–12:00 */
/* 日 15:00〜夕方：まだ決めていない「空白」。手帳の斜線で表す */
.oe-pp-plan__entry--blank {
    grid-area: 7 / 3 / 10 / 4;
    border: 1px dashed rgba(26, 26, 26, .5);
    background:
        repeating-linear-gradient(-45deg, transparent 0 7px, rgba(26, 26, 26, .12) 7px 8px),
        rgba(255, 255, 255, .72);
}

.oe-pp-plan__time,
.oe-pp-plan__name,
.oe-pp-plan__meta { display: block; }
.oe-pp-plan__time { font-size: 11px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.oe-pp-plan__name { font-size: 14px; font-weight: 700; line-height: 1.45; }
.oe-pp-plan__meta { margin-top: 2px; font-size: 11px; line-height: 1.5; color: #4a463d; }

/* ---------- あるあるチェック ---------- */
.oe-pp-checks { border-top: 2px solid var(--pp-ink); }

.oe-pp-check {
    --pp-check-pad: 26px;
    position: relative;
    padding: var(--pp-check-pad) 0 var(--pp-check-pad) 54px;
    border-bottom: 1px solid var(--pp-line);
}
/* 説明文のない1行だけの項目（v2） */
.oe-pp-checks--compact .oe-pp-check { --pp-check-pad: 19px; }
.oe-pp-check::before {
    content: '';
    position: absolute;
    top: calc(var(--pp-check-pad) + 6px);
    left: 4px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pp-ink);
    background: #fff;
}
/* ペンで入れたチェック（枠から少しはみ出す） */
.oe-pp-check::after {
    content: '';
    position: absolute;
    top: calc(var(--pp-check-pad) - 4px);
    left: 2px;
    width: 34px;
    height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7 20l6 7L31 5' fill='none' stroke='%23d9432f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.oe-pp-check__title { font-size: 19px; font-weight: 700; line-height: 1.6; }
.oe-pp-check__text { margin-top: 6px; font-size: 15px; line-height: 1.9; }

/* ---------- 足し算（やること＋集まる理由＋行く場所＝軽い予定） ---------- */
.oe-pp-sum {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .8fr);
    gap: 64px;
}

.oe-pp-sum > li { position: relative; }
.oe-pp-sum > li + li::before {
    content: '＋';
    position: absolute;
    top: 50%;
    left: -32px;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--pp-ink);
}
.oe-pp-sum > .oe-pp-sum__result::before { content: '＝'; }

.oe-pp-sum__term {
    padding-top: 22px;
    border-top: 2px solid var(--pp-ink);
}
.oe-pp-sum__term .oe-pp-ico { margin-bottom: 12px; }
.oe-pp-sum__title { font-size: 15px; font-weight: 500; line-height: 1.6; }
.oe-pp-sum__title b { display: block; font-size: 27px; font-weight: 800; letter-spacing: .05em; }
.oe-pp-sum__text { margin-top: 12px; font-size: 14.5px; line-height: 1.9; }

.oe-pp-sum__result {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 24px 16px;
    background: var(--pp-yellow);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .06em;
    color: var(--pp-ink);
    text-align: center;
}

/* ---------- Story（墨の帯）。文章と写真を左右交互に置く ---------- */
.oe-pp-story { display: grid; gap: 88px; }

.oe-pp-story__row {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: 72px;
}
/* 2段目は写真を左に */
.oe-pp-story__row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.oe-pp-story__row--flip .oe-pp-story__photo { order: -1; }
/* 窓の写真（story-window）は、暗い部分を帯の色 --pp-ink に合わせて書き出してあるので枠が見えない。
   帯の色を変えるときは写真も書き出し直す */

.oe-pp-story__title {
    font-size: clamp(20px, 2.1vw, 25px);
    font-weight: 700;
    line-height: 1.7;
    color: #fff;
}
.oe-pp-story__text { margin-top: 20px; font-size: 15.5px; line-height: 2.15; }

.oe-pp-story__quote {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: clamp(28px, 5.4vw, 66px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .04em;
    font-feature-settings: "palt";
    color: var(--pp-yellow);
}

/* 墨の帯に置く導入文（v2） */
.oe-pp-statement {
    max-width: 36em;
    font-size: clamp(17px, 2vw, 23px);
    font-weight: 500;
    line-height: 2.2;
    color: #fff;
}
.oe-pp-statement strong { font-weight: 700; color: var(--pp-yellow); }

/* ---------- 誤解 × ／ 実際 ○（v2） ---------- */
.oe-pp-compare {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.oe-pp-compare__item { padding: 36px 44px 44px; }
/* 「誤解」は下にそろえて、× と ○ の見出しを同じ高さに並べる（「実際」は上に写真が載るぶん高い） */
.oe-pp-compare__item--wrong { align-self: end; padding-left: 0; border-top: 2px solid var(--pp-ink); }
.oe-pp-compare__item--right { padding: 0; background: var(--pp-yellow); color: var(--pp-ink); }
.oe-pp-compare__photo { height: 240px; }
.oe-pp-compare__body { padding: 32px 44px 44px; }

.oe-pp-compare__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    color: var(--pp-ink);
}
.oe-pp-compare__mark { font-size: 30px; font-weight: 900; letter-spacing: 0; }
.oe-pp-compare__item--wrong .oe-pp-compare__mark { color: var(--pp-red); }

.oe-pp-compare__title { margin-top: 16px; font-size: 24px; font-weight: 700; line-height: 1.6; }
/* 誤解のほうは赤い取り消し線で打ち消す */
.oe-pp-compare__item--wrong .oe-pp-compare__title {
    color: var(--pp-muted);
    text-decoration: line-through;
    text-decoration-color: var(--pp-red);
    text-decoration-thickness: 2px;
}
.oe-pp-compare__text { margin-top: 12px; font-size: 15px; }

/* ---------- 趣味がある人／ない人 ---------- */
.oe-pp-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2px solid var(--pp-ink);
}

.oe-pp-path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 56px 0 0;
}
.oe-pp-path + .oe-pp-path {
    padding: 40px 0 0 56px;
    border-left: 1px solid var(--pp-line);
}

.oe-pp-path__who {
    padding: 2px 12px;
    background: var(--pp-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #fff;
}
.oe-pp-path__catch {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    font-feature-settings: "palt";
    color: var(--pp-ink);
}
.oe-pp-path__text { flex: 1; margin-top: 10px; font-size: 15px; }
.oe-pp-path .oe-pp__link { margin-top: 24px; }

/* 箇条書き（v2）。行頭は短い横線 */
.oe-pp-path__list {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 8px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.9;
}
.oe-pp-path__list li { position: relative; padding-left: 24px; }
.oe-pp-path__list li::before {
    content: '';
    position: absolute;
    top: .95em;
    left: 0;
    width: 12px;
    border-top: 2px solid var(--pp-ink);
}

/* ---------- 初参加ガイド ---------- */
/* 輪から離れた1つのコマの写真。その下に、コマのつぶやきとして不安を並べる */
.oe-pp-guide__photo { max-width: 480px; margin-top: 32px; }
.oe-pp-guide__photo + .oe-pp-mutters { margin-top: 24px; }
/* 右の列：答えの1行目を、左の見出しの1行目にそろえる（左は見出しの上に小さなラベルがある） */
.oe-pp-guide__side { padding-top: 39px; }

/* 不安のつぶやき。行頭を少しずつずらして、独り言が浮かんでいるように見せる */
.oe-pp-mutters {
    display: grid;
    gap: 4px;
    margin-top: 36px;
    font-size: 18px;
    font-weight: 500;
    color: var(--pp-ink);
}
.oe-pp-mutters li:nth-child(2) { margin-left: 2.6em; }
.oe-pp-mutters li:nth-child(3) { margin-left: .9em; }
.oe-pp-mutters li:nth-child(4) { margin-left: 3.8em; }
.oe-pp-mutters li:nth-child(5) { margin-left: 1.7em; }
/* 見出しの右の列に置くとき（v2）は上の余白を取らない */
.oe-pp-cols > div > .oe-pp-mutters:first-child { margin-top: 0; }

/* 不安への答え。右の列で「選び方」の箱の見出しになる */
.oe-pp-guide__answer {
    margin-bottom: 28px;
    font-size: 20px;
    font-weight: 700;
    line-height: 2;
    color: var(--pp-ink);
}
/* 強調は傍点で */
.oe-pp-guide__answer em {
    font-style: normal;
    -webkit-text-emphasis: filled dot var(--pp-red);
    text-emphasis: filled dot var(--pp-red);
}

.oe-pp-rules {
    padding: 40px 40px 14px;
    background: var(--pp-paper);
}
.oe-pp-rules__title {
    padding-bottom: 18px;
    border-bottom: 2px solid var(--pp-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}

.oe-pp-rule {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--pp-line);
}
.oe-pp-rule:last-child { border-bottom: 0; }
.oe-pp-rule .oe-pp-ico { margin-left: 16px; }

.oe-pp-num {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: var(--pp-ink);
}

.oe-pp-rule__title { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--pp-ink); }
.oe-pp-rule__text { font-size: 14.5px; line-height: 1.8; }

/* 「こういうときは → こう選ぶ」の対応表（v2） */
.oe-pp-rules--wide { max-width: 760px; margin-top: 64px; }
.oe-pp-map__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 56px;
    padding: 18px 0;
    border-bottom: 1px solid var(--pp-line);
}
.oe-pp-map__row:last-child { border-bottom: 0; }
.oe-pp-map dt { font-weight: 700; color: var(--pp-ink); }
.oe-pp-map dd { position: relative; }
.oe-pp-map dd::before {
    content: '→';
    position: absolute;
    left: -38px;
    font-weight: 700;
    color: var(--pp-red);
}

/* ---------- おすすめ（行ごとのリンク）。写真｜名前｜説明｜リンク ---------- */
.oe-pp-recs { border-top: 2px solid var(--pp-ink); }

.oe-pp-rec {
    display: grid;
    grid-template-columns: 210px 200px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 36px;
    padding: 20px 24px 20px 0;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-text);
    text-decoration: none;
    transition: background-color .2s ease;
}
.oe-pp-rec:hover { background: var(--pp-yellow); color: var(--pp-ink); }

.oe-pp-rec__photo { aspect-ratio: 3 / 2; overflow: hidden; }
.oe-pp-rec__photo img { transition: transform .4s ease; }
.oe-pp-rec:hover .oe-pp-rec__photo img { transform: scale(1.04); }

.oe-pp-rec__name {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .05em;
    font-feature-settings: "palt";
    color: var(--pp-ink);
}

.oe-pp-rec__tags { display: block; font-size: 13px; font-weight: 700; color: var(--pp-ink); }
.oe-pp-rec__tags span + span::before { content: '／'; margin: 0 .4em; font-weight: 400; }
.oe-pp-rec__desc { display: block; font-size: 15px; line-height: 1.9; }

.oe-pp-rec__go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--pp-ink);
}

/* ---------- 参加の流れ ---------- */
.oe-pp-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--pp-ink);
}

.oe-pp-flow__step {
    position: relative;
    padding: 28px 24px 0;
    border-left: 1px solid var(--pp-line);
}
.oe-pp-flow__step:first-child { padding-left: 0; border-left: 0; }
/* アイコンは番号と同じ段の右端に置く */
.oe-pp-flow__icon { position: absolute; top: 20px; right: 20px; }

.oe-pp-flow__title { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.5; }
.oe-pp-flow__text { margin-top: 6px; font-size: 14.5px; line-height: 1.8; }

/* 3項目で使うとき（v2 の「外しにくい選び方」） */
.oe-pp-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oe-pp-flow__step .oe-pp__tag { margin-top: 14px; }

/* ---------- 実際の声（吹き出し） ---------- */
.oe-pp-voices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}
/* 高さをそろえず、少しずつずらして並べる */
.oe-pp-voice:nth-child(2) { margin-top: 44px; }
.oe-pp-voice:nth-child(3) { margin-top: 16px; }

.oe-pp .oe-pp-voice__text {
    position: relative;
    padding: 24px 26px;
    border: 1.5px solid var(--pp-ink);
    border-radius: 18px;
    background: #fff;
    font-size: 15.5px;
    font-style: normal;
    line-height: 2;
    color: var(--pp-ink);
}
.oe-pp .oe-pp-voice__text::before { content: none; }
/* 吹き出しのしっぽ */
.oe-pp .oe-pp-voice__text::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 36px;
    width: 16px;
    height: 16px;
    border: solid var(--pp-ink);
    border-width: 0 1.5px 1.5px 0;
    background: #fff;
    transform: rotate(45deg);
}

.oe-pp-voice__result {
    display: flex;
    gap: 8px;
    margin: 22px 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--pp-ink);
}
.oe-pp-voice__result::before { content: '→'; flex: none; color: var(--pp-red); }

/* ---------- よくある質問（v2） ---------- */
.oe-pp-faq { border-top: 2px solid var(--pp-ink); }
.oe-pp-faq__item { border-bottom: 1px solid var(--pp-line); }

.oe-pp-faq__q {
    position: relative;
    display: block;
    padding: 24px 44px 24px 42px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--pp-ink);
    cursor: pointer;
    list-style: none;
}
.oe-pp-faq__q::-webkit-details-marker { display: none; }
.oe-pp-faq__q::before,
.oe-pp-faq__a::before {
    position: absolute;
    left: 0;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}
.oe-pp-faq__q::before { content: 'Q'; top: 27px; }
/* 開閉の ＋／−（開いているときは縦棒を消す） */
.oe-pp-faq__q::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background:
        linear-gradient(var(--pp-ink), var(--pp-ink)) center / 100% 2px no-repeat,
        linear-gradient(var(--pp-ink), var(--pp-ink)) center / 2px 100% no-repeat;
}
.oe-pp-faq__item[open] .oe-pp-faq__q::after { background-size: 100% 2px, 0 0; }

.oe-pp-faq__a {
    position: relative;
    padding: 0 44px 28px 42px;
    font-size: 15px;
}
.oe-pp-faq__a::before { content: 'A'; top: 4px; color: var(--pp-red); }

/* ---------- Final CTA（黄の帯） ---------- */
.oe-pp-cta {
    padding: 96px 0;
    background: var(--pp-yellow);
    color: var(--pp-ink);
}

.oe-pp-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px 64px;
}

.oe-pp-cta__title {
    font-size: clamp(26px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .05em;
}
/* 3行の長い見出し（v2） */
.oe-pp-cta__title--long { font-size: clamp(19px, 2.3vw, 28px); line-height: 1.9; }
.oe-pp-cta__text { margin-top: 14px; font-weight: 500; }

.oe-pp-cta .oe-pp__actions {
    flex-direction: column;
    align-items: flex-start;
}
.oe-pp-cta .oe-pp__btn { min-width: 280px; }

/* ---------- Responsive ---------- */
@media (max-width: 959px) {
    .oe-pp { --pp-gap: 80px; }

    /* ヒーローは縦積み。黄色の面は写真と手帳の段だけに敷く */
    .oe-pp-hero { grid-template-columns: 1fr var(--pp-hero-w) 1fr; }
    .oe-pp-hero::before { grid-area: 2 / 1 / 3 / 4; }
    .oe-pp-hero__copy { grid-area: 1 / 2 / 2 / 3; padding: calc(var(--pp-header) + 40px) 0 56px; }
    .oe-pp-hero__title { font-size: clamp(34px, 10.6vw, 68px); }
    .oe-pp-hero__photo { grid-area: 2 / 1 / 3 / 4; height: 250px; }
    .oe-pp-hero__plan {
        grid-area: 2 / 2 / 3 / 3;
        justify-self: center;
        width: 100%;
        max-width: 520px;
        padding: 180px 0 52px;
    }

    .oe-pp-cols { grid-template-columns: minmax(0, 1fr); }
    .oe-pp-guide__side { padding-top: 0; }

    /* 足し算は縦積み。アイコンは文章の左に置く */
    .oe-pp-sum { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .oe-pp-sum > li + li::before { top: -28px; left: 50%; }
    .oe-pp-sum__term { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 20px; }
    .oe-pp-sum__term .oe-pp-ico { grid-row: 1 / span 2; margin: 0; }
    .oe-pp-sum__result { padding: 28px 16px; }

    /* 文章 → 写真の順に縦積み */
    .oe-pp-story { gap: 64px; }
    .oe-pp-story__row,
    .oe-pp-story__row--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .oe-pp-story__row--flip .oe-pp-story__photo { order: 0; }
    .oe-pp-story__photo { max-width: 560px; }
    .oe-pp-story__quote { margin-top: 56px; padding-top: 40px; }

    /* おすすめ：写真を左に、名前・説明・リンクを右に積む */
    .oe-pp-rec {
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        align-items: start;
        gap: 4px 28px;
        padding: 20px 12px 20px 0;
    }
    .oe-pp-rec__photo { grid-row: 1 / span 3; }
    .oe-pp-rec__go { margin-top: 6px; }

    .oe-pp-compare { grid-template-columns: minmax(0, 1fr); }
    .oe-pp-compare__item { padding: 32px 0 36px; }
    .oe-pp-compare__item--right { padding: 0; }
    .oe-pp-compare__photo { height: 220px; }
    .oe-pp-compare__body { padding: 28px 28px 36px; }

    /* 4ステップは2列×2段に。3項目（v2）は3列のまま */
    .oe-pp-flow:not(.oe-pp-flow--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .oe-pp-flow:not(.oe-pp-flow--3) .oe-pp-flow__step:nth-child(odd) { padding-left: 0; border-left: 0; }

    /* 吹き出しは会話のように左右へ振る */
    .oe-pp-voices { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 560px; }
    .oe-pp-voice,
    .oe-pp-voice:nth-child(3) { margin: 0 40px 0 0; }
    .oe-pp-voice:nth-child(2) { margin: 0 0 0 40px; }

    .oe-pp-cta__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .oe-pp { --pp-header: 84px; --pp-gap: 64px; font-size: 15px; }
    .oe-pp__container { padding: 0 20px; }
    .oe-pp__head { margin-bottom: 40px; }

    .oe-pp-hero { --pp-hero-w: calc(100% - 40px); }
    .oe-pp-hero__copy { padding: calc(var(--pp-header) + 28px) 0 48px; }
    .oe-pp-hero__lead { margin: 24px 0 36px; }
    .oe-pp-hero__photo { height: 200px; }
    .oe-pp-hero__plan { padding: 140px 0 44px; }
    .oe-pp-plan { padding: 16px 12px 14px; }
    .oe-pp-plan__grid { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); }
    .oe-pp-plan__entry { margin: 3px 4px; padding: 6px 8px; }

    .oe-pp__actions { flex-direction: column; align-items: flex-start; }
    .oe-pp__btn { width: 100%; }
    .oe-pp-cta .oe-pp__btn { min-width: 0; }

    .oe-pp-check { --pp-check-pad: 22px; padding-left: 48px; }
    .oe-pp-checks--compact .oe-pp-check { --pp-check-pad: 17px; }
    .oe-pp-check::before { top: calc(var(--pp-check-pad) + 5px); left: 2px; }
    .oe-pp-check::after { top: calc(var(--pp-check-pad) - 5px); left: 0; }
    .oe-pp-check__title { font-size: 17px; }
    .oe-pp-check__text { font-size: 14.5px; }

    .oe-pp-paths { grid-template-columns: minmax(0, 1fr); }
    .oe-pp-path { padding: 32px 0 0; }
    .oe-pp-path + .oe-pp-path {
        margin-top: 36px;
        padding: 36px 0 0;
        border-top: 1px solid var(--pp-line);
        border-left: 0;
    }
    .oe-pp-path__catch { font-size: 20px; }

    .oe-pp-mutters { margin-top: 28px; font-size: 17px; }
    .oe-pp-guide__answer { margin-bottom: 24px; font-size: 18px; }
    .oe-pp-rules { padding: 28px 20px 8px; }
    .oe-pp-rules__title { font-size: 18px; }
    .oe-pp-rule { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 16px 0; }
    .oe-pp-rule .oe-pp-ico { margin-left: 12px; }
    /* 列が狭いので、ここでは区切りを指定せず自然に折り返す */
    .oe-pp-rule__text .nb { display: inline; }
    .oe-pp-num { font-size: 34px; }

    .oe-pp-rec__name { font-size: 23px; }

    .oe-pp-rules--wide { margin-top: 48px; }
    .oe-pp-map__row { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
    .oe-pp-map dd { padding-left: 1.6em; }
    .oe-pp-map dd::before { left: 0; }

    /* 参加の流れ：番号を左、アイコンを右に置いた縦のリスト */
    .oe-pp .oe-pp-flow { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .oe-pp .oe-pp-flow__step {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        align-items: start;
        justify-items: start;
        padding: 20px 0;
        border-left: 0;
        border-bottom: 1px solid var(--pp-line);
    }
    /* 1段目：番号｜見出し｜アイコン。説明文は2段目から横いっぱいに使う */
    .oe-pp-flow__step > * { grid-column: 2 / 4; }
    .oe-pp-flow__step > .oe-pp-num { grid-column: 1; grid-row: 1 / span 3; padding-top: 7px; }
    .oe-pp-flow__step > .oe-pp-flow__title { grid-column: 2; grid-row: 1; align-self: center; }
    .oe-pp-flow__step > .oe-pp-flow__icon {
        position: relative;
        top: auto;
        right: auto;
        grid-column: 3;
        grid-row: 1;
        width: 48px;
        height: 48px;
        margin-left: 12px;
    }
    .oe-pp-flow__step > .oe-pp-flow__icon::before { width: 30px; height: 30px; }
    .oe-pp-flow__step > .oe-pp-flow__icon img { width: 42px; height: 42px; }
    .oe-pp-flow__title { margin-top: 0; font-size: 18px; }
    .oe-pp-flow__text { margin-top: 2px; }
    .oe-pp-flow__step .oe-pp__tag { margin-top: 10px; }

    .oe-pp-faq__q { padding: 20px 36px 20px 36px; font-size: 16px; }
    .oe-pp-faq__q::before { top: 23px; }
    .oe-pp-faq__a { padding: 0 8px 24px 36px; }

    .oe-pp-voice,
    .oe-pp-voice:nth-child(3) { margin-right: 24px; }
    .oe-pp-voice:nth-child(2) { margin-left: 24px; }
    .oe-pp .oe-pp-voice__text { padding: 20px 20px; font-size: 15px; }

    .oe-pp-cta { padding: 64px 0; }
}

/* スマホ：おすすめは写真を上に、文章を下に積む */
@media (max-width: 599px) {
    .oe-pp-rec {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 6px;
        padding: 20px 0 24px;
    }
    .oe-pp-rec__photo { grid-row: auto; aspect-ratio: 2 / 1; margin-bottom: 10px; }
}

/* 幅の狭い端末：手帳の予定名とつぶやきが1行に収まるよう詰める */
@media (max-width: 359px) {
    .oe-pp-plan__entry { margin: 3px; padding: 6px; }
    .oe-pp-plan__name { font-size: 13px; }
    .oe-pp .oe-pp-mutters li { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .oe-pp__btn,
    .oe-pp__arrow,
    .oe-pp-rec,
    .oe-pp-rec__photo img { transition: none; }
    .oe-pp-rec:hover .oe-pp-rec__photo img { transform: none; }
}