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

  :root {
    --red: #E60013;
    --red-dark: #C7000B;
    --text-dark: #595757;
    --text-black: #231815;
    --white: #ffffff;
  }

  body {
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    color: var(--text-black);
    overflow-x: hidden;
  }

  p { color: #1a1a1a; }

  /* ── HEADER ──（旧ローカルヘッダー。recruit-topbar には適用しない） */
  header:not(.recruit-topbar) {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 86px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 46px;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  .logo-mark {
    width: 34px;
    height: 34px;
    position: relative;
  }
  .logo-mark svg { width: 100%; height: 100%; }
  .logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: #231815;
    letter-spacing: 0.05em;
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 8px;
  }
  .hamburger span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: #231815;
  }

  /* ── HERO ── */
  /* ── PAGE HEADER (shared) ── */
  .page-header{width:100%;background:#fff;display:flex;align-items:stretch;overflow:hidden;position:relative;margin-top:86px;}
  .photo-wrap{flex:0 0 55%;position:relative;}
  .photo-inner{width:90%;margin:0 auto;clip-path:inset(0 100% 100% 0);animation:revealTopLeft .9s .1s cubic-bezier(.76,0,.24,1) forwards;}
  @keyframes revealTopLeft{0%{clip-path:inset(0 100% 100% 0);}100%{clip-path:inset(0 0% 0% 0);}}
  .photo-inner img{width:100%;height:auto;display:block;}
  .text-side{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 60px 0 100px;text-align:left;position:relative;opacity:0;transform:translateX(20px);animation:slideIn .6s .85s cubic-bezier(.22,1,.36,1) forwards;}
  .heading{font-family:'Poppins',sans-serif;font-size:clamp(28px,4.5vw,58px);font-weight:100;letter-spacing:-.01em;color:#1a1a1a;line-height:1.1;}
  .heading .accent{color:var(--red);}
  .sub{font-size:16px;font-weight:300;letter-spacing:.12em;color:#666;}
  .dot{display:none;}
  @keyframes dotPop{to{opacity:1;}}
  @keyframes slideIn{to{opacity:1;transform:translateX(0);}}

  /* ===== SCROLL REVEAL 共通 ===== */
  .reveal-section{
    opacity:0;
    transform:translateY(60px);
    will-change:opacity,transform;
  }
  .reveal-section.is-visible{
    animation:fadeUpSlow 1.6s .1s ease-out forwards;
  }
  @keyframes fadeUpSlow{
    0%{opacity:0;transform:translateY(60px);}
    60%{opacity:1;transform:translateY(12px);}
    100%{opacity:1;transform:translateY(0);}
  }

  .hero {
    padding-top: 86px;
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
  }
  .hero-photo {
    position: absolute;
    left: 0; top: 86px;
    width: 46%;
    height: 390px;
    overflow: hidden;
    border-radius: 0 0 0 0;
  }
  .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-content {
    margin-left: auto;
    width: 52%;
    padding: 80px 80px 80px 0;
    position: relative;
    z-index: 2;
  }
  .hero-en {
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #231815;
    white-space: nowrap;
  }
  .hero-en .red { color: var(--red); }
  .hero-ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    color: var(--text-dark);
    margin-top: 4px;
    letter-spacing: 0.1em;
  }
  .hero-dot {
    width: 14px;
    height: 14px;
    background: var(--red);
    margin-top: 20px;
    margin-left: auto;
  }

  /* ── TABS ── */
  .tabs-wrap {
    background: #fff;
    top: 86px;
    margin: 80px auto;
    z-index: 50;
  }
  .tabs {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 40px;
    height: 60px;
  }
  .tab-item {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: var(--text-dark);
    padding: 0 24px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    transition: color 0.2s;
  }
  .tab-item:hover { color: var(--red); }
  .tab-sep {
    color: var(--text-dark);
    font-size: 16px;
    opacity: 0.5;
  }

  /* タブのアンカー遷移で固定ヘッダー/タブに隠れないよう調整 */
  #number,
  #benefit,
  #welfare {
    scroll-margin-top: 180px;
  }

  /* ── SECTION COMMON ── */
  .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
  }
  .section-title-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 40px;
  }
  .section-en {
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    font-size: 50px;
    line-height: 1;
    color: #231815;
  }
  .section-en .red { color: var(--red); }
  .section-ja-sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: var(--text-dark);
  }

    .number-card-inner {
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      max-width: 100%;
    }

    .number-card-inner { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }

  /* ── CHARTS ROW ── */
  .charts-row {
    margin-bottom: 32px;
  }


  /* デフォルト: PC 用だけ表示、SP 用は常に非表示 */
  .charts-pc { display:block; width: 100%;
    height: auto;}
  .charts-sp { display:none;}

  /* スマホ幅ではグラフ自体を非表示にする */
  @media (max-width:768px){
    .charts-pc { display:none; }
    .charts-sp {display:block; width: 100%;
      height: auto;}
  }

  /* Donut chart */
  .chart-box {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
  }
  .chart-label {
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 16px;
    font-weight: 500;
  }
  .donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .donut-svg-wrap {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
  }
  .donut-center-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .donut-center-text .brand {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: #231815;
  }
  .donut-center-text .sub {
    font-size: 9px;
    color: var(--text-dark);
  }
  .donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dark);
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .legend-pct {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #231815;
    margin-left: auto;
    min-width: 28px;
    text-align: right;
  }

  /* Bar/line chart */
  .bar-chart-wrap {
    position: relative;
    height: 150px;
  }
  .bar-chart-svg { width: 100%; height: 100%; }
  .chart-years {
    display: flex;
    justify-content: space-between;
    padding: 4px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    color: var(--text-dark);
  }
  .chart-years span.current { color: var(--red); font-weight: 600; }

  /* ── STATS ── */
  .pc-row { display: flex; gap: 6px; }
  .stat-pill {
    background: linear-gradient(250deg, var(--red) 0%, var(--red-dark) 91%);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    color: #fff;
    flex: 1;
    min-height: 82px;
  }
  .stat-pill .label {
    font-size: 11px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.3;
    text-align: center;
    opacity: 0.95;
  }
  .stat-pill .value {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .stat-pill .value.sm { font-size: 22px; }
  .stat-pill .unit {
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
    opacity: 0.9;
  }
  .stat-pill.wide { flex: 2.5; }
  .stat-pill.xwide { flex: 4; }
  .stat-pill .salary-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
  }

  .stats-pc {
    display: block;
    width: 100%;
  }
  /* PC: 見出し・画像をコンテンツ幅に揃える */
  @media (min-width: 769px) {
    .number-card-inner > .sec-head,
    .charts-row,
    .stats-pc,
    .stats-sp {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .stats-sp{display:none;}
  @media (max-width:768px){
    .stats-pc{display:none;}
    .stats-sp {
    display: block;
    width: 100%;
}
  }
  .stat-pill .salary-item { text-align: center; }
  .stat-pill .salary-item .deg { font-size: 11px; opacity: 0.9; }
  .stat-pill .salary-item .amt { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; }
  .stat-pill .salary-sep { font-size: 10px; opacity: 0.6; }
  .gender-bar-wrap { width: 100%; margin: 4px 0 2px; }
  .gender-bar { display: flex; border-radius: 4px; overflow: hidden; height: 6px; }
  .gender-m { background: rgba(255,255,255,0.5); }
  .gender-f { background: rgba(255,255,255,0.9); }
  .gender-labels { display: flex; justify-content: space-between; font-size: 10px; margin-top: 2px; opacity: 0.9; }

  /* ── BENEFIT TABLE ── */
  .benefit-section { padding: 100px 0; }
  .benefit-section + .benefit-section { border-top: none; }
  .benefit-h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #231815;
    margin-bottom: 24px;
  }

  /* ── SECTION HEAD (sec-head style) ── */
  .sec-head { margin-bottom: 56px; }
  .sec-head h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 50px;
    font-weight: 100;
    line-height: 1;
    color: #000;
  }
  .sec-head h2 .r { color: var(--red); }
  .sec-head .ja {
    font-size: 16px;
    margin-top: 6px;
    font-weight: 300;
  }
  .benefit-table {
    width: 100%;
    border-collapse: collapse;
  }
  .benefit-table tr {
    border-bottom: 1px solid #ebebeb;
  }
  .benefit-table tr:first-child { border-top: 1px solid #ebebeb; }
  .benefit-table td {
    padding: 20px 0;
    font-size: 15px;
    color: #231815;
    vertical-align: top;
    line-height: 1.6;
  }
  .benefit-table td:first-child {
    width: 38%;
    font-size: 15px;
    color: var(--text-dark);
    padding-right: 24px;
  }
  .benefit-table td:last-child {
    color: var(--text-dark);
    font-size: 15px;
  }

  /* ── FOOTER BACK TO TOP ── */
  .back-top {
    text-align: center;
    padding: 40px 0 60px;
    border-top: 1px solid #e8e8e8;
  }
  .back-top a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #231815;
    text-decoration: underline;
  }

  /* ── DECORATIVE BG ── */
  .section-wrapper {
    position: relative;
  }
  .section-wrapper::before {
    content: '';
    position: absolute;
    right: -60px;
    top: 200px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(230,0,19,0.04) 0%, transparent 70%);
    pointer-events: none;
  }
  .number-section {
    width: 100%;
    max-width: 100%;
  }
  /* ══════════════════════════════
     MOBILE  ≤ 767px
  ══════════════════════════════ */
  @media (max-width: 767px) {

    /* Header */
    header:not(.recruit-topbar) {
      height: 60px;
      padding: 0 20px;
    }
    .logo-mark { width: 28px; height: 28px; }
    .logo-text { font-size: 8px; }

    /* Hero */
    .hero {
      padding-top: 60px;
      flex-direction: column;
      min-height: auto;
    }
    .hero-photo {
      position: relative;
      top: auto; left: auto;
      width: 100%;
      height: 220px;
    }
    .hero-content {
      width: 100%;
      padding: 28px 24px 32px;
      margin: 0;
    }
    .hero-en { font-size: 44px; }
    .hero-ja { font-size: 16px; }
    .hero-dot { margin-left: 0; }

    /* Tabs */
    .tabs-wrap {
      top: 60px;
      margin: 30px auto;
    }
    .tabs {
      height: auto;
      padding: 0 8px;
      gap: 0;
      flex-wrap: wrap;
      overflow-x: visible;
      justify-content: center;
      align-items: center;
    }
    .tab-item {
      font-size: 13px;
      padding: 14px 10px;
      white-space: normal;
      height: auto;
      line-height: 1.2;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .tab-sep {
      font-size: 13px;
      line-height: 1.2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      padding: 0 6px;
      /* 「/」がフォントボックス上寄りになりがちなので、文字に対して僅かに下げる */
      transform: translateY(0.08em);
    }

    #number {
      scroll-margin-top: 140px;
    }

    #benefit,
    #welfare {
      scroll-margin-top: 100px;
    }

    .reveal-section,
    .reveal-section.is-visible {
      width: calc(100% - 64px);
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Section */
    .section { padding: 48px 0px; }

    /* Number section */
    .number-section { padding: 40px 0; }
    .section-title-row { margin-bottom: 28px; gap: 10px; }
    .section-en { font-size: 34px; }
    .section-ja-sub { font-size: 13px; }

    /* Charts – stack vertically */
    .charts-row {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    /* Donut */
    .chart-box { padding: 18px; }
    .donut-wrap { gap: 16px; }
    .donut-svg-wrap { width: 120px; height: 120px; }
    .donut-legend { font-size: 10px; gap: 5px; }

    /* Bar chart */
    .bar-chart-wrap { height: 120px; }

    /* Stats – SP grid layout
       4列グリッド：
       "a a b b"   社員数 | 男女比
       "c d e f"   育休 | 年間 | 残業 | 年齢
       "g h j j"   売上 | 完全週休 | 新卒年収（rowspan2）
       "i i j j"   チームリーダー | 新卒年収（続き）
    */

    .pc-row { display: contents; } /* フラットに展開 */

    .sp-a { grid-area: a; }
    .sp-b { grid-area: b; }
    .sp-c { grid-area: c; }
    .sp-d { grid-area: d; }
    .sp-e { grid-area: e; }
    .sp-f { grid-area: f; }
    .sp-g { grid-area: g; }
    .sp-h { grid-area: h; }
    .sp-i { grid-area: i; }
    .sp-j { grid-area: j; }

    /* flexサイズ指定をリセット */
    .stat-pill,
    .stat-pill.wide,
    .stat-pill.xwide { flex: none; width: 100%; min-height: 72px; padding: 8px 6px; }

    .stat-pill .value { font-size: 22px; }
    .stat-pill .value.sm { font-size: 22px; }
    .stat-pill .unit { font-size: 10px; }
    .stat-pill .label { font-size: 9px; }

    /* 男女比 */
    .sp-b .value { font-size: 20px; letter-spacing: -1px; }
    .sp-b svg { width: 16px; height: 18px; }

    /* 新卒年収 – 縦スタック表示 */
    .sp-j .salary-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    .sp-j .salary-sep { display: none; }
    .sp-j .salary-item { display: flex; align-items: baseline; gap: 4px; }
    .sp-j .salary-item .deg { font-size: 11px; min-width: 24px; }
    .sp-j .salary-item .amt { font-size: 18px; font-family: 'Poppins', sans-serif; font-weight: 500; }
    .sp-j .salary-item .amt span { font-size: 11px; }

    /* Benefit table – stack label on top */
    .benefit-section {
      width: calc(100% - 64px);
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding: 40px 0;
    }
    .benefit-h3 { font-size: 18px; margin-bottom: 20px; }

    /* sec-head responsive */
    .sec-head { margin-bottom: 14px; }
    .sec-head h2 { font-size: 40px; }
    .sec-head .ja { font-size: 13px; }

    .benefit-table, .benefit-table tbody,
    .benefit-table tr, .benefit-table td {
      display: block;
      width: 100%;
    }
    .benefit-table tr { border-bottom: none; padding-bottom: 16px; margin-bottom: 4px; }
    .benefit-table tr:first-child { border-top: 1px solid #ebebeb; }
    .benefit-table tr { border-top: none; border-bottom: 1px solid #ebebeb; }
    .benefit-table td { padding: 0; }
    .benefit-table td:first-child {
      width: 100%;
      font-size: 13px;
      font-weight: 500;
      padding: 16px 0 4px;
      padding-right: 0;
    }
    .benefit-table td:last-child {
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-dark);
    }

    /* Back to top */
    .back-top { padding: 32px 0 48px; }
  }

  /* Mobile: h1 font-size unified across pages */
  @media (max-width: 768px) {
    .sub { font-size: 13px; }
    h1 { font-size: 40px !important; }
  }

  @media(max-width:600px){
    .page-header{flex-direction:column-reverse;margin-top:86px;}
    .photo-wrap{flex:none;width:100%;}
  .photo-inner{width:100%;animation:revealTopLeft .9s .2s cubic-bezier(.76,0,.24,1) forwards;}
    .text-side{padding:28px 24px;text-align:left;transform:translateY(16px);animation:slideInY .6s .55s cubic-bezier(.22,1,.36,1) forwards;}
    @keyframes slideInY{to{opacity:1;transform:translateY(0);}}
    .dot{bottom:20px;right:20px;}
    .heading{font-size:32px;}

    .benefit-section {
      width: calc(100% - 40px);
    }

    .reveal-section,
    .reveal-section.is-visible {
      width: calc(100% - 40px);
    }
  }

  /* PC: h2 font-size unified across pages */
  @media (min-width: 769px) {
    h2 { font-size: 50px; }
  }

  @media (max-width: 768px) {
    .photo-inner img { width: 90%; }
  }