@font-face {
    font-family: Noto Sans JP;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets-fonts-NotoSansJP-400.woff2)format("woff2")
}

@font-face {
    font-family: Noto Sans JP;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets-fonts-NotoSansJP-700.woff2)format("woff2")
}

:root {
    --brand-rgb: 204, 1, 51;
    --brand: #cc0133;
    --brand-dark: #a00028;
    --brand-darker: #7a001e;
    --brand-light: #e8154d;
    --brand-bright: #ff1a52;
    --brand-subtle: rgba(var(--brand-rgb), .06);
    --brand-muted: rgba(var(--brand-rgb), .12);
    --brand-border: rgba(var(--brand-rgb), .24);
    --accent-eraberu: var(--brand);
    --accent-taiken: var(--gold-600);
    --accent-price: var(--brand);
    --accent-link: var(--brand);
    --gold-50: #fffbee;
    --gold-200: #f4db94;
    --gold-500: #c18e2f;
    --gold-600: #a1721f;
    --gold-bg: var(--gold-50);
    --gold-muted: #f4db9424;
    --gold-border: #a1721f47;
    --gold-border-strong: #a1721f66;
    --canvas: #f5f0f2;
    --canvas-warm: #fbf6f8;
    --canvas-deep: #ede6ea;
    --tab-canvas-eraberu: #fff0f3;
    --tab-canvas-taiken: #fcf4dd;
    --stage-black: #1a0307;
    --stage-dark: #320710;
    --stage-mid: #420a16;
    --stage-warm: #540d1c;
    --stage-curtain: #6e1023;
    --ink: #111;
    --ink-secondary: #555560;
    --ink-muted: #5a5a66;
    --ink-on-dark: #fff;
    --ink-on-dark-secondary: #ffffffb8;
    --ink-on-dark-muted: #ffffff7a;
    --surface: #fff;
    --surface-dim: #faf8f9;
    --surface-dimmer: #f0ecee;
    --surface-warm: #fff9f5;
    --border: #e8e4e6;
    --border-gold: #c18e2f33;
    --gradient-canvas: linear-gradient(165deg, var(--canvas-warm) 0%, var(--canvas) 45%, var(--canvas-deep) 100%);
    --gradient-hero-body: linear-gradient(180deg, var(--surface-warm) 0%, var(--surface) 100%);
    --gradient-stage: linear-gradient(168deg, var(--stage-black) 0%, var(--stage-dark) 25%, var(--stage-mid) 55%, var(--stage-warm) 85%, var(--stage-curtain) 100%);
    --gradient-brand: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 45%, var(--brand-dark) 100%);
    --gradient-brand-hover: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand) 45%, var(--brand-darker) 100%);
    --gradient-gold-shine: linear-gradient(90deg, transparent 0%, #ffffff59 50%, transparent 100%);
    --font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
    --font-display: var(--font-family);
    --tracking-display: .01em;
    --font-weight-regular: 400;
    --font-weight-medium: 400;
    --font-weight-semibold: 400;
    --font-weight-bold: 700;
    --font-weight-heavy: 700;
    --leading-tight: 1.4;
    --leading-snug: 1.5;
    --leading-normal: 1.65;
    --leading-relaxed: 1.75;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 18px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --heading-3: var(--text-xl);
    --heading-4: var(--text-lg);
    --text-fn-mark: 10px;
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --cta-size: 16px;
    --cta-pad-y: 14px;
    --cta-pad-x: 20px;
    --cta-min-h: 48px;
    --cta-radius: var(--r-md);
    --sec-padding-y: 36px;
    --sec-padding-x: 20px;
    --sec-gap-sm: 6px;
    --sec-gap-md: 24px;
    --sec-gap-lg: 32px;
    --sub-desc-mb: 20px;
    --sec-title-mb: 6px;
    --sec-desc-mb: 24px;
    --media-ratio-wide: 16 / 9;
    --card-pad-x: var(--space-lg);
    --card-pad-y: var(--space-lg);
    --card-gap: var(--space-md);
    --card-media-thumb-max: 168px;
    --quiz-pad-y: var(--space-xl);
    --quiz-pad-x: var(--space-lg);
    --quiz-stack-gap: var(--space-xl);
    --quiz-block-gap: var(--space-md);
    --price-hero-size: 28px;
    --icon-display: 56px;
    --icon-ui: 20px;
    --icon-tile: 48px;
    --fv-icon-wrap: 180px;
    --main-col-max: 100%;
    --header-h: 65px;
    --float-stack-tabs-top: var(--header-h);
    --tabs-bar-h: 72px;
    --cat-tabs-h: 0px;
    --float-stack-pad-x: var(--sec-padding-x);
    --float-stack-bar-pad-y: var(--space-sm);
    --float-stack-bar-pad-bottom-tight: var(--space-xs);
    --float-stack-cat-pad-top: var(--space-xs);
    --float-stack-cat-pad-bottom: var(--space-md);
    --float-stack-cat-gap: var(--space-xs);
    --float-stack-content-gap: var(--space-xl);
    --float-stack-anchor-gap: var(--space-lg);
    --cat-tabs-float-margin: var(--space-sm);
    --anchor-gap: 8px;
    --pillar-scroll-extra: 20px;
    --focus-ring: 2px solid var(--brand);
    --tracking-wide: .06em;
    --tracking-wider: .14em;
    --shadow-xs: 0 1px 2px #0000000a;
    --shadow-sm: 0 1px 4px #0000000f;
    --shadow-md: 0 4px 14px #00000014;
    --shadow-lg: 0 8px 28px #0000001a;
    --shadow-float: 0 8px 32px #0000002e, 0 2px 8px #00000014;
    --shadow-brand: 0 4px 20px rgba(var(--brand-rgb), .3);
    --shadow-brand-lg: 0 8px 32px rgba(var(--brand-rgb), .38);
    --shadow-gold: 0 2px 16px #c18e2f47;
    --shadow-canvas: 0 4px 24px #cc01330f;
    --shadow-stage: 0 8px 40px #5a14281f;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-full: 9999px;
    --ease: cubic-bezier(.25, .46, .45, .94);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --duration-fast: .2s;
    --duration-normal: .25s;
    --duration-slow: .35s;
    --layout-ease: cubic-bezier(.22, 1, .36, 1);
    --layout-ease-out: cubic-bezier(.33, 1, .68, 1);
    --layout-total-ms: 620;
    --layout-grid-duration: .48s;
    --layout-canvas-duration: .5s;
    --layout-chrome-duration: .4s;
    --layout-sidebar-duration: .38s;
    --layout-sidebar-content-duration: .34s;
    --layout-enter-canvas-delay: 60ms;
    --layout-enter-chrome-delay: .1s;
    --layout-enter-grid-delay: 0s;
    --layout-enter-sidebar-delay: .18s;
    --layout-enter-content-delay: .26s;
    --layout-enter-content-stagger: 80ms;
    --layout-exit-canvas-delay: 40ms;
    --layout-exit-chrome-delay: .1s;
    --layout-exit-grid-delay: .14s;
    --float-fade-duration: .3s;
    --glass-dark: #ffffff12;
    --glass-dark-hover: #ffffff1f;
    --glass-dark-border: #ffffff1f;
    --glass-dark-border-hover: #f4db944d;
    --disney-blue: #1b3c73;
    --disney-badge-bg: #ebf0f9;
    --partner-usj-blue: #0168d9;
    --cat-music-bg: #ede9fe;
    --cat-music-fg: #6d28d9;
    --cat-anime-bg: #fce7f3;
    --cat-anime-fg: #be185d;
    --cat-soccer-bg: #dbeafe;
    --cat-soccer-fg: #1d4ed8;
    --cat-baseball-bg: #fef3c7;
    --cat-baseball-fg: #b45309;
    --cat-themepark-bg: #e0f2fe;
    --cat-themepark-fg: #0369a1;
    --cat-other-bg: #f3f4f6;
    --cat-other-fg: #4b5563;
    --taiken-cat-icon-size: 36px;
    --taiken-cat-icon-glyph: 20px
}

@media (width>=428px) {
    :root {
        --text-xl: 22px;
        --text-2xl: 26px;
        --cta-size: 16px
    }
}

@media (width>=1024px) {
    :root {
        --main-col-max: 720px;
        --offer-cta-size: var(--text-base);
        --offer-cta-leading: 1.45;
        --quiz-pad-x: var(--space-xl);
        --quiz-pad-y: var(--space-2xl);
        --text-xs: 12px;
        --text-sm: 14px;
        --text-base: 16px;
        --text-md: 18px;
        --text-lg: 18px;
        --text-xl: 22px;
        --text-2xl: 26px;
        --cta-size: 18px;
        --cta-pad-y: 16px;
        --cta-min-h: 52px;
        --header-h: 73px
    }
}

@media (width>=1280px) {
    :root {
        --main-col-max: 780px
    }
}

@media (width>=1440px) {
    :root {
        --main-col-max: 840px
    }
}

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

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

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--ink);
    background: var(--surface);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow-x: hidden
}

.page-main {
    background: var(--surface);
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: 24px
}

img {
    max-width: 100%;
    display: block
}

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

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

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.skip-link {
    z-index: 1000;
    background: var(--brand);
    color: var(--ink-on-dark);
    font-size: var(--text-sm);
    border-radius: var(--r-md);
    padding: 12px 20px;
    font-weight: 700;
    text-decoration: none;
    position: absolute;
    left: -9999px
}

.skip-link:focus {
    top: 16px;
    left: 16px
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.header {
    z-index: 100;
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    background: #fffffff5;
    justify-content: space-between;
    align-items: center;
    width: calc(100% + 2px);
    margin-inline: -1px;
    padding: 10px 16px;
    display: flex;
    position: sticky;
    top: 0;
    box-shadow: 0 1px #cc01330a
}

.header-logo {
    align-items: center;
    margin: 0;
    display: flex
}

.header-logo-link {
    align-items: center;
    line-height: 0;
    display: flex
}

.header-logo-img {
    width: auto;
    height: 44px;
    display: block
}

@media (width>=1024px) {
    .header-logo-img {
        height: 52px
    }
}

.header-links {
    gap: 14px;
    display: flex
}

.header-links a {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    font-weight: var(--font-weight-semibold);
    transition: color var(--duration-fast)
}

.header-links a:hover {
    color: var(--brand)
}

.tabs-anchor {
    pointer-events: none;
    height: 0;
    overflow: visible
}

.tabs-bar {
    top: var(--float-stack-tabs-top, var(--header-h));
    z-index: 99;
    width: 100%;
    padding: var(--float-stack-bar-pad-y) var(--float-stack-pad-x);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--float-fade-duration) ease;
    background: var(--tab-canvas, #fffffff5);
    -webkit-backdrop-filter: blur(16px)saturate(1.2);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    position: fixed;
    left: 0
}

.tabs-bar.is-floating {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

html[data-cat-tabs-floating=true] .tabs-bar.is-floating {
    padding: var(--float-stack-bar-pad-y) var(--float-stack-pad-x) var(--float-stack-bar-pad-bottom-tight);
    border-bottom: none
}

.tabs-bar__track {
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    gap: 0;
    width: 100%;
    padding: 5px;
    display: flex;
    position: relative
}

.tabs-bar__track>[id^=pc-anchor-] {
    flex: 1;
    min-width: 0;
    display: flex
}

.tabs-bar__track>[id^=pc-anchor-] .tab-btn {
    width: 100%
}

.tabs-bar__indicator {
    top: 5px;
    left: var(--float-indicator-left, 5px);
    width: var(--float-indicator-width, calc(50% - 5px));
    border-radius: var(--r-full);
    background: var(--tab-canvas, var(--surface));
    border: 1px solid var(--border);
    height: calc(100% - 10px);
    box-shadow: none;
    transition: left .3s var(--ease), width .3s var(--ease);
    z-index: 0;
    pointer-events: none;
    position: absolute
}

.tabs-bar__indicator:before {
    content: "";
    background: var(--tab-accent, var(--brand));
    border-radius: 0 0 3px 3px;
    height: 3px;
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px
}

.tab-btn {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--ink-muted);
    text-align: center;
    z-index: 1;
    transition: color .35s var(--ease);
    flex: 1;
    padding: 14px 8px;
    position: relative
}

.tab-btn.active {
    color: var(--brand)
}

.tab-btn:after {
    content: "";
    background: var(--gradient-brand);
    height: 3px;
    transition: transform var(--duration-slow) var(--ease);
    box-shadow: 0 0 8px rgba(var(--brand-rgb), .3);
    border-radius: 2px;
    position: absolute;
    bottom: -1px;
    left: 20px;
    right: 20px;
    transform: scaleX(0)
}

.tab-btn.active:after {
    transform: scaleX(1)
}

.tabs-bar.is-floating .tab-btn {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    border-radius: var(--r-full);
    color: var(--ink-muted);
    letter-spacing: -.01em;
    min-height: 44px;
    transition: color .35s var(--ease), transform .35s var(--ease-out);
    padding: 11px 12px
}

.tabs-bar.is-floating .tab-btn.active {
    color: var(--brand);
    font-weight: var(--font-weight-heavy)
}

.tabs-bar.is-floating[data-active=b] .tab-btn.active {
    color: var(--gold-600)
}

.tabs-bar.is-floating .tab-btn:not(.active):hover {
    color: var(--ink-secondary)
}

.tabs-bar.is-floating .tab-btn:after,
.tab-panel {
    display: none
}

.tab-panel.active {
    display: block
}

.sec {
    padding: var(--sec-padding-y) var(--sec-padding-x)
}

.sec[id],
.hero-perk[id],
.exp-card[id],
.svc-head,
.svc-card[id],
#other-plan {
    scroll-margin-top: calc(var(--header-h) + var(--tabs-bar-h) + var(--cat-tabs-h) + var(--anchor-gap))
}

.sec-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    margin-bottom: var(--sec-title-mb);
    letter-spacing: var(--tracking-display);
    text-wrap: balance
}

.sec-title:not(:has(+.sec-desc)) {
    margin-bottom: var(--sec-gap-md)
}

.sec-title .phrase {
    display: inline-block
}

.sec-alt .sec-title {
    position: relative
}

.sec-desc {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--sec-desc-mb)
}

.sec-alt {
    background: var(--surface-dim);
    position: relative
}

.sec-alt:before {
    content: "";
    background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.footer {
    background: var(--surface-dim);
    text-align: center;
    border-top: 1px solid var(--border);
    padding: 28px 20px
}

.footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
    display: flex
}

.footer-links a {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    transition: color var(--duration-fast)
}

.footer-links a:hover {
    color: var(--brand)
}

.footer-copy {
    font-size: var(--text-xs);
    color: var(--ink-secondary)
}

.remote-promo {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.remote-promo-link {
    line-height: 0;
    display: block
}

.remote-promo-img {
    vertical-align: top;
    width: 100%;
    height: auto
}

.remote-promo .text-note+.text-note {
    margin-top: 0
}

.text-note {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-regular);
    margin: 0
}

.fn-ref {
    font-size: .7em;
    font-weight: var(--font-weight-regular);
    vertical-align: super;
    color: inherit;
    line-height: 1
}

.fn-mark {
    font-size: var(--text-fn-mark);
    color: var(--ink-muted);
    line-height: 1;
    font-weight: var(--font-weight-regular)
}

.fn-notes {
    margin-top: var(--sec-gap-sm);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-regular)
}

@media (prefers-reduced-motion:reduce) {
    .tabs-bar {
        transition: none
    }
}

.fv {
    position: relative;
    overflow: visible
}

.fv-head {
    background: var(--stage-black);
    width: calc(100% + 2px);
    margin-inline: -1px;
    line-height: 0;
    position: relative;
    overflow: hidden
}

.fv-banner-heading {
    margin: 0
}

.fv-banner-img {
    vertical-align: top;
    width: 100%;
    height: auto;
    display: block
}

.fv-body {
    background: var(--gradient-hero-body);
    padding: 22px 20px 0
}

.fv-sub {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    margin-bottom: var(--sec-gap-md);
    line-height: 1.8;
    font-weight: var(--font-weight-regular)
}

.fv-pillars-wrap {
    margin-bottom: 0;
    padding-bottom: 0
}

.fv-pillars {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 10px;
    display: grid;
    position: relative
}

@media (width>=1024px) {
    .fv-pillars {
        gap: 12px
    }
}

.fv-pillar {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: center;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 16px 10px 14px;
    display: flex;
    position: relative;
    overflow: hidden
}

.fv-pillar-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex
}

.fv-pillar:hover:not(.active),
.fv-pillar:focus-visible:not(.active) {
    box-shadow: none
}

.fv-pillar--eraberu:not(.active) {
    background: var(--tab-canvas-eraberu);
    border-color: var(--brand-border)
}

.fv-pillar--eraberu:not(.active):hover,
.fv-pillar--eraberu:not(.active):focus-visible {
    border-color: rgba(var(--brand-rgb), .4)
}

.fv-pillar--taiken:not(.active) {
    background: var(--tab-canvas-taiken);
    border-color: var(--gold-border)
}

.fv-pillar--taiken:not(.active):hover,
.fv-pillar--taiken:not(.active):focus-visible {
    border-color: var(--gold-500)
}

.fv-pillar.active {
    border-color: rgba(var(--brand-rgb), .35);
    box-shadow: none;
    background: var(--surface);
    z-index: 1
}

.fv-pillar.active:before {
    content: "";
    background: var(--gradient-brand);
    border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.fv-pillar--taiken.active:before {
    background: linear-gradient(90deg, var(--gold-600), var(--gold-500))
}

.fv-pillars:has(.fv-pillar.active) .fv-pillar:not(.active) {
    opacity: 1;
    filter: none;
    box-shadow: none
}

.fv-pillar-set {
    --fv-icon-row-h: var(--icon-tile);
    align-items: center;
    gap: var(--space-2xs);
    flex-direction: column;
    flex: auto;
    width: 100%;
    min-height: 0;
    display: flex
}

.fv-pillar-set .fv-pillar-desc {
    margin-bottom: var(--space-xs)
}

.fv-pillar-set .text-note {
    margin-top: var(--space-xs);
    text-align: center;
    margin-bottom: 0
}

.fv-pillar-set .fv-pillar-icon {
    width: 100%;
    min-height: 0;
    font-size: var(--price-hero-size);
    margin: auto 0 0
}

.fv-pillar-set .fv-pillar-icon--services,
.fv-pillar-set .fv-pillar-icon--taiken {
    width: 100%;
    min-height: var(--fv-icon-row-h)
}

.fv-pillar-icon {
    font-size: var(--price-hero-size);
    justify-content: center;
    align-items: flex-end;
    display: flex
}

.fv-pillar-icon--services,
.fv-pillar-icon--taiken {
    container-type: inline-size
}

.fv-pillar-icon--services {
    container-name: service-icons
}

.fv-pillar-icon--taiken {
    container-name: taiken-icons
}

.fv-pillar-icon-grid {
    gap: var(--space-xs);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.fv-pillar-icon-grid:not(.fv-pillar-icon-grid--taiken) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--fv-icon-row-h);
    height: auto;
    min-height: var(--fv-icon-row-h)
}

@container service-icons (width<=180px) {
    .fv-pillar-icon-grid:not(.fv-pillar-icon-grid--taiken) {
        grid-template-columns: repeat(2, var(--fv-icon-row-h));
        justify-content: center
    }
}

.fv-pillar-icon-grid--taiken {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--fv-icon-row-h);
    height: auto;
    min-height: var(--fv-icon-row-h);
    width: 100%
}

@container taiken-icons (width<=180px) {
    .fv-pillar-icon-grid--taiken {
        grid-template-columns: minmax(0, 1fr)
    }
}

.fv-pillar-icon-grid li {
    border-radius: 6px;
    min-width: 0;
    min-height: 0;
    overflow: hidden
}

.fv-pillar-icon-grid:not(.fv-pillar-icon-grid--taiken) li {
    height: var(--fv-icon-row-h);
    max-height: var(--fv-icon-row-h)
}

.fv-pillar-icon-grid:not(.fv-pillar-icon-grid--taiken) picture {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex
}

.fv-pillar-icon-grid:not(.fv-pillar-icon-grid--taiken) picture,
.fv-pillar-icon-grid:not(.fv-pillar-icon-grid--taiken) img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.fv-pillar.active .fv-pillar-icon--services,
.fv-pillar.active .fv-pillar-icon--taiken {
    width: 100%;
    box-shadow: none;
    background: 0 0;
    border: none
}

.fv-pillar-icon-grid--taiken li {
    height: var(--fv-icon-row-h);
    max-height: var(--fv-icon-row-h);
    padding: var(--space-xs) 6px;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    display: flex
}

.fv-pillar-icon-tile--disney {
    background: var(--surface);
    border: 1px solid var(--border)
}

.fv-pillar-icon-tile--usj {
    background: var(--partner-usj-blue)
}

.fv-pillar-icon-grid--taiken picture {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex
}

.fv-pillar-icon-grid--taiken img {
    object-fit: contain;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: block
}

.fv-pillar.active .fv-pillar-title {
    color: var(--brand)
}

.fv-pillar--taiken.active .fv-pillar-title {
    color: var(--gold-600)
}

.fv-pillar-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-display);
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.4
}

.fv-pillar-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.55;
    font-weight: var(--font-weight-regular);
    margin-bottom: 0
}

@media (width>=1024px) {
    .fv-pillar {
        padding: 20px 18px 18px
    }
}

html[data-active-tab=a] {
    --tab-canvas: var(--tab-canvas-eraberu);
    --tab-accent: var(--accent-eraberu)
}

html[data-active-tab=b] {
    --tab-canvas: var(--tab-canvas-taiken);
    --tab-accent: var(--accent-taiken)
}

html[data-active-tab] {
    --tab-frame-width: 2px
}

.fv-pillars-wrap {
    position: relative
}

@media (width<=1023px) {
    html[data-pillars-visible=true] .fv-pillars-wrap {
        margin-bottom: calc(-1 * var(--tab-frame-width, 2px))
    }

    html[data-pillars-visible=true] .fv-pillar.active {
        padding-bottom: calc(14px + var(--tab-frame-width, 2px))
    }

    html[data-pillars-visible=true] .fv-pillar.active:after {
        content: "";
        left: calc(-1 * var(--tab-frame-width, 2px));
        right: calc(-1 * var(--tab-frame-width, 2px));
        bottom: calc(-1 * var(--tab-frame-width, 2px));
        height: var(--tab-frame-width, 2px);
        background: var(--tab-canvas);
        pointer-events: none;
        z-index: 6;
        position: absolute
    }
}

html[data-pillars-visible=true] .fv-pillar,
html[data-pillars-visible=true] .fv-pillar * {
    box-shadow: none;
    text-shadow: none;
    transition: none
}

html[data-pillars-visible=true] .fv-pillar {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    filter: none
}

html[data-pillars-visible=true] .fv-pillar.active {
    background: var(--tab-canvas);
    border: var(--tab-frame-width, 2px) solid var(--tab-accent);
    box-shadow: none;
    z-index: 5;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 14px;
    position: relative;
    transform: none
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar:not(.active) {
    z-index: 1;
    box-shadow: none;
    opacity: 1;
    filter: none;
    border: none;
    position: relative;
    transform: none
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar--eraberu:not(.active) {
    background: var(--tab-canvas-eraberu)
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar--taiken:not(.active) {
    background: var(--tab-canvas-taiken)
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar:not(.active):before {
    content: "";
    top: 0;
    left: calc(-1 * var(--tab-frame-width, 2px));
    right: calc(-1 * var(--tab-frame-width, 2px));
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(var(--border), var(--border)) left top / var(--tab-frame-width, 2px) calc(100% + var(--tab-frame-width, 2px)) no-repeat, linear-gradient(var(--border), var(--border)) right top / var(--tab-frame-width, 2px) calc(100% + var(--tab-frame-width, 2px)) no-repeat, linear-gradient(var(--border), var(--border)) left bottom / calc(var(--tab-frame-width, 2px) * 2) var(--tab-frame-width, 2px) no-repeat, linear-gradient(var(--border), var(--border)) right bottom / calc(var(--tab-frame-width, 2px) * 2) var(--tab-frame-width, 2px) no-repeat;
    position: absolute;
    bottom: 0
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar:not(.active) .fv-pillar-title {
    color: var(--ink-secondary)
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar--eraberu:not(.active) .fv-pillar-title {
    color: var(--brand-dark)
}

html[data-pillars-visible=true] .fv-pillars:has(.fv-pillar.active) .fv-pillar--taiken:not(.active) .fv-pillar-title {
    color: var(--ink-secondary)
}

.tab-panel.active>.sec:first-child {
    background: var(--surface);
    margin-top: 0;
    padding-top: 0;
    position: relative
}

.tab-panel.active>.sec:first-child .sec-flow {
    z-index: 2;
    padding-top: var(--sec-gap-md);
    position: relative
}

html[data-pillars-visible=true] .tab-panel.active {
    background: var(--surface);
    margin-top: 0
}

.tab-panel.active>.sec:first-child .tab-junction {
    z-index: 0;
    background: linear-gradient(180deg, var(--tab-canvas) 0%, var(--tab-canvas) 100px, var(--surface) 220px);
    pointer-events: none;
    height: 220px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.pillar-junction[hidden] {
    display: none
}

.pillar-junction__seg {
    z-index: 50;
    height: var(--tab-frame-width, 2px);
    background: var(--tab-accent);
    pointer-events: none;
    position: fixed
}

html[data-pillars-visible=true] .tab-panel.active>.sec:first-child:before,
html[data-pillars-visible=true] .tab-panel.active>.sec:first-child:after {
    display: none
}

html[data-pillars-visible=false] .tab-panel.active>.sec:first-child:before {
    content: "";
    top: 0;
    left: calc(-1 * var(--tab-frame-width, 2px));
    right: calc(-1 * var(--tab-frame-width, 2px));
    z-index: 1;
    height: var(--tab-frame-width, 2px);
    background: var(--tab-accent);
    pointer-events: none;
    position: absolute
}

html[data-pillars-visible=false] .tab-panel.active>.sec:first-child:after {
    display: none
}

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

    html[data-pillars-visible=true] .fv-pillar,
    html[data-pillars-visible=true] .fv-pillar * {
        transition: none
    }
}

.eraberu-overview {
    background: linear-gradient(135deg, var(--brand-subtle) 0%, var(--surface-warm) 100%);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sec-gap-lg);
    box-shadow: var(--shadow-xs);
    padding: 24px 22px
}

.eraberu-overview p {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-weight-regular)
}

.eraberu-overview strong {
    color: var(--brand);
    font-weight: var(--font-weight-bold)
}

.eraberu-overview+.fn-notes {
    margin-top: calc(-1 * var(--space-md));
    margin-bottom: var(--sec-gap-md)
}

.eraberu-logos {
    --eraberu-logo-box-h: 40px;
    gap: var(--space-sm);
    margin: var(--space-lg) 0 0;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    list-style: none;
    display: grid
}

.eraberu-logo {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    position: relative
}

.eraberu-logo>a {
    min-height: var(--icon-display);
    padding: var(--space-sm) var(--space-md);
    color: inherit;
    border-radius: inherit;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex
}

.eraberu-logo>a:hover {
    background: var(--surface-dim)
}

.eraberu-logo>a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

.eraberu-logo .fn-mark {
    top: var(--space-xs);
    position: absolute;
    right: 6px
}

.eraberu-logo picture {
    width: 100%;
    height: var(--eraberu-logo-box-h);
    justify-content: center;
    align-items: center;
    display: flex
}

.eraberu-logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--eraberu-logo-box-h);
    object-fit: contain;
    display: block
}

.eraberu-logo--lemino img,
.eraberu-logo--danime img {
    max-height: 20px
}

.eraberu-logo--nba img {
    max-height: 32px
}

.eraberu-logo--dazn img {
    max-height: var(--eraberu-logo-box-h);
    max-width: var(--eraberu-logo-box-h)
}

.quiz-wrap {
    background: var(--gradient-stage);
    border: 1.5px solid var(--glass-dark-border);
    border-radius: var(--r-xl);
    padding: var(--quiz-pad-y) var(--quiz-pad-x);
    color: var(--ink-on-dark);
    box-shadow: var(--shadow-stage);
    position: relative;
    overflow: hidden
}

.quiz-wrap:before {
    content: "";
    background: var(--gradient-brand);
    pointer-events: none;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.quiz-wrap>* {
    z-index: 1;
    position: relative
}

.quiz-heading {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    margin-top: 0;
    margin-bottom: var(--sec-gap-md);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
    color: var(--ink-on-dark-secondary)
}

.quiz-step {
    display: none
}

.quiz-step.active {
    animation: fadeUp .35s var(--ease);
    display: block
}

.quiz-progress {
    margin-bottom: var(--space-sm);
    gap: 5px;
    display: flex
}

.quiz-dot {
    background: #ffffff26;
    border-radius: 2px;
    flex: 1;
    height: 3px;
    transition: background .3s
}

.quiz-dot.on {
    background: var(--gradient-brand)
}

.quiz-step-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    color: var(--gold-200);
    margin: 0 0 var(--space-sm)
}

.quiz-q {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--sub-desc-mb);
    line-height: 1.55
}

.quiz-opts {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.quiz-opt {
    background: var(--glass-dark);
    border: 1px solid var(--glass-dark-border);
    border-radius: var(--r-md);
    min-height: 52px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-regular);
    color: var(--ink-on-dark);
    text-align: left;
    transition: all .25s var(--ease);
    border-left: 2px solid #0000;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    display: flex
}

.quiz-opt--rich {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 18px
}

.quiz-opt-title {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    display: block
}

.quiz-opt-desc {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    color: var(--ink-on-dark-muted);
    line-height: 1.45;
    display: block
}

.quiz-opt:hover {
    background: var(--glass-dark-hover);
    border-color: var(--glass-dark-border-hover);
    border-left-color: var(--brand);
    box-shadow: var(--shadow-xs);
    border-left-width: 2px
}

.quiz-result {
    display: none;
    position: relative
}

.quiz-result.active {
    animation: fadeUp .4s var(--ease);
    display: block
}

.quiz-confetti {
    pointer-events: none;
    z-index: 2;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.quiz-confetti.is-active .confetti-dot {
    animation: confettiFall .8s var(--ease-out) forwards
}

.confetti-dot {
    opacity: 0;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 20%
}

@media (prefers-reduced-motion:reduce) {
    .quiz-confetti.is-active .confetti-dot {
        opacity: 0;
        animation: none
    }
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translate(0)scale(1)
    }

    to {
        opacity: 0;
        transform: translate(var(--cx), var(--cy)) scale(.3)
    }
}

.quiz-result-combo {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-heavy);
    margin-bottom: var(--quiz-block-gap);
    color: var(--gold-200)
}

.quiz-result-reason {
    margin: 0 0 var(--quiz-stack-gap);
    display: block
}

.quiz-result-reason .quiz-copy-lead {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    color: var(--ink-on-dark);
    display: block
}

.quiz-copy-lead {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--ink-on-dark);
    line-height: 1.55;
    display: block
}

.quiz-copy-body {
    white-space: pre-line;
    display: block
}

.quiz-result-bonus {
    margin: 0 0 var(--quiz-stack-gap);
    padding: var(--space-lg);
    border-radius: var(--r-md);
    background: #ffffff0f;
    border: 1px solid #f4db9438
}

.quiz-result-bonus-label {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    color: var(--gold-200)
}

.quiz-result-bonus-text {
    gap: var(--space-sm);
    margin: 0 0 var(--quiz-block-gap);
    font-size: var(--text-sm);
    color: var(--ink-on-dark-secondary);
    flex-direction: column;
    line-height: 1.65;
    display: flex
}

.quiz-result-bonus-text .quiz-copy-lead {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--ink-on-dark);
    line-height: 1.45
}

.quiz-result-bonus-text .quiz-copy-body {
    font-size: var(--text-sm);
    color: var(--ink-on-dark-secondary)
}

.quiz-result-bonus-link {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gold-200);
    text-decoration: none;
    display: inline-block
}

.quiz-result-bonus-links {
    align-items: flex-start;
    gap: var(--space-sm);
    flex-direction: column;
    display: flex
}

.quiz-result-bonus-link:hover {
    color: var(--gold-200);
    text-decoration: underline
}

.quiz-result-actions {
    gap: var(--quiz-block-gap);
    margin-top: var(--quiz-stack-gap);
    flex-direction: column;
    display: flex
}

.quiz-restart {
    font-size: var(--text-sm);
    color: var(--ink-on-dark-muted);
    font-weight: var(--font-weight-regular);
    align-self: center;
    padding: 6px 0;
    display: inline-block
}

.quiz-restart:hover {
    color: var(--gold-200)
}

.cmp-scroll {
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px 6px;
    overflow-x: auto
}

.cmp-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 540px;
    font-size: var(--text-base);
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-sm);
    overflow: hidden
}

@media (width>=960px) {
    .cmp-table {
        min-width: 0
    }
}

.cmp-hint[hidden] {
    display: none
}

.cmp-table th,
.cmp-table td {
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-weight: var(--font-weight-regular);
    word-break: keep-all;
    padding: 14px 12px;
    line-height: 1.6
}

.cmp-table thead th {
    background: var(--surface-dimmer);
    color: var(--ink);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    border-bottom: 1px solid var(--border);
    padding-right: 22px;
    position: relative
}

.cmp-table thead th:first-child {
    padding-right: var(--space-md)
}

.cmp-table thead th:not(:first-child) {
    white-space: nowrap
}

.cmp-table thead th .fn-mark {
    top: var(--space-xs);
    right: var(--space-xs);
    position: absolute
}

.cmp-table thead th:first-child {
    border-radius: var(--r-sm) 0 0 0;
    text-align: center
}

.cmp-table thead th:last-child {
    border-radius: 0 var(--r-sm) 0 0
}

.cmp-table tbody th[scope=row] {
    text-align: center;
    font-weight: var(--font-weight-semibold);
    background: var(--surface-dim);
    font-size: var(--text-sm);
    min-width: 72px
}

.cmp-table .row-max td {
    font-weight: var(--font-weight-bold);
    color: var(--brand);
    background: var(--brand-subtle);
    text-align: center;
    font-size: var(--text-base)
}

.cmp-note {
    margin-top: var(--space-sm);
    margin-bottom: 0
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
    border-bottom: none
}

.cmp-hint {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-align: center;
    margin-top: var(--sec-gap-sm);
    font-weight: var(--font-weight-regular)
}

.svc-cards {
    margin-top: var(--sec-gap-lg);
    flex-direction: column;
    gap: 12px;
    display: flex
}

.svc-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden
}

.svc-head {
    grid-template-rows: auto auto;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 2px clamp(4px, 1.6vw, 10px);
    padding: 16px;
    display: grid
}

.svc-logo {
    --svc-logo-box-w: 62px;
    --svc-logo-box-h: 42px;
    flex-shrink: 0;
    grid-row: 1/3;
    justify-content: flex-start;
    align-items: center;
    width: 64px;
    height: 44px;
    display: flex
}

.svc-logo picture {
    width: var(--svc-logo-box-w);
    height: var(--svc-logo-box-h);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    padding: 4px;
    display: flex
}

.svc-logo img {
    width: auto;
    height: auto;
    max-width: var(--svc-logo-box-w);
    max-height: var(--svc-logo-box-h);
    object-fit: contain;
    display: block
}

.svc-logo--dazn {
    justify-content: center
}

.svc-logo--nba img {
    max-height: 28px
}

.svc-logo--dazn img {
    max-height: var(--svc-logo-box-h);
    max-width: var(--svc-logo-box-h)
}

.svc-info {
    grid-area: 1/2/3;
    min-width: 0;
    padding-right: 0
}

.svc-name {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: 2px;
    line-height: 1.35
}

.svc-genre {
    font-size: var(--text-base);
    color: var(--ink-muted);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.5;
    overflow: hidden
}

.svc-body {
    padding: 0 16px 16px
}

.svc-tags {
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
    display: flex
}

.svc-tags span {
    font-size: var(--text-xs);
    border-radius: var(--r-full);
    background: var(--surface-dim);
    color: var(--ink-secondary);
    font-weight: var(--font-weight-semibold);
    padding: 3px 9px
}

.svc-desc {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: 1.7;
    font-weight: var(--font-weight-regular);
    margin-bottom: 12px
}

.svc-desc+.text-note,
.svc-desc+.svc-offer {
    margin-top: calc(-1 * var(--space-xs))
}

.svc-offer {
    padding: var(--space-md) 14px;
    background: var(--brand-subtle);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-md);
    margin: 14px 0
}

a.svc-offer {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    display: block
}

a.svc-offer:hover {
    background: var(--brand-muted);
    border-color: var(--brand)
}

a.svc-offer:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

.svc-offer-max {
    font-size: var(--offer-cta-size, var(--text-md));
    color: var(--brand);
    font-weight: var(--font-weight-bold);
    line-height: var(--offer-cta-leading, var(--leading-snug));
    margin: 0
}

@media (width>=1024px) {
    a.svc-offer .svc-offer-max {
        text-wrap: pretty;
        letter-spacing: .01em
    }
}

.quiz-result-offer {
    text-align: left;
    margin: 0
}

.quiz-result-offer .svc-offer-max {
    color: var(--gold-200);
    margin-top: var(--space-md);
    text-align: center
}

.svc-offer:has(+.text-note) {
    margin-bottom: var(--sec-gap-sm)
}

.svc-offer+.text-note {
    margin-top: var(--space-2xs);
    margin-bottom: 14px
}

.quiz-result-offer .fn-notes {
    margin-top: var(--space-sm);
    color: var(--ink-on-dark-muted);
    text-align: center
}

.svc-pick {
    margin-bottom: var(--space-md)
}

a.svc-pick {
    color: inherit;
    cursor: pointer;
    border-radius: var(--r-md);
    transition: background var(--duration-fast);
    text-decoration: none;
    display: block
}

a.svc-pick:hover {
    background: var(--brand-subtle)
}

.svc-pick+.svc-pick {
    margin-top: var(--space-lg)
}

.svc-pick--main {
    padding: var(--space-md)
}

.svc-pick--main .svc-pick-title,
.svc-pick--main .svc-pick-caption,
.svc-pick--main .svc-pick-copyright {
    padding-inline: 0
}

.svc-pick--main .svc-pick-visual {
    margin-inline: 0
}

.svc-pick--sub {
    margin-bottom: 0
}

.svc-pick--sub+.svc-pick--sub {
    border-top: none;
    margin-top: 0;
    padding-top: 0
}

.svc-pick--sub:last-child {
    margin-bottom: var(--space-md)
}

.svc-pick-label {
    background: var(--brand-subtle);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    color: var(--brand);
    font-weight: var(--font-weight-semibold);
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-bottom: 8px;
    padding: 4px 10px;
    line-height: 1.4;
    display: inline-flex
}

.svc-pick-title {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin-bottom: 4px;
    padding-inline: 12px;
    line-height: 1.45
}

.svc-pick-caption {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.6;
    font-weight: var(--font-weight-regular);
    margin-bottom: 8px;
    padding-inline: 12px
}

.svc-pick-visual {
    aspect-ratio: 16/9;
    background: var(--surface-dim);
    margin-inline: 12px;
    position: relative;
    overflow: hidden
}

.svc-pick-visual:not([data-layout])>img:not(:first-child) {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.svc-pick-visual img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.svc-pick-visual[data-layout=contain] img {
    object-fit: contain
}

.svc-pick-visual[data-layout=row] {
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex
}

.svc-pick-visual[data-layout=row] img {
    object-fit: contain;
    flex: none;
    width: auto;
    max-width: 100%;
    height: 100%
}

.svc-pick-visual[data-layout=carousel] {
    display: block
}

.svc-pick-visual__track {
    height: 100%;
    transition: transform .45s var(--ease, ease);
    will-change: transform;
    display: flex
}

.svc-pick-visual__slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%
}

.svc-pick-visual__slide img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.svc-pick-visual__slide--row,
.svc-pick-visual__page--row {
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex
}

.svc-pick-visual__slide--row img,
.svc-pick-visual__page--row img {
    object-fit: contain;
    flex: none;
    width: auto;
    max-width: 100%;
    height: 100%
}

.svc-pick-visual__slide img.is-wide,
.svc-pick-visual__page img.is-wide,
.svc-pick-visual[data-layout=fade] img.is-wide {
    object-fit: contain
}

.svc-pick-visual__dots {
    pointer-events: none;
    z-index: 1;
    justify-content: center;
    gap: 6px;
    display: flex;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0
}

.svc-pick-visual__dot {
    pointer-events: auto;
    cursor: pointer;
    background: #ffffff8c;
    border: 0;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    padding: 0;
    box-shadow: 0 0 0 1px #0000002e
}

.svc-pick-visual__dot.is-active {
    background: var(--brand)
}

.svc-pick-visual[data-layout=fade] {
    display: block
}

.svc-pick-visual__page {
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s;
    position: absolute;
    inset: 0
}

.svc-pick-visual__page.is-active {
    opacity: 1;
    pointer-events: auto
}

.svc-pick-visual__page:not(.svc-pick-visual__page--row) img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.svc-pick-copyright {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
    font-weight: var(--font-weight-regular);
    margin-top: 6px;
    padding-inline: 12px
}

.svc-pick--sub .svc-pick-row {
    gap: var(--space-md);
    padding: var(--space-md);
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    align-items: center;
    display: grid
}

.svc-pick--sub .svc-pick-visual {
    aspect-ratio: 16/9;
    border-radius: var(--r-sm);
    background: var(--surface-dim);
    margin-inline: 0;
    overflow: hidden
}

.svc-pick--sub .svc-pick-visual:not([data-layout]) img,
.svc-pick--sub .svc-pick-visual[data-layout=cover] img {
    object-fit: cover
}

.svc-pick--sub .svc-pick-visual[data-layout=contain] img {
    object-fit: contain
}

.svc-pick--sub .svc-pick-visual[data-layout=fade] img:not(.is-wide) {
    object-fit: cover
}

.svc-pick--sub .svc-pick-body {
    min-width: 0
}

.svc-pick--sub .svc-pick-title,
.svc-pick--sub .svc-pick-caption,
.svc-pick--sub .svc-pick-copyright {
    padding-inline: 0
}

.svc-pick--sub .svc-pick-title {
    font-size: var(--text-base);
    margin-bottom: 6px
}

.svc-pick--sub .svc-pick-caption {
    font-size: var(--text-sm);
    margin-bottom: 0
}

.svc-pick--sub .svc-pick-copyright {
    margin-top: 8px
}

@media (width<=360px) {
    .svc-pick--sub .svc-pick-row {
        grid-template-columns: 1fr
    }
}

.svc-link {
    background: var(--surface-dimmer);
    border-radius: var(--r-sm);
    min-height: 44px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    transition: background .2s, color .2s;
    display: flex
}

.svc-link:hover {
    background: var(--brand-subtle);
    color: var(--brand)
}

.steps {
    flex-direction: column;
    gap: 0;
    display: flex;
    position: relative
}

.steps:before {
    content: "";
    background: linear-gradient(180deg, var(--brand) 0%, var(--border) 100%);
    width: 2px;
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 19px
}

.step {
    padding-bottom: var(--sec-gap-md);
    align-items: flex-start;
    gap: 14px;
    display: flex;
    position: relative
}

.step:last-child {
    padding-bottom: 0
}

.step-num {
    background: var(--gradient-brand);
    width: 40px;
    height: 40px;
    color: var(--ink-on-dark);
    box-shadow: var(--shadow-brand);
    font-size: var(--text-md);
    font-weight: var(--font-weight-heavy);
    z-index: 1;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.step-body {
    flex: 1;
    padding-top: 6px
}

.step-t {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: 5px;
    line-height: 1.4
}

.step-d {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: var(--leading-normal);
    font-weight: var(--font-weight-regular)
}

.switch-note {
    margin-top: var(--space-sm);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-relaxed)
}

.step-note {
    background: var(--brand-subtle);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    color: var(--brand);
    font-weight: var(--font-weight-semibold);
    border: none;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 10px;
    padding: 4px 10px;
    line-height: 1.4;
    display: inline-flex
}

.hero-perks {
    margin-bottom: var(--sec-gap-lg);
    flex-direction: column;
    gap: 16px;
    display: flex
}

.taiken-genre-sec {
    margin-bottom: var(--card-gap);
    scroll-margin-top: calc(var(--header-h, 56px) + var(--tabs-bar-h, 48px) + var(--cat-tabs-h, 0px) + var(--anchor-gap, 12px))
}

.taiken-genre-sec:last-of-type {
    margin-bottom: 0
}

.taiken-genre-sec .hero-perks {
    margin-bottom: var(--space-md)
}

.taiken-genre-sec .hero-perks:last-child,
.taiken-genre-sec .exp-cards:last-child {
    margin-bottom: 0
}

.hero-perk {
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform var(--duration-normal), box-shadow var(--duration-normal);
    position: relative;
    overflow: hidden
}

.hero-perk[data-cat]:not([hidden]) {
    animation: fadeUp .3s var(--ease)
}

.hero-perk:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-1px)
}

.hero-perk-visual {
    height: 170px;
    color: var(--ink-on-dark);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden
}

.hero-perk-visual--photo {
    aspect-ratio: 1200/630;
    background: var(--stage-black);
    height: auto
}

.hero-perk-visual--photo:before,
.hero-perk-visual--photo:after {
    display: none
}

.hero-perk-visual-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.hero-perk-visual:after {
    content: "";
    z-index: 1;
    background: linear-gradient(#0000 0%, #0000001a 40%, #0000008c 100%);
    position: absolute;
    inset: 0
}

.hero-perk-copyright {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
    font-weight: var(--font-weight-regular);
    background: var(--surface);
    margin: 0;
    padding: 8px 18px 0
}

.hero-perk-body {
    background: var(--surface);
    padding: 20px 18px
}

.hero-perk-copyright+.hero-perk-body {
    padding-top: 12px
}

.hero-perk-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--r-full);
    margin-bottom: 8px;
    padding: 3px 10px;
    display: inline-block
}

.hero-perk-badge.cat-music {
    background: var(--cat-music-bg);
    color: var(--cat-music-fg)
}

.hero-perk-badge.cat-anime {
    background: var(--cat-anime-bg);
    color: var(--cat-anime-fg)
}

.hero-perk-badge.cat-soccer {
    background: var(--cat-soccer-bg);
    color: var(--cat-soccer-fg)
}

.hero-perk-badge.cat-baseball {
    background: var(--cat-baseball-bg);
    color: var(--cat-baseball-fg)
}

.hero-perk-badge.cat-themepark {
    background: var(--cat-themepark-bg);
    color: var(--cat-themepark-fg)
}

.hero-perk-badge.cat-other {
    background: var(--cat-other-bg);
    color: var(--cat-other-fg)
}

.hero-perk-badge.upcoming-b {
    background: var(--gold-50);
    color: var(--gold-600)
}

.hero-perk-badges {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    display: flex
}

.hero-perk-badges .hero-perk-badge {
    margin-bottom: 0
}

.hero-perk-title {
    font-family: var(--font-display);
    font-size: var(--heading-3);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    margin-bottom: 8px
}

.hero-perk-point {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 6px;
    line-height: 1.5
}

.hero-perk-point--lead {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-heavy);
    color: var(--brand);
    background: var(--brand-subtle);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-md);
    text-align: center;
    margin: 12px 0 14px;
    padding: 14px 16px;
    line-height: 1.45
}

.hero-perk-date {
    font-size: var(--text-base);
    color: var(--ink-muted);
    font-weight: var(--font-weight-regular);
    margin-bottom: 12px
}

.hero-perk-cta {
    min-height: var(--cta-min-h);
    padding: var(--cta-pad-y) var(--cta-pad-x);
    border-radius: var(--cta-radius);
    font-size: var(--cta-size);
    font-weight: var(--font-weight-bold);
    justify-content: center;
    align-items: center;
    transition: all .25s;
    display: flex
}

.hero-perk-cta.primary {
    background: var(--gradient-brand);
    color: var(--ink-on-dark);
    box-shadow: var(--shadow-brand)
}

.hero-perk-cta.primary:hover {
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-1px)
}

.hero-perk-cta.ended-link {
    background: var(--surface-dim);
    color: var(--ink-secondary);
    font-weight: var(--font-weight-semibold)
}

.hero-perk-cta.ended-link:hover {
    color: var(--accent-link);
    background: var(--surface-dimmer);
    transform: translateY(-1px)
}

.taiken-overview {
    margin-bottom: var(--sec-gap-lg)
}

.taiken-overview-lead {
    background: linear-gradient(135deg, var(--gold-muted) 0%, var(--surface-warm) 100%);
    border: 1px solid var(--gold-border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 24px 22px
}

.taiken-overview-lead>p {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-weight-regular);
    margin: 0
}

.taiken-overview-lead strong {
    color: var(--gold-600);
    font-weight: var(--font-weight-bold)
}

.taiken-cat-grid {
    gap: var(--space-sm);
    margin: var(--space-md) 0 0;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    list-style: none;
    display: grid
}

.taiken-cat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    min-width: 0;
    position: relative
}

.taiken-cat-card-status {
    z-index: 1;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--r-full);
    background: var(--gold-50);
    color: var(--gold-600);
    pointer-events: none;
    padding: 2px 7px;
    line-height: 1.2;
    position: absolute;
    top: 6px;
    right: 6px
}

.taiken-cat-card-status.is-idle {
    background: var(--surface-dim);
    color: var(--ink-muted)
}

.taiken-cat-card.is-inactive {
    opacity: .72
}

.taiken-cat-card-link {
    text-align: center;
    padding: var(--space-sm);
    padding-top: calc(var(--space-sm) + 14px);
    color: inherit;
    border-radius: inherit;
    box-sizing: border-box;
    height: 100%;
    transition: background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    display: flex
}

.taiken-cat-card-link.is-disabled {
    cursor: default;
    pointer-events: none
}

.taiken-cat-card-link:hover {
    background: var(--gold-bg);
    box-shadow: var(--shadow-xs)
}

.taiken-cat-card-link.is-disabled:hover {
    box-shadow: none;
    background: 0 0
}

.taiken-cat-card-link:focus-visible {
    outline: 2px solid var(--gold-600);
    outline-offset: 2px
}

.taiken-cat-card-icon {
    width: var(--taiken-cat-icon-size);
    height: var(--taiken-cat-icon-size);
    border-radius: var(--r-full);
    background: var(--gold-muted);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
    display: flex
}

.taiken-cat-card-icon img {
    width: var(--taiken-cat-icon-glyph);
    height: var(--taiken-cat-icon-glyph);
    display: block
}

.taiken-cat-card-label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.35
}

.taiken-cat-card-desc {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.4;
    font-weight: var(--font-weight-regular)
}

.cat-tabs-anchor {
    margin-bottom: var(--float-stack-anchor-gap)
}

html[data-cat-tabs-floating=true] .cat-tabs-anchor {
    margin-bottom: var(--float-stack-content-gap)
}

.cat-tabs {
    gap: var(--space-sm);
    -webkit-overflow-scrolling: touch;
    padding: var(--float-stack-cat-gap) 0;
    display: flex;
    overflow-x: auto
}

.cat-tabs:before,
.cat-tabs:after {
    content: "";
    margin: auto
}

.cat-tabs.is-floating {
    top: calc(var(--header-h) + var(--tabs-bar-h));
    z-index: 98;
    width: 100%;
    padding: var(--float-stack-cat-pad-top) var(--float-stack-pad-x) var(--float-stack-cat-pad-bottom);
    background: var(--tab-canvas, #fffffff5);
    -webkit-backdrop-filter: blur(16px)saturate(1.2);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    margin: 0;
    position: fixed;
    left: 0
}

.cat-tab {
    border-radius: var(--r-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-secondary);
    flex-shrink: 0;
    padding: 9px 16px;
    text-decoration: none;
    transition: all .2s
}

.cat-tab.active {
    background: var(--brand);
    color: var(--ink-on-dark);
    border-color: var(--brand);
    box-shadow: var(--shadow-brand)
}

html[data-active-tab=b] .cat-tab.active {
    background: var(--gold-600);
    border-color: var(--gold-600);
    box-shadow: var(--shadow-gold)
}

.cat-tab:hover:not(.active) {
    border-color: var(--brand);
    color: var(--brand)
}

html[data-active-tab=b] .cat-tab:hover:not(.active) {
    border-color: var(--gold-600);
    color: var(--gold-600)
}

.exp-cards {
    gap: var(--card-gap);
    flex-direction: column;
    display: flex
}

.exp-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: box-shadow var(--duration-normal), transform var(--duration-normal);
    overflow: hidden
}

.exp-card:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-1px)
}

.exp-card[data-cat]:not([hidden]) {
    animation: fadeUp .3s var(--ease);
    display: block
}

.exp-card-main {
    grid-template-columns: minmax(0, 1fr) minmax(112px, var(--card-media-thumb-max));
    gap: var(--card-gap);
    padding: var(--card-pad-y) var(--card-pad-x);
    align-items: start;
    display: grid
}

.exp-card-main .exp-card-body {
    min-width: 0;
    padding: 0
}

.exp-card-visual {
    width: 100%;
    max-width: var(--card-media-thumb-max);
    aspect-ratio: 1200/630;
    border-radius: var(--r-md);
    background: var(--surface-dim);
    justify-self: end;
    overflow: hidden
}

.exp-card-visual img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.exp-card-body {
    padding: var(--card-pad-y) var(--card-pad-x)
}

@media (width<=480px) {
    .exp-card-main {
        padding: 0 0 var(--card-pad-y);
        grid-template-columns: 1fr
    }

    .exp-card-visual {
        border-radius: 0;
        order: -1;
        justify-self: stretch;
        max-width: none
    }

    .exp-card-main .exp-card-body {
        padding: var(--card-pad-y) var(--card-pad-x) 0
    }
}

.exp-card-copyright {
    margin: var(--space-md) 0 0;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
    font-weight: var(--font-weight-regular)
}

.exp-card-cat {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--r-full);
    margin-bottom: 6px;
    padding: 3px 8px;
    display: inline-block
}

.exp-card-cat.music,
.exp-card-cat.cat-music {
    background: var(--cat-music-bg);
    color: var(--cat-music-fg)
}

.exp-card-cat.anime,
.exp-card-cat.cat-anime {
    background: var(--cat-anime-bg);
    color: var(--cat-anime-fg)
}

.exp-card-cat.soccer,
.exp-card-cat.cat-soccer {
    background: var(--cat-soccer-bg);
    color: var(--cat-soccer-fg)
}

.exp-card-cat.baseball,
.exp-card-cat.cat-baseball {
    background: var(--cat-baseball-bg);
    color: var(--cat-baseball-fg)
}

.exp-card-cat.themepark,
.exp-card-cat.cat-themepark {
    background: var(--cat-themepark-bg);
    color: var(--cat-themepark-fg)
}

.exp-card-cat.other,
.exp-card-cat.cat-other {
    background: var(--cat-other-bg);
    color: var(--cat-other-fg)
}

.exp-card-title {
    font-size: var(--heading-4);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
    line-height: 1.5
}

.exp-card-meta {
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    display: flex
}

.exp-card-date {
    font-size: var(--text-base);
    color: var(--ink-muted);
    font-weight: var(--font-weight-regular)
}

.exp-card-link {
    min-height: var(--cta-min-h);
    padding: var(--cta-pad-y) var(--card-pad-x);
    border-top: 1px solid var(--border);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-on-dark);
    transition: background var(--duration-fast);
    justify-content: center;
    align-items: center;
    display: flex;
    background: var(--gradient-brand);
}
/*
.exp-card-link:hover {
    background: var(--brand-subtle)
}*/

.ended-toggle {
    width: 100%;
    margin-top: var(--sec-gap-md);
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-secondary);
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    transition: background .2s;
    display: flex
}

.ended-toggle:hover {
    background: var(--surface-dimmer)
}

.ended-arrow {
    font-size: var(--text-xs);
    transition: transform .3s
}

.ended-toggle.open .ended-arrow {
    transform: rotate(180deg)
}

.ended-list {
    margin-top: 10px;
    display: none
}

.ended-list.open {
    animation: fadeUp .3s var(--ease);
    display: block
}

.ended-item {
    border-bottom: 1px solid var(--border);
    opacity: .55;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    display: flex
}

.ended-badges {
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    display: flex
}

.ended-item-body {
    flex: 1;
    min-width: 0
}

.ended-copyright {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
    font-weight: var(--font-weight-regular);
    margin: 4px 0 0
}

.ended-item:last-child {
    border-bottom: none
}

.ended-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-muted);
    background: var(--surface-dim);
    border-radius: var(--r-full);
    flex-shrink: 0;
    padding: 2px 7px
}

.ended-cat {
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    padding: 2px 8px;
    line-height: 1.4;
    display: inline-block
}

.ended-cat.music {
    background: var(--cat-music-bg);
    color: var(--cat-music-fg)
}

.ended-cat.anime {
    background: var(--cat-anime-bg);
    color: var(--cat-anime-fg)
}

.ended-cat.soccer {
    background: var(--cat-soccer-bg);
    color: var(--cat-soccer-fg)
}

.ended-cat.baseball {
    background: var(--cat-baseball-bg);
    color: var(--cat-baseball-fg)
}

.ended-cat.themepark {
    background: var(--cat-themepark-bg);
    color: var(--cat-themepark-fg)
}

.ended-cat.other {
    background: var(--cat-other-bg);
    color: var(--cat-other-fg)
}

.ended-name {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    font-weight: var(--font-weight-regular)
}

.ended-link {
    color: var(--ink-secondary);
    text-underline-offset: 2px;
    text-decoration: underline
}

.ended-link:hover {
    color: var(--accent-link)
}

.faq-list {
    flex-direction: column;
    gap: 0;
    display: flex
}

.faq-item {
    border-bottom: 1px solid var(--border)
}

.faq-item:first-child {
    border-top: 1px solid var(--border)
}

.faq-q {
    width: 100%;
    min-height: 48px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    color: var(--ink);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    transition: color .2s;
    display: flex
}

.faq-q-text {
    text-align: left;
    flex: 1;
    line-height: 1.5
}

.faq-q:hover {
    color: var(--brand)
}

.faq-q-arrow {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform .3s
}

.faq-item.open .faq-q-arrow {
    transform: rotate(180deg)
}

.faq-a {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: var(--leading-relaxed);
    text-align: left;
    font-weight: var(--font-weight-regular);
    padding: 0 0 16px;
    display: none
}

.faq-a a {
    color: var(--accent-link);
    text-underline-offset: 2px;
    text-decoration: underline
}

.faq-item.open .faq-a {
    animation: fadeUp .3s var(--ease);
    display: block
}

.cta-main {
    width: 100%;
    min-height: var(--cta-min-h);
    padding: var(--cta-pad-y) var(--cta-pad-x);
    background: var(--gradient-brand);
    color: var(--ink-on-dark);
    font-size: var(--cta-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: .02em;
    border-radius: var(--cta-radius);
    box-shadow: var(--shadow-brand);
    transition: box-shadow var(--duration-normal), transform var(--duration-fast), background var(--duration-normal);
    -webkit-tap-highlight-color: transparent;
    justify-content: center;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
    display: flex;
    position: relative;
    overflow: hidden
}

.cta-main:before {
    content: "";
    background: var(--gradient-gold-shine);
    opacity: 0;
    transition: opacity var(--duration-normal);
    position: absolute;
    inset: 0
}

.cta-main:after {
    content: "→";
    font-size: var(--cta-size);
    transition: transform var(--duration-fast);
    flex-shrink: 0;
    position: relative
}

.cta-main:active {
    box-shadow: var(--shadow-brand);
    transform: translateY(0)
}

.cta-main:hover {
    background: var(--gradient-brand-hover);
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-2px)
}

.cta-main:hover:before {
    opacity: .15
}

.cta-main:hover:after {
    transform: translate(3px)
}

.cta-block {
    margin-top: var(--sec-gap-lg)
}

.cta-block:not(:last-child) {
    margin-bottom: var(--sec-gap-lg)
}

.cta-main--inset {
    margin-top: 16px
}

@media (width>=1024px) {
    .cta-main {
        letter-spacing: .03em
    }
}

:root {
    --pc-sidebar-width: 300px;
    --pc-sidebar-inner-gap: 24px
}

@media (width>=1024px) {

    .pc-float--left,
    .pc-float--right {
        width: 100%;
        max-width: var(--pc-sidebar-width);
        flex-direction: column;
        gap: 0;
        display: flex
    }

    .pc-float--left {
        padding: 32px var(--pc-sidebar-inner-gap) 32px 20px;
        justify-self: end;
        gap: 16px
    }

    .pc-float--left .pc-side-card--recommend+.pc-side-card--recommend {
        margin-top: 0
    }

    .pc-float--right {
        padding: 32px 20px 32px var(--pc-sidebar-inner-gap);
        justify-self: start
    }

    .pc-side-card {
        background: var(--surface);
        border-radius: var(--r-lg);
        text-align: center;
        box-shadow: none;
        border: 2px solid var(--border);
        padding: 20px 18px;
        position: relative;
        overflow: hidden
    }

    .pc-side-card--recommend {
        background: var(--tab-canvas-eraberu);
        border: 2px solid var(--brand-border)
    }

    .pc-side-card--recommend:before {
        content: "";
        background: var(--gradient-brand);
        border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;
        height: 5px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

    .pc-side-card--taiken {
        background: var(--tab-canvas-taiken);
        border: 2px solid var(--gold-border)
    }

    .pc-side-card--taiken:before {
        content: "";
        background: linear-gradient(90deg, var(--gold-600), var(--gold-500));
        border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;
        height: 5px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

    .pc-side-label {
        font-family: var(--font-display);
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-display);
        color: var(--ink);
        margin-bottom: 10px;
        line-height: 1.4
    }

    .pc-side-card--recommend .pc-side-label {
        color: var(--brand)
    }

    .pc-side-card--taiken .pc-side-label {
        color: var(--gold-600);
        margin-bottom: 0
    }

    .pc-taiken-head {
        text-align: center;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        display: flex
    }

    .pc-taiken-picks {
        gap: var(--card-gap);
        margin-bottom: var(--card-pad-y);
        text-align: left;
        flex-direction: column;
        display: flex
    }

    .pc-taiken-pick {
        color: inherit;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
        text-decoration: none;
        display: block;
        overflow: hidden
    }

    .pc-taiken-pick:hover {
        border-color: var(--gold-border);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px #a1721f24
    }

    .pc-taiken-pick-visual {
        aspect-ratio: 1200/630;
        background: var(--surface-dim);
        overflow: hidden
    }

    .pc-taiken-pick-visual img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .pc-taiken-pick-body {
        padding: var(--space-md) var(--card-gap) var(--card-gap)
    }

    .pc-taiken-pick--text {
        border-left: 3px solid var(--gold-500)
    }

    .pc-taiken-pick--text .pc-taiken-pick-body {
        padding: var(--space-md) var(--card-gap)
    }

    .pc-taiken-pick-cat {
        border-radius: var(--r-full);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        margin-bottom: 5px;
        padding: 2px 8px;
        line-height: 1.4;
        display: inline-block
    }

    .pc-taiken-pick-cat.music {
        background: var(--cat-music-bg);
        color: var(--cat-music-fg)
    }

    .pc-taiken-pick-cat.anime {
        background: var(--cat-anime-bg);
        color: var(--cat-anime-fg)
    }

    .pc-taiken-pick-cat.soccer {
        background: var(--cat-soccer-bg);
        color: var(--cat-soccer-fg)
    }

    .pc-taiken-pick-cat.baseball {
        background: var(--cat-baseball-bg);
        color: var(--cat-baseball-fg)
    }

    .pc-taiken-pick-cat.themepark {
        background: var(--cat-themepark-bg);
        color: var(--cat-themepark-fg)
    }

    .pc-taiken-pick-cat.other {
        background: var(--cat-other-bg);
        color: var(--cat-other-fg)
    }

    .pc-taiken-pick-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        color: var(--ink);
        transition: color var(--duration-fast);
        margin: 0;
        line-height: 1.45
    }

    .pc-taiken-pick:hover .pc-taiken-pick-title {
        color: var(--gold-600)
    }

    .pc-side-rec-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-heavy);
        color: var(--brand);
        margin-bottom: 8px;
        line-height: 1.35
    }

    .pc-side-desc {
        font-size: var(--text-sm);
        color: var(--ink-secondary);
        line-height: 1.6;
        font-weight: var(--font-weight-regular);
        margin-bottom: 16px
    }

    .pc-side-desc--sm {
        font-size: var(--text-xs)
    }

    .pc-rec-picks {
        text-align: left;
        margin-bottom: 14px;
        margin-inline: -10px
    }

    .pc-rec-pick {
        color: inherit;
        border-radius: var(--r-sm);
        transition: background var(--duration-fast);
        margin-bottom: 0;
        padding: 0 10px 6px;
        text-decoration: none;
        display: block
    }

    a.pc-rec-pick {
        cursor: pointer
    }

    a.pc-rec-pick:hover {
        background: var(--brand-subtle)
    }

    .pc-rec-pick+.pc-rec-pick {
        margin-top: 14px
    }

    .pc-rec-pick-label {
        background: var(--brand-muted);
        border-radius: var(--r-full);
        font-size: var(--text-xs);
        color: var(--brand);
        font-weight: var(--font-weight-semibold);
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
        padding: 3px 8px;
        line-height: 1.4;
        display: inline-flex
    }

    .pc-rec-pick-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        color: var(--ink);
        margin-bottom: 3px;
        line-height: 1.45
    }

    .pc-rec-pick-caption {
        font-size: var(--text-xs);
        color: var(--ink-secondary);
        line-height: 1.55;
        font-weight: var(--font-weight-regular);
        margin-bottom: 6px
    }

    .pc-rec-pick-visual {
        aspect-ratio: 16/9;
        border-radius: var(--r-md);
        position: relative;
        overflow: hidden
    }

    .pc-rec-pick-visual img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        display: block
    }

    .pc-rec-pick-copyright {
        font-size: var(--text-xs);
        color: var(--ink-muted);
        line-height: 1.45;
        font-weight: var(--font-weight-regular);
        margin-top: 4px
    }

    .pc-side-cta {
        border-radius: var(--r-full);
        width: 100%;
        min-height: 44px;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        text-align: center;
        padding: 12px 14px;
        transition: opacity .2s, background .2s, box-shadow .2s;
        display: block
    }

    .pc-side-cta:hover {
        opacity: .9
    }

    .pc-side-cta--primary {
        background: var(--gradient-brand);
        color: var(--ink-on-dark);
        box-shadow: var(--shadow-brand)
    }

    .pc-side-cta--primary:hover {
        box-shadow: var(--shadow-brand-lg);
        opacity: 1
    }

    .pc-side-card--taiken .pc-side-cta--primary {
        background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%);
        color: var(--ink-on-dark);
        border: 1px solid #ffffff40;
        box-shadow: 0 4px 20px #a1721f47
    }

    .pc-side-card--taiken .pc-side-cta--primary:hover {
        opacity: 1;
        box-shadow: 0 8px 32px #a1721f5c
    }
}

@media (width>=1280px) {
    :root {
        --pc-sidebar-width: 340px;
        --pc-sidebar-inner-gap: 36px
    }
}

@media (width>=1440px) {
    :root {
        --pc-sidebar-width: 380px
    }
}

html {
    background: var(--surface);
    transition: background var(--layout-canvas-duration) var(--layout-ease)
}

body {
    transition: background var(--layout-canvas-duration) var(--layout-ease)
}

html[data-layout=desktop],
html[data-layout=desktop] body {
    background: var(--gradient-canvas)
}

html[data-layout-dir=enter] {
    transition-delay: var(--layout-enter-canvas-delay)
}

html[data-layout-dir=exit] {
    transition-delay: var(--layout-exit-canvas-delay)
}

.page-shell {
    align-items: start
}

html[data-layout=mobile] .page-shell {
    display: block
}

html[data-layout=mobile] .page-main {
    width: 100%;
    max-width: 100%
}

html[data-layout=desktop] .page-shell {
    grid-template-columns: 1fr minmax(0, min(var(--main-col-max), 100%)) 1fr;
    transition: grid-template-columns var(--layout-grid-duration) var(--layout-ease);
    display: grid
}

html[data-layout=mobile][data-layout-dir=exit] .page-shell {
    transition: grid-template-columns var(--layout-grid-duration) var(--layout-ease);
    transition-delay: var(--layout-exit-grid-delay)
}

html[data-layout-dir=enter] .page-shell {
    transition-delay: var(--layout-enter-grid-delay)
}

html[data-layout=desktop]:not([data-layout-dir]) .page-shell {
    transition-duration: .32s
}

.page-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
    transition: box-shadow var(--layout-chrome-duration) var(--layout-ease), border-color var(--layout-chrome-duration) var(--layout-ease);
    border-left: 1px solid #0000;
    border-right: 1px solid #0000
}

html[data-layout=desktop] .page-main {
    max-width: var(--main-col-max);
    box-shadow: var(--shadow-canvas);
    border-left-color: var(--border);
    border-right-color: var(--border);
    padding-bottom: 0
}

html[data-layout-dir=enter] .page-main {
    transition-delay: var(--layout-enter-chrome-delay)
}

html[data-layout-dir=exit] .page-main {
    transition-delay: var(--layout-exit-chrome-delay)
}

html[data-layout=mobile] .pc-float,
.pc-float[hidden] {
    display: none !important
}

.pc-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    min-width: 0;
    max-height: calc(100vh - 48px);
    transition: opacity var(--layout-sidebar-duration) var(--layout-ease), visibility 0s linear var(--layout-sidebar-duration), transform var(--layout-sidebar-duration) var(--layout-ease-out);
    align-self: start;
    display: block;
    position: sticky;
    top: 24px;
    overflow: hidden
}

html[data-layout=desktop] .pc-float,
html[data-layout-dir=enter] .pc-float {
    transition: opacity var(--layout-sidebar-duration) var(--layout-ease), visibility 0s, transform var(--layout-sidebar-duration) var(--layout-ease-out)
}

.pc-float--left {
    transform: translate(-20px)
}

.pc-float--right {
    transform: translate(20px)
}

html[data-layout=desktop] .pc-float {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    scrollbar-width: none;
    overflow-y: auto;
    transform: translate(0)
}

html[data-layout=desktop] .pc-float::-webkit-scrollbar {
    display: none
}

html[data-layout-dir=enter] .pc-float {
    transition-delay: var(--layout-enter-sidebar-delay)
}

html[data-layout-dir=enter] .pc-float--left {
    transition-timing-function: var(--layout-ease-out)
}

html[data-layout-dir=enter] .pc-float--right {
    transition-delay: calc(var(--layout-enter-sidebar-delay) + 40ms)
}

.pc-float .pc-side-card {
    opacity: 0;
    transition: opacity var(--layout-sidebar-content-duration) var(--layout-ease), transform var(--layout-sidebar-content-duration) var(--layout-ease-out);
    transform: translateY(10px)
}

html[data-layout=desktop] .pc-float .pc-side-card {
    opacity: 1;
    transform: translateY(0)
}

html[data-layout-dir=enter] .pc-float--left .pc-side-card {
    transition-delay: var(--layout-enter-content-delay)
}

html[data-layout-dir=enter] .pc-float--right .pc-side-card {
    transition-delay: calc(var(--layout-enter-content-delay) + var(--layout-enter-content-stagger))
}

html[data-layout=desktop][data-layout-dir] .pc-float {
    pointer-events: none
}

@media (width<=1023px) {
    .page-shell {
        display: block
    }

    .page-main {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border-left-color: #0000;
        border-right-color: #0000
    }

    .pc-float {
        display: none !important
    }
}

@media (width>=1024px) {
    .page-shell {
        grid-template-columns: 1fr minmax(0, min(var(--main-col-max), 100%)) 1fr;
        display: grid
    }
}

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

    html,
    body,
    .page-shell,
    .page-main,
    .pc-float,
    .pc-float .pc-side-card {
        transition: none !important
    }

    html[data-layout-dir] .pc-float {
        pointer-events: none
    }
}