/* =====================================================
   Yasuragi no Sato - Top Page Styles
   top.css: top-page-specific styles only
   (Base styles, header, footer in style.css)
   ===================================================== */

/* =====================================================
   SP-only line break (hidden on PC, shown on mobile)
   ===================================================== */
.sp-only {
  display: none;
}
br.pc-only {
  display: inline;
}
p.pc-only {
  display: block;
}

/* =====================================================
   Scroll Animation
   ===================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in--delay-1 { transition-delay: 0.15s; }
.fade-in--delay-2 { transition-delay: 0.3s; }
.fade-in--delay-3 { transition-delay: 0.45s; }
.fade-in--delay-4 { transition-delay: 0.6s; }

/* =====================================================
   Section Title Base (shared across top sections)
   ===================================================== */
/* Figma: FOT-TsukuAntiqueLMin Std 64px w300, lh 94px, ls 0 */
.top-section-title {
  font-family: var(--font-mincho);
  font-size: clamp(32px, 4.44vw, 64px);
  font-weight: 300;
  color: var(--color-text-dark);
  line-height: 1.47;
  letter-spacing: 0;
}

/* =====================================================
   1. Hero Section (TOP) - Sticky Fullscreen Video
   ===================================================== */
/* Wrapper creates scroll space: hero stays pinned while user scrolls through */
.top-hero-wrapper {
  position: relative;
  height: 250vh;
  height: 250dvh;
}

.top-hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
  touch-action: pan-y;
}

.top-hero__bg {
  position: absolute;
  inset: 0;
}

.top-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Subtle overlay for text readability */
.top-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(50, 35, 10, 0.35) 0%,
    rgba(80, 60, 30, 0.15) 35%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}

/* Text area */
.top-hero__text-area {
  position: absolute;
  left: clamp(24px, 7.5vw, 108px);
  bottom: clamp(40px, 6.11vw, 88px);
  z-index: 2;
  text-align: left;
  filter: drop-shadow(0 0 19px rgba(53, 35, 4, 0.8));
}

/* Scroll hint indicator */
.top-hero__scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  transition: opacity 0.5s ease;
}

.top-hero__scroll-hint span {
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  animation: scrollHintAnim 1.8s ease-in-out infinite;
}

@keyframes scrollHintAnim {
  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 1; }
}

/* Figma: 72px Shippori Mincho B1 w600, lineHeight 56px, letterSpacing 0 */
.top-hero__main-title {
  font-family: var(--font-mincho);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  color: #fff;
  line-height: 0.78;
  letter-spacing: 0;
  margin-bottom: clamp(16px, 2.08vw, 30px);
}

/* Figma: 36px Shippori Mincho B1 w600, lineHeight 52px */
.top-hero__sub-text {
  font-family: var(--font-mincho);
  font-size: clamp(18px, 2.5vw, 36px);
  font-weight: 600;
  color: #fff;
  line-height: 1.44;
  letter-spacing: 0;
  margin-top: clamp(4px, 0.49vw, 7px);
}

/* =====================================================
   2. Section: "30年続く、安心の断食道場"
   ===================================================== */
.top-intro {
  background: #fff;
  padding: clamp(60px, 8.33vw, 120px) 0 0;
}

.top-intro__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.44vw, 64px);
}

/* Figma: title centered, 770px wide area at top=100px */
.top-intro__title {
  text-align: center;
  margin-bottom: clamp(20px, 2.78vw, 40px);
}

/* Figma: 28px Shippori Mincho B1 w600, lh 54px, centered */
.top-intro__subtitle {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 1.94vw, 28px);
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.93;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: clamp(40px, 5.56vw, 80px);
}

/* Figma: 2 cards 500px each, gap 100px, container 1100px centered */
.top-intro__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 6.94vw, 100px);
  max-width: 1100px;
  margin: 0 auto clamp(60px, 8.33vw, 120px);
}

/* Figma: 500x250px, cornerRadius 11.42px, mask clip */
.top-intro-card {
  position: relative;
  height: clamp(180px, 17.36vw, 250px);
  overflow: hidden;
  display: block;
  text-decoration: none;
  border-radius: 11.42px;
}

.top-intro-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.top-intro-card:hover .top-intro-card__image {
  transform: scale(1.04);
}

.top-intro-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,15,5,0.72) 0%, rgba(20,15,5,0.2) 55%, transparent 100%);
}

/* テキストをカード中央に配置 */
.top-intro-card__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

/* Figma: 36px Shippori Mincho B1 w600, lh 52px */
.top-intro-card__title {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.44;
  margin-bottom: 0;
}

/* Figma: Yu Gothic 20px w400, lh 36px */
.top-intro-card__sub {
  font-family: var(--font-gothic);
  font-size: clamp(13px, 1.39vw, 20px);
  font-weight: 400;
  line-height: 1.8;
}

/* "こんなふうに" Subsection */
/* Figma: bg #f7f3e9, 1441x1021px, padding-top 150px */
.top-feeling {
  background: #f7f3e9;
  padding: clamp(80px, 10.42vw, 150px) 0 clamp(60px, 8.33vw, 120px);
  position: relative;
  overflow: hidden;
}

/* Figma: decorative vector behind title removed - clean design */

.top-feeling__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.44vw, 64px);
  position: relative;
  z-index: 1;
}

/* Title wrapper for decorative leaf */
.top-feeling__title-wrap {
  position: relative;
  margin-bottom: clamp(32px, 4.44vw, 64px);
}

/* Figma: leaf vector 440x121, behind title, centered horizontally, overlapping 2nd line */
.top-feeling__deco {
  position: absolute;
  top: clamp(20px, 3.06vw, 44px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 30.56vw, 440px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Figma: title centered in section */
.top-feeling__title {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Figma: checklist centered */
.top-feeling__list {
  list-style: none;
  margin: 0 auto clamp(40px, 5.56vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: fit-content;
}

/* Figma: Yu Gothic 24px w400, each item 60px height */
.top-feeling__item {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.11vw, 16px);
  font-family: var(--font-gothic);
  font-size: clamp(16px, 1.67vw, 24px);
  font-weight: 400;
  color: var(--color-text-dark);
  height: clamp(40px, 4.17vw, 60px);
}

/* Figma: leaf-shaped vector icon, 35.8x24.6px, #4A9255 */
.top-feeling__check {
  flex-shrink: 0;
  width: clamp(28px, 2.49vw, 36px);
  height: clamp(20px, 1.71vw, 25px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-feeling__check svg {
  width: 100%;
  height: 100%;
}

/* Figma: 28px Shippori Mincho B1 w600, lh 54px */
.top-feeling__bottom-text {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 1.94vw, 28px);
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.93;
  letter-spacing: 0;
  text-align: center;
}

/* =====================================================
   3. Section: "体と心が整う、３つの流れ"
   ===================================================== */
/* Scroll wrapper for image expand animation */
.top-flow-scroll {
  position: relative;
}

/* Figma: bg #fffbf1, 1441x1718px */
.top-flow {
  background: #fffbf1;
  padding: clamp(60px, 6.94vw, 100px) 0;
}

.top-flow__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.44vw, 64px);
}

/* Figma: title at top=100, steps start at top=274, gap=174px */
.top-flow__title {
  text-align: center;
  margin-bottom: clamp(48px, 12.08vw, 174px);
}

.top-flow__steps {
  display: block;
}

.top-flow-step-wrapper {
  height: 200vh;
  position: relative;
}

.top-flow-step--sticky {
  position: sticky;
  top: 64px;
  background: #fffbf1;
  z-index: 1;
}

.top-flow-step {
}

/* Figma: number+title | vertical line | description in a row */
.top-flow-step__top {
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(16px, 2.78vw, 40px);
}

/* Figma: 250x178px column */
.top-flow-step__number-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: clamp(150px, 17.36vw, 250px);
}

/* Figma: 32px w300 */
.top-flow-step__number {
  font-family: var(--font-mincho);
  font-size: clamp(20px, 2.22vw, 32px);
  font-weight: 300;
  color: var(--color-text-dark);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: -10px;
}

/* Figma: 64px w300 */
.top-flow-step__label {
  font-family: var(--font-mincho);
  font-size: clamp(32px, 4.44vw, 64px);
  font-weight: 300;
  color: var(--color-text-dark);
  line-height: 1.47;
  letter-spacing: 0;
}

/* Figma: vertical line at x=300, top=39, height 100px */
.top-flow-step__divider {
  width: 1px;
  height: clamp(60px, 6.94vw, 100px);
  background: var(--color-text-dark);
  margin: clamp(24px, 2.71vw, 39px) clamp(30px, 3.47vw, 50px) 0;
  flex-shrink: 0;
}

/* Figma: Yu Gothic 20px w400, lh 36px, at top=35 */
.top-flow-step__description {
  font-family: var(--font-gothic);
  font-size: clamp(14px, 1.39vw, 20px);
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 1.8;
  margin-top: 0;
  padding-bottom: 10px;
  max-width: 310px;
}

/* Flow動画: 帯→下方向+横に拡大 */
.top-flow-step__image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.top-flow-step-wrapper + .top-flow-step-wrapper {
  margin-top: 120px;
}

/* =====================================================
   4. Section: "流れにゆだねる、安心設計。"
   ===================================================== */
/* Figma: bg #fffbf1 */
.top-design {
  background: #fffbf1;
  padding: clamp(60px, 6.94vw, 100px) 0 clamp(100px, 13.89vw, 200px);
  position: relative;
  overflow: hidden;
}

/* Figma: 筆の波装飾 1440x157, top=123px (6.2%), full width */
.top-design__wave {
  position: absolute;
  top: clamp(70px, 9vw, 150px);
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.top-design__wave--sp {
  display: none;
}

.top-design__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.44vw, 64px);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Figma: タイトル下 50px */
.top-design__title {
  margin-bottom: clamp(30px, 3.47vw, 50px);
}

/* Figma: Shippori Mincho B1 24px w600, lh 54px */
.top-design__description {
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.67vw, 24px);
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 2.25;
  margin-bottom: 0;
  letter-spacing: 0;
}

/* Figma: 説明文間 40px */
.top-design__description + .top-design__description {
  margin-top: clamp(24px, 2.78vw, 40px);
}

/* Figma: アクセントテキスト - #d67c3d オレンジ、装飾なし */
.top-design__accent {
  color: #d67c3d;
}

.top-design__description--accent {
  margin-top: clamp(20px, 2.78vw, 40px);
  margin-bottom: clamp(48px, 6.67vw, 96px);
  font-weight: 600;
}

/* Figma: 区切り線 338px, 1px, #352304 */
.top-design__separator {
  width: clamp(200px, 23.47vw, 338px);
  height: 1px;
  background: var(--color-text-dark);
  margin: clamp(50px, 5.56vw, 80px) auto clamp(80px, 11.11vw, 160px);
}

/* Figma: ととのえる旅, content frame 840x999 */
/* bg: #fffbf1 + texture image (opacity 0.5, grayscale) */
.top-design__diagram {
  position: relative;
  width: min(90%, 680px);
  aspect-ratio: 840 / 999;
  margin: 0 auto 0;
  background-color: transparent;
}

/* Figma: テクスチャ背景 - 図より大きく表示 */
.top-design__diagram::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -15%;
  width: 130%;
  height: 120%;
  z-index: 0;
  background: #fffbf1 url('../images/top/diagram-bg-texture.webp') center / cover no-repeat;
  opacity: 0.5;
  filter: saturate(0) brightness(1.13);
  border-radius: 16px;
}

/* 接続線 SVG - 個別配置 */
.top-design__line {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* 840x999基準のライン位置 */
.top-design__line--tr { left: 66.2%; top: 14.7%; width: 9.1%; height: 4.6%; }
.top-design__line--tl { left: 24.7%; top: 14.7%; width: 9.1%; height: 4.6%; }
.top-design__line--br { left: 66.2%; top: 71.2%; width: 9.1%; height: 4.6%; }
.top-design__line--bl { left: 24.8%; top: 71.2%; width: 9.1%; height: 4.6%; }
.top-design__line--r  { left: 89.0%; top: 40.1%; width: 2.2%; height: 8.6%; }
.top-design__line--l  { left: 10.6%; top: 40.1%; width: 2.2%; height: 8.6%; }

/* Figma: outer circle 415x415, L=25.3% T=23.4% W=49.4% H=41.6% */
.top-design__center {
  position: absolute;
  left: 25.3%;
  top: 23.4%;
  width: 49.4%;
  height: 41.6%;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Figma: inner circle, stroke #4a9255 sw=1.2 */
.top-design__center-inner {
  width: 94%;
  height: 94%;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Figma: 29px w500 */
.top-design__center-sub {
  font-family: var(--font-mincho);
  font-size: clamp(12px, 1.8vw, 26px);
  font-weight: 500;
  color: var(--color-text-dark);
  white-space: nowrap;
}

/* Figma: 54px w300 - ダイアグラムの38.5%円内に収まるようサイズ調整 */
.top-design__center-title {
  font-family: var(--font-mincho);
  font-size: clamp(13px, 2.3vw, 33px);
  font-weight: 300;
  color: var(--color-text-dark);
  line-height: 1;
  white-space: nowrap;
}

/* 6つのアイテム - 各221x221 → W=26.3% H=22.1% (840x999基準) */
.top-design__item {
  position: absolute;
  width: 26.3%;
  z-index: 1;
}

.top-design__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Figma exact % positions (840x999 frame) */
.top-design__item--1 { left: 36.9%; top: 0%; }
.top-design__item--2 { left: 73.7%; top: 17.1%; }
.top-design__item--3 { left: 73.7%; top: 49.4%; }
.top-design__item--4 { left: 36.9%; top: 66.4%; }
.top-design__item--5 { left: 0%; top: 49.4%; }
.top-design__item--6 { left: 0%; top: 17.1%; }

/* Figma: bottom text at L=13.6% T=91.5%, centered, W=72.8% */
.top-design__bottom-text {
  position: absolute;
  left: 13.6%;
  top: 91.5%;
  width: 72.8%;
  text-align: center;
}

/* Figma: 36px w700, #604d44 */
.top-design__bottom-title {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 700;
  color: #604d44;
  margin-bottom: clamp(8px, 0.97vw, 14px);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Figma: 24px w500, #604d44 */
.top-design__bottom-sub {
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.67vw, 24px);
  font-weight: 500;
  color: #604d44;
  letter-spacing: 0;
  line-height: 1.5;
}

/* =====================================================
   5. Section: "25年通い続けている方の声"
   ===================================================== */
/* Figma: bg #fffbf1 + texture */
.top-voice {
  background: #fffbf1;
  padding: clamp(60px, 6.94vw, 100px) 0;
}

.top-voice__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.44vw, 64px);
  text-align: center;
}

.top-voice__heading {
  position: relative;
  margin-bottom: clamp(40px, 5.56vw, 80px);
}

/* Figma: 葉装飾 440x121, left=370 (中央やや右), top=0 */
.top-voice__deco {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 30.56vw, 440px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.top-voice__title {
  position: relative;
  z-index: 1;
  color: #604d44;
}

/* Figma: テキスト左 + 肖像画右 */
/* Figma: テキスト(680) + 肖像画(150) = 837px, 中央配置 */
.top-voice-card {
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 0.49vw, 7px);
  text-align: left;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: clamp(24px, 3.33vw, 48px);
}

/* Figma: 150x150 円形肖像画、右側 */
.top-voice-card__portrait {
  flex-shrink: 0;
  width: clamp(100px, 10.42vw, 150px);
  height: clamp(100px, 10.42vw, 150px);
  border-radius: 50%;
  overflow: hidden;
  background: #e8e0d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-voice-card__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: テキスト部分 680x218, 白背景, padding 30px */
.top-voice-card__body {
  background: #fff;
  padding: clamp(20px, 2.08vw, 30px);
  width: clamp(480px, 47.22vw, 680px);
  flex-shrink: 0;
}

/* Figma: 「50代 / 女性」Shippori Mincho 20px w600 */
.top-voice-card__meta {
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.39vw, 20px);
  font-weight: 600;
  color: #604d44;
  margin-bottom: clamp(10px, 1.39vw, 20px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.11vw, 16px);
}

/* Figma: 斜め線 18x18, stroke #604d44, sw=1 */
.top-voice-card__meta-sep {
  width: 18px;
  height: 18px;
  position: relative;
}

.top-voice-card__meta-sep::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid #604d44;
  transform: rotate(30deg);
}

/* Figma: Yu Gothic 20px w400 lh36 #604d44 */
.top-voice-card__quote {
  font-family: var(--font-gothic);
  font-size: clamp(13px, 1.39vw, 20px);
  font-weight: 400;
  color: #352304;
  line-height: 1.8;
}

/* Figma: 310x73, 四角, bg #352304, 中央配置 */
.top-voice__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-gothic);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #352304;
  width: clamp(240px, 21.53vw, 310px);
  height: clamp(56px, 5.07vw, 73px);
  margin-top: clamp(24px, 3.33vw, 48px);
  transition: opacity 0.2s;
}

.top-voice__link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.top-voice__link:hover {
  opacity: 0.7;
}

/* =====================================================
   6. Section: "お知らせ"
   ===================================================== */
.top-news {
  background: #f7f3e9;
  padding: 80px 0;
}

.top-news__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 9.03vw, 130px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-news__title {
  margin-bottom: 80px;
}

.top-news__list {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 80px;
}

.top-news-item {
  display: flex;
  align-items: center;
  gap: 100px;
  padding: 25px 0;
  border-bottom: 0.5px solid #604d44;
  color: #352304;
  text-decoration: none;
  transition: opacity 0.2s;
}

.top-news-item:first-child {
  padding-top: 0;
}

.top-news-item:hover {
  opacity: 0.7;
}

.top-news-item__date {
  font-family: var(--font-gothic);
  font-size: 20px;
  font-weight: 400;
  color: #352304;
  white-space: nowrap;
  flex-shrink: 0;
  width: 120px;
  line-height: 36px;
}

.top-news-item__title {
  font-family: var(--font-gothic);
  font-size: 20px;
  font-weight: 500;
  color: #352304;
  line-height: 36px;
}

.top-news__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 310px;
  height: 73px;
  background: #352304;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-gothic);
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  transition: opacity 0.2s;
}

.top-news__more-btn:hover {
  opacity: 0.8;
}

/* =====================================================
   7. Section: "あなたに合う、３つの整え方"
   ===================================================== */
.top-facilities {
  position: relative;
  background-color: #fffbf1;
  padding: 150px 0;
}

.top-facilities::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/top/diagram-bg-texture.webp") repeat center / 540px;
  mix-blend-mode: multiply;
  opacity: 0.26;
  filter: saturate(0) contrast(0.86) brightness(1.37);
  pointer-events: none;
}

.top-facilities__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-facilities__title {
  margin-bottom: 60px;
}

.top-facilities__cards {
  display: flex;
  justify-content: center;
  gap: 50px;
}

.top-facility-card {
  display: flex;
  flex-direction: column;
  width: 350px;
  gap: 15px;
}

.top-facility-card__image-wrap {
  width: 350px;
  height: 350px;
  overflow: hidden;
}

.top-facility-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.top-facility-card:hover .top-facility-card__image {
  transform: scale(1.05);
}

.top-facility-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #352304;
  padding-bottom: 10px;
}

.top-facility-card__name {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 600;
  color: #352304;
  line-height: 54px;
  text-align: center;
}

.top-facility-card__sub {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  color: #352304;
  line-height: 44px;
  letter-spacing: 0.4px;
  text-align: center;
}

.top-facility-card__link {
  font-family: var(--font-gothic);
  font-size: 20px;
  font-weight: 400;
  color: #352304;
  text-decoration: none;
  text-align: right;
  display: block;
  line-height: 36px;
  transition: opacity 0.2s;
}

.top-facility-card__link:hover {
  opacity: 0.7;
}

/* =====================================================
   8. CTA Banner Section
   ===================================================== */
.top-cta {
  position: relative;
  width: 100%;
  height: 454px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-cta__bg {
  position: absolute;
  inset: 0;
}

.top-cta__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.top-cta__bg-image--sp {
  display: none;
}

.top-cta__overlay {
  position: absolute;
  inset: 0;
  background: #604d44;
  opacity: 0.2;
  mix-blend-mode: multiply;
}

.top-cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 62px 468px;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.25));
}

.top-cta__catchphrase {
  font-family: var(--font-mincho);
  font-size: 42px;
  font-weight: 600;
  color: #fff;
  line-height: 62px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.top-cta__sub {
  font-family: var(--font-gothic);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 36px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.top-cta__info {
  font-family: var(--font-gothic);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 36px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.top-cta__buttons {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.top-cta__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 30px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 600;
  line-height: 54px;
  white-space: nowrap;
  transition: opacity 0.2s;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.top-cta__btn:hover {
  opacity: 0.85;
}

.top-cta__btn-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-cta__btn-icon {
  flex-shrink: 0;
}

.top-cta__btn-arrow {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
}

/* =====================================================
   Top-page footer additions
   ===================================================== */
/* Updated footer nav for top page */
.footer__nav-cols {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(24px, 3.33vw, 48px);
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__nav-col-title {
  font-family: var(--font-gothic);
  font-size: clamp(11px, 0.97vw, 14px);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

/* Banner links at footer bottom */
.footer__banners {
  display: flex;
  gap: clamp(12px, 1.67vw, 24px);
  justify-content: center;
  padding: clamp(16px, 2.22vw, 32px) 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: clamp(24px, 3.33vw, 48px);
}

.footer__banner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.11vw, 16px) clamp(20px, 2.78vw, 40px);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family: var(--font-gothic);
  font-size: clamp(12px, 1.11vw, 16px);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}

.footer__banner-link:hover {
  background: rgba(255,255,255,0.22);
}

/* =====================================================
   Responsive: Tablet
   ===================================================== */
@media (max-width: 1024px) {
  .top-flow-step__number-col {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }

  .footer__nav-cols {
    grid-template-columns: repeat(2, auto);
  }

  .top-facilities__inner {
    padding: 0 40px;
  }

  .top-facilities__cards {
    gap: 30px;
  }

  .top-facility-card {
    width: auto;
    flex: 1;
  }

  .top-facility-card__image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .top-cta__inner {
    padding: 62px 40px;
  }
}

/* =====================================================
   Responsive: Mobile (Figma 390px)
   ===================================================== */
@media (max-width: 768px) {
  /* --- Hero --- */
  .top-hero-wrapper {
    height: 200vh;
    height: 200dvh;
  }

  .top-hero {
    height: 100vh;
    height: 100dvh;
  }

  .top-hero__text-area {
    left: 27px;
    right: auto;
    bottom: 34px;
    width: 336px;
  }

  .top-hero__main-title {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 24px;
    white-space: nowrap;
  }

  .top-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(30, 20, 5, 0.5) 0%,
      rgba(30, 20, 5, 0.1) 40%,
      transparent 70%
    );
  }

  .top-hero__sub-text {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.71;
    max-width: 252px;
    margin-left: 9px;
  }

  .top-hero__scroll-hint {
    bottom: 16px;
  }

  .top-hero__scroll-hint span {
    height: 40px;
  }

  /* --- Section Titles --- */
  .top-section-title {
    font-size: 36px;
    line-height: 1.53;
  }

  /* --- Intro --- */
  .top-intro {
    padding: 50px 0 0;
  }

  .top-intro__inner {
    padding: 0 40px;
  }

  .top-intro__title {
    text-align: center;
    margin-bottom: 30px;
  }

  .top-intro__subtitle {
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    margin-bottom: 50px;
  }

  .top-intro__cards {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 310px;
  }

  .top-intro-card {
    height: 91px;
    border-radius: 8px;
  }

  .top-intro-card__title {
    font-size: 20px;
  }

  .top-intro-card__sub {
    font-size: 13px;
  }

  /* --- Feeling --- */
  .top-feeling {
    padding: 50px 40px;
  }

  .top-feeling__inner {
    padding: 0;
  }

  .top-feeling__title {
    text-align: center;
    font-size: 32px;
  }

  .top-feeling__deco {
    width: 225px;
    left: 0;
    transform: none;
    top: 30px;
  }

  .top-feeling__list {
    width: 100%;
  }

  .top-feeling__item {
    font-size: 16px;
    height: auto;
    padding: 2px 0;
  }

  .top-feeling__bottom-text {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 36px;
  }

  /* --- Flow --- */
  .top-flow-step-wrapper {
    height: 200vh;
  }
  .top-flow-step--sticky {
    top: 80px;
  }
  .top-flow {
    padding: 50px 0;
  }

  .top-flow__inner {
    padding: 0 48px;
  }

  .top-flow__title {
    text-align: center;
    margin-bottom: 30px;
  }

  .top-flow__steps {
    gap: 30px;
  }

  .top-flow-step-wrapper + .top-flow-step-wrapper {
    margin-top: 80px;
  }

  .top-flow-step__top {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .top-flow-step__number-col {
    min-width: auto;
    flex-direction: column;
  }

  .top-flow-step__number {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 0;
  }

  .top-flow-step__label {
    font-size: 40px;
    line-height: 1;
  }

  .top-flow-step__divider {
    width: 100px;
    height: 1px;
    margin: 10px 0;
  }

  .top-flow-step__description {
    font-size: 18px;
    font-weight: 400;
    margin-top: 0;
    max-width: 100%;
    line-height: 1.78;
  }

  .top-flow-step__image {
    width: 100%;
    height: 120px;
    object-fit: cover;
  }

  /* --- Design --- */
  .top-design {
    padding: 50px 0;
  }

  .top-design__inner {
    padding: 0 40px;
    text-align: center;
  }

  .top-design__title {
    text-align: center;
  }

  .top-design__wave--pc {
    display: none;
  }

  .top-design__wave--sp {
    display: block;
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    height: 74px;
    pointer-events: none;
    z-index: 0;
  }

  .top-design__description {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 2;
  }

  .top-design__description--accent {
    margin-bottom: 40px;
  }

  .top-design__separator {
    width: 200px;
    margin: 40px auto;
  }

  .top-design__diagram {
    width: 138.5vw;
    margin-left: calc((100% - 138.5vw) / 2);
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .top-design__diagram::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Figma mobile: items 110x110 in 540x540 = 20.4% */
  .top-design__item {
    width: 20.4%;
  }

  /* Figma mobile positions (540x540 basis) */
  .top-design__item--1 { left: 39.9%; top: 3.7%; }
  .top-design__item--2 { left: 68.5%; top: 19.5%; }
  .top-design__item--3 { left: 68.5%; top: 49.4%; }
  .top-design__item--4 { left: 39.9%; top: 65.1%; }
  .top-design__item--5 { left: 11.1%; top: 49.4%; }
  .top-design__item--6 { left: 11.1%; top: 19.5%; }

  /* Figma mobile: center circle 208x208 in 540x540 */
  .top-design__center {
    left: 29.6%;
    top: 25.4%;
    width: 38.5%;
    height: 38.5%;
  }

  .top-design__center-sub {
    font-size: 2.7vw;
  }

  .top-design__center-title {
    font-size: 4.6vw;
  }

  /* Figma mobile: lines recalculated for 540x540 */
  .top-design__line--tr { left: 62.6%; top: 17.3%; width: 7.1%; height: 4.3%; }
  .top-design__line--tl { left: 30.4%; top: 17.3%; width: 7.1%; height: 4.3%; }
  .top-design__line--br { left: 62.6%; top: 69.6%; width: 7.1%; height: 4.3%; }
  .top-design__line--bl { left: 30.4%; top: 69.6%; width: 7.1%; height: 4.3%; }
  .top-design__line--r  { left: 79.5%; top: 40.8%; width: 1.8%; height: 8.0%; }
  .top-design__line--l  { left: 18.7%; top: 40.8%; width: 1.8%; height: 8.0%; }

  /* Figma mobile: bottom text 306x42.5 at 88.4% from top */
  .top-design__bottom-text {
    position: absolute;
    left: 21.7%;
    top: 88.4%;
    width: 56.7%;
    margin-top: 0;
  }

  .top-design__bottom-title {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
  }

  .top-design__bottom-sub {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }

  /* --- Voice --- */
  .top-voice {
    padding: 50px 40px;
  }

  .top-voice__inner {
    padding: 0;
    text-align: center;
  }

  .top-voice__heading {
    margin-bottom: 40px;
  }

  .top-voice__title {
    font-size: 36px;
    font-weight: 500;
  }

  .top-voice__deco {
    width: 225px;
    left: 0;
    transform: none;
    top: -20px;
  }

  .top-voice-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 24px;
    position: relative;
  }

  .top-voice-card__portrait {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 16px;
    bottom: -6px;
    z-index: 1;
  }

  .top-voice-card__body {
    width: 100%;
    min-width: 0;
    padding: 20px;
  }

  .top-voice-card__meta {
    font-size: 16px;
  }

  .top-voice-card__quote {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: -0.28px;
    color: #604d44;
  }

  .top-voice__link {
    width: 100%;
    height: 73px;
    margin: 0 auto;
    font-size: 18px;
  }

  /* --- News --- */
  .top-news {
    padding: 80px 40px;
  }

  .top-news__inner {
    padding: 0;
  }

  .top-news__title {
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
  }

  .top-news__list {
    margin-bottom: 30px;
  }

  .top-news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 0;
  }

  .top-news-item__date {
    font-size: 18px;
    font-weight: 400;
    width: auto;
  }

  .top-news-item__title {
    font-size: 18px;
    font-weight: 500;
  }

  .top-news__more-btn {
    width: 310px;
    height: 73px;
  }

  /* --- Facilities --- */
  .top-facilities {
    padding: 50px 40px;
  }

  .top-facilities__inner {
    padding: 0;
  }

  .top-facilities__title {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
  }

  .top-facilities__cards {
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 310px;
  }

  .top-facility-card {
    width: 310px;
    gap: 10px;
  }

  .top-facility-card__image-wrap {
    width: 310px;
    height: 310px;
    border-radius: 0;
    aspect-ratio: auto;
  }

  .top-facility-card__name {
    font-size: 22px;
    line-height: 1.6;
  }

  .top-facility-card__sub {
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
  }

  .top-facility-card__link {
    font-size: 16px;
  }

  /* --- CTA Banner --- */
  .top-cta__bg-image--pc {
    display: none;
  }

  .top-cta__bg-image--sp {
    display: block;
  }

  .top-cta {
    height: auto;
    min-height: 414px;
  }

  .top-cta__inner {
    padding: 40px 38px;
    gap: 25px;
  }

  .top-cta__catchphrase {
    font-size: 25px;
    line-height: 1.5;
  }

  .top-cta__sub {
    font-size: 16px;
  }

  .top-cta__info {
    font-size: 16px;
  }

  .top-cta__buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
  }

  .top-cta__btn {
    width: 277px;
    height: 56px;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
    gap: 0;
    justify-content: space-between;
    box-shadow: none;
    text-shadow: none;
  }

  .top-cta__btn-left {
    gap: 5px;
  }

  .top-cta__btn-icon {
    width: 23px;
    height: 20px;
  }

  .top-cta__btn-arrow {
    width: 18px;
    height: 18px;
  }

  /* --- SP/PC-only line breaks --- */
  .sp-only {
    display: inline;
  }
  .pc-only {
    display: none !important;
  }

}

/* =====================================================
   Responsive: Small Mobile
   ===================================================== */
@media (max-width: 480px) {
  .top-facilities__cards {
    max-width: 100%;
  }

  .top-facility-card {
    width: 100%;
  }

  .top-facility-card__image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .footer__nav-cols {
    grid-template-columns: 1fr;
  }

  /* SP footer: top.cssのPC用.footer__nav-colがstyle.cssのSP用display:contentsを上書きしないようにする */
  .footer__nav-col {
    display: contents;
  }

  .footer__nav-facility-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
  }
}

/* =====================================================
   prefers-reduced-motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .top-hero__scroll-hint {
    display: none;
  }
}