/* 基準：PCは幅1440pxで 1rem=10px、スマホは幅375pxで 1rem=10px（index.html で算出） */
:root {
  --yellow: #ebb51e;
  --blue: #2280c4;
  --pink: #e62473;
  --white: #fff;
  --grad: linear-gradient(268deg, #2280c4 .2%, #a8569d 50%, #e62473 99.5%);
}
html { font-size: 10px; scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; }
body { background: var(--yellow); color: var(--white); font-family: "Noto Sans JP", sans-serif; font-weight: 700; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
.page { position: relative; overflow-x: clip; }

/* 共通の文字スタイル */
.en-title { font: 700 8rem/1.2 Outfit, sans-serif; letter-spacing: .4rem; white-space: nowrap; }
.jp-title { font-size: 2.8rem; line-height: 1.5; letter-spacing: .112rem; }
.sub-title { font-size: 3.2rem; line-height: 1.5; }
.body-text { font-size: 1.8rem; line-height: 2.2; }

/* ボタン */
.btn { position: relative; display: block; height: 6rem; border-radius: 4rem; font-size: 1.8rem; letter-spacing: .054rem; transition: filter .2s, transform .2s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-.2rem); }
.btn span { position: absolute; left: 3rem; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.btn img { position: absolute; right: 1.5rem; top: 1.5rem; width: 3rem; height: 3rem; }
.btn--grad { width: 24rem; background: var(--grad); }
.btn--white { width: 27.4rem; height: 6.33rem; background: var(--white); color: var(--blue); }
.btn--white img { top: 1.6rem; }

/* ヘッダー */
.header { position: absolute; z-index: 5; inset: 0 0 auto; }
.header__logo { position: absolute; left: 4.5rem; top: 2.9rem; }
.header__logo img { width: 12.77rem; height: 8.09rem; }
.header .btn { position: absolute; left: 116rem; top: 4rem; }

/* ファーストビュー */
.hero { position: relative; height: 106.6rem; overflow: hidden; }
.hero__art { position: absolute; left: 0; top: 0; width: 144rem; height: 106.6rem; }
.hero__arcs { position: absolute; inset: 0; transform: scaleX(var(--k, 1)); transform-origin: 72rem 0; }
.hero__arc { position: absolute; }
.hero__arc--1 { left: -5rem; top: 58.9rem; width: 98.3rem; height: 32.8rem; }
.hero__arc--2 { left: 22.4rem; top: 35.7rem; width: 126.5rem; height: 36.8rem; }
.hero__arc-text { position: absolute; inset: 0; width: 144rem; height: 106.6rem; overflow: visible; }
.hero__arc-text text { fill: var(--white); font: 600 24px Outfit, sans-serif; letter-spacing: 1.2px; }
.hero__slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity .6s ease; }
.slide.is-active { opacity: 1; }
/* 楕円は画面幅に合わせて横に伸ばす（--k）。写真と人物は同じ変形（--p, --tx）で動かす */
.slide__mask { position: absolute; top: 0; bottom: 0; left: calc((1 - var(--k, 1)) * 72rem); width: calc(var(--k, 1) * 144rem); -webkit-mask: url(../assets/svg/hero-mask-stage.svg) 0 0 / 100% 100% no-repeat; mask: url(../assets/svg/hero-mask-stage.svg) 0 0 / 100% 100% no-repeat; }
.slide__layer { position: absolute; left: 0; top: 0; width: 144rem; height: 106.6rem; transform: translateX(var(--tx, 0rem)) scale(var(--p, 1)); transform-origin: 72rem 6rem; }
.slide__mask .slide__layer { left: calc((var(--k, 1) - 1) * 72rem); }
.slide__photo, .slide__cut, .slide__cut img { position: absolute; }
.slide__cut { overflow: hidden; }
.slide--1 .slide__photo { left: 0; top: -9.2rem; width: 166.2rem; height: 110.8rem; }
.slide--1 .slide__cut { left: 8.4rem; top: 2.1rem; width: 133rem; height: 51.7rem; }
.slide--1 .slide__cut img { left: -8.42rem; top: -11.4rem; width: 166.25rem; height: 110.79rem; }
.slide--2 .slide__photo { left: -.8rem; top: -19rem; width: 224.6rem; height: 149.7rem; }
/* 右端に写り込んだ腕を出さないよう、表示幅を人物までに限定 */
.slide--2 .slide__cut { left: 10.6rem; top: -18.7rem; width: 129.4rem; height: 99.78rem; }
.slide--2 .slide__cut img { left: -11.37rem; top: -.44rem; width: 224.5rem; height: 149.67rem; }
.slide--3 .slide__photo { left: -9.1rem; top: -.3rem; width: 180rem; height: 120rem; }
.slide--3 .slide__cut { left: 0; top: 0; width: 144rem; height: 80rem; }
.slide--3 .slide__cut img { left: -9.12rem; top: -.35rem; width: 180rem; height: 120rem; }
.hero__copy { position: absolute; left: 4.3rem; top: 15.6rem; }
.hero__copy h1 { font-size: 7.2rem; line-height: 9.8rem; letter-spacing: .216rem; white-space: nowrap; }
.hero__copy p { margin-top: 1.1rem; font-size: 2.4rem; letter-spacing: .12rem; }

/* キャッチコピーの登場（ページ表示時に1回） */
.copy-line { display: block; overflow: hidden; }
.copy-char { display: inline-block; animation: copy-rise .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.15s + var(--i) * 45ms); }
.hero__copy p { animation: copy-fade .8s ease 1.1s both; }
@keyframes copy-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes copy-fade { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

/* 事業内容 */
.about { position: relative; height: 72.1rem; padding: 8rem 12rem; display: flex; gap: 5rem; }
.about__en { writing-mode: vertical-rl; flex: 0 0 9.6rem; height: 56.1rem; }
.about__body .body-text { width: 62rem; }
.about__body .jp-title { margin-bottom: 4rem; }
.about__body .body-text + .body-text { margin-top: 1.6rem; }
.about__visual { position: absolute; left: 84.174rem; top: -2.346rem; width: 71.56rem; height: 56.63rem; }
.about__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.about__photo { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(../assets/svg/about-mask-stage.svg) 0 0 / 100% 100% no-repeat; mask: url(../assets/svg/about-mask-stage.svg) 0 0 / 100% 100% no-repeat; }
.about__photo img { position: absolute; left: -36.16%; top: -.8%; width: 159.3%; height: 134.2%; object-fit: cover; }

/* 私たちの使命 */
.mission { position: relative; margin-top: 5.8rem; height: 152.88rem; padding: 7.8rem 12rem 0; background: var(--blue); border-radius: 10rem; }
.mission__head { display: flex; gap: 13rem; }
.mission__head .jp-title { margin-top: 2.4rem; }
.mission__text { width: 57.6rem; }
.mission__text .body-text { margin-top: 1.6rem; white-space: nowrap; }
.mission__text .sub-title + .body-text { margin-top: 2.4rem; }
.compare { position: absolute; left: 0; top: 55.08rem; width: 144rem; height: 81.6rem; }
.compare__label { position: absolute; top: 0; z-index: 1; width: 56rem; text-align: center; font: 600 6rem/1.4 Outfit, sans-serif; }
.compare__label--before { left: 12rem; }
.compare__label--after { left: 75.9rem; }
.compare__card { position: absolute; top: 6.4rem; width: 56rem; height: 75.2rem; background: var(--white); border-radius: 4rem; }
.compare__card img { position: absolute; }
.compare__card--before { left: 12rem; }
.compare__card--before img { left: 4.3rem; top: 5.4rem; width: 47.4rem; height: 63.9rem; }
.compare__card--after { left: 75.9rem; }
.compare__card--after img { left: 3.8rem; top: 4.8rem; width: 48.4rem; height: 65.1rem; }
.compare__arrows { position: absolute; left: 66.7rem; top: 15rem; width: 12.6rem; height: 58.1rem; }
.compare__vertical { position: absolute; left: 70.8rem; top: 23.6rem; width: 2.4rem; height: 40.9rem; }

/* 3つの強み */
.strength { margin-top: 7.8rem; text-align: center; }
.strength > .jp-title { margin-top: 2.4rem; }
.strength__list { display: flex; justify-content: space-between; gap: 6rem; width: 120rem; margin: 9.1rem auto 0; min-height: 57.2rem; }
.point { width: 36rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; }
.point__icon { position: relative; width: 20rem; height: 20rem; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; }
.point__icon img { height: auto; }
.point__num { position: absolute; left: 50%; top: -1.8rem; transform: translateX(-50%); font: 700 3rem/1.2 Outfit, sans-serif; letter-spacing: .15rem; -webkit-text-stroke: .5rem var(--yellow); paint-order: stroke fill; }
.point h3 { white-space: nowrap; }
.point .body-text { width: 34rem; text-align: left; }

/* 写真帯 */
.strip { margin-top: 12rem; height: 35rem; overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: strip 50s linear infinite; }
.tile { position: relative; width: 50rem; height: 35rem; overflow: hidden; flex: none; }
.tile img { position: absolute; object-fit: cover; }
.tile--1 img { left: -15.2%; top: -16%; width: 130.4%; height: 124%; }
.tile--2 img { left: -40.6%; top: -18%; width: 165.8%; height: 158%; }
.tile--3 img { left: -50.6%; top: -24.86%; width: 157.2%; height: 149.7%; }
.tile--4 img { left: -22.8%; top: -10.29%; width: 126.6%; height: 120.6%; }
.tile--5 img { left: -67.4%; top: -19.14%; width: 187.8%; height: 178.9%; }
@keyframes strip { to { transform: translateX(-50%); } }

/* 仲間募集 */
.recruit { padding: 17rem 12rem 0; }
.recruit__card { position: relative; height: 45.8rem; background: var(--blue); border-radius: 4rem; }
.recruit__en { position: absolute; left: 6rem; top: -5rem; }
.recruit__jp { position: absolute; left: 6.2rem; top: 4.6rem; }
.recruit__text { position: absolute; left: 6rem; top: 12.8rem; width: 44rem; white-space: nowrap; }
.recruit__text .body-text + .body-text { margin-top: 1.6rem; }
.recruit__image { position: absolute; left: 54rem; top: 6rem; width: 60rem; height: 33.8rem; background: #d9d9d9; object-fit: cover; display: block; }

/* お問い合わせ */
.contact { margin-top: 12rem; height: 44rem; padding: 3rem; background: var(--grad); }
.contact__inner { position: relative; height: 38rem; overflow: hidden; border-radius: 4rem; background: #1a1a1a; }
.contact__bg { position: absolute; left: -5.484rem; top: -48.68rem; width: 184.07rem; height: 122.71rem; object-fit: cover; object-position: bottom; }
.contact__body { position: absolute; left: 0; right: 0; top: 6.97rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact__body .jp-title { margin-top: -1.1rem; }
.contact__body .btn { margin-top: 4.3rem; }

/* フッター */
.footer { padding: 6.1rem 0 4rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.footer img { width: 12.77rem; height: 8.09rem; }
.footer small { font: 400 1.2rem/1.5 Outfit, sans-serif; }

/* スクロール表示（JSが有効なときだけ隠す） */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(3.2rem); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.reveal-on [data-reveal="title"] { transform: translateY(4.8rem); }
.reveal-on [data-reveal="photo"] { transform: translateY(2.4rem) scale(.92); transition-duration: 1.2s; }
.reveal-on [data-reveal="arrow"] { transform: translateX(-4rem); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
.reveal-on .about__edge path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .5s); }
.reveal-on .about__visual.is-in .about__edge path { stroke-dashoffset: 0; }
.reveal-on [data-reveal="point"] .point__icon { transform: scale(.6); transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .15s); }
.reveal-on [data-reveal="point"].is-in .point__icon { transform: none; }

/* 動きを減らす設定の利用者には自動の動きを止める */
@media (prefers-reduced-motion: reduce) {
  .copy-char, .hero__copy p { animation: none; }
  .strip__track { animation: none; }
  .slide { transition: none; }
  html { scroll-behavior: auto; }
}

/* ─────── スマホ（デザイン未支給のためPC版から構成） ─────── */
@media (max-width: 767px) {
  .en-title { font-size: 4.4rem; letter-spacing: .2rem; }
  .jp-title { font-size: 2rem; }
  .sub-title { font-size: 2.2rem; }
  .body-text { font-size: 1.5rem; line-height: 2; }
  .body-text br, .point h3 br { display: revert; }

  .header__logo { left: 1.6rem; top: 1.2rem; }
  .header__logo img, .footer img { width: 8rem; height: 5.07rem; }
  .header .btn { left: auto; right: 1.6rem; top: 1.6rem; width: 15rem; height: 4.4rem; font-size: 1.3rem; }
  .header .btn span { left: 1.6rem; }
  .header .btn img { right: .8rem; top: .8rem; width: 2.8rem; height: 2.8rem; }

  .hero { height: 60rem; }
  .hero__art { left: -15rem; top: 20rem; transform: scale(.4); transform-origin: 0 0; }
  .hero__arc-text text { font-size: 28px; letter-spacing: 1px; }
  .hero__copy { left: 1.6rem; top: 8.4rem; }
  .hero__copy h1 { font-size: 3.2rem; line-height: 1.4; letter-spacing: .1rem; }
  .hero__copy p { margin-top: .6rem; font-size: 1.5rem; letter-spacing: .06rem; }

  .about { height: auto; padding: 4rem 1.6rem 0; flex-direction: column; gap: 1.6rem; }
  .about__en { writing-mode: horizontal-tb; flex: none; margin: 0; height: auto; }
  .about__body .body-text { width: auto; }
  .about__body .body-text br { display: none; }
  .about__body .jp-title { margin-bottom: 1.6rem; }
  .about__body .body-text + .body-text { margin-top: 1.6rem; }
  .about__visual { position: relative; left: auto; top: auto; width: 34.3rem; height: 27.15rem; margin-top: 1rem; }

  .mission { margin-top: 4rem; height: auto; padding: 5rem 1.6rem; border-radius: 4rem; }
  .mission__head { flex-direction: column; gap: 2.4rem; }
  .mission__head .jp-title { margin-top: .8rem; }
  .mission__text { width: auto; }
  .mission__text .body-text { white-space: normal; margin-top: 1.6rem; }
  .mission__text .body-text br { display: none; }
  .compare { position: static; width: auto; height: auto; margin-top: 4rem; display: flex; flex-direction: column; }
  .compare__label { position: static; width: auto; font-size: 3.6rem; margin-bottom: .8rem; }
  .compare__label--before { order: 1; }
  .compare__card--before { order: 2; }
  .compare__vertical, .compare__arrows { display: none; }
  .compare__label--after { order: 3; margin-top: 3.2rem; }
  .compare__card--after { order: 4; }
  .compare__card { position: static; width: 100%; height: auto; padding: 2rem; border-radius: 2.4rem; }
  .compare__card img { position: static; width: 100% !important; height: auto !important; }

  .strength { margin-top: 5rem; padding: 0 1.6rem; }
  .strength > .jp-title { margin-top: .8rem; }
  .strength__list { flex-direction: column; width: auto; gap: 4.8rem; margin-top: 4.8rem; }
  .point { width: auto; gap: 1.6rem; }
  .point .body-text { width: auto; }

  .strip { margin-top: 5rem; height: 16rem; }
  .tile { width: 22.86rem; height: 16rem; }

  .recruit { padding: 8rem 1.6rem 0; }
  .recruit__card { height: auto; padding: 4rem 2rem 2.4rem; border-radius: 2.4rem; }
  .recruit__en { left: 2rem; top: -2.8rem; }
  .recruit__jp, .recruit__text, .recruit__image { position: static; }
  .recruit__text { width: auto; margin-top: 1.2rem; white-space: normal; }
  .recruit__text br { display: none; }
  .recruit__text .body-text + .body-text { margin-top: 1.2rem; }
  .recruit__image { width: 100%; height: 17rem; margin-top: 2rem; }

  .contact { margin-top: 5rem; height: auto; padding: 1.2rem; }
  .contact__inner { height: 28rem; border-radius: 2.4rem; }
  .contact__bg { left: -22rem; top: -20rem; width: 80rem; height: 53.33rem; }
  .contact__body { top: 4.8rem; }
  .contact__body .jp-title { margin-top: .2rem; }
  .contact__body .btn { margin-top: 2.4rem; }

  .footer { padding: 3.2rem 1.6rem; gap: 1.2rem; }
}