/* =========================================================
   AC SPACE タムラ ― Site Styles
   Design: 128rem (PC) / 37.5rem (SP)
   ========================================================= */

:root {
  --black: #222222;
  --white: #ffffff;
  --gray: #6B6B6B;
  --lgray: #A0A0A0;
  --bgray: #F4F4F4;
  --overlay: rgba(34, 34, 34, 0.20);
  --wm: rgba(34, 34, 34, 0.08);

  --ff-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-mincho: "Hina Mincho", "Yu Mincho", serif;
  --ff-forum: "Forum", serif;
  --ff-lora: "Lora", serif;
  --ff-albert: "Albert Sans", sans-serif;
  --ff-figtree: "Figtree", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================================
   Fluid root font-size
   1rem = 10px @ design width (PC 1280 / SP 375)
   → すべてのrem値が画面幅に応じて拡大/縮小
   ========================================================= */
html {
  scroll-behavior: smooth;
  /* PC: 768〜1920px で滑らかスケール、両端でクランプ */
  font-size: clamp(8px, calc(100vw / 128), 15px);
}
@media (max-width: 767px) {
  html {
    /* SP: 320〜480px でスケール */
    font-size: clamp(7px, calc(100vw / 37.5), 11.5px);
  }
}

body {
  font-family: var(--ff-jp);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  font-size: 1.5rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

.img-placeholder { background-color: #D9D9D9; display: block; }

/* =========================================================
   Site-wide background texture (Figma 4049:216)
   全体にかかる質感、opacity 0.04
   ========================================================= */
.site-bg-texture {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* All sections sit above the site bg-texture */
.site-header,
.hero,
.about,
.strength,
.service,
.achievements,
.company,
.contact,
.site-footer,
.drawer { position: relative; z-index: 1; }
.site-header { z-index: 100; }

/* ─────────────────────────────────────────────────────────
   施工実績 (Works) を一時的に非表示
   コンテンツが用意できたらこのブロックを削除すると元に戻る
   ───────────────────────────────────────────────────────── */
.achievements,
.footer-sub a[href="#works"],
.drawer-nav a[href="#works"] { display: none !important; }
/* 親 li が空表示にならないよう、リスト項目自体も隠す */
.footer-sub li:has(a[href="#works"]),
.drawer-nav ul ul li:has(a[href="#works"]) { display: none !important; }
.drawer { z-index: 200; }

/* ─────────────────────────────────────────────────────────
   Instagram リンク (ヘッダー / ドロワー / フッター) を一時的に非表示
   将来設置する時はこのブロックを削除すれば元通り表示される
   ───────────────────────────────────────────────────────── */
.header-ig,
.drawer-sns,
.footer-sns { display: none !important; }

/* ─────────────────────────────────────────────────────────
   代表あいさつを一時的に非表示 (原稿・写真ができるまで)
   原稿差し替え時にこのブロックを削除すると元通り表示される
   ───────────────────────────────────────────────────────── */
.company-greeting { display: none !important; }

/* =========================================================
   Scroll Reveal (fade-in / fade-out)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity 0.9s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}
/* 画像系などは初期 translateY を弱めに (質感を保つ) - is-visible より前に定義する */
.reveal.reveal--soft {
  transform: translateY(1.2rem);
}
/* is-visible は最後に定義してセレクタ詳細度同点でも勝たせる */
.reveal.is-visible,
.reveal.reveal--soft.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* アクセシビリティ: モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Generic image-as-background helpers */
.about-image,
.strength-image,
.service-panel-image,
.card-image,
.company-map,
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vertical { writing-mode: vertical-rl; text-orientation: mixed; }

/* =========================================================
   Header (Figma準拠: PC 1280×68 / SP 375×65)
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6.8rem;
  z-index: 100;
  background: transparent;
  transition: background-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(0.8rem);
}

.header-inner {
  position: relative;
  max-width: 128rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 5rem;
  display: flex;
  align-items: center;
}

/* Logo (160 × 34, swap white/dark) */
.header-logo {
  position: relative;
  display: block;
  width: 16rem;
  height: 3.4rem;
  flex-shrink: 0;
}
.logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .35s ease;
}
.logo-img--dark { opacity: 0; }
.is-scrolled .logo-img--white { opacity: 0; }
.is-scrolled .logo-img--dark { opacity: 1; }

/* Global Nav (Forum 1.5rem, white, tracking 0.05em) */
.global-nav { margin-left: auto; }
.global-nav ul {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.global-nav a {
  font-family: var(--ff-forum);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.4rem;
  letter-spacing: 0.05em;
  color: var(--white);
  white-space: nowrap;
  transition: color .35s ease, opacity .25s ease;
}
.global-nav a:hover { opacity: 0.7; }
.is-scrolled .global-nav a { color: var(--black); }

/* Instagram icon (12×12, white→dark on scroll) */
.header-ig {
  position: relative;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 2.8rem;
  flex-shrink: 0;
  transition: opacity .25s ease;
}
.header-ig:hover { opacity: 0.7; }
.ig-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .35s ease;
}
.ig-icon--dark { opacity: 0; }
.is-scrolled .ig-icon--white { opacity: 0; }
.is-scrolled .ig-icon--dark { opacity: 1; }

/* Bottom horizontal line (white 0.5px, only on KV state) */
.header-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(100% - 10rem);
  max-width: 118rem;
  height: 1px;
  background: rgba(255,255,255,1);
  transition: opacity .35s ease;
}
.is-scrolled .header-line { opacity: 0; }

/* Hamburger - hidden on PC */
.hamburger {
  display: none;
  position: relative;
  width: 3rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.hamburger-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .35s ease;
}
.hamburger-icon--dark { opacity: 0; }
.is-scrolled .hamburger-icon--white { opacity: 0; }
.is-scrolled .hamburger-icon--dark { opacity: 1; }

/* =========================================================
   Hero / KV  (PC design 1280×1200, SP design 375×670)
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  /* ファーストビュー + 下に少しKV画像をのぞかせる(--hero-extra分)  */
  --hero-extra: 400px;
  height: calc(100vh + var(--hero-extra));
  min-height: 50rem;
  overflow: hidden;
  background: #1a1a1a;
  color: var(--white);
}

/* Background slideshow stack */
.hero-bg-stack {
  position: absolute;
  inset: 0;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: #1a1a1a;
  background-position: 30% center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
}
.hero-bg.is-active { opacity: 1; }

/* 質感 (texture overlay 10%) */
.hero-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
}

/* 黒 (dark overlay — Figma uses 3 stacked rect@0.2 ≈ effective 0.49) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.49);
  pointer-events: none;
  z-index: 2;
}

/* ---- Title (single SVG: "Craftsmanship and Trust." + Since caption) ---- */
.hero-title {
  position: absolute;
  z-index: 3;
  margin: 0;
  pointer-events: none;
  font-size: 1rem; /* reset <h1> default 2em */
  /* 画面下部のフッター行(横線)のすぐ上にアンカー (extra分を加算してviewport基準維持) */
  left: 5rem;
  bottom: calc(var(--hero-extra) + 9rem);
  width: 54.3rem;
  height: 20.6rem;
}
.hero-title img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Right-side vertical Japanese catch (SVG) */
.hero-jp {
  position: absolute;
  z-index: 3;
  /* design: right 50, top 104, width 110, height 235 */
  right: 5rem;
  top: 10.4rem;
  width: 11rem;
  height: 23.6rem;
}

/* SP-only top-left "1/3" pager (hidden on PC) */
.hero-pager-sp { display: none; }

/* ---- Footer row (divider + slide text + 1/3 + Scroll) ---- */
.hero-footer {
  position: absolute;
  z-index: 3;
  left: 5rem;
  right: 5rem;
  bottom: calc(var(--hero-extra) + 7rem);  /* viewport底から約70px */
  color: var(--white);
}
.hero-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.hero-slide-text {
  position: absolute;
  top: 2.2rem;
  left: 0;
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.05rem;
  color: var(--white);
  white-space: nowrap;
}
.hero-footer-right {
  position: absolute;
  top: 1.7rem;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4rem;
  font-family: var(--ff-albert);
  font-weight: 500;
}

.hero-pager {
  font-size: 1.4rem;
  letter-spacing: 0.35rem;
  line-height: 1;
  color: var(--white);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.hero-pager span {
  opacity: 0.85;
  margin: 0 0.2rem;
}

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1;
  color: var(--white);
  transition: opacity .25s ease;
}
.hero-scroll:hover { opacity: 0.7; }
.hero-scroll-arrow {
  display: inline-block;
  width: 0.9rem;
  height: 1.4rem;
  position: relative;
}
.hero-scroll-arrow::before,
.hero-scroll-arrow::after {
  content: "";
  position: absolute;
  background: var(--white);
}
.hero-scroll-arrow::before {
  /* vertical line */
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}
.hero-scroll-arrow::after {
  /* arrow head ↓ */
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  background: transparent;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center;
}

/* =========================================================
   Common Section Parts
   ========================================================= */
.watermark {
  position: absolute;
  font-family: var(--ff-forum);
  font-size: clamp(6rem, 10vw, 13rem);
  letter-spacing: 0.02em;
  color: var(--wm);
  line-height: 1;
  pointer-events: none;
}
.en-label {
  font-family: var(--ff-forum);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  color: var(--gray);
  margin-bottom: 1.4rem;
}
.section-title {
  font-family: var(--ff-mincho);
  font-size: 3.2rem;
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: var(--black);
}
.section-title .vertical {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.section-head {
  margin-bottom: 6rem;
}

/* =========================================================
   About us
   ========================================================= */
/* =========================================================
   About us  (Figma準拠: PC 1280wide / SP 375wide)
   ========================================================= */
.about {
  position: relative;
  width: 100%;
  padding: 5rem 0 10rem;    /* 上50px / 下100px */
  background: transparent;  /* サイト全体の背景テクスチャを表示 */
  /* sticky を効かせるため overflow: hidden は外す */
}

.about-inner {
  position: relative;
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  height: 95rem;            /* 本文(top 50 + 高さ約39 = 89)を完全表示 */
  z-index: 1;
}

/* 画像 (PC: left 50, top 100, 400×533) — sticky で左に固定 */
.about-image-wrap {
  position: sticky;
  top: 10rem;                  /* viewport top からのオフセット */
  margin: 10rem 0 0 5rem;      /* 初期位置（section内 left:50 top:100 と一致） */
  width: 40rem;
  height: 53.3rem;
  overflow: hidden;
  border-radius: 0.5rem;       /* 角丸 5px */
  z-index: 2;
}
.about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 画像の上に重ねる質感テクスチャ (Figma 4023:575) */
.about-image-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.10;
  pointer-events: none;
}

/* 透かし "About us" — 縦書き見出しの垂直中央に配置 */
.about-watermark {
  position: absolute;
  /* 見出し中央 ≈ top 23.1rem に揃える */
  top: 24rem;
  left: 68.9rem;
  font-family: var(--ff-forum);
  font-size: 9rem;
  font-weight: 400;
  line-height: 0.78;        /* 70/90 */
  letter-spacing: 0.05em;   /* 4.5/90 */
  color: rgba(34, 34, 34, 0.1);
  white-space: nowrap;
  pointer-events: none;
  margin: 0;
  z-index: 1;
}

/* 縦書き見出し — 本文(left:59rem, w:55rem)の水平中央に配置 */
.about-heading {
  position: absolute;
  top: 14.8rem;
  left: 59rem;              /* 本文と同じ left */
  width: 55rem;             /* 本文と同じ width */
  height: auto;             /* 内容に合わせる(下の余白を最小化) */
  margin: 0;
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 3.5rem;
  letter-spacing: 0.05em;
  line-height: 1.143;       /* 40/35 */
  color: var(--black);
  display: flex;
  flex-direction: row-reverse; /* 右→左に並べる */
  justify-content: center;  /* 水平中央 */
  align-items: flex-start;  /* 各列を自然な高さで */
  gap: 3rem;                /* 行間（縦書きなので列間） */
  z-index: 2;
}
.about-heading-col {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: block;
}
/* 縦中横 (tate-chu-yoko): 半角数字などを縦書きの中に横向きで組み込む */
.tcy {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;                        /* Safari 旧仕様フォールバック */
  letter-spacing: 0;                                       /* 親の letter-spacing を打ち消し */
  font-feature-settings: "palt" off, "pnum" off, "tnum";   /* Tabular (等幅) digits で em box 内に中央寄せ */
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; /* Hina Mincho は数字グリフの位置が不安定なため上書き */
  text-align: center;
}

/* 本文 (PC: 見出し直下に配置) */
.about-body {
  position: absolute;
  left: 59rem;
  top: 50rem;               /* 見出しのすぐ下まで詰める */
  width: 55rem;
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.875;      /* 30/16 */
  color: var(--black);
  letter-spacing: 0.02em;
  z-index: 2;
}
.about-body p { margin: 0; }
.about-body p + p { margin-top: 3rem; }

/* =========================================================
   Our Strength
   ========================================================= */
/* =========================================================
   Our Strength (Figma準拠: PC 1280wide / SP 375wide)
   ========================================================= */
.strength {
  position: relative;
  width: 100%;
  background: transparent;
  padding-bottom: 10rem;
}

/* 上部タイトルバー (通常の配置、背景透過) */
.strength-header {
  position: relative;
  background: transparent;
  width: 100%;
  height: 14rem;          /* タイトルとボーダーの間を広げるため拡張 */
}
.strength-header-inner {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  padding: 3rem 5rem 0 14rem;   /* design: top 30, left 140 */
  height: 100%;
}
.strength-en {
  position: relative;
  font-family: var(--ff-forum);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding-left: 1.5rem;
  color: var(--black);
  margin: 0;
}
.strength-en-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 1px;
  background: var(--black);
}
.strength-title {
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 1.5rem 0 0;
  color: var(--black);
}
.strength-divider {
  position: absolute;
  bottom: 2rem;           /* タイトル直下、ヘッダー下端から 20px */
  left: 50%;
  transform: translateX(-50%);
  width: 100rem;
  border: 0;
  border-top: 1px solid rgba(34, 34, 34, 0.3);
  margin: 0;
}

/* 2-col layout (PC) */
.strength-inner {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  padding: 6rem 14rem 0 14rem;      /* タイトル下のマージンを縮小 */
  display: grid;
  grid-template-columns: 47rem 1fr;
  gap: 8rem;
  align-items: start;               /* 個別に高さ指定できるように */
}

/* Left column: 3 strength items */
.strength-list {
  display: flex;
  flex-direction: column;
  /* PC: 各itemをスティッキー画像と同じ60remの「行」とし、内側で縦中央揃えにするためgapは0 */
  gap: 0;
}
.strength-item {
  position: relative;
  /* PC: スティッキー画像 (60rem) の高さに合わせ、内容を縦中央に配置 */
  min-height: 60rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.strength-num {
  font-family: var(--ff-forum);
  font-size: 2rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0 0 3rem;
  color: var(--black);
}
.strength-heading {
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 3.5rem;
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 0 0 5rem;
  color: var(--black);
}
.strength-text {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.875;       /* 30/16 */
  letter-spacing: 0.02em;
  color: var(--black);
  margin: 0;
}

/* Right column: PC sticky image */
.strength-pc-image-col {
  position: relative;
  /* strength3の上端が画像の上端に到達した時点で固定解除。
     strength3 top @ list+137rem ≈ 202rem doc, image top sticky @ 17.2rem viewport,
     release when col_bottom > strength3_top + image_height → col_height ≈ 193rem */
  height: 195rem;
}
.strength-pc-image {
  position: sticky;
  top: 10rem;              /* サイトヘッダー下の余白 */
  width: 45rem;            /* approx Figma 450 */
  height: 60rem;           /* approx Figma 600 */
  margin-left: auto;       /* align right */
  border-radius: 0.5rem;
  overflow: hidden;
}
.strength-pc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* スクロールに連動した画像フェード切替 */
.strength-pc-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  z-index: 1;
}
.strength-pc-img.is-active { opacity: 1; z-index: 2; }
.strength-pc-texture { z-index: 3; }
.strength-pc-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}

/* SP image inside each strength item — hidden on PC */
.strength-sp-image { display: none; }

/* =========================================================
   Service
   ========================================================= */
/* =========================================================
   Service (Figma準拠 PC 1280×2195 / SP 375×1862)
   背景: #222 を5%透明度
   ========================================================= */
.service {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: hidden;
}
/* 5% グレー overlay は service の上半分 (head + tabs) のみに適用。
   .service-panels は solid black で覆われ、.achievements は body 背景のままなので、
   下端 (Company との境界) で色やテクスチャの帯が出ない。 */
.service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;       /* top:0 / left:0 / right:0、bottom は auto (高さで決定) */
  /* head (36.7rem) + tabs (8.2rem) = 44.9rem 程度を覆う */
  height: 44.9rem;
  background: rgba(34, 34, 34, 0.05);
  pointer-events: none;
  z-index: 0;
}
/* head/tabs/panels/achievements は overlay の上に配置 */
.service > * { position: relative; z-index: 1; }

/* ── Section head (縦書きJP + watermark + 2行リード) ── */
.service-head {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  height: 36.7rem;                 /* design 367 */
}
.service-jp {
  position: absolute;
  left: 17.5rem;
  top: 15.3rem;
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 2.5rem;
  letter-spacing: 0.10em;
  line-height: 1.2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--black);
  margin: 0;
}
.service-watermark {
  position: absolute;
  left: 14rem;
  top: 23.4rem;
  font-family: var(--ff-forum);
  font-weight: 400;
  font-size: 9rem;
  line-height: 0.78;
  letter-spacing: 0.05em;
  color: var(--white);
  margin: 0;
  pointer-events: none;
}
.service-lead {
  position: absolute;
  left: 51.1rem;
  top: 15.8rem;
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 3.5rem;
  letter-spacing: 0.10em;
  line-height: 1.71;               /* 60/35 */
  color: var(--black);
  margin: 0;
}

/* ── Tabs (3つ、角丸、active=ダーク) ── */
.service-tabs {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 14rem;
  display: grid;
  grid-auto-columns: 1fr;         /* タブ数が変わっても常に等幅で全幅を埋める */
  grid-auto-flow: column;
  gap: 0.5rem;
  z-index: 2;
}
.service-tab {
  position: relative;
  width: 100%;
  height: 8.2rem;
  background: var(--white);
  border: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--lgray);
  text-align: center;
  padding: 0;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-tab .tab-num { display: none; }   /* 番号は非表示 */
/* SPのみ表示するユーティリティ (PC では非表示) */
.sp-only { display: none; }
.service-tab .tab-label {
  position: static;
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  line-height: 1;
}
.service-tab.is-active {
  background: var(--black);
  color: var(--white);
}
.service-tab.is-active .tab-label {
  font-weight: 500;
}

/* ── Dark panels ── */
.service-panels {
  position: relative;
  background: var(--black);
  color: var(--white);
  min-height: 68.5rem;
}
.service-panel { display: none; }
.service-panel.is-active { display: block; }

.service-panel-inner {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  min-height: 68.5rem;
  padding: 7rem 4rem 7rem 14rem;
}
.service-panel-text {
  position: relative;
  width: 43rem;
  z-index: 2;
}
.panel-num {
  font-family: var(--ff-forum);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  color: var(--white);
  opacity: 1;
}
.panel-title {
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 2.8rem;
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 2.9rem 0 0;
  color: var(--white);
}
.panel-desc {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.875;              /* 30/16 */
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 6.5rem 0 0;
  max-width: 43rem;
}

/* 画像（右側） */
.service-panel-image {
  position: absolute;
  right: 4rem;
  top: 7rem;
  width: 50rem;
  height: 54.5rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 0.5rem;
  z-index: 1;
}
.service-panel-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}

/* お問い合わせボタン (Figma 4002:243 準拠) */
.btn-white {
  position: relative;
  display: block;
  width: 20rem;
  height: 4.5rem;
  margin-top: 7.4rem;
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  transition: opacity .25s ease;
}
.btn-white:hover { opacity: 0.85; }

.btn-white-text {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--black);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 縦の区切り線 (右から45px) */
.btn-white-divider {
  position: absolute;
  top: 50%;
  right: 4rem;
  transform: translateY(-50%);
  width: 1px;
  height: 3.5rem;
  background: var(--black);
}

/* 下向きシェブロン (右から28px) */
.btn-white-arrow {
  position: absolute;
  top: 50%;
  right: 1.7rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  transform: translateY(-80%) rotate(45deg);
}

/* ── Achievements ── */
.achievements {
  position: relative;
  padding: 14.7rem 0 10rem;
  background: transparent;
}
.achievements-head {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 14rem 2rem;
}
.achievements-head-inner { position: relative; }
.achievements-en {
  position: relative;
  font-family: var(--ff-forum);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding-left: 1.5rem;
  margin: 0;
  color: var(--black);
}
.achievements-en-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 1px;
  background: var(--black);
}
.achievements-title {
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 1.5rem 0 0;
  color: var(--black);
}
.achievements-divider {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(34, 34, 34, 0.3);
  margin: 3rem 0 0;
}

.achievements-slider {
  max-width: 128rem;
  margin: 4rem auto 0;
  padding: 0 14rem;
  overflow: hidden;
}
.achievements-list {
  display: flex;
  gap: 5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s ease;
}
.achievement-card {
  flex: 0 0 47.5rem;
  background: var(--white);
  border-radius: 0.5rem;
  padding: 2.5rem;
  box-sizing: border-box;
}
.card-image {
  position: relative;
  width: 100%;
  height: 31rem;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.card-image-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}
.card-body { position: relative; }
.card-model {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 1rem;
  color: var(--black);
}
.card-text {
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  margin: 0 0 2rem;
  color: var(--black);
}
.card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: 1.2rem;             /* 高さ24pxに合わせて角丸更新 */
  min-width: 8rem;
  height: 2.4rem;                    /* 24px */
  padding: 0 1.6rem;                 /* 縦pad廃止 */
  margin-right: 0.4rem;
  font-family: var(--ff-mincho);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--black);
  box-sizing: border-box;
}

/* スライダーコントロール (PC: 左にドット / 右にナビ) */
.slider-controls {
  max-width: 128rem;
  margin: 3rem auto 0;
  padding: 0 14rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider-dots {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.slider-dot {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--lgray);
  transition: all 0.3s ease;
}
.slider-dot.is-active {
  background: var(--black);
  width: 2.4rem;
  border-radius: 0.3rem;
}
.slider-nav {
  display: flex;
  gap: 1.5rem;
}
.slider-btn {
  width: 5rem;
  height: 5rem;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .25s ease;
}
.slider-btn:hover { opacity: 0.7; }
.slider-btn img {
  width: 100%;
  height: 100%;
  display: block;
}
/* Figma SVGは下向き矢印 → CSSで回転し左右矢印に */
.slider-prev img { transform: rotate(90deg); }
.slider-next img { transform: rotate(-90deg); }

/* カードはクリック可能にする */
.achievement-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.achievement-card:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.08);
}
.achievement-card:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
}

/* =========================================================
   Achievement Modal (Figma準拠)
   ========================================================= */
.achievement-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.achievement-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.achievement-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.6);
  cursor: pointer;
}
.achievement-modal-panel {
  position: relative;
  width: min(102.4rem, calc(100vw - 4rem));
  max-height: calc(100vh - 6rem);
  background: var(--white);
  overflow: hidden;                  /* パネルはスクロールしない (内側で制御) */
  padding: 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  transform: translateY(2rem);
  transition: transform 0.3s ease;
  box-shadow: 0 2rem 6rem rgba(0,0,0,0.25);
}
.achievement-modal.is-open .achievement-modal-panel {
  transform: translateY(0);
}

/* ── 左カラム ── */
.achievement-modal-text-col {
  display: flex;
  flex-direction: column;
  min-height: 0;                     /* grid子でのスクロール許可 */
  position: relative;
}
.achievement-modal-text-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 5rem;              /* CLOSE 固定領域を確保 */
}
.achievement-modal-model {
  font-family: var(--ff-gothic);
  font-size: 1.3rem;
  color: var(--gray);
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
}
.achievement-modal-title {
  font-family: var(--ff-gothic);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;                 /* 行間を狭める */
  color: var(--black);
  margin: 0 0 1.8rem;
  letter-spacing: 0.02em;
}
.achievement-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 2.4rem;
}
.achievement-modal-divider {
  border: 0;
  border-top: 1px solid var(--black);
  margin: 0 0 2.4rem;
  width: 100%;
}
.achievement-modal-details {
  font-family: var(--ff-gothic);
  font-size: 1.4rem;
  line-height: 1.75;                 /* 行間を狭める (2 → 1.75) */
  color: var(--black);
  margin: 0;
  white-space: pre-line;             /* 改行を保持 */
}

/* × CLOSE (左カラム下) */
.achievement-modal-close {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: transparent;
  border: 0;
  color: var(--black);
  cursor: pointer;
  font-family: var(--ff-forum);
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  padding: 0.5rem 0;
  transition: opacity 0.2s ease;
}
.achievement-modal-close:hover {
  opacity: 0.6;
}
.achievement-modal-close svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ── 右カラム (Before/After 縦積み) ── */
.achievement-modal-image-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.achievement-modal-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--bgray);
}
.achievement-modal-image-label {
  position: absolute;
  right: 1.6rem;
  bottom: 1.4rem;
  color: #fff;
  font-family: var(--ff-forum);
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  text-shadow: 0 0 0.8rem rgba(0,0,0,0.5);
}

/* =========================================================
   Contact Modal (Figma準拠)
   ========================================================= */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.contact-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.contact-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.6);
  cursor: pointer;
}
.contact-modal-panel {
  position: relative;
  width: min(102.4rem, calc(100vw - 4rem));
  max-height: calc(100vh - 6rem);
  background: var(--white);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(2rem);
  transition: transform 0.3s ease;
  box-shadow: 0 2rem 6rem rgba(0,0,0,0.25);
}
.contact-modal.is-open .contact-modal-panel {
  transform: translateY(0);
}

/* × CLOSE (画像右上に重ねる) */
.contact-modal-close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: transparent;
  border: 0;
  color: var(--black);
  cursor: pointer;
  font-family: var(--ff-forum);
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  padding: 0.5rem 0;
  z-index: 2;
  transition: opacity 0.2s ease;
}
.contact-modal-close:hover {
  opacity: 0.7;
}
.contact-modal-close svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ── 左カラム: テキスト ── */
.contact-modal-text-col {
  padding: 6rem 5rem 4rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.contact-modal-heading {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--ff-mincho);
  font-size: 2.2rem;
  line-height: 2.1;                    /* 縦書きの行間 (列の間隔) */
  letter-spacing: 0.12em;
  color: var(--black);
  margin: 0 0 4rem;
  height: 32rem;                       /* 4行分の高さ */
  max-height: 40rem;
}
.contact-modal-heading span {
  display: block;
}
.contact-modal-body {
  font-family: var(--ff-gothic);
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--black);
  margin: 0 0 3rem;
}
.contact-modal-tel {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--black);
}
.contact-modal-tel-label {
  font-family: var(--ff-forum);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: var(--black);
}
.contact-modal-tel-num {
  font-family: var(--ff-forum);
  font-size: 3.6rem;
  letter-spacing: 0.02em;
  color: var(--black);
  text-decoration: none;
  line-height: 1;
}

/* ── 右カラム: 画像 ── */
.contact-modal-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--bgray);
  min-height: 56rem;
}

/* =========================================================
   Company (Figma準拠 PC / SP)
   ========================================================= */
.company {
  position: relative;
  width: 100%;
  background: transparent;    /* サイト全体の背景テクスチャを透過 */
}

/* 上部写真 + 質感 (パララックス用に高さに余裕を持たせる) */
.company-photo {
  position: relative;
  width: 100%;
  height: 55rem;                 /* 350 → 550 写真をしっかり見せる */
  overflow: hidden;
}
.company-photo-img {
  width: 100%;
  height: 130%;                  /* パララックス用の上下余裕 (±15%) */
  object-fit: cover;
  object-position: center 30%;
  display: block;
  will-change: transform;
}
.company-photo-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}

.company-inner {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  padding: 14rem 14rem 10rem;    /* 上: タイトル分 / 下: 余白 */
  display: grid;
  grid-template-columns: 40rem 1fr;
  gap: 2rem;
  align-items: start;
}

/* 左カラム: 縦書き + 透かし (sticky, 重なって配置) */
.company-head {
  position: sticky;
  top: 12rem;                    /* site header + small offset */
  align-self: start;
  height: 23rem;
}
.company-jp {
  position: absolute;
  top: 0;
  left: 3.5rem;                  /* Figma: left 175-140 */
  margin: 0;
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: 0.10em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--black);
  z-index: 2;
}
.company-watermark {
  position: absolute;
  top: 7.4rem;                   /* Figma: 544-470 = 74 (JPと重なる位置) */
  left: -0.3rem;                 /* Figma: 137-140 */
  margin: 0;
  font-family: var(--ff-forum);
  font-weight: 400;
  font-size: 9rem;
  line-height: 0.78;              /* 70/90 */
  letter-spacing: 0.05em;
  color: rgba(34, 34, 34, 0.1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* 右カラム: 代表あいさつ + 会社概要テーブル */
.company-right {
  max-width: 57.5rem;
}
.company-greeting {
  margin: 0 0 6rem;               /* 代表あいさつ ⇔ 会社情報 見出しの間の余白 */
  padding-bottom: 6rem;           /* 名前 ⇔ ボーダーライン の余白 (4rem → 6rem) */
  border-bottom: 1px solid rgba(34, 34, 34, 0.3);
}
/* 見出しはゴシック体で控えめに (Company section 共通見出し) */
.company-greeting-title,
.company-info-title {
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--black);
  margin: 0 0 2rem;
}
/* 代表あいさつ見出しの下は少し広めに (写真とテキストブロックとの余白) */
.company-greeting-title {
  margin-bottom: 4rem;
}
.company-info-title {
  margin-top: 0;
  margin-bottom: 2rem;
}
/* 代表あいさつ内の flex コンテナ (写真 + テキスト) */
.company-greeting-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}
/* 代表写真プレースホルダー */
.company-greeting-image {
  flex-shrink: 0;
  width: 18rem;
  aspect-ratio: 4 / 5;
  background: #d9d9d9;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(34, 34, 34, 0.4);
  font-family: var(--ff-jp);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
.company-greeting-image-note {
  pointer-events: none;
}
.company-greeting-text {
  flex: 1;
  min-width: 0;
}
.company-greeting-body {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--black);
  margin: 0 0 2rem;
  white-space: pre-line;
}
.company-greeting-signature {
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--black);
  margin: 0;
  text-align: right;
}

/* 右カラム: 会社概要テーブル */
.company-table {
  margin: 0;
  max-width: 57.5rem;             /* 575 */
}
.company-table .row {
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(34, 34, 34, 0.3);
  gap: 0.6rem;
  align-items: start;
}
/* 会社情報の見出し直下に線を出さないため 1 行目の border-top は無効化 */
.company-table .row:first-child {
  border-top: 0;
}
.company-table dt {
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.75;               /* 28/16 */
  letter-spacing: 0.02em;
  color: var(--black);
  margin: 0;
}
.company-table dd {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.866;              /* 28/15 */
  letter-spacing: 0.02em;
  color: var(--black);
  margin: 0;
  overflow-wrap: anywhere;         /* 長い日本語の強制折返し */
  word-break: break-strict;
}
.company-map {
  display: block;
  width: 100%;
  height: 28.8rem;                 /* design 288 */
  margin-top: 0.6rem;
  border: 0;
  background-color: #ddd;
}

/* =========================================================
   Contact (Figma準拠)
   PC: 1000×260の丸角ダークボックス / SP: 全幅ダーク375×359
   ========================================================= */
.contact {
  position: relative;
  width: 100%;
  background: transparent;
  padding-top: 10rem;
  z-index: 2;
}
.contact-box {
  position: relative;
  width: 100%;
  max-width: 100rem;             /* 1000 */
  height: 26rem;
  margin: 0 auto;
  background: var(--black);
  color: var(--white);
  border-radius: 0.5rem;
}

.contact-title {
  position: absolute;
  top: 5.5rem;
  left: 5.2rem;                  /* Figma 192-140=52 (box内) */
  margin: 0;
  font-family: var(--ff-forum);
  font-weight: 400;
  font-size: 7rem;
  line-height: 0.715;             /* 50/70 */
  letter-spacing: 0.05em;
  color: var(--white);
}
.contact-desc {
  position: absolute;
  top: 14.9rem;
  left: 5.2rem;
  width: 54.6rem;
  margin: 0;
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2;                 /* 32/16 */
  letter-spacing: 0.02em;
  color: var(--white);
}

/* TEL ブロック (右側) */
.contact-tel {
  position: absolute;
  top: 11.2rem;
  right: 4rem;                     /* Figma 1082から右端余白 */
  display: block;
}
.contact-tel-label {
  margin: 0;
  font-family: var(--ff-figtree);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--white);
}
.contact-tel-num {
  display: inline-block;
  margin: 1rem 0 0.6rem;
  font-family: var(--ff-forum);
  font-weight: 400;
  font-size: 5rem;
  line-height: 0.6;                 /* 30/50 */
  letter-spacing: 0.08em;
  color: var(--white);
  text-decoration: none;
}
.contact-tel-hours {
  margin: 0;
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--white);
}
.contact-hours-time {
  font-family: var(--ff-figtree);
  letter-spacing: 0.1em;
}

/* =========================================================
   Footer (Figma準拠)
   PC: 背景透明(サイトテクスチャ)、Contactとは詰める
   ========================================================= */
.site-footer {
  position: relative;
  width: 100%;
  padding: 7rem 0 4rem;            /* Contact下との隙間を詰める */
  background: transparent;          /* サイト背景を透過 */
  margin-top: 0;                    /* Contact上重ねはしない */
}
.footer-inner {
  position: relative;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 14rem;
  min-height: 50rem;
}

/* ── 左: 縦書きキャッチSVG ── */
.footer-catch {
  position: absolute;
  left: 8.7rem;
  bottom: 4rem;                     /* ロゴの底辺と揃える */
  width: 14.4rem;                   /* SVG 144 */
  height: 39.1rem;                  /* SVG 391 */
}
.footer-catch img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── 右寄せメニュー ── */
.footer-nav {
  position: absolute;
  right: 8.7rem;                    /* 左側（catch）の余白と揃える */
  top: 6.9rem;                      /* catch の上端ライン (inner.h 50rem - catch.bottom 4rem - catch.h 39.1rem) と揃える */
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 4rem;
  align-items: start;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
}
.footer-nav-item {
  font-family: var(--ff-forum);
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 1.112;
  letter-spacing: 0.10em;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.footer-nav-item:hover { opacity: 0.7; }
.footer-nav-item:not(.footer-nav-item--en) {
  font-family: var(--ff-mincho);
}
.footer-nav-col:first-child .footer-nav-item--en {
  font-family: var(--ff-forum);
}

.footer-sub {
  list-style: none;
  margin: -1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.footer-sub li,
.footer-sub li a {
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: 2.15rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.7);
  white-space: nowrap;
  text-decoration: none;
}
.footer-sub li a:hover { color: var(--black); }

.footer-sns {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: -1rem;
  width: 2.2rem;
  height: 2.2rem;
  transition: opacity .25s ease;
}
.footer-sns:hover { opacity: 0.7; }
.footer-sns img { width: 100%; height: auto; }

/* ── 右下: ロゴ ── */
.footer-logo {
  position: absolute;
  right: 8.7rem;                    /* 左側（catch）の余白と揃える */
  bottom: 4rem;
  width: 32.9rem;                   /* Figma 329px */
  height: auto;                     /* 高さは自動でアスペクト比維持 */
  line-height: 0;
}
.footer-logo img {
  display: block;
  width: 100%;
  height: auto;                     /* 縦比維持(横に潰れない) */
}

/* =========================================================
   Drawer (Mobile)
   ========================================================= */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--black);
  color: var(--white);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.drawer-close {
  width: 4rem;
  height: 4rem;
  position: relative;
}
.drawer-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 1px;
  background: var(--white);
}
.drawer-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.drawer-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.drawer-body {
  padding: 4rem 3.5rem 5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
}
.drawer-catch {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.drawer-catch .vertical {
  font-family: var(--ff-mincho);
  font-size: 3.4rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.drawer-catch-en {
  font-family: var(--ff-forum);
  font-size: 1rem;
  letter-spacing: 0.25em;
  writing-mode: vertical-rl;
  color: rgba(255,255,255,0.7);
  padding-top: 1rem;
}

.drawer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.drawer-nav > ul > li > a {
  font-family: var(--ff-forum);
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.drawer-nav ul ul {
  padding-left: 0.8rem;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.drawer-nav ul ul li,
.drawer-nav ul ul li a {
  font-family: var(--ff-mincho);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.drawer-nav ul ul li a:hover { color: #fff; }
.drawer-sns {
  grid-column: 2;
  margin-top: 2rem;
}
.drawer-sns a {
  display: inline-block;
  padding: 0.6rem;
}

body.is-locked { overflow: hidden; }

/* =========================================================
   Responsive ― SP (≤76.7rem)
   ========================================================= */
@media (max-width: 767px) {
  body { font-size: 1.4rem; }

  /* Header SP: 375 × 6.5rem, logo left:15/top:15, hamburger right:15/top:27 */
  .site-header { height: 6.5rem; }
  .header-inner { padding: 0 1.5rem; }
  .global-nav, .header-ig { display: none; }

  .header-logo {
    width: 16rem;
    height: 3.4rem;
    /* visually positioned at left:15, top:15 (= 0.85rem from header center) */
  }

  .hamburger {
    display: block;
    margin-left: auto;
    width: 3rem;
    height: 1.1rem;
  }

  .header-line {
    width: calc(100% - 3rem);
    max-width: 34.5rem;
  }

  /* ===== Hero (SP: 375×670) ===== */
  .hero {
    --hero-extra: 0rem;
    height: 100vh;
    min-height: 48rem;
  }

  /* Title (single SVG) — SP: anchor close to divider */
  .hero-title {
    left: 2rem;
    bottom: calc(var(--hero-extra) + 7.5rem);  /* viewport基準維持 */
    width: 33.5rem;
    height: 12.7rem;
    top: auto;
  }

  .hero-jp {
    /* design SP: right 20, top 100, w ~70, h ~174 */
    right: 2rem;
    top: 10rem;
    width: 7rem;
    height: 17.4rem;
  }

  /* SP "1/3" pager top-left */
  .hero-pager-sp {
    display: block;
    position: absolute;
    z-index: 3;
    top: 10rem;
    left: 2rem;
    font-family: var(--ff-albert);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.35rem;
    line-height: 1;
    color: var(--white);
  }
  .hero-pager-sp span { opacity: 0.85; margin: 0 0.2rem; }

  /* Footer row (SP: divider at top 605) */
  .hero-footer {
    left: 2rem;
    right: 2rem;
    bottom: calc(var(--hero-extra) + 6rem);  /* viewport底基準 */
    top: auto;
  }
  .hero-slide-text {
    top: 2rem;
    font-size: 1.3rem;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-footer-right {
    top: 1.5rem;
    gap: 0;
  }
  .hero-pager { display: none; }
  .hero-scroll { font-size: 1.4rem; }

  /* Common */
  .watermark { font-size: 6rem; }
  .section-title { font-size: 2.2rem; letter-spacing: 0.18em; }
  .en-label { font-size: 1.2rem; letter-spacing: 0.25em; }
  .section-head { margin-bottom: 4rem; }

  /* About us (SP: 375 wide) — sticky 解除して通常レイアウト */
  .about { padding-bottom: 5rem; }   /* SPは下余白50pxに抑える */
  .about-inner {
    height: 115rem;          /* 本文末尾(112)+少し */
    padding: 0;
  }
  /* 画像 (SP: left 37, top 61, w 180, h 240) — static 配置 */
  .about-image-wrap {
    position: absolute;
    left: 3.7rem;
    top: 6.1rem;
    margin: 0;
    width: 18rem;
    height: 24rem;
  }
  /* 透かし "About us" (SP: 右寄せ) */
  .about-watermark {
    top: 42.6rem;
    left: auto;
    right: 2.5rem;            /* 本文右端と揃える */
    transform: none;
    font-size: 6.8rem;
    line-height: 0.78;
    letter-spacing: 0.05em;  /* 3.4/68 */
    text-align: right;
  }
  /* 縦書き見出し — SPは右寄せ */
  .about-heading {
    top: 35.1rem;
    left: 2.5rem;
    width: 32.5rem;
    height: auto;
    font-size: 2.6rem;
    line-height: 1.154;     /* 30/26 */
    letter-spacing: 0.05em; /* 1.3/26 */
    justify-content: flex-start;  /* row-reverse 内で右側へ */
    gap: 2rem;              /* SP行間 */
  }
  /* 本文 (SP: 見出し直下に配置) */
  .about-body {
    left: 2.5rem;
    top: 56rem;             /* 見出しの直下まで詰める */
    width: 32.5rem;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
  }
  .about-body p + p { margin-top: 2.5rem; }

  /* Our Strength (SP: 375 wide) */
  .strength { padding-bottom: 5rem; }
  .strength-header {
    height: 10rem;         /* タイトル下マージンを広げる */
  }
  .strength-header-inner {
    padding: 0.5rem 2.5rem 0;
  }
  .strength-en {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    padding-left: 1rem;
  }
  .strength-en-bar {
    width: 0.425rem;
  }
  .strength-title {
    font-size: 2.4rem;
    letter-spacing: 0.10em;
    margin-top: 1.5rem;
  }
  .strength-divider {
    width: 32.5rem;
    bottom: 0.6rem;
  }

  /* SP layout: stacked single column */
  .strength-inner {
    display: block;
    padding: 5rem 0 0;     /* タイトル下マージンを広げる */
  }
  .strength-list {
    display: block;
  }
  .strength-item {
    margin-bottom: 0;
    padding: 0 2.5rem;
    /* PCでの中央揃え用設定をSPでは解除 */
    min-height: 0;
    display: block;
  }
  .strength-item:not(:first-child) {
    margin-top: 5rem;
  }

  /* SP image inside each item */
  .strength-sp-image {
    display: block;
    width: 100%;
    height: 25rem;
    margin: 0 auto 4rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.225rem;
  }

  .strength-num { font-size: 1.4rem; margin-bottom: 1rem; }
  .strength-heading { font-size: 2.2rem; margin-bottom: 2rem; letter-spacing: 0.10em; }
  .strength-text { font-size: 1.6rem; line-height: 1.75; }

  /* Hide PC sticky image on SP */
  .strength-pc-image-col { display: none; }

  /* ===== Service (SP: 375×1862) ===== */
  /* SP: overlay 高さを SP 用 head (46.5rem) + tabs (6rem) に再調整 */
  .service::before {
    height: 52.5rem;
  }
  .service-head {
    height: 46.5rem;          /* タブまで余裕 (lead末 415 + 50 gap) */
    margin: 0;
  }
  .service-jp {
    left: 6rem;
    top: 7rem;
    font-size: 2.5rem;
  }
  .service-watermark {
    left: 2.5rem;
    top: 15.1rem;
    font-size: 9rem;
  }
  .service-lead {
    left: 2.5rem;
    top: 27.1rem;
    font-size: 2.2rem;
    line-height: 1.65;
  }

  /* Tabs (SP: コンテンツ幅に収める) */
  .service-tabs {
    padding: 0 2.5rem;       /* 他セクションと同じコンテンツ余白 */
    gap: 0.5rem;
  }
  /* SP のみ表示 (PC の base で display:none) */
  .sp-only { display: inline; }

  .service-tab {
    height: 6rem;             /* SP: 60px */
  }
  .service-tab .tab-label {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    line-height: 1.35;        /* 2行の場合の行間 */
    padding: 0 0.6rem;        /* 左右のインナーパディング */
  }

  /* Dark panels — Figma SP 6073:29 準拠 */
  .service-panels { min-height: 66.6rem; }
  .service-panel-inner {
    min-height: 66.6rem;
    padding: 2.2rem 2.5rem 5rem;   /* 上22 / 左右25 / 下50 */
  }
  .service-panel-image {
    position: relative;            /* 縦並び */
    top: auto;
    right: auto;
    width: 100%;
    height: 21rem;                 /* Figma 325×210 相当 */
    margin: 0 0 4.3rem;            /* 画像→"01" 43px */
  }
  .service-panel-text {
    width: 100%;
  }
  .panel-num {
    font-size: 1.4rem;
    line-height: 1;
    margin: 0;
  }
  .panel-title {
    font-size: 2.2rem;
    line-height: 1.14;
    margin: 1rem 0 0;               /* "01"→タイトル 24px gap相当 */
  }
  .panel-desc {
    font-size: 1.6rem;
    line-height: 1.75;              /* 28/16 */
    margin: 2.5rem 0 0;             /* タイトル→本文 50px相当 */
    max-width: none;
  }
  .btn-white {
    margin-top: 6rem;               /* 本文→ボタン 60px */
    width: 20rem;
  }

  /* Achievements */
  .achievements {
    padding: 5rem 0 6rem;
  }
  .achievements-head {
    padding: 0 2.5rem;
  }
  .achievements-divider {
    margin-top: 2rem;
  }
  .achievements-slider {
    padding: 0 2.5rem;
    margin-top: 3rem;
    overflow: hidden;                /* PC同様クリップ */
  }
  .achievements-list {
    gap: 1.5rem;
    /* PC同様 transform で動かすのでネイティブスクロールは使わない */
  }
  .achievement-card {
    flex: 0 0 32.5rem;
    padding: 1.7rem;
  }
  .card-image { height: 21.2rem; margin-bottom: 2rem; }
  .card-model { font-size: 1.3rem; }
  .card-text { font-size: 1.4rem; line-height: 1.6; margin-bottom: 1.5rem; }
  .card-tag { font-size: 1.3rem; padding: 0.2rem 1.4rem; min-width: 5.5rem; border-radius: 1.5rem; }

  /* Achievement Modal (SP: 縦積み) */
  .achievement-modal-panel {
    width: calc(100vw - 3rem);
    max-height: calc(100vh - 4rem);
    padding: 3rem 2.5rem 3.5rem;
    grid-template-columns: 1fr;
    gap: 2rem;
    overflow: hidden auto;           /* SPはパネル全体でスクロール */
  }
  /* SP: 画像 → テキストの順に並べる */
  .achievement-modal-image-col {
    order: 1;
    gap: 1.5rem;
  }
  .achievement-modal-text-col {
    order: 2;
  }
  /* SP: 内側スクロールはせず通常フロー */
  .achievement-modal-text-body {
    overflow: visible;
    flex: initial;
    padding-bottom: 0;
  }
  .achievement-modal-image {
    aspect-ratio: 16 / 10;
  }
  .achievement-modal-image-label {
    right: 1.2rem;
    bottom: 1rem;
    font-size: 1.5rem;
  }
  .achievement-modal-model {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }
  .achievement-modal-title {
    font-size: 1.7rem;
    line-height: 1.4;                /* 行間を狭める (1.55 → 1.4) */
    margin-bottom: 1.4rem;
  }
  .achievement-modal-tags {
    gap: 0.6rem;
    margin-bottom: 1.6rem;
  }
  .achievement-modal-divider {
    margin-bottom: 1.6rem;
  }
  .achievement-modal-details {
    font-size: 1.3rem;
    line-height: 1.65;               /* 行間を狭める (1.9 → 1.65) */
    margin-bottom: 2.4rem;
  }
  /* SP: × CLOSE は本文の下にフローで配置 */
  .achievement-modal-close {
    position: static;
    font-size: 1.4rem;
  }

  /* Contact Modal (SP: 縦積み) */
  .contact-modal-panel {
    width: calc(100vw - 3rem);
    max-height: calc(100vh - 4rem);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: hidden auto;              /* SPは全体スクロール */
  }
  .contact-modal-image {
    order: 1;
    min-height: 22rem;
    aspect-ratio: 32.5 / 22;
  }
  .contact-modal-text-col {
    order: 2;
    padding: 4rem 2.5rem 3.5rem;
  }
  .contact-modal-close {
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.4rem;
  }
  .contact-modal-heading {
    font-size: 1.6rem;
    line-height: 1.95;
    letter-spacing: 0.1em;
    height: 24rem;
    margin-bottom: 3rem;
  }
  .contact-modal-body {
    font-size: 1.2rem;
    line-height: 1.85;
    margin-bottom: 2.5rem;
  }
  .contact-modal-tel-label {
    font-size: 1.3rem;
  }
  .contact-modal-tel-num {
    font-size: 2.8rem;
  }

  .slider-controls {
    padding: 0 2.5rem;
    margin-top: 2rem;
  }
  .slider-btn { width: 5rem; height: 5rem; }

  /* Company (SP) */
  .company-photo { height: 32rem; }   /* 200 → 320 SPでも写真を見せる */

  .company-inner {
    grid-template-columns: minmax(0, 1fr);  /* 長文は親幅に収める */
    gap: 0;
    padding: 5rem 2.5rem 5rem;              /* 画像とタイトルの間に余白 */
  }
  /* SP: Serviceセクションと同じ見え方 — 縦書きJP が左上、透かしが重なって斜め下へ */
  .company-head {
    position: relative;
    top: auto;
    height: 16rem;
    margin-bottom: 3rem;
    align-self: auto;
  }
  .company-jp {
    top: 0;
    left: 3.5rem;                 /* Figma: 60-25 */
    font-size: 2.5rem;
  }
  .company-watermark {
    top: 8.1rem;                  /* Figma: 300-219 */
    left: -0.3rem;                /* Figma: 22-25 */
    font-size: 9rem;
    letter-spacing: -0.04em;      /* Figma: -3.6px / 90px で詰める */
  }

  .company-right { max-width: none; }
  .company-greeting {
    margin-bottom: 4.5rem;        /* 代表あいさつ ⇔ 会社情報 の余白 */
    padding-bottom: 4.5rem;       /* 名前 ⇔ ボーダーライン の余白 (3rem → 4.5rem) */
  }
  .company-greeting-title,
  .company-info-title { font-size: 1.6rem; margin-bottom: 1.5rem; }
  .company-greeting-title { margin-bottom: 3rem; }
  .company-greeting-inner {
    flex-direction: column;
    gap: 2rem;
  }
  .company-greeting-image {
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
  }
  .company-greeting-body { font-size: 1.4rem; line-height: 1.85; margin-bottom: 1.5rem; }
  .company-greeting-signature { font-size: 1.4rem; }

  .company-table {
    max-width: none;
  }
  .company-table .row {
    padding: 1.6rem 0;
  }
  .company-table dt { font-size: 1.6rem; }
  .company-table dd { font-size: 1.5rem; }
  .company-map { height: 16.3rem; }

  /* ===== Contact (SP: 375×359, 全幅ダーク) ===== */
  .contact { padding: 0; }
  .contact-box {
    width: 100%;
    max-width: none;
    height: 35.9rem;
    margin: 0;
    border-radius: 0;
  }
  .contact-title {
    top: 4.5rem;
    left: 2.5rem;
    font-size: 5.5rem;
    line-height: 0.909;            /* 50/55 */
    letter-spacing: 0.05em;
  }
  .contact-desc {
    top: 13.5rem;
    left: 2.4rem;
    width: 32.6rem;
    font-size: 1.6rem;
    line-height: 1.75;             /* 28/16 */
  }
  .contact-tel {
    top: 24.4rem;
    left: 2.5rem;
    right: 2.5rem;
    display: block;                 /* SP: 縦並び */
  }
  .contact-tel-label {
    font-size: 1.6rem;
  }
  .contact-tel-num {
    display: block;
    margin: 1.5rem 0 0;             /* ラベルの下に */
    font-size: 5rem;
    line-height: 0.6;
    letter-spacing: 0.08em;
  }
  .contact-tel-hours { display: none; }

  /* ===== Footer (SP: 透明背景) ===== */
  .site-footer {
    padding: 5rem 0 3rem;
    margin-top: 0;
    background: transparent;
  }
  .footer-inner {
    padding: 0 2.5rem;
    min-height: 52rem;
  }
  /* 左: 縦書きキャッチ SVG */
  .footer-catch {
    top: 0;
    bottom: auto;                   /* PCのbottom指定をリセット */
    left: 2.5rem;
    width: 11rem;
    height: 30rem;
  }

  /* 右: メニュー */
  .footer-nav {
    left: auto;
    right: 2.5rem;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .footer-nav-col {
    gap: 2rem;
  }
  .footer-nav-item {
    font-size: 2.2rem;
    letter-spacing: 0.10em;
  }
  .footer-sub {
    gap: 0.2rem;
    margin-top: -1rem;
  }
  .footer-sub li {
    font-size: 1.7rem;
    letter-spacing: 0.08em;
  }

  /* SNS icon */
  .footer-sns {
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -0.5rem;
  }

  /* ロゴ: 一番下に */
  .footer-logo {
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    bottom: 0;
    width: auto;
  }
  .footer-logo img {
    width: 100%;
    max-width: 32.9rem;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

/* タブレット狭め調整 */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-inner { padding: 0 3rem; }
  .global-nav ul { gap: 2.2rem; }
  .header-ig { margin-left: 2rem; }
  .hero-content { left: 5vw; }
  .hero-right { right: 5vw; }
  .hero-catch { font-size: 2.4rem; }
  .about-inner,
  .strength-inner,
  .company-inner,
  .service-head,
  .service-tabs,
  .service-panel-inner,
  .achievements .section-head,
  .achievements-slider,
  .slider-controls,
  .contact-inner,
  .footer-inner { padding-left: 3rem; padding-right: 3rem; }
}