@charset "UTF-8";
/* =========================================================
   トップページ
   PCの数値はFigma「トップ」（1440px幅）の座標を 1/10 にした rem 値。
   各セクションは前後のセクションと波形の分だけ重なっている（margin-top のマイナス値）。
   ========================================================= */

/* ---------- 共通 ---------- */
.p-topKv,
.p-topConcept,
.p-topMv,
.p-topSchool,
.p-topDaily,
.p-topInfo,
.p-topNews,
.p-topRecruit,
.p-topAbout {
  position: relative;
}

.p-topKv,
.p-topMv,
.p-topInfo,
.p-topRecruit { z-index: 2; }

.p-topConcept,
.p-topSchool,
.p-topDaily,
.p-topNews,
.p-topAbout { z-index: 1; }

[class^="p-top"][class$="__inner"] { position: relative; }

.p-topKv__inner,
.p-topConcept__inner,
.p-topSchool__inner,
.p-topDaily__inner,
.p-topInfo__inner,
.p-topRecruit__inner { z-index: 1; }

[class*="__chara"],
[class*="__blob"] {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* KVの写真の切り替え：新しい写真を前の写真の上でフェードインさせる（重なり順は写真の枠の中だけ） */
.p-topKv__photo { isolation: isolate; }

.p-topKv__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.p-topKv__slide.is-active { z-index: 2; opacity: 1; }
.p-topKv__slide.is-prev { z-index: 1; opacity: 1; transition: none; }

/* 切り替わるまでゆっくりズームする。長さは表示2.5s（js/top.js）＋クロスフェード0.8sで、次の写真に隠れきるまで動かし続ける */
@keyframes p-topKv-zoom {
  to { transform: scale(1.05); }
}

@media (prefers-reduced-motion: no-preference) {
  .p-topKv__photo:is([data-hero-reveal-state="playing"], [data-hero-reveal-state="done"]) :is(.is-active, .is-prev) img {
    animation: p-topKv-zoom 3.3s linear forwards;
    will-change: transform;
  }

  .p-topKv__photo.is-paused:is([data-hero-reveal-state="playing"], [data-hero-reveal-state="done"]) :is(.is-active, .is-prev) img {
    animation-play-state: paused;
  }
}

/* =========================================================
   PC
   ========================================================= */
@media (min-width: 1024px) {
  .p-topKv__inner,
  .p-topConcept__inner,
  .p-topSchool__inner,
  .p-topDaily__inner,
  .p-topInfo__inner,
  .p-topRecruit__inner {
    width: 144rem;
    height: 100%;
    margin: 0 auto;
  }

  /* ---------- KV ---------- */
  /* 写真を多く見せるため、見出し画像は50rem（最大500px）に抑え、クリーム色の領域も見出しに合わせて詰めている（Figmaより小さい）。
     --kv-shift：見出し画像の上から約13remが最初の画面に入るよう、波から下を上下させる量。見出しの下側は画面の外に出てよい。
     低い画面でも波の頂上まで写真を約21rem残し、高い画面では写真の高さを超えて伸ばさない。
     ヘッダーの高さ（--header-h、当初10.2rem）を差し引いて計算するので、ヘッダーを縮めた分は写真が伸びる */
  .p-topKv {
    --kv-shift: clamp(-25.2rem, calc(100svh - 66.7rem - var(--header-h)), max(36.9rem, calc(70.18vw - 83.1rem)));
    height: calc(141.4rem + var(--kv-shift));
  }

  .p-topKv__inner { top: var(--kv-shift); }

  .p-topKv__photo {
    position: absolute;
    inset: 0 0 auto;
    height: calc(83.1rem + var(--kv-shift));
    overflow: hidden;
  }

  /* 枠の高さが変わっても、顔が波に隠れない範囲を切り出す。
     写真は元写真の範囲だけなので、枠が写真より縦長の画面では高さに合わせて拡大される */
  .p-topKv__photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: max(var(--kv-photo-w, 100%), 100%);
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* 1〜3枚目は Figma「修正指示」7058:976 のとおり、元写真（3:2）を切らずに枠いっぱいまで引いて見せる（2026-11-08 ユーザー指示「最大限引いて」）。
     枠が3:2より縦長なら左右、横長なら上下だけが切れる。Figmaでは1・2枚目は上端揃え、3枚目は上を65px切って顔を波より上に出している。
     左右の位置は、縦長の画面で左右が大きく切れても子どもが入るところ（3枚目は左右の2人が入るように） */
  .p-topKv__slide--1 img { object-position: 30% 0%; }
  .p-topKv__slide--2 img { object-position: 50% 0%; }
  .p-topKv__slide--3 img { object-position: 60% 100%; }
  .p-topKv__slide--4 img { object-position: 50% 65%; }
  .p-topKv__slide--5 img { object-position: 50% 40%; }
  .p-topKv__slide--6 img { object-position: 50% 90%; }

  /* --wave-w は波の本体の幅。1440pxより広い画面では右端まで届くよう横に伸ばす（1440pxではFigmaと同じ172.3rem）。
     SVGは左へ同じ幅だけ続きを描いてあり、広い画面でも左端まで届く */
  .p-topKv__wave {
    --wave-w: max(172.3rem, calc(53.15% + 95.77rem));
    position: absolute;
    top: calc(46.2rem + var(--kv-shift));
    left: calc(50% - 90.1rem - var(--wave-w));
    width: calc(var(--wave-w) * 2);
    height: 67.744rem;
    max-width: none;
  }

  .p-topKv__cream {
    position: absolute;
    top: calc(82.1rem + var(--kv-shift));
    left: 0;
    right: 0;
    height: 46rem;
    background: var(--c-cream);
  }

  .p-topKv__bottom {
    position: absolute;
    top: calc(126rem + var(--kv-shift));
    left: 0;
    height: 15.4rem;
    fill: var(--c-cream);
    transform: rotate(180deg);
  }

  .p-topKv__body {
    position: absolute;
    top: 53.7rem;
    left: 15.4rem;
    width: 86rem;
  }

  .p-topKv__title {
    width: 50rem;
    margin-left: -3.83rem;
  }

  .p-topKv__title img { width: 100%; }

  .p-topKv__text {
    margin-top: 5.7rem;
    font-size: max(2rem, 14px);
    line-height: 2;
  }

  .p-topKv__text p + p { margin-top: 2em; }

  .p-topKv__link {
    margin-top: 6.5rem;
    margin-left: .85rem;
  }

  .p-topKv__chara--green { top: 77.3rem; left: 92.3rem; width: 25.3rem; }
  .p-topKv__chara--blue { top: 96rem; left: 119.6rem; width: 30.3rem; }
  .p-topKv__chara--yellow { top: 113.7rem; left: 96.8rem; width: 25.2rem; }

  /* ---------- 子どもたちの可能性を解放する ---------- */
  .p-topConcept {
    /* 1440pxより広い画面では、写真の右端が画面の右端に届くよう、広がった分だけ写真を大きくする */
    --concept-extend: max(0px, (100vw - 144rem) / 2);
    height: 143.7rem;
    margin-top: -15.4rem;
    background: var(--c-ivory);
  }

  .p-topConcept__photos {
    position: absolute;
    top: -36.3rem;
    left: 77.6rem;
    width: calc(80.8rem + var(--concept-extend));
    height: 192.6rem;
    /* 左端の波形は伸ばさずにそのままの形で使い、右側は伸ばした分まで塗りつぶす */
    -webkit-mask-size: 80.8rem 100%, calc(100% - 20rem) 100%;
    mask-size: 80.8rem 100%, calc(100% - 20rem) 100%;
    -webkit-mask-position: 0 0, 100% 0;
    mask-position: 0 0, 100% 0;
  }

  .p-topConcept__track {
    position: absolute;
    top: 17.394%;
    left: 3.3rem;
    width: calc(63.4rem + var(--concept-extend));
    flex-direction: column;
  }

  .p-topConcept__photo {
    aspect-ratio: 634 / 353;
    margin-bottom: 1.8rem;
  }

  .p-topConcept__body {
    position: absolute;
    top: 37.3rem;
    left: 15.2rem;
    width: 87rem;
  }

  .p-topConcept__friends {
    width: 42.7rem;
    margin: 2.2rem 0 0 1.3rem;
  }

  .p-topConcept__text {
    margin: 7.2rem 0 0 .4rem;
  }

  .p-topConcept__text p + p { margin-top: 1.712em; }

  .p-topConcept__link {
    margin: 7.5rem 0 0 .4rem;
  }

  /* ---------- ミュージックビデオ ---------- */
  .p-topMv {
    height: 119.7rem;
    margin-top: -19.2rem;
  }

  /* ---------- unicoの教室 ---------- */
  .p-topSchool {
    height: 154.7rem;
    margin-top: -5.3rem;
  }

  .p-topSchool__blob--left { top: 31.7rem; left: -53.6rem; width: 128.009rem; }
  .p-topSchool__blob--right { top: 33.1rem; left: 72.5rem; width: 114.181rem; }

  .p-topSchool__heading {
    position: absolute;
    top: 17.6rem;
    left: 0;
    right: 0;
  }

  .p-topSchool__lead {
    position: absolute;
    top: 32.4rem;
    left: 0;
    right: 0;
  }

  .p-topSchool__photos {
    position: absolute;
    inset: 0;
  }

  .p-topSchool__photo { position: absolute; }
  .p-topSchool__photo--1 { top: 76.1rem; left: 5.9rem; width: 66.573rem; }
  .p-topSchool__photo--2 { top: 73.7rem; left: 72.5rem; width: 66.573rem; }
  .p-topSchool__photo--3 { top: 46.1rem; left: 39.7rem; width: 66.573rem; }

  .p-topSchool__text {
    position: absolute;
    top: 131.9rem;
    left: 0;
    right: 0;
  }

  .p-topSchool__link {
    position: absolute;
    top: 146.3rem;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ---------- unicoのまいにち（Instagram） ---------- */
  .p-topDaily { height: 126.2rem; }

  .p-topDaily__wave {
    position: absolute;
    top: 0;
    left: 0;
    height: 15.4rem;
    transform: rotate(180deg);
  }

  .p-topDaily__main {
    position: absolute;
    top: 12.2rem;
    left: -10.6rem;
    width: 65.5rem;
  }

  .p-topDaily__head {
    position: absolute;
    top: 34.2rem;
    left: 60.1rem;
  }

  .p-topDaily__tiles {
    position: absolute;
    top: 51.1rem;
    left: 47.4rem;
    width: 86.645rem;
  }

  .p-topDaily__account {
    position: absolute;
    top: 41.2rem;
    left: 74.7rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  /* SP用のパーツはPCでは出さない */
  .p-topDaily__wave--sp,
  .p-topRecruit__waveTop--sp,
  .p-topSchool__blob--spRight,
  .p-topSchool__blob--spLeft { display: none; }

  .p-topDaily__link {
    position: absolute;
    top: 115.1rem;
    left: 116.1rem;
  }

  /* ---------- unicoをくわしく（ブログ） ---------- */
  .p-topInfo { height: 68rem; }

  .p-topInfo::before { height: 52.6rem; }

  .p-topInfo__blob { top: 5.6rem; left: 45.6rem; width: 116.564rem; }
  .p-topInfo__chara--blue { top: 3.5rem; left: -9.3rem; width: 23.8rem; }
  .p-topInfo__chara--green { top: 66.2rem; left: 123.3rem; width: 26.852rem; }

  .p-topInfo__heading {
    position: absolute;
    top: 5.8rem;
    left: 0;
    right: 0;
  }

  .p-topInfo__slider {
    position: absolute;
    top: 24.7rem;
    left: 0;
    right: 0;
  }

  .p-topInfo__viewport { margin: 0 12.2rem; }

  .p-topInfo__list { gap: 3.2rem; }

  .p-topInfo__item { flex: 0 0 calc((100% - 6.4rem) / 3); }

  .p-topInfo__arrow {
    position: absolute;
    top: 10.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 9rem;
  }

  .p-topInfo__arrow--prev { left: 3.6rem; }
  .p-topInfo__arrow--next { left: 134.6rem; }

  .p-topInfo__wave {
    position: absolute;
    top: 52.6rem;
    left: 0;
    height: 15.4rem;
  }

  /* ---------- お知らせ ---------- */
  .p-topNews {
    margin-top: -15.4rem;
    padding: 39.9rem 0 21.2rem;
  }

  .p-topNews__list {
    width: 94.4rem;
    margin: 11.6rem auto 0;
  }

  .p-topNews__link { margin-top: 2.4rem; }

  /* ---------- unicoの仲間になる（採用） ---------- */
  .p-topRecruit {
    height: 119rem;
    margin-top: -7.9rem;
  }

  .p-topRecruit__waveTop {
    position: absolute;
    top: 7.9rem;
    left: 0;
    height: 11.762rem;
  }

  .p-topRecruit__bg {
    position: absolute;
    top: 19.6rem;
    bottom: 15.3rem;
    left: 0;
    right: 0;
  }

  .p-topRecruit__waveBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 15.4rem;
    transform: rotate(180deg);
  }

  .p-topRecruit__blob { top: 6.3rem; left: 61.9rem; width: 122.582rem; }

  .p-topRecruit__photo {
    position: absolute;
    top: 0;
    left: -16.7rem;
    width: 113.8rem;
  }

  .p-topRecruit__headingBg {
    position: absolute;
    /* 写真のパララックス中も女性の顔へ重ならない位置まで下げる */
    top: 42.4rem;
    left: -19.3rem;
    width: 67.3rem;
    max-width: none;
  }

  .p-topRecruit__heading {
    position: absolute;
    top: 50.7rem;
    left: -.9rem;
    width: 50rem;
  }

  .p-topRecruit__chara--yellow { top: 22.3rem; left: 101.6rem; width: 29.29rem; }
  .p-topRecruit__chara--purple { top: 47.2rem; left: 105.7rem; width: 20.277rem; }

  .p-topRecruit__body {
    position: absolute;
    top: 75.6rem;
    left: 96.5rem;
    width: 37rem;
  }

  .p-topRecruit__link { margin: 2.8rem 0 0 .8rem; }

  /* ---------- ちがいも、おなじも ---------- */
  .p-topAbout {
    margin-top: -15.4rem;
    padding: 29rem 0 14.1rem;
  }

  .p-topAbout__text { margin-top: 6.5rem; }

  .p-topAbout__link { margin-top: 8.35rem; }
}

/* =========================================================
   PC・SP共通の見た目
   ========================================================= */

/* KV */
.p-topKv__text p,
.p-topConcept__text p { margin: 0; }

/* 子どもたちの可能性を解放する */
.p-topConcept__title {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.435;
  letter-spacing: .15em;
  color: var(--c-red);
}

/* 2枚目はPCで写真を画面の右端まで伸ばしたときの右側（大きさ・位置はPCの指定） */
.p-topConcept__photos {
  -webkit-mask-image: url(../image/top/mask-stack.svg), linear-gradient(#000 0 0);
  mask-image: url(../image/top/mask-stack.svg), linear-gradient(#000 0 0);
}

.p-topConcept__photos { overflow: hidden; }

.p-topConcept__track {
  display: flex;
  will-change: transform;
}

.p-topConcept__photo {
  display: block;
  flex-shrink: 0;
}

.p-topConcept__photo img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .p-topConcept__track { will-change: auto; }
}

/* unicoの教室 */
.p-topSchool { background: var(--c-white); }

.p-topSchool__lead,
.p-topSchool__text {
  line-height: 2;
  text-align: center;
}

.p-topSchool__lead strong { font-size: 1.125em; }

.p-topSchool__photo { aspect-ratio: 665.73 / 543.532; }

.p-topSchool__photo--1 {
  -webkit-mask-image: url(../image/top/mask-school-1.svg);
  mask-image: url(../image/top/mask-school-1.svg);
}

.p-topSchool__photo--2 {
  -webkit-mask-image: url(../image/top/mask-school-2.svg);
  mask-image: url(../image/top/mask-school-2.svg);
}

.p-topSchool__photo--3 {
  -webkit-mask-image: url(../image/top/mask-school-3.svg);
  mask-image: url(../image/top/mask-school-3.svg);
}

.p-topSchool__photo--1 img,
.p-topSchool__photo--2 img { top: 3.472%; left: 0; width: 100%; height: 96.528%; }
.p-topSchool__photo--3 img { inset: 0; width: 100%; height: 100%; }

/* unicoのまいにち */
.p-topDaily { background: var(--c-ivory); }

.p-topDaily__wave { fill: var(--c-white); }

.p-topDaily__main {
  aspect-ratio: 655 / 1120;
  -webkit-mask-image: url(../image/top/mask-insta-main.svg);
  mask-image: url(../image/top/mask-insta-main.svg);
}

.p-topDaily__main img { inset: 0; width: 100%; height: 100%; }

/* 2026-11-11 写真をユーザー支給の insta-main-2.webp（1325×1673、女の子が苗を持つ縦長の写真）に差し替え。
   女の子の顔と苗の鉢が両方入る位置（1440px幅では枠の左側が画面外に出るので、顔が切れない範囲で右へ寄せる） */
.p-topDaily__main img { object-position: 25% 50%; }

.p-topDaily__heading {
  align-items: flex-start;
  text-align: left;
}

.p-topDaily__heading .c-sectionHeading__icon { margin: 0 0 1.5rem .4rem; }
.p-topDaily__heading .c-sectionHeading__en { margin-left: .2rem; }

.p-topDaily__tiles {
  display: block;
  aspect-ratio: 866.45 / 603.5;
  transition: opacity .3s var(--ease);
}

/* Smash Balloonの取得結果を既存の4枚レイアウトに流し込む。
   プラグインのCSSは #sb_instagram #sbi_images .sbi_item（幅100%）のように詳細度が高いので、同じ起点で上書きする。
   .sbi_photo の高さはプラグインのJSがインラインで指定するので !important */
.p-topDaily__tiles--feed { position: relative; }

.p-topDaily__tiles--feed #sb_instagram,
.p-topDaily__tiles--feed #sb_instagram #sbi_images {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.p-topDaily__tiles--feed #sb_instagram #sbi_images .p-topDaily__tile {
  padding: 0 !important;
  transition: opacity .5s ease;
}

.p-topDaily__tiles--feed #sb_instagram #sbi_images .p-topDaily__tile--1,
.p-topDaily__tiles--feed #sb_instagram #sbi_images .p-topDaily__tile--2 { width: 53.257%; }

.p-topDaily__tiles--feed #sb_instagram #sbi_images .p-topDaily__tile--3,
.p-topDaily__tiles--feed #sb_instagram #sbi_images .p-topDaily__tile--4 { width: 50.731%; }

.p-topDaily__tiles--feed #sb_instagram .sbi_photo_wrap,
.p-topDaily__tiles--feed #sb_instagram .sbi_photo {
  width: 100%;
  height: 100% !important;
}

.p-topDaily__tiles--feed #sb_instagram .sbi_photo img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-topDaily__tiles--feed #sbi_load { display: none; }

/* Instagram連携中は1枚ずつ投稿へリンク */
.p-topDaily__tile .sbi_photo,
a.p-topDaily__tile { transition: opacity .3s var(--ease); }

@media (hover: hover) {
  a.p-topDaily__tiles:hover,
  a.p-topDaily__tile:hover,
  .p-topDaily__tile .sbi_photo:hover { opacity: .85; }
}

.p-topDaily__tile {
  position: absolute;
  display: block;
}

.p-topDaily__tile img { top: 0; height: 100%; }

.p-topDaily__tile--1 {
  top: 0;
  left: 0;
  width: 53.257%;
  height: 49.71%;
  -webkit-mask-image: url(../image/top/mask-insta-2.svg);
  mask-image: url(../image/top/mask-insta-2.svg);
}

.p-topDaily__tile--2 {
  top: 0;
  left: 46.743%;
  width: 53.257%;
  height: 49.71%;
  -webkit-mask-image: url(../image/top/mask-insta-1.svg);
  mask-image: url(../image/top/mask-insta-1.svg);
}

.p-topDaily__tile--3 {
  top: 54.433%;
  left: 2.077%;
  width: 50.731%;
  height: 45.567%;
  -webkit-mask-image: url(../image/top/mask-insta-3.svg);
  mask-image: url(../image/top/mask-insta-3.svg);
}

.p-topDaily__tile--4 {
  top: 54.433%;
  left: 49.166%;
  width: 50.731%;
  height: 45.567%;
  -webkit-mask-image: url(../image/top/mask-insta-4.svg);
  mask-image: url(../image/top/mask-insta-4.svg);
}

.p-topDaily__tile--1 img { left: .39%; width: 99.61%; }
.p-topDaily__tile--2 img,
.p-topDaily__tile--3 img { left: 0; width: 100%; }
.p-topDaily__tile--4 img { left: 2.669%; width: 97.331%; }

.p-topDaily__account {
  font-family: var(--f-en);
  font-size: max(1.6rem, 13px);
  font-weight: 700;
  line-height: 1.712;
}

/* unicoをくわしく */
.p-topInfo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--c-ivory);
}

.p-topInfo__wave {
  fill: var(--c-ivory);
  transform: rotate(180deg);
}

.p-topInfo__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  padding-block: 1.6rem 2.4rem;
  margin-block: -1.6rem -2.4rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.p-topInfo__viewport::-webkit-scrollbar { display: none; }

.p-topInfo__list { display: flex; }

.p-topInfo__item { scroll-snap-align: start; }

.p-topInfo__item a { display: block; }

.p-topInfo__thumb {
  aspect-ratio: 377.2 / 250.86;
  overflow: hidden;
  background: #ece6db;
  border-radius: 4rem;
}

.p-topInfo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.p-topInfo__title {
  display: -webkit-box;
  margin-top: 1.7rem;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.712;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: opacity .3s var(--ease);
}

@media (hover: hover) {
  .p-topInfo__item a:hover .p-topInfo__thumb img { transform: scale(1.04); }
  .p-topInfo__item a:hover .p-topInfo__title { opacity: .7; }
}

.p-topInfo__arrow img { width: 3.635rem; }

.p-topInfo__arrow--next img { transform: scaleX(-1); }

.p-topInfo__arrow:disabled {
  opacity: .3;
  cursor: default;
}

/* お知らせ */
.p-topNews { background: var(--c-white); }

.p-topNews__item + .p-topNews__item {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--c-line);
}

.p-topNews__item a {
  display: block;
  line-height: 1.7;
  color: #000;
}

.p-topNews__date {
  display: block;
  color: var(--c-red);
}

.p-topNews__title { transition: opacity .3s var(--ease); }

@media (hover: hover) {
  .p-topNews__item a:hover .p-topNews__title { opacity: .6; }
}

.p-topNews__link {
  display: flex;
  width: max-content;
  margin-inline: auto;
}

/* unicoの仲間になる */
.p-topRecruit__waveTop,
.p-topRecruit__waveBottom { fill: var(--c-ivory); }

.p-topRecruit__bg { background: var(--c-ivory); }

.p-topRecruit__photo {
  aspect-ratio: 1138 / 954.185;
  -webkit-mask-image: url(../image/top/mask-recruit.svg);
  mask-image: url(../image/top/mask-recruit.svg);
}

/* 2枚の写真をまとめて動かす（js/photo-parallax.js） */
.p-topRecruit__photoLayer {
  position: absolute;
  inset: 0;
}

.p-topRecruit__photoUnder { top: 91.492%; left: 3.16%; width: 96.84%; height: 8.508%; }
.p-topRecruit__photoMain { top: 0; left: 0; width: 100%; height: 97.58%; }

.p-topRecruit__text {
  line-height: 1.7;
  color: #000;
}

/* ちがいも、おなじも */
.p-topAbout {
  text-align: center;
  background: var(--c-white);
}

.p-topAbout__title {
  padding-left: .15em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.435;
  letter-spacing: .15em;
  color: var(--c-red);
}

.p-topAbout__text { line-height: 2.38; }

/* =========================================================
   SP（1023px以下）
   配置はFigmaの SP-1〜3（402px幅）を基準にしている
   ========================================================= */
@media (max-width: 1023px) {
  [class^="p-top"][class$="__inner"] {
    max-width: 64rem;
    margin-inline: auto;
  }

  /* 本文側を装飾（絶対配置の図形）より手前に出す */
  .p-topKv__body,
  .p-topConcept__body,
  .p-topSchool__heading,
  .p-topSchool__lead,
  .p-topSchool__text,
  .p-topSchool__link,
  .p-topDaily__head,
  .p-topDaily__link,
  .p-topInfo__heading,
  .p-topInfo__slider,
  .p-topRecruit__heading,
  .p-topRecruit__body {
    position: relative;
  }

  /* SPデザインにない画像は出さない */
  .p-topSchool__blob--left,
  .p-topSchool__blob--right,
  .p-topDaily__main,
  .p-topDaily__wave--pc,
  .p-topRecruit__waveTop--pc,
  .p-topRecruit__blob,
  .p-topRecruit__headingBg { display: none; }

  /* リンクは中央寄せ（SP-2・SP-3） */
  .p-topSchool__link,
  .p-topDaily__link,
  .p-topNews__link,
  .p-topRecruit__link {
    display: flex;
    width: max-content;
    margin-inline: auto;
  }

  /* ---------- KV ---------- */
  /* キャラクターの位置を波に合わせるため、セクション幅（cqw）を使う */
  .p-topKv {
    padding-bottom: 7rem;
    container-type: inline-size;
  }

  .p-topKv__photo {
    position: absolute;
    inset: 0 0 auto;
    height: 42rem;
    overflow: hidden;
  }

  .p-topKv__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 40%;
  }

  /* 波の幅は固定なので、広い画面では波の右側に背景が出る。写真を波の下のクリーム色まで伸ばす */
  @media (min-width: 540px) {
    .p-topKv__photo { height: 47rem; }
  }

  /* 写真ごとに顔が入る位置へ横にずらす。3枚目は左右の2人がなるべく入るように。
     1〜3枚目は2026-11-08に元写真を丸ごと使う画像にしたので、それまでの切り出しと同じ範囲が見える値に直した（390px幅で計算） */
  .p-topKv__slide--1 img { object-position: 59% 40%; }
  .p-topKv__slide--2 img { object-position: 83% 40%; }
  .p-topKv__slide--3 img { object-position: 50% 40%; }
  .p-topKv__slide--4 img { object-position: 70% 40%; }
  .p-topKv__slide--6 img { object-position: 74% 40%; }

  /* --wave-w は波の本体の幅（SVGの左半分は画面外）。広い画面では右端まで届くよう横に伸ばす */
  .p-topKv__wave {
    --wave-w: max(100rem, calc(100% + 18rem));
    position: absolute;
    top: 29rem;
    left: calc(-14rem - var(--wave-w));
    width: calc(var(--wave-w) * 2);
    height: 39.3rem;
    max-width: none;
  }

  .p-topKv__cream {
    position: absolute;
    top: 46rem;
    bottom: 3.9rem;
    left: 0;
    right: 0;
    background: var(--c-cream);
  }

  .p-topKv__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4rem;
    fill: var(--c-cream);
    transform: rotate(180deg);
  }

  .p-topKv__inner { padding: 36rem 2rem 0; }

  .p-topKv__title {
    width: 27rem;
    margin-left: -1rem;
  }

  .p-topKv__text {
    margin-top: 2.8rem;
    line-height: 2;
  }

  .p-topKv__text p + p { margin-top: 2em; }

  .p-topKv__link { margin-top: 3.2rem; }

  /* キャラクターは見出しの右横（SP-1）。3体の並びは緑の左端（--kv-chara-x）を基準にする。
     波は幅が固定なので、画面が広いと右側に写真の深い切れ込みが出て、右端基準のままだとキャラが写真の上に浮く。
     そのため緑の左端は画面左から29.5remより右へ行かせない（青が切れ込みにかからない位置）。約460px以下の幅はこれまでと同じ */
  .p-topKv__inner { --kv-inner-left: max(0px, (100cqw - 64rem) / 2); }

  .p-topKv__chara { --kv-chara-x: min(100% - 10.9rem, 29.5rem - var(--kv-inner-left)); }

  .p-topKv__chara--green { top: 31.4rem; left: var(--kv-chara-x); width: 7.7rem; }
  .p-topKv__chara--blue { top: 38rem; left: calc(var(--kv-chara-x) + 6.25rem); width: 9.25rem; }
  .p-topKv__chara--yellow { top: 43rem; left: calc(var(--kv-chara-x) + 1.65rem); width: 7.7rem; }

  /* 800px以上は見出しの横に3体が入らないので、写真の切れ込みの下の波の線に沿って横に並べる（左から緑・黄・青。2026-11-11 ユーザー指示の配置）。
     並びは写真の切れ込みの付け根（波のSVGのx=966。波の幅 --kv-wave-w、x=0 が画面左から-14rem）から画面右端の1.5rem手前まで（幅 --kv-row-w）。
     キャラの大きさと間隔はこの幅に比例させ、画面幅に合わせて大きくする（1023px付近で緑が約12.5rem）。
     縦位置は波の線から頭が少し出る高さで、800px・1017pxでの位置の間を幅に比例して変える */
  @media (min-width: 800px) {
    .p-topKv__inner {
      --kv-wave-w: max(100rem, 100cqw + 18rem);
      --kv-row-x: calc(-14rem + var(--kv-wave-w) * 966 / 1723);
      --kv-row-w: calc(100cqw - 1.5rem - var(--kv-row-x));
    }

    .p-topKv__chara--green {
      top: calc(38.8rem - .0465 * (var(--kv-row-w) - 26.44rem));
      left: calc(var(--kv-row-x) - var(--kv-inner-left));
      width: calc(var(--kv-row-w) * .3012);
    }

    .p-topKv__chara--yellow {
      top: calc(41.8rem - .1527 * (var(--kv-row-w) - 26.44rem));
      left: calc(var(--kv-row-x) - var(--kv-inner-left) + var(--kv-row-w) * .3554);
      width: calc(var(--kv-row-w) * .2952);
    }

    .p-topKv__chara--blue {
      top: calc(40.6rem - .083 * (var(--kv-row-w) - 26.44rem));
      left: calc(var(--kv-row-x) - var(--kv-inner-left) + var(--kv-row-w) * .6807);
      width: calc(var(--kv-row-w) * .3193);
    }
  }

  /* ---------- 子どもたちの可能性を解放する ---------- */
  .p-topConcept {
    margin-top: -4rem;
    padding: 11rem 0 8rem;
    background: var(--c-ivory);
  }

  .p-topConcept__inner {
    display: flex;
    flex-direction: column;
  }

  .p-topConcept__body {
    order: 1;
    padding: 0 2rem;
  }

  .p-topConcept__title {
    font-size: 2.8rem;
    letter-spacing: .1em;
  }

  .p-topConcept__friends {
    width: 24rem;
    margin-top: 1.6rem;
  }

  .p-topConcept__text { margin-top: 2.4rem; }

  .p-topConcept__text p + p { margin-top: 1.712em; }

  .p-topConcept__link { margin-top: 3.2rem; }

  /* 写真は採用ページの Slider_wave と同じ波形の帯で横に流れる */
  .p-topConcept__photos {
    position: relative;
    order: 2;
    width: 100vw;
    height: max(22rem, 34vw);
    margin: 4.8rem 0 0 calc(50% - 50vw);
    -webkit-mask-image: url(../image/top/mask-slider.svg);
    mask-image: url(../image/top/mask-slider.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .p-topConcept__track {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    height: 100%;
  }

  .p-topConcept__photo {
    height: 100%;
    aspect-ratio: 900 / 692;
    margin-right: 1.2rem;
  }

  /* ---------- ミュージックビデオ ---------- */
  .p-topMv {
    margin-top: -4rem;
    padding: 10rem 0 11rem;
  }

  /* ---------- unicoの教室（SP-2） ---------- */
  .p-topSchool {
    margin-top: -4rem;
    padding: 11.1rem 0 4rem;
  }

  .p-topSchool__blob--spRight { top: 6.3rem; left: 8.4rem; width: 40.9rem; }
  .p-topSchool__blob--spLeft { top: 55.8rem; left: -16.2rem; width: 52.1rem; }

  .p-topSchool__lead {
    margin-top: 2.4rem;
    padding: 0 2.5rem;
    text-align: left;
  }

  .p-topSchool__photos {
    position: relative;
    margin-top: 4rem;
    aspect-ratio: 402 / 634;
  }

  .p-topSchool__photo {
    position: absolute;
    width: 75.88%;
  }

  .p-topSchool__photo--1 { top: 0; left: 17.91%; }
  .p-topSchool__photo--2 { top: 60.73%; left: 32.59%; }
  .p-topSchool__photo--3 { top: 37.7%; left: .97%; }

  .p-topSchool__text {
    margin-top: 2.4rem;
    padding: 0 2.5rem;
    text-align: left;
  }

  .p-topSchool__link { margin-top: 2.7rem; }

  /* ---------- unicoのまいにち（SP-2） ---------- */
  .p-topDaily {
    padding: 11.5rem 0 6rem;
    overflow: hidden;
  }

  .p-topDaily__wave--sp {
    position: absolute;
    top: -8.4rem;
    left: -4.75%;
    width: 109.5%;
    max-width: none;
    height: 16.5rem;
    transform: rotate(180deg);
  }

  .p-topDaily__inner {
    display: flex;
    flex-direction: column;
  }

  .p-topDaily__head {
    display: flex;
    align-items: flex-end;
    gap: 1.6rem;
    padding: 0 3rem;
  }

  .p-topDaily__heading .c-sectionHeading__icon { margin: 0 0 .4rem; }
  .p-topDaily__heading .c-sectionHeading__en { margin-left: 0; }

  .p-topDaily__account {
    font-size: 1.3rem;
    line-height: 1.712;
  }

  .p-topDaily__tiles {
    position: relative;
    margin: 3rem 1.5rem 0;
  }

  .p-topDaily__link { margin-top: 3.1rem; }

  /* ---------- unicoをくわしく ---------- */
  .p-topInfo { padding: 6rem 0 8rem; }

  .p-topInfo::before { bottom: 3.9rem; }

  .p-topInfo__blob { top: 6rem; left: 8rem; width: 64rem; }
  .p-topInfo__chara--blue { top: 1rem; left: -4rem; width: 12rem; }
  .p-topInfo__chara--green { bottom: -11rem; right: -3rem; width: 10rem; }

  .p-topInfo__slider { margin-top: 2.8rem; }

  .p-topInfo__viewport {
    padding: 0 2rem;
    margin-block: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .p-topInfo__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 3.2rem 2rem;
  }

  @media (min-width: 600px) {
    .p-topInfo__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .p-topInfo__item { min-width: 0; }

  /* SPは新着3件だけ。PCはスライダーで全件見せる */
  .p-topInfo__item:nth-child(n + 4) { display: none; }

  .p-topInfo__thumb { border-radius: 2.4rem; }

  .p-topInfo__title { margin-top: 1.2rem; }

  .p-topInfo__arrow { display: none; }

  .p-topInfo__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4rem;
  }

  /* ---------- お知らせ ---------- */
  .p-topNews {
    margin-top: -4rem;
    padding: 10rem 2rem 2.4rem;
  }

  .p-topNews__list { margin-top: 3.2rem; }

  .p-topNews__link { margin-top: 3.2rem; }

  /* ---------- unicoの仲間になる（SP-3） ---------- */
  .p-topRecruit {
    padding-bottom: 9rem;
    overflow: hidden;
  }

  .p-topRecruit__waveTop--sp {
    position: absolute;
    top: 0;
    left: 0;
    height: 11.3rem;
  }

  .p-topRecruit__bg {
    position: absolute;
    top: 11.2rem;
    bottom: 3.9rem;
    left: 0;
    right: 0;
  }

  .p-topRecruit__waveBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4rem;
    transform: rotate(180deg);
  }

  /* キャラクターは写真に合わせて動くよう、コンテナ幅（402px幅のデザイン基準）で指定 */
  .p-topRecruit__inner {
    display: flex;
    flex-direction: column;
    padding-top: 2.7rem;
    container-type: inline-size;
  }

  .p-topRecruit__photo {
    position: relative;
    width: 94.28%;
    margin-left: 2.49%;
  }

  .p-topRecruit__chara--yellow { top: 11.44cqw; right: 2.46cqw; width: 24.15cqw; }
  .p-topRecruit__chara--purple { top: 74.63cqw; right: 4.18cqw; width: 18.21cqw; }

  .p-topRecruit__heading {
    align-items: flex-start;
    margin: .6rem 0 0 1.8rem;
    text-align: left;
  }

  .p-topRecruit__body {
    margin-top: 1.4rem;
    padding: 0 1.9rem;
  }

  .p-topRecruit__link { margin-top: 3rem; }

  /* ---------- ちがいも、おなじも ---------- */
  .p-topAbout {
    margin-top: -4rem;
    padding: 10rem 2rem 7rem;
  }

  .p-topAbout__title { font-size: 2.8rem; }

  .p-topAbout__text {
    margin-top: 2.8rem;
    line-height: 2.2;
  }

  .p-topAbout__link { margin-top: 4rem; }
}

/* お知らせの見出しはアイコンとの間隔が狭い */
@media (min-width: 1024px) {
  .p-topNews__heading .c-sectionHeading__icon { margin-bottom: .4rem; }
}