/* ========================================================================
   トップページ（index.php）
   - ヒーローは矩形＋斜めアルファフェードのマスク下で写真4枚が横スライド（main.js）
   - ≥1024px : PC レイアウト。--u = 100vw/1920 で一様縮尺。
                どの画面幅でも装飾と本文が同じ比率で縮むので構図が崩れない。
   - ≤1023px : SP レイアウト（% / vw で拡縮）
   ======================================================================== */

.p-index {
  /* デザインの 1px ＝ var(--u)。位置・サイズは全てこれで指定する。
     ≥1920px は 1920 で頭打ちにし、中央寄せ＝4K/ワイドモニターで全体が巨大化・間延びしない */
  --u: calc(min(100vw, 1920px) / 1920);
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;              /* ブロブ・写真の左右はみ出しを切る（横スクロール防止） */
  background: #fff;
}

/* ============================================================
   共通パーツ
   ============================================================ */

/* 見出し（英字＝白抜き＋水色アウトラインの画像／日本語＝テキスト）
   --en-size : 英字タイトル画像の基準寸法 */
.p-index-heading {
  --en-size: max(34px, calc(var(--u) * 57));
  line-height: 1;
}
/* 英字タイトル画像（message/aboutus/interview/movie.webp）。
   高さは --en-size に画像ごとの比率を掛けて指定し、上下マージンで行の高さを揃える。 */
.p-index-heading-img {
  display: block;
  width: auto;
  /* padding-top で上の余白を確保（margin だと h2 を貫通して相殺＝位置がズレる） */
  padding-top: calc(var(--en-size) * 0.35);
}
.p-index-message   .p-index-heading-img { height: calc(var(--en-size) * 0.913); margin-bottom: calc(var(--en-size) * -0.113); }
.p-index-about     .p-index-heading-img { height: calc(var(--en-size) * 0.730); margin-bottom: calc(var(--en-size) *  0.070); }
.p-index-interview .p-index-heading-img { height: calc(var(--en-size) * 0.704); margin-bottom: calc(var(--en-size) *  0.096); }
.p-index-movie     .p-index-heading-img { height: calc(var(--en-size) * 0.730); margin-bottom: calc(var(--en-size) *  0.070); }
.p-index-heading-jp {
  display: block;
  color: var(--color-cyan);
  font-size: max(15px, calc(var(--u) * 24));
  font-weight: 700;
  line-height: 1.5;
}
/* 見出しブロック自体は中央配置、日本語ラベルは英字の左端に揃える */
.p-index-heading--center {
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}

/* view ボタン（水色グラデのピル） */
.p-index-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6em;
  width: calc(var(--u) * 181);
  height: calc(var(--u) * 28);
  min-width: 130px;
  min-height: 21px;
  border-radius: 70px;
  background: linear-gradient(78deg, #a7deff 5%, rgba(224, 242, 252, 0.7) 52%, #acefff 97%);
  color: #076baf;
  text-decoration: none;
  transition: transform 0.2s;
}
/* ホバー: ふわっと拡大 */
@media (hover: hover) and (pointer: fine) {
  .p-index-view:hover {
    transform: scale(1.05);
  }
}
.p-index-view:focus-visible {
  transform: scale(1.05);
}
.p-index-view-label {
  font-family: "Anonymous Pro", monospace;
  font-size: max(14px, calc(var(--u) * 20));
  line-height: 1;
}
.p-index-view-arrow {
  font-size: max(8px, calc(var(--u) * 11));
  line-height: 1;
}

/* ============================================================
   ヒーロー（写真スライドショー）
   ============================================================ */
.p-index-hero {
  position: relative;
  height: calc(var(--u) * 756);   /* 下端＝MESSAGE 写真の上端 */
}

/* 写真・コピーをまとめる土台（位置は .p-index-hero と同一の箱）。登場演出でフェードインする */
.p-index-hero-stage {
  position: absolute;
  inset: 0;
}

/* 波の層（基準は .p-index-hero）。各波の絶対位置・揺れは内側の img 側で持つ。
   transform でなく top で降ろす＝合成グループを作らず、波の multiply が背後のコピーに正しく効く */
.p-index-hero-waves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* 登場演出：波→ヘッダー→タイトル/写真→その下のコンテンツ を順に表示（読み込み時に1回・スクロール固定なし）。
   波2.5s → ヘッダー1s → タイトル/写真1.5s → MESSAGE 1s（各段は前段の完了後に開始） */
@media (prefers-reduced-motion: no-preference) {
  /* (1) 1秒おいてから波の層を上→既定位置へ降ろす（1.0〜3.5s。着地後は img 側の揺れに引き継ぐ） */
  .p-index-hero-waves {
    animation: index-hero-waves-drop 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1s both;
  }
  @keyframes index-hero-waves-drop {
    from { top: -120%; }   /* 画面外（上）から。待機中は見えない */
    to   { top: 0; }
  }

  /* (2) 波の着地後にヘッダーをフェードイン（3.5〜4.5s）。.l-header は index.css 経由なので当ページ限定 */
  .l-header {
    animation: index-hero-fade 1s ease 3.5s both;
  }

  /* (3) ヘッダー表示後に写真・コピー（タイトル）をフェードイン（4.5〜6.0s） */
  .p-index-hero-stage {
    animation: index-hero-fade 1.5s ease 4.5s both;
  }

  /* (4) タイトル/写真の完了から1秒おいて、その下のコンテンツ（MESSAGE）と、その上の水滴を同時にフェードイン（7.0〜8.0s） */
  .p-index-message,
  .p-index-hero-drops {
    animation: index-hero-fade 1s ease 7s both;
  }
  @keyframes index-hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* 写真ビューポート：斜めフェードのマスク下で4枚が横スライド */
.p-index-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--u) * 1273);
  aspect-ratio: 1273 / 528;
  overflow: hidden;
  -webkit-mask-image: url("../../images/index/hero-mask-pc.svg");
          mask-image: url("../../images/index/hero-mask-pc.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.p-index-hero-track {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* スライドは全て重ね、is-active のものだけクロスフェードで表示 */
.p-index-hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-index-hero-slide.is-active {
  opacity: 1;
}
/* 各写真のトリミング位置（元画像をマスク窓に対してオフセット配置） */
.p-index-hero-slide img {
  position: absolute;
  display: block;
  width: 122.3%;
  height: auto;
}
.p-index-hero-slide.is-s1 img { left: -17.9%; top: -7%; }
.p-index-hero-slide.is-s2 img { left: -17.3%; top: -22.7%; }
.p-index-hero-slide.is-s3 img { left: -15.6%; top: -11.9%; }
.p-index-hero-slide.is-s4 img { left: -22.2%; top: -27.3%; }

/* キャッチコピー（画像）と英文タグライン */
.p-index-hero-copy {
  position: absolute;
  top: calc(var(--u) * 113);
  left: calc(var(--u) * 384);
  z-index: 2;
  width: calc(var(--u) * 570);
  margin: 0;
}
.p-index-hero-copy img {
  display: block;
  width: 100%;
  aspect-ratio: 528.787 / 160;   /* SVG は preserveAspectRatio=none のため比率を明示 */
}
.p-index-hero-tagline {
  position: absolute;
  top: calc(var(--u) * 295);
  left: calc(var(--u) * 386);
  z-index: 2;
  margin: 0;
  color: #a4d8ed;
  font-family: "Anonymous Pro", monospace;
  font-size: max(11px, calc(var(--u) * 21));
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 下端の波（白ベタ部分は multiply で透ける）。
   PC: 波を「奥」「手前」の2層に分け、互い違いの速度・方向で揺らして動きを出す。
   各レイヤーは画面より大きくはみ出しているので、横に動かしても端は見えない。
   SP: 1枚をゆっくり揺らす */
.p-index-hero-wave {
  position: absolute;
  z-index: 3;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
  will-change: transform;
}
.p-index-hero-wave--back {
  top: calc(var(--u) * 154);
  left: calc(var(--u) * -346);
  width: calc(var(--u) * 2542);
  animation: index-wave-back 10s ease-in-out infinite alternate;
}
.p-index-hero-wave--front {
  top: calc(var(--u) * 226);
  left: calc(var(--u) * -920);
  width: calc(var(--u) * 3084);
  animation: index-wave-front 6.5s ease-in-out infinite alternate;
}
.p-index-hero-wave--sp {
  display: none;
}
/* 奥の波：右へゆっくり */
@keyframes index-wave-back {
  0%   { transform: translate3d(-3%, 0, 0); }
  100% { transform: translate3d(3%, 8px, 0); }
}
/* 手前の波：逆方向へ少し速く＋上下のうねり */
@keyframes index-wave-front {
  0%   { transform: translate3d(3%, 4px, 0); }
  50%  { transform: translate3d(0.1%, 14px, 0); }
  100% { transform: translate3d(-3%, 0, 0); }
}
/* SP 用：1枚をたゆたわせる */
@keyframes index-wave-sway {
  0%   { transform: translate3d(-4%, 0, 0); }
  50%  { transform: translate3d(0%, 8px, 0); }
  100% { transform: translate3d(4%, 0, 0); }
}
/* 視差効果を減らす設定のユーザーには動かさない */
@media (prefers-reduced-motion: reduce) {
  .p-index-hero-wave {
    animation: none;
  }
}

/* 波の下の水滴（グラデ大＋小） */
.p-index-hero-drops {
  position: absolute;
  top: calc(var(--u) * 628);
  left: calc(var(--u) * 478);
  z-index: 2;
  pointer-events: none;
}
.p-index-hero-drop-l {
  display: block;
  width: calc(var(--u) * 55);
  aspect-ratio: 55.171 / 94.198;  /* SVG は preserveAspectRatio=none のため比率を明示 */
}
.p-index-hero-drop-s {
  position: absolute;
  top: 0;
  left: calc(var(--u) * 66);
  width: calc(var(--u) * 38);
  opacity: 0.85;
  transform: rotate(40deg);
}

/* ENTRY 丸ボタン（スマホのみ） */
.p-index-hero-entry {
  display: none;
}

/* ENTRY ドロップダウン（トップSP・右下固定）。既定は非表示、メニューは上方向へ開く。 */
.c-entry--index { display: none; }
.c-entry--index .c-entry-toggle { padding: 0; }                 /* button既定paddingを除去（円の寸法を維持） */
.c-entry--index .c-entry-menu { transform: translateY(6px); }   /* 上開き用の初期オフセット */
.c-entry--index.is-open .c-entry-menu { transform: translateY(0); }

/* ============================================================
   背景ブロブ（淡い水色）— MESSAGE〜3分でわかるの背面
   ============================================================ */
.p-index-message::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 119);
  left: calc(var(--u) * -129);
  z-index: -1;
  width: calc(var(--u) * 2478);
  height: calc(var(--u) * 1438);
  background: url("../../images/index/blob.svg") no-repeat center / 100% 100%;
  transform: rotate(11deg);
  pointer-events: none;
}

/* ============================================================
   MESSAGE（社長メッセージ）
   ============================================================ */
.p-index-message {
  position: relative;
  z-index: 1;
}
.p-index-message-inner {
  position: relative;
  width: calc(var(--u) * 974);
  height: calc(var(--u) * 307);
  margin: 0 auto;
}
.p-index-message-photo {
  position: absolute;
  top: 0;
  left: calc(var(--u) * 45);
  width: calc(var(--u) * 541);
  margin: 0;
}
.p-index-message-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.p-index-message-body {
  position: absolute;
  top: calc(var(--u) * 37);
  left: calc(var(--u) * 573);
}
.p-index-message-body .p-index-view {
  margin-top: calc(var(--u) * 1);
}

/* ============================================================
   ABOUT US（会社紹介）
   ============================================================ */
.p-index-about {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--u) * 25);
}
.p-index-about-inner {
  position: relative;
  width: calc(var(--u) * 974);
  /* 縮小幅でフォントが下限(max())で止まってもテキストが箱からあふれないよう床を設ける */
  height: max(calc(var(--u) * 472), 295px);
  margin: 0 auto;
}
.p-index-about-body {
  position: absolute;
  top: calc(var(--u) * 96);
  left: calc(var(--u) * 20);
  width: max(calc(var(--u) * 380), 240px);
}
/* 見出し下の水色波線（#A7DEFF）。他ページ（message / interview / header）と同じ
   SVG データ URI の繰り返し背景で描画（画像ファイル不使用・解像度非依存） */
.p-index-about-line {
  display: block;
  width: calc(var(--u) * 380);
  height: calc(var(--u) * 7);
  margin-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 Q 9.5 1 19 3.5 T 38 3.5' fill='none' stroke='%23A7DEFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: calc(var(--u) * 38) 100%;
}
.p-index-about-title {
  margin: calc(var(--u) * 5) 0 0;
  color: #313131;
  font-size: max(15px, calc(var(--u) * 24));
  font-weight: 500;
  line-height: 1.5;
}
.p-index-about-text {
  margin: calc(var(--u) * 3) 0 0;
  color: #313131;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 400;
  line-height: 1.36;
}
.p-index-about-body .p-index-view {
  margin-top: calc(var(--u) * 7);
  margin-left: calc(var(--u) * 199);
}
.p-index-about-photo {
  position: absolute;
  top: 0;
  right: calc(var(--u) * -32);
  width: calc(var(--u) * 554);
  margin: 0;
}
.p-index-about-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   3分でわかる（バナー）
   ============================================================ */
.p-index-3min {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--u) * 54);
  text-align: center;
}
.p-index-3min-lead {
  /* 幅はバナーより少し広く取り（2文目が18pxで1行に収まる）、左端はバナー左端にアンカー。
     → 会社紹介の本文(.p-index-about-text)と同じ18pxで、ご指定の2行を維持できる。 */
  width: calc(var(--u) * 760);
  margin: 0 0 calc(var(--u) * 30) calc((100% - var(--u) * 700) / 2);   /* 左端 = バナー左端 */
  text-align: left;
  color: #313131;
  font-size: max(12px, calc(var(--u) * 18));   /* .p-index-about-text と同サイズ */
  font-weight: 400;
  line-height: 1.36;
}
.p-index-3min-banner {
  display: inline-block;
  width: calc(var(--u) * 700);
  border-radius: calc(var(--u) * 30);
  overflow: hidden;
  transition: transform 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .p-index-3min-banner:hover {
    transform: scale(1.02);   /* 大きい要素は控えめに */
  }
}
.p-index-3min-banner:focus-visible {
  transform: scale(1.02);
}
.p-index-3min-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.p-index-3min-drop {
  position: absolute;
  bottom: calc(var(--u) * -31);
  left: calc(50% - var(--u) * 411);
  width: calc(var(--u) * 129);
  pointer-events: none;
}
/* バナー左上の小さい水滴 */
.p-index-3min::before {
  content: "";
  position: absolute;
  bottom: calc(var(--u) * 44);
  left: calc(50% - var(--u) * 436);
  width: calc(var(--u) * 45);
  aspect-ratio: 1079 / 818;
  background: url("../../images/index/drop-s.webp") no-repeat center / 100% 100%;
  transform: rotate(-15deg);
  opacity: 0.9;
  pointer-events: none;
}

/* ============================================================
   INTERVIEW（社員インタビュー）
   ============================================================ */
.p-index-interview {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--u) * 159);
}
.p-index-interview-list {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 270));
  justify-content: center;
  column-gap: calc(var(--u) * 82);
  row-gap: calc(var(--u) * 82);
  margin: calc(var(--u) * 71) 0 0;
  padding: 0;
  list-style: none;
}
.p-index-interview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
/* スクロールリビールの時差（カードが順番にほわっと出る） */
.p-index-interview-item:nth-child(2) { transition-delay: 0.08s; }
.p-index-interview-item:nth-child(3) { transition-delay: 0.16s; }
.p-index-interview-item:nth-child(4) { transition-delay: 0.08s; }
.p-index-interview-item:nth-child(5) { transition-delay: 0.16s; }
.p-index-interview-item:nth-child(6) { transition-delay: 0.24s; }

/* 円形写真：グラデ円＋頭がはみ出す人物＋水滴を切り抜いた透過 PNG（card-N.webp）。
   .p-index-interview-photo は「円」の枠＝レイアウト基準のまま、画像だけ上へはみ出す */
.p-index-interview-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  transition: transform 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .p-index-interview-card:hover .p-index-interview-photo {
    transform: scale(1.05);
  }
}
.p-index-interview-card:focus-visible .p-index-interview-photo {
  transform: scale(1.05);
}
.p-index-interview-card:focus-visible .p-index-interview-name {
  text-decoration: underline;
}
.p-index-interview-img {
  position: absolute;
  top: -11.85%;                /* 頭のはみ出しぶん */
  left: 0;
  width: 101.2%;
  max-width: none;
  height: auto;
}
/* 切り抜きに水滴が無い社員（岡本・上ノ段）のみ HTML で水滴2粒を重ねる */
.p-index-interview-drop {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 15.2%;
  height: auto;
  opacity: 0.85;
}
.p-index-interview-photo--drops::after {
  content: "";
  position: absolute;
  right: 1%;
  bottom: 12%;
  width: 6%;
  aspect-ratio: 1926 / 1267;
  background: url("../../images/index/drop-l.webp") no-repeat center / 100% 100%;
  transform: rotate(-23deg);
  opacity: 0.85;
}
.p-index-interview-dept {
  display: inline-block;
  box-sizing: border-box;              /* min-width に padding を含める＝短い部署は従来どおり 183u 幅 */
  min-width: calc(var(--u) * 183);     /* 旧: 固定 width。短い部署は従来幅、長い部署は内容に合わせて伸長 */
  margin-top: calc(var(--u) * 16);
  padding: calc(var(--u) * 3) calc(var(--u) * 14);  /* 横 padding を付与（長文の左右余白／旧 0） */
  background: #a4d8ed;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;                 /* 2行折り返しを防止（神田・上ノ段の長い部署名対策） */
  border-radius: 30px;
}
.p-index-interview-name {
  margin-top: calc(var(--u) * 6);
  color: var(--color-text);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 500;
}
.p-index-interview-card:hover .p-index-interview-name {
  text-decoration: underline;
}

/* ============================================================
   MOVIE（ムービー）
   ============================================================ */
.p-index-movie {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--u) * 84);
  padding-bottom: calc(var(--u) * 122);
}
.p-index-movie-frame {
  width: calc(var(--u) * 663);
  aspect-ratio: 16 / 9;        /* YouTube動画に合わせる（プレースホルダ時は663/329） */
  margin: calc(var(--u) * 34) auto 0;
  background: #000;
}
.p-index-movie-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.p-index-movie-drop {
  position: absolute;
  right: calc(50% - var(--u) * 424);
  bottom: calc(var(--u) * 78);
  width: calc(var(--u) * 124);
  transform: scaleY(-1) rotate(180deg);
  pointer-events: none;
}
/* 大きい水滴の左上の小さい水滴 */
.p-index-movie::after {
  content: "";
  position: absolute;
  right: calc(50% - var(--u) * 385);
  bottom: calc(var(--u) * 163);
  width: calc(var(--u) * 39);
  aspect-ratio: 1926 / 1267;
  background: url("../../images/index/drop-l.webp") no-repeat center / 100% 100%;
  transform: rotate(-12deg);
  opacity: 0.9;
  pointer-events: none;
}

/* ============================================================
   レスポンシブ：SP レイアウト
   ============================================================ */
@media (max-width: 1023px) {

  /* ---- 共通 ---- */
  .p-index-heading {
    --en-size: clamp(28px, 9.9vw, 44px);   /* 画像高さが自動追従 */
  }
  .p-index-heading-jp {
    margin-top: 6px;
    font-size: clamp(14px, 4.2vw, 19px);
  }
  .p-index-view {
    width: 126px;
    height: 20px;
    min-width: 0;
    min-height: 0;
    gap: 1.2em;
  }
  .p-index-view-label {
    font-size: 14px;
  }
  .p-index-view-arrow {
    font-size: 8px;
  }

  /* ---- ヒーロー ---- */
  .p-index-hero {
    height: 145vw;                    /* 波下端〜Message見出しの間隔に合わせる */
  }
  .p-index-hero-photo {
    width: 100%;
    aspect-ratio: 402 / 331;
    -webkit-mask-image: url("../../images/index/hero-mask-sp.svg");
            mask-image: url("../../images/index/hero-mask-sp.svg");
  }
  /* SP のトリミング位置（マスク窓 402x331 に対する元画像のオフセット） */
  .p-index-hero-slide.is-s1 img { width: 181.6%; left: -65.4%; top: 0; }
  .p-index-hero-slide.is-s2 img { width: 157.0%; left: -28.6%; top: -7.3%; }
  .p-index-hero-slide.is-s3 img { width: 160.9%; left: -35.1%; top: 0; }
  .p-index-hero-slide.is-s4 img { width: 169.4%; left: -47.0%; top: -15.7%; }
  .p-index-hero-copy {
    top: 79vw;
    left: 13.4%;
    width: 71%;
  }
  .p-index-hero-tagline {
    top: 102.5vw;
    left: 14.1%;
    font-size: clamp(10px, 2.69vw, 16px);
    letter-spacing: 0.04em;
  }
  .p-index-hero-wave--back,
  .p-index-hero-wave--front {
    display: none;
  }
  .p-index-hero-wave--sp {
    display: block;
    top: 92.5vw;
    left: -5%;
    width: 110%;               /* 横揺れ（±4%）で端が見えないように */
    animation: index-wave-sway 8s ease-in-out infinite alternate;
  }
  .p-index-hero-drops {
    top: 144vw;
    left: 10%;
  }
  .p-index-hero-drop-l {
    width: 7.2vw;
  }
  .p-index-hero-drop-s {
    left: 8.7vw;
    width: 6vw;
  }

  /* ENTRY 丸ボタン（黄色・スマホのみ）— 画面右下に固定してスクロールに追従 */
  .p-index-hero-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 固定配置は親 .c-entry--index に移譲（メニューをボタンの上に重ねるため）。ここは静的。 */
    position: static;
    width: min(19.7vw, 79px);
    height: min(19.7vw, 79px);
    border-radius: 50%;
    border: 2px solid #fff;           /* 白リング */
    background: #f8faae;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    color: #076baf;
    font-family: "Anonymous Pro", monospace;
    font-size: clamp(12px, 4.5vw, 18px);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: uppercase;
  }
  /* 固定ラッパ（右下）。メニューはボタン上に開く。 */
  .c-entry--index {
    display: block;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 80;                      /* ヘッダー(100)・SPメニュー(90)の下、コンテンツの上 */
  }
  .c-entry--index .c-entry-menu {
    right: 0;
    bottom: 100%;
    margin-bottom: 10px;
  }

  /* ---- 背景ブロブ（SP 専用画像） ---- */
  .p-index-message::before {
    top: 12vw;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 402 / 977;
    background-image: url("../../images/index/blob-sp.webp");
    transform: none;
  }

  /* ---- MESSAGE ---- */
  .p-index-message {
    margin-top: 14.5vw;
  }
  .p-index-message-inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;   /* SP は 見出し→view→写真 の順 */
  }
  .p-index-message-photo {
    position: static;
    width: 74.4%;
    margin: 0 auto;
  }
  .p-index-message-body {
    position: static;
    padding-left: 12.7%;
  }
  .p-index-message-body .p-index-view {
    margin-top: 0;
  }

  /* ---- ABOUT US ---- */
  .p-index-about {
    margin-top: 7.5vw;
  }
  .p-index-about-inner {
    width: 100%;
    height: auto;
    padding: 0 0 34vw 12.7%;   /* 下余白＝右下に張り出す写真ぶん */
  }
  .p-index-about-body {
    position: static;
    width: auto;
  }
  .p-index-about-line {
    width: 77.6vw;
    height: 1.4vw;
    background-size: 9.5vw 100%;
  }
  .p-index-about-title {
    margin-top: 12px;
    font-size: 18px;
  }
  .p-index-about-text {
    width: 55%;
    font-size: 14px;
    line-height: 1.75;
  }
  .p-index-about-body .p-index-view {
    margin: 6vw 0 0;
  }
  .p-index-about-photo {
    top: auto;
    bottom: 0;
    right: -4.2%;
    width: 58%;
  }

  /* ---- 3分でわかる ---- */
  .p-index-3min {
    margin-top: 10.7vw;
  }
  .p-index-3min-lead {
    width: 88%;               /* スマホは横幅を広く使い行数を抑える（タブレットは 600-1023 で 74.4% に戻す） */
    margin: 0 auto 5.3vw;
    text-align: center;       /* スマホは中央寄せ。左へ偏らせない（タブレット/PCは左揃え） */
    font-size: 14px;          /* .p-index-about-text（SP 14px）と同サイズ */
    line-height: 1.7;
    text-wrap: balance;       /* 均等配分して孤立行を防ぐ */
  }
  .p-index-3min-lead br { display: none; }   /* スマホ/タブレットは2行に収まらないので改行は解除し自然折り返し */
  .p-index-3min-banner {
    width: 74.4%;
    border-radius: 10px;
  }
  .p-index-3min-drop {
    left: 7%;
    bottom: -8.5vw;
    width: 13.7vw;
  }
  .p-index-3min::before {
    left: 5.5%;
    bottom: 4.7vw;
    width: 6vw;
  }

  /* ---- INTERVIEW ---- */
  .p-index-interview {
    margin-top: 33vw;
  }
  .p-index-interview .p-index-heading--center {
    margin-left: 19.4%;   /* 左寄せ配置（ラベル左揃えは基底ルールで適用済み） */
  }
  .p-index-interview-list {
    grid-template-columns: repeat(2, 42%);
    justify-content: center;
    column-gap: 4%;
    row-gap: 11vw;
    margin-top: 10vw;
  }
  /* 部署名ピル: 文字量に合わせた幅。長い部署名（神田・上ノ段）も1行に収まるよう、
     カード幅(42vw)に追従して少し小さめに。上限11px=従来12pxより少し小さく、狭い端末では縮小。 */
  .p-index-interview-dept {
    width: auto;
    margin-top: 2.5vw;
    padding: 2px 14px;
    font-size: clamp(9px, 2.7vw, 11px);
  }
  .p-index-interview-name {
    margin-top: 2.5vw;
  }
  .p-index-interview-name {
    font-size: clamp(11px, 3.55vw, 15px);
  }

  /* ---- MOVIE ---- */
  .p-index-movie {
    margin-top: 15vw;
    padding-bottom: 31vw;
  }
  .p-index-movie-frame {
    width: 80%;
    margin-top: 1vw;
  }
  .p-index-movie-drop {
    right: 4%;
    bottom: 10px;
    width: 15vw;
  }
  .p-index-movie::after {
    right: 4.5%;
    bottom: 15vw;
    width: 5.5vw;
  }
}

/* ============================================================
   レスポンシブ：タブレット（600〜1023px）
   SP レイアウトは vw 基準で組まれており、タブレット幅では余白・要素が
   そのまま拡大して間延びする。ここで本文列を最大 600px・中央寄せに固定し、
   vw で位置決めしている箇所を「600px 相当」の固定値に置き換える＝
   スマホ表示をそのまま中央に置いた見え方に揃える（崩れ・間延びを防止）。
   ※ ≤599px（スマホ）と ≥1024px（PC）はこのブロックの対象外で従来どおり。
   ============================================================ */
@media (min-width: 600px) and (max-width: 1023px) {
  .p-index { max-width: 600px; margin-inline: auto; }

  /* ヒーロー（vw 位置を 600px 相当の固定値へ） */
  .p-index-hero { height: 870px; }
  .p-index-hero-copy { top: 474px; }
  .p-index-hero-tagline { top: 615px; }
  .p-index-hero-wave--sp { top: 555px; }
  .p-index-hero-drops { top: 864px; }
  .p-index-hero-drop-l { width: 43px; }
  .p-index-hero-drop-s { left: 52px; width: 36px; }

  /* 背景ブロブ */
  .p-index-message::before { top: 72px; }

  /* MESSAGE */
  .p-index-message { margin-top: 87px; }

  /* ABOUT US */
  .p-index-about { margin-top: 45px; }
  .p-index-about-inner { padding-bottom: 204px; }
  .p-index-about-line { width: 466px; height: 8px; background-size: 57px 100%; }
  .p-index-about-body .p-index-view { margin: 36px 0 0; }

  /* 3分でわかる */
  .p-index-3min { margin-top: 64px; }
  .p-index-3min-lead { width: 74.4%; margin-bottom: 32px; text-align: left; font-size: 14px; }
  .p-index-3min-drop { bottom: -51px; width: 82px; }
  .p-index-3min::before { bottom: 28px; width: 36px; }

  /* INTERVIEW */
  .p-index-interview { margin-top: 198px; }
  .p-index-interview-list { row-gap: 66px; margin-top: 60px; }
  .p-index-interview-dept { margin-top: 15px; }
  .p-index-interview-name { margin-top: 15px; }

  /* MOVIE */
  .p-index-movie { margin-top: 90px; padding-bottom: 186px; }
  .p-index-movie-drop { width: 90px; }
  .p-index-movie::after { bottom: 90px; width: 33px; }
}