:root{
    --bg:    #08090b;
    --panel: #0c0e11;
    --panel2:#101319;
    --text:  #f1f3f4;
    --muted: #9aa2a8;
    --muted2:#6c747a;
    --line:  rgba(255,255,255,.16);
    --line2: rgba(255,255,255,.09);
    --accent:#f0732b;
    --accent-d:#dd5f1a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:90px}
  body{
    font-family:"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
    background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:.02em;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}

  /* ============ HERO (決定案・案3をそのまま) ============ */
  .stage{
    position:relative;min-height:100vh;overflow:hidden;
    background:#0c0d0f url("images/studio_b.webp") center 44%/cover no-repeat;
  }
  .stage::before{
    content:"";position:absolute;inset:0;z-index:1;backdrop-filter:saturate(.4) contrast(1.02);
    background:
      linear-gradient(180deg,rgba(8,9,11,.42) 0%,rgba(8,9,11,.12) 24%,rgba(8,9,11,.12) 48%,rgba(6,7,9,.30) 76%,rgba(6,7,9,.5) 100%),
      linear-gradient(90deg,rgba(6,7,9,.45) 0%,rgba(6,7,9,.08) 46%,rgba(6,7,9,0) 100%);
  }
  .veil{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;z-index:2;
    background:linear-gradient(180deg,rgba(8,9,11,0) 0%,rgba(8,9,11,.5) 16%,rgba(8,9,11,.9) 40%,var(--bg) 70%);}
  .frame{position:absolute;inset:22px;z-index:6;border:1px solid var(--line);pointer-events:none}
  header{
    position:fixed;top:0;left:0;right:0;z-index:120;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 34px;border-bottom:1px solid transparent;
    background:linear-gradient(180deg,rgba(6,7,9,.62) 0%,rgba(6,7,9,0) 100%);
    transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  }
  header.scrolled{
    border-bottom-color:var(--line);
    background:rgba(8,9,11,.82);
    -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  }
  .logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
  .logo-img{height:30px;width:auto;display:block}
  .logo span{color:var(--muted);font-weight:400;font-size:10px;letter-spacing:.32em;margin-top:8px;display:block;text-align:center;padding-left:.32em}
  .main-nav{display:flex;align-items:center;gap:28px}
  .main-nav a{color:#d7dce0;text-decoration:none;font-size:12.5px;letter-spacing:.1em;transition:color .2s;
    text-shadow:0 1px 10px rgba(0,0,0,.6)}
  .main-nav a:hover{color:#fff}
  .cta{border:1px solid var(--line);padding:9px 18px;color:var(--text)!important;font-size:12px;letter-spacing:.1em}
  .cta:hover{border-color:var(--accent);color:var(--accent)!important}
  .menu-panel{position:fixed;top:22px;right:22px;width:min(430px,calc(100vw - 44px));max-height:calc(100vh - 44px);
    z-index:42;padding:78px 34px 34px;border:1px solid var(--line);
    background:rgba(8,9,11,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transform:translateX(calc(100% + 44px));transition:transform .32s ease;overflow:auto}
  body.nav-open .menu-panel{transform:none}
  .menu-group{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--line2)}
  .menu-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
  .menu-group .menu-label{font-size:11px;letter-spacing:.22em;color:var(--accent);font-weight:700;margin-bottom:14px}
  .menu-group a{display:block;color:#d7dce0;text-decoration:none;font-size:15px;letter-spacing:.08em;
    padding:8px 0;transition:color .2s}
  .menu-group a:hover{color:#fff}
  .copy{position:absolute;left:56px;bottom:120px;z-index:7;max-width:980px}
  .kicker{display:inline-flex;align-items:center;gap:13px;font-size:14px;font-weight:600;
    letter-spacing:.18em;color:#e7d4c4;margin-bottom:26px}
  .kicker::before{content:"";width:32px;height:1px;background:var(--accent)}
  h1{font-size:76px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-shadow:0 2px 26px rgba(0,0,0,.5)}
  h1 .u{color:var(--accent)}
  .lead{margin-top:28px;color:#c4cbd0;font-size:14.5px;letter-spacing:.06em;max-width:540px;
    padding-top:20px;border-top:1px solid var(--line)}
  .meta-r{position:absolute;right:56px;bottom:54px;z-index:7;font-size:11px;letter-spacing:.28em;color:var(--muted2);
    display:flex;align-items:center;gap:12px}
  .meta-r .bar{width:34px;height:1px;background:var(--line)}

  /* ============ 共通：セクション枠 ============ */
  .sec{position:relative;max-width:1340px;margin:0 auto;padding:96px 56px}
  .sec-head{margin-bottom:46px;max-width:760px}
  .sec-kicker{display:inline-flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.26em;
    color:var(--muted);text-transform:uppercase;margin-bottom:22px}
  .sec-kicker::before{content:"";width:32px;height:1px;background:var(--accent)}
  .sec-kicker .no{color:var(--accent);font-weight:700;margin-right:2px}
  .sec-title{font-size:36px;line-height:1.45;font-weight:700;letter-spacing:.08em}
  .sec-title .u{color:var(--accent)}
  .sec-lead{margin-top:24px;color:#c4cbd0;font-size:15px;line-height:1.95}

  /* ============ 共通：セクション背景写真 ============ */
  .bg-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .bg-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) brightness(.66) contrast(1.05)}
  .bg-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,var(--bg) 0%,rgba(8,9,11,.5) 18%,rgba(8,9,11,.4) 50%,rgba(8,9,11,.5) 82%,var(--bg) 100%)}
  .sec>.bg-photo{z-index:0}
  .sec>*:not(.bg-photo){position:relative;z-index:1}
  /* frosted glass パネル（写真の上で可読性を保つ装置） */
  .glass{background:rgba(10,12,16,.46);
    backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08)}
  /* テキストを左・写真を右に振るエディトリアル用の方向グラデ */
  #flow .bg-photo::after{background:linear-gradient(90deg,var(--bg) 0%,rgba(8,9,11,.78) 34%,rgba(8,9,11,.28) 64%,rgba(8,9,11,.5) 100%)}
  #faq .bg-photo::after{background:linear-gradient(90deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.6) 52%,rgba(8,9,11,.22) 100%)}
  #contact .bg-photo::after{background:linear-gradient(90deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.5) 46%,rgba(8,9,11,.6) 100%)}
  #contact .bg-photo img{filter:grayscale(.6) brightness(.7) contrast(1.05)}

  /* ============ 01 課題 ============ */
  .issues{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);
    border:1px solid var(--line2)}
  .issue{background:rgba(10,12,16,.46);backdrop-filter:blur(12px) saturate(1.08);
    -webkit-backdrop-filter:blur(12px) saturate(1.08);padding:40px 34px;min-height:200px}
  .issue .qn{font-size:13px;color:var(--accent);letter-spacing:.22em;font-weight:700}
  .issue h3{font-size:17px;margin:18px 0 14px;letter-spacing:.04em;line-height:1.6}
  .issue p{font-size:13.5px;color:var(--muted);line-height:1.9}

  /* ============ 導入メリット（Before→After） ============ */
  .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
  .benefit{background:var(--bg);padding:44px 34px}
  .benefit .bn{font-size:12px;letter-spacing:.22em;color:var(--accent);font-weight:700;margin-bottom:18px}
  .benefit h3{font-size:20px;margin-bottom:22px;letter-spacing:.04em}
  .benefit .before{font-size:13.5px;color:var(--muted2);line-height:1.85}
  .benefit .before b{color:var(--muted);font-weight:700}
  .benefit .after{font-size:14px;color:#dfe4e7;line-height:1.85;margin-top:14px;padding-top:16px;border-top:1px solid var(--line2)}
  .benefit .after b{color:var(--accent);font-weight:700}

  /* ============ 対応業種・活用シーン ============ */
  .usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
  .usecase{background:var(--bg);padding:38px 32px}
  .usecase h3{font-size:18px;margin-bottom:15px;letter-spacing:.04em;display:flex;align-items:center;gap:13px}
  .usecase h3::before{content:"";width:18px;height:2px;background:var(--accent);flex:0 0 auto}
  .usecase p{font-size:13.5px;color:var(--muted);line-height:1.9}
  /* 背景写真を入れるセクションのカードはフロストガラス化（写真を活かしつつ可読性確保） */
  #benefit .benefit,#howto .usecase,#usecase .usecase,#price .usecase{background:rgba(10,12,16,.5);
    backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08)}

  /* ============ 02 ポイント ============ */
  .points{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:38px 40px;
    border:1px solid var(--line2);background:rgba(9,11,15,.58);
    backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08)}
  .point{border-top:2px solid var(--accent);padding-top:26px}
  .point .pn{font-size:52px;font-weight:700;letter-spacing:.02em;line-height:1;color:var(--text)}
  .point .pn small{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.2em;margin-left:10px}
  .point h3{font-size:20px;margin:20px 0 14px;letter-spacing:.04em;line-height:1.5}
  .point p{color:#b3bbc1;font-size:14px;line-height:1.95}

  /* ============ 実績（理由セクション内） ============ */
  .stats-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px;
    border:1px solid var(--line);background:rgba(10,12,16,.4);
    backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08)}
  .stat{padding:42px 28px;border-right:1px solid var(--line2);text-align:center}
  .stat:last-child{border-right:none}
  .stat .num{font-size:44px;font-weight:700;letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--accent)}
  .stat .num.txt{font-size:28px;color:var(--text)}
  .stat .num small{font-size:15px;color:var(--muted);font-weight:400;margin-left:5px}
  .stat .lbl{margin-top:14px;font-size:12px;letter-spacing:.14em;color:var(--muted);line-height:1.6}

  /* ============ ハイブリッド研修形式 ============ */
  .formats-head{margin-top:48px;font-size:16px;letter-spacing:.1em;color:#e8ecee;font-weight:600;
    display:flex;align-items:center;gap:14px}
  .formats-head::before{content:"";width:30px;height:1px;background:var(--accent)}
  .formats-head .u{color:var(--accent)}
  .formats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);
    border:1px solid var(--line2);margin-top:26px}
  .format{background:rgba(10,12,16,.46);backdrop-filter:blur(12px) saturate(1.08);
    -webkit-backdrop-filter:blur(12px) saturate(1.08);padding:34px 30px}
  .format .fi{font-size:11px;letter-spacing:.2em;color:var(--accent);font-weight:700;margin-bottom:16px}
  .format h4{font-size:18px;margin-bottom:13px;letter-spacing:.04em}
  .format p{color:var(--muted);font-size:13.5px;line-height:1.95}

  /* ============ 研修紹介動画 ============ */
  .intro .sec-head{margin-left:auto;margin-right:auto;text-align:center}
  .intro .sec-kicker{justify-content:center}
  .video-wrap{position:relative;display:block;
    max-width:1120px;margin:0 auto;aspect-ratio:16/9;
    border:1px solid var(--line);background:#0c0e11;overflow:hidden}
  .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* ファサード（自前サムネ＋再生ボタン → クリックでiframe差し替え） */
  .video-wrap[role="button"]{cursor:pointer}
  .video-wrap .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:grayscale(.35) brightness(.62) contrast(1.05)}
  .video-wrap .video-ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:18px}
  .video-wrap .play{width:78px;height:78px;border-radius:50%;border:1px solid var(--accent);
    display:flex;align-items:center;justify-content:center;background:rgba(240,115,43,.14);transition:all .2s}
  .video-wrap .play::before{content:"";border-style:solid;border-width:11px 0 11px 18px;
    border-color:transparent transparent transparent var(--accent);margin-left:5px}
  .video-wrap:hover .play{background:rgba(240,115,43,.26);transform:scale(1.04)}
  .video-wrap .cap{font-size:11.5px;letter-spacing:.2em;color:#cfd5d9}

  /* ============ 講師紹介 ============ */
  /* 講師：常に5列横並び固定（ウィンドウ幅が変わっても縦積みしない）／カード全体がリンク */
  .teachers{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
  .teacher{display:block;text-decoration:none;color:inherit;
    border:1px solid var(--line2);background:var(--panel);
    transition:border-color .26s ease,transform .26s ease}
  .teacher:hover{border-color:rgba(240,115,43,.5);transform:translateY(-3px)}
  .teacher .ph{aspect-ratio:4/5;width:100%;display:block;object-fit:cover;object-position:center 20%;
    background:#10131a;border-bottom:1px solid var(--line2);filter:grayscale(.5) brightness(.97) contrast(1.02)}
  .teacher .tbody{padding:18px 14px 20px;text-align:center}
  .teacher .role{font-size:10.5px;letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:9px;line-height:1.5}
  .teacher h3{font-size:16px;letter-spacing:.04em;margin-bottom:14px;line-height:1.4}
  .teacher .tlink{display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:11.5px;letter-spacing:.06em;color:#cdd3d7;border-top:1px solid var(--line2);padding-top:13px}
  .teacher:hover .tlink{color:var(--accent)}

  /* ============ 04 研修内容 ============ */
  .sec-visual{position:relative;margin-bottom:46px;overflow:hidden;border:1px solid var(--line2)}
  .sec-visual img{width:100%;height:320px;object-fit:cover;display:block;filter:saturate(.42) brightness(.82)}
  .sec-visual::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,.12) 55%,rgba(8,9,11,0) 100%)}
  .sec-visual .cap{position:absolute;left:30px;bottom:24px;z-index:2;font-size:11px;
    letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
  .cover-tags{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:46px}
  .cover-tags span{border:1px solid var(--line);padding:11px 20px;font-size:13px;letter-spacing:.08em;color:#d4dade}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
  .pillar{background:var(--bg);padding:42px 34px}
  .pillar .pi{font-size:12px;letter-spacing:.22em;color:var(--accent);font-weight:700;margin-bottom:18px}
  .pillar h3{font-size:19px;margin-bottom:16px;letter-spacing:.04em}
  .pillar p{color:var(--muted);font-size:13.5px;line-height:1.95}

  /* ============ 05 導入事例 ============ */
  .case{display:grid;grid-template-columns:130px 1fr;gap:44px;padding:34px 36px;
    border:1px solid var(--line2);border-bottom:none;
    background:rgba(10,12,16,.44);backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08)}
  .case:last-child{border-bottom:1px solid var(--line2)}
  .case .cno{color:var(--accent);font-weight:700;letter-spacing:.2em;font-size:14px;padding-top:4px}
  .case h3{font-size:21px;margin-bottom:22px;letter-spacing:.04em;line-height:1.5}
  .case .meta{display:flex;flex-wrap:wrap;gap:14px 48px}
  .case .meta div{min-width:120px}
  .case .meta .k{font-size:11px;letter-spacing:.16em;color:var(--muted2);margin-bottom:6px}
  .case .meta .v{font-size:15px;color:#dfe4e7}
  .case[data-modal]{cursor:pointer;outline:none}
  .case[data-modal]:focus-visible{border-color:var(--accent)}
  .case-more{display:inline-block;margin-top:18px;color:var(--accent);font-size:12px;letter-spacing:.08em}

  /* ============ 06 導入の流れ ============ */
  .steps{position:relative;max-width:760px}
  .step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:30px;padding-bottom:34px}
  .step:last-child{padding-bottom:0}
  .step::before{content:"";position:absolute;left:31px;top:54px;bottom:0;width:1px;background:var(--line)}
  .step:last-child::before{display:none}
  .step .sn{width:64px;height:64px;border:1px solid var(--accent);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.12em;
    color:var(--accent);font-weight:700;background:var(--bg);z-index:2}
  .step .sbody{padding-top:8px}
  .step h3{font-size:19px;margin-bottom:10px;letter-spacing:.04em}
  .step p{color:var(--muted);font-size:14px;line-height:1.9}

  /* ============ 07 FAQ ============ */
  .faq{max-width:860px}
  .faq-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
  .faq-tab{font-family:inherit;cursor:pointer;font-size:13.5px;letter-spacing:.04em;color:var(--muted);
    padding:12px 22px;border:1px solid var(--line);background:rgba(10,12,16,.42);
    backdrop-filter:blur(8px) saturate(1.05);-webkit-backdrop-filter:blur(8px) saturate(1.05);
    transition:color .2s ease,background-color .2s ease,border-color .2s ease}
  .faq-tab:hover{color:var(--text)}
  .faq-tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
  .faq-panel{display:none;border:1px solid var(--line2);padding:6px 34px;
    background:rgba(10,12,16,.46);backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08)}
  .faq-panel.is-active{display:block}
  .faq details{border-bottom:1px solid var(--line2)}
  .faq details:last-child{border-bottom:none}
  .faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
    font-size:16px;letter-spacing:.04em;color:#e8ecee}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"Q";color:var(--accent);font-weight:700;margin-right:16px;letter-spacing:.1em}
  .faq summary::after{content:"+";position:absolute;right:6px;top:24px;font-size:22px;color:var(--muted);font-weight:300}
  .faq details[open] summary::after{content:"–"}
  .faq .a{padding:0 44px 28px 34px;color:var(--muted);font-size:14px;line-height:1.95}

  /* ============ 08 CTA / 問い合わせ ============ */
  .cta-sec{position:relative;overflow:hidden;background:var(--panel2);border-top:1px solid var(--line)}
  .cta-sec>.bg-photo{z-index:0}
  .cta-inner{position:relative;z-index:1;max-width:1340px;margin:0 auto;padding:84px 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  .cta-left h2{font-size:40px;line-height:1.4;letter-spacing:.08em;font-weight:700}
  .cta-left h2 .u{color:var(--accent)}
  .cta-left p{margin-top:26px;color:#c4cbd0;font-size:15px;line-height:1.95;max-width:440px}
  .cta-btns{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;font-size:14.5px;
    text-decoration:none;letter-spacing:.06em;font-weight:700;transition:all .2s}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 30px rgba(240,115,43,.28)}
  .btn-primary:hover{background:var(--accent-d)}
  .btn-ghost{border:1px solid var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--text)}
  .form{border:1px solid var(--line);padding:40px 38px;background:var(--bg)}
  .form .fl{margin-bottom:22px}
  .form .fl:last-child{margin-bottom:0}
  .form label{display:block;font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
  .form label .req{color:var(--accent);margin-left:6px}
  .form .field{height:46px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
  .form .field.area{height:96px}
  .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .form input.field,.form textarea.field{width:100%;display:block;color:var(--text);font-family:inherit;
    font-size:14px;letter-spacing:.02em;padding:0 14px;outline:none}
  .form textarea.field{padding:12px 14px;line-height:1.7;resize:vertical}
  .form input.field:focus,.form textarea.field:focus{border-color:var(--accent)}
  .form select.field{width:100%;color:var(--text);font-family:inherit;font-size:14px;letter-spacing:.02em;
    padding:0 38px 0 14px;-webkit-appearance:none;appearance:none;cursor:pointer;
    background:rgba(255,255,255,.02) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%239aa2a8" stroke-width="1.5"/></svg>') no-repeat right 14px center}
  .form select.field:focus{border-color:var(--accent)}
  .form select.field option{color:#1a1a1a}
  .form .hp{position:absolute!important;left:-9999px;width:1px;height:0;overflow:hidden;margin:0}
  .form-submit{margin-top:4px;width:100%;justify-content:center;border:none;cursor:pointer;font-family:inherit}
  .form-status{margin-top:14px;font-size:13.5px;line-height:1.7;min-height:1.2em;color:var(--muted)}
  .form-status.ok{color:#7fd18b}
  .form-status.ng{color:#ff8a6a}
  .form-consent{margin-bottom:20px}
  .form .form-consent label{display:flex;align-items:flex-start;gap:10px;margin-bottom:0;cursor:pointer;
    font-size:12.5px;line-height:1.65;letter-spacing:.02em;color:var(--muted)}
  .form-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
  .form-consent a{color:#d4dade;text-decoration:underline}
  .form-consent a:hover{color:var(--accent)}

  /* ============ フッター ============ */
  footer{border-top:1px solid var(--line2);padding:54px 56px;max-width:1340px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;color:var(--muted2);font-size:12px;letter-spacing:.1em}
  footer .fnav{display:flex;gap:26px}
  footer a{color:var(--muted);text-decoration:none}

  /* ============ インタラクション状態（ホバー / フォーカス） ============ */
  .navtoggle{display:block;width:38px;height:34px;position:relative;background:rgba(8,9,11,.28);
    border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;z-index:50}
  .navtoggle span{position:absolute;left:8px;right:8px;height:1.5px;background:var(--text);transition:transform .28s ease,opacity .2s ease}
  .navtoggle span:nth-child(1){top:9px}
  .navtoggle span:nth-child(2){top:16px}
  .navtoggle span:nth-child(3){top:23px}
  body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .navtoggle span:nth-child(2){opacity:0}
  body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
  /* グリッド型カード（課題 / 形式 / サポート）はホバーで地を少し明るく */
  .issue,.format{transition:background-color .26s ease}
  .issue:hover,.format:hover{background-color:rgba(22,27,34,.62)}
  .pillar{transition:background-color .26s ease}
  .pillar:hover{background-color:#12161c}
  /* 枠線型カード（講師 / 事例）はホバーで枠をアクセント寄りに */
  .case{transition:border-color .26s ease,background-color .26s ease}
  .case:hover{border-color:rgba(240,115,43,.42);background:rgba(14,17,22,.52)}
  /* 理由カードはホバーでわずかに持ち上げ */
  .point{transition:transform .26s ease}
  .point:hover{transform:translateY(-3px)}
  /* FAQ / フッターのホバー */
  .faq summary{transition:color .2s ease}
  .faq summary:hover{color:#fff}
  .faq summary:hover::after{color:var(--accent)}
  footer a{transition:color .2s ease}
  footer a:hover{color:var(--text)}

  /* ============ レスポンシブ（簡易） ============ */
  @media(max-width:900px){
    .sec{padding:80px 24px}
    h1{font-size:34px;letter-spacing:.04em}
    .sec-title{font-size:26px}
    .issues,.points,.pillars,.stats-row,.formats,.benefits,.usecases{grid-template-columns:1fr}
    /* 講師は5列固定のまま、文字サイズを詰めて収める（タブレット幅） */
    .teachers{gap:10px}
    .teacher .tbody{padding:14px 9px 16px}
    .teacher .role{font-size:9px;letter-spacing:.04em;margin-bottom:6px}
    .teacher h3{font-size:13px;margin-bottom:11px}
    .teacher .tlink{font-size:9.5px;padding-top:10px;gap:3px}
    .stat{border-right:none;border-bottom:1px solid var(--line2);padding:36px 24px}
    .case{grid-template-columns:1fr;gap:18px;padding:34px 0}
    .cta-inner{grid-template-columns:1fr;gap:44px;padding:70px 24px}
    .cta-left h2{font-size:28px}
    .faq-tabs{gap:8px}
    .faq-tab{font-size:12px;padding:10px 14px}
    .faq-panel{padding:4px 20px}
    /* ヒーロー（スマホ最適化） */
    .copy{left:24px;right:24px;bottom:96px;max-width:none}
    .lead{max-width:none}
    .meta-r{right:24px;bottom:38px}
    .frame{inset:13px}
    /* ハイブリッド見出し：スマホは装飾線を外して自然に折り返す */
    .formats-head{display:block;font-size:15px}
    .formats-head::before{display:none}
    /* お問い合わせフォーム：2項目を縦積みにして入力しやすく */
    .form .row2{grid-template-columns:1fr;gap:0}
    .form .row2>div{margin-bottom:22px}
    .form .row2>div:last-child{margin-bottom:0}
    /* 背景写真：スマホは縦に引き伸ばさず、上部の帯として自然な比率で見せる（見切れ防止） */
    .bg-photo{inset:0 0 auto 0;height:clamp(230px,64vw,300px)}
    #issue .bg-photo::after,#point .bg-photo::after,#case .bg-photo::after,
    #flow .bg-photo::after,#faq .bg-photo::after,#contact .bg-photo::after{
      background:linear-gradient(180deg,rgba(8,9,11,.36) 0%,rgba(8,9,11,.62) 60%,var(--bg) 100%)}
    footer{flex-direction:column;gap:18px;text-align:center}

    /* --- ナビ：ハンバーガー化（リンクが消えないように） --- */
    html{scroll-padding-top:64px}
    header{position:fixed;top:0;left:0;right:0;padding:15px 20px;border-bottom:none;z-index:120;
      background:linear-gradient(180deg,rgba(8,9,11,.82),rgba(8,9,11,0))}
    .logo-img{height:24px}
    .logo span{font-size:9px;letter-spacing:.26em;margin-top:6px}
    .navtoggle{position:fixed;top:15px;right:auto;left:min(calc(100vw - 58px),332px);
      z-index:100;background:rgba(8,9,11,.72);border-color:rgba(255,255,255,.32)}
    .main-nav{display:none}
    .menu-panel{inset:0;width:auto;max-height:none;padding:92px 28px 34px;border:none;
      transform:translateX(100%)}
    body.nav-open{overflow:hidden}
    .menu-group{padding-bottom:22px;margin-bottom:22px}
    .menu-group a{font-size:18px;padding:10px 0;color:var(--text)}
  }
  @media(max-width:480px){
    /* スマホ：5列固定のまま、肩書きは省いて名前＋リンクをすっきり */
    .teachers{gap:6px}
    .teacher .tbody{padding:10px 4px 12px}
    .teacher .role{display:none}
    .teacher h3{font-size:10.5px;margin-bottom:7px;letter-spacing:0}
    .teacher .tlink{font-size:8px;padding-top:7px;gap:2px;letter-spacing:0}
  }
  @media(min-width:520px) and (max-width:900px){
    .navtoggle{left:auto;right:20px}
  }

  /* ============ モーダル（講師詳細 / CASE） ============ */
  .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
  .modal.is-open{display:flex}
  .modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.74);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}
  .modal-card{position:relative;z-index:1;width:min(720px,100%);max-height:calc(100vh - 48px);overflow:auto;
    background:var(--panel);border:1px solid var(--line);
    -webkit-animation:modalIn .22s ease;animation:modalIn .22s ease}
  @-webkit-keyframes modalIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
  @keyframes modalIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
  .modal-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border:1px solid var(--line);
    background:rgba(8,9,11,.55);color:var(--text);font-size:22px;line-height:1;cursor:pointer;transition:all .2s}
  .modal-close:hover{border-color:var(--accent);color:var(--accent)}
  .modal-body{padding:44px 40px}
  .teach-head{display:flex;gap:24px;align-items:center;margin-bottom:26px}
  .teach-ph{width:120px;height:150px;object-fit:cover;object-position:center 20%;flex:0 0 auto;
    filter:grayscale(.4) brightness(.98);border:1px solid var(--line2)}
  .modal-body h3{font-size:24px;letter-spacing:.06em;line-height:1.4}
  .teach-en{display:block;margin-top:8px;font-size:12px;letter-spacing:.16em;color:var(--accent)}
  .teach-bio{color:#c4cbd0;font-size:14px;line-height:2;margin-bottom:24px}
  .teach-sub{font-size:11px;letter-spacing:.18em;color:var(--muted2);margin-bottom:12px;font-weight:700}
  .teach-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
  .teach-tags span{border:1px solid var(--line2);padding:7px 14px;font-size:12px;color:#d4dade;letter-spacing:.04em}
  .teach-list{list-style:none;margin-bottom:26px}
  .teach-list li{position:relative;padding:7px 0 7px 20px;font-size:13.5px;color:#c4cbd0;line-height:1.7;border-bottom:1px solid var(--line2)}
  .teach-list li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--accent)}
  .teach-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--accent);
    text-decoration:none;border-bottom:1px solid rgba(240,115,43,.4);padding-bottom:3px}
  .teach-link:hover{color:#ff8c4d;border-bottom-color:#ff8c4d}
  .case-cno{color:var(--accent);font-weight:700;letter-spacing:.2em;font-size:13px;margin-bottom:14px}
  .modal-body .case-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;margin:24px 0 26px}
  .modal-body .case-meta>div{border-left:2px solid var(--line2);padding-left:16px}
  .modal-body .case-meta .k{font-size:11px;letter-spacing:.14em;color:var(--muted2);margin-bottom:6px}
  .modal-body .case-meta .v{font-size:15px;color:#dfe4e7;line-height:1.6}
  .case-note{color:var(--muted);font-size:14px;line-height:1.9;margin-bottom:26px}
  .case-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--accent);color:#fff;
    font-size:14px;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:background .2s}
  .case-cta:hover{background:var(--accent-d)}
  body.modal-open{overflow:hidden}
  @media(max-width:600px){
    .modal{padding:0;align-items:flex-end}
    .modal-card{width:100%;max-height:92vh;border-left:none;border-right:none;border-bottom:none}
    .modal-body{padding:32px 22px 28px}
    .teach-head{gap:16px}
    .teach-ph{width:92px;height:115px}
    .modal-body h3{font-size:20px}
    .modal-body .case-meta{grid-template-columns:1fr;gap:14px}
  }