@charset "utf-8";

/* === ▼ Fonts ================================================== */
@font-face {
   font-family: "noto-sans";
   src: url(../fonts/NotoSansJP-VariableFont_wght.ttf);
   font-weight: 500 900;
   font-style: normal;
}


/* === ▼ All ================================================== */
*,
*::after,
*::before {
   font-family: "noto-sans";
}

html {
   font-size: 62.5%;
   /* rem指定をする際に1.8rem=18pxのように直感的に指定できるように%指定 */

   background-color: #fff;
}

body {
   color: #14162B;

   font-size: 4.8vw;
   /* スマホ表示で約18px */
   line-height: 8.53vw;
   /* スマホ表示で約32px */
   font-weight: 500;
   letter-spacing: 0.1em;

   max-width: 700px;
   min-height: 100vh;
   margin: 0 auto;
}

.space01 {
   padding: 3%;
}

.red {
   color: #DE1818;
}

.white {
   color: #fff;
}

.yellow {
   color: #FFF100;
}

.orange {
   color: #FF7A00;
}

.bold {
   font-weight: 700;
}

.big {
   font-size: 1.12em;
   /* 通常フォントサイズから1.12倍 */
}

.wrapper {
   width: 90%;
   max-width: 630px;
   /* ブレークポイント768pxの90% */

   margin: 0 auto;
}

.pc {
   display: block !important;
}

.sp {
   display: none !important;
}

@media screen and (max-width:767px) {
   .pc {
      display: none !important;
   }

   .sp {
      display: block !important;
   }
}

@media screen and (min-width: 700px) {
   body {
      font-size: 2.8rem;
      line-height: 5rem;
      letter-spacing: 4px;
   }

   .space01 {
      padding: 10px;
   }

   .big {
      line-height: 6rem;
   }

   .br-768 {
      display: none;
   }
}

@media (hover: hover) {
   a {
      transition: .3s;
   }

   a:hover {
      transform: scale(1.05, 1.05);
      transition: .3s;
   }
}



/* === ▼ FV ================================================== */
.fv-area {
   background: url("../img/fv-bg.webp");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: scroll;
   width: 700px;
   max-width: 100%;
   margin: 0 auto;

}

.fv-top {
   background-color: #14163d;
   padding: 20px 0 10px 0;
}

.fv-main01,
.fv-main02,
.fv-main03 {
   display: block;
   height: auto;
}

.fv-main01 {
   width: 550px;
   max-width: 100%;
   margin: 0 auto;
}

.fv-main02 {
   width: 700px;
   max-width: 100%;
   margin: 0 auto;
}

.fv-main03 {
   width: 700px;
   max-width: 100%;
   margin: 0 auto;
}



@media screen and (max-width:767px) {

   .fv-area {
      background: url("../img/fv-bg.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: scroll;

   }

   .fv-top {
      background-color: #14163d;
      padding: 5% 0 1% 0;
   }

   .fv-main01,
   .fv-main02,
   .fv-main03 {
      display: block;
      height: auto;
   }

   .fv-main01 {
      width: 80%;
      max-width: 100%;
      margin: 0 auto;
   }

   .fv-main02 {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
   }

   .fv-main03 {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
   }
}




/* === ▼ #media：業界最大手級のAIサービスを展開 ================================================== */
#media {
   padding: 4% 0 8% 0;

   background-image: url(../img/media-bg.jpg);
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
}

#media .section-title {
   width: 80%;
   max-width: 600px;
   margin: 0 auto 10%;
}

#media .slide-box {
   margin-bottom: 2%;
}

/* === ▲ #media：業界最大手級のAIサービスを展開================================================== */



/* === ▼ #company：会社紹介================================================== */
#company {
   padding: 10% 0 1% 0;
   background-color: #FFFAEA;
}

#company::before {
   content: "";
   position: absolute;
   z-index: -1;

   background-image: url(../img/company-before.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: right top;

   top: 0;
   right: 0;

   width: 20%;
   height: 100%;
}

#company::after {
   content: "";
   position: absolute;
   z-index: -1;

   background-image: url(../img/company-after.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: left bottom;

   bottom: 0;
   left: 0;

   width: 20%;
   height: 100%;
}

#company .sec-title {
   width: 80%;
   margin: 0 auto 5% auto;
}

#company .wrapper div:nth-of-type(1) {
   width: 70%;
   margin: 0 auto 8% auto;
}

#company .wrapper div {
   margin-bottom: 8%;
}

@media screen and (min-width: 700px) {
   #company .wrapper div:nth-of-type(1) {
      width: 50%;
   }
}

/* === ▲ #company：会社紹介================================================== */



/* === ▼ #present：豪華10大特典 ================================================== */
#present {
   padding: 10% 0;
   background-image: linear-gradient(95deg, #3777ff, #fc41ff);
}

#present .sec-title {
   margin-bottom: 4%;
}

/* === ▲ # present：豪華10大特典================================================== */



/* === # voice：セミナー参加者の声================================================== */
#voice {
   padding: 10% 0;

   /* border-top: solid 6px #FF7A00;
   border-bottom: solid 6px #FF7A00; */
   background-color: #FFEEEE;
}

#voice .sec-title {
   width: 80%;
   margin: 0 auto 5% auto;
}

#voice .wrapper .slide-box {
   margin-bottom: 2%;
}

#voice .wrapper p {
   color: #C5B1B1;
   font-size: 2.1vw;
   line-height: 3vw;
   letter-spacing: 10%;
   padding-left: 2%;
}

@media screen and (min-width: 700px) {
   #voice .wrapper p {
      font-size: 1.4rem;
      line-height: 2rem;
   }
}

/* === ▲ #voice：セミナー参加者の声================================================== */



/* === ▼ #recommend：こんな人におすすめ！ ================================================== */
#recommend {
   padding: 10% 0;
   background-color: #FFD1A7;

   position: relative;
}

#recommend::before {
   content: "";
   position: absolute;
   z-index: -1;

   background-image: url(../img/recommend-before.png);
   background-repeat: no-repeat;
   background-size: contain;

   top: 0;
   right: 0;

   width: 26%;
   height: 45vw;
}

#recommend::after {
   content: "";
   position: absolute;
   z-index: -1;

   background-image: url(../img/recommend-after.png);
   background-repeat: no-repeat;
   background-size: contain;

   bottom: 0;
   left: 0;

   width: 26%;
   height: 45vw;
}

#recommend .sec-title {
   margin-bottom: 4%;
}

@media screen and (min-width: 700px) {
   #recommend::before {
      height: 335px;
      ;
   }

   #recommend::after {
      height: 335px;
   }
}

/* === ▲ #recommend：こんな人におすすめ！================================================== */



/* === ▼ #learn：セミナーで学べること================================================== */
#learn {
   padding: 10% 0 0;

   background-image: url(../img/learn-bg.png);
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
}

#learn .sec-title {
   margin-bottom: 5%;
}

#learn p {
   font-size: 4.3vw;
   line-height: 5.8vw;
   text-align: center;
   margin-bottom: 3%;
}

#learn .bounce-in {
   margin-bottom: 5%;
}

#learn .slide-box {
   margin-bottom: 2%;
}

@media screen and (min-width: 700px) {
   #learn p {
      font-size: 2.6rem;
      line-height: 2rem;
      margin-bottom: 5%;
      letter-spacing: 2px;
   }
}

/* === ▲ #learn：セミナーで学べること================================================== */



/* === ▼ #full：AIをフル活用できていますか？ ================================================== */
#full {
   background-color: #FBF7EB;

   position: relative;
}

#full .part01 {
   padding: 10% 0 20% 0;

   background-image: linear-gradient(#a3a1bf, #ffe48a);
   clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 50% 100%, 0% 92%);
}

#full .part01 .sec-title {
   margin-bottom: 5%;
}

#full .part01 .container {
   margin-top: 6%;
}

#full .part01 .container div:nth-of-type(1) {
   width: 60%;
   margin: 0 auto;
}

#full .part01 .container div:nth-of-type(2) {
   margin: 2% 0;
}

#full .part01 .container div:nth-of-type(3) {
   width: 80%;
   margin: 0 auto;
}

/* === ▲ #full：AIをフル活用できていますか？================================================== */



/* === ▼ #winner：AI革命初期の現代では[仕組みを構築できる人]が勝つ！ ================================================== */
#winner {
   padding: 10% 0;
   background-color: #FF7A00;
}

#winner .sec-title {
   margin-bottom: 5%;
}

#winner .wrapper {
   padding: 7% 5%;
   background-color: #fff;
}

#winner .wrapper p {
   line-height: 7vw;
   margin-bottom: 8%;
   text-align: center;
}

#winner .wrapper .bounce-in {
   margin: 5% 0;
}

@media screen and (min-width: 700px) {
   #winner .wrapper p {
      font-size: 3.2rem;
      line-height: 32px;
   }
}

/* === ▲ #winner：AI革命初期の現代では[仕組みを構築できる人]が勝つ！================================================== */



/* === ▼ #contents：３時間の中身 ================================================== */
#contents {
   padding: 10% 0;

   background-color: #FFFAEA;
}

#contents::before {
   content: "";
   position: absolute;
   z-index: -1;

   background-image: url(../img/contents-before.png);
   background-repeat: no-repeat;
   background-size: contain;

   top: 0;
   right: 0;

   width: 20.1%;
   height: 100%;
}

#contents::after {
   content: "";
   position: absolute;
   z-index: -1;

   background-image: url(../img/contents-after.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;

   top: 50%;
   transform: translateY(-50%);
   left: 0;

   width: 10%;
   height: 30%;
}

#contents .sec-title {
   width: 80%;
   margin: 0 auto 5% auto;
}

#contents .wrapper .slide-box {
   margin-bottom: 2%;
}

#contents .wrapper .bounce-in {
   margin: 5% 0 3% 0;
}

/* === ▲ #contents：３時間の中身================================================== */



/* === ▼ #appeal：BLITZ AIでみんなと学ぶ！   ================================================== */
#appeal {
   padding: 10% 0 0;
   background-color: #FFEEEE;
}

#appeal .wrapper {
   margin-bottom: 10%;
}

#appeal .wrapper p {
   font-size: 4.2vw;
   line-height: 6vw;
   text-align: center;
   margin: 5% auto 8%;
}

#appeal .attention {
   color: #6A7086;
   font-size: 2.1vw;
   line-height: 4vw;
   padding: 2% 4%;
   background-color: #D9D9D9;
}

@media screen and (min-width: 700px) {
   #appeal .wrapper p {
      font-size: 3rem;
      line-height: 4rem;
   }

   #appeal .attention {
      font-size: 1.2rem;
      line-height: 1.8rem;
   }
}

/* === ▲ #appeal：BLITZ AIでみんなと学ぶ！================================================== */



/* === ▼ #step：お申し込みは簡単2STEP ================================================== */
#step {
   padding: 10% 0;
   background-image: linear-gradient(#ff7a00, #ffab5d);
}

#step .wrapper div:first-child {
   margin: 8% 0;
}

/* === ▲ #step：お申し込みは簡単2STEP ================================================== */



/* === ▼ #qa：よくある質問   ================================================== */
#qa {
   padding: 10% 0;
   background-color: #fff;
}

#qa .sec-title {
   text-align: center;
   font-size: 4vw;

   margin-bottom: 5%;
}

#qa .wrapper .qa-box {
   border: solid 2px #14162B;
   border-radius: 10px;

   margin-bottom: 2%;
}

#qa .wrapper .q-box {
   display: flex;
   align-items: center;
   column-gap: 2%;

   padding: 4% 2%;
   border-radius: 6px 6px 0 0;
   background-color: #14162B;
}

#qa .wrapper .q-box p {
   color: #fff;
   font-size: 3.3vw;
   line-height: 5vw;
   letter-spacing: 0.08em;

   padding-left: 8%;

   position: relative;
}

#qa .wrapper .q-box p::before {
   content: "";
   position: absolute;

   background-image: url(../img/q-ico.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;

   width: 6.7%;
   height: 5.4vw;

   top: 0;
   left: 0;
}

#qa .wrapper .a-box {
   padding: 4% 2%;
   border-radius: 0 0 6px 6px;
}

#qa .wrapper .a-box p {
   font-size: 3vw;
   line-height: 5vw;

   padding-left: 8%;

   position: relative;
}

#qa .wrapper .a-box p::before {
   content: "";
   position: absolute;

   background-image: url(../img/a-ico.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;

   width: 6.7%;
   height: 5.4vw;

   top: 0;
   left: 0;
}

@media screen and (min-width: 700px) {
   #qa .sec-title h2 {
      font-size: 4rem;
   }

   #qa .wrapper .q-box p::before {
      height: 40px;
   }

   #qa .wrapper .q-box p {
      font-size: 2.4rem;
      line-height: 4rem;
   }

   #qa .wrapper .a-box p::before {
      height: 40px;
   }

   #qa .wrapper .a-box p {
      font-size: 2rem;
      line-height: 3.6rem;
   }
}

/* === ▲ #qa：よくある質問 ================================================== */



/* === ▼ #form：フォーム   ================================================== */
#section01 {
   background-color: #F2F7FF;
}

/* === ▲ #form：フォーム ================================================== */



/* === ▼ 追従ボタン   ================================================== */
.main-button {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 10px;
   width: 670px;
   max-width: 94%;
   margin: 0 auto;
   z-index: 100;
}

.main-button a {
   display: block;
}

.main-button img {
   display: block;
   width: 100%;
   height: auto;
   transition: opacity 0.3s ease;
}

.main-button a:hover img {
   opacity: 0.7;
}


@media screen and (max-width:767px) {

   .main-button {
      bottom: 2%;
      width: 94%;
   }

   .main-button a:hover img {
      opacity: 1;
   }

}

/* === ▲ 追従ボタン ================================================== */



/* === ▼ フッター   ================================================== */
.footer-area {
   letter-spacing: 0;
}

.footer-txt01 a {
   color: #fff;
   text-decoration: none;
   transition: color 0.3s;
   display: inline-block;
}

.footer-txt01 a:hover {
   color: #4da6ff;
}

.footer-area {
   background: #1A1A1A;
   padding: 20px 0 130px;
}

.footer-txt01 p {
   font-size: 12px;
   text-align: center;
   color: #fff;
}

.footer-txt02 p {
   font-size: 10px;
   text-align: center;
   color: #fff;
}

@media screen and (max-width:767px) {
   .footer-area {
      padding: 5% 0 20vw;
      width: 100%;
   }

   .footer-txt01 p {
      font-size: 3.5vw;
      text-align: center;
      color: #fff;
   }

   .footer-txt02 p {
      font-size: 3vw;
      text-align: center;
      color: #fff;
   }
}

/* === ▲ フッター ================================================== */