:root{
    --ink:#101826;
    --paper:#EDEFEC;
    --surface:#FFFFFF;
    --accent:#1F7A5C;
    --accent-dark:#175C46;
    --accent-soft:#E3EFE9;
    --slate:#57657A;
    --line:#D7DBD6;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:auto;}
  body{
    font-family:"Noto Sans JP",sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.85;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:"Shippori Mincho",serif;
    font-weight:600;
    line-height:1.5;
    color:var(--ink);
  }
  .h2W {
    color: #fff;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
  .prose{max-width:640px;}
  section{position:relative;}

  /* ---------- Header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:500;
    background:rgba(237,239,236,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease;
  }
  header.is-scrolled{
    border-bottom-color:var(--line);
    background:rgba(237,239,236,0.98);
  }
  .nav-inner{
    max-width:1120px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    font-family:"Shippori Mincho",serif;
    font-size:20px;font-weight:700;letter-spacing:.02em;
    display:flex;align-items:baseline;gap:6px;
  }
  .logo span{
    font-family:"Noto Sans JP",sans-serif;
    font-size:11px;font-weight:500;color:var(--slate);
  }
  nav.primary-nav{display:flex;align-items:center;gap:36px;}
  nav.primary-nav ul{list-style:none;display:flex;gap:28px;}
  nav.primary-nav a{
    font-size:14px;color:var(--slate);position:relative;padding:4px 0;
    transition:color .2s ease;
  }
  nav.primary-nav a:hover,nav.primary-nav a.is-active{color:var(--ink);}
  nav.primary-nav a.is-active::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
  }
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 24px;font-size:14px;font-weight:500;
    border-radius:5px;border:1px solid transparent;
    cursor:pointer;transition:transform .5s ease, background .5s ease, color .5s ease, border-color .5s ease;
    white-space:nowrap;
  }
  .btn-solid{background:var(--accent);color:#fff;}
  .btn-solid:hover{background:var(--accent-dark);}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
  .btn-outline:hover{background:var(--ink);color:#fff;}
  .btn-glow{
    background:#fff;color:var(--accent);border:1px solid var(--accent);
    animation:btnGlowFloat 2.6s ease-in-out infinite;
  }
  .white {
 color: #fff;
 font-weight: bold;
  }
  .btn-glow:hover{background:var(--accent-soft);animation-play-state:paused;}
  @keyframes btnGlowFloat{
    0%,100%{ transform:translateY(0); box-shadow:0 0 0 rgba(31,122,92,0); }
    50%{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(31,122,92,0.35); }
  }
  .W{
    color: #fff;
  }
.logoimg{
position:absolute;
right:0;
top: 0;
}
  .nav-cta{display:none;}
  @media(min-width:900px){.nav-cta{display:inline-flex;}}
  .menu-toggle{
    display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;
  }
  .menu-toggle span{width:22px;height:2px;background:var(--ink);display:block;}
  @media(min-width:900px){.menu-toggle{display:none;}}
  @media(max-width:899px){nav.primary-nav ul{display:none;}}

  .mobile-panel{
    display:none;position:fixed;inset:0;background:var(--paper);z-index:600;
    padding:100px 32px 40px;
  }
  .mobile-panel.is-open{display:block;}
  .mobile-panel ul{list-style:none;display:flex;flex-direction:column;gap:26px;}
  .mobile-panel a{font-family:"Shippori Mincho",serif;font-size:22px;}
  .mobile-close{position:absolute;top:24px;right:32px;background:none;border:none;font-size:28px;cursor:pointer;color:var(--ink);}

  /* ---------- Hero ---------- */
  #hero{
    padding:168px 0 96px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;grid-template-columns:1fr;gap:56px;align-items:center;
  }
  @media(min-width:960px){.hero-grid{grid-template-columns:1.1fr 0.9fr;}}
  .eyebrow-line{
    display:flex;align-items:center;gap:12px;margin-bottom:28px;color:var(--slate);font-size:13px;
  }
  .eyebrow-line .rule{width:32px;height:1px;background:var(--slate);}
  .hero-copy h1{
    font-size:clamp(30px,4.2vw,50px);
    letter-spacing:.01em;
  }
  .hero-copy h1 em{
    font-style:normal;color:var(--accent);
  }
  .hero-copy p.sub{
    margin-top:26px;color:var(--slate);font-size:16px;max-width:480px;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
  .hero-chart{position:relative;}
  .hero-chart svg{width:100%;height:auto;}
  .chart-caption{
    display:flex;justify-content:space-between;font-size:12px;color:var(--slate);margin-top:10px;
    border-top:1px solid var(--line);padding-top:10px;
  }
  #trendline{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.2s ease forwards .3s;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  .dot-pulse{animation:pulse 2.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

  /* ---------- Section shell ---------- */
  .section-pad{padding:96px 0;}
  .section-head{max-width:600px;margin-bottom:56px;}
  .section-tag{
    font: size 16px;color:var(--accent);font-weight:500;margin-bottom:14px;
    display:flex;align-items:center;gap:10px;
    width: 800px;
  }
  .section-tag .num{
    font-family:"Shippori Mincho",serif;color:var(--slate);
  }
  .section-head h2{font-size:clamp(24px,3vw,34px);}
  .section-head p{margin-top:16px;color:var(--slate);}
  .divider{height:1px;background:var(--line);}

  /* reveal */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  /* ---------- Pain points ---------- */
  #pain{background:var(--surface);}
  .pain-list{
    border-top:1px solid var(--line);
  }
  .pain-item{
    display:grid;grid-template-columns:120px 1fr;gap:24px;
    padding:28px 0;border-bottom:1px solid var(--line);
  }
  .pain-item .label{
    font-family:"Shippori Mincho",serif;color:var(--slate);font-size:18px;padding-top:2px;
  }
  .pain-item p{font-size:16px;}
  .pain-summary{
    margin-top:44px;padding:28px 32px;background:var(--accent-soft);border-left:3px solid var(--accent);
    color:var(--ink);
  }

  /* ---------- Reasons ---------- */
  .reason-row{
    display:grid;grid-template-columns:1fr;gap:0;
    border-top:1px solid var(--line);
  }
  @media(min-width:800px){.reason-row{grid-template-columns:200px 1fr;}}
  .reason-item{
    display:grid;grid-template-columns:1fr;gap:16px;
    padding:36px 0;border-bottom:1px solid var(--line);
  }
  @media(min-width:800px){.reason-item{grid-template-columns:200px 1fr;gap:32px;}}
  .reason-num{
    font-family:"Shippori Mincho",serif;font-size:15px;color:var(--slate);
  }
  .reason-num strong{
    display:block;font-size:34px;color:var(--ink);font-weight:600;
  }
  .reason-item h3{font-size:19px;margin-bottom:10px;}
  .reason-item p{color:var(--slate);max-width:560px;}

  /* ---------- Services overview ---------- */
  #services-overview{background:var(--surface);}
  .service-grid{
    display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);
  }
  @media(min-width:760px){.service-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1040px){.service-grid{grid-template-columns:repeat(3,1fr);}}
  .service-card{
    background:var(--surface);padding:32px 28px;
  }
  .service-card h3{font-size:16px;margin-bottom:10px;}
  .service-card p{font-size:14px;color:var(--slate);}
  .link-more{
    display:inline-flex;align-items:center;gap:8px;margin-top:44px;color:var(--accent);font-size:14px;font-weight:500;
    border-bottom:1px solid var(--accent);padding-bottom:2px;
  }

  /* ---------- About ---------- */
  #about .about-grid{
    display:grid;grid-template-columns:1fr;gap:48px;
  }
  @media(min-width:900px){#about .about-grid{grid-template-columns:0.9fr 1.1fr;}}
  #about blockquote{
    font-family:"Shippori Mincho",serif;font-size:clamp(20px,2.4vw,26px);line-height:1.9;
    border-left:3px solid var(--accent);padding-left:24px;color:var(--ink);
  }
  #about .about-text p{margin-bottom:20px;color:var(--slate);}
  #about .about-text p:first-child{color:var(--ink);}

  /* ---------- Service detail ---------- */
  #services-detail{background:var(--surface);}
  .service-detail-item{
    border-top:1px solid var(--line);
    padding:40px 0;
    display:grid;grid-template-columns:1fr;gap:20px;
  }
  @media(min-width:820px){.service-detail-item{grid-template-columns:280px 1fr;gap:40px;}}
  .service-detail-item:last-child{border-bottom:1px solid var(--line);}
  .service-detail-item h3{font-size:20px;}
  .service-detail-item .target{font-size:13px;color:var(--slate);margin-top:8px;}
  .service-detail-item ul{list-style:none;}
  .service-detail-item li{
    position:relative;padding-left:18px;margin-bottom:10px;color:var(--ink);font-size:15px;
  }
  .service-detail-item li::before{
    content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--accent);
  }

  /* ---------- Flow ---------- */
  .flow-list{border-top:1px solid var(--line);}
  .flow-item{
    display:grid;grid-template-columns:64px 1fr;gap:24px;
    padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
  }
  .flow-item .step{
    font-family:"Shippori Mincho",serif;font-size:26px;color:var(--accent);
  }
  .flow-item h3{font-size:17px;margin-bottom:6px;}
  .flow-item p{color:var(--slate);font-size:14px;}

  /* ---------- Pricing ---------- */
  #pricing{background:var(--surface);}
  .price-grid{display:grid;grid-template-columns:1fr;gap:24px;}
  @media(min-width:820px){.price-grid{grid-template-columns:repeat(3,1fr);}}
  .price-card{
    border:1px solid var(--line);padding:32px 28px;background:var(--paper);
    display:flex;flex-direction:column;gap:16px;
  }
  .price-card h3{font-size:17px;}
  .price-card p{font-size:14px;color:var(--slate);flex:1;}
  .price-card .price-note{font-size:13px;color:var(--accent);border-top:1px solid var(--line);padding-top:14px;}

  /* ---------- Cases ---------- */
  .case-empty{
    border:1px dashed var(--line);padding:48px 32px;text-align:left;color:var(--slate);
  }
  .case-empty strong{color:var(--ink);display:block;margin-bottom:10px;font-family:"Shippori Mincho",serif;font-size:18px;}

  /* ---------- Company ---------- */
  #company{background:var(--surface);}
  table.company-table{width:100%;border-collapse:collapse;border-top:1px solid var(--line);}
  table.company-table th,table.company-table td{
    text-align:left;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top;
  }
  table.company-table th{
    width:180px;color:var(--slate);font-weight:500;font-family:"Shippori Mincho",serif;
  }

  /* ---------- Contact ---------- */
  #contact{
    background:var(--ink);color:#fff;
  }
  #contact .section-head p{color:#B9C2CF;}
  #contact .section-tag{color:#7FC3A6;}
  #contact .section-tag .num{color:#8B96A8;}
  .contact-grid{display:grid;grid-template-columns:1fr;gap:48px;}
  @media(min-width:960px){.contact-grid{grid-template-columns:0.8fr 1.2fr;}}
  .contact-note{color:#B9C2CF;font-size:14px;line-height:2;}
  .contact-note strong{color:#fff;display:block;margin-bottom:14px;font-family:"Shippori Mincho",serif;font-size:19px;font-weight:600;}
  form#contact-form{display:flex;flex-direction:column;gap:22px;}
  .form-row{display:grid;grid-template-columns:1fr;gap:22px;}
  @media(min-width:640px){.form-row.two{grid-template-columns:1fr 1fr;}}
  .field label{
    display:block;font-size:13px;margin-bottom:8px;color:#B9C2CF;
  }
  .field .req{color:#7FC3A6;font-size:11px;margin-left:6px;}
  .field input[type=text],
  .field input[type=email],
  .field input[type=tel],
  .field textarea{
    width:100%;background:transparent;border:none;border-bottom:1px solid #3B4658;
    color:#fff;font-family:"Noto Sans JP",sans-serif;font-size:15px;padding:10px 2px;
    transition:border-color .2s ease;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:#7FC3A6;}
  .field textarea{resize:vertical;min-height:110px;}
  .channels{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px;}
  .channels label{
    display:flex;align-items:center;gap:8px;font-size:14px;color:#fff;cursor:pointer;margin:0;
  }
  .channels input{accent-color:#7FC3A6;width:15px;height:15px;}
  .submit-row{display:flex;align-items:center;gap:20px;margin-top:10px;}
  .form-status{font-size:13px;color:#7FC3A6;display:none;}
  .form-status.is-visible{display:inline-block;}

  /* ---- booking step (Google appointment schedule) ---- */
  .contact-step{display:none;}
  .contact-step.is-active{display:block;}
  .booking-intro{
    display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px;
  }
  .booking-intro strong{
    font-family:"Shippori Mincho",serif;font-size:19px;font-weight:600;display:block;margin-bottom:8px;color:#fff;
  }
  .booking-intro p{color:#B9C2CF;font-size:14px;max-width:520px;}
  .booking-back{
    background:none;border:1px solid #3B4658;color:#B9C2CF;font-size:13px;padding:8px 16px;border-radius:2px;
    cursor:pointer;white-space:nowrap;transition:border-color .2s ease,color .2s ease;
  }
  .booking-back:hover{border-color:#7FC3A6;color:#fff;}
  .booking-frame-wrap{
    background:#fff;border:1px solid #3B4658;overflow:hidden;
    min-height:640px;
  }
  .booking-frame-wrap iframe{width:100%;height:640px;border:none;display:block;}
  .booking-fallback{margin-top:14px;font-size:13px;color:#B9C2CF;}
  .booking-fallback a{color:#7FC3A6;border-bottom:1px solid #7FC3A6;}

  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:#8B96A8;padding:40px 0 32px;border-top:1px solid #232E42;}
  .footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px;}
  .back-to-top{
    position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;
    background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s;
    cursor:pointer;z-index:400;border:none;
  }
  .back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
  .scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0%;z-index:700;}

  /* ---------- Fine-tuned responsive behaviour (narrow phones) ---------- */
  @media(max-width:480px){
    .wrap{padding:0 20px;}
    #hero{padding:140px 0 72px;}
    .section-pad{padding:72px 0;}
    .hero-actions .btn{width:100%;justify-content:center;}
    .pain-item{grid-template-columns:1fr;gap:8px;padding:22px 0;}
    .pain-item .label{font-size:12px;color:var(--accent);}
    .reason-num strong{font-size:26px;}
    .flow-item{grid-template-columns:44px 1fr;gap:16px;}
    .flow-item .step{font-size:20px;}
    table.company-table, table.company-table tbody, table.company-table tr, table.company-table th, table.company-table td{
      display:block;width:100%;
    }
    table.company-table tr{padding:14px 0;border-bottom:1px solid var(--line);}
    table.company-table th{border-bottom:none;padding:0 0 6px;width:auto;}
    table.company-table td{border-bottom:none;padding:0;}
    .booking-frame-wrap, .booking-frame-wrap iframe{height:520px;}
    .footer-inner{flex-direction:column;gap:6px;}
  }
  @media(max-width:340px){
    .logo{font-size:17px;}
    .logo span{display:none;}
  }