/*
 * ARIEL よくある質問 固定ページ
 */

.faq-page {
    --faq-width: var(--sky-content, 520px);
    --faq-text: #304f4d;
    --faq-deep: #176f69;
    --faq-turquoise: #239f96;
    --faq-mint: #e7f7f3;
    --faq-mint-deep: #cceae4;
    --faq-sky: #e8f7fb;
    --faq-coral: #d97878;
    --faq-coral-soft: #fff4f1;
    --faq-border: #c8dfdc;
    --faq-white: #ffffff;
    --faq-cream: #fffdf8;
}

.faq-page,
.faq-page * {
    box-sizing: border-box;
}

.faq-main {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #f7fcfa;
}

.faq-page.sky-home {
    width: min(100%, var(--faq-width));
    margin-inline: auto;
    overflow: hidden;
    color: var(--faq-text);
    font-family:
        "Hiragino Maru Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        "Meiryo",
        sans-serif;
    background-color: #f8fdfb;
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.10) 6%,
            rgba(255, 255, 255, 0.54) 14%,
            rgba(255, 255, 255, 0.66) 24%,
            rgba(255, 255, 255, 0.70) 50%,
            rgba(255, 255, 255, 0.66) 76%,
            rgba(255, 255, 255, 0.54) 86%,
            rgba(255, 255, 255, 0.10) 94%,
            rgba(255, 255, 255, 0.06) 100%
        ),
        url("/wp-content/themes/ariel-recruit-official/assets/images/sky/faq-page-body-bg.webp?v=6c9a8bd7");
    background-repeat:
        no-repeat,
        repeat-y;
    background-position:
        center top,
        center top;
    background-size:
        100% 100%,
        100% auto;
}

.faq-main ~ .site-footer {
    display: none;
}

.faq-hero .faq-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.faq-hero {
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(193, 224, 219, 0.9);
    background: transparent;
}

.faq-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.faq-hero__eyebrow,
.faq-intro__eyebrow,
.faq-related__eyebrow {
    margin: 0 0 8px;
    color: var(--faq-turquoise);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.13em;
}

.faq-hero h1 {
    margin: 0 0 17px;
    color: var(--faq-deep);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.faq-hero__lead {
    margin: 0;
    color: var(--faq-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.75;
}

.faq-hero__note {
    margin: 15px 0 0;
    color: #56716f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.faq-intro {
    padding: 32px 18px 36px;
    text-align: center;
    background: rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(207, 231, 227, 0.62);
}

.faq-intro h2,
.faq-related h2 {
    margin: 0 0 17px;
    color: var(--faq-deep);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

.faq-intro > p:not(.faq-intro__eyebrow) {
    margin: 0 0 11px;
    color: var(--faq-text);
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.85;
    text-align: left;
}

.faq-intro > p:last-of-type {
    margin-bottom: 0;
}

.faq-jump {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 25px;
}

.faq-jump__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 10px 7px;
    color: var(--faq-deep);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.94);
    border: 1.5px solid #a9d4ce;
    border-radius: 12px;
}

.faq-jump__number {
    display: block;
    margin-bottom: 2px;
    color: var(--faq-coral);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.faq-jump__link:focus-visible,
.faq-item summary:focus-visible,
.faq-related__link:focus-visible {
    outline: 3px solid var(--faq-deep);
    outline-offset: 3px;
}

.faq-categories {
    padding: 10px 0 12px;
    background: transparent;
}

.faq-category {
    padding: 30px 14px 34px;
    scroll-margin-top: 90px;
}

.faq-category + .faq-category {
    border-top: 1px solid rgba(202, 227, 223, 0.94);
}

.faq-category__header {
    margin: 0 5px 18px;
    text-align: center;
}

.faq-category__number {
    margin: 0 0 5px;
    color: var(--faq-coral);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.12em;
}

.faq-category__header h2 {
    margin: 0;
    color: var(--faq-deep);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.5;
}

.faq-category__items {
    display: grid;
    gap: 12px;
}

.faq-item {
    margin: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid var(--faq-border);
    border-radius: 14px;
}

.faq-item summary {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 26px;
    gap: 9px;
    align-items: center;
    min-height: 74px;
    padding: 14px 13px;
    color: var(--faq-deep);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::marker {
    display: none;
    content: "";
}

.faq-item__mark,
.faq-item__answer-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.faq-item__mark {
    color: #ffffff;
    background: var(--faq-turquoise);
}

.faq-item__question {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.65;
}

.faq-item__toggle {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--faq-deep);
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

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

.faq-item[open] > summary {
    background: var(--faq-mint);
    border-bottom: 1px solid #cce5e0;
}

.faq-item[open] .faq-item__toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}

.faq-item__answer {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 17px 14px 18px;
    background: rgba(255, 253, 248, 0.97);
}

.faq-item__answer-mark {
    color: #ffffff;
    background: var(--faq-coral);
}

.faq-item__answer p {
    margin: 0;
    color: var(--faq-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}

.faq-item__answer .faq-item__count {
    margin-top: 11px;
    color: #71908d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.11em;
}

.faq-related {
    padding: 36px 18px 40px;
    text-align: center;
    background: rgba(239, 250, 247, 0.92);
    border-top: 1px solid rgba(199, 226, 221, 0.95);
}

.faq-related__lead {
    margin: 0;
    color: var(--faq-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
}

.faq-related__links {
    display: grid;
    gap: 10px;
    margin-top: 23px;
}

.faq-related__link {
    display: block;
    padding: 14px 15px;
    color: var(--faq-deep);
    text-align: left;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid #aed5cf;
    border-radius: 12px;
}

.faq-related__link strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

.faq-related__link span {
    display: block;
    color: #536f6c;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
}


/*
 * FAQ seamless background:
 * Use one continuous repeating background for the whole FAQ area.
 * Do not reset the same background on each category section.
 */
.faq-intro {
    background: transparent;
    border-bottom: 1px solid rgba(207, 231, 227, 0.62);
}

.faq-categories,
.faq-category,
.faq-related {
    background: transparent;
}

@media (max-width: 380px) {

    .faq-jump {
        grid-template-columns: 1fr;
    }

    .faq-item summary {
        grid-template-columns: 34px minmax(0, 1fr) 23px;
        gap: 8px;
        padding-inline: 11px;
    }

    .faq-item__mark,
    .faq-item__answer-mark {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 16px;
    }

    .faq-item__question {
        font-size: 15.5px;
    }

    .faq-item__answer {
        grid-template-columns: 34px minmax(0, 1fr);
        padding-inline: 11px;
    }

    .faq-item__answer p {
        font-size: 15.5px;
    }
}