/* ===========================================================
   募集の詳細ページ（company.html）— 2026-08-09 作り直し

   それまでは白いカードを縦に積むだけで、**どれが主役なのか分からなかった。**
   募集名・会社名・仕事内容・条件・体験が、同じ重さで並んでいた。

   作り直しの筋：
     ・**最初の画面で「何の仕事か」が分かる**（大きな写真＋募集名を重ねる）
     ・**条件は1枚のカードにまとめ、PCでは横に貼りつける**（読みながら見える）
     ・**本文は読みものとして組む**（見出し・行間・幅を、記事の作りにそろえる）
     ・スクロールすると上に細い帯が出て、いつでも日程へ行ける

   `.company-detail-*` は会社ページ（company-profile.html）と共用しているので
   触っていない。ここで足すのは `cd-` から始まるものだけ。
   =========================================================== */

:root {
  --cd-ink: #16202e;
  --cd-ink-2: #55637a;
  --cd-line: #e8edf5;
  --cd-bg: #f6f8fc;
  --cd-shadow: 0 2px 4px rgba(20, 32, 51, .04), 0 14px 34px rgba(20, 32, 51, .08);
}

body.cd-page { background: var(--cd-bg); }

/* ===== 上に出る細い帯 ===== */
/* スクロールで写真が流れたあと、**いま何のページにいるか**と
   **どこから日程へ行けるか**が同時に消えるのを防ぐ */
.cd-mini {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cd-line);
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.cd-mini.is-on { transform: none; }
.cd-mini-inner {
  max-width: 1120px; margin: 0 auto; padding: 9px 16px;
  display: flex; align-items: center; gap: 12px;
}
.cd-mini-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; /* 9→8px：小さい箱の角丸にそろえる（2026-09-16） */
  object-fit: contain; background: #fff; border: 1px solid var(--cd-line);
}
.cd-mini-text { min-width: 0; flex: 1 1 auto; }
.cd-mini-name {
  margin: 0; font-size: 14px; font-weight: 900; color: var(--cd-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-mini-co { margin: 0; font-size: 12px; color: var(--cd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-mini-cta {
  flex-shrink: 0; min-height: 40px; padding: 0 18px; border: none; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--primary, #176dc1); color: #fff; /* 青→藍のグラデーションをやめ、サイトの主ボタンと同じ青に（2026-09-15） */
  font-size: 13px; font-weight: 900; text-decoration: none;
}
@media (max-width: 560px) { .cd-mini-co { display: none; } }

/* ===== 写真とタイトル ===== */
.cd-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1e293b, #334155);
}
.cd-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* 写真の上に文字を乗せるので、下半分を必ず暗くする。
   **明るい写真だと白文字が読めなくなる**（実際の掲載写真は屋外の明るいものが多い） */
.cd-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 14, 24, .92) 0%, rgba(9, 14, 24, .62) 42%, rgba(9, 14, 24, .18) 100%);
}
.cd-hero-inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(120px, 26vw, 220px) 16px clamp(24px, 5vw, 44px);
  color: #fff;
}
/* 写真が無い募集。単色だと寂しいので、薄い格子を敷く */
.cd-hero.no-image { background: linear-gradient(150deg, #1d5fc4, #123f86); } /* 青紫→青の濃淡（2026-09-15） */
.cd-hero.no-image::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
}

.cd-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cd-hero-tag {
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(4px);
  font-size: clamp(12px, 3vw, 13px); font-weight: 700; color: #fff;
}
.cd-hero-tag.is-try { background: #fbbf24; border-color: #fbbf24; color: #422006; }
.cd-hero-title {
  margin: 0 0 16px;
  font-size: clamp(25px, 6.6vw, 46px); font-weight: 900; line-height: 1.34;
  letter-spacing: -.02em; word-break: auto-phrase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.cd-hero-co { display: flex; align-items: center; gap: 12px; }
.cd-hero-logo {
  width: clamp(44px, 12vw, 54px); height: clamp(44px, 12vw, 54px); flex-shrink: 0;
  border-radius: 12px; object-fit: contain; background: #fff; padding: 5px;
}
.cd-hero-logo-fb {
  width: clamp(44px, 12vw, 54px); height: clamp(44px, 12vw, 54px); flex-shrink: 0;
  border-radius: 12px; background: #fff; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900;
}
.cd-hero-coname { min-width: 0; }
.cd-hero-coname b { display: block; font-size: clamp(14px, 3.8vw, 16px); font-weight: 900; }
.cd-hero-coname a {
  /* 触れる範囲を 44px 確保する。文字だけだと 21px しかなく、押し外す */
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: clamp(12px, 3.2vw, 13px); color: rgba(255, 255, 255, .82); text-decoration: underline;
}
.cd-hero-coname a:hover { color: #fff; }

/* ===== 本文の骨格 ===== */
.cd-wrap {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(24px, 5vw, 44px) 16px clamp(90px, 14vw, 120px);
  display: grid;
  /* 【2026-09-21】`1fr` は「最小でも中身の幅」なので、**中身が縮まないと列が画面より広くなる**。
     実際、本番の募集2件（JHR株式会社）で 33px はみ出し、スマホで横スクロールが出ていた
     （本文の折りたたみが縮まないのが原因）。`minmax(0, 1fr)` にすると、列は画面に収まり、
     はみ出す中身は内側で折り返す。本文の読み幅は変わらない（実測 316px のまま）。
     **grid で 1fr を使うときは、基本 minmax(0, 1fr) にすること。** */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 32px);
}
/* 【2026-09-21・こちらが効いた】grid の**中身**は既定で `min-width: auto`＝「中身より狭くならない」。
   列を minmax(0,1fr) にしても、中身が縮まなければ中身が列からはみ出す。
   実際、本番の募集2件で 33px はみ出してスマホに横スクロールが出ていた（本番で 33px → 0px を確認）。
   **grid/flex の中で「はみ出す」ときは、まず中身の min-width: 0 を疑うこと。** */
.cd-wrap > * { min-width: 0; }
/* PCは「読みもの＋貼りつく条件カード」。
   条件を読みながら本文を追えるようにする（下まで探しに行かせない）。
   **DOMの順番はスマホに合わせてある**（体験 → 条件 → 本文）ので、
   PCでは grid の行・列を指定して置き直す */
@media (min-width: 900px) {
  .cd-wrap { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .cd-top  { grid-column: 1; grid-row: 1; }
  .cd-main { grid-column: 1; grid-row: 2; margin-top: calc(clamp(20px, 4vw, 32px) * -1 + clamp(16px, 3.4vw, 24px)); }
  .cd-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 72px; }
}
.cd-main > .cd-block:first-child { margin-top: 0; }

.cd-block {
  background: #fff; border: 1px solid var(--cd-line); border-radius: 18px;
  box-shadow: var(--cd-shadow); padding: clamp(20px, 4.6vw, 30px);
}
/* 【2026-09-17】体験のブロック（.stage-try）の直後の「会社について」だけ隙間が 0px だった。
   間隔を .cd-block 同士にしか付けておらず、体験は .stage なので当てはまらなかったため。
   体験の上も top.css の 16px 固定で、PC だけ他（24px）とずれていた。どちらも同じ間隔にそろえる */
.cd-block + .cd-block,
.cd-main > .stage + .cd-block { margin-top: clamp(16px, 3.4vw, 24px); }
body.top-apple .cd-main > .stage { margin-top: clamp(16px, 3.4vw, 24px); }
.cd-h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: clamp(18px, 4.8vw, 23px); font-weight: 900; letter-spacing: -.02em;
  color: var(--cd-ink);
}
.cd-h2::before {
  content: ""; width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0;
  background: var(--primary, #176dc1); /* 青→藍のグラデーションをやめた（2026-09-15） */
}
.cd-lead { margin: -8px 0 16px; font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.85; color: var(--cd-ink-2); }
.cd-text {
  margin: 0; font-size: clamp(14px, 3.9vw, 16px); line-height: 2.05; color: #2f3c52;
  white-space: pre-wrap; word-break: auto-phrase;
}

/* ===== 長文の折りたたみ（2026-08-23） =====
   「このインターンについて」は長く書けるようにしたので、そのまま出すと
   下の「身につくこと」「条件」まで届かなくなる。

   **畳んだ端はグラデーションで薄くする。** ぶつ切りにすると
   「そこで終わっている」と読めてしまい、押す理由が伝わらない。
   徐々に薄くなることで「まだ続く」と分かる。

   グラデーションの終端は .cd-block の背景（#fff）とそろえること。
   ずれると、薄くなった先に別の色の帯が見える。 */
.cd-fold {
  position: relative;
  /* 22em ≒ 11行前後（line-height 2.05）。これより短い説明は畳まない
     （JS が溢れているか測って、溢れていなければ is-open を付ける） */
  max-height: 22em;
  overflow: hidden;
}
.cd-fold.is-open { max-height: none; overflow: visible; }
.cd-fold:not(.is-open)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  /* 高さを取る。1〜2行ぶんだと「切れている」ようにしか見えない */
  height: 8em;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 35%,
    rgba(255, 255, 255, 0.8) 68%,
    #fff 100%
  );
  /* 文字の上に重なるので、選択やクリックを邪魔しない */
  pointer-events: none;
}
.cd-fold-more {
  display: block; width: 100%; margin: 14px 0 0; padding: 12px;
  border: 1px solid var(--cd-line); border-radius: 12px;
  background: #fff; cursor: pointer; font-family: inherit;
  font-size: clamp(13px, 3.6vw, 14px); font-weight: 800; color: #2563eb;
}
.cd-fold-more:hover { background: #f4f8ff; }
.cd-fold-more[hidden] { display: none; }

/* 身につくこと */
/* 【丸い札をやめた（2026-08-12）】薄い青の丸札を並べただけで、
   タグの羅列にしか見えていなかった。ここは「この募集で自分に何が残るか」で、
   募集を選ぶ理由になる場所なので、1つずつ拾って読める形にする。
   ✓ は CSS で描いている（JSは文字列を li に入れるだけ。**印のために
   マークアップを増やさない**＝古い募集でも同じ見た目になる） */
.cd-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cd-skills li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 11px; border-radius: 12px; /* 14→12px：中の箱の角丸にそろえる（2026-09-16） */
  background: linear-gradient(180deg, #fff, #f2f7ff);
  border: 1px solid #dbe6fb;
  box-shadow: 0 1px 2px rgba(20, 32, 51, .04), 0 4px 12px rgba(15, 25, 45, .05);
  color: #1e3a8a;
  /* 12.5→14px、行間 1.5→1.65（2026-09-17）。390px で 13.3px しかなく、
     2行に折り返した札が団子に見えていた */
  font-size: clamp(14px, 3.4vw, 15px); font-weight: 800; line-height: 1.65;
}
.cd-skills li::before {
  content: ""; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.8 4.8L19.5 7'/%3E%3C/svg%3E")
      center / 12px 12px no-repeat,
    var(--primary, #176dc1); /* 青→藍のグラデーションをやめた（2026-09-15） */
  box-shadow: 0 2px 5px rgba(37, 99, 235, .3);
}

/* ===== 条件カード（右） ===== */
.cd-card {
  background: #fff; border: 1px solid var(--cd-line); border-radius: 18px;
  box-shadow: var(--cd-shadow); overflow: hidden;
}
/* 【2026-09-15 作り直し】ここは青紫のグラデーションの帯だった。
   「長期インターンになったら／下の条件は、体験のあとの話です」は**注意書き**なのに、
   帯が画面でいちばん強く、肝心の 報酬・週の日数・勤務地 のタイルより目立っていた。
   帯をやめ、本文の見出し（.cd-h2）と同じ「青い縦棒＋見出し」の型にそろえる。
   区切りの役目は縦棒と言葉が担うので、色の面は要らない */
.cd-card-head {
  padding: 16px 20px 0; background: #fff; color: var(--cd-ink);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
}
.cd-card-head b {
  position: relative; padding-left: 14px;
  font-size: 15px; font-weight: 900;
}
.cd-card-head b::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 4px; height: 1em; border-radius: 2px;
  background: var(--primary, #176dc1);
}
/* 12.5→13.5px（2026-09-17）。報酬・週の日数を「体験でもらえる」と読まれないための
   注意書きで、ページの中でいちばん誤解されやすい一文。小さいと読み飛ばされる */
.cd-card-head span { font-size: 13.5px; color: var(--cd-ink-2); }
.cd-card-body { padding: 14px 20px 20px; }

.cd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* 【3枚の行をそろえる】ふりがな・数字・但し書きを同じ高さの段に置く。
   段を決めずに積むと、ふりがなのあるタイルだけ数字が下がり、
   3枚並べたときに視線が上下する（実際そうなっていた）。
   grid-template-rows で段を固定し、数字の段は中央ぞろえにする */
.cd-tile {
  display: grid; grid-template-rows: auto 14px 1fr;
  text-align: center; padding: 12px 6px; border-radius: 12px; background: #f4f7fc;
}
.cd-tile-label {
  font-size: 12px; font-weight: 700; color: var(--cd-ink-2); margin-bottom: 4px;
  white-space: nowrap;
}
.cd-tile-ruby { font-size: 12px; color: var(--cd-ink-2); line-height: 14px; }
.cd-tile-value {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px;
  font-size: clamp(19px, 5vw, 23px); font-weight: 900; color: var(--cd-ink);
  line-height: 1.2; letter-spacing: -.02em;
}
/* 「完全成果報酬」「フルリモート」のように長い値。タイルの幅は3等分で
   約100pxしかなく、大きいままだと2行に割れる。**行の高さは変えない** */
.cd-tile-value.is-long { font-size: 13px; line-height: 1.4; word-break: auto-phrase; }
.cd-tile-unit { font-size: 12px; font-weight: 700; margin-left: 1px; }
/* タイルの外に出した但し書き（＋インセンティブなど）。
   幅が余っているので折れない。**タイルの中に戻さないこと**
   （3等分の約100pxには収まらず、そのタイルだけ高さが伸びる） */
.cd-tiles-note {
  margin: 10px 0 0; padding: 7px 12px; border-radius: 8px;
  background: #fff7ed; color: #b45309;
  font-size: 12px; font-weight: 800; line-height: 1.6; text-align: center;
}

.cd-facts { margin: 16px 0 0; display: grid; gap: 0; }
.cd-facts > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--cd-line); }
.cd-facts dt { font-size: 12.5px; font-weight: 700; color: var(--cd-ink-2); }
.cd-facts dd { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--cd-ink); word-break: break-word; }

.cd-side-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; margin-top: 16px; border: none; border-radius: 999px; /* 18→16px：上の段と同じ間隔にそろえる（2026-09-16） */
  background: var(--primary, #176dc1); color: #fff; /* 青→藍のグラデーションをやめ、サイトの主ボタンと同じ青に（2026-09-15） */ cursor: pointer;
  font-size: 15px; font-weight: 900;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .32);
  transition: transform .18s, box-shadow .18s;
}
.cd-side-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 99, 235, .4); }
.cd-side-note { margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 1.7; color: var(--cd-ink-2); } /* 12→13→14px（2026-09-17） */
/* 2行に折り返すので、スマホでは左にそろえる（2026-09-17） */
@media (max-width: 699px) {
  .cd-side-note { text-align: left; }
}

/* 体験のまとめ（.cd-try*）は外した（2026-08-11）。
   体験の中身は、下から出る日程のシートに全部ある。
   このページに並べると、同じことを二度読ませることになる。 */

/* ===== 勤務条件・応募の条件 ===== */
/* 【1項目ずつを面にした（2026-08-12）】それまでは白地に文字を並べただけで、
   どこからどこまでが1つの条件なのかが、行間でしか分からなかった。
   「週3日から」と「土日勤務」が続くと1つの文に見える。 */
.cd-conds { display: grid; gap: 9px; }
.cd-cond {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border-radius: 12px; /* 13→12px：中の箱の角丸にそろえる（2026-09-16） */
  background: #fbfcfe; border: 1px solid var(--cd-line);
  font-size: clamp(13px, 3.6vw, 14.5px); line-height: 1.75; font-weight: 600;
  color: #2f3c52;
}
/* 面のほうもうっすら色を持たせる。**色だけで意味を伝えてはいない**
   （印に「不可」「必須」と文字が入る）。:has が効かないブラウザでは
   上の既定の面のまま出るので、読めなくなることはない */
.cd-cond:has(.cd-cond-ok)   { background: #f7fdf9; border-color: #d3eddf; }
.cd-cond:has(.cd-cond-ng)   { background: #fffafa; border-color: #f6d9d9; }
.cd-cond:has(.cd-cond-need) { background: #f8fbff; border-color: #d9e6fa; }

/* 【印の幅をそろえる】「OK」と「要相談」で幅が変わると、条件の文の
   出だしが1行ごとに横へずれて、縦に読み下せなくなる。
   min-width は一番長い「要相談」（12px×3字＋余白）が収まる値 */
.cd-cond-mark {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; padding: 5px 10px; border-radius: 999px; margin-top: 1px;
  border: 1px solid transparent;
  font-size: 12px; font-weight: 900; letter-spacing: .04em; text-align: center;
}
.cd-cond-ok { background: #dcfce7; color: #12693a; border-color: #b7ebca; }
.cd-cond-ng { background: #fee2e2; color: #a81c1c; border-color: #f6c6c6; }
.cd-cond-need { background: #dbeafe; color: #1a45c0; border-color: #c2d8fb; }

/* ===== 会社について ===== */
.cd-about { display: flex; gap: 16px; align-items: flex-start; }
.cd-about-logo {
  width: 62px; height: 62px; flex-shrink: 0; border-radius: 12px /* 14→12px（2026-09-16） */;
  object-fit: contain; background: #fff; border: 1px solid var(--cd-line); padding: 6px;
}
.cd-about-logo-fb {
  width: 62px; height: 62px; flex-shrink: 0; border-radius: 12px; /* 14→12px（写真版の .cd-about-logo と同じに） */
  background: #eef4ff; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900;
}
.cd-about-name { margin: 0 0 6px; font-size: clamp(15px, 4.2vw, 18px); font-weight: 900; color: var(--cd-ink); }
.cd-about-sum { margin: 0 0 12px; font-size: clamp(13px, 3.6vw, 14.5px); line-height: 1.9; color: #3c4a60; }
.cd-about-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: clamp(13.5px, 3.4vw, 14px); font-weight: 800; color: #1d4ed8; text-decoration: none; /* 下限 12.5→13.5px（2026-09-15） */
}
.cd-about-link:hover { text-decoration: underline; }

/* 見つからない・停止中 */
.cd-empty {
  max-width: 560px; margin: clamp(50px, 12vw, 90px) auto; padding: 0 16px;
  text-align: center;
}
.cd-empty p { margin: 0 0 18px; font-size: clamp(14px, 3.9vw, 16px); color: var(--cd-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .cd-mini { transition: none; }
  .cd-side-cta:hover { transform: none; }
}

/* 条件の但し書き。**薄すぎる灰色は使わない**（白地で 3.1:1 しか出ず読めない）。
   条件そのものより一段軽くして、どちらが本体か迷わせない */
.cd-cond-note {
  display: inline-block; margin-top: 3px;
  font-size: 13.5px; font-weight: 600; line-height: 1.7; /* 12→12.5→13.5px（2026-09-17） */
  color: var(--cd-ink-2);
}

/* ===========================================================
   会社詳細（company-profile.html）
   募集の詳細ページと同じ組み方にそろえてある。学生は
   募集 → 会社 → 募集 と行き来するので、見え方が変わると
   別のサイトに来たように感じる。
   =========================================================== */

.cd-hero-tagline {
  margin: 16px 0 0; max-width: 34em;
  font-size: clamp(13px, 3.7vw, 17px); font-weight: 700; line-height: 1.9;
  color: rgba(255, 255, 255, .93);
}
.cp-hero .cd-hero-inner { padding-top: clamp(70px, 16vw, 130px); }
.cp-back {
  /* 触れる範囲を縦横44px確保する。「← 戻る」は3文字しかなく、幅42pxだった */
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-right: 8px; margin-bottom: 4px;
  font-size: clamp(13.5px, 3.3vw, 14px); font-weight: 700; /* 下限 12→13.5px（2026-09-17） */
  color: rgba(255, 255, 255, .85); text-decoration: none;
}
.cp-back:hover { color: #fff; text-decoration: underline; }
.cp-hero-id { display: flex; align-items: center; gap: 14px; }
.cp-hero-name {
  margin: 0; font-size: clamp(24px, 6.4vw, 44px); font-weight: 900;
  line-height: 1.3; letter-spacing: -.02em; word-break: auto-phrase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
/* 見出しの棒（.cd-h2::before）の代わりに絵記号を置く。
   3つの節が並ぶので、目印があると読み飛ばした場所へ戻りやすい */
.cp-story .cd-h2::before { display: none; }
.cp-story-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; /* 10→8px（2026-09-16） */
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef4ff; color: #1d4ed8;
}
.cp-story-icon svg { width: 19px; height: 19px; }
.cp-story + .cp-story { margin-top: clamp(16px, 3.4vw, 24px); }

/* カードの先頭に来た表は、上の区切り線を消す（見出しの直下に線が2本並ぶため） */
.cd-card-body > .cd-facts:first-child { margin-top: 0; }
.cd-card-body > .cd-facts:first-child > div:first-child { border-top: none; padding-top: 0; }

/* 「この会社のインターン」（2026-09-03）。会社ページの下部に募集カードを並べる。
   カードは一覧・トップと同じ .int-card。
   【1行2枚に固定（2026-09-03 オーナー指示）】auto-fit の下限に頼ると、
   会社ページの本文列（PCで最大740px前後）では1列に落ちて縦に伸びていた。
   **狭い画面だけ1列**にし、それ以外は必ず2枚並べる。
   セレクタに .company-grid を足してあるのは、style.css の
   `.company-grid.company-grid-list`（詳細度 0,2,0）に勝つため */
.company-grid.cp-int-list {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (min-width: 560px) {
  .company-grid.cp-int-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* 2枚並ぶと1枚あたり約280〜360px。一覧の2列（スマホ）と同じ考え方で、
     写真の比率と文字を少しだけ詰める（文字は12pxを下限に保つ） */
  .company-grid.cp-int-list .int-card-thumb { aspect-ratio: 16 / 9; }
  .company-grid.cp-int-list .int-card-body { padding: 13px 13px 12px; }
  .company-grid.cp-int-list .int-card-title { font-size: 15px; }
}

/* ===== オンライン説明会フロー（2026-09-05） =====
   学生の入口が「会社の体験に応募」から「運営とのオンライン説明会に応募」へ
   変わった。ページ本文は上半分が長期インターンの話、下半分が1日体験の話に
   なるため、**どこから話が変わるのかを目で分かる**ようにしている。 */

/* 体験ブロックの頭に付ける小見出し。.stage-try は元から青みの箱だが、
   箱の色だけでは「別の話が始まった」ことまでは伝わらない */
body.top-apple .stage-kicker {
  display: inline-block;
  font-size: 13.5px; /* 11.5→12.5→13.5px（2026-09-17）。「ここから下は1日体験の話」という
                        話題の切り替わりを知らせる一文なので、見落とされない大きさにする */
  font-weight: 900;
  letter-spacing: .04em;
  color: #2170e7;
  background: #fff;
  border: 1px solid #cfe0fb;
  border-radius: 999px;
  padding: 4px 11px;
}

/* 「体験は直接申し込めない」の但し書き。無給の但し書き（.stage-note）と
   並ぶので、こちらは色を変えて別のことを言っていると分かるようにする */
body.top-apple .stage-note-flow {
  background: #fff6e8;
  border-color: #f3d9ae;
  color: #7a5a1e;
}

/* 【.briefing-intro は消した（2026-09-23 オーナー指示）】
   シートの頭に置いていた「この20分でやること」の枠。日付にたどり着くまで
   画面1枚ぶん読ませていたため、枠ごと外した（company.html のコメントに経緯）。 */

/* ===== スマホの募集詳細：写真の帯＋白地の見出し（2026-09-15 オーナー指示） =====
   それまでは写真を画面いっぱいの背景に敷き、その上に白文字を重ねていた。
   ①ヘッダーだけで 393px（画面の47%）を使い、条件のタイルが下に押し出される
   ②文字を置くために上へ 120px の余白を取っており、そのぶんが丸ごと空き
   ③写真が 432×215 しかないのに 390×393 の箱へ cover で入るので 1.8倍に拡大され、
     左右が切られたうえにぼやける（オーナー指摘「ズームで引き延ばされている」）
   → 写真は 2:1 の帯（掲載写真の実寸とほぼ同じ比率＝拡大も切り取りもほぼ起きない）にして上に置き、
     見出し・会社名は下の白地に黒文字で出す。暗幕も不要になる。 */
@media (max-width: 600px) {
  body.top-apple .cd-hero {
    background: #fff;
  }
  /* 写真：絶対配置をやめて、ふつうに流し込む帯にする */
  body.top-apple .cd-hero-img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
  /* 写真の上に重ねていた暗幕は、文字が白地に移るので不要 */
  body.top-apple .cd-hero::after {
    display: none;
  }
  /* 写真が無い募集は、青い帯も格子もやめて白地だけにする（空の色帯を見せない） */
  body.top-apple .cd-hero.no-image {
    background: #fff;
  }
  body.top-apple .cd-hero.no-image::before {
    display: none;
  }
  body.top-apple .cd-hero-inner {
    /* position:relative のままだと、下の .cp-back の絶対配置がこの要素（＝写真の下）を
       基準にしてしまい、戻るボタンが職種タグに重なった。基準を .cd-hero に戻す */
    position: static;
    padding: 12px 16px 14px;
    color: var(--cd-ink, #1a1a1f);
  }
  /* 「← 募集一覧に戻る」は写真の左上に浮かせる（1行ぶんの高さを節約）。
     写真の明るさに左右されないよう、白いピルの中に置く。
     .cd-hero が position:relative なので、DOM の位置は変えずに済む */
  body.top-apple .cd-hero .cp-back {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-height: 44px; /* 36→44px（2026-09-17）。指で押す下限。押し損ねると写真を触っただけになる */
    min-width: 0;
    padding: 0 14px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    color: #1a1a1f;
    font-size: 12.5px;
  }
  /* 写真が無いときは浮かせる先が無いので、ふつうに文章の上へ戻す */
  body.top-apple .cd-hero.no-image .cp-back {
    position: static;
    background: #eef2f7;
    box-shadow: none;
    margin-bottom: 8px;
  }
  /* 職種・「2日から試せる」は白地に置くので、色を借りず自前で持つ */
  body.top-apple .cd-hero-tags {
    gap: 6px;
    margin-bottom: 10px; /* 下の見出しの margin(10px) と同じにして段の間隔をそろえる */
  }
  body.top-apple .cd-hero-tag {
    padding: 3px 10px;
    background: #eef2f7;
    border-color: transparent;
    color: #44505f;
    font-size: 12px;
  }
  body.top-apple .cd-hero-tag.is-try {
    background: #fde68a;
    border-color: transparent;
    color: #4a2f04;
  }
  body.top-apple .cd-hero-title {
    margin: 0 0 10px;
    font-size: 23px;
    line-height: 1.38;
    color: #16181d;
    text-shadow: none;
  }
  /* 会社名の行。ロゴを小さくし、「会社の詳細を見る」は名前の下の1行に収める
     （以前は min-height:44px のリンクが独立した段になり 69px 使っていた） */
  body.top-apple .cd-hero-co {
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #edf0f4;
  }
  body.top-apple .cd-hero-logo,
  body.top-apple .cd-hero-logo-fb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #edf0f4;
  }
  body.top-apple .cd-hero-coname b {
    font-size: 14.5px;
    color: #16181d;
  }
  body.top-apple .cd-hero-coname a {
    /* 26→44px（2026-09-17）。押せる範囲は44px、見た目の高さは26pxのまま。
       はみ出す 9px×2 を負のマージンで引き戻しているので、会社名の行は背伸びしない */
    min-height: 44px;
    margin-top: -9px;
    margin-bottom: -9px;
    color: var(--primary, #176dc1);
    font-size: 12.5px;
  }
  /* 白地が続くので、本文の始まりとの境目を作る */
  body.top-apple .cd-hero {
    border-bottom: 1px solid #e8ecf1;
  }
  /* 会社概要ページ（.cp-hero）も同じ部品を使う。白地になったので、
     写真の上で読ませるための影は外す（黒文字に黒い影が付いて濁る） */
  body.top-apple .cp-hero-name {
    font-size: 23px;
    color: #16181d;
    text-shadow: none;
  }
}

/* 見出しと条件カードの間を詰める（2026-09-15）。
   ヒーローを縮めても、ここが 24px + 20px 空いていて条件のタイルが画面の下に残っていた */
@media (max-width: 600px) {
  body.top-apple .cd-wrap {
    padding-top: 12px;
  }
  body.top-apple .cd-top:empty {
    display: none;
  }
  /* 「長期インターンになったら」の帯は、言葉のわりに 81px を使っていた。
     文字を小さくして、その下のタイル（給与・週の日数・勤務地）を早く見せる */
  body.top-apple .cd-card-head {
    padding: 14px 14px 0;
  }
  body.top-apple .cd-card-head b {
    font-size: 14.5px;
  }
  body.top-apple .cd-card-body {
    padding: 12px 14px 16px;
  }
}

/* シートの説明見出しに添える正式名称（2026-09-16）。
   ボタンは「まずは話を聞いてみる」と軽くしたが、LINE の連絡や運営画面は
   「オンライン説明会」の名前を使う。学生がその言葉を一度も見ないまま進むと、
   あとで届く「日程が確定しました」の連絡と結びつかないので、ここで一度だけ出す */
.briefing-alias {
  font-size: .82em;
  font-weight: 700;
  color: var(--cd-ink-2);
}

/* ===== 応募の確認窓（2026-09-13）。シート（z-index 80）の上に重ねる ===== */
body.top-apple .apply-confirm {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 25, 45, .5);
  opacity: 0; transition: opacity .2s ease;
}
body.top-apple .apply-confirm.is-open { opacity: 1; }
body.top-apple .apply-confirm-card {
  width: 100%; max-width: 440px;
  background: #fff; border-radius: 18px;
  padding: 24px 22px 20px;
  box-shadow: 0 20px 60px rgba(15, 25, 45, .3);
  transform: translateY(14px) scale(.97);
  transition: transform .22s cubic-bezier(.22, .8, .28, 1);
}
body.top-apple .apply-confirm.is-open .apply-confirm-card { transform: none; }
body.top-apple .apply-confirm-title { margin: 0 0 6px; font-size: 19px; font-weight: 900; color: #16233a; text-align: center; }
body.top-apple .apply-confirm-sub { margin: 0 0 14px; font-size: 13px; color: #6b7280; text-align: center; overflow-wrap: anywhere; }
body.top-apple .apply-confirm-sub:empty { display: none; }
body.top-apple .apply-confirm-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.top-apple .apply-confirm-dates li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  background: #f3f7fe; border: 1px solid #dbe7fb;
}
body.top-apple .apply-confirm-date { font-size: 15px; font-weight: 800; color: #1c3f7a; }
body.top-apple .apply-confirm-band { font-size: 13px; font-weight: 700; color: #2f5fb3; text-align: right; }
body.top-apple .apply-confirm-note { margin: 12px 0 16px; font-size: 12.5px; line-height: 1.7; color: #6b7280; text-align: center; }
body.top-apple .apply-confirm-actions { display: grid; gap: 8px; }
body.top-apple .apply-confirm-ok { width: 100%; margin: 0; }
body.top-apple .apply-confirm-back {
  width: 100%; padding: 12px; border-radius: 999px;
  background: #fff; border: 1.5px solid #d6dde8; color: #45505f;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
body.top-apple .apply-confirm-back:hover { background: #f4f6fa; }
body.top-apple #apply-confirm-error { margin: 10px 0 0; text-align: center; }
body.top-apple #apply-confirm-error:empty { display: none; }

/* ===== 申込済み（2026-09-13）。対応中の申込がある学生に、カレンダーの代わりに出す ===== */
body.top-apple .apply-applied { text-align: center; }
body.top-apple .apply-applied-badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: #e6f0fd; color: #1c4f9c; font-size: 12px; font-weight: 800; margin-bottom: 10px;
}
body.top-apple .apply-applied-title { margin: 0 0 6px; font-size: 19px; font-weight: 900; color: #16233a; }
body.top-apple .apply-applied-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: #45505f; }
body.top-apple .apply-applied-lead b { color: #058037; } /* 文字色に LINE 緑は白地で 2.23:1。ボタンの地色は触らない */
/* 「服装は自由・準備は要らない」の一言（2026-09-16）。日時より控えめに、でも読み飛ばされない大きさで */
body.top-apple .apply-applied-casual { display: inline-block; margin-top: 8px; font-size: 13px; color: #6b7280; }
/* 面談当日の導線（2026-09-20）。文中のリンクだと当日に探させるので、押せる大きさで出す */
body.top-apple .apply-join-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
body.top-apple .apply-join-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  background: #1a73e8; color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
}
body.top-apple .apply-join-btn:hover { background: #1557b0; }
body.top-apple .apply-cal-link { font-size: 14px; color: #1557b0; font-weight: 700; }
/* 希望している募集（最大4社）。いま見ている会社には印を付ける */
body.top-apple .apply-applied-interests { margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: #fafbfd; border: 1px solid #edf0f5; text-align: left; }
body.top-apple .apply-applied-interests-label { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #6b7280; letter-spacing: .04em; }
body.top-apple .apply-applied-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.top-apple .apply-applied-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #e6eaf1; }
body.top-apple .apply-applied-item.is-here { border-color: #9ec0f5; background: #f3f7fe; }
body.top-apple .apply-applied-item-n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #1c4f9c; color: #fff; font-size: 12px; font-weight: 800; }
body.top-apple .apply-applied-item-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.top-apple .apply-applied-item-co { font-size: 14px; font-weight: 800; color: #16233a; }
body.top-apple .apply-applied-item-int { font-size: 12px; color: #6b7280; overflow-wrap: anywhere; }
body.top-apple .apply-applied-item-here { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #1c4f9c; background: #e6f0fd; border-radius: 999px; padding: 2px 8px; }
body.top-apple .apply-applied-add {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 999px;
  background: #fff; border: 1.5px solid #2170e7; color: #2170e7;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
body.top-apple .apply-applied-add:hover { background: #f3f7fe; }
body.top-apple .apply-applied-add:disabled { opacity: .6; cursor: default; }
body.top-apple .apply-applied-msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; }
body.top-apple .apply-applied-msg:empty { display: none; }

/* ===== 担当者からの候補（日程調整依頼・2026-09-15）。1つ押すと確定 ===== */
body.top-apple .apply-proposal { margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: #fff8ec; border: 1px solid #ffe0b2; text-align: left; }
body.top-apple .apply-proposal-label { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #a65b00; letter-spacing: .04em; }
body.top-apple .apply-proposal-list { display: grid; gap: 8px; }
body.top-apple .apply-proposal-slot {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1.5px solid #dbe7fb; color: #16233a; text-align: left;
  font-family: inherit; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
body.top-apple .apply-proposal-slot:hover { border-color: #2170e7; transform: translateY(-1px); }
body.top-apple .apply-proposal-slot:disabled { opacity: .55; cursor: default; transform: none; }
body.top-apple .apply-proposal-date { font-size: 15px; font-weight: 800; color: #1c3f7a; }
body.top-apple .apply-proposal-time { font-size: 15px; font-weight: 800; color: #2f5fb3; }
body.top-apple .apply-proposal-pick { font-size: 12px; font-weight: 800; color: #fff; background: #2170e7; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
body.top-apple .apply-proposal-msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; }
body.top-apple .apply-proposal-msg:empty { display: none; }
body.top-apple .apply-proposal-none { margin: 8px 0 0; font-size: 12px; color: #6b7280; }
@media (max-width: 420px) {
  body.top-apple .apply-proposal-slot { grid-template-columns: 1fr auto; }
  body.top-apple .apply-proposal-pick { grid-column: 1 / -1; text-align: center; }
}

/* ===== 応募完了（2026-09-13）。チェックが描かれて、見出し・候補日・次の流れが順に浮かぶ ===== */
body.top-apple .thanks-box { padding-top: 8px; }
body.top-apple .apply-done-mark { position: relative; width: 84px; height: 84px; margin: 4px auto 12px; }
body.top-apple .apply-done-svg { width: 84px; height: 84px; display: block; }
body.top-apple .apply-done-circle { fill: #e8f5e9; stroke: #2e7d32; stroke-width: 3; }
body.top-apple .apply-done-check {
  fill: none; stroke: #2e7d32; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 0;
}
/* 光の輪。チェックが描き終わるのと同時にふわっと広がって消える */
body.top-apple .apply-done-burst {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(46, 125, 50, .45); opacity: 0; pointer-events: none;
}
body.top-apple .apply-done-title { margin: 0 0 6px; font-size: 21px; font-weight: 900; color: #1e6b33; text-align: center; }
body.top-apple .apply-done-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: #45505f; text-align: center; }
body.top-apple .apply-done-lead b { color: #058037; } /* 文字色に LINE 緑は白地で 2.23:1。ボタンの地色は触らない */
body.top-apple .apply-done-dates { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
body.top-apple .apply-done-dates:empty { display: none; }
body.top-apple .apply-done-date {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: 12px;
  background: #f3f7fe; border: 1px solid #dbe7fb;
  font-size: 14px; font-weight: 800; color: #1c3f7a; line-height: 1.3;
}
body.top-apple .apply-done-date b { font-size: 11.5px; font-weight: 700; color: #4a72b8; }
body.top-apple .apply-done-next {
  list-style: none; margin: 0 0 14px; padding: 14px 16px;
  display: grid; gap: 10px; text-align: left;
  background: #fafbfd; border-radius: 14px; border: 1px solid #edf0f5;
}
body.top-apple .apply-done-next li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.7; color: #2b3444; }
body.top-apple .apply-done-next b { color: #1c3f7a; }
body.top-apple .apply-done-num {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1c4f9c; color: #fff; font-size: 12px; font-weight: 800; margin-top: 1px;
}
body.top-apple .apply-done-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: #6b7280; text-align: center; }

@keyframes apply-done-pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes apply-done-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes apply-done-burst { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes apply-done-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
body.top-apple .thanks-box.is-animating .apply-done-mark { animation: apply-done-pop .45s cubic-bezier(.22, .8, .28, 1) both; }
body.top-apple .thanks-box.is-animating .apply-done-check { animation: apply-done-draw .4s ease-out .3s both; }
body.top-apple .thanks-box.is-animating .apply-done-burst { animation: apply-done-burst .7s ease-out .55s both; }
body.top-apple .thanks-box.is-animating .apply-done-title { animation: apply-done-rise .4s ease-out .5s both; }
body.top-apple .thanks-box.is-animating .apply-done-lead { animation: apply-done-rise .4s ease-out .62s both; }
body.top-apple .thanks-box.is-animating .apply-done-dates { animation: apply-done-rise .4s ease-out .74s both; }
body.top-apple .thanks-box.is-animating .apply-done-next { animation: apply-done-rise .4s ease-out .86s both; }
body.top-apple .thanks-box.is-animating .apply-done-note,
body.top-apple .thanks-box.is-animating .line-btn { animation: apply-done-rise .4s ease-out .98s both; }
@media (prefers-reduced-motion: reduce) {
  body.top-apple .thanks-box.is-animating * { animation: none !important; }
  body.top-apple .apply-confirm, body.top-apple .apply-confirm-card { transition: none; }
}