/* ============================================================
   styles.css — 株式会社トップ 採用LP v5
   設計思想:「実務感はあるが、読み進めたくなる採用LP」
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --bg:           #FAFAF8;
  --bg-white:     #FFFFFF;
  --bg-alt:       #F6F5F1;

  --text:         #222222;
  --text-sub:     #555555;
  --text-muted:   #666666;

  --border:       #E5E2DA;
  --border-light: #EDEAE4;

  --accent:       #14385C;
  --accent-light: #EEF4FA;

  --corp:         #CFDB15;
  --corp-dark:    #7A8200;

  --yes-text:     #1B4530;
  --yes-bg:       #EEF7F1;
  --yes-border:   #B8D9C3;
  --no-text:      #5A2D0C;
  --no-bg:        #F9F2EC;
  --no-border:    #D9B89A;

  --font: 'Inter', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system,
          'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
          'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  --max-w:   1080px;
  --card-r:  12px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Utility ---------- */
/* 数字+漢字など、分断させたくない単語単位を保護する */
.nowrap { white-space: nowrap; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: var(--font);
  font-size:   1.0625rem;
  line-height: 1.9;
  color:       var(--text);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { line-height: 1.28; font-weight: 700; }
h2 { line-height: 1.35; font-weight: 700; margin-bottom: 20px; }
h3 { line-height: 1.45; font-weight: 700; margin-bottom: 14px; }
h4 { line-height: 1.45; font-weight: 700; }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 32px;
}

.reading-col { max-width: 860px; }

.section {
  padding:    96px 0;
  background: var(--bg-white);
}

.section-alt { background: var(--bg-alt); }

.section-header {
  margin-bottom: 32px;
  max-width:     920px;
}

/* utility: visible on desktop, hidden on mobile */
.fv-desktop-only { display: inline; }

.section-label {
  display:        block;
  font-family:    var(--font-mono);
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  color:          var(--text-muted);
  text-transform: uppercase;
  margin-bottom:  12px;
  border-left:    3px solid var(--corp);
  padding-left:   10px;
}

.section-title {
  font-size:      2rem;
  font-weight:    700;
  color:          var(--text);
  line-height:    1.35;
  margin-bottom:  20px;
  letter-spacing: -0.02em;
}

.section-desc {
  font-size:      1.0625rem;
  color:          var(--text-sub);
  line-height:    1.95;
  letter-spacing: 0.01em;
}

.section-foot-note {
  margin-top:  24px;
  padding-top: 16px;
  border-top:  1px solid var(--border-light);
  font-size:   0.9375rem;
  color:       var(--text-sub);
}

/* ---------- Buttons ---------- */
.btn {
  display:         inline-block;
  cursor:          pointer;
  font-family:     var(--font);
  font-weight:     700;
  font-size:       1rem;
  border-radius:   4px;
  text-align:      center;
  text-decoration: none;
  transition:      background 0.12s ease;
  border:          1px solid transparent;
  line-height:     1.5;
}

.btn-primary {
  background:   var(--corp);
  color:        #181816;
  padding:      10px 24px;
  border-color: var(--corp);
}

.btn-primary:hover {
  background:      #B8C510;
  border-color:    #B8C510;
  text-decoration: none;
  color:           #181816;
}

.btn-sm  { padding: 7px 16px; font-size: 0.875rem; }
.btn-lg  { padding: 13px 28px; font-size: 1.0625rem; }
.btn-xl  {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          56px;
  min-width:       300px;
  padding:         0 36px;
  font-size:       1rem;
  font-weight:     700;
}

/* ---------- Prose ---------- */
.prose {
  font-size:   1.0625rem;
  color:       var(--text-sub);
  line-height: 1.9;
  max-width:   860px;
}

.prose p + p { margin-top: 20px; }

/* ---------- Bullet List ---------- */
.bullet-list { margin: 12px 0; list-style: none; padding: 0; }

.bullet-list li {
  position:      relative;
  padding-left:  18px;
  font-size:     1.0625rem;
  color:         var(--text-sub);
  line-height:   1.85;
  margin-bottom: 8px;
}

.bullet-list li::before {
  content:     "·";
  position:    absolute;
  left:        0;
  top:         0;
  font-size:   1.3rem;
  line-height: 1.6;
  color:       var(--corp-dark);
  font-weight: 700;
}

/* ---------- Note Block ---------- */
.note-block {
  background:    var(--bg-alt);
  border:        1px solid var(--border-light);
  border-radius: 6px;
  padding:       12px 18px;
  margin-top:    20px;
}

.note-block p {
  font-size:    0.875rem;
  color:        var(--text-muted);
  line-height:  1.75;
  padding-left: 1.4em;
  text-indent:  -1.4em;
}
.note-block p + p { margin-top: 6px; }

/* ---------- Note inline ---------- */
.note-inline {
  font-size:     0.9375rem;
  color:         var(--text-muted);
  font-style:    italic;
  margin-bottom: 24px;
  display:       block;
  max-width:     760px;
}

/* ---------- Callout Block ---------- */
.callout-block {
  background:    var(--bg-white);
  border:        1px solid var(--border);
  border-left:   4px solid var(--corp);
  border-radius: 0 8px 8px 0;
  padding:       32px 40px;
  margin-top:    24px;
  max-width:     900px;
}

.callout-block > p {
  line-height:   1.9;
  margin-bottom: 16px;
}

.callout-block > p:last-child { margin-bottom: 0; }

.section-alt .callout-block { background: var(--bg-white); }

.callout-title {
  font-size:     1rem;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 12px;
}

.callout-emphasis {
  font-weight: 700;
  color:       var(--accent);
  font-size:   0.9375rem;
  margin-top:  12px;
}

/* ---------- Placeholder Images ---------- */
.placeholder-image {
  background:      #EDEDEB;
  border:          1px dashed #BCBAB2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         12px 16px;
  text-align:      center;
  border-radius:   var(--card-r);
}

.placeholder-image span {
  color:       #909088;
  font-size:   0.6875rem;
  font-style:  italic;
  line-height: 1.55;
  font-family: var(--font-mono);
}

.placeholder-sm { height: 100px; margin: 16px 0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(4px);
}

.site-header.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }

.header-inner {
  max-width:       var(--max-w);
  margin:          0 auto;
  padding:         0 32px;
  height:          54px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.header-logo { display: flex; align-items: center; gap: 12px; }

.header-logo-img { height: 28px; width: auto; display: block; }

.header-badge {
  font-family:    var(--font-mono);
  font-size:      0.875rem;
  color:          var(--text-muted);
  background:     var(--bg-alt);
  border:         1px solid var(--border);
  padding:        6px 10px;
  border-radius:  3px;
  line-height:    1.4;
}

/* ============================================================
   SECTION 01: FIRST VIEW
   ============================================================ */
.section-fv {
  padding:    72px 0 64px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  overflow-x: clip;
}

.fv-wrap { max-width: 1120px; }

.fv-heading {
  font-size:      3.25rem;
  font-weight:    700;
  line-height:    1.22;
  color:          var(--text);
  margin-top:     12px;
  letter-spacing: -0.02em;
  max-width:      980px;
}

.fv-rule {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     24px 0;
}

.fv-meta-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px 56px;
}

.fv-meta-item { display: flex; flex-direction: column; gap: 8px; }

.fv-meta-label {
  font-family:    var(--font-mono);
  font-size:      0.8125rem;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fv-meta-val {
  font-size:   1.125rem;
  font-weight: 700;
  color:       var(--text);
  line-height: 1.45;
}

.fv-subtext {
  max-width:     860px;
  margin-bottom: 20px;
}

.fv-subtext p {
  font-size:     1.0625rem;
  color:         var(--text-sub);
  line-height:   1.9;
  margin-bottom: 14px;
}

.fv-subtext p:last-child { margin-bottom: 0; }

.fv-notice {
  font-size:     0.9375rem;
  color:         var(--text-sub);
  background:    var(--accent-light);
  border-left:   3px solid var(--accent);
  padding:       16px 20px;
  line-height:   1.85;
  margin-bottom: 28px;
  border-radius: 0 6px 6px 0;
  max-width:     860px;
}

.fv-notice p { margin-bottom: 6px; }
.fv-notice p:last-child { margin-bottom: 0; }

.fv-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.fv-scroll-cue {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  40px;
  padding-top: 20px;
  border-top:  1px solid var(--border-light);
}

.fv-scroll-arrow { font-size: 1.125rem; color: #333333; }

.fv-scroll-label {
  font-size:   0.9375rem;
  color:       #333333;
  line-height: 1.6;
}

/* ============================================================
   SECTION 02: COMPANY
   ============================================================ */
.work-visuals {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin:                24px 0 56px;
}

.work-visuals img {
  width:         100%;
  height:        200px;
  object-fit:    cover;
  display:       block;
  border:        1px solid var(--border);
  border-radius: var(--card-r);
}

.work-visuals .placeholder-image { height: 200px; margin: 0; }

.work-photo { margin: 24px 0 0; max-width: 860px; }

.work-photo img {
  width:         100%;
  height:        auto;
  display:       block;
  border:        1px solid var(--border);
  border-radius: var(--card-r);
}

.work-photo figcaption {
  font-size:   0.9375rem;
  color:       var(--text-sub);
  line-height: 1.75;
  margin-top:  12px;
  text-align:  left;
}

/* ---------- Reasons: リード + 2カラムカード ---------- */
.reasons-lead {
  max-width:     820px;
  margin-top:    0;
  margin-bottom: 32px;
}

.reasons-lead-title {
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--text);
  margin-bottom:  14px;
  letter-spacing: -0.015em;
}

.reasons-lead-text {
  font-size:     1.0625rem;
  color:         var(--text-sub);
  line-height:   1.8;
  margin-bottom: 32px;
}

.reasons-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
}

.reason-card {
  background:    var(--bg-white);
  border:        1px solid var(--border);
  border-radius: var(--card-r);
  padding:       28px;
}

.section-alt .reason-card { background: var(--bg-white); }

.reason-card:last-child { grid-column: 1 / -1; }

.reason-num {
  font-family:    var(--font-mono);
  font-size:      1rem;
  font-weight:    700;
  background:     var(--corp);
  color:          #181816;
  padding:        6px 10px;
  display:        inline-block;
  letter-spacing: 0.06em;
  margin-bottom:  14px;
  border-radius:  3px;
}

.reason-body { /* wrapper — no grid inside */ }

.reason-title {
  font-size:      1.25rem;
  font-weight:    700;
  margin-bottom:  10px;
  color:          var(--text);
  line-height:    1.4;
  letter-spacing: -0.01em;
}

.reason-card p {
  font-size:   1rem;
  color:       var(--text-sub);
  line-height: 1.8;
}

/* ============================================================
   SECTION 03: DAILY SCHEDULE
   3カラムgrid: 80px(時間) | 32px(点) | 1fr(本文)
   縦線 center = 80px + 16px = 96px
   ============================================================ */
.timeline {
  position: relative;
  max-width: 860px;
}

/* 縦線: 時間col(80px) + 点col中央(16px) = 96px */
.timeline::before {
  content:    "";
  position:   absolute;
  left:       96px;
  top:        0;
  bottom:     0;
  width:      1px;
  background: var(--border);
  z-index:    0;
}

.timeline-item {
  display:               grid;
  grid-template-columns: 80px 32px 1fr;
  gap:                   0;
  align-items:           start;
  padding:               22px 0;
}

.timeline-item.timeline-last { margin-bottom: 0; }

.timeline-time {
  font-family:   var(--font-mono);
  font-size:     1rem;
  font-weight:   600;
  color:         var(--accent);
  text-align:    right;
  padding-right: 12px;
  padding-top:   0;
  white-space:   nowrap;
  line-height:   1.5;
}

/* 点: 32px列の中央に配置、padding-topで本文タイトルと高さを合わせる */
.timeline-dot {
  display:         flex;
  justify-content: center;
  padding-top:     5px;
  position:        relative;
  z-index:         1;
}

.timeline-dot::before {
  content:       "";
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--accent);
  border:        2px solid var(--bg-white);
  flex-shrink:   0;
  display:       block;
}

/* 本文: 左パディングで縦線から離す */
.timeline-body {
  padding-left: 16px;
  padding-top:  0;
  position:     relative;
}

/* 旧 ::before ドットは非表示 */
.timeline-body::before { display: none; }

.timeline-break .timeline-time  { color: var(--text-muted); font-weight: 400; }
.timeline-break .timeline-title { color: var(--text-muted); font-weight: 400; }
.timeline-break .timeline-dot::before { background: var(--border-light); border-color: var(--bg-white); }
.timeline-last  .timeline-dot::before { background: var(--border); border-color: var(--bg-white); }

.timeline-title {
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 4px;
  color:         var(--text);
  line-height:   1.5;
}

.timeline-body p {
  font-size:     0.9375rem;
  color:         var(--text-sub);
  line-height:   1.85;
  margin-bottom: 8px;
}

.timeline-body p:last-child { margin-bottom: 0; }

/* ============================================================
   SECTION 04: FIT / NOT FIT
   ============================================================ */
.fit-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   40px;
}

.fit-card {
  padding:       36px;
  border:        1px solid;
  border-radius: 20px;
  height:        100%;
}

.fit-yes { background: var(--yes-bg); border-color: var(--yes-border); }
.fit-no  { background: var(--no-bg);  border-color: var(--no-border); }

.fit-label {
  display:      inline-block;
  font-size:    0.8125rem;
  font-weight:  700;
  padding:      3px 10px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.fit-yes .fit-label { background: var(--yes-text); color: #fff; }
.fit-no  .fit-label { background: var(--no-text);  color: #fff; }

.fit-list { list-style: none; padding: 0; margin: 0; }

.fit-list li {
  position:      relative;
  padding-left:  18px;
  font-size:     1.0625rem;
  color:         var(--text);
  line-height:   1.9;
  margin-bottom: 16px;
}

.fit-yes .fit-list li::before {
  content:     "·";
  position:    absolute;
  left:        0;
  top:         0;
  font-size:   1.3rem;
  color:       var(--yes-text);
  font-weight: 700;
  line-height: 1.6;
}

.fit-no .fit-list li::before {
  content:     "·";
  position:    absolute;
  left:        0;
  top:         0;
  font-size:   1.3rem;
  color:       var(--no-text);
  font-weight: 700;
  line-height: 1.6;
}

/* ============================================================
   SECTION 05: SKILLS
   ============================================================ */
.skills-layout {
  display:               grid;
  grid-template-columns: 1fr 280px;
  gap:                   36px;
  align-items:           start;
}

.skills-table { width: 100%; border-collapse: collapse; }

.skills-table tbody tr { border-bottom: 1px solid var(--border-light); }
.skills-table tbody tr:last-child { border-bottom: none; }

.skills-table td {
  padding:        14px 0;
  vertical-align: top;
  font-size:      1rem;
}

.skills-table .sk-name {
  font-weight:   600;
  color:         var(--text);
  width:         38%;
  padding-right: 24px;
  white-space:   nowrap;
}

.skills-table .sk-desc {
  color:       var(--text-sub);
  font-size:   0.9375rem;
  line-height: 1.65;
}

.skills-visual img {
  width:         100%;
  height:        260px;
  object-fit:    cover;
  display:       block;
  border:        1px solid var(--border);
  border-radius: var(--card-r);
}

.skills-visual figcaption {
  font-size:   0.9375rem;
  color:       var(--text-sub);
  line-height: 1.75;
  margin-top:  12px;
  text-align:  left;
}

/* ============================================================
   SECTION 06: ONBOARDING — 横3ステップカード
   ============================================================ */
.phase-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  margin-bottom:         24px;
}

.phase-card {
  background:     var(--bg-white);
  border:         1px solid var(--border);
  border-radius:  var(--card-r);
  padding:        24px;
  display:        flex;
  flex-direction: column;
}

.section-alt .phase-card { background: var(--bg-white); }

.phase-badge {
  display:        inline-block;
  font-family:    var(--font-mono);
  font-size:      1rem;
  font-weight:    700;
  background:     var(--corp);
  color:          #181816;
  padding:        6px 10px;
  border-radius:  3px;
  letter-spacing: 0.08em;
  margin-bottom:  12px;
}

.phase-period {
  font-family:    var(--font-mono);
  font-size:      0.6875rem;
  color:          var(--text-muted);
  margin-bottom:  10px;
  letter-spacing: 0.02em;
}

.phase-title {
  font-size:     1.125rem;
  font-weight:   700;
  color:         var(--text);
  line-height:   1.45;
  margin-bottom: 8px;
}

.phase-body {
  font-size:   0.9375rem;
  color:       var(--text-sub);
  line-height: 1.85;
}

/* 旧 onboarding-steps は非表示 */
.onboarding-steps { display: none; }

/* ============================================================
   SECTION 07: CULTURE
   ============================================================ */
.culture-list { max-width: 920px; margin-bottom: 24px; }

.culture-item {
  padding:       36px 0;
  border-bottom: 1px solid var(--border-light);
}

.culture-item:first-child { border-top: 1px solid var(--border-light); }

.culture-item-title {
  font-size:      1.125rem;
  font-weight:    700;
  color:          var(--text);
  margin-top:     0;
  margin-bottom:  18px;
  letter-spacing: -0.01em;
  line-height:    1.45;
}

.culture-item p {
  font-size:   1.0625rem;
  color:       var(--text-sub);
  line-height: 1.9;
}

.culture-item .bullet-list li {
  font-size:   1.0625rem;
  line-height: 1.9;
}

.culture-note {
  font-size:     0.875rem !important;
  color:         var(--text-muted) !important;
  margin-top:    8px;
  margin-bottom: 28px;
}

/* ============================================================
   SECTION 08: CONDITIONS  /  SECTION 11: COMPANY INFO
   ============================================================ */
.info-table-wrap { max-width: 1080px; }

.info-table {
  width:           100%;
  border-collapse: collapse;
}

.info-table tr { border-bottom: 1px solid #E5E2DA; }
.info-table tr:first-child { border-top: 1px solid #E5E2DA; }

.info-table th,
.info-table td {
  text-align:     left;
  padding:        22px 24px;
  vertical-align: middle;
}

.info-table th {
  background:  #F3F3F0;
  font-weight: 700;
  color:       var(--text);
  width:       200px;
  white-space: nowrap;
}

.info-table td {
  background:  #FFFFFF;
  font-size:   1rem;
  line-height: 1.9;
  color:       var(--text-sub);
  padding:     22px 20px;
}

/* 長文セルは上寄せ */
.info-table td:has(p) { vertical-align: top; }
.info-table td p { margin-bottom: 14px; }
.info-table td p:last-child { margin-bottom: 0; }

.info-table td a { color: #1A6EBD; text-decoration: underline; }

/* ============================================================
   FV PHOTO (below FV)
   ============================================================ */
.fv-photo-strip {
  overflow:   hidden;
  max-height: 420px;
  border-bottom: 1px solid var(--border-light);
}

.fv-photo-strip img {
  width:      100%;
  height:     420px;
  object-fit: cover;
  object-position: center 30%;
  display:    block;
}

/* ============================================================
   BREATHING POINT (section transition)
   ============================================================ */
.breath-block {
  padding:    40px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.breath-text {
  max-width:  560px;
  margin:     0 auto;
  font-size:  0.9375rem;
  color:      var(--text-muted);
  line-height: 1.85;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ============================================================
   PRE-CTA VOICE (quote before CTA)
   ============================================================ */
.pre-cta-voice {
  max-width:     480px;
  margin:        0 auto 28px;
  padding:       16px 20px;
  border-left:   3px solid var(--corp);
  background:    var(--bg-white);
  border-radius: 0 6px 6px 0;
}

.pre-cta-voice p {
  font-size:     1rem;
  line-height:   1.75;
  color:         var(--text);
  font-style:    italic;
  margin-bottom: 6px;
}

.pre-cta-voice span {
  font-size: 0.8125rem;
  color:     var(--text-muted);
}

/* ============================================================
   DETAILS ACCORDION (company info 事業内容)
   ============================================================ */
.td-details-toggle {
  margin-top: 10px;
}

.td-more-btn {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   0.875rem;
  color:       #1A6EBD;
  cursor:      pointer;
  list-style:  none;
  padding:     4px 0;
  user-select: none;
}
.td-more-btn::-webkit-details-marker { display: none; }
.td-more-btn::after {
  content:     "▾";
  font-size:   0.75rem;
  transition:  transform 0.2s;
}
.td-details-toggle[open] .td-more-btn::after { transform: rotate(180deg); }
.td-details-toggle[open] .td-more-btn       { color: var(--text-muted); }

.td-more-content { margin-top: 10px; }
.td-more-content p + p { margin-top: 10px; }

.td-details-toggle[open] .td-more-content {
  animation: tdFadeIn 0.22s ease;
}
@keyframes tdFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .fv-photo-strip img { height: 260px; }
  .breath-block { padding: 28px 0; }
  .breath-text  { font-size: 0.875rem; padding: 0 20px; }
}

/* ---------- SP Mid CTA ---------- */
.sp-midcta {
  background:    var(--bg-alt);
  border-top:    1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding:       32px 0;
  display:       none; /* デスクトップでは非表示 */
}
.sp-midcta-text {
  font-size:     1rem;
  color:         var(--text-sub);
  line-height:   1.8;
  margin-bottom: 20px;
  word-break:    keep-all;
  overflow-wrap: break-word;
}
.sp-midcta-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          54px;
  font-size:       1rem;
  font-weight:     700;
  margin-top:      24px;
  margin-bottom:   0;
  border-radius:   4px;
  text-decoration: none;
}

.real-extra-wrap { display: none; }

/* ============================================================
   MID-PAGE CTA
   ============================================================ */
.midcta-bar {
  padding:       32px 0;
  background:    var(--bg-alt);
  border-top:    1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.midcta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             28px;
  max-width:       var(--max-w);
  margin:          0 auto;
  padding:         0 32px;
}

.midcta-text { font-size: 1rem; color: var(--text-sub); line-height: 1.65; }

/* ============================================================
   SECTION 09: REAL FRAGMENTS — 業務ボード型
   ============================================================ */
.workspace-frame {
  background: transparent;
  padding:    0;
}

.frags-masonry {
  columns:    2;
  column-gap: 40px;
}

.frag { break-inside: avoid; margin-bottom: 48px; }

/* Photo fragment */
.frag-photo {
  overflow:      hidden;
  border:        1px solid var(--border);
  border-radius: 12px;
}

.frag-photo img { width: 100%; height: auto; display: block; }

.frag-photo-cap {
  background:  var(--bg-alt);
  border-top:  1px solid var(--border-light);
  padding:     10px 14px;
  font-size:   0.9375rem;
  color:       var(--text-sub);
  line-height: 1.75;
  text-align:  left;
}

/* ---------- Teams thread ---------- */
.frag-teams-thread {
  background:    #fff;
  border:        1px solid #D1D1D6;
  overflow:      hidden;
  border-radius: 12px;
}

.tms-header {
  background:    #464775;
  padding:       8px 12px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  border-radius: 8px 8px 0 0;
}
.tms-icon {
  width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.tms-ch { color: #fff; font-size: 0.75rem; font-weight: 700; flex: 1; letter-spacing: 0.01em; }
.tms-ws { color: rgba(255,255,255,0.45); font-size: 0.5625rem; letter-spacing: 0.02em; }

.tms-body { padding: 6px 0; }

.tms-msg { display: flex; gap: 9px; padding: 4px 12px 5px; }
.tms-msg:hover { background: #F5F5FA; }

.tms-av {
  width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

.tms-content { min-width: 0; flex: 1; }

.tms-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.tms-name { font-size: 0.875rem; font-weight: 700; color: #141414; }
.tms-ts   { font-family: var(--font-mono); font-size: 0.5625rem; color: #B0AEB8; }

.tms-content p { font-size: 0.875rem; color: #1D1D1B; line-height: 1.62; margin: 0; }

.tms-attach {
  font-family: var(--font-mono); font-size: 0.625rem; color: #464775;
  background: #EEEEFF; border: 1px solid #C8C8E8; padding: 2px 7px;
  margin-top: 4px; display: inline-block; border-radius: 3px;
}

.tms-react {
  font-size: 0.625rem; background: #F0F0F8; border: 1px solid #D4D4E8;
  padding: 1px 6px; margin-top: 3px; display: inline-block;
  border-radius: 10px; color: #444;
}

.tms-reply { font-family: var(--font-mono); font-size: 0.625rem; color: #464775; margin-top: 3px; }
.tms-reply span { color: #B0AEB8; margin-left: 4px; }

/* ---------- Sticky notes ---------- */
.frag-stickies {
  display:       flex;
  flex-wrap:     wrap;
  gap:           10px;
  align-items:   flex-start;
  background:    #ECEAE4;
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       16px;
  position:      relative;
}

.frag-stickies::before { display: none; }

.sticky {
  width:      calc(50% - 5px);
  min-width:  140px;
  max-width:  220px;
  min-height: 80px;
  padding:    11px 12px 13px;
  font-family: var(--font-mono);
  font-size:   0.75rem;
  line-height: 1.7;
  color:       #1A1A18;
  box-shadow:  0 2px 6px rgba(0,0,0,0.08);
  position:    relative;
}

.sticky p { margin: 0; }

.sticky-ttl {
  font-weight:    700;
  border-bottom:  1px solid rgba(0,0,0,0.10);
  padding-bottom: 5px;
  margin-bottom:  6px !important;
  display:        block;
}

.sticky-yellow { background: #FFF6B8; }
.sticky-blue   { background: #D4EEFF; }
.sticky-green  { background: #D2F5D2; }

/* ---------- MTG notes ---------- */
.frag-mtgnote {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.mtgn-head {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light); padding-bottom: 8px; margin-bottom: 12px;
}

.mtgn-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.mtgn-label {
  font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px;
}

.mtgn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }

.mtgn-list li {
  font-size: 0.8125rem; color: var(--text-sub); line-height: 1.5;
  padding-left: 12px; position: relative;
}

.mtgn-list li::before {
  content: "·"; position: absolute; left: 0;
  color: var(--text-muted); font-size: 1rem; line-height: 1.45;
}

.mtgn-em { color: #A03800 !important; font-style: italic; }

/* ---------- Sample checklist ---------- */
.frag-chklist {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px;
}

.chk-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light); padding-bottom: 8px; margin-bottom: 8px;
}

.chk-date { font-weight: 400; }

.chk-project { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-sub); margin-bottom: 8px; }

.chk-rows { display: flex; flex-direction: column; }

.chk-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border-light);
  font-size: 0.8125rem; color: var(--text);
}

.chk-row:last-child { border-bottom: none; }
.chk-mark { font-family: var(--font-mono); width: 14px; flex-shrink: 0; }
.chk-row span:nth-child(2) { flex: 1; line-height: 1.4; }

.chk-tag {
  font-family: var(--font-mono); font-size: 0.5625rem;
  padding: 1px 5px; border: 1px solid var(--border);
  border-radius: 3px; flex-shrink: 0; color: var(--text-muted);
}

.chk-row.chk-ok .chk-mark        { color: #3A7A3A; }
.chk-row.chk-ok span:nth-child(2) { color: var(--text-muted); }
.tag-ok  { background: #EBF5EB; border-color: #9CC89C !important; color: #3A6A3A !important; }

.chk-row.chk-warn .chk-mark        { color: #A04800; }
.chk-row.chk-warn span:nth-child(2) { color: #A04800; }
.tag-warn { background: #FFF3E0; border-color: #E8A840 !important; color: #904000 !important; }

.chk-note {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--text-muted); font-style: italic; margin-top: 8px;
}

/* ---------- WeChat ---------- */
.frag-wechat {
  background: #EBEBEB; border: 1px solid #D4D0CC;
  overflow: hidden; border-radius: 12px;
}

.wc-head {
  background: #1A1A1A; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 8px 8px 0 0;
}

.wc-icon  { font-size: 0.9375rem; }
.wc-name  { color: #fff; font-size: 0.8125rem; font-weight: 600; flex: 1; }

.wc-badge {
  font-family: var(--font-mono); font-size: 0.4375rem;
  color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08);
  padding: 2px 5px; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px;
}

.wc-msgs { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

.wc-msg  { display: flex; }
.wc-me   { justify-content: flex-end; }
.wc-them { justify-content: flex-start; }

.wc-bubble { max-width: 82%; padding: 7px 11px; font-size: 0.8125rem; line-height: 1.58; }
.wc-them .wc-bubble { background: #fff; border-radius: 0 6px 6px 6px; }
.wc-me   .wc-bubble { background: #95EC69; border-radius: 6px 0 6px 6px; }

.wc-tl { display: block; font-size: 0.5625rem; color: #888; margin-top: 3px; font-style: italic; }

/* ---------- Fragment label titles ---------- */
.frag-label {
  font-size:     1.0625rem;
  font-weight:   700;
  color:         var(--text);
  padding-left:  12px;
  border-left:   3px solid var(--corp);
  margin-bottom: 18px;
  line-height:   1.4;
  break-inside:  avoid;
  break-after:   avoid;
}

/* ---------- Voice quotes: standalone section ---------- */
.voice-section {
  margin-top: 56px;
}

.voice-section-title {
  font-size:      1.875rem;
  font-weight:    700;
  color:          var(--text);
  padding-left:   14px;
  border-left:    4px solid var(--corp);
  margin-bottom:  28px;
  line-height:    1.35;
  letter-spacing: -0.01em;
}

.voice-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
}

.voice-card {
  background:    var(--bg-white);
  border:        1px solid var(--border);
  border-radius: var(--card-r);
  padding:       32px;
  min-height:    220px;
}

/* ---------- Voice quotes: 見出し H3相当 ---------- */
.vraw-group-title {
  font-size:      1.375rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--text);
  border-left:    3px solid var(--corp);
  padding-left:   12px;
  margin-bottom:  20px;
  line-height:    1.4;
}

.frag-vraw-group {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px;
}

.frag-vraw {
  padding:       10px 0;
  border-bottom: 1px solid var(--border-light);
}

.frag-vraw:last-child  { border-bottom: none; padding-bottom: 0; }
.frag-vraw:first-child { padding-top: 0; }

.vraw-q {
  font-size:   1.1875rem;
  font-weight: 600;
  color:       var(--text);
  line-height: 1.75;
  margin:      0 0 12px;
}

.vraw-now {
  font-size:    1rem;
  color:        var(--text-sub);
  margin-top:   0;
  padding-left: 12px;
  border-left:  3px solid var(--corp);
  line-height:  1.8;
  margin-bottom: 12px;
}

.vraw-who {
  font-size:  0.875rem;
  color:      var(--text-muted);
  margin-top: 0;
}

/* ============================================================
   SECTION 10: CAREER DISCUSSION
   ============================================================ */
#career .prose {
  max-width:      1040px;
  font-size:      1.0625rem;
  line-height:    1.9;
  letter-spacing: 0.01em;
  text-wrap:      pretty;
  word-break:     keep-all;
  overflow-wrap:  break-word;
}
#career .prose p + p { margin-top: 10px; }

.career-list { margin: 16px 0 20px; max-width: 760px; }

/* ---------- Flow steps: 横4カード ---------- */
.flow-steps {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
  margin-top:            24px;
}

.flow-step {
  background:     var(--bg-white);
  border:         1px solid var(--border);
  border-radius:  var(--card-r);
  padding:        22px;
  display:        flex;
  flex-direction: column;
}

.section-alt .flow-step { background: var(--bg-white); }

.flow-step-num {
  font-family:    var(--font-mono);
  font-size:      1rem;
  font-weight:    700;
  color:          var(--accent);
  background:     var(--accent-light);
  border:         1px solid #C8DCED;
  padding:        6px 10px;
  display:        inline-block;
  letter-spacing: 0.08em;
  margin-bottom:  12px;
  border-radius:  3px;
}

.flow-step-offer .flow-step-num {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.flow-step-name {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 6px;
  line-height:   1.45;
}

.flow-step-offer .flow-step-name { color: var(--accent); }

.flow-step-desc {
  font-size:   0.9375rem;
  color:       var(--text-sub);
  line-height: 1.8;
}

/* 旧 steps-list / steps-table は非表示 */
.steps-list  { display: none; }
.steps-table { display: none; }

/* ============================================================
   SECTION 11: CLOSING
   ============================================================ */
.section-closing {
  background:  var(--bg-white);
  border-top:  1px solid var(--border-light);
  padding:     72px 0 80px;
}

.closing-inner { max-width: 860px; margin: 0 auto; }

.closing-lead {
  font-size:      1.375rem;
  font-weight:    700;
  color:          var(--text);
  line-height:    1.5;
  margin-bottom:  24px;
  letter-spacing: -0.01em;
}

.closing-body {
  font-size:     1.0625rem;
  color:         var(--text-sub);
  line-height:   1.95;
  margin-bottom: 20px;
}

.closing-reason {
  font-size:    0.9375rem;
  color:        var(--text-muted);
  line-height:  1.75;
  margin-top:   20px;
  padding-left: 14px;
  border-left:  2px solid var(--border);
}

.entry-block {
  margin-top: 32px;
  text-align: left;
}

.entry-note {
  font-size:   0.8125rem;
  color:       var(--text-muted);
  margin-top:  12px;
  line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #1A1918; color: #8A8880; padding: 36px 0; }

.footer-inner { text-align: center; }

.footer-company {
  font-size: 0.9375rem; font-weight: 700; color: #D8D6D0;
  margin-bottom: 12px; letter-spacing: 0.02em;
}

.footer-sub    { margin-bottom: 16px; }
.footer-link   { font-size: 0.8125rem; color: #6A6860; text-decoration: underline; }
.footer-link:hover { color: #A8A69E; }
.footer-copy   { font-size: 0.6875rem; color: #484644; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .container    { padding: 0 24px; }
  .header-inner { padding: 0 24px; }
  .midcta-inner { padding: 0 24px; }
  .skills-layout { grid-template-columns: 1fr 220px; gap: 28px; }
}

@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .work-photo { margin-bottom: 28px; }
  .phase-cards + .callout-block,
  .flow-steps  + * { margin-top: 40px; }
  .reasons-grid  { grid-template-columns: 1fr; }
  .reason-card:last-child { grid-column: auto; }
  .voice-cards   { grid-template-columns: 1fr; gap: 16px; }
  .skills-layout { grid-template-columns: 1fr 200px; }
  .midcta-inner  { flex-direction: column; align-items: flex-start; }
  .flow-steps    { grid-template-columns: repeat(2, 1fr); }
  .phase-cards   { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
  /* 【1】横スクロール防止 */
  html, body    { overflow-x: hidden; }
  img           { max-width: 100%; height: auto; }
  table         { max-width: 100%; }

  .container {
    width:         100%;
    max-width:     100%;
    padding-left:  20px;
    padding-right: 20px;
    box-sizing:    border-box;
    overflow:      visible;
  }

  body { font-size: 0.96875rem; line-height: 1.95; }

  /* SP全体: p の自然改行・行間 */
  p {
    word-break:     normal;
    overflow-wrap:  break-word;
    line-break:     strict;
    hyphens:        none;
    line-height:    1.9;
    letter-spacing: 0.01em;
  }

  .section         { padding: 72px 0; }
  .section-fv      { padding: 40px 0 56px; }
  .section-closing { padding: 72px 0; }

  .section-header { margin-bottom: 28px; }
  .section-title  { font-size: 1.625rem; }
  .section-desc   {
    font-size:      1rem;
    max-width:      none;
    line-height:    1.85;
    letter-spacing: 0.01em;
    margin-bottom:  0;
  }

  .prose {
    font-size:      1rem;
    max-width:      none;
    letter-spacing: 0.01em;
    line-height:    1.9;
    word-break:     normal;
    overflow-wrap:  break-word;
    line-break:     strict;
    hyphens:        none;
  }
  .prose p        { margin-bottom: 16px; }
  .prose p + p    { margin-top: 0; }
  .bullet-list li {
    position:      relative;
    font-size:     1rem;
    line-height:   1.9;
    margin-bottom: 12px;
    padding-left:  1.25em;
    word-break:    normal;
    overflow-wrap: break-word;
    line-break:    strict;
    hyphens:       none;
  }
  .bullet-list li::before {
    position:    absolute;
    left:        0;
    top:         0;
    font-size:   1rem;
    line-height: 1.9;
  }
  .bullet-list li + li { margin-top: 0; }
  .timeline-body p { font-size: 0.9375rem; line-height: 1.8; }

  .header-inner { padding: 0 20px; height: 50px; }
  .header-badge { display: none; }

  /* FV */
  .fv-wrap    { max-width: 100%; }
  .fv-br-hide { display: inline; }
  .fv-heading {
    font-size:      clamp(1rem, 5vw, 1.875rem);
    line-height:    1.15;
    letter-spacing: -0.03em;
    word-break:     keep-all;
    text-wrap:      pretty;
    max-width:      100%;
    margin-bottom:  32px;
  }
  .fv-subtext { font-size: 0.96875rem; }
  .fv-meta-grid     { gap: 14px 24px; }
  .fv-scroll-cue    { margin-top: 28px; }

  .work-visuals { grid-template-columns: 1fr 1fr; gap: 8px; }
  .work-visuals img:last-child { display: none; }
  .reasons-grid { grid-template-columns: 1fr; gap: 16px; }
  .reason-card:last-child { grid-column: auto; }
  .reason-card  {
    overflow:  visible;
    max-width: 100%;
    padding:   24px 20px;
  }
  .reason-title { font-size: 1.125rem; overflow: visible; word-break: normal; overflow-wrap: break-word; }
  .reason-card p { overflow: visible; word-break: normal; overflow-wrap: break-word; }

  /* timeline mobile: 3col 56px|18px|1fr, line@65px */
  .timeline::before  { left: 65px; }
  .timeline-item     { grid-template-columns: 56px 18px minmax(0, 1fr); padding: 18px 0; }
  .timeline-time     { font-size: 0.875rem; padding-right: 8px; }
  .timeline-body     { padding-left: 12px; min-width: 0; }

  /* fit */
  .fit-grid     { grid-template-columns: 1fr; gap: 12px; }
  .fit-card     { overflow: visible; padding: 24px 20px; }
  .fit-list li  {
    position:      relative;
    margin-bottom: 14px;
    padding-left:  1.25em;
    word-break:    normal;
    overflow-wrap: break-word;
    line-break:    strict;
  }
  .fit-list li::before {
    position:    absolute;
    left:        0;
    top:         0;
    font-size:   1rem;
    line-height: 1.9;
  }

  .skills-layout { grid-template-columns: 1fr; }
  .skills-visual { order: -1; }
  .skills-visual img { height: 200px; }
  .skills-table .sk-name { width: auto; white-space: normal; }
  .skills-table tbody tr { display: flex; flex-direction: column; padding: 12px 0; }
  .skills-table td { padding: 0; font-size: 1rem; }
  .skills-table .sk-desc { font-size: 0.9375rem; }

  .phase-cards { grid-template-columns: 1fr; gap: 16px; }

  /* callout block */
  .callout-block { padding: 24px 20px 28px; }
  .callout-block > p {
    font-size:     1rem;
    line-height:   1.9;
    margin-bottom: 14px;
  }
  .callout-block .bullet-list li { margin-bottom: 12px; font-size: 0.96875rem; }

  /* Topのリアル: 3枚のみ表示 */
  .frag-secondary { display: none; }

  /* キャリアディスカッション */
  #career .prose {
    max-width:     none;
    font-size:     1rem;
    word-break:    normal;
    overflow-wrap: break-word;
    line-break:    strict;
    hyphens:       none;
    text-wrap:     pretty;
    line-height:   1.9;
  }
  .career-list li:empty { display: none; }

  .culture-list { max-width: 100%; }
  .culture-item {
    padding:        24px 0 26px;
    display:        flex;
    flex-direction: column;
    gap:            14px;
  }
  /* flex gap で間隔を管理するので各要素のマージンをリセット */
  .culture-item .culture-item-title { margin-bottom: 0; }
  .culture-item p                    { margin-bottom: 0; }
  .culture-item p + p                { margin-top: 0; }
  .culture-item ul.bullet-list       { margin: 0; }
  .culture-item .bullet-list li      { margin-bottom: 10px; }
  .culture-item .culture-note        { margin-bottom: 0; }

  .info-table-wrap { max-width: 100%; }
  .info-table tr { border-bottom: none; }
  .info-table tr:first-child { border-top: none; }
  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .info-table th {
    border-top:     1px solid #E5E2DA;
    padding:        20px 20px 6px;
    font-size:      0.8125rem;
    letter-spacing: 0.02em;
    color:          var(--text-muted);
  }
  .info-table td {
    padding:       12px 20px 26px;
    border-bottom: 1px solid #E5E2DA;
    font-size:     1rem;
    line-height:   1.9;
    overflow:      visible;
    word-break:    normal;
    overflow-wrap: break-word;
    line-break:    strict;
  }
  .info-table td p { margin-bottom: 10px; }
  .info-table td p:last-child { margin-bottom: 0; }
  .info-table td a { font-size: 1rem; padding: 6px 0; display: inline-block; }
  .td-details-toggle { margin-top: 16px; }

  .midcta-bar   { padding: 24px 0; }
  .midcta-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 20px; }
  .midcta-text  { font-size: 1rem; }
  .midcta-inner .btn { width: 100%; text-align: center; }

  /* Real: SP 縦1カラム */
  .workspace-frame { padding: 0; }
  .frags-masonry {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    padding:        0;
    margin:         0;
    columns:        unset;
    overflow-x:     unset;
  }
  .frag-label { display: none; }
  .frag {
    flex:              unset;
    width:             100%;
    max-width:         100%;
    scroll-snap-align: unset;
    height:            auto;
    min-height:        unset;
    margin-bottom:     0;
    break-inside:      auto;
  }
  /* WeChat: 写真2枚の後ろへ（HTML順補正） */
  .frag-wechat       { order: 5; }
  .frag-photo        { width: 100%; }
  .frag-photo img    { width: 100%; height: auto; display: block; }
  .frag-photo-cap    { padding: 16px 18px; }
  .mtgn-body { grid-template-columns: 1fr; gap: 12px; }
  .sticky    { width: 100%; max-width: none; }

  .flow-steps { grid-template-columns: 1fr; gap: 16px; }
  .flow-step  { padding: 24px 20px 28px; }
  .phase-card { padding: 24px 20px 28px; }
  .flow-step-name { margin-bottom: 8px; }
  .flow-step-desc { font-size: 0.9375rem; line-height: 1.85; }

  .closing-inner  { max-width: 100%; }
  .closing-lead   {
    font-size:   1.375rem;
    max-width:   none;
    line-height: 1.45;
  }
  .closing-body   {
    font-size:      1rem;
    line-height:    1.9;
    letter-spacing: 0.01em;
    word-break:     normal;
    overflow-wrap:  break-word;
    line-break:     strict;
    hyphens:        none;
  }
  .entry-block    { margin-top: 28px; }
  .btn-xl,
  .btn-lg { width: 100%; display: flex; justify-content: center; }

  /* voice-cards → vertical stack on mobile */
  .voice-section { margin-top: 40px; }
  .voice-cards {
    display:               flex;
    flex-direction:        column;
    gap:                   18px;
    padding:               0;
    margin:                0;
    overflow-x:            unset;
    grid-template-columns: unset;
  }
  .voice-card {
    flex:              unset;
    width:             100%;
    scroll-snap-align: unset;
    min-height:        unset;
    height:            auto;
    overflow:          visible;
    padding:           24px 20px 28px;
    box-sizing:        border-box;
  }
  .vraw-q   { font-size: 1rem;      line-height: 1.85; }
  .vraw-now { font-size: 0.9375rem; line-height: 1.8; }
  .vraw-who { font-size: 0.8125rem; }

  .vraw-group-title { font-size: 1.125rem; }

  /* SP Mid CTA */
  .sp-midcta { display: block; }

  /* Topのリアル: 追加カード（初期非表示） */
  .frag-sp-extra {
    display: none;
    order:   10;
  }
  .frag-sp-extra.is-visible { display: block; }

  .real-extra-wrap {
    margin-top: 20px;
    text-align: center;
  }
  .real-extra-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       0.9375rem;
    color:           var(--accent);
    background:      var(--bg-alt);
    border:          1px solid var(--border);
    border-radius:   6px;
    padding:         10px 20px;
    cursor:          pointer;
    font-family:     var(--font);
    font-weight:     600;
  }
  .real-extra-arrow {
    display:    inline-block;
    transition: transform 0.2s;
    font-size:  0.75rem;
  }
  .real-extra-btn[aria-expanded="true"] .real-extra-arrow { transform: rotate(180deg); }

  /* 待遇: 追加行（初期非表示） */
  .conditions-extra { display: none; }
  .conditions-extra.is-open { display: table-row-group; }

  .conditions-toggle-wrap {
    padding:    16px 0;
    text-align: center;
  }
  .conditions-toggle-btn {
    font-size:   0.9375rem;
    color:       var(--accent);
    background:  transparent;
    border:      1px solid var(--border);
    border-radius: 6px;
    padding:     10px 20px;
    cursor:      pointer;
    font-family: var(--font);
    font-weight: 600;
    display:     inline-flex;
    align-items: center;
    gap:         6px;
  }
  .cond-arrow {
    display:    inline-block;
    transition: transform 0.2s;
    font-size:  0.75rem;
  }
  .conditions-toggle-btn[aria-expanded="true"] .cond-arrow { transform: rotate(180deg); }

  /* 会社概要: 追加行（初期非表示） */
  .company-extra { display: none; }
  .company-extra.is-open { display: table-row-group; }

  .company-toggle-wrap {
    padding:    16px 0;
    text-align: center;
  }
  .company-toggle-btn {
    font-size:   0.9375rem;
    color:       var(--accent);
    background:  transparent;
    border:      1px solid var(--border);
    border-radius: 6px;
    padding:     10px 20px;
    cursor:      pointer;
    font-family: var(--font);
    font-weight: 600;
    display:     inline-flex;
    align-items: center;
    gap:         6px;
  }
  .comp-arrow {
    display:    inline-block;
    transition: transform 0.2s;
    font-size:  0.75rem;
  }
  .company-toggle-btn[aria-expanded="true"] .comp-arrow { transform: rotate(180deg); }
}

/* ============================================================
   PC: toggle UI 非表示（情報は常時展開）
   ============================================================ */
@media (min-width: 769px) {
  .conditions-toggle-wrap,
  .company-toggle-wrap    { display: none; }
}

@media (max-width: 480px) {
  .container {
    padding-left:  18px;
    padding-right: 18px;
  }
  .section-title { font-size: 1.375rem; }
  .fv-heading   { font-size: clamp(1.5rem, 4.5vw, 1.75rem); line-height: 1.2; }
  .fv-meta-grid { grid-template-columns: 1fr; gap: 12px; }
  .work-visuals { grid-template-columns: 1fr; }
  .work-visuals img:last-child { display: block; }
  .midcta-inner { padding: 0 20px; }
  .sticky       { width: 100%; max-width: none; }
}