@charset "utf-8";

/* ===================== Root / Base ===================== */
:root{
  --mint:#dff2ea;
  --mint-weak:#e7f9f3;
  --green:#11b08f;
  --text:#333;
  --max:1120px;
}

html, body{ overflow-x:hidden; }

section{
  max-width:1200px;
  margin:0 auto;
  font-family:"Zen Kaku Gothic New",sans-serif;
  line-height:1.8;
  color:#333;
}

.section-title{ text-align:-webkit-center; margin-top:80px; }
.section-title h2{
  text-align:center;
  font-size:28px;
  font-weight:bold;
  color:#fff;
  background:#00a58c;
  display:inline-block;
  padding:10px 30px;
  border-radius:4px;
  margin-bottom:40px;
}

.highlight{ color:#00a58c; font-weight:bold; }
.note{ font-size:14px; color:#666; margin:10px 0; }

/* ===================== Page Title / Hero ===================== */
.page_ttl {
  margin:0; color:#fff; font-weight:800;
  font-size:clamp(28px,5.2vw,56px);
  letter-spacing:.25em;
  -webkit-text-stroke:1px rgba(6,172,132,.9);
  text-shadow:0 0 17px #fff, 0 0 10px #fff;
}

.page_ttl_wrap{
  --hero:url("../img/disease_back.jpg");  /* ページごとに style で上書き可 */
  --tint:rgba(17,176,143,.35);
  position:relative; isolation:isolate;
  display:grid; place-items:center;
  min-height:clamp(220px,28vw,360px);
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background-image:var(--hero);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.is-sub .page_ttl_wrap{ padding:20px 16px; }
.page_ttl_wrap::before{
  content:""; position:absolute; inset:0;
  background:var(--tint); z-index:-1;
}

/* ===================== ごあいさつ ===================== */
.greeting{ padding:clamp(30px,4vw,50px) 0; }
.clinic-title{
  max-width:var(--max); margin:0 auto 40px; padding:0 20px;
  color:#0a6a55; font-weight:700; text-align:center; margin-top:60px;
  font-size:34px;
}
.greeting > .section-title{ max-width:var(--max); margin:0 auto 16px; padding:0 20px; }
.greeting .greeting-inner{ max-width:var(--max); margin:0 auto; padding:0 20px; }
.greeting-inner{ display:grid; grid-template-columns:360px 1fr; gap:clamp(18px,3vw,36px); align-items:start; }
.greeting-image img{ width:100%; height:auto; display:block; }
.greeting-text{ line-height:1.9; color:var(--text); }
.greeting-text p{ font-size:17px; }
.greeting .highlight{ color:#17b692; font-weight:700; font-size:18px; }
@media (max-width:900px){
  .greeting-inner{ grid-template-columns:1fr; }
  .greeting-image{ order:-1; text-align:center; }
  .greeting-image img{ max-width:260px; margin:0 auto; }
  .clinic-title{ margin:0 auto 20px; margin-top:0; font-size:22px; }
  .greeting .highlight{ font-size:17px; }
  .greeting-text p{ font-size:16px; }
}

/* ===================== 予約優先制 ===================== */
.reservation{ padding:clamp(28px,4vw,48px) 0; }
.reservation-title{
  max-width:var(--max); margin:0 auto 40px; padding:0 20px;
  color:#0a6a55; font-weight:700; text-align:center; font-size:34px;
}
.yoyaku_flex{
  max-width:var(--max); margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr 360px; gap:clamp(18px,3vw,36px); align-items:start;
}
.yoyaku_txt{ line-height:1.9; }
.yoyaku_txt .highlight{ font-size:18px; }
.yoyaku_txt p{ font-size:17px; }
.reservation-image img{ width:100%; height:auto; display:block; }
@media (max-width:900px){
  .yoyaku_flex{ grid-template-columns:1fr; }
  .reservation-image{ max-width:330px; margin:0 auto; }
  .reservation-title{ margin:0 auto 20px; margin-top:0; font-size:22px; }
  .yoyaku_txt .highlight{ font-size:17px; }
  .yoyaku_txt p{ font-size:16px; }
}

/* ===================== CTA ===================== */
.cta-reserve{
  --pink:#fde7e3; --card:#fff; --accent:#17b692; --shadow:0 10px 24px rgba(0,0,0,.06);
  position:relative;
  padding:clamp(40px,6vw,80px) 20px;
  background-color:var(--pink);
  background-image:url("../img/cta_back.jpg");
  background-repeat:no-repeat; background-position:center; background-size:cover;
  overflow:hidden; margin-bottom:100px;
}
.cta-reserve__inner{
  max-width:550px; margin:0 auto; background:var(--card); border-radius:18px;
  padding:clamp(26px,4.5vw,42px) clamp(24px,6vw,60px);
  text-align:center; box-shadow:var(--shadow);
}
.cta-reserve__lead{
  margin:0 0 .35em; font-size:clamp(16px,1.9vw,20px); font-weight:700; color:var(--accent); letter-spacing:.1em;
}
.cta-reserve__tel{ margin:0; font-size:clamp(26px,4.2vw,36px); font-weight:700; letter-spacing:.15em; line-height:1.2; }
.cta-reserve__tel a{ color:var(--accent); text-decoration:none; outline:none; }
.cta-reserve__tel a:focus-visible{ box-shadow:0 0 0 3px rgba(23,182,146,.25); border-radius:6px; }

/* ===================== 診療時間 ===================== */
.clinic-hours{
  background:var(--mint);
  padding:clamp(40px,7vw,80px) 20px;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow-x:clip; margin-bottom:150px;
}
.clinic-hours__title{
  text-align:center; color:var(--green); font-weight:800;
  font-size:clamp(22px,3.3vw,34px); letter-spacing:.2em; margin:0 0 22px;
}
.clinic-hours__card{
  max-width:980px; width:100%; margin:0 auto; background:#fff;
  border:3px solid var(--green); border-radius:8px; padding:clamp(18px,3vw,40px);
}
.hours-table{ width:100%; border-collapse:collapse; table-layout:fixed; margin:0 auto; font-size:17px; }
.hours-table th,.hours-table td{ text-align:center; padding:clamp(10px,1.8vw,16px) 8px; vertical-align:middle; word-break:keep-all; }
.hours-table thead th{ font-weight:700; color:#444; }
.hours-table .timecol,.hours-table tbody th[scope="row"]{ width:20%; color:#555; font-weight:700; }
.hours-table tbody td{ font-size:clamp(18px,2.6vw,22px); line-height:1; }
.hours-table tbody .row-line{ border-top:2px solid #58cbb7; border-bottom:2px solid #58cbb7; padding-left:30px; }
.clinic-hours__note{ font-size:13px; color:#666; margin:clamp(10px,2vw,16px) 0 4px; padding-left:35px; }
@media (max-width:560px){
  .clinic-hours__card{ overflow-x:auto; }
  .hours-table{ min-width:560px; }
}

/* ===================== 院内紹介 ===================== */
.facility{ margin-bottom:200px; }
.facility__grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.5vw,28px); list-style:none; padding:0;
}
.facility-card{
  background:var(--mint-weak); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column; padding:10px;
}
.facility-card>img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.facility-card__text{ padding:12px 0 16px; color:#333; line-height:1.8; }
.facility-card__text h3{ font-size:18px; font-weight:700; margin:0 0 4px; }
.facility-card__text p{ font-size:16px; line-height:22px; }
@media (max-width:1024px){ .facility__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:769px){ .facility{ max-width:var(--max); margin:0 auto; padding:0 20px; } }
@media (max-width:640px){
  .facility__grid{ grid-template-columns:1fr; }
  .facility-card__text h3{ font-size:17px; }
}

/* ===================== Map ===================== */
.map-wrap{ width:100%; }
.map-wrap iframe{ width:100%; aspect-ratio:16/9; height:auto; border:0; display:block; }

/* ===================== Pros & Cons ===================== */
.pc-section{
  width:min(1080px,92vw);
  margin:100px auto 60px;
  color:#333;
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
}
.pc-title{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  text-align:center; font-weight:800;
  font-size:clamp(17px,3.6vw,32px);
  letter-spacing:.12em; color:#344054;
  margin:0 0 60px;
}
.pc-title__icon{ width:28px; height:28px; object-fit:contain; vertical-align:middle; display:inline-block; }
.pc-board{
  background:#e9fbf5; border-radius:26px;
  padding:clamp(18px,3.6vw,34px);
  padding-bottom:100px;
}

/* ===================== 歯周病（チェックリスト） ===================== */
.perio{ max-width:1200px; margin:0 auto 120px; margin-top: 80px;} /* 共通コンテナ */
.perio-flex{ display:flex; flex-wrap:wrap; gap:40px; align-items:center; }
.perio-text{ flex:2 1 520px; font-size:15px; line-height:2; color:var(--text); }
.perio-check{ flex:1 1 300px; position:relative; }
.perio-bubble{ margin-bottom:30px; }
.txt_green{ color:#02c79f; }
.perio-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 26px;
}
.perio-list li{
  position:relative; font-size:17px; color:var(--text);
  padding-left:38px; text-wrap:nowrap;
}
.perio-list li::before{
  content:""; position:absolute; left:7px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:2px solid #727272; border-radius:3px; background:#fff;
}
.perio-list li::after{
  content:""; position:absolute; left:12px; top:50%;
  width:10px; height:6px; transform:translateY(-50%) rotate(-45deg);
  border-left:2px solid #00b8a9; border-bottom:2px solid #00b8a9;
}
@media (max-width:768px){
  .perio-flex{ flex-direction:column; gap:28px; }
  .perio-list{ grid-template-columns:1fr; gap:12px; }
  .perio-text{ font-size:16px; flex: 2 1 450px; padding: 0 20px;}
  .perio-bubble{ font-size:14px; }
  .perio { margin: 0 auto 80px;}
  .denture-lead {text-align: left;}
}

/* ===================== 歯周病の症状（タイムライン風） ===================== */
.perio-states{
  max-width:1200px; margin:80px auto; padding:0 20px;
  position:relative; color:#333; padding-bottom:200px;
}
.perio-states__title{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:clamp(22px,2.6vw,28px); font-weight:700; margin:0 0 18px; letter-spacing:.12em;
}
.perio-states__clover{ width:28px; height:auto; }
.perio-states__lead{
  text-align:center; max-width:900px; margin:0 auto 26px; line-height:2; color:#2f6e63;
}
.perio-arrow{
  position:absolute; top:220px; right:8%; z-index:0; pointer-events:none; max-width:18%;
}
.perio-arrow img{ width:100%; height:auto; display:block; opacity:.9; }
.perio-states__list{ position:relative; display:grid; gap:30px; z-index:1; isolation:isolate; }
.perio-state{
  display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:center;
}
.perio-state__media{ display:grid; place-items:center; background:#fff; }
.perio-state__media img{ height:auto; display:block; }
.perio-state__body{
  background:#e6fff9; padding:10px 20px; line-height:2; position:relative; z-index:1; padding-bottom:67px;
}
.perio-state__head{ margin:0 0 6px; font-size:clamp(16px,2.2vw,18px); color:#00a58c; font-weight:700; }
@media (max-width:900px){
  .perio-state{ grid-template-columns:200px 1fr; }
  .perio-arrow{ right:4%; width:150px; top:240px; }
  .perio-states {padding-bottom: 0px;}
}
@media (max-width:680px){
  .perio-state{ grid-template-columns:1fr; gap:12px; }
  .perio-state__media{ order:-1; }
  .perio-arrow{ position:static; width:110px; margin:16px auto 0; opacity:.7; display: none;}
}

/* ===================== Flow（歯周病治療の流れ） ===================== */
.flow{ max-width:var(--max,1200px); margin:80px auto; color:var(--text,#333); }
.flow__title{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:clamp(20px,2.6vw,32px); letter-spacing:.12em;
  margin:0 0 40px; text-align:center;
}
.flow__title-icon{ width:28px; height:auto; }
.flow__list{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(34px,1vw,46px); flex-wrap:nowrap; list-style:none; margin:0; padding:0;
}
.flow__item{ text-align:center; }
.flow__label{ margin:0 0 14px; font-size:clamp(16px); color:#2b2b2b; letter-spacing:.04em; }
.flow__icon{ width:clamp(64px,7.2vw,92px); height:auto; display:block; margin:0 auto; }
.flow__divider{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.flow__divider img{ display:block; height:clamp(90px,25vw,230px); width:auto; }
@media (max-width:900px){
  .flow__list{ flex-wrap: wrap; row-gap: 25px; column-gap: 0px;}
  .flow__divider{ display:none; }
  .flow__item{ width:calc(33.333% - 16px); }
}
@media (max-width:560px){ .flow__item{ width:calc(50% - 16px); } }

/* ===================== 歯周病予防（カード2列） ===================== */
.perio-panel{
  position:relative; background-color:#e6fff9;
  padding:80px 150px 140px;
}
.perio-title{
  margin:0 0 26px; text-align:center; font-weight:800; letter-spacing:.16em;
  color:#295e54; font-size:clamp(18px,2.2vw,26px); position:relative;
}
.perio-title::before{
  content:"✿"; display:block; font-size:20px; color:var(--green); margin-bottom:6px;
}
.perio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.perio-card{
  border-radius:16px; padding:20px 40px;
  box-shadow:0 10px 24px rgba(0,0,0,.06); line-height:2; color:#3b3b3b;
}
.perio-card__head{
  text-align:center; margin:4px 0 12px; font-size:18px; font-weight:700; color:#2f7e72; letter-spacing:.06em;
}
.perio-card--pink{ background:#f7e3df; border:1px solid rgba(255,137,115,.18); }
.perio-card--green{ background:#e6f1dd; border:1px solid rgba(84,170,120,.18); padding-bottom:100px; }
@media (max-width:900px){
  .perio-grid{ grid-template-columns:1fr; gap:22px; }
	.perio-panel { position: relative; background-color: #e6fff9; padding: 50px 20px 50px;}
}

/* ===================== PMTCの効果（5本カード） ===================== */
.pmtc{ max-width:1200px; margin:0 auto 110px; }
.pmtc__title{
  position:relative; margin:0 auto 12px; text-align:center;
  font-weight:800; letter-spacing:.18em; color:#2f3f39; font-size:clamp(20px,2.4vw,30px);
}
.pmtc__title::before{
  content:"✿"; display:block; color:var(--green,#11b08f); font-size:22px; margin-bottom:10px;
}
.pmtc__lead{ text-align:center; color:#1fae95; font-size:14px; line-height:2; margin:0 0 28px; }

.pmtc__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }

.pmtc__card{
  position:relative; background:#e6fff9;
  padding:70px 20px 20px; line-height:2; color:#3b3b3b; overflow:hidden;
}
.pmtc__card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:146px; background:#e2e2e2;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%); z-index:2;
}
.pmtc__head{
  position:relative; z-index:3; text-align:center;
  margin:-64px 0 10px; font-size:16px; font-weight:700; color:#2a9a86; letter-spacing:.06em; line-height:1.7;
}
.pmtc__effect{
  display:block; font-size:17px; letter-spacing:.16em; color:#20b19a; margin-bottom:70px;
}
.pmtc__card p{ position:relative; z-index:3; font-size:17px; color:#555; }

@media (max-width:1100px){ .pmtc__grid{ grid-template-columns:repeat(4,1fr); .pmtc__effect {margin-bottom: 40px;}}
@media (max-width:920px){ .pmtc__grid{ grid-template-columns:repeat(3,1fr); } .pmtc {padding: 0 20px;} p{font-size:16px;}}
@media (max-width:680px){ .pmtc__grid{ grid-template-columns:repeat(2,1fr); } .pmtc__card::before { height: 120px;}}
@media (max-width:480px){ .pmtc__grid{ grid-template-columns:1fr; } }

	
/* ===================== Google Map ===================== */
/* セクションの器（任意） */
.map-section{ max-width: var(--max, 1120px); margin: 0 auto 110px; padding: 0 20px; }

/* 既存：.map-wrap と iframe を置き換え */

.map-wrap iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;   /* 近代ブラウザはこれで高さ確保 */
  height:auto;
  border:0;
}

/* 古いブラウザ対策（aspect-ratio 非対応） */
@supports not (aspect-ratio: 16/9){
  .map-wrap iframe{ height: 56.25vw; min-height: 320px; }
}

/* 全幅で見せたい場合は .map--full を親に付与 */
.map--full{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding: 0 20px;
}
.map--full .map-wrap{
  border-radius: 0;
  box-shadow: none;
}