/* ==========================================================================
   Base — リセットと基本タイポグラフィ
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

/* :where() で囲んで詳細度を0にする。
   素の ul[class] は詳細度(0,1,1)で、クラス1つの指定(0,1,0)より強い。
   そのままだと .l-footer__cta-list { margin-top: 40px } のような
   コンポーネント側の指定が打ち消されてしまう。 */
:where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  min-height: 100svh;
  /* Figmaの各フレームの背景は #EFEFEF。白ではない */
  background: var(--c-bg-alt);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  /* 日本語の禁則処理。行頭に句読点や閉じカッコが来ないようにする */
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  /* 全幅の区切り線などで 100vw を使うと、縦スクロールバーの幅ぶんだけ
     はみ出して横スクロールが出ることがある（Windowsなど、スクロールバーが
     場所を取る環境）。それを切り落とす。
     hidden ではなく clip にするのは、hidden だとスクロールの入れ物が
     できてしまい、ヘッダーの追従（position: sticky）が効かなくなるため。 */
  overflow-x: clip;
}

/* 画像・動画は親要素からはみ出さない。
   Figmaのデザインは object-fit: cover 前提の配置が多い */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}

a:hover {
  opacity: 0.7;
}

/* キーボード操作時だけフォーカスリングを出す（マウスクリックでは出さない） */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* 見出しはテンプレート側で個別に指定するため、既定の装飾を打ち消しておく */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

/* ページの中身の枠。
   Figmaのメモに従い最大1600pxで中央寄せ、左右にサイドマージンを取る。
   1600px未満では画面幅いっぱいに広がり、余白だけが残る。
   例）1440px時: 枠1440 − 余白80×2 = 中身1280（デザインどおり）
       1920px時: 枠1600 − 余白80×2 = 中身1440 */
.l-container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* お知らせ一覧のセクション。左右161px（幅1118を中央に置いた値） */
.l-container--narrow {
  padding-inline: var(--gutter-news);
}

/* 左右40px系のセクション */
.l-container--wide {
  padding-inline: var(--gutter-sm);
}

/* 画面幅いっぱいに広げる（背景画像やフルブリードの写真用） */
.l-fullbleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* スクリーンリーダーにだけ読ませる。「本文へスキップ」リンクなどで使う */
/* SPだけ改行する。デザインはPCとSPで改行位置が違う箇所があり、
   自然な折り返しに任せると別の位置で折れてしまう。
   <br> は display:none にすると改行しなくなるので、これで出し分ける。 */
.u-br-sp {
  display: inline;
}

@media (min-width: 768px) {
  .u-br-sp { display: none; }
}

/* 文言そのものがPCとSPで違う箇所の出し分け（お問い合わせ完了のボタンなど） */
.u-only-pc { display: none; }
.u-only-sp { display: inline; }

@media (min-width: 768px) {
  .u-only-pc { display: inline; }
  .u-only-sp { display: none; }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* フォーカスされたら表示する（スキップリンク用） */
.u-visually-hidden:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip-path: none;
  background: var(--c-text);
  color: #fff;
}

/* ==========================================================================
   Typography roles — デザイン上の役割に対応するクラス
   ========================================================================== */

/* ページ最上部の英字大見出し（PROJECTS / COMPANY など） */
.t-page-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* セクション上部の英字ラベル（NEWS / BUSINESS など） */
.t-label {
  font-size: var(--fs-section-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

/* セクション見出し（明朝） */
.t-section-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* ヒーローの明朝大見出し */
.t-hero {
  font-family: var(--ff-serif);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* 本文 */
.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}