/* 株式会社ウーフ コーポレートサイト
   設計の正本 = ../../CLAUDE.md。トークンはここで一元管理する。
   2026-09-08 第2改訂: 参照(toshiyukihashimoto.jp / umi.design)の見た目そのものに寄せる。
   暗色ヒーロー×白抜きロゴ + 白地×青。縦書き・明朝・生成り・茜は全廃 */

:root {
  --shiro:  #FFFFFF;   /* 地: 白 */
  --yoru:   #0E1C30;   /* 面: 夜藍(ヒーロー・フッター) */
  --aizumi: #16283E;   /* 見出し: 藍墨 */
  --sumiao: #42536A;   /* 本文: 墨青 */
  --ruri:   #2456B0;   /* リンク・ボタン・差し色: 瑠璃 */
  --awa:    #F2F5FA;   /* 面: 淡青(CTA) */
  --itohai: #D7DBE1;   /* 罫線: 糸灰 */
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 本文の1行の幅。図・表・写真・フォームも同じ値を使い、右端を揃える。
     42rem ＝ 本文（1rem）で1行 約41字。
     em でなく rem にするのは、font-size を下げた注記（.yomi / .direct / .phase-note）だけ
     箱が狭くなり、本文より手前で折り返して右端が不揃いに見えるのを防ぐため */
  --measure: 42rem;
  --pad-x: clamp(1.4rem, 6vw, 6rem);
}

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

/* 640px以下は16px（スマホは従来どおり）→ 1120px以上で18px。
   PCの画面幅に対して16pxは小さく、本文が細長い帯に見えるため段階的に上げる */
html { font-size: clamp(16px, 13.33px + 0.417vw, 18px); scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--sumiao);
  background: var(--shiro);
  line-height: 2.0;
  font-feature-settings: "palt";
  letter-spacing: .02em;
}

a { color: var(--ruri); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--aizumi); }
:focus-visible { outline: 2px solid var(--ruri); outline-offset: 3px; }

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

strong { color: var(--aizumi); font-weight: 700; }

/* ---- 短い区切り線(瑠璃1本) ---- */
.mimi {
  border: 0;
  height: 2px;
  background: var(--ruri);
  width: 5.5rem;
  margin: clamp(3rem, 8vh, 5rem) var(--pad-x) 0;
}

/* ---- ヘッダー: スクロール中も画面上端に貼り付く ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--itohai);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 2rem;
  padding: clamp(.9rem, 2.4vh, 1.35rem) var(--pad-x);
}
/* 固定ヘッダーの下に見出しが潜り込まないよう、アンカー先に逃げを取る。
   7rem=112px はヘッダーの実測高さ(スマホ幅101px / PC幅91px)より大きい値 */
[id] { scroll-margin-top: 7rem; }

.brand { font-weight: 700; font-size: 1rem; letter-spacing: .12em; }
.brand a { display: flex; align-items: center; gap: 1.1rem; color: var(--aizumi); text-decoration: none; white-space: nowrap; }
/* ロゴマーク: マニュアル規定=淡い背景では黒。周囲の不可侵領域(高さA分)はgapとヘッダー余白で確保 */
.brand .mark { height: 1.25rem; width: auto; display: block; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 1.7rem; }
.site-nav a { text-decoration: none; font-size: .88rem; letter-spacing: .08em; color: var(--sumiao); white-space: nowrap; }
.site-nav a:hover { color: var(--ruri); }
.site-nav a[aria-current="page"] { color: var(--aizumi); border-bottom: 2px solid var(--ruri); padding-bottom: .2em; }

/* オンラインストアだけはボタンにして、サイト内リンクと役割を見分けられるようにする */
.site-nav .ext {
  background: var(--ruri);
  color: #fff;
  padding: .62em 1.35em;
  font-weight: 500;
  transition: background-color .25s ease;
}
.site-nav .ext::after { content: "\2197"; margin-left: .4em; font-size: .9em; }
.site-nav .ext:hover { background: var(--aizumi); color: #fff; }

/* ハンバーガー: 3本線→開くと×。JSはクラス付け替えだけを担う */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--itohai);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 1.3rem;
  height: 2px;
  margin-left: -.65rem;
  background: var(--aizumi);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1) { top: .95rem; }
.nav-toggle span:nth-child(2) { top: 1.4rem; }
.nav-toggle span:nth-child(3) { top: 1.85rem; }
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(.45rem) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-.45rem) rotate(-45deg); }

/* ---- スマホ・タブレット幅: ナビをハンバーガーの中にたたむ ----
   閾値80emの根拠=会社名(株式会社ウーフ)とナビ7項目を1行に並べるのに必要な実幅を
   preview_evalで実測すると約1240px(ロゴ+社名291px + ナビ724px + 左右余白 + 隙間)。
   旧58em(928px)は928〜1240pxの間で幅が足りずナビが会社名の上に重なって表示されていた
   (2026-09-09 池永さん報告で発覚)。1240pxに安全域を足して80em(1280px)に上げた。
   .js が付くのは nav.js が読めたときだけ(JSが無効ならナビは開いたまま見える) */
@media (max-width: 80em) {
  .nav-toggle { display: block; }
  /* 社名+ロゴ+ハンバーガーが375px幅に1行で収まるまで詰める(実測=折り返し発生の直し) */
  .brand { font-size: .92rem; letter-spacing: .04em; }
  .brand a { gap: .7rem; }
  .brand .mark { height: 1.05rem; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--shiro);
    border-bottom: 1px solid var(--itohai);
    padding: .4rem var(--pad-x) 1.6rem;
  }
  .js .site-header.is-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--itohai); }
  .site-nav a { display: block; padding: .95rem 0; font-size: 1rem; }
  .site-nav .ext { text-align: center; margin-top: 1.4rem; padding: .95rem 1.35em; }
  .site-nav li:has(.ext) { border-top: 0; }
}

/* ---- ヒーロー(トップ): 夜藍の面に白抜きワードマークを大きく。大胆さはここ1か所だけ ---- */
/* 背景の質感カット hero-bg.jpg は暗い夜藍のタオルパイル。上に夜藍の半透明を2枚重ねて
   白文字のコントラストを確保する(画像そのものは装飾なので alt を持たせず CSS で敷く) */
.hero {
  background:
    linear-gradient(rgba(14, 28, 48, .82), rgba(14, 28, 48, .93)),
    url("/assets/img/hero-bg.jpg") center / cover no-repeat,
    var(--yoru);
  color: #fff;
  padding: clamp(5rem, 16vh, 10rem) var(--pad-x) clamp(5rem, 14vh, 9rem);
}
.hero .hero-logo {
  width: min(78vw, 860px);
  height: auto;
  margin-bottom: clamp(2.8rem, 7vh, 4.5rem);
}
.hero h1 {
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  letter-spacing: .1em;
  line-height: 1.6;
  color: #fff;
}
.hero .lede { max-width: var(--measure); margin-top: 2.2rem; color: rgba(255, 255, 255, .8); }
.hero .lede p { margin-bottom: 1.3rem; }
.hero .lede .place { color: #A9C6F5; font-size: .95rem; letter-spacing: .14em; }

/* 読み込み時のフェード1回だけ。動きはここ以外に付けない */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-logo, .hero h1, .hero .lede { animation: hero-in 1.1s cubic-bezier(.22,.61,.36,1) both; }
  .hero h1 { animation-delay: .18s; }
  .hero .lede { animation-delay: .36s; }
  @keyframes hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- 下層ページの題字 ----
   band-texture.jpg は淡い平織りのマクロ。白の半透明を重ねて藍墨の見出しを読ませる。
   下層5ページで同じ1枚を使い回す(ページごとに絵柄を変えると帯が主役になってしまう) */
.page-title {
  background:
    linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .95)),
    url("/assets/img/band-texture.jpg") center / cover no-repeat;
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--pad-x) 2.4rem;
}
.page-title h1 {
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--aizumi);
}
.page-title .yomi { color: var(--ruri); font-size: .92rem; letter-spacing: .12em; margin-top: .9rem; }

/* ページタイトル直下の帯画像。2026-09-10 池永さん指摘「上の余白に適当な画像が欲しい」で
   /flow/ に追加。既存の質感カットを使い回す（band-texture.jpg と同じ運用） */
.section-banner {
  height: clamp(140px, 20vw, 220px);
  background-size: cover;
  background-position: center;
}

/* ---- 本文セクション: 罫でなく余白で区切る ---- */
main section { padding: clamp(4rem, 11vh, 7.5rem) var(--pad-x); }
main h2 {
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .06em;
  color: var(--aizumi);
  margin-bottom: 2.2rem;
}
main h3 { font-size: 1.02rem; letter-spacing: .08em; color: var(--aizumi); margin: 2rem 0 .7rem; }
/* h3 の下の小見出し。h3（1.02rem・字間.08em・太さ700）との序列を壊さないよう、大きさを本文と
   同じ1remに置き、字間を .04em に詰め、太さを 700 から 500 に落とす。色は h3 と同じ藍墨。
   大きさだけで差を付けると 18.36px と 18px で見分けが付かないので、太さで差を付けた。 */
main h4 { font-size: 1rem; font-weight: 500; letter-spacing: .04em; color: var(--aizumi); margin: 1.6rem 0 .5rem; }
main p, main ul, main ol, main dl { max-width: var(--measure); }
main p + p { margin-top: 1.2rem; }
main ul, main ol { padding-left: 1.4em; }
main li + li { margin-top: .8rem; }

/* 2本柱など横並びの面 */
.two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(2.4rem, 6vw, 5rem); }
.pillar { border-top: 2px solid var(--ruri); padding-top: 1.6rem; }
/* 事業紹介の写真: 質感カットのみ(工場・製品に見える構図は使わない)。生成=Canva、出所はCLAUDE.md */
.pillar-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.4rem; }
/* 段落の直後に置くと上が詰まるので上下とも余白を持たせる（隣り合う見出しとはマージンが相殺される） */
.section-photo { width: 100%; max-width: var(--measure); aspect-ratio: 21 / 9; object-fit: cover; margin: 2.2rem 0 2rem; }
/* 説明図（SVG）。写真と違って切り取ると意味が壊れるので object-fit で切らず、
   元の縦横比のまま幅に収める（height:auto） */
.diagram { display: block; width: 100%; max-width: var(--measure); height: auto; margin: 2.2rem 0 2rem; }
.pillar h3 { margin-top: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; }

/* 見出しの左に置く線画アイコン。実体は /assets/img/icons.svg の <symbol> 1ファイル。
   2026-09-08 池永さんの指示で実績ページにも商品写真(.works-photo)を置いたが、
   アイコンは残して併存させる（写真が読めない環境でも品目を見分けられる） */
.icon-head { display: flex; align-items: center; gap: .7rem; }
.icon-head svg {
  flex: none;
  width: 1.75em;
  height: 1.75em;
  color: var(--ruri);
  overflow: visible; /* 線幅が viewBox の縁で切れるのを防ぐ */
}
/* h2 は h3 より字が大きいぶん em 指定だとアイコンが見出しより目立つので倍率を下げる */
h2.icon-head svg { width: 1.4em; height: 1.4em; }
/* 実績1件ごとの見出し: アイコンぶんだけ字が下がるので行の高さを揃える */
.works-case { margin-top: 2.8rem; }
/* 実績1件ごとの商品写真。
   正方形(1000×1000)と横長(1000×659)が混在するので、単独1枚の実績では
   縦横比を CSS で決め打ちしない＝img の width/height 属性の比率をそのまま使う
   (aspect-ratio + object-fit:cover にすると横長の1枚だけ左右が切れて品物が画面から外れる)。
   幅は本文の --measure より狭い30emにする＝商品1点に寄った写真なので、本文の幅いっぱいに広げると
   写真が節の主役になってしまう */
.works-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 30em;
  margin: 1.2rem 0 1.6rem;
  background: var(--awa); /* 読み込み前に高さぶんの穴が白く抜けるのを防ぐ */
}
/* 1件に写真を2〜3枚置くとき(実績1・2・4)に使う横並び。
   30emの写真を縦に積むと、その1件だけページの縦を倍使ってしまう。
   auto-fit + minmax なので画像が2枚でも3枚でも1行に収まる
   （最小幅120px×最大4枚ぶんが30emの中に入る計算） */
.works-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
  max-width: 30em;
  margin: 1.2rem 0 1.6rem;
}
/* 横並びのときだけ縦横比を4:5に揃えて object-fit: cover でクロップする。
   高さを揃える必要があるのは同じ実績の中で写真が複数枚並ぶときだけ（2026-09-09 池永さん指摘。
   「各実績セクションで高さが揃っていれば良い。セクション横断して全画像が揃う必要はない」）。
   4:5 は支給写真のうち縦長側（800×1000）の実寸に合わせた比率で、
   正方形の写真は左右が1割ずつ切れる程度で済む */
.works-photos .works-photo {
  max-width: none;
  margin: 0;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* 定義リスト(会社概要)。表の罫は情報なので残し、色だけ薄く */
.spec { border-top: 1px solid var(--itohai); max-width: var(--measure); }
/* ラベル列は12em(192px)。実績ページの「仕様・製作のポイント」(11文字)がいちばん長く、
   実測159pxなので旧10em(160px)では折り返していた。12emで1行に収まり33pxの余りが出る */
.spec > div { display: grid; grid-template-columns: 12em 1fr; gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--itohai); }
.spec dt { letter-spacing: .08em; color: var(--ruri); font-size: .92rem; }
@media (max-width: 34em) { .spec > div { grid-template-columns: 1fr; gap: .1rem; } }

/* 担当工程のタグ(実績ページ)。文章で書くと件ごとの違いが読み取れないので、
   4工程を毎回同じ並びで出し、当社が担当した工程だけを塗る */
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.phases li {
  margin-top: 0; /* 200行目の `main li + li` が付ける .8rem を打ち消す(2個目以降だけ下がる) */
  font-size: .84rem;
  line-height: 1.5;
  letter-spacing: .04em;
  padding: .28em .8em;
  border: 1px solid var(--ruri);
  border-radius: 999px;
  color: var(--shiro);
  background: var(--ruri);
  white-space: nowrap;
}
/* 当社が担当していない工程。枠だけ残し、誰がやったかを .phase-note に書く */
.phases li.off { color: var(--sumiao); background: transparent; border-color: var(--itohai); }
.phase-note { margin: .6rem 0 0; font-size: .86rem; color: var(--sumiao); }

/* 特性のタグ(実績ページ)。生地・織り・加工・縫製の特徴を短い語で並べる。
   担当工程(.phases)は4工程を毎回同じ並びで出す塗りつぶしのタグなので、
   件ごとに語も個数も変わるこちらは塗らず、頭に # を付けた文字だけにして見分けられるようにする */
.traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.traits li {
  margin-top: 0; /* 200行目の `main li + li` が付ける .8rem を打ち消す(2個目以降だけ下がる) */
  font-size: .92rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ruri);
  white-space: nowrap;
}
.traits li::before { content: "#"; margin-right: .1em; }

/* 流れ(順序のある内容にだけ番号を使う) */
.flow-steps { list-style: none; padding: 0; counter-reset: step; max-width: var(--measure); }
.flow-steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.6em 1fr;
  gap: 1.6rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--itohai);
}
.flow-steps > li:first-child { border-top: 1px solid var(--itohai); }
.flow-steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--ruri);
  line-height: 1.2;
}
/* 段の見出しは /flow/ が h3、/business/#towel が h4（上に h3 があるため）。どちらにも当てる。 */
.flow-steps :is(h3, h4) { margin: 0 0 .4rem; font-size: 1.08rem; font-weight: 700; letter-spacing: .04em; }
.flow-steps p { font-size: .95rem; }

/* Googleフォームの埋め込み枠。
   iframeは別ドメインなので中身の高さをJSで測れない。2026-09-09 に私がChrome headlessで
   フォームを幅ごとに撮り、PILで本文の最下端の画素を走査して実測した=
   iframe幅330px→2848px / 420px→2573px / 736px→2342px（狭いほど質問文が折り返して高くなる）。
   下の3段はその実測値に約40pxの余裕を足したもの。質問を増やしたら測り直す。
   2026-09-10 池永さん指摘「上部の余白が大きすぎる」＝サードパーティCookieがブロックされる
   環境ではフォームの質問が読み込まれず、この高さぶんが丸ごと空白になる。外枠を70vhの窓にして
   overflow-y:autoにし、フォームが表示されていればその中でスクロールする形にした
   （iframe自体の高さは変えていない＝実測値のまま） */
.form-embed { max-width: var(--measure); max-height: 70vh; overflow-y: auto; border: 1px solid var(--itohai); border-radius: 4px; }
.form-embed iframe { width: 100%; height: 2890px; border: 0; display: block; }
/* viewport 480px で iframe は約435px。実測420px(2573)より広いので同じ段に入れる */
@media (min-width: 30em) { .form-embed iframe { height: 2620px; } }
/* 52em(832px)にした根拠＝iframeが上限の736pxに達するのは viewport 824px 以上（左右の余白88px）。
   50em(800px)だと iframe は704pxまでしか広がらず、余裕が25pxしか残らなかった（preview で実測） */
@media (min-width: 52em) { .form-embed iframe { height: 2390px; } }

/* ---- 要確認プレースホルダ(公開前に必ず差し替える) ---- */
.todo {
  background: #FFF3B8;
  border: 1px dashed #B89B00;
  padding: .1em .5em;
  font-size: .92em;
}
.todo::before { content: "要確認: "; font-weight: 700; }

/* ---- 問い合わせCTA(全ページ下部) ---- */
.cta {
  background: var(--awa);
  text-align: left;
}
.cta h2 { margin-bottom: 1.2rem; }
.btn {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 1rem 3.2rem;
  border: 0;
  background: var(--ruri);
  color: #fff;
  text-decoration: none;
  letter-spacing: .12em;
  font-size: .98rem;
  font-weight: 500;
  transition: background-color .25s ease;
}
.btn:hover { background: var(--aizumi); color: #fff; }
.cta .direct { margin-top: 1.4rem; font-size: .92rem; }

/* ---- フッター: ヒーローと同じ夜藍で締める ---- */
.site-footer {
  background: var(--yoru);
  color: rgba(255, 255, 255, .75);
  padding: clamp(2.8rem, 7vh, 4.5rem) var(--pad-x);
  font-size: .84rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.4rem;
  justify-content: space-between;
}
.site-footer .addr { letter-spacing: .05em; }
.site-footer .store a {
  color: rgba(255, 255, 255, .9);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: .25em;
}
.site-footer .store a:hover { color: #fff; text-decoration-color: #fff; }

@media (max-width: 40em) {
  body { line-height: 1.9; }
  .hero { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .hero .hero-logo { width: 88vw; margin-bottom: 2.4rem; }
  main section { padding-top: 3.2rem; padding-bottom: 3.2rem; }
}