:root{
    --navy:#1B3A5C;
    --navy-deep:#0F2338;
    --orange:#E8913A;
    --orange-deep:#c97a28;
    --white:#FFFFFF;
    --base:#F5F7FA;
    --text:#333333;
    --subtext:#5C6470;
    --line:#DCE1E8;
    --line-strong:#B9C3CF;
    --good:#2E7D5B;
    --good-bg:#EAF4EF;
    --bad:#B3462F;
    --bad-bg:#FBEEEA;
    --radius:6px;
    --maxw:1100px;
    --header-h:84px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }
  body{
    margin:0;
    background:var(--white);
    color:var(--text);
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    font-size:18px;
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  .num{font-family:"Inter","Noto Sans JP",sans-serif; font-variant-numeric:tabular-nums;}
  h1,h2,h3,h4{font-family:"Noto Sans JP",sans-serif; font-weight:900; margin:0; color:var(--navy); text-wrap:balance;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  section{padding:96px 0;}
  .bg-base{background:var(--base);}
  .rule{width:40px; height:3px; background:var(--orange); margin-bottom:16px;}
  .eyebrow{
    display:flex; align-items:center; gap:10px;
    font-family:"Inter",sans-serif; font-size:14px; font-weight:700; letter-spacing:.14em;
    color:var(--orange-deep); text-transform:uppercase; margin-bottom:10px;
  }
  .sec-head{max-width:680px; margin-bottom:48px;}
  .sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .sec-head.center .rule{margin-left:auto; margin-right:auto;}
  .sec-head.center .eyebrow{justify-content:center;}
  .h2{font-size:32px; line-height:1.5; letter-spacing:-0.01em;}
  .lead{color:var(--subtext); font-size:18px; margin-top:16px; line-height:1.85;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-weight:700; font-size:18px; border-radius:4px; cursor:pointer;
    border:1.5px solid transparent; white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    font-family:"Noto Sans JP",sans-serif;
  }
  .btn-main{background:var(--orange); color:#fff; padding:18px 44px;}
  .btn-main:hover{background:var(--orange-deep);}
  .btn-outline{background:transparent; color:var(--navy); border-color:var(--navy); padding:16.5px 32px;}
  .btn-outline:hover{background:var(--navy); color:#fff;}
  .btn-block{width:100%;}
  .micro{font-size:18px; color:var(--subtext); margin-top:14px;}
  .micro a{color:var(--navy); font-weight:700; border-bottom:1px solid var(--navy);}

  /* ---- draft banner ---- */
  .draft-banner{
    background:var(--navy-deep); color:#cbd6e2; text-align:center;
    font-size:18px; padding:12px 16px; line-height:1.6;
  }
  .draft-banner b{color:#ffcf9e;}

  /* ---- header ---- */
  header{
    position:sticky; top:0; z-index:50;
    height:var(--header-h); background:#fff;
    border-bottom:2px solid var(--navy);
  }
  header .wrap{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .logo{display:flex; align-items:center; flex:none;}
  .logo img{height:46px; width:auto; display:block;}
  nav.primary-nav{display:flex; align-items:center; gap:28px;}
  nav.primary-nav a{font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; position:relative;}
  nav.primary-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--orange); transform:scaleX(0); transition:transform .15s ease;}
  nav.primary-nav a:hover::after{transform:scaleX(1);}
  .header-cta{display:flex; align-items:center; gap:16px; flex:none;}
  .header-phone{font-size:15px; font-weight:700; color:var(--navy); white-space:nowrap;}
  .hamburger{display:none; width:44px; height:44px; border:1.5px solid var(--navy); border-radius:4px; background:#fff; align-items:center; justify-content:center; flex:none;}
  .hamburger span{display:block; width:18px; height:2px; background:var(--navy); position:relative;}
  .hamburger span::before,.hamburger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--navy);}
  .hamburger span::before{top:-6px;} .hamburger span::after{top:6px;}
  .mobile-nav{display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:#fff; z-index:49; padding:28px 24px; overflow-y:auto;}
  .mobile-nav.open{display:block;}
  .mobile-nav a{display:block; padding:16px 0; border-bottom:1px solid var(--line); font-weight:700; font-size:18px;}
  .mobile-nav .btn-main{width:100%; margin-top:20px;}
  .mobile-nav .phone-line{margin-top:18px; text-align:center; font-size:16px; font-weight:700; color:var(--navy);}

  /* ---- placeholder ---- */
  .placeholder{
    position:relative;
    border-radius:4px;
    border:1.5px dashed var(--line-strong);
    background:repeating-linear-gradient(135deg, rgba(27,58,92,0.045) 0 14px, rgba(27,58,92,0.015) 14px 28px), #FAFBFC;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; text-align:center; padding:32px 26px; min-height:240px;
    color:var(--navy);
  }
  .placeholder .tag{
    position:absolute; top:12px; left:12px; background:var(--navy); color:#fff;
    font-size:18px; font-weight:700; padding:5px 12px; border-radius:3px;
  }
  .placeholder .cap{font-size:18px; font-weight:700; color:var(--navy);}
  .placeholder .sub{font-size:18px; color:var(--subtext); font-weight:500;}
  .placeholder svg{width:44px; height:44px; opacity:.6;}

  /* ---- FV ---- */
  .sec-fv{
    padding:0; min-height:calc(100vh - var(--header-h));
    display:grid; grid-template-columns:1.15fr 0.85fr;
  }
  .fv-copy{
    background:var(--navy); color:#fff;
    display:flex; flex-direction:column; justify-content:center;
    padding:64px 56px; position:relative;
  }
  .fv-badge{
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.35); border-radius:3px; padding:8px 16px;
    font-size:18px; font-weight:700; color:#ffd9ad; margin-bottom:26px; align-self:flex-start;
  }
  .fv-copy h1{color:#fff; font-size:clamp(28px,3.6vw,42px); line-height:1.5; letter-spacing:-0.01em;}
  .fv-copy .lead{color:#c9d5e2; max-width:520px;}
  .fv-ctas{margin-top:38px;}
  .fv-copy .micro{color:#aebfd1;}
  .fv-copy .micro a{color:#fff; border-bottom-color:#fff;}
  .fv-visual{
    background:var(--base); display:flex; align-items:center; justify-content:center;
  }
  .fv-visual .placeholder{width:100%; height:100%; min-height:360px;}

  /* ---- pain ---- */
  .pain-list{display:flex; flex-direction:column; gap:1px; border:1px solid var(--line); border-radius:4px; overflow:hidden;}
  .pain-row{display:flex; align-items:flex-start; gap:18px; background:#fff; padding:24px 26px;}
  .pain-row:nth-child(even){background:var(--base);}
  .pain-row .x{
    flex:none; width:30px; height:30px; border-radius:50%; background:var(--bad-bg); color:var(--bad);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin-top:2px;
  }
  .pain-row p{margin:0; font-size:18px; padding-top:2px;}
  .pain-transition{
    display:flex; align-items:center; justify-content:center; gap:12px; margin-top:36px;
    color:var(--navy); font-weight:700; font-size:18px; text-align:center;
  }
  .pain-transition svg{width:22px; height:22px; flex:none; color:var(--orange);}

  /* ---- effects ---- */
  .sec-effects{background:var(--navy); color:#fff;}
  .sec-effects .eyebrow{color:#ffb877;}
  .sec-effects h2{color:#fff;}
  .sec-effects .lead{color:#c9d5e2;}
  .effects-row{display:grid; grid-template-columns:1fr 1fr 1fr; }
  .effect-col{padding:8px 30px; border-left:1px solid rgba(255,255,255,0.18);}
  .effect-col:first-child{border-left:none; padding-left:0;}
  .effect-col .no{font-family:"Inter",sans-serif; font-weight:800; font-size:15px; color:#ffb877; letter-spacing:.08em; margin-bottom:14px; display:block;}
  .effect-col h3{color:#fff; font-size:21px; margin-bottom:12px;}
  .effect-col p{margin:0; font-size:18px; color:#d7e0ea; line-height:1.85;}

  /* ---- mid cta ---- */
  .mid-cta{background:var(--base); text-align:center; padding:64px 24px;}
  .mid-cta p.lead{margin:10px auto 0; max-width:520px;}
  .mid-cta .btn-main{margin-top:28px;}

  /* ---- service ---- */
  .service-top{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:56px;}
  .service-step{padding:30px 26px; background:#fff; border-left:1px solid var(--line); position:relative;}
  .service-step:first-child{border-left:none;}
  .service-step .step-tag{font-family:"Inter",sans-serif; font-weight:800; font-size:14px; color:var(--orange-deep); letter-spacing:.1em; margin-bottom:10px; display:block;}
  .service-step h4{font-size:19px; margin:0;}
  .service-step .arrow-next{position:absolute; right:-13px; top:50%; transform:translateY(-50%); width:26px; height:26px; background:#fff; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--navy); z-index:2;}
  .service-step .arrow-next svg{width:14px;height:14px;}
  .service-step:last-child .arrow-next{display:none;}

  .manual-list-title{font-size:21px; color:var(--navy); font-weight:700; margin-bottom:20px;}
  .manual-list{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:4px; overflow:hidden;}
  .manual-item{display:flex; align-items:center; gap:14px; padding:16px 22px; border-bottom:1px solid var(--line); font-size:18px;}
  .manual-item:nth-child(odd){border-right:1px solid var(--line);}
  .manual-item .mi-no{font-family:"Inter",sans-serif; font-weight:800; color:var(--orange-deep); font-size:15px; flex:none; width:24px;}

  /* ---- reasons ---- */
  .reason-row{display:flex; gap:32px; padding:36px 0; border-top:1px solid var(--line);}
  .reason-row:first-of-type{border-top:none;}
  .reason-ghost{flex:none; width:96px; font-family:"Inter",sans-serif; font-weight:800; font-size:56px; color:var(--base); line-height:1; -webkit-text-stroke:1.5px var(--line-strong); text-stroke:1.5px var(--line-strong);}
  .reason-body h3{font-size:22px; margin-bottom:10px;}
  .reason-body p{margin:0; font-size:18px; color:var(--subtext); line-height:1.85;}

  /* ---- schedule (timeline) ---- */
  .timeline{position:relative; padding-left:8px;}
  .timeline::before{content:""; position:absolute; left:29px; top:8px; bottom:8px; width:2px; background:var(--line-strong);}
  .tl-row{position:relative; display:flex; gap:26px; padding-bottom:44px;}
  .tl-row:last-child{padding-bottom:0;}
  .tl-marker{flex:none; width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family:"Inter",sans-serif; font-weight:800; font-size:20px; color:var(--navy); z-index:1;}
  .tl-body{padding-top:6px;}
  .tl-body .tl-period{font-family:"Inter",sans-serif; font-size:14px; font-weight:700; color:var(--orange-deep); letter-spacing:.06em; margin-bottom:6px;}
  .tl-body h4{font-size:20px; margin-bottom:8px;}
  .tl-body p{margin:0; font-size:18px; color:var(--subtext);}

  /* ---- samples ---- */
  .sample-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .doc-mock{
    border:1.5px solid var(--line-strong); border-radius:2px; background:#fff; padding:0; aspect-ratio:3/4; position:relative; overflow:hidden;
    display:flex; flex-direction:column;
  }
  .doc-mock::before{content:""; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 22px 22px 0; border-color:transparent var(--base) transparent transparent;}
  .doc-mock .doc-head{background:var(--navy); height:34px; flex:none;}
  .doc-mock .doc-body{flex:1; padding:18px 16px; display:flex; flex-direction:column; gap:8px;}
  .doc-mock .doc-line{height:8px; background:var(--line); border-radius:2px;}
  .doc-mock .doc-line.w60{width:60%;}
  .doc-mock .doc-line.w80{width:80%;}
  .doc-mock .doc-line.w40{width:40%;}
  .doc-mock .doc-cap{margin-top:auto; font-size:18px; color:var(--navy); font-weight:700; padding-top:14px; border-top:1px solid var(--line);}

  /* ---- training ---- */
  .training-box{border:1px solid var(--line); border-radius:4px; padding:44px; background:var(--base); display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  .training-box .lead{margin-top:14px;}
  .curriculum{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
  .curriculum li{display:flex; gap:12px; font-size:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:4px; padding:14px 16px;}
  .curriculum li svg{flex:none; width:20px; height:20px; color:var(--orange-deep); margin-top:2px;}

  /* ---- voice ---- */
  .voice-note{background:var(--base); border:1px dashed var(--line-strong); border-radius:4px; padding:16px 20px; font-size:18px; color:var(--subtext); margin-bottom:36px;}
  .voice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .voice-card{border:1px solid var(--line); border-radius:4px; padding:30px 26px; background:#fff; display:flex; flex-direction:column; gap:14px;}
  .voice-card .quote-mark{font-family:"Inter",sans-serif; font-size:40px; color:var(--line-strong); line-height:1; font-weight:800;}
  .voice-card .v-tag{font-size:15px; font-weight:700; color:var(--navy); letter-spacing:.02em;}
  .voice-card .v-row{font-size:18px;}
  .voice-card .v-row b{color:var(--navy);}

  /* ---- faq ---- */
  .faq-list{display:flex; flex-direction:column; gap:14px;}
  details.faq-item{border-left:3px solid var(--navy); background:var(--base); border-radius:0 4px 4px 0;}
  details.faq-item summary{
    list-style:none; cursor:pointer; padding:20px 24px; display:flex; gap:16px; align-items:flex-start;
    font-weight:700; font-size:19px; color:var(--navy);
  }
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item summary .q-mark{font-family:"Inter",sans-serif; color:var(--orange-deep); font-weight:800; flex:none;}
  details.faq-item summary .chev{margin-left:auto; flex:none; transition:transform .2s ease; color:var(--navy);}
  details.faq-item[open] summary .chev{transform:rotate(180deg);}
  .faq-a{padding:0 24px 22px 24px; font-size:18px; color:var(--subtext); display:flex; gap:16px;}
  .faq-a .a-mark{font-family:"Inter",sans-serif; color:var(--navy); font-weight:800; flex:none;}

  /* ---- contact ---- */
  .contact-wrap{max-width:1100px; margin:0 auto;}
  .trust-strip{display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:40px;}
  .trust-item{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--navy);}
  .trust-item svg{width:18px;height:18px; color:var(--good); flex:none;}
  .contact-form{background:#fff; border:1px solid var(--line); border-radius:6px; padding:44px; box-shadow:0 20px 40px -24px rgba(15,35,56,0.25);}
  .f-group{margin-bottom:22px;}
  .f-group label{display:block; font-size:18px; font-weight:700; color:var(--navy); margin-bottom:8px;}
  .f-group label .req{color:var(--orange-deep); margin-left:6px; font-size:14px; font-weight:700; border:1px solid var(--orange-deep); border-radius:2px; padding:1px 6px; vertical-align:middle;}
  .f-group label .opt{color:var(--subtext); margin-left:6px; font-size:14px; font-weight:500;}
  .f-group input[type=text],.f-group input[type=email],.f-group input[type=tel],.f-group select,.f-group textarea{
    width:100%; border:1px solid var(--line); border-radius:4px; padding:13px 14px; font-size:18px;
    font-family:inherit; color:var(--text); background:var(--base);
  }
  .f-group input:focus,.f-group select:focus,.f-group textarea:focus{outline:2px solid var(--navy); outline-offset:1px; background:#fff;}
  .f-group textarea{min-height:110px; resize:vertical;}
  .form-note{font-size:18px; color:var(--subtext); text-align:center; margin-top:16px;}
  #thanks{display:none; background:var(--good-bg); border:1px solid #b7dcc7; color:#1e5c41; border-radius:4px; padding:18px 20px; font-size:18px; font-weight:700; text-align:center;}

  /* ---- footer ---- */
  footer{background:var(--navy-deep); color:#b7c4d3; padding:56px 0 96px;}
  .foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
  .foot-brand{font-weight:700; color:#fff; font-size:20px;}
  .foot-detail{font-size:18px; margin-top:10px; color:#a3b2c4; line-height:1.8;}
  .foot-links{display:flex; gap:26px; flex-wrap:wrap;}
  .foot-links a{font-size:18px; color:#b7c4d3;}
  .foot-links a:hover{color:#fff;}
  .foot-copy{margin-top:34px; font-size:18px; color:#728196; border-top:1px solid rgba(255,255,255,0.12); padding-top:24px;}

  /* ---- mobile sticky cta ---- */
  .sticky-cta{display:none; position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--navy); padding:12px 16px; box-shadow:0 -10px 24px -12px rgba(0,0,0,.3); align-items:center; gap:12px;}
  .sticky-cta .phone{color:#fff; font-size:14px; font-weight:700; flex:none; text-align:center; line-height:1.3;}
  .sticky-cta .btn-main{flex:1; padding:14px 20px; font-size:16px;}

  /* ---------------- 大きなモニター対策（間延び防止） ---------------- */
  /* 1440px超の大きな画面でのみ、ファーストビューの高さに上限を設ける。
     左右の余白は出さず（幅は今までどおり画面いっぱい）、高さだけを
     抑える。画像は上限の高さいっぱいに敷き詰め、下のセクションに
     被らないよう overflow:hidden で必ず収める。
     !important は、JS側で高さを直接指定している場合でもこの上限が
     確実に効くようにするための保険。 */
  @media (min-width:1441px){
    .sec-fv{
      min-height:auto !important;
      height:780px !important;
      overflow:hidden;
      max-width:1980px;
      margin:0 auto;
    }
    /* 画像は絶対配置にして高さの計算から切り離す
       （縦長の写真がボックスの高さを押し上げてしまい、
       文字と写真が下にずれる現象を防ぐため） */
    .fv-visual{
      position:relative; overflow:hidden;
    }
    .fv-visual img,
    .fv-visual .placeholder{
      position:absolute; inset:0;
      width:100%; height:100%; object-fit:cover;
    }
    /* 見出しの改行を1つ減らし、大きな画面では
       「あなたの施設は準備できていますか？」を1行にまとめる */
    .fv-br-lg{display:none;}
  }

  /* ---------------- Responsive ---------------- */
  @media (max-width:1024px){
    .fv-copy{padding:52px 40px;}
    .effects-row{grid-template-columns:1fr;}
    .effect-col{border-left:none; border-top:1px solid rgba(255,255,255,0.18); padding:28px 0 0;}
    .effect-col:first-child{border-top:none; padding-top:0;}
    .service-top{grid-template-columns:1fr;}
    .service-step{border-left:none; border-top:1px solid var(--line);}
    .service-step:first-child{border-top:none;}
    .service-step .arrow-next{right:auto; left:50%; top:auto; bottom:-13px; transform:translateX(-50%) rotate(90deg);}
    .training-box{grid-template-columns:1fr;}
    .sample-grid, .voice-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:1280px){
    nav.primary-nav{display:none;}
    .header-cta .header-phone{display:none;}
    .hamburger{display:flex;}
  }
  @media (max-width:900px){
    .sec-fv{grid-template-columns:1fr;}
    .fv-visual{order:-1; min-height:280px;}
  }
  @media (max-width:480px){
    .logo img{height:34px;}
    .header-cta .btn-main{display:none;}
  }
  @media (max-width:767px){
    :root{--header-h:64px;}
    body{font-size:16px; padding-bottom:78px;}
    section{padding:64px 0;}
    .h2{font-size:26px;}
    .sticky-cta{display:flex;}
    .fv-copy{padding:44px 24px 40px;}
    .fv-badge{font-size:15px; padding:6px 12px;}
    .lead{font-size:16px;}
    .pain-row p{font-size:16px;}
    .pain-transition{font-size:15px;}
    .effect-col h3{font-size:19px;}
    .effect-col p{font-size:16px;}
    .manual-list{grid-template-columns:1fr;}
    .manual-item:nth-child(odd){border-right:none;}
    .manual-item{font-size:16px;}
    .reason-row{flex-direction:column; gap:12px;}
    .reason-ghost{width:auto; font-size:36px;}
    .reason-body h3{font-size:20px;}
    .reason-body p{font-size:16px;}
    .tl-marker{width:48px; height:48px; font-size:16px;}
    .timeline::before{left:23px;}
    .tl-body h4{font-size:18px;}
    .tl-body p{font-size:16px;}
    .sample-grid{grid-template-columns:1fr; gap:14px;}
    .doc-mock .doc-cap{font-size:15px;}
    .curriculum li{font-size:16px;}
    .voice-grid{grid-template-columns:1fr;}
    .voice-card .v-row{font-size:16px;}
    details.faq-item summary{font-size:17px;}
    .faq-a{font-size:16px;}
    .f-group label{font-size:16px;}
    .contact-form{padding:28px 22px;}
    .trust-item{font-size:15px;}
    .form-note{font-size:14px;}
    .foot-brand{font-size:18px;}
    .foot-detail, .foot-links a, .foot-copy{font-size:16px;}
    .voice-note{font-size:16px;}
    .draft-banner{font-size:14px; padding:10px 14px;}
    .micro{font-size:16px;}
  }