@charset "UTF-8";

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

  メインビジュアル（白金麻布メディカル LPトップ）

==================================================================*/
.top_mainvisual {
  position: relative;
  width: 100%;
  height: 1020px; /* 固定値（デザイン仕様：1920×1020） */
  overflow: hidden;
}

/* 背景スライド */
.top_mainvisual__slide,
#slick_fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 1020px;
  z-index: 1;
}
.top_mainvisual__slide .slick-list,
.top_mainvisual__slide .slick-track,
#slick_fade .slick-list,
#slick_fade .slick-track {
  height: 1020px;
}
.top_mainvisual__slide-item {
  width: 100%;
  height: 1020px;
}
.top_mainvisual__slide-item img {
  display: block;
  width: 100%;
  height: 1020px;
  object-fit: cover;
  object-position: center;
}

/* メインビジュアル内のコンテンツインナー（1200px・中央寄せ／フルハイト） */
.top_mainvisual .inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 1200px;
  height: 1020px;
  margin: 0;
  z-index: 4;
  pointer-events: none;
}
.top_mainvisual .inner > * {
  pointer-events: auto;
}

/* キャッチコピー画像（インナー右寄り・元画像サイズで表示） */
.top_mainvisual__catch {
  position: absolute;
  top: 263px;
  right: 87px;
  z-index: 5;
}
.top_mainvisual__catch img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
}

/* 駅徒歩バナー（インナー左寄り・元画像サイズで表示） */
.top_mainvisual__access {
  position: absolute;
  bottom: 202px;
  left: 0;
  z-index: 5;
}
.top_mainvisual__access a {
  display: block;
  transition: opacity .3s ease;
}
.top_mainvisual__access a:hover { opacity: 0.85; }
.top_mainvisual__access img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
}

/* 下部ナビ（半透明白／メインビジュアル下端に重なる／スクロール追従しない） */
.top_mainvisual__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 125px; /* 固定値（デザイン仕様） */
  background-color: rgba(255, 255, 255, 0.6);
}
.top_mainvisual__nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 60px;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  list-style: none;
}
.top_mainvisual__nav li {
  flex: 0 0 auto;
  text-align: center;
}
.top_mainvisual__nav a {
  display: inline-block;
  padding: 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.075em;
  text-shadow: 0 0 9px rgba(95, 84, 71, 0.5),
0 0 9px rgba(95, 84, 71, 0.5),
0 0 9px rgba(95, 84, 71, 0.5);
  transition: opacity .3s ease;
}
.top_mainvisual__nav a:hover {
  color: #fff;
  opacity: 0.7;
}

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

  メインビジュアル ── スマホ対応（640px 以下）
  ※ PC版（上記）は触らず、ここで上書きのみ行う

==================================================================*/
@media screen and (max-width: 640px) {
  /* PC版で設定している min-width: 1200px を一括解除（SP では縮小可能に）
     ※ !important 必須：このルールよりも後ろの PC base に同じプロパティがあるため */
  .top_procedure,
  .top_procedure__list,
  .top_procedure__step,
  .top_fee,
  .top_faq,
  .top_disease__col2 {
    min-width: 0 !important;
  }

  .top_mainvisual {
    height: auto;
    aspect-ratio: 750 / 1100;
    width: 100%;
  }
  .top_mainvisual__slide,
  #slick_fade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .top_mainvisual__slide .slick-list,
  .top_mainvisual__slide .slick-track,
  #slick_fade .slick-list,
  #slick_fade .slick-track {
    height: 100%;
  }
  .top_mainvisual__slide-item {
    width: 100%;
    height: 100%;
  }
  .top_mainvisual__slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* SP用インナー：固定1200pxではなくフル幅 */
  .top_mainvisual .inner {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    left: 0;
    transform: none;
  }
  /* キャッチ画像：278×576 の縦長画像なので max-width を小さめに設定。
     mainvisual の高さに収まるようにする */
  .top_mainvisual__catch {
    position: absolute;
    top: 18%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    max-width: 160px;
    z-index: 5;
  }
  .top_mainvisual__catch img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* 駅徒歩バナー：下中央配置（自然サイズ 300×115） */
  .top_mainvisual__access {
    position: absolute;
    bottom: 24px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 70%;
    max-width: 260px;
    z-index: 5;
  }
  .top_mainvisual__access img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* SP では下部ナビは非表示（ハンバーガーメニューに集約） */
  .top_mainvisual__nav {
    display: none;
  }
}

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

  セクション共通タイトル（英語：グラデーション ／ 日本語：h2）

==================================================================*/
.sec_tit {
  position: relative;
  display: table;
  margin: 9px auto 89px;
  text-align: center;
}
/* タイトル左上の「Reason」吹き出し画像 */
.sec_tit__sub {
  position: absolute;
  top: -77px;
  left: 199px;
  transform: translateX(-260px);
  width: auto;
  height: auto;
  max-width: none;
  z-index: 2;
}
/* 英語タイトル（COLONOSCOPYなど）：上→下のグラデーション
   ※ 上 #dfd4be が 8割 / 下 #e4e0dd が 2割（中間 2% トランジション）
   ※ 個別セクションは .sec_tit--xxx .sec_tit__en で上書き可 */
.sec_tit__en {
  display: inline-block;
  margin: 0;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-size: 110px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.035em;
  background: linear-gradient(180deg, #dfd4be 0%, #dfd4be 78%, #e4e0dd 82%, #e4e0dd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 日本語タイトル（h2）：1920pxで36px / 1200pxで22.5px */
.sec_tit__ja {
  margin: 13px 0 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #fff;
}

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

  セクション共通タイトル ── スマホ対応（640px 以下）

==================================================================*/
@media screen and (max-width: 640px) {
  .sec_tit {
    margin: 9px auto 50px;
    max-width: 100%;
  }
  /* 左上の Reason 吹き出し画像 ── 70% 縮小 + 中央寄せ */
  .sec_tit__sub {
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: auto;
  }
  /* 英語タイトル：viewportで可変。最大34px・最小24px */
  .sec_tit__en {
    font-size: clamp(24px, 9vw, 34px);
    letter-spacing: 0.025em;
  }
  /* sec_tit__en--lg（複数行）も同じく縮小 */
  .sec_tit__en--lg {
    font-size: clamp(24px, 9vw, 34px) !important;
    line-height: 1.1;
  }
  .sec_tit__en-line {
    font-size: clamp(24px, 9vw, 34px);
  }
  /* 日本語タイトル 36px → 16px */
  .sec_tit__ja {
    font-size: 18px;
    letter-spacing: 0;
}
}

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

  Section: 当院の大腸カメラが選ばれる理由（.top_reason）

==================================================================*/
.top_reason {
  position: relative;
  padding: 243px 0 129px;
  background-image: url("../images/colonoscopy_bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Reasonセクションのインナーは1200px固定ではなく
   ウィンドウ幅 − 左右150px の可変幅にする。
   ウィンドウが狭くなれば画像も比例縮小される。 */
.top_reason .inner {
  max-width: none;
  margin: 0;
  padding: 0 150px;
}

.top_reason__list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

/* 各カードは 1/4 の均等幅（ウィンドウが狭くなると比例縮小） */
.top_reason__item {
  flex: 1 1 0;
  min-width: 0;
}
/* ジグザグ配置：1・3 を同じ高さ、2・4 を同じ高さに */
.top_reason__item--01 { margin-top: 0; }
.top_reason__item--02 {
  margin-top: 170px;
}
.top_reason__item--03 { margin-top: 0; }
.top_reason__item--04 { margin-top: 170px; }

.top_reason__item a {
  display: block;
  text-decoration: none;
  color: #fff;
  transition: opacity .3s ease;
}
.top_reason__item a:hover { opacity: 0.85; }

/* メイン画像（カード幅に合わせて比例縮小） */
.top_reason__visual {
  position: relative;
  width: 100%;
}
.top_reason__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 画像下部にオーバーレイされる Reason / 縦線 / 番号（画像の中央下） */
.top_reason__cap {
  position: absolute;
  left: 50%;
  bottom: -11%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  pointer-events: none;
}
.top_reason__label {
  margin: 0;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  /* 1920pxで18px / 1200pxで11.25px */
  font-size: clamp(11.25px, calc(100vw * 18 / 1920), 18px);
  font-weight: 100;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #fff;
}
.top_reason__bar {
  display: block;
  width: 1px;
  height: 21px;
  margin: 5px 0 8px;
  background-color: #faf7f459;
}
.top_reason__num {
  position: relative;
  top: -40px;
  margin: 0;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(62.5px, calc(100vw * 100 / 1920), 100px);
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
}

/* 画像下のキャプション本文：1920pxで30px / 1200pxで15px（線形補完）
   ※ <br>での意図した改行がカード幅に収まるようsizeを下げる */
   .top_reason__text {
    margin: 54px 0px 0px;
    font-family: dnp-shuei-mincho-pr6n, DNPShueiMinPr6N, 游明朝, "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    font-size: clamp(15px, -10px + 2.08333vw, 30px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.06em;
    color: rgb(255, 255, 255);
    text-align: center;
}

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

  .top_reason ── スマホ対応（640px 以下）

==================================================================*/
@media screen and (max-width: 640px) {
  .top_reason {
    padding: 80px 0 60px;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
      url("../images/colonoscopy_bg_sp.jpg");
  }
  .top_reason .inner {
    padding: 0 5%;
  }
  /* 4カラム横並びを縦並びに変更 */
  .top_reason__list {
    flex-direction: column;
    gap: 60px;
    align-items: center;
  }
  /* ジグザグの margin-top を解除 */
  .top_reason__item--01,
  .top_reason__item--02,
  .top_reason__item--03,
  .top_reason__item--04 {
    margin-top: 0;
  }
  /* 画像系を 70% に縮小 + 中央寄せ */
  .top_reason__item {
    width: 70%;
    flex: 0 0 auto;
  }
  .top_reason__item a {
    text-align: center;
  }
  .top_reason__visual {
    width: 100%;
  }
  /* キャプション本文：SPでは20px固定。
     cap（Reason+番号）が visual の下に被さるので margin-top を広めに */
     .top_reason__text {
      margin-top: 20px;
      font-size: 18px;
  }
  /* 番号や Reason ラベルも SP では固定サイズに */
  .top_reason__label {
    font-size: 14px;
  }
  .top_reason__bar {
    height: 18px;
  }
  .top_reason__num {
    font-size: 70px;
  }
}

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

  Section: 大腸カメラで見つかる病気ランキング（.top_disease）

==================================================================*/
.top_disease {
  position: relative;
  padding: 0;
}
/* ranking エリア（タイトル〜注釈まで）のウィンドウ100%幅の箱 */
.top_disease__ranking-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 129px 0 270px;
  background-image: url("../images/ranking_bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top_disease .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* ----- タイトル拡張部分 ----- */
.sec_tit--disease .sec_tit__en--lg {
  font-size: 110px;
  line-height: 1.05;
  letter-spacing: 0.06em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: transparent;
}
/* 各行ごとに 7:3 のパッキリしたグラデーションを適用 */
.sec_tit__en-line {
  display: block;
  background: linear-gradient(180deg,
                              #c9c6bc 0%,
                              #c9c6bc 68%,
                              #e3e1de 72%,
                              #e3e1de 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 棒線付き小英語 ── DETECTED by COLONOSCOPY ── */
.sec_tit__en-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 28px 0 0;
}
.sec_tit__en-sub-rule {
  flex: 0 1 200px;
  height: 1px;
  background-color: #c9c6bc;
}
.sec_tit__en-sub-text {
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-size: 40px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #e6e3d8;
  line-height: 1.0;
}
/* リード「実は多い… 大腸カメラで見つかる」 */
.sec_tit__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 50px 0 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-size: clamp(14px, calc(14px + (100vw - 1200px) * 8 / 720), 22px);
  color: #fff;
  font-size: 32px;
  letter-spacing: 0.1em;
  letter-spacing: 1.0;
}
.sec_tit__lead-em {
  display: inline-block;
  padding: 20px 39px;
  background-color: rgb(133, 122, 115);
  color: #fff;
  letter-spacing: 0.075em;
  font-size: 34px;
  line-height: 1.0;
}
/* タイトル日本語大「病気ランキング」 */
.sec_tit__ja--xl {
  font-size: clamp(53px, calc(53px + (100vw - 1200px) * 32 / 720), 85px);
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin-top: 11px;
}

/* ----- ランキング3つ共通 ----- */
.top_disease__rank {
  display: flex;
  justify-content: center;
  /* gap / padding-bottom は各位ごとに個別調整するため共通からは外す */
}
.top_disease__rank--01 {
  gap: 101px;
  padding-bottom: 38px;
}
.top_disease__rank--02 {
  gap: 101px;
  padding-bottom: 106px;
}
.top_disease__rank--03 {
  gap: 101px;
  padding-bottom: 38px;
}
.top_disease__rank-text {
  flex: 0 0 auto;
  max-width: 540px;
  color: #fff;
  padding-top: 123px;
}
.top_disease__rank--03 .top_disease__rank-text {
  padding-top: 143px;
}
.top_disease__warn {
  display: inline-block;
  padding: 8px 24px 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  color: #fff;
  letter-spacing: 0.075em;
  margin: 0 0 19px;
  font-size: 30px;
  line-height: 1.5;
}
.top_disease__desc {
  margin: 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 24px;
  line-height: 1.7;
  color: #fff;
  letter-spacing: 0.06em;
  padding-left: 7px;
}
.top_disease__note {
  position: relative;
  margin: 45px 0 0;
  padding: 52px 79px;
  background-color: #fff;
}
/* 白枠 左上の L字型かぎ括弧 */
.top_disease__note::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 102px;
  height: 102px;
  border-top: 1px solid #445167;
  border-left: 1px solid #445167;
  pointer-events: none;
}
.top_disease__note p {
  margin: 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: clamp(14px, calc(14px + (100vw - 1200px) * 8 / 720), 22px);
  line-height: 1.7;
  color: #333;
  font-size: 24px;
  letter-spacing: 0.06em;
}

/* ランキングのビジュアル部（番号画像 + 日本語病名 + 英語病名） */
.top_disease__rank-visual {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.top_disease__rank-num {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
/* SP用テキスト第N位（PCでは非表示） */
.top_disease__rank-num-sp {
  display: none;
}
.top_disease__rank-icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.top_disease__rank-ja {
  margin: 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.1em;
}
.top_disease__rank-en {
  margin: 0;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-style: italic;
  font-weight: 100;
  color: #fff;
  letter-spacing: 0.06em;
}

/* 第1位：左から
   ①「大腸ポリープ（上にアイコン）」
   ②「第1位 / Colon Polyps（縦書き）/ 棒線（下）」を縦並びで配置 */
   .top_disease__rank--01 .top_disease__rank-visual {
    flex-direction: row;
    align-items: flex-start;
    gap: 43px;
}
.top_disease__rank-ja-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top_disease__rank--01 .top_disease__rank-icon {
  display: block;
  margin: 0 auto 18px;
  width: auto;
  height: auto;
  max-width: 100%;
}
.top_disease__rank--01 .top_disease__rank-ja {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: clamp(62px, calc(62px + (100vw - 1200px) * 38 / 720), 100px);
  line-height: 1.05;
}
.top_disease__rank-num-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 10px;
  /* このラッパーだけ親(.rank-visual)の高さに合わせて伸ばす（ja-wrapには影響しない） */
  align-self: stretch;
}
.top_disease__rank--01 .top_disease__rank-en {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: clamp(20px, calc(20px + (100vw - 1200px) * 10 / 720), 30px);
  letter-spacing: 0.045em;
}
/* 第1位の棒線：num-wrap の残余スペースを埋めて「大腸ポリープ」の下端まで届く縦線 */
.top_disease__rank--01 .top_disease__rank-bar {
  display: block;
  width: 1px;
  flex: 1 1 auto;
  min-height: 80px;
  background-color: rgba(255, 255, 255, 0.85);
  /* Colon Polyps と棒線の間だけ詰める（gap:40px - 20px = 20px） */
  margin-top: -20px;
}

/* ----- 第2位／第3位 共通：上段「番号 ─ 英語」/ 下段「大きな日本語病名」 ----- */
.top_disease__rank--02 .top_disease__rank-visual, .top_disease__rank--03 .top_disease__rank-visual {
  /* 残りの幅（=1200px - text幅 - gap）に収める */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.top_disease__rank-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}
/* 第2位／第3位の数字の背景に置く白い半透明丸 */
.top_disease__rank--02 .top_disease__rank-head::before,
.top_disease__rank--03 .top_disease__rank-head::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: rgb(250, 247, 244);
  opacity: 0.149;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.top_disease__rank--02 .top_disease__rank-head::before {
  left: -80px;
  top: 153%;
}
.top_disease__rank--03 .top_disease__rank-head::before {
  right: -70px;
  top: 110%;
}
/* 641px 以上 1500px 以下：第3位の白丸位置を微調整 */
@media screen and (min-width: 641px) and (max-width: 1500px) {
  .top_disease__rank--03 .top_disease__rank-head::before {
    right: 0px;
    top: 110%;
}
}
/* 数字画像は丸より上に */
.top_disease__rank-head .top_disease__rank-num,
.top_disease__rank-head .top_disease__rank-bar,
.top_disease__rank-head .top_disease__rank-en {
  position: relative;
  z-index: 1;
}
/* 棒線：固定260px（伸縮しない） */
.top_disease__rank-head .top_disease__rank-bar {
  flex: 0 0 260px;
  width: 260px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.85);
}
.top_disease__rank--02 .top_disease__rank-ja, .top_disease__rank--03 .top_disease__rank-ja {
  font-size: 80px;
  letter-spacing: 0.1em;
  line-height: 1.05;
}
.top_disease__rank--02 .top_disease__rank-en, .top_disease__rank--03 .top_disease__rank-en {
  font-size: clamp(20px, calc(20px + (100vw - 1200px) * 10 / 720), 30px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 第2位：左寄せ（番号→棒線→英語、下に日本語） */
.top_disease__rank--02 .top_disease__rank-head {
  justify-content: flex-start;
  padding-left: 0;
}
.top_disease__rank--02 .top_disease__rank-ja {
  text-align: left;
  align-self: flex-start;
  padding-left: 38px;
}
/* 第2位だけ、右側の「放置すると…」テキストを左に食い込ませる */
.top_disease__rank--02 .top_disease__rank-text {
  margin-left: -80px;
}
/* 第3位：右寄せ（英語→棒線→番号、下に日本語） */
.top_disease__rank--03 .top_disease__rank-head {
  justify-content: flex-end;
}
.top_disease__rank--03 .top_disease__rank-ja {
  text-align: right;
  align-self: flex-end;
  padding-right: 32px;
}

/* ----- 注釈ボックス ----- */
.top_disease__notes {
  margin: 61px auto 0;
  max-width: 1100px;
  padding: 32px 48px;
  background-color: rgba(63, 74, 94, 0.66);
  /* PS：光彩（外側）／通常／黒／不透明度25%／サイズ10px */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.top_disease__notes p {
  margin: 0;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 22px;
  line-height: 1.9;
  color: #fff;
  letter-spacing: 0.1em;
}
.top_disease__notes p + p {
  margin-top: 4px;
}

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

  .top_disease（ランキングセクション）── スマホ対応（640px 以下）
  ※ 日帰り大腸ポリープ切除 / 精密検査について（.top_disease__col2）は別途

==================================================================*/
@media screen and (max-width: 640px) {
  /* SP用背景画像に差し替え */
  .top_disease__ranking-wrap {
    padding: 60px 0 120px;
    background-image: url("../images/ranking_bg_sp.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .top_disease .inner {
    max-width: 100%;
    padding: 0 5%;
  }

  /* セクションタイトル＋リード文 */
  .sec_tit--disease {
    margin-bottom: 30px !important;
  }
  .sec_tit__en-sub {
    gap: 12px;
    margin: 16px 0 0;
  }
  .sec_tit__en-sub-rule {
    flex: 0 1 60px;
  }
  .sec_tit__en-sub-text {
    font-size: 12px;
  }
  .sec_tit__lead {
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 0;
    font-size: 16px;
  }
  .sec_tit__lead-text {
    font-size: 14px;
  }
  .sec_tit__lead-em {
    padding: 8px 16px;
    font-size: 16px;
  }
  .sec_tit__ja--xl {
    font-size: 32px;
    margin-top: 8px;
  }

  /* 第1位／第2位／第3位 共通：横並びを縦並びに */
  .top_disease__rank {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .top_disease__rank--01,
  .top_disease__rank--02,
  .top_disease__rank--03 {
    gap: 24px;
    padding-bottom: 40px;
  }
  /* テキスト側 */
  .top_disease__rank-text {
    max-width: 100%;
    width: 100%;
    padding-top: 0;
  }
  .top_disease__rank--01 .top_disease__rank-text {
    order: 2; /* 第1位は SP では タイトル → テキストの順に */
  }
  .top_disease__rank--03 .top_disease__rank-text {
    padding-top: 0;
    order: 2; /* 第3位は SP では テキストを下に */
  }
  .top_disease__warn {
    padding: 6px 18px 8px;
    margin-bottom: 14px;
    font-size: 20px;
  }
  .top_disease__desc {
    font-size: 16px;
    line-height: 1.7;
    padding-left: 0;
  }
  /* 第1位の白いノート（日帰りで…） */
  .top_disease__note {
    margin: 24px 0 0;
    padding: 28px 24px;
  }
  .top_disease__note::before {
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
  }
  .top_disease__note p {
    font-size: 16px;
    line-height: 1.7;
  }

  /* ビジュアル部（番号画像 + 病名） */
  .top_disease__rank-visual {
    width: 100%;
    justify-content: center;
  }
  /* PC用ランキング番号画像は SP では非表示。代わりにテキストを表示 */
  .top_disease__rank-num {
    display: none;
  }
  .top_disease__rank-num-sp {
    display: inline-flex;
    align-items: baseline;
    font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #fff;
  }
  .top_disease__rank-num-sp em {
    font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
    font-style: italic;
    font-weight: 100;
    font-size: 52px;
    margin: 0 4px;
    line-height: 1;
  }

  /* 全ランキング共通：棒線は SP では不要 */
  .top_disease__rank-bar,
  .top_disease__rank-head .top_disease__rank-bar {
    display: none !important;
  }

  /* 第1位／第2位／第3位 共通：display:contents で
     入れ子コンテナを平坦化し、子要素を rank-visual 直下に配置して order で並べる */
  .top_disease__rank--01 .top_disease__rank-ja-wrap,
  .top_disease__rank--01 .top_disease__rank-num-wrap,
  .top_disease__rank--02 .top_disease__rank-head,
  .top_disease__rank--03 .top_disease__rank-head {
    display: contents;
  }
  /* 数字背後の白い丸は SP では非表示（::before が contents 化で空中に浮くため） */
  .top_disease__rank--02 .top_disease__rank-head::before,
  .top_disease__rank--03 .top_disease__rank-head::before {
    display: none;
  }

  /* rank-visual を flex column・中央寄せに */
  .top_disease__rank--01 .top_disease__rank-visual,
  .top_disease__rank--02 .top_disease__rank-visual,
  .top_disease__rank--03 .top_disease__rank-visual {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  /* 第1位の順序：アイコン → 第1位 → 大腸ポリープ → Colon Polyps */
  .top_disease__rank--01 .top_disease__rank-icon { order: 1; margin: 0 auto 4px; max-width: 60px; }
  .top_disease__rank--01 .top_disease__rank-num-sp { order: 2; }
  .top_disease__rank--01 .top_disease__rank-ja {
    order: 3;
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    font-size: 24px;
    text-align: center;
}
  .top_disease__rank--01 .top_disease__rank-en {
    order: 4;
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    font-size: 16px;
    text-align: center;
  }

  /* 第2位の順序：第2位 → 大腸がん → Colorectal Cancer */
  .top_disease__rank--02 .top_disease__rank-num-sp { order: 1; }
  .top_disease__rank--02 .top_disease__rank-ja { order: 2; }
  .top_disease__rank--02 .top_disease__rank-en { order: 3; }

  /* 第3位の順序：第3位 → 大腸憩室 → Diverticulosis */
  .top_disease__rank--03 .top_disease__rank-num-sp { order: 1; }
  .top_disease__rank--03 .top_disease__rank-ja { order: 2; }
  .top_disease__rank--03 .top_disease__rank-en { order: 3; }

  /* 第2位／第3位の見出し系を中央寄せ・フォントサイズ調整 */
  .top_disease__rank--02 .top_disease__rank-ja, .top_disease__rank--03 .top_disease__rank-ja {
    font-size: 24px;
    text-align: center !important;
    align-self: center !important;
    padding: 0 !important;
}
  .top_disease__rank--02 .top_disease__rank-en,
  .top_disease__rank--03 .top_disease__rank-en {
    font-size: 16px;
    text-align: center;
  }
  /* 第2位の text 左マイナス margin を解除 */
  .top_disease__rank--02 .top_disease__rank-text {
    margin-left: 0;
  }
  /* 第N位ラベル（SP用テキスト）も中央寄せ */
  .top_disease__rank-num-sp {
    align-self: center !important;
    text-align: center;
  }

  /* 注釈 */
  .top_disease__notes {
    margin-top: 32px;
    max-width: 100%;
    padding: 18px 20px;
  }
  .top_disease__notes p {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }

  /* PC 用 2カラムサブセクションは SP では非表示にして、代わりにバナー表示 */
  .top_disease__col2 {
    display: none !important;
  }
  .top_disease__col2-sp {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 30px 5% 50px;
  }
  .top_disease__col2-sp a {
    display: block;
    transition: opacity .2s ease;
  }
  .top_disease__col2-sp a:hover {
    opacity: 0.85;
  }
  .top_disease__col2-sp img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

/* ----- 2カラムサブセクション（インナーの外、ウィンドウ100%幅／最小1200px） ----- */
.top_disease__col2 {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-width: 1200px;
  margin: -290px 0 0;
}
/* SP用バナー（PCでは非表示） */
.top_disease__col2-sp {
  display: none;
}
.top_disease__card {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  padding: 259px 30px 68px;
  background-color: rgba(0, 0, 0, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
.top_disease__card--left  { background-image: url("../images/btn_ranking_left.jpg"); }
.top_disease__card--right { background-image: url("../images/btn_ranking_right.jpg"); }
.top_disease__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 790px;
}
.top_disease__card-tags {
  /* inline-flex + align-items:stretch にして、最も幅の広い要素に他のspanも揃える */
  display: inline-flex;
  flex-direction: column;
  gap: 22px;
  align-items: stretch;
  align-self: center;
  margin-bottom: 28px;
}
.top_disease__card-tags span {
  display: block;
  padding: 10px 58px;
  background-color: rgba(255, 255, 255, 0.85);
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 32px;
  color: #333;
  letter-spacing: 0.025em;
  line-height: 1.4;
  text-align: center;
}
.top_disease__card-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 16px;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: clamp(20px, calc(20px + (100vw - 1200px) * 15 / 720), 34px);
  color: #fff;
  letter-spacing: 0.06em;
  text-align: center;
}
/* sub テキスト両端の斜め線画像（原寸表示） */
.top_disease__card-sub-deco {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  flex: 0 0 auto;
}
.top_disease__card-sub-text {
  display: inline-block;
}
.top_disease__card-tit {
  display: inline-block;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid #fff;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-weight: 400;
  /* 1920pxで50px / 1200pxで40px（リニア縮小） */
  font-size: clamp(40px, calc(40px + (100vw - 1200px) * 10 / 720), 50px);
  color: #fff;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-align: center;
}
/* 頭文字を一段大きく */
.top_disease__card-tit-em {
  /* 1920pxで80px / 1200pxで65px（リニア縮小） */
  font-size: clamp(65px, calc(65px + (100vw - 1200px) * 15 / 720), 80px);
  line-height: 1;
}
/* 各カラム内ボタン */
.top_disease__card-btn {
  margin-top: 50px;
  text-align: center;
}

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

  Section: 大腸カメラ検査の流れ（.top_procedure）

==================================================================*/
.top_procedure {
  position: relative;
  padding: 76px 0px 76px;
  min-width: 1200px;
  background-image: url("../images/procedure_bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* セクション見出し（中央寄せ）。display:tableで自動センタリング */
.top_procedure__head {
  text-align: center;
}

/* 共通の sec_tit__ja は color:#fff だが、本セクションは背景なしのため濃色に上書き */
.sec_tit__ja--dark {
  color: rgb(133, 122, 115);
}

/* sec_tit のデフォルト下マージンを本セクション用に詰める */
.sec_tit--procedure {
  margin: 9px auto 78px;
}
.sec_tit--procedure .sec_tit__ja {
  margin-top: 8px;
}
/* 英語タイトル（THE PROCEDURE）のグラデーション色を本セクション専用に上書き
   上=#d4cec0 / 下=#b6ac8e */
.sec_tit--procedure .sec_tit__en,
.sec_tit--procedure .sec_tit__en-line {
  background: linear-gradient(180deg,
                              #d4cec0 0%,
                              #d4cec0 68%,
                              #b6ac8e 72%,
                              #b6ac8e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 各ステップ行 ─ ウィンドウ100%幅、画像は左右いずれかの端まで貼り付く */
.top_procedure__list {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.top_procedure__step {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 1200px;
}
.top_procedure__step-text,
.top_procedure__step-img {
  min-width: 0;
}
/* テキスト 60% / 画像 55%、合計 115% でオーバーラップ 15%。
   画像はネガティブマージン -15% で結果的に右端（または左端）がウィンドウ端にしっかり貼り付き、
   画像の内側端（テキスト側）は中央より5%内側まで食い込む */
.top_procedure__step-text {
  flex: 0 0 60%;
  position: relative;
  z-index: 2;
}
.top_procedure__step-img {
  flex: 0 0 55%;
}
.top_procedure__step--odd .top_procedure__step-img {
  margin-left: -15%;
}
.top_procedure__step--even .top_procedure__step-img {
  margin-right: -15%;
}
.top_procedure__step-img img {
  display: block;
  width: 100%;
  height: 700px;
  object-fit: cover;
  object-position: center;
}

/* テキスト側はウィンドウ外側に padding を持って中央へ寄せる（1200px→1920pxで線形拡大） */
.top_procedure__step-text {
  display: flex;
}
.top_procedure__step--odd .top_procedure__step-text {
  justify-content: flex-end;
  padding: 0;
}
.top_procedure__step--even .top_procedure__step-text {
  justify-content: flex-start;
  padding: 0;
}
.top_procedure__step-text-inner {
  position: relative;
  width: 100%;
  max-width: 530px;
  /* 茶色（薄ベージュ）背景：text-inner の外側端から 608x620 で敷く。
     z-index: -1 で本文より背面、ただし text-text の z-index:2 内なので画像の上には乗る */
}
.top_procedure__step-text-inner::before {
  content: "";
  position: absolute;
  top: 170px;
  width: 608px;
  height: calc(100% - 20px);
  background-color: rgb(242, 240, 237);
  z-index: -1;
  pointer-events: none;
}
.top_procedure__step--odd .top_procedure__step-text-inner::before {
  left: 40px;
  border-radius: 0 200px 0 0;
  height: calc(100% - 60px);
}
/* 05 だけ高さを別途指定 */
.top_procedure__step--05 .top_procedure__step-text-inner::before {
  height: calc(100% + 50px);
}
.top_procedure__step--even .top_procedure__step-text-inner::before {
  right: 40px;
  height: calc(100% - 90px);
  border-radius: 200px 0 0 0;
}
/* 02 だけ高さを別途指定 */
.top_procedure__step--02 .top_procedure__step-text-inner::before {
  height: calc(100% + 20px);
}
/* 白い丸（番号と縦書きラベルの後ろに敷く）─ 茶色背景の上、本文の下 */
.top_procedure__step-text-inner::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  z-index: -1;
  pointer-events: none;
}
.top_procedure__step--odd .top_procedure__step-text-inner::after {
  left: -166px;
  top: 60px;
}
.top_procedure__step--even .top_procedure__step-text-inner::after {
  right: -166px;
  top: 60px;
}

/* ウィンドウ幅 1400px 以下：白丸が窓左端にはみ出るので内側にずらす */
@media screen and (max-width: 1500px) {
  .top_procedure__step--odd .top_procedure__step-text-inner::after {
    left: 0;
  }
  .top_procedure__step--even .top_procedure__step-text-inner::after {
    right: 0;
  }
}
/* 縦書きラベル分の余白を本文側に確保（外側＝画像から遠い側に空ける） */
.top_procedure__step--odd .top_procedure__step-text-inner {
  padding-left: 0;
  margin-right: 168px;
  padding-top: 82px;
}
.top_procedure__step--even .top_procedure__step-text-inner {
  padding-right: 0px;
  margin-left: 186px;
  padding-top: 83px;
}

/* 画像のインナー側（テキスト側）の角を丸める ─ デザインの曲線カットを近似 */
.top_procedure__step--odd .top_procedure__step-img img {
  border-top-left-radius: 200px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 0;
}
.top_procedure__step--even .top_procedure__step-img img {
  border-top-left-radius: 0;
  border-top-right-radius: 200px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 30px;
}

/* ステップヘッド：番号(下に横線) */
.top_procedure__step-head {
  margin-bottom: 12px;
}
/* 偶数は数字（numwrap）を text-inner の右寄せ */
.top_procedure__step--even .top_procedure__step-head {
  display: flex;
  justify-content: flex-end;
}
.top_procedure__step--even .top_procedure__step-numwrap {
  align-items: flex-end;
}
/* 偶数は h3 タイトルも右寄せ */
.top_procedure__step--even .top_procedure__step-tit {
  text-align: right;
}
/* 縦書きラベル ── text-inner の外側端に絶対配置（本文と独立した縦コラム扱い） */
.top_procedure__step-label {
  position: absolute;
  top: 99px;
  left: -60px;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-style: italic;
  font-weight: 100;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.025em;
  color: rgb(133, 122, 115);
  white-space: nowrap;
  writing-mode: vertical-rl;
}
/* 奇数（ラベル左側）：direction: rtl で読み順を下→上に反転 */
.top_procedure__step--odd .top_procedure__step-label {
  left: -96px;
  direction: rtl;
}
/* 偶数（ラベル右側）：vertical-rl のまま 上→下 */
.top_procedure__step--even .top_procedure__step-label {
  right: -76px;
}

/* ウィンドウ幅 1400px 以下：縦書きラベルが窓左端にはみ出るので内側に寄せる
   ※ base のラベル rules より後ろに置くこと（カスケード順で勝つため） */
@media screen and (max-width: 1460px) {
  .top_procedure__step--odd .top_procedure__step-label {
    left: -30px;
  }
  .top_procedure__step--even .top_procedure__step-label {
    right: -30px;
  }
}

.top_procedure__step-numwrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.top_procedure__step-num {
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-style: italic;
  font-weight: 100;
  font-size: clamp(56px, calc(56px + (100vw - 1200px) * 24 / 720), 80px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgb(133, 122, 115);
}
.top_procedure__step-line {
  display: block;
  width: 30px;
  height: 1px;
  margin-top: 8px;
  margin-left: 6px;
  background-color: rgb(133, 122, 115);
}
/* 偶数（02・04）の数字下の横線は別途調整可能 */
.top_procedure__step--even .top_procedure__step-line {
  margin-left: 0;
  margin-right: 6px;
  margin-top: 12px;
}

/* H3 大見出し */
.top_procedure__step-tit {
  margin: 23px 0 34px;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgb(133, 122, 115);
}

/* 本文 */
.top_procedure__step-desc {
  margin: 0;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgb(51, 51, 51);
  text-align: justify;
}

/* 03 用：箇条書き */
.top_procedure__step-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.top_procedure__step-list li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 3px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgb(51, 51, 51);
}
.top_procedure__step-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgb(133, 122, 115);
}
.top_procedure__step-note {
  margin: 18px 0 0;
  padding-left: 1em;
  text-indent: -1em;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: rgb(51, 51, 51);
}
/* 04 用：サブ項目 */
.top_procedure__sublist {
  display: flex;
  flex-direction: column;
  gap: 47px;
  margin-top: 4px;
}
.top_procedure__subitem {
  padding-top: 22px;
  border-top: 1px solid rgb(199, 195, 180);
}
.top_procedure__subitem:first-child {
  padding-top: 0;
  border-top: none;
}
.top_procedure__sub-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.top_procedure__sub-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(133, 122, 115);
  color: #fff;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-style: italic;
  font-weight: 100;
  font-size: 26px;
  line-height: 1;
  padding-bottom: 3px;
}
.top_procedure__sub-tit {
  margin: 0;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  font-size: clamp(22px, calc(22px + (100vw - 1200px) * 8 / 720), 30px);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: rgb(133, 122, 115);
}
.top_procedure__sub-desc {
  margin: 0;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.85;
  letter-spacing: 0.1em;
  color: rgb(51, 51, 51);
}

/* ボタン群（縦並び） */
.top_procedure__step-btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 50px;
}
/* ボタンは画像側に寄せて、画像の上にオーバーラップさせる */
.top_procedure__step--odd .top_procedure__step-btns {
  align-items: center;
}
.top_procedure__step--even .top_procedure__step-btns {
  align-items: flex-start;
}

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

  .top_procedure（流れセクション）── スマホ対応（640px 以下）

==================================================================*/
@media screen and (max-width: 640px) {
  .top_procedure {
    padding: 50px 0 60px;
  }
  .top_procedure__head {
    padding: 0 5%;
  }
  /* タイトル下マージン */
  .sec_tit--procedure {
    margin: 9px auto 30px;
  }

  /* ステップ一覧 */
  .top_procedure__list {
    gap: 40px;
  }
  /* 各ステップ：縦並びに（奇数偶数とも画像→テキスト） */
  .top_procedure__step,
  .top_procedure__step--odd,
  .top_procedure__step--even {
    flex-direction: column !important;
    width: 100%;
  }
  /* 画像とテキストの flex 比率／オーバーラップを解除 */
  .top_procedure__step-text,
  .top_procedure__step-img {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: auto;
  }
  /* 画像：高さ固定を解除して自然に */
  .top_procedure__step-img img {
    height: auto !important;
    width: 100% !important;
  }
  /* 奇数：画像→テキストの順、偶数も同じ順に統一（HTML順に従う：偶数は画像が先） */
  .top_procedure__step--odd .top_procedure__step-img {
    order: 1;
  }
  .top_procedure__step--odd .top_procedure__step-text {
    order: 2;
  }

  /* テキスト側の padding / inner 設定 */
  .top_procedure__step-text {
    display: block !important;
    padding: 24px 5% 30px !important;
  }
  .top_procedure__step-text-inner {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PC 用の装飾（茶色背景 ::before・白丸 ::after）は SP では非表示 */
  .top_procedure__step-text-inner::before,
  .top_procedure__step-text-inner::after {
    display: none !important;
  }

  /* 縦書きラベル：SP では非表示（場所がないため） */
  .top_procedure__step-label {
    display: none !important;
  }

  /* 番号 + 下線（左寄せ・小さく） */
  .top_procedure__step-head {
    display: block !important;
    margin-bottom: 8px;
  }
  /* 偶数ステップは右寄せ → 左寄せに統一 */
  .top_procedure__step--even .top_procedure__step-head {
    justify-content: flex-start !important;
  }
  .top_procedure__step--even .top_procedure__step-numwrap {
    align-items: flex-start !important;
  }
  .top_procedure__step-num {
    font-size: 56px !important;
    line-height: 1;
  }
  .top_procedure__step-line {
    width: 28px !important;
    margin: 6px 0 0 !important;
  }

  /* h3 大見出し */
  .top_procedure__step-tit {
    margin: 14px 0 18px !important;
    font-size: 20px !important;
    text-align: left !important;
}
  .top_procedure__step--even .top_procedure__step-tit {
    text-align: left !important;
  }

  /* 本文 */
  .top_procedure__step-desc {
    font-size: 15px !important;
    line-height: 1.85;
  }

  /* 03 のリスト */
  .top_procedure__step-list li {
    font-size: 15px !important;
    line-height: 1.85;
  }
  .top_procedure__step-note {
    font-size: 13px !important;
    margin-top: 14px;
  }

  /* 04 のサブ項目 */
  .top_procedure__sublist {
    gap: 18px;
  }
  .top_procedure__subitem {
    padding-top: 18px;
  }
  .top_procedure__sub-head {
    gap: 10px;
    margin-bottom: 6px;
  }
  .top_procedure__sub-num {
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
  }
  .top_procedure__sub-tit {
    font-size: 18px !important;
  }
  .top_procedure__sub-desc {
    font-size: 14px !important;
    line-height: 1.85;
  }

  /* ボタンエリア：上余白詰める＆中央寄せ */
  .top_procedure__step-btns {
    margin-top: 26px;
    gap: 12px;
  }
  .top_procedure__step--odd .top_procedure__step-btns,
  .top_procedure__step--even .top_procedure__step-btns {
    align-items: center !important;
  }
}

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

  Section: 費用（.top_fee）

==================================================================*/
.top_fee {
  position: relative;
  padding: 117px 0 89px;
  min-width: 1200px;
}
.top_fee::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 114px;
  background: url(../images/procedure_under_wave.png) no-repeat bottom center;
  top: 0;
  left: 0;
}
/* セクション見出し */
.top_fee__head {
  text-align: center;
}
.sec_tit--fee {
  margin: 9px auto 42px;
}
.sec_tit--fee .sec_tit__ja {
  margin-top: 8px;
}
/* THE PROCEDURE と同じ 2 色グラデーション（上=#d4cec0 / 下=#b6ac8e） */
.sec_tit--fee .sec_tit__en,
.sec_tit--fee .sec_tit__en-line {
  background: linear-gradient(180deg,
                              #d4cec0 0%,
                              #d4cec0 68%,
                              #b6ac8e 72%,
                              #b6ac8e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 中身インナー（1200px 中央寄せ） */
.top_fee__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* 「大腸カメラ検査の費用（目安）」帯タイトル ─ 背景画像 tit_h3_fee_bg.jpg */
.top_fee__sub-tit {
  margin: 0 0 11px;
  padding: 22px 30px;
  background: url("../images/tit_h3_fee_bg.jpg") no-repeat center center;
  background-size: cover;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  font-size: clamp(28px, calc(28px + (100vw - 1200px) * 10 / 720), 38px);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
}

/* 説明文 */
.top_fee__desc {
  margin: 0 0 32px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgb(51, 51, 51);
}

/* 「保険診療（税込）」ブロックタイトル */
.top_fee__block-tit {
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-weight: 400;
  font-size: clamp(22px, calc(22px + (100vw - 1200px) * 8 / 720), 30px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: rgb(51, 51, 51);
}
.top_fee__block-tit-mark {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 12px;
  background-color: rgb(169, 162, 138);
}
.top_fee__block-tit-tax {
  position: relative;
  margin-left: 4px;
  font-size: 0.7em;
  top: 4px;
}

/* テーブル */
.top_fee__table-wrap {
  width: 100%;
  overflow-x: auto;
}
.top_fee__table {
  /* ↓↓↓ 左カラム幅はここで自由に変更（240px → お好みの値に） ↓↓↓ */
  --fee-table-left-col: 300px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgb(51, 51, 51);
}
.top_fee__table th:first-child,
.top_fee__table td:first-child {
  width: var(--fee-table-left-col);
}
.top_fee__table th, .top_fee__table td {
  border: 1px solid rgb(199, 195, 180);
  padding: 12px 5px 12px 10px;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.025em;
}
/* 1割負担・2割負担・3割負担 ヘッダー（ベージ #a9a28a 背景 / 白文字） */
.top_fee__table thead th {
  background-color: rgb(169, 162, 138);
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.06em;
}
/* 左上の空セルもヘッダー色（濃いベージュ）で塗る */
/* 行ヘッダー（検査名）は左寄せ・太字。左カラムの上端（空セル）以外に #faf7f4 を適用 */
.top_fee__table tbody th {
  font-weight: bold;
  text-align: center;
  background-color: #faf7f4;
}

/* 注釈 */
.top_fee__notes {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.top_fee__notes li {
  margin-bottom: 1px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: clamp(14px, calc(14px + (100vw - 1200px) * 4 / 720), 18px);
  line-height: 1.778;
  color: rgb(51, 51, 51);
}

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

  .top_fee（費用セクション）── スマホ対応（640px 以下）

==================================================================*/
@media screen and (max-width: 640px) {
  .top_fee {
    padding: 50px 0 60px;
  }
  .sec_tit--fee {
    margin: 9px auto 24px;
  }
  .top_fee__inner {
    padding: 0 5%;
  }
  /* 「大腸カメラ検査の費用（目安）」帯タイトル */
  .top_fee__sub-tit {
    padding: 14px 16px;
    font-size: 18px;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
  }
  /* 説明文 */
  .top_fee__desc {
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.7;
  }
  /* ■ 保険診療（税込）ブロック見出し */
  .top_fee__block-tit {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .top_fee__block-tit-mark {
    width: 12px;
    height: 12px;
    margin-right: 8px;
  }

  /* ====== テーブルを行ごとのカード型に変形 ======
     見出し（検査名）→ 1割負担/2割負担/3割負担 を交互に並べる構造 */
  .top_fee__table-wrap {
    overflow-x: visible;
  }
  .top_fee__table {
    table-layout: auto;
    border: none;
  }
  /* thead は SP では非表示（各 td に label を ::before で付ける） */
  .top_fee__table thead {
    display: none;
  }
  /* テーブル全体を block に */
  .top_fee__table,
  .top_fee__table tbody,
  .top_fee__table tbody tr {
    display: block;
    width: 100%;
  }
  /* 各行（tr）は1つのカード */
  .top_fee__table tbody tr {
    margin-bottom: 18px;
    border: 1px solid rgb(199, 195, 180);
  }
  .top_fee__table tbody tr:last-child {
    margin-bottom: 0;
  }
  /* 行ヘッダー（検査名）は上部のベージュ帯 */
  .top_fee__table tbody th,
  .top_fee__table tbody td {
    display: block;
    width: 100% !important; /* PCの :first-child{width:240px} を上書き */
    box-sizing: border-box;
    border: none;
    padding: 12px 14px;
    text-align: center;
  }
  .top_fee__table tbody th {
    background-color: rgb(169, 162, 138);
    color: #fff;
    font-weight: bold;
    text-align: center;
    white-space: normal;
    font-size: 15px;
    letter-spacing: 0.04em;
  }
  /* TD：左にカラム名（1割負担等）、右に金額の左右配置 */
  .top_fee__table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background-color: #faf7f4;
    font-size: 14px;
    border-bottom: 1px solid rgb(231, 229, 223);
  }
  .top_fee__table tbody td:last-child {
    border-bottom: none;
  }
  /* TD の前にカラム名ラベルを挿入 */
  .top_fee__table tbody td::before {
    flex: 0 0 auto;
    margin-right: 10px;
    color: rgb(133, 122, 115);
    font-weight: bold;
    letter-spacing: 0.04em;
  }
  .top_fee__table tbody td:nth-of-type(1)::before {
    content: "1割負担";
  }
  .top_fee__table tbody td:nth-of-type(2)::before {
    content: "2割負担";
  }
  .top_fee__table tbody td:nth-of-type(3)::before {
    content: "3割負担";
  }

  /* 注釈 */
  .top_fee__notes li {
    font-size: 13px;
    line-height: 1.75;
  }
}

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

  Section: よくある質問（.top_faq）

==================================================================*/
.top_faq {
  position: relative;
  padding: 100px 0 79px;
  min-width: 1200px;
  background: #f9f5ed;
}
.top_faq__head {
  text-align: center;
}
.sec_tit--faq {
  margin: 9px auto 50px;
}
.sec_tit--faq .sec_tit__ja {
  margin-top: 8px;
}
/* THE PROCEDURE / FEES と同じ 2 色グラデーション
   ※ Q の下尾が薄い色に入って見切れて見えるため、ダーク色を 88% まで伸ばす */
   .sec_tit--faq .sec_tit__en, .sec_tit--faq .sec_tit__en-line {
    background: linear-gradient(180deg,
                              #cac6bd 0%,
                              #cac6bd 75%,
                              #e2e1dd 77%,
                              #e2e1dd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.5;
    padding-bottom: 0.3em;
    overflow: visible;
    padding: 0 15px;
}
.sec_tit--faq {
  overflow: visible;
}

/* インナー（1200px 中央寄せ） */
.top_faq__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.top_faq__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.top_faq__item > summary {
  list-style: none;
}
.top_faq__item > summary::-webkit-details-marker {
  display: none;
}

/* Q（質問）：濃紺の帯 */
.top_faq__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 64px 28px 43px;
  background-color: rgb(76, 90, 114);
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  transition: opacity .2s ease;
}
.top_faq__q:hover {
  opacity: 0.9;
}
.top_faq__q-label {
  flex: 0 0 auto;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 26px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.top_faq__q-text {
  flex: 1 1 auto;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: clamp(18px, calc(18px + (100vw - 1200px) * 6 / 720), 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
/* ＋／− アイコン（CSSで線描画） */
.top_faq__q-icon {
  flex: 0 0 auto;
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
}
.top_faq__q-icon::before,
.top_faq__q-icon::after {
  content: "";
  position: absolute;
  background-color: #fff;
  transition: opacity .2s ease;
}
.top_faq__q-icon::before { /* 横棒 */
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
.top_faq__q-icon::after { /* 縦棒 */
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}
/* 開いている時：縦棒を消して「−」に */
.top_faq__item[open] .top_faq__q-icon::after {
  opacity: 0;
}

/* A（回答）：白背景の帯 */
.top_faq__a {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  padding: 31px 60px 28px 32px;
  background-color: #fff;
  border-radius: 8px;
}
.top_faq__a-label {
  flex: 0 0 auto;
  font-family: oculi-display, "Oculi Display", "Optima", "Cinzel", "Times New Roman", serif;
  font-style: italic;
  font-weight: 100;
  font-size: clamp(20px, calc(20px + (100vw - 1200px) * 5 / 720), 25px);
  line-height: 1.68;
  color: rgb(169, 162, 138);
}
.top_faq__a-text {
  margin: 0;
  flex: 1 1 auto;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: bold;
  font-size: clamp(15px, calc(15px + (100vw - 1200px) * 3 / 720), 18px);
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgb(51, 51, 51);
  text-align: justify;
}
details.top_faq__item {
  margin-bottom: 20px;
}

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

  .top_faq（よくある質問）── スマホ対応（640px 以下）

==================================================================*/
@media screen and (max-width: 640px) {
  .top_faq {
    padding: 50px 0 60px;
  }
  .sec_tit--faq {
    margin: 9px auto 24px;
  }
  /* インナーに左右余白を追加（他のセクションと統一） */
  .top_faq__inner {
    padding: 0 5%;
  }
  /* リスト間の隙間調整 */
  .top_faq__list {
    gap: 14px;
  }
  details.top_faq__item {
    margin-bottom: 0;
  }

  /* Q（質問）ボックス：パディングと文字を縮小 */
  .top_faq__q {
    padding: 14px 46px 14px 18px;
    gap: 10px;
    border-radius: 30px;
  }
  .top_faq__q-label {
    font-size: 16px;
  }
  .top_faq__q-text {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.03em;
  }
  /* +/− アイコン縮小 */
  .top_faq__q-icon {
    right: 18px;
    width: 16px;
    height: 16px;
  }

  /* A（回答）ボックス */
  .top_faq__a {
    margin-top: 10px;
    padding: 18px 18px 18px 18px;
    gap: 10px;
    border-radius: 6px;
  }
  .top_faq__a-label {
    font-size: 18px;
  }
  .top_faq__a-text {
    font-size: 14px;
    line-height: 1.85;
  }
}

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

  共通ボタン：.btn_web（ベージ背景＋テキスト＋矢印＋背景丸）

==================================================================*/
.btn_web {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 80px;
  padding: 0px 73px 0px 34px;
  background-color: rgb(169, 162, 138);
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 50px;
  transition: opacity 0.3s;
}
.btn_web:hover {
  opacity: 0.85;
  color: #fff;
}
/* 1450px 以下では幅を 350px に縮小（640px までこのサイズ）
   ※ 大腸カメラ検査の流れセクション（.top_procedure）のボタンは 430px のまま */
@media screen and (max-width: 1450px) {
  .btn_web {
    width: 330px;
}
  .top_procedure__step-btns .btn_web {
    width: 400px;
}
}
.btn_web__text {
  flex: 0 1 auto;
  text-align: center;
  font-family: "dnp-shuei-mincho-pr6n", "DNPShueiMinPr6N", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #fff;
}
/* ::before = 矢印の後ろの半透明丸 */
.btn_web::before {
  content: "";
  position: absolute;
  right: 26px;
  top: 51%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(250, 247, 244, 0.302);
  pointer-events: none;
}
/* ::after = 矢印アイコン本体 */
.btn_web::after {
  content: "";
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 8px;
  background-image: url("../images/icon_arrow_web.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  pointer-events: none;
}

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

  .btn_web ── スマホ対応（640px 以下）
  ※ 矢印・丸・文字を小さくしてボタン全体を ~280px 幅に

==================================================================*/
@media screen and (max-width: 640px) {
  .btn_web,
  .top_procedure__step-btns .btn_web {
    width: 260px !important;
    height: 52px;
    padding: 0 48px 0 20px;
  }
  .btn_web__text {
    font-size: 15px;
    letter-spacing: 0.06em;
  }
  /* 矢印の後ろの半透明丸：小さく */
  .btn_web::before {
    right: 12px;
    width: 16px;
    height: 16px;
  }
  /* 矢印アイコン：小さく */
  .btn_web::after {
    right: 16px;
    width: 22px;
    height: 6px;
  }
}

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

  .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;
  }

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

    メインビジュアル（スマホ）
    ※ PC版は aspect-ratio: 1920/1688 で比例表示。
       スマホレイアウトは別途専用デザインが確定次第追加予定。

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

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

    .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;
  }
}