@charset "UTF-8";
/* ============================================================
   VIVAGE column.css — コラム（一覧・記事）専用
   base/pc/sp の後に読み込む。PC/SP差分は末尾の @media にまとめる
   ============================================================ */

/* ---- 一覧 ---- */
.col-list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 36px}
.col-card a{display:block}
.col-card .thumb{position:relative;overflow:hidden}
.col-card .thumb img{aspect-ratio:3/2;object-fit:cover;transition:transform .6s ease}
.col-card a:hover .thumb img{transform:scale(1.04)}
.col-card .meta{display:block;margin-top:18px;font-family:'Cormorant Garamond',Georgia,serif;font-size:12px;letter-spacing:.2em;color:var(--gold)}
.col-card h2{margin-top:6px;font-size:16px;font-weight:500;line-height:1.9;letter-spacing:.08em;color:var(--ink)}
.col-card p{margin-top:10px;font-size:13px;line-height:2;letter-spacing:.05em;color:#7a6c5d}

/* ---- 記事 ---- */
.article{max-width:760px;margin:0 auto}
.article .meta{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;letter-spacing:.2em;color:var(--gold);margin-bottom:36px}
.article .eyecatch{margin-bottom:56px}
.article .eyecatch img{aspect-ratio:3/2;object-fit:cover}
.article .intro{font-size:15.5px;line-height:2.3;margin-bottom:3em}
.article .toc{border:1px solid var(--line);background:#fff;padding:26px 30px;margin-bottom:64px}
.article .toc p{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.3em;color:var(--sepia);margin-bottom:10px}
.article .toc ol{list-style:decimal;padding-left:1.4em;font-size:14px;line-height:2.2}
.article .toc a{border-bottom:1px solid var(--line)}
.article .toc a:hover{color:var(--sepia);border-color:var(--gold)}
.article h2{font-size:21px;font-weight:500;letter-spacing:.14em;line-height:1.8;color:var(--sepia);margin:72px 0 28px;padding-bottom:14px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.article h3{font-size:16.5px;font-weight:500;letter-spacing:.1em;margin:40px 0 14px;padding-left:14px;border-left:2px solid var(--gold)}
.article p{font-size:15px;line-height:2.2;letter-spacing:.05em;margin-bottom:1.6em}
.article a.inline{color:var(--sepia);border-bottom:1px solid var(--gold)}
.article .compare{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 2em;background:#fff}
.article .compare th,.article .compare td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top;line-height:1.9}
.article .compare thead th{background:var(--bg);color:var(--sepia);font-weight:500;letter-spacing:.12em}
.article .compare tbody th{width:22%;font-weight:500;color:var(--sepia);white-space:nowrap}
.article .figure{margin:36px 0 40px}
.article .figure img{aspect-ratio:3/2;object-fit:cover}
.article .figure figcaption{margin-top:10px;font-size:12px;letter-spacing:.08em;color:#9b8d7d;text-align:center}
.article .point{background:#fff;border:1px solid var(--line);padding:24px 28px;margin:0 0 2em}
.article .point li{position:relative;padding-left:1.4em;font-size:14.5px;line-height:2.1}
.article .point li::before{content:'';position:absolute;left:0;top:.95em;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
.article .summary{background:#fff;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:34px 32px;margin:64px 0}
.article .summary h2{margin-top:0;border-bottom:0;padding-bottom:0}
.article .cta{display:flex;flex-wrap:wrap;gap:18px 36px;justify-content:center;margin-top:12px}
.article-faq{max-width:760px;margin:0 auto}
.article-faq > h2{text-align:center;font-size:21px;font-weight:500;letter-spacing:.2em;color:var(--sepia);margin-bottom:36px}

@media (max-width:768px){
  .col-list{grid-template-columns:1fr;gap:44px}
  .article .eyecatch{margin-bottom:40px}
  .article .intro{font-size:14.5px}
  .article .toc{padding:20px 22px;margin-bottom:48px}
  .article .toc ol{font-size:13.5px}
  .article h2{font-size:18px;margin:56px 0 22px}
  .article h3{font-size:15.5px}
  .article p{font-size:14px;line-height:2.1}
  .article .compare{font-size:13px}
  .article .compare th,.article .compare td{padding:10px 10px}
  .article .compare tbody th{white-space:normal;width:26%}
  .article .point{padding:20px 20px}
  .article .summary{padding:28px 20px;margin:48px 0}
  .article-faq > h2{font-size:18px}
}
@media (min-width:769px) and (max-width:1000px){
  .col-list{grid-template-columns:repeat(2,1fr)}
}