@charset "utf-8";
/* =========================================================================
   Rebuild Group — D｜帯（ヒーローは案1｜数珠つなぎ）
   測って決めた値は README の「触るときに壊さないでほしいところ」に理由付きで書いてある。
   ・企業色：TSSは自社サイトの地色系ベージュ（TSWとのΔE 28.0）。Nazolは黒（黄は付箋UIの色）
   ・参画企業ロゴ：大きさは「インク量×占有範囲」の知覚量、位置は視覚的重みの90%範囲の中心
   ・掲載順：SY → アップラボ → TSS → TSW → あしすと → エリトラ → Nazol（帯・数珠・カード・フッター共通）
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  /* 紙と墨（当初の6社の色をOKLabで平均した温かい灰から派生。7社目の追加後も据え置き） */
  --paper:#f3f2ef;
  --paper-warm:#f9f8f5;
  --card:#ffffff;
  --ink:#1c1c1e;
  --ink-mid:#4a4a4d;
  --ink-soft:#6b6b70;
  --mist:#e7e6e1;
  --wash:#dad9d3;
  --foot-bg:#e7e6e1;
  --idx-bg:#eeede9;
  --rule-soft:rgba(28,28,30,.09);
  --shadow:0 2px 4px rgba(28,28,30,.03), 0 12px 28px rgba(28,28,30,.055);

  /* 企業カラー（各社サイトのスタイルシートから） */
  --c-sy:#e4283a;
  /* アップラボ：同社サイトの --teal。CTAボタン（.pill）の地色そのもの。
     エリトラの青とは色差7.4で、7色の中では最も近い組。第3色覚のシミュレーションでは0.9まで縮むが、
     P型・D型では悪化せず（最小は別の組のまま）、掲載順でも2番目と6番目で隣り合わない。
     色の隣には必ず社名か略号が文字で出るため、色だけに頼る場面は無い。 */
  --c-al:#038388;
  --c-as:#e8652a;
  --c-tsw:#2b4a6f;
  --c-tss:#a5865b;
  --c-nz:#0a0a0a;
  /* エリトラ：同社サイトの --blue-deep。ロゴの主色 #006090 はTSWの紺と色差7.6で見分けにくいため不採用 */
  --c-el:#1f7fb3;
  /* Future ReBuild ロゴの灰。数珠つなぎの糸に使う */
  --rebuild-gray:#505050;

  /* 帯：参画企業を掲載順に等分（7社）。グループが「署名」する場所にだけ使う */
  --ribbon:linear-gradient(90deg,
    var(--c-sy)   0.00%  14.29%,
    var(--c-al)   14.29%  28.57%,
    var(--c-tss)  28.57%  42.86%,
    var(--c-tsw)  42.86%  57.14%,
    var(--c-as)   57.14%  71.43%,
    var(--c-el)   71.43%  85.71%,
    var(--c-nz)   85.71%  100%);

  /* 書体（4社サイトと共通のDNA） */
  --f-display:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
  --f-body:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:'DM Mono','Zen Kaku Gothic New',ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;

  /* 寸法：1440で 80px 余白 / 1040px 本文幅（4社サイトと同じ measure） */
  --gutter:clamp(20px, 5.5vw, 80px);
  --measure:1040px;
  --topbar-h:6px;
  --stage-pad:clamp(72px, 2.6vw + 61px, 108px);
  /* 固定ヘッダーの高さ（スクロール前）。実測 390pxで80px、768〜1440pxで76.6〜77.9px。
     ヒーローの上余白をここから計算しているので、ヘッダーの中身や余白を変えたら測り直すこと。 */
  --head-h:78px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* メニューから飛んだときの着地点。0 にすると、行先の区画の上端＝地の色が変わる境目が、
   ちょうど画面の一番上に来る。ここに余裕を足すと、足したぶんだけ前の区画の地が残り、
   ヘッダーの地が .88 の半透明なので境目の線がヘッダーの中に透けて出る。 */
html{scroll-behavior:smooth;scroll-padding-top:0;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-mid);
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(15px, 0.17vw + 14.2px, 16.64px);
  line-height:2.05;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:var(--topbar-h);   /* 屋根の帯は fixed で流れから外れているので、その分をここで空ける */
}
h1,h2,h3{
  margin:0;font-family:var(--f-display);font-weight:700;
  line-height:1.55;letter-spacing:.01em;color:var(--ink);
  word-break:keep-all;line-break:strict;text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease)}
a:hover{color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--f-mono)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}

.skip{
  position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-200%);
  padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--paper-warm);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
}
.skip:focus{transform:none;color:var(--paper-warm)}
/* 目には出さず、読み上げにだけ届くテキスト（別タブで開くことの予告など） */
/* ページ内リンクの着地先。読み上げとキーボードの現在地を移すために focus するので、
   マウスで押したときに枠が出ないようにする（キーボードの :focus-visible は別に効く） */
[tabindex="-1"]:focus{outline:none}
/* ドメインなど、途中で折り返されると読みにくい語に付ける */
.nowrap{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gutter) * 2, var(--measure));margin-inline:auto}
.stage{position:relative;padding-block:var(--stage-pad)}
/* 紙とフッターのちょうど中間。以前は rgba(255,255,255,.72)（#fcfbfb）で、白いカードや
   問い合わせボタン（#ffffff）との差が4しかなく、地に溶けていた。暗い側にしたことで差は23になり、
   お問い合わせにもこの地を掛けられるようになった（以前はボタンが消えるので紙のままにしていた）。 */
.stage--tint{background:rgba(28,28,30,.035)}
.stage--join{padding-bottom:clamp(96px, 4vw + 78px, 140px)}
.stage__title{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:clamp(25px, 1.9vw + 17.6px, 43.2px);max-width:20em}
/* 本文は禁則だけ掛ける。auto-phrase まで掛けると企業カードの説明文の行数が4行に揃わなくなる
   （実測で13枚中7枚が5行に増えた）。strict なら行数は変わらず、行頭のー等だけが直る。 */
.stage__lead{margin-top:clamp(14px, .7vw + 9px, 22.4px);max-width:34em;color:var(--ink-mid);line-break:strict}

/* ---------- 屋根の帯 ---------- */
/* 7社を掲載順に等分した6pxの帯。グループが7社であることを、文字を使わずに最上部で言う。
   横断ナビ（グループバー）は 2026-09-19 に撤去。理由はREADMEの「帯」を参照。
   sticky ではなく fixed。sticky だと、トラックパッドで上端を越えて引っ張ったとき
   （macOSのラバーバンド）にページと一緒に下がり、fixed のヘッダーだけ残って帯が離れて見える。
   場所を空けるぶんは body の padding-top で持っている。 */
.roof{position:fixed;top:0;left:0;right:0;z-index:60;height:6px;background:var(--ribbon)}
/* ヘッダーが地色を持つ切り替え点の目印。main.js が屋根の線(6px)と見比べ、
   これが屋根の下へ入る＝61pxスクロールした時点で .is-stuck を付ける。 */
#masthead-sentinel{position:absolute;top:66px;left:0;width:1px;height:1px}

/* ---------- masthead ---------- */
/* ヘッダーは最初から固定で、位置は一度も動かさない。以前は絶対配置→固定に切り替えていたため、
   切り替わる瞬間にヘッダーが一度画面から消えて貼り直されていた。
   スクロールで変えるのは地色・影・高さ（上下の余白）だけで、0.5秒かけて移る。 */
.masthead{--stuck-pad:11px;position:fixed;top:var(--topbar-h);left:0;right:0;z-index:50;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.masthead__inner{display:flex;align-items:center;gap:clamp(20px,3.3vw,48px);padding:20.8px var(--gutter);transition:padding .5s var(--ease)}
.masthead.is-stuck{background:rgba(249,248,245,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule-soft),0 10px 30px rgba(28,28,30,.05)}
/* 物理プロパティで書く。padding-block だと、モバイル側の `padding:18px ...`（短縮形）に
   あとから上書きされて、幅767px以下でヘッダーが縮まなくなる。 */
.masthead.is-stuck .masthead__inner{padding-top:var(--stuck-pad);padding-bottom:var(--stuck-pad)}

.wm{display:flex;align-items:center;gap:12px;line-height:1;color:var(--ink);flex:none}
.wm__mark{display:block;width:30px;height:8px;border-radius:2px;background:var(--ribbon);flex:none}
.wm__en{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,.9vw + 18.8px,25.6px);letter-spacing:.01em}
.wm__sub{font-family:var(--f-mono);font-size:11.2px;letter-spacing:.24em;color:var(--ink-soft);align-self:flex-end;padding-bottom:3px}

.masthead__nav{margin-left:auto;min-width:0}
.masthead__nav ul{display:flex;gap:clamp(18px,2.4vw,35.2px)}
.masthead__nav a{font-family:var(--f-mono);font-size:11.2px;letter-spacing:.16em;white-space:nowrap;color:var(--ink-mid);padding-bottom:4px;border-bottom:1px solid transparent}
.masthead__nav a:hover,.masthead__nav a.is-current{color:var(--ink);border-bottom-color:var(--ink)}

/* 地色のあるピルは、右パディングから字間1つぶんを引く。letter-spacing は最後の文字の「後ろ」にも
   入るので、左右を同じ値にすると文字が字間1つぶんだけ左に寄る（お知らせのピルで実測1.49px）。 */
.pill{
  flex:none;font-family:var(--f-mono);font-size:11.2px;letter-spacing:.14em;
  padding:8.06px calc(16.8px - .14em) 8.06px 16.8px;border-radius:999px;color:var(--paper-warm);background:var(--ink);
  box-shadow:0 4px 14px rgba(28,28,30,.22);
}
.pill:hover{color:var(--paper-warm);opacity:.86}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;margin-left:auto;flex:none}
.burger i{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- モバイルメニュー ---------- */
.menu{position:fixed;inset:var(--topbar-h) 0 0;z-index:45;background:var(--paper-warm);overflow-y:auto;opacity:0;transition:opacity .28s var(--ease)}
.menu.is-open{opacity:1}
.menu__inner{padding:96px var(--gutter) 56px}
.menu__list{display:grid;gap:4px}
.menu__list a{display:block;padding:12px 0;font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--ink)}
.menu__label{margin:40px 0 8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);padding-top:24px;border-top:1px solid var(--rule-soft)}
.menu__sites{display:grid;gap:2px}
.menu__sites a{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14.5px;line-height:1.7;color:var(--ink);word-break:keep-all;line-break:strict}

/* ---------- 共通部品 ---------- */
.eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,.9vw,12.8px);
  font-family:var(--f-mono);font-size:clamp(10.5px,.05vw + 10.3px,11.2px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:clamp(24px,1.45vw + 3.1px,44.8px);
}
.eyebrow__en{display:inline-flex;align-items:center;gap:11.2px;padding:4.7px 10.64px;border-radius:999px;background:var(--mist);color:var(--ink)}
.dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--c,var(--ink))}


.mark{background:var(--ribbon) no-repeat 0 100% / 100% 8px;padding-bottom:6px}

.card{
  --card-r:20px;                  /* 角丸。当たり判定の ::after と必ず同じ値にする */
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--card-r);box-shadow:var(--shadow);
  padding:30px 32px 32px;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(28,28,30,.04),0 20px 44px rgba(28,28,30,.085)}
.card--member{border-top:4px solid var(--c);padding-top:26px}
/* 社名は1行の会社と2行の会社があるので、2行ぶんの高さを必ず確保する。
   これをしないと、同じ行に並んだカードで分野・説明文・タグの開始位置が31pxずれる。 */
.card--member h3{min-height:calc(2 * 1.6em)}

.card--member .card__idx .dot{background:var(--c);width:8px;height:8px}
.card--service{overflow:hidden;padding-top:34px}
/* 参画企業カードと同じ理由。サービス名も1行と2行が混ざる（「法令アップデート収集システム」だけ2行） */
.card--service h3{min-height:calc(2 * 1.6em)}
.card--service::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ribbon)}
.card__idx{
  display:inline-flex;align-items:center;gap:9.6px;align-self:flex-start;
  font-family:var(--f-mono);font-size:11.2px;letter-spacing:.2em;text-transform:uppercase;
  /* 左右そろえたまま。先頭が丸（.dot）のときは字間ぶんを引かない —
     丸は縁に寄ると「離れて」見えるぶん、右に字間1つぶんの余りがあるほうが釣り合う。
     丸のない --flat（サービスカード）だけ下で引いている。 */
  padding:4.7px 11.2px;border-radius:999px;white-space:nowrap;
  background:var(--idx-bg);color:var(--ink);
}
.card__idx--flat{letter-spacing:.18em;padding-right:calc(11.2px - .18em)}
/* 上限21pxは「TAMAシステム／ソリューションズ合同会社」の2行目（12字）が
   カードの内寸261pxに収まる上限。これを超えると同社だけ社名が3行になり、
   下の min-height（2行ぶん）では揃えきれなくなる。長い社名が増えたら測り直すこと。 */
.card h3{margin-top:17.6px;font-size:clamp(19px,.29vw + 14.8px,21px);line-height:1.6}
/* カードの中で「押す場所」を示す丸（2026-09-20）。当たり判定はカード全面で、
   下の ::after をカード全面に広げているだけなので、リンクは1枚に1本のまま。
   タブ停止もリンク名も読み上げも変わらず、右クリックや⌘+クリック（別タブ）も本物のリンクとして効く。
   引き換えに、カードの中の文章はドラッグで選べなくなる。経緯はREADMEの「押す場所」を参照。

   文字は置かない。読み上げの名前（「◯◯のサイトを見る」）は中の .vh がまるごと持つ。
   矢印はお知らせの行（.news__arrow）とまったく同じ 11.2px・同じ色。
   丸は番号／分野チップと上下の中心をそろえて右肩に置く。--go-top はそのための値で、
   チップの上端（＝カードの padding-top、企業カードは border-top 4px ぶん下）から逆算している。
   右下ではなく右上なのは、右下だとタグと重ならないよう右を46px空ける必要があり、
   実測でタグが2段→3段に増えて（80→124px）、行を消して得た43pxがそのまま消えたため。 */
.card{--go-top:25px;--go-right:32px;--go-size:34px}
.card--service{--go-top:33px}
/* ★ a 自身は流れに残したまま、高さ0にする。position:absolute を a に掛けてはいけない。
      掛けると、カード全面を覆う ::after の基準が a（＝34pxの丸）になってしまい、
      当たり判定が丸の中だけに縮む。2026-09-20 に一度これをやって13枚とも壊した。
      丸は ::before、矢印は中の <i> が描く。どちらも基準は .card。 */
.card__go{display:block;height:0;font-size:11.2px;color:var(--ink-soft);transition:color .3s var(--ease)}
.card__go::before{                     /* 丸そのもの */
  content:"";position:absolute;top:var(--go-top);right:var(--go-right);
  width:var(--go-size);height:var(--go-size);border-radius:50%;
  border:1px solid var(--rule-soft);background:var(--paper-warm);
}
.card__go i{                           /* 丸の中の矢印。動かさない（下の注を読むこと） */
  position:absolute;top:var(--go-top);right:var(--go-right);
  width:var(--go-size);height:var(--go-size);
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;
}
/* ★ 矢印を動かさないこと。ホバーで変えるのは色だけ（薄墨→墨）。
      丸の内寸は32px、矢印は11.9pxで左右の余りは10.1pxずつ。3px動かすと 7.1px と 13.1px になり、
      止まった先が中心から外れるので「進んだ」ではなく「ずれた」に見える。
      このサイトで矢印が動くのはお知らせの行（.news__arrow、行の終点にある）だけで、
      ヒーローのCTAも問い合わせボタンも動かさない。丸は行の終点ではない。
      動きが無いわけではなく、カード自体が3px浮き、押すと沈む。 */
.card:hover .card__go{color:var(--ink)}
/* 当たり判定をカード全面に広げる。角丸を合わせているので、四隅の外（カードの外側）は押せない */
.card__go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--card-r)}
/* 押した合図。触る画面はホバーで浮かないので、これが無いと合図の出ない大きなボタンになる。
   離すときだけ .card の .4s に戻るので、押し込みは速く、戻りはゆっくりになる。 */
.card:has(.card__go:active){transform:translateY(-1px) scale(.995);transition-duration:.12s}
/* キーボードの枠は、実際に押せる範囲＝カード全面に出す。
   11.2pxの文字だけを囲むと、押せる範囲を小さく見せてしまう。 */
.card:has(.card__go:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.card__go:focus-visible{outline:none}
.card__cat{margin-top:4px;font-size:11.2px;letter-spacing:.12em;color:var(--ink-soft);word-break:break-all}
.card__desc{margin-top:14px;font-size:clamp(14px,.1vw + 13.6px,15px);line-height:2;color:var(--ink-mid);line-break:strict}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
/* タグは補正しない。字間が.08em（0.9px）と小さく、和文の字送りで元から釣り合っている。
   実測でも12個の平均ズレが 0.30px → 0.41px と悪化した。 */
.tags li{font-family:var(--f-mono);font-size:11.2px;letter-spacing:.08em;padding:5.6px 11.2px;border-radius:999px;background:var(--card);border:1px solid var(--rule-soft);color:var(--ink-mid)}

.grid{display:grid;gap:32px;margin-top:clamp(32px,2.6vw + 6px,64px)}
/* grid-auto-rows:1fr — 行ごとに高さが決まると、端数の1枚（7社目）だけ背が低くなる。
   全ての行を最も高い行に合わせて、カードの大きさを完全にそろえる。 */
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
/* 3列で1枚だけ余ったら中央の列に置く（ロゴウォールの7枚目と同じ位置関係） */
.members > li:last-child:nth-child(3n+1){grid-column:2}

/* ---------- hero（案1｜数珠つなぎ） ---------- */
.hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  /* 上は「ヘッダーの高さ + 区画の上余白」。こう書くと、ページの最初の一行が、下の区画の
     最初の一行とまったく同じだけヘッダー（区画なら境目）から離れる。
     以前は clamp(100px, 4.9vw + 87px, 158px) という無関係な数字で、390pxではヘッダーの
     下端から20pxしか空いていなかった（同じ幅で区画は72px空く）。頭が詰まって見えていた。 */
  padding:calc(var(--head-h) + var(--stage-pad)) var(--gutter) clamp(56px, 5.2vw + 55px, 130px);
  container-type:inline-size;
  --col:min(100cqi, 420px);       /* 縦に吊るすときのタイル列の幅（子要素から見た .hero の内寸） */
}
/* 見出しと本文は、下のセクション（.wrap）と同じ左端に揃える。
   幅 = (ヒーロー内寸 + 本文幅) / 2 で、左端がちょうど .wrap の左端に一致する。 */
.hero__body{order:1;width:min(100%, calc((100% + var(--measure)) / 2));margin-left:auto;min-width:0}
.hero__eyebrow{font-size:clamp(10.5px, .07vw + 10.2px, 11.2px);letter-spacing:.22em;color:var(--ink-soft)}
.hero__title{margin-top:clamp(22px, .76vw + 19px, 30px);max-width:780px;font-family:var(--f-display);font-weight:700;font-size:clamp(30px, 4.29vw + 16.8px, 64px);line-height:1.45;letter-spacing:.005em;color:var(--ink)}
.hero__title .line{display:block}
.hero__lead{margin-top:clamp(20px, .76vw + 17px, 28px);max-width:36em;color:var(--ink-mid);line-height:2.1}
.hero__cta{order:2;align-self:flex-end;margin-top:clamp(40px, 3.5vw + 26px, 77px);font-size:11.2px;letter-spacing:.16em;color:var(--ink-soft)}
.hero__cta:hover{color:var(--ink)}

/* 数珠つなぎ。ロゴ（グループの印）はヘッダーの「REBUILD GROUP」と同じ外側の左端から始まり、
   「▸」の中心から糸が一本の直線で出て、参画企業のタイルを貫き、最後の社を越えて画面の端まで抜ける。 */
.chain{
  order:3;position:relative;
  display:flex;align-items:center;height:100px;margin-top:41px;
  --lh:30px;                            /* Future ReBuild ロゴの高さ */
  --chev:calc(var(--lh) * 7.659);       /* ロゴ左端から「▸」の中心まで（ロゴ幅 7.978×高さ の 96%） */
}
.chain::before{content:"";position:absolute;left:var(--chev);right:calc(-1 * var(--gutter));top:49px;height:2px;background:var(--rebuild-gray)}
.chain__origin{position:relative;z-index:1;flex:none;display:block;height:var(--lh);width:auto}
.chain__beads{
  --gap:14px;
  flex:1;min-width:0;
  margin-left:calc(var(--chev) + 26px - var(--lh) * 7.978);   /* 「▸」から26pxの糸を見せてから1社目 */
  display:grid;grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:var(--gap);
  container-type:inline-size;
  /* ロゴの倍率はタイルの内寸から決める。最も幅を取るSY（150）がちょうど収まる大きさで、上限は.86 */
  --tin:calc((100cqi - (var(--n) - 1) * var(--gap)) / var(--n) - 28px);
  --u:min(calc(var(--tin) / 150), .86px);
}
.bead{position:relative;z-index:1;display:flex;height:92px;background:var(--card);border-radius:12px;box-shadow:var(--shadow);
      transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* タイルごと各社サイトへのリンク。当たり判定はタイル全体 */
.bead__link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12px 14px;border-radius:inherit}
.bead:hover,.bead:has(.bead__link:focus-visible){transform:translateY(-3px);box-shadow:0 4px 10px rgba(28,28,30,.05),0 18px 40px rgba(28,28,30,.09)}

/* ---------- 参画企業のロゴ ---------- */
/* 大きさ：全社とも知覚量（インク量×占有範囲）で統一。--u は「デザイン上の1px」の長さ */
/* 位置：視覚的重み（濃さ×不透明度）の90%が収まる範囲の中心 */
.lg{display:block;max-width:100%;height:auto}
.lg--sy {width:calc(150 * var(--u));transform:translateX(calc(1 * var(--u)))}
.lg--al {width:calc(131 * var(--u));transform:translateY(calc(-2 * var(--u)))}
.lg--as {width:calc(104 * var(--u));transform:translateX(calc(3 * var(--u)))}
.lg--tsw{width:calc(81 * var(--u));transform:translateX(calc(1.5 * var(--u)))}
/* TSSだけ2つの規則から外す。細い輪が大きく張り出すので、知覚量（インク×範囲）だと大きく見え、
   重み90%範囲だと濃い文字に引っぱられて輪郭が左上へ2.8pxずれる。
   位置は左右＝外接矩形の中心（動かさない）、上下だけ文字側へ寄せる。
   斜めに寄せると左右の余白が1.44倍ずれて、輪郭のズレが目につく。

   大きさは 80 → 73（外接矩形の面積を他6社の平均に合わせた）→ 65（2026-09-21）。
   73は「高さの比×重さの比」が最も1に近い釣り合いの点だったが、それでも高さは他6社の中央値の
   1.41倍あり、並べるとTSSだけ大きく見えた。65は高さを1.23倍まで下げたぶん、重さが
   0.67→0.53倍に落ちている。**縮めると高さは1乗、重さは2乗で効く**ので、これ以上縮めると痩せる。
   上下の寄せは大きさに比例させること（73uで-5u → 65uで-4.5u）。比例させないとズレる。 */
.lg--tss{width:calc(65 * var(--u));transform:translateY(calc(-5.5 * var(--u)))}
.lg--nz {width:calc(122 * var(--u));transform:translateX(calc(2.5 * var(--u)))}
/* エリトラは円形エンブレム。単体だと横長の6社の中で浮き社名も読めないので、同社ヘッダーと同じく「エリトラ」を添える */
.lg--el {display:flex;align-items:center;gap:calc(8 * var(--u));transform:translateX(calc(1 * var(--u)))}
.lg--el img{display:block;width:calc(39 * var(--u));height:auto}
.lg--el span{font-family:'Yusei Magic','Zen Maru Gothic',sans-serif;font-size:calc(18 * var(--u));line-height:1;color:#5a3a22;white-space:nowrap}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4.4vw,72px);align-items:start}
.formula{display:flex;align-items:center;flex-wrap:wrap;gap:20px clamp(18px,2.4vw,36px);font-size:clamp(26px,1.8vw + 15.8px,43.2px);line-height:1.5}
.formula__op{font-family:var(--f-mono);font-weight:400;font-size:clamp(20px,.7vw + 10px,30px);color:var(--ink-soft)}
.formula .mark{background-size:100% 6px;padding-bottom:6px}
.stats{display:grid;gap:14px;padding-top:12px}
.stats li{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule-soft);padding-bottom:10px}
.stats__n{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,.47vw + 19.2px,32px);color:var(--ink);min-width:2.6em}
.stats__l{font-size:10.5px;letter-spacing:.16em;color:var(--ink-soft)}

/* ---------- news ---------- */
.news__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.news{margin-top:clamp(24px,1.15vw + 11.5px,40px);border-top:1px solid rgba(28,28,30,.14)}
.news__row{border-bottom:1px solid var(--rule-soft)}
/* 行そのものがリンク。日付・分類・見出しの全部がリンク名になる（カードと違い、行の中身は文章だけ） */
.news__link{display:grid;grid-template-columns:120px 150px 1fr auto;gap:28px;align-items:baseline;padding:22px 0;color:var(--ink)}
.news__link:hover .news__title{opacity:.66}
.news__link:hover .news__arrow{transform:translateX(4px);color:var(--ink)}
.news__arrow{transition:transform .3s var(--ease),color .3s var(--ease)}
.news__date{font-size:12.32px;letter-spacing:.1em;color:var(--ink-soft)}
.news__cat{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--mist);padding:3px calc(10px - .16em) 3px 10px;border-radius:999px;justify-self:start}
/* 和文の折り返し。word-break:auto-phrase は文節で折るので「…をリリースしま／した」のような
   語の途中での改行がなくなる（対応しない環境では今までどおりの折り返しに戻るだけ）。
   line-break:strict は禁則で、行末の「『（ や行頭の 。、」ー を防ぐ。 */
.news__title{font-family:var(--f-display);font-weight:500;color:var(--ink);line-height:1.8;word-break:auto-phrase;line-break:strict;text-wrap:pretty}
/* 見出しが「や『で始まる行は、約物の左に半角ぶんの空きができて先頭がそろわない
   （実測で10.75px対0.7〜2.0px）。1行目だけ半角ぶん戻す。class は main.js が付ける。
   text-spacing-trim も hanging-punctuation も、現状のブラウザでは効かなかった。 */
.news__title.is-bracket{text-indent:-.5em}
.news__arrow{font-size:11.2px;letter-spacing:.16em;color:var(--ink-soft)}

/* ---------- join ---------- */
.mailpill{
  display:inline-flex;align-items:center;gap:22px;margin-top:clamp(28px,.8vw + 18px,40px);
  padding:22px calc(44px - .04em) 22px 44px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);
  font-family:var(--f-mono);font-size:clamp(15px,.5vw + 8px,20.8px);letter-spacing:.04em;color:var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.mailpill:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(28,28,30,.05),0 22px 48px rgba(28,28,30,.09)}
.mailpill__arrow{color:var(--ink-soft)}

/* ---------- footer ---------- */
.footer{position:relative;background:var(--foot-bg);padding:72px 0 35.2px}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--ribbon)}
.footer__inner{display:grid;grid-template-columns:1fr auto;gap:35.2px;align-items:start}
.footer__brand p{margin-top:16px;font-family:var(--f-display);font-weight:500;color:var(--ink-mid)}
.footer__meta{display:grid;gap:7.2px;font-size:12.32px;letter-spacing:.08em;color:var(--ink-soft);text-align:right}
/* 「X」は一文字なので、何のアカウントか分かるようにラベルを置く。
   リンク名も「X」だけでは用が分からないため、各リンクに読み上げ用の補足を入れてある。 */
.footer__label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.footer__meta a{color:var(--ink)}
.footer__meta a:hover{opacity:.66}
/* 行優先。掲載順で最長のTAMA（292px）と次に長いTSW（219px）が隣同士になるため、
   そのまま行に並べると社名〜URLの隙間の差が最も小さい（行内の差 最大57px。列優先だと174px） */
.footer__family{
  grid-column:1 / -1;display:grid;grid-auto-flow:row;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 48px;margin-top:40px;padding-top:32px;border-top:1px solid var(--rule-soft);
}
/* 参画企業の色マーク。社名の前に置く丸で、帯・企業カードと同じ企業色。
   10px は、企業カードの8pxの丸が11.2pxのラベルに添うのと同じ比率（ここの社名は15px）。
   2026-09-19 まではカプセル（.chip）の中に丸を入れていたが、英字を外した時点で器だけが残っていた。 */
.footer__family .dot,.menu__sites .dot{width:10px;height:10px}
.footer__family a{display:flex;align-items:center;gap:12px;padding:8px 0;color:var(--ink)}
.footer__family a:hover{opacity:.66}
.footer__name{font-family:var(--f-display);font-weight:500;font-size:15px;min-width:0}
.footer__family small{font-size:10.5px;letter-spacing:.1em;color:var(--ink-soft);margin-left:auto;white-space:nowrap;padding-left:12px}
.footer__copy{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:9.6px 38.4px;margin-top:40px;padding-top:22.4px;border-top:1px solid var(--rule-soft);font-size:11.2px;letter-spacing:.12em;color:var(--ink-soft)}
.footer__copy a{color:var(--ink);border-bottom:1px solid var(--wash)}

/* =========================================================================
   規約ページ（privacy.html）
   本文だけの静かなページ。紙・書体・屋根の帯はトップと共通で、ナビは置かない。
   .stage を使わないのは、上余白（98px）だと固定ヘッダー（87px）とほぼ接してしまうため。
   ========================================================================= */
.legal{padding:clamp(128px, 4vw + 108px, 168px) 0 clamp(64px, 4vw + 48px, 104px)}
.legal__back{margin-left:auto;font-family:var(--f-mono);font-size:11.2px;letter-spacing:.16em;
  white-space:nowrap;color:var(--ink-mid);padding-bottom:4px;border-bottom:1px solid transparent}
.legal__back:hover{color:var(--ink);border-bottom-color:var(--ink)}
.legal__lead{margin-top:clamp(20px, .76vw + 17px, 28px);max-width:36em;color:var(--ink-mid);
  line-height:2.1;line-break:strict}
.legal h2{margin-top:clamp(40px, 1.4vw + 32px, 56px);font-family:var(--f-display);font-weight:700;
  font-size:clamp(16px, .35vw + 14.7px, 18.5px);letter-spacing:.02em;color:var(--ink)}
.legal p{margin-top:14px;max-width:36em;color:var(--ink-mid);line-height:2.1;line-break:strict}
.legal a{color:var(--ink);border-bottom:1px solid var(--wash)}
.legal a:hover{border-bottom-color:var(--ink)}
.legal__meta{margin-top:clamp(48px, 2vw + 40px, 72px);padding-top:24px;
  border-top:1px solid var(--rule-soft);max-width:36em}
.legal__meta p{margin-top:8px;font-size:13.5px;line-height:2}
.legal__meta p:first-child{margin-top:0;color:var(--ink);font-weight:500}
.legal__date{margin-top:clamp(32px, 1.4vw + 24px, 44px);font-size:11.2px;letter-spacing:.12em;
  color:var(--ink-soft)}
/* 規約ページのフッターは署名だけ。区切り線はページ側の .legal__meta が持っている */
.footer--slim{padding:40px 0 35.2px}
.footer--slim .footer__copy{margin-top:0;padding-top:0;border-top:0}

/* ---------- reveal ----------
   ファーストビュー（ヒーロー）には付けない。読ませたいものが
   JSの実行を待って現れるのは、初回表示でもOGPサムネでも不利なので。 */
/* ★ ずらすのは transform ではなく translate（単独プロパティ）を使うこと。
      transform で書くと、このルールが .card:hover{transform:translateY(-3px)} を上書きして
      カードの浮きが消える（詳しさが同じ 0,2,0 で、こちらが後ろにあるため）。
      2026-09-20 まで、13枚ともホバーで浮いていませんでした。
      translate なら transform と別々に積まれるので、現れる動きと浮きが両立する。
      対応していない環境では、ずれずにふわっと出るだけになる（読めなくはならない）。 */
.reveal{opacity:0;translate:0 16px;transition:opacity .75s var(--ease),translate .75s var(--ease)}
.reveal.is-in{opacity:1;translate:none}

/* フッターの家族リスト：幅が足りなくなったらURLを落とす。
   これを出したままだと最長のTAMAの社名が2行に折れて行の高さが揃わない */
@media (max-width:1119px){
  .footer__family small{display:none}
}

/* =========================================================================
   1320px 以上：ヒーローの高さを画面1枚ぶんにする（SYのトップと同じ考え方）。
   中身は「上の余白 → 文章 → 余白 → 参画のご相談 → 数珠」で、
   余った高さは .hero__body の上下の auto が半分ずつ吸う。だから

     ・目線の位置   = 168px + 余りの半分  … 窓が高いほど下がる
     ・数珠の下端   = 画面の底から必ず120px … 窓の高さによらず一定

   上を184/下を72にすると全体が下がりすぎたので、上を16px削り下へ48px戻している。
   数珠の下端は 1440x900 で元の位置（画面の上端から780px）に戻る。
   1320px未満は数珠が縦組みの別レイアウトなので掛けていない。
   ========================================================================= */
@media (min-width:1320px){
  .hero{min-height:calc(100svh - var(--topbar-h));padding-top:168px;padding-bottom:120px}
  .hero__body{margin-top:auto;margin-bottom:auto}
  .hero__cta{margin-top:36px}
  .chain{margin-top:28px}
}

/* =========================================================================
   1320px 未満：7枚を1列に並べるとロゴが6割を切る（1200pxで.51）ので、数珠を縦に吊るす。
   ロゴの高さを「▸ がちょうどタイル列の中心に来る」大きさにして、糸は列の中心を一直線に通る。
   ========================================================================= */
@media (max-width:1319px){
  .chain{--lh:calc(var(--col) / 15.318);display:block;height:auto;margin-top:36px}
  .chain::before{left:calc(var(--col) / 2 - 1px);right:auto;top:var(--lh);bottom:-20px;width:2px;height:auto}
  .chain__beads{width:var(--col);margin:16px 0 0;display:flex;flex-direction:column;gap:12px;container-type:normal;--u:1px}
  .hero__cta{order:4;align-self:flex-start;width:var(--col);margin-top:30px;text-align:center}
}

/* 900〜1319px：縦の数珠を1段目に置くと右側が大きく空くので、本文の右に並べる（決定案Dのロゴウォールと同じ位置関係）。
   本文の左端は下のセクション（.wrap）に揃え、数珠の列は右の余白の手前まで。 */
@media (min-width:900px) and (max-width:1319px){
  .hero{
    display:grid;grid-template-columns:minmax(0,1fr) var(--col);grid-template-rows:auto 1fr;
    column-gap:clamp(40px, 4vw, 64px);align-items:start;
    --col:clamp(300px, 29.2vw, 400px);
  }
  .hero__body{grid-column:1;grid-row:1 / span 2;width:auto;margin-left:0;padding-left:max(0px, calc((100cqi - var(--measure)) / 2))}
  .hero__title{font-size:clamp(30px, 5vw, 64px)}
  .chain{grid-column:2;grid-row:1;margin-top:6px}
  .chain__beads{gap:10px}
  .chain__beads .bead{height:80px}
  .hero__cta{grid-column:2;grid-row:2;margin-top:28px}
}

/* =========================================================================
   タブレット以下：カードを2列に
   ========================================================================= */
@media (max-width:899px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .members > li:last-child:nth-child(3n+1){grid-column:auto}
  .members > li:last-child:nth-child(2n+1){grid-column:1 / -1;justify-self:center;width:calc((100% - 24px) / 2)}
  .about{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
  .footer__family{gap:8px 28px}
}

/* =========================================================================
   スマートフォン（390 のアートボードに合わせる）
   ========================================================================= */
@media (max-width:767px){
  .masthead__nav,.masthead .pill{display:none}
  .masthead__inner{padding:18px var(--gutter);gap:12px}
  .burger{display:flex}
  .wm{gap:10px}
  .wm__sub{font-size:10px;letter-spacing:.22em;padding-bottom:2px}
  body.is-locked{overflow:hidden}

  .hero{padding-bottom:56px}
  .hero__lead{font-size:14.5px;line-height:2.05}
  .br-wide{display:none}

  /* 1列のときはそろえる相手がいないので、カードは中身なりの高さに戻す */
  .grid--3{grid-template-columns:1fr;gap:18px;grid-auto-rows:auto}
  .members > li:last-child:nth-child(2n+1){grid-column:auto;width:auto}
  .card{--card-r:18px;padding:24px 22px;--go-top:19px;--go-right:22px}
  .card--member{padding-top:20px}
  /* 1列のときは隣に揃える相手がいないので、社名2行ぶんの確保はやめる（1枚あたり約30px節約） */
  .card--member h3{min-height:0}
  .card--service{padding-top:28px;--go-top:27px}
  .card--service h3{min-height:0}
  .stats{gap:12px}

  .news__head{grid-template-columns:1fr auto}
  .news__link{grid-template-columns:auto auto 1fr;gap:8px 12px;padding:18px 0}
  .news__date{grid-row:1}
  .news__cat{grid-row:1}
  .news__title{grid-row:2;grid-column:1 / -1;font-size:14.5px;line-height:1.75}
  /* 矢印は1行目の右端へ。行そのものがリンクなので、押せる合図をここで出す
     （以前は display:none にしていたが、ホバーの無い画面では合図が何も無くなる） */
  .news__arrow{grid-row:1;grid-column:3;justify-self:end}

  .mailpill{display:flex;width:100%;justify-content:space-between;gap:16px;padding:18px 24px;font-size:15px}

  .footer{padding:56px 0 28px}
  .footer__inner{grid-template-columns:1fr;gap:0}
  .footer__meta{text-align:left;margin-top:24px;font-size:11.5px}
  .footer__brand p{font-size:14.5px;margin-top:12px}
  .footer__family{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none;gap:4px;margin-top:28px;padding-top:24px}
  .footer__family a{gap:10px;font-size:14px}
  .footer__name{font-size:14px}
  .footer__family small{display:none}
  .footer__copy{gap:8px 20px;margin-top:28px;padding-top:18px;font-size:10.5px;letter-spacing:.1em}
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;translate:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- 印刷 ---------- */
@media print{
  .masthead,.menu,.skip{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .reveal{opacity:1;translate:none}
}