/* ============================================================
   DayTry トップページ専用スタイル（Apple風リデザイン 2026-07-18）
   - index.html からのみ読み込む（他ページは従来の style.css のまま）
   - style.css の後に読み込み、body.top-apple スコープで上書きする
   - JSフック（#company-list / #companies-more / #hero-student-panel /
     .site-header .logo / .reveal）は
     既存 main.js と互換を保つこと
     （#ticker-track はロゴティッカーごと廃止した 2026-08-05）
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body.top-apple {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --surface: #f5f5f7;
  --accent: var(--primary, #1976d2);
  --accent-2: #7b5bf2;
  --radius-lg: 28px;
  background: #fff;
  color: var(--ink);
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---- 共通：セクションとタイポグラフィ ---- */
body.top-apple .ap-section {
  padding: clamp(72px, 10vw, 130px) 20px;
}
body.top-apple .ap-section-alt {
  background: var(--surface);
}
body.top-apple .ap-container {
  max-width: 1040px;
  margin: 0 auto;
}
body.top-apple .ap-eyebrow {
  display: block;
  font-size: clamp(12px, 3.59vw, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 14px;
}
/* 文字サイズは画面幅に比例させ、小さい画面でも行数（＝見た目の形）が変わらないようにする。
   clamp の下限を低めに取るのがポイント。下限が高いと狭い画面で折り返して2〜3行になる。 */
body.top-apple .ap-h2 {
  font-size: clamp(21px, 5.4vw, 54px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.16;
  margin: 0 0 14px;
}
body.top-apple .ap-lead {
  /* 下限 12.5→15px（2026-09-17）。390pxの端末で 13.3px しかなく、
     オーナー「フォントは見やすさ優先でいい」に合わせて本文の下限を上げた */
  font-size: clamp(15px, 3.4vw, 19px);
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 640px;
}
body.top-apple .ap-center {
  text-align: center;
}
body.top-apple .ap-center .ap-lead {
  margin-left: auto;
  margin-right: auto;
}
/* 強調したい語（「やりたいこと」「経験」など）。
   2026-09-15 まで青→紫のグラデーションだったが、紫は仕事タイプ診断の色であって
   DayTry の色ではない。既製テンプレートで最もよく見る組み合わせでもあり、
   青＋黄色マーカーという DayTry の見た目を弱めていた。単色にすると輪郭も締まる */
body.top-apple .ap-grad {
  color: var(--accent);
}

/* ---- 日本語の折り返し調整 ----
   .nb（no-break）で囲んだ語のまとまりは途中で改行されず、まとまりの境目でだけ折り返す。
   見出しは text-wrap:balance で行長を揃え、本文は pretty で最終行の1〜2文字残りを防ぐ。 */
body.top-apple .nb {
  display: inline-block;
}
body.top-apple h1,
body.top-apple h2,
body.top-apple h3 {
  text-wrap: balance;
}
body.top-apple p,
body.top-apple .ap-worry-quote {
  text-wrap: pretty;
}
/* ダークバンドの見出し。文言が短くなったぶん、デザイン構成（左テキスト＋右カルーセル）は
   保ったまま、できるだけ大きく配置する。2行目「自分の仕事タイプを知ろう」は nb で囲まず
   自然折り返し可にしてあるので、列幅が狭い中間サイズでは折り返して崩れを防ぐ。
   モバイル(1カラム中央)は下限30pxで大きく、PCは列幅に収まる46pxで頭打ち。 */
body.top-apple .ap-diag .ap-h2 {
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.2;
}

body.top-apple .sp-only {
  display: none;
}
@media (max-width: 600px) {
  body.top-apple .sp-only {
    display: inline;
  }
}

/* 【スクロールで浮き上がる動きは 2026-08-07 にやめた】
   理由は style.css の `.reveal` を参照。ここは top-apple 用に
   34px の translateY を上書きしていた場所で、**残すと style.css 側で
   無効にしても詳細度で勝ってしまい、要素が34px下にずれたまま固定される。**
   （以前も同じ形でハマっている：is-visible 側を書き忘れてボタンが36px飛んだ） */
body.top-apple .reveal,
body.top-apple .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- ヘッダー：すりガラス ---- */
body.top-apple .site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.top-apple .ap-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
body.top-apple .ap-nav-link {
  font-size: clamp(12px, 3.46vw, 13.5px);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
body.top-apple .ap-nav-link:hover {
  opacity: 1;
  color: var(--accent);
}
body.top-apple .ap-nav-cta {
  font-size: clamp(12px, 3.33vw, 13px);
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  /* 押せる高さ44px（320pxで34px、375pxで37pxしか無かった）。
     見た目の高さは padding ではなく min-height で作り、文字は中央にそろえる */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.top-apple .ap-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.35);
}

/* ---- ヒーロー（2026-09-13 作り直し）：左キャッチ／右は斜め切りの画像パネル ----
   「サイトを開いた人にいきなり募集一覧が目に入る」のが狙いなので、
   上下の余白とキャッチの文字を以前（最大92px）よりだいぶ小さくして、
   HERO全体を 1画面の半分以下 に収める。CTAボタンは置かない（オーナー指示）。
   右の画像パネル(.ap-hero-art)は .ap-hero に絶対配置し、画面の右端まで伸ばす。
   左端を斜めに切る（clip-path）。斜めはサイトの「斜めの札」（skewX(-9deg)）と同じ向き */
body.top-apple .ap-hero {
  position: relative; /* 画像パネルの絶対配置の基準 */
  min-height: clamp(280px, 30vw, 400px);
  display: flex;
  align-items: center;
  padding: clamp(20px, 2.6vw, 36px) 20px;
  /* 青いにじみ（radial-gradient）は 2026-09-17 にやめて白の単色に。写真が入ったので、
     背景で雰囲気を足す必要がなくなった（重ねるほど作り物っぽく見える） */
  background: #fff;
  overflow: hidden;
}
body.top-apple .ap-hero-grid {
  width: 100%;
  text-align: left;
}
/* コピーは画像パネルの左に収める（パネル幅＋斜めのぶんを右に空ける） */
body.top-apple .ap-hero-copy {
  max-width: 500px;
  padding-right: clamp(0px, 4vw, 40px);
}
body.top-apple .ap-hero h1 {
  font-size: clamp(30px, 3.7vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 12px;
}
/* キャッチの2フェーズ（仕事体験でさがす／インターンで経験をつくる）を縦に積む */
body.top-apple .ap-hero h1 .ap-h1-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 10px;
  font-size: clamp(15px, 1.6vw, 21px);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
body.top-apple .ap-h1-step {
  display: inline-block;
}
/* 画像パネル。外側(.ap-hero-art)が青の帯、内側(.ap-hero-art-inner)を少し細く切って
   その差が斜めの帯になる。幅は画面の約半分、右端まで */
body.top-apple .ap-hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(52vw, 780px);
  /* 境目の帯は青の単色（2026-09-17。グラデーションをやめた） */
  background: var(--accent);
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
}
body.top-apple .ap-hero-art-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #eef5ff 0%, #dcebfb 100%);
  clip-path: polygon(calc(13% + 9px) 0, 100% 0, 100% 100%, 9px 100%);
}
body.top-apple .ap-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 60% 50%;
  /* 白背景のイラストの白だけ消して、パネルの淡い青に馴染ませる。
     写真に差し替えるときは .is-photo を付けて外す（cover で全面に） */
  mix-blend-mode: multiply;
  padding: 4% 6% 0 12%;
}
body.top-apple .ap-hero-art picture { display: contents; }
body.top-apple .ap-hero-art.is-photo img {
  mix-blend-mode: normal;
  object-fit: cover;
  /* 4人の顔（元画像の上から10〜50%）とノートパソコンの上端が入る位置。
     パネルは横長（約2:1）なので上下が切られる。上を切りすぎると立っている人の頭が欠ける */
  object-position: 50% 30%;
  padding: 0;
}

/* ---- 条件でさがすバー（HERO直下・2026-09-13） ----
   白い1枚のバーに「職種｜勤務地｜業種」の3欄と青いボタン。
   欄は上に小さな見出し、下に選んだ値（太字）。
   【2026-09-14】選ぶUIは欄の下に開くパネル（.ap-search-pop、チップ並び）。JS が
   .is-enhanced を付けたら select を隠し、代わりに値ボタン(.ap-search-value)を出す。
   JS が動かないときは下の select の指定（素の矢印を消して▽を自前で描く）がそのまま効く */
body.top-apple .ap-search {
  padding: clamp(14px, 1.8vw, 22px) 20px;
  background: #eef5ff;
}
body.top-apple .ap-search-bar {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(23, 109, 193, 0.14);
  border-radius: 22px;
  /* 影は無彩色に（2026-09-17）。青いにじみが全部の箱に乗っていたのをやめ、
     色はロゴ・札・ボタンにだけ残す */
  box-shadow: 0 6px 18px rgba(15, 25, 45, 0.07);
  padding: 6px;
}
body.top-apple .ap-search-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
body.top-apple .ap-search-field:first-child {
  border-left: none;
}
body.top-apple .ap-search-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
body.top-apple .ap-search-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.top-apple .ap-search-label {
  font-size: 12px; /* 11→12px（2026-09-17）。何の欄かを示す文字がいちばん小さかった */
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
body.top-apple .ap-search-field select {
  width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231976d2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 16px 16px;
  padding: 0 24px 0 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
}
body.top-apple .ap-search-field select:focus {
  outline: none;
}
body.top-apple .ap-search-field:focus-within,
body.top-apple .ap-search-field.is-open {
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(25, 118, 210, 0.35);
}
/* --- パネル式（JS で強化したあと） --- */
body.top-apple .ap-search-bar.is-enhanced .ap-search-field {
  position: relative; /* パネルの基準 */
}
body.top-apple .ap-search-bar.is-enhanced .ap-search-field select {
  /* 送信用に残すが見せない（display:none だとフォーカス管理が崩れるので視覚的に隠す） */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* 値ボタン。見出し（職種 など）と値を縦に並べ、ボタン自体を44px以上にする
   （2026-09-15 監査 touch：以前は値の1行だけがボタンで高さ20pxだった） */
body.top-apple .ap-search-value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 26px 0 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
body.top-apple .ap-search-value-text {
  max-width: 100%;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.top-apple .ap-search-value.is-set .ap-search-value-text {
  color: var(--accent);
}
body.top-apple .ap-search-value::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231976d2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  transition: transform 0.18s ease;
}
body.top-apple .ap-search-field.is-open .ap-search-value::after {
  transform: translateY(-50%) rotate(180deg);
}
/* 【2026-09-17】ここに outline:none があり、style.css の
   「キーボードで辿ったときの印」を打ち消していた（詳細度が同じで top.css があとに読まれる）。
   :focus-visible は指やマウスでは効かないので、消す必要がない。印は style.css 側が持つ */
/* パネル：欄の下に浮く白いカード。中は一覧ページの絞り込みチップと同じ札 */
body.top-apple .ap-search-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: -1px;
  z-index: 30;
  width: max-content;
  min-width: 100%;
  max-width: min(520px, calc(100vw - 32px));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(23, 109, 193, 0.14);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 25, 45, 0.16);
  animation: ap-search-pop-in 0.16s ease-out;
}
body.top-apple .ap-search-pop[hidden] {
  display: none;
}
/* パネルの上の小さな三角（欄とのつながりを見せる） */
body.top-apple .ap-search-pop::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(23, 109, 193, 0.14);
  border-top: 1px solid rgba(23, 109, 193, 0.14);
  transform: rotate(45deg);
}
@keyframes ap-search-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.top-apple .ap-search-pop { animation: none; }
}
body.top-apple .ap-search-opt {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 15px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body.top-apple .ap-search-opt:hover,
body.top-apple .ap-search-opt:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  /* outline:none を外した（2026-09-17）。style.css の「キーボードで辿ったときの印」を
     打ち消していた。指やマウスのときは :focus-visible が効かないので、ここで消す必要はない */
}
body.top-apple .ap-search-opt.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
body.top-apple .ap-search-btn {
  flex: none;
  align-self: center;
  margin-left: 6px;
  padding: 14px 28px;
  font-size: 15px;
  border: 0; /* button 要素なのでブラウザ既定の灰色の枠を消す（.ap-btn は a 前提で border を持たない） */
  border-radius: 999px; /* ボタンの角丸にそろえる（2026-09-16） */
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.28);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

/* 「ES・面接なし。」。
   2026-09-17 まで、朝焼け色の帯が文字の上を永久に掃く「シャイン」を入れていた。
   帯が通るあいだ「面接」が淡い桃色になって白地に溶け、いちばん読ませたい語が
   いちばん読めない瞬間ができていた（390pxで実測）。飾りより読めることを優先してやめた。 */
body.top-apple .ap-h1-lead {
  color: #111;
}

/* 黄色マーカー強調（旧デザインの signature を継承）。
   マーカーはフレーズ単位なので inline-block で途中改行を防ぐ（「ぜ/んぶ想定内。」対策） */
body.top-apple .ap-marker {
  display: inline-block;
  background: linear-gradient(transparent 62%, #ffe66d 62%);
  padding: 0 3px;
  border-radius: 2px;
}

/* （HEROのCTAボタン2つは 2026-09-13 に廃止。.hero-cta-cards / .ap-hero .ap-btn の指定も削除） */
body.top-apple .ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12.8px, 4.10vw, 16px);
  font-weight: 700;
  padding: 15px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
body.top-apple .ap-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(25, 118, 210, 0.32);
}
body.top-apple .ap-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(25, 118, 210, 0.4);
}
body.top-apple .ap-btn-ghost {
  color: var(--accent);
  background: transparent;
}
body.top-apple .ap-btn-ghost:hover {
  text-decoration: underline;
}
body.top-apple .ap-btn-ghost::after {
  content: "›";
  font-size: clamp(15.2px, 4.87vw, 19px);
  line-height: 1;
  transform: translateY(-1px);
}

/* ---- 会社ゲージの共通部品（.hsp-gauge-row / .hsp-slots など） ----
   マイページの「応募の状況」がこの部品を使う（js/mypage.js）。
   【2026-09-15】ヘッダー直下の帯（.student-strip）用に小さくした指定が
   マイページのタイルまで縮めてしまった（64px→26px）ので、帯の指定は
   .student-strip に限定し、ここに元の大きさの共通指定を戻した */
body.top-apple .hsp-gauge-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
body.top-apple .hsp-gauge-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
body.top-apple .hsp-gauge-count {
  font-size: 13px;
  color: var(--ink-2);
}
body.top-apple .hsp-gauge-count strong {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  margin-right: 1px;
  font-variant-numeric: tabular-nums;
}
body.top-apple .hsp-max {
  font-weight: 700;
}
body.top-apple .hsp-left {
  margin-left: 8px;
  font-weight: 800;
  color: var(--ink);
  font-size: 12.5px;
}
body.top-apple .hsp-left.is-full {
  color: var(--ink-2);
  font-weight: 700;
}
/* 4枠の会社タイル。埋まった枠＝会社の頭文字、空き枠＝破線＋うすい「＋」。
   破線＝「これから」は、パレードの?札・診断結果の鍵リングと同じ語彙 */
body.top-apple .hsp-slots {
  display: flex;
  gap: 9px;
  margin-top: 10px;
}
body.top-apple .hsp-slot {
  flex: 1;
  max-width: 64px;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 2px dashed #c3d3e4;
  background: #fbfdff;
  color: #a8bcd2;
  font-size: 20px;
  font-weight: 700;
}
body.top-apple .hsp-slot:not(.is-filled)::before {
  content: "＋";
}
body.top-apple .hsp-slot.is-filled {
  border: none;
  background: linear-gradient(150deg, #2a86e0, var(--accent));
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(25, 118, 210, 0.28);
}

/* ---- ログイン済みの学生に出す帯（ヘッダー直下） ----
   2026-09-13 にHERO内のカードから、ヘッダーの直下に横1行で並ぶ帯へ変更（オーナー指示：
   「体験している企業や、やることは、ヘッダーの下に簡潔に」）。
   出し入れは js/main.js の setupRegisterBanner（id は以前のまま hero-student-panel）。
   並び：体験している会社 [4タイル] 1/4社 あと3社（「おかえりなさい」「マイページ ›」は 2026-09-17 に削除）
   （「やること」の札は 2026-09-17 オーナー指示で削除。通知はハンバーガーの赤い点＝style.css .site-nav-dot） */
body.top-apple .student-strip {
  background: linear-gradient(90deg, #f1f7ff, #eef5ff 60%, #f6f9ff);
  border-bottom: 1px solid rgba(23, 109, 193, 0.14);
}
body.top-apple .student-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 20px; /* 9→6px（2026-09-17・最小限の高さに） */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}
body.top-apple .student-strip .hsp-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
body.top-apple .student-strip .hsp-gauge-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
body.top-apple .student-strip .hsp-gauge-count {
  font-size: 12px;
  color: var(--ink-2);
}
body.top-apple .student-strip .hsp-gauge-count strong {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  margin-right: 1px;
  font-variant-numeric: tabular-nums;
}
body.top-apple .student-strip .hsp-max {
  font-weight: 700;
}
body.top-apple .student-strip .hsp-left {
  margin-left: 6px;
  font-weight: 800;
  color: var(--ink);
  font-size: 12px;
}
body.top-apple .student-strip .hsp-left.is-full {
  color: var(--ink-2);
  font-weight: 700;
}
/* 4枠の会社タイル。埋まった枠＝会社の頭文字、空き枠＝破線＋うすい「＋」。
   破線＝「これから」は、パレードの?札・診断結果の鍵リングと同じ語彙 */
body.top-apple .student-strip .hsp-slots {
  display: flex;
  gap: 4px;
}
body.top-apple .student-strip .hsp-slot {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1.5px dashed #c3d3e4;
  background: #fbfdff;
  color: #a8bcd2;
  font-size: 12px;
  font-weight: 700;
}
body.top-apple .student-strip .hsp-slot:not(.is-filled)::before {
  content: "＋";
}
body.top-apple .student-strip .hsp-slot.is-filled {
  border: none;
  background: linear-gradient(150deg, #2a86e0, var(--accent));
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(25, 118, 210, 0.28);
}

/* ---- 下層ページ（診断・マイページ・企業一覧）共通の見出しヒーロー ---- */
body.top-apple .ap-page-hero {
  padding: clamp(52px, 7vw, 92px) 20px clamp(24px, 4vw, 44px);
  text-align: center;
  background:
    radial-gradient(900px 380px at 50% -120px, #eaf3ff 0%, rgba(255, 255, 255, 0) 70%),
    #fff;
}
body.top-apple .ap-page-hero h1 {
  font-size: clamp(21px, 5.4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 12px;
}
body.top-apple .ap-page-hero .ap-lead {
  margin: 0 auto;
}

/* ---- 企業一覧の絞り込み（キーワード / 職種 / 体験日数） ---- */
/* スマホ：下層ページの見出し帯は上下の余白を詰める（2026-09-15）。
   一覧ページで見出し〜検索窓の間が約90px空き、最初の画面に検索窓が入りにくかった。
   .ap-page-hero は診断・マイページ・ヘルプも共用（いずれも同じ理由で詰めてよい） */
@media (max-width: 600px) {
  body.top-apple .ap-page-hero {
    padding-top: 32px;
    padding-bottom: 16px;
  }
  body.top-apple .companies-page-count {
    margin-bottom: 10px;
  }
  /* 見出し帯の直後のセクション（ヘルプの「よくある質問」など）も上を詰める */
  body.top-apple .ap-page-hero + .ap-section {
    padding-top: 28px;
  }
}
body.top-apple .companies-filter-section {
  padding: 4px 20px 0;
}
body.top-apple .cfilter {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* キーワード入力（検索アイコン付き） */
body.top-apple .cfilter-search {
  position: relative;
  display: flex;
  align-items: center;
}
body.top-apple .cfilter-search-icon {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  color: #8aa0b8;
  pointer-events: none;
}
body.top-apple .cfilter-search input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  font-size: 16px; /* 16px未満だとiOSで入力時にズームされる */
  font-family: inherit;
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(25, 118, 210, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.top-apple .cfilter-search input::placeholder {
  color: #9aabbd;
}
body.top-apple .cfilter-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.14);
}
body.top-apple .cfilter-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/* 入力があるときだけ出る。**入力欄(56px)の中に収まる範囲で44px**にする。
   33pxしかなく、隣の入力欄を触ってしまいやすかった。
   入力中しか出ないので、監査（畳まれたUIを開いて測る）では見つからない。
   状態で出入りするものは、操作を通すテスト側で見ること */
body.top-apple .cfilter-clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-light);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
body.top-apple .cfilter-clear:hover {
  background: rgba(0, 0, 0, 0.09);
}

/* 職種・体験日数のグループ
   ------------------------------------------------------------
   【2026-08-07：2列のグリッドにした】
   もとは1行ずつの flex で、ラベルに `min-width: 4.5em` を付けていた。
   ところが「試せる日数」は5文字あって 4.5em に収まらず、**その行だけ
   チップの開始位置が6px右にずれていた**（他は281px、この行だけ287px）。
   さらに 768px 付近では「体験内容」のチップが1行に収まらず、
   **その行だけラベルが上・チップが下に折り返して**、他の3行と形が変わっていた。

   ラベル列を `max-content` にして、**いちばん長いラベルに全行を合わせる**。
   文言を変えても、列幅が自動で追従するので調整し直さなくてよい。
   `.cfilter-group` を `display: contents` にして、ラベルとチップを
   グリッドの直接の子にしている（グループの箱があると列がそろわない）。
   ------------------------------------------------------------
   `display: contents` でも、companies-page.js が空のグループを
   `style.display = "none"` で隠す動きはそのまま効く（インラインが勝つ）。 */
body.top-apple .cfilter-groups {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
body.top-apple .cfilter-group {
  display: contents;
}
body.top-apple .cfilter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  /* チップの高さ(44px)の中で、1つ目のチップの文字と高さをそろえる */
  line-height: 44px;
}
body.top-apple .cfilter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.top-apple .cfilter-chip {
  /* 指で押すものなので44px（Apple HIG）。以前は38pxで、隣のチップとの
     間隔も8pxしかなく、狭い画面では押し間違えやすかった */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body.top-apple .cfilter-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
body.top-apple .cfilter-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 「◯件が該当しました」 */
body.top-apple .cfilter-result {
  max-width: 1100px;
  margin: 22px auto 2px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
}
body.top-apple .cfilter-result:empty {
  display: none;
}

/* 狭い画面では、ラベルを横に置くとチップの幅が足りない。
   ラベルを上、チップを下の縦積みに戻す（1列のグリッドにするだけで、
   `display: contents` のままラベル→チップの順に流れる） */
/* 狭い端末では、検索欄の左右の余白（48px+18px）が入力欄の2割を占めていて、
   文字を置ける幅がそのぶん狭くなる。アイコンごと少しだけ内側に寄せる */
@media (max-width: 400px) {
  body.top-apple .cfilter-search-icon { left: 14px; }
  body.top-apple .cfilter-search input { padding-left: 42px; padding-right: 14px; }
}

@media (max-width: 560px) {
  body.top-apple .cfilter-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  body.top-apple .cfilter-label {
    line-height: 1.6;
    /* グループ同士の切れ目を作る。1列だと、上のグループのチップと
       次のグループのラベルが同じ間隔で並んで境目が分からなくなる */
    margin-top: 10px;
  }
  body.top-apple .cfilter-group:first-child .cfilter-label {
    margin-top: 0;
  }
}

/* 企業一覧ページのリスト部 */
body.top-apple .companies-list-section {
  padding: 10px 20px 90px;
}
/* 【広い画面では一覧の幅も広げる（2026-08-31 オーナー指摘）】
   説明ページ用の 1040px に縛ると、1600px級のモニタで左右に280pxずつ
   何も無い帯ができ、カードは3列止まりだった。一覧は「読む」ページではなく
   「見比べる」ページなので、画面が広いぶんだけ列を増やす
   （グリッドは auto-fit なので、幅を許すだけで4列以上に増える）。
   上限を設けるのは、超横長モニタで1行が伸びすぎて視線が迷子になるのを防ぐため */
@media (min-width: 1200px) {
  body.top-apple .companies-list-section .ap-container {
    max-width: 1560px;
  }
}

/* ---- 数字バンド（スペック風） ---- */
body.top-apple .ap-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: center;
}
body.top-apple .ap-stat-value {
  font-size: clamp(34px, 5.6vw, 60px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent); /* 青→紫のグラデーションをやめた（2026-09-15） */
}
body.top-apple .ap-stat-label {
  margin-top: 8px;
  font-size: clamp(12px, 3.59vw, 14px);
  font-weight: 700;
  color: var(--ink-2);
}

/* ---- 3ステップ ---- */
body.top-apple .ap-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 54px;
  text-align: left;
}
body.top-apple .ap-step {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
body.top-apple .ap-step:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 0 16px 40px rgba(29, 42, 68, 0.12);
}
body.top-apple .ap-step:nth-child(2):hover {
  transform: translateY(-6px) rotate(0.5deg);
}
body.top-apple .ap-section-alt .ap-step {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
body.top-apple .ap-step-num {
  font-size: clamp(12px, 3.33vw, 13px);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
}
body.top-apple .ap-step img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 24px;
  margin: 18px 0;
}
body.top-apple .ap-step h3 {
  font-size: clamp(16.0px, 5.13vw, 20px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 0 10px;
}
body.top-apple .ap-step p {
  font-size: clamp(12px, 3.59vw, 14px);
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0;
}

/* ---- 悩み → 解決 ---- */
body.top-apple .ap-worry {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px) 0;
}
body.top-apple .ap-worry + .ap-worry {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
body.top-apple .ap-worry-reverse .ap-worry-text {
  order: 2;
}
/* 悩みの一言は吹き出し風（しっぽ付き・少し傾き）にしてユーモアを出す */
body.top-apple .ap-worry-quote {
  position: relative;
  display: inline-block;
  font-size: clamp(12.0px, 3.85vw, 15px);
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: 18px;
  padding: 10px 20px;
  margin: 0 0 22px;
  transform: rotate(-1.2deg);
}
body.top-apple .ap-worry-quote::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-radius: 3px;
  transform: rotate(45deg);
  z-index: -1;
}
body.top-apple .ap-section-alt .ap-worry-quote {
  background: #fff;
}
body.top-apple .ap-worry h3 {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 12px;
}
body.top-apple .ap-worry h3 em {
  font-style: normal;
  color: var(--accent);
}
body.top-apple .ap-worry p {
  font-size: clamp(12.0px, 3.85vw, 15px);
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
}
/* worry*.png の背景色は #f5f9ff（旧サイトの地色）。白地に置くと水色の矩形が浮くため、
   同じ色のタイルとして余白ごと囲い、画像とタイルの境目を完全に消して「意図した色付きタイル」に見せる */
body.top-apple .ap-worry-img img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 22px;
  box-sizing: border-box;
  background: #f5f9ff;
  border-radius: var(--radius-lg);
}

/* ---- 診断プロモ（ダークバンド） ---- */
body.top-apple .ap-diag {
  background: linear-gradient(160deg, #0b1220 0%, #101b33 55%, #16213f 100%);
  color: #fff;
  border-radius: 0;
  position: relative; /* 上端フェード(::before)の基準 */
}
/* 白（STEP3）→黒（診断）を、境目を感じさせないよう上端で溶け込ませる。
   帯は上=ページ背景の白、下=診断の最上部色 #0b1220 への縦グラデ。
   帯の高さは .ap-section の上パディング（最小72px）より必ず低く抑えているので、
   見出し・キャッチ等の本文は常に「溶けきった暗部」に乗り、可読性が保たれる。 */
/* 【2026-09-16 削除】白→紺の直線グラデーションで境目をにじませていたが、
   白と紺を直線で混ぜると中間が灰色になり、もやが掛かったように見えていた。
   診断は「別の場所」なので、境目はきっぱり切るほうが締まる */
body.top-apple .ap-diag::before {
  content: none;
}
/* 本文・パレードはフェード帯より前面に置く */
body.top-apple .ap-diag > .ap-container {
  position: relative;
  z-index: 1;
}
body.top-apple .ap-diag .ap-eyebrow {
  color: #8ab8ff;
}
body.top-apple .ap-diag .ap-h2 {
  /* 【2026-09-17】2026-09-16 まで、青のグラデーションが文字の中を10秒周期で
     永久に流れていた。読んでいる最中に文字の濃さが変わり、いちばん薄い位置が
     来ると濃紺の上で輪郭がぼやける。文字の中を色が流れるのは既製テンプレートの
     いちばんよくある飾りでもあるのでやめた（トップの「ES・面接なし。」と同じ理由）。
     白に近い1色が濃紺との対比がいちばん強く、下のカラフルな8つの札も引き立つ。 */
  color: #eef4ff;
}
body.top-apple .ap-diag .ap-lead {
  color: rgba(255, 255, 255, 0.86); /* 0.72→0.86（暗い背景の本文が薄かった・2026-09-15） */
  margin-bottom: 30px;
}
/* ---- 8タイプのパレード（2026-08-27 作り直し） ----
   3Dリング（16枚・22.5°）は、端のカードの見切れとキャラの大きさの不揃いが
   構造的に直せず廃止した。診断の結果ヒーローと同じ言語（帯色ベタ＋右下がりの
   斜め＋白の3文字＋純白の下地に立つキャラ）の縦型の札を、横にゆっくり流す。
   キャラ画像は sm/ でトリム＋高さ300pxに統一してあるので、height だけ
   指定すれば全員が同じ背になる（width は札ごとの実寸をHTML属性に持つ）。
   ループ：同じセットを2つ並べ、それぞれが translateX(-100%) を等速で繰り返す。
   セット幅（札9枚 ≈ 1500px超）が画面幅より狭いと右端に隙間が出るので、
   札を減らすときはセット内で複製して幅を保つこと。 */
body.top-apple .ap-diag {
  overflow: hidden;
}
body.top-apple .ap-diag-head {
  text-align: center;
}
body.top-apple .ap-diag-head .ap-lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
body.top-apple .ap-parade {
  position: relative; /* 上端フェード帯(::before)より前面へ */
  z-index: 1;
  overflow: hidden;
  margin-top: clamp(30px, 5vw, 46px);
  padding: 12px 0 20px; /* hoverの浮き上がりと影の逃げ場 */
  /* 左右の端は暗部へ溶かす（流れの切り口を見せない） */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.top-apple .ap-parade-track {
  display: flex;
  width: max-content;
}
body.top-apple .ap-parade-set {
  display: flex;
  gap: clamp(12px, 1.8vw, 18px);
  padding-right: clamp(12px, 1.8vw, 18px); /* セット間もカード間と同じ間隔に */
  animation: ap-parade-scroll 46s linear infinite;
}
/* ホバーで止めるのは廃止（2026-08-27 オーナー指示。流れ続けるほうを取る）。
   キーボードでカードにフォーカスした間だけは止める（狙って押すための配慮で、
   カーソル操作には影響しない） */
body.top-apple .ap-parade:focus-within .ap-parade-set {
  animation-play-state: paused;
}
@keyframes ap-parade-scroll {
  to { transform: translateX(-100%); }
}
body.top-apple .ap-type-card {
  position: relative;
  flex: none;
  width: clamp(126px, 32vw, 158px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: var(--band);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: transform 0.25s ease;
}
body.top-apple .ap-type-card:hover {
  transform: translateY(-6px);
}
/* 右下がりの斜めの白。キャラはこの境界をまたいで白地に立つ（ヒーローと同じ） */
body.top-apple .ap-type-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 80%, 100% 92%, 100% 100%, 0 100%);
}
body.top-apple .ap-type-code {
  position: absolute;
  top: 9%;
  left: 9%;
  color: #fff;
  font-weight: 900;
  font-size: clamp(19px, 4.6vw, 23px);
  letter-spacing: 0.06em;
  line-height: 1;
}
body.top-apple .ap-type-name {
  position: absolute;
  top: 22%;
  left: 7%;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1;
  /* 帯色がオレンジ系のタイプ（パイオニア等）は白文字が3.9:1しか無かった。
     薄い黒の下敷きで、どの帯色でも4.5:1以上を確保する（監査 contrast 対応） */
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  padding: 3px 8px;
}
body.top-apple .ap-type-card img {
  position: absolute;
  left: 50%;
  bottom: 4%;
  height: 55%;
  width: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.16));
}
/* 「あなたは どのタイプ？」の札。診断への誘い。
   ? は診断はじめる画面の見出し（.dg-title em）と同じグラデーション */
body.top-apple .ap-type-card-you {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 255, 255, 0.38);
  box-shadow: none;
}
body.top-apple .ap-type-card-you::before { content: none; }
body.top-apple .ap-type-q {
  font-size: clamp(44px, 10vw, 54px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(96deg, #7dd3fc, #c4b5fd 55%, #f0abfc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.top-apple .ap-type-you {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}
body.top-apple .ap-diag-cta {
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  /* 流さない。横スクロールで自分の速さで見られるようにする */
  body.top-apple .ap-parade {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.top-apple .ap-parade-set { animation: none; }
  body.top-apple .ap-parade-set[aria-hidden="true"] { display: none; }
}
/* 暗い帯の上のボタン。【2026-09-16】白のベタ塗りだと帯の中でいちばん強い要素に
   なるが、診断は「どの会社か迷ったとき」の二番手。枠線にして重みを合わせる */
body.top-apple .ap-btn-light {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
body.top-apple .ap-btn-light:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #fff;
}

/* ---- 企業一覧 ---- */
body.top-apple .company-card {
  border-radius: 22px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
body.top-apple .company-card:hover {
  box-shadow: 0 14px 36px rgba(29, 42, 68, 0.12);
}
body.top-apple .companies-more {
  margin-top: 44px;
}
/* 一覧の続きへ送るボタン。塗りにはしない（すぐ下のFAQの後に
   同じ青い塗りボタンがあり、二つ並ぶと どちらが本命か分からなくなる）。
   ただし以前のように文字だけにもしない。カードの中の「くわしく見る →」と
   同じ青字で、区別がつかないうえ、タップできる高さが33pxしかなかった。
   枠線ボタンにして、塗りより弱く・文字より強い中間の強さにする */
body.top-apple .companies-more .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  box-shadow: none;
  font-size: clamp(13.6px, 4.36vw, 17px);
}
body.top-apple .companies-more .btn-primary:hover {
  transform: none;
  background: #eaf3ff;
}

/* （「得られること」5項目のチェックリスト .ap-benefits / .ap-benefit は
   2026-09-13 オーナー指示でセクションごと削除。指定もここから消した） */

/* ---- FAQ ---- */
body.top-apple .ap-faq {
  max-width: 720px;
  margin: 44px auto 0;
  text-align: left;
}
body.top-apple .ap-faq details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body.top-apple .ap-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  font-size: clamp(12.8px, 4.10vw, 16px);
  font-weight: 700;
}
body.top-apple .ap-faq summary::-webkit-details-marker {
  display: none;
}
body.top-apple .ap-faq summary::after {
  content: "+";
  font-size: clamp(17.6px, 5.64vw, 22px);
  font-weight: 400;
  color: var(--ink-2);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
body.top-apple .ap-faq details[open] summary::after {
  transform: rotate(45deg);
}
body.top-apple .ap-faq details p {
  margin: 0;
  padding: 0 4px 22px;
  font-size: clamp(12px, 3.72vw, 14.5px);
  line-height: 1.9;
  color: var(--ink-2);
}

/* ---- 最後のCTA ---- */
body.top-apple .ap-final {
  text-align: center;
}
body.top-apple .ap-final .ap-h2 {
  font-size: clamp(34px, 6.4vw, 64px);
}

/* ---- セクション間の間隔を詰める ----
   .ap-section は上下パディング clamp(72px,10vw,130px) を持つため、
   隣り合うと上下合わせて広く空き、間延びして見える。
   「会社一覧の下・FAQの上下・最後のCTAの上」だけを詰め、
   最後のCTAの下（フッター手前）は元のまま残す。
   【2026-09-13】会社一覧(#companies)はHERO直後（②）に移動した。末尾は 診断→FAQ→最後のCTA。 */
body.top-apple #companies {
  padding-top: clamp(20px, 3vw, 40px); /* HERO直後。最初の画面に見出しとカードが入るよう詰める */
  padding-bottom: clamp(44px, 6vw, 84px);
}
body.top-apple .ap-faq-section {
  padding-top: clamp(44px, 6vw, 84px);
  padding-bottom: clamp(44px, 6vw, 84px);
}
body.top-apple .ap-final { padding-top: clamp(44px, 6vw, 84px); }

/* ---- フローティングCTA：すりガラスの小さなピルに ---- */
body.top-apple .fab-cta {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  color: var(--accent);
  font-size: clamp(12px, 3.33vw, 13px);
  font-weight: 700;
  padding: 12px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---- フッター ---- */
body.top-apple .site-footer {
  background: var(--surface);
  color: var(--ink-2);
  font-size: clamp(12px, 3.21vw, 12.5px);
  padding: 34px 20px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 860px) {
  body.top-apple .ap-steps {
    grid-template-columns: 1fr;
  }
  body.top-apple .ap-worry {
    grid-template-columns: 1fr;
  }
  body.top-apple .ap-worry-reverse .ap-worry-text {
    order: 0;
  }
  body.top-apple .ap-worry-img {
    order: 1;
  }
  body.top-apple .ap-worry-img img {
    max-width: 300px;
  }
}

/* ============================================================
   スマホ専用チューニング（〜600px）
   - ヒーローは中央寄せをやめて左寄せのエディトリアル風に。
     「ESなし。」を画面幅いっぱいの特大サイズで見せる
   - 数字バンドは罫線で区切ったスペック表風の1枚タイルに
   ============================================================ */
@media (max-width: 600px) {
  body.top-apple .ap-nav {
    gap: 14px;
  }
  body.top-apple .ap-nav-link-hide-sp {
    display: none;
  }

  /* --- ヒーロー（スマホ：キャッチ → 写真の帯） ---
     【2026-09-17 オーナー指示】それまでは画像パネルを出さず、キャッチだけにしていた（募集を早く見せるため）。
     写真が入ったので「スマホの縦画面でもちょうどいい感じで」出す。
     ・文字は写真に重ねない（読みにくくなり、写真も隠れる）。キャッチの下に端から端までの帯
     ・横2:縦1。4人の顔が全員入り、390px 幅で約195px。募集の列が下がりすぎない高さ
     ・PC の「斜めの切り口＋細い青の帯」をそのまま使い、帯の上辺を同じ向きに斜めに切る */
  body.top-apple .ap-hero {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 22px 16px 0;
  }
  body.top-apple .ap-hero-copy {
    max-width: none;
    padding-right: 0;
  }
  body.top-apple .ap-hero-art {
    position: relative;
    inset: auto;
    width: auto;
    margin: 6px -16px 0;
    aspect-ratio: 2 / 1;
    clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
  }
  body.top-apple .ap-hero-art-inner {
    clip-path: polygon(0 calc(9% + 5px), 100% 5px, 100% 100%, 0 100%);
  }
  /* 帯が横長なので上下が切られる。立っている人の顔（元画像の上から15〜30%）が
     斜めの切り口にかからない位置まで下げる（2026-09-17 実測で 38% だと目元が隠れた） */
  body.top-apple .ap-hero-art.is-photo img {
    object-position: 50% 22%;
  }
  /* 「ES・面接なし。」は1行に収まる範囲で、以前（最大64px）より一回り小さく */
  body.top-apple .ap-hero h1 {
    font-size: min(calc(11vw - 2px), 40px);
    line-height: 1.06;
    margin-bottom: 10px;
  }
  body.top-apple .ap-hero h1 .ap-h1-flow {
    font-size: clamp(14px, 4.4vw, 18px);
    margin-top: 8px;
  }
  /* 条件バー：3欄を1行に詰め、ボタンは下に幅いっぱい */
  body.top-apple .ap-search {
    padding: 12px 12px;
  }
  body.top-apple .ap-search-bar {
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 4px;
  }
  body.top-apple .ap-search-field {
    flex: 1 1 30%;
    gap: 6px;
    padding: 6px 8px;
  }
  body.top-apple .ap-search-icon {
    display: none;
  }
  body.top-apple .ap-search-field select {
    font-size: 13.5px;
    padding-right: 18px;
    background-size: 14px 14px;
    background-position: right 0 center;
  }
  body.top-apple .ap-search-value-text {
    font-size: 13.5px;
  }
  body.top-apple .ap-search-value::after {
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
  }
  /* パネルは欄ではなくバー全体を基準に、幅いっぱいで下に出す
     （欄は狭いので、欄の下だと画面からはみ出す） */
  body.top-apple .ap-search-bar.is-enhanced {
    position: relative;
  }
  body.top-apple .ap-search-bar.is-enhanced .ap-search-field {
    position: static;
  }
  body.top-apple .ap-search-pop {
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    width: auto;
    max-width: none;
    padding: 10px;
    gap: 6px;
  }
  body.top-apple .ap-search-pop::before {
    display: none;
  }
  body.top-apple .ap-search-opt {
    min-height: 38px;
    padding: 5px 13px;
    font-size: 13px;
  }
  body.top-apple .ap-search-btn {
    flex: 1 1 100%;
    margin: 4px 0 0;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 999px; /* ボタンの角丸にそろえる（2026-09-16） */
    width: 100%;
    justify-content: center;
  }
  /* ログイン済みの帯（スマホ）：1行に収める（2026-09-17 オーナー指示「縦に長くて邪魔・最低限のサイズに」）。
     枠と文字を一段小さくし、「上限に達しています」は「上限」に縮めて折り返さない */
  body.top-apple .student-strip-inner {
    padding: 5px 12px;
  }
  body.top-apple .student-strip .hsp-gauge {
    gap: 6px;
  }
  body.top-apple .student-strip .hsp-gauge-label {
    font-size: 12px;
  }
  body.top-apple .student-strip .hsp-slots {
    gap: 3px;
  }
  body.top-apple .student-strip .hsp-slot {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
  }
  body.top-apple .student-strip .hsp-slot.is-filled {
    font-size: 11.5px;
  }
  body.top-apple .student-strip .hsp-gauge-count strong {
    font-size: 14px;
  }
  body.top-apple .ap-btn {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  /* --- 数字バンド：罫線区切りのスペック表タイル --- */
  body.top-apple .ap-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
  }
  body.top-apple .ap-stats > div {
    padding: 22px 10px;
  }
  /* タイルは overflow:hidden のため、セルの reveal アニメ（translateYでせり上がる）が
     縁で切り取られて欠けて見える。スマホではセルのアニメを無効化して常時表示にする */
  body.top-apple .ap-stats > .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.top-apple .ap-stats > div:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
  body.top-apple .ap-stats > div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  body.top-apple .ap-stat-value {
    font-size: clamp(25.6px, 8.21vw, 32px);
  }
  body.top-apple .ap-stat-label {
    font-size: clamp(12px, 2.95vw, 13px);
    margin-top: 5px;
  }

  /* セクションの縦リズムを少し詰める */
  body.top-apple .ap-section {
    padding: 64px 20px;
  }
  /* 会社一覧→STEP図（STEP見出しの上）を詰める */
  body.top-apple .steps-zone > .ap-section {
    padding-top: 14px;
  }
}

/* =========================================================================
   3STEPの図版バリアント／説明が出るカード（flipcard）
   ここはファイル末尾に置いている。上の @media ブロックより後に書くことで、
   スマホ用の既存指定に打ち消されないようにするため。
   ========================================================================= */

/* ---- 3ステップ（図版版） --------------------------------------------
   STEP番号・見出しは画像に焼き込まれているため、HTML側には説明文しか無い。
   既存の .ap-step img は 96px のサムネ前提なので、ここで図版用に上書きする */
body.top-apple .ap-steps-figure {
  text-align: center;
  align-items: start;
}
body.top-apple .ap-steps-figure .ap-step {
  padding: 24px 22px 26px;
}
body.top-apple .ap-steps-figure .ap-step img {
  width: 100%;
  max-width: 190px;
  height: auto;
  object-fit: contain;
  border-radius: 0;      /* 画像側で角を透過済みなので切り抜かない */
  margin: 0 auto 14px;
}

/* ---- 説明が出るカード（PC=ホバー／スマホ=タップ） --------------------
   見出しは画像に焼き込まれているので、パネル側には出さない（二重になるため）*/
body.top-apple .flipcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
  text-align: left;
}
body.top-apple .flipcard {
  /* button の既定スタイルを打ち消す */
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 25, 45, 0.08);
}
body.top-apple .flipcard > img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.28, 1);
}
/* 「押すと説明が出る」ことを示す目印。開くと×に回転する */
body.top-apple .flipcard-hint {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font-size: 17px;
  font-weight: 900;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.28, 1);
}
body.top-apple .flipcard-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.28, 1);
}
body.top-apple .flipcard-text {
  display: block;
  font-size: 13px; /* 12〜13px の可変→13px 固定（スマホで12.5px だった。2026-09-15 可読性） */
  line-height: 1.6;
  color: var(--text-light);
  font-weight: 500;
}
/* PCはホバーで開く。hover:hover でタッチ端末の「ホバーが貼り付く」現象を防ぐ */
@media (hover: hover) {
  body.top-apple .flipcard:hover .flipcard-panel { transform: translateY(0); }
  body.top-apple .flipcard:hover .flipcard-hint { transform: rotate(135deg); }
  /* 画像をわずかに上へ逃がし、パネルがイラストを踏む量を減らす */
  body.top-apple .flipcard:hover > img { transform: translateY(-5%); }
}
/* スマホはタップ（JSで is-open を付け外し）。キーボード操作にも対応 */
body.top-apple .flipcard.is-open .flipcard-panel,
body.top-apple .flipcard:focus-visible .flipcard-panel { transform: translateY(0); }
body.top-apple .flipcard.is-open .flipcard-hint,
body.top-apple .flipcard:focus-visible .flipcard-hint { transform: rotate(135deg); }
body.top-apple .flipcard.is-open > img,
body.top-apple .flipcard:focus-visible > img { transform: translateY(-5%); }
body.top-apple .flipcard:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body.top-apple .flipcard-panel,
  body.top-apple .flipcard-hint,
  body.top-apple .flipcard > img { transition: none; }
}

@media (max-width: 600px) {
  body.top-apple .flipcards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
  }
  body.top-apple .flipcard-panel { padding: 11px 12px 13px; }
  /* 「＋」は右下へ（2026-09-15）。右上だと画像に焼き込まれた見出し（「ケーススタディ」など）と重なった */
  body.top-apple .flipcard-hint {
    width: 22px; height: 22px; line-height: 22px; font-size: 14px;
    top: auto; bottom: 8px; right: 8px;
  }
  /* 図版ステップはスマホでは縦積み。図が小さくなりすぎないよう幅を確保する */
  body.top-apple .ap-steps-figure { grid-template-columns: 1fr; }
  body.top-apple .ap-steps-figure .ap-step img { max-width: 168px; }
}

/* ---- 【2026-08-07】スマホの「4列のまま」をやめ、2列に戻した ----------
   もともとは4枚を1行に並べていたが、390px幅ではカード1枚が約83pxしかなく、
   説明文が **30px はみ出して切れていた**（320pxでは 6.4px まで縮めても収まらず）。
   カードを縮めて文字も縮める、を繰り返しても読めるようにはならない。

   実測（開いた状態）：
     4列 390px … カード 83x106 / 本文 12px → 30px はみ出し
     2列 390px … カード159x202 / 本文12.5px → 43px の余裕で収まる

   .flipcards の 600px 以下は既に2列なので、**ここで打ち消さない**のが正解。
   ユーザー確認済み（見た目は1行4個 → 2行2個に変わる）。 */

/* ---- スマホ：タップしたらパネルでカード全面を覆う ------------------
   画像を完全に隠したいので、パネルは半透明ではなく不透明の白にし、
   top:0 でカードいっぱいに広げる（閉じている間は translateY(100%) で下に退避）。
   画像側の見出しが見えなくなるぶん、見出しをHTMLテキストとして出す。
   PCではパネルが下部だけを覆い画像内の見出しが見えているので、この見出しは出さない
   （出すと画像内の文字と二重になる）。 */
body.top-apple .flipcard-title { display: none; }

@media (max-width: 600px) {
  body.top-apple .flipcard-panel {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.top-apple .flipcard-title {
    display: block;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 5px;
  }
  /* 全面を覆うので、画像を少し持ち上げる演出はスマホでは不要 */
  body.top-apple .flipcard.is-open > img { transform: none; }

  /* 【2026-08-07 削除】「4列版はカードが約80pxしかないため、さらに詰める」
     という指定（見出し11px・本文9px）は、スマホを2列に戻したので不要。
     残すと2列でも9pxのままになり、直した意味が無くなる。 */
}

/* 【2026-08-07 削除】4列を維持するために文字を 9px・6.4px まで縮めていた指定は、
   2列に戻したことで不要になった（縮めても収まらず、読めもしなかった）。
   .flipcards-4up は PC で4列、スマホで2列。追加の上書きは要らない。 */

/* ---- 3STEPの目次（2026-09-17 から PC・スマホ共通） ----
   それまで PC は画像1枚のバンド（.ap-steps-single / img/cards/step-*.webp）、スマホはこの目次だった。
   画像の中の STEP1 が旧フロー「気になる体験を応募」のまま食い違っていたので、オーナー指示で PC もこちらに統一。
   同じ形のカード3枚にはしない（既製テンプレに見える）。枠は1つで、中を細い線で区切る。
   スマホは縦に3行、PC（601px〜）は横に3つ。
   ※ js/step-rail.js は「見えている目次」の位置で固定バーの出現を判定している。隠すと判定が壊れる */
body.top-apple .ap-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 360px;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  overflow: hidden;
}
body.top-apple .ap-steps-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
body.top-apple .ap-steps-list li + li {
  border-top: 1px solid #eef2f7;
}
body.top-apple .ap-steps-list-n {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: #2170e7; /* 旧STEP画像の青と同じ */
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transform: skewX(-9deg); /* サイトの「斜めの札」 */
}
body.top-apple .ap-steps-list-t {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}
@media (min-width: 601px) {
  body.top-apple .ap-steps-list {
    flex-direction: row;
    max-width: 880px;
    margin-top: clamp(20px, 3vw, 32px);
  }
  body.top-apple .ap-steps-list li {
    flex: 1 1 0;
    min-width: 0;
    padding: 18px 20px;
  }
  body.top-apple .ap-steps-list li + li {
    border-top: none;
    border-left: 1px solid #eef2f7;
  }
  body.top-apple .ap-steps-list-t {
    font-size: clamp(15px, 1.5vw, 17px);
  }
}

/* 「新しい自分への３STEP」の見出し。
   「新しい自分」だけをSTEP画像のカードと同じ青にする
   （色は img/cards/steps-band.webp の図形から実測した #2170e7）*/
body.top-apple .ap-step-accent {
  color: #2170e7;
}

/* （極小幅の ✓印調整は、5項目の削除にともない 2026-09-13 に削除） */
/* =========================================================================
   体験 → 長期インターン への導線（分岐図）
   「体験が終わったら」から線が下りて2つに分かれ、
   「合わなかったら＝断って終わり」「気に入ったら＝そのままインターンへ」を並べて見せる。
   画像を使わずCSSだけで描いているので、文字サイズが変わっても崩れない。
   ========================================================================= */
body.top-apple .ap-bridge {
  padding: 0 20px clamp(24px, 3vw, 40px);
  text-align: center;
}
body.top-apple .ap-bridge-head {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: clamp(13px, 1.3vw, 15px); /* 下限 12→13px（2026-09-15） */
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(25, 118, 210, 0.28);
}
/* 中央から下りる線 → 横に広がって両側へ分岐する「⊓」の形。
   ::before が縦の幹、::after が左右に分かれる枝（上・左・右の3辺だけ引く） */
body.top-apple .ap-bridge-fork {
  position: relative;
  height: 58px;
  max-width: 640px;
  margin: 0 auto;
}
body.top-apple .ap-bridge-fork::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 24px;
  margin-left: -1px;
  background: rgba(25, 118, 210, 0.45);
}
body.top-apple .ap-bridge-fork::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 24px;
  height: 34px;
  border: 2px solid rgba(25, 118, 210, 0.45);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
body.top-apple .ap-bridge-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
body.top-apple .ap-bridge-path {
  padding: 20px 22px;
  border-radius: 18px; /* カードの角丸にそろえる（2026-09-16） */
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #fff;
}
/* 「気に入ったら」側が本命なので、色と影で主役だと分かるようにする */
body.top-apple .ap-bridge-path-main {
  border-color: rgba(25, 118, 210, 0.35);
  background: #f2f8ff;
  box-shadow: 0 6px 18px rgba(15, 25, 45, 0.08);
}
body.top-apple .ap-bridge-label {
  display: inline-block;
  margin-bottom: 7px;
  font-size: 13px;   /* 11→12→13px（2026-09-15 スマホの可読性） */
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
body.top-apple .ap-bridge-path-main .ap-bridge-label {
  color: var(--accent);
}
body.top-apple .ap-bridge-path p {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 16px); /* 下限 12.5→13.5→15px（分岐図の本文・2026-09-17） */
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}
body.top-apple .ap-bridge-path:not(.ap-bridge-path-main) p {
  color: var(--ink-2);
  font-weight: 500;
}
body.top-apple .ap-bridge-path-main strong {
  color: var(--accent);
  font-weight: 900;
}
/* 分岐図の直後のセクションは、図とくっつきすぎないていどに上を詰める */
body.top-apple .ap-section-tight {
  padding-top: clamp(28px, 3.5vw, 52px);
}

@media (max-width: 600px) {
  /* スマホは2枚並べると窮屈なので縦積みにし、分岐（⊓）ではなく1本の矢印にする */
  body.top-apple .ap-bridge-fork {
    height: 30px;
  }
  body.top-apple .ap-bridge-fork::before {
    height: 30px;
  }
  body.top-apple .ap-bridge-fork::after {
    display: none;
  }
  body.top-apple .ap-bridge-paths {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.top-apple .ap-bridge-path {
    padding: 15px 16px;
  }
}

/* =========================================================================
   3STEP スクロール連動フロー（旧・3STEP画像バンドの置き換え）
   STEP1（数字バンド）→ STEP2（体験カード＋分岐図）→ STEP3（メリット4枚）を
   1本の流れにまとめ、左（スマホは上部）のレールがスクロールに連動して光る。
   .ap-bridge-head / -paths / -path / -label は既存の分岐図CSSを再利用する。
   ========================================================================= */

/* 本文はページ幅をそのまま使う。進行バーはグリッドで場所を取らせず
   position:fixed で画面の左端に浮かせる＝本文の幅は通常のセクションと同じ */
body.top-apple .sc-wrap {
  max-width: 1040px; margin: 0 auto; padding: 0 20px;
}
/* 進行バーは「丸だけの細い列」。ラベルは現在地（とホバー中）だけ横に開く。
   常時ラベルを出すと幅を取り、1280px級のノートPCで本文と重なってしまうため */
body.top-apple .sc-rail {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 15;
  /* 初期は隠しておき、3STEPの領域(.steps-zone)が画面に入ったときだけ
     JS が .is-shown を付けて出現させる（ヒーロー・メリットの間は出さない）。
     PC(fixed)・スマホ(sticky)どちらの状態でも共通で効くよう、ここでフェードを定義する */
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
body.top-apple .sc-rail.is-shown { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  body.top-apple .sc-rail { transition: none; }
}
body.top-apple .sc-rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
/* 3つの丸をつなぐ縦線 */
body.top-apple .sc-rail ol::before {
  content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px;
  width: 2px; background: rgba(0,0,0,.12);
}
body.top-apple .sc-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 11px 0; cursor: pointer;
}
/* 押せる範囲を 44x44 まで広げる。押すとそのSTEPへスクロールするのに、
   丸は 36x36（スマホは 30x30）しかなく、**指で押すには足りていなかった。**
   丸そのものの大きさは変えていないので、見た目は変わらない。
   PCは縦並びなので余った幅は右に付き、スマホは中央そろえなので丸は動かない。

   **疑似要素で当たり判定だけ広げる手は使わない。**（診断の .diag-scale-btn は
   そうしているが、要素の矩形が変わらないため `audit.js` からは
   「36px のままの押せる要素」に見え、機械で守れなくなる。） */
body.top-apple .sc-item { min-width: 44px; min-height: 44px; }
/* 通常は数字だけの丸。現在地になると「STEP 1」を表示する横長の楕円に伸びる。
   幅だけをアニメーションさせたいので、border-radius は最初から 999px にしておく
   （丸のときは幅=高さなので円に見え、伸びるとそのまま角丸の楕円になる）*/
body.top-apple .sc-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  box-sizing: border-box;
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  background: #fff; border: 2px solid rgba(0,0,0,.14);
  color: #90a4ae; font-size: 14px; font-weight: 900;
  overflow: hidden; white-space: nowrap;
  transition: width .42s cubic-bezier(.22,.8,.28,1), gap .42s cubic-bezier(.22,.8,.28,1),
              background .3s, border-color .3s, color .3s, box-shadow .3s;
}
body.top-apple .sc-dot-n { line-height: 1; }
/* 「STEP」の文字は畳んでおき、現在地になったときだけ開く */
body.top-apple .sc-dot-word {
  max-width: 0; opacity: 0; overflow: hidden;
  font-size: 12px; letter-spacing: .06em; line-height: 1;
  transition: max-width .42s cubic-bezier(.22,.8,.28,1), opacity .3s ease;
}
/* 現在地：楕円に伸びて青くなる。
   切り替わった瞬間に一度だけふくらませて、変化に気づけるようにする。
   JSが is-active を付け外しするたび、このアニメーションが頭から再生される */
body.top-apple .sc-item.is-active .sc-dot {
  width: 96px; gap: 7px;
  background: #2170e7; border-color: #2170e7; color: #fff;
  box-shadow: 0 6px 16px rgba(33,112,231,.36);
  animation: scDotPop 0.5s cubic-bezier(0.22, 0.8, 0.28, 1);
}
@keyframes scDotPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.top-apple .sc-item.is-active .sc-dot { animation: none; }
  body.top-apple .sc-dot, body.top-apple .sc-dot-word { transition: none; }
}
/* 「STEP 1」の語順にするため、数字を右側へ回す */
body.top-apple .sc-item.is-active .sc-dot-n { order: 2; }
body.top-apple .sc-item.is-active .sc-dot-word { max-width: 52px; opacity: 1; }
/* 通過済み */
body.top-apple .sc-item.is-done .sc-dot { background: #cfe3ff; border-color: #cfe3ff; color: #2170e7; }

/* 各STEPを枠（カード）で囲んで区切りを分かりやすくする（PC・スマホ共通）。
   連結線でつながず、カードの枠と間隔で区切るデザイン。 */
body.top-apple .sc-panel {
  border: 1px solid rgba(33, 112, 231, 0.16);
  border-radius: clamp(18px, 1.8vw, 24px);
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 50, 90, 0.07);
  padding: clamp(26px, 3vw, 44px);
  margin-bottom: clamp(18px, 2.2vw, 30px);
  scroll-margin-top: 130px; /* ジャンプ時に見出しが固定ヘッダーの下へ潜らないように */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.top-apple .sc-panel h2 { margin-bottom: 12px; }
/* STEP1の見出しは、どの幅でも必ず1行で見せる（2行になると図とのリズムが崩れる）。
   .ap-h2 の下限 21px のままだと 320px の端末で13文字が入りきらず2行になるので、
   この見出しだけ下限を下げる。上限・傾きは .ap-h2 と同じなので広い画面は不変。 */
body.top-apple .sc-panel .ap-h2.s1-title {
  font-size: clamp(17.5px, 5.4vw, 54px);
}
/* 先頭カードは図(バンド)との間に少し余白、末尾カードは診断セクションとの間に余白 */
body.top-apple .sc-content > .sc-panel:first-child { margin-top: clamp(8px, 1.5vw, 18px); }
/* 【2026-09-16】ここは clamp(48px, 7vw, 84px) だった。この下マージンは .sc-content →
   .sc-wrap → .steps-zone と外へ抜けて（マージンの相殺）、次のセクションとの間に
   そのまま残る。次の「よくある質問」は自分で 64px の上余白を持っているので、
   合わせて 112px（PCは168px）空いて、そこだけ間延びしていた。次のセクションの余白に任せる */
body.top-apple .sc-content > .sc-panel:last-child { margin-bottom: 0; }
/* カードの枠で区切るので、STEP同士をつなぐ縦の連結線は隠す
   （STEP2内の分岐「体験が終わったら」の枝線 .sc-fork は残す） */
body.top-apple .sc-link { display: none; }
/* 現在のSTEP（いま読んでいるSTEP）のカード。
   【2026-09-17】以前は 2px の青いリング＋青いグローで箱ごと光らせていた。
   「いまここ」は ①レールの札 ②STEPの札が青く塗られる ③枠が青くなる の3つで既に分かる。
   4つ目として箱が光るのは意味ではなく飾りで、色の付いた光は既製テンプレートの定番でもある。
   枠の青（2px）と無彩色の控えめな影だけにした。弾む動きは「進んだ」合図なので残す。 */
body.top-apple .sc-panel.is-current {
  border-color: #2170e7;
  box-shadow: 0 0 0 1px #2170e7,
              0 10px 26px rgba(15, 25, 45, 0.10);
  animation: scPanelPop 0.5s cubic-bezier(0.22, 0.8, 0.28, 1);
}
@keyframes scPanelPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.top-apple .sc-panel { transition: none; }
  body.top-apple .sc-panel.is-current { animation: none; }
}

/* 各STEPの頭に置く見出しラベル。
   左のバーと同じタイミングで、現在地のものだけ膨らんで青くなる */
body.top-apple .sc-step-label {
  display: inline-flex; align-items: center; margin-bottom: 12px;
  padding: 6px 16px; border-radius: 999px;
  background: #eaf3ff; color: #1867df;
  font-size: clamp(12px, 1.2vw, 14px); font-weight: 900; letter-spacing: .08em;  /* 下限 11px→12px */
  white-space: nowrap;
  transition: background .3s, color .3s, box-shadow .3s;
}
/* STEPの内容は普段たたんでおき、現在地になったとき横へ開く。
   幅（max-width）を変化させることで、チップ全体が右へ伸びていくように見せる。
   区切りの縦線も一緒に開かせないと、閉じている間に1本だけ残ってしまう */
body.top-apple .sc-step-word {
  display: inline-block;
  max-width: 0; opacity: 0; overflow: hidden;
  margin-left: 0; padding-left: 0;
  border-left: 0 solid rgba(255,255,255,.5);
  font-weight: 700; letter-spacing: .02em;
  transition: max-width .5s cubic-bezier(0.22, 0.8, 0.28, 1),
              margin-left .5s cubic-bezier(0.22, 0.8, 0.28, 1),
              padding-left .5s cubic-bezier(0.22, 0.8, 0.28, 1),
              border-left-width .5s cubic-bezier(0.22, 0.8, 0.28, 1),
              opacity .32s ease;
}
body.top-apple .sc-panel.is-current .sc-step-label {
  background: #2170e7; color: #fff;
  box-shadow: 0 6px 16px rgba(33,112,231,.32);
  /* バーの丸と同じ長さ・同じイージングにして、二つが同時に弾むように見せる */
  animation: scDotPop 0.5s cubic-bezier(0.22, 0.8, 0.28, 1);
}
body.top-apple .sc-panel.is-current .sc-step-word {
  max-width: 340px; opacity: 1;
  margin-left: 11px; padding-left: 11px;
  border-left-width: 1px;
}
@media (prefers-reduced-motion: reduce) {
  body.top-apple .sc-panel.is-current .sc-step-label { animation: none; }
  body.top-apple .sc-step-label,
  body.top-apple .sc-step-word { transition: none; }
}

/* ---- STEP1の数字バンド ----
   方針：PCの「1行4列」をスマホでも崩さず、タイルごと縮めて対応する。
   そのため grid-template-columns は repeat(4,1fr) 固定で、
   @media で列数を変えたりはしない。代わりに余白・文字・アイコンを
   すべて clamp(最小, vw, 最大) にして、幅に比例して小さくなるようにしている。
   （.ap-stats は使わない。あちらは clamp(34px,5.6vw,60px) と大きく、
    4列のままスマホに入れると数字があふれるため） */
body.top-apple .s1-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, 1.1vw, 14px);
  margin: clamp(20px, 2.6vw, 32px) 0;
}
body.top-apple .s1-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(11px, 1.9vw, 20px) clamp(4px, .9vw, 12px) clamp(10px, 1.6vw, 17px);
  border-radius: clamp(12px, 1.5vw, 20px);
  background: linear-gradient(168deg, #fff 0%, #f4f8ff 100%);
  border: 1px solid rgba(33, 112, 231, .13);
  box-shadow: 0 8px 20px rgba(20, 50, 90, .06);
}
/* 【2026-09-16】タイルごとの色（オレンジ・青・紫・緑）と右上の光を外した。
   色が何も意味していない飾りだったため。代わりに、4枚が持つ本当の構造
   ——「ゼロが3つ、かかるのは1〜3日だけ」——を、その1枚（.is-spend）に
   DayTry の黄色マーカーを引いて示す */
body.top-apple .s1-stat.is-spend {
  border-color: rgba(33, 112, 231, .28);
}
body.top-apple .s1-stat.is-spend .s1-stat-value {
  color: var(--ink);
  background: linear-gradient(transparent 58%, #ffe66d 58%);
  padding: 0 4px;
}
body.top-apple .s1-stat-value {
  /* vw係数を大きめに取り、タイルが広がったぶん数字も一緒に大きくなるようにする
     （最小17px＝320px幅でも「1〜3日」がタイル内に収まる上限） */
  font-size: clamp(17px, 4.6vw, 40px);
  font-weight: 900; line-height: 1.05; letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--accent); /* 青→紫のグラデーションをやめた（2026-09-15） */
}
/* 単位（枚・回・日・円）は数字の半分の大きさでベースラインにそろえる */
body.top-apple .s1-unit { font-size: .5em; font-weight: 900; }
/* 「1〜3日」の「〜」だけは、小さくするとベースラインに沿って
   数字より下に沈んで見えるので、数字の高さの中心へ持ち上げる */
body.top-apple .s1-range {
  font-size: .62em; vertical-align: .26em; margin: 0 .02em;
}
/* ラベル（提出するES・選考の面接…）は「ES0枚・面接0回」というこのSTEPの主張そのもの。
   以前は下限8pxで、1.15vw では 1130px 幅まで上限13pxに届かず＝スマホでは常に8px＝読めなかった。
   最長は5文字（提出するES）。実測で 320px 画面のタイル内幅58px に対しラベル58px＝ちょうど収まる。
   タイルは overflow:hidden なので、下限をこれ以上上げると 320px で文字が切れる。
   vw係数を上げて 430px 以上では上限13pxまで戻す */
body.top-apple .s1-stat-label {
  margin-top: clamp(3px, .5vw, 7px);
  font-size: clamp(12px, 3.1vw, 13px);
  font-weight: 700; color: var(--ink-2); white-space: nowrap;
}

/* 体験内容の例のカード（.flipcards）は下マージンを持たないので、
   ここで間隔を作らないとカードと「体験が終わったら」チップがくっついて見える */
body.top-apple .sc-bridge { margin-top: clamp(30px, 4vw, 52px); text-align: left; }
/* 既存の .ap-bridge-paths は max-width:760px の中央寄せ。
   そのままだと見出しと左端が揃わず、線の基準位置もカードとずれる。
   左揃えにするため制限と中央寄せを外す */
body.top-apple .sc-bridge .ap-bridge-paths { max-width: none; margin: 0; }

/* ---- 縦の連結線 ----
   STEP1のボタン → STEP2 → 体験が終わったら → 気に入ったら → STEP3 を
   1本の線でつなぐ。すべて同じ x（--axis）に置くことで、
   間にカードや見出しを挟んでも一直線に見える。
   軸は本文の左端から26px。見出し・ボタン・カードがすべて左揃えなので、
   どの要素の下から線が出ても位置が揃う */
body.top-apple .sc-content { --axis: 26px; }
body.top-apple .sc-link { position: relative; height: 76px; }
body.top-apple .sc-link-sm { height: 44px; }
body.top-apple .sc-link::before {
  content: ""; position: absolute; left: var(--axis); top: 0; bottom: 0;
  width: 2px; margin-left: -1px; background: #2170e7;
}
/* 分岐：軸をそのまま下ろしつつ、右の「合わなかったら」へ枝を伸ばす */
body.top-apple .sc-fork { position: relative; height: 50px; }
body.top-apple .sc-fork::before {
  content: ""; position: absolute; left: var(--axis); top: 0; bottom: 0;
  width: 2px; margin-left: -1px; background: #2170e7;
}
body.top-apple .sc-fork::after {
  content: ""; position: absolute; left: var(--axis); right: 25%; top: 22px; height: 28px;
  border-top: 2px solid rgba(25,118,210,.35);
  border-right: 2px solid rgba(25,118,210,.35);
  border-top-right-radius: 14px;
}
body.top-apple .sc-lead {
  font-size: clamp(15px, 1.4vw, 16px); color: var(--ink-2); /* 下限 12.5→13.5→15px（STEPの本文・2026-09-17） */
  line-height: 1.85; margin: 0 0 30px;
}
/* 本文(1040px)＋左右の丸の列が収まらない幅では、左の縦バーをやめて
   画面上部の横バーに切り替える。1040 + 丸36 + 余白22 x2 で約1160px必要なので、
   余裕をみて1200px以下から横バーにする */
@media (max-width: 1200px) {
  /* スマホ・タブレット：画面上部にピル型の固定バーを置き、
     STEP説明図（画像バンド）を通過するあたりで JS(is-shown) がポンと出現させる。
     既定は少し上へ隠しておき、出現時に下りてくる（visibility/opacityは基底で制御）。 */
  body.top-apple .sc-rail {
    position: fixed;
    /* ヘッダーの実際の高さは画面幅で変わる（style.css の .site-header .container が
       400px以下で padding 10px、それ以上で 14px）。固定値を書くとどの幅かで必ずズレて
       ロゴに重なるため、main.js の syncHeaderHeight() が測った --header-h を使う。
       JSが動く前でも極端に外れないよう 56px を既定値にしておく */
    top: calc(var(--header-h, 56px) + 8px);
    left: 0; right: 0;
    width: min(400px, calc(100% - 24px));
    margin: 0 auto;
    /* 【2026-09-16】背が高く不透明だったため、スクロール中に下の見出し
       （「マナー」「給与」など）を隠して読めなくしていた。高さを詰め、
       ヘッダーと同じすりガラスにして背後が透けるようにする */
    padding: 5px 10px;
    z-index: 30;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(20, 50, 90, 0.10);
    transform: translateY(-16px);
    transition: opacity 0.24s ease, transform 0.36s cubic-bezier(0.22, 0.8, 0.28, 1),
                visibility 0.24s ease;
  }
  /* 出現時：定位置へ下りてくる（不透明度・可視は基底の .is-shown が担当） */
  body.top-apple .sc-rail.is-shown {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    body.top-apple .sc-rail { transition: opacity 0.24s ease, visibility 0.24s ease; transform: none; }
  }
  body.top-apple .sc-rail ol { display: flex; justify-content: space-between; gap: 6px; }
  body.top-apple .sc-rail ol::before { left: 13px; right: 13px; top: 20px; bottom: auto; width: auto; height: 2px; }
  body.top-apple .sc-item { padding: 2px 0; flex: 0 0 auto; justify-content: center; }
  /* 横バーでも同じ「丸→楕円」の変形。幅だけ画面に合わせて小さくする */
  body.top-apple .sc-dot { width: 26px; height: 26px; font-size: 12px; }
  body.top-apple .sc-item.is-active .sc-dot { width: 78px; gap: 5px; }
  body.top-apple .sc-dot-word { font-size: 11px; }
  body.top-apple .sc-item.is-active .sc-dot-word { max-width: 46px; }
}

/* スマホ：STEPチップ・見出し・本文・線をすべて画面中央にそろえる。
   分岐図も縦積みになるので、このとき「気に入ったら」を後ろに回して
   直下のSTEP3への線と隣り合わせる
   （順番どおりだと間に「合わなかったら」が挟まり、つながりが切れて見えるため） */
@media (max-width: 600px) {
  /* 【2026-09-17】中央ぞろえをやめたので、軸も PC と同じ「本文の左端から26px」に戻す。
     ここを 50%（画面中央）のままにすると、左ぞろえの本文から線だけが離れて宙に浮く。
     継承するだけでよいので、ここでは何も指定しない（PC側の --axis: 26px が効く）。 */
  /* チップ(inline-flex)・見出し・リード・ボタン(inline-block)は
     親の text-align:center でまとめて中央に寄る。
     カード群(.flipcards)は top.css で text-align:left を持つので影響を受けない */
  /* 【2026-09-17】中央ぞろえをやめ、左の1本の線にそろえた。
     STEPの札・見出しだけ中央で本文が左だと、基準の線が2本あることになる。
     幹の縦線（--axis:50%）は本文の下の余白を通るので、左ぞろえでも重ならない。 */
  body.top-apple .sc-panel { text-align: left; }
  body.top-apple .sc-bridge { text-align: left; }
  body.top-apple .sc-bridge .ap-bridge-paths { text-align: left; }
  /* 数字タイルはスマホでできるだけ大きく見せたいので、
     .sc-wrap の左右padding（20px）をネガティブマージンで半分だけ打ち消し、
     画面の端から10pxまで広げる（0にせず必ず隙間を残す）。
     100vw を使うとスクロールバーぶん横スクロールが出るので使わない */
  body.top-apple .s1-stats {
    margin-left: -10px; margin-right: -10px;
    gap: 5px;
  }
  body.top-apple .s1-stat {
    padding-left: 3px; padding-right: 3px;
  }
  /* 【2026-08-07】ここで端まで広げていたのは、4列のカード幅を数字タイル(4列)と
     そろえるためだった。カードを2列に戻したのでそろえる相手が居ない。
     負マージンのまま2列にすると本文だけが左右にはみ出して見えるので外す。 */
  body.top-apple .sc-link { height: 40px; }
  body.top-apple .sc-link-sm { height: 26px; }
  body.top-apple .sc-fork { height: 30px; }
  /* 縦積みでは左右の分岐にならないので、枝は出さず幹だけにする */
  body.top-apple .sc-fork::after { display: none; }
  body.top-apple .ap-bridge-path-main { order: 2; }

  /* --- スマホ：カードは共通の枠デザイン（ベース）を継承しつつ、全幅寄せ＋左右余白を調整 ---
     枠線・背景・影・角丸・first/lastの余白はベース側で担当する。 */
  body.top-apple .sc-panel {
    padding: 32px 20px;
    /* sc-wrapの20px paddingの内側で左右-10pxに広げる（画面端まで届かず横スクロールは出ない） */
    margin-left: -10px;
    margin-right: -10px;
  }
  /* スマホも PC と同じ控えめさにそろえる（2026-09-17）。
     以前は 3px のリング＋濃い青のグロー＋淡い青の塗りで、画面の大半を占める箱が
     まるごと光っていた。上に出ている固定バーが「STEP 2」と言っているので、
     箱まで光らせる必要はない。地の淡い青だけ残して「いま開いている面」を示す。 */
  body.top-apple .sc-panel.is-current {
    border-color: #2170e7;
    background: linear-gradient(180deg, #f6fbff 0%, #ffffff 62%);
    box-shadow: 0 0 0 1px #2170e7,
                0 10px 26px rgba(15, 25, 45, 0.10);
  }
}

/* ===== マイページ：応募の状況 =====
   企業が受け入れ/見送りを決めたことを、学生が画面で確かめられるようにする。
   LINEの通知を見落としてもここに来れば分かる。 */
.mypage-apps {
  background: #fff;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 16px;
  padding: 20px;
}

/* 希望職種などのチップ。マイページと新規登録の入力画面で共用する。
   もとは mypage.html のインライン style にあり、**register.html では
   素のチェックボックスになっていた**ので、こちらへ移した。 */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
/* 指で押すものなので44pxを確保する（実測38pxで、隣と8pxしか離れていない）。
   横paddingはそのままなので、並びの見た目はほぼ変わらない */
.chip-label {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 8px 16px; border-radius: 999px;
  border: 2px solid #dde4ec; background: #fff;
  font-size: clamp(12px, 3.33vw, 13px); font-weight: 600; color: #5b6b7a;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none; line-height: 1.4;
}
.chip-label input[type="checkbox"] { display: none; }
.chip-label:hover { border-color: var(--primary); color: var(--primary); background: #e3f2fd; }
.chip-label:has(input:checked), .chip-label.chip-checked {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.chip-label:has(input:disabled:not(:checked)), .chip-label.chip-disabled {
  opacity: 0.35; cursor: not-allowed; pointer-events: none;
}

/* ===== 新規登録の入力画面（register.html）===== */
.reg-main { max-width: 560px; margin: 0 auto; padding: 24px 20px 72px; }
/* 進み具合。**いま何段目かが分かると、途中でやめにくい** */
.reg-steps { display: flex; gap: 6px; margin: 0 0 22px; }
.reg-step {
  flex: 1; text-align: center; padding: 8px 4px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  background: #eef2f7; color: var(--text-light);
}
.reg-step.is-done { background: #e8f4ea; color: #1b6b34; }
.reg-step.is-current { background: var(--primary); color: #fff; }
.reg-card { }
.reg-title { margin: 0 0 8px; font-size: clamp(20px, 5.6vw, 26px); font-weight: 900; color: var(--text); }
.reg-lead { margin: 0 0 22px; font-size: 13.5px; line-height: 1.9; color: var(--text-light); }
.reg-optional-note {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: #f2f8fe; font-size: 13px; line-height: 1.8; color: var(--text);
}
.reg-status { margin: 12px 0 0; font-size: 13.5px; font-weight: 700; color: #c62828; text-align: center; }

/* ログイン画面：新規登録とログインの出し分け */
.login-alt { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--text-light); } /* 13→14px（2026-09-17・ログインの入口はここだけ） */
.login-alt-btn {
  min-height: 44px; padding: 8px 14px;
  background: none; border: none; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--primary);
  text-decoration: underline; cursor: pointer;
}
.login-notice {
  margin: 18px 0 0; padding: 18px; border-radius: 14px;
  background: #fdf3e7; border: 1px solid #f0d3ab; text-align: center;
}
.login-notice p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.8; color: var(--text); }

/* 登録した直後にだけ出す帯。LINEログインのあと、いきなり編集フォームが
   開くだけだと登録できたのか分からない、という指摘への対応 */
.mypage-welcome {
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #e8f4ea;
  border: 1px solid #b9dfc2;
  text-align: center;
}
.mypage-welcome-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
  color: #1b6b34;
}
.mypage-welcome-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
}

/* 退会。**目立たせない。** 探せば見つかるが、指が滑って押すことはない位置と強さにする。
   畳んだ状態から始まり、開く → 押す → 確認 の3手で実行される（mypage.js） */
.mypage-withdraw {
  max-width: 560px;
  margin: 40px auto 0;
  border-top: 1px solid var(--line, #e0e6ed);
  padding-top: 8px;
}
.mypage-withdraw > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-light);
}
.mypage-withdraw > summary::-webkit-details-marker { display: none; }
.mypage-withdraw > summary::after {
  content: "";
  width: 8px; height: 8px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.mypage-withdraw[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mypage-withdraw-body {
  padding: 4px 4px 24px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
}
.mypage-withdraw-body p { margin: 0 0 10px; }
.mypage-withdraw-body ul { margin: 0 0 12px; padding-left: 1.3em; }
.mypage-withdraw-body li { margin-bottom: 2px; }
/* 未来の体験予定があるときだけ出す警告。企業側の予定も消えるため */
.mypage-withdraw-note {
  background: #fdecea;
  border-radius: 10px;
  padding: 12px 14px;
  color: #8a1c13;
  font-weight: 700;
}
.mypage-withdraw-btn {
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #c62828;
  color: #c62828;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.mypage-withdraw-btn:hover { background: #fdecea; }
.mypage-withdraw-btn:disabled { opacity: 0.55; cursor: default; }
.mypage-withdraw-status { margin: 10px 0 0; color: #c62828; font-weight: 700; }
.mypage-apps-title {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--primary-dark, #16418a);
}
.mypage-app {
  display: block;
  padding: 14px;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.mypage-app + .mypage-app { margin-top: 10px; }
.mypage-app:hover { background: #f7f9fc; }
.mypage-app-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mypage-app-company { font-weight: 700; }
.mypage-app-status {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px; /* 12→12.5px（2026-09-15） */
  font-weight: 700;
  background: #eef2f7;
  color: #667;
}
.mypage-app-status.is-approved { background: #e6f4ea; color: #1e7e34; }
.mypage-app-status.is-rejected { background: #f2f3f5; color: #888; }
.mypage-app-date,
.mypage-app-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-light, #667);
}
.mypage-app-unread {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffefef;
  color: #c62828;
  font-size: 12px;
  font-weight: 700;
}

/* ===== マイページ：プロフィールの折りたたみ ===== */
.mypage-profile-summary {
  cursor: pointer;
  position: relative;
  /* 記号のぶんだけ右を空ける。空けないと、長い見出しが記号に重なる */
  padding: 14px 36px 14px 16px;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 12px;
  font-weight: 700;
  color: var(--primary-dark, #16418a);
  list-style: none;
}
.mypage-profile-summary::-webkit-details-marker { display: none; }
/* 【float:right をやめた（2026-09-15）】中の説明文（.mypage-profile-hint）が
   block で2行目に回るため、浮かせた記号が最終行の右下まで落ちて、
   見出しと離れた位置でぽつんと浮いていた。1行目の右に固定する */
.mypage-profile-summary::after {
  content: "▼";
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 11px;
  color: var(--text-light, #667);
}
.mypage-profile[open] .mypage-profile-summary::after { content: "▲"; }
.mypage-profile-hint {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 13px; /* 12→13px（2026-09-15） */
  color: var(--text-light, #667);
}
/* 必須未入力のとき、折り畳んだままでも気づけるようにサマリー行に出すバッジ。
   （フォームを自動で開くのは煩わしいという指摘で 2026-08-12 にやめた） */
.mypage-profile-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fdeee6;
  color: #c74e00;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 1px;
}
.mypage-profile[open] .mypage-profile-summary { margin-bottom: 16px; }

/* 体験のあとの意思確認（学生側）。
   .mypage-app はもともとリンク前提だが、ここは中で操作するので
   is-form を付けてカーソルとホバーを外している。 */
.mypage-app.is-form {
  cursor: default;
  display: block;
}
.mypage-app.is-form:hover { transform: none; }

.mypage-app-status.is-matched { background: #e8f5e9; color: #2e7d32; }
.mypage-app-status.is-ended   { background: #f2f4f7; color: #667; }
.mypage-app-status.is-waiting { background: #fff3e0; color: #b45200; }

.intent-choices {
  display: flex;
  gap: 8px;
  margin: 10px 0 8px;
  flex-wrap: wrap;
}
.intent-btn {
  flex: 1 1 auto;
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 12px; /* 10→12px：中の箱の角丸にそろえる（2026-09-16） */
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark, #16418a);
  cursor: pointer;
}
/* :not(.is-chosen) が要る。この規則は .intent-btn.is-chosen より詳細度が高く、
   外すと選択中のボタンがホバー中だけ白背景＋白文字になって読めなくなる */
.intent-btn:hover:not(:disabled):not(.is-chosen) { background: #f0f6ff; }
.intent-btn:disabled { opacity: 0.5; cursor: default; }
/* 選んだだけの状態（まだ送っていない）。送信ボタンを押すまで確定しない */
.intent-btn.is-chosen {
  background: var(--primary, #1976d2); color: #fff;
  border-color: var(--primary, #1976d2);
}
.intent-btn.is-chosen:disabled { opacity: 1; }
.intent-send {
  display: block; width: 100%; margin-top: 10px;
  font-size: 14px; padding: 13px 16px;
}
.intent-send:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.intent-note {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.intent-msg {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-light, #667);
}

.intent-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f6faff;
  border: 1px solid #e3ecf7;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.8;
}
.intent-feedback-title {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--primary-dark, #16418a);
}
.intent-feedback-label {
  margin: 8px 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light, #667);
}
.intent-feedback ul { margin: 0; padding-left: 20px; }
.intent-feedback-note { margin: 8px 0 0; white-space: pre-wrap; }

/* アイコン（マイページ・2026-09-18）。既定は LINE の写真、無ければ名前の頭文字 */
.mypage-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.mypage-avatar-img,
.mypage-avatar-fb {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.mypage-avatar-img {
  object-fit: cover;
  background: #eef2f7;
}
.mypage-avatar-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f7;
  color: #6b7280;
  font-size: 26px;
  font-weight: 900;
}
.mypage-avatar-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
/* 見た目はボタンだが中身は label（クリックで隠した input type=file を開く） */
.mypage-avatar-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--accent, #176dc1);
  border-radius: 999px;
  background: #fff;
  color: var(--accent, #176dc1);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.mypage-avatar-btn:hover { background: #eaf3ff; }
.mypage-avatar-reset {
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-light, #667);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.mypage-avatar .form-hint { margin: 0; }

/* 必須項目まわり（マイページ） */
.required-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fff8e8;
  border: 1px solid #f3e0b5;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.7;
}
/* 2026-09-18 に増えた項目の案内。**応募は止めない**ので、必須（黄色）より弱い青にする */
.required-note.is-soft {
  background: #f2f7ff;
  border-color: #d6e4fb;
}
label .req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ffe3e3;
  color: #c62828;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.form-hint {
  margin: 4px 0 0;
  font-size: 13px; /* 12→13px（2026-09-15） */
  color: var(--text-light, #667);
}
.is-missing {
  border-color: #e53935 !important;
  background: #fff5f5;
}
#save-status.is-error { color: #c62828; }

/* ============================================================
   企業詳細（company.html）／ログイン（login.html）
   Apple風テーマの展開 2026-07-31
   この2ページだけ旧デザインのまま取り残されていたため、
   companies.html / mypage.html と同じ土台に揃えた。

   【重要】ここで .apply-form / .thanks-box に display を書かないこと。
   style.css 側が .apply-form.hide{display:none} と
   .thanks-box{display:none} / .thanks-box.show{display:block} で
   表示を切り替えており、body.top-apple 付きのセレクタは詳細度で
   勝ってしまうため、display を書くと company.js の出し分けが壊れる。
   ============================================================ */

/* ---- 企業詳細：ページの土台 ---- */
/* 営業用サンプルの帯（2026-08-06）。
   **本番の掲載ページと見た目が同じ**なので、これが無いと商談先が
   「もう載っている」と受け取る。ページの一番上に常に出す。
   position:sticky ではなく通常のフローに置いてあるのは、
   ヘッダーが sticky で、重ねると隠れるため */
.sample-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: #fff4d6;
  border-bottom: 1px solid #f0dfae;
  color: #7a5b00;
  font-size: clamp(12px, 3.4vw, 13.5px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.sample-banner-select {
  min-height: 36px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid #e0cf9e;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #4a4a52;
}

body.top-apple .company-detail-section {
  padding: clamp(26px, 4vw, 48px) 20px clamp(36px, 5vw, 64px);
  background:
    radial-gradient(900px 380px at 50% -140px, #eaf3ff 0%, rgba(255, 255, 255, 0) 70%),
    #fff;
}

body.top-apple .back-link {
  color: var(--ink-2);
  font-weight: 700;
}
body.top-apple .back-link:hover {
  color: var(--accent);
}

body.top-apple .company-detail-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 18px 50px rgba(20, 40, 80, 0.08);
  max-width: 680px;
}

/* 画像を登録していない会社で、16:9 の巨大な空きブロックが出ていた。
   .no-image は背景色を変えるだけで高さ（aspect-ratio）はそのままだったのが原因。
   画像が無いときは高さを持たせず、アイコンを載せるための細い帯にする。 */
body.top-apple .company-detail-hero.no-image {
  aspect-ratio: auto;
  height: 76px;
  background: linear-gradient(120deg, #e9f1ff 0%, #eaf3fd 100%); /* 紫を抜いた（2026-09-15） */
}

/* ---- 詳細ページのヘッダー（2026-08-06 に作り直し） ----
   それまでロゴは画像の左下に -26px ではみ出して置いてあり、**社名の1行目に
   完全に重なっていた**（PC実測：ロゴ y=703〜767／社名 y=757〜792。スマホも同じ）。
   ロゴぶんの余白がどこにも確保されていなかったのが原因。

   はみ出しをやめて、**一覧カードと同じ「ロゴ → 社名」の横並び**にした。
   カードを押して開いた先で同じ顔が同じ並びで出るので、別の会社に来たように
   見えない。重なりは位置の調整ではなく、並べ方として起きなくなる。 */
body.top-apple .company-idbar {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* 会社詳細のカードは padding 0（画像が上端いっぱい）なので、ここで左右を空ける。
   募集詳細のカードは padding 32px を持っているので、左右は 0 のまま */
body.top-apple .company-profile-head .company-idbar { margin: 18px 22px 0; }
body.top-apple .company-detail-card .company-idbar { margin: 22px 0 14px; }
body.top-apple .company-idbar-text {
  min-width: 0;  /* 長い社名で flex 項目がはみ出さないように */
}
body.top-apple .company-idbar-text h1 {
  margin: 0;
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.35;
}
body.top-apple .company-idbar-text .tag { margin: 6px 0 0; }
body.top-apple .company-idbar-text .company-detail-company { margin: 4px 0 0; }

/* ロゴ。**一覧カード（.company-card-logo / .int-card-logo）と同じ角丸の正方形。**
   ここだけ丸くすると、企業が管理画面で見たプレビューとも、カードとも形が変わる */
body.top-apple .company-detail-icon-wrap {
  position: static;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid #e6edf5;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 40, 80, 0.06);
}

/* ロゴがはみ出さなくなったので、画像の下の余白は要らない */
body.top-apple .company-detail-hero { margin-bottom: 0; }

/* PCでイメージ画像が大きすぎた。**実測 1038×584px（1280×1000 の画面の6割）。**
   本文の幅に上限が無く、16:9 のまま横いっぱいに伸びていた。
   幅は募集詳細のカード（680px）にそろえ、比率も横長にして帯に近づける。
   **スマホは 16:9 のまま**（ちょうどよいという評価だったので触らない） */
body.top-apple .company-detail-section .ap-container { max-width: 720px; }
/* 比率の指定は .company-profile-hero の定義より後ろに置くこと（同じ強さなので
   先に書くと負ける）。このファイルの下のほう、no-image の直後にある */

body.top-apple .company-detail-card h1 {
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---- 企業詳細：応募セクション ---- */
body.top-apple .company-apply-section {
  text-align: center;
}
body.top-apple .company-apply-section .ap-lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}
body.top-apple .company-apply-section .apply-form {
  max-width: 520px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 18px 50px rgba(20, 40, 80, 0.08);
  padding: clamp(24px, 4vw, 34px);
  text-align: left;
}
/* ログイン誘導と完了メッセージは中央寄せのままにする */
body.top-apple .company-apply-section #apply-login-prompt,
body.top-apple .company-apply-section .thanks-box {
  text-align: center;
}
body.top-apple .apply-lead {
  font-size: clamp(12.8px, 3.4vw, 15px);
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
body.top-apple .apply-note {
  margin: 14px 0 0;
  font-size: clamp(13.5px, 3.1vw, 14px); /* 12→13.5px（2026-09-17・申し込む直前に読む文） */
  color: var(--ink-2);
}
/* 応募欄の「選ぶのは日付だけ」。日程チップのすぐ下に添える（2026-08-22） */
body.top-apple .apply-time-note {
  margin: 10px 0 0;
  font-size: clamp(13.5px, 3.1vw, 14px); /* 12→13.5px（2026-09-17・日程の選び方の説明） */
  color: var(--ink-2);
  line-height: 1.7;
}

/* ---- LINEログインボタン（company.html は <a>、login.html は <button>） ---- */
body.top-apple .line-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 330px;
  padding: 15px 26px;
  border: none;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-family: inherit;
  font-size: clamp(13.6px, 3.6vw, 16px);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(6, 199, 85, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
body.top-apple .line-login-btn:hover {
  background: #05b34c;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(6, 199, 85, 0.34);
}
body.top-apple .line-login-btn:active {
  transform: scale(0.98);
}

/* ---- ログインページ ---- */
body.top-apple .login-hero {
  padding-bottom: clamp(18px, 3vw, 30px);
}
body.top-apple .login-section {
  padding: 0 20px clamp(64px, 9vw, 110px);
}
body.top-apple .login-card {
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(26px, 4.5vw, 38px) clamp(20px, 4vw, 34px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(20, 40, 80, 0.08);
  text-align: center;
}
body.top-apple .login-status {
  margin: 16px 0 0 /* 段の間隔を16pxにそろえた（2026-09-16） */;
  font-size: clamp(12px, 3.33vw, 13px);
  color: #c62828;
  min-height: 1.2em;
}

body.top-apple .login-points {
  list-style: none;
  margin: clamp(16px, 3.5vw, 30px) 0 0 /* 下限を16pxにそろえる（2026-09-16） */;
  padding: clamp(16px, 3vw, 22px) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  text-align: left;
}
body.top-apple .login-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}
body.top-apple .login-points li:last-child {
  margin-bottom: 0;
}
/* 項目の区別に絵文字は使わない方針（ちゃっちく見えるため）。
   細いチェックのアウトラインで揃える。 */
body.top-apple .login-point-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #06c755;
}
body.top-apple .login-point-text {
  font-size: clamp(13px, 3.3vw, 13.5px); /* 下限 12→13px（2026-09-15 スマホの可読性） */
  line-height: 1.65;
  color: var(--ink-2);
}
body.top-apple .login-point-text strong {
  display: block;
  color: var(--ink);
  font-weight: 800;
}

body.top-apple .login-terms {
  margin: clamp(16px, 3vw, 24px) 0 0 /* 下限を16pxにそろえる（2026-09-16） */;
  font-size: 14px;   /* 9.6→12→13→14px。規約への同意を伝える文なので読める大きさにする（2026-09-17） */
  line-height: 1.75;
  max-width: 21em;
  margin-inline: auto;
  text-wrap: balance; /* 3行の長さをそろえる。放っておくと最後の行に数文字だけ残る */
  color: var(--ink-2);
}
body.top-apple .login-terms a {
  color: var(--accent);
  font-weight: 700;
}

/* ---- ヘルプページ ---- */
body.top-apple .help-contact-note {
  margin: 22px 0 0;
  /* 12→14px（2026-09-17）。ここは「会社への連絡はメッセージから」という
     迷ったときに読む案内で、小さすぎると見つけても読まれない */
  font-size: clamp(14px, 3.1vw, 15px);
  line-height: 1.8;
  color: var(--ink-2);
}
body.top-apple .help-contact-note a {
  color: var(--accent);
  font-weight: 700;
}

/* ===== 会社詳細ページ（company-profile.html） =====
   体験の詳細（company.html）から「会社の詳細を見る」で来るページ。
   会社そのものの情報だけを置く。体験・インターンの中身は出さない。 */

/* 会社の詳細への入口。**上のカードの右下に小さく置く**（2026-08-07 に移動）。
   主役は募集名なので、同じ大きさで下に置くと視線がそちらへ流れる。
   flex にして右へ寄せているのは、カードの中身が左ぞろえで並んでいるため
   （inline-block のままだと左端に付いて、見出しの続きに見える） */
body.top-apple .company-profile-link {
  display: flex;
  justify-content: flex-end;
  /* 単独で置かれるリンクなので44pxの当たり判定が要る（実測22pxだった）。
     margin を減らして padding に振り替え、見た目の位置は変えない */
  align-items: center;
  min-height: 44px;
  margin-top: 3px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ap-blue, #1976d2);
  text-decoration: none;
}
body.top-apple .company-profile-link:hover { text-decoration: underline; }

body.top-apple .company-profile-head {
  background: #fff;
  border: 1px solid #ececf0;
  border-radius: 18px;
  padding: 0 0 26px;
  overflow: hidden;
}
/* 社名と業種タグは .company-idbar-text の中に移った（2026-08-06）。
   ここで左右 22px を付け直すと、横に並べたロゴぶんだけさらに右へずれる */
body.top-apple .company-profile-summary {
  margin: 12px 22px 0;
  color: #4a4a52;
  line-height: 1.85;
}

/* イメージ画像を登録していない会社で、16:9の空きブロックが出るのを避ける
   （company-detail-hero と同じ考え方） */
body.top-apple .company-profile-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f2f2f5;
}
body.top-apple .company-profile-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.top-apple .company-profile-hero.no-image {
  aspect-ratio: auto;
  height: 76px;
  background: linear-gradient(120deg, #e9f1ff 0%, #eaf3fd 100%); /* 紫を抜いた（2026-09-15） */
}

/* PCだけ横長にする。16:9 のままだと 720px 幅で高さ 405px になり、
   画面の半分近くを1枚の写真が占める。**スマホは 16:9 のまま。**
   no-image は高さを持たないので、ここでは巻き込まない */
@media (min-width: 768px) {
  body.top-apple .company-profile-hero:not(.no-image),
  body.top-apple .company-detail-hero:not(.no-image) { aspect-ratio: 2.6 / 1; }
}

body.top-apple .company-profile-facts {
  margin: 20px 22px 0;
  border-top: 1px solid #ececf0;
}
body.top-apple .company-profile-facts > div {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f5;
  font-size: 15px;
}
body.top-apple .company-profile-facts dt {
  flex: 0 0 104px;
  color: #6b6b73;
}
body.top-apple .company-profile-facts dd {
  margin: 0;
  flex: 1 1 auto;
  /* 長いURLでも横スクロールを起こさせない */
  overflow-wrap: anywhere;
}

body.top-apple .company-profile-block {
  background: #fff;
  border: 1px solid #ececf0;
  border-radius: 18px;
  padding: 24px 22px;
  margin-top: 16px;
}
body.top-apple .company-profile-block h2 {
  font-size: 19px;
  margin: 0 0 10px;
}
body.top-apple .company-profile-block p {
  margin: 0 0 12px;
  color: #4a4a52;
  line-height: 1.9;
}
body.top-apple .company-profile-block p:last-child { margin-bottom: 0; }

/* 会社情報フォームの小見出し（企業管理画面） */
.form-subhead {
  font-size: 16px;
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid #ececf0;
}

/* 日程ごとの応募締め切り（2026-08-02 追加）。
   残り時間が短いときだけ時刻まで出す（company.js の deadlineLabel） */
body.top-apple .slot-option-deadline {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #b45309;
}

/* 体験カードの「日ごとの内容」バッジ（2026-08-02 追加・段階6） */
body.top-apple .exp-card-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
body.top-apple .exp-card-contents span {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f2f4f8;
  color: #4a4a52;
}

/* 体験の詳細（company.html?exp=）。段階6で体験名が主役になった */
body.top-apple .company-detail-company {
  margin: 2px 0 8px;
  font-size: 14px;
  color: #6b6b73;
}
/* 【もう使っていない】2026-08-04 に体験カードを作り直し、当日の流れは
   .exp-flow、持ち物は .exp-card-facts に移した。
   company-admin.js の #exp-days / #exp-belongings は id なのでここには当たらない。
   消す前に、他のページで class として使っていないか確認すること。 */
body.top-apple .exp-days {
  list-style: none;
  counter-reset: expday;
  margin: 14px 0 10px;
  padding: 0;
}
body.top-apple .exp-days li {
  counter-increment: expday;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f5;
  font-size: 15px;
}
body.top-apple .exp-days li::before {
  content: counter(expday) "日目";
  flex: 0 0 52px;
  font-size: 12px;
  color: #6b6b73;
}
body.top-apple .exp-days-mode {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #33518f;
}
body.top-apple .exp-belongings {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
}
body.top-apple .exp-belongings strong {
  display: block;
  font-size: 13px;
  color: #6b6b73;
}

/* 募集カードの「◯日の体験から試せます」（段階9） */
body.top-apple .int-card-try {
  margin: 8px 0 0;
  font-size: 13px;
  color: #33518f;
}

/* 募集の詳細ブロック（身につくスキル・業務内容・アクセスなど） */
body.top-apple .int-detail-block { margin-top: 20px; }
/* 見出しが薄いグレーの15pxで、本文（#4a4a52）とほとんど同じ濃さだった。
   拾い読みするとき、どこから次の話かが分からない。左に短い線を足して、
   文字も濃くする */
body.top-apple .int-detail-block h2 {
  position: relative;
  font-size: 15px;
  margin: 0 0 8px;
  padding-left: 11px;
  color: #2a2a30;
}
body.top-apple .int-detail-block h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 2px; background: #2170e7;
}
body.top-apple .int-detail-block p {
  margin: 0;
  line-height: 1.85;
  color: #4a4a52;
}
/* 「身につくこと」は箇条書きの点をチェックに変える。
   点のままだと、条件の羅列と同じ見え方で、得られるものだと伝わらない */
body.top-apple .int-skills {
  list-style: none;
  margin: 0;
  padding-left: 0;
  line-height: 1.75;
  color: #4a4a52;
}
body.top-apple .int-skills li {
  position: relative;
  padding: 5px 0 5px 26px;
}
body.top-apple .int-skills li::before {
  content: "";
  position: absolute; left: 2px; top: 11px;
  width: 13px; height: 7px;
  border-left: 2.5px solid #2170e7; border-bottom: 2.5px solid #2170e7;
  transform: rotate(-45deg);
}

/* 勤務条件・応募の条件（2026-08-06）。1行＝1項目で、右端に印を置く。
   **印は右端でそろえる。** 文章の長さがまちまちなので、文章のすぐ後ろに
   置くと印の位置が行ごとにばらつき、「不可」だけを拾い読みできない。
   点線で行を区切っているのは、長い文章が2行になったときに
   どこまでが1項目か分からなくなるため */
body.top-apple .int-conds {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
body.top-apple .int-conds li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed #ececf0;
}
body.top-apple .int-conds li:last-child { border-bottom: none; }
body.top-apple .int-cond-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.7;
  color: #4a4a52;
  overflow-wrap: anywhere;
}
/* 補足は条件そのものではなく但し書きなので、一段小さく薄くして下にぶら下げる。
   同じ大きさで横に続けると、どこまでが条件でどこからが例外か読み取れない */
body.top-apple .int-cond-note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #71717a;
}
/* **色だけで意味を伝えない。** 中の文字でも「不可」「必須」と読める。
   幅をそろえてあるので、右端に印が縦に並ぶ */
body.top-apple .int-cond-mark {
  flex: 0 0 auto;
  min-width: 54px;
  text-align: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
body.top-apple .int-cond-mark.is-ok       { background: var(--accent-green-bg,  #e6f7ee); color: #197f53; }
body.top-apple .int-cond-mark.is-no       { background: #fdeaea;                          color: #b3261e; }
body.top-apple .int-cond-mark.is-consult  { background: var(--accent-orange-bg, #fff1e6); color: #a65b00; }
body.top-apple .int-cond-mark.is-required { background: #e8eeff;                          color: #33518f; }
body.top-apple .int-cond-mark.is-welcome  { background: var(--accent-purple-bg, #f3ecff); color: #6b4bbd; }

/* ===== 募集カード（2026-08-04 作り直し） =====
   以前は会社名が一番上の太字で、一覧の単位を募集に変えたのに視線は
   会社へ向いたままだった。学生が選んでいるのは仕事なので、
   募集名 → 条件 → 何日で試せるか → 会社、の順に並べ替えた。 */

body.top-apple .int-card {
  display: block;
  background: #fff;
  border: 1px solid #e9e9ef;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
body.top-apple .int-card:hover {
  border-color: #d5dcf0;
  box-shadow: 0 8px 24px rgba(20, 30, 60, .09);
  transform: translateY(-2px);
}
body.top-apple .int-card-thumb { aspect-ratio: 16 / 7; background: #f2f2f5; }
body.top-apple .int-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 写真が無いときの帯。**比率は写真と同じ 16:7 のまま**にしてあるので、
   写真のあるカードと高さがそろう（以前は帯ごと出しておらず列がガタついた）。
   ロゴは切り取らずに中央へ置く。会社の顔なので、端が切れると別物に見える */
/* 写真の無い会社の帯。薄い水色ベタ＋小さな頭文字は「未設定」に見えて
   一覧の中で見劣りしていたため、ブランドの青グラデ＋斜めの光の帯
   （トップ・診断と同じ斜めの語彙）＋大きめの白マークに変更（2026-08-19） */
body.top-apple .int-card-thumb--logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(115deg, #2170e7 0%, #173e9e 100%);
  overflow: hidden;
}
body.top-apple .int-card-thumb--logo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 36%, rgba(255, 255, 255, .10) 36%,
    rgba(255, 255, 255, .10) 58%, transparent 58%);
}
body.top-apple .int-card-thumb--logo .int-card-thumb-mark {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(10, 25, 60, .28);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #1b53c4;
}

body.top-apple .int-card-body { padding: 16px; }

body.top-apple .int-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
/* 「1日から試せる」はDayTryの核心。文中に置くと読み飛ばされるので
   カード上部のバッジにして、色も他のタグと変える */
body.top-apple .int-card-try {
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: #fff4d6; color: #8a5a00;
}

body.top-apple .int-card-title {
  font-size: 17px; line-height: 1.45; font-weight: 800;
  margin: 0 0 8px; color: #1a1a1f;
  /* 4行以上になる極端に長い名前は「…」で切る（3行までは全部見せる。
     2行で切る案は「3行でも段をそろえたい」のオーナー指示で3行に） */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 募集名が1行でも3行でも、下の項目（会社名・日程・場所）の位置が
   カード間でそろうよう、**常に3行分の高さを取る**（2026-08-20 オーナー指示）。
   ただし**カードが2列以上並ぶ幅だけ**。1列のスマホにはそろえる相手がいないのに、
   1行の募集名の下に空行2行が入って間延びしていた（グリッドは
   minmax(320px,1fr)×gap16 なので、2列になるのはおおよそ700px〜） */
@media (min-width: 700px) {
  body.top-apple .int-card-title { min-height: calc(3 * 1.45em); }
}

/* 会社名は募集名のすぐ下に小さく。詳細ページのヒーロー（募集名→会社名）と同じ並び。
   以前はカードの一番下に置いていたが、「誰の募集か」は名前と一緒に読むもので、
   離すと最後まで見ないと分からなかった。太さと色は抑えて主役を奪わせない */
body.top-apple .int-card-by {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px; /* 12→8px：カード内の段をそろえる（2026-09-16） */
}

/* 体験の話（いつ・どこ）。長期の条件とは上下で分ける */
body.top-apple .int-card-try-facts {
  list-style: none; margin: 0 0 8px; padding: 0; /* 12→8px（2026-09-16） */
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px; color: #2a2a30;
}
body.top-apple .int-card-try-facts:empty { display: none; }
body.top-apple .int-card-try-facts li { display: flex; align-items: center; gap: 7px; }
body.top-apple .int-card-try-facts svg { width: 15px; height: 15px; flex: 0 0 auto; color: #2170e7; }

/* 長期の条件。**体験の対価と読まれないよう、線と言葉で区切る。**
   「1日から試せる」のすぐ下に時給を置いていたのが元の問題 */
body.top-apple .int-card-long {
  /* 「くわしく見る」の行を外したので、この段がカードの最後。下マージンを残すと
     カード下端の余白だけ広くなる（下は .int-card-body の padding に任せる） */
  margin: 0; padding-top: 11px; border-top: 1px dashed #e6e6ec;
  font-size: 13px; color: #55555e;
}
body.top-apple .int-card-long-label {
  display: inline-block; margin-right: 7px;
  font-size: 12px; font-weight: 700; color: #6d6d75;   /* 11px→12px */
  background: #f2f2f6; border-radius: 4px; padding: 2px 7px;
}

/* 【もう使っていない】2026-08-04 にカードを作り直し、条件は .int-card-try-facts と
   .int-card-long に分かれた。身につくスキルは一覧から外して詳細ページに任せている */
body.top-apple .int-card-conds {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 13px; color: #4a4a52;
}
body.top-apple .int-card-conds li { display: inline-flex; align-items: center; gap: 5px; }
body.top-apple .int-card-conds svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .65; }

body.top-apple .int-card-skills,
body.top-apple .int-card-detail {
  font-size: 13px; line-height: 1.7; color: #5a5a63; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.top-apple .int-card-skills-label {
  display: inline-block; margin-right: 6px;
  font-size: 11px; font-weight: 700; color: #33518f;
  background: #eef3ff; border-radius: 4px; padding: 1px 6px;
}

/* 「くわしく見る →」だけを置く帯。会社名は上（.int-card-by）へ移した */
body.top-apple .int-card-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid #f2f2f5;
}
/* 白地＋薄い枠にしてある。以前は淡い青の下地だったので、
   **白や淡い色のロゴが背景に溶けて見えなかった** */
body.top-apple .int-card-logo {
  width: 26px; height: 26px; border-radius: 7px; overflow: hidden;
  background: #fff; border: 1px solid #e6edf5; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
body.top-apple .int-card-logo img { width: 100%; height: 100%; object-fit: cover; }
body.top-apple .int-card-logo-fallback { font-size: 12px; font-weight: 800; color: #33518f; }
body.top-apple .int-card-company {
  font-size: 13px; color: #55555e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.top-apple .int-card-more {
  margin-left: auto; flex: 0 0 auto;
  font-size: 13px; font-weight: 700; color: var(--ap-blue, #1976d2);
}

/* 絞り込みの開閉（2026-08-04）。既定は閉じている。
   件数が少ないうちに開いたままだと、スマホの1画面目がまるごと条件で
   埋まり、肝心の募集が見えない。 */
body.top-apple .cfilter-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 11px 14px;
  background: #fff; border: 1px solid #e0e0e8; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: #3a3a42; cursor: pointer;
}
body.top-apple .cfilter-toggle:hover { border-color: #c9cddb; }
body.top-apple .cfilter-toggle > svg { width: 18px; height: 18px; opacity: .6; }
body.top-apple .cfilter-toggle-caret { margin-left: 0; transition: transform .18s; }
body.top-apple .cfilter-toggle[aria-expanded="true"] .cfilter-toggle-caret { transform: rotate(180deg); }
/* 閉じていても「何件で絞っているか」は見せる。
   畳んだ中に条件が残っていると、なぜ件数が少ないのか分からなくなる */
body.top-apple .cfilter-toggle-count {
  font-size: 12px; font-weight: 700; color: #1976d2;
  background: #eaf2ff; border-radius: 999px; padding: 2px 9px;
}
body.top-apple .cfilter-toggle-caret { margin-left: auto; }
body.top-apple .cfilter-groups[hidden] { display: none; }
body.top-apple .cfilter-groups { margin-top: 12px; }

/* 募集の条件（2026-08-04）。以前は1本の文字列で、時給や日数が住所の
   後ろに埋もれていた。見比べられるよう表にする。 */
body.top-apple .int-head-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }

/* 【まず見る3つ】いくら・どれくらい・どこで。
   1行3列で固定する。折り返すと「時給と週の日数」「勤務地」が別の行に分かれ、
   3つで1組であることが見えなくなる。狭い画面では中の文字を縮めて対応する */
body.top-apple .int-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px;
}
body.top-apple .int-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 6px;
  background: #f8f9fc; border: 1px solid #ececf0; border-radius: 12px; text-align: center;
}
/* ラベルは折り返させない。**3列に並ぶタイルは1つ88px前後しかなく**、
   「インターンの給与」は 11px だとちょうど溢れて「インターンの給／与」と割れる。
   狭い画面では字を詰めて1行に収める */
body.top-apple .int-tile-label {
  /* 下限 9px→12px。項目名が読めないと、数字だけが並んだ表になってしまう */
  font-size: clamp(12px, 2.6vw, 13px);
  font-weight: 700;
  color: #6d6d75;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
body.top-apple .int-tile-value {
  font-size: clamp(15px, 4.4vw, 21px); font-weight: 900; color: #17324f;
  line-height: 1.25; letter-spacing: -.01em;
  /* 「東京都渋谷区」のような文字数の多い値は、数字より小さくして収める */
  overflow-wrap: anywhere;
}
body.top-apple .int-tile-unit { font-size: .62em; font-weight: 900; margin-left: 1px; }
/* 都道府県。フリガナのように値の上へ小さく回す（2026-08-06）。
   「東京都」と大きく出しても通えるか判断できないので、主役は市区町村に譲る。
   **中身が無くても高さを取る。** 出ているタイルだけ行が増えると、
   3枚並んだときに大きい文字が別々の高さに来て視線が上下する */
body.top-apple .int-tile-ruby {
  font-size: 10.5px; font-weight: 700; color: #71717a; line-height: 1.3;
  min-height: 1.3em;
  margin-bottom: -2px;
}
/* 「＋インセンティブ」など、値そのものではない但し書き。
   以前は unit に足していたので「1200円＋インセンティブ」が1行に続き、
   **いくらなのかが読み取れなかった** */
body.top-apple .int-tile-sub {
  font-size: clamp(12px, 2.5vw, 13px);
  font-weight: 700; color: #71717a; line-height: 1.3;
  min-height: 1.3em;           /* 中身が無くても高さを取る（ruby と同じ理由） */
  white-space: nowrap;         /* 「＋インセンティ／ブ」と割れるのを防ぐ */
  letter-spacing: -0.02em;
}
/* 「フルリモート」など文字数の多い値。数字と同じ大きさだと2行に折れる。
   企業が長い勤務地名を入れた場合の保険として2行で打ち切る
   （タイルだけが縦に伸びて、3つ横並びの形が崩れるのを防ぐ）。
   詳しい住所はすぐ下の表に全文がある */
body.top-apple .int-tile-value.is-long {
  font-size: clamp(12px, 3.3vw, 16px);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

body.top-apple .int-facts { margin: 0 0 18px; border-top: 1px solid #f0f0f4; }
body.top-apple .int-facts > div {
  display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f4f4f7; font-size: 14px;
}
body.top-apple .int-facts dt { flex: 0 0 108px; color: #6d6d75; }
body.top-apple .int-facts dd { margin: 0; flex: 1 1 auto; color: #2a2a30; overflow-wrap: anywhere; }

/* ---- 詳細ページの2段構え（2026-08-04）----
   ①いま申し込む「体験」と、②合ったら進む「長期インターン」を、
   見出しと色で分ける。以前は両方が地続きに並んでいて、
   長期の時給が体験の対価に見えていた。
   ①は青系＝これから起きること、②は白＝そのあとの話、として弱める。 */
/* 戻るリンクを本文と同じ幅の箱に入れて、左端をそろえる */
body.top-apple .detail-inner { max-width: 680px; margin: 0 auto; }

/* ===== 画面下の操作バー ＋ 下から生えるシート（2026-08-04） =====
   ページ本体は「どんな仕事か」を読む場所にして、体験の中身と行ける日は
   シートにまとめた。トップページで固定ボタンを外した経緯があるが、
   あちらは同じ導線が既に5つあったのが理由で、こちらはこのページで唯一の操作。 */

/* 本文がバーに隠れないよう、バーを出したぶんだけ下に余白を作る。
   safe-area は iPhone のホームバー領域 */
body.top-apple.has-detail-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

body.top-apple .detail-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(0, 0, 0, .07);
}
body.top-apple .detail-bar-inner { max-width: 680px; margin: 0 auto; }
body.top-apple .detail-bar-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 100%; min-height: 56px; padding: 10px 18px;
  border: 0; border-radius: 999px; /* ボタンの角丸にそろえる（2026-09-16） */ cursor: pointer;
  background: linear-gradient(135deg, #2170e7 0%, #1b5fd0 100%);
  color: #fff; font-family: inherit;
  box-shadow: 0 8px 22px rgba(33, 112, 231, .32);
  transition: transform .15s, box-shadow .15s;
}
body.top-apple .detail-bar-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(33,112,231,.4); }
body.top-apple .detail-bar-btn:active { transform: translateY(0); }
body.top-apple .detail-bar-btn-main { font-size: 16px; font-weight: 800; letter-spacing: .01em; }
body.top-apple .detail-bar-btn-sub { font-size: 13.5px; font-weight: 600; opacity: .92; } /* 12→12.5→13.5px（2026-09-17） */
body.top-apple .detail-bar-btn-sub:empty { display: none; }

/* シートの後ろに敷く幕 */
body.top-apple .sheet-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 25, 45, .45);
  opacity: 0; transition: opacity .3s ease;
}
body.top-apple .sheet-backdrop.is-open { opacity: 1; }

body.top-apple .sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  max-height: 88vh; display: flex; flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(15, 25, 45, .22);
  /* 閉じているあいだは画面の下に隠しておく。開くと 0 まで上がってくる */
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22, .8, .28, 1);
}
body.top-apple .sheet.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  body.top-apple .sheet { transition: none; }
  body.top-apple .sheet-backdrop { transition: none; }
}
/* PCでは画面幅いっぱいに広げず、本文と同じ幅で中央に置く */
@media (min-width: 720px) {
  body.top-apple .sheet {
    left: 50%; right: auto; width: 680px; transform: translate(-50%, 100%);
    border-radius: 20px 20px 0 0;
  }
  body.top-apple .sheet.is-open { transform: translate(-50%, 0); }
}

body.top-apple .sheet-head {
  position: relative; flex: 0 0 auto;
  padding: 8px 52px 12px; text-align: center;
  border-bottom: 1px solid #f0f0f4;
}
/* 上端のつまみ。「引き下げて閉じられそう」に見せる目印 */
body.top-apple .sheet-handle {
  display: block; width: 38px; height: 4px; margin: 0 auto 10px;
  border-radius: 999px; background: #d8d8e0;
}
body.top-apple .sheet-title { margin: 0; font-size: 16px; font-weight: 800; color: #1a1a1f; }
body.top-apple .sheet-close {
  position: absolute; right: 10px; top: 8px;
  /* 指で押す閉じるボタン。40pxだと基準(44px)に届かない */
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #f2f2f6; color: #55555e; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
body.top-apple .sheet-close:hover { background: #e6e6ec; color: #1a1a1f; }

/* 中身だけがスクロールする。-webkit-overflow-scrolling は iOS の慣性スクロール */
body.top-apple .sheet-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
/* シートの中では、体験ブロックの外枠と余白を外す（シート自体が枠なので二重になる） */
body.top-apple .sheet-body .stage-try {
  background: none; border: 0; padding: 0; margin: 0;
}
body.top-apple .sheet-body .stage-head { margin-bottom: 12px; }
body.top-apple .sheet-body .company-apply-section { margin-top: 22px; }

/* ヒーローカードから条件へ飛ぶ近道。
   主役は体験なので、塗りボタンにはせず文字＋薄い枠にとどめる。
   高さ44pxは指の当たり判定の下限 */
body.top-apple .jump-cond {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; margin-top: 4px;
  border: 1px solid #dcdce4; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #55555e; text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
body.top-apple .jump-cond:hover { border-color: #2170e7; color: #2170e7; background: #f5f9ff; }

/* ページ内リンクの飛び先が、sticky なヘッダーの下に潜らないようにする。
   --header-h は site-nav.js が実測して入れる（幅で高さが変わるため） */
body.top-apple #int-conditions,
body.top-apple #apply { scroll-margin-top: calc(var(--header-h, 56px) + 12px); }

/* 幅は上のヒーローカード（.company-detail-card）と同じ 680px にそろえる。
   そろえないと、PCで見出しのカードだけが細く、下のブロックが画面幅いっぱいに
   広がって、同じページの中で左右の端が2種類できてしまう */
body.top-apple .stage {
  border-radius: 18px; padding: 22px 20px; margin: 16px auto 0; max-width: 680px;
}
body.top-apple .stage-head { margin-bottom: 16px; }
body.top-apple .stage-head h2 { font-size: 20px; margin: 6px 0 6px; line-height: 1.45; }
body.top-apple .stage-lead { margin: 0; font-size: 13px; color: #6b6b73; line-height: 1.75; }
body.top-apple .stage-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  padding: 5px 11px; border-radius: 999px;
}
body.top-apple .stage-try {
  background: linear-gradient(168deg, #f3f8ff 0%, #eef4fe 100%);
  border: 1px solid #dbe7fb;
}
body.top-apple .stage-try .stage-badge { background: #2170e7; color: #fff; }
body.top-apple .stage-long { background: #fff; border: 1px solid #ececf0; }
body.top-apple .stage-long .stage-badge { background: #eef0f4; color: #6b6b73; }
/* 体験が無給であることの但し書き。見落とされると一番困るので枠で囲う */
body.top-apple .stage-note {
  margin: 16px 0 0; padding: 10px 12px; /* 上マージン 14→16px：上の段と同じ間隔にそろえる（2026-09-16） */
  background: rgba(255,255,255,.75); border: 1px solid #dbe7fb; border-radius: 12px /* 10→12px（2026-09-16） */;
  font-size: 13px; color: #55555e; line-height: 1.7; /* 12.5→13px（2026-09-15） */
}

/* 体験1つぶんのカード */
body.top-apple .exp-card {
  background: #fff; border: 1px solid #e4ecf9; border-radius: 18px /* 14→18px：カードの角丸にそろえる（2026-09-16） */;
  padding: 16px; margin-bottom: 12px;
}
body.top-apple .exp-card:last-of-type { margin-bottom: 0; }
body.top-apple .exp-card-title { font-size: 16px; margin: 0 0 8px; line-height: 1.55; }
/* 見出しの文中に置くバッジ。名前の最後の文字のすぐ後ろに続き、
   入りきらないときだけ自然に折り返す */
body.top-apple .exp-card-dur {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 10px; border-radius: 999px;
  background: #fff3d6; color: #8a5b00; white-space: nowrap;
}
body.top-apple .exp-card-desc { margin: 0 0 12px; font-size: 13.5px; color: #55555e; line-height: 1.8; }

/* 当日の流れ。左に縦線を引いて、順に進むことを形で示す */
body.top-apple .exp-flow { list-style: none; margin: 0 0 12px; padding: 0 0 0 14px; position: relative; }
body.top-apple .exp-flow::before {
  content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px;
  width: 2px; background: #dbe7fb;
}
body.top-apple .exp-flow li { position: relative; padding: 5px 0; }
/* 点は行の高さの中心ではなく1行目に合わせる。中心に置くと、
   やることが2行に折れたときだけ点が下がって、行頭がそろわなくなる */
body.top-apple .exp-flow li::before {
  content: ""; position: absolute; left: -14px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: #2170e7;
}
body.top-apple .exp-flow-meta {
  display: block; font-size: 12.5px; font-weight: 800; color: #2170e7; margin-bottom: 1px;  /* 11.5→12→12.5px */
}
body.top-apple .exp-flow-what { font-size: 13.5px; color: #2a2a30; font-weight: 600; line-height: 1.6; }
/* その日の所要時間と体験可能時間帯（2026-08-22）。
   やることより弱く、でも読み飛ばされない程度に。**やることの下に置く。**
   横に並べると「商談・打ち合わせ同行」のような長い項目のときだけ
   時間が次の行に落ちて、どの日の時間なのか読み取れなくなる */
body.top-apple .exp-flow-time {
  display: block; font-size: 12.5px; color: #6d6d75; margin-top: 2px;
}
/* 「具体的な時間は応募後にチャットで」。時間が書いていないことを
   学生が「丸一日拘束」と読まないための一文 */
body.top-apple .exp-time-note {
  margin: 8px 0 0; font-size: 13px; color: #6d6d75; line-height: 1.7; /* 12.5→13px */
}

/* 時間・集合・持ち物 */
body.top-apple .exp-card-facts { margin: 0; border-top: 1px solid #f0f3f8; }
body.top-apple .exp-card-facts > div {
  display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f4f6fa; font-size: 13.5px;
}
/* 88px は「持ち物・服装」（6文字 × 13.5px ≒ 81px）が1行に収まる幅。
   狭いと「持ち物・服 / 装」で折れて、ラベルだけが3行になる */
body.top-apple .exp-card-facts dt { flex: 0 0 88px; color: #6d6d75; }
/* anywhere だと「梅田2-4-／5）」のように番地の途中で折れる。break-word なら
   まず次の行へ送り、それでも入らないときだけ分割する。
   auto-phrase は日本語を文節で折る（対応していないブラウザでは無視される） */
body.top-apple .exp-card-facts dd {
  margin: 0; flex: 1 1 auto; color: #2a2a30;
  /* 【2026-09-21】flex の中身は既定で「中身より狭くならない」（min-width: auto）。
     そのため、長い住所（例：東京都千代田区神田佐久間町4-16パルK2ビル3F）が縮まず、
     **320px の画面で 6〜10px はみ出して横スクロールが出ていた**（本番の募集2件で確認）。
     min-width: 0 にすると縮めるようになり、下の折り返し指定が効く。
     **flex/grid の中で「はみ出す」ときは、まず min-width: 0 を疑うこと。** */
  min-width: 0;
  overflow-wrap: break-word; word-break: auto-phrase;
}

/* 体験カードの中に出す「行ける日」。
   日付・時間・場所・残り枠が離れていると、学生が頭の中で組み立てることになる */
body.top-apple .exp-card-slots { margin-top: 14px; }
body.top-apple .exp-slots-label { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #2170e7; }
body.top-apple .exp-slots-empty { margin: 0; font-size: 12.5px; color: #71717a; line-height: 1.7; }
/* 1日程＝1行。予約サイトと同じ並べ方にする。
   横に詰めると「から2日間」が入った途端に折り返して、日付と残り枠が
   バラバラの行に落ちる。広い画面では2列以上になる */
body.top-apple .slot-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px;
}
body.top-apple .slot-chip {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 14px;
  background: #f5f9ff; border: 1.5px solid #cddffa; border-radius: 12px;
  text-decoration: none; transition: border-color .2s, background .2s;
}
/* 残り枠は右端にそろえる。日付の長さで位置が動くと拾いにくい */
body.top-apple .slot-chip-remain { margin-left: auto; }
body.top-apple .slot-chip-span { font-size: 12px; font-weight: 700; color: #4a5b70; white-space: nowrap; }
/* その日の体験可能時間帯（2026-08-23）。枠ごとに違いうるので日付に添える。
   日付・残り枠より弱く出す。ここが目立つと「時間を選ぶ」と読まれるが、
   実際に選ぶのは日付だけで、時間はチャットで決める */
body.top-apple .slot-chip-time {
  /* 11.5px→12px・#6d7a8c→#5d697a（4.13→約4.9。監査の文字サイズ・コントラスト両対応） */
  font-size: 12px; font-weight: 700; color: #5d697a; white-space: nowrap;
}
body.top-apple .slot-chip:hover { background: #eaf3ff; border-color: #2170e7; }
body.top-apple .slot-chip-date { display: flex; align-items: baseline; gap: 4px; }
body.top-apple .slot-chip-date b { font-size: 17px; font-weight: 900; color: #17324f; letter-spacing: -.01em; }
body.top-apple .slot-chip-week { font-size: 12px; font-weight: 700; color: #627081; }  /* 11.5px→12px・4.15→4.62 */
body.top-apple .slot-chip-remain { font-size: 12px; font-weight: 700; color: #1867df; white-space: nowrap; }  /* 地色 #f5f9ff の上で 4.38→4.63 */
/* 残り1名は「決めるなら今」の材料になるので、色を変えて拾えるようにする */
body.top-apple .slot-chip-remain.is-few { color: #c3410d; }  /* 4.07→4.62 */
body.top-apple .slot-chip.is-applied { background: #f4f4f7; border-color: #e4e4ea; }
body.top-apple .slot-chip.is-applied .slot-chip-date b { color: #6e6e76; }
body.top-apple .slot-chip.is-applied .slot-chip-remain { color: #6e6e76; }

/* 未ログインでも見せる日程（2026-08-04）。
   「行ける日があるか」が分からないまま登録を求めても、誰も登録しない。 */
body.top-apple .slot-preview { margin-bottom: 18px; }
body.top-apple .slot-preview:empty { display: none; }
body.top-apple .slot-preview-label {
  font-size: 12px; font-weight: 700; color: #6b6b73; margin: 0 0 8px;
}
body.top-apple .slot-preview-list { list-style: none; margin: 0; padding: 0; }
body.top-apple .slot-preview-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 6px;
  background: #f7f9fc; border: 1px solid #eef1f7; border-radius: 10px;
  font-size: 14px;
}
body.top-apple .slot-preview-date { font-weight: 700; color: #2a2a30; }
body.top-apple .slot-preview-remain { font-size: 13px; color: #1976d2; }
body.top-apple .slot-preview-more { margin: 2px 0 0; font-size: 12px; color: #71717a; }

/* 行ける日が無いときは、ログインを勧めても意味が無いので手順を畳む */
body.top-apple #apply-login-prompt.is-no-slot .flow-steps,
body.top-apple #apply-login-prompt.is-no-slot .line-login-btn,
body.top-apple #apply-login-prompt.is-no-slot .apply-note { display: none; }

/* 条件表のラベルが2行に折れて読みにくかったので広げる */
body.top-apple .int-facts dt { flex-basis: 128px; }

/* 【2つのバッジは同じ指標で組む】
   .tag の定義は .company-card / .company-detail-card 配下に限定されていて、
   作り直した .int-card には当たっていなかった。そのため職種が素のテキストに
   見え、隣の「◯日から試せる」とも高さが揃わずズレて見えていた。
   font-size・padding・line-height・border-radius を両者で一致させ、
   親で align-items:center を効かせて中心を合わせる。 */
body.top-apple .int-card-tags,
body.top-apple .int-head-tags { align-items: center; }

body.top-apple .int-card-tags .tag,
body.top-apple .int-head-tags .tag,
body.top-apple .int-card-try {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  margin: 0;                 /* .tag は margin-bottom:10px を持つので打ち消す */
  white-space: nowrap;
}
/* 職種の色は既存の色システムを踏襲（tag-1〜5） */
body.top-apple .int-card-tags .tag,
body.top-apple .int-head-tags .tag {
  background: var(--accent-blue-bg); color: var(--accent-blue-text);
}
body.top-apple .int-card-tags .tag.tag-2, body.top-apple .int-head-tags .tag.tag-2 { background: var(--accent-green-bg);  color: #197f53; }
body.top-apple .int-card-tags .tag.tag-3, body.top-apple .int-head-tags .tag.tag-3 { background: var(--accent-purple-bg); color: var(--accent-purple-text); }
body.top-apple .int-card-tags .tag.tag-4, body.top-apple .int-head-tags .tag.tag-4 { background: var(--accent-orange-bg); color: #a65b00; }
body.top-apple .int-card-tags .tag.tag-5, body.top-apple .int-head-tags .tag.tag-5 { background: var(--accent-pink-bg);   color: #cd1a72; }
/* 「その他」と、選択肢に無い職種。色で意味を持たせない */
body.top-apple .int-card-tags .tag.tag-6, body.top-apple .int-head-tags .tag.tag-6 { background: #eef1f5; color: var(--text-light); }

/* ヒーローの上余白（2026-08-04）。
   スマホでヘッダー下から見出しまで約200px空いており、1画面目の1/4が
   空白だった。学生が最初に見る場所なので、本文を上げる。 */
/* （2026-08-04 のスマホHERO上余白の調整は、2026-09-13 のHERO作り直しで
   @media (max-width: 600px) 側に統合したので削除） */

/* 固定ボタンは JS で出し入れする（main.js の setupFabCta）。
   hidden を効かせるため、display を持つ既存指定より優先させる */
body.top-apple .fab-cta[hidden] { display: none !important; }

/* ---- 絵文字をSVGにした分の調整（2026-08-07）--------------------------
   eyebrow は「アイコン＋短い語」の1行。絵文字のときは文字として流れていたが、
   SVGは箱なので、縦位置を合わせるために inline-flex にする。
   gap で間隔を作る（絵文字のあとに書いていた半角スペースは無くなっている）。 */
body.top-apple .ap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* 暗いバンドの中ではアイコンも同じ色にする（currentColor なので指定は不要だが、
   ここは色を上書きしているので、線が細く見えないよう少しだけ太らせる） */
body.top-apple .ap-diag .ap-eyebrow .icon { stroke-width: 2.2; }

/* シートの閉じるボタン。✕の文字からSVGに変えたので、線の太さを合わせる
   （文字の✕は細く見えるが、SVGは標準の2pxだとやや太い） */
body.top-apple .sheet-close .icon { width: 17px; height: 17px; stroke-width: 2.2; }

/* ============================================================
   1行の長さを抑える（2026-08-07）
   ------------------------------------------------------------
   PCでは箱の幅がそのまま行の長さになり、いちばん長いところで
   **1行87文字**あった。日本語は35〜45文字で折り返すのが読みやすい範囲で、
   長すぎると行の終わりから次の行の頭へ目を戻すときに迷子になる。

   単位は em にしてある。文字サイズを変えても「1行あたりの文字数」は
   変わらないので、あとから font-size をいじっても崩れない。
   中央ぞろえの文章は margin-inline:auto で中央のまま。
   ============================================================ */
body.top-apple .sc-lead,
body.top-apple .stage-lead,
body.top-apple .stage-note,
body.top-apple .help-contact-note {
  max-width: 42em;
}
/* 中央ぞろえのリードは、幅を狭めても中央に置く */
body.top-apple .ap-page-hero .ap-lead,
body.top-apple .ap-hero .ap-lead {
  max-width: 42em;
  margin-inline: auto;
}

/* FAQの答えも1行が長くなる（PCで50文字）。読み物なので幅を抑える */
body.top-apple .ap-faq details p { max-width: 42em; }

/* ===== 企業からの掲載問い合わせ（トップ最下部） =====
   読み手はほぼ学生なので、学生向けCTAより下に控えめに置く。
   ただし企業には他に連絡手段が無いので、畳んで隠すことはしない */
.inquiry-form {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: left;
}
.inquiry-row { margin-bottom: 16px; }
.inquiry-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.inq-req, .inq-opt {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px; /* 11→12px（2026-09-17）。どの欄が必須かを示す札なので、小さすぎると先に気づけない */
  font-weight: 700;
  border-radius: 999px;
  vertical-align: 1px;
}
.inq-req { color: #b3261e; background: #fdecea; }
.inq-opt { color: var(--text-light); background: #eef1f6; }
.inquiry-row input,
.inquiry-row textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px; /* 16px未満だと iOS が勝手に拡大する */
  font-family: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  box-sizing: border-box;
}
.inquiry-row textarea { resize: vertical; min-height: 96px; }
.inquiry-row input:focus,
.inquiry-row textarea:focus {
  outline: none;
  border-color: var(--brand, #3b6fe0);
  box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
#inq-submit { width: 100%; margin-top: 4px; }
.inquiry-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-light);
}
.inquiry-status { font-weight: 700; }
.inquiry-status.is-error { color: #b3261e; }
.inquiry-status.is-ok { color: #1a7f5a; }

/* 会社詳細ページ：各項目に添える写真（ビジョン・事業内容・カルチャー） */
.company-profile-pics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.company-profile-pics img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 520px) {
  .company-profile-pics { grid-template-columns: 1fr; }
}

/* ===========================================================
   募集カードの化粧直し（2026-08-09）

   募集の詳細ページを作り直したら、**一覧のカードだけが一世代前**に見えた。
   構造は変えていない（クラス名も並びもそのまま）。
   影・角丸・押したときの反応だけを、詳細ページとそろえている。
   =========================================================== */
body.top-apple .int-card {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 32, 51, .04), 0 6px 18px rgba(20, 32, 51, .05);
  transition: box-shadow .22s cubic-bezier(.2, .8, .2, 1),
              transform .22s cubic-bezier(.2, .8, .2, 1),
              border-color .22s;
}
body.top-apple .int-card:hover {
  border-color: #c9d6f5;
  box-shadow: 0 2px 4px rgba(20, 32, 51, .05), 0 16px 34px rgba(20, 32, 51, .12);
  transform: translateY(-3px);
}
/* 写真をわずかに寄る。**カード全体を大きくしない**（隣とぶつかって列が崩れる） */
body.top-apple .int-card-thumb { overflow: hidden; }
body.top-apple .int-card-thumb img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
body.top-apple .int-card:hover .int-card-thumb img { transform: scale(1.045); }

/* 「◯日から試せる」は詳細ページのヒーローと同じ色にする。
   同じことを言っている札なので、色が違うと別の意味に見える */
body.top-apple .int-card-try {
  background: #fbbf24; color: #422006; font-weight: 800;
}

/* 押している間は沈める。触った手応えが無いと、反応したか分からない */
body.top-apple .int-card:active { transform: translateY(-1px) scale(.995); }

@media (prefers-reduced-motion: reduce) {
  body.top-apple .int-card,
  body.top-apple .int-card:hover,
  body.top-apple .int-card:active { transform: none; transition: box-shadow .2s; }
  body.top-apple .int-card-thumb img,
  body.top-apple .int-card:hover .int-card-thumb img { transform: none; transition: none; }
}

/* ===== 就活イベント（events.html） =====
   2026-09-13：カードは PC 3列・スマホ(≦699px) 2列。1枚が大きくて見づらい（オーナー指摘）ため、
   カードには画像・タイトル・状態・日時・場所・要約だけ。説明・参加条件・日程選択・申込は
   下から出るシート（.event-sheet）に置く。minmax(0,1fr) にしないと長い語で列が広がる */
.events-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.event-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.04);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.event-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 30, 60, 0.10); }
.event-card-img { aspect-ratio: 16 / 9; background: #f0f3f9; }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px 16px; }
.event-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.event-card-title {
  font-size: 16px; font-weight: 900; margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.event-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 8px 0 0; font-size: 13px; color: var(--text-light);
  overflow-wrap: anywhere;
}
.event-card-summary {
  margin: 8px 0 0; font-size: 13.5px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ボタンは下端にそろえる（カードの高さが違っても位置が揃う）。
   ボタンの手前の要素が余りを吸い、ボタン自身の margin-top:14px が最小の間隔になる */
/* body.top-apple を付けないと .ap-btn（padding 15px 32px）に詳細度で負ける */
body.top-apple .event-card .event-open {
  margin-top: 14px; width: 100%; justify-content: center;
  font-size: 14px; padding: 12px 14px; border-radius: 12px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.22);
}
.event-card-body > :nth-last-child(2) { margin-bottom: auto; }
/* 受付終了・申込済みのカード：詳細は見られるが、申し込めるように見せない */
body.top-apple .event-card.is-off .event-open,
body.top-apple .event-card.is-off .event-open:hover {
  background: #eef1f6; color: #55555e; box-shadow: none; transform: none;
}
.event-open-short { display: none; }
@media (max-width: 699px) {
  .events-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .event-card { border-radius: 12px; }
  .event-card-body { padding: 10px 11px 12px; }
  .event-card-title { font-size: 14px; }
  .event-card-meta { font-size: 12px; gap: 2px 8px; }
  .event-card-summary { font-size: 12.5px; }
  .event-badge { font-size: 11px; padding: 2px 8px; }
  /* 札をタイトルの上へ（2026-09-17）。横に並べると 170px のカードでタイトルが半分に削られ、
     「ジョブハ／ント」「ウィクオーディ…」と折れていた */
  .event-card-head { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
  .event-card-head > .event-card-title { align-self: stretch; }
  body.top-apple .event-card .event-open { font-size: 13px; padding: 10px 8px; border-radius: 10px; }
  .event-open-long { display: none; }
  .event-open-short { display: inline; }
}

/* シートの中身（イベントの詳細＋申込） */
.event-sheet-img { aspect-ratio: 16 / 7; border-radius: 12px; overflow: hidden; background: #f0f3f9; margin-bottom: 14px; }
.event-sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-sheet-title { font-size: 21px; font-weight: 900; margin: 0; line-height: 1.35; letter-spacing: -.01em; }
.event-sheet .event-card-meta { font-size: 14px; gap: 6px 16px; margin-top: 10px; }
/* 2026-09-22：短い説明は「リード文」として少し大きく・濃く出す（詳細との差をつける） */
.event-sheet .event-card-summary {
  margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: #2b2b33; font-weight: 600;
  display: block; -webkit-line-clamp: unset;
}
/* 2026-09-22：**詳細を「文字の塊」で出すのをやめた。**
   運営の原稿は「◆イベント内容◆」「【アクセス】」「①…」の形が多いので、
   見出し・段落・箇条書きに組み立て直して読ませる（events-page.js の descriptionHtml） */
.event-card-desc { margin: 14px 0 0; font-size: 14.5px; color: #3a3a42; line-height: 1.85; }
.event-card-desc > *:first-child { margin-top: 0; }
.event-card-desc h4 {
  margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: #9a4a00; display: flex; align-items: center; gap: 8px;
}
.event-card-desc h4::after { content: ""; flex: 1; height: 1px; background: #f0e2d2; }
.event-card-desc p { margin: 0 0 10px; }
.event-card-desc ul { margin: 0 0 12px; padding: 0; list-style: none; }
.event-card-desc li {
  position: relative; margin: 0 0 6px; padding-left: 18px;
}
.event-card-desc li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: #f0a04b;
}
.event-card-desc a { color: #b45309; overflow-wrap: anywhere; }
.event-sheet .event-apply { margin-top: 18px; width: 100%; }
/* 押せないボタンは色を落とす（オレンジのままだと押せそうに見える。2026-09-16） */
body.top-apple .event-sheet .event-apply[disabled],
body.top-apple .event-sheet .event-apply[disabled]:hover {
  background: #eef1f6; color: #6b7280; box-shadow: none; transform: none; cursor: default;
}

/* 2026-09-15：画像が無いカードの日付タイル・参加条件の札・終了カードを薄く */
.event-card-date {
  display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 18px 12px; background: linear-gradient(135deg, #fff3e6, #ffe3c2);
  color: #9a4a00; line-height: 1;
}
.event-card-date b { font-size: 30px; font-weight: 900; letter-spacing: -0.5px; }
.event-card-date span { font-size: 14px; font-weight: 800; }
.event-card-date small { flex-basis: 100%; text-align: center; font-size: 11.5px; font-weight: 700; margin-top: 6px; opacity: .85; }
.event-card-date.is-tbd { background: #f0f3f9; color: #6b7280; }
.event-card-date.is-tbd b { font-size: 15px; }
/* 2026-09-21：**カード全体を薄くすると文字のコントラストが基準（4.5:1）を割る。**
   終わった感は地の色で出し、文字は薄くしない */
.event-card.is-off { background: #f7f8fa; }
.event-card.is-off .event-card-img,
.event-card.is-off .event-card-date { opacity: .75; }
.event-card.is-off .event-card-date { filter: grayscale(1); opacity: .7; }
.event-card-reqtag { font-size: 12px; font-weight: 800; color: #b26a00; }
@media (max-width: 699px) {
  .event-card-date { padding: 12px 8px; }
  .event-card-date b { font-size: 22px; }
  .event-card-date span { font-size: 12px; }
}

/* 2026-09-15：イベント一覧は見出し直下からカードを始める（ヒーローと一覧の間が 100px 以上空いていた） */
body.events-orange .ap-page-hero + .ap-section { padding-top: clamp(12px, 2.5vw, 28px); }

/* 2026-09-16：参加条件は箇条書き・会場は名前と住所を分けて地図リンクを付ける */
.event-card-req ul { margin: 0; padding-left: 1.2em; }
.event-card-req li { margin: 2px 0; }
/* 2026-09-22：参加条件は無くても「特になし」を出す（置き場所を決めておくと、
   詳細のほうに「学歴セグメント…」のような直接的な言い方が書かれずに済む） */
.event-req-none { margin: 0; font-size: 13.5px; color: #55555e; }
.event-sheet .event-card-req {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: #fffaf3; border: 1px solid #f4e3cd;
}
.event-venue {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 10px;
  background: #f4f7fb; border: 1px solid #e3e8f0; font-size: 14px;
}
.event-venue-label { display: block; font-size: 12px; font-weight: 800; color: #55555e; margin-bottom: 4px; }
.event-venue p { margin: 0; line-height: 1.7; }
.event-venue-addr { font-size: 13.5px; color: var(--text-light); }
.event-venue small { font-size: 12.5px; color: var(--text-light); }
/* 2026-09-21：押すものは 44px（このリポジトリの基準。40px では届かない） */
.event-venue-map {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 6px 14px;
  border: 1px solid #dcdce4; border-radius: 999px; background: #fff;
  font-size: 12.5px; font-weight: 700; color: #55555e; text-decoration: none;
}
.event-venue-map:hover { border-color: var(--accent, #f5901e); color: var(--accent, #f5901e); }

/* 2026-09-16：募集を終えたイベント（申込済みの人にだけ見えている） */
.event-unpublished {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
  background: #f4f5f8; border: 1px solid #e3e6ea; color: #55555e; font-size: 13.5px;
}

/* 2026-09-15：申込済みのときの次の一手（シートの中） */
.event-after { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f4f7fb; border: 1px solid #e3e8f0; }
.event-after-lead { margin: 0 0 10px; font-size: 13px; color: #55555e; }
.event-after-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.event-after-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--accent, #f5901e); background: #fff;
  color: var(--accent, #f5901e); font-size: 13px; font-weight: 800; text-decoration: none;
}
.event-after-btn.is-sub { border-color: #dcdce4; color: #55555e; }

/* 2026-09-15：マイページの申込イベントに「詳細を見る」「カレンダーに追加」 */
.mypage-app-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.mypage-app-links a { color: var(--accent, #f5901e); font-weight: 700; text-decoration: none; }
.mypage-app-links a:hover { text-decoration: underline; }

/* 2026-09-15：締切の札・小見出し（日時未定／受付終了）・リンクをコピー */
.event-card-deadline { font-weight: 700; color: #55555e; }
.event-card-deadline.is-soon { color: #c2410c; }
.events-group-head {
  grid-column: 1 / -1; margin: 18px 0 0; font-size: 14px; font-weight: 800; color: var(--text-light);
  padding-top: 14px; border-top: 1px solid #e6e9f0;
}
.events-group-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 2026-09-22：「リンクをコピー」だけだったのを、**友だちに送れる形**にした。
   スマホでは端末の共有シート（LINE でも SNS でも選べる）を先頭に出す */
.event-share-box {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid #eceff4;
}
.event-share-title {
  display: block; font-size: 12px; font-weight: 800; color: #6b7280;
  letter-spacing: .04em; margin-bottom: 10px;
}
.event-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.event-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid #dcdce4; border-radius: 999px; background: #fff; color: #3a3a42;
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.event-share:hover { border-color: #b8b8c4; color: #1a1a1f; }
.event-share.is-native { background: #b45309; border-color: #b45309; color: #fff; }
.event-share.is-native:hover { background: #9a4607; color: #fff; }
.event-share.is-line { border-color: #c7e7cd; color: #157b3a; background: #f2fbf4; }
.event-share.is-line:hover { border-color: #9ad6ab; color: #0f5c2b; }
.event-share.is-x { border-color: #d7d7dd; color: #1a1a1f; background: #fafafb; }
@media (max-width: 480px) {
  .event-share { flex: 1 1 calc(50% - 8px); padding: 0 10px; font-size: 12.5px; }
  .event-share.is-native { flex-basis: 100%; }
}
.event-badge {
  flex: none; padding: 3px 10px; font-size: 12px; font-weight: 800;
  border-radius: 999px; white-space: nowrap;
}
.event-badge.is-done { color: #1a7f5a; background: #e6f7ee; }
.event-badge.is-closed { color: var(--text-light); background: #eef1f6; }
.event-badge.is-few { color: #b26a00; background: #fff2df; }
.event-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1f2a44; color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  /* 2026-09-21：**シート（z-index 80）と暗幕（70）より上に出す。**
     申込の結果（満席・締切・エラー・取り消し）はすべてシートの中から出るので、
     50 のままだと学生は一度も読めなかった */
  z-index: 90; max-width: 90vw; text-align: center;
}

/* ヘッダーの「就活イベント」ボタン（マイページ/ログインの隣）。
   site-nav.js が全ページに注入する。角丸のゴースト調で、CTAより控えめに。 */
/* 「就活イベント」への入口ボタン。イベント＝オレンジで統一するため、
   どのページでも（青基調のページでも）オレンジで固定する。 */
body.top-apple .ap-nav-events {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font-size: clamp(12px, 3.2vw, 13px);
  font-weight: 700;
  /* #e8730c は白地で 3.05:1 しかなく、13pxの文字には薄すぎた（要4.5）。
     イベント基調の濃い側 #b45309（約5.3:1）に揃える */
  color: #b45309;
  background: transparent;
  border: 1.5px solid #b45309;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
body.top-apple .ap-nav-events:hover {
  background: #b45309;
  color: #fff;
}
/* 「長期インターン」への入口ボタン（イベントページに出す）。
   長期インターン＝青で固定。イベントページは events-orange で --accent が
   オレンジなので、変数ではなく青を直接指定する。 */
body.top-apple .ap-nav-internship {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font-size: clamp(12px, 3.2vw, 13px);
  font-weight: 700;
  color: #176dc1;
  background: transparent;
  border: 1.5px solid #176dc1;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
body.top-apple .ap-nav-internship:hover {
  background: #176dc1;
  color: #fff;
}
@media (max-width: 380px) {
  body.top-apple .ap-nav-internship { padding: 8px 10px; }
}
/* いちばん狭い端末では [就活イベント][マイページ][≡] が詰まるので、間隔と余白を締める */
@media (max-width: 380px) {
  body.top-apple .ap-nav { gap: 8px; }
  body.top-apple .ap-nav-events { padding: 8px 10px; }
  body.top-apple .ap-nav-cta { padding: 8px 12px; }
}

/* ============================================================
   就活イベントのページだけオレンジ基調にする（2026-08-11）
   body.events-orange の配下で、青のブランド変数をオレンジに上書きする。
   他ページ（body に events-orange が付かない）は青のまま。
   直書きの青が混ざる箇所は、このページで使うクラスだけ個別に上書きする。
   ============================================================ */
body.top-apple.events-orange {
  /* 【2026-09-20 濃い側にそろえた】--primary を #e8730c にしていたが、実測すると
     ・白抜きの文字（ログイン・「もう一度読み込む」）が 3.05:1
     ・淡い地の上のオレンジ文字（見出しの小札・フッターのリンク）が 2.72〜2.8:1
     で、どれも 4.5:1 に届いていなかった（13px前後の文字なので大文字扱いにもならない）。
     同じファイルの .ap-nav-events では、同じ理由ですでに #b45309 に直してある。
     **文字とボタンの色は #b45309（白抜きで約5.3:1）にそろえ、飾り（影・下線の帯）だけ
     明るいオレンジのまま**にする。イベント＝オレンジという見え方は保てる。 */
  --primary: #b45309;
  --primary-dark: #8f4108;
  --primary-light: #fff1e0;
  --accent: #b45309;
}
/* 見出し帯のにじみだけ青のまま直書きされていて、オレンジの小札が青地に乗っていた
   （#b45309 × #eaf3ff で 4.49:1。基準 4.5 にわずかに届かない）。オレンジ側の淡色にそろえる */
body.top-apple.events-orange .ap-page-hero {
  background:
    radial-gradient(900px 380px at 50% -120px, #fff1e0 0%, rgba(255, 255, 255, 0) 70%),
    #fff;
}
/* CTA/ボタンの影は青のrgbaが直書きなのでオレンジに差し替え（通常時・hover両方） */
body.top-apple.events-orange .ap-btn-primary {
  box-shadow: 0 10px 26px rgba(232, 115, 12, 0.32);
}
body.top-apple.events-orange .ap-btn-primary:hover,
body.top-apple.events-orange .ap-nav-cta:hover {
  box-shadow: 0 6px 16px rgba(232, 115, 12, 0.35);
}
/* 見出しハイライトはオレンジに合う淡い橙にする（既定の黄でも可だが揃える） */
body.top-apple.events-orange .ap-marker {
  background: linear-gradient(transparent 62%, #ffd9a8 62%);
}
/* ヘッダーの「就活イベント」ボタン（このページでは非表示だが保険で色を合わせる）。
   小さい文字なので薄いオレンジではなく濃い側を使う（コントラスト4.5確保） */
body.top-apple.events-orange .ap-nav-events {
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* イベントのチェックイン着地ページ */
.checkin-box { text-align: center; padding: 32px 20px; }
.checkin-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; color: #fff; background: #9aa4b2;
}
.checkin-ok .checkin-icon { background: #1a7f5a; }
.checkin-error .checkin-icon { background: #d93025; }
.checkin-title { font-size: 22px; font-weight: 900; margin: 0 0 8px; }
.checkin-desc { color: var(--text-light, #667); line-height: 1.7; }

/* ===== 診断の結果ゲート（2026-08-12） =====
   20問のあと、LINE登録とプロフィール5項目がそろうまで結果を見せない。
   質問の前ではなく後に置くのは、答え終えた人のほうが登録まで進みやすいため */
.diag-gate {
  background: var(--white, #fff);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 6px 24px rgba(29, 42, 68, 0.08));
  padding: 28px 22px;
  max-width: 480px;
  margin: 24px auto;
  text-align: center;
}
.diag-gate-title { font-size: 18px; font-weight: 900; margin: 0 0 10px; color: var(--primary-dark, #16418a); }
.diag-gate-text { font-size: 14px; color: var(--text-light, #556); margin: 0 0 18px; line-height: 1.8; }
.diag-gate .btn-primary { display: inline-block; }
.diag-gate-form { text-align: left; margin-top: 6px; }
.diag-gate-form .form-group { margin-bottom: 14px; }
.diag-gate-form .btn-primary { width: 100%; margin-top: 4px; }

/* ===== トップの募集カルーセル（2026-08-28 オーナー指示） =====
   以前は最大4件の縦グリッド。掲載が増えるとトップが縦に伸びる一方なので、
   横一列＋左右の矢印で1枚ずつ送る形にした（タイミーの事例欄と同じ見せ方）。
   端の無い無限ループ（詳細は js/main.js の setupCompanyCarousel）。
   送りはブラウザの横スクロール（scroll-snap）で、スマホは指のスワイプでも送れる。
   【2026-08-30 オーナー指示】「真ん中に1枚＋左右に隣が覗く」中央スナップに変更。
   【2026-09-01 オーナー指示】PCは帯を820pxに絞っていたのをやめ、
   セクション幅いっぱい（ap-container=1040px）に戻した。上下のセクションより
   帯が細いと左右に不自然な空きが見え、1枚しか出ない縛りも不要とのこと。
   中央スナップは残しているので、止まると必ず1枚が真ん中＋両端に対称の覗きが出る */
body.top-apple .company-carousel {
  position: relative;
  /* セクション（.ap-section）の左右padding 20px を打ち消して画面端まで広げる。
     100vw で広げるとスクロールバー幅ぶん横スクロールが出るので負のマージンで。
     コンテナの外に出したので上の見出しとの間隔はここで持つ */
  margin-inline: -20px;
  margin-top: clamp(26px, 4vw, 40px);
}
/* ===== トップの募集は2列（2026-09-17 オーナー指示） =====
   「新着のインターン募集」「積極採用中のインターン募集」。大きな見出し（ap-h2）と説明文はやめ、
   列ごとに小さな見出しを左に置く（読み物は左ぞろえ・第16回の決め）。
   見出しの青い縦棒は募集詳細の .cd-h2 と同じ形。
   見出しとカードの間は詰め、列と列の間は広めに取って「別の並び」だと分かるようにする */
body.top-apple .cc-row + .cc-row { margin-top: clamp(36px, 5vw, 56px); }
body.top-apple .cc-row-head { text-align: left; }
body.top-apple .cc-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(18px, 4.8vw, 23px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--ink, #1d1d1f);
}
body.top-apple .cc-row-title::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--primary, #176dc1);
}
body.top-apple .cc-row .company-carousel { margin-top: clamp(14px, 2vw, 20px); }

body.top-apple .cc-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* ホバーで浮くカードの影が overflow の箱に切られないよう上下に余白を取り、
     周囲のレイアウトへの影響は負のマージンで打ち消す。
     【横は取らない（2026-09-02）】全幅化で箱が画面ぴったりになったため、
     横の負のマージンは画面外へ4px突き出て横スクロールを生む。
     端のカードの影は mask のフェードに溶けるので、横のよけは要らない */
  padding: 8px 0 24px;
  margin: -8px 0 -24px;
  /* スクロールバーは出さない。送れることは端に覗く次のカードと矢印で伝える */
  scrollbar-width: none;
}
body.top-apple .cc-track::-webkit-scrollbar { display: none; }
/* 画面の端は溶かす（パレードと同じ。切り口のカードを硬く見せない）。
   【mask ではなく白グラデーションの重ね置きで】track に mask を掛けると
   ブラウザが合成スクロールを諦め、横に送るたびに帯全体（カード20枚＋写真）を
   描き直すので目に見えて重かった（2026-09-09 オーナー報告）。
   ページの背景が単色 #fff だから、白→透明を上に重ねれば見た目は同じ。
   背景に色や柄を敷くときはこのグラデーションも合わせて変えること。
   z-index は 1（カードの上・矢印 z-index:2 の下） */
body.top-apple .company-carousel::before,
body.top-apple .company-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6%;
  z-index: 1;
  pointer-events: none;
}
body.top-apple .company-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}
body.top-apple .company-carousel::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}
/* 送りが無いときは端で切れるカードも無いので、溶かし自体を消す */
body.top-apple .company-carousel.cc-no-scroll::before,
body.top-apple .company-carousel.cc-no-scroll::after { display: none; }
/* カード幅はPCで320px（一覧カードと同じ）、狭い画面では78%。
   中央スナップなので、PCは中央の1枚を挟んで左右対称に並び
   （1040px幅なら約3枚＋両端に次の覗き）、スマホは1枚＋左右の覗きになる。
   スナップ位置の計算は main.js が scroll-snap-align を読んで合わせるので、
   start に戻すときも CSS を変えるだけでよい */
body.top-apple .cc-track .int-card {
  flex: 0 0 min(320px, 78%);
  scroll-snap-align: center;
}
body.top-apple .cc-track .empty-note { width: 100%; }
/* 全カードが収まって送る先が無いとき（cc-no-scroll は main.js が付ける）は
   矢印を消し、少ない枚数でも左に寄って見えないよう中央へ寄せる */
body.top-apple .company-carousel.cc-no-scroll .cc-track { justify-content: center; }
body.top-apple .company-carousel.cc-no-scroll .cc-arrow { display: none; }

body.top-apple .cc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #1f1f26;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(10, 20, 50, .28);
  transition: opacity .18s, background .18s;
}
body.top-apple .cc-arrow svg { width: 20px; height: 20px; }
body.top-apple .cc-arrow:hover { background: var(--ap-blue, #1976d2); }
body.top-apple .cc-arrow-prev { left: 20px; }
body.top-apple .cc-arrow-next { right: 20px; }
/* 端で矢印を消す指定は無し。無限ループ（main.js がカードの写しを両端に足して
   置き直す）なので、どちらの矢印もいつでも押せる */
@media (max-width: 700px) {
  /* 38pxではタップ領域の下限44に届かず監査に引っかかった */
  body.top-apple .cc-arrow { width: 44px; height: 44px; }
  body.top-apple .cc-arrow svg { width: 18px; height: 18px; }
  body.top-apple .cc-arrow-prev { left: 8px; }
  body.top-apple .cc-arrow-next { right: 8px; }
}

/* ===== 一覧ページ：スマホは2列（2026-08-28 オーナー指示） =====
   1列だとカード1枚が1画面近くを占め、比べながら選べなかった。
   トップ（カルーセル）と診断のマッチ欄には効かせない。
   699px 以下＝元の auto-fit が1列に落ちる幅（320×2+gap16=656px）を丸ごとカバー */
@media (max-width: 699px) {
  body.top-apple .companies-list-section .company-grid-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* 「募集がありません」「読み込み中」の文は2列に割らず全幅で */
  body.top-apple .companies-list-section .empty-note { grid-column: 1 / -1; }
}
/* 2列のままカードが約150〜190pxまで細るスマホ実機の幅。中身を一段縮める。
   タイトルの3行固定（min-height）は 700px 以上にしか効いていないのでここでは触らない */
@media (max-width: 520px) {
  body.top-apple .companies-list-section .int-card { border-radius: 18px; } /* 12→18px（2026-09-16） */
  body.top-apple .companies-list-section .int-card-thumb { aspect-ratio: 16 / 10; }
  body.top-apple .companies-list-section .int-card-thumb--logo .int-card-thumb-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 19px;
  }
  body.top-apple .companies-list-section .int-card-body { padding: 10px 11px; }
  body.top-apple .companies-list-section .int-card-tags { gap: 4px; margin-bottom: 6px; }
  /* 縮めるのは余白まで。文字は12pxを下限にする（監査のtinyText基準） */
  body.top-apple .companies-list-section .int-card .tag,
  body.top-apple .companies-list-section .int-card-try { font-size: 12px; padding: 2px 8px; }
  body.top-apple .companies-list-section .int-card-title {
    font-size: 13.5px;
    line-height: 1.4;
    margin-bottom: 6px;
    /* 2列（幅170px）では3行で「…」になり、肝心の職種が消える募集があった
       （「提案・改善・…」）。PCの3行はオーナー決定のままで、狭い幅だけ4行まで見せる（2026-09-15） */
    -webkit-line-clamp: 4;
  }
  body.top-apple .companies-list-section .int-card-by { gap: 5px; margin-bottom: 8px; }
  body.top-apple .companies-list-section .int-card-logo { width: 20px; height: 20px; border-radius: 5px; }
  body.top-apple .companies-list-section .int-card-logo-fallback { font-size: 12px; }
  body.top-apple .companies-list-section .int-card-company { font-size: 12.5px; } /* 12→12.5px（2026-09-15） */
  body.top-apple .companies-list-section .int-card-try-facts {
    gap: 4px;
    margin-bottom: 8px;
    font-size: 12px;
  }
  body.top-apple .companies-list-section .int-card-try-facts svg { width: 12px; height: 12px; }
  body.top-apple .companies-list-section .int-card-long {
    font-size: 12.5px /* 12→12.5px（2026-09-15） */;
    padding-top: 8px;
    margin-bottom: 8px;
  }
  /* 「長期になったら 完全成果報酬・週3日から」が1行に入らず「完全成／果報酬」と
     語の途中で折れていた（実機幅170px）。ラベルを1行目に置き、値は2行目から */
  body.top-apple .companies-list-section .int-card-long {
    line-height: 1.5;
  }
  body.top-apple .companies-list-section .int-card-long-label {
    display: block;
    width: max-content;
    font-size: 12px;
    padding: 1px 5px;
    margin: 0 0 4px;
  }
  body.top-apple .companies-list-section .int-card-foot { padding-top: 8px; }
  body.top-apple .companies-list-section .int-card-more { font-size: 13px; } /* 12→13px（押す文字なので大きめ） */
}

/* ===== 就活イベント：参加条件と日程（枠）の選択（2026-09-11） =====
   複数日程のイベントは、学生がどれか1つの日程を選んで申し込む。
   色は body.events-orange の --accent（オレンジ）に乗る */
.event-card-req {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
  background: #fff7ef; border: 1px solid #ffe2c4; font-size: 14px;
}
.event-card-req-label { display: block; font-size: 12px; font-weight: 800; color: #b26a00; margin-bottom: 4px; }
.event-card-req p { margin: 0; white-space: pre-wrap; }
.event-sessions { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.event-sessions legend { font-size: 13px; font-weight: 800; padding: 0; margin-bottom: 6px; }
.event-session {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid #e3e8f0; border-radius: 10px; background: #fff;
  font-size: 14px; cursor: pointer;
}
.event-session input { margin: 0; flex: none; accent-color: var(--accent, #f5901e); }
.event-session-when { flex: 1 1 auto; font-weight: 700; }
.event-session:has(input:checked) { border-color: var(--accent, #f5901e); background: #fff7ef; }
.event-session.is-closed { color: var(--text-light); background: #f7f8fb; cursor: default; }
.event-session.is-closed .event-session-when { font-weight: 500; }
.event-session-state {
  flex: none; padding: 2px 8px; font-size: 11.5px; font-weight: 800;
  border-radius: 999px; background: #eef1f6; color: var(--text-light);
}
.event-session-state.is-done { color: #1a7f5a; background: #e6f7ee; }
.event-session-state.is-few { color: #b26a00; background: #fff2df; }
.event-session-state.is-closed { color: var(--text-light); background: #eef1f6; }

/* ---- 読み込み時のレイアウトずれ対策（2026-09-15） ----
   スマホでトップの CLS が 0.49 あった（良好の目安は 0.1 未満）。原因は2つ：
   ①募集カルーセルが「読み込み中…」(84px) からカード(約460px) に化けて下が一気に動く
   ②条件バーが JS で値ボタンに置き換わるとき数px 高さが変わる
   ①はトラックにカード1枚ぶんの高さを先に確保、②は欄と select の高さを固定する */
body.top-apple .cc-track {
  min-height: 462px;
}
@media (max-width: 600px) {
  body.top-apple .cc-track {
    min-height: 455px;
  }
}
body.top-apple .ap-search-field {
  min-height: 48px;
}
body.top-apple .ap-search-field select {
  min-height: 44px;
}
/* 一覧ページ・募集ページも、データが来る前に高さを確保してフッターが跳ねないようにする（CLS 0.23 / 0.12 → 0 近く） */
body.top-apple .companies-list-section {
  min-height: 90vh;
}
body.top-apple #company-detail-body {
  min-height: 100vh;
}

/* ===== 一覧ページ：スマホは1列（2026-09-15 オーナー指示） =====
   2026-08-28 から2列にしていたが、幅170pxではタイトルが4行に折れ、写真も小さく、
   「どんな仕事か」が読み取りにくかった（オーナー指摘「1列に1募集で、1画面に2募集くらい」）。
   1列にして写真を 2:1 で大きく出し、本文は詰めて、1画面に約2件が入る高さ（約410px）にする。
   ≦520px 用の縮小指定（2列で細ったカード向け）はここで打ち消す。 */
@media (max-width: 699px) {
  body.top-apple .companies-list-section .company-grid-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body.top-apple .companies-list-section .int-card {
    border-radius: 18px; /* 16→18px：サイトのカードの角丸にそろえる（2026-09-16） */
  }
  /* 写真は 16:7 の細い帯から 2:1 へ。掲載写真の実寸に近く、拡大も切り取りも少ない */
  body.top-apple .companies-list-section .int-card-thumb {
    aspect-ratio: 2 / 1;
  }
  body.top-apple .companies-list-section .int-card-thumb--logo .int-card-thumb-mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-size: 26px;
  }
  body.top-apple .companies-list-section .int-card-body {
    padding: 13px 15px;
  }
  /* カードの中の段はすべて 8px。直す前は 7/7/7/8/9px とばらついていた（2026-09-16 実測） */
  body.top-apple .companies-list-section .int-card-tags {
    gap: 6px;
    margin-bottom: 8px;
  }
  body.top-apple .companies-list-section .int-card .tag,
  body.top-apple .companies-list-section .int-card-try {
    font-size: 12px;
    padding: 3px 10px;
  }
  /* 幅が戻ったのでタイトルも本来の大きさに（2列のときは 13.5px まで縮めていた）。
     2行で切る：1画面に2件を収めるため、3行目以降は詳細ページに任せる */
  body.top-apple .companies-list-section .int-card-title {
    font-size: 16.5px;
    line-height: 1.45;
    margin-bottom: 8px;
    -webkit-line-clamp: 2;
  }
  body.top-apple .companies-list-section .int-card-by {
    gap: 7px;
    margin-bottom: 8px;
  }
  body.top-apple .companies-list-section .int-card-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }
  body.top-apple .companies-list-section .int-card-company {
    font-size: 13px;
  }
  body.top-apple .companies-list-section .int-card-try-facts {
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
  }
  /* 「長期になったら」は幅が戻ったので1行に戻す（2列のときだけ2段にしていた）。
     折り返した2行目が札の下にもぐり込まないよう、札と文を2つの段にする
     （flex の中の裸の文字はひとつのまとまりとして扱われ、段の中で折り返す） */
  body.top-apple .companies-list-section .int-card-long {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* 「くわしく見る」の行を外したので、この段がカードの最後になる。
       下マージンを残すと、カード下端の余白だけ 11+9=20px になり上（13px）と揃わない */
    margin-bottom: 0;
    padding-top: 10px;
    font-size: 13px;
    line-height: 1.5;
  }
  body.top-apple .companies-list-section .int-card-long-label {
    flex: none;
  }
  body.top-apple .companies-list-section .int-card-long-label {
    display: inline-block;
    width: auto;
    margin: 0 7px 0 0;
    padding: 2px 7px;
    font-size: 12px;
  }
  body.top-apple .companies-list-section .int-card-foot {
    padding-top: 0;
  }
  body.top-apple .companies-list-section .int-card-more {
    font-size: 13.5px;
  }
}

/* 下層ページの見出し帯（一覧・診断・ヘルプ・ログイン）。
   しるし→見出しが 14px、見出し→説明が 12px とずれていたので、12px にそろえる（2026-09-16） */
body.top-apple .ap-page-hero .ap-eyebrow {
  margin-bottom: 12px;
}

/* ============================================================
   本文は左にそろえる（スマホ・2026-09-17）
   ------------------------------------------------------------
   計測したら、トップだけで **11か所** の本文が中央ぞろえのまま
   2〜3行に折り返していた（390px）。日本語の複数行を中央にそろえると
   行の頭が毎行ずれ、読み終えた目が次の行の頭を探し直すことになる。
   見出しのように短い語は中央のままでよい。読ませる文だけ左にそろえる。
   .nb（文節ごとの折り返し）はそのまま効くので、行の切れ目は今までどおり。
   ============================================================ */
@media (max-width: 699px) {
  /* 見出しも左に寄せる。中央ぞろえの見出しの下に左ぞろえの本文が来ると、
     どちらの端を基準に読めばよいのか分からなくなる。
     オーナーの参考サイト（左にコピー・右に写真）と同じ、左の1本の線にそろえる。
     ボタンと、締めの一枚絵（最後のCTA）だけは中央のまま。 */
  body.top-apple .ap-section .ap-center,
  body.top-apple .ap-diag-head,
  /* 一覧・ヘルプの見出し帯も同じ左の線にそろえる。
     ログイン(.login-hero)は「やることが1つだけの画面」なので中央のまま */
  body.top-apple .ap-page-hero:not(.login-hero) {
    text-align: left;
  }
  body.top-apple .companies-more,
  body.top-apple .ap-diag-cta,
  body.top-apple .ap-center .ap-btn,
  body.top-apple .ap-center .btn-primary {
    text-align: center;
  }
  body.top-apple .ap-center .ap-lead,
  body.top-apple .ap-diag-head .ap-lead,
  body.top-apple .ap-hero .ap-lead,
  body.top-apple .ap-page-hero:not(.login-hero) .ap-lead,
  body.top-apple .sc-lead,
  body.top-apple .ap-bridge-path p,
  body.top-apple .help-contact-note,
  body.top-apple .companies-page-count {
    text-align: left;
  }
  /* 最後のCTAだけは締めの一枚絵として中央のまま残す */
  body.top-apple .ap-final .ap-lead {
    text-align: center;
  }
}

/* 一覧カードの「長期になったら…」の行間 1.5→1.7（2026-09-17）。
   ここだけ他の本文（1.7〜1.85）より詰まっていて、2行になると団子に見えた */
@media (max-width: 699px) {
  body.top-apple .companies-list-section .int-card-long {
    line-height: 1.7;
  }
}

/* 0件のときの「条件をすべて外す」（2026-09-17）。
   0件の案内のすぐ下に置く。ここが、絞り込みから抜ける唯一わかりやすい入口になる */
body.top-apple .empty-note-act {
  margin: 14px 0 0;
  text-align: center;
}
/* 白地の上の輪郭ボタン。
   .ap-btn-light は濃紺の帯の上で使うもの（文字が白）で、白地に置くと文字が見えない */
body.top-apple .ap-btn-outline {
  background: #fff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px rgba(23, 109, 193, 0.45);
}
body.top-apple .ap-btn-outline:hover {
  background: #f3f8ff;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* 2026-09-17：下書きのプレビュー（運営・自社の会社が直リンクで開いたとき） */
.event-preview-note {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
  background: #fff2df; border: 1px solid #f3d3a4; color: #7a4a00; font-size: 13.5px;
}
.event-preview-note b { margin-right: 4px; }

/* 2026-09-20：申込の取り消し（学生が自分で。前日23:59まで） */
.event-cancel { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e6e9f0; }
.event-cancel-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid #dcdce4; background: #fff;
  color: #55555e; font-size: 13px; font-weight: 700; cursor: pointer;
}
.event-cancel-btn:hover { border-color: #c2410c; color: #c2410c; }
.event-cancel-btn:disabled { opacity: .6; cursor: default; }
.event-cancel-note { display: block; margin-top: 6px; font-size: 12px; color: var(--text-light, #55555e); }

/* 2026-09-20：参加URLと登録の手順（申し込んだ人だけに出る） */
.event-join { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #f4f8ff; border: 1px solid #dbe6fb; }
.event-join-label { display: block; font-size: 12px; font-weight: 800; color: #1a4f9c; margin-bottom: 6px; }
.event-join-url { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: #1a4f9c; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.event-join-raw { display: block; margin-top: 6px; font-size: 12.5px; color: #55555e; word-break: break-all; }
.event-join-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.mypage-join { color: #1a4f9c; word-break: break-all; }
.mypage-join a { color: #1a4f9c; font-weight: 700; }

/* 2026-09-20：対象卒年の札 */
.event-badge.is-grad { background: #eef3ff; color: #1a4f9c; }

/* ===== マイページの保存バー（2026-09-22・オーナー指示）=====
   「保存するボタンが独立していなくて分かりづらい」「保存された感じがしない」。
   ・**画面下に貼り付ける**（sticky）。11項目あるフォームで、上のほうを直したあとに
     下まで送らないと保存できないのが面倒だった。details を閉じていれば描画されない
   ・保存の合図は**チェックを描く**。応募完了（company-detail.css の apply-done-check）と
     同じ描き方にそろえてある。サイトの中で「終わった合図」の見え方を1つにするため
   ・状態の名前（is-saving / is-saved）は管理画面（admin.css）と同じものを使う */
.mypage-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 22px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e3ecf7;
  /* 下から上へ薄くする。バーの上にある入力欄が透けて「まだ続きがある」と分かる */
  background: linear-gradient(to top, rgba(255, 255, 255, .98) 72%, rgba(255, 255, 255, .88));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 未保存のときだけ出す。押し忘れて画面を離れるのを防ぐ */
.mypage-savebar-dirty {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #c2410c;          /* 薄地の #e65100 は 3.46:1 で足りない（9/15 に全部そろえた） */
  text-align: center;
}
.mypage-savebar-dirty[hidden] { display: none; }
.mypage-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}
.mypage-save-status {
  margin: 8px 0 0;
  min-height: 1.2em;       /* 文字が出たときに下がずれない */
  color: var(--primary-dark, #16418a);
  font-size: clamp(12px, 3.33vw, 13px);
  text-align: center;
}
.mypage-save-status.is-error { color: #c2410c; }

/* チェックは保存が終わるまで場所を取らない（width 0 → 22px で押し出す） */
.mypage-save-check {
  width: 0;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: width 180ms ease-out;
}
.form-submit.is-saving { opacity: .75; cursor: progress; }
.form-submit.is-saved { background: #1b8a5a; }
.form-submit.is-saved .mypage-save-check {
  width: 22px;
  animation: mypage-save-draw 340ms ease-out 120ms both;
}
@keyframes mypage-save-draw { to { stroke-dashoffset: 0; } }
/* ボタン自体も一度だけ弾む。admin.css の saved-pop と同じ動き */
.form-submit.is-saved { animation: mypage-saved-pop 240ms ease-out; }
@keyframes mypage-saved-pop {
  0%   { transform: scale(.97); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mypage-save-check { transition: none; }
  .form-submit.is-saved,
  .form-submit.is-saved .mypage-save-check { animation: none; }
  .form-submit.is-saved .mypage-save-check { stroke-dashoffset: 0; }
}

/* ===== マイページのプロフィールの札（2026-09-22・オーナー指示）=====
   「上部のセンターにアイコン、基本情報がまとまって、少しお洒落に、トンマナに合わせて」。
   ・箱の作りは .mypage-apps と同じ（白・角16px・1px の線）。**新しい見た目を増やさない**
   ・上だけ薄い青をしいて、アイコンを線の上にまたがらせる。証明写真のような並びにしない
   ・**押せるものは2つだけ**（アイコンのカメラ／編集する）。見るための場所なので操作を足さない */
.mypage-hero {
  position: relative;
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 0 20px 20px;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 16px;
  background: #fff;
  text-align: center;
  overflow: hidden;   /* 上の帯の角を箱の丸みで切る */
}
/* 上の帯。トップの淡い青（--primary-light）をそのまま使う */
.mypage-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 96px;
  background: linear-gradient(160deg, #eaf3ff 0%, #f4f9ff 100%);
  border-bottom: 1px solid #e3ecf7;
}
.mypage-hero-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 48px auto 12px;   /* 帯の下半分にかかる位置 */
}
.mypage-hero .mypage-avatar-img,
.mypage-hero .mypage-avatar-fb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  /* 白いふちで帯から浮かせる。影は薄く（濃いとアイコンより目立つ） */
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(23, 109, 193, .14);
}
.mypage-hero .mypage-avatar-fb { font-size: 34px; }
/* アイコンを変える。丸いカメラのボタンを右下に重ねる（44px は確保する） */
.mypage-hero-cam {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--accent, #176dc1);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(23, 109, 193, .3);
}
.mypage-hero-cam:hover { background: #125aa0; }
.mypage-hero-cam .icon { width: 20px; height: 20px; }

.mypage-hero-name {
  margin: 0 0 4px;
  font-size: clamp(19px, 5vw, 22px);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text, #1b2733);
}
.mypage-hero-sub {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-light, #5b6b7a);
}
/* 何も登録していない人には、ここが「足りない」と分かる色で出る */
.mypage-hero-sub.is-empty { color: #8a94a6; }

.mypage-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.mypage-hero-chips:empty { display: none; }
.mypage-hero-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-blue-bg, #e3f2fd);
  color: var(--accent-blue-text, #1565c0);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
}

.mypage-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mypage-hero-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border: 1.5px solid var(--accent, #176dc1);
  border-radius: 999px;
  background: #fff;
  color: var(--accent, #176dc1);
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.mypage-hero-edit:hover { background: #eaf3ff; }
.mypage-hero-status {
  margin: 10px 0 0;
  min-height: 1.2em;     /* 文言が出たときに下がずれない */
  font-size: 12.5px;
  color: var(--text-light, #5b6b7a);
}