/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
}

/* ===== Background Video ===== */
.bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}
/* Hide browser default play button overlay */
.bg-video::-webkit-media-controls {
  display: none !important;
}
.bg-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.bg-video::-webkit-media-controls-panel {
  display: none !important;
}

img:not([class]) {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* ===== Design Tokens ===== */
:root {
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #999999;
  --text-white: #FFFFFF;
  --corporate-navy: #1E2A44;
  --corporate-light-navy: #2E3F63;
  --tear-vivid-blue: #75B1FF;
  --tear-light-blue: #CFE7FF;
  --brand-vivid-pink: #FF7576;
  --brand-light-pink: #FBE9ED;
  --neutral-soft-blue: #F6FAFF;
  --border-color: #F5F5F5;
  --gradient-tear-vivid: linear-gradient(90deg, #75B1FF, #FF7576);
  --gradient-soft-pink: linear-gradient(90deg, rgba(234,244,255,0.44), rgba(251,233,237,0.44));
  --gradient-soft-pink-header: linear-gradient(180deg, rgba(251,233,237,0.32), rgba(234,244,255,0.32));
  --shadow-cta: 0px 0px 12px 0px #F9D6DE;
  --shadow-card: 0px 4px 12px 0px rgba(0,0,0,0.1);
}

/* ===== Typography ===== */
.font-playfair {
  font-family: 'Playfair Display', serif;
}

.font-ten-mincho {
  font-family: 'Shippori Mincho', 'Ten Mincho', serif;
}

.font-roboto-condensed {
  font-family: 'Roboto Condensed', sans-serif;
}

.font-zen-kaku {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.gradient-text {
  background: var(--gradient-tear-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Header Dropdown ===== */
.header-dropdown-wrap {
  position: relative;
}
.header-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(135deg, rgba(251,233,237,0.5), rgba(234,244,255,0.5));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.5) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  z-index: 100;
}
.header-dropdown.open {
  max-height: 200px;
  opacity: 1;
}
.header-dropdown-item {
  padding: 12px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.header-dropdown-item:hover {
  background: rgba(117,177,255,0.12);
}
.header-nav-item.dropdown-open .dropdown-icon {
  transform: rotate(180deg);
}

/* ===== Common Components ===== */
.section-dot {
  width: 48px;
  height: 66px;
  flex-shrink: 0;
}

.cta-button {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 20px 8px 20px 20px;
  border-radius: 8px;
  box-shadow: var(--shadow-cta);
  background: rgba(255,255,255,0.08);
  border: 0.5px solid #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 24px 0px rgba(249, 214, 222, 0.6);
}

.cta-button span {
  font-size: 16px;
  line-height: 1.8;
  white-space: nowrap;
}

.cta-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transform: rotate(180deg) scaleY(-1);
}

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px max(20px, calc((100% - 1308px) / 2));
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 30px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-logo {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 1.6px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s;
}

.header-logo:hover {
  opacity: 0.7;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.header-nav-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0 4px 16px;
}

.header-nav-top span,
.header-nav-top-link {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-primary);
  letter-spacing: 0.56px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s;
}

.header-nav-top-link:hover {
  opacity: 0.7;
}

.header-nav-top .divider {
  width: 1px;
  align-self: stretch;
  background: var(--text-primary);
}

.header-nav-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
}

.header-nav-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.header-nav-item:hover {
  opacity: 0.7;
}

.header-nav-item span {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: 0.64px;
  white-space: nowrap;
  text-align: center;
}

.header-nav-item .dropdown-icon {
  width: 22px;
  height: 22px;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 20px 12px 20px 20px;
  border-radius: 8px;
  box-shadow: var(--shadow-cta);
  background: rgba(255,255,255,0.08);
  border: 0.5px solid #fff;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.header-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 24px 0px rgba(249, 214, 222, 0.6);
}

.header-cta span {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ===== Main Content Wrapper ===== */
.page-wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* ===== FV (First View) ===== */
.fv {
  position: relative;
  width: 100%;
  height: clamp(500px, 53vw, 768px);
  border-radius: 0 0 clamp(80px, 14vw, 200px) clamp(80px, 14vw, 200px);
  overflow: hidden;
}

.fv-bg {
  position: absolute;
  inset: 0;
  border-radius: 0 0 clamp(80px, 14vw, 200px) clamp(80px, 14vw, 200px);
  overflow: hidden;
}

.fv-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fvSlide 20s infinite both;
}

.fv-slide:nth-child(1) { animation-delay: 0s; }
.fv-slide:nth-child(2) { animation-delay: 5s; }
.fv-slide:nth-child(3) { animation-delay: 10s; }
.fv-slide:nth-child(4) { animation-delay: 15s; }

@keyframes fvSlide {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.15); }
}

.fv-tear-icon {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 295px;
  mix-blend-mode: overlay;
  opacity: 0;
}

.fv-content {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  color: var(--text-white);
  white-space: nowrap;
  text-shadow: 0px 0px 32px #1e2a44, 0px 0px 32px #1e2a44;
}

.fv-title-wrapper {
  position: relative;
}

.fv-title {
  font-family: 'Shippori Mincho', 'Ten Mincho', serif;
  font-size: 66px;
  line-height: 1.35;
  font-weight: 400;
}

.fv-ruby-inline {
  display: ruby;
  ruby-position: over;
}

.fv-ruby-inline rt {
  display: ruby-text;
  font-family: 'Shippori Mincho', 'Ten Mincho', serif;
  font-size: 20px;
  letter-spacing: 0;
  text-indent: 0;
  text-align: center;
}

.fv-subtitle {
  font-family: 'Shippori Mincho', 'Ten Mincho', serif;
  font-size: 20px;
  line-height: 1.8;
}

/* ===== Research Section (Problem) ===== */
.section-research-problem {
  position: relative;
  width: 100%;
  padding: 48px max(20px, calc((100% - 1120px) / 2)) 88px;
  background: rgba(246,250,255,0.44);
  border-radius: 0 0 clamp(60px, 8.3vw, 120px) clamp(60px, 8.3vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.section-heading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.section-en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
}

.section-title-with-dot {
  display: flex;
  align-items: flex-start;
}

.section-title-with-dot h2 {
  font-weight: 700;
  font-size: 42px;
  line-height: 1.4;
  color: var(--text-primary);
  white-space: nowrap;
}

.section-subtitle {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Problem blocks */
.problem-block {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  margin-top: 0;
}

.problem-block.reverse {
  flex-direction: row;
}

.problem-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-bottom: 40px;
}

.problem-en {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.96px;
  background: linear-gradient(90deg, rgba(117,177,255,0.08), rgba(255,117,118,0.08));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.problem-heading {
  display: flex;
  align-items: center;
}

.problem-heading h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: #0a0a0a;
}

.problem-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 739px;
  width: 100%;
  margin-top: -40px;
}

.problem-text {
  font-size: 16px;
  line-height: 1.8;
  color: #364153;
}

.highlight-box {
  background: linear-gradient(135deg, rgba(117,177,255,0.12) 0%, rgba(255,117,118,0.10) 100%);
  border: 1px solid rgba(117,177,255,0.25);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--corporate-navy);
}

.highlight-box strong {
  font-weight: 700;
}

/* Problem image container */
.problem-image {
  position: relative;
  width: clamp(250px, 25vw, 357px);
  flex-shrink: 0;
}

.problem-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  animation: floatPhoto 6s ease-in-out infinite;
}

.problem-image .circle-medium {
  position: absolute;
  z-index: 1;
  width: 81px;
  height: 81px;
  animation: floatBubble2 5s ease-in-out infinite;
}

.problem-image .circle-small {
  position: absolute;
  z-index: 1;
  width: 21px;
  height: 21px;
  animation: floatBubble3 4s ease-in-out infinite;
}


@keyframes floatPhoto {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

@keyframes floatBubble2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}

@keyframes floatBubble3 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* Problem cards */
.problem-cards {
  display: flex;
  gap: 12px;
  width: 100%;
}

.problem-card {
  flex: 1;
  background: var(--neutral-soft-blue);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.problem-card h4 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: var(--corporate-navy);
}

.problem-card p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--corporate-navy);
}

.problem-card .problem-line {
  display: block;
  white-space: nowrap;
}

/* ===== Gap Section ===== */
.section-gap {
  position: relative;
  width: 100%;
  padding: 88px max(20px, calc((100% - 1120px) / 2));
  background: linear-gradient(270deg, rgba(251,233,237,0.44), rgba(234,244,255,0.44));
  border-radius: 0 0 clamp(60px, 8.3vw, 120px) clamp(60px, 8.3vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.gap-card {
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  padding: 32px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}

.gap-en {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.96px;
  background: linear-gradient(90deg, rgba(117,177,255,0.08), rgba(255,117,118,0.08));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gap-section-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.gap-white-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gap-heading {
  display: flex;
  align-items: center;
}

.gap-heading h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Company vs Employee comparison */
.gap-compare {
  display: flex;
  gap: 12px;
  width: 100%;
  position: relative;
}

.gap-compare-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
}

.gap-compare-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
}

.gap-compare-label {
  padding: 2px 12px;
  border-radius: 100px;
  margin-bottom: -12px;
  position: relative;
  z-index: 2;
}

.gap-compare-label.blue {
  background: var(--tear-vivid-blue);
}

.gap-compare-label.pink {
  background: var(--brand-vivid-pink);
}

.gap-compare-label span {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-white);
  text-align: center;
}

.gap-compare-content {
  border-radius: 12px;
  padding: 32px 8px 12px;
  width: 100%;
  position: relative;
  z-index: 1;
  flex: 1;
}

.gap-compare-content.blue {
  background: var(--tear-light-blue);
}

.gap-compare-content.pink {
  background: var(--brand-light-pink);
}

.gap-compare-content p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--corporate-navy);
}

.gap-compare-arrow {
  position: absolute;
  width: 168px;
  height: 56px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
}

/* Gap employee side */
.gap-employee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.gap-employee-row .label {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--corporate-navy);
}

.gap-employee-row .desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--corporate-navy);
}

/* Stress card */
.gap-stress-card {
  background: var(--neutral-soft-blue);
  border-radius: 12px;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.gap-stress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.gap-stress-row .label {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: var(--corporate-navy);
  width: 224px;
}

.gap-stress-row .desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--corporate-navy);
}

/* Conclusion banner */
.gap-conclusion {
  background: var(--gradient-tear-vivid);
  padding: 6px 8px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: none;
}

.gap-card.anim-slide-up-reveal .gap-conclusion {
  animation: smoothTextReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.gap-conclusion p {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-white);
  white-space: nowrap;
}

/* Two issues card */
.issues-card {
  max-width: 1120px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  overflow: hidden;
}

.issues-header {
  background: var(--gradient-tear-vivid);
  padding: 10px;
  text-align: center;
}

.issues-header h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-white);
}

.issues-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.issues-columns {
  display: flex;
  gap: 12px;
  width: 100%;
  height: 242px;
}

.issues-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  position: relative;
}

.issues-col .photo {
  position: relative;
  width: 100%;
  height: 188px;
  overflow: hidden;
}

.issues-col .photo img {
  position: absolute;
  width: 100%;
  height: 185.91%;
  left: 0;
  object-fit: cover;
  max-width: none;
}

.issues-col .photo.offset1 img {
  top: -58.61%;
}

.issues-col .photo.offset2 img {
  top: -29.65%;
}

.issues-col p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: center;
}

.issues-number {
  position: absolute;
  top: 88px;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.96px;
  mix-blend-mode: screen;
}

.issues-number.left {
  left: 10px;
}

.issues-number.right {
  right: 10px;
}

.issues-divider {
  width: 1px;
  height: 100%;
  flex-shrink: 0;
}

.issues-footer {
  font-size: 22.4px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: -0.4375px;
}

/* ===== Mission Section ===== */
.section-mission {
  position: relative;
  width: 100%;
  padding: 166px max(20px, calc((100% - 1120px) / 2)) 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  background: #fff;
}

.mission-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.mission-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.mission-deco-left {
  left: 40px;
  top: 20px;
  width: 240px;
  height: 280px;
}

.mission-deco-right {
  right: 40px;
  top: 250px;
  width: 240px;
  height: 280px;
}

.deco-circle {
  position: absolute;
}

.deco-lg {
  width: 213px;
  height: 213px;
  bottom: 0;
  left: 10px;
}

.mission-deco-right .deco-lg {
  bottom: auto;
  top: 10px;
  left: auto;
  right: 0;
}

.deco-md {
  width: 50px;
  height: 50px;
}

.deco-sm {
  width: 14px;
  height: 14px;
}

.deco-float-1 { animation: floatBubble2 6s ease-in-out infinite; }
.deco-float-2 { animation: floatBubble3 5s ease-in-out 0.5s infinite; }
.deco-float-3 { animation: floatPhoto 7s ease-in-out 1s infinite; }

/* ===== Photo Banner ===== */
.photo-banner {
  position: relative;
  width: 100%;
  height: 376px;
  overflow: hidden;
}

.photo-banner-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.photo-banner-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.66;
}

.photo-banner-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ===== Approach Banner ===== */
.approach-section {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px max(20px, calc((100% - 758px) / 2));
  margin-top: -40px;
}

.approach-banner-gradient {
  background: var(--gradient-tear-vivid);
  padding: 10px;
  width: 100%;
  text-align: center;
}

.approach-banner-gradient h2 {
  font-weight: 700;
  font-size: 42px;
  line-height: 1.4;
  color: var(--text-white);
}

.approach-subtitle {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

/* ===== Seminar Card ===== */
.seminar-card {
  max-width: 500px;
  width: 90%;
  height: 168px;
  margin: 0 auto;
  padding: 24px 66px;
  border: 12px solid var(--brand-light-pink);
  border-radius: 1000px;
  background: #fff;
  box-shadow: var(--shadow-cta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.seminar-title {
  font-weight: 900;
  font-size: 28px;
  line-height: 1.5;
}

.seminar-subtitle {
  font-size: 16px;
  line-height: 1.8;
}

/* ===== Service Section Wrapper ===== */
.service-section-wrapper {
  position: relative;
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;
}

/* ===== Connecting Arrows (SVG overlay) ===== */
.connecting-arrows-svg {
  position: absolute;
  top: 135px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
  pointer-events: none;
}

/* ===== Service Heading Area ===== */
.section-service-intro {
  padding: 40px max(20px, calc((100% - 1120px) / 2)) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-label-area {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.service-label {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* ===== Service Flow (Steps) ===== */
.section-service-flow {
  width: 100%;
  margin-top: 46px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.steps-container {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: 930px;
  width: 100%;
  height: 494px;
  position: relative;
  z-index: 2;
}

.step-arrow-bg {
  position: absolute;
  width: 100%;
  height: 124px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 89px));
}

/* SP専用要素 — PC では非表示 */
.sp-step-bg,
.sp-step-badges,
.sp-cycle-bg,
.sp-research-heading,
.news-more-btn {
  display: none;
}

.step-card {
  max-width: 270px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
  flex: 1;
}

.step-badge {
  padding: 0 12px;
  border-radius: 4px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -12px;
  position: relative;
  z-index: 2;
  box-shadow: 0px 0px 12px rgba(0,0,0,0.12);
}

.step-badge.blue {
  background: var(--tear-vivid-blue);
}

.step-badge.gradient {
  background: var(--gradient-tear-vivid);
}

.step-badge.pink {
  background: var(--brand-vivid-pink);
}

.step-badge span {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  color: var(--text-white);
}

.step-badge .step-label {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.4px;
}

.step-badge .step-num {
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 0.6px;
}

.step-inner {
  flex: 1;
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  overflow: visible;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.step-inner-header {
  padding: 12px;
  text-align: center;
  border-radius: 4px 4px 0 0;
}

.step-inner-header.blue {
  background: var(--tear-vivid-blue);
}

.step-inner-header.gradient {
  background: var(--gradient-tear-vivid);
}

.step-inner-header.pink {
  background: var(--brand-vivid-pink);
}

.step-inner-header h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-white);
}

.step-inner-body {
  background: rgba(255,255,255,0.88);
  flex: 1;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 0 12px 12px;
  overflow: visible;
}

.step-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.step-illustration {
  width: 238px;
  height: 198px;
  position: relative;
  overflow: hidden;
}

.step-illustration .ellipse-bg {
  position: absolute;
  width: 230px;
  height: 112px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
}

.step-illustration .step-photo {
  position: absolute;
  width: 186px;
  height: 137px;
  object-fit: cover;
}

.step-info h5 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

.step-info .step-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.step-alert {
  background: #FF2584;
  border-radius: 100px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
}

.step-alert span {
  font-weight: 700;
  font-size: 16.653px;
  line-height: 1.333;
  color: var(--text-white);
  text-align: center;
}

.step-alert-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 45px;
  background: linear-gradient(180deg, #FF2584, #FF7576);
  pointer-events: none;
}

.step-alert-arrow::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #FF7576;
}

/* Service flow - Hospital section */
.service-hospital {
  max-width: 930px;
  width: 100%;
  border-radius: 12px;
  position: relative;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  z-index: 1;
}

.service-hospital-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.service-hospital-break {
  display: block;
}

.hospital-divider {
  width: 100%;
  height: 1px;
}

.service-hospital-bg {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}

.service-hospital-bg img {
  position: absolute;
  height: 100%;
  width: 61.93%;
  left: 0;
  top: 0;
  object-fit: cover;
}

.service-hospital-bg .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(74,111,165,0) 21.015%, #4a6fa5 59.43%);
}

.service-hospital h3 {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.4;
  color: var(--text-white);
}

.service-hospital h4 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-white);
}

.service-hospital p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-white);
}

.service-hospital-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.service-hospital-circle {
  position: absolute;
}

.service-hospital-deco--top {
  right: -10px;
  top: -26px;
}

.service-hospital-deco--bottom {
  left: -58px;
  bottom: -10px;
}

.service-hospital-circle--top-pink {
  width: 42.857px;
  height: 42.857px;
  left: 0;
  top: 0;
}

.service-hospital-circle--top-blue {
  width: 51.786px;
  height: 51.786px;
  left: 23px;
  top: 21px;
}

.service-hospital-circle--bottom-blue {
  width: 64.39px;
  height: 64.39px;
  left: 48px;
  top: 0;
}

.service-hospital-circle--bottom-pink {
  width: 77.805px;
  height: 77.805px;
  left: 0;
  top: -46px;
}

/* Decorative circles */
.deco-circles {
  position: absolute;
  pointer-events: none;
}

.deco-circle-pink {
  border-radius: 50%;
  background: linear-gradient(180deg, #F3B8C4, #FBE9ED);
}

.deco-circle-blue {
  border-radius: 50%;
  background: linear-gradient(180deg, #EAF4FF, #FFF);
}

/* ===== Cycle Section ===== */
.section-cycle {
  width: 100%;
  padding: 88px max(20px, calc((100% - 1120px) / 2));
  background: var(--gradient-tear-vivid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cycle-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  padding: 28px 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cycle-card h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  text-align: center;
}

.cycle-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  max-width: 788px;
  width: 100%;
  position: relative;
}

.cycle-flow-bg {
  position: absolute;
  width: 930px;
  height: 76px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cycle-flow-start,
.cycle-flow-end {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.cycle-flow-triangle {
  width: 16px;
  flex-shrink: 0;
  display: block;
}

.cycle-flow-box {
  padding: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cycle-flow-box--blue {
  background: var(--tear-vivid-blue);
}

.cycle-flow-box--pink {
  background: var(--brand-vivid-pink);
}

.cycle-flow-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.cycle-flow-bar {
  border-radius: 12px;
  padding: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-cta);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cycle-flow-bar--gradient {
  background: linear-gradient(90deg, rgba(117,177,255,0.88), rgba(255,117,118,0.88));
  width: 100%;
}

.cycle-flow-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.cycle-flow-bar--blue {
  background: rgba(117,177,255,0.88);
  flex: 1;
}

.cycle-flow-bar--pink {
  background: rgba(255,117,118,0.88);
  flex: 1;
}

.cycle-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--text-white);
}

.cycle-message h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-white);
}

.cycle-message p {
  font-size: 16px;
  line-height: 1.8;
}

/* ===== Solution Section ===== */
.section-solution {
  position: relative;
  width: 100%;
  height: 751px;
  border-radius: 0 clamp(60px, 8.3vw, 120px) 0 0;
  overflow: hidden;
}

.solution-bg {
  position: absolute;
  width: 56%;
  height: 751px;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}

.solution-bg img {
  position: absolute;
  width: 207.46%;
  height: 146.53%;
  top: -46.53%;
  left: -44.9%;
  object-fit: cover;
  max-width: none;
}

.solution-bg .fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 24%, #fff 100%);
}

/* PC: solution-title-row shows dot beside "Solution" heading */
.solution-title-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.solution-content {
  position: absolute;
  right: max(20px, calc((100% - 1120px) / 2));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 787px;
  width: 55%;
}

.solution-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.solution-title-row .en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: var(--text-primary);
}

.solution-catchcopy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solution-catchcopy-line {
  background: var(--gradient-tear-vivid);
  padding: 6px 8px;
  display: inline-flex;
  align-self: flex-start;
}

.solution-catchcopy-line span {
  font-family: 'Shippori Mincho', 'Ten Mincho', serif;
  font-size: 42px;
  line-height: 1.4;
  color: var(--text-white);
  letter-spacing: 5.04px;
  white-space: nowrap;
}

.solution-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.solution-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.solution-card {
  flex: 1;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.solution-card .icon {
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.solution-card-label {
  background: var(--brand-vivid-pink);
  border-radius: 100px;
  padding: 2px 8px;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.solution-card-label span {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-white);
}

.solution-card .card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 10px;
}

.solution-card .card-desc-line {
  display: block;
}

.solution-card .card-desc-line-nowrap {
  white-space: nowrap;
  letter-spacing: -0.04em;
}

.solution-card--women {
  padding-inline: 6px;
}

.solution-ctas {
  position: absolute;
  bottom: 20px;
  left: 39%;
  right: max(20px, calc((100% - 1120px) / 2));
  display: flex;
  gap: 16.571px;
  z-index: 2;
}

.solution-cta-btn {
  flex: 1;
  padding: 13.81px 5.524px 13.81px 13.81px;
  border-radius: 5.524px;
  box-shadow: 0px 0px 8.286px 0px #F9D6DE;
  background: rgba(255,255,255,0.44);
  border: 0.345px solid #fff;
  display: flex;
  align-items: center;
  gap: 8.286px;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.solution-cta-btn span {
  font-size: 11.048px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: nowrap;
}

.solution-cta-btn {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.solution-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 24px 0px rgba(249, 214, 222, 0.6);
}

.solution-cta-btn .small-arrow {
  width: 16.571px;
  height: 16.571px;
  transform: rotate(180deg) scaleY(-1);
}

/* ===== Our Vision Section ===== */
.vision-section-wrapper {
  padding: 88px max(20px, calc((100% - 1120px) / 2));
}

.section-our-vision {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.vision-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
  width: 100%;
}

.vision-hero .en-hero {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.96px;
  opacity: 0.08;
  text-transform: capitalize;
}

.vision-title-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -40px;
}

.vision-title-line {
  background: #fff;
  padding: 0 12px;
  box-shadow: 0px 12px 24px rgba(0,0,0,0.06);
  display: inline-flex;
  align-self: flex-start;
}

.vision-title-line h2 {
  font-weight: 700;
  font-size: 42px;
  line-height: 1.4;
  color: var(--corporate-light-navy);
}

.vision-goals {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.vision-goals-heading {
  display: flex;
  align-items: center;
}

.vision-goals-heading h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-primary);
}

.vision-goals-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.vision-goal-card {
  flex: 1;
  max-width: 262px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vision-goal-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.vision-goal-line-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vision-goal-line {
  width: 1px;
  height: 48px;
  background: var(--gradient-tear-vivid);
}

.vision-goal-num {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
}

.vision-goal-image {
  width: 238px;
  height: 170px;
  overflow: hidden;
  position: relative;
}

.vision-goal-image .ellipse-bg {
  position: absolute;
  width: 230px;
  height: 112px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 14px)) rotate(-25deg);
}

.vision-goal-image img.photo {
  position: absolute;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.vision-goal-label {
  background: var(--gradient-tear-vivid);
  padding: 0 12px;
}

.vision-goal-label span {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-white);
}

.vision-goal-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}

/* ===== Media Section ===== */
.section-media {
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;
  padding: 88px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
  position: relative;
  z-index: 1;
}

.media-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  width: 100%;
}

.media-heading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-heading-top {
  display: flex;
  align-items: center;
}

.media-heading-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.media-heading-text .en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: var(--text-primary);
}

.media-heading-text h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-primary);
}

.media-cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

.media-card {
  flex: 1;
  max-width: 356px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-white, #fff);
}

.media-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #FFFFFF;
}

.media-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 0 16px;
}

.media-card-tag {
  background: var(--brand-vivid-pink);
  padding: 2px 15px;
  align-self: flex-start;
}

.media-card-tag span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-white);
  text-align: center;
}

.media-card-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.media-card-divider {
  width: calc(100% - 32px);
  margin: 0 auto;
  height: 1px;
  background: var(--border-color);
}

.media-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 16px;
}

.media-card-date {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-light);
}

.media-more-btn {
  max-width: 320px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* ===== Research Section ===== */
.section-research {
  width: 100%;
  padding: 88px max(20px, calc((100% - 1120px) / 2));
  display: flex;
  gap: 24px;
  align-items: center;
  position: relative;
  border-radius: 0 0 clamp(60px, 8.3vw, 120px) clamp(60px, 8.3vw, 120px);
  overflow: hidden;
}

.research-bg {
  position: absolute;
  inset: 0;
  border-radius: 0 0 clamp(60px, 8.3vw, 120px) clamp(60px, 8.3vw, 120px);
  overflow: hidden;
  pointer-events: none;
}

.research-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.research-bg .overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,42,68,0.72);
}

.research-bubbles {
  position: relative;
  width: 548px;
  max-width: 100%;
  height: 395px;
  flex-shrink: 0;
  z-index: 1;
}

.research-union {
  position: absolute;
  width: 548px;
  height: 395.256px;
  left: 0;
  top: 0;
}

.research-bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  z-index: 2;
}

.research-bubble .bubble-label {
  background: #fff;
  border-radius: 100px;
  padding: 8px 12px;
  text-align: center;
}

.research-bubble .bubble-label span {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--brand-vivid-pink);
}

.research-bubble .bubble-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-white);
  text-align: center;
}

.research-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 66px;
  position: relative;
  z-index: 1;
}

.research-right-heading {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.research-right-heading .heading-top {
  display: flex;
  align-items: center;
}

.research-right-heading .en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: var(--text-white);
}

.research-right-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.research-right-text h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-white);
}

.research-right-text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-white);
}

/* ===== News Section ===== */
.section-news {
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;
  padding: 88px 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.news-cta-pc,
.news-more-btn {
  position: relative;
  z-index: 2;
}

.news-left {
  display: flex;
  align-items: flex-start;
}

.news-left-text {
  display: flex;
  flex-direction: column;
  gap: 66px;
}

.news-heading {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.news-heading .en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: var(--text-primary);
}

.news-heading h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text-primary);
}

.news-list {
  width: 643px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.news-item {
  display: flex;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid #c0c0c0;
}

.news-item-thumb {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #FFFFFF;
}

.news-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-date {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-light);
  white-space: nowrap;
}

.news-category {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 12px;
  border-radius: 4px;
  background: var(--brand-vivid-pink, #FF7576);
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
}

.news-title {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
}

/* ===== Marquee ===== */
.section-marquee {
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  color: var(--border-color);
  letter-spacing: 3px;
  display: inline-block;
}

/* ===== Company/Recruit ===== */
.section-company-recruit {
  max-width: 930px;
  width: 90%;
  margin: 0 auto;
  padding: 44px 24px;
  border-radius: 12px;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.company-recruit-bg {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}

.company-recruit-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-recruit-bg .overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.72);
}

.company-recruit-title {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  color: var(--text-white);
  text-align: center;
  position: relative;
  z-index: 1;
}

.company-recruit-cols {
  display: flex;
  gap: 72px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.company-recruit-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 0 24px;
}

.company-recruit-col-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--text-white);
  width: 100%;
}

.company-recruit-col-text h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
}

.company-recruit-col-text p {
  font-size: 16px;
  line-height: 1.8;
}

.company-recruit-col .cta-button {
  width: 100%;
}

.company-recruit-col .cta-button span {
  color: var(--text-white);
}

.company-recruit-divider {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ===== Contact ===== */
.section-contact {
  max-width: 1120px;
  width: 90%;
  margin: 60px auto;
  padding: 66px 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.44);
  box-shadow: 0px 0px 32px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-left {
  display: flex;
  align-items: flex-start;
}

.contact-left-text {
  display: flex;
  flex-direction: column;
  gap: 66px;
}

.contact-heading {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--text-primary);
}

.contact-heading-top {
  display: flex;
  align-items: center;
}

.contact-heading .en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
}

.contact-heading-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-heading-text h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
}

.contact-heading-text p {
  font-size: 16px;
  line-height: 1.8;
}

.contact-image {
  width: 339px;
  height: 339px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.contact-image img {
  width: 170.27%;
  height: 113.57%;
  margin-top: -13.57%;
  margin-left: -41.94%;
  object-fit: cover;
  max-width: none;
}

/* ===== Footer ===== */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.footer-main {
  background: rgba(255,255,255,0.04);
  padding: 66px max(20px, calc((100% - 1120px) / 2)) 88px;
  display: flex;
  gap: 24px;
  justify-content: center;
}

.footer-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-logo-area {
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.footer-logo {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 1.76px;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

.footer-right {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}

.footer-service {
  display: flex;
  align-items: flex-start;
}

.footer-service-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-service-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-service-heading .en-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: var(--text-primary);
}

.footer-service-heading p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.2s;
}

.footer-link-row:hover {
  opacity: 0.7;
}

.footer-link-row span {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.footer-nav-col {
  width: 262px;
  display: flex;
  flex-direction: column;
}

.footer-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  border-top: 1px solid var(--text-secondary);
  border-bottom: 1px solid var(--text-secondary);
  cursor: pointer;
  transition: opacity 0.2s;
}

.footer-nav-item:hover {
  opacity: 0.7;
}

.footer-nav-item + .footer-nav-item {
  border-top: none;
}

.footer-nav-item span {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.footer-nav-arrow {
  width: 24px;
  height: 24px;
  transform: rotate(180deg) scaleY(-1);
}

.footer-bar {
  background: var(--corporate-light-navy);
  padding: 32px max(20px, calc((100% - 1120px) / 2));
  border-radius: 24px 24px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -20px;
}

.footer-bar span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-white);
}

/* ===== Spacers ===== */
.spacer-sm { height: 32px; }
.spacer-md { height: 66px; }
.spacer-lg { height: 88px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* --- Keyframes --- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideRevealLeft {
  from { opacity: 0; transform: translateX(-100px) skewX(5deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0deg); }
}

@keyframes slideRevealRight {
  from { opacity: 0; transform: translateX(100px) skewX(-5deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0deg); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { opacity: 1; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(3deg); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(117,177,255,0.3); }
  50%      { box-shadow: 0 0 30px 10px rgba(255,117,118,0.15); }
}

@keyframes gradientSweep {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ripple {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes typeReveal {
  from { clip-path: inset(0 100% 0 0); opacity: 1; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes smoothTextReveal {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0% 0 0); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(20px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes blurIn {
  from { opacity: 0; filter: blur(20px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes slideUpReveal {
  from { opacity: 0; transform: translateY(80px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes wobble {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px) rotate(-3deg); }
  30%  { transform: translateX(6px) rotate(2deg); }
  45%  { transform: translateX(-4px) rotate(-1deg); }
  60%  { transform: translateX(2px) rotate(0.5deg); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

@keyframes flipInX {
  0%   { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  40%  { opacity: 1; transform: perspective(400px) rotateX(-10deg); }
  70%  { opacity: 1; transform: perspective(400px) rotateX(10deg); }
  100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

@keyframes slideInScale {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes centerScaleIn {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1.08); }
  80%  { opacity: 1; transform: translateX(-50%) scale(0.96); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* --- Base hidden state for all animated elements --- */
[data-anim] {
  opacity: 0;
}

/* --- Animation classes (applied via JS) --- */
.anim-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-fade-in-down {
  animation: fadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-fade-in-left {
  animation: fadeInLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-fade-in-right {
  animation: fadeInRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-fade-in {
  animation: fadeIn 1s ease both;
}

.anim-scale-in {
  animation: scaleIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-scale-in-bounce {
  animation: scaleInBounce 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-slide-reveal-left {
  animation: slideRevealLeft 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-slide-reveal-right {
  animation: slideRevealRight 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-pop-in {
  animation: popIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-flip-in {
  animation: flipInX 0.8s ease both;
}

.anim-blur-in {
  animation: blurIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-slide-up-reveal {
  animation: slideUpReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-count-up {
  animation: countUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-type-reveal {
  animation: typeReveal 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-rotate-in {
  animation: rotateIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-wobble {
  animation: wobble 0.8s ease both;
}

.anim-smooth-text-reveal {
  animation: smoothTextReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-center-scale-in {
  animation: centerScaleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Continuous animations (not scroll-triggered) --- */
.float-continuous {
  animation: floatUp 3s ease-in-out infinite;
}

.float-slow-continuous {
  animation: floatSlow 5s ease-in-out infinite;
}

.pulse-glow-continuous {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* --- Delay utilities --- */
.anim-delay-1 { animation-delay: 0.1s !important; }
.anim-delay-2 { animation-delay: 0.2s !important; }
.anim-delay-3 { animation-delay: 0.3s !important; }
.anim-delay-4 { animation-delay: 0.4s !important; }
.anim-delay-5 { animation-delay: 0.5s !important; }
.anim-delay-6 { animation-delay: 0.6s !important; }
.anim-delay-7 { animation-delay: 0.7s !important; }
.anim-delay-8 { animation-delay: 0.8s !important; }
.anim-delay-9 { animation-delay: 0.9s !important; }
.anim-delay-10 { animation-delay: 1.0s !important; }
.anim-delay-12 { animation-delay: 1.2s !important; }
.anim-delay-14 { animation-delay: 1.4s !important; }
.anim-delay-16 { animation-delay: 1.6s !important; }

/* --- FV hero special animations --- */
.fv .fv-content {
  opacity: 1;
}

.fv .fv-tear-icon {
  opacity: 0;
}

.fv-title-animate {
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-subtitle-animate {
  opacity: 0;
  animation: blurIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

@keyframes tearScaleIn {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1.08); }
  80%  { opacity: 1; transform: translateX(-50%) scale(0.96); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes tearFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%      { transform: translateX(-50%) translateY(-18px) rotate(3deg); }
}

.fv-tear-animate {
  animation: tearScaleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both, tearFloat 5s ease-in-out 1.1s infinite;
  will-change: transform, opacity;
}

/* --- Marquee animation --- */
.marquee-animated .marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeScroll 20s linear infinite;
}

/* --- Decorative circles continuous float --- */
.circle-float-1 {
  animation: floatUp 4s ease-in-out infinite;
}

.circle-float-2 {
  animation: floatSlow 6s ease-in-out 1s infinite;
}

.circle-float-3 {
  animation: floatUp 3.5s ease-in-out 0.5s infinite;
}

/* --- Gradient text shimmer effect on hover --- */
.gradient-text-shimmer {
  background-size: 200% auto;
  animation: gradientSweep 3s linear infinite;
}

/* --- CTA button hover enhanced --- */
.cta-button {
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 24px 0px rgba(249, 214, 222, 0.6);
}

/* --- Card hover lifts --- */
.solution-card,
.media-card,
.problem-card,
.gap-white-card,
.vision-goal-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.solution-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 12px 32px rgba(0,0,0,0.12);
}

.media-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 24px 0px rgba(249, 214, 222, 0.6);
}

/* --- Step card hover (disabled) --- */

/* --- News item hover --- */
.news-item {
  transition: transform 0.3s ease, background 0.3s ease;
}

.news-item:hover {
  transform: translateX(8px);
}

/* --- Research bubble hover --- */
/* --- Research bubble hover (disabled) --- */

/* --- Header animation on load --- */
@keyframes headerFadeIn {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header {
  animation: headerFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Approach banner gradient --- */

/* --- Issues number counter effect --- */
.issues-number {
  transition: transform 0.4s ease;
}

/* --- Photo banner parallax prep --- */
.photo-banner {
  overflow: hidden;
}

.photo-banner-main {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* --- Cycle flow (no hover) --- */

/* --- Footer link hover animation --- */
.footer-nav-item {
  transition: opacity 0.2s, transform 0.3s ease;
}

.footer-nav-item:hover {
  transform: translateX(4px);
}

.footer-link-row {
  transition: opacity 0.2s, transform 0.3s ease;
}

.footer-link-row:hover {
  transform: translateX(4px);
}

/* ============================================================
   SPLASH SCREEN — Water Drop + Ripple + Frosted Glass
   GPU-composited: only transform & opacity are animated
   ============================================================ */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
}

html.pre-splash .splash-screen,
body.splash-active .splash-screen,
.splash-screen.splash-fade-out {
  display: flex;
}

/* --- Frosted-glass background --- */
.splash-glass-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(117,177,255,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 70% 60%, rgba(255,117,118,0.10) 0%, transparent 70%),
    linear-gradient(160deg, rgba(240,246,255,0.97), rgba(255,245,247,0.97));
  backdrop-filter: blur(40px) saturate(1.2);
  -webkit-backdrop-filter: blur(40px) saturate(1.2);
  transform: translateZ(0);
}

/* subtle frosted texture */
.splash-glass-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 4px
  );
}

/* ambient sparkle dots */
.splash-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(117,177,255,0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,117,118,0.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 70%, rgba(117,177,255,0.20) 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,160,170,0.25) 50%, transparent 100%);
  animation: splashParticleDrift 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes splashParticleDrift {
  0%,100% { transform: translate3d(0,0,0); }
  33%     { transform: translate3d(4px,-6px,0); }
  66%     { transform: translate3d(-3px,-10px,0); }
}

/* --- Water droplet ---
   Positioned at center with translateY offset so only transform animates */
.splash-droplet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 56px;
  margin-left: -20px;
  margin-top: -28px;
  z-index: 10;
  opacity: 0;
  filter: drop-shadow(0 6px 16px rgba(117,177,255,0.35));
  transform: translate3d(0, calc(-50vh - 52px), 0);
  will-change: transform, opacity;
}

.splash-droplet svg { width: 100%; height: 100%; }

.splash-droplet.dropping {
  animation: dropFall 0.8s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

@keyframes dropFall {
  0%   { opacity: 1;  transform: translate3d(0, calc(-50vh - 52px), 0) scale(1, 1); }
  10%  { opacity: 1;  transform: translate3d(0, calc(-50vh - 30px), 0) scale(0.96, 1.04); }
  70%  { opacity: 1;  transform: translate3d(0, -8px, 0) scale(0.98, 1.02); }
  82%  { opacity: 1;  transform: translate3d(0, 0, 0) scale(1, 1); }
  88%  { opacity: 0.7; transform: translate3d(0, 6px, 0) scale(1.25, 0.6); }
  94%  { opacity: 0.3; transform: translate3d(0, 10px, 0) scale(1.5, 0.3); }
  100% { opacity: 0;   transform: translate3d(0, 14px, 0) scale(1.8, 0.1); }
}

/* --- Impact flash ---
   Fixed size, only scale + opacity animate */
.splash-impact {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(117,177,255,0.15) 55%, transparent 75%);
  z-index: 9;
  opacity: 0;
  transform: scale(0) translateZ(0);
  will-change: transform, opacity;
}

.splash-impact.flash {
  animation: impactFlash 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes impactFlash {
  0%   { opacity: 0.9; transform: scale(0) translateZ(0); }
  30%  { opacity: 0.8; transform: scale(0.5) translateZ(0); }
  60%  { opacity: 0.4; transform: scale(0.8) translateZ(0); }
  100% { opacity: 0;   transform: scale(1) translateZ(0); }
}

/* --- Water ripples ---
   Fixed size, only scale + opacity animate. No border-width change. */
.splash-ripples {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 8;
}

.splash-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 50%;
  border: 1.5px solid rgba(117,177,255,0.40);
  background: radial-gradient(circle, rgba(117,177,255,0.05) 0%, transparent 70%);
  opacity: 0;
  box-shadow: 0 0 12px rgba(117,177,255,0.08), inset 0 0 12px rgba(117,177,255,0.04);
  transform: scale(0) translateZ(0);
  will-change: transform, opacity;
}

.splash-ripple.active {
  animation: rippleExpand 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.splash-ripple-2.active { animation-delay: .15s; border-color: rgba(170,150,255,0.32); }
.splash-ripple-3.active { animation-delay: .30s; border-color: rgba(255,117,118,0.26); }
.splash-ripple-4.active { animation-delay: .45s; border-color: rgba(255,170,175,0.20); }

@keyframes rippleExpand {
  0%   { transform: scale(0) translateZ(0);  opacity: 0.85; }
  15%  { opacity: 0.65; }
  35%  { opacity: 0.40; }
  60%  { opacity: 0.18; }
  100% { transform: scale(14) translateZ(0); opacity: 0; }
}

/* --- Logo (emerges simultaneously with the ripple) ---
   Only transform + opacity + filter animate. filter kept minimal. */
.splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 20;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.92);
  will-change: transform, opacity;
}

.splash-logo {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 54px;
  font-weight: 400;
  letter-spacing: 2.4px;
  color: var(--text-primary);
}

.splash-accent-line {
  height: 1.5px;
  border-radius: 1px;
  background: var(--gradient-tear-vivid);
  width: 120px;
  transform: scaleX(0);
  transform-origin: center;
  will-change: transform, opacity;
}

.splash-brand.emerge {
  animation: logoEmerge 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes logoEmerge {
  0%   { opacity: 0;   transform: translate3d(0, 24px, 0) scale(0.92); filter: blur(12px); }
  30%  { opacity: 0.6; filter: blur(4px); }
  55%  { opacity: 1;   transform: translate3d(0, -3px, 0) scale(1.015); filter: blur(0); }
  75%  { opacity: 1;   transform: translate3d(0, 1px, 0) scale(0.998); filter: blur(0); }
  100% { opacity: 1;   transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

.splash-accent-line.grow {
  animation: splashLineGrow 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splashLineGrow {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* --- Brand exit --- */
.splash-brand.splash-out {
  animation: splashBrandOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

@keyframes splashBrandOut {
  0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(0,-10px,0) scale(0.96); filter: blur(6px); }
}

/* --- Splash screen fade-out --- */
.splash-screen.splash-fade-out {
  animation: splashFadeOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splashFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Body splash-active state --- */
html.pre-splash body,
body.splash-active {
  overflow: hidden;
}

html.pre-splash .header,
body.splash-active .header  {
  opacity: 0 !important;
  animation: none !important;
}

html.pre-splash .page-wrapper,
body.splash-active .page-wrapper {
  opacity: 0;
}

/* --- Page reveal --- */
.page-wrapper.splash-reveal {
  animation: pageRevealIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}
@keyframes pageRevealIn {
  0%   { opacity: 0; transform: translate3d(0,14px,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}

/* --- Header reveal --- */
.header.splash-reveal {
  animation: headerRevealIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  opacity: 1 !important;
  will-change: transform, opacity;
}
@keyframes headerRevealIn {
  0%   { opacity: 0; transform: translate3d(0,-10px,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .splash-screen { display: none !important; }
  html.pre-splash body,
  body.splash-active { overflow: visible; }
  html.pre-splash .header,
  body.splash-active .header { opacity: 1 !important; animation: headerFadeIn 0s both !important; }
  html.pre-splash .page-wrapper,
  body.splash-active .page-wrapper { opacity: 1; }
}

/* ============================================================
   SP RESPONSIVE — 768px以下
   ============================================================ */

/* ===== Hamburger Button (hidden on PC) ===== */
.header-hamburger {
  display: none;
}

/* ===== SP Nav Drawer (hidden on PC) ===== */
.sp-nav-drawer {
  display: none;
}

br.sp-only {
  display: none;
}

@media (max-width: 767px) {

  br.sp-only {
    display: block;
  }
  br.pc-only {
    display: none;
  }

  /* ===== SP Nav Drawer ===== */
  .sp-nav-drawer {
    display: flex;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    z-index: 150;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.4s ease,
      visibility 0s linear 0.4s;
    will-change: opacity;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sp-nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.4s ease,
      visibility 0s linear 0s;
  }

  /* Header row inside drawer - hidden, header stays in place */
  .sp-nav-header {
    display: none;
  }

  /* Nav body */
  .sp-nav-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px 16px 32px;
  }

  /* Nav items */
  .sp-nav-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  /* Category with blue left border */
  .sp-nav-category {
    border-left: 2px solid var(--tear-vivid-blue);
    padding-left: 12px;
  }

  .sp-nav-cat-link {
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Group: category + sub-items */
  .sp-nav-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sp-nav-subitems {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 4px;
  }

  .sp-nav-subitem {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.75;
    letter-spacing: 0.8px;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Plain links (no border) */
  .sp-nav-plain-link {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.75;
    letter-spacing: 0.8px;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Arrow icon in nav links */
  .sp-nav-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transform: rotate(180deg) scaleY(-1);
    opacity: 0.6;
  }

  /* ===== Staggered item entrance animation ===== */
  .sp-nav-items > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(1) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(2) { transition-delay: 0.22s; opacity: 1; transform: translateY(0); }
  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(3) { transition-delay: 0.29s; opacity: 1; transform: translateY(0); }
  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(4) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }
  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(5) { transition-delay: 0.43s; opacity: 1; transform: translateY(0); }
  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(6) { transition-delay: 0.50s; opacity: 1; transform: translateY(0); }
  .sp-nav-drawer.is-open .sp-nav-items > *:nth-child(7) { transition-delay: 0.57s; opacity: 1; transform: translateY(0); }

  .sp-nav-cta {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease 0.62s, transform 0.5s ease 0.62s;
  }

  .sp-nav-drawer.is-open .sp-nav-cta {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== Hamburger Button ===== */
  .header-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 12px 0 #F9D6DE;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 300;
  }

  .ham-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .ham-bar {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--text-primary);
    transition: transform 0.3s, opacity 0.3s;
  }

  /* hamburger open state */
  .header-hamburger.is-open .ham-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .header-hamburger.is-open .ham-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .header-hamburger.is-open .ham-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* サービス概要の矢印を非表示 & リンク無効化 */
  .sp-nav-group > .sp-nav-category .sp-nav-arrow {
    display: none;
  }
  .sp-nav-group > .sp-nav-category .sp-nav-cat-link {
    pointer-events: none;
    cursor: default;
  }

  /* ===== Header ===== */
  .header {
    padding: 9px 12px;
    position: fixed;
    z-index: 250;
  }
  .header-logo {
    font-size: 28px;
  }
  .header-right {
    display: none;
  }

  /* ===== FV ===== */
  .fv {
    height: 546px;
    border-radius: 0 0 60px 60px;
  }
  .fv-bg {
    border-radius: 0 0 60px 60px;
  }
  .fv-tear-icon {
    width: 120px;
    height: 210px;
    bottom: 34px;
  }
  .fv-content {
    bottom: 24px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 95%;
    max-width: 500px;
    align-items: center;
    text-align: center;
    white-space: normal;
    gap: 16px;
  }
  .fv-title {
    font-size: 20px;
    line-height: 1.35;
  }
  .fv-ruby-inline rt {
    display: ruby-text;
    font-family: 'Shippori Mincho', 'Ten Mincho', serif;
    font-size: 10px;
    letter-spacing: 0;
  }
  .fv-subtitle {
    font-size: 15px;
    line-height: 1.8;
    white-space: normal;
  }

  /* ===== Research Problem ===== */
  .section-research-problem {
    padding: 40px 12px 60px;
    border-radius: 0 0 60px 60px;
  }
  .section-heading-center {
    gap: 16px;
    align-items: center;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
  .section-en-title {
    font-size: 40px;
  }
  .section-title-with-dot {
    align-self: flex-start;
  }
  .section-title-with-dot h2 {
    font-size: 26px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }
  .section-subtitle {
    font-size: 15px;
    text-align: center;
  }
  /* 問題ブロック：画像→テキストの縦積み */
  .problem-block,
  .problem-block.reverse {
    flex-direction: column;
    gap: 20px;
  }
  .problem-image {
    order: 1;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .problem-content {
    order: 2;
    padding-bottom: 0;
    width: 100%;
  }
  .problem-en {
    font-size: 48px;
    line-height: 1;
  }
  .problem-body {
    margin-top: -20px;
    max-width: 100%;
  }
  .problem-heading h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .problem-text {
    font-size: 15px;
    line-height: 1.8;
  }
  .highlight-box {
    font-size: 15px;
    line-height: 1.8;
  }
  .problem-cards {
    flex-direction: column;
    gap: 12px;
  }
  .problem-card h4 {
    font-size: 16px;
  }
  .problem-card p {
    font-size: 13px;
  }

  /* ===== Gap Section ===== */
  .section-gap {
    padding: 60px 12px;
    border-radius: 0 0 60px 60px;
  }
  .gap-card {
    padding: 24px 12px;
    gap: 20px;
  }
  .gap-en {
    font-size: 48px;
  }
  .gap-heading h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  /* 企業側 → 女性社員 縦積み */
  .gap-compare {
    flex-direction: column;
    gap: 12px;
  }
  .gap-compare-col {
    width: 100%;
    flex: none;
    align-items: center;
    isolation: isolate;
    padding-bottom: 20px;
  }
  .gap-compare-icon {
    width: 42px;
    height: 42px;
    position: relative;
    z-index: 2;
    margin-bottom: 4px;
  }
  .gap-compare-label {
    margin-bottom: -20px;
    z-index: 2;
    position: relative;
  }
  .gap-compare-label span {
    font-size: 15px;
  }
  .gap-compare-content {
    padding: 32px 8px 15px;
    position: relative;
    z-index: 1;
    flex: none;
  }
  .gap-compare-content p {
    font-size: 15px;
    line-height: 1.8;
  }
  .gap-employee-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .gap-employee-row .label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }
  .gap-employee-row .desc {
    font-size: 13px;
    line-height: 1.6;
  }
  /* 矢印は非表示 */
  .gap-compare-arrow {
    display: none;
  }
  /* ストレスカード */
  .gap-stress-card {
    background: #f6faff;
    border-radius: 6px;
    padding: 16px 12px;
    gap: 12px;
  }
  .gap-stress-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .gap-stress-row .label {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    width: auto;
  }
  .gap-stress-row .desc {
    font-size: 15px;
    line-height: 1.8;
  }
  .gap-conclusion p {
    font-size: 18px;
    font-weight: 500;
    white-space: normal;
    line-height: 1.5;
  }
  /* 2つの課題 */
  .issues-card {
    width: 100%;
  }
  .issues-header h3 {
    font-size: 20px;
  }
  .issues-body {
    padding: 20px 12px;
    gap: 12px;
  }
  .issues-columns {
    height: 162px;
    flex-direction: row;
    gap: 12px;
  }
  .issues-col .photo {
    height: 88px;
  }
  .issues-col p {
    font-size: 15px;
    line-height: 1.8;
  }
  .issues-number {
    font-size: 48px;
    top: 34px;
  }
  .issues-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    flex-shrink: 0;
  }
  .issues-footer {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }

  /* ===== Mission Section ===== */
  .section-mission {
    padding: 60px 20px 60px;
  }
  .mission-deco {
    display: none;
  }
  .mission-content {
    gap: 20px;
  }
  /* Missionのh2はインラインstyleで書かれているため、section-mission内で上書き */
  .section-mission .mission-content h2 {
    font-size: 26px !important;
    line-height: 1.4 !important;
  }
  .section-mission .mission-content p[style*="font-size:28px"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }

  /* ===== Photo Banner ===== */
  .photo-banner {
    height: 220px;
  }

  /* ===== Approach ===== */
  .approach-section {
    padding: 24px 12px;
    margin-top: -20px;
  }
  .approach-banner-gradient h2 {
    font-size: 26px;
    line-height: 1.4;
  }
  .approach-subtitle {
    font-size: 16px;
  }

  /* ===== Seminar Card ===== */
  .seminar-card {
    padding: 20px 24px;
    height: auto;
    border-width: 8px;
    max-width: 100%;
    width: 90%;
  }
  .seminar-title {
    font-size: 20px;
  }
  .seminar-subtitle {
    font-size: 16px;
  }

  /* ===== Service Flow ===== */
  .connecting-arrows-svg {
    display: none;
  }
  .service-section-wrapper {
    width: calc(100% - 24px);
  }
  .section-service-flow {
    margin-top: 24px;
    padding: 28px 12px;
    gap: 32px;
  }
  .steps-container {
    flex-direction: column;
    height: auto;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    padding: 0;
  }
  .step-arrow-bg {
    display: none;
  }
  /* SP用縦背景グラデーション（上=四角、下=三角） */
  .sp-step-bg {
    display: block;
    position: absolute;
    top: -24px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    background: linear-gradient(180deg, #75B1FF 0%, #FF7576 100%);
    clip-path: polygon(0 0, 100% 0, 100% 97%, 50% 100%, 0 97%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
  }
  .steps-container {
    position: relative;
  }
  .step-card {
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  /* Step3のボックスを下に伸ばす（テキスト位置は変えず）*/
  .steps-container .step-card:last-child .step-inner-body {
    padding-bottom: 48px;
    background: rgba(255, 255, 255, 0.55);
  }
  /* step-alertはSPでは全て非表示（SP専用バッジに置き換え） */
  .step-alert {
    display: none;
  }
  /* SP専用バッジ行 */
  .sp-step-badges {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: -44px;
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 64px;
  }
  .sp-step-badge-item {
    background: #FF2584;
    border-radius: 100px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .sp-step-badge-item span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
  }
  /* バッジ下の矢印 */
  .sp-badge-arrow-wrap {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 64px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .sp-badge-arrow {
    width: 64px;
    height: 14.73px;
    flex-shrink: 0;
    transform: rotate(90deg);
  }
  .step-inner-body {
    padding: 20px 16px;
  }
  .step-illustration {
    width: 238px;
    height: 198px;
  }
  .step-info h5 {
    font-size: 16px;
    font-weight: 700;
  }
  .step-info .step-desc {
    font-size: 12px;
    text-align: center;
    line-height: 1.6;
  }
  /* Hospital card */
  .service-hospital {
    max-width: 100% !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start;
    padding: 16px 8px 14px !important;
    margin-top: -24px;
  }
  .service-hospital-bg img {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-position: center;
  }
  .service-hospital-bg .overlay {
    background: linear-gradient(90deg, rgba(74,111,165,0) 0%, #4a6fa5 59.43%);
  }
  .service-hospital-content {
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px !important;
    text-align: center;
  }
  .service-hospital-break {
    display: none !important;
  }
  .service-hospital h3 {
    width: 100%;
    font-size: 18px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.02em;
    text-align: center;
  }
  .service-hospital h4 {
    font-size: 16px !important;
  }
  .service-hospital p {
    font-size: 10px !important;
    line-height: 1.8 !important;
    text-align: center;
  }
  .service-hospital-deco--top {
    left: auto;
    right: 30px;
    top: 0;
    bottom: auto;
  }
  .service-hospital-deco--bottom {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
  }
  .service-hospital-circle--top-pink {
    width: 32.143px;
    height: 32.143px;
    left: 0;
    top: -26.11px;
  }
  .service-hospital-circle--top-blue {
    width: 38.839px;
    height: 38.839px;
    left: 17px;
    top: -10.04px;
  }
  .service-hospital-circle--bottom-pink {
    width: 38.903px;
    height: 38.903px;
    left: -21.52px;
    top: 103.5px;
  }
  .service-hospital-circle--bottom-blue {
    width: 32.195px;
    height: 32.195px;
    left: 2.63px;
    top: 126.3px;
  }
  .service-hospital-content p {
    font-size: 9.95px !important;
  }

  /* ===== Cycle Section ===== */
  .section-cycle {
    padding: 60px 12px;
  }
  .cycle-card {
    padding: 28px 12px;
    gap: 20px;
  }
  .cycle-card h3 {
    font-size: 20px;
    line-height: 1.5;
    padding: 0;
  }
  .cycle-flow {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }
  .cycle-flow-bg {
    display: none;
  }
  .cycle-flow::before {
    content: '';
    position: absolute;
    width: 76px;
    height: 230px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-45% - 5px));
    background: linear-gradient(180deg, #75B1FF 0%, #FF7576 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
  }
  .cycle-flow-start,
  .cycle-flow-end {
    flex-direction: column;
    width: 100%;
  }
  .cycle-flow-box {
    font-size: 20px;
    padding: 6px 10px 0;
    width: 100%;
  }
  .cycle-flow-triangle {
    display: none;
  }
  .cycle-flow-start::after,
  .cycle-flow-end::after {
    content: '';
    display: block;
    width: 100%;
    height: 16px;
    margin-top: -0.5px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .cycle-flow-start::after {
    background: #75B1FF;
  }
  .cycle-flow-end::after {
    background: #FF7576;
  }
  .cycle-flow-center {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }
  .cycle-flow-bar {
    font-size: 16px;
    padding: 8px;
  }
  .cycle-flow-bar--gradient {
    width: auto;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cycle-flow-row {
    flex-direction: column;
    width: 128px;
    flex-shrink: 0;
  }
  .cycle-flow-bar--blue,
  .cycle-flow-bar--pink {
    flex: none;
  }
  .cycle-message {
    padding: 0 8px;
  }
  .cycle-message h3 {
    font-size: 18px;
    line-height: 1.5;
  }
  .cycle-message p {
    font-size: 13px;
  }

  /* ===== Solution Section ===== */
  .section-solution {
    height: auto;
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 44px 12px;
    position: relative;
  }
  .solution-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .solution-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    max-width: none;
    top: 0;
    left: 0;
  }
  .solution-bg .fade {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 80%);
  }
  .solution-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    transform: none;
    gap: 24px;
    padding: 0;
    right: auto;
    top: auto;
  }
  .solution-title-row {
    align-items: center;
    gap: 4px;
  }
  .solution-title-row .section-dot {
    margin-top: 5px;
  }
  .solution-text {
    gap: 20px;
  }
  .solution-title-row .en-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.4px;
    color: var(--text-primary);
  }
  .solution-catchcopy-line span {
    font-size: 20px;
    letter-spacing: 2.4px;
    white-space: normal;
  }
  .solution-desc {
    font-size: 15px;
  }
  .solution-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex-wrap: unset;
  }
  .solution-card {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .solution-card .icon {
    width: 88px;
    height: 88px;
  }
  .solution-card-label span {
    font-size: 16px;
  }
  .solution-card .card-desc {
    font-size: 12px;
  }
  .solution-ctas {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    width: 100%;
  }
  .solution-cta-btn {
    justify-content: space-between;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.88);
    border: 0.345px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 8px 0 #f9d6de;
  }
  .solution-cta-btn span {
    font-size: 14px;
  }

  /* ===== Vision Section ===== */
  .vision-section-wrapper {
    padding: 60px 20px 60px;
  }
  .vision-hero {
    padding-bottom: 20px;
    margin-top: 0;
  }
  .vision-title-lines {
    margin-top: 8px;
  }
  .vision-title-line h2 {
    font-size: 22px;
    line-height: 1.4;
  }
  .vision-goals-heading h3 {
    font-size: 20px;
  }
  .vision-goals-grid {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .vision-goal-card {
    max-width: 351px;
    width: 100%;
  }
  .vision-goal-image {
    width: 238px;
    height: 170px;
    max-width: 100%;
  }
  .vision-goal-label span {
    font-size: 20px;
  }
  .vision-goal-desc {
    font-size: 13px;
    text-align: center;
  }
  .vision-goal-top {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
    gap: 0;
  }
  .vision-goal-line-num {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    margin-right: -70px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }
  .vision-goal-line-num .vision-goal-line {
    width: 32px;
    height: 1px;
  }
  .vision-goal-line-num .vision-goal-num {
    font-size: 48px;
  }
  .vision-goal-image {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .vision-goal-label {
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }

  /* ===== Media Section ===== */
  .section-media {
    width: calc(100% - 24px);
    padding: 66px 0;
    gap: 32px;
  }
  .media-header {
    gap: 24px;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
  .media-heading {
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .media-heading-top {
    margin-left: -14px;
  }
  .media-heading-top .section-dot {
    margin-top: 4px;
  }
  .media-heading-text {
    gap: 12px;
    align-items: center;
  }
  .media-heading-text .en-title {
    font-size: 40px;
  }
  .media-heading-text h3 {
    font-size: 20px;
    text-align: center;
  }
  .media-cards {
    flex-direction: column;
    gap: 32px;
  }
  .media-card {
    max-width: 100%;
    width: 100%;
  }
  .media-card-image {
    aspect-ratio: 356 / 200;
    height: auto;
  }
  .media-card-text {
    font-size: 15px;
  }
  .media-more-btn {
    max-width: 100%;
    width: 100%;
  }

  /* ===== Research Section ===== */
  .section-research {
    flex-direction: column;
    padding: 44px 12px 66px;
    border-radius: 0 0 32px 32px;
    gap: 24px;
    align-items: flex-start;
  }
  /* SP専用見出し（PC では非表示） */
  .sp-research-heading {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 1;
  }
  .sp-research-heading .section-dot {
    margin-top: 4px;
  }
  .sp-research-heading .en-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 500;
    color: var(--text-white);
    line-height: 1;
    letter-spacing: -0.32px;
  }
  /* PC側の見出しを SP では非表示 */
  .research-right .heading-top {
    display: none;
  }
  /* Figma SP値: Union=351×253px、バブル位置はFigmaの実測値 */
  .research-bubbles {
    width: 351px;
    max-width: 100%;
    height: 253px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    align-self: center;
  }
  .research-union {
    position: absolute;
    width: 351px;
    height: 253px;
    left: 0;
    top: 0;
  }
  /* バブル位置：Figma実測値（nth-child3のみ左補正） */
  .research-bubble:nth-child(2) {
    left: 17px !important;
    top: 145px !important;
  }
  .research-bubble:nth-child(3) {
    left: 112px !important;
    top: 43px !important;
    align-items: center;
    text-align: center;
  }
  .research-bubble:nth-child(4) {
    left: 220px !important;
    top: 156px !important;
  }
  /* バブル文字サイズ（Figma実測値） */
  .research-bubble {
    gap: 6px;
  }
  .research-bubble .bubble-label {
    padding: 5px 8px;
  }
  .research-bubble .bubble-label span {
    font-size: 13px;
    line-height: 1.4;
  }
  .research-bubble .bubble-desc {
    font-size: 9px;
    line-height: 1.5;
  }
  .research-right {
    flex: none;
    width: 100%;
    gap: 16px;
    position: relative;
    z-index: 1;
  }
  .research-right-heading {
    gap: 8px;
  }
  .research-right-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .research-right-text h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .research-right-text p {
    font-size: 15px;
    line-height: 1.8;
  }
  .section-research .cta-button {
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
  }

  /* ===== News Section ===== */
  .section-news {
    flex-direction: column;
    gap: 24px;
    padding: 44px 12px;
    width: 100%;
    max-width: 100%;
  }
  /* PC版ボタンをSPで非表示、SP版ボタンを表示 */
  .news-cta-pc {
    display: none;
  }
  .news-more-btn {
    display: flex;
    width: 100%;
    max-width: 100%;
  }
  .news-left {
    align-items: flex-start;
    width: 100%;
  }
  .news-left > .section-dot {
    margin-top: -12px;
  }
  .news-left-text {
    gap: 8px;
  }
  .news-heading .en-title {
    font-size: 40px;
  }
  .news-heading h3 {
    font-size: 20px;
  }
  .news-list {
    width: 100%;
    gap: 24px;
  }
  .news-item {
    gap: 16px;
    padding-bottom: 24px;
  }
  .news-item-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
  }
  .news-date {
    font-size: 12px;
  }
  .news-item-content {
    gap: 4px;
  }
  .news-category {
    font-size: 11px;
    padding: 1px 8px;
  }
  .news-title {
    font-size: 14px;
    line-height: 1.6;
  }

  /* ===== Marquee ===== */
  .section-marquee {
    padding: 12px 0;
  }
  .marquee-text {
    font-size: 56px;
  }

  /* ===== Company/Recruit ===== */
  .section-company-recruit {
    width: calc(100% - 24px);
    padding: 44px 12px;
    gap: 20px;
    align-items: center;
    overflow: visible;
  }
  .company-recruit-title {
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
  }
  .company-recruit-cols {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .company-recruit-col {
    padding: 0;
    gap: 16px;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  /* 縦区切り → 横区切り（点線） */
  .company-recruit-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
    flex-shrink: 0;
    background: none;
    border-top: 1px dashed rgba(255,255,255,0.3);
  }
  .company-recruit-divider img {
    display: none;
  }
  .company-recruit-col-text h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
  }
  .company-recruit-col-text p {
    font-size: 15px;
    line-height: 1.8;
  }

  /* ===== Contact ===== */
  .section-contact {
    flex-direction: column;
    padding: 0 0 44px;
    margin: 40px auto;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
  }
  /* 画像を上に（正方形）、カード上端にぴったり */
  .contact-image {
    order: -1;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 0;
    flex-shrink: 0;
    overflow: hidden;
  }
  .contact-image img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    max-width: none;
  }
  .contact-left {
    width: 100%;
    padding: 28px 12px 0;
    display: block;
  }
  .contact-left-text {
    gap: 28px;
  }
  .contact-heading {
    gap: 8px;
  }
  .contact-heading-top {
    display: flex;
    align-items: center;
  }
  .contact-heading-top .section-dot {
    margin-top: 5px;
  }
  .contact-heading .en-title {
    font-size: 32px;
    letter-spacing: -0.32px;
  }
  .contact-heading-text {
    gap: 16px;
  }
  .contact-heading-text h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .contact-heading-text p {
    font-size: 15px;
    line-height: 1.8;
  }
  .section-contact .cta-button {
    max-width: 100%;
    width: 100%;
  }

  /* ===== Footer ===== */
  .footer-main {
    flex-direction: column;
    padding: 44px 12px 66px;
    gap: 32px;
  }
  /* ナビを先に、ロゴを後に */
  .footer-right {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    align-items: start;
    width: 100%;
  }
  /* ServiceブロックをGrid全幅に */
  .footer-service {
    grid-column: 1 / 3;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 0;
  }
  .footer-service > .section-dot {
    margin-top: -6px;
  }
  .footer-service-text {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }
  .footer-service-heading {
    flex-shrink: 0;
  }
  .footer-service-heading .en-title {
    font-size: 40px;
  }
  .footer-service-heading p {
    font-size: 16px;
  }
  .footer-links {
    gap: 20px;
  }
  .footer-link-row .footer-nav-arrow {
    margin-left: 12px;
  }
  .footer-link-row span {
    font-size: 13px;
    white-space: nowrap;
  }
  /* ナビ2列グリッド */
  .footer-nav-col {
    width: 100%;
    border-top: 1px solid var(--border-color);
  }
  .footer-nav-col:last-child {
    border-left: 1px solid var(--border-color);
  }
  .footer-nav-item {
    padding: 16px 8px;
  }
  .footer-nav-item span {
    font-size: 16px;
  }
  /* ロゴエリア */
  .footer-left {
    order: 0;
    width: 100%;
    gap: 20px;
  }
  .footer-logo {
    font-size: 44px;
  }
  .footer-tagline {
    font-size: 13px;
    line-height: 1.6;
  }
  /* コピーライトバー */
  .footer-bar {
    border-radius: 0;
    padding: 24px 12px;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-bar span {
    font-size: 13px;
  }

  /* ===== Spacers ===== */
  .spacer-sm { height: 16px; }
  .spacer-md { height: 32px; }
  .spacer-lg { height: 44px; }

  /* ===== CTA Button ===== */
  .cta-button {
    max-width: 100%;
  }

  /* ===== インラインstyle上書き ===== */
  /* Mission h2 */
  .section-mission h2[style] {
    font-size: 26px !important;
    line-height: 1.4 !important;
  }
  /* Mission subtext */
  .section-mission p[style*="font-size:28px"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
  .section-mission p[style*="font-size:16px"] {
    font-size: 15px !important;
  }
  /* Our Vision large text */
  .section-our-vision p[style*="font-size:96px"],
  .vision-hero p[data-anim] {
    font-size: 52px !important;
    white-space: nowrap !important;
  }
  /* Research heading white-space */
  .research-right-text h3 span[style*="white-space:nowrap"] {
    white-space: normal !important;
  }
  /* Vision section wrapper padding */
  .vision-section-wrapper {
    padding: 60px 20px;
  }
  /* Solution section position fix */
  .section-solution {
    position: relative;
  }
}