/* このファイルは自動分割で生成 (元: style.css)。編集ルールは CLAUDE.md 参照 */



/* ===========================
   TOP PAGE 共通
=========================== */

.top-page {
  padding-top: 0; /* MVはヘッダーの下に出さない */
}

/* ===========================
   MVスタック（1枚目・2枚目の重なりスクロール演出）
   参考: https://recruit.netbk.co.jp/
   .mv-video を position:sticky にして画面に留め、その間に .mv-message が
   下から迫り上がって上に重なる。sticky が有効な範囲は親要素の高さで決まる
   ため、.mv-stack の高さを「1枚目+2枚目」の2画面分(200vh)確保している
=========================== */

.mv-stack {
  position: relative;
  height: 200vh;
}

/* ===========================
   MV 動画（1枚目）
=========================== */

.mv-video {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-black);
  overflow: hidden;
  z-index: 1;
}

.mv-video__player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* filter: brightness(0.5); */
}

.mv-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 10px 10px;
  z-index: 1;
}

.mv-video__content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* ::afterより上 */
  text-align: center;
  width: 100%;
}

.mv-video__content img {
  width: 30%;
  margin: auto;
}

.mv-video__title {
  font-family: var(--font-serif);
  font-size: 4.4vw;
  color: var(--color-white);
  letter-spacing: 0.3em;
  line-height: 1.4;
  margin-top: 30px;
  margin-right: -4rem;
}

/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  right: 50%;
  bottom: 10%;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: var(--color-white);
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
}
/* 線の背景色 */
.scroll::after {
  background-color: #ccc;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ===========================
   MV メッセージ（2枚目）
=========================== */

.mv-message {
  position: relative;
  z-index: 2; /* .mv-video(sticky)の上に重ねる */
  width: 100%;
  height: 100vh;
  background: var(--color-main) url('../images/top_animebg.png') no-repeat center center / cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-message__inner {
  text-align: center;
  padding: 0 40px;
}

/* グラデーションが流れるロゴ：SVG(top_animefuture.svg)をCSS maskの型として使い、
   その内側にCSSアニメーションで動くグラデーションを塗る。
   SVG内部のSMILアニメーション(<animate>)はChromeで再生されなかったため、
   CSSアニメーションに変更した。
   ただしbackground-positionのアニメーションはGPU合成されず毎フレーム再描画が
   発生してカクつくため、実体を2倍幅の疑似要素にしてtransform:translateXで
   動かす方式にしている（transformはGPU合成されるため滑らか） */
.mv-message__logo {
  position: relative;
  width: 45%;
  aspect-ratio: 330 / 79; /* heightをautoにする代わりにdivの比率を固定する */
  margin: 0 auto 2rem;
  overflow: hidden;
  -webkit-mask: url('../images/top_animefuture.svg') no-repeat center / contain;
  mask: url('../images/top_animefuture.svg') no-repeat center / contain;
}

.mv-message__logo::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(90deg, #F8DDEA 0%, #AAE4FF 50%, #F8DDEA 100%);
  background-size: 50% 100%; /* 200%幅の中に同じ柄を2回並べて継ぎ目なくループさせる */
  background-repeat: repeat-x;
  animation: mv-message-logo-shift 3s linear infinite;
  will-change: transform;
}

@keyframes mv-message-logo-shift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* 200%幅の要素の50% = 見た目1コンテナぶん。柄の1周期と一致するため継ぎ目が出ない */
}

@media (prefers-reduced-motion: reduce) {
  .mv-message__logo::before {
    animation: none;
    transform: translateX(-25%);
  }
}

.mv-message__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-white);
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
  margin-left: 3rem;
}

.mv-message__text {
  font-size: 0.9375rem;
  letter-spacing: 0.15em;
  color: var(--color-white);
  line-height: 2.2;
  margin-bottom: 3rem;
}



/* --- 各画像の位置・サイズ指定（max-widthをすべて撤去し、％の比率を固定） --- */

.what-we-do__item .more__btn {
  margin-top: auto;

  border-color: var(--color-main);
  color: var(--color-main);
  max-width: 320px; /* アイコンのmax-widthと統一 */
  --btn-fill: var(--color-main);
  --btn-hover-text: var(--color-white);
}

/* common.cssの.more__btn:hoverと詳細度が同点(0,2,0)になり、
   後から読み込まれるこのファイルの上の宣言が勝ってしまうため、
   ここでも明示的にホバー時の文字色を指定する */
.what-we-do__item .more__btn:focus-visible {
  color: var(--btn-hover-text);
}

@media (hover: hover) and (pointer: fine) {
  .what-we-do__item .more__btn:hover {
    color: var(--btn-hover-text);
  }
}

/* カードエリア */

.special-talk__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.special-talk__card {
  display: block;
  text-decoration: none;
  color: var(--color-black);
}

/* PODCASTカード（モーダル起動）はbutton要素のためリセット */
/* buttonは中身を縦センタリングするため、flexで上詰めにして<a>カードと揃える */

button.special-talk__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.special-talk__card .special-talk__card-title,
button.special-talk__card .special-talk__card-text {
  display: block;
}

.special-talk__card img {
  width: 100%;
  aspect-ratio: 365 / 219;
  object-fit: cover;
  object-position: top;
}

.special-talk__card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-main);
  padding: 1rem 0;
  text-align: center;
}

.special-talk__card-text {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  padding: 0 3rem 1.5rem;
  text-align: justify;
}

/* ===========================
   WHAT WE DO
=========================== */

.what-we-do {
  background: var(--color-light-blue);
  padding: 100px 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.what-we-do__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;

  justify-content: center;
  gap: 80px;
}

.what-we-do__text {
  flex: 1;
  max-width: 600px;
  min-width: 0;
}

.what-we-do__en {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}

.what-we-do__title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--color-black);
  letter-spacing: 0.4em;
  margin-bottom: 2rem;
}

.what-we-do__lead {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.8;
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
}

.what-we-do__body {
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-align: justify;
  line-height: 2;
  color: var(--color-black);
  margin-bottom: 1.5rem;
}

/* 受賞エリア */

.what-we-do__award {
  margin-top: 5rem;
  text-align: center;
}

.what-we-do__award-title {
  position: relative;
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
  padding: 0 4rem;
  margin-bottom: 1.5rem;
}

.what-we-do__award-title::before,
.what-we-do__award-title::after {
  content: '';
  position: absolute;
  top: -10%;
  height: 120%;
  width: 1px;
  background: var(--color-black);
  transform-origin: center;
}

.what-we-do__award-title::before {
  left: 1.5rem;
  transform: rotate(-22deg);
}

.what-we-do__award-title::after {
  right: 1.5rem;
  transform: rotate(22deg);
}

.what-we-do__award-content {
  display: inline-block;
  text-align: left;
}

.what-we-do__award-badges {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.what-we-do__award-badges img {
  width: 200px;
  height: auto;
}

.what-we-do__award-note {
  font-size: 0.75rem;
  color: var(--color-black);
  text-align: right;
}

/* 右側の画像コラージュ全体のコンテナ */

.what-we-do__images {
  flex: 1;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 85%;
  top: -30px;

  max-width: 550px;
  margin-left: 0;
}

/* 共通スタイル */

.what-we-do__img {
  position: absolute;
}

.what-we-do__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* 1枚目：右上のタイピング（手元） */

.what-we-do__img--01 {
  top: 3%;
  right: 3%;
  width: 42%;
  z-index: 2;
}

/* 2枚目：左上のぼかし（背景） */

.what-we-do__img--02 {
  top: 0;
  left: 28%;
  width: 36%;
  z-index: 1;
}

/* 3枚目：中央の3人ミーティング（メイン大） */

.what-we-do__img--03 {
  top: 19%;
  left: 0;
  width: 62%;
  z-index: 3;
}

/* 4枚目：右中段のトロフィー */

.what-we-do__img--04 {
  top: 43%;
  right: 0;
  width: 44%;
  z-index: 4;
}

/* 5枚目：左中段のぼかし（背景） */

.what-we-do__img--05 {
  top: 48%;
  left: 26%;
  width: 36%;
  z-index: 2;
}

/* 6枚目：中下段の女性（青シャツ） */

.what-we-do__img--06 {
  top: 64%;
  left: 14%;
  width: 42%;
  z-index: 5;
}

/* 7枚目：最下段の男性（グレーニット） */

.what-we-do__img--07 {
  top: 84%;
  right: 0;
  width: 64%;
  z-index: 6;
}

/* 下：3つの丸アイコン */

.what-we-do__items {
  /* max-width: 1200px; */
  width: 100%;
  box-sizing: border-box;
  margin: 6rem auto;
  padding: 0 40px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  text-align: center;
  justify-content: space-between;
}

.what-we-do__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.what-we-do__item-icon {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.5rem;
  background: var(--color-white);
}

.what-we-do__item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.what-we-do__item-en {
  font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-black);
    letter-spacing: 0.18em;
    margin-bottom: 0.5rem;
    word-break: break-all;
}

.what-we-do__item-ja {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--color-black);
  line-height: 1.8;
  margin-bottom: 2rem;
  letter-spacing: 0.15em;
  min-height: 3.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 今回の3道具が並ぶエリアのアイテム */

.what-we-do__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===========================
   MEMBERS（トップページ）
=========================== */

.members {
  padding: 80px 0 80px 80px;
  overflow: hidden;
}

.members__header {
  padding-right: 80px;
  margin-bottom: 2.5rem;
}

.members__en {
  font-family: var(--font-en);
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-bottom: 0.25rem;
}

.members__sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.members__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.3em;
}

.members__arrows {
  display: flex;
  gap: 0.75rem;
}

.members__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--color-main);
  background: transparent;
  color: var(--color-main);
  font-size: 2rem;
  padding-bottom: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s cubic-bezier(0.65, 0, 0.35, 1); /* 尺・イージングをサイト標準に統一 */
}

.members__arrow:focus-visible {
  background: var(--color-main);
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .members__arrow:hover {
    background: var(--color-main);
    color: var(--color-white);
  }
}

.members__arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Splideスライダー */

.members__splide {
  margin-bottom: 3rem;
}

.members__slide {
  padding-right: 0; /* Splideのgapで制御 */
}

.members__card-link {
  display: block;
  text-decoration: none;
  color: var(--color-black);
}

.members__card-img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 1.25rem;
}

.members__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.members__card-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.members__card-dept {
  font-family: var(--font-serif);
  font-size: 0.975rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.members__all {
  display: flex;
  justify-content: center;
  padding-right: 80px;
}

/* ===========================
   ENVIRONMENT
=========================== */

.environment {
  padding-bottom: 100px;
}

.environment__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.environment__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 40px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* テキスト */

.environment__en {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}

.environment__title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--color-black);
  letter-spacing: 0.4em;
  margin-bottom: 2rem;
}

.environment__lead {
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-align: justify;
  line-height: 2;
  color: var(--color-black);
  margin-bottom: 1.5rem;
}

/* リンクリスト */

.environment__links {
  list-style: none;
  flex: 1;
  max-width: 330px;
  padding-top: 0.5rem;
  margin-right: 6.5vw;
}

.environment__links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: var(--color-black);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

/* ALLボタンエリア */

.environment__all {
  text-align: center;
}

/* ===========================
   EDUCATION
=========================== */

.education {
  background: var(--color-light-blue);
  padding-top: 100px;
  padding-bottom: 100px;
}

.education__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* テキストエリア */

.education__text {
  flex: 1;
}

.education__en {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}

.education__title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--color-black);
  letter-spacing: 0.4em;
  margin-bottom: 2rem;
}

.education__lead {
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-align: justify;
  line-height: 2;
  color: var(--color-black);
  margin-bottom: 1.5rem;
}

/* リンクリスト（3段構造） */

.education__links {
  list-style: none;
  flex: 1;
  max-width: 330px;
  padding-top: 0.5rem;
  margin-right: 6.5vw;
}

.education__links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: var(--color-black);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

/* ALLボタンエリア */

.education__all {
  text-align: center;
}

/* ===========================
   CAREER
=========================== */

.career {
  position: relative;
  background: linear-gradient(rgba(32, 45, 51, 0.15), rgba(32, 45, 51, 0.15)),url('../images/top_career_bg.webp') no-repeat center center / cover;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 100%;
}

.career__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* テキストエリア */

.career__text {
  flex: 1;
}

.career__en {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}

.career__title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.4em;
  margin-bottom: 2rem;
}

.career__lead {
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-align: justify;
  line-height: 2;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

/* リンクリスト */

.career__links {
  list-style: none;
  flex: 1;
  max-width: 330px;
  padding-top: 0.5rem;
  margin-right: 6.5vw;
}

.career__links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

/* ALLボタンエリア */

.career__all {
  text-align: center;
}

.career__all .all__btn {
    border-color: var(--color-white);
    color: var(--color-white);
    --btn-fill: var(--color-white);
    --btn-hover-text: var(--color-main);
}

/* what-we-do__item .more__btnと同じ詳細度の同点問題を回避 */
.career__all .all__btn:focus-visible {
  color: var(--btn-hover-text);
}

@media (hover: hover) and (pointer: fine) {
  .career__all .all__btn:hover {
    color: var(--btn-hover-text);
  }
}

/* ===========================
   CREATING
=========================== */

.creating {
  position: relative;
  /* 背景画像と、文字を読みやすくするための暗めの透過マスクを重ねる */
  background: linear-gradient(rgba(32, 45, 51, 0.2), rgba(32, 45, 51, 0.2)),
              url('../images/top_creating_bg.webp') no-repeat center center / cover;
  padding-top: 100px;
  padding-bottom: 200px;
  width: 100%;
}

.creating__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* テキストエリア（白文字仕様） */

.creating__text {
  flex: 1;
}

.creating__en {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
  line-height: 2.2em;
}

/* リンクリスト */

.creating__links {
  list-style: none;
  flex: 1;
  max-width: 330px;
  padding-top: 0.5rem;
  margin-right: 6.5vw;
}

.creating__links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0; /* education・careerと同一の間隔を維持 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.6); /* 白色の半透明下線 */
  text-decoration: none;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

/* ---------------------------------------------------------------------------
   ENVIRONMENT / EDUCATION / CAREER / CREATING セクション共通のリンクホバー
   ・下線：a の下端（border-bottomの区切り線の位置）で全幅のアクセント線が
     ホバーで左から伸び、外すと右へ抜ける（transform-originの切替）
   ・右端の矢印：丸+矢印マスクで色が反転（通常=青丸+白矢印 / ホバー=白丸+青矢印）
   下線色はメインカラー(--color-main)に統一。ただしcreatingだけは背景が--color-mainで
   同化して見えなくなるため、そこは白のまま（下の上書きを参照）
--------------------------------------------------------------------------- */

/* 下線：a 全幅。既存のborder-bottom(区切り線)の上にアクセント線を重ねてアニメーションする */
:is(.environment__links, .education__links, .career__links, .creating__links) li a {
  position: relative;
}

:is(.environment__links, .education__links, .career__links, .creating__links) li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* border-bottom(1px)にちょうど重なる位置 */
  height: 1px;
  background: var(--color-main); /* ホバー下線はメインカラーに統一 */
  transform: scaleX(0);
  transform-origin: right center; /* 非ホバー（消える）ときは右基準＝右へスッと抜ける */
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

/* creatingは背景が--color-mainのため、下線も--color-mainだと同化して見えない。
   ここだけ白にして視認性を確保する */
.creating__links li a::after {
  background: var(--color-white);
}

:is(.environment__links, .education__links, .career__links, .creating__links) li a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center; /* 出るときは左基準＝左からスッと伸びる */
}

/* 右端の矢印：色反転（.entry-panel__btn-arr等と同じmask手法で統一）。
   丸はborder-radius+background-color、矢印は形だけのマスク画像をbackground-colorで塗る。
   円の枠線(border)も付けて、白丸に反転しても輪郭が分かるようにする */
.links-arr {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  box-sizing: border-box; /* 枠線を足しても20pxを維持 */
  border: 1px solid var(--color-main); /* 円の枠線。白丸に反転しても輪郭が残る */
  border-radius: 50%;
  background-color: var(--color-main); /* 青丸（元のbtn_arr_linkb.svg相当） */
  transition: background-color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.links-arr::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-white); /* 白矢印 */
  -webkit-mask: url('../images/btn_arr_mask.svg') no-repeat center / contain;
  mask: url('../images/btn_arr_mask.svg') no-repeat center / contain;
  transition: background-color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

:is(.environment__links, .education__links, .career__links, .creating__links) li a:focus-visible .links-arr {
  background-color: var(--color-white);
}

:is(.environment__links, .education__links, .career__links, .creating__links) li a:focus-visible .links-arr::after {
  background-color: var(--color-main);
}

@media (hover: hover) and (pointer: fine) {
  :is(.environment__links, .education__links, .career__links, .creating__links) li a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  :is(.environment__links, .education__links, .career__links, .creating__links) li a:hover .links-arr {
    background-color: var(--color-white);
  }

  :is(.environment__links, .education__links, .career__links, .creating__links) li a:hover .links-arr::after {
    background-color: var(--color-main);
  }
}

/* ==========================================================================
   SP対応（max-width: 768px）
   カンプ: _comps/top_sp_260703_k.pdf を基準
   ========================================================================== */

@media (max-width: 767px) {

  /* ===========================
     MV 動画（1枚目）
  =========================== */

  .mv-video {
    height: 100svh;
  }

  .mv-video__content img {
    width: 55%;
  }

  .mv-video__title {
    font-size: 9vw;
    letter-spacing: 0.2em;
    line-height: 1.8;
    margin-right: -2rem;
  }

  /* ===========================
     MV メッセージ（2枚目）
  =========================== */

  .mv-message {
    height: auto;
    padding: 90px 0;
  }

  .mv-message__inner {
    padding: 0 25px;
  }

  .mv-message__logo {
    width: 55%;
  }

  .mv-message__title {
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    line-height: 1.8;
    margin-left: 2rem;
  }

  .mv-message__text {
    letter-spacing: 0.1em;
    margin-bottom: 2.5rem;
  }

  /* ===========================
     SPECIAL TALK カード（2列）
  =========================== */

  .special-talk__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0px;
    margin-bottom: 30px;
  }

  .special-talk__card-title {
    font-size: 1rem;
    padding: 0.75rem 0.25rem;
  }

  .special-talk__card-text {
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    padding: 0 0.75rem 0.5rem;
  }

  /* ===========================
     WHAT WE DO（縦積み）
  =========================== */

  .what-we-do {
    padding: 60px 0;
  }

  .what-we-do__inner {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }

  .what-we-do__text {
    max-width: none;
  }

  .what-we-do__en {
    font-size: 2.2rem;
  }

  .what-we-do__title {
    font-size: 1.45rem;
  }

  .what-we-do__lead {
    font-size: 1.125rem;
    line-height: 2.2;
  }

  .what-we-do__body {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
  }

  .what-we-do__award {
    margin-top: 3rem;
  }

  .what-we-do__award-title {
    font-size: 0.9375rem;
    padding: 0 3.7rem;
  }

  .what-we-do__award-badges img {
    width: calc(50% - 0.5rem);
    max-width: 200px;
  }

  /* 画像コラージュ: SPはカンプ準拠の4枚構成（トロフィー・ぼかし2枚目・男性は非表示） */

  .what-we-do__images {
    top: 0;
    max-width: none;
    padding-top: 130%;
  }

  .what-we-do__img img {
    border-radius: 12px;
  }

  /* 1枚目: タイピング（右上・画面右端まで） */

  .what-we-do__img--01 {
    top: 2%;
    right: -6%;
    width: 52%;
  }

  /* 2枚目: ぼかし（左上・タイピングの背面） */

  .what-we-do__img--02 {
    top: -5%;
    left: 15%;
    width: 48%;
  }

  /* 3枚目: 3人ミーティング（下段・大） */

  .what-we-do__img--03 {
    top: 60%;
    left: 8%;
    width: 88%;
  }

  /* 6枚目: 女性（中段左） */

  .what-we-do__img--06 {
    top: 26%;
    left: 0;
    width: 40%;
  }

  .what-we-do__img--04,
  .what-we-do__img--05,
  .what-we-do__img--07 {
    display: none;
  }

  /* 丸アイコン3つ → 2列グリッド（NUMBERSは2段目左） */

  .what-we-do__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 10px;
    margin: 3rem auto;
    padding: 0 20px;
  }

  .what-we-do__item-en {
    font-size: 1.375rem;
  }

  .what-we-do__item-ja {
    font-size: 0.725rem;
    min-height: auto;
    margin-bottom: 1.25rem;
  }

  .what-we-do__item .more__btn {
    padding: 6px 20px;
    font-size: 0.8125rem;
    max-width: 200px;
  }

  /* ===========================
     MEMBERS
  =========================== */

  .members {
    padding: 60px 0 60px 25px;
  }

  .members__header {
    padding-right: 25px;
    margin-bottom: 1.5rem;
  }

  .members__en {
    font-size: 2.2rem;
  }

  .members__title {
    font-size: 1.45rem;
  }

  .members__arrow {
    width: 42px;
    height: 42px;
    font-size: 1.5rem;
    padding-bottom: 6px;
  }

  .members__card-name {
    font-size: 1.25rem;
  }

  .members__card-dept {
    font-size: 0.875rem;
  }

  .members__all {
    padding-right: 25px;
  }

  /* ===========================
     ENVIRONMENT / EDUCATION / CAREER 共通の縦積み
  =========================== */

  .environment__inner,
  .education__inner,
  .career__inner {
    flex-direction: column;
    gap: 2rem;
  }

  .environment__en,
  .education__en,
  .career__en {
    font-size: 2.2rem;
  }

  .environment__title,
  .education__title,
  .career__title {
    font-size: 1.5rem;
    letter-spacing: 0.25em;
  }

  .environment__lead,
  .education__lead,
  .career__lead {
    letter-spacing: 0.1em;
    font-size: 0.875em;
  }

  .environment__links,
  .education__links,
  .career__links,
  .creating__links {
    max-width: none;
    width: 100%;
    margin-right: 0;
    padding-top: 0;
  }

  .environment__all,
  .education__all,
  .career__all {
    padding: 0 25px;
  }

  /* ENVIRONMENT */

  .environment {
    padding-bottom: 60px;
  }

  .environment__inner {
    padding: 50px 25px 40px;
  }

  /* EDUCATION */

  .education {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .education__inner {
    padding: 0 25px 40px;
  }

  /* CAREER */

  .career {
    padding-top: 60px;
    padding-bottom: 60px;
    /* SP用トリミング（女性を右側に寄せ、顔とテキストが被らない構図） */
    background: linear-gradient(rgba(32, 45, 51, 0.15), rgba(32, 45, 51, 0.15)), url('../images/top_career_bg_sp.webp') no-repeat center center / cover;
  }

  .career__inner {
    padding: 0 25px 40px;
  }

  /* CREATING
     カンプ: _comps/top_saiyo.png（1500×2668）
     背景の顔とテキストの位置関係を崩さないため、セクションを背景画像と同じ縦横比で固定し、
     テキスト位置は幅に対する%（padding）と vw で指定する */

  .creating {
    padding: 0;
    aspect-ratio: 750 / 1334; /* top_creating_bg_sp.webp と同じ比率 */
    background: linear-gradient(rgba(32, 45, 51, 0.2), rgba(32, 45, 51, 0.2)),
                url('../images/top_creating_bg_sp.webp') no-repeat center center / cover;
  }

  .creating__inner {
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap: 0;
    /* 上38%・下22% = カンプのテキスト開始位置・リンク下余白（幅基準） */
    padding: 38% 25px 22%;
  }

  .creating__en {
    font-size: 2.25rem;
    line-height: 1.5;
  }

  .creating__links{
    padding-top: 60px;
  }

  .creating__links li a {
    font-size: 1.25rem;
  }
}


/* ==========================================================================
   縦持ちタブレット帯（768px〜949px）
   ========================================================================== */

@media (min-width: 768px) and (max-width: 949px) {

  /* SPECIAL TALK: カード幅が狭くなるぶん本文の左右パディングを詰める */

  .special-talk__card-text {
    padding: 0 1.25rem 1.5rem;
  }

  /* EDUCATION / ENVIRONMENT: 英字見出しがカラム幅で折り返さないよう縮める */

  .education__en,
  .environment__en {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
  }

  /* ENVIRONMENT: リンクリストが潰れないよう幅を確保する */

  .environment__inner {
    gap: 40px;
  }

  .environment__links {
    flex: 0 0 240px;
    max-width: none;
    margin-right: 0;
  }

  .education__links,
  .career__links,
  .creating__links {
      margin-right: 0;
  }

  .members {
    padding: 80px 0 80px 40px;
}

.what-we-do__inner {
    gap: 20px;
}

.special-talk__cards br.sp-only {
    display: block;
}

.mv-message__title br.sp-only {
    display: block;
}









}


/* ==========================================================================
   トップページ アニメーション
   ========================================================================== */

/* ---------------------------
   ★調整パネル：アニメーションの速さ・タイミングはここを変える
   （文字ごと・行ごとの細かい時差だけは front-page.php のinline styleにある）
--------------------------- */

:root {
  /* オープニング */
  --anim-op-char-duration: 0.5s;  /* 1文字のせり上がり時間 */
  --anim-op-logo-duration: 0.9s;  /* ロゴのフェード時間 */
  --anim-op-logo-delay: 0.2s;     /* ロゴが出始めるまで */
  --anim-op-hide-delay: 3.1s;     /* フェードアウト開始（秒で指定。top.jsが自動で読む） */
  --anim-op-hide-duration: 0.6s;  /* フェードアウトにかける時間 */

  /* スクロール時の共通 */
  --anim-rise-duration: 0.5s;     /* 文字せり上がりの時間 */
  --anim-rise-ease: cubic-bezier(0.19, 1, 0.22, 1); /* せり上がりの質感（鋭く立ち上がり、最後でピタッと止まる） */
  --anim-reveal-duration: 0.6s;   /* ふわっと表示の時間 */
  --anim-reveal-distance: 20px;   /* ふわっと表示で浮き上がる距離（小さいほどキビキビ見える） */
  --anim-stagger: 0.08s;          /* グループ内の時差（1個ごと） */
  --anim-img-stagger: 0.06s;      /* WHAT WE DO画像の時差（1枚ごと） */

  /* WHAT WE DO コラージュの遊び */
  --anim-wwd-pop-scale: 0.94;     /* 入場時の縮小率（1で無効） */
  --anim-wwd-drift: 30px;         /* スクロール漂いの振れ幅（0pxで無効。top.jsが自動で読む） */

  /* ホバー */
  --anim-zoom-scale: 1.1;         /* 画像ズームの倍率 */
  --anim-zoom-duration: 0.5s;     /* 画像ズームの時間。バナー/フッターロゴ等の画像ズーム(0.5s)と統一 */
}

/* ---------------------------
   オープニング
   CSSアニメーションのみ
--------------------------- */

body.is-opening {
  overflow: hidden;
}

.top-opening {
  position: fixed;
  inset: 0;
  z-index: 300; /* ヘッダー(100)・ドロワー(200)より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #00D4F0 0%, #0057D9 100%);
  animation: top-opening-hide var(--anim-op-hide-duration) ease var(--anim-op-hide-delay) forwards;
}

.top-opening__inner {
  text-align: center;
  padding: 0 24px;
}

/* 白塗りSVGロゴをマスクにして表示する */
.top-opening__logo {
  width: min(300px, 55vw);
  aspect-ratio: 330 / 79;
  margin: 0 auto 2.5rem;
  background-color: var(--color-white);
  -webkit-mask: url('../images/top_animefuture.svg') no-repeat center / contain;
  mask: url('../images/top_animefuture.svg') no-repeat center / contain;
  opacity: 0;
  animation: top-opening-fade var(--anim-op-logo-duration) ease var(--anim-op-logo-delay) forwards;
}

.top-opening__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  color: var(--color-white);
  letter-spacing: 0.3em;
  line-height: 1.8;
}

/* 行単位のマスク。文字はこの中から下からせり上がる */
.top-opening__line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/* 1文字ずつのdelayはHTML側のinline styleで指定 */
.top-opening__line > span {
  display: inline-block;
  transform: translateY(120%);
  animation: mask-rise var(--anim-op-char-duration) var(--anim-rise-ease) forwards;
}

@keyframes top-opening-fade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mask-rise {
  to { transform: translateY(0); }
}

@keyframes top-opening-hide {
  to { opacity: 0; visibility: hidden; }
}

/* MV動画のロゴ・タイトルはアニメーションなし（最初から表示） */

/* ---------------------------
   マスクせり上がりの共通部品
--------------------------- */

.mask-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.mask-line__inner {
  display: inline-block;
  vertical-align: bottom;
}

/* ---------------------------
   スクロールリビール（ふわっと下から）
   .js-anim はJS実行時のみ<html>に付与される（JS無効時は普通に表示）
--------------------------- */

.js-anim .top-page .js-reveal {
  opacity: 0;
  transform: translateY(var(--anim-reveal-distance));
  transition: opacity var(--anim-reveal-duration) ease, transform var(--anim-reveal-duration) var(--anim-rise-ease);
}

.js-anim .top-page .js-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* transformを持つ要素用（スペシャルトークhero文言のtranslateY(-50%)を壊さない） */
.js-anim .top-page .js-reveal--fade {
  opacity: 0;
  transition: opacity calc(var(--anim-reveal-duration) + 0.3s) ease;
}

.js-anim .top-page .js-reveal--fade.is-inview {
  opacity: 1;
}

/* グループ表示：コンテナが見えたら子要素をDOM順（左上→右下）に時差表示する */
.js-anim .top-page .js-reveal-group > * {
  opacity: 0;
  transform: translateY(var(--anim-reveal-distance));
  transition: opacity var(--anim-reveal-duration) ease, transform var(--anim-reveal-duration) var(--anim-rise-ease);
}

.js-anim .top-page .js-reveal-group.is-inview > * {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal-group > *:nth-child(2) { transition-delay: calc(var(--anim-stagger) * 1); }
.js-reveal-group > *:nth-child(3) { transition-delay: calc(var(--anim-stagger) * 2); }
.js-reveal-group > *:nth-child(4) { transition-delay: calc(var(--anim-stagger) * 3); }
.js-reveal-group > *:nth-child(5) { transition-delay: calc(var(--anim-stagger) * 4); }
.js-reveal-group > *:nth-child(6) { transition-delay: calc(var(--anim-stagger) * 5); }

.js-anim .top-page :is(.js-reveal, .js-reveal--fade, .js-reveal-group) .mask-line__inner {
  transform: translateY(110%);
  transition: transform var(--anim-rise-duration) var(--anim-rise-ease);
  /* 行ごとのdelayはHTML側のinline styleで指定 */
}

.js-anim .top-page :is(.js-reveal, .js-reveal--fade, .js-reveal-group).is-inview .mask-line__inner {
  transform: translateY(0);
}

/* ---------------------------
   見出しの統一リズム：英字(en) 0.1s〜 → 日本語タイトル 0.35s
   どのセクションも同じ楽譜で出す（英字が複数行なら1行ごとに+0.1s）
   ※mv-message内の行ごとのdelayのみHTML側のinline styleで指定
--------------------------- */

.js-anim .top-page [class$="__en"] .mask-line:nth-of-type(1) .mask-line__inner { transition-delay: 0.1s; }
.js-anim .top-page [class$="__en"] .mask-line:nth-of-type(2) .mask-line__inner { transition-delay: 0.2s; }
.js-anim .top-page [class$="__en"] .mask-line:nth-of-type(3) .mask-line__inner { transition-delay: 0.3s; }
.js-anim .top-page [class$="__title"] .mask-line__inner { transition-delay: 0.35s; }


/* 時差表示：WHAT WE DO の画像コラージュ */
.what-we-do__img--02 { transition-delay: calc(var(--anim-img-stagger) * 1); }
.what-we-do__img--03 { transition-delay: calc(var(--anim-img-stagger) * 2); }
.what-we-do__img--04 { transition-delay: calc(var(--anim-img-stagger) * 3); }
.what-we-do__img--05 { transition-delay: calc(var(--anim-img-stagger) * 4); }
.what-we-do__img--06 { transition-delay: calc(var(--anim-img-stagger) * 5); }
.what-we-do__img--07 { transition-delay: calc(var(--anim-img-stagger) * 6); }

/* ---------------------------
   WHAT WE DO コラージュの遊び
   入場：縮小からポンと定着（外側div） / 漂い：スクロール連動でimgをJSが動かす（内側img）
--------------------------- */

.js-anim .top-page .what-we-do__img.js-reveal {
  transform: translateY(var(--anim-reveal-distance)) scale(var(--anim-wwd-pop-scale));
}

.js-anim .top-page .what-we-do__img.js-reveal.is-inview {
  transform: translateY(0) scale(1);
}

/* 画像ごとの深度係数（大きいほど速く漂う＝手前に見える。ぼかし画像は奥なので小さく） */
.what-we-do__img--01 { --drift: 1.0; }
.what-we-do__img--02 { --drift: 0.4; }
.what-we-do__img--03 { --drift: 0.7; }
.what-we-do__img--04 { --drift: 1.1; }
.what-we-do__img--05 { --drift: 0.4; }
.what-we-do__img--06 { --drift: 0.9; }
.what-we-do__img--07 { --drift: 1.2; }

/* 時差表示：WHAT WE DO の丸アイコン3つ */
.what-we-do__items .what-we-do__item:nth-child(2) { transition-delay: calc(var(--anim-stagger) * 1); }
.what-we-do__items .what-we-do__item:nth-child(3) { transition-delay: calc(var(--anim-stagger) * 2); }

/* ---------------------------
   スペシャルトーク背景のパララックス（transformはJSが設定）
--------------------------- */

.special-talk__bg {
  will-change: transform;
}

/* ---------------------------
   ENVIRONMENT：画像を固定し、スクロールでコンテンツが重なって見える
   （clip-pathの「窓」からposition:fixedの画像を覗かせる方式）
--------------------------- */

@supports (clip-path: inset(0 0 0 0)) {
  .environment__img {
    clip-path: inset(0 0 0 0);
    aspect-ratio: 2200 / 1072; /* 通常表示時と同じ高さを確保する */
    max-height: 100vh;
  }

  .environment__img img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }

  @media (max-width: 767px) {
    .environment__img {
      aspect-ratio: 1500 / 1320; /* SP用画像の比率 */
    }
  }
}

/* ---------------------------
   画像ホバー：枠は変えず中身だけ1.1倍ズーム
--------------------------- */

.card-zoom {
  display: block;
  overflow: hidden;
}

.special-talk__card img,
.members__card-img img {
  transition: transform var(--anim-zoom-duration) cubic-bezier(0.65, 0, 0.35, 1); /* イージングもサイト標準に統一（バナー等の画像ズームと揃える） */
}

.special-talk__card:focus-visible img,
.members__card-link:focus-visible .members__card-img img {
  transform: scale(var(--anim-zoom-scale));
}

@media (hover: hover) and (pointer: fine) {
  .special-talk__card:hover img,
  .members__card-link:hover .members__card-img img {
    transform: scale(var(--anim-zoom-scale));
  }
}

/* カードのホバーは画像ズームのみ（opacity変化・テキストの反応はなし） */

/* ---------------------------
   動きを減らす設定のユーザーにはアニメーションを出さない
--------------------------- */

@media (prefers-reduced-motion: reduce) {
  .top-opening {
    display: none;
  }

  .js-anim .top-page :is(.js-reveal, .js-reveal--fade, .js-reveal-group) .mask-line__inner {
    transform: none;
    animation: none;
    transition: none;
  }

  .js-anim .top-page .js-reveal,
  .js-anim .top-page .js-reveal--fade,
  .js-anim .top-page .js-reveal-group > *,
  .js-anim .top-page .what-we-do__img.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .special-talk__card:hover img,
  .members__card-link:hover .members__card-img img {
    transform: none;
  }

  :is(.environment__links, .education__links, .career__links, .creating__links) li a::after,
  .links-arr,
  .links-arr::after {
    transition: none;
  }
}


/* ==========================================================================
   フローティング：AI採用担当バナー（2枚目セクション以降で表示）
   参考: https://www.ap-com.co.jp/recruit/ の floating_recruitingAssistant_container を踏襲
   ========================================================================== */

.floating-recruiting-assistant {
  position: fixed;
  right: 2%;
  bottom: 3%;
  width: 20%;
  max-width: 260px;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.floating-recruiting-assistant.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.floating-recruiting-assistant__link {
  display: block;
}

/* .floating-recruiting-assistant__link img {
  border-radius: 20px;
} */

.floating-recruiting-assistant__close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: #D9D9D9;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-recruiting-assistant__close span {
  position: absolute;
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--color-black);
}

.floating-recruiting-assistant__close span:first-child {
  transform: rotate(45deg);
}

.floating-recruiting-assistant__close span:last-child {
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .floating-recruiting-assistant {
    width: 50%;
    right: 5%;
    bottom: 3%;
  }

  .floating-recruiting-assistant__close {
    width: 28px;
    height: 28px;
  }

  .floating-recruiting-assistant__close span {
    width: 14px;
  }
}