@charset "UTF-8";

/* ==========================================================================
   1. 共通・リセット・デフォルト設定
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body, input, textarea, select, button {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
}

img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.mobile-only-break { display: none; }

img.acinst-logo {
    width: auto !important;
    max-width: 100% !important;
}

/* ==========================================================================
   2. ファーストビュー（ヒーロー・特徴・対応施設エリア）
   ========================================================================== */
.acinst-lp, .acinst-lp * {
    box-sizing: border-box;
}

.acinst-lp {
    --acinst-s: 1px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    color: #06634f;
    background: #fff;
    line-height: 1.35;
    overflow: hidden;
    container-type: inline-size;
}

@supports (width: 1cqw) {
    .acinst-lp { --acinst-s: clamp(1px, 0.1cqw, 1.92px); }
}

/* ヒーローエリア */
.acinst-hero {
    position: relative;
    min-height: calc(508 * var(--acinst-s));
    background: #fff;
    overflow: hidden;
}

.acinst-hero__photo {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    pointer-events: none;
}

.acinst-hero__picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.acinst-hero__picture img, .acinst-hero__bg {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.acinst-hero__content {
    position: relative;
    z-index: 5;
    width: 66%;
    min-height: calc(508 * var(--acinst-s));
    padding: calc(13 * var(--acinst-s)) 0 0 calc(18 * var(--acinst-s));
}


/* ヘッダー・ロゴ */
.acinst-header {
    display: flex;
    align-items: flex-start;
    gap: calc(12 * var(--acinst-s));
    margin-bottom: calc(8 * var(--acinst-s));
}

.acinst-logo {
    width: calc(142 * var(--acinst-s));
    height: auto;
    display: block;
}

.acinst-header__lead {
    font-size: calc(12 * var(--acinst-s));
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    color: #06634f;
    letter-spacing: .02em;
    text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 1px 0 #fff;
}

.acinst-header__lead-break { display: none; }

/* テキストコンテンツ */
.acinst-label {
    display: inline-block;
    margin: calc(4 * var(--acinst-s)) 0 calc(10 * var(--acinst-s)) 0;
    padding: calc(6 * var(--acinst-s)) calc(24 * var(--acinst-s));
    background: linear-gradient(135deg, #06634f, #054a3a);
    color: #fff;
    font-size: calc(19 * var(--acinst-s));
    font-weight: 800;
    line-height: 1;
    border-radius: calc(4 * var(--acinst-s));
    box-shadow: 0 calc(4 * var(--acinst-s)) calc(12 * var(--acinst-s)) rgba(3,46,37,.22);
}

.acinst-title {
    margin: 0;
    color: #06634f;
    font-weight: 900;
    font-size: calc(76 * var(--acinst-s));
    line-height: 1.02;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.acinst-subtitle {
    margin: calc(11 * var(--acinst-s)) 0 0;
    font-size: calc(18 * var(--acinst-s));
    font-weight: 900;
    color: #06634f;
    letter-spacing: .03em;
    text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 1px 0 #fff;
}

/* 導入実績 */
.acinst-achievements {
    display: flex;
    gap: calc(12 * var(--acinst-s));
    align-items: center;
    margin-top: calc(20 * var(--acinst-s));
    padding-left: calc(8 * var(--acinst-s));
    position: relative;
    z-index: 6;
    width: calc(470 * var(--acinst-s));
}

.acinst-achievements__item {
    position: relative;
    flex: 0 0 calc(144 * var(--acinst-s));
    min-width: calc(144 * var(--acinst-s));
    text-align: center;
    color: #4c4a38;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: .01em;
    padding: calc(2 * var(--acinst-s)) calc(3 * var(--acinst-s));
    white-space: nowrap;
}

.acinst-achievements__item:nth-child(3) {
    flex-basis: calc(158 * var(--acinst-s));
    min-width: calc(158 * var(--acinst-s));
}

.acinst-achievements__item span,
.acinst-achievements__item strong,
.acinst-achievements__item em,
.acinst-achievements__item small {
    text-shadow: calc(1 * var(--acinst-s)) 0 0 #fff, calc(-1 * var(--acinst-s)) 0 0 #fff, 0 calc(1 * var(--acinst-s)) 0 #fff, 0 calc(-1 * var(--acinst-s)) 0 #fff, calc(1 * var(--acinst-s)) calc(1 * var(--acinst-s)) 0 #fff, calc(-1 * var(--acinst-s)) calc(1 * var(--acinst-s)) 0 #fff, calc(1 * var(--acinst-s)) calc(-1 * var(--acinst-s)) 0 #fff, calc(-1 * var(--acinst-s)) calc(-1 * var(--acinst-s)) 0 #fff, 0 calc(2 * var(--acinst-s)) calc(2 * var(--acinst-s)) rgba(255,255,255,.75);
}

.acinst-achievements__item span {
    display: block;
    font-size: calc(11 * var(--acinst-s));
    color: #645b42;
    font-weight: 900;
}

.acinst-achievements__item strong {
    display: inline-block;
    font-size: calc(35 * var(--acinst-s));
    color: #b68a25;
    line-height: .98;
    letter-spacing: -.04em;
}

.acinst-achievements__item:nth-child(3) strong {
    font-size: calc(32 * var(--acinst-s));
    letter-spacing: -.06em;
}

.acinst-achievements__item em {
    font-style: normal;
    font-size: calc(16 * var(--acinst-s));
    color: #b68a25;
    margin-left: calc(2 * var(--acinst-s));
    font-weight: 900;
}

.acinst-achievements__item small {
    display: block;
    font-size: calc(10 * var(--acinst-s));
    color: #645b42;
    margin-top: calc(3 * var(--acinst-s));
    font-weight: 900;
    line-height: 1.2;
}

/* スマホ用CTA（初期状態はPCで非表示、720px以下でのみ表示） */
.acinst-hero__mobile-cta { display: none; }

/* かんたん見積もりリンク (PC用) */
.acinst-estimate-link {
    position: absolute;
    z-index: 8;
    right: calc(13 * var(--acinst-s));
    top: calc(10 * var(--acinst-s));
    width: calc(310 * var(--acinst-s));
    height: calc(483 * var(--acinst-s));
    display: block;
    text-decoration: none;
    border-radius: calc(10 * var(--acinst-s));
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 calc(8 * var(--acinst-s)) calc(20 * var(--acinst-s)) rgba(0,35,78,.28);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease, opacity .24s ease;
    cursor: pointer;
}

.acinst-estimate-link:hover {
    transform: translateY(calc(-5 * var(--acinst-s))) scale(1.015);
    box-shadow: 0 calc(16 * var(--acinst-s)) calc(32 * var(--acinst-s)) rgba(0,35,78,.38);
    filter: brightness(1.06) saturate(1.08);
    opacity: .98;
}

.acinst-estimate-link__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 対応サービス特徴（5項目） */
.acinst-features {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    width: calc(585 * var(--acinst-s));
    margin-top: calc(-74 * var(--acinst-s));
    margin-left: 0;
    background: #fff;
    border-radius: calc(10 * var(--acinst-s));
    overflow: hidden;
    border: 1px solid #edf1f4;
    box-shadow: 0 calc(8 * var(--acinst-s)) calc(24 * var(--acinst-s)) rgba(12,47,91,.16);
}

.acinst-feature {
    min-height: calc(86 * var(--acinst-s));
    padding: calc(12 * var(--acinst-s)) calc(5 * var(--acinst-s)) calc(7 * var(--acinst-s));
    text-align: center;
    border-right: 1px solid #edf1f4;
    background: rgba(255,255,255,.96);
}

.acinst-feature:last-child {
    border-right: 0;
}

.acinst-feature span {
    display: block;
    height: calc(25 * var(--acinst-s));
    margin-bottom: calc(6 * var(--acinst-s));
    font-size: calc(26 * var(--acinst-s));
    line-height: 1;
    color: #06634f;
    font-weight: 900;
}

.acinst-feature strong {
    display: block;
    font-size: calc(12 * var(--acinst-s));
    color: #06634f;
    font-weight: 900;
}

.acinst-feature small {
    display: block;
    font-size: calc(8 * var(--acinst-s));
    color: #666;
    margin-top: calc(3 * var(--acinst-s));
    font-weight: 700;
}

/* 対応施設一覧グリッド */
.acinst-facilities {
    display: grid;
    grid-template-columns: calc(136 * var(--acinst-s)) repeat(6, 1fr) calc(70 * var(--acinst-s));
    gap: calc(10 * var(--acinst-s));
    align-items: center;
    padding: calc(12 * var(--acinst-s)) 0 calc(12 * var(--acinst-s)) calc(2 * var(--acinst-s));
    background: #fff;
}

.acinst-facilities__heading {
    height: calc(80 * var(--acinst-s));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(10 * var(--acinst-s));
    background: linear-gradient(135deg, #06634f, #054a3a);
    color: #fff;
    font-size: calc(19 * var(--acinst-s));
    font-weight: 900;
    line-height: 1.45;
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
}

.acinst-card {
    position: relative;
    margin: 0;
    height: calc(72 * var(--acinst-s));
    border-radius: calc(6 * var(--acinst-s));
    overflow: hidden;
    background:#06634f;
    box-shadow: 0 calc(2 * var(--acinst-s)) calc(6 * var(--acinst-s)) rgba(0,0,0,.16);
    transition: transform .3s ease, box-shadow .3s ease;
}

.acinst-card:hover {
    transform: translateY(calc(-2 * var(--acinst-s)));
    box-shadow: 0 calc(6 * var(--acinst-s)) calc(14 * var(--acinst-s)) rgba(0,0,0,.22);
}

.acinst-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.acinst-card:hover img {
    transform: scale(1.07);
}

.acinst-card p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: calc(3 * var(--acinst-s)) calc(2 * var(--acinst-s));
    background: linear-gradient(0deg, rgba(3,46,37,.92), rgba(3,46,37,.7));
    color: #fff;
    text-align: center;
    font-size: calc(11 * var(--acinst-s));
    font-weight: 900;
    line-height: 1.1;
}

.acinst-facilities__etc {
    margin: 0;
    font-size: calc(13 * var(--acinst-s));
    line-height: 1.35;
    font-weight: 900;
    color: #06634f;
    text-align: center;
}

/* ========================================================
   3. スマホ用フローティングナビ (画面最下部固定)
   ======================================================== */
.acinst-floating-nav {
    display: none !important; /* デフォルトPCは非表示 */
    width: 100% !important;
    position: fixed;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999;
}

.acinst-floating-nav__container {
    position: relative;
    width: 100%;
    display: block;
}

.acinst-floating-nav__bg {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.acinst-floating-nav__link-left,
.acinst-floating-nav__link-right {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
}

.acinst-floating-nav__link-left {
    left: 0;
    width: 40%;
}

.acinst-floating-nav__link-right {
    right: 0;
    width: 60%;
}

/* ========================================================
   4. ページトップへ戻るボタン
   ======================================================== */
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #294156, #1a2634);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, background 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

.scroll-top-btn.is-show {
    opacity: 1;
    visibility: visible;
}

@media (hover: hover) {
    .scroll-top-btn:hover {
        background-color: #06634f;
        transform: translateY(-3px);
    }
}

/* ========================================================
   5. 【追加コンポーネント】共通目次 (custom-toc)
   ======================================================== */
.custom-toc-wrapper {
    width: 100%;
    max-width: 1200px;
    background-color: #fafafa;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(10,30,25,0.07);
    margin: 20px auto;
    box-sizing: border-box;
}

.custom-toc-main-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #666666;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.custom-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.custom-toc-item {
    border-bottom: 1px dashed #dddddd !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-toc-item:last-child {
    border-bottom: none !important;
}

.custom-toc-link {
    display: flex !important;
    align-items: center;
    padding: 14px 12px !important;
    border-radius: 10px;
    text-decoration: none !important;
    color: #333333 !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.custom-toc-link:hover {
    background-color: #eef7f2 !important;
    color: #06634f !important;
    text-decoration: none !important;
    transform: translateX(3px);
}

.custom-toc-number {
    font-family: "Georgia", serif !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    color: #888888 !important;
    margin-right: 20px !important;
    width: 24px !important;
    text-align: right;
    flex-shrink: 0;
}

.custom-toc-text {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.4;
}

/* ========================================================
   6. スマートフォン専用メディアクエリ調整 (max-width: 720px)
   ======================================================== */
@media (max-width: 720px) {
    /* 共通設定 */
    body {
        padding-bottom: 90px !important; /* 固定ナビの高さ分の余白 */
    }

    img.acinst-logo {
        width: 140px !important;
        max-width: 45% !important;
        height: auto !important;
        flex-shrink: 0 !important;
    }

    /* ヒーローエリアスマホ挙動 */
    .acinst-hero {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        background: #fff !important;
        padding: 0 12px 18px !important;
    }

    .acinst-hero__photo {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        opacity: 1 !important;
    }

    /* hero背景画像はHTMLの <picture> タグ内で指定済み:
       images/hero_bg.jpg (PC) / images/hero_bg2.jpg (スマホ) */

    .acinst-hero__content {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 15px 12px 22px !important;
    }

    .acinst-hero .acinst-estimate-link {
        display: none !important;
    }

    /* かんたん見積もりリンク非表示に代わる、スマホ用のはっきりしたCTA（背景画像の外＝プレーンな背景に配置） */
    .acinst-hero__mobile-cta {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 20px !important;
        padding: 14px 12px 0 !important;
        background: #fff !important;
        position: relative;
        z-index: 3;
    }
    .acinst-hero__mobile-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #d8351a, #ad2411);
        color: #fff !important;
        font-size: 17px;
        font-weight: 900;
        padding: 15px 0;
        border-radius: 12px;
        text-decoration: none !important;
        box-shadow: 0 8px 20px rgba(216,53,26,.4);
    }
    .acinst-hero__mobile-cta-tel {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(255,255,255,.92);
        border: 1.5px solid #06634f;
        border-radius: 10px;
        padding: 8px 0;
        text-decoration: none !important;
        color: #06634f !important;
    }
    .acinst-hero__mobile-cta-tel-icon { font-size: 18px; }
    .acinst-hero__mobile-cta-tel-text { display: flex; align-items: baseline; gap: 6px; }
    .acinst-hero__mobile-cta-tel-text small { font-size: 11px; font-weight: 700; color: #888; }
    .acinst-hero__mobile-cta-tel-text strong { font-size: 18px; font-weight: 900; }

    /* ヘッダー・各種テキスト */
    .acinst-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .acinst-header__lead {
        flex: 1 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        white-space: normal !important;
        padding-right: 54px !important;
    }

    .acinst-header__lead-break { display: block !important; }
    .acinst-header__lead-sep,
    .acinst-header__lead-sub { display: none !important; }

    .acinst-label {
        font-size: 15px !important;
        margin-top: 2px !important;
    }

    .acinst-title {
        font-size: clamp(24px, 7.8vw, 36px) !important;
        line-height: 0.92 !important;
        margin-top: 120px !important;
        text-shadow:
            2px 0 0 #fff, -2px 0 0 #fff,
            0 2px 0 #fff, 0 -2px 0 #fff,
            1.4px 1.4px 0 #fff, -1.4px 1.4px 0 #fff,
            1.4px -1.4px 0 #fff, -1.4px -1.4px 0 #fff !important;
    }

    .acinst-title-break { display: none !important; }

    .acinst-subtitle {
        font-size: 15px !important;
        margin-top: 6px !important;
        text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 1px 0 #fff !important;
    }

    /* 導入実績スマホ（背景画像の下に配置） */
    .acinst-achievements {
        display: flex !important;
        gap: 0 !important;
        width: calc(100% + 24px) !important;
        margin: 20px -12px 0 !important;
        padding: 9px 10px !important;
        background: rgba(6, 99, 79, .68) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-top: 2px solid #ffd166 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .acinst-achievements__item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        line-height: 1 !important;
        border-right: 1px solid rgba(255,255,255,.28);
    }
    .acinst-achievements__item:last-child { border-right: 0; }
    .acinst-achievements__item:nth-child(3) { flex-basis: auto !important; min-width: 0 !important; }

    .acinst-achievements__item,
    .acinst-achievements__item span,
    .acinst-achievements__item strong,
    .acinst-achievements__item em,
    .acinst-achievements__item small { text-shadow: none !important; }

    .acinst-achievements__item span { font-size: clamp(9px, 1.2vw, 11px) !important; color: #dbe6f7 !important; margin-bottom: 0 !important; }
    .acinst-achievements__item strong { font-size: 25px !important; color: #ffd166 !important; line-height: .9 !important; }
    .acinst-achievements__item:nth-child(3) strong { font-size: 22px !important; }
    .acinst-achievements__item em { font-size: 13px !important; color: #ffd166 !important; }
    .acinst-achievements__item small { font-size: clamp(8px, 1vw, 10px) !important; color: #dbe6f7 !important; margin-top: 1px !important; }

    /* 特徴グリッドスマホ（営業1部LPと同じ3列×2行） */
    .acinst-features {
        width: 100% !important;
        margin: 0 !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 対応施設スマホ */
    .acinst-facilities {
        grid-template-columns: 1fr 1fr !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .acinst-facilities__heading {
        grid-column: 1 / -1 !important;
        clip-path: none !important;
        height: auto !important;
        padding: 12px !important;
    }

    .acinst-card {
        height: 84px !important;
    }

    .acinst-facilities__etc {
        grid-column: 1 / -1 !important;
    }

    /* 固定ナビスマホ有効化 */
    .acinst-floating-nav {
        display: block !important;
    }

    /* ページトップボタン位置調整 */
    .scroll-top-btn {
        right: 15px !important;
        bottom: 85px !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 0.7rem !important;
    }

    /* 目次スマホ最適化 */
    .custom-toc-wrapper {
        padding: 16px 14px;
        margin: 14px auto;
    }
    .custom-toc-main-title {
        font-size: 0.95rem;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    .custom-toc-link {
        padding: 9px 4px !important;
    }
    .custom-toc-number {
        font-size: 0.8rem !important;
        margin-right: 12px !important;
        width: 18px !important;
    }
    .custom-toc-text {
        font-size: 0.82rem !important;
        line-height: 1.35;
    }
    .custom-toc-detail, .custom-toc-colon, .custom-toc-link br {
        display: none !important;
    }
}

/* ========================================================
   お問い合わせバナー（静的インライン設置用）のクリック領域調整
   ======================================================== */
.inquiry-banner-overlay-wrap {
  position: relative;
  display: block;
  width: 85%;
  max-width: var(--container);
  margin: 0 auto;
}
.inquiry-banner-overlay-wrap img {
  display: block;
  width: 100% !important;
  height: auto !important;
}
.banner-link-left, .banner-link-right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  outline: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
.banner-link-left {
  left: 0;
  width: 35%;
}
.banner-link-right {
  right: 0;
  width: 65%;
}

.acinst-hero__photo {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}
.acinst-hero__picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.acinst-hero__picture img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.ac-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 20px auto;
}
.ac-pc-90-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 769px) {
  .ac-pc-90-img {
    width: 90%;
  }
}

/* ===================================================
   以下は元 style.css の内容（結合）
   =================================================== */

/* ===================================================
   アルタクラッセ 防犯カメラLP スタイルシート
   ファイル: lp/css/style.css
   幅: 1730px
   デザインリニューアル版 — トークン化されたカラー／余白／影のシステム
   =================================================== */

:root {
  /* --- カラー --- */
  --c-navy-deep: #032e25;
  --c-navy: #142d63;
  --c-blue: #1c4f9c;
  --c-blue-deep: #12356b;
  --c-green: #06634f;
  --c-green-deep: #054a3a;
  --c-green-mid: #2f7d4f;
  --c-orange: #d98724;
  --c-orange-deep: #a9660f;
  --c-gold: #e8c55a;
  --c-gold-deep: #b6862a;
  --c-red: #d8351a;
  --c-red-deep: #ad2411;
  --c-text: #24303b;
  --c-text-soft: #545f6c;
  --c-text-mute: #848d99;
  --c-border: #e4e8ee;
  --c-border-soft: #edf0f4;
  --c-bg-soft: #f5f7f9;
  --c-bg-blue-soft: #eef3fb;
  --c-white: #fff;

  /* --- 角丸 --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- 影（エレベーション） --- */
  --sh-1: 0 1px 3px rgba(10,30,25,.06), 0 1px 2px rgba(10,30,25,.05);
  --sh-2: 0 6px 20px rgba(10,30,25,.08);
  --sh-3: 0 14px 36px rgba(10,30,25,.12);
  --sh-4: 0 22px 54px rgba(10,30,25,.16);
  --sh-cta: 0 10px 26px rgba(216,53,26,.32);
  --sh-cta-hover: 0 14px 34px rgba(216,53,26,.42);

  --ease: cubic-bezier(.4,0,.2,1);
  --container: 1280px;
  --band: 1920px;
}

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
  color: var(--c-text);
  background: #fff;
  line-height: 1.7;
  font-size: 18px;
  font-feature-settings: "palt";
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: inherit; }

/* === Page Wrapper === */
.page {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

/* === Icon Utilities === */
.icon { display: inline-block; vertical-align: middle; }
.icon-sm  { width: 26px; height: 26px; }
.icon-md  { width: 36px; height: 36px; }
.icon-lg  { width: 48px; height: 48px; }
.icon-xl  { width: 64px; height: 64px; }
.icon-xxl { width: 80px; height: 80px; }

/* Color filters for black SVG icons */
.icon-white  { filter: brightness(0) invert(1); }
.icon-navy   { filter: invert(13%) sepia(64%) saturate(737%) hue-rotate(197deg) brightness(82%); }
.icon-green  { filter: invert(34%) sepia(80%) saturate(390%) hue-rotate(104deg) brightness(88%); }
.icon-orange { filter: invert(53%) sepia(78%) saturate(497%) hue-rotate(12deg) brightness(100%); }
.icon-red    { filter: invert(20%) sepia(80%) saturate(2000%) hue-rotate(349deg) brightness(95%); }
.icon-gold   { filter: invert(60%) sepia(70%) saturate(600%) hue-rotate(10deg) brightness(105%); }

/* === Section Header Bar === */
.sec-head {
  position: relative;
  background: linear-gradient(135deg, #04241c 0%, var(--c-navy-deep) 55%, #06392d 100%);
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 18px rgba(3,46,37,.22);
}
.sec-head__line {
  height: 0;
  width: 180px;
  border-top: 1px dashed rgba(255,255,255,.28);
  flex: none;
}
.sec-head__title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 5px;
  white-space: nowrap;
}

.sec-head__title-sp { display: none; }

/* === Grid Layouts === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* === Common Card === */
.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card-body { padding: 20px; }

/* === Card Headers (colored top bar) === */
.card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}
.card-head--green  { background: linear-gradient(135deg, var(--c-green-mid), #266b43); }
.card-head--blue   { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep)); }
.card-head--orange { background: linear-gradient(135deg, var(--c-orange), var(--c-orange-deep)); }
.card-head--navy   { background: linear-gradient(135deg, #1c3457, #16284f); }

/* === Section Background colors === */
.bg-white   { background: #fff; }
.bg-light   { background: var(--c-bg-soft); }
.bg-blue-lt { background: var(--c-bg-blue-soft); }
.bg-navy    { background: #1a2e46; }

/* === Section Padding === */
.sec-pad    { padding: 30px 22px 40px; }
.sec-pad-sm { padding: 22px 22px 30px; }

/* === Checklist item === */
.check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--c-text);
  font-size: 19px;
  margin-bottom: 8px;
}
.check-item img { flex: none; }

/* === Divider (centered title with lines) === */
.divider-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.divider-title__line {
  flex: 1;
  height: 0;
  border-top: 1px solid var(--c-border);
}
.divider-title__text {
  color: var(--c-green);
  font-size: 30px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* === Badge / Tag === */
.badge {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: var(--r-sm);
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: .02em;
}
.badge--required { background: var(--c-red); color: #fff; }
.badge--optional { background: #888; color: #fff; }
.badge--navy     { background: var(--c-navy-deep); color: #fff; }
.badge--pickup   { background: var(--c-green); color: #fff; font-size: 17px; padding: 7px 20px; border-radius: var(--r-sm); box-shadow: var(--sh-1); text-shadow: -1px -1px 0 rgba(85,130,238,.6), 0 -1px 0 rgba(85,130,238,.6), 1px -1px 0 rgba(85,130,238,.6), -1px 0 0 rgba(85,130,238,.6), 1px 0 0 rgba(85,130,238,.6), -1px 1px 0 rgba(85,130,238,.6), 0 1px 0 rgba(85,130,238,.6), 1px 1px 0 rgba(85,130,238,.6); }
.badge--free     { background: var(--c-red); color: #fff; font-size: 22px; padding: 11px 34px; border-radius: 10px; font-weight: 700; box-shadow: var(--sh-cta); }

/* === Rank Medal === */
.rank-medal {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* === Photo placeholder (photo slot wrapper) === */
.photo-slot { position: relative; overflow: hidden; }
.photo-slot img.photo { width: 100%; height: 100%; object-fit: cover; }

/* === Hero Section === */
.hero-main {
  position: relative;
  min-height: 540px;
  background: linear-gradient(175deg, #d3ecf9 0%, #a9d3ec 42%, #d5e8ca 100%);
  padding: 56px 34px 40px;
  padding-left: max(34px, calc((100% - var(--container)) / 2));
  padding-right: max(34px, calc((100% - var(--container)) / 2));
  overflow: hidden;
}
.hero-main__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-main__overlay img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.hero-main__overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(175deg, rgba(211,236,249,.55) 0%, rgba(169,211,236,.25) 45%, rgba(213,232,202,.5) 100%);
}
.hero-main__content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero-main__sub   { color: var(--c-green); font-size: 32px; font-weight: 700; margin-bottom: 8px; letter-spacing: .01em; }
.hero-main__title { color: var(--c-green); font-size: 70px; font-weight: 900; line-height: 1.15; margin-bottom: 14px; text-shadow: 0 2px 0 rgba(255,255,255,.5); }
.hero-main__title span { color: var(--c-green); }
.hero-main__desc1 { color: var(--c-green); font-size: 32px; font-weight: 700; margin-bottom: 14px; }
.hero-main__desc1 em { color: var(--c-red); font-style: normal; }
.hero-main__desc2 { color: var(--c-green); font-size: 22px; font-weight: 600; }
.hero-main__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 34px;
  gap: 20px;
}
.hero-feature-cards { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-feature-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 370px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-feature-card:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
.hero-feature-card__title { color: var(--c-green); font-size: 22px; font-weight: 700; }
.hero-feature-card__desc  { color: var(--c-text-soft); font-size: 18px; line-height: 1.45; margin-top: 3px; }
.hero-thumb-row { display: flex; gap: 12px; }
.hero-thumb { width: 142px; text-align: center; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); }
.hero-thumb__img { height: 108px; overflow: hidden; }
.hero-thumb__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hero-thumb:hover .hero-thumb__img img { transform: scale(1.08); }
.hero-thumb__label {
  background: linear-gradient(135deg, #2c5e3a, var(--c-green-deep));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 7px 4px;
  line-height: 1.3;
}

/* === Ranking Section === */
.ranking-section { position: relative; overflow: hidden; background: var(--c-bg-soft); padding: 22px 22px 32px; }
.ranking-col-head {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 18px 0;
  letter-spacing: .02em;
}
.ranking-col-body {
  background: #fff;
  border: 1px solid var(--c-border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 16px;
  box-shadow: var(--sh-2);
}
.rank-item { border-bottom: 1px solid var(--c-border-soft); padding: 16px 4px 22px; margin-bottom: 8px; }
.rank-item:last-child { border-bottom: none; margin-bottom: 0; }
.rank-item__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rank-item__title  { color: var(--c-text); font-size: 26px; font-weight: 700; flex: 1; }
.rank-item__tag    { background: var(--c-bg-soft); color: #444; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-sm); white-space: nowrap; }
/* ---- 写真を横長バナー化し、チェックリストを白バッジで写真上に重ねるデザイン ---- */
/* 高さはチェックリストの内容量に応じて自動で伸びるため、テキスト量が変わっても重なり/はみ出しが起きない */
.rank-item__body   { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.rank-item__photo  { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; overflow: hidden; box-shadow: none; }
.rank-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.rank-item__body:hover .rank-item__photo img { transform: scale(1.06); }
.rank-item__note   { position: absolute; top: 8px; left: 8px; right: auto; bottom: auto; max-width: 66%; background: rgba(6,99,79,0.92); color: #fff; font-size: 12px; font-weight: 700; text-align: left; line-height: 1.35; padding: 5px 10px; border-radius: var(--r-sm); z-index: 2; }
.rank-item__list   {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 6px 8px; padding: 10px 12px;
  min-height: 205px;
  background: linear-gradient(180deg, rgba(6,20,16,.20) 0%, rgba(6,20,16,.05) 35%, rgba(6,20,16,.55) 100%);
}
.rank-item__list .check-item {
  margin: 0; gap: 5px;
  background: rgba(255,255,255,.95);
  color: #1a2b3a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  white-space: nowrap;
}
.rank-item__list .check-item img { width: 13px !important; height: 13px !important; }
.rank-item__photo:has(.rank-item__note) ~ .rank-item__list { padding-top: 52px; }
@media (max-width: 1100px) {
  .rank-item__list { min-height: 155px; }
  .rank-item__list .check-item { font-size: 12px; padding: 5px 9px; }
}
@media (max-width: 768px) {
  .rank-item__list { min-height: 55vw; padding: 8px; gap: 5px 6px; }
  .rank-item__list .check-item { font-size: 11px; padding: 4px 8px; }
  .rank-item__list .check-item img { width: 11px !important; height: 11px !important; }
  .rank-item__note { font-size: 10.5px; padding: 4px 8px; max-width: 72%; }
  .rank-item__photo:has(.rank-item__note) ~ .rank-item__list { padding-top: 50px; }
}

/* === Options Section === */
.options-section { background: #fff; padding: 28px 24px 32px; }
.options-section__title { color: var(--c-navy-deep); font-size: 38px; font-weight: 700; text-align: center; margin-bottom: 30px; }
.option-card {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: 26px 16px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.option-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--c-border); background: #fff; }
.option-card__icon { margin: 0 auto 14px; }
.option-card__title { color: var(--c-navy-deep); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.option-card__desc  { color: var(--c-text-soft); font-size: 17px; line-height: 1.5; }
.options-notes { display: flex; justify-content: space-between; margin-top: 22px; color: var(--c-text-mute); font-size: 17px; flex-wrap: wrap; gap: 8px; }

/* === Price Section === */
.price-intro { background: var(--c-bg-blue-soft); padding: 32px 22px 18px; text-align: center; }
.price-intro__title { color: var(--c-navy-deep); font-size: 50px; font-weight: 900; }
.price-intro__sub   { color: var(--c-text-soft); font-size: 24px; margin-top: 14px; }
.price-intro__badge { margin-top: 22px; }

.price-cards-wrap { background: var(--c-bg-blue-soft); padding: 10px 22px 30px; }
.price-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-2);
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--sh-4); }
.price-card__head { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 0; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.price-card__photo { height: 168px; overflow: hidden; position: relative; }
.price-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.price-card:hover .price-card__photo img { transform: scale(1.06); }
.price-card__body { padding: 20px 24px 22px; flex: 1; display: flex; flex-direction: column; }
.price-card__plan-tag { display: inline-block; color: #fff; font-size: 19px; font-weight: 700; padding: 6px 20px; border-radius: var(--r-pill); align-self: flex-start; }
.price-card__price { font-weight: 900; line-height: 1; margin: 12px 0; }
.price-card__price-num  { font-size: 58px; }
.price-card__price-unit { font-size: 28px; }
.price-card__price-tax  { font-size: 17px; color: var(--c-text-mute); font-weight: 700; margin-left: 6px; }
.price-card__divider { border: none; border-top: 2px solid; margin: 14px 0 12px; opacity: .55; }
.price-card__section-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.price-card__contents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 14px; }
.price-card__places { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.price-card__place { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #444; font-size: 17px; font-weight: 500; }
.price-card__note { color: var(--c-text-mute); font-size: 15px; border-top: 1px solid var(--c-border-soft); padding-top: 13px; margin-top: auto; }

/* === Cost factors === */
.cost-factors { background: var(--c-bg-blue-soft); padding: 0 22px 32px; }
.cost-factors__box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 32px 30px 38px; text-align: center; box-shadow: var(--sh-2); }
.cost-factors__title { color: var(--c-green); font-size: 29px; font-weight: 700; margin-bottom: 26px; }
.cost-factor { text-align: center; }
.cost-factor__title { color: var(--c-navy-deep); font-size: 22px; font-weight: 700; margin: 10px 0 6px; }
.cost-factor__desc  { color: var(--c-text-soft); font-size: 18px; line-height: 1.5; }

/* === System Update === */
.sysupdate { background: #fff; padding: 26px 22px 14px; }
.sysupdate__box { background: var(--c-bg-soft); border-radius: var(--r-xl); padding: 38px 32px; }
.sysupdate__title { text-align: center; color: var(--c-green-mid); font-size: 44px; font-weight: 900; margin-bottom: 10px; }
.sysupdate__sub { text-align: center; color: var(--c-text-soft); font-size: 22px; margin-bottom: 28px; }
.sysupdate__flow { display: flex; align-items: stretch; gap: 20px; }
.sysupdate__before, .sysupdate__after {
  flex: 1;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: center;
  box-shadow: var(--sh-1);
}
.sysupdate__before-title { color: #333; font-size: 26px; font-weight: 700; }
.sysupdate__after-title  { color: var(--c-green-mid); font-size: 26px; font-weight: 700; }
.sysupdate__before-desc  { color: var(--c-text-mute); font-size: 18px; line-height: 1.5; margin: 7px 0 15px; }
.sysupdate__after-desc   { color: var(--c-green-mid); font-size: 18px; font-weight: 500; line-height: 1.5; margin: 7px 0 15px; }
.sysupdate__mini-photo { aspect-ratio: 16/9; height: auto; border-radius: var(--r-md); overflow: hidden; }
.sysupdate__mini-photo img { width: 100%; height: 100%; object-fit: cover; }
.sysupdate__arrow { display: flex; align-items: center; color: var(--c-green-mid); font-size: 38px; font-weight: 900; flex: none; }
.sysupdate__cost { flex: 1.3; background: #f2f9f4; border: 1px solid #cfe3d6; border-radius: var(--r-lg); padding: 22px; }
.sysupdate__cost-title { display: flex; align-items: center; gap: 9px; color: var(--c-green-mid); font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.sysupdate__cost-price { color: var(--c-green-mid); font-weight: 900; line-height: 1; margin-bottom: 10px; }
.sysupdate__cost-price-num  { font-size: 40px; }
.sysupdate__cost-price-unit { font-size: 22px; }
.sysupdate__cost-tag { background: #dff0e2; color: #236b3a; font-size: 18px; font-weight: 700; text-align: center; padding: 8px; border-radius: var(--r-sm); margin-bottom: 13px; }

.sysupdate-points { background: #fff; padding: 8px 22px 12px; }
.sysupdate-points__title { text-align: center; color: var(--c-green-mid); font-size: 26px; font-weight: 700; border-top: 1px solid var(--c-border); padding-top: 22px; margin-bottom: 22px; }
.sysupdate-point { background: var(--c-bg-soft); border-radius: var(--r-lg); padding: 22px; display: flex; gap: 16px; align-items: flex-start; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sysupdate-point:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.sysupdate-point__title { color: #1f5e38; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.sysupdate-point__desc  { color: var(--c-text-soft); font-size: 18px; line-height: 1.55; }

.cable-survey { background: #fff; padding: 16px 22px 28px; }
.cable-survey__box { background: var(--c-bg-soft); border-radius: var(--r-xl); padding: 26px 28px; display: flex; gap: 26px; align-items: flex-start; }
.cable-survey__text { width: 330px; flex: none; }
.cable-survey__title { color: var(--c-navy-deep); font-size: 22px; font-weight: 700; margin-bottom: 13px; }
.cable-survey__desc  { color: var(--c-text-soft); font-size: 19px; line-height: 1.6; }
.cable-survey__notice { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d9c08a; color: #8a6a1a; font-size: 17px; font-weight: 700; padding: 8px 17px; border-radius: var(--r-md); margin-top: 17px; }
.cable-survey__flow { flex: 1; display: flex; align-items: center; gap: 14px; }
.cable-survey__step { flex: 1; text-align: center; }
.cable-survey__step-label { color: var(--c-navy-deep); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.cable-survey__step-photo { height: 200px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.cable-survey__step-photo img { width: 100%; height: 100%; object-fit: cover; }
.cable-survey__cables { display: flex; gap: 8px; }
.cable-survey__cable { flex: 1; }
.cable-survey__cable-label { font-size: 15px; color: var(--c-text-soft); margin-top: 7px; line-height: 1.3; text-align: center; }

/* === Showroom Section === */
.showroom-hero {
  position: relative;
  background: linear-gradient(135deg, #9aa4ac, #06886e);
  min-height: 270px;
  display: flex;
  align-items: center;
  padding: 32px 34px;
  overflow: hidden;
}
.showroom-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.showroom-hero__overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.showroom-hero__content { position: relative; z-index: 1; flex: 1; }
.showroom-hero__tag { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-green); font-size: 19px; font-weight: 700; padding: 8px 22px; border-radius: var(--r-pill); margin-bottom: 13px; box-shadow: var(--sh-2); }
.showroom-hero__tag strong { font-size: 26px; }
.showroom-hero__founded { color: var(--c-gold); font-size: 22px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.35); -webkit-text-stroke: 0.6px #07271f; paint-order: stroke fill; }
.showroom-hero__title { color: #fff; font-size: 52px; font-weight: 900; line-height: 1.25; margin-top: 8px; text-shadow: 0 2px 6px rgba(0,0,0,.4); -webkit-text-stroke: 0.6px #07271f; paint-order: stroke fill; }
.showroom-hero__title em { color: var(--c-gold); font-style: normal; text-shadow: 0 2px 6px rgba(0,0,0,.4); -webkit-text-stroke: 0.6px #07271f; paint-order: stroke fill; }
.showroom-hero__badge {
  position: relative; z-index: 1; margin-left: 24px; flex: none;
  width: 140px; height: 140px;
  background: linear-gradient(135deg, #f0d888, var(--c-gold));
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 4px solid #fff;
  box-shadow: var(--sh-3);
}
.showroom-hero__badge-num  { color: #7a5600; font-size: 42px; font-weight: 900; line-height: 1; text-shadow: -2px -2px 0 #fff, 0 -2px 0 #fff, 2px -2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff, -2px 2px 0 #fff, 0 2px 0 #fff, 2px 2px 0 #fff; }
.showroom-hero__badge-text { color: #7a5600; font-size: 16px; font-weight: 700; text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 1px 0 #fff; }

.showroom-details { background: #838f8d; padding: 26px 30px 32px; }
.showroom-details__title { color: #fff; font-size: 40px; font-weight: 700; margin-bottom: 13px; text-shadow: 0 2px 4px rgba(0,0,0,.35); -webkit-text-stroke: 0.6px #07271f; paint-order: stroke fill; }
.showroom-details__body  { color: #fff; font-size: 20px; line-height: 1.9; text-shadow: 0 1px 3px rgba(0,0,0,.3); -webkit-text-stroke: 0.4px #07271f; paint-order: stroke fill; }
.showroom-details__cta   { color: #fff; font-size: 24px; font-weight: 700; margin-top: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.3); -webkit-text-stroke: 0.5px #07271f; paint-order: stroke fill; }
.showroom-details__cta em { color: var(--c-gold); font-style: normal; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.3); -webkit-text-stroke: 0.5px #07271f; paint-order: stroke fill; }
.showroom-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 26px; }
.showroom-photos img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-2); transition: transform .4s var(--ease); }
.showroom-photos img:hover { transform: translateY(-4px); }
.showroom-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 16px; }
.showroom-feature { background: #fff; border-radius: var(--r-lg); padding: 20px; display: flex; align-items: flex-start; gap: 13px; box-shadow: var(--sh-1); }
.showroom-feature__title { color: var(--c-green); font-size: 20px; font-weight: 700; }
.showroom-feature__title strong { font-size: 24px; }
.showroom-feature__desc  { color: var(--c-text-soft); font-size: 17px; line-height: 1.5; margin-top: 4px; }

/* === Customer Types === */
.customer-section { background: var(--c-bg-soft); padding: 22px 22px 24px; }
.customer-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-border); overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.customer-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.customer-card__head { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 22px; font-weight: 700; padding: 14px 20px; }
.customer-card__body { padding: 19px 20px; }
.customer-card__photo img { width: 100%; height: 165px; object-fit: cover; }

.products-box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); }
.products-box__title { color: var(--c-navy-deep); font-size: 23px; font-weight: 700; margin-bottom: 20px; }
.product-thumb { text-align: center; }
.product-thumb img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); margin-bottom: 7px; }
.product-thumb__label { font-size: 17px; color: #444; font-weight: 500; }

.consult-box { background: var(--c-bg-blue-soft); border: 1px solid #c4d4ef; border-radius: var(--r-lg); padding: 26px; display: flex; gap: 18px; align-items: flex-start; }
.consult-box__title { color: var(--c-green); font-size: 26px; font-weight: 700; margin-bottom: 15px; }
.consult-box__body  { color: var(--c-text-soft); font-size: 19px; margin-top: 15px; }
.consult-box__photo { width: 120px; flex: none; }
.consult-box__photo img { width: 120px; height: 150px; object-fit: cover; border-radius: var(--r-md); }

/* === Smartphone Section === */
.smart-hero { position: relative; overflow: hidden; min-height: 520px; background: linear-gradient(135deg, #edf3fa, #cfdff2); padding: 40px 30px; display: flex; align-items: center; gap: 30px; }
.smart-hero__bg-overlay { position: absolute; inset: 0; z-index: 0; }
.smart-hero__bg-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.smart-hero > *:not(.smart-hero__bg-overlay) { position: relative; z-index: 1; }
.smart-hero__mockup { width: 185px; flex: none; background: linear-gradient(135deg, #1a2d4a, #0d1a2c); border-radius: 24px; height: 235px; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sh-3); }
.smart-hero__mockup-label { color: #7aa8e0; font-size: 13px; font-weight: 700; text-align: center; }
.smart-hero__mockup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; }
.smart-hero__mockup-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.smart-hero__content { flex: 1; }
.smart-hero__title { color: var(--c-navy-deep); font-size: 58px; font-weight: 900; line-height: 1.15; -webkit-text-stroke: 0.6px #fff; paint-order: stroke fill; }
.smart-hero__title em { color: var(--c-red); font-style: normal; -webkit-text-stroke: 0.6px #fff; paint-order: stroke fill; }
.smart-hero__subtitle { color: var(--c-navy-deep); font-size: 30px; font-weight: 700; margin: 10px 0 13px; -webkit-text-stroke: 0.4px #fff; paint-order: stroke fill; }
.smart-hero__desc { color: var(--c-text-soft); font-size: 21px; line-height: 1.6; margin-bottom: 22px; -webkit-text-stroke: 0.3px #fff; paint-order: stroke fill; }
.smart-hero__icons { display: flex; gap: 28px; }
.smart-icon { text-align: center; }
.smart-icon__circle { width: 70px; height: 70px; border: 2px solid var(--c-green); background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; box-shadow: var(--sh-1); }
.smart-icon__label { font-size: 17px; color: #333; font-weight: 600; -webkit-text-stroke: 0.3px #fff; paint-order: stroke fill; }
.smart-hero__photo { display: none; }

.smart-places { background: #fff; padding: 24px 22px; }
.smart-place-card { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.smart-place-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.smart-place-card__photo img { width: 100%; height: 150px; object-fit: cover; }
.smart-place-card__body { padding: 19px 20px; display: flex; flex-direction: column; gap: 8px; }

.smart-features { background: var(--c-bg-soft); padding: 8px 22px 20px; }
.smart-features__box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 22px; display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; box-shadow: var(--sh-1); }
.smart-feat { text-align: center; }
.smart-feat__head { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--c-green); font-size: 19px; font-weight: 700; margin-bottom: 10px; min-height: 54px; }
.smart-feat__photo { height: 92px; border-radius: var(--r-sm); overflow: hidden; }
.smart-feat__photo img { width: 100%; height: 100%; object-fit: cover; }
.smart-feat__desc { font-size: 16px; color: var(--c-text-soft); margin-top: 6px; }
.smart-feat__text { color: var(--c-text-soft); font-size: 17px; line-height: 1.55; text-align: left; }
.smart-detection-icons { display: flex; justify-content: center; gap: 10px; margin-top: 13px; }
.smart-detect-icon { width: 44px; height: 44px; border: 1.5px solid #c0c8d4; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }

.smart-internet-row { background: var(--c-bg-soft); padding: 0 22px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.internet-box { background: linear-gradient(135deg, var(--c-green), var(--c-green-deep)); border-radius: var(--r-lg); padding: 24px; display: flex; gap: 18px; align-items: flex-start; box-shadow: var(--sh-2); }
.internet-box__title { color: #fff; font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.internet-box__desc  { color: #cfe3f4; font-size: 19px; line-height: 1.6; }
.internet-box__icon  { width: 76px; flex: none; height: 76px; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.16); }
.internet-box__icon img { width: 50px; height: 50px; }
.setup-box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); }
.setup-box__title { color: var(--c-navy-deep); font-size: 22px; font-weight: 700; margin-bottom: 15px; }
.setup-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-flow__step { background: var(--c-bg-blue-soft); border-radius: var(--r-sm); padding: 8px 13px; font-size: 16px; color: var(--c-green); font-weight: 600; line-height: 1.3; }
.setup-flow__step--final { background: var(--c-green); color: #fff; }
.setup-flow__arrow { color: #aaa; font-size: 18px; }

/* === Results Section === */
.results-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #0a1620 0%, #16324f 55%, #0a1620 100%); padding: 42px 30px; display: flex; align-items: center; gap: 26px; min-height: 330px; width: 100vw; margin-left: 50%; transform: translateX(-50%); box-sizing: border-box; }
.results-hero__bg-overlay { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.results-hero__bg-overlay img { width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 1; }
.results-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10,22,32,.94) 0%, rgba(10,22,32,.88) 42%, rgba(10,22,32,.55) 68%, rgba(10,22,32,.15) 100%); }
.results-hero > *:not(.results-hero__bg-overlay) { position: relative; z-index: 1; }
.results-hero__content { flex: 1; max-width: 62%; }
@media (max-width: 1100px) { .results-hero__content { max-width: 100%; } }
.results-hero__count-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.results-hero__count-row img { flex: none; }
.results-hero__count-num   { color: var(--c-gold); font-size: 76px; font-weight: 900; letter-spacing: -3px; line-height: 1; text-shadow: -2px -2px 0 rgba(85,130,238,.6), 0 -2px 0 rgba(85,130,238,.6), 2px -2px 0 rgba(85,130,238,.6), -2px 0 0 rgba(85,130,238,.6), 2px 0 0 rgba(85,130,238,.6), -2px 2px 0 rgba(85,130,238,.6), 0 2px 0 rgba(85,130,238,.6), 2px 2px 0 rgba(85,130,238,.6); }
.results-hero__count-label { color: var(--c-gold); font-size: 52px; font-weight: 900; text-shadow: -2px -2px 0 rgba(85,130,238,.6), 0 -2px 0 rgba(85,130,238,.6), 2px -2px 0 rgba(85,130,238,.6), -2px 0 0 rgba(85,130,238,.6), 2px 0 0 rgba(85,130,238,.6), -2px 2px 0 rgba(85,130,238,.6), 0 2px 0 rgba(85,130,238,.6), 2px 2px 0 rgba(85,130,238,.6); }
.results-hero__count-unit  { color: var(--c-gold); font-size: 40px; font-weight: 900; text-shadow: -1.5px -1.5px 0 rgba(85,130,238,.6), 0 -1.5px 0 rgba(85,130,238,.6), 1.5px -1.5px 0 rgba(85,130,238,.6), -1.5px 0 0 rgba(85,130,238,.6), 1.5px 0 0 rgba(85,130,238,.6), -1.5px 1.5px 0 rgba(85,130,238,.6), 0 1.5px 0 rgba(85,130,238,.6), 1.5px 1.5px 0 rgba(85,130,238,.6); }
.results-hero__subtitle { color: #fff; font-size: 29px; font-weight: 700; margin-bottom: 13px; text-shadow: -1.5px -1.5px 0 rgba(85,130,238,.6), 0 -1.5px 0 rgba(85,130,238,.6), 1.5px -1.5px 0 rgba(85,130,238,.6), -1.5px 0 0 rgba(85,130,238,.6), 1.5px 0 0 rgba(85,130,238,.6), -1.5px 1.5px 0 rgba(85,130,238,.6), 0 1.5px 0 rgba(85,130,238,.6), 1.5px 1.5px 0 rgba(85,130,238,.6); }
.results-hero__desc { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.7; margin-bottom: 20px; text-shadow: -1px -1px 0 rgba(85,130,238,.6), 0 -1px 0 rgba(85,130,238,.6), 1px -1px 0 rgba(85,130,238,.6), -1px 0 0 rgba(85,130,238,.6), 1px 0 0 rgba(85,130,238,.6), -1px 1px 0 rgba(85,130,238,.6), 0 1px 0 rgba(85,130,238,.6), 1px 1px 0 rgba(85,130,238,.6); }
.results-hero__skytree-title { color: #fff; font-size: 34px; font-weight: 900; text-shadow: -1.5px -1.5px 0 rgba(85,130,238,.6), 0 -1.5px 0 rgba(85,130,238,.6), 1.5px -1.5px 0 rgba(85,130,238,.6), -1.5px 0 0 rgba(85,130,238,.6), 1.5px 0 0 rgba(85,130,238,.6), -1.5px 1.5px 0 rgba(85,130,238,.6), 0 1.5px 0 rgba(85,130,238,.6), 1.5px 1.5px 0 rgba(85,130,238,.6); }
.results-hero__skytree-sub   { color: var(--c-gold); font-size: 20px; font-weight: 700; margin: 5px 0 10px; text-shadow: -1px -1px 0 rgba(85,130,238,.6), 0 -1px 0 rgba(85,130,238,.6), 1px -1px 0 rgba(85,130,238,.6), -1px 0 0 rgba(85,130,238,.6), 1px 0 0 rgba(85,130,238,.6), -1px 1px 0 rgba(85,130,238,.6), 0 1px 0 rgba(85,130,238,.6), 1px 1px 0 rgba(85,130,238,.6); }
.results-hero__skytree-desc  { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.65; text-shadow: -1px -1px 0 rgba(85,130,238,.6), 0 -1px 0 rgba(85,130,238,.6), 1px -1px 0 rgba(85,130,238,.6), -1px 0 0 rgba(85,130,238,.6), 1px 0 0 rgba(85,130,238,.6), -1px 1px 0 rgba(85,130,238,.6), 0 1px 0 rgba(85,130,238,.6), 1px 1px 0 rgba(85,130,238,.6); }
.results-hero__skytree-cta   { color: var(--c-gold); font-size: 23px; font-weight: 900; margin-top: 16px; text-shadow: -1px -1px 0 rgba(85,130,238,.6), 0 -1px 0 rgba(85,130,238,.6), 1px -1px 0 rgba(85,130,238,.6), -1px 0 0 rgba(85,130,238,.6), 1px 0 0 rgba(85,130,238,.6), -1px 1px 0 rgba(85,130,238,.6), 0 1px 0 rgba(85,130,238,.6), 1px 1px 0 rgba(85,130,238,.6); }
.results-hero__photo { display: none; }

.cases-section { background: var(--c-bg-soft); padding: 18px 22px 28px; }
.case-large { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-1); }
.case-large__photo { height: 470px; position: relative; overflow: hidden; }
.case-large__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.case-large:hover .case-large__photo img { transform: scale(1.05); }
.case-large__photo-label { position: absolute; bottom: 14px; left: 16px; background: var(--c-navy-deep); color: #fff; font-size: 17px; font-weight: 700; padding: 6px 16px; border-radius: var(--r-sm); }
.case-large__body { padding: 22px; flex: 1; }
.case-large__desc { color: var(--c-text-soft); font-size: 19px; line-height: 1.65; margin-bottom: 15px; }
.case-large__sys-title { color: var(--c-green); font-size: 19px; font-weight: 700; margin-bottom: 11px; }
.case-large__sys-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case-small { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.case-small:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.case-small__photo { position: relative; height: 250px; overflow: hidden; }
.case-small__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.case-small:hover .case-small__photo img { transform: scale(1.06); }
.case-small__photo-label { position: absolute; bottom: 11px; left: 11px; color: #fff; font-size: 16px; font-weight: 700; padding: 4px 13px; border-radius: var(--r-sm); }
.case-small__body { padding: 15px 19px; }
.case-small__title { color: var(--c-navy-deep); font-size: 20px; font-weight: 700; }
.case-small__desc  { color: var(--c-text-soft); font-size: 17px; line-height: 1.5; margin-top: 6px; }
.case-tiny { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.case-tiny:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.case-tiny__photo { height: 108px; position: relative; overflow: hidden; }
.case-tiny__photo img { width: 100%; height: 100%; object-fit: cover; }
.case-tiny__photo-label { position: absolute; bottom: 7px; left: 10px; color: #fff; font-size: 15px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-sm); }
.case-tiny__body { padding: 15px 19px; }
.case-tiny__title { color: var(--c-navy-deep); font-size: 20px; font-weight: 700; }
.case-tiny__desc  { color: var(--c-text-soft); font-size: 17px; line-height: 1.5; margin-top: 6px; }

/* === Maintenance === */
.maintenance-hero { position: relative; overflow: hidden; background: var(--c-bg-blue-soft); padding: 32px 30px 26px; display: flex; align-items: center; gap: 26px; }
.maintenance-hero__bg-overlay { position: absolute; inset: 0; z-index: 0; }
.maintenance-hero__bg-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 0.12; }
.maintenance-hero > *:not(.maintenance-hero__bg-overlay) { position: relative; z-index: 1; }
.maintenance-hero__content { flex: 1; }
.maintenance-hero__label { color: var(--c-navy-deep); font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.maintenance-hero__label em { color: #e87a1a; font-style: normal; }
.maintenance-hero__title { color: var(--c-green); font-size: 48px; font-weight: 900; line-height: 1.2; margin-bottom: 13px; }
.maintenance-hero__desc  { color: var(--c-text-soft); font-size: 21px; line-height: 1.6; }
.maintenance-hero__photo { display: none; }

.warranty-section { background: var(--c-bg-blue-soft); padding: 0 22px 20px; }
.warranty-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 26px; text-align: center; box-shadow: var(--sh-1); }
.warranty-card__num { font-weight: 900; line-height: 1; margin: 7px 0; }
.warranty-card__num-big  { font-size: 52px; }
.warranty-card__num-unit { font-size: 26px; }
.warranty-card__desc { color: var(--c-text-soft); font-size: 18px; line-height: 1.55; margin-top: 13px; }

.engineer-section { background: var(--c-bg-blue-soft); padding: 0 22px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.engineer-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); }
.engineer-card__head { color: var(--c-navy-deep); font-size: 23px; font-weight: 700; text-align: center; background: var(--c-bg-soft); padding: 11px; border-radius: var(--r-sm); margin-bottom: 20px; }
.engineer-profile { display: flex; gap: 20px; align-items: flex-start; }
.engineer-profile__photo img { width: 280px; max-width: 40%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-1); }
.engineer-profile__role   { color: var(--c-text-mute); font-size: 17px; }
.engineer-profile__name   { color: var(--c-navy-deep); font-size: 34px; font-weight: 900; }
.engineer-profile__desc   { color: var(--c-text-soft); font-size: 19px; line-height: 1.6; margin-top: 7px; }
.engineer-values { background: var(--c-bg-soft); border-radius: var(--r-sm); padding: 15px 19px; margin-top: 20px; }
.engineer-values__title { color: var(--c-navy-deep); font-size: 19px; font-weight: 700; margin-bottom: 11px; }
.engineer-card--desc { display: flex; flex-direction: column; justify-content: center; }
.engineer-card--desc .engineer-profile__desc { margin-top: 0; }
.engineer-card--desc .engineer-values { margin-top: 20px; }
.engineer-card--full { grid-column: 1 / -1; }

.support-icons { display: flex; justify-content: space-around; margin-bottom: 22px; }
.support-icon { text-align: center; }
.support-icon__box { width: 76px; height: 76px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.support-icon__label { font-size: 18px; color: #333; font-weight: 600; line-height: 1.3; }

.spot-section { background: var(--c-bg-blue-soft); padding: 0 22px 20px; }
.spot-box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 26px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: start; box-shadow: var(--sh-1); }
.spot-box__left { display: flex; gap: 15px; align-items: flex-start; }
.spot-box__label { color: var(--c-text-soft); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.spot-box__title { color: var(--c-navy-deep); font-size: 29px; font-weight: 900; margin-bottom: 8px; }
.spot-box__desc  { color: var(--c-text-soft); font-size: 19px; line-height: 1.55; }
.spot-box__center { border-left: 1px solid var(--c-border); padding-left: 22px; text-align: center; }
.spot-box__price-label { color: var(--c-text-mute); font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.spot-box__price { color: var(--c-red); font-weight: 900; line-height: 1; }
.spot-box__price-num  { font-size: 42px; }
.spot-box__price-unit { font-size: 22px; }
.spot-box__price-note { color: var(--c-text-mute); font-size: 15px; margin-top: 8px; }
.spot-box__right { padding-left: 10px; }
.spot-box__list-title { color: var(--c-navy-deep); font-size: 19px; font-weight: 700; margin-bottom: 13px; }
.spot-box__list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }

/* === Maintenance Plans === */
.plans-section { background: var(--c-bg-blue-soft); padding: 0 22px 20px; }
.plans-section__title { color: var(--c-navy-deep); font-size: 27px; font-weight: 700; text-align: center; margin-bottom: 22px; }
.plan-card { background: #fff; border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.plan-card:hover { transform: translateY(-5px); box-shadow: var(--sh-4); }
.plan-card--blue   { border: 2px solid var(--c-blue); }
.plan-card--green  { border: 2px solid var(--c-green-mid); position: relative; }
.plan-card--orange { border: 2px solid var(--c-orange); }
.plan-card__head { color: #fff; font-size: 26px; font-weight: 700; text-align: center; padding: 17px; }
.plan-card__head--blue   { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep)); }
.plan-card__head--green  { background: linear-gradient(135deg, var(--c-green-mid), #266b43); }
.plan-card__head--orange { background: linear-gradient(135deg, var(--c-orange), var(--c-orange-deep)); }
.plan-card__popular { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #f0d888, var(--c-gold)); color: #7a5600; font-size: 15px; font-weight: 700; border-radius: 50%; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; z-index: 1; box-shadow: var(--sh-2); border: 3px solid #fff; }
.plan-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.plan-card__period { color: var(--c-text-mute); font-size: 17px; margin-bottom: 4px; }
.plan-card__price { font-weight: 900; line-height: 1; }
.plan-card__price-num  { font-size: 48px; }
.plan-card__price-unit { font-size: 22px; }
.plan-card__price-tax { color: var(--c-text-mute); font-size: 17px; margin-bottom: 13px; }
.plan-card__desc { color: var(--c-text-soft); font-size: 19px; margin-bottom: 15px; }
.plan-card__plus-label { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.plan-card__sub-box { border-radius: var(--r-sm); padding: 13px 15px; margin-bottom: 15px; }
.plan-card__sub-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.plan-card__sub-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.plan-card__sub-item { display: flex; align-items: center; gap: 7px; color: #333; font-size: 16px; }
.plan-card__recommend { background: var(--c-bg-blue-soft); border-radius: var(--r-md); padding: 15px; font-size: 17px; color: var(--c-text-soft); line-height: 1.5; margin-top: auto; }
.plan-card__recommend strong { color: var(--c-navy-deep); }

.shikatsukanshu { background: var(--c-bg-blue-soft); padding: 0 22px 28px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; }
.shikatsukanshu__box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); }
.shikatsukanshu__title { color: var(--c-navy-deep); font-size: 23px; font-weight: 700; margin-bottom: 13px; }
.shikatsukanshu__desc  { color: var(--c-text-soft); font-size: 19px; line-height: 1.65; margin-bottom: 20px; }
.shikatsukanshu__warning { background: #fdecec; border: 1px solid #f0b0b0; border-radius: var(--r-md); padding: 15px; color: #c02020; font-size: 19px; font-weight: 700; text-align: center; }
.abnormal-flow { display: flex; align-items: center; justify-content: center; gap: 12px 16px; flex-wrap: wrap; overflow-x: visible; }
.abnormal-step { text-align: center; flex: none; }
.abnormal-step__label { font-size: 27px; color: #333; margin-top: 6px; }
.abnormal-arrow { color: var(--c-green); font-size: 22px; flex: none; }

/* === Flow Steps === */
.flow-section { background: var(--c-bg-soft); padding: 14px 22px 24px; }
.flow-steps { display: flex; align-items: stretch; gap: 8px; }
.flow-step { flex: 1; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.flow-step:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.flow-step__top { text-align: center; padding: 17px 12px 0; flex: 1; }
.flow-step__num { width: 50px; height: 50px; background: linear-gradient(135deg, var(--c-green), var(--c-green-deep)); border-radius: 50%; color: #fff; font-size: 24px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 11px; box-shadow: var(--sh-1); }
.flow-step__title { color: var(--c-navy-deep); font-size: 19px; font-weight: 700; line-height: 1.3; min-height: 50px; }
.flow-step__desc  { color: var(--c-text-soft); font-size: 16px; line-height: 1.5; padding: 10px 6px 13px; }
.flow-step__photo { height: 105px; overflow: hidden; }
.flow-step__photo img { width: 100%; height: 100%; object-fit: cover; }
.flow-arrow { display: flex; align-items: center; color: var(--c-green); font-size: 30px; flex: none; }
.support-bar { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-top: 16px; padding: 20px 28px; display: flex; align-items: center; gap: 26px; box-shadow: var(--sh-1); }
.support-bar__text { flex: 1; }
.support-bar__title { color: var(--c-navy-deep); font-size: 24px; font-weight: 700; }
.support-bar__desc  { color: var(--c-text-soft); font-size: 19px; }
.support-bar__icons { display: flex; gap: 32px; }
.support-bar__icon { text-align: center; }
.support-bar__icon-label { font-size: 17px; color: #333; margin-top: 5px; line-height: 1.3; }

/* === FAQ === */
.faq-section { background: #fff; padding: 20px 22px; }
.faq-intro { text-align: center; color: var(--c-text-soft); font-size: 20px; margin-bottom: 26px; }
.faq-item { border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: 13px; overflow: hidden; transition: box-shadow .25s var(--ease); }
.faq-item.open { box-shadow: var(--sh-2); }
.faq-q {
  display: flex; align-items: center; gap: 15px;
  padding: 19px 22px; cursor: pointer;
  background: var(--c-bg-soft); user-select: none;
  border: none; width: 100%; text-align: left; font-family: inherit;
  transition: background 0.15s;
}
.faq-q:hover { background: #eef0f4; }
.faq-q__icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--c-green), var(--c-green-deep)); border-radius: 50%; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.faq-q__text { flex: 1; color: var(--c-navy-deep); font-size: 21px; font-weight: 600; }
.faq-q__toggle { color: var(--c-green); font-size: 30px; font-weight: 300; flex: none; width: 30px; text-align: center; transition: transform 0.25s var(--ease); }
.faq-item.open .faq-q__toggle { transform: rotate(45deg); }
.faq-a {
  display: none; padding: 22px 22px 26px;
  background: #fff; border-top: 1px solid var(--c-border-soft);
  gap: 15px; align-items: flex-start;
}
.faq-item.open .faq-a { display: flex; }
.faq-a__icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--c-orange), var(--c-orange-deep)); border-radius: 50%; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.faq-a__text { color: #444; font-size: 20px; line-height: 1.75; }

/* === Contact Form === */
.form-section { background: #fff; padding: 22px 26px 32px; }
.form-section__title { color: var(--c-navy-deep); font-size: 22px; font-weight: 700; margin-bottom: 7px; }
.form-section__desc  { color: var(--c-text-soft); font-size: 20px; line-height: 1.7; margin-bottom: 20px; }
.form-box { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-1); }
.form-group { margin-bottom: 21px; }
.form-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.form-label__text { color: var(--c-navy-deep); font-size: 20px; font-weight: 600; }
.form-label__note { color: var(--c-text-mute); font-size: 17px; font-weight: 400; }
.form-control {
  border: 1px solid #d0d4dc; border-radius: var(--r-sm);
  padding: 14px 18px; font-size: 18px; width: 100%;
  font-family: inherit; color: #222;
  transition: border-color 0.15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(6,99,79,0.14); }
textarea.form-control { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-radio-row { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 25px; }
.form-radio { display: flex; align-items: center; gap: 9px; cursor: pointer; color: #333; font-size: 20px; }
.form-radio input { accent-color: var(--c-green); width: 18px; height: 18px; }
.btn-submit {
  display: block; width: 320px; margin: 0 auto;
  background: linear-gradient(135deg, var(--c-red), var(--c-red-deep)); color: #fff; font-size: 26px; font-weight: 700;
  padding: 21px 0; border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; box-shadow: var(--sh-cta);
  transition: box-shadow .2s var(--ease), transform .15s var(--ease), filter .2s var(--ease);
}
.btn-submit:hover { filter: brightness(1.06); box-shadow: var(--sh-cta-hover); transform: translateY(-2px); }
.btn-submit:active { transform: scale(0.98); }

/* === Footer === */
.footer { background: #16284f; color: #9aaccc; text-align: center; padding: 34px; font-size: 19px; }

/* ==========================================================
   FULL-WIDTH LAYOUT: 背景の帯は1920pxで頭打ち・コンテンツはvar(--container)幅で中央寄せ
   ========================================================== */

/* 背景（帯）の最大幅：1920pxを超える超ワイド画面では帯自体も中央寄せで頭打ちにする */
.ranking-section,
.options-section,
.greeting-intro,
.greeting-cols,
.greeting-flow-section,
.price-intro,
.price-cards-wrap,
.cost-factors,
.sysupdate,
.sysupdate-points,
.cable-survey,
.customer-section,
.smart-places,
.smart-features,
.smart-internet-row,
.cases-section,
.warranty-section,
.engineer-section,
.spot-section,
.plans-section,
.shikatsukanshu,
.flow-section,
.faq-section,
.form-section,
.showroom-details,
.showroom-extras,
.smart-hero,
.maintenance-hero,
.showroom-hero,
.footer {
  max-width: var(--band) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* .results-hero は width:100vw + transform の独自breakoutで全幅化しているため対象外 */

/* 22px 最小パディングのセクション（コンテンツ幅 var(--container) で中央寄せ）
   ※後方に同じセレクタのpaddingショートハンド指定が複数存在するため、
     確実に勝たせるよう !important を付与 */
.ranking-section,
.options-section,
.greeting-intro,
.greeting-cols,
.greeting-flow-section,
.price-intro,
.price-cards-wrap,
.cost-factors,
.sysupdate,
.sysupdate-points,
.cable-survey,
.customer-section,
.smart-places,
.smart-features,
.smart-internet-row,
.cases-section,
.warranty-section,
.engineer-section,
.spot-section,
.plans-section,
.shikatsukanshu,
.flow-section,
.faq-section {
  padding-left: max(22px, calc((100% - var(--container)) / 2)) !important;
  padding-right: max(22px, calc((100% - var(--container)) / 2)) !important;
}

/* 26px 最小パディングのセクション */
.form-section {
  padding-left: max(26px, calc((100% - var(--container)) / 2)) !important;
  padding-right: max(26px, calc((100% - var(--container)) / 2)) !important;
}

/* 30px 最小パディングのセクション */
.showroom-details,
.showroom-extras,
.smart-hero,
.maintenance-hero {
  padding-left: max(30px, calc((100% - var(--container)) / 2)) !important;
  padding-right: max(30px, calc((100% - var(--container)) / 2)) !important;
}

/* .results-hero は width:100vw breakoutのため、containing blockではなくビューポート基準(100vw)で中央寄せ量を計算 */
.results-hero {
  padding-left: max(30px, calc((100vw - var(--container)) / 2)) !important;
  padding-right: max(30px, calc((100vw - var(--container)) / 2)) !important;
}

/* 34px 最小パディングのセクション */
.showroom-hero {
  padding-left: max(34px, calc((100% - var(--container)) / 2)) !important;
  padding-right: max(34px, calc((100% - var(--container)) / 2)) !important;
}

/* フッター（フルブリード） */
.footer {
  padding-left: max(30px, calc((100% - var(--container)) / 2)) !important;
  padding-right: max(30px, calc((100% - var(--container)) / 2)) !important;
}

/* セクションヘッダーはページ幅100% (sec-headはpageの中でmax-width:100%なので自然に全幅) */

/* ==========================================================
   RESPONSIVE — Tablet Large  (≤ 1400px)
   ========================================================== */
@media (max-width: 1400px) {
  .hero-main__title { font-size: 54px; }
  .results-hero__count-num { font-size: 60px; }
  .results-hero__count-label { font-size: 40px; }
  .results-hero__photo { width: 340px; }
  .results-hero__photo img { height: 260px; }
  .smart-hero__title { font-size: 46px; }
  .maintenance-hero__title { font-size: 38px; }
  .price-card__price-num { font-size: 50px; }

  /* 1100〜1400px：3カラムのままだとカード内の2列チェックリストが
     文字数の多い項目で折り返して崩れるため、1列に変更 */
  .price-card__contents { grid-template-columns: 1fr; }
  .plan-card__sub-list { grid-template-columns: 1fr; }

  /* 異常発生時の流れ：アイコン+ラベルが横並びで幅を圧迫するため縮小 */
  .abnormal-flow { gap: 8px; }
  .abnormal-step__label { font-size: 19px; margin-top: 4px; }
}

/* ==========================================================
   RESPONSIVE — Tablet  (≤ 1100px)
   ========================================================== */
@media (max-width: 1100px) {
  body { font-size: 16px; }
  .sec-head__title { font-size: 24px; letter-spacing: 3px; }
  .sec-head__line { width: 100px; }
  .hero-main__sub   { font-size: 22px; }
  .hero-main__title { font-size: 40px; }
  .hero-main__desc1 { font-size: 22px; }
  .hero-main__desc2 { font-size: 17px; }
  .hero-main__bottom { flex-direction: column; align-items: flex-start; }
  .hero-thumb-row { align-self: flex-end; }

  .grid-3 { gap: 14px; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }

  .ranking-col-head { font-size: 19px; }
  .rank-item__title { font-size: 20px; }

  .options-section__title { font-size: 28px; }
  .option-card__title { font-size: 18px; }

  .price-intro__title { font-size: 36px; }
  .price-card__price-num { font-size: 42px; }
  .price-cards-wrap .grid-3 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

  .sysupdate__title { font-size: 32px; }
  .sysupdate__flow { flex-direction: column; }
  .sysupdate__arrow { justify-content: center; transform: rotate(90deg); }

  .cable-survey__box { flex-direction: column; }
  .cable-survey__text { width: 100%; }

  .showroom-hero__title { font-size: 38px; }
  .showroom-hero__badge { width: 110px; height: 110px; }
  .showroom-hero__badge-num { font-size: 32px; }

  .smart-hero { flex-wrap: wrap; }
  .smart-hero__photo { display: none; }
  .smart-hero__title { font-size: 40px; }
  .smart-features__box { grid-template-columns: repeat(3, 1fr); }
  .smart-internet-row { grid-template-columns: 1fr; }

  .results-hero { flex-direction: column; }
  .results-hero__photo { width: 100%; }
  .results-hero__photo img { width: 100%; height: 260px; }
  .results-hero__count-num { font-size: 52px; }
  .cases-section > div:first-child { grid-template-columns: 1fr; }

  .maintenance-hero__title { font-size: 32px; }
  .warranty-section .grid-3 { grid-template-columns: 1fr 1fr; }
  .engineer-section { grid-template-columns: 1fr; }
  .plans-section .grid-3 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .shikatsukanshu { grid-template-columns: 1fr; }

  .flow-step { flex: 1 1 calc(33% - 10px); min-width: 160px; }
  .flow-arrow { display: none; }
  .support-bar { flex-direction: column; align-items: flex-start; }

  .faq-q__text { font-size: 18px; }
  .btn-submit { width: 260px; font-size: 22px; }
}

/* ==========================================================
   RESPONSIVE — Mobile  (≤ 768px)
   ========================================================== */
@media (max-width: 768px) {
  body { font-size: 15px; }

  .mobile-only-break { display: block; }

  .sec-head { padding: 15px 10px; gap: 12px; }
  .sec-head__line { width: 40px; flex-shrink: 0; }
  .sec-head__title { font-size: 18px; letter-spacing: 2px; white-space: normal; text-align: center; }
  .sec-head__title-full { display: none; }
  .sec-head__title-sp { display: inline; }

  .page { overflow-x: hidden; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: 1fr 1fr; }
  .grid-6 { grid-template-columns: 1fr 1fr; }

  .hero-main { padding: 24px 16px 22px; min-height: auto; }
  .hero-main__sub   { font-size: 16px; }
  .hero-main__title { font-size: 28px; }
  .hero-main__desc1 { font-size: 16px; }
  .hero-main__desc2 { font-size: 14px; }
  .hero-feature-cards { flex-direction: row; gap: 8px; }
  .hero-feature-card { max-width: calc(50% - 4px); flex: 1; padding: 10px 12px; }
  .hero-thumb-row { display: none; }

  .ranking-section .grid-3 { grid-template-columns: 1fr; }
  .rank-item__title { font-size: 18px; }

  .options-section { padding: 22px 14px 26px; }
  .options-section__title { font-size: 20px; }

  .price-intro { padding: 22px 14px 16px; }
  .price-intro__title { font-size: 22px; }
  .price-intro__sub   { font-size: 16px; }
  .price-cards-wrap .grid-3 { grid-template-columns: 1fr; }
  .price-card__price-num { font-size: 38px; }
  .cost-factors .grid-5 { grid-template-columns: 1fr 1fr; }

  .sysupdate__box { padding: 20px 16px; }
  .sysupdate__title { font-size: 22px; }
  .sysupdate-points .grid-3 { grid-template-columns: 1fr; }
  .cable-survey__flow { flex-direction: column; }

  .showroom-hero { padding: 20px 16px; }
  .showroom-hero__title { font-size: 26px; }
  .showroom-hero__badge { width: 80px; height: 80px; }
  .showroom-hero__badge-num { font-size: 24px; }
  .showroom-hero__badge-text { font-size: 13px; white-space: nowrap; }
  .showroom-photos { grid-template-columns: 1fr 1fr; }
  .showroom-features { grid-template-columns: 1fr; }

  .customer-section .grid-3 { grid-template-columns: 1fr; }
  .consult-box { flex-direction: column; }
  .consult-box__photo { width: 100%; }
  .consult-box__photo img { width: 100%; height: 200px; }

  .smart-hero { flex-direction: column; padding: 22px 16px; }
  .smart-hero__mockup { width: 100%; height: auto; flex-direction: row; padding: 10px; }
  .smart-hero__mockup-grid { display: flex; flex: 1; gap: 4px; }
  .smart-hero__mockup-grid img { flex: 1; height: 60px; }
  .smart-hero__title { font-size: 30px; }
  .smart-hero__subtitle { font-size: 18px; }
  .smart-hero__icons { flex-wrap: wrap; gap: 14px; }
  .smart-features__box { grid-template-columns: 1fr; gap: 0; padding: 12px; }
  .smart-places .grid-3 { grid-template-columns: 1fr; }
  .smart-internet-row { grid-template-columns: 1fr; }

  .results-hero { padding: 22px 16px; }
  .results-hero__count-num { font-size: 36px; }
  .results-hero__count-label { font-size: 24px; }
  .results-hero__count-unit  { font-size: 20px; }
  .results-hero__subtitle { font-size: 18px; }

  .maintenance-hero { flex-direction: column; padding: 20px 16px; }
  .maintenance-hero__photo { width: 100%; }
  .maintenance-hero__photo img { width: 100%; height: 180px; }
  .maintenance-hero__title { font-size: 21px; white-space: nowrap; }
  .warranty-section .grid-3 { grid-template-columns: 1fr; }
  .engineer-section { grid-template-columns: 1fr; }
  .engineer-profile__photo img { max-width: 100%; width: 100%; }
  .engineer-profile__desc { font-size: 15px; line-height: 1.5; }
  .spot-box { grid-template-columns: 1fr; }
  .spot-box__center { border-left: none; border-top: 1px solid var(--c-border); padding-left: 0; padding-top: 15px; }
  .spot-box__label { font-size: 15px; white-space: nowrap; }
  .plans-section .grid-3 { grid-template-columns: 1fr; }
  .shikatsukanshu { grid-template-columns: 1fr; padding: 0 12px 26px; }
  .abnormal-flow { overflow-x: auto; padding-bottom: 6px; }

  .flow-steps { flex-wrap: wrap; gap: 10px; }
  .flow-step { flex: 1 1 calc(50% - 10px); min-width: 150px; }
  .flow-arrow { display: none; }
  .support-bar { flex-direction: column; gap: 12px; padding: 18px; }
  .support-bar__icons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
  .support-bar__desc { font-size: 15px; line-height: 1.5; }

  .faq-q { padding: 15px 16px; }
  .faq-q__text { font-size: 15px; }
  .faq-a__text { font-size: 15px; }

  .form-section { padding: 20px 16px 30px; }
  .form-box { padding: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .form-radio-row { flex-direction: column; gap: 14px; }
  .btn-submit { width: 100%; font-size: 20px; }

  .divider-title__text { font-size: 20px; }
  .check-item { font-size: 15px; }
  /* hero-feature-card font縮小 */
  .hero-feature-card__title { font-size: 15px; }
  .hero-feature-card__desc  { font-size: 13px; }

  /* option-card テキスト縮小 */
  .option-card { padding: 10px 8px; }
  .option-card__title { font-size: 15px; margin-bottom: 4px; }
  .option-card__desc  { font-size: 12px; }

  /* showroom-details テキスト縮小 */
  .showroom-details { padding: 15px 16px 20px; }
  .showroom-details__title { font-size: 17px; margin-bottom: 8px; }
  .showroom-details__body  { font-size: 14px; line-height: 1.6; }
  .showroom-details__cta   { font-size: 15px; margin-top: 10px; }

  /* smart-icon アイコン縮小 */
  .smart-icon__circle { width: 46px; height: 46px; }
  .smart-icon__label  { font-size: 12px; }
  .smart-hero__icons  { gap: 10px; }

  /* smart-feat: 縦5行1列 横並びレイアウト */
  .smart-feat { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 0; border-bottom: 1px solid var(--c-border-soft); }
  .smart-feat:last-child { border-bottom: none; }
  .smart-feat__head { font-size: 14px; min-height: auto; margin-bottom: 0; flex: 0 0 auto; white-space: nowrap; }
  .smart-feat__desc { font-size: 13px; margin-top: 0; }
  .smart-feat__text { font-size: 12px; line-height: 1.4; }

  /* internet-box 高さ縮小 */
  .internet-box { padding: 13px 15px; }
  .internet-box__title { font-size: 15px; }
  .internet-box__desc  { font-size: 13px; line-height: 1.5; }
  .internet-box__icon  { width: 46px; height: 46px; }
  .internet-box__icon img { width: 28px; height: 28px; }

  /* results-hero テキスト縮小 */
  .results-hero__subtitle     { font-size: 15px; }
  .results-hero__desc         { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
  .results-hero__skytree-title { font-size: 20px; }
  .results-hero__skytree-sub  { font-size: 14px; }
  .results-hero__skytree-desc { font-size: 14px; }
  .results-hero__skytree-cta  { font-size: 15px; margin-top: 10px; }

  /* 導入実績カード 写真高さ縮小（赤枠余白カット） */
  .case-large__photo { height: 200px; }
  .case-large__body  { padding: 15px; }
  .case-large__desc  { font-size: 14px; margin-bottom: 8px; }
  .case-small__photo { height: 140px; }
  .case-small__body  { padding: 11px 13px; }
  .case-small__title { font-size: 16px; }
  .case-small__desc  { font-size: 13px; }

}

/* ==========================================================
   RANKING SECTION BG OVERLAY
   ========================================================== */
.ranking-section__bg-overlay { position: absolute; inset: 0; z-index: 0; }
.ranking-section__bg-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 0.10; }
.ranking-section > *:not(.ranking-section__bg-overlay) { position: relative; z-index: 1; }

/* ==========================================================
   SHOWROOM EXTRAS
   ========================================================== */
.showroom-extras { background: var(--c-bg-soft); padding: 18px 30px 26px; }

/* ==========================================================
   PRODUCTS BOX — 2/3 SIZE IMAGES
   ========================================================== */
.products-box .product-thumb img { width: 66%; }

/* ==========================================================
   GREETING SECTION (担当者の挨拶)
   ========================================================== */
.greeting-intro { background: #fff; padding: 36px 22px 24px; text-align: center; }
.greeting-intro__sub { color: var(--c-navy-deep); font-size: 26px; font-weight: 500; margin-bottom: 9px; }
.greeting-intro__title { color: var(--c-navy); font-size: 54px; font-weight: 900; line-height: 1.2; margin-bottom: 17px; }
.greeting-intro__highlight { display: inline; border-bottom: 7px solid var(--c-gold); padding-bottom: 2px; }
.greeting-intro__sub2 { color: var(--c-navy-deep); font-size: 28px; font-weight: 600; margin-bottom: 22px; }
.greeting-intro__divider { border: none; border-top: 1px solid var(--c-border); margin: 0 auto 22px; width: 85%; }
.greeting-intro__tagline { color: #333; font-size: 22px; }
.greeting-intro__tagline em { color: var(--c-red); font-style: normal; font-weight: 700; }

.greeting-cols { background: var(--c-bg-soft); padding: 8px 22px 24px; }
.greeting-card { background: #fff; border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-2); }
.greeting-card__head { padding: 16px 18px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; }
.greeting-card__head--navy   { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep)); }
.greeting-card__head--green  { background: linear-gradient(135deg, var(--c-green-mid), #266b43); }
.greeting-card__head--orange { background: linear-gradient(135deg, var(--c-orange), var(--c-orange-deep)); }
.greeting-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }

.greeting-dept-tag { display: inline-block; background: var(--c-bg-blue-soft); color: var(--c-green); font-size: 16px; font-weight: 700; padding: 6px 17px; border-radius: var(--r-sm); margin-bottom: 11px; }
.greeting-dept-name { color: var(--c-green); font-size: 58px; font-weight: 900; line-height: 1; margin-bottom: 9px; letter-spacing: 5px; }
.greeting-dept-sub { color: var(--c-text-soft); font-size: 18px; line-height: 1.55; margin-bottom: 19px; }
.greeting-dept-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 19px; }
.greeting-dept-photos img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--r-md); }
.greeting-dept-photos img:first-child { grid-column: 1 / -1; height: 160px; }
.greeting-dept-features { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 17px; margin-bottom: 23px; flex: 1; }
.greeting-dept-feature { display: flex; align-items: center; gap: 8px; color: #333; font-size: 18px; }

.greeting-person-photo { width: 100%; height: 280px; object-fit: cover; object-position: top; border-radius: var(--r-md); margin-bottom: 17px; }
.greeting-person-title { color: var(--c-navy-deep); font-size: 26px; font-weight: 700; line-height: 1.35; margin-bottom: 15px; text-align: center; }
.greeting-person-title2 { color: var(--c-navy-deep); font-size: 30px; font-weight: 700; line-height: 1.35; margin-bottom: 15px; text-align: center; }
.greeting-person-desc { color: #444; font-size: 18px; line-height: 1.7; margin-bottom: 19px; }
.greeting-values { background: #eef7f1; border-radius: var(--r-md); padding: 19px; margin-bottom: 19px; }
.greeting-values__title { color: var(--c-green-mid); font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 15px; }
.greeting-values__items { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.greeting-value-item { border: 1.5px solid var(--c-green-mid); color: var(--c-green-mid); font-size: 17px; font-weight: 600; padding: 10px 15px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 7px; }
.greeting-facilities { margin-bottom: 19px; }
.greeting-facilities__title { color: var(--c-navy-deep); font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 15px; }
.greeting-facilities__items { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 11px; }
.greeting-facility { text-align: center; font-size: 17px; color: #333; line-height: 1.3; }
.greeting-facility img { margin: 0 auto 8px; }

.greeting-se-profile { display: flex; gap: 19px; align-items: flex-start; margin-bottom: 19px; }
.greeting-se-photo { width: 170px; height: 210px; object-fit: cover; object-position: top; border-radius: var(--r-md); flex: none; }
.greeting-se-name { color: var(--c-navy-deep); font-size: 38px; font-weight: 900; }
.greeting-se-sub { color: var(--c-orange); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 9px 0 13px; }
.greeting-se-desc { color: #444; font-size: 16px; line-height: 1.7; }
.greeting-check-title { color: var(--c-navy-deep); font-size: 20px; font-weight: 700; margin-bottom: 13px; padding-bottom: 9px; border-bottom: 2px solid var(--c-orange); }
.greeting-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 23px; flex: 1; }
.greeting-check { display: flex; align-items: center; gap: 9px; color: #333; font-size: 19px; }
.greeting-service-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: auto; }
.greeting-service-icon { text-align: center; }
.greeting-service-icon__box { width: 72px; height: 72px; background: #fdf4e4; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 11px; }
.greeting-service-icon__label { font-size: 14px; color: #333; line-height: 1.4; font-weight: 500; }

.greeting-btn { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 19px; border: none; border-radius: var(--r-md); color: #fff; font-size: 22px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: auto; box-shadow: var(--sh-2); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); }
.greeting-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3); filter: brightness(1.05); }
.greeting-btn--navy  { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep)); }
.greeting-btn--green { background: linear-gradient(135deg, var(--c-green-mid), #266b43); }

/* ---- 新担当者挨拶デザイン 追加クラス ---- */
.greeting-dept1-icon-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
/* Card1 バランス調整 */
.greeting-card--dept1 .greeting-card__body {
  justify-content: space-between;
}
.greeting-dept1-icon-circle {
  width: 80px;
  height: 80px;
  border: 2.5px solid var(--c-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--c-bg-blue-soft);
}
.greeting-dept1-intro {
  color: #444;
  font-size: 17px;
  line-height: 1.8;
  flex: 1;
}
.greeting-dept1-note {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  border-top: 1px dashed #c5cbda;
  padding-top: 13px;
}
.greeting-person-photo2 {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-sm);
  display: block;
  margin-bottom: 6px;
}
.greeting-values__items--col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.greeting-values--orange { background: #fdf4e4; }
.greeting-values__title--orange { color: var(--c-orange); }
.greeting-value-item--orange { border-color: var(--c-orange); color: var(--c-orange); }
.greeting-se-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 15px;
}
.greeting-se-photo-main,
.greeting-se-photo-sub {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r-sm);
  display: block;
}
.greeting-se-title-new {
  color: var(--c-orange);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 8px;
}
.greeting-se-title-new2 {
  color: var(--c-orange);
  font-size: 31px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 8px;
  text-align: center;
}


.greeting-cols-2 { max-width: var(--container); margin: 0 auto; }
@media (max-width: 1100px) {
  .greeting-cols-2 { max-width: 100%; }
}

/* ===== Card2/SE 2カラムレイアウト ===== */
.greeting-card2-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 10px;
}
.greeting-card2-photo-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.greeting-card2-text-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}
.greeting-card2-photo-main {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: top;
  border-radius: 7px;
  display: block;
}
.greeting-card2-photo-sub {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-radius: 7px;
  display: block;
}
.greeting-card2-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.greeting-card2-top {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 10px;
  align-items: start;
}
.greeting-card2-top-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.greeting-flow-section { background: #fff; padding: 24px 22px 32px; }
.greeting-flow-section__title { text-align: center; color: var(--c-navy-deep); font-size: 25px; font-weight: 700; margin-bottom: 30px; }
.greeting-flow-steps { display: flex; align-items: stretch; gap: 7px; }
.greeting-flow-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 10px; background: var(--c-bg-blue-soft); border-radius: var(--r-md); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.greeting-flow-step:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.greeting-flow-arrow { display: flex; align-items: center; color: var(--c-green); font-size: 24px; flex: none; }
.greeting-flow-step__icon { width: 56px; height: 56px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; box-shadow: var(--sh-1); }
.greeting-flow-step__title { color: var(--c-green); font-size: 19px; font-weight: 700; margin-bottom: 5px; }
.greeting-flow-step__desc { color: var(--c-text-soft); font-size: 15px; line-height: 1.4; }
.greeting-flow-final { flex: 1.6; background: linear-gradient(135deg, var(--c-green), var(--c-green-deep)); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; padding: 22px 18px; text-align: center; box-shadow: var(--sh-2); }
.greeting-flow-final__text { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.6; }

@media (max-width: 1100px) {
  .greeting-intro__title { font-size: 38px; }
  .greeting-dept-name { font-size: 44px; }
  .greeting-cols .grid-3 { grid-template-columns: 1fr; }
  .greeting-flow-steps { flex-wrap: wrap; gap: 10px; }
  .greeting-flow-step { flex: 1 1 calc(33% - 10px); min-width: 150px; }
  .greeting-flow-arrow { display: none; }
  .greeting-flow-final { flex: 1 1 100%; }
}

@media (max-width: 768px) {
  .greeting-intro { padding: 30px 16px 20px; }
  .greeting-intro__title { font-size: 26px; }
  .greeting-intro__sub { font-size: 17px; }
  .greeting-intro__sub2 { font-size: 19px; }
  .greeting-intro__tagline { font-size: 15px; }
  .greeting-dept-name { font-size: 34px; }
  .greeting-flow-step { flex: 1 1 calc(50% - 10px); }
  .greeting-se-profile { flex-direction: column; }
  .greeting-se-photo { width: 100%; height: 240px; }
  .greeting-service-icons { grid-template-columns: repeat(2, 1fr); }
  .greeting-values__items { grid-template-columns: 1fr; }
  .greeting-se-photos { grid-template-columns: 1fr; }
  .greeting-se-photo-sub { display: none; }
  .greeting-dept1-icon-circle { width: 50px; height: 50px; }
  .showroom-extras { padding: 15px 16px 22px; }
}

.greeting-btn,
.greeting-btn:link,
.greeting-btn:visited,
.greeting-btn:hover,
.greeting-btn:active,
.greeting-btn:focus,
.greeting-btn a,
.greeting-btn a:link,
.greeting-btn a:visited,
.greeting-btn a:hover,
.greeting-btn a:active,
.greeting-btn a:focus,
.greeting-btn * {
  color: #fff !important;
  text-decoration: none !important;
}