/* 記事ページ共通スタイル。
LP（/index.html）と同じデザイントークンを使う。LP側はCSSがインラインの
ため共通化できておらず、値を揃えているだけ。
**配色を変えるときは /index.html の :root も直すこと。** */
/* LP（/index.html）と同じデザイントークン。
LP側はCSSがインラインのため、共通ファイル化はせず値を揃えている。
**配色を変えるときは両方直すこと。** */
:root{
--bg:#fffbfc; --bg-soft:#fff2f6; --bg-lav:#f4f0ff; --card:#ffffff;
--pink:#ff5d8f; --pink-deep:#ff2e73; --purple:#8b5cf6; --purple-deep:#6d3ff0;
--ink:#241a2e; --mist:#7a7086; --line:#f1e4ea;
--radius-md:20px; --radius-pill:999px;
}
*{box-sizing:border-box}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:'Zen Maru Gothic',system-ui,sans-serif;
line-height:1.95;-webkit-font-smoothing:antialiased;
}
.en{font-family:'Plus Jakarta Sans',sans-serif}
a{color:var(--pink-deep)}
.nav{
position:sticky;top:0;z-index:10;background:rgba(255,251,252,.9);
backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav-in{
max-width:820px;margin:0 auto;padding:14px 20px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
/* .nav-links をこの直下に absolute で開くための基準 */
position:relative;
}
.brand{
font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;
text-decoration:none;
background:linear-gradient(120deg,var(--pink-deep),var(--purple));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-cta{
background:linear-gradient(120deg,var(--pink),var(--pink-deep));color:#fff;
text-decoration:none;font-size:13px;font-weight:700;
padding:9px 16px;border-radius:var(--radius-pill);white-space:nowrap;
}
main{max-width:820px;margin:0 auto;padding:0 20px 80px}
.crumb{font-size:12.5px;color:var(--mist);padding:22px 0 0}
.crumb a{color:var(--mist)}
h1{
font-size:clamp(25px,4.4vw,36px);font-weight:900;line-height:1.5;
letter-spacing:-.01em;margin:18px 0 10px;
}
.lead{font-size:16px;color:var(--mist);margin:0 0 8px}
.meta{font-size:12.5px;color:var(--mist);padding-bottom:24px;border-bottom:1px solid var(--line)}
h2{
font-size:clamp(19px,2.8vw,23px);font-weight:900;line-height:1.6;
margin:48px 0 14px;padding-left:14px;border-left:4px solid var(--pink);
}
p{margin:0 0 18px;font-size:15.5px}
strong{font-weight:700}
ul{margin:0 0 18px;padding-left:1.3em}
li{margin-bottom:8px;font-size:15.5px}
.note{
background:var(--bg-lav);border-radius:var(--radius-md);
padding:20px 24px;margin:28px 0;font-size:14.5px;color:var(--mist);
}
.note strong{color:var(--ink)}
.cta{
background:var(--card);border:1px solid var(--line);
border-radius:var(--radius-md);padding:28px;margin:52px 0 0;text-align:center;
}
.cta h3{font-size:18px;font-weight:900;margin:0 0 10px}
.cta p{font-size:14.5px;color:var(--mist);margin:0 0 20px}
.cta a{
display:inline-block;background:linear-gradient(120deg,var(--pink),var(--pink-deep));
color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;
padding:13px 28px;border-radius:var(--radius-pill);
}
footer{border-top:1px solid var(--line);padding:26px 20px;text-align:center;font-size:12.5px;color:var(--mist)}
footer a{color:var(--mist);margin:0 8px}
/* 関連記事・一覧 */
.related{margin:52px 0 0}
.related h3{font-size:15px;font-weight:900;margin:0 0 14px;color:var(--mist)}
.rel-item{
display:flex;gap:16px;align-items:center;
background:var(--card);border:1px solid var(--line);
border-radius:var(--radius-md);padding:14px 18px;margin-bottom:10px;
text-decoration:none;transition:border-color .2s;
}
.rel-item:hover{border-color:var(--pink)}
.rel-thumb{
width:150px;flex-shrink:0;height:auto;aspect-ratio:1200/630;
border-radius:12px;object-fit:cover;background:var(--bg-soft);
}
.rel-body{flex:1;min-width:0}
.rel-t{display:block;font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:5px}
.rel-d{display:block;font-size:13.5px;color:var(--mist);line-height:1.8}
@media(max-width:560px){
.rel-item{flex-direction:column;align-items:stretch;gap:12px}
.rel-thumb{width:100%}
}
/* 一覧ページ */
.list-head{padding:36px 0 8px}
.list-head h1{margin:0 0 10px}
.list-lead{font-size:15.5px;color:var(--mist);margin:0 0 32px}
/* 記事ヘッダー画像。width/height 属性と合わせて CLS を出さない */
img.hero{
display:block;width:100%;height:auto;aspect-ratio:1200/630;
border-radius:var(--radius-md);margin:22px 0 4px;background:var(--bg-soft);
}
/* ナビ（記事共通）。LP と同じ挙動のハンバーガーを持たせる。
LP は index.html のインラインCSSに同等の定義がある。**両方直すこと。** */
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a:not(.nav-cta){font-size:13px;font-weight:600;color:var(--mist);text-decoration:none}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-toggle{
display:none;width:40px;height:40px;padding:0;margin-left:10px;
background:none;border:0;cursor:pointer;position:relative;flex-shrink:0;
}
.nav-toggle span{
display:block;position:absolute;left:9px;width:22px;height:2px;
background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:24px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:820px){
.nav-toggle{display:block}
.nav-links{
position:absolute;top:100%;left:0;right:0;z-index:60;
flex-direction:column;align-items:stretch;gap:0;
/* 半透明 + backdrop-filter だと下の本文が透けて読めなくなる。不透明色にすること。 */
background:var(--bg);
border-bottom:1px solid var(--line);padding:8px 20px 20px;
box-shadow:0 12px 28px rgba(36,26,46,.10);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-links.open{opacity:1;visibility:visible;transform:none}
.nav-links a:not(.nav-cta){
padding:15px 4px;font-size:15px;color:var(--ink);
border-bottom:1px solid var(--line);
}
.nav-links .nav-cta{margin-top:16px;text-align:center;padding:14px 20px;font-size:14px}
}