@charset "UTF-8";

/* 一頁式廣告頁 v2 樣式表（本頁不載入全站 CSS）。前半 bsn- 是 v1 移植的基礎，後半 opa- 是 v2 設計 */

/* ===== 設計變數 ===== */

:root {
    /* 主色：沿用主站品牌綠（theme.json 的 at-primary） */
    --bsn-key: #41956a;
    --bsn-key-deep: #1a5c3c;
    --bsn-key-soft: #e8efe6;
    /* 與主色同值；襯白字對比 3.66:1，只過大字門檻 */
    --bsn-key-bg: var(--bsn-key);
    /* 資訊帶弧線第二層，比主色淺一階（取自主站 #6FA980） */
    --bsn-key-mid: #6fa980;

    /* CTA 按鈕：溫潤金黃（配 --bsn-key-deep 文字，對比 5:1 以上） */
    --bsn-accent: #f2c94c;
    --bsn-accent-deep: #e3b73f;

    --bsn-ink: #2b3a31;
    --bsn-muted: #5c6d61;
    --bsn-line: #dbe6dd;
    --bsn-white: #ffffff;
    --bsn-navy: #1c3a2c;
    --bsn-danger: #c04540;

    /* 四個重點卡片：全部取自主站既有的點綴色 */
    --bsn-c1: #41956a;
    --bsn-c2: #8caebf;
    --bsn-c3: #d4d56f;
    --bsn-c4: #e8b4c8;

    /* 上面四色當文字不夠對比，各配一個同色相的深色版 */
    --bsn-c1-ink: #1a5c3c;
    --bsn-c2-ink: #3f6a7d;
    --bsn-c3-ink: #6b6d1f;
    --bsn-c4-ink: #9c4c69;

    /* 四步驟共用一組色；icon 的深藍寫在 svg 檔內，改色要一起改 */
    --bsn-step-ring: #f2f2f2;
    --bsn-step-num: var(--bsn-key);
    --bsn-step-ic: #1b2a5e;

    /* 以主站粉 #e8b4c8 為基準的三個明度 */
    --bsn-heart: #e8b4c8;
    --bsn-heart-deep: #c9769a;
    --bsn-heart-soft: #f2d5e0;

    /* 內容區實際寬度（不含左右留白） */
    --bsn-shell: 1330px;
    /* hero 與底部資訊帶自成一套寬度，且不加左右內距（靠 max-width 置中） */
    --bsn-hero-shell: 1330px;
    --bsn-bar-shell: 1330px;
    --bsn-gutter: clamp(20px, min(4vw, 48px), 48px);
    --bsn-radius: 26px;
    --bsn-radius-sm: 16px;
    --bsn-shadow: 0 8px 32px rgba(40, 85, 62, .14);
    --bsn-shadow-lift: 0 18px 44px rgba(40, 85, 62, .22);

    /* 全站統一使用系統字型，與原網站一致，不另外載入字型檔 */
    --bsn-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", "Microsoft JhengHei", "微軟正黑體", sans-serif;
    --bsn-en: var(--bsn-sans);
    --bsn-script: var(--bsn-sans);
}

/* ===== Reset / 基礎 ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bsn-white);
    color: var(--bsn-ink);
    font-family: var(--bsn-sans);
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}

img,
picture,
svg {
    max-width: 100%;
}

img {
    height: auto;
    border: 0;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
figure {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

/* 視覺上藏起來，但保留在 DOM 與無障礙樹裡（H1 的真文字用）。
   不用 display:none —— 那會連螢幕閱讀器與搜尋引擎都讀不到 */
.opa-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* 共用限寬容器：寬螢幕時內容剛好 --bsn-shell，變窄時才由 gutter 讓出留白 */
.bsn-merit-grid,
.bsn-journey-track,
.bsn-enroll-wrap,
.bsn-voices-grid,
.bsn-location-wrap,
.bsn-location-head,
.bsn-pagefoot-grid {
    width: 100%;
    max-width: calc(var(--bsn-shell) + var(--bsn-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--bsn-gutter);
}

/* hero 區的容器不加內距：文字的左右留白由 .bsn-masthead-copy 自己控制 */
.bsn-masthead-wrap {
    width: 100%;
    max-width: var(--bsn-hero-shell);
    margin-inline: auto;
}

.bsn-actionbar-wrap {
    width: 100%;
    max-width: var(--bsn-bar-shell);
    margin-inline: auto;
}

/* ===== 捲動淡入 ===== */

/* 初始隱藏只在 .bsn-scripted 下生效，JS 掛了也不會整頁空白 */
.bsn-scripted .bsn-appear,
.bsn-scripted .bsn-appear-l,
.bsn-scripted .bsn-appear-r,
.bsn-scripted .bsn-appear-soft {
    opacity: 0;
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.bsn-scripted .bsn-appear {
    transform: translateY(46px);
}

.bsn-scripted .bsn-appear-l {
    transform: translateX(-56px);
}

.bsn-scripted .bsn-appear-r {
    transform: translateX(56px);
}

.bsn-scripted .bsn-appear.bsn-inview,
.bsn-scripted .bsn-appear-l.bsn-inview,
.bsn-scripted .bsn-appear-r.bsn-inview,
.bsn-scripted .bsn-appear-soft.bsn-inview {
    opacity: 1;
    transform: none;
}

/* 同組元素依序出場 */
.bsn-lag1 {
    transition-delay: 0s;
}

.bsn-lag2 {
    transition-delay: .12s;
}

.bsn-lag3 {
    transition-delay: .24s;
}

.bsn-lag4 {
    transition-delay: .36s;
}

.bsn-lag5 {
    transition-delay: .48s;
}

/* ===== 滑鼠星軌 / 捲動進度 / 回到頂端 ===== */

/* 跟著滑鼠灑出的愛心（fixed，跟著視窗座標） */
.bsn-trail-heart {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: bsnTrailFade .8s ease-out forwards;
}

/* 愛心不轉圈，改成向上飄升＋左右輕微擺動 */
@keyframes bsnTrailFade {
    from {
        opacity: .9;
        transform: translate(-50%, -50%) scale(1) rotate(-8deg);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -160%) scale(.35) rotate(8deg);
    }
}

.bsn-pop-heart {
    position: absolute;
    z-index: 60;
    pointer-events: none;
    animation: bsnPopFloat 1.2s ease-out forwards;
}

@keyframes bsnPopFloat {
    0% {
        opacity: 0;
        transform: scale(.3) rotate(-12deg);
    }

    25% {
        opacity: 1;
        transform: scale(1) rotate(6deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-46px) scale(.45) rotate(-10deg);
    }
}

/* 環境愛心用 fixed 才會只出現在可視範圍；--bsn-ah-* 由 JS 逐顆隨機 */
.bsn-ambient-heart {
    position: fixed;
    z-index: 9997;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: bsnAmbientFloat 5s ease-in-out forwards;
}

@keyframes bsnAmbientFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.35) rotate(-10deg);
    }

    20% {
        opacity: var(--bsn-ah-peak, .5);
    }

    70% {
        opacity: var(--bsn-ah-peak, .5);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--bsn-ah-dx, 0px)), -190%) scale(.85) rotate(12deg);
    }
}

.bsn-readbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9997;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--bsn-key), var(--bsn-accent));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

#bsnGoTop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bsn-key);
    color: var(--bsn-white);
    box-shadow: 0 6px 18px rgba(40, 85, 62, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .3s ease;
}

#bsnGoTop.bsn-lifted {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#bsnGoTop:hover {
    background: var(--bsn-key-deep);
}

#bsnGoTop svg {
    width: 22px;
    height: 22px;
}

/* ===== 報名表單 ===== */

.bsn-signup-strip {
    position: relative;
    padding: clamp(64px, min(8vw, 96px), 110px) 0;
    background: var(--bsn-key-bg);
    overflow: hidden;
    scroll-margin-top: 20px;
}

.bsn-signup-strip-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .3;
}

.bsn-signup-strip-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bsn-signup-strip-echo {
    position: absolute;
    right: 3%;
    bottom: 2%;
    z-index: 1;
    color: rgba(255, 255, 255, .1);
    font-family: var(--bsn-en);
    font-size: clamp(6rem, min(16vw, 192px), 18rem);
    font-weight: 900;
    line-height: .8;
    pointer-events: none;
    user-select: none;
}

.bsn-enroll-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(28px, min(4vw, 48px), 56px);
}

/* 格線是 center，左欄單獨改 start，標題才貼齊表單卡上緣 */
.bsn-enroll-intro {
    align-self: start;
    text-align: center;
}

/* 標題已改成圖片，h2 只負責語意，字級與行高交還給 img */
.bsn-enroll-intro-head {
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.bsn-enroll-intro-img {
    display: block;
    width: clamp(240px, min(39vw, 468px), 580px);
    height: auto;
    margin-inline: auto;
}

.bsn-enroll-panel {
    padding: clamp(26px, min(3.5vw, 42px), 44px);
    border-radius: var(--bsn-radius);
    background: var(--bsn-white);
    box-shadow: var(--bsn-shadow-lift);
}

.bsn-ef-field {
    margin-bottom: 18px;
}

.bsn-ef-field>label,
.bsn-ef-label-row label {
    display: block;
    margin-bottom: 7px;
    font-size: .92rem;
    font-weight: 700;
}

.bsn-ef-star {
    color: var(--bsn-danger);
}

.bsn-ef-field input[type="text"],
.bsn-ef-field input[type="tel"],
.bsn-ef-field input[type="email"],
.bsn-ef-field input[type="number"],
.bsn-ef-field select,
.bsn-ef-source-free {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--bsn-line);
    border-radius: 12px;
    background: #f6f9f6;
    font-size: 1rem;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.bsn-ef-field input:focus,
.bsn-ef-field select:focus,
.bsn-ef-source-free:focus {
    outline: none;
    border-color: var(--bsn-key);
    background: var(--bsn-white);
    box-shadow: 0 0 0 3px rgba(65, 149, 106, .18);
}

.bsn-ef-field input::placeholder,
.bsn-ef-source-free::placeholder {
    color: #9aa89f;
}

.bsn-ef-row {
    display: flex;
    gap: 14px;
}

.bsn-ef-row>.bsn-ef-field {
    flex: 1;
    min-width: 0;
}

.bsn-ef-birth-row select {
    min-width: 0;
}

.bsn-ef-tel-combo {
    display: flex;
    gap: 8px;
}

.bsn-ef-dial {
    flex: 0 0 46%;
    min-width: 0;
}

/* 單選 */
.bsn-ef-opts {
    display: flex;
    gap: 12px;
}

.bsn-ef-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border: 1.5px solid var(--bsn-line);
    border-radius: 100px;
    background: #f6f9f6;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.bsn-ef-opt:has(input:checked) {
    border-color: var(--bsn-key);
    background: var(--bsn-key-soft);
    color: var(--bsn-key-deep);
    font-weight: 700;
}

/* 複選 */
.bsn-ef-tickset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.bsn-ef-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1.5px solid var(--bsn-line);
    border-radius: 100px;
    background: #f6f9f6;
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.bsn-ef-source:has(input:checked) {
    border-color: var(--bsn-key);
    background: var(--bsn-key-soft);
    color: var(--bsn-key-deep);
    font-weight: 700;
}

.bsn-ef-opt input,
.bsn-ef-source input,
.bsn-ef-tick input {
    width: 15px;
    height: 15px;
    accent-color: var(--bsn-key);
}

/* 原本用來畫自訂勾選框，這裡改用原生 accent-color */
.bsn-ef-tick-box {
    display: none;
}

.bsn-ef-source-free {
    flex: 1 0 100%;
    display: none;
    margin-top: 4px;
}

.bsn-ef-source-free.bsn-open {
    display: block;
}

.bsn-ef-warn {
    color: var(--bsn-danger);
    font-size: .8rem;
    font-weight: 500;
}

.bsn-ef-rule {
    height: 1px;
    margin: 22px 0 18px;
    background: var(--bsn-line);
}

.bsn-ef-tick {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: .9rem;
    cursor: pointer;
}

.bsn-ef-send {
    width: 100%;
}

.bsn-ef-send-heart {
    width: 16px;
    margin-left: 8px;
    fill: var(--bsn-heart-deep);
}

.bsn-ef-note {
    margin-top: 14px;
    color: var(--bsn-muted);
    font-size: .82rem;
    line-height: 1.7;
    text-align: center;
}

/* 送出成功訊息（原本寫在 HTML 的 inline style，改由樣式表管理） */
#bsnEnrollDone {
    color: var(--bsn-key-deep);
    font-weight: 700;
}

/* 隱私權條款連結（原本引用主站的 --sky-mid，本頁沒有該變數等於失效） */
#bsnPrivacyLink {
    color: var(--bsn-key-deep);
    text-decoration: underline;
}

/* 驗證失敗 */
.bsn-invalid input,
.bsn-invalid select,
.bsn-invalid .bsn-ef-opt,
.bsn-invalid .bsn-ef-source {
    border-color: var(--bsn-danger);
    background: #fff5f4;
}

/* ===== 環境介紹跑馬燈 ===== */

.bsn-gallery {
    position: relative;
    padding: 64px 0 30px;
    background: var(--bsn-key-soft);
    overflow: hidden;
}

.bsn-gallery-hearts {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 6px 0;
}

.bsn-gallery-heart {
    width: 18px;
    /* 底色是淺綠 --bsn-key-soft，要用加深版才看得出來 */
    fill: var(--bsn-heart-deep);
    opacity: .5;
    animation: bsnGlimmer 3s ease-in-out infinite;
}

.bsn-hsz-l {
    width: 26px;
    animation-delay: .2s;
}

.bsn-hsz-m {
    width: 20px;
    animation-delay: .6s;
}

.bsn-hsz-s {
    width: 14px;
    animation-delay: 1s;
}

.bsn-gallery-caption {
    margin-bottom: 26px;
    color: var(--bsn-key-deep);
    font-size: clamp(1rem, min(2vw, 24px), 1.3rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
}

/* splide 跑馬燈：滑過暫停、拖曳由 JS 設定，這裡只處理外觀 */
.bsn-gallery-rail .splide__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* track 預設 overflow:hidden 會切掉泡泡與陰影，改成 visible */
.bsn-gallery-rail .splide__track {
    overflow: visible;
}

/* 拖曳游標提示 */
.bsn-gallery-rail .splide__track--draggable {
    cursor: grab;
}

.bsn-gallery-rail .splide__track--draggable:active {
    cursor: grabbing;
}

/* 尺寸比照首頁 slider：固定高、autoWidth，間隔交給 splide gap */
.bsn-gallery-cell {
    position: relative;
    width: auto;
}

.bsn-gallery-img {
    height: 100%;
    overflow: hidden;
}

.bsn-gallery-img img {
    display: block;
    width: auto;
    height: 366px;
    transition: transform .5s ease;
}

.bsn-gallery-cell:hover .bsn-gallery-img img {
    transform: scale(1.06);
}

/* 有 data-bubble 才顯示，避免冒出空泡泡 */
.bsn-gallery-cell[data-bubble]::after {
    content: attr(data-bubble);
    position: absolute;
    top: -14px;
    left: 50%;
    z-index: 5;
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--bsn-white);
    color: var(--bsn-key-deep);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--bsn-shadow);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.bsn-gallery-cell[data-bubble]:hover::after {
    opacity: 1;
    transform: translate(-50%, -4px);
}

/* ===== v2 視覺（粉色×米色日系） ===== */

/* Keifont（Apache-2.0）子集，僅數字與日期符號；授權見 assets/fonts/ */
@font-face {
    font-family: "Keifont";
    src: url("assets/fonts/keifont-date.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+002F, U+003A, U+002D, U+0028-0029,
        U+FF08-FF09, U+5E74, U+6708, U+65E5, U+6642, U+5206, U+301C, U+007E;
}

/* 以下兩支同為設計稿原字型，SIL OFL 1.1，皆已子集化 */

/* 緞帶與手寫字：ほのか新アンティーク丸 */
@font-face {
    font-family: "HonokaAntique";
    /* v2：2026-08 重建，補上舊檔缺的「今」「申」「込」。改檔名參數以避開快取。 */
    src: url("assets/fonts/honoka-ribbon.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 按鈕與導引文字：コーポレート・ロゴ ver3 */
@font-face {
    font-family: "CorporateLogo";
    src: url("assets/fonts/corplogo.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* v2 palette（取自 mock 逐區取色） */
    --o-green: #41956a;
    /* 主色沿用品牌綠（頂帶、故事 chip、花圈字） */
    /* mock.pdf 的奶油底 rgb(243,244,237)，帶一點灰綠 */
    --o-cream: #f3f4ed;
    --o-cream2: #f6f1e4;
    --o-pink: #f5a9b4;
    --o-pink-soft: #fad4d9;
    --o-pink-deep: #ee8b99;
    --o-coral: #e4574b;
    --o-red: #e96a4c;
    --o-yellow: #f6ce5b;
    --o-hl: #fbf2c3;
    --o-ink: #4a443c;
    --o-brown: #6b5b4e;
    --o-tan: #a08f68;
    --o-brick: #c1543f;
    --o-orange: #f08160;

    /* 丸ゴシック優先；日文假名/漢字走 Zen Maru，繁中缺字退回系統圓潤字型 */
    --o-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft JhengHei", "微軟正黑體", sans-serif;
}

body.opa-v2 {
    font-family: var(--o-font);
    color: var(--o-ink);
    background: #fff;
    font-weight: 500;
}

body.opa-v2 button,
body.opa-v2 input,
body.opa-v2 select,
body.opa-v2 textarea {
    font-family: var(--o-font);
}

/* ===== 頂部粉帶 ===== */

.opa-topbar {
    padding: clamp(9px, min(1.4vw, 16.8px), 20px) 16px;
    background: #f4afad;
    color: #fff;
    font-size: clamp(14px, min(2.35vw, 28.2px), 32px);
    font-weight: 900;
    letter-spacing: .03em;
    text-align: center;
}

/* ===== HERO ===== */

/* 整頁鎖成設計稿畫布寬 1200px 並置中；兩側底色取自原稿邊緣 #F4F5EF */
/* 多數區塊同一個奶油底，直接讓 html 鋪色，兩側自然滿版 */
html {
    background: var(--o-cream);
}

body.opa-v2 {
    max-width: 1200px;
    margin-inline: auto;
    /* clamp 裡的 N vw 一律寫成 min(N vw, N*12 px)，尺寸才以 1200 畫布計算 */
}

.opa-hero {
    position: relative;
    background: linear-gradient(180deg, #fffefd 0%, #fdf9f6 52%, var(--o-cream) 100%);
    overflow: hidden;
}

/* 寶寶照滿版靠右；左緣與下緣各一道 mask 漸層取交集做羽化 */
.opa-hero-baby {
    position: absolute;
    top: 0;
    /* 照片滿版、中心右移，徽章才會壓在白背景上；≥1280 凍結 */
    left: 50%;
    transform: translateX(calc(-50% + min(min(7.4vw, 88.8px), 94px)));
    z-index: 0;
    width: min(min(117vw, 1404px), 1497px);
    height: 100%;
    object-fit: cover;
    object-position: 50% 17%;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .4) 13%, #000 36%),
        linear-gradient(180deg, #000 60%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .4) 13%, #000 36%),
        linear-gradient(180deg, #000 60%, transparent 97%);
    mask-composite: intersect;
}

/* 超寬螢幕：照片右緣離開視窗邊、懸在畫面中間，補一道右緣羽化收掉硬切邊 */
@media (min-width: 1521px) {
    .opa-hero-baby {
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .4) 13%, #000 36%, #000 90%, transparent 100%),
            linear-gradient(180deg, #000 60%, transparent 97%);
        mask-image:
            linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .4) 13%, #000 36%, #000 90%, transparent 100%),
            linear-gradient(180deg, #000 60%, transparent 97%);
    }
}

.opa-hero-in {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin-inline: auto;
    padding: clamp(18px, min(2.6vw, 31.2px), 40px) 24px clamp(36px, min(5vw, 60px), 76px);
    min-height: clamp(540px, min(60vw, 720px), 900px);
}

.opa-hero-logo {
    position: relative;
    z-index: 3;
    width: min(340px, 30%);
}

.opa-hero-logo img {
    display: block;
    width: 100%;
}

/* logo 的 SVG 素材本身已含這行英文，這裡只留給輔助技術讀，畫面上不重複顯示 */
.opa-hero-logo-sub {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin-top: 4px;
    color: var(--o-green);
    font-size: clamp(8px, min(.95vw, 11.4px), 13px);
    font-weight: 700;
    letter-spacing: .12em;
}

/* 右側兩顆黃色圓徽 */
.opa-hero-badges {
    position: absolute;
    top: clamp(74px, min(11.6vw, 139.2px), 149px);
    right: clamp(6px, min(2.2vw, 26.4px), 28px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, min(1.7vw, 20.4px), 22px);
}

.opa-hero-badges span {
    display: grid;
    place-content: center;
    width: clamp(58px, min(10.3vw, 123.6px), 132px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--o-yellow);
    color: #4a4038;
    font-size: clamp(13px, min(1.85vw, 22.2px), 28px);
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

/* 日期：粉色愛心色塊 + 白填灰描邊的日期字 */
.opa-hero-date {
    position: absolute;
    top: clamp(140px, min(18.9vw, 226.8px), 242px);
    left: clamp(2px, min(3.6vw, 43.2px), 46px);
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    width: clamp(230px, min(32.6vw, 391.2px), 417px);
    aspect-ratio: 320 / 270;
    text-align: center;
}

.opa-hero-heart {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* 螢光筆白帶只蓋住文字下半段；數值照原稿「白帶相對墨跡」的比例換算，不是直接搬 em。
   isolation 不能拿掉，否則 ::before 的 z-index:-1 會穿到背景 SVG 後面 */
.opa-hero-date-y {
    position: relative;
    isolation: isolate;
    line-height: 1;
    color: #2f7d52;
    /* 原稿是商業字型，改用 Zen Maru Gothic 500 貼近纖細感 */
    font-size: clamp(16px, min(2.9vw, 34.8px), 42px);
    font-weight: 500;
    letter-spacing: .04em;
    text-align: center;
}

.opa-hero-date-y::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: .419em;
    right: -.162em;
    left: -.518em;
    height: .666em;
    background: #fff;
}

/* paint-order 讓描邊先畫，才不會從內側啃掉筆畫 */
/* 日期用設計稿的 Keifont，備援走頁面主字型 */
.opa-hero-date-d,
.opa-hero-date-t {
    font-family: "Keifont", var(--o-font);
}

.opa-hero-date-d {
    margin-top: .04em;
    color: #fff;
    font-size: clamp(46px, min(7.4vw, 88.8px), 112px);
    font-weight: 900;
    line-height: 1.04;
    -webkit-text-stroke: .1em #5c5350;
    paint-order: stroke fill;
}

.opa-hero-date-d small {
    font-size: .42em;
    font-weight: 900;
}

.opa-hero-date-t {
    color: #fff;
    font-size: clamp(20px, min(3.3vw, 39.6px), 50px);
    font-weight: 900;
    letter-spacing: .01em;
    -webkit-text-stroke: .105em #5c5350;
    paint-order: stroke fill;
}

/* 個別相談：白底深框對話泡泡，尾巴往左下指，壓在寶寶照上 */
/* 泡泡改用 mock 的向量原稿，寬度取自原稿比例 307px；窄版另有覆寫 */
/* 泡泡與寶寶照用同一組算式，中心鎖在照片寬的 60.7% */
.opa-consult-pill {
    position: absolute;
    top: min(min(40.6vw, 487.2px), 520px);
    left: calc(50% + min(min(7.4vw, 88.8px), 94px) + min(min(12.52vw, 150.24px), 160px) - min(min(12vw, 144px), 153.5px));
    z-index: 4;
    width: min(min(24vw, 288px), 307px);
    /* 原稿整顆泡泡順時針 6.23 度 */
    rotate: 6.23deg;
}

.opa-consult-bubble {
    display: block;
    width: 100%;
}

/* 文字位置與字級取自原稿比例，與 width 同基準才會等比縮放 */
.opa-consult-pill em {
    position: absolute;
    top: 39.7%;
    left: 49%;
    translate: -50% -50%;
    color: #371E1E;
    font-size: min(min(2.61vw, 31.32px), 33px);
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
    white-space: nowrap;
}

.opa-hero-copy {
    position: relative;
    z-index: 3;
    margin-top: clamp(220px, min(36vw, 432px), 470px);
    text-align: center;
}

/* 珊瑚色純文字＋白描邊；新版移到左上（logo 下方、愛心上方） */
.opa-hero-tag {
    position: absolute;
    /* 兩行排：top、font-size 上限、line-height 三個值是綁在一起的，改一個就會咬到下面的愛心色塊 */
    top: clamp(64px, min(9.6vw, 115.2px), 123px);
    left: clamp(10px, min(4vw, 48px), 60px);
    z-index: 3;
    color: #f4907a;
    font-size: clamp(20px, min(3.7vw, 44.4px), 48px);
    font-weight: 900;
    line-height: 1.18;
    /* 盒寬是 shrink-to-fit，這行讓「卵子提供」置中在下一行上方 */
    text-align: center;
    letter-spacing: .07em;
    -webkit-text-stroke: .055em #fff;
    paint-order: stroke fill;
}

.opa-hero-title {
    margin-top: 0;
    color: #fff;
    font-size: clamp(28px, min(8.6vw, 103.2px), 118px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: .01em;
    -webkit-text-stroke: .052em #9d9490;
    paint-order: stroke fill;
}

/* hero 底部交界曲線，preserveAspectRatio: none 滿版拉伸 */
.opa-hero-sweep {
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    width: 100%;
    height: clamp(90px, min(25.8vw, 309.6px), 330px);
}

/* ===== 裝飾性微動畫（只動 transform/opacity，幅度刻意壓小） ===== */

/* 黃色圓徽：緩慢上下浮動，兩顆錯開相位 */
.opa-hero-badges span {
    animation: opaFloat 3.4s ease-in-out infinite;
}

.opa-hero-badges span:nth-child(2) {
    animation-delay: -1.7s;
}

@keyframes opaFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* 粉色色塊：極慢的縮放＋微幅旋轉，像輕輕搏動 */
.opa-hero-heart {
    transform-origin: 52% 55%;
    animation: opaHeartBeat 7s ease-in-out infinite;
}

@keyframes opaHeartBeat {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    35% {
        transform: scale(1.035) rotate(-1.1deg);
    }

    70% {
        transform: scale(.985) rotate(.8deg);
    }
}

/* 個別相談泡泡：極輕微的呼吸感，提示它是重點資訊 */
.opa-consult-pill {
    animation: opaBubble 4s ease-in-out infinite;
}

@keyframes opaBubble {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(-1.2deg);
    }
}

/* ポイント 卡片上的鬱金香與 ステップ 標題的小花：左右輕擺 */
.opa-tulip,
.opa-daisy {
    transform-origin: 50% 90%;
    animation: opaSway 4.6s ease-in-out infinite;
}

.opa-daisy:last-of-type {
    animation-delay: -2.3s;
}

@keyframes opaSway {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

/* ４つのポイント 標題兩側的星芒：閃爍 */
.opa-spark {
    animation: opaTwinkle 2.8s ease-in-out infinite;
}

.opa-spark:last-of-type {
    animation-delay: -1.4s;
}

@keyframes opaTwinkle {

    0%,
    100% {
        opacity: .55;
        transform: scale(.88) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.1) rotate(18deg);
    }
}

/* 三張人物插圖的待機微動作：週期與相位各異，幅度壓在數 px 內 */

/* 孕婦：安靜的上下呼吸，搭配極輕的側傾 */
.opa-illo--pregnant {
    transform-origin: 50% 100%;
    animation: opaIlloBreathe 5.2s ease-in-out infinite;
}

@keyframes opaIlloBreathe {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(-.8deg);
    }
}

/* 抱嬰：左右輕搖，支點放在下緣＝哄睡的擺動感；週期最短，最有存在感 */
.opa-illo--mother {
    transform-origin: 50% 100%;
    animation: opaIlloRock 4.4s ease-in-out infinite;
    animation-delay: -1.6s;
}

@keyframes opaIlloRock {

    0%,
    100% {
        transform: rotate(-1.4deg) translateY(0);
    }

    50% {
        transform: rotate(1.4deg) translateY(-3px);
    }
}

/* 最大一張，動得最慢最淡，放大幅度小於 1% */
.opa-illo--family {
    transform-origin: 50% 100%;
    animation: opaIlloSettle 6.8s ease-in-out infinite;
    animation-delay: -3.1s;
}

@keyframes opaIlloSettle {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.008);
    }
}

/* 四個 icon 共用同一支動畫，用負延遲錯開四分之一週期，像流程往右推進 */
.opa-step-arrow svg {
    animation: opaStepFloat 2.8s ease-in-out infinite;
}

.opa-step:nth-child(1) .opa-step-arrow svg {
    animation-delay: 0s;
}

.opa-step:nth-child(2) .opa-step-arrow svg {
    animation-delay: -.7s;
}

.opa-step:nth-child(3) .opa-step-arrow svg {
    animation-delay: -1.4s;
}

.opa-step:nth-child(4) .opa-step-arrow svg {
    animation-delay: -2.1s;
}

/* 擺盪要繞著靜止位置對稱，不能 0→-5px→0（那樣平均會高出 2.5px） */
@keyframes opaStepFloat {

    0%,
    100% {
        translate: 0 2.5px;
    }

    50% {
        translate: 0 -2.5px;
    }
}

/* 掃光壓在 z-index 0、內容抬到 1，白光才不會蓋過白字降低對比 */
.opa-step-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 65%);
    opacity: 0;
    animation: opaStepSheen 2.8s ease-in-out infinite;
}

.opa-step-arrow>span,
.opa-step-arrow>svg {
    position: relative;
    z-index: 1;
}

.opa-step:nth-child(2) .opa-step-arrow::after {
    animation-delay: -.7s;
}

.opa-step:nth-child(3) .opa-step-arrow::after {
    animation-delay: -1.4s;
}

.opa-step:nth-child(4) .opa-step-arrow::after {
    animation-delay: -2.1s;
}

@keyframes opaStepSheen {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: .16;
    }
}

/* 用獨立的 rotate / translate 而非 transform：transform 已被底色斜角與 hover 佔用，會互相覆蓋 */
.opa-plan-tag {
    transform-origin: 14% 60%;
    animation: opaTagSwing 3.8s ease-in-out infinite;
}

@keyframes opaTagSwing {

    0%,
    100% {
        rotate: -1.8deg;
        translate: 0 0;
    }

    50% {
        rotate: 1.8deg;
        translate: 0 -2px;
    }
}

/* 日本人専属スタッフ：週期與相位都跟標籤錯開，兩顆才不會同步 */
.opa-plan-fab {
    transform-origin: 50% 90%;
    animation: opaFabBob 4.6s ease-in-out infinite;
    animation-delay: -2.2s;
}

@keyframes opaFabBob {

    0%,
    100% {
        rotate: -1.2deg;
        translate: 0 0;
    }

    50% {
        rotate: 1.2deg;
        translate: 0 -4px;
    }
}

.opa-plan:hover .opa-plan-tag,
.opa-plan:hover .opa-plan-fab {
    animation-play-state: paused;
}

/* 只做很淡的浮沉；白底圓的圓心在 51.1%，旋轉壓在 .6 度內才看不出偏移 */
.opa-wreath {
    animation: opaWreathDrift 7.5s ease-in-out infinite;
    animation-delay: -2.4s;
}

@keyframes opaWreathDrift {

    0%,
    100% {
        transform: translateY(0) rotate(-.6deg);
    }

    50% {
        transform: translateY(-7px) rotate(.6deg);
    }
}

/* 插圖旁的愛心用 absolute＋頁面座標，會跟著捲動（與視窗愛心的 fixed 相反） */
.opa-illo-heart {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    animation: opaIlloHeartFloat 3.4s ease-in-out forwards;
}

@keyframes opaIlloHeartFloat {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.45) rotate(-10deg);
    }

    30% {
        opacity: var(--opa-ih-peak, .5);
    }

    70% {
        opacity: var(--opa-ih-peak, .5);
    }

    100% {
        opacity: 0;
        transform: translateY(-38px) scale(.9) rotate(10deg);
    }
}

/* 緞帶：進場後極慢的左右搖擺，像掛著的布條 */
.opa-ribbon {
    transform-origin: 50% 0;
    animation: opaRibbonSway 6s ease-in-out infinite;
}

@keyframes opaRibbonSway {

    0%,
    100% {
        transform: rotate(-.7deg);
    }

    50% {
        transform: rotate(.7deg);
    }
}

/* ===== こんな人におすすめ ===== */

.opa-reco {
    padding: clamp(30px, min(4vw, 48px), 54px) 24px 0;
    background: var(--o-cream);
    text-align: center;
}

.opa-reco-lead {
    margin-bottom: clamp(16px, min(2.2vw, 26.4px), 30px);
    font-size: clamp(15px, min(1.9vw, 22.8px), 24px);
    font-weight: 900;
    letter-spacing: .04em;
}

/* 設計稿原字型：コーポレート・ロゴ ver3 */
.opa-reco-pill {
    font-family: "CorporateLogo", var(--o-font);
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, min(1.6vw, 19.2px), 24px);
    padding: clamp(8px, min(1.1vw, 13.2px), 16px) clamp(26px, min(3vw, 36px), 46px);
    border-radius: 100px;
    background: #fbdcd2;
    /* 原稿字身高 33px（900 座標的 25 單位 × 4/3），對應 font-size 約 35px */
    font-size: clamp(18px, min(2.92vw, 35px), 35px);
    font-weight: 900;
}

/* 箭號是白圓徽裡的雙人字，用 padding 撐出圓徽留白 */
.opa-chev {
    box-sizing: border-box;
    flex: none;
    width: clamp(24px, min(2.9vw, 34.8px), 42px);
    height: clamp(24px, min(2.9vw, 34.8px), 42px);
    padding: clamp(6px, min(.75vw, 9px), 11px);
    border-radius: 50%;
    background: #fff;
    color: var(--o-pink-deep);
}

.opa-reco-txt {
    max-width: 860px;
    margin: clamp(18px, min(2.4vw, 28.8px), 30px) auto 0;
    font-size: clamp(15px, min(1.7vw, 20.4px), 19px);
    /* 500 是 Zen Maru Gothic 這頁載到的最細字重（700 之前還被瀏覽器加粗成偽粗體） */
    font-weight: 500;
    line-height: 2;
}

/* ===== 方案二選一 ===== */

/* 用 padding-inline 而非 max-width，底色才會滿版不露接縫 */
.opa-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, min(4.92vw, 59px), 59px);
    padding: clamp(34px, min(4.5vw, 54px), 60px) max(24px, calc((100% - 963px) / 2)) 0;
    background: var(--o-cream);
}

/* .opa-plans 夾在兩段米色區之間，自己也要鋪滿底色避免露白 */
.opa-plans::before,
.opa-plans::after {
    content: none;
}

.opa-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 34px 18px 24px;
    border: 2px solid #57514b;
    border-radius: 10px;
    background: #fff;
    color: var(--o-ink);
    text-align: center;
    transition: translate .28s cubic-bezier(.34, 1.3, .64, 1), scale .28s cubic-bezier(.34, 1.3, .64, 1),
        box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

/* 用同權重但更後面的選擇器接手，否則 hover 過場會被 .bsn-appear 那條蓋掉 */
.bsn-scripted .opa-plan {
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1),
        translate .28s cubic-bezier(.34, 1.3, .64, 1), scale .28s cubic-bezier(.34, 1.3, .64, 1),
        box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

/* hover 位移用獨立的 translate / scale，transform 留給淡入動畫 */
.opa-plan:hover {
    translate: 0 -6px;
    scale: 1.025;
    border-color: var(--o-pink-deep);
    background: #fffaf9;
    box-shadow: 0 16px 34px rgba(238, 139, 153, .28);
}

.opa-plan .opa-plan-tag,
.opa-plan .opa-plan-fab {
    transition: transform .28s cubic-bezier(.34, 1.3, .64, 1), box-shadow .28s ease;
}

.opa-plan:hover .opa-plan-tag {
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 0 4px 10px rgba(120, 100, 80, .2);
}

.opa-plan:hover .opa-plan-fab {
    transform: rotate(4deg) scale(1.08);
    box-shadow: 0 4px 10px rgba(120, 100, 80, .2);
}

.opa-plan .opa-plan-big {
    transition: color .28s ease, border-color .28s ease;
}

.opa-plan:hover .opa-plan-big {
    color: var(--o-pink-deep);
    border-bottom-color: var(--o-pink-deep);
}

@media (prefers-reduced-motion: reduce) {

    .opa-plan:hover {
        translate: none;
        scale: none;
    }

    .opa-plan:hover .opa-plan-tag,
    .opa-plan:hover .opa-plan-fab {
        transform: none;
    }
}

.opa-plan-tag {
    position: absolute;
    top: -15px;
    left: 22px;
    padding: 3px 16px;
    border: 2px solid #57514b;
    background: var(--o-yellow);
    font-size: 14px;
    font-weight: 900;
    transform: rotate(-2deg);
}

/* 新版：黃色圓角標籤（原為紅色圓徽） */
.opa-plan-fab {
    position: absolute;
    top: -30px;
    right: -14px;
    padding: .45em .9em;
    border-radius: 12px;
    background: var(--o-yellow);
    color: #4a4038;
    font-size: clamp(11px, min(1.3vw, 15.6px), 15px);
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

.opa-plan-small {
    font-size: clamp(13px, min(1.5vw, 18px), 16px);
    font-weight: 700;
}

.opa-plan-big {
    align-self: center;
    font-size: clamp(20px, min(2.5vw, 30px), 30px);
    font-weight: 900;
    letter-spacing: .04em;
    border-bottom: 3px dotted #c9beb2;
    padding-bottom: .18em;
}

/* ===== ４つのポイント ===== */

/* 奶油底掛在 .opa-mid 上，右側淡黃色塊橫跨兩區，溢出用 overflow-x: clip 裁掉 */
.opa-mid {
    position: relative;
    background: var(--o-cream);
    overflow-x: clip;
}

/* viewBox 已擴到 2260，元素寬須是畫布的 1.766 倍，弧線才會停在 62% */
.opa-mid-blob {
    position: absolute;
    top: min(min(13vw, 156px), 166px);
    left: calc(50% - min(min(50vw, 600px), 640px));
    z-index: 0;
    width: min(min(176.6vw, 2119.2px), 2260px);
    pointer-events: none;
}

.opa-points {
    position: relative;
    z-index: 1;
    padding: clamp(48px, min(6vw, 72px), 84px) 24px 0;
}

.opa-points-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35em;
    color: var(--o-pink-deep);
    font-size: clamp(22px, min(3vw, 36px), 38px);
    font-weight: 900;
    text-align: center;
}

.opa-spark {
    width: .85em;
    color: var(--o-coral);
}

/* 「４つのポイント」下半壓黃色螢光筆 */
.opa-points-head-b {
    font-style: normal;
    background: linear-gradient(transparent 58%, var(--o-hl) 58%);
}

.opa-points-sub {
    margin-top: 12px;
    font-size: clamp(13px, min(1.5vw, 18px), 16px);
    font-weight: 700;
    text-align: center;
}

.opa-points-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, min(1.8vw, 21.6px), 22px);
    max-width: 1160px;
    margin: clamp(28px, min(3.5vw, 42px), 44px) auto 0;
}

.opa-point {
    position: relative;
    padding: 24px 14px 18px;
    border-radius: 8px;
    background: #fff;
    /* mock 的卡片影是實色粉、右下偏移，不是模糊柔影 */
    box-shadow: 7px 8px 0 #fcebf0;
    /* 基礎值：.bsn-scripted 不存在時（all.js 載入失敗）仍要有 hover 過場 */
    transition: translate .28s ease, scale .28s ease, box-shadow .28s ease;
}

/* 同權重更後面的選擇器接手，保留淡入再補 hover 過場 */
.bsn-scripted .opa-point {
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1),
        translate .28s ease, scale .28s ease, box-shadow .28s ease;
}

/* 位移用獨立的 translate / scale：transform 被淡入佔用，且兩者時長不同 */
.opa-point:hover {
    translate: 0 -6px;
    scale: 1.02;
    box-shadow: 11px 13px 0 #fbdfe8;
}

.opa-point-tag,
.opa-tulip {
    transition: transform .28s ease, box-shadow .28s ease;
}

.opa-point:hover .opa-point-tag {
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 0 4px 10px rgba(120, 100, 80, .2);
}

/* 鬱金香只出現在第 1、4 張，hover 時輕輕擺一下 */
.opa-point:hover .opa-tulip {
    transform: rotate(9deg) translateY(-2px);
}

/* 照片放大要有東西框住，否則會溢出圓角 */
.opa-point-photo {
    overflow: hidden;
    border-radius: 10px;
}

.opa-point:hover .opa-point-photo img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {

    .opa-point:hover {
        translate: none;
        scale: none;
    }

    .opa-point:hover .opa-point-tag,
    .opa-point:hover .opa-tulip,
    .opa-point:hover .opa-point-photo img {
        transform: none;
    }
}

.opa-point-tag {
    position: absolute;
    top: -12px;
    left: 12px;
    z-index: 1;
    padding: 4px 14px;
    border-radius: 100px;
    background: var(--o-pink-deep);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.opa-tulip {
    position: absolute;
    top: -22px;
    right: 10px;
    width: 26px;
}

.opa-point-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .45s ease;
}

.opa-point-title {
    text-align: center;

    margin: 12px 0 8px;
    font-size: clamp(15px, min(1.5vw, 18px), 19px);
    /* 依指示取消粗體（原稿此處其實是 TsunagiGothic-Black） */
    font-weight: 400;
    text-align: center;
    /* 交給瀏覽器平衡行長，避免末行掉單字 */
    text-wrap: balance;
}

.opa-point-list li {
    position: relative;
    padding-left: 1.1em;
    color: #6a6258;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.75;
}

.opa-point-list li+li {
    margin-top: 4px;
}

.opa-point-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--o-pink-deep);
    font-weight: 900;
}

/* ===== ４ステップ ===== */

.opa-steps {
    position: relative;
    z-index: 1;
    padding: clamp(52px, min(6.5vw, 78px), 92px) 24px clamp(60px, min(7vw, 84px), 100px);
    text-align: center;
}

.opa-steps-banner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: .45em 1.3em;
    border-radius: 100px;
    background: var(--o-coral);
    color: #fff;
    font-size: clamp(21px, min(2.8vw, 33.6px), 34px);
    font-weight: 900;
    letter-spacing: .04em;
}

.opa-daisy {
    width: 1em;
}

.opa-steps-row {
    display: flex;
    gap: 6px;
    max-width: 1080px;
    margin: clamp(30px, min(4vw, 48px), 48px) auto 0;
    padding: 0;
    list-style: none;
}

.opa-step {
    flex: 1;
    min-width: 0;
}

.opa-step-no {
    display: block;
    margin-bottom: 10px;
    font-size: clamp(13px, min(1.6vw, 19.2px), 20px);
    font-weight: 900;
    letter-spacing: .05em;
    transition: color .25s ease;
}

/* 箭頭形：右端尖角、左端內凹缺口（第一支左端平） */
.opa-step-arrow {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: clamp(104px, min(13vw, 156px), 168px);
    background: var(--o-pink);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%);
    transition: background-color .25s ease, translate .25s ease;
}

/* 父層有 clip-path，陰影會被裁掉，「浮起」改用底色加深表達 */
.opa-step:hover .opa-step-arrow {
    background: var(--o-pink-deep);
    translate: 0 -5px;
}

.opa-step:hover .opa-step-arrow svg {
    scale: 1.1;
}

.opa-step:hover .opa-step-no {
    color: var(--o-pink-deep);
}

/* hover 時停掉待機的波與掃光，讓 hover 是明確的回饋而不是還在飄 */
.opa-step:hover .opa-step-arrow svg,
.opa-step:hover .opa-step-arrow::after {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

    .opa-step:hover .opa-step-arrow,
    .opa-step:hover .opa-step-arrow svg {
        translate: none;
        scale: none;
    }
}

.opa-step:first-child .opa-step-arrow {
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}

/* 用 height 定尺寸：四個 icon 共用 viewBox，設寬度會讓最高的那個過大 */
.opa-step-arrow svg {
    height: clamp(60px, min(7.53vw, 90.36px), 97px);
}

.opa-step-arrow span {
    max-width: 92%;
    font-size: clamp(11px, min(1.4vw, 16.8px), 17px);
    font-weight: 900;
    letter-spacing: .03em;
}

/* ===== 報名表單（欄位樣式沿用 v1 的 .bsn-ef-*） ===== */

/* 幾乎整塊是白面板，米色只留在緞帶周圍與花圈凹口 */
.opa-enroll {
    position: relative;
    padding: clamp(60px, min(7.9vw, 94.8px), 101px) 24px clamp(70px, min(9vw, 108px), 130px);
    background: var(--o-cream);
    overflow: hidden;
}

/* 白色有機面板：照 mock 描的大圓拱，preserveAspectRatio: none */
/* <1280 隨視窗等比縮，≥1280 凍結在 1280 畫布；下緣以下由 ::before 補滿 */
.opa-enroll-sheet {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.opa-enroll-sheet::before {
    content: '';
    position: absolute;
    inset: min(min(60vw, 720px), 768px) 0 0;
    background: #fff;
}

/* 高度鎖在 1280 尺度：>1280 只橫向拉寬，兩側才不露水平切邊 */
.opa-sheet-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: min(min(84.4vw, 1012.8px), 1080px);
}

.opa-enroll-head {
    position: relative;
    z-index: 2;
    max-width: min(min(44.2vw, 530.4px), 566px);
    /* 位置與尺寸照 mock：緞帶約佔版面 46.5% 寬、靠左；超寬時跟著置中畫布走 */
    margin-left: max(clamp(16px, min(4.5vw, 54px), 58px), calc((100% - 1280px) / 2 + 58px));
    text-align: center;
}

/* ＼…／ 手寫標題：兩側斜槓靠 transform 撐出 mock 的外八角度 */
/* 沿弧排列的 SVG 文字，字級用 viewBox 單位隨區塊縮放 */
.opa-enroll-hand {
    display: block;
    width: 100%;
    max-width: min(min(52vw, 624px), 666px);
    margin-inline: auto;
    overflow: visible;
}

.opa-enroll-hand-txt {
    fill: var(--o-ink);
    /* 設計稿原字型：ほのか新アンティーク丸 */
    font-family: "HonokaAntique", var(--o-font);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .6px;
}

.opa-hand-slash {
    stroke: var(--o-ink);
    stroke-width: 2.6;
    stroke-linecap: round;
    fill: none;
}

.opa-enroll-hand i:first-child {
    transform: rotate(-8deg);
}

.opa-enroll-hand i:last-child {
    transform: rotate(8deg);
}

/* 間距要用「正中央」比（手寫字最低點在兩端、緞帶最高點在中央），原稿為緞帶寬的 4.15% */
.opa-ribbon {
    position: relative;
    width: 100%;
    margin: max(calc(-1 * min(0.82vw, 9.84px)), -10.5px) auto 0;
}

.opa-ribbon svg {
    display: block;
    width: 100%;
}

/* 字級用 viewBox 單位，會跟著緞帶等比縮放，不需要 clamp */
.opa-ribbon-txt {
    fill: #402B25;
    /* 設計稿原字型：ほのか新アンティーク丸 */
    font-family: "HonokaAntique", var(--o-font);
    /* Honoka 只有單一字重，900 會合成粗體過粗，改 400＋寬字距 */
    font-size: 33px;
    font-weight: 400;
    letter-spacing: 6px;
}

.opa-enroll-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: min(min(49.9vw, 598.8px), 638px) minmax(0, 1fr);
    gap: 0;
    max-width: 1180px;
    /* 緞帶是 SVG，高度隨寬度縮放，間距也用 vw 才同步 */
    margin: clamp(24px, min(5.6vw, 67.2px), 72px) auto 0;
}

.opa-enroll-formcol {
    /* 設計稿表單欄寬 411px；左側留白讓它對齊緞帶下方 */
    max-width: min(min(45.9vw, 550.8px), 587px);
    margin-left: min(min(4vw, 48px), 51px);
}

/* ===== 報名欄上方的說明／注意事項 ===== */
.opa-enroll-notice {
    margin-bottom: clamp(16px, min(1.8vw, 21.6px), 24px);
    padding: clamp(16px, min(2.2vw, 26.4px), 24px) clamp(16px, min(2.4vw, 28.8px), 26px);
    border: 1px solid #e7e2d4;
    border-radius: 14px;
    background: #fff;
    font-size: clamp(13px, min(1.05vw, 12.6px), 15px);
    line-height: 1.85;
}

.opa-note-block + .opa-note-block {
    margin-top: clamp(14px, min(1.6vw, 19.2px), 20px);
    padding-top: clamp(14px, min(1.6vw, 19.2px), 20px);
    border-top: 1px dashed #e7e2d4;
}

/* 原稿的「■」在日文小字級下過重，改用粉色小方塊維持同樣的層級感 */
.opa-note-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: clamp(14px, min(1.15vw, 13.8px), 16px);
    font-weight: 700;
    color: var(--o-brown);
}

.opa-note-h::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--o-pink);
}

/* 沿用 hero 的 Keifont；子集只有 U+301C「〜」，改字要一起改 */
.opa-note-date {
    margin: 0;
    font-family: "Keifont", var(--o-font);
    font-size: clamp(19px, min(1.9vw, 22.8px), 25px);
    line-height: 1.4;
    color: var(--o-pink-deep);
}

/* 兩片各自不折，折行只會發生在日期與時刻之間 */
.opa-note-date > span {
    white-space: nowrap;
}

.opa-note-sub {
    margin: 2px 0 0;
    font-size: .86em;
    color: var(--o-tan);
}

/* 時刻自成一欄並用等寬數字，9:50 / 10:00 / 11:00 的位數才會垂直對齊 */
.opa-note-times {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px clamp(10px, min(1.1vw, 13.2px), 14px);
    margin: 0;
}

.opa-note-times dt {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--o-brown);
}

.opa-note-times dd {
    margin: 0;
}

/* 截止日的標籤是文字不是時刻，靠左讀起來才順（時刻靠右是為了對齊位數） */
.opa-note-times--wide dt {
    text-align: left;
}

.opa-note-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.opa-note-list li {
    position: relative;
    padding-left: 1.15em;
}

.opa-note-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--o-pink);
}

@media (max-width: 767px) {
    .opa-note-times {
        gap: 2px 8px;
    }
}

/* 插圖維持流式堆疊，寬度與左右錯位取自設計稿換算成欄寬百分比 */
.opa-enroll-illos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: min(min(23.1vw, 277.2px), 296px);
}

.opa-enroll-illos .opa-illo {
    height: auto;
}

/* 用修飾 class 而不是 :nth-of-type——花圈同樣是 <img>，位置選擇器會被它推移 */

/* 孕婦：設計稿寬 186px、距欄左 16.3% */
.opa-illo--pregnant {
    width: min(min(14.5vw, 174px), 186px);
    margin-left: 11.8%;
}

/* 抱嬰：靠右，並與孕婦重疊 59px（mock 如此） */
.opa-illo--mother {
    width: min(min(12.7vw, 152.4px), 162px);
    margin-top: max(calc(-1 * min(4.6vw, 55.2px)), -59px);
    margin-left: 62%;
}

/* 全家：最大一張，回到偏左 */
.opa-illo--family {
    width: min(min(32.9vw, 394.8px), 421px);
    margin-top: min(min(2.7vw, 32.4px), 34px);
    margin-left: 15.9%;
}

/* 絕對定位，基準是 .opa-enroll-grid，用欄寬百分比自動等比 */
.opa-wreath {
    position: absolute;
    top: max(calc(-1 * min(3.8vw, 45.6px)), -49px);
    left: 64.73%;
    width: 32.84%;
    height: auto;
}

/* <img> 不生成偽元素、border-radius 又會裁圖，白圓改用 radial-gradient 畫；
   半徑 64.3% 是相對「中心到最遠角」，不是邊長 */
.opa-wreath {
    background: radial-gradient(circle at 50% 51.1%, #fff 0 64.3%, rgba(255, 255, 255, 0) 65.3%);
}

/* 回頂按鈕：v1 樣式表裡是品牌綠，v2 統一改主色系粉 */
body.opa-v2 #bsnGoTop {
    background: var(--o-pink);
    box-shadow: 0 6px 18px rgba(238, 139, 153, .4);
}

body.opa-v2 #bsnGoTop:hover {
    background: var(--o-pink-deep);
}

/* ===== Gravity Forms（表單 ID 3）外觀覆寫，只作用在 .opa-enroll 內 ===== */

.opa-enroll .gform_wrapper form {
    margin: 0;
}

/* 不覆寫 grid-template-columns，寫死 1fr 會讓 GF 的左右分欄失效 */
.opa-enroll .gform_wrapper .gform_fields {
    row-gap: clamp(16px, min(2vw, 24px), 24px);
    column-gap: clamp(14px, min(1.8vw, 21.6px), 24px);
}

.opa-enroll .gform_wrapper .gfield_label {
    display: block;
    margin-bottom: 6px;
    color: var(--o-ink);
    font-size: clamp(13px, min(1.5vw, 18px), 16px);
    font-weight: 900;
    letter-spacing: .02em;
}

.opa-enroll .gform_wrapper .gfield_required {
    color: var(--o-coral);
    margin-left: .25em;
}

.opa-enroll .gform_wrapper input[type=text],
.opa-enroll .gform_wrapper input[type=email] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0dcd4;
    border-radius: 10px;
    background: #faf8f5;
    color: var(--o-ink);
    font-family: var(--o-font);
    font-size: clamp(14px, min(1.6vw, 19.2px), 16px);
}

.opa-enroll .gform_wrapper input[type=text]:focus,
.opa-enroll .gform_wrapper input[type=email]:focus {
    border-color: var(--o-pink-deep);
    box-shadow: 0 0 0 3px rgba(238, 139, 153, .25);
    outline: none;
}

.opa-enroll .gform_wrapper input::placeholder {
    color: #b3aca2;
}

/* 單選／同意勾選：粉色系，行距放寬好點選 */
.opa-enroll .gform_wrapper .gfield_radio .gchoice,
.opa-enroll .gform_wrapper .ginput_container_consent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.opa-enroll .gform_wrapper .gfield_radio label,
.opa-enroll .gform_wrapper .ginput_container_consent label {
    font-size: clamp(13px, min(1.5vw, 18px), 16px);
    font-weight: 700;
    cursor: pointer;
}

.opa-enroll .gform_wrapper input[type=radio],
.opa-enroll .gform_wrapper input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--o-pink-deep);
    cursor: pointer;
}

/* 欄位說明文字 */
.opa-enroll .gform_wrapper .gfield_description {
    margin-top: 6px;
    color: #7d756a;
    font-size: clamp(11px, min(1.2vw, 14.4px), 13px);
    line-height: 1.7;
}

.opa-enroll .gform_wrapper .gfield_validation_message,
.opa-enroll .gform_wrapper .validation_message {
    margin-top: 6px;
    color: var(--o-coral);
    font-size: 12px;
    font-weight: 700;
    background: none;
    border: 0;
    padding: 0;
}

/* 送出鈕：沿用 mock 的淡粉膠囊 */
/* 驗證碼在上、按鈕置中在下；排成一列時三者寬度差太多會失衡 */
.opa-enroll .gform_wrapper .gform_footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 明確給寬度：column flex 的寬由最寬子項決定，百分比會被當成 auto */
    width: 100%;
    gap: clamp(14px, min(1.8vw, 21.6px), 22px);
    margin: clamp(20px, min(2.6vw, 31.2px), 32px) 0 0;
    padding: 0;
}

/* GF orbital 用自訂屬性決定外觀，要改變數而不是只加權重 */
.opa-enroll .gform_wrapper input[type=submit].gform_button,
.opa-enroll .gform_wrapper .gform_button {
    --gf-ctrl-btn-bg-color-primary: #fbdcd8;
    --gf-ctrl-btn-bg-color-hover-primary: #f9cfc9;
    --gf-ctrl-btn-color-primary: #4a443c;
    --gf-ctrl-btn-color-hover-primary: #4a443c;
    --gf-ctrl-btn-border-color-primary: transparent;
    --gf-ctrl-btn-border-color-hover-primary: transparent;
    --gf-ctrl-btn-radius: 100px;
    --gf-local-bg-color: #fbdcd8;
    --gf-local-color: #4a443c;
    --gf-local-radius: 100px;
    /* GF 用 inline-size: var(--gf-local-width) 決定寬度，且自己把變數設回 auto */
    flex: 0 0 auto;
    align-self: center;
    inline-size: min(300px, 76%);
    padding: 13px 30px;
    border: 0;
    border-radius: 100px;
    background: #fbdcd8;
    color: var(--o-ink);
    font-family: var(--o-font);
    font-size: clamp(17px, min(1.9vw, 22.8px), 22px);
    font-weight: 900;
    letter-spacing: .1em;
    text-indent: .1em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* GF 那條在層疊中排最後且勝出，這裡限定在 .opa-enroll 內用 !important 收尾 */
.opa-enroll .gform-theme.gform_wrapper input[type=submit].button.gform_button {
    inline-size: min(300px, 76%) !important;
    min-inline-size: 0 !important;
}

.opa-enroll .gform_wrapper input[type=submit].gform_button:hover,
.opa-enroll .gform_wrapper .gform_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(238, 139, 153, .3);
}

/* 驗證碼（佈景以 gform_submit_button 全站掛入）：排成一列並對齊設計稿 */
.opa-enroll .at-captcha-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(16px, min(2vw, 24px), 24px);
}

.opa-enroll .at-captcha-input-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.opa-enroll #at_captcha_input {
    width: 180px;
    padding: 11px 14px;
    border: 1px solid #e0dcd4;
    border-radius: 10px;
    background: #faf8f5;
    font-family: var(--o-font);
    font-size: 15px;
}

.opa-enroll #at_captcha_input:focus {
    border-color: var(--o-pink-deep);
    box-shadow: 0 0 0 3px rgba(238, 139, 153, .25);
    outline: none;
}

.opa-enroll .at-captcha-error {
    margin: 0;
    color: var(--o-coral);
    font-size: 12px;
    font-weight: 700;
}

.opa-enroll .at-captcha-wrapper img,
.opa-enroll .at-captcha-wrapper canvas {
    border: 1px solid #e8e3da;
    border-radius: 8px;
}

/* 送出後的確認訊息 */
.opa-enroll .gform_confirmation_message {
    padding: clamp(20px, min(3vw, 36px), 36px);
    border-radius: 16px;
    background: #fff8f6;
    color: var(--o-ink);
    font-size: clamp(14px, min(1.6vw, 19.2px), 17px);
    font-weight: 700;
    line-height: 1.9;
    text-align: center;
}

/* 表單細節：v1 的綠色系 focus 改成 v2 粉色系 */
.opa-enroll .bsn-ef-field input:focus,
.opa-enroll .bsn-ef-field select:focus,
.opa-enroll .bsn-ef-source-free:focus {
    border-color: var(--o-pink-deep);
    box-shadow: 0 0 0 3px rgba(238, 139, 153, .25);
}

/* 送出鈕：mock 是淡粉膠囊＋右側圓形箭頭，寬度只有表單的一半多 */
.opa-enroll .bsn-pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(300px, 76%);
    margin: 24px auto 0;
    padding: 12px 24px;
    border: 0;
    border-radius: 100px;
    background: #fbdcd8;
    color: var(--o-ink);
    font-size: clamp(17px, min(1.9vw, 22.8px), 22px);
    font-weight: 900;
    letter-spacing: .16em;
    text-indent: .16em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.opa-enroll .bsn-pill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 160, 165, .45);
}

/* 圓形箭頭：mock 的按鈕右側是白圈內含粉色 › */
.opa-btn-arrow {
    display: grid;
    place-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--o-pink-deep);
    font-size: 15px;
    line-height: 1;
}

.opa-cursor-ic {
    width: 22px;
    flex-shrink: 0;
}

/* ===== 成功案例 ===== */

/* 奶油底上一顆 mock 原尺寸的大白圓，與報名區白底跨區相連；全用 vw 才不露接縫 */
.opa-stories {
    position: relative;
    padding: clamp(26px, min(3.5vw, 42px), 48px) 24px clamp(48px, min(6vw, 72px), 80px);
    background: var(--o-cream);
    overflow: hidden;
}

.opa-stories::before {
    content: '';
    position: absolute;
    top: calc(-1 * min(85.9vw, 1030.8px));
    left: 50%;
    z-index: 0;
    width: min(120vw, 1440px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
}

.opa-stories-head,
.opa-stories-panel {
    position: relative;
    z-index: 1;
}

.opa-stories-head {
    text-align: center;
}

.opa-stories-head p {
    color: #4c7a5d;
    font-size: clamp(14px, min(1.7vw, 20.4px), 20px);
    font-weight: 900;
}

.opa-stories-head h2 {
    margin-top: 6px;
    color: var(--o-orange);
    font-size: clamp(21px, min(2.7vw, 32.4px), 34px);
    font-weight: 900;
    letter-spacing: .04em;
}

.opa-stories-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, min(2.4vw, 28.8px), 30px);
    max-width: 1120px;
    margin: clamp(26px, min(3.4vw, 40.8px), 42px) auto 0;
    box-shadow: 0 8px 26px rgba(120, 100, 80, .08);
}

/* 三張獨立白卡（mock 樣式）：照片吃滿卡頂、文字區留白 */
.opa-story {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(120, 100, 80, .1);
    /* 基礎值：.bsn-scripted 不存在時（all.js 載入失敗）仍要有 hover 過場 */
    transition: translate .25s ease, scale .25s ease, box-shadow .25s ease;
}

/* 同 .opa-point：用同權重更後面的選擇器接手，保留淡入再補 hover */
.bsn-scripted .opa-story {
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1),
        translate .25s ease, scale .25s ease, box-shadow .25s ease;
}

/* 位移用獨立的 translate / scale，transform 留給淡入 */
.opa-story:hover {
    translate: 0 -6px;
    scale: 1.015;
    box-shadow: 0 18px 38px rgba(120, 100, 80, .2);
}

/* 照片放大：卡片本身已有 overflow: hidden，不會溢出圓角 */
.opa-story:hover .opa-story-photo img {
    transform: scale(1.06);
}

/* chip 的 translateY 是排版用的，只動 rotate / scale 才能並存 */
.opa-story:hover .opa-story-chip {
    rotate: -3deg;
    scale: 1.06;
}

.opa-story:hover .opa-story-who {
    color: var(--o-green);
}

@media (prefers-reduced-motion: reduce) {

    .opa-story:hover,
    .opa-story:hover .opa-story-chip {
        translate: none;
        scale: none;
        rotate: none;
    }

    .opa-story:hover .opa-story-photo img {
        transform: none;
    }
}

.opa-story-link {
    display: block;
    padding-bottom: clamp(20px, min(2.2vw, 26.4px), 30px);
    color: inherit;
    text-decoration: none;
}

.opa-story-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .45s ease;
}

.opa-story-chip,
.opa-story-who,
.opa-story-txt {
    margin-inline: clamp(20px, min(2.2vw, 26.4px), 30px);
}

.opa-story-chip {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0 0 0 10px;
    transform: translateY(-14px);
    transition: rotate .25s ease, scale .25s ease;
    padding: 3px 14px;
    border-radius: 100px;
    background: var(--o-green);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.opa-story-who {
    margin-top: 8px;
    font-size: clamp(15px, min(1.6vw, 19.2px), 18px);
    font-weight: 900;
    transition: color .25s ease;
}

.opa-story-txt {
    margin-top: 6px;
    color: #6a6258;
    font-size: 13px;
    line-height: 1.85;
}

/* ===== 40年の実績 + 環境跑馬燈 ===== */

.opa-results {
    padding: clamp(48px, min(6vw, 72px), 80px) 0 0;
    background: var(--o-cream);
    overflow-x: clip;
}

/* mock：標題坐在一條滿版白色橫帶上（帶高 299px，圓角落在畫布外） */
.opa-results-head {
    position: relative;
    padding: clamp(20px, min(3vw, 36px), 46px) 24px;
    text-align: center;
}

/* 白帶高度要跟著標題內容走：寫死的話窄版標題換行會撐出上下露底 */
.opa-results-head::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    /* 頁面已鎖成 900 的畫布，這條白帶的「滿版」是指畫布寬，不是視窗寬 */
    width: min(100vw, 1200px);
    height: calc(100% + min(min(6.3vw, 75.6px), 81px));
    background: #fff;
    transform: translate(-50%, -50%);
}

.opa-results-eyebrow {
    font-size: clamp(15px, min(1.8vw, 21.6px), 22px);
    font-weight: 900;
}

.opa-results-title {
    margin-top: 4px;
    color: var(--o-brick);
    font-size: clamp(21px, min(2.8vw, 33.6px), 36px);
    font-weight: 900;
    letter-spacing: .05em;
}

.opa-results-sub {
    margin-top: 10px;
    color: #6a6258;
    font-size: clamp(12px, min(1.4vw, 16.8px), 15px);
    font-weight: 700;
}

/* 跑馬燈外框改白底（v1 是淺綠） */
.bsn-gallery {
    padding: clamp(28px, min(3.6vw, 43.2px), 46px) 0 clamp(48px, min(6vw, 72px), 80px);
    background: #fff;
}

/* ===== 關於茂盛 + 認證 ===== */

.opa-about {
    padding: clamp(36px, min(5vw, 60px), 70px) 24px clamp(56px, min(7vw, 84px), 90px);
    background: var(--o-cream);
}

.opa-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .65fr);
    gap: clamp(28px, min(4vw, 48px), 56px);
    max-width: 1120px;
    margin-inline: auto;
}

.opa-about-card {
    padding: clamp(26px, min(3.4vw, 40.8px), 44px);
    border-radius: 13px;
    background: #f9e0e0;
    text-align: center;
}

.opa-about-title {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 12px;
    background: #fff;
    font-size: clamp(17px, min(2vw, 24px), 24px);
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 3px 10px rgba(150, 90, 100, .1);
}

.opa-about-txt {
    margin-top: 20px;
    font-size: clamp(14px, min(1.5vw, 18px), 16px);
    font-weight: 500;
    line-height: 2.1;
    text-align: left;
}

.opa-about-photo {
    display: block;
    width: min(300px, 72%);
    margin: 24px auto 0;
    border-radius: 12px;
    background: #fff;
}

/* 設計稿原字型：コーポレート・ロゴ ver3 */
.opa-ghost-btn {
    font-family: "CorporateLogo", var(--o-font);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 10px 32px;
    border: 2px solid var(--o-brown);
    border-radius: 100px;
    background: #fff;
    color: var(--o-ink);
    font-size: clamp(14px, min(1.5vw, 18px), 17px);
    font-weight: 900;
    letter-spacing: .1em;
    transition: transform .2s ease, box-shadow .2s ease;
}

.opa-ghost-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(120, 100, 80, .16);
}

.opa-about-certs {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, min(3vw, 36px), 34px);
    text-align: center;
}

.opa-cert h3 {
    margin-bottom: 12px;
    font-size: clamp(17px, min(2vw, 24px), 24px);
    font-weight: 900;
    letter-spacing: .1em;
}

/* 認證書：自設計稿抽出的正本掃描檔 */
.opa-cert-img {
    display: block;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(120, 100, 80, .12);
}

/* ===== 医師チーム ===== */

.opa-docs {
    max-width: 1120px;
    margin-inline: auto;
    padding: clamp(56px, min(7.5vw, 90px), 104px) 24px clamp(56px, min(7vw, 84px), 96px);
    background: #fff;
}

/* 標題置中、深炭灰、下方一條細灰分隔線（同主站區塊標題樣式） */
.opa-docs-head {
    margin-bottom: clamp(26px, min(3.4vw, 40.8px), 44px);
    padding-bottom: clamp(14px, min(1.8vw, 21.6px), 24px);
    border-bottom: 1px solid #d9d9d9;
    color: #3d3d3d;
    font-size: clamp(21px, min(2.7vw, 32.4px), 34px);
    font-weight: 900;
    letter-spacing: .06em;
    text-align: center;
}

.opa-docs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, min(3.4vw, 40.8px), 40px) clamp(16px, min(2.4vw, 28.8px), 30px);
}

.opa-doc {
    margin: 0;
}

.opa-doc-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.opa-doc-photo {
    position: relative;
    aspect-ratio: 5 / 6;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .3s ease;
}

.opa-doc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* 預設略暗，hover 轉亮＋放大；外框 overflow:hidden，只有人像會動 */
    filter: brightness(.93);
    transition: transform .4s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
}

.opa-doc-link:hover .opa-doc-photo img {
    transform: scale(1.025);
    filter: brightness(1.06);
}

.opa-doc-link:hover .opa-doc-photo {
    box-shadow: 0 10px 24px rgba(120, 100, 80, .16);
}

@media (prefers-reduced-motion: reduce) {
    .opa-doc-link:hover .opa-doc-photo img {
        transform: none;
    }
}

/* 照片右上的直式假名（mock 的フリガナ） */
.opa-doc-kana {
    position: absolute;
    top: 8px;
    right: 6px;
    color: #8c8272;
    font-size: clamp(9px, min(1vw, 12px), 11px);
    font-weight: 700;
    letter-spacing: .18em;
    writing-mode: vertical-rl;
}

.opa-doc figcaption {
    margin-top: 10px;
    text-align: center;
}

.opa-doc figcaption strong {
    display: block;
    font-size: clamp(15px, min(1.6vw, 19.2px), 18px);
    font-weight: 900;
}

.opa-doc figcaption span {
    color: #6a6258;
    font-size: clamp(11px, min(1.3vw, 15.6px), 13px);
    font-weight: 700;
}

/* ===== 聯絡資訊（footer） ===== */

.opa-contact {
    padding: 0 0 clamp(24px, min(3vw, 36px), 40px);
    background: #fff;
}

/* mock：滿版淡黃橫帶（#FFF9DF），內容限寬置中 */
/* 內容整組置中，不用 padding-inline 夾寬，否則右側會留一片空白 */
.opa-contact-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, min(3vw, 36px), 40px);
    padding: clamp(26px, min(4vw, 48px), 48px) 24px;
    background: #fff9df;
}

.opa-contact-illo {
    flex-shrink: 0;
    width: clamp(110px, min(15vw, 180px), 185px);
}

.opa-contact-head {
    display: inline-block;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--o-brown);
    color: var(--o-brown);
    font-size: clamp(17px, min(2.3vw, 27.6px), 28px);
    font-weight: 900;
    letter-spacing: .04em;
}

.opa-contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    font-size: clamp(14px, min(1.7vw, 20.4px), 19px);
    font-weight: 700;
}

.opa-contact-row a {
    color: inherit;
}

.opa-contact-label {
    flex-shrink: 0;
    padding: 4px 20px;
    border-radius: 100px;
    background: var(--o-tan);
    color: #fff;
    font-size: clamp(12px, min(1.4vw, 16.8px), 15px);
    font-weight: 900;
    letter-spacing: .2em;
    text-indent: .2em;
}

.opa-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
}

.opa-contact-links .opa-ghost-btn {
    margin-top: 8px;
}

.opa-legal {
    margin-top: 26px;
    color: #9a9186;
    font-size: 12px;
    text-align: center;
}

/* ===== RWD ===== */

@media (max-width: 900px) {
    .opa-wide-br {
        display: none;
    }

    .opa-enroll-grid {
        grid-template-columns: 1fr;
    }

    /* 窄版：花圈與三張插圖整欄收起（純裝飾，手機上只留表單） */
    .opa-enroll-illos {
        display: none;
    }

    /* 窄版收掉白拱（直向拉長後拱頂會沉到表單底下），改讓表單自帶白色圓角卡 */
    .opa-enroll-sheet {
        display: none;
    }

    .opa-enroll-formcol {
        /* 桌機的欄寬限制（對齊設計稿 587px）在窄版要還原，否則表單被壓扁 */
        max-width: none;
        margin-left: 0;
        padding: 30px 18px 26px;
        background: #fff;
        border-radius: 34px;
    }

    .opa-enroll-head {
        margin-inline: auto;
    }

    .opa-about-grid {
        grid-template-columns: 1fr;
    }

    .opa-about-certs {
        flex-direction: row;
        justify-content: center;
    }

    .opa-cert {
        flex: 1;
        max-width: 340px;
    }
}

@media (max-width: 760px) {
    .opa-points-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 14px;
    }

    .opa-contact-card {
        flex-direction: column;
        text-align: center;
    }

    .opa-contact-row {
        justify-content: center;
        text-align: left;
    }

    .opa-contact-links {
        justify-content: center;
    }
}

@media (max-width: 640px) {

    /* 窄版照片讓出寬度給文字，日期愛心縮小上移，避免壓到臉 */
    /* 加高才有空間讓泡泡與大標一起下移（原本兩者只差 18px） */
    .opa-hero-in {
        min-height: clamp(470px, min(118vw, 1416px), 600px);
        padding-bottom: 28px;
    }

    .opa-hero-logo {
        width: min(240px, min(52vw, 624px));
    }

    /* 窄版標語改回正常流排在大標之後，絕對定位在窄版會撞到 logo 或日期色塊 */
    .opa-hero-in {
        display: flex;
        flex-direction: column;
    }

    .opa-hero-tag {
        position: static;
        order: 1;
        align-self: center;
        margin-top: 14px;
        text-align: center;
    }

    .opa-hero-date {
        top: clamp(66px, min(17vw, 204px), 110px);
        width: clamp(150px, min(42vw, 504px), 210px);
    }

    /* 窄版泡泡縮小並貼右緣，左緣才讓得開日期色塊 */
    /* top 不用百分比：基準與大標的 margin-top(vw) 不同，某些寬度會追撞 */
    .opa-consult-pill {
        top: calc(70px + min(48vw, 576px));
    }

    .opa-consult-pill em {
        font-size: clamp(15px, min(4.6vw, 55.2px), 21px);
    }

    /* 標題區下移；sweep 曲線是 bottom 錨定，hero 長高會自己跟著走 */
    /* 下限 205 是為了 ≤347px：那裡大標已卡在 clamp 下限但泡泡還在下移 */
    .opa-hero-copy {
        margin-top: clamp(205px, min(59vw, 708px), 340px);
    }

    .opa-plans {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 460px;
    }

    .opa-stories-panel {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .opa-story-photo img {
        aspect-ratio: 16 / 10;
    }

    /* 四步驟改直式：橫排在窄版每欄只剩 79px，兩端斜切又各吃 14px */
    .opa-steps-row {
        flex-direction: column;
        gap: 10px;
        max-width: 340px;
    }

    .opa-step-no {
        margin-bottom: 4px;
        text-align: center;
    }

    /* 箭頭跟著轉 90 度，方向感才從「往右」變成「往下」 */
    .opa-step-arrow {
        flex-direction: row;
        /* 整組置中才不會右側留白，也與上方的 STEP 序號對齊 */
        justify-content: center;
        gap: 16px;
        height: auto;
        min-height: 78px;
        /* padding 上下不對稱是刻意的：V 形上下緣同線，內容置中時整段會被往下推 */
        padding: 22px 22px 14px;
        clip-path: polygon(0 0, 50% 16px, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px));
    }

    .opa-step:first-child .opa-step-arrow {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px));
    }

    /* 掃光的方向也要跟著轉成由上往下，否則波的方向與版面對不起來 */
    .opa-step-arrow::after {
        background: linear-gradient(190deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 65%);
    }

    /* markup 是文字在前，窄版用 order 調成 icon 在左，不動 HTML 順序 */
    .opa-step-arrow svg {
        order: -1;
        flex: none;
        height: 46px;
    }

    /* 給標題統一 min-width（取最長那條），四組 icon 才對齊在同一條垂直線 */
    .opa-step-arrow span {
        min-width: 7.2em;
        max-width: none;
        font-size: 15px;
        text-align: left;
    }

    /* 窄版跟著視窗縮：桌機的 366px 高在手機會佔掉半個螢幕，連一張都看不完整 */
    .bsn-gallery-img img {
        height: clamp(160px, min(52vw, 624px), 260px);
    }

    .opa-docs-grid {
        gap: 18px 10px;
    }

    .opa-doc-kana {
        display: none;
    }
}

@media (max-width: 420px) {

    /* 320px 級兩者都到 clamp 下限會重疊，泡泡是裝飾性的，讓它先收 */
    .opa-consult-pill {
        right: 10px;
        width: clamp(130px, min(44vw, 528px), 150px);
    }

    .opa-hero-badges span {
        width: 46px;
        font-size: 11px;
    }

    .opa-point-list li {
        font-size: 11.5px;
    }
}

/* ===== HERO：舞台固定原稿 900×690，各元素以百分比對位 ===== */
.opa-hero {
    background: linear-gradient(180deg, #f6f4f5 0%, #f7f5f6 50%, #f4f5ef 100%);
}

.opa-hero-in {
    display: block;
    aspect-ratio: 900 / 690;
    min-height: 0;
    max-width: none;
    padding: 0;
}

/* 容器退出排版，由圖片自己用絕對座標對應原稿 bbox */
.opa-hero-badges,
.opa-hero-copy {
    display: contents;
}

.opa-hero-logo,
.opa-hero-tag,
.opa-hero-date,
.opa-hero-title,
.opa-hero-badges img,
.opa-consult-pill {
    position: absolute;
    margin: 0;
    padding: 0;
}

.opa-hero-logo img,
.opa-hero-tag img,
.opa-hero-date img,
.opa-hero-title img,
.opa-hero-badges img,
.opa-consult-pill img {
    display: block;
    width: 100%;
    height: auto;
}

.opa-hero-logo          { left: 3.911%;  top: 2.261%;  width: 34.056%; }
.opa-hero-tag           { left: 6.033%;  top: 17.203%; width: 33.478%; }
.opa-hero-date          { left: 9.000%;  top: 33.043%; width: 27.889%; }
.opa-hero-badges img:first-of-type { left: 84.489%; top: 10.565%; width: 10.267%; }
.opa-hero-badges img:last-of-type  { left: 84.444%; top: 26.232%; width: 10.333%; }
.opa-consult-pill       { left: 67.678%; top: 55.464%; width: 25.733%; }
.opa-hero-title         { left: 16.089%; top: 69.014%; width: 73.478%; }

/* 原稿的 hero 下緣是直接切齊背景色，沒有那道白色曲線 */
.opa-hero-sweep {
    display: none;
}

/* 舞台在所有寬度都維持同一組比例，所以窄版的重排規則要退場 */
@media (max-width: 640px) {

    .opa-hero-in {
        display: block;
        aspect-ratio: 900 / 690;
        min-height: 0;
        padding: 0;
    }

    .opa-hero-tag {
        position: absolute;
        left: 6.033%;
        top: 17.203%;
        width: 33.478%;
        margin: 0;
        text-align: initial;
    }

    .opa-hero-date,
    .opa-consult-pill,
    .opa-hero-logo {
        top: auto;
    }

    .opa-hero-logo { top: 2.261%; }
    .opa-hero-date { top: 33.043%; width: 27.889%; left: 9%; }
    .opa-consult-pill { top: 55.464%; }
    .opa-hero-copy { margin-top: 0; }
}

/* 背景層直接鋪滿舞台，不再需要 mask／object-position 那套逼近 */
.opa-hero-baby {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: fill;
    -webkit-mask-image: none;
    mask-image: none;
}

/* 傾斜已經畫在圖裡，CSS 的旋轉要歸零，否則會斜兩次 */
.opa-consult-pill {
    rotate: none;
}

/* 非奶油底區塊用 box-shadow 往兩側潑色，clip-path 夾回上下緣避免蓋到相鄰區塊 */
.opa-topbar,
.opa-docs,
.opa-contact {
    clip-path: inset(0 -100vw);
}

.opa-topbar {
    box-shadow: 0 0 0 100vw #f4afad;
}

.opa-docs,
.opa-contact {
    box-shadow: 0 0 0 100vw #fff;
}

/* hero 是漸層，只能用 ::before 延伸到兩側；overflow 要放開否則會裁掉它 */
.opa-hero {
    overflow: visible;
}

/* ===== 依設計原稿（1.svg）幾何對齊：reco〜steps 區 ===== */
.opa-points-head img,
.opa-points-sub img {
    display: inline-block;
    width: 100%;
    height: auto;
}

.opa-points-head img { max-width: min(75.4vw, 905px); }
.opa-points-sub img { max-width: min(49.7vw, 596px); }

.opa-reco-txt {
    max-width: none;
}

/* plans 卡：旗籤與黃圓的座標取自原稿 bbox */
.opa-plan {
    padding: clamp(26px, min(3.2vw, 38px), 38px) 18px clamp(18px, min(2.3vw, 28px), 28px);
}

/* 旗籤與黃圓的位移掛在 --fw（自身寬）上，窄版放大時才會一起等比 */
.opa-plan-flag,
.opa-plan-fab {
    --fw: min(10.58vw, 127px);
    width: var(--fw);
}

.opa-plan-flag {
    position: absolute;
    top: calc(var(--fw) * -.3701);
    left: calc(var(--fw) * .1339);
    height: auto;
}

.opa-plan-fab {
    position: absolute;
    top: calc(var(--fw) * -.3858);
    right: calc(var(--fw) * -.2047);
    height: auto;
    animation: none;
    padding: 0;
    background: none;
    border-radius: 0;
}

.opa-plan-small {
    font-size: clamp(13px, min(1.5vw, 18px), 18px);
}

.opa-plan-big img {
    display: block;
    margin-inline: auto;
    height: clamp(26px, min(3.42vw, 41px), 41px);
    width: auto;
}

/* points 卡：原稿卡寬 231px、間距 37px，照片比例 231:169 */
.opa-points-grid {
    grid-template-columns: repeat(4, minmax(0, min(19.25vw, 231px)));
    justify-content: center;
    gap: clamp(14px, min(3.08vw, 37px), 37px);
    max-width: none;
}

.opa-point-photo img {
    aspect-ratio: 231 / 169;
}

.opa-point-title {
    font-size: clamp(13px, min(1.58vw, 19px), 19px);
    line-height: 1.6;
}

/* テーマ chip：原稿是深粉紅、置於卡左上、比舊版大一點 */
.opa-point-tag {
    background: #e56d8e;
    font-size: clamp(11px, min(1.33vw, 16px), 16px);
    padding: 3px 14px;
}

/* 卡右上花：原稿四張卡各一朵（鬱金香／小花），寬 28px、跨出卡上緣 */
.opa-tulip {
    position: absolute;
    top: calc(-1 * min(1.2vw, 14px));
    right: calc(-1 * min(.8vw, 10px));
    width: min(2.7vw, 32px);
    height: auto;
    z-index: 2;
}

/* steps 膠囊：字級對齊原稿，櫻花錨在右端並突出上緣 */
.opa-steps-banner {
    position: relative;
    font-size: clamp(22px, min(3.17vw, 38px), 38px);
}

.opa-steps-banner .opa-sakura {
    position: absolute;
    top: calc(-1 * min(2vw, 24px));
    right: min(.5vw, 6px);
    width: min(4.08vw, 49px);
    height: auto;
}

/* 黃 blob：原稿形狀一比一，右側溢出畫布是原稿本來的樣子 */
.opa-mid-blob {
    top: calc(-1 * min(10.67vw, 128px));
    left: 62.1%;
    width: min(112.6vw, 1351px);
    height: auto;
}

/* 膠囊底色與照片比例對齊原稿取樣：主體 #F58371、照片 231:140 */
.opa-steps-banner {
    background: #f58371;
}

.opa-point-photo img {
    aspect-ratio: 231 / 140;
}

/* ── 下半頁標題群改用原稿向量後的尺寸（原稿 bbox × 4/3） ── */
.opa-stories-head img  { width: min(46.8vw, 561px); height: auto; }
.opa-results-title img { width: min(46.8vw, 561px); height: auto; }
.opa-results-sub img   { width: min(69.6vw, 835px); height: auto; }
.opa-about-title img   { width: min(43.4vw, 521px); max-width: 100%; height: auto; }
.opa-cert h3 img { width: min(19vw, 228px); height: auto; }

/* about 內文字級對齊原稿（字身 20px → fs 21px、行距 25u→33px） */
.opa-about-txt {
    font-size: clamp(14px, min(1.75vw, 21px), 21px);
    line-height: 1.6;
}

/* stories 卡：原稿三卡總寬 997px（748 單位 × 4/3），比通欄窄，置中 */
.opa-stories-panel {
    max-width: min(83.1vw, 997px);
    margin-inline: auto;
}

/* 窄版重設：上面依原稿的覆寫寫在檔尾會蓋過 @media，這裡把窄版行為補回來 */
@media (max-width: 760px) {

    .opa-points-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 14px;
        max-width: 460px;
        margin-inline: auto;
    }
}

@media (max-width: 640px) {

    .opa-stories-panel {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    /* plans 卡的旗籤/黃圓負偏移在窄版收進卡內，避免撐出橫向捲動 */
    .opa-plan-fab {
        right: 4px;
    }

    .opa-steps-banner .opa-sakura {
        right: 0;
    }
}

/* 去背圖要用 filter: drop-shadow，box-shadow 會沿矩形盒子畫出歪斜方框 */
.opa-plan .opa-plan-fab {
    transition: transform .28s cubic-bezier(.34, 1.3, .64, 1), filter .28s ease;
}

.opa-plan:hover .opa-plan-fab {
    box-shadow: none;
    filter: drop-shadow(0 4px 8px rgba(120, 100, 80, .28));
}

/* 旗籤同理，先把矩形陰影的可能性關掉 */
.opa-plan:hover .opa-plan-flag {
    box-shadow: none;
}

/* 頂部粉帶：帶高對齊原稿（帶高 127px） */
.opa-topbar {
    padding: clamp(9px, min(1.79vw, 21.5px), 24px) 16px;
    /* 換成長文案，字級縮到 37px 才能維持一行，行寬仍是原稿的 1086px */
    font-size: min(3.05vw, 37px);
    letter-spacing: .045em;
    white-space: nowrap;
}

/* ===== 申込緞帶：依 mock.pdf 原始尺寸校正（viewBox 單位與 pt 為 1:1） ===== */
.opa-enroll-head {
    max-width: min(46.9vw, 563px);
    margin-left: min(4.72vw, 56.7px);
}

.opa-ribbon-txt {
    font-size: 36.6px;
}

/* 新文案長 70%，字級只能維持較小；並移除 HonokaAntique（22 字有 19 字不在子集內） */
.opa-enroll-hand-txt {
    font-family: var(--o-font);
}

/* 兩側留白鋪原稿最外一列像素取樣出的漸層，照片的切邊才不明顯 */
.opa-hero::before {
    content: '';
    position: absolute;
    /* 用 0 而非 -1：負值會被畫到祖先背景之下（root 有 overflow-x: clip） */
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 50vw;
    background: linear-gradient(180deg,
        #f5f3f4 0.00%,
        #f6f4f5 0.78%,
        #f5f3f4 1.55%,
        #f6f4f5 2.33%,
        #f6f4f5 3.10%,
        #f6f4f5 3.88%,
        #f7f5f6 4.65%,
        #f6f4f5 5.43%,
        #f6f4f5 6.20%,
        #f6f4f5 6.98%,
        #f7f5f6 7.75%,
        #f7f5f6 8.53%,
        #f7f5f6 9.30%,
        #f7f5f6 10.08%,
        #f7f5f6 10.85%,
        #f6f4f5 11.63%,
        #f7f5f6 12.40%,
        #f8f6f7 13.18%,
        #f8f6f7 13.95%,
        #f8f6f7 14.73%,
        #f8f6f7 15.50%,
        #f8f6f7 16.28%,
        #f9f7f8 17.05%,
        #f8f6f7 17.83%,
        #f8f6f7 18.60%,
        #f8f6f7 19.38%,
        #f8f6f7 20.16%,
        #f8f6f7 20.93%,
        #f9f7f8 21.71%,
        #f8f6f7 22.48%,
        #f8f6f7 23.26%,
        #f8f6f7 24.03%,
        #f7f5f6 24.81%,
        #f9f7f8 25.58%,
        #f9f7f8 26.36%,
        #f8f6f7 27.13%,
        #f8f6f7 27.91%,
        #f8f6f7 28.68%,
        #f9f7f8 29.46%,
        #f8f6f7 30.23%,
        #f8f6f7 31.01%,
        #f8f6f7 31.78%,
        #f9f7f8 32.56%,
        #f9f7f8 33.33%,
        #f8f6f7 34.11%,
        #f9f7f8 34.88%,
        #f8f6f7 35.66%,
        #f8f6f7 36.43%,
        #f8f6f7 37.21%,
        #f6f4f5 37.98%,
        #f7f5f6 38.76%,
        #f7f5f6 39.53%,
        #f8f6f7 40.31%,
        #f8f6f7 41.09%,
        #f7f5f6 41.86%,
        #f7f5f6 42.64%,
        #f7f5f6 43.41%,
        #f7f5f6 44.19%,
        #f8f6f7 44.96%,
        #f7f5f6 45.74%,
        #f7f5f6 46.51%,
        #f7f5f6 47.29%,
        #f7f5f6 48.06%,
        #f8f6f7 48.84%,
        #f7f5f6 49.61%,
        #f7f5f6 50.39%,
        #f7f5f6 51.16%,
        #f7f5f6 51.94%,
        #f7f5f6 52.71%,
        #f7f5f6 53.49%,
        #f7f5f6 54.26%,
        #f6f4f5 55.04%,
        #f7f5f6 55.81%,
        #f7f5f6 56.59%,
        #f6f4f5 57.36%,
        #f7f5f6 58.14%,
        #f8f6f7 58.91%,
        #f7f5f6 59.69%,
        #f6f4f5 60.47%,
        #f6f4f5 61.24%,
        #f7f5f6 62.02%,
        #f6f4f5 62.79%,
        #f6f4f5 63.57%,
        #f6f4f5 64.34%,
        #f6f4f5 65.12%,
        #f5f4f4 65.89%,
        #f6f5f5 66.67%,
        #f6f5f6 67.44%,
        #f6f4f5 68.22%,
        #f4f5f0 68.99%,
        #f4f5ef 69.77%,
        #f4f5ef 70.54%,
        #f4f5ef 71.32%,
        #f4f5ef 72.09%,
        #f4f5ef 72.87%,
        #f4f5ef 73.64%,
        #f4f5ef 74.42%,
        #f4f5ef 75.19%,
        #f5f5ef 75.97%,
        #f5f5f0 76.74%,
        #f5f6f0 77.52%,
        #f5f6f0 78.29%,
        #f5f6f0 79.07%,
        #f5f6f0 79.84%,
        #f5f6f0 80.62%,
        #f5f6f0 81.40%,
        #f5f6f0 82.17%,
        #f5f6f0 82.95%,
        #f5f6f0 83.72%,
        #f5f6f0 84.50%,
        #f5f6f0 85.27%,
        #f5f6f0 86.05%,
        #f5f6f0 86.82%,
        #f5f6f0 87.60%,
        #f5f6f0 88.37%,
        #f5f6f0 89.15%,
        #f5f6f0 89.92%,
        #f5f6f0 90.70%,
        #f5f6f0 91.47%,
        #f5f6f0 92.25%,
        #f5f6f0 93.02%,
        #f5f6f0 93.80%,
        #f5f6f0 94.57%,
        #f5f6f0 95.35%,
        #f5f5f0 96.12%,
        #f5f5ef 96.90%,
        #f4f5ef 97.67%,
        #f4f5ef 98.45%,
        #f4f5ef 99.22%,
        #f4f5ef 100.00%);
}

.opa-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 50vw;
    background: linear-gradient(180deg,
        #f6f2f3 0.00%,
        #f5f1f2 0.78%,
        #f6f2f3 1.55%,
        #f6f2f3 2.33%,
        #f7f3f4 3.10%,
        #f6f2f3 3.88%,
        #f5f1f2 4.65%,
        #f6f2f3 5.43%,
        #f6f2f3 6.20%,
        #f6f2f3 6.98%,
        #f7f3f4 7.75%,
        #f6f2f3 8.53%,
        #f5f1f2 9.30%,
        #f6f2f3 10.08%,
        #f5f1f2 10.85%,
        #f6f2f3 11.63%,
        #f5f1f2 12.40%,
        #f5f1f2 13.18%,
        #f4f0f1 13.95%,
        #f5f1f2 14.73%,
        #f5f1f2 15.50%,
        #f5f1f2 16.28%,
        #f5f1f2 17.05%,
        #f4f0f1 17.83%,
        #f4f0f1 18.60%,
        #f5f1f2 19.38%,
        #f4f0f1 20.16%,
        #f4f0f1 20.93%,
        #f4f0f1 21.71%,
        #f4f0f1 22.48%,
        #f4f0f1 23.26%,
        #f3eff0 24.03%,
        #f4f0f1 24.81%,
        #f3eff0 25.58%,
        #f2eeef 26.36%,
        #f2eeef 27.13%,
        #f1edee 27.91%,
        #f1edee 28.68%,
        #f1edee 29.46%,
        #f1edee 30.23%,
        #f0eced 31.01%,
        #efebec 31.78%,
        #efebec 32.56%,
        #efebec 33.33%,
        #efebec 34.11%,
        #efebec 34.88%,
        #efeaec 35.66%,
        #efebec 36.43%,
        #ede9ea 37.21%,
        #eeeaeb 37.98%,
        #eeeaeb 38.76%,
        #eeeae9 39.53%,
        #eeeae9 40.31%,
        #eeeae9 41.09%,
        #ede9e8 41.86%,
        #efeae9 42.64%,
        #efe9e9 43.41%,
        #efe9e9 44.19%,
        #eee8e8 44.96%,
        #efe9e9 45.74%,
        #efe9e8 46.51%,
        #f1d2c4 47.29%,
        #ebcfc3 48.06%,
        #ecccbf 48.84%,
        #eacabd 49.61%,
        #edd0c8 50.39%,
        #e8c8bf 51.16%,
        #ecc4b6 51.94%,
        #e7b7a6 52.71%,
        #e7c0b3 53.49%,
        #edccc1 54.26%,
        #f5d8d0 55.04%,
        #f7d6cd 55.81%,
        #f2d2cb 56.59%,
        #f5cfc8 57.36%,
        #f2c9c0 58.14%,
        #f0bdb0 58.91%,
        #e9ad9e 59.69%,
        #da9586 60.47%,
        #c7917f 61.24%,
        #ebe2e0 62.02%,
        #ebe3e1 62.79%,
        #e9e2e0 63.57%,
        #e8e1df 64.34%,
        #e7e0de 65.12%,
        #e7dfdd 65.89%,
        #e8e0de 66.67%,
        #e7e0de 67.44%,
        #e7e0de 68.22%,
        #e6dfdd 68.99%,
        #e5dedc 69.77%,
        #e6dddc 70.54%,
        #e5dcdb 71.32%,
        #e5dddc 72.09%,
        #e5dcda 72.87%,
        #e3dbd9 73.64%,
        #e4dbdb 74.42%,
        #e3dbda 75.19%,
        #e3dad9 75.97%,
        #e4dbdb 76.74%,
        #e3dbda 77.52%,
        #e3dbda 78.29%,
        #e3dada 79.07%,
        #e3dbda 79.84%,
        #e3dbda 80.62%,
        #e3dbda 81.40%,
        #e4dcdb 82.17%,
        #e3dbda 82.95%,
        #e4dcdb 83.72%,
        #e5dddc 84.50%,
        #e4dcdb 85.27%,
        #e4dcdb 86.05%,
        #e6dfde 86.82%,
        #f5f6f0 87.60%,
        #f5f6f0 88.37%,
        #f5f6f0 89.15%,
        #f5f6f0 89.92%,
        #f5f6f0 90.70%,
        #f5f6f0 91.47%,
        #f5f6f0 92.25%,
        #f5f6f0 93.02%,
        #f5f6f0 93.80%,
        #f5f6f0 94.57%,
        #f5f5f0 95.35%,
        #f5f5ef 96.12%,
        #f4f5ef 96.90%,
        #f4f5ef 97.67%,
        #f4f5ef 98.45%,
        #f4f5ef 99.22%,
        #f4f5ef 100.00%);
}

/* 用 overflow-clip-margin 把裁切邊界往外推；不能改 html 的 overflow，否則連 hero 漸層一起被裁 */
.opa-mid {
    overflow: clip;
    overflow-clip-margin: 600px;
}

/* 刻意超出版面的裝飾色塊，要豁免全域的 img { max-width: 100% } */
.opa-mid-blob {
    max-width: none;
}

/* 背景圖裁到 850 保留白色雲朵尾巴，.opa-reco 改透明讓它透出來 */
.opa-hero-baby {
    height: auto;
    object-fit: initial;
}

.opa-reco {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* reco 區縱向節奏對齊原稿：導言→膠囊 63px、膠囊高 73px、膠囊→內文 52px */
.opa-reco-lead {
    margin-bottom: min(5.12vw, 61.4px);
}

.opa-reco-pill {
    /* 行高 1.33 才會是原稿的膠囊高 73px（繼承 body 的 1.75 會變 87px） */
    line-height: 1.33;
}

.opa-reco-txt {
    margin-top: min(4.07vw, 48.8px);
}

/* 跑馬燈用負邊距拉成滿版，否則會在 1200 欄緣被硬切 */
.bsn-gallery {
    margin-inline: calc(50% - 50vw);
}

/* 這層不需要 overflow-x: clip，它會把跑馬燈的滿版負邊距夾回 1200 */
.opa-results {
    overflow: visible;
}

/* 白帶在原稿裡橫貫整個畫布；欄寬鎖 1200 後改回以視窗為準才不會露出切邊。 */
.opa-results-head::before {
    width: 100vw;
}

/* body 改透明、底色統一交給 html，否則透出來的是 body 的白色矩形 */
body.opa-v2 {
    background: transparent;
}

/* 頁尾淡黃帶同頂帶做法：box-shadow 潑色 + clip-path 夾回上下緣 */
.opa-contact-card {
    clip-path: inset(0 -100vw);
    box-shadow: 0 0 0 100vw #fff9df;
}

/* 這兩段改回真文字，字級取自原稿的字身高度換算 */
.opa-reco-lead {
    font-size: min(2.92vw, 35px);
}

.opa-reco-txt {
    /* 容器要容得下最長的第一行，否則 <br> 之外還會再折一次 */
    max-width: min(81.7vw, 980px);
    font-size: min(2.3vw, 27.6px);
    /* 行距對齊「行間空隙」而不是絕對值，字級放大後才不會偏擠 */
    line-height: 1.605;
}

/* 改回真文字後行框多出半行距，依原稿實測回補上下間距 */
.opa-reco-lead {
    margin-bottom: min(4.117vw, 49.4px);
}

.opa-reco-txt {
    margin-top: min(3.567vw, 42.8px);
}

/* 加一道水平遮罩讓延伸色在 120px 內淡掉，右緣的手才不會被抹成一條 */
.opa-hero::before {
    -webkit-mask-image: linear-gradient(270deg, #000 0, rgba(0, 0, 0, 0) 120px);
    mask-image: linear-gradient(270deg, #000 0, rgba(0, 0, 0, 0) 120px);
}

.opa-hero::after {
    -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0) 120px);
    mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0) 120px);
}

/* ══ 依 mock.pdf 實測校正（數值皆為 1200 畫布下的 px） ══ */

/* 內文三行 → 方案卡上緣：原稿 74px，現況 61px */
.opa-plans {
    padding-top: min(5.583vw, 67px);
}

/* 四步驟箭頭裡的標題：原稿 18.8pt ＝ 25.1px，現況 16px */
.opa-step-arrow span {
    font-size: min(2.09vw, 25.1px);
}

/* 用獨立的 translate 位移，才不會跟浮動動畫的 transform 互搶 */
.opa-wreath {
    translate: max(-1.167vw, -14px) max(-12.92vw, -155px);
}

/* 原稿白底是滿版橫貫整個區塊，照片也是橫幅不是直式 */
.opa-stories {
    background: #fff;
    clip-path: inset(0 -100vw);
    box-shadow: 0 0 0 100vw #fff;
}

.opa-stories::before {
    display: none;
}

.opa-story-photo img {
    aspect-ratio: 4 / 3;
}

/* ===== 依 mock.pdf 逐元素校正字級／尺寸（1200 畫布 px） ===== */

/* 方案卡的主字：原稿 45.6px，現況 30px —— 差最多的一項 */
.opa-plan-big img {
    height: min(3.8vw, 45.6px);
}

/* STEP1〜4 標籤：原稿 27.1px */
.opa-step-no {
    font-size: min(2.258vw, 27.1px);
}

/* 4つのステップ 膠囊：原稿 43.2px（小字同比例放大） */
/* 膠囊依原稿重新校正：字級 40.6px、字距 0、上下內距 19.1px */
.opa-steps-banner {
    padding: min(1.592vw, 19.1px) min(4.217vw, 50.6px);
    /* 下限 15px 是實測「不折行所需膠囊寬」定的（360px 的機子剛好一行） */
    font-size: clamp(15px, 3.383vw, 40.6px);
    line-height: 1;
    letter-spacing: 0;
}

/* 膠囊「卵子提供をご検討中の方へ」：原稿 37.4px */
.opa-reco-pill {
    font-size: min(3.117vw, 37.4px);
}

/* 標題向量圖以墨跡實寬 859px 對位（含兩側小花） */
.opa-points-head img {
    max-width: min(71.583vw, 859px);
}

/* 標題必須單行，文案變長後在不折行的前提下取最大字級 24px */
.opa-step-arrow span {
    font-size: min(2vw, 24px);
    white-space: nowrap;
}

/* STEP2 比其他三格長 4 字，單獨降到 20px 才不會壓到斜切邊；
   斜率取 1.6vw 是因為兩端楔形固定 26px、不隨 vw 縮 */
@media (min-width: 641px) {
    .opa-step:nth-child(2) .opa-step-arrow span {
        font-size: min(1.6vw, 20px);
    }
}

/* 上面那條寫在檔尾會蓋掉 @media 的 15px，這裡把窄版的值補回檔尾 */
@media (max-width: 640px) {
    /* 窄版放大到 22px：可用寬 225.7px，最長的 STEP2 墨跡 208.4px，還有餘裕 */
    .opa-step-arrow span {
        font-size: 22px;
    }

    /* 補 14px 下限；640px 端點是 2.258vw＝14.5px，接得上不會跳階 */
    .opa-step-no {
        font-size: clamp(14px, 2.258vw, 27.1px);
    }

    /* STEP2 較長，nowrap 在窄機會被切掉，用線性式壓字級、上限仍夾 22px */
    .opa-step:nth-child(2) .opa-step-arrow span {
        font-size: clamp(15px, calc(10.23vw - 15.2px), 22px);
    }
}

/* 字距降到 4.6，行寬才對上原稿的 278 單位 */
.opa-ribbon-txt {
    letter-spacing: 4.6px;
}

/* ===== 縱向節奏：逐段對照 mock.pdf 的行間距校正 ===== */

/* テーマ chip：原稿 18.1px */
.opa-point-tag {
    font-size: min(1.508vw, 18.1px);
}

/* 副標 → テーマ卡：原稿 96px，現況 60px */
.opa-points-grid {
    margin-top: min(6.5vw, 78px);
}

/* 卡片照片 → 卡標題：原稿 200px，現況 171px */
.opa-point-title {
    margin-top: min(3.417vw, 41px);
}

/* 旗籤 → 卡內小字：原稿 54px，現況 85px */
/* 改以「卡片上框線→小字字身頂 40px」對位；下限是把窄版接回來 */
.opa-plan {
    padding-top: clamp(22px, 2.667vw, 32px);
}

/* 卡標題 → 4つのステップ：原稿 167px，現況 195px */
.opa-steps {
    padding-top: min(4.167vw, 50px);
}

/* ステップ膠囊 → STEP1：原稿 106px，現況 162px */
.opa-steps-row {
    margin-top: min(1vw, 12px);
}

/* 第二輪縱向微調（單位同上，皆為 1200 畫布 px） */

/* 膠囊 → 內文：原稿 106，現況 119 */
.opa-reco-txt {
    margin-top: min(2.483vw, 29.8px);
}

/* 內文 → 旗籤：原稿 170，現況 147 */
.opa-plans {
    padding-top: min(7.5vw, 90px);
}

/* 標題 → 副標：原稿 67，現況 88 */
.opa-points-sub {
    margin-top: max(-0.75vw, -9px);
}

/* ステップ膠囊 → STEP1：原稿 106，現況 126 */
.opa-steps-row {
    margin-top: max(-0.667vw, -8px);
}

/* ===== 關於茂盛區：依 mock.pdf 實測校正（1200 畫布 px） ===== */
.opa-about-grid {
    grid-template-columns: min(50.917vw, 611px) min(30.333vw, 364px);
    justify-content: center;
    gap: min(6.333vw, 76px);
    max-width: none;
}

.opa-about-txt {
    max-width: min(41.75vw, 501px);
    margin-inline: auto;
    font-size: min(1.833vw, 22px);
}

.opa-about-photo {
    width: min(34.833vw, 418px);
    max-width: 100%;
}

/* ===== 頁尾問合區：依 0827 新稿實測校正，各段換算成 vw 合計 100vw ===== */
.opa-contact-card {
    justify-content: center;
    gap: min(3.292vw, 39.5px);
}

/* 左右不對稱的內距只在橫排時成立，≤760px 另給一組；必須排檔尾才蓋得過 */
@media (min-width: 761px) {
    .opa-contact-card {
        padding-inline: min(3.017vw, 36.2px) min(7.95vw, 95.4px);
    }
}

@media (max-width: 760px) {
    .opa-contact-card {
        gap: min(5vw, 60px);
        padding-inline: min(4.667vw, 56px);
    }
}

/* 左欄 logo 與插圖置中在同一條軸，欄寬取較寬的 logo */
.opa-contact-aside {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    width: min(22.417vw, 269px);
}

.opa-contact-illo {
    width: min(13.117vw, 157.4px);
    flex: none;
}

.opa-contact-body {
    width: min(63.333vw, 760px);
    max-width: 100%;
}

.opa-contact-head {
    font-size: min(2.95vw, 35.4px);
}

.opa-contact-label {
    width: min(8.5vw, 102px);
    font-size: min(1.842vw, 22.1px);
}

.opa-contact-row {
    font-size: min(2.317vw, 27.8px);
}

.opa-contact-links .opa-ghost-btn {
    width: min(25.917vw, 311px);
    font-size: min(2.183vw, 26.2px);
}

/* 頁尾配色依原稿取樣：標籤與底線 #E39C9C、兩顆按鈕是淡橘實心 */
.opa-contact-label {
    background: #e39c9c;
    color: #fff;
}

.opa-contact-head {
    border-bottom-color: #e39c9c;
}

.opa-contact-links .opa-ghost-btn {
    background: #ffe6d8;
    border-color: #ffe6d8;
    color: #4a443c;
}

.opa-contact-links .opa-ghost-btn--pink {
    background: #ffe6d8;
    border-color: #ffe6d8;
}

/* ===== 下半頁依 mock.pdf 校正（1200 畫布 px） ===== */

/* 1) 成功案例區恢復成米色底 + 白色大圓（圓直徑＝畫布寬的 120%） */
.opa-stories {
    background: var(--o-cream);
    clip-path: none;
    box-shadow: none;
    overflow: hidden;
}

/* 白底要蓋到卡片下方：圓做不到（底部會提早收窄），改成滿版白塊＋底部橢圓弧 */
.opa-stories::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    z-index: 0;
    width: min(120vw, 1440px);
    /* 高度用 100%：窄版直排時區塊會高好幾倍，固定值只會蓋住底部一段 */
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0 0 50% 50% / 0 0 min(3.333vw, 40px) min(3.333vw, 40px);
    background: #fff;
    transform: translateX(-50%);
    top: auto;
    bottom: 0;
}

/* 2) 白帶改墊在跑馬燈底下（原稿：跑馬燈上下各留 30px 白） */
.opa-results-head::before {
    display: none;
}

.bsn-gallery {
    padding: min(2.5vw, 30px) 0;
    background: #fff;
}

/* 認證圖：原稿 CAP w309、ISO w364 */
.opa-cert:first-child .opa-cert-img {
    width: min(25.75vw, 309px);
}

.opa-cert:last-child .opa-cert-img {
    width: min(30.333vw, 364px);
}

/* 照片帶高依原稿的 221px（現況 366 高了六成） */
.bsn-gallery-img img {
    height: min(18.417vw, 221px);
}

/* 防橫向捲軸的責任移到 html（裁在視窗），body 解除裁切，色塊才能出血 */
html {
    overflow-x: clip;
}

body.opa-v2 {
    overflow-x: visible;
}

/* 舊 Safari 不支援 overflow: clip 的後備；用 @supports not 圈住，新瀏覽器整塊跳過 */
@supports not (overflow-x: clip) {
    body.opa-v2 {
        overflow-x: hidden;
    }
}

/* overflow-clip-margin 實測沒生效，html 已在視窗邊界裁，這層直接放開 */
.opa-mid {
    overflow: visible;
}

/* 原稿的色塊本來就切在畫布右緣，這裡接一塊同色延伸到視窗外 */
.opa-mid::after {
    content: '';
    position: absolute;
    left: 100%;
    z-index: 0;
    width: 50vw;
    top: calc(min(4vw, 48px) - min(10.667vw, 128px));
    height: min(69.333vw, 832px);
    background: #fff9e1;
    pointer-events: none;
}

/* 色塊上緣伸進方案卡，把 .opa-plans 也納入定位並抬到色塊之上 */
.opa-plans {
    position: relative;
    z-index: 1;
}

/* ===== 第三輪縱向校正：改以「字身墨跡」為基準回補間距 ===== */
.opa-points-sub {
    margin-top: min(0.583vw, 7px);
}

.opa-points-grid {
    margin-top: min(8.5vw, 102px);
}

.opa-steps {
    padding-top: min(7.333vw, 88px);
}

/* 依指示再放鬆一級 42→60px（視覺偏好，不是校正）；下限 22px 接回窄版 */
.opa-steps-row {
    margin-top: clamp(22px, 5vw, 60px);
}

/* 標題圖：以珊瑚色字的墨跡寬對位（mock 764、現況 711），放大 1.08 倍 */
.opa-points-head img {
    max-width: min(76.917vw, 923px);
}

/* 墨跡基準的最後微調：導言底→膠囊頂 +8 過寬、膠囊底→內文頂 -12 過窄 */
.opa-reco-lead {
    margin-bottom: min(4.117vw, 49.4px);
}

.opa-reco-txt {
    margin-top: min(3.483vw, 41.8px);
}

/* 兩張卡的標題在原稿本來就不同字級，各自給高度；--opa-big-scale 是整體再縮的倍率 */
.opa-plans {
    --opa-big-scale: .92;
}

.opa-plan:nth-of-type(1) .opa-plan-big img {
    height: calc(clamp(26px, 3.702vw, 44.4px) * var(--opa-big-scale));
}

.opa-plan:nth-of-type(2) .opa-plan-big img {
    height: calc(clamp(24.7px, 3.507vw, 42.1px) * var(--opa-big-scale));
}

/* ===== 關於茂盛區：左右兩欄下緣對齊原稿（換院長照、按鈕壓在卡下緣、標題條與內距各自回推） ===== */

.opa-about-card {
    padding-top: clamp(20px, 2.642vw, 31.7px);
    /* 按鈕要露出卡外，所以卡片自己不留下內距 */
    padding-bottom: 0;
}

/* 負下距讓按鈕壓在粉色邊界上；必須先改成 block，inline 級的行盒吃不到 margin-bottom */
.opa-about-card .opa-ghost-btn--more {
    margin-inline: auto;
    /* 原稿露出 25.7px＝膠囊寬的 8.26%，用 --pw 的比例寫窄版才會等比 */
    margin-bottom: calc(var(--pw) * -.0826);
}

.opa-about-title {
    padding: clamp(4px, 0.5vw, 6px) clamp(24px, 4.5vw, 54px);
}

.opa-about-title img {
    width: min(34.333vw, 412px);
}

.opa-about-certs {
    gap: clamp(20px, 3.333vw, 40px);
}

.opa-cert h3 {
    margin-bottom: clamp(14px, 2.583vw, 31px);
}

/* 窄版重設：上面那批 vw 覆寫寫在 @media 之後又沒下限，把單欄版整個蓋掉了 */
@media (max-width: 900px) {
    .opa-about-grid {
        grid-template-columns: 1fr;
        gap: clamp(28px, 4vw, 48px);
    }

    .opa-about-txt {
        max-width: 501px;
        font-size: clamp(14px, 2.6vw, 18px);
    }

    .opa-about-photo {
        /* 0828「手機版這圖片大一點」：改成吃滿卡片可用寬、上限提到 360 */
        width: min(360px, 100%);
    }

    .opa-about-certs {
        flex-direction: row;
        justify-content: center;
        gap: clamp(16px, 3vw, 34px);
    }

    .opa-cert {
        flex: 1;
        max-width: 340px;
    }

    .opa-cert h3 img {
        width: 100%;
        max-width: 228px;
    }

    .opa-cert:first-child .opa-cert-img,
    .opa-cert:last-child .opa-cert-img {
        width: 100%;
    }
}

/* ===== 客戶 0825 修改指示（260825修改.pptx） ===== */

/* 【指示 5】副標用 1em 繼承 h2，主標改大小副標會自動跟著 */
/* 【指示 7】原本內層 min 先算出 12.6px，比下限還小，等於永遠只有 13px */
.opa-enroll-notice {
    font-size: clamp(14px, 1.333vw, 16px);
}

.opa-note-h {
    font-size: clamp(15px, 1.5vw, 18px);
}

/* 【指示 8】「字體皆不需加粗」——報名表單的欄位標籤 */
.opa-enroll .gform_wrapper .gfield_label {
    font-weight: 400;
}

/* 【指示 10】「名稱及內文字體加大」——見證卡的姓名與內文 */
.opa-story-who {
    font-size: clamp(17px, 1.75vw, 21px);
}

.opa-story-txt {
    font-size: clamp(14px, 1.25vw, 15px);
}

/* 【指示 6】四步驟整塊下移 64px：只加 margin-top 沒用，要同時扣掉一樣的下內距 */
@media (min-width: 901px) {
    .opa-steps-row {
        margin-top: min(10.333vw, 124px);
    }

    .opa-steps {
        padding-bottom: min(1.667vw, 20px);
    }
}

/* 【指示 2】方案卡大標改活文字，尺寸接手原本 <img> 的高度與 --opa-big-scale */
.opa-plan-big {
    font-size: calc(clamp(26px, 3.8vw, 45.6px) * var(--opa-big-scale));
    /* 行高壓到 1，否則文字盒會比原本的 <img> 多出上下半行距 */
    line-height: 1;
}

/* Zen Maru Gothic 的「LINE」較寬，第二張卡乘 0.877 回到原稿比例 */
.opa-plan:nth-of-type(2) .opa-plan-big {
    font-size: calc(clamp(26px, 3.8vw, 45.6px) * var(--opa-big-scale) * .877);
}

/* 這兩條是給 <img> 用的，換成文字後已無作用，留著會誤導後人 —— 覆寫掉 */
.opa-plan:nth-of-type(1) .opa-plan-big img,
.opa-plan:nth-of-type(2) .opa-plan-big img {
    height: auto;
}

/* ===== 4つのポイント：依 0826 新設計稿改版（插圖絕對定位、刻意溢出面板） ===== */

.opa-points-rule {
    width: min(74.75vw, 897px);
    margin: min(2.5vw, 30px) auto 0;
    border-top: 3px dotted #df958f;
}

.opa-points-panel {
    position: relative;
    width: min(81.917vw, 983px);
    margin: min(3.083vw, 37px) auto 0;
    /* 左右內距不對稱是原稿如此；右邊給到 76px 第一行就會折行 */
    padding: clamp(24px, 3.225vw, 38.7px) clamp(16px, 4.25vw, 51px) clamp(24px, 3.408vw, 40.9px) clamp(20px, 6.333vw, 76px);
    border-radius: clamp(10px, 1.333vw, 16px);
    background: #f9faf9;
    text-align: left;
}

.opa-point-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.opa-point-list li {
    position: relative;
    padding-left: clamp(18px, 1.917vw, 23px);
    font-size: clamp(15px, 2.333vw, 28px);
    line-height: 1;
    color: #97816e;
}

.opa-point-list li + li {
    /* 行距 58.9px 扣掉字身 28px */
    margin-top: clamp(14px, 2.575vw, 30.9px);
}

.opa-point-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: clamp(5px, .667vw, 8px);
    height: clamp(5px, .667vw, 8px);
    border-radius: 50%;
    background: currentColor;
}

.opa-points-illo {
    position: absolute;
    right: clamp(12px, 3.417vw, 41px);
    top: clamp(90px, 13.367vw, 160.4px);
    width: min(28.917vw, 347px);
    height: auto;
    pointer-events: none;
}

/* 插圖溢出面板 124px，區塊下緣要接得住，否則會壓到下一區 */
.opa-points {
    padding-bottom: clamp(120px, 14.5vw, 174px);
}

/* 窄版插圖回到文件流排在條列下方，否則會被折行的文字壓住 */
@media (max-width: 760px) {
    .opa-points-illo {
        position: static;
        display: block;
        width: min(58vw, 240px);
        /* 0828「離上面距離多一點」：下限拉到 28px（桌機是絕對定位，不受影響） */
        margin: clamp(28px, 4.5vw, 36px) 0 0 auto;
    }

    .opa-points {
        padding-bottom: clamp(48px, 8vw, 96px);
    }
}

/* ===== 【13】「要卡在邊界」：改回活文字，與頁尾兩顆共用同一個元件 =====
   0827 新稿這顆只有文字＋箭頭圓，沒有底線與手勢；尺寸掛在 --pw（膠囊寬）上等比縮放 */
.opa-ghost-btn--more {
    /* CorporateLogo 子集缺 さ・ら・詳・く，會混粗細，改用備援圓體 */
    font-family: var(--o-font);
    /* block 級才吃得到 .opa-about-card 那條負 margin-bottom（inline 級是行盒） */
    display: flex;
    transition: translate .28s cubic-bezier(.34, 1.3, .64, 1),
        scale .28s cubic-bezier(.34, 1.3, .64, 1),
        box-shadow .28s ease;
}

.opa-ghost-btn--more:hover {
    /* 關掉 .opa-ghost-btn:hover 的位移（改用 translate/scale，語彙同方案卡） */
    transform: none;

    translate: 0 -3px;
    scale: 1.03;
    /* 白環得一起帶著，否則一滑過去外環就不見了 */
    box-shadow: 0 0 0 calc(var(--pw) * .0299) #fff, 0 6px 14px rgba(120, 100, 80, .16);
}

@media (prefers-reduced-motion: reduce) {
    .opa-ghost-btn--more:hover {
        translate: none;
        scale: none;
    }
}

/* 拿掉 .opa-plans 的底色：它蓋在黃色色塊上會塗出一個直角缺口（html 已鋪同色） */
.opa-plans {
    background: transparent;
}

/* ===== 頁尾兩顆按鈕：補回原稿的白色外環、底線與箭頭圓 =====
   尺寸取自 opa-d-morebtn.svg 的座標（pt 換算 x4/3 到 1200 畫布） */
.opa-contact-links .opa-ghost-btn,
.opa-ghost-btn--more {
    --pw: min(25.917vw, 311px);
    position: relative;
    justify-content: center;
    gap: 0;
    width: var(--pw);
    height: calc(var(--pw) * .2016);
    padding: 0;
    border: 0;
    background: #ffe6d8;
    box-shadow: 0 0 0 calc(var(--pw) * .0299) #fff;
    color: #545454;
    font-size: calc(var(--pw) * .0842);
    /* 字距 .145em：基礎的 .1em 讓三顆的墨跡都比原稿窄 3〜5% */
    letter-spacing: .145em;
}

/* 依 0828 指示：三顆按鈕都不要底線（原稿的頁尾兩顆是有底線的，這裡刻意不照稿）。 */
.opa-contact-links .opa-ghost-btn,
.opa-ghost-btn--more {
    text-decoration: none;
}

/* :hover 那條會整條換掉 box-shadow，白環得一起帶著，否則一滑過去就不見 */
.opa-contact-links .opa-ghost-btn:hover {
    box-shadow: 0 0 0 calc(var(--pw) * .0299) #fff, 0 6px 14px rgba(120, 100, 80, .16);
}

/* 0827 指示【1】「不要手」：素材改成只有箭頭圓，三顆共用同一條 */
.opa-contact-links .opa-ghost-btn::after,
.opa-ghost-btn--more::after {
    content: '';
    position: absolute;
    /* 尺寸掛在 --pw 上，否則 --more 窄版放大膠囊時箭頭圓不會跟著長大 */
    right: calc(var(--pw) * .0884);
    top: 50%;
    translate: 0 -50%;
    width: calc(var(--pw) * .0945);
    height: calc(var(--pw) * .0945);
    background: url("assets/images/opa-d-btnchevron.svg") no-repeat center / contain;
    pointer-events: none;
}

/* 頁尾左欄的主站 logo（原稿 269x56px），寬度吃滿欄寬 */
.opa-contact-logo {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: min(4vw, 48px);
}

/* 用 space-between 把 ISO 卡推到欄底，兩欄下緣才切齊（窄版是 row，不能套） */
@media (min-width: 901px) {
    .opa-about-certs {
        justify-content: space-between;
    }
}

/* 手機版整頁被擠出右邊的元凶是 .opa-mid-blob 的出血，窄版直接裁在欄邊；
   用 clip 不用 hidden，hidden 會讓另一軸多出一個捲動容器 */
@media (max-width: 900px) {
    .opa-mid {
        overflow-x: clip;
    }
}

/* ≤1200px 時 body 已經滿版，兩側潑色的漸層補的是不存在的空白，直接關掉 */
@media (max-width: 1200px) {

    .opa-hero::before,
    .opa-hero::after {
        content: none;
    }
}

/* ===== 村上 0827 指示（Notion「茂盛問題」），標號對應該篇 13 條 ===== */

/* 【7】「不要有空格」：兩者同字級之後 gap 就變成明顯空白 */
.opa-steps-banner {
    gap: 0;
}

/* 【9】「粗度 400」：補上選項與同意標籤（欄位標籤 0825 已改過） */
.opa-enroll .gform_wrapper .gfield_radio label,
.opa-enroll .gform_wrapper .ginput_container_consent label {
    font-weight: 400;
}

/* 【4】「字太小」：回到原稿的 672.7px（線上小了 11%） */
.opa-points-sub img {
    width: min(56.058vw, 672.7px);
    max-width: 100%;
}

/* 【10】【11】【12】「加大」：先補到原稿再統一乘 1.12（副標已接近容器寬，只乘 1.06） */
.opa-stories-head img {
    width: min(53.167vw, 638px);
}

.opa-results-title img {
    width: min(55vw, 660px);
}

.opa-results-sub img {
    width: min(74.417vw, 893px);
}

.opa-about-title img {
    width: min(38.417vw, 461px);
}

/* 白條內距收到 34px，圖才不會被 max-width: 100% 卡住放不大 */
.opa-about-title {
    padding-inline: clamp(20px, 2.833vw, 34px);
}

@media (max-width: 900px) {

    /* 【3】「標籤太小」：375px 下原本只剩 39.7px，放大到約 90px */
    .opa-plan-flag,
    .opa-plan-fab {
        --fw: min(24vw, 100px);
    }

    /* 【5】「這邊文字排版」：折行後兩行長度差很多，交給瀏覽器平衡 */
    .opa-point-list li {
        text-wrap: balance;
    }

    /* 【6】「圖置中」——母子插圖窄版原本靠右（margin-left: auto）。 */
    .opa-points-illo {
        margin-inline: auto;
    }

    /* 【14】「手機版這圖隱藏 換 logo」——望遠鏡插圖收起來，只留 logo。 */
    .opa-contact-illo {
        display: none;
    }

    /* 插圖收起後 logo 是左欄唯一的元素，改由 logo 自己定尺寸並置中 */
    .opa-contact-aside {
        width: auto;
        max-width: 100%;
    }

    .opa-contact-logo {
        /* 0828「logo 也大點」：卡片直排後可用寬有 340，放到 min(78vw, 300px) */
        width: min(78vw, 300px);
        margin-inline: auto;
        margin-bottom: min(4vw, 24px);
    }

    /* 【8】「手機版隱藏這個」——報名區上方的手寫弧線字與緞帶。 */
    .opa-enroll-head {
        display: none;
    }

    /* 0828「認證區塊往下一點」：按鈕露出粉卡下緣會吃掉大半 gap，補 32px 上距 */
    .opa-about-certs {
        margin-top: 32px;
    }

    /* 0828「手機版往上移」：緞帶收起後三段靜態間距 114px 收成 40px */
    .opa-enroll {
        padding-top: 16px;
        /* 0828「寬度調更寬」：區塊與白面板兩層內距一起收（24→12、18→10） */
        padding-inline: 12px;
    }

    .opa-enroll-formcol {
        padding-inline: 10px;
    }

    .opa-enroll-grid {
        margin-top: 0;
    }

    .opa-enroll-formcol {
        padding-top: 16px;
    }

    /* 0828「上下距離還是太多」：交界最大一塊在 .opa-steps 的下內距，三段收成 56px */
    .opa-steps {
        padding-bottom: 24px;
    }

    /* 窄版只動 --pw，膠囊高／字級／箭頭圓會一起等比長大；
       必須留在檔尾這個 @media，否則被共用元件那條吃掉 */
    .opa-contact-links .opa-ghost-btn,
    .opa-ghost-btn--more {
        --pw: min(60vw, 311px);
    }

    /* 0828 窄版放大：左右內距 24→14 換可用寬，兩張圖再各撐到 92% / 100% */
    .opa-results-head {
        padding-inline: 14px;
    }

    .opa-results-title img {
        width: 92%;
    }

    .opa-results-sub img {
        width: 100%;
    }

    /* 成功案例標題同樣是向量圖，窄版比照 results 撐滿可用寬 */
    .opa-stories-head img {
        width: 92%;
    }

    /* 0828：桌機的 vw 等比縮到 375px 只剩 8.6px，補 15px 下限與條列同級 */
    .opa-reco-txt {
        font-size: clamp(15px, 2.3vw, 27.6px);
    }
}

/* ≤640px 卡片改上下排，旗籤與黃圓的突出量要夾在 24px，否則會壓到上一張卡 */
@media (max-width: 640px) {
    .opa-plan-flag {
        top: calc(-1 * min(var(--fw) * .3701, 24px));
    }

    .opa-plan-fab {
        top: calc(-1 * min(var(--fw) * .3858, 24px));
    }

    /* 0828：懸掛縮排（padding-left ＋ 等量負 text-indent），行高折行後放到 1.6 */
    .opa-point-list li {
        padding-left: calc(clamp(18px, 1.917vw, 23px) + 4.28em);
        text-indent: -4.28em;
        line-height: 1.6;
    }

    /* 圓點改對齊第一行中線（.8em），否則兩行時會掉到中間 */
    .opa-point-list li::before {
        top: .8em;
    }

    /* 面板吃滿區塊內寬，把置中餘白收回來，第一項才不會從兩行變三行 */
    .opa-points-panel {
        width: 100%;
    }
}

/* 0828「手機版字太小」：標題與副標是向量圖，只能用負邊距撐可用寬再吃滿；斷點取 480 */
@media (max-width: 480px) {
    .opa-points-head,
    .opa-points-sub {
        margin-inline: -10px;
    }

    .opa-points-head img,
    .opa-points-sub img {
        width: 100%;
        /* 只放開 width 沒用，上面那條的 max-width 要一起解 */
        max-width: 100%;
    }
}

/* 手機版導言貼齊標題下緣：桌機的 30px 上內距在窄螢幕看起來是一塊空白 */
@media (max-width: 480px) {
    .opa-reco {
        padding-top: 0;
    }
}

/* 0828：字級對齊 STEP 標題的 22px，超過 15px 一定折兩行（刻意取捨），
   配套是 text-wrap: balance ＋ 行高 1.35 */
@media (max-width: 480px) {
    .opa-steps-banner {
        padding-inline: 12px;
        font-size: min(5.867vw, 22px);
        line-height: 1.35;
        text-wrap: balance;
    }

    /* 兩片各自不折，唯一的斷點就落在「進める」之後 */
    .opa-steps-banner-txt > span {
        white-space: nowrap;
    }
}

/* 0828「這邊需要大一點」：內容欄先吃滿可用寬再放大字級，斷點與卡片改直排同一條線 */
@media (max-width: 760px) {
    .opa-contact-body {
        width: 100%;
    }

    /* 卡片左右內距 17.5→10，換 15px 可用寬讓標題排得下 */
    .opa-contact-card {
        padding-inline: 10px;
    }

    /* 0828「用成一行，字盡量放到最大」：F ≤ 5.556vw − 1.911px，取 −2.4px 留餘裕；
       不加 nowrap，真機算不準時折行比被切掉好 */
    .opa-contact-head {
        font-size: min(calc(5.556vw - 2.4px), 35.4px);
    }

    .opa-contact-row {
        font-size: 15px;
    }

    .opa-contact-label {
        /* 內距一起收到 10px，字級變小後「住所」「TEL」才放得下（width 是 border-box） */
        width: 56px;
        padding-inline: 10px;
        font-size: 12px;
    }
}

/* 0828 表單手機字級；輸入框一律 16px，iOS Safari 在 <16px 的欄位聚焦時會自動放大整頁 */
@media (max-width: 760px) {
    .opa-enroll .gform_wrapper .gfield_label {
        font-size: 16px;
    }

    /* 這兩個字級是 GF 用 CSS 變數算出來的，直接寫 font-size 會被框架蓋掉，要改變數 */
    .opa-enroll .gform_wrapper {
        --gf-ctrl-label-font-size-req: 14px;
        --gf-ctrl-btn-font-size: 17px;
    }

    /* GF 樣式表載入順序在主題之後，變數與高權重選擇器都追不上，只能 !important */
    .opa-enroll .gform_wrapper input[type="submit"].gform_button {
        font-size: 17px !important;
    }

    .opa-enroll .gform_wrapper input[type="text"],
    .opa-enroll .gform_wrapper input[type="email"],
    .opa-enroll .gform_wrapper input[type="tel"],
    .opa-enroll .gform_wrapper input[type="number"],
    .opa-enroll .gform_wrapper select,
    .opa-enroll .gform_wrapper textarea {
        font-size: 16px;
    }

    .opa-enroll .gform_wrapper .gfield_radio label,
    .opa-enroll .gform_wrapper .gfield_checkbox label {
        font-size: 16px;
    }

    .opa-enroll .gform_wrapper .ginput_container_consent label {
        font-size: 15px;
    }

    /* 驗證碼欄是 ID 選擇器（1,1,0），上面的類別選擇器贏不了，要另外指定 */
    .opa-enroll #at_captcha_input {
        font-size: 16px;
    }

    .opa-enroll-notice {
        font-size: 15px;
    }
}

/* 0828：擠的來源是字距不是行距，取 0.05em 折衷並把字級抬到 15px */
@media (max-width: 900px) {
    .opa-about-txt {
        font-size: 15px;
        line-height: 1.8;
        letter-spacing: .05em;
    }

    /* 0828「白色膠囊標題手機版放大」：必須放在檔案最後一個 @media，否則被前面同權重那條吃掉 */
    .opa-about-title img {
        width: min(76.533vw, 461px);
        /* 圖改 block 去掉 inline 的基線下伸空間，垂直置中交給 flex */
        display: block;
    }

    /* 0828 再放大一輪：內距 20→8 並用負邊距讓膠囊超出卡片內距，置中改用 flex */
    .opa-about-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: -14px;
        padding-inline: 8px;
    }
}

/* 0828「輪播可以大點」：照片是定高、寬度 auto，改成 clamp 下限 160px；必須放檔尾 */
.bsn-gallery-img img {
    height: clamp(160px, 18.417vw, 221px);
}

/* 照片改成連結，<a> 預設 inline 會讓 height:100% 失效，補回 block */
.bsn-gallery-img {
    display: block;
    cursor: zoom-in;
}

/* Cloudflare Turnstile 取代圖形驗證碼；widget 是固定 300x65 的 iframe */
.at-turnstile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: clamp(16px, 2.5vw, 28px) 0 clamp(14px, 2vw, 22px);
}

.at-turnstile-error {
    margin: 0;
    color: #c9576b;
    font-size: 14px;
    text-align: center;
}

/* 同意條款的連結已放進 <label> 內（見 functions.php），單行時 checkbox 用 center 對齊 */
.opa-enroll .gform_wrapper .ginput_container_consent {
    align-items: center;
}

/* 0831「（内容を読む）排在同意します後面」＝固定單行：nowrap 與下面的 clamp 是一組的；
   權重要拉到 0,5,1 並放在檔尾才蓋得過 */
.opa-enroll .gform_wrapper .ginput_container_consent label.gfield_consent_label {
    white-space: nowrap;
    font-size: clamp(12.4px, 3.3vw, 15px);
    line-height: 1.5;
}

/* 連結放在 <label> 內避免被擠到第二行；不勾到 checkbox 是靠 all.js 擋掉 */
.opa-consent-policy-link {
    color: #7a9fd4;
    font-size: .92em;
    text-decoration: none;
    white-space: nowrap;
}

.opa-consent-policy-link:hover {
    color: #5b83bd;
}