/* 萩原レーザー 共通スタイル
   デザインの元: Claude Design「Hagiwara Top Page Directions」2a 切断線 — 黒鉄と1本のレーザー光
   幅に応じた大きさは cqw(.page の幅)で指定する。 */

:root {
  --ink: #141618;          /* 白地の文字 */
  --iron: #111315;         /* 黒い面 */
  --iron-deep: #0b0c0d;    /* フッター・数字の帯 */
  --iron-panel: #1d2124;   /* 写真の仮枠 */
  --line-dark: #24282b;
  --line-dark-2: #2a2e32;
  --line-dark-3: #3a3f44;
  --paper: #f3f2ee;        /* 灰色の面 */
  --line: #d6d4ce;
  --muted: #50565b;        /* 白・灰地の補足文字 */
  --body-strong: #2c3034;
  --on-dark: #f2f0eb;
  --on-dark-2: #d9dbdc;
  --on-dark-3: #c9cccf;
  --on-dark-muted: #b4b8bb;
  --laser: #ff5b1f;        /* ボタン・光の線 */
  --laser-light: #ff7a45;  /* 黒地の強調文字 */
  --laser-text: #c2410c;   /* 白地の強調文字 */
  --ghost: #8a9196;        /* 未確定の数字の輪郭 */
  --font: 'Zen Kaku Gothic New', 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --gutter: max(20px, calc((100cqw - 1200px) / 2 + 40px));
  --section-y: clamp(64px, 9cqw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}

.page { container-type: inline-size; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--laser-text); }
a:hover { color: #8f2f08; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--laser);
  outline-offset: 3px;
}

h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--laser); color: var(--iron); font-weight: 700;
}
.skip:focus { top: 8px; }

.num { font-family: var(--font-num); font-weight: 600; }
.arrow { font-family: var(--font-num); font-size: 1.25em; line-height: 1; }

/* ---------- 未確定の値(朱色の点線) ---------- */
.tbd { border-bottom: 2px dotted var(--laser-text); }
.on-dark .tbd, .tbd--dark { border-bottom-color: var(--laser); }
/* 未確定の数字は輪郭だけで見せる */
.ghost { color: transparent; -webkit-text-stroke: 1.5px var(--ghost); }
.tbd-note { font-size: 13px; font-weight: 700; color: var(--laser-text); }
.on-dark .tbd-note { color: var(--laser-light); }

/* ---------- 枠・面 ---------- */
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: var(--section-y) var(--gutter); }
.bg-white { background: #fff; }
.bg-paper { background: var(--paper); }
.on-dark { background: var(--iron); color: var(--on-dark); }
.on-dark a:not(.btn) { color: var(--on-dark); }

.glow-line { height: 2px; background: var(--laser); box-shadow: 0 0 14px 2px rgba(255, 91, 31, .6); }

/* ---------- 見出し ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: .16em; color: var(--laser-text); font-weight: 700;
}
.eyebrow__no { font-family: var(--font-num); font-size: 18px; letter-spacing: .06em; }
.eyebrow__rule { width: 40px; height: 1px; background: currentColor; }
.on-dark .eyebrow { color: var(--laser-light); }
.on-dark .eyebrow__rule { background: var(--laser); }

.h2 {
  margin: 14px 0 clamp(32px, 4cqw, 56px);
  font-size: clamp(30px, 4cqw, 52px); line-height: 1.3; font-weight: 900; letter-spacing: .02em;
}
/* 見出しを言葉の切れ目で折り返す */
.nw { display: inline-block; }
.h2--xl { font-size: clamp(34px, 5cqw, 64px); line-height: 1.2; }
.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 12px 48px; margin-bottom: clamp(32px, 4cqw, 56px);
}
.section-head .h2 { margin-bottom: 0; }
.lead-muted { max-width: 26em; color: var(--muted); text-wrap: pretty; }

/* ---------- ボタン・リンク ---------- */
.btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 0 24px;
  font-weight: 900; text-decoration: none; letter-spacing: .02em;
}
.btn--primary { background: var(--laser); color: var(--iron); }
.btn--primary:hover { background: var(--laser-light); color: var(--iron); }
.btn--outline-dark { border: 1px solid #6b7176; color: var(--on-dark); font-weight: 700; }
.btn--outline-dark:hover { border-color: var(--on-dark); color: #fff; }
.on-dark a.btn--outline-dark { color: var(--on-dark); }
.btn--xl { min-height: 68px; padding: 0 32px; font-size: 18px; gap: 24px; }

.text-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  font-weight: 700; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--laser); white-space: nowrap;
}
.text-link:hover { color: var(--laser-text); }
.on-dark a.text-link { color: var(--on-dark); }
.on-dark a.text-link:hover { color: var(--laser-light); }

/* ---------- 下層ページの最初の帯(パンくず・題名・説明・ページ内リンク) ---------- */
.sub-hero {
  padding: clamp(28px, 3.4cqw, 44px) var(--gutter) clamp(44px, 6cqw, 80px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.2cqw, 28px);
}
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--on-dark-muted); }
.on-dark .crumb a { color: var(--on-dark-2); }
.sub-hero__title { margin: 0; font-size: clamp(36px, 5.4cqw, 72px); line-height: 1.2; font-weight: 900; letter-spacing: .02em; }
.sub-hero__title > span { white-space: nowrap; }
.sub-hero__lead { max-width: 34em; color: var(--on-dark-2); font-size: clamp(17px, 1.5cqw, 19px); text-wrap: pretty; }

.jump { background: var(--iron-deep); padding: 0 max(0px, calc((100cqw - 1200px) / 2 + 20px)); }
.jump__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 160px), 1fr)); }
.on-dark .jump a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 60px; padding: 0 20px; color: var(--on-dark); text-decoration: none; font-weight: 700;
  border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
}
.on-dark .jump a:last-child { border-right: 0; }
.on-dark .jump a:hover { color: var(--laser-light); }
.jump__ar { font-family: var(--font-num); color: var(--laser-light); }
/* 目立たせる1つ(見積もりフォームなど) */
.on-dark .jump a.jump__em { background: var(--laser); color: var(--iron); font-weight: 900; border: 0; }
.on-dark .jump a.jump__em:hover { background: var(--laser-light); color: var(--iron); }
.jump a.jump__em .jump__ar { color: inherit; }

/* 確認中であることを示す札 */
.flag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #8f2f08; background: #fff1ea; padding: 6px 12px; }

/* ---------- 番号つきの項目(こんなときに・相談の例など) ---------- */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); border-top: 2px solid var(--ink); list-style: none; padding: 0; }
.case {
  padding: clamp(22px, 2.6cqw, 36px) clamp(0px, 2cqw, 32px) clamp(22px, 2.6cqw, 36px) 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 20px;
}
.case:nth-child(even) { padding-right: 0; padding-left: clamp(0px, 2cqw, 32px); }
.case__no { font-family: var(--font-num); font-size: 20px; font-weight: 600; color: var(--laser-text); line-height: 1.7; }
.case__title { font-size: clamp(23px, 2.4cqw, 30px); font-weight: 900; line-height: 1.4; }
.case__text { margin-top: 6px; color: var(--muted); }
.case__note { margin-top: 8px; }
.on-dark .cases { border-top-color: var(--on-dark); }
.on-dark .case { border-bottom-color: var(--line-dark-3); }
.on-dark .case__no { color: var(--laser-light); }
.on-dark .case__text { color: var(--on-dark-3); }

/* ---------- 大きな数字の並び(精度・納期・最低金額など) ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: 32px; border-top: 2px solid var(--ink); }
.fact { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.fact dt { font-size: 15px; color: var(--muted); }
.fact__big { font-family: var(--font-num); font-weight: 600; font-size: clamp(40px, 4.4cqw, 56px); line-height: 1.1; white-space: nowrap; }
.fact__pre { font-size: .5em; color: var(--laser-text); margin-right: 4px; }
.fact__pre--ja { font-family: var(--font); font-size: 18px; font-weight: 700; color: var(--ink); margin-right: 6px; }
.fact__unit { font-family: var(--font); font-size: 18px; font-weight: 700; margin-left: 6px; }
.fact__ja { font-size: clamp(22px, 2.2cqw, 28px); font-weight: 900; line-height: 1.5; }
.fact__note { font-size: 15px; color: var(--muted); text-wrap: pretty; }

/* ---------- 写真の仮枠(3:2) ---------- */
.photo {
  position: relative; aspect-ratio: 3 / 2; margin: 0;
  background-color: var(--iron-panel);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px);
  overflow: hidden;
}
.photo--glow {
  background-image: radial-gradient(ellipse at 58% 62%, rgba(255,91,31,.22), transparent 50%),
                    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px);
}
.photo--glow-soft {
  background-image: radial-gradient(ellipse at 40% 70%, rgba(255,91,31,.12), transparent 50%),
                    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px);
}
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.photo__label {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  font-size: 12px; letter-spacing: .04em; color: var(--on-dark-muted); line-height: 1.5;
}

/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.spec tr { border-bottom: 1px solid var(--line); }
.spec th {
  text-align: left; padding: 14px 16px 14px 0; width: 84px;
  font-size: 14px; font-weight: 500; color: var(--muted); vertical-align: top; white-space: nowrap;
}
.spec td { padding: 14px 0; }
.spec__num { font-family: var(--font-num); font-size: 30px; font-weight: 600; line-height: 1.2; }
.spec__unit { font-size: 18px; margin-left: 4px; }
.spec__unit--ja { font-family: var(--font); }
.spec__note { font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 10px; }

/* ---------- 対応エリアのチップ ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.chips li { padding: 4px 12px; background: #fff; font-size: 15px; }
.chips li.is-main { background: var(--ink); color: #fff; font-weight: 700; }
.chips li.is-etc { padding: 4px; background: none; color: var(--muted); }

/* ---------- 地図の仮枠 ---------- */
.map {
  position: relative; aspect-ratio: 3 / 2; margin: 0;
  background-color: #d8d6d0;
  background-image: linear-gradient(#cfccc5 1px, transparent 1px), linear-gradient(90deg, #cfccc5 1px, transparent 1px);
  background-size: 40px 40px;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__pin {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--laser); box-shadow: 0 0 0 6px rgba(255,91,31,.25);
}
.map__label { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 12px; color: #3d4246; }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--iron); color: var(--on-dark); position: relative; }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 88px; padding: 0 max(40px, calc((100cqw - 1200px) / 2));
  border-bottom: 1px solid var(--line-dark-2);
}
.brand { display: flex; align-items: baseline; gap: 16px; text-decoration: none; }
.site-header a.brand { color: var(--on-dark); }
.brand__name { font-size: 24px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.brand__sub { font-size: 13px; color: var(--on-dark-muted); letter-spacing: .06em; white-space: nowrap; }
.brand__sub--narrow { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 28px; }
.header-tel {
  display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; line-height: 1.15;
}
.site-header a.header-tel { color: var(--on-dark); }
.header-tel__num { font-size: 32px; letter-spacing: .03em; }
.header-tel__hours { font-size: 12px; color: var(--on-dark-muted); white-space: nowrap; }
.header-tel__hours .tbd { border-bottom-color: var(--laser); }
.btn--header { min-height: 56px; padding: 0 26px; font-size: 16px; gap: 12px; letter-spacing: .04em; white-space: nowrap; }
.menu-btn { display: none; }

.global-nav { display: flex; gap: 4px; padding: 0 max(28px, calc((100cqw - 1200px) / 2 - 12px)); }
.global-nav > a {
  padding: 14px 12px; font-size: 15px; color: var(--on-dark-2);
  text-decoration: none; white-space: nowrap;
}
.global-nav > a:hover { color: #fff; }
.global-nav > a[aria-current="page"] { color: var(--on-dark); font-weight: 700; box-shadow: inset 0 -3px 0 var(--laser); }
.global-nav__contact { display: none; }

/* ---------- 最後の依頼の帯 ---------- */
.cta { background: var(--iron); color: var(--on-dark); }
.cta__inner {
  padding-top: clamp(56px, 8cqw, 112px); padding-bottom: clamp(56px, 8cqw, 112px);
  display: flex; flex-direction: column; gap: clamp(28px, 3.4cqw, 44px);
}
.cta__lead { font-size: clamp(28px, 4.2cqw, 56px); font-weight: 900; line-height: 1.35; letter-spacing: .01em; max-width: 18em; text-wrap: pretty; }
.cta__em { color: var(--laser-light); border-bottom: 3px dotted var(--laser); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.cta__actions .btn { flex: 0 1 360px; box-sizing: content-box; }
.cta__tel { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.cta a.cta__tel { color: var(--on-dark); }
.cta__tel-label { font-size: 14px; color: var(--on-dark-muted); }
.cta__tel-num { font-size: clamp(40px, 4.4cqw, 56px); letter-spacing: .02em; }

/* ---------- フッター ---------- */
.site-footer { background: var(--iron-deep); color: var(--on-dark-3); padding: clamp(40px, 5cqw, 64px) var(--gutter) 40px; }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between;
  padding-bottom: 32px; border-bottom: 1px solid var(--line-dark);
}
.site-footer__info { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.site-footer__info a { color: var(--on-dark); }
.site-footer__info .tbd { border-bottom-color: var(--laser); }
.site-footer__name { font-size: 22px; font-weight: 900; color: var(--on-dark); letter-spacing: .08em; }
.site-footer__nav { display: flex; flex-direction: column; font-size: 15px; }
.site-footer__nav a { color: var(--on-dark); min-height: 44px; display: flex; align-items: center; text-decoration: none; }
.site-footer__nav a:hover { color: var(--laser-light); }
.site-footer__copy { margin-top: 20px; font-size: 13px; color: #8e9497; }

/* ---------- スマホの下の2つのボタン ---------- */
.mobile-bar { display: none; }

/* ================= スマホ・タブレット ================= */
@media (max-width: 959px) {
  body { padding-bottom: 66px; }

  /* 1列のときは、2列目用の左の余白を付けない */
  .case:nth-child(even) { padding-left: 0; }

  .site-header__bar { height: auto; padding: 8px 8px 8px 20px; }
  .brand { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.35; }
  .brand__name { font-size: 20px; }
  .brand__sub { font-size: 12px; letter-spacing: .02em; }
  .brand__sub--wide { display: none; }
  .brand__sub--narrow { display: inline; }
  .site-header__actions { display: none; }

  .menu-btn {
    width: 56px; height: 56px; flex: none; border: 1px solid var(--line-dark-3); background: transparent;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: pointer;
  }
  .menu-btn span { display: block; width: 24px; height: 2px; background: var(--on-dark); transition: transform .2s; }
  .menu-btn span:nth-child(3) { width: 16px; background: var(--laser); margin-left: -8px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { width: 24px; margin-left: 0; background: var(--on-dark); transform: translateY(-8px) rotate(-45deg); }

  .global-nav {
    display: none; flex-direction: column; gap: 0;
    padding: 8px 20px 24px; border-bottom: 2px solid var(--laser);
  }
  .global-nav.is-open { display: flex; }
  .global-nav > a {
    min-height: 56px; display: flex; align-items: center; padding: 0 4px;
    font-size: 17px; border-bottom: 1px solid var(--line-dark-2);
  }
  .global-nav > a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--laser); padding-left: 16px; }
  .global-nav__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1.2fr;
    background: var(--iron); border-top: 2px solid var(--laser);
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bar a { height: 64px; display: flex; font-weight: 900; font-size: 17px; text-decoration: none; }
  .mobile-bar__tel { flex-direction: column; align-items: center; justify-content: center; color: var(--on-dark); line-height: 1.15; }
  .mobile-bar__tel:hover { color: #fff; }
  .mobile-bar__tel .num { font-size: 15px; font-weight: 500; color: var(--on-dark-muted); }
  .mobile-bar__form { align-items: center; justify-content: center; gap: 10px; background: var(--laser); color: var(--iron); }
  .mobile-bar__form:hover { color: var(--iron); background: var(--laser-light); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.nf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }