body{
position:relative;
background: #9ad5e3;
}


body:after {
position: fixed;
top: 50px;
left: 0;
content: "";
z-index:-1;
display: block;
width: 100%;
height: 100vh;
background: #9ad5e3 url(/extra/security_trendwinter_202012/media/page-background.jpg) no-repeat 0 0;
background-size: cover;
animation: fade-scale 0.5s linear 0.3s forwards;
opacity:0;
}



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

#adspecial_security_trendwinter_202012{
padding: 0;

}

#adspecial_security_trendwinter_202012.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
font-family: Century Gothic, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 5% 0;
text-align: center;
/*background-color:#48b6cd;*/
color:#050505;
font-weight:bold;
}

.block_sponsored a{
color:#0b6bc4;
}


/*
.next-generation-infrastructure{
color:#0264e9;
}

.application-security{
color:#00a9f0;
}

.workplace{
color:#00ced5;
}
*/






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


/*anime setting*/


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

  100% {
    opacity: 1;}
}

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

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



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



@keyframes blue{
  0% {
color:#0264e9;
}
  33.3% {
color:#00a9f0;
}
  66.6% {
color:#00ced5;
}
  100% {
color:#0264e9;
}
}

.header-area{
margin:0 auto;
padding:0 10%;
position:relative;
z-index:100;
/*display:flex;*/
}


.header-area h1{
padding:0;
font-size:240%;
color:#151515;
text-align:center;
animation: fade 0.5s linear 0.5s forwards;
opacity:0;
}

.header-area h1 span{
padding:10px 0;
text-align:center;
font-size:22px;
color:#6ccdff;
animation: fade 0.5s linear 0.3s forwards, blue 3s linear infinite;
opacity:0;
display:block;
}


.header-area .label{
background:url(/extra/security_trendwinter_202012/media/parts_label.png) center center no-repeat;
color:#0264e9;
text-shadow:0 0 15px #fff;
margin:0 auto;
padding:4% 0;
text-align:center;
font-size:20px;
font-weight:bold;
animation:fade 0.5s linear 0.4s forwards;
opacity:0;
position:relative;
}



.lead_block{
margin:3% 0;
padding:0;
position:relative;
}


.lead_block p{
color:#151515;
padding:10px 0;
font-size:100%;
font-weight:bold;
line-height:1.5;
text-shadow:0 0 10px #fff;
animation: fade 0.5s linear 1.2s forwards;
opacity:0;
}

.lead_block .frame{
background:rgba(255,255,255,.5);
margin:15px 35px;
padding:35px;
position:relative;
}

.lead_block .frame:after{
content:"";
position:absolute;
top:15px;
left:-35px;
width:15%;
height:5px;
background-color:#0b6bc4;
}

.lead_block .frame span{
color:#666;
}





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



.category-area{
margin:0 auto;
}

.category-area h2,
.sponsor-area h2{
margin:0 auto 10px;
padding-top:30px;
font-size:180%;
letter-spacing:0.01em;
position:relative;
line-height:1.3;
transition: 0.5s ease;
z-index:100;
color:#151515;
opacity: 0;
transition:1s;
text-shadow:0 0 10px #fff;
position:relative;
}


.category-area .item_article h2,
.sponsor-area .item_sponsor h2{
text-align:center;
}


.category-area h2.fade,
.sponsor-area h2.fade{
opacity:1;
}

.category-area h2 span,
.sponsor-area h2 span{
font-size:60%;
color:#0b6bc4;
display:block;
}


/*
.category-area h2.next-generation-infrastructure,
.category-area h2.application-security,
.category-area h2.workplace{
padding-left:20px;
}

.category-area h2.next-generation-infrastructure:after,
.category-area h2.application-security:after,
.category-area h2.workplace:after{
content:"";
position:absolute;
top:30px;
left:0;
width:10px;
height:40px;
}


.category-area h2.next-generation-infrastructure:after{
background-color:#0264e9;
}


.category-area h2.application-security:after{
background-color:#00a9f0;
}


.category-area h2.workplace:after{
background-color:#00ced5;
}

*/



.category-area h3{
color:#333;
font-size:160%;
position:relative;
text-shadow:0 0 10px #fff;
}

.category-area h3:after{
content:"";
position:absolute;
top:-2px;
left:0;
width:0;
height:1px;
background-color:#151515;
transition:0.5s;
}

.category-area h3.slide:after{
width:100%;
}



.category-area h3 span{
display:inline-block;
font-size:70%;
color:#0b6bc4;
margin-left:15px;
padding-left:10px;
border-left:1px solid #0b6bc4;
text-shadow:0 0 8px #fff;
}




.item_block{
margin:0 auto;
padding:2% 0;
max-width:1000px;
}

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


.item_block ul li a span{
font-weight:bold;
font-size:110%;
}

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



.item_special ul,
.item_wp ul,
.item_article ul
{
margin:0 auto;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:left;
}


.item_special ul li,
.item_wp ul li{
margin:30px 15px 40px;
padding:3%;
width:30%;
background:rgba(255,255,255,0.6);
position:relative;
}



.item_special ul li:after,
.item_wp ul li:after{
content:"";
position:absolute;
top:10px;
left:-10px;
width:40px;
height:8px;
background-color:#0b6bc4;
transition:0.5s;
}


.item_special ul li:hover:after,
.item_wp ul li:hover:after{
content:"";
position:absolute;
top:10px;
left:-10px;
width:120px;
height:8px;
background-color:#fff;
}





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



.item_special li:hover{
/*background:rgba(61,175,202,0.6);*/
background:none;
transition:0.3s;
box-shadow:0 0 20px #fff;
}


.item_special li a img{
text-align:center;
margin:0 auto;
display:block;
max-width:200px;
}

.item_special li a span{
margin-top:5px;
padding:5px 0;
display:block;
line-height:1.6;
text-align:left;
color:#0b6bc4;
}


.item_special li a:hover span{
color:#151515;
}


.item_special li a:hover img{
box-shadow:0 0 20px #444;
}




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


.item_wp li:hover{
/*background:rgba(84,156,222,0.6);*/
background:none;
transition:0.3s;
box-shadow:0 0 20px #fff;
}

.item_wp li a img{
max-width:300px;
}

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

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

.item_wp li a:hover img{
box-shadow:0 0 20px #444;
}






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




.category-area .item_article{
background:rgba(255,255,255,0.4);
padding:0 15%;
}


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

.item_article li a{
padding:0;
display:flex;
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:#0b6bc4;
margin:0 15px;
transition:0.3s;
font-size:110% !important;
font-weight:bold;
}

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

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





/* sponsor **************************************/


.sponsor-area{
margin:0;
padding:40px 10%;
background:#fff;
}



.item_sponsor ul{
padding:3% 3% 0;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.item_sponsor ul li{
width:200px;
margin:15px 40px;
}











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




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





.header-area{
padding:3% 5% 10%;
}


.header-area h1{
font-size:200%;
line-height:1.4;
}

.header-area h1 span{
font-size:18px;
}


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

.header-area .label{
padding:10% 0;
}



.lead_block .frame{
padding:15px;
}

.lead_block .frame:after{
display:none;
}



.item_block{
padding:0 4%;
}




.item_special ul li,
.item_wp ul li{
width:28%;
}

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





/*special*/


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

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




/*wp*/


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




/*article*/


.item_article ul{
display:block;
}

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




}




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



body:after{
background-position:20% 0;
}

.header-area h1{
font-size:150%;
}


.lead_block{
margin:3% 0 10%;
font-size:90%;
}


.category-area{
margin:3% auto;
}


.category-area h2,
.category-area h3{
font-size:140%;
}


.item_block{
padding:2% 4%;
}

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


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


.item_special ul li,
.item_wp ul li{
padding:5%;
}


.category-area .item_article{
padding:0 4%;
}


.item_article li a{
display:block;
}




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

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



}