/* ============================================================
   AIブログ — 一覧＋記事詳細（ハッシュルーティング）
   デザインはAI Training Services LP B案のライトセクションに準拠
   欧文 Cormorant Garamond ／ 和文 Zen Kaku Gothic New
   ============================================================ */
:root{
  --l-rule:#E3E7EC; --l-ink:#15191F; --l-ink-2:#4B5560; --l-ink-3:#6B7681;
  --l-blue:#12558C; --l-blue-2:#2E7FB8; --l-blue-pale:#C3D8EA; --l-tint:#F2F6FA;
  --s1:8px; --s2:16px; --s3:24px; --s4:48px; --s5:80px;
  --pad:clamp(24px,6.2vw,104px);
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",Georgia,serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ease-in:cubic-bezier(.2,.8,.2,1);
}
html{color-scheme:light}
body{margin:0; background:#FFFFFF; color:var(--l-ink); font-family:var(--sans);
  font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;}
a{color:inherit}
:focus-visible{outline:2px solid var(--l-blue); outline-offset:3px; border-radius:2px}
img{display:block; max-width:100%}
.inner{position:relative; max-width:1240px; margin:0 auto; padding:0 var(--pad);}

/* ---------- ヘッダー ---------- */
.bar{border-bottom:1px solid var(--l-rule); background:#FFFFFF;}
.bar .inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:inline-flex; align-items:baseline; gap:10px; text-decoration:none;}
.brand b{font-weight:700; font-size:15px; letter-spacing:.18em;}
.brand span{font-family:var(--serif); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--l-ink-3);}
.bar-link{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:13.5px;
  color:var(--l-blue); border-bottom:1px solid var(--l-blue-pale); padding-bottom:2px;
  transition:border-color 200ms var(--ease-in), gap 320ms ease-out;}
.bar-link .arw{font-family:var(--serif);}
.bar-link:hover{border-bottom-color:var(--l-blue); gap:13px;}

/* ---------- 共通見出し ---------- */
.eyebrow-l{margin:0; font-family:var(--serif); font-weight:400; font-size:14px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--l-blue); display:flex; align-items:center; gap:14px;}
.eyebrow-l::after{content:""; height:1px; flex:1; max-width:180px; background:var(--l-blue-pale);}
.pg-lede{margin:var(--s3) 0 0; max-width:34em; font-size:15.5px; line-height:1.95; color:var(--l-ink-2);}
.pg-lede strong{color:var(--l-ink); font-weight:700; box-shadow:inset 0 -8px 0 rgba(46,127,184,.16);}
.textlink-l{display:inline-flex; align-items:center; gap:9px; color:var(--l-blue); text-decoration:none;
  border-bottom:1px solid var(--l-blue-pale); padding-bottom:2px;
  transition:border-color 200ms var(--ease-in), gap 320ms ease-out;}
.textlink-l .arw{font-family:var(--serif);}
.textlink-l:hover{border-bottom-color:var(--l-blue); gap:13px;}

/* ---------- 一覧 ---------- */
.list-head{padding:clamp(56px,7vw,104px) 0 0;}
.list-head h1{margin:var(--s1) 0 0; font-weight:700; font-size:clamp(26px,3.6vw,44px); line-height:1.42;}
.grid{margin:var(--s4) 0 0; padding:var(--s4) 0 0; border-top:1px solid var(--l-rule);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px);}
.card{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--l-rule); border-radius:2px; overflow:hidden; background:#FFFFFF;
  transition:border-color 240ms var(--ease-in), box-shadow 320ms ease-out;}
.card:hover{border-color:var(--l-blue-pale); box-shadow:0 10px 28px rgba(18,85,140,.10);}
.card figure{margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--l-tint);}
.card figure img{width:100%; height:100%; object-fit:cover; transition:transform 640ms var(--ease-in);}
.card:hover figure img{transform:scale(1.03);}
.card .body{display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; gap:12px;}
.meta{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.04em; color:var(--l-ink-2);}
.meta time{font-weight:700; color:var(--l-ink);}
.meta .src{color:var(--l-blue); font-weight:700;}
.meta .cat{font-weight:500; font-size:11px; letter-spacing:.06em; color:var(--l-blue);
  background:var(--l-tint); border:1px solid var(--l-blue-pale); border-radius:2px; padding:2px 8px 3px;}
.card h2{margin:0; font-weight:700; font-size:15.5px; line-height:1.72; letter-spacing:.005em;}
.note{margin:var(--s4) 0 0; font-size:13px; line-height:1.9; color:var(--l-ink-3);}
.list-foot{padding:0 0 clamp(64px,8vw,120px);}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} }

/* ---------- 記事詳細 ---------- */

.post{max-width:760px; margin:0 auto;}
.post .back{margin:0 0 var(--s4);}
.post .meta{margin:var(--s3) 0 0;}
.post h1{margin:var(--s2) 0 0; font-weight:700; font-size:clamp(22px,3vw,34px); line-height:1.6; letter-spacing:.005em; text-wrap:balance;}
.post .hero{margin:var(--s4) 0 0; border:1px solid var(--l-rule); border-radius:2px; overflow:hidden;}
.post .hero img{width:100%; height:auto;}
.post-body{margin-top:var(--s4);}
.post-body h2{margin:var(--s5) 0 0; padding-top:var(--s3); border-top:1px solid var(--l-rule);
  font-weight:700; font-size:clamp(17px,1.9vw,21px); line-height:1.7;}
.post-body h2:first-child{margin-top:0; padding-top:0; border-top:none;}
.post-body p{margin:var(--s2) 0 0; font-size:15px; line-height:2.05; color:var(--l-ink-2);}
.post-body ul{margin:var(--s2) 0 0; padding-left:1.35em; font-size:15px; line-height:2.05; color:var(--l-ink-2);}
.post-body li{margin-top:8px;}
.post-body strong{color:var(--l-ink);}
.src-box{margin-top:var(--s4); padding:18px 22px 20px; background:var(--l-tint);
  border:1px solid var(--l-rule); border-radius:2px; font-size:13.5px; color:var(--l-ink-2);}
.src-box i{font-style:normal; font-family:var(--serif); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--l-blue); display:block; margin-bottom:6px;}
.cta{margin-top:var(--s5); padding:clamp(28px,3.4vw,40px); background:#0E4877; color:#FFFFFF; border-radius:2px;}
.post-body .cta p{margin:0; font-size:15px; line-height:1.95; color:#FFFFFF;}
.post-body .cta .textlink-l{margin-top:var(--s2); color:#FFFFFF; border-bottom-color:rgba(255,255,255,.45);}
.post-body .cta .textlink-l:hover{border-bottom-color:#FFFFFF;}

/* ---------- フッター ---------- */
.ft{border-top:1px solid var(--l-rule); padding:28px 0 40px;}
.ft .inner{display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; align-items:baseline;}
.ft p{margin:0; font-size:12.5px; color:var(--l-ink-3);}
[hidden]{display:none!important}

/* ---------- 静的化にあたっての追加 ---------- */
/* 注記の文字色：--l-ink-3（#78838E）は白地で3.86:1しかなく規定を下回るため、この用途だけ濃くする */
.note{color:#6B7681;}

.bar .brand img{display:block; height:22px; width:auto;}
.brand span{padding-left:10px; border-left:1px solid var(--l-rule); line-height:1;}
.crumb{margin:var(--s4) 0 0; font-size:12.5px; color:var(--l-ink-3);}
.crumb a{color:var(--l-ink-2); text-decoration:none; border-bottom:1px solid var(--l-rule);}
.crumb a:hover{border-bottom-color:var(--l-blue);}
.crumb span{padding:0 8px; color:var(--l-blue-pale);}

.related{border-top:1px solid var(--l-rule); margin-top:var(--s5); padding-top:var(--s4);}
.related h2{margin:0 0 var(--s3); font-size:15px; font-weight:700; letter-spacing:.01em;}
.related ul{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--l-rule);
  border-top:1px solid var(--l-rule); border-bottom:1px solid var(--l-rule);}
.related li{background:#FFFFFF;}
.related a{display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center;
  padding:16px 0; text-decoration:none;}
.related img{width:96px; height:64px; object-fit:cover;}
.related .rt{font-size:14px; line-height:1.7; font-weight:500;}
.related .rm{display:block; font-family:var(--serif); font-size:11.5px; letter-spacing:.12em;
  color:var(--l-ink-3); margin-bottom:4px;}
.related a:hover .rt{color:var(--l-blue);}
@media (max-width:640px){
  .related a{grid-template-columns:72px 1fr; gap:14px;}
  .related img{width:72px; height:48px;}   /* 3:2 を保つ（元画像と同比率） */
}

.ft .inner{display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;}
.ft nav{display:flex; flex-wrap:wrap; gap:8px 20px;}
.ft nav a{text-decoration:none; border-bottom:1px solid transparent;}
.ft nav a:hover{border-bottom-color:currentColor;}