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

#adspecial_infra-ope_202001{
padding: 0;
}

#adspecial_infra-ope_202001.adspecial_type1{
max-width:none !important;
width:100% !important;
background:url(/extra/infra-ope_202001/media/back-top.jpg);
background-repeat:no-repeat;
background-position: center top;
background-size:cover;
background-attachment: fixed;
padding:3% 0 0;
position:relative;
}

footer{
margin-top:0;
}


.block_sponsored {
    padding: 40px 0;
    text-align: center;
background:rgba(0,0,0,0.1);
color:#fff;
}

.block_sponsored a{
color:#eac206;
}


#future-infra{
width:100%;
margin:0;
animation: fadein 0.8s linear 0.3s forwards;
opacity:0;
}


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




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



#hero-area{
position:relative;
height:100%;
}


#hero-area .tag{
background-color:#008fd2;
background:rgba(0,109,210,0.7);
margin:0 auto 30px;
text-align:center;
padding:3px 0;
width:50%;
animation: fadein 0.5s linear 0s forwards;
opacity:0;
}

#hero-area .tag span{
color:#fff;
display:block;
font-size:120%;
animation: fadein 0.5s linear 0.5s forwards;
opacity:0;
}


#hero-area .title{
font-size:220%;
text-align:center;
line-height:1.4;
color:#fff;
opacity: 0;
text-shadow:0 0 10px #000;
}


#hero-area .title,
#hero-area .title span {
  opacity: 0;
}

#hero-area .title span{
display:inline;
}



.lead_block{
margin:3% auto 5%;
padding:4%;
color:#fff;
font-size:110%;
line-height:1.5;
background:rgba(0,0,0,0.5);
width:50%;
animation: fadein 0.5s linear 3.5s forwards;
opacity:0;
}



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

  100% {
    opacity: 1;}
}


@keyframes aitf {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}







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


#category-area{
width:100%;
}


.item_block{
padding:5% 0;
  opacity : 0;
  transform: translateY(50px);
  transition: all 1s;
}

.item_block h2{
text-align:center;
font-family: "OCRB", sans-serif !important;
font-size:220%;
color:#fff;
position:relative;
}




.item_block h2:before,
.item_block h2:after { 
  position: absolute;
  content:'';
  width: 6%;
  height: 20%;
  display: inline-block;
}

.item_block h2:before {
  border-left: solid 1px #fff;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  top: -20px;
  left: 47%;
}
.item_block h2:after {
  content: '';
  border-left: solid 1px #fff;
  border-bottom: solid 1px #fff;
  border-right: solid 1px #fff;
  bottom:-20px;
  left:47%;
}

.item_block h2.sponcor{
color:#006dd2;
}

.item_block h2.sponcor:before{
  border-left: solid 1px #006dd2;
  border-top: solid 1px #006dd2;
  border-right: solid 1px #006dd2;
}

.item_block h2.sponcor:after {
  border-left: solid 1px #006dd2;
  border-bottom: solid 1px #006dd2;
  border-right: solid 1px #006dd2;
}




.item_sp{
background:rgba(0,185,90,0.45);
}

.item_wp{
/*background:rgba(234,194,6,0.45);*/
background:rgba(11,57,152,0.45);
}

.item_article{
background:url(/extra/infra-ope_202001/media/back-bottom.jpg);
background-repeat:no-repeat;
background-position:center bottom;
background-size:cover;
background-attachment:fixed !important;
}

.item_sponcor{
background:#fff;
}



/* special */


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


.item_sp li{
margin:15px 0;
display:block;
width:49.5%;
}


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


.item_sp li a{
display:block;
padding:15px;
}

.item_sp li a:hover{
background:rgba(4,79,50,0.7);
transition:0.5s ease;
}


.item_sp li a span{
color:#fff;
margin-top:5px;
padding:8px;
display:block;
font-size:100%;
text-align:center;
}









/* white paper *//* article */


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


.item_wp li,
.item_article li{
width:32%;
margin:15px 0;
display:block;
}


.item_wp li a,
.item_article li a{
display:block;
padding:10px;
}

.item_wp li a{
padding:25px 10px 10px;
}


.item_wp li a:hover{
background:rgba(26,99,198,0.75);
transition:0.5s ease;
}

.item_article li a:hover{
background:rgba(5,98,86,0.75);
transition:0.5s ease;
}


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

.item_wp li a span,
.item_article li a span{
color:#fff;
margin-top:5px;
padding:8px;
display:block;
}

.item_wp li a img:hover,
.item_article li a img:hover{
filter: grayscale(100%);
transition:0.5s ease;
}





/* sponcor */


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

.logo-area{
padding:3% 15% 0;
}

.logo-area li{
width:250px;
}






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


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

.item_sp li{
margin:15px 0;
display:block;
width:80%;
}

}




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



#hero-area .tag{
width:80%;
}

#hero-area .title{
font-size:180%;
padding:0 3%;
}


.lead_block{
width:80%;
}


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


.item_block h2:before,
.item_block h2:after{
width:10%;
left:45%;
}


/*sp*/

.item_sp li{
width:100%;
}


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




/*wp*//*article*/

.item_wp li,
.item_article li{
width:48%;
}



}




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


.sp-wrap{
width:100%;
background:url(/extra/infra-ope_202001/media/back-top.jpg) center bottom no-repeat;
background-size:cover;
background-attachment: fixed;
padding:5% 0 0;
position:relative;
}



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

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

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

.lead_block{
width:100%;
font-size:100%;
padding:3%;
}


.item_block{
padding:8% 0;
}


.item_block h2:before,
.item_block h2:after{
width:20%;
left:40%;
}


/*wp*//*article*/

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


.item_wp li span{
text-align:center;
}









}