@charset "UTF-8";

/* ========================================
   FAQページ全体
======================================== */

.faq-main {
    position: relative;
    overflow: hidden;

    color: #ffffff;
    background: #050609;
}


/* ========================================
   FAQページ共通背景
======================================== */

.faq-hero,
.faq-section,
.faq-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/* グリッド背景 */

.faq-grid-background {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image:
        linear-gradient(
            rgb(36 233 255 / 6%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(36 233 255 / 6%) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%
        );
}


/* ネオンのぼかし光 */

.faq-hero::before,
.faq-section::before,
.faq-cta::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 580px;
    height: 580px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(36 233 255 / 16%) 0%,
            rgb(36 233 255 / 7%) 35%,
            transparent 72%
        );

    filter: blur(18px);

    pointer-events: none;
}

.faq-hero::after,
.faq-section::after,
.faq-cta::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(255 143 216 / 13%) 0%,
            rgb(184 156 255 / 7%) 40%,
            transparent 72%
        );

    filter: blur(20px);

    pointer-events: none;
}


/* ========================================
   Hero
======================================== */

.faq-hero {
    display: flex;
    align-items: center;

    min-height: 100svh;

    padding:
        calc(var(--header-height, 90px) + 70px)
        var(--side-space, 40px)
        90px;

    background:
        radial-gradient(
            circle at 18% 32%,
            rgb(36 233 255 / 12%),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 62%,
            rgb(255 143 216 / 10%),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #050609 0%,
            #080b12 50%,
            #090711 100%
        );
}

.faq-hero::before {
    top: -180px;
    left: -180px;
}

.faq-hero::after {
    right: -150px;
    bottom: -180px;
}


/* Hero内側 */

.faq-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 80px;

    width: min(1200px, 100%);
    margin: 0 auto;
}


/* Hero文章 */

.faq-hero-content {
    position: relative;
}

.faq-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.faq-hero-label::before {
    content: "";

    width: 42px;
    height: 1px;

    background: var(--neon-blue, #24e9ff);

    box-shadow:
        0 0 8px rgb(36 233 255 / 80%);
}

.faq-hero-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(3.3rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.04em;
    white-space: nowrap;

    text-shadow:
        0 0 12px rgb(36 233 255 / 34%),
        0 0 32px rgb(36 233 255 / 14%);
}
.faq-hero-catch {
    margin-top: 32px;

    color: #ffffff;

    font-size: clamp(1.45rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: 0.06em;
}

.faq-hero-catch-pink {
    color: var(--neon-pink, #ff8fd8);
}

.faq-catch-sp-br {
    display: none;
}
.faq-hero-text {
    max-width: none;
    margin-top: 24px;

    color: rgb(255 255 255 / 70%);

    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.faq-text-sp-br {
    display: none;
}

/* Heroボタン */

.faq-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-width: 220px;
    min-height: 58px;
    margin-top: 38px;
    padding: 14px 30px;

    border: 1px solid rgb(36 233 255 / 65%);

    clip-path:
        polygon(
            14px 0,
            100% 0,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            0 100%,
            0 14px
        );

    color: #071014;

    background:
        linear-gradient(
            90deg,
            var(--neon-blue, #24e9ff),
            #86f6ff
        );

    font-family: "Orbitron", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;

    box-shadow:
        0 0 22px rgb(36 233 255 / 24%);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.faq-hero-button::after {
    content: "▼";

    font-size: 0.65rem;
}

.faq-hero-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 0 32px rgb(36 233 255 / 42%);
}


/* ========================================
   Hero右側
======================================== */

.faq-hero-visual {
    position: relative;

    display: grid;
    place-items: center;

    width: min(500px, 100%);
    aspect-ratio: 1;
    margin-left: auto;
}

.faq-hero-visual::before {
    content: "";

    position: absolute;
    inset: 13%;

    border: 1px solid rgb(36 233 255 / 16%);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(36 233 255 / 9%),
            transparent 68%
        );

    box-shadow:
        inset 0 0 48px rgb(36 233 255 / 8%),
        0 0 70px rgb(36 233 255 / 8%);
}


/* 円 */

.faq-hero-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.faq-circle-01 {
    width: 82%;
    height: 82%;

    border: 1px solid rgb(36 233 255 / 38%);
}

.faq-circle-02 {
    width: 62%;
    height: 62%;

    border: 1px dashed rgb(255 143 216 / 42%);
}

.faq-circle-03 {
    width: 42%;
    height: 42%;

    border: 2px solid rgb(184 156 255 / 44%);

    box-shadow:
        0 0 30px rgb(184 156 255 / 12%);
}


/* ?マーク */

.faq-hero-icon {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 175px;
    height: 175px;

    border: 1px solid rgb(36 233 255 / 65%);
    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 10%),
            rgb(255 255 255 / 3%)
        );

    font-family: "Orbitron", sans-serif;
    font-size: 6rem;
    font-weight: 900;

    backdrop-filter: blur(18px);

    text-shadow:
        0 0 14px rgb(36 233 255 / 60%);

    box-shadow:
        inset 0 0 25px rgb(36 233 255 / 10%),
        0 0 32px rgb(36 233 255 / 18%);
}


/* 浮遊テキスト */

.faq-floating-word {
    position: absolute;

    padding: 7px 14px;

    border: 1px solid rgb(255 255 255 / 12%);

    color: rgb(255 255 255 / 62%);
    background: rgb(8 12 20 / 72%);

    font-family: "Orbitron", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;

    backdrop-filter: blur(8px);
}

.faq-word-01 {
    top: 16%;
    left: 2%;
}

.faq-word-02 {
    top: 15%;
    right: 0;
}

.faq-word-03 {
    right: 4%;
    bottom: 16%;
}


/* ========================================
   FAQセクション
======================================== */

.faq-section {
    padding:
        130px
        var(--side-space, 40px);

    background:
        linear-gradient(
            160deg,
            #050609 0%,
            #080b12 54%,
            #08060d 100%
        );
}

.faq-section::before {
    top: 180px;
    left: -250px;
}

.faq-section::after {
    right: -220px;
    bottom: 120px;
}

.faq-inner {
    position: relative;
    z-index: 2;

    width: min(1050px, 100%);
    margin: 0 auto;
}


/* ========================================
   FAQ一覧
======================================== */

.faq-list {
    display: grid;
    gap: 18px;

    margin-top: 54px;
}


/* FAQカード */

.faq-item {
    position: relative;

    overflow: hidden;

    border: 1px solid rgb(36 233 255 / 20%);

    clip-path:
        polygon(
            18px 0,
            100% 0,
            100% calc(100% - 18px),
            calc(100% - 18px) 100%,
            0 100%,
            0 18px
        );

    background:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 7%),
            rgb(255 255 255 / 2%)
        );

    box-shadow:
        0 18px 45px rgb(0 0 0 / 22%);

    backdrop-filter: blur(16px);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.faq-item::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--neon-blue, #24e9ff),
            var(--neon-pink, #ff8fd8)
        );

    box-shadow:
        0 0 12px rgb(36 233 255 / 40%);
}

.faq-item:hover {
    transform: translateY(-3px);

    border-color: rgb(36 233 255 / 42%);

    box-shadow:
        0 22px 55px rgb(0 0 0 / 30%),
        0 0 20px rgb(36 233 255 / 8%);
}


/* 開いているFAQ */

.faq-item.is-open {
    border-color: rgb(36 233 255 / 48%);

    box-shadow:
        0 24px 60px rgb(0 0 0 / 34%),
        0 0 24px rgb(36 233 255 / 10%);
}


/* ========================================
   質問部分
======================================== */

.faq-question {
    position: relative;

    display: grid;
    grid-template-columns: 54px 1fr 42px;
    align-items: center;
    gap: 18px;

    width: 100%;
    min-height: 92px;
    padding: 22px 28px;

    border: none;

    color: #ffffff;
    background: transparent;

    text-align: left;

    cursor: pointer;
}

.faq-question-text {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Q・Aマーク共通 */

.faq-mark {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border: 1px solid currentColor;

    clip-path:
        polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );

    font-family: "Orbitron", sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
}

.faq-mark-question {
    color: var(--neon-blue, #24e9ff);

    background: rgb(36 233 255 / 8%);

    text-shadow:
        0 0 8px rgb(36 233 255 / 55%);

    box-shadow:
        inset 0 0 12px rgb(36 233 255 / 8%);
}

.faq-mark-answer {
    color: var(--neon-pink, #ff8fd8);

    background: rgb(255 143 216 / 8%);

    text-shadow:
        0 0 8px rgb(255 143 216 / 50%);

    box-shadow:
        inset 0 0 12px rgb(255 143 216 / 8%);
}


/* 開閉アイコン */

.faq-toggle-icon {
    position: relative;

    display: block;

    width: 34px;
    height: 34px;

    border: 1px solid rgb(36 233 255 / 30%);
    border-radius: 50%;

    background: rgb(36 233 255 / 5%);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 13px;
    height: 2px;

    background: var(--neon-blue, #24e9ff);

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 6px rgb(36 233 255 / 60%);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

.faq-toggle-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* 開いたとき */

.faq-item.is-open .faq-toggle-icon {
    transform: rotate(180deg);

    border-color: rgb(255 143 216 / 55%);

    box-shadow:
        0 0 14px rgb(255 143 216 / 14%);
}

.faq-item.is-open .faq-toggle-icon::after {
    opacity: 0;
}


/* ========================================
   回答部分
======================================== */

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    overflow: hidden;

    transition:
        grid-template-rows 0.45s ease;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;

    min-height: 0;
    padding:
        0
        28px;
}

.faq-item.is-open .faq-answer-inner {
    padding:
        0
        28px
        28px;
}

.faq-answer-inner::before {
    content: "";

    position: absolute;
}

.faq-answer-text {
    padding: 20px 22px;

    border-top: 1px solid rgb(255 255 255 / 8%);
    border-left: 2px solid rgb(255 143 216 / 36%);

    color: rgb(255 255 255 / 74%);

    background:
        linear-gradient(
            90deg,
            rgb(255 143 216 / 6%),
            transparent
        );

    font-size: 0.95rem;
    line-height: 2;
    letter-spacing: 0.04em;
}

.faq-answer-text p + p {
    margin-top: 14px;
}


/* ========================================
   利用開始までの流れ
======================================== */

.faq-step-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    padding: 20px 22px;

    border-top: 1px solid rgb(255 255 255 / 8%);
    border-left: 2px solid rgb(255 143 216 / 36%);

    background:
        linear-gradient(
            90deg,
            rgb(255 143 216 / 6%),
            transparent
        );

    counter-reset: faq-step;
}

.faq-step-list li {
    position: relative;

    min-height: 86px;
    padding:
        34px
        14px
        14px;

    border: 1px solid rgb(255 255 255 / 10%);

    color: rgb(255 255 255 / 78%);
    background: rgb(255 255 255 / 3%);

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;

    counter-increment: faq-step;
}

.faq-step-list li::before {
    content:
        "STEP "
        counter(faq-step, decimal-leading-zero);

    position: absolute;
    top: 9px;
    left: 50%;

    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.12em;

    transform: translateX(-50%);
}


/* ========================================
   CTA
======================================== */

.faq-cta {
    display: flex;
    align-items: center;

    min-height: 78svh;

    padding:
        110px
        var(--side-space, 40px);

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgb(36 233 255 / 11%),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #050609,
            #0a0710
        );
}

.faq-cta::before {
    top: -170px;
    left: -180px;
}

.faq-cta::after {
    right: -140px;
    bottom: -180px;
}

.faq-cta-inner {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);
    margin: 0 auto;
    padding: 70px 60px;

    border: 1px solid rgb(36 233 255 / 24%);

    clip-path:
        polygon(
            28px 0,
            calc(100% - 28px) 0,
            100% 28px,
            100% calc(100% - 28px),
            calc(100% - 28px) 100%,
            28px 100%,
            0 calc(100% - 28px),
            0 28px
        );

    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 9%),
            rgb(255 255 255 / 3%)
        );

    box-shadow:
        inset 0 0 35px rgb(36 233 255 / 5%),
        0 25px 70px rgb(0 0 0 / 35%);

    backdrop-filter: blur(20px);
}

.faq-cta-label {
    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.faq-cta-title {
    max-width: none;
    margin-top: 22px;

    color: #ffffff;

    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.05em;
   white-space: nowrap;
    text-shadow:
        0 0 20px rgb(36 233 255 / 18%);
}

.faq-cta .faq-cta-inner .faq-cta-text.faq-cta-one-line {
    display: block;
    width: 100%;
    max-width: none;
    margin: 24px auto 0;

    color: rgb(255 255 255 / 70%);

    font-size: clamp(0.68rem, 0.9vw, 0.8rem) !important;
    line-height: 1.7;
    letter-spacing: 0 !important;
    text-align: center;
    white-space: nowrap !important;
}

.faq-cta .faq-cta-one-line span {
    display: inline-block;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}/* CTAボタン */

.faq-cta-button-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 36px;
}

.faq-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 250px;
    min-height: 58px;
    padding: 14px 26px;

    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.faq-cta-button:hover {
    transform: translateY(-4px);
}

.faq-cta-button-primary {
    border: 1px solid var(--neon-blue, #24e9ff);

    color: #071014;
    background: var(--neon-blue, #24e9ff);

    box-shadow:
        0 0 22px rgb(36 233 255 / 20%);
}

.faq-cta-button-primary:hover {
    box-shadow:
        0 0 34px rgb(36 233 255 / 40%);
}

.faq-cta-button-secondary {
    border: 1px solid rgb(255 143 216 / 62%);

    color: #ffffff;
    background: rgb(255 143 216 / 7%);
}

.faq-cta-button-secondary:hover {
    background: rgb(255 143 216 / 13%);

    box-shadow:
        0 0 26px rgb(255 143 216 / 18%);
}


/* ========================================
   キーボード操作時
======================================== */

.faq-question:focus-visible,
.faq-hero-button:focus-visible,
.faq-cta-button:focus-visible {
    outline:
        2px solid
        var(--neon-pink, #ff8fd8);

    outline-offset: 5px;
}


/* ========================================
   スムーズスクロール
======================================== */

html {
    scroll-behavior: smooth;
}