/*
Theme Name: Dental Media
Description: 歯科特化型の医院紹介メディア用テーマ（医院紹介・ドクター紹介・医療知識ブログ）。非営利・情報提供目的のシンプル構成。
Version: 2.7.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dental-media
*/

:root {
  --c-main: #1f6f8b;
  --c-main-dark: #154f63;
  --c-accent: #e8f3f6;
  --c-text: #2b2f33;
  --c-sub: #6b7680;
  --c-line: #dde4e8;
  --c-bg: #ffffff;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.85;
  font-size: 16px;
}

a { color: var(--c-main); }
a:hover { color: var(--c-main-dark); }
img { max-width: 100%; height: auto; }

.container { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ヘッダー */
.site-header { border-bottom: 1px solid var(--c-line); background: #fff; position: sticky; top: 0; z-index: 10; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; flex-wrap: wrap; gap: 8px; }
.site-title { font-size: 1.2rem; font-weight: 700; text-decoration: none; color: var(--c-main-dark); }
.site-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--c-text); font-size: .95rem; }
.site-nav a:hover { color: var(--c-main); }

/* ヒーロー */
.hero { background: var(--c-accent); padding: 56px 0; text-align: center; }
.hero h1 { font-size: 1.8rem; margin: 0 0 12px; color: var(--c-main-dark); }
.hero p { margin: 0 auto; max-width: 620px; color: var(--c-sub); }

/* セクション */
.section { padding: 48px 0; }
.section h2 { font-size: 1.4rem; margin: 0 0 24px; padding-left: 12px; border-left: 5px solid var(--c-main); }
.section-more { text-align: right; margin-top: 16px; }

/* カード */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.card a { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-thumb { aspect-ratio: 16 / 9; background: var(--c-accent); display: flex; align-items: center; justify-content: center; color: var(--c-sub); font-size: .85rem; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 14px 16px 18px; }
.card-title { font-weight: 700; margin: 0 0 6px; line-height: 1.5; }
.card-meta { font-size: .85rem; color: var(--c-sub); }
.tag { display: inline-block; font-size: .78rem; padding: 2px 10px; border-radius: 99px; background: var(--c-accent); color: var(--c-main-dark); margin: 0 6px 6px 0; text-decoration: none; }

/* 記事 */
.entry { padding: 40px 0 56px; }
.entry-title { font-size: 1.7rem; line-height: 1.5; margin: 0 0 12px; }
.entry-meta { color: var(--c-sub); font-size: .88rem; margin-bottom: 24px; }
.entry-content h2 { font-size: 1.35rem; margin: 2.2em 0 .8em; padding: .4em .8em; background: var(--c-accent); border-left: 5px solid var(--c-main); }
.entry-content h3 { font-size: 1.15rem; margin: 1.8em 0 .6em; border-bottom: 2px solid var(--c-line); padding-bottom: .2em; }

/* 医院情報テーブル */
.clinic-info { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95rem; }
.clinic-info th, .clinic-info td { border: 1px solid var(--c-line); padding: 10px 14px; text-align: left; vertical-align: top; }
.clinic-info th { background: var(--c-accent); width: 30%; white-space: nowrap; }

/* 注意書き */
.notice { background: #fafafa; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 18px; font-size: .85rem; color: var(--c-sub); margin: 32px 0; }
.notice strong { color: var(--c-text); }

/* フッター */
.site-footer { background: #1d2a30; color: #cfd8dc; padding: 36px 0; font-size: .85rem; margin-top: 48px; }
.site-footer a { color: #cfd8dc; }
.site-footer .footer-links { list-style: none; padding: 0; margin: 0 0 16px; display: flex; gap: 20px; flex-wrap: wrap; }

/* ページネーション */
.pagination { text-align: center; margin: 32px 0 0; }
.pagination .page-numbers { display: inline-block; padding: 6px 12px; border: 1px solid var(--c-line); border-radius: 6px; margin: 0 2px; text-decoration: none; }
.pagination .current { background: var(--c-main); color: #fff; border-color: var(--c-main); }

@media (max-width: 600px) {
  .hero h1 { font-size: 1.4rem; }
  .entry-title { font-size: 1.4rem; }
  .clinic-info th { width: 36%; white-space: normal; }
}

/* 検索フォーム・診療内容一覧 */
.hero-search { margin: 20px auto 0; max-width: 460px; }
.hero-search form { display: flex; gap: 8px; }
.hero-search input[type="search"] { flex: 1; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 99px; font-size: 1rem; }
.hero-search input[type="submit"] { padding: 10px 20px; border: 0; border-radius: 99px; background: var(--c-main); color: #fff; cursor: pointer; }
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.term-item { display: block; text-align: center; padding: 14px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; font-weight: 600; background: #fff; }
.term-item:hover { background: var(--c-accent); }

/* 監修者・関連記事 */
.sup-box { border: 1px solid var(--c-line); border-left: 5px solid var(--c-main); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 24px; background: #fafcfd; }
.sup-label { font-size: .78rem; color: var(--c-sub); }
.sup-name { margin: 2px 0 0; font-weight: 700; }
.sup-title { margin: 0; font-size: .88rem; color: var(--c-sub); }
.related-title { font-size: 1.2rem; margin: 40px 0 16px; }

/* v2: おすすめ・選定基準・一覧ページ */
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 4px; background: var(--c-main); color: #fff; margin-right: 4px; }
.criteria-box { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 18px; margin: 24px 0; background: #fafcfd; font-size: .92rem; }
.info-title { font-size: 1.2rem; margin-top: 2em; }
.list-title { font-size: 1.6rem; margin: 0 0 20px; }
.list-intro { margin-bottom: 28px; }

/* v2.1: ロゴ・背景画像・記事内画像 */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 44px; width: auto; height: auto; }
.hero.has-image { background-size: cover; background-position: center; position: relative; padding: 72px 0; }
.hero.has-image::before { content: ""; position: absolute; inset: 0; background: rgba(10, 40, 52, .35); }
.hero.has-image .container { position: relative; }
.hero.has-image h1, .hero.has-image p { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.entry-content img { border-radius: var(--radius); height: auto; }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption, .wp-caption-text { font-size: .85rem; color: var(--c-sub); text-align: center; margin-top: 6px; }
.entry-content .alignleft { float: left; margin: 0 1.2em 1em 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0 0 1em 1.2em; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
  .entry-content .alignleft, .entry-content .alignright { float: none; max-width: 100%; margin: 1em 0; }
}

/* v2.1 hero search layout fix */
.hero-search form{display:flex;justify-content:center;gap:8px}
.hero-search label{flex:1;max-width:480px}
.hero-search input[type="search"]{width:100%;box-sizing:border-box}

/* v2.1 article table */
.entry-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.entry-content th,.entry-content td{border:1px solid #d5e3e8;padding:10px 12px;text-align:left;vertical-align:top}
.entry-content th{background:#e8f3f6;color:#154f63;font-weight:700;white-space:nowrap}
.entry-content tr:nth-child(even) td{background:#fafcfd}
@media(max-width:640px){.entry-content table{display:block;overflow-x:auto;font-size:14px}}

/* v2.2 歯医者ガイドとは？ */
.about-section{background:var(--c-main-dark);color:#fff;padding:64px 0}
.about-section h2{color:#fff;text-align:center;border:0;padding:0;margin:0 0 32px;font-size:26px}
.about-section h2::before{display:none}
.about-inner{display:flex;gap:40px;align-items:center;max-width:900px;margin:0 auto}
.about-logo{flex:0 0 240px}
.about-logo img{display:block;width:240px;height:240px;border-radius:4px;background:#fff}
.about-text{flex:1}
.about-text p{margin:0 0 14px;line-height:2;font-size:15px}
.about-text p:last-child{margin-bottom:0}
@media(max-width:700px){.about-inner{flex-direction:column;gap:24px}.about-logo{flex:none}.about-logo img{width:180px;height:180px}}

/* v2.2 この記事を書いた人 */
.author-box{margin:40px 0}
.author-inner{display:flex;gap:24px;border:1px solid var(--c-line);border-radius:var(--radius);background:#fafcfd;padding:24px}
.author-avatar{flex:0 0 140px;text-align:center}
.author-avatar img{width:110px;height:110px;border-radius:50%}
.author-name{margin:8px 0 0;font-weight:700;font-size:14px;line-height:1.5}
.author-text{flex:1;font-size:14px;line-height:1.9;border-left:1px solid var(--c-line);padding-left:24px}
.author-text p{margin:0 0 10px}
.author-text p:last-child{margin:0}
@media(max-width:640px){.author-inner{flex-direction:column;align-items:center;text-align:left}.author-text{border-left:0;padding-left:0;border-top:1px solid var(--c-line);padding-top:16px}}

/* v2.3 トップのファーストビュー */
.hero.hero-v2{position:relative;overflow:hidden;padding:0;text-align:center;color:#fff;
  background:linear-gradient(120deg,#4f98c6 0%,#5ea5cc 50%,#70b5d8 100%)}
.hero-v2 .hero-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 78%,rgba(190,235,255,.30) 0,rgba(190,235,255,0) 38%),
    radial-gradient(circle at 84% 70%,rgba(190,235,255,.28) 0,rgba(190,235,255,0) 36%),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 55%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px}
.hero-v2 .hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,#4cc3e8,#8be0f2,#4cc3e8);opacity:.9}
.hero-v2 .hero-grid{position:relative;display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.3fr) minmax(220px,1fr);
  align-items:end;gap:8px;min-height:470px}
.hero-v2 .hero-main{align-self:center;padding:56px 0 64px}
.hero-v2 .hero-eyebrow{margin:0 0 14px;max-width:none;font-size:12px;letter-spacing:.32em;color:#8be0f2;font-weight:700}
.hero-v2 h1{margin:0 0 14px;color:#fff;font-size:2.4rem;line-height:1.45;letter-spacing:.02em;text-shadow:0 2px 14px rgba(8,40,80,.40)}
.hero-v2 h1 .nb{white-space:nowrap;color:#bdefff}
.hero-v2 .hero-sub{margin:0 auto;max-width:none;color:#e3f4fb;font-size:1.02rem}
.hero-v2 .hero-search{margin-top:26px}
.hero-v2 .hero-search input[type="search"]{border:0;box-shadow:0 4px 18px rgba(5,25,50,.28)}
.hero-v2 .hero-search input[type="submit"]{background:#2aa7d6;font-weight:700;box-shadow:0 4px 18px rgba(5,25,50,.28)}
.hero-v2 .hero-fig{position:relative;align-self:end;line-height:0}
.hero-v2 .hero-fig::before{content:"";position:absolute;left:50%;bottom:-18%;width:92%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2) 0,rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 72%)}
.hero-v2 .hero-fig img{position:relative;display:block;width:100%;max-width:370px;height:auto;filter:drop-shadow(0 6px 18px rgba(5,25,50,.35))}
.hero-v2 .hero-fig-left img{margin-left:auto}
.hero-v2 .hero-fig-right img{margin-right:auto}
@media(max-width:860px){
  .hero-v2 .hero-grid{grid-template-columns:1fr 1fr;min-height:0;gap:0}
  .hero-v2 .hero-main{grid-column:1/-1;grid-row:1;padding:40px 0 20px}
  .hero-v2 .hero-fig-left{grid-column:1;grid-row:2}
  .hero-v2 .hero-fig-right{grid-column:2;grid-row:2}
  .hero-v2 h1{font-size:1.6rem}
  .hero-v2 .hero-sub{font-size:.9rem}
  .hero-v2 .hero-fig img{max-width:210px}
  .hero-v2 .hero-fig-left img{margin:0 6px 0 auto}
  .hero-v2 .hero-fig-right img{margin:0 auto 0 6px}
}

/* v2.4 ボタン・検索カード */
.hero-v2 .hero-cta{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-v2 .btn{display:inline-block;padding:13px 26px;border-radius:99px;font-weight:700;font-size:.98rem;text-decoration:none;line-height:1.3;transition:transform .15s,box-shadow .15s}
.hero-v2 .btn:hover{transform:translateY(-2px)}
.hero-v2 .btn-primary{background:#fff;color:#1b5f95;box-shadow:0 6px 20px rgba(8,40,80,.28)}
.hero-v2 .btn-primary:hover{color:#134e7a}
.hero-v2 .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.hero-v2 .btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
.search-band{position:relative;z-index:3;margin-top:-30px}
.search-card{display:flex;align-items:center;gap:16px;max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--c-line);border-radius:99px;padding:10px 12px 10px 24px;box-shadow:0 8px 28px rgba(15,60,100,.16)}
.search-card-label{font-weight:700;font-size:14px;color:var(--c-main-dark);white-space:nowrap}
.search-card form{display:flex;flex:1;gap:8px;margin:0}
.search-card label{flex:1;margin:0}
.search-card input[type="search"]{width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--c-line);border-radius:99px;font-size:1rem}
.search-card input[type="submit"]{padding:10px 22px;border:0;border-radius:99px;background:var(--c-main);color:#fff;font-weight:700;cursor:pointer}
@media(max-width:640px){.search-card{border-radius:18px;flex-wrap:wrap;padding:14px;gap:8px}.search-card form{flex-basis:100%}}
@media(max-width:860px){.hero-v2 .hero-cta{margin-top:18px}.hero-v2 .btn{padding:11px 18px;font-size:.9rem}.search-band{margin-top:-24px}}
/* v2.5 明るい背景でも文字を読みやすくする */
.hero-v2 .hero-main h1{text-shadow:0 2px 16px rgba(10,50,95,.55)}
.hero-v2 .hero-sub{text-shadow:0 1px 10px rgba(10,50,95,.6);font-weight:500}
.hero-v2 .hero-eyebrow{color:#e3f6ff;text-shadow:0 1px 8px rgba(10,50,95,.5)}
/* v2.6 目標色に合わせて文字影を強化 */
.hero-v2 .hero-main h1{text-shadow:0 2px 14px rgba(15,70,115,.6),0 0 2px rgba(15,70,115,.35)}
.hero-v2 .hero-sub{text-shadow:0 1px 10px rgba(15,70,115,.7),0 0 2px rgba(15,70,115,.4)}

/* v2.7 診療内容（8項目・アイコンカード・中央寄せ） */
.section-center h2 { text-align: center; border-left: 0; padding-left: 0; margin-bottom: 28px; position: relative; padding-bottom: 14px; }
.section-center h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 48px; height: 4px; margin-left: -24px; border-radius: 2px; background: var(--c-main); }
.term-grid-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; margin: 0 auto; }
.term-grid-center .term-item { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 calc((100% - 42px) / 4); padding: 20px 8px 16px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.term-ico { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c-accent); color: var(--c-main); }
.term-ico svg { width: 46px; height: 46px; }
.term-name { font-size: 1rem; }
.term-grid-center .term-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30, 90, 120, .12); border-color: var(--c-main); background: #fff; }
@media (max-width: 860px) {
  .term-grid-center .term-item { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 480px) {
  .term-grid-center { gap: 10px; }
  .term-grid-center .term-item { flex-basis: calc((100% - 10px) / 2); padding: 16px 6px 14px; }
  .term-ico { width: 60px; height: 60px; }
  .term-ico svg { width: 36px; height: 36px; }
}