@charset "UTF-8";
/* =========================================================
   brand.css — 新デザイン（2026-11 版）
   mockup/top.html のトーン＆マナーをサイト全体に適用する。

   方針
   ・色は紺1色。濃淡だけで階層をつくる（差し色のオレンジ・赤字は廃止）
   ・影ではなく1pxの線と角丸で面を区切る
   ・本文は17px / weight 500 / 行間1.9
   ・見出しは「大きな英字ラベル＋日本語h2」の2カラム

   このファイルは最後に読み込まれ、base/page/index/service を上書きする。
========================================================= */

/* ---------------------------------------------------------
   1. トークンの差し替え
   旧CSSは --brand や --primary-color を見ているので、
   ここを変えるだけで既存コンポーネントも新しい色に乗り換わる。
--------------------------------------------------------- */
:root {
    /* 青1色。濃紺をやめ、明るい青＋淡い面で軽くする */
    --brand:          #006DD2;   /* 主役。見出し・リンク・アイコン */
    --brand-deep:     #0A55A4;   /* hover と、濃い面が要るところだけ */
    /* 旧CSSは --brand-light を「文字色」としても使っている（h4・strong・ラベルなど）。
       ここを淡い水色にすると白地で読めなくなるため、用途を2つに分ける。
       ・--brand-light … 文字にも使える青
       ・--line-blue   … 罫・ボタンの枠だけに使う淡い水色 */
    --brand-light:    #1F7ACE;
    --line-blue:      #88C8FF;
    --brand-tint:     #F2F9FF;   /* 淡い面 */
    --brand-tint-2:   #F8FCFF;
    --accent:         #006DD2;   /* 差し色は使わない */
    --line-green:     #06C755;

    /* 「注意」は赤をやめ、淡い青の面＋左罫で示す */
    --danger:         #006DD2;
    --danger-strong:  #0A55A4;
    --danger-warn:    #0A55A4;
    --danger-bg:      #F2F9FF;
    --danger-line:    #BFE0FF;

    /* グレー */
    --ink:            #333333;
    --ink-weak:       #6E7780;
    --line:           #E4EDF5;   /* 罫もわずかに青み。グレーだと重く見える */
    --line-soft:      #F0F5FA;
    --bg:             #FFFFFF;
    --bg-alt:         #F2F9FF;   /* グレーの面をやめ、淡い青に */

    --gray-900:#1F1F1F; --gray-800:#2B2B2B; --gray-600:#6E6E6E; --gray-500:#838383;
    --gray-400:#6E7780; --gray-300:#B5B5B5; --gray-250:#CFCFCF; --gray-200:#DEDEDE;
    --gray-150:#E4EDF5; --gray-100:#F0F5FA; --gray-50:#F2F9FF;  --gray-25:#FAFCFE;

    --text:           var(--ink);
    --text-color:     var(--ink);
    --text-muted:     var(--ink-weak);
    --text-faint:     var(--ink-weak);
    --surface:        var(--bg);
    --surface-alt:    var(--bg-alt);
    --surface-tint:   var(--brand-tint);
    --border:         var(--line);
    --border-soft:    var(--line-soft);
    --border-strong:  var(--gray-200);

    /* 影はほぼ使わない */
    --shadow-xs:   none;
    --shadow-sm:   none;
    --shadow-md:   none;
    --shadow-lg:   0 10px 36px rgba(20,40,70,.10);
    --shadow-hover:0 10px 28px rgba(20,40,70,.10);

    /* 角丸 */
    --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:40px; --r-pill:999px;
    --border-radius-lg: var(--r-lg);
    --border-radius-md: var(--r-md);

    /* 余白 */
    --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
    --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:120px;
    --section-spacing: var(--sp-10);
    --gut: 24px;
    --container: 1440px;

    /* 文字 */
    --font-en: 'Noto Sans JP', "Helvetica Neue", Arial, sans-serif;
    --fs-xs:.78rem; --fs-sm:.88rem; --fs-base:1rem; --fs-md:1.06rem;
    --fs-lg:1.2rem; --fs-xl:1.45rem; --fs-2xl:1.7rem; --fs-3xl:2.35rem; --fs-4xl:3.7rem;
    --lh-tight:1.45; --lh-base:1.9; --lh-loose:2.05;
}

/* 新デザインは padding込みで幅を計算する前提（モックアップと同じ）。
   旧テーマは content-box のままだったため、ここで揃える */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; scroll-behavior: smooth; }
body {
    /* 参照サイトは 350。日本語で細すぎると読みにくいので 400 で止める */
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: .02em;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
.container { max-width: var(--container); padding: 0 var(--gut); }
.section { padding: var(--sp-10) 0; }
.section--alt, .deco-bg { background: var(--bg-alt); }

/* ---------------------------------------------------------
   幾何学のあしらい
   ヒーローのイラストから色を取り、彩度と濃度を落とした三角・四角。
   ざらつきと淡いグラデーションは SVG 側に焼き込んである（img/geo-a.svg, geo-b.svg）。

   ・情報ではないので pointer-events は切り、文字の下（z-index:0）に入れる
   ・A と B を交互に使い、同じ並びが続かないようにする
   ・濃くしないこと。背景の飾りが主張すると一気に安っぽくなる
--------------------------------------------------------- */
/* ページ全体に1枚だけ敷くレイヤー。
   セクションごとに置くと境界で断ち切られ、並びも読まれてしまうため、
   ドキュメント全面に広げて、縦位置の % で散らす。 */
body { position: relative; }
.geo-layer {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.geo-layer .geo {
    position: absolute; display: block;
    background-repeat: no-repeat; background-size: contain;
}
.section { position: relative; z-index: 1; }

/* 淡い面のセクションは、ベタ塗りをやめてテクスチャを敷く。
   白のセクションと交互になり、ページに抑揚が出る。
   ・濃さは白の重ねで調整する（下の .section--texture と同じ指定）
   ・テクスチャは不透明なので、このセクションでは幾何学のあしらいは隠れる。
     白のセクション側であしらいが見えるので、全体としては交互になる */
/* テクスチャに重ねる白の濃さ。ここだけ変えれば全体の濃さが変わる。
   トップは主役なので濃く、下層は本文が主役なので一段薄くする。 */
:root        { --tex-veil: rgba(255,255,255,.10); }
body:not(.home) { --tex-veil: rgba(255,255,255,.38); }

.section--alt, .deco-bg, .section--texture,
/* 下層ページは --alt を使っていないので、個別に指定して同じ抑揚をつける */
.access-section, .contact-form-section, .faq-section,
.works-archive-section, .column-archive-section {
    background-image:
        linear-gradient(var(--tex-veil), var(--tex-veil)),
        url("../img/bg-texture.jpg");
    background-size: auto, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-color: #F4FBFE;
}

/* 大きさ・縦位置・左右・角度・濃さを、規則が読めないようにばらす */
.geo--1  { background-image:url("../img/geo-a.svg"); width:760px; height:760px; top:2%;  right:-190px; transform:rotate(6deg);   opacity:.78; }
.geo--2  { background-image:url("../img/geo-c.svg"); width:620px; height:620px; top:11%; left:-200px;  transform:rotate(-18deg); opacity:.62; }
.geo--3  { background-image:url("../img/geo-b.svg"); width:900px; height:900px; top:20%; left:26%;     transform:rotate(11deg);  opacity:.5;  }
.geo--4  { background-image:url("../img/geo-a.svg"); width:700px; height:700px; top:31%; right:-230px; transform:rotate(-27deg) scaleX(-1); opacity:.72; }
.geo--5  { background-image:url("../img/geo-c.svg"); width:840px; height:840px; top:41%; left:-260px;  transform:rotate(14deg);  opacity:.58; }
.geo--6  { background-image:url("../img/geo-b.svg"); width:560px; height:560px; top:52%; right:18%;    transform:rotate(-9deg);  opacity:.68; }
.geo--7  { background-image:url("../img/geo-a.svg"); width:880px; height:880px; top:61%; left:-180px;  transform:rotate(22deg) scaleX(-1); opacity:.52; }
.geo--8  { background-image:url("../img/geo-c.svg"); width:660px; height:660px; top:72%; right:-200px; transform:rotate(-5deg);  opacity:.75; }
.geo--9  { background-image:url("../img/geo-b.svg"); width:780px; height:780px; top:82%; left:12%;     transform:rotate(-16deg); opacity:.5; }
.geo--10 { background-image:url("../img/geo-c.svg"); width:600px; height:600px; top:91%; left:-170px;  transform:rotate(25deg);  opacity:.66; }

@media (max-width: 768px) {
    /* 狭い画面では文字にかぶるので、小さく薄くする */
    .geo-layer .geo { width: 400px !important; height: 400px !important; opacity: .5 !important; }
    .geo--3, .geo--6, .geo--9 { display: none; } /* 中央寄りのものは外す */
}

/* 導入セクションの背景：画面に固定したイラスト
   FVと同じトーンの大阪の街イラスト（cta-illust.svg）を敷き、
   background-attachment: fixed でスクロールしても背景だけ止めて見せる。
   ・文字が乗るので白を重ねて落とす（数値を下げるほどイラストが濃くなる）
   ・iOS Safari は fixed が正しく動かないので、狭い画面では解除する */
.section--introbg {
    background-image:
        linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.80)),
        url("../img/cta-illust.svg");
    background-size: auto, cover;
    background-position: center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
    background-color: #F4FBFE;
}
@media (max-width: 1024px) {
    .section--introbg { background-attachment: scroll, scroll; }
}

/* テクスチャ背景のメモ
   元画像は 3500x3500 / 2.9MB だったので 1600x1600 / 77KB に圧縮して img/bg-texture.jpg に配置。
   濃さは linear-gradient の白の不透明度で決まる。数値を下げるほど濃くなる。
     .45 = 控えめ ／ .25 = 中間 ／ .10 = いまの設定 ／ 0 = 原寸のまま
   指定は .section--alt / .deco-bg / .section--texture にまとめてある（上を参照）。 */

/* ---------------------------------------------------------
   2. セクション見出し
   英字ラベルを大きく、日本語 h2 をその下に。リードは右カラム。
--------------------------------------------------------- */
.section-title {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    border-bottom: 0;
    padding-bottom: 0;
    margin: 0 0 var(--sp-7);
    font-size: 1.4rem;
    /* 太字をやめて字間を開ける。これだけで一気に軽くなる */
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .06em;
    color: var(--ink);
}
.section-title span {
    font-family: var(--font-en);
    font-size: 3.4rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .04em;
    color: var(--brand);
    opacity: 1;
    margin: 0 0 var(--sp-4);
    text-transform: none;
}
.section-lead {
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.95;
    color: var(--ink);
    max-width: 68ch;
    margin: 0 0 var(--sp-8);
}

/* 下層ページの h2（サービス詳細など） */
.detail-h2, .page-section h2 {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .06em;
    color: var(--ink);
    margin: 0 0 var(--sp-6);
    padding: 0 0 var(--sp-4) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
}
.detail-h2::before, .detail-h2::after { content: none !important; }
h3 { letter-spacing: .04em; font-weight: 500; }
strong, b { font-weight: 500; }

/* ---------------------------------------------------------
   3. ボタン
--------------------------------------------------------- */
/* ボタン
   ベタ塗りをやめ、「透明＋明るい青の細い枠」を基本形にする。
   ベタ塗りで残すのは電話だけ（いちばん押してほしい導線のため）。 */
.btn, .btn-more, .btn-sub, .cta-btn, .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
    padding: 19px 36px;
    border-radius: 40px;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: .04em;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line-blue);
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.btn:hover, .btn-more:hover, .btn-sub:hover, .cta-btn:hover {
    border-color: var(--brand); color: var(--brand); background: var(--brand-tint);
}
/* 末尾の矢印。参照サイトと同じく、枠の中で右に寄せる */
.btn--arrow::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .72rem; color: var(--brand); margin-left: var(--sp-4);
    transition: transform .25s ease;
}
.btn--arrow:hover::after { transform: translateX(4px); }

/* 電話だけはベタ塗りのまま残す */
.btn--dark  { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.btn--dark:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn--brand { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.btn--line  { background: var(--line-green); border-color: var(--line-green); color: #fff; font-weight: 500; }
.btn--line:hover { background: #05b14c; border-color: #05b14c; color: #fff; }
.btn--ghost { border-color: var(--line-blue); color: var(--ink); background: transparent; }

.btn-more { border: 1px solid var(--line-blue); color: var(--ink); background: transparent; }
.btn-more::before { content: none !important; }
.btn-more:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.btn-wrap { text-align: left; margin-top: var(--sp-8); }

/* ---------------------------------------------------------
   4. カード・パネル共通
   影をやめ、1pxの線と角丸20pxに統一する。
--------------------------------------------------------- */
.card, .svc, .voice, .case-card, .column-card, .works-card,
.reason-item, .symptom-card, .maker-card, .assurance-item, .faq-item {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: none;
}
.hover-up:hover,
.card:hover, .svc:hover, .column-card:hover, .works-card:hover {
    transform: translateY(-3px);
    box-shadow: none;
    border-color: var(--brand);
}

/* ---------------------------------------------------------
   5. ヘッダー（新マークアップ）
--------------------------------------------------------- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gut);
    height: 64px; display: flex; align-items: center; gap: var(--sp-6);
}
.site-header__logo { margin: 0; line-height: 0; }
.site-header__logo img { max-height: 26px; width: auto; }
.site-header__nav { margin-left: auto; }
.site-header__nav ul { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.site-header__nav a { font-size: .9rem; font-weight: 500; white-space: nowrap; }
.site-header__nav a:hover { color: var(--brand); }
.site-header__acts { display: flex; align-items: center; gap: var(--sp-2); }
.pill-tel {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line-blue); border-radius: var(--r-pill);
    padding: 9px 18px; font-size: .86rem; font-weight: 500; white-space: nowrap;
}
.pill-tel:hover { background: var(--brand-tint); }
.pill-tel i { color: var(--brand); font-size: .8rem; }
.pill-tel small { font-weight: 500; color: var(--ink-weak); font-size: .72rem; margin-left: 4px; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--brand); font-size: .85rem;
    border: 1px solid var(--line-blue);
    transition: background-color .25s ease, border-color .25s ease;
}
.icon-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
.icon-btn--line { background: var(--line-green); border-color: var(--line-green); color: #fff; }
.icon-btn--line:hover { background: #05b14c; border-color: #05b14c; }
.site-header .hamburger {
    display: none; background: none; border: none;
    width: 26px; height: 18px; position: relative; cursor: pointer; padding: 0;
}
.site-header .hamburger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: .25s; }
.site-header .hamburger span:nth-child(1) { top: 0; }
.site-header .hamburger span:nth-child(2) { top: 8px; }
.site-header .hamburger span:nth-child(3) { bottom: 0; }
.site-header.is-open .hamburger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.site-header.is-open .hamburger span:nth-child(2) { opacity: 0; }
.site-header.is-open .hamburger span:nth-child(3) { bottom: 8px; transform: rotate(-45deg); }

/* 固定ヘッダーぶんの余白 */
body { padding-top: 64px; }
.hc-drawer { display: none; }

@media (max-width: 1100px) {
    .site-header__nav { display: none; }
    .site-header .hamburger { display: block; }
    .site-header__acts { margin-left: auto; }
    .hc-drawer {
        display: block; position: fixed; inset: 64px 0 auto 0; z-index: 99;
        background: var(--bg); border-bottom: 1px solid var(--line);
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .hc-drawer.is-open { max-height: 80vh; overflow-y: auto; }
    .hc-drawer ul { list-style: none; margin: 0; padding: var(--sp-4) var(--gut) var(--sp-6); }
    .hc-drawer li + li { border-top: 1px solid var(--line-soft); }
    .hc-drawer a { display: block; padding: 14px 2px; font-weight: 500; }
}
@media (max-width: 768px) {
    .pill-tel span { display: none; }
    .pill-tel small { display: none; }
}

/* ---------------------------------------------------------
   6. フッター
--------------------------------------------------------- */
.site-footer { background: var(--bg-alt); padding: var(--sp-9) 0 var(--sp-5); font-size: .88rem; }
.site-footer__top {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8);
    padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line);
}
.site-footer__logo { font-size: 1.3rem; font-weight: 700; margin: 0 0 var(--sp-3); }
.site-footer__addr { margin: 0; color: var(--ink-weak); line-height: 2; font-size: .92rem; font-weight: 500; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); list-style: none; padding: 0; margin: 0; align-content: start; }
.site-footer__nav a { font-size: .92rem; font-weight: 500; }
.site-footer__nav a:hover, .site-footer__svc a:hover { color: var(--brand); }
.site-footer__svc { padding: var(--sp-7) 0 0; }
.site-footer__svc h2 { font-size: .9rem; margin: 0 0 var(--sp-4); font-weight: 700; }
.site-footer__svc ul { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); list-style: none; padding: 0; margin: 0; }
.site-footer__svc a { font-size: .88rem; font-weight: 500; color: var(--ink-weak); }
.site-footer__copy { text-align: center; font-size: .72rem; color: var(--ink-weak); margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .site-footer__top { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* =========================================================
   7. トップページ
========================================================= */

/* ヒーロー：画像に焼き込まれていた文言を実テキストにした版 */
.hero { padding: var(--sp-4) var(--gut) 0; max-width: var(--container); margin: 0 auto; }
.hero__panel {
    position: relative; border-radius: var(--r-xl); overflow: hidden;
    aspect-ratio: 1813/868; min-height: 420px; background: var(--brand-tint);
}
.hero__panel > picture { display: block; width: 100%; height: 100%; }
.hero__panel > picture img { width: 100%; height: 100%; object-fit: cover; }
.hero__cut {
    position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--bg);
    border-top-right-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-6) var(--sp-3) 0; max-width: min(820px, 88%);
}
.hero__en { font-size: .86rem; font-weight: 500; color: var(--ink-weak); margin: 0 0 6px; letter-spacing: .02em; }
.hero__ja { font-size: 2.35rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 8px; }
.hero__sub { font-size: 1.02rem; font-weight: 500; color: var(--ink-weak); margin: 0; line-height: 1.6; }

/* 吹き出し：大阪のあちこちの家から声が上がっている見立て */
.hero__voices { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.voice-pin {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--size); height: var(--size); opacity: 0;
    animation: pin-cycle var(--dur) ease-in-out var(--delay) infinite;
}
.voice-pin__img {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    border: 4px solid #fff; box-shadow: 0 6px 18px rgba(20,40,70,.18); background: #fff;
}
.voice-pin__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voice-pin--plain .voice-pin__img { background: var(--c); }
.voice-pin--plain { --tail: var(--c); }
.voice-pin::after {
    content: ""; position: absolute; left: 50%; bottom: -11px;
    width: 20px; height: 16px; background: var(--tail, #fff);
    transform: translateX(-50%); clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 4px 4px rgba(20,40,70,.12));
}
@keyframes pin-cycle {
    0%   { opacity:0; transform: translateY(16px)  scale(.55); }
    4%   { opacity:1; transform: translateY(0)     scale(1.06); }
    7%   { opacity:1; transform: translateY(0)     scale(1); }
    22%  { opacity:1; transform: translateY(-10px) scale(1); }
    28%  { opacity:0; transform: translateY(-22px) scale(.92); }
    100% { opacity:0; transform: translateY(16px)  scale(.55); }
}
@media (prefers-reduced-motion: reduce) { .voice-pin { animation: none; opacity: 1; transform: none; } }
@media (max-width: 768px) { .hero__voices { display: none; } }

/* 実績の帯 */
.facts { max-width: var(--container); margin: 0 auto; padding: var(--sp-8) var(--gut); display: flex; align-items: center; flex-wrap: wrap; }
.facts__label { font-size: 1.05rem; font-weight: 700; padding-right: var(--sp-7); white-space: nowrap; margin: 0; }
.facts dl { display: flex; flex: 1; margin: 0; flex-wrap: wrap; }
.facts div { flex: 1; min-width: 150px; padding: 0 var(--sp-6); border-left: 1px solid var(--line); }
.facts dt { font-size: .72rem; color: var(--ink-weak); margin: 0 0 4px; letter-spacing: .04em; }
.facts dd { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.facts dd small { font-size: .8rem; margin-left: 2px; }

/* 2カラムの見出しブロック */
.sec-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--sp-9); align-items: start; margin-bottom: var(--sp-9); }
.sec-head .section-title { margin: 0; }
.sec-head .section-lead { margin: 0; padding-top: var(--sp-3); }

/* トラブル一覧 */
.trouble { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: var(--sp-3); }
.trouble a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line);
    border-radius: var(--r-md); font-weight: 500; font-size: .98rem; background: var(--bg); transition: .2s;
}
.trouble a:hover { border-color: var(--brand); color: var(--brand); }
.trouble i { color: var(--brand); width: 20px; text-align: center; font-size: .9rem; }
.trouble a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: .68rem; color: var(--ink-weak); }

/* 導入 */
.intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-9); align-items: start; }
.intro h2 { font-size: 1.7rem; font-weight: 700; line-height: 1.65; margin: 0; letter-spacing: -.01em; }
.intro p { margin: 0 0 var(--sp-5); font-size: 1.06rem; font-weight: 500; line-height: 2; }
.intro p:last-child { margin-bottom: 0; }

/* サービス一覧 */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--sp-5); }
.svc { overflow: hidden; transition: .25s; display: flex; flex-direction: column; }
.svc__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.svc__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.svc:hover .svc__thumb img { transform: scale(1.04); }
.svc__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 var(--sp-3); line-height: 1.6; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.svc__body p { font-size: .95rem; font-weight: 500; line-height: 1.95; margin: 0 0 var(--sp-5); color: var(--ink-weak); flex: 1; }
.svc__more { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 700; font-size: .82rem; }
.svc__more i { transition: transform .2s; }
.svc:hover .svc__more i { transform: translateX(4px); }

/* 強み */
.strength { display: flex; flex-direction: column; gap: var(--sp-9); }
.str { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.str:nth-child(even) .str__img { order: 2; }
.str__img img { border-radius: var(--r-lg); width: 100%; height: 340px; object-fit: cover; }
.str__n { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 500; letter-spacing: .1em; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--line-blue); border-radius: var(--r-pill); padding: 5px 16px; margin: 0 0 var(--sp-5); }
.str__text h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.55; margin: 0 0 var(--sp-5); letter-spacing: -.01em; }
.str__text p { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 2.05; color: var(--ink-weak); }

/* 実績・コラムのカード */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--sp-5); }
.card { overflow: hidden; display: block; transition: .25s; }
.card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card__thumb img { transform: scale(1.04); }
.card__tag { position: absolute; left: var(--sp-4); top: var(--sp-4); background: var(--bg); padding: 5px 13px; border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; color: var(--brand); }
.card__body { padding: var(--sp-5); }
.card__date { font-size: .72rem; color: var(--ink-weak); letter-spacing: .04em; }
.card__body h3 { font-size: 1.08rem; font-weight: 700; margin: var(--sp-3) 0 0; line-height: 1.7; }
.card__body p { font-size: .94rem; font-weight: 500; color: var(--ink-weak); margin: var(--sp-3) 0 0; line-height: 1.9; }

/* 対応エリアのイラスト帯。
   1枚の SVG を トップ＋サービス11ページ の計12か所で使い回す。
   画像が無い間は brand-tint の面が出るだけで、レイアウトは崩れない。 */
.area-illust {
    height: 240px;
    margin: 0 0 var(--sp-7);
    border-radius: var(--r-lg);
    background: var(--brand-tint) url("../img/area-illust.svg") center bottom / cover no-repeat;
}
@media (max-width: 768px) { .area-illust { height: 150px; margin-bottom: var(--sp-5); } }

/* 対応エリア */
.area-cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--sp-8); align-items: start; }
.area-cols p { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 2.05; color: var(--ink-weak); }
.ward { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.ward li { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 19px; font-size: .95rem; font-weight: 500; }

/* 末尾CTA：全幅のイラスト背景＋パララックス
   イラストはそのままだと明るすぎて白文字が読めないので、
   紺のスクリムを重ねて「紺の面にうっすら街が透ける」状態にする。 */
.cta-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* 背景イラスト（1920x560）が縦に収まる高さを確保する。
       これより低いと街が下端で切れて、ただの帯に見えてしまう */
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: var(--sp-9) var(--gut);
    color: #fff;
    background: var(--brand);
}
.cta-hero > .cta-hero__inner { width: 100%; }
.cta-hero__bg {
    position: absolute;
    /* パララックスで上下に動かすぶん、上下に余分を持たせておく */
    inset: -18% 0;
    z-index: -2;
    /* 絵の中身が下半分に寄っているので、下端を基準に合わせる */
    background: url("../img/cta-illust.svg") center bottom / cover no-repeat;
    will-change: transform;
}
.cta-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 文字が乗る上側は濃く、街が見える下側は薄く。
       紺の面にうっすら大阪の街が透ける、という見え方にする */
    /* 濃紺だと重いので、明るい青で薄くかける */
    background:
        linear-gradient(180deg,
            rgba(0,78,152,.86)  0%,
            rgba(0,91,175,.78) 40%,
            rgba(0,109,210,.56) 76%,
            rgba(0,109,210,.38) 100%);
}
.cta-hero__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
    align-items: center;
}
.cta-hero__inner > * { min-width: 0; }
.cta-hero__en {
    font-family: var(--font-en);
    font-size: .8rem; font-weight: 700; letter-spacing: .18em;
    margin: 0 0 var(--sp-3); opacity: .75; text-transform: uppercase;
}
.cta-hero h2 {
    font-size: 2.1rem; font-weight: 400; line-height: 1.5;
    letter-spacing: .06em; margin: 0 0 var(--sp-4);
    color: #fff; border: 0; padding: 0;
}
.cta-hero__lead { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 2; opacity: .9; }
.cta-hero__btns { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 320px; }
.cta-hero__btns .btn { width: 100%; }
.cta-hero__btns .btn--dark  { background: #fff; border-color: #fff; color: var(--brand); font-weight: 500; }
.cta-hero__btns .btn--dark:hover { background: #fff; color: var(--brand-deep); }
.cta-hero__btns .btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.cta-hero__btns .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.cta-hero__btns .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* 動きが苦手な方にはパララックスを止める */
@media (prefers-reduced-motion: reduce) {
    .cta-hero__bg { transform: none !important; }
}

@media (max-width: 1100px) {
    .sec-head, .area-cols, .str, .intro, .cta-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
    .str:nth-child(even) .str__img { order: 0; }
    .section-title span { font-size: 3rem; }
    .cta-hero__btns { min-width: 0; }
}
@media (max-width: 768px) {
    :root { --gut: 16px; --r-xl: 20px; }
    .section { padding: var(--sp-8) 0; }
    /* パネルは overflow:hidden なので、そのままだと文字が切れる。
       スマホでは切り抜きをやめ、画像の下にテキストを置く */
    .hero__panel { aspect-ratio: auto; min-height: 0; overflow: visible; background: none; border-radius: 0; }
    .hero__panel > picture { display: block; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; }
    .hero__cut { position: static; max-width: none; padding: var(--sp-4) 0 0; border-radius: 0; }
    .hero__ja { font-size: 1.5rem; }
    .facts { padding: var(--sp-6) var(--gut); }
    .facts__label { width: 100%; padding: 0 0 var(--sp-4); }
    /* 2列に収める。padding が大きいと1列に落ちるため絞る */
    .facts div { min-width: 0; flex: 1 1 calc(50% - 1px); padding: var(--sp-3); }
    .facts dd { font-size: 1.3rem; }
    .section-title { font-size: 1.15rem; }
    .section-title span { font-size: 2.2rem; }
    .intro h2 { font-size: 1.3rem; }
    .str__img img { height: 220px; }
    .str__text h3 { font-size: 1.25rem; }
    .cta-hero { padding: var(--sp-8) var(--gut); min-height: 0; }
    .cta-hero h2 { font-size: 1.5rem; }
    /* スマホではパララックスを切り、背景を固定して負荷を下げる */
    .cta-hero__bg { inset: 0; transform: none !important; }
}

/* =========================================================
   8. 下層ページ（サービス詳細・会社概要・FAQ・実績・コラム）
   既存のマークアップはそのままに、トーン＆マナーだけ新デザインへ。
   赤字の注意書き・オレンジの差し色・濃い影はすべて廃止。
========================================================= */

/* --- ページヘッダー：帯を白地に。英字を大きく --- */
.page-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line);
    /* 旧CSSに margin-top:92px が残っていた。固定ヘッダーぶんの余白は
       body の padding-top で確保しているので二重になる。消す。 */
    margin-top: 0;
    padding: var(--sp-7) 0 var(--sp-8);
    color: var(--ink);
    text-align: left;
}
/* サービス以外の下層ページは、ヘッダーが白一色で寂しいので幾何学の飾りを置く。
   （サービス詳細はイラストと白フェードに疑似要素を使っているので対象外） */
/* ヘッダー単体の飾りは、ページ全体のレイヤーと重なって濃くなるので置かない */
.page-header { position: relative; z-index: 1; }
.page-header .container { position: relative; z-index: 2; }
.page-header .container { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.page-title { font-size: 1.55rem; font-weight: 500; line-height: 1.7; margin: 0; color: var(--ink); letter-spacing: .06em; }
.page-subtitle {
    font-family: var(--font-en); font-size: 3.4rem; font-weight: 300; line-height: 1.2;
    letter-spacing: .04em; color: var(--brand); opacity: 1; margin: 0 0 var(--sp-3);
}

/* --- サービス詳細ページのヘッダーイラスト ---
   右側にそのサービスのイラストを敷き、左は白のグラデーションで伏せて文字を読ませる。
   画像は body のクラス（hc-svc-xxx）で出し分ける。画像が無いページは従来どおり白のまま。 */
.hc-svc .page-header { position: relative; overflow: hidden; }
.hc-svc .page-header::after {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--hd-illust, none);
    /* SVG 側で床の余白を詰めた（viewBox 900x262）ので、拡大もオフセットも不要。
       画面の端にぴったり付けると切れて見えるので、少し内側に寄せる */
    background-position: right 24px bottom;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
/* 左から白でフェードさせ、見出しの背後を伏せる。
   フェードを広く取りすぎるとイラストが消えてしまうので、
   見出しが終わるあたり（おおよそ画面の55%）で抜けきるようにする */
.hc-svc .page-header::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        #fff 0%, #fff 28%, rgba(255,255,255,.88) 40%, rgba(255,255,255,.45) 54%, rgba(255,255,255,0) 68%);
}
.hc-svc .page-header .container { position: relative; z-index: 2; }
.hc-svc .page-header { min-height: 300px; display: flex; align-items: center; }

@media (max-width: 900px) {
    /* 狭い画面では見出しが全幅に回り込むので、横に並べられない。
       白のベールを全面にかけるとイラストが完全に消えるため、
       見出しの下に専用の帯をつくって、そこにイラストを置く。 */
    .hc-svc .page-header {
        min-height: 0;
        padding-bottom: 130px;   /* ← この余白がイラストの帯になる */
    }
    .hc-svc .page-header::after {
        background-position: right 12px bottom;
        background-size: auto 112px;
        opacity: 1;
    }
    /* ベールは見出しの範囲だけ。帯の部分は伏せない */
    .hc-svc .page-header::before {
        background: linear-gradient(180deg,
            #fff 0%, #fff 55%, rgba(255,255,255,.75) 72%, rgba(255,255,255,0) 86%);
    }
}
@media (max-width: 480px) {
    .hc-svc .page-header { padding-bottom: 104px; }
    .hc-svc .page-header::after { background-size: auto 96px; }
}

/* サービスごとのイラスト */
.hc-svc-tv       .page-header { --hd-illust: url("../img/head-tv.svg"); }
.hc-svc-light    .page-header { --hd-illust: url("../img/head-light.svg"); }
.hc-svc-aircon   .page-header { --hd-illust: url("../img/head-aircon.svg"); }
.hc-svc-breaker  .page-header { --hd-illust: url("../img/head-breaker.svg"); }
.hc-svc-leak     .page-header { --hd-illust: url("../img/head-leak.svg"); }
.hc-svc-fan      .page-header { --hd-illust: url("../img/head-fan.svg"); }
.hc-svc-switch   .page-header { --hd-illust: url("../img/head-switch.svg"); }
.hc-svc-ih       .page-header { --hd-illust: url("../img/head-ih.svg"); }
.hc-svc-camera   .page-header { --hd-illust: url("../img/head-camera.svg"); }
.hc-svc-intercom .page-header { --hd-illust: url("../img/head-intercom.svg"); }
.hc-svc-outlet   .page-header { --hd-illust: url("../img/head-outlet.svg"); }
.hc-svc-other    .page-header { --hd-illust: url("../img/head-other.svg"); }

/* --- パンくず --- */
.breadcrumb { background: none; padding: var(--sp-4) 0; font-size: .8rem; color: var(--ink-weak); border-bottom: 1px solid var(--line-soft); }
.breadcrumb a:hover { color: var(--brand); }

/* --- 目次 --- */
.toc-box, .service-toc { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.toc-list a:hover { color: var(--brand); }

/* --- 表（料金表・会社概要・作業データ） --- */
.price-table, .data-table, .company-table, .work-data-table { border-radius: var(--r-md); overflow: hidden; box-shadow: none; }
.price-table th, .data-table th, .company-table th, .work-data-table th {
    background: var(--bg-alt); color: var(--ink); font-weight: 700; border-color: var(--line);
}
.price-table thead th {
    background: var(--brand-tint); color: var(--brand);
    font-weight: 500; letter-spacing: .06em;
    border-bottom: 1px solid var(--line-blue);
}
.price-table td, .data-table td, .company-table td, .work-data-table td { border-color: var(--line); }
.price-table tbody tr:nth-child(even) { background: transparent; }
.price-table tbody tr:hover { background: var(--brand-tint); }
.is-highlight { color: var(--brand); font-weight: 700; }
.table-note, .price-sub { color: var(--ink-weak); font-size: .86rem; }
.price-sub-box { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }

/* --- 注意・情報のボックス：赤をやめ、紺の面＋左罫に統一 --- */
.alert-box, .alert-box--danger, .info-box, .problem-box, .column-point-box {
    /* 1辺だけ太い罫を引く形はやめた。
       かわりに細い枠にすると「ただ弱くなった」だけになるので、枠は引かない。
       淡い面と、見出しの青＋アイコンだけで成立させる。 */
    background: rgba(0, 109, 210, .075) !important;
    border: 0 !important;
    border-radius: var(--r-lg);
    color: var(--ink) !important;
    box-shadow: none;
    padding: var(--sp-6) var(--sp-7);
}
/* 見出し行。ここで強さを出す */
.alert-box > *:first-child, .info-box > *:first-child,
.problem-box > *:first-child, .column-point-box > *:first-child {
    color: var(--brand-deep);
    font-weight: 700;
    letter-spacing: .04em;
}
.alert-box > *:last-child, .info-box > *:last-child,
.problem-box > *:last-child, .column-point-box > *:last-child { margin-bottom: 0; }
.alert-box i, .alert-box--danger i, .info-box i, .column-point-box i { color: var(--brand) !important; }
.alert-box strong, .alert-box--danger strong { color: var(--brand-deep) !important; }
.card-warning { color: var(--brand-deep) !important; font-weight: 700; }

/* --- 症状カード --- */
.symptom-card { background: var(--bg); border: 1px solid var(--line) !important; border-radius: var(--r-lg); box-shadow: none; }
.symptom-card--danger, .symptom-card--info { border-color: var(--line) !important; background: var(--bg) !important; }
.symptom-card__head { color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.symptom-card__no { background: var(--brand); color: #fff; border-radius: var(--r-pill); }
.symptom-nav .symptom-anchor, .tag-list li, .area-chips li {
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg);
    color: var(--ink); font-weight: 500;
}
.symptom-nav .symptom-anchor:hover { border-color: var(--brand); color: var(--brand); background: var(--bg); }

/* --- 選ばれる理由 --- */
.reason-item { padding: var(--sp-6); }
.reason-num { color: var(--brand); font-family: var(--font-en); font-weight: 700; opacity: 1; }
.reason-item h3 { font-size: 1.1rem; }

/* --- 施工事例 --- */
.case-card { overflow: hidden; }
.case-card__head {
    background: var(--brand-tint); color: var(--ink);
    border-bottom: 1px solid var(--line-blue);
}
/* 旧CSSは濃い青の面に白文字。面を淡くしたので文字色も戻す（白のままだと読めない） */
.case-card__head h3 { color: var(--ink) !important; font-weight: 500; letter-spacing: .04em; }
.case-card__head, .case-card__head * { color: var(--ink); }
.case-card__head .case-card__no { color: var(--brand); }
.case-card__no {
    background: transparent; color: var(--brand);
    border: 1px solid var(--line-blue); border-radius: var(--r-pill); font-weight: 500;
}
.case-card__comment { background: var(--bg-alt); border-radius: var(--r-md); color: var(--ink); }
/* 旧CSSは「--accent-color の面に白文字」。--accent を brand と同じ青にしたため、
   文字色だけ青に変えたら背景と同化して読めなくなっていた。チップとして組み直す。 */
.case-card__comment .label {
    background: #fff;
    color: var(--brand);
    border: 1px solid var(--line-blue);
    border-radius: var(--r-pill);
    padding: 3px 12px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .04em;
}
.photo-ph { background: var(--bg-alt); border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-weak); }

/* 施工事例の写真（作業前・作業後）。
   縦に積むと1枚が大きくなりすぎ、表の横に空白ができていた。
   2枚を横並びにして小さく収める。スマホでも2カラムのまま。 */
.case-card__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-content: start;
    /* 表と写真で横幅を分け合う。写真側を広めに取る */
    flex: 0 1 520px;
    min-width: 0;
}
@media (max-width: 1200px) { .case-card__photos { flex: 0 1 440px; } }
@media (max-width: 900px)  { .case-card__photos { flex: 1 1 auto; gap: 10px; } }

/* 生成する写真は4:3なので、枠も4:3にして object-fit: cover で収める。 */
.case-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--bg-alt);
}
.case-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 「作業前 / 作業後」のラベル */
.case-photo__label {
    position: absolute; left: 12px; top: 12px;
    background: rgba(255,255,255,.92); color: var(--ink);
    border-radius: var(--r-pill); padding: 4px 14px;
    font-size: .66rem; font-weight: 500; letter-spacing: .04em;
    padding: 3px 10px; left: 8px; top: 8px;
}

/* --- 流れ（STEP） --- */
.flow-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: none; }
/* 旧デザインは「薄い大きな数字を背景に敷く」形（font-size:3rem）。
   そこに丸い背景を付けたら、51pxの数字が63x51pxの丸からはみ出していた。
   丸はやめ、読める濃さの数字として置く。 */
.flow-num {
    background: none;
    color: var(--brand);
    font-family: var(--font-en);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    border-radius: 0;
}

/* --- 資格・保証 --- */
.assurance-item { padding: var(--sp-5); text-align: left; }
.assurance-item i { color: var(--brand); }

/* --- FAQ --- */
.faq-item { overflow: hidden; margin-bottom: var(--sp-3); }
.faq-question, .faq-list summary {
    background: var(--bg); color: var(--ink); font-weight: 700; font-size: 1.02rem;
    padding: var(--sp-5); cursor: pointer;
}
.faq-question:hover, .faq-list summary:hover { background: var(--brand-tint); }
.faq-answer, .faq-answer-inner { background: var(--bg); color: var(--ink); }
/* 「A.」は絶対配置なので、本文側に左の逃げを残さないと文字に重なる。
   旧CSS（page.css / service.css）が padding-left:50px を前提にしている。 */
.faq-answer-inner { padding: var(--sp-4) var(--sp-5) var(--sp-5) 52px; }
.faq-answer-inner::before,
.faq-answer::before {
    top: var(--sp-4) !important;
    left: var(--sp-5) !important;
    color: var(--brand) !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
}
.faq-list .faq-answer { padding-left: 52px; padding-right: var(--sp-5); }
@media (max-width: 768px) {
    .faq-answer-inner { padding: var(--sp-3) var(--sp-4) var(--sp-4) 40px; }
    .faq-list .faq-answer { padding-left: 40px; padding-right: var(--sp-4); }
    .faq-answer-inner::before, .faq-answer::before { left: var(--sp-4) !important; }
}

/* --- 関連サービス --- */
.related-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); box-shadow: none; }
.related-card:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-3px); }

/* --- 監修者 --- */
.supervisor-box { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.supervisor-avatar { background: var(--brand-tint); color: var(--brand); }
.supervisor-label { color: var(--brand); font-weight: 700; letter-spacing: .08em; }
.update-date { color: var(--ink-weak); font-size: .8rem; }

/* --- ページ内CTA・スマホ固定CTA --- */
/* 実績の帯（受付・出張費・到着）
   旧CSSはスマホで縦3段＋大きな余白になり、画面を1つ占有していた。
   ラベルを左、値を右に置く1行形式にして詰める。 */
.trust-bar {
    background: rgba(0, 109, 210, .055);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.trust-item + .trust-item { border-left-color: var(--line-blue); }
.trust-label { font-size: .8rem; color: var(--ink-weak); letter-spacing: .04em; }
.trust-value { font-size: 1.6rem; font-weight: 700; color: var(--brand); letter-spacing: 0; }

@media (max-width: 768px) {
    .trust-bar { margin-top: var(--sp-5); }
    .trust-item {
        display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
        text-align: left; padding: 11px 16px;
    }
    .trust-item + .trust-item { border-top-color: var(--line-blue); }
    .trust-label { margin: 0; font-size: .76rem; white-space: nowrap; }
    .trust-value { font-size: 1.1rem; text-align: right; }
}

/* ページ内CTA（電話・LINE・メール）
   .inline-cta はパネルではなく「ボタンの行」。
   ここを面で塗ると、同じ色のボタンと地続きになって1本の帯に見えてしまう。 */
.inline-cta {
    background: none !important;
    display: flex; gap: var(--sp-3);
    max-width: 900px; margin: var(--sp-7) auto 0;
}
.inline-cta a {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 18px 20px;
    border-radius: 40px;
    border: 1px solid transparent;
    font-size: .96rem; font-weight: 500; letter-spacing: .02em;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.inline-cta a:hover { transform: translateY(-2px); opacity: 1; }
.inline-cta .c-tel  { background: var(--brand); border-color: var(--brand); color: #fff; }
.inline-cta .c-tel:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.inline-cta .c-line { background: var(--line-green); border-color: var(--line-green); color: #fff; }
.inline-cta .c-line:hover { background: #05b14c; border-color: #05b14c; }
/* 3つとも塗ると重いので、メールだけ線のボタンにして軽くする */
.inline-cta .c-mail { background: transparent; border-color: var(--line-blue); color: var(--ink); }
.inline-cta .c-mail:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }

@media (max-width: 768px) {
    .inline-cta { flex-direction: column; gap: var(--sp-2); }
}

/* 末尾の大きなCTA帯（.cta-section）はパネルなので、こちらは面で塗る */
.cta-section {
    background: var(--brand) !important;
    border-radius: var(--r-xl);
    color: #fff;
    box-shadow: none;
}
.cta-section::before, .cta-section::after, .cta-overlay { content: none !important; background: none !important; }
.cta-title, .cta-text, .cta-msg { color: #fff; }
.btn-tel-large { background: #fff !important; color: var(--brand) !important; border-radius: var(--r-pill); }
.btn-web-large { background: transparent !important; border: 1px solid rgba(255,255,255,.45) !important; color: #fff !important; border-radius: var(--r-pill); }
.sp-fixed-cta { background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(10px); }
.sp-fixed-cta a { border-radius: var(--r-pill); font-weight: 700; }

/* --- 作業実績・コラムの一覧 --- */
.works-grid, .column-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--sp-5); }
.works-card, .column-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: none; background: var(--bg); }
.works-tag, .column-cat, .works-cat-label, .column-cat-label {
    background: var(--bg); color: var(--brand); border: 1px solid var(--line);
    border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; padding: 5px 13px;
}
.works-date, .column-meta-top, .work-meta-top { color: var(--ink-weak); font-size: .72rem; letter-spacing: .04em; }
.works-name, .column-body h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.7; }
.read-more { color: var(--brand); font-weight: 700; font-size: .82rem; }
.pagination .page-numbers { border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); background: var(--bg); }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- 記事本文（コラム・実績の詳細） --- */
.column-content h2, .work-content h2 {
    font-size: 1.45rem; font-weight: 700; line-height: 1.7; color: var(--ink);
    border: 0; border-bottom: 1px solid var(--line); background: none;
    padding: 0 0 var(--sp-4); margin: var(--sp-9) 0 var(--sp-5);
}
.column-content h3, .work-content h3 {
    font-size: 1.15rem; font-weight: 700; color: var(--ink);
    border: 0; background: none; color: var(--brand);
    padding: 0; margin: var(--sp-7) 0 var(--sp-4);
}
.column-main-img, .work-main-img { border-radius: var(--r-lg); overflow: hidden; }
/* 前後の記事へのリンクは「矢印つきのテキストリンク」。
   ボタン扱いして枠と丸みを付けると、タイトルが長いときに円形になって文字がはみ出す。 */
.column-nav-link, .work-nav-link {
    border: 0; border-radius: 0; background: none;
    color: var(--ink); font-weight: 500; font-size: .92rem; line-height: 1.7;
    max-width: 32%;
    /* タイトルが長くても2行で止める */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
.column-nav-link:hover, .work-nav-link:hover { color: var(--brand); text-decoration: none; }
.column-nav-link::before, .work-nav-prev::before,
.column-nav-next::after, .work-nav-next::after { color: var(--brand); font-size: .72rem; }

/* 「一覧に戻る」だけがボタン */
.column-back-list, .work-back-list {
    display: inline-block; white-space: nowrap;
    padding: 15px 34px;
    border: 1px solid var(--line-blue); border-radius: 40px;
    background: transparent; color: var(--ink);
    font-size: .94rem; font-weight: 500; letter-spacing: .04em;
}
.column-back-list:hover, .work-back-list:hover {
    border-color: var(--brand); color: var(--brand); background: var(--brand-tint);
}

@media (max-width: 768px) {
    .column-nav-link, .work-nav-link { max-width: 100%; }
}

/* --- フォーム --- */
.form-input, .contact-form input, .contact-form textarea, .contact-form select {
    border: 1px solid var(--line); border-radius: var(--r-md); font-size: 1rem;
    padding: 13px 15px; background: var(--bg); color: var(--ink);
}
.form-input:focus, .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.required { background: var(--brand); color: #fff; border-radius: var(--r-sm); font-size: .7rem; font-weight: 500; letter-spacing: .04em; }
/* 「任意」。白文字が乗るので、背景は読める濃さにする */
.any { background: var(--gray-500); color: #fff; border-radius: var(--r-sm); font-size: .7rem; font-weight: 500; letter-spacing: .04em; }

/* LINEボタンは白文字＋LINE緑（#06C755）。LINE公式の配色なので、
   コントラスト比は 2.26 だがブランド指定としてこのままにする。 */
.btn-submit { background: var(--ink); color: #fff; border: 0; border-radius: var(--r-pill); font-weight: 700; padding: 16px 48px; }
.btn-submit:hover { background: var(--brand); }

/* --- 仮の数値マーカー（新デザインでも維持） --- */
.tmp { border-bottom: 1px dotted var(--brand); cursor: help; }
.price-provisional {
    background: rgba(0, 109, 210, .09); color: var(--brand-deep);
    border: 0;
    border-radius: var(--r-lg); font-weight: 500;
    padding: var(--sp-4) var(--sp-5);
}

/* 狭い画面でボタンの文字が長く、グリッド／フレックスが縮まずに
   横スクロールが出ていたため、最小幅を解除して折り返せるようにする */
.cta-hero__inner > *, .cta-hero__btns, .cta-hero__btns .btn { min-width: 0; }
.btn { max-width: 100%; }

@media (max-width: 768px) {
    .cta-hero__btns .btn { padding: 14px 16px; font-size: .92rem; white-space: normal; text-align: center; }
    .page-header { padding: var(--sp-7) 0 var(--sp-5); }
    .page-title { font-size: 1.25rem; }
    .page-subtitle { font-size: 2.2rem; }

}

/* ---------------------------------------------------------
   1辺だけ色のラインを引く形は使わない（デザイン方針）
   旧CSS（page.css / service.css）に残っているぶんを打ち消す。
   見出しは下線か色だけで表し、ボックスは「淡い面＋1pxの枠」に統一する。
--------------------------------------------------------- */
.column-point-box, .problem-box, .info-box, .alert-box, .alert-box--danger,
.column-check-list, .column-step-list, .case-card__comment {
    border: 0 !important;
}
/* 面だけで見せるボックス。枠は引かない */
.toc-box, .service-toc, .price-sub-box, .supervisor-box, .case-card__comment,
.column-check-list, .column-step-list {
    border: 0 !important;
    background: rgba(0, 109, 210, .075);
    border-radius: var(--r-lg);
}

/* グリッドの中のボックスが、隣の高さに引っぱられて下が間延びしていたので揃えない */
.price-sub, .assurance-list, .reason-list, .related-list { align-items: start; }
.column-content h2, .column-content h3, .column-content h4,
.work-content h2, .work-content h3, .work-content h4,
.page-section h3, .service-detail h3 {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================
   スマホの基準値
   これまで PC と同じ 17px / 大きい余白トークンのままだったため、
   文字が大きく余白が間延びしていた。基準から落として全体を詰める。
   個別の調整より、ここを直すほうが効く。
========================================================= */
@media (max-width: 768px) {
    /* rem の元を下げる。これだけで見出し・本文・ボタンが一律に縮む */
    html { font-size: 15px; }

    /* 余白トークンを一段ずつ詰める */
    :root {
        --sp-5: 18px; --sp-6: 24px; --sp-7: 32px;
        --sp-8: 40px; --sp-9: 48px; --sp-10: 56px;
        --section-spacing: 48px;
        --gut: 16px;
    }

    body { line-height: 1.85; }
    .section { padding: 48px 0; }

    /* 見出し */
    .section-title { font-size: 1.15rem; line-height: 1.7; margin-bottom: var(--sp-5); }
    .section-title span { font-size: 2rem; margin-bottom: var(--sp-2); }
    .sec-head { margin-bottom: var(--sp-6); gap: var(--sp-4); }
    .section-lead { font-size: .96rem; margin-bottom: var(--sp-6); }
    .detail-h2 { font-size: 1.12rem; line-height: 1.7; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); }
    .page-title { font-size: 1.18rem; line-height: 1.65; }
    .page-subtitle { font-size: 2rem; margin-bottom: var(--sp-2); }
    .page-header { padding: var(--sp-6) 0; }
    h3 { font-size: 1.02rem; }
    .intro h2 { font-size: 1.18rem; }
    .str__text h3 { font-size: 1.12rem; }
    .cta-hero h2 { font-size: 1.35rem; }

    /* 箱の余白 */
    .alert-box, .info-box, .problem-box, .column-point-box { padding: var(--sp-5) var(--sp-5) !important; }
    .toc-box, .service-toc, .price-sub-box, .supervisor-box { padding: var(--sp-5); }
    .svc__body, .card__body, .reason-item, .voice { padding: var(--sp-5); }
    .symptom-card { padding: var(--sp-5); }
    .case-card__body { padding: var(--sp-5); }

    /* ボタン */
    .btn, .btn-more, .btn-sub { padding: 14px 22px; font-size: .94rem; }
    .inline-cta a { padding: 14px 16px; font-size: .92rem; }
    .column-back-list, .work-back-list { padding: 13px 26px; font-size: .9rem; }

    /* 表 */
    .price-table th, .price-table td, .data-table th, .data-table td { padding: 11px 12px; font-size: .92rem; }
    .company-table th, .company-table td { padding: 12px 14px; font-size: .92rem; }
}

@media (max-width: 400px) {
    html { font-size: 14.5px; }
    :root { --gut: 14px; }
}

/* =========================================================
   ホバーの方針
   動く（transform / 影が出る）のは「リンク」だけ。
   リンクでない要素（div・tr・見出しなど）はホバーで反応させない。
   旧CSS（base / page / service）が当てているぶんをここで打ち消す。
========================================================= */

/* --- リンクでない箱。浮き上がらせない --- */
.reason-item:hover,
.staff-list-item:hover,
.assurance-item:hover,
.symptom-card:hover,
.case-card:hover,
.voice:hover,
.toc-box:hover,
.price-sub-box:hover,
.supervisor-box:hover,
.alert-box:hover,
.info-box:hover,
.problem-box:hover,
.column-point-box:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--line) !important;
}

/* --- 押せない表の行。ホバーで色を変えない（押せると誤解させる） --- */
.price-table tbody tr:hover,
.data-table tbody tr:hover,
.company-table tbody tr:hover,
.work-data-table tbody tr:hover {
    background: transparent !important;
}

/* --- 旧CSSの汎用クラス。リンクでない要素に付いていても動かさない --- */
.hover-up:not(a):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* リンクのホバーはそのまま残す（.btn / .card / .svc / .related-card / .trouble a など）。
   アコーディオン（summary）は押せる要素なので、色の変化だけ残している。 */