@charset "UTF-8";
/* ============================================================
   whitening.css - ホワイトニングページ専用CSS
   ============================================================ */

/* ---- メインビジュアル ---- */
#b-whitening #low_mi {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #4a382e;
}
#b-whitening #low_mi img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 768px以下で左カラム非表示 ---- */
@media only screen and (max-width: 768px) {
  body#b-whitening #left_column { display: none !important; }
}

/* ---- ページ全体 ---- */
#whitening_page {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "Yu Mincho", "游明朝", serif;
  color: #4d3d34;
  line-height: 1.9;
  text-align: center;
  padding: 1em 0 2em;
}
#whitening_page p {
  text-align: center;
  margin: 0 0 1.5em;
  font-size: 15px;
  color: #4d3d34;
}
#whitening_page a { color: #8a6f3a; }
#whitening_page strong { color: #4a382e; font-weight: bold; }
#whitening_page em { color: #4a382e; font-style: normal; font-weight: bold; font-size: inherit; }
#whitening_page u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- セクション見出し ---- */
#whitening_page .wt-h2 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "Yu Mincho", "游明朝", serif;
  font-weight: bold;
  color: #4a382e;
  font-size: 165%;
  line-height: 1.45;
  text-align: center;
  margin: 2.4em 0 1.1em;
  padding-bottom: 0.7em;
  border-bottom: 2px solid #c2a86a;
  letter-spacing: 0.04em;
}
#whitening_page .wt-h2:first-child { margin-top: 0.6em; }

/* ---- 治療の流れ見出し（両サイドライン） ---- */
#whitening_page .wt-flow-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  color: #4a382e;
  font-weight: bold;
  font-size: 175%;
  letter-spacing: 0.06em;
  margin: 2.2em 0 1.2em;
}
#whitening_page .wt-flow-title::before,
#whitening_page .wt-flow-title::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 2px;
  background: #c2a86a;
}

/* ---- カード一覧 ---- */
#whitening_page .wt-card-list { margin: 1.4em 0 0; }
#whitening_page .wt-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f1ece4;
  border-radius: 14px;
  padding: 14px 14px;
  margin: 0 0 16px;
  text-decoration: none;
}
#whitening_page a.wt-card:hover,
#whitening_page a.wt-card:hover .wt-card-ttl,
#whitening_page a.wt-card:hover .wt-card-desc { text-decoration: none; }
#whitening_page .wt-card-photo { flex: 0 0 38%; max-width: 38%; }
#whitening_page .wt-card-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
#whitening_page .wt-card-body {
  flex: 1;
  padding-right: 20px;
  text-align: left;
}
#whitening_page .wt-card-ttl {
  font-weight: bold;
  color: #4a382e;
  font-size: 16px;
  margin: 0 0 0.5em;
  line-height: 1.4;
}
#whitening_page .wt-card-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #6b5d52;
  margin: 0;
}
#whitening_page .wt-card::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #9b8a78;
  border-right: 2px solid #9b8a78;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- 写真 ---- */
#whitening_page .wt-photo {
  text-align: center;
  margin: 1.4em auto;
}
#whitening_page .wt-photo img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
#whitening_page .wt-photo.narrow img { max-width: 66%; }
#whitening_page .wt-photo.diagram img { max-width: 95%; }
#whitening_page .wt-cap {
  text-align: center;
  font-size: 14px;
  color: #4d3d34;
  margin: -0.6em 0 1.6em;
}

/* ---- 特徴バンド ---- */
#whitening_page .wt-band {
  background: #4a382e;
  color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
  padding: 0.9em 1em;
  margin: 1.9em 0 0;
  border-radius: 4px 4px 0 0;
  letter-spacing: 0.03em;
}

/* ---- 治療の流れ：写真＋テキスト行 ---- */
#whitening_page .wt-flow-row {
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  margin: 1.2em 0;
}
#whitening_page .wt-flow-img { flex: 0 0 38%; max-width: 38%; }
#whitening_page .wt-flow-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
#whitening_page .wt-flow-txt {
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
  color: #4d3d34;
}

/* ---- 下向き矢印 ---- */
#whitening_page .wt-arrow {
  width: 0;
  height: 0;
  margin: 0.8em auto;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-top: 26px solid #cdb985;
}

/* ---- Q&A ---- */
#whitening_page .wt-q {
  background: #6f5f52;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  padding: 0.75em 1em;
  margin: 1.4em 0 0;
  border-radius: 6px 6px 0 0;
}
#whitening_page .wt-q .qmark { margin-right: 0.7em; }
#whitening_page .wt-a {
  background: #efe9df;
  padding: 1.2em 1.2em;
  margin: 0 0 1em;
  border-radius: 0 0 6px 6px;
}
#whitening_page .wt-a p { margin: 0 0 1em; text-align: left; }
#whitening_page .wt-a p:last-child { margin-bottom: 0; }
#whitening_page .wt-a .wt-photo { margin: 1em auto 0.3em; text-align: center; }

/* ---- カード名称を改行（名称の後で改行） ---- */
#whitening_page .wt-card-ttl { display: block; }

/* ---- リード文（太字・単語区切りで改行） ---- */
#whitening_page .wt-lead {
  font-weight: bold;
  word-break: keep-all;
}

/* ---- 特徴 本文ボックス（背景色付き・左寄せ） ---- */
#whitening_page .wt-feat-body {
  text-align: left;
  padding: 1.3em 1.15em;
  margin: 0 0 1.5em;
}
#whitening_page .wt-feat-body p { margin: 0; text-align: left; }
#whitening_page .wt-feat-pink,
#whitening_page .wt-feat-tan,
#whitening_page .wt-feat-light { background: #ECE7E1; }
/* 画像と本文をくっつける（余白・角丸なし） */
#whitening_page .wt-photo-flush { margin-top: 0; margin-bottom: 0; font-size: 0; line-height: 0; }
#whitening_page .wt-photo-flush img { width: 100%; max-width: 100%; display: block; }
#whitening_page .wt-feat-flush  { margin-top: 0; border-radius: 0; }

/* ---- 左寄せユーティリティ ---- */
#whitening_page p.wt-left { text-align: left; }

/* ---- 中央揃えのまま単語区切りで改行 ---- */
#whitening_page .wt-keep { word-break: keep-all; }

/* ---- タブレット以上 ---- */
@media only screen and (min-width: 769px) {
  #whitening_page { padding: 1.5em 2em 2.5em; }
  #whitening_page p,
  #whitening_page .wt-flow-txt { font-size: 16px; }
  #whitening_page .wt-card-ttl { font-size: 18px; }
  #whitening_page .wt-card-desc { font-size: 14px; }
  #whitening_page .wt-band { font-size: 20px; }
  #whitening_page .wt-h2 { font-size: 185%; }
  #whitening_page .wt-flow-title { font-size: 195%; }
  #whitening_page .wt-q { font-size: 17px; }
  #whitening_page .wt-photo.narrow img { max-width: 50%; }
  #whitening_page .wt-photo.diagram img { max-width: 70%; }
}


@media only screen and (max-width: 768px) {
  #left_column {
    display: none !important;
  }
  #content {
    margin-top: 90px !important;
  }
}