@charset "utf-8";
@font-face{font-family:'marunichi'; src:url('/jp/assets/fonts/marunich.woff') format('woff'); font-weight:normal; font-style:normal;}
/* トップページ */
.page-container ul.researchArchives {display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -10px; }
.page-container ul.researchArchives li {width: 25%; margin-bottom: 25px; font-size: 14px; padding: 10px; }
.page-container ul.researchArchives li.headline {width: 50%; }
.page-container ul.researchArchives li a {display: block; line-height: 1.4; position: relative; color: #111111; }
.page-container ul.researchArchives li a .img {overflow: hidden; }
.page-container ul.researchArchives li a .img img {display: block; transition: transform .3s ease; }
.page-container ul.researchArchives li a:hover .img img {transform: scale(1.075); }
.page-container ul.researchArchives li a b {display: block; font-weight: bold; margin-bottom: 10px; position: relative; padding-left: 22px; }
.page-container ul.researchArchives li a b::before {display: block; font-family: 'marunichi'; position: absolute; font-weight: normal !important; }
.page-container ul.researchArchives li a b::before {content: '\e91f'; color: #2a549b; left: 0; top: -0.25em; font-size: 20px; }
.page-container ul.researchArchives li a b.pdf::before {content: '\e91e'; color: #d70c18; }
.page-container ul.researchArchives li a .img {margin: 0 auto 10px; width: 100%; border-radius: 10px; border: 1px #f5f5f5 solid; }
.page-container ul.researchArchives li a .img img {width: 100%; }
.page-container ul.researchArchives li a .img + div {padding: 0px; }



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){
.page-container ul.researchArchives {margin: 0 -10px; }
.page-container ul.researchArchives li {width: 50%; margin-bottom: 10px; font-size: 12px; }
.page-container ul.researchArchives li.headline {width: 100%; font-size: 14px; }
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;}
}