@charset "UTF-8";

/*
 * WESTERモール アンバサダーバトル — 統合スタイルシート
 * 基準: 2026-09-26 添付「貼り付けたテキスト（1）(2).txt」
 * 読み込み順: reset.css → common.css → style.css
 *
 * セクション内の順序: 基本指定 → 画面幅別指定 → 状態・動きの設定。
 * 後付けの重複指定は、該当するセクションへ統合しています。
 * HTML / JS / 画像URL / クラス名は変更していません。
 * セレクタ詳細度を一括変更する :where() 化や @layer 化はしていません。
 * 表示補正: 商品名の中央揃え/SP文字サイズ、ライバー切替矢印の二重表示防止。
 * その他の数値は添付CSSの最終適用結果を維持。検証範囲は同梱レポート参照。
 */

/* ========================================================
    00. 共通変数
======================================================== */

.wester-lp {
    --space-section-lg: clamp(64px, 5.2vw, 100px);
    --space-section-md: clamp(52px, 4.2vw, 80px);
    --space-section-sm: clamp(40px, 3.2vw, 62px);
    --space-content-lg: clamp(42px, 3.2vw, 62px);
    --space-content-md: clamp(30px, 2.4vw, 46px);
    --space-content-sm: clamp(22px, 1.8vw, 34px);
}

/* ========================================================
    01. 共通見出し・ユーティリティ
======================================================== */

.section-heading {
    text-align: center;
}

.section-heading__en {
    margin-bottom: 12px;
    color: #7384e9;
    font-size: clamp(14px, 1.6406vw, 21px);
    font-weight: 500;
    letter-spacing: 0.28em;
    line-height: 1;
    transition: letter-spacing 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
}

.section-heading__title {
    color: #17275c;
    font-size: clamp(34px, 4.4531vw, 57px);
    font-weight: 800;
    line-height: 1.4;
}

@media screen and (max-width: 767px) {

    .section-heading__en {
        margin-bottom: 10px;
        font-size: clamp(12px, 3.6vw, 14px);
    }

    .section-heading__title {
        font-size: clamp(28px, 8vw, 34px);
    }

    .pc-only {
        display: none;
    }

}

/* ========================================================
    02. ローダー
======================================================== */

.lp-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%, rgba(21, 211, 232, 0.18), transparent 38%),
        radial-gradient(circle at 90% 80%, rgba(225, 73, 226, 0.16), transparent 40%),
        #fff;
}

.lp-loader__glow {
    position: absolute;
    z-index: 0;
    width: min(60vw, 900px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(100px);
    pointer-events: none;
}

.lp-loader__glow--1 {
    top: -30%;
    left: -15%;
    background: #16d7ea;
    animation: loaderGlowLeft 5s ease-in-out infinite alternate;
}

.lp-loader__glow--2 {
    right: -15%;
    bottom: -35%;
    background: #e34fe4;
    animation: loaderGlowRight 5.5s ease-in-out infinite alternate;
}

.lp-loader__gate {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    display: none;
    height: 50.5%;
    background: linear-gradient(90deg, #f4fdff 0%, #fff 48%, #fff7ff 100%);
    pointer-events: none;
}

.lp-loader__gate--top {
    top: 0;
}

.lp-loader__gate--bottom {
    bottom: 0;
}

.lp-loader__content {
    position: relative;
    z-index: 5;
    width: min(80vw, 620px);
    text-align: center;
}

.lp-loader__logo {
    width: min(60vw, 420px);
    margin-inline: auto;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: loaderLogoIn 0.9s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-loader__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.lp-loader__catch {
    margin-top: 26px;
    color: #7777e8;
    font-size: clamp(11px, 0.8vw, 15px);
    font-weight: 800;
    letter-spacing: 0.38em;
    line-height: 1;
    opacity: 0;
    animation: loaderFadeUp 0.7s 0.3s ease forwards;
}

.lp-loader__progress {
    width: min(100%, 520px);
    margin: 45px auto 0;
    opacity: 0;
    animation: loaderFadeUp 0.7s 0.45s ease forwards;
}

.lp-loader__track {
    position: relative;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(118, 126, 177, 0.13);
}

.lp-loader__bar {
    position: relative;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, #18d1e4 0%, #6970f4 48%, #e64ddd 100%);
    box-shadow: 0 0 12px rgba(79, 142, 244, 0.35);
    transition: width 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-loader__bar::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    animation: loaderShine 1.15s linear infinite;
    content: "";
}

.lp-loader__meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    margin-top: 13px;
    color: #a1a7bf;
    font-size: 10px;
    font-weight: 700;
}

.lp-loader__meta span:first-child {
    text-align: left;
}

.lp-loader__meta span:last-child {
    text-align: right;
}

.lp-loader__meta strong {
    min-width: 90px;
    color: transparent;
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(90deg, #17cee5, #7768f3, #dd4de4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lp-loader__status {
    margin-top: 8px;
    color: #b4b8cb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.38em;
    opacity: 0;
    animation: loaderFadeUp 0.7s 0.6s ease forwards;
}

.lp-loader__flash {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 0;
    height: 2px;
    background: #fff;
    box-shadow: 0 0 15px #fff, 0 0 35px rgba(24, 214, 235, 0.9), 0 0 70px rgba(120, 97, 245, 0.75), 0 0 120px rgba(228, 76, 222, 0.55);
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.lp-loader.is-complete .lp-loader__logo {
    animation: loaderLogoImpact 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-loader.is-complete .lp-loader__track {
    animation: loaderTrackImpact 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-loader.is-complete .lp-loader__meta strong {
    animation: loaderPercentImpact 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-loader.is-complete .lp-loader__catch {
    animation: loaderCatchImpact 0.7s ease forwards;
}

.lp-loader.is-burst .lp-loader__flash {
    animation: loaderFlashBurst 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-loader.is-leaving {
    animation: loaderExit 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lp-loader.is-leaving .lp-loader__content {
    opacity: 1;
}

.lp-loader.is-leaving .lp-loader__glow {
    opacity: 0.2;
}

@media screen and (max-width: 767px) {

    .lp-loader__content {
        width: calc(100% - 48px);
    }

    .lp-loader__logo {
        width: min(78vw, 340px);
    }

    .lp-loader__catch {
        margin-top: 22px;
        font-size: 10px;
        letter-spacing: 0.28em;
    }

    .lp-loader__progress {
        margin-top: 34px;
    }

    .lp-loader__track {
        height: 4px;
    }

    .lp-loader__meta strong {
        font-size: 30px;
    }

    .lp-loader__status {
        font-size: 8px;
        letter-spacing: 0.28em;
    }

}

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

    .lp-loader__glow {
        animation: none;
    }

    .lp-loader__logo,
    .lp-loader__catch,
    .lp-loader__progress,
    .lp-loader__status {
        opacity: 1;
        transform: none;
        animation: none;
    }

}

@keyframes loaderExit {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }

    35% {
        opacity: 1;
        transform: scale(1.008);
        filter: brightness(1.08);
    }

    100% {
        opacity: 0;
        transform: scale(1.015);
        filter: brightness(1.15);
    }
}

@keyframes loaderLogoIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loaderFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderShine {
    from {
        left: -120px;
    }

    to {
        left: calc(100% + 120px);
    }
}

@keyframes loaderGlowLeft {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(14%, 8%) scale(1.15);
    }
}

@keyframes loaderGlowRight {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-12%, -8%) scale(1.15);
    }
}

@keyframes loaderLogoImpact {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    45% {
        opacity: 1;
        transform: translateY(0) scale(1.055);
        filter: brightness(1.12) drop-shadow(0 0 14px rgba(105, 103, 244, 0.25));
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes loaderTrackImpact {
    0% {
        transform: scaleX(1);
    }

    45% {
        transform: scaleX(1.035);
        box-shadow: 0 0 14px rgba(22, 210, 231, 0.7), 0 0 30px rgba(224, 76, 226, 0.45);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes loaderPercentImpact {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.16);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes loaderCatchImpact {
    0% {
        letter-spacing: 0.38em;
    }

    45% {
        letter-spacing: 0.5em;
    }

    100% {
        letter-spacing: 0.38em;
    }
}

@keyframes loaderFlashBurst {
    0% {
        width: 0;
        height: 2px;
        opacity: 0;
    }

    20% {
        width: 25%;
        opacity: 1;
    }

    65% {
        width: 115%;
        height: 3px;
        opacity: 1;
    }

    100% {
        width: 130%;
        height: 3px;
        opacity: 0;
    }
}

@keyframes loaderGateTop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-105%);
    }
}

@keyframes loaderGateBottom {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(105%);
    }
}

@keyframes loaderContentExit {
    from {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: scale(1.035);
        filter: blur(5px);
    }
}

@keyframes loaderGlowExit {
    to {
        opacity: 0;
    }
}

/* ========================================================
    03. フローティングナビゲーション
======================================================== */

.floating-nav {
    position: fixed;
    top: 18px;
    right: 0;
    left: 0;
    z-index: 9000;
    width: min(calc(100% - 40px), 1500px);
    margin-inline: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-25px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s ease;
    pointer-events: none;
}

.floating-nav.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-nav__inner {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 8px 16px 8px 25px;
    border: 1px solid rgba(122, 112, 238, 0.22);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 30px rgba(35, 42, 91, 0.13);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.floating-nav__brand {
    display: block;
    flex: 0 0 auto;
    width: 190px;
}

.floating-nav__brand img {
    display: block;
    width: 100%;
    height: auto;
}

.floating-nav__links {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    margin-left: 35px;
}

.floating-nav__links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    color: #17275c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.floating-nav__links a + a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 18px;
    background: #d9dcef;
    transform: translateY(-50%);
    content: "";
}

.floating-nav__links a.is-active {
    color: #765bf0;
}

.floating-nav__links a.is-active::after {
    position: absolute;
    right: 18px;
    bottom: 3px;
    left: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #17cce8, #835ff3, #e453e8);
    content: "";
}

.floating-nav__menu {
    display: none;
}

#howto,
#benefits,
#liver,
#coupon,
#ranking,
#faq,
#schedule,
#notice {
    scroll-margin-top: clamp(105px, 7.5vw, 125px);
}

@media screen and (max-width: 1150px) {

    .floating-nav__brand {
        width: 160px;
    }

    .floating-nav__links {
        margin-left: 20px;
    }

    .floating-nav__links a {
        padding-inline: 12px;
        font-size: 12px;
    }

}

@media screen and (max-width: 767px) {

    .floating-nav {
        top: 10px;
        width: calc(100% - 20px);
    }

    .floating-nav__inner {
        position: relative;
        min-height: 58px;
        padding: 8px 12px 8px 18px;
        border-radius: 30px;
    }

    .floating-nav__brand {
        width: 205px;
    }

    .floating-nav__links {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0;
        padding: 12px;
        visibility: hidden;
        border: 1px solid rgba(122, 112, 238, 0.2);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 10px 30px rgba(35, 42, 91, 0.16);
        opacity: 0;
        transform: translateY(-8px);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
        pointer-events: none;
    }

    .floating-nav__links a {
        min-height: 48px;
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 10px;
    }

    .floating-nav__links a + a::before {
        display: none;
    }

    .floating-nav__links a.is-active {
        background: rgba(118, 91, 240, 0.08);
    }

    .floating-nav__links a.is-active::after {
        right: 25%;
        bottom: 5px;
        left: 25%;
    }

    .floating-nav__menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        margin-left: auto;
        border-radius: 50%;
        background: linear-gradient(135deg, #765cf2, #14cde3);
    }

    #howto,
    #benefits,
    #liver,
    #coupon,
    #ranking,
    #schedule,
    #faq,
    #notice {
        scroll-margin-top: 85px;
    }

    .floating-nav__menu span {
        display: block;
        width: 19px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .floating-nav__menu.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .floating-nav__menu.is-open span:nth-child(2) {
        opacity: 0;
    }

    .floating-nav__menu.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .floating-nav__links.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

}

@media (hover: hover) {

    .floating-nav__links a:hover {
        color: #765bf0;
    }

}

/* ========================================================
    04. ファーストビュー
======================================================== */

.main-visual {
    position: relative;
    width: 100%;
    padding-bottom: clamp(55px, 4.2vw, 80px);
    overflow: hidden;
}

.main-visual__partners {
    position: relative;
    z-index: 10;
    width: 100%;
    padding-block: clamp(14px, 1vw, 34px);
    background: #fff;
}

.main-visual__partners-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(74vw, 1420px);
    margin-inline: auto;
}

.main-visual__partner {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    object-fit: contain;
}

.main-visual__partner--jr {
    width: clamp(45px, 4.95vw, 95px);
}

.main-visual__partner--wester {
    width: clamp(85px, 9.375vw, 180px);
}

.main-visual__partner--virtual-osaka {
    width: clamp(100px, 10.94vw, 210px);
}

.main-visual__partner--reality,
.main-visual__partner--mvirtual {
    width: clamp(88px, 9.64vw, 185px);
}

.main-visual__body {
    position: relative;
    height: auto;
    overflow: hidden;
}

.main-visual__bg {
    position: relative;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.main-visual__bg img {
    display: block;
    width: 100%;
    height: auto;
}

.main-visual__inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin-inline: auto;
}

.main-visual__logo {
    position: absolute;
    top: 8%;
    left: 5%;
    z-index: 3;
    width: 27%;
}

.main-visual__logo img {
    width: 100%;
}

.main-visual__catch {
    position: absolute;
    top: 12%;
    left: 3%;
    z-index: 3;
    width: 44%;
}

.main-visual__catch img {
    width: 100%;
}

.main-visual__catch-sub {
    position: absolute;
    top: 56%;
    left: 6.7%;
    z-index: 3;
}

.main-visual__catch-sub img {
    width: 100%;
}

.main-visual__liver {
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 2;
    width: 65%;
}

.main-visual__liver img {
    width: 100%;
}

.main-visual__action {
    position: absolute;
    top: 66%;
    left: 5.5%;
    z-index: 4;
    width: 26%;
}

.main-visual__schedule,
.main-visual__schedule img {
    width: 100%;
}

.main-visual__cta {
    display: block;
    width: 100%;
    margin-top: 18px;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.main-visual__cta img {
    width: 100%;
}

.main-visual__benefits {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr 1fr;
    width: min(calc(100% - 80px), 1580px);
    min-height: 300px;
    margin: 0 auto 0;
    padding: 42px 55px;
    border: 3px solid #11d8e7;
    border-radius: 42px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 16px rgba(45, 31, 107, 0.22);
}

.main-visual__benefits-lead {
    display: flex;
    align-items: center;
    padding: 0 40px 0 20px;
}

.main-visual__benefits-lead > img {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 50px;
    margin: 4px 18px 0 0;
}

.main-visual__benefits-lead p {
    color: #18005F;
    font-size: clamp(9px, 2.1519vw, 34px);
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.main-visual__benefits-lead strong {
    display: block;
    margin: 5px 0 0.5em;
    font-size: 1.3em;
    line-height: 1.15;
}

.main-visual__benefits-lead strong span {
    display: inline-block;
    margin-inline: 5px;
    color: transparent;
    font-size: 2.5em;
    line-height: 1;
    background:
        radial-gradient(circle at 5% 15%, #22cff4 0%, transparent 42%),
        radial-gradient(circle at 85% 45%, #d552ef 0%, transparent 55%),
        linear-gradient(135deg, #27c9f5 0%, #8b83f8 45%, #c769f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-visual__benefit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    text-align: center;
}

.main-visual__benefit::before {
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background: #b9b9b9;
    content: "";
}

.main-visual__benefit img {
    width: 57%;
    height: auto;
    margin: 0 0 18px;
    object-fit: contain;
}

.main-visual__benefit p {
    color: #160c62;
    font-size: clamp(9px, 1.4557vw, 23px);
    font-weight: 700;
    line-height: 1.55;
}

.main-visual__anim {
    opacity: 0;
    animation: none;
}

.main-visual.is-ready .main-visual__anim--logo {
    animation: mainVisualFadeUp 0.85s 0.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.main-visual.is-ready .main-visual__anim--liver {
    animation: mainVisualLiver 1.25s 0.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.main-visual.is-ready .main-visual__anim--catch {
    animation: mainVisualFadeLeft 1s 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.main-visual.is-ready .main-visual__anim--sub {
    animation: mainVisualFadeUp 0.8s 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.main-visual.is-ready .main-visual__anim--action {
    animation: mainVisualFadeUp 0.85s 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.main-visual.is-ready .main-visual__anim--benefits {
    animation: mainVisualFadeUp 0.85s 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.main-visual__anim--sub p {
    font-size: clamp(9px, 1.0417vw, 20px);
    font-weight: 600;
}

@media screen and (max-width: 767px) {

    .main-visual {
        padding-bottom: clamp(50px, 14vw, 60px);
    }

    .main-visual__partners {
        padding: 12px 10px;
    }

    .main-visual__partners-inner {
        display: flex;
        flex-wrap: nowrap;
        gap: 3.5%;
        width: 100%;
    }

    .main-visual__partner--jr {
        width: 10%;
    }

    .main-visual__partner--wester {
        width: 18%;
    }

    .main-visual__partner--virtual-osaka {
        width: 21%;
    }

    .main-visual__partner--reality,
    .main-visual__partner--mvirtual {
        width: 19%;
    }

    .main-visual__body {
        height: auto;
        overflow: hidden;
    }

    .main-visual__bg {
        display: none;
    }

    .main-visual__inner {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 35px 20px 105px;
    }

    .main-visual__logo {
        position: relative;
        top: auto;
        left: auto;
        order: 1;
        width: min(76%, 350px);
        margin-inline: auto;
    }

    .main-visual__catch {
        position: relative;
        top: auto;
        left: auto;
        order: 2;
        width: 100%;
        margin: auto !important;
    }

    .main-visual__catch-sub {
        position: relative;
        top: auto;
        left: auto;
        order: 3;
        width: 100%;
        margin: -1em auto 0;
    }

    .main-visual__liver {
        position: relative;
        top: auto;
        right: auto;
        order: 4;
        width: calc(100% + 80px);
        margin: -6% -40px 0;
    }

    .main-visual__action {
        position: relative;
        top: auto;
        left: auto;
        order: 5;
        width: min(88%, 420px);
        margin: -10px auto 0;
    }

    .main-visual__cta {
        margin-top: 14px;
    }

    .main-visual__benefits {
        display: grid;
        grid-template-columns: 1fr;
        width: calc(100% - 40px);
        min-height: 0;
        margin: -60px auto 0;
        padding: 28px 22px;
        border-width: 2px;
        border-radius: 24px;
    }

    .main-visual__benefits-lead {
        justify-content: center;
        padding: 0 0 26px;
    }

    .main-visual__benefits-lead > img {
        width: 38px;
        margin: 3px 14px 0 0;
    }

    .main-visual__benefits-lead p {
        font-size: 18px;
        line-height: 1.45;
    }

    .main-visual__benefits-lead strong {
        font-size: 25px;
    }

    .main-visual__benefits-lead strong span {
        font-size: 46px;
    }

    .main-visual__benefit {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 18px;
        min-height: 110px;
        padding: 18px 8px;
        text-align: left;
    }

    .main-visual__benefit::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 1px;
    }

    .main-visual__benefit p {
        font-size: 15px;
        line-height: 1.6;
    }

    .main-visual.is-ready .main-visual__anim--logo {
        animation: mainVisualSpFadeUp 0.7s 0.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .main-visual.is-ready .main-visual__anim--liver {
        animation: mainVisualSpLiver 0.95s 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .main-visual.is-ready .main-visual__anim--catch {
        animation: mainVisualSpFadeUp 0.75s 0.18s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .main-visual.is-ready .main-visual__anim--sub {
        animation: mainVisualSpFadeUp 0.7s 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .main-visual.is-ready .main-visual__anim--action {
        animation: mainVisualSpFadeUp 0.75s 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .main-visual.is-ready .main-visual__anim--benefits {
        animation: mainVisualSpFadeUp 0.8s 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .main-visual__anim--sub p {
        font-size: clamp(9px, 3.5202vw, 27px);
        text-align: center;
    }

}

@media (hover: hover) {

    .main-visual__cta:hover {
        transform: translateY(-4px);
        filter: brightness(1.05);
    }

}

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

    .main-visual__cta {
        transition: none;
    }

    .main-visual__anim {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

}

@keyframes mainVisualFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(3px);
    }

    60% {
        filter: blur(0);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes mainVisualFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-7%);
        filter: blur(4px);
    }

    60% {
        filter: blur(0);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes mainVisualLiver {
    from {
        opacity: 0;
        transform: translate(6%, 4%) scale(0.92);
        filter: blur(6px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes mainVisualSpFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mainVisualSpLiver {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.975);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================================
    05. 応援方法
======================================================== */

.howto {
    position: relative;
    z-index: 1;
    padding: 130px 20px 100px;
    padding-top: var(--space-section-lg);
    padding-bottom: var(--space-section-md);
}

.howto__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.howto__lead {
    margin-top: var(--space-content-md);
    color: #56627f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
}

.howto__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    margin-top: var(--space-content-lg);
}

.howto__step {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    min-height: clamp(330px, 29.6875vw, 380px);
    padding: clamp(20px, 1.9531vw, 25px) clamp(10px, 0.9375vw, 12px) clamp(16px, 1.5625vw, 20px);
    border: 2px solid #d6d9f4;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.howto__number {
    color: #7588f1;
    font-size: clamp(34px, 3.8281vw, 49px);
    font-weight: 800;
    line-height: 1;
}

.howto__title {
    margin-top: clamp(20px, 1.875vw, 24px);
    color: #485474;
    font-size: clamp(16px, 1.7188vw, 22px);
    font-weight: 700;
    line-height: 1.4;
}

.howto__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 145px;
    margin-top: 15px;
}

.howto__icon img {
    width: auto;
    max-width: 90%;
    max-height: 115px;
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.howto__text {
    margin-top: auto;
    margin-bottom: 0;
    color: #59647e;
    font-size: clamp(14px, 1.4063vw, 18px);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.howto__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.howto__arrow img {
    width: 26px;
    opacity: 0.55;
    transition: opacity 0.3s ease, translate 0.3s ease, filter 0.3s ease;
}

.howto__notes {
    margin-top: var(--space-content-md);
    color: #66718d;
    font-size: clamp(13px, 1.4844vw, 19px);
    line-height: 1.8;
}

.howto__notes p + p {
    margin-top: 8px;
}

.howto__cta-wrap {
    width: 100%;
    margin-top: var(--space-content-lg);
}

.howto__steps.is-effect-active .howto__arrow img {
    animation: howtoArrowFlow 1.1s ease-in-out 2;
}

.howto__steps.is-effect-active .howto__arrow:nth-of-type(4) img {
    animation-delay: 0.12s;
}

.howto__steps.is-effect-active .howto__arrow:nth-of-type(6) img {
    animation-delay: 0.24s;
}

@media screen and (max-width: 1100px) {

    .howto__steps {
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
    }

}

@media screen and (max-width: 767px) {

    .howto {
        padding: 80px 20px 65px;
        padding-top: var(--space-section-lg);
        padding-bottom: var(--space-section-md);
    }

    .howto__lead {
        margin-top: var(--space-content-md);
        font-size: clamp(15px, 4.3vw, 17px);
        line-height: 1.7;
    }

    .howto__steps {
        display: block;
        margin-top: var(--space-content-lg);
    }

    .howto__step {
        position: relative;
        min-height: 0;
        padding: 20px 14px 18px;
        border-radius: 18px;
        will-change: auto;
    }

    .howto__number {
        font-size: clamp(32px, 9vw, 38px);
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .howto__title {
        margin-top: 14px;
        font-size: clamp(9px, 5.3333vw, 40px);
        text-align: center;
    }

    .howto__icon {
        height: 115px;
        margin-top: 12px;
    }

    .howto__icon img {
        max-height: 95px;
    }

    .howto__text {
        font-size: clamp(13px, 3.7vw, 15px);
        line-height: 1.5;
    }

    .howto__arrow {
        height: 42px;
        transform: rotate(90deg);
    }

    .howto__arrow img {
        width: 22px;
    }

    .howto__notes {
        margin-top: var(--space-content-md);
        font-size: clamp(11px, 3.4vw, 13px);
        line-height: 1.7;
    }

    .howto__notes p + p {
        margin-top: 10px;
    }

    .howto__cta-wrap {
        margin-top: var(--space-content-lg);
    }

}

@media (hover: hover) {

    .howto__step:hover {
        border-color: rgba(139, 112, 245, 0.42);
        box-shadow: 0 14px 35px rgba(62, 69, 125, 0.10);
        translate: 0 -5px;
    }

    .howto__step:hover .howto__icon img {
        scale: 1.04;
    }

}

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

    .howto__arrow img {
        transition: none !important;
        animation: none !important;
    }

}

@keyframes howtoArrowFlow {
    0%,
    100% {
        opacity: 0.55;
        translate: -4px 0;
        filter: none;
    }

    50% {
        opacity: 1;
        translate: 5px 0;
        filter: drop-shadow(0 0 7px rgba(116, 94, 244, 0.35));
    }
}

/* ========================================================
    06. WESTER CTA
======================================================== */

.wester-cta {
    display: block;
    width: min(38.0469vw, 487px);
    margin-right: auto;
    margin-left: auto;
    transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.wester-cta img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {

    .wester-cta {
        width: min(82vw, 360px);
        margin-right: auto;
        margin-left: auto;
    }

}

@media (hover: hover) {

    .wester-cta:hover {
        transform: translateY(-3px);
        translate: 0 -4px;
        filter: brightness(1.035) drop-shadow(0 7px 10px rgba(63, 66, 128, 0.13));
    }

}

/* ========================================================
    07. 特典
======================================================== */

.benefits {
    position: relative;
    z-index: 1;
    padding: 40px 20px 130px;
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-md);
    isolation: isolate;
}

.benefits__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.benefits__lead {
    margin-top: var(--space-content-md);
    color: #56627f;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.benefits__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 23.5156vw));
    justify-content: space-between;
    gap: 0;
    margin-top: var(--space-content-lg);
}

.benefits__item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(23.5156vw, 301px);
    min-width: 0;
    min-height: 660px;
    padding: 20px clamp(14px, 1.4844vw, 19px) 28px;
    overflow: hidden;
    border: 2px solid #d5d8f2;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.benefits__band {
    position: relative;
    width: min(16.9531vw, 217px);
    margin: 0 0px;
}

.benefits__band img {
    display: block;
    width: 100%;
    height: auto;
}

.benefits__band span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 0 15px;
    padding-inline: clamp(8px, 0.7813vw, 10px);
    color: #263d83;
    font-size: clamp(10px, 1.0938vw, 14px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.benefits__title {
    min-height: 85px;
    margin-top: 30px;
    color: #17275c;
    font-size: clamp(18px, 1.9531vw, 25px);
    font-weight: 800;
    line-height: 1.55;
}

.benefits__text {
    min-height: 100px;
    margin-top: 30px;
    color: #66718d;
    font-size: clamp(13px, 1.3281vw, 17px);
    font-weight: 500;
    line-height: 1.7;
}

.benefits__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    margin-top: 15px;
}

.benefits__image img {
    width: auto;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefits__note {
    margin-top: auto;
    padding-top: 25px;
    color: #66718d;
    font-size: clamp(11px, 1.1719vw, 15px);
    line-height: 1.75;
}

.benefits::before {
    position: absolute;
    top: 12%;
    right: -20%;
    z-index: -1;
    width: min(55vw, 850px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #b665f2;
    opacity: 0.065;
    filter: blur(90px);
    content: "";
    pointer-events: none;
}

@media screen and (max-width: 1100px) {

    .benefits__item {
        min-height: 620px;
    }

}

@media screen and (max-width: 767px) {

    .benefits {
        padding: 20px 20px 80px;
        padding-top: var(--space-section-sm);
        padding-bottom: var(--space-section-md);
    }

    .benefits__lead {
        margin-top: var(--space-content-md);
        font-size: 16px;
        line-height: 1.7;
    }

    .benefits__list {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: var(--space-content-lg);
    }

    .benefits__item {
        width: 100%;
        min-height: 0;
        padding: 20px 17px 25px;
        border-radius: 18px;
        will-change: auto;
    }

    .benefits__band {
        width: min(68%, 217px);
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .benefits__band span {
        font-size: clamp(10px, 3.2vw, 12px);
    }

    .benefits__title {
        min-height: 0;
        margin-top: 24px;
        font-size: clamp(18px, 5.1vw, 21px);
        text-align: center;
    }

    .benefits__text {
        min-height: 0;
        margin-top: 20px;
        font-size: clamp(13px, 3.8vw, 15px);
        text-align: center;
    }

    .benefits__image {
        height: auto;
        min-height: 160px;
        margin-top: 25px;
    }

    .benefits__image img {
        max-height: 170px;
    }

    .benefits__note {
        margin-top: 20px;
        padding-top: 0;
        font-size: clamp(11px, 3.2vw, 13px);
    }

}

@media (hover: hover) {

    .benefits__item:hover {
        box-shadow: 0 14px 32px rgba(83, 74, 171, 0.13);
        translate: 0 -6px;
    }

    .benefits__item:hover .benefits__image img {
        scale: 1.025;
    }

}

/* ========================================================
    08. 参加ライバー
======================================================== */

.liver {
    position: relative;
    z-index: 1;
    padding: 80px 20px 140px;
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-md);
}

.liver__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.liver__heading span {
    display: inline-block;
    margin-inline: 0.05em;
    color: transparent;
    font-size: 2.193em;
    line-height: 0.9;
    vertical-align: -0.08em;
    background:
        radial-gradient(circle at 5% 15%, #22cff4 0%, transparent 42%),
        radial-gradient(circle at 85% 45%, #d552ef 0%, transparent 55%),
        linear-gradient(135deg, #27c9f5 0%, #8b83f8 45%, #c769f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.liver__lead {
    margin-top: var(--space-content-sm);
    color: #56627f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.liver__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 23.5156vw));
    justify-content: space-between;
    gap: 35px 20px;
    column-gap: 0;
    margin-top: var(--space-content-lg);
}

.liver-card:nth-last-child(3) {
    grid-column: 1 / 2;
    transform: translateX(50%);
}

.liver-card:nth-last-child(2) {
    grid-column: 2 / 3;
    transform: translateX(50%);
}

.liver-card:last-child {
    grid-column: 3 / 4;
    transform: translateX(50%);
}

.liver-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(23.5156vw, 301px);
    min-width: 0;
    min-height: 470px;
    padding: 20px 18px clamp(72px, 6.25vw, 80px);
    border: 2px solid #18cce1;
    border-right-color: #9568f5;
    border-bottom-color: #9568f5;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 8px rgba(37, 44, 91, 0.12);
    transition: box-shadow 0.3s ease;
}

.liver-card__avatar {
    width: min(14.9219vw, 191px);
    aspect-ratio: 1;
    padding: 3px;
    overflow: hidden;
    border: 2px solid #6fc9ff;
    border-right-color: #b36bf5;
    border-radius: 50%;
    background: #fff;
    transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), scale 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.liver-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.liver-card__name {
    margin-top: clamp(10px, 1.0938vw, 14px);
    color: #17275c;
    font-size: clamp(18px, 2.0313vw, 26px);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.liver-card__line {
    width: 100%;
    height: 3px;
    margin-top: clamp(6px, 0.625vw, 8px);
    background: linear-gradient(90deg, #0bd8dd 0%, #b45af2 100%);
}

.liver-card__label {
    margin-top: clamp(12px, 1.1719vw, 15px);
    color: #ff6cac;
    font-size: clamp(14px, 1.5625vw, 20px);
    font-weight: 700;
    line-height: 1.3;
}

.liver-card__products {
    width: 100%;
    margin-top: 8px;
    padding-inline: 4px;
}

.liver-card__product {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 9px 3px;
    color: #17275c;
    font-size: clamp(11px, 1.0938vw, 14px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.liver-card__product + .liver-card__product {
    position: relative;
}

.liver-card__product + .liver-card__product::before {
    position: absolute;
    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d8dcef 15%, #d8dcef 85%, transparent 100%);
    content: "";
}

.liver-card__button {
    position: absolute;
    right: clamp(12px, 1.4063vw, 18px);
    bottom: clamp(18px, 1.7188vw, 22px);
    left: clamp(12px, 1.4063vw, 18px);
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 8px 35px 8px 20px;
    color: #fff;
    font-size: clamp(9px, 1.0938vw, 14px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    border: 0;
    background: url("../img/cta_liver.png") center / 100% 100% no-repeat;
    box-shadow: none;
    filter: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}
.liver-card__button--disabled {
    pointer-events: none;
    cursor: default;

    background: #d9dce5;
    border-color: #c9ccd5;
    color: #7d8290;

    box-shadow: none;
    padding: 0.8em 0!important;
    text-align: center;
}

.liver-card__button span {
    position: absolute;
    top: 50%;
    right: 14px;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-52%);
}

.liver .section-heading__title {
    font-size: clamp(34px, 4.4531vw, 57px);
    line-height: 1.25;
}

.liver__coupon-guide {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(100%, 760px);
    margin: clamp(32px, 3.125vw, 40px) auto 0;
    color: #17275c;
    text-align: center;
}

.liver__coupon-guide strong {
    font-size: clamp(16px, 1.5625vw, 20px);
    font-weight: 800;
    line-height: 1.5;
}

.liver__coupon-guide > span {
    margin-top: 5px;
    color: #66718d;
    font-size: clamp(12px, 1.1719vw, 15px);
    font-weight: 600;
    line-height: 1.55;
}

.liver__coupon-guide em {
    justify-content: center;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(36, 205, 232, 0.1), rgba(214, 75, 225, 0.1));
    color: #5966d9;
    font-size: clamp(11px, 1.0938vw, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
}

.liver__coupon-guide + .liver__list {
    margin-top: clamp(25px, 2.7344vw, 35px);
}

@media screen and (max-width: 1000px) {

    .liver-card:nth-last-child(3),
    .liver-card:nth-last-child(2),
    .liver-card:last-child {
        grid-column: auto;
        transform: none;
    }

}

@media screen and (max-width: 767px) {

    .liver {
        padding: 60px 16px 80px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .liver__heading span {
        font-size: 1.9em;
        line-height: 0.95;
        vertical-align: -0.06em;
    }

    .liver__lead {
        margin-top: var(--space-content-sm);
        font-size: clamp(15px, 4.3vw, 17px);
    }

    .liver__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10px;
        column-gap: 10px;
        margin-top: var(--space-content-lg);
    }

    .liver-card {
        width: 100%;
        min-height: 370px;
        padding: 14px 10px 62px;
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(37, 44, 91, 0.11);
        will-change: auto;
    }

    .liver-card__avatar {
        width: min(72%, 135px);
    }

    .liver-card__name {
        font-size: clamp(16px, 4.6vw, 18px);
    }

    .liver-card__line {
        height: 2px;
    }

    .liver-card__label {
        margin-top: 10px;
        font-size: clamp(12px, 3.6vw, 14px);
    }

    .liver-card__button {
        right: 10px;
        bottom: 14px;
        left: 10px;
        min-height: 36px;
        padding: 7px 25px 7px 8px;
        font-size: clamp(10px, 3vw, 12px);
    }

    .liver-card__button span {
        right: 9px;
        font-size: 20px;
    }

    .liver .section-heading__title {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.3;
    }

    .liver__coupon-guide {
        gap: 8px;
        font-size: clamp(14px, 4vw, 16px);
        width: 100%;
        margin-top: 26px;
    }

    .liver__coupon-guide + .liver__list {
        margin-top: 25px;
    }

    .liver__coupon-guide strong {
        font-size: 15px;
    }

    .liver__coupon-guide > span {
        max-width: 310px;
        margin-top: 6px;
        font-size: 12px;
    }

    .liver__coupon-guide em {
        margin-top: 10px;
        padding: 6px 12px;
        font-size: 11px;
    }

    .liver-card__product {
        font-size: clamp(11px, 3.3vw, 13px);
    }

}

@media screen and (max-width: 390px) {

    .liver {
        padding-inline: 12px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .liver__list {
        row-gap: 14px;
    }

    .liver-card {
        min-height: 350px;
        padding-inline: 8px;
        padding-bottom: 62px;
    }

}

@media (hover: hover) {

    .liver-card__button:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
    }

    .liver-card:hover {
        box-shadow: 0 10px 22px rgba(42, 41, 102, 0.14);
        translate: 0 -4px;
    }

    .liver-card:hover .liver-card__avatar {
        box-shadow: 0 0 0 5px rgba(108, 205, 241, 0.08), 0 0 20px rgba(160, 98, 242, 0.14);
        translate: 0 -3px;
        scale: 1.025;
    }

    .liver-card:hover .liver-card__avatar img {
        scale: 1.035;
    }

}

/* ========================================================
    09. ライバーモーダル
======================================================== */

.liver-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.liver-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.liver-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
}

.liver-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 1280px);
    max-height: calc(100vh - 60px);
    padding: 45px 55px 35px;
    overflow-y: auto;
    border: 3px solid #1dd7df;
    border-right-color: #a35df4;
    border-bottom-color: #a35df4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.liver-modal.is-open .liver-modal__dialog {
    transform: translateY(0) scale(1);
}

.liver-modal__close {
    position: absolute;
    top: 10px;
    right: 18px;
    z-index: 5;
    width: 42px;
    height: 42px;
    color: #777;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.liver-modal__product {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr) 230px;
    align-items: center;
    gap: 35px;
}

.liver-modal__product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #f6f6f6;
}

.liver-modal__product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.liver-modal__product-info {
    min-width: 0;
    padding-block: 5px;
}

.liver-modal__recommend {
    color: #dc55dc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.liver-modal__recommend-ja {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 2px;
    color: #d94bdc;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.liver-modal__recommend-ja span {
    color: #6573ef;
    font-size: 13px;
    font-weight: 700;
}

.liver-modal__product-title {
    margin-top: 16px;
    color: #17275c;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.liver-modal__conversion-step {
    margin-top: 24px;
}

.liver-modal__conversion-step--product {
    margin-top: 18px;
}

.liver-modal__conversion-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: #17275c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.liver-modal__conversion-heading strong {
    font-weight: 800;
}

.liver-modal__step-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: linear-gradient(100deg, #626df3, #d94de5);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
}

.liver-modal__product-description {
    margin-top: 18px;
    color: #56627f;
    font-size: 15px;
    line-height: 1.7;
}

.liver-modal__coupon {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    margin-top: 0;
    overflow: hidden;
    border: 2px solid #25bde6;
    border-radius: 12px;
}

.liver-modal__coupon-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    padding: 10px 10px;
    color: #fff;
    text-align: center;
    background: linear-gradient(120deg, #f650c9 0%, #a65cf0 100%);
}

.liver-modal__coupon-label strong {
    font-size: 32px;
    line-height: 1;
}

.liver-modal__coupon-label span {
    margin-left: 3px;
    font-size: 16px;
    font-weight: 800;
}

.liver-modal__coupon-label small {
    width: 100%;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
}

.liver-modal__coupon-code {
    padding: 8px 12px;
    background: #e5f8ff;
}

.liver-modal__coupon-code > span {
    display: block;
    margin-bottom: 4px;
    color: #596af0;
    font-size: 12px;
    font-weight: 700;
}

.liver-modal__coupon-code-row {
    display: flex;
    align-items: stretch;
}

.liver-modal__coupon-code code {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    padding: 7px 10px;
    color: #17275c;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    background: #fff;
}

.liver-modal__copy {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #5170dd;
    font-size: 12px;
    font-weight: 700;
    background: #d6efff;
}

.liver-modal__coupon-any-product {
    margin-top: 10px;
    padding: 10px 13px;
    border: 1px solid rgba(101, 115, 239, 0.12);
    border-radius: 9px;
    background: linear-gradient(100deg, rgba(38, 204, 232, 0.07), rgba(216, 76, 229, 0.07));
}

.liver-modal__coupon-any-product > strong {
    display: block;
    color: #5966db;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.liver-modal__coupon-any-product p {
    margin-top: 4px;
    color: #626d88;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.55;
}

.liver-modal__coupon-any-product p strong {
    color: #5966db;
    font-size: inherit;
    font-weight: 800;
}

.liver-modal__product-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 390px);
    min-height: 52px;
    margin: 0 auto;
    padding: 10px 45px 10px 25px;
    border: 3px solid #fff;
    border-radius: 30px;
    background: linear-gradient(100deg, #d848e6 0%, #fa6ea8 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 0 #9449a9, 0 4px 7px rgba(27, 31, 71, 0.28);
    transition: translate 0.25s ease, scale 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.liver-modal__product-link strong {
    font: inherit;
    font-weight: 800;
}

.liver-modal__product-link > span {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 25px;
    line-height: 1;
    transform: translateY(-53%);
}

.liver-modal__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    padding-left: 35px;
    border-left: 1px solid #aaa;
}

.liver-modal__avatar {
    width: 140px;
    aspect-ratio: 1;
    padding: 2px;
    overflow: hidden;
    border: 2px solid #6ccdf1;
    border-right-color: #ae67f1;
    border-radius: 50%;
}

.liver-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.liver-modal__name {
    margin-top: 15px;
    color: #17275c;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.liver-modal__name-en {
    margin-top: 4px;
    color: #5c6b96;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-align: center;
}

.liver-modal__sns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.liver-modal__sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 44px;
    padding: 9px 12px;
    border: 1px solid #d8d8e8;
    border-radius: 999px;
    background: #fff;
    transition: translate 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.liver-modal__sns img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.liver-modal__slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
}

.liver-modal__prev,
.liver-modal__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    background: #888;
}

.liver-modal__dots {
    display: flex;
    gap: 8px;
}

.liver-modal__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
}

.liver-modal__dot.is-active {
    background: #7353ed;
}

.liver-modal__liver-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    width: min(100%, 700px);
    margin: 0 auto 32px;
}

.liver-modal__liver-prev,
.liver-modal__liver-next {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: none;
    color: #6573ef;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s ease, translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.liver-modal__liver-prev {
    justify-content: flex-start;
}

.liver-modal__liver-next {
    justify-content: flex-end;
}

.liver-modal__liver-prev > span:first-child,
.liver-modal__liver-next > span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(101, 115, 239, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6573ef;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(58, 66, 130, 0.08);
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        scale 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
    padding-bottom: 0;
    font-family: Arial, sans-serif;
    position: relative;
    font-size: 0;
}

.liver-modal__liver-prev > span:first-child::before,
.liver-modal__liver-next > span:last-child::before {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transform: translate(-50%, -54%);
}

.liver-modal__liver-prev > span:first-child::before {
    content: "‹";
}

.liver-modal__liver-next > span:last-child::before {
    content: "›";
}

.liver-modal__liver-position {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    min-width: 72px;
    margin: 0;
    color: #a2a8c0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}

.liver-modal__liver-current {
    background: linear-gradient(100deg, #17cee5 0%, #7768f3 52%, #dd4de4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 22px;
    font-weight: 800;
}

.liver-modal__other-product-note {
    width: min(100%, 390px);
    margin: 8px auto 0;
    color: #7a8299;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
}

@media screen and (max-width: 1000px) {

    .liver-modal__dialog {
        padding: 45px 35px 30px;
    }

    .liver-modal__product {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .liver-modal__profile {
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 20px;
        padding: 20px 0 0;
        border-top: 1px solid #ddd;
        border-left: 0;
    }

    .liver-modal__avatar {
        width: 90px;
    }

    .liver-modal__name,
    .liver-modal__name-en,
    .liver-modal__sns {
        margin-top: 0;
    }

}

@media screen and (max-width: 767px) {

    .liver-modal {
        align-items: flex-start;
        padding: 15px;
        overflow-y: auto;
    }

    .liver-modal__dialog {
        width: 100%;
        max-height: none;
        margin: auto 0;
        padding: 45px 18px 25px;
        border-width: 2px;
        border-radius: 16px;
    }

    .liver-modal__product {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .liver-modal__product-image {
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
    }

    .liver-modal__product-info {
        width: 100%;
        margin-top: 25px;
    }

    .liver-modal__conversion-step {
        margin-top: 20px;
    }

    .liver-modal__conversion-step--product {
        margin-top: 16px;
    }

    .liver-modal__conversion-heading {
        gap: 7px;
        margin-bottom: 8px;
        font-size: 12px;
    }

    .liver-modal__step-label {
        padding: 4px 7px;
        font-size: 8px;
    }

    .liver-modal__coupon-any-product {
        margin-top: 8px;
        padding: 9px 10px;
    }

    .liver-modal__coupon-any-product > strong {
        font-size: 10px;
    }

    .liver-modal__coupon-any-product p {
        font-size: 9px;
    }

    .liver-modal__product-link {
        width: 100%;
        min-height: 50px;
        padding: 9px 38px 9px 20px;
        font-size: 14px;
    }

    .liver-modal__recommend-ja {
        display: block;
        font-size: 21px;
    }

    .liver-modal__recommend-ja span {
        display: block;
        margin-top: 5px;
        font-size: 12px;
    }

    .liver-modal__product-title {
        margin-top: 15px;
        font-size: 19px;
    }

    .liver-modal__product-description {
        margin-top: 12px;
        font-size: 14px;
    }

    .liver-modal__coupon {
        grid-template-columns: 115px minmax(0, 1fr);
    }

    .liver-modal__coupon-label strong {
        font-size: 25px;
    }

    .liver-modal__coupon-code code {
        font-size: 12px;
    }

    .liver-modal__profile {
        display: grid;
        grid-template-columns: 75px 1fr;
        gap: 5px 15px;
        width: 100%;
        margin-top: 30px;
        padding-top: 25px;
    }

    .liver-modal__avatar {
        grid-row: 1 / 4;
        width: 75px;
    }

    .liver-modal__name {
        align-self: end;
        font-size: 18px;
        text-align: left;
    }

    .liver-modal__name-en {
        text-align: left;
    }

    .liver-modal__sns {
        justify-content: flex-start;
        gap: 10px;
        margin-top: 8px;
    }

    .liver-modal__sns a {
        width: 82px;
        height: 40px;
        padding: 8px 10px;
    }

    .liver-modal__sns img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
    }

    .liver-modal__slider-controls {
        margin-top: 18px;
    }

    .liver-modal__liver-nav {
        gap: 10px;
        width: 100%;
        margin-bottom: 22px;
    }

    .liver-modal__liver-prev,
    .liver-modal__liver-next {
        gap: 7px;
        padding-block: 6px;
        font-size: 11px;
    }

    .liver-modal__liver-prev > span:first-child,
    .liver-modal__liver-next > span:last-child {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 0;
    }

    .liver-modal__liver-position {
        min-width: 55px;
        font-size: 10px;
    }

    .liver-modal__liver-current {
        font-size: 18px;
    }

}

@media (hover: hover) {

    .liver-modal__close:hover {
        color: #17275c;
        transform: rotate(90deg);
    }

    .liver-modal__liver-prev:hover {
        color: #765bf0;
        translate: -3px 0;
    }

    .liver-modal__liver-next:hover {
        color: #765bf0;
        translate: 3px 0;
    }

    .liver-modal__liver-prev:hover > span:first-child,
    .liver-modal__liver-next:hover > span:last-child {
        border-color: rgba(118, 91, 240, 0.55);
        background: rgba(246, 244, 255, 0.96);
        color: #765bf0;
        scale: 1.06;
        box-shadow: 0 5px 16px rgba(88, 75, 177, 0.14);
    }

}

@media screen and (max-width: 390px) {

    .liver-modal__liver-nav {
        gap: 6px;
    }

    .liver-modal__liver-nav-text {
        display: none;
    }

    .liver-modal__liver-prev,
    .liver-modal__liver-next {
        gap: 0;
    }

    .liver-modal__liver-position {
        min-width: 52px;
    }

}

/* ========================================================
    10. クーポン
======================================================== */

.coupon {
    position: relative;
    z-index: 1;
    padding: 100px 20px 130px;
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-md);
    isolation: isolate;
}

.coupon__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.coupon__heading {
    text-align: center;
}

.coupon__title {
    color: #17275c;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.35;
}

.coupon__title-gradient {
    display: inline-block;
    color: transparent;
    background: linear-gradient(105deg, #1bcde8 0%, #536cf3 40%, #ca54ee 72%, #ba66f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon__lead {
    margin-top: var(--space-content-md);
    color: #56627f;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
}

.coupon__lead strong {
    color: #39496d;
    font-weight: 800;
}

.coupon__ticket {
    width: min(100%, 850px);
    margin: 75px auto 0;
    margin-top: var(--space-content-lg);
}

.coupon__ticket img {
    width: 100%;
}

.coupon__merits {
    display: grid;
    grid-template-columns: minmax(0, 41.25%) minmax(0, 17.5%) minmax(0, 41.25%);
    align-items: center;
    width: 100%;
    margin-top: var(--space-content-lg);
}

.coupon__merit {
    display: grid;
    grid-template-columns: min(9.1406vw, 117px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 1.9531vw, 25px);
    width: 100%;
    min-height: 220px;
    padding: clamp(25px, 2.7344vw, 35px) clamp(20px, 2.3438vw, 30px);
    border: 2px solid #d6d9f4;
    border-radius: 20px;
    transition: box-shadow 0.3s ease;
}

.coupon__merit--shopping {
    background: rgba(255, 242, 251, 0.82);
}

.coupon__merit--support {
    background: rgba(237, 249, 255, 0.82);
}

.coupon__merit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coupon__merit-icon img {
    display: block;
    width: min(9.1406vw, 117px);
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.coupon__merit-title {
    color: #17275c;
    font-size: clamp(18px, 2.0313vw, 26px);
    font-weight: 800;
    line-height: 1.3;
}

.coupon__merit-title span {
    color: #0088e9;
    border-bottom: 2px solid #866bf4;
}

.coupon__merit-text {
    margin-top: clamp(14px, 1.7188vw, 22px);
    color: #17275c;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: normal;
}

.coupon__cross {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.coupon__cross img {
    display: block;
    width: 65px;
    height: auto;
    margin: 0 auto;
}

.coupon__notes {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    width: min(100%, 900px);
    margin: 55px auto 0;
    margin-top: var(--space-content-md);
    padding: 30px 35px;
    border: 2px solid #d6d9f4;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.85);
}

.coupon__notes-icon img {
    width: 52px;
}

.coupon__notes-text {
    color: #465475;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

.coupon__notes-text p + p {
    margin-top: 4px;
}

.coupon__cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-content-lg);
}

.coupon__merit-content {
    min-width: 0;
}

.coupon::before {
    position: absolute;
    top: 18%;
    left: -22%;
    z-index: -1;
    width: min(55vw, 850px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #28cde9;
    opacity: 0.065;
    filter: blur(90px);
    content: "";
    pointer-events: none;
}

@media screen and (max-width: 1100px) {

    .coupon__title {
        font-size: 44px;
    }

    .coupon__ticket {
        width: min(80%, 750px);
    }

}

@media screen and (max-width: 767px) {

    .coupon {
        padding: 70px 20px 85px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .coupon__title {
        font-size: 31px;
        line-height: 1.4;
    }

    .coupon__lead {
        margin-top: var(--space-content-md);
        font-size: 15px;
        line-height: 1.75;
    }

    .coupon__ticket {
        width: calc(100% + 20px);
        margin-left: -10px;
        margin-top: var(--space-content-lg);
    }

    .coupon__merits {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: var(--space-content-lg);
    }

    .coupon__merit {
        grid-template-columns: clamp(75px, 24vw, 95px) minmax(0, 1fr);
        gap: clamp(14px, 4vw, 20px);
        width: 100%;
        min-height: 0;
        padding: 24px 18px;
        border-radius: 16px;
        will-change: auto;
    }

    .coupon__merit-icon img {
        width: clamp(75px, 24vw, 95px);
    }

    .coupon__merit-title {
        font-size: clamp(17px, 4.8vw, 20px);
        line-height: 1.6;
    }

    .coupon__merit-text {
        margin-top: 12px;
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.55;
    }

    .coupon__cross {
        width: 100%;
        height: 70px;
    }

    .coupon__cross img {
        width: 42px;
    }

    .coupon__notes {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 15px;
        margin-top: var(--space-content-md);
        padding: 22px 18px;
    }

    .coupon__notes-icon img {
        width: 40px;
    }

    .coupon__notes-text {
        font-size: 11px;
        line-height: 1.65;
    }

    .coupon__cta-wrap {
        margin-top: var(--space-content-lg);
    }

}

@media (hover: hover) {

    .coupon__merit:hover {
        box-shadow: 0 14px 34px rgba(51, 58, 111, 0.09);
        translate: 0 -5px;
    }

}

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

    .coupon__ticket {
        transition: none !important;
        animation: none !important;
    }

}

/* ========================================================
    Ranking Status
    Coming Soon / Final Counting / No Data
======================================================== */

.ranking-status {
    position: relative;

    width: min(100%, 980px);

    margin: var(--space-content-lg) auto 0;
    padding:
        clamp(55px, 5.4688vw, 70px)
        clamp(40px, 5.4688vw, 70px)
        clamp(50px, 5.0781vw, 65px);

    overflow: hidden;

    border: 2px solid #8edeea;
    border-right-color: #a46af4;
    border-bottom-color: #a46af4;
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(249, 252, 255, 0.98) 52%,
            rgba(253, 249, 255, 0.98) 100%
        );

    box-shadow:
        0 12px 35px rgba(49, 57, 118, 0.10);

    text-align: center;
}


/* ========================================
    Common Typography
======================================== */

.ranking-status__en {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #7b6bea;

    font-size: clamp(13px, 1.3281vw, 17px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.24em;
}


.ranking-status__title {
    position: relative;
    z-index: 2;

    margin-top: clamp(18px, 1.9531vw, 25px);

    color: #17275c;

    font-size: clamp(28px, 3.4375vw, 44px);
    font-weight: 800;
    line-height: 1.45;
}


.ranking-status__text {
    position: relative;
    z-index: 2;

    margin-top: clamp(22px, 2.3438vw, 30px);

    color: #56627f;

    font-size: clamp(16px, 1.7969vw, 23px);
    font-weight: 600;
    line-height: 1.8;
}


.ranking-status__note {
    position: relative;
    z-index: 2;

    margin-top: clamp(22px, 2.3438vw, 30px);

    color: #7b839c;

    font-size: clamp(11px, 1.1719vw, 15px);
    font-weight: 500;
    line-height: 1.7;
}


/* ========================================================
    Coming Soon
======================================================== */

.ranking-status--coming {
    min-height: 500px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Soft Glow */

.ranking-status--coming::before,
.ranking-status--coming::after {
    position: absolute;

    width: 420px;
    aspect-ratio: 1;

    border-radius: 50%;

    opacity: 0.09;
    filter: blur(65px);

    content: "";

    pointer-events: none;
}


.ranking-status--coming::before {
    top: -210px;
    left: -150px;

    background: #1bd1e7;
}


.ranking-status--coming::after {
    right: -150px;
    bottom: -220px;

    background: #d74fe3;
}


/* ========================================
    Decorative Icon
======================================== */

.ranking-status__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;

    width: 80px;
    height: 58px;

    margin: 0 auto 24px;
}


.ranking-status__icon span {
    display: block;

    width: 18px;

    border-radius: 6px 6px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #27cee5 0%,
            #786bf2 55%,
            #d950df 100%
        );

    box-shadow:
        0 5px 12px rgba(104, 102, 226, 0.16);
}


.ranking-status__icon span:nth-child(1) {
    height: 28px;
}


.ranking-status__icon span:nth-child(2) {
    height: 48px;
}


.ranking-status__icon span:nth-child(3) {
    height: 38px;
}


/* ========================================
    Open Date
======================================== */

.ranking-status__date {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: clamp(16px, 1.9531vw, 25px);

    margin-top: clamp(32px, 3.5156vw, 45px);
    padding:
        14px
        clamp(24px, 2.7344vw, 35px);

    border: 1px solid rgba(118, 105, 239, 0.20);
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 7px 22px rgba(58, 66, 130, 0.08);
}


.ranking-status__date span {
    color: #747d9c;

    font-size: clamp(10px, 1.0938vw, 14px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.12em;
}


.ranking-status__date strong {
    color: transparent;

    font-size: clamp(25px, 3.125vw, 40px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.03em;

    background:
        linear-gradient(
            100deg,
            #16cde4 0%,
            #7469f2 50%,
            #d74de1 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ========================================================
    Final Counting
======================================================== */

.ranking-status--counting {
    width: min(100%, 1100px);

    padding-top: clamp(55px, 5.4688vw, 70px);
}


/* ========================================
    Flow
======================================== */

.ranking-status__flow {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        45px
        minmax(0, 1fr)
        45px
        minmax(0, 1fr);

    align-items: center;

    width: min(100%, 900px);

    margin:
        clamp(45px, 4.6875vw, 60px)
        auto 0;
}


/* ========================================
    Flow Item
======================================== */

.ranking-status__flow-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
}


.ranking-status__flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 16px;

    border: 2px solid #dce0f1;
    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 7px 18px rgba(47, 55, 113, 0.08);
}


.ranking-status__flow-label {
    margin: 0 0 8px;

    color: #9ba2b9;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.13em;
}


.ranking-status__flow-item > strong {
    color: #17275c;

    font-size: clamp(14px, 1.5625vw, 20px);
    font-weight: 800;
    line-height: 1.4;

    white-space: nowrap;
}


.ranking-status__flow-item > span {
    margin-top: 7px;

    color: #7c849e;

    font-size: clamp(12px, 1.25vw, 16px);
    font-weight: 700;
    line-height: 1;
}


/* ========================================
    Complete
======================================== */

.ranking-status__flow-item--complete
.ranking-status__flow-icon {
    border-color: #ffb9dc;

    background:
        linear-gradient(
            135deg,
            #fff4fa,
            #fff
        );
}


.ranking-status__check {
    margin: 0 !important;

    color: #ed5eaa !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


/* ========================================
    Current
======================================== */

.ranking-status__flow-item--current
.ranking-status__flow-icon {
    position: relative;

    border-color: #9c75f4;

    background:
        linear-gradient(
            135deg,
            #f7f2ff,
            #fff
        );

    box-shadow:
        0 0 0 7px rgba(145, 105, 244, 0.07),
        0 8px 22px rgba(97, 75, 183, 0.15);
}


.ranking-status__flow-item--current
.ranking-status__flow-label {
    color: #8463e9;
}


.ranking-status__flow-item--current
> strong {
    color: #6949d5;
}


.ranking-status__now {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 9px !important;
    padding: 5px 11px;

    border-radius: 999px;

    background:
        linear-gradient(
            100deg,
            #7967ef,
            #c958e5
        );

    color: #fff !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: 0.08em;
}


/* ========================================
    Loader
======================================== */

.ranking-status__loader {
    width: 31px;
    height: 31px;

    margin: 0 !important;

    border: 4px solid rgba(126, 101, 235, 0.16);
    border-top-color: #8064e9;
    border-right-color: #d657df;
    border-radius: 50%;

    animation:
        rankingStatusLoader 1.1s linear infinite;
}


/* ========================================
    Future
======================================== */

.ranking-status__flow-item--future {
    opacity: 0.62;
}


.ranking-status__flow-item--future
.ranking-status__flow-icon {
    border-color: #a9e8f3;

    background:
        linear-gradient(
            135deg,
            #f0fcff,
            #fff
        );
}


.ranking-status__crown {
    margin: 0 !important;

    color: #47a8d5 !important;

    font-size: 31px !important;
    line-height: 1 !important;
}


/* ========================================
    Flow Arrow
======================================== */

.ranking-status__flow-arrow {
    color: #c7cad9;

    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;

    text-align: center;

    transform: translateY(-18px);
}


.ranking-status__flow-arrow--1 {
    color: #cba3df;
}


.ranking-status__flow-arrow--2 {
    color: #a9cfe7;
}


/* ========================================
    Counting Message
======================================== */

.ranking-status__message {
    position: relative;
    z-index: 2;

    width: min(100%, 800px);

    margin:
        clamp(45px, 4.6875vw, 60px)
        auto 0;

    padding:
        clamp(25px, 2.7344vw, 35px)
        clamp(25px, 3.5156vw, 45px);

    border: 1px solid rgba(119, 110, 229, 0.18);
    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            rgba(234, 249, 255, 0.78),
            rgba(248, 241, 255, 0.78)
        );
}


.ranking-status__message > strong {
    display: block;

    color: #5963d5;

    font-size: clamp(16px, 1.7188vw, 22px);
    font-weight: 800;
    line-height: 1.5;
}


.ranking-status__message p {
    margin-top: 15px;

    color: #56627f;

    font-size: clamp(13px, 1.4063vw, 18px);
    font-weight: 500;
    line-height: 1.8;
}


.ranking-status__message p strong {
    color: #6554d7;

    font-weight: 800;
}


/* ========================================
    Final Date
======================================== */

.ranking-status__final-date {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-top: clamp(30px, 3.125vw, 40px);
    padding: 11px 25px;

    border-radius: 999px;

    background:
        linear-gradient(
            100deg,
            rgba(33, 205, 231, 0.10),
            rgba(132, 102, 241, 0.10),
            rgba(218, 77, 225, 0.10)
        );
}


.ranking-status__final-date span {
    color: #66718e;

    font-size: clamp(11px, 1.1719vw, 15px);
    font-weight: 700;
}


.ranking-status__final-date strong {
    color: #6755db;

    font-size: clamp(18px, 2.0313vw, 26px);
    font-weight: 800;
}


/* ========================================================
    No Data
======================================================== */

.ranking-status--no-data {
    min-height: 350px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-style: dashed;
}


/* ========================================================
    Hover / Motion
======================================================== */

@media (hover: hover) {

    .ranking-status__date {
        transition:
            translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.3s ease;
    }


    .ranking-status--coming:hover
    .ranking-status__date {
        translate: 0 -3px;

        box-shadow:
            0 10px 25px rgba(58, 66, 130, 0.12);
    }

}


/* ========================================================
    SP
======================================================== */

@media screen and (max-width: 767px) {

    .ranking-status {
        width: 100%;

        margin-top: 35px;
        padding:
            42px
            18px
            38px;

        border-width: 2px;
        border-radius: 20px;

        box-shadow:
            0 8px 24px rgba(49, 57, 118, 0.08);
    }


    /* ----------------------------------------
        Typography
    ---------------------------------------- */

    .ranking-status__en {
        font-size: 11px;

        letter-spacing: 0.18em;
    }


    .ranking-status__title {
        margin-top: 16px;

        font-size: clamp(23px, 6.8vw, 28px);
        line-height: 1.45;
    }


    .ranking-status__text {
        margin-top: 20px;

        font-size: clamp(13px, 3.8vw, 15px);
        line-height: 1.75;
    }


    .ranking-status__note {
        margin-top: 20px;

        font-size: 10px;
        line-height: 1.65;
    }


    /* ----------------------------------------
        Coming Soon
    ---------------------------------------- */

    .ranking-status--coming {
        min-height: 410px;
    }


    .ranking-status--coming::before,
    .ranking-status--coming::after {
        width: 260px;

        filter: blur(55px);
    }


    .ranking-status--coming::before {
        top: -130px;
        left: -120px;
    }


    .ranking-status--coming::after {
        right: -120px;
        bottom: -140px;
    }


    .ranking-status__icon {
        gap: 6px;

        width: 65px;
        height: 48px;

        margin-bottom: 20px;
    }


    .ranking-status__icon span {
        width: 15px;
    }


    .ranking-status__icon span:nth-child(1) {
        height: 23px;
    }


    .ranking-status__icon span:nth-child(2) {
        height: 40px;
    }


    .ranking-status__icon span:nth-child(3) {
        height: 31px;
    }


    .ranking-status__date {
        gap: 13px;

        margin-top: 28px;
        padding:            11px 18px;
    }


    .ranking-status__date span {
        font-size: 9px;
    }


    .ranking-status__date strong {
        font-size: 27px;
    }


    /* ----------------------------------------
        Final Counting
    ---------------------------------------- */

    .ranking-status--counting {
        padding:
            42px
            14px
            38px;
    }


    /* ----------------------------------------
        Flow

        SPでは横3列だと窮屈なので
        縦方向のタイムラインへ変更
    ---------------------------------------- */

    .ranking-status__flow {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: min(100%, 320px);

        margin:
            35px
            auto
            0;
    }


    .ranking-status__flow-item {
        display: grid;
        grid-template-columns:
            58px
            minmax(0, 1fr);
        grid-template-rows:
            auto
            auto
            auto;

        align-items: center;
        column-gap: 16px;

        width: 100%;

        text-align: left;
    }


    .ranking-status__flow-icon {
        grid-column: 1;
        grid-row: 1 / 4;

        width: 58px;
        height: 58px;

        margin: 0;
    }


    .ranking-status__flow-label {
        grid-column: 2;
        grid-row: 1;

        margin: 0 0 5px;

        font-size: 8px;
    }


    .ranking-status__flow-item > strong {
        grid-column: 2;
        grid-row: 2;

        font-size: 15px;
        line-height: 1.4;

        white-space: normal;
    }


    .ranking-status__flow-item > span {
        grid-column: 2;
        grid-row: 3;

        justify-self: start;

        margin-top: 5px;

        font-size: 12px;
    }


    /* ----------------------------------------
        Vertical Connector
    ---------------------------------------- */

    .ranking-status__flow-arrow {
        position: relative;

        width: 58px;
        height: 42px;

        color: transparent;

        font-size: 0;

        transform: none;
    }


    .ranking-status__flow-arrow::before {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 50%;

        width: 2px;

        border-radius: 999px;

        background:
            linear-gradient(
                180deg,
                #e7a7cf 0%,
                #a779ed 50%,
                #86d8e9 100%
            );

        transform: translateX(-50%);

        content: "";
    }


    .ranking-status__flow-arrow::after {
        position: absolute;
        bottom: 3px;
        left: 50%;

        width: 7px;
        height: 7px;

        border-right: 2px solid #a779ed;
        border-bottom: 2px solid #a779ed;

        transform:
            translateX(-50%)
            rotate(45deg);

        content: "";
    }


    /* ----------------------------------------
        Flow Icons
    ---------------------------------------- */

    .ranking-status__check {
        font-size: 25px !important;
    }


    .ranking-status__loader {
        width: 26px;
        height: 26px;

        border-width: 3px;
    }


    .ranking-status__crown {
        font-size: 26px !important;
    }


    .ranking-status__now {
        margin-top: 6px !important;
        padding: 4px 9px;

        font-size: 8px !important;
    }


    /* ----------------------------------------
        Counting Message
    ---------------------------------------- */

    .ranking-status__message {
        width: 100%;

        margin-top: 35px;
        padding: 22px 17px;

        border-radius: 14px;

        text-align: left;
    }


    .ranking-status__message > strong {
        font-size: 15px;
        line-height: 1.55;

        text-align: center;
    }


    .ranking-status__message p {
        margin-top: 13px;

        font-size: 12px;
        line-height: 1.75;
    }


    /* ----------------------------------------
        Final Date
    ---------------------------------------- */

    .ranking-status__final-date {
        display: flex;
        flex-direction: column;
        gap: 4px;

        width: min(100%, 260px);

        margin-top: 28px;
        padding: 12px 20px;
    }


    .ranking-status__final-date span {
        font-size: 10px;
    }


    .ranking-status__final-date strong {
        font-size: 22px;
    }


    /* ----------------------------------------
        No Data
    ---------------------------------------- */

    .ranking-status--no-data {
        min-height: 280px;
    }

}


/* ========================================================
    Small SP
======================================================== */

@media screen and (max-width: 390px) {

    .ranking-status {
        padding-right: 14px;
        padding-left: 14px;
    }


    .ranking-status__title {
        font-size: 22px;
    }


    .ranking-status__flow {
        width: 100%;
    }


    .ranking-status__flow-item {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        column-gap: 13px;
    }


    .ranking-status__flow-icon {
        width: 52px;
        height: 52px;
    }


    .ranking-status__flow-arrow {
        width: 52px;
        height: 38px;
    }


    .ranking-status__message {
        padding:
            20px
            14px;
    }

}


/* ========================================================
    Reduced Motion
======================================================== */

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

    .ranking-status__loader {
        animation: none;
    }

}


/* ========================================================
    Animation
======================================================== */

@keyframes rankingStatusLoader {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* ========================================================
    11. ランキング
======================================================== */

.ranking {
    position: relative;
    z-index: 1;
    padding: 110px 20px 130px;
    padding-top: var(--space-section-lg);
    padding-bottom: var(--space-section-md);
    isolation: isolate;
}

.ranking__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.ranking__intro {
    margin-top: var(--space-content-sm);
    color: #4f5c7b;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

.ranking__period {
    margin-top: var(--space-content-md);
    color: #17275c;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

.ranking__period-title {
    font-size: inherit;
    font-weight: 800;
}

.ranking__top3 {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 423px) minmax(0, 380px);
    align-items: end;
    justify-content: center;
    gap: clamp(16px, 1.875vw, 24px);
    width: 100%;
    max-width: 1280px;
    margin: var(--space-content-lg) auto 0;
}

.ranking-top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: clamp(390px, 35.1563vw, 450px);
    padding: clamp(18px, 1.7188vw, 22px) clamp(16px, 1.5625vw, 20px) clamp(34px, 3.125vw, 40px);
    border: 3px solid #16d3df;
    border-right-color: #a25cf3;
    border-bottom-color: #a25cf3;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 3px 5px 8px rgba(25, 31, 76, 0.18);
    transition: box-shadow 0.3s ease;
}

.ranking-top--1 {
    width: 100%;
    min-height: clamp(455px, 41.4063vw, 530px);
    transform: translateY(-30px);
}

.ranking-top__label {
    position: relative;
    z-index: 5;
    min-width: 180px;
    padding: 8px 20px;
    color: #68583f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 2px solid #bbb;
    border-radius: 10px;
    background: #f8f8f8;
}

.ranking-top--1 .ranking-top__label {
    color: #d18c00;
    border-color: #f1ba00;
    background: #fff8d7;
}

.ranking-top--2 .ranking-top__label {
    border-color: #aaa;
    background: #f3f3f3;
}

.ranking-top--3 .ranking-top__label {
    color: #a9572c;
    border-color: #bc6635;
    background: #fff1e6;
}

.ranking-top__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72%;
    height: auto;
    aspect-ratio: 1.15 / 1;
    margin-top: clamp(28px, 2.7344vw, 35px);
}

.ranking-top--1 .ranking-top__visual {
    width: 75%;
    height: 220px;
    margin-top: clamp(45px, 4.2969vw, 55px);
}

.ranking-top__wreath {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ranking-top__avatar {
    position: relative;
    z-index: 2;
    width: 52%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid #8b77f4;
    border-radius: 50%;
    background: #fff;
}

.ranking-top--1 .ranking-top__avatar {
    width: 54%;
}

.ranking-top__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ranking-top__crown {
    position: absolute;
    top: -18%;
    left: 50%;
    z-index: 3;
    width: 29%;
    height: auto;
    transform: translateX(-50%);
    transform-origin: center bottom;
}

.ranking-top__name,
.ranking-top--1 .ranking-top__name {
    margin-top: clamp(18px, 1.9531vw, 25px);
    color: #17275c;
    font-size: clamp(22px, 2.7344vw, 35px);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.ranking-top__score-label {
    margin-top: clamp(20px, 2.1875vw, 28px);
    color: #17275c;
    font-size: clamp(19px, 2.3438vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.ranking-top__score {
    margin-top: clamp(7px, 0.7813vw, 10px);
    color: #17275c;
    font-size: clamp(26px, 3.125vw, 40px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.ranking__ambassador {
    width: min(100%, 900px);
    margin: 25px auto 60px;
}

.ranking__ambassador img {
    display: block;
    width: 100%;
    height: auto;
}

.ranking__list {
    margin-top: 30px;
    display: grid;
    gap: clamp(12px, 1.25vw, 16px);
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    margin-right: auto;
    margin-left: auto;
}

.ranking-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(110px, 14%) minmax(0, 36%) minmax(0, 50%);
    align-items: center;
    width: 100%;
    min-height: clamp(100px, 9.375vw, 120px);
    overflow: hidden;
    border: 2px solid #9edfe9;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 2px 4px 7px rgba(32, 41, 83, 0.14);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.ranking-row--hidden {
    display: none;
}

.ranking-row__rank {
    padding-left: clamp(22px, 2.7344vw, 35px);
    color: #17275c;
    font-size: clamp(32px, 4.2969vw, 55px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ranking-row__rank span {
    margin-left: 0.08em;
    font-size: 0.7273em;
    line-height: 1;
}

.ranking-row__liver {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.3438vw, 30px);
    height: auto;
    padding: 0;
    border-right: 0;
}

.ranking-row__avatar {
    flex: 0 0 auto;
    width: min(8.0469vw, 103px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #9a80f5;
    border-radius: 50%;
}

.ranking-row__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ranking-row__liver p {
    min-width: 0;
    color: #17275c;
    font-size: clamp(19px, 2.3438vw, 30px);
    font-weight: 800;
    line-height: 1.3;
}

.ranking-row__score {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.3438vw, 30px);
    padding: 0 clamp(25px, 3.125vw, 40px);
    color: #17275c;
}

.ranking-row__score span {
    flex: 0 0 auto;
    font-size: clamp(19px, 2.3438vw, 30px);
    font-weight: 700;
    line-height: 1.2;
}

.ranking-row__score strong {
    font-size: clamp(24px, 3.125vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.ranking__more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-content-md);
}

.ranking__more-button {
    position: relative;
    width: 330px;
    min-height: 52px;
    padding: 10px 50px 10px 25px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    background: url("../img/cta_ranking.svg") center / 100% 100% no-repeat;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.ranking__more-arrow {
    position: absolute;
    top: 50%;
    right: 18px;
    font-size: 25px;
    line-height: 1;
    transform: translateY(-53%) rotate(90deg);
    transition: transform 0.25s ease;
}

.ranking__more-button.is-open .ranking__more-arrow {
    transform: translateY(-53%) rotate(-90deg);
}

.ranking__empty {
    margin-top: 60px;
    color: #56627f;
    font-size: 18px;
    text-align: center;
}

.ranking-top--1 .ranking-top__score-label {
    margin-top: clamp(20px, 2.1875vw, 28px);
    color: #17275c;
    font-size: clamp(19px, 2.3438vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.ranking-top--1 .ranking-top__score {
    margin-top: clamp(7px, 0.7813vw, 10px);
    color: #17275c;
    font-size: clamp(26px, 3.125vw, 40px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.ranking-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    margin-top: var(--space-section-sm);
}

.ranking-info__box {
    padding: 55px 40px 45px;
    border: 1px solid #777;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.82);
}

.ranking-info__title {
    margin-bottom: 40px;
    color: #17275c;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.ranking-info__list {
    display: grid;
    gap: 25px;
}

.ranking-info__list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.ranking-info__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #5542bf;
    font-size: 14px;
    font-weight: 800;
    border-radius: 50%;
    background: linear-gradient(135deg, #eadbff, #d8efff);
}

.ranking-info__list p {
    padding-bottom: 22px;
    color: #465475;
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    border-bottom: 1px dashed #aaa;
}

.ranking-info__list li:last-child p {
    border-bottom: 0;
}

.ranking-top__label span {
    font-size: 1.5385em;
    line-height: 0.8;
}

.ranking-row::after {
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 50%;
    width: 1px;
    background: #c9c9c9;
    content: "";
    pointer-events: none;
}

.ranking::before {
    position: absolute;
    top: 10%;
    right: -25%;
    z-index: -1;
    width: min(55vw, 850px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #7868f3;
    opacity: 0.065;
    filter: blur(90px);
    content: "";
    pointer-events: none;
}

@media screen and (max-width: 1279px) {

    .ranking__top3 {
        grid-template-columns: minmax(0, 380fr) minmax(0, 423fr) minmax(0, 380fr);
        gap: clamp(12px, 1.875vw, 24px);
    }

    .ranking-top--1 .ranking-top__visual {
        height: clamp(155px, 17.1875vw, 220px);
    }

}

@media screen and (max-width: 1000px) {

    .ranking__ambassador {
        width: 100%;
        margin: 10px auto 40px;
    }

    .ranking-row {
        grid-template-columns: minmax(75px, 14%) minmax(0, 36%) minmax(0, 50%);
    }

    .ranking-row__rank {
        padding-left: clamp(14px, 2.5vw, 25px);
    }

    .ranking-row__liver {
        gap: clamp(10px, 2vw, 20px);
    }

    .ranking-row__score {
        gap: clamp(10px, 2vw, 20px);
        padding-inline: clamp(15px, 2.5vw, 25px);
    }

}

@media screen and (max-width: 767px) {

    .ranking {
        padding: 80px 16px 90px;
        padding-top: var(--space-section-lg);
        padding-bottom: var(--space-section-md);
    }

    .ranking__intro,
    .ranking__period {
        font-size: clamp(13px, 3.8vw, 15px);
        line-height: 1.7;
    }

    .ranking__top3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "first first" "second third";
        gap: 16px 12px;
        width: 100%;
        max-width: 430px;
        margin: 45px auto 0;
    }

    .ranking-top {
        width: 100%;
        min-height: 310px;
        padding: 14px 10px 24px;
        border-width: 2px;
        border-radius: 15px;
        transform: none;
        will-change: auto;
    }

    .ranking-top--1 {
        grid-area: first;
        width: min(100%, 245px);
        min-height: 390px;
        margin-inline: auto;
        padding: 16px 15px 28px;
    }

    .ranking-top__label {
        width: min(100%, 135px);
        min-width: 0;
        padding: 6px 8px;
        font-size: clamp(12px, 3.5vw, 14px);
        border-width: 1px;
        border-radius: 7px;
    }

    .ranking-top--1 .ranking-top__label {
        width: 145px;
        min-width: 0;
        padding: 6px 8px;
        font-size: clamp(12px, 3.5vw, 14px);
        border-width: 1px;
        border-radius: 7px;
    }

    .ranking-top__visual {
        width: 78%;
        height: auto;
        margin-top: 20px;
    }

    .ranking-top--1 .ranking-top__visual {
        width: 88%;
        height: 175px;
        margin-top: 35px;
    }

    .ranking-top__avatar {
        width: 67%;
    }

    .ranking-top--1 .ranking-top__avatar {
        width: 64%;
    }

    .ranking-top__crown {
        top: -17%;
        width: 28%;
    }

    .ranking-top__name,
    .ranking-top--1 .ranking-top__name {
        margin-top: 14px;
        font-size: clamp(16px, 4.6vw, 19px);
    }

    .ranking-top__score-label {
        margin-top: 16px;
        font-size: clamp(12px, 3.6vw, 15px);
    }

    .ranking-top__score {
        margin-top: 6px;
        font-size: clamp(17px, 4.8vw, 20px);
    }

    .ranking__ambassador {
        flex-wrap: wrap;
        width: 100%;
        min-height: 75px;
        margin: 10px auto 40px;
        padding: 16px 15px;
        font-size: 19px;
        line-height: 1.4;
        text-align: center;
        border-width: 2px;
    }

    .ranking-row {
        grid-template-columns: 52px minmax(0, 1.2fr) minmax(0, 1fr);
        min-height: 72px;
        border-width: 1px;
        border-radius: 11px;
        will-change: auto;
    }

    .ranking-row__rank {
        padding-left: 10px;
        font-size: clamp(18px, 5.2vw, 22px);
    }

    .ranking-row__rank span {
        font-size: 0.72em;
    }

    .ranking-row__liver {
        gap: 8px;
        padding: 0 8px;
    }

    .ranking-row__avatar {
        width: clamp(36px, 11vw, 44px);
    }

    .ranking-row__liver p {
        overflow: hidden;
        font-size: clamp(11px, 3.3vw, 13px);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ranking-row__score {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        justify-content: center;
        gap: 3px;
        padding: 0 8px;
        border-left: 1px solid #d8dce8;
    }

    .ranking-row__score span {
        display: block;
        font-size: clamp(9px, 2.7vw, 11px);
    }

    .ranking-row__score strong {
        display: block;
        margin-top: 3px;
        font-size: clamp(11px, 3.2vw, 14px);
    }

    .ranking__more {
        margin-top: var(--space-content-md);
    }

    .ranking__more-button {
        width: min(100%, 280px);
        min-height: 45px;
        padding-right: 42px;
        font-size: 12px;
    }

    .ranking__more-arrow {
        right: 15px;
        font-size: 22px;
    }

    .ranking-top--2 {
        grid-area: second;
    }

    .ranking-top--3 {
        grid-area: third;
    }

    .ranking-top--1 .ranking-top__score-label {
        margin-top: 16px;
        font-size: clamp(12px, 3.6vw, 15px);
    }

    .ranking-top--1 .ranking-top__score {
        margin-top: 6px;
        font-size: clamp(17px, 4.8vw, 20px);
    }

    .ranking__ambassador-main {
        margin-right: 7px;
    }

    .ranking-info {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: var(--space-section-sm);
    }

    .ranking-info__box {
        padding: 32px 20px 25px;
        border-radius: 18px;
    }

    .ranking-info__title {
        margin-bottom: 28px;
        font-size: 22px;
    }

    .ranking-info__list {
        gap: 18px;
    }

    .ranking-info__list li {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
    }

    .ranking-info__number {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .ranking-info__list p {
        padding-bottom: 17px;
        font-size: 12px;
        line-height: 1.8;
    }

    .ranking-top__label span {
        font-size: 1.4em;
    }

    .ranking-row::after {
        display: none;
    }

}

@media screen and (max-width: 390px) {

    .ranking {
        padding-right: 10px;
        padding-left: 10px;
    }

}

@media (hover: hover) {

    .ranking__more-button:hover {
        transform: translateY(-2px);
        filter: brightness(1.07);
    }

    .ranking-top:hover {
        box-shadow: 4px 10px 22px rgba(25, 31, 76, 0.16);
        translate: 0 -4px;
    }

    .ranking-row:hover {
        border-color: #76dbe9;
        box-shadow: 3px 6px 14px rgba(32, 41, 83, 0.12);
        translate: 4px 0;
    }

}

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

    .ranking-top__crown {
        transition: none !important;
        animation: none !important;
    }

}

@keyframes rankingCrownDrop {
    0% {
        opacity: 0;
        translate: 0 -15px;
        scale: 0.8;
    }

    65% {
        opacity: 1;
        translate: 0 2px;
        scale: 1.05;
    }

    100% {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* ========================================================
    12. スケジュール
======================================================== */

.schedule {
    position: relative;
    z-index: 1;
    padding: 110px 20px 120px;
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-md);
}

.schedule__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.schedule__lead {
    margin-top: var(--space-content-md);
    color: #56627f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

.schedule__steps {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 70px) minmax(0, 380px) minmax(0, 70px) minmax(0, 380px);
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1280px;
    margin: var(--space-content-lg) auto 0;
}

.schedule-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: clamp(430px, 37.5vw, 480px);
    padding: clamp(24px, 2.3438vw, 30px) clamp(22px, 2.7344vw, 35px) clamp(28px, 2.7344vw, 35px);
    border: 3px solid;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.3s ease;
}

.schedule-card--1 {
    border-color: #FFD2EC;
}

.schedule-card--2 {
    border-color: #CCA2F9;
}

.schedule-card--3 {
    border-color: #ABEFFF;
}

.schedule-card__step {
    font-size: clamp(19px, 2.1875vw, 28px);
    font-weight: 800;
    line-height: 1;
}

.schedule-card__step span {
    margin-left: 0.06em;
    font-size: 1.5714em;
    line-height: 0.8;
}

.schedule-card--1 .schedule-card__step {
    color: #f53599;
}

.schedule-card--2 .schedule-card__step {
    color: #8c42ef;
}

.schedule-card--3 .schedule-card__step {
    color: #2685d9;
}

.schedule-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(65px, 6.5625vw, 84px);
    margin-top: clamp(28px, 2.7344vw, 35px);
}

.schedule-card__icon img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.schedule-card__date {
    position: relative;
    width: min(20.5469vw, 263px);
    margin: clamp(30px, 2.7344vw, 35px) auto 0;
}

.schedule-card__date img {
    display: block;
    width: 100%;
    height: auto;
}

.schedule-card__date span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    color: #fff;
    font-size: clamp(13px, 1.4844vw, 19px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.schedule-card__title {
    margin-top: clamp(22px, 1.9531vw, 25px);
    color: #17275c;
    font-size: clamp(18px, 1.9531vw, 25px);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.schedule-card__text {
    margin-top: clamp(20px, 1.9531vw, 25px);
    color: #465475;
    font-size: clamp(13px, 1.4063vw, 18px);
    font-weight: 600;
    line-height: 1.8;
}

.schedule__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.schedule__arrow img {
    display: block;
    width: clamp(25px, 2.7344vw, 35px);
    height: auto;
    opacity: 0.55;
    transition: opacity 0.3s ease, translate 0.3s ease, scale 0.3s ease, filter 0.3s ease;
    animation: none;
}

.schedule__steps.is-effect-active .schedule__arrow img {
    animation: scheduleArrowFlow 1.1s ease-in-out 2;
}

.schedule__steps.is-effect-active .schedule__arrow:nth-of-type(2) img {
    animation-delay: 0.18s;
}

@media screen and (max-width: 1279px) {

    .schedule__steps {
        grid-template-columns: minmax(0, 380fr) minmax(30px, 70fr) minmax(0, 380fr) minmax(30px, 70fr) minmax(0, 380fr);
    }

    .schedule-card {
        min-height: clamp(400px, 37.5vw, 480px);
        padding-inline: clamp(16px, 2.7344vw, 35px);
    }

}

@media screen and (min-width: 768px) {

    .schedule__steps {
        display: flex;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        max-width: 1280px;
        margin: var(--space-content-lg) auto 0;
    }

    .schedule-card {
        flex: 0 1 380px;
        width: min(29.6875vw, 380px);
        min-height: 0;
        padding: clamp(24px, 2.3438vw, 30px) clamp(22px, 2.7344vw, 35px) clamp(28px, 2.7344vw, 35px);
        border-width: 3px;
        border-style: solid;
        border-radius: 22px;
    }

    .schedule-card--1 {
        border-color: #FFD2EC;
    }

    .schedule-card--2 {
        border-color: #CCA2F9;
    }

    .schedule-card--3 {
        border-color: #ABEFFF;
    }

    .schedule__arrow {
        display: flex;
        flex: 1 1 70px;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        max-width: 70px;
    }

    .schedule__arrow img {
        display: block;
        width: clamp(24px, 2.7344vw, 35px);
        height: auto;
    }

}

@media screen and (max-width: 767px) {

    .schedule {
        padding: 80px 20px 85px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .schedule__lead {
        font-size: clamp(15px, 4.3vw, 17px);
    }

    .schedule__steps {
        display: block;
        width: 100%;
        margin-top: var(--space-content-lg);
    }

    .schedule-card {
        width: 100%;
        min-height: 0;
        padding: 24px 22px 28px;
        border-radius: 18px;
        border-width: 2px;
        will-change: auto;
    }

    .schedule-card__step {
        font-size: clamp(18px, 5vw, 21px);
    }

    .schedule-card__step span {
        font-size: 1.45em;
    }

    .schedule-card__icon {
        height: clamp(65px, 20vw, 78px);
        margin-top: 22px;
    }

    .schedule-card__date {
        width: min(78%, 263px);
        margin-top: 25px;
    }

    .schedule-card__date span {
        font-size: clamp(13px, 3.8vw, 15px);
    }

    .schedule-card__title {
        margin-top: 20px;
        font-size: clamp(17px, 4.8vw, 19px);
    }

    .schedule-card__text {
        margin-top: 16px;
        font-size: clamp(13px, 3.7vw, 15px);
        line-height: 1.75;
    }

    .schedule__arrow {
        height: 50px;
        transform: rotate(90deg);
    }

    .schedule__arrow img {
        width: 28px;
    }

    .schedule__steps.is-effect-active .schedule__arrow img {
        animation: scheduleArrowSp 1.1s ease-in-out 2;
    }

}

@media (hover: hover) {

    .schedule-card:hover {
        box-shadow: 0 15px 35px rgba(55, 60, 113, 0.10);
        translate: 0 -5px;
    }

    .schedule-card:hover .schedule-card__icon img {
        scale: 1.05;
    }

}

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

    .schedule__arrow img {
        transition: none !important;
        animation: none !important;
    }

}

@keyframes scheduleArrowFlow {
    0%,
    100% {
        opacity: 0.55;
        translate: -4px 0;
        filter: none;
    }

    50% {
        opacity: 1;
        translate: 5px 0;
        filter: drop-shadow(0 0 7px rgba(143, 102, 244, 0.35));
    }
}

@keyframes scheduleArrowSp {
    0%,
    100% {
        opacity: 0.55;
        scale: 0.95;
    }

    50% {
        opacity: 1;
        scale: 1.07;
        filter: drop-shadow(0 0 7px rgba(143, 102, 244, 0.35));
    }
}

/* ========================================================
    13. FAQ
======================================================== */

.faq {
    position: relative;
    z-index: 1;
    padding: 80px 20px 130px;
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-md);
}

.faq__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.faq__lead {
    margin-top: var(--space-content-sm);
    color: #56627f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

.faq__list {
    display: grid;
    gap: clamp(14px, 1.5625vw, 20px);
    margin-top: var(--space-content-lg);
}

.faq-item {
    overflow: hidden;
    border: 1px solid #9ecff5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.faq-item__question {
    display: grid;
    grid-template-columns: min(4.2188vw, 54px) minmax(0, 1fr) 35px;
    align-items: center;
    gap: clamp(15px, 1.5625vw, 20px);
    width: 100%;
    min-height: clamp(72px, 7.0313vw, 90px);
    padding: clamp(12px, 1.25vw, 16px) clamp(20px, 1.9531vw, 25px);
    text-align: left;
    cursor: pointer;
}

.faq-item__q {
    display: block;
    width: min(4.2188vw, 54px);
    height: auto;
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item__question-text {
    color: #17275c;
    font-size: clamp(19px, 2.3438vw, 30px);
    font-weight: 600;
    line-height: 1.5;
}

.faq-item__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.faq-item__toggle img {
    position: absolute;
    width: 20px;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.faq-item__plus {
    opacity: 1;
}

.faq-item__minus {
    opacity: 0;
}

.faq-item.is-open .faq-item__plus {
    opacity: 0;
    transform: rotate(90deg);
}

.faq-item.is-open .faq-item__minus {
    opacity: 1;
}

.faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-item__answer {
    grid-template-rows: 1fr;
}

.faq-item__answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-item__answer-inner p {
    margin: 0 clamp(15px, 1.5625vw, 20px) clamp(15px, 1.5625vw, 20px);
    padding: clamp(18px, 1.7188vw, 22px) clamp(20px, 1.9531vw, 25px);
    color: #17275c;
    font-size: clamp(16px, 1.9531vw, 25px);
    font-weight: 500;
    line-height: 1.75;
    background: rgba(233, 248, 255, 0.72);
    transition: opacity 0.25s ease 0.08s, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.faq-item:not(.is-open) .faq-item__answer-inner p {
    opacity: 0;
    translate: 0 -5px;
}

.faq-item.is-open {
    border-color: rgba(119, 116, 238, 0.5);
    box-shadow: 0 8px 24px rgba(80, 92, 167, 0.08);
}

.faq-item.is-open .faq-item__q {
    scale: 1.06;
}

@media screen and (max-width: 767px) {

    .faq {
        padding: 70px 15px 85px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .faq__lead {
        font-size: clamp(14px, 4vw, 16px);
    }

    .faq-item {
        border-radius: 10px;
    }

    .faq-item__question {
        grid-template-columns: clamp(30px, 9vw, 36px) minmax(0, 1fr) 25px;
        gap: 10px;
        min-height: 65px;
        padding: 10px 14px;
    }

    .faq-item__q {
        width: clamp(30px, 9vw, 36px);
    }

    .faq-item__question-text {
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.5;
    }

    .faq-item__toggle {
        width: 24px;
        height: 24px;
    }

    .faq-item__toggle img {
        width: 16px;
    }

    .faq-item__answer-inner p {
        margin: 0 10px 10px;
        padding: 16px 14px;
        font-size: clamp(12px, 3.5vw, 14px);
        line-height: 1.75;
    }

}

@media (hover: hover) {

    .faq-item__question:hover {
        background: rgba(238, 247, 255, 0.45);
    }

}

/* ========================================================
    14. お問い合わせ・REALITY紹介
======================================================== */

.contact {
    position: relative;
    z-index: 1;
    padding: 100px 20px 130px;
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-md);
    isolation: isolate;
}

.contact__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.contact__lead {
    margin-top: var(--space-content-sm);
    color: #56627f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

.contact__cards {
    display: flex;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(20px, 4.375vw, 56px);
    width: 100%;
    max-width: 1280px;
    margin: var(--space-content-lg) auto 0;
}

.contact-card {
    display: flex;
    flex: 0 1 612px;
    flex-direction: column;
    width: min(47.8125vw, 612px);
    min-width: 0;
    min-height: 0;
    padding: clamp(30px, 3.5156vw, 45px) clamp(24px, 2.7344vw, 35px) clamp(28px, 2.7344vw, 35px);
    border: 3px solid;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.3s ease;
}

.contact-card--wester {
    border-color: #64d2f3;
}

.contact-card--mvirtual {
    border-color: #ffa2e6;
}

.contact-card__title {
    display: grid;
    grid-template-columns: min(7.0313vw, 90px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 1.9531vw, 25px);
    color: #17275c;
    font-size: clamp(19px, 2.1875vw, 28px);
    font-weight: 800;
    line-height: 1.45;
}

.contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(7.0313vw, 90px);
    height: min(7.0313vw, 90px);
    border-radius: 50%;
}

.contact-card__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contact-card__text {
    margin-top: clamp(30px, 3.5156vw, 45px);
    color: #465475;
    font-size: clamp(16px, 1.875vw, 24px);
    font-weight: 500;
    line-height: 1.75;
}

.contact-card__button {
    display: block;
    width: min(38.0469vw, 487px);
    margin: auto auto 0;
    padding-top: clamp(32px, 3.125vw, 40px);
    transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.contact-card__button img {
    display: block;
    width: 100%;
    height: auto;
}

.contact__reality-support {
    margin-top: var(--space-content-lg);
    padding: 40px 35px;
    color: #465475;
    text-align: center;
    border-radius: 18px;
    background: rgba(219, 239, 255, 0.86);
}

.contact__reality-support h3 {
    color: #17275c;
    font-size: clamp(19px, 2.1875vw, 28px);
    font-weight: 800;
    line-height: 1.4;
}

.contact__reality-support > p {
    margin-top: 18px;
    font-size: clamp(16px, 1.875vw, 24px);
    font-weight: 500;
    line-height: 1.7;
}

.contact__reality-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.7813vw, 10px);
    width: min(32.5vw, 416px);
    min-width: 0;
    min-height: 55px;
    margin-top: 25px;
    padding: 10px 30px;
    color: #465475;
    font-size: clamp(15px, 1.5625vw, 20px);
    font-weight: 700;
    border: 2px solid #7195ff;
    border-radius: 30px;
    background: #fff;
    transition: background 0.2s ease, color 0.2s ease;
}

.contact__reality-notes {
    margin-top: 30px;
    text-align: left;
}

.contact__reality-notes p {
    font-size: clamp(16px, 1.875vw, 24px);
    font-weight: 500;
    line-height: 1.7;
}

.contact__reality-notes p + p {
    margin-top: 10px;
}

.contact__reality-about {
    margin-top: var(--space-content-lg);
    padding: 75px 40px 70px;
    text-align: center;
    border: 2px solid #d7e7f5;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
}

.contact__reality-logo {
    width: min(28.75vw, 368px);
    margin-inline: auto;
}

.contact__reality-logo img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact__reality-about h3 {
    position: relative;
    margin-top: clamp(35px, 4.2969vw, 55px);
    padding-bottom: clamp(12px, 1.4063vw, 18px);
    color: #17275c;
    font-size: clamp(22px, 2.7344vw, 35px);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.contact__reality-description {
    margin-top: clamp(30px, 3.9063vw, 50px);
    color: #465475;
    font-size: clamp(16px, 1.9531vw, 25px);
    font-weight: 600;
    line-height: 1.65;
    text-align: center;
}

.contact__reality-description p + p {
    margin-top: clamp(20px, 2.3438vw, 30px);
}

.contact__store-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(25px, 3.9063vw, 50px);
    margin-top: clamp(35px, 4.2969vw, 55px);
}

.contact__store-buttons a {
    display: block;
    transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.contact__store-buttons img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
}

.contact__reality-help img {
    display: block;
    flex: 0 0 auto;
    width: clamp(16px, 1.5625vw, 20px);
    height: auto;
}

.contact__reality-about h3::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(10.625vw, 136px);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e74bdd 0%, #9b5df1 48%, #477ef4 100%);
    transform: translateX(-50%);
    content: "";
}

.contact__store-buttons a:first-child {
    width: min(19.6094vw, 251px);
}

.contact__store-buttons a:last-child {
    width: min(24.2969vw, 311px);
}

.contact::before {
    position: absolute;
    top: 30%;
    left: -25%;
    z-index: -1;
    width: min(55vw, 850px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #45cce9;
    opacity: 0.065;
    filter: blur(90px);
    content: "";
    pointer-events: none;
}

@media screen and (max-width: 1000px) {

    .contact__cards {
        gap: clamp(18px, 3vw, 30px);
    }

    .contact-card {
        flex: 1 1 0;
        width: auto;
        padding: clamp(25px, 3vw, 35px) clamp(20px, 2.5vw, 28px);
    }

}

@media screen and (max-width: 767px) {

    .contact {
        padding: 70px 15px 90px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .contact__lead {
        font-size: clamp(14px, 4vw, 16px);
    }

    .contact__cards {
        flex-direction: column;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        margin-top: 40px;
    }

    .contact-card {
        will-change: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 26px 20px 22px;
        overflow: visible;
        border-width: 2px;
        border-radius: 20px;
    }

    .contact-card__title {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        width: 100%;
        font-size: 17px;
        line-height: 1.45;
    }

    .contact-card__icon {
        font-size: 23px;
        width: 52px;
        height: 52px;
    }

    .contact-card__text {
        width: 100%;
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .contact-card__button {
        padding-top: 0;
        display: block;
        width: min(100%, 360px);
        margin: 26px auto 0;
        position: static;
        transform: none;
    }

    .contact__reality-support {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        margin-top: 28px;
        padding: 28px 20px;
        border-radius: 18px;
        clear: both;
    }

    .contact__reality-support h3 {
        margin: 0;
        font-size: 18px;
        line-height: 1.45;
    }

    .contact__reality-support > p {
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.7;
    }

    .contact__reality-help {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(100%, 290px);
        min-width: 0;
        min-height: 48px;
        margin: 20px auto 0;
        padding: 8px 20px;
        font-size: 14px;
    }

    .contact__reality-notes {
        margin-top: 24px;
    }

    .contact__reality-notes p {
        margin: 0;
        font-size: 11px;
        line-height: 1.7;
    }

    .contact__reality-about {
        margin-top: var(--space-content-lg);
        padding: 45px 20px 40px;
        border-radius: 20px;
    }

    .contact__reality-logo {
        width: min(42%, 280px);
    }

    .contact__reality-about h3 {
        margin-top: 35px;
        padding-bottom: 13px;
        font-size: clamp(20px, 5.6vw, 23px);
    }

    .contact__reality-description {
        margin-top: 30px;
        font-size: clamp(13px, 3.8vw, 15px);
        line-height: 1.75;
    }

    .contact__reality-description p + p {
        margin-top: 22px;
    }

    .contact__store-buttons {
        gap: 12px;
        margin-top: 35px;
    }

    .contact__store-buttons a {
        width: min(46%, 170px);
    }

    .contact__reality-help img {
        width: 16px;
    }

    .contact__reality-about h3::after {
        width: 90px;
        height: 2px;
    }

    .contact__store-buttons a:first-child {
        width: 44%;
    }

    .contact__store-buttons a:last-child {
        width: 54%;
    }

    .contact-card__icon img {
        width: 52px;
        height: 52px;
        object-fit: contain;
    }

    .contact-card__button img {
        display: block;
        width: 100%;
        height: auto;
    }

    .contact__reality-notes p + p {
        margin-top: 10px;
    }

}

@media (hover: hover) {

    .contact-card__button:hover {
        transform: translateY(-3px);
        translate: 0 -4px;
        filter: brightness(1.035) drop-shadow(0 7px 10px rgba(63, 66, 128, 0.13));
    }

    .contact__reality-help:hover {
        color: #fff;
        background: #7195ff;
    }

    .contact__store-buttons a:hover {
        transform: translateY(-3px);
        translate: 0 -4px;
        filter: brightness(1.035) drop-shadow(0 7px 10px rgba(63, 66, 128, 0.13));
    }

    .contact-card:hover {
        box-shadow: 0 15px 38px rgba(55, 62, 118, 0.09);
        translate: 0 -5px;
    }

}

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

    .contact__reality-logo {
        transition: none !important;
        animation: none !important;
    }

}

/* ========================================================
    15. 注意事項
======================================================== */

.notice {
    position: relative;
    z-index: 1;
    padding: 90px 20px 150px;
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-lg);
}

.notice__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.notice__lead {
    margin-top: var(--space-content-sm);
    color: #56627f;
    font-size: clamp(17px, 2.0313vw, 26px);
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

.notice__box {
    margin-top: var(--space-content-lg);
    padding: clamp(22px, 1.8vw, 35px) clamp(24px, 3.9vw, 75px);
    border: 1px solid #777;
    border-radius: clamp(22px, 2.1vw, 40px);
    background: rgba(255, 255, 255, 0.88);
}

.notice__list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 25px;
    padding: 30px 0;
    border-bottom: 1px dashed #aaa;
}

.notice__list li:last-child {
    border-bottom: 0;
}

.notice__list img {
    width: 22px;
    margin-top: 4px;
    transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.notice__list p {
    color: #465475;
    font-size: clamp(16px, 1.9531vw, 25px);
    font-weight: 500;
    line-height: 1.9;
}

@media screen and (max-width: 767px) {

    .notice {
        padding: 70px 15px 90px;
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-lg);
    }

    .notice__lead {
        font-size: clamp(14px, 4vw, 16px);
    }

    .notice__box {
        margin-top: var(--space-content-lg);
    }

    .notice__list li {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 12px;
        padding: 22px 0;
    }

    .notice__list img {
        width: 16px;
        margin-top: 4px;
    }

    .notice__list p {
        font-size: clamp(12px, 3.5vw, 14px);
        line-height: 1.8;
    }

}

@media (hover: hover) {

    .notice__list li:hover img {
        scale: 1.12;
    }

}

/* ========================================================
    16. フッター
======================================================== */

.footer {
    position: relative;
    z-index: 2;
    background: #fff;
}

.footer__inner {
    width: min(calc(100% - 40px), 1280px);
    margin-inline: auto;
}

.footer__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 190px;
}

.footer__logo {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}

.footer__logo--jr {
    width: 85px;
}

.footer__logo--wester {
    width: 165px;
}

.footer__logo--virtual-osaka {
    width: 185px;
}

.footer__logo--reality,
.footer__logo--mvirtual {
    width: 160px;
}

.footer__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    border-top: 1px solid #dfe4f3;
}

.footer__nav a {
    position: relative;
    padding: 10px 25px;
    color: #465475;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.footer__nav a + a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 25px;
    background: #9ba5be;
    transform: translateY(-50%);
    content: "";
}

.footer__copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    color: #344467;
    text-align: center;
    background: #a9c4ff;
}

.footer__copyright small {
    font-size: 10px;
}

@media screen and (max-width: 1100px) {

    .footer__logos {
        gap: 35px;
    }

    .footer__logo--jr {
        width: 65px;
    }

    .footer__logo--wester {
        width: 135px;
    }

    .footer__logo--virtual-osaka {
        width: 150px;
    }

    .footer__logo--reality,
    .footer__logo--mvirtual {
        width: 130px;
    }

    .footer__nav {
        flex-wrap: wrap;
        padding: 20px 0;
    }

    .footer__nav a {
        padding-inline: 18px;
    }

}

@media screen and (max-width: 767px) {

    .footer__inner {
        width: calc(100% - 30px);
    }

    .footer__logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px 30px;
        min-height: 0;
        padding: 45px 10px;
    }

    .footer__logo--jr {
        width: 55px;
    }

    .footer__logo--wester {
        width: 100px;
    }

    .footer__logo--virtual-osaka {
        width: 110px;
    }

    .footer__logo--reality,
    .footer__logo--mvirtual {
        width: 95px;
    }

    .footer__nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        min-height: 0;
        padding: 20px 0;
    }

    .footer__nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 45px;
        padding: 8px;
        font-size: 11px;
        text-align: center;
    }

    .footer__nav a + a::before {
        display: none;
    }

    .footer__copyright {
        min-height: 28px;
    }

    .footer__copyright small {
        font-size: 9px;
    }

}

@media (hover: hover) {

    .footer__nav a:hover {
        color: #765bf0;
    }

}

/* ========================================================
    17. スクロール演出
======================================================== */

html.fx-ready .wester-lp .fx-reveal {
    opacity: 0;
    translate: 0 24px;
    filter: blur(2px);
    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        scale 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.65s ease;
    transition-delay: var(--fx-delay, 0ms);
    will-change: opacity, translate;
}

html.fx-ready .wester-lp .fx-reveal.is-inview {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
}

html.fx-ready .wester-lp .fx-reveal--fade {
    translate: 0 0;
}

html.fx-ready .wester-lp .fx-reveal--left {
    translate: -28px 0;
}

html.fx-ready .wester-lp .fx-reveal--right {
    translate: 28px 0;
}

html.fx-ready .wester-lp .fx-reveal--scale {
    translate: 0 16px;
    scale: 0.97;
}

html.fx-ready .section-heading.fx-reveal:not(.is-inview) .section-heading__en {
    letter-spacing: 0.36em;
}

html.fx-ready .coupon__ticket.fx-reveal:not(.is-inview) {
    translate: 0 22px;
    scale: 0.95;
}

html.fx-ready .ranking-top--1.fx-reveal:not(.is-inview) {
    scale: 0.95;
}

.ranking-top--1.fx-reveal.is-inview .ranking-top__crown {
    animation: rankingCrownDrop 0.65s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.contact__reality-about.fx-reveal .contact__reality-logo {
    opacity: 0;
    translate: 0 10px;
    scale: 0.96;
    transition: opacity 0.6s ease, translate 0.75s cubic-bezier(0.22, 1, 0.36, 1), scale 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact__reality-about.fx-reveal.is-inview .contact__reality-logo {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition-delay: 0.2s;
}

@media screen and (max-width: 767px) {

    html.fx-ready .wester-lp .fx-reveal--left {
        translate: -16px 0;
    }

    html.fx-ready .wester-lp .fx-reveal--right {
        translate: 16px 0;
    }

    html.fx-ready .wester-lp .fx-reveal--scale {
        translate: 0 12px;
        scale: 0.98;
    }

}

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

    html.fx-ready .wester-lp .fx-reveal,
    html.fx-ready .wester-lp .fx-reveal.is-inview {
        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }

}


/* ========================================
    Main Visual Benefits - SP Size Fix
======================================== */

@media screen and (max-width: 767px) {

    .main-visual__benefits {
        padding: 30px 22px;
    }

    .main-visual__benefits-lead p {
        font-size: 20px;
    }

    .main-visual__benefits-lead strong {
        font-size: 30px;
    }

    .main-visual__benefits-lead strong span {
        font-size: 54px;
    }

    .main-visual__benefit {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 20px;
        min-height: 118px;
        padding: 20px 8px;
    }

    .main-visual__benefit img {
        width: 68px;
        max-width: 100%;
        height: auto;
        margin: 0;
        justify-self: center;
    }

    .main-visual__benefit p {
        font-size: 18px;
        line-height: 1.55;
    }

}