/* =============================================================================
   PC 専用スタイル（1280px 以上でのみ読み込まれます）
   -----------------------------------------------------------------------------
   index.html: <link rel="stylesheet" href="styles-pc.css" media="(min-width: 1280px)">
   ・このファイルを編集しても、タブレット・スマホには一切適用されません。
   ・SP/タブレットは styles.css 内の @media (max-width: …) のみを編集してください。
   ============================================================================= */

/* 横スクロール・はみ出しで body/html の白が見えるのを防ぐ（1280px 以上のみ。他セクションの寸法トークンは変更しない） */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* PCのみ：GeeXPlus 風の “軽いポップ＋ふわ浮遊” */
.bubble-stage .problem__bubble--tl,
.bubble-stage .problem__bubble:not(.problem__bubble--tl),
.bubble-stage .solution__bubble {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  will-change: transform, opacity;
}

@keyframes pc-bubble-pop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pc-bubble-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.bubble-stage.is-visible .problem__bubble,
.bubble-stage.is-visible .solution__bubble {
  animation:
    pc-bubble-pop 520ms cubic-bezier(0.22, 1, 0.32, 1) both,
    pc-bubble-float 3.6s ease-in-out 560ms infinite;
}

.bubble-stage.is-visible .problem__bubble--tl {
  animation-delay: 0.06s, 0.62s;
}
.bubble-stage.is-visible .problem__bubble:nth-child(2) {
  animation-delay: 0.14s, 0.70s;
}
.bubble-stage.is-visible .problem__bubble:nth-child(3) {
  animation-delay: 0.22s, 0.78s;
}
.bubble-stage.is-visible .problem__bubble:nth-child(4) {
  animation-delay: 0.30s, 0.86s;
}

.bubble-stage.is-visible .solution__bubble:nth-child(1) {
  animation-delay: 0.08s, 0.64s;
}
.bubble-stage.is-visible .solution__bubble:nth-child(2) {
  animation-delay: 0.18s, 0.74s;
}
.bubble-stage.is-visible .solution__bubble:nth-child(3) {
  animation-delay: 0.28s, 0.84s;
}
.bubble-stage.is-visible .solution__bubble:nth-child(4) {
  animation-delay: 0.38s, 0.94s;
}

@media (prefers-reduced-motion: reduce) {
  .bubble-stage .problem__bubble--tl,
  .bubble-stage .problem__bubble:not(.problem__bubble--tl),
  .bubble-stage .solution__bubble {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .bubble-stage.is-visible .problem__bubble,
  .bubble-stage.is-visible .solution__bubble {
    animation: none !important;
  }
}

.problem__bubble-text,
.solution__bubble-text {
  display: contents;
}

.problem__bubble-line,
.solution__bubble-line {
  display: block;
}

.solution__bottom-text {
  display: block;
  font-size: 24px;
  font-weight: var(--weight-bold);
  line-height: 1.8;
  text-align: center;
  color: var(--color-dark);
}

.solution__bottom-line {
  display: block;
  white-space: normal;
}

/* ----- Hero ----- */
.hero {
  /* PC のみ: HERO〜MVV を詰める（margin は使わず padding で白帯を出さない） */
  padding: 160px 0 36px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  /* 横は html/body の overflow-x で抑え、ここでは clip しない（FV 内レイアウトの微妙なずれを防ぐ） */
  overflow: visible;
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  overflow: visible;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.hero__content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: left;
}

.hero__title {
  font-size: 48px;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  overflow: visible;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #23fb1f, #b7ff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* SP/タブ用の改行を PC では無効化し、2行目を1行に（1280px 未満では styles.css の通常表示） */
.hero__title-br--sp-only {
  display: none;
}

.hero__title-line--tail {
  white-space: nowrap;
}

.hero__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
}

.hero__tag {
  font-size: 30px;
  font-weight: var(--weight-bold);
  padding: 6px 14px;
  line-height: var(--leading-normal);
  margin-top: 0;
}

.hero__sub {
  font-size: 24px;
  margin-bottom: 40px;
  line-height: var(--leading-relaxed);
  position: relative;
  z-index: 3;
  max-width: none;
}

.hero__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__visual {
  flex-shrink: 0;
  width: 580px;
  height: auto;
  min-height: 0;
  padding-top: 140px;
  position: relative;
  z-index: 1;
  max-width: none;
}

.hero__img-stack {
  margin-top: 0;
}

.hero > .container {
  position: relative;
  margin-top: 0;
  /* flex 子の min-width:auto 由来の横はみ出しを抑える（max-width は共通 .container のまま） */
  min-width: 0;
  box-sizing: border-box;
}

/* .hero__scroll の位置は styles.css の @media (min-width: 1280px) に集約 */

.hero__scroll-text {
  font-size: 11px;
}

.hero__scroll-line {
  height: 40px;
}

/* ----- Problem ----- */
.problem__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  max-width: none;
  padding-bottom: 0;
}

.problem__illust-wrap {
  position: relative;
  z-index: 1;
  padding-top: 0;
  display: block;
}

.problem__illust {
  width: 300px;
  height: auto;
}

.problem__bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.problem__bubble {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: block;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1.6;
  padding: 16px 24px;
  border-radius: 16px;
  white-space: nowrap;
  overflow: visible;
  text-align: left;
  pointer-events: none;
}

.problem__bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  pointer-events: none;
}

.problem__bubble--tl {
  top: 15%;
  left: 24%;
  right: auto;
  bottom: auto;
  transform: none;
  width: auto;
  max-width: none;
}

.problem__bubble--tl::after {
  bottom: -6px;
  right: clamp(10px, 12%, 22px);
  left: auto;
  top: auto;
  border-width: 12px 9px 0 9px;
  border-color: var(--color-dark) transparent transparent transparent;
  transform: rotate(-26deg);
  transform-origin: 50% 100%;
}

.problem__bubble--tr {
  top: 15%;
  right: 24%;
  left: auto;
  bottom: auto;
  width: auto;
  max-width: none;
}

.problem__bubble--tr::after {
  bottom: -6px;
  left: clamp(10px, 12%, 22px);
  right: auto;
  top: auto;
  border-width: 12px 9px 0 9px;
  border-color: var(--color-dark) transparent transparent transparent;
  transform: rotate(26deg);
  transform-origin: 50% 100%;
}

.problem__bubble--bl {
  bottom: 23%;
  left: 21%;
  top: auto;
  right: auto;
  width: auto;
  max-width: none;
}

.problem__bubble--bl::after {
  top: -8px;
  right: clamp(12px, 14%, 26px);
  left: auto;
  bottom: auto;
  border-width: 0 9px 13px 9px;
  border-color: transparent transparent var(--color-dark) transparent;
  transform: rotate(32deg);
  transform-origin: 50% 100%;
}

.problem__bubble--br {
  bottom: 23%;
  right: 21%;
  top: auto;
  left: auto;
  width: auto;
  max-width: none;
}

.problem__bubble--br::after {
  top: -8px;
  left: clamp(12px, 14%, 26px);
  right: auto;
  bottom: auto;
  border-width: 0 9px 13px 9px;
  border-color: transparent transparent var(--color-dark) transparent;
  transform: rotate(-32deg);
  transform-origin: 50% 100%;
}

/* ----- Solution ----- */
.solution__highlight {
  /* デザイン通り：下線ではなく、背景で“重ねた”蛍光マーカー */
  background: linear-gradient(transparent 70%, #b7ff00 70%);
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: unset;
  background-clip: border-box;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.solution__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  max-width: none;
  padding: 0;
}

.solution__illust-wrap {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
}

.solution__illust {
  width: 320px;
  height: auto;
}

.solution__bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.solution__bubble {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: block;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1.6;
  padding: 16px 24px;
  border-radius: 16px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: visible;
  filter: none;
  isolation: auto;
  pointer-events: none;
}

.solution__bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  pointer-events: none;
}

.solution__bubble--tl {
  top: 15%;
  left: 18%;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: none;
}

.solution__bubble--tl::after {
  bottom: -6px;
  right: clamp(10px, 12%, 22px);
  left: auto;
  top: auto;
  border-width: 12px 9px 0 9px;
  border-color: var(--solution-bubble-bg) transparent transparent transparent;
  transform: rotate(-26deg);
  transform-origin: 50% 100%;
}

.solution__bubble--tr {
  top: 15%;
  right: 18%;
  left: auto;
  width: auto;
  max-width: none;
}

.solution__bubble--tr::after {
  bottom: -6px;
  left: clamp(10px, 12%, 22px);
  right: auto;
  top: auto;
  border-width: 12px 9px 0 9px;
  border-color: var(--solution-bubble-bg) transparent transparent transparent;
  transform: rotate(26deg);
  transform-origin: 50% 100%;
}

.solution__bubble--bl {
  bottom: 18%;
  left: 15%;
  top: auto;
  width: auto;
  max-width: none;
}

.solution__bubble--bl::after {
  top: -8px;
  right: clamp(12px, 14%, 26px);
  left: auto;
  bottom: auto;
  border-width: 0 9px 13px 9px;
  border-color: transparent transparent var(--solution-bubble-bg) transparent;
  transform: rotate(32deg);
  transform-origin: 50% 100%;
}

.solution__bubble--br {
  bottom: 18%;
  right: 15%;
  top: auto;
  left: auto;
  width: auto;
  max-width: none;
}

.solution__bubble--br::after {
  top: -8px;
  left: clamp(12px, 14%, 26px);
  right: auto;
  bottom: auto;
  border-width: 0 9px 13px 9px;
  border-color: transparent transparent var(--solution-bubble-bg) transparent;
  transform: rotate(-32deg);
  transform-origin: 50% 100%;
}

/* HERO〜MVV（1280px 以上のみ）。負の margin を打ち消し、padding だけで余白（body の白が出ない） */
.mvv {
  margin-top: 0;
  padding-top: clamp(0.875rem, 1.5vh, 1.5rem);
}

/* Mission/Vision キャッチ：36px・バッジ内は改行しない（SP は styles.css の clamp のまま） */
.mvv__block--mission .mvv__highlight-text,
.mvv__block--mission .mvv__highlight,
.mvv__block--vision .mvv__highlight-text,
.mvv__block--vision .mvv__highlight {
  font-size: 36px;
}

/* 見出しと Mission の距離は padding のみ（負の margin でセクション上辺が HERO 側にはみ出さない） */
.mvv__block--mission {
  margin-top: 0;
  padding-top: clamp(1.5rem, 2.2vw, 2.75rem);
}

/* VALUES の下（チャコール余白）を約90px相当に拡張（PCのみ） */
.mvv__block--values {
  padding-bottom: clamp(5.5rem, 9vw, 9.5rem);
}

/* VALUES の丸が下まで詰まり気味なので、PC のみグリッドを少し上へ */
.mvv__block--values .mvv__values-grid {
  top: calc(var(--mvv-watermark-y) - var(--mvv-block-lift) + clamp(3.5rem, 8vw, 6.25rem));
}

/* 1280〜1439px: 1440px 基準の固定値を線形で縮小（1440px 以上ではこのブロックは適用されない） */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero__inner {
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  }

  .hero__visual {
    /* 1280px で約 500px、1440px で 580px に近づく */
    width: min(580px, calc(500px + (100vw - 1280px) * 0.5));
    max-width: min(580px, 52%);
    flex-shrink: 1;
    padding-top: min(
      8.75rem,
      calc(6.875rem + (100vw - 1280px) * 0.1875)
    );
  }

  .hero__title {
    font-size: min(3rem, calc(2.25rem + (100vw - 1280px) * 0.075));
  }

  .hero__tag {
    font-size: min(1.875rem, calc(1.625rem + (100vw - 1280px) * 0.025));
  }

  .hero__sub {
    font-size: min(1.5rem, calc(1.3125rem + (100vw - 1280px) * 0.01875));
  }
}

/* 1441px 以上: ヒーローは FV 単体のまま 100vh 系を維持（min-height を外すと MVV が同一画面に入りやすい） */
@media (min-width: 1441px) {
  /* Values: clamp(620px, 52vw, 880) が 1440〜約1692px の間で 52vw 分だけ縦に伸びていた → 1440 幅相当で頭打ち */
  .mvv__block--values {
    min-height: clamp(620px, min(52vw, calc(0.52 * 1440px)), 880px);
  }
}