@charset "UTF-8";

/* =========================================================
   style.css - TOP 専用
   ========================================================= */

/* =========================================================
   FV
   ========================================================= */

.fv {
    position: relative;
}

/*
    FV 本体。上下の余白は .fv ではなくこちらに持たせる。
    PC では .fv 側に演出の助走（::after）が入り、この箱だけを sticky で貼り付けるため。
*/
.fv__stage {
    /* ヘッダー 92px + Figma 上の余白 66px */
    padding-top: 158px;
    padding-bottom: 105px;
}

.fv__inner {
    display: flex;
    align-items: center;
}

.fv__body {
    flex-grow: 1;
    padding-left: 95px;
}

.fv__title {
    color: #3b2a1a;
    font-family: "Zen Old Mincho", serif;
    font-weight: 900;
    line-height: 1.194;
    white-space: nowrap;
}

.fv__title-sub {
    display: block;
    font-size: 30px;
}

.fv__title-main {
    display: block;
    font-size: 40px;
}

.fv__accent-green {
    color: #4f6738;
    font-size: 60px;
    font-style: normal;
}

.fv__accent-orange {
    color: #e8aa65;
    font-style: normal;
}

.fv__image {
    position: relative;
    flex-shrink: 0;
    /* Figma: 1440 中 871px。右端は画面外まで抜く */
    width: 60.49%;
    aspect-ratio: 871 / 652;
}

.fv__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 写真の左端に光を差す装飾グラデーション。要素ごと装飾なので操作対象外 */
.fv__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-88.75deg, rgba(255, 255, 255, 0) 52.5%, rgba(255, 248, 232, 0.2) 87%);
    pointer-events: none;
}

/* --- 画面右下に固定する丸ボタン --- */

/*
    画面の右下角に張り付く「点」だけの固定枠。
    幅・高さを持たせず（中の2つは absolute で浮かせる）、
    子の right / bottom がそのまま画面右下からの距離になるようにしてある。
    こうすると PC の段違い配置（電話が上、お問い合わせが下）を
    数値そのままで固定配置へ移せる。
    z-index はヘッダー（100）と SP ドロワー（105）より下。
    ドロワーを開いたときにボタンが上に残らないようにするため。
*/
.fv__float {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 90;
}

.fv__float-tel,
.fv__float-mail {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* 写真を透かせたいので不透明度 90% の緑 */
    background-color: rgba(90, 107, 74, 0.9);
    color: #fffcf6;
}

/* 電話はお問い合わせの上に、少し内側へずらして段違いに置く */
.fv__float-tel {
    right: 52px;
    bottom: 178px;
    width: 72px;
    height: 72px;
}

.fv__float-tel img {
    width: 45px;
    height: 45px;
}

/* 画面下端に張り付かないよう 28px 空ける */
.fv__float-mail {
    right: 20px;
    bottom: 28px;
    width: 132px;
    height: 132px;
}

.fv__float-mail img {
    width: 46px;
    height: 36px;
}

.fv__float-label {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.8;
}

@media (any-hover: hover) {

    .fv__float-tel:hover,
    .fv__float-mail:hover {
        opacity: 1;
        background-color: rgba(90, 107, 74, 1);
    }
}

/* =========================================================
   メッセージ
   ========================================================= */

.message {
    position: relative;
    margin-top: 148px;
    padding: 198px 0 172px;
    overflow: hidden;
}

/*
    演出時だけ「写真があった位置」の枠になるラッパー。
    演出なしのときは箱ごと消して、.message__inner を .message の直下に戻す。
*/
.message__slot {
    display: contents;
}

/*
    背景写真は不透明度 15%、さらに上下を背景色でフェードさせて帯の境目を消す。
    写真とグラデーションは不透明度が別なので 2 枚のレイヤーに分ける。
    z-index は使わず、position 付き要素の DOM 順（bg → inner）だけで重ね順を作る。

    ※ 現在この背景は使わない方針なので非表示にしている。
       戻すときは display: none を外すだけでよいよう、指定と HTML は残してある。
*/
.message__bg {
    display: none;
    position: absolute;
    inset: 0;
}

.message__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../image/message.webp") center / cover no-repeat;
    opacity: 0.15;
}

.message__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(255, 252, 246, 0) 89.7%, #fffcf6 100%),
        linear-gradient(180deg, #fffcf6 0%, rgba(255, 252, 246, 0) 12.7%);
}

.message__inner {
    position: relative;
    text-align: center;
}

.message__text {
    margin-top: 30px;
    color: #3b2a1a;
    font-family: "Zen Old Mincho", serif;
    font-size: 18px;
    line-height: 1.8;
}

.message__button {
    display: flex;
    justify-content: center;
    margin-top: 63px;
}

.message .section-title__ja {
    font-size: 32px;
}

/* =========================================================
   FV → メッセージ 切り替え演出（PC のみ）

   .fv__stage を画面上端に貼り付けたまま .fv::after ぶんの高さをスクロールさせ、
   その進捗 0→1 を JS が --fv-progress として .fv に付ける。
   見た目の変化はここだけで完結させる（JS 側で transform は書かない）。

   進行は 2 段階。前後を少し重ねて、途切れずに入れ替わって見えるようにしてある。
     1. 写真が下から白く閉じる（クリップして地の #fffcf6 を見せるだけ）
     2. 写真があった位置にメッセージ本文が下からせり上がる
   見出し（.fv__title）は動かさず、最後まで左に置いたままにする。

   sticky が動ける余地は「親のコンテンツボックス − 自分の高さ」でしか作れないので、
   助走は padding ではなく ::after の空ブロックで確保している（padding では効かない）。

   min-width: 769px と no-preference の positive query にしているのは、
   SP と prefers-reduced-motion では演出ごと外して素の並びに戻すため。
   ========================================================= */

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {

    .fv {
        --fv-wipe: clamp(0, calc(var(--fv-progress, 0) / 0.45), 1);
        --fv-rise: clamp(0, calc((var(--fv-progress, 0) - 0.3) / 0.55), 1);
    }

    /* 演出の助走。この高さぶんスクロールする間 .fv__stage が貼り付く */
    .fv::after {
        content: "";
        display: block;
        height: 120vh;
    }

    /*
        画面上端に貼り付ける。stage が画面より高いときは下がはみ出したまま貼り付くが、
        FV は元々ほぼ 1 画面に収まる高さなので許容する。
    */
    .fv__stage {
        position: sticky;
        top: 0;
    }

    /*
        見出しは画面の縦中央に置く。
        stage は貼り付いている間ちょうど画面上端に来るので、stage 基準の 50vh が画面中央になる。
        写真（158px 〜）の高さに合わせて上下中央に置くと写真寄りになってしまうため、
        flex の align-items ではなく absolute で画面基準に取り直している。
        左の余白は .fv__body の padding-left（95px）がそのまま効く。
    */
    .fv__body {
        position: absolute;
        /* 縦中央から 30px 下げた位置に置く */
        top: calc(50vh + 30px);
        left: 0;
        transform: translateY(-50%);
    }

    /* 見出しが flex から外れるので、写真は右端に寄せ直す */
    .fv__inner {
        justify-content: flex-end;
    }

    /* 1. 下から白く閉じる。白いレイヤーは重ねず、クリップして地の背景を見せている */
    .fv__image {
        clip-path: inset(0 0 calc(var(--fv-wipe) * 100%) 0);
    }

    /*
        メッセージは画面いっぱいのレイヤーになる。
        stage は貼り付いている間ちょうど画面上端に来るので、
        stage 基準の absolute + 100vh で「画面いっぱい」と一致する。
        中身は .message__slot だけだが、通常時の余白（148/198/172px）を
        持ち込まないよう、ここで打ち消しておく。
    */
    .message {
        position: absolute;
        top: 0;
        left: 0;
        /*
            画面と同じ大きさの箱にして、その中で枠（.message__slot）を上下中央に置く。
            ＝ 本文が画面の縦中央に来る。写真の位置（上端 158px）に合わせないのは、
            それだと写真寄りになって画面中央より下がってしまうため。
        */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
        /*
            隠す役目は .message__slot 側に移るので解除する。
            付けたままだと画面が縦に短いとき、枠の高さ（写真と同じ 45.28vw）が
            100vh を超えて本文の上下が切れてしまう。
        */
        overflow: visible;
        /* 画面全体を覆うので、本文以外はクリックを透過させる */
        pointer-events: none;
    }

    /*
        写真があった右側の位置に、写真と同じ寸法（Figma: 1440 中 871 x 652）で置く枠。
        せり上がる本文はこの枠で隠す。縦位置は .message 側の align-items: center 任せ。
    */
    .message__slot {
        /* 見出し（.fv__body）と同じく、縦中央から 30px 下げて高さを揃える */
        position: relative;
        top: 30px;
        display: block;
        flex-shrink: 0;
        width: 60.49%;
        aspect-ratio: 871 / 652;
        overflow: hidden;
        pointer-events: auto;
    }

    /* 2. 枠の高さぶん下から上げる。100% が枠の高さと一致するよう height: 100% を持たせる */
    .message__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        transform: translateY(calc((1 - var(--fv-rise)) * 100%));
    }
}

/* =========================================================
   カードナビゲーション
   ========================================================= */

.card-nav {
    margin-top: 292px;
}

.card-nav__list {
    display: flex;
    flex-wrap: wrap;
}

.card-nav__item {
    width: 33.3333%;
}

.card-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Figma: 345 x 254 */
    aspect-ratio: 345 / 254;
    overflow: hidden;
}

.card-nav__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/*
    写真を沈めて白文字を読ませるための黒 50%。
    ::before だと絶対配置した写真より先に描かれて隠れてしまうので ::after で置く。
*/
.card-nav__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
}

.card-nav__label {
    position: relative;
    /* オーバーレイ（::after）より前面に出す */
    z-index: 1;
    color: #fffcf6;
    font-family: "Zen Old Mincho", serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.8;
    text-align: center;
}

/* 6 枚目は写真ではなくロゴ。緑地 → ロゴ → 黒 40% の重ね順は Figma のまま */
.card-nav__item--logo .card-nav__link {
    background-color: #8da477;
}

.card-nav__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    transform: translate(-50%, -46%);
}

.card-nav__item--logo .card-nav__link::after {
    background-color: rgba(0, 0, 0, 0.4);
}

@media (any-hover: hover) {

    .card-nav__link:hover {
        opacity: 1;
    }

    .card-nav__link:hover .card-nav__image {
        transform: scale(1.06);
    }

    .card-nav__link:hover::after {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

/* =========================================================
   共通カード（イベント / できること）
   ========================================================= */

.card {
    display: block;
}

.card__image {
    width: 100%;
    aspect-ratio: 496 / 330;
    object-fit: cover;
    border-radius: 10px;
}

/* 左端の 1px は Figma の縦罫線。テキストはそのぶん字下げする */
.card__body {
    margin-top: 20px;
    padding-left: 33px;
    border-left: 1px solid #b8976a;
}

.card__en {
    display: block;
    color: #b8976a;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.card__title {
    margin-top: 4px;
    color: #3b2a1a;
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
}

.card__text {
    margin-top: 12px;
    color: #3b2a1a;
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

/* =========================================================
   イベント開催情報
   ========================================================= */

.event {
    margin-top: 262px;
}

.event__slider {
    position: relative;
    margin-top: 83px;
}

.event__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* スクロールバーは出さない（矢印で操作させる） */
    scrollbar-width: none;
}

.event__viewport::-webkit-scrollbar {
    display: none;
}

.event__list {
    display: flex;
    gap: 46px;
}

.event__item {
    flex-shrink: 0;
    /* 2 枚 + 間隔 46px で 1038px */
    width: calc((100% - 46px) / 2);
    scroll-snap-align: start;
}

/* 前後の矢印。Figma では 50px の正方形を 45deg 回した二辺 */
.event__arrow {
    position: absolute;
    top: 145px;
    width: 50px;
    height: 50px;
    transition: opacity 0.3s ease;
}

.event__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    border-top: 4px solid #b8976a;
    border-right: 4px solid #b8976a;
}

.event__arrow--prev {
    right: calc(100% + 62px);
}

.event__arrow--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.event__arrow--next {
    left: calc(100% + 62px);
}

.event__arrow--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

/*
    .inner の外側は 1440px で片側 201px あるが、画面が狭いと余白が足りず
    矢印がはみ出して横スクロールが出る。1280px 以下ではカードに重ねる。
*/
@media (max-width: 1280px) {

    .event__arrow--prev {
        right: auto;
        left: -10px;
    }

    .event__arrow--next {
        left: auto;
        right: -10px;
    }
}

/* 端まで送ったら操作できないことを見た目でも伝える */
.event__arrow.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}

/* =========================================================
   みらい工務店でできること
   ========================================================= */

.services {
    margin-top: 176px;
}

.services__list {
    display: flex;
    flex-wrap: wrap;
    gap: 90px 46px;
    margin-top: 90px;
}

.services__list > li {
    width: calc((100% - 46px) / 2);
}

/* =========================================================
   こだわり
   ========================================================= */

.concept {
    margin-top: 176px;
}

.concept__list {
    display: flex;
    gap: 38px;
    margin-top: 101px;
}

.concept__item {
    width: calc((100% - 76px) / 3);
}

.concept__image {
    width: 100%;
    aspect-ratio: 323 / 187;
    object-fit: cover;
    border-radius: 10px;
}

/* 写真の左端に合わせた縦罫線。高さは 3 列で揃える */
.concept__body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin-top: 9px;
    border-left: 1px solid #b8976a;
}

.concept__text {
    color: #6b4226;
    font-family: "Zen Old Mincho", serif;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

.concept__text em {
    color: #5a6b4a;
    font-weight: 600;
    font-size: 26px;
    font-style: normal;
    letter-spacing: 2.6px;
}

.concept__text--strong {
    font-weight: 700;
    letter-spacing: normal;
}

.concept__button {
    display: flex;
    justify-content: center;
    margin-top: 95px;
}

/* =========================================================
   施工実績（ベージュ帯）
   ========================================================= */

.works {
    margin-top: 233px;
    padding-bottom: 165px;
}

.works__head {
    padding-top: 96px;
}

/* 画面幅いっぱいに写真を流す。左右に見切れて続いて見えるのが狙い */
.works__gallery {
    margin-top: 94px;
    overflow: hidden;
}

.works__track {
    display: flex;
    width: max-content;
    /* 複製した 1 セット分だけ流して先頭に戻すので継ぎ目が出ない */
    animation: works-marquee 40s linear infinite;
}

.works__track img {
    display: block;
    width: 480px;
    height: 380px;
    object-fit: cover;
}

@keyframes works-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.works__button {
    display: flex;
    justify-content: center;
    margin-top: 90px;
}

/* =========================================================
   お客様の声（薄緑帯）
   ========================================================= */

.voice {
    margin-top: 165px;
    padding-bottom: 207px;
}

.voice__inner {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-top: 179px;
}

.voice__body {
    flex-grow: 1;
    /* 見出し・本文・ボタンは左カラムの中央に寄せる */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voice .section-title {
    align-items: center;
}

.voice__text {
    margin-top: 50px;
    color: #6b4226;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
}

.voice__button {
    margin-top: 25px;
}

.voice__button .button {
    height: 48px;
}

.voice__image {
    flex-shrink: 0;
    width: 49.1%;
}

.voice__image img {
    width: 100%;
    aspect-ratio: 510 / 321;
    object-fit: cover;
    border-radius: 10px;
}

/* =========================================================
   お知らせ
   ========================================================= */

.news {
    padding-top: 102px;
}

.news__list {
    margin-top: 93px;
}

.news__item + .news__item {
    margin-top: 24px;
}

.news__link {
    display: flex;
    gap: 52px;
    color: #6b4226;
    font-size: 16px;
    line-height: 1.8;
}

.news__date {
    flex-shrink: 0;
    width: 68px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.news__title {
    text-align: justify;
}

.news__button {
    display: flex;
    justify-content: center;
    margin-top: 84px;
}

/* =========================================================
   アクセス
   ========================================================= */

.access {
    padding: 146px 0 286px;
}

.access__map {
    margin-top: 44px;
    aspect-ratio: 1038 / 401;
    border-radius: 10px;
    background-color: #d9d9d9;
    overflow: hidden;
}

.access__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.access__info {
    margin-top: 77px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.65;
    text-align: center;
}

/* =========================================================
   お問い合わせ

   TOP 専用だった .contact は廃止し、下層ページと同じ共通の帯
   （base.css の .contact-cta）に統一した。上の余白はアクセスの
   padding-bottom（286px）が持っているので margin-top は付けない。
   ========================================================= */

/* =========================================================
   スクロールで浮かび上がる演出
   ========================================================= */

.js-fadeIn {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-fadeIn.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   SP（768px 以下）
   ========================================================= */

@media (max-width: 768px) {

    /* --- FV --- */

    .fv__stage {
        padding-top: 64px;
        /*
            メッセージはこの stage の中にあるので、下余白はメッセージの「後ろ」に付く。
            FV とメッセージの間隔は .message の margin-top 側に持たせている。
        */
        padding-bottom: 0;
    }

    /*
        SP は写真を画面いっぱいの背景にして、その上に見出しを重ねる。
        PC は「左に見出し・右に写真」の横並びだが、SP でその形を保つと
        写真が小さくなりすぎるため、重ねたうえで見出しを中央に置く。

        高さは dvh ではなく svh。dvh はスクロールでブラウザの
        アドレスバーが隠れるたびに値が変わり、写真の高さがガタつくため。
        svh に対応しない環境向けに vh を先に書いて上書きさせている。
    */
    .fv__inner {
        position: relative;
        align-items: center;
        justify-content: center;
        /* .fv__stage の padding-top（＝ヘッダー 64px）を引いて画面ちょうどに収める */
        height: calc(100vh - 64px);
        height: calc(100svh - 64px);
    }

    /*
        見出しは写真の上。stage の padding-top ぶん下がっているので、
        この箱の中央＝画面の中央になる（PC で 50vh に置いているのと同じ位置）。
    */
    .fv__body {
        position: relative;
        z-index: 1;
        flex-grow: 0;
        padding: 0 6%;
        text-align: center;
    }

    /*
        写真の上に直接置くと明るい部分で文字が沈むので、見出しに地色を敷く。
        白は使わずベース背景の #fffcf6（この案件では白の代わりにこの色を使う）。
        幅は指定しない。親（.fv__body）が内容幅に縮むので、地色は文字幅にぴったり付く。
    */
    .fv__title {
        padding: 24px 16px;
        background-color: #fffcf6;
    }

    .fv__title-sub {
        font-size: 20px;
    }

    .fv__title-main {
        font-size: 27px;
    }

    .fv__accent-green {
        font-size: 40px;
    }

    /*
        写真は画面いっぱいの背景に回す。
        中の img は枠より 15% 広げてあるので、はみ出しをここで切る。
    */
    .fv__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        overflow: hidden;
    }

    /*
        ゆっくり左へ流す。img を枠の 115% に広げ、その余った 15% ぶんを動かす
        （15 / 115 = 13.04%）。
        戻りは alternate に任せる。一方向のループだと端で先頭へ飛ぶ瞬間が見えるため。
    */
    .fv__image img {
        /* base.css の img { max-width: 100% } に負けるので、ここで外しておく */
        max-width: none;
        width: 115%;
        animation: fv-pan 12s ease-in-out infinite alternate;
    }

    @keyframes fv-pan {

        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-13.04%);
        }
    }

    /*
        写真を薄める地色は敷かない。
        見出しを読ませる役目は .fv__title の背景（#fffcf6）が持っているので、
        ここで重ねると写真が曇るだけになる。

        もし戻すことになったら、.fv__body（z-index: 1）と同じ値を
        擬似要素に振らないこと。DOM で後ろにある写真側が勝って見出しを覆う。
    */

    /*
        SP は横に2つ並べて画面右下に固定する。
        PC のような段違いにすると画面幅を取りすぎるため、
        子の absolute を解除して（下記 position: static）横並びの flex にする。
    */
    .fv__float {
        right: 12px;
        bottom: 16px;
        display: flex;
        align-items: flex-end;
        gap: 8px;
    }

    .fv__float-tel,
    .fv__float-mail {
        position: static;
    }

    .fv__float-tel {
        width: 54px;
        height: 54px;
    }

    .fv__float-tel img {
        width: 30px;
        height: 30px;
    }

    .fv__float-mail {
        width: 86px;
        height: 86px;
    }

    .fv__float-mail img {
        width: 30px;
        height: 24px;
    }

    .fv__float-label {
        margin-top: 6px;
        font-size: 10px;
    }

    /* --- メッセージ --- */

    .message {
        /* 70px + .fv__stage から外した下余白 60px。FV との間隔は従来どおり 130px */
        margin-top: 130px;
        padding: 80px 0 80px;
    }

    .message__text {
        margin-top: 24px;
        font-size: 15px;
    }

    .message__button {
        margin-top: 40px;
    }

    .message .section-title__ja {
        font-size: 24px;
    }

    /* --- カードナビゲーション --- */

    .card-nav {
        margin-top: 100px;
    }

    /* 3 列だと文字が潰れるので SP は 2 列 */
    .card-nav__item {
        width: 50%;
    }

    .card-nav__label {
        font-size: 16px;
    }

    /* カードが小さくなるぶん、重なるロゴも控えめにする */
    .card-nav__logo {
        width: 62%;
    }

    /* --- 共通カード --- */

    .card__body {
        padding-left: 20px;
    }

    .card__en {
        font-size: 14px;
    }

    .card__title {
        font-size: 20px;
    }

    .card__text {
        font-size: 14px;
    }

    /* --- イベント --- */

    .event {
        margin-top: 100px;
    }

    .event__slider {
        margin-top: 48px;
    }

    /* SP は 1 枚ずつ送る */
    .event__item {
        width: 100%;
    }

    .event__list {
        gap: 24px;
    }

    .event__arrow {
        top: auto;
        bottom: -56px;
        width: 32px;
        height: 32px;
    }

    /*
        矢印（＜ ＞）は上と右の 2 辺だけを引いて作っている。
        ここで border-width の一括指定を使うと、destyle.css が全辺に
        border-style: solid を入れているせいで下と左も現れて「◇」になる。
        必ず上と右だけを名指しで細くすること。
    */
    .event__arrow::before {
        width: 20px;
        height: 20px;
        border-top-width: 3px;
        border-right-width: 3px;
    }

    /* 画面外に出さず、カード下に並べる */
    .event__arrow--prev {
        right: auto;
        left: calc(50% - 44px);
    }

    .event__arrow--next {
        left: calc(50% + 12px);
    }

    .event__slider {
        padding-bottom: 72px;
    }

    /* --- できること --- */

    .services {
        margin-top: 100px;
    }

    .services__list {
        gap: 48px;
        margin-top: 48px;
    }

    .services__list > li {
        width: 100%;
    }

    /* --- こだわり --- */

    .concept {
        margin-top: 100px;
    }

    .concept__list {
        flex-direction: column;
        gap: 40px;
        margin-top: 48px;
    }

    .concept__item {
        width: 100%;
    }

    .concept__body {
        min-height: 0;
        padding: 20px 0 20px 20px;
    }

    .concept__text {
        font-size: 16px;
        text-align: left;
    }

    .concept__text em {
        font-size: 22px;
    }

    .concept__button {
        margin-top: 48px;
    }

    /* --- 施工実績 --- */

    .works {
        margin-top: 100px;
        padding-bottom: 80px;
    }

    .works__head {
        padding-top: 56px;
    }

    .works__gallery {
        margin-top: 48px;
    }

    .works__track img {
        width: 260px;
        height: 206px;
    }

    .works__button {
        margin-top: 48px;
    }

    /* --- お客様の声 --- */

    .voice {
        margin-top: 80px;
        padding-bottom: 90px;
    }

    .voice__inner {
        flex-direction: column;
        gap: 40px;
        padding-top: 80px;
    }

    .voice__image {
        width: 100%;
        order: -1;
    }

    .voice__text {
        margin-top: 32px;
        font-size: 15px;
    }

    /* --- お知らせ --- */

    .news {
        padding-top: 60px;
    }

    .news__list {
        margin-top: 48px;
    }

    /* 日付を上、タイトルを下に積む */
    .news__link {
        flex-direction: column;
        gap: 4px;
        font-size: 15px;
    }

    .news__date {
        width: auto;
        font-size: 13px;
    }

    .news__button {
        margin-top: 48px;
    }

    /* --- アクセス --- */

    .access {
        padding: 80px 0 100px;
    }

    .access__map {
        aspect-ratio: 4 / 3;
    }

    .access__info {
        margin-top: 40px;
        font-size: 15px;
    }

    /* お問い合わせの帯は base.css の .contact-cta（SP 指定も base.css 側）を使う */

    /* --- フッター --- */

    /*
        SP では固定の電話 / お問い合わせボタン（.fv__float）が画面右下に居座るので、
        一番下まで送るとフッターのナビとコピーライトに重なって読めなくなる。
        ボタンの高さ（86px）＋下余白（16px）を逃がすぶんだけ下に余白を足しておく。
        ボタンは TOP にしかないため base.css ではなくここで足している。
    */
    .footer__inner {
        padding-bottom: 120px;
    }
}

/* =========================================================
   FV 見出しの固定とフェードアウト（SP のみ）

   見出しを画面の中央に貼り付けたままにして、次のセクション（.message）が
   上がってきたら消す。写真だけが下に流れて、見出しが残る形になる。

   消し始め … 写真の下端が見出しの下を通り過ぎたとき（見出しが地の背景に乗った瞬間）
   消し終わり … .message の上端が .fv__title-sub の下端まで来たとき
     ＝「sub の底辺が次セクションに触れた」時点で完全に消えている
   （どこで測っているかは js/script.js 側のコメントに書いてある）

   進捗（0→1）は JS が --fv-title-fade として渡すだけ。
   見え方はここで完結させる（JS 側で opacity は書かない）。

   max-width: 768px と no-preference の positive query にしているのは、
   PC と prefers-reduced-motion では固定もフェードもせず、
   素の（.fv__inner の中で中央寄せされた）見出しに戻すため。
   JS 側も同じ条件で止めてある。
   ========================================================= */

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {

    .fv__body {
        position: fixed;
        /*
            ヘッダー 64px を除いた領域の中央 ＝ 画面中央から 32px 下。
            貼り付く前（.fv__inner の中で中央寄せ）と同じ位置なので、
            スクロールを始めた瞬間に見出しが飛ばない。
        */
        top: calc(50% + 32px);
        left: 50%;
        /* 幅は指定しない。内容幅に縮ませて、画面より広くならないよう頭だけ押さえる */
        max-width: 100%;
        transform: translate(-50%, -50%);
        opacity: calc(1 - var(--fv-title-fade, 0));
        /*
            画面の帯を占め続けるので、下のセクションのタップを邪魔しないよう常に透過させる。
            見出しの中にリンクは無いので副作用は無い。
        */
        pointer-events: none;
    }
}

/* =========================================================
   小さめのスマホ（480px 以下）
   デザインどおりの改行位置だと 1 行が画面幅を超えるので、
   このサイズからは <br> を無効にして自然折り返しに任せる。
   ========================================================= */

@media (max-width: 480px) {

    /*
        見出しは <br> ではなく nowrap で 1 行に固定しているので、ここでは折り返せない。
        320px まで下げると地色（.fv__title の背景）の左右が 4px ほどしか残らず
        文字が縁に貼り付いて見えるため、外側の余白を削ってプレートの幅を稼ぐ。
    */
    .fv__body {
        padding: 0 3%;
    }

    .fv__title-sub {
        font-size: 18px;
    }

    .fv__title-main {
        font-size: 24px;
    }

    .fv__accent-green {
        font-size: 34px;
    }

    .message__text br,
    .voice__text br {
        display: none;
    }

    .message__text,
    .voice__text {
        font-size: 14px;
    }
}

/* =========================================================
   アニメーション抑制
   ========================================================= */

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

    /*
        FV → メッセージの切り替え演出は、そもそも
        「min-width: 769px and (prefers-reduced-motion: no-preference)」の
        ブロックごと当たらないので、ここでの打ち消しは不要。
        写真もメッセージも素の並び（見出し / 写真 / メッセージ）で表示される。
    */

    .card-nav__image,
    .card-nav__link::before,
    .event__arrow {
        transition: none;
    }

    /* 流し続けるギャラリーは止めて 1 画面ぶんだけ見せる */
    .works__track {
        animation: none;
    }

    /*
        SP の FV でゆっくり流している写真も止める。
        止めた位置（translateX(0) ＝ 左端）のままでいいので transform は戻さない。
    */
    .fv__image img {
        animation: none;
    }

    .js-fadeIn {
        opacity: 1;
        transform: none;
        transition: none;
    }
}