@charset "UTF-8";
/* ============================================================
   hapi-robo st — サイト共通スタイル
   全ページはこのファイルだけを読み込む。
   <link rel="stylesheet" href="/assets/site.css">
   色・書体・余白の新規定義は禁止。必ず :root のトークンを使う。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --ink:      #16181a;   /* 見出し・数字 */
  --ink-2:    #3c4245;   /* 本文（これより薄い色を本文に使わない） */
  --ink-3:    #4e5457;   /* ラベル・注記 */

  /* 地と罫は寒色ニュートラル。両社の実運用値に合わせる
     （hapi-robo #e5e7e8 / temi #f4f4f4）。旧ベージュは出所がないため廃止 */
  --line:     #d3d6d7;
  --line-2:   #e5e7e8;   /* hapi-robo 実測 */
  --line-3:   #9aa0a2;   /* 下線・区切り記号 */
  --paper:    #ffffff;
  --paper-2:  #f4f4f4;   /* temi 実測。地色交互の相手 */
  --paper-warm: var(--paper-2);  /* 旧名。既存頁の .sec--warm 互換 */

  /* 会社の色＝赤。正式ロゴ 5907×569 のピクセル実測で 100% 単色ベタ */
  --red:      #BF2125;
  --red-deep: #96191D;
  /* temi の色＝緑。連名ロゴのマクロン実測 #22CE99／temi 本社テーマ #22CD99 */
  --temi:     #22CD99;
  --temi-cta: #37DB9B;   /* 両社が実運用している CTA 緑 */
  --temi-ink: #1E7A57;   /* 文字に使える可読ティント */

  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 和欧混植。ラテンは Archivo（幾何学・角終端。hapi-robo のワードマークに最も近い無料書体）、
     和文は Noto Sans JP。Archivo に CJK が無いので、この順で自動的に混植になる。
     旧 Zen Kaku Gothic New は人文系で、角終端のロゴと造形が合わなかった。 */
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* ラテンはジオメトリック寄り（temi は Avenir をセルフホスト）。
     和文を先頭に置くと Avenir に到達しないため、幾何書体を先に並べ、
     和文は最後の受け皿にする（実測: 11px "TEMI BUSINESS" で 77.6px→86.7px、11.7% 違う）。 */
  --latin: "Zen Kaku Gothic New", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* ============================================================
     級数 — 梯子は一つ。比は 1.2 固定、11.2px から 9 段で 57.8px（レンジ 5.16 倍）。
     幅が変わっても段の値は動かない。動くのは「どの段に載るか」だけ。
     要素ごとに clamp() の vw 係数を書くことを禁止する
     （.94/.95/.96/.98/.99/1/1.02vw が並存し、1440px で 1.2px の幅に
       9 値が同居していた。あれが「AI が作った感じ」の物理的原因だった）。
     ============================================================ */
  --f0: 11.2px;    /* 注記・キッカー・最小のラベル */
  --f1: 13.44px;   /* ラベル・記録行・ボタン・テキストリンク */
  --f2: 16.13px;   /* 本文（頁の基準） */
  --f3: 19.35px;   /* 小見出し・署名 */
  --f4: 23.22px;   /* 節見出し 小（台帳の節） */
  --f5: 27.87px;   /* 節見出し 中 */
  --f6: 33.44px;   /* 節見出し 大（会社が言い切る節） */
  --f7: 40.13px;   /* 引用（理念） */
  --f8: 48.15px;   /* 頁題 */
  --f9: 57.79px;   /* h1 */

  /* 行送り — 4 段。全要素 2.0 に揃えるのも、15 種に散らすのも禁止 */
  --lh-x: 1.22;    /* h1 */
  --lh-h: 1.42;    /* 見出し */
  --lh-q: 1.55;    /* 引用 */
  --lh-l: 1.7;     /* ラベル・記録行・注記 */
  --lh-b: 1.9;     /* 会社層の本文（詰まる） */
  --lh-t: 2.1;     /* temi 層の本文（開く） */

  /* 字間 — 二つの声。見出しだけでなく本文でも分ける。
     実測: hapi-robo 字間/x-height 0.11〜0.25 / temi 0.73 */
  --tr-c:  -.02em;  /* 会社層の見出し */
  --tr-cb: .005em;  /* 会社層の本文 */
  --tr-t:  .16em;   /* temi 層の見出し */
  --tr-tb: .075em;  /* temi 層の本文 */
  --tr-l:  .05em;   /* ラベル・ボタン・記録行 */
  --tr-lat:.2em;    /* ラテンの小さな組（キッカー・能力マーク・三つの e） */

  /* 縦の余白 — 梯子は一つ。比 1.5。節の余白はこの三段から手で選ぶ */
  --sp1: 6px;  --sp2: 9px;  --sp3: 13.5px; --sp4: 20px;
  --sp5: 30px; --sp6: 45px; --sp7: 68px;   --sp8: 102px;

  --gut: clamp(20px, 5vw, 60px);
  --col: 1180px;
  /* 角は階層を運ぶ。会社＝角（ロゴの角終端）／temi＝丸（丸い i の点・マクロン）。
     旧 --pill:25px は高さ43〜58pxのボタンでは 999px と判別できず、
     版面では「丸」としか読めなかったため、丸は 999px に正直化した。 */
  --corner: 2px;         /* 会社の行動（赤・墨）*/
  --pill: 999px;         /* temi の行動（緑）*/
  --ease: cubic-bezier(.22,1,.36,1);

  /* sticky ヘッダの実効高。アンカー着地がヘッダに隠れないための基準 */
  --stick-h: 64px;
}

/* 版面が 1 本になる幅では、縦の余白の上 3 段だけを詰める。
   級数は詰めない（梯子を作り直すと、幅ごとに別の体系ができてしまう）。
   特大の段に載る要素だけが、一段下の段へ降りる。 */
@media (max-width: 860px){
  :root{ --sp6: 32px; --sp7: 46px; --sp8: 64px; }
}

html{ -webkit-text-size-adjust:100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--stick-h) + 16px); }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--gothic);
  font-size: var(--f2);
  line-height: var(--lh-b);
  letter-spacing: var(--tr-cb);
  font-feature-settings: "palt" 1;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
p{ text-wrap: pretty; margin: 0; }
figure{ margin: 0; }

/* 見出し共通：語中改行を避ける（対応ブラウザでは文節で折る） */
h1, h2, h3{ margin: 0; }
h1, h2, h3{
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}
/* 複合動詞など、auto-phrase でも割れる語をまとめて固定する */
.nb{ white-space: nowrap; }

:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }

/* ------------------------------------------------------------
   版面
   ------------------------------------------------------------ */
.wrap{
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gut);
}
/* sticky ヘッダの下にアンカーが潜らないための着地余白 */
[id]{ scroll-margin-top: calc(var(--stick-h) + 16px); }

/* セクションの上下余白（トップ以外の頁の基本単位） */
.sec{
  padding-top: var(--sp8);
  padding-bottom: var(--sp8);
}
.sec--warm{ background: var(--paper-warm); }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path: inset(50%); white-space: nowrap;
  /* 見えなくても h2/h3 は UA 既定（1.5em/1.17em）に落ちる。梯子の外に値を作らない */
  font-size: var(--f2);
}

.br-sm{ display:inline; }
@media (min-width: 641px){ .br-sm{ display:none; } }

.sample-badge{
  position: fixed;
  top: 12px; right: 14px;
  z-index: 100;
  font-size: var(--f0);
  font-weight: 500;
  letter-spacing: var(--tr-lat);
  text-indent: var(--tr-lat);
  color: #3c4245;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(22,24,26,.22);
  border-radius: 999px;
  padding: 4px 12px 3px;
  line-height: var(--lh-l);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* 旧案(構造リビルド版)への切替。SAMPLE バッジの隣に並べる */
.ver-switch{
  position: fixed;
  top: 12px; right: 88px;
  z-index: 100;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--f0);
  font-weight: 500;
  letter-spacing: var(--tr-lat);
  color: #3c4245;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(22,24,26,.22);
  border-radius: 999px;
  padding: 4px 12px 3px;
  line-height: var(--lh-l);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ver-switch:hover, .ver-switch:focus-visible{ color: var(--red-deep); border-color: var(--red); }
.ver-switch .arw{ font-size: var(--f0); }
@media (max-width: 980px){
  .ver-switch{ top: auto; right: auto; bottom: 12px; left: 96px; }
}
/* ハンバーガーが出る幅では左下へ退避する（ボタンに重ねない） */
@media (max-width: 980px){
  .sample-badge{ top: auto; right: auto; bottom: 12px; left: 12px; }
}

/* ------------------------------------------------------------
   セクションの起点：ロゴ由来の塗りチップ（全セクション共通）
   会社層＝赤い正方形（hapi-robo の四角い i の点／hapi·robo の区切り、実測 32×30px）
   temi層＝緑の横棒（tēmi のマクロン、実測 92×20px＝4.6:1）。角は丸い（temi の丸い i の点）
   ------------------------------------------------------------ */
.mark{
  position: relative;
  padding-top: 28px;
}
.mark::before{
  content:"";
  position:absolute; top:0; left:0;
  width: 10px; height: 10px;
  background: var(--red);
}
/* temi 層。緑の横棒 4.6:1 */
.mark--temi::before{
  width: 46px; height: 10px;
  border-radius: 999px;
  background: var(--temi);
}
/* 赤い面の上に置くときだけ、四角を白へ反転する（形は変えない） */
.mark--rev::before{ background: #fff; }

/* 会社→事業の受け渡しは、1px×17px の縦罫では 1440px 実測で視認できなかった。
   ヘッダでは「段差（インデント）＋地色 --paper-2 ＋ --line の1px罫」に置き換え、
   本クラスは廃止した。 */

/* 会社層の見出し＝重く、詰める（ロゴのステム/x-height 0.33・字間 0.11〜0.25）。
   節見出しは 1 種ではなく 3 段。会社が言い切る節 --f6 ／ 中身の節 --f5 ／ 台帳の節 --f4。
   （8 節すべて 28px という状態は、頁を主張ではなく目次にしていた） */
.h2{
  font-family: var(--gothic);
  font-weight: 700;
  font-size: var(--f5);
  line-height: var(--lh-h);
  letter-spacing: var(--tr-c);
  color: var(--ink);
}
.h2--lg{ font-size: var(--f6); }
.h2--sm{ font-size: var(--f4); }
/* temi層の見出し＝中庸で、大きく開ける（temi のステム/x-height 0.20・字間 0.73） */
.h2--temi{
  font-weight: 500;
  letter-spacing: var(--tr-t);
}
/* 英字キッカーは temi 層に限る（temi のグローバルブランドは大文字キッカーで出来ている）。
   会社層は和文のまま。 */
.kicker{
  display: block;
  font-family: var(--latin);
  font-weight: 500;
  font-size: var(--f0);
  line-height: var(--lh-l);
  letter-spacing: var(--tr-lat);
  text-transform: uppercase;
  color: var(--temi-ink);
}
/* 明朝は引用のためだけに使う（temi 自身がセリフに与えている唯一の役割） */
.quote{
  margin: 0;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: var(--f7);
  line-height: var(--lh-q);
  letter-spacing: var(--tr-cb);
  color: var(--ink);
}
.quote p{ margin: 0; }
@media (max-width: 860px){ .quote{ font-size: var(--f5); } }

.lead{
  margin-top: var(--sp4);
  max-width: 34em;
  font-size: var(--f2);
  line-height: var(--lh-b);
  color: var(--ink-2);
}
/* temi 層の導入文は、字間と行送りを開ける（声の差を本文まで届かせる） */
.lead--temi{ letter-spacing: var(--tr-tb); line-height: var(--lh-t); }

/* 宣言板＝会社が自分について言い切る一行。会社の色（赤）の面に白で置く */
.decl{
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: var(--f1);
  font-weight: 500;
  letter-spacing: var(--tr-l);
  line-height: var(--lh-l);
  padding: 9px 20px 8px;
}

/* ---- 図版につく記録行（施設名＋年月） ---- */
.rec{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: var(--f1);
  line-height: var(--lh-l);
  letter-spacing: var(--tr-l);
  color: var(--ink-2);
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}
.rec .d{
  font-family: var(--gothic);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "palt" 0, "lnum" 1, "tnum" 1;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---- 注記（本文より小さい補足・出典） ---- */
.note{
  margin-top: var(--sp3);
  max-width: 40em;
  font-size: var(--f0);
  line-height: var(--lh-l);
  color: var(--ink-3);
}

/* ---- CTA ---- 形が階層を言う。既定（墨・赤＝会社の行動）は角、temi の行動だけが丸。 */
.cta, .pill{
  display:inline-flex; align-items:center; gap: 14px;
  font-size: var(--f1); font-weight: 500; letter-spacing: var(--tr-l);
  padding: 15px 30px;
  border: 1px solid var(--ink);
  border-radius: var(--corner);
  background: var(--ink);
  color: #fff;
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.cta:hover, .cta:focus-visible,
.pill:hover, .pill:focus-visible{ background: var(--paper); color: var(--ink); }
.cta .arw, .pill .arw{ font-size: var(--f0); }

/* 会社の行動＝赤。temi の行動＝ temi の CTA 緑（両社の実運用値） */
.pill--red{ background: var(--red); border-color: var(--red); color:#fff; }
.pill--red:hover, .pill--red:focus-visible{ background: var(--paper); color: var(--red-deep); border-color: var(--red-deep); }
/* temi の行動だけが丸い。会社の赤（.pill--red）と墨（既定）は角のまま。 */
.pill--temi{ background: var(--temi-cta); border-color: var(--temi-cta); color: var(--ink); border-radius: var(--pill); }
.pill--temi:hover, .pill--temi:focus-visible{ background: var(--paper); color: var(--ink); border-color: var(--temi-ink); }
.pill--ghost{ background: transparent; border-color: var(--line); color: var(--ink); border-radius: var(--pill); }
.pill--ghost:hover, .pill--ghost:focus-visible{ background: var(--ink); color:#fff; border-color: var(--ink); }
.pill--sm{ padding: 9px 18px; font-size: var(--f0); gap: 8px; }

/* ---- テキストリンク ---- */
.tlink{
  display:inline;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-3);
  text-underline-offset: 4px;
  transition: text-underline-offset .28s var(--ease), text-decoration-color .28s var(--ease);
}
.tlink:hover, .tlink:focus-visible{
  text-decoration-color: var(--red-deep);
  text-underline-offset: 7px;
}
/* 単独で立つリンクは文中ではないので WCAG 2.5.8 の inline 例外に当たらない。
   24px の高さを確保する（下線の位置を変えないよう padding は上下対称に取る）*/
.tlink--block{
  display:inline-block; font-size: var(--f1); letter-spacing: var(--tr-l); line-height: var(--lh-l);
  padding-block: 1px; min-height: 24px;
}

/* ---- 定義リスト（会社概要・仕様・事業一覧などの行組み） ---- */
.dl-rows{
  margin-top: var(--sp5);
  border-top: 1px solid var(--line);
}
.dl-rows > div{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px var(--sp6);
  padding: var(--sp4) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 701px){ .dl-rows > div{ grid-template-columns: 12em 1fr; } }
.dl-rows dt{ font-weight: 700; font-size: var(--f2); color: var(--ink); }
.dl-rows dd{ margin: 0; font-size: var(--f2); line-height: var(--lh-b); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  padding-top: 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.head-inner{ display:flex; align-items:center; justify-content: space-between; gap: 20px; }
/* ロゴは 390px で高さ 17px。当たり判定だけ 24px に広げる（見た目の級は変えない） */
.brand{ display:inline-flex; align-items:center; flex:none; line-height:0; min-height: 24px; }
.brand-mark{ height: clamp(17px, 1.4vw + 7px, 24px); width:auto; }

.nav{ display:flex; align-items:center; gap: clamp(14px, 1.9vw, 30px); }
.nav a{
  font-size: 13px; font-weight: 500; letter-spacing: .05em;
  color: #4e5457;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav a:hover, .nav a:focus-visible{ color: var(--ink); }
/* 現在地。完全一致=page（太い実線）／祖先=true（細い灰線）。層ごとに線の色を変える */
.nav a[aria-current]{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-3);
  text-underline-offset: 6px;
}
.nav a[aria-current="page"]{
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
}
.nav--temi a[aria-current="page"]{ text-decoration-color: var(--temi-ink); }

.nav-toggle{
  display:none; width: 40px; height: 34px;
  border: 1px solid var(--line); background: transparent; padding:0; cursor:pointer;
  position: relative;
}
.nav-toggle span{
  position:absolute; left: 11px; width: 16px; height:1px; background: var(--ink);
  transition: transform .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top: 13px; }
.nav-toggle span:nth-child(2){ top: 20px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 980px){
  .site-head{ padding-top: 22px; }
  .head-inner{ flex-wrap: wrap; }
  .nav{
    display:none; flex-direction: column; align-items: flex-start; gap:0;
    width: 100%; padding-top: 14px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; padding: 14px 2px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
  .nav-toggle{ display:block; }
}

/* ============================================================
   HEADER（二層）— 上段＝会社全体、下段＝temi事業。
   PPT slide3 の階層図をそのまま画面に置く。

   親子が版面で言えていること（実測で担保する条件）:
   a) 上段は白地・全幅（ロゴ＋会社ナビが1本の帯を作る）。
      下段はロゴ幅ぶん右にインデントし、地色 --paper-2 の面に載る。
      = 下段は上段の内側にある、と段差と地色で言う。
   b) 級数と濃度を逆転させない。上段 14.4〜15px/700/--ink、下段 12.5px/500/--ink-3。
   c) 二段の境目は --line（#d3d6d7）の1px。--line-2 では白地に対して見えない。
   d) 上段に「会社」キャプションは置かない（隣の「ハピロボについて」と
      級数差 0.5px で、ナビの5項目目に読まれていた）。
   スクロール時は上段を畳み、ロゴ＋temi帯＋相談ボタンだけを残す。
   ============================================================ */
.site-head--2{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  padding-top: 26px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line-2);
}
.head2{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(22px, 3.2vw, 54px);
  align-items: center;
}
/* 上段の帯を版面の全幅で引く（ロゴ側にも罫を通し、上段を1本の帯として読ませる） */
.head2::after{
  content: "";
  grid-column: 1 / -1; grid-row: 1;
  align-self: end;
  height: 1px;
  background: var(--line);
}
.head2 > .brand{ grid-column: 1; grid-row: 1; align-self: center; }
/* 二層は .head2 のグリッドに直接載せる（ドロワの器は畳んだときだけ器になる） */
.hnav{ display: contents; }

.tier{ display: flex; align-items: center; justify-content: flex-start; gap: clamp(12px, 1.6vw, 26px); min-width: 0; }
.tier--corp{ grid-column: 2; grid-row: 1; padding-bottom: 14px; }
.tier--temi{
  grid-column: 2; grid-row: 2;
  background: var(--paper-2);
  padding: 8px clamp(14px, 1.4vw, 20px) 8px clamp(14px, 1.6vw, 22px);
}

/* 会社層のナビ：重く、詰める。ここが親であることを級数と濃度で言う */
.nav--corp{ gap: clamp(16px, 2.1vw, 34px); }
.nav--corp a{ font-size: clamp(13.5px, 1vw, 15px); letter-spacing: -.01em; font-weight: 700; color: var(--ink); }
.nav--corp a:hover, .nav--corp a:focus-visible{ color: var(--red-deep); }
/* temi層のナビ：中庸で、開ける */
.nav--temi{ gap: clamp(12px, 1.5vw, 24px); }
/* 当たり判定 24px（WCAG 2.5.8）。帯の上下 padding を 11px→8px に詰めて相殺し、
   畳んだヘッダの高さ（--stick-h の基準）を変えない */
.nav--temi a{
  letter-spacing: .12em; font-weight: 500; font-size: 12.5px; color: var(--ink-3);
  display: inline-flex; align-items: center; min-height: 24px;
}

.tier-cap{
  display: inline-flex; align-items: center; gap: 9px;
  flex: none;
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em;
  color: var(--ink);
  white-space: nowrap;
}
.tier-cap .tbar{
  display: block; width: 22px; height: 5px;
  border-radius: 999px;
  background: var(--temi);
}
/* 強調ボタンは帯の右端へ。temi の識別色（tbar）とは版面上で最大限離す */
.hcta{ margin-left: auto; flex: none; }
.hcta-sm{ display: none; }

/* スクロール時は会社層を畳む。ロゴ＝会社の identity は残るので親は消えない */
.site-head--2.is-stuck{ padding-top: 8px; }
.site-head--2.is-stuck .tier--corp{ display: none; }
.site-head--2.is-stuck .tier--temi{ grid-row: 1; }
.site-head--2.is-stuck .head2::after{ display: none; }
/* キーボードでヘッダに入ってきたら会社層を戻す（畳んだ状態で会社ナビが tab 順から消えない） */
.site-head--2.is-stuck:has(:focus-visible) .tier--corp{ display: flex; }
.site-head--2.is-stuck:has(:focus-visible) .tier--temi{ grid-row: 2; }
.site-head--2.is-stuck:has(:focus-visible) .head2::after{ display: block; }

/* ハンバーガーが出る直前の帯（981〜1120px）は temi 層が一行に収まらない。
   字間は temi の声なので保ち、間隔と余白だけを詰める */
@media (min-width: 981px) and (max-width: 1120px){
  .tier{ gap: 10px; }
  .nav--temi{ gap: 10px; }
  .nav--temi a{ font-size: 12px; }
  .tier--temi{ padding-left: 12px; padding-right: 12px; }
  .hcta{ padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 980px){
  .site-head--2{ padding-top: 12px; }
  .site-head--2.is-stuck{ padding-top: 12px; }
  .head2{ grid-template-columns: minmax(0,1fr) auto auto; column-gap: 12px; row-gap: 0; }
  .head2::after{ display: none; }
  .head2 > .brand{ grid-column: 1; grid-row: 1; }
  .hcta-sm{ grid-column: 2; grid-row: 1; display: inline-flex; }
  .head2 > .nav-toggle{ grid-column: 3; grid-row: 1; display: block; }
  /* 畳んだときだけ .hnav が器になる。開くと二層のまま縦に展開する */
  .hnav{
    grid-column: 1 / -1; grid-row: 2;
    display: none; row-gap: 0;
    max-height: calc(100dvh - var(--stick-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 18px;
  }
  .hnav.is-open{ display: block; }
  .site-head--2.is-stuck .tier--corp,
  .site-head--2.is-stuck:has(:focus-visible) .tier--corp{ display: block; }
  .site-head--2.is-stuck:has(:focus-visible) .tier--temi{ grid-row: auto; }
  .tier{ display: block; padding-top: 12px; }
  .tier--corp{ padding-bottom: 0; }
  .tier--temi{ margin-top: 10px; padding: 4px clamp(12px, 3vw, 18px) 16px; }
  .site-head--2.is-stuck .tier--temi{ grid-row: auto; }
  .tier .nav{ display: block; width: 100%; padding-top: 4px; }
  .tier .nav a{ display: block; width: 100%; padding: 13px 2px; border-bottom: 1px solid var(--line-2); }
  .nav--corp a{ font-size: 15px; }
  .nav--temi a{ font-size: 14px; }
  .tier--temi .nav a{ border-bottom-color: var(--line); }
  .tier-cap{ padding: 12px 2px 6px; font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3); }
  .hcta{ display: inline-flex; margin-top: 16px; }
}

/* ============================================================
   パンくず（トップ以外の全ページ）
   ============================================================ */
.crumbs{ border-bottom: 1px solid var(--line-2); }
.crumbs ol{
  list-style: none;
  margin: 0;
  padding: 13px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: var(--f0);
  letter-spacing: var(--tr-cb);
  line-height: var(--lh-l);
  color: var(--ink-3);
}
.crumbs li{ display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* パンくずも文中ではない。行高を変えずに当たり判定だけ 24px へ広げる */
.crumbs a{ display: inline-flex; align-items: center; min-height: 24px; }
.crumbs li + li::before{ content: "›"; color: var(--line-3); }
.crumbs a{
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .22s var(--ease), text-decoration-color .22s var(--ease);
}
.crumbs a:hover, .crumbs a:focus-visible{ color: var(--ink); text-decoration-color: var(--red-deep); }
.crumbs [aria-current="page"]{ color: var(--ink-3); }

/* ============================================================
   ページ見出し（トップ以外の全ページの冒頭）
   ============================================================ */
.page-head{
  padding-top: var(--sp7);
  padding-bottom: var(--sp6);
  border-bottom: 1px solid var(--line-2);
}
/* 頁題は会社層の声。明朝をやめ、ゴシックの重い級で言う。
   静けさは書体ではなく余白と級数レンジで作る */
.page-title{
  font-family: var(--gothic);
  font-weight: 700;
  font-size: var(--f8);
  line-height: var(--lh-h);
  letter-spacing: var(--tr-c);
  color: var(--ink);
  max-width: 18em;
}
@media (max-width: 860px){ .page-title{ font-size: var(--f6); } }
/* 360px では --f6 でも `.nb`（nowrap の複合語）が版面を割る。実測 360px 幅の
   「スカイミュージアムにて」が 360px になり 20px はみ出していた。梯子は作り替えず、
   scale.css の方針どおり段をもう一つ下げる。 */
@media (max-width: 430px){ .page-title{ font-size: var(--f5); } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{
  border-top: 1px solid var(--line);
  padding-top: var(--sp7);
  padding-bottom: var(--sp5);
}
.foot-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp7); }
@media (min-width: 861px){ .foot-grid{ grid-template-columns: 1fr 2.1fr; } }
.foot-co .brand-mark{ height: 21px; }
.foot-data{
  margin-top: var(--sp4);
  font-size: var(--f1);
  line-height: var(--lh-b);
  letter-spacing: var(--tr-cb);
  color: var(--ink-2);
  font-style: normal;
}
.foot-data dt{ float: left; clear: left; width: 6.4em; color: var(--ink-3); font-size: var(--f0); }
/* 「販売、投｜資」のような語中改行を止める（文節で折る） */
.foot-data dd{
  margin: 0 0 0 5.8em;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}
/* 総代理店の名乗りは会社の宣言。緑（temi の色）ではなく赤の面に置く */
.foot-agency{
  display: inline-block;
  margin-top: var(--sp4);
  font-size: var(--f1);
  font-weight: 500;
  letter-spacing: var(--tr-l);
  line-height: var(--lh-l);
  color: #fff;
  background: var(--red);
  padding: 8px 16px 7px;
}
.foot-nav{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(22px, 2.8vw, 42px);
}
/* 4本のリストは畳むなら2列ずつ。3列＋1列の落穂を作らない */
@media (min-width: 861px) and (max-width: 980px){
  .foot-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 981px){
  .foot-nav{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 34px);
  }
}
.foot-nav ul{ list-style:none; margin:0; padding:0; }
.foot-nav li{ margin-bottom: 9px; }
.foot-nav a{
  display: inline-block;
  font-size: var(--f1);
  letter-spacing: var(--tr-cb);
  line-height: var(--lh-l);
  padding-block: 1px;
  min-height: 24px;
  color: var(--ink-2);
  transition: color .22s var(--ease), text-decoration-color .22s var(--ease);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.foot-nav a:hover, .foot-nav a:focus-visible{ color: var(--ink); text-decoration-color: var(--red-deep); }
.foot-bottom{
  margin-top: var(--sp6);
  padding-top: var(--sp4);
  border-top: 1px solid var(--line-2);
}
.foot-bottom p{
  font-size: var(--f0);
  letter-spacing: var(--tr-cb);
  line-height: var(--lh-l);
  color: var(--ink-3);
}
.foot-bottom p + p{ margin-top: 4px; }
/* 左下へ退避した SAMPLE バッジが最下部の注記に重ならない高さを空ける */
@media (max-width: 980px){ .site-foot{ padding-bottom: 60px; } }

/* ============================================================
   PRINT — 日本の B2B は会社概要を刷って回す。
   ブラウザ既定は背景印刷オフなので、白抜き文字の面は「紙の上で消える」。
   面をやめ、罫と墨に置き換える（内容が落ちないことが唯一の条件）。
   ============================================================ */
@media print{
  html{ scroll-behavior: auto; }
  body{ background: #fff; color: #000; font-size: 10.5pt; line-height: 1.7; }
  .site-head, .site-head--2, .nav-toggle, .sample-badge, .ver-switch{ display: none; }
  .sec, .page-head{ padding-top: 12mm; padding-bottom: 12mm; }
  a{ color: #000; }
  /* 白抜きの宣言板は、赤の輪郭＋赤い文字に置き換える */
  .decl, .foot-agency{
    background: transparent;
    color: var(--red);
    border: 1pt solid var(--red);
    padding: 4pt 8pt;
  }
  .cta, .pill{
    background: transparent; color: #000; border: .6pt solid #444; padding: 4pt 10pt;
  }
  .pill--red{ color: var(--red); border-color: var(--red); }
  .mark::before{ background: var(--red); }
  .mark--rev::before{ background: var(--red); }
  img{ break-inside: avoid; }
  h1, h2, h3{ break-after: avoid; }
  .site-foot{ border-top: .6pt solid #666; padding-top: 8mm; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto !important; }
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
  }
}