/* YouSpark LP — 実サイト忠実再現・フロー型 v2
   モデル: フォント=固定px（実測値）／横ジオメトリ=ビューポート比例(%)／縦=コンテンツフロー＋固定pxマージン
   （実サイトの実測挙動: 幅1000→6847px・1440→7190px・1920→7940px と再フローする） */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root { --green: #016938; }

body {
  background: #fff;
  font-family: 'Zen Maru Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #211715;
}

.page { position: relative; width: 100%; overflow: hidden; }

section { position: relative; width: 100%; }

img { display: block; }

/* セクション見出し */
.h-sec {
  font-weight: 700; font-size: 28px; line-height: 1.4;
  text-align: center; white-space: nowrap;
}
.dots { display: block; margin-left: auto; margin-right: auto; height: auto; }

/* 本文（実測: 15px・字送り0.18em・行送り28.5px） */
.body-txt { font-size: 18px; line-height: 1.58; letter-spacing: 0; }

/* 項目タイトル（緑） */
.t-green { font-weight: 700; font-size: 21px; line-height: 1.5; color: var(--green); white-space: nowrap; }

/* ===== ヒーロー ===== */
.sec-hero { background: #FFF5DF; padding: 4.17% 0 80px; }
.hero-logo { position: absolute; left: 2.78%; top: 25px; width: 15%; max-width: 216px; z-index: 3; }
.hero-img { width: 100%; }
.hero-cta { display: flex; justify-content: center; gap: 7.01%; margin-top: 12px; }
.hero-cta a { width: 35.76%; }
.hero-cta img { width: 100%; }

/* ===== YouSparkって？ ===== */
.sec-about { background: #FFFBF1; padding: 81px 0 76px; }
.about-head { position: relative; height: 161px; }
.about-head .yslogo { position: absolute; left: 37.15%; top: 0; width: 19.86%; }
.about-head .tte { position: absolute; left: 57.15%; top: 69px; font-weight: 700; font-size: 26px; white-space: nowrap; }
.about-headline {
  margin-top: 0; font-weight: 700; font-size: 32px; line-height: 1.47;
  text-align: center; white-space: nowrap;
}
.about-row { display: flex; margin-top: 75px; }
.about-col { margin-left: 10.42%; flex: 0 0 auto; }
.about-body { margin-top: 41px; font-size: 18px; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.about-photo {
  margin-left: auto; width: 45.56%; aspect-ratio: 1625 / 1125;
  border-radius: 20px 0 0 20px; overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.greenbox {
  margin-top: 55px; margin-left: -6px; width: 365px; height: 100px;
  border: 1px solid var(--green); border-radius: 14px;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 28px;
  font-size: 14px; line-height: 1.79; letter-spacing: 0;
  white-space: nowrap;
}

/* ===== こんな大学生 ===== */
.sec-students { background: #FFF5DF; padding: 104px 0 110px; }
.stu-strip { position: absolute; top: 61px; width: 9.8%; height: auto; }
.stu-strip.left { left: 0; }
.stu-strip.right { right: 0; }
.stu-cols { position: relative; margin-top: 11px; }
.stu-pill { position: absolute; top: 0; }
.stu-pill img { width: 100%; }
.stu-list { font-size: 18px; line-height: 1.58; letter-spacing: 0; white-space: nowrap; }

/* ===== 提供していること ===== */
.sv-carwrap { display: contents; }
.sec-services { background: #FFFBF1; padding: 40px 0 186px; }
.sv-block { display: flex; align-items: flex-start; }
.sv-text { position: relative; flex: 0 0 auto; width: 34%; }
.sv-num { position: absolute; top: 0; width: 15%; }
.sv-num img { width: 100%; }
.sv-title-wrap { padding-left: 8.1%; padding-top: 6px; position: relative; z-index: 1; }
.sv-note { font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--green); white-space: nowrap; margin-top: 4px; }
.sv-body { margin-top: 21px; }
.sv-photos { display: flex; gap: 3.24%; }
.sv-photos .ph {
  width: 31.2%; aspect-ratio: 236 / 174; border-radius: 10px; overflow: hidden; flex: 0 0 auto;
}
.sv-photos .ph img { width: 100%; height: 100%; object-fit: cover; }

/* ===== メンバーの特徴 ===== */
.sec-features { background: #FFFBF1; padding: 55px 0 113px; z-index: 2; }
.feat-blob { position: absolute; left: 0; top: -52px; width: 100%; height: 642px; z-index: 0; pointer-events: none; }
.feat-inner { position: relative; z-index: 1; }
.feat-cols { position: relative; margin-top: 73px; }
.feat-col { position: relative; min-width: 250px; }
.feat-num { position: absolute; left: 0; top: 0; }
.feat-num img { width: 100%; }
.feat-title { font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--green); white-space: nowrap; }
.feat-body { font-size: 18px; line-height: 1.58; letter-spacing: 0; margin-top: 22px; }

/* ===== 活動チーム（カルーセル） ===== */
.sec-teams .h-sec, .sec-teams .dots { position: relative; z-index: 3; }
.sec-jisseki .h-sec, .sec-jisseki .dots, .jk-lead, .jk-row { position: relative; z-index: 3; }
.sec-teams { background: #FFFBF1; padding: 130px 0 62px; }
.car-viewport { position: relative; z-index: 3; width: 100%; overflow: hidden; margin-top: 83px; }
.car-track {
  display: flex; gap: 21px; align-items: stretch;
  transition: transform 0.45s ease; will-change: transform;
}
.car-track.no-anim { transition: none; }
.team-card {
  flex: 0 0 auto; width: 28.96%;
  background: #FFF5DF; border-radius: 20px;
  display: flex; flex-direction: column;
  padding: 1.67vw 3.96vw 50px;
}
.team-card .tc-photo {
  width: 100%; aspect-ratio: 303 / 199;
  border-radius: 14px; overflow: hidden;
}
.team-card .tc-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 {
  margin-top: 18px; font-weight: 700; font-size: 24px; line-height: 1.4;
  text-align: center;
}
.team-card .tc-body { margin-top: 17px; font-size: 14px; line-height: 1.57; }
.team-card .tc-btns {
  margin-top: auto; padding-top: 16px;
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
}
.team-card .tc-btns img { height: 2.57vw; width: auto; }

.car-arrow {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #E8A33D; background: #FFFBF1;
  cursor: pointer; padding: 0; z-index: 5;
}
.car-arrow::after {
  content: ""; position: absolute; top: 15px; width: 12px; height: 12px;
  border-top: 2px solid #E8A33D; border-right: 2px solid #E8A33D;
}
.car-arrow.left  { left: 2.43%; }
.car-arrow.right { right: 2.43%; }
.car-arrow.left::after  { left: 17px; transform: rotate(-135deg); }
.car-arrow.right::after { left: 12px; transform: rotate(45deg); }

/* ===== 実績 ===== */
.sec-jisseki { background: #FFF5DF; padding: 40px 0 58px; }
.jk-lead { margin: 26px auto 0; width: 50%; font-size: 18px; line-height: 1.58; letter-spacing: 0; text-align: center; }
.jk-row { display: flex; justify-content: center; gap: 25px; margin-top: 71px; align-items: stretch; }
.jk-card {
  flex: 0 0 auto; width: 25.97%;
  border: 2px solid #FFBA39; border-radius: 12px; background: #FFF5DF;
  padding: 1.53vw 2.71vw 60px;
}
.jk-card .jk-photo { width: 100%; aspect-ratio: 295 / 168; overflow: hidden; }
.jk-card .jk-photo img { width: 100%; height: 100%; object-fit: cover; }
.jk-card h3 { margin-top: 9px; font-weight: 700; font-size: 24px; line-height: 1.5; text-align: center; }
.jk-card .jk-loc { font-size: 12px; line-height: 1.7; text-align: right; }
.jk-card .jk-body { margin-top: 16px; font-size: 14px; line-height: 1.5; letter-spacing: 0; }

/* ===== 参加者の声 ===== */
.sec-voices { background: #FFF5DF; padding: 28px 0 72px; }
.voice-blob { position: absolute; left: 0; top: -43px; bottom: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; }
.voice-inner { position: relative; z-index: 1; }
.voice-composite { display: block; margin: 75px 0 0 10%; width: 79.93%; }

/* ===== フッター ===== */
.sec-footer { background: var(--green); height: 276px; }
.ft-logo { position: absolute; left: 2.78%; top: 80px; width: 17.6%; }
.ft-cta { position: absolute; top: 56px; width: 33.9%; }
.ft-cta img { width: 100%; }
.ft-copy { position: absolute; left: 7.43%; top: 228px; color: #fff; font-size: 12px; }
.footer-links { position: absolute; right: 7.5%; top: 226px; white-space: nowrap; }
.footer-links a { color: #fff; font-size: 12px; text-decoration: underline; margin-left: 24px; }


/* ===================================================================
   SP（スマホ）レイアウト — 実測: ブレークポイント≈550px・SP基準幅480px
   480未満は実サイト同様に固定480でオーバーフロー（min-width）
   =================================================================== */
.sp-only { display: none; }

@media (max-width: 549px) {
  .pc-only { display: none !important; }
  .sp-only { display: block; }
  .page { min-width: 480px; }

  /* --- 見出し（実測: グリフ22px級→24px） --- */
  .h-sec { font-size: 24px; }

  /* --- ヒーロー --- */
  .sec-hero { padding: 5% 0 0; }
  .hero-logo { width: 32%; top: 12px; }
  .hero-img, .hero-cta { display: none; }
  .sp-hero { width: 100%; margin-top: 2%; }
  .sp-cta { width: 92%; margin: 20px auto 0; }
  .sp-cta a { display: block; }
  .sp-cta a + a { margin-top: 30px; }
  .sp-cta img { width: 100%; }
  .sp-heroband { width: 100%; margin-top: 20px; }

  /* --- YouSparkって？ --- */
  .sec-about { padding: 48px 0 0; }
  .about-head { height: 92px; }
  .about-head .yslogo { left: 21%; top: -48px; width: 52.1%; }
  .about-head .tte { left: 53%; top: -4px; font-size: 20px; }
  .about-headline { font-size: 20px; line-height: 1.6; }
  .about-headline { font-size: 20px; line-height: 1.4; white-space: normal; }
  .about-headline p { line-height: 1.4; margin-top: 0; }
  .about-row { display: block; margin-top: 43px; }
  .about-col { margin-left: 0; }
  .sp-about-body { font-size: 13px; line-height: 1.5; text-align: center; white-space: normal; }
  .about-photo { width: 100%; margin: 10px auto 0; aspect-ratio: 780 / 402; border-radius: 0; }
  .greenbox { margin: 21px auto 0; width: 72%; height: 98px; padding-left: 0; align-items: center; text-align: center; font-size: 12px; }

  /* --- こんな大学生 --- */
  .sec-students { padding: 40px 0 0; }
  .stu-strip, .stu-cols { display: none; }
  .sp-students { display: flex; flex-direction: column; width: 96%; margin: 0 auto; }
  .sp-charband { order: 5; }
  .sp-charband { width: 100%; margin-top: 92px; }
  .sp-pill { width: 45%; margin: 6px 0 20px; }
  .sp-students .stu-list + .sp-pill { margin-top: -9px; }
  .sp-pill img { width: 100%; }
  .sp-students .stu-list { font-size: 15px; line-height: 1.7; white-space: nowrap; }

  /* --- 提供していること --- */
  .sec-services { padding: 40px 0 78px; }
  .sec-services > .dots { margin-top: 10px !important; }
  .sv-block { display: flex; flex-direction: column; margin-top: 28px !important; }
  .sv-block + .sv-block { margin-top: 72px !important; }
  .sv-text { order: 1; width: 79.2% !important; margin: 0 auto !important; }
  .sv-num { width: 10%; }
  .sv-title-wrap { padding-left: 9%; }
  .t-green { font-size: 17px; white-space: normal; }
  .sv-note { font-size: 13px; }
  .body-txt { font-size: 15px; line-height: 1.5; }
  .sv-body { margin-top: 20px; }
  .sv-carwrap { display: block; order: 2; position: relative; overflow: hidden; margin-top: 68px; }
  .sv-photos { width: auto !important; margin: 0 !important; gap: 16px;
    transition: transform 0.4s ease; will-change: transform; }
  .sv-photos .ph { width: 72.5%; border-radius: 8px !important; }
  .sv-car-arrow { display: block; top: 50%; transform: translateY(-50%); }
  .sv-car-arrow.left { left: 3%; }
  .sv-car-arrow.right { right: 3%; }

  /* --- メンバーの特徴 --- */
  .sec-features { padding: 63px 0 58px; }
  .sp-blob { position: absolute; left: 0; top: -40px; width: 100%; height: 769px; z-index: 0; pointer-events: none; }
  .feat-cols { display: block !important; min-height: 0 !important; margin-top: 57px; }
  .feat-col { margin: 26px auto 0 !important; width: 84% !important; min-width: 0; }
  .feat-col + .feat-col { margin-top: 86px !important; }
  .feat-num { width: 12% !important; }
  .feat-title { padding-left: 16% !important; padding-top: 4px !important; font-size: 17px; }
  .feat-body { margin-top: 14px !important; font-size: 15px; line-height: 1.7; }

  /* --- 活動チーム（1枚センター） --- */
  .sec-teams { padding: 70px 0 15px; }
  .car-viewport { margin-top: 47px; }
  .team-card { width: 82.5%; padding: 4% 4% 30px; }
  .team-card h3 { font-size: 20px; margin-top: 14px; }
  .team-card .tc-body { font-size: 13px; }
  .team-card .tc-btns img { height: 30px; }
  .car-arrow { width: 38px; height: 38px; }
  .car-arrow::after { top: 12px; width: 10px; height: 10px; }

  /* --- 実績（1枚センター） --- */
  .sec-jisseki { padding: 32px 0 225px; overflow: hidden; }
  .jk-lead { width: 88%; font-size: 15px; }
  .jk-row { display: flex; justify-content: flex-start; align-items: flex-start; gap: 20px; margin-top: 40px; transition: transform 0.4s ease; will-change: transform; }
  .jk-row.no-anim { transition: none; }
  .jk-card { flex: 0 0 auto; width: 90%; margin: 0; padding: 2.5% 6.6% 90px; border-width: 3px; }
  .jk-card + .jk-card { margin-top: 0; }
  .jk-card .jk-photo { aspect-ratio: auto; }
  .jk-card .jk-photo img { height: auto; }
  .jk-card h3 { font-size: 24px; margin-top: 38px; }
  .jk-card .jk-loc { font-size: 12px; }
  .jk-card .jk-body { font-size: 14px; }
  .jk-arrow { display: block; top: 0; }
  .jk-arrow.left { left: 0; }
  .jk-arrow.right { right: 0; }

  /* --- 参加者の声 --- */
  .sec-voices { padding: 20px 0 32px; background: #FFFBF1; }
  .sec-voices .h-sec { position: absolute; top: -90px; left: 0; right: 0; margin: 0; z-index: 2; }
  .sec-voices .dots { position: absolute; top: -49px; left: 50%; transform: translateX(-50%); margin: 0 !important; z-index: 2; }
  .voice-blob { top: -35.6vw; height: 57.5vw; bottom: auto; }
  .sec-voices .dots { margin-top: 5px !important; }
  .sp-voices { width: 92%; margin: 0 auto; }
  .sp-voices img { width: 100%; }
  .sp-voices img + img { margin-top: 44px; }

  /* --- フッター（縦積み・実測559px） --- */
  .sec-footer { height: 559px; }
  .ft-logo, .ft-cta, .ft-copy, .footer-links { display: none; }
  .sp-footer { display: flex; flex-direction: column; padding-top: 10px; }
  .sp-footer > a:first-child { order: 3; margin-top: 58px; }
  .sp-footer > a:nth-child(2) { order: 1; }
  .sp-footer > a:nth-child(3) { order: 2; margin-top: 38px; }
  .sp-ft-logo { width: 52.5%; margin: 0 auto; }
  .sp-ft-cta { width: 88%; margin: 10px auto 0; }
  .sp-ft-links { order: 4; text-align: left; margin: 24px 0 0 36px; }
  .sp-ft-links a { display: block; color: #fff; font-size: 12px; line-height: 2; text-decoration: underline; margin: 0; }
  .sp-ft-copy { order: 5; text-align: left; color: #fff; font-size: 12px; margin: 29px 0 0 36px; }
}