body{
position:relative;
background: #ccc;
}



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



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

#adspecial_security_trendsummer_202104{
padding: 0;

}

#adspecial_security_trendsummer_202104.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;
font-family: Franklin Gothic Medium, 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;
}







/* 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 fade-top{
  0% {
    transform: translateY(-70px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
  30%,100% {
    opacity: 1;
  }
}
  100% {
    opacity: 1;
transform:translateY(0);
}
}


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

@keyframes line-x{
0%{
opacity:0;
transform:scale(0,1);
}
100%{
opacity:1;
transform:scale(1,1);
}

}


.label{
color:#fff;
margin:30px auto 0;
padding:2px 0;
text-align:center;
font-size:20px;
font-weight:bold;
width:150px;
background-color:#db6404;
position:relative;
border-radius:50px;
animation: line-x 0.3s linear 0.3s forwards;
opacity:0;
}
.label span{
animation: fade 0.5s linear 0.8s forwards;
opacity:0;
}




.hero-area{
margin:0 auto;
padding:25px 10%;
position:relative;
z-index:100;
}

.hero-area:before{
content:"";
position:absolute;
bottom:70px;
left:45px;
width:450px;
height:450px;
background:url(/extra/security_trendsummer_202104/media/parts_hero.png) 0 0 no-repeat;
animation: fade-top 0.5s linear 2.0s forwards;
opacity:0
}


.hero-area h1{
padding:0;
font-size:220%;
color:#151515;
text-align:center;
line-height:1.4;
animation: fade 0.5s linear 1.0s forwards;
opacity:0;
}

.hero-area h1 span{
padding:10px 0 25px;
text-align:center;
font-size:24px;
color:#db6404;
display:block;
text-shadow:0 0 20px #fff;
}



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


.lead_block p{
color:#151515;
padding:10px 0;
font-size:100%;
font-weight:bold;
line-height:1.5;
text-shadow:0 0 5px #fff;
animation: fade 0.5s linear 1.4s 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:210%;
letter-spacing:0.01em;
position:relative;
line-height:1.3;
transition: 0.5s ease;
color:#151515;
opacity: 0;
text-align:center;
transition:1s;
/*text-shadow:0 0 10px #fff;*/
position:relative;
}




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

.category-area h2 span,
.sponsor-area h2 span{
font-size:50%;
color:#ffffff;
display:block;
}

.sponsor-area h2 span{
color:#666;
}

.category-area h2 span.wp{
color:#00a051;
}

.category-area h2 span.article{
color:#088bd6;
}







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


.item_special ul li,
.item_wp ul li{
margin:20px 15px;
padding:3%;
width:30%;
list-style:none;
position:relative;
}








/* 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:center;
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{
background:rgba(0,160,81,0.2);
padding:0 15% 25px;
}


.item_wp li a{
display:block;
background:none;
padding:20px;
height:100%;
transition:0.5s;
background:rgba(255,255,255,0.4);
box-shadow:0 0 15px #444;
}

.item_wp li a:hover{
background:rgba(0,160,81,0.2);
}

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

.item_wp li a img.vertical{
max-width:150px !important;
}

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

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





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




.category-area .item_article{
background:rgba(8,139,214,0.2);
padding:0 15% 25px;
}


.item_article ul li{
margin:4% 20px;
width:20%;
}

.item_article li a{
display:block;
padding:20px;
height:100%;
background:rgba(255,255,255,0.4);
transition:0.5s ease;
}

.item_article li a img{
width:140px;
margin:0 auto;
text-align:center;
display:block;
filter: grayscale(100%);
}


.item_article li a span{
line-height:1.6;
color:#088bd6;
margin:5px 0;
transition:0.3s;
font-size:90% !important;
font-weight:bold;
display:block;
}

.item_article li a:hover{
background:rgba(8,139,214,0.2);
}

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

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





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


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



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

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











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

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

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


.item_special ul li,
.item_wp ul li{
margin:20px 15px;
padding:3%;
width:40%;
list-style:none;
position:relative;
}



.item_article ul li{
margin:4% 20px;
width:28%;
}



}



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



.label{
padding:0;
}

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


.hero-area:before{
content:"";
position:absolute;
bottom:0;
left:40%;
width:200px;
height:200px;
background:url(/extra/security_trendsummer_202104/media/parts_hero_resp.png) 0 0 no-repeat;
animation: fade-top 0.5s linear 2.0s forwards;
opacity:0
}


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

.hero-area h1 span{
font-size:20px;
}


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



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



.lead_block .frame{
padding:15px;
}

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



.item_block{
padding:0 4%;
}


.item_special,
.item_wp,
.item_article{
padding:0 10% 25px;
}

.item_special ul,
.item_wp ul,
.item_article ul{
justify-content:space-between;

}

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

.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%;
}





.item_wp ul li,
.item_article ul li{
width:45%;
margin:5% 0;
}


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









}




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



.hero-area:before{
content:"";
position:absolute;
bottom:0;
left:25%;
width:200px;
height:200px;
background:url(/extra/security_trendsummer_202104/media/parts_hero_resp.png) 0 0 no-repeat;
animation: fade-top 0.5s linear 2.0s forwards;
opacity:0
}


.hero-area h1{
font-size:140%;
}


.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,
.item_wp ul li,
.item_article ul{
display:block;
}

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


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




.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;
}



}