@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

/*==========================================================================
全体
========================================================================== */
*{
    margin: 0;
    padding: 0;
  }
body{
    background-image: url(../images/background.png);    
    background-size:  cover;                /* 画像のサイズ指定 */
    background-attachment: fixed;
}
.inner{
    max-width: 750px;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    filter: drop-shadow(0px 0px 35px rgba(0,0,0,0.2));
    padding-bottom: 1px;
  }
  ul{
    margin:0;
    padding: 0;
    list-style: none;
  }
  
  a{
    color: #fff;
  }
  
  a:hover,
  a:active{
    text-decoration: none;
  }
  
img{
    width: 100%;
}
ul{
margin:0;
padding: 0;
list-style: none;
}

a:hover,
a:active{
text-decoration: none;
}

/*リンクを右下に固定*/
.button2{
  width: 150px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.0s;
  animation-name: anim_s;
  transform: rotate(10deg);
  animation-duration: 3s;
}
@keyframes anim_s {
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
#page-top {
  position: fixed;
  right: 5%;
  bottom:5%;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(300px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime .7s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(300px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime .7s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(500px);
  }
}


/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  .fadeInTrigger{
    opacity: 0;
    }
  /* 左から */

.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeLeftAnime{
    from {
      opacity: 0;
    transform: translateX(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  .fadeLeftTrigger{
    opacity: 0;
    }

    /* 左へ */
.flipLeft{
  animation-name:flipLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  perspective-origin:left center;
  opacity:0;
  }
  
  @keyframes flipLeftAnime{
    from {
     transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
    }
  
    to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
    }
  }

  .flipLeftTrigger{
    opacity: 0;
    }

/*==================================================
スライダーのためのcss
===================================*/
.slider1 {
  margin-inline: auto;
  overflow: hidden; 
}
.slick-img1 img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.slider2 {
  width: 750px;
  margin-inline: auto;
  position: absolute;
  z-index: 1000;
}



/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.wrap{
  position: relative;
}
.wrap2{
  padding-bottom:20%;
}
.scrolldown1{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;
bottom:1%;
  /*全体の高さ*/
height:90px;
z-index: 100;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
  /*描画位置*/
position: absolute;
top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  /*テキストの形状*/
color: #000;
font-size: 1rem;
letter-spacing: 0.05em;
font-family: 'Roboto', sans-serif;
}

/* 線の描写 */
.scrolldown1::after{
content: "";
  /*描画位置*/
position: absolute;
top: 25%;
  /*線の形状*/
width: 1px;
height: 80px;
background: #000;
  /*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
  height:0;
  top:25%;
  opacity: 0;
}
30%{
  height:45px;
  opacity: 1;
}
100%{
  height:0;
  top:80px;
  opacity: 0;
}
}

/* スマホ表示 */
@media screen and (max-width:500px){
  .wrap2{
    padding-bottom:30%;
  }
  .scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:50%;
  bottom:1%;
    /*全体の高さ*/
  height:80px;
  z-index: 100;
  }
  .scrolldown1 span{
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  }
  /* 線の描写 */
  .scrolldown1::after{
  content: "";
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #000;
  top: 15%;
  /*線の形状*/
  }
  @keyframes pathmove{
    0%{
      height:0;
      top:20%;
      opacity: 0;
    }
    30%{
      height:40px;
      opacity: 1;
    }
    100%{
      height:0;
      top:60px;
      opacity: 0;
    }
    }
    }

/*==========================================================================
button
========================================================================== */
.button-content{
  position: relative;
}
.button-background{
  width: 95%;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1));
}
.button{
  width: 86%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.1));
}
.keyframe6 {
  position: absolute;
  left:7%;
  
  bottom: 2%;
  animation-name: poyopoyo;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}


/*==========================================================================
contents
========================================================================== */
.content{
  margin: 5% 0 5% 0;
}
.title{
  margin: 5% 0 10% 0;
}
.title1{
  width: 75%;
}
.asset-team{
  width: 95%;
  margin-bottom: 7%;
} 
.title2{
  width: 47%;
}
.asset-feature{
  width: 80%;
  margin-bottom: 5%;
}
.asset{
  margin: 5% 0 5% 0;
}
.asset-parts{
  width: 95%;
}
.text{
  margin: 5% 0 5% 0;
  width: 85%;
}
.points{
  margin: 5% 0 5% 0;
}
.images{
  width: 95%;
  margin-top: 2%;
}
.title-parts{
  width: 80%;
}
.title-feature{
  margin: 5% 0 5% 0;
}
.text-parts{
  width: 85%;
  margin-bottom: 3%;
}
.content-background{
  background: linear-gradient(135deg, rgb(213, 126, 199), rgb(82, 158, 189));
  padding: 10% 0 3% 0;
}
.content-wrap{
  position: relative;
  margin: 0 auto;
  width: 95%;
  background-color: #fff;
  border-radius: 10px;
}
.special{
  position: absolute;
  bottom: 96%;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  width: 60%;
}
.content-image{
  width: 90%;
  margin-top: 7%;
}
.content-image1{
  padding-top: 10%;
}
.title6{
  width: 60%;
}
.flex{
  display: flex;
  justify-content: center;
  gap: 1%;
  margin-bottom: 1%;
}
.flex-image{
  width: 47%;
}
.title7{
  width: 68%;
  margin-top: 10%;
}
.text-event{
  width: 80%;
  margin-bottom: 5%;
}
.title8{
  width: 50%;
}
.title9{
  width: 55%;
}
.gallery-asset{
  margin-top: 3%;
  margin-bottom: 15%;
  width: 50%;
}
.title10{
  width: 25%;
}
.recruit-asset{
  width: 95%;
  margin-bottom: 10%;
}




/*==================================================
slider-featureのためのcss
===================================*/
.slider-feature{
  margin-bottom: 2%;
}
.slider-feature img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider-feature .slick-slide {
  margin:0 5px;/*スライド左右の余白調整*/
}
/*==================================================
slider-contentのためのcss
===================================*/
.slider-content{
  padding: 5% 0;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1));
}
.slider-content img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider-content .slick-slide {
  margin:0 5px;/*スライド左右の余白調整*/
}

/*==================================================
slider-eventのためのcss
===================================*/
.slider-event {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:100%;
  margin:0 auto 25% auto;
}

.slider-event img {
  width:450px;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1));
  padding:5% 0;
}

.slider-event .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.slider-event .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}
/*==================================================
gallary-slideのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
img{
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery img{
  width: 95%;
  height: auto;
  margin: 0 auto 3% auto;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1));
}
.choice-btn{
  width: 96%;
  margin: 0 auto;
}
.choice-btn img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;

}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.choice-btn .slick-slide {
  margin:0 3px;/*スライド左右の余白調整*/
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 15px;
    width: 15px;
    border-radius: 1px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
  cursor: pointer;
  outline: none;
  background:#333;
  border-radius: 6px;
}

.choice-btn li img{
  opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
  opacity: 1;/*選択されているものは透過しない*/
}

/*==========================================================================
スマホ表示
========================================================================== */   
@media screen and (max-width:750px){
  /* ...and position them! */
  img {
      width: 100vw;
      }
      .button2{
        width: 130px;
      }
      .slider-event img {
        width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
      }
      .slider2 {
        width: 100%;
      }    
  }

/* 750or1024 */