/* フレーム設定-------------------------------------------------------------------------------- */

#adspecial_rpa_202006{
padding: 0;

}

#adspecial_rpa_202006.adspecial_type1{
max-width:none !important;
width:100% !important;
background-color:#f5f5f5;
position:relative;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 3% 0;
text-align: center;
background-color:#e0e0e0;
color:#050505;
}

.block_sponsored a{
color:#0a269c;
}





.sp-wrap{
background:url(/extra/rpa_202006/media/img_hero.jpg) right top no-repeat;
background-attachment:fixed;
background-size:cover;
padding:10px 0 0;
position:relative;
animation:fade-in 0.3s linear 0.2s forwards;
opacity:0;
}

.category-area{
background:url(/extra/rpa_202006/media/parts_cube.png) left top no-repeat;
background-attachment:fixed;
animation:fade-in 0.3s linear 1.0s forwards;
opacity:0;
}


.sponcor-area{
margin:0;
background:#fff;
}


.sp-wrap .label{
background-color:#fff;
color:#0c4b99;
margin:10px 0;
text-align:center;
font-weight:bold;
width:7%;
animation:fade-in 0.5s linear 0.4s forwards;
opacity:0;
}




/* headline-------------------------------------------------------------------------------- */


@keyframes fade-in{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}



@keyframes fade-top{
  0% {
    opacity: 0;
transform:translateY(-50px);
}

  100% {
    opacity: 1;
transform:translateY(0);
}
}


@keyframes fade-scale{
  0% {
    opacity: 0;
transform:scale(0.1,0.1);
}

  100% {
    opacity: 1;
transform:scale(1,1);
}
}


@keyframes yellow{
  0% {
color:#fff;
}
  100% {
color:#ffe600;
}
}


@keyframes green{
  0% {
color:#fff;
}
  100% {
color:#04af9d;
}
}

@keyframes line {
  0% {width:0;}
  100% {width:100%;}
}


.hero-area{
margin:0 auto;
padding:5% 8%;
height:100%;
border-radius:10px;
position:relative;
z-index:100;
/*display:flex;*/
}


.hero-area h1{
font-size:250%;
text-align:left;
line-height:1.3;
color:#fff;
width:100%;
position:relative;
animation: fade-in 0.5s linear 1.0s forwards;
opacity:0;
}


.hero-area h1 span.text01{
animation: yellow 0.3s linear 2.0s forwards;
}

.hero-area h1 span.text02{
animation: green 0.3s linear 2.3s forwards;
}

.hero-area h1 span.text03{
animation: yellow 0.3s linear 2.6s forwards;
font-size:110%;
}




.lead_block{
margin:3% 0 0 0;
padding:0;
border-radius:10px;
position:relative;
}


.lead_block:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(10,38,156,0.4);
animation: fade-scale 0.3s linear 2.6s forwards;
opacity:0;
z-index:-1;
}

.lead_block p{
color:#fff;
padding:4%;
font-size:100%;
font-weight:bold;
line-height:1.5;
animation: fade-in 0.5s linear 3.0s forwards;
opacity:0;
}







/* contents-------------------------------------------------------------------------------- */


.show{/*スクロール*/
  opacity : 1;
  transition: 1.0s;
}




.item_block{
margin:5% 0;
padding:0 8%;
padding:0;
display:flex;
justify-content: space-between;
width:100%;
opacity:0;
}


.item_block h2{
margin:0;
padding:5% 3%;
width:20%;
text-align:center;
font-family: 'Oswald', sans-serif;
font-size:200%;
color:#fff;
letter-spacing:0.01em;
position:relative;
background:rgba(0,0,0,0.6);
line-height:1.3;
transition: 0.5s ease 1.0s;
}

.item_block h2 span{
display:block;
font-size:40%;
font-family:"游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic;
margin-top:5px;
}



.item_block img{
max-width:100%;
display:block;
margin:0 auto 10px;
}

.item_block ul li a{
padding:5%;
border-radius:15px;
display:block;
}

.item_block ul li a:hover{

}

.item_block ul li a span{
font-weight:bold;
font-size:120%;
color:#fff;
}

.item_block ul li a:hover span{
color:#fff;
transition:0.3s;
}



.item_special ul,
.item_wp ul,
.item_article ul
{
padding:3%;
background:rgba(10,38,156,0.6);
width:80%
}





/* special **************************************/



.item_block h2.special{
}

.item_block h2.special span{
color:#ffe600;
}

.item_special ul{
display:flex;
flex-wrap:wrap;
}


.item_special li{
margin:15px 0;
display:block;
width:45%;
}

.item_special li .new{
text-align:center;
margin:10px auto;
display:block;
font-size:14px;
font-weight:bold;
color:#e9b913;
}


.item_special li a{
display:block;
padding:20px 30px;
color:#fff;
}


.item_special li a img{
text-align:center;
margin:15px auto;
display:block;
width:400px;
box-shadow:0 0 10px #333;
}

.item_special li a span{
padding:10px 0;
display:block;
font-size:120%;
}

.item_special li a:hover span{
color:#ffe600 !important;
}

/*.item_special li a:hover img{
filter: grayscale(100%);
}*/


.item_special li:hover div{
width:100%;
height:auto;
overflow:hidden;
}

.item_special li:hover div img{
transform: scale(1.1, 1.1);
transition:0.3s;
}







/* white paper **************************************/



.item_block h2.wp{
}


.item_block h2.wp span{
color:#1dd1be;
}


.item_wp ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.item_wp li{
margin:25px 10px;
width:28%;
}

.item_wp li a{

}




.item_wp li a img{
max-width:100%;
}

.item_wp li a span{
margin-top:5px;
padding:5px 0;
display:block;
line-height:1.6;
color:#f9adea;
}

.item_wp li a:hover span{
color:#7f7de0;
}


.item_wp li a:hover img{
filter: grayscale(100%);
}






/* article **************************************/



.item_block h2.article{
}



.item_block h2.article span{
color:#4fbefd;
}

.item_article ul{
display:flex;
flex-wrap: wrap;
}

.item_article ul li{
margin:2% 10px;
padding-bottom:25px;
border-bottom:1px dotted #fff;
width:46%;
}

.item_article li a{
padding:0 !important;
display:flex !important;
transition:0.5s ease;
}

.item_article li a img{
width:150px;
height:112.5px;
margin:0;
display:inline;
}


.item_article li a span{
line-height:1.6;
color:#fff;
margin:0 15px;
font-size:110% !important;
}

.item_article li a:hover span{
color:#35b5ff !important;
}

.item_article li a:hover img{
filter: grayscale(100%);
}





/* sponsor */


.item_block h2.sponsor{
color:#fff;
background-color:#22326b;
position:relative;
}


/*.item_block h2.sponsor:after{
content:"";
position:absolute;
top:50%;
right:0;
width:85%;
height:1px;
background-color:#22326b;
}*/


.item_sponsor{
background-color:#fff !important;
margin:5% 0 0 0;
}


.item_sponsor ul{
padding:3%;
width:80%
}

.item_sponsor ul li{
width:200px;
}





/* responsive -------------------------------------------------------------------------------- */




@media screen and (max-width:960px){



.sp-wrap{
background-position:60% top;
background-size:cover;
}

.hero-area{
padding:3% 5%;
}


.hero-area .icon img{
width:80%;
display:block;
}


.hero-area .title{
font-size:160%;
width:100%;
}


.item_block{
background-position:center center;
}

.item_block h2{
font-size:150%;
}


.item_block h2 span:before{
top:-50px;
}



/*special*/

.item_special li{
width:70%;
}


.item_special li a span{
font-size:100%;
}




/*wp*/

.item_wp li{
width:40%;
}


/*article*/


.item_article ul{
display:block;
}

.item_article ul li{
width:100%;
margin:10% 0;
padding-bottom:15px;
}

.item_article li a span{
font-size:100% !important;
}



}




@media screen and (max-width:640px){



.sp-wrap{
background-position:60% top;
background-size:cover;
}

.sp-wrap .label{
width:20%;
}


.category-area{
background:none;
}


.hero-area .title{
font-size:150%;
}


.hero-area .title{
width:100%;
}


.lead_block{
padding:6% 0 0;
font-size:90%;
}


.item_block{
padding:8% 0;
background-position:top center;
}


.item_block h2{
font-size:110%;
width:30%
}



.item_special ul,
.item_wp ul, 
.item_article ul{
width:70%;
}

.item_special li,
.item_wp li,
.item_article li{
width:100%;
}





.item_block ul li a span{
font-size:100%;
}



.item_article li a{
display:block !important;
}

.item_article li a img{
display:block;
margin:0 auto 10px;
}

.item_article li a span{
margin:0;
text-align:center;
}



}