@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

:root {
  --color-text: #000;
  --color-primary: #1867dd;
  --color-bg: #e1ebfa;
  --color-base-wh: #ffffff;
}

body {
  margin-top: 73px;
  overflow-x: hidden;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.48px;
  line-height: 1.8;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 768px){
    body{
      margin-top: 55px;
      font-size: 15px;
      line-height: 1.8;
      letter-spacing: 0.45px;
    }
}

/*--------------------------------------------------------------
	font
--------------------------------------------------------------*/
h2 {
  font-size: min(32px,calc(32/1440*100vw));
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.96px;
}

h3 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.75px;
}

h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.6px;
}

.u-text-paragraph--narrow {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.48px;
}

.u-text-note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.42px;
}

@media only screen and (max-width: 1024px) {
  h2 {
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0.72px;
  }

  h3 {
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.6px;
  }

  h4 {
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0.51px;
  }

  .u-text-paragraph--narrow {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.45px;
  }

  .u-text-note {
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.39px;
  }
}

/*--------------------------------------------------------------
	common
--------------------------------------------------------------*/
.scs-training-inner{
  max-width: 1440px;
  padding: 0 5vw;
  margin: 0 auto;
}
.scs-training-inner._md{
  padding: 0 10vw;
}
.scs-training-inner._sm{
  padding: 0 15vw;
}
.u-mobile{
  display: none;
}

@media only screen and (max-width: 768px){
  .scs-training-inner,
  .scs-training-inner._md,
  .scs-training-inner._sm{
    max-width: none;
    padding: 0 calc(20/390*100vw);
  }
  .u-mobile{
    display: block !important;
  }
  .u-desktop{
    display: none !important;
  }
}

/*--------------------------------------------------------------
	header
--------------------------------------------------------------*/
.lp-header {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 10000000000;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: space-between;
  width: 100%;
  background: var(--color-base-wh);
  line-height: 1.3;
}

.lp-header h1 {
  margin: 15px 0 0px 40px;
}

.lp-header h1 img {
  display: block;
}

.lp-header div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  justify-content: right;
}

.lp-header div a {
  display: block;
}

.lp-header div #but_tel {
  padding: 9px 0;
  background: url("images/icon_tel.svg") no-repeat top 20px left;
  font-size: 28px;
  font-weight: bold;
  cursor: default;
  pointer-events: none;
}

.lp-header div #but_tel ._number{
    font-family: "Roboto", sans-serif;
    text-align: center;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.81px;
    display: block;
}

.lp-header div #but_tel ._time{
    letter-spacing: 0.78px;
}

.lp-header div #but_tel p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.65px;
}

.lp-header div #but_contact {
    color: var(--color-base-wh);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.9px;
    padding: 24px 27px;
    align-items: center;
    background: linear-gradient(90deg, #FF6700 0%, #DA5800 100%);
}

@media only screen and (max-width: 899px){
  .lp-header{
    display: grid;
    grid-template-columns: 1fr calc(208/390*100vw);
  }
  .lp-header h1{
    margin: 0;
    padding: 14px 26px 14px 10px;
  }
  .lp-header div #but_contact{
    padding: 20px min(15px, calc(15 / 390 * 100vw)) 20px min(16px, calc(16 / 390 * 100vw));
    font-size: clamp(10px, 3.07vw, 12px);
    letter-spacing: 0.6px;
    display: flex;
  }
}

/*--------------------------------------------------------------
	scs-training-top
--------------------------------------------------------------*/
.scs-training-top{
  background: linear-gradient(180deg, #87B8FF 0%, #E3EEFF 100%);
  padding: 48px 0 104px;
  position: relative;
  overflow: hidden;

  &::before{
    content: "";
    display: block;
    width: 100%;
    height: calc(1145 / 1440 * 100vw);
    background-image: url(/lp/scs-training/img/fv/background.png);
    position: absolute;
    top: 0;
    background-size: contain;
    mix-blend-mode: soft-light;
  }
  .scs-training-inner{
    position: relative;
    z-index: 1;
  }

  .scs-training-mv-inner{
    max-width: 1440px;
    padding: 0 72px;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    &::after{
      content: "";
      display: block;
      width: min(918px,calc(918 / 1440 * 100vw));
      height: min(688px,calc(688 / 1440 * 100vw));
      background-image: url(/lp/scs-training/img/fv/hero-stock-image.png);
      position: absolute;
      top: -48px;
      right: 0;
      background-size: contain;
      z-index: -1;
    }
  }

  .scs-training-mv{
    position: relative;
    &::before{
      content: "";
      display: block;
      width: min(1071px,calc(1071 / 1440 * 100vw));
      height: min(850px,calc(850 / 1440 * 100vw));
      position: absolute;
      top: -110px;
      left: -150px;
      border-radius: 1071px;
      opacity: 0.65;
      background: var(--color-base-wh);
      filter: blur(162px);
      z-index: -1;
    }
    .mv_logo{
      img{
        display: block;
      }
    }
    .mv_logo-txtbox{
      margin-top: 24px;
      background-color: var(--color-base-wh);
      padding: 10px 16px;
      border-radius: 4px;
      display:  flex;
      width: fit-content;
      font-size: min(20px,calc(20/1440*100vw));
      line-height: 1.5;
      letter-spacing: 1px;
      ._number{
        font-family: "Roboto", sans-serif;
        font-size: min(22px,calc(22/1440*100vw));
        font-weight: 500;
        background: linear-gradient(180deg, #055DFF 0%, #033899 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .txtbox_left,
    .txtbox_right{
      display: flex;
    }
    .txtbox_left{
      padding-right: 20px;
      border-right: 1px solid #C6D7F1;
      ._number{
        margin-left: 6px;
      }
      ._number+._number{
        margin-left: 8px;
      }
    }
    .txtbox_right{
      padding-left: 20px;
      ._number{
        margin-left: 8px;
      }
      ._number+._number{
        margin-left: 0;
      }
      p:last-child{
        margin-left: 8px;
      }
    }
    .mv_catch{
      margin-top: min(72px,calc(72/1440*100vw));
      max-width: 860px;
      p{
        font-size: min(56px,calc(56/1440*100vw));
        font-weight: 500;
        line-height: 1.55;
        letter-spacing: 1.12px;
        background: linear-gradient(90deg, #0052CB 0%, #002B6A 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .mv_sub{
      margin-top: 54px;
      display: flex;
      align-items: center;
      position: relative;
      max-width: 850px;
    
      &::before{
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: linear-gradient(270deg, rgba(192, 218, 255, 0.00) 0%, #3A8AFF 100%);
        position: absolute;
        top: -28px;
      }
       
      p{
        color: #0241B5;
        font-size: min(36px,36/1440*100vw);
        font-weight: 500;
        line-height: 1.5;
      }
      p+p{
        margin-left: 12px;
      }
      span{
        font-size: min(14px,calc(14/1440*100vw));
        font-weight: 500;
        line-height: 1.6;
        letter-spacing: 0.42px;
        border-radius: 2px;
        background: rgba(0, 107, 255, 0.20);
        padding: 3px 8px;
        margin-left: 20px;
        margin-top: 5px;
      }
    }
  }
  .scs-training-lead{
    margin-top: min(172px,calc(172/1440*100vw));
    h2{
      color: var(--color-text);
      text-align: center;
      margin-bottom: 40px;
    }
    .lead_bg-wh{
      position: relative;
      max-width: 1296px;
      padding: 64px 88px 112px 88px;
      border-radius: 8px 8px 0 0;
      background: linear-gradient(180deg, var(--color-base-wh) 0%, rgba(255, 255, 255, 0.00) 100%);
      backdrop-filter: blur(2px);

      &::before{
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, var(--color-base-wh) 0%, rgba(255, 255, 255, 0.00) 100%);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
      }

      p{
        color: var(--color-text);
      }
      p+p{
        margin-top: 16px;
      }
    }
    .lead_list{
      gap: min(40px,calc(40/1440*100vw) );
      display: grid;
      grid-template-columns: repeat(3,1fr);
    }
    .lead_card{
      img{
        width: calc(405 / 1440 * 100vw);
        display: block;
        margin: auto;
      }
      p{
        text-align: center;
        letter-spacing: 0.8px;
        margin-top: 19px;
        font-weight: 500;
      }
    }
  }
}
@media only screen and (max-width: 768px){
  .scs-training-top{
    background: linear-gradient(180deg, #BFD9FF 10.47%, #E3EEFF 100%);
    padding: 25px 0 80px;
    &::before{
      display: none;
    }
    .scs-training-mv-inner{
      max-width: none;
      padding: 0 calc(24/390*100vw);
  
      &::after{
        width: 100%;
        height: calc(324 / 390 * 100vw);
        background-image: url(/lp/scs-training/img/fv/hero-stock-image-sp.png);
        top: -25px;
        right: 0;
        z-index: -2;
      }
    }
    .scs-training-mv{
      &::before{
        width: calc(450 / 390 * 100vw);
        height: calc(305 / 390 * 100vw);
        top: 75px;
        left: -60px;
        border-radius: 419px;
        opacity: 0.9;
        background: linear-gradient(246deg, var(--color-base-wh) 8.42%, rgba(255, 255, 255, 0.40) 91.58%);
        filter: blur(40px);
        z-index: -1;
        max-width: 550px;
      }
      .mv_logo{
        img{
          width: 162px;
        }
      }
      .mv_logo-txtbox{
        margin-top: 51px;
        padding: 4px 8px;
        flex-direction: column;
        font-size: 12px;
        letter-spacing: 0.6px;
        ._number{
          font-size: 13px;
        }
      }
      .txtbox_left{
        padding-right: 0;
        border-right: none;
        ._number{
          margin-left: 4px;
        }
        ._number+._number{
          margin-left: 4px;
        }
      }
      .txtbox_right{ 
        padding-left: 0;
        ._number{
          margin-left: 4px;
        }
        p:last-child{
          margin-left: 4px;
        }
      }
      .mv_catch{
        margin-top: 10px;
        max-width: none;
        p{
          font-size: clamp(25px, calc(27 / 390 * 100vw), 36px);
          line-height: 1.4;
        }
      }
      .mv_sub{
        margin-top: 32px;
        max-width: 342px;
        flex-wrap: wrap;
  
        &::before{
          height: 1px;
          top: -16px;
        }
        
        p{
          font-size: 18px;
        }
        p+p{
          margin-left: 8px;
        }
        span{
          font-size: 14px;
          margin-left: 0;
          margin-top: 10px;
        }
      }
    }
    .scs-training-lead{
      margin-top: 54px;
      h2{
        margin-bottom: 24px;
      }
      .lead_bg-wh{
        max-width: none;
        padding: 32px 20px 64px 20px;
  
        p+p{
          margin-top: 12px;
        }
      }
  
      .lead_bg-no{
        padding: 0 calc(12/390*100vw);
        .lead_list{
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .lead_card{
          img{
            width: 100%;
          }
          p{
            font-size: 16px;
            margin-top: 16px;
          }
        }
      }
    }
  }
}

.scs-training-features{
  padding: calc(176/1440*100vw) 0 104px;
  background: linear-gradient(180deg, #2B6BC8 0%, #174FA1 100%);
  position: relative;

  &::before{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: calc(96/1440*100vw);
    background-image: url(/lp/scs-training/img/section-features/bg-decoration.svg);
    background-size: cover;
    top: -1px;
  }

  &::after{
    position: absolute;
    content: "";
    display: block;
    width: calc(740/1440*100vw);
    height: calc(488/1440*100vw);
    background-image: url(/lp/scs-training/img/section-features/bg-blur.svg);
    background-size: contain;
    bottom: 0;
  }

  .scs-training-inner{
    position: relative;
    z-index: 1; 
  }

  .features_top{
    text-align: center;
    color: var(--color-base-wh);
    h4{
      padding: 4px 24px;
      margin: 0 auto;
      border-radius: 999px;
      background: var(--color-base-wh);
      color: #0043A5;
      width: fit-content;
    }
    .features_top-ttl{
      margin-top: 16px;
    } 
    p{
      margin-top: 32px;
    }
  }
  .features_check{
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  .features_list{
    border-radius: 8px;
    background: var(--color-base-wh);
    padding: 40px;
  }
  .features_list._2column{
    display: flex;
    gap: 20px;
    .features_item{
      &:first-child{
        padding-right: 20px;
        background-size: 2px 10px;
        background-image: linear-gradient(to bottom, #C2D2E9 3px, transparent 3px);
        background-repeat: repeat-y;
        background-position: right top;
      }
    }
  }
  .features_item{
    p{
      margin-top: 20px;
    }
  }
  .features_item-ttl{
    display: flex;
    align-items: center;
    gap: 20px;

    img{
      width: 68px;
      height: 68px;
    }
    h3{
      color: var(--color-text);
    }
  }
  .features_point{
    color: var(--color-base-wh);
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.6;
    margin: auto;
  }
  .features_note{
    color: var(--color-base-wh);
    margin-top: 48px;
    display: flex;
    padding: 48px 64px;
    align-items: center;
    gap: 32px;
    border-radius: 8px;
    opacity: 0.95;
    background: rgba(0, 56, 138, 0.60);
    
    a{
      display: block;
      margin-top: 8px;
      color: var(--color-base-wh);
      text-decoration: 1px underline;
    }
  }
}
@media only screen and (max-width: 768px){
  .scs-training-features{
    padding: 128px 0 104px;

    &::after{
      width: calc(500/390*100vw);
      height: calc(330/390*100vw);
    }
  }
}
@media only screen and (max-width: 1024px){
  .scs-training-features{
    &::before{
      height: calc(64/390*100vw);
      background-image: url(/lp/scs-training/img/section-features/bg-decoration_sp.svg);
    }
    .features_top{
      h4{
        background: #0747A4;
        color: var(--color-base-wh);
        width: 100%;
      }
      p{
        text-align: left;
      }
    }
    .features_check{
      gap: 24px;
    }
    .features_list{
      border-radius: 4px;
      padding: 24px 20px;
    }
    .features_list._2column{
      flex-direction: column;
      gap: 32px;
      .features_item{
        &:first-child{
          padding-right: 0;
          padding-bottom: 32px;
          background-size: 9px 2px;
          background-image: linear-gradient(to right, #C2D2E9 3px, transparent 3px);
          background-repeat: repeat-x;
          background-position: left bottom;
        }
      }
    }
    .features_item{
      p{
        margin-top: 12px;
      }
    }
    .features_item-ttl{
      align-items: flex-start;
      gap: 10px;

      img{
        width: 25px;
        height: 25px;
        margin-top: 6px;
      }
    }
    .features_point{
      font-size: 20px;
      gap: 8px;
      
      &::after{
        width: 20px;
        height: 20px;
        background-image: url(/lp/scs-training/img/section-detail/icon-plus.svg);
        background-size: contain;
      }
    }
    .features_note{
      flex-direction: column;
      padding: 24px 20px;
      gap: 16px;
      border-radius: 4px;
      opacity: 1;
      background: rgba(0, 56, 138, 0.60);
      
      img{
        width: 102px;
        height: 67px;
      }
      a{
        font-size: 16px;
      }
    }
  }
}

/*--------------------------------------------------------------
	scs-training-detail
--------------------------------------------------------------*/
.scs-training-detail{
  background: var(--color-bg);
  padding: 104px 0;
  position: relative;

  &::before{
    content: "";
    display: block;
    width: calc(740/1440*100vw);
    height: calc(488/1440*100vw);
    background-image: url(/lp/scs-training/img/section-detail/blur.svg);
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
  } 

  .scs-training-inner{
    position: relative;
    z-index: 1;
  }

  h2{
    color: var(--color-text);
    text-align: center;
  }

  .detail_list{
    border-radius: 8px;
    background: var(--color-base-wh);
    box-shadow: 0 12px 36px 0 rgba(0, 83, 207, 0.07);
    padding: 0 40px 40px 40px;
    margin-top: 40px;
  }

  .detail_ttl{
    display: flex;
    gap: 24px;
    align-items: center;

    .detail_ttl-sub{
      h3{
        color: var(--SCS-LP_PrimaryColor, var(--color-primary));
      }
      p{
        color: var(--color-text);
        margin-top: 8px;
      }
    }
    
    .detail_ttl-bg{
      border-radius: 0 0 4px 4px;
      background: var(--Gradation-Color, linear-gradient(180deg, var(--color-primary) 0%, #004FC4 100%));
      position: relative;
      width: 134px;
      padding: 34px 15px;
      flex-shrink: 0;

      &::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url(/lp/scs-training/img/section-detail/blur.png) no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        background-size: contain;
      }
    }
    h4{
      color: var(--color-base-wh);
      text-align: center;
      position: relative;
      z-index: 1;
    }

  }
  .detail_list._table{
    .detail_ttl{
      .detail_ttl-bg{
        padding: 39px 16px;
      }
    }

    .detail_list-body{
      position: relative;
      overflow: hidden;
      max-height: 640px;
      transition: max-height .3s ease;

      &::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 160px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-base-wh) 70%);
        pointer-events: none;
        opacity: 1;
        transition: opacity .3s ease;
      }
    }

    &.is-open{
      .detail_list-body::after{
        opacity: 0;
      }
      .detail_list-more{
        margin-top: 24px;
      }
    }

    .detail_list-more{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: fit-content;
      position: relative;
      z-index: 1;
      margin: -28px auto 0;
      padding: 12px 32px;
      border-radius: 999px;
      border: 2px solid var(--color-primary);
      background: var(--color-base-wh);
      color: var(--color-primary);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 0.8px;
      transition: 0.3s;

      img{
        width: 16px;
        height: 16px;
        transition: transform .3s ease;
      }

      &:hover{
        background: var(--color-primary);
        color: var(--color-base-wh);
        opacity: 1;
      }
    }
  }
  .detail_item{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    margin-top: 32px;
  }
  .detail_card{
    padding: 24px 32px;
    border-radius: 4px;
    background: var(--color-bg);
  }
  .detail_card-ttl{
    h3{
      color: var(--SCS-LP_PrimaryColor, var(--color-primary));
    }
  }
  .detail_card-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .detail_card-note{
    display: flex;
    align-items: center;
    background: var(--color-base-wh);
    border-radius: 2px;
    margin-top: 16px;
    span{
      color: var(--color-text);
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.42px;
      display: block;
      padding: 12px 16px;
      background: #C1D8FB;
      border-radius: 2px 0 0 2px;
    }
    p{
      padding-left: 16px;
      color: var(--color-text);
      font-family: "Noto Sans JP", sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 0.42px;
    }
  }
  .detail_card-sub{
    color: var(--color-text);
    margin-top: 16px;
  }
  .detail_note{
    margin-top: 32px;
    p{
      color: var(--color-text);
      font-family: "Noto Sans JP", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: 0.42px;
      display: flex;
      &::before{
        content: "※";
        display: block;
        width: 14px;
        height: 22px;
        margin-right: 4px;
      }
    }
    p+p{
      margin-top: 10px;
    }
  }
  .detail_table{
    h3{
      margin-top: 17px;
      color: var(--color-text);
      span{
        font-family: "Roboto", sans-serif;
        font-size: 25px;
        font-weight: 500;
        line-height: 1.5;
      }
    }
    .detail_table-scroll{
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-top: 24px;
    }
    .detail_table-note{
      display: none;
    }
    table{
      display: grid;
      grid-template-columns: 106px 1fr min(227px, calc(227/1440*100vw)) min(227px, calc(227/1440*100vw));
      width: 100%;

      tbody{
        display: contents;
      }
      ._number{
        color: var(--color-text);
        font-family: "Roboto", sans-serif;
        font-size: 20px;
        font-weight: 500;
      }
      .detail_table-left-th._number{
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.7px;
      }
      th,td{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      th{
        padding: 16px 20px;
      }
      td{
        padding: 20px 24px;
      }
      tr{
        display: contents;

        &:not(:first-child){
          th,
          td{
            border-bottom: 1px solid #C6D7F1;
          }
        }
        td:not(:last-child){
          border-right: 1px solid #C6D7F1;
        }
      }
      .detail_table-left-top,
      .detail_table-left-th{
        position: sticky;
        left: 0;
        z-index: 1;
      }
      .detail_table-left-top{
        background: #9EC5FF;
      }
      .detail_table-top-lb{
        flex-direction: column;
      }
      .detail_table-top-lb,
      .detail_table-left-th{
        background: var(--color-bg);
      }
      th.detail_table-top-lb{
        color: var(--color-text);
        align-items: flex-start;
        text-align: left;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.6px;

        span{
          font-size: 14px;
          font-weight: 400;
          line-height: 1.6;
          letter-spacing: 0.42px;
        }
      }
      .detail_table-top-db{
        flex-direction: column;
        color: var(--color-base-wh);
        background: var(--color-primary);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.6px;
        gap: 6px;
        border-right: 1px solid #ADC2E1;
        white-space: nowrap;

        &:last-child{
          border-right: none;
        }
      }
      .detail_table-td-lg{
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;

        ul{
          border-radius: 4px;
          background: #EDEEF1;
          padding: 12px 16px;
          width: 100%;
          margin-top: 12px;
        }
      }
    }
    .detail_table-note + .detail_table-scroll{
      margin-top: 40px;
    }
  }
  .detail_table+.detail_table{
    margin-top: 56px;
  }
  .detail_tag{
    color: var(--color-base-wh);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.8px;
    border-radius: 999px;
    background: var(--SCS-LP_PrimaryColor, var(--color-primary));
    width: fit-content;
    display: block;
    padding: 4px 12px;
    margin-top: 32px;

    span{
      font-family: "Roboto", sans-serif;
      font-size: 18px;
      letter-spacing: 0.9px;
    }
  }
}

@media only screen and (max-width: 768px){
  .scs-training-detail{
    &::before{
      width: calc(500/390*100vw);
      height: calc(330/390*100vw);
    } 
    .detail_list{
      border-radius: 4px;
      margin-top: 38px;
      padding: 70px 20px 40px;
      position: relative;
    }
    .detail_ttl{
      flex-direction: column;
      gap: 20px;

      .detail_ttl-bg{
        border-radius: 4px 4px 0 0;
        width: 100%;
        position: absolute;
        padding: 12px 16px;
        top: 0;
        left: 0;
      }
    }
    .detail_list._table{
      .detail_ttl{
        .detail_ttl-bg{
          padding: 12px 16px;
        }
      }

      .detail_list-more{
        font-size: 15px;
        letter-spacing: 0.45px;
        padding: 10px 37px 10px 58px;
      }
    }
    .detail_card{
      padding: 20px;
    }
    .detail_card-flex{
      flex-direction: column;
      justify-content: center;

      h3{
        order:1;
      }
    }
    .detail_card-note{
      flex-direction: column;
      margin-top: 12px;
      span{
        padding: 8px;
        width: 100%;
        border-radius: 2px 2px 0 0;
      }
      p{
        padding: 10px 16px;
        color: var(--color-text);
        font-size: 13px;
        letter-spacing: 0.39px;
      }
    }
    .detail_card-sub{
      margin-top: 12px;
    }
    .detail_note{
      margin-top: 16px;
      p{
        font-size: 13px;
        letter-spacing: 0.39px;
        &::before{
          width: 13px;
          height: 21px;
        }
      }
    }
    .detail_table{
      h3{
        margin-top: 13px;
        span{
          font-size: 21px;
        }
      }
    }
    .detail_table+.detail_table{
      margin-top: 56px;
    }
    .detail_tag{
      font-size: 14px;
      letter-spacing: 0.7px;
      margin-top: 32px;

      span{
        font-size: 16px;
        letter-spacing: 0.8px;
      }
    }
  }
}
@media only screen and (max-width: 1024px){
  .scs-training-detail{
    .detail_ttl{
      align-items: flex-start;
    }

    .detail_table{
      .detail_table-note{
        display: block;
        color: var(--color-text);
        margin-top: 12px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.39px;
      }

      .detail_table-note + .detail_table-scroll{
        margin-top: 40px;
      }

      table{
        grid-template-columns: 72px 648px 122px 122px;
        width: max-content;
        min-width: 100%;

        ._number{
          font-size: 16px;
        }
        th{
          padding: 16px 20px;
        }
        td{
          padding: 20px 20px;
        }
        th._number{
          padding: 8px 12px;
        }
        th.detail_table-top-lb{
          gap: 8px;
          font-size: 17px;
          letter-spacing: 0.51px;

          span{
            font-size: 13px;
            letter-spacing: 0.39px;
          }
        }
        .detail_table-td-md{
          img[alt="チェックアイコン"]{
            width: 20px;
            height: 20px;
          }
        }
        .detail_table-top-db{
          font-size: 15px;
          letter-spacing: 0.45px;
          gap: 0;
          padding: 8px 16px;

          img{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1300px){
  .scs-training-detail{
    .detail_item{
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}

/*--------------------------------------------------------------
	scs-training-before-after
--------------------------------------------------------------*/
.scs-training-before-after{
  background: linear-gradient(180deg, var(--color-bg) 0%, #C7DDFF 100%);
  padding-bottom: 104px;
  position: relative;

  &::after{
    content: "";
    display: block;
    width: calc(740/1440*100vw);
    height: calc(488/1440*100vw); 
    background-size: cover;
    position: absolute;
    background-image: url(/lp/scs-training/img/section-before-after/blur.svg);
    bottom: 0;
    left: 0;
  }

  .scs-training-inner{
    position: relative;
    z-index: 1;
  }

  h2{
    color: var(--color-text);
    text-align: center;
  }

  .before-after_flex{
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
  }
  .before-after_catch{
    color: var(--color-base-wh);
    border-radius: 8px;
    display: flex;
    padding: 20px 32px 88px 32px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    span{
      opacity: 0.6;
      font-family: "Roboto", sans-serif; 
      font-size: 18px;
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 0.9px;
    } 
  }
  .before-after_list{
    display: flex;
    width: 90%;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 8px;
    background: var(--color-base-wh);
    box-shadow: 0 6px 36px 0 rgba(0, 83, 207, 0.07);
    margin: -64px auto 0;
  }
  .before-after_item{
    position: relative;

    &:first-child{
      min-height: 145px;
    }
    &:nth-child(2){
      min-height: 179px;
    }
    &:last-child{
      min-height: 145px;
    }
  }
  .before-after_item+.before-after_item::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 10px solid #9BAECE;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -25px;
  }
  .before-after_item{
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 108px 1fr;
  }
  .before-after_head{
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;
    padding: 12px;
    color: var(--color-base-wh);
    border-radius: 4px 4px 0 0;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .before-after_ttl{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 4px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
  }
  .before-after_txt{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    padding: 16px 20px;
    border-radius: 0 0 4px 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.54px;

    ._caption{
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.42px;
    }
    ._point{
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      line-height: 1.5; 
      span{
        text-align: center;
        font-family: "Roboto", sans-serif;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0.6px;
        color: var(--color-base-wh);
        border-radius: 2px;
        background: #15B699;
        padding: 4px 6px;
        margin-top: 2px;
      }
    }
  }
  .before-after_card._before {
    .before-after_catch{
      background: linear-gradient(180deg, #414E63 0%, #6581AF 100%);
    }
    .before-after_head{
      background: #425065;
    }
    .before-after_ttl{
      background: #5D6F8A;
      color: var(--color-base-wh);
    }
    .before-after_txt{
      background: #EDEDED;
      display: flex;
      align-items: center;
    }
  }
  .before-after_card._after {
    .before-after_catch{
      background: linear-gradient(180deg, var(--color-primary) 0%, #4490FF 100%);
    }
    .before-after_head{
      background: #034CB8;
    }
    .before-after_ttl{
      background: #1971F2;
    }
    .before-after_txt{
      background: var(--color-bg);
    }
  }
}
@media only screen and (max-width: 1200px){
  .scs-training-before-after{
    .before-after_flex{
      grid-template-columns: 1fr;
    }
    .before-after_catch{
      border-radius: 4px;
      padding: 24px 16px 88px 16px;
    }
    .before-after_list{
      padding: 20px 16px;
      border-radius: 4px;
    }
    .before-after_item{
      grid-template-columns: 58px 1fr;
    }
    .before-after_head{
      font-size: 13px;
      letter-spacing: 0.91px;
    }
    .before-after_ttl{
      font-size: 16px;
      letter-spacing: 1.6px;
    }
    .before-after_txt{
      padding: 16px;
      font-size: 16px;
      letter-spacing: 0.48px;

      ._caption{
        font-size: 13px;
      }
      ._point{
        font-size: 14px;
        line-height: 1.5; 
        span{
          font-size: 11px;
          letter-spacing: 0.55px;
          padding: 13px 6px;
        }
      }
    }
  }
} 

/*--------------------------------------------------------------
	scs-training-education
--------------------------------------------------------------*/
.scs-training-education{
  padding: 104px 0;

  h2{
    color: var(--color-text);
    text-align: center;
  }
  .education_lead{
    color: var(--color-text);
    text-align: center;
    margin-top: 24px;
  }
  .scs-training-flex{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: center;
    img{
      width: min(372px,calc(372/1440*100vw));
    }
  }
  .education_list{
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-radius: 8px;
    background: var(--color-bg);
    box-shadow: 0 6px 24px 0 rgba(0, 42, 96, 0.04);
    height: fit-content;
  }
  .education_item{
    h3{
      display: flex;
      gap: 12px;
      align-items: center;
    }
    h3::before{
      display: block;
      content: "";
      width: 26px;
      height: 26px;
      background: url(/lp/scs-training/img/section-detail/icon-check.svg);
      flex-shrink: 0;
      background-size: contain;
    }
    p{
      margin-top: 12px;
      padding-left: 38px;
    }
  }
}
@media only screen and (max-width: 1024px){
  .scs-training-education{
    .education_lead{
     text-align: left;
    }
    .scs-training-flex{
      flex-direction: column;
      img{
        width: 100%;
        max-width: 400px;
      }
    }
    .education_list{
      padding: 32px 20px;
      gap: 32px;
      border-radius: 4px;
    }
    .education_item{
      h3{
        gap: 10px;
        align-items: flex-start;
      }
      h3::before{
        width: 20px;
        height: 20px;
        margin-top: 6px;
      }
      p{
        margin-top: 8px;
        padding-left: 36px;
      }
    }
  }
}

/*--------------------------------------------------------------
	scs-training-price
--------------------------------------------------------------*/
.scs-training-price{
  background:var(--color-bg);
  padding: 104px 0;
  position: relative;
  
  .scs-training-inner{
    position: relative;
    z-index: 1;
  }

  &::before,&::after{
    content: "";
    display: block;
    width: calc(740/1440*100vw);
    height: calc(488/1440*100vw); 
    background-size: cover;
    position: absolute;
  }

  &::before{
    background-image: url(/lp/scs-training/img/section-detail/blur.svg);
    top: 0;
    right: 0;
  } 
  &::after{
    background-image: url(/lp/scs-training/img/section-detail/blur.svg);
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
  } 

  h2{
    color: var(--color-text);
    text-align: center;
  }
  .price_top{
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: fit-content;
    margin: 19px auto;
    &::after{
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      background: linear-gradient(135deg, var(--color-primary) 0%, #C1DAFF 100%);
    }
    
    ._txt{
      color: var(--color-text);
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.48px;
      padding-bottom: 4px;
    }
    ._point{
      color: var(--color-primary);
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2; 
      letter-spacing: 0.72px;

      span{
        font-family: "Roboto", sans-serif;
        font-size: 44px;
        font-style: italic;
        font-weight: 700;
      }
    }
  }
  .price_table{
    max-width: 656px;
    margin: 40px auto 0;

    h3{
      color: var(--color-primary);
      text-align: center;
      span{
        color: var(--color-text);
        font-size: 16px;
        letter-spacing: 0.48px;
        margin-left: 12px;
      }
    }
    table{
      width: 100%;
      margin-top: 16px;
      text-align: left;

      tr{
        display: grid;
        grid-template-columns: repeat(2,1fr);
      }
      tr+tr{
        border-top: 1px solid #76A3E9;
      }
      th,td{
        padding: 16px 20px;
        color: var(--color-text);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.54px;
        display: flex;
        align-items: center;
        
        span{
          font-size: 14px;
          font-weight: 400;
          line-height: 1.6;
          letter-spacing: 0.42px;
        }
      }
      th{
        background: #B4D0FB;
        line-height: 1.5;
      }
      td{
        background: var(--color-base-wh);
        line-height: 1.6; 
      }
    }
  }
  .price_attention{
    margin-top: 32px;

    p{
      color: var(--color-text);
      display: flex;
      align-items: flex-start;
      line-height: 1.6; 
      letter-spacing: 0.48px;

      &::before{
        content: "※";
        display: block;
        width: 16px;
        height: 26px;
        margin-right: 4px;
      }
    }
    p+p{
      margin-top: 10px;
    }
  }
}
@media only screen and (max-width: 768px){
  .scs-training-price{
    .price_top{
      ._txt{
        font-size: 15px;
        letter-spacing: 0.45px;
      }
      ._point{
        font-size: 22px;
        letter-spacing: 0.66px;

        span{
          font-size: 40px;
        }
      }
    }
    .price_table{
      h3{
        span{
          font-size: 15px;
          letter-spacing: 0.45px;
          margin-left: 8px;
        }
      }
      table{ 
        th,td{
          padding: 16px 12px;
          font-size: 16px;
          letter-spacing: 0.48px;

          span{
            font-weight: 500;
            line-height: 1.5;
          }
        }
      }
    }
    .price_attention{
      margin-top: 16px;

      p{
        font-size: 15px;
        letter-spacing: 0.45px;

        &::before{
          width: 15px;
          height: 24px;
        }
      }

      p+p{
        margin-top: 8px;
      }
    }
  }
}

/*--------------------------------------------------------------
	scs-training-faq
--------------------------------------------------------------*/
.scs-training-faq{
  padding-top: 104px;
  h2{
    color: var(--color-text);
    text-align: center;
  }
  .faq_list{
    margin-top: 48px;
  }
  .faq_item+.faq_item{
    margin-top: 48px;
  }
  .faq_item-q{
    border-radius: 4px;
    background: var(--color-bg);
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 8px;

    span{
      color: var(--color-primary);
      font-family: "Roboto", sans-serif;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.5;
    }
  }
  .faq_item-a{
    margin-top: 12px;
    padding: 0 16px 0 61px;
  }
}
@media only screen and (max-width: 768px){
  .scs-training-faq{
    .faq_item-q{
      padding: 12px;
      align-items: flex-start;
      gap: 6px;

      span{
        font-size: 17px;
      }
    }
    .faq_item-a{
      margin-top: 14px;
      padding: 0;
    }
  }
}

/*--------------------------------------------------------------
	scs-training-sourcepod
--------------------------------------------------------------*/
.scs-training-sourcepod{
  padding: 104px 0;
  .sourcepod_box{
    border-radius: 8px;
    border: 1px solid #CCC;
    background: var(--color-base-wh);
    padding: 24px 32px;
  }
  h3{
    color: var(--color-text);
    text-align: center;
  }
  .sourcepod_flex{
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
    
    img{
      max-width: 308px;
    }
    p{
      font-size: 14px;
      line-height: 1.6;
      letter-spacing: 0.42px;
    }
    p+p{
      margin-top: 8px;
    }
  }
}
@media only screen and (max-width: 768px){
  .scs-training-sourcepod{
    padding: 88px 0;
    .sourcepod_box{
      border-radius: 4px;
      padding: 24px 20px;
    }
    .sourcepod_flex{
      flex-direction: column;
      margin-top: 24px;
      gap: 8px;
      
      img{
        width: 100%;
        max-width: none;
        order: 2;
      }
      p{
        font-size: 13px;
        letter-spacing: 0.39px;
      }
    }
  }
}

/*--------------------------------------------------------------
	scs-training-cta
--------------------------------------------------------------*/
.scs-training-cta{
  padding: 104px 0;
  background: linear-gradient(180deg, #004FC4 0%, #00388A 100%);
  position: relative;
  
  &::before{
    content: "";
    display: block;
    width: calc(740/1440*100vw);
    height: calc(488/1440*100vw);
    background-image: url(/lp/scs-training/img/section-contact/blur.svg);
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
  } 

  .scs-training-inner{
    position: relative;
    z-index: 1;
  }

  h2{
    color: var(--color-base-wh);
    text-align: center;
  }
  .cta_lead{
    color: var(--color-base-wh);
    text-align: center;
    margin-top: 16px;
  }
}
@media only screen and (max-width: 768px){
  .scs-training-cta{
    &::before{
      width: calc(500/390*100vw);
      height: calc(330/390*100vw);
    } 
  }
}

/*--------------------------------------------------------------
	page-top
--------------------------------------------------------------*/
.page-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.48px;
  text-align: center;
  font-family: "Roboto", sans-serif;

  img{
    width: 18px;
    height: 18px;
  }
}
@media only screen and (max-width: 768px){
  .page-top{
    gap: 4px;
    padding: 12px 0;
    font-size: 12px;
    letter-spacing: 0.36px;
  }
}