@charset "UTF-8";

// --------------------------------------------------
// 基本設定
// --------------------------------------------------

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

body {
    color: $base-font-color;
    font-size: $base-font-size;
    font-family: $base-font;
  }
  
  p,
  a,
  dt,
  dd,
  li,
  th,
  td {
    line-height: $base-line-height;
  }

img{
   width: 100%;
   vertical-align: bottom;
}


// --------------------------------------------------
// 関数
// --------------------------------------------------

// clamp　変換
@function clampVw($min, $size, $max, $vp: 1920) {
   $min: $min * 1px;
   $max: $max * 1px;
   $num: 100 / $vp * 1vw;
   $size_vw: $num * $size;
   @return clamp($min, $size_vw, $max);
}


// --------------------------------------------------
// common
// --------------------------------------------------

.l-inner{
   max-width: 1040px;
   margin: 0 auto;

   @media(max-width: $small-pc){
      width: 90%;
   }

   @media(max-width: $screen-sp){
      width: 87%;
   }
}

.l-main{
   overflow: hidden;
}

.orange{
   color: #F3923B;
}
.blue{
   color: #326EC0;
}

.section-heading{
   position: relative;
   text-align: center;

   .ja{
      font-size: 40px;
      font-weight: bold;
      line-height: 1.4;
      @media(max-width: $screen-tb){
         font-size: 30px;
      }
      @media(max-width: $screen-sp){
         font-size: 23px;
      }
   }

   .en{
      font-size: 137px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      color: $main-color;
      white-space: nowrap;
      opacity: 0.05;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: -1;
      @media(max-width: $screen-tb){
         font-size: 100px;
      }
      @media(max-width: $screen-sp){
         font-size: 80px;
      }
   }
}



// --------------------------------------------------
// アニメーション
// --------------------------------------------------


// ２段階
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;
   display: block;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1.5s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(243,146,59,0.2);
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


// フェードアップ
.fadeUp{
   animation-name:fadeUpAnime;
   animation-duration:0.5s;
   animation-fill-mode:forwards;
   opacity:0;
   animation-timing-function: ease-in-out;
   }
   
   @keyframes fadeUpAnime{
     from {
       opacity: 0;
      transform: translateY(50px);
     }
   
     to {
       opacity: 1;
      transform: translateY(0);
     }
   }

   .fadeUpTrigger{
       opacity: 0;
   }
   




// --------------------------------------------------
// index.html
// --------------------------------------------------


// header
header{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: clampVw(12, 23, 23, 1040) clampVw(24, 60, 60, 1440);

   .logo{
      flex-basis: clampVw(130, 160, 160, 1440);
   }
}

.g-navi{
   display: flex;
   justify-content: flex-end;

   ul{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: clampVw(30, 50, 50, 1440);

      @media(max-width: 1160px){
         display: none;
      }
   }

   .item a{
      color: #22232C;
      text-decoration: none;
      font-size: clampVw(14, 16, 16, 1440);
      font-weight: bold;
      line-height: 1.4;
      position: relative;
      &:hover {
         color: $main-color;
         transition: all .2s;
         &:after {
           transform: scale(1, 1);
         }
       }
       &:after {
         content: '';
         position: absolute;
         bottom: -5px;
         left: 0%;
         width: 100%;
         height: 2px;
         background:$main-color;
         transition: all .3s;
         transform: scale(0, 1);/*X方向0、Y方向1*/
         transform-origin: center top;/*上部中央基点*/
       }
   }

   .item:not(:last-child){
      margin-right: clampVw(10, 40, 40, 1440);
   }

   .btn{
      display: block;
      background-color: #19A067;
      padding: clampVw(12, 16, 16, 1040) clampVw(16, 30, 30, 1440);
      border-radius: 60px;
      color: #fff;
      font-weight: bold;
      text-decoration: none;
      font-size: clampVw(14, 16, 16, 1440);
      line-height: 1;
      border: solid 2px #19A067;
      transition: 0.3s ease-in-out;

      &:hover{
         background-color: #fff;
         color: #19A067;
      }
   }
}


// key-visual
.key-visual{
   position: relative;

   &::after{
      display: block;
      content: "";
      width: 47.396vw;
      height: clampVw(200, 680, 680, 1040);
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      background: rgb(243,146,59);
      background: linear-gradient(325deg, rgba(243,146,59,0.8) 0%, rgba(243,146,59,1) 100%);
      opacity: 0.1;
      border-radius: 10px 0 0 10px;
      @media(max-width: 1440px){
         width: 63.194vw;
      }
      @media(max-width: $small-pc) {
         width: 70%;
      }
      @media(max-width: $screen-sp){
         top: initial;
         bottom: 0;
         width: 100%;
         height: 280px;
         border-radius: 0;
      }
   }

   .l-inner{
      display: flex;
      justify-content: center;
      position: relative;
      @media(max-width: $screen-sp){
         flex-direction: column;
      }
   }

   .detail{
      padding-top: clampVw(20, 68, 68, 1040);
      max-width: clampVw(200, 493, 493, 1040);
      position: absolute;
      left: 0;
      z-index: 2;
      @media(max-width: $small-pc){
         left: clampVw(30, 50, 50, 1040);
      }
      @media(max-width: $screen-sp){
         position: initial;
         max-width: 93.7%;
         margin-bottom: 16px;
      }
   }

   h1{
      max-width: 493px;
      margin-bottom: 28px;
      @media(max-width: $screen-sp){
         margin-bottom: 14px;
      }
   }

   .checklist{
      max-width: clampVw(166, 253, 253, 1040);
      margin-bottom: 32px;
      @media(max-width: $screen-sp){
         margin-bottom: 11px;
      }
   }

   .btn{
      background-color: #19A067;
      font-weight: bold;
      border-radius: 60px;
      padding: clampVw(15, 20, 20, 1040) clampVw(25, 50, 50, 1040);
      display: block;
      color: #fff;
      text-decoration: none;
      white-space: nowrap;
      margin-bottom: clampVw(10, 30, 30, 1040);
      max-width: 320px;
      text-align: center;
      font-size: clampVw(16, 22, 22, 1040);
      font-weight: bold;
      line-height: 1;
      border: solid 2px #19A067;
      transition: 0.3s ease-in-out;
      @media(max-width: $screen-sp){
         display: none;
      }

      &:hover{
         background-color: #fff;
         color: #19A067;
      }
   }

   .attention{
      font-size: clampVw(12, 14, 14, 1040);
      font-weight: 500;
      white-space: nowrap;
   }

   .image{
      flex: 1;
      z-index: 1;
      text-align: right;
      @media(max-width: $screen-sp){
         margin: 0 calc(50% - 50vw);
      }
      
      img{
         width: clampVw(400, 806, 806, 1040);
         margin-right: clampVw(-175, -175, -100, 1040);
         @media(max-width: $screen-sp){
            width: 100%;
            margin-right: 0;
         }
      }
   }

   .en{
      font-family: 'Inter', sans-serif;
      font-size: clampVw(80, 145, 145, 1040);
      font-weight: 900;
      line-height: 1.3;
      color: $main-color;
      white-space: nowrap;
      position: absolute;
      bottom: 0;
      left: clampVw(-232, -232, -150, 1040);
      opacity: 0.05;
      z-index: 2;
      @media(max-width: $screen-sp){
         bottom: 274px;
         left: -43px;
         font-size: 70px;
         line-height: 90%;
      }
   }

   .scrool{
      position: absolute;
      left: clampVw(20, 59, 59, 1040);
      bottom: clampVw(50, 120, 120, 1040);
      transform: rotate(90deg);
      transform-origin: top left;
      display: flex;
      align-items: center;
      @media(max-width: $small-pc){
         left: 30px;
         bottom: 180px;
         left: 26px;
         bottom: 186px;
      }
      
      p{
         display: inline-block;
         line-height: 1;
         font-size: 15px;
         font-weight: 500;
         @media(max-width: $screen-sp){
            font-size: 11px;
         }
      }

      .border{
         display: inline-block;
         content: "";
         width: clampVw(70, 92, 92, 1040);
         height: 1px;
         background: #D6D6D6;
         margin-left: 20px;
         position: relative;
         @media(max-width: $screen-sp){
            margin-left: 10px;
         }
      }

      .border::after{
         content: "";
         position: absolute;
         left: 0;
         width: 35px;
         height: 1px;
         background: #22232C;
         animation: pathmove 1.4s ease-in-out infinite;
         opacity:0;
      }
   }

   @keyframes pathmove{
      0%{
         width:0;
         top:0;
         opacity: 0;
      }
      30%{
         width:30px;
         opacity: 1;
      }
      100%{
         width:0;
         left:100%;
         opacity: 0;
      }
   }
}


// worries
.worries{
   padding-bottom: 120px;
   @media(max-width: $screen-tb){
      padding-bottom: 50px;
      margin-top: 20px;
   }
   @media(max-width: $screen-sp){
      padding-top: 50px;
   }

   .l-inner{
      border: solid 4px $main-color;
      border-radius: 16px;
      padding: 40px 50px 33px;
      @media(max-width: $screen-tb){
         padding: 34px 22px;
         border-width: 3px;
         border-radius: 8px;
         padding-bottom: 10px;
      }
   }

   h2{
      font-size: 32px;
      line-height: 1.4;
      font-weight: bold;
      margin-bottom: 30px;
      text-align: center;
      @media(max-width: $screen-tb){
         font-size: 24px;
      }
      @media(max-width: $screen-sp){
         font-size: 18px;
      }
   }

   .item{
      padding-left: 130px;
      padding-top: 30px;
      padding-bottom: 30px;
      font-size: 22px;
      font-weight: bold;
      line-height: 1.6;
      position: relative;
      border-top: solid 1px #DDDDDD;
      @media(max-width: $screen-tb){
         padding-left: 60px;
         font-size: 18px;
         line-height: 1.5;
         padding-top: 24px;
         padding-bottom: 24px;
      }
      @media(max-width: $screen-sp){
         font-size: 14px;
      }

      &::before{
         display: block;
         content: "";
         background-size: contain;
         background-repeat: no-repeat;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
      }
      
      &.-item01::before{
         background-image: url(../images/page/worries_icon01.png);
         width: 60px;
         height: 67px;
         left: 40px;
         @media(max-width: $screen-tb){
            width: 36px;
            height: 40px;
            left: 7px;
         }
      }
      
      &.-item02::before{
         background-image: url(../images/page/worries_icon02.png);
         width: 49px;
         height: 57px;
         left: 46px;
         @media(max-width: $screen-tb){
            width: 30px;
            height: 33px;
            left: 10px;
         }
      }
      
      &.-item03::before{
         background-image: url(../images/page/worries_icon03.png);
         width: 59px;
         height: 59px;
         left: 41px;
         @media(max-width: $screen-tb){
            width: 36px;
            height: 38px;
            left: 7px;
         }
      }
      
      &.-item04::before{
         background-image: url(../images/page/worries_icon04.png);
         width: 54px;
         height: 54px;
         left: 43px;
         @media(max-width: $screen-tb){
            width: 35px;
            height: 35px;
            left: 7px;
         }
      }
   }
}


// first-catch
.first-catch{
   background: rgba(243,146,59,0.1);

   .detail{
      padding: 70px 0 60px;
      @media(max-width: $screen-sp){
         padding: 40px 0 65px;
      }
   }

   h3{
      color: $main-color;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 20px;
      @media(max-width: $screen-sp){
         font-size: 14px;
         margin-bottom: 14px;
      }
   }

   .list{
      margin-bottom: 20px;
   }

   .item{
      padding-left: 43px;
      font-size: 30px;
      font-weight: bold;
      line-height: 1.6;
      position: relative;
      @media(max-width: $screen-tb){
         font-size: 20px;
      }
      @media(max-width: $screen-sp){
         font-size: 18px;
         line-height: 1.3;
         margin-bottom: 14px;
      }

      &::before{
         content: "";
         background-image: url(../images/common/decora_check.png);
         background-repeat: no-repeat;
         background-size: contain;
         width: 20px;
         height: 15px;
         position: absolute;
         top: 50%;
         left: 5px;
         transform: translateY(-50%);
         @media(max-width: $screen-sp){
            top: 8px;
            transform: initial;
         }
      }
   }

   .text{
      font-size: 18px;
      font-weight: 500;
      line-height: 1.8;
      max-width: 712px;
      @media(max-width: $screen-tb){
         font-size: 14px;
      }
   }

   .image{
      position: relative;
   }

   .decora01{
      position: absolute;
      top: -60px;
      left: -76px;
      width: 188px;
      z-index: -1;
      @media(max-width: $screen-tb){
         top: -25px;
         left: -12px;
         width: 100px;
      }
   }

   .decora02{
      position: absolute;
      top: -93px;
      right: 140px;
      width: 107px;
      @media(max-width: $screen-tb){
         top: -45px;
         right: 24px;
         width: 70px;
      }
   }
}


// merit
.merit{
   padding: 147px 0;
   @media(max-width: $screen-tb){
      padding: 76px 0;
   }

   .section-heading{
      margin-bottom: 75px;
      @media(max-width: $screen-tb){
         margin-bottom: 40px;
      }
   }

   .item{
      display: flex;
      justify-content: space-between;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }

      &:not(:last-child){
         border-bottom: solid 1px #DDDDDD;
         padding-bottom: 65px;
         margin-bottom: 65px;
         @media(max-width: $screen-tb){
            border-bottom: 0;
            padding-bottom: 0;
            margin-bottom: 50px;

         }
      }
   }

   .photo{
      width: 42%;
      max-width: 440px;
      @media(max-width: $screen-tb){
         width: 100%;
         max-width: 100%;
         margin-bottom: 23px;
      }

      img{
         width: 100%;
      }
   }

   .detail{
      width: 52%;
      @media(max-width: $screen-tb){
         width: 100%;
      }
   }

   .item.-reverse{
      flex-direction: row-reverse;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }
   }

   .head{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      @media(max-width: $screen-sp){
         margin-bottom: 8px;
      }
   }

   .number{
      font-family: 'Inter', sans-serif;
      font-size: 47px;
      font-weight: bold;
      line-height: 1.4;
      color: $main-color;
      border-bottom: solid 4px $main-color;
      margin-right: 22px;
      @media(max-width: $screen-sp){
         font-size: 30px;
         margin-right: 19px;
         border-bottom: solid 3px $main-color;
      }
   }

   h3{
      font-size: 26px;
      font-weight: bold;
      line-height: 1.4;
      @media(max-width: $screen-sp){
         font-size: 17px;
      }

      mark{
         background-color: rgba(243,203,59,0.6);
         padding: 0 5px;
      }
   }

   .read{
      font-size: 18px;
      font-weight: 400;
      line-height: 1.6;
      margin-bottom: 38px;
      @media(max-width: $screen-sp){
         font-size: 15px;
         margin-bottom: 24px;
      }
   }
}

.thema-list{

   > p{
      width: 130px;
      background-color: #1E1E1E;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      line-height: 1.4;
      padding: 5px 12px;
      border-radius: 10px 10px 0 0;
      position: relative;
      margin-bottom: -1px;
      @media(max-width: $screen-sp){
         font-size: 12px;
         padding: 4px 10px;
         width: 94px;
      }

      &::after{
         display: block;
         content: "";
         width: 6px;
         height: 6px;
         background-color: #19A067;
         border-radius: 50%;
         position: absolute;
         top: 50%;
         right: 12px;
         transform: translateY(-50%);
      }
   }

   .list{
      background-color: #1E1E1E;
      padding: 24px;
      border-radius: 0 10px 10px 10px;
      @media(max-width: $screen-sp){
         padding: 16px 12px;
      }
   }

   li{
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.6;
      position: relative;
      padding-left: 34px;
      @media(max-width: $screen-sp){
         padding-left: 27px;
         font-size: 13px;
      }

      &::before{
         display: block;
         color:  #AFAFAF;
         font-size: 18px;
         font-weight: 500;
         line-height: 1.6;
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%);
         @media(max-width: $screen-sp){
            font-size: 13px;
         }
      }
      
      &.number01::before{
         content: "1";
      }
      
      &.number02::before{
         content: "2";
      }
      
      &.number03::before{
         content: "3";
      }
   }
}


// program
.program{
   padding-bottom: 105px;
   @media(max-width: $screen-tb){
      padding-bottom:  50px;
   }
   @media(max-width: $screen-sp){
      padding-bottom: 24px;
   }

   .section-heading{
      margin-bottom: 93px;
      @media(max-width: $screen-sp){
         margin-bottom: 43px;
      }
   }

   .list{
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }
   }

   .item{
      width: 30.7%;
      border: solid 1px #DDDDDD;
      border-radius: 10px;
      padding: 40px 30px 30px;
      position: relative;
      @media(max-width: $screen-tb){
         width: 100%;
         margin-bottom: 40px;
         padding: 42px 24px 24px;
      }
      @media(max-width: $screen-sp){
         margin-bottom: 26px;
      }
   }

   .number{
      font-size: 35px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      color: $main-color;
      line-height: 1.4;
      border-bottom: solid 3px $main-color;
      position: absolute;
      top: -26px;
      left: 15px;
      @media(max-width: $screen-tb){
         font-size: 45px;
         top: -35px;
      }
      @media(max-width: $screen-sp){
         font-size: 34px;
         top: -22px;
      }
   }

   .photo{
      width: 100%;
      margin-bottom: 20px;
   }

   h3{
      font-size: 22px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 8px;
      text-align: center;
      @media(max-width: $screen-sp){
         font-size: 18px;
         margin-bottom: 5px;
      }
   }

   .read{
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      text-align: justify;
      @media(max-width: $screen-sp){
         font-size: 15px;
      }
   }
}


// voice-user
.voice-user{
   padding: 107px 0 60px;
   background: rgba(243,146,59,0.1);
   @media(max-width: $screen-tb){
      padding: 56px 0;
   }
   @media(max-width: $screen-sp){
      padding: 56px 0 30px;
   }

   .section-heading{
      margin-bottom: 85px;
      @media(max-width: $screen-tb){
         margin-bottom: 33px;
      }
   }

   .list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }
   }

   .item{
      width: 48%;
      background-color: #fff;
      padding: 35px 30px;
      margin-bottom: 45px;
      display: flex;
      position: relative;
      @media(max-width: $screen-tb){
         width: 100%;
         padding: 26px 20px;
         margin-bottom: 26px;
      }
      @media(max-width: $screen-sp){
         padding: 20px 20px 26px;
      }

      &.-p50{
         padding-top: 50px;
         padding-bottom: 50px;
         @media(max-width: $screen-tb){
            padding-top: 26px;
            padding-bottom: 26px;
         }
      }

      &.even{
         border-radius: 10px 10px 10px 0;

         &::after{
            content: "";
            width: 28px;
            height: 24px;
            clip-path: polygon(0 0, 100% 0, 0 100%);
            background-color: #fff;
            position: absolute;
            bottom: -24px;
            left: 0;
            @media(max-width: $screen-tb){
               width: 20px;
               height: 16px;
               bottom: -16px;
            }
         }
      }

      &.odd{
         border-radius: 10px 10px 0 10px;
         margin-top: -45px;
         @media(max-width: $screen-tb){
            margin-top: 0;
         }

         &::after{
            content: "";
            width: 28px;
            height: 24px;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            background-color: #fff;
            position: absolute;
            bottom: -24px;
            right: 0;
            @media(max-width: $screen-tb){
               width: 20px;
               height: 16px;
               bottom: -16px;
            }
         }
      }

      &:nth-of-type(2){
         margin-top: 80px;
         @media(max-width: $screen-tb){
            margin-top: 0;
         }
      }
   }

   .photo{
      width: 65px;
      margin-right: 22px;
      @media(max-width: $screen-sp){
         width: 44px;
         margin-right: 17px;
      }
   }

   .detail{
      flex: 1;
   }

   .name{
      font-size: 18px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 10px;
      @media(max-width: $screen-sp){
         font-size: 13px;
      }
   }

   .comment{
      font-size: 20px;
      font-weight: 400;
      line-height: 1.6;
      @media(max-width: $screen-sp){
         font-size: 14px;
      }
   }
}


// cta
.cta{
   background-image: url(../images/page/cta_bgphoto.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 60px 30px;
   @media(max-width: $screen-tb){
      background-image: url(../images/page/cta_bgphoto_sp.jpg);
      padding: 40px 20px;
   }

   .content{
      padding: 30px 50px;
      background-color: #fff;
      border-radius: 10px;
      text-align: center;
      @media(max-width: $screen-tb){
         padding: 23px 30px;
      }
   }

   .heading{
      font-size: 41px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 20px;
      @media(max-width: $screen-tb){
         font-size: 32px;
      }
      @media(max-width: $screen-sp){
         font-size: 20px;
         margin-bottom: 8px;
      }
   }

   .btn{
      display: inline-block;
      background-color: #19A067;
      color: #fff;
      font-size: 25px;
      font-weight: bold;
      line-height: 1;
      padding: 20px 60px;
      border-radius: 60px;
      text-align: center;
      text-decoration: none;
      margin-bottom: 35px;
      transition: 0.3s ease-in-out;
      @media(max-width: $screen-tb){
         font-size: 20px;
      }
      @media(max-width: $screen-sp){
         font-size: 16px;
         margin-bottom: 12px;
         padding: 13px 28px;
      }

      &:hover{
         transform: scale(1.05);
      }

      span::before{
         display: inline-block;
         content: "";
         background-image: url(../images/common/icon_mail.png);
         background-repeat: no-repeat;
         background-size: contain;
         width: 28px;
         height: 20px;
         margin-right: 10px;
         @media(max-width: $screen-sp){
            margin-right: 8px;
            width: 20px;
            height: 14px;
         }
      }
   }

   .attention{
      font-size: 16px;
      font-weight: 500;
      line-height: 1.6;
      @media(max-width: $screen-sp){
         font-size: 11px;
      }
   }
}



// about
.about{
   padding: 95px 0 170px;
   @media(max-width: $screen-tb){
      padding: 50px 0;
   }

   .l-inner{
      border: solid 4px $main-color;
      border-radius: 10px;
      padding: 100px 50px 75px;
      @media(max-width: $screen-tb){
         padding: 46px 20px 40px;
      }
   }

   .section-heading{
      margin-bottom: 85px;
      @media(max-width: $screen-tb){
         margin-bottom: 33px;
      }
   }

   .list{
      border-top: solid 1px #DDDDDD;
      margin-bottom: 140px;
      position: relative;
      @media(max-width: $screen-tb){
         border-top: 0;
         margin-bottom: 48px;
      }

      &::after{
         content: "";
         background-image: url(../images/page/about_vector.png);
         background-repeat: no-repeat;
         background-size: contain;
         width: 180px;
         height: 64px;
         position: absolute;
         bottom: -104px;
         left: 50%;
         transform: translateX(-50%);
         @media(max-width: $screen-tb){
            width: 135px;
            bottom: -48px;
         }
      }
   }

   .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px 0;
      border-bottom: solid 1px #DDDDDD;
      @media(max-width: $screen-tb){
         display: block;
         padding: 0 0 40px;
         border-bottom: 0;
      }
   }

   .photo{
      width: 40%;
      margin-right: 60px;
      @media(max-width: $screen-tb){
         width: 100%;
         margin-right: 0;
         margin-bottom: 18px;
      }
   }

   .detail{
      width: 53%;
      @media(max-width: $screen-tb){
         width: 100%;
      }

      h3{
         font-size: 26px;
         font-weight: bold;
         line-height: 1.4;
         margin-bottom: 20px;
         @media(max-width: $screen-sp){
            font-size: 20px;
            margin-bottom: 13px;
         }
   
         mark{
            background-color: rgba(243,203,59,0.6);
            padding: 0 5px;
         }
      }

      p{
         font-size: 18px;
         font-weight: 400;
         line-height: 1.6;
         text-align: justify;
         @media(max-width: $screen-sp){
            font-size: 15px;
         }
      }
   }

   .-reverse{
      flex-direction: row-reverse;

      .photo{
         margin-right: 0;
         margin-left: 60px;
         @media(max-width: $screen-tb){
            margin-left: 0;
         }
      }
   }

   .subtitle{
      text-align: center;

      small{
         display: block;
         font-size: 25px;
         font-weight: bold;
         line-height: 1.6;
         margin-bottom: 13px;
         @media(max-width: $screen-tb){
            font-size: 18px;
         }
         @media(max-width: $screen-sp){
            font-size: 14px;
            margin-bottom: 12px;
         }
      }

      strong{
         display: block;
         font-size: 40px;
         font-weight: bold;
         line-height: 1.4;
         @media(max-width: $screen-tb){
            font-size: 30px;
         }
         @media(max-width: $screen-sp){
            font-size: 20px;
         }
      }
   }
}


// voice-user
.voice-senpai{
   padding: 107px 0 60px;
   background: rgba(243,146,59,0.1);
   @media(max-width: $screen-tb){
      padding: 50px 0;
   }
   @media(max-width: $screen-sp){
      padding: 40px 0
   }

   .section-heading{
      margin-bottom: 75px;
      @media(max-width: $screen-tb){
         margin-bottom: 40px;
      }
      @media(max-width: $screen-sp){
         margin-bottom: 20px;
      }
   }

   .list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }
   }

   .item{
      width: 48%;
      background-color: #fff;
      padding: 30px;
      margin-bottom: 40px;
      border-radius: 10px;
      @media(max-width: $screen-tb){
         width: 100%;
         margin-bottom: 12px;
      }
      @media(max-width: $screen-sp){
         padding: 20px;
      }
   }

   
   .head{
      display: flex;
   }

   .photo{
      width: 90px;
      margin-right: 22px;
      @media(max-width: $screen-sp){
         width: 60px;
         margin-right: 16px;
      }
   }

   .detail {
      max-width: 328px;
      @media(max-width: $small-pc){
         width: 100%;
         max-width: 100%;
      }
      @media(max-width: $screen-tb){
         width: 100%;
         max-width: 100%;
      }
   }

   .position{
      font-size: 18px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 10px;
      @media(max-width: $screen-sp){
         font-size: 15px;
         margin-bottom: 3px;
      }
   }

   .income{
      font-size: 18px;
      font-weight: bold;
      line-height: 1.6;
      @media(max-width: $screen-sp){
         font-size: 14px;
      }

      strong{
         font-size: 27px;
         display: inline-block;
         margin-left: 10px;
         @media(max-width: $screen-sp){
            font-size: 18px;
         }
      }
   }

   .comment{
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      @media(max-width: $screen-sp){
         font-size: 13px;
      }
   }
}


// flow
.flow{
   padding: 147px 0 0;
   @media(max-width: $screen-tb){
      padding: 56px 0 0;
   }

   .section-heading{
      margin-bottom: 92px;
      @media(max-width: $screen-tb){
         margin-bottom: 37px;
      }
   }

   .list{
      display: flex;
      justify-content: space-between;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }
   }

   .item{
      width: 30.7%;
      text-align: center;
      border: solid 1px #DDDDDD;
      border-radius: 10px;
      padding: 60px 30px;
      position: relative;
      @media(max-width: $screen-tb){
         width: 100%;
         margin-bottom: 33px;
         display: flex;
         align-items: center;
         text-align: left;
         padding: 35px 20px 35px 30px;
      }
      @media(max-width: $screen-sp){
         padding: 22px 20px 22px 32px;
      }

      &:not(:last-child):after{
         content: '';
         background-image: url(../images/page/flow_vector.png);
         background-repeat: no-repeat;
         background-size: contain;
         width: 14px;
         height: 24px;
         position: absolute;
         top: 50%;
         right: -34px;
         transform: translateX(-50%);
         @media(max-width: $screen-tb){
            top: initial;
            right: 50%;
            bottom: -40px;
            transform: translateY(-50%) rotate(90deg);
         }
      }
   }

   .number{
      font-size: 35px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      color: $main-color;
      line-height: 1.4;
      border-bottom: solid 3px $main-color;
      position: absolute;
      top: -26px;
      left: 15px;
      @media(max-width: $screen-tb){
         display: none;
      }
   }

   .icon{
      margin-bottom: 52px;
      @media(max-width: $screen-tb){
         margin-bottom: 0;
         margin-right: 28px;
      }

      &.-i01{
         width: 64px;
         @media(max-width: $screen-tb){
            width: 40px;
         }
      }

      &.-i02{
         width: 74px;
         @media(max-width: $screen-tb){
            width: 50px;
         }
      }

      &.-i03{
         width: 74px;
         @media(max-width: $screen-tb){
            width: 45px;
         }
      }
   }

   h3{
      font-size: 22px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 8px;
      @media(max-width: $screen-sp){
         font-size: 16px;
         margin-bottom: 3px;
      }
   }

   .read{
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      @media(max-width: $screen-sp){
         font-size: 14px;
      }
   }
}


// faq
.faq{
   padding: 214px 0 147px;
   @media(max-width: $screen-tb){
      padding: 56px 0 40px;
   }
   @media(max-width: $screen-sp){
      padding: 23px 0 40px;
   }

   .section-heading{
      margin-bottom: 75px;
      @media(max-width: $screen-tb){
         margin-bottom: 37px;
      }
   }

   .list{
      border-top: solid 1px #DDDDDD;
   }

   .item{
      padding: 25px 25px 35px 70px;
      border-bottom: solid 1px #DDDDDD;
      @media(max-width: $screen-tb){
         padding: 25px 25px 25px 70px;
      }
      @media(max-width: $screen-sp){
         padding: 15px 6px 15px 33px;
      }
   }

   h3{
      font-size: 20px;
      font-weight: bold;
      line-height: 1.4;
      position: relative;
      margin-bottom: 16px;
      @media(max-width: $screen-sp){
         font-size: 16px;
         margin-bottom: 5px;
      }

      &::before{
         display: block;
         content: "Q";
         font-family: 'Inter', sans-serif;
         font-size: 30px;
         font-weight: bold;
         line-height: 1;
         color: $main-color;
         position: absolute;
         top: 0;
         left: -44px;
         @media(max-width: $screen-sp){
            font-size: 22px;
            left: -27px;
         }
      }
   }

   .read{
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      @media(max-width: $screen-sp){
         font-size: 14px;
      }
   }
}


// overview
.overview{
   padding: 80px 0 100px;
   background-color: #F8F8F8;
   @media(max-width: $screen-tb){
      padding: 50px 0;
   }

   h2{
      font-size: 40px;
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 50px;
      text-align: center;
      @media(max-width: $screen-tb){
         font-size: 30px;
      }
      @media(max-width: $screen-sp){
         font-size: 24px;
         margin-bottom: 22px;
      }
   }

   .content{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      @media(max-width: $screen-tb){
         flex-direction: column;
      }
   }

   .photo{
      width: 48%;
      @media(max-width: $screen-tb){
         width: 100%;
         margin-bottom: 22px;
      }
   }

   .detail{
      width: 47.6%;
      @media(max-width: $screen-tb){
         width: 100%;
      }
   }

   dl{
      display: flex;
      align-items: flex-start;
      border-bottom: solid 1px #D7D7D7;
      padding-bottom: 25px;
      @media(max-width: $screen-sp){
         padding-bottom: 24px;
      }

      &:not(:last-child){
         margin-bottom: 25px;
         @media(max-width: $screen-sp){
            margin-bottom: 24px;
         }
      }

      dt,dd{
         font-size: 16px;
         line-height: 1.4;
         @media(max-width: $screen-sp){
            font-size: 15px;
         }
      }

      dt{
         width: 76px;
         font-weight: bold;
         margin-right: 35px;
         @media(max-width: $screen-sp){
            width: 60px;
            margin-right: 26px;
         }
         
      }

      dd{
         font-weight: 400;
         flex: 1;
      }

      small{
         display: block;
         font-size: 14px;
      }
   }
}

// contact-form
.contact-form{
   background-color: #fff;
   padding-top: 100px;
   @media(max-width: $screen-tb){
      padding-top: 50px;
   }
   

   .l-inner{
      background-color: #fff;
      border-radius: 10px;
      padding: 70px 70px 80px;
      @media(max-width: $screen-tb){
         padding: 34px 20px 40px;
      }
   }

   h2{
      font-size: 40px;
      font-weight: bold;
      line-height: 1.4;
      text-align: center;
      margin-bottom: 50px;
      @media(max-width: $screen-tb){
         font-size: 22px;
         margin-bottom: 24px;
      }
   }

   .item{
      margin-bottom: 50px;
      @media(max-width: $screen-tb){
         margin-bottom: 24px;
      }
   }

   label{
      font-size: 20px;
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 15px;
      display: block;
      @media(max-width: $screen-tb){
         font-size: 15px;
         margin-bottom: 12px;
      }
   }

   input,
   select{
      height: 60px;
      border: solid 1px #DDDDDD;
      border-radius: 5px;
      padding: 19px 23px;
      @media(max-width: $screen-tb){
         height: 46px;
         padding: 12px;
      }
   }

   input[type="checkbox"],input[type="radio"] {
      margin: 0;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    input[type="checkbox"] {
      height: auto;
    }
    /* チェックボックスデザイン */
   input[type="checkbox"] {
   cursor: pointer;
   padding-left: 30px;/*label手前にチェックボックス用の余白を開ける*/
   vertical-align: 6px;
   position: relative;
 }

 input[type="checkbox"]::before,
 input[type="checkbox"]::after {
   content: "";
   display: block; 
   position: absolute;
 }

 input[type="checkbox"]::before {
   background-color: #fff;
   border-radius: 2px;
   border: 1px solid #E6E8EC;
   width: 20px;/*チェックボックスの横幅*/
   height: 20px;/*チェックボックスの縦幅*/
   transform: translateY(-50%);
   top: 50%;
   left: 5px;
 }

 input[type="checkbox"]::after {
   border-bottom: 2px solid #0070FA;/*チェックの太さ*/
   border-left: 2px solid #0070FA;/*チェックの太さ*/
   opacity: 0;/*チェック前は非表示*/
   height: 6px;/*チェックの高さ*/
   width: 11px;/*チェックの横幅*/
   transform: rotate(-45deg);
   top: -5px;/*チェック時の位置調整*/
   left: 10px;/*チェック時の位置調整*/
 }

 input[type="checkbox"]:checked::after {
   opacity: 1;/*チェック後表示*/
 }

   .radio{
      cursor: pointer;
      display: inline-block;
      background-color: #F4F4F4;
      border: solid 1px #E6E8EC;
      padding: 12px 15px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      margin-right: 15px;
      margin-bottom: 15px;
      @media(max-width: $screen-tb){
         padding: 10px 8px ;
         margin-right: 10px;
         margin-bottom: 10px;
         font-size: 13px;
      }

      input[type="radio"]{
         width: 16px;
         height: 16px;
         border-radius: 100px;
         position: relative;
         margin-right: 8px;
         @media(max-width: $screen-tb){
            margin-right: 4px;
         }
      }

      input[type="radio"]::before,
      input[type="radio"]::after{
         content: "";
         display: block;
         border-radius: 50%;
         position: absolute;
         transform: translateY(-50%);
         top: 55%;
       }

       input[type="radio"]::before {
         background-color: #fff;
         border: solid 1px #D9D9D9;
         height: 20px;
         width: 20px;
         left: 0px;
         @media(max-width: $screen-tb){
            width: 16px;
            height: 16px;
         }
       }
       input[type="radio"]::after {
         background-color: #0070FA;
         opacity: 0;
         height: 12px;
         width: 12px;
         left: 4px;
       }
       input[type="radio"]:checked::after {
         opacity: 1;
       }
   }

   .date{
      .flex{
         @media(max-width: $screen-tb){
            display: flex;
            justify-content: space-between;
         }
         .radio{
            @media(max-width: $screen-tb){
               width: 48%;
               margin-right: 0;
            }
         }
      }
   }

   .name{
      display: flex;
      justify-content: space-between;

      > div{
         width: 48%;
      }

      input{
         width: 100%;
      }
   }

   .age{
      .selectbox{
         @media(max-width: $screen-tb){
            width: 100%;
            max-width: 230px;
         }
      }
      select{
         @media(max-width: $screen-tb){
            width: 100%;
         }
      }
   }

   .selectbox{
      position: relative;
      display: inline-block;

      &::after {  /* 疑似要素の設定 */
         content: "";
         position: absolute;
         top: 50%;
         right: 30px;
         transform: translateY(-50%);
         width:11px;
         height:6px;
         background-image: url(../images/common/icon_vector_bottom.png);
         background-size: contain;
         background-position: center center;
         background-repeat: no-repeat;
         @media(max-width: $screen-sp){
            right: 18px;
         }
     }

      select {
         -webkit-appearance: none;
         appearance: none;
         padding: 20px 95px 20px 20px;
         @media(max-width: $screen-tb){
            padding: 12px;
         }
      }
       
       select::-ms-expand {
         display: none;
       }
   }

   .tel,
   .mail{
      input{
         max-width: 425px;
         width: 100%;
      }
   }

   .background{
      margin-bottom: 25px;
   }

   .attention{
      font-size: 14px;
      font-weight: 400;
      line-height: 1.9;
      margin-bottom: 52px;
      @media(max-width: $screen-tb){
         font-size: 12px;
         margin-bottom: 30px;
      }

      a{
         color: #1875CA;
      }
   }

   .submit{
      text-align: center;

      input{
         background-color: #19A067;
         padding: 24px 50px;
         border-radius: 60px;
         color: #fff;
         font-size: 23px;
         font-weight: bold;
         line-height: 1;
         height: auto;
         border: solid 2px #19A067;
         transition: 0.3s ease-in-out;
         @media(max-width: $screen-tb){
            font-size: 16px;
            padding: 20px 40px;
         }
   
         &:hover{
            background-color: #fff;
            color: #19A067;
         }
      }
   }
}


.fixed-cta{
   position: fixed;
   right: 40px;
   bottom: 40px;
   @media(max-width: $screen-sp){
      padding: 16px 24px;
      right: 50%;
      bottom: 10px;
      transform: translateX(50%);
   }

   &.is-hidden{
      transition: all 0.3s;
      opacity: 0;
   }


   a{
      display: block;
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      color: #fff;
      text-decoration: none;
      white-space: nowrap;
      background-color: #19A067;
      max-width: 240px;
      padding: 18px 30px;
      border-radius: 60px;
      transition: 0.3s ease-in-out;
      @media(max-width: $screen-sp){
         font-size: 14px;
      }

      &:hover{
         transform: scale(1.05);
      }
   }
}


footer{
   background-color: #22232C;
   padding: 50px 0 80px;
   margin-top: -1px;
   @media(max-width: $screen-sp){
      padding: 36px 0 60px;
   }

   .sns{
      display: flex;
      justify-content: center;
      margin-bottom: 20px;

      a{
         display: block;
         border-radius: 50px;
         border: solid 1px rgba(255,255,255,0.2);
         width: 54px;
         height: 54px;
         display: flex;
         justify-content: center;
         align-items: center;
         @media(max-width: $screen-sp){
            width: 44px;
            height: 44px;
         }
      }

      a:not(:last-child){
         margin-right: 20px;
         @media(max-width: $screen-sp){
            margin-right: 18px;
         }
      }

      .twitter{
         width: 25px;
         @media(max-width: $screen-sp){
            width: 20px;
         }
      }

      .facebook{
         width: 12px;
         @media(max-width: $screen-sp){
            width: 9;
         }
      }

      .instagram{
         width: 25px;
         @media(max-width: $screen-sp){
            width: 20px;
         }
      }
   }

   .copyright{
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      text-align: center;
   }
}


@media only screen and (max-width: $screen-tb) {
}

@media only screen and (max-width: $screen-sp) {
}