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

#adspecial_security_trendautumn_202009{
padding: 0;

}

#adspecial_security_trendautumn_202009.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 3% 0;
text-align: center;
background-color:#09243b;
color:#fff;
}

.block_sponsored a{
color:#da9511;
}





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

.category-area{
background:url(/extra/security_trendautumn_202009/media/parts_background.png) center bottom no-repeat;
background-size:cover;
background-attachment: fixed;
}



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


.sp-wrap .label{
background-color:#da9511;
color:#fff;
margin:10px 0;
padding:5px 0 5px 55px;
text-align:center;
font-weight:bold;
width:25%;
animation:fade-in 0.5s linear 0.4s forwards;
opacity:0;
position:relative;
}

.sp-wrap .label span{
/*background-color:#ae6423;*/
background-color:#08253d;
width:20%;
position:absolute;
top:0;
left:0;
padding:5px 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 line {
  0% {width:0;}
  100% {width:100%;}
}


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


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

.hero-area h1 span{
font-size:70%;
display:block;
}



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



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







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


.show{/*スクロール*/
  opacity : 0;
  transform: translateY(-50px);
}



.item_block{
margin:0;
padding:2% 10% 10%;
padding:0;
width:100%;
}


.item_block h2{
margin:0;
padding:10px 0;
text-align:center;
font-family: 'Oswald', sans-serif;
font-size:200%;
/*background:rgba(0,0,0,0.7);*/
/*background-color:#da9511;*/
color:#fff;
letter-spacing:0.01em;
position:relative;
line-height:1.3;
transition: 0.5s ease;
z-index:100;
}




.item_block h2:before{
content:"";
position:absolute;
top:-2px;
left:40%;
width:20%;
height:4px;
background-color:#da9511;
}



.item_block h2:after{
content:"";
position:absolute;
left:0;
top:0;
width:0;
height:80px;
background:rgba(0,0,0,0.7);
transition:1.5s ease;
/*transform:scaleX(0);*/
transform-origin: top left;
z-index:-1;
}



.item_block h2.slide:after{
width:100%;
/*transform:scaleX(1);*/
}


.item_block h2 span{
display:block;
font-size:50%;
font-family:"游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic;
color:#fff;
}





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


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

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



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





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




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


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



.item_special li a{
padding:10%;
text-align:center;
border:1px solid #fff;
display:block;
position:relative;
}



.item_special li a:after{
content:"";
position:absolute;
top:-2px;
left:0;
width:0;
height:2px;
background-color:#da9511;
}


.item_special li a:hover{
/*background:rgba(0,0,0,0.2);*/
background:rgba(255,255,255,0.3);
/*border:1px solid #08253d;*/
border:1px solid #fff;
transition:1.0s;
}


.item_special li a:hover:after{
width:100%;
transition:1.0s;
}


.item_special li a img{
text-align:center;
margin:15px auto;
display:block;
width:300px;
}

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

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

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

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










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



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

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

.item_wp li a{
padding:10%;
border:1px solid #fff;
display:block;
position:relative;
}

.item_wp li a:hover{
background:rgba(255,255,255,0.3);
border:1px solid #fff;
transition:1.0s;
}



.item_wp li a:after{
content:"";
position:absolute;
top:-1px;
left:0;
width:0;
height:2px;
background-color:#da9511;
}


.item_wp li a:hover:after{
width:100%;
transition:1.0s;
}



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

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


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






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




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

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





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


.item_block h2.sponsor{
color:#fff;
background-color:#1c77c3;
position:relative;
width:100%;
}





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


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

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











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




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



.sp-wrap{
background-size:cover;
}

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



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


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

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


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



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


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


.item_block{
padding:0;
}


.item_block h2{
font-size:140%;
width:100%;
line-height:1.5;
}



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



}