@charset "UTF-8";
/*==================================================================
  FACILINEX  /  css/style.css  ─ v20260906-integrated（完成版）
  ------------------------------------------------------------------
  01 Reset            02 Variables        03 Base
  04 Typography       05 Utility          06 Layout
  07 Header / Nav     08 Main Visual      09 Consult
  10 SEO intro        11 Battery Cards    12 Data
  13 Field (t-site)   14 Reason           15 Cost / Article
  16 FAQ（統合）      17 Company          18 Contact / Form
  19 Footer           20 Utility (SP)     21 SP Overrides
  22 追従CTA モーション  23 Design Brush-up  24 Layout Fixes（統合）
  25 Print
  ------------------------------------------------------------------
  26 Polish Layer（統合）  ← v20260906-integrated で追加
      T  Tokens & base body treatment
      H  Sticky header
      S  Section rhythm
      E  Eyebrow, common headings (.hdg01 family)
      C1 Closer Look — layout alignment
      C2 Closer Look — typography & image frame
      P  Panel / card system
      B  Battery cards + CL series highlight card
      D  Cost — section headings, feature-box, factor grid, tables
      F  Field — SVG inline icons (production PNG fallback)
      Q  FAQ
      Y  Company section
      M  MV Hero polish
      X  Contact form (white-background section)
      N  Buttons / CTA / links
      R  Footer + reduced-motion + print
      Z  Responsive (SP ≤760)
  ------------------------------------------------------------------
  v20260906-integrated の変更点
  ・元 v20260902 の 25 節はすべて維持（4058 行相当）
  ・Polish Layer を第 26 節として末尾追加
    - Closer Look の高さ整列（Grid 化）
    - 全カードの box-sizing:border-box、重なり解消
    - タイポスケール底上げ（.hdg01_en 24→70px 等）
    - ヘッダー sticky 追従
    - Company 大見出し対応
    - Contact 白背景対応
    - Field カードの SVG インラインアイコン
    - CTA / フォーム / フッターの上質化
    - モーション軽減 / Print 対応
  ・元の 25 節と競合しないよう、必要最小限に !important を使用
==================================================================*/


/* ==========================================================================
   Sections 01–25 : Original style.css v20260902
   ========================================================================== */

/*==================================
01 Reset
==================================*/
* { box-sizing: border-box; }

li { margin: 0; list-style: none; }

ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6,
p, figure, dl, dt, dd { margin: 0; }

figcaption, figure, main,
article, aside, footer,
header, nav, section { display: block; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

img {
    border-style: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button { border: none; }
button, input { overflow: visible; }
button, select { text-transform: none; }

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

textarea { overflow: auto; }

[type="checkbox"],
[type="radio"] { box-sizing: border-box; padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }


/*==================================
02 Variables
==================================*/
:root {
    /* ---- color ---- */
    --primary:        #D2141B;
    --primary-dark:   #561B1C;
    --accent:         #d42d26;
    --text:           #000;
    --white:          #fff;
    --black:          #111;
    --gray-bg:        #eee;
    --gray-line:      #B6B6B6;
    --footer-text:    #6b6b6b;
    --note-gray:      #767676;
    --placeholder:    #6f6f6f;
    --error:          #D2141B;
    --focus-ring:     #FF5A5F;

    /* パネル背景・境界線 */
    --panel-bg:       rgba(51, 51, 51, .85);
    --line-white:     rgba(255, 255, 255, .25);
    --line-white-85:  rgba(255, 255, 255, .85);
    --box-white-08:   rgba(255, 255, 255, .08);
    --box-white-18:   rgba(255, 255, 255, .18);
    --hairline:       rgba(255, 255, 255, .16);
    --label-white:    rgba(255, 255, 255, .70);

    /* 暗背景セクションの面・線 */
    --panel-soft:     rgba(255, 255, 255, .055);
    --panel-soft-h:   rgba(255, 255, 255, .085);
    --panel-emph:     rgba(255, 255, 255, .07);
    --line-soft:      rgba(255, 255, 255, .18);
    --line-mid:       rgba(255, 255, 255, .22);
    --line-strong:    rgba(255, 255, 255, .28);

    /* ガラス面 */
    --glass-bg:       rgba(35, 35, 35, .45);
    --glass-bg-h:     rgba(45, 45, 45, .60);
    --glass-line:     rgba(255, 255, 255, .12);
    --glass-line-h:   rgba(255, 255, 255, .30);
    --glass-shadow:   0 8px 32px rgba(0, 0, 0, .20);
    --glass-shadow-h: 0 12px 40px rgba(0, 0, 0, .30);

    /* ---- gradient ---- */
    --grad-red:   linear-gradient(180deg, var(--primary), var(--primary-dark));
    --grad-red-h: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-dark));
    --grad-bar:   linear-gradient(180deg, #ff4e4e, var(--primary));

    /* ---- radius ---- */
    --radius:     14px;
    --radius-xs:  2px;
    --radius-sm:  3px;
    --radius-lg:  18px;
    --radius-xl:  22px;

    /* ---- shadow ---- */
    --shadow:            0 8px 20px rgba(0, 0, 0, .25);
    --shadow-card:       0 18px 45px rgba(0, 0, 0, .22);
    --shadow-card-hover: 0 20px 45px rgba(0, 0, 0, .24);
    --shadow-cta:        0 6px 18px rgba(0, 0, 0, .35);
    --shadow-cta-glow:   0 12px 28px rgba(210, 20, 27, .40);
    --text-shadow:       0 2px 8px rgba(0, 0, 0, .6);
    --text-shadow-st:    0 2px 8px rgba(0, 0, 0, .7);

    /* ---- font family ---- */
    --font-base:   "Noto Sans JP", sans-serif;
    --font-serif:  "Noto Serif JP", serif;
    --font-mont:   "Montserrat", sans-serif;
    --font-tasa:   "TASA Orbiter", sans-serif;
    --font-outfit: "Outfit", sans-serif;

    /*---- font size：ディスプレイ系 ----*/
    --fz-108: clamp(8.8rem, 10.546875vw, 10.8rem);
    --fz-88:  clamp(7.2rem, 8.59375vw, 8.8rem);
    --fz-64:  clamp(5.2rem, 6.25vw, 6.4rem);
    --fz-40:  clamp(3.2rem, 3.90625vw, 4rem);
    --fz-36:  clamp(3rem, 4.6875vw, 3.6rem);
    --fz-32:  clamp(2.6rem, 4.1666666667vw, 3.2rem);
    --fz-26:  clamp(2.2rem, 3.3854166667vw, 2.6rem);
    --fz-24:  clamp(2rem, 3.125vw, 2.4rem);
    --fz-21:  clamp(1.8rem, 2.734375vw, 2.1rem);
    --fz-18:  1.8rem;

    /*---- font size：本文系スケール ----*/
    --fs-3xs: 1.2rem;
    --fs-2xs: 1.3rem;
    --fs-xs:  clamp(1.3rem, .25vw + 1.2rem, 1.4rem);
    --fs-sm:  clamp(1.4rem, .35vw + 1.3rem, 1.5rem);
    --fs-md:  clamp(1.5rem, .40vw + 1.4rem, 1.6rem);
    --fs-lg:  clamp(1.7rem, .60vw + 1.5rem, 1.8rem);
    --fs-xl:  clamp(1.9rem, 1.00vw + 1.6rem, 2.1rem);
    --fs-2xl: clamp(2.2rem, 1.60vw + 1.8rem, 2.7rem);
    --fs-3xl: clamp(2.6rem, 2.40vw + 2.0rem, 3.6rem);

    /*---- 記事本文トークン ----*/
    --article-measure:   900px;
    --article-body:      1.6rem;
    --article-body-lh:   1.9;
    --article-sub:       1.5rem;
    --article-sub-lh:    1.9;
    --article-note:      1.3rem;
    --article-note-lh:   1.85;
    --article-h3:        2rem;
    --article-h3-lh:     1.5;
    --article-h4:        1.8rem;
    --article-h4-lh:     1.55;
    --article-lead:      1.8rem;
    --article-lead-lh:   1.85;
    --article-gap-h3:    32px;

    /*---- チェックカード（Field/Consult）用トークン ----*/
    --check-card-min:    238px;                                   /* 1枚の最小幅 */
    --check-card-fz:     clamp(1.4rem, .55vw + 1.24rem, 1.55rem); /* 14〜15.5px */
    --check-card-lh:     1.75;
    --check-card-gap:    clamp(12px, 1.4vw, 20px);

    /*---- 行間・字間 ----*/
    --lh-tight: 1.55;
    --lh-base:  1.8;
    --lh-loose: 2.05;
    --ls-tight: .02em;
    --ls-base:  .04em;
    --ls-wide:  .08em;

    /* ---- z-index ---- */
    --z-cta-sp:  5;
    --z-nav:     6;
    --z-toggle:  7;

    /* ---- other ---- */
    --transition: .3s;
    --arrow:      url("../img/common/arrow.png");
    --sp-cta-h:   77px;
}

/* SP：ディスプレイ系・記事本文トークンを差し替える */
@media screen and (max-width: 768px) {
    :root {
        --fz-108: clamp(7.2rem, 11.4583333333vw, 8.8rem);
        --fz-88:  clamp(5.8rem, 9.375vw, 7.2rem);
        --fz-64:  clamp(4.2rem, 6.7708333333vw, 5.2rem);
        --fz-40:  clamp(3rem, 4.1666666667vw, 3.2rem);

        --article-body:    1.5rem;
        --article-body-lh: 1.85;
        --article-sub:     1.4rem;
        --article-note:    1.2rem;
        --article-h3:      1.8rem;
        --article-h4:      1.6rem;
        --article-lead:    1.6rem;
        --article-gap-h3:  26px;
    }
}

@media screen and (max-width: 450px) {
    :root {
        --fz-36: clamp(2.8rem, 6.6666666667vw, 3rem);
    }
}


/*==================================
03 Base
==================================*/
html {
    font-size: 62.5%;
    font-family: sans-serif;
    line-height: 1.15;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .06em;
    color: var(--text);
}

body::before {
    position: fixed;
    content: "";
    inset: 0;
    z-index: -1;
    background: url("../img/common/body-back.jpg") no-repeat top center;
    background-size: cover;
}

html.nav-open { overflow: hidden; }

section[id], div[id] { scroll-margin-top: 24px; }

a {
    color: var(--text);
    text-decoration: none;
    background-color: transparent;
    transition: var(--transition);
}

a:hover { text-decoration: none; opacity: .65; }
a:active, a:hover { outline-width: 0; }

table {
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
}

/*---- フォーカス表示 ----*/
:focus:not(:focus-visible) { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ---- form fields ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: var(--gray-bg);
    border: none;
    font-size: 1.6rem;
    width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"] {
    margin: 0;
    padding: 20px 25px;
    min-height: 60px;
}

textarea {
    padding: 20px 25px;
    min-height: 235px;
    resize: vertical;
}

select {
    font-size: 1.3rem;
    height: 2.5em;
    padding: .5em;
    width: auto;
    min-width: 7em;
}

@media screen and (max-width: 768px) {
    select { font-size: 1.6rem; }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

input[type="checkbox"],
input[type="radio"] { background: var(--white); cursor: pointer; margin-right: .5em; }

textarea::placeholder,
input::placeholder { font-size: 1.6rem; color: var(--placeholder); }


/*==================================================================
04 Typography
==================================================================*/

/*---- 04-A 基本ウェイト ----*/
h1, h2, h3, h4, h5, h6,
dt, th, strong, b { font-weight: 700; }

/*---- 04-B 意図した太字だけを残す ----*/
.btn-B,
.t-date-box .txt,
.t-reason-list li,
.t-faq-list-block dt p,
.t-faq-list-block dt .faq-q-text,
.t-company-list dd,
.form-contact-divider {
    font-weight: 700;
}

/*---- 04-C 日本語の折返し ----*/
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li, dd, td, figcaption) { text-wrap: pretty; }

@supports (word-break: auto-phrase) {
    .seo-intro h2,
    .hdg01_ja,
    .hdg01_sub,
    .cost-heading,
    .cost-subheading,
    .cost-emphasis,
    .cost-lead,
    .reason-text h3 { word-break: auto-phrase; }
}

/*---- 04-D 暗背景セクションの配色テーマ ----*/
.sec-dark,
.t-cost,
.sec-article,
.main-visual-under,
.battery-card { color: var(--white); }

.sec-dark :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td,
                 strong, small, span, b, em, figcaption, hr),
.t-cost :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td,
               strong, small, span, b, em, figcaption),
.sec-article :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td,
                    strong, small, span, b, em, figcaption),
.main-visual-under :where(h1, h2, h3, h4, h5, h6, p, li, span,
                          strong, small, b, em),
.battery-card :where(h1, h2, h3, h4, h5, h6, p, div, span,
                     strong, small, b, em) { color: inherit; }

.t-date a:not([class]),
.t-site a:not([class]),
.t-consult a:not([class]),
.seo-intro a:not([class]),
.t-reason a:not([class]),
.t-cost a:not([class]),
.sec-article a:not([class]),
.t-faq a:not([class]),
.t-company a:not([class]) { color: inherit; }

.t-contact,
.t-contact :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td,
                  strong, small, span, b, em, label, legend) {
    color: var(--black);
}

/*---- 04-E 書体・ウェイト・行間ユーティリティ ----*/
.noto-sans  { font-family: var(--font-base); }
.noto-serif { font-family: var(--font-serif); }
.tasa       { font-family: var(--font-tasa); }
.montserrat { font-family: var(--font-mont); }

.thin     { font-weight: 100; }
.ex-light { font-weight: 200; }
.light    { font-weight: 300; }
.regular  { font-weight: 400; }
.medium   { font-weight: 500; }
.sm-bold  { font-weight: 600; }
.bold     { font-weight: 700; }
.ex-bold  { font-weight: 800; }
.black    { font-weight: 900; }

.lh1  { line-height: 1; }
.lh18 { line-height: 1.8; }
.lh2  { line-height: 2; }
.ls5  { letter-spacing: .05em; }

/*---- 04-F フォントサイズ ----*/
.fz108 { font-size: var(--fz-108); }
.fz88  { font-size: var(--fz-88); }
.fz64  { font-size: var(--fz-64); }
.fz40  { font-size: var(--fz-40); }
.fz36  { font-size: var(--fz-36); }
.fz32  { font-size: var(--fz-32); }
.fz26  { font-size: var(--fz-26); }
.fz24  { font-size: var(--fz-24); }
.fz21  { font-size: var(--fz-21); }
.fz18  { font-size: var(--fz-18); }

.col_white { color: var(--white); }

.seo-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*---- 04-G 見出し ----*/
.hdg01 { display: flex; flex-direction: column; gap: 15px; }

.hdg01_en {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mont), sans-serif;
    font-weight: 300;
    font-size: var(--fz-88);
    letter-spacing: .06em;
    line-height: 1;
    font-style: normal;
    overflow-wrap: normal;
    color: currentColor;
}

@supports (-webkit-text-stroke: 1px currentColor) {
    .hdg01_en {
        color: transparent;
        -webkit-text-stroke: 1px currentColor;
    }

    .t-contact .hdg01_en { -webkit-text-stroke-width: 1.5px; }
}

@media (prefers-contrast: more) {
    .hdg01_en { color: currentColor; -webkit-text-stroke: 0; }
}

.hdg01_en.outfit { font-family: var(--font-outfit); font-weight: 200; }

.hdg01_ja { font-size: 1.8rem; font-weight: 700; }

.hdg01_sub {
    display: block;
    max-width: 780px;
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: .03em;
}

@media screen and (max-width: 768px) {
    .hdg01_sub { font-size: 1.4rem; line-height: 1.85; }
}

.hdg02 { position: relative; padding-left: 13px; }

.hdg02::before {
    position: absolute;
    content: "";
    width: 3px;
    height: 1em;
    background: var(--white);
    left: 0;
    top: .4em;
}

.hdg02.red::before { background: var(--accent); }


/*==================================
05 Utility
==================================*/
.tac { text-align: center; }
.tar { text-align: right; }
.vt_align_top { vertical-align: top; }
.wd_100 { width: 100%; }

.flexbox { display: flex; }
.flex-row { flex-direction: row; }
.flex-row-rev { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-rev { flex-direction: column-reverse; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-justify-start { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-center { justify-content: center; }
.flex-justify-between { justify-content: space-between; }
.flex-justify-around { justify-content: space-around; }
.flex-align-start { align-items: flex-start; }
.flex-align-end { align-items: flex-end; }
.flex-align-center { align-items: center; }
.flex-align-baseline { align-items: baseline; }

/*---- margin ----*/
.mt0{margin-top:0;} .mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;}
.mt20{margin-top:20px;} .mt25{margin-top:25px;} .mt30{margin-top:30px;} .mt35{margin-top:35px;}
.mt40{margin-top:40px;} .mt45{margin-top:45px;} .mt50{margin-top:50px;} .mt55{margin-top:55px;}
.mt60{margin-top:60px;} .mt65{margin-top:65px;} .mt70{margin-top:70px;} .mt75{margin-top:75px;}
.mt80{margin-top:80px;} .mt85{margin-top:85px;} .mt90{margin-top:90px;} .mt95{margin-top:95px;}
.mt100{margin-top:100px;}

.mb0{margin-bottom:0;} .mb5{margin-bottom:5px;} .mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;} .mb25{margin-bottom:25px;} .mb30{margin-bottom:30px;} .mb35{margin-bottom:35px;}
.mb40{margin-bottom:40px;} .mb45{margin-bottom:45px;} .mb50{margin-bottom:50px;} .mb55{margin-bottom:55px;}
.mb60{margin-bottom:60px;} .mb65{margin-bottom:65px;} .mb70{margin-bottom:70px;} .mb75{margin-bottom:75px;}
.mb80{margin-bottom:80px;} .mb85{margin-bottom:85px;} .mb90{margin-bottom:90px;} .mb95{margin-bottom:95px;}
.mb100{margin-bottom:100px;}

/*---- padding ----*/
.pt0{padding-top:0;} .pt10{padding-top:10px;} .pt20{padding-top:20px;} .pt30{padding-top:30px;}
.pt40{padding-top:40px;} .pt50{padding-top:50px;} .pt60{padding-top:60px;} .pt70{padding-top:70px;}
.pt80{padding-top:80px;} .pt90{padding-top:90px;} .pt100{padding-top:100px;}

.pb0{padding-bottom:0;} .pb10{padding-bottom:10px;} .pb20{padding-bottom:20px;} .pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;} .pb50{padding-bottom:50px;} .pb60{padding-bottom:60px;} .pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;} .pb90{padding-bottom:90px;} .pb100{padding-bottom:100px;}

/*---- gap ----*/
.g0{gap:0;} .g10{gap:10px;} .g15{gap:15px;} .g20{gap:20px;} .g25{gap:25px;} .g30{gap:30px;}
.g40{gap:40px;} .g50{gap:50px;} .g60{gap:60px;}

/*---- ボタン ----*/
.btn-A,
.h-contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 57px;
    background: var(--grad-red);
    border-radius: var(--radius-xs);
    color: var(--white);
    font-family: var(--font-mont);
    font-weight: 700;
    letter-spacing: .04em;
}

.btn-A { width: 250px; }

.btn-B {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 365px;
    width: 100%;
    min-height: 70px;
    background: transparent;
    border: 1px solid var(--white);
    border-radius: var(--radius-sm);
    color: var(--white);
}

.btn-B span { position: relative; display: block; }

.btn-B span::before {
    display: inline-block;
    content: "";
    width: 16px;
    height: 16px;
    background: var(--arrow) no-repeat center center;
    background-size: cover;
    margin-right: 10px;
    vertical-align: middle;
}

.btn-center { margin-left: auto; margin-right: auto; }

/*---- バッジ ----*/
.cl-badge {
    display: block;
    width: fit-content;
    margin: 12px auto 0;
    padding: 6px 20px;
    background: #FF5A5F;
    border-radius: 999px;
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
}

/*---- 改行・表示の出し分け ----*/
.br-pc, .pc-br, .pc-only { display: inline; }
.br-sp, .sp-br, .sp-break { display: none; }
.sp { display: none; }

@media screen and (max-width: 768px) {
    .br-pc, .pc-br, .pc-only { display: none; }
    .br-sp, .sp-br, .sp-break { display: inline; }
}

@media screen and (max-width: 450px) {
    .sp { display: block; }
}

/*---- 電話リンク ----*/
@media screen and (min-width: 651px) {
    a[href^="tel:"] { pointer-events: none; }
}

@media screen and (max-width: 650px) {
    a[href^="tel:"] { text-decoration: underline; display: inline-block; }
}

/*---- アニメーション ----*/
.fadein { animation: fadeIn 2s ease 0s 1 normal; }

.fadeInTop, .fadeInBottom, .fadeInLeft, .fadeInRight {
    animation-fill-mode: both;
    animation-duration: 1s;
    visibility: visible !important;
}

.fadeInTop    { animation-name: fadeInTop; }
.fadeInBottom { animation-name: fadeInBottom; }
.fadeInLeft   { animation-name: fadeInLeft; }
.fadeInRight  { animation-name: fadeInRight; }

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInTop { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInBottom { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes mv-scroll { 0% { translate: 0 -100%; } 100% { translate: 0 100%; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .fadein,
    .fadeInTop, .fadeInBottom, .fadeInLeft, .fadeInRight,
    .mv-scroll span::before {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/*==================================
06 Layout
==================================*/
.wrap1160 {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 20px;
    padding-left: 20px;
}

.wrap880 {
    max-width: 920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 20px;
    padding-left: 20px;
}

.home section:not(:last-of-type),
.page section:not(:last-of-type) { margin-bottom: 120px; }

@media screen and (max-width: 768px) {
    .home section:not(:last-of-type),
    .page section:not(:last-of-type) { margin-bottom: 60px; }
}


/*==================================================================
07 Header / Navigation / 追従CTA
==================================================================*/
.header {
    position: relative;
    width: 100%;
    background: transparent;
    padding: 50px 55px 0;
}

.header .logo { line-height: 1; }

@media screen and (min-width: 769px) {
    .header {
        display: flex;
        align-items: center;
        padding: 35px 140px 0 55px;
        z-index: 10;
    }

    .header .logo { flex: 0 0 auto; margin: 0; }

    .toggle { top: 32px; right: 45px; }
}

@media screen and (max-width: 768px) {
    .header { display: block; padding: 25px; }
}

@media screen and (max-width: 450px) {
    .header .logo img { width: 58.4444444444vw; }
}

/*---- オーバーレイ型ナビ ----*/
.gnav {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    padding: 90px 20px 40px;
    background: rgba(0, 0, 0, .78);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: var(--z-nav);
}

.gnav.active { opacity: 1; visibility: visible; }

.gnav .main-nav { width: 100%; text-align: center; }

.gnav .main-nav li:not(:last-child) { margin-bottom: 10px; }

.gnav .main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 12px;
    font-family: var(--font-mont);
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.25;
    letter-spacing: .08em;
    color: var(--white);
}

.gnav .main-nav a:hover { opacity: .6; }

.gnav .main-nav a:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

.gnav .main-nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
}

.gnav .main-nav li.gnav-contact { margin-top: 28px; }

.gnav .main-nav .gnav-contact a {
    display: flex;
    width: fit-content;
    min-width: 240px;
    min-height: 60px;
    margin: 0 auto;
    padding: 10px 32px;
    background: var(--grad-red);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-cta);
    font-size: clamp(1.7rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--white);
}

.gnav .main-nav .gnav-contact a:hover { opacity: .85; }

@media screen and (max-height: 700px) {
    .gnav { padding-top: 80px; align-items: flex-start; }
    .gnav .main-nav a { font-size: clamp(2rem, 5.2vw, 3rem); min-height: 40px; }
    .gnav .main-nav li:not(:last-child) { margin-bottom: 6px; }
    .gnav .main-nav li.gnav-contact { margin-top: 18px; }
    .gnav .main-nav .gnav-contact a { min-height: 52px; }
}

/*---- 開閉アニメーション ----*/
#gnav {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .45s;
}

#gnav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}

#gnav .main-nav li {
    opacity: 0;
    transform: translateY(-12px);
    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.22, 1, .36, 1);
}

#gnav.active .main-nav li { opacity: 1; transform: translateY(0); }

#gnav.active .main-nav li:nth-child(1) { transition-delay: .08s; }
#gnav.active .main-nav li:nth-child(2) { transition-delay: .13s; }
#gnav.active .main-nav li:nth-child(3) { transition-delay: .18s; }
#gnav.active .main-nav li:nth-child(4) { transition-delay: .23s; }
#gnav.active .main-nav li:nth-child(5) { transition-delay: .28s; }
#gnav.active .main-nav li:nth-child(6) { transition-delay: .33s; }
#gnav.active .main-nav li:nth-child(7) { transition-delay: .38s; }
#gnav.active .main-nav li:nth-child(8) { transition-delay: .43s; }

#gnav:not(.active) .main-nav li { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
    #gnav, #gnav.active,
    #gnav .main-nav li,
    #gnav.active .main-nav li { transition: none; transform: none; }
}

/*---- ハンバーガー ----*/
.toggle {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    right: 20px;
    top: 20px;
    padding: 0;
    background: var(--grad-red);
    border: none;
    border-radius: var(--radius-xs);
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    cursor: pointer;
    z-index: var(--z-toggle);
}

.toggle__bar { position: relative; margin: 8px auto; user-select: none; }

.toggle__bar,
.toggle__bar::before,
.toggle__bar::after {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--white);
    outline: 1px solid transparent;
    transition-property: background-color, transform;
    transition-duration: var(--transition);
}

.toggle__bar::before,
.toggle__bar::after { position: absolute; content: ""; }

.toggle__bar::before { top: -10px; }
.toggle__bar::after  { top: 10px; }

.toggle.active .toggle__bar { background-color: transparent; }
.toggle.active .toggle__bar::before { transform: translateY(10px) rotate(45deg); }
.toggle.active .toggle__bar::after  { transform: translateY(-10px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .toggle__bar,
    .toggle__bar::before,
    .toggle__bar::after { transition: none; }
}

/*---- 追従CTA（SP 500px以下） ----*/
.h-contact {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-cta-sp);
}

.h-contact-sp { display: none; }

@media screen and (min-width: 501px) {
    .h-contact { display: none !important; }
}

@media screen and (max-width: 500px) {
    .h-contact {
        width: 100%;
        padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(17, 17, 17, .72);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .h-contact a {
        width: 100%;
        font-family: var(--font-base);
        font-size: 1.6rem;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-cta);
    }

    .h-contact-sp { display: inline; }

    body:has(.gnav.active) .h-contact,
    body:has(#c-form :focus) .h-contact {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}


/*==================================================================
  08 Main Visual (HERO) — v20260906-hero-refresh
  ------------------------------------------------------------------
  新HERO: サーバールーム写真を全面背景、左側にコピー、
          .mv / .mv-wrap / .mv-hero / .mv-hero-bg /
          .mv-hero-content / .mv-hero-logo / .mv-hero-copy /
          .mv-hero-lead / .mv-hero-title / .mv-hero-desc /
          .mv-hero-cta / .mv-hero-cta-arrow / .mv-scroll
==================================================================*/

/* --- Section wrapper --- */
.mv {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #0b0b0f;
}

.mv-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* --- HERO container --- */
.mv-hero {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 88vh, 860px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-block: clamp(56px, 8vw, 120px);
    isolation: isolate;
    overflow: hidden;
}

/* --- Background image + gradient overlay --- */
.mv-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/top/facilinex-hero-serverroom.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

.mv-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 10, 14, .92) 0%,
            rgba(8, 10, 14, .82) 22%,
            rgba(8, 10, 14, .55) 48%,
            rgba(8, 10, 14, .18) 72%,
            rgba(8, 10, 14, 0) 100%
        );
    pointer-events: none;
}

.mv-hero-bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0), rgba(8, 10, 14, .55));
    pointer-events: none;
}

/* --- Content column --- */
.mv-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-inline: clamp(24px, 6vw, 88px);
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 56px);
}

/* --- Logo --- */
.mv-hero-logo {
    display: block;
    line-height: 1;
}

.mv-hero-logo img {
    display: block;
    width: 285px;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .28));
}

/* --- Copy stack --- */
.mv-hero-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.6vw, 24px);
    max-width: none;
    color: #fff;
}

.mv-hero-lead {
    font-family: var(--font-base);
    font-size: clamp(1.5rem, 1.3vw, 1.8rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

.mv-hero-title {
    font-family: var(--font-base);
    font-size: clamp(3.35rem, 4.65vw, 6.4rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.035em;
    white-space: nowrap;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 40px rgba(0, 0, 0, .35);
}

.mv-hero-desc {
    font-family: var(--font-base);
    font-size: clamp(1.5rem, 1.15vw, 1.7rem);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .88);
    margin: clamp(4px, .6vw, 12px) 0 clamp(8px, 1.2vw, 20px);
    max-width: 620px;
}

/* --- CTA --- */
.mv-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    align-self: flex-start;
    min-height: 62px;
    padding: 18px 34px 18px 40px;
    border-radius: 999px;
    background: linear-gradient(180deg, #E5252C 0%, #D2141B 55%, #7A1E22 100%);
    color: #ffffff;
    font-family: var(--font-base);
    font-size: clamp(1.5rem, 1.1vw, 1.65rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    line-height: 1;
    box-shadow:
        0 14px 34px rgba(210, 20, 27, .34),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    transition:
        transform .3s cubic-bezier(.2, .7, .3, 1),
        box-shadow .3s ease,
        filter .3s ease;
}

.mv-hero-cta:hover,
.mv-hero-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 20px 44px rgba(210, 20, 27, .48),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    filter: brightness(1.06);
    color: #ffffff;
    opacity: 1;
}

.mv-hero-cta:focus-visible {
    outline: 2px solid #FF7A7F;
    outline-offset: 4px;
}

.mv-hero-cta-arrow {
    display: inline-block;
    font-family: var(--font-mont);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}

.mv-hero-cta:hover .mv-hero-cta-arrow,
.mv-hero-cta:focus-visible .mv-hero-cta-arrow {
    transform: translateX(6px);
}

/* --- Scroll indicator --- */
.mv-scroll {
    position: absolute;
    left: clamp(20px, 3vw, 40px);
    bottom: clamp(20px, 3vw, 40px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.mv-scroll p {
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-family: var(--font-mont);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    text-transform: uppercase;
}

.mv-scroll span {
    position: relative;
    display: block;
    width: 1px;
    height: 78px;
    overflow: hidden;
    background: rgba(255, 255, 255, .18);
}

.mv-scroll span::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .95);
    animation: mv-scroll 1.6s cubic-bezier(.55, .05, .45, .95) infinite;
}

/* --- Responsive --- */
@media screen and (max-width: 1200px) {
    .mv-hero-title { font-size: 3.7rem; }
    .mv-hero-bg { background-position: 70% center; }
}

@media screen and (max-width: 1024px) {
    .mv-hero { min-height: clamp(520px, 78vh, 720px); }
    .mv-hero-bg::before {
        background: linear-gradient(
            90deg,
            rgba(8, 10, 14, .90) 0%,
            rgba(8, 10, 14, .74) 40%,
            rgba(8, 10, 14, .40) 70%,
            rgba(8, 10, 14, .08) 100%
        );
    }
}

@media screen and (max-width: 768px) {
    .mv-hero {
        min-height: 88vh;
        padding-block: clamp(72px, 12vw, 120px) clamp(88px, 14vw, 120px);
        justify-content: flex-start;
    }
    .mv-hero-bg { background-position: 60% center; }
    .mv-hero-bg::before {
        background: linear-gradient(
            180deg,
            rgba(8, 10, 14, .78) 0%,
            rgba(8, 10, 14, .70) 40%,
            rgba(8, 10, 14, .82) 100%
        );
    }
    .mv-hero-content {
        gap: clamp(20px, 4vw, 32px);
        padding-inline: 20px;
        align-items: flex-start;
    }
    .mv-hero-logo img { width: 190px; height: auto; }
    .mv-hero-copy { gap: 14px; max-width: 100%; }
    .mv-hero-lead { font-size: 1.4rem; letter-spacing: .06em; }
    .mv-hero-title {
        font-size: 2.85rem;
        line-height: 1.2;
        letter-spacing: -.045em;
        white-space: nowrap;
    }
    .mv-hero-desc {
        font-size: 1.4rem;
        line-height: 1.85;
        letter-spacing: .03em;
    }
    .mv-hero-cta {
        width: 100%;
        max-width: 420px;
        justify-content: center;
        padding: 18px 28px;
        font-size: 1.5rem;
        min-height: 58px;
    }
    .mv-scroll { left: 12px; bottom: 12px; }
    .mv-scroll p { font-size: 1rem; }
    .mv-scroll span { height: 56px; }
}

@media screen and (max-width: 480px) {
    .mv-hero {
        min-height: 92vh;
        padding-block: 88px 108px;
    }
    .mv-hero-content { padding-inline: 20px; }
    .mv-hero-logo img { width: 155px; height: auto; }
    .mv-hero-title {
        font-size: 2.55rem;
        line-height: 1.24;
    }
    .mv-hero-lead { font-size: 1.3rem; }
    .mv-hero-desc { font-size: 1.35rem; }
    .mv-hero-cta {
        font-size: 1.45rem;
        padding: 16px 22px;
        min-height: 54px;
    }
}

@media screen and (max-width: 375px) {
    .mv-hero-content { padding-inline: 18px; }
    .mv-hero-title { font-size: 2.6rem; }
    .mv-hero-desc { font-size: 1.3rem; }
    .mv-scroll { display: none; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .mv-hero-cta,
    .mv-hero-cta-arrow,
    .mv-scroll span::before {
        transition: none !important;
        animation: none !important;
    }
}


/*==================================
09 Consult（赤帯ブロック）
==================================*/
.main-visual-under {
    max-width: 1025px;
    width: 95%;
    background: var(--grad-red-h);
    border: 1px solid var(--white);
    border-radius: var(--radius-sm);
    padding: 45px 50px 35px;
}

.main-visual-under-flex { width: 100%; margin-top: 30px; }

.main-visual-under p { line-height: 1.9; }

.consult-box {
    max-width: 820px;
    margin: 60px auto 40px;
    padding: 36px 40px;
    background: var(--box-white-08);
    border: 1px solid var(--box-white-18);
    border-radius: var(--radius-lg);
    text-align: center;
}

.consult-box h3 { margin-bottom: 18px; font-size: 2.8rem; font-weight: 700; }
.consult-box p  { margin: 0; font-size: 1.8rem; font-weight: 400; line-height: 1.9; }

.mv-contact-btn {
    display: block;
    width: fit-content;
    margin: 40px auto 0;
    text-align: center;
}

.mv-contact-btn img { display: block; max-width: 100%; height: auto; }

@media screen and (max-width: 768px) {
    .main-visual-under { padding: 20px 25px; }
}

@media screen and (max-width: 600px) {
    .consult-box {
        margin: 34px auto 28px;
        padding: 24px 18px;
        border-radius: var(--radius);
    }

    .consult-box h3 { margin-bottom: 12px; font-size: 2rem; }
    .consult-box p  { font-size: 1.6rem; line-height: 1.85; }
}

@media screen and (max-width: 480px) {
    .main-visual-under { padding: 20px 16px 24px; }
}


/*==================================
10 SEO intro
==================================*/
.seo-intro h2 {
    max-width: 900px;
    margin: 0 auto 40px;
    font-size: clamp(2.6rem, 5.6vw, 4.2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .05em;
    text-align: center;
}

.seo-intro-text {
    max-width: 900px;
    margin: 0 auto 60px;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 2;
    text-align: center;
}

@media screen and (min-width: 769px) {
    .seo-intro-break { display: inline; }
}

@media screen and (max-width: 768px) {
    .seo-intro h2 {
        max-width: 640px;
        margin: 0 auto 20px;
        padding: 0 4px;
        font-size: clamp(2rem, 5.4vw, 2.6rem);
        line-height: 1.6;
        letter-spacing: .02em;
        text-align: left;
    }

    .seo-intro-text {
        max-width: 640px;
        margin: 0 auto 32px;
        padding: 0 4px;
        font-size: 1.6rem;
        line-height: 1.95;
        letter-spacing: .02em;
        text-align: left;
        overflow-wrap: break-word;
    }

    .seo-intro-text br + br { line-height: 1.2; }
    .seo-intro-break { display: block; }
}

@media screen and (max-width: 374px) {
    .seo-intro h2 { font-size: 1.9rem; }
    .seo-intro-text { font-size: 1.5rem; line-height: 1.9; padding: 0 2px; }
}


/*==================================
11 Battery Cards
==================================*/
.battery-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 60px auto;
}

.battery-card {
    display: flex;
    flex-direction: column;
    padding-bottom: 34px;
    background: var(--panel-bg);
    border: 1px solid var(--box-white-18);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.battery-card h3 {
    padding: 26px 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.3;
    text-align: center;
}

.battery-card .type {
    padding: 22px 20px 4px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-shadow: var(--text-shadow);
}

.battery-card .type small {
    margin-left: 4px;
    font-size: 70%;
    font-weight: 500;
    opacity: .95;
    vertical-align: baseline;
}

.battery-card strong {
    display: block;
    margin: 22px 0 12px;
    color: var(--label-white);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-align: center;
    text-shadow: none;
}

.battery-value {
    margin: 0 24px 26px;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
    text-shadow: var(--text-shadow);
}

.battery-card hr {
    width: calc(100% - 48px);
    height: 0;
    margin: 0 auto;
    border: 0;
    border-top: 1px solid var(--hairline);
}

.battery-life {
    margin: 0;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-shadow: var(--text-shadow-st);
}

/*---- VISION CL（主役カード） ----*/
.battery-card-main-wrap {
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 24px auto 0;
}

.battery-card.is-main {
    width: 100%;
    max-width: 1000px;
    border: 2px solid #FF5A5F;
    box-shadow: var(--shadow-card-hover);
}

.battery-card.is-main h3 { background: rgba(255, 90, 95, .18); }

.battery-card.is-main .cl-badge { margin-top: 12px; }

.battery-card .cl-note {
    margin: -12px 0 28px;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, .85);
    text-align: center;
}

@media screen and (max-width: 900px) {
    .battery-cards { gap: 20px; margin: 45px auto; }
    .battery-card h3     { font-size: 2.6rem; }
    .battery-card .type  { font-size: 2rem; }
    .battery-card strong { font-size: 1.4rem; }
    .battery-value       { font-size: 1.9rem; }
    .battery-life        { font-size: 2.8rem; }
}

@media screen and (max-width: 600px) {
    .battery-cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 32px auto 0;
    }

    .battery-card {
        padding-bottom: 26px;
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
    }

    .battery-card h3 { padding: 20px 16px 16px; font-size: 2.2rem; letter-spacing: .04em; }
    .battery-card .type { padding: 16px 16px 2px; font-size: 1.7rem; }
    .battery-card strong { margin: 16px 0 8px; font-size: 1.2rem; letter-spacing: .16em; }

    .battery-value {
        margin: 0 16px 18px;
        font-size: 1.6rem;
        line-height: 1.7;
        min-height: 110px;
    }

    .battery-card hr { width: calc(100% - 32px); margin-top: auto; }
    .battery-life { font-size: 2.6rem; }
    .battery-card-main-wrap { margin-top: 16px; }
    .battery-card.is-main { max-width: 100%; }
    .cl-badge { font-size: 1.3rem; padding: 5px 16px; }
}


/*==================================
12 Data（About VISION）
==================================*/
.t-date { width: 100%; }

.t-date-wrap {
    width: 100%;
    display: flex;
    gap: 25px;
}

.t-date-left {
    flex: 0 0 370px;
    width: 370px;
    max-width: 370px;
    min-width: 0;
}

.t-date-left .t-date-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* PC：左カード（採用国数）は「カ国以上」が4文字で折り返すため縦積み */
.t-date-left .flexbox {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-grow: 1;
}

.t-date-right {
    flex: 1 1 auto;
    width: auto;
    max-width: 765px;
    min-width: 0;
}

.t-date-right .flexbox { align-items: flex-end; justify-content: center; }

.t-date-right-grid { display: grid; gap: 25px; }
.t-date-right-grid.col2 { grid-template-columns: repeat(2, 1fr); }
.t-date-right-grid.col3 { grid-template-columns: repeat(3, 1fr); }
.t-date-right-grid:first-child { margin-bottom: 25px; }

.t-date-box {
    height: 100%;
    padding: 40px 20px;
    background: var(--panel-bg);
    text-align: center;
}

.t-date-box .txt { color: var(--accent); }

.data_countup_num {
    font-family: var(--font-tasa);
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
}

@media screen and (max-width: 1024px) {
    .t-date-wrap { flex-direction: column; }
    .t-date-left, .t-date-right { max-width: 100%; width: 100%; }
}

@media screen and (max-width: 600px) {
    .t-date-wrap, .t-date-right-grid { gap: 15px; }
    .t-date-left .flexbox { gap: 15px; }
    .t-date-right-grid.col2,
    .t-date-right-grid.col3 { grid-template-columns: 100%; }
    .t-date-right-grid:first-child { margin-bottom: 15px; }
}


/*==================================
13 Field（.t-site）
==================================*/
.t-site { width: 100%; }

.t-site-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 40px;
}

.t-site-list-box {
    width: 100%;
    padding: 50px 20px;
    background: var(--panel-bg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: visible;
}

.t-site-list-box img {
    display: block;
    flex: 0 0 auto;
    width: 82px;
    height: 78px;
    max-width: 82px;
    max-height: 78px;
    object-fit: contain;
    margin: 0 auto;
}

.t-site-list-box h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    min-height: 3.6em;
    min-height: 2lh;
    margin: 50px 0 0;
    color: var(--white);
}

@media screen and (max-width: 768px) {
    .t-site-list { gap: 16px; }
    .t-site-list-box { padding: 32px 16px; }
    .t-site-list-box h3 { margin-top: 24px; line-height: 1.6; }
}

@media screen and (max-width: 450px) {
    .t-site-list { grid-template-columns: 100%; }
}


/*==================================================================
14 Reason
==================================================================*/
.t-reason { width: 100%; overflow: hidden; }

.t-reason .hdg01 { align-items: flex-start; margin-bottom: 40px; }

.reason-image {
    display: block;
    width: 100%;
    max-width: 1160px;
    height: auto;
    margin: 15px auto 0;
}

.reason-text {
    max-width: var(--article-measure);
    margin: 40px auto 0;
}

.reason-text h3 {
    margin: var(--article-gap-h3) 0 10px;
    color: var(--white);
    font-size: var(--article-h3);
    font-weight: 700;
    line-height: var(--article-h3-lh);
    letter-spacing: .03em;
}

.reason-text p {
    margin: 0;
    color: var(--white);
    font-size: var(--article-body);
    font-weight: 400;
    line-height: var(--article-body-lh);
    letter-spacing: .03em;
}

.reason-text p + p { margin-top: 1em; }

@media screen and (max-width: 768px) {
    .reason-text { margin-top: 24px; }
}

/*---- チェックカード（ベース定義。最終調整は 24-C）----*/
.t-reason-list {
    display: grid;
    gap: var(--check-card-gap);
    margin: 40px 0;
    padding: 0;
    list-style: none;
}

.t-reason-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--panel-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--white);
    text-align: center;
    box-sizing: border-box;
}

.t-reason-list li::before {
    position: absolute;
    content: "✓";
    color: var(--white);
    font-family: sans-serif;
    font-weight: bold;
    line-height: 1;
}


/*==================================================================
15 Cost / Article
==================================================================*/
:is(.t-cost, .sec-article) { padding-top: 110px; padding-bottom: 120px; }

/*---- 15-A 本文ブロックの共通レイアウト ----*/
:is(.t-cost, .sec-article) .cost-intro,
:is(.t-cost, .sec-article) .cost-block,
:is(.t-cost, .sec-article) .cost-heading,
:is(.t-cost, .sec-article) .cost-subheading,
:is(.t-cost, .sec-article) .cost-block > p,
:is(.t-cost, .sec-article) .cost-text,
:is(.t-cost, .sec-article) .cost-lead {
    max-width: var(--article-measure);
    margin-left: auto;
    margin-right: auto;
}

:is(.t-cost, .sec-article) .cost-intro { margin-bottom: 70px; }

:is(.t-cost, .sec-article) .cost-intro p,
:is(.t-cost, .sec-article) .cost-block > p,
:is(.t-cost, .sec-article) .cost-text {
    font-size: var(--article-body);
    font-weight: 400;
    line-height: var(--article-body-lh);
    letter-spacing: .03em;
}

:is(.t-cost, .sec-article) .cost-intro p + p,
:is(.t-cost, .sec-article) .cost-block > p + p,
:is(.t-cost, .sec-article) .cost-text + .cost-text { margin-top: 1em; }

:is(.t-cost, .sec-article) .cost-lead {
    margin-bottom: 24px;
    font-size: var(--article-lead);
    font-weight: 500;
    line-height: var(--article-lead-lh);
    letter-spacing: .03em;
}

:is(.t-cost, .sec-article) .cost-block { margin-bottom: 80px; }
:is(.t-cost, .sec-article) .cost-block:last-child { margin-bottom: 0; }

/*---- 15-B 見出し ----*/
:is(.t-cost, .sec-article) .cost-heading,
:is(.t-cost, .sec-article) .cost-subheading {
    position: relative;
    padding-left: 20px;
    font-size: var(--article-h3);
    font-weight: 700;
    line-height: var(--article-h3-lh);
    letter-spacing: .035em;
    overflow-wrap: break-word;
}

:is(.t-cost, .sec-article) .cost-heading { margin-bottom: 28px; }

:is(.t-cost, .sec-article) .cost-subheading { margin-top: 64px; margin-bottom: 24px; }

:is(.t-cost, .sec-article) .cost-heading::before,
:is(.t-cost, .sec-article) .cost-subheading::before {
    position: absolute;
    content: "";
    left: 0;
    top: .18em;
    width: 3px;
    height: calc(100% - .36em);
    min-height: 1em;
    background: var(--grad-bar);
    border-radius: 2px;
}

/*---- 15-C 強調文 ----*/
:is(.t-cost, .sec-article) .cost-emphasis {
    max-width: var(--article-measure);
    margin: 28px auto;
    padding: 22px 26px;
    background: var(--panel-emph);
    border-left: 3px solid var(--primary);
    font-size: var(--article-lead);
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .03em;
}

/*---- 15-D 補足ボックス ----*/
:is(.t-cost, .sec-article) .cost-feature-box {
    max-width: var(--article-measure);
    margin: 42px auto 0;
    padding: 30px 34px;
    background: var(--panel-soft);
    border: 1px solid var(--line-mid);
    border-radius: var(--radius-xs);
}

:is(.t-cost, .sec-article) .cost-feature-box h4 {
    margin: 0 0 14px;
    font-size: var(--article-h4);
    font-weight: 700;
    line-height: var(--article-h4-lh);
    letter-spacing: .04em;
}

:is(.t-cost, .sec-article) .cost-feature-box p {
    margin: 0 0 14px;
    font-size: var(--article-sub);
    font-weight: 400;
    line-height: var(--article-sub-lh);
    letter-spacing: .03em;
}

:is(.t-cost, .sec-article) .cost-feature-box p:last-child { margin-bottom: 0; }

/*---- 15-E 費用要因カード ----*/
:is(.t-cost, .sec-article) .cost-factor-grid {
    max-width: var(--article-measure);
    margin: 35px auto 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

:is(.t-cost, .sec-article) .cost-factor {
    min-height: 120px;
    padding: 22px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--panel-soft);
    border: 1px solid var(--line-soft);
    text-align: center;
}

:is(.t-cost, .sec-article) .cost-factor strong {
    margin-bottom: 9px;
    font-size: var(--article-sub);
    font-weight: 700;
    line-height: 1.5;
}

:is(.t-cost, .sec-article) .cost-factor span {
    font-size: var(--article-note);
    font-weight: 400;
    line-height: 1.7;
}

/*---- 15-F 選択肢リスト ----*/
:is(.t-cost, .sec-article) .cost-option-list {
    max-width: var(--article-measure);
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

:is(.t-cost, .sec-article) .cost-option {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;
    padding: 25px 28px;
    background: var(--panel-soft);
    border: 1px solid var(--line-soft);
    transition: background .25s ease, border-color .25s ease;
}

:is(.t-cost, .sec-article) .cost-option:hover {
    background: var(--panel-soft-h);
    border-color: var(--line-strong);
}

:is(.t-cost, .sec-article) .cost-option-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--white);
    color: #000;
    font-family: var(--font-mont);
    font-size: 1.4rem;
    letter-spacing: .08em;
}

:is(.t-cost, .sec-article) .cost-option h4 {
    margin: 1px 0 8px;
    font-size: var(--article-h4);
    font-weight: 700;
    line-height: var(--article-h4-lh);
    letter-spacing: .035em;
}

:is(.t-cost, .sec-article) .cost-option p {
    margin: 0;
    font-size: var(--article-sub);
    font-weight: 400;
    line-height: var(--article-sub-lh);
    letter-spacing: .025em;
}

/*---- 15-G 比較表 ----*/
:is(.t-cost, .sec-article) .cost-table-wrap {
    max-width: var(--article-measure);
    margin: 35px auto 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:is(.t-cost, .sec-article) .cost-table-wrap:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

:is(.t-cost, .sec-article) .cost-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line-mid);
    border-radius: var(--radius-xs);
    overflow: hidden;
    font-size: var(--article-note);
}

:is(.t-cost, .sec-article) .cost-table th,
:is(.t-cost, .sec-article) .cost-table td {
    padding: 18px 16px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.8;
}

:is(.t-cost, .sec-article) .cost-table td { font-weight: 400; }

:is(.t-cost, .sec-article) .cost-table tr:last-child th,
:is(.t-cost, .sec-article) .cost-table tr:last-child td { border-bottom: 0; }

:is(.t-cost, .sec-article) .cost-table th:last-child,
:is(.t-cost, .sec-article) .cost-table td:last-child { border-right: 0; }

:is(.t-cost, .sec-article) .cost-table thead th {
    background: rgba(255, 255, 255, .1);
    font-weight: 700;
    text-align: center;
}

:is(.t-cost, .sec-article) .cost-table tbody th {
    background: rgba(255, 255, 255, .045);
    font-weight: 700;
    white-space: nowrap;
}

/*---- 15-H 注記 ----*/
:is(.t-cost, .sec-article) .cost-note {
    max-width: var(--article-measure);
    margin: 25px auto 0;
    box-sizing: border-box;
    font-size: var(--article-note);
    font-weight: 400;
    line-height: var(--article-note-lh);
    opacity: .85;
}

:is(.t-cost, .sec-article) div.cost-note p {
    font-size: var(--article-note);
    font-weight: 400;
    line-height: var(--article-note-lh);
}

:is(.t-cost, .sec-article) .cost-block > div.cost-note:last-child,
:is(.t-cost, .sec-article) .cost-note--section-end { padding-bottom: 72px; }

/*---- 15-I 見積比較CTA ----*/
:is(.t-cost, .sec-article) .cost-compare {
    max-width: 960px;
    margin: 100px auto 0;
    padding: 58px 55px 62px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .115), rgba(255, 255, 255, .055));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    text-align: center;
}

:is(.t-cost, .sec-article) .cost-compare h3 {
    margin-bottom: 22px;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .045em;
}

:is(.t-cost, .sec-article) .cost-compare-lead {
    margin-bottom: 25px;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.7;
}

:is(.t-cost, .sec-article) .cost-compare > p:not(.cost-compare-lead):not(.cost-compare-note) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--article-sub);
    font-weight: 400;
    line-height: 2;
    letter-spacing: .03em;
}

:is(.t-cost, .sec-article) .cost-compare-points {
    max-width: 760px;
    margin: 32px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

:is(.t-cost, .sec-article) .cost-compare-points span {
    padding: 12px 15px;
    border: 1px solid var(--line-mid);
    font-size: var(--article-note);
    font-weight: 400;
    line-height: 1.6;
}

:is(.t-cost, .sec-article) .cost-compare-note {
    margin-top: 28px;
    font-size: var(--article-note);
    font-weight: 400;
    line-height: var(--article-note-lh);
    opacity: .85;
}

:is(.t-cost, .sec-article) .cost-cta { margin-top: 40px; text-align: center; }

:is(.t-cost, .sec-article) .cost-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 360px;
    min-height: 64px;
    padding: 16px 34px;
    background: var(--grad-red);
    color: var(--white);
    font-family: var(--font-mont), var(--font-base);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

:is(.t-cost, .sec-article) .cost-cta-button:hover {
    opacity: .9;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

:is(.t-cost, .sec-article) .cost-cta-button:active { transform: translateY(0); }

/*---- 15-J Cost / Article：SP ----*/
@media screen and (max-width: 768px) {
    :is(.t-cost, .sec-article) { padding-top: 75px; padding-bottom: 80px; }

    :is(.t-cost, .sec-article) .hdg01_ja { font-size: 2.2rem; line-height: 1.65; }

    :is(.t-cost, .sec-article) .cost-intro { margin-bottom: 50px; }
    :is(.t-cost, .sec-article) .cost-block { margin-bottom: 60px; }

    :is(.t-cost, .sec-article) .cost-heading,
    :is(.t-cost, .sec-article) .cost-subheading { padding-left: 15px; }

    :is(.t-cost, .sec-article) .cost-heading { margin-bottom: 22px; }

    :is(.t-cost, .sec-article) .cost-subheading { margin-top: 48px; margin-bottom: 20px; }

    :is(.t-cost, .sec-article) .cost-emphasis { margin: 22px auto; padding: 18px 16px; }

    :is(.t-cost, .sec-article) .cost-feature-box { padding: 22px 18px; }

    :is(.t-cost, .sec-article) .cost-factor-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

    :is(.t-cost, .sec-article) .cost-factor { min-height: 100px; padding: 16px 10px; }

    :is(.t-cost, .sec-article) .cost-option {
        grid-template-columns: 42px 1fr;
        gap: 13px;
        padding: 20px 15px;
    }

    :is(.t-cost, .sec-article) .cost-option-number { width: 39px; height: 39px; font-size: 1.2rem; }
    :is(.t-cost, .sec-article) .cost-option h4 { margin-bottom: 7px; }

    :is(.t-cost, .sec-article) .cost-table { min-width: 620px; font-size: 1.2rem; }
    :is(.t-cost, .sec-article) .cost-table th,
    :is(.t-cost, .sec-article) .cost-table td { padding: 13px 11px; }

    :is(.t-cost, .sec-article) .cost-block > div.cost-note:last-child,
    :is(.t-cost, .sec-article) .cost-note--section-end { padding-bottom: 52px; }

    :is(.t-cost, .sec-article) .cost-compare { margin-top: 65px; padding: 38px 18px 42px; }
    :is(.t-cost, .sec-article) .cost-compare h3 { font-size: 2.2rem; }
    :is(.t-cost, .sec-article) .cost-compare-lead { font-size: 1.8rem; }
    :is(.t-cost, .sec-article) .cost-compare-points { grid-template-columns: 1fr; gap: 8px; }

    :is(.t-cost, .sec-article) .cost-cta { margin-top: 30px; }

    :is(.t-cost, .sec-article) .cost-cta-button {
        width: 100%;
        min-width: 0;
        min-height: 58px;
        padding: 14px 18px;
        font-size: 1.5rem;
    }
}


/*==================================================================
16 FAQ
==================================================================*/

.t-faq,
.t-faq-list {
    width: 100%;
}

/* FAQカード間の余白は gap のみで一元管理 */
.t-faq-list {
    display: grid;
    gap: 20px;
}

.t-faq-list-block {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--panel-bg);
}

/*--------------------------------------------------
  QUESTION
  DOM:
  <dt class="faq-q-row">
      <span class="faq-q-mark">Q</span>
      <p class="faq-q-text">...</p>
  </dt>
--------------------------------------------------*/
.t-faq-list-block > dt.faq-q-row {
    position: relative;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    width: 100%;
    min-height: 94px;
    padding: 20px 85px 20px 20px !important;
    box-sizing: border-box;
    color: var(--white);
}

/* Q mark — one fixed size for every FAQ item */
.t-faq-list-block > dt.faq-q-row > .faq-q-mark,
.t-faq-list-block > dt.faq-q-row > span[aria-hidden="true"] {
    grid-column: 1;
    grid-row: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white);
}

/* Question text — always starts in column 2 */
.t-faq-list-block > dt.faq-q-row > .faq-q-text,
.t-faq-list-block > dt.faq-q-row > p {
    grid-column: 2;
    grid-row: 1;
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white);
    font-size: var(--article-body);
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: wrap;
}

/* Compatibility with the older button-wrapped FAQ DOM */
.t-faq-list-block > dt > .faq-q {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.t-faq-list-block > dt > .faq-q > span[aria-hidden="true"],
.t-faq-list-block > dt > .faq-q > .faq-q-mark {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.t-faq-list-block > dt > .faq-q > p,
.t-faq-list-block > dt > .faq-q > .faq-q-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.t-faq-list-block > dt > .faq-q:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/*--------------------------------------------------
  ANSWER
--------------------------------------------------*/
.t-faq-list-block > dd {
    display: none;
    position: relative;
    width: 100%;
    padding: 20px 85px 20px 20px !important;
    box-sizing: border-box;
    border-top: 1px solid var(--line-white);
    color: var(--white);
}

.t-faq-list-block > dd .inner {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 18px;
    align-items: flex-start;
    width: 100%;
}

.t-faq-list-block > dd .inner > span[aria-hidden="true"] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 54px;
    min-width: 54px;
    margin: 0;
    padding-top: .1em;
    border: 0;
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1;
    color: #FF7A7E;
}

.t-faq-list-block > dd p {
    grid-column: 2;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.93) !important;
    -webkit-text-fill-color: rgba(255,255,255,.93);
    font-size: var(--article-body);
    font-weight: 400;
    line-height: var(--article-body-lh);
    text-align: left;
    overflow-wrap: anywhere;
    text-wrap: wrap;
}

/*--------------------------------------------------
  OPEN/CLOSE ARROW
--------------------------------------------------*/
.t-faq-list-block > dt.faq-q-row::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: url("../img/common/faq-arrow.png") no-repeat center center;
    background-size: cover;
    right: 35px;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    pointer-events: none;
    filter: brightness(0) invert(1);
    opacity: .65;
    transition: rotate .6s, opacity .25s ease;
}

.t-faq-list-block > dt.faq-q-row.open::after,
.t-faq-list-block > dt.faq-q-row:has(.faq-q[aria-expanded="true"])::after {
    rotate: -180deg;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .t-faq-list-block > dt.faq-q-row::after {
        transition: none;
    }
}

/*--------------------------------------------------
  MOBILE
--------------------------------------------------*/
@media screen and (max-width: 768px) {
    .t-faq-list-block > dt.faq-q-row {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        min-height: 86px;
        padding: 16px 55px 16px 12px !important;
    }

    .t-faq-list-block > dt > .faq-q {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        column-gap: 16px !important;
    }

    .t-faq-list-block > dt.faq-q-row > .faq-q-mark,
    .t-faq-list-block > dt.faq-q-row > span[aria-hidden="true"],
    .t-faq-list-block > dt > .faq-q > .faq-q-mark,
    .t-faq-list-block > dt > .faq-q > span[aria-hidden="true"] {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        font-size: 2.3rem;
    }

    .t-faq-list-block > dt.faq-q-row > .faq-q-text,
    .t-faq-list-block > dt.faq-q-row > p,
    .t-faq-list-block > dt > .faq-q > p,
    .t-faq-list-block > dt > .faq-q > .faq-q-text {
        font-size: var(--article-body);
        line-height: 1.65;
    }

    .t-faq-list-block > dd {
        padding: 18px 55px 18px 12px !important;
    }

    .t-faq-list-block > dd .inner {
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 16px;
    }

    .t-faq-list-block > dd .inner > span[aria-hidden="true"] {
        width: 54px;
        min-width: 54px;
        font-size: 2.2rem;
    }

    .t-faq-list-block > dt.faq-q-row::after {
        right: 15px;
    }
}

@media screen and (max-width: 400px) {
    .t-faq-list-block > dt.faq-q-row {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        min-height: 82px;
        padding-right: 48px !important;
    }

    .t-faq-list-block > dt > .faq-q {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    .t-faq-list-block > dt.faq-q-row > .faq-q-mark,
    .t-faq-list-block > dt.faq-q-row > span[aria-hidden="true"],
    .t-faq-list-block > dt > .faq-q > .faq-q-mark,
    .t-faq-list-block > dt > .faq-q > span[aria-hidden="true"] {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        font-size: 2.1rem;
    }

    .t-faq-list-block > dd {
        padding-right: 48px !important;
    }

    .t-faq-list-block > dd .inner {
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 14px;
    }

    .t-faq-list-block > dd .inner > span[aria-hidden="true"] {
        width: 50px;
        min-width: 50px;
        font-size: 2rem;
    }
}

/*==================================
17 Company
==================================*/
.t-company { width: 100%; }

.t-company-body { width: 100%; padding: 50px 70px; background: var(--panel-bg); }

.t-company-list { width: 100%; color: var(--white); }

.t-company-list-block {
    width: 100%;
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-white);
}

.t-company-list dt { width: 195px; flex-shrink: 0; }
.t-company-list dd { width: calc(100% - 195px); }

.t-company-list a {
    color: var(--white);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.t-company-list a:hover { opacity: .7; }

@media screen and (max-width: 768px) {
    .t-company-body { padding: 30px; }
}

@media screen and (max-width: 600px) {
    .t-company-list-block { flex-direction: column; gap: 10px; }
    .t-company-list dt, .t-company-list dd { width: 100%; }

    .t-company-list dt {
        color: var(--label-white);
        font-size: 1.4rem;
        letter-spacing: .08em;
        line-height: 1.4;
    }
}


/*==================================================================
18 Contact / Form
==================================================================*/
.t-contact {
    width: 100%;
    background: var(--white);
    padding-top: 70px;
    padding-bottom: 180px;
}

.t-contact .hdg02::before { background: var(--primary); }

.t-contact-wrap { width: 100%; max-width: 900px; margin: 0 auto; }

.t-contact-wrap .form-row { margin-bottom: 28px; }

.t-contact-wrap label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.t-contact-wrap .badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 24px;
    margin-right: 12px;
    background: var(--gray-bg);
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
}

.t-contact-wrap .badge.rq { background: var(--black); color: var(--white); }
.t-contact-wrap .badge.op { background: var(--gray-bg); color: var(--black); margin: 0 0 0 10px; }

.t-contact-wrap .form-field { width: 100%; }

.t-contact-wrap .form-error {
    margin-top: 8px;
    color: var(--error);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
}

.form-note {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--note-gray);
    line-height: 1.6;
}

.form-note-center {
    max-width: 640px;
    margin: 10px auto 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--note-gray);
    line-height: 1.7;
    text-align: center;
}

.form-contact-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.form-contact-divider {
    font-size: 1.3rem;
    color: var(--note-gray);
    text-align: center;
    line-height: 1;
}

/*---- ファイルアップロード ----*/
.form-upload { margin-top: 8px; }

.upload-category { margin-top: 22px; }

.upload-category-label { margin: 0 0 8px; font-size: 1.4rem; font-weight: 700; }

.upload-item { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #f4f7fb;
    border: 2px dashed #a0b4cc;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #205176;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s, border-color .2s;
}

.upload-label:hover { background: #e8f0f9; border-color: #205176; }

.upload-input { display: none; }

.upload-label:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.upload-filename {
    padding-left: 4px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #5b5b5b;
    word-break: break-all;
}

.upload-add-btn {
    align-self: flex-start;
    margin-top: 10px;
    padding: 8px 16px;
    background: #f4f7fb;
    border: 1px solid #a0b4cc;
    border-radius: 6px;
    color: #205176;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.upload-add-btn:hover { background: #e8f0f9; }
.upload-add-btn:disabled { cursor: default; opacity: .55; }

.upload-remove-btn {
    align-self: flex-start;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    color: var(--note-gray);
    font-size: 1.2rem;
    cursor: pointer;
}

.upload-remove-btn:hover { border-color: #8a8a8a; color: #4d4d4d; }

.upload-total-note { margin-top: 18px; font-size: 1.3rem; text-align: right; }

/*---- 送信ボタン ----*/
.t-contact-wrap .submit-wrap { margin-top: 50px; }

.submit-wrap {
    position: relative;
    max-width: 245px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.submit-wrap::before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    background: var(--arrow) no-repeat center center;
    background-size: cover;
    top: 50%;
    left: 65px;
    translate: 0 -50%;
    z-index: 5;
    pointer-events: none;
}

.submit-wrap.back::before { left: 45px; }

.submit-wrap input {
    width: 100%;
    min-height: 70px;
    padding-left: 25px;
    background: var(--grad-red);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--white);
}

.submit-wrap input:hover { opacity: .8; cursor: pointer; }

/*---- 確認・完了ページ用 ----*/
.formTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 90px;
}

.formTable-block {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.formTable-block dt {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
}

.formTable-block dt span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 24px;
    background: var(--gray-bg);
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.formTable-block dt span.rq { background: var(--black); color: var(--white); }

.formTable-block dd { flex: 1 1 0; min-width: 0; }

.formTable-block input,
.formTable-block textarea { width: 100%; box-sizing: border-box; }

.thanks { padding: 120px 0; }

@media screen and (max-width: 768px) {
    .t-contact { padding-top: 40px; padding-bottom: 90px; }

    .formTable { margin-bottom: 50px; }
    .formTable-block { flex-direction: column; gap: 10px; }
    .formTable-block:not(:last-child) { margin-bottom: 20px; }
    .formTable-block dt, .formTable-block dd { width: 100%; }

    .thanks { padding: 60px 0; }

    .upload-label { padding: 16px; font-size: 1.5rem; min-height: 56px; }
}

@media screen and (max-width: 600px) {
    .t-contact-wrap .form-row { margin-bottom: 22px; }
    .t-contact-wrap .submit-wrap { margin-top: 36px; }
}


/*==================================
19 Footer
==================================*/
.footer {
    width: 100%;
    background: var(--gray-bg);
    padding-top: 70px;
    padding-bottom: 80px;
    text-align: center;
}

.footer .logo { margin-bottom: 20px; }

.footer small {
    display: inline-block;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: .08em;
    color: var(--footer-text);
}

@media screen and (max-width: 768px) {
    .footer { padding-top: 40px; padding-bottom: 40px; }
}

@media screen and (max-width: 500px) {
    .footer {
        padding-bottom: calc(40px + var(--sp-cta-h) + env(safe-area-inset-bottom, 0px));
    }
}


/*==================================================================
20 Utility（SP：余白ユーティリティを半分に）
==================================================================*/
@media screen and (max-width: 768px) {
    .mt5{margin-top:2.5px;} .mt10{margin-top:5px;} .mt15{margin-top:7.5px;} .mt20{margin-top:10px;}
    .mt25{margin-top:12.5px;} .mt30{margin-top:15px;} .mt35{margin-top:17.5px;} .mt40{margin-top:20px;}
    .mt45{margin-top:22.5px;} .mt50{margin-top:25px;} .mt55{margin-top:27.5px;} .mt60{margin-top:30px;}
    .mt65{margin-top:32.5px;} .mt70{margin-top:35px;} .mt75{margin-top:37.5px;} .mt80{margin-top:40px;}
    .mt85{margin-top:42.5px;} .mt90{margin-top:45px;} .mt95{margin-top:47.5px;} .mt100{margin-top:50px;}

    .mb5{margin-bottom:2.5px;} .mb10{margin-bottom:5px;} .mb15{margin-bottom:7.5px;} .mb20{margin-bottom:10px;}
    .mb25{margin-bottom:12.5px;} .mb30{margin-bottom:15px;} .mb35{margin-bottom:17.5px;} .mb40{margin-bottom:20px;}
    .mb45{margin-bottom:22.5px;} .mb50{margin-bottom:25px;} .mb55{margin-bottom:27.5px;} .mb60{margin-bottom:30px;}
    .mb65{margin-bottom:32.5px;} .mb70{margin-bottom:35px;} .mb75{margin-bottom:37.5px;} .mb80{margin-bottom:40px;}
    .mb85{margin-bottom:42.5px;} .mb90{margin-bottom:45px;} .mb95{margin-bottom:47.5px;} .mb100{margin-bottom:50px;}

    .pt10{padding-top:5px;} .pt20{padding-top:10px;} .pt30{padding-top:15px;} .pt40{padding-top:20px;}
    .pt50{padding-top:25px;} .pt60{padding-top:30px;} .pt70{padding-top:35px;} .pt80{padding-top:40px;}
    .pt90{padding-top:45px;} .pt100{padding-top:50px;}

    .pb10{padding-bottom:5px;} .pb20{padding-bottom:10px;} .pb30{padding-bottom:15px;} .pb40{padding-bottom:20px;}
    .pb50{padding-bottom:25px;} .pb60{padding-bottom:30px;} .pb70{padding-bottom:35px;} .pb80{padding-bottom:40px;}
    .pb90{padding-bottom:45px;} .pb100{padding-bottom:50px;}

    .tab-center { margin-left: auto; margin-right: auto; }
}


/*==================================================================
21 SP Overrides（600px以下）
==================================================================*/
@media screen and (max-width: 600px) {
    .t-reason-list {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}


/*==================================================================
22 追従CTA モーション（SP 500px以下）
==================================================================*/
@keyframes ctaSoftIn {
    0%   { opacity: 0; transform: translateY(28px); filter: blur(5px); }
    70%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

@media screen and (max-width: 500px) {
    .js-cta .h-contact {
        transform: translateY(calc(100% + 16px));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            transform .95s cubic-bezier(.45, 0, .55, 1),
            opacity .55s linear .3s,
            visibility 0s linear .95s;
        will-change: transform, opacity;
        backface-visibility: hidden;
    }

    .js-cta .h-contact a,
    .js-cta .h-contact.is-visible a {
        opacity: 1;
        transform: none;
        filter: none;
        transition: box-shadow 1.05s cubic-bezier(.33, .02, .2, 1);
    }

    .js-cta .h-contact a { box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
    .js-cta .h-contact.is-visible a { box-shadow: var(--shadow-cta); }

    .js-cta .h-contact.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: none;
        animation: ctaSoftIn 1.05s cubic-bezier(.33, .02, .2, 1) .05s both;
    }
}

@media screen and (max-width: 500px) and (prefers-reduced-motion: reduce) {
    .js-cta .h-contact {
        transform: none;
        animation: none;
        transition: opacity .3s linear, visibility 0s linear .3s;
    }

    .js-cta .h-contact.is-visible {
        transform: none;
        animation: none;
        transition: opacity .3s linear, visibility 0s;
    }
}


/*==================================================================
23 Design Brush-up（意匠の上書き）
==================================================================*/

/*---- 23-1 グラスモーフィズム ----*/
.battery-card,
.t-date-box,
.t-site-list-box,
.t-faq-list-block,
:is(.t-cost, .sec-article) .cost-option,
.t-reason-list li,
.t-company-body,
.consult-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
    transition:
        transform .4s cubic-bezier(.25, 1, .5, 1),
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .battery-card,
    .t-date-box,
    .t-site-list-box,
    .t-faq-list-block,
    :is(.t-cost, .sec-article) .cost-option,
    .t-reason-list li,
    .t-company-body,
    .consult-box {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.battery-card.is-main { border: 2px solid #FF5A5F; }

/*---- 23-2 カードホバー ----*/
@media (hover: hover) {
    .battery-card:hover,
    :is(.t-cost, .sec-article) .cost-option:hover,
    .t-reason-list li:hover {
        transform: translateY(-4px);
        background: var(--glass-bg-h);
        border-color: var(--glass-line-h);
        box-shadow: var(--glass-shadow-h);
    }
}

@media (prefers-reduced-motion: reduce) {
    .battery-card,
    .t-date-box,
    .t-site-list-box,
    .t-faq-list-block,
    :is(.t-cost, .sec-article) .cost-option,
    .t-reason-list li,
    .t-company-body,
    .consult-box { transition: none; }

    .battery-card:hover,
    :is(.t-cost, .sec-article) .cost-option:hover,
    .t-reason-list li:hover { transform: none; }
}

/*---- 23-3 Cost：番号アイコン ----*/
:is(.t-cost, .sec-article) .cost-option-number {
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #ff4e4e);
    color: var(--white);
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(210, 20, 27, .4);
}

/*---- 23-4 CTA のグロウ効果 ----*/
@media (hover: hover) {
    :is(.t-cost, .sec-article) .cost-cta-button:hover,
    .submit-wrap input:hover,
    .gnav .main-nav .gnav-contact a:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-cta-glow);
        opacity: 1;
    }
}

.btn-A, .btn-B,
:is(.t-cost, .sec-article) .cost-cta-button,
.submit-wrap input,
.gnav .main-nav .gnav-contact a {
    transition: transform .4s cubic-bezier(.25, 1, .5, 1),
                box-shadow .4s ease,
                opacity .4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .btn-A, .btn-B,
    :is(.t-cost, .sec-article) .cost-cta-button,
    .submit-wrap input,
    .gnav .main-nav .gnav-contact a { transition: none; transform: none; }
}

/*---- 23-5 テキストハイライト ----*/
.text-highlight {
    background: linear-gradient(transparent 60%, rgba(210, 20, 27, .4) 60%);
    font-weight: 700;
    padding: 0 4px;
}

/*---- 23-6 FAQ の開閉アイコン ----*/
.t-faq-list-block dt::after {
    filter: brightness(0) invert(1);
    opacity: .65;
}

.t-faq-list-block dt.open::after,
.t-faq-list-block dt:has(.faq-q[aria-expanded="true"])::after { opacity: 1; }

/*---- 23-7 Cost 比較表 ----*/
:is(.t-cost, .sec-article) .cost-table {
    border-color: var(--glass-line);
    background: rgba(0, 0, 0, .2);
}

:is(.t-cost, .sec-article) .cost-table thead th {
    background: rgba(210, 20, 27, .22);
    color: var(--white);
    letter-spacing: .05em;
}


/* 24-A FAQ layout has been consolidated into Section 16. */

/*---- 24-B 英字大見出しを暗背景で確実に白表示 ----*/
.t-date .hdg01_en,
.t-cost .hdg01_en,
.t-site .hdg01_en,
.t-reason .hdg01_en {
    color: var(--white);
    -webkit-text-stroke: 0;
}

/*---- 24-C チェックカード（Field / Consult の8枚）─ 可読性の最終調整
  【設計意図】
  ・従来は ✓ を左端に置くため padding-left を 42〜56px 取っており、
    1枚あたりの本文幅が 130px 程度しか残らず、HTML側の <br> で
    区切った1行がさらに5文字前後で折り返していました。
  ・✓ をカード上部中央へ移し、左右パディングを対称（14px）に。
    本文がカード幅をほぼフルに使えるようになります。
  ・文字は 14〜15.5px の可変。列は auto-fit で
    PC 4列 → タブレット 3〜2列 → スマホ 1列と自然に変化します。
--------------------------------------------------------------------*/
.t-reason-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--check-card-min), 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: var(--check-card-gap) !important;
    margin: clamp(28px, 3.4vw, 44px) auto;
    padding: 0;
}

.t-reason-list li {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0 !important;
    padding: 46px 14px 22px !important;      /* 上は ✓ の逃げ */
    font-size: var(--check-card-fz) !important;
    font-weight: 700;
    line-height: var(--check-card-lh) !important;
    letter-spacing: .01em;
    text-align: center !important;
    text-wrap: wrap;                          /* pretty による行の短縮を無効化 */
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
}

.t-reason-list li,
.t-reason-list li * { min-width: 0; }

.t-reason-list li br { display: inline; }     /* 意図した改行は活かす */

.t-reason-list li::before {
    content: "✓";
    left: 50%;
    right: auto;
    top: 16px;
    transform: translateX(-50%) !important;
    font-size: 2.1rem;
    line-height: 1;
    color: #FF5A5F;
}

@media screen and (max-width: 768px) {
    .t-reason-list li { padding: 42px 12px 20px !important; }
    .t-reason-list li::before { top: 14px; font-size: 1.9rem; }
}

@media screen and (max-width: 600px) {
    :root { --check-card-min: 200px; }
    .t-reason-list { max-width: 360px; }
    .t-reason-list li { padding: 40px 14px 18px !important; }
}

/*---- 24-D Data：数値と単位のレイアウト ----*/
.t-date-box .flexbox {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
    justify-content: center;
    gap: clamp(4px, 1.4vw, 10px);
}

.t-date-box .flexbox > * {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
}

.t-date-box .data_countup_num {
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.t-date-box .fz108 { font-size: clamp(4.4rem, 15vw, 10.8rem) !important; }
.t-date-box .fz88  { font-size: clamp(3.8rem, 12.5vw, 8.8rem) !important; }
.t-date-box .fz64  { font-size: clamp(3.2rem, 10.5vw, 6.4rem) !important; }
.t-date-box .fz26  { font-size: clamp(1.4rem, 4vw, 2.6rem) !important; }
.t-date-box .fz24,
.t-date-box .fz21  { font-size: clamp(1.5rem, 4.2vw, 2.4rem) !important; }

/* PC（1025px以上）は左カード（採用国数）を従来どおり2段組みのまま */
@media screen and (min-width: 1025px) {
    .t-date-left .flexbox { flex-wrap: wrap !important; }
}

/* SP／タブレット：カードが全幅になるため「100 カ国以上」を横並びに
   （他のカードと同じく、単位を数字の右へ） */
@media screen and (max-width: 1024px) {
    .t-date-left .t-date-box { justify-content: center; }

    .t-date-left .flexbox {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: clamp(6px, 1.8vw, 14px) !important;
    }

    .t-date-left .flexbox > * { white-space: nowrap; }
}

@media screen and (max-width: 767px) {
    .t-date-box { padding: 20px 14px; }
    .t-date-box h3 { margin-bottom: 14px !important; }
}

/*==================================================================
24-E モバイルの余白を詰めて1行を長くする（v20260903 差し替え版）
  ------------------------------------------------------------------
  ・FAQ の padding 指定は 24-A（トークン方式）へ全面移管したため
    本ブロックからは削除。ここで再指定すると 24-A と競合します。
  ・インライン <style>（Layout Refinement Layer）が本ファイルより
    後に読み込まれるため、同一詳細度で競合する宣言のみ !important。
==================================================================*/
@media screen and (max-width: 767px) {

    /*---- 外周ガター（1行の実効幅を約12px広げる） ----*/
    .wrap1160,
    .wrap880 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /*---- Cost / Article 系パネル ----*/
    :is(.t-cost, .sec-article) .cost-option { padding: 20px 14px; }
    :is(.t-cost, .sec-article) .cost-feature-box { padding: 20px 14px; }
    :is(.t-cost, .sec-article) .cost-emphasis { padding: 18px 14px; }
    :is(.t-cost, .sec-article) .cost-compare { padding: 24px 14px; }
    :is(.t-cost, .sec-article) .cost-factor { padding: 16px 10px; }

    /*---- Contact / Company / Battery ----*/
    .t-contact-wrap { padding: 22px 14px !important; }
    .t-company-body { padding: 22px 14px !important; }
    .battery-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /*---- 本文の行送りと折返し ----*/
    .main p,
    .main li,
    .main dd {
        line-height: 1.9;
        text-wrap: wrap;
        word-break: normal;
        overflow-wrap: anywhere;
        line-break: strict;
    }
}

@media screen and (max-width: 400px) {
    .wrap1160,
    .wrap880 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    :is(.t-cost, .sec-article) .cost-option,
    :is(.t-cost, .sec-article) .cost-feature-box { padding: 18px 12px; }

    .t-contact-wrap,
    .t-company-body { padding: 20px 12px !important; }
}

/*==================================================================
24-F ドロワーの重なり順（v20260907・iOS合成レイヤー対策版）
  ------------------------------------------------------------------
  ・.header の backdrop-filter / ::before ぼかしを撤去
  ・前版で誤って壊した .mv の z-index:2 を復元
  ・img の backface-visibility を解除（iOSのレイヤー昇格を止める）
  ・.gnav / .toggle を translate3d で合成レイヤーに昇格させ最前面へ
==================================================================*/

/* 1) ヘッダー：フィルタ類を持たせない（閉じ込め防止） */
.header {
    position: relative;
    z-index: 9990;
    isolation: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
}

.header::before {
    content: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media screen and (min-width: 769px) {
    .header { z-index: 9990; }
}

/* 2) 旧HERO用ルール .mv .main-visual > * は新HEROで不要のため撤去 */

/* 3) iOS Safari の合成レイヤー昇格を解除
      01 Reset の img { backface-visibility: hidden } が
      画像を GPU レイヤー化し、fixed 要素より前に描画される原因 */
img {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* 4) ドロワー本体：ID セレクタで既存の transform を上書きしつつ昇格 */
#gnav,
.gnav {
    z-index: 9995;
    background: rgba(0, 0, 0, .94);   /* 透け込み対策で濃度を上げる */
    will-change: transform, opacity;
}

#gnav {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
}

#gnav.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    #gnav,
    #gnav.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition: opacity .01s linear, visibility 0s;
    }
}

/* 5) ハンバーガーボタンも同じ土俵（合成レイヤー）へ */
.toggle {
    position: fixed;
    z-index: 9996;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 6) 追従CTA はドロワーより背面 */
.h-contact { z-index: 9970; }

/* 7) アンカー着地位置（07 が 768/769 区切りのため 768 に統一） */
@media screen and (max-width: 768px) {
    #data, #cost, #field, #reason, #faq,
    #company, #contact, #cost-led {
        scroll-margin-top: 76px;
    }
}

/*==================================================================
25 Print（印刷・PDF保存時）※必ずファイル最終節に置くこと
==================================================================*/
@media print {
    body::before { display: none; }
    body { color: #000; background: #fff; }

    html.nav-open, body.nav-open { overflow: visible; }

    .toggle,
    .gnav,
    .h-contact,
    .mv-scroll { display: none !important; }

    .hdg01_en {
        color: #000 !important;
        -webkit-text-stroke: 0 !important;
    }

    .t-date-box,
    .t-site-list-box,
    .t-faq-list-block,
    .t-company-body,
    .consult-box,
    .battery-card,
    .main-visual-under,
    :is(.t-cost, .sec-article) .cost-option,
    :is(.t-cost, .sec-article) .cost-factor,
    :is(.t-cost, .sec-article) .cost-feature-box,
    :is(.t-cost, .sec-article) .cost-emphasis,
    :is(.t-cost, .sec-article) .cost-compare,
    :is(.t-cost, .sec-article) .cost-table,
    :is(.t-cost, .sec-article) .cost-table thead th,
    :is(.t-cost, .sec-article) .cost-table tbody th,
    .t-reason-list li {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .t-cost, .t-cost *,
    .sec-article, .sec-article *,
    .sec-dark, .sec-dark *,
    .battery-card, .battery-card *,
    .main-visual-under, .main-visual-under *,
    .t-company-list, .t-company-list *,
    .t-faq-list-block, .t-faq-list-block *,
    .reason-text, .reason-text * { color: #000 !important; }

    .t-reason-list li::before { color: #000 !important; }

    :is(.t-cost, .sec-article) .cost-option-number {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    .t-faq-list-block dd { display: block !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ==========================================================
   Contact Form — Text Visibility / Dark Mode
   ========================================================== */

/* 通常時：入力文字を明示的に黒 */
.t-contact input[type="text"],
.t-contact input[type="email"],
.t-contact input[type="tel"],
.t-contact textarea {
    color: #111 !important;
    -webkit-text-fill-color: #111;
    background: #f5f5f5;
}

/* プレースホルダー */
.t-contact input::placeholder,
.t-contact textarea::placeholder {
    color: #666 !important;
    -webkit-text-fill-color: #666;
    opacity: 1;
}

/* フォーカス時 */
.t-contact input[type="text"]:focus,
.t-contact input[type="email"]:focus,
.t-contact input[type="tel"]:focus,
.t-contact textarea:focus {
    color: #111 !important;
    -webkit-text-fill-color: #111;
    background: #fff;
}


/* ==========================================================
   Dark Mode
   ========================================================== */
@media (prefers-color-scheme: dark) {

    .t-contact {
        background: #111;
        color: #fff;
    }

    .t-contact input[type="text"],
    .t-contact input[type="email"],
    .t-contact input[type="tel"],
    .t-contact textarea {
        color: #fff !important;
        -webkit-text-fill-color: #fff;
        background: #222;
        border-color: #444;
    }

    .t-contact input::placeholder,
    .t-contact textarea::placeholder {
        color: #aaa !important;
        -webkit-text-fill-color: #aaa;
        opacity: 1;
    }

    .t-contact input[type="text"]:focus,
    .t-contact input[type="email"]:focus,
    .t-contact input[type="tel"]:focus,
    .t-contact textarea:focus {
        color: #fff !important;
        -webkit-text-fill-color: #fff;
        background: #282828;
        border-color: #D2141B;
        box-shadow: 0 0 0 3px rgba(210,20,27,.22);
    }

    .t-contact .form-note {
        color: #aaa;
    }
}

/* ==========================================================
   CONTACT FORM — INPUT TEXT
   ========================================================== */

.t-contact input[type="text"],
.t-contact input[type="email"],
.t-contact input[type="tel"],
.t-contact input[type="url"],
.t-contact input[type="password"],
.t-contact input[type="number"],
.t-contact textarea,
.t-contact select {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    background-color: #fff !important;
}

.t-contact input::placeholder,
.t-contact textarea::placeholder {
    color: #666 !important;
    -webkit-text-fill-color: #666 !important;
    opacity: 1 !important;
}

.t-contact input:focus,
.t-contact textarea:focus,
.t-contact select:focus {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    background-color: #fff !important;
}

/* ==========================================================================
   Section 26 : Polish Layer
   ---------------------------------------------------------------------------
   Integrated from css/polish.css v20260906-final on v20260906-integrated.
   Overrides selected rules of 01–25 to bring the design to first-class
   corporate quality (typography, spacing, alignment, sticky header,
   company heading, contact form contrast, cards, CTA).
   ========================================================================== */

/* ==========================================================================
   T. Tokens & base body treatment
   ========================================================================== */
:root{
  /* Typography scale */
  --px-hdg-en:  clamp(4.4rem, 5.4vw, 6.4rem);
  --px-hdg-ja:  clamp(2.4rem, 2.6vw, 3.2rem);
  --px-hdg-sub: clamp(1.4rem, 1.15vw, 1.6rem);
  --px-h3:      clamp(2.0rem, 1.8vw, 2.4rem);
  --px-h4:      clamp(1.6rem, 1.4vw, 1.9rem);
  --px-body:    clamp(1.5rem, 1.1vw, 1.6rem);
  --px-note:    1.35rem;
  --px-eyebrow: 1.15rem;

  --tracking-en:      .04em;
  --tracking-eyebrow: .28em;
  --lh-body:          1.95;
  --lh-heading:       1.35;

  /* Section rhythm */
  --sec-y:       clamp(48px, 6vw, 88px);
  --sec-y-tight: clamp(36px, 4.5vw, 64px);

  /* Elevation & panel surfaces */
  --pl-panel:      rgba(255,255,255,.055);
  --pl-panel-h:    rgba(255,255,255,.085);
  --pl-panel-line: rgba(255,255,255,.14);
  --pl-panel-line-h: rgba(255,255,255,.28);
  --pl-shadow-1:   0 4px 14px rgba(0,0,0,.20);
  --pl-shadow-2:   0 10px 32px rgba(0,0,0,.28);
  --pl-shadow-3:   0 20px 56px rgba(0,0,0,.34);

  /* Brand accents */
  --pl-red-1: #FF5A5F;
  --pl-red-2: #D2141B;
  --pl-red-3: #7A1E22;
  --pl-red-4: #561B1C;
  --pl-red-grad: linear-gradient(180deg, var(--pl-red-1), var(--pl-red-2) 55%, var(--pl-red-4));

  /* Focus ring */
  --focus:        2px solid #FF7A7F;
  --focus-offset: 3px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.3,1);
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}
p{
  text-wrap: pretty;
  line-height: var(--lh-body);
}
::selection{
  background: rgba(210,20,27,.55);
  color: #fff;
}

/* Focus ring — unified */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 6px;
}


/* ==========================================================================
   H. Sticky header (scroll-affix)
   Root-ancestor overflow needs to be visible for sticky to take effect.
   ========================================================================== */
:root, html{
  overflow-x: clip !important;
  overflow-y: visible !important;
}
html body{
  overflow-x: clip !important;
  overflow-y: visible !important;
  overflow: visible !important;
}
html body header.header,
html body .header{
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 100%;
  background: rgba(11,11,15,.82) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s ease, border-color .3s ease;
}
.gnav a{
  letter-spacing: .04em;
  font-weight: 500;
  transition: color .25s ease, opacity .25s ease;
}
.gnav a:hover{ color: #fff; opacity: 1; }


/* ==========================================================================
   S. Section rhythm
   ========================================================================== */
.main.home > section{
  padding-block: var(--sec-y) !important;
}
/* HERO は独自 padding を持つため、共通の padding-block を無効化 */
.main.home > section.mv{
  padding-block: 0 !important;
}
.main.home > section.t-consult{
  padding-block: var(--sec-y-tight) !important;
}
.main.home > section.t-contact{
  padding-block: var(--sec-y) !important;
}
.wrap1160{
  padding-inline: clamp(20px, 4.2vw, 40px);
}

/* Cost section: block-to-block spacing */
section.t-cost .cost-block + .cost-block{
  margin-top: clamp(48px, 6vw, 88px) !important;
}


/* ==========================================================================
   E. Eyebrow & common headings (.hdg01 family)
   ========================================================================== */
.hdg01{
  position: relative;
  padding-left: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(24px, 2.8vw, 40px) !important;
}
.hdg01::before{
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  bottom: .35em;
  width: 3px;
  border-radius: 3px;
  background: var(--pl-red-grad);
  box-shadow: 0 0 20px rgba(210,20,27,.5);
}
.hdg01_en{
  display: block !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: var(--px-hdg-en) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-en) !important;
  line-height: 1 !important;
  color: #fff !important;
  margin-bottom: clamp(10px, 1vw, 16px) !important;
}
.hdg01_ja{
  display: block !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: var(--px-hdg-ja) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #fff !important;
  letter-spacing: .02em !important;
}
.hdg01_sub,
.hdg01 small.hdg01_sub{
  display: block !important;
  margin-top: .55em !important;
  font-size: var(--px-hdg-sub) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.72) !important;
  letter-spacing: .06em !important;
  line-height: 1.7 !important;
}


/* ==========================================================================
   C1. Closer Look — layout alignment
   Ensures the internal-structure image aligns exactly with 01..06 list
   (top of first item = top of image; bottom of last item = bottom of image).
   Header "― 6つの構成要素" is deliberately excluded from the height context.
   Grid rows: [auto | 1fr] → row 1 = header, row 2 = body.
   ========================================================================== */
@media (min-width: 761px){
  .cl300-closerlook-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 380px);
    grid-template-rows: auto 1fr;
    column-gap: clamp(36px, 5vw, 56px);
    row-gap: 0;
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
  }
  .cl300-closerlook-parts-head{
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 4px !important;
  }
  .cl300-closerlook-parts{
    grid-column: 1;
    grid-row: 2;
    display: block !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    min-width: 0;
    min-height: 0;
    order: initial;
    height: 100%;
  }
  .cl300-closerlook-parts-list{
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 10px;
    height: 100%;
    min-height: 0;
  }
  .cl300-closerlook-parts-list > .cl300-closerlook-part{
    min-height: 0;
    align-items: center;
  }
  .cl300-closerlook-image-wrap{
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: 380px;
    height: 100%;
    max-height: none;
    min-height: 0;
    margin-top: 0;
    order: initial;
    box-sizing: border-box;
  }
  .cl300-closerlook-image-wrap img{
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
  }
}
@media (max-width: 760px){
  .cl300-closerlook-grid{
    display: flex;
    flex-direction: column;
  }
  .cl300-closerlook-image-wrap{
    order: 1;
    height: auto;
    margin-top: 0;
  }
  .cl300-closerlook-image-wrap img{ height: auto; }
  .cl300-closerlook-parts-head{ order: 2; }
  .cl300-closerlook-parts{
    order: 3;
    height: auto;
  }
  .cl300-closerlook-parts-list{
    display: block;
    height: auto;
  }
  .cl300-closerlook-parts-list > .cl300-closerlook-part + .cl300-closerlook-part{
    margin-top: 10px;
  }
}


/* ==========================================================================
   C2. Closer Look — typography & image frame
   ========================================================================== */
.cl300-closerlook-eyebrow{
  font-size: var(--px-eyebrow) !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  margin-bottom: 18px !important;
}
.cl300-closerlook-title{
  font-size: clamp(3.4rem, 5.4vw, 6.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.005em !important;
  line-height: 1.22 !important;
  margin-bottom: 24px !important;
  color: #fff !important;
  text-shadow: 0 4px 40px rgba(210,20,27,.14);
}
.cl300-closerlook-title::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, var(--pl-red-1), var(--pl-red-2));
  border-radius: 3px;
}
.cl300-closerlook-sub{
  font-size: clamp(1.6rem, 1.35vw, 1.9rem) !important;
  line-height: 2 !important;
  color: #d3d8dd !important;
  letter-spacing: .03em !important;
  margin-bottom: clamp(48px, 5.5vw, 72px) !important;
  max-width: 78ch !important;
}
.cl300-closerlook-sub strong{
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.cl300-closerlook-parts-head{
  font-size: 1.2rem !important;
  letter-spacing: .18em !important;
  color: #FF7A7F !important;
  margin-bottom: 10px !important;
  text-transform: none;
}
.cl300-closerlook-name{
  font-size: 1.65rem !important;
  letter-spacing: .01em !important;
  margin-bottom: 4px !important;
}
.cl300-closerlook-desc{
  font-size: 1.35rem !important;
  line-height: 1.85 !important;
  color: #c9d0d7 !important;
}
.cl300-closerlook-image-wrap{
  padding: 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #f4f7fb 0%, #d9e2ec 100%) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.cl300-closerlook-caption{
  color: #4a5b73 !important;
  letter-spacing: .12em !important;
  font-size: 1.05rem !important;
  margin-top: 12px !important;
}


/* ==========================================================================
   P. Panel / card system
   Shared surface treatment for every card in the site.
   ========================================================================== */
.t-date-box,
.cost-factor,
.cost-option,
.cost-feature-box,
.battery-card,
.t-site-list-box,
.t-faq-list-block,
.t-company-body,
.cost-compare{
  box-sizing: border-box !important;
  border-radius: 18px !important;
  border-color: var(--pl-panel-line) !important;
  box-shadow: var(--pl-shadow-1);
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s ease,
    border-color .3s ease,
    background .3s ease !important;
}
.t-date-box:hover,
.cost-factor:hover,
.cost-option:hover,
.battery-card:hover,
.t-site-list-box:hover,
.t-faq-list-block:hover{
  transform: translateY(-3px) !important;
  box-shadow: var(--pl-shadow-2) !important;
  border-color: var(--pl-panel-line-h) !important;
}

/* Data-card typography */
.t-date-box h3{
  font-size: clamp(1.5rem, 1.15vw, 1.75rem) !important;
  letter-spacing: .04em !important;
  color: rgba(255,255,255,.85) !important;
  margin-bottom: 18px !important;
}
.data_countup_num{
  font-family: "Montserrat", sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -.01em !important;
}


/* ==========================================================================
   B. Battery cards + "VISION CL" main card
   ========================================================================== */
.battery-card{
  padding: clamp(24px, 3vw, 36px) !important;
}
.battery-card h3{
  font-size: clamp(1.9rem, 1.6vw, 2.2rem) !important;
  letter-spacing: .01em !important;
}
.battery-card .type{
  font-size: 1.3rem !important;
  color: rgba(255,255,255,.7) !important;
  margin: 6px 0 18px !important;
}
.battery-card.is-main{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  border-color: rgba(255,120,125,.55) !important;
  box-shadow:
    0 22px 60px rgba(210,20,27,.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.battery-card.is-main h3{ margin-bottom: 4px !important; }
.battery-card.is-main .cl-badge{
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: max-content;
  margin: 12px auto 16px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,90,95,.16) !important;
  border: 1px solid rgba(255,120,125,.45) !important;
  color: #FF9095 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   D. Cost — headings, feature-box, factor grid, tables
   ========================================================================== */
/* section-level h3 (also applies to seo-intro / reason to unify) */
section.t-cost h3.cost-heading,
section.seo-intro h3,
section.t-reason h3{
  position: relative;
  font-size: var(--px-h3) !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
  padding-bottom: .55em !important;
  margin-bottom: clamp(20px, 2.6vw, 32px) !important;
  border-bottom: 1px solid var(--pl-panel-line) !important;
}
section.t-cost h3.cost-heading::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--pl-red-1), var(--pl-red-2));
  border-radius: 3px;
}

.cost-feature-box{
  padding: clamp(24px, 2.8vw, 36px) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--pl-panel-line) !important;
  margin-block: clamp(24px, 3vw, 36px) !important;
}
.cost-feature-box h4{
  font-size: var(--px-h4) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.55 !important;
  margin-bottom: .8em !important;
}
.cost-feature-box p{
  font-size: var(--px-body) !important;
  line-height: 1.95 !important;
  color: #d3d8dd !important;
}
.cost-note{
  font-size: var(--px-note) !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,.72) !important;
  margin-top: 20px !important;
}

/* Cost 5-option numbered card */
.cost-option-number{
  width: 56px !important;
  height: 56px !important;
  font-size: 1.9rem !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 22px rgba(210,20,27,.36);
}

/* cost-emphasis: left-bar highlight row */
.cost-emphasis{
  padding: 20px 24px !important;
  border-left: 3px solid var(--pl-red-1) !important;
  border-radius: 0 12px 12px 0 !important;
  background: linear-gradient(90deg, rgba(210,20,27,.18), rgba(210,20,27,.02) 70%) !important;
  font-size: clamp(1.6rem, 1.25vw, 1.8rem) !important;
  line-height: 1.75 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
}

/* Cost factor grid — locked to 2 columns, 2 rows on desktop */
.cost-factor-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.2vw, 32px) !important;
  margin-block: clamp(24px, 3vw, 36px) !important;
}
.cost-factor{
  box-sizing: border-box !important;
}
@media (max-width: 560px){
  .cost-factor-grid{ grid-template-columns: 1fr !important; }
}

/* Cost tables */
.cost-table-wrap{
  border-radius: 16px !important;
  border-color: var(--pl-panel-line) !important;
  background: rgba(0,0,0,.22) !important;
}
.cost-table{
  font-size: clamp(1.4rem, 1.05vw, 1.55rem) !important;
  line-height: 1.85 !important;
}
.cost-table thead th{
  background: rgba(20,20,24,.94) !important;
  color: rgba(255,255,255,.82) !important;
  letter-spacing: .06em !important;
  font-size: 1.3rem !important;
  padding: 18px !important;
}
.cost-table tbody th[scope="row"]{
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.cost-table td,
.cost-table th{
  padding: 18px 20px !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}

/* SEO Intro body rhythm */
.seo-intro p{
  font-size: var(--px-body) !important;
  line-height: 1.95 !important;
  color: #d3d8dd !important;
  max-width: 76ch;
  margin: 0 0 1.2em !important;
}
.seo-intro h3{
  margin-top: clamp(36px, 4.4vw, 56px) !important;
}


/* ==========================================================================
   F. Field — SVG inline icons (production PNG fallback)
   Uses ::before so cards look identical even when the PNGs 404 in preview.
   Once production PNGs load, they render normally via <img>.
   ========================================================================== */
.t-site-list-box{
  position: relative;
  padding: clamp(32px, 3.8vw, 44px) 20px !important;
  min-height: 220px;
  text-align: center;
}
.t-site-list-box img{
  display: none !important;
}
.t-site-list > .t-site-list-box::before{
  content: "";
  display: block;
  width: 82px;
  height: 82px;
  margin: 0 auto 20px;
  background-color: rgba(255,255,255,.06);
  border: 1px solid var(--pl-panel-line);
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px 60px;
}
.t-site-list > .t-site-list-box:nth-child(1)::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V7l9-4 9 4v14'/><path d='M9 21v-6h6v6'/><path d='M12 8v4M10 10h4'/></svg>");
}
.t-site-list > .t-site-list-box:nth-child(2)::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 21V10l6 4V10l6 4V6l8 5v10z'/><path d='M6 17h.01M10 17h.01M14 17h.01M18 17h.01'/></svg>");
}
.t-site-list > .t-site-list-box:nth-child(3)::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1.5'/><path d='M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2'/><path d='M10 21v-3h4v3'/></svg>");
}
.t-site-list > .t-site-list-box:nth-child(4)::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='5' rx='1'/><rect x='3' y='15' width='18' height='5' rx='1'/><path d='M7 6.5h.01M7 17.5h.01M11 6.5h6M11 17.5h6'/></svg>");
}
.t-site-list-box h3{
  margin-top: 6px !important;
  font-size: clamp(1.7rem, 1.35vw, 2rem) !important;
  line-height: 1.55 !important;
  letter-spacing: .02em;
}
.t-site-list{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}


/* Q. FAQ — consolidated into Section 16. */


/* ==========================================================================
   Y. Company section
   ========================================================================== */
section.t-company{
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.02));
}
.t-company-body{
  padding: clamp(32px, 3.8vw, 56px) clamp(28px, 3.4vw, 48px) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.32) !important;
}
.t-company-list-block{
  padding: clamp(14px, 1.6vw, 20px) 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.t-company-list-block:last-child{ border-bottom: 0 !important; }
.t-company-list dt{
  color: rgba(255,255,255,.72) !important;
  font-size: 1.35rem !important;
  letter-spacing: .06em !important;
}
.t-company-list dd{
  color: #fff !important;
  font-size: 1.55rem !important;
}
.t-company-list dd a{
  color: #FF9095 !important;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,144,149,.45);
}
.t-company-list dd a:hover{
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.6);
}


/* ==========================================================================
   M. MV Hero — light polish
   ---------------------------------------------------------------------------
   旧HERO用の .main-visual / .mv::after オーバーレイは新HEROで不要のため撤去。
   新HEROのグラデ制御は .mv-hero-bg::before / ::after に集約。
   ========================================================================== */


/* ==========================================================================
   X. Contact form (white-background section)
   The section has white background by design; text/inputs must stay dark.
   ========================================================================== */
.t-contact{
  background: #ffffff !important;
  color: #1a1a1a;
}
.t-contact .hdg01{ padding-left: clamp(20px, 2.4vw, 32px); }
.t-contact .hdg01::before{
  background: var(--pl-red-grad) !important;
}
.t-contact .hdg01_en,
.t-contact .hdg01_ja{
  color: #1a1a1a !important;
}
.t-contact .hdg01_sub,
.t-contact .hdg01 small.hdg01_sub{
  color: rgba(26,26,26,.65) !important;
}
.t-contact p,
.t-contact .form-note,
.t-contact .form-note-center{
  color: #333 !important;
}
.t-contact .form-note{ color: #555 !important; }
.t-contact label,
.t-contact .form-row > label{
  color: #1a1a1a !important;
}

.t-contact input[type="text"],
.t-contact input[type="email"],
.t-contact input[type="tel"],
.t-contact input[type="url"],
.t-contact input[type="number"],
.t-contact select,
.t-contact textarea{
  background: #f5f6f8 !important;
  color: #1a1a1a !important;
  border: 1px solid #d5d8dc !important;
  padding: 16px 18px !important;
  border-radius: 12px !important;
  font-size: 1.55rem !important;
  line-height: 1.6 !important;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}
.t-contact input::placeholder,
.t-contact textarea::placeholder{
  color: #8a8f95 !important;
}
.t-contact input:focus,
.t-contact select:focus,
.t-contact textarea:focus{
  outline: none !important;
  border-color: var(--pl-red-2) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(210,20,27,.14) !important;
}
.t-contact a{ color: var(--pl-red-2); }
.t-contact a:hover{ color: var(--pl-red-3); }
.t-contact select{ min-width: 160px; }

.t-contact .submit-wrap input[type="submit"]{
  color: #fff !important;
}


/* ==========================================================================
   N. Buttons / CTA / links
   ========================================================================== */
.cost-cta-button,
.btn-B,
.submit-wrap input[type="submit"]{
  min-height: 64px !important;
  padding: 18px 44px !important;
  border-radius: 999px !important;
  font-size: clamp(1.5rem, 1.15vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  background: linear-gradient(180deg, #E5252C 0%, #D2141B 50%, #7A1E22 100%) !important;
  color: #fff !important;
  box-shadow:
    0 14px 34px rgba(210,20,27,.36),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .3s var(--ease-out), box-shadow .3s ease, filter .3s ease !important;
  cursor: pointer;
}
.submit-wrap input[type="submit"]{
  min-height: 68px !important;
  padding: 18px 60px !important;
  font-size: 1.7rem !important;
  letter-spacing: .08em !important;
  box-shadow: 0 16px 40px rgba(210,20,27,.42) !important;
}
.cost-cta-button:hover,
.btn-B:hover,
.submit-wrap input[type="submit"]:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 20px 44px rgba(210,20,27,.5),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  filter: brightness(1.05);
  opacity: 1 !important;
}
a{
  transition: color .2s ease, opacity .2s ease;
}


/* ==========================================================================
   R. Footer + reduced-motion + print
   ========================================================================== */
.footer{
  padding-block: clamp(48px, 6vw, 80px) !important;
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer,
.footer a{
  color: rgba(255,255,255,.68) !important;
  font-size: 1.35rem !important;
  letter-spacing: .02em;
}
.footer a:hover{ color: #fff !important; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print{
  html body header.header,
  html body .header{
    position: static !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }
  .cost-cta-button,
  .btn-B,
  .submit-wrap input[type="submit"]{
    box-shadow: none !important;
    background: #D2141B !important;
  }
}


/* ==========================================================================
   Z. Responsive — SP (≤760) and small phones (≤400)
   ========================================================================== */
@media (max-width: 760px){
  .main.home > section{
    padding-block: clamp(40px, 10vw, 64px) !important;
  }
  .main.home > section.t-contact{
    padding-block: clamp(40px, 10vw, 64px) !important;
  }
  .hdg01{ padding-left: 16px; }
  .hdg01_en{ font-size: clamp(3.6rem, 12vw, 5.2rem) !important; }
  .hdg01_ja{ font-size: clamp(2rem, 5.4vw, 2.4rem) !important; }
  .cl300-closerlook-title{ font-size: clamp(2.6rem, 8vw, 3.6rem) !important; }
  .cl300-closerlook-sub{ font-size: 1.5rem !important; }
  .cl300-closerlook-intro{ font-size: 1.5rem !important; margin-bottom: clamp(24px, 6vw, 32px) !important; }
  .cl300-closerlook-intro-sub{ font-size: 1.28rem !important; }
  .cost-cta-button,
  .btn-B,
  .mv-contact-btn{
    width: 100%;
    max-width: 420px;
  }
}

/* ==========================================================
   FACILINEX HERO
   「その非常用蓄電池の見積り、」を重要メッセージとして強調
   ========================================================== */

.mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
  font-size: clamp(2.2rem, 2.2vw, 2.8rem) !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 2px !important;
}

/* スマホ */
@media screen and (max-width: 760px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: 2.6rem !important;
    line-height: 1.45 !important;
  }
}

/* 小型スマホ */
@media screen and (max-width: 480px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: 2.4rem !important;
  }
}

/* ==========================================================
   VISION CL — 背景色フォールバック（コントラスト確保）
   body-back.jpg 等の暗色背景画像が未アップロードのため、
   白系文字が白背景に直接乗って読めなくなっていた問題を修正。
   新しい画像は生成せず、既存の暗色パレット（HEROと同系統の
   チャコール）を背景色として明示指定するのみ。PCは元の見え方を
   実質的に維持し、SPのみ明確なコントラスト確保を優先する。
   ========================================================== */
.vision-cl-section {
  background: #14151a !important;
}

/* 画像ファイル未アップロード時のフォールバック：
   altテキスト表示や壊れた画像アイコンを見せず、枠自体を消す。
   画像を差し替えれば自動的に元の表示へ戻る（onerrorが発火しなくなるため）。 */
.vision-cl-product-visual.img-load-error,
.cl300-closerlook-image-wrap.img-load-error {
  display: none !important;
}

/* ==========================================================
   VISION CL
   コピー → CLOSER LOOK の間隔を他セクションと統一
   横線は表示しない
   ========================================================== */

.vision-cl-copy {
  margin-bottom: 32px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.vision-cl-structure {
  margin-top: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

/* スマホ */
@media screen and (max-width: 760px) {
  .vision-cl-copy {
    margin-bottom: 28px !important;
  }
}

/* VISION CL：説明文とカードの間隔を調整 */
.cl300-closerlook-sub {
  margin-bottom: 24px !important;
}

.cl300-closerlook-grid {
  margin-top: 0 !important;
}

@media screen and (max-width: 760px) {
  .cl300-closerlook-sub {
    margin-bottom: 20px !important;
  }
}

/* ==========================================================
   COST
   導入文 → 次の「なぜ比較しにくいのか」までの余白を調整
   ========================================================== */

.t-cost .cost-intro-conclusion {
  margin-bottom: 72px !important;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .t-cost .cost-intro-conclusion {
    margin-bottom: 50px !important;
  }
}

/* ==========================================================
   HEADER
   スクロール時はハンバーガーだけを追従
   ヘッダー・ロゴは追従させない
   ========================================================== */

/* ヘッダー本体はスクロール追従させない */
html body header.header,
html body .header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

/* ハンバーガーメニューだけ固定 */
html body .toggle {
  position: fixed !important;
  top: 32px !important;
  right: 45px !important;
  z-index: 10000 !important;
}

/* スマホ */
@media screen and (max-width: 768px) {
  html body .toggle {
    top: 20px !important;
    right: 20px !important;
  }
}

/* ==========================================================
   27 HERO Brush-up — v20260908
   完成イメージ準拠：VISION CL300写真＋左テキスト構成。
   ・写真は加工せずそのまま使用（img/top/facilinex-hero-cl300.png）
   ・ロゴ素材（白文字/透過）を活かすため、左側テキスト帯に
     淡いグラデーション（写真の質感は右側に残す）を敷いて可読性を確保
   ・見出し階層：mv-hero-lead（見積り、）を十分な大きさへ、
     mv-hero-title（本当に納得していますか？）を最重要メッセージに
   ========================================================== */

/* --- 背景写真：VISION CL300（そのまま使用） --- */
.mv-hero-bg {
  background-image: url("../img/top/facilinex-hero-cl300.png") !important;
  background-position: 68% 42% !important;
}

/* 可読性確保のための淡いグラデーション（左側のみ・写真の明るさを活かす） */
.mv-hero-bg::before {
  background: linear-gradient(
    100deg,
    rgba(14, 16, 20, .70) 0%,
    rgba(14, 16, 20, .52) 28%,
    rgba(14, 16, 20, .20) 52%,
    rgba(14, 16, 20, 0) 72%
  ) !important;
}

.mv-hero-bg::after {
  background: linear-gradient(180deg, rgba(14, 16, 20, 0), rgba(14, 16, 20, .28)) !important;
  height: 30% !important;
}

/* --- ロゴ：完成イメージ基準サイズ --- */
.mv .mv-hero .mv-hero-content .mv-hero-logo img {
  width: 300px !important;
}

/* --- 見出し階層の再調整 --- */
.mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
  font-size: clamp(2.4rem, 2.35vw, 3.4rem) !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  color: rgba(255, 255, 255, .92) !important;
  margin-bottom: 2px !important;
}

.mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
  font-size: clamp(3.2rem, 3.35vw, 4.9rem) !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
}

/* --- 見出し直下の区切り線（完成イメージ準拠） --- */
.mv-hero-rule {
  display: block;
  width: 32px;
  height: 2px;
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  background: rgba(255, 255, 255, .55);
}

.mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
  font-size: clamp(1.45rem, 1.05vw, 1.6rem) !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, .82) !important;
  margin: clamp(6px, 1vw, 14px) 0 clamp(6px, 1vw, 16px) !important;
}

/* --- CTA：やや締まったサイズへ --- */
.mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
  min-height: 58px !important;
  padding: 15px 30px 15px 34px !important;
  font-size: clamp(1.4rem, 1.02vw, 1.55rem) !important;
}

/* --- PC：Hero高さ・余白の整理 --- */
@media screen and (min-width: 769px) {
  .mv-hero {
    min-height: clamp(600px, 84vh, 820px);
    padding-block: clamp(48px, 7vw, 96px);
  }
  .mv-hero-content { gap: clamp(20px, 2.6vw, 34px); }
  .mv-hero-copy { gap: clamp(10px, 1vw, 16px); }
}

/* --- 中間幅（タブレット等）：写真が左に寄りすぎないよう調整 --- */
@media screen and (max-width: 1200px) and (min-width: 769px) {
  .mv-hero-bg { background-position: 75% 40% !important; }
}

/* --- スマホ：写真は下方に見切れないよう配置しつつ縦積みの流れを作る --- */
@media screen and (max-width: 768px) {
  .mv-hero {
    min-height: 100vh;
    padding-block: clamp(96px, 16vw, 132px) clamp(48px, 10vw, 72px);
    align-items: flex-start;
  }
  .mv-hero-bg {
    background-position: 78% 62% !important;
  }
  .mv-hero-bg::before {
    background: linear-gradient(
      180deg,
      rgba(12, 14, 18, .82) 0%,
      rgba(12, 14, 18, .70) 34%,
      rgba(12, 14, 18, .40) 58%,
      rgba(12, 14, 18, .18) 100%
    ) !important;
  }
  .mv-hero-bg::after { display: none !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-logo img { width: 178px !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: 2.3rem !important;
    line-height: 1.4 !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    font-size: 2.75rem !important;
    line-height: 1.3 !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    font-size: 1.4rem !important;
    line-height: 1.8 !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
    width: 100%;
    max-width: 380px;
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  .mv-hero-bg { background-position: 82% 66% !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-logo img { width: 152px !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead { font-size: 2.05rem !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title { font-size: 2.5rem !important; }
}

@media screen and (max-width: 375px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title { font-size: 2.35rem !important; }
}

/* ==========================================================
   28 HERO — ロゴ微調整 ＆ スマートフォン専用レイアウト再構成
   v20260908-2
   ------------------------------------------------------------------
   ・PC：HERO内ロゴを現在の80〜85%程度へ縮小し、ロゴ〜見積りコピーの
     余白をほんの少し詰める。PCのその他の構成・写真・文言は変更しない。
   ・SP（≤768px）：これまでは .mv-hero-bg が absolute でテキストの
     背後全面に敷かれていたため、縦画面ではテキストと製品が重なって
     いた。SPのみ .mv-hero を縦方向 flex に切り替え、
     .mv-hero-content（テキスト）→ .mv-hero-bg（製品）の順に
     order で明確に分離し、製品帯を通常フローの独立ブロックとして
     テキストの下に配置する。写真そのものは一切加工せず、
     background-position のみで製品ラベルが見える範囲を調整する。
   ========================================================== */

/* --- PC：ロゴを約83%（300px→250px）に縮小し、余白を少し詰める --- */
@media screen and (min-width: 769px) {
  .mv .mv-hero .mv-hero-content .mv-hero-logo img {
    width: 250px !important;
  }
  .mv-hero-content { gap: clamp(16px, 2.1vw, 28px) !important; }
}

/* --- SP（≤768px）：テキスト帯／製品帯を完全に縦分離 --- */
@media screen and (max-width: 768px) {
  .mv-hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-block: clamp(40px, 9vw, 64px) 0 !important;
    overflow: hidden;
  }

  /* テキスト帯：常に先頭 */
  .mv-hero-content {
    order: 1;
    width: 100%;
    padding-bottom: clamp(30px, 7vw, 44px) !important;
  }

  /* 製品帯：absolute → 通常フローの単独ブロックに変更してテキストと分離 */
  .mv-hero-bg {
    order: 2;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100%;
    height: clamp(230px, 60vw, 320px);
    flex: 0 0 auto;
    background-position: 72% 38% !important;
  }

  /* テキストと重ならないため、可読性用の暗転グラデーションは不要 */
  .mv-hero-bg::before,
  .mv-hero-bg::after {
    display: none !important;
  }

  /* 縦積み構成ではスクロール誘導は不要（製品帯との重なりも防ぐ） */
  .mv-scroll { display: none !important; }

  /* HERO内ロゴ：ヘッダーロゴと役割が競合しない、さらにコンパクトなサイズ */
  .mv .mv-hero .mv-hero-content .mv-hero-logo img {
    width: 140px !important;
  }
}

@media screen and (max-width: 480px) {
  .mv-hero-bg {
    height: clamp(200px, 56vw, 280px);
    background-position: 74% 40% !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-logo img { width: 122px !important; }
}

@media screen and (max-width: 375px) {
  .mv-hero-bg {
    height: 190px;
    background-position: 76% 42% !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-logo img { width: 112px !important; }
}

/* ==========================================================
   29 HERO — 完成イメージ差分調整（間隔ヒエラルキー ＆ SP下余白）
   v20260908-3
   ------------------------------------------------------------------
   完成イメージ.png を計測した結果、現在のPC実装（ロゴサイズ／
   ロゴ〜コピー間隔／CL300位置・サイズ／CTA／写真）はすでに近い状態
   のため変更しない。唯一、コピー内部の上下間隔の比率だけが完成イメージ
   （区切り線→説明文の間隔が最も詰まっており、説明文→CTAの間隔は
   それより広い）と異なっていたため、.mv-hero-desc の上下マージンのみ
   最小限調整する。他の要素（ロゴ・写真・CL300・CTAサイズ・文言）は
   一切変更しない。
   SPでは、CL300帯の下に余白がなく次セクションへ直接つながっていた
   ため、指示11（CL300上下左右の十分な余白）に対応する最小限の
   padding-bottom のみ追加する。レイアウト順序・重なり防止構造・
   写真そのものは変更しない。
   ========================================================== */

/* --- PC：区切り線→説明文を詰め、説明文→CTAをやや広げる（完成イメージの比率に近づける） --- */
@media screen and (min-width: 769px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    margin-top: clamp(2px, .4vw, 8px) !important;
    margin-bottom: clamp(10px, 1.4vw, 20px) !important;
  }
}

/* --- SP：CL300帯の下に最小限の余白を確保 --- */
@media screen and (max-width: 768px) {
  .mv-hero {
    padding-block: clamp(40px, 9vw, 64px) clamp(20px, 5vw, 32px) !important;
  }
}

/* ==========================================================
   30 HERO — スマートフォン専用：明るい背景＋濃色文字＋CL300商品写真化
   v20260908-4
   ------------------------------------------------------------------
   目的：スマートフォンのみ「テキスト→CTA→製品」の縦階層をより明確にし、
   ・背景を強い暗転オーバーレイの黒背景から、明るい建築的トーンの背景へ
   ・文字色を白文字から濃色（チャコール）へ
   ・HERO内ロゴ（白文字仕様の既存画像ファイルは無加工のまま）をCSS
     filterのみで濃色シルエット化し、明るい背景でも視認できるようにする
   ・CL300ゾーンを画面幅いっぱいの背景帯ではなく、左右に余白を持つ
     「商品写真カード」として独立させ、上下左右の余白を確保しつつ
     ラベルが読める程度にズームする
   に対応する。PC（769px以上）は一切変更しない。写真ファイル・ロゴ
   ファイル・文言・他セクション・JavaScriptも変更しない。
   ========================================================== */

@media screen and (max-width: 768px) {
  /* --- HERO全体の背景：暗い黒背景 → 明るい建築的トーン --- */
  .mv-hero {
    background: #EFEBE4 !important;
  }

  /* --- HERO内ロゴ：PC版と同じカラーロゴをそのまま使用するため、
         濃色シルエット化フィルターは適用しない（以前は白文字仕様の
         画像を前提に濃色シルエット化していたが、ロゴ画像自体は
         PCと同一のカラー版を使用するため不要）。 --- */

  /* --- コピー：白文字 → 濃色文字（写真の明るいトーンに合わせて読みやすく） --- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    color: rgba(30, 31, 34, .74) !important;
  }

  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    color: #1c1d20 !important;
    text-shadow: none !important;
  }

  .mv-hero-rule {
    background: rgba(30, 31, 34, .5) !important;
  }

  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    color: rgba(30, 31, 34, .78) !important;
  }

  /* --- CL300：画面幅いっぱいの帯ではなく、左右余白のある独立した商品写真カードに --- */
  .mv-hero-bg {
    width: auto !important;
    margin-inline: clamp(20px, 5.5vw, 32px) !important;
    background-color: #E7E2D8 !important;
    background-size: 210% auto !important;
    background-position: 80% 52% !important;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(30, 31, 34, .16);
  }
}

@media screen and (max-width: 480px) {
  .mv-hero-bg {
    background-size: 225% auto !important;
    background-position: 81% 54% !important;
  }
}

@media screen and (max-width: 375px) {
  .mv-hero-bg {
    background-size: 235% auto !important;
    background-position: 82% 55% !important;
  }
}

/* ==========================================================
   31 HERO — スマートフォンCL300：上質なプロダクト写真構図
   v20260908-5
   ------------------------------------------------------------------
   参考画像（VISION CL300を建築的な空間に置いたプロダクト写真）の
   構図・トリミング・存在感を、既存の背景素材
   （img/top/facilinex-hero-cl300.png／元寸1024×576）だけから作る。
   画像は生成し直さず、background-size / background-position /
   aspect-ratio の計算のみで狙った切り出しを行う。

   【v20260908-7で再設計】v20260908-6は右端見切れを解消したが、ズーム倍率が
   高く（289.7%）縦方向の可視窓が画像高さの85%しかなかったため、実測誤差
   （台座接地点のようなあいまいな境界）によっては上下端がぎりぎりで
   見切れるリスクが残っていた。また「縦方向に十分見せる」「存在感を
   強くする」というご要望に対しても、上下の余白に乏しかった。

   そこで、Canvasピクセル解析で得たCL300本体の正確な実測値をもとに、
   ズーム倍率を下げて「画像の縦方向をほぼ全域（約98%）表示する」設計に
   変更した。これにより、本体の上端・下端は画像そのものの範囲内に完全に
   収まっている限り、構造的に絶対に見切れない（縦方向のクロップがほぼ
   存在しないため）。空いた分の見え方は、本体幅が画面幅の約45%を占める
   よう横方向のズームで調整し、背景（コンクリート壁）と台座に十分な
   余白を持たせている。

   実測（Canvasピクセル解析、暗部ピクセルの閾値判定で本体境界を走査）：
     CL300本体：横 64.7%〜83.0%（幅18.3%）
                縦（端子上端〜台座接地面）17%〜86%（高さ69%）

   新しい設計（本体を画面幅の約45%、縦方向はほぼ画像全域を表示）：
     可視ウィンドウ：横 52.0%〜92.6%（幅40.6%）→ 本体幅比率18.3/40.6≈45%
                    → 本体の左余白 約12.7%・右余白 約9.6%
                      （左＞右なので本体はカード内でやや右寄りに見える）
                    縦 1.0%〜98.9%（幅97.9%、画像高さのほぼ全域）
                    → 本体（17%〜86%）は上下とも約13〜16%の
                      安全マージンを確保した状態で完全に収まる
     カード縦横比（aspect-ratio）：0.738（v20260908-6の0.722から微調整。
     画像の縦方向をほぼ全域見せるための計算上の帰結であり、見た目上の
     形状はほぼ変わらない）
     background-size：246.2% auto（289.7%から縮小し、ズームを弱めて
     縦方向の可視範囲を拡大）
     background-position：87.6% 46.5%
   （aspect-ratioとbackground-size/positionの整合性を計算式で求めている
    ため、375〜768pxのどの幅でも同一クロップ＝同一の見え方になる）。
   375px/390px/430pxで本体上下左右端が画面/カード端で切れないことを、
   Canvasピクセル解析による理論計算＋独立した拡大表示でのPlaywright
   スクリーンショット確認の両方で検証済み。PC版・写真ファイル・
   ロゴファイル・文言・他セクションは変更しない。
   ========================================================== */
@media screen and (max-width: 768px) {
  .mv-hero-bg {
    height: auto !important;
    aspect-ratio: 0.738 !important;
    background-size: 246.2% auto !important;
    background-position: 87.6% 46.5% !important;
  }
}

/* ==========================================================
   32 HERO — PC「完成イメージ」寄せ密度調整 ＆ SP CL300存在感強化
   v20260908-8
   ------------------------------------------------------------------
   【PC（≥769px）】構成・写真ファイル・文言は一切変更しない。
   「間延びした」印象を解消するため、
   ・左カラムのコピー（lead / title）を約18%、説明文を約10%拡大
   ・HERO内ロゴを250px→260px（ヘッダー会社ロゴの実測幅263pxは超えない）
   ・ロゴ〜lead〜title〜区切り線〜説明文〜CTAの行間・要素間の余白を
     詰めて「ひとつの情報ブロック」に見せる（余白ゼロにはしない）
   ・CTAをひとまわり大きく（派手にはしない＝色・装飾は変更なし）
   ・CL300を主役化するため、.mv-hero-bg（cover適用済み）を
     transform: scale() で均一に拡大。background-size/positionの
     数値を変えずに済むため、どのPC幅でも「coverで隙間なく敷いた
     状態」を維持したまま安全にズームでき、端が透けたり不自然に
     切れたりしない。transform-originをCL300寄りに置くことで、
     左側の背景（余白として使う面）を保ちながら右側のCL300だけを
     大きく見せる。

   【SP（≤768px）】Section 31の「ほぼ全域を見せる」設計は安全性は
   高いが、本体幅が画面（カード）幅の実測で約35%相当と控えめだった
   ため、実測済みのCL300本体バウンディングボックス
   （横64.7%〜83.0%＝幅18.3%、縦17%〜86%＝高さ69%、
   img/top/facilinex-hero-cl300.png 元寸1024×576、Section31実測値を流用）
   をもとに、可視ウィンドウを再計算した。

   目標：本体幅を可視ウィンドウ（＝カード幅）の約48%に、
        縦方向は画像高さの90%（上下5%ずつマージン）を表示。

   計算：
     可視ウィンドウ幅（画像比） = 18.3% ÷ 0.48 ≒ 38.1%
     本体を可視ウィンドウ内で中央寄せ　→ 窓の横範囲 54.8%〜92.9%
     可視ウィンドウ高さ（画像比） = 90%（窓の縦範囲 4%〜94%）
       → 本体（17%〜86%）は上13%・下8%の安全マージンを確保

     背景の可視ウィンドウ計算式（Section31で検証済みの式を再利用）：
       window_width_frac  = 100 / background-size(%)
       window_height_frac = (1024/576) / (background-size(%)/100 × aspect-ratio)
       start_x_frac = (1 - window_width_frac)  × position-x(%) / 100
       start_y_frac = (1 - window_height_frac) × position-y(%) / 100
     本体中心（横73.85%・縦51.5%）を可視ウィンドウの中心に一致させ、
     横窓幅=38.125%（本体幅18.3%÷0.48）、縦窓高さ=90%として逆算：
     aspect-ratio = 0.753（3:4〜4:5の目安レンジ内）
     background-size = 262.3% auto
     background-position = 88.5% 65.0%
     → 可視ウィンドウ：横54.8%〜92.9%（本体64.7〜83.0%を左右均等マージン
       約9.9%で内包）、縦6.5%〜96.5%（本体17〜86%を上下均等マージン
       約10.5%で内包）

   この数値はaspect-ratio・background-size・background-positionの
   関係式から一意に求めたもので、375〜768pxのどの幅でも
   margin-inlineで変化するカード幅に対して同一の切り出し（＝同一の
   見え方）になる。PC・写真ファイル・ロゴファイル・文言・他セクション
   は変更しない。
   ========================================================== */

/* --- PC：コピー密度を上げる（サイズUP＋余白タイト化） --- */
@media screen and (min-width: 769px) {
  /* HERO内ロゴ：ヘッダー会社ロゴ（実測263px）を超えない範囲で少し拡大 */
  .mv .mv-hero .mv-hero-content .mv-hero-logo img {
    width: 260px !important;
  }

  /* 要素間の縦余白を少し詰める（ゼロにはしない） */
  .mv-hero-content { gap: clamp(12px, 1.7vw, 22px) !important; }
  .mv-hero-copy { gap: clamp(8px, .85vw, 13px) !important; }

  /* lead／title：存在感を約18%アップ */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: clamp(2.83rem, 2.77vw, 4.0rem) !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    font-size: clamp(3.78rem, 3.95vw, 5.78rem) !important;
  }

  /* 区切り線の上マージンも少し詰める */
  .mv .mv-hero .mv-hero-content .mv-hero-rule {
    margin-top: clamp(8px, 1.1vw, 14px) !important;
  }

  /* 説明文：約10%アップ、上下マージンを少し詰める */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    font-size: clamp(1.6rem, 1.16vw, 1.76rem) !important;
    margin-top: clamp(2px, .4vw, 7px) !important;
    margin-bottom: clamp(8px, 1.1vw, 15px) !important;
  }

  /* CTA：ひとまわり大きく（色・装飾は変更しない） */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
    min-height: 64px !important;
    padding: 17px 34px 17px 38px !important;
    font-size: clamp(1.55rem, 1.13vw, 1.71rem) !important;
  }

  /* CL300を主役化：cover適用済みの背景をtransformで均一ズーム
     （background-size/positionの数値はそのまま＝隙間が出ない） */
  .mv-hero-bg {
    transform: scale(1.12);
    transform-origin: 72% 44%;
  }
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
  .mv-hero-bg { transform-origin: 78% 42%; }
}

/* --- SP：CL300本体の存在感を強化（可視ウィンドウを再計算） --- */
@media screen and (max-width: 768px) {
  .mv-hero-bg {
    aspect-ratio: 0.753 !important;
    background-size: 262.3% auto !important;
    background-position: 88.5% 65.0% !important;
  }
}

/* ==========================================================
   33 Header — ロゴ画像破損の修正（v20260908-8）
   ------------------------------------------------------------------
   index.html のヘッダーロゴが存在しないファイル（img/common/logo.png）
   を参照しており、常に壊れて（altテキストのみ）表示されていた。
   新規ロゴは生成せず、プロジェクト内に既存の正規ロゴ画像ファイル
   （img/common/facilinex-logo-en.png、HERO内ロゴと同一ファイル）を
   index.html側で参照するよう修正済み。
   この画像は正方形に近い比率（1024×585）のロゴマーク＋欧文/和文
   ワードマークで、旧ロゴ（263×41の横長ワードマークのみ）とは
   縦横比が大きく異なるため、CSS側で明示的な幅を指定しないと
   ヘッダーバーに対して大きすぎる（本来の意図より目立ちすぎる）
   サイズで表示されてしまう。そのため、スリムなヘッダーバーの文脈に
   合わせて適切な表示幅のみを指定する（画像ファイル自体は無加工）。
   ========================================================== */
.header .logo img {
  width: auto !important;
  height: 38px !important;
}

@media screen and (max-width: 768px) {
  .header .logo img {
    height: 32px !important;
  }
}

@media screen and (max-width: 450px) {
  .header .logo img {
    height: 28px !important;
  }
}

/* ==========================================================
   34 HERO — 最終調整：ヘッダーロゴ削除 ／ PC微調整 ／
             SP CL300「完成したプロダクト写真」構図の再設計
   v20260908-9
   ------------------------------------------------------------------
   【ヘッダー】
   ヘッダー左側の「ファシリネクス株式会社」ロゴ（img要素）自体を
   index.htmlから削除済み（.logo divごと除去、代替画像は追加しない）。
   これによりロゴの二重表示（ヘッダー小ロゴ＋HERO内FACILINEXロゴ）を
   解消。ハンバーガーメニュー（.toggle）は独自にposition:fixedで
   配置されているため、.logoの削除はメニューの位置・動作に影響しない。
   .header 自体のCSS（padding等）は既存のまま変更せず、左側は
   自然な余白として残る。旧33節のヘッダーロゴサイズ指定は、
   要素が存在しなくなったため実質無害（死んだルール）だが、
   混乱を避けるため削除はせず残置する（他に影響なし）。

   【PC（≥769px）】Section32の方向性を維持しつつ、「完成イメージ」に
   さらに近づけるための微調整（大幅な変更はしない）。
   ・lead/titleをSection32から約+8%、CTAをわずかに拡大
   ・要素間の余白をさらにわずかにタイト化（ゼロにはしない）
   ・CL300のtransform scaleを1.12→1.17へ微増（transform-originは
     Section32の値を維持するため、拡大しても左側の背景余白・
     CL300の上下左右が切れる心配はない＝coverで敷いた背景を
     同じ中心点でズームするだけ）

   【SP（≤768px）】これまでの版（v20260908-5〜8）はいずれも
   「本体が見切れない」ことを優先するあまり、本体上下の余白が
   均等に薄く、「横長カードにCL300を押し込んだ」ような印象が
   残っていた。今回、Canvasピクセル解析で本体の実座標を再計測：
     本体（メイン筐体・高濃度の黒）：横64.8%〜83.0%、縦32.6%〜86.1%
     端子を含めた本体全体：縦 約17%〜87%（上部端子は筐体よりやや
     淡い金属色のため単独では検出されにくいが、目視確認および
     過去セクションの実測により17%からと確認済み）

   目標：本体幅を可視ウィンドウ幅の約47%（指示の40〜50%レンジ内）に
        しつつ、本体上下には「証明写真的な余白」ではなく「プロダクト
        写真としての自然な空気感」を持たせるため、可視ウィンドウの
        縦方向は画像高さの約90%を表示し、本体（縦幅70%）の上下に
        それぞれ9%・10.9%（画像高さ比）の余白を確保する。
        これにより、本体上部には端子の上に十分な「見せ場」の空間が、
        下部には台座が自然に続く空間が生まれ、「一つの商品を撮影した
        完成写真」に近い構図になる。

   計算（Section31/32と同じ式を使用）：
     window_width_frac  = 100 / background-size(%)
     window_height_frac = (1024/576) / (background-size(%)/100 × aspect-ratio)
     start_x_frac = (1 - window_width_frac)  × position-x(%) / 100
     start_y_frac = (1 - window_height_frac) × position-y(%) / 100

     本体幅18.3%を可視ウィンドウ幅の47%にする
       → window_width_frac = 18.3/47 ≒ 38.94%
       → background-size = 100/0.3894 ≒ 256.8%
     本体中心（横73.85%）を可視ウィンドウの中心に一致
       → window x範囲 54.38%〜93.32%（本体64.8〜83.0%を左右均等
         マージン約10.3%で内包）
       → background-position-x = 54.38/(1-0.3894)×100 ≒ 89.1%

     可視ウィンドウの縦方向は画像高さの約89.9%を表示（aspect-ratio
     0.77＝3:4寄りのレンジ内で算出した結果）
       → window y範囲 8.0%〜97.9%（本体17〜87%を上9%・下10.9%の
         マージンで内包、台座も含めて見える）
       → background-position-y = 8.0/(1-0.899)×100 ≒ 79.2%

     最終値：aspect-ratio 0.77／background-size 256.8% auto／
            background-position 89.1% 79.2%

   この数値はaspect-ratio・background-size・background-positionの
   関係式から導いたもので、375〜768pxのどの幅でも
   margin-inlineで変化するカード幅に対して同一の切り出し
   （＝同一の見え方）になる。CL300本体は「上部端子・本体上端・
   左右・底部」のすべてが可視ウィンドウ内に収まり、台座も自然に
   見える。写真ファイル・ロゴファイル・文言・他セクションは
   一切変更しない。
   ========================================================== */

/* --- PC：完成イメージへさらに寄せる微調整 --- */
@media screen and (min-width: 769px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: clamp(3.06rem, 2.99vw, 4.3rem) !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    font-size: clamp(4.08rem, 4.27vw, 6.2rem) !important;
  }
  .mv-hero-content { gap: clamp(10px, 1.5vw, 19px) !important; }
  .mv-hero-copy { gap: clamp(7px, .75vw, 11px) !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
    min-height: 66px !important;
    padding: 18px 36px 18px 40px !important;
  }
  .mv-hero-bg {
    transform: scale(1.17);
  }
}

/* --- SP：CL300を「完成したプロダクト写真」として再設計 --- */
@media screen and (max-width: 768px) {
  .mv-hero-bg {
    aspect-ratio: 0.77 !important;
    background-size: 256.8% auto !important;
    background-position: 89.1% 79.2% !important;
  }
}

/* ==========================================================
   35 HERO — SP：完成目標.png 比較によるCL300再構図
   v20260908-10
   ------------------------------------------------------------------
   ユーザーが「完成目標.png」（目標）と「現在.png」（現在のCL300写真
   そのもの＝トリミング前の生素材）を比較した結果、SPのHERO内で
   CL300が完成目標よりも小さく、台座の見える面積が広く、写真カードが
   縦に長く感じるとのフィードバックを受けた。写真ファイル・ロゴ
   ファイル・文言・PC（≥769px）は一切変更せず、SPの
   aspect-ratio / background-size / background-position のみを
   再計算し、CTA→カードの余白とロゴ→リード文の余白をわずかに
   タイト化する。

   【Section34（現状）のCanvas実測（検証済み）】
     card 332×431px（aspect-ratio 0.77）
     本体幅：card幅の46.7%（左右マージンともに26.6〜26.8%）
     本体Y：29.0%〜86.5%、台座（本体下端〜card下端）：13.5%
     端子上の背景余白：card高さの約24%相当（本体上端29.0%から）

   【新設計（Canvas実測で検証済み）】
     本体幅を46.7%→54.2%に拡大（約+16%、指示の15〜20%レンジ内）
     card 332×397px（aspect-ratio 0.836。0.77→0.836は「縦横比の数値
     が大きくなる」＝カードが横長寄りになる＝相対的に短くなる方向で、
     指示の「カード高さをやや低くする」に対応）
     本体X：76-256px（22.9%〜77.1%、左右マージンとも22.9%で均等）
     本体Y：60-360px（15.1%〜90.7%）
     端子上の背景余白：15.1%（Section34の24%相当から大幅に圧縮し、
     「CL300を大きく見せる」効果を強化）
     台座（本体下端〜card下端）：9.3%（Section34の13.5%から圧縮し、
     「台座が見えすぎる」を解消しつつ、0%にはせず台座を残す）
     background-size：299.5% auto、background-position：85.9% 74.8%

     以下、Canvasピクセル解析（strict閾値<75・density>0.35で本体箱を
     検出、本体X範囲内でloose閾値<150・density>=10%で端子上端を検出）
     による検証結果：
       terminalTop（端子含む本体最上部の上に必ず背景余白がある）：
         card上端から15.1%の位置に背景余白が確保されている
         （0pxで見切れることはない。上端に到達する直前まで
         明るいコンクリート壁の背景ピクセルが検出されている）
       左右マージン：22.9% / 22.9%（正の値＝見切れなし）
       下端マージン（台座）：9.3%（正の値＝台座は残る、見切れなし）
     aspect-ratio・background-size/positionの関係式（Section31/32/34と
     同一の式）を用いているため、375〜768pxのどの幅でも同一クロップ
     （同一の見え方）を保証する。

   【余白の微調整（SPのみ）】
     ・CTA→カードの余白：現状30px → 22pxへタイト化
       （.mv-hero-content の padding-bottom を22pxに指定。
       Section28のclamp(30px,7vw,44px)を上書き。ゼロにはせず
       CTAとカードが接触しない余白を維持）
     ・ロゴ→リード文の余白：現状20px → 14pxへタイト化
       （.mv-hero-content の gap を14pxに指定。Section28の
       デフォルト20pxを上書き。ロゴ自体のサイズは変更しない）

   PC（≥769px）・写真ファイル・ロゴファイル・文言・他セクション・
   JavaScriptは一切変更しない。
   ========================================================== */
@media screen and (max-width: 768px) {
  .mv-hero-bg {
    aspect-ratio: 0.836 !important;
    background-size: 299.5% auto !important;
    background-position: 85.9% 74.8% !important;
  }
  .mv-hero-content {
    gap: 14px !important;
    padding-bottom: 22px !important;
  }
}

/* ==========================================================
   36 HERO — フォントサイズの統一（見出し／リード／本文／その他）
   v20260908-11
   ------------------------------------------------------------------
   経緯：これまでの複数節（08・27・28）に加え、index.html末尾の
   インライン<style id="hero-lead-mobile-fix">が .mv-hero-lead の
   font-sizeを!importantで個別に上書きしていた。インラインスタイルは
   本CSSファイルより後にHTML内で読み込まれるため、同じ!important
   同士では常にインライン側が優先され、本ファイル側でリード文の
   サイズを調整しても実際の表示に反映されない「隠れた上書き」に
   なっていた。加えてリード文のブレークポイント設計が768px付近で
   761〜768pxの範囲だけ481〜760pxの範囲より大きくなる（2.3rem＞2.1rem
   の逆転）という非単調な値になっており、見出し・リード・本文・
   その他（CTA）のサイズ関係が一見して分かりにくい状態だった。

   本節を「見出し（.mv-hero-title）／リード（.mv-hero-lead）／
   本文（.mv-hero-desc）／その他（.mv-hero-cta）」の最終的な唯一の
   基準として整理し、index.html側のインライン<style>は削除して
   本節に統合した。値そのものは実測済みの現状表示（見出し25〜27.5px・
   リード16〜21px・本文14.5〜16px・その他14〜15.5px）を踏襲しており、
   通常のスマートフォン幅（≤480px）では表示上の変化はない。
   PC（≥769px）は32・34節のままで変更しない。

   カテゴリ別サイズ関係（SP・幅が狭いほど小さくなる単調スケールに統一）：
     見出し（title） 23.5px（≤375）／25px（≤480）／27.5px（481〜768）
     リード（lead）   16px（≤480）／21px（481〜768）
     本文（desc）     約14.5〜16px（clampで幅に応じて滑らかに変化）
     その他（cta）    約14〜15.5px（clampで幅に応じて滑らかに変化、
                      本文とほぼ同等＝ボタンとして視認性を確保）
   PCでは「見出し＞リード＞本文≒その他」の関係を維持。

   【v20260908-12で追記】ユーザーより「スマホ縦表示のリード文
   （その非常用蓄電池の見積り、）をもう少し大きくしたい」との要望。
   見出し（title）を最も大きく保つ階層は崩さず、リードのみを約12〜13%
   拡大した：
     リード（lead）   16px→18px（≤480）／21px→23.5px（481〜768）
   見出しとの比率（lead/title）は0.64→0.72（≤480）、0.76→0.85
   （481〜768）へ上がり、リードの存在感が増す一方、見出しは依然
   最大サイズを維持し「見出し＞リード＞本文≒その他」の階層は変わらない。
   本文・その他（CTA）・PC（≥769px）は変更しない。
   ========================================================== */
@media screen and (max-width: 768px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: 2.35rem !important;
    line-height: 1.5 !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    font-size: clamp(1.45rem, 1.05vw, 1.6rem) !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
    font-size: clamp(1.4rem, 1.02vw, 1.55rem) !important;
  }
}

@media screen and (max-width: 480px) {
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: 1.8rem !important;
  }
}

/* ==========================================================
   37 HERO — スマートフォン全面再構成 v3：
             「一枚の連続写真＝広告ポスター」構造への転換
   v20260909-17
   ------------------------------------------------------------------
   【v20260909-16からの決定的な変更点】
   v16はCL300写真帯を独立したflexアイテム（order制御）として扱い、
   背景色を揃えることで境界線を“見えにくく”していたが、写真帯自体が
   矩形の1ブロックとして存在する構造は変わらず、「上：テキスト／
   中：写真／下：テキスト」という“Webページの積み重ね”に見える、
   という指摘を受けた。

   今回は構造そのものを変更する：
   ・.mv-hero-bg（CL300写真）を.mv-hero上部に固定高さで絶対配置し、
     「写真という1枚の舞台」を先に敷く。
   ・ロゴ・リード・見出し・区切り線は、その写真の“壁”側（向かって左、
     CL300本体が写っていない余白）の上に絶対配置で直接重ねる
     （写真の下に置くのではなく、写真の上に重ねる）。
   ・説明文・CTAだけを通常フロー（.mv-hero-copyのpadding-topで
     写真の高さ分だけ後ろに押し出す）に残し、写真が終わったあとの
     余白（背景色と同化した領域）に自然に配置する。
   ・写真の下端は.mv-hero-bg::beforeのグラデーションで背景色
     （#d9d5cd）へ滑らかにフェードさせ、かつ.mv-hero-copyの
     padding-topを写真の実高さよりわずかに小さくして（フェード帯に
     軽くオーバーラップさせて）、矩形の“切れ目”を完全に消す。
   ・CL300はカード化しない（角丸・枠線・影なし）。写真そのものの
     中に自然に存在させる。

   結果として、スクロールしていく体験そのものが「1枚の広告ポスターを
   上から見ていく」ものになり、「テキスト領域→写真領域→テキスト
   領域」という3ブロックの積み重ねではなく、「写真の上にロゴ・コピー
   が重なり、写真が終わった先の余白に説明文・CTAが続く」という
   1つの連続した構成になる。

   （旧v20260909-16の設計意図に関する記述は下記に残すが、実装は
   本節の絶対配置オーバーレイ方式に置き換わっている）
   ------------------------------------------------------------------
   【今回の方針転換（v15からの変更点）】
   v15は .mv-hero を aspect-ratio 固定の1枚キャンバスにし、
   ロゴ・リード・見出し・CL300・説明文・CTAを「390pxの1画面に
   すべて収める」ことを条件に設計したため、結果的にすべての文字が
   小さくなり「ポスターの迫力」が失われた。
   ユーザーからの明確な指示：「390pxの1画面に全部収める」という
   条件そのものを撤回し、必要ならHEROを縦に長くしてよい。
   その代わりに、ロゴ・メインコピー（リード＋見出し）を大きく力強く
   し、CL300は「十分な存在感」を保ちつつ主役を3者（ロゴ・コピー・
   CL300）でバランスさせ、説明文・CTAは明確に脇役サイズに留める。

   【一枚のキャンバスとして見せる方法（縦長版）】
   「テキストブロックが上・写真ブロックが下」という構成そのものは
   スクロール型ポスターでは避けられない（HEROが1画面を超える限り、
   上から順に見える要素がある）。「Webページの部品の積み重ね」に
   見せないための工夫は、ブロック間の“境界線”を消すことに集中する：
   ・.mv-hero 全体を1色の背景（暖白／写真の壁・床と近似する
     rgba(214,209,201)系のオフホワイト）で統一し、CL300写真帯との
     色の差を最小化する。
   ・CL300写真帯の上端・下端に、同じ背景色へ滑らかにフェードする
     グラデーション（写真自体をmaskする）をかけ、「ここから画像が
     始まる／終わる」という矩形の輪郭線を視覚的に消す。
   ・写真帯にはカードの角丸・枠線・影は一切付けない
     （border-radius:0; box-shadow:none; margin-inline:0;）。
   ・ロゴ・コピーの下端とCL300写真帯の間、CL300写真帯とCTAの間の
     余白は「セクション区切り」に見えないよう、コピー同士の内部の
     余白より広くしすぎない（余白の跳躍を作らない）。

   【CL300の切り出し設計（無加工・見切れ禁止）】
   使用画像は既存の img/top/facilinex-hero-cl300.png（元寸
   1024×576）のみ、無加工。Canvasピクセル解析による実測値：
     本体（筐体＋端子＋安全弁）：横64.7%〜83.0%、縦31.6%〜86.5%
     （端子上端は縦約30%から、台座接地面は縦約87%まで）
   本節ではCL300写真帯を独立した固定高さの背景ブロックとし、
   aspect-ratio ではなく height（vw基準）で高さを確保した上で、
   background-size / position を「本体全体が上下左右に安全マージン
   を持って収まる」よう再計算する。
     目標：本体幅を写真帯幅の約58%（十分な存在感、かつロゴ・コピー
     ブロックを圧迫しない）、縦方向は本体（31.6%〜86.5%＝高さ54.9%）
     の上下にそれぞれ約8%・約7%の安全マージンを確保する。
     window_width_frac  = 18.3% ÷ 0.58 ≒ 31.55% → background-size ≒ 317% auto
     window_height_frac = 54.9% ÷ (100-8-7)% ≒ 64.6%
       → aspect-ratio・background-sizeの関係式
         window_height_frac=(1024/576)/(background-size/100×aspect-ratio)
         に対し、写真帯の実際のaspect-ratioは高さ固定（vw基準）で
         幅ごとに変動するため、background-sizeは横基準317%に統一し、
         background-positionのみで中心を合わせる（下記に実測値記載）。
   本体中心（横73.85%・縦59.05%）を写真帯の中心付近（やや左寄せで
   コピー側に視線を戻しやすくする）に配置：
     background-size: 317% auto
     background-position: 84% 60%
   この数値は写真帯の「高さ」をvwベースで十分に確保した前提で、
   375〜768pxのどの幅でも本体が上下左右で見切れないことを
   Playwrightスクリーンショットで実測・確認済み。

   【文言・画像ファイルは一切変更しない】
   - FACILINEXロゴ：既存の正規画像ファイルをそのまま使用（無加工）。
   - リード「その非常用蓄電池の見積り、」・見出し「本当に納得して
     いますか？」・説明文は1文字も変更していない。SP限定の改行は
     デフォルトdisplay:noneの<br>要素（mv-hero-lead-break／
     mv-hero-title-break）をSPのみdisplay:blockにする既存の仕組みを
     使用（PCは常に非表示＝完全無傷、文字自体の変更ではない）。
   - CTA文言は2候補を390px幅で比較し、より簡潔でポスターの脇役に
     ふさわしい「見積りを依頼する →」を採用。DOM上の実テキスト
     （アクセシブルネーム）はPCと同じ「見積りについて相談する」の
     まま変更せず、.mv-hero-cta-text を視覚的に隠して ::before で
     SP限定の表示文言のみ切り替える（PCの見た目・DOM・読み上げ
     内容は完全に無傷）。

   【PC（min-width:769px）は本節では一切変更しない】
   すべて max-width:768px 以下のメディアクエリ内の変更に限定。
   ========================================================== */

/* リード文・タイトルの改行用<br>：デフォルト（PC含む全体）では
   非表示。PCは何も変更されないため、従来どおり改行なしのまま。 */
.mv-hero-lead-break { display: none; }
.mv-hero-title-break { display: none; }

@media screen and (max-width: 768px) {

  /* index.html内の古いインラインスタイル（.mv .mv-wrap{margin-bottom:...}）が
     .mv（黒背景）と.mv-heroの間に隙間を作り、黒い帯として見えてしまう
     問題を打ち消す。新デザインでは.mv-hero-copy側で既に十分な余白を
     確保しているため、.mv-wrap側の余白は不要。 */
  .mv .mv-wrap { margin-bottom: 0 !important; }

  /* --- HERO全体：写真を「舞台」として先に敷き、その上にロゴ・
         コピーを重ね、写真の先に説明文・CTAを続ける“一枚のポスター”
         構造。.mv-hero は通常フロー（.mv-hero-contentの高さが
         そのままHEROの高さになる）。--- */
  .mv-hero {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* 写真の壁・床の色に近い暖白。写真が終わった先の余白と完全に
       同化させ、「写真の外側にもう1枚別の背景がある」ように
       見せない。 */
    background: #d9d5cd !important;
  }

  /* --- CL300写真＝広告ポスターの舞台。.mv-hero上部に固定高さで
         絶対配置し、ロゴ・コピーはこの上に“重ねる”。角丸・枠線・
         影は一切なし。 --- */
  .mv-hero-bg {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 128vw !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: url("../img/top/facilinex-hero-cl300.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 82% 46% !important;
  }

  /* 写真の下端だけを背景色（#d9d5cd）へ滑らかにフェード。
     390px幅でのCanvasピクセル解析（実際の描画結果を1px単位で走査）に
     より、CL300本体（ケース＋台座の影を含む暗部）は表示上の縦
     28.8%〜86.5%で完全に終わっていることを実測済み（.mv-hero-bgは
     height:128vw・background-size:coverだが、コンテナ縦横比が画像
     縦横比より小さいため縦方向はクロップされず、画像の0%〜100%が
     そのまま表示範囲の0%〜100%に対応する）。
     本体終端（86.5%）から十分な余白（約4.5ポイント）を確保した91%
     までは完全に透明（写真そのまま）を維持し、そこから先の「台座の
     奥・壁の余白」だけを緩やかに背景色へ溶け込ませる。CL300本体・
     台座・ラベルには一切フェードがかからない。 */
  .mv-hero-bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(217, 213, 205, 0) 0%,
      rgba(217, 213, 205, 0) 91%,
      rgba(217, 213, 205, .32) 95%,
      rgba(217, 213, 205, .68) 98%,
      #d9d5cd 100%
    ) !important;
    pointer-events: none !important;
  }
  .mv-hero-bg::after { display: none !important; }

  /* --- コンテンツ全体：.mv-hero-bgより後のDOM順・高いz-indexで
         写真の上に重なる。通常フロー（absoluteにしない）で
         .mv-heroの高さに実際の高さを反映させる。--- */
  .mv .mv-hero .mv-hero-content {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* --- ロゴ：写真の“壁”側（CL300本体のない左側余白）に直接重ねる
         重要なグラフィック要素。絶対配置でフローから外し、
         下に続くテキストの縦位置に影響させない。 --- */
  .mv .mv-hero .mv-hero-content .mv-hero-logo {
    position: absolute !important;
    top: 6.8vw !important;
    left: 5.6vw !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-logo img {
    width: clamp(118px, 33vw, 168px) !important;
    /* PC版と同じカラーロゴをそのまま使用するため、モノクロ化フィルターは
       適用しない（以前はSP背景に合わせて白ロゴを黒シルエット化していたが、
       ロゴ画像自体はPCと同一のカラー版を使うため不要）。 */
  }

  /* SEO用h1は視覚的に隠れているため配置に影響しない（.seo-h1参照） */

  /* --- コピー全体のラッパー：写真の高さ分だけ padding-top で
         下（説明文・CTA）を押し出す。lead/title/ruleは絶対配置で
         フローから外れているため、このpadding-topは実質
         desc/ctaのための余白として機能する（＝写真とその先の
         余白の“継ぎ目”をフェード帯にわずかに重ねて消す）。--- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: none !important;
    padding: 121vw 5.6vw 0 5.6vw !important;
    gap: 0 !important;
  }

  /* --- リード：見出しに迫る強さ。写真の壁側に直接重ね、
         老眼でも読める大きさを確保。CL300本体には重ねない
         よう max-width で幅を制限する。 --- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    position: absolute !important;
    top: 25vw !important;
    left: 5.6vw !important;
    max-width: 42% !important;
    font-size: 1.78rem !important;
    font-weight: 700 !important;
    line-height: 1.34 !important;
    letter-spacing: .01em !important;
    color: rgba(20, 21, 24, .95) !important;
    margin: 0 !important;
  }

  /* --- 見出し：HERO最大・最強のタイポグラフィ。太く堅牢な印象。
         写真の壁側に直接重ね、CL300本体には重ねない。 --- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    position: absolute !important;
    top: 44vw !important;
    left: 5.6vw !important;
    max-width: 42% !important;
    font-size: 2.35rem !important;
    font-weight: 900 !important;
    line-height: 1.26 !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    color: #0c0d10 !important;
    margin: 0 !important;
  }

  /* --- 区切り線：見出しの直下、写真の上に重ねる最後のグラフィック
         要素。 --- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-rule {
    position: absolute !important;
    top: 76vw !important;
    left: 5.6vw !important;
    display: block !important;
    width: 34px !important;
    height: 3px !important;
    margin: 0 !important;
    background: rgba(20, 21, 24, .4) !important;
  }

  /* リード・見出しは日本語として自然な意味の切れ目で明示的に改行する。
     ブラウザの自動折返し（max-widthベース）に任せると、画面幅や
     フォントの微妙な差で「り、」「すか？」のような単語の孤立分断が
     発生し得るため、意図的な<br>（.mv-hero-lead-break /
     .mv-hero-title-break）をSP限定で有効化する。 */
  .mv-hero-lead-break { display: block !important; content: ""; }
  .mv-hero-title-break { display: block !important; content: ""; }

  /* --- SP限定：リード1行目（その非常用蓄電池の）だけを視覚的に
         下へ寄せ、2行目（見積り、）との行間を詰めて「ひとつの
         自然な文章」に見せる。transform は自身の見た目だけを
         ずらす手法のため、2行目（.mv-hero-lead-line2）の実位置・
         見出し（.mv-hero-title＝本当に納得していますか？）の位置は
         一切変化しない（レイアウト上の高さ・後続要素への影響なし）。 --- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead .mv-hero-lead-line1 {
    display: block !important;
    transform: translateY(.85em) !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead .mv-hero-lead-line2 {
    display: block !important;
  }

  /* スクロール誘導はポスター構成では不要 */
  .mv-scroll { display: none !important; }

  /* --- 説明文：通常フローに残し、写真が終わった先の余白（背景色と
         同化した領域）に自然に配置。“貼り付けた”印象を避けるため、
         写真のフェード帯にわずかに重なる位置から始まる。--- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    font-size: 1.2rem !important;
    line-height: 1.58 !important;
    color: rgba(20, 21, 24, .92) !important;
    margin: 0 0 16px 0 !important;
  }

  /* --- CTA：ポスターの中の小さな行動要素。Webのバナー的な
         主張を避け、控えめなサイズに留める。 --- */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
    width: auto !important;
    max-width: none !important;
    align-self: auto !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px 20px 10px 24px !important;
    font-size: 1.08rem !important;
    margin: 0 0 32px 0 !important;
    box-shadow: 0 3px 9px rgba(210, 20, 27, .14) !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta .mv-hero-cta-arrow {
    font-size: 1.02rem !important;
  }

  /* CTA文言：SP限定の視覚上の表示のみを候補B「見積りを依頼する →」に
     切り替える（DOM上の実テキスト＝アクセシブルネームはPCと同じ
     「見積りについて相談する」のまま変更しない＝PC表示は完全無傷）。
     .seo-h1 と同じ「視覚的に隠すが読み上げ対象には残す」手法を使う。 */
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta .mv-hero-cta-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta::before {
    content: "見積りを依頼する";
  }

}

@media screen and (max-width: 480px) {
  .mv .mv-hero .mv-hero-content .mv-hero-logo img { width: clamp(108px, 30vw, 140px) !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    font-size: 1.6rem !important;
    max-width: 42% !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    font-size: 2.05rem !important;
    max-width: 42% !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    font-size: 1.12rem !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-cta {
    font-size: 1rem !important;
    padding: 9px 18px 9px 22px !important;
  }
}

@media screen and (max-width: 375px) {
  .mv .mv-hero .mv-hero-content .mv-hero-logo { left: 5vw !important; top: 6vw !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy { padding-inline: 5vw !important; }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-lead {
    left: 5vw !important;
    font-size: 1.42rem !important;
    max-width: 42% !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-title {
    left: 5vw !important;
    font-size: 1.82rem !important;
    max-width: 42% !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-rule {
    left: 5vw !important;
  }
  .mv .mv-hero .mv-hero-content .mv-hero-copy .mv-hero-desc {
    font-size: 1.06rem !important;
  }
}

/* ==========================================================================
   27. 蓄電池容量計算 導線 / ハンバーガーメニュー日本語化 / Contact CTA整理
   ------------------------------------------------------------------
   追加のみ。既存クラス・既存CSSの上書き・削除は行わない。
   ・.gnav-tool          … ハンバーガーメニュー内「蓄電池容量計算」項目
   ・.header-tool-link   … PCヘッダーの控えめなテキストリンク
   ・.calc-link          … Dataセクション末尾（旧 .btn-B 赤CTA置換）
   ・.cost-calc-inline-link … LEDダウンサイジング本文中のテキストリンク
   ========================================================================== */

/* ---- ハンバーガーメニュー：日本語項目の可読性（Noto Sans JP・中高年配慮） ---- */
.gnav .main-nav a {
    font-family: var(--font-base), var(--font-mont);
    letter-spacing: .04em;
}

/* 「蓄電池容量計算」：Contactの赤ボタンとは役割を分け、通常項目として並べる */
.gnav .main-nav li.gnav-tool { margin-top: 6px; }

.gnav .main-nav .gnav-tool a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 240px;
    min-height: 56px;
    margin: 0 auto;
    padding: 8px 30px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    font-size: clamp(1.7rem, 3.6vw, 2rem);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--white);
    background: transparent;
}

.gnav .main-nav .gnav-tool a::after {
    content: "→";
    font-family: var(--font-mont);
}

.gnav .main-nav .gnav-tool a:hover { opacity: .75; }

@media screen and (max-height: 700px) {
    .gnav .main-nav li.gnav-tool { margin-top: 4px; }
    .gnav .main-nav .gnav-tool a { min-height: 48px; padding: 6px 26px; }
}

/* ---- PCヘッダー：蓄電池容量計算への控えめなテキストリンク（ボタン化しない） ---- */
.header-tool-link {
    display: none;
}

@media screen and (min-width: 769px) {
    .header-tool-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 46px;
        right: 130px;
        z-index: var(--z-toggle);
        font-family: var(--font-base), var(--font-mont);
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: .04em;
        color: rgba(255, 255, 255, .88);
        text-decoration: none;
        white-space: nowrap;
    }

    .header-tool-link-arrow {
        display: inline-block;
        font-family: var(--font-mont);
        transition: transform .3s var(--ease-out, cubic-bezier(.2,.7,.3,1));
    }

    .header-tool-link:hover,
    .header-tool-link:focus-visible {
        color: #ffffff;
        border-bottom: 1px solid rgba(255, 255, 255, .55);
    }

    .header-tool-link:hover .header-tool-link-arrow,
    .header-tool-link:focus-visible .header-tool-link-arrow {
        transform: translateX(3px);
    }
}

/* header は position:sticky（z-index:9990）のため、
   固定表示のヘッダー内リンクも同じ祖先内で視認できるよう調整 */
@media screen and (min-width: 769px) {
    .header-tool-link { top: 48px; }
}

/* ---- Dataセクション末尾：旧・赤CTA（.btn-B「最適な更新方法をご提案します」）を
       置換した「蓄電池容量計算」リンク。Contact（相談する）とは役割を分離し、
       アウトライン型・控えめな配色にする（赤ボタン化しない）。 ---- */
.calc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 365px;
    width: 100%;
    min-height: 62px;
    padding: 0 30px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-base), var(--font-mont);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: .04em;
    text-decoration: none;
    transition: transform .3s var(--ease-out, cubic-bezier(.2,.7,.3,1)), border-color .3s ease, opacity .3s ease;
}

.calc-link-arrow {
    display: inline-block;
    font-family: var(--font-mont);
    transition: transform .3s var(--ease-out, cubic-bezier(.2,.7,.3,1));
}

.calc-link:hover,
.calc-link:focus-visible {
    border-color: rgba(255, 255, 255, .9);
    transform: translateY(-2px);
    opacity: 1;
}

.calc-link:hover .calc-link-arrow,
.calc-link:focus-visible .calc-link-arrow {
    transform: translateX(4px);
}

@media (max-width: 760px) {
    .calc-link { max-width: 420px; }
}

/* ---- LEDダウンサイジング本文中：蓄電池容量計算への上品なテキストリンク ---- */
.cost-calc-inline-link {
    margin: -6px 0 0;
}

.cost-calc-inline-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #FF9095;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 144, 149, .45);
    transition: color .25s ease, border-color .25s ease;
}

.cost-calc-inline-link a:hover,
.cost-calc-inline-link a:focus-visible {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, .6);
}

/* FAQ 関連ツールリンク */
.faq-tool-link{
    display:inline-block;
    margin-top:10px;
    color:#FF5A5F;
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid rgba(255,90,95,.45);
    transition:opacity .2s,border-color .2s;
}
.faq-tool-link:hover,.faq-tool-link:focus-visible{
    opacity:.8;
    border-color:#FF5A5F;
}


/* ==========================================================
   FACILINEX / CTA BUTTON — FINAL FIX
   対象：.mv-contact-btn のみ
   元画像（btn-B.png）の白文字を使用せず、CSSで文字と矢印を描画
   ========================================================== */
.mv-contact-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(600px, 100%) !important;
    height: 120px !important;
    margin: 40px auto 0 !important;
    padding: 0 112px 0 40px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #D2141B !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
    transition: transform .35s ease, box-shadow .35s ease !important;
}

/* 元画像は完全に非表示 */
.mv-contact-btn > img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* CTA文字：通常時から常時表示 */
.mv-contact-btn::before {
    content: "無料簡易診断を依頼する" !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #D2141B !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    font-family: var(--font-base), sans-serif !important;
    font-size: clamp(1.8rem, 2.1vw, 2.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}

/* 右側の赤い円＋白い矢印 */
.mv-contact-btn::after {
    content: "→" !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #D2141B !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 3.2rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    z-index: 3 !important;
}

.mv-contact-btn:hover,
.mv-contact-btn:focus,
.mv-contact-btn:focus-visible,
.mv-contact-btn:active {
    color: #D2141B !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

.mv-contact-btn:hover::before,
.mv-contact-btn:focus::before,
.mv-contact-btn:focus-visible::before,
.mv-contact-btn:active::before {
    color: #D2141B !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mv-contact-btn:hover::after,
.mv-contact-btn:focus::after,
.mv-contact-btn:focus-visible::after,
.mv-contact-btn:active::after {
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (hover: hover) {
    .mv-contact-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 20px 44px rgba(0,0,0,.22) !important;
    }
}

@media screen and (max-width: 768px) {
    .mv-contact-btn {
        width: min(600px, 100%) !important;
        height: 96px !important;
        padding: 0 88px 0 24px !important;
    }
    .mv-contact-btn::before {
        font-size: clamp(1.55rem, 4.2vw, 2rem) !important;
    }
    .mv-contact-btn::after {
        right: 8px !important;
        width: 72px !important;
        height: 72px !important;
        font-size: 2.7rem !important;
    }
}

@media screen and (max-width: 480px) {
    .mv-contact-btn {
        height: 82px !important;
        padding: 0 74px 0 18px !important;
    }
    .mv-contact-btn::before {
        font-size: 1.5rem !important;
        letter-spacing: .02em !important;
    }
    .mv-contact-btn::after {
        right: 6px !important;
        width: 62px !important;
        height: 62px !important;
        font-size: 2.35rem !important;
    }
}