@charset "utf-8";
/*
 * 全ページ共通の装飾（水色・海・ハワイ調）。各ページの CSS の後に読み込む。
 * 装飾の線画は common/img/deco/ の SVG。色は水色系＋差し色の金だけに絞り、線は細く、数は控えめに。
 */
:root {
  --sea: #00a0ad;
  --sea-dark: #00838e;
  --lagoon: #7fd3dc;
  --foam: #e7f6f7;
  --mist: #f4fbfc;
  --line: #b5e1e6;
  --deco: url(/common/img/deco/plumeria.svg);
}

/* ===== 見出し：プルメリア＋波線 ===== */
h1.ldc-pagettl::before,
#wrapper .ldc-sec-h::before,
#wrapper .cont .inner.widthfix h2.ct-h2::before,
.detail #wrapper h1.dt-title::before {
  content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 10px;
  background: var(--deco) center / contain no-repeat;
}
h1.ldc-pagettl::after,
#wrapper .ldc-sec-h::after,
#wrapper .cont .inner.widthfix h2.ct-h2::after,
.detail #wrapper h1.dt-title::after,
.detail #wrapper .dt-block .inner.widthfix h2::after,
.detail #wrapper .dt-flow-sec .inner.widthfix h2::after {
  content: ""; display: block; width: 66px; height: 9px; margin: 14px auto 0;
  background: url(/common/img/deco/wave-line.svg) center / contain no-repeat;
}
#wrapper .ldc-sec-h::after { font-size: 0; letter-spacing: 0; color: transparent; }
#wrapper .cont .inner.widthfix h2.ct-h2 .ja { display: block; }

/* ===== 本文の枠（診療ページ） ===== */
.detail #wrapper .dt-block .dt-body {
  position: relative;
  padding: 44px 52px 34px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 110, 120, .10), inset 0 5px 0 #8fd6de;
}
/* 内側の点線（ロープのような二重枠） */
.detail #wrapper .dt-block .dt-body::before {
  content: ""; position: absolute; inset: 9px; border: 1px dashed #9fd6dd; border-radius: 14px; pointer-events: none;
}
/* 枠の角に留めたプルメリア（左右交互） */
.detail #wrapper .dt-block .dt-body::after {
  content: ""; position: absolute; top: -26px; right: 34px; width: 54px; height: 54px;
  background: var(--deco) center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 110, 120, .15));
}
.detail #wrapper .dt-block:nth-of-type(even) .dt-body::after { right: auto; left: 34px; transform: rotate(24deg); }
.detail #wrapper .dt-block .inner { max-width: 960px; }

/* 箇条書きの点を小さな花に */
.dt-list li { padding-left: 1.5em; }
.dt-list li::before {
  left: 0; top: .32em; width: 1.05em; height: 1.05em; border-radius: 0;
  background: var(--deco) center / contain no-repeat;
}

/* こんなお悩み：泡のような水色の枠 */
.dt-check {
  position: relative; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(160deg, #f4fbfc 0%, #e7f6f7 100%);
  box-shadow: 0 10px 28px rgba(0, 110, 120, .06);
}
.dt-check::after {
  content: ""; position: absolute; right: 18px; bottom: 12px; width: 52px; height: 36px; opacity: .55;
  background: url(/common/img/deco/shell.svg) center / contain no-repeat;
}

/* カード：角丸＋上に小さな波 */
.dt-card {
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 16px;
  padding-top: 34px;
  background: #fff url(/common/img/deco/wave-line.svg) 22px 16px / 44px 6px no-repeat;
  box-shadow: 0 6px 18px rgba(0, 110, 120, .06);
}

/* 治療の流れ */
.dt-flow li { border: 1px solid var(--line); border-radius: 16px; overflow: visible; }
.dt-flow .num { border-radius: 15px 0 0 15px; background: linear-gradient(160deg, #2bb3bd, #00838e); }
.dt-flow li:not(:last-child)::after { border-top-color: var(--lagoon); }

/* 費用の表 */
.dt-table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.dt-table th, .dt-table td { border: 0; border-bottom: 1px solid #e3f1f2; }
.dt-table tr:last-child th, .dt-table tr:last-child td { border-bottom: 0; }
.dt-table th { background: var(--mist); color: #0a4a50; }

/* よくある質問：1問ずつカードに */
.dt-faq details, .dt-faq details:first-child {
  margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 110, 120, .05); transition: border-color .2s, box-shadow .2s;
}
.dt-faq details[open] { border-color: var(--lagoon); box-shadow: 0 10px 24px rgba(0, 110, 120, .09); }
.dt-faq .q { left: 10px; background: linear-gradient(160deg, #2bb3bd, #00838e); }
.dt-faq summary { padding-left: 54px; }
.dt-faq .a { padding-left: 54px; }

/* ポイントの帯：金のプルメリアを左右に */
.detail #wrapper .point h4 { position: relative; display: inline-block; padding: 0 52px; }
.detail #wrapper .point h4::before, .detail #wrapper .point h4::after {
  content: ""; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  background: url(/common/img/deco/plumeria-gold.svg) center / contain no-repeat;
}
.detail #wrapper .point h4::before { left: 0; }
.detail #wrapper .point h4::after { right: 0; transform: rotate(30deg); }

/* WEB予約の帯・下の予約カード */
.dt-rsv-card { border-radius: 20px; }

/* ===== 診療一覧・院内紹介・アクセス ===== */
.svc-menu a, .svc-steps li, .svc-ins > div, .svc-bring,
.ct-item, .ct-equip-list li, .ac-guide > div, .ac-maps > div, .ac-notes li {
  border-radius: 16px;
}
.svc-steps li, .ac-guide > div {
  border: 1px solid var(--line); border-top: 1px solid var(--line);
  padding-top: 30px;
  background: #fff url(/common/img/deco/wave-line.svg) 18px 14px / 40px 6px no-repeat;
}
.svc-bring {
  position: relative; border: 1px solid var(--line); border-left: 1px solid var(--line);
  background: linear-gradient(160deg, #f4fbfc 0%, #e7f6f7 100%);
}
.svc-bring::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 46px; height: 32px; margin-top: -16px; opacity: .55;
  background: url(/common/img/deco/shell.svg) center / contain no-repeat;
}
.svc-sym-wrap { border-radius: 16px; }
.svc-sym { border-radius: 16px; overflow: hidden; }
.ac-hero { border-radius: 20px; overflow: hidden; }
.ac-table { border-radius: 16px; overflow: hidden; }
.ac-maps > div { border-color: var(--line); }
.ac-notes li { border-color: var(--line); }

/* ===== トップページ ===== */
.ft-item a, .ldc-menu a, .col-cards a { border-radius: 16px; overflow: hidden; }
/* 水色の帯（上端を波に） */
#wrapper .ft-section, #faq_section, #local_section {
  position: relative; background: #e7f6f7;
}
#wrapper .ft-section::after, #faq_section::after, #local_section::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 100%; height: 46px; pointer-events: none; transform: scaleY(-1);
  background: url(/common/img/deco/wave-edge.svg) center bottom / 100% 100% no-repeat;
}
#wrapper .ft-section::before, #faq_section::before, #local_section::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 46px; pointer-events: none;
  background: url(/common/img/deco/wave-edge.svg) center bottom / 100% 100% no-repeat;
}
#menu_section { background: #fff; }
#faq_section .top-faq { background: none; box-shadow: none; padding: 0; }

/* ===== コラム ===== */
.col-points { border-radius: 16px; }
.col-toc { border-radius: 16px; border-left: 0; border: 1px solid var(--line); background: var(--mist); }
.col-list { border-radius: 14px; border-color: var(--line); background: var(--mist); }
.col-eyecatch { border-radius: 18px; }
.col-table-wrap { border-radius: 14px; }
.col-body h2 {
  position: relative; padding-left: 58px; border-left: 0; border-radius: 14px;
  background: linear-gradient(135deg, #0a4a50 0%, #00838e 70%, #2bb3bd 100%);
  box-shadow: 0 8px 20px rgba(0, 110, 120, .14);
}
.col-body h2::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  background: url(/common/img/deco/plumeria-gold.svg) center / contain no-repeat;
}
.col-body h3 { border-bottom: 0; padding-bottom: 12px; background: url(/common/img/deco/wave-line.svg) left bottom / 54px 7px no-repeat; }
.col-author { border-radius: 18px; overflow: hidden; border-top: 0; border: 1.5px solid var(--line); }
.col-cta, .col-side-cta { border-radius: 18px; background: linear-gradient(135deg, #0a4a50 0%, #00838e 70%, #2bb3bd 100%); }
.col-side-toc { border-radius: 16px; border: 1.5px solid var(--line); }
.col-cards .cat { border-radius: 999px; }

/* ===== フッター：予約の帯の上に波 ===== */
.ldc-fcta { position: relative; }
.ldc-fcta::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 44px;
  background: url(/common/img/deco/wave-edge-sea.svg) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.ldc-footer { margin-top: 44px; }

@media screen and (max-width: 979px) {
  h1.ldc-pagettl::before, #wrapper .ldc-sec-h::before,
  #wrapper .cont .inner.widthfix h2.ct-h2::before, .detail #wrapper h1.dt-title::before { width: 24px; height: 24px; margin-bottom: 8px; }
  .detail #wrapper .dt-block .dt-body { padding: 34px 20px 22px; border-radius: 16px; }
  .detail #wrapper .dt-block .dt-body::before { inset: 6px; border-radius: 11px; }
  .detail #wrapper .dt-block .dt-body::after { width: 38px; height: 38px; top: -18px; right: 18px; }
  .detail #wrapper .dt-block:nth-of-type(even) .dt-body::after { left: 18px; }
  .dt-check { padding-bottom: 46px; }
  .detail #wrapper .point h4 { padding: 0 38px; }
  .detail #wrapper .point h4::before, .detail #wrapper .point h4::after { width: 24px; height: 24px; margin-top: -12px; }
  .svc-bring { padding-right: 60px; }
  .ldc-fcta::before, #wrapper .ft-section::before, #faq_section::before, #local_section::before,
  #wrapper .ft-section::after, #faq_section::after, #local_section::after { height: 26px; }
  .ldc-footer { margin-top: 26px; }
}

/* カード内のイラスト（インプラント・入れ歯・ブリッジの比較など） */
.dt-card-ill { display: block; width: 100%; height: auto; margin: -8px 0 14px; border-radius: 12px; }
.dt-card:has(.dt-card-ill) { padding-top: 22px; background-image: none; }
.dt-card:has(.dt-card-ill) .dt-card-ill { margin-top: 0; }
@media screen and (max-width: 979px) {
  /* スマホでは縦に並ぶので、上の余白を切って見せる（入れ歯は外した入れ歯の絵があるのでそのまま） */
  .dt-card-ill[src*="compare-implant"], .dt-card-ill[src*="compare-bridge"] { aspect-ratio: 600 / 340; object-fit: cover; object-position: center bottom; }
}

/* 虫歯の進行段階（C0〜C4）：5枚を横に並べる（スマホは2列） */
.dt-cards:has(.dt-card-ill[src*="caries-c"]) { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dt-card:has(.dt-card-ill[src*="caries-c"]) { padding: 16px 14px 18px; }
.dt-card:has(.dt-card-ill[src*="caries-c"]) h3 { font-size: 15px; }
.dt-card:has(.dt-card-ill[src*="caries-c"]) p { font-size: 13px; line-height: 1.75; }
.dt-card-ill[src*="caries-c"] { margin: 0 0 10px; }
@media screen and (max-width: 979px) {
  .dt-cards:has(.dt-card-ill[src*="caries-c"]) { grid-template-columns: 1fr; gap: 10px; }
  /* スマホは絵を左、説明を右に */
  .dt-card:has(.dt-card-ill[src*="caries-c"]) { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; align-items: start; padding: 14px 14px 14px 10px; }
  .dt-card-ill[src*="caries-c"] { grid-row: 1 / span 2; margin: 0; }
  .dt-card:has(.dt-card-ill[src*="caries-c"]) h3 { margin-bottom: 4px; }
}

/* ===== 診療メニュー：水色の背景に白いアイコン（トップ・ヘッダーのサブメニュー） ===== */
.ldc-menu-ic, .gn-ic {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, .28) 0 7%, transparent 7.5%),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, .18) 0 12%, transparent 12.5%),
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .22) 0 3%, transparent 3.5%),
    linear-gradient(140deg, #8fdbe3 0%, #4bbcc8 100%);
}
.ldc-menu .ldc-menu-ic { aspect-ratio: 41 / 26; }
.ldc-menu .ldc-menu-ic::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22%; opacity: .5;
  background: url(/common/img/deco/wave-edge.svg) center bottom / 100% 100% no-repeat;
}
.ldc-menu .ldc-menu-ic img { position: relative; z-index: 1; width: 46%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 90, 100, .18)); transition: transform .35s; }
.ldc-menu a:hover .ldc-menu-ic img { transform: translateY(-4px) scale(1.05); }
#headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list .gn-ic { flex: 0 0 64px; width: 64px; height: 44px; border-radius: 8px; }
#headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list .gn-ic img { position: static; flex: none; width: 34px; height: 34px; border-radius: 0; opacity: 1; object-fit: contain; }

/* ===== 下層ページ：上の写真に透過フィルタを重ね、その上にページの見出しを置く ===== */
#visual[data-hero] { display: flex; align-items: center; justify-content: center; overflow: hidden; }
#visual[data-hero]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 38, 44, .42) 0%, rgba(4, 38, 44, .58) 100%);
}
#visual[data-hero]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; opacity: .35;
  background: url(/common/img/deco/wave-edge.svg) center bottom / 100% 100% no-repeat;
}
.ldc-hero-in { position: relative; z-index: 1; width: 100%; padding: 0 16px; box-sizing: border-box; text-align: center; color: #fff; }
.ldc-hero-in .ldc-pagettl, .ldc-hero-in .dt-title { margin: 0; line-height: 1; text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
.ldc-hero-in .ldc-pagettl::before, .ldc-hero-in .dt-title::before {
  content: ""; display: block; width: 32px; height: 32px; margin: 0 auto 12px;
  background: url(/common/img/deco/plumeria-gold.svg) center / contain no-repeat;
}
.ldc-hero-in .ldc-pagettl::after, .ldc-hero-in .dt-title::after {
  content: ""; display: block; width: 66px; height: 9px; margin: 16px auto 0;
  background: url(/common/img/deco/wave-line-white.svg) center / contain no-repeat;
}
.ldc-hero-in .ldc-pagettl .en { display: block; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; font-size: 48px; letter-spacing: .14em; color: #fff; }
.ldc-hero-in .ldc-pagettl .ja { display: block; margin-top: 12px; font-size: 14px; letter-spacing: .3em; color: #fff; font-weight: bold; }
.ldc-hero-in .dt-title .en { display: block; margin-bottom: 12px; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .32em; color: #f5d066; }
.ldc-hero-in .dt-title .ja {
  display: block; font-size: 32px; line-height: 1.45; letter-spacing: .12em; color: #fff; font-weight: normal;
  font-family: font02, "SmartFont UI Proportional", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.detail #wrapper .cont.dt-intro { margin-top: 10px; }
@media screen and (max-width: 979px) {
  /* スマホは固定ヘッダー（55px）の下から見せる */
  #visual[data-hero] { height: 250px; padding-top: 55px; box-sizing: border-box; margin-bottom: 14px; }
  #visual[data-hero]::after { height: 18px; }
  .ldc-hero-in .ldc-pagettl::before, .ldc-hero-in .dt-title::before { width: 24px; height: 24px; margin-bottom: 8px; }
  .ldc-hero-in .ldc-pagettl::after, .ldc-hero-in .dt-title::after { margin-top: 10px; }
  .ldc-hero-in .ldc-pagettl .en { font-size: 32px; }
  .ldc-hero-in .ldc-pagettl .ja { font-size: 12px; margin-top: 8px; }
  .ldc-hero-in .dt-title .en { font-size: 11px; margin-bottom: 8px; }
  .ldc-hero-in .dt-title .ja { font-size: 19px; letter-spacing: .08em; }
}

/* ===== トップ：診療時間（表＋医院情報のカード） ===== */
#wrapper #section04.tp-hours { display: block; padding: 80px 0 90px; background: #fff; }
#wrapper #section04.tp-hours .inner.widthfix { max-width: 1080px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.tp-hours-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: stretch; }
.tp-hours-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 110, 120, .08); }
.tp-hours-table th, .tp-hours-table td { padding: 22px 6px; text-align: center; border-bottom: 1px solid #e3f1f2; font-size: 17px; }
.tp-hours-table tbody tr:last-child th, .tp-hours-table tbody tr:last-child td { border-bottom: 0; }
.tp-hours-table thead th { background: linear-gradient(135deg, #0a4a50, #00838e); color: #fff; font-weight: bold; letter-spacing: .1em; padding: 16px 6px; }
.tp-hours-table tbody th { width: 24%; font-family: "Oswald", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: .04em; color: #26231c; background: var(--mist); }
.tp-hours-table .o { color: #00a0ad; font-size: 22px; }
.tp-hours-table .x { color: #b9b3a6; font-size: 20px; }
.tp-hours-table td.today { background: #fffbea; }
.tp-hours-table thead th.today { background: #f5d066; color: #26231c; }
.tp-hours-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.tp-hours-notes li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--mist); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.5; }
.tp-hours-notes i { font-size: 22px; color: #00a0ad; }
.tp-hours-notes b { display: block; font-size: 12px; color: #00838e; }
.tp-hours-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 34px 30px 28px; border-radius: 20px; color: #fff;
  background: linear-gradient(150deg, #0a4a50 0%, #00838e 70%, #2bb3bd 100%); box-shadow: 0 16px 36px rgba(0, 90, 100, .18);
}
.tp-hours-card::after { content: ""; position: absolute; top: -18px; right: 26px; width: 44px; height: 44px; background: url(/common/img/deco/plumeria.svg) center / contain no-repeat; }
.tp-hours-card .name { margin-bottom: 6px; font-size: 21px; font-weight: bold; letter-spacing: .05em; }
.tp-hours-card .name span { display: block; margin-bottom: 4px; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .3em; color: #f5d066; }
.tp-hours-card .addr { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; }
.tp-hours-card .addr i { width: 1em; margin-top: 4px; color: #f5d066; }
.tp-hours-card .btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; padding: 12px; border-radius: 10px; color: #fff; text-decoration: none; font-weight: bold; font-size: 20px; line-height: 1.2; transition: opacity .2s; }
.tp-hours-card .btn:first-of-type { margin-top: 12px; }
.tp-hours-card .btn:hover { opacity: .88; }
.tp-hours-card .btn i { font-size: 22px; }
.tp-hours-card .btn small { display: block; font-size: 10px; font-weight: normal; opacity: .9; margin-bottom: 2px; }
.tp-hours-card .tel { background: #f0b100; font-family: "Oswald", "Arial Narrow", sans-serif; letter-spacing: .04em; }
.tp-hours-card .tel small { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.tp-hours-card .web { background: #e2583f; }
.tp-hours-card .link { margin-top: auto; padding-top: 8px; color: #fff; font-size: 13px; text-align: right; text-decoration: none; opacity: .9; }
.tp-hours-card .link:hover { text-decoration: underline; }

/* ===== トップ：メディア掲載情報 ===== */
#wrapper #media_section.tp-media { padding: 80px 0 90px; text-align: left; background: #e7f6f7; position: relative; }
#wrapper #media_section.tp-media::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 46px; pointer-events: none;
  background: url(/common/img/deco/wave-edge.svg) center bottom / 100% 100% no-repeat;
}
.tp-media-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
.tp-media-list a {
  display: flex; align-items: center; gap: 24px; height: 100%; box-sizing: border-box; padding: 24px 26px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 20px; color: #26231c; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 110, 120, .08); transition: transform .25s, box-shadow .25s;
}
.tp-media-list a:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 110, 120, .14); }
.tp-media-list .ph { flex: 0 0 190px; display: flex; align-items: center; justify-content: center; padding: 12px 6px; background: var(--mist); border-radius: 14px; }
.tp-media-list .ph img { display: block; max-width: 100%; height: auto; }
.tp-media-list .tx { display: flex; flex-direction: column; gap: 8px; }
.tp-media-list .mag { font-size: 22px; font-weight: bold; letter-spacing: .04em; line-height: 1.3; }
.tp-media-list .mag small { display: block; margin-top: 4px; font-size: 12px; font-weight: normal; letter-spacing: .1em; color: #00838e; }
.tp-media-list .d { font-size: 14px; line-height: 1.8; color: #4a463e; }
.tp-media-list .more { align-self: flex-start; padding: 5px 14px; border-radius: 999px; background: #00a0ad; color: #fff; font-size: 12px; font-weight: bold; }

/* ===== トップ：マタニティ歯科のバナーを中央に ===== */
#wrapper #bnr_section .inner.widthfix > a { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
#wrapper #bnr_section img { display: block; margin: 0 auto; }

@media screen and (max-width: 979px) {
  #wrapper #section04.tp-hours, #wrapper #media_section.tp-media { padding: 50px 0 60px; }
  #wrapper #section04.tp-hours .inner.widthfix { padding: 0 16px; }
  .tp-hours-grid { grid-template-columns: 1fr; gap: 20px; }
  .tp-hours-table th, .tp-hours-table td { padding: 14px 2px; font-size: 14px; }
  .tp-hours-table thead th { padding: 12px 2px; font-size: 13px; letter-spacing: 0; }
  .tp-hours-table tbody th { width: 30%; font-size: 15px; }
  .tp-hours-table .o { font-size: 17px; }
  .tp-hours-notes { grid-template-columns: 1fr; gap: 8px; }
  .tp-hours-card { padding: 28px 20px 22px; }
  #wrapper #media_section.tp-media .inner.widthfix { padding: 0 16px; }
  #wrapper #media_section.tp-media::before { height: 26px; }
  .tp-media-list { grid-template-columns: 1fr; gap: 14px; }
  .tp-media-list a { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .tp-media-list .ph { flex: none; }
  .tp-media-list .ph img { max-width: 220px; }
  .tp-media-list .mag { font-size: 19px; }
}

/* ===== 診療メニューの名前：太字の丸ゴシック・オレンジで可愛く ===== */
.ldc-menu a > span {
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Kosugi Maru", "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: bold; color: #f07e26; letter-spacing: .06em; border-top: 0;
  background: #fff;
}
#menu_section .ldc-menu a { display: flex; flex-direction: column; height: 100%; }
#menu_section .ldc-menu a > span { flex: 1; display: flex; align-items: center; justify-content: center; }
#menu_section .ldc-menu a > span { text-align: center; padding: 14px 38px 13px; font-size: 16px; line-height: 1.45; text-wrap: balance; }
.ldc-menu a > span::after {
  content: "\f105"; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center;
  font-size: 15px; color: #fff; background: #f7a24b; right: 12px;
}
.ldc-menu a:hover > span { color: #e2641a; }
.ldc-menu a:hover > span::after { background: #f07e26; }
.svc-menu a > span { padding-top: 18px; }
.svc-menu a > span::after { top: 30px; }
@media screen and (max-width: 979px) {
  #menu_section .ldc-menu a > span { padding: 12px 26px 10px 8px; font-size: 13px; letter-spacing: .02em; }
  .ldc-menu a > span::after { width: 18px; height: 18px; line-height: 18px; font-size: 13px; right: 6px; }
  .svc-menu a > span::after { top: 21px; }
}

/* 診療ページの見出し：診療名を大きく、地域（上大岡）は下の一行で */
.ldc-hero-in .dt-title .ja { font-size: 38px; letter-spacing: .14em; }
.ldc-hero-in .dt-title .area {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(255, 255, 255, .12);
  font-size: 13px; letter-spacing: .08em; line-height: 1.4; color: #fff; font-weight: normal;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.ldc-hero-in .dt-title .area i { color: #f5d066; }
@media screen and (max-width: 979px) {
  .ldc-hero-in .dt-title .ja { font-size: 24px; letter-spacing: .1em; }
  .ldc-hero-in .dt-title .area { margin-top: 10px; padding: 4px 12px; font-size: 11px; letter-spacing: .02em; }
}

/* 診療ページ上部の写真を角丸に */
.detail #wrapper .dt-intro .photo { border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 110, 120, .12); }
@media screen and (max-width: 979px) {
  .detail #wrapper .dt-intro .photo { border-radius: 14px; }
}
/* 監修・更新日の行：スマホで1〜2文字だけ次の行に残らないように */
.dt-meta span { text-wrap: balance; }

/* ===== 医療費控除シミュレーター（インプラント） ===== */
.tx-form { display: grid; gap: 12px; margin: 22px 0 18px; }
.tx-row { display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: 16px; padding: 14px 18px; background: var(--mist); border: 1px solid var(--line); border-radius: 14px; cursor: text; }
.tx-lbl { font-weight: bold; color: #26231c; line-height: 1.5; }
.tx-lbl small { display: block; margin-top: 2px; font-size: 12px; font-weight: normal; color: #6d675c; }
.tx-in { display: flex; align-items: center; gap: 8px; }
.tx-in input, .tx-in select {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 18px; text-align: right;
  border: 1.5px solid #b5e1e6; border-radius: 10px; background: #fff; color: #26231c; font-family: "Oswald", "Hiragino Kaku Gothic ProN", sans-serif;
}
.tx-in select { font-size: 15px; text-align: left; font-family: inherit; }
.tx-in input:focus, .tx-in select:focus { outline: none; border-color: #00a0ad; box-shadow: 0 0 0 3px rgba(0, 160, 173, .15); }
.tx-in em { font-style: normal; font-weight: bold; color: #4a463e; }
.tx-result { padding: 24px 26px; border-radius: 18px; color: #fff; background: linear-gradient(150deg, #0a4a50 0%, #00838e 70%, #2bb3bd 100%); box-shadow: 0 14px 32px rgba(0, 90, 100, .18); }
.tx-main { display: flex; align-items: baseline; justify-content: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed rgba(255, 255, 255, .4); }
.tx-main span { font-weight: bold; }
.tx-main b { font-family: "Oswald", sans-serif; font-size: 44px; font-weight: 500; color: #f5d066; letter-spacing: .02em; }
.tx-main em { font-style: normal; font-weight: bold; }
.tx-result ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.tx-result li { padding: 12px 14px; background: rgba(255, 255, 255, .12); border-radius: 12px; text-align: center; font-size: 13px; }
.tx-result li span { display: block; margin-bottom: 4px; opacity: .9; }
.tx-result li b { font-family: "Oswald", sans-serif; font-size: 26px; font-weight: 500; margin-right: 2px; }
.tx-result li.sum { background: #f07e26; }
.tx-msg { margin: 14px 0 0 !important; text-align: center; font-size: 13px; opacity: .95; }
.tx-notes { margin-top: 16px; }
.tx-notes li { position: relative; padding-left: 1.2em; font-size: 12.5px; line-height: 1.8; color: #6d675c; }
.tx-notes li::before { content: "※"; position: absolute; left: 0; }
@media screen and (max-width: 979px) {
  .tx-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .tx-main b { font-size: 36px; }
  .tx-result { padding: 20px 16px; }
  .tx-result ul { grid-template-columns: 1fr; }
  .tx-result li { display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .tx-result li span { margin: 0; }
}
/* 診療ページ本文の比較表 */
.dt-table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.dt-table-cmp { min-width: 520px; font-size: 14px; }
.dt-table-cmp tr:first-child th { background: linear-gradient(135deg, #0a4a50, #00838e); color: #fff; text-align: center; }
.dt-table-cmp th[scope="row"] { width: 22%; white-space: nowrap; }
/* 本文中のお悩みチェック */
.dt-check.dt-check-in { margin: 4px 0 22px; }
.dt-check.dt-check-in::after { display: none; }
/* 右寄せの写真の横に表やカードが回り込まないように */
.dt-body .dt-cards, .dt-body .dt-table-wrap, .dt-body .dt-h3 { clear: both; }
.dt-figure figcaption { text-wrap: balance; }
/* 本文中の呼びかけ（例：「そんな方にはオールオン4があります」） */
.dt-body .dt-callout {
  position: relative; margin: 26px 0 6px; padding: 22px 26px 22px 74px; border-radius: 16px;
  background: linear-gradient(135deg, #fff6ec 0%, #ffe9d4 100%); border: 1.5px solid #f7c48f;
  font-size: 18px; line-height: 1.7; color: #26231c;
}
.dt-body .dt-callout::before {
  content: "\f0a4"; font-family: FontAwesome; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; background: #f07e26; color: #fff; font-size: 18px;
}
.dt-body .dt-callout strong { color: #e2641a; }
@media screen and (max-width: 979px) {
  .dt-body .dt-callout { padding: 16px 16px 16px 60px; font-size: 15.5px; }
  .dt-body .dt-callout::before { left: 14px; width: 32px; height: 32px; line-height: 32px; font-size: 15px; }
}
/* 本文中の写真（オールオン4・セミナー写真など）も角丸に */
.dt-figure img { border-radius: 16px; }
.tx-in input::placeholder { color: #b9c9cb; opacity: 1; }

/* ===== メリット・デメリット（3列のカード。高さをそろえる） ===== */
.dt-body .dt-pc { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin: 6px 0 22px; }
.dt-pc-item { display: flex; flex-direction: column; padding: 0 0 18px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 110, 120, .06); }
.dt-pc-item h4 { margin: 0 0 14px; padding: 12px 10px; text-align: center; font-size: 17px; font-weight: bold; letter-spacing: .08em; color: #fff; background: linear-gradient(135deg, #0a4a50, #00838e); }
.dt-pc-item .lbl { margin: 0 16px 8px !important; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: bold; align-self: flex-start; }
.dt-pc-item .lbl i { margin-right: 6px; }
.dt-pc-item .lbl.pro { color: #00838e; background: #e3f5f7; }
.dt-pc-item .lbl.con { margin-top: 14px !important; color: #c0533a; background: #fdece6; }
.dt-pc-item ul { margin: 0 16px; }
.dt-pc-item li { position: relative; padding-left: 1.4em; margin-bottom: 6px; font-size: 14px; line-height: 1.7; }
.dt-pc-item ul.pro li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: #00a0ad; font-size: 13px; }
.dt-pc-item ul.con li::before { content: "\f071"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: #e07a5f; font-size: 12px; }
@media screen and (max-width: 979px) {
  .dt-body .dt-pc { grid-template-columns: 1fr; gap: 12px; }
}
/* 3列の「メリット」「デメリット」の位置を横でそろえる（subgrid） */
@media screen and (min-width: 980px) {
  .dt-body .dt-pc { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .dt-pc-item { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  .dt-pc-item .lbl { justify-self: start; }
}
/* 比較表はスマホでも表の形のまま（横にスクロール） */
.dt-table-cmp { display: table !important; width: 100%; }
.dt-table-cmp tr { display: table-row !important; }
.dt-table-cmp th, .dt-table-cmp td { display: table-cell !important; width: auto !important; }
.dt-table-cmp th[scope="row"] { width: 18% !important; }
@media screen and (max-width: 979px) {
  .dt-table-cmp { min-width: 0; font-size: 13px; }
  .dt-table-cmp th, .dt-table-cmp td { padding: 10px 10px; }
  /* 4列以上の表だけ横スクロールにする */
  .dt-table-cmp:has(tr:first-child > :nth-child(4)) { min-width: 640px; }
  .dt-table-wrap:has(tr:first-child > :nth-child(4))::after { content: "← 横にスクロールできます →"; display: block; margin-top: 6px; text-align: center; font-size: 11px; color: #8a8478; }
}
.dt-table-cmp { table-layout: fixed; }
/* セラミック治療：素材のカード（4枚。PCは4列、スマホは2列） */
.dt-cards:has(.dt-card-ill[src*="material-"]) { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dt-card:has(.dt-card-ill[src*="material-"]) { padding: 14px 14px 18px; }
.dt-card:has(.dt-card-ill[src*="material-"]) .dt-card-ill { margin: 0 0 12px; aspect-ratio: 500 / 304; object-fit: cover; border-radius: 10px; }
.dt-card:has(.dt-card-ill[src*="material-"]) h3 { font-size: 16px; }
.dt-card:has(.dt-card-ill[src*="material-"]) p { font-size: 13.5px; line-height: 1.75; }
@media screen and (max-width: 979px) {
  .dt-cards:has(.dt-card-ill[src*="material-"]) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dt-card:has(.dt-card-ill[src*="material-"]) { padding: 10px 10px 14px; }
  .dt-card:has(.dt-card-ill[src*="material-"]) h3 { font-size: 13.5px; letter-spacing: 0; }
  .dt-card:has(.dt-card-ill[src*="material-"]) p { font-size: 12.5px; }
}
/* メリット・デメリットが2つのとき（ホワイトニングなど）は2列 */
.dt-body .dt-pc:has(> .dt-pc-item:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
/* 本文中の流れ（STEP） */
.dt-body .dt-flow-in { clear: both; margin: 4px 0 26px; }
.dt-body .dt-flow-in li { padding: 14px 20px 14px 120px; margin-bottom: 20px; min-height: 0; }
.dt-body .dt-flow-in .num { width: 96px; font-size: 13px; }
.dt-body .dt-flow-in h4 { margin: 0 0 2px; font-size: 16px; font-weight: bold; color: #26231c; }
.dt-body .dt-flow-in p { margin: 0; font-size: 14px; line-height: 1.75; }
@media screen and (max-width: 979px) {
  .dt-body .dt-pc:has(> .dt-pc-item:nth-child(2):last-child) { grid-template-columns: 1fr; }
  .dt-body .dt-flow-in li { padding: 42px 14px 12px; }
  .dt-body .dt-flow-in .num { width: auto; right: 0; height: 30px; font-size: 12px; }
  .dt-flow .num { border-radius: 15px 15px 0 0; }
  .dt-body .dt-flow-in h4 { font-size: 14.5px; }
  .dt-body .dt-flow-in p { font-size: 13px; }
}
.dt-body .dt-note-box { clear: both; display: flex; gap: 10px; margin: 8px 0 14px; padding: 14px 18px; border-radius: 12px; background: #fdf1ec; border: 1px solid #f3c9b8; color: #7a3b28; font-size: 14px; line-height: 1.75; }
.dt-body .dt-note-box i { margin-top: 4px; color: #e07a5f; }
/* 院長からのメッセージ（診療ページ） */
.dt-body.dt-msg { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; }
.dt-msg-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 10px 26px rgba(0, 110, 120, .18); }
.dt-msg-txt p { margin-bottom: 1em; }
.dt-msg-txt .sign { margin: 6px 0 0; text-align: right; font-size: 13px; color: #6d675c; }
.dt-msg-txt .sign b { margin-left: 10px; font-size: 18px; color: #26231c; letter-spacing: .1em; }
@media screen and (max-width: 979px) {
  .dt-body.dt-msg { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .dt-msg-photo { width: 140px; height: 140px; }
  .dt-msg-txt { justify-self: stretch; }
}