@charset "UTF-8";

/* ページ構成
---------------------------------------------------------- */
#take_1805 {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: #1d1d1d;
}

#take_1805 div[class^="box0"] > img {
  vertical-align: bottom;
}


/* 各box
---------------------------------------------------------- */

#take_1805 .topWrap {
  width: 100%;
}

#take_1805 div.box01,
#take_1805 div.box02,
#take_1805 div.box03,
#take_1805 div.box04 {
  position: relative;
  left: 50%;
  margin-left: -800px;
  text-align: center;
  width: 1600px;
}


/* テキスト画像
---------------------------------------------------------- */


/* ボタン
---------------------------------------------------------- */
#take_1805 .box01 a,
#take_1805 .box02 a,
#take_1805 .box03 a,
#take_1805 .box04 a {
  position: absolute;
  z-index: 100;
  left: 50%;
  opacity: 0;
  background: white;
}

#take_1805 .box01 a:hover,
#take_1805 .box02 a:hover,
#take_1805 .box03 a:hover,
#take_1805 .box04 a:hover {
  opacity: 0.2;
  cursol: pointer;
}

#take_1805 .box01 .btn_twt {
  width: 90px;
  height: 90px;
  margin-left: -480px;
  top: 7px;
  border-radius: 50px;
}

#take_1805 .box01 .btn_c01 {
  width: 810px;
  height: 30px;
  margin-left: -380px;
  top: 1046px;
  border-radius: 50px;
}

#take_1805 .box01 .btn_c02 {
  width: 810px;
  height: 30px;
  margin-left: -380px;
  top: 1086px;
  border-radius: 50px;
}

/* 遷移ボタン */
#take_1805 .box04 .btn_ganma {
  width: 300px;
  height: 83px;
  margin-left: -462px;
  top: 35px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_ang {
  width: 300px;
  height: 83px;
  margin-left: -152px;
  top: 35px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_sato {
  width: 300px;
  height: 83px;
  margin-left: 160px;
  top: 35px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_ang_dl {
  width: 300px;
  height: 83px;
  margin-left: -310px;
  top: 213px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_sato_dl {
  width: 300px;
  height: 83px;
  margin-left: 10px;
  top: 213px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_ang_dl.cs {
  width: 300px;
  height: 83px;
  margin-left: -310px;
  top: 213px;
  border-radius: 50px;
  background: url(../../../img/contents_pc/campaign/take_1805/btn_ang_cs.png) no-repeat 0 0;
  opacity: 1;
  pointer-events: none;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadein;
  animation-name: fadein;
}

#take_1805 .box04 .btn_sato_dl.cs {
  width: 300px;
  height: 83px;
  margin-left: 10px;
  top: 213px;
  border-radius: 50px;
  background: url(../../../img/contents_pc/campaign/take_1805/btn_sato_cs.png) no-repeat 0 0;
  opacity: 1;
  pointer-events: none;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadein;
  animation-name: fadein;
}

#take_1805 .box04 .btn_regist {
  width: 440px;
  height: 80px;
  margin-left: -383px;
  top: 513px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_zen {
  width: 210px;
  height: 80px;
  margin-left: -383px;
  top: 603px;
  border-radius: 50px;
}

#take_1805 .box04 .btn_yan {
  width: 210px;
  height: 80px;
  margin-left: -156px;
  top: 602px;
  border-radius: 50px;
}



/* 注意事項
---------------------------------------------------------- */


/* アニメ
---------------------------------------------------------- */

#take_1805 img.fadein {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadein;
  animation-name: fadein;
}

@-webkit-keyframes fadein {
  0%,70% {
    opacity: 0;
    -webkit-transform: translateY(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadein {
  0%,70% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


#take_1805 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}