@charset "utf-8";
.reseachTitle{position:relative; background:#64b5f6; height:620px; padding-top: 20px;}
.reseachTitle header{width:1120px; height:620px; margin:0 auto; position:relative;}
.reseachTitle header .content{width:100%; height:500px; position:relative;}
.reseachTitle header .content h1,
.reseachTitle header .content > div{position:absolute; left:0;}
.reseachTitle .abstruct{width:768px; margin:-100px auto 10px auto; background:#fff url("/jp/contents/research/graphic/018/icnMemo.png") no-repeat 97.5% center; border-radius:20px; padding:25px 120px 25px 25px; position:relative;}
.reseachTitle .abstruct p{font-size:15px; line-height:2;}
.bg1{background:url("/jp/contents/research/graphic/019/bg01.png"); border-bottom: solid 2px #1E88E5;}
.bg2{background:url("/jp/contents/research/graphic/019/bg02.png"); border-bottom: solid 2px #1E88E5;}
section{padding:50px 0; max-width:940px; margin:0 auto;}
section h2{width:740px; margin:0 auto 50px;}
section h3{width:740px; margin:120px auto 30px;}
section h2+h3{margin:0 auto 30px;}
section .subBox{margin:0 auto 70px;}
section .commentBox{background:#E1F5FE url("/jp/contents/research/graphic/019/icon-soda.png") no-repeat 30px center; border-radius:20px; padding:25px 25px 25px 110px; border:3px #1E88E5 solid; margin:70px auto 0; width:780px;}
section .commentBox p{font-size:14px; line-height:2;}
section.sec01{max-width:940px;}
section.sec02 .graph{max-width:900px; margin:0 auto 70px;}
section.sec02 .ranking{max-width:880px; margin:0 auto 70px;}
section.sec03 .graph{max-width:768px; margin:0 auto 70px;}
section.sec03 .ranking{max-width:880px; margin:0 auto 70px;}
section.sec04 .ranking{max-width:810px; margin:30px auto 70px;}
main.reserachContent .relBox .abBox.chartA,
main.reserachContent .relBox .abBox.chartB,
main.reserachContent .relBox .abBox.chartC,
main.reserachContent .relBox .abBox.chartD{width:456px; height:456px; left:calc(50% - 228px); top:105px !important;}
main.reserachContent .relBox .abBox.chartB{top:81px !important;}
main.reserachContent .relBox .abBox.chartC{bottom:74px;}
main.reserachContent .relBox .abBox.chartD{bottom:14px;}

.sec02-05{ margin-top: -160px;}

section.sec02 .play .aIdx01 .bag{position: relative;}
section.sec02 .play .aIdx01 .rank3,
section.sec02 .play .aIdx01 .rank2,
section.sec02 .play .aIdx01 .rank1{position: absolute; bottom: 0; left: 22vw;}
section.sec02 .play .aIdx01 .rank3{animation: key3 0.5s ease-out 1s 1 alternate forwards;}
section.sec02 .play .aIdx01 .rank2{animation: key2 0.5s ease-out 1.5s 1 alternate forwards;}
section.sec02 .play .aIdx01 .rank1{animation: key1 0.5s ease-out 2s 1 alternate forwards;}
@keyframes key3 {
    from {transform: translate(0,0);}
    to {transform: translate(300px,-200px);}
  }
@keyframes key2 {
    from {transform: translate(0,0);}
    to {transform: translate(-300px,-200px);}
  }
@keyframes key1 {
    from {transform: translate(0,0);}
    to {transform: translate(0,-250px);}
  }
  section.sec02 .animated.play .anim.fadeInDown.abBox.aIdx02{transition-delay:1s !important;}
  section.sec02 .animated.play .anim.fadeInDown.abBox.aIdx03{transition-delay:1.5s !important;}
  section.sec02 .animated.play .anim.fadeInDown.abBox.aIdx04{transition-delay:2s !important;}

/*snowJS*/
.snowfall-flakes{transition: none}
#snow img{opacity: 0;transition: opacity 2s}
#snow.fadein img{opacity: 1;}
#snow{position: absolute;left:0;top:0;width:100%;height:100%;overflow: hidden}
#snow .inner{width:100%;height:150%;position: absolute;left:0;top:-20%}


@media (max-width: 767px){
.reseachTitle{background:#64b5f6; height:120vw;}
.reseachTitle header{width:100%; height:100%; overflow:hidden;}
.reseachTitle header .content{width:100%; height:60vw; position:relative;}
.reseachTitle .abstruct{width:calc(100vw - 30px); margin: -50px auto 10px; background:#fff url("/jp/contents/research/graphic/018/icnMemo.png") no-repeat center 10px; background-size:40px auto; border-radius:10px; padding:60px 15px 15px 15px;}
.reseachTitle .abstruct p{font-size:14px; line-height:1.8;}
.animated .anim.aIdx06{ transition-delay: 1.5s !important;}
section{padding:40px 10px; max-width:none;}
section h2{width:100%; margin:0 auto 20px;}
section h3{width:100%; margin:50px auto 10px;}
section h2+h3{margin:0 auto 20px;}
section .subBox{margin:0 auto 20px;}
section .commentBox{background:#E1F5FE url("/jp/contents/research/graphic/019/icon-soda.png") no-repeat center 10px; background-size:24px auto; border-radius:10px; padding:60px 15px 15px 15px; border:3px #1E88E5 solid; margin:0 5px 0; width:auto;}
section .commentBox p{font-size:13px; line-height:1.5;}
section.sec01{max-width:none;}
section.sec02 .graph{max-width:none; margin:0 auto 30px;}
section.sec02 .ranking{max-width:none; margin:0 auto 30px;}
section.sec03 .graph{max-width:none; margin:0 auto 30px;}
section.sec03 .ranking{max-width:none; margin:0 auto 30px;}
section.sec04 .ranking{max-width:none; margin:0 auto 30px;}

main.reserachContent .relBox .abBox.chartA,
main.reserachContent .relBox .abBox.chartB{width:48vw; height:48vw; left:calc(50% - 24.3vw); top:6.8vw !important;}
main.reserachContent .relBox .abBox.chartA{top:9.5vw !important;}

.rank1,
.rank2,
.rank3{width: 27vw;}

section.sec02 .play .aIdx01 .rank3,
section.sec02 .play .aIdx01 .rank2,
section.sec02 .play .aIdx01 .rank1{left: 35vw; bottom: 10px;}

@keyframes key3 {
    from {transform: translate(0,0);}
    to {transform: translate(130px,-85px);}
  }
@keyframes key2 {
    from {transform: translate(0,0);}
    to {transform: translate(-140px,-85px);}
  }
@keyframes key1 {
    from {transform: translate(0,0);}
    to {transform: translate(0,-110px);}
  }
/* 
  .animated .anim.aIdx01{transition-delay:0.5s !important;}
  .animated .anim.aIdx02{transition-delay:1s !important;}
  .animated .anim.aIdx03{transition-delay:1.5s !important;}
  .animated .anim.aIdx04{transition-delay:2s !important;}
  .animated .anim.aIdx05{transition-delay:2.5s !important;}
  .animated .anim.aIdx06{transition-delay:3s !important;} */

}