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

#adspecial_container_202108{
padding: 0;
}


#adspecial_container_202108.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo UI",メイリオ, Meiryo, sans-serif;
background:url(/extra/container_202108/media/page-background.jpg) center top no-repeat;
background-size:cover;
background-attachment:fixed;
}

footer{
margin-top:0;
}


.block_sponsored {
background-color:#444;
padding: 3% 0;
text-align: center;
color:#fff;
font-weight:bold;
}

.block_sponsored a{
color:#e1af04;
}


#adspecial_container_202108.adspecial_type1 .frame_col_left{

}








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


/*anime setting*/


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

  100% {
    opacity: 1;}

}



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

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

}



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

@keyframes left-in{
0% {
    opacity: 0;
    transform: translateX(-180px) skew(-30deg);
}
100% {
    opacity: 1;
    transform: translateX(0) skew(-30deg);
}
}



@keyframes color {
  0%{
border-color: #e1af04 transparent transparent transparent;
color:#fff;
  }

  50%{
border-color: #ed520e transparent transparent transparent;
  }

  100%{
border-color: #e1af04 transparent transparent transparent;
color:#fff;
  }



}



.hero-area{
margin:0 auto;
padding:6% 10% 0;
position:relative;
z-index:100;
height:600px;
background:url(/extra/container_202108/media/head-hero.jpg) center center no-repeat;
position:relative;
}

.hero-area:before{
content:"";
position:absolute;
top:0;
left:20px;
width:55%;
height:100%;
transform:skew(-30deg);
background:rgba(255,255,255,0.4);
opacity:0;
animation: left-in 0.7s linear 0s forwards;
}

.hero-area:after{
content:"";
position:absolute;
top:0;
left:60px;
width:55%;
height:100%;
transform:skew(-30deg);
background:rgba(255,255,255,0.2);
opacity:0;
animation: left-in 0.8s linear 0.3s forwards;
z-index:-1;
}



.hero-label{
position:absolute;
top:0;
left:0;
color:#fff;
}


.hero-label:before{
content:"";
position:absolute;
top:0;
left:0;
width: 0;
height: 0;
border-style: solid;
border-width: 220px 140px 0 0;
border-color: #e1af04 transparent transparent transparent;
z-index:-1;
animation: color 5.0s linear 0s infinite;
}


/*.hero-label:before{
content:"";
position:absolute;
top:0;
left:0;
width:100px;
height:180px;
background-color:#e1af04;
border-radius:0 0 15px 15px;
z-index:-1;
animation: color 5.0s linear 0s infinite;
}*/


.hero-label span{
margin:20px;
display:block;
font-size:140%;
font-weight:bold;
}



.hero-area h1{
padding:0;
font-size:220%;
color:#096ecc;
text-align:left;
line-height:1.4;
/*text-shadow:0 0 10px #fff;*/
animation: fade 0.5s linear 0.8s forwards;
opacity:0;
}

.hero-area h1 span{
padding:0;
text-align:left;
font-size:85%;
/*color:#0f387a;*/
color:#fff;
display:block;
}

.hero-area .sub-ttl{
font-size:150%;
font-weight:bold;
/*color:#048adf;*/
color:#e1af04;
animation: fade 0.5s linear 1.2s forwards;
opacity:0;
}



.lead_block{
max-width:600px;
margin:20px 0 0 0;
color:#333;
font-weight:bold;
position:relative;
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;
padding:0 0 40px;
position:relative;
}



.category-area h2,
.sponsor-area h2{
margin:0 auto;
padding:0;
text-align:center;
color:#fff;
background:rgba(225,175,4,0.8);
width:160px;
height:140px;
font-size:150%;
line-height:140px;
position:relative;
transform:translateY(100px);
border-radius: 0 0 15px 15px;
transition:0.5s;
}






.category-area h2.slide,
.sponsor-area h2.slide{
transform:translateY(0);
}




.category-area h2 span,
.sponsor-area h2 span{
font-size:70%;
color:#a5a5a5;
display:block;
float:right;
padding-top:15px;
}


.item_block{
margin:45px auto 60px;
padding:40px;
max-width:1100px;
}


.item_block ul{
display:flex;
flex-wrap:wrap;
justify-content:left;
}


.item_block ul li{
margin:30px 15px;
width:21.5%;
padding:0 0 25px 0;
position:relative;
box-shadow:0 0 15px #999;
border-radius: 0 0 15px 15px;
position:relative;
opacity:0;
}



.item_block ul li.fadein {
opacity: 1;
transition:1s;
}


.item_block ul li:hover,
.item_block ul li.main:hover{
background:rgba(0,0,0,.3);
box-shadow:0 0 15px #151515;
transition:0.3s;
}


.item_block ul li.main{
width:47%;
/*border:3px solid #666;*/
background:rgba(255,255,255,.1);
}





.item_block ul li a{
display:block;
}

.item_block ul li span{
padding:5px 15px;
font-size:14px;
}

.item_block ul li span.label{
text-align:center;
margin:0 auto 10px;
padding:0;
color:#fff;
font-size:14px;
width:130px;
height:40px;
line-height:40px;
}

.item_block ul li span.special{
background-color:#ed520e;
}

.item_block ul li span.wp{
background-color:#096ecc;
}

.item_block ul li span.article{
background-color:#059b76;
}


.item_block ul li img{
width:100%;
height:auto;
object-fit: contain;
margin:25px auto 0;
padding:0 25px;
display:block;
}

.item_block ul li.main img{
width:100%;
height:auto;
object-fit: contain;
margin:25px auto 0;
padding:0 25px;
display:block;
height:320px;
object-fit:cover;
object-position:0 0;
}



.item_block ul li img:hover{
/*opacity:0.7;*/
filter: grayscale(100%);
transition:0.3s;
}



.item_block ul li span{
display:block;
}

.item_block ul li span.title{
font-size:90%;
color:#fff;
margin:20px 0 0 0;
}
.item_block ul li.main span.title{
font-size:100%;
}

.item_block ul li span.caption{
font-size:100%;
font-weight:bold;
color:#666666;
margin:5px 0 0 0;
}

.item_block ul li span.date{
font-size:70%;
color:#888;
}


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






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


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


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

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






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

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


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

.item_block ul li{
width:21%;
}


.item_block ul li.main{
width:45%;
}



}



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


.hero-label span{
font-size:120%;
}


.hero-area:before{
content:"";
position:absolute;
top:-50px;
left:0;
width:100%;
height:108%;
transform:skew(-32deg);
background:rgba(255,255,255,0.55);
/*box-shadow:0 0 20px #d5d5d5;*/
}

.hero-area{
padding:5%;
}


.hero-area h1{
font-size:160%;
padding:5% 7% 10px;
}

.hero-area .sub-ttl{
padding:0 7%;
}



.lead_block{
padding:0 7%;
}

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



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


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



.item_block{
padding:4%;
}


.item_block ul li{
width:45.5%;
}

.item_block ul li.main{
width:100%;
}


.item_block ul li img{
width:150px;
}


.item_sponsor ul{
padding:0 20px;
}




}


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

.item_block ul li{
width:44.5%;
}

}



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



.hero-area{
padding:15% 5% 3% 5%;
height:500px;
background-position:left center;
}

.hero-area h1{
font-size:130%;
padding:0;
}


.hero-area .sub-ttl{
font-size:100%;
padding:0;
}


.hero-label:before{
border-width: 180px 100px 0 0;
}


.lead_block{
font-size:14px;
padding:0;
}


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


.category-area h2{
font-size:130%;
width:150px;
height:130px;
line-height:130px;
}


.item_block{
padding:4%;
}



.item_block ul li{
width:43%;
}

.item_block ul li.main{
width:100%;
}


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


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


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

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

.item_block ul li span.caption,
.item_block ul li span.date{
font-size:90%;
padding:15px;
}


.item_sponsor ul li{
margin:45px auto 0;
}



}



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



.item_block ul li{
width:100%;
}

.item_block ul li.main{
width:100%;
}



}