/* ==========================================================================
   GD SEVENTH ｜ 共通スタイル common.css（正本）
   確定HTML ver3 のトンマナを抽出。全ページで読み込む。
   色トークンは Tailwind 側（gd-ink/gd-purple/gd-mauve）に定義。ここは
   Tailwind では表現できない演出系（縦書き・テクスチャ・reveal 等）を担う。
   ========================================================================== */

:root {
  --gd-ink: #141414;
  --gd-purple: #4A235A;
  --gd-mauve: #7D5A8C;
  /* 「スッ、ドン」── 速く立ち上がり、重みを持って着地する */
  --ease-thud: cubic-bezier(.18, 1.1, .26, 1);
}

html { scroll-behavior: smooth; }
body {
  background: #FFFFFF;
  color: var(--gd-ink);
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 縦書き */
.vertical { writing-mode: vertical-rl; text-orientation: mixed; }

/* 太明朝の見出し */
.mincho-black { font-family: "Zen Old Mincho", serif; font-weight: 900; }
.mincho       { font-family: "Zen Old Mincho", serif; font-weight: 700; }

/* ── スクロール演出「スッ、ドン」 ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(64px) scale(.985);
  transition: opacity .5s ease, transform .82s var(--ease-thud);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }

/* 極太ラインが横に “ドン” と伸びる */
.bar-grow { transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease-thud); }
.bar-grow.is-visible { transform: scaleX(1); }

/* 背面の巨大ウォーターマーク（和文字） */
.watermark {
  position: absolute;
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  line-height: .8;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── 南部鉄器「鋳肌」テクスチャー（白系セクション限定） ──────────
   ヘッダー / フッター / 実績のカラー写真には .iron-texture を付けない。 */
.iron-texture { position: relative; isolation: isolate; }
.iron-texture::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='iron'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23iron)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .06;
  mix-blend-mode: multiply;
}
.iron-texture::after {  /* 霰（あられ）＝千鳥配置の鋳出し粒 */
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 56%, rgba(15,12,18,.16) 0, rgba(15,12,18,.16) 1.5px, rgba(15,12,18,0) 3.4px),
    radial-gradient(circle at 50% 56%, rgba(15,12,18,.16) 0, rgba(15,12,18,.16) 1.5px, rgba(15,12,18,0) 3.4px),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 1px, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 1px, rgba(255,255,255,0) 2.2px);
  background-size: 26px 26px, 26px 26px, 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px, 0 0, 13px 13px;
  opacity: .55;
}

/* ── メインビジュアル：モノクロ現場写真 ────────────────────────
   注意: url() は「このCSSファイル」からの相対パスで解決される。
   common.css は assets/css/ にあるため、画像は ../img/ を指す。
   写真は元からモノクロだが、他画像に差し替えても質感が揃うよう filter は残す。 */
.hero-mono {
  background: #050505 url('../img/mv_image.jpg') center / cover no-repeat;
  filter: grayscale(1) contrast(1.08);
}
/* SP は縦長ゆえ中央基準だと人物の顔が右に切れる。焦点を右寄りへ。 */
@media (max-width: 767px) {
  .hero-mono { background-position: 68% center; }
}

/* ── 実績カラープレースホルダ（本番＝microCMS のカラー写真） ────── */
.fes-1 { background: radial-gradient(circle at 25% 30%,#FFD23F 0 14%,transparent 38%), radial-gradient(circle at 78% 22%,#FF5E5B 0 12%,transparent 34%), linear-gradient(135deg,#E4002B 0%,#C2185B 45%,#6A1B9A 100%); }
.fes-2 { background: radial-gradient(circle at 70% 75%,#00E5FF 0 16%,transparent 40%), radial-gradient(circle at 30% 20%,#FFEB3B 0 12%,transparent 32%), linear-gradient(160deg,#0091EA 0%,#2962FF 50%,#311B92 100%); }
.fes-3 { background: radial-gradient(circle at 50% 18%,#FFF176 0 10%,transparent 30%), radial-gradient(circle at 18% 78%,#FF6D00 0 14%,transparent 38%), linear-gradient(140deg,#FF1744 0%,#F50057 40%,#4A148C 100%); }
/* 実績カード：写真は常時カラー。
   ホバーで（1）枠内でズーム、（2）画像下端に紫のラインが左から「ドン」と伸びる。
   紫ラインは枠（.fes-frame）の ::after。画像を覆う位置に出すので z-index を上げる。 */
.fes-frame { position: relative; overflow: hidden; }
.fes-shot { transition: transform .6s var(--ease-thud); }
.group:hover .fes-shot { transform: scale(1.05); }
.fes-frame::after {
  content: "";
  position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 100%; height: 3px;
  background: var(--gd-purple);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease-thud);
  pointer-events: none;
}
.group:hover .fes-frame::after { transform: scaleX(1); }

/* ── ヘッダー ─────────────────────────────────────────────── */
#siteHeader { transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease; }
#siteHeader.is-scrolled {
  background-color: rgba(20,20,20,.92);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* ヘッダーの帯（ロゴ／ハンバーガーの行）を少し細く。
   HTML 側の h-20(80px)・ロゴ h-16(64px) を id セレクタで上書き（全ページ共通）。 */
#siteHeader > div:first-child { height: 4rem; }        /* 64px（旧 80px） */
#siteHeader > div:first-child img { height: 3.25rem; } /* 52px（旧 64px） */

/* モバイルメニュー
   ★重要: 絶対配置にして、閉じている間はヘッダーの高さを増やさない。
   これをしないと（display:block のまま）非表示メニューがヘッダーに居座り、
   スクロール時の黒背景がメニュー高さぶん縦に伸びてしまう（実測 329px の原因）。
   絶対配置により黒帯はロゴ行（64px）だけになり、開いた時はバー直下に重なって出る。 */
#navMobile { position: absolute; left: 0; right: 0; top: 100%; transition: opacity .3s ease, visibility .3s ease; }
#navMobile[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; }

/* プレースホルダのラベル（カンプ用。本番写真差し替え後は削除可） */
.ph-tag {
  position: absolute; bottom: 14px; right: 16px;
  font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.22); border-radius: 2px;
  padding: 4px 8px; background: rgba(0,0,0,.25);
}

/* ── 実績モーダル（works.html 詳細ビュー） ──────────────────────
   ・背景オーバーレイ＋カードを --ease-thud で「スッ、ドン」と迎え入れる
   ・×ボタン / 背景クリック / ESC で閉じる（挙動は works.js）
   ・本文（.wm-body）は microCMS の body（リッチHTML）を流し込む最低限のリズム */
.gd-modal { position: fixed; inset: 0; z-index: 60; }
.gd-modal[hidden] { display: none; }
.gd-modal .wm-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 8, 12, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s ease;
}
.gd-modal .wm-scroll { position: absolute; inset: 0; overflow-y: auto; }
.gd-modal .wm-card {
  opacity: 0; transform: translateY(28px) scale(.98);
  transition: opacity .45s ease, transform .55s var(--ease-thud);
  will-change: opacity, transform;
}
.gd-modal.is-open .wm-overlay { opacity: 1; }
.gd-modal.is-open .wm-card   { opacity: 1; transform: none; }

.wm-body { line-height: 1.9; color: rgba(20, 20, 20, .82); word-break: break-word; }
.wm-body > * + * { margin-top: 1em; }
.wm-body h2, .wm-body h3 { font-family: "Zen Old Mincho", serif; font-weight: 900; color: var(--gd-ink); margin-top: 1.6em; }
.wm-body h2 { font-size: 1.3rem; }
.wm-body h3 { font-size: 1.1rem; }
.wm-body a  { color: var(--gd-purple); text-decoration: underline; }
.wm-body img { max-width: 100%; height: auto; margin: 1.2em 0; }
.wm-body ul { list-style: disc;    padding-left: 1.4em; }
.wm-body ol { list-style: decimal; padding-left: 1.4em; }

/* 新着情報の説明文（プレーンテキスト）。改行をそのまま活かす（textContentで安全に挿入）。 */
.news-body { line-height: 1.9; color: rgba(20, 20, 20, .82); white-space: pre-wrap; word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .bar-grow { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .iron-texture::before, .iron-texture::after { mix-blend-mode: normal; }
  .gd-modal .wm-overlay, .gd-modal .wm-card { transition: none; }
  .fes-shot, .fes-frame::after { transition: none; }
}