@charset "UTF-8";
/* ============================================================
   情報セキュリティ講習会の講師派遣 ページ固有スタイル
   このファイルは /service/security-training/ でのみ読み込む前提。
   基本色: #6c8e74 ／ フォント: Noto Sans JP・Oswald・Roboto
   ============================================================ */

/* ----- ヘッダー：スクロール前は非表示／スクロール後（固定時）に表示 -----
   ※ st.css は当ページのみ読み込むため、ここはグローバル名で記述してよい */
.rd-navbar .brand,
.rd-navbar-contact-icon,
.rd-navbar-contact-link{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}
.rd-navbar--is-stuck .brand,
.rd-navbar--is-stuck .rd-navbar-contact-icon,
.rd-navbar--is-stuck .rd-navbar-contact-link{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ============================================================
   ページ本文：すべて #st 配下にスコープ
   ============================================================ */
#st{
  --green:#6c8e74;          /* 基本色 */
  --green-d:#557a60;        /* 濃いアクセント */
  --green-dd:#3d5544;       /* 深緑（見出し・ダーク面） */
  --green-ddd:#2f4636;      /* 最深 */
  --hero1:#233a2d;          /* ヒーロー背景 上 */
  --hero2:#2f4a39;          /* ヒーロー背景 下 */
  --sage:#9cc0a3;           /* 明るいセージ */
  --sage-l:#c4ddc8;
  --ink:#1d2a21;
  --grey:#5f6b62;
  --line:#d9e3db;
  --mist:#f3f6f3;
  --tint:#e7efe8;
  --paper:#ffffff;
  --gold:#b8954e;
  --maxw:1140px;
  --jp:"Noto Sans JP","Roboto",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --disp:"Oswald","Noto Sans JP",sans-serif;
  --lat:"Roboto","Noto Sans JP",sans-serif;
  color:var(--ink);
  font-family:var(--jp);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
#st *{box-sizing:border-box}
#st .en{font-family:var(--disp);letter-spacing:.16em;text-transform:uppercase}
#st .mincho{font-family:var(--jp);font-weight:900}
#st .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
#st a{color:inherit;text-decoration:none}
#st img{max-width:100%}

/* HERO */
#st .hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(156,192,163,.30), transparent 60%),
    radial-gradient(900px 500px at -5% 20%, rgba(108,142,116,.40), transparent 55%),
    linear-gradient(160deg,var(--hero1) 0%, var(--green-ddd) 45%, var(--hero2) 100%);
}
#st .hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask:radial-gradient(700px 400px at 70% 30%,#000,transparent 75%);
  mask:radial-gradient(700px 400px at 70% 30%,#000,transparent 75%);opacity:.6;
}
#st .hero .wrap{position:relative;padding:78px 24px 90px}
#st .kicker{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-l);
  border:1px solid rgba(196,221,200,.4);padding:7px 16px;border-radius:999px;margin-bottom:26px;
}
#st .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 12px var(--sage)}
#st .hero h1{font-size:clamp(30px,5.4vw,54px);font-weight:700;line-height:1.32;margin-bottom:24px;color:#fff}
#st .hero h1 .hl{background:linear-gradient(120deg,#b6dcbb,#e3f3e5);-webkit-background-clip:text;background-clip:text;color:transparent}
#st .hero p.lead{font-size:clamp(15px,2vw,18px);color:#dce8df;max-width:680px;line-height:2.05}
#st .htags{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
#st .htags span{font-size:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 15px;border-radius:8px;color:#e6f1e8}
#st .hbtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}
#st .st-btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:15px 30px;border-radius:999px;transition:.25s;cursor:pointer}
#st .st-btn-primary{background:linear-gradient(120deg,var(--green),var(--green-d));color:#fff;box-shadow:0 14px 30px -10px rgba(85,122,96,.6)}
#st .st-btn-primary:hover{transform:translateY(-2px);color:#fff}
#st .st-btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
#st .st-btn-ghost:hover{background:rgba(255,255,255,.1)}
#st .arr{font-family:var(--lat)}

/* SECTION FRAME */
#st .sec{padding:84px 0}
#st .shead{margin-bottom:48px}
#st .shead .lbl{font-family:var(--disp);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-d);font-weight:600;display:block;margin-bottom:12px}
#st .shead h2{font-size:clamp(24px,3.6vw,36px);font-weight:700;line-height:1.4;color:var(--ink)}
#st .shead h2 .u{background:linear-gradient(transparent 62%, rgba(108,142,116,.32) 62%)}
#st .shead p{margin-top:18px;color:var(--grey);max-width:760px;font-size:15.5px}

/* WHY */
#st .why{background:var(--mist)}
#st .why-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center}
#st .why-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
#st .why-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:18px 22px}
#st .why-item b{display:block;font-size:16px;margin-bottom:4px}
#st .why-item span{font-size:14px;color:var(--grey)}
#st .stat-card{background:linear-gradient(160deg,var(--green-ddd),var(--green-dd));color:#fff;border-radius:20px;padding:40px 36px;position:relative;overflow:hidden;box-shadow:0 30px 60px -28px rgba(47,70,54,.6)}
#st .stat-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(156,192,163,.45),transparent 70%)}
#st .stat-row{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
#st .stat-row:last-child{border-bottom:none}
#st .stat-row .num{font-family:var(--disp);font-size:46px;font-weight:600;line-height:1;color:var(--sage-l);min-width:96px}
#st .stat-row .num small{font-size:16px;color:#dce8df}
#st .stat-row .txt{font-size:13.5px;color:#dce8df;line-height:1.6}

/* CURRICULUM */
#st .cur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#st .cur-card{border:1px solid var(--line);border-radius:16px;padding:30px 26px;background:#fff;transition:.28s;position:relative;overflow:hidden}
#st .cur-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--sage),var(--green-d));transition:.4s}
#st .cur-card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -24px rgba(47,70,54,.3);border-color:transparent}
#st .cur-card:hover::before{width:100%}
#st .cur-no{font-family:var(--disp);font-size:14px;letter-spacing:.18em;color:var(--green-d);font-weight:600}
#st .cur-ic{width:52px;height:52px;border-radius:13px;background:var(--tint);display:grid;place-items:center;margin:14px 0 18px}
#st .cur-ic svg{width:26px;height:26px;stroke:var(--green-d);fill:none;stroke-width:1.8}
#st .cur-card h3{font-size:18px;font-weight:700;margin-bottom:10px;line-height:1.5}
#st .cur-card p{font-size:13.8px;color:var(--grey);line-height:1.8;margin:0}

/* REASONS */
#st .reasons{background:linear-gradient(180deg,#fff,var(--mist))}
#st .r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
#st .r-card{text-align:center;padding:8px}
#st .r-num{font-family:var(--disp);font-size:14px;letter-spacing:.18em;color:var(--gold);font-weight:600;display:block;margin-top:18px}
#st .r-card h3{font-size:20px;font-weight:700;margin:14px 0 12px;line-height:1.5}
#st .r-card p{font-size:14.5px;color:var(--grey);margin:0}
#st .r-ring{width:84px;height:84px;margin:0 auto;border-radius:50%;background:conic-gradient(var(--green-d),var(--sage),var(--green-d));display:grid;place-items:center}
#st .r-ring i{width:70px;height:70px;border-radius:50%;background:#fff;display:grid;place-items:center}
#st .r-ring svg{width:32px;height:32px;stroke:var(--green-ddd);fill:none;stroke-width:1.7}

/* LECTURER */
#st .lect{background:linear-gradient(160deg,var(--hero1),var(--green-ddd));color:#fff;position:relative;overflow:hidden}
#st .lect::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;opacity:.5}
#st .lect .wrap{position:relative}
#st .lect-grid{display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:center}
#st .lect-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:38px 30px;text-align:center}
#st .lect-av{width:120px;height:120px;border-radius:50%;margin:0 auto 22px;background:linear-gradient(135deg,var(--sage),var(--green-d));display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:34px;letter-spacing:.04em;color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.06)}
#st .lect-card .role{font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-l);margin-bottom:6px}
#st .lect-card h3{font-size:19px;font-weight:700;line-height:1.5}
#st .lect-card .yrs{margin-top:16px;font-family:var(--lat);font-size:13px;color:#dce8df}
#st .lect-card .yrs b{font-family:var(--disp);font-size:32px;color:var(--sage-l)}
#st .lect-body .lbl{font-family:var(--disp);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-l);display:block;margin-bottom:14px}
#st .lect-body h2{font-size:clamp(22px,3vw,30px);font-weight:700;line-height:1.5;margin-bottom:20px;color:#fff}
#st .lect-body p{color:#dce8df;font-size:15px;margin-bottom:24px;max-width:560px}
#st .lect-tags{display:flex;flex-wrap:wrap;gap:10px}
#st .lect-tags span{font-size:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:8px}

/* PRICING */
#st .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
#st .price-card{border:1px solid var(--line);border-radius:18px;padding:32px 28px;background:#fff;display:flex;flex-direction:column;position:relative;transition:.28s}
#st .price-card:hover{box-shadow:0 24px 50px -28px rgba(47,70,54,.3);transform:translateY(-4px)}
#st .price-card.feat{border:2px solid var(--green);box-shadow:0 24px 50px -26px rgba(108,142,116,.45)}
#st .price-card.feat::before{content:"おすすめ";position:absolute;top:-13px;left:28px;background:linear-gradient(120deg,var(--green),var(--green-d));color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:999px;letter-spacing:.05em}
#st .price-card .tier{font-family:var(--disp);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-d);font-weight:600}
#st .price-card h3{font-size:20px;font-weight:700;margin:10px 0 6px}
#st .price-card .dur{font-size:13.5px;color:var(--grey);margin-bottom:20px}
#st .price-card .amt{font-family:var(--disp);font-weight:600;color:var(--green-ddd);line-height:1.1;margin-bottom:4px}
#st .price-card .amt b{font-size:44px;font-weight:600}
#st .price-card .amt span{font-size:16px;color:var(--grey)}
#st .price-card .tax{font-size:12.5px;color:var(--grey);margin-bottom:22px}
#st .price-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:auto;padding:0}
#st .price-card li{font-size:13.8px;display:flex;gap:9px;align-items:flex-start}
#st .price-card li::before{content:"✓";color:var(--green-d);font-weight:700;flex-shrink:0}
#st .price-note{margin-top:26px;background:var(--tint);border-radius:14px;padding:22px 26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
#st .price-note .tag{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--green-d);background:#fff;padding:8px 16px;border-radius:999px;white-space:nowrap}
#st .price-note p{font-size:14px;color:var(--green-ddd);margin:0}
#st .price-note p b{font-family:var(--disp);font-size:18px}
#st .price-disc{margin-top:16px;font-size:12.5px;color:var(--grey)}

/* FLOW */
#st .flow{background:var(--mist)}
#st .flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
#st .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;position:relative}
#st .step .n{font-family:var(--disp);font-weight:600;font-size:30px;color:var(--tint);position:absolute;top:14px;right:18px}
#st .step .n2{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--green-d);letter-spacing:.1em;text-transform:uppercase}
#st .step h4{font-size:15.5px;font-weight:700;margin:10px 0 8px}
#st .step p{font-size:13px;color:var(--grey);margin:0}

/* AREA */
#st .area-box{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:44px;background:linear-gradient(160deg,#fff,var(--tint))}
#st .area-box h3{font-size:24px;font-weight:700;margin-bottom:14px}
#st .area-box h3 .mincho{color:var(--green-d)}
#st .area-box p{color:var(--grey);font-size:14.5px;margin:0}
#st .area-lbl{font-family:var(--disp);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-d);font-weight:600}
#st .area-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
#st .area-tags span{font-size:13px;background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:8px;color:var(--green-ddd)}
#st .area-map{font-family:var(--disp);font-weight:300;font-size:clamp(44px,8vw,96px);color:var(--green-ddd);line-height:.95;text-align:center;letter-spacing:.01em;text-transform:uppercase}
#st .area-map small{display:block;font-size:14px;letter-spacing:.18em;color:var(--green-d);font-weight:500;margin-top:10px}

/* FAQ */
#st .faq-item{border-bottom:1px solid var(--line)}
#st .faq-q{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 4px;cursor:pointer;font-weight:700;font-size:16px}
#st .faq-q .qm{font-family:var(--disp);color:var(--green-d);font-weight:600;margin-right:12px}
#st .faq-q .pl{flex-shrink:0;width:24px;height:24px;position:relative;transition:.3s}
#st .faq-q .pl::before,#st .faq-q .pl::after{content:"";position:absolute;background:var(--green-d);left:50%;top:50%;transform:translate(-50%,-50%)}
#st .faq-q .pl::before{width:14px;height:2px}
#st .faq-q .pl::after{width:2px;height:14px;transition:.3s}
#st .faq-item.open .pl::after{transform:translate(-50%,-50%) scaleY(0)}
#st .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--grey);font-size:14.5px}
#st .faq-a div{padding:0 4px 24px}

/* CTA */
#st .cta{background:linear-gradient(135deg,var(--hero1),var(--green-dd));color:#fff;text-align:center;position:relative;overflow:hidden}
#st .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 0,rgba(156,192,163,.3),transparent 65%)}
#st .cta .wrap{position:relative}
#st .cta h2{font-size:clamp(24px,4vw,38px);font-weight:700;line-height:1.5;margin-bottom:18px;color:#fff}
#st .cta p{color:#dce8df;max-width:620px;margin:0 auto 34px;font-size:15.5px}
#st .cta .ph{font-family:var(--disp);font-size:clamp(28px,5vw,42px);font-weight:600;color:var(--sage-l);margin-top:30px;letter-spacing:.03em}
#st .cta .ph small{display:block;font-family:var(--jp);font-size:13px;color:#dce8df;letter-spacing:0;margin-top:6px}

/* reveal */
#st .reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
#st .reveal.in{opacity:1;transform:none}

/* ----- フッター前のページメタ（公開日・監修） ----- */
.st-pagemeta{max-width:1140px;margin:0 auto;padding:30px 24px 56px;color:#5f6b62;font-family:"Noto Sans JP","Roboto",sans-serif;font-size:13px;line-height:2}
.st-pagemeta .row{display:flex;flex-wrap:wrap;gap:8px 22px;border-top:1px solid #e2e8e4;padding-top:20px}
.st-pagemeta .date{font-family:"Roboto","Noto Sans JP",sans-serif;letter-spacing:.02em}
.st-pagemeta .sup b{font-weight:700;color:#3d5544}

/* responsive */
@media(max-width:900px){#st .cur-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){#st .price-grid{grid-template-columns:1fr}}
@media(max-width:840px){#st .why-grid{grid-template-columns:1fr;gap:34px}#st .r-grid{grid-template-columns:1fr}}
@media(max-width:820px){#st .flow-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){#st .lect-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:760px){#st .area-box{grid-template-columns:1fr;padding:30px;gap:24px}}
@media(max-width:560px){#st .cur-grid{grid-template-columns:1fr}#st .sec{padding:60px 0}}
@media(max-width:480px){#st .flow-steps{grid-template-columns:1fr}}



.bhst_fc_01 { color: #000!important; }