/* =========================================================
   Base – Reset & Foundation
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
  padding: 0;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================================================
   Long Word / URL Break – Prevent Layout Overflow
   ========================================================= */
body,
.c-entry,
.entry-content,
.l-content,
.typography {
  overflow-wrap: break-word;   /* 標準 */
  word-break: break-word;      /* Safari対策 */
  word-wrap: break-word;       /* 古いブラウザ対策 */
}

/* URLリンクの安全対策 */
.c-entry a,
.entry-content a {
  word-break: break-all;
}

/* pre / code に長文が来た場合の折り返し */
.c-entry pre,
.c-entry code {
  white-space: pre-wrap;
  word-break: break-word;
}


/* =========================================================
   Base Tokens – Root Variables (Unified)
   ========================================================= */
:root {
  /* Color Tokens */
  --color-text: #1A1A1A;
  --color-muted: #5A6B7A;
  --color-bg: #FFFFFF;
  --color-surface: #F7F9FB;
  --color-primary: #008CD6;
  --color-primary-ink: #004C73;
  --color-border: #E0E6ED;
  --color-accent: #F4A741;
  --color-green: #007b43;

  /* Font Tokens */
  --ff-sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ff-serif: "Noto Serif JP", serif;
  --fz-root: 16px;

  /* Line Height Tokens */
  --lh-tight: 1.3;
  --lh-base: 1.6;
  --lh-loose: 1.8;
  --lh-normal: 1.7;

  /* Layout Tokens */
  --page-max: 1440px;
  --radius-100: 6px;
  --radius-200: 12px;
  --spacing-base: 24px;
}

/* ---------- Body ---------- */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--ff-sans);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Links ---------- */
a {
  color: var(--color-primary-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible {
  outline: 3px solid rgba(0, 140, 214, .35);
  outline-offset: 3px;
}

/* ---------- Text selection ---------- */
::selection {
  background: rgba(0, 140, 214, .18);
  color: inherit;
}

/* ---------- Accessibility ---------- */
[hidden],
.hidden {
  display: none !important;
}

/* =========================================================
   Typography System – OME HOJINKAI
   ========================================================= */
.entry-content,
.typography {
  font: inherit;
  color: inherit;
  line-height: inherit;
}

/* 見出し階層 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-sans);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin-block: 1em 0.5em;
}

/* 各サイズ（レスポンシブ対応） */
h1 { font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem); }
h2 { font-size: clamp(1.5rem, 2.5vw + 0.8rem, 2.0rem); }
h3 { font-size: clamp(1.3rem, 2vw + 0.5rem, 1.6rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* 本文・注釈・キャプション */
p { line-height: var(--lh-loose); margin-block: 1em; }
small, .t-small { font-size: 0.85rem; color: var(--color-muted); }
strong { font-weight: 600; }

/* ページタイトル */
.typography h1 {
  font-weight: 300;
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  padding: 24px 0; 
  line-height: 1.25;
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
    color: var(--color-green);
    text-align: center;
}

.typography h1::after {
  content: "";
  position: absolute;
  inset: 0; /* 全面 */
  background: url("../images/sec-lineart01.svg") center bottom no-repeat;
  background-size: contain;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}
/* ---------- SP調整（タイトル背景拡大＋中央寄せ） ---------- */
@media (max-width: 768px) {
  .typography h1 {
  font-size: 2em;
    padding: 0 0 32px 0; /* 上下マージンを少し詰める */
    margin-bottom:0;
  }

  .typography h1::after {
    background-position: center center; /* 中央寄せ */
    background-size: 150%; /* 背景を200%に拡大 */
    opacity: 1; /* 少し濃くしても見やすい */
  }
}

/* 補助ラベルやリード */
.t-lead {
  font-size: 1.1rem;
  line-height: var(--lh-loose);
  color: var(--color-muted);
  margin-bottom: 1.5em;
}

/* パンくずを小さめ文字で統一 */
.c-breadcrumbs {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ========================================
   Typography – OME 基本ルール（画像準拠）
   フォント: Noto Sans JP（Light/Regular/Bold）
======================================== */

/* ベース */
html { font-size: 16px; }
body, .typography {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ohj-navy, #0B1220);
}


/* H2: Light 30pt ≒ 40px */
.typography h2, .t-h2 {
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 2.5rem); /* 32px〜40px相当 */
  line-height: 1.3;
  margin: 0 0 .6em;
}

/* H3: Light 20pt ≒ 26.7px */
.typography h3, .t-h3 {
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.667rem); /* 20px〜26.7px相当 */
  line-height: 1.4;
  margin: 0 0 .3em;
}

/* --- 引用：Bold 16pt ≒ 21.3px --- */
blockquote, .t-quote {
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.333rem); /* 16px〜21.3px相当 */
  line-height: 1.7;
  color: var(--ohj-muted, #5A6B7A);
  margin: 1em 0;
}

/* --- ボタン文字：Bold 16pt / 18pt --- */
/* 文字サイズのみのトークン（実ボタンの余白・色は既存 .c-btn に委譲） */
.t-btn {
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.333rem); /* 16px〜21.3px相当 */
  line-height: 1.2;
}
.t-btn-lg {
  font-weight: 700;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* 18px〜24px相当 */
  line-height: 1.2;
}

/* --- 小見出し・日付：Light 14pt ≒ 18.7px --- */
.t-meta {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.167rem); /* 15.2px〜18.7px相当 */
  line-height: 1.6;
  color: var(--ohj-muted, #5A6B7A;
}

/* --- 本文 --- */
.t-body-lg { font-size: 1.25rem; line-height: 1.9; }   /* 20px想定 */
.t-body    { font-size: 1rem;    line-height: 1.9; }   /* 16px標準 */
.t-body-sm { font-size: .9375rem;line-height: 1.85; }  /* 15px相当 */

/* --- キャプション --- */
.t-caption {
  font-size: .875rem;            /* 14px */
  line-height: 1.7;
  color: var(--ohj-muted, #5A6B7A);
}

/* --- 文字揃え --- */
.t-center {
    text-align: center;
}
.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}