/* =====================================================================
   GAIKO LAB お知らせ（gaiko-news プラグイン）
   - お知らせの一覧・詳細でだけ読み込む。セレクタはすべて .gnews で始める。
   - 構造：#primary.gnews-page > main#main > div.gnews > (パンくず・見出し) + div.gnews-layout（本文＋右サイド）
     #primary・#main は style.css の body.dp-force-fullwidth の規則（幅・余白を !important で 0）が効くので、
     幅と余白は内側の .gnews にだけ付ける。
   - 幅は外構の教科書のトップ（.dp-container：最大 1280px・左右 40px／1024px 以下 20px）にそろえ、
     2カラムは教科書の記事（本文＋272px・間隔 56px・960px 以下で1カラム）にそろえる。
   - 子テーマの旧ネイビー／ゴールドの変数は使わない。影・グラデーション・飾り記号・animation は使わない。
   ===================================================================== */

/* ---------- 0. 変数・外枠 ---------- */
/* textbook-design.css と同じ値。全社共通の変数ができたら var() 参照へ置き換える */
.gnews-page {
    --gnews-ink: #1d1d1f;
    --gnews-copy: #505761;
    --gnews-note: #626a74;
    --gnews-action: #0071e3;
    --gnews-action-strong: #0058b0;
    --gnews-fog: #f5f7fa;
    --gnews-panel: #edf1f5;
    --gnews-line: #d8dde5;
    --gnews-line-strong: #c9d3dd;
    --gnews-structure: #14344d;
    --gnews-body: #2b2f33; /* 教科書の記事本文の文字色 */
    --gnews-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    background: #fff;
    color: var(--gnews-ink);
    font-family: var(--gnews-font);
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

.gnews-page .gnews {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px 96px;
    box-sizing: border-box;
}

/* Astra の見出しの色・書体に負けないよう、スコープの中で明示する */
.gnews-page :is(h1, h2, h3) {
    color: var(--gnews-ink);
    font-family: inherit;
    font-weight: 700;
}
.gnews-page :is(h1, h2, h3, p, li, a) { line-break: strict; }

/* リンクの色は本文と戻るリンクにだけ効かせる（ボタン・一覧の項目・サイドの一覧には当てない） */
.gnews-page :is(.gnews-content, .gnews-back-wrap) a {
    color: var(--gnews-action-strong);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.gnews-page :is(a, button):focus-visible {
    outline: 3px solid var(--gnews-action);
    outline-offset: 3px;
}

/* ---------- 1. パンくず（教科書の記事と同じ見た目） ---------- */
.gnews-page .gnews-breadcrumb {
    padding: 18px 0 0;
    color: var(--gnews-note);
    font-size: 13px;
    line-height: 1.6;
}
.gnews-page .gnews-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gnews-page .gnews-breadcrumb li {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}
.gnews-page .gnews-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--gnews-line-strong);
}
.gnews-page .gnews-breadcrumb a {
    color: var(--gnews-action-strong);
    text-decoration: underline;
    text-decoration-color: rgba(0, 88, 176, .35);
    text-underline-offset: 3px;
}

/* ---------- 2. 一覧の見出し（教科書トップの導入と同じ左寄せ） ---------- */
.gnews-page .gnews-header {
    padding: 28px 0 40px;
    border-bottom: 1px solid var(--gnews-line);
}
.gnews-page .gnews-eyebrow {
    margin: 0 0 8px;
    color: var(--gnews-action-strong);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}
.gnews-page .gnews-heading {
    margin: 0;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.35;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}
.gnews-page .gnews-lead {
    max-width: 38em;
    margin: 12px 0 0;
    color: var(--gnews-copy);
    font-size: 17px;
    line-height: 1.8;
}

/* ---------- 3. 2カラム（本文＋右サイド） ---------- */
.gnews-page .gnews-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 56px;
    align-items: start;
    padding: 44px 0 0;
}
.gnews-page .gnews-main { min-width: 0; }
.gnews-page .gnews-side { align-self: stretch; }
.gnews-page .gnews-side-inner {
    position: sticky;
    top: 110px; /* 教科書の記事のサイドと同じ（ヘッダーの高さ分） */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- 4. 一覧の項目 ---------- */
.gnews-page .gnews-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gnews-line);
}
.gnews-page .gnews-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--gnews-line);
}
.gnews-page .gnews-list a.gnews-item-link {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    gap: 8px 24px;
    min-height: 44px;
    padding: 24px 0;
    color: var(--gnews-ink);
    text-decoration: none;
}
.gnews-page .gnews-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}
.gnews-page .gnews-list .gnews-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.gnews-page .gnews-date {
    color: var(--gnews-note);
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.gnews-page .gnews-item-title {
    margin: 0;
    color: var(--gnews-ink);
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.gnews-page .gnews-list a.gnews-item-link:is(:hover, :focus-visible) .gnews-item-title {
    color: var(--gnews-action-strong);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.gnews-page .gnews-excerpt {
    margin: 6px 0 0;
    color: var(--gnews-copy);
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.gnews-page .gnews-empty {
    margin: 0;
    padding: 24px 0;
    color: var(--gnews-copy);
    font-size: 16px;
    line-height: 1.8;
}

/* ---------- 5. 種別ラベル（3種とも同じ見た目。種別は文字で区別する） ---------- */
.gnews-page .gnews-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--gnews-panel);
    color: var(--gnews-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- 6. ページ送り ---------- */
.gnews-page .gnews-pagination { margin: 40px 0 0; }
.gnews-page .gnews-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.gnews-page .gnews-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--gnews-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--gnews-ink);
    font-size: 15px;
    text-decoration: none;
}
.gnews-page .gnews-pagination a.page-numbers:hover { border-color: var(--gnews-action); color: var(--gnews-action-strong); }
.gnews-page .gnews-pagination .page-numbers.current {
    border-color: var(--gnews-action);
    background: var(--gnews-action);
    color: #fff;
}
.gnews-page .gnews-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- 7. 詳細 ---------- */
.gnews-page .gnews-article-header {
    margin: 0 0 36px;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--gnews-line);
}
.gnews-page .gnews-title {
    margin: 14px 0 0;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.45;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

/* 本文（教科書の記事本文に合わせる） */
.gnews-page .gnews-content {
    color: var(--gnews-body);
    font-size: 17px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}
.gnews-page .gnews-content p { margin: 0 0 1.6em; }
.gnews-page .gnews-content h2 {
    margin: 64px 0 24px;
    padding: 18px 0 0;
    border-top: 2px solid var(--gnews-structure);
    font-size: clamp(23px, 2.2vw, 28px);
    line-height: 1.45;
    letter-spacing: -.03em;
}
.gnews-page .gnews-content h3 {
    margin: 40px 0 16px;
    font-size: 21px;
    line-height: 1.5;
    letter-spacing: -.02em;
}
.gnews-page .gnews-content :is(ul, ol) {
    margin: 0 0 1.6em;
    padding: 18px 20px 18px 40px;
    border-radius: 6px;
    background: var(--gnews-fog);
}
.gnews-page .gnews-content li + li { margin-top: .4em; }
.gnews-page .gnews-content :is(img, video) {
    max-width: 100%;
    height: auto;
}
/* 埋め込みの高さは HTML の属性と埋め込みブロックの指定に任せる */
.gnews-page .gnews-content iframe { max-width: 100%; }
.gnews-page .gnews-content :is(table, pre) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.gnews-page .gnews-content pre { white-space: pre; }
.gnews-page .gnews-content figure { margin: 0 0 1.6em; }

/* お知らせには目次を出さない（Rich Table of Contents が本文へ差し込む目次。ブログ記事で style.css が隠しているのと同じクラス） */
.gnews-page .gnews-content :is(#rtoc-mokuji-wrapper, .rtoc-mokuji-content, .rtoc_mokuji, [class*="rtoc"]) { display: none; }

/* ---------- 8. 一覧へ戻る ---------- */
.gnews-page .gnews-back-wrap {
    margin: 48px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--gnews-line);
}
.gnews-page .gnews-back-wrap a.gnews-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
}

/* ---------- 9. 右サイド（教科書のサイドと同じ作り） ---------- */
.gnews-page .gnews-side-block {
    padding: 24px;
    border: 1px solid var(--gnews-line);
    border-radius: 6px;
    background: #fff;
}
.gnews-page .gnews-side-title {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--gnews-structure);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
}
.gnews-page .gnews-side-text {
    margin: 0;
    color: var(--gnews-copy);
    font-size: 15px;
    line-height: 1.7;
}
.gnews-page .gnews-textbook a.gnews-side-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    color: var(--gnews-action-strong);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 試算カード（教科書のサイドの CTA と同じ：fog の地＋青いボタン） */
.gnews-page .gnews-side-block.gnews-cta { background: var(--gnews-fog); }
.gnews-page .gnews-side-label {
    margin: 0 0 12px;
    color: var(--gnews-action-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .06em;
}
/* 通常・hover・focus・訪問済みのすべてで白文字・下線なし（Astra と style.css の a:hover に負けない詳細度） */
.gnews-page .gnews-cta a.gnews-cta-button,
.gnews-page .gnews-cta a.gnews-cta-button:is(:visited, :hover, :focus, :focus-visible, :active) {
    color: #fff;
    text-decoration: none;
}
.gnews-page .gnews-cta a.gnews-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--gnews-action);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    transition: background .2s;
}
.gnews-page .gnews-cta a.gnews-cta-button:hover { background: var(--gnews-action-strong); }
.gnews-page .gnews-cta-note {
    margin: 10px 0 0;
    color: var(--gnews-note);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* 最近のお知らせ */
.gnews-page .gnews-recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.gnews-page .gnews-recent-list li {
    margin: 0;
    padding: 0;
}
.gnews-page .gnews-recent-list li + li { border-top: 1px solid var(--gnews-line); }
.gnews-page .gnews-recent a.gnews-recent-link {
    display: block;
    min-height: 44px;
    padding: 12px 0;
    color: var(--gnews-ink);
    text-decoration: none;
}
.gnews-page .gnews-recent .gnews-date {
    display: block;
    font-size: 14px;
}
.gnews-page .gnews-recent-title {
    display: block;
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.gnews-page .gnews-recent a.gnews-recent-link:is(:hover, :focus-visible) .gnews-recent-title {
    color: var(--gnews-action-strong);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- 10. 幅ごとの調整 ---------- */
@media (max-width: 1024px) {
    .gnews-page .gnews { padding: 0 20px 72px; }
}
/* サイド（試算カード＋最近のお知らせ 約760px）が画面に収まらない高さでは追従させない（下が隠れたままになるため） */
@media (max-height: 899px) {
    .gnews-page .gnews-side-inner { position: static; }
}
@media (max-width: 960px) {
    .gnews-page .gnews-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    .gnews-page .gnews-side-inner { position: static; }
}
@media (max-width: 600px) {
    .gnews-page .gnews-header { padding: 20px 0 28px; }
    .gnews-page .gnews-lead { font-size: 16px; line-height: 1.75; }
    .gnews-page .gnews-layout { padding-top: 28px; }
    .gnews-page .gnews-list a.gnews-item-link {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 0;
    }
    .gnews-page .gnews-list .gnews-meta {
        flex-direction: row;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gnews-page *,
    .gnews-page *::before,
    .gnews-page *::after,
    .gnews-page .gnews-cta a.gnews-cta-button { transition: none; }
}