@charset "utf-8";

: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:100px; }
.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;
}
.welcome{ max-width:100%; height:auto; display:block; margin:0 auto; }

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

/* ページタイトル（ヒーロー） */
.page_ttl_wrap{
  --hero:url("../img/kids_top_back.jpg");
  --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;
}
.page_ttl_wrap::before{
  content:"";
  position:absolute; inset:0;
  background:var(--tint);
  z-index:-1;
}
.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;
}

/* 見出し（緑帯） */
.section-header {
  background-color: #00b8a9;
  color: #fff;
  text-align: center;
  padding: 20px 10px;
  font-size: 24px;
  font-weight: bold;
}

/* 黄色の枠 */
.policy-section {
  max-width: 1000px;
  margin: 0 auto 60px;
  background: #fff9e8;
  border-radius: 16px;
  padding: 40px 50px;
  margin-top: 60px;
}

/* h2（黄色枠の中） */
.policy-title {
  font-size: 26px;
  font-weight: bold;
  color: #00796b;
  line-height: 1.8;
  max-width: max-content;
  margin: 0 auto;
}

/* flex部分 */
.policy-flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* 左側の画像 */
.policy-image {
  flex: 1 1 250px;
  text-align: center;
}
.policy-image img {
  width: 300px;
  height: auto;
}

/* 右側のテキスト */
.policy-text { flex: 2 1 435px; }
.policy-text p { line-height: 2; }

/* ====== 子どもの歯を守るために ====== */
.kids-protect{
  max-width: 1080px;
  margin: 0 auto 80px;
  padding: 0 20px;
  margin-top: 60px;
}
.point-list{ display:flex; flex-direction:column; gap:28px; }
.point-item{ padding:18px 18px 14px; }

/* タイトル行：先頭アイコン＋見出しテキスト＋末尾マーク */
.point-item__title{
  display:flex;
  align-items:center;       /* ← 先頭/末尾の画像が上下ズレしないよう中央揃え */
  gap:12px;
  padding-bottom:10px;
  margin-bottom:8px;
  border-bottom:3px solid #99e1d3;
}

/* 先頭アイコン（pt1〜pt4.png）確実に表示されるよう固定 */
.point-badge{
  display:inline-flex; align-items:center; gap:8px;
  flex: 0 0 auto;
}
.point-badge__icon{
  display:block;            /* 行内の空白によるズレ防止 */
  object-fit:contain;
}

/* 見出しテキスト本体＋末尾マーク */
.point-title{ color: #00796b; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 3px; line-height: 1.3; font-size: 24px;}

/* 末尾マーク（bkr.png）も必ず出す */
.point-title__mark{
  width:20px;
  height:20px;
  display:inline-block;
  object-fit:contain;
  vertical-align:middle;
  margin-bottom: 17px;
}
@media (max-width: 768px){
  .point-title__mark{ width:18px; height:18px; }
  .point-item { padding: 0px;}
  .point-badge { width: 70px;}
  .point-title { font-size: 20px;}
}

.point-body{ color:#444; line-height:2; }
.point-item--first .point-body{ padding-left:0; }

/* 豆知識ボックス */
.info-box{
  margin-top:100px; background:#e6faf4; padding: 30px 50px;
  display:grid; grid-template-columns:1fr 130px; gap:14px;
  position:relative; overflow:visible; padding-bottom: 0;
  margin-bottom: 180px;
}
.info-box__title{ font-weight:700; color:#00796b; margin-bottom:6px; }
.wkow{ border-bottom:2px solid #03c79f; }
.eikyou {font-size: 20px;}
.info-box__text{ font-size:14px; line-height:2; color:#444; }
.info-box__illust{ align-self: end; justify-self: end; margin-right: -165px; z-index: 1; margin-top: 110px; }
.info-box__illust img{ width:200px; height:auto; }

/* ====== 歯科用レーザー ====== */
.laser{
  max-width: 1100px;
  margin: 0 auto 110px;
  padding: 0 20px;
}

/* セクション見出し（緑帯） */
.laser-banner{
  position: relative;
  background:#11b08f;
  color:#fff;
  text-align:center;
  padding: 18px 12px;
  border-radius: 4px;
}
.laser-banner h2{
  margin:0;
  font-weight: 800;
  letter-spacing: .25em;
  font-size: clamp(18px, 2.2vw, 28px);
}

/* 2カラム */
.laser-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 0 auto;
  margin-top: 100px;
  max-width: 1080px;
  margin-bottom: 100px;
}
.laser-photo { max-width: 420px; }
.laser-photo img{ width:100%; height:auto; display:block; }

/* 右側テキスト */
.laser-title{
  display:flex; align-items:center; gap:12px;
  font-size: 22px; font-weight: 700; 
  margin: 0 0 12px;
}
.laser-title__icon{ width:32px; height:32px; object-fit:contain; }
.laser-text{ font-size:14px; line-height:2; color:#444; }

/* ====== おすすめボックス ====== */
.laser-reco{ position: relative; margin-top: 26px; }
.laser-reco__head{
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #03c79f;
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  line-height: 1;
  white-space: nowrap;
}
.laser-reco .laser-tags{
  list-style: none;
  margin: 0;
  padding: 30px 30px;
  border: 2px solid #03c79f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  background: #fff;
}
.laser-reco .laser-tags li{
  position: relative;
  padding-left: 34px;
  border: 0;
  min-width: auto;
  font-size: 16px;
  color: #333;
}
.laser-reco .laser-tags 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;
}
.laser-reco .laser-tags 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){
  .laser-reco__head{
    top: -14px;
    padding: 8px 14px;
    box-shadow: 0 0 0 4px #fff;
  }
  .laser-reco .laser-tags{
    padding: 22px 0px;
    gap: 15px;
  }
  .laser-reco .laser-tags li{
    font-size: 15px;
    padding-left: 32px;
  }
  .laser-reco .laser-tags li::before{ left: 6px; }
  .laser-reco .laser-tags li::after{ left: 10px; }
  .laser-photo { max-width: 320px; margin: 0 auto;}
  .info-box__text {font-size: 16px;}
  .laser-text { font-size: 16px;}
}

@media (max-width: 992px){
  .laser-grid{ grid-template-columns: 1fr; gap:28px; margin-top: 60px;}
  .laser{ margin-bottom: 80px; }
}

/* 既存レスポンシブ */
@media (max-width: 768px){
  .policy-flex { flex-direction: column;  text-align: -webkit-auto; align-items: center;}
  .policy-title { font-size: 18px; }
  .policy-text p { margin-top: 30px;  font-size: 16px;}
  .policy-section { padding: 20px 20px;}
  .policy-text { flex: 300px;}
  .info-box{ grid-template-columns: 1fr; text-align:left; padding: 20px 20px; margin-top: 50px; margin-bottom: 50px;}
  .info-box__illust{ order:-1; justify-self:center; margin-right:0;}
  .info-box__illust {margin-top: 30px;}
　.info-box { margin-top: 50px; margin-bottom: 50px;}
  .point-body { font-size: 16px;}
  .lesahe { padding: 0 20px;}
}


/* ====== 治療内容セクション ====== */
.treat-wrap{
  --cream:#fff5df;
  --mint:#e6faf4;
  --line:#1cc3ad;
  --badge:#dcfbf6;
  --title:#0f9e8f;
  position: relative;
  width: 100%;
  background: url("../img/naiyou_bg.jpg") center top / cover no-repeat;
  padding: clamp(48px,6vw,72px) 16px;
  overflow: hidden;
  max-width: 100%;
}

.treat-inner{ width:min(920px, 92vw); margin:0 auto; }

.treat-title{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#333; font-weight:800; letter-spacing:.18em;
  font-size: clamp(18px, 2.6vw, 24px);
  margin: 0 0 clamp(26px, 4vw, 34px);
}
.treat-title__ic{ width:22px; height:22px; color:var(--title); }

.treat-card{
  position: relative;
  display:grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(14px,2.4vw,22px);
  align-items: center;
  background:#fff;
  border:2px solid var(--line);
  padding: clamp(16px, 2.4vw, 22px);
  margin: 0 0 clamp(18px,2.2vw,22px);
  box-shadow: 0 1px 0 0 rgba(0,0,0,.02);
}

.treat-badge{
  display:grid; place-items:center;
  width: 170px; height: 170px;
  margin-left: clamp(4px, 1vw, 8px);
  border-radius: 999px;
  background: var(--badge);
}
.treat-badge span{
  display:block; text-align:center; color:#0c7a6d; font-weight:700;
  line-height:1.6; letter-spacing:.08em;
  font-size: clamp(14px, 2.1vw, 16px);
  white-space: pre-line;
}

.treat-body{ color:#444; line-height: 1.95; font-size: 14px; }

@media (max-width: 860px){
  .treat-card{ grid-template-columns: 160px 1fr; }
  .treat-badge{ width:140px; height:140px; }
  .treat-badge span { font-size: 17px;}
}
@media (max-width: 600px){
  .treat-card{ grid-template-columns: 1fr; text-align: left; }
  .treat-badge{ width:140px; height:140px; margin: 0 auto; }
  .treat-body{ font-size: 13.5px; }
}


/* ===================== 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;
}


/* ===================== Footer ===================== */
/* 既存の #footer にも効くようにセレクタを併記 */
.site-footer, #footer{
  background: #0c6e59;        /* 濃いめグリーン */
  color:#fff;
  padding: clamp(32px, 5vw, 56px) 0 0;
  line-height: 1.9;
  font-size: 14px;
}

/* 上段グリッド */
.site-footer .footer-inner,
#footer .footer-inner{
  max-width: var(--max, 1120px);
  margin: 0 auto;
  padding: 0 20px 28px;
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}

/* ロゴ＆住所 */
.footer-brand .footer-logo{ display:block; max-width: 220px; height:auto; }
.footer-brand address{ font-style: normal; opacity: .95; }
.footer-brand a{ color:#fff; text-decoration: none; }

/* ナビ */
.footer-nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-nav a{
  color:#fff; text-decoration:none; opacity:.9;
}
.footer-nav a:hover, .footer-nav a:focus{ opacity:1; text-decoration: underline; }

/* 連絡先・SNSなど */
.footer-info{ display:grid; gap:10px; }
.footer-tel{ font-weight:700; font-size: 18px; letter-spacing:.04em; }
.footer-sns{ display:flex; gap:12px; }
.footer-sns a{
  width:32px; height:32px; display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.45); border-radius:50%;
  color:#fff; text-decoration:none;
}
.footer-sns a:hover{ background:rgba(255,255,255,.12); }

/* 下段コピーライト */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 8px;
}
.footer-bottom__inner{
  max-width: var(--max, 1120px);
  margin: 0 auto;
  padding: 12px 20px 18px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 16px;
  font-size:12px; opacity:.9;
}
.footer-copyright{ white-space: nowrap; }
.footer-mini-nav{ display:flex; gap:14px; }
.footer-mini-nav a{ color:#fff; text-decoration:none; opacity:.85; }
.footer-mini-nav a:hover{ opacity:1; text-decoration: underline; }

/* レスポンシブ */
@media (max-width: 900px){
  .site-footer .footer-inner,
  #footer .footer-inner{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .site-footer .footer-inner,
  #footer .footer-inner{
    grid-template-columns: 1fr;
  }
  .footer-bottom__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}