:root {
    color-scheme: light;
  }

  html {
    font-size: 62.5%;
  }

  body {
    margin: 0;
    background-color: #fff;
    color: #4A4F57;
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  }

  .service-page-wrapper {
    --ink: #14161A;
    --ink-soft: #4A4F57;
    --muted: #8A9099;
    --accent: #4FC3F7;
    --accent-deep: #1B9CD8;
    --accent-tint: #EAF7FD;
    --brand: #FCCF00;
    --brand-deep: #F0A500;
    --paper: #F4F6F8;
    --line: #E2E7EB;
    --radius: 20px;
    --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.03), 0 10px 28px -18px rgba(20, 22, 26, 0.16);
    --shadow-md: 0 2px 4px rgba(20, 22, 26, 0.04), 0 26px 50px -26px rgba(20, 22, 26, 0.28);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 100%;
    overflow-x: hidden;
  }

  .service-page-wrapper * {
    box-sizing: border-box;
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    color: #4A4F57;
    font-size: 1.6rem;
    line-height: 1.9;
    margin: 0;
  }

  .service-page-wrapper ul,
  .service-page-wrapper ol {
    padding-left: 0;
  }

  .service-page-wrapper ul {
    list-style: none;
  }

  .service-page-wrapper img {
    display: block;
    width: 100%;
  }

  /* ※ svg の子（path）も * の color に当たるため currentColor が親の色を拾えない。
        svg 配下すべてに color:inherit（0-1-1）を当てて打ち消す */
  .service-page-wrapper svg,
  .service-page-wrapper svg * {
    display: block;
    color: inherit;
  }

  .service-page-wrapper a {
    transition: 0.35s all var(--ease);
    line-height: 1;
    color: #14161A;
    text-decoration: none;
  }

  .service-page-wrapper a:focus-visible {
    outline: 3px solid #1B9CD8;
    outline-offset: 4px;
    border-radius: 4px;
  }

  .service-page-wrapper h1,
  .service-page-wrapper h2,
  .service-page-wrapper h3,
  .service-page-wrapper h4 {
    line-height: 1;
    margin: 0;
  }

  .inner {
    width: 100%;
    max-width: 1220px;
    padding: 0 50px;
    margin: 0 auto;
  }

  .service-page-wrapper .pc {
    display: block;
  }

  .service-page-wrapper .sp {
    display: none;
  }

  /* 文節のまとまりで折り返す（span も * の基準値を受けるため、親の書式を継ぐよう戻す） */
  .service-page-wrapper .nw {
    display: inline-block;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  /* ---------- 共通ボタン ---------- */
  /* ※ 申込導線（CTA）はブランドイエローで統一する。ここをアクセントの
        ライトブルーにすると、面のアクセントと行動喚起が同じ色になり
        「押す場所」が読めなくなる */
  .service-page-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 240px;
    height: 62px;
    padding: 0 32px;
    border-radius: 999px;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .service-page-wrapper .btn svg {
    flex-shrink: 0;
    transition: transform 0.35s var(--ease);
  }

  .service-page-wrapper .btn:hover svg {
    transform: translateX(4px);
  }

  .service-page-wrapper .btn--primary {
    background-color: var(--brand);
    color: var(--ink);
    box-shadow: 0 14px 34px -16px rgba(240, 165, 0, 0.85);
  }

  /* 黄→白に抜くとFVの ghost ボタンと見分けがつかなくなる。濃い黄で沈めて押した実感を出す */
  .service-page-wrapper .btn--primary:hover {
    background-color: var(--brand-deep);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 18px 42px -16px rgba(240, 165, 0, 0.95);
  }

  .service-page-wrapper .btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
  }

  .service-page-wrapper .btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: #fff;
    transform: translateY(-2px);
  }

  /* ---------- セクション見出し ---------- */
  /* 欧文は「大きな見出し」ではなく、字間を広げた小さなラベルとして扱う */
  .service-page-wrapper .sec__ttl {
    text-align: center;
    margin-bottom: 64px;
    font-size: 3.2rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: 0.06em;
  }

  .service-page-wrapper .sec__ttl>span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .sec__ttl>span::before,
  .sec__ttl>span::after {
    content: "";
    width: 26px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.5;
  }

  /* ---------- FV ---------- */
  .fv {
    position: relative;
    display: flex;
    align-items: center;
    height: 86vh;
    min-height: 640px;
    max-height: 820px;
    overflow: hidden;
    background-color: #0E1013;
  }

  .fv__bg {
    position: absolute;
    inset: 0;
  }

  .fv__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
  }

  /* 単色の暗幕ではなく、斜め＋縦の二層グラデーションで奥行きを出す */
  .fv::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(100deg, rgba(8, 9, 11, 0.82) 0%, rgba(8, 9, 11, 0.58) 40%, rgba(8, 9, 11, 0.20) 72%, rgba(8, 9, 11, 0.34) 100%),
      linear-gradient(180deg, rgba(8, 9, 11, 0.45) 0%, rgba(8, 9, 11, 0) 32%, rgba(8, 9, 11, 0.55) 100%);
  }

  .fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .fv__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .service-page-wrapper .fv__eyebrow {
    font-family: "Outfit", "Noto Sans JP", sans-serif;
  }

  /* 商標は字形を変えない。欧文ラベルは text-transform で全大文字にしているが、
     AdBlue は VDA の登録商標で指定の綴りがあるため、この要素だけ変換を外す。
     ※ ラベル側と詳細度が並ぶと後に書いた方が勝つため、要素名込み（0-2-1）で書く */
  /* ※ .service-page-wrapper * は書体・字送り・級数・色を全要素に直接当てているため、
        入れ子にすると親のラベル指定を一切継承できない（欧文が和文書体に落ちる、
        1語だけ級数が変わる、字送りが詰まる）。inherit でまとめて拾い直す */
  .service-page-wrapper p.tm,
  .service-page-wrapper span.tm {
    text-transform: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  .fv__eyebrow::before {
    content: "";
    width: 46px;
    height: 1px;
    background-color: currentColor;
  }

  .service-page-wrapper .fv__text h1 {
    max-width: 20em;
    margin-top: 26px;
    color: #fff;
    font-size: 4.2rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
  }

  .fv__lead {
    max-width: 34em;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.7rem;
    line-height: 2;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
  }

  .fv__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 42px;
  }

  .fv__scroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .service-page-wrapper .fv__scroll span {
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
  }

  .fv__scroll i {
    display: block;
    position: relative;
    width: 1px;
    height: 72px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.22);
  }

  .fv__scroll i::after {
    content: "";
    position: absolute;
    left: 0;
    top: -40%;
    width: 1px;
    height: 40%;
    background-color: var(--accent);
    animation: scrollCue 2.2s var(--ease) infinite;
  }

  @keyframes scrollCue {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(350%);
    }
  }

  /* FV内の要素はロード時に順に立ち上げる */
  .fv__text>* {
    animation: fvUp 0.9s var(--ease) both;
  }

  .fv__text>*:nth-child(1) {
    animation-delay: 0.10s;
  }

  .fv__text>*:nth-child(2) {
    animation-delay: 0.22s;
  }

  .fv__text>*:nth-child(3) {
    animation-delay: 0.34s;
  }

  .fv__text>*:nth-child(4) {
    animation-delay: 0.46s;
  }

  @keyframes fvUp {
    from {
      opacity: 0;
      transform: translateY(22px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ---------- 追従CTA ---------- */
  .side-cta {
    writing-mode: vertical-rl;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 62px;
    z-index: 90;
  }

  /* ※ 縦書き（vertical-rl）では a の「幅」＝ブロック方向のため自動だと文字幅しか出ない。
        帯の太さは a 自身に width を指定する */
  .side-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    padding: 38px 0;
    background-color: var(--brand);
    color: var(--ink);
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 0.16em;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 18px 40px -20px rgba(20, 22, 26, 0.55);
  }

  .side-cta a:hover {
    background-color: var(--brand-deep);
    padding-right: 6px;
  }

  /* FVとページ下部のCTAでは本文側に同じボタンが出ているため、追従CTAは引っ込める。
     is-hidden はJSが付与する（JS無効時は従来どおり常時表示） */
  .side-cta {
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }

  .side-cta.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(100%);
  }

  /* ---------- アドブルーサービス ---------- */
  /* 10/15 のご指示で、ページ冒頭のサービス紹介は「安定供給／簡単発注」の帯2枚にした
     （帯の組み方は下の「特長バナー」。製品の説明はメリットの下へ移設） */
  .aservice {
    background-color: var(--paper);
    padding: 118px 0 126px;
  }

  /* ---------- 製造・販売 ---------- */
  /* 掲載は1社のみ。縦長のカードを中央に1枚置くと左右が空いて据わりが悪いので、
     横長のロゴを載せた小さめの札にする。情報量が少ない区画なので
     天地の余白も他セクションより一段詰め、ページの緩急をつくる */
  .maker {
    background-color: var(--paper);
    padding: 94px 0 100px;
  }

  .maker__wrap {
    display: flex;
    justify-content: center;
  }

  .maker__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 40px;
    box-shadow: var(--shadow-sm);
    transition: 0.4s all var(--ease);
  }

  .maker__item:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }

  /* ロゴはご支給の正式版（マーク＋社名）。社名は公式の書体でロゴに含まれるので、文字では重ねない */
  .maker__item .maker__logo {
    margin: 0;
  }

  .maker__item .maker__logo img {
    width: 340px;
    max-width: 100%;
    margin: 0;
  }

  /* ---------- メリット ---------- */
  .merit {
    background-color: #fff;
    padding: 120px 0 130px;
  }

  .merit__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
  }

  .merit__item {
    position: relative;
    overflow: hidden;
    width: calc(33.333% - 19px);
    max-width: 344px;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px 34px 42px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: 0.4s all var(--ease);
  }

  .merit__item:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }

  /* 番号だけだと3枚が均質で、目が滑って読み分けられない。
     番号の対面にアイコンを置き、カードごとの手掛かりをつくる */
  .merit__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .merit__ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background-color: var(--accent-tint);
    color: var(--accent-deep);
    border: 1px solid rgba(27, 156, 216, 0.20);
    transition: 0.4s all var(--ease);
  }

  .merit__item:hover .merit__ico {
    background-color: var(--accent-deep);
    color: #fff;
    border-color: var(--accent-deep);
  }

  .merit__num {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .service-page-wrapper .merit__num span {
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .service-page-wrapper .merit__num em {
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-style: normal;
    font-size: 3.8rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent-deep);
  }

  .merit__rule {
    width: 38px;
    height: 2px;
    background-color: var(--accent);
    margin: 22px 0 24px;
  }

  .merit__item .merit__text {
    flex-grow: 1;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.95;
    letter-spacing: 0.02em;
  }

  /* ---------- お客様の声 ---------- */
  .voice {
    background-color: #fff;
    padding: 120px 0 130px;
  }

  .voice__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
  }

  .voice__item {
    position: relative;
    overflow: hidden;
    width: calc(33.333% - 19px);
    max-width: 344px;
    background-color: var(--paper);
    border-radius: var(--radius);
    /* 背面の引用符（下記 ::before）の字面を避けるため、上だけ厚く取る */
    padding: 66px 32px 38px;
    display: flex;
    flex-direction: column;
  }

  /* 背面の引用符。装飾なので読み上げ対象にしない（::before で生成）。
     開き引用符なので引用の始まり側＝左上に置く。
     top は行ボックス基準。この字は行ボックス上端から 15.9px 下に字面が始まるため、
     カード上端から約12px空けるには -4px。親が overflow:hidden なので
     これより上げると字面が欠け、記号として読めなくなる */
  .voice__item::before {
    content: "\201C";
    position: absolute;
    top: -4px;
    left: 20px;
    font-family: "Outfit", sans-serif;
    font-size: 11rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.3;
  }

  /* タイヤサービスの声は一行の短評だが、こちらは3〜4行の長文。
     bold のままだと面が黒くつぶれるため、太さを一段落として行間を開ける */
  .voice__item .voice__text {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 2.05;
    letter-spacing: 0.01em;
  }

  /* ---------- ご利用の流れ ---------- */
  /* 白／グレーが続く流れを断ち切る面。地（--paper #F4F6F8）も寒色寄りのため、
     アクセントの彩度をそのまま落とすと差が出ない。ひと段濃い青みで面を立てる */
  .flow {
    position: relative;
    overflow: hidden;
    padding: 104px 0 110px;
    background-color: #E9F5FD;
    background-image: linear-gradient(180deg, #E2F2FC 0%, #ECF7FD 55%, #E0F1FB 100%);
  }

  /* 上部中央の光だまり。芯を白で抜き、ブルーは外周の暈しとしてだけ残す */
  .flow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -30%;
    transform: translateX(-50%);
    width: 1260px;
    height: 800px;
    pointer-events: none;
    background-image:
      radial-gradient(closest-side, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 70%),
      radial-gradient(closest-side, rgba(79, 195, 247, 0.34), rgba(79, 195, 247, 0));
  }

  .flow .inner {
    position: relative;
    z-index: 1;
  }

  /* 中身が横一列で背が低い区画なので、見出しとの間も詰める */
  .service-page-wrapper .flow .sec__ttl {
    margin-bottom: 54px;
  }

  /* 7ステップをカードで組むと 4＋3 に割れ、下段が中央へ寄って段がずれる。
     カードをやめ、1本の線でつないだ横タイムラインにする。
     カードの反復が続くページの中で、ここだけ組み方が変わることで
     「読むところ」ではなく「たどるところ」だと分かる */
  .flow__wrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1000px;
    margin: 0 auto;
  }

  /* 連結線。6等分なので両端の節の中心は 1/12（8.333%）の位置に来る */
  .flow__wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 8.333%;
    right: 8.333%;
    top: 35px;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(79, 195, 247, 0.55), rgba(27, 156, 216, 0.8));
  }

  .flow__item {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 4px;
  }

  .flow__item::after {
    content: none;
  }

  .flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 節。番号を丸で囲み、線の上に乗せる。
     ※ 丸の中心＝上端から36px（直径72pxの半分）。連結線の top はこの値に合わせること */
  .service-page-wrapper .flow__step em {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid rgba(27, 156, 216, 0.38);
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-style: normal;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent-deep);
    box-shadow: 0 10px 22px -14px rgba(20, 110, 160, 0.75);
    transition: 0.35s all var(--ease);
  }

  .flow__item:hover .flow__step em {
    border-color: var(--accent-deep);
    transform: translateY(-3px);
    box-shadow: 0 16px 28px -14px rgba(20, 110, 160, 0.9);
  }

  /* STEP の語は番号の下へ回す（番号が丸の中に入ったぶん、上に置くと節が縦に伸びる） */
  .service-page-wrapper .flow__step span {
    order: 2;
    margin-top: 12px;
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.24em;
    color: var(--muted);
  }

  .service-page-wrapper .flow__body {
    margin-top: 8px;
  }

  .service-page-wrapper .flow__body h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.6;
    letter-spacing: 0.01em;
  }

  /* ---------- 注意事項 ---------- */
  /* 10/15 ご依頼：文字を大きく（1.6rem → 2rem）、枠をほかのセクションと同じ最大幅に。
     区画そのものの余白は一段落としたまま CTA へ繋ぐ */
  .caution-sec {
    background-color: var(--paper);
    padding: 96px 0 104px;
  }

  .caution-sec__box {
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 48px 60px;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
  }

  .caution-sec__list {
    list-style: none;
    counter-reset: c;
  }

  .caution-sec__list li {
    counter-increment: c;
    position: relative;
    padding-left: 64px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px dashed var(--line);
    color: var(--ink);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.7;
  }

  .caution-sec__list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* 番号は1行目の高さ（2rem × 1.7 = 34px）の中央にそろえる */
  .caution-sec__list li::before {
    content: counter(c, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-tint);
    border: 1px solid rgba(27, 156, 216, 0.35);
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--accent-deep);
  }

  /* 登録商標の表記（10/15 ご依頼で追加。場所はお任せいただいたため、注意事項の下に添える） */
  .service-page-wrapper .caution-sec__tm {
    max-width: 1000px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 1.3rem;
    color: var(--muted);
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  /* ---------- CTA ---------- */
  .cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 130px 0;
    background-color: #0E1013;
  }

  .cta__bg {
    position: absolute;
    inset: 0;
  }

  .cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 差し替えた車両写真は地が明るく、中央に黄色い車両が来る。
       白の見出しと黄色のボタンを立たせるため、中央部の暗幕を厚くする */
    background-image: linear-gradient(180deg, rgba(8, 9, 11, 0.58) 0%, rgba(8, 9, 11, 0.44) 50%, rgba(8, 9, 11, 0.66) 100%);
  }

  .cta__inner {
    position: relative;
    z-index: 2;
  }

  /* サービス名は枠付きのタグにするとメインビジュアルの枠線ボタンと同じ形になり、押せるものに見える。
     各セクション見出しの欧文ラベルと同じ型にする。写真の上に載るので字を一段太く・罫線を濃くする */
  .service-page-wrapper .cta__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .service-page-wrapper .cta__eyebrow::before,
  .service-page-wrapper .cta__eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.8;
  }

  .cta__lead {
    margin-bottom: 44px;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  }

  /* ---------- スクロール表示 ---------- */
  /* JSが data-anim="on" を付けた時だけ効かせる（JS無効時は常に表示） */
  .service-page-wrapper[data-anim="on"] .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .service-page-wrapper[data-anim="on"] .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* ---------- タブレット ---------- */
  @media (max-width: 1024px) {

    /* 幅が狭いほど cover の切り出しが寄り、中央の黄色い車両が見出しに重なる。
       文字の背後を暗いトラック列に振り替える */
    .cta__bg img {
      object-position: 30% center;
    }

    .service-page-wrapper .sec__ttl {
      font-size: 2.8rem;
      margin-bottom: 52px;
    }

    .service-page-wrapper .fv__text h1 {
      font-size: 3.4rem;
    }

    .merit__item {
      width: calc(50% - 14px);
      max-width: none;
    }

    .voice__item {
      width: calc(50% - 14px);
      max-width: none;
    }

    /* 幅が詰まると7列は1列あたり120px を切って見出しが折れる。
       線を縦に倒したタイムラインへ切り替える。
       連結線は wrap の1本引きをやめ、節ごとの短い線に変える
       （最後の節から下へ線が伸びないようにするため） */
    .flow__wrap {
      display: block;
      max-width: 460px;
      margin: 0 auto;
    }

    .flow__wrap::before {
      content: none;
    }

    .flow__item {
      display: flex;
      align-items: center;
      gap: 24px;
      text-align: left;
      padding: 0 0 30px;
    }

    .flow__item:last-child {
      padding-bottom: 0;
    }

    /* 節の中心＝item上端から32px。線はその下端（64px）から次の節までを埋める */
    .flow__item::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: 35px;
      top: 72px;
      bottom: 0;
      width: 2px;
      height: auto;
      background-color: rgba(27, 156, 216, 0.45);
      border: 0;
      transform: none;
    }

    .flow__item:last-child::after {
      content: none;
    }

    .flow__step {
      flex-shrink: 0;
      width: 72px;
    }

    /* 縦組みでは連結線が節の真下を通るため、そこに STEP の語を置くと線と重なる。
       番号は丸の中に出ているので、狭い幅では語を落とす（意味は失われない） */
    .service-page-wrapper .flow__step span {
      display: none;
    }

    .service-page-wrapper .flow__body {
      margin-top: 0;
    }

    .service-page-wrapper .flow__body h3 {
      font-size: 1.7rem;
    }

    .caution-sec__box {
      padding: 40px 36px;
    }
  }

  /* ---------- スマートフォン ---------- */
  @media (max-width: 760px) {
    .inner {
      padding: 0 20px;
    }

    .service-page-wrapper .pc {
      display: none;
    }

    .service-page-wrapper .sp {
      display: block;
    }

    .service-page-wrapper .sec__ttl {
      font-size: 2.2rem;
      margin-bottom: 40px;
      letter-spacing: 0.04em;
    }

    .service-page-wrapper .sec__ttl>span {
      font-size: 1.15rem;
      letter-spacing: 0.22em;
      margin-bottom: 14px;
    }

    .sec__ttl>span::before,
    .sec__ttl>span::after {
      width: 18px;
    }

    .fv {
      height: auto;
      min-height: 0;
      max-height: none;
      padding: 118px 0 104px;
    }

    /* SPは画像の明部（空・タンク）に文字が重なるため、暗幕を強めにする */
    .fv::after {
      background-image:
        linear-gradient(180deg, rgba(8, 9, 11, 0.62) 0%, rgba(8, 9, 11, 0.50) 40%, rgba(8, 9, 11, 0.30) 72%, rgba(8, 9, 11, 0.62) 100%);
    }

    .service-page-wrapper .fv__text h1 {
      font-size: 2.4rem;
      margin-top: 20px;
    }

    .fv__eyebrow {
      font-size: 1.15rem;
      letter-spacing: 0.22em;
    }

    .fv__eyebrow::before {
      width: 28px;
    }

    .fv__lead {
      font-size: 1.5rem;
      margin-top: 18px;
    }

    .fv__actions {
      margin-top: 32px;
      gap: 12px;
    }

    .service-page-wrapper .btn {
      width: 100%;
      min-width: 0;
      height: 58px;
    }

    .fv__scroll {
      display: none;
    }

    .side-cta {
      display: none;
    }

    .aservice,
    .maker,
    .merit,
    .voice,
    .flow,
    .caution-sec {
      padding: 76px 0 84px;
    }

    .maker__item {
      max-width: none;
      padding: 28px 24px;
    }

    .maker__item .maker__logo img {
      width: 260px;
    }

    .merit__item {
      width: 100%;
      max-width: none;
      padding: 32px 26px 34px;
    }

    .service-page-wrapper .merit__num em {
      font-size: 3.2rem;
    }

    .merit__ico {
      width: 48px;
      height: 48px;
      border-radius: 14px;
    }

    .merit__ico svg {
      width: 22px;
      height: 22px;
    }

    .voice__item {
      width: 100%;
      max-width: none;
      padding: 60px 26px 32px;
    }

    .voice__item::before {
      font-size: 9rem;
      left: 16px;
    }

    .voice__item .voice__text {
      font-size: 1.5rem;
    }

    /* 縦タイムラインは1024px側で組み終わっている。ここでは節を一回り小さくするだけ。
       節の直径を変えたら、連結線の left（半径-1px）と top（直径）も合わせること */
    .flow__wrap {
      max-width: none;
    }

    .flow__item {
      gap: 20px;
      padding-bottom: 26px;
    }

    .flow__item::after {
      left: 27px;
      top: 56px;
    }

    .flow__step {
      width: 56px;
    }

    .service-page-wrapper .flow__step em {
      width: 56px;
      height: 56px;
      font-size: 1.9rem;
    }

    .service-page-wrapper .flow__body h3 {
      font-size: 1.6rem;
    }

    .caution-sec__box {
      padding: 30px 22px;
    }

    .caution-sec__list li {
      padding-left: 46px;
      padding-bottom: 20px;
      margin-bottom: 20px;
      font-size: 1.7rem;
    }

    .caution-sec__list li::before {
      width: 32px;
      height: 32px;
      top: -1px;
      font-size: 1.25rem;
    }

    .service-page-wrapper .caution-sec__tm {
      font-size: 1.2rem;
    }

    .cta {
      padding: 84px 0;
    }

    /* SPは切り出しが狭く、中央のままだと黄色い車両が見出しとボタンに重なる */
    .cta__bg img {
      object-position: 36% center;
    }

    .cta__lead {
      font-size: 1.8rem;
      margin-bottom: 32px;
      line-height: 1.7;
    }

    .service-page-wrapper .cta__eyebrow {
      font-size: 1.15rem;
      letter-spacing: 0.22em;
      margin-bottom: 18px;
    }

    .service-page-wrapper .cta__eyebrow::before,
    .service-page-wrapper .cta__eyebrow::after {
      width: 18px;
    }
  }

  /* ---------- 極小幅（320px 端末） ---------- */
  /* ここだけタイヤサービス（01_plan-b）に無い追加。寸法差ではなく不具合の手当て。
     lead は <br> で改行位置を固定しているため、2行目が入りきらないと
     「い。」だけが3行目へ落ちて締まらない。実測で2行目は284px必要
     （＝内寸324px以上、画面幅364px以上）。360pxまでは2行を保てるので、
     それより狭い端末でだけ字を落とす */
  @media (max-width: 340px) {
    .cta__lead {
      font-size: 1.6rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .service-page-wrapper *,
    .service-page-wrapper *::before,
    .service-page-wrapper *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }

    .service-page-wrapper[data-anim="on"] .reveal {
      opacity: 1;
      transform: none;
    }
  }

  /* =========================================================
     2026-10 改訂：お客様ご支給資料（アドブルーサービスサイト案0914）反映分
     ========================================================= */

  /* ---------- 特長バナー（安定供給／簡単発注）：アドブルーサービスの区画 ---------- */
  /* 11/2 のご指示で全体を拡大（帯の幅を本文の幅いっぱいに、文字・チップを一回り大きく） */
  .aservice__banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1120px;
    margin: 56px auto 0;
    /* 上の説明の枠（製品の説明）と帯（サービスの特長）は役割が違うので、帯どうしの間（28px）の倍を空けて区切る */
  }

  /* ---------- 製品の説明：アドブルーサービスの見出しの下（11/2 のご指示で帯の上へ移設） ---------- */
  /* 成分比の図は 10/15 に削除済み。
     文字だけを縦に積むと箱の右側が余るので、見出し（左）と説明（右）の横組みにする */
  .aintro {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* 仕切り線を下の帯2枚の間（中央）に揃える */
    max-width: 1120px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  .aintro::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-image: linear-gradient(180deg, var(--accent), var(--accent-deep));
  }

  .aintro__head {
    padding: 44px 44px 44px 56px;
  }

  .service-page-wrapper .aintro__lead {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-deep);
    letter-spacing: 0.06em;
  }

  .service-page-wrapper .aintro__ttl {
    margin-top: 14px;
    font-size: 2.6rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.55;
    letter-spacing: 0.04em;
  }

  .aintro__body {
    display: flex;
    align-items: center;
    padding: 40px 48px;
    border-left: 1px solid var(--line);
    background-color: #FAFCFD;
  }

  .service-page-wrapper .aintro__note {
    font-size: 1.6rem;
    color: var(--ink-soft);
    line-height: 2;
  }

  .service-page-wrapper .aintro__note strong {
    font-size: inherit;
    font-weight: bold;
    color: var(--ink);
  }

  /* ---------- 製造・販売：提携の一文 ---------- */
  .service-page-wrapper .maker__note {
    margin-top: 26px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
  }

  /* ---------- メリット（5項目） ---------- */
  .merit__item {
    padding: 34px 30px 36px;
  }

  .merit__item .merit__text {
    font-size: 1.6rem;
  }

  /* ---------- 特長バナー（ご支給バナーをHTMLで再構成） ---------- */
  .mbanner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    border-radius: var(--radius);
    color: #fff;
    background-image: linear-gradient(120deg, #0B3A73 0%, #0F4F92 100%);
    box-shadow: var(--shadow-md);
  }

  .mbanner--web {
    background-image: linear-gradient(120deg, #0A5E8E 0%, #1186C0 100%);
  }

  .mbanner__head {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 30px 40px 30px;
    background-color: rgba(0, 0, 0, 0.18);
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  }

  .service-page-wrapper .mbanner__head small {
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.5;
  }

  .service-page-wrapper .mbanner__head strong {
    font-size: 3.4rem;
    font-weight: 900;
    color: #FFE45C;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }

  .mbanner__body {
    padding: 34px 20px 36px 18px;
  }

  .service-page-wrapper .mbanner__catch {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.6;
  }

  .service-page-wrapper .mbanner__catch em {
    font-style: normal;
    font-size: inherit;
    font-weight: inherit;
    color: #FFE45C;
  }

  .mbanner__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    margin-top: 18px;
  }

  .service-page-wrapper .mbanner__chips li {
    padding: 6px 11px;
    border-radius: 999px;
    background-color: #fff;
    font-size: 1.35rem;
    font-weight: bold;
    color: #0B3A73;
    line-height: 1.4;
  }

  /* ---------- 商品 ---------- */
  .products {
    background-color: #fff;
    padding: 120px 0 40px;
  }

  /* 次の「お客様の声」も白地のため、間の余白を詰めて1区画分の空きにする */
  .products__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 940px;
    margin: 0 auto;
  }

  .product {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: 0.4s all var(--ease);
  }

  .product:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }

  .product__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    padding: 26px;
    background-color: #fff;
    border-bottom: 1px solid var(--line);
  }

  /* 10/28 荷姿のカードは関連ツールより横幅が広く、写真が小さく見えたため2割ほど大きく（240／188 → 280／224px） */
  .product__img img {
    width: auto;
    max-width: 100%;
    max-height: 224px;
  }

  /* コンテナは箱のような開いたフラップがなく、全体が詰まった塊なので同じ高さでも大きく見える。1割ほど小さくして箱と釣り合わせる */
  .product__img--container img {
    max-height: 200px;
  }

  .product__body {
    padding: 28px 34px 32px;
  }

  .service-page-wrapper .product__kind {
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .service-page-wrapper .product__name {
    margin-top: 10px;
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .product__spec {
    margin-top: 20px;
    border-top: 1px solid var(--line);
  }

  .product__spec div {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
  }

  .service-page-wrapper .product__spec dt {
    flex-shrink: 0;
    width: 82px;
    padding: 4px 0;
    text-align: center;
    border-radius: 999px;
    background-color: var(--accent-tint);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--accent-deep);
    line-height: 1.4;
  }

  .service-page-wrapper .product__spec dd {
    margin: 0;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.6;
  }

  /* 10/15 ご依頼：「AdBlue®の荷姿」「AdBlue®関連ツール」の2群に分け、群ごとに小見出しを置く */
  .service-page-wrapper .products__sub {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 940px;
    margin: 0 auto 28px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.5;
    letter-spacing: 0.06em;
  }

  .products__sub::before,
  .products__sub::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--line);
  }

  .service-page-wrapper .products__sub--tools {
    margin-top: 72px;
  }

  /* 関連ツールの写真はご支給資料から切り出した小さな画像（元データ待ち）。拡大せず枠の中に収める */
  .tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 940px;
    margin: 0 auto;
  }

  .tool {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: 0.4s all var(--ease);
  }

  .tool:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }

  .tool__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 22px;
    background-color: #fff;
    border-bottom: 1px solid var(--line);
  }

  .tool__img img {
    width: auto;
    max-width: 100%;
    max-height: 156px;
  }

  /* エア抜きは黒いキャップが重く、同じ高さでもほかの2点より大きく見えるため、少しだけ小さくする */
  .tool__img--air img {
    max-height: 142px;
  }

  .service-page-wrapper .tool__name {
    padding: 18px 20px 20px;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  /* ---------- お客様の声：イラスト ---------- */
  /* ご支給のイラストは上半身の構図で、電球などの小物が四隅に来る。
     丸く抜くと小物が欠けるため、角丸の正方形で見せる */
  .voice__item {
    padding: 36px 32px 38px;
  }

  .voice__head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }

  .voice__avatar {
    width: 136px;
    height: 136px;
  }

  .voice__avatar img {
    width: 136px;
    height: 136px;
    border-radius: 24px;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px -16px rgba(20, 22, 26, 0.45);
  }

  /* ---------- FV：給水口キャップの写真（仮画像） ---------- */
  /* 画像の側で蓋を右寄りに置き、左は地色へ溶かしてあるので全面に敷くだけでよい。
     幅が詰まって左右が切れるときは、蓋が見出しから離れるよう右側を残す */
  .fv__bg img {
    object-position: 20% 50%;
  }

  /* 左側は写真が溶けて既に暗いので、暗幕は薄くしてキャップの青を残す */
  .fv::after {
    background-image:
      linear-gradient(90deg, rgba(8, 9, 11, 0.55) 0%, rgba(8, 9, 11, 0.25) 40%, rgba(8, 9, 11, 0.04) 65%, rgba(8, 9, 11, 0.12) 100%),
      linear-gradient(180deg, rgba(8, 9, 11, 0.30) 0%, rgba(8, 9, 11, 0) 30%, rgba(8, 9, 11, 0.38) 100%);
  }

  /* ---------- 改訂分：タブレット ---------- */
  @media (max-width: 1024px) {
    .aintro {
      grid-template-columns: 1fr;
    }

    .aintro__body {
      border-left: 0;
      border-top: 1px solid var(--line);
    }

    .aservice__banners {
      grid-template-columns: 1fr;
      max-width: 720px;
    }
  }

  /* 縦長の画面では横に寄せても見出しとキャップが重なる。
     写真をFVの下部に敷き直し、上端を地色へ溶かして「見出し→写真」の縦積みにする */
  @media (max-width: 900px) {
    .fv {
      height: auto;
      min-height: 0;
      max-height: none;
      padding: 120px 0 330px;
    }

    .fv__bg {
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      height: 420px;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
    }

    .fv__bg img {
      object-position: 82% 50%;
    }

    /* 横が切れる幅（SP）で蓋が中央に来る位置 */
    .fv::after {
      background-image: linear-gradient(180deg, rgba(8, 9, 11, 0) 0%, rgba(8, 9, 11, 0) 55%, rgba(8, 9, 11, 0.35) 100%);
    }

    .fv__scroll {
      display: none;
    }
  }

  /* ---------- 改訂分：スマートフォン ---------- */
  @media (max-width: 760px) {
    .fv {
      padding: 104px 0 290px;
    }

    /* 蓋の上端がボタンに掛からないよう、写真の分の下余白をとる */
    .fv__bg {
      height: 330px;
    }

    .products {
      padding: 76px 0 20px;
    }

    .aintro__head {
      padding: 30px 24px 22px 28px;
    }

    .service-page-wrapper .aintro__ttl {
      font-size: 1.8rem;
    }

    .aintro__body {
      padding: 22px 24px 28px 28px;
    }

    .service-page-wrapper .aintro__note {
      font-size: 1.5rem;
    }

    .service-page-wrapper .maker__note {
      font-size: 1.45rem;
      text-align: left;
    }

    .aservice__banners {
      gap: 20px;
      margin-top: 40px;
    }

    .mbanner {
      grid-template-columns: 1fr;
    }

    .mbanner__head {
      clip-path: none;
      padding: 20px 22px;
      flex-direction: row;
      align-items: baseline;
      gap: 10px;
    }

    .service-page-wrapper .mbanner__head strong {
      font-size: 2.7rem;
    }

    .mbanner__body {
      padding: 20px 22px 24px;
    }

    .service-page-wrapper .mbanner__catch {
      font-size: 1.75rem;
    }

    .service-page-wrapper .mbanner__chips li {
      font-size: 1.35rem;
    }

    .products__wrap {
      grid-template-columns: 1fr;
    }

    .product__img {
      height: 220px;
    }

    .product__img img {
      max-height: 170px;
    }

    .product__img--container img {
      max-height: 152px;
    }

    .product__body {
      padding: 24px 24px 26px;
    }

    .service-page-wrapper .product__name {
      font-size: 1.9rem;
    }

    .service-page-wrapper .products__sub {
      font-size: 1.7rem;
      gap: 14px;
      margin-bottom: 20px;
    }

    .service-page-wrapper .products__sub--tools {
      margin-top: 48px;
    }

    /* 関連ツールは1列に積むと縦に長くなるため、写真（左）と名前（右）の横並びにする */
    .tools {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .tool {
      flex-direction: row;
      align-items: center;
    }

    .tool__img {
      flex-shrink: 0;
      width: 132px;
      height: 108px;
      padding: 10px;
      border-bottom: 0;
      border-right: 1px solid var(--line);
    }

    .tool__img img {
      max-height: 88px;
    }

    .tool__img--air img {
      max-height: 80px;
    }

    .service-page-wrapper .tool__name {
      padding: 0 20px;
      text-align: left;
      font-size: 1.6rem;
    }

    .voice__item {
      padding: 32px 24px 30px;
    }

    .voice__avatar,
    .voice__avatar img {
      width: 116px;
      height: 116px;
    }

    .voice__avatar img {
      border-radius: 20px;
    }
  }