/*
Theme Name: Dadavision
Theme URI:
Author: Dadavision
Author URI:
Description: A super simple starter theme, built to be customized manually.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dadavision
*/

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

/* ------------------------------------------------------------------
   GSAP ScrollTrigger 初期表示ゲート
   JS実行前(FOUC)にautoAlpha管理下のセクションが生DOM状態で
   一瞬フル表示されるのを防ぐ。opacity+visibilityはGSAPのautoAlphaと
   同じ組み合わせなので、GSAPがinlineスタイルで上書きしてもちらつかない。
   `.js-gsap-pending` は header.php のインラインスクリプトが即時付与し、
   各セクションの初期状態をGSAPが描画し終えたタイミングでJS側が解除する。
   JS無効環境ではクラスが付与されないため、コンテンツはそのまま可視・到達可能。
------------------------------------------------------------------ */
html.js-gsap-pending {
  .index-vision-section,
  .index-strength-section,
  .index-service-section__header,
  .index-service-section__body {
    opacity: 0;
    visibility: hidden;
  }
}

/* ------------------------------------------------------------------
   ローディング画面（仮スタイル。詳細な見た目は別途調整予定）
   デフォルトで表示、JS側がアセット読み込み完了後に .is-hidden を付与する。
------------------------------------------------------------------ */

@keyframes loadingDotBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background-color: #14171a;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ease-custom {
  animation: ease-custom 2000ms linear;
}

.loading-screen__spinner {
  width: 10rem;
  height: 10rem;
  animation: loading-screen-spin 2.4s linear(0 0% 41%, 0.02 46%, 0.06 50%, 0.13 55%, 0.22 59%, 0.81 68%, 0.92 72%, 0.96 75%, 0.99 79%, 1 83% 100%) infinite;
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
@keyframes loading-screen-spin {
  to { transform: rotate(720deg); }
}
/* front-page.js側がsetLoadingTasks()を呼んだ時だけ中身が入る。呼ばれない
   ページ（下層ページ等）ではどちらも空のまま非表示。
   .loading-screen(position:fixed)を基準に、バーは画面上端、ステータス
   一覧は画面左下にabsolute配置する（中央のスピナーとは独立したレイヤー）。 */
.loading-screen__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.loading-screen__progress:empty,
.loading-screen__status-list:empty {
  display: none;
}
.loading-screen__message {
  font-family: var(--ff-mono, monospace);
  letter-spacing: var(--ls-mono, 0);
  font-weight: var(--fw-light);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.loading-screen__message:empty {
  display: none;
}
.loading-screen__progress-fill {
  height: 100%;
  width: 100%;
  background-color: #f15b2a;
  --progress: 0;
  transition: transform 0.3s ease-out;
  transform-origin: left center;
  transform: scaleX(var(--progress));
}
.loading-screen__status-list {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: min(18rem, 33vw);
  font-family: var(--ff-mono, monospace);
  letter-spacing: var(--ls-mono, 0);
  font-weight: var(--fw-light);
  font-size: 1rem;
  opacity: 0.25;
}
.loading-screen__status-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  color: rgba(255, 255, 255, 0.45);
}
.loading-screen__status-state {
  color: rgba(255, 255, 255, 0.35);
  position: relative;
}
.loading-screen__status-item[data-state="loading"] .loading-screen__status-state::after,
.loading-screen__status-item[data-state="retrying"] .loading-screen__status-state::after {
  content: '.';
  display: inline-block;
  font-weight: var(--fw-bold);
  animation: loadingDotBlink 1s infinite;
  position: absolute;
  right: -0.75rem;
}
.loading-screen__status-item[data-state="retrying"] .loading-screen__status-state {
  color: #f5a623;
}
.loading-screen__status-item[data-state="ready"] .loading-screen__status-state {
  color: #7cffb2;
}
.loading-screen__status-item[data-state="unavailable"] .loading-screen__status-state {
  color: #ff6b6b;
}

/* ------------------------------------------------------------------
   #service/#globeが想定より初期化に時間がかかった場合だけ出す
   区間別ローディングインジケータ（section-loading-fallback.js参照）。
------------------------------------------------------------------ */
.section-loading-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.section-loading-fallback.is-active {
  opacity: 1;
  visibility: visible;
}
.section-loading-fallback__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loading-screen-spin 0.8s linear infinite;
}

/* hideSectionOnFailure:trueで使われる。読み込みが復旧不能と判断された
   セクションを、壊れたレイアウトのまま見せずスピナーだけ残して丸ごと
   隠す（section-loading-fallback.js参照）。 */
.js-section-unavailable > *:not(.section-loading-fallback) {
  display: none;
}
.index-strength.js-section-unavailable {
  min-height: 100svh;
}

:root {
  /* Font settings */
  --ff-default: 'Figtree', 'Zen Kaku Gothic New', sans-serif;
  --ff-eng: 'Figtree', sans-serif;
  --ff-mono: 'Roboto Mono', monospace;
  --ff-jp: 'Zen Kaku Gothic New', sans-serif;
  
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-light: 300;

  --fz-small: 1.2rem;
  --fz-regular: 1.4rem;
  --fz-medium: 1.6rem;
  --fz-large: min(3.2rem, 4.8vw);
  --fz-xlarge: min(4.0rem, 7.2vw);

  --ls-small: 0.1em;
  --ls-medium: 0.14em;
  --ls-large: 0.20em;

  font-size: clamp(8px, 4px + (6 / 1440) * 100vw, 16px);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'palt' 1;

  /* Sizes */
  --container-width: min(90rem, 100vw - 24rem);
  --container-l-width: min(114rem, 100vw - 20rem);
  --section-padding: 8rem;
  --no-head-top-padding: min(20rem, 30svh);

  /* Colors */
  --cl-black: #000000;
  --cl-white: #ffffff;

  --op-disabled: 0.4;

  /* Easings */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  @media (min-width: 769px) and (max-width: 1024px) {
    /* Font size */
    font-size: clamp(6px, 2px + (8 / 1024) * 100vw, 14px);

    --fz-large: 2.8rem;

    /* Sizes */
    --container-width: min(100vw - 8rem, 100%);
    --container-l-width: min(100vw - 4rem, 100%);
    --section-padding: 6rem;
  }

  @media (max-width: 768px) {
    /* Sizes */
    --container-width: min(100vw - 8rem, 100%);
    --container-l-width: min(100vw - 4rem, 100%);
    --section-padding: 6rem;
    --no-head-top-padding: 16rem;
  }
}

body {
	margin: 0;
	color: #fff;
	background: var(--cl-black);

  /* default font  */
  font-family: var(--ff-default);
  font-weight: var(--fw-bold);
  font-size: var(--fz-medium);
  line-height: 1.8;
  letter-spacing: var(--ls-small);
  @media (min-width: 769px) {
    &::before {
      content: '';
      display: block;
      height: 16rem;
      width: 100%;
      position: fixed;
      top: -8rem;
      z-index: 1;
      background: linear-gradient(to bottom, var(--cl-black) 8.25rem, rgba(0,0,0,0) 100%);
      pointer-events: none;
    }
  }
}

img, svg {
	max-width: 100%;
	height: auto;
}

p {
  margin: 0;
}

/* ------------------------------------------------------------------
   Utilities
------------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.pc-only {
  @media (max-width: 768px) {
    display: none !important;
  }
}
.mobile-only {
  @media (min-width: 769px) {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   Layout
------------------------------------------------------------------ */

h1,h2,h3,h4,h5,h6,p,table,ul,ol,dl,form,figure,blockquote {
  margin: 0;
}

/* main〜footerをまとめてクリップする。bodyやhtmlにoverflow:clipを
   付けるとブラウザのoverflow伝播(propagation)によりviewport(スクロール
   そのもの)がクリップされてしまうため、専用のラッパーで囲む。 */
.site-scroll-clip {
  overflow: clip;
}

/* ------------------------------------------------------------------
   Parts
------------------------------------------------------------------ */

@keyframes sound-bar-animation {
  0%, 100% {
    height: calc(var(--bar-height-0) * var(--animation-state, 1) * var(--bar-boost, 1));
  }
  20% {
    height: calc(var(--bar-height-1) * var(--animation-state, 1) * var(--bar-boost, 1));
  }
  40% {
    height: calc(var(--bar-height-2) * var(--animation-state, 1) * var(--bar-boost, 1));
  }
  60% {
    height: calc(var(--bar-height-3) * var(--animation-state, 1) * var(--bar-boost, 1));
  }
  80% {
    height: calc(var(--bar-height-4) * var(--animation-state, 1) * var(--bar-boost, 1));
  }
}
.js-sound-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  --animation-state: 0;
  &.js-sound-icon--active {
    --animation-state: 1;
  }
  &.js-sound-icon--inactive {
    --animation-state: 0;
  }
  .bar {
    display: block;
    width: 2px;
    min-height: 2px;
    background-color: currentColor;
    animation-name: sound-bar-animation;
    animation-duration: var(--bar-animation-duration, 0.5s);
    animation-delay: var(--bar-animation-delay, 0s);
    animation-iteration-count: infinite;
  }
}

/* ------------------------------------------------------------------
   Intro
------------------------------------------------------------------ */
.intro-section {
  position: fixed;
  /* position: relative; */
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--cl-black);
  transition: opacity .4s, transform ease-out 0.5s, display .4s allow-discrete;
  &.remove {
    opacity: 0;
    transform: scale(1.1);
    display: none;
    @starting-style {
      opacity: 1;
      display: block;
    }
  }
  .intro-bg {
    z-index: -1;
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .intro-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    border-radius: 1.6rem;
    width: min(46rem, 90%);
    height: auto;
    padding: 4rem 2.4rem;
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    transition: transform 300ms;
    &:not(:hover):not(:focus-within) {
      .intro-button--no {
        background-color: rgba(22,22,22,0.9);
        border-color: rgba(255,255,255,0.5);
      }
    }
  }
  .intro-text {
    font-family: var(--ff-eng);
    font-size: 1.2rem;
    font-weight: var(--fw-medium);
    span {
      display: block;
    }
  }
  .intro-logo {
    width: min(90%, 15.7rem);
    margin-bottom: 2rem;
  }
  .intro-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
    transition: opacity 0.6s;
    &.disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }
  .intro-button {
    appearance: none;
    border: none;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.4);
    color: var(--cl-white);
    height: 4rem;
    width: 19rem;
    cursor: pointer;
    gap: 2rem;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    border: 1px solid transparent;
    .text {
      font-family: var(--ff-mono);
      font-size: var(--fz-small);
      font-weight: var(--fw-light);
      letter-spacing: 0;
      color: var(--cl-white);
    }
    @media (hover: hover) {
      &:hover {
        background-color: rgba(22,22,22,0.9);
        border-color: rgba(255,255,255,0.5);
      }
    }
    &:focus {
      background-color: rgba(22,22,22,0.9);
      border-color: rgba(255,255,255,0.5);
    }
  }
}

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------ */
.site-header {
  --header-width: min(30rem, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 4rem;
  width: var(--header-width);
  padding: 0 1rem;
  z-index: 1000;
  left: calc(50% - var(--header-width)/2);
  @media (max-width: 768px) {
    left: calc(48% - var(--header-width)/2);
  }
  .site-header__logo {
    width: min(15.7rem, 50vw); 
    height: auto;
    display: block;
    margin: 0;
    a,svg {
      display: block;
      width: 100%;
    }
  }
  .site-header__toggle-nav {
    appearance: none;
    border: none;
    background: none;
    position: absolute;
    border-radius: 0;
    padding: 0;
    margin: 0;
    top: -1.2rem;
    right: 0;
    /* transform: translateY(-50%); */
    width: 5rem;
    height: 5rem;
    cursor: pointer;
    --bar-width: 2.4rem;
    --bar-gap: 0.6rem;
    --bar-gap-progress: 1;
    transition: background-color 0.2s;
    border-radius: 0.4rem;
    @media (hover: hover) {
      &:hover {
        background-color: rgba(255,255,255,0.1);
      }
    }
    .bar {
      display: block;
      width: var(--bar-width);
      height: 1px;
      background-color: var(--cl-white);
      position: absolute;
      left: calc(50% - var(--bar-width)/2);
      &.bar--0 {
        top: calc(50% - var(--bar-gap)/2 * var(--bar-gap-progress));
      }
      &.bar--1 {
        top: calc(50% + var(--bar-gap)/2 * var(--bar-gap-progress));
      }
    }
  }
}


@keyframes mouseHit {
  0% {
    background-color: rgba(255,255,255,0.0);
  }
  20% {
    background-color: rgba(255,255,255,0.035);
  }
  100% {
    background-color: rgba(255,255,255,0.0);
  }
}

.site-navigation {
  --nav-width: min(46rem, 100%);
  position: fixed;
  z-index: 999;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--nav-width);
  height: auto;
  background-color: rgba(255,255,255,.1);
  backdrop-filter: blur(4px) brightness(0.3);
  border-radius: 1.6rem;
  padding: 8rem 4rem 4rem;

  &[aria-hidden="true"] {
    display: none;
  }
  &[aria-hidden="false"] {
    display: block;
  }

  @media (max-width: 768px) {
    padding: 8rem 6rem 4rem;
  }
  .site-navigation__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    @media (max-width: 768px) {
      left: 1.5em;
    }
    .site-navigation__item {
      display: block;
      opacity: 0;
      &.site-navigation__item--home {
        grid-row: 1 / 10;
      }
      a {
        font-family: var(--ff-mono);
        font-size: var(--fz-regular);
        font-weight: var(--fw-light);
        letter-spacing: var(--ls-mono, 0);
        color: var(--cl-white);
        text-decoration: none;
        position: relative;
        display: block;
        padding-left: 1rem;
        line-height: 2.4;
        border-radius: 0.4rem;
        @media (max-width: 768px) {
          font-size: var(--fz-medium);
          line-height: 3.2;
        }
        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 50%;
          left: 0;
          width: 0.4rem;
          height: 1px;
          background-color: currentColor;
          transition: width var(--ease-out-quart) 0.2s;
        }
        span {
          display: block;
          transition: transform var(--ease-out-quart) 0.25s;
          will-change: transform;
        }
        .icon {
          font-size: 1.2em;
          display: inline-block;
          margin-left: 0.5em;
        }
        .icon--hello {
          animation: waveHand 5s ease-in-out infinite forwards;
        }
        @media (hover: hover) {
          &:hover {
            animation: mouseHit 0.4s;
            &::before {
              width: 1.0rem;
            }
            span {
              transform: translateX(1.2rem);
            }
          }
        }
        &:focus {
          animation: mouseHit 0.4s;
          &::before {
            width: 1.0rem;
          }
          span {
            transform: translateX(1.2rem);
          }
        }
      }
    }
  }
  .site-navigation__sub-list {
    list-style-type: none;
    padding: 0 0 0 0.5em;
    margin: 0.25em 0 0 0.1em;
    border-left: 1px solid rgba(255,255,255,0.5);
    .site-navigation__sub-item {
      a {
        font-size: var(--fz-small);
        @media (max-width: 768px) {
          font-size: var(--fz-regular);
        }
      }
    }
  }
}

@keyframes waveHand {
  0% {
    transform: rotate(-30deg);
  }
  15%,45% {
    transform: rotate(-22deg);
  }
  30%,60% {
    transform: rotate(-38deg);
  }
  90%,100% {
    transform: rotate(-30deg);
  }
}
@keyframes shakeHands {
  0%, 100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
.site-header-contact {
  position: fixed;
  z-index: 1000;
  top: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 0.8rem;
  background-color: rgba(0,0,0,0.1);
  color: var(--cl-white);
  font-size: var(--fz-medium);
  cursor: pointer;
  transition: background-color 0.1s, width 0.2s, clip-path 0.2s;
  @media (max-width: 768px) {
    display: none;
  }
  &::before {
    content: 'Get in touch!';
    color: var(--cl-white);
    position: absolute;
    right: 5.6rem;
    font-size: var(--fz-small);
    letter-spacing: var(--ls-small, 0);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
  }
  /* clip-path: inset(0 0 0 0 round 0.8rem); */
  .icon {
    position: absolute;
    right: 1rem;
    display: block;
    font-size: 2.8rem;
    line-height: 1;
    transform-origin: 30% 100%;
    animation: waveHand 5s ease-in-out infinite forwards;
    &.icon--hover {
      display: none;
    }
  }
  &.is-hover {
    background-color: rgba(255,255,255,0.2);
    width: 17rem;
    &::before {
      opacity: 1;
      transform: translateX(-0.5rem);
    }
    .icon {
      animation: shakeHands 0.4s ease-in-out infinite;
      transform-origin: center center;
      right: 1.2rem;
      font-size: 3.2rem;
      &.icon--hover {
        display: block;
      }
      &.icon--default {
        display: none;
      }
    }
  }
}

.site-sound-toggle {
  position: fixed;
  z-index: 1000;
  bottom: 4rem;
  right: 4rem;
  appearance: none;
  border: none;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--cl-white);
  transition: background-color 100ms;
  cursor: pointer;
  border-radius: 0.4rem;
  @media (any-hover: hover) {
    &:hover {
      background-color: rgba(255,255,255,0.1);
    }
  }
  @media (max-width: 768px) {
    bottom: 2rem;
    right: 2rem;
  }
  .site-sound-toggle__text {
    display: inline-block;
    width: 9ch;
    font-family: var(--ff-mono);
    letter-spacing: var(--ls-mono, 0);
    font-size: var(--fz-small);
    font-weight: var(--fw-light);
    line-height: 1.6;
    text-align: left;
  }
}

.site-frame {
  pointer-events: none;
  .site-frame__frame {
    --frame-size: 1.6rem;
    --frame-offset: 2rem;
    @media (max-width: 768px) {
      --frame-size: 1.6rem;
      --frame-offset: 0.8rem;
    }
    span {
      position: fixed;
      z-index: 10;
      display: block;
      width: var(--frame-size);
      height: var(--frame-size);
      border-style: solid;
      border-color: var(--cl-white);
      opacity: 0.75;
      &:nth-child(1) {
        border-width: 1px 0 0 1px;
        top: var(--frame-offset);
        left: var(--frame-offset);
      }
      &:nth-child(2) {
        border-width: 1px 1px 0 0;
        top: var(--frame-offset);
        right: var(--frame-offset);
      }
      &:nth-child(3) {
        border-width: 0 0 1px 1px;
        bottom: var(--frame-offset);
        left: var(--frame-offset);
      }
      &:nth-child(4) {
        border-width: 0 1px 1px 0;
        bottom: var(--frame-offset);
        right: var(--frame-offset);
      }
    }
  }
  .site-frame__copy {
    position: fixed;
    top: 4rem;
    left: 4rem;
    font-family: var(--ff-mono);
    letter-spacing: var(--ls-mono, 0);
    font-size: var(--fz-small);
    font-weight: var(--fw-light);
    line-height: 1.6;
    opacity: var(--op-disabled);
    z-index: 100;
    @media (max-width: 768px) {
      top: 3rem;
      left: 2rem;
    }
    @media (max-width: 480px) {
      display: none;
    }
  }
}

.site-stats {
  position: fixed;
  bottom: 4rem;
  left: 4rem;
  font-family: var(--ff-mono);
  letter-spacing: var(--ls-mono, 0);
  font-size: var(--fz-small);
  font-weight: var(--fw-light);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  @media (max-width: 768px) {
    bottom: 3rem;
    left: 2rem;
  }
}


/* ------------------------------------------------------------------
   Index
------------------------------------------------------------------ */
.index-top {
  position: relative;
  min-height: 100svh;
  width: 100%;
  .index-top__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @media (max-width: 768px) {
      top: -5svh;
    }
  }
  .index-top__view-more {
    --button-width: 9.6rem;
    --aspect-ratio: 4/3;
    appearance: none;
    border-radius: 0;
    background: none;
    border: none;
    width: 9.6rem;
    height: auto;
    aspect-ratio: var(--aspect-ratio);
    top: calc(50% - var(--button-width) / var(--aspect-ratio) / 2);
    left: calc(50% - var(--button-width) / 2);
    position: absolute;
    display: block;
    color: var(--cl-white);
    cursor: pointer;
    @media (max-width: 768px) {
      top: calc(50% - var(--button-width) / var(--aspect-ratio) / 2 - 10svh);
    }
    .frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      span {
        position: absolute;
        display: block;
        --frame-size: 1.2rem;
        width: var(--frame-size);
        height: var(--frame-size);
        border-style: solid;
        border-color: var(--cl-white);
        transition: transform 0.6s var(--ease-out-quart), width 0.6s var(--ease-out-quart), height 0.6s var(--ease-out-quart);
        &:nth-child(1) {
          top: 0;
          left: 0;
          border-width: 1px 0 0 1px;
        }
        &:nth-child(2) {
          top: 0;
          right: 0;
          border-width: 1px 1px 0 0;
        }
        &:nth-child(3) {
          bottom: 0;
          right: 0;
          border-width: 0 1px 1px 0;
        }
        &:nth-child(4) {
          bottom: 0;
          left: 0;
          border-width: 0 0 1px 1px;
        }
      }
    }
    @media (any-hover: hover) {
      &:hover {
        .frame span {
          width: calc(var(--frame-size) * 1.5);
          height: calc(var(--frame-size) * 1.5);
        }
        .frame span:nth-child(1) {
          transform: translate(-0.4rem, -0.4rem);
        }
        .frame span:nth-child(2) {
          transform: translate(0.4rem, -0.4rem);
        }
        .frame span:nth-child(3) {
          transform: translate(0.4rem, 0.4rem);
        }
        .frame span:nth-child(4) {
          transform: translate(-0.4rem, 0.4rem);
        }
      }
    }

    .icon {
      --icon-size: 4rem;
      --icon-aspect-ratio: 40/32;
      position: absolute;
      top: calc(50% - (var(--icon-size) / (var(--icon-aspect-ratio))) * 0.5);
      left: calc(50% - var(--icon-size) * 0.5);
      width: var(--icon-size);
      height: auto;
      aspect-ratio: var(--icon-aspect-ratio);
      svg {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .text {
      position: absolute;
      top: calc(100% + 1.6rem);
      left: 0;
      text-align: center;
      width: 100%;
      font-family: var(--ff-eng);
      font-size: var(--fz-medium);
      font-weight: var(--fw-medium);
    }
  }
  .index-top__main {
    position: absolute;
    right: 8rem;
    bottom: min(11rem, 11svh);
    @media (max-width: 768px) {
      right: auto;
      left: 2rem;
      bottom: min(16rem, 16svh);
    }
  }
  .index-top__main-copy {
    --fz: min(4.6rem, 10vw);
    font-family: var(--ff-jp);
    font-size: var(--fz);
    letter-spacing: var(--ls-medium);
    font-weight: var(--fw-bold);
    line-height: calc(72 / 48);
    position: relative;
    left: calc(-1 * var(--fz) * 0.55);
    margin-bottom: 3.2rem;
    white-space: nowrap;
    span {
      display: inline-block;
    }
    .kerning {
      font-style: normal;
      margin-left: -0.25em;
    }
    @media (max-width: 768px) {
      --fz: min(4.0rem, 8vw);
    }
  }
  .index-top__main-desc {
    font-family: var(--ff-eng);
    font-size: var(--fz-small);
    font-weight: var(--fw-medium);
    line-height: calc(24 / 12);
    overflow: clip;
    span {
      display: block;
      min-width: 1em;
      min-height: 1lh;
      white-space: nowrap;
    }
  }
}

body.is-modal-open {
  overflow: hidden;
}

body.is-intro-open {
  overflow: hidden;
}

.index-top-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out-quart), visibility 0.28s var(--ease-out-quart);
  display: grid;
  place-items: center;
  &.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .index-top-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(0.3rem);
    @media (max-width: 768px) {
      backdrop-filter: none;
    }
  }
  .index-top-modal__dialog {
    --modal-gutter-v: max(2rem, 4svh);
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(112rem, calc(100vw - 4rem));
    max-height: calc(100svh - (var(--modal-gutter-v) * 2));
    min-height: 0;
    margin: var(--modal-gutter-v) auto;
    background: rgba(8, 8, 8, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.6rem;
    padding: 2.4rem 1.6rem 1.6rem;
    overflow: hidden;
    &:fullscreen, &:-webkit-full-screen {
      width: 100vw;
      max-width: 100vw;
      height: 100vh;
      max-height: 100vh;
      margin: 0;
      border: none;
      border-radius: 0;
      background: #000;
      justify-content: center;
      padding: 2rem;
    }
  }
  .index-top-modal__close {
    appearance: none;
    border: none;
    background: none;
    color: var(--cl-white);
    line-height: 1;
    cursor: pointer;
    position: absolute;
    padding: 0;
    top: 0.8rem;
    right: 1.2rem;
    z-index: 2;
    width: 4rem;
    height: 4rem;
    &::before,&::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3.2rem;
      height: 1px;
      background-color: currentColor;
      transform-origin: center;
    }
    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
  .index-top-modal__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    flex: 1 1 auto;
    background: #000;
    border-radius: 0.8rem;
    overflow: hidden;
    video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
  }
  .index-top-modal__controls {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.2rem;
    flex-shrink: 0;
  }
  .index-top-modal__play-toggle {
    appearance: none;
    /* border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08); */
    border: none;
    background: none;
    color: var(--cl-white);
    font-family: var(--ff-mono);
    font-weight: var(--fw-light);
    font-size: var(--fz-small);
    border-radius: 0.6rem;
    min-width: 5.4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    svg {
      width: 2.4rem;
      height: auto;
      display: block;
    }
  }
  .index-top-modal__seekbar {
    width: 100%;
    accent-color: var(--cl-white);
  }
  .index-top-modal__time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ff-mono);
    font-size: var(--fz-small);
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-mono, 0);
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.88);
  }
  .index-top-modal__sound-toggle {
    appearance: none;
    border: none;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--cl-white);
    cursor: pointer;
    border-radius: 0.4rem;
    transition: background-color 100ms;
    @media (any-hover: hover) {
      &:hover {
        background-color: rgba(255,255,255,0.1);
      }
    }
    .site-sound-toggle__text {
      display: inline-block;
      width: 9ch;
      font-family: var(--ff-mono);
      letter-spacing: var(--ls-mono, 0);
      font-size: var(--fz-small);
      font-weight: var(--fw-light);
      line-height: 1.6;
      text-align: left;
    }
  }
  .index-top-modal__fullscreen-toggle {
    appearance: none;
    border: none;
    background: none;
    color: var(--cl-white);
    cursor: pointer;
    padding: 0.6rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 100ms;
    @media (any-hover: hover) {
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
    svg {
      width: 2rem;
      height: auto;
      display: block;
    }
  }
}

@media (max-width: 768px) {
  .index-top-modal {
    .index-top-modal__dialog {
      --modal-gutter-v: 1.2rem;
      width: calc(100vw - 2.4rem);
      margin: var(--modal-gutter-v) auto;
      padding: 1.2rem;
    }
    .index-top-modal__controls {
      grid-template-columns: auto 1fr auto auto auto;
      grid-template-areas: "play . sound sound fullscreen" "seek seek seek time time";
      gap: 1rem;
      justify-items: start;
    }
    .index-top-modal__play-toggle {
      grid-area: play;
    }
    .index-top-modal__seekbar {
      grid-area: seek;
    }
    .index-top-modal__time {
      grid-area: time;
    }
    .index-top-modal__fullscreen-toggle {
      grid-area: fullscreen;
    }
    .index-top-modal__sound-toggle {
      grid-area: sound;
      margin-left: -0.2rem;
    }
  }
}

/* ------------------------------------------------------------------
  Index About
------------------------------------------------------------------ */
.index-about {
  position: relative;
  padding: 0;
  height: 400svh;
  margin: calc(var(--section-padding) * 2) 0;
  overflow: clip;
  width: 100%;
  padding-top: 14svh;
  .index-about__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(4rem, 4svh);
  }
  .index-about-bg-slider {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    @media (max-width: 768px) {
      display: none;
    }
    .index-about-bg-slider__item {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.6s 0.3s var(--ease-out-quart), visibility 0.6s 0.3s var(--ease-out-quart);
      transition-behavior: allow-discrete;
      &.is-active {
        transition: opacity 0.6s var(--ease-out-quart), visibility 0.6s var(--ease-out-quart);
        opacity: 1;
        visibility: visible;
        @starting-style {
          opacity: 0;
        }
      }
      img,video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &::before {
        content: "";
        position: absolute;
        inset: -5%;
        pointer-events: none;
        backdrop-filter: blur(4px) brightness(0.25);

        background: radial-gradient(
          ellipse at center,
          rgba(0, 0, 0, .0) 40%,
          rgba(0, 0, 0, .3) 70%,
          #000 100%
        );
      }
    }
  }
  .index-about-media-slider {
    --slide-gap: 14rem;
    --slide-width: var(--container-width);
    --slide-aspect-ratio: 2/1;
    --slide-num: 5;
    --slide-max-height: min(60svh, calc(100svh - 33rem));
    position: relative;
    width: 100%;
    max-height: var(--slide-max-height);
  }
  .index-about-media-slider__track {
    display: flex;
    gap: var(--slide-gap);
    padding: 0;
    margin: 0;
    width: calc(var(--slide-width) * var(--slide-num) + var(--slide-gap) * (var(--slide-num) - 1));
    height: min(calc(var(--slide-width) / var(--slide-aspect-ratio)), var(--slide-max-height));
    max-height: var(--slide-max-height);
    overflow: hidden;
  }
  .index-about-media-slider__item {
    width: 100%;
    height: 100%;
    max-height: var(--slide-max-height);
    aspect-ratio: var(--slide-aspect-ratio);
    overflow: hidden;
    border-radius: 4rem;
    @media (max-width: 768px) {
      border-radius: 2rem;
    }
    img,video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .index-about-desc-slider {
    position: relative;
    display: block;
    width: 100%;
    height: 14rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .index-about-desc-slider__item {
    display: grid;
    grid-template-areas: "no no" "title desc";
    grid-template-columns: 5fr 7fr;
    gap: 1rem 1rem;
    align-items: end;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    bottom: 0;
    left: 0;
    .no {
      grid-area: no;
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-small);
    }
    .ttl {
      grid-area: title;
      font-family: var(--ff-jp);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-small);
      line-height: calc(72 / 48);
      white-space: nowrap;
      span {
        display: block;
      }
    }
    .desc {
      grid-area: desc;
      font-family: var(--ff-jp);
      font-size: var(--fz-medium);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small);
      span {
        display: inline-block;
        white-space: nowrap;
        @media (max-width: 768px) {
          display: inline;
          white-space: normal;
        }
      }
    }
  }
  @media (max-width: 768px) {
    .index-about-media-slider {
      --slide-gap: 4rem;
      --slide-width: min(100vw - 4rem, 100%);
      --slide-aspect-ratio: 1/1;
      /* --slide-num: 5; */
      --slide-max-height: min(60svh, calc(100svh - 24rem));
    }
    .index-about-desc-slider {
      height: auto;
    }
    .index-about-desc-slider__item {
      grid-template-areas: "no no" "title title" "desc desc";
      grid-template-columns: 1fr;
      gap: 0.4rem 0.4rem;
      .desc {
        padding-top: 0.8rem;
        br {
          display: none;
        }
      }
    }
  }
}

/* ------------------------------------------------------------------
   Index Shared
------------------------------------------------------------------ */

.section-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  .section-head__title {
    position: absolute;
    bottom: -0.8rem;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: min(6rem, 6vw);
    .ttl {
      font-size: min(14rem,10vw);
      font-weight: var(--fw-medium);
      line-height: 1;
      margin-bottom: calc(0.5em - 0.6lh);
    }
    .sub {
      font-size: var(--fz-large);
      letter-spacing: 0.2em;
      line-height: calc(44 / 32);
      .en {
        display: inline-block;
        letter-spacing: 0;
        margin-left: 0.8rem;
        font-size: var(--fz-small);
        font-family: var(--ff-eng);
        line-height: calc(16 / 12);
      }
    }
  }
  @media (max-width: 768px) {
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    .section-head__title {
      /* bottom: -0.4rem; */
      position: relative;
      bottom: auto;
      left: auto;
      gap: var(--fz-medium);
      flex-direction: column;
      align-items: center;
      .ttl {
        font-size: min(10rem, 16vw);
        margin-bottom: 0.1em;
      }
      .sub {
        font-size: var(--fz-medium);
        letter-spacing: 0.2em;
        line-height: calc(44 / 32);
        text-align: center;
        br {
          display: none;
        }
        .en {
          display: block;
          letter-spacing: 0;
          font-size: var(--fz-small);
          font-family: var(--ff-eng);
          line-height: calc(16 / 12);
          padding-top: 0.25em;
        }
      }
    }
  }
}


.link-prompt {
  text-decoration: none;
  color: var(--cl-white);
  display: grid;
  padding: 3.2rem;
  border-radius: 1.6rem;
  border: 1px solid var(--cl-white);
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  max-width: 44rem;
  margin-left: auto;
  width: 100%;
  min-height: 16rem;
  grid-template-columns: 1fr;
  @media (max-width: 768px) {
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: none;
  }
  .ttl {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-bottom: 0.8rem;
    .jp {
      font-family: var(--ff-jp);
      font-size: 2.4rem;
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-medium);
      line-height: calc(72 / 48);
    }
    .en {
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      text-transform: uppercase;
    }
  }
  .ai-text {
    font-family: var(--ff-mono);
    letter-spacing: var(--ls-mono, 0);
    font-size: var(--fz-regular);
    font-weight: var(--fw-light);
    line-height: 1.6;
    /* opacity: var(--op-disabled); */
    margin-bottom: 2.4rem;
    height: calc(1lh * var(--lines, 1));
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - (1lh - 1em) * 0.5), transparent 100%);
  }
  .button {
    position: relative;
    text-decoration: none;
    color: var(--cl-white);
    border-style: solid;
    border-width: 1px;
    border-color: var(--cl-white);
    border-radius: 0.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.8rem;
    text-transform: uppercase;
    font-size: var(--fz-small);
    font-family: var(--ff-eng);
    letter-spacing: var(--ls-small, 0);
    transition: color 200ms, background-color 150ms;
    opacity: 0.3;
    @media (any-hover: hover) {
      &:hover {
        background-color: rgba(255,255,255,0.2);
      }
    }
    &:focus {
      background-color: rgba(255,255,255,0.2);
    }
  }
  .icon {
    position: absolute;
    right: 1rem;
    aspect-ratio: 1/1;
    width: 3rem;
  }
}

/* ------------------------------------------------------------------
   Index Service
------------------------------------------------------------------ */

.index-service {
  position: relative;
  min-height: 1150svh;
  margin-top: 100svh;
  z-index: 1;
  .index-service-head__movies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    pointer-events: none;
  }
  .index-service__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    pointer-events: none;
    /* モバイルではJS側(initIndexServiceHTMLCanvas)がこのcanvasへの描画を
       行わず実DOMをそのまま表示するため、防御的に非表示にしておく。 */
    @media (max-width: 768px) {
      display: none;
    }
  }
  .index-service-section {
    position: absolute;
    top: 0;
    left: calc(50% - var(--container-width)/2);
    min-height: 100svh;
    width: 100%;
    max-width: var(--container-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    .index-service-section__header {
      .no {
        display: block;
        font-family: var(--ff-eng);
        font-size: var(--fz-medium);
        font-weight: var(--fw-medium);
        line-height: calc(24 / 12);
        margin-bottom: 1.6rem;
      }
      .ttl {
        font-family: var(--ff-jp);
        font-size: var(--fz-large);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-medium);
        line-height: calc(72 / 48);
        margin-bottom: 1.6rem;
      }
      .en{
        font-family: var(--ff-eng);
        font-size: var(--fz-small);
        font-weight: var(--fw-medium);
        line-height: calc(24 / 12);
      }
    }
    .index-service-section__body {
      position: absolute;
      p {
        &:not(:last-child) {
          margin-bottom: 1lh;
        }
      }
      @media (max-width: 480px) {
        br {
          display: none;
        }
      }
    }
  }
}

.index-service-result-movie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  backdrop-filter: brightness(0.3);
  z-index: 0;
  @media (max-width: 768px) {
    backdrop-filter: none;
    background-color: rgba(255,255,255,0.1);
  }
  .index-service-result-movie__inner {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: var(--cl-black);
    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::before {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 2;
      inset: -2px;
      --ai-hue: 1;
      --ai-energy: 1;
    }
    &::before {
      background: conic-gradient(
        from calc(var(--ai-hue) * 1deg),
        hsla(calc((var(--ai-hue) + 0) * 1deg), 100%, 62%, 0.8),
        hsla(calc((var(--ai-hue) + 95) * 1deg), 100%, 62%, 0.8),
        hsla(calc((var(--ai-hue) + 170) * 1deg), 100%, 62%, 0.85),
        hsla(calc((var(--ai-hue) + 260) * 1deg), 100%, 62%, 0.8),
        hsla(calc((var(--ai-hue) + 360) * 1deg), 100%, 62%, 0.8)
      );
      padding: 2px;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      filter: blur(0.8px) saturate(1.3);
      opacity: calc(0.5 + var(--ai-energy) * 0.42);
      animation: promptGlowRotate 8s linear infinite;
    }
  }
  .index-service-result-movie__end-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,.8);
    display: grid;
    place-items: center;
    /* opacity/visibilityはGSAP(autoAlpha)がスクロール位置に応じて毎フレーム
       直接styleへ書き込む。ここでのtransitionは実時間ベースでスクラブと
       ズレるため持たせない。 */
    opacity: 0;
    visibility: hidden;

    .inner {
      width: 28rem;
      height: 16rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: var(--ff-eng);
      font-weight: var(--fw-regular);
      line-height: 1.2;
      position: relative;
    }
    .frame {
      --size: 1.6rem;
      span {
        display: block;
        width: var(--size);
        aspect-ratio: 1/1;
        border-style: solid;
        border-color: var(--cl-white);
        position: absolute;
        opacity: var(--end-card-progress, 0);
        &:nth-child(1) {
          top: 0;
          left: 0;
          border-width: 1px 0 0 1px;
          transform: translate(calc(var(--size) * -1 * (1 - var(--end-card-progress, 0))), calc(var(--size) * -1 * (1 - var(--end-card-progress, 0))));
        }
        &:nth-child(2) {
          top: 0;
          right: 0;
          border-width: 1px 1px 0 0;
          transform: translate(calc(var(--size) * (1 - var(--end-card-progress, 0))), calc(var(--size) * -1 * (1 - var(--end-card-progress, 0))));
        }
        &:nth-child(3) {
          bottom: 0;
          left: 0;
          border-width: 0 0 1px 1px;
          transform: translate(calc(var(--size) * -1 * (1 - var(--end-card-progress, 0))), calc(var(--size) * (1 - var(--end-card-progress, 0))));
        }
        &:nth-child(4) {
          bottom: 0;
          right: 0;
          border-width: 0 1px 1px 0;
          transform: translate(calc(var(--size) * (1 - var(--end-card-progress, 0))), calc(var(--size) * (1 - var(--end-card-progress, 0))));
        }
      }
    }
    .next {
      font-size: var(--fz-regular);
      letter-spacing: var(--ls-small);
      margin: 0;
      opacity: var(--end-card-progress, 0);
      transform: translateY(calc(1rem * (1 - var(--end-card-progress, 0))));
    }
    .name {
      font-size: var(--fz-xlarge);
      font-weight: var(--fw-medium);
      line-height: 1.4;
      opacity: var(--end-card-progress, 0);
      transform: translateY(calc(1rem * (1 - var(--end-card-progress, 0))));
    }
    .desc {
      font-size: var(--fz-small);
      margin-top: 0.8rem;
      letter-spacing: var(--ls-small);
      opacity: var(--end-card-progress, 0);
      transform: translateY(calc(1rem * (1 - var(--end-card-progress, 0))));
    }
  }
}

@keyframes promptGlowRotate {
  from {
    --ai-hue: 0;
    /* --ai-energy: 0; */
  }
  to {
    --ai-hue: 360;
    /* --ai-energy: 1; */
  }
}

/* ------------------------------------------------------------------
   Index Strength
------------------------------------------------------------------ */

.index-strength {
  position: relative;
  min-height: 600svh;
  width: 100%;
  background-color: var(--cl-black);
  z-index: 2;
  --gap: 16rem;
  @media (max-width: 768px) {
    --gap: 2rem;
  }
}

.index-strength-canvas {
  position: absolute;
  top: 50svh;
  right: calc(50% - var(--container-l-width)/2 - var(--gap, 0) * 0.25);
  width: calc(var(--container-l-width) / 2);
  aspect-ratio: 1 / 1;
  max-width: 60rem;
  max-height: 80svh;
  aspect-ratio: 1 / 1;
  transform: translateY(-48%);
  pointer-events: none;
  @media (max-width: 768px) {
    width: 33svh;
    height: 33svh;
    right: calc(50% - calc(33svh) / 2);
    top: 12svh;
    transform: none;
  }
  .index-strength-canvas__canvas,
  .index-strength-canvas__text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .index-strength-canvas__text-overlay {
    mix-blend-mode: screen;
    opacity: 0;
    img {
      /* canvas側は正規化座標(0-1)をそのままNDCへ引き伸ばして描画しているため、
         静止画側もimgのグローバルmax-width制約を上書きしてボックス全体に引き伸ばし一致させる */
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
    }
  }
}

.index-strength-section {
  height: 100svh;
  width: var(--container-l-width);
  left: calc(50% - var(--container-l-width)/2);
  max-width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--gap);
  .index-strength-section__text {
    width: 50%;
    .no {
      display: block;
      font-family: var(--ff-eng);
      font-size: var(--fz-medium);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      margin-bottom: 2.4rem;
    }
    .ttl {
      font-family: var(--ff-jp);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-medium);
      line-height: calc(72 / 48);
      margin-bottom: 0.8rem;
      &.yakuhan {
        text-indent: -0.5em;
      }
    }
    .en{
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      margin-bottom: 2.4rem;
    }
    .desc {
      p {
        font-family: var(--ff-jp);
        font-weight: var(--fw-medium);
        letter-spacing: var(--ls-small, 0);
        &:not(:last-child) {
          margin-bottom: 1lh;
        }
      }
    }
  }
  .index-strength-section__fig {
    width: calc(50% - var(--gap) * 1);
    position: relative;
    max-width: 60rem;
    img {
      /* #indexStrengthCanvas が同じ画像をパーティクルとして再現するため、静止画は非表示にする */
      visibility: hidden;
    }
  }
  @media (max-width: 768px) {
    padding-top: 8svh;
    width: var(--container-width);
    left: calc(50% - var(--container-width)/2);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .index-strength-section__text {
      width: 100%;
    }
    .index-strength-section__fig {
      width: 70%;
      max-width: 70%;
    }
  }
}

.index-globe {
  position: relative;
  min-height: 900svh;
  margin-top: -100svh;
  z-index: 3;
}

/* ------------------------------------------------------------------
   Index Vision
------------------------------------------------------------------ */

.index-vision {
  position: absolute;
  height: 100svh;
  top: 0;
  left: 0;
  width: 100%;
  overflow: clip;
}
.index-vision-section {
  height: 100%;
  width: var(--container-l-width);
  position: absolute;
  top: 0;
  left: calc(50% - var(--container-l-width)/2);
  display: flex;
  justify-content: center;
  align-items: center;
  .index-vision-section__header {
    text-align: center;
    width: 100%;
    .ttl {
      font-family: var(--ff-jp);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-medium);
      line-height: calc(72 / 48);
      margin-bottom: 1.6rem;
    }
    .en {
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
    }
  }
  .index-vision-section__body {
    display: none;
    position: relative;
  }
  .index-vision-section__desc {
    position: absolute;
    top: 50%;
    width: 100%;
    p {
      font-family: var(--ff-jp);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small, 0);
      &:not(:last-child) {
        margin-bottom: 1lh;
      }
    }
  }
  &.index-vision-section--has-body {
    justify-content: space-between;
    .index-vision-section__header {
      text-align: left;
      width: 50%;
      .ttl {
        br {
          display: none;
        }
        span {
          display: block;
        }
      }
    }
    .index-vision-section__body {
      display: block;
      width: 50%;
    }
  }

  @media (max-width: 768px) {
    width: var(--container-width);
    left: calc(50% - var(--container-width)/2);
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    .index-vision-section__header {
      width: 100%;
      .ttl {
        span {
          display: block;
        }
        br {
          display: none;
        }
      }
    }
    .index-vision-section__desc {
      p {
        font-size: 2rem;
      }
    }
    &.index-vision-section--has-body {
      justify-content: center;
      .index-vision-section__header {
        display: none;
      }
      .index-vision-section__body {
        width: 100%;
        height: 80svh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1lh), transparent 100%);
        .link-prompt {
          width: 100%;
        }
      }
    }
  }
}

/* ------------------------------------------------------------------
   Index Recruit
------------------------------------------------------------------ */

.index-recruit {
  position: absolute;
  height: 100svh;
  top: 0;
  left: 0;
  width: 100%;
  overflow: clip;
}
.index-recruit-section {
  height: 100%;
  width: var(--container-l-width);
  position: absolute;
  top: 0;
  left: calc(50% - var(--container-l-width)/2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .index-recruit-section__header {
    display: block;
    width: 60%;
    .ttl {
      font-family: var(--ff-jp);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-medium);
      line-height: calc(72 / 48);
      margin-bottom: 2.4rem;
      /* margin-bottom: 1.6rem; */
    }
    .detail {
      font-family: var(--ff-jp);
      font-size: var(--fz-medium);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small, 0);
      p {
        &:not(:last-child) {
          margin-bottom: 1lh;
        }
      }
    }
  }
  .index-recruit-section__body {
    display: block;
    width: 40%;
  }
  @media (max-width: 768px) {
    width: var(--container-width);
    left: calc(50% - var(--container-width)/2);
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    .index-recruit-section__header {
      width: 100%;
      height: 80svh;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .ttl {
        word-break: keep-all;
        margin-bottom: 2.4rem;
        span {
          display: block;
        }
      }
    }
    .index-recruit-section__body {
      width: 100%;
      height: 45svh;
      position: absolute;
      margin: 4rem 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* ------------------------------------------------------------------
   Index News
------------------------------------------------------------------ */

.index-news {
  position: absolute;
  height: 100svh;
  top: 0;
  left: 0;
  width: 100%;
  overflow: clip;
}
.index-news-body {
  display: flex;
  max-width: var(--container-l-width);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  @media (max-width: 768px) {
    max-width: var(--container-width);
  }
}
.index-news-viewall {
  display: flex;
  padding-top: 0.8rem;
  justify-content: flex-end;
  width: 100%;
  a {
    position: relative;
    text-decoration: none;
    color: var(--cl-white);
    font-size: var(--fz-regular);
    font-family: var(--ff-eng);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-small);
    display: flex;
    align-items: center;
    padding: 0.8rem 1.6rem;
    margin-right: -1.6rem;
    border-radius: 0.8rem;
    gap: 1em;
    &::after {
      content: '';
      display: block;
      background-color: currentColor;
      height: 1px;
      width: calc(100% - 1.6rem * 2);
      position: absolute;
      left: 1.6rem;
      bottom: 0.4rem;
      transform: scaleX(0);
      transition: 150ms transform ease;
    }
    @media (any-hover: hover) {
      &:hover::after {
        transform: scaleX(1);
      }
    }
    .icon {
      aspect-ratio: 1/1;
      width: 4rem;
      height: auto;
    }
  }
}

/* ------------------------------------------------------------------
   News List
------------------------------------------------------------------ */

.news-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
  width: 100%;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform-origin: left;
    transform: scaleX(var(--news-list-item-divider-scale, 1));
    opacity: 0.5;
  }
  @media (any-hover: hover) {
    &:has(> .news-list-item:hover) > .news-list-item:not(:hover) {
      .date,
      .category,
      .news-list-item-link {
        opacity: 0.6;
      }
    }
  }
}
.news-list-item {
  display: grid;
  padding: 2.4rem 0;
  font-size: var(--fz-regular);
  line-height: 1.7;
  grid-template-columns: 10rem 12rem min(10vw, 12rem) 1fr;
  grid-template-areas: "date category fig link";
  gap: 2.4rem;
  position: relative;
  --news-list-item-divider-scale: 1;
  transition: background-color 100ms;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(4px);
  @media (max-width: 768px) {
    backdrop-filter: none;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform-origin: left;
    transform: scaleX(var(--news-list-item-divider-scale, 1));
    opacity: 0.5;
  }
  .date {
    font-family: var(--ff-eng);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-small, 0);
    transition: opacity 200ms;
  }
  .news-list-item-fig {
    grid-area: fig;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.4rem;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .category {
    font-family: var(--ff-mono);
    letter-spacing: var(--ls-mono, 0);
    font-weight: var(--fw-light);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    transition: opacity 200ms;
    .category-name {
      &::before {
        content: '#';
      }
    }
  }
  .news-list-item-link {
    grid-area: link;
    text-decoration: none;
    color: var(--cl-white);
    transition: opacity 200ms;
  }
  .news-list-item-title {
    font-weight: var(--fw-medium);
    font-size: var(--fz-medium);
  }
  @media (any-hover: hover) {
    &:has(a:hover) {
      background-color: rgba(255,255,255,0.2);
    }
  }
  @media (max-width: 768px) {
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-areas: "date category category" "fig link link";
    gap: 1.6rem;
    padding: 1.6rem 0;
    .news-list-item-fig {
      width: 100%;
      aspect-ratio: 16/9;
    }
  }
}

@media (any-hover: hover) {
  .news-list-item-fig {
    display: none;
  }
}


/* ------------------------------------------------------------------
   News Archive (page-news.php)
------------------------------------------------------------------ */

.news-archive {
  max-width: var(--container-l-width);
  margin: 0 auto;
}
.news-archive__empty {
  color: var(--cl-white);
  font-size: var(--fz-regular);
}

.news-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 4.8rem;
  font-family: var(--ff-eng);
  font-size: var(--fz-regular);
  letter-spacing: var(--ls-small);
  .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 0.4rem;
    border-radius: 0.4rem;
    color: var(--cl-white);
    text-decoration: none;
    border: 1px solid transparent;
    opacity: 0.6;
    transition: background-color 100ms, border-color 200ms, opacity 200ms;
    &.dots {
      opacity: 0.4;
    }
    &.current {
      border-color: var(--cl-white);
      opacity: 1;
    }
    @media (any-hover: hover) {
      &:not(.dots):not(.current):hover {
        background-color: rgba(255,255,255,0.2);
        opacity: 1;
      }
    }
  }
}

/* ------------------------------------------------------------------
   News Thumbnail Stalker (マウスホバー時にカーソル追従で表示するサムネイル)
------------------------------------------------------------------ */

.news-thumb-stalker {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  will-change: transform;
  transition: opacity 300ms ease;
  img {
    display: block;
    max-width: 30rem;
    max-height: 30rem;
    width: auto;
    height: auto;
    border-radius: 0.8rem;
  }
  &.is-active {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   Index Contact
------------------------------------------------------------------ */

.index-contact {
  position: absolute;
  height: 100svh;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes shakingHands {
  0% {
    transform: translateY(0%) rotate(0deg);
  }
  25% {
    transform: translateY(2%) rotate(2deg);
  }
  75% {
    transform: translateY(-2%) rotate(-2deg);
  }
  100% {
    transform: translateY(0%) rotate(0deg);
  }
}

.index-contact-body {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-style: solid;
  border-width: 1px;
  border-color: var(--cl-white);
  padding: 3.2rem;
  border-radius: 0.8rem;
  width: min(65rem, var(--container-l-width));
  max-width: 100%;
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
  @media (max-width: 768px) {
    backdrop-filter: none;
  }
  .ttl {
    font-size: 4.8rem;
    font-weight: var(--fw-medium);
    line-height: calc(56 / 48);
    letter-spacing: 0.025em;
    text-align: center;
    margin-bottom: 2.4rem;
    .hands {
      display: inline-block;
      position: relative; 
      margin-left: 0.4rem;
      animation: shakingHands 1s infinite;
      top: 0.05em;
    }
  }
  .desc {
    .jp {
      font-size: var(--fz-regular);
      line-height: calc(32 / 14);
      font-weight: var(--fw-medium);
      text-align: center;
      margin-bottom: 1.6rem;
    }
    .en {
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(22 / 12);
      text-align: center;
      margin-bottom: 2.4rem;
    }
  }
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    border-radius: 0.6rem;
    color: var(--cl-white);
    background-image: linear-gradient(to left, #be202e, #f15b2a);
    text-decoration: none;
    width: 100%;
    height: 5.6rem;
    text-transform: uppercase;
    font-family: var(--ff-eng);
    position: relative;
    transition: color 200ms;
    overflow: clip;
    span {
      position: relative;
      z-index: 1;
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      transform: scaleX(0.75);
      opacity: 0;
      z-index: 0;
      transition: transform var(--ease-out-quart) 400ms,opacity var(--ease-out-quart) 400ms;
    }
    @media (any-hover: hover) {
      &:hover {
        color: #be202e;
        &::before {
          transform: scaleX(1);
          opacity: 1;
        }
      }
    }
    &:focus {
      color: #be202e;
      &::before {
        transform: scaleX(1);
        opacity: 1;
      }
    }
  }
}



/* ------------------------------------------------------------------
   Index Service DOM
------------------------------------------------------------------ */

.index-service-dom {
  position: relative;
  height: 100lvh;
  width: 100%;
  .index-service-dom__inner {
    position: absolute;
    overflow: hidden;
    --y-offset: 5rem;
    --x-offset: 10rem;
    --user-prompt-offset: min(16vw, 24rem);
    --container-side-padding: 8rem;
    --container-vertical-padding: 8rem;
    top: calc(var(--y-offset) * 1);
    left: calc(var(--x-offset) * 1);
    width: calc(100% - var(--x-offset) * 2);
    height: calc(min(100%,100dvh) - var(--y-offset) * 2);
    padding: var(--container-vertical-padding) var(--container-side-padding);
    border-radius: 4rem;
    border: 2px solid currentColor;
    background-color: rgba(255,255,255,0.1);
    @media (max-width: 768px) {
      --user-prompt-offset: 8vw;
      --container-side-padding: 3.2rem;
      --container-vertical-padding: min(12rem, 12svh);
      --y-offset: 1px;
      --x-offset: 1px;
      border-radius: 0.8rem;
      border: 1px solid currentColor;
    }
  }
  .prompt {
    .account {
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      padding-left: 0.25rem;
      img {
        width: 3em;
        height: 3em;
        margin-right: 1em;
        object-fit: contain;
      }
    }
    .message {
      .jp {
        font-family: var(--ff-jp);
        font-size: min(var(--fz-xlarge), 2.4vw);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-medium);
        line-height: calc(72 / 48);
        @media (max-width: 1024px) {
          font-size: var(--fz-large);
          line-height: calc(48 / 32);
        }
        @media (max-width: 768px) {
        }
      }
      .en {
        font-family: var(--ff-eng);
        font-size: var(--fz-small);
        font-weight: var(--fw-medium);
        line-height: calc(24 / 12);
        padding-top: 0.5lh;
      }
    }
    .ai-thinking-text {
      font-family: var(--ff-mono);
      font-size: var(--fz-small);
      font-weight: var(--fw-light);
      line-height: calc(24 / 12);
      letter-spacing: 0;
      opacity: 1.0;
      padding-top: 2.4rem;
    }
    &.prompt--user {
      padding-left: var(--user-prompt-offset);
    }
    &.prompt--first {
      &:not(:last-child) {
        margin-bottom: 8rem;
        @media (max-width: 768px) {
          margin-bottom: 4rem;
        }
      }
    }
    &.prompt--second {
      position: absolute;
      top: 26%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      height: 50%;
      width: calc(100% - var(--user-prompt-offset) - var(--container-side-padding));
    }
    &.prompt--generating {
      --c-width: 18rem;
      height: 33%;
      position: absolute;
      top: 33%;
      left: calc(50% - var(--c-width)/2);
      width: var(--c-width);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      @media (max-width: 768px) {
        --c-width: 80%;
        height: 40rem;
        top: 35%;
      }
      .jp {
        padding-top: 0.2lh;
        font-size: 4rem;
        font-family: var(--ff-jp);
        font-weight: var(--fw-bold);
        text-align: center;
        white-space: nowrap;
      }
      .en {
        font-size: 1.6rem;
        font-family: var(--ff-eng);
        font-weight: var(--fw-medium);
        text-align: center;
        white-space: nowrap;
        @media (max-width: 768px) {
          padding-top: 0.25lh;
        }
      }
      .generating-icon {
        position: absolute;
        left: 20rem;
        width: 10rem;
        height: 10rem;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc(50% - 5.5rem);
        @media (max-width: 768px) {
          left: 50%;
          transform: translateX(-50%);
          width: 8rem;
          height: 8rem;
          top: 10%;
        }
        svg {
          display: block;
          width: 4rem;
          aspect-ratio: 1/1;
        }
        .dots {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          --dot-size: 0.3rem;
          --dots-count: 20;
          span {
            display: block;
            width: var(--dot-size);
            height: var(--dot-size);
            border-radius: 100vmax;
            background-color: var(--cl-white);
            top: calc(50% - var(--dot-size)/2);
            left: calc(50% - var(--dot-size)/2);
            position: absolute;
            transform: rotate(calc(-360deg / var(--dots-count) * var(--i))) translateY(-4rem);
          }
        }
      }
    }
  }
}

/* ------------------------------------------------------------------
   Index Background Effects
------------------------------------------------------------------ */

.particle-canvas-host {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
}

#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
  display: block;
  /* opacity: 0.1 !important; */
  /* filter: blur(4px); */
}

@keyframes scrollSuggesterBarMove {
  0% {
    transform: translateY(0%) scaleY(0.0);
  }
  33% {
    transform: translateY(0%) scaleY(1.0);
  }
  66% {
    transform: translateY(0%) scaleY(1.0);
  }
  100% {
    transform: translateY(100%) scaleY(0.0);
  }
}

/* ------------------------------------------------------------------
   Index Navigator
------------------------------------------------------------------ */

.front-page-navigator {
  position: fixed;
  --navigator-height: min(24rem, 24svh);
  --top-offset: 0rem;
  z-index: 10;
  top: calc(50% - var(--navigator-height) / 2 + var(--top-offset));
  left: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  transition: transform ease 0.3s, opacity ease 0.15s, visibility ease 0.3s allow-discrete;
  &[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-2rem);
    visibility: hidden;
  }
  @[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
    @starting-style {
      opacity: 0;
      visibility: hidden;
    }
  }
  @media (max-width: 1024px) {
    display: none;
  }
  .front-page-navigator__item {
    display: grid;
    align-items: center;
    gap: 0.8rem;
    grid-template-columns: 2.4rem auto;
    position: relative;
    &::before {
      content: '';
      display: block;
      height: 1px;
      width: 100%;
      background-color: #fff;
      transition: transform var(--ease-out-quart) 0.3s;
      transform-origin: left center;
      transform: scaleX(0.2);
    }
    a {
      display: block;
      font-family: var(--ff-mono);
      font-size: var(--fz-small);
      font-weight: var(--fw-light);
      letter-spacing: 0;
      line-height: calc(24 / 12);
      opacity: 0;
      transform: translateX(-0.5rem);
      text-decoration: none;
      color: var(--cl-white);
      transition: opacity 0.1s var(--ease-out-quart), transform 0.4s var(--ease-out-quart) 0.1s;
    }
    &.is-active {
      &::before {
        transform: scaleX(1.0);
      }
      @media(min-width: 1350px){
        a {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @media (max-width: 1349px) and (any-hover: hover){
        a:hover {
          opacity: 1;
          transform: translateX(0);
        }
      }
    }
    &:not(.is-active){
      @media (any-hover: hover) {
        &:hover {
          &::before {
            transform: scaleX(0.5);
          }
          a {
            opacity: 1;
            transform: translateX(0);
          }
        }
      }
    }
  }
}

/* ------------------------------------------------------------------
   Index Scroll Suggester
------------------------------------------------------------------ */

.scroll-suggester {
  position: fixed;
  bottom: 0;
  left: calc(50% - 5rem);
  width: 10rem;
  height: 15svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: opacity 1s ease, visibility 1s ease allow-discrete, transform 1.6s var(--ease-out-quart);
  opacity: 0;
  visibility: hidden;
  transform: translateY(2rem);
  z-index: 11;
  &.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .scroll-suggester__text {
    font-family: var(--ff-eng);
    font-size: var(--fz-small);
    font-weight: var(--fw-medium);
    line-height: calc(24 / 12);
    margin-bottom: 1.2rem;
  }
  .scroll-suggester__bar {
    width: 1px;
    height: 6rem;
    background-color: #ffffff33;
    border-radius: 100vmax;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--cl-white);
      transform: translateY(0%) scaleY(0.0);
      animation: scrollSuggesterBarMove 2.4s var(--ease-out-quart) infinite;
      transform-origin: top center;
    }
  }
}


/* ------------------------------------------------------------------
   Subpage Common
------------------------------------------------------------------ */

.subpage-head {
  position: relative;
  height: 100svh;
  &.subpage-head--news {
    position: fixed;
    z-index: 0;
    @media (max-width: 768px) {
      opacity: 0.2;
    }
  }
}

.subpage-content {
  padding: var(--section-padding) 0;
  &.subpage-content--news {
    padding-top: var(--no-head-top-padding);
    min-height: 100svh;
    position: relative;
    z-index: 1;
  }
}

/* ------------------------------------------------------------------
   Page About
------------------------------------------------------------------ */

.about-section {
  max-width: var(--container-l-width);
  padding: var(--section-padding) 0;
  margin: 0 auto;
  .about-section__header {
    margin-bottom: 4.8rem;
    .ttl {
      font-family: var(--ff-default);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-large);
      line-height: calc(72 / 48);
      margin-bottom: 1.6rem;
      text-transform: uppercase;
      & + .en {
        margin-top: -1.6rem;
      }
    }
    .en {
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
    }
  }
  .about-section__body {
    p {
      &:not(:last-child) {
        margin-bottom: 1lh;
      }
    }
  }
  &.about-section--profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "ttl ttl" "body portrait";
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      grid-template-areas: "ttl" "portrait" "body" ;
    }
    .about-section__header {
      grid-area: ttl;
      margin-bottom: 0;
    }
    .about-section__body {
      grid-area: body;
      padding-top: 6rem;
      p {
        font-size: var(--fz-regular);
        font-weight: var(--fw-regular);
        letter-spacing: var(--ls-small, 0);
        line-height: calc(32 / 14);
      }
    }
    .about-section__ceo-portrait {
      grid-area: portrait;
      width: 100%;
      max-width: 40rem;
      margin-left: 4rem;
      justify-self: end;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      @media (max-width: 768px) {
        margin-left: 0;
        justify-self: center;
        width: 60%;
        padding-top: 6rem;
      }
    }
    .ceo-name {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 3.2rem;
      .jp {
        font-size: 2.4rem;
        font-weight: var(--fw-regular);
        /* font-weight: var(--fw-bold); */
        font-family: var(--ff-jp);
        letter-spacing: var(--ls-medium);
      }
      .en {
        font-size: var(--fz-regular);
        font-weight: var(--fw-medium);
        font-family: var(--ff-eng);
        letter-spacing: var(--ls-small);
        margin-left: 1rem;
      }
    }
  }
  &.about-section--overview {
    .overview-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: -0.8rem;
      th,td {
        text-align: left;
        vertical-align: top;
        padding: 0.8rem 0;
        font-size: var(--fz-regular);
        font-weight: var(--fw-regular);
        letter-spacing: var(--ls-small, 0);
        line-height: calc(32 / 14);
      }
      th {
        width: 30%;
        text-transform: uppercase;
      }
      td {
        width: 70%;
      }
      ul {
        padding: 0;
        list-style-type: none;;
      }
    }
  }
}


/* ------------------------------------------------------------------
   Page Contact
------------------------------------------------------------------ */

.contact-detail-content {
  .contact-detail-content__inner {
    max-width: var(--container-l-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 8rem;
    }
  }
  .contact-detail-content__header {
    position: sticky;
    top: var(--no-head-top-padding);
    @media (max-width: 768px) {
      position: static;
    }
    .ttl {
      font-family: var(--ff-eng);
      font-size: var(--fz-xlarge);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small, 0);
      margin-bottom: 3.2rem;
      .icon {
        display: inline-block;
        animation: shakingHands 1s infinite;
      }
    }
    .jp {
      font-size: var(--fz-regular);
      margin-bottom: 3.2rem;
    }
    .en {
      font-size: var(--fz-small);
    }
  }
  .contact-detail-content__form {
    border-radius: 0.8rem;
    padding: 0 3.2rem 3.2rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--cl-white);
  }
}

.contact-form{
  width:100%;
}

.contact-form__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3.2rem 2rem;
}

.contact-form__field{
  margin-top:3.2rem;
}

.contact-form__label{
  display:block;
  margin-bottom: 0.8rem;
  color:#fff;
  font-size: 1.4rem;
  font-weight:var(--fw-medium);
  line-height:1.5;
}

.contact-form__required{
  color:#fff;
}

.contact-form__input,
.contact-form__textarea{
  width:100%;
  padding:0 0 .8rem;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  background:none;
  color:#fff;
  font-size: 16px;
  line-height: 1.6;
  border-radius:0;
  outline:none;
  transition: border-color .3s;
}

.contact-form__textarea{
  min-height:180px;
  resize:vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder{
  color:rgba(255,255,255,.45);
}

.contact-form__input:focus,
.contact-form__textarea:focus{
  border-color:#fff;
}

.contact-form__submit{
  margin-top: 5.4rem;
  .wpcf7-turnstile {
    margin-bottom: 0.5lh;
  }
  .button {
    appearance: none;
    border:none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    border-radius: 0.6rem;
    color: var(--cl-white);
    background-image: linear-gradient(to left, #be202e, #f15b2a);
    text-decoration: none;
    width: 100%;
    height: 5.6rem;
    text-transform: uppercase;
    font-family: var(--ff-eng);
    position: relative;
    transition: color 200ms;
    overflow: clip;
    span {
      position: relative;
      z-index: 1;
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      transform: scaleX(0.75);
      opacity: 0;
      z-index: 0;
      transition: transform var(--ease-out-quart) 400ms,opacity var(--ease-out-quart) 400ms;
    }
    @media (any-hover: hover) {
      &:hover {
        color: #be202e;
        &::before {
          transform: scaleX(1);
          opacity: 1;
        }
      }
    }
    &:focus {
      color: #be202e;
      &::before {
        transform: scaleX(1);
        opacity: 1;
      }
    }
  }
}

.wpcf7-form-control-wrap{
  display:block;
}

.wpcf7-not-valid-tip{
  margin-top:8px;
  color:#ff8b8b;
  font-size:13px;
}

.wpcf7-spinner{
  margin-top:16px;
}

.wpcf7 form .wpcf7-response-output {
  padding: 0.8rem 1.6rem;
  margin: 1.5lh 0 .5lh;
  font-size: var(--fz-regular);
  line-height: calc(32 / 14);
}

@media (max-width:768px){
  .contact-form__grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact-form__field{
    margin-top:24px;
  }

  .contact-form__submit{
    margin-top:40px;
  }

}

/* ------------------------------------------------------------------
   Page Recruit
------------------------------------------------------------------ */

.subpage-content--recruit {
  --section-padding: 12rem;
  @media (max-width: 768px) {
    --section-padding: 6rem;
  }
}

.recruit-section {
  max-width: var(--container-l-width);
  padding: var(--section-padding) 0;
  margin: 0 auto;
  .recruit-section__header {
    margin-bottom: 4.8rem;
    .ttl {
      font-family: var(--ff-default);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-large);
      line-height: calc(72 / 48);
      margin-bottom: 1.6rem;
      text-transform: uppercase;
      & + .en {
        margin-top: -1.6rem;
      }
    }
    .en {
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
    }
  }
  .recruit-section__body {
    p {
      font-weight: var(--fw-regular);
      &:not(:last-child) {
        margin-bottom: 1lh;
      }
    }
  }
  &.recruit-section--intro {
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-template-areas: "ttl fig" "body fig";
    .recruit-section__header {
      grid-area: ttl;
      position: relative;
      z-index: 1;
    }
    .recruit-section__body {
      grid-area: body;
      position: relative;
      z-index: 1;
    }
    .recruit-section__figure {
      grid-area: fig;
      width: 100%;
      max-width: 40rem;
      margin-left: 4rem;
      justify-self: end;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      grid-template-areas: "fig" "ttl" "body";
      .recruit-section__figure {
        max-width: unset;
        margin-left: 0;
        margin-bottom: -16rem;
        img {
          width: calc(100% + 3.2rem);
          max-width: calc(100% + 3.2rem);
          margin-left: -1.6rem;
          height: auto;
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 16rem), rgba(0,0,0,0) 100%);
        }
      }
    }
  }
}

.recruit-chat-area {
  position: relative;
  height: 100lvh;
  width: 100%;
  margin: var(--section-padding) 0 calc(var(--section-padding) * -1);
  padding: 0;
  display: grid;
  place-items: center;
  .recruit-chat-area__container {
    position: absolute;
    overflow: hidden;
    --y-offset: 5rem;
    --x-offset: 10rem;
    top: calc(var(--y-offset) * 1);
    left: auto;
    width: calc(100% - var(--x-offset) * 2);
    height: calc(min(100%,100svh) - var(--y-offset) * 2);
    border: 2px solid currentColor;
    border-radius: 12rem;
    backdrop-filter: blur(4px);
    background-color: rgba(255,255,255,0.1);
    @media (max-width: 768px) {
      --y-offset: 2rem;
      --x-offset: 2rem;
      border-radius: 6rem;
      border: 1px solid currentColor;
      backdrop-filter: none;
    }
  }
  .recruit-chat-area__inner {
    --v-padding: 12rem;
    --h-padding: min(12rem, 12vw);
    padding: var(--v-padding) var(--h-padding) calc(var(--v-padding) + 20svh);
    height: 100%;
    /* overflow-y: auto; */
    overflow: hidden;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) calc(var(--v-padding) * 1.25), rgba(0,0,0,1) calc(100% - var(--v-padding) * 1.25), rgba(0,0,0,0) 100%);
    @media (max-width: 768px) {
      padding: min(12rem, 12svh) 3.2rem min(12rem + 20svh, 12svh + 20svh);
    }
  }
  .prompt {
    margin-bottom: min(8rem, 8svh);
    .account {
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      padding-left: 0.25rem;
      img {
        width: 3em;
        height: 3em;
        margin-right: 1em;
        object-fit: contain;
      }
    }
    .message {
      .jp {
        font-family: var(--ff-jp);
        font-size: var(--fz-large);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-medium);
        line-height: calc(72 / 48);
        @media (max-width: 768px) {
          font-size: var(--fz-large);
          line-height: calc(48 / 32);
          br {
            display: none;
          }
        }
      }
      .en {
        font-family: var(--ff-eng);
        font-size: var(--fz-small);
        font-weight: var(--fw-medium);
        line-height: calc(24 / 12);
        padding-top: 0.5lh;
      }
    }
    .ai-thinking-text {
      font-family: var(--ff-mono);
      font-size: var(--fz-medium);
      font-weight: var(--fw-light);
      line-height: calc(24 / 12);
      letter-spacing: 0;
      opacity: 1.0;
      padding-top: 2.4rem;
    }
    &.prompt--user {
      padding-left: min(25vw, 40rem);
      @media (max-width: 768px) {
        padding-left: 12vw;
      }
    }
    &.prompt--first {
      &:not(:last-child) {
        margin-bottom: 8rem;
        @media (max-width: 768px) {
          margin-bottom: 4rem;
        }
      }
    }
    &.prompt--second {
      position: absolute;
      top: 26%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      height: 50%;
    }
    &.prompt--generating {
      --c-width: 18rem;
      height: 33%;
      position: absolute;
      top: 33%;
      left: calc(50% - var(--c-width)/2);
      width: var(--c-width);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      @media (max-width: 768px) {
        --c-width: 80%;
        height: 40rem;
        top: 35%;
      }
      .jp {
        padding-top: 0.2lh;
        font-size: 4rem;
        font-family: var(--ff-jp);
        font-weight: var(--fw-bold);
      }
      .en {
        font-size: 1.6rem;
        font-family: var(--ff-eng);
        font-weight: var(--fw-medium);
        text-align: center;
        @media (max-width: 768px) {
          padding-top: 0.25lh;
        }
      }
      .generating-icon {
        position: absolute;
        left: 20rem;
        width: 10rem;
        height: 10rem;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc(50% - 5rem);
        @media (max-width: 768px) {
          left: 50%;
          transform: translateX(-50%);
          width: 8rem;
          height: 8rem;
          top: 10%;
        }
        svg {
          display: block;
          width: 4rem;
          aspect-ratio: 1/1;
        }
        .dots {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          --dot-size: 0.3rem;
          --dots-count: 20;
          span {
            display: block;
            width: var(--dot-size);
            height: var(--dot-size);
            border-radius: 100vmax;
            background-color: var(--cl-white);
            top: calc(50% - var(--dot-size)/2);
            left: calc(50% - var(--dot-size)/2);
            position: absolute;
            transform: rotate(calc(-360deg / var(--dots-count) * var(--i))) translateY(-4rem);
          }
        }
      }
    }
  }
  .desc {
    margin-top: 8rem;
    padding-top: 8rem;
    border-top: 1px solid #333;
    .ttl {
      font-size: var(--fz-large);
      letter-spacing: var(--ls-medium, 0);
      margin-bottom: 1.6rem;
    }
    p {
      font-weight: var(--fw-regular);
      &:not(:last-child) {
        margin-bottom: 1lh;
      }
    }
  }
}

.recruit-principles {
  height: 300lvh;
  overflow: clip;
  margin-top: -80lvh;
  .recruit-principles__inner {
    padding: calc(var(--section-padding) * 2) 0 var(--section-padding);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) calc(var(--section-padding) * 1.25), rgba(0,0,0,1) calc(100% - var(--section-padding) * 1.25), rgba(0,0,0,0) 100%);
    width: var(--container-l-width);
    height: 100lvh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto;
      mask-image: none;
    }
  }
  .recruit-principles__header {
    @media (max-width: 768px) {
      grid-row: 1 / 2;
      grid-column: 1 / -1;
    }
    .en {
      display: block;
    }
    .ttl {
      font-family: var(--ff-jp);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-large);
      line-height: calc(72 / 48);
      margin-bottom: 1.6rem;
    }
  }
  .recruit-principles__body {
    padding-top: 3.2rem;
    @media (max-width: 768px) {
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      height: 75svh;
      padding-top: calc(var(--section-padding) * 2);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--section-padding) * 0.5), rgba(0,0,0,1) calc(var(--section-padding) * 1.5), rgba(0,0,0,1) calc(100% - var(--section-padding) * 1.5), rgba(0,0,0,0) 100%);
    }
  }
  .recruit-principles__list {
    list-style-type: none;
    padding: 0;
    counter-reset: principles-counter;
    li {
      counter-increment: principles-counter;
      &:not(:last-child) {
        margin-bottom: 8rem;
      }
      .ttl {
        position: relative;
        display: flex;
        align-items: flex-end;
        font-size: 2.4rem;
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-medium, 0);
        margin-bottom: 1em;
        &::before {
          content: '0' counter(principles-counter);
          position: absolute;
          left: -4.0rem;
          bottom: 0.225em;
          letter-spacing: var(--ls-small, 0);
          font-size: var(--fz-medium);
        }
      }
      p {
        font-size: var(--fz-regular);
        font-weight: var(--fw-regular);
        letter-spacing: var(--ls-small, 0);
        line-height: calc(32 / 14);
        &:not(:last-child) {
          margin-bottom: 0.75lh;
        }
      }
    }
  }
}

.recruit-detail {
  position: relative;
  z-index: 1;
  border-radius: 8rem;
  width: var(--container-l-width);
  max-width: 100%;
  margin: calc(100lvh + var(--section-padding)) auto var(--section-padding);
  background-color: var(--cl-white);
  color: var(--cl-black);
  @media (max-width: 768px) {
    border-radius: 3.2rem;
  }
  .recruit-detail__header {
    padding: 8rem min(8rem, 8vw) 4rem;
    border-bottom: 1px solid #ccc;
    text-align: center;
    @media (max-width: 768px) {
      padding: 4rem min(4rem, 4vw) 2rem;
    }
    .en {
      font-family: var(--ff-eng);
      font-size: var(--fz-medium);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      margin-bottom: 1.6rem;
      text-transform: uppercase;
    }
    .ttl {
      font-family: var(--ff-jp);
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-large);
      text-indent: var(--ls-large);
      line-height: calc(72 / 48);
      margin-bottom: 0.25lh;
    }
  }
  .recruit-detail__switcher {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    gap: 1.2rem;
  }
  .recruit-detail__switcher-item {
    appearance: none;
    border: none;
    height: 4rem;
    width: 24rem;
    border-radius: 100vmax;
    border-style: solid;
    border-width: 1px;
    border-color: #999;
    background-color: var(--cl-white);
    color: var(--cl-black);
    letter-spacing: var(--ls-medium, 0);
    cursor: pointer;
    @media (any-hover: hover) {
      transition: color 200ms, background-color 200ms;
      &:hover {
        background-color: #f5f5f5;
      }
    }
    &[aria-selected="true"] {
      background-color: var(--cl-black);
      color: var(--cl-white);
      border-color: var(--cl-black);
    }
    @media (max-width: 768px) {
      /* width: 100%; */
      font-size: var(--fz-regular);
      letter-spacing: var(--ls-small, 0);
    }
  }
  .recruit-detail__body {
    position: relative;
    overflow: hidden;
  }
  .recruit-detail__panel {
    padding: 8rem min(8rem, 8vw) 8rem;
    width: 100%;
    @media (max-width: 768px) {
      padding: 4rem min(4rem, 4vw) 4rem;
    }
    &[aria-hidden="true"] {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ttl {
      font-size: 2.4rem;
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-small, 0);
      margin-bottom: 1em;
    }
    .desc {
      p {
        &:not(:last-child) {
          margin-bottom: 1lh;
        }
      }
    }
    .img {
      margin: 7.2rem 0;
      img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
      }
    }
    .feature {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-areas: "en ttl" ". desc";
      gap: 2.4rem 0;
      &:not(:last-child) {
        margin-bottom: 5.2rem;
      }
      .feature__ttl-en {
        grid-area: en;
        font-family: var(--ff-eng);
        font-size: var(--fz-medium);
        font-weight: var(--fw-medium);
        line-height: calc(24 / 12);
        text-transform: uppercase;
        align-self: end;
        padding-bottom: 0.25lh;
      }
      .feature__ttl {
        grid-area: ttl;
        font-size: var(--fz-large);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-medium, 0);
      }
      .feature__desc {
        grid-area: desc;
        p {
          font-weight: var(--fw-medium);
          letter-spacing: var(--ls-small, 0);
          line-height: calc(32 / 14);
          &:not(:last-child) {
            margin-bottom: 1lh;
          }
        }
      }
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-areas: "ttl" "en" "desc";
        gap: 0;
        .feature__ttl-en {
          align-self: start;
          padding-bottom: 1lh;
        }
      }

    }
  }
}

@keyframes raisedHands {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(0%);
  }
}

.recruit-cta {
  margin: calc(var(--section-padding) * 2) auto 0;
  display: grid;
  place-items: center;
  height: 100lvh;
  .recruit-cta__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border-color: var(--cl-white);
    padding: min(8rem, 8svh) 3.2rem;
    border-radius: 8rem;
    width: var(--container-l-width);
    max-width: 100%;
    background-color: rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
    @media (max-width: 768px) {
      border-radius: 6rem;
      width: calc(100% - 1.6rem);
      backdrop-filter: none;
    }
  }
  .ttl {
    font-size: 4.8rem;
    font-weight: var(--fw-medium);
    line-height: calc(56 / 48);
    letter-spacing: 0.025em;
    text-align: center;
    margin-bottom: min(4rem, 4svh);
    .raised-hands {
      display: inline-block;
      position: relative; 
      margin-left: 0.8rem;
      animation: raisedHands 1s infinite;
    }
  }
  .desc {
    margin-bottom: min(3.2rem, 4svh);
    p {
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small, 0);
      text-align: center;
      &:not(:last-child) {
        margin-bottom: min(1lh, 2svh);
      }
    }
  }
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    border-radius: 0.6rem;
    color: var(--cl-white);
    background-image: linear-gradient(to left, #be202e, #f15b2a);
    text-decoration: none;
    width: min(100%, 60rem);
    height: 5.6rem;
    text-transform: uppercase;
    font-family: var(--ff-eng);
    position: relative;
    transition: color 200ms;
    overflow: clip;
    span {
      position: relative;
      z-index: 1;
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      transform: scaleX(0.75);
      opacity: 0;
      z-index: 0;
      transition: transform var(--ease-out-quart) 400ms,opacity var(--ease-out-quart) 400ms;
    }
    @media (any-hover: hover) {
      &:hover {
        color: #be202e;
        &::before {
          transform: scaleX(1);
          opacity: 1;
        }
      }
    }
    &:focus {
      color: #be202e;
      &::before {
        transform: scaleX(1);
        opacity: 1;
      }
    }
  }
}

/* ------------------------------------------------------------------
   Common Page 
------------------------------------------------------------------ */
.entry-wrapper {
  padding: var(--no-head-top-padding) 0 8rem;
  .entry-header {
    width: var(--container-width);
    margin: 0 auto 8rem;
  }
  .entry-title {
    font-family: var(--ff-jp);
    font-size: var(--fz-xlarge);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-small);
    line-height: calc(72 / 48);
    margin-bottom: 0.2rem;
  }
  .entry-meta {
    padding-top: 1lh;
    display: flex;
    font-size: var(--fz-regular);
    line-height: calc(32 / 14);
    gap: 1.6rem;
    .date {
      font-family: var(--ff-eng);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small, 0);
    }
    .category {
      display: flex;
      gap: 0.5rem;
      a {
        &::before {
          content: '#';
        }
        font-weight: var(--fw-light);
        font-family: var(--ff-mono);
        font-size: var(--fz-regular);
        letter-spacing: var(--ls-small, 0);
        text-decoration: none;
        color: var(--cl-white);
        @media (any-hover: hover) {
          transition: opacity 100ms;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
  .entry-content {
    width: var(--container-width);
    max-width: unset;
    margin: 0 auto;
    background-color: transparent;
  }
}

.post-navigation {
  width: var(--container-width);
  margin: 8rem auto 0;
  .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    a {
      display: block;
      width: 100%;
      padding: 1.6rem 2.4rem;
      border-radius: 0.6rem;
      text-decoration: none;
      color: var(--cl-white);
      background-color: var(--cl-black);
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      line-height: calc(24 / 12);
      text-align: center;
      @media (any-hover: hover) {
        transition: background-color 200ms, color 200ms;
        &:hover {
          background-color: var(--cl-white);
          color: var(--cl-black);
        }
      }
    }
  }
}


/* ------------------------------------------------------------------
   Site Footer
------------------------------------------------------------------ */
.site-footer {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100lvh;
  margin-top: 0;
  font-size: var(--fz-regular);
  font-weight: var(--fw-regular);
  line-height: calc(30 / 14);
  pointer-events: none;
  --footer-padding: min(8vw, 12rem);
  --footer-logo-top-gap: 1.2rem;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,0.9) 100%);
  @media (max-width: 768px) {
    height: 120svh;
    --footer-logo-top-gap: 2.4rem;
    .home & {
      margin-top: 50svh;
    }
  }
  a {
    display: block;
    text-decoration: none;
    color: var(--cl-white);
    border-radius: 0.4rem;
  }
  .site-footer__inner {
    pointer-events: auto;
    position: absolute;
    bottom: 0;
    left: var(--footer-padding);
    width: calc(100% - var(--footer-padding) * 2);
    padding-bottom: calc(var(--footer-padding) * 0.5);
    max-width: 100%;
    display: grid;
    grid-template-columns: 4fr 1.5fr 1.5fr;
    grid-template-areas: "logo nav contact" "backtotop backtotop backtotop";
    align-items: flex-start;

    @media (max-width: 768px) {
      padding-bottom: calc(var(--footer-padding) * 3);
      grid-template-columns: 1fr;
      grid-template-areas: "logo" "nav" "contact" "backtotop";      
    }
    .site-footer__logo-wrapper {
      grid-area: logo;
      position: relative;
    }
    .site-footer__logo-link {
      display: block;
      width: 100%;
      height: auto;
      transition: opacity 200ms;
      svg {
        display: block;
        width: 100%;
        height: auto;
      }
      @media (any-hover: hover) {
        &:hover {
          opacity: 0.6;
        }
      }
    }
    .site-footer__logo-desc {
      padding-top: var(--footer-logo-top-gap);
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      line-height: calc(24 / 12);
      font-weight: var(--fw-medium);
      position: relative;
      left: 24%;
      width: 76%;
      @media (max-width: 768px) {
        br {
          display: none;
        }
      }
    }
    .site-footer__nav {
      grid-area: nav;
    }
    .site-footer__nav-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* grid-template-rows: repeat(3, 1fr);
      grid-auto-flow: column; */
      list-style-type: none;
      padding: var(--footer-logo-top-gap) 0 0 min(6rem, 6vw);
      gap: 0 1rem;
      @media (max-width: 768px) {
        padding-left: 24%;
      }
      a {
        text-transform: uppercase;
      }
    }
    .site-footer__contact {
      grid-area: contact;
      padding: var(--footer-logo-top-gap) 0 0 min(6rem, 6vw);
      @media (max-width: 768px) {
        padding-left: 24%;
      }
      a:not(.mail):not(.privacy-policy) {
        text-transform: uppercase;
      }
      .sns {
        margin-top: 0;
        display: flex;
        gap: 0.5lh;
        /* display: grid;
        grid-template-columns: repeat(2, 1fr); */
      }
      /* .tel ~ .sns {
        margin-top: 0;
      } */
      .privacy-policy {
        margin-top: 0;
        /* margin-top: 1lh; */
        font-size: var(--fz-small);
        width: max-content;
        /* margin-left: auto; */
        @media (max-width: 768px) {
          margin-left: 0;
        }
      }
    }
    .site-footer__backtotop {
      grid-area: backtotop;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: var(--footer-padding);
      font-family: var(--ff-eng);
      font-size: var(--fz-small);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-small);
      line-height: calc(24 / 12);
      a {
        border: 1px solid var(--cl-white);
        height: 5.2rem;
        width: 24rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 200ms, ;
        @media (any-hover: hover) {
          &:hover {
            background-color: rgba(255,255,255,0.1);
          }
        }
        &:focus {
          background-color: rgba(255,255,255,0.1);
        }
      }
    }

    .site-footer__nav,
    .site-footer__contact {
      a {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          top: calc(50% - 1px);
          left: 0;
          width: 0.4rem;
          height: 1px;
          transform-origin: left center;
          transform: scaleX(0);
          transition: transform 200ms;
          background-color: currentColor;
        }
        span {
          display: block;
          transition: transform 200ms;
        }
        &:not(.disabled) {
          @media (any-hover: hover) {
            &:hover {
              animation: mouseHit 0.4s;
              span {
                transform: translateX(1.0rem);
              }
              &::before {
                transform: scaleX(1);
              }
            }
          }
          &:focus {
            animation: mouseHit 0.4s;
            span {
              transform: translateX(1.0rem);
            }
            &::before {
              transform: scaleX(1);
            }
          }
        }
        &.disabled {
          opacity: 0.5;
          pointer-events: none;
        }
      }
    }
  }
}