:root {
  --kasumi:#EEF2F6; --washi:#FFFFFF; --koai:#3D709C; --koai-deep:#2D5677;
  --mizu:#A7BDD2; --mizu-soft:#D2DDE9; --wakaba:#79988E; --shu:#C6876E; --shu-deep:#B5755C;
  --sora:#E7F2F9; --sumi:#333A49; --sumi-soft:#6F7A87; --line:#D8E0E9;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.crumb{font-size:12.5px; color:var(--sumi-soft); padding:20px 0 8px;}
.crumb a:hover{color:var(--koai-deep);} .crumb span{margin:0 8px; color:var(--sumi-soft);}

/* page - news detail */
.article{max-width:760px; padding:6px 0 10px; margin: 0 auto;}
.art-head{display:flex; align-items:center; gap:14px; margin:8px 0 14px;}
.art-cat{font-size:11px; color:var(--koai-deep); border:1px solid var(--line); border-radius:999px; padding:3px 12px; background:var(--sora);}
.art-date{font-family:"Cormorant Garamond",serif; font-size:17px; color:var(--sumi-soft); letter-spacing:.04em;}
.art-title{font-family:"Noto Serif JP",serif; font-weight:800; font-size:clamp(23px,3vw,31px); line-height:1.5; letter-spacing:.02em; margin-top:0;}
.art-visual{aspect-ratio:16/9; border-radius:16px; margin:26px 0 30px; overflow:hidden;}
.art-body{font-size:15px; line-height:1.8; color:var(--sumi);}
.art-body p{margin:0 0 22px;}
.art-body h2{font-family:"Noto Serif JP",serif; font-weight:700; font-size:19px; margin:34px 0 14px; padding-left:13px; border-left:3px solid var(--koai); line-height:1.4;}
.art-body figure{margin:26px 0;} .art-body figure img{max-width:100%; height:auto; border-radius:12px;}
.art-body figcaption{font-size:12px; color:var(--sumi-soft); margin-top:8px; text-align:center;}
.art-body blockquote{margin:26px 0; padding:16px 22px; background:var(--kasumi); border:1px solid var(--line); border-radius:12px; color:var(--sumi); font-size:14px; line-height:1.6;}

.share{display:flex; align-items:center; gap:12px; margin:36px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.share .lbl{font-size:12px; color:var(--sumi-soft); letter-spacing:.06em;}
.share a{width:36px; height:36px; border-radius:999px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--koai-deep); transition:.16s; text-decoration:none;}
.share a:hover{border-color:var(--koai); background:var(--sora); transform:translateY(-1px);} .share svg{width:15px; height:15px;}

.pn{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:6px 0 40px; font-size:13px; border-bottom:1px solid var(--line); padding-bottom:30px;}
.pn a{color:var(--koai-deep); text-decoration:none; transition:.2s;} .pn a:hover{color:var(--shu-deep);} .pn .mid{color:var(--sumi-soft);}