/* ==========================================================================
    common.css
    USEN PAY LP 共通スタイル
    命名規則：BEM + Layout Prefix
        - l-  : レイアウト（Layout）
        - c-  : コンポーネント（Component）
        - u-  : ユーティリティ（Utility）
        - is- : 状態（State）
    各LP固有のスタイルは lp◯◯.css 等、別ファイルに記述してください。
========================================================================== */

/* ==========================================================================
    1. Design Tokens（デザイン変数）
========================================================================== */

:root {
    /* --- Color: Brand --- */
    --color-primary: #4CBED1;
    --color-primary-light: #F1FAFB;
    --color-accent: #ec1876;
    --color-orange: #F7B531;
    --color-navy: #323E86;
    --color-lightblue: #35ADEB;
    --color-gray: #F0F3F5;
    --color-red: #F44B4B;
    --color-yellow: #FFF83D;
    --color-text: #333333;
    --color-text-caution: #99A6B6;

    /* --- Color: Neutral --- */
    --color-bg: #FFFFFF;
    --color-bg-gray: #DDE2E7;
    --color-bg-lightgray: #FCFCFC;
    --color-border-gray: #C9D1D9;
    --gradation: linear-gradient(180deg, #4CBED1 55%, #27616B 100%);
    
    /* --- Typography --- */
    --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    --font-avenir: "Plus Jakarta Sans", "Avenir Next", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    
    /* --- Typography (html { font-size: 100% } 用) --- */
    --fs-xs: 0.75rem;    /* 12px  (12 ÷ 16) */
    --fs-sm: clamp(0.75rem, 0.569rem + 0.38vw, 0.875rem);   /* 14px  (14 ÷ 16) */
    --fs-base: 1rem;     /* 16px  (16 ÷ 16) */
    --fs-md: clamp(1rem, 0.777rem + 0.46vw, 1.125rem);   /* 18px  (18 ÷ 16) */
    --fs-20: clamp(1.063rem, 0.728rem + 0.7vw, 1.25rem);    /* 20px  (20 ÷ 16) */
    --fs-lg: 1.375rem;   /* 22px  (22 ÷ 16) */
    --fs-24: clamp(1.25rem, 0.804rem + 0.93vw, 1.5rem);     /* 24px  (24 ÷ 16) */
    --fs-xl: clamp(1.375rem, 0.832rem + 1.13vw, 1.75rem);    /* 28px  (28 ÷ 16) */
    --fs-2xl: 2.25rem;   /* 36px  (36 ÷ 16) */
    --fs-3xl: 3rem;      /* 48px  (48 ÷ 16) */
    --fs-4xl: 3.25rem;
    --fs-5xl: 3.5rem;
    --lh-tight: 1.3;
    --lh-base: 1.7;

    /* --- Layout --- */
    --container-width: 1200px;
    --container-width-full: 1420px;
    --container-padding: 1rem;
    --header-height: 76px;

    /* --- Section Padding --- */
    --section-padding-y: clamp(50px, 11.57vw - 38.89px, 100px);
    --section-padding-x: 15px;

    /* --- Radius / Shadow --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --shadow: 0 2px 8px rgba(22, 41, 79, 0.16);

    /* --- Transition --- */
    --transition-base: 0.25s ease;

    /* --- Z-index --- */
    --z-header: 100;
    --z-modal: 200;

    /* --- Spacing / Gap Tokens --- */
    --gap-0: 0;
    --gap-10: clamp(0.313rem, -0.245rem + 1.16vw, 0.625rem);
    --gap-20: clamp(0.625rem, -0.49rem + 2.32vw, 1.25rem);
    --gap-30: clamp(0.938rem, -0.735rem + 3.48vw, 1.875rem);
    --gap-40: clamp(1.25rem, -0.98rem + 4.64vw, 2.5rem);
    --gap-50: clamp(1.563rem, -1.225rem + 5.8vw, 3.125rem);
}

/* ==========================================================================
    Layout Classes (.l-*)
========================================================================== */
html {
    font-size: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;

}

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

body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-navy);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    -webkit-tap-highlight-color: transparent;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.l-section {
    padding: var(--section-padding-y) var(--section-padding-x);
}

.c-gradient-text {
    background: var(--gradation);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .l-section {
        padding-inline: 0;
        padding: 20px 0;
    }
}

.tab-br {
    display: none;
}
.sp-br {
    display: none;
}

/* レスポンシブ対応（スマホ・タブレットで1カラムに落ちる設定） */
@media (max-width: 768px) {
    .tab-br {
        display: block;
    }
}

@media (max-width: 468px) {
    .sp-br {
        display: block;
    }
}

/* ==========================================================================
    Utility Classes (u-*) / Background & Border
========================================================================== */

/* --- Background Colors --- */
.u-bg-white {
    background-color: var(--color-bg);
}

.u-bg-gray {
    background-color: var(--color-bg-gray);
}

.u-bg-lightgray {
    background-color: var(--color-bg-lightgray);
}

/* --- Border Colors & Styles --- */
.u-border {
    border: 1px solid var(--color-border-gray);
}

.u-border-top {
    border-top: 1px solid var(--color-border-gray);
}

.u-border-bottom {
    border-bottom: 1px solid var(--color-border-gray);
}

.u-border-left {
    border-left: 1px solid var(--color-border-gray);
}

.u-border-right {
    border-right: 1px solid var(--color-border-gray);
}

/* ==========================================================================
    Grid Utility Classes (u-grid)
========================================================================== */

/* ベースとなるGridクラス */
.u-grid {
    display: grid;
    /* デフォルトのgapを指定しておく（必要に応じて上書き可能） */
    gap: var(--gap-20);
}

/* カラム数定義 */
.u-grid--col2 {
    grid-template-columns: repeat(2, 1fr);
}

.u-grid--col3 {
    grid-template-columns: repeat(3, 1fr);
}

.u-grid--col4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Gap（余白）定義 */
.u-gap-0 { gap: var(--gap-0); }
.u-gap-10 { gap: var(--gap-10); }
.u-gap-20 { gap: var(--gap-20); }
.u-gap-30 { gap: var(--gap-30); }
.u-gap-40 { gap: var(--gap-40); }
.u-gap-50 { gap: var(--gap-50); }

/* レスポンシブ対応（スマホ・タブレットで1カラムに落ちる設定） */
@media (max-width: 768px) {
    .u-grid--col2 {
        grid-template-columns: 1fr;
    }
    .u-grid--col3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .u-grid--col4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 468px) {
    .u-grid--col3,
    .u-grid--col4 {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
    Layout: l-container
========================================================================== */
.l-container {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.l-container-full {
    max-width: var(--container-width-full);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* ==========================================================================
    Component: c-header
========================================================================== */
.c-header {
    position: relative;
    background-color: var(--color-bg);
    box-shadow: var(--shadow);
}

.c-header.is-hidden {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    animation: headerSlideDown 0.4s ease forwards;
}

.c-header.is-leaving {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    animation: headerSlideUp 0.4s ease forwards;
}

@keyframes headerSlideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes headerSlideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

.c-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-30);
    height: var(--header-height);
}

/* --- Logo --- */
.c-header__logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.c-header__logo-img {
    height: 44px;
    width: auto;
    display: block;
}

/* --- Nav --- */
.c-header__nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.c-header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--gap-30);
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-header__nav-link {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-base);
}

.c-header__nav-link:hover {
    color: var(--color-primary);
}

/* --- Buttons --- */
.c-header__buttons {
    display: flex;
    align-items: center;
    gap: var(--gap-10);
    flex-shrink: 0;
}

.c-header__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-base);
    box-shadow: 0 2px 0px rgba(0, 0, 0, .5);
}

.c-header__btn:hover {
    opacity: 0.8;
}

.c-header__btn--primary {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

.c-header__btn--outline {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-accent);
}

.c-header__btn-icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

.c-header__btn-arrow {
    font-size: var(--fs-md);
    line-height: 1;
    display: contents;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .c-header__nav {
        display: none;
    }

    .c-header__inner {
        gap: var(--gap-20);
    }
}

@media (max-width: 768px) {
    .c-header {
        --header-height: 56px;
    }

    .c-header__logo-img {
        height: 32px;
    }

    .c-header__buttons {
        gap: var(--gap-10);
    }

    .c-header__btn {
        height: 40px;
        padding: 0 14px;
        font-size: var(--fs-xs);
    }

    .c-header__btn--outline {
        display: none; /* SP時はプライマリボタンのみ表示（要件に応じて調整） */
    }
}

/* ==========================================================================
    Component: c-footer
========================================================================== */
.c-footer {
    background-color: #000000;
    padding: 50px 0;
}

.c-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-30);
}

/* --- Logo --- */
.c-footer__logo {
    display: block;
    line-height: 0;
}

.c-footer__logo-img {
    height: 35px;
    width: auto;
    display: block;
}

/* --- Copyright --- */
.c-footer__copyright {
    margin: 0;
    font-size: var(--fs-xs);
    color: #FFFFFF;
    letter-spacing: 0.02em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-footer {
        padding: 30px 0;
    }

    .c-footer__inner {
        gap: var(--gap-20);
    }

    .c-footer__logo-img {
        height: 22px;
    }

    .c-footer__copyright {
        font-size: 10px;
    }
}

/* ==========================================================================
    Component: c-cta-banner
========================================================================== */
.c-cta-banner {
    position: relative;
    background-image: url(../../common/images/cta-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 60px 0;
}

.c-cta-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-40);
}

/* --- Left: Catch Copy --- */
.c-cta-banner__left {
    flex-shrink: 0;
    text-align: right;
    color: var(--color-bg);
    width: clamp(13.75rem, -0.747rem + 30.16vw, 21.875rem);
}

.c-cta-banner__catch {
    margin: 0;
    font-size: clamp(2.25rem, 0.466rem + 3.71vw, 3.25rem);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.c-cta-banner__brand {
    font-size: clamp(2.25rem, 0.078rem + 4.52vw, 3.75rem);
}

.c-cta-banner__price {
    font-size: clamp(2.25rem, 0.466rem + 3.71vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.c-cta-banner__price-num {
    font-size: clamp(4.375rem, 1.03rem + 6.96vw, 6.25rem);
    margin: 0 2px;
    font-family: var(--font-avenir);
    line-height: 0.85;
}

/* --- Center: Terminal Image --- */
.c-cta-banner__center {
    position: relative;
    flex-shrink: 0;
    width: clamp(12.5rem, 1.638rem + 22.6vw, 20rem);
}

.c-cta-banner__terminal {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Right: Info & CTA --- */
.c-cta-banner__right {
    flex: 1;
    color: var(--color-bg);
}

.c-cta-banner__lead {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.c-cta-banner__list {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.c-cta-banner__mark {
    display: inline-block;
    background-color: var(--color-yellow);
    color: var(--color-primary);
    font-size: var(--fs-20);
    font-weight: 700;
    padding: 2px 8px;
    line-height: var(--lh-tight);
}

.c-cta-banner__mark sup {
    position: absolute;
}

.c-cta-banner__note {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
}

.c-cta-banner__flag {
    margin: 20px 0 10px;
    font-size: var(--fs-base);
    font-weight: 700;
    text-align: center;
}

.c-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 60px;
    background-color: var(--color-accent);
    color: var(--color-bg);
    border-radius: var(--radius-full);
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.c-cta-banner__btn:hover {
    opacity: 0.8;
}

.c-cta-banner__btn-arrow {
    font-size: var(--fs-lg);
    line-height: 1;
}
@media (max-width: 768px) {
    .c-cta-banner__inner {
        flex-direction: column;
    }
    .c-cta-banner__left {
        text-align: center;
    }
    .c-cta-banner__price {
        justify-content: center;
    }
    .c-cta-banner__lead {
        font-size: clamp(1.25rem, 0.074rem + 4.01vw, 2rem);
    }
    .c-cta-banner__mark {
        font-size: clamp(1.75rem, 0.778rem + 3.32vw, 2.375rem);
    }
}


/* ==========================================================================
    Utility: c-shine（キラッと光るシャインアニメーション）
========================================================================== */
.c-shine {
    position: relative;
    overflow: hidden;
}

.c-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 60%,
        transparent 100%
    );
    animation: uShine 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes uShine {
    0% {
        left: -75%;
    }
    40%,
    100% {
        left: 125%;
    }
}

/* ==========================================================================
    Component: c-fv
========================================================================== */
.c-fv {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary-light);
    padding: 40px 0 20px;
}

.c-fv::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    background-image: url(../images/fv-bg-text.png);
    z-index: 0;
    pointer-events: none;
    max-width: 480px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.c-fv__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-40);
}

/* --- Left --- */
.c-fv__left {
    flex: 1;
    max-width: 700px;
}

.c-fv__catch {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.c-fv__catch-num {
    color: var(--color-primary);
    font-family: var(--font-avenir);
    font-size: var(--fs-5xl);
}

.c-fv__fee {
    margin: 0 0 32px;
    font-size: clamp(2.625rem, 0.618rem + 4.18vw, 3.75rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.c-fv__fee-num {
    font-size: clamp(5.75rem, 2.628rem + 6.5vw, 7.5rem);
    color: var(--color-primary);
    font-family: var(--font-avenir);
    margin: 0 4px;
    font-weight: 700;
}

.c-fv__fee-mark {
    font-size: var(--fs-xs);
    color: var(--color-primary);
    vertical-align: super;
}

.c-fv__fee-unit {
    font-size: var(--fs-lg);
    color: var(--color-primary);
}

.c-fv__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 40vw;
    height: 60px;
    background-color: var(--color-accent);
    color: var(--color-bg);
    border-radius: var(--radius-full);
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.c-fv__btn:hover {
    opacity: 0.8;
}

.c-fv__btn-arrow {
    font-size: var(--fs-lg);
    line-height: 1;
}

.c-fv__note {
    margin: 5px 0 0;
    font-size: var(--fs-xs);
    color: var(--color-text);
}

.c-fv__note-link {
    color: #F7B531;
}

.c-fv__ranking {
    display: block;
    margin: 20px 0;
    height: auto;
    max-width: 240px;
}

/* --- Stats --- */
.c-fv__stats {
    list-style: none;
    margin: 0 0 16px;
    padding: 24px 0 0;
    display: flex;
    justify-content: flex-start;
    max-width: 85%;
    width:  100%;
}

.c-fv__stats-item {
    flex: 0 0 auto;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--gap-10);
}

.c-fv__stats-item:first-child {
    padding-left: 0;
}

.c-fv__stats-item {
    flex: 1;
    padding: 0 clamp(0.313rem, -2.813rem + 5vw, 1.25rem);
    text-align: center;
}

.c-fv__stats-item:not(:last-child) {
    border-right: 1px solid var(--color-border-gray);
}

.c-fv__stats-item.second-text p.c-fv__stats-num {
    font-size: var(--fs-2xl);
}

 .c-fv__stats-item.second-text .c-fv__stats-textarea .c-fv__stats-num {
    margin: 0;
}

.c-fv__stats-item:not(:last-child) {
    border-right: 1px solid var(--color-border-gray);
}
.c-fv__stats-num {
    margin: 0 0 4px;
    font-size: clamp(2.375rem, 1.47rem + 1.88vw, 3rem);
    font-weight: 400;
    color: #565656;
    font-family: var(--font-avenir);
    line-height: 1;
}

.c-fv__stats-num.caution-mark {
    position: relative;
}

.c-fv__stats-num.caution-mark::before {
    position: absolute;
    content: "※";
    right: 0;
    top: 0;
    font-size: 10px;
}
.c-fv__stats-num.caution-mark.two::before {
    content: "※2";
}
.c-fv__stats-num.caution-mark.three::before {
    content: "※3";
}


.c-fv__stats-unit {
    font-size: var(--fs-sm);
    font-family: var(--font-base);
    margin-left: 2px;
}

.c-fv__stats-label {
    margin: 0;
    font-size: var(--fs-xs);
    color: #565656;
    font-weight: 700;
}

.c-fv__foot-note {
    margin:  0;
    font-size: 10px;
    color: var(--color-text);
    line-height: var(--lh-tight);
    text-align: center;
}

/* --- Right --- */
.c-fv__right {
    flex-shrink: 0;
    width: 300px;
}

.c-fv__terminal {
    width: 100%;
    height: auto;
    display: block;
}

.c-fv.fv-pc {
    display: block;
}

.c-fv.fv-sp {
    display: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .c-fv__stats {
        max-width: 100%;
        flex-wrap: wrap;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 30px 0px;
        margin-top: 10px;
    }

    .c-fv__btn {
        margin: 0 auto;
    }

    .c-fv__right {
        width: 240px;
    }

    .c-fv::before {
        max-width: 400px;
        left: -20px;
    }
}

@media (max-width: 768px) {
    .c-fv {
        padding: 10px 0 20px;
    }
    .c-fv.fv-pc {
        display: none;
    }
    .c-fv.fv-sp {
        display: block;
    }
    .c-fv__catch {
        font-size: clamp(2rem, 0.056rem + 6.64vw, 3.25rem);
        text-align: center;
    }
    .c-fv__fee {
        text-align: center;
    }
    .c-fv__left {
        text-align: center;
    }
    .c-fv__fee {
        font-size: clamp(1.75rem, 0.39rem + 4.65vw, 2.625rem);
    }
    .c-fv__fee-num {
        font-size: clamp(3.25rem, 0.335rem + 9.97vw, 5.125rem);
    }
    .c-fv__btn {
        max-width: 70vw;
    }
    .c-fv__right {
        width: 240px;
        margin: -30px auto -220px;
    }
    .c-fv__terminal {
        -webkit-mask-image: linear-gradient(
            to bottom,
            black 0%,       /* 上部:完全に表示 */
            black 40%,      /* ここまでは不透明 */
            transparent 60% /* ここから下は消える */
        );
        mask-image: linear-gradient(
            to bottom,
            black 0%,
            black 40%,
            transparent 60%
        );
    }
    .c-fv__stats-item {
        flex: 0 0 calc(50% - 15px);
    }
    .c-fv__stats-item{
        border-right: 1px solid var(--color-border-gray);
    }
}
@media (max-width: 468px) {
    .c-fv__btn {
        max-width: 100%;
    }
    .c-fv__note {
        margin: 5px 0 0;
        font-size: 10px;
        color: var(--color-text);
    }
}

/* ==========================================================================
    Component: c-special-rate
========================================================================== */
.c-special-rate__card {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* --- Left --- */
.c-special-rate__left {
    position: relative;
    flex: 0 0 50%;
    padding: 40px;
    background-image: url(../../common/images/banner-bg.jpg);
    background-size: auto;
    background-position: center;
    color: var(--color-bg);
    overflow: hidden;
    text-align: center;
}

.c-special-rate__label {
    margin: 0;
    font-size: 35px;
    font-weight: 700;
}

.c-special-rate__prices {
    position: relative;
}

.c-special-rate__before {
    margin: 0;
    font-size: 55px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    width: fit-content;
    margin: 0 auto;
    line-height: var(--lh-tight);
    font-family: var(--font-avenir);
}

.c-special-rate__before::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    right: -4px;
    height: 2px;
    background-color: var(--color-red);
    transform: translateY(-50%) rotate(0deg);
}

.c-special-rate__before-unit {
    font-size: var(--fs-md);
}

.c-special-rate__arrow {
    display: flex;
    margin: 4px 0;
    color: var(--color-bg);
    justify-content: center;
}

.c-special-rate__after {
    margin: 0;
    font-size: 105px;
    font-weight: 700;
    line-height: 1;
    border-bottom: 4px solid var(--color-lightblue);
    display: inline-block;
    padding-bottom: 6px;
    font-family: var(--font-avenir);
}

.c-special-rate__after-mark {
    font-size: var(--fs-base);
    vertical-align: super;
    margin-left: 2px;
}

.c-special-rate__after-unit {
    font-size: var(--fs-xl);
}

.c-special-rate__star {
    position: absolute;
    bottom: 40%;
    right: 15%;
    width: 60px;
    height: auto;
}

/* --- Right --- */
.c-special-rate__right {
    position: relative;
    flex: 1;
    padding: 30px;
    background-color: #F7F6F5;
}

.c-special-rate__top {
    display: flex;
    gap: var(--gap-10);
}

.c-special-rate__badge {
    display: inline-block;
    margin: 0 0 5px;
    padding: 4px 15px;
    background-color: var(--color-bg);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
}

.c-special-rate__heading {
    margin: 0 0 20px;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text);
}

.c-special-rate__cards {
    margin: 0 0 20px;
    max-width: 380px;
}

.c-special-rate__cards img {
    width: 100%;
    height: auto;
    display: block;
}

.c-special-rate__text {
    margin: 0;
    max-width: 620px;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--color-text);
    font-weight: 700;
}

.c-special-rate__terminal {
    width: clamp(7.5rem, 4.785rem + 5.65vw, 9.375rem);
}

.c-special-rate__terminal img {
    width: 100%;
    height: auto;
    display: block;
}

.c-special-rate__cta {
    display: flex;
    justify-content: flex-end;
}

.c-special-rate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 12px 28px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-full);
    color: var(--color-accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.c-special-rate__btn:hover {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-special-rate__card {
        flex-direction: column;
    }

    .c-special-rate__left {
        flex: none;
        padding: 30px;
    }

    .c-special-rate__right {
        padding: 30px 14px;
    }

    .c-special-rate__terminal {
        position: static;
        width: 150px;
        margin: 0 auto 20px;
    }
    .c-special-rate__top {
        flex-direction: column;
    }
}




/* ==========================================================================
    Component: c-video
========================================================================== */
.c-video__title {
    position: relative;
    display: inline-block;
    margin: 0 auto 50px;
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text);
    width: 100%;
}

.c-video__title-accent {
    font-size: var(--fs-3xl);
    color: var(--color-primary);
}

.c-video__title-deco {
    position: absolute;
    top: 26px;
    right: calc(50% - 340px);
    width: 40px;
    height: auto;
}

/* --- Video Wrap --- */
.c-video__wrap {
    border-radius: var(--radius-lg);
}

.c-video__player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #000;
}

/* --- Thumbnail / Play Button --- */
.c-video__play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: block;
}

.c-video__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-video__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 50%;
    box-shadow: var(--shadow);
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.c-video__play:hover .c-video__play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: linear-gradient(180deg, #4CBED1 55%, #27616B 100%);
    color: var(--color-bg);
}

/* --- Video Element --- */
.c-video__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.c-video__video[hidden] {
    display: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-video__title {
        font-size: var(--fs-lg);
        margin: 0 auto 25px;
    }

    .c-video__title-deco {
        width: 28px;
        right: calc(50% - 180px);
        top: 0;
    }

    .c-video__wrap {
        padding: 16px;
    }

    .c-video__play-icon {
        width: 56px;
        height: 56px;
    }
    .c-video__title-accent {
        font-size: 25px;
    }
}


/* ==========================================================================
    Component: c-brands
========================================================================== */
.c-brands__title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 0 0 20px;
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text);
}

.c-brands__title .caution-mark {
    position: relative;
}

.c-brands__title .caution-mark::before {
    position: absolute;
    content: "※";
    right: 0;
    top: 0;
    font-size: 10px;
}

.c-brands__title-num {
    font-size: 100px;
    font-weight: 700;
    font-family: var(--font-avenir);
}

.c-brands__foot-note {
    margin-top: 20px;
    text-align: right;
    font-size: 10px;
    color: var(--color-text);
}

.c-brands__lead {
    margin: 0 0 50px;
    text-align: center;
    font-size: var(--fs-20);
    line-height: var(--lh-base);
    color: var(--color-text);
    font-weight: 700;
}

/* --- Card --- */
.c-brands__card {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(1.563rem, -0.7rem + 4.71vw, 3.125rem);
}

.c-brands__logo {
    margin: 0 0 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-brands__logo img {
    height: 32px;
    width: auto;
}

/* --- List / Items --- */
.c-brands__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-brands__item {
    padding: 0 clamp(0.625rem, -0.28rem + 1.88vw, 1.25rem);
}

.c-brands__item:not(:last-child) {
    border-right: 1px solid var(--color-border-gray);
}

.c-brands__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 15px;
    margin-bottom: 16px;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    align-items: center;
}

.c-brands__label {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-navy);
}

.c-brands__rate {
    margin: 0;
    font-size: clamp(1.5rem, 0.776rem + 1.51vw, 2rem);
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-avenir);
}

.c-brands__rate-unit {
    font-size: var(--fs-sm);
}

.c-brands__img {
    margin-bottom: 12px;
}

.c-brands__img img {
    width: 100%;
    height: auto;
    display: block;
}

.c-brands__note {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-border-gray);
    line-height: var(--lh-tight);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-brands__title {
        font-size: var(--fs-xl);
    }

    .c-brands__title-num {
        font-size: var(--fs-2xl);
    }

    .c-brands__lead {
        margin-bottom: 30px;
        text-align: left;
    }

    .c-brands__card {
        padding: 30px 20px;
    }

    .c-brands__item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--color-border-gray);
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
}


/* ==========================================================================
    Component: c-flow
========================================================================== */
.c-flow {
    background-color: #DDE2E7;
}

.c-flow__title {
    margin: 0 0 40px;
    font-size: var(--fs-2xl);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
}

/* --- List / Items --- */
.c-flow__list {
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: var(--gap-50);
}

.c-flow__item {
    flex: 1;
    position: relative;
}

.c-flow__item::before {
    position: absolute;
    content: "";
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 30px solid #ffffff;
    border-right: 0;
}

.c-flow__item:last-child::before {
    content: none;
}

.c-flow__inner {
    height: 100%;
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* --- Arrow Separator --- */
.c-flow__arrow {
    flex-shrink: 0;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-inline: -1px;
}

.c-flow__arrow img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Step Label Bar --- */
.c-flow__step {
    margin: 0;
    padding: 14px 0;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-bg);
    letter-spacing: 0.05em;
}

.c-flow__item--01 .c-flow__step {
    background-color: #C9D1D9;
}

.c-flow__item--02 .c-flow__step {
    background-color: #7A8CA0;
}

.c-flow__item--03 .c-flow__step {
    background-color: #596A7D;
}

/* --- Body --- */
.c-flow__body {
    padding: 30px 24px 34px;
    text-align: center;
}

.c-flow__icon {
    display: block;
    width: auto;
    height: 51px;
    margin: 0 auto 16px;
}

.c-flow__heading {
    margin: 0 0 8px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--lh-tight);
}

.c-flow__link {
    color: var(--color-primary);
    text-decoration: underline;
}

.c-flow__desc {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-base);
}

/* --- Timeline --- */
.c-flow__timeline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2px;
    background-color: var(--color-navy);
    margin: 0 auto 60px;
}

.c-flow__dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--color-navy);
    border-radius: 50%;
    transform: translateY(-50%);
}

.c-flow__dot--start {
    left: 0;
}

.c-flow__dot--end {
    right: 0;
    width: 12px;
    height: 12px;
    background-color: transparent;
    border-radius: 0;
    border-top: 2px solid var(--color-navy);
    border-right: 2px solid var(--color-navy);
    transform: translateY(-50%) rotate(45deg);
}
.c-flow__duration {
    position: relative;
    margin: 0;
    padding: 6px 40px;
    background-color: var(--color-navy);
    color: var(--color-bg);
    border-radius: var(--radius-lg);
    font-size: var(--fs-base);
    font-weight: 700;
    white-space: nowrap;
    min-width: 220px;
    max-width: 240px;
    text-align: center;
}

.c-flow__duration-num {
    font-size: var(--fs-xl);
    
    margin: 0 2px;
}

/* --- Note --- */
.c-flow__note {
    margin: 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--color-text);
}

/* --- Responsive --- */
@media (max-width: 768px) {

    .c-flow__item::before {
        position: absolute;
        content: "";
        top: inherit;
        right: inherit;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 25px solid transparent;
        border-left: 25px solid transparent;
        border-top: 20px solid #FFFFFF;
        border-bottom: 0;
    }
    .c-flow__title {
        font-size: var(--fs-xl);
        margin-bottom: 30px;
    }

    .c-flow__list {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
    }

    .c-flow__inner,
    .c-flow__item--02 .c-flow__inner,
    .c-flow__item--03 .c-flow__inner {
        clip-path: none;
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .c-flow__duration {
        padding: 10px 30px;
        font-size: var(--fs-sm);
    }
    .c-flow__heading {
        font-size: clamp(1.125rem, 0.929rem + 0.67vw, 1.25rem);
    }
}


/* ==========================================================================
    Component: c-price
========================================================================== */
.c-price__title {
    margin: 0 0 40px;
    font-size: var(--fs-2xl);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
}

.c-price__card {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 50px;
}

/* --- Head --- */
.c-price__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-30);
    margin-bottom: 40px;
}

.c-price__logo {
    margin: 0 0 10px;
}

.c-price__logo img {
    width: 280px;
}

.c-price__logo-sub {
    color: var(--color-border-gray);
    font-weight: 400;
}

.c-price__fee {
    margin: 0 0 6px;
    font-size: var(--fs-24);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.c-price__fee-num {
    font-size: clamp(2.25rem, 1.358rem + 1.86vw, 2.75rem);
    color: var(--color-primary);
    font-family: var(--font-avenir);
}

.c-price__fee-unit {
    font-size: var(--fs-24);
    color: var(--color-primary);
    font-weight: 700;
}

.c-price__catch {
    margin: 0 0 10px;
    font-size: var(--fs-24);
    font-weight: 700;
    color: var(--color-text);
}

.c-price__note {
    margin: 0;
    font-size: var(--fs-sm);
    color: #565656;
    line-height: var(--lh-base);
}

.c-price__head-visual {
    position: relative;
    flex-shrink: 0;
    width: clamp(17.5rem, 4.118rem + 27.84vw, 25rem);
}

.c-price__terminal {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Fee Cards --- */
.c-price__fees {
    list-style: none;
    margin: 0 0 80px;
    padding: 0;
}

.c-price__fee-item {
    text-align: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.c-price__fee-item .c-price__note {
    text-align: left;
}

.c-price__fee-label {
    margin: 0;
    padding: 12px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.c-price__fee-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    background-color: #F0F3F5;
    min-height: 120px;
    margin-bottom: 10px;
}

.c-price__fee-original {
    font-size: var(--fs-base);
    color: #565656;
    width: fit-content;
    margin: 0 auto 4px;
    font-weight: 700;
    position: relative;
}

.c-price__fee-original::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #565656;
    transform: translateY(-50%);
}

.c-price__fee-original-unit {
    font-size: 8px;
}

.c-price__fee-value {
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1;
    font-family: var(--font-avenir);
}

.c-price__fee-value sup {
    font-size: 14px;
}

.c-price__fee-value-unit {
    font-size: var(--fs-base);
    font-weight: 700;
    margin-left: 4px;
    font-family: var(--font-base);
}

/* --- Methods --- */
.c-price__methods-head {
    text-align: center;
    margin-bottom: 30px;
}

.c-price__methods-title {
    margin: 0 0 4px;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--lh-tight);
}

.c-price__methods-subtitle {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text);
}

.c-price__methods {
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
}

.c-price__method {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
}

.c-price__method:not(:last-child) {
    border-right: 1px dashed var(--color-border-gray);
}

.c-price__method-label {
    margin: 0 0 16px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-text);
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    padding: 8px 0;
}

.c-price__method-img {
    margin-bottom: 20px;
}

.c-price__method-img img {
    width: 100%;
    height: auto;
    display: block;
}

.c-price__method-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-price__method-brand {
    margin: 0 0 6px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text);
}


.c-price__method-rate {
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--color-red);
    line-height: var(--lh-tight);
    font-family: var(--font-avenir);
}

.c-price__method-rate.text-black {
    color: var(--color-text);
}

.c-price__method-rate-unit {
    font-size: var(--fs-20);
}

.c-price__method-other {
    font-size: var(--fs-20);
    color: #565656;
    line-height: 1;
    font-family: var(--font-avenir);
}

/* --- CTA --- */
.c-price__cta {
    text-align: center;
}

.c-price__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 380px;
    height: 60px;
    background-color: var(--color-accent);
    color: var(--color-bg);
    border-radius: var(--radius-full);
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--transition-base);
    box-shadow: 0 2px 0px rgba(0, 0, 0, .5);
}

.c-price__btn:hover {
    opacity: 0.8;
}

.c-price__btn-arrow {
    font-size: var(--fs-lg);
    line-height: 1;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-price__title {
        font-size: var(--fs-xl);
        margin-bottom: 30px;
    }

    .c-price__card {
        padding: 30px 20px;
    }

    .c-price__head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .c-price__head-visual {
        width: 160px;
    }

    .c-price__method:not(:last-child) {
        border-right: none;
        border-bottom: 1px dashed var(--color-border-gray);
        padding-bottom: 30px;
        margin-bottom: 10px;
    }

    .c-price__btn {
        min-width: 100%;
    }
}


/* ==========================================================================
    Component: c-reasons
========================================================================== */
.c-reasons {
    background-color: var(--color-bg-lightgray);
}

.c-reasons__head {
    text-align: center;
    margin-bottom: 40px;
}

.c-reasons__series {
    margin: 0 0 8px;
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text);
}

.c-reasons__title {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text);
}

.c-reasons__title-deco {
    position: absolute;
    top: -8px;
    right: -36px;
    width: 32px;
    height: auto;
}

/* --- List --- */
.c-reasons__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 1.591rem + 4.55vw, 5rem);
}

.c-reasons__item {
    box-shadow: var(--shadow);
    border-radius: var(--radius-lg);
    
}

/* --- Card --- */
.c-reasons__card {
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    background-color: var(--color-primary-light);
}

.c-reason__ab {
    background-color: white;
    position: absolute;
    border-radius: var(--radius-md) 0 40px 0;
}

.c-reasons__num {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 0px 42px 5px 21px;
    background-color: white;
    color: var(--gradation);
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 1.5;
}

.c-reasons__num-figure {
    font-size: var(--fs-2xl);
    line-height: 1.25;
    font-family: var(--font-avenir);
}

.c-reasons__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-primary);
    align-items: stretch;
}

.c-reasons__body-note {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    color: var(--color-text);
}

/* --- Body Left --- */
.c-reasons__body-left {
    flex: 1;
    color: var(--color-bg);
    padding: 100px 32px 40px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-reasons__heading {
    margin: 0 0 12px;
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.c-reasons__desc {
    margin: 0 0 20px;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    max-width: 520px;
}

.c-reasons__desc span {
    font-size: 18px;
    font-weight: 700;
}

.c-reasons__cards {
    max-width: 70%;
}

.c-reasons__cards img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Body Right --- */
.c-reasons__body-right {
    flex-shrink: 0;
    width: 50%;
    background-color: var(--color-primary-light);
    position: relative;
}

.c-reasons__body-right.gray-bg {
    background-color: #DCE2E7;
}

.c-reasons__label {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-navy);
}

.c-reasons__rates {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.c-reasons__rate-before {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    
    color: var(--color-border-gray);
}

.c-reasons__rate-arrow {
    font-size: var(--fs-lg);
    color: var(--color-primary);
}

.c-reasons__rate-after {
    position: relative;
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 700;
    
    color: var(--color-primary);
}

.c-reasons__rate-unit {
    font-size: var(--fs-base);
}

.c-reasons__star {
    position: absolute;
    top: -14px;
    right: -30px;
    width: 32px;
    height: auto;
}

.c-reasons__rate-note {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
    color: var(--color-border-gray);
}

/* --- Accordion --- */
.reasons__accordion-wrap {
    padding: 50px 32px 32px;
    background-color: white;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.c-reasons__accordion {
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);
    border-radius: var(--radius-lg);
}

.c-reasons__acc-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 50px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
}

.c-reasons__acc-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transform: translateY(-50%);
}

.c-reasons__acc-icon::before,
.c-reasons__acc-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-navy);
    transition: transform var(--transition-base);
}

.c-reasons__acc-icon::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.c-reasons__acc-icon::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.c-reasons__acc-btn[aria-expanded="true"] .c-reasons__acc-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.c-reasons__acc-panel {
    border-top: 1px dotted var(--color-text);
}

.c-reasons__acc-panel[hidden] {
    display: none;
}

.c-reasons__acc-inner {
    padding: 24px 30px 30px;
}

.c-reasons__acc-list {
    margin: 0 0 20px;
    padding-left: 1.4em;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    list-style: disc;
}


.c-reasons__acc-list a {
    color: var(--color-primary);
    word-break: break-all;
}

.c-reasons__exclude {
    display: flex;
    align-items: stretch;
    gap: var(--gap-20);
    margin-bottom: 20px;
    padding: 16px 20px;
    background-color: var(--color-bg-lightgray);
    border: 1px solid var(--color-border-gray);
}

.c-reasons__exclude-label {
    flex-shrink: 0;
    margin: 0;
    padding: 6px 14px;
    background-color: var(--color-border-gray);
    border: 1px solid var(--color-border-gray);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.c-reasons__exclude-list {
    margin: 0;
    padding-left: 1.2em;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.c-reasons__exclude-list li {
    list-style: disc;
}
.c-reasons__acc-note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: #565656;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-reasons__body-left {
        padding: 50px 0 40px;
        width: 100%;
    }

    .c-reasons__heading {
        font-size: clamp(1.75rem, 0.966rem + 2.68vw, 2.25rem);
    }

    .reasons__accordion-wrap {
        padding: 20px 10px 32px;
    }

    .c-reasons__title {
        font-size: var(--fs-xl);
    }

    .c-reasons__body {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px 30px;
    }

    .c-reasons__body-right {
        width: 100%;
    }

    .c-reasons__exclude {
        flex-direction: column;
    }

    .c-reasons__exclude-list {
        grid-template-columns: auto;
    }

    .c-reasons__acc-inner {
        padding: 24px 15px 30px;
    }
}

@media (max-width: 768px) {
    .c-reasons__body-left {
        padding: 50px 0 20px;
    }
}


/* ==========================================================================
    Component: c-reasons（理由2以降で使用する追加パーツ）
========================================================================== */

/* --- Body Right Image（理由2用：右上が画像） --- */
.c-reasons__body-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-reasons__body-img.contain {
    object-fit: contain;
}

/* --- Methods Table --- */
.c-reasons__methods {
    list-style: none;
    margin: 0 0 30px;
    padding: 12px;
    border: 1px solid var(--color-border-gray);
    background-color: var(--color-primary-light);
}

.c-reasons__methods-row {
    display: grid;
    grid-template-columns: 160px 260px 1fr;
    align-items: center;
    gap: var(--gap-30);
    padding: 20px 24px;
    background-color: white;
    margin-bottom: 10px;
}

.c-reasons__methods-row:last-child {
    margin-bottom: 0;
}

.c-reasons__methods-label {
    position: relative;
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.c-reasons__methods-label::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.c-reasons__methods-logo {
    position: relative;
    padding-right: var(--gap-30);
    padding-left: var(--gap-30);
}

.c-reasons__methods-logo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-right: 1px dotted var(--color-primary);
}


.c-reasons__methods-logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-left: 1px dotted var(--color-primary);
}

.c-reasons__methods-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.c-reasons__methods-desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-text);
}

/* --- Inbound Title --- */
.c-reasons__inbound-title {
    margin: 50px 0 30px;
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text);
}

/* --- Inbound Banner --- */
.c-reasons__inbound {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.c-reasons__inbound-left {
    flex: 0 0 40%;
    padding: 30px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    text-align: center;
}

.c-reasons__inbound-lead {
    font-size: var(--fs-24);
    font-weight: 700;
}

.c-reasons__inbound-lead-num {
    font-size: clamp(2.188rem, 1.733rem + 2.27vw, 3.438rem);
    font-family: var(--font-avenir);
}

.c-reasons__inbound-badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 0px 16px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-24);
    font-weight: 700;
}

.c-reasons__inbound-catch {
    margin: 0 0 4px;
    font-size: var(--fs-20);
    font-weight: 700;
}

.c-reasons__inbound-rate {
    margin: 0;
    font-size: clamp(5.625rem, 4.943rem + 3.41vw, 7.5rem);
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-avenir);
}

.c-reasons__inbound-rate-unit {
    font-size: var(--fs-xl);
}

.c-reasons__inbound-right {
    flex: 1;
    padding: 30px;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.c-reasons__inbound-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--lh-tight);
}

.c-reasons__inbound-brand-icon {
    flex-shrink: 0;
}

.c-reasons__inbound-logos {
    width: 100%;
}

.c-reasons__inbound-logos img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-reasons__body-right {
        width: 100%;
    }

    .c-reasons__methods-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--gap-10);
    }

    .c-reasons__inbound {
        grid-template-columns: auto;
    }

    .c-reasons__inbound-left,
    .c-reasons__inbound-right {
        flex: none;
    }
    .c-reasons__methods-label {
        font-size: clamp(1.25rem, 0.466rem + 2.68vw, 1.75rem);
    }
}

/* ==========================================================================
    Component: c-reasons（理由3で使用する追加パーツ）
========================================================================== */

.c-reasons__support-title {
    margin: 0 0 60px;
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-navy);
}

.c-reasons__support {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-reasons__support-item {
    text-align: center;
    background-color: #F1FAFB;
    padding: 0 32px 32px 32px;
}

.c-reasons__support-icon {
    width: 120px;
    height: 120px;
    margin: -30px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    border-radius: 50%;
}

.c-reasons__support-icon img {
    width: 100px;
    height: 100px;
    display: block;
}

.c-reasons__support-heading {
    margin: 0 0 12px;
    font-size: var(--fs-24);
    font-weight: 700;
    color: var(--color-navy);
    line-height: var(--lh-tight);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-reasons__support-desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-text);
    text-align: left;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-reasons__support {
        gap: var(--gap-40);
    }
    .c-reasons__support-icon {
        width: clamp(5.625rem, 2.684rem + 10.03vw, 7.5rem);
        height: clamp(5.625rem, 2.684rem + 10.03vw, 7.5rem);
    }
    .c-reasons__support-icon img {
        width: clamp(4.375rem, 1.434rem + 10.03vw, 6.25rem);
        height: clamp(4.375rem, 1.434rem + 10.03vw, 6.25rem);
    }
}

/* ==========================================================================
    Component: c-reasons（理由4で使用する追加パーツ）
========================================================================== */

.c-reasons__body--04 .c-reasons__body-left {
    background-color: var(--color-primary);
}

/* --- Cycle Tables --- */
.c-reasons__cycle {
    display: grid;
    align-items: stretch;
    gap: 16px;
    margin: 0 0 24px;
    grid-template-columns: 1fr 1fr;
}

.c-reasons__cycle-table {
    border-collapse: collapse;
    background-color: var(--color-bg);
    font-size: var(--fs-sm);
}

.c-reasons__cycle-table th,
.c-reasons__cycle-table td {
    padding: 18px 16px;
    text-align: center;
    color: var(--color-text);
    font-weight: 400;
}

.c-reasons__cycle-table td span {
    font-weight: 400;
}

.c-reasons__cycle-table th.c-reasons__cycle-table-label.label-title {
    width: 28%;
}

.c-reasons__cycle-table-label {
    font-weight: 700;
    white-space: nowrap;
    border-right: 1px dotted var(--color-primary);
}

.c-reasons__cycle-table-sublabel {
    font-weight: 400;
    color: var(--color-border-gray);
}

.c-reasons__cycle-table tr:first-child .c-reasons__cycle-table-sublabel,
.c-reasons__cycle-table tr:first-child td {
    border-bottom: 1px dotted var(--color-primary);
}

/* --- 通常テーブル --- */
.c-reasons__cycle-table-bg {
    padding: 8px;
    background-color: var(--color-primary-light);
    width: 100%;
    border-radius: var(--radius-sm);
}

.c-reasons__cycle-table--highlight-bg {
    padding: 8px;
    background-color: var(--color-primary);
    width: 100%;
    border-radius: var(--radius-sm);    
}

/* --- 翌日入金サービス（強調テーブル） --- */
.c-reasons__cycle-table--highlight {
    border: 2px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.c-reasons__cycle-table--highlight .c-reasons__cycle-table-note {
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-weight: 700;
    line-height: var(--lh-tight);
}

/* --- Notes --- */
.c-reasons__cycle-notes {
    margin: 0;
    padding-left: 1.2em;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--color-text);
}

.c-reasons__cycle-notes li {
    margin-bottom: -3px;
}

/* --- Utility: screen-reader only（未定義の場合の補足） --- */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-reasons__cycle {
        grid-template-columns: auto;
    }

    .c-reasons__cycle-table th,
    .c-reasons__cycle-table td {
        padding: 12px 10px;
        font-size: var(--fs-xs);
    }
}

/* ==========================================================================
    Component: c-voice
========================================================================== */

.c-voice__title {
    margin: 0 0 50px;
    font-size: var(--fs-2xl);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
}

.c-voice__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-voice__item {
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    border-radius: var(--radius-lg);
}

.c-voice__thumb {
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

.c-voice__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-voice__textwrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--section-padding-x);
}

.c-voice__text {
    flex: 1;
    margin: 0 0 12px;
    font-size: clamp(1rem, 0.554rem + 0.93vw, 1.25rem);
    font-weight: 700;
    line-height: var(--lh-base);
    color: var(--color-text);
}

.c-voice__name {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-caution);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-voice__title {
        font-size: var(--fs-xl);
        margin-bottom: 30px;
    }

    .c-voice__text {
        font-size: var(--fs-base);
    }
}


/* ==========================================================================
    Component: c-faq
========================================================================== */
.c-faq__title {
    margin: 0 0 50px;
    font-size: var(--fs-2xl);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
}

.c-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-30);
}

.c-faq__item {
    border: 1px solid var(--color-border-gray);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
}

/* --- Question --- */
.c-faq__q {
    margin: 0;
}

.c-faq__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--gap-20);
    padding: 24px 30px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.c-faq__qtext {
    flex: 1;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--lh-tight);
}

/* --- Q / A Label --- */
.c-faq__label {
    flex-shrink: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
}

.c-faq__label--q {
    color: var(--color-text);
}

.c-faq__label--a {
    color: var(--color-navy);
}

/* --- Toggle Icon (+ / -) --- */
.c-faq__icon {
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--color-navy);
}

.c-faq__icon::before,
.c-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-bg);
    transition: transform var(--transition-base);
}

.c-faq__icon::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.c-faq__icon::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.c-faq__btn[aria-expanded="true"] .c-faq__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* --- Answer --- */
.c-faq__a {
    overflow: hidden;
    border-top: 1px solid var(--color-border-gray);
}

.c-faq__a[hidden] {
    display: none;
}

.c-faq__a-inner {
    display: flex;
    gap: var(--gap-20);
    padding: 24px 30px 28px;
}

.c-faq__atext {
    flex: 1;
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
}

.c-faq__atext p {
    margin: 0 0 1em;
}

.c-faq__atext p:last-child {
    margin-bottom: 0;
}

.c-faq__ul {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.c-faq__ul li {
    line-height: var(--lh-base);
    list-style: disc;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-faq__title {
        font-size: var(--fs-xl);
        margin-bottom: 30px;
    }

    .c-faq__list {
        gap: var(--gap-20);
    }

    .c-faq__btn {
        padding: 18px 20px;
        gap: var(--gap-10);
    }

    .c-faq__qtext {
        font-size: var(--fs-sm);
    }

    .c-faq__icon {
        width: 26px;
        height: 26px;
    }

    .c-faq__a-inner {
        padding: 18px 20px 22px;
        gap: var(--gap-10);
    }

    .c-faq__atext {
        font-size: var(--fs-sm);
    }
}

/* ==========================================================================
    Component: c-back-to-top
========================================================================== */
.c-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 254px;
    z-index: var(--z-header);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    color: var(--color-navy);
    border: 1px solid var(--color-border-gray);
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.c-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.c-back-to-top:hover {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}

.c-back-to-top svg {
    display: block;
}

/* --- フッター（黒背景）に重なっている間の見え方調整 --- */
.c-back-to-top.is-on-dark {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-bg);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.c-back-to-top.is-on-dark:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .c-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}


/* ==================================================
   USEN PAY 追従CTA
================================================== */

.pay-floating-cta,
.pay-floating-cta *,
.pay-contract-modal,
.pay-contract-modal * {
    box-sizing: border-box;
}

.pay-floating-cta {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;

    width: 310px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}

.pay-floating-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ------------------------------------------
   本体
------------------------------------------ */

.pay-floating-cta__inner {
    position: relative;

    padding: 12px 17px 2px 17px;

    background:
        linear-gradient(
            135deg,
            #3396d2 0%,
            #246caf 100%
        );

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .25);
}

.pay-floating-cta.is-visible.is-collapsed .pay-floating-cta__inner {
    padding: 0;
}

.pay-floating-cta__title {
    margin: 0 0 10px;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}


/* ------------------------------------------
   開閉ボタン
------------------------------------------ */

.pay-floating-cta__toggle {
    position: absolute;
    top: -13px;
    right: -11px;

    width: 37px;
    height: 37px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #050505;

    cursor: pointer;

    z-index: 2;
}

.pay-floating-cta__toggle span {
    position: absolute;
    top: 8px;
    left: 11px;

    width: 15px;
    height: 15px;

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

    transform: rotate(45deg);
    transition: transform .25s ease;
}

.pay-floating-cta.is-collapsed .pay-floating-cta__toggle span {
    top: 15px;
    transform: rotate(225deg);
}


/* ------------------------------------------
   ボタン
------------------------------------------ */

.pay-floating-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;

    overflow: hidden;

    max-height: 200px;
    padding: 0px 0 10px;

    transition:
        max-height .3s ease,
        opacity .2s ease,
        margin .3s ease;

}

.pay-floating-cta.is-collapsed .pay-floating-cta__title,
.pay-floating-cta.is-collapsed .pay-floating-cta__buttons {
    display: none;
}

.pay-floating-cta__button {
    position: relative;

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

    width: 100%;
    min-height: 65px;
    padding: 5px 15px 5px 15px;

    border: 2px solid var(--color-accent);
    border-radius: 16px;

    text-decoration: none;

    cursor: pointer;

    box-shadow: 0 4px 7px rgba(0, 0, 0, .24);

    transition:
        opacity .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.pay-floating-cta__button:hover {
    opacity: .92;
    transform: translateY(-1px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, .27);
}


/* 新規・追加 */
.pay-floating-cta__button--primary {
    color: #fff;
    background: var(--color-accent);
}

/* 契約済み */
.pay-floating-cta__button--secondary {
    color: #333;
    background: #fff;
}


/* PC表示テキスト */
.pay-floating-cta__pc-text {
    display: block;

    font-size: 20px;
    line-height: 1.2;
    text-align: center;
}

.pay-floating-cta__pc-text strong,
.pay-floating-cta__pc-text span {
    display: block;
    font-size: 18px;
}

.pay-floating-cta__pc-text strong {
    font-size: 20px;
    font-weight: 700;
}

.pay-floating-cta__sp-text {
    display: none;
}


/* ------------------------------------------
   矢印
------------------------------------------ */

.pay-floating-cta__arrow {
    position: absolute;
    top: 50%;
    right: 17px;

    width: 10px;
    height: 10px;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;

    transform:
        translateY(-50%)
        rotate(45deg);
}

.pay-floating-cta__button--primary .pay-floating-cta__arrow {
    color: #fff;
}

.pay-floating-cta__button--secondary .pay-floating-cta__arrow {
    color: var(--color-accent);
}


/* ==================================================
   モーダル
================================================== */

.pay-contract-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

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

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}

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

.pay-contract-modal__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .52);
}

.pay-contract-modal__dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 1020px);

    padding: 48px 65px 85px;

    background: #fff;

    border-radius: 20px;

    box-shadow:
        0 0 0 3px #222,
        0 5px 16px rgba(0, 0, 0, .35);
}

.pay-contract-modal__close {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 40px;
    height: 40px;

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;
}

.pay-contract-modal__close span {
    position: absolute;
    top: 19px;
    left: 7px;

    width: 26px;
    height: 2px;

    background: #333;
}

.pay-contract-modal__close span:first-child {
    transform: rotate(45deg);
}

.pay-contract-modal__close span:last-child {
    transform: rotate(-45deg);
}


/* ------------------------------------------
   Modal contents
------------------------------------------ */

.pay-contract-modal__title {
    margin: 0;

    color: #333;

    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.pay-contract-modal__body {
    max-width: 630px;

    margin: 85px auto 0;
}

.pay-contract-modal__lead {
    margin: 0 0 16px;

    color: #333;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.pay-contract-modal__telbox {
    padding: 16px 20px 18px;

    border: 2px solid #6c6c6c;

    text-align: center;
}

.pay-contract-modal__tel-label {
    margin: 0 0 5px;

    color: #333;

    font-size: 17px;
    font-weight: 700;
}

.pay-contract-modal__tel {
    display: inline-block;

    color: #4799fa;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    text-underline-offset: 3px;
}

.pay-contract-modal__notes {
    margin-top: 14px;

    color: #555;

    font-size: 14px;
    line-height: 1.35;
}

.pay-contract-modal__notes p {
    margin: 0;
}


/* モーダル展開時スクロール禁止 */
body.is-pay-modal-open {
    overflow: hidden;
}


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

@media (max-width: 768px) {

    /*
     * SPは画面最下部に固定
     */
    .pay-floating-cta {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;

        width: auto;
    }

    .pay-floating-cta__inner {
        padding: 10px;

        background: #050505;

        box-shadow: none;
    }

    .pay-floating-cta__title {
        display: none;
    }

    .pay-floating-cta__buttons {
        gap: 5px;

        max-height: 120px;
    }

    .pay-floating-cta__button {
        min-height: 45px;

        padding: 7px 45px 7px 15px;

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

        box-shadow: none;
    }

    .pay-floating-cta__button--primary {
        background: var(--color-accent);
    }

    .pay-floating-cta__button--secondary {
        background: #fff;
    }

    .pay-floating-cta__pc-text {
        display: none;
    }

    .pay-floating-cta__sp-text {
        display: block;

        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
    }

    .pay-floating-cta__button--secondary .pay-floating-cta__sp-text {
        font-size: 15px;
        font-weight: 700;
    }

    .pay-floating-cta__arrow {
        right: 22px;

        width: 11px;
        height: 11px;
    }

    /*
     * 添付Group 122に合わせて
     * SPでは開閉ボタンは非表示
     */
    .pay-floating-cta__toggle {
        display: none;
    }


    /* ------------------------------------------
       SP モーダル
    ------------------------------------------ */

    .pay-contract-modal {
        padding: 20px 12px;
    }

    .pay-contract-modal__dialog {
        max-height: calc(100vh - 40px);

        padding: 45px 20px 40px;

        border-radius: 15px;

        overflow-y: auto;
    }

    .pay-contract-modal__title {
        font-size: 23px;
        line-height: 1.4;
    }

    .pay-contract-modal__body {
        margin-top: 45px;
    }

    .pay-contract-modal__lead {
        font-size: 17px;
    }

    .pay-contract-modal__telbox {
        padding: 15px 10px;
    }

    .pay-contract-modal__tel-label {
        font-size: 14px;
    }

    .pay-contract-modal__tel {
        font-size: 20px;
    }

    .pay-contract-modal__notes {
        font-size: 12px;
    }
}