/* 実環境のhtmlのfont-sizeに合わせて換算。htmlの設定は変更しません。 */
.hero {
  /* スマホを基本にし、実環境のhtml=4.26667vwへ換算します。 */
  --hero-unit: .905797rem;
  --hero-width: calc(25.875 * var(--hero-unit));
  --ease: cubic-bezier(.22, 1, .36, 1);
  --rainbow-delay: .65s;
  --camp-delay: 1.85s;
  --city-delay: 2.2s;
  --family-delay: 2.55s;
  --sport-delay: 2.9s;
  --copy-delay: 3.7s;
  /* ドット素材がある場合はurlへ差し替えます。 */
  --dots: radial-gradient(circle, rgb(68 108 120 / 15%) calc(.052 * var(--hero-unit)), transparent calc(.068 * var(--hero-unit)));
  --dot-size: calc(.32 * var(--hero-unit));
  position: relative;
  isolation: isolate;
  width: 100%;
  /* ヘッダー用の4remを含め、構図全体を下げます。 */
  height: calc(56 * var(--hero-unit) + 4rem);
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(ellipse at 0 40%, #ceeffe, transparent 40%),
    radial-gradient(ellipse at 100% 0, #dcf3fd, transparent 45%), #fff;

  &, & * { box-sizing: border-box; }
  & :where(p, h1) { margin: 0; }
  & img { display: block; max-width: none; height: auto; }

  /* 添付と同じくイラストにも薄くドットが重なります。文字より背面です。 */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: var(--dots);
    background-size: var(--dot-size) var(--dot-size);
  }
}

.hero .hero-liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: fill;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero .hero-liquid[src] { opacity: 1; }
.hero-art { position: absolute; top: 4rem; bottom: 0; left: 50%; width: var(--hero-width); transform: translateX(-50%); z-index: 1; pointer-events: none; }
.hero-art img { position: absolute; }
.hero-rainbow { left: calc(-6 * var(--hero-unit)); top: calc(12 * var(--hero-unit)); width: calc(36 * var(--hero-unit)); opacity: .58; }
.hero-people { left: calc(-.35 * var(--hero-unit)); top: calc(32 * var(--hero-unit)); width: calc(9 * var(--hero-unit)); z-index: 2; }
.hero-sport { left: calc(8.2 * var(--hero-unit)); top: calc(14 * var(--hero-unit)); width: calc(17.7 * var(--hero-unit)); }
.hero-family { left: calc(3 * var(--hero-unit)); top: calc(22 * var(--hero-unit)); width: calc(22 * var(--hero-unit)); }
.hero-city { left: calc(9.5 * var(--hero-unit)); top: calc(32.5 * var(--hero-unit)); width: calc(16.1 * var(--hero-unit)); }
.hero-camp { left: calc(4.8 * var(--hero-unit)); top: calc(41 * var(--hero-unit)); width: calc(20 * var(--hero-unit)); }
.hero-copy {
  position: absolute;
  z-index: 4;
  left: calc((100% - var(--hero-width)) / 2 + 1.5 * var(--hero-unit));
  top: calc(2.3 * var(--hero-unit) + 4rem);
  width: calc(23 * var(--hero-unit));
  font-weight: 800;
}
.hero-lead { font-size: calc(.83 * var(--hero-unit)); line-height: 1.6; letter-spacing: -.05em; white-space: nowrap; }
.hero-title { margin-top: calc(.9 * var(--hero-unit)); font-size: calc(2.9 * var(--hero-unit)); line-height: 1.15; letter-spacing: -.055em; font-weight: 900; }
.hero-logo { display: flex; align-items: flex-start; height: calc(3.7 * var(--hero-unit)); margin-top: calc(.2 * var(--hero-unit)); color: #123e33; }
.hero-mark, .hero-letters { font-family: Arial, sans-serif; font-size: calc(3.4 * var(--hero-unit)); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.06em; }
.hero-mark { color: transparent; background: linear-gradient(110deg, #f04b3f 0 34%, #f7c731 34% 61%, #15997c 61%); background-clip: text; -webkit-background-clip: text; padding-right: .08em; }
.hero-letters { margin-left: calc(-.25 * var(--hero-unit)); padding-right: calc(.55 * var(--hero-unit)); }
.hero-name { font-size: calc(1.95 * var(--hero-unit)); line-height: 1.45; letter-spacing: -.045em; white-space: nowrap; }
.hero-name p { padding-left: calc(.05 * var(--hero-unit)); font-family: Arial, sans-serif; font-size: calc(.68 * var(--hero-unit)); line-height: 1; letter-spacing: 0; }
.hero-message { margin-top: calc(.75 * var(--hero-unit)); font-size: calc(1.4 * var(--hero-unit)); line-height: 1.55; letter-spacing: -.04em; white-space: nowrap; }

/* 実環境の正規ロゴをimgで配置する場合。 */
.hero img.hero-logo { width: calc(19.5 * var(--hero-unit)); height: auto; }

/* 初期表示は完成状態。JSが無効でも内容を失いません。 */
.hero.is-loading .hero-people,
.hero.is-loading .hero-rainbow,
.hero.is-loading .hero-scene,
.hero.is-loading .hero-copy { opacity: 0; }

.hero.is-playing .hero-people { animation: hero-rise 1s var(--ease) both; }
.hero.is-playing .hero-rainbow {
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  animation: hero-rainbow 1.75s var(--ease) var(--rainbow-delay) both;
}
.hero.is-playing .hero-scene { animation: hero-rise .95s var(--ease) var(--delay) both; }
.hero-camp { --delay: var(--camp-delay); }
.hero-city { --delay: var(--city-delay); }
.hero-family { --delay: var(--family-delay); }
.hero-sport { --delay: var(--sport-delay); }
.hero.is-playing .hero-copy { animation: hero-copy 1.15s var(--ease) var(--copy-delay) both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, calc(2.5 * var(--hero-unit)), 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes hero-rainbow {
  from { opacity: 0; mask-position: 100% 0; -webkit-mask-position: 100% 0; transform: translate3d(calc(-1 * var(--hero-unit)), calc(.75 * var(--hero-unit)), 0); }
  to { opacity: .58; mask-position: 0 0; -webkit-mask-position: 0 0; transform: translate3d(0, 0, 0); }
}
@keyframes hero-copy {
  from { opacity: 0; transform: translate3d(0, calc(1.25 * var(--hero-unit)), 0); filter: blur(calc(.35 * var(--hero-unit))); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* 実環境のroot基準に合わせ、幅の広い画面へ順に上書きします。 */
@media (min-width: 414px) {
  .hero { --hero-unit: 1rem; }
}

@media (min-width: 768px) {
  .hero {
    --hero-unit: .426672rem;
    --hero-width: calc(120 * var(--hero-unit));
    --dot-size: calc(.45 * var(--hero-unit));
    --dots: radial-gradient(circle, rgb(68 108 120 / 20%) calc(.09 * var(--hero-unit)), transparent calc(.105 * var(--hero-unit)));
    height: calc(67.5 * var(--hero-unit));
  }
  .hero-art { top: 0; }
  .hero-copy { left: calc((100% - var(--hero-width)) / 2 + 13.125 * var(--hero-unit)); top: calc(12.875 * var(--hero-unit)); width: calc(43 * var(--hero-unit)); }
  .hero-lead { font-size: calc(1.75 * var(--hero-unit)); letter-spacing: -.035em; }
  .hero-title { margin-top: calc(1.65 * var(--hero-unit)); font-size: calc(5.625 * var(--hero-unit)); }
  .hero-logo { height: calc(7.3 * var(--hero-unit)); margin-top: calc(.1 * var(--hero-unit)); }
  .hero img.hero-logo { width: calc(37 * var(--hero-unit)); }
  .hero-mark, .hero-letters { font-size: calc(6.4 * var(--hero-unit)); }
  .hero-letters { margin-left: calc(-.5 * var(--hero-unit)); padding-right: calc(.9 * var(--hero-unit)); }
  .hero-name { font-size: calc(3.7 * var(--hero-unit)); }
  .hero-name p { font-size: calc(1.25 * var(--hero-unit)); padding-left: calc(.2 * var(--hero-unit)); }
  .hero-message { margin-top: calc(1.45 * var(--hero-unit)); font-size: calc(3.05 * var(--hero-unit)); line-height: 1.5; letter-spacing: -.035em; }
  .hero-rainbow { left: calc(16 * var(--hero-unit)); top: calc(1.5 * var(--hero-unit)); width: calc(90.4375 * var(--hero-unit)); }
  .hero-people { left: calc(1 * var(--hero-unit)); top: calc(37.5 * var(--hero-unit)); width: calc(22.8125 * var(--hero-unit)); }
  .hero-sport { left: calc(80.25 * var(--hero-unit)); top: calc(.7 * var(--hero-unit)); width: calc(46.375 * var(--hero-unit)); }
  .hero-family { left: calc(53.6 * var(--hero-unit)); top: calc(16.8 * var(--hero-unit)); width: calc(46.375 * var(--hero-unit)); }
  .hero-city { left: calc(81 * var(--hero-unit)); top: calc(33 * var(--hero-unit)); width: calc(42.5625 * var(--hero-unit)); }
  .hero-camp { left: calc(43 * var(--hero-unit)); top: calc(36.5 * var(--hero-unit)); width: calc(43.25 * var(--hero-unit)); }
}

@media (min-width: 1024px) {
  .hero { --hero-unit: .555556rem; }
}

@media (min-width: 1200px) {
  .hero { --hero-unit: .833333rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-loading .hero-people,
  .hero.is-loading .hero-scene,
  .hero.is-loading .hero-copy { opacity: 1; }
  .hero.is-loading .hero-rainbow { opacity: .58; }
  .hero.is-playing .hero-people,
  .hero.is-playing .hero-rainbow,
  .hero.is-playing .hero-scene,
  .hero.is-playing .hero-copy { animation: none; mask-image: none; -webkit-mask-image: none; }
  .hero .hero-liquid { transition: none; }
}

.home-slideshow {
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}
.home-recruit-title {
  position: absolute;
  line-height: 1;
  font-weight: 700;
  top: 0;
  left: 50%;
  translate: -50% 0;
  font-size: 2.75rem;
  color: var(--vermilion);
  z-index: 1;
  white-space: nowrap;
  
  @media (min-width: 768px) {
    font-size: 4rem;
  }
  @media (min-width: 1024px) {
    font-size: 6rem;
    translate: -50% -50%;
  }
  @media (min-width: 1200px) {
    font-size: 10rem;
  }
}

.home-links {
  box-shadow: 0 -1rem 0 0 #F08409;
}

.insta-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  & .intro-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 25rem;
    @media (min-width: 768px) {
      min-width: 30rem;
    }
  }
}

.insta-wrapper {
  overflow: hidden;
  & .insta-container {
    @media (min-width: 1024px) {
      width: 120%;
      margin-inline: -10%;
    }
  }
}