@charset "UTF-8";

.cataract .hero img {
  border-radius: 0px;
}

.cataract section {
  max-width: 1200px;
  width: 100%;
  margin: 30px auto;
}

.cataract section.hero {
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.cataract section h3 {
  text-align: center;
  font-size: 54px;
  padding-bottom: 20px;
  border-bottom: 2px solid #CDAA80;
  font-weight: 200;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 5px;
  width: fit-content;
  margin: 60px auto 60px;
}

.cataract section h3 span.small {
  font-size: 32px;
}

/* --- 修正後：16:9の比率にする --- */
.is-limited-width {
  position: relative;
  width: 100%;
  padding-bottom: 56.25% !important;
  /* ここを100%から56.25%に変更 */
  height: 0;
  overflow: hidden;
  margin: 20px 0;
}

/* iframeのサイズ設定（ここも必須です） */
.is-limited-width iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* PC用の設定 */
@media screen and (min-width: 768px) {
  .is-limited-width {
    max-width: 700px;
    margin: 60px auto !important;
    padding-bottom: 35% !important;
  }
}

/*feature*/
.cataract section.feature {
  padding: 60px 0;
}

.cataract section.feature .feature-item .flex-wrap {
  display: flex;
  justify-content: space-between;
}

.feature-item {
  margin: 120px 0;
}

.feature-item h4 {
  display: flex;
  align-items: flex-end;
  /* 下揃えにすることで数字と文字のバランスをとる */
  gap: 15px;
  /* 数字と文字の間隔 */
  margin-bottom: 20px;
  opacity: 0;
  /* 最初は透明 */
  transform: translateX(-40px);
  /* 左に40pxずらしておく */
  transition: opacity 1.0s ease-out, transform 1.0s ease-out;
  /* 1秒かけて変化 */
  will-change: opacity, transform;
}

/* --- 画面に入った時（js_activeクラスがついた時）の状態 --- */
/* 親要素の section.fade-in にクラスがつく想定です */
.feature-item.js_active h4 {
  opacity: 1;
  transform: translateX(0);
}

.feature-item.js_active:nth-child(2) h4 {
  transition-delay: 0s;
}

/* 各項目の出現タイミングを少しずつずらしたい場合（お好みで追加してください） */
.feature-item:nth-child(2) h4 {
  transition-delay: 0.2s;
}

.feature-item:nth-child(3) h4 {
  transition-delay: 0.4s;
}

/* 数字の部分 */
.feature-item .number {
  font-size: 140px;
  /* 数字の大きさ */
  color: #cbad78;
  /* 金色（画像に近い色） */
  font-family: "Times New Roman", Times, serif;
  /* セリフ体 */
  font-style: italic;
  /* 斜体 */
  line-height: 0.8;
  /* 数字の下の余白を詰める */
  font-weight: normal;
}

/* テキストを囲むグループ */
.feature-item .text-group {
  display: flex;
  flex-direction: column;
  padding-top: 5px;
  gap: 10px;
}

/* 上の小さい文字 */
.feature-item .small {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-left: 6px;
}

/* 下の大きい文字 */
.feature-item .large {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
}

.feature-item .text-col {
  width: 50%;
}

.feature-item .img-col {
  width: 50%;
}

.feature-item .img-col img {
  border-radius: 50%;
  max-width: 400px;
  margin: 80px auto 0;
  display: block;
}

/* スマホ対応：少し小さくする */
@media screen and (max-width: 767px) {
  .feature-item .number {
    font-size: 60px;
  }

  .feature-item .large {
    font-size: 22px;
  }
}

/* --- 画像の初期状態：右側に40pxずらして透明 --- */
.feature-item .img-col img {
  opacity: 0;
  transform: translateX(40px);
  /* 右からスライドさせる準備 */
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform;
}

/* --- アイテムが画面に入った（js_active）時の画像の状態 --- */
.feature-item.js_active .img-col img {
  opacity: 1;
  transform: translateX(0);
  /* 元の位置（中央）へ */
  /* 見出しより少しだけ遅れて動かし始めると、よりリッチに見えます */
  transition-delay: 0.2s;
}

/* --- スマホでは横の動きを少し抑える（任意） --- */
@media screen and (max-width: 767px) {
  .feature-item .img-col img {
    transform: translateY(20px);
    /* スマホは「下から上」の方が綺麗に見える場合があります */
  }
}

section.lens-multifocal .lens-support .flex-wrap {
  display: flex;
  justify-content: space-between;
}

section.lens-multifocal .lens-support .flex-wrap .text-col {
  width: 50%;
}

section.lens-multifocal .lens-support .flex-wrap .img-col {
  width: 50%;
}

section.lens-multifocal .lens-support .flex-wrap .img-col img {
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

/* --- 手術の流れ (Flow Steps) --- */
.flow-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 40px auto;
  width: 100%;
}

.flow-steps .step {
  position: relative;
  flex: 1;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  padding: 0 10px 0 25px;
  /* PC用：横向き矢印の形 */
  clip-path: polygon(calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%, 0% 0%);

  /* フェードイン準備 */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.flow-steps .step:first-child {
  padding-left: 10px;
  clip-path: polygon(calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 0% 0%);
}

/* アニメーション実行 */
.flow-steps.js_active .step {
  opacity: 1;
  transform: translateY(0);
}

.flow-steps.js_active .step:nth-child(1) {
  transition-delay: 0.1s;
}

.flow-steps.js_active .step:nth-child(2) {
  transition-delay: 0.3s;
}

.flow-steps.js_active .step:nth-child(3) {
  transition-delay: 0.5s;
}

.flow-steps.js_active .step:nth-child(4) {
  transition-delay: 0.7s;
}

.flow-steps.js_active .step:nth-child(5) {
  transition-delay: 0.9s;
}

/* スマホ版（767px以下）：縦に積む */
@media screen and (max-width: 767px) {
  .flow-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .flow-steps .step {
    width: 100%;
    max-width: 300px;
    height: 80px;
    padding: 20px 10px 10px;
    margin-top: -15px;
    font-size: 16px;
    /* 下向き矢印の形 */
    clip-path: polygon(100% 0%, 100% calc(100% - 20px), 50% 100%, 0% calc(100% - 20px), 0% 0%, 50% 20px);
  }

  .flow-steps .step:first-child {
    margin-top: 0;
    padding-top: 10px;
    clip-path: polygon(100% 0%, 100% calc(100% - 20px), 50% 100%, 0% calc(100% - 20px), 0% 0%);
  }
}

/* ステップ背景色 */
.flow-steps .step:nth-child(1) {
  background-color: #f14b43;
}

.flow-steps .step:nth-child(2) {
  background-color: #fba848;
}

.flow-steps .step:nth-child(3) {
  background-color: #86d563;
}

.flow-steps .step:nth-child(4) {
  background-color: #4a9df3;
}

.flow-steps .step:nth-child(5) {
  background-color: #a163da;
}

.lens-types h4 {
  font-size: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid #CDAA80;
  font-weight: 200;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 5px;
  width: fit-content;
  margin: 50px 0 0px;
  text-align: left;
}

.lens-types img {
  margin: 20px auto;
  display: block;
}

.contact-cta {
  margin-top: 120px !important;
}

.contact-cta p.catch {
  line-height: 1.8;
  text-align: justify;
  font-size: 17px;
  font-size: 2.7rem;
  letter-spacing: .05em;
  text-align: center;
}

/* --- お問い合わせセクション全体の調整 --- */
.contact-cta {
  text-align: center;
  padding: 80px 0;
}

.cta-sub {
  font-size: 24px;
  margin-bottom: 40px;
  font-weight: 500;
}

/* ボタンの並び */
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 80px;
  /* アイコン同士の間隔 */
}

/* 個別のボタン項目 */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s;
}

.contact-item:hover {
  opacity: 0.7;
}

/* 金色の円形アイコン */
.icon-circle {
  width: 130px;
  /* 円のサイズ */
  height: 130px;
  border: 5px solid #cbad78;
  /* 金色の縁 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  margin-bottom: 20px;
}

/* アイコン自体の色とサイズ */
.icon-circle i {
  color: #cbad78;
  font-size: 55px;
  /* アイコンの大きさ */
}

/* 下の電話番号・テキスト */
.contact-text {
  font-size: 32px;
  font-weight: 700;
  color: #4b3621;
  /* 濃い茶色 */
  letter-spacing: 0.05em;
}

/* --- スマホ対応 (767px以下) --- */
@media screen and (max-width: 767px) {
  .contact-buttons {
    flex-direction: column;
    gap: 40px;
  }

  .icon-circle {
    width: 100px;
    height: 100px;
  }

  .icon-circle i {
    font-size: 40px;
  }

  .contact-text {
    font-size: 24px;
  }
}

/* --- お問い合わせセクション全体 --- */
.contact-cta {
  text-align: center;
  padding: 80px 0;
  background-color: #fff;
}

.cta-sub {
  font-size: 24px;
  margin-bottom: 40px;
  font-weight: 500;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 80px;
  /* アイコン同士の間隔 */
}

/* 個別ボタンのレイアウト */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s, transform 0.3s;
}

.contact-item:hover {
  opacity: 0.8;
  transform: translateY(-3px);
}

/* 金色の円形枠 */
.icon-circle {
  width: 130px;
  height: 130px;
  border: 5px solid #cbad78;
  /* ゴールド */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  margin-bottom: 20px;
}

/* アイコン自体の設定 */
.icon-circle i {
  color: #cbad78;
  font-size: 55px;
  /* アイコンの大きさ */
  line-height: 1;
  display: block;
}

/* 下の電話番号・テキスト */
.contact-text {
  font-size: 32px;
  font-weight: 700;
  color: #4b3621;
  /* 濃い茶色 */
  letter-spacing: 0.05em;
}

/* --- 手術の流れ (Flow Steps) 768px以下で縦積み --- */
@media screen and (max-width: 768px) {

  /* コンタクトボタンの調整 */
  .contact-buttons {
    flex-direction: column;
    gap: 40px;
  }

  .icon-circle {
    width: 100px;
    height: 100px;
  }

  .icon-circle i {
    font-size: 40px;
  }

  .contact-text {
    font-size: 24px;
  }

  /* 手術の流れを縦に積む */
  .flow-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .flow-steps .step {
    width: 100%;
    max-width: 320px;
    height: 80px;
    margin-top: -15px;
    /* 矢印を重ねる */
    padding: 20px 10px 10px;
    font-size: 16px;
    /* 下向き矢印の形に変形 */
    clip-path: polygon(100% 0%, 100% calc(100% - 20px), 50% 100%, 0% calc(100% - 20px), 0% 0%, 50% 20px) !important;
  }

  .flow-steps .step:first-child {
    margin-top: 0;
    padding-top: 10px;
    clip-path: polygon(100% 0%, 100% calc(100% - 20px), 50% 100%, 0% calc(100% - 20px), 0% 0%) !important;
  }
}