.font-min{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

*, :after, :before {
  box-sizing: inherit
}

/* main bg */
.aniv10_bg {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative
}

.aniv10_bg_img{
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: space-between;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1
}

.aniv10_bg_img img{
  height: 100%;
  object-fit: cover;
  width: auto
}

.aniv10_space{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 250px;
}


/* top image */
.aniv10_top_image{
  height: 80vh;
  box-sizing: border-box;
  margin: 0 0 250px 0;
}

.aniv10_top_10thlogo{
  position: absolute;
  top:165px;
  left:19%;
  z-index: 100;
}

.aniv10_top_10thlogo img{
  max-width: 75%;
}

@media screen and (max-width: 1024px) {
  .aniv10_top_10thlogo{
    top:97px;
    left:0px;
  }
}

@media screen and (max-width: 768px) {
  .aniv10_top_10thlogo{
    left:5px;
  }
  .aniv10_top_10thlogo img{
    max-width: 45%;
  }
}

.aniv10_top_main_image{
  margin: 50px 50px 10px 50px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 70%;
}

@media screen and (max-width: 768px) {
  .aniv10_top_main_image{
    margin-top:0;
  }
}



.aniv10_top_main_image .item_s{
  width: 7%;
}

.aniv10_top_main_image .item_b{
  text-align: center;
  width: 16%;
}


.aniv10_top_main_image .item_s img,
.aniv10_top_main_image .item_b img{
  max-width: 100%;
}

.aniv10_top_10years{
  width: 100%;
  text-align: center;
}

.aniv10_top_10years img{
max-width: 100%;
}

.aniv10_top_scroll{
  position: absolute;
  bottom: 50px;
  right:200px;
}

@media screen and (max-width: 1200px) {
  .aniv10_top_scroll{
    position: absolute;
    bottom: 50px;
    right:100px;
  }
}

@media screen and (max-width: 768px) {
  .aniv10_top_image{
    height: 90vh;
    box-sizing: border-box;
    margin: 0 0 250px 0;
  }
  .aniv10_top_main_image .item_s{
    width: 16.6%;
  }
  .aniv10_top_main_image .item_b{
    text-align: center;
    width: 100%;
    margin: 10px 0;
  }
  .aniv10_top_main_image .item_b img{
    max-width: 30%;
  }
  .aniv10_top_10years img{
    margin-top: 10px;
    max-width: 80%;
  }
  .aniv10_top_scroll{
    position: absolute;
    bottom: 10px;
    right:40%;
  }
  .aniv10_top_scroll img{
    max-width: 70%;
  }
}


/* message */
.aniv10_message_tit {
  width: 100%;
  background-repeat: no-repeat;
  margin: 0;
  padding: 10px 0 30px 0;
}

.aniv10_message_tit_img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto;
  height: auto;
}

.aniv10_message_subtit{
  margin: 0 0 30px 0;
  font-size: 24px;
  color: #333333;
}

.aniv10_message_tit h2{
  font-size: 100px;
  color: #0D2EA0;
  text-align: right;
  margin: 0;
  padding: 0 50px 0 0 ;
}

.aniv10_message_con {
  margin: 50px 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.aniv10_message_con_item {
  width: calc((100% - 20px * 2) / 2);
  margin-bottom: 50px;
  box-sizing: border-box;
  padding:0;
  color: #333333;
}

.aniv10_message_con_font{
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  padding:20px;
}

.aniv10_message_con_item_mr{
  margin: 0 40px;
}

.aniv10_message_con_item:after {
  content: "";
  display: block;
  clear: both;
}

.aniv10_message_con_link {
  margin: 15px 0 15px 0;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  line-height:2.0;
  letter-spacing:0.2em
}

.aniv10_message_con_img {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding:20px;
}

.aniv10_message_con_img img {
  max-width: 100%;
}

@media screen and (max-width: 1100px) {
  .aniv10_message_con {
    margin: 50px 50px;
  }
 .aniv10_message_con_font{
    font-size: 16px;
  }
  .aniv10_message_con_link {
    font-size: 18px;
  }
  .aniv10_message_con{
    align-items: start;
  }
}

@media screen and (max-width: 768px) {
  .aniv10_message_con {
    margin: 50px 10px;
  }
  .aniv10_message_con_item {
    width: calc((100% - 20px * 1) / 1);
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .aniv10_message_con_item_mr{
    margin: 0 20px;
  }
  .aniv10_message_con_font{
    padding:10px;
    font-size: 14px;
    text-align: left;
  }
}




/* History */
.aniv10_history_tit {
  width: 100%;
  background-position: top left;
  background-repeat: no-repeat;
  padding: 10px 0 40px 0;
}

.aniv10_history_tit_img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto;
  height: auto;
}

.aniv10_history_tit h2{
  font-size: 100px;
  color: #0D2EA0;
  text-align: right;
  margin: 0;
  padding: 0 50px 0 0;
}

.aniv10_history_subtit{
  margin: 0 0 30px 0;
  font-size: 24px;
  color: #333333;
}

.aniv10_history_con {
  margin: 50px 100px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.aniv10_history_con_item {
  width: calc((100% - 20px * 2) / 2);
  margin-left: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding:0;
  color: #333333;
}

.aniv10_history_con_item:after {
  content: "";
  display: block;
  clear: both;
}

.aniv10_history_con_table {
  margin: 15px 0;
  font-size: 18px;
  font-weight: bold;
  box-sizing: border-box;
}

.aniv10_history_con_table table{
  margin: auto;
}

.aniv10_history_con_table td{
  text-align: left;
  padding: 20px 10px 0 0;
}

.aniv10_history_con_table
.aniv10_history_mon{
  padding-left: 50px;
  vertical-align: top;
  font-weight: bold;
}

.aniv10_history_mon{
  white-space:nowrap;
}

.aniv10_history_con_img {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 10px 0;
  text-align: center;
}

.aniv10_history_con_img img {
  max-width: 100%;
}

@media screen and (max-width: 1100px) {
  .aniv10_history_con {
    margin: 50px 50px;
  }
}

@media screen and (max-width: 768px) {
  .aniv10_history_con_item {
    width: calc((100% - 20px * 1) / 1);
    margin-left: 20px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .aniv10_sub_history_year{
    width: 200px;
  }
}

.aniv10_history_award{
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}


.aniv10_history_logoimg{
  margin-left: 10px;
}

.aniv10_history_logoimg img{
  max-width: 100%;
}

/* Topicks */
.aniv10_topics_tit {
  width: 100%;
  background-repeat: no-repeat;
  margin: 0;
  padding: 10px 0 30px 0;
}

.aniv10_topics_tit_img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto;
  height: auto;
}

.aniv10_topics_tit h2{
  font-size: 100px;
  color: #0D2EA0;
  text-align: right;
  margin: 0;
  padding: 0 50px 0 0 ;
}

.aniv10_topics_subtit{
  margin: 0 0 30px 0;
  font-size: 24px;
  color: #333333;
}

.aniv10_topics_con {
  margin: 50px 100px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.aniv10_topics_con_item a{
  padding: 0;
  margin: 0;
}

.aniv10_topics_con_item {
  width: calc((100% - 20px * 2) / 2);
  margin-bottom: 50px;
  box-sizing: border-box;
  background: #0D2EA0;
  padding:0;
}

.aniv10_topics_con_item_mr-l{
  margin-left: 40px;
}

.aniv10_topics_con_item:after {
  content: "";
  display: block;
  clear: both;
}

.aniv10_topics_con_link {
  margin: 15px 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  color: #FFFFFF;
}




.aniv10_topics_con_img {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.aniv10_topics_con_img img {
  max-width: 100%;
}

@media screen and (max-width: 1200px) {
  .aniv10_topics_con {
    margin: 50px 50px;
  }

  .aniv10_topics_con_link {
    font-size: 18px;
  }
}

@media screen and (max-width: 800px) {
  .aniv10_topics_con_link {
    font-size: 12px;
  }
}

@media screen and (max-width: 768px) {
  .aniv10_topics_con_item {
    width: calc((100% - 20px * 1) / 1);
    margin-left: 20px;
    margin-bottom: 20px;
  }
}

/* Events */
.aniv10_events_tit {
  width: 100%;
  background-image: url("../img/events_title.png");
  background-position: top left;
  background-repeat: no-repeat;
  text-align: center;
  margin: 0;
  padding: 10px 0 0 30px;
}

.aniv10_events_tit h2{
  font-size: 100px;
  color: #0D2EA0;
  text-align: right;
  margin: 0;
  padding: 0 100px 0 0 ;
}

.aniv10_events_con {
  margin: 50px;
  padding: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*==================================================
width対応
==================================================*/



@media screen and (max-width: 1180px) {
  .aniv10_message_tit h2,
  .aniv10_history_tit h2,
  .aniv10_topics_tit h2,
  .aniv10_evant_tit h2
  {font-size: 80px;}
  .aniv10_message_con_link {
    font-size: 16px;
  }
  .aniv10_history_con_table{
    font-size: 16px;
  }
}
@media screen and (max-width: 960px) {
  .aniv10_message_tit h2,
  .aniv10_history_tit h2,
  .aniv10_topics_tit h2,
  .aniv10_evant_tit h2
  {font-size: 50px;}
  .aniv10_message_con_link {
    font-size: 16px;
  }
}


@media screen and (max-width: 768px) {
  .aniv10_message_tit h2,
  .aniv10_history_tit h2,
  .aniv10_topics_tit h2,
  .aniv10_evant_tit h2
  {font-size: 38px;}
  .aniv10_message_con_link {
    font-size: 14px;
  }
  .aniv10_history_con_table{
    font-size: 14px;
  }
  .aniv10_history_con_table thead tr th img{
    width: 75%;
    padding-bottom: 15px;
  }
}

@media screen and (max-width: 480px) {
  .aniv10_message_tit h2,
  .aniv10_history_tit h2,
  .aniv10_topics_tit h2,
  .aniv10_evant_tit h2
  {font-size: 28px;}
}



/*==================================================
リンク
==================================================*/




/*==================================================
ローディング画面
==================================================*/

#loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
  background-color: #FFFFFF;
  z-index: 10000;
}

.loading_item{
  top: calc(50% - 100px/2);
  left: calc(50% - 400px/2);
}

.loaded{
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}

.fadeInLoadImage{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }















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

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  /* 下から */
  
  .fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /* 上から */
  
  .fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(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);
    }
  }
  
  /* 右から */
  
  .fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeRightAnime{
    from {
      opacity: 0;
    transform: translateX(100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeInTrigger,
  .fadeUpTrigger,
  .fadeDownTrigger,
  .fadeLeftTrigger,
  .fadeRightTrigger{
      opacity: 0;
  }
  
  /*==================================================
  パタッ
  ===================================*/
  
  
  /* 下へ */
  .flipDown{
  animation-name:flipDownAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes flipDownAnime{
    from {
      transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
    }
  
    to {
      transform: perspective(2500px) rotateX(0);
    opacity: 1;
    }
  }
  
  
  /* 左へ */
  .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;
    }
  }
  
  
  /* 左上へ */
  .flipLeftTop{
  animation-name:flipLeftTopAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes flipLeftTopAnime{
    from {
     transform: translate(-20px,80px) rotate(-15deg);
    opacity: 0;
    }
  
    to {
     transform: translate(0,0) rotate(0deg);
    opacity: 1;
    }
  }
  
  /* 右へ */
  .flipRight{
  animation-name:flipRightAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  perspective-origin:right center;
  opacity:0;
  }
  
  @keyframes flipRightAnime{
    from {
     transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
    }
  
    to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
    }
  }
  
  /* 右上へ */
  .flipRightTop{
  animation-name:flipRightTopAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes flipRightTopAnime{
    from {
     transform: translate(-20px,80px) rotate(25deg);
     opacity: 0;
    }
  
    to {
     transform: translate(0,1) rotate(0deg);
    opacity: 1;
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .flipDownTrigger,
  .flipLeftTrigger,
  .flipLeftTopTrigger,
  .flipRightTrigger,
  .flipRightTopTrigger{
      opacity: 0;
  }
  
  /*==================================================
  くるっ
  ===================================*/
  
  
  /* X 軸（縦へ） */
  .rotateX{
    animation-name:rotateXAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes rotateXAnime{
    from{
      transform: rotateX(0);
      opacity: 0;
      }
    to{
      transform: rotateX(-360deg);
      opacity: 1;
      }
  }
  
  /*　Y軸（横へ） */
  .rotateY{
    animation-name:rotateYAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes rotateYAnime{
    from{
      transform: rotateY(0);
      opacity: 0;
      }
    to{
      transform: rotateY(-360deg);
      opacity: 1;
      }
  }
  
  /* Z 軸（左へ） */
  .rotateLeftZ{
    animation-name:rotateLeftZAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes rotateLeftZAnime{
    from{
      transform: rotateZ(0);
      opacity: 0;
      }
    to{
      transform: rotateZ(-360deg);
      opacity: 1;
      }
  }
  
  /*　Z 軸（右へ） */
  .rotateRightZ{
    animation-name:rotateRightZAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes rotateRightZAnime{
    from{
      transform: rotateZ(0);
      opacity: 0;
      }
    to{
      transform: rotateZ(360deg);
      opacity: 1;
      }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .rotateXTrigger,
  .rotateYTrigger,
  .rotateLeftZTrigger,
  .rotateRightZTrigger{
      opacity: 0;
  }
  
  /*==================================================
  ボンッ、ヒュッ
  ===================================*/
  
  /* 拡大 */
  .zoomIn{
    animation-name:zoomInAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes zoomInAnime{
    from {
    transform: scale(0.6);
    opacity: 0;
    }
  
    to {
      transform: scale(1);
    opacity: 1;
    }
  }
  
  /* 縮小 */
  .zoomOut{
    animation-name:zoomOutAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes zoomOutAnime{
    from {
    transform: scale(1.2);
    opacity: 0;
    }
  
    to {
      transform:scale(1);
    opacity: 1;
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .zoomInTrigger,
  .zoomOutTrigger{
      opacity: 0;
  }
  
  /*==================================================
  じわっ
  ===================================*/
  
  /* ぼかしから出現 */
  .blur{
    animation-name:blurAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .blurTrigger{
      opacity: 0;
  }
  
  /*==================================================
  にゅーん
  ===================================*/
  
  /* 滑らかに変形して出現 */
  .smooth{
    animation-name:smoothAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    　transform-origin: left;
    opacity:0;
  }
  
  @keyframes smoothAnime{
    from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity:0;
    }
  
    to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity:1;
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .smoothTrigger{
      opacity: 0;
  }
  
  /*==================================================
  スーッ（枠線が伸びて出現）
  ===================================*/
  
  /*枠線が伸びて出現*/
  
  .lineTrigger{
    position: relative; /* 枠線が書かれる基点*/
    opacity:0;
  }
  
  .lineTrigger.lineanime{
    animation-name:lineAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes lineAnimeBase{
    from {
      opacity:0;
    }
  
    to {
      opacity:1;  
  }
  }
  
  /*上下線*/
  .lineTrigger::before,
  .lineTrigger::after{
    position: absolute;
    content:"";
    width:0;
    height:1px;
    background:#333;/* 枠線の色*/
  }
  
  /*左右線*/
  .line2::before,
  .line2::after{
    position: absolute;
    content:"";
    width: 1px;
    height:0;
    background:#333;/* 枠線の色*/
  }
  
  /*上線*/
  .lineTrigger::before {
    top:0;
    left:0;
  }
  
  .lineTrigger.lineanime::before {
    animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
  }
  
  /*右線*/
  .line2::before{ 
    top:0;
    right:0;
  }
  
  .lineTrigger.lineanime .line2::before {
    animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
  }
  
  /*下線*/
  .lineTrigger::after { 
    bottom:0;
    right:0;
  }
  
  .lineTrigger.lineanime::after {
    animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
  }
  
  /*左線*/
  .line2::after{ 
    bottom:0;
    left:0;
  }
  
  .lineTrigger.lineanime .line2::after {
    animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
  }
  
  @keyframes lineAnime {
    0% {width:0%;}
      100%{width:100%;}
  }
  
  @keyframes lineAnime2 {
    0% {height:0%;}
      100%{height:100%;}
  }
  
  /*枠線内側の要素*/
  
  .lineTrigger.lineanime .lineinappear{
    animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
    opacity: 0;/*初期値を透過0にする*/ 
  }
  
  @keyframes lineInnerAnime{
    0% {opacity:0;}
      100% {opacity:1;}
  }
  
  
  /*==================================================
  シャッ（背景色が伸びて出現）
  ===================================*/
  
  /*背景色が伸びて出現（共通）*/
  .bgextend{
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    position: relative;
    overflow: hidden;/*　はみ出た色要素を隠す　*/
    opacity:0;
  }
  
  @keyframes bgextendAnimeBase{
    from {
      opacity:0;
    }
  
    to {
      opacity:1;  
  }
  }
  
  /*中の要素*/
  .bgappear{
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.6s;
    animation-fill-mode:forwards;
    opacity: 0;
  }
  
  @keyframes bgextendAnimeSecond{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }
  
  /*左から*/
  .bgLRextend::before{
    animation-name:bgLRextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #666;/*伸びる背景色の設定*/
  }
  @keyframes bgLRextendAnime{
    0% {
      transform-origin:left;
      transform:scaleX(0);
    }
    50% {
      transform-origin:left;
      transform:scaleX(1);
    }
    50.001% {
      transform-origin:right;
    }
    100% {
      transform-origin:right;
      transform:scaleX(0);
    }
  }
  
  /*右から*/
  .bgRLextend::before{
    animation-name:bgRLextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #666;/*伸びる背景色の設定*/
  }
  @keyframes bgRLextendAnime{
    0% {
      transform-origin:right;
      transform:scaleX(0);
    }
    50% {
      transform-origin:right;
      transform:scaleX(1);
    }
    50.001% {
      transform-origin:left;
    }
    100% {
      transform-origin:left;
      transform:scaleX(0);
    }
  }
  
  /*下から*/
  .bgDUextend::before{
    animation-name:bgDUextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #666;/*伸びる背景色の設定*/
  }
  @keyframes bgDUextendAnime{
    0% {
      transform-origin:bottom;
      transform:scaleY(0);
    }
    50% {
      transform-origin:bottom;
      transform:scaleY(1);
    }
    50.001% {
      transform-origin:top;
    }
    100% {
      transform-origin:top;
      transform:scaleY(0);
    }
  }
  
  /*上から*/
  .bgUDextend::before{
    animation-name:bgUDextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #666;/*伸びる背景色の設定*/
  }
  @keyframes bgUDextendAnime{
    0% {
      transform-origin:top;
      transform:scaleY(0);
    }
    50% {
      transform-origin:top;
      transform:scaleY(1);
    }
    50.001% {
      transform-origin:bottom;
    }
    100% {
      transform-origin:bottom;
      transform:scaleY(0);
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  .bgappearTrigger,
  .bgUDextendTrigger,
  .bgDUextendTrigger,
  .bgRLextendTrigger,
  .bgLRextendTrigger{
      opacity: 0;
  }

  /*==================================================
  アニメーション設定
  ===================================*/
  
  /* アニメーションの回数を決めるCSS*/
  
  .count2{  
    animation-iteration-count: 2;/*この数字を必要回数分に変更*/
  }
  
  .countinfinite{  
    animation-iteration-count: infinite;/*無限ループ*/
  }
  
  /* アニメーションスタートの遅延時間を決めるCSS*/

  .delay-time025{  
    animation-delay: 0.25s;
  }
  
  .delay-time05{  
    animation-delay: 0.5s;
  }

  .delay-time075{  
    animation-delay: 0.75s;
  }

  .delay-time1{  
    animation-delay: 1s;
  }

  .delay-time125{  
    animation-delay: 1.25s;
  }
  
  .delay-time15{  
    animation-delay: 1.5s;
  }

  .delay-time175{  
    animation-delay: 1.75s;
  }
  
  .delay-time2{  
    animation-delay: 2s;
  }

  .delay-time225{  
    animation-delay: 2.25s;
  }

  .delay-time25{  
    animation-delay: 2.5s;
  }
  
  /* アニメーション自体が変化する時間を決めるCSS*/
  
  .change-time05{  
    animation-duration: 0.5s;
  }
  
  .change-time1{  
    animation-duration: 1s;
  }
  
  .change-time15{  
    animation-duration: 1.5s;
  }
  
  .change-time2{  
    animation-duration: 2s;
  }
  
  .change-time25{  
    animation-duration: 2.5s;
  }

  .fadeDown {
    animation-name: fadeDownAnime;/*アニメーションの定義名*/
    animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/
    animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
    opacity:0;
    }
    
    /*アニメーションの開始から終了までを指定する*/
    @keyframes fadeDownAnime{
      from {
        opacity: 0;
      transform: translateY(-20px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }

    .countinfinite{
      animation-iteration-count: infinite;/*無限ループ*/
     }