:root{
    --color-primary:#0057C8;
    --color-primary-light:#2F8CFF;
    --color-navy:#082A5A;
    --color-text:#1A2A3A;
    --color-muted:#6B7A90;
    --color-border:#DDE8F5;
    --color-bg:#FFFFFF;
    --color-bg-soft:#F6FAFF;
    --font-serif:"Noto Serif JP","Shippori Mincho","Yu Mincho",YuMincho,"游明朝",serif;
    --font-serif-en:"Cormorant Garamond","Noto Serif JP",serif;
    --font-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
    --shadow-card:0 2px 10px rgba(8,42,90,.04), 0 8px 30px rgba(8,42,90,.06);
    --container:1180px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-sans);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.8;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}

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

  /* ---------- Logo ---------- */
  .logo{display:flex;align-items:center;gap:14px;}
  .logo__mark{
    width:46px;height:46px;flex:none;
    display:block;
    object-fit:contain;
  }
  .logo__text{display:flex;flex-direction:column;line-height:1.1;}
  .logo__ja{
    font-family:var(--font-serif);
    font-weight:600;
    font-size:18px;
    color:var(--color-navy);
    letter-spacing:.04em;
  }
  .logo__en{
    font-family:var(--font-serif-en);
    font-size:11px;
    letter-spacing:.18em;
    color:var(--color-muted);
    margin-top:4px;
  }

  /* ---------- Header ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(160%) blur(8px);
    border-bottom:1px solid rgba(221,232,245,.6);
  }
  .site-header__inner{
    max-width:var(--container);
    margin:0 auto;
    padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;gap:32px;
  }
  .nav{display:flex;gap:48px;}
  .nav__item{
    position:relative;
    font-size:14px;
    color:var(--color-text);
    padding:6px 2px;
    letter-spacing:.08em;
    transition:color .2s;
  }
  .nav__item:hover{color:var(--color-primary);}
  .nav__item.is-active{color:var(--color-primary);}
  .nav__item.is-active::after{
    content:"";
    position:absolute;left:50%;bottom:-2px;
    transform:translateX(-50%);
    width:28px;height:2px;
    background:var(--color-primary);
    border-radius:2px;
  }

  /* ---------- MV ---------- */
  .mv{
    position:relative;
    overflow:hidden;
    background:#fff;
  }
  .mv__bg{
    position:absolute;inset:0;
    background-image:url("../images/progress-hero.png?v=20260528-light");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }
  /* white scrim on the left so the headline reads cleanly */
  .mv__bg::after{
    content:"";
    position:absolute;inset:0;
    background:
      linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%),
      linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%);
  }
  .mv__inner{
    position:relative;
    max-width:var(--container);
    margin:0 auto;
    padding:120px 32px 140px;
    min-height:640px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .mv__copy{
    font-family:var(--font-serif);
    color:var(--color-navy);
    font-weight:600;
    font-size:clamp(40px, 5.8vw, 80px);
    line-height:1.35;
    letter-spacing:.04em;
    margin:0 0 40px;
    text-shadow:0 1px 2px rgba(255,255,255,.6);
  }
  .mv__copy .accent{color:var(--color-primary);}
  .mv__sub{
    font-size:15px;
    line-height:2.1;
    color:var(--color-primary);
    font-weight:600;
    letter-spacing:.05em;
    text-shadow:0 1px 2px rgba(255,255,255,.7);
  }
  .mv__sub p{margin:0;}

  /* ---------- Section base ---------- */
  .section{padding:120px 0;}
  .section-title{
    text-align:center;
    margin:0 0 72px;
  }
  .section-title__en{
    font-family:var(--font-serif-en);
    font-weight:500;
    font-size:42px;
    color:var(--color-navy);
    letter-spacing:.14em;
    line-height:1.2;
    margin:0;
  }
  .section-title__line{
    display:block;
    width:48px;height:2px;
    background:var(--color-primary);
    margin:18px auto 0;
    border-radius:2px;
  }

  /* ---------- Progress Standard ---------- */
  .standard{background:#fff;}
  .standard__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .card{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:14px;
    padding:52px 32px 56px;
    text-align:center;
    box-shadow:var(--shadow-card);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .card:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 16px rgba(8,42,90,.06), 0 14px 40px rgba(8,42,90,.08);
  }
  .card__head{
    display:flex;align-items:center;justify-content:center;
    gap:24px;
    margin-bottom:22px;
  }
  .card__icon{
    width:72px;height:72px;
    border-radius:50%;
    background:#EAF2FF;
    display:flex;align-items:center;justify-content:center;
    color:var(--color-primary);
    flex:none;
  }
  .card__icon svg{width:38px;height:38px;}
  .card__title{
    font-family:var(--font-serif);
    font-weight:600;
    font-size:26px;
    color:var(--color-navy);
    letter-spacing:.3em;
    padding-right:0;
    margin:0;
    line-height:1;
  }
  .card__divider{
    width:36px;height:2px;
    background:var(--color-primary);
    margin:0 auto 22px;
    border-radius:2px;
  }
  .card__body{
    font-size:15px;
    line-height:2.05;
    color:var(--color-text);
    margin:0;
    letter-spacing:.04em;
  }

  /* ---------- 会社概要 ---------- */
  .company{
    background:#fff;
    padding:80px 0 120px;
  }
  .company__inner{
    border-top:1px solid var(--color-border);
    padding-top:80px;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:80px;
    align-items:start;
  }
  .company__title{
    font-family:var(--font-serif);
    font-weight:600;
    font-size:44px;
    color:var(--color-navy);
    letter-spacing:.35em;
    line-height:1.2;
    margin:0;
    padding-right:.35em; /* counter visual offset of letter-spacing on last char */
  }
  .company__title-line{
    display:block;
    width:64px;height:2px;
    background:var(--color-primary);
    margin-top:24px;
    border-radius:2px;
  }
  .company__table{
    width:100%;
    border-collapse:collapse;
  }
  .company__table tr{
    border-bottom:1px solid var(--color-border);
  }
  .company__table tr:first-child{
    border-top:1px solid var(--color-border);
  }
  .company__table th,
  .company__table td{
    padding:24px 28px;
    text-align:left;
    vertical-align:middle;
    font-weight:400;
    font-size:15px;
    line-height:1.8;
    letter-spacing:.04em;
  }
  .company__table th{
    width:180px;
    background:var(--color-bg-soft);
    color:var(--color-navy);
    font-weight:500;
  }
  .company__table td{color:var(--color-text);}

  /* ---------- Footer ---------- */
  .site-footer{
    background:#fff;
    border-top:1px solid var(--color-border);
  }
  .site-footer__inner{
    max-width:var(--container);
    margin:0 auto;
    padding:32px;
    display:flex;align-items:center;justify-content:space-between;gap:32px;
    flex-wrap:wrap;
  }
  .site-footer .nav__item{color:var(--color-muted);}
  .site-footer .nav__item:hover{color:var(--color-primary);}

  /* ---------- Responsive ---------- */
  @media (max-width:920px){
    .nav{gap:28px;}
    .standard__grid{grid-template-columns:1fr;gap:20px;}
    .company__inner{grid-template-columns:1fr;gap:40px;padding-top:60px;}
    .company__title-line{margin-top:18px;}
    .mv__inner{padding:90px 32px 110px;min-height:560px;}
    .mv__bg::after{
      background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 40%, rgba(255,255,255,.35) 70%, rgba(255,255,255,.15) 100%);
    }
    .mv__bg{background-position:center;}
    .section{padding:80px 0;}
    .section-title{margin-bottom:48px;}
    .section-title__en{font-size:32px;}
  }
  @media (max-width:640px){
    .container{padding:0 20px;}
    .site-header__inner{padding:14px 20px;gap:12px;}
    .logo__mark{width:40px;height:40px;}
    .logo__ja{font-size:15px;}
    .logo__en{font-size:10px;letter-spacing:.16em;}
    .nav{gap:16px;}
    .nav__item{font-size:12px;letter-spacing:.04em;}
    .mv__inner{padding:64px 20px 80px;min-height:auto;}
    .mv__copy{font-size:40px;line-height:1.45;margin-bottom:28px;}
    .mv__sub{font-size:13px;line-height:2;}
    .card{padding:36px 22px 40px;}
    .card__head{gap:16px;margin-bottom:18px;}
    .card__icon{width:60px;height:60px;}
    .card__icon svg{width:32px;height:32px;}
    .card__title{font-size:22px;letter-spacing:.25em;}
    .card__body{font-size:14px;}
    .company__title{font-size:34px;letter-spacing:.3em;}
    .company__table th,.company__table td{padding:18px 16px;font-size:14px;display:block;width:100%;}
    .company__table th{border-bottom:none;padding-bottom:6px;}
    .site-footer__inner{flex-direction:column;align-items:flex-start;gap:24px;padding:28px 20px;}
  }

.section-title__line--wide {
  width: 400px;
  max-width: min(400px, 100%);
}

.company__title-line--wide {
  width: 230px;
  max-width: min(230px, 100%);
}

@media (max-width: 640px) {
  .section-title__line--wide,
  .company__title-line--wide {
    width: 100%;
  }
}
