:root { --forest: rgba(9,45,20,0.9); }
.page-hero-bg { background-image: url('../images/hero-tateuru.jpg'); }

.intro-section { padding: 0 clamp(20px,5vw,80px); max-width: 1380px; margin: 0 auto; }
.intro-title-block { display: flex; flex-direction: column; align-items: center; padding: clamp(40px,5vw,70px) 0 clamp(30px,4vw,50px); }
.intro-divider { width: 1px; height: 80px; background: var(--navy); margin-bottom: 12px; }
.intro-ghost { font-family: 'Inter',sans-serif; font-weight: 800; font-size: clamp(36px,5vw,64px); color: var(--navy); opacity: .1; line-height: 1.4; margin-bottom: -8px; }
.intro-name { font-family: 'Inter',sans-serif; font-weight: 800; font-size: clamp(20px,3vw,28px); color: var(--navy); }
.intro-image { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: clamp(40px,5vw,67px); }
.intro-image img { width: 100%; height: clamp(280px,35vw,500px); object-fit: cover; display: block; }
.intro-text { max-width: 883px; margin: 0 auto clamp(60px,8vw,120px); font-family: 'Noto Sans JP',sans-serif; font-size: 15px; font-weight: 500; color: #333; line-height: 2.2; text-align: center; }

.dark-section { position: relative; background: var(--forest); border-radius: 0 100px 0 100px; overflow: hidden; padding: clamp(60px,8vw,143px) clamp(24px,6vw,120px); margin: 0 0 clamp(60px,8vw,100px); }
.dark-section-bg { position: absolute; inset: 0; z-index: 0; mix-blend-mode: multiply; }
.dark-section-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.dark-section-inner { position: relative; z-index: 1; max-width: 750px; margin: 0 auto; }
.dark-side-label { position: absolute; left: clamp(16px,2.5vw,35px); top: clamp(40px,8vw,87px); font-family: 'Zen Kaku Gothic New',sans-serif; font-weight: 700; font-size: 15px; color: #fff; letter-spacing: 3px; white-space: nowrap; z-index: 2; writing-mode: vertical-rl; }
.dark-heading { font-family: 'Zen Kaku Gothic New',sans-serif; font-weight: 900; font-size: clamp(22px,3.5vw,36px); color: #fff; line-height: 1.4; letter-spacing: .1em; margin-bottom: clamp(20px,3vw,25px); }
.dark-body { font-family: 'Inter',sans-serif; font-weight: 700; font-size: clamp(13px,1.6vw,15.8px); color: #fff; line-height: 1.62; letter-spacing: .1em; margin-bottom: clamp(16px,2.5vw,25px); }

.flow-section { padding: 0 clamp(20px,5vw,80px) clamp(60px,8vw,100px); }
.flow-title { font-family: 'Zen Kaku Gothic New',sans-serif; font-weight: 900; font-size: clamp(20px,2.8vw,28px); color: #000; letter-spacing: .05em; margin-bottom: clamp(24px,3vw,40px); }
.flow-list { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 0 auto; }
.flow-card { background: var(--forest); border-radius: 32px; display: grid; grid-template-columns: 1fr 230px; min-height: 168px; overflow: hidden; padding: 24px; gap: 16px; align-items: center; }
.flow-card-body { display: flex; flex-direction: column; gap: 12px; }
.flow-num-row { display: flex; align-items: center; border-bottom: 2px solid #6a6a6a; padding-bottom: 4px; width: fit-content; }
.flow-num { font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.flow-card-title { font-family: 'Zen Kaku Gothic New',sans-serif; font-weight: 900; font-size: 20px; color: #fff; line-height: 1.4; }
.flow-card-desc { font-family: 'Zen Kaku Gothic New',sans-serif; font-weight: 400; font-size: 14px; color: #fff; line-height: 1.4; }
.flow-card-img { border-radius: 16px; overflow: hidden; height: 120px; }
.flow-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .flow-card { grid-template-columns: 1fr; }
  .flow-card-img { height: 180px; }
  .dark-side-label { display: none; }
}
@media (max-width: 640px) { .dark-section { border-radius: 0 60px 0 60px; } }