@charset "UTF-8";
/*************************************************
抜歯と診断された方へ page-tooth-loss.php 専用
※すべて .tooth-loss（main要素）配下にスコープ限定
※functions.php でスラッグ tooth-loss のときだけ読み込んでいる（他ページには影響しない）
*************************************************/

/* ---------- MV：サブタイトル（H1の外に出したもの） ----------
   現行の .sec-page-title span.jp と同等の見た目にする */
.tooth-loss .tl-mv-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* 古いブラウザ用フォールバック */
  align-items: last baseline; /* H1本文の行とサブタイトルのベースラインを揃える */
  column-gap: 20px;
}
.tooth-loss .tl-mv-sub {
  font-size: 2rem;
  font-weight: 500;
  color: #473b2f;
  line-height: normal;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-mv-sub {
    font-size: 1.5rem;
    margin-top: 0.4em;
  }
}

/* ---------- list_flex_box 内の h3（現行の .default_txt h4 と同じ見た目） ---------- */
.tooth-loss .list_flex_box h3 {
  font-size: 20px;
  margin-bottom: 8px;
  padding-left: 15px;
  border-left: #775d3f 3px solid;
  color: #333;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .tooth-loss .list_flex_box h3 {
    font-size: 20px;
    margin-bottom: 8px;
  }
}

/* ---------- 補足ボックス（費用の補足） ---------- */
.tooth-loss .tl-box {
  background-color: #f5f4f1;
  padding: 40px 50px;
  margin: 30px 0;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-box {
    padding: 20px;
    margin: 20px 0;
  }
}
.tooth-loss .tl-box .tl-box-ttl {
  font-size: 2rem;
  font-weight: 700;
  color: #775d3f;
  line-height: 1.6;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-box .tl-box-ttl {
    font-size: 1.6rem;
  }
}

/* ---------- 注意書きボックス（精密根管治療をご希望の方へ） ---------- */
.tooth-loss .tl-notice {
  border: 2px solid #775d3f;
  background-color: #fff;
  padding: 30px 40px;
  margin: 30px 0 40px;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-notice {
    border-width: 1px;
    padding: 20px;
    margin: 20px 0 30px;
  }
}
.tooth-loss .tl-notice .tl-notice-ttl {
  font-size: 2rem;
  font-weight: 700;
  color: #775d3f;
  line-height: 1.6;
  margin-bottom: 10px;
}
.tooth-loss .tl-notice .tl-notice-ttl::before {
  content: "！";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #775d3f;
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  vertical-align: 0.15em;
  letter-spacing: 0;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-notice .tl-notice-ttl {
    font-size: 1.6rem;
  }
}

/* ---------- 抜歯後の治療の選択肢（表の下のリスト） ---------- */
.tooth-loss .tl-option-list {
  margin-top: 40px;
  padding-left: 0;
}
.tooth-loss .tl-option-list > li {
  border-bottom: 1px solid #e1ded9;
  padding: 20px 0;
}
.tooth-loss .tl-option-list > li:first-child {
  border-top: 1px solid #e1ded9;
}
.tooth-loss .tl-option-list > li p {
  margin-bottom: 0;
}
.tooth-loss .tl-option-list .tl-option-label {
  font-weight: 700;
  color: #775d3f;
}
.tooth-loss .tl-option-list a.text_link01.text-left {
  margin-bottom: 0 !important;
}
.tooth-loss .tl-option-list .tl-option-links {
  margin-top: 10px;
}
.tooth-loss .tl-option-list .tl-option-sep {
  margin: 0 1em;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-option-list {
    margin-top: 30px;
  }
  .tooth-loss .tl-option-list > li {
    padding: 15px 0;
  }
  /* SPではリンクを縦並びに */
  .tooth-loss .tl-option-list .tl-option-links a {
    display: block;
  }
  .tooth-loss .tl-option-list .tl-option-sep {
    display: none;
  }
}

/* ---------- 治療リンクのビフォーアフターカード（list_flex_box 内） ----------
   PC：3列カード（769〜1024pxは2列）／SP：サムネ左＋テキスト右の横長カード */
.tooth-loss .tl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* カードを入れた list_flex_box は縦幅を抑えるため余白を詰める（PCのみ） */
@media screen and (min-width: 769px) {
  .tooth-loss .list_flex_box:has(> .tl-cards) {
    padding: 40px 50px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tooth-loss .tl-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tooth-loss .tl-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 16px;
  color: #333;
}
/* .default_txt a（common.css）の下線をカード内では打ち消す */
.tooth-loss a.tl-card {
  text-decoration: none;
}
.tooth-loss .tl-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
}
.tooth-loss .tl-ba-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #ece7df;
}
.tooth-loss .tl-ba-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tooth-loss .tl-ba-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px;
  background-color: #9a8a78;
  color: #fff;
  font-family: "Spectral", serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
.tooth-loss .tl-ba-item:nth-child(2) .tl-ba-label {
  background-color: #775d3f;
}
/* ダミー（画像準備中） */
.tooth-loss .tl-ba-dummy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooth-loss .tl-ba-dummy-txt {
  font-size: 12px;
  color: #9a8a78;
  letter-spacing: 0.05em;
}
/* 合成画像（2×2：左列レントゲン／右列口腔内、上段術前／下段術後）から右列の口腔内写真を切り出す
   元画像 1024×658px、右列 x:604〜1019 / 上段 y:5〜323 / 下段 y:337〜655 */
.tooth-loss .tl-ba-crop img {
  position: absolute;
  left: -145.19%;
  width: 246.15%;
  max-width: none;
  height: auto;
  object-fit: initial;
}
.tooth-loss .tl-ba-crop--top img {
  top: -2.72%;
}
.tooth-loss .tl-ba-crop--bottom img {
  top: -109.13%;
}
.tooth-loss .tl-card h3 {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 8px;
  padding-left: 10px;
}
.tooth-loss .tl-card .tl-card-link {
  margin-top: auto;
  font-size: 1.4rem;
  color: #775d3f;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  /* SP：上段＝サムネ＋見出し、下段＝リンク（横幅いっぱい・中央揃え） */
  .tooth-loss .tl-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas:
      "ba ttl"
      "link link";
    column-gap: 12px;
    padding: 10px;
  }
  .tooth-loss .tl-ba {
    grid-area: ba;
    align-self: center;
    gap: 2px;
    margin-bottom: 0;
  }
  .tooth-loss .tl-ba-label {
    padding: 3px 5px;
    font-size: 11px;
  }
  .tooth-loss .tl-ba-dummy {
    align-items: flex-end;
    padding-bottom: 6px;
  }
  .tooth-loss .tl-ba-dummy-txt {
    font-size: 11px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.3;
  }
  /* 見出し：治療名は1行、カッコ内は小さめで2行目に */
  .tooth-loss .tl-card h3 {
    grid-area: ttl;
    align-self: center;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    padding-left: 8px;
  }
  .tooth-loss .tl-card-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: #775d3f;
  }
  .tooth-loss .tl-card .tl-card-link {
    grid-area: link;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ece7df;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-wrap: balance;
  }
}

/* 小さいSP（〜374px：iPhone SE等）は治療名が1行に収まるようサムネと文字を一段小さく */
@media screen and (max-width: 374px) {
  .tooth-loss .tl-card {
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 10px;
  }
  .tooth-loss .tl-card h3 {
    font-size: 13px;
    letter-spacing: 0.03em;
  }
  .tooth-loss .tl-card-sub {
    font-size: 10.5px;
  }
}

/* ---------- 1項目だけの節（.tl-cards--single）：PC・タブレットは横長カード ----------
   SPは通常カードと同じ横長レイアウト（上の max-width:768px のルール）を使う */
@media screen and (min-width: 769px) {
  .tooth-loss .tl-cards--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .tooth-loss .tl-cards--single .tl-card {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 32px;
    padding: 20px;
  }
  .tooth-loss .tl-cards--single .tl-ba {
    grid-row: 1 / span 2;
    align-self: center;
    margin-bottom: 0;
  }
  .tooth-loss .tl-cards--single .tl-card h3 {
    align-self: end;
    font-size: 20px;
    margin-bottom: 10px;
    padding-left: 12px;
  }
  .tooth-loss .tl-cards--single .tl-card .tl-card-link {
    align-self: start;
    margin-top: 0;
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tooth-loss .tl-cards--single .tl-card {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 24px;
  }
}

/* ---------- 「当院の抜歯に対する考え方」：h3＋その下のh4（段落構成） ---------- */
/* 画像を左に回り込ませる（.float_right の左右反転版） */
.tooth-loss .tl-float-left {
  float: left;
  margin: 0 60px 20px 0;
  width: 46%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .tooth-loss .tl-float-left {
    float: none;
    margin: 20px 0;
    width: 100%;
  }
}
/* h3ブロックとその下のh4ブロックの間隔を詰めて、まとまりに見せる */
/* flow-root：回り込み画像をブロック内に収め、下の余白を確実に効かせる */
.tooth-loss .default_txt.tl-has-sub {
  display: flow-root;
  margin-bottom: 50px;
}
.tooth-loss .tl-sub .default_txt {
  display: flow-root;
  margin-bottom: 50px;
}
.tooth-loss .tl-sub .default_txt:last-of-type {
  margin-bottom: 0;
}
/* h4：既存の .default_txt h4（左罫線）をベースに少し大きく */
.tooth-loss .tl-sub .default_txt h4 {
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .tooth-loss .default_txt.tl-has-sub,
  .tooth-loss .tl-sub .default_txt {
    margin-bottom: 40px;
  }
  .tooth-loss .tl-sub .default_txt h4 {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
}