/* =========================================================
   Fujimotors サービス詳細ページ（受託整備 等）手書きCSS
   fm-layout.css のベース/ヘッダー/フッターに乗る。fm- 名前空間。
   ========================================================= */

/* ===== 青帯ヘッダー（元サイト準拠：青帯＋英字透かしが一体化した背景画像を左上に敷く）=====
   ※background-image はページ側でインライン指定（ページ毎に画像が異なる）
   レスポンシブ：≥1025 contain・h2/英字/リード左 ／ 768-1024 1300px・リード中央 ／ ≤767 1100px・h2/英字中央 */
.fm-svc-head {
    padding: 60px 0;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
}
.fm-svc-head .fm-container {
    max-width: 1200px;
    margin: 0 auto;       /* 中央寄せ（fm-service.css には .fm-container 基本定義が無いため明示）。
                             paddingは入れない＝カードがコンテナ端(幅1200)に揃う＝元サイトと一致 */
}
.fm-svc-head__body {
    max-width: 600px;
    margin-bottom: 28px;
    color: #fff;
}
/* 本文の白カード（元サイト準拠：青帯画像の上に乗る白箱。中身は白地に）。複数並ぶページ用に間隔も */
.fm-svc-card {
    background: #fff;
    border-style: solid;
    border-width: 1px 2px 3px 1px;
    border-color: #EFF8FF;
    padding: 50px;
}
.fm-svc-card + .fm-svc-card {
    margin-top: 40px;
}
/* カード内に複数サブ見出しが続く場合、2つ目以降は上に余白 */
.fm-svc-card .fm-svc-sec-head:not(:first-child) {
    margin-top: 44px;
}
.fm-svc-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
}
.fm-svc-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #fff;
}
.fm-svc-eyebrow::before,
.fm-svc-eyebrow::after {
    content: "";
    flex: 0 0 36px;
    height: 1px;
    background: #fff;
    opacity: .75;
}
.fm-svc-head__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #DDE8F2;
}

/* ===== 本文（請負い：同一セクション内に boxed で続く） ===== */
.fm-svc-sec-head {
    text-align: center;
    margin-bottom: 22px;
}
.fm-svc-h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--fm-text);
}
.fm-svc-eyebrow2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--fm-primary);
}
.fm-svc-eyebrow2::before,
.fm-svc-eyebrow2::after {
    content: "";
    flex: 0 0 36px;
    height: 1px;
    background: var(--fm-primary);
    opacity: .5;
}
.fm-svc-text {
    max-width: 820px;
    margin: 0 auto 32px;
    text-align: center;
    line-height: 1.9;
    color: var(--fm-text);
}

/* 画像ギャラリー（3枚） */
.fm-svc-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
.fm-svc-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

/* service detail: 現行HPの横スライダーと左右スライドインを再現 */
.fm-svc-motion-page,
.fm-parts-page {
    overflow-x: hidden;
}
.fm-svc-reveal-panel,
.fm-parts-panel {
    --fm-svc-reveal-x: 260px;
    will-change: opacity, transform;
}
.fm-svc-reveal-panel--left,
.fm-parts-panel--left {
    --fm-svc-reveal-x: -260px;
}
.fm-svc-motion-ready .fm-svc-reveal-panel[data-fm-reveal]:not(.is-visible),
.fm-parts-ready .fm-parts-panel[data-fm-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translate3d(var(--fm-svc-reveal-x), 0, 0);
}
.fm-svc-motion-ready .fm-svc-reveal-panel.is-visible,
.fm-parts-ready .fm-parts-panel.is-visible {
    animation: fmSvcFadeIn 1.25s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes fmSvcFadeIn {
    from {
        opacity: 0;
        transform: translate3d(var(--fm-svc-reveal-x), 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.fm-svc-carousel,
.fm-parts-carousel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 36px;
    overflow: hidden;
}
.fm-svc-carousel--single {
    max-width: none;
    margin: 0 0 14px;
}
.fm-svc-carousel.is-ready,
.fm-parts-carousel.is-ready {
    display: block;
}
.fm-svc-carousel__track {
    display: flex;
    gap: 30px;
    will-change: transform;
    transition: transform .68s cubic-bezier(.45, 0, .2, 1);
}
.fm-svc-carousel__slide {
    flex: 0 0 calc((100% - 60px) / 3);
    min-width: 0;
}
.fm-svc-carousel__slide img {
    display: block;
    width: 100%;
    aspect-ratio: 346 / 230;
    object-fit: cover;
    border-radius: 0;
}
.fm-svc-carousel--single .fm-svc-carousel__slide {
    flex-basis: 100%;
}
.fm-svc-carousel--single .fm-svc-carousel__slide img {
    aspect-ratio: 529 / 353;
    border-radius: 0;
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fm-svc-motion-ready .fm-svc-reveal-panel[data-fm-reveal],
    .fm-svc-motion-ready .fm-svc-reveal-panel.is-visible,
    .fm-parts-ready .fm-parts-panel[data-fm-reveal],
    .fm-parts-ready .fm-parts-panel.is-visible {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .fm-svc-carousel__track {
        transition: none;
    }
}

/* チェックリスト（インライン） */
.fm-svc-checklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    max-width: 920px;
    margin: 0 auto 44px;
    padding: 0;
    list-style: none;
}
.fm-svc-checklist li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: var(--fm-text);
}
.fm-svc-checklist li i {
    color: var(--fm-primary);
    font-size: .9em;
}

/* CTA ボックス（元サイト準拠：水色#EFF8FF の箱＋グレーの車アイコン） */
.fm-svc-cta {
    padding: 38px 30px;
    background: var(--fm-light);
    border-radius: 8px;
    text-align: center;
}
.fm-svc-cta__icon {
    font-size: 2.4em;
    color: #54595F;
    margin-bottom: 10px;
}
.fm-svc-cta__text {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 500;
    color: var(--fm-text);
}
.fm-svc-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: 4px;
    background: var(--fm-primary);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}
.fm-svc-cta__btn:hover {
    background: var(--fm-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}
.fm-svc-cta__btn i {
    font-size: .78em;
}

/* ===== カード内の小見出し h3 ===== */
.fm-svc-h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--fm-text);
}

/* ===== 2カラム（画像＋小見出し＋説明） ===== */
.fm-svc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 32px;
}
.fm-svc-cols img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 14px;
}
.fm-svc-cols .fm-svc-h3 {
    text-align: center;
}
.fm-svc-cols p {
    margin: 0;
    line-height: 1.8;
}

/* ===== アイコングリッド（はがき/チラシ等） ===== */
.fm-svc-icongrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
    margin-bottom: 28px;
    padding: 0;
    list-style: none;
}
.fm-svc-icongrid li {
    text-align: center;
}
.fm-svc-icongrid img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin-bottom: 10px;
}
.fm-svc-icongrid .fm-svc-h3 {
    margin: 0;
    font-size: 15px;
    text-align: center;
}

/* ===== 制作フロー（ステップ＋下矢印） ===== */
.fm-svc-flow {
    max-width: 680px;
    margin: 0 auto;
}
.fm-svc-flow__step {
    text-align: center;
}
.fm-svc-flow__step p {
    margin: 0;
    line-height: 1.8;
}
.fm-svc-flow__step .fm-svc-cta__btn {
    margin-top: 12px;
}
.fm-svc-flow__arrow {
    text-align: center;
    color: var(--fm-primary);
    font-size: 1.7em;
    margin: 14px 0;
}

/* ===== 連絡先リスト ===== */
.fm-svc-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 2;
    color: var(--fm-text);
}

/* ===== 事業内容トップ：カテゴリーカード（4枚） ===== */
.fm-svc-head--cards .fm-svc-head__body {
    margin-bottom: 56px;   /* カードが青帯の下に来るよう余白 */
}
.fm-svc-cardgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.fm-svc-cat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 36px 24px;
    text-align: center;
    text-decoration: none;
    background: #fff;
    border: 1.5px solid #DDE8F2;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fm-svc-cat:hover {
    transform: translateY(-4px);
    border-color: var(--fm-primary);
    box-shadow: 0 8px 24px rgba(0, 99, 177, .12);
}
.fm-svc-cat__icon {
    font-size: 2em;
    margin-bottom: 14px;
    color: var(--fm-primary);
}
.fm-svc-cat__title {
    margin: 0 0 10px;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: .04em;
    color: #333;
}
.fm-svc-cat__desc {
    margin: 0 0 16px;
    font-size: .88em;
    line-height: 1.7;
    color: #666;
}
.fm-svc-cat__more {
    font-size: .85em;
    font-weight: 600;
    color: var(--fm-primary);
    transition: color .2s;
}
.fm-svc-cat:hover .fm-svc-cat__more {
    color: var(--fm-accent);
}

/* ===== レスポンシブ ===== */
/* 768〜1024px：リード中央寄せ・背景画像1300px（h2/英字は左のまま） */
@media (max-width: 1024px) {
    .fm-svc-head {
        background-size: 1300px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .fm-svc-head__body {
        max-width: none;
    }
    .fm-svc-head__lead {
        text-align: center;
    }
}
@media (max-width: 767px) {
    .fm-svc-head {
        padding: 40px 16px 30px;
        background-size: 1100px;
    }
    .fm-svc-head__body {
        text-align: center;       /* h2を中央へ */
    }
    @media (min-width: 600px) {
        .fm-svc-head__body {
            width: min(100%, 540px);
            margin-right: auto;
        }
    }
    .fm-svc-card {
        padding: 28px 20px;       /* モバイルは内側paddingを縮小 */
    }
    .fm-svc-eyebrow {
        justify-content: center;
    }
    .fm-svc-head__lead {
        font-size: 15px;
        text-align: justify;
    }
    .fm-svc-title {
        font-size: 24px;
    }
    .fm-svc-gallery {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .fm-svc-reveal-panel,
    .fm-parts-panel {
        --fm-svc-reveal-x: 42px;
    }
    .fm-svc-reveal-panel--left,
    .fm-parts-panel--left {
        --fm-svc-reveal-x: -42px;
    }
    .fm-svc-carousel,
    .fm-parts-carousel {
        margin-bottom: 30px;
    }
    .fm-svc-carousel--single {
        margin-bottom: 14px;
    }
    .fm-svc-carousel__track {
        gap: 14px;
    }
    .fm-svc-carousel__slide {
        flex-basis: 100%;
    }
    .fm-svc-checklist {
        justify-content: flex-start;
        gap: 8px 18px;
    }
    .fm-svc-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .fm-svc-icongrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fm-svc-cardgrid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
/* タブレットでギャラリーは2列に（画像が多いページ向け） */
@media (max-width: 900px) and (min-width: 768px) {
    .fm-svc-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .fm-svc-carousel__track {
        gap: 24px;
    }
    .fm-svc-carousel__slide {
        flex-basis: calc((100% - 24px) / 2);
    }
    .fm-svc-carousel--single .fm-svc-carousel__slide {
        flex-basis: 100%;
    }
}