/*
 * トップページ COLUMN（カード＋カテゴリタブ）／ NEWS（1件＋アイキャッチ）
 * PROD-20261015-002 項目5・項目6 / 2026-10-15
 *
 * 出典：先方支給 dist/assets/home-editorial.css を転記。
 *
 * 意図的に持ち込んでいないもの（モック専用のため）：
 *   - .editorial-sample / .sample-image … 支給モックの「表示見本」枠用。
 *     本番は実記事だけを出すので使わない。
 *   - .editorial-preview-note … 「確認用：2026年10月13日に取得した公開記事です」という
 *     モック告知の文言用。本番に告知は出さない。
 */

/* Image-led article cards; homepage only. */
#column.home-column{background:#fff;color:#151515}
#column .editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px;margin-top:35px}
.editorial-card{display:flex;flex-direction:column;min-width:0;color:#151515;text-decoration:none}
.editorial-image{aspect-ratio:16/9;background:#efefef;overflow:hidden;border-radius:2px}
.editorial-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s}
.editorial-card:hover .editorial-image img,.news-feature-card:hover .editorial-image img{transform:scale(1.025)}
.editorial-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 12px;font-size:11px;letter-spacing:.06em;line-height:1.6}
.editorial-meta>span{color:#3158db;font-weight:700}.editorial-meta time{color:#777;border-left:1px solid #d0d0d0;padding-left:14px}
#column .editorial-card h3{font-size:18px;line-height:1.7;letter-spacing:-.02em;font-weight:700;margin:0;color:#151515;overflow-wrap:anywhere}
.editorial-card:hover h3,.news-feature-card:hover h3{color:#3158db!important}
.editorial-updated{color:#777;font-size:11px;line-height:1.8;margin:12px 0 0}
.editorial-read{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #d4d4d4;padding:18px 0 12px;font-size:10px;letter-spacing:.1em;margin-top:auto;color:#444}
.editorial-read>span{font-size:19px;letter-spacing:0}
.editorial-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:45px;border-top:1px solid #d5d5d5;padding-top:25px}
.editorial-more{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;min-width:170px;padding:15px 22px;border:1px solid #aaa;border-radius:30px;font-size:12px;letter-spacing:.08em;color:#151515;font-weight:700;white-space:nowrap}
.editorial-more:hover{background:#151515;color:#fff;border-color:#151515}.editorial-more>span{font-size:18px}
.news-feature{display:grid;grid-template-columns:.7fr 2fr;gap:50px;padding:55px 8%;align-items:start;background:#f5f5f5;color:#151515}
.news-kicker{font-size:10px;letter-spacing:.14em;color:#666;display:block;margin-bottom:18px}.news-feature-heading h2{font-size:clamp(40px,4.5vw,64px);line-height:1;letter-spacing:-.06em;margin:0 0 28px}.news-feature-heading h2>span{display:block;font-size:13px;font-weight:400;letter-spacing:.05em;margin-top:15px}
.news-feature-card{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;color:#151515;min-width:0}.news-feature-copy{min-width:0}.news-feature-copy .editorial-meta{margin-top:0}.news-feature-copy h3{font-size:19px;line-height:1.75;letter-spacing:-.02em;margin:0}.news-feature-copy .editorial-read{margin-top:10px}
@media(max-width:1000px){.news-feature{grid-template-columns:.65fr 2fr;gap:28px}.news-feature-card{grid-template-columns:1fr;gap:20px}.news-feature-copy h3{font-size:20px}#column .editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px}}
@media(max-width:600px){#column .editorial-grid{grid-template-columns:1fr;gap:32px;margin-top:26px}#column .editorial-card h3{font-size:19px}.editorial-bottom{flex-direction:column;align-items:stretch;margin-top:32px;gap:20px}.editorial-more{min-width:0;justify-content:space-between}.news-feature{grid-template-columns:1fr;gap:28px;padding:42px 6%}.news-feature-heading{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}.news-kicker{grid-column:1/-1;margin-bottom:0}.news-feature-heading h2{font-size:44px;margin:0}.news-feature-heading .editorial-more{gap:22px;padding:10px 17px}.news-feature-card{gap:20px}.news-feature-copy h3{font-size:19px}.editorial-meta{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.editorial-image img{transition:none}}
.column-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 0;padding-bottom:18px;border-bottom:1px solid #ddd}.column-tabs button{font:inherit;font-size:14px;font-weight:700;padding:12px 22px;border:1px solid #d7d7d7;border-radius:99px;background:#fff;color:#555;cursor:pointer}.column-tabs button[aria-pressed="true"]{color:#fff;background:#151515;border-color:#151515}.column-tabs button:hover{border-color:#3158db}.column-tabs button:focus-visible{outline:3px solid #3158db;outline-offset:3px}.column-result{font-size:12px;color:#777;margin:18px 0}.editorial-card[hidden],.column-empty[hidden]{display:none!important}.column-empty{padding:40px 0;color:#555}@media(max-width:600px){.column-tabs{gap:8px}.column-tabs button{padding:11px 14px;font-size:12px}}
/* Preserve text in article thumbnails, including non-16:9 originals. */
.home-column .editorial-image img{object-fit:contain;background:#f5f5f5}

/*
 * ※Agentの判断で追加。支給CSSに根拠なし。
 * 理由：本番のコラム11件中10件、新着2件中2件がアイキャッチ未設定（2026-10-15 実測）。
 * 支給モックは全カードに画像がある前提で、画像が無い場合の指定が無い。
 * 支給の column-article-*.png / column-current-*.png は本番持ち込み禁止のため代用もしない。
 * 画像が無いカードで枠だけが灰色で残るのを避け、「NO IMAGE」と分かる形にしている。
 * アイキャッチが設定されればこの指定は当たらなくなる。
 */
.editorial-image.is-empty{display:flex;align-items:center;justify-content:center;background:#f0f0f0;border:1px dashed #d2d2d2}
.editorial-image.is-empty span{font-size:10px;letter-spacing:.12em;color:#999}

/*
 * ※Agentの判断で追加。支給CSSに根拠なし。PROD-20261015-003 I（2026-10-15）。
 * 理由：支給 dist/column/index.html は見出しを <h1>、戻る導線を .editorial-back で書いているが、
 * 支給CSS（source-0.css = 本番 style.css を含む）には
 *   .section-head h1 / .editorial-back
 * の指定がどこにも無く、そのまま本番に出すとブラウザ既定のh1と素のテキストリンクになる。
 * サイト内の他ページと見た目がそろわないため、既存の
 *   .section-head h2 → 見出し ／ .editorial-more → 丸ボタン
 * と同じ指定を当てている。文言・構造は支給見本のまま変えていない。
 */
.section-head h1{font-size:clamp(44px,6vw,80px);letter-spacing:-.05em;margin:0;line-height:1}
.editorial-back{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;min-width:170px;padding:15px 22px;border:1px solid #aaa;border-radius:30px;font-size:12px;letter-spacing:.08em;color:#151515;font-weight:700;white-space:nowrap}
@media(max-width:760px){.section-head h1{font-size:56px}}
@media(max-width:600px){.editorial-back{min-width:0;justify-content:space-between}}