@charset "UTF-8";
 .box-border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
 .disp-flex {
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    display: flexbox;
    display: -webkit-box;
    display: flex;
}
 .font-mincho {
    font-family: 'Noto Serif JP', "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
 .bg-cover {
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-position: center;
}

body{
   padding-top: 0!important;
}

a:hover{
   opacity: 0.8;
}

.lp-header{
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 999;
   border-bottom: 0;
   .header-top{
      display: flex;
      align-items: center;
      padding: 20px 30px;
      box-shadow: none;
      @media only screen and (max-width: 640px) {
         padding: 20px 15px;
      }
   }

   .logo{
      position: relative;
      z-index: 999;
      img{
         @media only screen and (max-width: 640px) {
            width: 82px;
         }
      }
   }

   .nav{
      font-size: 1.6rem;
      display: flex;
      gap: 30px;
      @media only screen and (max-width: 1300px) {
         font-size: 1.4rem;
         gap: 20px;
      }
      @media only screen and (max-width: 1200px) {
         font-size: 1.3rem;
      }
      @media only screen and (max-width: 1100px) {
         margin-right: 65px;
      }
      @media only screen and (max-width: 640px) {
         display: none;
      }

      li{
         @media only screen and (max-width: 1100px) {
            display: none;
         }
      }

      a{
         color: #fff;
      }
   }

   .h-enbtn{
      @media only screen and (max-width: 1100px) {
         display: block!important;
      }
      a{
         font-size: 1.4rem;
         color: #fff;
         border-radius: 30px;
         padding: 10px 32px;
         background: #212020;
         @media only screen and (max-width: 1300px) {
            font-size: 1.3rem;
         }
         @media only screen and (max-width: 1200px) {
            font-size: 1.2rem;
         }
      }
   }

   .hamburger-menu{
      top: 15px;
      right: 15px;
      background: transparent;
      width: 70px;
      height: 70px;
      @media only screen and (max-width: 640px) {
         width: 65px;
         height: 65px;
         top: 5px;
         right: 10px;
      }
      @media only screen and (min-width: 1101px) {
         display: none;
      }

      .hamburger-menu__bar{
         width: 32px;
         height: 1px;
         left: auto;
         right: 0;
      }
   }

   .navigation__list{
      grid-template-rows: repeat(4, auto);
      margin-bottom: 80px;
      @media only screen and (max-width: 640px) {
         display: block;
         margin-bottom: 40px;
      }
   }

   .navigation__list-item:nth-child(5){
      border-top: 1px solid #C2C2C2;
      @media only screen and (max-width: 640px) {
         border-top: 0;
      }
   }
   .navigation__list-item:nth-child(6){
      border-bottom: 0;
   }

   .navigation-menu{
      background-color: #ECECEC;

      .navigation__list-item:first-child{
         border-top: 1px solid #C2C2C2;
      }

      .navigation__list-item{
         border-bottom: 1px solid #C2C2C2;

         a{
            color: #212020;
         }
      }

      .h-entry-btn{
         border-bottom: 0;
         padding: 0;

         a{
            width: 80%;
            display: block;
            text-align: center;
            color: #fff;
            font-size: 1.6rem;
            border-radius: 50px;
            background-color: #212020;
            padding: 20px 0;
            margin: 0 auto 100px;
         }
      }
   }
}

.lp-header.scrolled {
  background-color: rgba(255, 255, 255, 0.9); /* 好きな色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけるなら */

  a{
   color: #212020;
  }

  .h-enbtn{
      a{
      color: #fff;
     }
  }

  .hamburger-menu__bar{
      background: #212020;
  }
}

.mainVisual{
   position: relative;
   img{
      width: 100%;
   }
   .pc{
      @media only screen and (max-width: 768px) {
         display: none;
      }
   }

   .sm{
      @media only screen and (min-width: 769px) {
         display: none;
      }
   }

   .main-text{
      position: absolute;
      bottom: 150px;
      font-size: 5.4rem;
      font-weight: bold;
      left: 130px;
      letter-spacing: 5px;
      @media only screen and (max-width: 1400px) {
         font-size: 4.4rem;
          bottom: 60px;
         left: 45px;
      }
      @media only screen and (max-width: 1000px) {
         font-size: 3.6rem;
      }
      @media only screen and (max-width: 768px) {
         font-size: 4.4rem;
         left: 10px;
      }
      @media only screen and (max-width: 640px) {
         font-size: 2.6rem;
      }

      span{
         display: inline-block;
         background: #fff;
         padding: 19px 25px;
         margin-bottom: 35px;
         @media only screen and (max-width: 1200px) {
            margin-bottom: 15px;
            padding: 8px 12px;
         }
      }

      span:last-child{
         margin-bottom: 0;
      }
   }

   .main-text-pc{
      @media only screen and (max-width: 1200px) {
         display: none;
      }
   }

   .main-text-sm{
      @media only screen and (min-width: 1201px) {
         display: none;
      }
   }

   .subtext{
      position: absolute;
      font-size: 2.6rem;
      font-weight: bold;
      top: 180px;
      right: 160px;
      display: flex;
      flex-direction: row-reverse;
      gap: 25px;
      @media only screen and (max-width: 1300px) {
         font-size: 2rem;
         gap: 15px;
         top: 100px;
         right: 100px;
      }
      @media only screen and (max-width: 768px) {
         font-size: 2.6rem;
         gap: 12px;
         right: 45px;
      }
      @media only screen and (max-width: 640px) {
         font-size: 1.6rem;
         top: 112px;
      }
      span{
         color: #fff;
         writing-mode: vertical-rl;   /* 文字を縦に右→左 */
         -webkit-writing-mode: vertical-rl; /* Safari対応 */
         text-orientation: upright;   /* 文字を回転させず upright */
         -webkit-text-orientation: upright; /* Safari対応 */
         letter-spacing: 10px;
      }
   }
}

.lp-page{
   .heading-c-box{
      text-align: center;
      padding-bottom: 80px;
      @media only screen and (max-width: 768px) {
         padding-bottom: 40px;
      }

      .en-title{
         font-size: 7rem;
         font-weight: bold;
         margin-bottom: 15px;
         letter-spacing: 5px;
         @media only screen and (max-width: 768px) {
            font-size: 3.8rem;
         }
      }

      h2{
         font-size: 2rem;
         font-weight: 400;
         @media only screen and (max-width: 768px) {
            font-size: 1.4rem;
         }
      }
   }

   .heading-box{
      .en-title{
         font-size: 7rem;
         font-weight: bold;
         margin-bottom: 15px;
         letter-spacing: 5px;
         @media only screen and (max-width: 768px) {
            font-size: 3.8rem;
         }
      }

      h2{
         font-size: 2rem;
         font-weight: 400;
         @media only screen and (max-width: 768px) {
            font-size: 1.4rem;
         }
      }
   }

   .pc{
      @media only screen and (max-width: 768px) {
         display: none;
      }
   }

   .sm{
      @media only screen and (min-width: 769px) {
         display: none;
      }
   }
}

.deco{
   position: relative;
}

.deco:before{
   content: "";
   width: 720px;
   height: 70px;
   background-color: #ECECEC;
   position: absolute;
   top: -70px;
   left: 0;
   @media only screen and (max-width: 1100px) {
      width: 360px;
   }
   @media only screen and (max-width: 768px) {
      width: 125px;
      height: 30px;
      top: -30px;
   }
}

#vision{
   padding: 150px 0 260px;
   @media only screen and (max-width: 1300px) {
      padding-bottom: 130px;
   }
   @media only screen and (max-width: 1100px) {
      padding: 85px 0 75px;
   }

   .flex{
      display: flex;
      position: relative;
      margin-bottom: 80px;
      @media only screen and (max-width: 1300px) {
         margin-bottom: 180px;
      }
      @media only screen and (max-width: 1100px) {
         display: block;
         margin-bottom: 40px;
      }

      .pic{
         width: 46%;
         position: relative;
         z-index: 1;
         @media only screen and (max-width: 1100px) {
            width: 90%;
         }

         img{
            width: 100%;
         }

         .inner{
            position: absolute;
            top: 40px;
            left: 40px;
            @media only screen and (max-width: 768px) {
               top: 20px;
               left: 20px;
            }

            .num{
               color: #fff;
               font-size: 13rem;
               font-weight: bold;
               font-family: "Roboto", sans-serif;
               margin-bottom: 15px;
               @media only screen and (max-width: 768px) {
                  font-size: 5.2rem;
               }
            }

            .heading{
               font-size: 3rem;
               @media only screen and (max-width: 768px) {
                  font-size: 2rem;
               }
               span{
                  background: #fff;
                  padding: 10px 15px;
                  display: inline-block;
                  margin-bottom: 10px;
                  @media only screen and (max-width: 768px) {
                     padding: 6px 8px;
                     margin-bottom: 8px;
                  }
               }
            }

            .pc{
               @media only screen and (max-width: 1300px) {
                  display: none;
               }

               span{
                  margin-bottom: 0;
               }
            }

            .sm{
               display: block;
               @media only screen and (min-width: 1301px) {
                  display: none;
               }
            }
         }
      }

      .text-box{
         position: absolute;
         width: 57%;
         background: #fff;
         padding: 28px;
         box-sizing: border-box;
         right: 90px;
         top: 200px;
         z-index: 2;
         @media only screen and (max-width: 1100px) {
            position: relative;
            width: 96%;
            top: -25px;
            right: 0;
            margin-left: auto;
            padding: 20px;
         }

         p{
            font-size: 1.6rem;
            font-weight: 300;
            margin-bottom: 20px;
            line-height: 2;
            @media only screen and (max-width: 768px) {
               font-size: 1.3rem;
            }
         }  

         p:last-child{
            margin-bottom: 0;
         }
      }
   }

   .even-box{
      @media only screen and (max-width: 1100px) {
         display: flex;
         flex-direction: column;
      }
      .pic{
         margin-left: auto;
         @media only screen and (max-width: 1100px) {
            order: 1;
         }

         .inner{
            text-align: right;
            left: auto;
            right: 40px;
            @media only screen and (max-width: 768px) {
               right: 20px;
            }
         }
      }

      .text-box{
         left: 90px;
         right: auto;
         @media only screen and (max-width: 1100px) {
            left: 0;
            order: 2;
            margin-left: 0;
         }
      }
   }
}

#message{
   background-color: #ECECEC;
   padding: 105px 0 180px;
   @media only screen and (max-width: 768px) {
      padding: 35px 0;
   }

   .wrap{
      padding-left: 120px;
      @media only screen and (max-width: 1250px) {
         padding-left: 50px;
      }
      @media only screen and (max-width: 1000px) {
         padding-left: 30px;
      }
      @media only screen and (max-width: 850px) {
         padding-left: 0;
         width: 90%;
         margin: 0 auto;
      }

      .flex{
         display: flex;
         gap: 75px;
         margin-top: 45px;
         @media only screen and (max-width: 1000px) {
            gap: 40px;
         }
         @media only screen and (max-width: 850px) {
            flex-direction: column;
            gap: 20px;
         }

         .pic{
            width: 45%;
            @media only screen and (max-width: 850px) {
               width: 100%;
               order: 1;
            }
            img{
               width: 100%;
            }
         }

         .text-box{
            width: 50%;
            @media only screen and (max-width: 850px) {
               width: 100%;
               order: 2;
            }
            h3{
               font-size: 3.6rem;
               font-weight: bold;
               padding: 15px 20px;
               background-color: #fff;
               display: inline-block;
               margin-bottom: 45px;
               @media only screen and (max-width: 1250px) {
                  font-size: 3rem;
               }
               @media only screen and (max-width: 1000px) {
                  font-size: 2.6rem;
                  margin-bottom: 22px;
               }
               @media only screen and (max-width: 768px) {
                  font-size: 2.2rem;
                  padding: 8px 10px;
               }
            }

            p{
               font-size: 1.6rem;
               font-weight: 300;
               margin-bottom: 30px;
               line-height: 2;
               @media only screen and (max-width: 1000px) {
                  font-size: 1.4rem;
               }
            }

            .name{
               font-size: 2rem;
               font-weight: bold;
               margin-tpo: 15px;
               @media only screen and (max-width: 1000px) {
                  font-size: 1.6rem;
               }
            }
         }
      }
   }
}

#work-scenes{
   padding: 170px 0 230px;
   @media only screen and (max-width: 768px) {
      padding: 65px 0 115px;
   }

   .pic{
      img{
         width: 100%;
      }
   }
}

#our-works{
   background-color: #ECECEC;
   padding: 105px 0 180px;
   @media only screen and (max-width: 1000px) {
      padding: 35px 0 100px;
   }

   .heading-c-box{
      @media only screen and (max-width: 1000px) {
         text-align: left;
         padding-left: 15px;
      }
   }

   .lp-works-content{
      width: 1200px;
      max-width: 90%;
      margin: 0 auto;
      display: flex;
      gap: 30px;
      @media only screen and (max-width: 1000px) {
         display: block;
         margin: 15px auto;
      }

      .list{
         border: 1px solid #C2C2C2;
         a{
            padding: 24px 24px 32px;
            display: block;
            @media only screen and (max-width: 768px) {
               padding: 20px 15px 24px;
            }
         }

         img{
            width: 100%;
            height: auto;
            aspect-ratio: 332 / 215;
         }

         .box{
            border-top: 1px solid #C2C2C2;
            margin-top: 22px;
            padding-top: 22px;
            @media only screen and (max-width: 768px) {
               margin-top: 15px;
               padding-top: 15px;
            }

            .title{
               font-size: 1.8rem;
               font-weight: bold;
               margin-bottom: 25px;
               line-height: 1.4;
               @media only screen and (max-width: 768px) {
                  font-size: 1.5rem;
                  margin-bottom: 20px;
               }
            }

            .text{
               font-size: 1.5rem;
               line-height: 1.5;
               font-weight: 300;
               @media only screen and (max-width: 768px) {
                  font-size: 1.4rem;
               }
            }
         }
      }
   }

   .slick-slide {
     margin: 0 15px;
     @media only screen and (max-width: 1000px) {
      margin: 0 auto;
     }
   }

   .slick-dots{
      bottom: -50px;
      @media only screen and (max-width: 1000px) {
         bottom: -30px;
      }
   }

   .slick-next{
      width: 44px;
      height: 44px;
      @media only screen and (max-width: 1000px) {
         width: 36px;
         height: 36px;
         right: 20px;
         top: -35px;
      }
   }

   .slick-next:before{
      content:url(../img/lp/right-arrow.svg);
      width: 44px;
      height: 44px;
      background-size: cover;
      background-repeat: no-repeat;
      display: block;
      @media only screen and (max-width: 1000px) {
         width: 38px;
         height: 38px;
      }
   }

   .slick-prev{
      width: 44px;
      height: 44px;
      @media only screen and (max-width: 1000px) {
         width: 36px;
         height: 36px;
         right: 70px;
         left: auto;
         top: -35px;
      }
   }

   .slick-prev:before {
      content:url(../img/lp/left-arrow.svg);
      width: 44px;
      height: 44px;
      background-size: cover;
      background-repeat: no-repeat;
      display: block;
      @media only screen and (max-width: 1000px) {
         width: 36px;
         height: 36px;
      }
   }
}

#career{
   padding: 170px 0 175px;
   @media only screen and (max-width: 768px) {
      padding: 65px 0 90px;
   }
   .wrap{
      width: 1200px;
      margin: 0 auto;
      max-width: 90%;
   }
   .career-top{
      display: flex;
      gap: 100px;
      @media only screen and (max-width: 1350px) {
         gap: 80px;
      }
      @media only screen and (max-width: 1300px) {
         flex-direction: column;
         gap: 40px;
      }
      @media only screen and (max-width: 768px) {
         gap: 35px;
      }

      .top-text{
         p{
            font-size: 1.6rem;
            font-weight: 300;
            line-height: 2.4;
            @media only screen and (max-width: 768px) {
               font-size: 1.4rem;
            }
         }
      }
   }

   .career-content{
      margin-top: 100px;
      @media only screen and (max-width: 1000px) {
         margin-top: 30px;
      }
      @media only screen and (max-width: 768px) {
         margin-top: 25px;
      }
      li{
         margin-bottom: 75px;
         @media only screen and (max-width: 1000px) {
            margin-bottom: 40px;
         }
      }

      li:last-child{
         margin-bottom: 0;
      }
      h3{
         font-size: 2.1rem;
         font-weight: bold;
         display: inline-block;
         background: #ECECEC;
         padding: 8px 18px;
         margin-bottom: 22px;
         @media only screen and (max-width: 640px) {
            font-size: 1.6rem;
            padding: 4px 16px;
            margin-bottom: 10px;
         }
      }

      .staff-career{
         display: flex;
         gap: 40px;
         @media only screen and (max-width: 1000px) {
             flex-direction: column;
             gap: 20px;
         }

         .pic{
            width: 29%;
            @media only screen and (max-width: 1000px) {
               width: 100%;
            }

            img{
               width: 100%;
               height: auto;
               
            }
         }

         .career-text{
            width: 67%;
            padding: 28px 32px;
            border: 1px solid #C2C2C2;
            @media only screen and (max-width: 1000px) {
               width: 100%;
               border: 0;
               padding: 25px 0;
            }
            @media only screen and (max-width: 768px) {
               padding: 0;
            }

            h4{
               font-size: 1.8rem;
               line-height: 1.5;
               margin-bottom: 30px;
               @media only screen and (max-width: 768px) {
                  font-size: 1.6rem;
                  margin-bottom: 25px;
               }
            }

            p{
               font-size: 1.6rem;
               font-weight: 300;
               line-height: 2;
               @media only screen and (max-width: 768px) {
                  font-size: 1.4rem;
               }
            }
         }
      }

      .years-list{
         display: flex;
         gap: 48px;
         margin-top: 53px;
         @media only screen and (max-width: 768px) {
            display: block;
            margin-top: 30px;
         }

         .box{
            position: relative;
            z-index: 1;
            @media only screen and (max-width: 768px) {
               display: flex;
               align-items: start;
               gap: 12px;
               margin-bottom: 25px;
            }

            .years{
               font-size: 1.5rem;
               display: inline-block;
               background: #212020;
               border-radius: 30px;
               padding: 8px 25px;
               color: #fff;
               position: relative;
               z-index: 1;
               text-align: center;
               @media only screen and (max-width: 768px) {
                  padding: 6px 0;
                  min-width: 80px;
                  font-size: 1.3rem;
               }
            }

            .text-box{
               @media only screen and (max-width: 768px) {
                  min-width: 245px;
               }
            }

            h4{
               font-size: 1.8rem;
               margin: 20px 0 30px;
               line-height: 1.4;
               @media only screen and (max-width: 768px) {
                  font-size: 1.6rem;
                  margin: 5px 0 12px;
               }
            }

            .text{
               font-size: 1.5rem;
               font-weight: 300;
               line-height: 2;
               @media only screen and (max-width: 768px) {
                  font-size: 1.3rem;
               }
            }
         }

         .box:after{
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #C2C2C2;
            top: 15px;
            right: -50px;
            z-index: 0;
            @media only screen and (max-width: 768px) {
               width: 1px;
               height: 110%;
               right: auto;
               left: 40px;
               top: 20px;
            }
         }

         .box:last-child{
            @media only screen and (max-width: 768px) {
               margin-bottom: 0;
            }
         }

         .box:last-child:after{
            content: none;
         }
      }
   }
}

.cv{
   position: relative;

   img{
      width: 100%;
   }

   .pc{
      @media only screen and (max-width: 768px) {
         display: none;
      }
   }

   .sm{
      @media only screen and (min-width: 769px) {
         display: none;
      }
   }

   .text-box{
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: auto;
      text-align: center;
      @media only screen and (max-width: 768px) {
         width: 100%;
      }

      h2{
         font-size: 4rem;
         line-height: 1.5;
         color: #fff;
         @media only screen and (max-width: 1000px) {
            font-size: 3rem;
         }
         @media only screen and (max-width: 768px) {
            font-size: 3rem;
            display: flex;
            justify-content: center;
            flex-direction: row-reverse;
         }

         span{
            writing-mode: vertical-rl;   /* 文字を縦に右→左 */
            -webkit-writing-mode: vertical-rl; /* Safari対応 */
            text-orientation: upright;   /* 文字を回転させず upright */
            -webkit-text-orientation: upright; /* Safari対応 */
            letter-spacing: 10px;
         }
      }

      .cv-btn{
         padding: 30px 230px;
         display: inline-block;
         font-size: 3rem;
         text-align: center;
         background: #fff;
         border-radius: 120px;
         margin-top: 64px;
         border: 1px solid #C2C2C2;
         @media only screen and (max-width: 1000px) {
            font-size: 1.8rem;
            margin: 30px auto 25px;
            padding: 22px 230px;
         }
         @media only screen and (max-width: 768px) {
            width: 92%;
            font-size: 1.8rem;
            display: block;
            padding: 22px 0;
            margin: 65px auto 25px;
         }
      }

      .text{
         font-size: 2.6rem;
         font-weight: bold;
         text-align: center;
         color: #fff;
      }
   }
}

#benefits{
   .wrap{
      width: 1200px;
      margin: 0 auto;
      max-width: 90%;
      padding: 160px 0 248px;
      @media only screen and (max-width: 768px) {
         width: 100%;
         padding: 68px 0 120px;
      }
   }
   ul{
      display: flex;
      gap: 20px;
      @media only screen and (max-width: 768px) {
         flex-direction: column;
      }

      li{
         padding: 32px 24px;
         background-color: rgba(236, 236, 236, 0.15);
         border: 1px solid #C2C2C2;
         width: 100%;
         @media only screen and (max-width: 768px) {
            padding: 24px 20px;
         }

         h3{
            font-size: 1.8rem;
            line-height: 1.5;
            @media only screen and (max-width: 768px) {
               font-size: 1.6rem;
            }
         }

         .icon{
            width: auto;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 25px auto;
            img{
               width: auto;
               height: 72px;
               display: block;
               aspect-ratio: 1 / 1;
            }
         }

         p{
            font-size: 1.5rem;
            line-height: 1.5;
            font-weight: 300;
            @media only screen and (max-width: 768px) {
               font-size: 1.3rem;
            }
         }
      }

      li:nth-child(1){
         img{
            height: 90px;
         }
      }

      li:nth-child(3){
         img{
            height: 90px;
         }
      }
   }
}

#events{
   background-color: #ECECEC;
   .wrap{
      width: 1200px;
      margin: 0 auto;
      max-width: 96%;
      padding: 85px 0 175px;
      display: flex;
      gap: 120px;
      
      @media only screen and (max-width: 1200px) {
         gap: 10px;
      }
      @media only screen and (max-width: 1000px) {
         width: 100%;
         display: block;
         padding: 40px 0 85px;
      }
   }

   .heading-box{
      width: 100%;
      text-align: center;
      padding-top: 30px;

      h3 {
         font-size: 2rem;
         line-height: 1.5em;
         margin-top: 4rem;
      }
   }

   ul{
      width: 900px;
      margin: 0 auto;
      @media only screen and (max-width: 940px) {
         margin-top: 50px;
         width: 100%;
      }
      @media only screen and (max-width: 768px) {
         margin-top: 33px;
      }
      li{
         border: 1px solid #C2C2C2;
         display: flex;
         align-items: flex-start;
         padding: 20px 24px;
         margin-bottom: 35px;
         @media only screen and (max-width: 768px) {
            margin-bottom: 15px;
            padding: 14px 12px;
         }

         @media only screen and (max-width: 500px) {
            flex-flow: column wrap;
         }

         &:nth-child(even) {
            flex-flow: row-reverse nowrap;

            @media only screen and (max-width: 500px) {
               flex-flow: column wrap;
            }

            .text-box{
               margin-left: 0;
               margin-right: 18px;

               @media only screen and (max-width: 500px) {
                  margin: 0;
                  padding-top: 10px;
               }
            }
         }
         img{
            width: 400px;
            height: auto;
            aspect-ratio: 226 / 151;
            @media only screen and (max-width: 768px) {
               width: 210px;
               height: auto;
               aspect-ratio: 108 / 72;
            }

            @media only screen and (max-width: 500px) {
               width: 100%;
            }
         }
         .text-box{
            margin-left: 18px;
            padding: 15px 0 15px 18px;
            @media only screen and (max-width: 768px) {
               margin-left: 8px;
               padding: 0 0 0 8px;
            }

             @media only screen and (max-width: 500px) {
               width: 100%;
               margin: 0;
               padding-top: 10px;
            }

            .title{
               font-size: 1.8rem;
               font-weight: bold;
               margin-bottom: 25px;
               line-height: 1.4;
               @media only screen and (max-width: 768px) {
                  font-size: 1.4rem;
                  margin-bottom: 12px;
               }
            }

            .text{
               font-size: 1.5rem;
               font-weight: 300;
               line-height: 1.7;
               @media only screen and (max-width: 768px) {
                  font-size: 1.2rem;
               }
            }
         }
      }

      li:last-child{
         margin-bottom: 0;
      }
   }
}

#recruitment{
   padding: 170px 0 245px;
   @media only screen and (max-width: 768px) {
      padding: 70px 0 130px;
   }
   .wrap{
      width: 1000px;
      margin: 0 auto;
      max-width: 96%;
   }

   .heading-c-box{
      @media only screen and (max-width: 768px) {
         padding-bottom: 45px;
      }
   }

   li{
      padding: 34px 0;
      border-bottom: 1px solid rgba(33, 32, 32, 0.2);
      @media only screen and (max-width: 768px) {
         padding: 25px 0;
      }

      dl{
         display: flex;
         align-items: center;
         gap: 135px;
         @media only screen and (max-width: 1200px) {
            gap: 80px;
         }
         @media only screen and (max-width: 1000px) {
            gap: 40px;
         }
         @media only screen and (max-width: 768px) {
            display: block;
         }

         dt{
            min-width: 200px;
            font-size: 1.6rem;
            font-weight: bold;
            line-height: 1.5;
            @media only screen and (max-width: 768px) {
               min-width: auto;
               margin-bottom: 15px;
               font-size: 1.5rem;
            }
         }

         dd{
            font-size: 1.6rem;
            font-weight: 300;
            line-height: 1.7;
            @media only screen and (max-width: 768px) {
               font-size: 1.3rem;
            }
         }
      }
   }

   li:first-child{
      padding-top: 0;
   }
}

#flow{
   background-color: #ECECEC;
   padding: 100px 0 175px;
   @media only screen and (max-width: 768px) {
      padding: 35px 0 60px;
   }

   .pc{
      @media only screen and (max-width: 768px) {
         display: none;
      }
   }

   .sm{
      @media only screen and (min-width: 769px) {
         display: none;
      }
   }

   .wrap{
      width: 1200px;
      margin: 0 auto;
      max-width: 90%;
      @media only screen and (max-width: 1000px) {
         width: 100%;
         display: block;
      }
   }

   ul{
      margin-top: 90px;
      @media only screen and (max-width: 768px) {
         margin-top: 50px;
      }
   }

   li{
      display: flex;
      gap: 60px;
      align-items: flex-start;
      position: relative;
      z-index: 1;
      @media only screen and (max-width: 768px) {
         gap: 28px;
      }

      .num{
         font-size: 2.6rem;
         border: 1px solid #ECECEC;
         min-width: 72px;
         min-height: 72px;
         border-radius: 50%;
         font-family: "Roboto", sans-serif;
         border: 1px solid rgba(33, 32, 32, 0.3);
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         z-index: 1;
         background-color: #ECECEC;
         @media only screen and (max-width: 768px) {
            font-size: 1.6rem;
            min-width: 48px;
            min-height: 48px;
         }
      }

      .flow-content{
         display: flex;
         gap: 100px;
         border-bottom: 1px solid rgba(33, 32, 32, 0.3);
         padding: 40px 0;
         @media only screen and (max-width: 1000px) {
            gap: 40px;
         }
         @media only screen and (max-width: 768px) {
            display: block;
            padding: 20px 0;
         }

         h3{
            font-size: 2rem;
            margin-bottom: 16px;
            @media only screen and (max-width: 768px) {
               font-size: 1.6rem;
            }
         }

         p{
            font-size: 1.6rem;
            line-height: 1.7;
            font-weight: 400;
            @media only screen and (max-width: 768px) {
               font-size: 1.3rem;
            }
         }

         .text-box{
            width: 67%;
            @media only screen and (max-width: 768px) {
               width: 100%;
            }
         }

         .pic{
            width: 23%;
            margin: 10px 0;
            @media only screen and (max-width: 1000px) {
               width: 28%;
            }
            @media only screen and (max-width: 768px) {
               width: 100%;
            }

            img{
               width: 244px;
               height: auto;
               aspect-ratio: 244 / 137;
               border: 1px solid rgba(33, 32, 32, 0.15);
               @media only screen and (max-width: 768px) {
                  width: 100%;
                  aspect-ratio: 269 / 124;
               }
            }
         }
      }
   }

   li:first-child{
      .flow-content{
         padding-top: 0;
      }
   }

   li:last-child{
      .flow-content{
         border-bottom: 0;
         padding-bottom: 0;
      }
   }

   li:before{
      content: "";
      width: 1px;
      height: 100%;
      position: absolute;
      left: 35px;
      bottom: 0;
      background-color: rgba(33, 32, 32, 0.3);
      z-index: 0;
      @media only screen and (max-width: 768px) {
         left: 24px;
      }
   }
}

#faq{
   padding: 170px 0 178px;
   @media only screen and (max-width: 768px) {
      padding: 72px 0 88px;
   }
   .wrap{
      width: 1000px;
      margin: 0 auto;
      max-width: 90%;
      @media only screen and (max-width: 768px) {
         width: 100%;
      }
   }

   li{
      background-color: rgba(236, 236, 236, 0.3);
      border: 1px solid rgba(33, 32, 32, 0.3);
      padding: 20px 30px;
      margin-bottom: 43px;
      @media only screen and (max-width: 768px) {
         padding: 15px 60px 15px 12px;
         margin-bottom: 20px;
      }

      dt{
         font-size: 1.8rem;
         font-weight: bold;
         line-height: 1.4;
         display: flex;
         align-items: center;
         @media only screen and (max-width: 768px) {
            font-size: 1.5rem;
         }

         span{
            font-size: 2.2rem;
            margin-right: 23px;
            @media only screen and (max-width: 768px) {
               font-size: 2rem;
               margin-right: 15px;
            }
         }
      }

      dd{
         font-size: 1.6rem;
         font-weight: 400;
         border-top: 1px solid rgba(33, 32, 32, 0.2);
         padding-top: 30px;
         margin-top: 23px;
         font-weight: 400;
         display: flex;
         line-height: 1.7;
         @media only screen and (max-width: 768px) {
            font-size: 1.4rem;
            padding-top: 20px;
            margin-top: 15px;
         }
         span{
            font-size: 2.2rem;
            margin-right: 23px;
            font-weight: bold;
            @media only screen and (max-width: 768px) {
               font-size: 2rem;
               margin-right: 15px;
            }
         }
      }
   }

   li:last-child{
      margin-bottom: 0;
   }

   /*クリックしたら開閉*/
   .click-title {
     position: relative;
     cursor: pointer;
     transition: all 0.5s ease;
   }
   .click-title::before,
   .click-title::after {
     position: absolute;
     content: '';
     width: 18px;
     height: 1px;
     background-color: #191919;
   }
   @media screen and (max-width: 640px) {
     .click-title::before,
     .click-title::after {
       width: 20px;
     }
   }
   .click-title::before {
     top: 48%;
     right: 0;
     transform: rotate(0deg);
   }
   @media screen and (max-width: 640px) {
     .click-title::before {
       right: -40px;
     }
   }
   .click-title::after {
     top: 48%;
     right: 0;
     transform: rotate(90deg);
   }
   @media screen and (max-width: 640px) {
     .click-title::after {
       right: -40px;
     }
   }
   .click-title.close::before {
     transform: rotate(45deg);
   }
   .click-title.close::after {
     transform: rotate(-45deg);
   }
   .click-content {
     display: none;
   }
}

#company:before{
   content: "";
   width: 41%;
   height: 100%;
   background-color: #ECECEC;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   @media screen and (max-width: 768px) {
      height: 68%;
   }
   @media screen and (max-width: 640px) {
      height: 62%;
   }
   @media screen and (max-width: 450px) {
      height: 50%;
   }
}

#company{
   position: relative;
   padding: 135px 0 175px;
   @media screen and (max-width: 768px) {
      padding: 70px 0 23px;
   }

   .heading-box{
      padding-left: 120px;
      @media screen and (max-width: 1000px) {
         padding-left: 60px;
      }
      @media screen and (max-width: 768px) {
        padding-left: 12px;
      }
   }

   .flex{
      display: flex;
      align-items: center;
      gap: 75px;
      margin-top: 80px;
      @media screen and (max-width: 1000px) {
         gap: 40px;
      }
      @media screen and (max-width: 768px) {
         display: block;
         margin-top: 30px;
      }

      .pic{
         width: 45%;
         @media screen and (max-width: 768px) {
            width: 100%;
         }
         img{
            width: 100%;
            height: auto;
            aspect-ratio: 652px / 435px;
         }
      }

      .company-content{
         width: 41%;
         @media screen and (max-width: 1000px) {
            width: 48%;
         }
         @media screen and (max-width: 768px) {
            width: 90%;
            margin: 48px auto 0;
         }
         dl{
            display: flex;
            align-items: center;
            gap: 30px;
            font-size: 1.6rem;
            padding: 20px 0;
            border-bottom: 1px solid rgba(33, 32, 32, 0.2);
            @media screen and (max-width: 768px) {
               padding: 15px 0;
               display: block;
               font-size: 1.4rem;
            }
            dt{
               font-weight: bold;
               min-width: 134px;
               @media screen and (max-width: 768px) {
                  min-width: 100%;
                  margin-bottom: 12px;
               }
            }
            dd{
               font-weight: 400;
               line-height: 1.5;
            }
         }
      }
   }
}

#form{
   padding: 170px 0 178px;
   @media only screen and (max-width: 768px) {
      padding: 67px 0 80px;
   }
   .wrap{
      width: 1000px;
      margin: 0 auto;
      max-width: 96%;
      @media only screen and (max-width: 768px) {
         width: 100%;
      }
   }

   .heading-c-box{
      @media only screen and (max-width: 768px) {
         text-align: left;
         padding-bottom: 20px;
      }
      .text{
         font-size: 1.6rem;
         font-weight: 300;
         line-height: 2.5;
         margin-top: 75px;
         @media only screen and (max-width: 768px) {
            font-size: 1.4rem;
            margin-top: 38px;
            line-height: 2;
         }
      }
   }

   .form-content{
      dl{
         display: flex;
         gap: 32px;
         width: 100%;
         @media only screen and (max-width: 768px) {
            display: block;
            padding: 7px 0;
         }

         dt{
            min-width: 185px;
            font-size: 1.6rem;
            display: flex;
            @media only screen and (max-width: 768px) {
               min-width: 100%;
               font-size: 1.4rem;
            }
            strong{
               color: #fff;
               margin-left: auto;
               font-weight: 400;
               font-size: 1.2rem;
               background-color: #212020;
               padding: 3px 10px;
               @media only screen and (max-width: 768px) {
                  font-size: 1rem;
                  margin-left: 10px;
               }
            }
         }

         dd{
            width: 77%;
            @media only screen and (max-width: 768px) {
               width: 100%;
            }
            input{
               background-color: #F9F9F9;
               border: 1px solid rgba(33, 32, 32, 0.3);
               padding: 18px 20px;
            }

            select{
               width: 100%;
               background-color: #F9F9F9;
               border: 1px solid rgba(33, 32, 32, 0.3);
               padding: 18px 20px;
            }
         }
      }

      .mw_wp_form input[type="submit"]{
         font-size: 1.6rem;
         color: #0C0C0C;
         background-color: #fff;
         border: 1px solid rgba(33, 32, 32, 0.5);
         padding: 20px 113px;
         @media only screen and (max-width: 768px) {
            font-size: 1.4rem;
            padding: 20px 0;
            width: 92%;
            margin: 0 auto;
         }
      }

      .privacy {
       text-align: center;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 72px 0 35px;
       @media only screen and (max-width: 768px) {
         margin: 32px 0 20px;
       }

       a{
         text-decoration: underline;
       }

       p {
         margin-top: 0;
       }

       input {
         margin-right: 20px;
       }
     }
   }
}

.lp-footer{
   .footer-before{
      display: none;
   }
}