@charset "UTF-8";

:root {
  --color-white: #FFFFFF;
  --color-black: #3E3A39;
  --color-666666: #666666;
  --color-8a8a8a: #8a8a8a;
  --color-cdcdcd: #cdcdcd;
  --color-ebebeb: #ebebeb;
  --color-e1e1e2: #e1e1e2;
  --color-f3f3f3: #f3f3f3;
  --color-ececec: #ececec;
  --color-2b4cdb: #2b4cdb;
  --color-00B9EF: #00B9EF;
  --color-00AB5A: #00AB5A;
  --color-007320: #007320;
  --color-FDD000: #FDD000;
  --color-FFE901: #FFE901;
  --color-E8380D: #E8380D;
  --color-b89023: #b89023;
  --color-6b82e6: #6b82e6;
  --color-DDF3FA: #DDF3FA;
  --color-d7ddf8: #d7ddf8;
  --color-main: #2b4cdb;
  --color-main-light: #EAEDFB;
  --color-main-sub: #6b82e6;
  --color-main-sub-light: #B1BDF7;
  --font10: 0.625rem;
  --font12: 0.75rem;
  --font13: 0.8125rem;
  --font14: 0.875rem;
  --font15: 0.9375rem;
  --font16: 1rem;
  --font17: 1.0625rem;
  --font18: 1.125rem;
  --font19: 1.1875rem;
  --font20: 1.25rem;
  --font21: 1.3125rem;
  --font24: 1.5rem;
  --font26: 1.625rem;
  --font28: 1.75rem;
  --font30: 1.875rem;
  --font35: 2.1875rem;
  --font38: 2.1875rem;
  --font40: 2.5rem;
  --font43: 2.6875rem;
  --font45: 2.8125rem;
  --font50: 50px;
  --font60: 60px;
  --font70: 70px;
  --font80: 80px;
  --font90: 90px;
  --font-weight-bold: 700;
  --font-weight-normal: normal;
  --shape-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --shape-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --shape-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --shadow: 0 0.3rem 2.5rem -2rem rgba(85, 96, 96, 0.3), 0 0.3rem 0.5rem rgba(84, 96, 96, 0.376);
  --shadow2: 0 0.2rem 2rem -1rem rgba(85, 96, 96, 0.4), 0 0.2rem 0.3rem rgba(84, 96, 96, 0.4);
  --shadow3: 0 0.3rem 3.5rem -1.3rem rgba(85, 96, 96, 0.3), 0 0.3rem 0.45rem -0.15rem rgba(84, 96, 96, 0.2);
  --list-border: 1px solid var(--color-cfcfcf);
  --number-width: clamp(136px, 33.8vw, 180px);


  --col-08: #dddddd;
  --col-09: #FAF27F;
  --col-11: #FF6F3A;
  --col-12: #E86D40;
  --col-13: #F18760;
  --col-14: #49A8D7;
  --col-15: #e5f2ec;
  --col-16: #fbe28b;
  --col-17: #BFBFBF;
  --col-18: #266EC6;
  --col-19: #D0DCEF;
  --col-20: #86A6D6;
  --col-21: #707070;
  --fz1: 0.0625rem;
  --fz10: 0.625rem;
  --fz11: 0.687rem;
  --fz12: 0.75rem;
  --fz13: 0.812rem;
  --fz14: 0.875rem;
  --fz15: 0.937rem;
  --fz16: 1rem;
  --fz17: 1.0625rem;
  --fz18: 1.125rem;
  --fz19: 1.1875rem;
  --fz20: 1.25rem;
  --fz21: 1.3125rem;
  --fz23: 1.4375rem;
  --fz24: 1.5rem;
  --fz26: 1.625rem;
  --fz28: 1.75rem;
  --fz30: 1.875rem;
  --fz32: 2rem;
  --fz36: 2.25rem;
  --fz40: 2.5rem;
  --fz42: 2.625rem;
  --fz43: 2.6875rem;
  --fz46: 2.875rem;
  --fz49: 3.0625rem;
  --fz50: 3.125rem;
  --shape-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --shape-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --shadow: 0 0.5rem 3.5rem -2rem hsla(200, 14%, 25%, 0.4), 0 0.5rem 0.5rem hsla(200, 11%, 26%, 0.2);
  --shadow2: 0 1rem 0.8rem -1rem hsla(200, 14%, 25%, 0.4), 0 0.2rem 0.8rem -0.2rem hsla(200, 11%, 26%, 0.2);
  --shadow-in: 0 0.2rem 0.5rem -0.2rem hsla(221, 28%, 28%, 0.3) inset, 0 0.2rem 2.5rem -1.5rem hsla(200, 11%, 26%, 0.3) inset;
  --font-weight-b: 700;
  --margin-bottom: 2.5em;
  --padding-top: clamp((var(--fz1) * 60), 10vw, 100px);
  --padding-bottom: clamp((var(--fz1) * 80), 12vw, 120px);
}


/*スキルアップマスター
----------------------------------------------------*/
/*パンくず*/
.breadcrumb{
  padding-top: clamp(20px, 5vw / 1.4,50px);
}
.security-item h3, .problem-item {
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
  }
}
.skillup-master .triangle {
  &::before {
    --size: 12px;
    top: 50%;
    right: 1.5em;
    transform: translateY(-25%);
    display: block;
    width: var(--size);
    height: calc(var(--size) / 1.5 * tan(60deg));
    clip-path: var(--shape-triangle-right);
    background: var(--color-E8380D);
    transition: 0.3s;
  }
}
/* 見出し */
h2.skillup_master {
  text-align: center;
  font-size: clamp(var(--fz24), calc(3.2vw / 1.2), var(--fz32));
  padding: 2em 0.5em;
  .pricing-section &{
    padding: 2em 0.5em 0.5em;
  }
}
/*--hero--*/
.skillup-hero{
  background: linear-gradient(90deg, var(--col-14) 0%, var(--col-14) 60%, var(--col-18) 60%, var(--col-18) 100%);
}
.skillup-hero-container {
  display: grid;
  grid-template-columns: min(70vw - (var(--side-w) / 2), 600px) 1fr;
  gap: clamp(1rem, calc(3.2vw / 1.2), 2rem);
  margin-inline: auto;
}
.skillup-text {
  display: grid block;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(2rem, calc(6.4vw / 1.2), 4rem);
}
.skillup-lead {
  color: var(--color-black);
  font-size: clamp(var(--fz21), calc(3.2vw / 1.2), var(--fz32));
}
h1.skillup__title {
  display: grid block;
  margin-bottom: clamp(0.8rem, calc(2.4vw / 1.2), 1.5rem);
  .line-1 {
  font-size: clamp(var(--fz17), calc(2.4vw / 1.2), var(--fz24));
    margin-bottom: 0.5em;
  }
  .line-2, .line-3{
    color: var(--color-white);
  }
  .line-2 {
  font-size: clamp(var(--fz16), calc(2.1vw / 1.2), var(--fz21));
  }
  .line-3 {
  font-size: clamp(var(--fz28), calc(4.6vw / 1.2), var(--fz46));
  }
}
.skillup-caption {
  display: grid;
  justify-items: start;
  gap: 0.5em;
  font-size: clamp(var(--fz18), calc(2.4vw / 1.2), var(--fz24));
  line-height: 2;
  color: var(--color-f3f3f3);
  span {
    display: inline-block;
    background: var(--color-2b4cdb);
    &:first-child {
      padding: 0.05em 0.7em;
    }
    &:nth-child(2) {
      padding: 0.15em 0.15em;
    }
  }
}
.skillup-image {
  width: 100%;
  height: 100%;
  background: var(--col-18);
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <=700px) {
  .skillup-hero{
    background: var(--col-14);
  }
  .skillup-hero-container{
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
  }
  .skillup-text{
    order: 2;
    padding-inline: 4vw;
  }
  .skillup-image{
    order: 1;
    height: clamp(240px, calc(32vw / 0.7), 320px);
    padding-top: 2.8rem;
    img{
      object-fit: contain;
    }
  }
}

/* こんなお悩み　ここから */
.problem {
  padding-block: clamp(1rem, calc(8vw / 1.1), 5rem) clamp(1rem, calc(12.3vw / 1.1), 9rem);
}
.problem-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min((100% - 4vw), 800px);
  margin-inline: auto;
  img{
    width: clamp(180px, calc(29.1vw / 0.8), 291px);
  }
}
@media (width <=700px) {
  .problem-section{
    flex-direction: column-reverse;
  }
}
.problem-list {
  display: grid block;
  gap: 1.5rem;
}
.problem-item {
  padding-left: 2.2em;
  font-size: clamp(var(--fz16), calc(2vw / 0.8), var(--fz20));
  &::before, &::after{
    display: block;
    width: 1.2em;
  }
  &::before{
    top: 0;
    left: 0;
    aspect-ratio: 1;
    border: 2px solid;
    border-radius: 0.2em;
  }
  &::after{
    top: 0.15em;
    left: 0.2em;
    height: 0.6em;
    border-bottom: 2px solid var(--col-14);
    border-left: 2px solid var(--col-14);
    transform: rotate(-45deg);
  }
}
/*スキルアップマスター　教育の仕組み化*/
.summary-blocks {
  position: relative;
  display: grid block;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, calc(7vw / 1.1), 4.4rem);
  margin-inline: auto;
}
.summary-block {
  display: grid;
  justify-items: center;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 1.8rem;
}
.summary-figure{
  width: 90%;
  img{
    width: 100%;
  }
  &::before, &::after{
    content: '';
    position: absolute;
    display: block;
  }
  &::after{
    --size: 2rem;
    width: var(--size);
    height: calc(var(--size) / 1.5 * tan(60deg));
    background: var(--col-17);
    clip-path: var(--shape-triangle-right);
  }
  :where(.summary-block:not(:last-child)) &{
    position: relative;
    &::before{
      top: 50%;
      right: 0;
      transform: translate(100%, -50%);
      width: 55px;
      height: 3px;
      border-bottom: 4px solid var(--col-17);
    }
    &::after{
      top: 50%;
      right: -65px;
      transform: translateY(-50%);
    }
  }
  :where(.summary-block:last-child) &{
    --bottom: -60px;
    &::before{
      bottom: var(--bottom);
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 25px;
      border: 4px solid var(--col-17);
    border-top: 0;
    }
    &::after{
      bottom: var(--bottom);
      left: 15%;
      transform: rotate(-90deg) translate(50%, -50%);
    }
  }
}
.skillup_sub {
  font-size: clamp(var(--fz20), calc(2.3vw / 1.1), var(--fz23));
}
@media (width <=700px) {
  .summary-blocks{
    grid-template-columns: 320px;
    justify-content: center;
  }
  .summary-figure{
    &::before, &::after{
      display: none;
    }
    img{
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--color-f3f3f3);
      object-fit: contain;
    }
  }
}
/*スキルアップマスター　便利な機能*/
.features-section {
  padding-block: clamp(1rem, calc(12.3vw / 1.1), 9rem) clamp(1rem, calc(8vw / 1.1), 5rem);
}
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 2rem 1.2rem;
  width: var(--main-width_1100);
  container-type: inline-size;
  margin-inline: auto;
}
.feature-card {
  display: grid block;
  justify-items: center;
  gap: 0.5rem;
  background: var(--col-15);
  padding: 1.25em;
  border-radius: 0.5em;
  box-sizing: border-box;
  h3 {
    font-size: clamp(var(--fz18), (var(--fz1) * 6) + 1.5cqi,var(--fz23));
  }
  .feature-figure{
    width: 100%;
  }
}
/*スキルアップマスター　3つの理由*/
.reason {
  container-type: inline-size;
  background: var(--col-14);
  h2{
    color: var(--color-white);
  }
}
.reason-item {
  display: grid block;
  width: min(100vw - 6vw - 1.8rem, 1200px - 2rem);
  grid-template-columns: min(15vw / 1.2 , 150px) 1fr min(35vw / 1.2 , 340px);
  place-items: center;
  gap: clamp(0.5rem, 1.6vw, 1rem);
  background: var(--color-white);
  border-radius: 0.5rem;
  padding: clamp(0.5rem, 1.6vw, 1rem);
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.reason-item-label {
  display: grid inline;
  align-items: center;
  aspect-ratio: 1;
  font-size: clamp(var(--fz21), calc(3.2vw / 1.2), var(--fz32));
}
.reason-item-text {
  container-type: inline-size;
  width: 100%;
  h3 {
    font-size: var(--fz23);
    font-size: clamp(var(--fz20), var(--fz10) + 2.5cqi, var(--fz23));
    margin-bottom: 0.5em;
  }
  p {
    line-height: 1.5em;
  }
}
.reason-item-image {
  max-width: 340px;
  img {
    width: 100%;
  }
}
.reason__note{
  position: relative;
  width: min(100vw - 6vw - 3.5em, 1200px - 3.5em);
  color: var(--color-white);
  font-weight: 500;
  padding-left: 3.5em;
  margin-inline: auto;
  margin-bottom: 2em;
  &::before{
    content: '（※1）';
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media (width <=700px){
  .reason-item{
    grid-template-columns: 1fr;
  }
  .reason-item-text{
    h3, p{
      padding-inline: min(1.6vw / 0.7, 1em);
    }
  }
}
/*料金*/
.pricing-section{
  background: var(--color-2b4cdb);
  padding-block: clamp(1rem, 16vw, 10rem);
  >div{
    background: var(--color-white);
    border-radius: 5rem;
    margin-inline: auto;
    text-align: center;
    padding-bottom: clamp(1rem, 8vw, 5rem);
  }
  p{
    padding-inline: 0.8em;
  }
}
.monthly-price{
  color: var(--col-14);
  font-weight: var(--font-weight-b);
  font-size: clamp(var(--fz24), 4.2vw, var(--fz42));
  margin-bottom: 0.5em;
  span{
    &:first-child{
      font-size: 250%;
      margin-right: 0.2em;
    }
    &:last-child{
      display: block;
      font-size: 70%;
      font-weight: 500;
    }
  }
}
/*スキルアップマスター　安心のセキュリティ環境*/
.security-section {
  padding-block: clamp(1rem, 8vw, 5rem) clamp(1rem, 16vw, 10rem);
}
.security-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-inline: auto;
  gap: clamp(2rem, 6vw / 1.1, 10rem) clamp(1.5rem, 5vw / 1.1, 3.1rem);
}
.security-item {
  display: grid;
  justify-items: center;
  align-self: start;
  gap: 1rem;
  h3 {
    color: var(--color-2b4cdb);
    font-size: var(--fz21);
    padding-left: 1.5em;
    &::before {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 1em;
      aspect-ratio: 1;
    }
    &.skillup_colorsub1::before {
      background: url(../img/business/products/skillup_icon1.svg) no-repeat center / contain;
    }
    &.skillup_colorsub2::before {
      background: url(../img/business/products/skillup_icon2.svg) no-repeat center / contain;
    }
    &.skillup_colorsub3::before {
      background: url(../img/business/products/skillup_icon3.svg) no-repeat center / contain;
    }
    &.skillup_colorsub4::before {
      background: url(../img/business/products/skillup_icon4.svg) no-repeat center / contain;
    }
    &.skillup_colorsub5::before {
      background: url(../img/business/products/skillup_icon5.svg) no-repeat center / contain;
    }
    &.skillup_colorsub6::before {
      background: url(../img/business/products/skillup_icon6.svg) no-repeat center / contain;
    }
    &.skillup_colorsub7::before {
      background: url(../img/business/products/skillup_icon7.svg) no-repeat center / contain;
    }
    &.skillup_colorsub8::before {
      background: url(../img/business/products/skillup_icon8.svg) no-repeat center / contain;
    }
  }
  p{
    max-width: 340px;
  }
}
.different-color {
  display: block;
  color: var(--color-E8380D);
  font-size: 90%;
  font-weight: var(--font-weight-b);
}
/*スキルアップマスター ここまで
--------------------------------------- */