/* ============================================
   MEDIORA コラム記事共通デザイン(art-*)
   AGA記事デザインをブランド配色に変換した記事レイアウト
   ============================================ */

.art-bg {
  background: var(--background);
  padding: 28px 0 64px;
}

.art-breadcrumb {
  max-width: 880px;
  margin: 0 auto 14px;
  padding: 0 20px;
}

.art-breadcrumb .breadcrumb {
  margin: 0;
}

.art {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.85;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-sizing: border-box;
}

.art p { margin: 0 0 1em; }
.art ul, .art ol { margin: 0 0 1em; padding-left: 1.6em; }
.art li { margin-bottom: 0.5em; }
.art strong { color: var(--teal-dark); font-weight: 700; }

/* ---- ヒーロー ---- */
.art-hero {
  background: linear-gradient(135deg, #123458 0%, #17547a 45%, #28a99a 100%);
  color: #fff;
  padding: 40px 28px;
  border-radius: 14px;
  margin-bottom: 32px;
  text-align: center;
}
.art-hero h1 {
  font-size: 26px; line-height: 1.5; margin: 0 0 16px;
  color: #fff; font-weight: 800; letter-spacing: -0.01em;
}
.art-hero-sub { font-size: 15px; line-height: 1.8; margin-bottom: 20px; opacity: 0.97; }
.art-hero-note {
  font-size: 12px; background: rgba(255, 255, 255, 0.18);
  padding: 10px 14px; border-radius: 6px; display: inline-block;
  margin-bottom: 20px; line-height: 1.6;
}
.art-hero-tags {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 20px;
}
.art-hero-tags span {
  padding: 7px 12px; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  font-size: 12px; font-weight: 800;
}
.art-hero-cta-row {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 10px;
}
.art-hero-cta-mini {
  display: inline-block; background: #fff; color: var(--navy);
  padding: 10px 18px; border-radius: 8px; font-weight: 700;
  font-size: 14px; text-decoration: none; min-width: 160px;
}

.art-meta {
  margin: -16px 0 28px; color: #7a8ba0; font-size: 12px; text-align: right;
}

/* ---- 目次 ---- */
.art-toc {
  background: #f2f9f8; border: 1px solid #cceee8;
  border-radius: 10px; padding: 22px 26px; margin-bottom: 36px;
}
.art-toc-title {
  font-size: 18px; font-weight: 700; color: var(--teal-dark);
  margin-bottom: 12px; border-bottom: 2px solid var(--teal); padding-bottom: 8px;
}
.art-toc ol { padding-left: 1.4em; margin: 0; }
.art-toc ol li { margin-bottom: 6px; font-size: 15px; }
.art-toc ol li a { color: var(--text); text-decoration: none; border-bottom: 1px dotted #7fcdc2; }

/* ---- リード ---- */
.art-lead {
  background: #fafdfc; border-left: 4px solid var(--teal);
  padding: 20px 22px; border-radius: 0 8px 8px 0;
  margin-bottom: 40px; font-size: 15.5px;
}
.art-lead ul { list-style: none; padding-left: 0; margin: 12px 0 0; }
.art-lead ul li {
  background: #fff; padding: 8px 14px; border-radius: 6px;
  margin-bottom: 6px; border: 1px solid #d9efeb;
}

/* ---- 見出し ---- */
.art h2 {
  font-size: 22px; font-weight: 800; color: var(--navy);
  margin: 44px 0 20px; padding: 8px 0 14px 16px;
  border-left: 5px solid var(--teal); border-bottom: 2px solid #e0ecf3;
  line-height: 1.5;
}
.art h3 {
  font-size: 18px; font-weight: 700; color: var(--navy);
  margin: 28px 0 14px; padding: 8px 12px;
  background: #f2f9f8; border-radius: 6px;
  border-left: 3px solid var(--teal); line-height: 1.5;
}
.art h4 { font-size: 16px; color: var(--teal-dark); margin: 20px 0 10px; font-weight: 700; }

/* ---- ポイント/警告ボックス ---- */
.art-point-box {
  background: #f2f9f8; border-left: 4px solid var(--teal);
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 14px 0 24px;
}
.art-point-box h4 { margin: 0 0 8px; color: var(--teal-dark); }
.art-point-box ul { margin: 0; padding-left: 1.4em; }
.art-point-box ul li { margin-bottom: 4px; }
.art-point-box > strong { display: block; margin-bottom: 6px; }
.art-point-box p { margin: 0; font-size: 14px; }

.art-warning-box {
  background: var(--warning); border-left: 4px solid #e0b93f;
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 14px 0 24px;
  color: #594b2a; font-size: 15px;
}
.art-warning-box h4 { margin: 0 0 8px; color: #8a6d1f; }
.art-warning-box > strong { display: block; margin-bottom: 6px; color: #8a6d1f; }
.art-warning-box ul { margin: 0; padding-left: 1.4em; }
.art-warning-box ul li { margin-bottom: 4px; }
.art-warning-box p { margin: 0; }

/* ---- CTA ---- */
.art-cta { text-align: center; margin: 28px 0 12px; }
.art-cta-btn {
  display: inline-block;
  background: linear-gradient(180deg, #ff8547 0%, #ff6b35 100%);
  color: #fff !important; padding: 16px 32px;
  border-radius: 50px; font-weight: 800; font-size: 16px;
  text-decoration: none; min-width: 260px;
  border: 2px solid #ff6b35; letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(255,107,53,0.35);
}
.art-cta-btn-large { padding: 18px 40px; font-size: 17px; min-width: 300px; }
.art-cta-btn-sm { padding: 12px 22px; font-size: 14px; min-width: 220px; }
.art-cta-note { display: block; font-size: 12px; color: #7a8ba0; margin-top: 8px; }

/* ---- アフィリエイトバナー(中央寄せ) ---- */
.aff-banner { text-align: center; margin: 28px 0; }
.aff-banner .aff-pr { font-size: 12px; color: #8ea0af; margin: 0 0 8px; }
.aff-banner a { display: inline-block; }
.aff-banner img { display: inline-block; max-width: 100%; height: auto; border-radius: 8px; }

/* ---- テーブル ---- */
.art-table-wrap {
  overflow-x: auto; margin: 16px 0 10px;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #cceee8; border-radius: 8px;
}
.art-table {
  width: 100%; border-collapse: collapse;
  min-width: 560px; font-size: 14px;
}
.art-table th, .art-table td {
  padding: 12px 14px; border-bottom: 1px solid #e0ecf3;
  text-align: left; vertical-align: top;
}
.art-table th {
  background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap;
}
.art-table tr:nth-child(even) td { background: #f2f9f8; }
.art-table tr:nth-child(odd) td { background: #fff; }
.art-table a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.art-price { color: var(--teal-dark); font-weight: 900; white-space: nowrap; }
.art-small-note { color: #7a8ba0; font-size: 12px; margin: 0 0 24px; }

/* ---- ランキングカード ---- */
.art-rank-card {
  border: 2px solid #d9efeb; border-radius: 12px;
  padding: 24px 22px; margin-bottom: 28px; background: #fff;
}
.art-rank-card.gold { border-color: #ffd700; background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%); }
.art-rank-card.silver { border-color: #c0c0c0; background: linear-gradient(180deg, #f7f7f7 0%, #ffffff 40%); }
.art-rank-card.bronze { border-color: #cd7f32; background: linear-gradient(180deg, #fff4e6 0%, #ffffff 40%); }

.art-rank-header {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.art-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 14px;
  text-align: center; line-height: 1.15; flex-shrink: 0;
  background: linear-gradient(135deg, #28a99a, #123458);
  border: 3px solid rgba(255, 255, 255, 0.7);
}
.art-rank-badge.gold { background: linear-gradient(135deg, #ffd700, #ffa500); color: #6b4a00; }
.art-rank-badge.silver { background: linear-gradient(135deg, #e0e0e0, #a0a0a0); color: #333; }
.art-rank-badge.bronze { background: linear-gradient(135deg, #e8a672, #cd7f32); color: #fff; }
.art h3.art-rank-title {
  margin: 0; padding: 0; background: none; border-left: none;
  font-size: 20px; font-weight: 800; color: var(--text);
}
.art-rank-score { font-size: 13px; color: var(--teal-dark); font-weight: 800; margin-top: 4px; }
.art-fact-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px; margin: 14px 0 0; padding: 0; list-style: none;
}
.art .art-fact-list { padding-left: 0; }
.art-fact-list li {
  margin: 0; padding: 11px 12px;
  background: var(--background); border-radius: 10px; font-size: 12px;
}

/* ---- 評価方法グリッド ---- */
.art-method-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px; margin: 16px 0 10px;
}
.art-method {
  padding: 16px 12px; background: #f2f9f8;
  border: 1px solid #cceee8; border-radius: 12px; text-align: center;
}
.art-method b { display: block; color: var(--teal-dark); font-size: 22px; }
.art-method span { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; }

/* ---- 推奨度グリッド ---- */
.art-evidence-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px; margin: 16px 0 10px;
}
.art-evidence {
  padding: 20px; background: #fafdfc;
  border: 1px solid #cceee8; border-radius: 13px;
}
.art-evidence b {
  display: inline-flex; padding: 4px 10px;
  color: #fff; background: var(--teal-dark);
  border-radius: 999px; font-size: 11px; font-weight: 800;
}
.art-evidence.is-d b { background: #8a555e; }
.art .art-evidence h3 {
  margin: 10px 0 6px; padding: 0; background: none; border-left: none;
  font-size: 17px;
}
.art-evidence p { margin: 0; font-size: 13px; }

/* ---- フロー(想定ケース)グリッド ---- */
.art-flow-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px; margin: 16px 0 10px;
}
.art-flow {
  padding: 20px; background: var(--teal-soft);
  border: 1px solid #cceee8; border-radius: 13px;
}
.art-flow span { color: var(--teal-dark); font-size: 11px; font-weight: 900; }
.art .art-flow h3 {
  margin: 6px 0; padding: 0; background: none; border-left: none;
  font-size: 16px;
}
.art-flow p { margin: 0; font-size: 12.5px; }

/* ---- ステップ(番号サークル) ---- */
.art-steps { list-style: none; padding: 0; margin: 20px 0; }
.art .art-steps { padding-left: 0; }
.art-steps > li {
  background: #fafdfc; border: 1px solid #cceee8;
  border-radius: 10px; padding: 16px 20px 16px 76px;
  margin-bottom: 14px; position: relative; min-height: 60px;
}
.art-steps > li::before {
  content: attr(data-step);
  position: absolute; left: 16px; top: 22px;
  width: 46px; height: 46px;
  background: linear-gradient(135deg, #123458, #28a99a);
  color: #fff; border-radius: 50%; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.art-step-title { font-weight: 700; color: var(--teal-dark); margin-bottom: 4px; font-size: 15.5px; }
.art-steps > li p { margin: 0 0 0.6em; font-size: 14.5px; }
.art-steps > li p:last-child { margin-bottom: 0; }
.art-steps > li ul { margin: 6px 0; font-size: 14.5px; }

/* ---- チェックリスト ---- */
.art-checklist {
  margin: 22px 0; padding: 22px 26px;
  background: #fafdfc; border: 1px solid #cceee8; border-radius: 10px;
}
.art-checklist ul { margin: 0; padding: 0; list-style: none; }
.art .art-checklist ul { padding-left: 0; }
.art-checklist li {
  position: relative; margin-bottom: 10px; padding-left: 30px; font-size: 14.5px;
}
.art-checklist li:last-child { margin-bottom: 0; }
.art-checklist li::before {
  position: absolute; top: 4px; left: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--teal); border-radius: 5px; content: "";
}

/* ---- FAQ ---- */
.art-faq details {
  background: #fafdfc; border: 1px solid #cceee8;
  border-radius: 8px; padding: 0; margin-bottom: 10px;
}
.art-faq details summary {
  padding: 16px 44px 16px 48px; font-weight: 700; color: var(--navy);
  cursor: pointer; list-style: none; position: relative; font-size: 15px;
}
.art-faq details summary::-webkit-details-marker { display: none; }
.art-faq details summary::before {
  content: 'Q'; position: absolute; left: 16px; top: 18px;
  width: 24px; height: 24px;
  background: var(--teal-dark); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.art-faq details summary::after {
  content: '＋'; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%); color: var(--teal-dark); font-weight: 800;
}
.art-faq details[open] summary::after { content: '−'; }
.art-faq details .art-faq-answer {
  padding: 0 20px 18px 48px; font-size: 14.5px;
  line-height: 1.85; position: relative;
}
.art-faq details .art-faq-answer::before {
  content: 'A'; position: absolute; left: 16px; top: 0;
  width: 24px; height: 24px; background: #ff6b35;
  color: #fff; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.art-faq details .art-faq-answer p { margin: 0 0 0.8em; }
.art-faq details .art-faq-answer p:last-child { margin-bottom: 0; }

/* ---- 図解のテキスト版(折りたたみ表) ---- */
.art-table-details {
  margin: 0 0 24px;
  background: #fafdfc;
  border: 1px solid #cceee8;
  border-radius: 8px;
}
.art-table-details summary {
  padding: 13px 18px;
  color: var(--teal-dark);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.art-table-details summary::-webkit-details-marker { display: none; }
.art-table-details summary::after {
  content: ' ＋';
}
.art-table-details[open] summary::after {
  content: ' −';
}
.art-table-details[open] summary {
  border-bottom: 1px solid #cceee8;
}
.art-table-details .art-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0 0 8px 8px;
}

/* ---- 免責・出典 ---- */
.art-disclaimer {
  background: #f5f7fa; border: 1px solid #dce4ee;
  border-radius: 8px; padding: 16px 20px; margin-top: 40px;
  font-size: 13px; color: #4a5568; line-height: 1.8;
}
.art-refs {
  margin-top: 20px; padding: 16px 20px;
  background: #fafdfc; border: 1px solid #cceee8;
  border-radius: 8px; font-size: 13px;
}
.art-refs ul { margin: 0 0 10px; padding-left: 1.4em; }
.art-refs li { margin-bottom: 4px; word-break: break-all; }
.art-refs a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.art-refs p { margin: 0; color: #4a5568; }

/* ---- 関連リンク(site.css補正) ---- */
.art .related-links { margin-top: 40px; padding-top: 28px; }

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .art { padding: 16px 12px 40px; font-size: 15px; }
  .art-hero { padding: 28px 18px; }
  .art-hero h1 { font-size: 20px; }
  .art-hero-sub { font-size: 13.5px; }
  .art h2 { font-size: 19px; padding-left: 12px; }
  .art h3 { font-size: 16.5px; }
  .art-cta-btn { padding: 14px 24px; font-size: 15px; min-width: auto; width: 100%; max-width: 320px; }
  .art-steps > li { padding-left: 66px; }
  .art-steps > li::before { width: 40px; height: 40px; left: 12px; top: 20px; font-size: 15px; }
  .art-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-evidence-grid, .art-flow-grid, .art-fact-list { grid-template-columns: 1fr; }
  .art h3.art-rank-title { font-size: 17px; }
  .art-rank-badge { width: 54px; height: 54px; font-size: 12px; }
  .art-meta { text-align: left; margin-top: -8px; }
}

@media (max-width: 420px) {
  .art-method-grid { grid-template-columns: 1fr; }
}


/* ---- 執筆者情報 ---- */
.author-box {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  margin: 34px 0;
  padding: 22px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.author-box-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--white);
  background: var(--navy);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
}

.author-box-label {
  display: block;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.author-box strong { color: var(--navy); }

.author-box p {
  margin: 6px 0 8px;
  color: var(--subtext);
  font-size: 13px;
  line-height: 1.8;
}

.author-box a {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

/* ---- クリニック特徴タグ(順位バッジの代替) ---- */
.art-clinic-tag {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 12px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

/* ---- 仕様・比較の囲みテーブル ---- */
.art-fact-box {
  overflow-x: auto;
  margin: 16px 0 10px;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #cceee8;
  border-radius: 8px;
}
.art-fact-box .art-table { min-width: 0; }
.art-fact-box .art-table th { white-space: normal; }

/* ============================================
   ▼ ブランド配色リニューアル:ミント×ラベンダー(明るいパステル)
   記事レイアウト(.art-*)を末尾で上書き
   ============================================ */

/* ---- ヒーロー:濃紺の塗りつぶし → 明るいミント→ラベンダーのグラデ ---- */
.art-hero {
  background: linear-gradient(135deg, #e9faf6 0%, #eef0fb 55%, #f4eefb 100%);
  color: #3f4d57;
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(150, 170, 200, 0.18);
}
.art-hero h1 { color: #35434f; }
.art-hero-sub { color: #4d5a64; opacity: 1; }
.art-hero-note {
  background: rgba(255, 255, 255, 0.66);
  color: #4d5a64;
  border: 1px solid rgba(139, 116, 196, 0.18);
}
.art-hero-tags span {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(111, 201, 189, 0.5);
  color: #3f7f76;
}
.art-hero-cta-mini {
  background: linear-gradient(180deg, #ff8547 0%, #ff6b35 100%);
  color: #fff;
  border: 1px solid #ff6b35;
  box-shadow: 0 8px 18px rgba(255, 107, 53, 0.30);
}

/* ---- 記事カード:角丸を少しふっくら ---- */
.art { border-radius: 20px; box-shadow: 0 14px 40px rgba(150, 170, 200, 0.10); }

/* ---- 見出し ---- */
.art h2 {
  color: #39495a;
  border-left: 5px solid #6fc9bd;
  border-bottom: 2px solid #eef4f2;
}
.art h3 {
  color: #3f7f76;
  background: #eafaf7;
  border-left: 3px solid #8b74c4;
}
.art h4 { color: #2f9e90; }

/* ---- 目次:やわらかいシルバーグレー ---- */
.art-toc { background: #f4f6f8; border: 1px solid #e3e8ec; border-radius: 12px; }
.art-toc-title { color: #5c6b76; border-bottom: 2px solid #cbd4da; }
.art-toc ol li a { color: var(--text); border-bottom: 1px dotted #c3ccd2; }

/* ---- リード ---- */
.art-lead { background: #f7fdfc; border-left: 4px solid #6fc9bd; border-radius: 0 10px 10px 0; }
.art-lead ul li { border: 1px solid #d8f0eb; }

/* ---- ポイント/ステップ/チェックリスト系の差し色 ---- */
.art-point-box { background: #eafaf7; border-left-color: #6fc9bd; }
.art-point-box h4, .art-point-box > strong { color: #2f9e90; }
.art-checklist li::before { border-color: #8b74c4; }
.art-steps > li::before { background: linear-gradient(135deg, #6fc9bd, #8b74c4); }
.art-step-title { color: #2f9e90; }

/* ---- CTAボタン:目立つオレンジグラデ(トップと統一) ---- */
.art-cta-btn {
  background: linear-gradient(180deg, #ff8547 0%, #ff6b35 100%);
  border: 2px solid #ff6b35;
  box-shadow: 0 10px 22px rgba(255, 107, 53, 0.32);
}

/* ---- テーブル:濃紺ヘッダー → 濃いミント ---- */
.art-table th, .info-table th { background: #2f8f80; color: #fff; }
.art-table tr:nth-child(even) td { background: #f3fbf9; }

/* ---- FAQ:Q=ミント / A=ラベンダー ---- */
.art-faq details summary { color: #3f7f76; }
.art-faq details summary::before { background: #2f9e90; }
.art-faq details summary::after { color: #8b74c4; }
.art-faq details .art-faq-answer::before { background: #8b74c4; }

/* ---- 執筆者・バッジ ---- */
.author-box-icon { background: linear-gradient(135deg, #8b74c4, #6fc9bd); }
.author-box strong { color: #39495a; }
.art-rank-badge { background: linear-gradient(135deg, #8b74c4, #6fc9bd); }
.art-clinic-tag { color: #2f9e90; background: #e9faf6; }