@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@800&display=swap');



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

body{
background-color:#29B5E8;
color:#fff;
font-family:Arial, メイリオ, Meiryo, sans-serif !important;
}


#adspecial_snowflake_202112{
padding: 0;
}


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

footer{
margin-top:0;
}


.block_sponsored {
background-color:#f0f0f0;
padding: 3% 15px;
text-align: center;
color:#666;
font-weight:bold;
}

.block_sponsored a{
color:#050505;
}


#adspecial_snowflake_202112.adspecial_type1 .frame_col_left{
position:relative;

}








/* 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%;
}
}



.hero-area{
margin:0 auto;
padding:5% 10% 3%;
color:#fff;
position:relative;
z-index:-1;
background: rgb(12,92,120);
background: linear-gradient(135deg, rgba(12,92,120,1) 0%, rgba(41,181,232,1) 40%);
}



.hero-area:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(/extra/snowflake_202112/media/parts_head.png) right center no-repeat;
z-index:10;
}


.hero-area h1{
padding:0;
text-align:left;
line-height:1.4;
animation: fade 0.5s linear 0.5s forwards;
opacity:0;
font-size:280%;
posiiton:relative;
z-index:1000;
}

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


.lead_block{
max-width:900px;
margin:0;
padding:45px 0;
position:relative;
}


.lead_block p{
position:relative;
margin-bottom:10px;
font-size:110%;
line-height:1.8;
animation: fade 0.5s linear 0.8s forwards;
opacity:0;
z-index:1000;
}






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



.category-area{
margin:0 auto;
padding:0 0 30px;
/*background-color:#5ec6ec;*/
background: rgb(41,181,232);
background: linear-gradient(340deg, rgba(41,181,232,1) 0%, rgba(113,208,244,1) 40%);
}

.category-area h2,
.sponsor-area h2{
margin:0 auto;
padding:40px 0;
max-width:980px;
font-size:400%;
line-height:1.3;
text-align:center;
position:relative;
font-family: 'Nunito Sans', sans-serif;
}

.sponsor-area h2{
color:#333333;
font-size:350%;
}




.item_block{
margin:50px auto;
max-width:1080px;
}

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


.item_block ul:before{
content:"";
display: block;
width:22%;
height:0;
order:1;
}
.item_block ul:after{
content:"";
display: block;
width:22%;
}


.item_block ul li{
width:22%;
margin:0 10px;
padding:25px;
background-color:#fff;
border-radius:30px;
margin-bottom:40px;
line-height:1.3;
position:relative;
}


.item_block ul li a{
display:block;
}


.item_block ul li img{
width:100%;
height:100%;
text-align:center;
background-color:#ccc;
border:1px solid #ccc;
margin-bottom:10px;
display:block;
}

.item_block ul li img.dummy{
width:100%;
height:200px;
}


.item_block ul li img:hover{
opacity:0.7;
transition:0.3s;
}


.item_block ul li span{
display:block;
}

.item_block ul li span.title{
font-size:110%;
color:#444;
margin:0;
}

.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:100%;
font-weight:bold;
color:#a0a0a0;
}


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






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


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


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

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


.event_banner{
max-width:800px;
margin:0 auto;
padding-bottom:60px;
}

.event_banner a{
margin-bottom:10px;
text-align:center;
display:block;
}

.event_banner a:hover{
opacity:0.7;
transition:.3s;
}

.event_banner span{
padding:10px 0;
color:#888;
}







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



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


.hero-area{
padding:5% 8%;
}


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


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

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


.category-area{
margin:0 auto;
padding:0;
}


.item_block{
margin:0 auto;
padding:20px;
}

.item_block ul li{
width:42%;
}


.item_sponsor ul{
padding:0 20px;
}


}








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

.hero-area{
padding:5%;
}


/*.hero-area:after{
background-size:130%;
}*/


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


.category-area h2,
.sponsor-area h2{
font-size:250%;
padding:30px 15px;
}




.item_block ul{
display:block;
}

.item_block ul li{
width:100%;
margin:0 auto 35px;
}

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


.item_block ul li img{
width:100% !important;
float:none;
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%;
}

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



}



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



}