@charset "UTF-8";

/* =========================================================
   service.css - 事業内容ページ専用スタイル
   ========================================================= */

/* 見出し（一体型画像）は中央配置。大きさは共通の section-title__heading-img に従う。 */
.page-service .section-title {
    text-align: center;
}

.page-service .section-title__heading-img {
    margin-inline: auto;
}

/* =========================================================
   訴求スライダー（FVマーキー帯と同内容を自動送りで切替）
   1枚ずつフェード切替（works-slider と同方式）＋下にドット。
   ========================================================= */
.service-appeal-slider {
    max-width: var(--section-width-sm);
    margin-inline: auto;
    margin-bottom: var(--spacing-lg);
}

/* 768以上：スライドが2列横並びになるので、幅を広げる。 */
@media (min-width: 768px) {
    .service-appeal-slider {
        max-width: var(--section-width-narrow);
    }
}

/* スライドの重ね場。全スライドを grid で同じセルに重ね、フェードで切り替える。
   ※ grid の重ね合わせなら、トラックの高さが「一番背の高いスライド」に
     自動で合うので、テキストが折り返されて背が伸びても
     下のドット領域にはみ出さない（旧：先頭のみフロー＋他を absolute）。 */
.service-appeal-slider__track {
    display: grid;
}

/* スライド（＝2枚1組のグループ）。スマホは縦積み1列、576以上は横並び、2列。
   全スライドをトラックの同じセル（1/1）に重ねる。 */
.service-appeal-slider__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    /* 非表示（opacity:0）のスライドはクリック/ホバーを吸わない。 */
    pointer-events: none;
}

@media (min-width: 768px) {
    .service-appeal-slider__slide {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.service-appeal-slider__slide.is-active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

/* カード（アイコン＋見出し＋説明文）。
   アイコンを左、本文を右に横並び。 */
.service-appeal-slider__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--color-bg-light);
    border: 3px solid var(--color-primary-dark);
    border-radius: var(--radius-lg);
}

.service-appeal-slider__img-wrap {
    flex-shrink: 0;
    width: 64px;
}

.service-appeal-slider__img {
    display: block;
    width: 100%;
    height: auto;
}

/* 画像未配置時のプレースホルダー（FV側と同じ考え方）。 */
.service-appeal-slider__img--placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1.5px dashed var(--color-secondary);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
}

.service-appeal-slider__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 0.35rem;
}

.service-appeal-slider__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* ドットインジケーター（スライダーの下） */
.service-appeal-slider__dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.service-appeal-slider__dot {
    position: relative;
    width: 16px;
    height: 16px;
    padding: 0;
    background-color: transparent;
    background-image: url('../images/water-drop-d.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--transition);
}

/* ホバー画像を ::before に重ね、opacity で 0.3s クロスフェードさせる。
   ※ background-image の入れ替えは transition で補間できないため、
     ホバー画像を重ねて不透明度でフェードする。 */
.service-appeal-slider__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/water-drop-h.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-appeal-slider__dot:hover::before {
    opacity: 1;
}

.service-appeal-slider__dot.is-active {
    background-image: url('../images/water-drop-a.png');
}

/* 事業一覧（縦積み・工事間の余白で区切るシンプルな形） */
.service-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .service-list {
        max-width: var(--section-width-lg);
    }
}

/* 事業ブロック（1工事＝1ブロック・装飾なし） */
.service-card {
    /* トップの事業内容カードから #water-supply 等のアンカーで遷移した際、
       カード上端が固定ヘッダー（--header-bar-height）の裏に潜らないよう
       ヘッダー高＋余白分のスクロールマージンを確保する。
       ※ これがないと遷移直後のスクロールがヘッダーに隠れてギクシャク見える。 */
    scroll-margin-top: calc(var(--header-bar-height) + 1rem);
}

/* ブロックの中身（写真＋テキスト）
   ベース（〜767px）：縦積みで body を上・サムネイルを下にする。
   ※ HTML の順（サムネイル→body）は変えず、column-reverse で視覚順を入れ替える。
     768px以上は下の @media で flex-direction: row / row-reverse に上書きされる。 */
.service-card__inner {
    display: flex;
    flex-direction: column-reverse;
}

/* サムネイルスライダー（クリップされない親：ドットの基準）。
   自身は 4:3 を保ち、中のスライド（各画像）を重ねてフェードで切替える。 */
.service-card__thumb-slider {
    position: relative;
    aspect-ratio: 4 / 3;
}

/* スライド群を重ねる場（grid の同一セルに重ねる）。 */
.service-card__thumb-track {
    display: grid;
    width: 100%;
    height: 100%;
}

/* 各スライド（＝1枚の画像）。波形クリップはここでかける。
   全スライドを同一セル（1/1）に重ね、opacity で切り替える。 */
.service-card__thumb {
    grid-area: 1 / 1;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
}

.service-card__thumb.is-active {
    opacity: 1;
    z-index: 1;
}

/* ドットインジケーター（サムネイルの右下）。
   クリップされない親（.service-card__thumb-slider）を基準に絶対配置。
   ※ 波形の谷にかからないよう、右下を少し内側に寄せる。 */
.service-card__thumb-dots {
    position: absolute;
    right: 8%;
    bottom: -5%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.service-card__thumb-dot {
    position: relative;
    width: 16px;
    height: 16px;
    padding: 0;
    background-color: transparent;
    background-image: url('../images/water-drop-d.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--transition);
}

/* ホバー画像を ::before に重ね、opacity で 0.3s クロスフェード（訴求ドットと同方式）。 */
.service-card__thumb-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/water-drop-h.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-card__thumb-dot:hover::before {
    opacity: 1;
}

.service-card__thumb-dot.is-active {
    background-image: url('../images/water-drop-a.png');
}

/* clip-path定義用SVG（非表示） */
.service-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.service-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像未配置時のプレースホルダー（2枚目以降未用意の間に出る）。 */
.service-card__img--placeholder {
    display: grid;
    place-items: center;
    color: var(--color-secondary);
    background-color: var(--color-bg-light);
    font-size: 2rem;
}

/* 768以上：ブロックの中身を画像左（4）・テキスト右（6）の横並びに（偶数番目は左右反転） */
@media (min-width: 768px) {
    .service-card__inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
    }

    /* 奇数番目：画像右・テキスト左 */
    .service-card:nth-child(odd) .service-card__inner {
        flex-direction: row-reverse;
    }

    .service-card__thumb-slider {
        flex: 5 1 0;
        min-width: 0;
        /* stretch で引き伸ばさず、自身の 4:3 を保つ（home-service と同じ考え方）。
           ※ align-items:stretch の flex 行内で body の高さに引き伸ばされると
             #waveMask（objectBoundingBox）が歪むため、center で比率を優先させる。 */
        align-self: center;
    }

    .service-card__body {
        flex: 5 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.service-card__body {
    position: relative;
    /* 背景::before（z-index:-1）がカードの外（下）に漏れないよう、
       body 自身に新しい重なり文脈を作る。
       ※ これにより、ベースで見出しを position:static にしても
         背景が見出しを覚い隠さない（背景は常に最背面）。 */
    isolation: isolate;
    padding: 4rem 3rem;
}

@media (min-width: 576px) {
    .service-card__body {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .service-card__body {
        padding: 4rem 5rem;
    }
}

/* 背景（クリーム地）をサムネイルと同じ波形クリップパス（#waveMask）で切り抜いて
   body の背後に敷く。body 本体は四角のままなのでテキストは切れない。
   ※ z-index:-1 で常にコンテンツの後ろに置く（body の isolation でカード内に留まる）。
   ※ クリックを吸わない（pointer-events:none）。 */
.service-card__body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-cream-white);
    /* クリーム地の上に水玉パターンを重ねる。
       ※ 色を自由に指定するため、SVG を data URI で直接書く。
         （bg-drops.svg は白い水滴なのでクリーム地では見えない）
       ※ タイル大きさは --card-deco-size、水玉の色・濃さは SVG 内の
         fill（%233F9DC2）/ fill-opacity で調整する。
       ※ background-color と background-image は両立する（画像が上に乗る）。 */
    --card-deco-size: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%233F9DC2' fill-opacity='0.0625'%3E%3Ccircle cx='26' cy='26' r='10.5'/%3E%3Ccircle cx='100' cy='50' r='6.75'/%3E%3Ccircle cx='136' cy='18' r='4.5'/%3E%3Ccircle cx='60' cy='82' r='5.25'/%3E%3Ccircle cx='126' cy='100' r='9'/%3E%3Ccircle cx='21' cy='117' r='6'/%3E%3Ccircle cx='80' cy='138' r='4.5'/%3E%3Ccircle cx='144' cy='138' r='6.75'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: var(--card-deco-size);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    pointer-events: none;
}

/* クリーム地の外側に、一回り大きい波形をタイトル色（--color-primary-dark）で
   敷いてフチ（オフセット）を作る。
   （トップの事業内容セクション .home-service__link::after を参考：
     clip-path は輪郭線を描けないため、一回り大きい波形を背面に置き、
     はみ出した分をフチに見せる）。
   ※ z-index:-2 でクリーム地（::before / -1）よりさらに背面へ（body の isolation でカード内に留まる）。
   ※ オフセット量は --body-outline で調整。 */
.service-card__body::after {
    content: "";
    --body-outline: 6px;

    position: absolute;
    top: calc(var(--body-outline) * -1);
    left: calc(var(--body-outline) * -1);
    z-index: -2;
    width: calc(100% + var(--body-outline) * 2);
    height: calc(100% + var(--body-outline) * 2);
    background-color: var(--color-primary-dark);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    pointer-events: none;
}

/* 中身（見出し・本文）は背景より前面に出す。
   ※ 番号バッジ（.service-card__num）は絶対配置なので除外する
     （relative を上書きすると左上配置が無効になるため）。 */
.service-card__body>*:not(.service-card__num):not(.service-card__illust-bg) {
    position: relative;
    z-index: 1;
}

/* 番号バッジ（body の左上）。トップの事業内容セクションの番号と同じ丸バッジ。
   ・枚線：--color-primary-dark / 背景：クリーム色 / 数字：--color-primary-dark。
   ・基準は .service-card__body（position:relative）。 */
.service-card__num {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-family: var(--font-en);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-dark);
    background-color: var(--color-cream-white);
    border: 3px solid var(--color-primary-dark);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}

.service-card__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.5rem);
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
}

/* ベース（〜575px）：見出しを static にして、中のイラストの
   絶対配置基準を .service-card__body（relative）にする。
   ※ .service-card__body > *:not(.service-card__num) で見出しに relative が付くので、
     同等以上の詳細度（> 結合）で上書きして打ち消す。
     z-index は効かなくなるが、見出しは背景::before（z-index:-1）より
     後に描画されるので前面に出る（重なり順は後勝ち）。 */
.service-card__body>.service-card__title:not(.service-card__num):not(.service-card__illust-bg) {
    position: static;
}

/* 見出しのイラスト（ラッパー）
   ベース（〜575px）：body の下角から少し外に飛び出す形で絶対配置
   （トップの事業内容セクション .home-service__illust を参考）。
   ※ 偶数カードは右下＋反転、奇数カードは左下＋反転なし（下の nth-child で出し分け）。
   ※ 基準は .service-card__body（position:relative / 見出しは static）。
   ※ img には疑似要素を付けられないため、span で包んで背景波形を敷く。
   ※ z-index は auto（新しい重なり文脈を作らない）。こうすることで、
     中の水色背景（::before）を body 背景（クリーム/フチ）と同じ負の z-index 層に
     直接積める（→ 水色を body の背面に回せる）。
   ※ 576px以上は下の @media で見出し内（左）のインラインに戻す。 */
.service-card__illust-wrap {
    position: absolute;
    bottom: 0;
    z-index: auto;
    display: block;
    width: 5rem;
    pointer-events: none;
}

/* 偶数カード：右下配置。 */
.service-card:nth-child(even) .service-card__illust-wrap {
    right: 0;
    transform: translate(25%, 55%);
}

/* 奇数カード：左下配置。 */
.service-card:nth-child(odd) .service-card__illust-wrap {
    left: 0;
    transform: translate(-25%, 55%);
}

/* イラスト背面の雲形装飾（トップと同じ #waveMask）。
   ※ body の背面（クリーム背景の後ろ）に確実に回すため、イラストラッパーの
     疑似要素ではなく、body 直下の独立要素（.service-card__illust-bg）として置く。
     （ラッパーに transform があり重なり文脈を作るため、その中の疑似要素では
       body 背景より後ろに回せない）。
   ベース（〜575px）：イラストと同じ body 下角（飛び出し）に配置。
   ※ 偶数カードは右下、奇数カードは左下（下の nth-child で出し分け）。
   ※ z-index:-2 で body のクリーム背景（.service-card__body::before / -1）の後ろへ。
   ※ 576px以上は下の @media で非表示にする。 */
.service-card__illust-bg {
    position: absolute;
    bottom: 0;
    z-index: -2;
    width: 7.5rem;
    aspect-ratio: 4 / 3;
    background-color: var(--color-primary-dark);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    pointer-events: none;
}

/* 偶数カード：右下配置。
   イラスト（右下）の中心にこの背景の中心を合わせる。
   横：＋33.33%、縦：目視調整値。 */
.service-card:nth-child(even) .service-card__illust-bg {
    right: 0;
    transform: translate(33.33%, 55%);
}

/* 奇数カード：左下配置（右下の値を左右反転）。 */
.service-card:nth-child(odd) .service-card__illust-bg {
    left: 0;
    transform: translate(-33.33%, 55%);
}

.service-card__title-illust {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

/* 偶数カード（右下配置）のみ、向きを合わせるため左右反転。
   ※ 奇数カード（左下）は反転なし（元の向き）。
   ※ 576px以上（見出し内インライン）では下の @media で元の向きに戻す。 */
.service-card:nth-child(even) .service-card__title-illust {
    transform: scaleX(-1);
}

/* 576px以上：見出しを relative（元の前面化）に戻し、
   イラスト（ラッパー）は static にして見出し内（左）のインラインに戻す。
   ※ 見出しの position はベースで .service-card__body > .service-card__title に
     static を付けているので、同詳細度（> 結合）で上書きして relative に戻す。 */
@media (min-width: 576px) {
    .service-card__body>.service-card__title:not(.service-card__num):not(.service-card__illust-bg) {
        position: relative;
    }

    .service-card__illust-wrap {
        position: static;
        z-index: auto;
        flex-shrink: 0;
        width: 6rem;
        pointer-events: auto;
    }

    /* 偶数/奇数の transform（ベースの左下/右下飛び出し）を打ち消して
       見出し内インラインに戻す（同詳細度で上書き）。 */
    .service-card:nth-child(even) .service-card__illust-wrap,
    .service-card:nth-child(odd) .service-card__illust-wrap {
        transform: none;
    }

    /* 水色の雲形背景はベース（左下飛び出し）のときだけ出す。
       576px以上（見出し内インライン）では非表示にする。 */
    .service-card__illust-bg {
        display: none;
    }

    /* 右下配置用の左右反転（偶数カード）はベースだけ。
       見出し内インラインでは元の向きに戻す（偶数セレクタと同詳細度で上書き）。 */
    .service-card:nth-child(even) .service-card__title-illust {
        transform: none;
    }

    /* 576px以上：番号バッジを少し内側へ。 */
    .service-card__num {
        top: 1.75rem;
        left: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .service-card__illust-wrap {
        width: 7rem;
    }

    /* 1024px以上：番号バッジを少し内側に寄せる（body のパディング拡大に合わせる）。 */
    .service-card__num {
        top: 2.25rem;
        left: 2.25rem;
    }
}

.service-card__text {
    font-size: 1rem;
    line-height: 1.8;
}

@media (min-width: 576px) {
    .service-card__text {
        font-size: 1.05rem;
    }
}

/* =========================================================
   お問い合わせ導線（service-cta）
   事業一覧の下に置く、相談を促すブロック。
   背景はサービスカードと同じ水滴形クリップ（#waveMask）で切り抜く。
   ※ #waveMask は objectBoundingBox なので要素の縦横比で形が変わる。
     幅を抑えめ（sm-plus）にし、padding でテキストが端に寄りすぎないようにする。
   ========================================================= */
.service-cta {
    position: relative;
    max-width: var(--section-width-sm-plus);
    margin: var(--spacing-xl) auto 0;
    /* ボタン上のスタッフイラスト分の余白は __btn-stack 側で確保する。 */
    isolation: isolate;
}

/* 水滴形の背景（--color-primary-dark）。ブロック全体を覚う。
   ※ z-index:-1 + 親の isolation で、常に中身の背面に置く（カード内に留める）。 */
.service-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-primary-dark);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    pointer-events: none;
}

/* クリーム色のフチ（オフセット）。clip-path は輪郭線を描けないため、
   一回り大きい波形を .service-cta__bg（--color-primary-dark）のさらに背面に敷き、
   はみ出した分をフチに見せる（サービスカード .service-card__body::after と同手法）。
   ※ .service-cta（isolation:isolate）の中で z-index:-2 にし、bg（-1）のさらに背面へ。
   ※ オフセット量は --cta-outline で調整。 */
.service-cta::before {
    content: "";
    --cta-outline: 6px;

    position: absolute;
    top: calc(var(--cta-outline) * -1);
    left: calc(var(--cta-outline) * -1);
    z-index: -2;
    width: calc(100% + var(--cta-outline) * 2);
    height: calc(100% + var(--cta-outline) * 2);
    background-color: var(--color-cream-white);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    pointer-events: none;
}

/* 中身（テキスト・ボタン）。中央寄せの縦並び。
   ※ 水滴形の角が抜けるので、上下左右に広めのパディングを取る。 */
.service-cta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    padding: 4rem 2.5rem;
}

@media (min-width: 576px) {
    .service-cta__inner {
        padding: 4.5rem 4rem;
    }
}

/* リード（大きめの見出し）。濃い背景の上なので白。 */
.service-cta__lead {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-white);
}

/* 本文（リードの下）。白よりやや淡く。 */
.service-cta__text {
    line-height: 1.9;
    color: var(--color-cream-white);
}

/* 見出し・本文共通：各行を折り返さずブロック表示し、
   フォントサイズを画面幅に追従（vw）させて拡大縮小する。
   最長行が枠内に収まるよう vw 係数を控えめにし、上限だけ clamp で頭打ちにする。 */
.service-cta__line {
    display: block;
    white-space: nowrap;
}

/* 見出しの行（大きめ）。 */
.service-cta__lead .service-cta__line {
    font-size: clamp(0.85rem, 4.5vw, 1.5rem);
}

/* 本文の行（見出しより小さめ・行が長い）。 */
.service-cta__text .service-cta__line {
    font-size: clamp(0.7rem, 4vw, 1.05rem);
}

/* 576px以上：inner のパディングが広がり実効幅が狭まるので係数を調整。 */
@media (min-width: 576px) {
    .service-cta__lead .service-cta__line {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }

    .service-cta__text .service-cta__line {
        font-size: clamp(0.85rem, 3.4vw, 1.05rem);
    }
}

/* 枠の最大幅（section-width-sm-plus）に達する画面では上限で頭打ち。 */
@media (min-width: 768px) {
    .service-cta__lead .service-cta__line {
        font-size: 1.5rem;
    }

    .service-cta__text .service-cta__line {
        font-size: 1.05rem;
    }
}