/*
 * TOP（front-page）専用スタイル
 * Figma: 株式会社よし TOP PC(540:1548) / SP(540:1549)
 * 1rem = 16px。Figma px ÷ 16 で換算。
 *
 * 全ページ共通の部品（.c-btnPill / html の overflow-x など）は style.css 側で
 * 管理する。ここには front-page 固有のセクションだけを置く。
 */

/* --------------------------------------------------------------
# MV（メインビジュアル）
-------------------------------------------------------------- */
.p-mv {
    position: relative;
    overflow: hidden;
    padding: 10rem 0;
    background-color: var(--color-wh);
    @media (768px > width) {
        padding: 5.875rem 0 2.25rem; /* ヘッダー4.6875rem + 1.1875rem(Figma y94) */
    }
}
.p-mv::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/mv-bg.jpg) center / cover no-repeat;
    opacity: .33;
    pointer-events: none;
}
.p-mv__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 29.25rem) minmax(0, 41.5rem); /* Figma: copy 468px / photos 664px */
    justify-content: space-between;
    align-items: center;
    column-gap: clamp(2rem, 5.5vw, 5.0625rem);
    width: min(100% - 2.5rem, 76rem); /* Figma: 1536 - 164*2 ≒ 1216px */
    margin-inline: auto;
    @media (768px > width) {
        grid-template-columns: 1fr;
        row-gap: 2.25rem; /* Figma: リード下端256 → 写真292 */
        width: min(100% - 2.5rem, 21.75rem);
    }
}
.p-mv__title {
    font-family: var(--font-zen);
    font-size: clamp(2.25rem, 3.9vw, 3.5rem); /* SP36px 〜 PC56px */
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .05em;
    color: var(--color-text);
    white-space: nowrap; /* Figma では2行固定（各行が1行で収まる） */
}
.p-mv__titleEm {
    color: var(--color-brand);
}
.p-mv__lead {
    margin-top: 1.4375rem; /* Figma: 488→511 */
    font-family: var(--font-zen);
    font-size: clamp(.9375rem, 1.25vw, 1.125rem); /* SP15px 〜 PC18px */
    font-weight: 500;
    line-height: calc(35 / 18);
    letter-spacing: .05em;
    color: var(--color-text);
    @media (768px > width) {
        margin-top: .75rem;
        line-height: calc(23 / 15);
    }
}

/* 写真コラージュ（自由レイアウト構図のため意図的に絶対配置） */
.p-mv__photos {
    position: relative;
    aspect-ratio: 664 / 550; /* PC: クラスタ全体 x713..1377 / y196..746 */
    @media (768px > width) {
        aspect-ratio: 348 / 339; /* SP: x14..362 / y292..631 */
    }
}
.p-mv__photo {
    position: absolute;
    height: auto;
    object-fit: cover;
}
.p-mv__photo--main {
    left: 15.5%;
    top: 0;
    z-index: 2;
    width: 69.3%; /* 460/664 */
    aspect-ratio: 460 / 550;
    border-radius: 1.109rem; /* 17.73px */
    box-shadow: 0 0 21.3px 7.1px rgba(105, 105, 105, .22);
    @media (768px > width) {
        left: 12.6%;
        width: 76.2%; /* 264.86/347.8 */
        aspect-ratio: 265 / 317;
        border-radius: .638rem; /* 10.21px */
        box-shadow: 0 0 12.3px 4.1px rgba(105, 105, 105, .22);
    }
}
.p-mv__photo--back1 {
    left: 55.7%;
    top: 9.3%;
    z-index: 1;
    width: 44.3%; /* 294/664 */
    aspect-ratio: 294 / 351;
    border-radius: .747rem; /* 11.95px */
    box-shadow: 0 0 14.3px 4.8px rgba(105, 105, 105, .22);
    filter: blur(4px);
    opacity: .46;
    @media (768px > width) {
        left: 51.3%;
        top: 5.1%;
        width: 48.7%; /* 169.28/347.8 */
        aspect-ratio: 169 / 202;
        border-radius: .43rem;
        box-shadow: 0 0 8.3px 2.8px rgba(105, 105, 105, .22);
        filter: blur(2.3px);
    }
}
.p-mv__photo--back2 {
    left: 0;
    top: 30%;
    z-index: 0;
    width: 44.3%;
    aspect-ratio: 294 / 351;
    border-radius: .747rem;
    box-shadow: 0 0 14.3px 4.8px rgba(105, 105, 105, .22);
    filter: blur(4px);
    opacity: .46;
    @media (768px > width) {
        top: 40.4%;
        width: 48.7%;
        aspect-ratio: 169 / 202;
        border-radius: .43rem;
        box-shadow: 0 0 8.3px 2.8px rgba(105, 105, 105, .22);
        filter: blur(2.3px);
    }
}

/* --------------------------------------------------------------
# お知らせ（news）
-------------------------------------------------------------- */
.p-news {
    position: relative;
    z-index: 1;
    padding: 4rem 0 0;
    background: var(--color-wh);
}
.p-news__inner {
    width: min(100% - 2.5rem, 81rem); /* Figma: x120..1417 ≒ 1296px */
    margin-inline: auto;
    @media (768px > width) {
        width: min(100% - 2.5rem, 21.75rem);
    }
}
.p-news__head {
    display: flex;
    align-items: baseline;
    column-gap: 2.25rem; /* Figma: タイトル右端244 → リンク264 */
    @media (768px > width) {
        column-gap: 1.375rem;
    }
}
.p-news__title {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--color-brand);
    @media (768px > width) {
        font-size: 1.625rem; /* 26px */
    }
}
.p-news__more {
    display: inline-flex;
    align-items: center;
    column-gap: .4375rem; /* Figma: テキスト右端358 → 矢印365 */
    font-size: .9375rem;
    letter-spacing: .05em;
    color: var(--color-text);
    text-decoration: none;
    transition: opacity .2s;
    &:hover {
        opacity: .7;
    }
    /* hover で下線が左から右へ伸びる */
    &:hover .p-news__moreLabel::after,
    &:focus-visible .p-news__moreLabel::after {
        transform: scaleX(1);
    }
}
.p-news__moreLabel {
    position: relative;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -.1875rem;
        width: 100%;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .p-news__moreLabel::after,
    .p-news__arrow {
        transition: none;
    }
}
.p-news__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3.25rem; /* Figma: カード間 26px×2 + 区切り線 */
    margin: 1.6875rem 0 0; /* Figma: タイトル下端43 → カード70 */
    padding: 0;
    list-style: none;
    @media (768px > width) {
        grid-template-columns: 1fr;
        row-gap: 0;
        margin-top: 1.875rem;
    }
}
.p-news__item {
    position: relative;
    @media (768px > width) {
        border-bottom: 1px solid var(--color-brand);
        &:last-child {
            border-bottom: none; /* Figma SP: 最終行の下に線なし */
        }
    }
}
.p-news__item + .p-news__item::before {
    content: "";
    position: absolute;
    left: -1.625rem; /* 区切り線: カード間ギャップの中央 */
    top: .25rem;
    bottom: 0;
    width: 1px;
    background: var(--color-brand);
    @media (768px > width) {
        content: none;
    }
}
.p-news__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: .375rem;
    padding: .5625rem 4.25rem .5625rem 1.125rem; /* Figma: 内側 x18 / 矢印分の右余白 */
    text-decoration: none;
    transition: opacity .2s;
    &:hover {
        opacity: .7;
    }
    @media (768px > width) {
        padding: 1.0625rem 4rem 1.0625rem 0;
        row-gap: .4375rem;
    }
}
.p-news__badge {
    display: inline-block;
    min-width: 3.9375rem; /* Figma 63px */
    padding: .125rem .875rem;
    border-radius: .625rem;
    background: #D5E8FB;
    font-size: .6875rem; /* 11px */
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    color: #769BC0;
}
.p-news__itemTitle {
    margin: 0;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.3;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    @media (768px > width) {
        font-size: .9375rem; /* 15px */
        line-height: calc(19 / 15);
    }
}
.p-news__date {
    font-size: .9375rem; /* 15px */
    font-weight: 500;
    letter-spacing: .05em;
    color: #9A9A9A;
    @media (768px > width) {
        font-size: .875rem;
    }
}
.p-news__arrow {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    line-height: 0;
    transition: translate .25s ease;
    img {
        width: 2.125rem; /* 34px */
        height: auto;
        @media (768px > width) {
            width: 2.875rem; /* SP 46px */
        }
    }
}
/* カード hover / フォーカスで矢印を少し右へ（.c-btnPill--back と同じ挙動） */
.p-news__link:hover .p-news__arrow,
.p-news__link:focus-visible .p-news__arrow {
    translate: .375rem -50%;
}
.p-news__empty {
    margin: 1.6875rem 0 0;
    color: var(--color-text);
}

/* --------------------------------------------------------------
# Mission
-------------------------------------------------------------- */
.p-mission {
    position: relative;
    margin-top: 6.3125rem; /* Figma: news下端164 → bgword 305（padding-top と合算） */
    padding-top: 5.5rem;   /* bgword の表示領域（Figma: 305..393） */
    @media (768px > width) {
        margin-top: 2.125rem;
        padding-top: 0;
    }
}
.p-mission__bgword {
    position: absolute;
    top: -2rem;
    right: 0;
    margin: 0;
    font-weight: 200;
    font-size: clamp(4rem, 9vw, 8.66rem); /* Figma 138.5px */
    line-height: .95;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-brand);
    pointer-events: none;
    @media (768px > width) {
        display: none; /* SPデザインには無い */
    }
}
.p-mission__panel {
    position: relative;
    margin-left: 21.3%; /* Figma: 327/1536 */
    background: var(--color-brand);
    border-radius: 0 0 0 3.75rem; /* 60px */
    @media (768px > width) {
        margin-left: 5.6%; /* Figma SP: 21/375 */
        border-radius: 0 0 0 3.125rem; /* 50px */
    }
}
/* 写真はパネルに意図的に重なる構図（Figma準拠の絶対配置。SPはフロー内） */
.p-mission__photo {
    position: absolute;
    left: -27%;        /* Figma: パネル左327 → 写真左0 */
    top: -6.8125rem;   /* Figma: 393 → 284 */
    width: 63.8%;      /* 773/1212 */
    height: auto;
    aspect-ratio: 773 / 665;
    object-fit: cover;
    border-radius: 0 3.125rem 3.125rem 0; /* 右側 50px */
    @media (768px > width) {
        position: relative;
        left: -5.9%;   /* Figma SP: パネル左21 → 写真左0 */
        top: auto;
        margin-top: -2.8125rem; /* Figma SP: パネル427 → 写真382 */
        width: 96.9%;  /* 342.91/354 */
        aspect-ratio: 343 / 295;
        border-radius: 0 1.375rem 1.375rem 0;
    }
}
.p-mission__content {
    padding: 5rem 12% 4.4375rem 45.2%; /* Figma: 上80 / 右146 / 下71 / 左548(1212基準) */
    @media (768px > width) {
        padding: 4.625rem 5.6% 3.875rem; /* Figma SP: 写真下632 → ラベル706 / 左右20 / 下 1214-1189 */
    }
}
.p-mission__label {
    display: flex;
    align-items: center;
    column-gap: .4375rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #97BFE5;
    @media (768px > width) {
        font-size: .75rem;
        img {
            width: .875rem;
            height: auto;
        }
    }
}
.p-mission__title {
    margin: .5625rem 0 0; /* Figma: label下端499 → 509 */
    font-family: var(--font-zen);
    font-size: clamp(1.6875rem, 2.8vw, 2.5rem); /* SP27px 〜 PC40px */
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .05em;
    color: var(--color-wh);
}
.p-mission__text {
    margin-top: 2.5rem; /* Figma: タイトル下端625 → 665 */
    p {
        margin: 0 0 1.625rem; /* 段落間（26px行送り1行分） */
        font-size: 1rem;
        line-height: calc(26 / 16);
        letter-spacing: .05em;
        color: var(--color-wh);
        &:last-child {
            margin-bottom: 0;
        }
    }
    @media (768px > width) {
        margin-top: 1.5625rem;
        p {
            font-size: .9375rem;
        }
    }
}

/*
 * 白ピルボタン（.c-btnPill）は 404 / 記事詳細 / FAQ など下層でも使う共通部品のため
 * style.css 側で一元管理する。ここでは定義しない（旧定義を残すと front-page だけ
 * 古い hover 挙動で上書きされてしまう）。
 */

/* --------------------------------------------------------------
# 共通: セクション見出し（En + 日本語）
-------------------------------------------------------------- */
.c-secHead__en {
    display: flex;
    align-items: center;
    column-gap: .4375rem;
    margin: 0;
    font-size: .75rem; /* 12px */
    font-weight: 700;
    letter-spacing: .05em;
    color: #97BFE5;
}
.c-secHead__ja {
    margin: .375rem 0 0;
    font-family: var(--font-zen);
    font-size: clamp(1.625rem, 3.2vw, 2.8125rem); /* SP26px 〜 PC45px */
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--color-brand);
}

/* --------------------------------------------------------------
# 選ばれる理由（Reason）
-------------------------------------------------------------- */
.p-reason {
    padding: 6rem 0 0;
    background: var(--color-wh);
    @media (768px > width) {
        padding: 3.75rem 0 0;
    }
}
.p-reason__inner {
    width: min(100% - 2.5rem, 80.375rem);
    margin-inline: auto;
}
.p-reason__heading {
    margin: 0 0 2.25rem;
    @media (768px > width) {
        margin-bottom: 1.625rem;
    }
}
.p-reason__eyebrow {
    display: flex;
    align-items: center;
    column-gap: .4375rem;
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #97BFE5;
}
.p-reason__headingTitle {
    display: block;
    margin: .4375rem 0 0;
    font-family: var(--font-zen);
    font-size: 2.8125rem; /* Figma 45px */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .05em;
    color: var(--color-brand);
    @media (768px > width) {
        font-size: 1.625rem; /* Figma SP 26px */
    }
}
.p-reason__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 18.4375rem));
    justify-content: space-between;
    gap: 2rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    @media (1200px > width) {
        grid-template-columns: repeat(2, minmax(0, 18.4375rem));
        justify-content: center;
        gap: 2.5rem 2.75rem;
    }
    @media (768px > width) {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
.p-reason__item {
    display: flex;
    flex-direction: column;
    @media (768px > width) {
        padding: 1.75rem 0;
        border-bottom: 1px solid rgba(24, 94, 161, .25);
        &:last-child {
            border-bottom: none;
        }
    }
}
.p-reason__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (768px > width) {
        flex-direction: row;
        align-items: center;
        column-gap: 1.0625rem;
    }
}
/* バッジ + 円アイコン */
.p-reason__icon {
    position: relative;
    width: 10.375rem;
    height: 10.375rem;
    flex-shrink: 0;
    @media (768px > width) {
        width: 6.9375rem;
        height: 6.9375rem;
    }
}
.p-reason__circle {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 10.375rem;
    height: 10.375rem;
    border-radius: 50%;
    background: #F5F5F5;
    @media (768px > width) {
        right: .125rem;
        bottom: .1875rem;
        width: 6.25rem;
        height: 6.25rem;
    }
    img {
        width: 50%;
        height: auto;
    }
}
/* 白ダイヤバッジ: 円の左上「外側」に配置し、アイコン（円中央）を覆わない */
/*
 * POINT バッジ:
 * Figma 実測 = 縦長長方形 72×137.84px を約 43° 回転（回転後 bbox 146.77×149.83px）。
 * .p-reason__badge は「回転後の bbox」を表し、テキストはその中に水平のまま % 配置。
 * bbox 中心は円の中心から (-80, -65)px（SP は比率スケール）。
 */
.p-reason__badge {
    position: absolute;
    left: -4.375rem;  /* 円中心(83,83) + (-80,-65) - bbox半分 */
    top: -3.5625rem;
    z-index: 1;
    width: 9.1875rem;  /* 回転後 bbox 146.77px */
    height: 9.375rem;  /* 回転後 bbox 149.83px */
    pointer-events: none;
    @media (768px > width) {
        left: -2.9375rem;
        top: -2.375rem;
        width: 6.0625rem;  /* Figma SP bbox 87.69px を円(110px)比率でスケール */
        height: 6.1875rem;
    }
}
.p-reason__badgeShape {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.5rem;     /* Figma 72px */
    height: 8.625rem;  /* Figma 137.84px */
    background: var(--color-wh);
    border-right: 1px solid var(--color-hover02); /* Figma: 右辺のみの淡い stroke */
    transform: translate(-50%, -50%) rotate(43deg);
    @media (768px > width) {
        width: 3rem;      /* 47.7px（SP スケール） */
        height: 5.6875rem; /* 91.4px */
    }
}
.p-reason__badgeEn {
    position: absolute;
    left: 38%;  /* Figma: bbox 内 (56,41) */
    top: 27%;
    z-index: 1;
    font-family: var(--font-zen);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #96A9B3;
    @media (768px > width) {
        font-size: .5rem;
    }
}
.p-reason__badgeNum {
    position: absolute;
    left: 37%;
    top: 35%;
    z-index: 1;
    font-family: var(--font-zen);
    font-size: 2.5625rem; /* 41px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    color: #96A9B3;
    @media (768px > width) {
        font-size: 1.6875rem; /* 27px（SP スケール） */
    }
}
.p-reason__title {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 1行のときも2行分の高さの中で上下中央に */
    align-items: center;
    width: min(100%, 16rem);
    min-height: 3.25rem; /* 2行分（1.25rem × line-height 1.3 × 2）で行揃え */
    margin: 1.1875rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .05em;
    text-align: center;
    color: var(--color-brand);
    span {
        display: block;
    }
    @media (768px > width) {
        display: block;
        width: calc(100% - 8rem);
        min-height: 0;
        margin: 0;
        font-size: 1.125rem;
        line-height: calc(26 / 18);
        text-align: left;
    }
}
.p-reason__body {
    width: min(100%, 18.4375rem);
    margin: 1.6875rem auto 0;
    @media (768px > width) {
        width: 100%;
        margin-top: .875rem;
    }
}
.p-reason__desc {
    margin: 0;
    padding-top: .9375rem;
    border-top: 1px solid var(--color-brand);
    font-size: 1rem;
    font-weight: 500;
    line-height: calc(26 / 16);
    letter-spacing: .05em;
    text-align: justify;
    color: var(--color-text);
    @media (768px > width) {
        padding-top: .8125rem;
        font-size: .9375rem;
        line-height: calc(26 / 15);
    }
}
.p-reason__points {
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
    @media (768px > width) {
        margin-top: .375rem;
    }
    li {
        position: relative;
        padding-left: .9375rem;
        font-size: 1rem;
        line-height: calc(23 / 16);
        letter-spacing: .05em;
        color: var(--color-text);
        @media (768px > width) {
            font-size: .9375rem;
            line-height: 1.6;
        }
        &::before {
            content: "・";
            position: absolute;
            left: -.1875rem;
        }
    }
}

/* --------------------------------------------------------------
# 事業内容（Service）
-------------------------------------------------------------- */
.p-service {
    position: relative;
    margin-top: 4.5rem;
    padding: 5rem 0 5.5rem;
    background: #F5F5F5;
    overflow: hidden;
    @media (768px > width) {
        margin-top: 3rem;
        padding: 3.5rem 0 4rem;
    }
}
.p-service__inner {
    position: relative;
    z-index: 1;
    width: min(100% - 2.5rem, 81rem);
    margin-inline: auto;
}
.p-service__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.375rem; /* Figma: カード間 38px */
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    @media (1024px > width) {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 26.25rem;
        margin-inline: auto;
    }
}
.c-serviceCard {
    height: 100%;
    padding: 1.3125rem 1.3125rem 2rem; /* Figma: 画像周り21px */
    border-radius: 1.25rem; /* 20px */
    background: var(--color-wh);
    box-shadow: 0 0 11px 0 rgba(186, 186, 186, .25);
}
.c-serviceCard__thumb {
    aspect-ratio: 378 / 192;
    border-radius: .75rem; /* 12px */
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.c-serviceCard__title {
    margin: 1.375rem 0 0;
    font-size: 1.5625rem; /* 25px */
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    color: var(--color-brand);
    @media (768px > width) {
        font-size: 1.375rem;
    }
}
.c-serviceCard__desc {
    margin: 1rem 0 0;
    font-size: 1rem; /* 16px */
    line-height: calc(26 / 16);
    letter-spacing: .03em;
    text-align: justify;
    color: var(--color-text);
    @media (768px > width) {
        font-size: .9375rem;
    }
}
.c-serviceCard__tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4375rem; /* Figma: 7px */
    margin: 1.375rem 0 0;
    padding: 0;
    list-style: none;
    li {
        display: grid;
        place-items: center;
        min-height: 2.5rem; /* 40px */
        padding: .25rem .5rem;
        border-radius: .3125rem; /* 5px */
        background: #D5E8FB;
        font-size: .875rem; /* 14px */
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .03em;
        text-align: center;
        color: var(--color-text);
    }
}
.p-service__foot {
    display: flex;
    justify-content: center;
    margin-top: 3.125rem;
    @media (768px > width) {
        margin-top: 2.5rem;
    }
}
.p-service__foot .c-btnPill {
    margin-top: 0;
}
.p-service__watermark {
    position: absolute;
    right: 0;
    bottom: -5.75rem;
    z-index: -1;
    margin: 0;
    font-weight: 200;
    font-size: clamp(3.5rem, 9vw, 8.66rem); /* Figma 138px */
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-wh);
    pointer-events: none;
    @media (768px > width) {
        right: 0;
        bottom: -4rem;
        font-size: 4.375rem;
    }
}

.p-faqSection {
    padding: 5rem 0 10rem;
    @media (768px > width) {
        padding: 3.75rem 0 7.5rem;
    }
}
/* --------------------------------------------------------------
# スクロールアニメーション初期状態（GSAP）
#
# <html> に .is-anim が付いている間だけ非表示にしてちらつきを防ぐ。
# JS が動かない / GSAP が読めない場合は header.php のフォールバックで
# .is-anim が外れ、通常表示に戻る。
#
# ※ お知らせ / よくある質問 / フッターCTA はアニメーション対象外のため
#   ここには含めない（常に表示される）。
-------------------------------------------------------------- */
.is-anim .p-mv__title,
.is-anim .p-mv__lead,
.is-anim .p-mv__photos,
.is-anim .p-mission__bgword,
.is-anim .p-mission__photo,
.is-anim .p-mission__label,
.is-anim .p-mission__title,
.is-anim .p-mission__text,
.is-anim .p-mission__content .c-btnPill,
.is-anim .p-reason__heading,
.is-anim .p-reason__item,
.is-anim .p-reason__badge,
.is-anim .p-service .c-secHead,
.is-anim .p-service__item,
.is-anim .p-service__foot {
    opacity: 0;
}
/* 1文字ずつ分割した見出し（Mission）。改行位置を壊さないよう inline-block にする */
.p-mission__title .js-char {
    display: inline-block;
    will-change: transform, opacity;
}
/* モーション低減時はアニメーションせず即表示 */
@media (prefers-reduced-motion: reduce) {
    .is-anim .p-mv__title,
    .is-anim .p-mv__lead,
    .is-anim .p-mv__photos,
    .is-anim .p-mission__bgword,
    .is-anim .p-mission__photo,
    .is-anim .p-mission__label,
    .is-anim .p-mission__title,
    .is-anim .p-mission__text,
    .is-anim .p-mission__content .c-btnPill,
    .is-anim .p-reason__heading,
    .is-anim .p-reason__item,
    .is-anim .p-reason__badge,
    .is-anim .p-service .c-secHead,
    .is-anim .p-service__item,
    .is-anim .p-service__foot {
        opacity: 1;
    }
}