/* MITSUMARU サイト全体の見た目（2026-11 デザイン改修。元は 調査/デザイン提案/demo.css。後ろに WordPress で足した分） */
:root {
	--ink: #0a0a0c; --char: #1b1c20; --char2: #26272c; --char3: #3a3b41;
	--line: rgba(255, 255, 255, .16); --line2: rgba(0, 0, 0, .12);
	--mute: #9b9ca4; --text: #2b2b2f; --paper: #fff; --paper2: #f3f3f4;
	--en: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
	--head: 80px; --gutter: 40px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; font-stretch: 125%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--ja); font-size: 16px; line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main { padding-top: var(--head); }

/* ---------- ヘッダー：濃い一色の帯・日本語のメニュー・電話番号・線の相談ボタン ---------- */
.gh { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: stretch; height: var(--head); padding-left: var(--gutter); background: var(--char); color: #fff; }
.gh__logo { display: flex; align-items: center; width: 180px; flex-shrink: 0; }
.gh__logo img { width: 100%; }
.gh__nav { margin-left: auto; }
.gh__list, .gh__item { height: 100%; }
.gh__list { display: flex; gap: 26px; }
.gh__link { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; white-space: nowrap; }
.gh__ja { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; }
.gh__en { margin-top: 2px; font-family: var(--en); font-size: 9.5px; line-height: 1.3; letter-spacing: .12em; color: var(--mute); }
.gh__chev { width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.gh__item:hover .gh__chev, .gh__item:focus-within .gh__chev { transform: translateY(1px) rotate(225deg); }
.gh__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 15px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.gh__item:hover > .gh__link::after, .gh__item.is-now > .gh__link::after { transform: scaleX(1); }
/* 開くメニュー：白い面にカテゴリの説明・カード・相談の入口 */
.gh__sub { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); box-shadow: 0 24px 40px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.gh__item:hover .gh__sub, .gh__item:focus-within .gh__sub { opacity: 1; visibility: visible; }
.gh__subin { display: flex; align-items: stretch; gap: 20px; padding: 12px var(--gutter); }
.gh__subt { align-self: center; flex-shrink: 0; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; }
.gh__cards { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.gh__card, .gh__subcta { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px; padding: 8px 14px; transition: border-color .2s, background .2s; }
.gh__card { border: 1px solid var(--line2); }
.gh__card b { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.gh__card span { grid-column: 1; font-size: 12px; line-height: 1.5; color: #555; white-space: nowrap; overflow: hidden; }
.gh__card .arw, .gh__subcta .arw { grid-column: 2; grid-row: 1 / span 2; }
.gh__card:hover { border-color: var(--ink); background: var(--paper2); }
.gh__subcta { flex-shrink: 0; width: 230px; background: var(--ink); color: #fff; }
.gh__subcta small { font-size: 11.5px; line-height: 1.5; letter-spacing: .06em; color: #c6c6cc; }
.gh__subcta b { grid-column: 1; font-family: var(--en); font-weight: 500; font-size: 16px; line-height: 1.3; }
.gh__subcta:hover { background: var(--char3); }
.gh__tel { display: flex; flex-direction: column; justify-content: center; margin-left: 30px; white-space: nowrap; text-align: right; }
.gh__tel small { font-size: 10.5px; line-height: 1.4; letter-spacing: .1em; color: #c6c6cc; }
.gh__tel b { font-family: var(--en); font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: .01em; }
.gh__cta { display: flex; align-items: center; gap: 18px; align-self: center; margin: 0 var(--gutter) 0 24px; padding: 8px 0 10px; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.gh__burger { display: none; align-items: center; justify-content: center; width: 64px; margin-left: auto; }
.gh__burger i { position: relative; display: block; width: 26px; height: 9px; }
.gh__burger i::before, .gh__burger i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff; }
.gh__burger i::before { top: 0; } .gh__burger i::after { bottom: 0; }
.is-menu .gh__burger i::before { transform: translateY(3.5px) rotate(20deg); }
.is-menu .gh__burger i::after { transform: translateY(-3.5px) rotate(-20deg); }

/* スマホのメニュー */
.sm { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; padding: 84px 24px 28px; background: var(--char); color: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.is-menu .sm { opacity: 1; visibility: visible; }
.sm__row { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; }
.sm__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.sm__cta a { display: flex; align-items: center; justify-content: center; height: 54px; background: var(--char2); font-size: 14px; letter-spacing: .06em; }
.sm__cta a:first-child { grid-column: 1 / -1; height: 60px; background: #fff; color: #000; font-family: var(--en); font-weight: 500; font-size: 21px; letter-spacing: .01em; }

/* ---------- 共通の部品 ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.ttl__en { font-family: var(--en); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .16em; color: #777; }
.ttl__ja { margin-top: 10px; font-size: clamp(24px, 2.35vw, 34px); font-weight: 500; line-height: 1.4; letter-spacing: .05em; color: #111; word-break: auto-phrase; text-wrap: balance; }
.on-dark .ttl__en { color: #c6c6cc; }
.on-dark .ttl__ja { color: #fff; }
.txt { margin-top: 22px; font-size: 16.5px; line-height: 2; letter-spacing: .03em; }
.arw { position: relative; display: inline-block; flex-shrink: 0; width: 24px; height: 9px; transition: transform .25s; }
.arw::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.arw::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
/* ボタン：文字と1本の線。画面に入ると明るい線が伸び、触れると右端まで伸びて矢印が右へ抜けて左から戻る */
.btn, .cta__cell, .gh__cta { --ln: rgba(0, 0, 0, .22); --on: var(--ink); position: relative; overflow: hidden; background: linear-gradient(var(--ln), var(--ln)) 0 100% / 100% 1px no-repeat; }
.on-dark .btn, .cta__cell, .gh__cta { --ln: rgba(255, 255, 255, .38); --on: #fff; color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 300px; padding: 10px 0 14px; color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: .08em; white-space: nowrap; }
.on-dark .btn { color: #fff; }
.btn::after, .cta__cell::after, .gh__cta::after, .dock::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--on); transform: scaleX(.28); transform-origin: left; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.on-dark .btn--sub::after, .js .btn:not(.in)::after { transform: scaleX(0); }
.btn .arw { transition: opacity .3s .25s; }
.js .btn:not(.in) .arw { opacity: 0; }
.btn:active::after, .cta__cell:active::after, .gh__cta:active::after, .dock:active::after { transform: scaleX(1); }
@keyframes arwloop { 0% { transform: none; opacity: 1; } 45% { transform: translateX(18px); opacity: 0; } 46% { transform: translateX(-18px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (hover: hover) {
	.btn:hover::after, .on-dark .btn--sub:hover::after, .cta__cell:hover::after, .gh__cta:hover::after, .dock:hover::after { transform: scaleX(1); }
	.btn:hover .arw, .dock:hover .arw, .notice:hover .arw, .news__item:hover .arw, .gf__a:hover .arw, .gh__subin a:hover .arw, .gh__cta:hover .arw, .cta__cell:hover .arw { animation: arwloop .6s cubic-bezier(.7, 0, .2, 1); }
}

/* 写真は画面に入ると静かに表示するだけ（JS が無いときはそのまま見える） */
.js .row__img img, .js .intro__img img, .js .card__img img, .js .split__img img, .js .mr__img img, .js .gr__pic img, .js .flw__img img, .js .ab3__p img, .js .qc__img img { opacity: 0; transition: opacity .6s, transform .6s; }
.js .in img { opacity: 1; }
@keyframes settle { from { transform: scale(1.03); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .row__img img, .js .intro__img img, .js .card__img img, .js .split__img img, .js .mr__img img, .js .gr__pic img, .js .flw__img img, .js .ab3__p img, .js .qc__img img, .js .pl__b, .js .hs__r { opacity: 1; }
}

/* ---------- ヒーロー ---------- */
.hero { position: relative; height: calc(100vh - var(--head)); height: calc(100svh - var(--head)); min-height: 560px; max-height: 920px; background: #000; color: #fff; overflow: hidden; }
.hero__s { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; }
.hero__s img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.hero__s.is-on { opacity: 1; }
.hero__s.is-on img { animation: settle 7s ease-out both; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 34%); }
.hero__body { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 40px; }
.hero__sub { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; }
.hero__h { margin-top: 8px; font-family: var(--en); font-weight: 500; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.16; letter-spacing: 0; }
.hero__lead { margin-top: 8px; font-size: 14px; letter-spacing: .08em; }
.hero__cta { display: flex; gap: 40px; margin-top: 18px; }
.hero__tel { position: absolute; z-index: 2; right: var(--gutter); bottom: 40px; text-align: right; }
.hero__tel small { display: block; font-size: 12.5px; letter-spacing: .1em; }
.hero__tel b { display: block; font-family: var(--en); font-weight: 500; font-size: 28px; line-height: 1.25; }
.hero__cta .btn { min-width: 270px; font-size: 15.5px; }

/* 車検のお知らせ：画像のバナーをやめて文字の帯に */
.notice { display: block; background: var(--char); color: #fff; transition: background .2s; }
.notice__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 18px; padding-bottom: 18px; }
.notice__tag { font-family: var(--en); font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--mute); }
.notice__t { flex: 1; font-size: 16.5px; font-weight: 500; letter-spacing: .08em; }
.notice .arw { width: 36px; }
@media (hover: hover) { .notice:hover { background: var(--char2); } }

/* ---------- 左右に並ぶ段（構成は今のまま。文章と写真の幅を近づける） ---------- */
.row { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 0 28px; padding: 110px 0 0; }
.row__txt { grid-column: 2 / span 4; max-width: 480px; }
.row__img { grid-column: 7 / -1; height: clamp(400px, 34vw, 520px); overflow: hidden; background: var(--paper2); }
.row__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.row--rev .row__txt { grid-column: 8 / span 4; grid-row: 1; }
.row--rev .row__img { grid-column: 1 / span 6; grid-row: 1; }
.row__img--wide { grid-column: 1 / span 6; grid-row: 1; }
.row__txt--r { grid-column: 8 / span 4; }
.row .btn { margin-top: 32px; }
.row--end { padding-bottom: 120px; }
.since { display: flex; align-items: baseline; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line2); }
.since b { font-family: var(--en); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -.01em; color: #111; font-variant-numeric: tabular-nums; }
.since span { font-size: 15px; letter-spacing: .08em; color: #555; }

/* ---------- 修理実績：見出しだけだった段に実物を出す ---------- */
.works { margin-top: 120px; padding: 100px 0 110px; background: var(--ink); color: #fff; }
.works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card { display: block; }
.card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--char2); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__t { display: block; display: -webkit-box; margin-top: 15px; font-size: 16px; font-weight: 500; line-height: 1.65; letter-spacing: .03em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@media (hover: hover) { .card:hover .card__img img { transform: scale(1.03); } }

/* ---------- 途中の相談の帯：電話を一番強く見せる ---------- */
.cta { padding: 84px 0; background: var(--char); color: #fff; }
.cta__in { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }
.cta__h { font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; line-height: 1.5; letter-spacing: .06em; }
.cta__lead { margin-top: 14px; font-size: 15px; letter-spacing: .08em; color: #d5d5d9; }
.cta__cells { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; align-items: end; }
.cta__cell { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px; padding: 8px 0 16px; }
.cta__cell small { grid-column: 1 / -1; font-size: 12.5px; letter-spacing: .08em; }
.cta__cell b { margin-top: 4px; font-size: 19px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; white-space: nowrap; }
.cta__cell--tel b { font-family: var(--en); font-size: clamp(20px, 1.85vw, 26px); letter-spacing: 0; }

/* ---------- 写真の並び ---------- */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--ink); }
.strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- アップデート・コラム：明るい写真の上の文字を読める形に ---------- */
.band { position: relative; height: 340px; color: #fff; overflow: hidden; }
.band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 12, .66); }
.band__in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; height: 100%; padding-bottom: 50px; }
.band__sub { margin-top: 12px; font-size: 15.5px; letter-spacing: .08em; color: #d5d5d9; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; margin-bottom: 110px; }
.cards3 .card__t { margin-top: 14px; color: var(--text); }

/* ---------- ニュース ---------- */
.news { padding: 100px 0; background: var(--paper2); }
.news__in { display: grid; grid-template-columns: 4fr 7fr; gap: 50px; }
.news__item { position: relative; display: flex; gap: 30px; align-items: baseline; padding: 24px 40px 24px 0; border-bottom: 1px solid var(--line2); }
.news__item time { flex-shrink: 0; font-family: var(--en); font-size: 14px; letter-spacing: .03em; color: #666; }
.news__item span { font-size: 16.5px; font-weight: 500; letter-spacing: .03em; line-height: 1.7; }
.news__item .arw { position: absolute; right: 6px; top: 50%; margin-top: -4px; }
.news .btn { margin-top: 30px; }

/* ---------- 下層ページの見出し（全ページ共通に揃える） ---------- */
.ph { position: relative; height: 56vh; min-height: 420px; max-height: 580px; background: #000; color: #fff; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 88%); }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .18) 70%); }
.ph__in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 56px; }
.ph__h { font-size: clamp(26px, 3vw, 40px); }
.crumb { margin-top: 14px; font-size: 12px; letter-spacing: .08em; color: #cfcfd4; }
.crumb a:hover { color: #fff; }
.ph__lead { margin-top: 12px; font-size: 15px; line-height: 1.8; letter-spacing: .06em; color: #e4e4e7; }
.ph--long .ph__h { font-size: clamp(23px, 2.35vw, 32px); line-height: 1.5; }
.ph--plain { height: auto; min-height: 0; max-height: none; background: var(--char); }
.ph--plain::after { content: none; }
.ph--plain .ph__in { position: static; padding: 60px 0 48px; }
.ph--art .crumb { margin: 0 0 22px; }
.ph--art .ph__h { max-width: 860px; margin-top: 10px; font-size: clamp(23px, 2.3vw, 32px); line-height: 1.5; }
.ph__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; letter-spacing: .08em; color: #c6c6cc; }
.ph__meta time { font-family: var(--en); font-size: 12.5px; }
.sec { padding: 100px 0; }
.sec--g { background: var(--paper2); }
.sec--top { padding-bottom: 0; }
.split { display: grid; grid-template-columns: 4fr 7fr; gap: 50px; }
.split__img { margin-top: 30px; aspect-ratio: 3 / 2; overflow: hidden; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.intro { padding: 100px 0; }
.intro__g { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.intro__img { height: 420px; overflow: hidden; background: var(--paper2); }
.intro__img img { width: 100%; height: 100%; object-fit: cover; }
.equip { padding: 100px 0 120px; background: var(--ink); color: #fff; }
.equip__lead { margin-top: 20px; max-width: 680px; font-size: 16.5px; color: #d5d5d9; }

/* ---------- フッター：チャコールの帯。左に大きな細い見出し、右に案内と下線のリンク ---------- */
.gf { background: var(--char); color: #fff; }
.gf__cta { border-bottom: 1px solid var(--line); }
.gf__ctain { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.gf__h { font-size: clamp(30px, 3.9vw, 54px); font-weight: 300; line-height: 1.3; letter-spacing: .06em; white-space: nowrap; }
.gf__sub { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-family: var(--en); font-size: 12px; letter-spacing: .24em; color: var(--mute); }
.gf__sub::before { content: ""; width: 40px; height: 1px; background: var(--mute); }
.gf__lead { font-size: 15px; letter-spacing: .1em; color: #d5d5d9; }
.gf__a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .34); font-size: 17px; letter-spacing: .1em; }
.gf__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.gf__a b { font-family: var(--en); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.15; letter-spacing: 0; }
.gf__hours { margin: 10px 0 14px; font-size: 12.5px; letter-spacing: .04em; color: var(--mute); }
.gf__a--tel { padding-top: 22px; }
.gf__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; }
.gf__btns .btn { min-width: 0; }
@media (hover: hover) { .gf__a:hover::after { transform: scaleX(1); } }
.gf__info { display: grid; grid-template-columns: 260px 1fr; gap: 56px; padding-top: 64px; padding-bottom: 56px; }
.gf__logo { width: 170px; }
.gf__name { margin-top: 18px; font-size: 13.5px; font-weight: 500; letter-spacing: .06em; }
.gf__addr { margin-top: 4px; font-size: 12.5px; letter-spacing: .04em; line-height: 1.8; color: var(--mute); }
.gf__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.gf__catt { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; }
.gf__cat ul { margin-top: 10px; }
.gf__cat a { display: inline-block; padding: 4px 0; font-size: 14px; letter-spacing: .04em; color: #e4e4e7; transition: color .2s, transform .2s; }
@media (hover: hover) { .gf__cat a:hover { color: #fff; transform: translateX(4px); } }
.gf__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; padding-bottom: 22px; font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.gf__legal span { font-family: var(--en); letter-spacing: .02em; }
.gf__legal a:hover { color: #fff; }

/* 右下の相談ボタン／スマホの下の3つのボタン */
.dock { --on: #fff; position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 18px; height: 56px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .3); overflow: hidden; background: var(--ink); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); font-size: 14px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s; }
.dock::after { left: 20px; right: 20px; bottom: 11px; opacity: .9; }
.dock.is-on { opacity: 1; pointer-events: auto; }
.spbar { display: none; }

/* ---------- 1180px 以下：メニューを ≡ に ---------- */
@media (max-width: 1340px) { .gh__tel { display: none; } .gh__card span { display: none; } .gh__card .arw { grid-row: auto; } }
@media (max-width: 1180px) {
	.gh__nav, .gh__cta { display: none; }
	.gh__tel { display: flex; margin-left: auto; margin-right: 12px; }
	.gh__burger { margin-left: 0; display: flex; }
}
@media (max-width: 900px) {
	:root { --head: 60px; --gutter: 20px; }
	.gh__logo { width: 150px; }
	.gh__tel { display: none; }
	.gh__burger { margin-left: auto; width: 58px; }
	.hero { height: 560px; min-height: 0; }
	.hero::after { background: linear-gradient(0deg, rgba(0, 0, 0, .8) 8%, rgba(0, 0, 0, 0) 44%); }
	.hero__s img { object-position: var(--sp, var(--pos, center)); }
	.hero__body { bottom: 24px; }
	.hero__tel { display: none; }
	.hero__sub { font-size: 11.5px; letter-spacing: .1em; }
	.hero__h { font-size: 23px; }
	.hero__lead { margin-top: 6px; font-size: 13px; }
	.hero__cta { flex-direction: column; margin-top: 12px; }
	.hero__cta { gap: 14px; }
	.hero__cta .btn { min-width: 0; }
	.hero__cta .btn:nth-child(2) { display: none; }
	.notice__in { flex-wrap: wrap; gap: 4px 12px; padding-top: 16px; padding-bottom: 16px; }
	.notice__tag { width: 100%; }
	.notice__t { font-size: 15px; letter-spacing: .04em; }
	.row { grid-template-columns: 1fr; gap: 26px 0; padding-top: 70px; }
	.row__txt, .row--rev .row__txt { grid-column: 1; grid-row: 2; max-width: none; padding: 0 var(--gutter); }
	.row__txt--r { grid-column: 1; grid-row: 2; max-width: none; padding: 0 var(--gutter); }
	.row__img, .row--rev .row__img, .row__img--wide { grid-column: 1; grid-row: 1; height: 240px; }
	.row--end { padding-bottom: 60px; }
	.ttl__ja { margin-top: 6px; font-size: 23px; }
	.txt { margin-top: 16px; font-size: 15.5px; line-height: 1.95; }
	.since b { font-size: 34px; }
	.since span { font-size: 14px; letter-spacing: .04em; }
	.btn { min-width: 0; width: 100%; font-size: 15px; }
	.works { margin-top: 70px; padding: 64px 0; }
	.works__head { display: block; margin-bottom: 26px; }
	.works__head .btn { display: none; }
	.rail { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.rail::-webkit-scrollbar { display: none; }
	.rail .card { flex: 0 0 76%; scroll-snap-align: center; }
	.works__more { display: flex !important; margin-top: 18px; }
	.cta { padding: 54px 0; }
	.cta__in { grid-template-columns: 1fr; gap: 24px; }
	.cta__h { font-size: 24px; }
	.cta__lead { display: none; }
	.cta__cells { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
	.cta__cell { padding: 6px 0 12px; }
	.cta__cell b { font-size: 15.5px; letter-spacing: .03em; }
	.cta__cell small { font-size: 11.5px; letter-spacing: .02em; }
	.cta__cell .arw { display: none; }
	.cta__cell--tel { grid-column: 1 / -1; }
	.cta__cell--tel b { font-size: 28px; }
	.cta__cell--tel .arw { display: block; }
	.strip { grid-template-columns: repeat(3, 1fr); }
	.band { height: 230px; }
	.band__in { display: block; padding-top: 44px; padding-bottom: 0; }
	.band__in .btn { display: none; }
	.band__sub { font-size: 14px; }
	.cards3 { display: flex; gap: 12px; margin: 20px calc(var(--gutter) * -1) 48px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.cards3::-webkit-scrollbar { display: none; }
	.cards3 .card { flex: 0 0 76%; scroll-snap-align: center; }
	.cards3 .card__t { margin-top: 10px; font-size: 14.5px; }
	.news { padding: 60px 0; }
	.news__in { grid-template-columns: 1fr; gap: 22px; }
	.news__item { gap: 16px; padding: 16px 26px 16px 0; }
	.news__item span { font-size: 15px; }
	.ph { height: 44vh; min-height: 300px; }
	.ph__in { bottom: 30px; }
	.intro { padding: 60px 0; }
	.intro__g { grid-template-columns: 1fr; gap: 26px; }
	.intro__img { height: 240px; }
	.equip { padding: 60px 0 70px; }
	.gf__ctain { grid-template-columns: 1fr; gap: 34px; padding-top: 60px; padding-bottom: 60px; }
	.gf__h { font-size: 30px; }
	.gf__sub { margin-top: 12px; }
	.gf__lead { font-size: 14px; letter-spacing: .06em; }
	.gf__a { padding: 15px 0 12px; font-size: 15.5px; }
	.gf__a b { font-size: 32px; }
	.gf__a--tel { padding-top: 12px; }
	.gf__btns { grid-template-columns: 1fr; }
	.gf__hours { font-size: 11.5px; letter-spacing: .01em; }
	.gf__info { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 32px; }
	.gf__cats { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
	.gf__cat ul { margin-top: 6px; }
	.gf__cat:last-child { grid-column: 1 / -1; }
	.gf__cat:last-child ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
	.gf__cat a { padding: 2px 0; }
	.gf__legal { padding-top: 14px; padding-bottom: 72px; }
	.dock { display: none; }
	.spbar { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1fr; height: 58px; background: var(--char); color: #fff; border-top: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity .25s; }
	.spbar.is-on { opacity: 1; pointer-events: auto; }
	.spbar a { position: relative; display: flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
	.spbar a + a::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line); }
	.spbar a:last-child { background: #fff; color: #000; font-weight: 500; }
}

/* ---------- 左右の段を並べるページ（修理方針・車検） ---------- */
.pols .row:first-child { padding-top: 56px; }
.pols .ttl__ja { font-size: clamp(21px, 1.85vw, 26px); }
.sub { margin-top: 14px; font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.clipb { display: none; }

/* ---------- 車検：料金・流れ・よくある質問 ---------- */
.price { position: relative; padding: 110px 0 120px; background: #000; color: #fff; overflow: hidden; }
.price__bg { position: absolute; right: 0; top: 0; width: 70%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .78; -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%); mask-image: linear-gradient(90deg, transparent, #000 46%); }
.price .wrap { position: relative; }
.price__g { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.pr { position: relative; padding: 34px 38px 22px; border: 1px solid var(--line); background: rgba(10, 10, 12, .62); }
.pr__m { font-size: 16.5px; font-weight: 500; letter-spacing: .06em; }
.pr__p { margin-top: 4px; font-size: 16px; letter-spacing: .04em; }
.pr__p b { margin-right: 6px; font-family: var(--en); font-weight: 400; font-size: 56px; line-height: 1.25; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pr dl { margin-top: 20px; }
.pr dl div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pr dt { font-size: 13.5px; line-height: 1.8; color: #c6c6cc; }
.pr dd { font-size: 14.5px; line-height: 1.7; }
.price__n { margin-top: 22px; font-size: 13.5px; line-height: 1.9; color: #c6c6cc; }
.faq__i { border-bottom: 1px solid var(--line2); }
.faq__i:first-child { border-top: 1px solid var(--line2); }
.faq__q { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; width: 100%; padding: 19px 0; text-align: left; font-size: 16.5px; font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: #111; }
.faq__q i { font-family: var(--en); font-style: normal; font-size: 13px; color: #777; }
.faq__q em { position: relative; align-self: center; width: 13px; height: 13px; }
.faq__q em::before, .faq__q em::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: currentColor; transition: transform .3s; }
.faq__q em::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] em::after { transform: none; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.faq__a > div { overflow: hidden; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 28px 20px 26px; font-size: 15.5px; line-height: 1.9; }

/* ---------- 会社情報 ---------- */
.phil { padding: 100px 0 110px; background: var(--ink); color: #fff; }
.phil__lead { margin-top: 28px; font-size: clamp(20px, 2vw, 27px); font-weight: 300; line-height: 1.8; letter-spacing: .06em; }
.phil__g { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 52px; }
.phil__g > div { padding-top: 18px; border-top: 1px solid var(--line); }
.phil__g h3 { font-size: 17px; font-weight: 500; letter-spacing: .06em; }
.phil__g p { margin-top: 10px; font-size: 15.5px; line-height: 2; letter-spacing: .03em; color: #d5d5d9; }
.dl__r { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.dl__r:first-child { border-top: 1px solid var(--line2); }
.dl__r dt { font-size: 15px; font-weight: 500; line-height: 1.8; letter-spacing: .04em; color: #111; }
.dl__r dd { font-size: 15.5px; line-height: 1.8; letter-spacing: .03em; }

/* ---------- お問い合わせ ---------- */
.ctl { margin-top: 30px; }
.ctl small { display: block; font-size: 13px; letter-spacing: .08em; color: #555; }
.ctl p { margin: 12px 0 26px; font-size: 13.5px; line-height: 1.8; color: #555; }
.ctl .btn { display: flex; min-width: 0; max-width: 340px; }
.btn--tel { font-family: var(--en); font-size: 30px; letter-spacing: 0; }
.f { display: block; }
.f + .f { margin-top: 28px; }
.f__l { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; font-size: 15px; font-weight: 500; letter-spacing: .04em; color: #111; }
.f__l i { margin-left: 3px; font-style: normal; color: #666; }
.f__l em { font-size: 12.5px; font-style: normal; font-weight: 400; color: #666; }
.f input, .f textarea { display: block; width: 100%; margin-top: 4px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .28); border-radius: 0; outline: 0; background: none; font: inherit; font-size: 16px; line-height: 1.7; color: var(--ink); transition: border-color .2s; }
.f textarea { min-height: 170px; resize: vertical; }
.f input:focus, .f textarea:focus { border-color: var(--ink); }
.f ::placeholder { color: #9a9a9f; }
.agree { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 15px; }
.agree input { width: 17px; height: 17px; margin: 0; accent-color: #111; }
.agree a { text-decoration: underline; text-underline-offset: 3px; }
.fm .btn { display: flex; width: 300px; margin-top: 30px; }
.fm__n { margin-top: 12px; font-size: 12.5px; color: #666; }
.done .btn { margin-top: 30px; }

/* ---------- 記事の一覧 ---------- */
.lstw { padding-top: 12px; padding-bottom: 110px; }
.tabs { display: flex; gap: 34px; border-bottom: 1px solid var(--line2); }
.tabs a, .tabs button { position: relative; padding: 18px 0 16px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; color: #666; transition: color .2s; }
.tabs a::after, .tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.tabs .is-now { color: var(--ink); }
.tabs .is-now::after { transform: scaleX(1); }
@media (hover: hover) { .tabs a:hover, .tabs button:hover { color: var(--ink); } .tabs a:hover::after, .tabs button:hover::after { transform: scaleX(1); } }
.lst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 24px; margin-top: 48px; }
.card[hidden] { display: none; }
.card__c { display: block; }
.card__m { display: flex; gap: 14px; margin-top: 14px; font-size: 12.5px; line-height: 1.6; letter-spacing: .06em; color: #666; }
.card__m i { font-style: normal; font-weight: 500; color: #111; }
.card__m time { font-family: var(--en); letter-spacing: .02em; }
.card--l .card__t { margin-top: 6px; color: #111; }
.card__x { display: -webkit-box; margin-top: 6px; font-size: 14px; line-height: 1.75; color: #555; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lst__more { margin-top: 56px; text-align: center; }
.lstn { margin-top: 24px; }

/* ---------- 記事のページ ---------- */
.lstn--idx time { width: 290px; flex-shrink: 0; }
.single-rel__next { display: grid; grid-template-columns: 5fr 6fr; gap: 24px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--line2); }
.single-rel__nimg { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.single-rel__nimg img { width: 100%; height: 100%; object-fit: cover; }
.single-rel__ntxt { display: flex; flex-direction: column; gap: 6px; }
.single-rel__nmeta { display: flex; gap: 12px; font-size: 12.5px; letter-spacing: .04em; color: #666; }
.single-rel__ncat { font-weight: 500; color: #111; }
.single-rel__nname { font-size: 19px; font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: #111; }
.single-rel__nlead { font-size: 14.5px; line-height: 1.8; color: #555; }
.single-rel__ngo { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 14px; font-weight: 500; letter-spacing: .06em; color: #111; }
.single-rel__rowhead { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 16px; }
.single-rel__rowt { font-size: 15px; font-weight: 500; letter-spacing: .06em; color: #111; }
.single-rel__arrows { display: none; }
.art__back { padding: 20px 0 100px; text-align: center; }
.e404 { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 30px; }

/* ---------- 下層ページのスマホ ---------- */
@media (max-width: 900px) {
	.ph--long .ph__h { font-size: 21px; }
	.ph__lead { font-size: 13.5px; letter-spacing: .02em; }
	.ph--plain { height: auto; min-height: 0; }
	.ph--plain .ph__in { padding: 38px 0 30px; }
	.ph--art .crumb { margin-bottom: 14px; }
	.ph--art .ph__h { font-size: 21px; }
	.sec { padding: 60px 0; }
	.sec--top { padding-bottom: 0; }
	.split { grid-template-columns: 1fr; gap: 24px; }
	.pols { display: flex; gap: 10px; margin-top: 26px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.pols::-webkit-scrollbar { display: none; }
	.pols:last-child { margin-bottom: 60px; }
	.pols .row, .pols .row:first-child { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 84%; padding: 0; background: var(--paper2); scroll-snap-align: center; }
	.pols .row__img { order: -1; flex-shrink: 0; height: 190px; }
	.pols .row__txt { padding: 18px 18px 22px; }
	.pols .ttl__ja { font-size: 18px; }
	.pols .txt { margin-top: 10px; font-size: 14.5px; line-height: 1.9; }
	.pols + section { margin-top: 60px; }
	.pols .sub { margin-top: 8px; font-size: 14px; }
	.clip:not(.is-open) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
	.clipb { display: inline-block; margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: #111; }
	.price { padding: 60px 0 64px; }
	.price__g { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
	.pr { padding: 20px 20px 12px; }
	.pr__p b { font-size: 34px; }
	.pr dl { margin-top: 10px; }
	.pr dl div { padding: 10px 0; }
	.price__n { margin-top: 14px; font-size: 12.5px; }
	.faq__q { gap: 10px; padding: 14px 0; font-size: 15px; }
	.faq__a p { padding: 0 20px 16px 22px; font-size: 14.5px; }
	.phil { padding: 60px 0 64px; }
	.phil__lead { margin-top: 18px; font-size: 18px; line-height: 1.85; letter-spacing: .03em; }
	.phil__g { grid-template-columns: 1fr; gap: 24px; margin-top: 30px; }
	.phil__g > div { padding-top: 14px; }
	.phil__g p { margin-top: 6px; font-size: 14.5px; line-height: 1.9; }
	.dl__r { grid-template-columns: 112px 1fr; gap: 10px; padding: 11px 0; }
	.dl__r dt { font-size: 13.5px; }
	.dl__r dd { font-size: 14.5px; line-height: 1.7; }
	.ctl { margin-top: 18px; }
	.ctl .btn { max-width: none; }
	.btn--tel { font-size: 28px; }
	.f__l em { font-size: 11.5px; }
	.f textarea { min-height: 140px; }
	.fm .btn { width: 100%; }
	.lstw { padding-bottom: 60px; }
	.tabs { gap: 24px; }
	.tabs a, .tabs button { padding: 14px 0 12px; font-size: 14.5px; }
	.lst { grid-template-columns: 1fr; gap: 0; margin-top: 6px; }
	.card--l { display: grid; grid-template-columns: 124px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
	.card--l .card__img { aspect-ratio: 3 / 2; }
	.card__m { gap: 10px; margin-top: 0; font-size: 11.5px; }
	.card--l .card__t { margin-top: 2px; font-size: 14px; line-height: 1.6; }
	.card__x { display: none; }
	.lst__more { margin-top: 28px; }
	.lstn { margin-top: 8px; }
	.single-rel__next { grid-template-columns: 1fr; gap: 12px; }
	.single-rel__nname { font-size: 17px; }
	.lstn--idx .news__item { display: block; }
	.lstn--idx time { display: block; width: auto; font-size: 12px; }
	.art__back { padding: 10px var(--gutter) 60px; }
	.e404 .btn { width: 100%; }
}

/* ---------- 画面に入ると静かに出す・線が伸びる（位置は動かさない） ---------- */
.js .fx { opacity: 0; transition: opacity .9s; }
.js .fx.in { opacity: 1; }

/* ---------- 修理方針：黒の大きな言葉と、写真が切り替わる段 ---------- */
.lead { padding: 110px 0 120px; background: var(--ink); color: #fff; }
.lead__g { display: grid; grid-template-columns: 6fr 6fr; gap: 70px; align-items: end; }
.lead__h { margin-top: 18px; font-size: clamp(30px, 3.3vw, 46px); font-weight: 400; line-height: 1.45; letter-spacing: .06em; }
.lead__x { font-size: 16.5px; line-height: 2.05; letter-spacing: .03em; color: #d5d5d9; }
.pl { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: #fff; }
.pl__stick { position: sticky; top: var(--head); height: calc(100vh - var(--head)); overflow: hidden; background: #000; }
.pl__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.pl__pic.is-on { opacity: 1; }
.pl__stick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 32%); }
.pl__foot { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 32px; }
.pl__cnt { display: block; font-family: var(--en); font-weight: 400; font-size: 76px; line-height: 1; letter-spacing: 0; }
.pl__seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.pl__seg i { position: relative; height: 2px; background: rgba(255, 255, 255, .28); }
.pl__seg i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.7, 0, .2, 1); }
.pl__seg i.is-on::after { transform: scaleX(1); }
.pl__p { display: flex; align-items: center; min-height: calc(92vh - var(--head)); padding: 70px max(var(--gutter), calc((100vw - 1240px) / 2)) 70px 9%; border-top: 1px solid var(--line); }
.pl__p:first-child { border-top: 0; }
.pl__img { display: none; }
.js .pl__b { opacity: .28; transition: opacity .6s; }
.js .pl__p.is-on .pl__b { opacity: 1; }
.pl__b { max-width: 500px; }
.pl__n { display: flex; align-items: baseline; gap: 16px; font-family: var(--en); font-weight: 500; font-size: 13px; letter-spacing: .16em; color: #c6c6cc; }
.pl__n b { font-weight: 500; }
.pl__t { margin-top: 14px; font-size: clamp(26px, 2.5vw, 34px); font-weight: 400; line-height: 1.45; letter-spacing: .05em; }
.pl__x { margin-top: 22px; font-size: 16.5px; line-height: 2.05; letter-spacing: .03em; color: #d5d5d9; }

/* ---------- 車検：3つの要点・写真に重なるメリット・流れ ---------- */
.sta { background: var(--char); color: #fff; }
.sta__g { display: grid; grid-template-columns: repeat(3, 1fr); }
.sta__g > div { padding: 34px 0 32px 40px; border-left: 1px solid var(--line); }
.sta__g > div:first-child { padding-left: 0; border-left: 0; }
.sta small { display: block; font-size: 13.5px; letter-spacing: .08em; color: #c6c6cc; }
.sta p { margin-top: 6px; font-size: 16px; letter-spacing: .06em; }
.sta b { margin-right: 6px; font-family: var(--en); font-weight: 400; font-size: clamp(34px, 3.3vw, 46px); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sta b.sta__ja { font-family: var(--ja); font-weight: 400; letter-spacing: .1em; }
.mer { padding: 110px 0 0; }
.mer__g { margin-top: 50px; }
.mr { display: grid; grid-template-columns: 7fr 5fr; }
.mr + .mr { margin-top: 4px; }
.mr__img { position: relative; min-height: clamp(460px, 40vw, 600px); overflow: hidden; background: var(--char2); }
.mr__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr__b { align-self: center; padding: 60px max(var(--gutter), calc((100vw - 1240px) / 2)) 60px 64px; }
.mr--rev { grid-template-columns: 5fr 7fr; }
.mr--rev .mr__img { grid-column: 2; grid-row: 1; }
.mr--rev .mr__b { grid-column: 1; grid-row: 1; padding: 60px 64px 60px max(var(--gutter), calc((100vw - 1240px) / 2)); }
.mr__n { display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line2); }
.mr__n b { font-family: var(--en); font-weight: 300; font-size: 64px; line-height: 1; color: #111; }
.mr__n span { font-size: 14px; font-weight: 500; letter-spacing: .12em; color: #666; }
.mr__t { margin-top: 24px; font-size: clamp(21px, 1.85vw, 25px); font-weight: 500; line-height: 1.55; letter-spacing: .04em; color: #111; word-break: auto-phrase; text-wrap: balance; }
.mr .txt { margin-top: 14px; font-size: 15.5px; line-height: 1.9; }
.mr__l { margin-top: 22px; }
.mr__l div { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line2); }
.mr__l div:last-child { border-bottom: 1px solid var(--line2); }
.mr__l dt { font-size: 13.5px; line-height: 1.7; color: #666; }
.mr__l dd { font-size: 15px; font-weight: 500; line-height: 1.7; color: #111; }
.price__g { max-width: 860px; }
.pr__l li { position: relative; padding-left: 22px; }
.pr__l li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 11px; height: 6px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); }
.price__n { max-width: 860px; }
.flw { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 46px; }
.flw li { position: relative; padding-bottom: 4px; }
.flw__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper2); }
.flw__img img { width: 100%; height: 100%; object-fit: cover; }
.flw b { position: relative; display: block; margin-top: 26px; padding-top: 18px; font-family: var(--en); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: #111; }
.flw b::before { content: ""; position: absolute; left: 0; right: -24px; top: 0; height: 1px; background: var(--ink); transform-origin: left; transition: transform .7s linear calc(var(--i) * .7s); }
.flw li:last-child b::before { right: 0; }
.flw b::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--ink); }
.js .flw:not(.in) b::before { transform: scaleX(0); }
.flw h3 { margin-top: 6px; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: #111; }
.flw p { margin-top: 10px; font-size: 15.5px; line-height: 1.85; }

/* ---------- 代表挨拶：手紙のように読ませて最後に名前を置く ---------- */
.gr { display: grid; grid-template-columns: 5fr 7fr; background: var(--paper); }
.gr__img { background: #000; }
.gr__pic { position: sticky; top: var(--head); height: calc(100vh - var(--head)); max-height: 860px; overflow: hidden; }
.gr__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.gr__b { max-width: 760px; padding: 110px var(--gutter) 110px 90px; }
.gr__b .ttl__ja { font-size: clamp(18px, 1.5vw, 21px); }
.gr__q br { display: none; }
.gr__q { margin-top: 44px; font-family: "Zen Old Mincho", var(--ja); font-weight: 500; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.55; letter-spacing: .04em; color: #111; text-indent: -.5em; white-space: nowrap; }
.gr__s { margin-top: 14px; font-size: 17.5px; letter-spacing: .06em; color: #333; }
.gr__l { margin-top: 46px; padding-top: 42px; border-top: 1px solid var(--line2); }
.gr__l h3 { font-family: "Zen Old Mincho", var(--ja); font-weight: 500; font-size: 21px; line-height: 1.6; letter-spacing: .04em; color: #111; text-indent: -.5em; }
.gr__l p { margin-top: 12px; font-size: 16px; line-height: 2.1; letter-spacing: .03em; }
.gr__l p + h3 { margin-top: 36px; }
.gr__sig { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 54px; text-align: right; }
.gr__sig small { font-size: 14px; line-height: 1.8; letter-spacing: .08em; color: #555; }
.gr__sig b { font-family: "Zen Old Mincho", var(--ja); font-weight: 500; font-size: 30px; line-height: 1.4; letter-spacing: .2em; margin-right: -.2em; color: #111; }

/* ---------- 沿革：読み進めると大きな年が進む ---------- */
.hs { padding: 110px 0 120px; background: var(--ink); color: #fff; }
.hs__g { display: grid; grid-template-columns: 5fr 7fr; gap: 50px; }
.hs__l { position: sticky; top: calc(var(--head) + 70px); align-self: start; }
.hs__now { margin-top: 56px; }
.hs__yr { display: block; font-family: var(--en); font-weight: 400; font-size: clamp(84px, 9.4vw, 136px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hs__wa { display: block; margin-top: 10px; font-size: 15px; letter-spacing: .1em; color: #c6c6cc; }
.hs__bar { position: relative; display: block; height: 1px; margin-top: 26px; background: var(--line); }
.hs__bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(.04); transform-origin: left; transition: transform .7s cubic-bezier(.7, 0, .2, 1); }
.hs__r { position: relative; display: grid; grid-template-columns: 110px 84px 1fr; align-items: baseline; gap: 14px; padding: 42px 0; border-bottom: 1px solid var(--line); }
.hs__r::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.7, 0, .2, 1); }
.hs__r.is-on::after, .hs__r.is-past::after { transform: scaleX(1); }
.hs__r b { font-family: var(--en); font-weight: 500; font-size: 26px; line-height: 1.3; }
.hs__r span { font-size: 13.5px; color: #c6c6cc; }
.hs__r p { font-size: 17.5px; line-height: 1.85; letter-spacing: .03em; }
.js .hs__r { opacity: .32; transition: opacity .5s; }
.js .hs__r.is-on, .js .hs__r.is-past { opacity: 1; }

@media (max-width: 900px) {
	.lead { padding: 54px 0 56px; }
	.lead__g { grid-template-columns: 1fr; gap: 20px; }
	.lead__h { margin-top: 8px; font-size: 25px; }
	.lead__x { font-size: 15px; line-height: 1.95; }
	.lead .clipb { justify-self: start; color: #fff; }
	.pl { display: block; padding-bottom: 60px; }
	.pl__l { display: none; }
	.pl__r { display: flex; gap: 10px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.pl__r::-webkit-scrollbar { display: none; }
	.pl__p { display: block; flex: 0 0 86%; min-height: 0; padding: 0; border: 0; background: var(--char); scroll-snap-align: center; }
	.pl__img { display: block; height: 200px; overflow: hidden; }
	.pl__img img { width: 100%; height: 100%; object-fit: cover; }
	.js .pl__b { opacity: 1; }
	.pl__b { max-width: none; padding: 18px 18px 22px; }
	.pl__t { margin-top: 8px; font-size: 19px; }
	.pl__x { margin-top: 10px; font-size: 14.5px; line-height: 1.9; }
	.pl .clipb { color: #fff; }
	.sta__g { grid-template-columns: 1fr 1fr; }
	.sta__g > div { padding: 18px 0 16px 16px; }
	.sta__g > div:first-child { grid-column: 1 / -1; padding-left: 0; border-bottom: 1px solid var(--line); }
	.sta__g > div:nth-child(2) { padding-left: 0; border-left: 0; }
	.sta small { font-size: 12px; letter-spacing: .04em; }
	.sta p { margin-top: 2px; font-size: 14px; }
	.sta b { font-size: 28px; }
	.sta__g > div:first-child b { font-size: 38px; }
	.mer { padding: 54px 0; background: var(--paper2); }
	.mer__g { display: flex; gap: 10px; margin-top: 24px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.mer__g::-webkit-scrollbar { display: none; }
	.mr, .mr--rev { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 86%; background: #fff; scroll-snap-align: center; }
	.mr + .mr { margin-top: 0; }
	.mr__img { flex-shrink: 0; min-height: 0; height: 130px; }
	.mr__b, .mr--rev .mr__b { align-self: auto; padding: 16px 18px 20px; }
	.mr__n { padding-bottom: 0; border: 0; }
	.mr__n b { font-size: 30px; font-weight: 400; }
	.mr__n span { font-size: 12.5px; }
	.mr__t { margin-top: 10px; font-size: 18px; }
	.mr .txt { margin-top: 8px; font-size: 14px; line-height: 1.8; }
	.mr__l { margin-top: 12px; }
	.mr__l div { grid-template-columns: 36px 1fr; gap: 8px; padding: 6px 0; }
	.mr__l dt { font-size: 12.5px; }
	.mr__l dd { font-size: 13.5px; }
	.price { padding: 60px 0 64px; }
	.price__bg { width: 100%; height: 300px; object-position: 70% 40%; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
	.pr { padding: 20px 20px 10px; }
	.pr__p b { font-size: 42px; }
	.flw { grid-template-columns: 1fr 1fr; gap: 24px 12px; margin-top: 22px; }
	.flw b { margin-top: 14px; padding-top: 12px; }
	.flw b::before { right: -12px; transition-delay: calc(var(--i) * .3s); }
	.flw li:nth-child(2n) b::before { right: 0; }
	.flw h3 { margin-top: 2px; font-size: 16px; }
	.flw p { margin-top: 4px; font-size: 13.5px; line-height: 1.75; }
	.gr { display: block; }
	.gr__pic { position: static; height: 210px; }
	.gr__b { max-width: none; padding: 40px var(--gutter) 54px; }
	.gr__q br { display: inline; }
	.gr__q { margin-top: 20px; font-size: 25px; }
	.gr__s { margin-top: 8px; font-size: 14.5px; letter-spacing: 0; }
	.gr__l { margin-top: 22px; padding-top: 20px; }
	.gr__l h3 { font-size: 18px; }
	.gr__l p { margin-top: 6px; font-size: 14.5px; line-height: 1.95; }
	.gr__l p + h3 { margin-top: 20px; }
	.gr__sig { margin-top: 28px; }
	.gr__sig small { font-size: 12.5px; }
	.gr__sig b { font-size: 24px; }
	.hs { padding: 56px 0 60px; }
	.hs__g { display: block; }
	.hs__l { display: contents; }
	.hs__now { position: sticky; z-index: 3; top: var(--head); margin: 18px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter) 0; background: var(--ink); display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
	.hs__yr { font-size: 52px; }
	.hs__wa { margin-top: 0; font-size: 13px; }
	.hs__bar { grid-column: 1 / -1; margin-top: 10px; }
	.hs__r { grid-template-columns: 58px 1fr; gap: 0 12px; padding: 16px 0; }
	.hs__r b { grid-row: 1 / span 2; font-size: 17px; }
	.hs__r span { font-size: 12px; }
	.hs__r p { font-size: 14.5px; line-height: 1.75; }
}

/* ---------- 認定制度：大きな言葉・3つの条件・修了証・設備の切り替え ---------- */
.ab { padding: 110px 0 90px; }
.ab__g { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: start; }
.ab__h { margin-top: 18px; font-size: clamp(30px, 3.3vw, 46px); font-weight: 400; line-height: 1.45; letter-spacing: .06em; color: #111; }
.ab__x { font-size: 19px; line-height: 2.1; letter-spacing: .04em; }
.ab3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ab3__p { position: relative; height: clamp(460px, 44vw, 640px); overflow: hidden; background: #000; color: #fff; }
.ab3__p img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.ab3__p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 46%); }
.ab3__b { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 30px; padding-top: 16px; }
.ab3__b::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #fff; transform-origin: left; transition: transform 1.2s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--i) * .18s + .2s); }
.js .ab3__p:not(.in) .ab3__b::before { transform: scaleX(0); }
.ab3__n { display: flex; align-items: baseline; gap: 14px; font-family: var(--en); font-weight: 500; font-size: 13px; letter-spacing: .16em; }
.ab3__n b { font-weight: 500; }
.ab3__t { margin-top: 12px; font-size: clamp(24px, 2.3vw, 32px); font-weight: 400; line-height: 1.4; letter-spacing: .06em; }
.ab3__x { margin-top: 6px; font-size: 15px; line-height: 1.7; letter-spacing: .04em; color: #e4e4e7; }
.qc { display: grid; grid-template-columns: 7fr 5fr; margin-top: 4px; background: var(--paper2); }
.qc__img { position: relative; min-height: 660px; overflow: hidden; background: #000; }
.qc__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.qc__b { align-self: center; padding: 70px max(var(--gutter), calc((100vw - 1240px) / 2)) 70px 70px; }
/* 修了証は元の画像が小さいので、大きく引き伸ばさず文章の下に小さめに置く */
.qc__cert { display: flex; align-items: center; gap: 22px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line2); }
.qc__cert img { flex-shrink: 0; width: 220px; padding: 12px; background: #fff; }
.qc__cert figcaption { font-size: 13px; line-height: 1.7; letter-spacing: .04em; color: #555; }
/* 設備：項目を選ぶと写真と説明が切り替わる。画面に入っている間は順に送る */
.ex { display: grid; grid-template-columns: 62% 1fr; margin-top: 50px; }
.ex__stage { position: relative; min-height: clamp(520px, 44vw, 680px); overflow: hidden; background: #000; }
.ex__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.ex__pic.is-on { opacity: 1; animation: settle 7s ease-out both; }
.ex__list { padding: 48px max(var(--gutter), calc((100vw - 1240px) / 2)) 0 56px; }
.ex__i { position: relative; border-top: 1px solid var(--line); }
.ex__i:last-child { border-bottom: 1px solid var(--line); }
.ex__img { display: none; }
.ex__t { font: inherit; }
.ex__h { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 20px 0; text-align: left; color: #fff; transition: color .3s; }
.ex__h i { font-family: var(--en); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--mute); }
.ex__h span { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.js .ex__i:not(.is-on) .ex__h { color: var(--mute); }
.ex__d { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.7, 0, .2, 1); }
.js .ex__i:not(.is-on) .ex__d { grid-template-rows: 0fr; }
.ex__d > div { overflow: hidden; }
.ex__x { padding: 0 0 22px 34px; font-size: 15px; line-height: 1.9; color: #c6c6cc; }
.ex__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; }
@keyframes exbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ex__i.is-on .ex__bar { animation: exbar 7s linear both paused; }
.ex.is-run .ex__i.is-on .ex__bar { animation-play-state: running; }
.ex:hover .ex__i.is-on .ex__bar { animation-play-state: paused; }
.ex.is-man .ex__i.is-on .ex__bar { animation: none; transform: scaleX(1); }
@media (hover: hover) { .js .ex__i:not(.is-on) .ex__h:hover { color: #fff; } }
@media (max-width: 900px) {
	.ab { padding: 54px 0 34px; }
	.ab__g { grid-template-columns: 1fr; gap: 14px; }
	.ab__h { margin-top: 8px; font-size: 25px; }
	.ab__x { font-size: 15.5px; line-height: 2; letter-spacing: .02em; }
	.ab3 { display: flex; gap: 8px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ab3::-webkit-scrollbar { display: none; }
	.ab3__p { flex: 0 0 78%; height: 340px; scroll-snap-align: center; }
	.ab3__b { left: 20px; right: 20px; bottom: 20px; padding-top: 12px; }
	.ab3__t { margin-top: 8px; font-size: 22px; }
	.ab3__x { font-size: 13.5px; letter-spacing: .02em; }
	.qc { grid-template-columns: 1fr; margin-top: 54px; }
	.qc__img { min-height: 0; height: 200px; }
	.qc__cert { gap: 14px; margin-top: 18px; padding-top: 18px; }
	.qc__cert img { width: 170px; padding: 8px; }
	.qc__cert figcaption { font-size: 12px; }
	.qc__b { padding: 36px var(--gutter) 48px; }
	.ex { display: block; margin-top: 28px; }
	.ex__stage { display: none; }
	.ex__list { display: flex; gap: 10px; padding: 0 var(--gutter); align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ex__list::-webkit-scrollbar { display: none; }
	.ex__i, .ex__i:last-child { flex: 0 0 84%; scroll-snap-align: center; border: 0; background: var(--char); }
	.ex__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
	.ex__img img { width: 100%; height: 100%; object-fit: cover; }
	.ex__h, .js .ex__i:not(.is-on) .ex__h { flex-direction: column; gap: 4px; padding: 18px 20px 8px; color: #fff; pointer-events: none; }
	.ex__h span { font-size: 17px; }
	.ex__d, .js .ex__i:not(.is-on) .ex__d { grid-template-rows: 1fr; }
	.ex__x { padding: 0 20px 22px; font-size: 14px; line-height: 1.85; }
	.ex__bar { display: none; }
}

/* ---------- スマホ：縦に長くしない。同じ形が続くところは横送り ---------- */
.rowg { display: contents; }
.faqm { display: none; }
@media (max-width: 900px) {
	.ph { height: 280px; min-height: 0; }
	.ph--long { height: 375px; }
	.ph--plain { height: auto; }
	/* トップの2段組は横送りのカードに */
	.rowg { display: flex; gap: 10px; padding: 54px var(--gutter) 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.rowg::-webkit-scrollbar { display: none; }
	.rowg + .works, .rowg + .band { margin-top: 54px; }
	.rowg .row { display: flex; flex-direction: column; flex: 0 0 86%; gap: 0; padding: 0 0 18px; background: var(--paper2); scroll-snap-align: center; }
	.rowg .row__txt { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 0; }
	.rowg .row__txt > div:last-child { margin-top: auto; }
	.rowg .row__img { flex: 0 0 180px; order: -1; width: 100%; height: 180px; margin: 0; }
	.rowg .since { display: none; }
	.row .txt { display: -webkit-box; margin-top: 10px; overflow: hidden; font-size: 14.5px; line-height: 1.9; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
	.rowg .row .btn { width: 100%; margin-top: 14px; }
	.row:not(.rowg .row) .row__img { height: 200px; }
	.strip { display: flex; height: 100px; overflow-x: auto; scrollbar-width: none; }
	.strip::-webkit-scrollbar { display: none; }
	.strip img { flex: 0 0 150px; width: 150px; height: 100px; aspect-ratio: auto; }
	.band { height: 150px; }
	.band__in { padding-top: 26px; }
	.band__sub { margin-top: 6px; font-size: 13px; }
	/* 会社情報 */
	.intro { padding: 48px 0; }
	.intro__g { gap: 20px; }
	.intro__img { height: 190px; }
	.gr__pic { height: 170px; }
	.phil__g { display: flex; gap: 10px; margin: 26px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.phil__g::-webkit-scrollbar { display: none; }
	.phil__g > div { flex: 0 0 86%; padding: 18px; border: 0; background: var(--char); scroll-snap-align: center; }
	.phil__g p { font-size: 14px; line-height: 1.85; }
	.hs__now { position: static; margin: 14px 0 0; padding: 0; }
	.hs__list { display: flex; gap: 10px; margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.hs__list::-webkit-scrollbar { display: none; }
	.hs__r { display: block; flex: 0 0 78%; padding: 16px 18px; border: 0; background: var(--char); scroll-snap-align: center; }
	.hs__r::after, .hs__r span { display: none; }
	.js .hs__r { opacity: 1; }
	.hs__r p { margin-top: 6px; font-size: 14px; }
	/* 車検 */
	.mr__t { margin-top: 8px; font-size: 16.5px; }
	.price__g { display: flex; gap: 10px; max-width: none; margin: 24px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.price__g::-webkit-scrollbar { display: none; }
	.pr { flex: 0 0 86%; scroll-snap-align: center; }
	.flw { display: flex; gap: 12px; margin: 22px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.flw::-webkit-scrollbar { display: none; }
	.flw li { flex: 0 0 66%; scroll-snap-align: center; }
	.flw li:nth-child(2n) b::before { right: -12px; }
	.flw li:last-child b::before { right: 0; }
	.js .faq:not(.is-all) .faq__i:nth-child(n+6) { display: none; }
	.faqm { display: inline-block; justify-self: start; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 500; letter-spacing: .04em; }
	/* フッター */
	.gf__ctain { gap: 16px; padding-top: 38px; padding-bottom: 32px; }
	.gf__h { font-size: 24px; }
	.gf__sub, .gf__lead { display: none; }
	.gf__btns { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
	.gf__btns .btn { gap: 8px; font-size: 14px; letter-spacing: .03em; }
	.gf__info { gap: 18px; padding-top: 26px; padding-bottom: 18px; }
	.gf__cats { gap: 0 18px; }
	.gf__cat, .gf__cat ul, .gf__cat:last-child ul { display: contents; }
	.gf__catt { display: none; }
	.gf__cat a { padding: 3px 0; font-size: 13.5px; }
	/* 記事下の関連記事は横送りに */
	.single-rel__list { display: flex; gap: 10px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.single-rel__list::-webkit-scrollbar { display: none; }
	.single-rel__list > * { flex: 0 0 66%; scroll-snap-align: start; }
}

/* ---------- スマホ：カードを輪のように回す（横に動かすと奥へ回り込む） ---------- */
.orbd { display: none; }
@media (max-width: 900px) {
	.orb.is-orb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; perspective: 900px; scroll-snap-type: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
	.orb.is-orb > * { grid-area: 1 / 1; justify-self: center; width: 80%; flex: none; will-change: transform; }
	.orb.is-orb > :not(.is-front) { cursor: pointer; }
	.orb.is-orb > :not(.is-front) * { pointer-events: none; }
	.cards3.orb.is-orb { margin-bottom: 0; }
	.cards3.orb.is-orb > * { padding-bottom: 12px; background: #fff; }
	.orbd { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
	.cards3 + .orbd { margin-bottom: 40px; }
	.orbd button { position: relative; width: 28px; height: 28px; }
	.orbd button::after { content: ""; position: absolute; left: 4px; right: 4px; top: 13px; height: 2px; background: #c9c9ce; transition: background-color .3s; }
	.orbd button.is-on::after { background: #111; }
}

/* =========================================================
   ここから WordPress で足した分（2026-11 本番へ移すとき）
   ========================================================= */
/* 記事の部品（kit-theme.css・page-single.css）が使う文字の指定。前は main.css にあった。英字も本文の書体にする（Archivo の幅広だと番号が折り返すため・デモと同じ） */
:root { --gin: var(--ja); --mont: var(--ja); --lato: var(--ja); --w-l: 400; --w-m: 500; --w-b: 700; }

.gh__h1 { display: flex; margin: 0; font-size: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* お問い合わせ：入力の誤りと迷惑送信よけの欄 */
.fm__alert { margin-bottom: 24px; padding: 14px 18px; background: var(--paper2); font-size: 14.5px; color: #8a1c1c; }
.f.is-error input, .f.is-error textarea { border-color: #8a1c1c; }
.f__err { display: block; margin-top: 6px; font-size: 13px; color: #8a1c1c; }
.fm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ctl p { white-space: normal; }

/* 一覧：修理実績の説明・記事が無いとき */
.lst__lead { max-width: 760px; margin-top: 28px; font-size: 15.5px; line-height: 1.9; color: #444; }
.lst__none { margin-top: 40px; font-size: 15.5px; }
.js-more.is-busy { opacity: .5; pointer-events: none; }

/* 固定ページの下：関係する修理実績とコラム */
.mm-plinks .cards3 { margin-bottom: 0; }
.mm-plinks__list { margin-top: 40px; }
.mm-plinks__list time { width: 90px; font-size: 12px; letter-spacing: .14em; }

/* /repair/：基本情報・実績・設備・保険・流れ */
.sec .works__head .txt { max-width: 640px; margin-top: 14px; }
/* 見出しが長いので PC は少し小さく、行の途中で折り返さない（「に」だけが次の行に落ちていた） */
.ab__h--s { font-size: clamp(28px, 2.6vw, 38px); white-space: nowrap; }
.sec--facts .split > * { min-width: 0; }
.sec--facts .dl__r { grid-template-columns: 170px minmax(0, 1fr); }
.sec--facts .dl__r dd { word-break: auto-phrase; overflow-wrap: anywhere; }
.lst--rp { margin-top: 0; }
.eq4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.eq4__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--char2); }
.eq4__img img { width: 100%; height: 100%; object-fit: cover; }
.eq4 h3 { margin-top: 16px; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.eq4 p { margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: #c6c6cc; }
.eq4__more, .pay3__more { margin-top: 40px; }
.pay3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.pay3 > div { padding-top: 18px; border-top: 1px solid var(--line2); }
.pay3__n { font-family: var(--en); font-weight: 500; font-size: 13px; letter-spacing: .16em; color: #777; }
.pay3 h3 { margin-top: 8px; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: #111; }
.pay3 p:last-child { margin-top: 10px; font-size: 15.5px; line-height: 1.9; }
.flw--txt b { margin-top: 0; }
.js .eq4__img img { opacity: 0; transition: opacity .6s; }
.js .eq4__img.in img { opacity: 1; }

@media (max-width: 900px) {
	.lst__lead { margin-top: 16px; font-size: 14px; line-height: 1.85; }
	.mm-plinks__list { margin-top: 20px; }
	.mm-plinks__list .news__item { display: block; }
	.sec--facts .dl__r { grid-template-columns: 96px minmax(0, 1fr); }
	.ab__h--s { font-size: 25px; }
	/* 記事キットの浮く相談バーは、下の帯（電話・LINE・お問い合わせ 58px）の上に出す（プラグインの設定の高さより優先） */
	body .tzk.tzk-bar { --tzk-bar-b: 72px !important; }
	.mm-plinks__list time { display: block; width: auto; font-size: 11px; }
	.sec .works__head .txt { margin-top: 10px; }
	.eq4 { display: flex; gap: 10px; margin: 24px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.eq4::-webkit-scrollbar { display: none; }
	.eq4__i { flex: 0 0 72%; scroll-snap-align: center; }
	.eq4 h3 { margin-top: 10px; font-size: 15.5px; }
	.eq4 p { font-size: 13.5px; line-height: 1.75; }
	.eq4__more, .pay3__more { margin-top: 24px; }
	.pay3 { display: flex; gap: 10px; margin: 22px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.pay3::-webkit-scrollbar { display: none; }
	.pay3 > div { flex: 0 0 82%; padding: 16px 18px 18px; border: 0; background: var(--paper2); scroll-snap-align: center; }
	.pay3 h3 { font-size: 16.5px; }
	.pay3 p:last-child { margin-top: 6px; font-size: 14px; line-height: 1.85; }
}

/* 記事の「修理の内容」：スマホでは車種を上・残りを2列に（前はスマホの指定が無く文字がはみ出していた） */
@media (max-width: 600px) {
	.mm-wk__grid { grid-template-columns: minmax(0, 1fr) !important; }
	.mm-wk__cell { padding: 14px 16px !important; }
	.mm-wk__cell.is-model dd { font-size: 20px !important; }
	.mm-wk__cell dd { font-size: 14px !important; overflow-wrap: anywhere; }
}

/* WordPress にログイン中は上に管理バー（黒い帯）が出るので、その分だけヘッダーとスマホのメニューを下げる（下げないとヘッダーが帯に隠れ、写真の上に白い隙間が出る）。スマホでも帯を固定にして高さをそろえる */
.admin-bar .gh, .admin-bar .sm { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { #wpadminbar { position: fixed !important; } }