/* ===== 共感講座LP：申し込みボタンまわり（2026-09-28 追加）=====
   kyokankoza_home/index.html からこのファイルと kyokan-cta.js の読み込みを外せば元に戻ります */
:root{
  --dr-cta:#c9505f;        /* ボタンの色（白文字が読みやすい濃さのピンク） */
  --dr-cta-hover:#b3404f;
  --dr-cta-soft:#fff4f5;
  --dr-ink:#4a4547;
}

/* --- ボタン共通 --- */
.dr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:56px;padding:0 28px;border-radius:999px;
  font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:17px;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;border:2px solid var(--dr-cta);
  transition:background-color .2s,color .2s,transform .15s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.dr-btn:active{transform:translateY(1px)}
.dr-btn--main{background:var(--dr-cta);color:#fff;box-shadow:0 6px 18px rgba(201,80,95,.28)}
.dr-btn--main:hover{background:var(--dr-cta-hover);border-color:var(--dr-cta-hover)}
.dr-btn--sub{background:#fff;color:var(--dr-cta)}
.dr-btn--sub:hover{background:var(--dr-cta-soft)}
.dr-btn .dr-arrow{font-size:.9em;transition:transform .2s}
.dr-btn:hover .dr-arrow{transform:translateX(3px)}
.dr-play{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--dr-cta);color:#fff;font-size:10px;padding-left:2px}

/* --- ファーストビュー直下の帯 --- */
.dr-fv-cta,.dr-mid-cta{width:100%;box-sizing:border-box;align-self:stretch}
.dr-sp{display:none}
.dr-fv-cta{background:linear-gradient(180deg,#fff 0%,var(--dr-cta-soft) 100%);padding:36px 20px 44px;text-align:center;font-family:'Noto Sans JP',sans-serif;color:var(--dr-ink)}
.dr-fv-cta__tag{display:inline-block;font-size:13px;font-weight:700;color:var(--dr-cta);border:1px solid var(--dr-cta);border-radius:999px;padding:4px 14px;margin:0 0 14px;background:#fff}
.dr-fv-cta__copy{font-size:24px;font-weight:700;line-height:1.6;letter-spacing:.1em;margin:0 0 22px}
.dr-fv-cta__copy em{font-style:normal;background:linear-gradient(transparent 62%,#ffd9de 62%)}
.dr-fv-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.dr-fv-cta__note{font-size:13px;margin:14px 0 0;color:#716d6f}

/* --- ページ途中の小さな帯 --- */
.dr-mid-cta{padding:40px 20px;text-align:center;font-family:'Noto Sans JP',sans-serif;color:var(--dr-ink)}
.dr-mid-cta__box{max-width:760px;margin:0 auto;background:#fff;border:2px solid #f3c9cf;border-radius:20px;padding:28px 20px}
.dr-mid-cta__ttl,.dr-mid-cta__txt{text-wrap:balance;word-break:auto-phrase}
.dr-mid-cta__ttl{font-size:19px;font-weight:700;margin:0 0 6px}
.dr-mid-cta__txt{font-size:14px;margin:0 0 18px;color:#716d6f;line-height:1.8}
.dr-mid-cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- フォーム上の案内 --- */
.dr-form-lead{font-family:'Noto Sans JP',sans-serif;text-align:center;color:var(--dr-ink);margin:0 auto 20px;line-height:1.9;font-size:15px}
.dr-form-lead strong{color:var(--dr-cta)}
.dr-optional{color:#999 !important;font-size:12px !important}

/* --- 追従ボタン（スマホ：画面下／PC：右下） --- */
.dr-sticky{position:fixed;z-index:9000;font-family:'Noto Sans JP',sans-serif;transition:transform .3s ease,opacity .3s ease}
.dr-sticky.is-hidden{opacity:0;pointer-events:none}
@media (max-width:840px){
  .dr-sticky{left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .dr-sticky.is-hidden{transform:translateY(110%)}
  .dr-sticky .dr-btn{flex:1;min-height:50px;padding:0 10px;font-size:15px}
  .dr-sticky .dr-btn--sub{flex:.8}
  body.dr-has-sticky{padding-bottom:76px}
}
@media (min-width:841px){
  .dr-sticky{right:24px;bottom:24px}
  .dr-sticky.is-hidden{transform:translateY(20px)}
  .dr-sticky .dr-btn--sub{display:none}
  .dr-sticky .dr-btn{box-shadow:0 8px 24px rgba(201,80,95,.35)}
}
@media (max-width:480px){
  .dr-fv-cta{padding:28px 16px 34px}
  .dr-fv-cta__copy{font-size:19px}
  .dr-sp{display:inline}
  .dr-fv-cta__btns .dr-btn,.dr-mid-cta__btns .dr-btn{width:100%}
  .dr-mid-cta__ttl{font-size:17px}
  .dr-mid-cta__txt br{display:none}
}

/* --- サンプル動画のポップアップ --- */
.dr-video{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;background:rgba(30,20,24,.75);padding:16px}
.dr-video.is-open{display:flex}
.dr-video__inner{width:min(900px,100%);background:#fff;border-radius:16px;overflow:hidden;font-family:'Noto Sans JP',sans-serif}
.dr-video__frame{position:relative;aspect-ratio:16/9;background:#000}
.dr-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dr-video__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex-wrap:wrap}
.dr-video__foot p{margin:0;font-size:14px;color:var(--dr-ink)}
.dr-video__close{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#333;font-size:24px;line-height:1;cursor:pointer}
@media (max-width:480px){.dr-video__foot .dr-btn{width:100%}}

/* ===== メインビジュアルのアニメーション（kyokan-mv.js） ===== */
.dr-mv{position:relative;width:100%;overflow-y:clip}
.dr-mv__part{display:none;position:absolute;height:auto;max-width:none;pointer-events:none}
.dr-mv-js #mv_sp img.sd-7,.dr-mv-js #mv_pc img.sd-5{visibility:hidden}
.dr-mv-js .dr-mv__part{display:block;opacity:0}
.dr-mv-play .dr-mv__part{animation:.5s cubic-bezier(.2,.7,.3,1) both}
.dr-mv-play .dr-mv__part--copy{animation-name:dr-mv-down;animation-delay:.05s}
.dr-mv-play .dr-mv__part--logo{animation-name:dr-mv-pop;animation-delay:.3s}
.dr-mv-play .dr-mv__part--chars{animation-name:dr-mv-rise;animation-duration:.7s;animation-delay:.35s}
.dr-mv-play .dr-mv__part--b1,.dr-mv-play .dr-mv__part--b2,.dr-mv-play .dr-mv__part--b3,
.dr-mv-play .dr-mv__part--b4,.dr-mv-play .dr-mv__part--b5{animation-name:dr-mv-badge;animation-duration:.4s}
.dr-mv-play .dr-mv__part--b1{animation-delay:.65s}
.dr-mv-play .dr-mv__part--b2{animation-delay:.75s}
.dr-mv-play .dr-mv__part--b3{animation-delay:.85s}
.dr-mv-play .dr-mv__part--b4{animation-delay:.95s}
.dr-mv-play .dr-mv__part--b5{animation-delay:1.05s}
@keyframes dr-mv-down{from{opacity:0;transform:translateY(-30%)}to{opacity:1;transform:none}}
@keyframes dr-mv-pop{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes dr-mv-rise{from{opacity:0;transform:translateY(18%)}to{opacity:1;transform:none}}
@keyframes dr-mv-badge{0%{opacity:0;transform:scale(.3) rotate(-6deg)}70%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:none}}

/* ===== カスハラ講座（制作中）の告知（2026-10-01 追加）===== */
.dr-kh{width:100%;box-sizing:border-box;align-self:stretch;background:var(--dr-cta-soft);padding:72px 20px 64px;font-family:'Noto Sans JP',sans-serif;color:var(--dr-ink);text-align:center}
.dr-kh__inner{max-width:1040px;margin:0 auto}
.dr-kh__label{display:table;margin-left:auto !important;margin-right:auto !important;color:#e5838c;font-weight:700;font-size:15px;letter-spacing:.08em;margin:0 0 6px;transform:rotate(-3deg)}
.dr-kh__ttl{position:relative;display:inline-block;font-size:32px;font-weight:700;letter-spacing:.14em;margin:0 0 24px;line-height:1.4}
.dr-kh__stamp{position:absolute;left:100%;top:-14px;margin-left:10px;white-space:nowrap;font-size:14px;letter-spacing:.06em;color:#fff;background:var(--dr-cta);border-radius:999px;padding:4px 14px;transform:rotate(8deg);box-shadow:0 4px 10px rgba(201,80,95,.25);animation:dr-kh-bob 2.4s ease-in-out infinite}
@keyframes dr-kh-bob{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.dr-kh__stamp{animation:none}}
.dr-kh__lead{font-size:16px;line-height:2;letter-spacing:.06em;margin:0 0 36px}
.dr-kh__lead em{font-style:normal;font-weight:700;background:linear-gradient(transparent 62%,#ffd9de 62%)}
.dr-kh__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 0 36px;text-align:left}
.dr-kh__box{background:#fff;border:3px solid #ec8f97;border-radius:6px;padding:26px 30px 22px}
.dr-kh__boxttl{font-size:21px;font-weight:700;text-align:center;margin:0 0 16px;padding-bottom:14px;border-bottom:2px solid #ec8f97;letter-spacing:.06em}
.dr-kh__boxttl span{color:#e5838c}
.dr-kh__list{list-style:none;margin:0 0 14px;padding:0}
.dr-kh__list li{position:relative;padding:0 0 0 1.7em;margin:0 0 10px;font-size:15px;line-height:1.75}
.dr-kh__list li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:14px;border-radius:50%;background:#ec8f97;box-shadow:inset 0 0 0 4px #fde3e6}
.dr-kh__note{font-size:12px;color:#8a8486;line-height:1.7;margin:0}
.dr-kh__cta{border-color:#f3c9cf}
.dr-pc{display:inline}
@media (max-width:840px){
  .dr-kh__grid{grid-template-columns:1fr;gap:20px}
}
@media (max-width:480px){
  .dr-kh{padding:56px 16px 48px}
  .dr-kh__ttl{font-size:25px;letter-spacing:.1em;margin-top:22px}
  .dr-kh__label{font-size:13.5px}
  .dr-kh__stamp{left:100%;right:auto;top:-18px;margin-left:4px !important;margin-left:0;font-size:12px;padding:3px 11px}
  .dr-kh__lead{font-size:14.5px;text-align:left}
  .dr-kh__lead br{display:none}
  .dr-pc{display:none}
  .dr-kh__box{padding:20px 18px 16px}
  .dr-kh__boxttl{font-size:18px}
  .dr-kh__list li{font-size:14.5px}
  .dr-kh__cta .dr-btn{width:100%}
}

/* 教材ラインナップのハラスメント講座に付ける「カスハラ編 制作中」ラベル */
.dr-soon{display:block;width:fit-content;margin:6px auto 0;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--dr-cta);background:#fff;border:1px solid var(--dr-cta);border-radius:999px;padding:2px 10px;line-height:1.6}