@charset "UTF-8";

/* =========================================================
   Design 03 | Corporate Premium
========================================================= */
.kks-webinar03{
  --navy:#073b59;
  --blue:#0878a7;
  --aqua:#18a6bd;
  --ice:#edf8fb;
  --pale:#f5f9fb;
  --text:#19313f;
  --muted:#647984;
  --line:#d4e2e8;
  color:var(--text);
  background:#fff;
}
.kks-webinar03 *{box-sizing:border-box}
.kks-webinar03 img{max-width:100%;height:auto}
.kks-webinar03-wide{width:min(1320px,calc(100% - 64px));margin:0 auto}
.kks-webinar03-inner{width:min(1040px,calc(100% - 64px));margin:0 auto}
.kks-webinar03-text p,.kks-webinar03-about-copy p{margin:0 0 1.35em;font-size:17px;line-height:2}

/* HERO */
.kks-webinar03-hero{position:relative;overflow:hidden;padding:86px 0 92px;background:linear-gradient(118deg,#f5fbfd 0%,#fff 57%,#edf8fb 100%)}
.kks-webinar03-hero-bg::before,.kks-webinar03-hero-bg::after{position:absolute;border-radius:50%;content:"";pointer-events:none}
.kks-webinar03-hero-bg::before{top:-310px;right:-180px;width:700px;height:700px;border:1px solid rgba(8,120,167,.13)}
.kks-webinar03-hero-bg::after{top:-210px;right:-80px;width:500px;height:500px;border:80px solid rgba(24,166,189,.045)}
.kks-webinar03-hero .kks-webinar03-wide{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.98fr) minmax(520px,1.12fr);gap:78px;align-items:center}
.kks-webinar03-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:25px;color:var(--blue);font-size:15px;font-weight:700;letter-spacing:.16em}
.kks-webinar03-eyebrow span{width:42px;height:2px;background:var(--aqua)}
.kks-webinar03-subtitle{margin:0 0 18px;color:var(--blue);font-size:18px;font-weight:700;line-height:1.7}
.kks-webinar03-hero h1{margin:0;color:var(--navy);font-size:240%;line-height:1.42;letter-spacing:.015em}
.kks-webinar03-catch{max-width:650px;margin:27px 0 0;color:#526b78;font-size:17px;line-height:1.95}
.kks-webinar03-cta{display:flex;align-items:center;justify-content:space-between;width:min(420px,100%);min-height:68px;margin-top:36px;padding:16px 24px;color:#fff!important;background:linear-gradient(90deg,var(--navy),var(--blue));border-radius:5px;text-decoration:none!important;font-size:17px;font-weight:700;box-shadow:0 13px 28px rgba(7,59,89,.17);transition:.25s}
.kks-webinar03-cta:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(7,59,89,.22)}
.kks-webinar03-cta b{font-size:23px;font-weight:400}
.kks-webinar03-cta.is-closed{justify-content:center;background:#8d9ba2;box-shadow:none}
.kks-webinar03-visual-frame{position:relative;padding:16px;background:#fff;border-radius:4px;box-shadow:0 24px 55px rgba(28,73,96,.14)}
.kks-webinar03-visual-frame::before{position:absolute;right:-18px;bottom:-18px;z-index:-1;width:72%;height:72%;background:#cdebf2;content:""}
.kks-webinar03-visual-frame img{display:block;width:100%;height:auto}

/* EVENT INFO */
.kks-webinar03-eventinfo{position:relative;z-index:2;margin-top:-1px;background:var(--navy);color:#fff}
.kks-webinar03-eventinfo-inner{display:grid;grid-template-columns:1.7fr repeat(3,.75fr);width:min(1180px,calc(100% - 64px));margin:0 auto}
.kks-webinar03-eventinfo-date,.kks-webinar03-eventinfo-cell{min-height:125px;padding:23px 28px;border-right:1px solid rgba(255,255,255,.2)}
.kks-webinar03-eventinfo-date{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;border-left:1px solid rgba(255,255,255,.2)}
.kks-webinar03-event-label{display:block;color:#70d4e1;font-size:14px;font-weight:700;letter-spacing:.12em}
.kks-webinar03-eventinfo-date p{display:flex;align-items:center;gap:10px;margin:3px 0}
.kks-webinar03-eventinfo-date p strong{font-size:25px}
.kks-webinar03-eventinfo-date p small{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background:#fff;border-radius:50%;color:var(--navy);font-size:13px}
.kks-webinar03-eventinfo-date p span{font-size:16px}
.kks-webinar03-eventinfo-cell{display:flex;flex-direction:column;justify-content:center;gap:9px}
.kks-webinar03-eventinfo-cell strong{font-size:17px;line-height:1.6}

/* HEADING */
.kks-webinar03-section{padding:105px 0}
.kks-webinar03-heading{margin-bottom:54px;text-align:center}
.kks-webinar03-heading .en{display:block;margin-bottom:8px;color:var(--blue);font-size:16px;font-weight:700;letter-spacing:.15em}
.kks-webinar03-heading h2{margin:0;color:var(--navy);font-size:34px;line-height:1.5}
.kks-webinar03-heading i{display:block;width:46px;height:3px;margin:18px auto 0;background:linear-gradient(90deg,var(--blue),var(--aqua))}
.kks-webinar03-heading.is-left{text-align:left}
.kks-webinar03-heading.is-left i{margin-left:0}

/* ABOUT */
.kks-webinar03-about{position:relative;background:#fff}
.kks-webinar03-about::before{position:absolute;top:0;left:0;width:100%;height:12px;background:linear-gradient(90deg,var(--navy) 0 22%,var(--blue) 22% 54%,var(--aqua) 54% 100%);content:"";opacity:.08}
.kks-webinar03-about-copy{max-width:900px;margin:0 auto;color:#3e5663}
.kks-webinar03-target{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;margin-top:42px;padding:25px 30px;background:var(--ice);border-radius:5px}
.kks-webinar03-target span{color:var(--blue);font-size:16px;font-weight:700}
.kks-webinar03-target p{margin:0;font-size:17px;line-height:1.8}

/* CONTENTS */
.kks-webinar03-contents{background:linear-gradient(180deg,#f4fafc,#fff)}
.kks-webinar03-content-grid{display:grid;grid-template-columns:1fr;gap:26px}
.kks-webinar03-content-grid article{position:relative;overflow:hidden;min-height:330px;padding:38px 34px;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 10px 30px rgba(20,68,92,.055)}
.kks-webinar03-content-grid article::after{position:absolute;right:-35px;bottom:-55px;width:150px;height:150px;border:30px solid rgba(24,166,189,.06);border-radius:50%;content:""}
.kks-webinar03-content-number{margin-bottom:28px;color:#87b9ca;font-size:38px;font-weight:300;line-height:1}
.kks-webinar03-content-grid h3{margin:0 0 18px;color:var(--navy);font-size:22px;line-height:1.6}
.kks-webinar03-content-grid .kks-webinar03-text p{font-size:16px;line-height:1.9;color:#5a707b}

/* PROGRAM */
.kks-webinar03-program{background:#fff}
.kks-webinar03-program-list{border-top:2px solid var(--navy)}
.kks-webinar03-program-list .row{display:grid;grid-template-columns:250px 1fr;border-bottom:1px solid var(--line)}
.kks-webinar03-program-list .time{display:flex;align-items:center;padding:28px 25px;color:var(--blue);background:#f1f8fb;font-size:20px;font-weight:700}
.kks-webinar03-program-list .body{padding:28px 34px}
.kks-webinar03-program-list h3{margin:0;color:var(--navy);font-size:19px}
.kks-webinar03-program-list p{margin:9px 0 0;color:var(--muted);font-size:16px;line-height:1.8}
.kks-webinar03-agenda{margin-top:55px;padding:35px 40px;background:var(--pale);border-radius:5px}
.kks-webinar03-mini-title{margin:0 0 18px;color:var(--blue);font-size:16px;font-weight:700;letter-spacing:.15em}
.kks-webinar03-agenda article{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.kks-webinar03-agenda article>span{color:#8db6c6;font-size:17px;font-weight:700}
.kks-webinar03-agenda h3{margin:0;color:var(--navy);font-size:18px}
.kks-webinar03-agenda p{margin:7px 0 0;color:var(--muted);font-size:16px;line-height:1.8}

/* RECOMMENDED */
.kks-webinar03-recommend{padding:95px 0;background:linear-gradient(112deg,var(--navy),#075a78);color:#fff}
.kks-webinar03-recommend .kks-webinar03-wide{display:grid;grid-template-columns:.72fr 1.28fr;gap:85px;align-items:center}
.kks-webinar03-recommend-title span{display:block;margin-bottom:10px;color:#fff;font-size:16px;font-weight:700;letter-spacing:.14em}
.kks-webinar03-recommend-title h2{margin:0;font-size:34px;color:#fff;line-height:1.5}
.kks-webinar03-recommend-body .lead p{margin:0 0 22px;color:#dbeaf0;font-size:16px;line-height:1.9}
.kks-webinar03-recommend-body .list{border-top:1px solid rgba(255,255,255,.3)}
.kks-webinar03-recommend-body .list p{display:flex;gap:18px;margin:0;padding:17px 4px;align-items: center;border-bottom:1px solid rgba(255,255,255,.3);font-size:17px;line-height:1.7}
.kks-webinar03-recommend-body .list b{color:#6fd3df;font-size:20px}

/* SPEAKERS */
.kks-webinar03-speakers{background:#f5f9fb}
.kks-webinar03-speaker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kks-webinar03-speaker-grid.is-single{grid-template-columns:minmax(0,850px);justify-content:center;border-bottom: solid 1px #eee}
.kks-webinar03-speaker-grid article{overflow:hidden}
.kks-webinar03-speaker-grid .image img{display:block;width:100%;height:auto}
.kks-webinar03-speaker-grid .body{padding:30px}
.kks-webinar03-speaker-grid .speaker-label{display:block;margin-bottom:16px;color:var(--blue);font-size:14px;font-weight:700;letter-spacing:.1em}
.kks-webinar03-speaker-grid .company,.kks-webinar03-speaker-grid .position{margin:0 0 5px;color:var(--muted);font-size:15px;line-height:1.6}
.kks-webinar03-speaker-grid h3{margin:15px 0 20px;color:var(--navy);font-size:23px;border-bottom: solid 1px #ddd;padding-bottom: 8px}
.kks-webinar03-speaker-grid .profile p{margin:0 0 1em;color:#536b77;font-size:16px;line-height:1.9}
.kks-webinar03-speaker-grid.is-single article{display:grid;grid-template-columns:340px 1fr}
.kks-webinar03-speaker-grid.is-single .body{align-self:center;padding:0px 42px 42px}

/* NOTE / FORM */
.kks-webinar03-note{padding:48px 0;background:#fff;border-top:1px solid var(--line)}
.kks-webinar03-note .kks-webinar03-inner{display:grid;grid-template-columns:160px 1fr;gap:30px}
.kks-webinar03-note strong{color:var(--blue);font-size:15px;letter-spacing:.08em}
.kks-webinar03-note p{margin:0 0 8px;color:var(--muted);font-size:15px;line-height:1.8}
.kks-webinar03-form{padding:105px 0 120px;background:#edf6f9}
.kks-webinar03-form-inner{width:min(900px,calc(100% - 64px));margin:0 auto}
.kks-webinar03-form-body{background:#fff;border-radius:5px;box-shadow:0 14px 40px rgba(20,68,92,.08)}

@media screen and (max-width:767px){
  .kks-webinar03-wide,.kks-webinar03-inner,.kks-webinar03-form-inner,.kks-webinar03-eventinfo-inner{width:calc(100% - 30px)}
  .kks-webinar03-hero{padding:48px 0 55px}
  .kks-webinar03-hero .kks-webinar03-wide{display:flex;flex-direction:column;gap:38px}
  .kks-webinar03-eyebrow{font-size:13px}
  .kks-webinar03-subtitle{font-size:16px}
  .kks-webinar03-hero h1{font-size:22px; border-bottom: solid 1px #eee;padding-bottom: 10px}
  .kks-webinar03-catch{font-size:15px; margin-top: 10px}
  .kks-webinar03-eventinfo-inner{grid-template-columns:1fr 1fr}
  .kks-webinar03-eventinfo-date{grid-column:1/-1;grid-template-columns:1fr;gap:8px;border-left:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .kks-webinar03-eventinfo-date,.kks-webinar03-eventinfo-cell{min-height:auto;padding:20px}
  .kks-webinar03-eventinfo-date p{flex-wrap:wrap}
  .kks-webinar03-eventinfo-date p strong{font-size:21px}
  .kks-webinar03-section{padding:70px 0}
  .kks-webinar03-heading{margin-bottom:38px}
  .kks-webinar03-heading .en{font-size:14px}
  .kks-webinar03-heading h2{font-size:27px}
  .kks-webinar03-text p,.kks-webinar03-about-copy p{font-size:16px;line-height:1.9}
  .kks-webinar03-target{grid-template-columns:1fr;gap:8px;padding:22px}
  .kks-webinar03-content-grid{grid-template-columns:1fr}
  .kks-webinar03-content-grid article{min-height:auto;padding:30px 25px}
  .kks-webinar03-content-grid h3{font-size: 20px}
  .kks-webinar03-program-list .row{grid-template-columns:95px 1fr}
  .kks-webinar03-program-list .time{padding:20px 12px;font-size:16px;align-items: flex-start}
  .kks-webinar03-program-list .body{padding:20px 17px}
  .kks-webinar03-agenda{padding:28px 22px}
  .kks-webinar03-recommend{padding:70px 0}
  .kks-webinar03-recommend .kks-webinar03-wide{grid-template-columns:1fr;gap:35px}
  .kks-webinar03-recommend-title h2{font-size:28px}
  .kks-webinar03-speaker-grid h3{font-size: 20px}
  .kks-webinar03-speaker-grid .profile p{font-size: 13px}
  .kks-webinar03-speaker-grid,.kks-webinar03-speaker-grid.is-single{grid-template-columns:1fr}
  .kks-webinar03-speaker-grid.is-single article{display:block}
  .kks-webinar03-speaker-grid.is-single .body{padding:28px 0px}
  .kks-webinar03-note .kks-webinar03-inner{grid-template-columns:1fr;gap:12px}
  .kks-webinar03-form{padding:70px 0}
  .kks-webinar03-form-body{padding:25px 18px}
   .kks-webinar-lp .kks-webinar03-form-body .kks-webinar-form,
  .single-webinar_lp .kks-webinar03-form-body .kks-webinar-form {
    padding: 0px 0px 36px;
  }
  .kks-webinar-lp .kks-webinar03-form-body .kks-webinar-form,
  .single-webinar_lp .kks-webinar03-form-body .kks-webinar-form {
    border: none;
  }
}
