/* サイト全体のレイアウト */
body{
  font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  background-image: linear-gradient(0deg, rgba(65, 164, 253, 1), rgba(247, 255, 255, 1));
}

/* サイト全体の背景制御 */
.content-wrap--bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 0.5s ease 0s;
  z-index: 0;
}
.content-wrap--bg.show::before {
  opacity: 1;
}
.content-wrap--bg001::before {
  background: #9257ff;
}
.content-wrap--bg002::before {
  background: #5574ff;
}
.content-wrap--bg003::before {
  background: #56ffc7;
}

/* リンク文字の設定値 */
a:visited{
  color: aliceblue;
}
a:hover{
  color: chocolate;
}


/* メインコンテンツ部分 */
.wrapper{
  position: relative;
  max-width:1000px;
  margin:auto;
  height:auto;
  /* background-color: #FFF; */
}

/* ヘッダー・ファーストビュー */
.header_icon{
  position: relative;
  text-align: right;
  margin-bottom: -15px;
}
.header_icon img{
  height:50px;
  margin-right: 5px;
}

.header_logo{
  margin-top: -500px;
  padding-bottom: 30px;
}

.border{
  background-color: royalblue;
  color:aliceblue;
  text-align: center;
  width:100%;
  height:15px;
}
.border2{
  background-color: navy;
  text-align: center;
  margin-top: 5px;
  margin-left:15%;
  width:70%;
  height:12px;
}
.border3{
  background-color: midnightblue;
  text-align: center;
  margin-top: 5px;
  margin-left:25%;
  width:50%;
  height:10px;
}

/* ページ内アンカー */
.banner_area{
  display: flex;
  flex-wrap : wrap;
  justify-content: space-around;
  opacity: 0;  /* アニメーションされるまで透明 */
}

.banner{
  background-color: navy;
  border-radius: 10px;
  margin-top:10px;
  margin-bottom:10px;
  width:300px;
  height:50px;
}

.banner h1{
  color:aliceblue;
  margin-top:-3px;
  text-align: center;
}


/* メインコンテンツ */
.main{
  width:auto;
}

.index{
  display:flex;
  max-width:600px;
  height:50px;
  opacity: 0;  /* アニメーションされるまで透明 */
}
.index img{
  max-width:600px;
}

.text{
  color: aliceblue;
  margin-top: 0px;
  margin-left: -250px;
  text-align: center;
}

.container{
  width:auto;
  height:500px;
}
.content_left{
  position:relative;
  float:left;
  max-width:500px;
  height:500px;
  opacity: 0;  /* アニメーションされるまで透明 */
}

.content_right{
  position:relative;
  float:right;
  text-align: right;
  max-width:500px;
  height:500px;
  opacity: 0;  /* アニメーションされるまで透明 */
  z-index:6;
}

.content_text{
  position:relative;
  filter: drop-shadow(2px 2px 3px #3a3a3a);
  margin-bottom:-400px;
  font-size: 30px;
  font-weight: bold;
  color:aliceblue;
  z-index:5;
}

.height_1000{
  height:1000px;
}

.margin_top100{
  margin-top: 280px;
}

.footer{
  position: relative;
  color:aliceblue;
  background-color: midnightblue;
  text-align: center;
  width:auto;
  height:50px;
}
/* =================================================== */
/* アニメーション設定 */
/* =================================================== */

/* スライドイン */
.slide{
  opacity: 1; /* 初期では非表示 */
}

/* 画面に入ったときの挙動 */
.slidein_right.is-active {
    animation: slideIn_r 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
   
  @keyframes slideIn_r {
    0% {
      transform: translateX(180px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .slidein_left.is-active {
    animation: slideIn_l 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
   
  @keyframes slideIn_l {
    0% {
      transform: translateX(-180px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .slidein_bottom.is-active {
    animation: slideIn_b 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
   
  @keyframes slideIn_b {
    0% {
      transform: translateY(100px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }


  /* フェードイン */
  .fadein.is-active {
    animation: fadeIn 2.0s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }



/*================================================== */
/* スライダーのためのcss */
/*================================================== */
.slider{
  padding-left:0px;
}
.slider img {
  width:150%;/*スライダー内の画像を横幅150%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin:0 5px;/*スライド左右の余白調整*/
}



/* =================================================== */
/* スマホ向け */
/* =================================================== */
@media screen and (max-width: 480px) {
  img{
    max-width:480px;
  }
  .wrapper{
    max-width:auto;
  }
  .header_logo img{
    max-width:100%;
    margin-top:50px;
  }
  .text{
    margin-left: -250px;
  }
  
  .container{
    width:100%;
    height:300px;
  }
  .content_left{
    max-width:50%;
    height:300px;
  }
  .content_right{
    max-width:50%;
    height:300px;
  }
  .content_right img{
    max-width: 200px;
  }
  .content_text{
    font-size: 14px;
    max-width:50%;
  }
  .margin_top100{
    margin-top: 100px;
  }
  .link_banner img{
    width:100px;
  }
}