@charset "UTF-8";


/* =========================
   0. ROOT VARIABLES & FONTS
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Barlow+Condensed:wght@500;600;700&display=swap');
:root {
    /* --- Brand palette --- */
    --cs-white: #ffffff;
    --cs-paper: #f6f9fc;
    --cs-cream: #fff7ef;
    --cs-ink: #1e2b3a;
    --cs-ink-soft: #4a5a6b;
    --cs-gray: #7a8a99;
    --cs-gray-light: #b9c6d2;
    --cs-line: #e3eaf1;

    --cs-orange: #f5821f;
    --cs-orange-deep: #d96a0a;
    --cs-orange-soft: #fff1e3;
    --cs-red: #e23a2e;
    --cs-red-deep: #c42b20;
    --cs-blue: #1b62b3;
    --cs-blue-deep: #0e4585;
    --cs-blue-soft: #eaf2fb;
    --cs-yellow: #ffc72c;
    --cs-navy: #0f2438;

    /* --- Effects --- */
    --cs-shadow: 0 10px 30px rgba(30, 43, 58, 0.08);
    --cs-shadow-md: 0 18px 44px rgba(30, 43, 58, 0.10);
    --cs-shadow-lg: 0 28px 70px rgba(30, 43, 58, 0.16);
    --cs-shadow-accent: 0 14px 34px rgba(226, 58, 46, 0.28);
    --cs-radius: 18px;
    --cs-radius-lg: 28px;
    --cs-ease: cubic-bezier(.22, .8, .28, 1);

    /* --- Fonts --- */
    --cs-round: 'Zen Maru Gothic', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", sans-serif;
    --cs-gothic: 'Zen Kaku Gothic New', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", sans-serif;
    --cs-en: 'Barlow Condensed', 'Zen Kaku Gothic New', sans-serif;
}

/* アニメーション可能なカスタムプロパティ（グラデーションの回転など） */
/*@property --cs-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}*/

/* =========================
   1. RESET & BASE
   ========================= */
body {
    background: var(--cs-white);
    color: var(--cs-ink);
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--cs-gothic);
    font-size: 16px;
    font-size: clamp(15px, 0.95vw, 17px);
    letter-spacing: .04em;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    counter-reset: number 0 counter-reset1 counter-reset2;
}
a, .post-content a {
    color: var(--cs-ink);
    transition: color .3s var(--cs-ease), opacity .3s var(--cs-ease);
}
.font-type2, .headline-font-type {
    font-family: var(--cs-round);
    font-feature-settings: "palt";
}
p, .post-content p {
    font-size: 0.95em;
    font-weight: 400;
    line-height: 2.0;
    letter-spacing: .04em;
}
.post-content ul {
    font-size: 0.95em;
    list-style: disc;
}
img { max-width: 100%; }

/* SP用改行 */
.sp_br { display: none; }
@media only screen and (max-width: 768px) {
    .sp_br { display: inline; }
}

/* 共通インナー */
.cs-inner {
    width: 88%;
    max-width: 1180px;
    margin: 0 auto;
}

/* セクション見出し（英字ラベル） */
.cs-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cs-en);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--cs-blue);
    margin: 0 0 14px;
    line-height: 1;
}
.cs-label__mark {
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cs-orange), var(--cs-yellow));
}
.cs-label--center { justify-content: center; }
.cs-label--light { color: var(--cs-yellow); }

.cs-head { margin-bottom: 54px; }
.cs-head--center { text-align: center; }
.cs-head__title {
    font-family: var(--cs-round);
    font-weight: 900;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.55;
    letter-spacing: .04em;
    color: var(--cs-ink);
    margin: 0 0 18px;
    text-wrap: balance;
}
.cs-head__text {
    font-size: 0.95em;
    color: var(--cs-ink-soft);
    margin: 0;
    line-height: 2;
}
.cs-head--center .cs-head__text { max-width: 760px; margin-inline: auto; }

/* マーカー（温かみのある下線） */
.cs-marker {
    position: relative;
    display: inline-block;
    color: var(--cs-orange-deep);
}
.cs-marker::after {
    content: '';
    position: absolute;
    left: -2px; right: -2px; bottom: 6px;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,199,44,.55), rgba(245,130,31,.35));
    z-index: -1;
}

/* =========================
   1-b. 共通ボタン
   ========================= */
.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border-radius: 999px;
    font-family: var(--cs-round);
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s var(--cs-ease), box-shadow .3s var(--cs-ease), background .3s var(--cs-ease), color .3s var(--cs-ease);
}
.cs-btn:hover { transform: translateY(-3px); }

/* 電話ボタン（主役） */
.cs-btn--tel {
    background: linear-gradient(120deg, var(--cs-red) 0%, var(--cs-orange) 100%);
    color: #fff !important;
    padding: 14px 30px 14px 20px;
    box-shadow: var(--cs-shadow-accent);
}
.cs-btn--tel:hover { box-shadow: 0 20px 44px rgba(226, 58, 46, 0.36); }
.cs-btn__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
}
.cs-btn__icon svg { width: 22px; height: 22px; }
.cs-btn__body { display: flex; flex-direction: column; line-height: 1.25; }
.cs-btn__body small {
    font-family: var(--cs-gothic);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    opacity: .92;
}
.cs-btn__body strong {
    font-family: var(--cs-en);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .04em;
}
.cs-btn--lg { padding: 18px 38px 18px 24px; }
.cs-btn--lg .cs-btn__body strong { font-size: 36px; }
.cs-btn--lg .cs-btn__icon { width: 52px; height: 52px; }

/* 補助ボタン */
.cs-btn--ghost {
    background: #fff;
    color: var(--cs-ink) !important;
    padding: 16px 28px;
    border: 2px solid var(--cs-line);
    font-size: 15px;
    box-shadow: var(--cs-shadow);
}
.cs-btn--ghost:hover {
    border-color: var(--cs-orange);
    color: var(--cs-orange-deep) !important;
}
.cs-btn--ghost em { font-style: normal; transition: transform .3s var(--cs-ease); }
.cs-btn--ghost:hover em { transform: translateX(4px); }
.cs-btn--lg.cs-btn--ghost { padding: 20px 34px; }

.cs-btn--outline-light {
    background: transparent;
    color: #fff !important;
    padding: 15px 30px;
    border: 2px solid rgba(255,255,255,.4);
    font-size: 15px;
}
.cs-btn--outline-light:hover {
    background: #fff;
    color: var(--cs-navy) !important;
    border-color: #fff;
}
.cs-btn--outline-light em { font-style: normal; transition: transform .3s var(--cs-ease); }
.cs-btn--outline-light:hover em { transform: translateX(4px); }

/* =========================
   2. パンくず & 下層サイネージ
   ========================= */
.breadcrumb-wrapper { background: none; }
.breadcrumb.inner {
    font-size: 0.78em;
    height: 44px;
    line-height: 44px;
    padding: 0;
    width: 88%;
    max-width: 1180px;
    color: var(--cs-gray);
    letter-spacing: .06em;
}
.breadcrumb a:hover { color: var(--cs-orange-deep); }

.signage {
    height: 320px;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.signage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(15, 36, 56, 0.78) 0%, rgba(27, 98, 179, 0.55) 60%, rgba(245, 130, 31, 0.35) 100%);
    z-index: 0;
}
.signage::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to top, var(--cs-white), transparent);
    z-index: 1;
}
.signage-content {
    position: relative;
    z-index: 2;
    width: 88%;
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 110px;
}
.signage-title.headline-font-type {
    font-family: var(--cs-round) !important;
    font-size: 2.5em !important;
    font-weight: 900;
    color: #fff !important;
    text-align: left;
    text-shadow: 0 4px 26px rgba(0,0,0,0.28) !important;
    letter-spacing: .08em;
    margin: 0 0 12px;
    position: relative;
    padding-left: 24px;
}
.signage-title.headline-font-type::before {
    content: '';
    position: absolute;
    left: 0; top: 12%;
    width: 6px; height: 76%;
    background: linear-gradient(180deg, var(--cs-yellow), var(--cs-orange));
    border-radius: 3px;
}
.signage-title-sub {
    color: rgba(255,255,255,0.88) !important;
    font-family: var(--cs-en);
    letter-spacing: .25em !important;
    font-size: 0.95em !important;
    padding-left: 24px;
}

@media only screen and (max-width: 1200px) {
    p, .post-content p { line-height: 1.9; }
}
@media only screen and (max-width: 768px) {
    .signage { height: 220px; }
    .signage-content { padding-top: 80px; }
    .signage-title.headline-font-type {
        font-size: 1.7em !important;
        margin-bottom: 8px;
    }
}

/* =========================
   3. HEADER & GLOBAL NAV
   ========================= */
.home .header::after { content: none; }

.header-bar {
    z-index: 50;
    box-shadow: none;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cs-line);
    transition: background .4s var(--cs-ease), border-color .4s var(--cs-ease), box-shadow .4s var(--cs-ease);
}
/* トップページはFVに重ねて透過 */
.home .header-bar {
    background: linear-gradient(to bottom, rgba(15,36,56,.55), rgba(15,36,56,0));
    border-bottom: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* スクロールで白ヘッダーへ */
.home header.scrolled .header-bar {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cs-line);
    box-shadow: 0 6px 24px rgba(30,43,58,.06);
}
.home header.scrolled .global-nav > ul > li > a { color: var(--cs-ink); }
.home header.scrolled .global-nav > ul > li > a:hover { color: var(--cs-orange-deep) !important; }

.logo-image {
    top: 20px;
    width: 280px;
    height: auto;
    left: 32px;
    position: absolute;
    transition: transform .3s var(--cs-ease);
}
.logo-image:hover { transform: scale(1.04); }
img.h_logo { width: 100%; }

.logo-text a { font-family: var(--cs-round) !important; letter-spacing: .06em; }
.home .logo-text a { color: #fff; }
.home header.scrolled .logo-text a { color: var(--cs-ink); }

.global-nav {
    padding-right: 24px;
    padding-left: 24px;
    height: 88px;
    background: transparent;
    border-radius: 0;
}
.header-bar-inner {
    width: 100%;
    max-width: unset;
    z-index: 100;
    padding: 0 32px;
    box-sizing: border-box;
}
.global-nav > ul > li > a {
    font-family: var(--cs-round);
    font-size: 15px;
    letter-spacing: .10em;
    font-weight: 700;
    line-height: 88px;
    padding: 0 18px;
    position: relative;
    text-align: center;
    transition: color .3s var(--cs-ease);
    color: var(--cs-ink);
}
.global-nav > ul > li > a span{
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 100%;
    line-height: 1;
    text-align: center;
}
.home .global-nav > ul > li > a { color: #fff; }
.global-nav a:hover { color: var(--cs-orange-deep) !important; }

/* 下線アニメーション */
.global-nav > ul > li > a::before,
.global-nav .current-menu-item > a::before {
    content: "";
    background: linear-gradient(90deg, var(--cs-orange), var(--cs-yellow));
    width: 0;
    height: 3px;
    left: 50%;
    bottom: 0;
    border-radius: 3px;
    position: absolute;
    transition: all .35s var(--cs-ease);
    transform: translateX(-50%);
    z-index: 1;
}
.global-nav > ul > li > a:hover::before { width: 68%; }
.global-nav .current-menu-item > a::before { width: 68%; }

.global-nav .sub-menu a {
    font-family: var(--cs-gothic);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--cs-navy) !important;
    transition: background .3s var(--cs-ease);
}
.global-nav .sub-menu li:last-of-type a { border-radius: 0 0 12px 12px; }
.global-nav .sub-menu a:hover {
    color: #fff !important;
    background: var(--cs-orange) !important;
}
.global-nav .sub-menu a::before {
    background-position: center right;
    left: auto;
    right: 15px;
}
.global-nav .current-menu-item > a { color: var(--cs-orange-deep); }

@media only screen and (max-width: 1200px) {
    .logo-image { top: 0; width: 210px; left: 0; }
    .header-bar { border-bottom: 0; }
    .home .header-bar { background: linear-gradient(to bottom, rgba(15,36,56,.62), rgba(15,36,56,0)); }
    .home header.scrolled .header-bar { background: rgba(255,255,255,.96); }
    .global-nav { padding: 0; border-radius: 0; height: auto; }
    .global-nav-button {
        border-left: 0;
        background: linear-gradient(135deg, var(--cs-red), var(--cs-orange));
        border-radius: 0 0 0 14px;
    }
    .global-nav-button:before { color: #fff; }
    .global-nav-button:hover:before { color: #fff; opacity: .85; }
    .global-nav > ul > li > a {
        line-height: 60px;
        background: var(--cs-navy);
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .global-nav > ul > li > a:hover { background: var(--cs-orange); }
    .global-nav > ul > li > a::before { display: none; }
    
    .header-bar-fixed .global-nav{
        left: 0;
    }
    .global-nav > ul > li > a{
        line-height: 50px;
        padding-bottom: 15px;
    }
    .global-nav > ul > li > a span{
        bottom: 15px;
    }
}

/* =========================
   4. HERO / FIRST VIEW (cs-hero)
   ========================= */
.top-slider-wrapper.cs-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    max-height: 960px;
    overflow: hidden;
    background: var(--cs-navy);
    isolation: isolate;
    display: flex;
    align-items: center;
}

/* --- 背景メディア --- */
.cs-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.cs-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: csFadeIn 1.4s var(--cs-ease) both;
}
.cs-hero__slides { position: absolute; inset: 0; }
.cs-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.6s var(--cs-ease);
    will-change: opacity, transform;
}
.cs-hero__slide.is-active {
    opacity: 1;
    animation: csKenBurns 9s ease-out forwards;
}

/* スクリム：写真の上でも文字が確実に読めるように */
.cs-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(15, 36, 56, .86) 0%, rgba(15, 36, 56, .60) 46%, rgba(15, 36, 56, .18) 78%, rgba(15, 36, 56, .30) 100%),
        linear-gradient(to top, rgba(15, 36, 56, .70) 0%, rgba(15, 36, 56, 0) 42%);
}
/* 温かみのオレンジグロー */
.cs-hero__glow {
    position: absolute;
    right: -12%;
    bottom: -18%;
    width: 62vw;
    height: 62vw;
    max-width: 900px; max-height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,130,31,.30) 0%, rgba(255,199,44,.12) 42%, transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    animation: csGlow 9s ease-in-out infinite alternate;
}

/* --- 受付中ステータス --- */
.cs-hero__status {
    position: absolute;
    top: 108px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
}
.is-ready .cs-hero__status { animation: csFadeDown .9s var(--cs-ease) .25s both; }
.cs-hero__status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: csPulse 2.2s infinite;
}
.cs-hero__status-text {
    font-family: var(--cs-round);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
}
.cs-hero__status-text i { font-style: normal; opacity: .5; margin: 0 4px; }

/* --- 本体 --- */
.cs-hero__inner {
    position: relative;
    z-index: 3;
    width: 88%;
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 40px;
}

.cs-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 8px 18px 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.2);
    font-family: var(--cs-round);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    opacity: 0;
}
.is-ready .cs-hero__eyebrow { animation: csFadeUp .9s var(--cs-ease) .4s both; }
.cs-hero__eyebrow-pin {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cs-yellow), var(--cs-orange));
    box-shadow: 0 0 14px rgba(245,130,31,.6);
    flex-shrink: 0;
}

.cs-hero__title {
    margin: 0 0 26px;
    font-family: var(--cs-round);
    font-weight: 900;
    font-size: clamp(34px, 5.4vw, 76px);
    line-height: 1.28;
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 0 6px 40px rgba(0,0,0,.35);
}
.cs-hero__line {
    display: block;
    overflow: hidden;
}
.cs-hero__line > span,
.cs-hero__line > em {
    display: inline-block;
    font-style: normal;
    transform: translateY(105%);
    opacity: 0;
}
.is-ready .cs-hero__line:nth-of-type(1) > span { animation: csLineUp 1.05s var(--cs-ease) .55s both; }
.is-ready .cs-hero__line:nth-of-type(2) > span { animation: csLineUp 1.05s var(--cs-ease) .70s both; }
.is-ready .cs-hero__line:nth-of-type(2) > em   { animation: csLineUp 1.05s var(--cs-ease) .82s both; }
.cs-hero__line > em {
    position: relative;
    color: var(--cs-yellow);
    padding-bottom: 4px;
}
.cs-hero__line > em::after {
    content: '';
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%;
    height: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--cs-orange), var(--cs-yellow));
    transform: scaleX(0);
    transform-origin: left;
}
.is-ready .cs-hero__line > em::after { animation: csUnderline .8s var(--cs-ease) 1.5s forwards; }

.cs-hero__lead {
    margin: 0 0 34px;
    max-width: 620px;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.0;
    letter-spacing: .04em;
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 18px rgba(0,0,0,.4);
    opacity: 0;
}
.is-ready .cs-hero__lead { animation: csFadeUp 1s var(--cs-ease) 1.0s both; }

/* --- CTA --- */
.cs-hero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
    opacity: 0;
}
.is-ready .cs-hero__cta { animation: csFadeUp 1s var(--cs-ease) 1.15s both; }

.cs-hero__tel {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 15px 34px 15px 20px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--cs-red) 0%, var(--cs-orange) 100%);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(226, 58, 46, .40);
    transition: transform .3s var(--cs-ease), box-shadow .3s var(--cs-ease);
}
.cs-hero__tel:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(226, 58, 46, .5);
}
.cs-hero__tel-icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.20);
    flex-shrink: 0;
}
.cs-hero__tel-icon svg { width: 24px; height: 24px; }
.cs-hero__tel-body { display: flex; flex-direction: column; line-height: 1.2; }
.cs-hero__tel-body small {
    font-family: var(--cs-gothic);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    opacity: .95;
}
.cs-hero__tel-body strong {
    font-family: var(--cs-en);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .04em;
}
/* 呼び出しリング */
.cs-hero__tel-ring {
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    border: 2px solid rgba(255, 199, 44, .8);
    opacity: 0;
    pointer-events: none;
    animation: csRing 2.8s var(--cs-ease) infinite;
}

.cs-hero__sub {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.38);
    color: #fff !important;
    font-family: var(--cs-round);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .3s var(--cs-ease), border-color .3s var(--cs-ease), color .3s var(--cs-ease);
}
.cs-hero__sub em { font-style: normal; transition: transform .3s var(--cs-ease); }
.cs-hero__sub:hover {
    background: #fff;
    border-color: #fff;
    color: var(--cs-navy) !important;
}
.cs-hero__sub:hover em { transform: translateX(4px); }

/* --- 対応トラブルチップ --- */
.cs-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
}
.is-ready .cs-hero__chips { animation: csFadeUp 1s var(--cs-ease) 1.3s both; }
.cs-hero__chips li {
    font-family: var(--cs-round);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 7px 16px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
}

/* --- スライド進行インジケーター --- */
.cs-hero__indicator {
    position: absolute;
    right: 42px;
    bottom: 56px;
    z-index: 4;
    display: flex;
    gap: 10px;
}
.cs-hero__bar {
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.28);
    overflow: hidden;
}
.cs-hero__bar i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cs-yellow), var(--cs-orange));
    transform: scaleX(0);
    transform-origin: left;
}
.cs-hero__bar.is-active i { animation: csBar 6s linear forwards; }

/* --- スクロール誘導 --- */
.cs-hero__scroll {
    position: absolute;
    left: 42px;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    opacity: 0;
}
.is-ready .cs-hero__scroll { animation: csFadeIn 1s var(--cs-ease) 1.6s both; }
.cs-hero__scroll-text {
    font-family: var(--cs-en);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    color: rgba(255,255,255,.8);
    writing-mode: vertical-rl;
}
.cs-hero__scroll-line {
    display: block;
    width: 1px;
    height: 68px;
    background: rgba(255,255,255,.3);
    position: relative;
    overflow: hidden;
}
.cs-hero__scroll-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 40%;
    background: linear-gradient(180deg, var(--cs-yellow), var(--cs-orange));
    animation: csScrollLine 2.2s var(--cs-ease) infinite;
}

/* --- スクロール駆動パララックス（対応ブラウザ・PCのみ） ---
   ※SPではFVが画面高より高くなり、view() の range 外で fill 状態に張り付いて
     コンテンツが消える事故が起きるため、意図的にPC限定にしている。
     透明度は動かさず transform のみに留めるのも同じ理由。 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 993px) {
        .cs-hero__inner {
            animation: csHeroParallax linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 90%;
        }
        .cs-hero__media {
            animation: csHeroMediaParallax linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }
    }
}
@keyframes csHeroParallax {
    to { transform: translateY(-60px); }
}
@keyframes csHeroMediaParallax {
    to { transform: translateY(50px) scale(1.04); }
}

/* --- HERO keyframes --- */
@keyframes csKenBurns {
    from { transform: scale(1.06); }
    to   { transform: scale(1.16); }
}
@keyframes csFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes csFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes csFadeDown {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes csLineUp {
    from { transform: translateY(105%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes csUnderline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes csPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@keyframes csRing {
    0%   { opacity: .9; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(1.14); }
    100% { opacity: 0;  transform: scale(1.14); }
}
@keyframes csGlow {
    from { transform: translate3d(0,0,0) scale(1); opacity: .85; }
    to   { transform: translate3d(-30px,-20px,0) scale(1.1); opacity: 1; }
}
@keyframes csBar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes csScrollLine {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

/* --- HERO レスポンシブ --- */
@media only screen and (max-width: 1200px) {
    .cs-hero__scroll { left: 24px; }
    .cs-hero__indicator { right: 24px; bottom: 44px; }
}
@media only screen and (max-width: 992px) {
    .cs-hero__status { top: 84px; }
    .cs-hero__scroll { display: none; }
}
@media only screen and (max-width: 768px) {
    /* SPでは block に戻す（status / indicator が静的配置になり、flexだと横並びに潰れるため） */
    .top-slider-wrapper.cs-hero {
        display: block;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 40px 0;
    }
    .cs-hero__scrim {
        background:
            linear-gradient(to bottom, rgba(15,36,56,.80) 0%, rgba(15,36,56,.62) 40%, rgba(15,36,56,.86) 100%);
    }
    .cs-hero__glow { width: 120vw; height: 120vw; right: -40%; bottom: -30%; }
    .cs-hero__status {
        position: static;
        transform: none;
        margin: 0 auto 18px;
        display: flex;
        width: fit-content;
        padding: 7px 16px;
    }
    .is-ready .cs-hero__status { animation: csFadeUp .9s var(--cs-ease) .25s both; }
    .cs-hero__inner { padding-top: 0; text-align: center; }
    .cs-hero__eyebrow { font-size: 11.5px; padding: 6px 14px 6px 10px; margin-bottom: 16px; }
    .cs-hero__eyebrow-pin { width: 14px; height: 14px; }
    .cs-hero__title {
        font-size: 30px;
        line-height: 1.42;
        margin-bottom: 18px;
    }
    .cs-hero__lead {
        font-size: 14px;
        line-height: 1.95;
        margin: 0 auto 26px;
    }
    .cs-hero__cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 22px;
    }
    .cs-hero__tel {
        justify-content: center;
        padding: 14px 22px;
    }
    .cs-hero__tel-body { align-items: flex-start; }
    .cs-hero__tel-body strong { font-size: 30px; }
    .cs-hero__sub { justify-content: center; padding: 13px 22px; font-size: 14px; }
    .cs-hero__chips { justify-content: center; }
    .cs-hero__chips li { font-size: 11.5px; padding: 6px 13px; }
    .cs-hero__indicator { position: static; justify-content: center; margin-top: 24px; }
    .cs-hero__bar { width: 38px; }
}

/* =========================
   5. INTRO セクション (cs-intro)
   ========================= */
.cs-intro {
    position: relative;
    background: var(--cs-white);
    padding: 110px 0 100px;
    overflow: hidden;
}
.cs-intro::before {
    content: '';
    position: absolute;
    top: -160px; right: -160px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cs-orange-soft) 0%, transparent 70%);
    z-index: 0;
}
.cs-intro::after {
    content: 'ROAD SERVICE';
    position: absolute;
    top: 28px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--cs-en);
    font-size: clamp(70px, 12vw, 170px);
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(30, 43, 58, 0.022);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
.cs-intro__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: start;
}
.cs-intro__title {
    font-family: var(--cs-round);
    font-weight: 900;
    font-size: clamp(25px, 2.4vw, 34px);
    line-height: 1.55;
    letter-spacing: .03em;
    margin: 0;
    color: var(--cs-ink);
    position: relative;
    z-index: 1;
}
.cs-intro__body p {
    margin: 0 0 22px;
    color: var(--cs-ink-soft);
}
.cs-intro__body p strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}
.cs-intro__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

/* --- 安心の3ポイント --- */
.cs-points {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 76px;
}
.cs-point {
    position: relative;
    background: var(--cs-white);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    padding: 44px 30px 34px;
    box-shadow: var(--cs-shadow);
    transition: transform .4s var(--cs-ease), box-shadow .4s var(--cs-ease), border-color .4s var(--cs-ease);
    overflow: hidden;
}
.cs-point figure{
    margin: -44px -30px 15px;
}
.cs-point figure img{
    aspect-ratio: 320/200;
    object-fit: cover;
}
.cs-point::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px;
    background: linear-gradient(90deg, var(--cs-orange), var(--cs-yellow));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--cs-ease);
}
.cs-point:hover {
    transform: translateY(-6px);
    box-shadow: var(--cs-shadow-md);
    border-color: transparent;
}
.cs-point:hover::before { transform: scaleX(1); }
.cs-point__num {
    position: absolute;
    top: 22px; right: 26px;
    font-family: var(--cs-en);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: rgba(27, 98, 179, .10);
}
.cs-point__icon {
    width: 62px; height: 62px;
    border-radius: 20px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    background: var(--cs-blue-soft);
    position: relative;
}
.cs-point__icon::after {
    content: '';
    width: 30px; height: 30px;
    background: var(--cs-blue);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.cs-point__icon--speed { background: var(--cs-orange-soft); }
.cs-point__icon--speed::after {
    background: var(--cs-orange-deep);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
.cs-point__icon--price::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}
.cs-point__icon--clock { background: #fff6d9; }
.cs-point__icon--clock::after {
    background: #b8860b;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.cs-point__title {
    font-family: var(--cs-round);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.6;
    margin: 0 0 12px;
    color: var(--cs-ink);
}
.cs-point__text {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}
.cs-point a.cs-point-button{
    padding: 6px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    font-family: var(--cs-round);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    text-decoration: none;
    background: #102437;
    display: inline-block;
    margin-top: 10px;
    transition: background .3s var(--cs-ease);
}
.cs-point a.cs-point-button:hover{
    background: var(--cs-blue-deep);
}

/* =========================
   6. SERVICE (cs-service)
   ========================= */
.cs-service {
    position: relative;
    background: var(--cs-paper);
    padding: 110px 0 110px;
    overflow: hidden;
}
.cs-service::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(27, 98, 179, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .8;
    pointer-events: none;
}
.cs-service > .cs-inner { position: relative; z-index: 1; }

.cs-service__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-service__item {
    background: var(--cs-white);
    border-radius: var(--cs-radius-lg);
    padding: 38px 30px 34px;
    box-shadow: var(--cs-shadow);
    transition: transform .4s var(--cs-ease), box-shadow .4s var(--cs-ease);
    position: relative;
    overflow: hidden;
}
.cs-service__item figure{
    margin: -38px -30px 15px;
}
.cs-service__item figure img{
    aspect-ratio: 320/220;
}
/*.cs-service__item:hover {
    transform: translateY(-6px);
    box-shadow: var(--cs-shadow-md);
}*/
.cs-service__icon {
    width: 68px; height: 68px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cs-orange-soft), #fff8ee);
    color: var(--cs-orange-deep);
    margin-bottom: 20px;
    transition: transform .4s var(--cs-ease);
}
.cs-service__item:hover .cs-service__icon { transform: rotate(-6deg) scale(1.06); }
.cs-service__icon svg { width: 34px; height: 34px; }
.cs-service__title {
    font-family: var(--cs-round);
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 12px;
    color: var(--cs-ink);
    letter-spacing: .02em;
}
.cs-service__text {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}
.cs-service__item--ask {
    background: linear-gradient(140deg, var(--cs-blue-deep), var(--cs-blue));
    color: #fff;
}
.cs-service__item--ask .cs-service__icon {
    background: rgba(255,255,255,.16);
    color: #fff;
}
.cs-service__item--ask .cs-service__title { color: #fff; }
.cs-service__item--ask .cs-service__text { color: rgba(255,255,255,.88); }
.cs-service__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: var(--cs-round);
    font-weight: 700;
    font-size: 14px;
    color: var(--cs-yellow) !important;
    text-decoration: none;
}
.cs-service__link em { font-style: normal; transition: transform .3s var(--cs-ease); }
.cs-service__link:hover em { transform: translateX(5px); }

/* --- 料金の考え方 --- */
/* =========================
   7. REASON (cs-reason)
   ========================= */
.cs-reason {
    background: var(--cs-white);
    padding: 110px 0 100px;
    position: relative;
    overflow: hidden;
}
.cs-reason__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    margin-bottom: 90px;
}
.cs-reason__item:last-child { margin-bottom: 0; }
.cs-reason__item--rev .cs-reason__img { order: 2; }
.cs-reason__item--rev .cs-reason__text { order: 1; }

.cs-reason__img {
    position: relative;
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    box-shadow: var(--cs-shadow-md);
    aspect-ratio: 4 / 3;
}
.cs-reason__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s var(--cs-ease);
}
.cs-reason__item:hover .cs-reason__img img { transform: scale(1.05); }
.cs-reason__no {
    position: absolute;
    left: 0; bottom: 0;
    font-family: var(--cs-en);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    padding: 14px 22px 12px;
    background: linear-gradient(120deg, var(--cs-red), var(--cs-orange));
    border-radius: 0 var(--cs-radius) 0 0;
}
.cs-reason__title {
    font-family: var(--cs-round);
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 900;
    line-height: 1.55;
    margin: 0 0 20px;
    color: var(--cs-ink);
    letter-spacing: .02em;
}
.cs-reason__text p {
    margin: 0 0 16px;
    color: var(--cs-ink-soft);
}
.cs-reason__text p:last-child { margin-bottom: 0; }
.cs-reason__text strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}

/* =========================
   8. MESSAGE (cs-message)
   ========================= */
.cs-message {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(140deg, var(--cs-navy) 0%, #17395a 55%, #1b4a72 100%);
    color: #fff;
    overflow: hidden;
}
.cs-message::before {
    content: '';
    position: absolute;
    left: 0%; bottom: 0%;
    width: 100%; height: 100%;
/*    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,130,31,.22) 0%, transparent 68%);    
    filter: blur(30px);*/
    background: url(img/25638878_m.jpg) left top no-repeat;
    opacity: 0.15;
}
.cs-message::after {
    content: 'MESSAGE';
    position: absolute;
    right: 4%; top: 40px;
    font-family: var(--cs-en);
    font-size: clamp(60px, 10vw, 150px);
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255,255,255,.05);
    pointer-events: none;
}
.cs-message__inner { position: relative; z-index: 1; max-width: 900px; }
.cs-message__title {
    font-family: var(--cs-round);
    font-size: clamp(24px, 2.9vw, 42px);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: .03em;
    margin: 0 0 32px;
    color: #fff;
}
.cs-message__body p {
    margin: 0 0 20px;
    color: rgba(255,255,255,.86);
    line-height: 2.1;
}
.cs-message__sign {
    margin: 32px 0 28px;
    font-family: var(--cs-round);
    font-size: 15px;
    letter-spacing: .06em;
    color: rgba(255,255,255,.8);
}
.cs-message__sign strong {
    font-size: 21px;
    font-weight: 900;
    color: #fff;
    margin-left: 4px;
}

/* =========================
   9. AREA (cs-area)
   ========================= */
.cs-area {
    background: var(--cs-paper);
    padding: 100px 0;
}
.cs-area__box {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 0;
    background: var(--cs-white);
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    box-shadow: var(--cs-shadow);
}
.cs-area__main {
    padding: 46px 40px;
    background: linear-gradient(140deg, var(--cs-orange) 0%, #f9a03f 100%);
    color: #fff;
}
.cs-area__sub { padding: 46px 40px; }
.cs-area__label {
    font-family: var(--cs-round);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .08em;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cs-area__main .cs-area__label { color: #fff; }
.cs-area__sub .cs-area__label { color: var(--cs-ink); }
.cs-area__label::before {
    content: '';
    width: 20px; height: 3px;
    border-radius: 3px;
    background: currentColor;
    opacity: .7;
}
.cs-area__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-area__tags li {
    font-family: var(--cs-round);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.42);
    color: #fff;
}
.cs-area__tags--sub li {
    font-size: 14px;
    background: var(--cs-blue-soft);
    border: 1px solid transparent;
    color: var(--cs-blue-deep);
}
.cs-area__note {
    margin: 22px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--cs-gray);
}

/* =========================
   10. FLOW (cs-flow)
   ========================= */
.cs-flow {
    background: var(--cs-white);
    padding: 100px 0 110px;
}
.cs-flow__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.cs-flow__item {
    position: relative;
    background: var(--cs-paper);
    border-radius: var(--cs-radius-lg);
    padding: 34px 26px 30px;
    transition: transform .4s var(--cs-ease), background .4s var(--cs-ease);
}
.cs-flow__item:hover { transform: translateY(-5px); background: var(--cs-cream); }
/* 矢印コネクタ */
.cs-flow__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -14px;
    width: 0; height: 0;
    transform: translateY(-50%);
    border-left: 10px solid var(--cs-orange);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    z-index: 2;
}
.cs-flow__step {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--cs-en);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--cs-orange-deep);
    margin-bottom: 12px;
}
.cs-flow__step b { font-size: 30px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.cs-flow__title {
    font-family: var(--cs-round);
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 10px;
    color: var(--cs-ink);
}
.cs-flow__item p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--cs-ink-soft);
    margin: 0;
}

/* =========================
   11. NEWS / BLOG (cs-topics)
   ========================= */
.cs-topics {
    background: var(--cs-paper);
    padding: 100px 0 110px;
}
.cs-topics__block + .cs-topics__block { margin-top: 90px; }

#index-news .top-news,
#index-blog .top-blog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: 0;
}
#index-news .article02,
#index-blog .article03 {
    width: 100% !important;
    margin: 0 !important;
    background: var(--cs-white);
    border-radius: var(--cs-radius);
    overflow: hidden;
    box-shadow: var(--cs-shadow);
    transition: transform .4s var(--cs-ease), box-shadow .4s var(--cs-ease);
}
#index-news .article02:hover,
#index-blog .article03:hover {
    transform: translateY(-5px);
    box-shadow: var(--cs-shadow-md);
}
#index-news .article02-thumbnail,
#index-blog .article03-thumbnail {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
#index-news .article02-thumbnail img,
#index-blog .article03-thumbnail img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
#index-news .article02-content,
#index-blog .article03-content {
    padding: 20px 22px 24px;
}
.article02-date, .article03-date {
    font-family: var(--cs-en);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--cs-orange-deep);
}
.article02-title, .article03-title {
    font-family: var(--cs-round);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.7;
    margin: 6px 0 0;
    color: var(--cs-ink);
}
.article02-title a { color: var(--cs-ink); }
.article02-title a:hover, #index-blog .article03:hover .article03-title { color: var(--cs-orange-deep); }
.article02-text {
    font-size: 13.5px !important;
    line-height: 1.85;
    color: var(--cs-ink-soft);
    margin-top: 10px;
}
.article03-category-item {
    display: inline-block;
    font-size: 11.5px;
    padding: 2px 10px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--cs-blue-soft);
    color: var(--cs-blue-deep);
}

/* 一覧ボタン */
.cs-topics .button { text-align: center; margin-top: 44px; }
.cs-topics .button a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 44px;
    border-radius: 999px;
    background: var(--cs-white);
    border: 2px solid var(--cs-line);
    font-family: var(--cs-round);
    font-weight: 700;
    font-size: 15px;
    color: var(--cs-ink);
    text-decoration: none;
    box-shadow: var(--cs-shadow);
    transition: all .3s var(--cs-ease);
}
.cs-topics .button a:hover {
    border-color: var(--cs-orange);
    color: var(--cs-orange-deep);
    transform: translateY(-3px);
}

/* =========================
   12. 最終CTA (cs-cta)
   ========================= */
.cs-cta {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(120deg, var(--cs-red) 0%, var(--cs-orange) 60%, #f9a53f 100%);
    color: #fff;
    overflow: hidden;
    text-align: center;
}
.cs-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(img/28466485_m.jpg) left top no-repeat;
    background-position: bottom 20% center;
    /*background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);*/
    opacity: .2;
}
.cs-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .7;
}
.cs-cta__inner { position: relative; z-index: 1; }
.cs-cta__catch {
    font-family: var(--cs-round);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 0 0 10px;
    color: rgba(255,255,255,.9);
}
.cs-cta__title {
    font-family: var(--cs-round);
    font-size: clamp(28px, 3.6vw, 50px);
    font-weight: 900;
    letter-spacing: .04em;
    margin: 0 0 20px;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0,0,0,.14);
}
.cs-cta__text {
    font-size: 15px;
    line-height: 2;
    color: rgba(255,255,255,.94);
    margin: 0 0 38px;
}
.cs-cta__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.cs-cta .cs-btn--tel {
    background: #fff;
    color: var(--cs-red-deep) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.cs-cta .cs-btn--tel .cs-btn__icon {
    background: linear-gradient(135deg, var(--cs-red), var(--cs-orange));
    color: #fff;
}
.cs-cta .cs-btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,.6);
    color: #fff !important;
    box-shadow: none;
}
.cs-cta .cs-btn--ghost:hover {
    background: #fff;
    color: var(--cs-red-deep) !important;
    border-color: #fff;
}
.cs-cta__note {
    margin: 26px 0 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.82);
}

/* =========================
   13. FOOTER (cs-footer)
   ========================= */
.cs-footer { background: var(--cs-navy); }

/* 現場実績スライダー */
.footer-gallery { position: relative; background: var(--cs-navy); padding: 70px 0 60px; }
.footer-gallery-title {
    font-family: var(--cs-round) !important;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: .06em;
    margin-bottom: 34px;
}
.article06 { position: relative; }
.article06 a { display: block; position: relative; overflow: hidden; }
.article06-thumbnail { width: 100%; display: block; aspect-ratio: 16/11; object-fit: cover; }
.article06 a:hover:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.article06-content {
    padding: 14px 16px;
    color: #fff;
}
.article06-title {
    font-family: var(--cs-round) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: #fff;
}
.article06-meta { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; }
.article06-date { font-family: var(--cs-en); letter-spacing: .08em; color: var(--cs-yellow); }

/* 会社情報 */
.cs-footer__contact {
    position: relative;
    padding: 80px 0 70px;
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.cs-footer__contact::before {
    content: '';
    position: absolute;
    right: -12%; top: -30%;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,130,31,.18) 0%, transparent 68%);
    filter: blur(30px);
    pointer-events: none;
}
.cs-footer__inner {
    position: relative;
    z-index: 1;
    width: 88%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 70px;
}
.cs-footer__logo { margin: 0 0 10px; }
.cs-footer__logo img { max-width: 190px; height: auto; }
.cs-footer__logo--text {
    font-family: var(--cs-round);
    font-weight: 900;
    color: #fff;
    letter-spacing: .06em;
    line-height: 1.4;
}
.cs-footer__catch {
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--cs-yellow);
    margin: 0 0 28px;
    font-weight: 500;
}
.cs-footer__dl { margin: 0 0 30px; }
.cs-footer__row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.cs-footer__row dt {
    font-family: var(--cs-round);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255,255,255,.55);
}
.cs-footer__row dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,.92);
}

.cs-footer__tel {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 30px 14px 18px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--cs-red), var(--cs-orange));
    color: #fff !important;
    text-decoration: none;
    box-shadow: var(--cs-shadow-accent);
    transition: transform .3s var(--cs-ease), box-shadow .3s var(--cs-ease);
}
.cs-footer__tel:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(226,58,46,.4); }
.cs-footer__tel-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}
.cs-footer__tel-icon svg { width: 22px; height: 22px; }
.cs-footer__tel-body { display: flex; flex-direction: column; line-height: 1.25; }
.cs-footer__tel-body small { font-size: 11px; font-weight: 500; letter-spacing: .06em; opacity: .92; }
.cs-footer__tel-body strong {
    font-family: var(--cs-en);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .04em;
}
.cs-footer__caution {
    margin: 12px 0 22px;
    font-size: 11.5px;
    color: rgba(255,255,255,.45);
}
.cs-footer__line-banner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 30px 14px 18px;
    border-radius: 999px;
    background: linear-gradient(120deg, #06c655, #00b900);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(6,198,85,.32);
    transition: transform .3s var(--cs-ease), box-shadow .3s var(--cs-ease);
    margin-bottom: 22px;
}
.cs-footer__line-banner:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(6,198,85,.4); }
.cs-footer__line-banner-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}
.cs-footer__line-banner-icon svg { width: 22px; height: 22px; }
.cs-footer__line-banner-body { display: flex; flex-direction: column; line-height: 1.25; }
.cs-footer__line-banner-body small { font-size: 11px; font-weight: 500; letter-spacing: .06em; opacity: .92; }
.cs-footer__line-banner-body strong {
    font-family: var(--cs-round);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
}
.cs-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    font-family: var(--cs-round);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff !important;
    text-decoration: none;
    transition: all .3s var(--cs-ease);
}
.cs-footer__links a:hover {
    background: #fff;
    color: var(--cs-navy) !important;
    border-color: #fff;
}

/* フッターナビ */
.cs-footer__nav {
    border-left: 1px solid rgba(255,255,255,.08);
    padding-left: 60px;
}
.cs-footer__nav-title {
    font-family: var(--cs-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .24em;
    color: var(--cs-yellow);
    margin: 0 0 20px;
}
ul.cs-footer__nav-list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 24px;
}
ul.cs-footer__nav-list li a {
    display: block;
    padding: 10px 0 10px 18px;
    font-family: var(--cs-round);
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none;
    position: relative;
    transition: color .3s var(--cs-ease), padding .3s var(--cs-ease);
}
ul.cs-footer__nav-list li a::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cs-orange);
    opacity: .65;
    transition: opacity .3s var(--cs-ease);
}
ul.cs-footer__nav-list li a:hover {
    color: var(--cs-yellow) !important;
    padding-left: 24px;
}
ul.cs-footer__nav-list li a:hover::before { opacity: 1; }
ul.cs-footer__nav-list .sub-menu { display: none; }
ul.cs-footer__nav-list li a span{
    display: none;
}
.cs-footer__area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-footer__area-list li {
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.72);
}

/* コピーライトバー */
.footer-bar01 {
    background: rgba(0,0,0,.28);
    border-top: 1px solid rgba(255,255,255,.06);
}
.footer-bar01-inner {
    width: 88%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
}
.copyright {
    margin: 0;
    font-family: var(--cs-en);
    font-size: 12.5px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.5);
}
.social-nav { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
#pagetop.pagetop a {
    font-family: var(--cs-en);
    font-size: 12px;
    letter-spacing: .18em;
    color: rgba(255,255,255,.6) !important;
    text-decoration: none;
}
#pagetop.pagetop a:hover { color: var(--cs-yellow) !important; }

/* =========================
   14. 固定CTA（SP下部バー / PC右下フローティング）
   ========================= */
.cs-fixed-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    display: flex;
    align-items: stretch;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity .4s var(--cs-ease), transform .4s var(--cs-ease), visibility .4s;
}
.cs-fixed-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cs-fixed-cta__tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px 12px 14px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--cs-red), var(--cs-orange));
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(226,58,46,.36);
    transition: transform .3s var(--cs-ease);
}
.cs-fixed-cta__tel:hover { transform: translateY(-3px); }
.cs-fixed-cta__icon {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}
.cs-fixed-cta__icon svg { width: 20px; height: 20px; }
.cs-fixed-cta__body { display: flex; flex-direction: column; line-height: 1.2; }
.cs-fixed-cta__body small { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; opacity: .92; }
.cs-fixed-cta__body strong {
    font-family: var(--cs-en);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
}
.cs-fixed-cta__mail {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 62px;
    border-radius: 20px;
    background: var(--cs-navy);
    color: #fff !important;
    text-decoration: none;
    box-shadow: var(--cs-shadow-md);
    transition: transform .3s var(--cs-ease), background .3s var(--cs-ease);
}
.cs-fixed-cta__mail:hover { transform: translateY(-3px); background: var(--cs-blue-deep); }
.cs-fixed-cta__mail .cs-fixed-cta__icon { background: none; width: 24px; height: 24px; }
.cs-fixed-cta__label { font-family: var(--cs-round); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }

@media only screen and (max-width: 768px) {
    .cs-fixed-cta {
        left: 0; right: 0; bottom: 0;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--cs-line);
        box-shadow: 0 -6px 24px rgba(30,43,58,.10);
        gap: 8px;
    }
    .cs-fixed-cta__tel {
        flex: 1;
        justify-content: center;
        padding: 10px 16px;
        border-radius: 14px;
    }
    .cs-fixed-cta__icon { width: 34px; height: 34px; }
    .cs-fixed-cta__body strong { font-size: 22px; }
    .cs-fixed-cta__mail { width: 66px; border-radius: 14px; }
    /* 固定バー分の余白 */
    body { padding-bottom: 0; }
    .footer-bar01-inner { padding-bottom: 84px; }
}

/* =========================
   15. スクロールアニメーション (fade01 / fade02)
   既存テーマは「fade01」要素にスクロール時「fade02」クラスを付与する。
   JSが動かない環境でも表示されるようフォールバックを併用。
   ========================= */
.fade01 {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s var(--cs-ease), transform 1s var(--cs-ease);
    will-change: opacity, transform;
}
.fade01.fade02,
.fade01.active,
.fade01.is-active,
.fade01.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes csFadeUpFallback {
        0%   { opacity: 0; transform: translateY(36px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .fade01 { animation: csFadeUpFallback 1.1s var(--cs-ease) .25s 1 both; }
    .cs-reason__item.fade01:nth-of-type(1) { animation-delay: .2s; }
    .cs-reason__item.fade01:nth-of-type(2) { animation-delay: .35s; }
    .cs-reason__item.fade01:nth-of-type(3) { animation-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
    .fade01 { opacity: 1; transform: none; animation: none; }
    .cs-hero__slide.is-active { animation: none; }
    .cs-hero__glow, .cs-hero__tel-ring, .cs-hero__scroll-line::after { animation: none; }
}

/* =========================
   16. RESPONSIVE
   ========================= */
@media only screen and (max-width: 1200px) {
    .cs-intro { padding: 90px 0 80px; }
    .cs-intro__inner { gap: 44px; }
    .cs-service { padding: 90px 0; }
    .cs-reason { padding: 90px 0 80px; }
    .cs-reason__item { gap: 40px; margin-bottom: 70px; }
    .cs-message { padding: 90px 0; }
    .cs-area, .cs-flow, .cs-topics { padding: 85px 0; }
    .cs-cta { padding: 85px 0; }
    .cs-footer__inner { gap: 44px; }
    .cs-footer__nav { padding-left: 40px; }
}
@media only screen and (max-width: 992px) {
    .cs-points { grid-template-columns: 1fr; gap: 18px; }
    .cs-service__list { grid-template-columns: repeat(2, 1fr); }
    .cs-flow__list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .cs-flow__item:nth-child(2)::after { display: none; }
    #index-news .top-news,
    #index-blog .top-blog { grid-template-columns: repeat(2, 1fr) !important; }
    .cs-area__box { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 768px) {
    body { font-size: 15px; }
    .cs-inner { width: 90%; }
    .cs-head { margin-bottom: 36px; }

    /* INTRO */
    .cs-intro { padding: 62px 0 60px; }
    .cs-intro__inner { grid-template-columns: 1fr; gap: 26px; }
    .cs-intro::after { top: 26px; font-size: 56px; }
    .cs-intro__cta { flex-direction: column; align-items: stretch; }
    .cs-intro__cta .cs-btn { justify-content: center; }
    .cs-points { margin-top: 48px; }
    .cs-point { padding: 34px 24px 28px; border-radius: 22px; }

    /* SERVICE */
    .cs-service { padding: 62px 0 66px; }
    .cs-service__list { grid-template-columns: 1fr; gap: 16px; }
    .cs-service__item { padding: 28px 24px 26px; border-radius: 22px; }
    .cs-service__icon { width: 56px; height: 56px; border-radius: 18px; margin-bottom: 16px; }
    .cs-service__icon svg { width: 28px; height: 28px; }

    /* REASON */
    .cs-reason { padding: 62px 0 60px; }
    .cs-reason__item {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 52px;
    }
    .cs-reason__item--rev .cs-reason__img { order: 0; }
    .cs-reason__item--rev .cs-reason__text { order: 0; }
    .cs-reason__no { font-size: 30px; padding: 10px 16px 8px; }

    /* MESSAGE */
    .cs-message { padding: 62px 0; }
    .cs-message::after { font-size: 52px; top: 20px; }
    .cs-message__sign strong { font-size: 18px; }

    /* AREA / FLOW */
    .cs-area, .cs-flow { padding: 62px 0; }
    .cs-area__main, .cs-area__sub { padding: 30px 24px; }
    .cs-area__tags li { font-size: 14px; padding: 7px 16px; }
    .cs-flow__list { grid-template-columns: 1fr; gap: 14px; }
    .cs-flow__item { padding: 24px 22px; border-radius: 20px; }
    .cs-flow__item:not(:last-child)::after {
        top: auto; right: auto;
        bottom: -12px; left: 50%;
        transform: translateX(-50%);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 10px solid var(--cs-orange);
        border-bottom: 0;
    }

    /* TOPICS */
    .cs-topics { padding: 62px 0 66px; }
    .cs-topics__block + .cs-topics__block { margin-top: 56px; }
    #index-news .top-news,
    #index-blog .top-blog { gap: 16px; }
    #index-news .article02-content,
    #index-blog .article03-content { padding: 14px 16px 18px; }
    .article02-title, .article03-title { font-size: 14.5px !important; }
    #infinitescroll .article03 {
        margin: 0 16px 16px 0;
        width: calc((100% - 16px) / 2);
    }
    #infinitescroll .article03:nth-of-type(even) { margin-right: 0; }

    /* CTA */
    .cs-cta { padding: 62px 0 70px; }
    .cs-cta__buttons { flex-direction: column; align-items: stretch; }
    .cs-cta__buttons .cs-btn { justify-content: center; }

    /* FOOTER */
    .footer-gallery { padding: 50px 0 40px; }
    .cs-footer__contact { padding: 56px 0 48px; }
    .cs-footer__inner { grid-template-columns: 1fr; gap: 44px; }
    .cs-footer__nav {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        padding-left: 0;
        padding-top: 36px;
    }
    .cs-footer__row { grid-template-columns: 80px 1fr; gap: 10px; }
    .cs-footer__tel { width: 100%; justify-content: center; box-sizing: border-box; }
    .cs-footer__line-banner { width: 100%; justify-content: center; box-sizing: border-box; }
    .cs-footer__links { flex-direction: column; }
    .cs-footer__links a { justify-content: center; }
    ul.cs-footer__nav-list { grid-template-columns: 1fr; margin-bottom: 32px; }
    .footer-bar01-inner {
        flex-direction: column;
        gap: 14px;
        padding-top: 20px;
    }
}

/* =========================
   17. 互換用残存セレクタ
   ========================= */
span.footer_tel_sub { display: none; }
.contact_sec span.footer_tel_sub2 { color: rgba(255,255,255,0.6); }

/* =====================================================
   下層ページ共通スタイル（cs-page 系）
   front-page.php と同じトークン／リズムで統一
   セクション背景は 白 → paper → 白 … の交互を基本とする
   ===================================================== */

/* =========================
   18. 下層ページ 共通ベース
   ========================= */
.cs-page {
    background: var(--cs-white);
    color: var(--cs-ink);
}
.cs-page * { box-sizing: border-box; }

/* 下層ページでは post-content 側の余白リセットを効かせる */
.cs-page section { position: relative; }
.post-content .cs-page p { margin: 0 0 18px; }
.post-content .cs-page p:last-child { margin-bottom: 0; }
.post-content .cs-page ul,
.post-content .cs-page ol { list-style: none; margin: 0; padding: 0; }

/* --- 導入リード（各下層ページ冒頭） --- */
.cs-page-lead {
    background: var(--cs-white);
    padding: 96px 0 82px;
    overflow: hidden;
    text-align: center;
}
.cs-page-lead::before {
    content: '';
    position: absolute;
    top: -180px; right: -180px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cs-orange-soft) 0%, transparent 70%);
    z-index: 0;
}
.cs-page-lead > .cs-inner { position: relative; z-index: 1; }
.cs-page-lead__title {
    font-family: var(--cs-round);
    font-weight: 900;
    font-size: clamp(24px, 2.7vw, 38px);
    line-height: 1.55;
    letter-spacing: .04em;
    color: var(--cs-ink);
    margin: 0 0 26px;
    text-wrap: balance;
}
.post-content .cs-page .cs-page-lead__text {
    max-width: 780px;
    margin: 0 auto;
    color: var(--cs-ink-soft);
    line-height: 2.05;
}
.page-id-30 .post-content .cs-page-lead__text {
    text-align: center;
}
.post-content .cs-page-lead__text strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}
.cs-page-lead__cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* =========================
   19. サービスページ (page-menu)
   ========================= */
.cs-page-menu {
    background: var(--cs-paper);
    padding: 100px 0 104px;
    overflow: hidden;
}
.cs-page-menu::after {
    content: 'SERVICE';
    position: absolute;
    top: 34px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--cs-en);
    font-size: clamp(70px, 12vw, 170px);
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(30, 43, 58, 0.03);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
.cs-page-menu > .cs-inner { position: relative; z-index: 1; }

/* --- メニュー1件 --- */
.cs-menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 48px;
    align-items: center;
    background: var(--cs-white);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    margin-bottom: 40px;
    transition: transform .4s var(--cs-ease), box-shadow .4s var(--cs-ease);
}
.cs-menu-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--cs-shadow-md);
}
.cs-menu-item--rev { direction: rtl; }
.cs-menu-item--rev > * { direction: ltr; }
.cs-menu-item__media {
    position: relative;
    min-height: 340px;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.cs-menu-item__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(15,36,56,.18), rgba(15,36,56,0) 60%);
}

/* --- 写真未受領時のアイコンパネル（撮影データが入ったら photo 指定で置き換わる） --- */
.cs-menu-item__media--graphic {
    display: grid;
    place-items: center;
    color: var(--cs-white);
    overflow: hidden;
}
.cs-menu-item__media--graphic::after { background: none; }
.cs-menu-item__media--graphic::before {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}
.cs-menu-item__media--graphic svg {
    position: relative;
    width: 96px; height: 96px;
    opacity: .95;
    filter: drop-shadow(0 6px 18px rgba(15,36,56,.25));
}
.cs-menu-item__media--a { background: linear-gradient(140deg, var(--cs-blue-deep), var(--cs-blue) 70%, #3b86d6); }
.cs-menu-item__media--b { background: linear-gradient(140deg, var(--cs-red-deep), var(--cs-red) 70%, #ef6a5c); }
.cs-menu-item__media--c { background: linear-gradient(140deg, #0d5c4f, #14806d 70%, #26a58c); }
.cs-menu-item__media--d { background: linear-gradient(140deg, #2b4a72, #4a7fb5 70%, #7fb0dd); }
.cs-menu-item__media--e { background: linear-gradient(140deg, var(--cs-orange-deep), var(--cs-orange) 70%, #f9a53f); }
.cs-menu-item__body { padding: 46px 48px 46px 0; }
.cs-menu-item--rev .cs-menu-item__body { padding: 46px 0 46px 48px; }
.cs-menu-item__no {
    display: inline-block;
    font-family: var(--cs-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--cs-blue);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--cs-blue-soft);
    margin-bottom: 16px;
}
.cs-menu-item__title {
    font-family: var(--cs-round);
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: .03em;
    color: var(--cs-ink);
    margin: 0 0 16px;
}
.cs-menu-item__title small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--cs-gray);
    margin-top: 8px;
}
.post-content .cs-menu-item__body p {
    color: var(--cs-ink-soft);
    font-size: 0.95em;
    line-height: 2;
    margin: 0 0 22px;
}
.post-content ul.cs-menu-item__list {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    border-radius: var(--cs-radius);
    background: var(--cs-paper);
}
.cs-menu-item__list li {
    position: relative;
    padding-left: 26px;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--cs-ink-soft);
}
.cs-menu-item__list li + li { margin-top: 8px; }
.cs-menu-item__list li::before {
    content: '';
    position: absolute;
    left: 2px; top: 10px;
    width: 13px; height: 9px;
    border-left: 2.5px solid var(--cs-orange);
    border-bottom: 2.5px solid var(--cs-orange);
    transform: rotate(-45deg);
    border-radius: 1px;
}

/* --- その他のご相談 --- */
.cs-menu-ask {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px 44px;
    border-radius: var(--cs-radius-lg);
    background: var(--cs-cream);
    border: 2px dashed rgba(245, 130, 31, .35);
    margin-top: 8px;
}
.cs-menu-ask__icon {
    flex: 0 0 auto;
    width: 68px; height: 68px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--cs-white);
    color: var(--cs-orange-deep);
    box-shadow: var(--cs-shadow);
}
.cs-menu-ask__icon svg { width: 34px; height: 34px; }
.cs-menu-ask__title {
    font-family: var(--cs-round);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.6;
    color: var(--cs-ink);
    margin: 0 0 10px;
}
.post-content .cs-menu-ask__body p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}

/* --- 料金の考え方 --- */
.cs-page-price {
    background: var(--cs-white);
    padding: 100px 0 100px;
    overflow: hidden;
}
.post-content .cs-page-price .cs-head__text strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}
.post-content ul.cs-price-factors {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 44px;
    padding: 0;
}
.cs-price-factor {
    position: relative;
    background: var(--cs-white);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    padding: 40px 28px 30px;
    box-shadow: var(--cs-shadow);
}
.cs-price-factor__no {
    position: absolute;
    top: 20px; right: 24px;
    font-family: var(--cs-en);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: rgba(27, 98, 179, .10);
}
.cs-price-factor__title {
    font-family: var(--cs-round);
    font-size: 18px;
    font-weight: 900;
    color: var(--cs-ink);
    margin: 0 0 12px;
}
.post-content .cs-price-factor p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}
.cs-price-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
    padding: 38px 44px;
    border-radius: var(--cs-radius-lg);
    background: var(--cs-paper);
    border: 1px solid var(--cs-line);
}
.post-content .cs-price-note p {
    flex: 1 1 420px;
    margin: 0;
    font-size: 0.95em;
    line-height: 2;
    color: var(--cs-ink-soft);
}
.post-content .cs-price-note p strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}

/* 下層ページの FLOW は背景を paper にして交互リズムを保つ */
.cs-page-flow { background: var(--cs-paper); }

/* =========================
   20. 代表ごあいさつ (page-greeting)
   ========================= */
.cs-grt-hero {
    background: var(--cs-white);
    padding: 96px 0 90px;
    overflow: hidden;
}
.cs-grt-hero::before {
    content: '';
    position: absolute;
    top: -160px; left: -180px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cs-blue-soft) 0%, transparent 70%);
    z-index: 0;
}
.cs-grt-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 56px;
    align-items: start;
}
.cs-grt-photo { position: relative; }
.cs-grt-photo__img {
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    box-shadow: var(--cs-shadow-lg);
    aspect-ratio: 4 / 5;
}
.cs-grt-photo__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* 代表写真が未受領のときのプレースホルダー */
.cs-grt-photo__img--placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    background: linear-gradient(140deg, var(--cs-paper), var(--cs-blue-soft));
    color: var(--cs-gray-light);
    box-shadow: var(--cs-shadow);
}
.cs-grt-photo__img--placeholder svg { width: 88px; height: 88px; }
.cs-grt-photo__img--placeholder span {
    font-family: var(--cs-round);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--cs-gray);
}
.cs-grt-photo__name {
    position: relative;
    margin: -34px 18px 0 auto;
    width: fit-content;
    background: var(--cs-white);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-md);
    padding: 18px 26px;
    text-align: right;
}
.cs-grt-photo__role {
    font-family: var(--cs-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--cs-blue);
    margin: 0 0 6px;
    line-height: 1;
}
.cs-grt-photo__name h3 {
    font-family: var(--cs-round);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
    color: var(--cs-ink);
    margin: 0;
}
.cs-grt-photo__name h3 small {
    display: block;
    font-family: var(--cs-en);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--cs-gray);
    margin-top: 6px;
}
.cs-grt-hero__title {
    font-family: var(--cs-round);
    font-weight: 900;
    font-size: clamp(23px, 2.5vw, 35px);
    line-height: 1.6;
    letter-spacing: .03em;
    color: var(--cs-ink);
    margin: 0 0 28px;
    text-wrap: balance;
}
.post-content .cs-grt-hero__text p {
    color: var(--cs-ink-soft);
    line-height: 2.1;
    margin: 0 0 22px;
}
.post-content .cs-grt-hero__text p strong,
.post-content .cs-grt-belief__text p strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}

/* --- 信条 --- */
.cs-grt-belief {
    background: var(--cs-paper);
    padding: 96px 0;
    overflow: hidden;
}
.cs-grt-belief::after {
    content: 'MESSAGE';
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--cs-en);
    font-size: clamp(70px, 12vw, 170px);
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(30, 43, 58, 0.03);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
.cs-grt-belief > .cs-inner { position: relative; z-index: 1; }
.cs-grt-belief__title {
    font-family: var(--cs-round);
    font-weight: 900;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.6;
    letter-spacing: .03em;
    color: var(--cs-ink);
    margin: 0 0 34px;
    text-align: center;
    text-wrap: balance;
}
.cs-grt-belief__title span { color: var(--cs-orange-deep); }
.cs-grt-belief__text {
    max-width: 900px;
    margin: 0 auto;
    background: var(--cs-white);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    padding: 48px 52px;
}
.post-content .cs-grt-belief__text p {
    color: var(--cs-ink-soft);
    line-height: 2.1;
    margin: 0 0 22px;
}
.post-content .cs-grt-belief__text p:last-child { margin-bottom: 0; }

/* --- お約束 --- */
.cs-grt-promise {
    background: var(--cs-white);
    padding: 96px 0 100px;
}
.cs-grt-promise .cs-points { margin-top: 0; }

/* --- 結び --- */
.cs-grt-closing {
    background: var(--cs-cream);
    padding: 88px 0 92px;
    text-align: center;
}
.post-content .cs-grt-closing__text {
    font-family: var(--cs-round);
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 500;
    line-height: 2.1;
    color: var(--cs-ink);
    margin: 0 0 22px;
}
.cs-grt-closing__sign {
    font-family: var(--cs-round);
    font-size: 16px;
    color: var(--cs-ink-soft);
    margin: 36px 0 28px !important;
}
.cs-grt-closing__sign strong {
    font-size: 22px;
    font-weight: 900;
    color: var(--cs-ink);
    letter-spacing: .06em;
}

/* =========================
   21. 会社概要 (page-shop)
   ========================= */
.cs-company {
    background: var(--cs-paper);
    padding: 100px 0;
    overflow: hidden;
}
.cs-company::after {
    content: 'COMPANY';
    position: absolute;
    top: 34px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--cs-en);
    font-size: clamp(70px, 12vw, 170px);
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(30, 43, 58, 0.03);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
.cs-company > .cs-inner { position: relative; z-index: 1; }
.cs-company__box {
    max-width: 940px;
    margin: 0 auto;
    background: var(--cs-white);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    padding: 20px 48px 26px;
}
.cs-company__row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--cs-line);
}
.cs-company__row:last-child { border-bottom: 0; }
.cs-company__row dt {
    display: flex;
    align-items: center;
    font-family: var(--cs-round);
    font-size: 15px;
    font-weight: 900;
    color: var(--cs-ink);
    letter-spacing: .06em;
    padding-left: 18px;
    position: relative;
}
.cs-company__row dt::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cs-orange);
}
.cs-company__row dd {
    font-size: 0.95em;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}
.cs-company__kana,
.cs-company__sub {
    display: block;
    font-size: 13px;
    line-height: 1.8;
    color: var(--cs-gray);
    margin-top: 6px;
}
.cs-company__tel {
    font-family: var(--cs-en);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--cs-red);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.post-content a.cs-company__tel:hover { color: var(--cs-red-deep); }

/* 会社概要ページの AREA は白背景に */
.cs-page-area { background: var(--cs-white); }

/* --- 地図 --- */
.cs-map {
    background: var(--cs-paper);
    padding: 100px 0 0;
}
.cs-map__frame {
    height: 460px;
    filter: grayscale(.25) contrast(1.02);
}
.cs-map__frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* =========================
   22. よくあるご質問 (page-faq)
   ========================= */
.cs-faq {
    background: var(--cs-paper);
    padding: 96px 0 100px;
    overflow: hidden;
}
.cs-faq::after {
    content: 'FAQ';
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--cs-en);
    font-size: clamp(70px, 12vw, 170px);
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(30, 43, 58, 0.03);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
.cs-faq > .cs-inner {
    position: relative;
    z-index: 1;
    max-width: 940px;
}
.cs-faq__cat {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--cs-round);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--cs-ink);
    margin: 46px 0 18px;
}
.cs-faq__cat:first-of-type { margin-top: 0; }
.cs-faq__cat::before {
    content: '';
    width: 26px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cs-orange), var(--cs-yellow));
}
.cs-faq__group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-faq__item {
    background: var(--cs-white);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    transition: box-shadow .35s var(--cs-ease), border-color .35s var(--cs-ease);
}
.cs-faq__item[open] {
    border-color: rgba(245, 130, 31, .35);
    box-shadow: var(--cs-shadow-md);
}
.cs-faq__q {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 56px 22px 24px;
    cursor: pointer;
    list-style: none;
    position: relative;
    font-family: var(--cs-round);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--cs-ink);
    transition: background .3s var(--cs-ease);
}
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__q:hover { background: var(--cs-orange-soft); }
.cs-faq__mark {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    /* Barlow Condensed の Q は 0 と見分けがつきにくいため丸ゴシックを使う */
    font-family: var(--cs-round);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    background: var(--cs-blue-soft);
    color: var(--cs-blue);
}
.cs-faq__mark--a {
    background: var(--cs-orange-soft);
    color: var(--cs-orange-deep);
}
.cs-faq__q-text { padding-top: 4px; }
.cs-faq__toggle {
    position: absolute;
    top: 50%; right: 24px;
    transform: translateY(-50%);
    width: 18px; height: 18px;
}
.cs-faq__toggle::before,
.cs-faq__toggle::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 2.5px;
    border-radius: 2px;
    background: var(--cs-orange);
    transform: translateY(-50%);
    transition: transform .35s var(--cs-ease);
}
.cs-faq__toggle::after { transform: translateY(-50%) rotate(90deg); }
.cs-faq__item[open] .cs-faq__toggle::after { transform: translateY(-50%) rotate(0deg); }
.cs-faq__a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 24px 26px;
    border-top: 1px dashed var(--cs-line);
    margin-top: -1px;
    padding-top: 24px;
}
.post-content .cs-faq__a p {
    margin: 4px 0 0;
    font-size: 0.95em;
    line-height: 2;
    color: var(--cs-ink-soft);
}
.post-content .cs-faq__a p strong {
    color: var(--cs-ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255,199,44,.45) 62%);
}

/* --- 解決しない場合 --- */
.cs-faq-help {
    background: var(--cs-white);
    padding: 90px 0 96px;
}
.cs-faq-help__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 940px;
    margin: 0 auto;
    padding: 42px 46px;
    border-radius: var(--cs-radius-lg);
    background: var(--cs-cream);
    border: 2px dashed rgba(245, 130, 31, .35);
}
.cs-faq-help__body { flex: 1 1 420px; }
.cs-faq-help__title {
    font-family: var(--cs-round);
    font-size: 19px;
    font-weight: 900;
    color: var(--cs-ink);
    margin: 0 0 12px;
}
.post-content .cs-faq-help__body p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}

/* =========================
   23. お問い合わせ (page-contact)
   ========================= */
.cs-ctc-tel {
    background: var(--cs-paper);
    padding: 90px 0 96px;
    overflow: hidden;
}
.cs-ctc-tel__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}
.cs-ctc-tel__box {
    background: linear-gradient(140deg, var(--cs-red) 0%, var(--cs-orange) 70%, #f9a53f 100%);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-accent);
    padding: 44px 40px;
    text-align: center;
    color: var(--cs-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.post-content .cs-ctc-tel__label {
    font-family: var(--cs-round);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 0 0 14px;
    color: rgba(255,255,255,.92);
}
.cs-ctc-tel__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
}
.post-content a.cs-ctc-tel__num,
.post-content a.cs-ctc-tel__num:hover { color: var(--cs-white); }
.cs-ctc-tel__icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}
.cs-ctc-tel__icon svg { width: 22px; height: 22px; }
.cs-ctc-tel__num strong {
    font-family: var(--cs-en);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.1;
    white-space: nowrap;
}
.post-content ul.cs-ctc-tel__hours {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 22px 0 0;
    padding: 0;
}
.cs-ctc-tel__hours li {
    font-size: 14px;
    letter-spacing: .04em;
    color: rgba(255,255,255,.95);
}
.cs-ctc-tel__hours li span {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 3px 10px;
    margin-right: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}
.post-content .cs-ctc-tel__caution {
    font-size: 12px;
    color: rgba(255,255,255,.85);
    margin: 18px 0 0;
}

/* --- 伝えていただきたいこと --- */
.cs-ctc-tips {
    background: var(--cs-white);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    padding: 40px 40px 34px;
}
.cs-ctc-tips__title {
    font-family: var(--cs-round);
    font-size: 18px;
    font-weight: 900;
    color: var(--cs-ink);
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cs-line);
}
.post-content ol.cs-ctc-tips__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-ctc-tips__list li {
    position: relative;
    padding-left: 46px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--cs-ink-soft);
}
.cs-ctc-tips__list li + li { margin-top: 18px; }
.cs-ctc-tips__list li b {
    display: block;
    font-family: var(--cs-round);
    font-size: 16px;
    font-weight: 900;
    color: var(--cs-ink);
    margin-bottom: 2px;
}
.cs-ctc-tips__no {
    position: absolute;
    left: 0; top: 2px;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--cs-en);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    background: var(--cs-blue-soft);
    color: var(--cs-blue);
}
.post-content .cs-ctc-tips__note {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px dashed var(--cs-line);
    font-size: 13px;
    line-height: 1.9;
    color: var(--cs-gray);
}

/* --- メールフォーム --- */
.cs-ctc-mail {
    background: var(--cs-white);
    padding: 96px 0 100px;
}
.cs-ctc-mail > .cs-inner { max-width: 900px; }
.cs-ctc-notice {
    background: var(--cs-orange-soft);
    border-radius: var(--cs-radius);
    padding: 28px 32px;
    margin-bottom: 44px;
}
.cs-ctc-notice__title {
    font-family: var(--cs-round);
    font-size: 16px;
    font-weight: 900;
    color: var(--cs-orange-deep);
    margin: 0 0 10px;
}
.post-content .cs-ctc-notice p {
    font-size: 14px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}
.post-content .cs-ctc-notice__urgent {
    margin-top: 12px !important;
    font-weight: 700;
    color: var(--cs-ink);
}
.post-content .cs-ctc-notice__urgent a {
    font-family: var(--cs-en);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--cs-red);
    text-decoration: none;
}

/* --- Contact Form 7 --- */
.cs-ctc-form .wpcf7 { margin: 0; }
.cs-ctc-form p {
    margin: 0 0 24px !important;
}
.cs-ctc-form label {
    display: block;
    font-family: var(--cs-round);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--cs-ink);
    margin-bottom: 10px;
}
.cs-ctc-form input[type="text"],
.cs-ctc-form input[type="email"],
.cs-ctc-form input[type="tel"],
.cs-ctc-form input[type="url"],
.cs-ctc-form input[type="date"],
.cs-ctc-form input[type="number"],
.cs-ctc-form select,
.cs-ctc-form textarea {
    width: 100%;
    padding: 15px 18px;
    font-family: var(--cs-gothic);
    font-size: 15px;
    line-height: 1.7;
    color: var(--cs-ink);
    background: var(--cs-paper);
    border: 1.5px solid var(--cs-line);
    border-radius: var(--cs-radius);
    transition: border-color .3s var(--cs-ease), background .3s var(--cs-ease), box-shadow .3s var(--cs-ease);
    -webkit-appearance: none;
    appearance: none;
}
.cs-ctc-form textarea { min-height: 200px; resize: vertical; }
.cs-ctc-form input:focus,
.cs-ctc-form select:focus,
.cs-ctc-form textarea:focus {
    outline: none;
    background: var(--cs-white);
    border-color: var(--cs-orange);
    box-shadow: 0 0 0 4px rgba(245, 130, 31, .14);
}
.cs-ctc-form input::placeholder,
.cs-ctc-form textarea::placeholder { color: var(--cs-gray-light); }
.cs-ctc-form .wpcf7-list-item { margin: 0 22px 8px 0; }
.cs-ctc-form input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 380px;
    height: 64px;
    margin: 12px auto 0;
    padding: 0 28px;
    font-family: var(--cs-round);
    font-size: 17px;
    line-height: 64px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--cs-white);
    background: linear-gradient(120deg, var(--cs-red) 0%, var(--cs-orange) 100%);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--cs-shadow-accent);
    cursor: pointer;
    transition: transform .3s var(--cs-ease), box-shadow .3s var(--cs-ease), filter .3s var(--cs-ease);
    -webkit-appearance: none;
    appearance: none;
}
.cs-ctc-form input[type="submit"]:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
    box-shadow: 0 18px 40px rgba(226, 58, 46, .34);
}
.cs-ctc-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--cs-red);
}
.cs-ctc-form .wpcf7-response-output {
    margin: 26px 0 0 !important;
    padding: 16px 20px !important;
    border-width: 1.5px !important;
    border-radius: var(--cs-radius) !important;
    font-size: 14px;
    line-height: 1.8;
}
.cs-ctc-form .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* --- 公式LINE --- */
.cs-ctc-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
    padding: 38px 44px;
    border-radius: var(--cs-radius-lg);
    background: var(--cs-white);
    border: 2px dashed rgba(6, 198, 85, .45);
}
.cs-ctc-line__body { flex: 1 1 420px; }
.cs-ctc-line__title {
    font-family: var(--cs-round);
    font-size: 19px;
    font-weight: 900;
    color: var(--cs-ink);
    margin: 0 0 10px;
}
.post-content .cs-ctc-line__body p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--cs-ink-soft);
    margin: 0;
}
.cs-btn--line {
    background: linear-gradient(120deg, #06c655, #00b900);
    color: #fff !important;
    padding: 14px 30px 14px 20px;
    box-shadow: 0 14px 30px rgba(6, 198, 85, .32);
}
.cs-btn--line:hover { box-shadow: 0 20px 44px rgba(6, 198, 85, .4); }
.cs-btn__body strong.cs-btn__body-text {
    font-family: var(--cs-round);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
}

/* 下層ページ末尾 CTA */
.cs-page-cta { margin-top: 0; }

/* --- 親テーマ .post-content の見出し・段落スタイルを打ち消す --- */
.post-content .cs-page h2,
.post-content .cs-page h3 {
    clear: none;
    padding: 0;
    font-family: var(--cs-round);
    font-weight: 900;
}
.post-content .cs-page .cs-page-lead__title { font-size: clamp(24px, 2.7vw, 38px); line-height: 1.55; margin: 0 0 26px; }
.post-content .cs-page .cs-head__title { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.55; margin: 0 0 18px; }
.post-content .cs-page .cs-menu-item__title { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.5; margin: 0 0 16px; }
.post-content .cs-page .cs-menu-ask__title,
.post-content .cs-page .cs-faq-help__title,
.post-content .cs-page .cs-ctc-line__title { font-size: 19px; line-height: 1.6; margin: 0 0 10px; }
.post-content .cs-page .cs-price-factor__title { font-size: 18px; line-height: 1.6; margin: 0 0 12px; }
.post-content .cs-page .cs-flow__title { font-size: 18px; line-height: 1.6; margin: 0 0 10px; }
.post-content .cs-page .cs-grt-hero__title { font-size: clamp(23px, 2.5vw, 35px); line-height: 1.6; margin: 0 0 28px; }
.post-content .cs-page .cs-grt-belief__title { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.6; margin: 0 0 34px; }
.post-content .cs-page .cs-grt-photo__name h3 { font-size: 20px; line-height: 1.4; margin: 0; }
.post-content .cs-page .cs-point__title { font-size: 19px; line-height: 1.6; margin: 0 0 12px; }
.post-content .cs-page .cs-area__label { font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.post-content .cs-page .cs-cta__title { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.6; margin: 0 0 20px; }
.post-content .cs-page .cs-faq__cat { font-size: 17px; line-height: 1.6; margin: 46px 0 18px; }
.post-content .cs-page .cs-faq__cat:first-of-type { margin-top: 0; }
.post-content .cs-page .cs-ctc-tips__title { font-size: 18px; line-height: 1.6; margin: 0 0 22px; padding-bottom: 16px; }
.post-content .cs-page .cs-ctc-notice__title { font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.post-content .cs-page .cs-cta__catch { margin: 0 0 10px; }
.post-content .cs-page .cs-cta__text { margin: 0 0 38px; }
.post-content .cs-page .cs-cta__note { margin: 26px 0 0; }
.post-content .cs-page .cs-grt-closing__sign { margin: 36px 0 28px; }
.post-content .cs-page .cs-area__note { margin: 22px 0 0; }
.post-content .cs-page dl { margin: 0 auto; }
.post-content .cs-page dd { margin: 0; }
.post-content .cs-page .cs-menu-item__no,
.post-content .cs-page .cs-price-factor__no { font-family: var(--cs-en); }

/* =========================
   24. 下層ページ RESPONSIVE
   ========================= */
@media only screen and (max-width: 1100px) {
    .cs-grt-hero__inner { gap: 40px; }
    .cs-menu-item { gap: 34px; }
    .cs-menu-item__body { padding: 38px 36px 38px 0; }
    .cs-menu-item--rev .cs-menu-item__body { padding: 38px 0 38px 36px; }
    .cs-company__row { grid-template-columns: 170px minmax(0, 1fr); }
}

@media only screen and (max-width: 900px) {
    .cs-page-lead { padding: 70px 0 60px; }
    .cs-page-menu,
    .cs-page-price,
    .cs-company,
    .cs-faq,
    .cs-ctc-mail,
    .cs-grt-belief,
    .cs-grt-promise { padding: 70px 0 74px; }
    .cs-ctc-tel { padding: 64px 0 70px; }
    .cs-grt-hero { padding: 66px 0 64px; }
    .cs-grt-closing { padding: 64px 0 68px; }
    .cs-map { padding: 70px 0 0; }

    /* メニュー：1カラムに */
    .cs-menu-item,
    .cs-menu-item--rev {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 0;
        margin-bottom: 28px;
    }
    .cs-menu-item__media { min-height: 220px; }
    .cs-menu-item__body,
    .cs-menu-item--rev .cs-menu-item__body { padding: 32px 28px 34px; }

    /* 料金の3要素：1カラムに */
    .post-content ul.cs-price-factors { grid-template-columns: 1fr; gap: 16px; }
    .cs-price-factor { padding: 32px 26px 26px; }
    .cs-price-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 30px 26px;
    }

    /* その他相談ボックス・FAQ・お問い合わせ・料金メモ：縦並び時の余白と高さを最適化 */
    .cs-menu-ask,
    .cs-faq-help__box,
    .cs-ctc-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 30px 26px;
    }
    .cs-faq-help__body,
    .cs-ctc-line__body,
    .post-content .cs-price-note p {
        flex: none;
        width: 100%;
    }

    /* 代表挨拶：1カラムに */
    .cs-grt-hero__inner { grid-template-columns: 1fr; gap: 34px; }
    .cs-grt-photo__img { aspect-ratio: 4 / 3; max-width: 480px; margin: 0 auto; }
    .cs-grt-photo__name { margin: -30px auto 0; text-align: center; }
    .cs-grt-belief__text { padding: 32px 26px; }

    /* 会社概要 */
    .cs-company__box { padding: 12px 26px 18px; }
    .cs-company__row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0;
    }
    .cs-company__row dt { font-size: 13.5px; }
    .cs-map__frame { height: 320px; }

    /* FAQ */
    .cs-faq__q { padding: 18px 48px 18px 18px; font-size: 15px; }
    .cs-faq__a { padding: 20px 18px 22px; }
    .cs-faq__mark { width: 28px; height: 28px; font-size: 15px; }
    .cs-faq__cat { margin: 34px 0 14px; font-size: 16px; }

    /* お問い合わせ */
    .cs-ctc-tel__grid { grid-template-columns: 1fr; gap: 22px; }
    .cs-ctc-tel__box { padding: 34px 24px; }
    .cs-ctc-tips { padding: 30px 26px 26px; }
    .cs-ctc-notice { padding: 22px 22px; margin-bottom: 32px; }
    .cs-ctc-form textarea { min-height: 170px; }
}

@media only screen and (max-width: 767px) {
    .cs-page-lead__title { font-size: 22px; }
    .cs-menu-item__title { font-size: 19px; }
    .cs-grt-hero__title,
    .cs-grt-belief__title { font-size: 21px; }
    .cs-ctc-tel__num { flex-direction: column; gap: 10px; }
    .cs-ctc-tel__num strong { font-size: 36px; }
    .cs-company__tel { font-size: 26px; }
    .cs-ctc-form input[type="submit"] { max-width: 100%; height: 58px; font-size: 16px; line-height: 58px; padding: 0 20px; }
    
    .header{
        z-index: 9;
    }
    .top-slider-wrapper.cs-hero{overflow: visible;}
    .cs-hero__cta{position: absolute;transform: translateX(-50%) !important;left: 50%;min-width: 290px;}
}