/* ============================================================
   Info Article Page  ― お知らせ詳細ページ専用
   ============================================================ */

/* ---- Article Hero ---- */
#article-hero {
  padding-top: 180px;
  padding-bottom: clamp(48px, 6vw, 80px);
  background: var(--color-white);
  border-bottom: 1px solid rgba(0, 18, 181, 0.08);
}

.article-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 100px);
}

/* ---- パンくず ---- */
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(35, 24, 21, 0.5);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.article-breadcrumb a {
  color: var(--color-blue);
  transition: opacity 0.2s;
}

.article-breadcrumb a:hover {
  opacity: 0.7;
}

/* ---- メタ情報 ---- */
.article-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.article-hero-date {
  font-family: var(--font-en);
  font-size: 13px;
  color: rgba(35, 24, 21, 0.5);
  letter-spacing: 0.06em;
}

/* カテゴリバッジ */
.info-category-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.info-category-badge--news  { background: rgba(0,18,181,.08);   color: var(--color-blue); }
.info-category-badge--media { background: rgba(230,100,0,.1);   color: #c85a00; }
.info-category-badge--env   { background: rgba(22,135,89,.1);   color: #157a52; }

/* ---- 記事タイトル ---- */
.article-hero-title {
  font-family: var(--font-ja);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  margin-bottom: 32px;
}

/* ---- シェアボタン ---- */
.article-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  transition:
    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-share-btn:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}

.article-share-btn--x    { background: var(--color-dark); color: var(--color-white); }
.article-share-btn--fb   { background: #1877f2;           color: var(--color-white); }
.article-share-btn--copy {
  background: transparent;
  color: var(--color-dark);
  border: 1.5px solid rgba(35, 24, 21, 0.25);
}

.article-share-btn--copy.is-copied {
  background: rgba(22, 135, 89, 0.08);
  border-color: #157a52;
  color: #157a52;
}

/* ---- アイキャッチ ---- */
#article-eyecatch {
  background: var(--color-white);
}

.article-eyecatch-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 100px) 1.6em;
}

.article-eyecatch-inner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  overflow: hidden; /* Safari対策 */
}

.article-eyecatch-inner--full img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}

/* ---- Article Body ---- */
#article-body {
  background: var(--color-white);
  padding-top: clamp(8px, 0.8vw, 12px);
}

.article-body-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 100px);
}

/* ---- リード文 ---- */
.article-lead {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 700;
  line-height: 1.9;
  color: var(--color-dark);
  margin-bottom: clamp(36px, 4vw, 52px);
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 2px solid var(--color-blue);
}

/* ============================================================
   WYSIWYG  ― .article-wysiwyg スコープ内の全要素
   Noto Sans JP のベースラインズレを吸収する調整を含む
   ============================================================ */
.article-wysiwyg {
  /* Noto Sans は line-height 内で上寄りにレンダリングされるため
     leading-trim が使えない環境では cap-height 相当のオフセットで補正 */
  --wysiwyg-lh: 2;
  --wysiwyg-fs: clamp(14px, 1.05vw, 16px);
}

/* ---- 段落 ---- */
.article-wysiwyg p {
  font-size: var(--wysiwyg-fs);
  line-height: var(--wysiwyg-lh);
  color: var(--color-dark);
  text-align: justify;
  margin-bottom: 1.6em;
}

.article-wysiwyg p:last-child {
  margin-bottom: 0;
}

/* ---- 見出し H2 ---- */
.article-wysiwyg h2 {
  font-family: var(--font-ja);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-dark);
  letter-spacing: 0.04em;
  margin-top: clamp(48px, 5vw, 72px);
  margin-bottom: 20px;
  padding: 14px 20px;
  border-left: 4px solid var(--color-blue);
  background: rgba(0, 18, 181, 0.03);
  border-radius: 0 4px 4px 0;
}

/* ---- 見出し H3 ---- */
.article-wysiwyg h3 {
  font-family: var(--font-ja);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-dark);
  letter-spacing: 0.03em;
  margin-top: clamp(36px, 4vw, 56px);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 18, 181, 0.15);
}

/* ---- 見出し H4 ---- */
.article-wysiwyg h4 {
  font-family: var(--font-ja);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-blue);
  letter-spacing: 0.04em;
  margin-top: clamp(28px, 3vw, 44px);
  margin-bottom: 12px;
}

/* ---- インライン要素 ---- */
.article-wysiwyg strong {
  font-weight: 700;
  color: var(--color-dark);
}

.article-wysiwyg em {
  font-style: italic;
  color: var(--color-dark);
}

.article-wysiwyg u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-wysiwyg del,
.article-wysiwyg s {
  text-decoration: line-through;
  opacity: 0.55;
}

.article-wysiwyg mark {
  background: rgba(255, 230, 0, 0.55);
  padding: 0 3px;
  border-radius: 2px;
  color: var(--color-dark);
}

.article-wysiwyg a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.article-wysiwyg a:hover {
  opacity: 0.7;
}

.article-wysiwyg code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background: rgba(0, 18, 181, 0.05);
  color: var(--color-blue);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 18, 181, 0.12);
}

/* ---- コードブロック ---- */
.article-wysiwyg pre {
  background: #1a1a2e;
  color: #e2e8f0;
  border-radius: 8px;
  padding: clamp(20px, 3vw, 32px);
  overflow-x: auto;
  margin: clamp(28px, 3vw, 44px) 0;
  line-height: 1.8;
}

.article-wysiwyg pre code {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(12px, 1vw, 14px);
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* ---- 引用 ---- */
.article-wysiwyg blockquote {
  margin: clamp(28px, 3vw, 44px) 0;
  padding: clamp(20px, 2.5vw, 32px) clamp(20px, 3vw, 40px);
  border-left: 4px solid var(--color-blue);
  background: rgba(0, 18, 181, 0.03);
  border-radius: 0 8px 8px 0;
}

.article-wysiwyg blockquote p {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.8;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.article-wysiwyg blockquote p:last-of-type {
  margin-bottom: 0;
}

.article-wysiwyg blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: rgba(35, 24, 21, 0.55);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* ---- リスト（ul / ol）
   display:grid は <strong> などのインライン子要素を
   独立したグリッドアイテムとして扱い崩れる。
   position:absolute でマーカーのみ完全に切り離す方式に統一 ---- */
.article-wysiwyg ul,
.article-wysiwyg ol {
  margin: clamp(20px, 2.5vw, 32px) 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-wysiwyg ul li,
.article-wysiwyg ol li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--wysiwyg-fs);
  line-height: var(--wysiwyg-lh);
  color: var(--color-dark);
}

/* ● bullet ― font-size を親と同じにして Noto Sans のズレを防ぐ */
.article-wysiwyg ul li::before {
  content: '';
  position: absolute;
  left: 0.4em;
  /* line-height:2 の 1行目中央 = 1em。bullet高さ 6px ≈ 0.375em の半分を引く */
  top: calc(1em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue);
}

.article-wysiwyg ol {
  counter-reset: ol-counter;
}

.article-wysiwyg ol li {
  counter-increment: ol-counter;
}

.article-wysiwyg ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: var(--color-blue);
}

/* ネストリスト */
.article-wysiwyg ul ul,
.article-wysiwyg ol ol,
.article-wysiwyg ul ol,
.article-wysiwyg ol ul {
  margin: 8px 0 0 0;
}

/* ---- 画像・figure ---- */
.article-wysiwyg figure {
  margin: clamp(32px, 4vw, 52px) 0;
}

.article-wysiwyg figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 520px;
  border-radius: 8px;
}

.article-wysiwyg figcaption {
  font-size: 12px;
  color: rgba(35, 24, 21, 0.5);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  padding: 0 8px 4px;
}

/* ---- テーブル ---- */
.article-wysiwyg table {
  width: 100%;
  border-collapse: collapse;
  margin: clamp(28px, 3vw, 44px) 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
}

.article-wysiwyg th,
.article-wysiwyg td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 18, 181, 0.1);
  vertical-align: top;
}

.article-wysiwyg th {
  font-weight: 700;
  color: var(--color-blue);
  background: rgba(0, 18, 181, 0.04);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.article-wysiwyg tbody tr:hover td {
  background: rgba(0, 18, 181, 0.015);
}

/* ---- 水平線 ---- */
.article-wysiwyg hr {
  border: none;
  border-top: 1px solid rgba(0, 18, 181, 0.1);
  margin: clamp(36px, 4vw, 56px) 0;
}

/* ---- 記事ナビゲーション ---- */
#article-nav {
  background: var(--color-white);
  border-top: 1px solid rgba(0, 18, 181, 0.08);
  padding-top: clamp(48px, 6vw, 80px) !important;
}

.article-nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 100px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

.article-nav-inner .btn-outline {
  justify-self: center;
}

.article-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-dark);
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-nav-btn:hover {
  color: var(--color-blue);
}

.article-nav-btn--prev { justify-content: flex-start; }
.article-nav-btn--next { justify-content: flex-end; }

.article-nav-arrow {
  font-size: 16px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-nav-btn--prev:hover .article-nav-arrow { transform: translateX(-4px); }
.article-nav-btn--next:hover .article-nav-arrow { transform: translateX(4px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  #article-hero {
    padding-top: 120px;
    padding-bottom: clamp(36px, 6vw, 60px);
  }

  .article-hero-inner,
  .article-eyecatch-inner,
  .article-body-inner {
    padding: 0 clamp(20px, 5vw, 48px);
  }

  .article-eyecatch-inner {
    padding-top: clamp(28px, 5vw, 44px);
    padding-bottom: 1.6em;
  }

  .article-wysiwyg table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-nav-inner {
    padding: 0 clamp(20px, 5vw, 48px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
  }

  /* 「一覧に戻る」を先頭に */
  .article-nav-btn--list {
    grid-column: 1 / 3;
    order: -1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .article-hero-title {
    font-size: clamp(20px, 5.5vw, 28px);
  }

  .article-share-btn {
    padding: 7px 14px;
    font-size: 11px;
  }

  .article-nav-inner {
    grid-template-columns: 1fr;
  }

  .article-nav-btn--next {
    justify-content: flex-start;
  }
}