/*ゴシック体系サンセリフ体、Noto Sans JP*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/*--------------*/
/*-- 基本要素 --*/
/*--------------*/
* {
        margin: 0;
        padding: 0;
}

html {
        height: 100%;
}

body {
        font-family: "Noto Sans JP";
        color : #6b4f33;
}

table {
        font-size:14px;
        line-height: 22px;
}

td {
        padding: 10px;
        text-align:  center; 
}

h1 {
        font-size:36px;
}

h2 {
        font-size:24px;
        padding:5px 20px 10px 10px;

}


dd {
        border-bottom: 2px dotted #cccccc;
        padding-bottom:10px;
}

dt {
        padding-top:10px;
        color:#475474;
        font-size: 14px;
        font-weight: bold;
}

a{
	color: #6b4f33;
	text-decoration: none;
}
a:hover{
	color: orange; /*-- 文字色をオレンジ色 --*/
}
/* class */
.top{

}
.sky{
    background : #7ec6d3;
    width: 100%;
}

.sky div{
    width:86%;
    padding: 12px 0 12px 0;
    margin: 16px 0 0 0;
    background: #b8f4f3;/*背景色*/
}

.darksky{
    background : #4a728a;
    width: 100%;
}

.darksky div{
    width:60%;
    padding: 5px 20px 5px 20px;
    background: #b9e1f0;/*背景色*/
}

.ground{
    background : #5391ad;
    width: 100%;
}

.sky2{
    background : #ccdff8;
    width: 100%;
}


.footer{
    background : #5391ad;
    width: 100%;
}

.text1{
    font-size:14px;
    line-height: 26px; 
 }
  
.text2{
    font-size:14px;
    line-height: 20px; 
    font-weight: bold;
     margin:6px 0 0 0;
}
 
 .text3{
    font-size:22px;
    line-height: 30px; 
    font-weight: bold;
    margin:0 0 8px 0;
} 

.missionno{
    font-size:30px;
    line-height: 30px; 
    font-weight: bold;    
}

.missiontext{
    font-size:16px;
    line-height: 18px; 
    font-weight: bold;
    margin:18px 0 0 0;
}

.rewardtext{
    font-size:16px;
    line-height: 18px;
    margin:0 0 10px 0;
}


.lefttitle{
    font-size:16px;
    line-height: 18px; 
    font-weight: bold;
    text-align: left;
    margin: 20px 20px 0  20px;
}

.lefttext{
    font-size:16px;
    line-height: 18px; 
    text-align: left;
    margin: 0 20px 0  20px;
}

.lefttext2{
    font-size:12px;
    line-height: 16px; 
    text-align: left;
    margin: 0 20px 0  20px;
}

.lefttextred{
    font-size:16px;
    line-height: 18px; 
    text-align: left;
    margin: 0 20px 0  20px;
    color : #ce1b44;
}

.footertext{
    font-weight: bold;
    line-height: 36px; 
    text-align: left;
    padding: 20px 20px 20px 20px;
}

hr.style1{
    border-top: 2px dotted #6b4f33;
    margin: 20px 20px 0px 20px;
    background : #ccdff8;
}

.copywritetext{
    font-size:16px;
    color : #ffffff;
    padding: 20px 20px 20px 20px;
    
}


.relative {
    position: relative;
/*    width: 200px;*/
/*    height:50px;*/
    margin: 0 auto;
}
.absolute {
    position: absolute;
    width: 50px;
/*    left: 10px;*/
    right:10px;
    top: -10px;
}


/* animation */
.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    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:0.6s;
	animation-delay: 0.4s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:0.6s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #6b4f33;/*伸びる背景色の設定*/
}
@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);
	}
}

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

/* その場で */
.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);
  }
}


/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.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;
  }
}

/*光りながら出現*/
.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.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;}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/* アニメーションスタートの遅延時間を決めるCSS*/

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

.delay-time07{  
  animation-delay: 0.7s;
}


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

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

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

.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;
}