/* SALOG配色（2026-06-12確定）：白背景＋ダークグレイ＋差し色ディープブルー #2D5F8A
   変数名はCL.hubと同一（--peach=差し色）。値のみ変更。 */
:root{
  --cream:#FFFFFF; --cream2:#F2F5F8; --milk:#DEE4EA; --greige:#B3BFC9; --peach:#2D5F8A;
  --peach-deep:#1F4668; --sage:#6E839A; --cocoa:#1F2429; --cocoa-soft:#5A646B;
  --line:rgba(31,36,41,.13); --white:#FFFFFF;
  --serif:'Zen Kaku Gothic New','Noto Sans JP',sans-serif; --en:'Cormorant Garamond',serif;
  --sans:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--cocoa);background:var(--cream);line-height:1.85;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}
.en{font-family:var(--en);letter-spacing:.06em}
.cat-tag{display:inline-block;font-size:10.5px;letter-spacing:.08em;color:var(--peach-deep);font-weight:500}
.date{font-family:var(--en);font-size:12.5px;letter-spacing:.1em;color:var(--cocoa-soft)}

/* utility bar */
.util{background:var(--cocoa);color:#CAD3D8;font-size:12.5px;letter-spacing:.08em;font-weight:500}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
.util a:hover{color:#fff}

/* header */
header{background:var(--cream);position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:inline-flex;flex-direction:column;line-height:1.02}
/* SALOGロゴ＝案B（細字・黒・ワイドトラッキング）。原版画像が届いたら画像ロゴに差し替え */
.logo .lw{font-family:'Montserrat',var(--sans);font-size:27px;font-weight:200;letter-spacing:.22em;color:#111}
.logo .ls{font-size:7px;letter-spacing:.4em;color:var(--cocoa-soft);margin-top:6px;padding-left:2px;font-weight:400}
.hd-right{display:flex;align-items:center;gap:20px}
form.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12px;color:var(--cocoa-soft);min-width:180px}
.line-btn{background:var(--peach);color:#fff;font-size:12px;letter-spacing:.06em;padding:10px 20px;border-radius:999px;transition:.3s;font-weight:500}
.line-btn:hover{background:var(--peach-deep)}
/* category ribbon */
.ribbon{border-bottom:1px solid var(--line);background:var(--cream2)}
.ribbon .wrap{display:flex;gap:4px;overflow-x:auto;height:50px;align-items:center}
.ribbon a{font-size:13px;font-weight:500;letter-spacing:.04em;padding:8px 18px;white-space:nowrap;border-radius:999px;transition:.25s;color:var(--cocoa)}
.ribbon a:hover,.ribbon a.on{background:var(--cocoa);color:var(--cream)}

/* thumbnail template (CSS overlay over photo) */
.th-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(31,36,41,.42));pointer-events:none}
.th-cat{position:absolute;top:11px;left:11px;background:var(--ac,var(--peach));color:#fff;font-size:10px;letter-spacing:.08em;padding:5px 12px;border-radius:999px;z-index:2}
.th-hook{position:absolute;left:14px;bottom:13px;font-family:var(--serif);color:#fff;font-size:20px;font-weight:600;letter-spacing:.04em;line-height:1.3;text-shadow:0 1px 8px rgba(31,36,41,.5);z-index:2}
.th-logo{position:absolute;right:13px;bottom:12px;font-family:'Montserrat',var(--sans);font-weight:300;color:rgba(255,255,255,.92);font-size:12px;letter-spacing:.18em;z-index:2}
/* feature 作り込み画像差し込み時：.bare でオーバーレイ文字を消す */
.feat .img.bare .th-ov,.feat .img.bare .th-cat,.feat .img.bare .th-hook,.feat .img.bare .th-logo{display:none}

/* HERO feature + picks */
.top{padding:40px 0 56px}
.top-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:44px}
.feat{display:block}
.feat .img{aspect-ratio:16/9.4;border-radius:12px;overflow:hidden;position:relative}
.feat .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.feat:hover .img img{transform:scale(1.04)}
.feat .badge{position:absolute;top:16px;left:16px;background:var(--cocoa);color:var(--cream);font-size:10.5px;letter-spacing:.1em;padding:6px 14px;border-radius:999px;z-index:3}
.feat .img .th-hook{font-size:25px;left:18px;bottom:16px}
.feat .meta{display:flex;align-items:center;gap:14px;margin:20px 0 10px}
.feat h1{font-family:var(--serif);font-size:31px;font-weight:500;line-height:1.55;letter-spacing:.02em;transition:.3s}
.feat:hover h1{color:var(--peach-deep)}
.feat .ex{font-size:13px;font-weight:300;color:var(--cocoa-soft);margin-top:14px;line-height:1.95}

.picks h2{font-family:var(--en);font-size:15px;letter-spacing:.24em;color:var(--peach-deep);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pick{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.pick .pimg{aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.pick .pimg img{width:100%;height:100%;object-fit:cover}
.pick h3{font-family:var(--serif);font-size:14px;font-weight:500;line-height:1.55;margin:6px 0 7px;transition:.3s}
.pick:hover h3{color:var(--peach-deep)}

/* MAIN + SIDEBAR */
.main-area{padding:18px 0 80px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}

.sec-h{display:flex;align-items:baseline;justify-content:space-between;border-top:2px solid var(--cocoa);padding-top:16px;margin-bottom:26px}
.sec-h .jp{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:.04em}
.sec-h .en2{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--peach-deep);text-transform:uppercase}
.sec-h .all{font-size:12px;color:var(--cocoa-soft);letter-spacing:.06em}
.sec-h .all:hover{color:var(--peach-deep)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px}
.card .img{aspect-ratio:3/2;border-radius:10px;overflow:hidden;position:relative;margin-bottom:14px}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.card:hover .img img{transform:scale(1.05)}
.card .meta{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.card h3{font-family:var(--serif);font-size:16px;font-weight:500;line-height:1.62;letter-spacing:.01em;transition:.3s}
.card:hover h3{color:var(--peach-deep)}

/* category strip inside main */
.catlinks{margin-top:64px}
.catgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.catgrid a{background:var(--cream);padding:22px 20px;transition:.25s}
.catgrid a:hover{background:var(--cream2)}
.catgrid .n{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--peach-deep)}
.catgrid .nm{font-family:var(--serif);font-size:17px;font-weight:600;margin-top:7px;letter-spacing:.02em}
.catgrid .ds{font-size:11.5px;color:var(--cocoa-soft);font-weight:300;margin-top:6px;line-height:1.7}
.catgrid.c4{grid-template-columns:repeat(4,1fr)}

/* 悩み別ナビ band（ヒーロー直下・最注目ゾーン） */
.concerns{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0 52px}
.concerns .catgrid a{background:var(--white)}
.concerns .catgrid a:hover{background:var(--white)}
.concerns .catgrid a{position:relative}
.cgo{display:inline-block;margin-top:11px;font-size:11px;letter-spacing:.04em;color:var(--peach-deep);opacity:.55;transition:.25s}
.catgrid a:hover .cgo{opacity:1}
.catgrid a:hover .nm{color:var(--peach-deep)}
.catgrid a{transition:.25s;border-radius:0}
.catgrid a:hover{transform:translateY(-2px)}

/* 悩み別に探す（concern groups） */
.cl-lead{font-size:12.5px;color:var(--cocoa-soft);font-weight:300;margin:-12px 0 4px}
.cgroup{display:flex;align-items:baseline;gap:12px;margin:28px 0 13px}
.cgroup .cglabel{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--cocoa);position:relative;padding-left:14px}
.cgroup .cglabel::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--peach)}
.cgroup .cgsub{font-size:11px;color:var(--cocoa-soft);font-weight:300}

/* pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px}
.pager a,.pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;font-family:var(--en);font-size:14px;letter-spacing:.04em;color:var(--cocoa);transition:.25s}
.pager a:hover{background:var(--cream2)}
.pager .on{background:var(--cocoa);color:var(--cream);border-color:var(--cocoa)}
.pager .nav{padding:0 16px;font-family:var(--sans);font-size:12px}

/* SIDEBAR */
aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:38px}
.swrap h2{font-family:var(--en);font-size:14px;letter-spacing:.22em;color:var(--peach-deep);text-transform:uppercase;border-bottom:2px solid var(--cocoa);padding-bottom:12px;margin-bottom:8px}
.rk{display:grid;grid-template-columns:30px 60px 1fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.rk .no{font-family:var(--en);font-size:24px;font-weight:600;color:var(--peach)}
.rk .ri{aspect-ratio:1;border-radius:7px;overflow:hidden}
.rk .ri img{width:100%;height:100%;object-fit:cover}
.rk h4{font-size:12px;font-weight:500;line-height:1.5;transition:.3s}
.rk:hover h4{color:var(--peach-deep)}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.tags a{font-size:11.5px;color:var(--cocoa);background:var(--cream2);border:1px solid var(--line);padding:6px 13px;border-radius:999px;transition:.25s}
.tags a:hover{background:var(--cocoa);color:var(--cream);border-color:var(--cocoa)}
.signup{background:var(--cocoa);border-radius:14px;padding:26px 24px;color:#DCE4E8}
.signup .en{display:block;font-size:13px;letter-spacing:.2em;color:var(--peach);margin-bottom:10px}
.signup h3{font-family:var(--serif);font-size:18px;font-weight:500;color:#fff;line-height:1.6}
.signup p{font-size:11.5px;font-weight:300;color:#A7B2B8;margin-top:10px;line-height:1.8}
.signup a{display:block;text-align:center;background:var(--peach);color:#fff;font-size:12.5px;letter-spacing:.06em;padding:13px;border-radius:999px;margin-top:18px;font-weight:500;transition:.3s}
.signup a:hover{background:var(--peach-deep)}

/* maker line */
.maker{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.maker .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.maker p{font-size:12.5px;color:var(--cocoa-soft);font-weight:300}
.maker b{font-family:var(--serif);font-size:15px;font-weight:500;color:var(--cocoa)}
.maker a{font-size:12px;letter-spacing:.06em;border:1px solid var(--cocoa);padding:10px 22px;border-radius:999px;transition:.3s}
.maker a:hover{background:var(--cocoa);color:var(--cream)}

/* footer */
footer{background:var(--cocoa);color:#CAD3D8;padding:64px 0 28px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13)}
.fg .logo .lw{color:#fff}
.fg .logo .ls{color:#8B979D}
.ft{font-size:13px;color:#C7CFD4;margin-top:14px;line-height:1.95;font-weight:400}
.fc h4{font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.16em;color:#8B979D;margin-bottom:15px;text-transform:uppercase}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:13.5px;font-weight:400}
.fc a:hover{color:#fff}
.cp{display:flex;justify-content:space-between;padding-top:22px;font-size:12px;font-weight:400;color:#7F8B92;letter-spacing:.05em;flex-wrap:wrap;gap:8px}

/* 法規制特集 */
.special{background:var(--cocoa);color:#DCE4E8;padding:58px 0}
.special .sh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:14px;margin-bottom:18px}
.special .sh .jp{font-family:var(--serif);font-size:21px;color:#fff;font-weight:500;letter-spacing:.04em}
.special .sh .en2{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--peach);text-transform:uppercase}
.special .lead{font-size:12.5px;color:#A7B2B8;font-weight:300;margin-bottom:18px;line-height:1.9}
.nlist{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.nlist a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);align-items:center}
.nlist .nn{font-family:var(--en);font-size:15px;color:var(--peach);letter-spacing:.08em}
.nlist h4{font-size:12.5px;font-weight:400;line-height:1.6;color:#CAD3D8;transition:.3s}
.nlist a:hover h4{color:#fff}
/* 3 CTA */
.actions{padding:70px 0;text-align:center}
.actions .l2{font-family:var(--en);font-size:13px;letter-spacing:.24em;color:var(--peach-deep);text-transform:uppercase}
.actions h2{font-family:var(--serif);font-size:26px;font-weight:500;margin:12px 0 8px;letter-spacing:.04em}
.actions .sub{font-size:12.5px;color:var(--cocoa-soft);font-weight:300;margin-bottom:36px}
.actcards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.actcard{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:34px 24px;transition:.3s}
.actcard:hover{border-color:var(--greige);transform:translateY(-3px)}
.actcard .ic{width:48px;height:48px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--peach-deep)}
.actcard h3{font-family:var(--serif);font-size:17px;font-weight:500;margin-bottom:9px}
.actcard p{font-size:12px;color:var(--cocoa-soft);font-weight:300;line-height:1.85}
.actcard .go{display:inline-block;margin-top:16px;font-size:12px;color:var(--peach-deep);letter-spacing:.06em}

/* breadcrumb */
.crumb{padding:18px 0 0;font-size:11.5px;color:var(--cocoa-soft);letter-spacing:.04em}
.crumb a:hover{color:var(--peach-deep)}
.crumb .sep{margin:0 8px;color:var(--greige)}

/* page header (category/article) */
.phead{padding:30px 0 6px}
.phead .en2{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--peach-deep);text-transform:uppercase}
.phead .pkicker{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--peach-deep);background:var(--cream2);border:1px solid var(--line);padding:4px 12px;border-radius:999px}
.phead h1{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:.03em;margin:10px 0 10px}
.phead p{font-size:12.5px;color:var(--cocoa-soft);font-weight:300;line-height:1.9;max-width:680px}

/* article body */
.post{padding:8px 0 10px}
.post-hero{aspect-ratio:16/8.6;border-radius:12px;overflow:hidden;position:relative;margin:18px 0 30px}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-meta{display:flex;align-items:center;gap:14px;margin:14px 0 8px}
.post h1{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1.55;letter-spacing:.02em}
.post .lead{font-size:14px;color:var(--cocoa);font-weight:400;line-height:2;margin-bottom:30px;padding-left:16px;border-left:3px solid var(--peach)}
.post h2{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.03em;margin:42px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.post h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:28px 0 10px;color:var(--cocoa)}
.post p{font-size:13.5px;line-height:2.05;margin-bottom:18px}
.post ul{margin:0 0 20px;padding-left:4px;list-style:none}
.post ul li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.95;margin-bottom:8px}
.post ul li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--peach)}
.post .note{background:var(--cream2);border:1px solid var(--line);border-radius:12px;padding:20px 22px;font-size:12px;color:var(--cocoa-soft);font-weight:300;line-height:1.9;margin:24px 0}
.post .note b{color:var(--cocoa);font-weight:500}

/* inline CTA (article body) */
.inline-cta{background:var(--cocoa);border-radius:14px;padding:28px 30px;margin:36px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.inline-cta .tx .en{display:block;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--peach);margin-bottom:6px}
.inline-cta .tx b{font-family:var(--serif);font-size:18px;font-weight:500;color:#fff;line-height:1.5}
.inline-cta .tx p{font-size:11.5px;color:#A7B2B8;font-weight:300;margin-top:6px}
.inline-cta a{background:var(--peach);color:#fff;font-size:12.5px;letter-spacing:.06em;padding:13px 26px;border-radius:999px;font-weight:500;white-space:nowrap;transition:.3s}
.inline-cta a:hover{background:var(--peach-deep)}

/* related */
.related{margin-top:46px}
.related .rgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}

@media(max-width:980px){
  .top-grid{grid-template-columns:1fr;gap:34px}
  .layout{grid-template-columns:1fr;gap:60px}
  aside{position:static}
  .fg{grid-template-columns:1fr 1fr}
  .related .rgrid{grid-template-columns:1fr 1fr}
  .catgrid.c4{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .grid,.catgrid,.nlist,.actcards,.related .rgrid,.catgrid.c4{grid-template-columns:1fr}
  .feat h1{font-size:24px}
  form.search{display:none}
  .fg{grid-template-columns:1fr}
}

/* ===== WordPress固有の追記（テーマ専用） ===== */
/* the_posts_pagination() を .pager 風に */
.navigation.pagination{display:flex;justify-content:center;margin-top:48px}
.navigation.pagination .nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.navigation.pagination .page-numbers{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;font-family:var(--en);font-size:14px;letter-spacing:.04em;color:var(--cocoa);transition:.25s;padding:0 6px}
.navigation.pagination a.page-numbers:hover{background:var(--cream2)}
.navigation.pagination .page-numbers.current{background:var(--cocoa);color:var(--cream);border-color:var(--cocoa)}
.navigation.pagination .page-numbers.dots{border:0}
/* the_content() 本文を記事タイポに（.post-body 内の見出し・段落） */
.post-body h2{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.03em;margin:42px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.post-body h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:28px 0 10px;color:var(--cocoa)}
.post-body p{font-size:13.5px;line-height:2.05;margin-bottom:18px}
.post-body ul{margin:0 0 20px;padding-left:4px;list-style:none}
.post-body ul li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.95;margin-bottom:8px}
.post-body ul li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--peach)}
.post-body img{border-radius:10px;margin:18px 0}
.post-body blockquote{background:var(--cream2);border:1px solid var(--line);border-left:3px solid var(--peach);border-radius:10px;padding:16px 20px;margin:24px 0;font-size:13px;color:var(--cocoa-soft)}

/* 当ページのよく読まれる記事 見出し（明朝） */
.swrap h2.jp-h{font-family:var(--serif);text-transform:none;letter-spacing:.04em;font-size:16px;font-weight:600;color:var(--cocoa)}

/* カテゴリ帯：WPメニューの<li>マーカー(●)を消す */
.ribbon .wrap ul{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.ribbon .wrap li{list-style:none;margin:0}
.ribbon .wrap li::marker{content:""}

.hd-left{display:flex;align-items:center;gap:16px}
.hd-catch{font-size:15px;font-weight:600;color:var(--cocoa);letter-spacing:.02em;line-height:1.45;padding-left:16px;border-left:2px solid var(--peach)}
@media(max-width:820px){.hd-catch{display:none}}

/* === SALOG追加：ダーク背景上の差し色を明るいブルーに（可読性確保） === */
.signup .en{color:#7FA8C9}
.special .sh .en2{color:#7FA8C9}
.nlist .nn{color:#7FA8C9}
.inline-cta .tx .en{color:#7FA8C9}