/* ==========================================================================
   巴製作所 — UI components  (ui.css / 旧 tomoe-ui.css)
   ヘッダー / フッター / ボタン / セクション見出し / CTA帯
   ※ tokens: style.css :root に依存
   ========================================================================== */

/* --------------------------------------------------------------------------
   レガシー互換: style.css の global `section { display:flex; align-items:center;
   flex-direction:column }` は新レイアウト（CTA帯・ヒーロー等）と競合するため、
   新デザインのセクション系ラッパーでは display を素直に戻す。
   -------------------------------------------------------------------------- */
section.section,
section.cta-band,
section.related,
section.related-columns,
section.article-faq,
section.related-cases,
section.news-related,
section.mat-overview { display: block; }

/* --------------------------------------------------------------------------
   タイポグラフィ・ユーティリティ（旧 colors_and_type.css の見出しヘルパー）
   新マークアップが使用（.h2 / .eyebrow / .num など）。クラス限定のため
   既存ページ（.section-title 等を使用）には影響しない。
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-jp); font-weight: var(--fw-black); font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--ink);
}
.h1 { font-family: var(--font-jp); font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-jp); color: var(--ink); }
.h2 { font-family: var(--font-jp); font-weight: var(--fw-x);     font-size: var(--fs-h2); line-height: 1.25;                letter-spacing: var(--ls-jp); color: var(--ink); }
.h3 { font-family: var(--font-jp); font-weight: var(--fw-bold);  font-size: var(--fs-h3); line-height: 1.4;                 letter-spacing: var(--ls-jp); color: var(--ink); }
.display, .h1, .h2 { text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.95; color: var(--ink-2); text-wrap: pretty; }

/* 英字ラベル（mono）— セクション番号・EN見出し・電話番号・スペック値に */
.eyebrow {
  font-family: var(--font-mono); font-weight: var(--fw-med); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--green-700);
}
.mono { font-family: var(--font-mono); font-feature-settings: normal; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

/* セクションの基本余白 */
.section { padding: clamp(64px, 8vw, 120px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.bg-paper-2 { background: var(--paper-2); }
.bg-ink { background: var(--ink); color: #fff; }

/* ==========================================================================
   セクション見出し（英字ラベル mono ＋ 日本語見出し ＋ 細い緑罫）
   ========================================================================== */
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-head .eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--green); display: inline-block;
}
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head .h2 { margin: 0; }
.sec-head__index {           /* 大きな連番 01 / 02 …（うっすら） */
  font-family: var(--font-mono); font-weight: 500; color: var(--paper-3);
  font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: 0;
}

/* ==========================================================================
   ボタン（直角・ヘアライン・矢印） — pillは廃止
   ========================================================================== */
.btn {
  --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 15px;
  letter-spacing: .04em; line-height: 1;
  padding: 17px 28px; border: 1px solid var(--_bd); border-radius: var(--r-xs);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.btn { white-space: nowrap; }
.btn .ar { width: 16px; height: 16px; transition: transform .25s var(--ease); flex: none; }
.btn:hover .ar { transform: translateX(4px); }
.btn--ink:hover  { --_bg: var(--green); --_bd: var(--green); --_fg: #0f1a08; }
.btn--green { --_bg: var(--green); --_fg: #0f1a08; --_bd: var(--green); }
.btn--green:hover { --_bg: var(--green-700); --_bd: var(--green-700); --_fg: #fff; }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--ink); }
.btn--ghost:hover { --_bg: var(--ink); --_fg: #fff; }
.btn--on-dark.btn--ghost { --_fg: #fff; --_bd: rgba(255,255,255,.45); }
.btn--on-dark.btn--ghost:hover { --_bg: #fff; --_fg: var(--ink); --_bd:#fff; }
.btn--lg { padding: 20px 34px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* テキストリンク（矢印付き） */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--fw-bold); font-size: 15px; color: var(--ink);
  border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .25s, color .25s;
}
.link-arrow .ar { width: 15px; height: 15px; color: var(--green-700); transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--green-800); border-color: var(--green); }
.link-arrow:hover .ar { transform: translateX(4px); }

/* ==========================================================================
   ヘッダー
   --------------------------------------------------------------------------
   上段: ユーティリティバー（住所 / TEL・営業時間 mono）
   下段: ロゴ ＋ グローバルナビ ＋ お問い合わせ
   白背景＋下ヘアライン。pill・緑塗りホバーは廃止し、緑のアンダーラインに。
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--paper); box-shadow: none; transition: box-shadow .25s var(--ease); }
body.is-scrolled .site-header { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(21,23,26,.06); }

.util-bar { border-bottom: 1px solid var(--line); background: var(--paper); }
.util-bar__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.util-bar__left { font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.util-bar__right { display: flex; align-items: center; gap: 24px; }
.util-tel { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: var(--ink); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.util-tel .ic { color: var(--green-700); width: 13px; height: 13px; }
.util-hours { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; white-space: nowrap; }

.header-main { border-bottom: 1px solid var(--line-strong); }
.header-main__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; }
.brand img { height: 46px; width: auto; }

.gnav { display: flex; align-items: stretch; height: var(--header-h); }
.gnav > ul { display: flex; list-style: none; margin: 0; padding: 0; height: 100%; }
.gnav > ul > li { position: relative; display: flex; align-items: stretch; }
.gnav > ul > li > a {
  display: inline-flex; align-items: center; gap: 7px; height: 100%;
  padding: 0 22px; font-size: 15px; font-weight: var(--fw-med); color: var(--ink);
  letter-spacing: .09em; position: relative;
}
.gnav > ul > li > a::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.gnav > ul > li:hover > a::after,
.gnav > ul > li.is-current > a::after { transform: scaleX(1); }
.gnav .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .55; }

/* ドロップダウン（直角・ヘアライン・影最小） */
.gnav .submenu {
  position: absolute; top: 100%; left: 8px; min-width: 230px; list-style: none; margin: 0;
  padding: 8px 0; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 50;
}
.gnav > ul > li:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.gnav .submenu a {
  display: flex; align-items: center; gap: 10px; padding: 11px 20px; font-size: 14px; font-weight: var(--fw-med); color: var(--ink-2);
}
.gnav .submenu a::before { content: ""; width: 5px; height: 5px; background: var(--green); flex: none; transform: rotate(45deg); opacity: 0; transition: opacity .2s; }
.gnav .submenu a:hover { color: var(--ink); background: var(--paper-2); }
.gnav .submenu a:hover::before { opacity: 1; }

.header-cta { display: flex; align-items: center; gap: 12px; margin-left: 18px; padding-left: 30px; border-left: 1px solid var(--line); }
.header-cta .btn { padding: 15px 26px; font-size: 14px; letter-spacing: .08em; }

/* ハンバーガー（緑の角丸→直角の枠線ボタンに） */
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-xs); cursor: pointer; position: relative; z-index: 1201; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* モバイルナビ（脱・青紫グラデ → クリーンな白＋インク） */
.mnav { position: fixed; inset: 0; background: var(--paper); z-index: 1200; transform: translateX(100%); transition: transform .38s var(--ease-out); overflow-y: auto; display: none; }
.mnav.is-open { transform: translateX(0); }
.mnav__inner { padding: 0 24px 40px; min-height: 100%; display: flex; flex-direction: column; }
/* 上部ロゴ（トップへ戻る導線）。バーガーXと同じ高さに揃える */
.mnav__logo { display: inline-flex; align-items: center; height: var(--header-h-mobile); }
.mnav__logo img { height: 34px; width: auto; }
.mnav__sec { padding: 16px 0; border-bottom: 1px solid var(--line); }
.mnav__sec:first-of-type { border-top: 1px solid var(--line); }
.mnav__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-700); display: block; margin-bottom: 8px; }
.mnav__sec a { display: block; font-size: 17px; font-weight: var(--fw-med); color: var(--ink); padding: 9px 0; }
.mnav__sec a.sub { font-size: 15.5px; color: var(--ink-2); padding-left: 14px; }
.mnav__sec a:hover { color: var(--green-800); }

/* 下部CTA：お問い合わせ（緑）＋ 電話ブロック（枠・等幅番号・受付時間） */
.mnav__cta { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; }
.mnav__tel { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 13px 18px; color: var(--ink); transition: background .2s, color .2s; }
.mnav__tel:hover { background: var(--ink); color: #fff; }
.mnav__tel:hover .ic { color: var(--green); }
.mnav__tel .ic { width: 22px; height: 22px; color: var(--green-700); flex: none; }
.mnav__tel-body { display: flex; flex-direction: column; }
.mnav__tel-num { font-family: var(--font-mono); font-weight: 700; font-size: 22px; letter-spacing: .02em; line-height: 1.15; }
.mnav__tel-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; margin-top: 3px; }
.mnav__tel:hover .mnav__tel-note { color: rgba(255,255,255,.6); }

/* ==========================================================================
   パンくず（脱・グレー帯、ヘアラインベース）
   ========================================================================== */
.crumbs { border-bottom: 1px solid var(--line); }
.crumbs ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 14px 0; font-size: 12.5px; }
.crumbs li { color: var(--ink-3); display: inline-flex; align-items: center; font-family: var(--font-jp); letter-spacing: .02em; }
.crumbs li:not(:last-child)::after { content: "/"; margin: 0 12px; color: var(--ink-4); }
.crumbs a:hover { color: var(--green-800); }
.crumbs li:last-child { color: var(--ink); }

/* ==========================================================================
   ページ見出し（固定ページ/FAQ共通：英字ラベル＋日本語タイトル・ヘアライン）
   ========================================================================== */
.page-head { border-bottom: 1px solid var(--line); padding: clamp(40px,5vw,68px) 0 clamp(34px,4vw,52px); }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.page-head .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green); }
.page-head__title { font-weight: var(--fw-black); font-size: var(--fs-h1); color: var(--ink); letter-spacing: .03em; margin: 0; }
.page-head__lead { margin: 14px 0 0; color: var(--ink-2); font-size: 15.5px; }

/* ==========================================================================
   CTA帯（フッター直前のグローバルCTA）
   ========================================================================== */
.cta-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta-band__inner { padding-block: clamp(56px, 7vw, 96px); position: relative; z-index: 1; }
.cta-band .eyebrow { color: var(--green); }
.cta-band__title { font-weight: var(--fw-black); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; color: #fff; margin: 14px 0 18px; letter-spacing: .02em; max-width: 720px; }
.cta-band__lead { color: rgba(255,255,255,.72); font-size: 16px; max-width: 720px; text-wrap: pretty; }
.cta-band__lead br { display: none; }
@media (min-width: 600px) { .cta-band__lead br { display: inline; } }
.cta-band__hours { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,.6); margin-top: 22px; letter-spacing: .02em; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* 巴マーク風の大きな淡い装飾（角に） */
.cta-band__mark { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 360px; height: 360px; opacity: .06; pointer-events: none; }

/* ==========================================================================
   フッター（脱・薄色 → ダークインクで地に足を）
   ========================================================================== */
.site-footer { background: #0F1113; color: rgba(255,255,255,.7); padding: 0; }
.site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(48px,6vw,72px) 48px; }
.footer-brand__logo img { height: 52px; width: auto; filter: brightness(2.1) saturate(1.15); }
.footer-contact { margin-top: 22px; display: grid; gap: 10px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.6; }
.footer-contact .ic { width: 14px; height: 14px; color: var(--green); flex: none; margin-top: 4px; }
.footer-contact .lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--green); margin-right: 8px; }
.footer-contact .tel { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: .02em; white-space: nowrap; }
.footer-contact .fax-num { font-family: var(--font-mono); font-size: 14px; color: rgba(255,255,255,.8); letter-spacing: .02em; white-space: nowrap; }
.footer-col h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin: 4px 0 16px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,.66); transition: color .2s; }
.footer-col a:hover { color: #fff; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.10); padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer__bottom a { font-size: 13px; color: rgba(255,255,255,.6); }
.site-footer__bottom a:hover { color:#fff; }
.copyright { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,.4); letter-spacing: .02em; }

/* 固定ボトムアクション（モバイルのみ） */
.bottom-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; }
.bottom-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 8px; font-size: 14px; font-weight: var(--fw-bold); color: #fff; }
.bottom-bar a.tel { background: var(--ink); }
.bottom-bar a.contact { background: var(--green-700); }
.bottom-bar .ic { width: 16px; height: 16px; }

/* トップへ戻る */
.to-top { position: fixed; right: 22px; bottom: 28px; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: var(--paper); display: flex; align-items: center; justify-content: center; z-index: 800; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background .2s; border-radius: var(--r-xs); }
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--ink); color: #fff; }
.to-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   ライトボックス（マークアップは footer.php で全ページ出力されるため、
   CSSもグローバルに置く。※front.cssのみだと他ページで空ブロックが残り、
   フッター下に余白が出る不具合になる）
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8,9,10,.94); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 82vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
.lightbox__cap { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.85); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1024px) {
  .gnav, .header-cta .btn span.lbl-full { display: none; }
  .burger { display: block; }
  .mnav { display: block; }
  .util-bar__left { display: none; }
  .header-cta { display: none; }
}
@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .header-main__inner { height: 60px; }
  .util-bar { display: none; }
  .brand img { height: 36px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .bottom-bar { display: flex; }
  body { padding-bottom: 52px; } /* 固定バー分 */
  .to-top { bottom: 64px; }
}