/* コラムのデザイン。記事ごとに <body class="c1"> ／ "c2" ／ "c3" で選びます
   c1＝標準（上に写真・目次つき） c2＝写真を大きく（タイトルを重ねる） c3＝文字だけ
   デザインを増やすときは、このファイルに .c4 などを書き足します */
body{font-family:var(--serif)}
.art{max-width:760px;margin:0 auto;padding:0 18px}
.ahead{padding:26px 0 0}
.ahead .meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ahead h1{font-size:30px;line-height:1.55;color:var(--deep);font-weight:700;letter-spacing:.02em}
.ahead .lead{margin-top:14px;font-size:15px;color:#46526b}
.eye{margin:24px 0 0}
.eye img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.toc{margin:32px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px 22px;font-family:var(--sans)}
.toc .tt{font-weight:700;font-size:14px;color:var(--deep);letter-spacing:.1em;margin-bottom:6px}
.toc ol{padding-left:1.4em;font-size:14.5px;line-height:1.9}
.toc a{color:#2b3a58;text-decoration:none}
.toc a:hover{color:var(--blue3);text-decoration:underline}
.body{margin-top:12px;font-size:16.5px;line-height:2.05}
.body p{margin:1.1em 0}
.body h2{font-size:23px;margin:2.4em 0 .8em;padding:.2em 0 .2em .8em;border-left:5px solid var(--blue3);scroll-margin-top:80px}
.body h3{font-size:18.5px;margin:1.8em 0 .6em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
@media(max-width:560px){.ahead h1{font-size:24px}.body{font-size:16px}.body h2{font-size:20px}}

/* c2：写真を大きく（タイトルを写真に重ねる） */
.c2 .ahead{padding:0;max-width:none}
.c2 .hero2{position:relative;min-height:420px;display:flex;align-items:flex-end;color:#fff;background:#0b2455 var(--img) center/cover no-repeat}
.c2 .hero2::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,50,.05) 20%,rgba(7,20,50,.82) 100%)}
.c2 .hero2 .in{position:relative;max-width:760px;margin:0 auto;padding:40px 18px 34px;width:100%}
.c2 .hero2 h1{color:#fff;font-size:34px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.c2 .hero2 time{color:#dfe7f5}
.c2 .hero2 .lead{color:#e8eef9}
.c2 .crumb{max-width:760px;margin:0 auto;padding-left:18px;padding-right:18px}
@media(max-width:560px){.c2 .hero2{min-height:340px}.c2 .hero2 h1{font-size:25px}}

/* c3：文字だけ（写真なし・読みやすさ重視） */
.c3 .art{max-width:700px}
.c3 .ahead{padding-top:40px;text-align:center;border-bottom:1px solid var(--line);padding-bottom:28px}
.c3 .ahead .meta{justify-content:center}
.c3 .ahead h1{font-size:32px}
.c3 .body{font-size:17px}
.c3 .body h2{border-left:0;padding:0;text-align:center;font-size:22px}
.c3 .body h2::after{content:"";display:block;width:40px;height:2px;background:var(--blue3);margin:12px auto 0}
@media(max-width:560px){.c3 .ahead h1{font-size:25px}}

/* コラム一覧 */
.lhead{padding:30px 0 6px}
.lhead .en{font-family:var(--sans);font-size:12px;color:var(--blue3);font-weight:700;letter-spacing:.2em}
.lhead h1{font-size:30px;color:var(--deep);line-height:1.5}
.lhead p{color:#4a5670;font-size:14.5px;margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 8px 22px rgba(20,60,130,.06);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,60,130,.12)}
.card .th{aspect-ratio:16/9;background:linear-gradient(135deg,#eaf2fd,#d7e5fa);overflow:hidden}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .th.none{display:grid;place-items:center;color:var(--blue3);font-weight:700;letter-spacing:.2em;font-size:13px}
.card .cb{padding:16px 18px 20px}
.card .meta{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.card h2{font-size:17px;line-height:1.6;color:var(--deep)}
.card p{font-family:var(--sans);font-size:13px;color:#56627a;margin-top:6px;line-height:1.75}
.empty{margin-top:26px;padding:40px 20px;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:16px;font-family:var(--sans);color:var(--mute)}
@media(max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.lhead h1{font-size:25px}}