@charset "utf-8";


.header{
   font-size: 20px;
   font-family: "Yu Gothic Pr6N B";  
}

.title{
   text-align: center;
}
.top{
   width: 100%;
   height: auto;
   margin-top: 20px;
}


.top2img{
    width: 100%;
    height: auto;
    position: relative;
    margin-top: -20px;
}
 .top2text1{
    color: #fff;
    display: table;
    list-style: none;
    margin: auto;
    position: absolute;
    z-index: 999;
    margin-top: -600px;
    font-size: 12px;
    font-family: "Yu Gothic Pr6N B";
 }

 .top2text2{
    color: #fff;
    display: table;
    list-style: none;
    margin: auto;
    position: absolute;
    z-index: 999;
    margin-top: -500px;
    font-size: 12px;
    font-family: "Yu Gothic Pr6N B";
 }

.mainyudo{
   position: absolute;
   z-index: 999;
   margin-top: -170px;
   margin-left: 250px; 
}



.btnlinestretches5{
   /*線の基点とするためrelativeを指定*/
  position:relative;
   /*リンクの形状*/ 
   color: #fff;;
   padding: 10px 0;
   display:inline-block;
   text-decoration: none;
   outline: none;
   font-size: 15px;
   font-family:"Yu Gothic Pr6N B"; 
}

/*線の設定*/
.btnlinestretches5::before {
   content: "";
   /*絶対配置で線の位置を決める*/
   position: absolute;
   z-index: 999;
   bottom: 0px;
   /*線の形状*/
   width:  100%;
   height: 1px;
   background: #fff;
}

/*矢印の設定*/
.btnlinestretches5::after {
   content: "";
   /*絶対配置で線の位置を決める*/
   position: absolute;
   z-index: 999;
   bottom:-4px;
   /*矢印の形状*/
   width: 8px;
   height: 8px;
   border-top: 1px solid #fff;
   border-right: 1px solid #fff;
   transform: rotate(45deg);
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
   animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
   animation: arrowlong02 2s ease infinite;
}

@keyframes arrowlong01{
   0%{width:0;opacity:0}
   20%{width:0;opacity:1}
   80%{width:105%;opacity:1}
   100%{width:105%;opacity:0}
}

@keyframes arrowlong02{
   0%{left:0;opacity:0}
   20%{left:0;opacity:1}
   80%{left:103%;opacity:1}
   100%{left:103%;opacity:0}
}





 .top3img{
    width: 100%;
    height: auto;
    position: absolute;
    margin-top:50px;
    z-index: 10;
 }

 .top3text{
    position: absolute;
    z-index: 50;
    display: table;
    list-style: none;
    margin: auto;
    margin-top: 350px;
    color: #fff;
    font-size: 12px;
    font-family: "Yu Gothic Pr6N B";
 }


 .orange{
   width: 100%;
   height: auto;
   position: absolute;
   z-index: 30;
   margin-top: -75px;
    
 }
 .gimon1text{
   position: absolute;
   z-index: 50;
   display: table;
   margin: 0 auto;
   list-style: none; 
   margin-top: 30px;
   color: #fff;
   font-size: 15px;
   font-family: "Yu Gothic Pr6N B";
 }
 .top4img{
    width: 100%;
    height: auto;
    position: absolute;
    margin-top: 650px;
    z-index: 10;
 }

 .top4text{
   position: absolute;
    z-index: 999;
    display: table;
    list-style: none;
    margin: auto;
    margin-top: 830px;
    color: #fff;
    font-size: 12px;
    font-family: "Yu Gothic Pr6N B";
 }


 .green{
   width: 100%;
   height: auto;
   position: absolute;
   z-index: 30;
   margin-top: 500px;
 }
 .gimon2text{
   position: absolute;
   z-index: 50;
   display: table;
   list-style: none; 
   margin-top: 600px;
   color: #fff;
   font-size: 15px;
   font-family: "Yu Gothic Pr6N B";
 }

 .top5img{
   width: 100%;
   height: auto;
   position: absolute;
   margin-top: 1340px;
   
 }

 .blue{
   position: absolute;
    z-index: 30;
    margin-top: 1160px;
 }
 .gimon3text{
   position: absolute;
   z-index: 50;
   display: table;
   list-style: none; 
   margin-top: 1260px;
   color: #fff;
   font-size: 15px;
   font-family: "Yu Gothic Pr6N B";
 }


 
 
 .top5text{
   position: absolute;
    z-index: 999;
    display: table;
    list-style: none;
    margin: auto;
    margin-top: 1700px;
    color: #fff;
    font-size: 12px;
    font-family: "Yu Gothic Pr6N B";
 }