@charset "utf-8";
main.reserachContent{clear:both;}
main.reserachContent img{max-width:100%; height:auto;}
main.reserachContent .relBox{position:relative;}
main.reserachContent .relBox .abBox{position:absolute; left:0; top:0;}
main.reserachContent .nav {background: #fff; padding: 75px 0 75px;}
main.reserachContent .nav p{text-align: center;}
main.reserachContent .nav a{transition:opacity .3s ease; display:block; width:670px; margin:0 auto;}
main.reserachContent .nav a img{display:block; margin:0 auto;}
main.reserachContent .nav a.linkbtn {padding:10px; display:block; border: 5px solid #ddd; margin:20px auto; color:#333; background-color:#f3f3f3; width:670px; font-size:21px;}
main.reserachContent .nav a:hover{opacity:.7;}

/* アニメーションの基本パターンができたらここに追加する。
dulationやdelayやtiming functionは個別のCSSで上書きしてもいい。
======================================================================*/
/* フェードイン */
.animated .anim.fadeIn{opacity:0; transition:opacity .4s ease-in;}
.animated.play .anim.fadeIn{opacity:1;}
/* せり上がりながらフェードイン */
.animated .anim.fadeInUp,
.animated .anim.fadeInUp.abBox{opacity:0; top:200px; transition:opacity .3s ease-in, top 1.4s cubic-bezier(.17,.67,.52,1.25);}
.animated.play .anim.fadeInUp,
.animated.play .anim.fadeInUp.abBox{opacity:1; top:0;}
/* 落ちながらフェードイン (.longで軌跡と時間を長く)*/
.animated .anim.fadeInDown,
.animated .anim.fadeInDown.abBox{opacity:0; top:-200px; transition:opacity .4s ease,top .6s cubic-bezier(.17,.67,.52,1.25);}
.animated .anim.fadeInDown.long,
.animated .anim.fadeInDown.long.abBox{top:-400px; transition:top .6s cubic-bezier(.17,.67,.8,1.54);}
.animated.play .anim.fadeInDown,
.animated.play .anim.fadeInDown.abBox{opacity:1; top:0;}

/* .aIdx（アニメーションインデックス）を01～10で0.4秒刻みで設定するデフォルトクラス */
.animated .anim.aIdx01{transition-delay:0.2s !important;}
.animated .anim.aIdx02{transition-delay:0.6s !important;}
.animated .anim.aIdx03{transition-delay:1.0s !important;}
.animated .anim.aIdx04{transition-delay:1.4s !important;}
.animated .anim.aIdx05{transition-delay:1.8s !important;}
.animated .anim.aIdx06{transition-delay:2.2s !important;}
.animated .anim.aIdx07{transition-delay:2.6s !important;}
.animated .anim.aIdx08{transition-delay:3.0s !important;}
.animated .anim.aIdx09{transition-delay:3.4s !important;}
.animated .anim.aIdx10{transition-delay:3.8s !important;}


@media (max-width: 767px){
main.reserachContent .nav {padding:20px 15px;}
main.reserachContent .nav a{width:auto;}
main.reserachContent .nav a.linkbtn {width:auto; font-size:16px;}
}


/* pie chart */
.pieBox{width:400px; height:400px; border-radius:50%; overflow:hidden; margin:0 auto;}
.pieMask{position:relative; margin: 0 auto; background:transparent; transform:rotate(180deg); border-radius:50%; overflow:hidden;}
.pieMask, .pieMask * {box-sizing:border-box;}
.pieMask{width:400px; height:400px;}
.pieMask .pie{width:50%; height:100%; transform-origin:100% 50%; position:absolute; background:#ecfcea;}
.pieMask .spinner{border-radius: 100% 0 0 100% / 50% 0 0 50%; z-index:200; border-right:none; animation: rotation 1s linear forwards;}
.pieMask:hover .spinner,
.pieMask:hover .filler,
.pieMask:hover .mask {animation-play-state: running;}
.pieMask .filler {border-radius: 0 100% 100% 0 / 0 50% 50% 0; left:50%; opacity:0; z-index:100; animation: opaque 1s steps(1, end) forwards reverse; border-left: none;}
.pieMask .mask{width:50%; height:100%; position:absolute; background:inherit; opacity:1; z-index: 300; animation: opaque 1s steps(1, end) forwards;}
@keyframes rotation{
	0% {transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
@keyframes opaque {
	0%{opacity:0;}
	50%,100%{opacity:1;}
}