@charset "UTF-8";

/* TOPページCSS */
#fp-content-inner {position: relative;}
/* フィックスのボタン */
.fp-fixed-btn-box {   
   position: fixed;
   z-index: 1;
   top:650px;
   left:140px;
}
.fp-fixed-btn{
   color:#fff;
   font-family: YuGothic;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   border-radius: 100px;
   /* background: linear-gradient(90deg, #00A0E9 34%, #2BE7B1 100%); */
   width: 250px;
   height: 75px;
   flex-shrink: 0;
   border:none;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 40px;
   /*背景色＆アニメーション*/
   background: linear-gradient(90deg, #00A0E9 0%, #2BE7B1 25%, #00A0E9 51%, #00A0E9 100%);
   background-position: 1% 50%;
   background-size: 200% auto;
   transition: all 0.3s ease-out;
}
.fp-fixed-btn:hover{
   background-position: 99% 50%;
}


/* コンテンツ1 */
.fp-content-01 .fp-content-01-innner {
   position:relative; 
   /* height:950px; */
   overflow: hidden;
}

/* bg-img */
.bg-slide-img-box {
   width: 100%;
    /* height: 950px; */
    z-index: -1;
    overflow: hidden;
}

.content-01-bg-slide-sp {
   display:none;
}
.content-01-bg-slide-pc {
   width: 100%;
   height: auto;
   display: none; /* 初期状態では非表示に設定 */
}

/* top-main-title */
.fp-content-01 .fp-content-01-title-text {
   position: absolute;
   top:250px;
   left:130px;
   z-index:1
}
.fp-content-01 .fp-content-01-title-text h1 {
   font-family: YuGothic;
   font-size: min(60px, 5vw);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin:0 30px;
}
/* big-text(CREATE YOUR FUTURE) */
.fp-content-01-big-txt {
   position:absolute;
   left:0;
   bottom:-8.5vw;
   z-index: 1;
   width:100%;
   transform: rotate(-6deg) translate(100%, -4vw);
   /* テキスト */
   color: rgba(255, 255, 255, 0.20);
   font-family: "Futura Md BT";
   font-size: 150px;
   font-style: normal;
   font-weight: 700;
   line-height: 1;
   margin-right:40px;
   white-space: nowrap;
}

/*スクロールダウン アニメーション*/
.scrolldown-mark{
   /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:25%;
  right:11%;
  z-index: 1;
}

/*Scrollテキストの描写*/
.scrolldown-mark span{
   /*描画位置*/
  position: absolute;
  left:-6px;
  top:-220px;
   /*テキストの形状*/
   color: #FFF;
   font-family: "Futura Md BT";
   font-size: 10px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
   -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
   white-space: nowrap;
}

/* 丸の描写 */
.scrolldown-mark:before {
   content: "";
   /*描画位置*/
   position: absolute;
   bottom:0;
   left:-4px;
   /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#eee;
   /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
     circlemove 1.6s ease-in-out infinite,
     cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
     0%{bottom:45px;}
    100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
     0%{opacity:0}
    50%{opacity:1;}
   80%{opacity:0.9;}
  100%{opacity:0;}
}

/* 線の描写 */
.scrolldown-mark:after{
  content:"";
   /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
   /*線の形状*/
  width:1px;
  height: 142px;
  background:#eee;
}
/* end.コンテンツ1 */

/* コンテンツ2 */

.fp-content-02-innner {
   padding: 40px 0 35vw;
   position: relative;
}
/* タイトル */
.fp-content-02-title-text {width:fit-content; margin:0 auto;}
.fp-content-02-title-text h2{
   font-family: YuGothic;
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: center;
}
/* Pタグテキスト */
.fp-content-02-text-box {
   width:fit-content;
   margin: 0 auto;
}
.fp-content-02-text-box p {
   text-align: center;
   /* p-text-文章 */
   font-family: YuGothic;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}
/* end.コンテンツ２ */

/* コンテンツ3 */
.fp-content-03-innner {
   height:200px;
}
.fp-content-03-slider-box {
   position: absolute;
    width: 100%;
    z-index: 2;
    margin-top: -25%;
}
.fp-content-03-slider {
   margin:0;
	padding: 0;
	list-style: none;
   height:500px;
}

.slick-list {height:100%;}
.fp-content-03-slider .fp-content-03-slider-li-01 {
   transform: translateY(40px);
}
.fp-content-03-slider .fp-content-03-slider-li-02 {
   transform: translateY(80px);
}
.fp-content-03-slider .slick-slide {
   margin:0 10px;
   /* max-height: 200px; */
}
.fp-content-03-slider .slick-slide img {
   width: 45vw !important;
   /* width: max(45vw, 400px) !important; */
   height: auto;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   border-radius: 12px;
}
@media (min-width: 889px) { /* 45vwが400pxを超える幅 */
   .fp-content-03-slider .slick-slide img {
      width: 400px !important;
   }
}
/* end.コンテンツ3 */


/* コンテンツ4 */
.fp-content-04 {

}

.fp-content-04-innner {
   padding-bottom:300px;
   position: relative;
   overflow: hidden;
}
/* タイトル */
.fp-content-04-title-text {width:fit-content; margin:0 auto;}
.fp-content-04-title-text h2{
   font-family: YuGothic;
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: center;
}
/* Pタグテキスト */
.fp-content-04-text-box {width: fit-content; margin: 0 auto;}
.fp-content-04-text-box p {
   text-align: center;
   /* p-text-文章 */
   font-family: YuGothic;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}
/* big-text(FIELD OF GROWTH AND FUTURE) */
.fp-content-04-big-txt {
   position:absolute;
   left:0;
   bottom:0;
   width:100%;
   transform:rotate(6deg) translate(100%, -4vw);
   /* テキスト */
   color: #00a0e90d;
   font-family: "Futura Md BT";
   font-size: 150px;
   font-style: normal;
   font-weight: 700;
   line-height: 1;
   white-space: nowrap;
}
/* end.コンテンツ4 */

/* コンテンツ5 */

.fp-content-05-inner {
   padding-bottom: 200px;
}

.fp-content-05 .fp-content-05-flex-box {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin: 0 auto;
   width:70%;
   position: relative;
   z-index: 1;
}
/* タイトル */
/* .h1-txt-ENG */

.fp-content-05-big-txt::-webkit-scrollbar{
   display:none;
 }
.fp-content-05 .fp-content-05-h1-title-box {
   margin-bottom:42px;
   transform: translateY(80px);
   opacity:0;

}
.fp-content-05 .fp-content-05-h1-title-box h1.h1-txt-ENG {
   font-family: "Futura Md BT";
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 3.5px;
   margin-top:0;
}
/* p-sub-title */
.fp-content-05 .fp-content-05-h1-title-box h1.h1-txt-ENG .p-sub-title{
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}
.fp-content-05 .fp-content-05-h2-title-box{
   transform: translateY(80px);
   opacity:0;
}
.fp-content-05 .fp-content-05-h2-title-box h2{
   font-family: YuGothic;
   font-size: 30px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin-bottom:26px;
}
/* Pタグテキスト */
.fp-content-05 .fp-content-05-text-box {
   margin: 0 auto;
   transform: translateY(80px);
   opacity:0;
}
.fp-content-05 .fp-content-05-text-box .fp-content-05-text-paragraph {
   margin-bottom: 50px;
}
.fp-content-05 .fp-content-05-text-box .fp-content-05-text-paragraph:last-child {
   margin-bottom: 0;
}
.fp-content-05 .fp-content-05-text-box .fp-content-05-text-paragraph p {
   font-family: YuGothic;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 28px;
}

.fp-content-05 .ceo-introduction-box {
   padding-bottom:20px;
   transform: translateY(80px);
   opacity:0;

}
.fp-content-05 .ceo-introduction-box img {
   max-width:245px;
   width:100%;
   height:auto;
   border-radius:20px;
}
.fp-content-05 .ceo-introduction-box .p-txt-name {
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: right;
}

/* end.コンテンツ5 */

/* コンテンツ6 */
.fp-content-06-inner {
   padding: 40px 0 0;
}

/* タイトル */
.fp-content-06-upper {
   height:400px;
}
.fp-content-06-upper-inner {
   height: 100%;
}
/* .h1-txt-ENG */
.fp-content-06 .fp-content-06-h1-title-box {
   margin:0 auto 42px;
   text-align: center;
   transform: translateY(80px);
   opacity:0;
}
.fp-content-06 .fp-content-06-h1-title-box h1.h1-txt-ENG{
   font-family: "Futura Md BT";
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 3.5px;
   margin:0;
}
/* p-sub-title */
.fp-content-06 .fp-content-06-h1-title-box h1.h1-txt-ENG .p-sub-title{
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}

/* プロフィール */
.fp-content-06-lower-inner {
   position: relative;
   padding-bottom:5vw;
}
.img-square-bg {
   width:100vw;
   height: 120%;
   position: absolute;
   top:-5vw;
   right:0;
   margin-top: 13vw;
}
.img-square-bg img {
   width:100%;
   height:100%;
   object-fit: cover;
}

.member-profile-container {margin-top: -260px;}
.member-profile-container ul.member-profile-list{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   width: 70%;
   max-width: 1000px;
   margin: 0 auto;
   padding-left:0;
}
.member-profile-container ul.member-profile-list li.member-profile-leaf{
   width:22%;
   list-style-type: none;
   transform: translateY(80px);
   opacity:0;
}
/* 階段デザイン */
.member-profile-container ul.member-profile-list li.member-profile-leaf:nth-child(1){
   margin-top: 75px;
}
.member-profile-container ul.member-profile-list li.member-profile-leaf:nth-child(2){
   margin-top: 50px;
}
.member-profile-container ul.member-profile-list li.member-profile-leaf:nth-child(3){
   margin-top: 25px;
}
.member-profile-container ul.member-profile-list li.member-profile-leaf:nth-child(4){
   
}
/* 画像 */
.member-profile-container ul.member-profile-list li.member-profile-leaf .member-profile-img img{
   width: 100%;
   height: auto;
   flex-shrink: 0;
   border-radius: 20px;
}
/* 名前 */
.member-profile-container ul.member-profile-list li.member-profile-leaf .member-profile-name  {
   margin:30px 0;
}
.member-profile-container ul.member-profile-list li.member-profile-leaf .member-profile-name p.member-profile-name-en{
   color: #6A7988;
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin:0;
   text-align: center;
}
.member-profile-container ul.member-profile-list li.member-profile-leaf .member-profile-name p.member-profile-name-jp{
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin:0;
   text-align: center;
}
/* タイトル */
.member-profile-container ul.member-profile-list li.member-profile-leaf .member-profile-title{
   font-family: YuGothic;
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   margin-bottom:4px;
}
/* テキスト */
.member-profile-container ul.member-profile-list li.member-profile-leaf .member-profile-text{
   font-family: YuGothic;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}
/* end.コンテンツ6 */

/* コンテンツ7 */
.fp-content-07-inner {position:relative;}

.fp-content-07-inner .fp-content-07-bg-item-img {
   width:100%;
   height: auto;
}

.fp-content-07-bg-img {width:100%;}
/* ブルーボックス */
.fp-content-07-blue-box {
   width: 320px;
   padding:45px 30px 45px 45px;
   position:absolute;
   top:25%;
   left:60px;
   transform: translateY(80%);
   z-index: 2;
   opacity: 0;
}
.fp-content-07-blue-box .fp-content-07-blue-box-title h1 {
   font-family: "Futura Md BT";
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 3.5px;
   margin:0;
}
.fp-content-07-blue-box .fp-content-07-blue-box-subtitle {
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   margin-bottom:30px;
}
.fp-content-07-blue-box .fp-content-07-blue-box-subtitle p {
   margin:13px 0;
}
.fp-content-07-blue-box .fp-content-07-blue-box-text {
   margin-bottom:35px;
}
.fp-content-07-blue-box .fp-content-07-blue-box-text p {
   font-family: YuGothic;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 30px;
}
/* ボタン */
.fp-content-07-blue-box .blue-link-btn {
   border: 1px solid #FFF;
}
.fp-content-07-blue-box a {
   margin:0;
}
/* end.コンテンツ7 */

/* コンテンツ8 */
.fp-content-08-inner{ padding: 0 0 80px;}

.fp-content-08-h1-title-box {
   text-align: center;
   transform: translateY(80%);
   opacity: 0;
}
.fp-content-08 h1.h1-txt-ENG{
   font-family: "Futura Md BT";
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 3.5px;
}
/* p-sub-title */
.fp-content-08 .fp-content-08-h1-title-box h1.h1-txt-ENG .p-sub-title{
   font-family: YuGothic;
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}

/* ロゴスライダー */
/* TOP */
.top-slider, .bottom-slider {
   margin:0;
	padding: 0;
	list-style: none;
}
.top-slider {margin-bottom:30px;}
.top-slider .flex-box, .bottom-slider .flex-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.top-slider .slick-slide, .bottom-slider .slick-slide {
   margin:0 10px;
   width:270px;
   height: 120px;
}
.top-slider img, .bottom-slider img {
   max-height:120px;
   width:auto;
}
.top-slider img.sq-logo, .bottom-slider img.sq-logo {
   width:120px;
   height:auto;
   margin: 0 auto;
}
/* BOTTOM */
/* end.コンテンツ8（ACHIEVEMENT） */

/************************ TOPページ SP(レスポンシブ) ************************/
@media (max-width:599px){ 

   /* フィックスボタン */
   .fp-fixed-btn-box {left:36px;}

   /* コンテンツ1 */
   .fp-content-01 .fp-content-01-innner {
      height:700px;
      background-position: 68% bottom;
    background-size: 200%;
   }
   .fp-content-01-big-txt {
      font-size:80px;
      bottom: -3px;
   }

   .fp-content-01 .fp-content-01-title-text {
      width:100%;
      top:100px;
      left:50%;
      transform:translate(-50%,0);
      text-align: center;
   }
   .fp-content-01 .fp-content-01-title-text h1 {font-size:30px;}

   .content-01-bg-slide-pc {
      display:none;
   }

   .content-01-bg-slide-sp {
      width: 100%;
      height:100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: bottom;
   }
   .content-01-bg-slide-sp-01 {
      height:150%;
      background-position:-270px -350px;
   }
   .content-01-bg-slide-sp-02 {
      height:125%;
      background-position:-155px -180px;
   }
   .content-01-bg-slide-sp-03 {
      height:125%;
      background-position:-155px -180px;
   }

   /* コンテンツ２ */
   .fp-content-02-innner {padding: 20px 28px 80px;}
   .fp-content-02-title-text h2 {font-size:20px; text-align: left;}
   .fp-content-02-text-box p {text-align: left;}

   /*** コンテンツ３（画像スライダー） ***/
   .fp-content-03-slider-box {
      transform: translateY(-20%);
   }
   .fp-content-03-slider {
      height:350px;
      margin-top:30vw
   }
   .fp-content-03-slider .slick-slide img {
      width:100% !important;
      max-width:245px;
   }
   

   /*** コンテンツ４ ***/
   .fp-content-04-innner {
      padding-top:0;
      padding-bottom: 160px;
   }
   .fp-content-04-big-txt {
      font-size: 80px;
   }
   .fp-content-04-title-text h2 {
      font-size: 20px;
      margin-bottom:40px;
   }
   .fp-content-04-text-box {
      padding: 0 28px;
   }

   /*** 代表者メッセージ ***/
   .fp-content-05-inner {padding-bottom:40px;}
   /* セクションタイトル */
   .fp-content-05 .fp-content-05-h1-title-box {
      padding-left:30px;
   }
   .fp-content-05 .fp-content-05-h2-title-box h2 {
      font-family: YuGothic;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding:0 30px;
   }
   .fp-content-05 .fp-content-05-flex-box {
      display: block;
      width:100%;
      padding: 0;
   }
   /* テキスト */
   .fp-content-05 .fp-content-05-text-box {
      padding: 0 30px;
   }

   /* 画像、役職、氏名 */
   .fp-content-05 .ceo-introduction-box {
      padding: 0 20px;
   }
   .fp-content-05 .ceo-introduction-box img {
      width: 90%;
      height: auto;
      max-width: none;
      object-fit: cover;
      margin: 0 auto;
   }

   

   /* コンテンツ６（メンバープロフィール） */
   .fp-content-06 .fp-content-06-h1-title-box h1.h1-txt-ENG {
      margin-bottom: 0;
   }
   .fp-content-06-upper {
      height:1030px;
   }
   .member-profile-container {
      margin-top:-900px;
   }
   .member-profile-container ul.member-profile-list {
      display:flex;
      flex-direction: column-reverse;
   }
   .member-profile-container ul.member-profile-list li.member-profile-leaf {
      margin-bottom:0;
      width:100%;
      padding-bottom:60px;
   }
   .member-profile-container ul.member-profile-list li.member-profile-leaf:nth-child(3) {
      padding-bottom:60px;
   }
   /* 背景画像 */
   .img-square-bg {
      height: 60%;
      position: absolute;
      top:unset;
      right:unset;
      bottom:-11vw;
      left:0;
      margin-top: 13vw;
   }

   /* コンテンツ７（RECRUIT） */
   .fp-content-07-inner{
   background-position: 68% center;
        background-size: 200%;
   }
   
   .fp-content-07-inner .fp-content-07-bg-item:before {
      height:100vh;
      left:50%;
      transform: translateX(-50%);
   }
   .fp-content-07 .bg-lightblue {
      width:100%;
      height:550px;
   }
   .fp-content-07-blue-box {
      width: 280px;
      height: auto;
      top: 200px;
      left: calc((100vw - 355px) / 2);
   }

   .fp-content-07-blue-box .fp-content-07-blue-box-title h1 {margin-top:0;}

   /* コンテンツ8 */
   .fp-content-08-inner {padding-bottom:40px;}
   .achievement-list-box {width:98%; margin:0 auto;}
   .achievement-list-box ul {
      padding-left:0;
   }
   .achievement-list-box ul li {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 24px;
   }
   .achievement-list-box ul li img {
      width:45%;
      height: auto;
   }
   .achievement-list-box ul li img:first-child {
      margin-right: 13px;
   }
   .achievement-list-box ul li img.sq-logo {
      width:80px;
   }

}

/* テキスト出現用スタイル */
.bgextend{
	-webkit-animation-name:bgextendAnimeBase;
	        animation-name:bgextendAnimeBase;
	-webkit-animation-duration:1s;
	        animation-duration:1s;
	-webkit-animation-fill-mode:forwards;
	        animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
@-webkit-keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	-webkit-animation-name:bgextendAnimeSecond;
	        animation-name:bgextendAnimeSecond;
	-webkit-animation-duration:1s;
	        animation-duration:1s;
	-webkit-animation-delay: 0.6s;
	        animation-delay: 0.6s;
	-webkit-animation-fill-mode:forwards;
	        animation-fill-mode:forwards;
	opacity: 0;
}

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

/*左から右*/
.bgLRextend::before{
	-webkit-animation-name:bgLRextendAnime;
	        animation-name:bgLRextendAnime;
	-webkit-animation-duration:1s;
	        animation-duration:1s;
	-webkit-animation-fill-mode:forwards;
	        animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		-webkit-transform-origin:left;
		-webkit-transform:scaleX(0);
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		-webkit-transform-origin:left;
		-webkit-transform:scaleX(1);
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		-webkit-transform-origin:right;
		transform-origin:right;
	}
	100% {
		-webkit-transform-origin:right;
		-webkit-transform:scaleX(0);
		transform-origin:right;
		transform:scaleX(0);
	}
}
@-webkit-keyframes bgLRextendAnime{
	0% {
		-webkit-transform-origin:left;
		-webkit-transform:scaleX(0);
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		-webkit-transform-origin:left;
		-webkit-transform:scaleX(1);
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		-webkit-transform-origin:right;
		transform-origin:right;
	}
	100% {
		-webkit-transform-origin:right;
		-webkit-transform:scaleX(0);
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}