/* =============================================
     TOKENS
  ============================================= */
  .wrapper-syoyo {
    --navy-deep:     #133284;
    --navy-mid:      #1A2E45;
    --navy-light:    #2A3F5F;
    --slate:         #8B9BB4;
    --slate-light:   #C4CEDB;
    --pink:          #e82782;
    --pink-light:    #f04fa0;
    --pink-dim:      rgba(232, 39, 130, 0.15);
    --pink-glow:     rgba(232, 39, 130, 0.35);
    --ice:           #F7F8FA;
    --white:         #FFFFFF;
    --taupe:         #9B8E82;
    --taupe-dim:     rgba(155, 142, 130, 0.2);

    --font-sans:     'Noto Sans JP', sans-serif;
    --font-num:      'Inter', sans-serif;

    --col-label:     164px;
    --row-height:    88px;
    --header-height: 52px;

    
    font-family: var(--font-sans);
    color: var(--navy-deep);
    padding: 48px 48px 80px;
  }

  /* =============================================
     RESET（スコープ限定）
  ============================================= */
  .wrapper-syoyo *,
  .wrapper-syoyo *::before,
  .wrapper-syoyo *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* =============================================
     PAGE HEADER
  ============================================= */
  .wrapper-syoyo .page-header {
    
    margin: 0 auto 40px;
  }

  .wrapper-syoyo .page-header__eyebrow {
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 10px;
  }

  .wrapper-syoyo .page-header__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--navy-deep);
    line-height: 1.2;
  }

  .wrapper-syoyo .page-header__sub {
    font-size: 15px;
    color: var(--slate);
    margin-top: 8px;
    font-weight: 400;
  }

  /* =============================================
     LEGEND
  ============================================= */
  .wrapper-syoyo .legend {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    flex-wrap: wrap;
  }

  .wrapper-syoyo .legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  
    font-family: var(--font-num);
  }

  .wrapper-syoyo .legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .wrapper-syoyo .legend__dot--pink  { background: var(--pink); }
  .wrapper-syoyo .legend__dot--taupe { background: var(--taupe); }

  .wrapper-syoyo .legend__badge {
    width: 32px;
    height: 14px;
    border: 1.5px solid var(--pink);
    border-radius: 3px;
  }

  /* =============================================
     SCHEDULE WRAPPER
  ============================================= */
  .wrapper-syoyo .schedule-wrap {
    
     
  margin: 0 auto;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
    box-shadow:
      0 1px 2px rgba(13,27,42,.04),
      0 4px 16px rgba(13,27,42,.08),
      0 0 0 1px rgba(13,27,42,.06);
  }

  /* =============================================
     GRID TABLE
  ============================================= */
  .wrapper-syoyo .schedule-table {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, 1fr);
    min-width: 800px;
    isolation: isolate;
  
   
  }

  /* ---- HEADER ROW ---- */
  .wrapper-syoyo .th {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-deep);
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: .04em;
    border-right: 1px solid rgba(255,255,255,.07);
  }

  .wrapper-syoyo .th--label {
    justify-content: flex-start;
    padding-left: 24px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--slate);
    text-transform: uppercase;
    background: var(--navy-deep);
    border-right: 1px solid rgba(255,255,255,.1);
       position: sticky;
  left: 0;
  z-index: 25;
  }

  .wrapper-syoyo .th--accent {
    background: var(--navy-mid);
  }

  .wrapper-syoyo .th--year-start {
    border-left: 2px solid rgba(232,39,130,.4);
  }

  /* ---- DATA ROWS ---- */
  .wrapper-syoyo .row {
    display: contents;
  }

  .wrapper-syoyo .row__label {
    display: flex;
  align-items: center;
  padding: 0 20px 0 24px;
  height: var(--row-height);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-deep);
  border-bottom: 1px solid var(--ice);
  border-right: 1px solid rgba(13,27,42,.06);
  background: var(--white);
  position: sticky;
  left: 0;
  z-index: 15;
  }

  .wrapper-syoyo .row__label::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--pink);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity .2s;
  }

  .wrapper-syoyo .row:hover .row__label::before { opacity: 1; }

  .wrapper-syoyo .row__cell {
    position: relative;
    height: var(--row-height);
    border-bottom: 1px solid var(--ice);
    border-right: 1px solid rgba(13,27,42,.04);
    background: var(--white);
    transition: background .15s;
    overflow: visible;
  }

  .wrapper-syoyo .row__cell--alt { background: #FAFBFC; }
  .wrapper-syoyo .row:hover .row__cell,
  .wrapper-syoyo .row:hover .row__cell--alt { background: #F3F6FA; }

  /* =============================================
     TIMELINE ELEMENTS
  ============================================= */
  .wrapper-syoyo .row__canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
  }

  /* Horizontal bar */
  .wrapper-syoyo .bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: var(--pink);
    border-radius: 1px;
    transform-origin: left center;
    animation: syoyo-barGrow .7s cubic-bezier(.4,0,.2,1) both;
    animation-play-state: paused;
  }

  .wrapper-syoyo.is-visible .bar {
    animation-play-state: running;
  }

  @keyframes syoyo-barGrow {
    from { transform: translateY(-50%) scaleX(0); }
    to   { transform: translateY(-50%) scaleX(1); }
  }

  /* Arrowhead */
  .wrapper-syoyo .bar__arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--pink);
  }

  /* Payment dot */
  .wrapper-syoyo .dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 4px var(--pink-glow);
    animation: syoyo-dotPop .4s .5s cubic-bezier(.34,1.56,.64,1) both;
    animation-play-state: paused;
  }

  .wrapper-syoyo.is-visible .dot {
    animation-play-state: running;
  }

  .wrapper-syoyo .dot--taupe {
    background: var(--taupe);
    box-shadow: 0 0 0 4px var(--taupe-dim);
  }

  @keyframes syoyo-dotPop {
    from { transform: translate(-50%,-50%) scale(0); opacity:0; }
    to   { transform: translate(-50%,-50%) scale(1); opacity:1; }
  }

  /* Evaluation badge */
  .wrapper-syoyo .badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    pointer-events: auto;
    z-index: 10;
      
  }

  .wrapper-syoyo .badge__pill {
    font-family: var(--font-num);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pink);
    border: 1.5px solid var(--pink);
    border-radius: 4px;
    padding: 2px 7px;
    background: var(--pink-dim);
    backdrop-filter: blur(4px);
  }

  /* Note balloon */
  .wrapper-syoyo .note {
    position: absolute;
    bottom: 10px;
    font-size: 10.5px;
    font-family: var(--font-num);
    font-weight: 500;
    color: var(--slate);
    background: var(--ice);
    border: 1px solid var(--slate-light);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
    z-index: 10;
  }

  /* =============================================
     SCROLL HINT
  ============================================= */
  .wrapper-syoyo .scroll-hint {
    display: none;
    text-align: center;
    font-size: 11px;
    color: var(--slate);
    margin-top: 12px;
    font-family: var(--font-num);
  }

  @media (max-width: 820px) {
   .wrapper-syoyo .schedule-wrap { overflow-x: auto; overflow-y: hidden; }
  .wrapper-syoyo .scroll-hint { display: block; }
  .wrapper-syoyo .th--label,
  .wrapper-syoyo .row__label {
    box-shadow: 2px 0 4px rgba(13,27,42,.06);
  }
      .wrapper-syoyo {padding: 0px}
      .wrapper-syoyo {
          --col-label: 120px;padding: 0px;
      --row-height:    60px;}
      .wrapper-syoyo .row__label{
          padding: 0px 8px
      }

  /* =============================================
     FOOTER NOTE
  ============================================= */
  .wrapper-syoyo .footer-note {
    
    margin: 20px auto 0;
    font-size: 14px;
   
    font-family: var(--font-num);
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .wrapper-syoyo .footer-note::before {
    content: '※';
    flex-shrink: 0;
    color: var(--pink);
  }
}
 /* ==============================
       全スタイルを .jc-wrap で完全スコープ
    ============================== */
  .jc-wrap { width: 100%; max-width: 1400px; margin-top: 3rem; }

    .jc-wrap .jc-outer {
        border-radius: 12px;
  overflow: hidden; grid-template-columns: 1fr 28px 28px 80px !important;
  background: #fff;
  border-right: 1px solid rgba(13,27,42,.06);
      box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 4px 16px rgba(13,27,42,.08), 0 0 0 1px rgba(13,27,42,.06);
    }

    .jc-wrap .jc-sp { display: none; }

    /* ==============================
       PC版
    ============================== */
    .jc-wrap .jc-pc-cols {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
    }
    .jc-wrap .jc-pc-col {
      border-right: 1px dashed #3b6ea5;
      padding: 1.25rem 0.75rem;
      display: flex; flex-direction: column;
      align-items: center; gap: 0.75rem;
    }
    .jc-wrap .jc-pc-col:last-child { border-right: none; }
    .jc-wrap .jc-pc-icon {
      width: 70px; height: 70px;
      border-radius: 50%;
      border: 1px solid #3b6ea5;
      display: flex; align-items: center; justify-content: center;
      color: #3b6ea5; overflow: hidden;
    }
    .jc-wrap .jc-pc-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .jc-wrap .jc-pc-icon i { font-size: 26px; }
    .jc-wrap .jc-pc-title { font-size: clamp(13px, 1rem, 18px); font-weight: 600; color: #1a3f6e; text-align: center; }
    .jc-wrap .jc-pc-desc  { font-size: clamp(12px, 0.85rem, 15px); color: #1a3f6e; line-height: 1.6; width: 100%; }

    .jc-wrap .jc-pc-banner-row { display: grid; grid-template-columns: repeat(5, 1fr); }
    .jc-wrap .jc-pc-banner-tech-wrap { grid-column: 1 / 5; padding: 6px 8px 4px 8px; border-right: 1px dashed #3b6ea5; }
    .jc-wrap .jc-pc-banner-spacer { grid-column: 5 / 6; }
    .jc-wrap .jc-pc-banner-human-wrap { padding: 0 8px 6px; }
    .jc-wrap .jc-pc-banner { padding: 0.6rem 1rem; font-size: clamp(12px, 0.85rem, 15px); font-weight: 600; color: #fff; border-radius: 4px; }
    .jc-wrap .jc-pc-banner.jc-tech  { background: #1e5192; }
    .jc-wrap .jc-pc-banner.jc-human { background: #163d6b; }

    .jc-wrap .jc-pc-lower { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 130px; }
    .jc-wrap .jc-pc-lower-col { border-right: 1px dashed #3b6ea5; }
    .jc-wrap .jc-pc-lower-col:last-child {
      border-right: none; padding: 0.6rem;
      display: flex; flex-direction: column; gap: 0.5rem; justify-content: center;
    }
    .jc-wrap .jc-pc-badge {
      background: #1e5192; color: #fff;
      border-radius: 6px; font-size: clamp(12px, 0.85rem, 15px); font-weight: 600;
      padding: 0.65rem 0.5rem; text-align: center; line-height: 1.45;
    }
/* =============================================
   位置・重なり順の、クラス（インラインスタイル、代替用）
============================================= */
.wrapper-syoyo .pos-center      { left: 50%; }
.wrapper-syoyo .pos-full        { left: 0; right: 0; }
.wrapper-syoyo .pos-badge       { left: 16px; }
.wrapper-syoyo .pos-end         { left: 0; right: 6px; }
.wrapper-syoyo .pos-note-center { left: 50%; transform: translateX(-40%); }
.wrapper-syoyo .z-top { z-index: 5; }
.wrapper-syoyo .z-mid { z-index: 3; }

/* 職種構成図（jc-wrap側）の、grid-row */
.jc-wrap .jc-sp-cell--1 { grid-row: 1; }
.jc-wrap .jc-sp-cell--2 { grid-row: 2; }
.jc-wrap .jc-sp-cell--3 { grid-row: 3; }
.jc-wrap .jc-sp-cell--4 { grid-row: 4; }
.jc-wrap .jc-sp-cell--5 { grid-row: 5; }
.jc-wrap .jc-sp-right-empty--1 { grid-row: 1; }
.jc-wrap .jc-sp-right-empty--2 { grid-row: 2; }
.jc-wrap .jc-sp-right-empty--3 { grid-row: 3; }
.jc-wrap .jc-sp-right-empty--4 { grid-row: 4; }
.jc-wrap .jc-sp-right-empty--no-border { border-bottom: none !important; }

    /* ==============================
       SP版（768px以下）
    ============================== */
    @media screen and (max-width: 768px) {
      body { padding: 0rem; }
      .jc-wrap .jc-pc { display: none !important; }
      .jc-wrap .jc-sp { display: block !important; }

      .jc-wrap .jc-sp-grid {
        display: grid !important;
       grid-template-columns: 1fr 30px 30px 100px !important;
        grid-template-rows: repeat(5, auto) !important;
        background: #fff;
      }

      /* 職種テキストセル */
      .jc-wrap .jc-sp-cell {
        grid-column: 1 / 2 !important;
        padding: 2rem !important;
        border-bottom: 1px dashed #3b6ea5 !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
      }
      .jc-wrap .jc-sp-cell.last { border-bottom: none !important; }
      .jc-wrap .jc-sp-title { font-size: 13px !important; font-weight: 600 !important; color: #1a3f6e !important; }
      .jc-wrap .jc-sp-desc  { font-size: 11px !important; color: #1a3f6e !important; line-height: 1.5 !important; margin-top: 2px !important; }

      /* tech縦帯：行1〜4 */
      .jc-wrap .jc-sp-tech {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 5 !important;
        background: #1e5192 !important;
        border-radius: 4px !important;
        margin: 11px 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
      }
      .jc-wrap .jc-sp-tech span {
        writing-mode: vertical-rl !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        display: block !important;
      }
      .jc-wrap .jc-sp-tech-empty {
        grid-column: 2 / 3 !important;
        grid-row: 5 / 6 !important;
        background: #fff !important;
        border-top: 1px dashed #3b6ea5 !important;
      }

      /* human縦帯：行1〜5 */
      .jc-wrap .jc-sp-human {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 6 !important;
        background: #163d6b !important;
        border-radius: 4px !important;
        margin: 11px 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
      }
      .jc-wrap .jc-sp-human span {
        writing-mode: vertical-rl !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        display: block !important;
      }

      /* 右列：行1〜4（空白） */
      .jc-wrap .jc-sp-right-empty {
        grid-column: 4 / 5 !important;
  background: #fff !important;
  border-bottom: 1px dashed #3b6ea5 !important;
      }

      /* 右列：行5（バッジ） */
      .jc-wrap .jc-sp-badges {
        grid-column: 4 / 5 !important;
        grid-row: 5 / 6 !important;
        background: #fff !important;
        padding: 1rem 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        justify-content: center !important;
        border-top: 1px dashed #3b6ea5 !important;
      }
      .jc-wrap .jc-sp-badge {
        background: #1e5192 !important;
        color: #fff !important;
        border-radius: 5px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        padding: 0.45rem 0.3rem !important;
        text-align: center !important;
        line-height: 1.4 !important;
        overflow-wrap: break-word !important;
      }
      
  .wrapper-syoyo .note {
   
    font-size: 10px;
        padding: 0px 2px;
    white-space: nowrap;
    z-index: 10;
  }

        /* =============================================
   位置・重なり順の、クラス（インラインスタイル、代替用）
============================================= */
.wrapper-syoyo .pos-center      { left: 50%; }
.wrapper-syoyo .pos-full        { left: 0; right: 0; }
.wrapper-syoyo .pos-badge       { left: 16px; }
.wrapper-syoyo .pos-end         { left: 0; right: 6px; }
.wrapper-syoyo .pos-note-center { left: 50%; transform: translateX(-40%); }
.wrapper-syoyo .z-top { z-index: 5; }
.wrapper-syoyo .z-mid { z-index: 3; }

/* 職種構成図（jc-wrap側）の、grid-row */
.jc-wrap .jc-sp-cell--1 { grid-row: 1; }
.jc-wrap .jc-sp-cell--2 { grid-row: 2; }
.jc-wrap .jc-sp-cell--3 { grid-row: 3; }
.jc-wrap .jc-sp-cell--4 { grid-row: 4; }
.jc-wrap .jc-sp-cell--5 { grid-row: 5; }
.jc-wrap .jc-sp-right-empty--1 { grid-row: 1; }
.jc-wrap .jc-sp-right-empty--2 { grid-row: 2; }
.jc-wrap .jc-sp-right-empty--3 { grid-row: 3; }
.jc-wrap .jc-sp-right-empty--4 { grid-row: 4; }
.jc-wrap .jc-sp-right-empty--no-border { border-bottom: none !important; }
    }