/* FILE: assets/css/base.css */

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

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd {
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  background-color: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p {
  font-size: var(--fs-base);
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ★height: auto を必ず付けること。
   これが無いとHTMLの height 属性が優先され、幅だけ縮んで画像が歪む
   （第26弾で /news/ の記事画像がこれに該当した）。
   個別に高さを指定したい箇所は、クラス側で上書きすれば効く */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* hidden属性を確実に効かせる。
   .card などに display:flex が当たっていると hidden が無視されるため、
   絞り込みで非表示にしたカードが消えなくなる。 */
[hidden] {
  display: none !important;
}

/* キーボード操作時のフォーカス可視化（WCAG 2.4.7） */
:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/* 視覚的には隠すがスクリーンリーダーには読ませる */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 英語見出し（プログラムロゴ以外の英字テキスト）はやや字間を広めに */
.lang-en {
  letter-spacing: 0.02em;
}

/* --- 共通レイアウトユーティリティ --- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* セクションの上下余白。
   96px（--space-2xl）だとファーストビューに次の要素が入らないため、
   第19弾で 64px（--space-xl）に詰めた。狭い画面ではさらに詰める。 */
.section {
  padding-block: var(--space-xl);
}

/* ページ最初のセクションは、見出しがすぐ目に入るよう上を大きく詰める。
   第25弾：ファーストビューで次の要素が見えづらいというご指摘を受け、
   24px → 16px にさらに詰めた。0にはしない */
main > .section:first-child,
.breadcrumb + .section {
  padding-top: var(--space-sm);
}

/* 最初のセクションだけ、見出しと本文の間も詰める（40px → 24px）。
   2つ目以降のセクションは従来どおりの余白を保つ */
main > .section:first-child > .section-heading,
.breadcrumb + .section > .section-heading {
  margin-bottom: var(--space-md);
}

/* 白い面のセクションは、中身が箱の端に貼り付かないよう左右に余白を持たせる。
   ★padding を 0 にしないこと（第19弾のご指摘）。狭い画面でも最低16px残す。 */
.section--surface {
  padding-inline: var(--space-xl);
}

/* 白い面が連続する場合、箱と箱の間が潰れないようにする */
.section--surface + .section--surface {
  margin-top: var(--space-md);
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-lg);
  }
  .section--surface {
    padding-inline: var(--space-md);   /* 第25弾で16px→24px。0にはしない */
  }
}

.section-heading {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-align: left;
  padding-bottom: var(--space-sm);
  border-bottom: var(--line-width) solid var(--color-ink);
  margin-bottom: var(--space-lg);
}

/* CASE STUDIES のような、左右を細罫で挟む中央見出し（HANDOVER_v3.md §5-4） */
.rule-heading {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.rule-heading::before,
.rule-heading::after {
  content: "";
  flex: 1;
  height: var(--line-width);
  background-color: var(--color-line);
}
.rule-heading__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* 黒背景×白文字の帯ラベル（HANDOVER_v3.md §5-4） */
.bar-label {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-bar);
  color: #FFFFFF;
  font-weight: var(--fw-bold);
  padding: var(--space-xs) var(--space-md);
  width: fit-content;
  overflow-wrap: break-word;
}

/* 見出し要素に .bar-label を付けた場合、既定の見出しサイズを打ち消す */
h1.bar-label,
h2.bar-label,
h3.bar-label {
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* カテゴリラベル等、固定幅にしない長文言い回し用（HANDOVER_v3.md §6-1） */
.tag {
  display: inline-flex;
  width: fit-content;
  padding: 0.25em 0.75em;
  border: var(--line-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  overflow-wrap: break-word;
}

/* --- 本文の可読性：1行が長くなりすぎないようにする --- */
.measure {
  max-width: 42em;
}

/* セクションの地色を白にする（ライトグレー地との交互配置用） */
.section--surface {
  background-color: var(--color-surface);
}

/* 中央寄せセクション */
.section--center {
  text-align: center;
}
.section--center .measure {
  margin-inline: auto;
}

/* 注釈・補足テキスト */
.note {
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
}
.note--small {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

/* 縦方向の間隔ユーティリティ（px直打ちの代わりに使う。HANDOVER_v3.md §6-1） */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* 連続する要素に一定の間隔を与える */
.stack > * + * {
  margin-top: var(--space-sm);
}
.stack--lg > * + * {
  margin-top: var(--space-lg);
}

/* 注意書きのボックス（ページ冒頭の但し書きなど） */
.notice {
  border-left: 4px solid var(--color-ink);
  background-color: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* CTAボタンを横に並べる行 */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}


/* =========================================================
   サムネイルの共通枠（サイト全体で高さを揃えるための基準）

   支給素材の縦横比はまちまちなので、そのままだと画像の高さが
   揃わず、下に続く見出しの位置がカードごとにずれて
   「ガタガタ」に見える。

   そこで **すべてのサムネイルを 16:10 の枠** に統一し、
   object-fit: contain で中に収める。contain を使うのは、
   図版や文字入りの画像が多く、cover だと端が切れてしまうため。
   余った部分は白で埋まり、輪郭が分かるようごく細い線で囲う。

   ★新しいページを作るときは、サムネイルに .thumb-frame を付けるか、
     そのページ固有のクラスをこのセレクタ一覧に追加すること。
     ここが「高さを揃えるルール」の唯一の置き場所。

   ※ height: auto を指定しないと、HTMLのheight属性が優先されて
     aspect-ratio が効かない。
   ========================================================= */
/* --- (1) 画像の入り方：枠いっぱいに、切らずに収める --- */
/*   ※ height: auto を書かないと、HTMLのheight属性が優先されて
       aspect-ratio が効かない（実装中に一度これで崩しました） */
.thumb-frame,
.home-solution__media,
.home-mailmagazine__media,
.home-works__media,
.home-domain__thumbs img,
.home-domain__thumbs .wf-media,
.about-media-grid img,
.about-media-grid .wf-media,
.service-column__images img,
.works-card__media,
.lead-with-media__media,
.module-card__media,
.exec-card__media,
.edu-block__media,
.news-article__media,
.about-clients__media {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- (2) 高さを揃えるための比率：並べて使うサムネイルのみ --- */
/*   クライアントロゴ帯は横長の1枚もので揃える対象ではないため含めない */
.thumb-frame,
.home-solution__media,
.home-mailmagazine__media,
.home-works__media,
.home-domain__thumbs img,
.home-domain__thumbs .wf-media,
.about-media-grid img,
.about-media-grid .wf-media,
.service-column__images img,
.works-card__media {
  aspect-ratio: 16 / 10;
}

/* --- (3) 枠の見た目：地色と輪郭線 --- */
/*   実績一覧のサムネイルは、マウスオーバーで画像だけを拡大させる都合上、
       外側のラッパー（.works-card__frame）に線を引く。
       画像そのものに線を引くと、拡大したときに線まで一緒に伸びてしまう */
.thumb-frame,
.home-solution__media,
.home-mailmagazine__media,
.home-works__media,
.home-domain__thumbs img,
.home-domain__thumbs .wf-media,
.about-media-grid img,
.about-media-grid .wf-media,
.service-column__images img,
.works-card__frame,
.lead-with-media__media,
.module-card__media,
.exec-card__media,
.edu-block__media,
.about-clients__media {
  background-color: var(--color-frame);
  border: 1px solid var(--color-frame-line);
}


/* 縦長の写真など、16:10 では不自然になるものだけ個別に上書きする */
.thumb-frame--portrait {
  aspect-ratio: 3 / 4;
}

/* --- モーション設定を尊重する --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 見出しの階層に応じたレスポンシブ縮小（375px対策） --- */
@media (max-width: 767px) {
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); }
  h3 { font-size: var(--fs-md); }
  .section { padding-block: var(--space-xl); }
}

/* =========================================================
   規約系ページの本文（プライバシーポリシー等）
   長い文章を読ませるページなので、行長を抑えて見出しの間隔を広めに取る
   ========================================================= */
.legal-body {
  max-width: 46em;
  margin-top: var(--space-lg);
}

.legal-body h2 {
  font-size: var(--fs-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: var(--line-width) solid var(--color-line);
}

.legal-body p + p {
  margin-top: var(--space-sm);
}

.legal-list {
  list-style: disc;
  padding-left: 1.4em;
  margin-top: var(--space-xs);
}

.legal-list li {
  margin-top: 0.2em;
}

.legal-contact {
  margin-top: var(--space-sm);
}

.legal-contact dt {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
  margin-top: var(--space-xs);
}

.legal-contact a {
  text-decoration: underline;
}

.legal-date {
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
}

/* 実績詳細のキービジュアル。
   支給サムネイルは元の解像度がそれほど高くないものがあり、
   本文幅いっぱい（1168px）まで引き伸ばすと粗く見える。
   表示幅を半分程度に抑えて、画素の粗さが目立たないようにする。
   比率は .thumb-frame の 16:10 のままなので崩れない。 */
.works-detail__hero {
  /* 580px の 130%。比率は .thumb-frame の 16:10 のままなので崩れない */
  max-width: 754px;
  margin-inline: auto;   /* 本文幅の中央に置く */
}

.works-detail__hero .thumb-frame {
  border-radius: var(--radius-md);
}

/* 動画事例では、このキービジュアルがそのまま再生ボタン付きの
   YouTube埋め込みになる（クリックして初めて動画を読み込む facade 方式） */
.works-detail__hero .video-facade {
  width: 100%;
}

.works-detail__hero .video-facade__frame {
  aspect-ratio: 16 / 9;
}

.works-detail__hero .video-facade__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 本文中のリンク。下線と色で「押せる」ことをはっきり示す */
.text-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--color-cta);
  font-weight: var(--fw-medium);
}

.text-link:hover {
  color: var(--color-cta-hover);
  text-decoration-thickness: 2px;
}

/* 規約ページの「【項目】値」形式の行 */
.legal-kv {
  margin-top: 0.2em;
}

.legal-end {
  margin-top: var(--space-lg);
  text-align: right;
}

/* =========================================================
   メールマガジン：リード文の右にサムネイルを縦積みで置く
   ========================================================= */
/* 画像2点を上に横並び、本文はその下（第23弾） */
.news-lead {
  margin-top: var(--space-md);
}

.news-lead__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.news-lead__body {
  margin-top: var(--space-lg);
}

.news-lead__body p + p {
  margin-top: var(--space-md);
}

@media (max-width: 767px) {
  .news-lead__media {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* =========================================================
   リード文の右に画像を置くレイアウト（クロスボーダー領域ほか）
   狭い画面では画像を上に出す
   ========================================================= */
.lead-with-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-md);
}

.lead-with-media__body p + p {
  margin-top: var(--space-sm);
}

.lead-with-media__media {
  aspect-ratio: 4 / 3;
}

@media (max-width: 1023px) {
  .lead-with-media {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .lead-with-media__media {
    order: -1;
    max-width: 460px;
  }
}