/* ===========================================================
   CCC WEB標準 / 土台のCSS（2026-08-27）
   tokens.css のあとに読み込む。
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s4)); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;           /* 和文は1.7〜1.9。詰めると読みにくい */
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-underline-offset: .2em; }

/* キーボードで操作している人にだけ枠を出す。マウス操作では邪魔しない */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* 画面の先頭に置く「本文へ飛ぶ」リンク。ふだんは隠れている。
   キーボードだけで操作する人が、毎回メニューを読まずに済む */
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  padding: var(--s3) var(--s5); background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-s); transition: top var(--dur-1) var(--ease-out);
}
.skip:focus-visible { top: var(--s4); }

/* --- 幅と並び ------------------------------------------- */
.container { width: min(100% - var(--s5) * 2, var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section-alt { background: var(--surface-alt); }
.grid { display: grid; gap: var(--s5); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* --- 見出し --------------------------------------------- */
h1, h2, h3 { line-height: 1.35; margin: 0 0 var(--s4); font-weight: 700; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); color: var(--text-muted); margin: 0 0 var(--s6); }
.eyebrow {                      /* 見出しの上に置く小さいラベル */
  font-family: var(--font-en); font-size: var(--fs-small); letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 var(--s2);
}

/* --- ボタン --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s6); border-radius: var(--radius-full);
  background: var(--primary); color: var(--on-primary);
  text-decoration: none; font-weight: 700; border: 0; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--primary-soft); }

/* --- カード --------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: var(--s6); box-shadow: var(--shadow-s);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

/* --- 追従ヘッダー --------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.header[data-scrolled="true"] { border-bottom-color: var(--border); box-shadow: var(--shadow-s); }

/* --- スクロールで現れる ---------------------------------
   最初から見えている部分には付けない（開いた瞬間に何も無い画面になるため） */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- 動きを減らしたい人への配慮 --------------------------
   OSの設定で「視差効果を減らす」にしている人がいる。
   動きで気分が悪くなる人が実際にいるので、ここは必ず入れる */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- 印刷 -----------------------------------------------
   会社案内や採用ページは、印刷して持ち歩かれることがある。
   そのとき、追従ヘッダーや装飾が邪魔になる */
@media print {
  .header, .skip, .no-print { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; line-height: 1.6; }
  .section { padding-block: var(--s5); }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --- ヘッダーの中身 -------------------------------------- */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.header nav { display: flex; gap: var(--s5); }
.header nav a { color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.header nav a:hover { color: var(--primary); }
.nav-toggle { display: none; padding: var(--s2) var(--s4); }

/* 狭い画面ではメニューを畳む。開いているかは data-open で持つ（JS側と対応） */
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .header nav {
    position: absolute; inset: var(--header-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-m);
  }
  .header nav[data-open="false"] { display: none; }
  .header nav a { padding: var(--s4) var(--s5); border-top: 1px solid var(--border); }
}

/* 写真が決まるまでの枠。空の <img> を置くと、壊れた画像に見える */
.img-placeholder {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: var(--surface-alt); border: 1px dashed var(--border);
  border-radius: var(--radius-l); color: var(--text-muted); font-size: var(--fs-small);
}