@charset "UTF-8";
/* =========================================================
   unico 2026 共通スタイル（新デザインのページ用）

   サイズの基準
   - 1440px以上 … 1rem = 10px（Figmaの1440px幅デザインと等倍）
   - 1024〜1439px … 画面幅に合わせて全体を縮小（1rem = 100vw / 144）
   - 1023px以下 … SPレイアウト（375px幅で 1rem = 10px）。本文（1.4rem）が16pxを超えないよう上限を設けている
   ========================================================= */

:root {
  --c-red: #ff3827;
  --c-black: #242424;
  --c-cream: #f7f3ec;
  --c-ivory: #fcfaf7;
  --c-white: #fff;
  --c-gray: #808080;
  --c-line: rgba(36, 36, 36, .2);
  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --f-en: "Inter", "Noto Sans JP", sans-serif;
  /* 2026-11-08 ユーザー指示「ヘッダーの高さをやや縮める」：トップ（赤）10.2rem→7.5rem（1440px幅で75px）、下層 8.4rem→7.2rem、SP 6rem→5.6rem */
  --header-h: 7.5rem;
  --ease: cubic-bezier(.25, .8, .25, 1);
}

html {
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1439px) {
  html { font-size: calc(100vw / 144); }
}

@media (max-width: 1023px) {
  html { font-size: min(calc(100vw / 37.5), calc(16px / 1.4)); }
  :root { --header-h: 5.6rem; }
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, dl, dd, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video, iframe {
  display: block;
  max-width: 100%;
}

img { height: auto; }

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

button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

strong { font-weight: 700; }

/* ---------- base ---------- */
body {
  font-family: var(--f-jp);
  font-size: max(1.6rem, 13px);
  font-weight: 400;
  line-height: 1.712;
  color: var(--c-black);
  background: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 0;
  /* Chromeの約物詰め（、「 など）を無効にしてFigmaと同じ組み方にする */
  text-spacing-trim: space-all;
}

body.is-menuOpen { overflow: hidden; }

.l-main {
  display: block;
  overflow-x: clip;
  animation: unico-page-enter .2s var(--ease);
  transition: opacity .12s ease-out;
}

body.is-pageNavigating .l-main {
  opacity: .65;
  animation: none;
}

@keyframes unico-page-enter {
  from { opacity: .45; }
  to { opacity: 1; }
}

@media (max-width: 1023px) {
  body { font-size: 1.4rem; }
}

/* ---------- utility ---------- */
.u-visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  .u-pcOnly { display: none; }
}

@media (min-width: 1024px) {
  .u-spOnly { display: none; }
}

/* =========================================================
   header
   ========================================================= */
.l-header {
  position: relative;
  z-index: 100;
  background: var(--c-red);
}

.l-header__inner {
  display: flex;
  align-items: center;
  max-width: 144rem;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 4.1rem 0 4.5rem;
}

.l-header__logo {
  display: block;
  width: 7.75rem;
  margin-right: auto;
}

.l-header__logo img { width: 100%; }

.l-header__nav {
  display: flex;
  align-items: center;
}

.l-header__navList {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.182;
  color: var(--c-white);
  white-space: nowrap;
}

.l-header__navList a {
  position: relative;
  display: block;
  padding: .4rem 0;
  transition: opacity .3s var(--ease);
}

/* Instagramはロゴのみ（現在地の下線は出さない） */
.l-header__navList a.l-header__instagram { padding: .2rem 0; }

.l-header__navList > li > a.l-header__instagram::after { display: none; }

.l-header__instagram svg,
.l-spMenu__instagram svg {
  flex: 0 0 auto;
  width: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.l-header__contact {
  display: flex;
  align-items: center;
  height: 4.4rem;
  margin-left: 2.7rem;
  padding: 0 2.1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-red);
  white-space: nowrap;
  background: var(--c-white);
  border-radius: 5rem;
  transition: opacity .3s var(--ease);
}

.l-footer__instagram svg {
  width: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.l-instagramIcon__dot {
  fill: currentColor;
  stroke: none;
}

@media (hover: hover) {
  .l-header__navList a:hover,
  .l-header__contact:hover { opacity: .7; }
}

.l-header__menuBtn {
  position: relative;
  display: none;
  width: 4.4rem;
  height: 4.4rem;
  margin-right: -1rem;
}

.l-header__menuLine {
  position: absolute;
  left: 1rem;
  width: 2.4rem;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease);
}

.l-header__menuLine:nth-child(1) { top: calc(50% - .5rem); }
.l-header__menuLine:nth-child(2) { top: calc(50% + .3rem); }

.l-header__menuBtn[aria-expanded="true"] .l-header__menuLine:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.l-header__menuBtn[aria-expanded="true"] .l-header__menuLine:nth-child(2) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* 現在地・クリック直後の遷移先 */
.l-header__navList > li > a::after {
  content: "";
  position: absolute;
  bottom: -7px; /* 2026-11-08 ユーザー指定 */
  left: 0;
  right: 0;
  height: 3px;
  background: currentColor;
  border-radius: .5rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .16s var(--ease);
}

.l-header__navList > li > a[aria-current="page"]::after,
.l-header__navList > li > a.is-pagePending::after {
  height: 3px;
  transform: scaleX(1);
}

body.is-pageNavigating .l-header__navList > li > a[aria-current="page"]:not(.is-pagePending)::after {
  transform: scaleX(0);
}

.l-spMenu__list a.is-pagePending { color: var(--c-red); }

@media (prefers-reduced-motion: reduce) {
  .l-main { animation: none; transition: none; }
  body.is-pageNavigating .l-main { opacity: 1; }
  .l-header__navList a::after { transition: none; }
}

/* ---------- 下層ページのヘッダー（背景なしでページに重ねる） ---------- */
.l-header--sub {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: none;
}

.l-header--sub .l-header__inner { height: 7.2rem; }

.l-header--sub .l-header__navList { color: var(--c-black); }

.l-header--sub .l-header__navList a::after { background: var(--c-red); }

.l-header--sub .l-header__contact {
  margin-left: 3.8rem;
  color: var(--c-white);
  background: var(--c-red);
}

.l-header--sub .l-header__menuLine { background: var(--c-red); }

/* ---------- スクロールでヘッダーが見えなくなった後：上スクロールのときだけ上から出す（js/common.js） ---------- */
.l-header.is-floating {
  position: sticky;
  top: 0;
  transform: translateY(-100%);
}

.l-header.is-floating.is-shown { transform: none; }

.l-header.is-animated { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }

.l-header--sub.is-floating {
  position: fixed;
  background: var(--c-white);
}

.l-header--sub.is-shown { box-shadow: 0 .2rem 1.2rem rgba(36, 36, 36, .08); }

/* メニューを開いている間はメニューの背景に馴染ませる */
body.is-menuOpen .l-header--sub {
  background: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .l-header.is-animated { transition: none; }
}

/* ナビが入りきらない幅ではメニューボタンに切り替える */
@media (max-width: 1199px) {
  .l-header__nav { display: none; }
  .l-header__menuBtn { display: block; }
}

@media (max-width: 1023px) {
  .l-header__inner { padding: 0 2rem; }
  .l-header__logo { width: 7rem; }
}

/* ---------- SPメニュー ---------- */
.l-spMenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding-top: var(--header-h);
  overflow-y: auto;
  background: var(--c-cream);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.l-spMenu.is-open { opacity: 1; }

.l-spMenu[hidden] { display: none; }

.l-spMenu__inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 2.4rem 6rem;
}

.l-spMenu__list {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-red);
}

.l-spMenu__list > li { border-bottom: 1px solid rgba(255, 56, 39, .2); }

.l-spMenu__list a {
  display: block;
  padding: 1.6rem 0;
}

/* Instagramはロゴのみ */
.l-spMenu__list > li.l-spMenu__iconItem { border-bottom: 0; }

.l-spMenu__list a.l-spMenu__instagram {
  display: inline-flex;
  padding: 2rem 0 .4rem;
}

.l-spMenu__instagram svg { width: 2.8rem; }

.l-spMenu__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.6rem;
  margin-top: 3.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-red);
  border-radius: 5.6rem;
}

/* SPメニューはPCレイアウトのヘッダーでは使わないが、1024〜1199pxではボタンから開く */
@media (min-width: 1024px) {
  .l-spMenu__inner { padding-top: 4rem; }
}

/* =========================================================
   footer
   ========================================================= */
/* 波形の上側に見える色は、直前のセクションに合わせて --footer-bg で指定する */
.l-footer {
  position: relative;
  z-index: 2;
  background: var(--footer-bg, transparent);
}

.l-footer__wave {
  display: block;
  width: 100%;
  height: 15.4rem;
  fill: var(--c-cream);
}

.l-footer__inner {
  position: relative;
  min-height: 37.3rem;
  margin-top: -1px;
  padding: 2.3rem 0 0;
  background: var(--c-cream);
}

.l-footer__inner > * {
  max-width: 144rem;
  margin-inline: auto;
}

.l-footer__logo {
  position: absolute;
  top: 2.3rem;
  left: max(7.6rem, calc(50% - 72rem + 7.6rem));
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ff3928;
}

.l-footer__instagram {
  position: absolute;
  top: 10.4rem;
  left: max(7.6rem, calc(50% - 72rem + 7.6rem));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--c-red);
  transition: opacity .3s var(--ease);
}

.l-footer__instagram svg { width: 2.8rem; }

.l-footer__nav {
  display: flex;
  padding-left: 43.6rem;
}

.l-footer__group:nth-child(1) { width: 27rem; }
.l-footer__group:nth-child(2) { width: 25rem; }

.l-footer__list {
  font-size: max(1.6rem, 13px);
  line-height: 1.45;
}

.l-footer__list li + li { margin-top: 1.2rem; }

.l-footer__list a { transition: opacity .3s var(--ease); }

@media (hover: hover) {
  .l-footer__list a:hover,
  .l-footer__logo a:hover,
  .l-footer__instagram:hover { opacity: .6; }
}

.l-footer__copyright {
  position: absolute;
  bottom: 3.9rem;
  left: max(7.6rem, calc(50% - 72rem + 7.6rem));
  font-size: max(1.1rem, 10px);
  line-height: 1.45;
  color: var(--c-gray);
}

.l-footer__copyright small { font-size: inherit; }

@media (max-width: 1023px) {
  .l-footer__wave { height: 5rem; }

  .l-footer__inner {
    min-height: 0;
    padding: 1.6rem 2.4rem 3.2rem;
  }

  .l-footer__logo,
  .l-footer__instagram,
  .l-footer__copyright {
    position: static;
  }

  .l-footer__logo { font-size: 2.8rem; }

  .l-footer__instagram { margin: 3.2rem 0 0; }

  .l-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem 2rem;
    margin-top: 2.8rem;
    padding-left: 0;
  }

  .l-footer__group:nth-child(n) { width: auto; }

  .l-footer__list { font-size: 1.4rem; }

  .l-footer__list li + li { margin-top: 1rem; }

  .l-footer__copyright { margin-top: 4rem; }
}

/* =========================================================
   components
   ========================================================= */

/* ---------- 矢印つきテキストリンク ---------- */
.c-arrowLink {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--c-red);
  vertical-align: top;
}

.c-arrowLink__text {
  display: block;
  padding: 0 .1em .8rem;
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
}

.c-arrowLink__icon {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  transition: transform .3s var(--ease);
}

@media (hover: hover) {
  .c-arrowLink:hover .c-arrowLink__icon { transform: translateX(.4rem); }
}

@media (max-width: 1023px) {
  .c-arrowLink {
    gap: 1rem;
    font-size: 1.6rem;
  }

  .c-arrowLink__icon {
    width: 2.8rem;
    height: 2.8rem;
  }
}

/* ---------- セクション見出し ---------- */
.c-sectionHeading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--c-black);
}

.c-sectionHeading__icon {
  width: var(--icon-w, 6rem);
  height: auto;
  margin-bottom: .8rem;
}

.c-sectionHeading__en {
  font-family: var(--f-en);
  font-size: max(1.4rem, 11px);
  font-weight: 700;
  line-height: 1.712;
}

.c-sectionHeading__ja {
  margin-top: .5rem;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 1023px) {
  .c-sectionHeading__icon { width: calc(var(--icon-w, 6rem) * .85); }
  .c-sectionHeading__en { font-size: 1.2rem; }
  .c-sectionHeading__ja {
    font-size: 2.4rem;
    line-height: 1.3;
  }
}

/* ---------- 波形 ---------- */
.c-wave {
  display: block;
  width: 100%;
}

/* ---------- マスクで切り抜いた写真 ---------- */
.c-maskPhoto {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.c-maskPhoto img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* ---------- マスクの中で動く写真（js/photo-parallax.js） ----------
   枠（data-parallax）は動かさず、中の写真（data-parallax-layer）だけを上下に動かす。
   写真は少し拡大しておき、はみ出した分の範囲で動かすので枠の中に隙間は出ない */
[data-parallax] { --parallax-scale: 1.14; }

@media (prefers-reduced-motion: no-preference) {
  [data-parallax-layer] {
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--parallax-scale));
  }
}

/* 波の全幅写真（600px以上）：拡大の分だけ写真の幅を先に縮め、動かす仕組みはそのままで、写真の大きさは拡大なしと同じにする（2026-11-10 PDFの切り抜きに合わせるため）。
   --fit-w は拡大後の写真の幅（既定は枠の幅）、--fit-x は枠の中心からのずれ */
@media (min-width: 600px) {
  [data-parallax-fit] > [data-parallax-layer] {
    width: calc(var(--fit-w, 100%) / var(--parallax-scale) + 2px);
    max-width: none;
    margin-left: calc((100% - var(--fit-w, 100%) / var(--parallax-scale)) / 2 + var(--fit-x, 0px) - 1px);
  }
}

@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  [data-parallax-fit] > [data-parallax-layer] { transform: scale(var(--parallax-scale)); }
}

/* ---------- 動画（ミュージックビデオ）：トップ・会社概要 ----------
   PCの数値はFigma「トップ」のミュージックビデオ（1440×1197）の座標 */
.c-movie {
  position: relative;
  z-index: 2;
}

.c-movie__bg {
  position: absolute;
  top: 0;
  left: -6.8rem;
  width: calc(100% + 13.6rem);
  height: 100%;
  max-width: none;
  fill: var(--c-cream);
}

.c-movie__inner {
  position: relative;
  z-index: 1;
}

.c-movie__video {
  aspect-ratio: 854 / 477;
  overflow: hidden;
  background: #ddd;
}

.c-movie__video iframe,
.c-movie__video img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.c-movie__text { line-height: 2; }

.c-movie__chara {
  --movie-face: 1;
  --movie-x: 0px;
  --movie-y: 0px;
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform: translate3d(var(--movie-x), var(--movie-y), 0) scaleX(var(--movie-face));
}

.c-movie__chara--purple,
.c-movie__chara--yellow { --movie-face: -1; }

@media (prefers-reduced-motion: no-preference) {
  [data-movie-gather] .c-movie__chara { will-change: transform; }
}

@media (min-width: 1024px) {
  .c-movie { height: 119.7rem; }

  .c-movie__inner {
    width: 144rem;
    height: 100%;
    margin: 0 auto;
  }

  .c-movie__heading {
    position: absolute;
    top: 26.2rem;
    left: 0;
    right: 0;
  }

  .c-movie__video {
    position: absolute;
    top: 42.6rem;
    left: 29.3rem;
    width: 85.4rem;
  }

  .c-movie__text {
    position: absolute;
    top: 94.8rem;
    left: 29.3rem;
    width: 85.4rem;
  }

  .c-movie__chara--pink { top: 27.6rem; left: 6.4rem; width: 22.334rem; }
  .c-movie__chara--green { top: 28.1rem; left: 115.2rem; width: 26.852rem; }
  .c-movie__chara--purple { top: 82rem; left: 3.2rem; width: 20.277rem; }
  .c-movie__chara--yellow { top: 86.3rem; left: 116.2rem; width: 25.891rem; }
}

@media (max-width: 1023px) {
  .c-movie { padding: 10rem 0 11rem; }

  .c-movie__bg {
    left: -2rem;
    width: calc(100% + 4rem);
  }

  .c-movie__inner {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 2rem;
  }

  .c-movie__heading,
  .c-movie__video,
  .c-movie__text { position: relative; }

  .c-movie__video { margin-top: 2.8rem; }

  .c-movie__text { margin-top: 2rem; }

  .c-movie__chara--pink { top: -1rem; left: -3rem; width: 9rem; }
  .c-movie__chara--green { top: -1rem; right: -3.5rem; width: 10.5rem; }
  .c-movie__chara--purple { bottom: -9rem; left: -2rem; width: 8rem; }
  .c-movie__chara--yellow { bottom: -9.5rem; right: -2rem; width: 10rem; }
}

/* ヒーロー：JSの準備中だけ隠す。未実行時・動きを減らす設定では通常表示する。 */
[data-hero-hop],
[data-character-hop],
[data-character-look],
[data-character-run] {
  transform-origin: 50% 100%;
  pointer-events: none;
}

[data-hop-active] { will-change: transform; }

/* フッター直前CTA：中央リンクの左右をキャラクターが往復する共通レーン */
.c-characterRun {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 10.5rem;
  overflow: hidden;
}

.c-characterRun__anchor {
  position: relative;
  z-index: 2;
  margin-top: 1.8rem;
}

.c-characterRun__chara {
  position: absolute;
  z-index: 1;
  top: 2rem;
  width: 9rem;
  max-width: none;
  height: auto;
}

.c-characterRun__chara--left { left: calc(50% - 35rem); }
.c-characterRun__chara--right { left: calc(50% + 26rem); }

@media (max-width: 1023px) {
  .c-characterRun {
    height: 14rem;
  }

  .c-characterRun__anchor { margin-top: 1.2rem; }

  .c-characterRun__chara {
    /* CTAの矢印ボタンより下に走行レーンを分け、移動中も重ならないようにする */
    top: 6.4rem;
    width: 7rem;
  }

  .c-characterRun__chara--left { left: 4rem; }
  .c-characterRun__chara--right { right: 4rem; left: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .has-hero-motion [data-hero-reveal]:not([data-hero-reveal-state="done"]) [data-hero-layer] {
    opacity: 0;
  }
}