@charset "UTF-8";
/* ===========================================================================
   グローハイ セールストレーニング 会員ページ
   カラー・書体は glohai_sales_training_lp.html に準拠
   ========================================================================= */

:root{
  --color_main:#2f9e44;
  --color_main_dark:#237733;
  --color_text:#333;
  --color_bg:#fdfdfd;
  --deep_navy:#1f4e79;
  --deep_red:#e44141;
  --pale_gray:#f2f2f2;
  --pale_blue:#f3f8fd;
  --pale_green:#f1f9ee;
  --footer_bg:#171b30;
  --container:1160px;
  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ls:.025em;
  --radius:14px;
  --shadow:0 10px 30px rgba(23,27,48,.08);
  --shadow-sm:0 4px 14px rgba(23,27,48,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--color_text);
  background:var(--color_bg);
  letter-spacing:var(--ls);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color_main);text-decoration:none}
ul{list-style:none}
.container{max-width:var(--container);margin-inline:auto;padding-inline:32px}
.sp-only{display:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;font-size:16px;line-height:1.3;
  border:none;border-radius:999px;padding:16px 28px;cursor:pointer;transition:.2s;
}
.btn-main{background:var(--color_main);color:#fff;box-shadow:0 8px 20px rgba(47,158,68,.28)}
.btn-main:hover{background:var(--color_main_dark);transform:translateY(-2px)}
.btn-block{width:100%}

/* ---------------------------------------------------------------------------
   ログイン画面
   ------------------------------------------------------------------------- */
.page-login{
  background:linear-gradient(180deg,var(--pale_blue) 0%,var(--pale_green) 100%);
  min-height:100vh;
}
.login-wrap{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;
}
.login-card{
  width:100%;max-width:460px;background:#fff;
  border:1px solid #e6efe7;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:44px 40px 36px;
}
.login-head{text-align:center;margin-bottom:28px}
.login-logo{margin:0 auto 26px;width:180px}
.login-kicker{
  font-size:12px;font-weight:900;letter-spacing:.2em;
  color:var(--color_main);margin-bottom:8px;
}
.login-title{font-size:23px;font-weight:900;line-height:1.5;color:#1a1a1a}
.login-lead{margin-top:14px;font-size:14px;color:#5a6b7a;line-height:1.9}

.alert{
  border-radius:10px;padding:12px 16px;font-size:14px;
  line-height:1.7;margin-bottom:18px;font-weight:500;
}
.alert-error{background:#fdecec;border:1px solid #f6cdcd;color:#b02f2f}
.alert-info{background:var(--pale_green);border:1px solid #d5ecd6;color:#276b33}

.login-form{display:block}
.field-label{
  display:block;font-size:13px;font-weight:700;
  color:#445;margin-bottom:8px;letter-spacing:.06em;
}
.field-input{
  width:100%;font-family:var(--font);font-size:16px;color:var(--color_text);
  border:1px solid #d8e0d9;border-radius:10px;padding:14px 16px;
  background:#fcfdfc;transition:.15s;margin-bottom:20px;
}
.field-input:focus{
  outline:none;border-color:var(--color_main);
  box-shadow:0 0 0 3px rgba(47,158,68,.15);background:#fff;
}
.login-note{
  margin-top:24px;padding-top:20px;border-top:1px solid #eef2ee;
  font-size:12.5px;color:#8a94a0;line-height:1.9;text-align:center;
}
.login-copy{margin-top:26px;font-size:12px;color:#8a9a8d;letter-spacing:.08em}

/* ---------------------------------------------------------------------------
   会員ページ ヘッダー
   ------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fdfdfd;border-bottom:1px solid #ececec;
}
.header-inner{display:flex;align-items:center;gap:18px;height:76px}
.header-logo img{width:164px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.header-user{font-size:14px;font-weight:700;color:#445}
.header-logout{
  font-size:13px;font-weight:700;color:#667;
  border:1px solid #dcdfe4;border-radius:999px;padding:8px 18px;transition:.18s;
}
.header-logout:hover{background:var(--pale_gray);color:#333}

/* ---------------------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg,#f4fbff 0%,var(--pale_green) 100%);
  padding:60px 0 56px;
}
.hero-kicker{
  font-size:13px;font-weight:900;letter-spacing:.2em;
  color:var(--color_main);margin-bottom:12px;
}
.hero-title{font-size:clamp(24px,3.2vw,34px);font-weight:900;line-height:1.5;color:#1a1a1a}
.hero-lead{margin-top:20px;font-size:16px;color:#4a5a68;line-height:1.95}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-meta li{
  background:#fff;border:1px solid #e0ebe2;border-radius:999px;
  padding:9px 20px;font-weight:800;font-size:14px;color:#223;box-shadow:var(--shadow-sm);
}
.hero-meta span{color:var(--color_main);font-size:12px;letter-spacing:.1em;margin-right:6px}

/* ---------------------------------------------------------------------------
   動画カード
   ------------------------------------------------------------------------- */
.videos{padding:64px 0 84px}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.video-card{
  display:flex;flex-direction:column;color:inherit;
  background:#fff;border:1px solid #e6e9e6;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.22s;
}
.video-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);border-color:#cfe3d3;
}
.video-thumb{position:relative;background:#0f1420;aspect-ratio:16/9;overflow:hidden}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:.35s}
.video-card:hover .video-thumb img{transform:scale(1.035)}
.video-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);
}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.92);color:var(--color_main);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:.22s;
}
.video-play svg{margin-left:3px}
.video-card:hover .video-play{background:var(--color_main);color:#fff;transform:translate(-50%,-50%) scale(1.08)}
.video-duration{
  position:absolute;right:12px;bottom:12px;z-index:2;
  background:rgba(15,20,32,.82);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:6px;
}
.video-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.video-kicker{
  font-size:12px;font-weight:900;letter-spacing:.16em;
  color:var(--color_main);margin-bottom:8px;
}
.video-title{font-size:20px;font-weight:900;line-height:1.5;color:#1c1c1c}
.video-subtitle{margin-top:6px;font-size:12.5px;color:#8b96a2;letter-spacing:.03em}
.video-points{margin-top:16px;display:grid;gap:7px;flex:1}
.video-points li{
  position:relative;padding-left:20px;
  font-size:14px;color:#55616e;line-height:1.75;
}
.video-points li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--color_main);
}
.video-cta{
  margin-top:20px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--pale_green);color:var(--color_main_dark);
  font-size:14px;font-weight:800;border-radius:999px;
  padding:11px 22px;transition:.2s;
}
.video-card:hover .video-cta{background:var(--color_main);color:#fff}
.videos-note{
  margin-top:34px;font-size:13px;color:#8a94a0;line-height:2;
  background:var(--pale_gray);border-radius:10px;padding:18px 22px;
}

/* ---------------------------------------------------------------------------
   フッター
   ------------------------------------------------------------------------- */
.site-footer{background:var(--footer_bg);color:#fff;padding:44px 0 38px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.footer-logo{width:150px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.footer-links a{color:#cfd3e2;font-size:14px;transition:.15s}
.footer-links a:hover{color:#fff}
.footer-copy{font-size:12px;color:#8b91aa;letter-spacing:.06em}

/* ---------------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------------- */
@media (max-width:900px){
  .video-grid{grid-template-columns:1fr;gap:22px}
  .container{padding-inline:22px}
}
@media (max-width:640px){
  body{font-size:15px}
  .sp-only{display:block}
  .login-card{padding:34px 24px 30px}
  .login-title{font-size:20px}
  .header-inner{height:64px;gap:10px}
  .header-logo img{width:130px}
  .header-user{display:none}
  .hero{padding:44px 0 40px}
  .hero-lead{font-size:15px}
  .hero-lead br{display:none}
  .videos{padding:44px 0 60px}
  .video-body{padding:20px 20px 22px}
  .video-title{font-size:18px}
}