@charset "UTF-8";
/* 見た目の調整（2026年10月）
   影・グラデーション・光る効果・左の色帯・角丸の囲み・塗りの札をやめ、余白と細い横線、文字の大小で区切る。
   あとから追加された部品だけを上書きする。親テーマ由来の部品（手順の帯、よくある質問、見出しの線など）はそのまま。
   既存のファイル（page-what-allon4.css、overwrite.css、style.css）は直さず、このファイルを最後に読ませて上書きする。

   1. 予約・電話の案内帯（トップの common_cta、オールオン4の cta_allon4、インプラントの cta_implant）
   2. オールオン4のページ本体（page-what-allon4.css の部品）
   3. 院長紹介（#supervision：トップ・オールオン4）
   4. 料金ページの部品（オールオン4・オールオン6、前歯、奥歯）
   5. トップの電話受付時間の枠
   6. スマホで画面の横幅を超えていた部品 */

:root {
  --rf-ink: #222;
  --rf-sub: #4a453c;
  --rf-muted: #6b6457;
  --rf-line: #e2ddd3;
  --rf-line-strong: #cfc8ba;
  --rf-gold: #9b8c6c;
  --rf-gold-dark: #7d7054;
  --rf-cream: #f5f3f0;
  /* 予約・電話の色はサイト共通（ヘッダー・画面下の追従バーと同じ系統）。
     グラデーションをやめた単色で、白い文字との明暗差 4.5:1 以上になる濃さにしている */
  --rf-web: #0b8a3e;
  --rf-tel: #a8500c;
}

/* 見出しと短い案内文は文節で改行する（親テーマの * { word-break: break-word } を上書き）。
   長い本文は通常の改行のままにする */
.what-allon402 h2,
.what-allon402 h3,
.what-allon402 h4,
.what-allon402 .comp_table th,
.c-heading-bg,
.cost-hero__catch,
.cost-hero__catch2nd,
.common_cta_content .cta_lead,
.what-allon402 .cta_allon4 .cta_msg,
.staff02 h3,
.access02 h3 {
  word-break: auto-phrase;
}

/* ================================================================
   1. 予約・電話の案内帯
   ================================================================ */
.common_cta_section,
.what-allon402 .m_container > div.cta_allon4,
.cta_implant {
  background: var(--rf-cream) !important;
  border-radius: 0;
  box-shadow: none;
}
.what-allon402 .m_container > div.cta_allon4 {
  margin: 0 0 72px;
  padding: 40px 32px;
  border-top: 0;
}
.common_cta_content .cta_lead .nb {
  display: inline-block;
}
.common_cta_content .cta_lead,
.what-allon402 .cta_allon4 .cta_msg,
.cta_implant .cta_inner .cta_msg {
  color: var(--rf-ink);
  font-size: 1.0625rem;
  font-weight: bold;
  line-height: 1.8;
  text-shadow: none;
}
.what-allon402 .cta_allon4 .cta_msg {
  margin: 0 0 24px;
}
/* ボタン：グラデーション・影・光る効果・浮き上がりをやめ、単色の面にする */
.common_cta_content .cta_buttons a,
.what-allon402 .cta_allon4 .cta_buttons .btn,
.cta_implant .cta_inner .cta_buttons .btn {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  transform: none;
  transition: opacity 0.2s;
}
.what-allon402 .cta_allon4 .cta_buttons .btn::before,
.cta_implant .cta_inner .cta_buttons .btn::before {
  display: none;
}
.common_cta_content .cta_buttons a:hover,
.what-allon402 .cta_allon4 .cta_buttons .btn:hover,
.cta_implant .cta_inner .cta_buttons .btn:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.88;
}
.common_cta_content .cta_buttons .btn_web,
.what-allon402 .cta_allon4 .cta_buttons .btn.web,
.cta_implant .cta_inner .cta_buttons .btn.web {
  background: var(--rf-web);
  box-shadow: none;
}
.common_cta_content .cta_buttons .btn_tel,
.what-allon402 .cta_allon4 .cta_buttons .btn.tel,
.cta_implant .cta_inner .cta_buttons .btn.tel {
  background: var(--rf-tel);
  box-shadow: none;
}
/* 受付時間：単色の面なら白い文字で読めるため、白い丸帯をやめて文字だけにする */
.common_cta_content .cta_buttons a .tel_hours--chip,
.what-allon402 .cta_allon4 .cta_buttons .btn .tel_hours--chip,
.cta_implant .cta_inner .cta_buttons .btn .tel_hours--chip {
  padding: 0;
  background: none;
  border-radius: 0;
  color: #fff;
}

/* ================================================================
   2. オールオン4のページ本体
   ================================================================ */
.what-allon402 {
  background-color: #fff;
}
.what-allon402 .m_container {
  max-width: 1040px;
  padding: 0 20px;
}
/* 区画：白い角丸の囲みと影をやめ、上の細い線と余白で区切る */
.what-allon402 .m_container > section,
.what-allon402 .m_container > div {
  margin: 0 0 72px;
  padding: 64px 0 0;
  background: none;
  border-top: 1px solid var(--rf-line);
  border-radius: 0;
  box-shadow: none;
}
/* 見出し：下線と短い飾り線をやめる */
.what-allon402 .m_container > section h2,
.what-allon402 .m_container > div h2 {
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--rf-ink);
  font-size: 28px;
  line-height: 1.5;
}
.what-allon402 .m_container > section h2::after,
.what-allon402 .m_container > div h2::after {
  display: none;
}
.what-allon402 .m_container > section h3,
.what-allon402 .m_container > div h3 {
  margin: 40px 0 12px;
  padding-left: 0;
  border-left: 0;
  color: var(--rf-ink);
  font-size: 20px;
  line-height: 1.6;
}
/* ページ内の目次：グラデーションの丸いボタンをやめ、文字の並びにする */
.what-allon402 .m_container > div.internal_links {
  margin: 48px 0 0;
  padding: 0 0 28px;
  border-top: 0;
  border-bottom: 1px solid var(--rf-line);
}
.what-allon402 .internal_links .link_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}
.what-allon402 .internal_links .link_buttons .button {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--rf-gold-dark) !important;
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  transform: none;
}
.what-allon402 .internal_links .link_buttons .button::before {
  display: none;
}
.what-allon402 .internal_links .link_buttons .button:hover {
  background: none;
  box-shadow: none;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* 区画の下の案内リンク：グラデーションのボタンをやめ、線だけのボタンにする */
.what-allon402 .section-bottom-link {
  background: none;
  border: 1px solid var(--rf-gold-dark);
  border-radius: 0;
  box-shadow: none;
  color: var(--rf-gold-dark) !important;
  transform: none;
}
.what-allon402 .section-bottom-link:hover {
  background: var(--rf-cream);
  box-shadow: none;
  transform: none;
}
/* 写真：角丸と影をやめる */
.what-allon402 #overview .implant_layout li figure img,
.what-allon402 #recommended .rec_case .imgs .before img,
.what-allon402 #recommended .rec_case .imgs .after img,
.what-allon402 #material .material_img img,
.what-allon402 #treatment-flow .item .inner img,
.what-allon402 #strengths .strength-item .strength-image img,
.what-allon402 #strengths .feature-block figure img {
  border-radius: 0;
  box-shadow: none;
}
/* お勧めな人：色面の札と緑のチェックをやめ、細い線で区切った一覧にする */
.what-allon402 #recommended .rec_list {
  gap: 0 40px;
}
.what-allon402 #recommended .rec_list li {
  padding: 12px 0 12px 28px;
  background: none;
  border-bottom: 1px solid var(--rf-line);
  border-radius: 0;
}
.what-allon402 #recommended .rec_list li::before {
  left: 2px;
  color: var(--rf-gold);
  font-size: 15px;
}
.what-allon402 #recommended .rec_case .imgs .before .label,
.what-allon402 #recommended .rec_case .imgs .after .label {
  border-radius: 0;
}
/* 比較の表：見出し行の色の帯・1列目の色面・しま模様・縦線をやめ、横線だけにする */
.what-allon402 #comparison .comp_table th,
.what-allon402 #comparison .comp_table td {
  padding: 14px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rf-line);
  text-align: left;
}
.what-allon402 #comparison .comp_table thead th {
  color: var(--rf-ink);
  border-bottom: 1px solid var(--rf-ink);
}
.what-allon402 #comparison .comp_table tbody th {
  color: var(--rf-ink);
  font-weight: bold;
}
.what-allon402 #comparison .comp_table tbody tr:nth-child(even) td {
  background: none;
}
/* 比較のまとめ：枠と角丸の囲み、見出しの下線をやめる */
.what-allon402 #comparison .comp_points li {
  padding: 20px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rf-line);
  border-radius: 0;
}
.what-allon402 #comparison .comp_points li h4 {
  margin: 0 0 8px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--rf-ink);
  font-size: 17px;
  text-align: left;
}
/* POINT：枠・左の色帯・角丸をやめ、淡い色面1枚にする */
.what-allon402 .point {
  padding: 22px 26px;
  background: var(--rf-cream);
  border: 0;
  border-radius: 0;
}
.what-allon402 .point strong,
.what-allon402 .point .ttl {
  margin-bottom: 4px;
  color: var(--rf-gold-dark);
  font-size: 13px;
  letter-spacing: 0.12em;
}
/* メリット・デメリット：見出しの色面・左の色帯・チェックや警告の記号をやめる */
.what-allon402 #benefits h3,
.what-allon402 #demerits h3 {
  margin: 36px 0 8px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 19px;
}
.what-allon402 #benefits h3::before,
.what-allon402 #demerits h3::before {
  content: none;
}
.what-allon402 #benefits h3 + p,
.what-allon402 #demerits h3 + p {
  margin-top: 0;
  padding: 0;
}
/* メリット・デメリットの表：グラデーションの見出し・影・しま模様・拡大する動きをやめる */
.what-allon402 #benefits .table_wrap,
.what-allon402 #demerits .table_wrap,
.what-allon402 #benefits .table_wrap .comp_table,
.what-allon402 #demerits .table_wrap .comp_table {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.what-allon402 #benefits .table_wrap .comp_table thead,
.what-allon402 #demerits .table_wrap .comp_table thead {
  background: none;
}
.what-allon402 #benefits .table_wrap .comp_table thead tr th,
.what-allon402 #demerits .table_wrap .comp_table thead tr th {
  color: var(--rf-ink);
  border-bottom: 1px solid var(--rf-ink);
}
.what-allon402 #benefits .table_wrap .comp_table thead tr th:not(:last-child)::after,
.what-allon402 #demerits .table_wrap .comp_table thead tr th:not(:last-child)::after {
  display: none;
}
.what-allon402 #benefits .table_wrap .comp_table tbody tr,
.what-allon402 #demerits .table_wrap .comp_table tbody tr,
.what-allon402 #benefits .table_wrap .comp_table tbody tr:nth-child(odd),
.what-allon402 #demerits .table_wrap .comp_table tbody tr:nth-child(odd),
.what-allon402 #benefits .table_wrap .comp_table tbody tr:hover,
.what-allon402 #demerits .table_wrap .comp_table tbody tr:hover {
  background: none;
  box-shadow: none;
  transform: none;
}
.what-allon402 #benefits .table_wrap .comp_table tbody tr th,
.what-allon402 #demerits .table_wrap .comp_table tbody tr th {
  background: none;
  color: var(--rf-ink);
  border-bottom: 1px solid var(--rf-line);
}
.what-allon402 #benefits .table_wrap .comp_table tbody tr td,
.what-allon402 #demerits .table_wrap .comp_table tbody tr td {
  border-bottom: 1px solid var(--rf-line);
}
/* 表を横にずらせることの案内（スマホ）：表全体を覆う灰色の層と、絵文字入りの脈打つ札をやめ、
   表の下に小さな文字で置く（文字は js/table-scroll-hint.js が表の後ろに足す） */
@media screen and (max-width: 767px) {
  .table_wrap::after {
    display: none;
  }
  .table-scroll-hint {
    position: static;
    display: block;
    margin: 8px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--rf-muted);
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    white-space: normal;
    transform: none;
    animation: none;
  }
  .table-scroll-hint::before,
  .table-scroll-hint::after {
    display: none;
  }
}
/* 治療の流れ：白い囲み・色の帯・丸い番号・三角の矢印をやめ、番号と見出しを文字で置く */
.what-allon402 #treatment-flow .item {
  margin: 0;
  padding: 28px 0;
  background: none;
  border-top: 1px solid var(--rf-line);
  border-radius: 0;
  box-shadow: none;
}
.what-allon402 #treatment-flow .box {
  margin: 0;
  padding: 0;
  background: none;
}
.what-allon402 #treatment-flow .item::before,
.what-allon402 #treatment-flow .item::after {
  display: none;
}
.what-allon402 #treatment-flow .item .item_h {
  margin-bottom: 14px;
  padding: 0;
  background: none;
  color: var(--rf-ink);
}
.what-allon402 #treatment-flow .item .item_h span {
  width: auto;
  height: auto;
  margin-right: 14px;
  border: 0;
  border-radius: 0;
  color: var(--rf-gold);
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
}
.what-allon402 #treatment-flow .item .item_h h3 {
  color: var(--rf-ink);
  font-size: 18px;
}
.what-allon402 #treatment-flow .item .inner {
  gap: 32px;
  padding: 0;
  background: none;
}
/* 当院の強み：白い囲み・影・見出しの色面や下線をやめる */
.what-allon402 #strengths .strength-item,
.what-allon402 #strengths .feature-block {
  margin: 0;
  padding: 32px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rf-line);
  border-radius: 0;
  box-shadow: none;
}
.what-allon402 #strengths article > h3,
.what-allon402 #strengths .feature-block h3 {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--rf-ink);
  font-size: 20px;
}
.what-allon402 #strengths article > p:last-of-type {
  border-radius: 0;
}
/* 料金表：角丸・影・グラデーションの見出し行をやめ、太字の見出しと横線にする */
.what-allon402 #pricing .price-table {
  margin: 40px 0 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.what-allon402 #pricing .price-table tbody tr.treatment-header {
  background: none;
}
.what-allon402 #pricing .price-table tbody tr.treatment-header td {
  padding: 28px 4px 10px;
  color: var(--rf-ink);
  font-size: 17px;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid var(--rf-ink);
}
.what-allon402 #pricing .price-table tbody tr:not(.treatment-header) {
  border-bottom: 0;
}
.what-allon402 #pricing .price-table tbody tr:not(.treatment-header) td,
.what-allon402 #pricing .price-table tbody tr:not(.treatment-header) td:first-child,
.what-allon402 #pricing .price-table tbody tr:not(.treatment-header) td:last-child {
  padding: 16px 4px;
  font-size: 16px;
  border-bottom: 1px solid var(--rf-line);
}
/* 項目名は文節で改行し、金額の列は折り返さない（スマホで「500万円（税込）」が「（税」「込）」に分かれないように） */
.what-allon402 #pricing .price-table td,
.what-allon402 #pricing .price-table td * {
  word-break: auto-phrase;
}
.what-allon402 #pricing .price-table tbody tr:not(.treatment-header) td:last-child {
  white-space: nowrap;
}
.what-allon402 #cases table tr {
  background: none;
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  .what-allon402 .m_container {
    padding: 0 16px 40px;
  }
  .what-allon402 .m_container > section,
  .what-allon402 .m_container > div {
    margin-bottom: 48px;
    padding: 40px 0 0;
  }
  .what-allon402 .m_container > div.internal_links {
    margin-top: 32px;
    padding: 0 0 20px;
  }
  .what-allon402 .internal_links .link_buttons {
    gap: 8px 20px;
  }
  .what-allon402 .internal_links .link_buttons .button {
    font-size: 14px;
  }
  .what-allon402 .m_container > section h2,
  .what-allon402 .m_container > div h2 {
    margin-bottom: 20px;
    font-size: 23px;
  }
  .what-allon402 .m_container > section h3,
  .what-allon402 .m_container > div h3 {
    font-size: 18px;
  }
  .what-allon402 .m_container > div.cta_allon4 {
    margin-bottom: 48px;
    padding: 28px 16px;
  }
  .what-allon402 .cta_allon4 .cta_msg {
    font-size: 0.9375rem;
    text-align: left;
  }
  .what-allon402 .cta_allon4 .cta_msg br {
    display: none;
  }
  .what-allon402 #treatment-flow .item .inner {
    gap: 16px;
  }
  .what-allon402 #strengths .strength-item,
  .what-allon402 #strengths .feature-block {
    padding: 24px 0;
  }
}

/* ================================================================
   3. 院長紹介（#supervision：トップとオールオン4）
   ================================================================ */
#supervision .profile-container .profile-image {
  border: 0;
  box-shadow: none;
}
#supervision .profile-container .profile-info .career {
  gap: 0;
}
#supervision .profile-container .profile-info .career li {
  padding: 10px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rf-line);
  border-radius: 0;
}
#supervision .profile-container .profile-info .career li:first-child {
  border-top: 1px solid var(--rf-line);
}
#supervision .profile-container .profile-info h4 {
  padding-bottom: 0;
  border-bottom: 0;
}
/* 紹介ページへの案内：グラデーションのボタンをやめ、ほかの案内リンクと同じ線だけのボタンにする */
.what-allon402 #supervision a.section-bottom-link,
.top_supervision#supervision a.supervision_btn {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 28px;
  background: none;
  border: 1px solid var(--rf-gold-dark);
  border-radius: 0;
  box-shadow: none;
  color: var(--rf-gold-dark) !important;
  text-decoration: none;
  transform: none;
}
.what-allon402 #supervision a.section-bottom-link:hover,
.top_supervision#supervision a.supervision_btn:hover {
  background: var(--rf-cream);
  box-shadow: none;
  transform: none;
}

/* ================================================================
   4. 料金ページの部品（オールオン4・オールオン6、前歯、奥歯）
   ================================================================ */
/* 上部の札は、写真の上で文字を読ませるための単色の面なので残す。
   3つの特長：枠の中で語の途中で折り返していたため、1行に収まる大きさにして折り返しを止める */
.benefits_list {
  flex-wrap: wrap;
}
.benefits_list li {
  padding: 0 14px;
  font-size: 16px;
  line-height: 44px;
  white-space: nowrap;
}
.cost-hero__video {
  box-shadow: none;
}
/* 上部の写真：明るい部分に白い文字が重なって読みにくいため、暗い層を1枚重ねる
   （親テーマにある層を、子テーマの style.css が display: none で消しているので、ここで出し直す） */
.cost01.lower_mv .lower_mv_inner::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(38, 31, 20, 0.45);
}
.cost01.lower_mv .cost-hero,
.cost01.lower_mv .cost-hero__video {
  position: relative;
  z-index: 1;
}
/* 区画の見出し：濃い色の帯をやめ、白地の見出しにする */
.c-heading-bg {
  padding-block: 72px 0;
  background-color: transparent;
  color: var(--rf-ink);
  font-size: 30px;
  text-align: center;
}
:is(.c-heading-bg-cost, .c-heading-bg-reason, .c-heading-bg-facility, .c-heading-bg-question)::before {
  color: var(--rf-gold);
}
/* 問い合わせ欄の電話番号を途中で折り返さない */
.p-cta-main__inner .item_inner .inner {
  flex-wrap: wrap;
}
.p-cta-main__inner .item_inner .inner .number,
.p-cta-main__inner .item_inner .inner_sp .number {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .c-heading-bg {
    padding-block: 48px 0;
    padding-inline: 16px;
    font-size: 23px;
  }
  .benefits_list li {
    font-size: 14px;
    line-height: 38px;
  }
}

/* ================================================================
   5. トップの電話受付時間の枠（角丸をやめる）
   ================================================================ */
.topHours .hours_block {
  border-radius: 0;
}

/* ================================================================
   6. スマホで画面の横幅を超えていた部品（元の指定の抜けを補う）
   ================================================================ */
@media screen and (max-width: 767px) {
  /* 料金ページ（オールオン4・オールオン6）の材料の説明文：.material_txt と同じく、幅767pxの固定を外す */
  .material_txt_narrow {
    width: auto;
    margin: 0;
  }
  /* トップの「最新動画のお知らせ」：左右の矢印が画面の外に出て横にずれるため、スマホでは出さない（送りは下の点で行う）。
     スライダーの仕組み（slick）が矢印に直接 display を書き込むので、!important で上書きする */
  .top03_movie #top03_movie_list .slick-arrow {
    display: none !important;
  }
}
@media screen and (max-width: 359px) {
  /* 料金ページの電話ボタン：番号を折り返さないため、幅320px前後では番号の右の余白を外して収める */
  .p-cta-main.cost_CTA .p-cta-main__inner .inner_sp .number {
    margin-right: 0;
  }
}