@charset "utf-8";

.main_top {
    position: relative;
}
.event_name_ {
  display : none;
}
.top_text_absolute {
    position : absolute;
    color : #fff;
    top : 84%;
    left : 50%;
    transform:translate(-50%, 0);
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
}
.top_image_absolute {
    position : absolute;
    top : 21%;
    left : 54%;
    transform : translate(-50%, 50%);
    width : 56%;
}

.event_title_ {
    display :none;
}

/* 1 content */
#content_first .scroll_event_main {
  background-color : #002608;
  padding : 9% 5%;
}
#content_first .content_text {
  display : inline-block;
}
#content_first .content_text_1 {
  margin-top : 30px;
}
#content_first .content_text_1 img {
  width : 45%;
}
#content_first .content_text_2 {
  margin : 30px auto;
}
#content_first .content_text_2 img{
  width : 70%;
}
#content_first .content_text_3 {
  color : #fff;
  font-size : 15px;
  line-height: 30px;
}

/* 2 content */
#content_second .content_mv_sub {
  position: absolute;
  top: 3%;
  left: 0;
  text-align: left;
}
#content_second .content_mv_sub img{
  width : 70%;
}
#content_second .scroll_event_main {
  position: relative;
  background-color : #231815;
  padding : 9% 5%;
}
#content_second .content_text {
  display : inline-block;
}
#content_second .content_text_1 {
  margin-top : 30px;
}
#content_second .content_text_1 img {
  width : 18%;
}
#content_second .content_text_2 {
  margin : 30px auto;
}
#content_second .content_text_2 img{
  width : 95%;
}
#content_second .content_text_3 {
  color : #fff;
  font-size : 15px;
  line-height : 30px;
}

/* 3 content */
#content_third .content_base {
  position: relative;
  background : url("../img/event/new_more_clock/pc/content_third_base.jpg") no-repeat;
  padding: 2.5%;
}
#content_third .content_text {
  border : 8px solid #e94709;
}
#content_third .content_text_inner {
  padding : 4.5% 2.5%;
}
#content_third .content_text {
  display : inline-block;
}
#content_third .content_text_1 img {
  width : 50%;
}
#content_third .content_text_2 {
  margin-top : 20px;
}
#content_third .content_text_2,
#content_third .content_text_4 {
  color : #001a60;
  font-size : 12px;
  font-weight: bold;
}
#content_third .content_text_box {
  display : flex;
  margin-top : 20px;
}
#content_third .content_text_box > div:first-child{
  width : 50%;
  margin-left: 3%;
}
#content_third .content_text_box > div:nth-child(2){
  width : 50%;
}
#content_third .content_text_3 {
  margin : 30px 0 30px -20%;
}
#content_third .content_text_3 img{
  width : 80%;
}
#content_third .content_text_4 {
  text-align: left;
  padding-left : 6%;
}
#content_third .content_mv_sub {
  position: absolute;
  top: 10.5%;
  left: 0;
  text-align: left;
}
#content_third .content_mv_sub img{
  width : 70%;
}
#content_third .content_text_small {
  font-size : 10px;
}

/* 4 content */
#content_fourth .content_mv_sub {
  position: absolute;
  top: 3%;
  left: 0;
  text-align: left;
}
#content_fourth .content_mv_sub img{
  width : 70%;
}
#content_fourth .scroll_event_main {
  position: relative;
  background-color : #003990;
  padding : 9% 5%;
}
#content_fourth .content_text {
  display : inline-block;
}
#content_fourth .content_text_1 {
  margin: 30px auto;
}
#content_fourth .content_text_1 img {
  width : 60%;
}
#content_fourth .content_text_2 {
  color : #fff;
  font-size : 15px;
  line-height : 30px;
}

/* 5 content */
#content_fifth .content_mv_sub {
  position: absolute;
  top: 3%;
  left: 0;
  text-align: left;
}
#content_fifth .content_mv_sub img{
  width : 70%;
}
#content_fifth .scroll_event_main {
  position: relative;
  background-color : #3e4e50;
  padding : 9% 5%;
}
#content_fifth .content_text {
  display : inline-block;
}
#content_fifth .content_text_1 {
  margin: 30px auto;
}
#content_fifth .content_text_1 img {
  width : 70%;
}
#content_fifth .content_text_2 {
  color : #fff;
  font-size : 15px;
  line-height : 30px;
}

/* 6 content */
#content_sixth .content_mv_sub {
  position: absolute;
  top: 3%;
  left: 0;
  text-align: left;
}
#content_sixth .content_mv_sub img{
  width : 70%;
}
#content_sixth .scroll_event_main {
  position: relative;
  background-color : #921a0b;
  padding : 9% 5%;
}
#content_sixth .content_text {
  display : inline-block;
}
#content_sixth .content_text_1 {
  margin: 30px auto;
}
#content_sixth .content_text_1 img {
  width : 70%;
}
#content_sixth .content_text_2 {
  color : #fff;
  font-size : 15px;
  line-height : 30px;
}

/* 7 content */
#content_seventh .scroll_event_main {
  position: relative;
  background-color : #fedd6b;
  padding : 9% 5%;
}
#content_seventh .content_text {
  display : inline-block;
}
#content_seventh .content_text_1 {
  margin: 30px auto;
}
#content_seventh .content_text_1 img {
  width : 85%;
}
#content_seventh .content_text_2 {
  font-size : 15px;
  line-height : 30px;
}

#content_second,
#content_third,
#content_fourth,
#content_fifth,
#content_sixth {
  position : relative;
  overflow: hidden;
}

.content_mv_sub{
  z-index : 50;
  transform : translate(-70%);
}

.center_btn_ {
  width : 25%;
  margin : 0 auto 50px;
}

/*　↓　sub_title 設定　↓　*/
.sub-animation {
    transform: translate(0%);
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}
#content_third .content_text_inner .content_text_box div .content_text_3 {
  transform: translate(50%);
}
#content_third .content_text_inner .content_text_box div .content_text_3.sub-animation {
  transform: translate(0%);
  transition-property: transform;
  transition-delay: 1s;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}
.view_ {
    opacity: 1;
    transition: opacity 1s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */
    -webkit-transition: opacity 1s ease-out; 
    -moz-transition: opacity 1s ease-in-out;
}

.unview_ {
    transition : opacity 1s linear 1s;
    opacity: 0;
}
/*　↑　pick up item 設定　↑　*/

/*　スクロールanimation　*/
/* .fadeUp_main .ani.delay1 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.fadeUp_main .ani.delay2 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.fadeUp_main .ani.delay3 {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
} */

.fadeUp_main .ani.fadeIn {
  opacity: 0;
  
}
.fadeUp_main .ani.fadeUp {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}

.fadeUp_main .ani.fadeUp.animated {
  -webkit-animation-name: fadeUp;
          animation-name: fadeUp;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.fadeUp_main .ani.fadeIn.animated {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0/7s;
          animation-delay: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

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

@keyframes fadeIn {
  50% {
    opacity: 0;   
  }
  100% {
    opacity: 1;
  }
}

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

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

/**/