/* ============================================================
 * Hooponopono — Aman Edition
 * Front-end stylesheet. Tokens come from theme.json; this file
 * only adds front-end specifics that block patterns rely on.
 * ============================================================ */

/* ---- BudouX fallback ---------------------------------------- */
/* While the budoux web component loads, render content as the
   raw text (preserves layout, prevents a flash of unstyled). */
budoux-ja:not(:defined) {
    display: contents;
}

/* ---- Global text-flow rules (locked 2026-05-08) ------------- */
p, h1, h2, h3, h4, li {
    overflow-wrap: break-word;
    hanging-punctuation: allow-end;
}

/* The CF7 reCAPTCHA v3 badge is position:fixed at right:-186px, so it escapes
   `body{overflow-x:hidden}` and adds a phantom horizontal scrollbar on mobile
   (the page looked "broken"). Hide the cosmetic badge; the required Google
   attribution is shown inline in the form footer instead — 2026-06-15. */
.grecaptcha-badge {
    display: none !important;
}
.cf7-recaptcha-note {
    margin-top: 18px;
    font-size: var(--fs-s);
    line-height: 1.7;
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    text-align: center;
}
.cf7-recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}

.nowrap {
    white-space: nowrap;
}
/* Mobile safety: a long .nowrap phrase must never overflow the viewport.
   keep-all keeps short CJK proper nouns (ウニヒピリ・KR 等) on one line, while
   embedded spaces + overflow-wrap give long descriptive phrases
   (例: セルフアイデンティティー スルー ホ・オポノポノ) an escape valve so they
   wrap instead of forcing a horizontal scroll bar — 2026-06-15. */
@media (max-width: 600px) {
    .nowrap {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

/* ---- 2 sizes only: SECTION/PAGE title = 36, everything else = 22 --------
 * Genio's rule (refined 2026-06-09): "title size (36)" = SECTION & PAGE
 * headings only (h1, h2, .sec-title, page/article/teacher titles). Card &
 * list-ITEM titles (article/video post titles .r-title/.v-title = h4,
 * お知らせ .notice-title = h3, event .tev-t = h3, .next-card h4, .brief-body
 * h3) are BODY text → 22, NOT title size. (First pass wrongly forced all
 * h1–h4 to 36, blowing up item titles on the home.) Door numbers
 * (.door-num/.num) are decorative non-headings → untouched, keep their size.
 * .door-title (home はじめての方へ) is a SECTION heading despite being an
 * h3 → 36 (Genio 2026-06-11). */
h1, h2,
.article-title, .teacher-jp, .lineage-intro h1, .sj-feature-title,
.door-title {
    font-size: var(--fs-h) !important;
}
/* Unified scale: 見出し var(--fs-h) / 本文 var(--fs-b) / 小・ボタン var(--fs-s).
 * The px values live only in preview.css :root (PC + ≤600px override). */
@media (max-width: 600px) {
    h1, h2,
    .article-title, .teacher-jp, .lineage-intro h1, .sj-feature-title,
    .door-title {
        font-size: var(--fs-h) !important;
    }
}
/* Door subtitle (eyebrow-style line under .door-title) — 小 16, muted, centred.
 * Used by per-install front pages that carry a subtitle under the heading
 * (TW: 致第一次接觸 — …). JP front page has none, so this is a no-op there. */
.door-sub {
    font-size: var(--fs-s) !important;
    line-height: 1.9;
    letter-spacing: .14em;
    color: var(--navy-mute);
    text-align: center;
    margin: .2em 0 1.4em;
}
/* WordPress core image captions = 小 (16), not body size. They were
 * unstyled and inherited body 22 → looked oversized on movie/article
 * pages (the block Genio flagged 2026-06-25). */
.wp-element-caption,
.wp-block-image figcaption,
figure.wp-block-image figcaption {
    font-size: var(--fs-s) !important;
    line-height: 1.8;
    color: var(--navy-mute);
}
h3, h4,
.notice-title, .tev-t, .next-card h4, .brief-body h3 {
    font-size: var(--fs-b) !important;
}
/* Tile-card scale — SAME on every page (Genio 2026-06-11: ページごとに
 * カードのフォントが違うのは変 → home tiles = /reading/ tiles = 17/13). */
.r-title, .v-title {
    font-size: var(--fs-b) !important;
    line-height: 1.7;
    letter-spacing: .04em;
}
/* Hub-page tile captions centred (Genio 2026-06-15): on the KR / teacher /
   person hub pages the section titles are centred, so the tile titles under
   each thumbnail read better centred too. The big list pages (reading / genre
   / 一覧) keep their left-aligned editorial captions — they use rh-grid--sec
   without tp-grid. */
.tp-grid .r-title,
.tp-grid .v-title {
    text-align: center;
}
.r-tag, .v-tag {
    font-size: var(--fs-s);
    letter-spacing: .22em;
    margin-bottom: 0;
}

/* ---- Aman discipline: no rounded, no shadow, no gradient ---- *
 * theme.json already disables these at the settings level, but
 * we belt-and-braces in case a third-party block reintroduces
 * any of them at the block level. */
/* (2026-06-11) The old blanket `* { box-shadow: none !important }` is
 * retired — Genio asked for dimensional tile cards. Rounded corners and
 * gradients on CONTENT remain banned via theme.json; shadows are now an
 * intentional, card-only device (see TILE TEXTURE at the end of file). */

/* ---- Image saturation filter (tonal unity) ------------------ */
.r-img,
.v-img,
.ec-img,
.t-photo img,
.inst-photo img,
.kr-photo img {
    filter: saturate(0.92);
}

/* ---- CTA pattern (.door-cta, .inline-cta, etc.) ------------- *
 * Pattern locked in design-decisions.md 2026-05-08. Hover
 * spreads the letter-spacing so the line under the link feels
 * like an exhale.
 * 2026-06-21 (Genio): CTAは役割=ボタン → 全て 16px に統一（旧22pxは本文と
 * 同サイズで主張しすぎ）。これが CTA の唯一の既定サイズ。例外を作らない。 */
.door-cta,
.ec-cta,
.inline-cta,
.kr-deeper-cta,
.brief-cta {
    display: inline-block;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-size: var(--fs-s);
    font-weight: var(--w-base);
    color: var(--wp--preset--color--navy);
    letter-spacing: 0.14em;
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--navy);
    padding-bottom: 5px;
    transition: letter-spacing 0.4s ease;
}

.door-cta:hover,
.ec-cta:hover,
.inline-cta:hover,
.kr-deeper-cta:hover,
.brief-cta:hover {
    letter-spacing: 0.22em;
}

/* Home door CTA「読む →」sits at body size (Genio 2026-09-30: three sizes only;
   was 18px from 2026-06-26). Other CTAs stay at the small size. */
.door-cta { font-size: var(--fs-b); }

/* CTA wrappers that should center their child link */
.event-card,
.notice-more,
.readings-more,
.videos-more,
.tev-more,
.door-cta-wrap,
.detail-link,
.next-card,
.kr-message-pointer,
.kr-personal-cta-inner,
.service-back {
    text-align: center;
}

/* ---- Section alternating bands (locked 2026-05-08) ---------- */
/* Implemented at the block level via white/beige background
   color presets. This file leaves the rule documented but does
   not enforce it — the editor / patterns enforce it. */

/* ============================================================
 * Theme.json overrides (CC13 / 2026-05-15 / QA gate Day 2 #9)
 * Block theme h2 defaults letter-spacing to 0.22em globally,
 * but preview .sec-title needs roomier tracking + smaller size
 * to read as a contemplative section eyebrow.
 * ============================================================ */
.foot-news-title,
h2.foot-news-title {
    font-size: var(--fs-b) !important;
}
.sec-title,
h2.sec-title {
    letter-spacing: 0.24em;
    line-height: 1.8;
    font-weight: var(--w-base);
}

/* ============================================================
 * Reading / video card image fallback (QA Day 2 #3)
 * When a post has no featured image, the .r-thumb / .v-thumb
 * container collapses. Show a beige-deep block at the 16:9
 * ratio so the card still has its visual weight.
 * ============================================================ */
.r-thumb,
.v-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--wp--preset--color--beige-deep, #c6d6e4);
    overflow: hidden;
}
.r-thumb img,
.v-thumb img,
.r-thumb .wp-block-post-featured-image,
.v-thumb .wp-block-post-featured-image,
.r-thumb .wp-block-post-featured-image img,
.v-thumb .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    filter: saturate(0.92);
}

/* ============================================================
 * Video play-button overlay (QA Day 2 #4)
 * CSS-only — no template change needed. The same SVG circle +
 * triangle as preview, rendered as a 40px badge centered in
 * the thumbnail.
 * ============================================================ */
.v-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19' fill='none' stroke='%23fafafa' stroke-width='1'/%3E%3Cpath d='M16,13 L28,20 L16,27 Z' fill='%23fafafa'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ============================================================
 * BudouX explicit module loader fallback (QA Day 2 #10)
 * The wp_head hook already injects the module script; this
 * just hides any leftover `<budoux-ja>` tags before the
 * component is defined.
 * ============================================================ */
budoux-ja {
    display: inline;
}

/* ============================================================
 * Block-template grid rules (QA v2 R1, R2, R3)
 *
 * WordPress wp:query → wp:post-template renders as:
 *   <div class="wp-block-query .readings-grid">
 *     <ul class="reading reveal wp-block-post-template">
 *       <li class="wp-block-post post-XXX reading">…</li>
 *
 * The actual grid container is the *inner* <ul>, not the outer
 * <div>. WP also adds `is-layout-flow` which sets display:flow-root.
 * Target the inner post-template directly and override.
 * ============================================================ */
/* The OUTER wp:query div carries .readings-grid, which preview.css styles
 * as a 2-col grid — with the inner <ul> as a single grid item the cards
 * collapsed to half/quarter width (Genio screenshot 2026-06-11). When the
 * query markup is present, the outer div must be a plain block and the
 * inner ul owns the grid. */
.wp-block-query.readings-grid,
.wp-block-query.videos-grid {
    display: block !important;
}
.readings-grid .wp-block-post-template,
.readings-grid > ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.videos-grid .wp-block-post-template,
.videos-grid > ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 720px) {
    .readings-grid .wp-block-post-template,
    .readings-grid > ul.wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 50px;
    }
    .videos-grid .wp-block-post-template,
    .videos-grid > ul.wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 50px;
    }
}

/* Catalog tile card — identical to .rh-card on /reading/ (white box,
 * hairline border). Applies to every wp:query card grid site-wide. */
.readings-grid .wp-block-post,
.videos-grid .wp-block-post {
    background: #fff;
    border: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
    padding: 10px 10px 16px;
    transition: border-color .35s ease;
}
.readings-grid .wp-block-post:hover,
.videos-grid .wp-block-post:hover {
    border-color: var(--wp--preset--color--navy, #32442f);
}
.readings-grid .wp-block-post .r-thumb,
.videos-grid .wp-block-post .v-thumb {
    margin-bottom: 12px;
}

/* Each card <li> should not show list bullet, no margin. */
.readings-grid .wp-block-post,
.videos-grid .wp-block-post {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Events list (rebuilt 2026-05-25 to match preview/index.html).
 * front-page.html now renders:
 *   <section class="tev-sec">           ← beige band wraps EVERYTHING
 *     <div class="sec-head">…</div>
 *     <div class="wp-block-query tev-list">
 *       <ul class="wp-block-post-template">
 *         <li class="wp-block-post"><div class="tev-row">  ← grid row
 *             <div class="tev-date">…</div><h3 class="tev-t"><a>…</a></h3>
 * So: neutralise the WP list wrappers, then let preview.css .tev-* drive
 * (date = Noto Serif JP, row grid collapses to 1 col on mobile). */
.tev-list .wp-block-post-template,
.tev-list > ul.wp-block-post-template {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}
.tev-list .wp-block-post {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Card C (Genio 2026-06-09): single centered column — tracked date over
 * title, hairline dividers. Belt-and-braces against wp-block-group flow
 * layout setting display on the same .tev-row element. */
.tev-list .tev-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
    padding: 42px 0;
    border-top: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
}
.tev-list .tev-row:last-child,
.tev-list .wp-block-post:last-child .tev-row {
    border-bottom: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
}
@media (max-width: 768px) {
    .tev-list .tev-row {
        gap: 6px;
        padding: 26px 0;
    }
}
/* post-title renders as <h3 class="tev-t"><a>…</a></h3>; inherit the size and
 * colour from preview.css .tev-t and strip the default link styling. */
.tev-t a {
    color: inherit;
    text-decoration: none;
    font: inherit;
    letter-spacing: inherit;
}
.tev-t a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Reading hub (/reading/, patterns/reading-hub.php) -------------- *
 * Sectioned like prod sith_reading: white/beige alternating bands, cards
 * have NO dates, and every CPT section paginates with page NUMBERS
 * (1 2 3 …) — Genio 2026-06-11. */
/* Catalog density (Genio 2026-06-11 「縦に長くて見づらい」: Aman 余白は
 * トップ/はじめての方へ専用。一覧ハブは既存HP寄りの密度に — smaller type,
 * tighter bands, 4-up rows. Revert = restore the 110px/22px values. */
.rh-sec {
    background: var(--wp--preset--color--white, #fff);
    padding: 56px 0 52px;
}
.rh-sec--beige {
    background: var(--wp--preset--color--beige, #e7f1f7);
}
.rh-sec .sec-head {
    margin-bottom: 36px;
}
.rh-sec .sec-title {
    font-size: var(--fs-b) !important;
    letter-spacing: .22em;
}
/* subhead tier drops to 22 on mobile (was stuck at 26 site-wide on every list
   page — caught by scripts/font_ladder_audit.py, 2026-06-16). */
@media (max-width: 600px) {
    .rh-sec .sec-title,
    .sj-reg-form-inner h2 { font-size: var(--fs-b) !important; }
}
.rh-sec .r-title {
    font-size: var(--fs-b) !important;
    line-height: 1.7;
    letter-spacing: .04em;
}
/* Card BOX (Genio 2026-06-11: 区切りが分からない → hairline-bordered card
 * like prod, kept Aman-flat: white card, 1px hairline, inner padding). */
.rh-grid--sec {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 22px;
}
.rh-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
    padding: 10px 10px 16px;
    transition: border-color .35s ease;
}
.rh-card:hover {
    border-color: var(--wp--preset--color--navy, #32442f);
}
.rh-card .r-thumb {
    margin-bottom: 12px;
}
/* teacher name under the title — dates stay hidden */
.r-teacher {
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .12em;
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    margin-top: 8px;
}
/* 最新よみもの: swipe slider on ALL viewports (5 cards, peek + bar-dots) */
.rh-grid--latest {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 30px;
    padding-bottom: 14px;
    scrollbar-width: none;
}
.rh-grid--latest::-webkit-scrollbar {
    display: none;
}
.rh-grid--latest .rh-card {
    flex: 0 0 30%;
    scroll-snap-align: center;
}
.rh-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}
.rh-dot {
    width: 26px;
    height: 14px;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}
.rh-dot::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
    transition: background .3s ease;
}
.rh-dot.on::after {
    background: var(--wp--preset--color--navy, #32442f);
}
.rh-pages {
    text-align: center;
    margin-top: 36px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.rh-page {
    background: none;
    border: none;
    border-radius: 0;
    padding: 2px 2px 6px;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .08em;
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    border-bottom: 1px solid transparent;
    transition: color .3s ease;
}
.rh-page:hover {
    color: var(--wp--preset--color--navy, #32442f);
}
.rh-page.on {
    color: var(--wp--preset--color--navy, #32442f);
    border-bottom-color: var(--wp--preset--color--navy, #32442f);
    cursor: default;
}
.rh-page-gap {
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    font-size: var(--fs-s);
}
/* ---- Fixed header on every page (Genio 2026-06-11) ----------------- *
 * preview.css makes .fh sticky, but block templates wrap it in
 * <header class="wp-block-template-part"> whose height equals the bar —
 * sticky can't escape its parent, so it never stuck. Stick the wrapper. */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 60;
}

/* ---- Header search overlay (虫眼鏡, Genio 2026-06-15) --------------- *
 * The .fh-search icon had no handler. Tapping it now opens this overlay
 * whose field submits to /?s= (WP search). JS toggle in functions.php. */
.fh-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: flex-start;
    justify-content: center;
    background: rgba(50, 68, 47, .22);
}
.fh-search-overlay.open {
    display: flex;
}
.fh-search-form {
    margin-top: 14vh;
    width: min(560px, 88vw);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--wp--preset--color--hair, #c6d6e4);
}
.fh-search-form-ic {
    flex: 0 0 auto;
    color: var(--wp--preset--color--navy, #32442f);
}
.fh-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-b);
    letter-spacing: .04em;
    color: var(--wp--preset--color--navy, #32442f);
}
.fh-search-close {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--wp--preset--color--navy, #32442f);
    cursor: pointer;
}

/* ---- Teachers list (/sith-teachers/, patterns/teachers-list.php) --- *
 * Ported from preview/teachers.html inline <style>, font-remapped to the
 * 22px discipline (no italic). Cards add conditional インタビュー/動画
 * links per teacher (Genio 2026-06-11) — no nested anchors, so the card
 * is a div wrapping a main link + a links row. */
.teachers-sec {
    background: var(--wp--preset--color--white, #fff);
    padding: 56px 0 90px;
}
.teachers-sec .sec-head {
    margin-bottom: 40px;
}
.teachers-sec .sec-title {
    font-size: var(--fs-b) !important;
    letter-spacing: .22em;
}
.teachers-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 60px 50px;
}
.t-card {
    text-align: center;
}
.t-card-main {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.t-photo {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--wp--preset--color--beige, #e7f1f7);
    overflow: hidden;
    margin-bottom: 22px;
}
.t-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
    filter: saturate(.92);
}
.t-card:hover .t-photo img {
    transform: scale(1.04);
}
.t-photo .thumb-fallback {
    background: var(--wp--preset--color--beige-deep, #c6d6e4);
}
.t-photo .thumb-fallback::after {
    display: none;
}
.t-label {
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-b);
    letter-spacing: .32em;
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    margin-bottom: 6px;
}
.t-en {
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-b);
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    margin-bottom: 6px;
}
.t-jp .nowrap {
    white-space: normal; /* long names must wrap inside the fixed column */
}
.t-jp {
    font-size: var(--fs-b);
    letter-spacing: .1em;
    color: var(--wp--preset--color--navy, #32442f);
    line-height: 1.6;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
}
/* simple JP-only pill buttons (square corners), side by side */
.t-links {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.t-link {
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .12em;
    color: var(--wp--preset--color--navy, #32442f);
    text-decoration: none;
    border: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
    padding: 6px 14px;
    transition: border-color .3s ease, background .3s ease;
}
.t-link:hover {
    border-color: var(--wp--preset--color--navy, #32442f);
    background: rgba(50, 68, 47, .04);
}
@media (max-width: 768px) {
    .teachers-sec {
        padding: 40px 0 80px;
    }
    .teachers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px 24px;
        padding: 0 24px;
    }
    .t-links {
        gap: 8px;
    }
    .t-link {
        min-height: 30px;
    }
}

/* Mobile = the real audience (80%+, Genio 2026-06-11): mirror prod
 * sith_reading's phone layout — 最新よみもの swipes horizontally, every
 * other section shows a compact 2×2 card grid + numbered pagination. */
@media (max-width: 768px) {
    .rh-sec {
        padding: 44px 0 40px;
    }
    .rh-pages {
        margin-top: 28px;
        gap: 6px 14px;
    }
    /* 最新よみもの slider: one card + peek on phones */
    .rh-grid--latest {
        gap: 18px;
        padding: 0 24px 14px;
    }
    .rh-grid--latest .rh-card {
        flex: 0 0 76%;
    }
    /* per-CPT sections: 2 columns × 2 rows = the 4 posts per page */
    .rh-grid--sec {
        grid-template-columns: 1fr 1fr;
        gap: 26px 14px;
        padding: 0 20px;
    }
    .rh-grid--sec .r-thumb {
        margin-bottom: 12px;
    }
    .rh-grid--sec .r-title {
        line-height: 1.6;
        letter-spacing: .06em;
    }
    /* number buttons: comfortable touch targets */
    .rh-page {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ============================================================
 * TILE TEXTURE (Genio 2026-06-11 「線で囲うだけはダサい→立体的に、
 * テクスチャー、肌色っぽく」). Warm washi-paper tile: skin-toned
 * gradient + fine grain dots + soft double shadow + hover lift.
 * Square corners stay (Aman discipline). Applies to every tile:
 * reading hub cards, home latest tiles, archive grids, teacher cards.
 * ============================================================ */
.rh-card,
.readings-grid .wp-block-post,
.videos-grid .wp-block-post,
.t-card,
.next-card,
.event-card {
    background-color: #faf5ec;
    background-image:
        radial-gradient(rgba(50, 68, 47, 0.05) 0.5px, transparent 0.6px),
        linear-gradient(155deg, #fefcf8 0%, #f8f2e8 70%, #f3ead9 100%);
    background-size: 4px 4px, 100% 100%;
    border: 1px solid rgba(118, 96, 68, 0.18);
    box-shadow:
        0 1px 2px rgba(50, 68, 47, 0.07),
        0 12px 26px -10px rgba(50, 68, 47, 0.18);
    transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.35s ease;
}
.rh-card:hover,
.readings-grid .wp-block-post:hover,
.videos-grid .wp-block-post:hover,
.t-card:hover,
.next-card:hover,
.event-card:hover {
    transform: translateY(-4px);
    border-color: rgba(118, 96, 68, 0.34);
    box-shadow:
        0 2px 3px rgba(50, 68, 47, 0.08),
        0 20px 38px -12px rgba(50, 68, 47, 0.26);
}
.t-card {
    padding: 12px 12px 18px;
}
.t-card .t-photo {
    margin-bottom: 16px;
}
/* home latest grid: slightly tighter than the airy preview gaps */
.rh-home-grid {
    gap: 44px 50px;
}
@media (max-width: 768px) {
    .rh-home-grid {
        gap: 28px;
        padding: 0 24px;
    }
}


/* ============================================================
 * TEACHER ARCHIVE (/teachername/{slug}/ — per-teacher articles & videos)
 * ============================================================ */
.ta-head {
    text-align: center;
    padding: 56px 24px 40px;
    background: var(--wp--preset--color--white, #fff);
}
.ta-photo {
    width: 132px;
    margin: 0 auto 18px;
}
.ta-photo img {
    width: 132px;
    height: 165px;
    object-fit: cover;
    display: block;
    filter: saturate(.92);
    border: 1px solid rgba(118, 96, 68, 0.18);
    box-shadow: 0 8px 20px -8px rgba(50, 68, 47, 0.2);
}
/* who-kr-is: a calm landscape portrait of KR instead of the small portrait
   profile thumbnail used on the teacher hub pages (Genio 2026-06-15:
   mikography-62 cropped 3:2). Must sit AFTER .ta-photo img to win on equal
   specificity; border/shadow/saturate are inherited from the rule above. */
.ta-photo--landscape {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 22px;
}
.ta-photo--landscape img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
}
.ta-name {
    font-size: var(--fs-b) !important;
    letter-spacing: .18em;
    color: var(--wp--preset--color--navy, #32442f);
    margin-bottom: 6px;
}
.ta-sub {
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .22em;
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    margin-bottom: 18px;
}
.ta-toggle .t-link.on {
    border-color: var(--wp--preset--color--navy, #32442f);
    background: rgba(50, 68, 47, .06);
    cursor: default;
}
.ta-list {
    padding-top: 48px;
}
/* numbered pagination (paginate_links output) — same look as .rh-page */
.ta-pages {
    margin-top: 36px;
}
.ta-pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.ta-pages .page-numbers {
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .08em;
    color: var(--wp--preset--color--navy-mute, #6b7d6c);
    text-decoration: none;
    padding: 6px 4px;
    border-bottom: 1px solid transparent;
}
.ta-pages a.page-numbers:hover {
    color: var(--wp--preset--color--navy, #32442f);
}
.ta-pages .page-numbers.current {
    color: var(--wp--preset--color--navy, #32442f);
    border-bottom-color: var(--wp--preset--color--navy, #32442f);
}


/* ============================================================
 * FOUNDER WORDS hero (home top — モーナの言葉, Genio 2026-06-18)
 * Sits above the weekly-word .hero. The quote is long, so prominence
 * comes from being first + full-bleed video + the eyebrow label, NOT
 * from a bigger font. Deeper scrim + wide line-height keep it legible.
 * height:auto lets the section grow on mobile rather than clip.
 * ============================================================ */
.hero--founder {
    height: auto;
    min-height: 100vh;
}
.hero--founder .hero-center {
    position: relative;
    inset: auto;
    min-height: 100vh;
    padding: 110px 24px;
    box-sizing: border-box;
}
/* label matches the "今週の一言" eyebrow size (.hero-week = 22px) per Genio 2026-06-18 */
.hero-founder-label {
    font-family: var(--ff-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-b);
    letter-spacing: .14em;
    opacity: .82;
    margin-bottom: 30px;
}
/* body a touch smaller than the weekly quote so the attribution + scroll hint
   stay visible in one mobile viewport (Genio 2026-06-18) */
.founder-quote {
    max-width: 720px;
    font-size: var(--fs-b);
    line-height: 2.1;
    letter-spacing: .1em;
}
@media (max-width: 768px) {
    .hero--founder .hero-center { padding: 64px 18px; }
    /* keep the 22px label on one line (no mid-word wrap) on narrow screens */
    .hero-founder-label { font-size: var(--fs-b); letter-spacing: 0; margin-bottom: 18px; white-space: nowrap; }
    .founder-quote { font-size: var(--fs-b); line-height: 1.9; letter-spacing: .04em; }
    /* keep the attribution on one line under the long quote */
    .hero--founder .hero-quote-by { font-size: var(--fs-s); letter-spacing: .18em; margin-top: 22px; }
}


/* ============================================================
 * FAMOUS QUOTE block on the who-{morrnah,ihaleakala}-is pages
 * (Genio 2026-06-18). Calm beige band, centred serif, set right
 * after the bio header so it reads as the person's defining words.
 * ============================================================ */
.pp-quote-sec {
    background: var(--beige);
    padding: 110px 0 100px;
}
.pp-quote-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 28px;
    text-align: center;
}
.pp-quote-eyebrow {
    font-family: var(--ff-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .3em;
    color: var(--navy-mute);
    margin-bottom: 32px;
}
.pp-quote {
    margin: 0;
    border: 0;
    padding: 0;
    text-align: left;
    font-family: var(--ff-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-b);
    line-height: 2.35;
    letter-spacing: .1em;
    color: var(--navy);
}
.pp-quote-by {
    margin-top: 38px;
    font-family: var(--ff-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .24em;
    color: var(--navy-mute);
    text-align: center;
}
@media (max-width: 768px) {
    .pp-quote-sec { padding: 76px 0 68px; }
    .pp-quote-eyebrow { font-size: var(--fs-s); letter-spacing: .24em; margin-bottom: 24px; }
    .pp-quote { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .06em; }
    .pp-quote-by { font-size: var(--fs-s); margin-top: 30px; }
}


/* ============================================================
 * STRAWBERRY JAM feature section (home + /event-overview/)
 * moved out of front-page.html inline style 2026-06-11.
 * ============================================================ */
.strawberry-jam-feature{background:var(--white);padding:120px 0 100px;border-top:1px solid var(--navy-thread)}
.strawberry-jam-feature-inner{max-width:720px;margin:0 auto;padding:0 24px}
.sj-feature-eyebrow{font-family:var(--ff-en);font-size:var(--fs-b);letter-spacing:.26em;color:var(--navy-mute);text-align:center;margin-bottom:18px}
.sj-feature-title{font-size:var(--fs-h);letter-spacing:.2em;line-height:1.6;color:var(--navy);font-family:var(--ff-jp);font-weight:var(--w-base);text-align:center;margin-bottom:36px}
.sj-feature-desc{font-size:var(--fs-b);line-height:2.1;letter-spacing:.08em;color:var(--navy-soft);text-align:left;margin-bottom:18px}
.sj-feature-desc:last-of-type{margin-bottom:0}
.sj-feature-card{max-width:480px;margin:50px auto 0;text-align:center}
.sj-feature-card .ec-thumb{aspect-ratio:16/9;background:var(--beige-deep);overflow:hidden;margin-bottom:22px}
.sj-feature-card .ec-img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.sj-feature-card:hover .ec-img{transform:scale(1.04)}
.sj-feature-card{display:block;text-decoration:none;color:inherit;transition:transform .5s ease}
.sj-feature-card:hover{transform:translateY(-4px)}
.ec-meta{font-family:var(--ff-en);font-size:var(--fs-b);letter-spacing:.14em;color:var(--navy-mute);margin-bottom:10px}
.sj-feature-card .ec-title{font-size:var(--fs-b);letter-spacing:.12em;line-height:1.6;color:var(--navy);margin-bottom:18px;font-family:var(--ff-jp);font-weight:var(--w-base)}
.sj-archive-link{text-align:center;margin-top:34px}


/* ============================================================
 * TEACHER PROFILE (/teachers/{slug}/) — bio disclosure + session CTA
 * ============================================================ */
.tp-bio-details {
    max-width: 720px;
    margin: 26px auto 0;
    text-align: center;
}
.tp-bio-details summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-b);
    letter-spacing: .14em;
    color: var(--wp--preset--color--navy, #32442f);
    border-bottom: 1px solid var(--wp--preset--color--navy, #32442f);
    padding-bottom: 5px;
    transition: letter-spacing .4s ease;
}
.tp-bio-details summary::-webkit-details-marker { display: none }
.tp-bio-details summary:hover { letter-spacing: .22em }
.tp-bio-details .tp-bio-close { display: none }
.tp-bio-details[open] .tp-bio-open { display: none }
.tp-bio-details[open] .tp-bio-close { display: inline }
.tp-bio {
    text-align: left;
    padding: 30px 24px 6px;
    font-size: var(--fs-b);
    line-height: 2.1;
    letter-spacing: .08em;
    color: var(--wp--preset--color--navy-soft, #536454);
}
.tp-bio p { margin-bottom: 22px }
.tp-bio img { display: none } /* 顔写真はヘッダーに既出 (Genio 2026-06-11) */
.tp-session { margin-top: 30px; text-align: center }


/* ============================================================
 * FILTERED LIST pages (/interviewlist/ /dougalist2/ /taikenlist/)
 * ============================================================ */
.fl-head {
    padding-bottom: 36px;
}
/* list/archive page TITLE is the page heading, not body text — bump from the
   .rh-sec subhead 22px up to the 見出し tier 36 (mobile 28). Kohei 2026-06-29:
   strawberry-jam-archive title read as body. Scoped to fl-head so section
   subheads in the reading hub stay 22. */
.fl-head .sec-title { font-size: var(--fs-h) !important; }
@media (max-width: 600px) { .fl-head .sec-title { font-size: var(--fs-h) !important; } }
/* optional one-paragraph intro under the list title (e.g. 書籍) — Genio 2026-06-15 */
.fl-intro {
    max-width: 680px;
    margin: 18px auto 0;
    padding: 0 24px;
    /* body intro = left-aligned per the 本文左寄せ rule (Genio 2026-06-26: list/archive
       intros like strawberry-jam-archive read as body, not a centered title). */
    text-align: left;
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-b); line-height: 2.0; letter-spacing: .06em;
    color: var(--navy-soft);
}
/* Strawberry Jam archive: Vol.N title + アイリーンの要約 under each tile, no
   filter chips (Genio 2026-06-16). Summary is clamped so cards stay even on a
   3-up / 2-up grid; tap opens the individual video page. */
.rh-card--summary { display: flex; flex-direction: column; }
.rh-card--summary .v-title { margin-top: 14px; }
.v-summary {
    margin: 10px 0 2px;
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-s); line-height: 1.9; letter-spacing: .03em;
    color: var(--navy-soft);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .v-summary { font-size: var(--fs-s); line-height: 1.85; -webkit-line-clamp: 4; }
}

/* Strawberry Jam archive — hero band + premium 2-up cards (Genio 2026-06-16:
   make it match/beat the existing page). Hero ships as a theme asset so the
   same URL works across staging + all language installs. */
.fl-hero { background: var(--white); }
.fl-hero-inner { max-width: 1040px; margin: 0 auto; padding: 44px 24px 0; }
.fl-hero-img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16 / 9; object-fit: cover;
    filter: saturate(.92);
    border: 1px solid var(--navy-thread);
}
.rh-grid--sec.fl-grid--sj {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 36px;
    max-width: 1040px;
    margin-left: auto; margin-right: auto;
}
.fl-grid--sj .rh-card {
    padding: 18px 20px 26px;
    background: var(--white);
    transition: border-color .45s ease, transform .45s ease;
}
.fl-grid--sj .rh-card:hover {
    border-color: var(--navy);
    transform: translateY(-3px);
}
.fl-grid--sj .v-thumb { margin-bottom: 0; background: var(--beige-deep); }
/* hairline rule between the thumbnail and the Vol/title block */
.fl-grid--sj .v-title {
    font-size: var(--fs-b) !important;
    margin-top: 0;
    padding-top: 20px;
    text-align: left;
    line-height: 1.6;
    border-top: 1px solid var(--navy-thread);
}
.fl-grid--sj .v-summary { font-size: var(--fs-s); -webkit-line-clamp: 4; margin-top: 14px; }
@media (max-width: 720px) {
    .rh-grid--sec.fl-grid--sj { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
    .fl-hero-inner { padding: 22px 16px 0; }
    .fl-grid--sj .rh-card { padding: 14px 16px 22px; }
    .fl-grid--sj .v-title { font-size: var(--fs-b) !important; padding-top: 16px; }
    .fl-grid--sj .v-summary { font-size: var(--fs-s); }
}

/* ============================================================= *
 * Strawberry Jam registration (single-strawberry-jam) — paid
 * per-event signup landing. Hero + editorial body (legacy pink
 * round buttons normalised to the new palette) + form at #form.
 * (Genio 2026-06-16: 🅑 application form, build clear & cool.)
 * ============================================================= */
.sj-reg-hero { background: var(--white); }
.sj-reg-hero-inner { max-width: 920px; margin: 0 auto; padding: 8px 24px 0; }
.sj-reg-hero-img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.94);
}
.sj-reg { background: var(--white); padding: 40px 0 56px; }
/* Genio 2026-06-18: long WWA / SJ / seminar-fallback bodies were one centred
   wall of 22px text. Read them as a document — left-aligned body, centred
   section headings with clear separation + a short rule, tidy lists. */
.sj-reg-inner { max-width: 680px; margin: 0 auto; padding: 0 24px; text-align: left; }
.sj-reg-inner p {
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-b); line-height: 2.05; letter-spacing: .04em;
    color: var(--navy-soft); margin: 0 0 18px; text-align: left;
}
.sj-reg-inner h2 {
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-b); letter-spacing: .16em; line-height: 1.5;
    color: var(--navy); text-align: center;
    margin: 56px 0 22px; padding-bottom: 16px; position: relative;
}
.sj-reg-inner h2::after {
    content: ""; position: absolute; left: 50%; bottom: 0;
    width: 40px; height: 1px; background: var(--hair, #c6d6e4);
    transform: translateX(-50%);
}
.sj-reg-inner > h2:first-child { margin-top: 8px; }
.sj-reg-inner h3 {
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-b); letter-spacing: .1em; color: var(--navy);
    text-align: center; margin: 36px 0 16px;
}
.sj-reg-inner ul, .sj-reg-inner ol { text-align: left; padding-left: 1.3em; margin: 0 0 18px; }
.sj-reg-inner li {
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-s); line-height: 1.95; letter-spacing: .04em;
    color: var(--navy-soft); margin-bottom: 8px;
}
.sj-reg-inner a { color: var(--navy); }
/* top CTA jumping to the form, shown above the body (クラス同様 — Genio).
   2026-09-17 Genio: 開催概要の箱の下＝水色の面の一番下に置く。上の
   .service-body--beige と同じ地色を続けて、面ごと1つの塊に見せる。地色は
   「直前の面と同じ」を CSS で引き継ぐ — ACF の開催概要が無い install では直前が
   白になるため、beige 決め打ちだと帯だけ浮く。 */
.sj-reg-cta { background: var(--white); text-align: center; padding: 4px 0 60px; }
/* 節と節の間の 16px が地の白として覗くので、続きの面に見せるときだけ閉じる。 */
.service-body--beige + .sj-reg-cta { background: var(--beige); margin-top: 0; }
.sj-reg-cta .tp-session-btn { padding: 13px 30px; }
@media (max-width: 768px) {
  .sj-reg-cta { padding: 2px 0 36px; }
}
/* SJ registration: the short intro sits in a .service-body with 100px vertical
   padding, leaving a huge empty gap above the CTA buttons. Tighten on this page
   only (KR service pages keep their airy 100px). Kohei 2026-07-01 */
.single-strawberry-jam .service-body { padding: 48px 0; }
@media (max-width: 768px) {
  .single-strawberry-jam .service-body { padding: 28px 0; }
}
/* normalise the legacy is-style-round / pink inline buttons to the Aman palette */
.sj-reg .wp-block-buttons {
    gap: 16px; margin-top: 36px;
    justify-content: center;
    flex-direction: column; align-items: center;
}
.sj-reg .wp-block-button { width: 100%; max-width: 340px; }
.sj-reg .wp-block-button__link {
    display: block; width: 100%;
    background-color: var(--navy) !important;
    color: #fff !important;
    border: 1px solid var(--navy) !important;
    border-radius: 0 !important;
    font-family: var(--ff-jp) !important;
    font-weight: var(--w-base) !important;
    font-size: var(--fs-s) !important;
    letter-spacing: .16em;
    padding: 16px 34px !important;
    transition: background-color .35s ease, color .35s ease, letter-spacing .35s ease;
}
.sj-reg .wp-block-button:nth-child(n+2) .wp-block-button__link,
.sj-reg .wp-block-buttons:nth-of-type(n+2) .wp-block-button__link {
    background-color: transparent !important;
    color: var(--navy) !important;
}
.sj-reg .wp-block-button__link:hover {
    background-color: var(--navy-soft) !important;
    color: #fff !important;
    border-color: var(--navy-soft) !important;
    letter-spacing: .22em;
}
.sj-reg-form { background: var(--beige); padding: 72px 0 90px; scroll-margin-top: 80px; }
.sj-reg-form-inner { max-width: 680px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sj-reg-form-inner h2 { font-size: var(--fs-b) !important; letter-spacing: .18em; margin-bottom: 14px; }
.sj-reg-form-note {
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-s); line-height: 1.95; letter-spacing: .04em;
    color: var(--navy-soft); margin-bottom: 36px; text-align: left;
}
/* the form itself sits on a hairline-framed white panel for a premium,
   contained feel against the beige section */
.sj-reg-form .contact-form-embed {
    background: var(--white);
    border: 1px solid var(--navy-thread);
    padding: 48px 44px;
    text-align: left;
}
/* SJ 登壇者（案A・固定セクション・beige 帯：intro(白)→登壇者(beige)→流れ(白)→form(beige)）*/
.sj-interp { color: var(--navy-soft); border-top: 1px solid var(--navy-thread); padding-top: 18px; margin-top: 22px; }
.sj-speakers { background: var(--white); padding: 64px 0 72px; }
.sj-speakers-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.sj-speakers > .sj-speakers-inner > h2 {
    text-align: center; font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-b); letter-spacing: .18em; color: var(--navy); margin: 0 0 44px;
}
.sj-speaker { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: start; }
.sj-speaker + .sj-speaker { margin-top: 52px; }
.sj-speaker-photo { aspect-ratio: 3/4; overflow: hidden; background: var(--beige-deep); filter: saturate(0.92) sepia(0.10); }
.sj-speaker-photo img { width: 100%; height: 100%; object-fit: cover; }
.sj-speaker-body h3 {
    font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-b);
    letter-spacing: .08em; color: var(--navy); margin: 0 0 18px; text-align: left;
}
.sj-speaker-body p {
    font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s);
    line-height: 1.95; letter-spacing: .04em; color: var(--navy-soft);
    text-align: left; margin: 0 0 16px;
}
.sj-speaker-sign { color: var(--navy); letter-spacing: .12em; }
@media (max-width: 600px) {
    .sj-reg { padding: 28px 0 40px; }
    .sj-reg-inner p { font-size: var(--fs-s); }
    .sj-reg-inner h2 { font-size: var(--fs-b); margin-top: 44px; }
    .sj-reg-form { padding: 48px 0 64px; }
    .sj-reg-form .contact-form-embed { padding: 32px 22px; }
    .sj-speakers { padding: 44px 0 52px; }
    .sj-speakers > .sj-speakers-inner > h2 { font-size: var(--fs-b); margin-bottom: 32px; }
    .sj-speaker { grid-template-columns: 1fr; gap: 22px; }
    .sj-speaker-photo { max-width: 220px; margin: 0 auto; }
    .sj-speaker + .sj-speaker { margin-top: 40px; }
}

/* SJ 参加者からの声。
   **どの画面幅でも横流し**（Genio 2026-09-17「携帯はきれいだけど、PCだと見にくい」→
   案 A＝スマホと同じ形を広い画面にも）。20 本を一度に壁で出すと、字が小さく区切りが
   細い線だけになって、結局どれも読まれない。1 枚ずつ止めて送れば、読む人はいつでも
   1 本だけを見る。
   1 枚の高さは一番長い声で決まる（途中で切らない——切ると、その方の言葉が途中で
   終わった文章として出る。アイリーンさん 2026-09-17:「止まっている時に映るのは、
   全文である必要がある」）。
   幅 --sj-card ／ 隙間 --sj-gap ／ 送る幅 --sj-step ＝その和。inc/sj-voices.php の
   @keyframes は **--sj-step を読む**ので、幅を変えるのはここだけでよい（以前は PHP 側の
   定数と二重管理で、片方だけ直すと 1 枚ずつズレて止まった）。
   読んでいる 1 枚は画面の真ん中に置く（工藤さん 2026-09-17:「カードはセンターに
   串刺しにしてほしい」）＝左右の余白は (画面 − カード幅) ÷ 2。はみ出しは箱の外枠で
   切るので、**両隣が同じ幅だけ覗く**——どちらにも続きがあることが伝わる。
   動かす指定＝animation はここに書かず、inc/sj-voices.php が @keyframes と一緒に出す
   （1 枚ずつの秒数が声の長さで変わる＝固定では書けない）。 */
.sj-voices {
    --sj-card: 520px;
    --sj-gap: 28px;
    --sj-step: calc(var(--sj-card) + var(--sj-gap));
    padding: 56px 0 60px;
}
.sj-voices--white { background: var(--white); }
.sj-voices--beige { background: var(--beige); }
.sj-voices-inner {
    margin: 0 auto; overflow: hidden;
    padding: 0 calc((100vw - var(--sj-card)) / 2);
}
.sj-voices-inner > h2 {
    text-align: center; font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-b); letter-spacing: .18em; color: var(--navy); margin: 0 0 28px;
}
.sj-voices-wall { display: flex; gap: var(--sj-gap); }
/* 指（カーソル）を置いている間は止める。帯と 1 枚ずつは別の animation なので**両方**
   止める（帯だけ止めると、止まった絵の上で濃さだけが動き続ける）。 */
.sj-voices-wall:hover, .sj-voices-wall:active,
.sj-voices-wall:hover > *, .sj-voices-wall:active > * { animation-play-state: paused; }
/* 中は塗る——線だけだと箱に見えない（Genio 2026-09-17）。白い帯の上では水色、
   水色の帯の上では白。 */
.sj-voice {
    flex: 0 0 var(--sj-card); min-height: 150px;
    display: flex; align-items: center;
    margin: 0; padding: 30px 34px;
    border: 1px solid var(--hair-light); background: var(--beige);
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-s); line-height: 2; letter-spacing: .04em;
    color: var(--navy-soft); text-align: center;
}
.sj-voice-t { flex: 1 1 auto; }
.sj-voice--en { font-family: var(--ff-en); letter-spacing: .02em; }
.sj-voices--beige .sj-voice { background: var(--white); border-color: var(--hair); }
/* 声が 1 本だけの言語は流れない（控えも作らない＝壁の中で独りきり）。次の 1 枚が
   無いので覗かせる余白も要らない＝真ん中の枠いっぱいに置く。 */
.sj-voice:only-child { flex: 0 0 100%; }
/* 一周の継ぎ目用の控え。動いている時だけ出す（出す指定は inc/sj-voices.php 側）。 */
.sj-voice--loop { display: none; }
@media (max-width: 860px) {
    .sj-voices { --sj-card: calc(100vw - 100px); --sj-gap: 16px; padding: 18px 0 20px; }
    .sj-voices-inner > h2 { font-size: var(--fs-s); letter-spacing: .16em; margin-bottom: 12px; }
    .sj-voice {
        min-height: 92px; padding: 20px 18px;
        font-size: var(--fs-s); line-height: 1.85; letter-spacing: .03em;
    }
}
/* 動きを減らす設定では流さない＝縦に全部並べる（流れない横一列のままだと
   2 本目から先が隠れたままになる）。 */
@media (prefers-reduced-motion: reduce) {
    .sj-voices { padding: 44px 0 52px; }
    .sj-voices-inner { overflow: visible; max-width: 720px; padding: 0 24px; }
    .sj-voices-inner > h2 { margin-bottom: 24px; }
    .sj-voices-wall { display: block; }
    .sj-voice { display: block; flex: none; min-height: 0; margin: 0 0 16px; text-align: left; }
}

.fl-filter {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    justify-content: center;
}
.fl-filter .t-link {
    cursor: pointer;
    background: none;
}
.fl-filter .t-link.on {
    border-color: var(--wp--preset--color--navy, #32442f);
    background: rgba(50, 68, 47, .06);
}
.fl-list {
    padding-top: 48px;
}
/* PC: chips visible, toggle hidden */
.fl-filter-toggle {
    display: none;
}
@media (max-width: 768px) {
    /* mobile: a single quiet disclosure button instead of the chip wall
       (Genio 2026-06-11 携帯でやばい) */
    .fl-filter-toggle {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin: 0 auto;
        max-width: calc(100% - 48px);
        width: 100%;
        justify-content: center;
        background: #fff;
        border: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
        padding: 14px 18px;
        font-family: var(--wp--preset--font-family--noto-serif-jp);
        font-weight: var(--w-base);
        
        letter-spacing: .14em;
        color: var(--wp--preset--color--navy, #32442f);
        cursor: pointer;
    }
    .fl-ft-label {
        color: var(--wp--preset--color--navy-mute, #6b7d6c);
    }
    .fl-ft-current {
        max-width: 11em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fl-ft-caret {
        transition: transform .3s ease;
    }
    .fl-filter-toggle.open .fl-ft-caret {
        transform: rotate(180deg);
    }
    .fl-filter {
        display: none;
    }
    .fl-filter.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: calc(100% - 48px);
        margin: 0 auto;
        border: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
        border-top: 0;
        background: #fff;
    }
    .fl-filter.open .t-link {
        border: 0;
        border-bottom: 1px solid var(--wp--preset--color--navy-thread, rgba(50, 68, 47, 0.12));
        padding: 13px 18px;
        text-align: left;
        
        background: none;
    }
    .fl-filter.open .t-link:last-child {
        border-bottom: 0;
    }
    .fl-filter.open .t-link.on {
        background: rgba(50, 68, 47, .05);
        border-left: 2px solid var(--wp--preset--color--navy, #32442f);
    }
}


/* compact filled session button (Genio 2026-06-11: CTA was too big) */
.tp-session { margin-top: 18px; text-align: center }
.tp-session-btn {
    display: inline-block;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-weight: var(--w-base);
    font-size: var(--fs-s);
    letter-spacing: .18em;
    color: #fdfcf8;
    background: var(--wp--preset--color--navy, #32442f);
    border: 1px solid var(--wp--preset--color--navy, #32442f);
    padding: 9px 22px;
    text-decoration: none;
    transition: background .3s ease, letter-spacing .3s ease;
}
.tp-session-btn:hover {
    background: #44583f;
    letter-spacing: .24em;
}
/* Stacked CTAs on who-kr-is, under the 個人セッション button.
   --seminar = KR講演会を申し込む — secondary (ghost), shown only while a seminar
   is published (Genio 2026-06-18). --sj = ストロベリージャムに申し込む — same ghost
   treatment, shown only while a strawberry-jam post is published (Genio 2026-09-21). */
.tp-session-btn--seminar,
.tp-session-btn--sj {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 14px auto 0;
    background: transparent;
    color: var(--wp--preset--color--navy, #32442f);
}
.tp-session-btn--seminar:hover,
.tp-session-btn--sj:hover {
    background: var(--wp--preset--color--navy, #32442f);
    color: #fdfcf8;
}
/* --service = 遠隔ボディーワーク / ランドクリーニング を申し込む — same green fill
   as 個人セッション (Genio 2026-06-26: 3つとも緑に), just stacked below it.
   Inherits background/color/hover from the base .tp-session-btn. */
.tp-session-btn--service {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 14px auto 0;
}
.tp-bio {
    max-width: 720px;
    margin: 26px auto 0;
}


/* Bio pull-quote: the source content highlights key messages with a
 * magenta <mark> (Genio 2026-06-11: ピンクは合わない). Re-dress them as a
 * centered statement between hairlines — same serif, wider tracking. */
.tp-bio mark,
.tp-bio .has-inline-color {
    background: none !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
    display: block;
    text-align: center;
    font-size: var(--fs-b);
    letter-spacing: .16em;
    line-height: 2;
    padding: 22px 8px;
    margin: 26px 0;
    border-top: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
    border-bottom: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
}


/* ============================================================
 * SINGLE ARTICLE polish (Genio 2026-06-11) — no dates, unified
 * type, visible content links, washi-dressed rec block.
 * ============================================================ */
/* content links must be VISIBLE (some were styled away by old content) */
.article-body p a:not([class]),
.article-body li a:not([class]) {
    color: var(--wp--preset--color--navy, #32442f) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--navy, #32442f);
    padding-bottom: 2px;
    transition: opacity .3s ease;
}
.article-body p a:not([class]):hover,
.article-body li a:not([class]):hover {
    opacity: .7;
}
/* wp-block-cover 内のリストは inner-container が padding-left:0 のため marker が枠外に
   はみ出る。cover 内のリストだけインデントを与えて枠内に収める（Kohei 2026-06-29）。
   通常フローのリスト（class ページ等）は default のままにして余計な右シフトを防ぐ。 */
.article-body .wp-block-cover .wp-block-list,
.entry-content .wp-block-cover .wp-block-list {
    padding-left: 1.6em;
}

/* ===== 記事の装飾ツールキット（Genio/CCKK 2026-06-29・引き算ベース）=====
   新しい文字は増やさず、既存テキストを上品に見せる。新聞的な棒組みを脱する。 */
/* リード段落: 導入を少し大きく、ゆとりを持って */
.article-body p.is-lead, .entry-content p.is-lead {
    font-size: var(--fs-b) !important; line-height: 2.15; letter-spacing: .06em;
    color: var(--navy); margin-bottom: 38px;
}
@media (max-width: 768px) { .article-body p.is-lead, .entry-content p.is-lead { font-size: var(--fs-b) !important; } }
/* 傍点（圏点）= 日本語の軽い強調（斜体は日本語に効かないのでこちらが正解） */
.article-body .bouten, .entry-content .bouten {
    -webkit-text-emphasis: filled dot; text-emphasis: filled dot;
    -webkit-text-emphasis-color: var(--navy); text-emphasis-color: var(--navy);
    -webkit-text-emphasis-position: over right; text-emphasis-position: over right;
    font-style: normal;
}
/* 強い強調 = 明朝の太字（ゴシック切替なし・1段落1〜2語まで） */
.article-body strong, .entry-content strong { font-weight: 600; color: var(--navy); }
/* pull quote 見せ場（1記事1〜2個）: 上下の細い罫＋中央、引用符は出さない */
.article-body .wp-block-pullquote, .entry-content .wp-block-pullquote {
    border: 0; border-top: 1px solid var(--hair, #c6d6e4); border-bottom: 1px solid var(--hair, #c6d6e4);
    margin: 52px auto; padding: 40px 24px; max-width: 720px; text-align: center; background: none;
}
.article-body .wp-block-pullquote p, .entry-content .wp-block-pullquote p {
    font-size: var(--fs-b) !important; line-height: 1.95; letter-spacing: .08em; color: var(--navy); margin: 0;
}
@media (max-width: 768px) { .article-body .wp-block-pullquote p, .entry-content .wp-block-pullquote p { font-size: var(--fs-b) !important; } .article-body .wp-block-pullquote, .entry-content .wp-block-pullquote { padding: 32px 20px; margin: 40px auto; } }
/* インタビューの「回答ターン」差別化（Genio GO / CCKK ガードレール 2026-06-29）:
   旧来は回答段落を黄色背景にしていた（has-background クラスが残存）。インライン掃除で
   その色だけ消えてQ&Aが棒組み化したので、テーマ側で復活。淡いブランド地＋細い左罫の
   二段構えで、白地でも水色地でも"答えが静かに立つ"。ケバい黄色は不採用。
   ※ 1737 の `.article-body .has-background{…!important}`（旧バナー潰し）が !important で
     勝つため、回答地は !important で明示的に上書きする。 */
.single-interview .article-body p.has-background:not(.has-white-color),
.single-interview .entry-content p.has-background:not(.has-white-color) {
    background-color: rgba(47, 93, 52, .07) !important;
    border-left: 2px solid rgba(47, 93, 52, .32);
    padding: 16px 22px;
    margin-block: 12px;
    border-radius: 2px;
}
/* 旧「濃色地＋白文字」バナー段落（has-white-color）は上の"回答地"淡緑化から除外し、
   森緑の箱＋白文字＋ゆとりで記事の"見せ場"として静かに立てる。淡緑地(.07)に白文字が
   乗って不可視化していたのを、ブランド緑の callout に格上げ（Genio 2026-07-10「白文字が
   見えない → かっこよく」）。has-white-color を持つ段落は元々ダーク地前提なので白文字を維持。 */
.single-interview .article-body p.has-background.has-white-color,
.single-interview .entry-content p.has-background.has-white-color {
    background-color: var(--navy, #2f5d34) !important;
    color: var(--white, #fff) !important;
    border-left: 0;
    border-radius: 3px;
    padding: 30px 32px;
    margin: 40px auto;
    text-align: center;
    line-height: 2.05;
    letter-spacing: .04em;
    box-shadow: 0 14px 36px rgba(47, 93, 52, .16);
}
.single-interview .article-body p.has-background.has-white-color :is(strong, em, span, a),
.single-interview .entry-content p.has-background.has-white-color :is(strong, em, span, a) {
    color: var(--white, #fff) !important;
}
/* 旧コンテンツに焼き付いた区切り線 <hr style="max-width:400px">：PC(コンテンツ672px)で
   中途半端に切れて見える（モバイル想定の固定値）。block style の意味に戻して正規化（Kohei
   2026-06-29「PCで途中で切れてる」）。is-style-default=本来の"短い中央オーナメント"／
   is-style-wide=全幅。インライン max-width に勝つため !important。 */
.article-body hr.wp-block-separator, .entry-content hr.wp-block-separator {
    border: 0 !important;
    border-top: 1px solid var(--navy-mute, rgba(47,93,52,.4)) !important;
    height: 0; opacity: 1 !important;
    margin: 44px auto !important;
}
.article-body hr.wp-block-separator.is-style-default, .entry-content hr.wp-block-separator.is-style-default,
.article-body hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots),
.entry-content hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    max-width: 72px !important; width: 72px;
}
.article-body hr.wp-block-separator.is-style-wide, .entry-content hr.wp-block-separator.is-style-wide {
    max-width: 100% !important; width: 100%;
}

/* 区切り（セクション間の静かなオーナメント・色でない"工夫"） */
.article-body .deco-divider, .entry-content .deco-divider {
    text-align: center; margin: 60px 0; color: var(--navy-mute, rgba(47,93,52,.55));
    letter-spacing: 1em; font-size: var(--fs-s); line-height: 1;
}
/* 内なる声（断片的な思考を静かに引く）— 中央・ゆとり・やや小さく、本文と差をつける */
.article-body .deco-voices, .entry-content .deco-voices {
    text-align: center; color: var(--navy-mute, rgba(47,93,52,.55));
    font-size: var(--fs-b) !important; line-height: 2.5; letter-spacing: .12em;
    margin: 44px auto; max-width: 660px;
}
/* blockquote 引用: 斜体にしない・左に細い罫 */
.article-body blockquote.wp-block-quote, .entry-content blockquote.wp-block-quote {
    border-left: 2px solid var(--navy-mute, rgba(47,93,52,.55)); margin: 32px 0; padding: 6px 0 6px 28px;
    font-style: normal; color: var(--navy-soft);
}
/* legacy inline sizes/colors from the old builder: normalize to the scale */
.article-body p[style*="font-size"],
.article-body span[style*="font-size"]:not(.hpp-rec span) {
    font-size: var(--fs-b) !important;
}
/* 旧サイトが本文に焼き付けた埋め込み <style>（.body p{font-size:17px} 等）も
   ラダー本文 22px へ正規化。PC で 17px・モバイルで 22px の不一致を解消（Kohei 2026-06-29）。
   プレーンな本文 <p>（class なし＝装飾でない段落）だけに限定し、pull quote /
   内なる声 / 注記 / question-box 等の意図的な装飾サイズには触れない。
   line-height / letter-spacing は記事の埋め込み指定をそのまま尊重する。 */
.article-body .body > p:not([class]),
.entry-content .body > p:not([class]) {
    font-size: var(--fs-b) !important;
}
/* Interview「過去に行われた◯◯インタビューです」注記: 旧パイプラインが右寄せ
   ＋cyan-bluish-gray で出力していた。中央揃えに統一（Kohei 2026-06-29）。
   このクラス組合せはこの注記専用（インタビュー全CPTで他用途 0 件を確認）。
   about-* CPT は .entry-content で描画されるため両ラッパーを対象にする。 */
.article-body p.has-text-align-right.has-cyan-bluish-gray-color,
.entry-content p.has-text-align-right.has-cyan-bluish-gray-color { text-align: center; }

/* 記事ヒーロー: アイキャッチを 16:9 ボックスにフィルさせ、画像比が合わずに
   水色の背景帯が下に露出するのを防ぐ。+ ヒーロー下に 10px の余白（Kohei 2026-06-29）。 */
.article-hero .wp-block-post-featured-image { height: 100%; margin: 0; }
.article-hero .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero { margin-bottom: 10px !important; } /* WP flow-layout zeroes margin-block-end (0,1,1) → !important */

.article-body mark {
    background: none !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
    display: block;
    text-align: center;
    font-size: var(--fs-b);
    letter-spacing: .16em;
    line-height: 2;
    padding: 22px 8px;
    margin: 26px 0;
    border-top: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
    border-bottom: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
}

/* ---- クリーニングの旅をつづける (hpp-rec, inline-styled by the cache):
 * washi card + full-strength type. !important beats the inline styles. */
.article-body .hpp-rec {
    font-family: var(--ff-jp);   /* theme governs rec-block font (inline removed from mu-plugin, Kohei 2026-07-01) */
    background-color: #faf5ec !important;
    background-image:
        radial-gradient(rgba(50, 68, 47, 0.05) 0.5px, transparent 0.6px),
        linear-gradient(155deg, #fefcf8 0%, #f8f2e8 70%, #f3ead9 100%) !important;
    background-size: 4px 4px, 100% 100% !important;
    border: 1px solid rgba(118, 96, 68, 0.18) !important;
    box-shadow:
        0 1px 2px rgba(50, 68, 47, 0.07),
        0 12px 26px -10px rgba(50, 68, 47, 0.18) !important;
    padding: 30px 26px !important;
    margin: 70px 0 40px !important;
}
.article-body .hpp-rec > p:first-child {
    font-size: var(--fs-b) !important;
    letter-spacing: .2em !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
    text-align: center;
    margin-bottom: 26px !important;
}
.article-body .hpp-rec li {
    border-bottom: 1px solid rgba(50, 68, 47, 0.14) !important;
}
.article-body .hpp-rec span {
    color: var(--wp--preset--color--navy, #32442f) !important;
    font-size: var(--fs-s) !important;
}
/* rec items rebuilt as ONE single-link card each (Genio 2026-06-12:
 * chip + underlined title competed; whole card = the only button) */
.article-body .hpp-rec li.hpp-rec-item {
    border-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
}
.article-body .hpp-rec .hpp-rec-card {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(50, 68, 47, 0.22);
    padding: 14px 16px;
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease;
    /* カードは li(flex)内で内容幅に縮まず column 幅いっぱいに（Kohei 2026-06-29）。 */
    width: 100%;
    box-sizing: border-box;
}
.article-body .hpp-rec .hpp-rec-card:hover {
    border-color: var(--wp--preset--color--navy, #32442f);
    background: rgba(50, 68, 47, .04);
}
.article-body .hpp-rec .hpp-rec-thumb {
    flex: 0 0 104px;
}
.article-body .hpp-rec .hpp-rec-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* モバイルでは rec カード（関連記事/動画＋イベントCTA）を画像上・文章下の縦積みに。
   横並びだと画像と文章が窮屈になる（Kohei 2026-06-29）。 */
@media (max-width: 600px) {
    .article-body .hpp-rec .hpp-rec-card,
    .entry-content .hpp-rec .hpp-rec-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .article-body .hpp-rec .hpp-rec-thumb,
    .entry-content .hpp-rec .hpp-rec-thumb {
        flex: none;
        width: 100%;
    }
    /* イベントCTAカード（rec の下）はインラインstyleの flex div（クラス無し）。
       こちらも画像上・文章下に縦積み（Kohei 2026-06-29）。!important で inline を上書き。 */
    .article-body .hpp-rec > div[style*="display:flex"],
    .entry-content .hpp-rec > div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
    .article-body .hpp-rec > div[style*="display:flex"] > a[style*="100px"],
    .entry-content .hpp-rec > div[style*="display:flex"] > a[style*="100px"] {
        flex: none !important;
        width: 100% !important;
    }
}
.article-body .hpp-rec .hpp-rec-info {
    flex: 1;
    min-width: 0;
}
.article-body .hpp-rec .hpp-rec-label {
    display: block;
    font-size: var(--fs-s) !important;
    letter-spacing: .12em;
    color: rgba(50, 68, 47, .62) !important;
    margin-bottom: 4px;
}
.article-body .hpp-rec .hpp-rec-title {
    display: block;
    font-size: var(--fs-b) !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
    line-height: 1.6;
}
/* font ladder (locked 2026-06-11): 14 = labels/small buttons・small CTA,
 * 18 = tile titles, 22 = body/CTA, 26 = catalog headings, 36 = page/section
 * headings. Do NOT introduce other sizes. */
/* the teacher label is a CHIP BUTTON (Genio 2026-06-11: 下線だけでは
 * リンクと分からない) — same visual language as the teacher-page buttons */
.article-body .hpp-rec .hpp-rec-teacher,
.article-body .article-teacher-chips .hpp-rec-teacher {
    display: inline-block;
    color: var(--wp--preset--color--navy, #32442f) !important;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(50, 68, 47, 0.3);
    padding: 3px 10px;
    margin-bottom: 4px;
    transition: background .3s ease, border-color .3s ease;
}
.article-body .hpp-rec .hpp-rec-teacher:hover,
.article-body .article-teacher-chips .hpp-rec-teacher:hover {
    border-color: var(--wp--preset--color--navy, #32442f);
    background: rgba(50, 68, 47, .05);
}
.article-body .hpp-rec a[data-pos] {
    color: var(--wp--preset--color--navy, #32442f) !important;
}
.article-body .hpp-rec li > div > a {
    font-size: var(--fs-b) !important;
    line-height: 1.7 !important;
}


/* rec CTA box (次のクラスで、体感する): the cached HTML paints it palette
 * blue, which clashes inside the warm washi card — white + hairline. */
.article-body .hpp-rec > div[style*="background-color"] {
    background: #fff !important;
    border: 1px solid rgba(50, 68, 47, 0.16);
}
.article-body .hpp-rec > div[style*="background-color"] p {
    color: var(--wp--preset--color--navy, #32442f) !important;
}
.article-body .hpp-rec > div[style*="background-color"] p[style*="font-size:13px"] {
    font-size: var(--fs-s) !important;
}
.article-body .hpp-rec > div[style*="background-color"] p[style*="font-size:17px"] {
    font-size: var(--fs-b) !important;
}
.article-body .hpp-rec a[data-pos="class_cta"] {
    font-size: var(--fs-s) !important;
}
/* 他のクラス・イベントを見る — was a faint 13px whisper */
.article-body .hpp-rec a[data-pos="event_overview"] {
    font-size: var(--fs-s) !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
    border-bottom: 1px solid var(--wp--preset--color--navy, #32442f) !important;
}

/* legacy builder backgrounds in EXISTING article content (bright
 * "shopping blue" boxes etc.): force into the palette site-wide. */
.article-body .wp-block-post-content [style*="background"]:not(.hpp-rec):not(.hpp-rec *):not(mark) {
    background: var(--wp--preset--color--beige, #e7f1f7) !important;
    border-color: var(--wp--preset--color--beige-deep, #c6d6e4) !important;
}


/* Gutenberg preset colours inside EXISTING article content (vivid cyan
 * blue banners, pale cyan covers, …) — force into the palette
 * (Genio 2026-06-11 「ショッピングブルーは使ってない」). */
.article-body .has-background {
    background-color: var(--wp--preset--color--beige, #e7f1f7) !important;
}
.article-body .has-background.has-white-color {
    background-color: var(--wp--preset--color--navy, #32442f) !important;
}
/* cover の暗幕(ベージュ)を強めて、画像の上の文字(森緑)を確実に読めるようにする。
   旧 dimRatio 0.3-0.5 では花柄等の画像上で緑文字が埋もれる → 0.86 に上げて画像を
   ソフトな wash に muted（Kohei 2026-06-29「文字裏のBG画像がよみづらい」）。.entry-content
   配下の記事(interview/about-kr 等)にも効くよう両ラッパーを対象に。 */
.article-body .wp-block-cover__background,
.entry-content .wp-block-cover__background {
    background-color: var(--wp--preset--color--beige, #e7f1f7) !important;
    opacity: 0.86 !important;
}
.article-body .has-text-color:not(.has-white-color) {
    color: var(--wp--preset--color--navy, #32442f) !important;
}

/* PAIRING RULES (Genio 2026-06-12: 講演会ボタンが白文字×水色地で不可視):
 * whenever a legacy background is remapped to the light palette, the text
 * inside must come back to navy in the SAME stylesheet. White text is only
 * legitimate inside the navy box (.has-background.has-white-color). */
/* legacy Gutenberg buttons → site chip-button language (kills white-on-light
 * AND the rounded pill in one move) */
.article-body .wp-block-button__link {
    background: #fff !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
    border: 1px solid rgba(50, 68, 47, 0.3) !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
/* text inside inline-styled boxes whose bg was remapped to beige */
.article-body .wp-block-post-content [style*="background"]:not(.hpp-rec):not(.hpp-rec *):not(mark),
.article-body .wp-block-post-content [style*="background"]:not(.hpp-rec):not(.hpp-rec *):not(mark) :is(p, span, a, strong, em, li, h2, h3, h4) {
    color: var(--wp--preset--color--navy, #32442f) !important;
}
/* EXCEPTION: 旧「濃色地＋白文字」バナー見出し（#00b379 等 ＋ has-white-color）は
   bg を navy 箱に remap 済み。上の規則が中の文字(strong等)まで navy にして navy on navy で
   消えるため、navy 箱の中は白文字に固定して可読に戻す（Kohei 2026-06-29「見えない箇所」）。 */
.article-body .has-background.has-white-color,
.article-body .has-background.has-white-color :is(p, span, a, strong, em, li, h2, h3, h4, h5) {
    color: var(--wp--preset--color--white, #fff) !important;
}
/* white-preset text not sitting in the navy box */
.article-body .has-white-color:not(.has-background):not(.has-background.has-white-color *) {
    color: var(--wp--preset--color--navy, #32442f) !important;
}
/* inline white text not sitting in the navy box */
.article-body .wp-block-post-content :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"],
    [style*="color:#ffffff"], [style*="color: #ffffff"], [style*="color:#FFFFFF"], [style*="color: #FFFFFF"],
    [style*="color:white"], [style*="color: white"], [style*="color:rgb(255"], [style*="color: rgb(255"]):not(.hpp-rec *):not(.has-background.has-white-color *) {
    color: var(--wp--preset--color--navy, #32442f) !important;
}
/* cover blocks were remapped to beige — their overlay text follows */
.article-body .wp-block-cover .has-white-color,
.article-body .wp-block-cover p {
    color: var(--wp--preset--color--navy, #32442f) !important;
}
/* legacy magenta/purple accent text pasted inline in old content (the
 * Hawaiian prayer lines etc.: color:#98167f / #c71585 / #a0047f) → palette
 * green. Genio 2026-06-23 (i_am_the_i / peace_of_i looked half-baked). */
.article-body :is([style*="#98167f"], [style*="#98167F"], [style*="#c71585"],
    [style*="#C71585"], [style*="#a0047f"], [style*="#A0047F"]) {
    color: var(--wp--preset--color--navy, #32442f) !important;
}


/* ============================================================
 * MIGRATED ARTICLE NORMALIZATION (Genio 2026-06-23 review)
 * Imported posts carry two things the new theme never styled:
 *  (A) stray <style> blocks pasted into the body with BARE element
 *      selectors (e.g. h2{color:#c71585;border-left:4px double …}) —
 *      .article-body specificity (0,1,1) beats them (0,0,1);
 *  (B) the old theme's utility CLASSES (.bg_gray/.box01/.color06/
 *      .area*…) which have NO css here → colour-coded boxes collapse
 *      to a flat text wall.
 * Part B recreates the colour separation in the new water-blue /
 * green palette (Genio Q2 = 再現, fonts follow the new theme).
 * ============================================================ */

/* A) headings back to the palette: kills pasted pink colour + the
 *    double side-border + the shrunk size. White overlay headings
 *    (handled above) are excluded. */
.article-body :is(h1, h2, h3, h4, h5, h6):not(.has-white-color) {
    color: var(--wp--preset--color--navy, #32442f) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* size off the locked ladder (26 sub-head / 22 body); no !important so
 *    intentional class-scoped headings can still win, but beats the
 *    pasted bare h2{font-size:var(--fs-b)} (0,0,1). */
/* In-article section headings must sit BELOW the page title (h1=36): the
 * global `h2{36 !important}` was forcing in-article h2 to 36 = same as the
 * title (looked like a second title — Genio 2026-06-25). !important here +
 * higher specificity (.article-body h2) beats the global. Page title stays
 * 36 (it's .article-title). Section headings = 22 (distinguished by weight/
 * letter-spacing), h6 small label = 16. */
.article-body h2 { font-size: var(--fs-b) !important; line-height: 1.7; }
.article-body h3 { font-size: var(--fs-b) !important; line-height: 1.8; }
.article-body h4 { font-size: var(--fs-b) !important; line-height: 1.8; }
.article-body h5 { font-size: var(--fs-b) !important; line-height: 1.8; }
.article-body h6 { font-size: var(--fs-s) !important; line-height: 1.8; }
/* Section headings stand apart from body by WEIGHT, not size (Genio
 * 2026-06-25「記事内セクションだけBOLD」): same 22px as body but bold. h6
 * stays a quiet small label (--w-base). */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5 { font-weight: var(--w-bold) !important; }

/* B) old utility classes recreated in the palette. TWO tints only so
 *    the design stays within white / water-blue / green:
 *    calm box = light water-blue, emphasis box = deeper water-blue,
 *    strong banner = green. */
.article-body :is(.bg_gray, .bg_ghostwhite, .bg_snow, .bg-rightblue, .bg-rightblue2,
    .areablue, .areamintcream, .areasnow, .arealinen, .areaantiquewhite) {
    background-color: var(--wp--preset--color--beige, #e7f1f7) !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
}
.article-body :is(.bg-rightpink, .bg-rightpink2, .bkcolor01, .areapink,
    .areasnowwhite, .areapalegoldenrod-title) {
    background-color: var(--wp--preset--color--beige-deep, #c6d6e4) !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
}
.article-body .bg_deeppur {
    background-color: var(--wp--preset--color--navy, #32442f) !important;
    color: #fff !important;
}
.article-body .bg_deeppur :is(p, span, a, strong, em, li, h2, h3, h4) {
    color: #fff !important;
}
/* old purple emphasis text → green */
.article-body .color06 { color: var(--wp--preset--color--navy, #32442f) !important; }
/* padded section wraps (the boxes had built-in padding in the old css) */
.article-body .wrap05 { padding: 40px 30px 24px !important; }
.article-body :is(.areapink, .areablue, .arealinen, .areamintcream,
    .areasnow, .areaantiquewhite) { padding: 32px !important; }
.article-body :is(.areasnowwhite, .areapalegoldenrod-title) { padding: 16px !important; }
.article-body .areapalegoldenrod-title { text-align: center !important; }
.article-body .box01 { border-radius: 0 !important; }   /* squared corners, Aman */
.article-body .mgb30 { margin-bottom: 30px !important; }
.article-body .font18 { font-size: var(--fs-b) !important; }   /* legacy size → body ladder */
/* legacy table → hairline grid in the palette */
.article-body .tbl01 {
    width: 100%; background: var(--wp--preset--color--beige-deep, #c6d6e4) !important;
    border-collapse: separate; border-spacing: 1px;
}
.article-body .tbl01 :is(td, th) { background: #fff; padding: 10px 12px; }
/* クラス/講演会ページの受講料テーブルを洗練（Genio 2026-06-29「装飾でかっこよく」）:
   中央寄せ・余白広め・見出し行は淡い地、価格は少し大きく立てる。文字は増やさない。 */
.single-class .article-body .tbl01,
.single-seminar .article-body .tbl01,
.single-class .class-prose .tbl01,
.single-seminar .class-prose .tbl01 {
    max-width: 560px; margin: 6px auto 0; background: transparent !important;
    border: 1px solid var(--hair, #c6d6e4); border-spacing: 0; border-collapse: collapse;
}
.single-class .tbl01 :is(td, th),
.single-seminar .tbl01 :is(td, th) {
    background: transparent !important; text-align: center;
    padding: 16px 14px; border-bottom: 1px solid var(--hair-light, #d4e2ee);
    font-size: var(--fs-b);
}
.single-class .tbl01 .bg-rightblue, .single-seminar .tbl01 .bg-rightblue {
    background: rgba(47, 93, 52, .07) !important; font-weight: 600; letter-spacing: .08em;
}
.single-class .tbl01 .bg-rightblue2, .single-seminar .tbl01 .bg-rightblue2 {
    background: rgba(47, 93, 52, .035) !important; color: var(--navy-mute); font-size: var(--fs-s);
}
/* shortcodes-ultimate spoiler title bar → water-blue */
.article-body .su-spoiler-title {
    background: var(--wp--preset--color--beige, #e7f1f7) !important;
    color: var(--wp--preset--color--navy, #32442f) !important;
}
/* KR handwriting note → beige note card in palette */
.article-body .krnote_wrap {
    background: var(--wp--preset--color--beige, #e7f1f7) !important;
    box-shadow: 2px 2px 10px 2px var(--wp--preset--color--beige-deep, #c6d6e4) !important;
    padding: 3em 2em; width: 95%; margin: 30px auto;
}


/* floated images in legacy content: cap on PC, unfloat on phones —
 * a 239px float inside a 342px box was stacking text one char per line
 * (Genio screenshot 2026-06-11). */
.article-body .alignleft,
.article-body .alignright {
    max-width: 45%;
}
@media (max-width: 768px) {
    /* Broadened 2026-06-25: these also break inside .entry-content (post types
       morrnah / notice / reading / interview use .entry-content, not .article-body),
       where an alignleft/right size-full|is-resized figure shrinks to a narrow
       portrait image and squeezes its long <figcaption> to a 1-char column. Make
       the figure full-width so the caption gets the full width. */
    .article-body .alignleft,
    .article-body .alignright,
    .entry-content .wp-block-image.alignleft,
    .entry-content .wp-block-image.alignright {
        float: none !important;
        display: block;
        margin: 0 auto 20px;
        max-width: 100% !important;
        width: 100% !important;
    }
    .article-body .wp-block-image img,
    .entry-content .wp-block-image.alignleft img,
    .entry-content .wp-block-image.alignright img { max-width: 100%; height: auto; }
    .article-body .wp-block-image figcaption,
    .entry-content .wp-block-image figcaption { display: block; width: 100% !important; }
}


/* article-top chip row (teacher + genre) — each chip is one tappable unit;
 * a long name moves its whole chip to the next line instead of splitting */
.article-teacher-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}
.article-body .article-teacher-chips .hpp-rec-teacher {
    font-size: var(--fs-s);
    letter-spacing: .1em;
    padding: 9px 18px;
    margin-bottom: 0;
    max-width: 100%;
}

/* ============================================================
   #16 KR pages (kamaile-rafaelovich CPT) + izi/private-session
   Ported from preview inline <style> blocks, font sizes normalised
   to the locked ladder (14/18/22/26/36). v0.28.0
   ============================================================ */

/* ---- shared KR service pages (personal / business / absentee / land / message) ---- */
.service-hero { background: var(--white); padding: 24px 0 60px; text-align: center; }
.service-hero-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.service-hero p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 20px; }
.service-body { padding: 100px 0; }
.service-body-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.service-body h2 {
  font-size: var(--fs-b); letter-spacing: .18em; line-height: 1.7;
  color: var(--navy); margin-bottom: 24px; margin-top: 50px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.service-body h2:first-child { margin-top: 0 }
/* クラス/講演会ページの装飾（Genio 2026-06-29「文字だらけ→もっとかっこよく」）:
   各セクション見出しの上に細い縦のアクセント線＋字間ゆとりで、文字だけの単調さを緩和。
   class/seminar の single にスコープ。 */
.single-class .service-body h2::before,
.single-seminar .service-body h2::before {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 0 auto 20px;
  background: linear-gradient(to bottom, transparent, var(--navy-mute, rgba(47,93,52,.55)), transparent);
}
.single-class .service-body h2,
.single-seminar .service-body h2 { letter-spacing: .22em; }
/* --- EN install only: tighten heading tracking (Kohei 2026-07-01) ---
   The 0.18–0.24em tracking suits CJK but reads as spaced-out capitals in Latin
   ("A b o u t   C a n c e l l a t i o n"). Scope via <html lang="en-US"> so
   JP (ja) / TW (zh-TW) keep their airy CJK tracking. */
html[lang^="en"] h2.sec-title,
html[lang^="en"] .sec-title,
html[lang^="en"] .ta-name,
html[lang^="en"] .service-body h2,
html[lang^="en"] .single-class .service-body h2,
html[lang^="en"] .single-seminar .service-body h2,
html[lang^="en"] .service-booking h2 { letter-spacing: .05em; }
.service-body p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 20px; }
.service-body ul { list-style: none; padding: 0; margin: 20px 0; }
.service-body ul li {
  font-size: var(--fs-b); line-height: 2; letter-spacing: .08em;
  color: var(--navy-soft);
  padding-left: 24px; position: relative;
  margin-bottom: 10px;
}
.service-body ul li::before { content: '・'; position: absolute; left: 0; color: var(--navy-mute); }
.service-body blockquote {
  margin: 40px 0; padding: 30px 24px;
  border-left: 1px solid var(--navy-thread);
  font-style: italic; color: var(--navy);
  font-size: var(--fs-b); line-height: 2.2; letter-spacing: .08em;
}
.service-booking { background: var(--white); padding: 100px 0; text-align: center; }
.service-booking--beige { background: var(--beige); }
.service-booking-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* KR service-page action buttons (Genio 2026-06-15): refined replacement for
   the old green pills — solid primary (anchors to #booking) + ghost secondary.
   Aman discipline: no rounded corners, serif, letter-spaced. */
.kr-actions-sec { background: var(--white); padding: 6px 0 46px; }
.kr-actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: stretch;
  padding: 0 24px;
}
.kr-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; padding: 17px 30px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  /* 16px = the site button size (.tp-session-btn). 16px+ for tap legibility
     (Genio 2026-06-16; was 14). */
  font-size: var(--fs-s); letter-spacing: .16em; line-height: 1.5;
  text-align: center; text-decoration: none;
  transition: background .35s ease, color .35s ease, letter-spacing .35s ease, border-color .35s ease;
}
.kr-action--primary {
  background: var(--navy); color: #fdfcf8; border: 1px solid var(--navy);
}
.kr-action--primary:hover { background: #44583f; letter-spacing: .22em; }
.kr-action--ghost {
  background: transparent; color: var(--navy); border: 1px solid var(--navy-thread);
}
.kr-action--ghost:hover { border-color: var(--navy); letter-spacing: .22em; }
@media (max-width: 600px) {
  .kr-actions { flex-direction: column; }
  .kr-action { width: 100%; min-width: 0; }
}
.service-booking h2 {
  font-size: var(--fs-b); letter-spacing: .2em;
  color: var(--navy); margin-bottom: 24px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.amelia-placeholder { text-align: center; padding: 80px 20px; border: 1px dashed var(--navy-thread); margin-top: 30px; }
.amelia-placeholder p { color: var(--navy-mute); font-size: var(--fs-s); line-height: 2; letter-spacing: .08em; }
.kr-booking-embed { margin-top: 30px; text-align: left; }
@media (max-width: 768px) {
  .service-hero { padding: 18px 0 40px }
  .service-body { padding: 70px 0 }
  .service-booking { padding: 70px 0 }
  .service-body h2 { }
}

/* ---- who-kr-is ---- */
.kr-portrait-band { background: var(--white); padding: 80px 0 100px; }
.kr-portrait-inner {
  max-width: 900px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 320px 1fr;
  gap: 60px; align-items: start;
}
.kr-photo { aspect-ratio: 3/4; background: var(--beige-deep); overflow: hidden; filter: sepia(0.12); }
.kr-photo img { width: 100%; height: 100%; object-fit: cover }
.kr-meta-line {
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .22em;
  color: var(--navy-mute); margin-bottom: 20px;
}
.kr-name-en { font-family: var(--ff-en); font-style: italic; font-size: var(--fs-b); color: var(--navy-mute); margin-bottom: 10px; }
.kr-name-jp {
  font-size: var(--fs-b); letter-spacing: .14em; line-height: 1.5;
  color: var(--navy); margin-bottom: 32px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.kr-name-aka { display: block; font-size: var(--fs-s); letter-spacing: .14em; color: var(--navy-mute); margin-top: 8px; }
.kr-bio p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 20px; }
.kr-history { background: var(--beige); padding: 100px 0; }
.kr-history-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.kr-history h2 {
  font-size: var(--fs-b); letter-spacing: .2em; line-height: 1.6;
  color: var(--navy); margin-bottom: 40px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  text-align: center;
}
.kr-history p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 22px; text-align: left; }
.kr-history p:last-child { margin-bottom: 0 }
.kr-history-signoff {
  margin-top: 50px; text-align: center;
  font-family: var(--ff-en); font-style: italic;
  font-size: var(--fs-s); letter-spacing: .14em; line-height: 1.9;
  color: var(--navy-mute);
}
.kr-pull-quote { background: var(--beige); padding: 100px 0; text-align: center; }
.kr-pull-quote p {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
  font-family: var(--ff-jp); font-style: italic; font-weight: var(--w-base);
  font-size: var(--fs-b); line-height: 1.9; letter-spacing: .14em;
  color: var(--navy);
}
.kr-personal-cta { background: var(--white); padding: 120px 0; text-align: center; }
.kr-personal-cta-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.kr-personal-cta h2 {
  font-size: var(--fs-b); letter-spacing: .2em;
  color: var(--navy); margin-bottom: 22px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.kr-personal-cta p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 36px; }
.kr-individual .lead-note {
  font-size: var(--fs-s); line-height: 2; letter-spacing: .08em;
  color: var(--navy-mute);
  border-left: 2px solid var(--navy-thread);
  padding-left: 16px; margin-top: 30px;
  font-style: italic;
}
.kr-service-feature { padding: 100px 0; }
.kr-service-feature-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.kr-service-feature h2 {
  font-size: var(--fs-b); letter-spacing: .2em; line-height: 1.6;
  color: var(--navy); margin-bottom: 30px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.kr-service-feature p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 30px; text-align: left; }
.kr-services-intro { background: var(--white); padding: 70px 0 30px; text-align: center; }
.kr-services-eyebrow {
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .32em; color: var(--navy-mute);
  margin-bottom: 14px;
}
.kr-services-title { font-family: var(--ff-en); font-style: italic; font-size: var(--fs-b); letter-spacing: .14em; color: var(--navy); line-height: 1.6; }
.kr-section-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin: 70px auto 0; max-width: 280px;
  color: var(--navy-mute);
}
.kr-section-divider::before,
.kr-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--navy-thread); }
.kr-section-divider-mark { font-family: var(--ff-en); font-style: italic; font-size: var(--fs-s); letter-spacing: .32em; }
.kr-service-num { font-family: var(--ff-en); font-style: italic; font-size: var(--fs-s); letter-spacing: .32em; color: var(--navy-mute); margin-bottom: 14px; }
.kr-bio-links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 24px; }
.kr-bio-link {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .14em;
  color: var(--navy);
  border-bottom: 1px solid var(--navy-thread);
  padding: 4px 0 4px;
  transition: letter-spacing .5s ease, border-color .4s ease;
}
.kr-bio-link:hover { border-color: var(--navy); letter-spacing: .22em; }
.kr-message-pointer { background: var(--white); padding: 80px 0; text-align: center; border-top: 1px solid var(--navy-thread); }
.kr-message-pointer-inner { max-width: 600px; margin: 0 auto; padding: 0 24px; }
.kr-message-pointer p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 24px; }
@media (max-width: 768px) {
  .kr-portrait-band { padding: 100px 0 60px }
  .kr-portrait-inner { grid-template-columns: 1fr; gap: 30px; padding: 0 30px }
  .kr-photo { max-width: 220px; margin: 0 auto }
  .kr-name-jp { }
  .kr-history { padding: 70px 0 }
  .kr-history h2 { }
  .kr-pull-quote { padding: 60px 0 }
  .kr-pull-quote p { }
  .kr-personal-cta { padding: 80px 0 }
  .kr-personal-cta h2 { }
  .kr-service-feature { padding: 70px 0 }
  .kr-service-feature h2 { }
  .kr-message-pointer { padding: 60px 0 }
  .kr-section-divider { margin: 50px auto; max-width: 200px; gap: 16px }
  .kr-bio-links { justify-content: center; gap: 14px 20px; margin-top: 22px }
}

/* ---- kr-movies ---- */
.kr-movies-intro { background: var(--white); padding: 70px 0 30px; text-align: center; }
.kr-movies-intro-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.kr-movies-intro p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); }
.kr-movies-grid-sec { background: var(--white); padding: 40px 0 140px; }
.kr-cross-nav-back {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .18em; color: var(--navy);
  border-bottom: 1px solid var(--navy-thread);
  padding-bottom: 5px;
  transition: letter-spacing .5s ease, border-color .4s ease;
}
.kr-cross-nav-back:hover { letter-spacing: .26em; border-color: var(--navy); }

/* "KR にできること" cross-nav heading + subtitle (Genio 2026-06-15). The
   title carried a 50px gap for the old eyebrow layout; tighten it now that a
   one-line subtitle sits between the heading and the links. */
.kr-cross-nav-title {
  margin-bottom: 14px;
}
.kr-cross-nav-sub {
  /* 15px was off the 36/22/18/14 ladder; 14 = the label size (Genio 2026-06-15). */
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .1em; line-height: 1.9;
  color: var(--navy-soft);
  text-align: center;
  margin-bottom: 46px;
}

/* Simplified KR cross-nav: clean centred text links, no photos
   (Genio 2026-06-15). */
.kr-cross-links {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  text-align: center;
}
.kr-cross-links li { margin: 0; }
.kr-cross-links li + li { margin-top: 22px; }
.kr-cross-links a {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  /* cross-nav links — were 18 (mobile-body), looked undersized on PC. Body tier
     now: 22 desktop / 18 mobile via the global ladder (Genio 2026-06-16). */
  font-size: var(--fs-b); letter-spacing: .12em; line-height: 1.7;
  color: var(--navy);
  border-bottom: 1px solid var(--navy-thread);
  padding-bottom: 6px;
  transition: letter-spacing .5s ease, border-color .4s ease;
}
.kr-cross-links a:hover { letter-spacing: .2em; border-color: var(--navy); }
@media (max-width: 768px) {
  .kr-movies-intro { padding: 50px 0 20px }
  .kr-movies-grid-sec { padding: 30px 0 90px }
}

/* ---- izi/private-session ---- */
.sessions-intro { background: var(--white); padding: 100px 0; }
.sessions-intro-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sessions-intro p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 18px; }
.sessions-intro p:last-child { margin-bottom: 0 }
.instructors-grid-sec { background: var(--beige); padding: 120px 0; }
.instructors-grid-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; }
.instructors-grid { display: grid; grid-template-columns: 1fr; gap: 60px 50px; margin-top: 60px; }
@media (min-width: 720px) {
  .instructors-grid { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; margin-top: 60px; }
}
.instructor-card { text-align: center; background: var(--white); padding: 36px 28px; border: 1px solid var(--navy-thread); }
.inst-photo {
  aspect-ratio: 3/4; background: var(--beige-deep);
  overflow: hidden; margin-bottom: 24px;
  filter: sepia(0.10);
  max-width: 220px; margin-left: auto; margin-right: auto;
}
.inst-photo img { width: 100%; height: 100%; object-fit: cover; }
.inst-en { font-family: var(--ff-en); font-style: italic; font-size: var(--fs-s); color: var(--navy-mute); margin-bottom: 8px; }
.inst-jp {
  /* instructor name — was 18 (mobile-body size), looked undersized on PC
     (Genio 2026-06-16: session pages too small). On the body/name tier now. */
  font-size: var(--fs-b); letter-spacing: .14em; color: var(--navy);
  line-height: 1.6; margin-bottom: 14px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
/* Long instructor names (e.g. クリスティーン・レイマカマエ・チュウ) are dictionary-
   nowrap'd, which overflows a narrow card. In this box let the name wrap at the
   ・ break points instead of spilling out (Kohei 2026-06-29). */
.inst-jp .nowrap { white-space: normal; }
.inst-msg { margin: 18px auto 14px; text-align: center; }
.inst-msg-toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .14em;
  color: var(--navy-mute);
  padding: 10px 14px;
  border-bottom: 1px solid var(--navy-thread);
  transition: color .3s ease, border-color .3s ease;
  user-select: none;
}
.inst-msg-toggle::-webkit-details-marker { display: none; }
.inst-msg-toggle::marker { content: ''; }
.inst-msg-toggle:hover { color: var(--navy); border-color: var(--navy); }
.inst-msg-icon { display: inline-block; font-family: var(--ff-en); font-size: var(--fs-s); transition: transform .3s ease; }
.inst-msg[open] .inst-msg-icon { transform: rotate(180deg); }
.inst-msg-toggle-close { display: none; }
.inst-msg[open] .inst-msg-toggle-open { display: none; }
.inst-msg[open] .inst-msg-toggle-close { display: inline; }
.inst-msg-body {
  margin-top: 18px; padding: 18px 4px 6px;
  text-align: left;
  /* instructor message = body reading text; was 14 (clearly small on PC —
     Genio 2026-06-16). Body tier: 22 desktop / 18 mobile (ladder). */
  font-size: var(--fs-b); line-height: 2.0; letter-spacing: .04em;
  color: var(--navy-soft);
}
.inst-msg-body p { margin-bottom: 14px; }
.inst-msg-body p:last-child { margin-bottom: 0; }
.inst-msg-source {
  margin-top: 14px;
  font-family: var(--ff-en);
  font-size: var(--fs-s); letter-spacing: .14em;
  color: var(--navy-mute);
  text-align: center;
  font-style: normal;
}
.inst-profile-link {
  /* was 12px (off the 36/22/18/14 ladder, looked too small — Genio 2026-06-15) */
  display: inline-block; margin-top: 14px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .12em;
  color: var(--navy-mute);
  border-bottom: 1px solid var(--navy-thread);
  padding-bottom: 3px;
  transition: color .4s ease, border-color .4s ease;
}
.inst-profile-link:hover { color: var(--navy); border-color: var(--navy); }
.session-booking { background: var(--beige); padding: 100px 0; }
.session-booking-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.booking-intro { text-align: center; margin: 40px auto 20px; max-width: 600px; }
.booking-intro p { font-size: var(--fs-b); line-height: 2; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 12px; }
.booking-hint {
  text-align: center;
  margin: 0 auto 50px; max-width: 640px;
  font-size: var(--fs-s); line-height: 2; letter-spacing: .12em;
  color: var(--navy-mute);
  font-style: italic;
}
.amelia-embed { margin-top: 40px; }
.session-info { background: var(--white); padding: 100px 0; text-align: center; }
.session-info-inner { max-width: 600px; margin: 0 auto; padding: 0 24px; }
.session-info h3 {
  font-size: var(--fs-b); letter-spacing: .18em; line-height: 1.6;
  color: var(--navy); margin-bottom: 20px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.session-notes { text-align: left; margin: 30px auto 40px; display: inline-block; }
.session-notes p { font-size: var(--fs-b); line-height: 2; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 8px; }
.session-contact { font-size: var(--fs-s); line-height: 2; letter-spacing: .08em; color: var(--navy-soft); margin-top: 20px; }
.session-contact a { color: var(--navy); border-bottom: 1px solid var(--navy-thread); }
@media (max-width: 768px) {
  .sessions-intro { padding: 70px 0 }
  .instructors-grid-sec { padding: 80px 0 }
  .instructors-grid-inner { padding: 0 20px }
  .instructors-grid { gap: 40px; }
  .instructor-card { padding: 28px 22px; }
  .session-booking { padding: 70px 0 }
  .session-info { padding: 70px 0 }
}

/* ============================================================
   #17 cleaning tools (home + 4 categories) + contact. v0.28.1
   ============================================================ */
.ct-intro { background: var(--white); padding: 16px 0 40px; }
.ct-intro-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.ct-intro p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); text-align: left; }
.ct-quote { margin: 40px 0 0; padding: 30px 24px; border-left: 1px solid var(--navy-thread); font-style: italic; color: var(--navy); font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; text-align: left; }
.ct-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: var(--fs-s); letter-spacing: .14em; color: var(--navy-mute); }
.ct-cats { background: var(--beige); padding: 100px 0 120px; }
.ct-cats-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.ct-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 720px) { .ct-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 40px; } }
.ct-card { display: block; background: var(--white); border: 1px solid var(--navy-thread); padding: 28px 28px 34px; text-align: center; transition: border-color .4s ease; }
.ct-card:hover { border-color: var(--navy); }
.ct-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--beige-deep); margin-bottom: 22px; }
.ct-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.ct-card:hover .ct-thumb img { transform: scale(1.03); }
.ct-name { font-family: var(--ff-en); font-style: italic; font-size: var(--fs-b); letter-spacing: .14em; color: var(--navy); }
.ct-name-jp { font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .22em; color: var(--navy-mute); margin: 6px 0 14px; }
.ct-desc { font-size: var(--fs-s); line-height: 2; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 18px; text-align: center; }
.ct-more { display: inline-block; font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .14em; color: var(--navy); border-bottom: 1px solid var(--navy-thread); padding-bottom: 4px; transition: letter-spacing .5s ease, border-color .4s ease; }
.ct-card:hover .ct-more { letter-spacing: .22em; border-color: var(--navy); }
.ct-products { background: var(--beige); padding: 90px 0 120px; }
.ct-products-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* Single-product page: hide SKU + product category meta (Kohei 2026-07-01) */
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in { display: none; }
@media (max-width: 768px) {
  .ct-intro { padding: 14px 0 30px }
  .ct-cats { padding: 70px 0 90px }
  .ct-products { padding: 60px 0 90px }
}

/* Cleaning-tool HOME hero (Genio 2026-06-16): mirror the existing live page's
   structure — bilingual title「SITH Ho'oponopono / Cleaning Tool」, a short lead,
   and a 4-chip category filter that anchor-jumps to each section. New palette. */
.ct-hero { background: var(--white); padding: 0 0 56px; }
/* Hero lifestyle banner — faithful to the live page (shopmainimage.png). Wide
   landscape strip, hairline frame, muted saturation to sit in the Aman palette. */
.ct-hero-banner { max-width: 1180px; margin: 0 auto 48px; padding: 0 24px; }
.ct-hero-banner img {
  display: block; width: 100%; aspect-ratio: 16 / 6; object-fit: cover;
  border: 1px solid var(--navy-hair); filter: saturate(.92);
}
.ct-hero-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; text-align: center; }
.ct-hero-title {
  font-family: var(--ff-en); font-weight: var(--w-base); font-style: italic;
  font-size: var(--fs-h); line-height: 1.3; letter-spacing: .06em; color: var(--navy);
  margin: 0;
}
.ct-hero-title-sub { display: inline-block; }
.ct-hero-lead {
  max-width: 720px; margin: 26px auto 0;
  font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft);
  text-align: left;
}
.ct-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: 40px;
}
.ct-chip {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .14em;
  color: var(--navy); text-decoration: none;
  padding: 11px 26px; border: 1px solid var(--navy-hair); background: var(--white);
  transition: background .3s ease, color .3s ease, letter-spacing .3s ease;
}
.ct-chip:hover { background: var(--navy); color: #fdfcf8; letter-spacing: .2em; }
@media (max-width: 600px) {
  .ct-hero { padding: 4px 0 40px; }
  .ct-hero-title { font-size: var(--fs-h); }
  .ct-hero-lead { font-size: var(--fs-b); margin-top: 20px; }
  .ct-filter { gap: 10px; margin-top: 30px; }
  .ct-chip { font-size: var(--fs-s); padding: 9px 18px; }
}

/* Cleaning-tool HOME (Genio 2026-06-16): show real products+prices per category
   like the existing page, not bare category cards. Alternating white/beige
   sections, each with a heading + a 4-up product preview + a「全ての商品を見る」CTA.
   Reuses the .ct-products grid (neutralise its own section bg/padding here). */
.ct-cat-sec { padding: 64px 0 60px; }
.ct-cat-sec--white { background: var(--white); }
.ct-cat-sec--beige { background: var(--beige); }
.ct-cat-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* Per-category lifestyle banner (zerowiseimage / ceeportimage / krgoodsimage /
   shopmainimage) — like the live page, a wide photo opens each category. */
.ct-cat-banner { margin: 0 0 40px; }
.ct-cat-banner img {
  display: block; width: 100%; aspect-ratio: 16 / 6; object-fit: cover;
  border: 1px solid var(--navy-hair); filter: saturate(.92);
}
.ct-cat-head { text-align: center; margin-bottom: 48px; }
.ct-cat-intro {
  max-width: 760px; margin: 22px auto 0;
  font-size: var(--fs-b); line-height: 2.05; letter-spacing: .06em; color: var(--navy-soft);
  text-align: left;
}
.ct-cat-title {
    display: inline-block;
    font-size: var(--fs-b) !important; letter-spacing: .2em; color: var(--navy);
    font-family: var(--ff-jp); font-weight: var(--w-base);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--navy-hair);
}
.ct-cat-jp { margin-top: 8px; font-size: var(--fs-s); letter-spacing: .18em; color: var(--navy-mute); }
.ct-cat-sec .ct-products { background: transparent; padding: 0; }
.ct-cat-more { text-align: center; margin-top: 44px; }
@media (max-width: 600px) {
  .ct-cat-sec { padding: 44px 0 44px; }
  .ct-cat-head { margin-bottom: 36px; }
  .ct-cat-title { font-size: var(--fs-b) !important; padding-bottom: 12px; }
  .ct-cat-banner { margin-bottom: 28px; }
  .ct-cat-banner img { aspect-ratio: 16 / 9; }
  .ct-cat-intro { font-size: var(--fs-s); line-height: 1.95; margin-top: 16px; }
  .ct-hero-banner { margin-bottom: 30px; }
  .ct-hero-banner img { aspect-ratio: 16 / 9; }
}

/* WooCommerce product loop — washi tiles in the site palette */
/* existing live page shows 4 products per row (4 columns) per category; mirror that:
   mobile 2-up -> tablet 2-up -> desktop 4-up. */
/* The body carries .woocommerce, so WooCommerce's own `.woocommerce ul.products`
   (display:flex / float, with per-item widths) ties or beats a plain
   `.ct-products ul.products` selector and silently broke the row into 3+1.
   Win specificity + force the grid so all 4 tiles share one row. */
.ct-products ul.products,
.woocommerce .ct-products ul.products {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px 20px !important; float: none !important;
}
@media (min-width: 720px) {
  .ct-products ul.products,
  .woocommerce .ct-products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 50px 30px !important; }
}
@media (min-width: 1000px) {
  .ct-products ul.products,
  .woocommerce .ct-products ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: 50px 28px !important; }
}
/* WooCommerce/theme clearfix injects `ul.products::before{content:" ";display:table}`.
   In a CSS grid that pseudo becomes a grid ITEM occupying cell 1 — it pushed the
   real tiles into tracks 2-4 and wrapped the 4th onto a new row (3+1 instead of 4).
   Remove the pseudo grid items so the 4 products share one row. */
.ct-products ul.products::before,
.ct-products ul.products::after,
.woocommerce .ct-products ul.products::before,
.woocommerce .ct-products ul.products::after { content: none !important; display: none !important; }
/* WooCommerce sets an inline width on each li.product (its float-layout default)
   that beat our rule and collapsed each tile to ~98px -> titles wrapped one
   character per line (Genio 2026-06-16 "壊れている"). Force the grid item to
   fill its track. */
.ct-products ul.products li.product {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--navy-thread);
  padding: 22px 20px 26px; text-align: center;
  margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0; float: none !important;
  transition: border-color .4s ease, transform .4s ease;
}
.ct-products ul.products li.product:hover { border-color: var(--navy-hair); transform: translateY(-3px); }
.ct-products ul.products li.product a { display: block; }
/* image + a hairline rule beneath it; natural ratio (no letterboxing). Imageless
   tiles (KR Goods / some Books) simply omit this block and stay shorter rather
   than collapsing — grid rows align by the tallest tile. */
.ct-products ul.products li.product img {
  width: 100%; height: auto;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--navy-thread);
}
.ct-products ul.products li.product .woocommerce-loop-product__title { font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-b); line-height: 1.75; letter-spacing: .06em; color: var(--navy); }
.ct-products ul.products li.product .price { display: block; margin-top: 10px; font-family: var(--ff-en); font-size: var(--fs-s); letter-spacing: .1em; color: var(--navy-soft); }
.ct-products ul.products li.product .price del { opacity: .5; margin-right: 6px; }
/* show the add-to-cart so visitors can order in one tap (Genio: 簡単に注文) */
.ct-products ul.products li.product .button,
.ct-products ul.products li.product .add_to_cart_button {
  display: inline-block; margin-top: 14px;
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .12em;
  color: #fdfcf8; background: var(--navy); border: 1px solid var(--navy);
  padding: 9px 22px; text-decoration: none; border-radius: 0; cursor: pointer;
  transition: background .3s ease, letter-spacing .3s ease;
}
.ct-products ul.products li.product .button:hover,
.ct-products ul.products li.product .add_to_cart_button:hover { background: #44583f; letter-spacing: .18em; }
.ct-products ul.products li.product .added_to_cart { display: inline-block; margin-top: 8px; font-size: var(--fs-s); letter-spacing: .1em; color: var(--navy); border-bottom: 1px solid var(--navy-thread); text-decoration: none; }
.ct-products .woocommerce-result-count, .ct-products .woocommerce-ordering { display: none; }
.ct-products ul.products li.product .onsale { background: var(--navy); color: #fff; font-size: var(--fs-s); padding: 2px 10px; position: absolute; top: 0; left: 0; }
/* tighten the 2-up tiles on phones so long product names stay legible */
@media (max-width: 600px) {
  .ct-products ul.products { gap: 30px 14px; }
  .ct-products ul.products li.product { padding: 16px 12px 20px; }
  .ct-products ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-s); letter-spacing: .02em; line-height: 1.7; }
  .ct-products ul.products li.product .button,
  .ct-products ul.products li.product .add_to_cart_button { padding: 9px 16px; letter-spacing: .08em; }
}

/* contact */
/* Contact page-head is intentionally tighter than the global one: the page has
   no subtitle and a short intro, so the standard 140/80 + h1 24px margin left a
   big blank gap (Genio 2026-06-16). Scope the tightening to this page only. */
.page-head--contact { padding: 88px 0 20px; }
.page-head--contact h1 { margin-bottom: 0; }
@media (max-width: 600px) {
    .page-head--contact { padding: 60px 0 14px; }
}
.contact-intro { background: var(--white); padding: 8px 0 30px; }
.contact-intro-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; }
.contact-intro p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); text-align: left; }
.contact-form-sec { background: var(--beige); padding: 90px 0 100px; }
.contact-form-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; }
/* These are SUB-section headings (subhead tier 26/22), not page titles — the
   global `h1,h2 { 36px !important }` was wrongly inflating them to title size,
   so the お問い合わせ先 block looked huge on mobile (Genio 2026-06-16). Match
   specificity + !important to land them back on the ladder. */
.contact-form-inner h2, .contact-info h2 {
  font-size: var(--fs-b) !important; letter-spacing: .2em; text-align: center;
  color: var(--navy); margin-bottom: 40px;
  font-family: var(--ff-jp); font-weight: var(--w-base);
}
.contact-form-embed .wpcf7 { font-family: var(--ff-jp); font-weight: var(--w-base); color: var(--navy-soft); }
.contact-form-embed .wpcf7 label { display: block; font-size: var(--fs-s); letter-spacing: .14em; color: var(--navy); margin-bottom: 6px; }
.contact-form-embed .wpcf7 p { margin-bottom: 26px; font-size: var(--fs-s); }
.contact-form-embed .wpcf7 input[type="text"],
.contact-form-embed .wpcf7 input[type="email"],
.contact-form-embed .wpcf7 input[type="tel"],
.contact-form-embed .wpcf7 textarea,
.contact-form-embed .wpcf7 select {
  width: 100%; background: var(--white); border: 1px solid var(--navy-thread);
  padding: 12px 14px; font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-b); color: var(--navy); border-radius: 0; -webkit-appearance: none;
}
.contact-form-embed .wpcf7 input:focus, .contact-form-embed .wpcf7 textarea:focus { outline: none; border-color: var(--navy); }
.contact-form-embed .wpcf7 input[type="submit"] {
  display: block; width: auto; margin: 10px auto 0; cursor: pointer;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  padding: 14px 60px; font-size: var(--fs-s); letter-spacing: .22em;
  transition: opacity .4s ease;
}
.contact-form-embed .wpcf7 input[type="submit"]:hover { opacity: .85; }
.contact-form-embed .wpcf7-not-valid-tip { color: #8a4a3a; font-size: var(--fs-s); margin-top: 6px; }
.contact-form-embed .wpcf7-response-output { border: 1px solid var(--navy-thread); padding: 14px; font-size: var(--fs-s); margin-top: 20px; }
.contact-info { background: var(--white); padding: 90px 0 120px; text-align: center; }
.contact-info-inner { max-width: 600px; margin: 0 auto; padding: 0 24px; }
.contact-info-body p { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 8px; }
.contact-info-body a { color: var(--navy); border-bottom: 1px solid var(--navy-thread); }
.contact-info-body p.contact-info-note { margin-top: 20px; font-size: var(--fs-s); color: var(--navy-mute); }
@media (max-width: 768px) {
  .contact-intro { padding: 4px 0 20px }
  .contact-form-sec { padding: 48px 0 70px }
  .contact-info { padding: 60px 0 90px }
  .contact-form-inner h2, .contact-info h2 { font-size: var(--fs-b) !important; }
}

/* ============================================================
   2026-06-12 Genio feedback batch (v0.29.0)
   ============================================================ */
/* ① the old per-post custom-CSS plugin (wp-add-custom-css) injects
   `h2 { padding:0.2rem 1rem; border-left:4px double #c71585; ... }`
   on imported posts — the pink double line. Neutralise on ALL headings.
   The SAME plugin also injects the old logo-bar rule
   `h1 { height:52px; display:flex; align-items:center; font-size:var(--fs-b) }`
   on some posts (e.g. KR who-kr-is, post 2417): the flex left-aligned the
   .ta-name despite text-align:center. Force headings back to block flow so
   centring works on every page. (Genio 2026-06-15) */
h1, h2, h3, h4 {
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    height: auto !important;
    align-items: normal !important;
}
/* ② italic is banned site-wide (Genio 2026-06-12 イタリック厳禁) */
body, body * { font-style: normal !important; }
/* ③ off-ladder leftover: rec-block heading 20 → 22 */
.article-body .hpp-rec > p:first-child { font-size: var(--fs-b) !important; }
/* ④ kr-deeper (izi page) had no layout styles → text ran edge-to-edge on
   mobile. Proper section + the same solid session button as teacher pages. */
.kr-deeper { background: var(--white); padding: 100px 0; text-align: center; }
.kr-deeper-inner { max-width: 700px; margin: 0 auto; padding: 0 24px; }
.kr-deeper-eyebrow { font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .2em; color: var(--navy-mute); margin-bottom: 20px; text-align: center; }
.kr-deeper-title { font-size: var(--fs-h) !important; letter-spacing: .18em; line-height: 1.7; color: var(--navy); margin-bottom: 30px; font-family: var(--ff-jp); font-weight: var(--w-base); }
.kr-deeper-desc { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .08em; color: var(--navy-soft); margin-bottom: 36px; }
.kr-deeper-cta {
    display: inline-block;
    background: var(--navy);
    color: #fff !important;
    border: 1px solid var(--navy);
    padding: 14px 36px;
    font-family: var(--ff-jp); font-weight: var(--w-base);
    font-size: var(--fs-s); letter-spacing: .22em;   /* site button size (Genio 2026-06-16; was 14) */
    transition: background .4s ease, letter-spacing .4s ease;
}
.kr-deeper-cta:hover { background: #44583f; letter-spacing: .26em; }
@media (max-width: 768px) {
    .kr-deeper { padding: 70px 0 }
    .kr-deeper-desc br { display: none }
}

/* ============================================
   Forminator forms — site skin (Genio 2026-06-15)
   ============================================
   Used on KR 遠隔ボディーワーク (4984) / ランドクリーニング (4401) and the
   体験談投稿フォーム (4845). Forminator ships a default flat skin with rounded
   teal accents — here we repaint it in the site language: single family
   Noto Serif JP, 濃緑 (navy) accents, water-blue focus, square corners.
   Scoped to .forminator-custom-form; !important only where Forminator's own
   stylesheet would otherwise win. Stripe field internals are left untouched. */
.forminator-ui.forminator-custom-form,
.forminator-ui.forminator-custom-form * {
  font-family: var(--ff-jp) !important;
  font-weight: var(--w-base);
  border-radius: 0 !important;
}
.forminator-ui.forminator-custom-form {
  color: var(--navy-soft);
}
/* section headings inside the form */
.forminator-custom-form .forminator-field-section {
  margin-top: 14px;
}
.forminator-custom-form .forminator-section,
.forminator-custom-form .forminator-section-title {
  color: var(--navy) !important;
  font-size: var(--fs-b) !important; letter-spacing: .12em; line-height: 1.6;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--navy-thread);
}
.forminator-custom-form .forminator-subtitle,
.forminator-custom-form .forminator-description {
  color: var(--navy-soft) !important;
  font-size: var(--fs-s); letter-spacing: .04em; line-height: 1.9;
}
/* field labels — the site's one weight: each form's own stylesheet sets 700 under an id selector, which outranked
   the rule above, and bold labels over pale boxes were what made the forms heavy to read (Kohei 1558466689136463962) */
.forminator-custom-form .forminator-label {
  color: var(--navy) !important;
  font-weight: var(--w-base) !important;
  font-size: var(--fs-s) !important; letter-spacing: .06em; line-height: 1.7;
  margin-bottom: 8px;
}
.forminator-custom-form .forminator-required {
  color: var(--navy-mute) !important;
}
/* text / email / textarea / date / select inputs */
/* the box: white on the page with one clear hairline (the page is --white too, so a .12 line alone hardly showed it) */
.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form input.forminator-date-input,
.forminator-custom-form select.forminator-select,
.forminator-custom-form .forminator-select2 .select2-selection {
  background: #fff !important;
  color: var(--navy) !important;
  border: 1px solid var(--navy-hair) !important;
  font-size: var(--fs-s) !important;            /* >=16 prevents iOS zoom */
  letter-spacing: .04em;
  padding: 13px 16px !important;
  box-shadow: none !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.forminator-custom-form .forminator-textarea { min-height: 150px; }
.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus,
.forminator-custom-form input.forminator-date-input:focus,
.forminator-custom-form select.forminator-select:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px var(--beige) !important;   /* water-blue focus ring */
  outline: none !important;
}
.forminator-custom-form .forminator-input::placeholder,
.forminator-custom-form .forminator-textarea::placeholder {
  color: var(--navy-mute); opacity: 1;
}
/* Year / Month / Day: three boxes side by side, not three boxes inside a fourth (div.forminator-date-input wraps them) */
.forminator-custom-form div.forminator-date-input {
  background: none !important; border: 0 !important; padding: 0 !important;
}
/* radios + checkboxes */
.forminator-custom-form .forminator-radio,
.forminator-custom-form .forminator-checkbox { color: var(--navy-soft) !important; }
.forminator-custom-form input[type="radio"],
.forminator-custom-form input[type="checkbox"] { accent-color: var(--navy); }
.forminator-custom-form .forminator-radio-bullet,
.forminator-custom-form .forminator-checkbox-box {
  /* Kohei 2026-07-22: the frame was invisible on the 水色/white section BG.
     Root cause: Forminator's flat design ships these with border-style:none,
     so the old `border-color`-only rule (and any border-width) computed to a
     0px border = nothing rendered. Use the `border` shorthand to force a
     solid, visible ring. Border-only — leave the checked-state fill (drawn by
     Forminator's ::before ✓/dot) untouched. */
  border: 2px solid var(--navy-mute) !important;
}
/* Kohei 2026-07-22: selected radio showed no dot. Forminator's flat checked-dot
   rule is gated on the [data-design="flat"] ATTRIBUTE, but our forms carry
   `forminator-design--flat` as a CLASS — so the dot stayed transparent / ~0
   opacity = invisible. Force a filled green dot on the checked bullet's ::before.
   (Checkboxes are unaffected — their ✓ already renders.) */
.forminator-custom-form .forminator-radio input[type="radio"]:checked + .forminator-radio-bullet::before,
.forminator-custom-form .forminator-radio.forminator-is_checked .forminator-radio-bullet::before {
  background-color: var(--navy) !important;
  opacity: 1 !important;
}
/* Radios must read as round (= pick one) vs square checkboxes (= pick many).
   The flat theme reset left the bullet at border-radius:0, so single-select
   radios looked like checkboxes. Make the bullet + its dot round. */
.forminator-custom-form .forminator-radio-bullet,
.forminator-custom-form .forminator-radio-bullet::before {
  border-radius: 50% !important;
}
.forminator-custom-form .forminator-radio-label,
.forminator-custom-form .forminator-checkbox-label {
  color: var(--navy-soft) !important;
  font-size: var(--fs-s) !important; letter-spacing: .04em;
}
/* submit button — matches .kr-action--primary / .tp-session-btn */
.forminator-custom-form .forminator-button,
.forminator-custom-form .forminator-button-submit {
  background: var(--navy) !important;
  color: #fdfcf8 !important;
  border: 1px solid var(--navy) !important;
  font-size: var(--fs-s) !important; letter-spacing: .18em !important;
  padding: 15px 38px !important;
  box-shadow: none !important;
  transition: background .35s ease, letter-spacing .35s ease !important;
}
.forminator-custom-form .forminator-button:hover,
.forminator-custom-form .forminator-button-submit:hover {
  background: #44583f !important; letter-spacing: .24em !important;
}
/* response / error messaging */
.forminator-custom-form .forminator-error-message,
.forminator-custom-form .forminator-response-message.forminator-error {
  color: #9a4a3a !important; font-size: var(--fs-s);
}
/* select2 needs its own white: the rendered .select2-container is a SIBLING of
   the original <select> (so ".forminator-select2 .select2-selection" never
   matches) and the open options panel is appended to <body>, outside the form
   (Kohei 2026-07-02: pulldown transparent, page shows through). */
.forminator-custom-form .select2-container .select2-selection--single,
.forminator-custom-form .select2-container .select2-selection--multiple {
  background: #fff !important;
  border: 1px solid var(--navy-hair) !important;
  color: var(--navy) !important;
}
.forminator-custom-form .select2-container .select2-selection__rendered {
  color: var(--navy) !important;
}
.select2-container .select2-dropdown,
.forminator-select-dropdown {                /* Forminator renames select2's panel */
  background: var(--white, #fff) !important;
  border: 1px solid var(--navy-thread, rgba(47, 93, 52, .12)) !important;
  box-shadow: 0 10px 24px rgba(47, 93, 52, .10);
}
.select2-container .select2-results__option {
  background: var(--white, #fff);
  color: var(--navy, #2f5d34);
  font-size: var(--fs-s);
}
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option[aria-selected="true"] {
  background: var(--beige, #e7f1f7) !important;
  color: var(--navy, #2f5d34) !important;
}

/* ============================================
   Contact Form 7 forms — site skin (Genio 2026-06-15)
   ============================================
   Used on class registration (CF7 5285, recovered onto single-class) and the
   お問い合わせ page. Mirrors the Forminator skin: single Noto Serif JP, 濃緑
   accents, square corners, water-blue focus. */
.wpcf7-form,
.wpcf7-form * { font-family: var(--ff-jp) !important; }
.wpcf7-form { color: var(--navy-soft); line-height: 2.0; }
.wpcf7-form p { margin: 0 0 18px; }
.wpcf7-form label {
  display: block;
  color: var(--navy); font-weight: var(--w-base);
  font-size: var(--fs-s) !important; letter-spacing: .08em; line-height: 1.9;
}

/* ============================================
   Amelia booking widget — font enforcement (Genio 2026-06-17)
   ============================================
   Amelia renders a self-contained Vue app with its own stylesheet. Inputs
   already inherit the serif, but its buttons / labels / calendar can fall back
   to Amelia's sans. Force the site serif on the whole widget (family only —
   no size/layout overrides, so Amelia's internal layout stays intact). */
.amelia-app-booking,
.amelia-app-booking *,
#amelia-container,
#amelia-container *,
[class*="amelia-"] {
  font-family: var(--ff-jp) !important;
}
/* Sizes on the three-size ladder (Genio 2026-09-30). The heading reads as body
   text; labels, fields and buttons are the small size. Select text goes through
   Amelia's own --am-fs-select, which its id-scoped !important rule reads. */
.amelia-v2-booking #amelia-container .am-select { --am-fs-select: var(--fs-s) !important; }
.amelia-v2-booking #amelia-container .am-advsc__time-zone span { font-size: var(--fs-s) !important; }
@media (min-width: 601px) {
  .am-fs__main-heading-inner-title { font-size: var(--fs-b) !important; }
  .am-fs__init-form__label,
  .am-button__inner,
  .am-fs__init-form .el-select *,
  .am-fs__init-form input,
  .fc-col-header-cell-cushion { font-size: var(--fs-s) !important; }
}
@media (max-width: 600px) {
  .am-oit__data-label-name { font-size: var(--fs-s) !important; }
}
/* …EXCEPT the icon glyphs. The rule above forced --ff-jp onto Amelia's icon
   <span>/<i> (am-icon-arrow-down/left/right = calendar carets & month nav), whose
   ::before glyphs live in the 'amelia-icons' PUA font → they rendered as ⊠
   missing-glyph boxes (all langs, shared theme). Restore the icon font on the icon
   elements + their ::before so the glyphs draw. Genio 2026-07-11. */
.amelia-app-booking [class*="am-icon"],
.amelia-app-booking [class*="am-icon"]::before,
.amelia-app-booking [class*="am-icon"]::after,
#amelia-container [class*="am-icon"],
#amelia-container [class*="am-icon"]::before,
#amelia-container [class*="am-icon"]::after,
[class*="amelia-"] [class*="am-icon"],
[class*="amelia-"] [class*="am-icon"]::before {
  font-family: 'amelia-icons' !important;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: var(--white) !important;
  color: var(--navy) !important;
  border: 1px solid var(--navy-thread) !important;
  border-radius: 0 !important;
  font-size: var(--fs-s) !important;            /* >=16 prevents iOS zoom */
  letter-spacing: .04em;
  padding: 13px 16px !important;
  margin-top: 6px;
  box-shadow: none !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.wpcf7-form textarea { min-height: 150px; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px var(--beige) !important;   /* water-blue focus ring */
  outline: none !important;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--navy-mute); opacity: .7; }
.wpcf7-list-item { margin: 6px 16px 6px 0; }
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] { accent-color: var(--navy); margin-right: 6px; }
.wpcf7-form .wpcf7-submit {
  background: var(--navy) !important;
  color: #fdfcf8 !important;
  border: 1px solid var(--navy) !important;
  border-radius: 0 !important;
  font-size: var(--fs-s) !important; letter-spacing: .18em !important;
  padding: 15px 38px !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .35s ease, letter-spacing .35s ease;
}
.wpcf7-form .wpcf7-submit:hover { background: #44583f !important; letter-spacing: .24em !important; }
.wpcf7-not-valid-tip { color: #9a4a3a !important; font-size: var(--fs-s); }
.wpcf7-response-output {
  border-radius: 0 !important;
  font-size: var(--fs-s); letter-spacing: .04em;
  margin: 18px 0 0 !important;
}

/* ============================================
   Class single (single-class) — ACF-driven content (Genio/Kohei 2026-06-15)
   Redesign: 受付バッジ + 申込ボタン導線 + 講師カード + 申込の流れ。
   Sections reuse .service-body (white/水色 alternating).
   FONT UNIFY: force Noto Serif JP + a consistent size on ALL ACF content
   (tagDiv left random inline fonts behind). */
.class-prose, .class-prose *,
.class-person-bio, .class-person-bio *,
.class-facts li, .class-uketsuke, .class-lead {
  font-family: var(--ff-jp) !important;
  font-weight: var(--w-base);
}
.class-prose { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .04em; color: var(--navy-soft); text-align: left; }
.class-prose p { margin: 0 0 16px; }
/* class-prose の ul は marker無し（.service-body ul が list-style:none）なので左インデントは不要。
   フラットにして本文と左端を揃える（Kohei 2026-06-29）。
   ol は番号が outside に出るので、左を空けないと番号が画面の外で切れる（Genio 2026-09-30 携帯）。 */
.class-prose ul { margin: 0 0 16px; padding-left: 0; }
.class-prose ol { margin: 0 0 16px; padding-left: 1.6em; }
/* preview.css の `* { padding:0 }` がブロックエディタのリストの左も消し、番号・黒丸が切れる。
   :where で詳細度 0 ＝ class で形を決めているリスト（プラグイン UI・.flow-steps 等）は従来どおり。 */
:where(.entry-content) :where(ol.wp-block-list, ul.wp-block-list, ol:not([class]), ul:not([class])) { padding-inline-start: 1.6em; }
.class-prose li { margin: 0 0 8px; }
.class-prose a { color: var(--navy); border-bottom: 1px solid var(--navy-thread); }
.class-prose a:hover { border-color: var(--navy); }
.class-prose img { max-width: 100%; height: auto; }
.class-prose strong { font-weight: var(--w-base); color: var(--navy); }

/* NORMALISE legacy tagDiv inline sizes inside the ACF body (Genio 2026-06-15:
   "タイトルと本文の大きさが逆転している箇所がいっぱい"). The old HTML carries
   random inline font-size on spans + small inline headings, so a heading often
   rendered SMALLER than body. Force body text to 22 and any in-prose heading to
   24 (always above body) — single ladder, no inversion. */
.class-prose p, .class-prose li, .class-prose span, .class-prose font,
.class-prose div, .class-prose td, .class-prose a,
.class-person-bio p, .class-person-bio li, .class-person-bio span, .class-person-bio font {
  font-size: var(--fs-b) !important; line-height: 2.1 !important;
}
.class-prose h1, .class-prose h2, .class-prose h3, .class-prose h4, .class-prose h5, .class-prose h6,
.class-person-bio h1, .class-person-bio h2, .class-person-bio h3, .class-person-bio h4 {
  font-size: var(--fs-b) !important; font-weight: var(--w-base) !important; color: var(--navy) !important;
  letter-spacing: .08em !important; line-height: 1.7 !important;
  margin: 36px 0 14px !important; text-align: left !important;
}
.class-prose h1:first-child, .class-prose h2:first-child, .class-prose h3:first-child { margin-top: 0 !important; }

/* 開催概要 + 申込ボタン */
.class-overview .service-body-inner { text-align: center; }
/* The class single has NO hero image (removed 2026-06-15), so the 36px title
   sat above a ~140px empty band on desktop (title margin-bottom 40 + section
   padding-top 100) — "PCで見ると変" (Genio 2026-06-16). Pull the first section
   flush to the title; both sit on the same white ground so it reads as one
   block. The white→水色 alternation resumes from the next section. */
.single-class .article-title { margin-bottom: 0 !important; }
.class-overview.service-body { padding-top: 48px; }
/* ご案内 topic titles — each topic (会場・アクセス / オンライン参加について /
   ご参加にあたって / キャンセル規定) is its OWN section title, like the live site.
   26 = section tier, ABOVE the 22 body (was 18 = inverted below body — Genio 2026-06-15). */
.class-segment { margin: 0 0 46px; }
.class-segment + .class-segment { margin-top: 46px; padding-top: 46px; border-top: 1px solid var(--navy-thread); }
.class-subhead {
  font-family: var(--ff-jp) !important; font-weight: var(--w-base);
  font-size: var(--fs-b) !important; letter-spacing: .16em; line-height: 1.7;
  color: var(--navy); text-align: center; margin: 0 0 24px;
}
/* 開催概要 facts as a tidy 項目／内容 card — centred wrapping was ragged on
   mobile (Genio 2026-06-15). Bordered card, left-aligned rows w/ dividers. */
.class-facts {
  list-style: none; margin: 0 auto 22px; padding: 2px 36px; max-width: 600px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--white); border: 1px solid var(--hair-light, #d4e2ee);
  text-align: left;
}
/* 日程/時間/会場の表は箱ごと中央寄せ（セル内テキストは左のまま）— Kohei 2026-06-29。
   親の text-align:center だけでは block の ul は寄らないので margin-inline:auto を明示。 */
.class-overview .class-facts { margin-left: auto !important; margin-right: auto !important; }
.class-facts li {
  display: flex; align-items: baseline; gap: 16px;
  font-size: var(--fs-b); letter-spacing: .04em; line-height: 1.7;
  text-align: left; padding: 15px 0 !important;   /* cancel .service-body ul li indent */
  border-bottom: 1px solid var(--navy-thread);
}
.class-facts li:last-child { border-bottom: none; }
.class-facts li::before { content: none !important; }   /* no ・ bullet on the meta list */
.fact-label {
  flex-shrink: 0; min-width: 3.4em; color: var(--navy); font-weight: var(--w-base);
  letter-spacing: .08em;
}
/* 日程/時間/会場のラベルを淡いブランド地のチップに（受講料テーブルと統一・Genio 2026-06-29） */
.single-class .fact-label, .single-seminar .fact-label, .sj-facts .fact-label {
  background: rgba(47, 93, 52, .07); border-radius: 2px;
  padding: 4px 14px; text-align: center; min-width: 4.4em;
}
/* facts は外枠（上・右・左）を外し、行の下罫線だけ残す（Kohei 2026-06-29）。
   SJ の 開催概要 facts (.sj-facts) も同じ扱いに（箱の上・左右ボーダー不要／表は中央・
   セル内テキストは左のまま・Kohei 2026-07-01）。 */
.single-class .class-facts, .single-seminar .class-facts, .sj-facts {
  border: none; border-bottom: 1px solid var(--hair-light, #d4e2ee);
  margin-left: auto !important; margin-right: auto !important;
}
/* テーブル内側に左右パディング（Kohei 2026-07-14）。`.service-body ul { padding:0 }`
   が base の .class-facts の左右パディングを潰していたので、より詳細度の高い
   `.service-body .sj-facts` で復活させる（セルが箱の端に張り付くのを防ぐ）。 */
.service-body .sj-facts { padding: 2px 30px; }
@media (max-width: 768px) { .service-body .sj-facts { padding: 2px 20px; } }
.single-class .class-facts li, .single-seminar .class-facts li { align-items: center; gap: 20px; }
.fact-value { color: var(--navy-soft); overflow-wrap: break-word; min-width: 0; }
/* Long EN labels (e.g. "Date & Time (Korea Time)") turned the chip into a wide
   block that squeezed the value into a ragged 3-line column. Keep the chip
   compact, let the value keep its own room (wrapping below the label when the
   label is long), and stack label-over-value on mobile. (Kohei 2026-07-01) */
.single-class .class-facts li, .single-seminar .class-facts li, .sj-facts li {
  align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
}
.single-class .fact-label, .single-seminar .fact-label, .sj-facts .fact-label {
  font-size: var(--fs-s); padding: 3px 12px; min-width: 0;
}
.single-class .fact-value, .single-seminar .fact-value, .sj-facts .fact-value {
  flex: 1 1 220px;
}
@media (max-width: 768px) {
  .single-class .class-facts li, .single-seminar .class-facts li, .sj-facts li {
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 10px 0 !important;   /* tighten airy row rhythm on mobile (Kohei 2026-07-01) */
  }
  /* chip felt over-padded on mobile — slim it down */
  .single-class .fact-label, .single-seminar .fact-label, .sj-facts .fact-label {
    padding: 2px 10px;
  }
  /* In the column layout, the desktop `flex:1 1 220px` (a 220px WIDTH basis)
     becomes a 220px-tall value cell → huge empty gap below each value. Reset to
     natural height on mobile. (Kohei 2026-07-01) */
  .single-class .fact-value, .single-seminar .fact-value, .sj-facts .fact-value {
    flex: 0 0 auto;
  }
}
.class-uketsuke {
  font-size: var(--fs-s); line-height: 1.9; letter-spacing: .03em;
  color: var(--navy-soft); text-align: left; max-width: 600px; margin: 18px auto 0;
}
.class-cta { text-align: center; margin-top: 34px; }

/* 講師カード */
.class-people { max-width: 720px; margin: 0 auto; }
.class-person {
  background: var(--white); padding: 34px 32px; margin-bottom: 22px;
  border: 1px solid var(--hair-light, #d4e2ee);
}
.class-person-name {
  font-size: var(--fs-b) !important; font-weight: var(--w-base); letter-spacing: .12em; line-height: 1.6;
  color: var(--navy); text-align: center; margin: 0 0 20px;
}
.class-person-bio { font-size: var(--fs-b); line-height: 2.1; letter-spacing: .04em; color: var(--navy-soft); }
.class-person-bio img {
  max-width: 240px; height: auto; float: left;
  margin: 2px 24px 10px 0; border: 1px solid rgba(118,96,68,.18);
}
/* ブロックエディタで入れた写真は <figure class="alignleft"> に包まれる。img だけ浮かせると
   figure の箱が高さを持ったまま残り、本文が写真の下から始まる（クラウディウさん・福井さん
   2026-09-25）。浮かせるのは figure の方。 */
.class-person-bio figure.alignleft { float: left; margin: 2px 24px 10px 0; max-width: 240px; }
.class-person-bio figure.alignleft img { float: none; margin: 0; }
.class-person-bio p { margin: 0 0 14px; }
.class-person-link { clear: both; text-align: center; margin-top: 18px; padding-top: 8px; }
.class-profile-btn {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s);
  letter-spacing: .14em; color: var(--navy);
  border: 1px solid var(--navy-thread); padding: 10px 26px;
  text-decoration: none; transition: background .35s ease, letter-spacing .35s ease;
}
.class-profile-btn:hover { background: rgba(50,68,47,.05); letter-spacing: .2em; }

/* Paired CTA buttons (SJ: お申し込み + 過去の配信動画) — centred, stack on mobile.
   Ghost variant for the secondary action. PDF link rendered as a quiet button.
   参加費 box (seminar payment snippet) contained + centred. (Genio 2026-06-18) */
.class-cta--pair { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.tp-session-btn--ghost { background: transparent; color: var(--navy, #32442f); }
.tp-session-btn--ghost:hover { background: var(--navy, #32442f); color: #fdfcf8; }
.pdf-btn {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s);
  letter-spacing: .12em; color: var(--navy);
  border: 1px solid var(--navy-thread); padding: 11px 28px;
  text-decoration: none; transition: background .35s ease, letter-spacing .35s ease;
}
.pdf-btn:hover { background: rgba(50,68,47,.05); letter-spacing: .18em; }
.sj-logo { display: block; margin: 0 auto 8px; width: 180px; height: auto; }
.seminar-fee { max-width: 560px; margin: 0 auto 28px; text-align: center; }
.seminar-fee .su-box { margin: 0 !important; }

/* 受講料・注意・ご案内ブロック */
.class-lead { font-size: var(--fs-b); line-height: 1.9; letter-spacing: .05em; color: var(--navy); text-align: center; margin: 0 0 24px; }
/* 講演会テーマ = 参加費(Fee)行と同じチップ意匠（Kohei 2026-07-06）。.class-facts.hpp-fee
   を流用するので専用スタイルは不要。行間だけ確保。 */
.theme-facts { margin: 0 auto 28px; }
.class-note { color: var(--navy-soft); font-size: var(--fs-s) !important; margin-top: 18px; }

/* マニュアル等の本物リスト（旧「・」＋改行の疑似リストを <ul.cls-list> へ整形。
   左端は本文と揃え＝ハンギングインデントで marker だけ左に出す。Kohei 2026-06-29）。 */
.class-prose ul.cls-list { list-style: none; margin: 16px 0 20px; padding-left: 0; }
.class-prose ul.cls-list li {
    position: relative; padding-left: 1.25em; text-indent: -1.25em;
    margin: 0 0 .5em; line-height: 1.95;
}
.class-prose ul.cls-list li::before { content: "・"; color: var(--navy-mute, rgba(47,93,52,.55)); }
/* ※注釈：一段引いて控えめに（注意書きとして本文と差をつける） */
.class-prose p.cls-annot {
    font-size: var(--fs-s) !important; line-height: 1.9 !important;
    color: var(--navy-mute, rgba(47,93,52,.55)); margin-top: 16px; letter-spacing: .02em;
}
/* 対象者ラベル（新規受講生の皆様 / 再受講生の皆様）：静かな小見出し＝字間＋下罫で
   "誰向けの段落か"を一目で。文言は不変、見せ方だけ。 */
.class-prose p.cls-aud-label {
    font-size: var(--fs-s) !important; line-height: 1.6 !important; letter-spacing: .14em;
    color: var(--navy); margin: 30px 0 10px; padding-bottom: 7px;
    border-bottom: 1px solid var(--hair-light, #d4e2ee);
}
.class-info-block + .class-info-block { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--navy-thread); }

/* お申し込みの流れ（番号付きステップ） */
.class-flow .service-body-inner { max-width: 720px; }
.flow-steps { list-style: none; margin: 0 auto 8px; padding: 0; max-width: 620px; }
.flow-steps li {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--navy-thread);
}
.flow-num {
  flex-shrink: 0; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fdfcf8;
  font-family: var(--ff-en); font-size: var(--fs-b); letter-spacing: 0;
}
.flow-text {
  font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-b); line-height: 1.9; letter-spacing: .04em; color: var(--navy-soft);
  text-align: left;
}
.flow-text strong { font-weight: var(--w-base); color: var(--navy); }

@media (max-width: 600px) {
  /* mobile-first: the class page is read mostly on phones — tighten the type
     ladder so 22px body doesn't dominate the small screen (Genio 2026-06-15). */
  .class-person { padding: 26px 20px; }
  .class-person-bio img { float: none; display: block; margin: 0 auto 16px; max-width: 100%; }
  .class-person-bio figure.alignleft { float: none; margin: 0 auto 16px; max-width: 100%; }
  .flow-steps li { gap: 14px; }

  .class-subhead { font-size: var(--fs-b) !important; letter-spacing: .12em; margin-bottom: 18px; }
  .class-person-name { font-size: var(--fs-b) !important; }
  .class-facts li { font-size: var(--fs-b); }
  .class-prose, .class-lead,
  .class-prose p, .class-prose li, .class-prose span, .class-prose font,
  .class-prose div, .class-prose td, .class-prose a,
  .class-person-bio, .class-person-bio p, .class-person-bio li, .class-person-bio span {
    font-size: var(--fs-b) !important; line-height: 2 !important;
  }
  .class-prose h1, .class-prose h2, .class-prose h3, .class-prose h4,
  .class-person-bio h1, .class-person-bio h2, .class-person-bio h3, .class-person-bio h4 {
    font-size: var(--fs-b) !important; margin: 28px 0 12px !important;
  }
  .flow-text { font-size: var(--fs-s); }
  .flow-num { width: 32px; height: 32px; font-size: var(--fs-s); }
  .class-segment { margin: 0 0 36px; }
  .class-segment + .class-segment { margin-top: 36px; padding-top: 36px; }
}

/* ============================================
   Mobile title scale — phones (Genio 2026-06-15)
   ROOT CAUSE: the 36px TITLE tier (h1/h2/記事タイトル) and the申込文 had NO
   mobile rule anywhere, so on phones they stayed 36/22 while body shrank to
   18 — looking oversized next to the readable body. Scale the title tier
   36→28 and the booking intro 22→18 so the whole page is proportional.
   Placed last so it wins over the !important title rules regardless of source. */
@media (max-width: 600px) {
  h1, h2, h3,
  .article-title, .teacher-jp, .lineage-intro h1, .sj-feature-title,
  .door-title, .kr-deeper-title {
    /* theme.json gives headings 0.22em tracking — far too wide on a phone, it
       forced ugly mid-word breaks (2026年6月ヘルスク/ラス). Tighten on mobile. */
    letter-spacing: .06em !important;
  }
  h1, h2,
  .article-title, .teacher-jp, .lineage-intro h1, .sj-feature-title,
  .door-title, .kr-deeper-title {
    font-size: var(--fs-h) !important;
    line-height: 1.5 !important;
  }
  /* headings back onto the mobile ladder (font_ladder_audit 2026-06-16):
     article/section titles = 28 (title tier, inherit rule above), person name
     + form/section subheads = 22. */
  .ta-name, .sj-reg-form-inner h2, .teachers-sec .sec-title { font-size: var(--fs-b) !important; }
  .booking-intro p { font-size: var(--fs-b) !important; line-height: 2 !important; }

  /* ── BODY tier 22 → 18, SUBHEAD tier 26 → 22 — unified across EVERY page
     (Genio 2026-06-16: 携帯は全ページ同じレスポンシブ・ラダーに一本化).
     Previously only the class page shrank its body on mobile; .article-body /
     .service-body stayed 22 on phones. Scoped to the shared content containers
     so nav / footer / tile captions keep their own intentional sizes. */
  .service-body p, .service-body ul li, .service-body ol li,
  .service-body .lead, .service-body blockquote,
  .article-body p, .article-body ul li, .article-body ol li,
  .article-body .lead,
  /* every other reading-body container site-wide (KR / sessions / contact /
     teacher・about bio / catalog text / list intro) so the 22→18 mobile body
     size is identical on every page. Hero quotes / decorative EN lines are
     feature text, intentionally left at their size. */
  .service-hero p, .lead,
  .kr-bio p, .kr-history p, .kr-personal-cta p, .kr-service-feature p,
  .kr-message-pointer p, .kr-movies-intro p, .kr-deeper-desc,
  .sessions-intro p, .contact-intro p, .ct-intro p, .ct-quote,
  .sj-feature-desc, .tp-bio, .tp-bio p, .fl-intro,
  /* home + about prose (front-page door descriptions, はじめての方へ系譜本文) */
  .door-desc, .band-body, .band-body p, .brief-body, .brief-body p,
  .intro-body p, .lineage-essay > p, .lineage-text p {
    font-size: var(--fs-b) !important;
    line-height: 2 !important;
  }
  .service-body h3, .article-body h3, .class-subhead, .service-hero .lead {
    font-size: var(--fs-b) !important;
  }
  /* cross-nav links + instructor message body follow the body tier on mobile */
  .kr-cross-links a, .inst-msg-body { font-size: var(--fs-b) !important; }
}

/* ============================================================ *
 *  2026-06-16 Genio feedback: footer lang links, cleaning-tool
 *  density, WooCommerce cart restyle.
 * ============================================================ */

/* Footer language switcher is now real <a> links (was dead <button>s) — mirror
   the button styling so the switch works from the footer too. */
.foot-lang a {
  position: relative; font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-b); letter-spacing: .14em;
  padding: 10px 18px; border: 1px solid var(--navy-hair); color: var(--navy);
  background: transparent; opacity: .85; text-decoration: none;
  transition: all .4s ease;
}
.foot-lang a.on { opacity: 1; background: var(--navy); color: var(--beige); border-color: var(--navy); }
.foot-lang a:hover { opacity: 1; border-color: var(--navy); }

/* Cleaning-tool product tiles: names looked too big in the narrow 2-up mobile
   grid (Genio) — drop the loop title to 16 on mobile so it stops wrapping into
   a tall stack; PC stays 18. */
@media (max-width: 600px) {
  .ct-products ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fs-s); line-height: 1.6;
  }
}

/* ============================================================ *
 *  WooCommerce CART  —  /cart/  (Aman restyle, Genio 2026-06-16)
 *  CLASSIC shortcode cart (NOT block cart):
 *    form.woocommerce-cart-form > table.shop_table.shop_table_responsive.cart
 *    .cart-collaterals > .cart_totals  +  .wc-proceed-to-checkout
 * ============================================================ */
.woocommerce-cart .article-body { max-width: 920px; margin: 0 auto; }
.woocommerce-cart .article-title { margin-top: 24px; }
.woocommerce-cart .woocommerce { font-family: var(--ff-jp); color: var(--navy); }
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-cart table.shop_table.cart {
  width: 100%; border: 1px solid var(--navy-thread); border-collapse: collapse;
  border-radius: 0; margin: 0 0 40px;
}
.woocommerce-cart table.shop_table.cart thead th {
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .14em;
  color: var(--navy); background: var(--beige);
  border-bottom: 1px solid var(--navy-thread); padding: 14px 12px; text-align: left;
}
.woocommerce-cart table.shop_table.cart td {
  border-top: 1px solid var(--navy-thread); padding: 18px 12px;
  font-size: var(--fs-s); letter-spacing: .04em; vertical-align: middle; background: var(--white);
}
.woocommerce-cart table.shop_table.cart .product-thumbnail img {
  width: 72px; height: auto; border: 1px solid var(--navy-thread); border-radius: 0;
}
.woocommerce-cart table.shop_table.cart .product-name a {
  color: var(--navy); text-decoration: none; font-size: var(--fs-s); line-height: 1.7;
  border-bottom: 1px solid var(--navy-thread);
}
.woocommerce-cart table.shop_table.cart .product-name a:hover { letter-spacing: .04em; opacity: .7; }
.woocommerce-cart .woocommerce-Price-amount { font-family: var(--ff-en); letter-spacing: .06em; color: var(--navy-soft); }
.woocommerce-cart td.product-remove a.remove {
  color: var(--navy-soft) !important; background: transparent !important;
  font-size: var(--fs-b); line-height: 1; border-radius: 0; width: auto; height: auto;
}
.woocommerce-cart td.product-remove a.remove:hover { color: var(--navy) !important; }
.woocommerce-cart .quantity input.qty {
  width: 64px; padding: 8px 6px; text-align: center; font-family: var(--ff-en); font-size: var(--fs-s);
  color: var(--navy); background: var(--white);
  border: 1px solid var(--navy-thread); border-radius: 0;
}
.woocommerce-cart table.shop_table .actions { padding: 18px 12px; background: var(--beige); }
.woocommerce-cart .coupon label { display: none; }
.woocommerce-cart .coupon .input-text {
  padding: 10px 12px; font-size: var(--fs-s); color: var(--navy);
  border: 1px solid var(--navy-thread); border-radius: 0; background: var(--white);
  min-width: 0; max-width: 200px;
}
.woocommerce-cart .actions .button,
.woocommerce-cart .coupon .button,
.woocommerce-cart a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button {
  display: inline-block; font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .12em; line-height: 1.4;
  color: #fdfcf8 !important; background: var(--navy) !important;
  border: 1px solid var(--navy) !important; border-radius: 0 !important;
  padding: 12px 26px; text-decoration: none; cursor: pointer;
  transition: background .3s ease, letter-spacing .3s ease;
}
.woocommerce-cart .actions .button:hover,
.woocommerce-cart .coupon .button:hover,
.woocommerce-cart a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.button:hover {
  background: #44583f !important; letter-spacing: .18em;
}
.woocommerce-cart .actions .button[name="update_cart"] {
  background: var(--white) !important; color: var(--navy) !important;
}
.woocommerce-cart .actions .button[name="update_cart"]:hover {
  background: var(--beige) !important; color: var(--navy) !important;
}
.woocommerce-cart .cart-collaterals { width: 100%; float: none; margin-top: 8px; }
.woocommerce-cart .cart_totals { width: 100%; max-width: 460px; margin-left: auto; }
.woocommerce-cart .cart_totals h2 {
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-b); letter-spacing: .12em;
  color: var(--navy); text-align: center; margin: 0 0 18px;
}
.woocommerce-cart .cart_totals table {
  width: 100%; border: 1px solid var(--navy-thread); border-collapse: collapse; border-radius: 0;
}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  padding: 14px 16px; border-top: 1px solid var(--navy-thread);
  font-size: var(--fs-s); letter-spacing: .04em; background: var(--white); text-align: left;
}
.woocommerce-cart .cart_totals th {
  font-family: var(--ff-jp); font-weight: var(--w-base); color: var(--navy); width: 42%; background: var(--beige);
}
.woocommerce-cart .cart_totals tr:first-child th,
.woocommerce-cart .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  font-size: var(--fs-b); color: var(--navy); border-top: 1px solid var(--navy);
}
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount { color: var(--navy); }
.woocommerce-cart .woocommerce-shipping-destination { font-size: var(--fs-s); color: var(--navy-soft); letter-spacing: .04em; }
.woocommerce-cart .shipping-calculator-button {
  color: var(--navy); border-bottom: 1px solid var(--navy-thread); text-decoration: none; font-size: var(--fs-s);
}
.woocommerce-cart .shipping-calculator-form .input-text,
.woocommerce-cart .shipping-calculator-form select {
  width: 100%; padding: 10px 12px; font-size: var(--fs-s); color: var(--navy);
  border: 1px solid var(--navy-thread); border-radius: 0; background: var(--white);
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 22px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block; width: 100%; text-align: center; padding: 18px 24px; font-size: var(--fs-s);
}
@media (max-width: 600px) {
  .woocommerce-cart .article-body { max-width: 100%; }
  .woocommerce-cart table.shop_table.cart thead { display: none; }
  .woocommerce-cart table.shop_table.cart tr.cart_item {
    display: block; border: 1px solid var(--navy-thread); margin-bottom: 16px; background: var(--white);
  }
  .woocommerce-cart table.shop_table.cart tr.cart_item td {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border-top: 0; border-bottom: 1px solid var(--navy-thread); padding: 12px 14px; text-align: right;
  }
  .woocommerce-cart table.shop_table.cart tr.cart_item td:last-child { border-bottom: 0; }
  .woocommerce-cart table.shop_table.cart tr.cart_item td::before {
    content: attr(data-title); font-family: var(--ff-jp); font-size: var(--fs-s); letter-spacing: .1em;
    color: var(--navy-soft); float: none; font-weight: var(--w-base); text-align: left;
  }
  .woocommerce-cart table.shop_table.cart td.product-remove { justify-content: flex-end; }
  .woocommerce-cart table.shop_table.cart td.product-remove::before { content: ""; }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail { justify-content: center; }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail::before { content: ""; }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 96px; }
  .woocommerce-cart table.shop_table .actions { display: block; text-align: center; }
  .woocommerce-cart .coupon { display: flex; gap: 8px; margin-bottom: 14px; }
  .woocommerce-cart .coupon .input-text { flex: 1; max-width: none; }
  .woocommerce-cart .actions .button[name="update_cart"] { width: 100%; }
  .woocommerce-cart .cart_totals { max-width: 100%; margin-left: 0; }
  .woocommerce-cart .cart_totals .order-total th,
  .woocommerce-cart .cart_totals .order-total td { font-size: var(--fs-b); }
}

/* ============================================================ *
 *  WooCommerce CHECKOUT  —  /checkout/  (Genio 2026-06-16)
 *  Mobile complaints: 国/都道府県の文字がめちゃくちゃ小さい.
 *  Mirror the cart styling: labels 14px, inputs/selects 16px square hairline,
 *  the select2 country/state dropdown 16px, order review table like cart totals,
 *  green 16px square place-order button. No overflow at 390.
 * ============================================================ */
.woocommerce-checkout .article-body { max-width: 920px; margin: 0 auto; }
.woocommerce-checkout .woocommerce { font-family: var(--ff-jp); color: var(--navy); }
.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-checkout form.checkout { display: block; }
.woocommerce-checkout #customer_details { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; padding: 0; }
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-b) !important;
  letter-spacing: .12em; color: var(--navy); text-align: center;
  margin: 0 0 26px; line-height: 1.5;
}
.woocommerce-checkout .form-row { margin: 0 0 22px; }
.woocommerce-checkout .form-row label,
.woocommerce-checkout label {
  display: block; font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s); letter-spacing: .12em; color: var(--navy); margin-bottom: 8px;
}
.woocommerce-checkout .required { color: var(--navy-soft); text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--white); border: 1px solid var(--navy-thread); border-radius: 0;
  padding: 12px 14px; font-family: var(--ff-jp); font-weight: var(--w-base);
  font-size: var(--fs-s) !important; line-height: 1.5; color: var(--navy);
  -webkit-appearance: none; appearance: none;
}
.woocommerce-checkout .form-row textarea { min-height: 110px; }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus { outline: none; border-color: var(--navy); }
/* select2 country / prefecture — the tiny text Genio flagged */
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto; min-height: 46px; background: var(--white);
  border: 1px solid var(--navy-thread); border-radius: 0; display: flex; align-items: center;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); line-height: 1.5;
  color: var(--navy); padding: 12px 14px;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 44px; right: 8px;
}
/* the open dropdown is appended to <body>, so scope by the select2 dropdown class */
.select2-dropdown,
.select2-container--default .select2-results__option {
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); color: var(--navy);
}
.select2-dropdown { border: 1px solid var(--navy-thread); border-radius: 0; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: var(--fs-s); border: 1px solid var(--navy-thread); border-radius: 0; padding: 8px 10px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--beige); color: var(--navy);
}
/* order review table — styled like the cart totals */
.woocommerce-checkout #order_review { width: 100%; float: none; margin-top: 12px; }
.woocommerce-checkout table.shop_table {
  width: 100%; border: 1px solid var(--navy-thread); border-collapse: collapse; border-radius: 0; margin: 0 0 28px;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: 14px 16px; border-top: 1px solid var(--navy-thread);
  font-size: var(--fs-s); letter-spacing: .04em; background: var(--white); text-align: left;
  font-family: var(--ff-jp); font-weight: var(--w-base); color: var(--navy);
}
.woocommerce-checkout table.shop_table thead th { background: var(--beige); font-size: var(--fs-s); letter-spacing: .12em; }
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td { background: var(--white); }
.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  font-size: var(--fs-b); color: var(--navy); border-top: 1px solid var(--navy);
}
.woocommerce-checkout .woocommerce-Price-amount { font-family: var(--ff-en); letter-spacing: .06em; color: var(--navy-soft); }
.woocommerce-checkout table.shop_table tfoot tr.order-total .woocommerce-Price-amount { color: var(--navy); }
.woocommerce-checkout #payment { background: var(--beige); border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--navy-thread); padding: 18px 16px;
}
.woocommerce-checkout #payment ul.payment_methods li { font-size: var(--fs-s); color: var(--navy); }
.woocommerce-checkout #payment div.payment_box { font-size: var(--fs-s); color: var(--navy-soft); background: var(--white); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--white); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-s); color: var(--navy-soft); padding: 14px 16px; }
/* place order button — green 16px square, full width on mobile */
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order {
  display: block; width: 100%; margin: 8px 0 0;
  font-family: var(--ff-jp); font-weight: var(--w-base); font-size: var(--fs-s); letter-spacing: .14em; line-height: 1.4;
  color: #fdfcf8 !important; background: var(--navy) !important;
  border: 1px solid var(--navy) !important; border-radius: 0 !important;
  padding: 16px 26px; text-decoration: none; cursor: pointer;
  transition: background .3s ease, letter-spacing .3s ease;
}
.woocommerce-checkout #place_order:hover { background: #44583f !important; letter-spacing: .2em; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
  font-size: var(--fs-s); color: var(--navy-soft); background: var(--beige);
  border-top: 2px solid var(--navy-hair); border-radius: 0;
}
.woocommerce-checkout .woocommerce-info a { color: var(--navy); border-bottom: 1px solid var(--navy-thread); text-decoration: none; }
@media (max-width: 600px) {
  .woocommerce-checkout .article-body { max-width: 100%; }
  .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: var(--fs-b) !important; }
}

/* Stacked logo header (Kohey 2026-06-18, option C): the new logo is the wood
   mark + HO'OPONOPONO wordmark stacked vertically, so the header grows to fit
   it. The !important also stops WooCommerce's img reset (cart/checkout) from
   inflating the logo to its natural size (Genio 2026-06-16). */
.fh-inner { height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.fh-brand-img { height: 70px !important; width: auto !important; max-width: none !important; }
/* Header icons +25% (Genio 2026-06-22): burger 22->27.5px, search 20->25px.
   現状が事実上標準の 24px より小さいという指摘を受けて。PC・携帯共通。 */
.fh-burger { width: 27.5px !important; height: 27.5px !important; }
.fh-search { width: 25px !important; height: 25px !important; }
/* anchor jumps (#booking / #form / #newsletter) must clear the header */
html { scroll-padding-top: 90px; }
@media (max-width: 768px) {
  .fh-brand-img { height: 54px !important; }
  .fh-inner { padding-top: 6px !important; padding-bottom: 6px !important; }
  html { scroll-padding-top: 70px; }
}

/* Product loop titles are <h2> and were getting caught by the global
   h1,h2{36/28!important} title rule -> product names rendered at 28px on mobile
   (Genio: 文字大きすぎる). Force them small with matching !important. */
.ct-products ul.products li.product .woocommerce-loop-product__title,
.ct-products ul.products li.product h2.woocommerce-loop-product__title {
  font-size: var(--fs-s) !important; line-height: 1.55 !important; letter-spacing: .03em;
  font-weight: var(--w-base);
}
@media (max-width: 600px) {
  .ct-products ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fs-s) !important;
  }
}

/* ---- Event-announcement popup (hooponopono/event-popup) ----------------- *
 * Compact bottom-anchored card (Genio 2026-06-17, ref jayshetty.me): slides up
 * from the bottom-right, NO dimming scrim, logo top-centre. S1 layout for one
 * event, D1 (date+title+arrow rows) for two. Hidden by default; hpp-popup.js
 * adds .is-open ~1.2s after load (7-day frequency cap).
 * Colour = 案4 ダーク青緑 (Genio 2026-06-18): dark teal panel #294a40 with
 * cream text #f4f1e9 (high contrast, stands out from the white page), cream
 * logo mark, cream-filled CTA with dark-teal text.                            */
.hpp-popup {
  position: fixed;
  right: 32px;
  bottom: 40px;
  left: auto;
  z-index: 9999;
  width: 320px; /* shrunk after logo removal — Kohey 2026-06-18 */
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(48px);
  transition: opacity .42s ease, transform .5s cubic-bezier(.22, .61, .36, 1), visibility .42s ease;
}
.hpp-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hpp-popup-panel {
  position: relative;
  background: #294a40;
  border: 1px solid #294a40;
  padding: 26px 24px 24px; /* tighter after logo removal — Kohey 2026-06-18 */
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 18px 48px rgba(41, 74, 64, .28);
}
.hpp-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  padding: 6px;
  line-height: 1;
  font-size: var(--fs-b);
  color: #f4f1e9;
  cursor: pointer;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
}
.hpp-popup-close:hover { opacity: .6; }
.hpp-popup-logo { display: none; } /* logo removed from popup — Kohey 2026-06-18 */

/* ----- S1: single event ----- */
.hpp-popup-meta {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .2em;
  color: rgba(244, 241, 233, .72);
  margin: 0 0 9px;
}
.hpp-popup-title {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-b);
  line-height: 1.5;
  letter-spacing: .1em;
  color: #f4f1e9;
  margin: 0 0 14px;
}
.hpp-popup-body {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  line-height: 1.8;
  letter-spacing: .06em;
  color: rgba(244, 241, 233, .86);
  margin: 0 0 22px;
}
.hpp-popup-cta-wrap { text-align: center; }
.hpp-popup-cta {
  display: inline-block;
  background: #f4f1e9;
  color: #294a40;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .14em;
  line-height: 1.4;
  text-decoration: none;
  padding: 14px 32px;
  transition: letter-spacing .3s ease, opacity .3s ease;
}
.hpp-popup-cta:hover {
  letter-spacing: .22em;
  opacity: .92;
}

/* ----- D1: two events (date + title + arrow rows) ----- */
.hpp-popup-dhead {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .16em;
  color: rgba(244, 241, 233, .72);
  margin: 0 0 18px;
}
.hpp-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  text-decoration: none;
  text-align: left;
  color: #f4f1e9;
  transition: opacity .3s ease;
}
.hpp-popup-row + .hpp-popup-row {
  border-top: 1px solid rgba(244, 241, 233, .22);
}
.hpp-popup-row:hover { opacity: .68; }
.hpp-row-date {
  display: block;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .16em;
  color: rgba(244, 241, 233, .72);
  margin: 0 0 6px;
}
.hpp-row-ttl {
  display: block;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-b);
  letter-spacing: .08em;
  line-height: 1.45;
  color: #f4f1e9;
}
.hpp-row-arw {
  flex: none;
  font-size: var(--fs-s);
  color: #f4f1e9;
}

/* ----- Permanent newsletter sign-up (Kohey 2026-06-18) ----- *
 * Always at the foot of the popup. Same Noto Serif as the rest of the popup;
 * cream-on-teal to match 案4. Cream-filled 登録する button = the popup CTA.   */
.hpp-popup-news {
  margin-top: 0; /* remove the extra line of space between the last row and the divider — Genio 2026-06-18 */
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 233, .22);
}
.hpp-popup-news-head {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .16em;
  color: rgba(244, 241, 233, .86);
  margin: 0 0 12px;
  text-align: center;
}
.hpp-popup-news-form { margin: 0; }
.hpp-popup-news-form input[type="email"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .04em;
  padding: 11px 12px;
  margin: 0 0 10px;
  border: 1px solid rgba(244, 241, 233, .45);
  border-radius: 0;
  background: rgba(244, 241, 233, .06);
  color: #f4f1e9;
}
.hpp-popup-news-form input[type="email"]::placeholder { color: rgba(244, 241, 233, .5); }
.hpp-popup-news-form button {
  display: block;
  width: 100%;
  background: #f4f1e9;
  color: #294a40;
  border: 0;
  border-radius: 0;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .14em;
  padding: 12px;
  cursor: pointer;
  transition: letter-spacing .3s ease, opacity .3s ease;
}
.hpp-popup-news-form button:hover { letter-spacing: .22em; opacity: .92; }
.hpp-popup-news-form button[disabled] { opacity: .55; cursor: default; }
.hpp-popup-news-thanks {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .08em;
  color: #f4f1e9;
  text-align: center;
  margin: 0;
}
/* inline-subscribe feedback line + polished ✓ confirmation (案B, Genio 2026-06-19).
 * The tick is drawn with CSS borders — glyph fonts render tofu in Noto Serif. */
.hpp-popup-news-msg {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  line-height: 1.85;
  letter-spacing: .08em;
  color: #f4f1e9;
  text-align: center;
  margin: 8px 0 0;
}
.hpp-popup-news.is-done { text-align: center; }
.hpp-popup-news-msg.is-ok { position: relative; padding-top: 56px; margin: 6px 0 2px; }
.hpp-popup-news-msg.is-ok::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 241, 233, .55);
  border-radius: 50%;
}
.hpp-popup-news-msg.is-ok::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 9px;
  height: 16px;
  margin-left: -5px;
  border: solid #f4f1e9;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

@media (max-width: 600px) {
  .hpp-popup {
    right: 16px;
    left: 16px;
    bottom: 22px;
    width: auto;
    max-width: none;
  }
  .hpp-popup-panel { padding: 24px 22px 24px; }
  .hpp-popup-title { font-size: var(--fs-b); }
}

/* ---- Seminar (講演会) long-form body: left-align prose, centred headings --- *
 * The shared .sj-reg skin centres everything (fine for the short WWA / SJ
 * registration copy), but a KR講演会 page is long-form reading, so body text
 * reads better left-aligned while headings stay centred (Genio 2026-06-18).   */
.single-seminar .sj-reg-inner { text-align: left; }
.single-seminar .sj-reg-inner h2,
.single-seminar .sj-reg-inner h3 { text-align: center; }
.single-seminar .sj-reg-inner h2 {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-b);
  letter-spacing: .14em;
  color: var(--navy, #2f5d34);
  margin: 48px 0 18px;
}
.single-seminar .sj-reg-inner ul { padding-left: 1.3em; }
.single-seminar .sj-reg-inner li {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  line-height: 1.95;
  color: var(--navy-soft, #536454);
  margin-bottom: 6px;
}

/* ---- Strawberry Jam archived video — watch / purchase page ---------------- *
 * single-strawberry-jam-video.html. Title + the SVP paywall (Strawberry Videos
 * Simple by KOHEY: locked poster + passcode + ￥5,000 buy button + gated
 * player) + editorial intro. The plugin ships a generic blue/rounded skin; the
 * rules below re-dress every .svp-* control in the site palette — forest-green
 * square CTA, Noto Serif, no radius (Genio 2026-06-18).                        */
.sjv-watch { background: var(--white, #fafafa); padding: 8px 0 8px; }
.sjv-watch-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Locked poster + revealed player: square corners, no plugin rounding. */
.sjv-watch .svp-locked-box,
.sjv-watch .svp-player-frame { border-radius: 0 !important; }
.sjv-watch .svp-locked-overlay { background: rgba(50, 68, 47, .5); backdrop-filter: blur(2px); }
.sjv-watch .svp-locked-text {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .14em;
  color: #f4f1e9;
  border: 1px solid rgba(244, 241, 233, .55);
  border-radius: 0;
}

/* Checkout / passcode wrappers centred under the video. */
.sjv-watch .svp-checkout,
.sjv-watch .svp-passcode { margin-top: 22px; text-align: center; }

/* All SVP buttons -> the standard square forest-green CTA. */
.sjv-watch .svp-btn {
  display: inline-block;
  background: var(--navy, #2f5d34) !important;
  color: var(--white, #fafafa) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--ff-jp, "Noto Serif JP", serif) !important;
  font-weight: var(--w-base) !important;
  font-size: var(--fs-s) !important;
  letter-spacing: .14em !important;
  line-height: 1.4 !important;
  padding: 14px 34px !important;
  cursor: pointer;
  transition: letter-spacing .3s ease, opacity .3s ease;
}
.sjv-watch .svp-btn:hover { letter-spacing: .22em !important; opacity: .92; }
.sjv-watch .svp-open-passcode {
  background: none !important;
  color: var(--navy, #2f5d34) !important;
  font-size: var(--fs-s) !important;
  padding: 6px 4px !important;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.sjv-watch .svp-note {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .08em;
  color: var(--navy-soft, #536454);
  margin-top: 12px;
}
/* 字幕の注記（現状 TW のみ・patterns/strawberry-jam-video.php） */
.sjv-subs {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  letter-spacing: .08em;
  color: var(--navy-soft, #536454);
  margin-top: 14px;
  text-align: center;
}
.sjv-watch .svp-passcode-form {
  max-width: 360px;
  margin: 12px auto 0;
  text-align: left;
}
.sjv-watch .svp-passcode-form input[type="email"],
.sjv-watch .svp-passcode-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-size: var(--fs-s);
  padding: 10px 12px;
  border: 1px solid var(--hair, #c6d6e4);
  border-radius: 0;
  background: var(--white, #fafafa);
}
.sjv-watch .svp-passcode-form label {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  color: var(--navy-soft, #536454);
}
.sjv-watch .svp-already,
.sjv-watch .svp-notice {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  color: var(--navy, #2f5d34);
  background: var(--beige, #e7f1f7);
  border: 1px solid var(--hair, #c6d6e4);
  border-radius: 0;
  padding: 14px 18px;
}
.sjv-watch .svp-expiry {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-size: var(--fs-s);
  letter-spacing: .08em;
  color: var(--navy-soft, #536454);
  text-align: center;
  margin-top: 10px;
}

/* Editorial intro under the player (alternating beige section). */
.sjv-intro { background: var(--beige, #e7f1f7); padding: 56px 0 64px; }
.sjv-intro-inner { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.sjv-intro-inner h2 {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-style: italic !important; /* 「Irene's note」をイタリックに。全体の body*{font-style:normal!important} を上書き（Kohei 2026-06-29） */
  font-size: var(--fs-b);
  letter-spacing: .04em; /* Latin italic はトラッキングを詰める（Kohei 2026-06-29） */
  color: var(--navy, #2f5d34);
  text-align: center;
  margin: 0 0 24px;
}
.sjv-intro-inner p {
  font-family: var(--ff-jp, "Noto Serif JP", serif);
  font-weight: var(--w-base);
  font-size: var(--fs-s);
  line-height: 2.05;
  letter-spacing: .04em;
  color: var(--navy-soft, #536454);
  margin: 0 0 18px;
  text-align: left;
}
.sjv-back-sec { background: var(--white, #fafafa); padding: 40px 0 64px; text-align: center; }
.sjv-back { margin: 0; }

@media (max-width: 600px) {
  .sjv-intro { padding: 40px 0 48px; }
  .sjv-intro-inner p { font-size: var(--fs-s); line-height: 1.95; }
  .single-seminar .sj-reg-inner h2 { font-size: var(--fs-b); }
}

/* Force the site serif onto ALL WooCommerce text on cart/checkout (default Woo
   uses the system sans on labels/inputs/select2/notices) so it matches the rest
   of the site (Genio 2026-06-16). Prices keep --ff-en. */
.woocommerce-cart .woocommerce,
.woocommerce-cart .woocommerce input,
.woocommerce-cart .woocommerce select,
.woocommerce-cart .woocommerce textarea,
.woocommerce-cart .woocommerce label,
.woocommerce-cart .woocommerce th,
.woocommerce-cart .woocommerce td,
.woocommerce-cart .woocommerce a,
.woocommerce-cart .select2-container,
.woocommerce-checkout .woocommerce,
.woocommerce-checkout .woocommerce input,
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce label,
.woocommerce-checkout .woocommerce th,
.woocommerce-checkout .woocommerce td,
.woocommerce-checkout .woocommerce a,
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2-results__option,
.woocommerce-checkout .select2-selection__rendered {
  font-family: var(--ff-jp) !important;
}
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-Price-amount { font-family: var(--ff-en) !important; }

/* defensive: never show a product short-description in the catalog tiles
   (Genio: 料金の下の要約不要) */
.ct-products ul.products li.product .woocommerce-product-details__short-description,
.ct-products ul.products li.product p:not(.price):not(.stock) { display: none !important; }

/* Single product: WooCommerce's default block template renders a post-excerpt
   "summary" under the price. Our products have no short_description, so WP
   auto-trims the long description into it → it duplicates the full 説明 tab
   below (Kohey 2026-06-25: 商品ページに説明が重複してる→片方削除). Hide the
   redundant summary; the canonical 説明 tab keeps the full text. */
.single-product .wp-block-post-excerpt { display: none; }


/* ====== 2026-06-19 Genio フォント統一（クリーニングツール二次ナビ + 3rd-party form fields） ====== */
/* 「← 一覧へ戻る」(.kr-cross-nav-back) を 16px に統一。
   ※ .door-cta 系は 2026-06-21 に既定 16px へ統一済（冒頭 CTA pattern）。 */
.kr-cross-nav-back { font-size: var(--fs-s); }
/* Mailchimp-for-WooCommerce が checkout に出すメルマガ購読フィールド: 13px -> 14px に統一 */
.woocommerce-checkout .mailchimp-newsletter,
.woocommerce-checkout .mailchimp-newsletter *,
.woocommerce-checkout #mailchimp_woocommerce_newsletter_field,
.woocommerce-checkout #mailchimp_woocommerce_newsletter_field label { font-size: var(--fs-s) !important; }

/* ====== 2026-06-19 story 記事の「体験談を送る」CTA（rec 直上に JS 挿入） ======
 * 配置=「次に読む・観る」(div.hpp-rec) 直上（誤検出修正は single-story.html）。
 * サイズは .door-cta 既定 16px に従う（2026-06-21 CTA統一）。 */
.story-submit-cta-wrap { text-align: center; margin: 48px 0 8px; }

/* ============================================================
 * 本文の太さ調整 (Irene→Genio 2026-06-24): 本文 300 は細すぎ→ 550 採用。
 * フォント/雰囲気は維持。見出し・eyebrow・CTA の Light(300) は据え置き。
 * ヒーローの引用2つ(.hero-quote-jp/.founder-quote)は対象外(Genio指定)。
 * 500;600;700 を font loader に追加済(CJK は可変でなく離散ウェイト)。
 * ============================================================ */
main p:not(.hero-quote-jp), main li, main dd,
.service-body, .tp-bio, .pp-quote,
.lead, .intro-lead, .reading-body, .article-body {
  font-weight: var(--w-base) !important;
}

/* TRUE uniform weight (Genio 2026-06-25「全部450」): catch the two element
 * groups that escape the variable — form controls (UA default 400) and the
 * recommendation block (server-injected inline font-weight:300). */
input, textarea, select, button, optgroup {
  font-weight: var(--w-base) !important;
}
.hpp-rec, .hpp-rec * {
  font-weight: var(--w-base) !important;
}

/* ============================================================ *
 *  WooCommerce ORDER RECEIVED  —  /checkout/order-received/
 *  注文完了（サンクス）ページ Aman restyle (Genio 2026-06-25:
 *  「実際に購入したら汚い・全体的にきれいに」)
 *  Block-based confirmation (WooCommerce block theme):
 *    .wc-block-order-confirmation-status   — サンクス見出し
 *    .wc-block-order-confirmation-summary  — 注文番号/日付/合計/メール/支払方法
 *    .wc-block-order-confirmation-totals    — 明細テーブル
 *    .wc-block-order-confirmation-address-wrapper — 配送先/請求先 2カラム
 *    .wc-block-order-confirmation-additional-information — 銀行口座詳細(BACS)
 *  すべて body.woocommerce-order-received にスコープ（このページ限定）。
 * ============================================================ */
.woocommerce-order-received .article-body { max-width: 720px; margin: 0 auto; }
/* このページの post-title は空。空 h1 の余白を畳む */
.woocommerce-order-received .article-title:empty { display: none; }
/* alignwide ブロックを本文カラム幅に収める */
.woocommerce-order-received .article-body .alignwide {
  max-width: 100%; margin-left: auto; margin-right: auto;
}

/* サンクス見出し */
.woocommerce-order-received .wc-block-order-confirmation-status {
  text-align: center; margin: 8px 0 48px; padding-bottom: 36px;
  border-bottom: 1px solid var(--navy-thread);
}
.woocommerce-order-received .wc-block-order-confirmation-status h1 {
  font-family: var(--ff-jp); font-weight: var(--w-base) !important; color: var(--navy);
  font-size: var(--fs-h) !important; letter-spacing: .08em; line-height: 1.5; margin: 0 0 14px;
}
.woocommerce-order-received .wc-block-order-confirmation-status p {
  font-size: var(--fs-s); color: var(--navy-soft); letter-spacing: .04em; line-height: 1.9; margin: 0;
}

/* 注文サマリー（注文番号 / 日付 / 合計 / メール / 支払方法） */
.woocommerce-order-received .wc-block-order-confirmation-summary { margin: 0 0 48px; }
.woocommerce-order-received .wc-block-order-confirmation-summary-list {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--navy-thread);
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 14px 18px; border-top: 1px solid var(--navy-thread);
  font-size: var(--fs-s) !important; letter-spacing: .04em; margin: 0;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item:first-child { border-top: 0; }
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key,
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
  font-size: var(--fs-s) !important; font-weight: var(--w-base) !important;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
  font-family: var(--ff-jp); color: var(--navy); white-space: nowrap;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
  color: var(--navy-soft); text-align: right; overflow-wrap: anywhere;
}

/* セクション見出し（注文詳細 / 配送先 / 請求先 / 銀行口座詳細） */
.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper > h2,
.woocommerce-order-received .wc-block-order-confirmation-shipping-wrapper > h2,
.woocommerce-order-received .wc-block-order-confirmation-billing-wrapper > h2,
.woocommerce-order-received .wc-block-order-confirmation-additional-information > h2,
.woocommerce-order-received .wc-block-order-confirmation-additional-information > h3 {
  font-family: var(--ff-jp); font-weight: var(--w-base); color: var(--navy);
  font-size: var(--fs-b); letter-spacing: .12em; text-align: center; margin: 0 0 18px;
}

/* 明細テーブル */
.woocommerce-order-received .wc-block-order-confirmation-totals { margin: 0 0 48px; }
.woocommerce-order-received .wc-block-order-confirmation-totals__table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--navy-thread);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table td,
.woocommerce-order-received .wc-block-order-confirmation-totals__table th *,
.woocommerce-order-received .wc-block-order-confirmation-totals__table td * {
  font-size: var(--fs-s) !important; font-weight: var(--w-base) !important;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
  padding: 14px 16px; border-top: 1px solid var(--navy-thread);
  letter-spacing: .04em; text-align: left; vertical-align: top; line-height: 1.8;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
  font-family: var(--ff-jp); color: var(--navy); background: var(--beige); border-top: 0;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__total { text-align: right; white-space: nowrap; }
.woocommerce-order-received .wc-block-order-confirmation-totals__label {
  font-family: var(--ff-jp); color: var(--navy); background: var(--beige);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__product a {
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy-thread);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__product a:hover { opacity: .7; }
.woocommerce-order-received .wc-block-order-confirmation-totals__product .product-quantity {
  font-family: var(--ff-en); color: var(--navy-mute); font-weight: var(--w-base); letter-spacing: .06em; white-space: nowrap;
}
.woocommerce-order-received .wc-block-order-confirmation-totals .woocommerce-Price-amount {
  font-family: var(--ff-en); color: var(--navy-soft); letter-spacing: .06em;
}
/* 合計（最終行）を強調 — 本文 22px（ラダー内）。太字は使わずサイズと色で */
.woocommerce-order-received .wc-block-order-confirmation-totals__table tr:last-child th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tr:last-child td,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tr:last-child th *,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tr:last-child td * {
  font-size: var(--fs-b) !important; color: var(--navy);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table tr:last-child th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tr:last-child td {
  border-top: 1px solid var(--navy);
}

/* 配送先 / 請求先 */
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
  gap: 32px; margin: 0 0 48px; align-items: stretch;
}
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper address {
  font-style: normal; font-size: var(--fs-s); line-height: 2; color: var(--navy-soft);
  letter-spacing: .04em; background: var(--beige); padding: 20px 22px; height: 100%;
}
.woocommerce-order-received .woocommerce-customer-details--phone {
  margin: 10px 0 0; font-size: var(--fs-s); color: var(--navy-soft); letter-spacing: .04em;
}

/* 銀行口座詳細（BACS） */
.woocommerce-order-received .wc-block-order-confirmation-additional-information { margin: 0 0 8px; }
.woocommerce-order-received .order_details.bankjp_details { list-style: none; margin: 0; padding: 0; }
.woocommerce-order-received .bankjp_details .account_info {
  background: var(--beige); padding: 18px 22px; margin: 0 0 14px;
  font-size: var(--fs-s); line-height: 2; letter-spacing: .04em; color: var(--navy-soft);
}
.woocommerce-order-received .bankjp_details .account_info:last-child { margin-bottom: 0; }
.woocommerce-order-received .bankjp_details .account_info strong {
  color: var(--navy); font-weight: var(--w-base);
}

@media (max-width: 600px) {
  .woocommerce-order-received .article-body { max-width: 100%; }
  .woocommerce-order-received .wc-block-order-confirmation-status h1 { font-size: var(--fs-h) !important; letter-spacing: .04em; }
  .woocommerce-order-received .wc-block-order-confirmation-address-wrapper { flex-direction: column; gap: 16px; }
  .woocommerce-order-received .wc-block-order-confirmation-totals__table th,
  .woocommerce-order-received .wc-block-order-confirmation-totals__table td { padding: 12px 13px; }
}

/* ============================================================ *
 *  2026-06-25 バッチ（Kohei 5件のレイアウト/メタ + Genio 見出し統一4P）
 * ============================================================ */

/* 2. izi/private-session 講師カードの左右幅が不揃い。grid は repeat(2,1fr) だが
   カード内画像が min-width:auto で 1fr トラックを押し広げ 505/381px に膨張していた。
   → グリッド項目に min-width:0、画像に max-width で 1fr を均等化 (Kohei) */
.instructors-grid > .instructor-card { min-width: 0; }
.instructor-card img { max-width: 100%; }
/* keep the inst-photo cover behaviour (the line above used to force height:auto,
   which left a beige gap below the photo — Kohei 2026-06-25 mobile) */
.instructor-card .inst-photo img { height: 100% !important; }

/* 3. class 日程・会場の情報テーブル（ACFブロック）が prose 内で左寄せ。
   中央のタイトル/CTA に対しBOXだけ左にズレて見える → BOXをセンタリング
   （テキスト整列ではなくBOX位置／Kohei） */
.class-info-sec table { margin-left: auto; margin-right: auto; }
/* 注意書きの各トピック（会場・アクセス／オンライン参加／ご参加にあたって／キャンセル規定）を
   淡いカードに統一（受講料・facts と同じ調子・Genio 2026-06-29）。長文の壁が分節されて読みやすく。 */
.single-class .class-segment, .single-seminar .class-segment {
    max-width: 720px; margin: 0 auto 22px; padding: 30px 36px 26px;
    border: 1px solid var(--hair-light, #d4e2ee);
}
.single-class .class-segment:last-child, .single-seminar .class-segment:last-child { margin-bottom: 0; }
.single-class .class-segment .class-subhead, .single-seminar .class-segment .class-subhead {
    margin-top: 0; padding-bottom: 16px; border-bottom: 1px solid var(--hair-light, #d4e2ee);
}

/* 5. 商品ページ: SKU・カテゴリーは管理用情報なので表を非表示 (Kohei) */
.single-product .wp-block-woocommerce-product-meta { display: none; }

/* 6. class/health-class: 会場・アクセス／オンライン参加／ご参加にあたって／キャンセル規定
   の大セクション見出し(.class-subhead)が22で他(36)と不揃い → 36 に統一 (Genio B方針) */
.single-class .class-subhead { font-size: var(--fs-h) !important; }
@media (max-width: 600px) { .single-class .class-subhead { font-size: var(--fs-h) !important; } }

/* 7. izi: 「KR の個人セッション」(.kr-deeper-title) が h3 なのに36 → サブ見出しは22。
   ※ KR 各ページの .kr-deeper-title は大セクション扱いで36のまま保持するため izi 限定 */
.single-izi .kr-deeper-title { font-size: var(--fs-b) !important; }

/* 8. event-overview: クラス名(.ec-title)が 18px・一部300 とラダー外 → 22px・450 に統一 (Genio) */
.page-id-3455 .ec-title { font-size: var(--fs-b) !important; font-weight: var(--w-base) !important; }

/* 9. about-introduction: セクション見出しの太さが300/450混在（preview移植の page 内
   inline <style> `.intro-section-head-band h2{font-weight:300}` が残存）→ 450 に統一 (Genio) */
.page-id-15741 .intro-section-head-band h2 { font-weight: var(--w-base) !important; }

/* ===== FAQ (reading/faq) — Irene content rebuild 2026-06-26 ===== */
.faq-morrnah { margin: 0 auto 12px; max-width: 460px; }
.faq-quote {
  font-style: italic;
  font-weight: var(--w-bold, 700);
  font-size: var(--fs-b);
  line-height: 1.95;
  color: var(--navy);
  background: var(--beige);
  border: none;
  padding: 30px 40px;
  margin: 40px auto;
  max-width: 720px;
  text-align: center;
}
.faq-quote p { margin: 0; }
/* Q&A: question headings get a touch more space; answers left-aligned (global rule already left-aligns p) */
.article-body .faq-quote + p { margin-top: 28px; }
/* quote must be italic too (Irene: 太字＋イタリック) — a child rule was resetting it */
.faq-quote, .faq-quote p { font-style: italic !important; }
/* FAQ page: hide the featured-image thumbnail + the モーナ teacher-chip box
   (Genio 2026-06-26: 不要). Scoped to the FAQ post — staging id 3278; update the
   id (or switch to a slug-based body class) at prod cutover. */
body.postid-3278 .article-hero,
body.postid-3278 .article-teacher-chips { display: none !important; }

/* ===== FAQ Q&A boxes — clear question/answer separation (Genio 2026-06-26, live-style) ===== */
.article-body .faq-item { max-width: 760px; margin: 0 auto 16px; }
.article-body .faq-q {
  background: var(--navy); color: #fdfcf8;
  font-size: var(--fs-b); font-weight: var(--w-bold, 700); line-height: 1.7;
  letter-spacing: .03em; margin: 0; padding: 16px 26px 16px 58px;
  position: relative; text-align: left;
}
.article-body .faq-q::before {
  content: "Q"; position: absolute; left: 24px; top: 16px;
  font-style: italic; font-weight: 700; opacity: .6;
}
.article-body .faq-a {
  background: var(--beige); color: var(--navy);
  font-size: var(--fs-b) !important; line-height: 1.95; margin: 0; padding: 18px 26px 20px 58px;
  position: relative; text-align: left;
}
.article-body .faq-a::before {
  content: "A"; position: absolute; left: 24px; top: 18px;
  font-style: italic; font-weight: 700; opacity: .42;
}
.article-body .faq-a a { color: var(--navy); text-decoration: underline; }
/* reference articles as cards (Genio: ボックス化) */
.faq-refs { display: grid; gap: 10px; margin: 12px 0 4px; }
.faq-ref-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--hair, #c6d6e4);
  padding: 15px 20px; color: var(--navy); text-decoration: none;
  font-size: var(--fs-s); line-height: 1.65; transition: background .3s ease, border-color .3s ease;
}
.faq-ref-card:hover { background: var(--beige); border-color: var(--navy); }
.faq-ref-arrow { flex-shrink: 0; opacity: .6; }
/* Q box text was overridden to green-on-green by the global heading color — force cream */
.article-body .faq-q, .article-body .faq-q::before { color: #fdfcf8 !important; }
/* beat the global .article-body :is(h..):not(.has-white-color) green rule (0,2,1) */
.article-body h3.faq-q, .article-body h3.faq-q::before { color: #fdfcf8 !important; }
/* Q/A letter badges removed (the italic "Q" read as "9" and overlapped the text on
   mobile) + questions centered (Genio 2026-06-26). Answers stay left = body rule. */
.article-body .faq-q::before, .article-body .faq-a::before { content: none !important; }
.article-body .faq-q { text-align: center !important; padding: 16px 26px !important; }
.article-body .faq-a { padding: 18px 26px 20px !important; }

/* ===== FAQ feature band on home — cinematic Morrnah + quote → FAQ (Genio 2026-06-26) ===== */
.faq-feature { position: relative; overflow: hidden; padding: 90px 24px; text-align: center; }
.faq-feature-bg { position: absolute; inset: 0; z-index: 0; }
.faq-feature-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.faq-feature-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(47, 93, 52, .84); }
.faq-feature-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.faq-feature-eyebrow { color: #fdfcf8; opacity: .82; letter-spacing: .34em; font-size: var(--fs-s); margin-bottom: 30px; }
.faq-feature-quote { color: #fdfcf8; font-style: italic; font-size: var(--fs-h); line-height: 2.0; letter-spacing: .04em; margin: 0 auto 30px; border: none; padding: 0; max-width: 680px; }
.faq-feature-quote p { margin: 0; }
.faq-feature-by { color: #fdfcf8; opacity: .78; font-size: var(--fs-s); letter-spacing: .1em; margin-bottom: 40px; }
.faq-feature-cta { display: inline-block; color: #fdfcf8; border: 1px solid rgba(253,252,248,.55); padding: 14px 34px; font-size: var(--fs-s); letter-spacing: .14em; text-decoration: none; transition: background .35s ease, color .35s ease, letter-spacing .35s ease; }
.faq-feature-cta:hover { background: #fdfcf8; color: var(--navy); letter-spacing: .2em; }
@media (min-width: 768px) {
  .faq-feature { padding: 130px 24px; }
  .faq-feature-quote { font-size: var(--fs-h); line-height: 1.9; }
}

/* faq-feature refinements (Genio 2026-06-26): title-size heading, hero-quote-sized
   (22px) quote, B&W (grayscale) photo + transparency instead of green, refined CTA */
.faq-feature-bg img { filter: grayscale(1) contrast(1.04); object-position: center 22%; }
.faq-feature-overlay { background: rgba(18, 22, 20, .5); }
.faq-feature-eyebrow { font-size: var(--fs-h); letter-spacing: .18em; line-height: 1.5; opacity: 1; margin-bottom: 34px; font-weight: var(--w-base); }
.faq-feature-quote { font-style: normal; font-size: var(--fs-b); letter-spacing: .14em; line-height: 2.1; max-width: 680px; }
.faq-feature-cta { border: none; padding: 0 2px 6px; font-size: var(--fs-s); letter-spacing: .16em; border-bottom: 1px solid rgba(253,252,248,.55); }
.faq-feature-cta:hover { background: transparent; color: #fdfcf8; letter-spacing: .26em; border-bottom-color: #fdfcf8; }
@media (min-width: 768px) {
  .faq-feature-eyebrow { font-size: var(--fs-h); letter-spacing: .22em; margin-bottom: 40px; }
  .faq-feature-quote { font-size: var(--fs-b); }
}

/* ===== リーディングスタディ 話ナビ (前の回 / 一覧 / 次の回) — Genio 2026-06-26 ===== */
.rs-nav { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; margin: 52px auto 8px; }
.rs-nav-btn { display: flex; align-items: center; justify-content: center; text-align: center; padding: 15px 14px; font-size: var(--fs-s); letter-spacing: .06em; color: var(--navy); border: 1px solid var(--hair, #c6d6e4); text-decoration: none; transition: background .3s ease, border-color .3s ease; }
.rs-nav-btn:hover { background: var(--beige); border-color: var(--navy); }
.rs-nav-prev { order: 1; flex: 1 1 45%; }
.rs-nav-next { order: 2; flex: 1 1 45%; }
.rs-nav-list { order: 3; flex: 1 1 100%; background: var(--navy); color: #fdfcf8; border-color: var(--navy); }
.rs-nav-list:hover { background: #44583f; color: #fdfcf8; }
.rs-nav-empty { border: none; pointer-events: none; background: none; }
@media (min-width: 600px) {
  .rs-nav-prev, .rs-nav-next { flex: 1 1 0; }
  .rs-nav-list { order: 2; flex: 1.3 1 0; }
  .rs-nav-next { order: 3; }
}
/* リーディングスタディ シリーズ入口の2ボタンナビ（一覧 / 次へ） */
.rs-nav--entry .rs-nav-list { order: 1; flex: 1 1 45%; }
.rs-nav--entry .rs-nav-next { order: 2; flex: 1 1 45%; }

/* WWA 月別スケジュール（Genio 2026-06-30：日付を読みやすくデザイン化）。
   3 列は細すぎるので 1 列に統一して上下に積む（Kohei 2026-07-01）。 */
.wwa-sched-sec .wwa-sched-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:46px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto}
.wwa-sched-card{background:var(--white);border:1px solid var(--hair);padding:30px 28px}
.wsd-month{font-family:var(--ff-jp);font-size:var(--fs-b);font-weight:var(--w-base);color:var(--navy);text-align:center;border-bottom:1px solid var(--hair);padding-bottom:14px;margin:0 0 18px}
.wsd-list{list-style:none;margin:0;padding:0}
.wsd-item{padding:14px 0;border-bottom:1px dotted var(--hair)}
.wsd-item:last-child{border-bottom:0}
.wsd-when{display:block;font-size:var(--fs-s);color:var(--navy);line-height:1.7}
.wsd-teacher{display:block;font-size:var(--fs-s);color:var(--navy-mute);margin-top:6px;line-height:1.6}

/* WWA 本文（スケジュール上）の可読性デザイン（Genio 2026-06-30：かっこよく・見やすく） */
.wwa-body .service-body-inner{max-width:760px}
.wwa-body .service-body h2{position:relative;text-align:center;font-size:var(--fs-h);letter-spacing:.05em;line-height:1.5;padding-bottom:20px;margin-bottom:34px}
.wwa-body .service-body h2::after{content:"";display:block;width:46px;height:1px;margin:20px auto 0;background:var(--navy);opacity:.38}
.wwa-body .service-body p{line-height:2.05;margin:0 0 1.4em;text-align:left}
.wwa-body .service-body p:first-of-type{font-size:var(--fs-b);line-height:2.1}
/* 参加費など su_box 由来の callout をクリーンに（2026-07-01 Genio「値段表示を綺麗に」） */
.wwa-callout{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:360px;margin:34px auto;padding:26px 28px;background:var(--white);border:1px solid var(--hair);text-align:center}
.wwa-callout-label{font-size:var(--fs-s);letter-spacing:.14em;color:var(--navy-mute)}
.wwa-callout-value{font-size:var(--fs-h);letter-spacing:.06em;color:var(--navy);line-height:1.4}
/* 注意事項などのリストを罫線付きで読みやすく */
.wwa-body .service-body ul{list-style:none;max-width:700px;margin:8px auto 0;padding:0}
.wwa-body .service-body ul li{position:relative;padding:15px 0 15px 30px;border-bottom:1px dotted var(--hair);line-height:1.9}
.wwa-body .service-body ul li:last-child{border-bottom:0}
.wwa-body .service-body ul li::before{content:"◇";position:absolute;left:2px;top:15px;color:var(--navy);opacity:.55;font-size:var(--fs-s)}
/* 博士からのメッセージ（beige セクション）は引用調で上品に */
.wwa-body .service-body--beige p{font-family:var(--ff-jp);font-size:var(--fs-b);line-height:2.15;letter-spacing:.02em}
@media (max-width:768px){
  .wwa-body .service-body h2{font-size:var(--fs-b)}
  .wwa-body .service-body p,.wwa-body .service-body--beige p{font-size:var(--fs-s);line-height:2}
}

/* WWA Q&A アコーディオン（質問=summary / 回答=中身。Genio 2026-06-30） */
.wwa-body .wwa-faq-list{max-width:720px;margin:10px auto 0}
.wwa-body .wwa-faq{border-bottom:1px solid var(--hair)}
.wwa-body .wwa-faq-q{cursor:pointer;list-style:none;display:block;padding:20px 40px 20px 4px;position:relative;font-size:var(--fs-s);line-height:1.8;color:var(--navy)}
.wwa-body .wwa-faq-q::-webkit-details-marker{display:none}
.wwa-body .wwa-faq-q::marker{content:""}
.wwa-body .wwa-faq-mark{position:absolute;right:8px;top:20px;transition:transform .25s ease;opacity:.55;font-size:var(--fs-b)}
.wwa-body details[open] .wwa-faq-mark{transform:rotate(45deg)}
.wwa-body .wwa-faq-a{padding:0 8px 22px 4px;line-height:2.05;color:var(--navy-soft,#2f5d34)}
.wwa-body .wwa-faq-list + p,.wwa-body .wwa-faq + p{margin-top:0}

/* ── mobile overflow guard (2026-07-01): old-site inline fixed widths
   (width:840px 等) が携帯幅を超えるのを防ぐ。article 本文の要素を 100% に収める。 */
@media (max-width: 768px) {
  .article-body [style*="width"],
  .article-body img,
  .article-body table,
  .article-body iframe,
  .article-body video,
  .article-body embed { max-width: 100% !important; }
  .article-body img { height: auto !important; }
  .article-body table { display: block; overflow-x: auto; }
}

/* ===== 価格表示の統一 (Kohei 2026-07-02): 全ページ fact-label チップ + fact-value 行 ===== */
.hpp-fee { max-width: 560px; margin-left: auto !important; margin-right: auto !important;
  border: none; border-bottom: 1px solid var(--hair-light, #d4e2ee); background: transparent; padding: 2px 0; }
.hpp-fee .fact-label { background: rgba(47, 93, 52, .07); border-radius: 2px; padding: 4px 14px;
  text-align: center; min-width: 4.4em;
  /* 長い EN ラベル（Land Cleaning Service 1-month plan 等）がモバイルで溢れないよう
     チップの縮小・折返しを許可（.fact-label 既定の flex-shrink:0 を上書き・2026-07-06） */
  flex-shrink: 1; white-space: normal; overflow-wrap: break-word; }
.hpp-fee li { align-items: center; gap: 20px; }
/* [hpp_class_cta style="box"] — 記事末尾の講演会導線ボックス（CC14/Fukui 2026-07-03。
   水色ハイライト＋濃緑枠・リード2行＋中央ボタン。期限切れで shortcode ごと消える） */
.hpp-timed-cta-box {
  max-width: 640px;
  margin: 48px auto;
  padding: 34px 26px 30px;
  background: var(--beige, #e7f1f7);
  border: 1px solid var(--navy, #2f5d34);
  text-align: center;
}
.hpp-timed-cta-box .hpp-timed-cta-lead {
  margin: 0 0 6px;
  font-size: var(--fs-b);
  font-weight: 700;
  color: var(--navy, #2f5d34);
  line-height: 1.8;
}
.hpp-timed-cta-box .hpp-timed-cta-lead2 {
  margin: 0 0 18px;
  font-size: var(--fs-b);
  color: var(--navy, #2f5d34);
  line-height: 1.8;
}
/* 3行目リード（CC14 2026-07-07・lead2 と同スタイル）。lead2 直後に来る時だけ
   lead2 の下マージンを詰めて 3 行を1グループに見せる（2行構成は従来の 18px 維持）。 */
.hpp-timed-cta-box .hpp-timed-cta-lead3 {
  margin: 0 0 18px;
  font-size: var(--fs-b);
  color: var(--navy, #2f5d34);
  line-height: 1.8;
}
.hpp-timed-cta-box .hpp-timed-cta-lead2:has(+ .hpp-timed-cta-lead3) { margin-bottom: 6px; }
.hpp-timed-cta-box .hpp-timed-cta { margin: 0; text-align: center; }

/* label-less instruction line in the seminar fee list (EN/TW format) */
.hpp-fee li.fee-note { justify-content: center; }
.hpp-fee li.fee-note .fact-value { text-align: center; font-size: var(--fs-s); color: var(--navy-soft); }
/* WWA の参加費 callout も同ルックに（カード型 → 行型） */
.wwa-callout { flex-direction: row; justify-content: center; align-items: center; gap: 20px;
  max-width: 560px; border: none; border-bottom: 1px solid var(--hair-light, #d4e2ee);
  background: transparent; padding: 15px 0; }
.wwa-callout-label { background: rgba(47, 93, 52, .07); border-radius: 2px; padding: 4px 14px;
  color: var(--navy); font-size: var(--fs-b); letter-spacing: .08em; }
.wwa-callout-value { font-size: var(--fs-b); color: var(--navy-soft); }
/* 旧サイト su-box（KR/EN の料金メタ等・水色ボックス）をテーマ調に平坦化 */
.article-body .su-box, .class-prose .su-box, .service-body .su-box, .service-body-inner .su-box {
  background: transparent !important; border: 1px solid var(--hair, #c6d6e4) !important;
  border-radius: 0 !important; box-shadow: none !important; }
.article-body .su-box-title, .class-prose .su-box-title, .service-body .su-box-title, .service-body-inner .su-box-title {
  background: rgba(47, 93, 52, .07) !important; color: var(--navy, #2f5d34) !important;
  font-weight: var(--w-base) !important; letter-spacing: .08em; border-radius: 0 !important; }
.article-body .su-box-content, .service-body .su-box-content, .service-body-inner .su-box-content {
  color: var(--navy-soft) !important; }

/* ============================================================
 * STRAWBERRY JAM — 30秒ダイジェスト（Genio 2026-09-18 承認の A＋B＋C）
 *   A: トップの特集内・次回カードの真上に最新 5 本の横一列
 *   B: アーカイブ一覧のカード（ダイジェストのある回だけ押せる面になる）
 *   C: 各回ページ・有料プレイヤーの上
 * 文字は 36/22/16 の段だけを使う（小＝16）。1440px では特集の 720px 枠から
 * はみ出して 1040px 幅で置く（枠内に 5 列だと 1 列 120px で題が読めない）。
 * ============================================================ */
.sj-shorts { margin: 54px 0 0; width: min(1040px, calc(100vw - 48px));
  /* はみ出しは **margin だけ**で作る。transform は使えない——`.reveal.in` が
     transform:none を当てるので、画面に入った瞬間に横位置が飛ぶ（2026-09-21 実測）。 */
  margin-left: calc(50% - min(520px, (100vw - 48px) / 2)); }
.sj-shorts-head { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.sj-shorts-head::after { content: ""; flex: 1; height: 1px; background: var(--navy-thread); }
.sj-shorts-lead { margin: 0; font-size: var(--fs-s); letter-spacing: .22em; color: var(--navy-mute); }
/* 5 本ぶんの幅を 1 枚の大きさの基準にしたまま、**本数が 5 に満たない回は中央に寄せる**。
   grid の 5 列のままだと 3 本が左に寄り、右 2 枠ぶんの空きが「まだ揃っていない」に見える。 */
.sj-shorts-track { display: flex; justify-content: center; gap: 20px; }
.sj-short { flex: 0 0 calc((100% - 80px) / 5); display: block; text-decoration: none;
  color: inherit; }
.sj-short-frame { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--beige-deep); }
.sj-short-frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s ease; }
.sj-short:hover .sj-short-frame img { transform: scale(1.03); }
.sj-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .34); }
.sj-play::after { content: ""; position: absolute; left: 53%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.sj-dur { position: absolute; right: 8px; bottom: 8px; font-size: var(--fs-s); letter-spacing: .06em;
  color: #fff; background: rgba(0, 0, 0, .5); padding: 1px 8px; }
.sj-short-t { display: block; margin: 12px 2px 0; font-size: var(--fs-s); line-height: 1.75;
  color: var(--navy-soft); overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* B: 一覧カードの上に置く再生マーク。CSS だけの丸（.v-thumb::after）は押せないので、
   ダイジェストのある回では伏せて、こちらを押せる面にする（丸が 2 重にならない）。 */
.v-thumb.has-digest::after { display: none; }
.sj-cardplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .46); cursor: pointer; z-index: 2;
  transition: background .3s ease, transform .3s ease; }
.sj-cardplay::after { content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.sj-cardplay:hover { background: rgba(0, 0, 0, .62); transform: translate(-50%, -50%) scale(1.06); }
.sj-cardtag { position: absolute; left: 10px; top: 10px; font-size: var(--fs-s); letter-spacing: .1em;
  color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 10px; pointer-events: none; z-index: 2; }

/* C: 各回ページ。縦なので幅を絞って中央に置く（本編プレイヤーの上）。 */
.sjv-digest-sec { background: var(--white); padding: 8px 0 0; }
.sjv-digest { max-width: 300px; margin: 0 auto; }
.sjv-digest-lead { font-size: var(--fs-s); letter-spacing: .18em; color: var(--navy-mute);
  margin: 0 0 12px; text-align: center; }
.sjv-digest-time { margin-left: .8em; letter-spacing: .06em; }
.sjv-digest-v { display: block; width: 100%; aspect-ratio: 9 / 16; background: #000; }

/* 再生のオーバーレイ（A・B 共通）。押した場所のまま見せて、下に各回ページへの導線を出す。 */
html.sj-modal-open, html.sj-modal-open body { overflow: hidden; }
.sj-modal { position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; background: rgba(12, 20, 14, .88); padding: 24px; }
.sj-modal.on { display: flex; }
.sj-modal-box { position: relative; width: min(340px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 12px; }
.sj-modal-v { display: block; width: 100%; max-height: calc(100vh - 190px);
  aspect-ratio: 9 / 16; background: #000; }
.sj-modal-t { margin: 0; font-size: var(--fs-s); line-height: 1.7; color: #fff; text-align: center; }
.sj-modal-go { font-size: var(--fs-s); letter-spacing: .1em; color: #fff; text-align: center;
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .5);
  align-self: center; padding-bottom: 3px; }
.sj-modal-x { position: absolute; top: -36px; right: -6px; width: 34px; height: 34px;
  background: none; border: 0; color: #fff; font-size: var(--fs-b); line-height: 1; cursor: pointer; }

@media (max-width: 781px) {
  /* 携帯は横スワイプ。**左は本文の列に揃え、右だけ画面の端まで流す**（右端で切れている
     ことが「まだ続く」の合図になる。左も落とすと題と揃わず、ただの見切れに見える）。 */
  .sj-shorts { width: auto; margin: 38px -24px 0 0; }
  .sj-shorts-head { padding: 0 24px 0 0; }
  .sj-shorts-track { display: flex; justify-content: flex-start; gap: 12px; overflow-x: auto;
    padding: 0 24px 6px 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .sj-short { flex: 0 0 46vw; scroll-snap-align: start; }
  .sjv-digest { max-width: 260px; }
}

/* ===== 文字は 3 サイズだけ（Genio 2026-09-30 Q180「3つだけ」）=====
   WooCommerce ブロック・select2 が自前で持つ 13〜17.5px を小（--fs-s）へ。
   Amelia の予約 UI は自前のアイコンフォントと寸法で組まれているので触らない。 */
.woocommerce-breadcrumb,
.wc-block-components-notice-banner__content,
.wc-block-components-product-price, .wp-block-woocommerce-product-price,
.wc-block-grid__product-price, .woocommerce-Price-amount,
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title,
.select2-container .select2-selection__rendered,
.select2-container .select2-selection__placeholder,
.select2-results__option {
    font-size: var(--fs-s) !important;
}
.woocommerce-Price-amount .woocommerce-Price-currencySymbol { font-size: inherit !important; }