/* ============================================================
   TOP（index.html）専用
   Figma: TOP（86:1521）／ TOP #SP（413:2443）
   ============================================================ */

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 816px;
  overflow: hidden;
  background: var(--lightblue);
}
.hero__shapes {
  position: absolute;
  top: 0;
  right: max(0px, calc((100% - var(--container)) / 2));
  width: 778px;
  height: 816px;
  max-width: none;
}
.hero__shapes--sp { display: none; aspect-ratio: 393 / 445; }

/* FV のマーク：形は崩さず、下から「生えてくる」ように現れる
   下端から上へ徐々に見えていく（clip-path）＋ 少し伸び上がる ＋ わずかにひねりが戻る。着地後はゆっくり漂う */
.hero { perspective: 1400px; }
.hero__shapes { transform-origin: 50% 100%; animation: hero-grow 2.4s cubic-bezier(.3, .55, .25, 1) both; will-change: transform, clip-path; }
.hero__mark { animation: hero-drift 14s ease-in-out 2.4s infinite alternate; }
.hero__shapes--pc .hero__mark { transform-origin: 420px 420px; transform-box: view-box; }
.hero__shapes--sp .hero__mark { transform-origin: 210px 110px; transform-box: view-box; }
@keyframes hero-grow {
  from { clip-path: inset(100% 0 0 0); transform: translate3d(-30px, 110px, 0) rotateY(-60deg) rotate(-10deg) scale(.92); }
  55%  { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes hero-drift {
  from { transform: none; }
  to   { transform: translateY(-10px) rotate(2.5deg); }
}
.hero__title { animation: rise-in .8s var(--ease-out) 1.15s both; }
.hero__lead  { animation: rise-in .8s var(--ease-out) 1.3s both; }
.hero__tags  { animation: rise-in .8s var(--ease-out) 1.45s both; }
.hero__cta   { animation: rise-in .8s var(--ease-out) 1.6s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__shapes, .hero__mark, .hero__title, .hero__lead, .hero__tags, .hero__cta { animation: none; }
}
.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 150px) var(--gutter) 0 93px;
}
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.hero__lead { margin-top: 16px; max-width: 708px; color: var(--ink); }
.hero__tags { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 36px; max-width: 732px; }
.hero__tags li {
  background: #fff;
  color: var(--accent);
  font-family: var(--ff-noto);
  padding: 12px 24px;
  border-radius: 0 16px 16px 16px;
}
.hero__cta { display: flex; gap: 17px; margin-top: 50px; }

/* ---------- clients ---------- */
.clients {
  background: var(--paleblue);
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow: hidden;
}
.clients__title { font-size: 20px; font-weight: 700; color: #333; }
.clients__viewport { width: 100%; overflow: hidden; }
.clients__track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.clients__track img { width: 160px; height: 160px; object-fit: contain; border-radius: 6.4px; }
@keyframes marquee { to { transform: translateX(calc(-50% - 20px)); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }

/* ---------- issue ---------- */
.issue { padding: 56px var(--gutter) 75px; }
.issue__inner { max-width: 1040px; margin: 0 auto; }
.issue .sec-head__en { font-family: var(--ff-noto); }
.issue__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
  margin-top: 40px;
}
.bubble { display: flex; flex-direction: column; align-items: flex-end; }
.bubble__body {
  width: calc(100% - 28px);
  min-height: 180px;
  background: var(--mainblue);
  color: #fff;
  border-radius: 24px 24px 24px 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.bubble__title {
  font-family: var(--ff-noto);
  font-weight: 700;
  font-size: var(--fs-h3);
  padding-bottom: 4px;
  background: linear-gradient(to right, #fff 50%, transparent 50%) left bottom / 22px 1px repeat-x;
}
.bubble__text { font-size: var(--fs-body); }
.bubble__tail { align-self: flex-start; width: 29px; height: 29px; border-radius: 50%; background: var(--mainblue); }

.real-problem {
  margin: 140px auto 0;
  max-width: 693px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}
.real-problem__en { font-family: var(--ff-noto); color: var(--mainblue); font-size: var(--fs-en); }
.real-problem__pre { font-size: var(--fs-h3); font-weight: 700; }
.real-problem__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.48; }
.real-problem__line { width: 564px; height: 5px; }

/* ---------- solve (members) ---------- */
.solve {
  position: relative;
  background: var(--mainblue);
  color: #fff;
  overflow: hidden;
  padding: 167px var(--gutter) 57px;
}
.solve__top { position: absolute; top: -29px; left: 0; width: 100%; height: 158px; max-width: none; }
.solve__top--sp { display: none; }
.solve__wave {
  position: absolute;
  top: 414px;
  left: 50%;
  width: 2531px;
  height: 309px;
  max-width: none;
  transform: translateX(calc(-50% - 237.5px));
}
.solve__head { position: relative; max-width: 625px; margin: 0 auto; text-align: center; }
.solve__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.42; }
.solve__lead { margin-top: 16px; font-size: var(--fs-body); }
.solve__body {
  position: relative;
  max-width: 992px;
  margin: 160px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}
.members { display: flex; justify-content: space-between; gap: 64px; width: 100%; }
.member { width: 288px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.member__photo { width: 264px; height: 264px; border-radius: 50%; object-fit: cover; }
.member__text { display: flex; flex-direction: column; gap: 16px; }
.member__name { font-size: var(--fs-h3); }
.member__desc { font-size: var(--fs-body); }

/* ---------- outputs (steps) ---------- */
.outputs { background: var(--mainblue); color: #fff; padding: 96px var(--gutter) 97px; }
.outputs__head { max-width: 960px; margin: 0 auto; }
.outputs__head .sec-head__en { font-family: var(--ff-zen); }
.outputs__head .sec-head__body { gap: 12px; }
.steps {
  max-width: 1326px;
  margin: 58px auto 0;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(4, 304px);
  justify-content: space-between;
  gap: 24px;
}
.step {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--darktext);
}
.step__illus { width: 272px; height: 159px; border-radius: 13px; background: var(--illus-bg); }
.step__head { display: flex; flex-direction: column; gap: 14px; }
.step__num { font-size: 32px; line-height: 26px; color: var(--step-num); }
.step__title { font-size: 20px; font-weight: 700; line-height: 1.35; }
.step__list { display: flex; flex-direction: column; gap: 6px; }
.step__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
}
.step__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mainblue);
}
.outputs__more { margin-top: 145px; text-align: center; }
.outputs__more .btn { font-family: var(--ff-zen); }

/* ---------- cases / knowledge ---------- */
.cases { padding: 106px var(--gutter) 97px; }
.knowledge { padding: 32px var(--gutter) 140px; }
.cases__inner,
.knowledge__inner { max-width: var(--content); margin: 0 auto; }
.cases .card-list { margin-top: 45px; }
.knowledge .card-list { margin-top: 56px; }

/* ============================================================
   tablet
   ============================================================ */
@media (max-width: 1360px) {
  .steps { grid-template-columns: repeat(2, 304px); justify-content: center; }
  .hero__shapes { right: -200px; }
}
@media (max-width: 1100px) {
  .hero__inner { padding-left: 40px; }
  .hero__shapes { right: -480px; }
  .members { gap: 24px; }
  .member__photo { width: 220px; height: 220px; }
}

/* ============================================================
   SP（Figma: TOP #SP 393px）
   ============================================================ */
@media (max-width: 767px) {
  /* hero */
  .hero { height: auto; padding-bottom: 60px; }
  .hero__shapes--pc { display: none; }
  .hero__shapes--sp { display: block; top: 0; left: 0; right: auto; width: 100%; height: auto; }
  .hero__inner { padding: 317px var(--gutter) 0 20px; }
  .hero__title { font-size: var(--fs-h1); line-height: 1.42; color: var(--darktext); }
  .hero__lead { margin-top: 20px; font-size: 12px; font-weight: 400; line-height: var(--lh-tight); color: var(--darktext); }
  .hero__tags { margin-top: 20px; max-width: 266px; }
  .hero__tags li { font-size: 13px; padding: 8px 12px; }
  .hero__cta { flex-direction: column-reverse; align-items: stretch; gap: 20px; width: 240px; margin-top: 40px; }
  .hero__cta .btn--primary { align-self: flex-start; }

  /* clients */
  .clients { padding: 34px 0 30px; gap: 16px; }
  .clients .btn { background: var(--btn-sub); color: var(--cta); }

  /* issue */
  .issue { padding: 32px var(--gutter) 60px; }
  .issue .sec-head__en { font-family: var(--ff-zen); }
  .issue__grid { grid-template-columns: 1fr; gap: 16px; max-width: 302px; margin: 40px auto 0; }
  .bubble__body { width: 280px; min-height: 0; gap: 12px; }
  .bubble__title { font-family: var(--ff-zen); }
  .bubble__tail { width: 20px; height: 20px; }
  .real-problem { margin-top: 48px; gap: 8px; max-width: 320px; }
  .real-problem__en { font-family: var(--ff-zen); font-weight: 700; }
  .real-problem__pre,
  .real-problem__title { font-size: 20px; line-height: var(--lh); }
  .real-problem__pre { margin-bottom: -8px; }
  .real-problem__line { width: 269px; }

  /* solve */
  .solve { padding: 127px 37px 48px; }
  .solve__top--pc,
  .solve__wave { display: none; }
  .solve__top--sp { display: block; top: 0; left: 50%; width: 781px; height: 97px; transform: translateX(-50%); }
  .solve__title { font-size: 24px; font-weight: 500; line-height: var(--lh); }
  .solve__lead { margin-top: 12px; font-weight: 400; line-height: var(--lh-tight); }
  .solve__body { margin-top: 32px; align-items: center; gap: 24px; }
  .members { flex-direction: column; gap: 16px; }
  .member {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 12px;
    border-radius: var(--radius-card);
    background: var(--lightblue);
    color: var(--darktext);
    text-align: left;
  }
  .member__photo { width: 120px; height: 120px; flex: none; }
  .member__text { gap: 8px; }

  /* outputs */
  .outputs { padding: 24px var(--gutter) 48px; }
  .outputs__head .sec-head__en { font-weight: 700; }
  .steps { grid-template-columns: 1fr; gap: 12px; margin-top: 23px; }
  .step__head { order: -1; flex-direction: row; align-items: center; gap: 12px; }
  .step__num { line-height: var(--lh); }
  .step__title { font-size: 18px; }
  .step__title br { display: none; }
  .step__illus { width: 100%; aspect-ratio: 272 / 159; }
  .outputs__more { margin-top: 32px; }

  /* cases / knowledge */
  .cases,
  .knowledge { padding: 40px var(--gutter); }
  .cases .card-list,
  .knowledge .card-list { margin-top: 24px; }
}