:root{
    --cream:#F7F4EC;
    --cream-deep:#EFE9DA;
    --ink:#2E2B25;
    --ink-soft:#655F52;
    --teal:#833b41;
    --teal-deep:#a73963;
    --teal-tint:#f2e8e6;
    --gold:#D9A24B;
    --gold-deep:#B9822E;
    --line:#DED4BC;
    --white:#FFFFFF;
    --shadow: 0 18px 40px -20px rgba(46,43,37,.25);
    --radius: 18px;
  }
  *{box-sizing:border-box;}
  
  /* ===== reveal ===== */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0); text-align: center;}

  /* ===== About ===== */
  .about{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding:96px 0;
}

  .about h2{font-size:clamp(24px,3vw,32px);margin:14px 0 22px;font-weight: 500;}
  .about p{color:var(--ink-soft);font-size:1.6rem;margin-bottom:14px;text-align: justify;}
  .about-figure{
    background:var(--teal-tint);
    border-radius:var(--radius);
    aspect-ratio:4/5;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
  }
  .about-figure .ring{
    position:absolute;border:1px solid rgba(12,133,119,.25);border-radius:50%;
  }
  .stat-row{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;}
  .stat{border-left:1px solid var(--line);padding-left:16px;}
  .stat strong{display:block;font-family:'Shippori Mincho',serif;font-size:28px;color:var(--teal-deep);}
  .stat span{font-size:12px;color:var(--ink-soft);}

  /* ===== Timeline sections (1-5) ===== */
  .timeline-wrap{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background:var(--white);
    padding:100px 0 110px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .timeline-head{text-align:center;max-width:640px;margin:0 auto 76px;}
  .timeline-head h2{font-size:clamp(24px,3vw,34px);margin:14px 0; font-weight: 500;}
  .timeline-head p{color:var(--ink-soft);font-size:1.6rem; text-align: justify;}
  .timeline{position:relative;}
  .timeline::before{
    content:"";position:absolute;left:39px;top:10px;bottom:10px;width:1px;
    background:repeating-linear-gradient(to bottom, var(--teal) 0 6px, transparent 6px 12px);
  }
  .t-item{
    display:grid;grid-template-columns:80px 1fr;gap:28px;
    padding-bottom:76px;position:relative;
  }
  .t-item:last-child{padding-bottom:0;}
  .t-badge{
    width:80px;height:80px;border-radius:50%;
    background:var(--cream);
    border:1px solid var(--teal);
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    position:relative;z-index:2;
  }
  .t-badge svg{width:26px;height:26px;margin-bottom:2px;}
  .t-badge span{font-family:'Shippori Mincho',serif;font-size:2.4rem;color:var(--teal-deep);font-weight:600;}
  .t-body{padding-top:10px;}
  .t-body .eyebrow{margin-bottom:8px;
font-size: 1.2rem;
color:var(--teal-deep);}
  .t-body h3{font-size:2.4rem;margin-bottom:16px;font-weight: 700;}
  .t-body p{color:var(--ink-soft);font-size:1.6rem;margin-bottom:14px;text-align: justify;}

  table.pay{
    width:100%;border-collapse:collapse;margin-top:18px;
    font-size:1.5rem;background:var(--cream);border-radius:12px;overflow:hidden;
  }
  table.pay th, table.pay td{
    padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);
  }
  table.pay th{background:var(--teal-tint);color:var(--teal-deep);font-weight:600;font-size:1.5rem;letter-spacing:.04em;}
  table.pay tr:last-child td{border-bottom:none;}
  .note{font-size:1.4rem;color:var(--ink-soft);margin-top:12px;}
  .note.placeholder{color:var(--gold-deep);}

  .chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;}
  .chip{
    display:flex;align-items:flex-start;gap:10px;
    background:var(--cream);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;font-size:1.5rem;color:var(--ink);
    text-align: justify;
  }
  .chip svg{width:16px;height:16px;flex-shrink:0;margin-top:8px;color:var(--teal);}

  .feature-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;}
  .feature-list li{
    display:flex;gap:10px;font-size:1.5rem;color:var(--ink-soft);align-items:flex-start;text-align: justify;
  }
  .feature-list li svg{width:17px;height:17px;flex-shrink:0;margin-top:8px;color:var(--gold-deep);}

  .quote-box{
    background:var(--teal-tint);border-radius:14px;padding:20px 22px;margin-top:18px;
    font-size:1.4rem;color:var(--teal-deep);border-left:3px solid var(--teal);text-align: justify;
  }

  /* ===== Closing ===== */
  .closing{
    padding:100px 0 110px;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
    text-align:center;
  }
  .closing .eyebrow{justify-content:center;}
  .closing h2{font-size:clamp(24px,3.4vw,36px);margin:16px 0 22px;}
  .closing p{color:var(--ink-soft);max-width:660px;margin:0 auto 40px;font-size:1.5rem;}
  .closing-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
  .closing-actions .btn{padding:16px 34px;font-size:1.8rem; font-weight: 700;}
  .closing-tel span{display:block;font-size:11px;margin-top:4px;font-family:'Noto Sans JP',sans-serif;opacity:.85;}



  /* ===== Responsive ===== */
  @media (max-width:860px){
    .about,
    .timeline-wrap,
    .closing {
      padding-left: 20px;  /* スマホ時の左側の余白 */
      padding-right: 20px; /* スマホ時の右側の余白 */
    }
  .t-body h3{font-size:2.0rem;margin-bottom:16px;font-weight: 700;}
    .about-grid{grid-template-columns:1fr;gap:36px;}
    .about-figure{aspect-ratio:16/9;}
    .hero-figure{display:none;}
    .chip-grid{grid-template-columns:1fr;}
    .t-item{grid-template-columns:56px 1fr;gap:18px;}
    .t-badge{width:56px;height:56px;}
    .t-badge svg{width:20px;height:20px;}
    .t-badge span{font-size:2.0rem;}
    .timeline::before{left:27px;}
  }
    .tel-pill{
    display:flex;flex-direction:column;line-height:1.15;text-align:right;
    font-family:'Shippori Mincho',serif;
        text-decoration: none;
  }
  .tel-pill a{font-size:18px;color:var(--teal-deep);font-weight:600;}
  .tel-pill span{font-size:10px;color:var(--ink-soft);font-family:'Noto Sans JP',sans-serif;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 26px;border-radius:999px;font-size:14px;letter-spacing:.05em;
    border:1px solid transparent;cursor:pointer;transition:transform .25s, box-shadow .25s, background .25s;
    white-space:nowrap;
        text-decoration: none;
  }
  .btn-primary{background:var(--teal);color:#fff;box-shadow:0 12px 24px -12px rgba(12,133,119,.6);}
  .btn-primary:hover{background:var(--teal-deep);transform:translateY(-2px);}
  .btn-gold{background:var(--gold);color:#fff;box-shadow:0 12px 24px -12px rgba(185,130,46,.55);}
  .btn-gold:hover{background:var(--gold-deep);transform:translateY(-2px);}
  .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:var(--cream);}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.3s;}
  @media (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;transition:none;}
  }
@media (max-width:768px){

.pay,
.pay thead,
.pay tbody,
.pay th,
.pay td,
.pay tr{
    display:block;
}

.pay thead{
    display:none;
}

.pay tr{
    margin-bottom:20px;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

  .pay td{
      display:grid;
      grid-template-columns:90px 1fr;
      gap:12px;
      align-items:start;
      padding:14px 16px;
  }

  .pay td::before{
      font-weight:700;
      color:var(--teal-deep);
      white-space:nowrap;
  }

  .pay td:last-child{
      word-break:break-word;
      overflow-wrap:anywhere;
  }

.pay td:last-child{
    border-bottom:none;
}

.pay td:nth-child(1)::before{
    content:"職種";
    font-weight:bold;
    color:var(--teal-deep);
}

.pay td:nth-child(2)::before{
    content:"雇用形態";
    font-weight:bold;
    color:var(--teal-deep);
}

.pay td:nth-child(3)::before{
    content:"給与目安";
    font-weight:bold;
    color:var(--teal-deep);
}

}