/* 新規ガイド記事で再利用する基本レイアウト。装飾・導線はcommon.css/jsを使用。 */
:root { --cream:#FFF8F0; --coral:#FF6F52; --coral-soft:#FFE3DA; --teal:#087486; --teal-soft:#E1F6F8; --ink:#2D2A26; --sub:#676253; --line:#EFE4D3; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.85 'Noto Sans JP',sans-serif; }
.wrap { max-width:760px; margin:auto; padding:0 20px 48px; }
a { color:var(--teal); text-underline-offset:3px; overflow-wrap:anywhere; }
.logo { display:flex; align-items:center; text-decoration:none; }
.hero { padding:32px 0 20px; text-align:center; }
.hero-badge { color:var(--teal); background:var(--teal-soft); padding:4px 12px; border-radius:999px; }
h1,h2 { font-family:'Shippori Mincho',serif; }
h1 { font-size:clamp(24px,5vw,32px); line-height:1.6; margin:18px 0; }
h2 { font-size:24px; line-height:1.6; }
h3 { font:700 21px/1.6 'Zen Maru Gothic',sans-serif; }
.sub,.article-meta { color:var(--sub); }
.article-meta { font-size:14px; }
.conclusion-box { padding:22px; border-radius:18px; background:#22283A; color:white; margin:20px 0; }
.cb-label { color:#7DE1CB; font-weight:700; }
.conclusion-box a { color:#7DE1CB; }
.divider { margin:38px 0 20px; text-align:center; }
.tool-card,.usecase-card,.shiro-column { border-radius:16px; padding:22px; margin:24px 0; }
.tool-card h3 { margin:0 0 12px; }
.tool-cta { display:inline-flex; align-items:center; min-height:48px; padding:10px 18px; border-radius:12px; background:#A93925; color:white; font-weight:700; text-decoration:none; }
.table-wrap { overflow-x:auto; border-radius:14px; margin:18px 0; }
table { width:100%; min-width:660px; border-collapse:collapse; }
caption { padding:12px; text-align:left; font-weight:700; }
th,td { padding:12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { background:var(--teal-soft); }
.talk { display:flex; gap:12px; align-items:flex-start; margin:20px 0; }
.talk.right { flex-direction:row-reverse; }
.avatar { width:48px; height:48px; object-fit:cover; border-radius:50%; flex:0 0 48px; }
.bubble-wrap { max-width:calc(100% - 60px); }
.speaker-name { font-size:14px; font-weight:700; margin-bottom:4px; }
.talk.right .speaker-name { text-align:right; }
.bubble { background:white; padding:14px 16px; border-radius:16px; border-top-left-radius:4px; }
.talk.right .bubble { background:var(--coral-soft); border-top-left-radius:16px; border-top-right-radius:4px; }
.shiro-head { display:flex; align-items:center; gap:10px; font-weight:700; color:#A12E24; }
.shiro-head img { width:40px; height:40px; object-fit:contain; }
.sign { text-align:right; font-size:14px; }
li { margin:8px 0; }
blockquote { margin:16px 0; padding:16px; border-left:4px solid var(--teal); background:var(--teal-soft); }
footer { padding:26px 20px; text-align:center; font-size:14px; color:var(--sub); }
footer a { display:inline-block; margin:6px; }
@media(max-width:480px) { .wrap { padding-inline:16px; } .tool-card,.usecase-card,.shiro-column { padding:18px; } h2 { font-size:22px; } }