/* Mirai Shishin — コラム／サイト共通スタイル
   ライフプランシミュレーター(simulator.html)は自前のスタイルを持つため、このCSSは
   トップ(コラム一覧)・各コラムページ・管理ページで共有します。 */
:root{
  --teal:#0CA795; --teal-d:#0A8C7E; --ink:#1F2937; --slate:#5A6672; --slate-2:#93A0AE;
  --line:#E3EAF2; --bg:#F7FAFC; --card:#FFFFFF;
  --wrap:1080px;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans JP",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.75;
  -webkit-font-smoothing:antialiased}
a{color:var(--teal-d)}
img{max-width:100%; height:auto}

/* ---- サイトナビ ---- */
.site-nav{display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:var(--wrap);
  margin:0 auto; padding:12px 18px}
.site-nav-brand{display:inline-flex; align-items:center; gap:8px; font-weight:800; text-decoration:none; font-size:19px; letter-spacing:.3px; white-space:nowrap}
.site-nav-brand .nav-mark{height:26px; width:auto; flex:0 0 auto; display:block}
.site-nav-brand .bw1{color:#1F2937}
.site-nav-brand .bw2{color:#1F9C80}
.site-nav-links{display:flex; gap:16px; margin-left:auto; flex-wrap:wrap; align-items:center}
.site-nav-links a{color:var(--slate); text-decoration:none; font-weight:700; font-size:14px; padding:4px 2px}
.site-nav-links a[aria-current=page]{color:var(--ink); border-bottom:2px solid var(--teal)}
.site-nav-links a:hover{color:var(--teal)}
.nav-cta{background:var(--teal); color:#fff!important; border-radius:8px; padding:7px 13px!important; border-bottom:none!important}
.nav-cta:hover{background:var(--teal-d)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}

/* ---- ヒーロー ---- */
.hero{background:linear-gradient(180deg,#F1FBF8,#FFFFFF); border-bottom:1px solid var(--line)}
.hero-in{max-width:var(--wrap); margin:0 auto; padding:34px 18px 30px}
.hero h1{font-size:clamp(24px,4.4vw,34px); margin:0 0 8px; letter-spacing:.2px}
.hero-logo{display:inline-flex; align-items:center; gap:12px; margin-bottom:14px}
.hero-mark{height:clamp(46px,7vw,64px); width:auto; flex:0 0 auto}
.hero-word{font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:.3px; line-height:1}
.hero-word .bw1{color:#1F2937} .hero-word .bw2{color:#1F9C80}
.hero .sub{color:var(--teal-d); font-weight:800; margin:0 0 12px; font-size:14px; letter-spacing:1px}
.hero p{color:var(--slate); margin:0; max-width:720px}
.hero-cta{display:inline-flex; align-items:center; gap:8px; margin-top:18px; background:var(--teal); color:#fff;
  text-decoration:none; font-weight:800; padding:12px 20px; border-radius:12px; box-shadow:0 4px 14px rgba(12,167,149,.25)}
.hero-cta:hover{background:var(--teal-d)}

/* ---- 検索 ---- */
.search-bar{max-width:var(--wrap); margin:26px auto 6px; padding:0 18px}
.search-box{position:relative}
.search-box input{width:100%; padding:14px 16px 14px 46px; border:1.5px solid var(--line); border-radius:12px;
  font-size:16px; font-family:var(--font); background:var(--card); color:var(--ink)}
.search-box input:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal)}
.search-box .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--slate-2); font-size:18px}
.search-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.tag-btn{border:1px solid var(--line); background:var(--card); color:var(--slate); border-radius:999px;
  padding:6px 13px; font-size:13px; font-weight:700; cursor:pointer}
.tag-btn.on{background:var(--teal); color:#fff; border-color:var(--teal)}

/* ---- コラム一覧 ---- */
.col-list{max-width:var(--wrap); margin:18px auto 40px; padding:0 18px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.col-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s}
.col-card:hover{box-shadow:0 8px 22px rgba(31,42,50,.10); transform:translateY(-2px)}
.col-card .cc-body{padding:16px 17px 18px}
.col-card .cc-date{font-size:12px; color:var(--slate-2); font-weight:700}
.col-card h2{font-size:18px; margin:5px 0 8px; line-height:1.5}
.col-card .cc-ex{font-size:13.5px; color:var(--slate); margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden}
.col-card .cc-tags{display:flex; gap:6px; flex-wrap:wrap}
.col-card .cc-tags span{font-size:11.5px; color:var(--teal-d); background:#EAF7F2; border-radius:999px; padding:3px 9px; font-weight:700}
.empty{grid-column:1/-1; text-align:center; color:var(--slate-2); padding:50px 10px; font-weight:700}

/* ---- コラム本文ページ ---- */
.article{max-width:760px; margin:0 auto; padding:26px 18px 48px}
.article .a-date{color:var(--slate-2); font-weight:700; font-size:13px}
.article h1{font-size:clamp(23px,4vw,31px); line-height:1.5; margin:6px 0 10px}
.article .a-tags{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 22px}
.article .a-tags span{font-size:12px; color:var(--teal-d); background:#EAF7F2; border-radius:999px; padding:3px 10px; font-weight:700}
.article-body{font-size:16px}
.article-body h2{font-size:20px; margin:34px 0 12px; padding-left:12px; border-left:5px solid var(--teal)}
.article-body h3{font-size:17px; margin:26px 0 8px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 16px; padding-left:1.3em}
.article-body li{margin:5px 0}
.article-body blockquote{margin:18px 0; padding:12px 16px; background:#F1FBF8; border-left:4px solid var(--teal); color:var(--slate); border-radius:0 8px 8px 0}
.article-body img{border-radius:10px; margin:14px 0}
.article-cta{margin:34px 0 0; background:linear-gradient(90deg,#0CA795,#0A8C7E); color:#fff; border-radius:14px; padding:20px 22px; text-align:center}
.article-cta a{color:#fff; font-weight:800; text-decoration:none; display:inline-block; margin-top:8px; border:1.5px solid rgba(255,255,255,.7); border-radius:10px; padding:9px 18px}
.back-link{display:inline-block; margin:22px 0 0; color:var(--teal-d); font-weight:700; text-decoration:none}

/* ---- フッター ---- */
.site-foot{border-top:1px solid var(--line); margin-top:20px; background:#fff}
.site-foot .in{max-width:var(--wrap); margin:0 auto; padding:22px 18px; color:var(--slate-2); font-size:12.5px}
.site-foot a{color:var(--slate); text-decoration:none; font-weight:700}
.site-foot a:hover{color:var(--teal)}
.foot-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px}