@charset "UTF-8";

#container {
  padding-top: 80px;
  padding-bottom: 100px;
}

/*==================================================================

  メインビジュアル

==================================================================*/
.top_mainvisual {
  display: block;
  position: relative;
  height: 600px;
}
.mainvisual_wrap {
  height: 600px;
}
.top_mainvisual .inner {
  height: inherit;
  width: 1200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* キャッチフレーズ */
.mainvisual_catch {
  position: absolute;
  top: 120px;
}
.mainvisual_catch p {
  display: block;
  letter-spacing: 0.08em;
  font-size: 18.2px;
}
.mainvisual_catch span {
  display: block;
  letter-spacing: 0.08em;
  font-size: 15px;
}
.mainvisual_open {
  position: absolute;
  bottom: 30px;
  right: 0;
  width: 250px;
}
.mainvisual_open img {
  width: 100%;
}

/* メインスライド */
#slick_fade {
  width: 100%;
  height: 600px;
}
#slick_fade .slide_item img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center;
}

/*==================================================================

  .top_info

==================================================================*/
/* ↓↓↓見た目確認用↓↓↓ */
.top_info:not(.top_info2) {
  background: #f3f3f3;
}
.top_info:not(.top_info2) .top_info_flex {
  padding: 64px 0;
}
/* ↑↑↑見た目確認用↑↑↑ */

.top_info_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_info_item {
  width: 49%;
}

/********************************
  .top_news お知らせ
*********************************/
/* 旧仕様 */
.top_news_frame {
  padding: 35px 33px;
  border: 15px solid #f0f0f0;
}
.top_news_headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_info .top_news .top_news_frame {
  border: none;
  padding: 0;
  background: #fff;
  padding: 20px 12px;
}

/* お知らせの高さ */
.top_info .top_news .scroll_area {
  height: 285px;
  overflow-y: scroll;
}
.top_info .top_news ul {
  padding-right: 24px;
}

.news_list li {
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news_list li span {
  margin-right: 5px;
}
.news_list li em {
  margin-right: 5px;
  display: inline-block;
  min-width: 75px;
  padding: 1px 6px;
  font-style: normal;
  text-align: center;
}

/*スクロールバーの横幅指定*/
.scroll_area::-webkit-scrollbar {
  width: 5px;
}
/*スクロールバーの背景色・角丸指定*/
.scroll_area::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}
/*スクロールバーの色・角丸指定*/
.scroll_area::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ccc;
}

/********************************
  .top_sche 診療時間
*********************************/
.top_sche .sub_info_note li {
  color: var(--main-color);
  text-align: center;
  padding: 10px 5px;
  border: 1px solid var(--main-color);
  margin-bottom: 12px;
}
/* 補足リスト */
.top_sche .sub_info_note li:last-child {
  margin-bottom: 0;
}
.top_info2 .top_sche {
  border-radius: 10px;
  padding: 12px;
  background-color: rgba(192, 171, 154, 0.3);
}
/* 診療科目、お問い合わせリスト */
.top_sche_note {
  margin-top: 10px;
}
.top_sche_note dl {
  display: flex;
  margin-bottom: 12px;
}
.top_sche_note dl:last-child {
  margin-bottom: 0;
}
.top_sche_note dl dt {
  width: 25%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-weight: bold;
  padding: 16px 5px;
  background: #c0ab9a;
  border-radius: 10px;
  margin-right: 2%;
}
.top_sche_note dl dd {
  width: 73%;
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
}
.top_sche_note dl dd a {
  color: inherit;
}
.top_sche_note dl dd a:hover {
  color: inherit;
}

/********************************
  .top_access アクセス
*********************************/
.top_info2 .top_access {
  border-radius: 10px;
  background-color: rgba(192, 171, 154, 0.3);
}
.top_access {
  padding: 12px;
}
.top_access .map {
  position: relative;
}
.top_access .map .btn01 {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
}
.top_access .map img {
  width: 100%;
  /* 下記はサンプル画像が正方形のため調整用に記載しています */
  height: 320px;
  object-fit: cover;
  object-position: center;
}
.top_access p {
  margin-top: 10px;
}

/*==================================================================

  .top_doctor

==================================================================*/
.top_doctor_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_doctor_flex .text {
  position: relative;
  width: 70%;
}
.top_doctor_name {
  color: var(--main-color);
  line-height: 1.4;
  font-weight: bold;
}
.top_doctor_name span {
  font-size: 30px;
}
.top_doctor_img {
  width: 28%;
}
.top_doctor_img img {
  width: 100%;
}
.top_doctor .btn01 {
  float: right;
  width: 240px;
}
.top_doctor .btn01 a {
  display: block;
}

/*==================================================================

  .top_medical

==================================================================*/
.top_medical .text p {
  text-align: center;
}
.top_medical_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_medical_list a {
  display: block;
  width: 22%;
  margin-bottom: 20px;
  text-align: center;
}
.top_medical_list a img {
  width: 100%;
}
.top_medical_list dl {
  width: 100%;
}
.top_medical_list dl dt {
  margin-bottom: 7px;
}
.top_medical_list dl dd {
  font-weight: bold;
}
/*==================================================================

  .top_medical2

==================================================================*/
.top_medical2 .text p {
  text-align: center;
}
.top_medical2_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top_medical2_list a {
  display: block;
  width: 120px;
  margin-right: 17.14px;
  margin-bottom: 20px;
  text-align: center;
}
.top_medical2_list a:last-child {
  margin-right: 0;
}
.top_medical2_list dl {
  width: 100%;
}
.top_medical2_list dl dt {
  margin-bottom: 7px;
}
.top_medical2_list img {
  width: 100%;
}
.top_medical2_list dl dd {
  font-weight: bold;
}
/*==================================================================

  .top_medical3

==================================================================*/
.top_medical3 .text p {
  text-align: center;
}
.top_medical3_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top_medical3_list li {
  width: 120px;
  margin-right: 17.14px;
  margin-bottom: 20px;
  text-align: center;
}
.top_medical3_list li:last-child {
  margin-right: 0;
}
.top_medical3_list img {
  width: 100%;
}
/*==================================================================

  .top_medical4

==================================================================*/
.top_medical4 {
  padding-top: 80px;
}
.top_medical4_list {
  width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_medical4_list dl {
  position: relative;
  width: 270px;
  text-align: center;
  margin-bottom: 30px;
}
.top_medical4_list a {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.top_medical4_list dt img {
  width: 100%;
  border-radius: 100%;
}

/*==================================================================

  .loop_slide

==================================================================*/
.loop_slide_wrap .slick-slider div {
  transition: none;
}
.loop_slide_wrap .slick-list {
  overflow: hidden !important;
}
.loop_slide_wrap .slick-initialized .slick-slide {
  height: auto;
}
.loop_slide_wrap .slick-initialized .slick-slide img {
  width: 400px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.loop_slide_wrap .slick-initialized .slick-slide:focus {
  outline: none;
}

/*==================================================================================================================

  スマホ

==================================================================================================================*/
@media screen and (max-width: 640px) {
  #wrapper,
  html,
  body {
    min-height: 500px;
  }

  /*==================================================================

    メインビジュアル（スマホ）

  ==================================================================*/
  .top_mainvisual {
    height: 450px;
  }

  .mainvisual_wrap {
    height: 450px;
  }

  .top_mainvisual .inner {
    width: auto;
  }

  /* トップページキャッチフレーズ */
  .mainvisual_catch {
    position: absolute;
    left: 10px;
  }
  .mainvisual_catch h2 {
    margin-bottom: 10px;
    font-size: 22px;
  }
  .mainvisual_catch p {
    font-size: 15px;
  }
  .mainvisual_open {
    right: 10px;
    bottom: 10px;
    width: 150px;
  }

  /* メインスライド */
  #slick_fade {
    height: 450px;
  }
  #slick_fade .slide_item img {
    height: 450px;
  }

  /*==================================================================

    .top_info（スマホ）

  ==================================================================*/
  .news_list li a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .top_info_item {
    width: 100%;
    margin-top: 40px;
  }

  .top_info_item:first-child {
    margin-top: 0;
  }

  .top_info .top_news .scroll_area {
    height: 200px;
  }

  /*==================================================================

    .top_doctor（スマホ）

  ==================================================================*/
  .top_doctor_flex {
    flex-direction: column-reverse;
  }

  .top_doctor .text {
    width: auto;
  }

  .top_doctor_img {
    width: auto;
    margin-bottom: 15px;
  }

  .top_doctor_img p {
    text-align: center;
  }

  .top_doctor_img p img {
    width: 60%;
    margin: 0 auto 15px;
    display: block;
  }

  /*==================================================================

    .top_medical2（スマホ）

  ==================================================================*/
  .top_medical2_list a {
    width: 46%;
    margin-right: 8%;
  }

  .top_medical2_list a:nth-child(even) {
    margin-right: 0;
  }
  /*==================================================================

    .top_medical3（スマホ）

  ==================================================================*/
  .top_medical3_list li {
    width: 46%;
    margin-right: 8%;
  }

  .top_medical3_list li:nth-child(even) {
    margin-right: 0;
  }
  /*==================================================================

    .top_medical4（スマホ）

  ==================================================================*/
  .top_medical4_list {
    width: auto;
    margin: 0 8%;
  }

  .top_medical4_list dl {
    width: 45%;
    margin-right: 0;
  }
}

/*==================================================================================================================

  メインビジュアル（LP・新規）
  ─ 背景画像1枚をsticky でピン留めし、スクロールで「インプラントとは？」がせり上がる構成
  ─ 背景はスクロール量に応じて 0 → 80% の黒で暗転（JS制御：index.html foot）

==================================================================================================================*/

/* トップページではテンプレート共通ヘッダー／ナビ／追従ボタンを非表示
   （MV内に独自ロゴ・メニューを持つため）
   ※ main.js のスクロール追従が .nav_wrap に .fixed を付与し
     style.css の .nav_wrap.fixed{display:flex} が効くため !important で抑止 */
.header,
.nav_wrap,
.nav_wrap.fixed,
.fixed_web_yoyaku_btn,
.lp_gnav_logo {
  /* 共通ヘッダーのロゴはトップでは非表示（MV内ロゴを使用） */
  display: none !important;
}

/* SEO用h1はMVの見た目に干渉させず保持（視覚上の見出しはMV内ロゴ）。
   h1はMVの前＝ページ先頭へ移動済み。top.cssはindex専用なので対象はこのSEO h1のみ */
h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mv {
  --mv-gap: 20px; /* 画面端からの余白（上・左右 共通） */
  --mv-radius: 20px; /* 背景画像の角丸 */
  position: relative;
  padding-top: var(--mv-gap);
  /* MV背後（角丸ボックス周りの余白）に敷くクリーム地（デザイン指定）。画像未読込時は近似色で代替 */
  background: #f4f0e7 url(../images/top_main_bg.jpg) center top / cover no-repeat;
}

/* 固定される背景ビジュアル */
.mv_visual {
  position: sticky;
  top: var(--mv-gap);
  height: calc(100vh - var(--mv-gap) * 2);
  height: calc(100lvh - var(--mv-gap) * 2);
  margin: 0 var(--mv-gap);
  border-radius: var(--mv-radius);
  overflow: hidden;
  z-index: 1;
}
.mv_visual_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* メニュー可読性のための左側グラデーション（常時） */
.mv_visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.06) 38%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}
/* スクロールで濃くなる黒オーバーレイ（JSで opacity を 0→0.8 に） */
.mv_visual_shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* 背景の上を流れるコンテンツ層（背景の高さ分だけ引き上げて重ねる） */
.mv_layer {
  position: relative;
  z-index: 2;
  margin-top: calc((100vh - var(--mv-gap) * 2) * -1);
  margin-top: calc((100lvh - var(--mv-gap) * 2) * -1);
}

.mv_screen {
  position: relative;
  height: calc(100vh - var(--mv-gap) * 2);
  height: calc(100lvh - var(--mv-gap) * 2);
  margin: 0 var(--mv-gap);
  box-sizing: border-box;
}

/*---------- MV ----------*/
/* 1. 親要素：元々あった左側グラデーションの暗幕 */
.mv_visual {
  position: sticky;
  overflow: hidden;
}

/* 左側のグラデーション（文字を読みやすくする常時の暗幕） */
.mv_visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
  z-index: 3; /* 画像(z-index: 1〜2)より手前に重ねて文字を読みやすくする */
}

/* 2. スライド画像：一番奥に配置 */
.mv_visual_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1; /* 最背面 */
}

/* 表示中のスライド（非表示スライドよりは上、暗幕よりは下） */
.mv_visual_img.is-active {
  opacity: 1;
  z-index: 2;
}

/* 3. スクロールでさらに暗くなるシェード（.mv_visual_shade） */
.mv_visual_shade {
  position: absolute;
  inset: 0;
  background-color: #000;

  /* 【重要】もし「最初から全体を少し暗くしておきたい」場合は、
     初期の不透明度を 0 ではなく、0.1 や 0.2 などに設定します。
     （スクロールするとJSがここを 0.8 まで自動で引き上げます） */
  opacity: 0.15; /* 初期状態で15%の黒を被せて落ち着かせる（デザインに合わせて調整してください） */

  pointer-events: none;
  z-index: 4; /* 最前面に重ねる */
  transition: opacity 0.1s linear; /* スクロール時の変化をスムーズにする場合 */
}

/*---------- 画面1：ヒーロー ----------*/
.mv_hero_logo {
  position: absolute;
  top: 45px;
  left: 81px;
  margin: 0;
  line-height: 1;
}
.mv_hero_logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 左メニュー＋WEB予約（MVヒーロー内に配置。スクロールで一緒に流れる） */
.mv_sidenav {
  position: absolute;
  left: 5.5%;
  top: 67%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vh, 150px);
}
.mv_nav {
  /* 位置は .mv_sidenav 側で制御（追従はfixedで実現） */
}
.mv_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mv_nav a {
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  /* line-height: 2.941; */
  line-height: 2.8;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s;
}
.mv_nav a:hover {
  opacity: 0.65;
}

.mv_reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 60px;
  background: #917813;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}
.mv_reserve:hover {
  opacity: 0.85;
}

.mv_catch {
  position: absolute;
  top: 16%;
  right: 6%;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 2;
  letter-spacing: 0.4em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4), 0 2px 14px rgba(0, 0, 0, 0.6);
}
.mv_catch .is_lg {
  font-size: 150%; /* 28px → 42px */
}

.mv_badges {
  position: absolute;
  left: 50.2%;
  bottom: 9%;
  transform: translateX(-50%);
  display: flex;
  gap: 23px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}
.mv_badges li {
  flex: 0 1 260px;
}
.mv_badges img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/*---------- 画面2：インプラントとは？ ----------*/
.mv_about_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 251px;
  height: 100%;
  box-sizing: border-box;
}
.mv_about_head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  /* フェードイン初期状態 */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.mv_about_ja {
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 43px;
  line-height: 1.163;
  letter-spacing: 0.2em;
  color: #fff;
}
.mv_about_en {
  margin-top: 34px;
  font-family: "EB Garamond", serif;
  font-size: 17px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}
.mv_about_text {
  flex: 1 1 600px; /* grow=1 で右の余白を使って広がる（最低600px） */
  max-width: 710px; /* 広がりすぎ防止の上限。好みで調整可 */
  /* フェードイン初期状態 */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}
.mv_about_text p {
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  line-height: 2.368;
  letter-spacing: 0.1em;
  color: #fff;
}
.mv_about_text p + p {
  margin-top: 1.7em;
}

/* スクロールで表示 */
.mv_about.is-show .mv_about_head,
.mv_about.is-show .mv_about_text {
  opacity: 1;
  transform: none;
  padding-top: 45px;
}
.mv_about_text {
  padding-left: 145px;
}

/*==================================================================

  メインビジュアル（PC中間幅：〜1900px）
  ・キャッチコピーを80%に縮小（下のバナーへの被り軽減）
  ・左メニュー＋WEB予約を約150px持ち上げ

==================================================================*/
@media screen and (max-width: 1900px) {
  /* キャッチコピーを80%に縮小。右上を基点に縮めて右端の位置を維持 */
  .mv_catch {
    transform: scale(0.8);
    transform-origin: top right;
  }
  /* 左メニュー＋WEB予約を約150px持ち上げる */
  .mv_sidenav {
    transform: translateY(calc(-50% - 150px));
  }
}

/*==================================================================

  メインビジュアル（タブレット縦＋スマホ縦＝案B：ピン留め2画面演出オフ）
  ・通常フローで縦積み → 白い待機ゾーン（インプラントとは）が被らない
  ・【修正】スマホでもスライドショー（.mv_visual）を非表示にせず、ヒーローの背景として動かす

==================================================================*/
@media screen and (orientation: portrait) {
  /* 引き上げ（負マージン）を解除＝通常フロー化 */
  .mv_layer {
    margin-top: 0;
    position: relative;
    z-index: 2; /* スライドショーの上にコンテンツを重ねる */
  }

  /* 【重要】display: none を解除。
     ヒーローエリア（1画面目）の「背面」に絶対配置で敷くことで、スライドショーをスマホでも動かす */
  .mv_visual {
    display: block !important;
    position: absolute; /* stickyを解除し、親要素に対して絶対配置 */
    top: var(--mv-gap);
    left: var(--mv-gap);
    width: calc(100% - var(--mv-gap) * 2);
    height: calc(100vh - var(--mv-gap) * 2);
    height: calc(100lvh - var(--mv-gap) * 2);
    margin: 0;
    z-index: 1; /* コンテンツレイヤー（z-index:2）の裏に回す */
  }

  /* 各画面に角丸を付与 */
  .mv_screen {
    border-radius: var(--mv-radius);
    overflow: hidden;
  }

  /* ヒーロー（1画面目）は自前の背景画像を消し、
     背後のスライドショー（.mv_visual）が透けて見えるようにグラデーションのみにする */
  .mv_hero {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 38%, rgba(0, 0, 0, 0) 68%) !important;
  }

  /* 2画面目のabout（インプラントとは）は、スクロールすると下から出てくるので
     PC版と被らないように、スマホ専用の背景画像をそのまま敷き詰める（PCと同じ） */
  .mv_about {
    margin-top: var(--mv-gap); /* ヒーローとの間に余白 */
    background: url(../images/sp_top_implant_bg.jpg) center / cover no-repeat;
  }

  /* about（インプラントとは）：PCと同じ2カラム横並び。
     ただしPCの gap:251px はタブレット幅だと広すぎるので間隔だけ詰める */
  .mv_about_inner {
    gap: 80px;
    padding: 0 5%;
  }
  .mv_about_text {
    padding-left: 0; /* PCの padding-left:145px を打ち消し、テキスト幅を確保 */
  }
}

/*==================================================================

  メインビジュアル（高さが低い画面＝横向きスマホ／小さいノートPC等）
  ・画面が低いと絶対配置の要素（ロゴ/メニュー/バナー/キャッチ）が重なるため、
    最低700pxを確保（画面が十分高ければそのまま画面いっぱい、低ければ700pxでスクロール）
  ・縦向きは案B（背景sticky撤去）と競合するので landscape 限定にする（縦向きでヒーローが消える不具合の修正）
  ・3値（背景sticky・引き上げmargin・各画面）は同じ高さに揃える必要があるので一括指定

==================================================================*/
@media screen and (max-height: 800px) and (orientation: landscape) {
  .mv_visual {
    height: max(calc(100lvh - var(--mv-gap) * 2), 700px);
  }
  .mv_layer {
    margin-top: calc(max(calc(100lvh - var(--mv-gap) * 2), 700px) * -1);
  }
  .mv_screen {
    height: max(calc(100lvh - var(--mv-gap) * 2), 700px);
  }

  /* ロゴ：左上に小さく寄せる（メニュー「ホーム」と被らないように） */
  .mv_hero_logo {
    width: 140px;
    top: 12px;
    left: 16px;
  }
  /* キャッチ：上げて小さく（下のバナーに隠れないように）。〜1900pxの縮小(scale)は打ち消し、font-sizeで直接制御 */
  .mv_catch {
    top: 6%;
    right: 5%;
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: 0.12em;
    transform: none;
  }
  .mv_catch .is_lg {
    font-size: 130%;
  }
  /* WEB予約ボタン：メニューとの間隔を詰めて上へ＋小さく（1つ目のバナーと被らないように） */
  .mv_sidenav {
    gap: 14px;
  }
  .mv_reserve {
    width: 210px;
    height: 60px;
    font-size: 15px;
  }
}

/*==================================================================

  メインビジュアル（LP・新規／スマホ）

==================================================================*/
@media screen and (max-width: 640px) {
  .mv {
    --mv-gap: 12px;
  }

  .mv_hero_logo {
    width: 130px;
    max-width: 40%;
    top: 16px;
    left: 16px; /* 左上に小さく */
  }

  .mv_sidenav {
    display: none; /* SPのメニュー/CTAはバーガー仕様確定後に実装。暫定で非表示 */
  }

  .mv_catch {
    top: 13%;
    right: 5%;
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: 0.18em;
    transform: none;
  }
  .mv_catch .is_lg {
    font-size: 125%; /* SPでは大きい文字も控えめに（150%→125%）*/
  }

  .mv_badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    bottom: 4%;
    max-width: 92%;
  }
  .mv_badges li {
    flex: 0 0 46%;
  }

  /* aboutは高さを内容に追従（auto）させ、本文を最後まで表示（切れ・MV被り防止） */
  .mv_about {
    height: auto;
  }
  .mv_about_inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    gap: 20px;
    padding: 52px 8%; /* 上下に余白を確保 */
  }
  .mv_about_ja {
    writing-mode: horizontal-tb;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
  }
  .mv_about.is-show .mv_about_head,
  .mv_about.is-show .mv_about_text {
    padding-top: 0;
  }
  .mv_about_en {
    margin-top: 14px;
    font-size: 14px;
  }
  .mv_about_text {
    flex: 0 1 auto;
  }
  .mv_about_text p {
    font-size: 14px;
    line-height: 2.1;
  }
  /* SPは横幅が狭く<br>位置が崩れやすいので折返しは自動に */
  .mv_about_text br {
    display: none;
  }
}

/*==================================================================================================================

  お悩み・お困りごと・疑問（.top_trouble）
  ─ タブボタンで「左の画像」「右パネルの背景＋内容」を同時に切替（JS：index.html foot）

==================================================================================================================*/

/* SPだけ改行する<br>（PCでは無効・レスポンシブ用ユーティリティ） */
.br_sp {
  display: none;
}
@media screen and (max-width: 640px) {
  .br_sp {
    display: inline;
  }
}

/* スクロールで主要見出しをフェードイン（JS：is-inをIntersectionObserverで付与） */
.fadein {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fadein.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fadein,
  .fadein.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 共通H2タイトル（日本語h2＋英語p） */
.tit_h2 {
  position: relative;
  z-index: 1;
  text-align: center;
}
.tit_h2 h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #111;
}
.tit_h2 p {
  margin-top: 18px;
  font-family: "EB Garamond", serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: #c5bda8;
}

.top_feature .tit_h2 p {
  margin-top: 15px;
}

.top_trouble {
  position: relative;
  /*background: #faf6ec;*/ /* 仮のクリーム地（カンプ準拠／必要なら調整） */
}

/* タイトル帯 */
.top_trouble_head {
  position: relative;
  overflow: hidden;
  padding: 180px 20px 151px;
  /* MV背後と同じクリーム地 */
  background: #f4f0e7 url(../images/top_main_bg.jpg) center top / cover no-repeat;
}
.top_trouble_deco {
  position: absolute;
  top: 0;
  z-index: 0;
  pointer-events: none;
}
.top_trouble_deco_left {
  left: 0;
  top: 350px;
  width: clamp(180px, 24vw, 430px);
}
.top_trouble_deco_right {
  right: 0;
  width: clamp(150px, 20vw, 393px);
}

/* 切替エリア（背景＝ボックス全体／左画像＝原寸で重ねる）
   ボックス高さ＝左画像の高さ(640×900)。背景・左画像・内容を重ねて配置 */
.top_trouble_switch {
  position: relative;
  height: 900px;
  overflow: hidden;
  /* 左画像の幅。〜1760pxで640px、以下は幅だけ縮めて右の文字幅をほぼ一定に保つ（高さは900px固定）。最小340px */
  --trouble-img-w: clamp(340px, 100vw - 1120px, 640px);
}

/* 背景：ボックス全体（タブ切替） */
.top_trouble_bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.top_trouble_bg img.is-active {
  opacity: 1;
  visibility: visible;
}
/* テキスト可読性のための薄い暗幕 */
.top_trouble_switch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(35, 38, 45, 0.01);
  pointer-events: none;
}

/* 左画像：原寸(640×900)・左端から100px（タブ切替）。隙間から背景が見える */
.top_trouble_img {
  position: absolute;
  left: 100px;
  top: 0;
  z-index: 2;
  width: var(--trouble-img-w); /* 高さは900px固定・幅のみ流動 */
  height: 900px;
}
.top_trouble_img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 900px;
  object-fit: cover; /* 幅が縮んでも歪まず中央をクロップ */
  object-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.top_trouble_img img.is-active {
  opacity: 1;
  visibility: visible;
  object-position: 50% 41%;
}

/* 右コンテンツ：左画像の右側・天地中央 */
.top_trouble_inner {
  position: absolute;
  z-index: 3;
  inset: 0 0 0 calc(100px + var(--trouble-img-w)); /* 左端を画像の右端に追従。幅が縮むほど右の文字領域が広がる */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 171px 10% 40px 4%;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: center;
}

/* 切替コンテンツ（全パネルを同じ位置に重ね、最も高いパネルに合わせる） */
.top_trouble_panels {
  display: grid;
  width: 100%;
  /* デザイン準拠：背景写真から際立たせる縁取り（暗い縁）。配下のttl/lead/en/listに継承 */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.top_trouble_panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.top_trouble_panel.is-active {
  opacity: 1;
  visibility: visible;
}

.top_trouble_ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.top_trouble_ttl::before,
.top_trouble_ttl::after {
  content: "";
  flex: 0 1 181px; /* 画像幅181px。狭い幅では縮む */
  height: 1px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.top_trouble_ttl::before {
  background-image: url(../images/tit_h3_trouble_line_left.png);
}
.top_trouble_ttl::after {
  background-image: url(../images/tit_h3_trouble_line_right.png);
}
.top_trouble_lead {
  margin-top: 53px;
  font-family: "Shippori Mincho", serif;
  font-size: 26px;
  letter-spacing: 0.1em;
  color: #ead275;
}
.top_trouble_en {
  margin-top: 7px;
  font-family: "EB Garamond", serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
}
.top_trouble_list {
  margin: 26px auto 0;
  /* margin-top: 26px; */
  max-width: 650px;
  width: 100%;
  list-style: none;
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  line-height: 2.105;
  letter-spacing: 0.1em;
}

.top_trouble_list li {
  position: relative;
  display: inline-block;
}

.top_trouble_list li::before {
  display: block;
  position: absolute;
  top: calc((2em - 3px) / 2);
  left: -14px;
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1280px) {
  .top_trouble_ttl {
    font-size: 27px;
  }
  .top_trouble_list {
    font-size: 18px;
  }
}
/* タブボタン（グループは中央／折返しは左寄せ＝上段2＋下段1） */
.top_trouble_tab {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 19px 26px;
  width: 100%;
  max-width: 662px;
  margin-top: 20px;
  list-style: none;
}
.top_trouble_tab li {
  flex: 0 0 auto;
}
.top_trouble_tab button {
  width: 310px;
  height: 56px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.3s ease;
}
.top_trouble_tab button:hover {
  background: rgba(255, 255, 255, 0.15);
}
.top_trouble_tab button.is-active {
  background: rgba(255, 255, 255, 0.3); /* 選択中：半透明の白フィル */
}

/*============ お悩み（中間幅 〜1280px）============
  ボタンを小さくして2列（2＋1）に収め、3段化＝隠れを防止。
  ボタン内テキストは折り返さない（white-space:nowrap） */
@media screen and (max-width: 1280px) {
  .top_trouble_tab {
    max-width: 500px; /* 2列が収まる幅に縮小 */
    gap: 14px;
  }
  .top_trouble_tab button {
    width: 230px; /* 310 → 230 */
    height: 50px; /* 56 → 50 */
    font-size: 14px; /* 17 → 14 */
    letter-spacing: 0.04em;
    white-space: nowrap; /* ボタン内テキストを1行に固定 */
  }
}

/*================== お悩み（スマホ）==================*/
@media screen and (max-width: 640px) {
  .tit_h2 h2 {
    font-size: 22px;
    line-height: 1.7;
  }
  .tit_h2 p {
    font-size: 12px;
    letter-spacing: 0;
  }
  .top_trouble_head {
    padding: 44px 16px 32px;
  }
  .top_trouble_deco_left {
    width: 120px;
  }
  .top_trouble_deco_right {
    width: 110px;
  }
  /* SPは縦積み（画像→内容）。高さは内容に追従、左画像はフィット表示に */
  .top_trouble_switch {
    height: auto;
  }
  .top_trouble_img {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 240px;
  }
  .top_trouble_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .top_trouble_inner {
    position: relative;
    inset: auto;
    left: 0;
    padding: 36px 15px;
  }
  .top_trouble_ttl {
    gap: 14px;
    font-size: 26px;
  }
  .top_trouble_ttl::before,
  .top_trouble_ttl::after {
    flex-basis: 60px; /* SPは線を短めに（flex化のためwidthでなくbasis） */
  }
  .top_trouble_lead {
    font-size: 17px;
    margin-top: 15px;
  }
  .top_trouble_en {
    margin-top: 5px;
    font-size: 12px;
    letter-spacing: 0;
  }
  .top_trouble_list {
    font-size: 15px;
    line-height: 1.9;

    text-align: left;
    max-width: 290px;
    width: 100%;
    margin: 26px auto 0;
  }
  /* 折返しを均等割り＋日本語の文節境界で改行＝1文字落ち（文字落ち）を防ぐ */
  .top_trouble_list li {
    text-align-last: left;
    /* text-wrap: balance;
    word-break: auto-phrase; */
  }
  /* SPはパネルを重ねず“アクティブだけ高さを持つ”＝最長タブに合わせた余白が出ない */
  .top_trouble_panels {
    display: block;
  }
  .top_trouble_panel {
    display: none;
  }
  .top_trouble_panel.is-active {
    display: block;
  }
  .top_trouble_tab {
    align-self: stretch;
    justify-content: center;
    gap: 10px;
    max-width: none;
  }
  .top_trouble_tab li {
    flex: 1 1 100%;
  }
  .top_trouble_tab button {
    width: 100%;
  }
}

/*==================================================================================================================

  当院のインプラント治療の特徴（.top_feature）
  ─ テキストボックス＋スライダーボックスを1セクションに。背景はセクション全体に敷く
  ─ スライダーは奇数=下げ/偶数=上げの段差56px、自動で横スクロール（JS：複製＋距離実測）

==================================================================================================================*/
.top_feature {
  padding-top: 203px;
  padding-bottom: 174px;
  background: url(../images/top_feature_bg2.jpg) center top / cover no-repeat;
}

/* テキストボックス */
.top_feature_text {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.top_feature_eyebrow {
  margin: 0 0 28px;
  font-family: "Shippori Mincho", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.923;
  letter-spacing: 0.2em;
  color: #111;
}
/* タイトル下のリード文 */
.top_feature_lead {
  margin-top: 60px;
}
.top_feature_lead p {
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  line-height: 2.368;
  letter-spacing: 0.1em;
  color: #111;
}
.top_feature_lead p + p {
  margin-top: 21px;
}

/* スライダーボックス */
.top_feature_slider {
  margin-top: 131px; /* テキストボックスとの間 */
  overflow: hidden;
}
.top_feature_track {
  display: flex;
  gap: 65px; /* スライダー同士の間隔 */
  width: max-content;
  align-items: flex-start;
  animation: featureScroll var(--feat-dur, 40s) linear infinite;
}
.top_feature_slide {
  flex: 0 0 auto;
  width: 370px; /* 画像の原寸（370×460）でそのまま表示 */
}
.top_feature_slide.is-lower {
  margin-top: 116px;
}
.top_feature_slide img {
  display: block;
  width: 370px;
  height: 460px;
}
@keyframes featureScroll {
  to {
    transform: translateX(calc(-1 * var(--feat-adv, 1740px)));
  }
}

/*================== 特徴（スマホ）==================*/
@media screen and (max-width: 640px) {
  .top_feature {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .top_feature_eyebrow {
    margin-bottom: 18px;
    font-size: 18px;
  }
  .top_feature_lead {
    margin-top: 30px;
  }
  .top_feature_lead p {
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0;
    text-align: left;
  }
  /* SPは長い行が崩れやすいので<br>は無効化 */
  .top_feature_lead br {
    display: none;
  }
  .top_feature_slider {
    margin-top: 64px;
  }
  /* SPはスライダーを半分サイズに（370×460→185×230、段差・gapも半分）。
     マーキー距離 --feat-adv はJSが resize で自動再計算（速度は距離比例で一定）*/
  .top_feature_track {
    gap: 33px;
  }
  .top_feature_slide {
    width: 185px;
  }
  .top_feature_slide img {
    width: 185px;
    height: 230px;
  }
  .top_feature_slide.is-lower {
    margin-top: 58px;
  }
}

/*==================================================================================================================

  4つの特徴バンド（.feat）
  ─ full-bleed の背景画像(1920×500)を cover で敷く（ウィンドウが広くてもカバー）
  ─ 奇数=右寄せ/縦線左、偶数=左寄せ/縦線右。茶の十字線＋Feature番号（縦書き）
  ─ 本文等は左右ウィンドウから100px。うっすら大enのみ端から約50pxまで食い込む

==================================================================================================================*/
.feat {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}
.feat--01 {
  background-image: url(../images/top_feature_01_bg.jpg);
}
.feat--02 {
  background-image: url(../images/top_feature_02_bg.jpg);
}
.feat--03 {
  background-image: url(../images/top_feature_03_bg.jpg);
}
.feat--04 {
  background-image: url(../images/top_feature_04_bg.jpg);
}

/* 茶色の十字線 */
.feat::before {
  /* 縦線（端から100px） */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(172, 148, 53, 0.5);
  z-index: 1;
}
.feat--right::before {
  left: 100px;
}
.feat--left::before {
  right: 100px;
}
.feat::after {
  /* 横線（全幅） */
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(172, 148, 53, 0.5);
  z-index: 1;
}

/* Feature番号（縦書き・縦線の外側） */
.feat_no {
  position: absolute;
  top: 44px;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: "EB Garamond", serif;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: rgb(172, 148, 53);
}
/* 左辺ラベル（奇数）は下→上向き（デザイン準拠）にするため180°回転 */
.feat--right .feat_no {
  left: 50px;
  top: 60px;
  transform: rotate(180deg);
}
.feat--left .feat_no {
  right: 55px;
  top: 60px;
  transform: rotate(180deg);
}

/* 内側テキスト（左右ウィンドウから100px） */
.feat_inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 100px;
  box-sizing: border-box;
}
.feat--right .feat_inner {
  text-align: right;
}
.feat--left .feat_inner {
  text-align: left;
}

/* タイトル＋背後のうっすら大en */
.feat_ttlwrap {
  position: relative;
}
.feat_bgtext {
  position: absolute;
  bottom: 8px;
  margin: 0;
  font-family: "EB Garamond", serif;
  font-size: 120px;
  line-height: 0.75;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.feat--right .feat_bgtext {
  right: -50px;
  top: -40px;
}
.feat--left .feat_bgtext {
  left: -50px;
  top: -40px;
}
.feat_ttl {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 2.5;
  letter-spacing: 0.06em;
  color: #fff;
}
.feat_en {
  margin: 2px 0 0;
  font-family: "EB Garamond", serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: rgba(151, 129, 47, 0.7);
}
.feat_text {
  margin: 24px 0 0;
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  line-height: 2.368;
  letter-spacing: 0.1em;
  color: #fff;
}

/*================== 4つの特徴（スマホ）==================*/
@media screen and (max-width: 640px) {
  .feat {
    min-height: 0;
    padding: 56px 0;
  }
  .feat--01 {
    background-position: 25% 50%;
  }
  .feat--02 {
    background-position: 75% 50%;
  }
  .feat--right::before {
    left: 24px;
  }
  .feat--left::before {
    right: 24px;
  }
  .feat::after {
    top: 28px;
  }
  .feat_no {
    top: 24px;
    font-size: 14px;
  }
  .feat--right .feat_no {
    left: 1px;
  }
  .feat--left .feat_no {
    right: 1px;
  }
  .feat_inner {
    padding: 0 40px;
  }
  .feat_bgtext {
    font-size: 52px;
  }
  .feat--right .feat_bgtext {
    right: -16px;
  }
  .feat--left .feat_bgtext {
    left: -16px;
  }
  .feat_ttl {
    font-size: 18px;
    line-height: 1.9;
    letter-spacing: 0;
  }
  .feat_en {
    font-size: 12px;
  }
  .feat_text {
    margin-top: 16px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 2;
    text-align: left;
  }
  .feat_text br {
    display: none;
  }
}

/*==================================================================================================================

  費用・保証セクション（.top_price）
  ─ ①ボタン2つ（今回）／②費用・保証ボックス（後で）。背景はセクション共通（後で設定）

==================================================================================================================*/
.top_price {
  padding-top: 100px;
  /* padding-bottom: 169px; */
  background-color: #f3ede1; /* テクスチャ外の保険色（クリーム）*/
  background-image: url(../images/top_price_bg.jpg);
  background-position: center top;
  background-size: cover; /* 幅が広くても余白なく敷き詰める */
  background-repeat: no-repeat;
}
/* ボタン2つのボックス */
.top_price_btns {
  display: flex;
  justify-content: center;
  gap: 40px; /* ボタン間 */
  max-width: 1338px; /* 629×2 + 40 + 左右padding */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.price_btn {
  position: relative;
  flex: 1 1 0;
  max-width: 599px;
  height: 119px;
  padding-left: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
  /* デザイン準拠：背景から浮かせる薄い影 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.price_btn:hover {
  opacity: 0.88;
}
/* 旧プレフィックス0deg＝左→右（暗→明）*/
.price_btn--web {
  background: linear-gradient(to right, rgba(128, 101, 61, 0.996) 0%, rgb(196, 162, 85) 100%);
}
.price_btn--case {
  background: linear-gradient(to right, rgba(34, 51, 83, 0.996) 0%, rgb(95, 133, 207) 100%);
}
.price_btn_icon {
  position: absolute;
  left: 98px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}
.price_btn_icon img {
  width: 80px; /* アイコン原寸 */
  height: 80px;
}
.price_btn_txt {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}
.price_btn_arrow {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}

/*================== 費用・保証（スマホ）==================*/
@media screen and (max-width: 640px) {
  .top_price {
    padding-top: 40px;
    /* padding-bottom: 40px; */
  }
  .price_btn_icon img {
    width: 40px;
    height: 40px;
  }
  .top_price_btns {
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;
  }
  .price_btn {
    max-width: none;
    height: 110px;
    padding: 10px 0;
  }
  .price_btn_icon {
    left: 18px;
  }
  .price_btn_txt {
    font-size: 18px;
  }
  .price_btn_arrow {
    right: 18px;
  }
}

/*==================================================================================================================

  治療費用と補償（.top_price_main / .price_box）

==================================================================================================================*/
.top_price_main {
  margin-top: 110px;
}
.price_box {
  position: relative;
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 101px 71px;
  background: #fff;
  border-radius: 14px;
  box-sizing: border-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

/* インプラント料金タイトル（金の線） */
.price_ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: #111;
}
.price_ttl::before,
.price_ttl::after {
  content: "";
  flex: 0 1 218px; /* 画像幅218px。狭い幅では縮む */
  height: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.price_ttl::before {
  background-image: url(../images/tit_h3_price_line_left.png);
}
.price_ttl::after {
  background-image: url(../images/tit_h3_price_line_right.png);
}

/* 総額 */
.price_total {
  margin: 7px 0 0;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  color: #111;
}
.price_total_lbl {
  margin-right: 10px;
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.price_total b {
  margin: 0 4px;
  font-family: "EB Garamond", serif;
  font-size: 65px;
  font-weight: 400;
  color: #917813;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.price_total_unit {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 注記グレーボックス */
.price_lead {
  margin: 34px 0 0;
  padding: 24px 30px;
  background: #f2f2f2;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 2.059;
  color: #111;
}

/* 料金テーブル */
.price_table {
  width: 100%;
  margin: 40px 0 0;
  border-collapse: separate;
  border-spacing: 0 2px;
}
.price_table th {
  width: 38%;
  height: 70px; /* 1行のセルは70px（中身は天地中央）*/
  padding: 8px 20px;
  background: #3f4d6e;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}
.price_table td {
  height: 70px; /* 1行は70px。改行ありのセル（オペ代）は自然に伸びる */
  padding: 8px 30px;
  background: #eef0f3;
  color: #111;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  text-align: center;
  vertical-align: middle;
}
.price_table td b {
  font-family: "EB Garamond", serif;
  font-size: 28px; /* 金額28px */
  font-weight: 400;
}
.price_table_note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #555;
}

/* ●オプション */
.price_opt_ttl {
  margin: 36px 0 14px;
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  font-weight: 700;
  color: #111;
}
.price_opt_ttl + .price_table {
  margin-top: 0;
}
.price_opt_note {
  margin: 12px 0 0;
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  color: #555;
}

/* 各セクション（デンタルローン／医療費控除／補償）*/
.price_sec {
  margin-top: 56px;
}
.price_sec_ttl {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #111;
  white-space: nowrap;
}
.price_sec_ttl::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8d8d8;
}
.price_text {
  margin: 0 0 1.6em;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 2.1;
  color: #111;
  letter-spacing: 0.05em;
}
.price_text:last-child {
  margin-bottom: 0;
}
.price_dot {
  margin: 0 0 0.6em;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #111;
}

/* 補償リスト */
.price_warranty {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price_warranty li {
  position: relative;
  margin-bottom: 1em;
  padding-left: 1.2em;
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  line-height: 2.1;
  color: #111;
}
.price_warranty li::before {
  content: "・";
  position: absolute;
  left: 0;
  font-size: 18px;
  line-height: 1.8;
}

/*================== 治療費用と補償（スマホ）==================*/
@media screen and (max-width: 640px) {
  .top_price_main {
    margin-top: 40px;
  }
  .price_box {
    margin-top: 40px;
    padding: 36px 10px;
    border-radius: 10px;
    width: calc(100% - 20px);
  }
  .price_ttl {
    gap: 6px;
    font-size: 16px;
  }
  .price_ttl::before,
  .price_ttl::after {
    flex-basis: 40px;
  } /* flex化のためwidthでなくbasis */
  .price_total_lbl,
  .price_total_unit {
    font-size: 18px;
  }
  .price_total b {
    font-size: 38px;
  }
  .price_lead {
    padding: 18px;
    font-size: 14px;
  }
  /* SPはセル縦積み・高さは自動（70px固定だと縦長になるため）*/
  .price_table th,
  .price_table td {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    text-align: center;
  }
  .price_table th {
    padding: 12px;
    font-size: 16px;
  }
  .price_table td {
    padding: 14px 16px;
  }
  .price_table td b {
    font-size: 22px;
  }
  .price_sec_ttl {
    gap: 14px;
    font-size: 22px;
  }
  .price_text,
  .price_dot,
  .price_warranty li {
    font-size: 14px;
  }
}

/*==================================================================================================================

  治療の流れ（.top_flow）タブ切替
  ─ タブ：金(アクティブ)/濃グレー(非アクティブ)。背景=全幅cover、画像=原寸(1000×500)中央
  ─ タブで「タブ色・背景・画像・テキスト」を同時切替（JS：index.html foot）

==================================================================================================================*/
.top_flow {
  position: relative;
  padding-top: 0; /* タイトルを波線の下に置く（幅基準でスケール／調整可）*/
}
/* 上のセクションとの境界をまたぐ金の波線（擬似要素・全幅）*/
.top_flow::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  padding-top: 28.8%;
  transform: translateY(-50%);
  background: url(../images/top_flow_wave.png) center top / 100% 100% no-repeat;
  z-index: 0;
  pointer-events: none;
}
.top_flow .tit_h2 {
  position: relative;
  z-index: 1; /* 波線より前面 */
}
.top_flow .tit_h2 p {
  margin-top: 9px;
}
/* タブ（1920幅で330×60、狭くなると縮む。左右100px） */
.flow_tab {
  position: relative;
  display: flex;
  gap: 18px;
  width: calc(100% - 200px);
  max-width: 1720px;
  margin: 63px auto 0;
  padding: 0;
  list-style: none;
}
.flow_tab li {
  flex: 1 1 0;
}
.flow_tab button {
  width: 100%;
  height: 60px;
  border: none;
  background: #494949; /* 非アクティブ：濃グレー */
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.3s ease;
}
.flow_tab button:hover {
  background: #5a5a5a;
}
.flow_tab button.is-active {
  background: #917813;
} /* アクティブ：金 */

/* 中間幅（〜1310px）：1番目「検査・カウンセリング」が1文字落ちするのでタブ文字を縮小 */
@media screen and (max-width: 1310px) {
  .flow_tab button {
    font-size: 16px;
  }
}

/* 画像エリア（背景=全幅cover ＋ 中央の原寸画像） */
.flow_visual {
  position: relative;
  height: 500px;
  margin-top: 46px;
  overflow: hidden;
}
.flow_bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.flow_bg img.is-active {
  opacity: 1;
  visibility: visible;
}
.flow_img img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1000px; /* 画像原寸 */
  height: 500px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.flow_img img.is-active {
  opacity: 1;
  visibility: visible;
}

/* テキスト（画像との間55px、タブで切替） */
.flow_text {
  margin-top: 48px;
  text-align: center;
  width: 100%;
  max-width: 1000px;
  margin: 48px auto 0;
  text-align: left;
}
.flow_text p {
  display: none;
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 2.353;
  letter-spacing: 0.04em;
  color: #111;
}
.flow_text p.is-active {
  display: block;
}

/*================== 治療の流れ（スマホ）==================*/
@media screen and (max-width: 640px) {
  .top_flow {
    padding-top: 0;
  }
  .flow_tab {
    width: auto;
    margin: 36px 16px 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .flow_tab li {
    flex: 1 1 47%; /* 2列 */
  }
  .flow_tab button {
    height: 48px;
    font-size: 12px;
  }
  .flow_visual {
    height: 240px;
    margin-top: 24px;
  }
  .flow_img img {
    width: 100%; /* SPは原寸不可のためフィット */
    height: 100%;
    object-fit: cover;
  }
  .flow_text {
    margin-top: 36px;
    padding: 0 24px;
  }
  .flow_text p {
    font-size: 14px;
    line-height: 2;
  }
  .flow_text br {
    display: none;
  }
}

/*==================================================================================================================

  よくある質問（.top_faq）アコーディオン
  ─ 常に1つだけ開く。Qバー＝紺・1行78px・最大1140px。±アイコン切替。Q間22px／開いた次は50px

==================================================================================================================*/
.top_faq {
  padding-top: 175px;
  padding-bottom: 120px;
}
.top_faq .tit_h2 p {
  margin-top: 6px;
}
.faq_list {
  max-width: 1140px;
  margin: 5px auto 0;
  padding: 0;
  box-sizing: border-box;
}

/* カテゴリ見出し */
.faq_cat {
  margin: 44px 0 22px;
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #445576;
  text-align: center;
}
.faq_cat:first-child {
  margin-top: 0;
}

/* 各項目 */
.faq_item {
  margin-bottom: 22px;
} /* Q同士の間 */
.faq_item.is-open {
  margin-bottom: 50px;
} /* 開いたAと次のQの間 */

/* Qバー */
.faq_q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 78px; /* 1行のとき78px、2行以上は伸びる */
  padding: 12px 30px;
  background: #445576; /* 紺 */
  border: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.faq_q_mark {
  flex: 0 0 auto;
  font-family: "EB Garamond", serif;
  font-size: 40px;
  line-height: 1;
  color: #fff;
}
.faq_q_txt {
  flex: 1 1 auto;
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #fff;
}
.faq_q_icon {
  flex: 0 0 30px;
  height: 30px;
  background: url(../images/icon_plus.png) center / contain no-repeat;
}
.faq_item.is-open .faq_q_icon {
  background-image: url(../images/icon_mainasu.png); /* 開：マイナス */
}

/* Aパネル */
.faq_a {
  display: none; /* JSで開閉 */
  background: #fff;
}
.faq_a_inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 30px;
}
.faq_a_mark {
  flex: 0 0 auto;
  font-family: "EB Garamond", serif;
  font-size: 40px;
  line-height: 1.1;
  color: #917813; /* 金 */
}
.faq_a_txt {
  flex: 1 1 auto;
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 2.353;
  letter-spacing: 0.03em;
  color: #111;
}

/*================== よくある質問（スマホ）==================*/
@media screen and (max-width: 640px) {
  .top_faq {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .faq_list {
    margin-top: 36px;
    padding: 0 12px;
  }
  .faq_item {
    margin-bottom: 7px;
  }
  .faq_item.is-open {
    margin-bottom: 10px;
  }
  .faq_cat {
    font-size: 18px;
  }
  .faq_q {
    gap: 12px;
    min-height: 60px;
    padding: 12px 16px;
  }
  .faq_q_mark {
    font-size: 28px;
  }
  .faq_q_txt {
    font-size: 15px;
    line-height: 1.6;
  }
  .faq_q_icon {
    flex-basis: 22px;
    height: 22px;
  }
  .faq_a_inner {
    gap: 12px;
    padding: 20px 16px;
  }
  .faq_a_mark {
    font-size: 28px;
  }
  .faq_a_txt {
    font-size: 14px;
    line-height: 2.1;
  }
}

/*==================================================================================================================

  治療の流れ〜FAQ をまとめるラッパー背景（和紙クリーム）

==================================================================================================================*/
.flow_qa_wrap {
    padding-top: 169px;
  background-color: #f3ede1; /* テクスチャ外の保険色（クリーム）*/
  background-image: url(../images/top_qa_bg.jpg);
  background-position: center top;
  background-size: cover; /* 幅が広くても余白なく敷き詰める */
  background-repeat: no-repeat;
}

/*================== 治療の流れ〜FAQ（スマホ）==================*/
@media screen and (max-width: 640px) {
  .flow_qa_wrap {
    padding-top: 40px;
  }
}