@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');


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

body{
background-color:#f0f0f0;
}


#adspecial_security_trendsummer_202204{
padding: 0;
}


#adspecial_security_trendsummer_202204.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo UI",メイリオ, Meiryo, sans-serif;
}

footer{
margin-top:0;
}


.block_sponsored {
background:#252525;
padding: 30px 20px;
text-align: center;
color:#fff;
}

.block_sponsored a{
color:#16c8c2;
}


#adspecial_security_trendsummer_202204.adspecial_type1 .frame_col_left{
position:relative;
/*background:url(/extra/security_trendsummer_202204/media/img-hero.jpg) right top no-repeat;*/
}







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


/*anime setting*/


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

  100% {
    opacity: 1;}

}



@keyframes bottom-in{
0% {
    opacity: 0;
    transform: translateY(80px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}



@keyframes transpalent{
  0% {
    opacity: 1;}

  50% {
    opacity: 0;}
  100% {
    opacity: 1;}

}



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



.hero-area{
height:650px;
margin:0 auto;
padding:6% 8% 8%;
z-index:100;
line-height:1.4;
color:#fff;
position:relative;
}

.hero-area:before{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/security_trendsummer_202204/media/img-hero.jpg) right top no-repeat;
width:100%;
height:100%;
z-index:-1;
}

.hero-area:after{
content:"";
position:absolute;
top:10%;
left:0;
background:url(/extra/security_trendsummer_202204/media/parts-hero.png) left top no-repeat;
width:100%;
height:100%;
opacity:0;
animation: bottom-in 1.0s linear 0.1s forwards;
}



.hero-area .head_label{
position:absolute;
top:0;
left:0;
padding:20px 15px;
color:#fff;
text-align:center;
font-size:120%;
z-index:100;
}

.hero-area .head_label:before{
content:"";
position:absolute;
top:0;
left:0;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 130px 0 0;
border-color: #00bfb8 transparent transparent transparent;
z-index:-1;
opacity:0;
animation: fade 0.5s linear 0.2s forwards;
}





.hero-area .head_title{
color:#00bfb8;
font-family: 'Cairo', sans-serif;
font-size:180%;
margin:0 0 10px 0;
opacity:0;
animation: fade 0.5s linear 1.5s forwards;
position:relative;
z-index:100;
}


.hero-area h1{
color:#252525;
font-size:280%;
position:relative;
z-index:100;
opacity:0;
animation: bottom-in 0.5s linear 0.5s forwards;
}


.hero-area .sub_title{
font-size:140%;
font-weight:bold;
color:#999;
margin-top:5px;
position:relative;
z-index:100;
opacity:0;
animation: bottom-in 0.5s linear 0.8s forwards;
}



.hero-area h1 span{
position:relative;
font-size:110%;
}

.hero-area h1 span:after{
content:"";
position:absolute;
bottom:-3px;
left:0;
width:100%;
height:2px;
background-color:#00bfb8;
border-radius:30px;
opacity:0;
transition:0.5s;
animation: line 0.3s linear 1.7s forwards;
}








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


.lead_block{
margin:0 auto 15px;
padding:30px 15px 15px;
/*background:rgba(255,255,255,0.8);*/
color:#666;
width:80%;
border-bottom:1px solid #e5e5e5;
position:relative;
z-index:1000;
}


.lead_block p{
margin:0 auto;
text-align:left;
font-size:100%;
line-height:1.5;
color:#666;
animation: fade 0.5s linear 0.3s forwards;
opacity:0;
margin-bottom:20px;
}

.category-area{
margin:-15% auto 45px;
width:80%;
padding:50px 0 35px 0;
/*background:#fff url(/extra/security_trendsummer_202204/media/img_background.jpg) center center no-repeat;
background-attachment:fixed;*/
background:rgba(255,255,255,0.8);
box-shadow:0 0 20px #e5e5e5;
position:relative;
z-index:500;
}


.category-area:before{
content:"";
position:absolute;
top:-25px;
left:47.5%;
width:5%;
height:70px;
background: rgb(57,215,209);
background: linear-gradient(0deg, rgba(57,215,209,1) 0%, rgba(0,191,184,1) 100%);
box-shadow:0 0 15px #ccc;
}



.category-area h2,
.sponsor-area h2{
margin:0 auto 10px;
padding:45px 0;
text-align:center;
font-size:200%;
color:#252525;
line-height:1.2;
position:relative;
z-index:100;
}

.sponsor-area h2:before{
content:"sponsor";
position:absolute;
top:40px;
left:35%;
width:30%;
height:100%;
font-size:250%;
color:#f7f7f7;
display:block;
z-index:-1;
}



.item_block{
margin:0 auto 50px;
}


.item_block ul{
display:flex;
flex-wrap:wrap;
padding:0;
background:none;
justify-content:center;
}


.item_block ul li{
width:43.5%;
margin:25px 30px;
background-color:#f0f0f0;
padding:20px 20px 45px;
box-sizing: border-box;
line-height:1.5;
position:relative;
display:flex;
}


.item_block ul li:hover{
transform:translateY(-10px);
transition:0.3s;
box-shadow:0 0 15px #d0d0d0;
cursor:pointer;
}



.item_block ul li img{
width:100%;
width:450px;
height:auto;
padding:0 15px 0 0;
}


.item_block ul li a:hover img{
filter: grayscale(1);
transition:0.3s ease;
}



.item_block ul li span{
display:block;
}

.item_block ul li span.title{
font-size:120%;
font-weight:bold;
color:#252525;
margin:0 0 10px 0;
}

.item_block ul li span.summary{
font-size:90%;
color:#909090;
margin:5px 0 0 0;
}

.item_block ul li span.date{
font-size:100%;
font-weight:bold;
color:#a0a0a0;
}


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


.item_block ul li span.label{
position:absolute;
bottom:0;
right:0;
color:#fff;
font-size:13px;
z-index:1;
padding:0 5px 5px 0;
box-shadow:0 0 10px #999;
}

.item_block ul li span.label:after{
content:"";
position:absolute;
bottom:-5px;
right:-5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 80px 180px;
border-color: transparent transparent #f3d71f transparent;
z-index:-1;
}




.item_block ul li span.article:after{
border-color: transparent transparent #f3d71f transparent;
}

.item_block ul li span.wp:after{
border-color: transparent transparent #7fc70e transparent;
}

.item_block ul li span.pr:after{
border-color: transparent transparent #20afce transparent;
}



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


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


.item_sponsor ul{
margin:0 auto;
max-width:1050px;
display:flex;
flex-wrap:wrap;
justify-content:center;
}

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








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




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


.hero-area{
padding:8%;
}

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


.hero-area h1{
font-size:220%;
position:relative;
z-index:1000;
text-shadow:0 0 15px #a0a0a0;
}

.hero-area .sub_title{
font-size:140%;
/*color:#fff;*/
text-shadow:0 0 15px #a0a0a0;
position:relative;
z-index:1000;
}



.category-area{
margin:-20% auto 45px;
width:90%;
}


.lead_block{
width:80%;
}


.item_block ul li{
width:40%;
}


.sponsor-area h2:before{
width:50%;
left:25%;
}



}





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




}




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


.hero-area{
height:550px;
padding:10% 5%;
}


.hero-area:before{
background-size:cover;
}


.title-block{
background:rgba(0,0,0,0.6);
margin:0 auto;
padding:15px 15px 35px;
border-radius:10px;
width:80%;
}


.hero-area .head_title{
text-align:center;
font-size:130%;
font-weight:bold;
}

.hero-area h1{
font-size:200%;
text-align:center;
color:#fff;
position:relative;
z-index:1000;
}

.hero-area .sub_title{
font-size:130%;
text-align:center;
color:#fff;
position:relative;
z-index:1000;
}



.category-area h2,
.sponsor-area h2{
font-size:160%;
padding:45px 15px 0;
}


.lead_block{
padding:15px;
width:90%;
}

.lead_block p{
font-size:100%;
}


.category-area{
width:95%;
}

.category-area:before{
width:8%;
top:-25px;
left:46%;
}


.category-area h2 span,
.sponsor-area h2 span{
font-size:60%;
padding-top:10px;
}


.item_block{
padding:5%;
}


.item_block ul li{
width:100%;
}


.item_sponsor ul{
padding:0 20px;
}


.item_block ul li img{
margin-top:0!important;
}



.sponsor-area h2:before{
font-size:200%;
}



}




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


.hero-area .head_label{
width:60px;
height:60px;
line-height:25px;
font-size:90%;
}


.hero-area{
height:400px;
padding:15% 3%;
}

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


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


.title-block{
width:90%;
}



.category-area:before{
width:12%;
top:-30px;
left:44%;
}



h2{
font-size:160%;
}


.item_block{
padding:5%;
}

.item_block ul{
display:block;
}

.item_block ul li{
width:100%;
margin:30px auto;
padding:20px 20px 65px;
display:block;
}



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


.item_block ul li img{
width:100% !important;
height:auto;
float:none;
margin:40px auto 0;
padding:0;
text-align:center;
}


.item_block ul li span.label{
margin:0 auto;
}

.item_block ul li span.title{
margin:10px 0 0 0;
font-size:120%;
}





.sponsor-area h2:before{
width:90%;
left:5%;
}






}



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



}