/* ============================================================
   まるっとAI コラム column.css
   トップページ（css/home.css）と同じ設計体系。
   ・書体 Poppins × Noto Sans JP / 見出しは700・字間-0.04em
   ・カードは白・大きな角丸・「1pxのヘアライン＋やわらかい落ち影」の2層
   ・太い枠線とハードシャドウは使わない
   ============================================================ */
:root{
  --ink:#1d1d1d; --ink2:#3c4250; --mute:#5d6779; --faint:#c8ccd3;
  --line:#e3e8ef; --bg:#f4f6f9; --white:#fff;
  --blue:#1355cd; --blue-deep:#0d3fa6; --green:#02a790; --green-deep:#027a63;
  --pink:#d52850; --orange:#f9612f; --orange-deep:#c9490f;
  /* トップと同じ丸みの段階: 350px級=40 / 750px級=28 / 1100px級=36 */
  --r-cardL:40px; --r-read:28px; --r-wide:36px; --r-card:20px; --r-input:14px; --r-pill:999px;
  --shadow-card:0 0 0 1px rgba(24,24,27,.055), 0 8px 18px rgba(24,24,27,.08);
  --shadow-pop:0 0 0 1px rgba(24,24,27,.05), 0 20px 48px rgba(24,24,27,.11);
  --head-h:76px;
}
*{box-sizing:border-box}
html{font-feature-settings:"halt" 1;-webkit-font-smoothing:antialiased;scroll-behavior:auto}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Poppins','Noto Sans JP',sans-serif;
  font-size:16px;line-height:1.9;letter-spacing:-.01em;
  word-break:auto-phrase;line-break:strict;
}
img{max-width:100%;height:auto}
/* 数字＋単位のように、途中で割ると読めなくなる語をまとめる */
.nw{white-space:nowrap}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.03em;font-weight:700}

/* ---------- ヘッダー（トップページと同じ見え方） ---------- */
.g-head{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--head-h);
  display:flex;align-items:center;gap:clamp(14px,1.7vw,25px);
  padding:0 clamp(16px,3vw,40px);width:auto;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px) saturate(1.08);-webkit-backdrop-filter:blur(16px) saturate(1.08);
  box-shadow:0 1px 0 rgba(227,232,239,.55);
}
.g-logo{display:flex;align-items:center;flex:0 0 auto}
.g-logo img{height:34px;width:auto;max-width:none;display:block}
.g-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,25px);margin-left:auto;flex-wrap:nowrap}
.g-links a{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;border-radius:0;padding:0}
.g-links a:hover{opacity:.6}
.g-links a.on{color:var(--blue)}
.g-cta{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:14px 26px;font-size:14.5px;font-weight:700;letter-spacing:.02em;border:0;
  transition:transform .25s ease,box-shadow .25s ease;
}
.g-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.22)}
.g-cta .arrow{display:none}
@media(max-width:1080px){
  .g-links a{font-size:13.5px}
  .g-cta{padding:12px 20px;font-size:13.5px}
}
@media(max-width:820px){
  .g-links{display:none}
  .g-cta{margin-left:auto;padding:11px 18px;font-size:13px}
  .g-logo img{height:27px}
}

/* ---------- 本文の器 ---------- */
.layout{
  max-width:1180px;margin:0 auto;
  padding:calc(var(--head-h) + 40px) clamp(16px,4vw,32px) 90px;
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,3.4vw,56px);align-items:start;
}
.wrap{max-width:760px;min-width:0}
/* 一覧ページは本文幅の制限を外してカードを並べる */
.wrap-list{max-width:none}
.layout .wrap{max-width:760px}
.layout .wrap-list{max-width:none}

/* ---------- 記事のヘッダ ---------- */
.bc{font-size:12.5px;color:var(--mute);margin:0 0 18px}
.bc a:hover{color:var(--blue)}
.cat{
  display:inline-block;border:0;border-radius:var(--r-pill);
  background:#eaf0fc;color:var(--ink);
  padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;
}
.wrap h1{
  margin:16px 0 12px;font-size:clamp(26px,3vw,38px);line-height:1.45;letter-spacing:-.035em;
}
.date{margin:0 0 22px;font-size:12.5px;color:var(--mute)}
.thumb{
  margin:0 0 34px;border:0;border-radius:var(--r-read);overflow:hidden;
  box-shadow:var(--shadow-card);
}
.thumb img{width:100%;display:block}

/* 共有ボタン */
.share{display:flex;gap:10px;margin:0 0 24px}
.share a,.share button{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:0;border-radius:var(--r-pill);background:var(--white);color:var(--ink2);
  box-shadow:0 0 0 1px rgba(24,24,27,.09);
  padding:8px 16px;font-size:12.5px;font-weight:700;font-family:inherit;
}
.share a:hover,.share button:hover{box-shadow:0 0 0 1px var(--blue);color:var(--blue)}
.meta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 22px}
.read-min{border-radius:var(--r-pill);background:var(--bg);color:var(--mute);padding:5px 13px;font-size:12px;font-weight:700}

/* ---------- 目次 ---------- */
.toc{
  border:0;border-radius:var(--r-card);background:var(--bg);
  padding:22px 26px;margin:0 0 40px;
}
.toc-t{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14px;font-weight:700}
.toc-t::before{content:"";width:15px;height:15px;border:0;border-radius:4px;background:var(--blue)}
.toc ol,.toc ul{margin:0;padding:0;list-style:none}
.toc ol{counter-reset:toc-item}
.toc ol>li{counter-increment:toc-item}
.toc li{border-top:1px solid var(--line)}
.toc li:first-child{border-top:none}
.toc a{display:flex;gap:12px;padding:9px 0;font-size:14px;color:var(--ink2);line-height:1.6}
.toc a:hover{color:var(--blue)}
.toc ol>li>a::before{content:counter(toc-item, decimal-leading-zero);flex:0 0 24px;color:var(--blue);font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums;letter-spacing:.03em}

/* ---------- 本文 ---------- */
.md{font-size:16px;line-height:1.95;color:var(--ink2)}
.md p{margin:0 0 1.5em}
.md strong,.md b{color:var(--ink);font-weight:800}
.md p>strong,.md p>b{
  background:linear-gradient(transparent 69%,rgba(255,205,34,.46) 69%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .04em;
}
.md li>strong:first-child{color:var(--blue);background:none}
.md a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.wrap h2,.md h2{
  display:block;border:0;border-radius:0;background:none;
  margin:56px 0 20px;padding:0 0 14px;border-bottom:2px solid var(--line);
  font-size:clamp(21px,2.1vw,26px);line-height:1.5;color:var(--ink);
}
.wrap h2::before{display:none}
.md h3{margin:38px 0 14px;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink)}
.md h4{margin:28px 0 10px;font-size:16px;color:var(--ink)}
.md ul,.md ol{margin:0 0 1.5em;padding-left:1.4em}
.md li{margin:0 0 .55em}
.md img{max-width:100%;border:0;border-radius:var(--r-card);box-shadow:var(--shadow-card);display:block;margin:24px auto}
.md blockquote{
  margin:24px 0;padding:16px 22px;border-left:3px solid var(--line);
  background:var(--bg);border-radius:0 var(--r-input) var(--r-input) 0;color:var(--mute);
}
.md code{
  background:var(--bg);border-radius:6px;padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--ink);
}
.md pre{
  background:#101828;color:#e6ebf5;border-radius:var(--r-card);
  padding:20px 22px;overflow-x:auto;font-size:13px;line-height:1.75;margin:24px 0;
}
.md pre code{background:none;color:inherit;padding:0}

/* 表 */
.tblwrap{border:0;border-radius:var(--r-card);overflow:hidden auto;overflow-x:auto;box-shadow:var(--shadow-card);margin:24px 0}
.md table{border-collapse:collapse;width:100%;min-width:560px;background:var(--white);font-size:14px}
.md th,.md td{border-bottom:1px solid var(--line);padding:13px 16px;text-align:left;line-height:1.7}
.md th{background:var(--bg);color:var(--ink);font-weight:700;white-space:nowrap}
.md tr:last-child td{border-bottom:none}

/* 画像つきの図・比較 */
.shot{border:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);margin:24px 0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.vs>div{border-width:0;border-radius:var(--r-card);padding:18px 20px;background:var(--white);box-shadow:var(--shadow-card)}
.vs .a{box-shadow:0 0 0 1.5px var(--blue),0 8px 18px rgba(24,24,27,.08)}
.vs .b{box-shadow:var(--shadow-card)}

/* FAQ */
.faqbox{margin:44px 0 0}
.faq-item{
  border:0;border-radius:var(--r-card);background:var(--white);
  box-shadow:var(--shadow-card);padding:20px 24px;margin:0 0 12px;
}
.faq-item .q{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.6}
.faq-item .a{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.85}

/* 筆者 */
.writer{
  display:flex;gap:16px;align-items:center;border:0;border-radius:var(--r-card);
  background:var(--bg);padding:20px 24px;margin:44px 0 0;
}
.writer img{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r-pill)}
.writer .n{margin:0 0 3px;font-size:14px;font-weight:700;color:var(--ink)}
.writer .s{margin:0;font-size:12.5px;color:var(--mute);line-height:1.7}

/* 関連記事 */
.rel{border:0;border-radius:var(--r-read);background:var(--bg);padding:26px 28px;margin:44px 0 0}
.rel .t{margin:0 0 16px;font-size:15px;font-weight:700;color:var(--ink)}
.rel a{display:block}
.rel-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rel-card{
  display:block;border:0;border-radius:var(--r-card);overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-card);transition:transform .25s ease,box-shadow .25s ease;
}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.rel-th{display:block;border-bottom:0}
.rel-th img{width:100%;display:block}
.rel-tt{display:block;padding:13px 15px 16px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ink)}

/* 記事下のCTA */
.cta{
  border:0;border-radius:var(--r-read);margin:48px 0 0;padding:36px 34px;text-align:center;
  background:
    radial-gradient(720px 420px at 88% -12%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(152deg,#4a7df2 0%,#1e56dd 46%,#0d3fa6 100%);
  color:#fff;
}
.cta .t{margin:0 0 8px;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.5;color:#fff}
.cta .cp{margin:0 0 22px;font-size:14.5px;color:rgba(255,255,255,.9);line-height:1.8}
.cta a{
  display:inline-flex;align-items:center;justify-content:center;border:0;
  background:var(--white);color:var(--ink);border-radius:var(--r-pill);
  padding:15px 34px;font-size:15px;font-weight:700;
  transition:transform .25s ease,box-shadow .25s ease;
}
.cta a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.cta a .arrow{display:none}

/* ---------- サイドバー ---------- */
.side{
  position:sticky;top:calc(var(--head-h) + 24px);
  display:flex;flex-direction:column;gap:16px;min-width:0;
  max-height:calc(100svh - var(--head-h) - 40px);overflow-y:auto;
  scrollbar-width:thin;
}
.side>*{flex-shrink:0}   /* 縦に制限があるので、子が潰れないようにする */
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.side-box{border:0;border-radius:var(--r-card);background:var(--white);box-shadow:var(--shadow-card);padding:20px 20px 22px}
.side-t{margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
/* サイドの固定バナー（支給画像） */
.side-cta{
  display:block;border:0;border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .28s ease,box-shadow .28s ease;
}
.side-cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.side-cta img{width:100%;height:auto;display:block}

/* 人気記事 */
.rank{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.rank:first-of-type{border-top:none;padding-top:0}
.rank .th{position:relative;flex:0 0 104px;border-radius:10px;border:0;overflow:hidden;box-shadow:0 0 0 1px rgba(24,24,27,.07)}
.rank .th img{width:100%;display:block}
/* 順位は黒ベタの四角ではなく、白い丸に。新しい設計に合わせる */
.rank .no{
  position:absolute;left:6px;top:6px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-size:11.5px;font-weight:700;border-radius:var(--r-pill);
  box-shadow:0 2px 6px rgba(24,24,27,.18);
}
.rank>p{margin:0;min-width:0;font-size:12.5px;font-weight:700;line-height:1.6;color:var(--ink);word-break:auto-phrase}
.rank:hover>p{color:var(--blue)}
.rank.r1{display:block}
.rank.r1 .th{flex:none;width:100%;margin:0 0 10px}
.rank.r1 .no{left:10px;top:10px;width:28px;height:28px;font-size:13px}

/* カテゴリ */
.side-cats{display:flex;flex-wrap:wrap;gap:8px}
.side-cats a{
  border:0;border-radius:var(--r-pill);background:var(--bg);color:var(--ink2);
  padding:7px 14px;font-size:12px;font-weight:700;
}
.side-cats a:hover{background:#eaf0fc;color:var(--blue)}

/* ---------- 一覧ページ ---------- */
.col-hero-wrap{padding:calc(var(--head-h) + 18px) clamp(16px,4vw,32px) 0;max-width:1180px;margin:0 auto}
/* 一覧のヒーローは支給画像1枚（文字も画像に入っているのでalt側で拾う） */
.col-hero{display:block;margin:0}
.col-hero img{width:100%;max-width:840px;height:auto;display:block;margin:0 auto}
/* ヒーローの直後は、ヘッダー分の余白をもう一度取らない */
.col-hero-wrap + .layout{padding-top:14px}


.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px;padding:0}
.chip{
  border:0;border-radius:var(--r-pill);background:var(--white);color:var(--ink2);
  box-shadow:0 0 0 1px rgba(24,24,27,.09);
  padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}
.chip:hover{box-shadow:0 0 0 1px var(--blue);color:var(--blue)}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;
  margin:0;padding:0;
}
.card{
  display:flex;flex-direction:column;background:var(--white);border:0;
  border-radius:var(--r-read);overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .28s ease,box-shadow .28s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.card-img{display:block;position:relative}
.card-img img{width:100%;display:block}
.card-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-t{margin:0;font-size:15px;font-weight:700;line-height:1.65;color:var(--ink);word-break:auto-phrase;text-wrap:pretty}
.card .date{margin:auto 0 0;font-size:12px;color:var(--mute)}
.card .cat{align-self:flex-start;padding:5px 13px;font-size:11.5px}

/* ---------- フッター ---------- */
.foot{
  border-top:1px solid var(--line);background:var(--white);
  padding:34px clamp(16px,4vw,32px);text-align:center;
  font-size:12.5px;color:var(--mute);
}
.foot p{margin:0}
.foot p:first-child{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.foot a{color:var(--mute)}
.foot a:hover{color:var(--blue)}

/* ---------- 狭い画面 ---------- */
@media(max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr);padding-top:calc(var(--head-h) + 28px)}
  .layout .wrap{min-width:0;max-width:100%}
  .side{position:static;max-width:560px;min-width:0;max-height:none;overflow:visible;margin:0 auto}
  .rel-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:734px){
  body{font-size:15.5px}
  .layout{padding-bottom:64px}
  .wrap h1{font-size:24px;line-height:1.5}
  .wrap h2,.md h2{margin:42px 0 16px;font-size:19px}
  .md h3{font-size:16.5px}
  .thumb{border-radius:24px}
  .rel{padding:22px 18px;border-radius:24px}
  .rel-cards{grid-template-columns:1fr}
  .cta{padding:30px 20px;border-radius:24px}

  .card{border-radius:22px}
  .vs{grid-template-columns:1fr}
  .toc{padding:18px 18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s !important;transition-duration:.01s !important}
}