/* リニューアル用。全ページ共通の土台と、新しいトップ。
   色は下の変数だけで管理する(黒 / 今の紺 #004466 を切り替え) */
:root,
html[data-su-theme="black"] {
  --su-bg: #121315;
  --su-bg2: #1a1c1f;
  --su-bg3: #24272b;
  --su-line: rgba(255, 255, 255, .13);
  --su-text: #eceef0;
  --su-muted: #a9b0b8;
  --su-accent: #f08200;
  --su-accent-text: #f7a13c;
  --su-on-accent: #141414;
  --su-head: #0c0d0e;
  --su-head-text: #ffffff;
  --su-head-muted: #a9b0b8;
  --su-headbtn: #f08200;
  --su-headbtn-text: #141414;
  --su-foot: #0c0d0e;
  --su-foot-text: #d6d9dd;
}
html[data-su-theme="cream"] {
  /* 標準(11/7 ワタルさん):真っ白はまぶしいので、軽いベージュ。帯(ヘッダー・フッター)は紺(11/8 ワタルさん「今のヘッダーの色もデフォルトに」) */
  --su-bg: #f7f3ea;
  --su-bg2: #efe9dc;
  --su-bg3: #e6dece;
  --su-line: #ddd3c0;
  --su-text: #2b2722;
  --su-muted: #6b6257;
  --su-accent: #f08200;
  --su-accent-text: #b45f00;
  --su-on-accent: #1b1b1b;
  --su-head: #0d2c4a;
  --su-head-text: #ffffff;
  --su-head-muted: #b6c0c9;
  --su-headbtn: #f08200;
  --su-headbtn-text: #1b1b1b;
  --su-foot: #0d2c4a;
  --su-foot-text: #dbdfe4;
}
html[data-su-theme="teal"] {
  /* 深い青緑。帯(ヘッダー・フッター)はさらに濃い青緑(11/7 夜に一度標準にしたが、同じ夜にベージュへ戻した) */
  --su-bg: #0f3a3d;
  --su-bg2: #1b4447;
  --su-bg3: #274e50;
  --su-line: rgba(255, 255, 255, .14);
  --su-text: #eceef0;
  --su-muted: #b3b9c0;
  --su-accent: #f08200;
  --su-accent-text: #f7a13c;
  --su-on-accent: #141414;
  --su-head: #0b292b;
  --su-head-text: #ffffff;
  --su-head-muted: #b3b9c0;
  --su-headbtn: #f08200;
  --su-headbtn-text: #141414;
  --su-foot: #0b292b;
  --su-foot-text: #d6d9dd;
}
html[data-su-theme="blue"] {
  --su-bg: #ffffff;
  --su-bg2: #f1f6f8;
  --su-bg3: #e3edf2;
  --su-line: #d3dee4;
  --su-text: #26323b;
  --su-muted: #566772;
  --su-accent: #004466;
  --su-accent-text: #004466;
  --su-on-accent: #ffffff;
  --su-head: #004466;
  --su-head-text: #ffffff;
  --su-head-muted: #c7dbe5;
  --su-headbtn: #ffffff;
  --su-headbtn-text: #004466;
  --su-foot: #004466;
  --su-foot-text: #e4eff4;
}
:root {
  --su-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --su-en: "Oswald", "Noto Sans JP", sans-serif;
  --su-w: 1180px;
  --su-header-h: 76px;
}
html { scroll-padding-top: calc(var(--su-header-h) + 12px); }
body.su-noscroll { overflow: hidden; }

/* ===== ヘッダー ===== */
.su-header, .su-header *, .su-drawer, .su-drawer *, .su-footer, .su-footer *, .su-switch, .su-totop, .su-main, .su-main * { box-sizing: border-box; }
.su-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--su-head); color: var(--su-head-text);
  font-family: var(--su-ja); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.su-header__in {
  display: flex; align-items: center; gap: 20px;
  width: min(100% - 32px, 1320px); min-height: var(--su-header-h); margin-inline: auto;
}
.su-header a { color: inherit; text-decoration: none; font-weight: 500; }
.su-header ul { list-style: none; margin: 0; padding: 0; }
.su-brand { display: block; flex: none; line-height: 1.2; }
.su-header a.su-brand:hover { text-decoration: none; }
.su-brand__name { display: block; font-family: var(--su-en); font-size: 28px; font-weight: 600; letter-spacing: .02em; }
.su-brand__name small { display: block; font-family: var(--su-ja); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.su-brand__old { display: block; margin-top: 2px; font-size: 10px; color: var(--su-head-muted); letter-spacing: .04em; }
.su-nav { flex: 1; min-width: 0; }
.su-nav__list { display: flex; justify-content: center; align-items: center; gap: 2px; }
.su-nav__item > a, .su-nav__btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  color: inherit; font: 500 14px/1.4 var(--su-ja); white-space: nowrap;
}
.su-nav__item > a:hover, .su-nav__btn:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.su-nav__caret { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.su-nav__item--has { position: relative; }
.su-nav__item--has.is-open .su-nav__caret { margin-top: 3px; transform: rotate(225deg); }
.su-jobs {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; width: 820px; padding: 14px;
  background: var(--su-bg); color: var(--su-text); border: 1px solid var(--su-line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.su-nav__item--has.is-open .su-jobs { display: block; animation: su-menu-in .18s ease-out; }
@keyframes su-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.su-jobs__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 12px 14px; background: var(--su-bg2); border-radius: 10px; }
.su-jobs__foot p { margin: 0; color: var(--su-muted); font-size: 13px; line-height: 1.6; }
.su-header .su-jobs__foot a.su-btn { flex: none; min-height: 40px; padding: 6px 18px; color: var(--su-on-accent); font-size: 14px; font-weight: 700; }

/* 開いたときの仕事の一覧(ドロップダウンとスマホのメニューで共通) */
.su-header .su-menu, .su-drawer .su-menu, .su-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; list-style: none; margin: 0; padding: 0; }
.su-menu a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 8px; border: 1px solid transparent; border-radius: 10px; color: inherit; text-decoration: none; transition: background .12s, border-color .12s; }
.su-menu a:not(.is-soon):hover { background: var(--su-bg3); border-color: var(--su-line); text-decoration: none; }
.su-menu__thumb { display: flex; flex: none; align-items: center; justify-content: center; width: 76px; height: 57px; overflow: hidden; background: var(--su-bg3); border-radius: 8px; color: var(--su-accent-text); font: 600 18px/1 var(--su-en); }
.su-menu__thumb img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.su-menu__body { display: block; min-width: 0; line-height: 1.45; }
.su-menu__body strong { display: block; font-size: 14px; font-weight: 700; }
.su-menu__body small { display: block; margin-top: 2px; color: var(--su-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.su-menu .is-main strong { color: var(--su-accent-text); }
.su-header__cta { display: flex; flex: none; align-items: center; gap: 14px; }
.su-tel { display: block; font-family: var(--su-en); font-size: 21px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.su-tel__label { display: block; font-family: var(--su-ja); font-size: 10px; font-weight: 500; color: var(--su-head-muted); }
.su-header a.su-tel { font-weight: 600; }

/* 古い style.css の電話リンク(青・下線)に負けないように */
.su-header a[href^="tel:"], .su-footer a[href^="tel:"], .su-footer a[href^="mailto:"], .su-main a[href^="tel:"] { color: inherit !important; text-decoration: none !important; }

/* ===== ボタン ===== */
a.su-btn, .su-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px;
  background: var(--su-accent); color: var(--su-on-accent); border: 2px solid var(--su-accent); border-radius: 4px;
  font: 700 15px/1.4 var(--su-ja); text-align: center; text-decoration: none; transition: opacity .15s;
}
a.su-btn:hover { opacity: .85; text-decoration: none; }
a.su-btn--ghost { background: transparent; color: var(--su-accent-text); border-color: currentColor; }
.su-header a.su-btn--head { min-height: 42px; padding: 8px 18px; background: var(--su-headbtn); border-color: var(--su-headbtn); color: var(--su-headbtn-text); font-size: 14px; font-weight: 700; white-space: nowrap; }
a.su-btn--wide { display: flex; width: 100%; margin-top: 10px; }

/* ===== スマホのメニュー ===== */
.su-burger { display: none; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 11px 9px; background: none; border: 0; cursor: pointer; }
.su-burger span { display: block; height: 2px; margin-bottom: 7px; background: var(--su-head-text); transition: transform .15s, opacity .15s; }
.su-burger span:last-child { margin-bottom: 0; }
.su-burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.su-burger.is-open span:nth-child(2) { opacity: 0; }
.su-burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.su-drawer {
  position: fixed; top: var(--su-header-h); right: 0; bottom: 0; left: 0; z-index: 130; overflow-y: auto; padding: 18px 16px 0;
  background: var(--su-bg); color: var(--su-text); font-family: var(--su-ja); animation: su-menu-in .18s ease-out;
}
.su-drawer[hidden] { display: none; }
.su-drawer > * { max-width: 900px; margin-right: auto; margin-left: auto; }
.su-drawer ul { list-style: none; margin: 0; padding: 0; }
.su-drawer a { color: inherit; text-decoration: none; font-weight: 500; }
.su-drawer__head { margin-top: 0; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.su-drawer__head span { display: block; color: var(--su-accent-text); font: 500 12px/1.4 var(--su-en); letter-spacing: .18em; }
.su-drawer ul.su-menu { margin: 0 auto 22px; }
.su-drawer ul.su-drawer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 auto 18px; }
.su-drawer__links a { display: block; padding: 12px 14px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 10px; font-size: 14px; text-align: center; }
.su-drawer__links a:hover { border-color: var(--su-accent); }
.su-drawer__cta { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 14px; background: var(--su-bg); }
.su-drawer__cta a.su-btn { padding: 8px 6px; }
.su-drawer a.su-btn { color: var(--su-on-accent); font-weight: 700; }
.su-drawer a.su-btn--ghost { color: var(--su-accent-text); }
body.su-noscroll .su-color, body.su-noscroll .su-totop { display: none; }
a.is-soon { opacity: .62; cursor: default; }
a.is-soon em { margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; font-style: normal; font-weight: 500; white-space: nowrap; }

/* ===== 色の切り替え(左下・小さく。確認用。本番で残すかは後で決める) =====
   1段目=背景(黒 / 紺 + パレット)、2段目=メインカラー(3色 + パレット) */
.su-color { position: fixed; left: 12px; bottom: 12px; z-index: 120; font: 500 11px/1.3 var(--su-ja); color: #fff; }
.su-color__toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: rgba(30, 32, 36, .9); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; cursor: pointer; font: inherit;
}
.su-color__toggle i { width: 10px; height: 10px; border-radius: 50%; background: var(--su-accent); border: 1px solid #fff; }
.su-color__panel { display: none; width: max-content; margin-bottom: 6px; padding: 7px 10px; background: rgba(30, 32, 36, .94); border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; }
.su-color.is-open .su-color__panel { display: block; }
.su-color__panel { max-width: calc(100vw - 24px); }
.su-color__row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 3px 0; }
.su-color__row > span { margin-right: 2px; color: #cfd3d8; white-space: nowrap; min-width: 3.2em; }
.su-color__row button[data-su-accent-btn], .su-color__row button[data-su-theme-btn], .su-color__pick { flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; cursor: pointer; }
.su-color__row button[data-su-accent-btn], .su-color__row button[data-su-theme-btn] { background: var(--c); }
.su-color__row button.is-on { outline: 2px solid #fff; outline-offset: 2px; }
.su-color__pick { position: relative; display: inline-block; margin: 0; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.su-color__pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.su-color__reset { margin-left: 4px; background: none; border: 0; color: #cfd3d8; font: inherit; text-decoration: underline; cursor: pointer; }
.su-totop {
  position: fixed; right: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--su-accent); color: var(--su-on-accent); border-radius: 50%; font: 700 18px/1 var(--su-ja); text-decoration: none;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.su-totop:hover { text-decoration: none; }
.su-totop.is-show { opacity: 1; pointer-events: auto; }

/* ===== 新しいトップ ===== */
body.home { background: var(--su-bg); color: var(--su-text); }
.su-main { font-family: var(--su-ja); font-size: 16px; line-height: 1.9; letter-spacing: .03em; color: var(--su-text); background: var(--su-bg); overflow: hidden; }
.su-main img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; }
.su-main h1, .su-main h2, .su-main h3 { margin: 0; line-height: 1.45; font-weight: 700; }
.su-main p { margin: 0 0 1.1em; }
.su-main ul, .su-main ol { margin: 0; padding: 0; list-style: none; }
.su-main a { color: inherit; text-decoration: none; }
.su-wrap { width: min(100% - 48px, var(--su-w)); margin-inline: auto; }
.su-sp { display: none; }
.su-center { text-align: center; }
.su-sec { padding: 92px 0; }
.su-sec--alt { background: var(--su-bg2); }
.su-head { margin-bottom: 44px; text-align: center; }
.su-head--left { margin-bottom: 26px; text-align: left; }
.su-main .su-en { margin: 0 0 4px; color: var(--su-accent-text); font-family: var(--su-en); font-size: 15px; font-weight: 500; letter-spacing: .18em; }
.su-head h2 { font-size: clamp(25px, 3.1vw, 36px); font-weight: 900; }

/* 見出し */
.su-hero { padding: 72px 0 80px; background: var(--su-bg); }
.su-hero__in { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 56px; }
.su-main .su-hero__eyebrow { margin-bottom: 18px; color: var(--su-muted); font-size: 14px; font-weight: 500; }
.su-main .su-hero__title { font-size: clamp(27px, 4.2vw, 52px); font-weight: 900; line-height: 1.32; }
.su-hero__title span { display: block; margin-bottom: 10px; color: var(--su-accent-text); }
.su-main .su-hero__lead { margin: 26px 0 30px; font-size: 16px; }
.su-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.su-main .su-hero__btns a.su-btn { color: var(--su-on-accent); }
.su-main .su-hero__btns a.su-btn--ghost { color: var(--su-accent-text); }
.su-hero__photo { margin: 0; overflow: hidden; border-radius: 6px; }
.su-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 実績の帯 */
.su-strip { padding: 38px 0 32px; background: var(--su-accent); color: var(--su-on-accent); }
.su-strip__list { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.su-strip__list li { display: flex; align-items: center; justify-content: center; padding: 4px 18px; border-left: 1px solid currentColor; font-size: clamp(17px, 1.9vw, 23px); line-height: 1.45; }
.su-strip__list li:first-child { border-left: 0; }
.su-main .su-strip__text { max-width: 880px; margin: 22px auto 0; font-size: 14px; font-weight: 500; text-align: center; }

/* お悩み */
.su-worries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 920px; margin: 0 auto !important; }
.su-worries li { position: relative; padding: 16px 18px 16px 48px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 4px; font-weight: 500; line-height: 1.6; }
.su-worries li::before { content: ""; position: absolute; top: 20px; left: 19px; width: 15px; height: 8px; border-left: 3px solid var(--su-accent-text); border-bottom: 3px solid var(--su-accent-text); transform: rotate(-45deg); }
.su-main .su-answer { margin: 34px 0 0; font-size: clamp(17px, 2vw, 21px); font-weight: 700; text-align: center; line-height: 1.7; }

/* 代表あいさつ */
.su-greet { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 56px; }
.su-greet:not(:has(.su-greet__photo)) { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; } /* 11/9 写真を外している間 */
.su-greet__photo { position: sticky; top: calc(var(--su-header-h) + 20px); margin: 0; overflow: hidden; border-radius: 6px; }
.su-greet__photo img { width: 100%; }
.su-main .su-greet__sign { margin: 26px 0 0; font-weight: 500; }
.su-greet__sign small { display: block; color: var(--su-muted); font-size: 13px; }
.su-greet__sign b { display: block; margin-top: 3px; font-size: 21px; }

/* 理由 */
.su-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.su-reasons li { padding: 30px 26px 24px; background: var(--su-bg2); border-top: 3px solid var(--su-accent); border-radius: 0 0 4px 4px; }
.su-num { display: block; margin-bottom: 8px; color: var(--su-accent-text); font-family: var(--su-en); font-size: 34px; font-weight: 500; line-height: 1; }
.su-main .su-reasons h3 { margin-bottom: 10px; font-size: 20px; }
.su-main .su-reasons p { margin: 0; font-size: 15px; }

/* 仕事のカード */
.su-jobcards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.su-jobcard { grid-column: span 2; }
.su-jobcard > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 5px; transition: border-color .15s; }
.su-jobcard > a:not(.is-soon):hover { border-color: var(--su-accent); }
.su-main .su-jobcard a.is-soon { opacity: 1; }
.su-jobcard__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.su-jobcard__body { display: block; padding: 16px 18px 18px; }
.su-jobcard__no { display: block; color: var(--su-accent-text); font-family: var(--su-en); font-size: 15px; line-height: 1.3; }
.su-jobcard strong { display: block; margin: 2px 0 6px; font-size: 17px; line-height: 1.5; }
.su-jobcard__text { display: block; color: var(--su-muted); font-size: 14px; line-height: 1.7; }
.su-jobcard em { display: inline-block; margin-top: 8px; padding: 0 7px; border: 1px solid var(--su-line); border-radius: 3px; color: var(--su-muted); font-size: 11px; font-style: normal; }
.su-jobcard.is-main { grid-column: span 3; }
.su-jobcards .su-jobcard.is-main > a { border-color: var(--su-accent); border-width: 2px; }
.su-jobcard.is-main strong { font-size: 21px; color: var(--su-accent-text); }
.su-jobcard.is-noimg > a { justify-content: center; min-height: 170px; }

/* 2種類 */
.su-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 960px; margin-inline: auto; }
.su-two__item { padding: 30px 28px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 5px; }
.su-two__item.is-ours { border: 2px solid var(--su-accent); }
.su-main .su-two__item h3 { margin-bottom: 10px; font-size: 21px; }
.su-main .su-two__item p:last-child { margin: 0; font-size: 15px; }
.su-main .su-two__tag { display: inline-block; margin: 0 0 8px; padding: 1px 10px; background: var(--su-accent); color: var(--su-on-accent); border-radius: 3px; font-size: 12px; font-weight: 700; }

/* 施工事例 */
.su-works { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.su-case { padding: 16px 16px 22px; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 5px; }
.su-case__photo { overflow: hidden; border-radius: 3px; background: var(--su-bg3); }
.su-case__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-case__photo img[hidden] { display: none; }
.su-case__tabs { display: inline-flex; gap: 4px; margin: 12px 0 14px; padding: 4px; background: var(--su-bg3); border-radius: 999px; }
.su-case__tabs button { min-width: 96px; padding: 7px 18px; background: transparent; border: 0; border-radius: 999px; color: var(--su-muted); font: 600 13px/1.3 var(--su-en); letter-spacing: .12em; cursor: pointer; transition: background .15s, color .15s; }
.su-case__tabs button:hover { color: var(--su-text); }
.su-case__tabs button.is-on { background: var(--su-accent); color: var(--su-on-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.su-main .su-case__no { margin: 0; color: var(--su-accent-text); font-family: var(--su-en); font-size: 14px; letter-spacing: .1em; }
.su-main .su-case h3 { margin-bottom: 8px; font-size: 19px; }
.su-main .su-case p:last-child { margin: 0; font-size: 14px; color: var(--su-muted); }

/* 料金 */
.su-prices { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 900px; margin: 0 auto !important; }
.su-prices li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; padding: 18px 20px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 4px; }
.su-prices span { font-weight: 500; line-height: 1.5; }
.su-prices b { color: var(--su-accent-text); font-size: 21px; white-space: nowrap; }
.su-prices small { grid-column: 1 / -1; margin-top: 3px; color: var(--su-muted); font-size: 13px; line-height: 1.5; }
.su-main .su-prices__note { margin: 16px 0 24px; color: var(--su-muted); font-size: 14px; text-align: center; }
.su-main .su-center a.su-btn--ghost { color: var(--su-accent-text); }

/* お問い合わせ */
.su-contact { background: var(--su-bg2); }
.su-contact__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; margin: 24px 0 18px; }
.su-contact__tel { font-family: var(--su-en); font-size: clamp(30px, 4vw, 42px); font-weight: 600; line-height: 1.15; }
.su-contact__tel small { display: block; color: var(--su-muted); font-family: var(--su-ja); font-size: 12px; font-weight: 500; }
.su-main .su-contact__btns a.su-btn { color: var(--su-on-accent); }
.su-main .su-contact__line { margin: 0; color: var(--su-muted); font-size: 14px; text-align: center; }
/* 公式LINE(11/9)。スマホ=ボタン、PC=QR */
.su-main .su-line { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.su-main .su-line__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 28px; background: #06c755; color: #fff; border-radius: 999px; font-weight: 700; text-decoration: none; }
.su-main .su-line__btn:hover { background: #05b34c; text-decoration: none; }
.su-main .su-line__qr { display: none; margin: 0; text-align: center; }
.su-main .su-line__qr img { display: block; width: 120px; height: 120px; margin: 0 auto 4px; background: #fff; padding: 6px; border-radius: 6px; }
.su-main .su-line__qr figcaption { color: var(--su-muted); font-size: 12px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .su-main .su-line__qr { display: block; } }
.su-contact__line em { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--su-line); border-radius: 3px; font-size: 11px; font-style: normal; }

/* ===== フッター ===== */
.su-footer { padding: 54px 0 18px; background: var(--su-foot); color: var(--su-foot-text); font-family: var(--su-ja); font-size: 14px; line-height: 1.8; }
.su-footer__in { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 40px; width: min(100% - 48px, var(--su-w)); margin-inline: auto; }
.su-footer a { color: inherit; font-weight: 400; text-decoration: none; }
.su-footer a:hover { text-decoration: underline; }
.su-footer ul { list-style: none; margin: 0; padding: 0; }
.su-footer p { margin: 0; }
.su-footer address { margin-top: 12px; font-style: normal; }
.su-footer__name { color: #fff; font-family: var(--su-en); font-size: 28px; font-weight: 600; line-height: 1.2; }
.su-footer__name small { display: block; font-family: var(--su-ja); font-size: 12px; font-weight: 700; }
.su-footer__old { font-size: 11px; opacity: .75; }
.su-footer__head { margin-bottom: 8px !important; color: #fff; font-weight: 700; }
.su-footer .is-soon { opacity: .6; }
.su-footer__copy { margin: 34px 0 0 !important; padding: 14px 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12px; text-align: center; }

/* ===== 幅に合わせて ===== */
@media (max-width: 860px) {
  :root { --su-header-h: 66px; }
}
@media (max-width: 900px) {
  .su-hero { padding: 40px 0 48px; }
  .su-hero__in, .su-greet { grid-template-columns: 1fr; gap: 28px; }
  .su-greet__photo { position: static; }
  .su-reasons { grid-template-columns: 1fr; }
  .su-jobcards { grid-template-columns: repeat(2, 1fr); }
  .su-jobcard, .su-jobcard.is-main { grid-column: span 1; }
  .su-footer__in { grid-template-columns: 1fr 1fr; }
  .su-footer__shop { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .su-wrap { width: calc(100% - 32px); }
  .su-sp { display: inline; }
  .su-pc { display: none; }
  .su-sec { padding: 58px 0; }
  .su-head { margin-bottom: 28px; }
  .su-strip__list { grid-template-columns: 1fr; gap: 8px; }
  .su-strip__list li { padding: 2px 0; border-left: 0; }
  .su-worries, .su-reasons, .su-jobcards, .su-two, .su-works, .su-prices, .su-footer__in, .su-drawer .su-menu { grid-template-columns: 1fr; }
  .su-hero__btns a.su-btn { flex: 1 1 100%; }
  .su-footer__in { width: calc(100% - 32px); }
  .su-contact__btns { flex-direction: column; gap: 16px; }
}

/* ===== 下のページ(仕事のページ・よくある質問・店舗案内・お問い合わせ) ===== */
body.su-page { background: var(--su-bg); color: var(--su-text); }
.su-main ul.su-list { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }
.su-main ul.su-list li { margin-bottom: .35em; }
.su-main .su-note { color: var(--su-muted); font-size: 14px; }
.su-main .su-lead { max-width: 820px; margin: 0 auto 36px; text-align: center; font-size: 16px; }
.su-pagetop { padding: 56px 0 48px; background: var(--su-bg2); border-bottom: 1px solid var(--su-line); }
.su-pagetop__in { display: grid; grid-template-columns: 1fr; align-items: center; gap: 40px; }
.su-pagetop.has-photo .su-pagetop__in { grid-template-columns: 1.15fr .85fr; }
.su-main .su-pagetop h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1.35; }
.su-main .su-pagetop__lead { margin: 18px 0 0; font-size: 16px; }
.su-pagetop__photo { margin: 0; overflow: hidden; border-radius: 6px; }
.su-pagetop__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 写真+文章の段(左右交互) */
.su-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; margin-bottom: 64px; }
.su-feature:last-child { margin-bottom: 0; }
.su-feature:nth-child(even) .su-feature__photo { order: 2; }
.su-feature__photo { margin: 0; overflow: hidden; border-radius: 6px; }
.su-feature__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-feature__photo figcaption { padding: 6px 2px 0; color: var(--su-muted); font-size: 12px; }
.su-main .su-feature h3 { margin-bottom: 12px; font-size: 22px; }
.su-main .su-feature p:last-child { margin-bottom: 0; }

/* 写真つきの小さなカード(点検の種類・メニュー) */
.su-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.su-cards--2 { grid-template-columns: repeat(2, 1fr); }
.su-cards--4 { grid-template-columns: repeat(4, 1fr); }
.su-card { overflow: hidden; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; }
.su-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-card__body { padding: 16px 18px 18px; }
.su-main .su-card h3 { margin-bottom: 6px; font-size: 18px; }
.su-main .su-card p { margin: 0; color: var(--su-muted); font-size: 14px; }
.su-card__price { display: block; margin-top: 10px; color: var(--su-accent-text); font-weight: 700; }

/* 流れ(番号つき) */
.su-steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.su-steps li { position: relative; padding: 48px 18px 20px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; font-size: 14px; }
.su-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 12px; left: 16px; color: var(--su-accent-text); font-family: var(--su-en); font-size: 24px; font-weight: 600; line-height: 1; }
.su-steps li strong { display: block; margin-bottom: 6px; font-size: 16px; }
.su-steps--3 { grid-template-columns: repeat(3, 1fr); }
.su-steps--4 { grid-template-columns: repeat(4, 1fr); }
.su-steps li img { width: 100%; margin-top: 12px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

/* 傷みの例(1つの傷み=1枚) */
.su-damage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.su-damage li { overflow: hidden; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; }
.su-damage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-damage__body { padding: 14px 16px 16px; font-size: 14px; }
.su-damage__body strong { display: block; margin-bottom: 4px; font-size: 16px; }
.su-damage__body p { margin: 0; color: var(--su-muted); }
.su-judge { display: inline-block; margin-bottom: 6px; padding: 1px 9px; border: 1px solid var(--su-accent-text); border-radius: 3px; color: var(--su-accent-text); font-size: 12px; font-weight: 700; }

/* 施工事例集(大きい BEFORE/AFTER + 途中の写真) */
.su-casebig { margin-bottom: 72px; padding-bottom: 72px; border-bottom: 1px solid var(--su-line); }
.su-casebig:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.su-casebig__head { margin-bottom: 20px; }
.su-main .su-casebig__head h3 { font-size: 24px; }
.su-casebig__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.su-casebig__ba figure { position: relative; margin: 0; overflow: hidden; border-radius: 6px; }
.su-casebig__ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-casebig__ba figcaption { position: absolute; top: 10px; left: 10px; padding: 3px 12px; background: rgba(0, 0, 0, .7); color: #fff; border-radius: 999px; font-family: var(--su-en); font-size: 12px; letter-spacing: .14em; }
.su-casebig__ba figure.is-after figcaption { background: var(--su-accent); color: var(--su-on-accent); }
.su-casebig__mid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.su-casebig__mid figure { position: relative; margin: 0; overflow: hidden; border-radius: 4px; }
.su-casebig__mid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-casebig__mid figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 3px 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; }
.su-main .su-casebig__text { max-width: 860px; margin: 18px 0 0; font-size: 15px; }
.su-main .su-casebig__text p:last-child { margin-bottom: 0; }
.su-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.su-gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: 5px; }
.su-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-gallery figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 4px 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }

/* 2列の説明(チェックシートなど) */
.su-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; }
.su-sheet { display: block; overflow: hidden; border: 1px solid var(--su-line); border-radius: 6px; background: #fff; transition: border-color .15s; }
.su-sheet:hover { border-color: var(--su-accent); }
.su-sheet img { width: 100%; }
.su-main a.su-btn--pdf::after { content: "PDF"; margin-left: 8px; padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; }

/* 表(説明用) */
.su-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.su-table th, .su-table td { padding: 12px 14px; border: 1px solid var(--su-line); text-align: left; vertical-align: top; }
.su-table th { background: var(--su-bg3); font-weight: 700; white-space: nowrap; }
.su-table img { max-width: 160px; margin: 0 auto; }
.su-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.su-main .su-tablewrap table { min-width: 720px; }

/* 動画 */
.su-video { position: relative; max-width: 640px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--su-bg3); border-radius: 6px; }
.su-video iframe, .su-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.su-video--soon { display: flex; align-items: center; justify-content: center; color: var(--su-muted); border: 1px dashed var(--su-line); }

/* 枠だけ(写真は後で) */
.su-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 1px dashed var(--su-line); border-radius: 6px; color: var(--su-muted); font-size: 14px; }

/* よくある質問 */
.su-faq { max-width: 900px; margin: 0 auto 56px; }
.su-faq details { margin-bottom: 10px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; }
.su-faq summary { position: relative; padding: 16px 48px 16px 52px; font-size: 16px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.su-faq summary::-webkit-details-marker { display: none; }
.su-faq summary::before { content: "Q"; position: absolute; top: 14px; left: 16px; color: var(--su-accent-text); font-family: var(--su-en); font-size: 22px; font-weight: 600; }
.su-faq summary::after { content: ""; position: absolute; top: 22px; right: 20px; width: 8px; height: 8px; border-right: 2px solid var(--su-muted); border-bottom: 2px solid var(--su-muted); transform: rotate(45deg); transition: transform .15s; }
.su-faq details[open] summary::after { top: 26px; transform: rotate(225deg); }
.su-faq__a { position: relative; padding: 0 20px 18px 52px; font-size: 15px; }
.su-faq__a::before { content: "A"; position: absolute; top: -2px; left: 17px; color: var(--su-muted); font-family: var(--su-en); font-size: 20px; font-weight: 600; }
.su-faq__a p:last-child { margin-bottom: 0; }
.su-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 900px; margin: 0 auto 36px; }
.su-body li { padding: 18px 16px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; text-align: center; }
.su-body li b { display: block; font-size: 18px; }
.su-body li span { color: var(--su-muted); font-size: 13px; }
.su-parts { max-width: 960px; margin: 0 auto; }
.su-parts img { width: 100%; margin-bottom: 20px; border-radius: 6px; background: #fff; }
.su-parts ol { columns: 2; column-gap: 32px; margin: 0; padding: 0; font-size: 14px; }
.su-parts ol li { break-inside: avoid; margin-bottom: 8px; padding-left: 0; }
.su-parts ol li strong { color: var(--su-accent-text); }

/* 店舗案内 */
.su-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.su-shop > div { min-width: 0; }
.su-shop .su-table th { width: 32%; white-space: normal; }
/* 11/10 言葉のまとまり(auto-phrase)が幅より長いとき、はみ出さずに途中で折り返す(会社情報の表の右が切れていた) */
.su-table th, .su-table td { overflow-wrap: anywhere; }
@media (max-width: 600px) { .su-shop .su-table th, .su-shop .su-table td { padding: 10px; } }
.su-map { overflow: hidden; border-radius: 6px; background: var(--su-bg3); }
.su-map iframe { display: block; width: 100%; height: 360px; border: 0; }

/* ほかのサービス */
.su-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.su-related a { display: block; height: 100%; padding: 16px 18px; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 6px; }
.su-related a:not(.is-soon):hover { border-color: var(--su-accent); }
.su-related strong { display: block; margin-bottom: 4px; font-size: 16px; }
.su-related span { color: var(--su-muted); font-size: 13px; }
.su-related em { display: inline-block; margin-top: 6px; padding: 0 7px; border: 1px solid var(--su-line); border-radius: 3px; color: var(--su-muted); font-size: 11px; font-style: normal; }

/* お問い合わせフォーム */
.su-form { max-width: 760px; margin: 0 auto; }
.su-form__row { margin-bottom: 20px; }
.su-form label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.su-form label .req { margin-left: 8px; padding: 0 6px; background: var(--su-accent); color: var(--su-on-accent); border-radius: 3px; font-size: 11px; vertical-align: 2px; }
.su-form label .opt { margin-left: 8px; color: var(--su-muted); font-size: 12px; font-weight: 400; }
.su-form input[type="text"], .su-form input[type="email"], .su-form input[type="tel"], .su-form select, .su-form textarea {
  width: 100%; padding: 12px 14px; background: var(--su-bg2); color: var(--su-text); border: 1px solid var(--su-line); border-radius: 4px; font: 400 16px/1.5 var(--su-ja);
}
.su-form input:focus, .su-form select:focus, .su-form textarea:focus { outline: 2px solid var(--su-accent); outline-offset: 1px; border-color: var(--su-accent); }
.su-form textarea { min-height: 180px; resize: vertical; }
.su-form .su-note { margin: 6px 0 0; }
.su-form__file { padding: 18px; border: 1px dashed var(--su-line); border-radius: 6px; background: var(--su-bg2); }
.su-form__file input { width: 100%; font-size: 14px; }
.su-form label.su-form__check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 14px 16px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; }
.su-form__check input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--su-accent); }
.su-form__check.is-important { border-color: var(--su-accent); }
.su-form__check a { color: var(--su-accent-text); text-decoration: underline; }
.su-form__check b { font-weight: 700; }
.su-form button.su-btn { display: flex; width: 100%; max-width: 420px; margin: 8px auto 0; cursor: pointer; }
.su-form button.su-btn:disabled { opacity: .4; cursor: not-allowed; }
.su-form__hint { margin-top: 8px; color: var(--su-muted); font-size: 13px; text-align: center; }
.su-form__errors { margin: 0 0 24px; padding: 14px 18px; border: 1px solid #e0514e; border-radius: 6px; background: rgba(224, 81, 78, .1); color: #ff8a86; font-size: 14px; }
.su-form__errors ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.su-hp { position: absolute; left: -9999px; }

/* 文章だけのページ(プライバシーポリシー) */
.su-prose { max-width: 820px; margin: 0 auto; font-size: 15px; }
.su-main .su-prose h2 { margin: 36px 0 10px; font-size: 19px; }
.su-prose ul { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }

@media (max-width: 900px) {
  .su-pagetop.has-photo .su-pagetop__in, .su-feature, .su-split, .su-shop { grid-template-columns: 1fr; }
  .su-feature:nth-child(even) .su-feature__photo { order: 0; }
  .su-cards, .su-cards--4, .su-damage, .su-related { grid-template-columns: repeat(2, 1fr); }
  .su-steps, .su-steps--4 { grid-template-columns: repeat(2, 1fr); }
  .su-casebig__mid, .su-gallery { grid-template-columns: repeat(3, 1fr); }
  .su-body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .su-pagetop { padding: 36px 0 32px; }
  .su-cards, .su-cards--2, .su-cards--4, .su-damage, .su-steps, .su-steps--3, .su-steps--4, .su-related, .su-casebig__ba { grid-template-columns: 1fr; }
  .su-casebig__mid, .su-gallery { grid-template-columns: repeat(2, 1fr); }
  .su-feature { margin-bottom: 44px; gap: 20px; }
  .su-parts ol { columns: 1; }
}

/* ===== ロゴ(ガイドラインの色:赤 #E60014、橙 #F06E00、黄 #FAD200、S の橙 #F08200) ===== */
.su-brand__sub { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; }
.su-brand__logo { display: block; margin: 2px 0; }
.su-brand__logo img, .su-footer__logo img { display: block; width: auto; max-width: none; height: 28px; margin: 0; }
.su-brand__logo .is-color, .su-footer__logo .is-color { display: none; }
html[data-su-headlight="yes"] .su-brand__logo .is-color, html[data-su-headlight="yes"] .su-footer__logo .is-color { display: block; }
html[data-su-headlight="yes"] .su-brand__logo .is-white, html[data-su-headlight="yes"] .su-footer__logo .is-white { display: none; }
.su-footer__logo { margin: 2px 0 4px; }
.su-footer__logo img { height: 34px; }
.su-footer__sub { color: var(--su-foot-text); font-size: 12px; font-weight: 700; }

/* 英語の小見出しの前に、ロゴの3つの四角 */
.su-main .su-en::before { content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .5em; vertical-align: -.08em; background: url(images/logo/mark.svg) center / contain no-repeat; }
.su-strip .su-en::before { display: none; }

/* ページの頭とフッターに、ロゴの四角を薄く大きく */
.su-pagetop, .su-footer { position: relative; overflow: hidden; }
.su-pagetop:not(.has-photo)::after, .su-footer::after { content: ""; position: absolute; pointer-events: none; background: url(images/logo/mark.svg) center / contain no-repeat; opacity: .1; }
.su-pagetop:not(.has-photo)::after { right: -30px; bottom: -70px; width: 300px; height: 300px; }
.su-footer::after { right: 32px; bottom: 72px; width: 240px; height: 240px; opacity: .16; } /* 11/9 一番下の細い線(コピーライトの上)より上に・少し濃く(.07→.16) */
@media (max-width: 760px) { .su-footer::after { right: 16px; bottom: 80px; width: 150px; height: 150px; } }
.su-pagetop__in, .su-footer__in, .su-footer__copy { position: relative; z-index: 1; }

/* 1〜2文字だけ次の行に落ちないように */
.su-main p, .su-main li, .su-main td, .su-main summary, .su-main small, .su-main figcaption, .su-menu__body strong, .su-menu__body small, .su-footer p, .su-jobs__foot p { text-wrap: pretty; word-break: auto-phrase; }
.su-main h1, .su-main h2, .su-main h3, .su-main strong, .su-main b { text-wrap: balance; word-break: auto-phrase; }
@media (max-width: 640px) {
  .su-pagetop:not(.has-photo)::after { width: 180px; height: 180px; right: -20px; bottom: -40px; }
}

/* ===== 料金ページ ===== */
.su-pagenav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; }
.su-main a:not(.su-btn) { overflow-wrap: anywhere; }
.su-pagenav a { display: inline-block; padding: 8px 16px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 10px; font-size: 14px; font-weight: 500; }
.su-pagenav a:hover { border-color: var(--su-accent); }
.su-pagenav--small { margin: -14px auto 44px !important; }
.su-pagenav--small a { padding: 5px 12px; font-size: 13px; }
.su-pricegroup { max-width: 900px; margin: 0 auto 52px; scroll-margin-top: calc(var(--su-header-h) + 12px); }
.su-pricegroup:last-child { margin-bottom: 0; }
.su-main .su-pricegroup h3 { margin-bottom: 8px; padding-left: 12px; border-left: 4px solid var(--su-accent); font-size: 20px; }
.su-pricegroup__est { margin: 10px 0 0; text-align: right; font-size: 14px; }
.su-pricegroup__est a { color: var(--su-accent-text); text-decoration: underline; }
.su-prices--one { grid-template-columns: 1fr; max-width: 900px; gap: 6px; }
.su-prices--one li { padding: 12px 16px; }
.su-prices--one b { font-size: 17px; }
.su-prices b { text-align: right; }

/* 自動見積り */
.su-est { max-width: 820px; margin: 0 auto; padding: 22px; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 14px; }
.su-est__printhead { display: none; }
.su-est__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; padding: 5px; background: var(--su-bg3); border-radius: 12px; }
.su-est__tabs button { padding: 10px 6px; background: transparent; border: 0; border-radius: 9px; color: var(--su-muted); font: 700 13px/1.4 var(--su-ja); cursor: pointer; }
.su-est__tabs button:hover { color: var(--su-text); }
.su-est__tabs button.is-on { background: var(--su-accent); color: var(--su-on-accent); }
.su-est__unit { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; }
.su-est__unit span { margin-right: 6px; color: var(--su-muted); }
.su-est__unit button { padding: 6px 16px; background: transparent; border: 1px solid var(--su-line); border-radius: 9px; color: var(--su-text); font: 500 14px/1.4 var(--su-ja); cursor: pointer; }
.su-est__unit button.is-on { background: var(--su-bg3); border-color: var(--su-accent); font-weight: 700; }
.su-est__panel[hidden] { display: none; }
.su-est__field { display: grid; grid-template-columns: 1fr 190px; align-items: center; column-gap: 14px; margin-bottom: 14px; }
.su-est__field label { font-weight: 700; font-size: 15px; }
.su-est__field small { grid-column: 2; margin-top: 3px; color: var(--su-muted); font-size: 12px; text-align: right; }
.su-est__input { display: flex; align-items: center; gap: 8px; }
.su-est__input input { width: 100%; min-width: 0; padding: 10px 12px; background: #fff; color: var(--su-text); border: 2px solid #9c948a; border-radius: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); font: 500 18px/1.3 var(--su-ja); text-align: right; }
.su-est__input input:focus { outline: 2px solid var(--su-accent); outline-offset: 1px; }
.su-est__input i { flex: none; width: 1.4em; font-style: normal; }
.su-main .su-est__label { margin: 4px 0 8px; font-size: 15px; font-weight: 700; }
.su-est__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.su-est__checks label { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 9px 12px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 8px; font-size: 14px; cursor: pointer; }
.su-est__checks input { width: 18px; height: 18px; margin: 0; accent-color: var(--su-accent); }
.su-est__checks small { grid-column: 2; color: var(--su-muted); font-size: 12px; }
.su-est__result { margin-top: 18px; padding: 16px 18px; background: var(--su-bg2); border-radius: 10px; }
.su-est__result ul { margin-bottom: 10px !important; font-size: 14px; }
.su-est__result li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--su-line); }
.su-main .su-est__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-weight: 700; }
.su-est__total b { color: var(--su-accent-text); font-family: var(--su-en); font-size: clamp(30px, 5vw, 40px); font-weight: 600; line-height: 1.2; }
.su-main .su-est__result .su-note { margin: 0 0 2px; font-size: 13px; }
.su-est__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.su-main .su-est__actions a.su-btn { color: var(--su-on-accent); }
button.su-btn { cursor: pointer; }
button.su-btn--ghost { background: transparent; color: var(--su-accent-text); border-color: currentColor; }

/* 対応エリアの地図と波紋 */
.su-area { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1040px; margin: 0 auto; }
.su-areamap { position: relative; display: block; width: min(100%, max(360px, calc((100vh - 120px) * .889))); margin: 0 auto; overflow: hidden; background: #f2f4f6; border-radius: 10px; cursor: zoom-in; }
.su-areamap img { display: block; width: 100%; max-width: 100%; height: auto; }
.su-ripple { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 水の波紋:エイト建設と同じ1.2秒ごと。実際の波のように一定の速さで広がり、地図の四角の辺に届く前に透明になって消える */
.su-ripple i { position: absolute; left: 50.1%; top: 47.5%; width: 92%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(24, 104, 99, .75); background: radial-gradient(circle, rgba(24, 104, 99, 0) 60%, rgba(24, 104, 99, .16) 100%); box-shadow: 0 0 14px rgba(24, 104, 99, .35), inset 0 0 10px rgba(255, 255, 255, .5); transform: translate(-50%, -50%) scale(.03); opacity: 0; animation: su-ripple 12s linear infinite; }
.su-ripple i:nth-child(2) { animation-delay: 1.2s; }
.su-ripple i:nth-child(3) { animation-delay: 2.4s; }
.su-ripple i:nth-child(4) { animation-delay: 3.6s; }
.su-ripple i:nth-child(5) { animation-delay: 4.8s; }
.su-ripple i:nth-child(6) { animation-delay: 6.0s; }
.su-ripple i:nth-child(7) { animation-delay: 7.2s; }
.su-ripple i:nth-child(8) { animation-delay: 8.4s; }
.su-ripple i:nth-child(9) { animation-delay: 9.6s; }
.su-ripple i:nth-child(10) { animation-delay: 10.8s; }
@keyframes su-ripple { 0% { transform: translate(-50%, -50%) scale(.03); opacity: 0; } 4% { opacity: .9; } 40% { opacity: .45; } 70% { opacity: .18; } 92% { opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.su-ripple b { position: absolute; left: 50.1%; top: 47.5%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #1d2a2c; box-shadow: 0 0 0 1.5px #fff; }
.su-ripple em { position: absolute; left: 50.1%; top: 47.5%; transform: translate(-50%, 10px); color: #3d1320; font-size: clamp(10px, 1.25vw, 13px); font-style: normal; font-weight: 700; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) { .su-ripple i { display: none; } }
.su-arealegend li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.su-arealegend i { flex: none; width: 72px; height: 40px; border: 1px solid var(--su-line); border-radius: 4px; }
.su-arealegend strong { display: block; font-size: 15px; }
.su-arealegend span { font-size: 15px; }

/* 拡大できる写真(虫眼鏡)と拡大表示 */
.su-zoom { position: relative; display: block; cursor: zoom-in; }
.su-zoom::after { content: ""; position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; background: rgba(0, 0, 0, .66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 22px no-repeat; border-radius: 50%; transition: transform .15s; }
.su-zoom:hover::after { transform: scale(1.12); }
.su-gallery--2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.su-main .su-zoomnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; font-weight: 700; }
.su-lb { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(0, 0, 0, .94); color: #fff; font-family: var(--su-ja); }
.su-lb[hidden] { display: none; }
.su-lb__bar { display: flex; flex: none; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; }
.su-lb__title { flex: 1; min-width: 0; }
.su-lb button { min-width: 40px; height: 40px; padding: 0 12px; background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 10px; font: 500 15px/1 var(--su-ja); cursor: pointer; }
.su-lb button:hover { background: rgba(255, 255, 255, .26); }
.su-lb__stage { flex: 1; min-height: 0; overflow: auto; display: flex; touch-action: pan-x pan-y pinch-zoom; cursor: zoom-in; }
.su-lb__stage img { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.su-lb__stage.is-big { cursor: grab; }
.su-lb__stage.is-big.is-drag { cursor: grabbing; }
.su-lb__stage.is-big img { max-width: none; max-height: none; }
.su-lb__hint { flex: none; padding: 6px 12px 10px; color: #c8ccd0; font-size: 13px; text-align: center; }

@media (max-width: 900px) {
  .su-area { grid-template-columns: 1fr; gap: 22px; }
  .su-est__tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .su-prices li { grid-template-columns: 1fr; }
  .su-prices b { margin-top: 2px; text-align: left; white-space: normal; }
  .su-est { padding: 14px; }
  .su-est__field { grid-template-columns: 1fr; row-gap: 6px; }
  .su-est__field small { grid-column: 1; text-align: left; }
  .su-est__checks { grid-template-columns: 1fr; }
  .su-gallery--2 { grid-template-columns: 1fr; }
}

/* 見積りの印刷:ボタンから印刷するときだけ、見積り以外を消して1枚に */
@media print {
  body.su-print-est .su-header, body.su-print-est .su-drawer, body.su-print-est .su-footer, body.su-print-est .su-switch, body.su-print-est .su-totop { display: none !important; }
  body.su-print-est .su-main > *:not(#estimate), body.su-print-est #estimate > .su-wrap > *:not(#su-est) { display: none !important; }
  body.su-print-est, body.su-print-est #estimate { padding: 0 !important; background: #fff !important; }
  body.su-print-est .su-est, body.su-print-est .su-est * { color: #000 !important; }
  body.su-print-est .su-est { max-width: none; padding: 0; background: #fff !important; border: 0; }
  body.su-print-est .su-est__printhead { display: block; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #000; }
  body.su-print-est .su-est__tabs, body.su-print-est .su-est__unit, body.su-print-est .su-est__actions { display: none !important; }
  body.su-print-est .su-est__input input { background: #fff !important; border: 1px solid #888; }
  body.su-print-est .su-est__result, body.su-print-est .su-est__checks label { background: #fff !important; }
}

/* 1〜2文字だけの行を出さない */
.su-main figcaption, .su-main th { text-wrap: balance; word-break: auto-phrase; }
.su-est__tabs button { word-break: keep-all; }
@media (max-width: 640px) {
  .su-form label .opt { display: block; margin: 2px 0 0; text-wrap: balance; word-break: auto-phrase; }
}

/* 税込の表示と、縦に並べた料金(金額は右にそろえる) */
.su-tax { margin-left: 2px; font-size: .68em; font-style: normal; font-weight: 500; white-space: nowrap; }
.su-pricelines { margin: 10px 0 0; }
.su-pricelines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--su-line); }
.su-pricelines dt { font-weight: 500; }
.su-pricelines dd { margin: 0; color: var(--su-accent-text); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* 料金表:目次は7段、各グループは大きめのカード */
.su-main .su-pricenav { display: grid; gap: 8px; max-width: 900px; margin: 0 auto 48px; padding: 0; list-style: none; }
.su-main .su-pricenav li { margin: 0; }
.su-pricenav a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 12px; color: var(--su-text); font-size: 17px; font-weight: 700; line-height: 1.45; }
.su-pricenav a:hover { border-color: var(--su-accent); }
.su-pricenav a::after { content: "↓"; margin-left: auto; padding-left: 8px; color: var(--su-accent-text); }
.su-priceno { display: grid; flex: none; place-items: center; width: 34px; height: 34px; background: var(--su-accent); border-radius: 50%; color: var(--su-on-accent); font-family: var(--su-en); font-size: 17px; font-weight: 700; line-height: 1; }
.su-pricegroup { margin-bottom: 28px; padding: 26px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 14px; }
.su-main .su-pricegroup h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-left: 0; border-left: 0; font-size: 22px; line-height: 1.4; }
.su-pricegroup .su-prices li { background: var(--su-bg); }
@media (max-width: 640px) {
  .su-pricegroup { padding: 16px 12px; }
  .su-main .su-pricegroup h3 { font-size: 19px; }
  .su-pricenav a { padding: 12px 14px; font-size: 15px; }
}

/* 料金の行(パソコン):項目と金額の距離を詰める。説明は項目の下だけに置き、金額の列に入れない。スマホは別に考える */
@media (min-width: 641px) {
  .su-main .su-pricenav, .su-pricegroup { max-width: 720px; }
  .su-prices, .su-prices--one { max-width: 668px; }
  .su-pricegroup .su-prices { max-width: none; }
  .su-prices li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .su-prices li > span { grid-column: 1; grid-row: 1; text-wrap: balance; word-break: auto-phrase; }
  .su-prices li > b { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .su-prices li > small { grid-column: 1; grid-row: 2; }
}

/* 押せないときの見積りのボタン */
button.su-btn[disabled] { opacity: .4; cursor: not-allowed; }
/* サービス一覧のメニュー:写真を大きく */
.su-jobs { width: 880px; max-height: calc(100vh - 90px); overflow-y: auto; }
.su-menu__thumb { width: 168px; height: 126px; }
.su-menu__body strong { font-size: 15px; }
.su-menu__body small { font-size: 13px; }
@media (max-width: 640px) {
  .su-menu__thumb { width: 116px; height: 87px; }
}
/* 途中で改行しない語 */
.su-nb { white-space: nowrap; }

/* 料金表:開閉式(最初は全部閉じる) */
.su-pricegroup { padding: 0; overflow: hidden; }
.su-pricegroup > summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--su-text); font-size: 19px; font-weight: 700; line-height: 1.45; list-style: none; cursor: pointer; }
.su-pricegroup > summary::-webkit-details-marker { display: none; }
.su-pricegroup > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 4px 3px auto; border-right: 2.5px solid var(--su-accent-text); border-bottom: 2.5px solid var(--su-accent-text); transform: rotate(45deg); transition: transform .2s; }
.su-pricegroup[open] > summary::after { margin-bottom: -3px; transform: rotate(225deg); }
.su-pricegroup > summary:hover { background: var(--su-bg3); }
.su-pricegroup[open] > summary { border-bottom: 1px solid var(--su-line); }
.su-pricegroup__body { padding: 18px 20px 22px; }
.su-pricegroup__body > .su-note { margin-top: 0; }
.su-pricegroup { margin-bottom: 10px; }
@media (max-width: 640px) {
  .su-pricegroup > summary { padding: 14px 12px; font-size: 16px; }
  .su-pricegroup__body { padding: 14px 10px 18px; }
}

/* 光触媒の試験データ:試験ごとに開閉(最初は全部閉じる) */
.su-evis { max-width: 820px; margin: 0 auto; }
.su-main .su-evi__group { margin: 34px 0 12px; padding-left: 12px; border-left: 4px solid var(--su-accent); font-size: 19px; }
.su-main .su-evi__group:first-child { margin-top: 0; }
.su-evi { margin-bottom: 8px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 10px; overflow: hidden; }
.su-evi > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; list-style: none; cursor: pointer; }
.su-evi > summary::-webkit-details-marker { display: none; }
.su-evi > summary:hover { background: var(--su-bg3); }
.su-evi__name { min-width: 0; }
.su-main .su-evi__name b { display: block; font-size: 15px; line-height: 1.5; }
.su-main .su-evi__name small { display: block; margin-top: 2px; color: var(--su-muted); font-size: 13px; line-height: 1.5; }
.su-evi__open { flex: none; padding: 6px 14px; border: 1px solid currentColor; border-radius: 8px; color: var(--su-accent-text); font-size: 13px; font-weight: 700; }
.su-evi[open] .su-evi__open { background: var(--su-accent); border-color: var(--su-accent); color: var(--su-on-accent); }
.su-evi__body { display: grid; gap: 12px; padding: 14px; border-top: 1px solid var(--su-line); }
.su-evi__body img { display: block; width: 100%; height: auto; background: #fff; }
@media (max-width: 640px) {
  .su-evi > summary { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .su-evi__body { padding: 8px; }
}

/* メニュー:写真・電話・ボタンなしの普通の一覧。サービス一覧だけその場で開く */
.su-jobs { width: 360px; max-height: calc(100vh - 90px); padding: 8px; }
.su-header .su-menu, .su-drawer .su-menu, .su-menu { display: block; }
.su-menu a { display: block; height: auto; padding: 10px 12px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.su-drawer > * { max-width: 560px; }
.su-drawer ul.su-dnav { margin: 0 auto; padding: 8px 0 32px; }
.su-dnav > li { border-bottom: 1px solid var(--su-line); }
.su-dnav > li > a, .su-dnav__sub > summary { display: block; padding: 15px 6px; color: var(--su-text); font-size: 18px; font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; }
.su-dnav > li > a:hover, .su-dnav__sub > summary:hover { color: var(--su-accent-text); }
.su-dnav__sub > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
.su-dnav__sub > summary::-webkit-details-marker { display: none; }
.su-dnav__sub > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px 4px 0; border-right: 2px solid var(--su-accent-text); border-bottom: 2px solid var(--su-accent-text); transform: rotate(45deg); transition: transform .2s; }
.su-dnav__sub[open] > summary::after { margin-bottom: -4px; transform: rotate(225deg); }
.su-drawer .su-dnav__sub .su-menu { margin: 0 0 12px; padding-left: 14px; border-left: 2px solid var(--su-line); }
.su-dnav__sub .su-menu a { padding: 9px 8px; font-size: 16px; }

/* メニューの開き方:Step Up の階段。右から順に、ロゴの黄・橙・赤の帯と背景色がせり上がる */
.su-drawer { background: transparent; animation: none; }
.su-drawer > .su-dnav { position: relative; z-index: 1; }
.su-drawer > .su-drawer__steps { max-width: none; margin: 0; }
.su-drawer__steps { position: fixed; top: var(--su-header-h); right: 0; bottom: 0; left: 0; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; pointer-events: none; }
.su-drawer__steps span { position: relative; display: block; margin-right: -1px; overflow: hidden; }
.su-drawer__steps i { position: absolute; inset: 0; transform: translateY(100%); transition: transform .42s cubic-bezier(.76, 0, .24, 1); transition-delay: calc(var(--c) * 35ms + (3 - var(--l)) * 55ms); }
.su-drawer__steps i:nth-child(1) { background: #fad200; }
.su-drawer__steps i:nth-child(2) { background: #f08200; }
.su-drawer__steps i:nth-child(3) { background: #e60014; }
.su-drawer__steps i:nth-child(4) { background: var(--su-bg); }
.su-drawer.is-open .su-drawer__steps i { transform: none; transition-delay: calc((5 - var(--c)) * 45ms + var(--l) * 70ms); }
/* 文字は帯のあとに、上から1段ずつ */
.su-dnav > li { opacity: 0; transform: translateY(16px); transition: opacity .15s, transform .15s; }
.su-drawer.is-open .su-dnav > li { opacity: 1; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .3, 1); transition-delay: calc(460ms + var(--n) * 45ms); }
.su-dnav > li:nth-child(1) { --n: 0; }
.su-dnav > li:nth-child(2) { --n: 1; }
.su-dnav > li:nth-child(3) { --n: 2; }
.su-dnav > li:nth-child(4) { --n: 3; }
.su-dnav > li:nth-child(5) { --n: 4; }
.su-dnav > li:nth-child(6) { --n: 5; }
.su-dnav > li:nth-child(7) { --n: 6; }
.su-dnav > li:nth-child(8) { --n: 7; }
.su-dnav > li:nth-child(9) { --n: 8; }
.su-dnav > li:nth-child(10) { --n: 9; }
/* マウスを乗せると、ロゴの印が出る */
.su-dnav > li > a, .su-dnav__sub > summary { display: flex; align-items: center; justify-content: flex-start; }
.su-dnav > li > a::before, .su-dnav__sub > summary::before { content: ""; flex: none; width: 0; height: 18px; background: url("images/logo/mark.svg") left center / contain no-repeat; transition: width .2s, margin .2s; }
.su-dnav > li > a:hover::before, .su-dnav__sub > summary:hover::before { width: 20px; margin-right: 10px; }
.su-dnav__sub > summary::after { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .su-drawer__steps i, .su-dnav > li, .su-drawer.is-open .su-drawer__steps i, .su-drawer.is-open .su-dnav > li { transition: none; transition-delay: 0s; }
}

/* 試験データ:開閉が分かる「開く/閉じる+矢印」に。開いている間は題名の行を画面の上に固定する */
.su-main:has(.su-evis) { overflow: clip; }
.su-evis { overflow-anchor: none; }
.su-evi { overflow: visible; }
.su-evi > summary { position: sticky; top: var(--su-header-h); z-index: 5; background: var(--su-bg2); border-radius: 10px; }
.su-evi[open] > summary { border-bottom: 1px solid var(--su-line); border-radius: 10px 10px 0 0; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5); }
.su-evi__body { border-top: 0; }
.su-evi__open, .su-evi[open] .su-evi__open { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--su-accent-text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.su-evi__open::before { content: "エビデンス"; }
.su-evi[open] .su-evi__open::before { content: "閉じる"; }
.su-evi__open::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 4px 3px 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.su-evi[open] .su-evi__open::after { margin-bottom: -3px; transform: rotate(225deg); }
@media (max-width: 640px) {
  .su-evi > summary { flex-direction: row; align-items: center; gap: 12px; }
}
@media print {
  .su-evi > summary { position: static; }
}

/* トップの見出し:かぎかっこを半分の幅にして、「屋」と「その」の頭をそろえる(「 は上の小さな文字の左端に合わせる) */
.su-main .su-hero__title { padding-left: .5em; }
.su-hero__title span { text-indent: -.5em; font-feature-settings: "halt"; }
/* トップのサービス一覧:01・02…の番号を大きく */
.su-jobcard__no { margin-bottom: 4px; font-size: 30px; font-weight: 700; line-height: 1.1; }
/* トップの施工事例:写真の一辺を今の3/4に(パソコン) */
@media (min-width: 641px) {
  .su-works { width: calc((100% - 26px) * .75 + 26px); margin-inline: auto; }
}

/* ヘッダー:「サービス一覧」の文字(ページへ)と矢印(一覧を開く)を分ける */
.su-nav__link { display: inline-flex; align-items: center; height: 40px; padding: 0 4px 0 12px; border-radius: 6px 0 0 6px; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; }
.su-nav__link:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.su-nav__item--has { display: flex; align-items: center; }
.su-nav__item--has > .su-nav__btn { padding-left: 8px; padding-right: 10px; border-radius: 0 6px 6px 0; }
.su-nav__item--has.is-open > .su-nav__link { color: var(--su-accent-text); }
/* スマホのメニュー:文字はサービス一覧のページへ、右の矢印で9つを開く */
.su-dnav__sub > summary::after { content: none; }
.su-dnav__sub > summary > a { flex: 1; color: inherit; text-decoration: none; }
.su-dnav__toggle { display: grid; place-items: center; flex: none; width: 44px; height: 32px; margin-left: auto; border-left: 1px solid var(--su-line); }
.su-dnav__toggle::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--su-accent-text); border-bottom: 2px solid var(--su-accent-text); transform: rotate(45deg); transition: transform .2s; }
.su-dnav__sub[open] .su-dnav__toggle::after { margin-top: 4px; transform: rotate(225deg); }
.su-footer__head a { color: inherit; text-decoration: none; }
.su-footer__head a:hover { text-decoration: underline; }

/* サービス一覧のページ */
.su-svcnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 48px; padding: 0; list-style: none; }
.su-svcnav a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 16px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 6px; color: var(--su-text); font-size: 15px; font-weight: 500; line-height: 1.45; text-decoration: none; }
.su-svcnav a:hover { border-color: var(--su-accent); color: var(--su-accent-text); }
.su-svcnav span { flex: none; color: var(--su-accent-text); font: 600 20px/1 var(--su-en); }
.su-svcs { display: grid; gap: 28px; }
.su-svc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 36px; padding: 28px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 8px; scroll-margin-top: calc(var(--su-header-h) + 16px); }
.su-svc:nth-child(even) .su-svc__photo { order: 2; }
.su-svc__photo { margin: 0; overflow: hidden; border-radius: 6px; background: var(--su-bg3); }
.su-svc__photo img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.su-svc__photo.is-noimg { display: grid; place-items: center; min-height: 240px; }
.su-svc__photo.is-noimg span { color: var(--su-accent-text); font: 600 30px/1 var(--su-en); letter-spacing: .14em; opacity: .7; }
.su-main .su-svc__no { margin: 0 0 4px; color: var(--su-accent-text); font: 700 40px/1 var(--su-en); }
.su-main .su-svc h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.4; }
.su-main .su-svc__text { margin: 0 0 18px; font-size: 15px; }
.su-svc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.su-main .su-svc h3 { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--su-accent); font-size: 15px; line-height: 1.4; }
.su-svc__points { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; }
.su-svc__points li { position: relative; padding: 4px 0 4px 20px; }
.su-svc__points li::before { content: ""; position: absolute; top: 10px; left: 2px; width: 9px; height: 5px; border-left: 2px solid var(--su-accent-text); border-bottom: 2px solid var(--su-accent-text); transform: rotate(-45deg); }
.su-svc .su-pricelines { margin: 0; font-size: 14px; }
.su-main .su-svc__more { margin: 22px 0 0; text-align: right; }
.su-svc__more .su-btn.is-soon { opacity: .5; pointer-events: none; }
.su-svcs + .su-prices__note a { color: var(--su-accent-text); text-decoration: underline; }
@media (max-width: 900px) {
  .su-svcnav { grid-template-columns: repeat(2, 1fr); }
  .su-svc { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .su-svc:nth-child(even) .su-svc__photo { order: 0; }
  .su-svc__photo img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .su-svc__photo.is-noimg { min-height: 120px; }
}
@media (max-width: 640px) {
  .su-svcnav { grid-template-columns: 1fr; }
  .su-svc__cols { grid-template-columns: 1fr; gap: 16px; }
  .su-main .su-svc__more { text-align: center; }
}

/* 料金の行の下の「料金をすべて見る」:料金の行と同じ幅・同じくらいの大きさのボタンに */
.su-main .su-prices ~ .su-center .su-btn { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 900px; min-height: 64px; margin-inline: auto; font-size: 17px; }
@media (min-width: 641px) {
  .su-main .su-prices ~ .su-center .su-btn { max-width: 668px; }
}

/* 料金表:開いている間は題名の行を画面の上に固定する(エビデンスと同じ) */
.su-main:has(.su-pricegroup) { overflow: clip; }
.su-pricegroups, .su-pricegroup { overflow-anchor: none; }
.su-pricegroup { overflow: visible; }
.su-pricegroup > summary { position: sticky; top: var(--su-header-h); z-index: 5; background: var(--su-bg2); border-radius: 14px; }
.su-pricegroup[open] > summary { border-radius: 14px 14px 0 0; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5); }
.su-pricegroup > summary:hover { background: var(--su-bg3); }
@media print {
  .su-pricegroup > summary { position: static; }
}

/* 施工事例のページ:写真は「施工の様子」と同じ大きさで4列。BEFORE/AFTER は写真の上のボタンで切り替え */
.su-casebig { margin-bottom: 44px; padding-bottom: 44px; }
.su-casegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.su-ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 5px; background: var(--su-bg3); }
.su-ba__img { position: absolute; inset: 0; display: block; transition: opacity .5s; }
.su-ba__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.su-ba__img--before { opacity: 0; pointer-events: none; }
.su-ba[data-state="before"] .su-ba__img--before { opacity: 1; pointer-events: auto; }
.su-ba[data-state="before"] .su-ba__img--after { opacity: 0; pointer-events: none; }
.su-ba__switch { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; padding: 3px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(14, 16, 18, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.su-ba__switch button { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .72); font: 600 12px/1.3 var(--su-en); letter-spacing: .1em; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s; }
.su-ba__switch button.is-on { background: var(--su-accent); color: var(--su-on-accent); }
.su-casegrid__item { position: relative; margin: 0; overflow: hidden; border-radius: 5px; }
.su-casegrid__item a { display: block; }
.su-casegrid__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-casegrid__item figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 4px 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; pointer-events: none; }
.su-main .su-casebig__text { margin-top: 14px; }
@media (max-width: 900px) {
  .su-casegrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .su-casegrid { grid-template-columns: repeat(2, 1fr); }
}

/* 「料金をすべて見る」:枠だけでなく色のついたボタンに。角丸を強く */
a.su-btn--big { min-width: 380px; min-height: 88px; padding: 0 56px; border-radius: 12px; font-size: 20px; }
.su-main .su-center a.su-btn--big, .su-main .su-prices ~ .su-center .su-btn { background: var(--su-accent); border-color: var(--su-accent); color: var(--su-on-accent); }
.su-main .su-prices ~ .su-center .su-btn { border-radius: 12px; }
@media (max-width: 640px) {
  a.su-btn--big { min-width: 0; width: 100%; min-height: 72px; padding: 0 20px; font-size: 18px; }
}

/* よくある質問:目次(サービス一覧と同じ並び)、準備中の枠、家と体のタイルを中央に */
.su-faqnav { max-width: 900px; margin-inline: auto; }
.su-faqnav em { margin-left: auto; padding-left: 8px; color: var(--su-muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.su-faq { scroll-margin-top: calc(var(--su-header-h) + 16px); }
.su-main .su-faq__soon { margin: 0; padding: 18px 20px; background: var(--su-bg2); border: 1px dashed var(--su-line); border-radius: 6px; color: var(--su-muted); font-size: 15px; }
.su-main .su-faq__link { margin: 12px 0 0; text-align: right; font-size: 14px; }
.su-faq__link a { color: var(--su-accent-text); text-decoration: underline; }
.su-main .su-body { margin: 0 auto 36px; padding: 0; }
.su-main .su-parts ol { padding: 0; }

/* サービスごとの淡い色分けは 11/8 にやめた(ワタルさん「シンプルに」) */

/* パソコンでも、お問い合わせの右に三本線を出す(押すと全ページの一覧) */
.su-burger { display: block; margin-left: 6px; }

/* メニューの開き方:オーガスタと同じく、帯が右から時間差で横に流れて出る。閉じると右へ帰る */
.su-drawer__steps { grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); }
.su-drawer__steps span { margin-right: 0; margin-bottom: -1px; }
.su-drawer__steps i { transform: translateX(100%); transition-delay: calc((5 - var(--c)) * 35ms + (3 - var(--l)) * 55ms); }
.su-drawer.is-open .su-drawer__steps i { transform: none; transition-delay: calc(var(--c) * 45ms + var(--l) * 70ms); }

/* ヘッダーの「自動見積り」:お問い合わせと並べる。区別のため枠だけのボタン */
.su-header a.su-btn--est { background: transparent; border-color: var(--su-headbtn); color: var(--su-headbtn); }
.su-header__cta { gap: 10px; }

/* Lenis(なめらかスクロール) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* トップに戻る:少し半透明で、ふわっと出る */
.su-totop { transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.su-totop.is-show { opacity: .7; transform: none; }
.su-totop.is-show:hover { opacity: 1; }

/* お問い合わせ:よくある質問への案内 */
.su-main .su-contact__faq { margin: 18px 0 0; text-align: center; font-weight: 700; }
.su-contact__faq a { color: var(--su-accent-text); text-decoration: underline; }

/* AIに質問(簡易版):右下。トップに戻るの左 */
.su-chatbtn { position: fixed; right: 64px; bottom: 14px; z-index: 91; height: 40px; padding: 0 18px; background: var(--su-accent); border: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); color: var(--su-on-accent); font: 700 14px/1 var(--su-ja); cursor: pointer; }
.su-chatbtn::before { content: "💬"; margin-right: 6px; }
.su-chatbtn.is-open { opacity: .85; }
body.su-noscroll .su-chatbtn, body.su-noscroll .su-chat { display: none; }
.su-chat { position: fixed; right: 14px; bottom: 64px; z-index: 92; display: flex; flex-direction: column; width: min(360px, calc(100vw - 28px)); height: min(520px, calc(100vh - 140px)); background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); color: var(--su-text); font-family: var(--su-ja); overflow: hidden; box-sizing: border-box; }
.su-chat[hidden] { display: none; }
.su-chat * { box-sizing: border-box; }
.su-chat__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--su-bg2); border-bottom: 1px solid var(--su-line); }
.su-chat__head b { font-size: 15px; }
.su-chat__head small { padding: 1px 7px; border: 1px solid var(--su-line); border-radius: 999px; color: var(--su-muted); font-size: 11px; }
.su-chat__close { margin-left: auto; width: 32px; height: 32px; background: none; border: 0; color: var(--su-text); font-size: 20px; cursor: pointer; }
.su-chat__log { flex: 1; overflow-y: auto; padding: 14px; }
.su-chat__msg { max-width: 88%; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.7; }
.su-chat__msg.is-bot { background: var(--su-bg2); border: 1px solid var(--su-line); border-top-left-radius: 4px; }
.su-chat__msg.is-me { margin-left: auto; background: var(--su-accent); color: var(--su-on-accent); border-top-right-radius: 4px; }
.su-chat__msg a { display: block; margin-top: 6px; color: var(--su-accent-text); font-weight: 700; text-decoration: underline; }
.su-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.su-chat__chips button { padding: 5px 10px; background: transparent; border: 1px solid var(--su-line); border-radius: 999px; color: var(--su-text); font: 500 12px/1.4 var(--su-ja); cursor: pointer; }
.su-chat__chips button:hover { border-color: var(--su-accent); color: var(--su-accent-text); }
.su-chat__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--su-line); }
.su-chat__form input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 8px; color: var(--su-text); font: 15px var(--su-ja); }
.su-chat__form button { height: 40px; padding: 0 14px; background: var(--su-accent); border: 0; border-radius: 8px; color: var(--su-on-accent); font: 700 14px var(--su-ja); cursor: pointer; }
@media print { .su-chatbtn, .su-chat { display: none !important; } }

/* 民間のインスペクション:建築士の建物状況調査ではないことをはっきり(相澤さん 11/7) */
.su-two__not { margin: 0 0 8px; font-weight: 700; color: #c0392b; }

/* 自動見積りのタブ:区切りがうっすら見えるように(ワタルさん 11/7) */
.su-est__tabs button { border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.55); }
.su-est__tabs button.is-on { border-color: var(--su-accent); background: var(--su-accent); }

/* AIに質問:仮作成中の表示を窓の真ん中に大きく(ワタルさん 11/7) */
.su-chat::after { content: "仮作成中"; position: absolute; left: 0; right: 0; top: 50%; z-index: 5; transform: translateY(-50%) rotate(-10deg); text-align: center; font: 900 56px/1.2 var(--su-ja); letter-spacing: .08em; color: var(--su-accent); opacity: .5; text-shadow: 0 0 6px var(--su-bg); pointer-events: none; }


/* 施工事例:3列×3段のタイル(最初の写真)。押すと時系列の窓(ワタルさん 11/7) */
.su-casetiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.su-casetile__btn { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--su-line); border-radius: 8px; background: var(--su-bg3); color: #fff; text-align: left; cursor: pointer; font-family: var(--su-ja); }
.su-casetile__btn img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.su-casetile__btn:hover img { transform: scale(1.04); }
.su-casetile__btn:focus-visible { outline: 2px solid var(--su-accent); outline-offset: 2px; }
.su-casetile__label { position: absolute; top: 10px; left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .65); font: 600 12px/1.5 var(--su-en); letter-spacing: .1em; }
.su-casetile__cap { position: absolute; right: 0; bottom: 0; left: 0; padding: 22px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); font-size: 14px; font-weight: 700; line-height: 1.5; }
.su-casetile__cap b { display: block; color: var(--su-accent); font: 600 11px/1.4 var(--su-en); letter-spacing: .16em; }
.su-casemodal { position: fixed; inset: 0; z-index: 150; overflow-y: auto; padding: 24px 16px 40px; background: rgba(0, 0, 0, .86); }
.su-casemodal[hidden] { display: none; }
.su-casemodal__panel { max-width: 1000px; margin: 0 auto; padding: 24px; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 12px; color: var(--su-text); }
.su-casemodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.su-casemodal__head h3 { margin: 0; font-size: 24px; }
.su-casemodal__close { flex: none; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--su-accent); color: var(--su-on-accent); font: 700 15px/1 var(--su-ja); cursor: pointer; }
.su-casemodal__text { margin: 0 0 18px; font-size: 15px; }
.su-casemodal__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.su-casemodal__step figure { position: relative; margin: 0; overflow: hidden; border-radius: 6px; }
.su-casemodal__step img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-casemodal__step figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px; pointer-events: none; }
.su-casemodal__step figcaption span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--su-accent); color: var(--su-on-accent); font: 700 12px/1 var(--su-en); }
@media (max-width: 900px) { .su-casetiles { gap: 12px; } }
@media (max-width: 640px) { .su-casetiles { grid-template-columns: repeat(2, 1fr); } .su-casemodal__list { grid-template-columns: 1fr; } .su-casemodal__panel { padding: 16px; } }

/* カラー変更:メイン8色+自由/背景8色+自由。見分けにくい組み合わせはグレーアウトして選べない(ワタルさん 11/7) */
.su-color__row button[data-su-bg-btn] { flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: var(--c); cursor: pointer; }
.su-color__row button:disabled { opacity: .22; filter: grayscale(1); cursor: not-allowed; position: relative; }
.su-color__row button:disabled::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: #fff; transform: rotate(45deg); }
.su-color__foot { justify-content: space-between; margin-top: 6px; }
.su-color__msg { min-width: 0 !important; margin: 0 !important; color: #9aa1a8 !important; font-size: 10px; transition: color .2s; }
.su-color__msg.is-warn { color: #ffb4a8 !important; font-weight: 700; }

/* 全ページメニュー:各項目の先頭に縦線(見出しの前の線)。触れると伸びる(ワタルさん 11/7) */
.su-dnav > li > a, .su-dnav__sub > summary { position: relative; padding-left: 20px; }
.su-dnav > li > a::before, .su-dnav__sub > summary::before { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 22px; background: var(--su-accent); border-radius: 2px; transform: translateY(-50%); transition: height .2s; }
.su-dnav > li > a:hover::before, .su-dnav__sub > summary:hover::before { height: 32px; }
.su-dnav__sub .su-menu a { padding-left: 14px; }

/* 料金表の見出し(1〜7)をこぢんまりと(ワタルさん 11/7) */
.su-pricegroup > summary { gap: 10px; padding: 9px 16px; font-size: 16px; line-height: 1.4; border-radius: 10px; }
.su-pricegroup > summary .su-priceno { width: 26px; height: 26px; font-size: 14px; }
.su-pricegroup > summary::after { width: 8px; height: 8px; border-width: 2px; }
.su-pricegroup { margin-bottom: 14px; }

/* 電話の受付時間(ワタルさん 11/7。相澤さんに確認中) */
.su-tel__hours { display: block; font-family: var(--su-ja); font-size: 10px; font-weight: 500; line-height: 1.3; color: var(--su-head-muted); }
.su-contact__tel .su-hours { display: block; margin-top: 4px; font-family: var(--su-ja); font-size: 13px; font-weight: 500; color: var(--su-muted); }
.su-footer__hours { font-size: 12px; opacity: .8; }

/* 代表挨拶:全部明朝体。題は極太、本文と署名は普通の太さ(ワタルさん 11/7) */
:root { --su-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.su-greet__text, .su-greet__text p, .su-main .su-greet__sign { font-family: var(--su-serif); font-weight: 400; }
.su-greet__text .su-head h2 { font-family: var(--su-serif); font-weight: 900; }
.su-greet__text p { line-height: 2; }
.su-main .su-greet__sign b { font-weight: 900; }

/* メニュー・窓を開いたときのスクロール止め:body でなく html で止める
   (body に overflow:hidden を付けると、上の帯〔sticky〕の固定が外れ、下のページが上に見えてしまう。11/7 ワタルさんの指摘) */
body.su-noscroll { overflow: visible; }
html:has(body.su-noscroll) { overflow: hidden; }

/* メニューを開いている間は、ヘッダーを出さない。メニューを画面いっぱいにし、右上の × だけ残す(ワタルさん 11/7) */
.su-header:has(.su-burger.is-open) { z-index: 140; background: transparent; border-color: transparent; box-shadow: none; }
.su-header:has(.su-burger.is-open) > * > *:not(.su-burger) { visibility: hidden; }
.su-drawer { top: 0; padding-top: calc(var(--su-header-h) + 8px); }
.su-drawer__steps { top: 0; }
.su-burger.is-open span { background: var(--su-text); }

/* カラー変更:メイン16色・背景16色+自由。9列で2段に並べる(ワタルさん 11/7) */
.su-color__row:has(.su-color__sw) { align-items: flex-start; }
.su-color__row > span { padding-top: 3px; }
.su-color__sw { display: grid; grid-template-columns: repeat(9, 20px); gap: 6px; }

/* 施工事例のタイル:BEFORE / AFTER のボタンを左上に(AFTER を押すと拡大した窓が開く) */
.su-casetile { position: relative; }
.su-ba__switch.su-casetile__switch { top: 10px; bottom: auto; left: 10px; }
/* 施工事例の窓:題と「閉じる」は上に固定。写真は4列(タブレット3列・スマホ2列)。大きく見るのは虫眼鏡で(ワタルさん 11/7) */
.su-casemodal { padding-top: 0; }
.su-casemodal__head { position: sticky; top: 0; z-index: 3; margin: 0 -24px 8px; padding: 18px 24px 12px; background: var(--su-bg); border-bottom: 1px solid var(--su-line); }
.su-casemodal__panel { margin-top: 24px; padding-top: 0; }
.su-casemodal__list { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.su-casemodal__step figcaption { font-size: 12px; padding: 5px 8px; }
@media (max-width: 900px) { .su-casemodal__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .su-casemodal__list { grid-template-columns: repeat(2, 1fr); } .su-casemodal__head { margin: 0 -16px 8px; padding: 14px 16px 10px; } }

/* チャットの「閉じる」を大きく/カラー変更のパレットの右上に ×(ワタルさん 11/7) */
.su-chat__close { padding: 8px 14px !important; border-radius: 8px; background: var(--su-bg3) !important; color: var(--su-text) !important; font: 700 14px/1 var(--su-ja) !important; width: auto !important; height: auto !important; }
.su-color__panel { position: relative; padding-top: 30px; }
.su-color__x { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 700 15px/24px var(--su-ja); cursor: pointer; }
.su-color__x:hover { background: rgba(255, 255, 255, .25); }

/* ドローンの写真4枚:幅を詰めて小さめに(ワタルさん 11/7) */
.su-gallery.su-gallery--2 { max-width: 820px; margin-right: auto; margin-left: auto; }
/* 拡大表示:最初から画面いっぱいに合わせる(小さい写真が小さく出ないように)。虫眼鏡でさらに原寸 */
.su-lb__stage:not(.is-big) img { width: 100%; height: 100%; }

/* 拡大表示:5段階で少しずつ拡大。虫眼鏡の下に「クリックで拡大」(ワタルさん 11/7) */
.su-lb__stage.is-big { cursor: zoom-in; }
.su-lb__stage.is-big img { max-width: none; max-height: none; object-fit: fill; }
.su-lb__cur { position: fixed; z-index: 210; display: none; padding: 3px 9px; transform: translateX(-50%); border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font: 600 12px/1.4 var(--su-ja); white-space: nowrap; pointer-events: none; }
.su-lb__cur.is-on { display: block; }

/* 自動見積り:選ばれていないタブは「選ばれているタブを薄くした色」で、文字ははっきり(ワタルさん 11/7) */
.su-est__tabs button { background: color-mix(in srgb, var(--su-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--su-accent) 45%, transparent); color: var(--su-text); }
.su-est__tabs button:hover { background: color-mix(in srgb, var(--su-accent) 34%, transparent); color: var(--su-text); }
.su-est__tabs button.is-on { background: var(--su-accent); border-color: var(--su-accent); color: var(--su-on-accent); }
/* 広さの単位:選ばれていない方もボタンだと分かる枠に */
.su-est__unit button { border: 1.5px solid color-mix(in srgb, var(--su-text) 45%, transparent); }
.su-est__unit button:hover { border-color: var(--su-accent); }
.su-est__unit button.is-on { background: var(--su-accent); border-color: var(--su-accent); color: var(--su-on-accent); }

/* 対応エリアの波紋:開いた瞬間から端まで届いている途中の状態で見せる(遅れをマイナスにする。ワタルさん 11/7) */
.su-ripple i:nth-child(2) { animation-delay: -10.8s; }
.su-ripple i:nth-child(3) { animation-delay: -9.6s; }
.su-ripple i:nth-child(4) { animation-delay: -8.4s; }
.su-ripple i:nth-child(5) { animation-delay: -7.2s; }
.su-ripple i:nth-child(6) { animation-delay: -6.0s; }
.su-ripple i:nth-child(7) { animation-delay: -4.8s; }
.su-ripple i:nth-child(8) { animation-delay: -3.6s; }
.su-ripple i:nth-child(9) { animation-delay: -2.4s; }
.su-ripple i:nth-child(10) { animation-delay: -1.2s; }
/* 波紋をひと回り大きく(左右の端まで届くように) */
.su-ripple i { width: 112%; }

/* 電話番号の前にスマートフォンのアイコン(ワタルさん 11/7) */
.su-telicon { display: inline-block; width: .78em; height: 1em; margin-right: .22em; vertical-align: -.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M3 0h10a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 3v16h10V3H3zm5 17.2a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M3 0h10a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 3v16h10V3H3zm5 17.2a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* フッター:「サービス一覧」も「ご案内」と同じ太さに */
.su-footer .su-footer__head a { font-weight: 700; }

/* 対応エリアの地図:関東の外はページの背景色のまま(枠の白をやめる。ワタルさん 11/7) */
.su-areamap { background: transparent; }

/* お問い合わせ:写真のドラッグ欄と、送信前の確認画面(ワタルさん 11/7) */
.su-drop { position: relative; display: block; padding: 0 !important; border: 2px dashed color-mix(in srgb, var(--su-text) 40%, transparent); border-radius: 12px; background: var(--su-bg2); transition: border-color .2s, background .2s; }
.su-drop.is-over, .su-drop:hover { border-color: var(--su-accent); background: color-mix(in srgb, var(--su-accent) 10%, var(--su-bg2)); }
.su-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.su-drop__face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; pointer-events: none; }
.su-drop__plus { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--su-accent); color: var(--su-on-accent); font: 400 30px/1 var(--su-en); }
.su-drop__face b { font-size: 16px; }
.su-drop__face small { color: var(--su-muted); font-size: 13px; }
/* 「ファイルから選ぶ」(11/8 ワタルさん:ドラッグが主、ファイルからも選べると分かるように)。欄全体が選ぶボタンなので、見た目だけ */
.su-drop__pick { display: inline-block; margin: 6px 0 2px; padding: 6px 16px; border: 1.5px solid var(--su-accent); border-radius: 999px; background: var(--su-bg); color: var(--su-accent-text, var(--su-accent)); font-size: 13.5px; font-weight: 700; }
.su-drop:hover .su-drop__pick, .su-drop:focus-within .su-drop__pick { background: var(--su-accent); color: var(--su-on-accent); }
.su-drop__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.su-drop__list:empty { display: none; }
.su-drop__list li { position: relative; width: 84px; height: 84px; overflow: hidden; border-radius: 8px; border: 1px solid var(--su-line); }
.su-drop__list img { width: 100%; height: 100%; object-fit: cover; }
.su-drop__list button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font: 700 14px/24px var(--su-ja); cursor: pointer; }
.su-form.is-confirm > .su-form__row, .su-form.is-confirm > .su-form__check, .su-form.is-confirm > .su-form__go, .su-form.is-confirm > .su-form__hint { display: none; }
.su-confirm { padding: 22px; border: 1px solid var(--su-line); border-radius: 12px; background: var(--su-bg2); scroll-margin-top: calc(var(--su-header-h) + 16px); }
.su-main .su-confirm__lead { margin: 0 0 14px; font-weight: 700; }
.su-confirm__list { display: grid; grid-template-columns: 12em 1fr; gap: 10px 16px; margin: 0 0 20px; }
.su-confirm__list dt { color: var(--su-muted); font-size: 14px; }
.su-confirm__list dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.su-confirm__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 640px) { .su-confirm__list { grid-template-columns: 1fr; gap: 2px; } .su-confirm__list dd { margin-bottom: 10px; } }

/* 郵便番号 */
.su-zip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.su-zip input { width: 12.5em !important; max-width: 100%; }
.su-zip__msg { color: #e08a7a; font-size: 13px; }

/* 全ページメニュー:縦の線は伸ばさない。触れた項目は背景ごと少し明るく(ワタルさん 11/7) */
.su-dnav > li > a:hover::before, .su-dnav__sub > summary:hover::before { height: 22px; }
.su-dnav > li > a, .su-dnav__sub > summary { border-radius: 6px; transition: background .15s, color .15s; }
.su-dnav > li > a:hover, .su-dnav__sub > summary:hover { background: color-mix(in srgb, var(--su-text) 8%, transparent); color: var(--su-text); }
.su-dnav__sub .su-menu a:hover { background: color-mix(in srgb, var(--su-text) 8%, transparent); }

/* ページ上の右のロゴの飾り:少し濃く、黄色の四角まで全部見えるように(ワタルさん 11/7) */
.su-pagetop:not(.has-photo)::after { opacity: .2; right: 24px; bottom: 50%; width: 220px; height: 220px; transform: translateY(50%); }
@media (max-width: 640px) { .su-pagetop:not(.has-photo)::after { width: 130px; height: 130px; right: 10px; } }

/* お問い合わせ:必須・任意は項目名の左の先頭に(ワタルさん 11/7) */
.su-form label .req, .su-form label .opt { display: inline-block; margin: 0 8px 0 0; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: 2px; }
.su-form label .opt { background: color-mix(in srgb, var(--su-text) 18%, transparent); color: var(--su-text); }
.su-form__help { display: block; margin-top: 2px; color: var(--su-muted); font-size: 12px; font-weight: 400; }
@media (max-width: 640px) { .su-form label .opt { display: inline-block; margin: 0 8px 0 0; } }

/* トップのサービス一覧:9つとも同じ大きさで3×3(ワタルさん 11/7) */
.su-jobcards { grid-template-columns: repeat(3, 1fr); }
.su-jobcard, .su-jobcard.is-main { grid-column: span 1; }
.su-jobcards .su-jobcard.is-main > a { border-width: 1px; }
.su-jobcard.is-main strong { font-size: 17px; color: inherit; }
@media (max-width: 900px) { .su-jobcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .su-jobcards { grid-template-columns: 1fr; } }

/* 全ページメニューの一番上に「メニュー」の見出し(ワタルさん 11/7) */
.su-drawer__title { position: relative; z-index: 1; margin: 0 auto 6px; padding: 0 6px; font-size: 26px; font-weight: 900; line-height: 1.3; opacity: 0; transition: opacity .35s .4s; }
.su-drawer__title span { display: block; color: var(--su-accent-text); font: 600 13px/1.4 var(--su-en); letter-spacing: .2em; }
.su-drawer.is-open .su-drawer__title { opacity: 1; }
/* 11/9 佐藤案:メニューの背景をヘッダー・フッターの色に。文字は白、英語の MENU と矢印はメインカラー */
html[data-su-drawer="band"] .su-drawer__steps i:nth-child(4) { background: var(--su-foot, #37261a); }
html[data-su-drawer="band"] .su-drawer, html[data-su-drawer="band"] .su-drawer__title { color: var(--su-foot-text, #fff); }
html[data-su-drawer="band"] .su-dnav > li > a, html[data-su-drawer="band"] .su-dnav__sub > summary, html[data-su-drawer="band"] .su-dnav__sub > summary a, html[data-su-drawer="band"] .su-drawer .su-menu a { color: var(--su-foot-text, #fff); }
html[data-su-drawer="band"] .su-dnav > li > a:hover, html[data-su-drawer="band"] .su-dnav__sub > summary a:hover, html[data-su-drawer="band"] .su-drawer .su-menu a:hover { color: var(--su-accent); }
html[data-su-drawer="band"] .su-dnav > li, html[data-su-drawer="band"] .su-dnav__toggle { border-color: rgba(255, 255, 255, .2); }
html[data-su-drawer="band"] .su-drawer .su-dnav__sub .su-menu { border-left-color: rgba(255, 255, 255, .25); }
html[data-su-drawer="band"] .su-drawer__title span { color: var(--su-accent); }
html[data-su-drawer="band"] .su-dnav__toggle::after, html[data-su-drawer="band"] .su-dnav__sub > summary::after { border-color: var(--su-accent); }
html[data-su-drawer="band"] .su-burger.is-open span { background: var(--su-foot-text, #fff); }

/* 縦の線は触れても形を変えない(前の「ロゴの印が出る」の幅20pxを打ち消す。ワタルさん 11/7) */
.su-dnav > li > a::before, .su-dnav__sub > summary::before,
.su-dnav > li > a:hover::before, .su-dnav__sub > summary:hover::before { width: 4px; height: 22px; margin: 0; background: var(--su-accent); transition: none; }

/* 施工事例:実績の地図(点の点滅) */
.su-dotmap { position: relative; width: min(100%, 620px); margin: 24px auto 8px; }
.su-dotmap img { display: block; width: 100%; height: auto; }
.su-dotmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* サービス一覧:上の9つの目次と 01 の間をあける(.su-main ol の margin:0 に負けていた。ワタルさん 11/7 夜) */
.su-main .su-svcnav { margin-bottom: 48px; }

/* トップの実績の帯:3つを中央に(.su-main ul の margin:0 が .su-wrap の auto に勝って左寄りだった。ワタルさん 11/7 夜) */
.su-main .su-strip__list { margin-left: auto; margin-right: auto; }
.su-strip__list li b { text-align: center; }

/* 画像のないカード:ほかと同じ高さに文字を置き、画像の場所に「画像挿入」(ワタルさん 11/7 夜) */
.su-jobcard.is-noimg > a { justify-content: flex-start; min-height: 0; }
.su-jobcard__img--none { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--su-text) 8%, transparent); color: var(--su-muted); font-size: 15px; font-weight: 700; letter-spacing: .1em; }

/* シロアリのページ:今のページから移した画像(ワタルさん 11/7 夜) */
.su-tm-hero img { display: block; width: 100%; height: auto; border-radius: 6px; }
.su-tm-fig { max-width: 600px; margin: 40px auto 0; text-align: center; }
.su-tm-fig img { width: 100%; height: auto; border-radius: 6px; }
.su-tm-fig figcaption { margin-top: 8px; color: var(--su-muted); font-size: 14px; }
.su-main .su-tm-h3 { margin: 48px 0 16px; font-size: 21px; text-align: center; }
.su-tm-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
.su-tm-2 img { width: 100%; height: auto; border-radius: 6px; }
.su-tm-range { max-width: 1000px; margin: 16px auto 0; }
.su-tm-range img { width: 100%; height: auto; border-radius: 6px; background: #fff; }
.su-tm-blue { display: inline-block; width: 1em; height: 1em; margin-right: 6px; vertical-align: -2px; background: #3d8fe0; border-radius: 2px; }
.su-tm-process { margin-top: 28px; }
.su-tm-process img { aspect-ratio: 16 / 9; }
.su-main .su-tm-text { max-width: 820px; margin: 0 auto 20px; }
.su-tm-hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--su-accent) 40%, transparent) 62%); }
.su-table th img.su-tm-agent { display: block; width: 80px; height: auto; margin: 0 auto 8px; }
@media (max-width: 900px) { .su-tm-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .su-tm-2 { grid-template-columns: 1fr; } }

/* 蟻道の写真2枚を同じ大きさで並べる。施工プロセスの写真は上と間をあける */
.su-tm-pair figure { margin: 0; }
.su-tm-pair img { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 6px; }
.su-tm-pair figcaption { margin-top: 6px; color: var(--su-muted); font-size: 14px; text-align: center; }
.su-main .su-tm-process { margin-top: 28px; }
.su-table thead th:has(.su-tm-agent) { text-align: center; }

/* 光触媒:本番の動画をブラウザの幅いっぱいに */
.su-pc-banner { width: 100%; aspect-ratio: 1280 / 332; overflow: hidden; background: #000; }
.su-pc-banner video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 代表挨拶の署名:名前の前に「代表」(ワタルさん 11/7 夜) */
.su-greet__role { margin-right: .6em; font-size: .6em; font-weight: 700; vertical-align: .15em; }

/* カラー変更:ヘッダー・フッターの段も丸いボタンに。「標準」は斜めに2色(背景に合わせる印) */
.su-color__row button[data-su-band-btn] { flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: var(--c); cursor: pointer; }
.su-color__row button[data-su-band-btn=""] { background: linear-gradient(135deg, #0d2c4a 50%, #f7f3ea 50%); }
.su-color__row > span { line-height: 1.2; }

/* カラー変更:3段の見出しの幅をそろえ、1個目の丸の位置を縦にそろえる(ワタルさん 11/7 夜) */
.su-color__row:has(.su-color__sw) { display: grid; grid-template-columns: 4.6em max-content max-content; column-gap: 8px; align-items: start; }
/* 選んでいる色のコード(右側。相澤さんが LINE に貼るため 11/8) */
.su-color__code { align-self: center; padding: 2px 6px; background: rgba(255, 255, 255, .12); border-radius: 4px; color: #fff; font: 700 12px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .02em; user-select: all; min-width: 5.2em; text-align: center; }
.su-color__copy { margin-left: auto; padding: 2px 8px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; color: #fff; font: inherit; cursor: pointer; }
.su-color__foot { gap: 8px; }
.su-color__presets { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.su-color__presets button { padding: 4px 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.su-color__presets button.is-on { background: #f08200; border-color: #f08200; outline: none; }
.su-color__row:has(.su-color__sw) > span { min-width: 0; margin: 0; white-space: normal; }

/* トップ:今の本番のスライダー(相澤さんの希望でそのまま。高さ700px・スマホ300px、4秒でふわっと切り替え、7秒かけて少し拡大) */
.su-slider { position: relative; height: 700px; overflow: hidden; background: #000; }
.su-slider__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1); transition: opacity 4s ease-in-out, transform 7s ease-in-out; }
.su-slider__slide.is-on { z-index: 1; opacity: 1; transform: scale(1.1); }
.su-slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.su-slider__slide picture { display: block; width: 100%; height: 100%; } /* 11/10 WebP に切り替え */
@media (max-width: 768px) { .su-slider { height: 300px; } }
@media (prefers-reduced-motion: reduce) { .su-slider__slide { transition: opacity 1s; } .su-slider__slide.is-on { transform: none; } }

/* トップ:今の本番のトップから移した部分(11/7 夜 相澤さんの希望) */
.su-clients img { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; }
.su-main .su-clients__lead { margin: 28px 0 16px; font-size: 17px; font-weight: 700; }
.su-kinds { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.su-main .su-points { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.su-points figure { margin: 0; overflow: hidden; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 6px; }
.su-points figcaption { padding: 6px 4px; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; }
.su-points img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.su-main .su-scary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.su-scary__item { padding: 16px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 8px; }
.su-scary__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.su-scary__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.su-main .su-scary h3 { margin: 14px 0 6px; font-size: 18px; }
.su-main .su-scary p { margin: 0; font-size: 14px; }
.su-main .su-rank__lead { margin: -8px 0 24px; font-size: 18px; font-weight: 700; color: var(--su-accent-text); }
.su-rank__head { display: flex; align-items: center; gap: 12px; }
.su-rank__no { flex: none; width: 56px; height: auto; }
.su-main .su-rank__head p { margin: 0; font-weight: 700; }
.su-rank__first { padding: 18px; background: var(--su-bg); border: 2px solid var(--su-accent); border-radius: 8px; }
.su-rank__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.su-rank__grid img, .su-rank__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.su-main .su-rank__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.su-rank__item { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 8px; }
.su-rank__item .su-rank__no { width: 44px; }
.su-rank__item .su-rank__photo { margin-top: auto; }
.su-dock { position: relative; height: 300px; overflow: hidden; }
.su-dock img { width: 100%; height: 100%; object-fit: cover; object-position: right; }
.su-dock::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.su-dock p { position: absolute; top: 50%; left: 50%; z-index: 1; width: min(90%, 900px); margin: 0; transform: translate(-50%, -50%); color: #fff; font-family: var(--su-serif, "Noto Serif JP", serif); font-size: clamp(17px, 2vw, 23px); line-height: 1.8; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
@media (max-width: 1000px) { .su-main .su-points { grid-template-columns: repeat(4, 1fr); } .su-rank__grid { grid-template-columns: repeat(3, 1fr); } .su-main .su-rank__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .su-main .su-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .su-points figcaption { font-size: 12px; padding: 6px 2px; letter-spacing: -0.03em; overflow: hidden; text-overflow: clip; } /* 長い名前（雨戸・シャッター）で右の列だけ広がらないように */
  .su-points li:last-child { display: none; } /* 3列で割り切れるように、最後の1枚は隠す(今の本番と同じ) */
  .su-main .su-scary { grid-template-columns: 1fr; }
  .su-main .su-rank__row { grid-template-columns: 1fr 1fr; }
  .su-dock { height: 340px; }
}

/* 物件の種類の3つの丸を、一辺3分の2に(640px→427px。ワタルさん 11/8) */
.su-kinds { max-width: 427px; }

/* スライダー:JS が動くまでは1枚目を表示(動かない環境でも写真は見える) */
.su-slider:not(.is-ready) .su-slider__slide:first-child { opacity: 1; }

/* スライダーのクロスフェードと、止まらない拡大(ワタルさん 11/8)
   ・写真は出ている間ずっと、ゆっくり拡大し続ける(12秒かけて1→1.12倍。出ている時間は約11秒)
   ・新しい写真を上に重ねて4秒でふわっと出し、前の写真は下で拡大を続けたまま、出し終わってから外す */
.su-slider .su-slider__slide { opacity: 0; transform: none; transition: none; }
.su-slider .su-slider__slide.is-on { z-index: 2; opacity: 1; transition: opacity 3s ease-in-out; animation: su-kb 9s linear forwards; }
.su-slider .su-slider__slide.is-leaving { z-index: 1; opacity: 1; animation: su-kb 9s linear forwards; }
@keyframes su-kb { from { transform: scale(1); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .su-slider .su-slider__slide.is-on, .su-slider .su-slider__slide.is-leaving { animation: none; } }

/* 物件の種類の3つの丸:今の幅1180pxの5分の3=708px(ワタルさん 11/8)。.su-main img の指定に負けないようにしている */
.su-main .su-kinds { max-width: 708px; margin-left: auto; margin-right: auto; }


/* 住宅点検・診断箇所:1枚ずつふわっと出る */
.su-points li.su-pre { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.su-points li.su-pre.is-in { opacity: 1; transform: none; }

/* スライダーの左上のキャッチコピー(明朝体。11/8 ワタルさん「30年後も、ここで。」) */
.su-main .su-slider__catch { position: absolute; top: 0; left: 0; z-index: 5; box-sizing: border-box; max-width: 100%; margin: 0; padding: clamp(28px, 5vw, 64px) clamp(24px, 6vw, 88px) 120px; font-family: var(--su-serif, "Noto Serif JP", "Yu Mincho", serif); font-size: clamp(30px, 5.2vw, 68px); font-weight: 900; line-height: 1.3; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 0 4px rgba(0, 0, 0, .35); pointer-events: none; background: radial-gradient(ellipse at 0 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); }
.su-main .su-slider__catch::before { content: ""; display: block; width: 56px; height: 4px; margin-bottom: 18px; background: var(--su-accent); }
@media (max-width: 768px) { .su-main .su-slider__catch { padding-bottom: 60px; letter-spacing: .04em; } }
/* キャッチコピーは、ページを開いて少ししてから、3秒かけてじんわり出てくる */
.su-main .su-slider__catch { animation: su-catch-in 3.2s ease-out .6s both; }
@keyframes su-catch-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__catch { animation: none; } }

/* キャッチコピーを細い明朝体に(ワタルさん 11/8「太すぎる」)。900→300 */
.su-main .su-slider__catch { font-weight: 300; letter-spacing: .1em; }

/* キャッチコピーの上のオレンジの棒は外す(ワタルさん 11/8) */
.su-main .su-slider__catch::before { display: none; }

/* キャッチコピーの出方:映画の予告のタイトルのように。アクセスした瞬間、巨大な文字が画面の外から一気に縮みながら、減速して所定の位置に収まる(ワタルさん 11/8) */
.su-main .su-slider__catch { transform-origin: 18% 50%; animation: su-catch-title 2.8s cubic-bezier(.12, .8, .2, 1) 0s both; will-change: transform, opacity, filter, letter-spacing; }
@keyframes su-catch-title {
  0%   { opacity: 0; transform: scale(5); letter-spacing: .6em; filter: blur(14px); }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); letter-spacing: .1em; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__catch { animation: none; } }

/* キャッチコピー調整(ワタルさん 11/8):細すぎ→中くらいの太さ(500)/「、」と「ここ」の間をつめる/出てくる距離は近く、最初は速く最後はじんわり止まる */
.su-main .su-slider__catch { font-weight: 500; letter-spacing: .05em; font-feature-settings: "palt"; font-kerning: normal; animation: su-catch-title2 3.4s cubic-bezier(.1, .9, .2, 1) 0s both; }
@keyframes su-catch-title2 {
  0%   { opacity: 0; transform: scale(1.7); letter-spacing: .14em; filter: blur(5px); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); letter-spacing: .05em; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__catch { animation: none; } }

/* キャッチコピーの動く距離を半分に(ワタルさん 11/8)。1.7倍→1.35倍、字間・ぼかしも半分 */
.su-main .su-slider__catch { animation-name: su-catch-title3; }
@keyframes su-catch-title3 {
  0%   { opacity: 0; transform: scale(1.35); letter-spacing: .095em; filter: blur(2.5px); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); letter-spacing: .05em; filter: blur(0); }
}

/* キャッチコピー:終わり際まで動き続けて、最後の最後が本当にゆっくり止まる(ワタルさん 11/8)。6秒・ゆるやかな減速 */
.su-main .su-slider__catch { animation: su-catch-title3 6s cubic-bezier(.3, .6, .4, 1) 0s both; }

/* キャッチコピーの動く距離を、さらに半分に(ワタルさん 11/8)。1.35倍→1.175倍、字間・ぼかしも半分 */
.su-main .su-slider__catch { animation-name: su-catch-title4; }
@keyframes su-catch-title4 {
  0%   { opacity: 0; transform: scale(1.175); letter-spacing: .0725em; filter: blur(1.2px); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); letter-spacing: .05em; filter: blur(0); }
}

/* キャッチコピーをもう一回り太く(ワタルさん 11/8)。500→600 */
.su-main .su-slider__catch { font-weight: 600; }

/* スライダーの右下の小さい文(StepUp の思い)。左上の文のあと、じんわり出る */
.su-main .su-slider__wish { position: absolute; right: 0; bottom: 0; z-index: 5; box-sizing: border-box; max-width: 100%; margin: 0; padding: 90px clamp(24px, 6vw, 88px) clamp(24px, 4vw, 52px) 80px; font-family: var(--su-serif, "Noto Serif JP", "Yu Mincho", serif); font-size: clamp(14px, 1.7vw, 22px); font-weight: 500; line-height: 1.8; letter-spacing: .1em; text-align: right; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .65), 0 0 3px rgba(0, 0, 0, .4); pointer-events: none; background: radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); animation: su-wish-in 3.4s ease-out 2.6s both; }
@keyframes su-wish-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) { .su-main .su-slider__wish { padding-left: 24px; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__wish { animation: none; } }

/* 右下の文:文字を1.6倍に。左上の動き(6秒)の半分=3秒たってから出る(ワタルさん 11/8) */
.su-main .su-slider__wish { font-size: clamp(22px, 2.7vw, 35px); animation: su-wish-in 3.4s ease-out 3s both; }
@media (max-width: 768px) { .su-main .su-slider__wish { font-size: clamp(17px, 4.4vw, 24px); } }

/* 右下の文:位置は右下のまま、2行の左端をそろえる(ワタルさん 11/8) */
.su-main .su-slider__wish { text-align: left; }

/* 右下の文:左上が出始めてから2秒後に出始める(ワタルさん 11/8) */
.su-main .su-slider__wish { animation: su-wish-in 3.4s ease-out 2s both; }

/* 右下の文:左上と反対の動き。左上は左端を固定して大きな文字が縮んで収まるので、右下は右端を固定して、同じように大きいところから縮んで収まる(ワタルさん 11/8)。2秒遅れで同じ6秒・同じ減速 */
.su-main .su-slider__wish { transform-origin: 100% 100%; animation: su-catch-title4 6s cubic-bezier(.3, .6, .4, 1) 2s both; }
.su-main .su-slider__catch { transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__wish { animation: none; } }

/* 右下の文:反対の動きはやめて、左上「30年後も」と同じ動きに戻す(ワタルさん 11/8)。左端(文字の書き出し)を固定して、大きなところから縮んで収まる */
.su-main .su-slider__wish { transform-origin: 80px 50%; }
@media (max-width: 768px) { .su-main .su-slider__wish { transform-origin: 24px 50%; } }

/* 右下の文:3秒後から出現(ワタルさん 11/8) */
.su-main .su-slider__wish { animation-delay: 3s; }

/* 右下の文:後ろからだんだん大きくなって止まる。最初は少し速く、だんだん減速(ワタルさん 11/8)。3秒後に出始め、6秒 */
.su-main .su-slider__wish { transform-origin: 50% 50%; animation: su-wish-grow 6s cubic-bezier(.25, .65, .4, 1) 3s both; }
@media (max-width: 768px) { .su-main .su-slider__wish { transform-origin: 50% 50%; } }
@keyframes su-wish-grow {
  0%   { opacity: 0; transform: scale(.82); letter-spacing: .15em; filter: blur(1.5px); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); letter-spacing: .1em; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__wish { animation: none; } }

/* 右下の文:拡大を小さく(0.82倍→0.94倍から)、動く時間も4.5秒に。じんわり出て、減速しながら止まる(ワタルさん 11/8)。3秒後に出始め */
.su-main .su-slider__wish { animation: su-wish-grow2 4.5s cubic-bezier(.25, .65, .4, 1) 3s both; }
@keyframes su-wish-grow2 {
  0%   { opacity: 0; transform: scale(.94); letter-spacing: .12em; filter: blur(1px); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); letter-spacing: .1em; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__wish { animation: none; } }

/* 右下の文:濃くなるのを、動き(4.5秒)とは別に、6秒かけてゆっくり(ワタルさん 11/8)。3秒後に出始め */
.su-main .su-slider__wish { animation: su-wish-move 4.5s cubic-bezier(.25, .65, .4, 1) 3s both, su-wish-fade 6s ease-in-out 3s both; }
@keyframes su-wish-move {
  0%   { transform: scale(.94); letter-spacing: .12em; filter: blur(1px); }
  100% { transform: scale(1); letter-spacing: .1em; filter: blur(0); }
}
@keyframes su-wish-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__wish { animation: none; } }

/* 右下の文を薄いピンクに(ワタルさん 11/8) */
.su-main .su-slider__wish { color: #ffd3df; }

/* 右下の文:見やすいように影を濃く重ねる(ワタルさん 11/8)。右下の暗がりも少し濃く */
.su-main .su-slider__wish { text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .85), 0 2px 12px rgba(0, 0, 0, .75), 0 0 28px rgba(0, 0, 0, .6); background: radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 72%); }

/* 右下の文:影をさらに強く。同じ影を何重にも重ねて、文字のまわりをしっかり暗く(ワタルさん 11/8) */
.su-main .su-slider__wish { text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .9), 0 1px 3px #000, 0 2px 6px rgba(0, 0, 0, .95), 0 3px 14px rgba(0, 0, 0, .9), 0 0 24px rgba(0, 0, 0, .85), 0 0 40px rgba(0, 0, 0, .7); background: radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%); }

/* 右下の文:2.6秒後に出現(ワタルさん 11/8) */
.su-main .su-slider__wish { animation: su-wish-move 4.5s cubic-bezier(.25, .65, .4, 1) 2.6s both, su-wish-fade 6s ease-in-out 2.6s both; }
@media (prefers-reduced-motion: reduce) { .su-main .su-slider__wish { animation: none; } }

/* 右下の文:ほんの少しだけ太く(500→600。ワタルさん 11/8) */
.su-main .su-slider__wish { font-weight: 600; }

/* 右下の文:もう一段太く(600→700)、文字も一回りだけ大きく(約1.12倍。ワタルさん 11/8) */
.su-main .su-slider__wish { font-weight: 700; font-size: clamp(25px, 3vw, 39px); }
@media (max-width: 768px) { .su-main .su-slider__wish { font-size: clamp(19px, 4.9vw, 27px); } }

/* インスペクション2種類:「StepUpが行うもの」の札の文字だけを大きく(ワタルさん 11/8)。ほかは元のまま */
.su-main .su-two__tag { margin: 0 0 14px; padding: 6px 22px; font-size: 30px; font-weight: 900; letter-spacing: .06em; line-height: 1.4; border-radius: 4px; }
@media (max-width: 640px) { .su-main .su-two__tag { font-size: 24px; } }

/* 侵入箇所の図(11/8 ワタルさん) */
.su-tm-route { max-width: 1100px; margin: 48px auto 0; }
.su-main .su-tm-route img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* スライダーの高さを、ブラウザの高さに合わせる(ワタルさん 11/8)。ブラウザが低くても、右下の文(2行目まで)が最初の画面に収まるようにする。最大700px、最小380px */
.su-slider { height: clamp(380px, calc(100vh - var(--su-header-h)), 700px); height: clamp(380px, calc(100svh - var(--su-header-h)), 700px); }
@media (max-width: 768px) { .su-slider { height: clamp(340px, calc(100svh - var(--su-header-h) - 40px), 520px); } }

/* 右下の文が、右下の「AIに質問」ボタンにかぶらないよう、文を上に上げる(ワタルさん 11/8) */
.su-main .su-slider__wish { padding-bottom: 100px; }
@media (max-width: 768px) { .su-main .su-slider__wish { padding-bottom: 84px; } }

/* ヘッダー:ブラウザ幅に合わせて、ロゴ・文字・ボタン・すき間をなめらかに小さくする(11/8 ワタルさん)
   文字は 14px(上限)〜11.5px(下限)。狭くなったら、先にメニューを消し、電話・自動見積り・お問い合わせ・三本線はなるべく最後まで残す */
:root { --su-hf: clamp(11.5px, calc(.5vw + 7.6px), 14px); }
.su-header .su-header__in { gap: clamp(8px, 1.3vw, 18px); width: min(100% - 24px, 1320px); }
.su-header .su-brand__sub { font-size: clamp(9.5px, calc(.25vw + 7.6px), 12px); }
.su-header .su-brand__logo img { height: clamp(20px, calc(.8vw + 17.8px), 28px); }
.su-header .su-brand__old { font-size: clamp(8.5px, calc(.15vw + 7.6px), 10px); }
.su-header .su-nav__list { gap: 0; }
.su-header .su-nav__item > a, .su-header .su-nav__btn { font-size: var(--su-hf); padding: 8px clamp(5px, .75vw, 11px); }
.su-header .su-nav__item--has > .su-nav__link { padding-right: 3px; }
.su-header .su-nav__item--has > .su-nav__btn { padding-left: clamp(3px, .5vw, 7px); padding-right: clamp(4px, .6vw, 9px); }
.su-header .su-header__cta { gap: clamp(6px, .8vw, 10px); }
.su-header a.su-tel { font-size: clamp(15px, calc(.6vw + 11.4px), 20px); }
.su-header .su-tel__label, .su-header .su-tel__hours { font-size: clamp(8.5px, calc(.15vw + 7.6px), 10px); }
.su-header a.su-btn--head { min-height: 36px; padding: 5px clamp(9px, 1vw, 14px); font-size: var(--su-hf); }
.su-header .su-burger { margin-left: 0; }
/* 段階1:メニューを消す(電話・ボタン・三本線は残す) */
@media (max-width: 940px) { .su-header .su-nav { display: none; } .su-header .su-header__cta { margin-left: auto; } }
/* 段階2:550px 以下で電話の受付時間を消す(番号は残す) */
@media (max-width: 550px) { .su-header .su-tel__hours { display: none; } }
/* 段階3:504px 以下で電話番号を消す(ボタン2つと三本線は残す) */
@media (max-width: 504px) { .su-header a.su-tel { display: none; } }
/* 段階4:スマホの細い画面では、ボタン2つと三本線だけでも入らないので、ボタンを消す(三本線の中にある) */
/* スマホ(420px 以下):ボタンの余白・すき間・ロゴの下の小さな文字をさらに詰めて、360px の画面でもボタン2つと三本線が入るようにする */
@media (max-width: 420px) {
  .su-header .su-header__in { gap: 6px; width: calc(100% - 20px); }
  .su-header .su-brand__old { font-size: 7.5px; letter-spacing: 0; }
  .su-header .su-header__cta { gap: 4px; }
  .su-header a.su-btn--head { padding: 5px 6px; font-size: 11px; }
  .su-header .su-burger { width: 38px; padding: 11px 6px; }
}
@media (max-width: 339px) { .su-header .su-header__cta { display: none; } }

/* 11/8 ワタルさん:施工の流れのタイル。写真をいちばん上にそろえ、文章の長さで写真の位置がずれないようにする。文章は少しだけ詰める */
.su-main .su-steps li:has(> img) { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.75; letter-spacing: -.01em; }
.su-main .su-steps li > img { order: -1; margin: 0 0 12px; }
/* ドローンの空撮の例:写真を一辺4分の3に */
.su-main .su-drone-shots { max-width: 75%; margin-inline: auto; }
@media (max-width: 640px) { .su-main .su-drone-shots { max-width: none; } }
/* 写真の拡大:前後の送りを上の真ん中に。「○ / 8」は出さない */
.su-lb__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.su-lb__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-lb__nav { display: flex; gap: 8px; }
.su-lb__nav[hidden] { display: none; }
.su-lb .su-lb__close { justify-self: end; }
.su-lb__right { justify-self: end; display: flex; gap: 8px; }
/* ログイン中の管理バー(上の黒い帯。重なり順 99999)より手前に出す。管理バーが「元の大きさ」「閉じる」を隠さないように(11/10) */
.su-lb { z-index: 100000; }
.su-lb__cur { z-index: 100001; }
.su-lb button[hidden] { display: none; }
@media (max-width: 640px) { .su-lb__bar { grid-template-columns: 1fr auto; } .su-lb__nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; } }
/* 事例の窓:上に「前の事例・次の事例」 */
.su-casemodal__head { align-items: center; }
.su-casemodal__nav { display: flex; flex: 1; justify-content: center; gap: 10px; }
.su-casemodal__nav button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; background: var(--su-bg2); border: 1px solid var(--su-line); border-radius: 10px; color: var(--su-text); font: 700 14px/1.2 var(--su-ja); cursor: pointer; }
.su-casemodal__nav button:hover { border-color: var(--su-accent); }
.su-casemodal__nav small { color: var(--su-muted); font: 600 11px/1 var(--su-en); letter-spacing: .04em; }
.su-casemodal__nav span { min-width: 1px; }
@media (max-width: 640px) { .su-casemodal__head { flex-wrap: wrap; } .su-casemodal__nav { order: 3; flex-basis: 100%; } }
/* 施工の流れのタイルは幅が狭いので、文節で区切らず普通に折り返す(文節区切りだと行が増えて、高さがそろわない) */
.su-main .su-steps li { word-break: normal; text-wrap: wrap; }
/* 施工の流れ:写真のないタイルは、写真の場所に「画像挿入」を出し、文字の高さをほかとそろえる(11/8 ワタルさん) */
.su-main .su-steps li:has(> .su-steps__noimg) { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.75; letter-spacing: -.01em; }
.su-main .su-steps__noimg { order: -1; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 12px; border-radius: 4px; background: color-mix(in srgb, var(--su-text) 8%, transparent); color: var(--su-muted); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
/* 事例の窓:題名の長さに関係なく、前後のボタンを常に同じ場所(上の真ん中)に。左右の列を同じ幅にして真ん中を固定、ボタンも同じ幅(11/8 ワタルさん) */
.su-casemodal .su-casemodal__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.su-casemodal__head > div:first-child { min-width: 0; }
.su-casemodal__head .su-casemodal__close { justify-self: end; }
.su-casemodal .su-casemodal__nav { display: grid; grid-template-columns: 132px 132px; gap: 10px; }
.su-casemodal__nav button { width: 100%; }
@media (max-width: 640px) { .su-casemodal .su-casemodal__head { grid-template-columns: minmax(0, 1fr) auto; } .su-casemodal .su-casemodal__nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; grid-template-columns: 1fr 1fr; } }
/* 事例の窓:題名が2行になってもボタンの高さが動かないよう上ぞろえ。写真が多くスクロールバーが出る窓と出ない窓で横にずれないよう、スクロールバーの場所を常に取る(11/8 ワタルさん) */
.su-casemodal { overflow-y: scroll; scrollbar-gutter: stable; }
.su-casemodal .su-casemodal__head { align-items: start; }
.su-casemodal .su-casemodal__nav button { height: 52px; justify-content: center; }
/* 自動見積り:見積書のあて名(11/8 相澤さんの依頼) */
.su-est__who { margin: 6px 0 18px; padding-top: 14px; border-top: 1px dashed var(--su-line); }
.su-est__who .su-est__field { grid-template-columns: 110px 1fr; }
.su-est__input--text input { text-align: left; font-size: 16px; }
.su-est__err { margin: 0 0 12px; padding: 12px 16px; border: 2px solid #c8371f; border-radius: 10px; background: #fff5f2; color: #8a1f0f; font-size: 14px; line-height: 1.7; }
.su-est__err[hidden] { display: none; }
.su-est__err ul { margin: 4px 0 0; padding-left: 20px; }
@media (max-width: 640px) { .su-est__who .su-est__field { grid-template-columns: 1fr; row-gap: 6px; } }

/* 自動見積り:スクロールを減らす(11/8 ワタルさん)。すき間を詰め、広い画面は 左=入力/右=金額(スクロールしても付いてくる) */
.su-main .su-sec--est { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(28px, 4vw, 48px); }
.su-main .su-est { max-width: 1040px; padding: 16px 18px; }
.su-main .su-est__tabs { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; padding: 4px; }
.su-main .su-est__tabs button { padding: 7px 6px; font-size: 13px; line-height: 1.35; }
.su-main .su-est__unit { margin-bottom: 10px; font-size: 13px; }
.su-main .su-est__unit button { padding: 4px 14px; font-size: 13px; }
.su-main .su-est__field { margin-bottom: 8px; }
.su-main .su-est__field label { font-size: 14px; }
.su-main .su-est__field small { margin-top: 1px; }
.su-main .su-est__input input { padding: 7px 10px; font-size: 17px; }
.su-main .su-est__input--text input { font-size: 15px; }
.su-main .su-est__label { margin: 2px 0 6px; font-size: 14px; }
.su-main .su-est__checks { gap: 5px; margin-bottom: 10px; }
.su-main .su-est__checks label { padding: 6px 10px; font-size: 13.5px; }
.su-main .su-est__who { margin: 4px 0 6px; padding-top: 10px; }
.su-main .su-est__who .su-note { margin: 0; font-size: 12.5px; }
.su-main .su-est__result { margin-top: 12px; padding: 12px 16px; }
.su-main .su-est__result ul { font-size: 13.5px; }
.su-main .su-est__result li { padding: 3px 0; }
.su-main .su-est__actions { gap: 8px; margin-top: 12px; }
/* 郵便番号の欄 */
.su-est__field--zip .su-est__input { flex-wrap: wrap; }
.su-est__zipmark { flex: none; color: var(--su-muted); }
.su-main .su-est__field--zip input { flex: 0 0 11.5em; width: 11.5em; max-width: 100%; }
.su-main .su-est__field--zip small { grid-column: auto; margin: 0; color: var(--su-muted); font-size: 12px; text-align: left; }
.su-main .su-est__field--zip small.is-err { color: #b3261e; }
/* 建物名・部屋番号の欄と「戸建て」のチェック */
@media (min-width: 641px) { .su-main .su-est__who .su-est__field { grid-template-columns: 9.5em 1fr; } .su-main .su-est__who .su-est__field > label { white-space: nowrap; } }
@media (min-width: 900px) {
  .su-main .su-est { display: grid; grid-template-columns: minmax(0, 1fr) 310px; column-gap: 22px; align-items: start; }
  .su-main .su-est__side { position: sticky; top: calc(var(--su-header-h, 76px) + 12px); }
  .su-main .su-est__side .su-est__result { margin-top: 0; }
  .su-main .su-est__side .su-est__actions { flex-direction: column; align-items: stretch; }
  .su-main .su-est__side .su-est__actions .su-btn { justify-content: center; width: 100%; text-align: center; }
  .su-main .su-est__side .su-est__total b { font-size: clamp(28px, 3vw, 36px); }
}
@media (max-width: 640px) {
  .su-main .su-est__tabs button { padding: 6px 3px; font-size: 12px; }
}
@media print { body.su-print-est .su-est { display: block !important; } body.su-print-est .su-est__side { position: static !important; } }

/* 自動見積りのタブ:選ばれていないタブを薄いグレーに(11/8 ワタルさん「選んだタブとの差が足りない」) */
.su-main .su-est__tabs button { background: color-mix(in srgb, var(--su-accent) 11%, color-mix(in srgb, var(--su-text) 5%, var(--su-bg2))); border: 1px solid color-mix(in srgb, var(--su-accent) 26%, color-mix(in srgb, var(--su-text) 12%, transparent)); color: color-mix(in srgb, var(--su-text) 62%, transparent); font-weight: 600; }
.su-main .su-est__tabs button:hover { background: color-mix(in srgb, var(--su-accent) 22%, var(--su-bg2)); border-color: color-mix(in srgb, var(--su-accent) 50%, transparent); color: var(--su-text); }
.su-main .su-est__tabs button.is-on, .su-main .su-est__tabs button.is-on:hover { background: var(--su-accent); border-color: var(--su-accent); color: var(--su-on-accent); font-weight: 700; box-shadow: 0 2px 6px color-mix(in srgb, var(--su-accent) 35%, transparent); }

/* 11/9 色の選ぶ順番(① 背景 → ② ヘッダー・フッター → ③ メイン)。まだ押せない段は薄く */
.su-color__guide { margin: 4px 0 6px; color: #f3d9b0; font-size: 12px; line-height: 1.6; }
.su-color__row.is-locked { opacity: .3; }
.su-color__row.is-locked button, .su-color__row.is-locked .su-color__pick { cursor: not-allowed; }
.su-color__row button:disabled { cursor: not-allowed; }

/* 11/9 夜 相澤さんの最新の地図(2026-1108)に合わせる:波紋の中心を地図の久喜市の点(横50.64%・縦48.4%)に。地図に「久喜市(Step Up)」と点が描いてあるので、上に重ねていた黒い点と StepUp の文字は出さない(ワタルさん) */
.su-ripple i { left: 50.64%; top: 48.4%; }
.su-ripple b, .su-ripple em { display: none; }

/* 11/9 お問い合わせの電話番号の下:営業電話お断り(相澤さんの依頼。電話番号と同じ幅・中央・目立たせる) */
.su-telbox { display: flex; flex-direction: column; align-items: stretch; width: fit-content; max-width: 100%; }
.su-main .su-telbox .su-nosales { margin: 14px 0 0; padding: 8px 10px; border: 2px solid #c0281c; background: #fff1ef; color: #c0281c; font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; border-radius: 6px; white-space: nowrap; }
@media (max-width: 480px) { .su-nosales { font-size: 13px; padding: 8px 6px; } }
.su-main .su-telbox { margin-bottom: 26px; }
.su-main ol.su-faqnav { margin-left: auto; margin-right: auto; }

/* 11/9 トップのサービス一覧:10個とも同じオレンジの細い枠(ワタルさん。1番・2番だけ濃くしない) */
.su-jobcards .su-jobcard > a, .su-jobcards .su-jobcard.is-main > a { border: 1px solid var(--su-accent); transition: none; }

/* 認定書:マウスを乗せると大きくなって、文字が読める(ワタルさん 11/9)。スマホなど乗せられない端末は今のまま */
@media (hover: hover) and (pointer: fine) {
  .su-cards .su-card.su-cert { position: relative; transition: transform .28s ease, box-shadow .28s ease; transform-origin: center 35%; cursor: zoom-in; }
  .su-cards .su-card.su-cert:hover { transform: scale(1.6); z-index: 60; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
  .su-cards .su-card.su-cert:first-child { transform-origin: left 35%; }
  .su-cards .su-card.su-cert:nth-child(2) { transform-origin: right 35%; }
}

/* 自動見積り:入力の行間を縦にゆったり(ワタルさん 11/9。8日の「詰める」を少し戻す) */
.su-main .su-est { padding: 22px 22px; }
.su-main .su-est__tabs { margin-bottom: 18px; }
.su-main .su-est__unit { margin-bottom: 20px; }
.su-main .su-est__field { margin-bottom: 20px; }
.su-main .su-est__input input { padding: 11px 12px; }
.su-main .su-est__label { margin: 8px 0 12px; }
.su-main .su-est__checks { gap: 11px; margin-bottom: 20px; }
.su-main .su-est__checks label { padding: 11px 12px; }
.su-main .su-est__who { margin: 10px 0 14px; padding-top: 20px; }
.su-main .su-est__who .su-note { margin: 4px 0 0; }
.su-main .su-est__actions { margin-top: 18px; }

/* 対応エリア:地図を中央に、一回り大きく。凡例と注意書きは地図の下(ワタルさん 11/9) */
.su-area { display: block; max-width: 1040px; }
.su-areamap { width: min(100%, 740px); margin: 0 auto; }
.su-area > div { width: min(100%, 560px); margin: 28px auto 0; }
.su-area .su-note { text-align: center; }

/* 凡例(色の説明)は「関東全域へ…」の文の下へ。文字は2回り大きく。「地図を押すと…」は地図の上(ワタルさん 11/9) */
.su-areainfo { width: fit-content; max-width: 100%; margin: 0 auto 28px; }
.su-arealegend--top { margin: 0 0 4px; padding: 0; list-style: none; }
.su-main .su-areainfo__note { margin: 0; padding-left: 100px; color: var(--su-muted); font-size: 16px; text-align: left; }
.su-arealegend--top li { margin-bottom: 14px; gap: 16px; }
.su-arealegend--top i { width: 84px; height: 46px; }
.su-arealegend--top span { font-size: 21px; line-height: 1.5; }
.su-area .su-area__hint { margin: 0 0 10px; }
@media (max-width: 640px) { .su-arealegend--top span { font-size: 17px; } .su-arealegend--top i { width: 60px; height: 36px; } .su-main .su-areainfo__note { padding-left: 76px; font-size: 14px; } }

/* 料金・対応エリアの料金表(1〜8番)と諸経費:パソコンでは横を広げ、文字を大きく(ワタルさん 11/9) */
@media (min-width: 900px) {
  .su-main .su-pricegroup { max-width: 1040px; }
  .su-main #expenses .su-prices--one, .su-main #expenses .su-prices { max-width: 1040px; }
  .su-main #expenses .su-prices ~ .su-center .su-btn { max-width: 1040px; }
  .su-main .su-pricegroup > summary { gap: 16px; padding: 14px 24px; font-size: 23px; }
  .su-main .su-pricegroup > summary .su-priceno { width: 34px; height: 34px; font-size: 18px; }
  .su-main .su-pricegroup__body { padding: 26px 30px 30px; }
  .su-main .su-pricegroup__body > .su-note { font-size: 16px; line-height: 1.8; }
  .su-main .su-pricegroup .su-prices li, .su-main #expenses .su-prices li { padding: 20px 26px; column-gap: 32px; }
  .su-main .su-pricegroup .su-prices li > span, .su-main #expenses .su-prices li > span { font-size: 19px; font-weight: 700; }
  .su-main .su-pricegroup .su-prices b, .su-main #expenses .su-prices b { font-size: 25px; }
  .su-main .su-pricegroup .su-prices small, .su-main #expenses .su-prices small { margin-top: 6px; font-size: 15px; line-height: 1.65; }
}

/* 色の説明+境界付近の注意はセットで地図の下へ。「地図を押すと…」は地図の上のまま、文字を大きく(ワタルさん 11/9) */
.su-area > .su-areainfo { width: fit-content; max-width: 100%; margin: 32px auto 0; }
.su-main .su-area .su-area__hint { margin: 0 0 14px; color: var(--su-text); font-size: 22px; font-weight: 700; text-align: center; }
@media (max-width: 640px) { .su-main .su-area .su-area__hint { font-size: 17px; } }

/* シロアリ:使用薬品情報(11/10 相澤さん 修正依頼2の12) */
.su-main .su-agentinfo { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.su-agentinfo li { background: var(--su-bg); border: 1px solid var(--su-line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.su-agentinfo b { font-size: 15px; }
.su-agentinfo small { color: var(--su-sub, #666); font-size: 13px; }
.su-agentinfo a { margin-top: 6px; font-size: 13px; }
@media (max-width: 900px) { .su-main .su-agentinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .su-main .su-agentinfo { grid-template-columns: 1fr; } }
#agents-detail .su-tablewrap table { min-width: 1040px; } /* 薬剤6列 */
/* ハウスクリーニング:3枚・6枚なので3列(11/10) */
.su-gallery.su-gallery--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .su-gallery.su-gallery--3 { grid-template-columns: repeat(2, 1fr); } }