@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; 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/dentrures_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;
}

/* ===================== Denture / 入れ歯・義歯 ===================== */
.denture{
  max-width:1200px;
  margin:0 auto 120px;
  color:var(--text, #333);
  line-height:2;
}

/* リードコピー（中央寄せの大きめテキスト） */
.denture-lead{
  text-align:center;
  margin:40px auto 46px;
}
.denture-lead p{
  margin:0 0 12px;
  font-size:clamp(16px, 1.8vw, 20px);
}
.denture-lead .em{
     color: #f28d6d;
    font-weight: 700;
    border-bottom: 3px solid #35d2b2;
    padding-bottom: 4px;
}
.denture-lead .note{
  font-size:clamp(14px, 1.6vw, 16px);
  line-height:1.9; margin-top:12px;
}

/* カード共通 */
.denture-card{
  padding:clamp(22px, 3.2vw, 34px);
  margin:0 0 28px;
}
.denture-card--mint{  background:#e6faf4; }  /* やわらかミント */
.denture-card--cream{ background:#fff6e7; }  /* うすクリーム */

/* 2カラムレイアウト */
.denture-card__grid{
  display:grid;
  grid-template-columns:1fr 300px;   /* テキスト広め、画像は約300px */
  gap:clamp(18px, 3vw, 36px);
  align-items:center;
}
.denture-card__title{
  margin:0 0 10px;
  font-size:clamp(18px, 2.2vw, 30px);
  font-weight:800; letter-spacing:.06em;
  color:#0aa592; text-align:center;
}
.denture-card__body p{ color:#3d3d3d; }
.denture-card__media img{
  width:100%; height:auto; display:block; border-radius:10px;
}

/* 画像左・文章右にしたい場合は .is-reverse を付与 */
.denture-card.is-reverse .denture-card__grid{ grid-template-columns:300px 1fr; }
.denture-card.is-reverse .denture-card__media{ order:-1; }

/* レスポンシブ */
@media (max-width:900px){
  .denture-card__grid{ grid-template-columns:1fr!important; }
  .denture-card__media{ order:-1; max-width:360px; margin:0 auto 6px; }
  .denture-card.is-reverse .denture-card__media{ order:-1; }
  .denture-lead p{ font-size:16px; }
}
@media (max-width:560px){
  .denture-card{ padding:18px; }
  .denture-card__media{ max-width:280px; }
}

/* ===================== 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;
  position:relative; isolation:isolate;
}

/* セクション全体に背景画像を敷く（HTMLの style で --pc-bg を渡す） */
.pc-section--with-bg::before{
  content:"";
  position:absolute;
  inset:auto 0 0 50%;
  width:100vw;        /* フルブリード */
  height:100%;
  margin-inline:-50vw;
  top:0;
  background-image:var(--pc-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:-1;
  /* 背景が強ければ薄くする場合は以下を有効化
  background-color:rgba(255,255,255,.2);
  background-blend-mode:lighten;
  */
}

.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;
  margin:0 0 60px;
}
.pc-title__icon{
  width:28px; height:28px; object-fit:contain; vertical-align:middle; display:inline-block;
}

/* リード＋画像 */
.md_flex{
  display:flex; justify-content:space-between;
  max-width:1200px; margin:0 auto; margin-bottom:80px; gap:24px;
}
.md_left{ width:53%; line-height:2; }
.md_txt_green{ font-size:18px; color:#02c79f; font-weight:700; }
.md_img{ width:44%; display:flex; align-items:center; justify-content:center; }
.md_img img{ width:100%; height:auto; display:block; border-radius:8px; }

.pc-board{
  border-radius:26px;
  padding:clamp(18px, 3.6vw, 34px);
  padding-bottom:100px;
  position:relative;
  inset-inline:50%;
  width:100vw;
  margin-inline:-50vw;  /* フルブリードのボード */
}

/* 2列→1列 */
.pc-panels{
  display:grid; gap:clamp(18px, 3vw, 36px);
  grid-template-columns:1fr 1fr;
  max-width:1020px; margin:0 auto;
}
@media (max-width:860px){
  .pc-panels{ grid-template-columns:1fr; }
}

/* 各パネル */
.pc-panel{
  position:relative; border-radius:18px;
  padding:clamp(18px, 3vw, 40px);
  box-shadow:0 6px 18px rgba(0,0,0,.04) inset;
  overflow:hidden;
  padding-bottom:100px; /* 右下装飾のぶん */
}
.pc-panel.merit{   background:#ffe7e3; }
.pc-panel.demerit{ background:#eef6df; }

/* 初期(テキスト) → 後ろで画像に上書き */
.pc-panel.merit::after,
.pc-panel.demerit::after{
  position:absolute; right:20px; bottom:10px; opacity:.15;
  font-size:clamp(42px, 8vw, 72px);
  font-weight:700; font-style:italic; letter-spacing:.02em;
  color:#1db397; content:""; pointer-events:none;
}
.pc-panel.merit::after{   content:"Merit"; }
.pc-panel.demerit::after{ content:"Demerit"; }

/* ピル */
.pc-chip{
  display:inline-block; color:#fff; font-weight:800; letter-spacing:.16em;
  padding:.55em 2.2em; border-radius:999px;
  background: radial-gradient(#ffffff33 2px, transparent 3px) 0 0/16px 16px, #f59b84;
}
.pc-chip.-green{
  background: radial-gradient(#ffffff33 2px, transparent 3px) 0 0/16px 16px, #6ac76f;
}

/* リスト */
.pc-list{ list-style:none; margin:12px 0 0; padding:0; }
.pc-list li{
  position:relative; padding-left:2.1em; margin:1.2em 0; line-height:1.9; font-size: 17px;
}
.pc-list li::before{
  content:""; position:absolute; left:0; top:.35em;
  width:18px; height:18px; border:2px solid #747474; border-radius:4px;
}
.pc-list li::after{
  content:""; position:absolute; left:6px; top:.45em; width:6px; height:11px;
  border-right:3px solid #11b08f; border-bottom:3px solid #11b08f; transform:rotate(45deg);
}
.pc-list.-cons li::before{ border-color:#747474; }
.pc-list.-cons li::after{  border-color:#11b08f; }

/* 装飾画像に差し替え（右下の透かし） */
.pc-panel.merit::after,
.pc-panel.demerit::after{
  content:""; right:clamp(12px, 2vw, 20px); bottom:clamp(8px,1.2vw,14px);
  width:clamp(160px, 28vw, 260px); height:clamp(36px, 6vw, 66px);
  background-repeat:no-repeat; background-position:right bottom; background-size:contain;
  opacity:.22; font-size:0; letter-spacing:0; font-style:normal; font-weight:400; color:transparent;
}
.pc-panel.merit::after{   background-image:url("../img/merit.png"); }
.pc-panel.demerit::after{ background-image:url("../img/demerit.png"); }

/* ====== Tablet/Phone tweaks for Pros&Cons ====== */
@media (max-width:900px){
  .pc-section{ margin:0 auto; margin-top:60px; }
  .pc-board{ padding-bottom:60px; }
  .pc-panel{ padding-bottom:200px; }
  .md_flex{ flex-direction:column; }
  .md_left, .md_img{ width:100%; }
  .md_img{ max-width:520px; margin:0 auto; }
}
@media (max-width:560px){
  .pc-title{ margin-bottom:32px; }
  .pc-board{ padding:18px; }
  .pc-panel{ padding:16px; padding-bottom:150px; }
  .pc-list li{ margin:.9em 0; }
  .pc-list li::before{ width:16px; height:16px; }
  .pc-list li::after{ left:5px; top:.5em; }
}

/* セクションの器 */
.dentures{
  max-width: 1080px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color:#333;
  line-height: 1.9;
}

/* タイトル（中央） */
.dentures__title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 28px;
}
.dentures__title h2{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: .12em;
}
.dentures__clover{ width:28px; height:auto; }

/* タイトルは絶対配置の基準に */
.dentures__title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 28px;
}

/* 画像バッジ */
.dentures__badge-img{
  position: absolute;
  right: 10%;
  top: -12px;
  width: clamp(80px, 10vw, 120px);
  height: auto;
  display: block;
  pointer-events: none; /* クリックを邪魔しない */
}

.ossm_bdg img { max-width: 100px; height: auto; position: relative; top: -30px; left: -15px;}

@media (max-width: 820px){
  .dentures__badge-img{ right: 4%; top: -8px; }
}
/* 上段：写真＋説明 */
.dentures__intro{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 18px 0 48px;
}
.intro__photo img{ width:100%; height:auto; display:block;}
.intro__lead{ color:#02c79f; font-weight: 700; }

/* 各プランの行 */
.plan{
  display: grid;
  grid-template-columns: 1fr 320px; /* テキスト広め／写真約320px */
  gap: 24px;
  align-items: center;
  padding: 22px 0;
}
.plan__media img{ width:100%; height:auto; display:block;}

.plan__title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .02em;
}
.plan__icon{ width:26px; height:auto; }

/* SPレイアウト */
@media (max-width: 820px){
  .dentures__intro{ grid-template-columns: 1fr; }
  .dentures__badge{ right: 4%; }
}
@media (max-width: 768px){
  .denture-lead {text-align: left;}
  .denture-lead {padding: 0 20px;}
  .ossm_bdg img { max-width: 60px; top: -30px; left: -10px;}
  .dentures__title {margin-left: 20px;}
}
@media (max-width: 640px){
  .plan{ grid-template-columns: 1fr; }
  .plan__media{ order:-1; max-width: 360px; margin: 0 auto 6px; }
}

:root{
  --green:#11b08f;
  --mint:#dff2ea;
  --mint-weak:#eaf8f3;
  --text:#333;
}

/* セクション器 */
.price-section{
  max-width: 1120px;
  margin: 60px auto 80px;
  padding: 0 20px;
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  color: var(--text);
}

@media (max-width: 768px){
	.price-section {
    margin: 30px auto 80px;
}
}

/* タイトルの緑リボン */
.price-heading{
  width: min(1120px, 92vw);
  margin: 0 auto 70px;
  background: var(--green);
  color: #fff;
  text-align: center;
  padding: 16px 12px;
  font-weight: 800;
  letter-spacing: .22em;
  font-size: clamp(20px, 2.8vw, 36px);
  position: relative;
  border-radius: 2px;
  /* 背景のクローバー（装飾画像） */
  background-image: url("img/ribbon-clover.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 80%;
}
/* リボン下の白いライン+薄影 */
.price-heading::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:6px;
  background:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.price-heading > span{ position: relative; z-index: 1; }

/* テーブル */
.price-table{
  width: min(1080px, 86vw);
  margin: 0 auto;
  border: 3px solid var(--green);
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 80px;
}

/* 行・セル */
.price-table td{
  padding: 18px 22px;
  font-size: 18px;
  line-height: 1.7;
  border-top: 1px solid #14b08f;
}
.price-table tr:first-child td{ border-top: none; }

/* 左カラムの背景色（行ごとに濃淡） */
.price-table .pt-name{ background: #e0fbf6; }

/* 右カラム：右寄せ＆縦の太線 */
.price-table .pt-price{
  text-align: right;
  border-left: 1px solid var(--green);
  white-space: nowrap;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* 小画面調整 */
@media (max-width: 560px){
  .price-table td{ padding: 14px 14px; font-size: 16px; }
}

/* スクロール用ラッパー */
.price-table-wrap{
  width: min(900px, 86vw);
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
}

/* 既存の .price-table の幅指定を差し替え */
.price-table{
  width: 100%;
  min-width: 720px;          /* 画面幅より広くして横スクロールを発生させる */
  border: 3px solid var(--green);
  border-collapse: collapse;
  table-layout: fixed;
}

/* 小画面はラッパーを全幅に */
@media (max-width: 560px){
  .price-table-wrap{ width: 100%; }
}

@media (max-width: 768px){
	.price-table {margin-top: 30px;}}