/* ===========================
   基本設定（モバイルファースト）
   =========================== */

/* ルート変数：余白・色・幅を一括管理 */
:root {
    /* スペーシングスケール（8pxベース） */
    --space-0: 0;
    --space-1: .25rem;
    /* 4 */
    --space-2: .5rem;
    /* 8 */
    --space-3: .75rem;
    /* 12 */
    --space-4: 1rem;
    /* 16 */
    --space-5: 1.5rem;
    /* 24 */
    --space-6: 2rem;
    /* 32 */
    --space-7: 3rem;
    /* 48 */
    --space-8: 4rem;
    /* 64 */

    /* コンテナ幅 */
    --container-max: 72rem;
    /* 1152px 相当 */

    /* カラー（ライト） */
    --bg: #fafafa;
    --card: #ffffff;
    --text: #1a1a1a;
    --muted: #6b7280;
    --border: #e5e7eb;
    --primary: #0ea5e9;
    --primary-weak: #e0f2fe;

    /* 角丸・影 */
    --radius: 12px;
    --shadow: 0 10px 25px rgba(0, 0, 0, .06);

    /* 行間・文字幅 */
    --lh: 1.8;
    --jp-font: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "游ゴシック体", YuGothic, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* 余白のリセットとベーススタイル */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* ユーザーのズームを尊重しつつ、流体タイポ */
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    background: var(--bg);
    font-family: var(--jp-font);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* 流体タイポ：最小14px〜理想16〜最大18px */
    font-size: clamp(0.875rem, 0.75rem + 1vw, 1.125rem);
}

/* アクセシビリティ：フォーカス可視化 */
:where(a, button, [tabindex]:not([tabindex="-1"])):focus {
    outline: 3px solid color-mix(in oklab, var(--primary) 70%, white);
    outline-offset: 3px;
    border-radius: 6px;
}

/* コンテナの共通幅 */
#contents {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block: var(--space-7);
}

/* clearfix（HTMLに .clearfix があるため） */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ===========================
   レイアウト層
   =========================== */

.contents_inline {
    display: grid;
    gap: var(--space-6);
}

/* 単一カラムカード */
.contents_m {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: clip;
}

/* インナー */
.contents_m>.main {
    padding: clamp(var(--space-5), 2vw + var(--space-4), var(--space-7));
}

/* 見出し */
.contents_m h2 {
    margin: 0;
    padding: clamp(var(--space-5), 2vw + var(--space-4), var(--space-6)) clamp(var(--space-5), 2vw + var(--space-4), var(--space-7)) var(--space-2);
    font-weight: 700;
    /* 日本語向けのやや大きめ見出し（流体） */
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
    line-height: 1.4;
    letter-spacing: .02em;
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--primary-weak) 60%, transparent) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}

/* 本文ブロック */
.news_text {
    display: grid;
    gap: var(--space-6);
}

/* 段落 */
.news_text p {
    margin: 0;
    text-wrap: pretty;
    text-align: start;
}

/* 改行 <br> が多い文でも余白が詰まりすぎないよう調整 */
.news_text p br {
    content: "";
    display: block;
    margin-block: .35em;
}

/* リンクリスト */
.news_text ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.news_text li a {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .6em .9em;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--card) 90%, var(--primary-weak));
    color: var(--text);
    text-decoration: none;
    border-radius: 999px;
    transition: background .2s ease, border-color .2s ease, transform .05s ease;
    will-change: transform;
}

.news_text li a::before {
    content: "↩";
    font-size: 1.1em;
    line-height: 1;
    color: var(--primary);
}

.news_text li a:hover {
    background: color-mix(in oklab, var(--primary-weak) 85%, var(--card));
    border-color: color-mix(in oklab, var(--border), var(--primary) 20%);
}

.news_text li a:active {
    transform: translateY(1px);
}

/* ===========================
   タイポグラフィ強化
   =========================== */

.main {
    --p-size: clamp(1rem, .95rem + .4vw, 1.125rem);
}

.main p {
    font-size: var(--p-size);
}

/* 長文の読みやすさ改善：最大行長を制御 */
.news_text {
    /* 68文字前後の目安（日本語は相対的に短め） */
    max-width: 68ch;
}

/* ===========================
   ブレークポイント
   =========================== */

/* S（~599px）：モバイル…デフォルトでOK */

/* M（600px~）：ゆるく横余白と行間を広げる */
@media (min-width: 600px) {
    #contents {
        padding-inline: var(--space-6);
    }

    .news_text {
        gap: var(--space-7);
    }

    .contents_m>.main {
        padding: clamp(var(--space-6), 1.5vw + var(--space-6), var(--space-8));
    }
}

/* L（900px~）：見出しを強調、本文を2カラム的に余白配置可能に */
@media (min-width: 900px) {
    .contents_m h2 {
        font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
        padding-bottom: var(--space-4);
    }

    /* 見出し→本文 で左右に視線を流しやすく */
    .contents_m>.main {
        display: grid;
        gap: var(--space-7);
        align-items: start;
    }

    .contents_m h2 {
        grid-column: 1 / -1;
    }

    /* もし左側にサイドノート等を出したい場合に備えた余白列 */
    .main::before {
        content: "";
        display: none;
    }
}

/* XL（1200px~）：本文行長をさらに最適化、コンテナの密度調整 */
@media (min-width: 1200px) {
    #contents {
        padding-block: var(--space-8);
    }

    .news_text {
        max-width: 72ch;
    }
}

/* ===========================
   細かなユーティリティ
   =========================== */

/* 画像が入る場合に備えて */
.main img,
.news_text img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* 引用や強調 */
.news_text em {
    font-style: normal;
    background: linear-gradient(transparent 60%, color-mix(in oklab, var(--primary-weak), white 25%) 0);
}

.news_text strong {
    font-weight: 700;
}

/* コードや等幅（出ることは少ないが念のため） */
code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .95em;
}

/* 印刷用の軽量化（任意） */
@media print {
    body {
        background: #fff;
    }

    .contents_m {
        box-shadow: none;
        border-color: #ddd;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}