/* ============================================
   株式会社Tip — メディア(/media/)専用スタイル
   site.css のデザイントークンを継承して拡張
   ============================================ */

/* ---------- 一覧ページ ---------- */
.md-hero{
  padding:150px clamp(20px,4vw,52px) 56px;
  background:linear-gradient(180deg,#fbfcfc 0%,#fff 100%);
  border-bottom:1px solid var(--line);
}
.md-hero .wrap{max-width:var(--maxw)}
.md-hero .sec-en{color:var(--mikan-deep);display:block;margin-bottom:12px}
.md-hero h1{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:14px;line-height:1.7}
.md-hero p{color:var(--ink2);font-size:.9rem;max-width:640px}

.md-list{padding:56px clamp(20px,4vw,52px) 110px}
.md-list .wrap{max-width:var(--maxw)}
.md-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.md-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.md-card:hover{box-shadow:0 14px 40px rgba(14,42,71,.09);transform:translateY(-3px)}
.md-card-thumb{aspect-ratio:1200/675;overflow:hidden;background:var(--wash)}
.md-card-thumb img,.md-card-thumb svg{width:100%;height:100%;object-fit:cover;display:block}
.md-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.md-card-meta{display:flex;align-items:center;gap:12px}
.md-card-cat{
  font-size:.64rem;color:var(--mikan-deep);border:1px solid currentColor;
  padding:2px 10px;border-radius:999px;letter-spacing:.12em;font-weight:600;
}
.md-card-date{font-size:.7rem;color:var(--ink3);font-family:var(--en);letter-spacing:.08em}
.md-card h2{font-size:1rem;font-weight:700;line-height:1.8;letter-spacing:.05em;color:var(--navy3)}
.md-card p{font-size:.8rem;color:var(--ink2);line-height:1.95;flex:1}
.md-card-more{font-size:.76rem;color:var(--mikan-deep);font-weight:600;letter-spacing:.1em}

/* ---------- 記事ページ ---------- */
.art-head{
  padding:140px clamp(20px,4vw,52px) 36px;
  background:linear-gradient(180deg,#fbfcfc 0%,#fff 100%);
}
.art-head .wrap,.art-body .wrap{max-width:780px;margin:0 auto}
.art-breadcrumb{font-size:.72rem;color:var(--ink3);letter-spacing:.06em;margin-bottom:22px}
.art-breadcrumb a{border-bottom:1px solid var(--line2)}
.art-breadcrumb a:hover{color:var(--navy)}
.art-meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.art-cat{
  font-size:.66rem;color:var(--mikan-deep);border:1px solid currentColor;
  padding:2px 12px;border-radius:999px;letter-spacing:.12em;font-weight:600;
}
.art-date{font-size:.74rem;color:var(--ink3);letter-spacing:.06em}
.art-head h1{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:600;line-height:1.85;letter-spacing:.06em;color:var(--navy3);margin-bottom:0;
}
.art-body{padding:10px clamp(20px,4vw,52px) 90px}

/* 本文タイポグラフィ */
.art-content{font-size:.95rem;line-height:2.25;color:var(--ink)}
.art-content>p{margin:0 0 26px}
.art-content h2{
  font-family:var(--serif);font-size:1.42rem;font-weight:600;line-height:1.8;
  letter-spacing:.06em;color:var(--navy3);
  margin:70px 0 28px;padding:14px 0 14px 22px;border-left:5px solid var(--mikan);
  background:linear-gradient(90deg,#f8f7f3 0%,#fff 85%);
}
.art-content h3{
  font-size:1.12rem;font-weight:700;line-height:1.8;letter-spacing:.05em;color:var(--navy3);
  margin:48px 0 18px;padding-bottom:10px;border-bottom:2px solid var(--line);
}
.art-content ul,.art-content ol{margin:0 0 26px;padding-left:1.6em}
.art-content li{margin-bottom:8px}
.art-content ol li::marker{font-weight:700;color:var(--mikan-deep)}
.art-content a{color:var(--navy2);border-bottom:1px solid var(--line2);transition:border-color .2s}
.art-content a:hover{border-color:var(--navy2)}
.art-content strong{color:var(--navy3)}
.art-content table{
  width:100%;border-collapse:collapse;margin:0 0 30px;font-size:.88rem;line-height:1.9;
}
.art-content table th{
  background:var(--navy);color:#fff;font-weight:600;padding:12px 14px;text-align:left;
  letter-spacing:.06em;border:1px solid var(--navy2);
}
.art-content table td{padding:12px 14px;border:1px solid var(--line);vertical-align:top}
.art-content table tr:nth-child(even) td{background:var(--bg2)}
.art-table-scroll{overflow-x:auto;margin:0 0 30px}
.art-table-scroll table{margin:0;min-width:560px}
.art-content pre{
  background:#0f1e30;color:#e8eef4;border-radius:6px;
  padding:22px 24px;margin:0 0 14px;overflow-x:auto;
  font-size:.84rem;line-height:2;position:relative;
  font-family:'SFMono-Regular',Menlo,Consolas,'Noto Sans JP',monospace;
  white-space:pre-wrap;word-break:break-word;
}
.art-copy-note{font-size:.72rem;color:var(--ink3);margin:-4px 0 30px;text-align:right}
.art-content img,.art-figure svg{max-width:100%;height:auto;display:block;margin:0 auto}
.art-figure{margin:0 0 30px;border:1px solid var(--line);background:#fff;padding:10px}

/* 結論コールアウト・要点ボックス */
.callout-conclusion{
  background:#fdf6ee;border:1px solid #f0ddc8;border-left:5px solid var(--mikan);
  padding:24px 26px;margin:0 0 26px;font-size:.95rem;line-height:2.2;
}
.callout-keypoints{
  background:var(--wash);border:1px solid #dce8ec;
  padding:22px 26px;margin:0 0 26px;font-size:.9rem;line-height:2.1;
}
.callout-keypoints b{color:var(--navy3)}

/* ❌⭕失敗パターン */
.art-ng,.art-ok{
  padding:16px 20px;margin:0 0 14px;font-size:.9rem;line-height:2.1;border-radius:4px;
}
.art-ng{background:#fdf0f0;border:1px solid #f2d4d4}
.art-ok{background:#eff7ef;border:1px solid #d3e8d3}
.art-why{font-size:.92rem;margin:0 0 30px}
.art-why b{color:var(--mikan-deep)}

/* チェックリスト */
.art-checklist{
  background:#fff;border:2px solid var(--navy);padding:26px 30px;margin:0 0 30px;
  list-style:none !important;padding-left:30px !important;
}
.art-checklist li{list-style:none;margin-bottom:10px;font-size:.92rem}

/* FAQ */
.art-faq h3{border-bottom:none;background:var(--bg2);padding:14px 18px;margin:26px 0 12px;border-left:4px solid var(--navy)}

/* 目次 */
.art-toc{
  border:1px solid var(--line);background:var(--bg2);margin:34px 0 10px;
}
.art-toc summary{
  cursor:pointer;padding:16px 22px;font-weight:700;font-size:.9rem;letter-spacing:.1em;color:var(--navy3);
}
.art-toc ol{margin:0;padding:4px 26px 20px 44px;font-size:.85rem;line-height:2.2}
.art-toc ol ol{padding:0 0 0 20px;font-size:.82rem}
.art-toc a{color:var(--ink2);border-bottom:none}
.art-toc a:hover{color:var(--navy)}

/* CTA */
.art-cta{
  background:linear-gradient(135deg,var(--navy3) 0%,var(--navy) 100%);color:#fff;
  padding:34px 36px;margin:44px 0;text-align:center;border-radius:4px;
}
.art-cta p{margin:0 0 20px;font-size:.92rem;line-height:2.1;color:rgba(255,255,255,.9)}
.art-cta b{color:#fff}
.art-cta .btn{background:var(--cta);color:#fff;display:inline-flex;min-width:280px}
.art-cta .btn:hover{background:var(--cta2)}
.art-cta-sub{font-size:.74rem;color:rgba(255,255,255,.65);margin-top:14px !important;margin-bottom:0 !important}

/* 著者ボックス */
.art-author{
  display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;
  border:1px solid var(--line);background:var(--bg2);padding:28px 30px;margin:56px 0 0;
}
.art-author img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.art-author-name{font-weight:700;font-size:.98rem;margin-bottom:6px}
.art-author-name small{font-weight:500;color:var(--ink3);font-size:.74rem;margin-left:10px}
.art-author p{font-size:.82rem;color:var(--ink2);line-height:2;margin:0}
.art-editorial{font-size:.74rem;color:var(--ink3);line-height:1.9;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}

/* 更新日ボックス・出典 */
.art-dates{font-size:.76rem;color:var(--ink3);margin:34px 0 0;text-align:right}
.art-refs{font-size:.82rem;color:var(--ink2);line-height:2.1}

/* 関連記事 */
.art-related{margin:70px 0 0}
.art-related h2{font-family:var(--sans);font-size:1.1rem;border-left:5px solid var(--navy);background:none;padding:4px 0 4px 18px;margin:0 0 22px}
.art-related ul{list-style:none;padding:0;margin:0}
.art-related li{border-bottom:1px solid var(--line);margin:0}
.art-related a{display:block;padding:16px 6px;font-size:.9rem;border-bottom:none;color:var(--navy2)}
.art-related a:hover{background:var(--bg2)}
.art-related .soon{display:block;padding:16px 6px;font-size:.9rem;color:var(--ink3)}
.art-related .soon small{margin-left:10px;font-size:.7rem;border:1px solid var(--line2);padding:1px 8px;border-radius:999px}

/* レスポンシブ */
@media(max-width:1020px){
  .md-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .md-hero{padding:120px 22px 40px}
  .md-list{padding:40px 22px 80px}
  .md-grid{grid-template-columns:1fr;gap:20px}
  .art-head{padding:112px 22px 28px}
  .art-body{padding:6px 22px 70px}
  .art-content{font-size:.92rem;line-height:2.15}
  .art-content h2{font-size:1.22rem;margin:54px 0 22px;padding:10px 0 10px 16px}
  .art-content h3{font-size:1.05rem;margin:38px 0 16px}
  .art-content pre{padding:18px 16px;font-size:.8rem}
  .art-author{grid-template-columns:64px 1fr;gap:16px;padding:22px 20px}
  .art-author img{width:64px;height:64px}
  .art-cta{padding:28px 22px}
  .art-cta .btn{min-width:0;width:100%}
}

/* アイキャッチ・TTP図解 */
.art-eyecatch{margin:0 0 34px}
.art-eyecatch img{width:100%;height:auto;border-radius:6px}
.art-figure-img{border:1px solid var(--line);padding:0;overflow:hidden}
.art-figure-img img{width:100%;height:auto}