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

#adspecial_dx_202201{
padding: 0;
}


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

footer{
margin-top:0;
}


.block_sponsored {
/*border-top:10px solid #d0d0d0;*/
background-color:#0f397a;
padding: 3% 0;
text-align: center;
color:#fff;
font-weight:bold;
}

.block_sponsored a{
color:#32d2f0;
}


#adspecial_dx_202201.adspecial_type1 .frame_col_left{
position:relative;
background:url(/extra/dx_202201/media/mainbg.jpg) center top no-repeat;
background-size:cover;
background-attachment:fixed;
}

/*#adspecial_dx_202201.adspecial_type1 .frame_col_left:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}*/







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


/*anime setting*/


@keyframes fade{
  0% {
    opacity: 0;
margin-left:-20px;
}
  100% {
    opacity: 1;
margin-left:0;
}
}

@keyframes slideup{
  0% {
    opacity: 0;
transform: translateY(20%);
}
  100% {
    opacity: 1;
transform: translateY(0);

}
}




.hero-area{
margin:0 auto;
padding:7% 12.5%;
position:relative;
z-index:100;
height:30%;
text-align:left;
}




.hero-area h1{
text-align:center;
text-align:left;

line-height:1;

display:inline-block;
margin-bottom:20px;
}



.hero-area h1 span{
padding:0;
font-size:3.6vw;
padding:0;
background:#fff;
color:#000;
display:inline-block;
opacity:0;
padding:10px;
text-shadow:none;
}

.hero-area h1 span.large{
animation: fade 0.5s linear .5s forwards;
margin-bottom:5px;
}


.hero-area h1 span.small{
font-size:1.2vw;
animation: fade 0.5s linear .75s forwards;

}

.hero-text span{
background:#fff;
font-weight:bold;
display:inline-block;
padding:3px;
margin-bottom:5px;
opacity:0;
margin-left:-20px;
animation: fade 0.5s linear 1s forwards;

}




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

.paragraph{
margin-bottom:20px;
font-weight:bold;
}

.category-area{
margin:0 auto;
padding:40px 0;
    opacity: 0;
transform: translateY(20%);
animation: slideup 0.5s linear 1.25s forwards;

}

.item_block{
width:96%;
margin:0 auto 2%;
}
.item_block-category01,
.item_block-category02,
.item_block-category03
{
padding:40px 0;
}

.item_block-category01{
background:rgba(121,158,124,0.8);

}
.item_block-category02{
background:rgba(94,119,174,0.8);
}
.item_block-category03{
background:rgba(183,96,174,0.8);
}



.item_block-inner{
margin:0 auto;
padding:40px 30px 30px 40px;
max-width:1050px;
background-color:rgba(255,255,255,0.7);
}

.item_block-inner h2{
background:#fff;
padding:5px 10px;
margin-bottom:20px;
text-align:center;
font-size:180%;
}

.item_block ul li{
margin-bottom:20px;
}


.item_block ul li a{
display:block;
padding:10px 10px 10px 0;
}



.item_block ul li span.label{
display:inline-block;
color:#fff;
border-radius:15px;
width:130px;
text-align:center;
font-size:80%;
}

.item_block ul li span.wp{
background-color:#10aeac;
}

.item_block ul li span.article{
background-color:#1059af;
}


.item_block ul li span.plan{
background-color:#af103d;
}

.item_block ul li{
width:50%;
overflow:hidden;
line-height:1.5;
}

.item_block ul li img{
width:80px;
margin-right:25px;
display:block;
float:left;
}


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


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


.item_box{
display:flex;
flex-flow: column;	
}



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


.sponsor-area{
margin:0;
padding:60px 0 40px;
background:#fff;
position:relative;
z-index:10;
}


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

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

.item_sponsor h2{
max-width:1050px;
margin:0 auto;
}
.item_sponsor .h2-inner{
width:100%;

display:flex;
justify-content :space-between;
padding:15px 20px;
  position: relative;

}



.item_sponsor .h2-inner::before,
.item_sponsor .h2-inner::after{
    content:"";
    position: absolute;
    background:#0f397a;
    width: 0;
    height:2px;
    transition: all .25s linear 0;
}

.item_sponsor .h2-inner::before{
  right: 0;
  bottom: 0;
}
.is-show .item_sponsor .h2-inner::before{
    transition: all .25s linear 1.25s;

}




.item_sponsor .h2-inner::after{
  left: 0;
  top: 0;
}
.is-show .item_sponsor .h2-inner::after{
    transition: all .5s linear .5s;
}

.item_sponsor h2{
position:relative;
}
.item_sponsor h2::before,
.item_sponsor h2::after{
  content:"";
  position: absolute;
  background: #0f397a;
  width:2px;
  height:0;
display:inline-block;
    transition: all .25s linear 0;
}

.item_sponsor h2::before{
  left: 0;
  bottom: 0;
}
.is-show .item_sponsor h2::before{
  transition: all .2s linear .2s;
}


.item_sponsor h2::after{
  right: 0;
  top: 0;

}
.is-show .item_sponsor h2::after{
  transition: all .25s linear 1s;
}


.is-show .item_sponsor .h2-inner::before,
.is-show .item_sponsor .h2-inner::after{
  width: 100%;
}

.is-show .item_sponsor h2::before,
.is-show .item_sponsor h2::after{
height:100%;
}
/* responsive -------------------------------------------------------------------------------- */

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


.hero-area h1{
line-height:1.4;
}



}



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




}




@media screen and (max-width:768px){
.item_block{
width:96%;
margin:0 auto;
}
.hero-area{
padding: 7% 2.5%;
height:60%;
color:#fff;
}
.hero-area h1 span{
font-size:280%;
background:none;
color:#fff;
}
.hero-area h1 span.small{
font-size:120%;
color:#fff;
}

.hero-text br{
display:none;
}
.hero-text span{
margin-bottom:0;
padding:3px;
display:inline;
background:none;
color:#fff;
}

.item_block-category01, .item_block-category02, .item_block-category03 {
padding:10px 0;
}
.item_block-inner{
width:94%;
margin:0 auto;
padding:10px;
}
.item_block-inner ul{
flex-flow: column;	
}
.item_block ul li{
width:100%;
}
.item_block-inner h2{
font-size:120%;
}

.item_sponsor h2{
width:96%;
 margin:0 auto 20px;
}

}



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




}