/* 近視・遠視・乱視ページ：装飾より本文と見え方の比較を優先する。 */
.refraction-page .lower-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.refraction-page .sub-section { padding-block: clamp(58px, 7vw, 100px); }
.refraction-page .rf-head { max-width: 59rem; margin-bottom: 2rem; }
.refraction-page .rf-head h2,
.refraction-page .rf-note h2,
.refraction-page .rf-alert h2 {
  margin: .35rem 0 1rem;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.45;
}
.refraction-page .rf-head p,
.refraction-page .rf-grid p,
.refraction-page .rf-note p,
.refraction-page .rf-alert li { line-height: 1.9; }
.refraction-page .rf-note p + p { margin-top: 1rem; }

.refraction-page .rf-grid { gap: 0 clamp(24px, 4vw, 58px); }
.refraction-page .rf-grid article,
.refraction-page .rf-note {
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid #bfdee8;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.refraction-page .rf-grid h3 { margin: 0 0 10px; font-size: 1.25rem; }
.refraction-page .rf-split { gap: clamp(30px, 5vw, 72px); align-items: start; }
.refraction-page .rf-note .lower-button { margin-top: 1.1rem; }

.refraction-page .rf-alert {
  padding: 22px 26px;
  border: 0;
  border-radius: 9px;
  background: #ecf8fb;
}
.refraction-page .rf-alert ul { margin-bottom: 0; }

.refraction-page .rf-vision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 38px);
}
.refraction-page .rf-vision { min-width: 0; margin: 0; }
.refraction-page .rf-vision__scene {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 9px;
  background: #e9f4f7;
}
.refraction-page .rf-vision__scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.refraction-page .rf-vision__effect { transform: scale(1.04); }
.refraction-page .rf-vision--myopia .rf-vision__base {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 50%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 0 50%, #000 78%);
}
.refraction-page .rf-vision--myopia .rf-vision__effect {
  filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 54%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0 54%, transparent 78%);
}
.refraction-page .rf-vision--hyperopia .rf-vision__base {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 54%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0 54%, transparent 78%);
}
.refraction-page .rf-vision--hyperopia .rf-vision__effect {
  filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 50%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 0 50%, #000 78%);
}
.refraction-page .rf-vision--astigmatism .rf-vision__base { filter: blur(1.2px); }
.refraction-page .rf-vision--astigmatism .rf-vision__effect {
  opacity: .48;
  filter: blur(2px);
  transform: translate(3px, 2px) scale(1.04);
}
.refraction-page .rf-vision figcaption { padding-top: 15px; }
.refraction-page .rf-vision figcaption strong,
.refraction-page .rf-vision figcaption span { display: block; }
.refraction-page .rf-vision figcaption strong { color: #09536f; font-size: 1.1rem; }
.refraction-page .rf-vision figcaption span { margin-top: 4px; color: #4a6b79; line-height: 1.7; }
.refraction-page .rf-vision-note { margin: 24px 0 0; color: #607d8a; font-size: .87rem; line-height: 1.8; }

.refraction-page .rf-faq { gap: 0 clamp(25px, 4vw, 60px); }
.refraction-page .rf-faq details {
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d1e6eb;
  border-radius: 0;
  background: transparent;
}
.refraction-page .rf-faq summary { padding: 19px 0; }
.refraction-page .rf-faq p { padding-bottom: 20px; }

.refraction-page .rf-cta {
  border-radius: 12px;
  background: #e9f6fa;
  color: #31586a;
}
.refraction-page .rf-cta h2 { color: #09536f; }
.refraction-page .rf-cta .sub-kicker { color: #087eaf; }
.refraction-page .rf-cta .lower-button { background: #087eaf; border-color: #087eaf; color: #fff; }
.refraction-page .rf-cta .lower-button--ghost { background: transparent; border-color: #a8d7e5; color: #09536f; }
.refraction-page .rf-reference { margin: 22px 0 0; color: #5a7784; font-size: .83rem; line-height: 1.8; }
.refraction-page .rf-reference a { color: #087eaf; }

@media (max-width: 760px) {
  .refraction-page .sub-section { padding-block: 52px; }
  .refraction-page .rf-grid,
  .refraction-page .rf-split,
  .refraction-page .rf-faq { grid-template-columns: 1fr; }
  .refraction-page .rf-grid article,
  .refraction-page .rf-note { padding: 20px 0 0; }
  .refraction-page .rf-vision-grid { grid-template-columns: 1fr; gap: 28px; }
  .refraction-page .rf-alert { padding: 20px; }
  .refraction-page .lower-hero-visual img { object-position: 47% center; }
}