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

#adspecial_dataplatform_202003{
padding: 0;
}

#adspecial_dataplatform_202003.adspecial_type1{
max-width:none !important;
width:100% !important;
background-size:cover;
background:url(/extra/dataplatform_202003/media/img_back.jpg) no-repeat;
background-position:center center;
background-attachment: fixed;
position:relative;
}

footer{
margin-top:0;
}


.block_sponsored {
    padding: 3% 0;
    text-align: center;
background:rgba(0,0,0,0.8);
color:#fff;
}

.block_sponsored a{
color:#eac206;
}



.sp-wrap{
margin:0 10%;
background:rgba(14,30,41,0.55);
}


.sp-contents{
padding:0 5%;
}




/* headline設定-------------------------------------------------------------------------------- */



.hero-area{
position:relative;
height:100%;
padding:4%;
}


.hero-area .title{
font-size:230%;
text-align:center;
line-height:1.6;
color:#fff;
width:100%;
padding:0 0 5% 0;
opacity: 0;
animation: fadein 1.0s linear 1.5s forwards;
text-shadow:0 0 10px #151515;
}


.hero-area .sub-title{
text-align:center;
padding:4% 0 3% 0;
font-size:160%;
color:#e9b913;
opacity: 0;
animation: fadein 1.0s linear 0.5s forwards;
position:relative;
width:100%;
}


.hero-area .sub-title:after{
content:"";
position:absolute;
bottom:20px;
left:30%;
width:40%;
height:2px;
background-color:#e9b913;
animation: fade-scale 1.0s linear 0.5s forwards;
opacity:0;
}



.lead_block{
margin:0 5%;
color:#fff;
font-size:110%;
line-height:1.5;
animation: fadein 1.0s linear 2.3s forwards;
opacity:0;
}



@keyframes fadein{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}



@keyframes fade-scale{
0%{
opacity:0;
transform:scaleX(0);
}
100%{
opacity:1;
transform:scaleX(1);
}
}







/* category設定-------------------------------------------------------------------------------- */




.item_block{
padding:2% 0;
background:url(/extra/dataplatform_202003/media/img_content.png) no-repeat;
background-position:bottom center;
background-size:cover;
}


.item_block h2{
width:100%;
text-align:center;
color:#fff;
font-size:170%;
position:relative;
}

.item_block h2:after{
content:"";
position:absolute;
bottom:-5px;
left:50%;
width:0;
height:1px;
background-color:#fff;
}


.item_block h2.slide:after{
width:20%;
left:40%;
transition:1.0s;
}





.item_block h2.sponcor{
color:#0452df;
}


.item_block h2.sponcor:after {
background-color:#0452df;
}




.item_sp{
}

.item_wp{
}

.item_article{
}

.item_sponcor{
background:#fff;
}



/* special */

.item_block h2.sp{
color:#e9b913;
}


.item_block h2.sp:after{
background-color:#e9b913;
}


.item_sp ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
margin:5% auto;
}


.item_sp li{
margin:15px 15px 30px;
display:block;
width:42%;
}

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


.item_sp li a{
display:block;
padding:4% 6%;
color:#e9b913;
transition:1.0s ease;
background:rgba(0,0,0,0.7);
}

.item_sp li a:hover{
background:rgba(233,185,19,0.3);
}


.item_sp li a img{
text-align:center;
margin:15px auto 0;
display:block;
}

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

.item_sp li a:hover span{
color:#fff;
}

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




/* white paper */


.item_block h2.wp{
color:#f9adea;
}

.item_block h2.wp:after{
background-color:#f9adea;
}


.item_wp ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
margin:5% auto;
}

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

.item_wp li a{
display:block;
padding:20px;
border-radius:3px;
transition:0.5s ease;
background:rgba(0,0,0,0.4);
}

.item_wp li a:hover{
background:rgba(249,173,234,0.3);
}


.item_wp li a img{
max-width:100%;
margin:0 auto;
text-align:center;
display:block;
}

.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:#fff;
}


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




/* article */



.item_block h2.article{
color:#01d0ce;
}

.item_block h2.article:after{
background-color:#01d0ce;
}



.item_article ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
margin:5% auto;
}

.item_article li{
margin:25px 10px;
display:block;
width:26%;
}

.item_article li a{
display:block;
padding:20px;
border-radius:3px;
transition:0.5s ease;
background:rgba(0,0,0,0.4);
}

.item_article li a:hover{
background:rgba(1,208,206,0.3);
}


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

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

.item_article li a:hover span{
color:#fff;
}


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





/* sponcor */


.logo-area{
display:flex;
flex-wrap: wrap;
justify-content:space-around;
margin:2% auto;
}

.logo-area li{
width:250px;
margin:0 15px;
text-align:center;
}




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




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



.sp-wrap{
margin:0 5%;
}

.hero-area{
background-size:250%;
background-position:center top;
}


.hero-area .tag{
width:50%;
}


.hero-area .tag span{
font-size:90%;
}

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

.hero-area .sub-title:after{
bottom:15px;
}

.hero-area .title{
font-size:150%;
padding:0 5% 5%;
width:100%;
}


.lead_block{
font-size:90%;
}


.item_block{
background-position:center center;
}

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




/*special*/

.item_sp li{
width:70%;
}


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


/*wp*/

.item_wp li{
width:40%;
}

/*article*/

.item_article li{
width:40%;
}



}




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


.sp-wrap{
background-size:cover;
background-attachment: fixed;
margin:0;
position:relative;
}



#hero-area{
background-size:160%;
background-position:20% top;
}

#hero-area .tag{
font-size:70%;
width:60%;
}

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

.hero-area .sub-title:after{
bottom:0;
}


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


.hero-area .title{
width:100%;
padding:5% 5% 0;

}


.lead_block{
width:100%;
font-size:100%;
margin:12% auto 5%;
padding:4%;
background:none;
}


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



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


.item_wp li img{
text-align:center;
margin:15px auto;
display:block;
}





}