@charset "UTF-8";

/* =========================================================
   基本設定
   ========================================================= */
:root {
  --blue: #168bff;
  --blue-l: #7dbeff;
  --grad: linear-gradient(180deg, #168bff 0%, #7dbeff 100%);
  --text: #333;
  --dark: #444;
  --gray: #465055;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Crect x='1' y='8' width='25' height='25' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M5.5 15.5l7.5 11 15-26' fill='none' stroke='%23168bff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .8; }
em { font-style: normal; }
main { overflow-x: hidden; overflow-x: clip; }
.inner { width: 1102px; margin: 0 auto; }

/* 見出し（英字＋明朝） */
.sec-en { color: var(--blue); font-size: 24px; font-weight: 700; line-height: 1.3; text-align: center; }
.sec-ttl { margin-top: 10px; color: #fff; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.45; text-align: center; }
.sec-ttl--dark { color: #000; }
.sec-en--left, .sec-ttl--left { text-align: left; }
/* h2の下は30px空ける（PC・スマホ共通） */
.sec-ttl + * { margin-top: 30px !important; }
.intro .sec-en, .reason .sec-en { color: #fff; }

/* チェックリスト */
.check-list li { position: relative; padding-left: 52px; font-size: 24px; font-weight: 700; line-height: 50px; color: var(--dark); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 34px; margin-top: -19px; background: var(--check) no-repeat center / contain; }

/* =========================================================
   ヘッダー・フローティングメニュー
   ========================================================= */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 34px 0 0 38px; pointer-events: none; }
.header__logo { line-height: 0; }
.header__logo a { display: inline-block; pointer-events: auto; }
.header__logo img { width: 495px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 0 14px rgba(255, 255, 255, .8)); }

.float { position: fixed; right: 0; top: 50%; z-index: 40; display: flex; flex-direction: column; gap: 6px; transform: translateY(-50%); }
.float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  writing-mode: vertical-rl;
  width: 58px;
  padding: 22px 0;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 4px 14px rgba(22, 139, 255, .25);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  transition: width .3s, opacity .3s;
}
.float__btn:hover { opacity: 1; width: 66px; }
.float__btn--web { background: var(--grad); color: #fff; }
.float__btn--tel { background: #fff; color: var(--blue); border: 2px solid var(--blue); border-right: 0; letter-spacing: 0; }
.float__btn--tel img { width: 16px; filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(2563%) hue-rotate(198deg) brightness(101%) contrast(103%); }

/* =========================================================
   メインビジュアル（1920px基準で画面幅に合わせて縮小）
   ========================================================= */
.mv { --u: min(1px, .0520833vw); position: relative; height: calc(851 * var(--u)); background: #eef0ee url(../img/mv_bg.webp) no-repeat center / cover; }
/* 文字の背面に白いグラデーションを敷いて、写真の上でも読みやすくする */
.mv::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .7) 34%, rgba(255, 255, 255, .25) 52%, rgba(255, 255, 255, 0) 62%); pointer-events: none; }
.mv__inner { position: relative; z-index: 1; width: calc(1920 * var(--u)); height: 100%; margin: 0 auto; }
.mv__txt { position: absolute; left: calc(210 * var(--u)); top: calc(239 * var(--u)); font-family: var(--serif); font-weight: 600; color: #1e2328; white-space: nowrap; text-shadow: 0 0 calc(3 * var(--u)) #fff, 0 0 calc(8 * var(--u)) #fff, 0 0 calc(18 * var(--u)) rgba(255, 255, 255, .9); }
.mv__catch > span { display: block; letter-spacing: .14em; }
.mv__l1, .mv__l3 { font-size: calc(48 * var(--u)); line-height: calc(62 * var(--u)); }
.mv__l2 { margin: calc(14 * var(--u)) 0; font-size: calc(65 * var(--u)); line-height: calc(82 * var(--u)); }
.mv__l2 em {
  margin: 0 calc(12 * var(--u)) 0 calc(4 * var(--u));
  background: linear-gradient(180deg, #0a6ee0 0%, #1688ff 55%, #4aa6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: calc(80 * var(--u));
  text-shadow: none;
  filter: drop-shadow(0 0 calc(2 * var(--u)) #fff) drop-shadow(0 0 calc(8 * var(--u)) #fff);
}
.mv__name { position: relative; margin-top: calc(26 * var(--u)); padding-top: calc(14 * var(--u)); letter-spacing: .2em; }
.mv__name::before { content: ""; position: absolute; left: 0; top: 0; width: calc(828 * var(--u)); height: max(1px, calc(1.5 * var(--u))); background: linear-gradient(90deg, rgba(235, 188, 60, .15), #ebbc3c 25%, #ebbc3c 75%, rgba(235, 188, 60, .15)); }
.mv__n1 { display: block; font-size: calc(62 * var(--u)); line-height: calc(80 * var(--u)); }
.mv__n1 small { margin-left: calc(10 * var(--u)); font-size: calc(47 * var(--u)); }
.mv__n2 { display: block; font-size: calc(37 * var(--u)); line-height: calc(54 * var(--u)); letter-spacing: .3em; }
.mv__menu { position: absolute; left: calc(1148 * var(--u)); top: calc(578 * var(--u)); display: flex; gap: calc(24 * var(--u)); }
.mv__menu li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(224 * var(--u));
  height: calc(224 * var(--u));
  padding-top: calc(25 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 60, 120, .12);
  font-family: var(--serif);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(30 * var(--u));
  text-align: center;
}
.mv__menu img { width: calc(121 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.mv__menu small { display: block; font-size: calc(19 * var(--u)); line-height: calc(24 * var(--u)); }
.mv__menu li:nth-child(3) img { margin-bottom: 0; }

/* =========================================================
   消化器の不調
   ========================================================= */
.intro__body { padding: 100px 20px; background: var(--grad); color: #fff; text-align: center; }
.intro .sec-ttl { margin-top: 6px; }
.intro__txt { margin-top: 22px; font-size: 20px; font-weight: 700; line-height: 36px; }
.intro__photo { height: 403px; overflow: hidden; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   お悩み
   ========================================================= */
.worry { padding: 100px 0; }
.worry .sec-ttl { margin-top: 8px; }
.worry__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 31px; padding: 21px 0; }
.worry__list::before { content: ""; position: absolute; left: 19px; right: 19px; top: 50%; height: 2px; margin-top: -1px; background: var(--blue); }
.worry__list li { display: flex; flex-direction: column; align-items: center; height: 255px; padding-top: 31px; font-size: 20px; font-weight: 500; line-height: 24px; text-align: center; color: #000; }
.worry__list li:nth-child(4n+1), .worry__list li:nth-child(4n+2), .worry__list li:nth-child(4n+3) { border-right: 2px solid var(--blue); }
.worry__list li:nth-child(n+5) { padding-top: 40px; }
.worry__list img { width: 126px; margin-bottom: 28px; }
.worry__msg { margin-top: 37px; color: var(--blue); font-size: 30px; font-weight: 700; line-height: 1.5; text-align: center; }

/* =========================================================
   お問い合わせボックス
   ========================================================= */
.contact { padding: 100px 0; }
.worry + .contact { padding-top: 0; }
.contact__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1102px;
  height: 324px;
  margin: 0 auto;
  padding-top: 35px;
  border-radius: 50px;
  background: var(--grad);
  color: #fff;
  text-align: center;
}
.contact__en { font-size: 70px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.contact__ja { margin-top: 4px; font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1; }
.contact__tel { display: flex; align-items: center; gap: 22px; margin-top: 14px; font-size: 45px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.contact__tel img { width: 32px; }
.contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 372px;
  height: 62px;
  margin-top: 26px;
  border-radius: 31px;
  background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.contact__btn span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 24px; font-weight: 500; }
.contact__btn:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 70, 150, .25); }

/* =========================================================
   選ばれる理由
   ========================================================= */
.reason { padding: 100px 0; background: var(--grad); }
.reason .sec-ttl { margin-top: 6px; }
.reason__list { margin-top: 44px; }
.reason__list li { display: flex; height: 303px; background: #fff; }
.reason__list li + li { margin-top: 37px; }
.reason__list img { width: 522px; height: 100%; flex-shrink: 0; object-fit: cover; }
.reason__list div { padding: 51px 30px 0 33px; }
.reason__list h3 { color: var(--blue); font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.4; }
.reason__list p { margin-top: 22px; font-size: 20px; font-weight: 500; line-height: 30px; }

/* =========================================================
   隠れた病気（ストライプ背景）
   ========================================================= */
.disease, .dark { background: repeating-linear-gradient(180deg, #3e3934 0 3px, #241f1a 3px 4px); color: #fff; }
.disease { padding: 100px 0; }
.disease .sec-ttl { margin-top: 6px; }
.disease__lead { margin-top: 31px; font-size: 24px; font-weight: 500; line-height: 30px; text-align: center; }
.disease__list { display: grid; grid-template-columns: repeat(3, 238px); justify-content: center; row-gap: 40px; margin-top: 35px; }
.disease__list li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 130px; font-size: 18px; line-height: 30px; }
.disease__list img { width: auto; max-height: 100px; margin-bottom: 4px; }
.disease__msg { margin-top: 44px; color: var(--blue); font-size: 24px; font-weight: 700; line-height: 36px; text-align: center; }
.disease + .contact { padding-top: 100px; }

/* =========================================================
   検査について（内視鏡・大腸カメラ）
   ========================================================= */
.exam { position: relative; padding: 100px 0; }
.exam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 406px; background: var(--grad); }
.exam .inner { position: relative; }
.exam__img { display: block; width: 1102px; height: 518px; object-fit: cover; }
.exam .sec-en { margin-top: 64px; }
.exam .sec-ttl { margin-top: 8px; }
.exam__txt { margin-top: 10px; font-size: 20px; font-weight: 500; line-height: 30px; }
.exam__note { color: #ff2b2b; font-size: 16px; }
.exam__sub { margin-top: 22px; font-size: 24px; font-weight: 700; line-height: 1.4; }
.exam__txt--s { margin-top: 8px; }
.check-box { margin-top: 24px; padding: 26px 40px 28px 43px; border: 2px solid var(--blue); }
.check-box h4 { color: var(--blue); font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.4; }
.check-box h4 + .check-list { margin-top: 6px; }
.check-box .check-list + h4 { margin-top: 18px; }
.check-box .check-list { columns: 2; column-gap: 20px; }
.check-box .check-list--3 { column-fill: balance; }
.check-box .check-list li { break-inside: avoid; }
.exam--colon { padding-top: 100px; }
.exam--colon .check-box { margin-top: 29px; padding-bottom: 11px; }
.contact + .exam { margin-top: 0; }

/* =========================================================
   大腸ポリープ切除
   ========================================================= */
.polyp { padding: 100px 0; }
.polyp .exam__txt { margin-top: 7px; }
.polyp__dl { margin-top: 26px; }
.polyp__dl dt { font-size: 24px; font-weight: 700; line-height: 1.4; }
.polyp__dl dd { font-size: 20px; font-weight: 500; line-height: 30px; }
.polyp__dl dd + dt { margin-top: 24px; }
.polyp__cap { margin-top: 30px; color: var(--blue); font-size: 24px; font-weight: 700; line-height: 1.4; }
.polyp__imgs { display: flex; justify-content: space-between; margin-top: 22px; }
.polyp__imgs li { position: relative; width: 337px; }
.polyp__imgs li + li::before { content: ""; position: absolute; left: -31px; top: 50%; width: 18px; height: 60px; margin-top: -30px; background: #f86c01; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* =========================================================
   腹部エコー・内科（ストライプ背景）
   ========================================================= */
.dark { padding: 100px 0; }
.media { display: flex; justify-content: space-between; align-items: center; }
.media + .media { margin-top: 82px; }
.media--reverse { flex-direction: row-reverse; }
.media__body { width: 542px; }
.media--reverse .media__body { width: 546px; }
.media__body .sec-ttl { margin-top: 6px; }
.media__body p:last-child { margin-top: 32px; font-size: 20px; font-weight: 500; line-height: 30px; }
.media--reverse .media__body p:last-child { line-height: 36px; }
.media__img { width: 524px; flex-shrink: 0; }
.media--reverse .media__img { width: 522px; }

/* =========================================================
   健康な毎日を支えるために
   ========================================================= */
.healthy { padding: 100px 0; background: #ede7e2 url(../img/healthy_bg.webp) no-repeat center / cover; text-align: center; }
.healthy .sec-ttl { margin-top: 8px; }
.healthy__txt { margin-top: 4px; font-size: 20px; font-weight: 500; line-height: 36px; }
.healthy .check-list { display: inline-block; margin-top: 30px; text-align: left; }
.check-list--s li { padding-left: 32px; font-size: 20px; font-weight: 500; line-height: 36px; color: var(--text); }
.check-list--s li::before { width: 22px; height: 25px; margin-top: -14px; }
.healthy .check-list + .healthy__txt { margin-top: 30px; }
.healthy + .contact { padding-top: 100px; }

/* =========================================================
   公式サイト
   ========================================================= */
.official { padding: 100px 0; }
.contact + .official { margin-top: 0; }
.official__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1102px;
  height: 323px;
  margin: 0 auto;
  padding-top: 56px;
  border-radius: 50px;
  background: #ecf0f4;
  transition: transform .3s, box-shadow .3s;
}
.official__box:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(70, 80, 85, .15); }
.official__box img { width: 495px; }
.official__en { margin-top: -4px; color: var(--gray); font-size: 70px; font-weight: 700; line-height: 1.1; }
.official__btn { display: flex; align-items: center; justify-content: center; width: 372px; height: 62px; margin-top: 18px; border-radius: 31px; background: var(--gray); color: #fff; font-size: 24px; font-weight: 500; }

/* =========================================================
   クリニック概要
   ========================================================= */
.about { padding: 100px 0; background: #ccd url(../img/about_bg.webp) no-repeat center / cover; }
.about__box { width: 1103px; margin: 0 auto; padding: 67px 150px 75px; background: rgba(255, 255, 255, .9); }
.about .sec-ttl { margin-top: 6px; }
.about__table { margin-top: -4px; font-size: 18px; line-height: 50px; }
.about__table > div { display: flex; border-bottom: 1px solid #333; }
.about__table dt { width: 191px; flex-shrink: 0; padding-left: 6px; }
.about__table dd small { margin-left: .5em; color: var(--blue); font-size: 15px; }
.about__map { height: 274px; margin-top: 40px; background: #333; }
.about__map iframe { display: block; width: 100%; height: 100%; border: 0; }



/* 背景色が同じ（白）ブロックが続く所は、間隔が100pxになるよう上の余白を0にする */
.worry + .contact, .contact + .official, .exam--colon + .polyp { padding-top: 0; }

/* =========================================================
   アニメーション
   ========================================================= */
@keyframes skUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes skPop { 0% { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
.mv__catch > span, .mv__name { animation: skUp 1s cubic-bezier(.22, .61, .36, 1) both; }
.mv__l2 { animation-delay: .15s !important; }
.mv__l3 { animation-delay: .3s !important; }
.mv__name { animation-delay: .45s; }
.mv__menu li { animation: skPop .7s cubic-bezier(.22, .61, .36, 1) both; }
.mv__menu li:nth-child(1) { animation-delay: .7s; }
.mv__menu li:nth-child(2) { animation-delay: .85s; }
.mv__menu li:nth-child(3) { animation-delay: 1s; }
.js-anim .js-fade { opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
.js-anim .js-fade--up { transform: translateY(36px); }
.js-anim .js-fade--left { transform: translateX(-48px); }
.js-anim .js-fade--right { transform: translateX(48px); }
.js-anim .js-fade--zoom { transform: scale(.95); }
.js-anim .js-fade.is-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anim .js-fade { opacity: 1; transform: none; }
}

/* =========================================================
   タブレット（〜1199px）
   ========================================================= */
@media (max-width: 1199px) {
  .inner, .contact__box, .official__box, .about__box { width: auto; margin-left: 24px; margin-right: 24px; }
  .header__logo img { width: 360px; }
  .exam__img { width: 100%; height: auto; aspect-ratio: 1102 / 518; }
  .reason__list img { width: 46%; }
  .media__body, .media--reverse .media__body { width: 50%; }
  .media__img, .media--reverse .media__img { width: 46%; }
  .polyp__imgs li { width: 30%; }
  .polyp__imgs li + li::before { left: -10%; transform: translateX(50%); }
  .about__box { padding: 60px 48px; }
}

/* =========================================================
   スマートフォン（〜767px）
   ========================================================= */
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.8; padding-bottom: 58px; }
  .inner, .contact__box, .official__box, .about__box { margin-left: 16px; margin-right: 16px; }
  .sec-en { font-size: 16px; }
  .sec-ttl { margin-top: 6px; font-size: 22px; line-height: 1.5; }
  .check-list li { padding-left: 38px; font-size: 17px; line-height: 1.6; }
  .check-list li + li { margin-top: 8px; }
  .check-list li::before { width: 23px; height: 26px; margin-top: -15px; }

  .header { padding: 12px 0 0 12px; }
  .header__logo img { width: 230px; }

  .float { top: auto; bottom: 0; left: 0; right: 0; flex-direction: row; gap: 0; transform: none; }
  .float__btn { flex: 1; writing-mode: horizontal-tb; width: auto; height: 58px; padding: 0; border-radius: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); font-size: 16px; }
  .float__btn:hover { width: auto; }
  .float__btn--tel { border: 0; border-top: 2px solid var(--blue); }

  /* メインビジュアル */
  .mv { --u: 1px; height: auto; padding: 78px 16px 30px; background-position: 70% center; }
  .mv::before { background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, .2) 72%, rgba(255, 255, 255, 0)); }
  .mv__inner { width: auto; }
  .mv__txt { position: relative; left: auto; top: auto; white-space: normal; }
  .mv__catch > span { letter-spacing: .06em; }
  .mv__l1, .mv__l3 { font-size: 19px; line-height: 1.6; }
  .mv__l2 { margin: 4px 0; font-size: 24px; line-height: 1.4; }
  .mv__l2 em { margin: 0 4px 0 2px; font-size: 32px; }
  .mv__name { margin-top: 16px; padding-top: 12px; letter-spacing: .06em; }
  .mv__name::before { width: 100%; height: 1px; }
  .mv__n1 { font-size: 28px; line-height: 1.4; }
  .mv__n1 small { margin-left: 6px; font-size: 21px; }
  .mv__n2 { font-size: 17px; line-height: 1.6; }
  .mv__menu { position: relative; left: auto; top: auto; justify-content: center; gap: 10px; margin-top: 28px; }
  .mv__menu li { width: 104px; height: 104px; padding-top: 10px; font-size: 13px; line-height: 1.3; }
  .mv__menu img { width: 54px; margin-bottom: 3px; }
  .mv__menu small { font-size: 10px; line-height: 1.3; }

  .intro__body { padding: 48px 16px; }
  .intro__txt { margin-top: 22px; font-size: 16px; line-height: 1.8; text-align: left; }
  .intro__photo { height: 180px; }

  .worry { padding: 48px 0; }
  .worry__list { grid-template-columns: repeat(2, 1fr); margin-top: 24px; padding: 0; border-top: 2px solid var(--blue); }
  .worry__list::before { display: none; }
  .worry__list li, .worry__list li:nth-child(n+5) { height: auto; padding: 18px 6px; border-bottom: 2px solid var(--blue); font-size: 15px; line-height: 1.4; }
  .worry__list li:nth-child(4n+1), .worry__list li:nth-child(4n+2), .worry__list li:nth-child(4n+3) { border-right: 0; }
  .worry__list li:nth-child(odd) { border-right: 2px solid var(--blue); }
  .worry__list img { width: 76px; margin-bottom: 10px; }
  .worry__msg { margin-top: 24px; font-size: 19px; }

  .contact { padding-bottom: 44px; }
  .disease + .contact, .healthy + .contact { padding-top: 44px; }
  .contact__box { height: auto; padding: 26px 16px 28px; border-radius: 26px; }
  .contact__en { font-size: 42px; }
  .contact__ja { margin-top: 6px; font-size: 18px; }
  .contact__tel { gap: 12px; margin-top: 14px; font-size: 30px; }
  .contact__tel img { width: 22px; }
  .contact__btn { width: 100%; max-width: 300px; height: 54px; margin-top: 18px; }
  .contact__btn span { font-size: 18px; }

  .reason { padding: 44px 0 52px; }
  .reason__list { margin-top: 24px; }
  .reason__list li { flex-direction: column; height: auto; }
  .reason__list li + li { margin-top: 18px; }
  .reason__list img { width: 100%; height: auto; aspect-ratio: 522 / 303; }
  .reason__list div { padding: 20px 18px 24px; }
  .reason__list h3 { font-size: 19px; }
  .reason__list p { margin-top: 10px; font-size: 16px; line-height: 1.8; }

  .disease { padding: 48px 0 44px; }
  .disease__lead { margin-top: 18px; font-size: 16px; line-height: 1.7; }
  .disease__list { grid-template-columns: repeat(3, 1fr); row-gap: 14px; margin-top: 24px; }
  .disease__list li { height: 96px; font-size: 14px; line-height: 1.5; }
  .disease__list img { max-height: 62px; }
  .disease__msg { margin-top: 26px; font-size: 16px; line-height: 1.7; text-align: left; }
  .disease__msg br { display: none; }

  .exam, .exam--colon { padding: 56px 0 20px; }
  .exam::before { height: 200px; }
  .exam .sec-en { margin-top: 28px; }
  .exam__txt { margin-top: 14px; font-size: 16px; line-height: 1.8; }
  .exam__note { display: block; margin-top: 4px; font-size: 13px; line-height: 1.6; }
  .exam__sub { margin-top: 22px; font-size: 19px; }
  .check-box { margin-top: 22px; padding: 18px 16px 20px; }
  .check-box h4 { font-size: 20px; }
  .check-box h4 + .check-list { margin-top: 10px; }
  .check-box .check-list + h4 { margin-top: 20px; }
  .check-box .check-list { columns: 1; }

  .polyp { padding: 40px 0 44px; }
  .exam--colon + .polyp { padding-top: 24px; }
  .polyp__dl dt { font-size: 18px; }
  .polyp__dl dd { font-size: 16px; line-height: 1.7; }
  .polyp__dl dd + dt { margin-top: 16px; }
  .polyp__cap { margin-top: 22px; font-size: 17px; }
  .polyp__imgs { margin-top: 14px; }
  .polyp__imgs li { width: 29%; }
  .polyp__imgs li + li::before { width: 9px; height: 30px; margin-top: -15px; }

  .dark { padding: 52px 0; }
  .media, .media--reverse { flex-direction: column; gap: 22px; }
  .media + .media { margin-top: 52px; }
  .media__body, .media--reverse .media__body, .media__img, .media--reverse .media__img { width: 100%; }
  .media__body p:last-child, .media--reverse .media__body p:last-child { margin-top: 14px; font-size: 16px; line-height: 1.8; }
  .media__body .sec-en { font-size: 14px; }

  .healthy { padding: 48px 0 44px; }
  .healthy__txt { font-size: 16px; line-height: 1.8; text-align: left; }
  .healthy .check-list { margin-top: 20px; }
  .check-list--s li { padding-left: 30px; font-size: 16px; line-height: 1.6; }

  .official { padding-bottom: 52px; }
  .contact + .official { margin-top: 0; }
  .official__box { height: auto; padding: 28px 16px 30px; border-radius: 26px; }
  .official__box img { width: 260px; }
  .official__en { font-size: 40px; }
  .official__btn { width: 100%; max-width: 300px; height: 54px; font-size: 18px; }

  .about { padding: 0 0 44px; background: #fff; }
  .about::before { content: ""; display: block; aspect-ratio: 375 / 220; background: url(../img/about_bg.webp) no-repeat center / cover; }
  .about__box { margin: 0; padding: 36px 16px 0; background: #fff; }
  .about__table { margin-top: 18px; font-size: 15px; line-height: 1.7; }
  .about__table > div { padding: 12px 0; }
  .about__table dt { width: 86px; padding-left: 0; }
  .about__table dd small { display: block; margin-left: 0; }
  .about__map { height: 240px; margin-top: 24px; }
}

/* スマホ時だけの改行 */
.u-sp { display: none; }
@media (max-width: 767px) { .u-sp { display: inline; } .u-pc { display: none; } }