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

#adspecial_iot_202006{
padding: 0;

}

#adspecial_iot_202006.adspecial_type1{
max-width:none !important;
width:100% !important;
background-color:#f6eede;
position:relative;
font-family:'Century Gothic', "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

footer{
margin-top:0;
}


.block_sponsored {
    padding: 3% 0;
    text-align: center;
background-color:#2e2419;
color:#fff;
}

.block_sponsored a{
color:#eac206;
}





.sp-wrap{
background:url(/extra/iot_202006/media/img_hero.png) center top no-repeat;
background-attachment:fixed;
background-size:cover;
padding:10px 0 0;
position:relative;
animation:fade-in 0.3s linear 0.5s forwards;
opacity:0;
}

.category-area{
}


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


.sp-wrap .label{
background-color:#c1a977;
width:60px;
height:60px;
margin:0 auto;
line-height:60px;
border-radius:30px;
color:#fff;
text-align:center;
font-weight:bold;
animation:fade-in 1.0s linear 0s forwards ,bound 1.0s linear forwards;
}




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


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

  100% {
    opacity: 1;}
}



@keyframes fade-top{
  0% {
    opacity: 0;
transform:translateY(-50px);
}

  100% {
    opacity: 1;
transform:translateY(0);
}
}


@keyframes bound {
  0% {transform: scale(1)}
  25% {transform: scale(1.05);}
  50% {transform: scale(0.85)}
  75% {transform: scale(1.05); }
  100% {transform: scale(1)}
}


@keyframes move {
  0% {transform:translateY(0);}
  50% {transform:translateY(-20px);}
  100% {transform:translateY(0);}
}

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




.hero-area{
background:rgba(255,255,255,0.5);
margin:3% 13%;
padding:4%;
height:100%;
border-radius:10px;
position:relative;
z-index:100;
}

.hero-area .icon{
position:absolute;
top:-40px;
left:2.5%;
opacity:0;
animation:fade-in 1.0s linear 3.0s forwards ,bound 1.5s linear infinite;
}

.hero-area .object{
position:absolute;
top:-50px;
right:10px;
opacity:0;
animation:fade-in 0.5s linear 0.8s forwards;
}



.hero-area .title{
font-size:220%;
text-align:left;
line-height:1.3;
color:#2e2419;
width:100%;
position:relative;
text-shadow:0 0 10px #fff;
}


.hero-area .title span{
display:block;
}

.hero-area .title span.ttl01{
opacity: 0;
animation: fade-top 0.5s linear 1.3s forwards;
}


.hero-area .title span.ttl02{
opacity: 0;
animation: fade-top 0.5s linear 1.8s forwards;
}

.hero-area .title span.ttl01 strong,
.hero-area .title span.ttl02 strong{
color:#40a94e;
font-size:120%;
}


.hero-area .title:after{
content:"";
position:absolute;
bottom:-10px;
left:0;
width:0;
height:1px;
background-color:#c1a977;
animation: line 0.7s linear 2.5s forwards;
transigion:0.5s;
}



.lead_block{
padding:4% 0 0;
color:#2e2419;
border-radius:10px;
font-size:110%;
font-weight:bold;
line-height:1.5;
animation: fade-in 1.0s linear 2.5s forwards;
opacity:0;
}






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


.fade{/*スクロール*/
opacity:0;
transition:1.0s;
}
.fadein{/*スクロール*/
opacity:1;
}

.top{/*スクロール*/
opacity:0;
transform:translateY(-30px);
transition:1.0s;
}
.topin{/*スクロール*/
transform:translateY(0);
opacity:1;
}

.item_block{
margin:0;
padding:5% 0;
/*background-color:#fff;*/
/*background:rgba(255,255,255,0.5);*/
}


.item_block h2{
text-align:center;
margin:0 auto;
padding:15px;
font-size:170%;
position:relative;
font-family:'Century Gothic';
width:180px;
height:180px;
display:flex;
align-items: center;
border-radius:15px;
line-height:1.2;
}

.item_block h2 span{
flex: 1;
color:#fff;
line-height:1.2;
position:relative;
display:block;
}


.item_block h2 span:before{
content:"";
position:absolute;
top:-50px;
left:50%;
transform:translateX(-50%);
width:30px;
height:40px;
}


.item_block h2 span strong{
color:rgba(255,255,255,0.4);
font-size:60%;
margin-top:5px;
text-align:center;
font-family:"游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic;
display:block;
}


.item_block img{
max-width:100%;
display:block;
margin:0 auto 10px;
}

.item_block ul li a{
padding:10%;
border-radius:15px;
display:block;
}

.item_block ul li a:hover{
background:rgba(0,0,0,0.6);
border-radius:0;
transition:0.3s;
}

.item_block ul li a span{
font-weight:bold;
font-size:120%;
color:#fff;
}

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



.item_special,
.item_video,
.item_wp,
.item_article
{

}

.item_special ul,
.item_video ul,
.item_wp ul,
.item_article ul
{
padding:5% 10%;
}





/* special **************************************/



.item_block h2.special{
background-color:#7ba422;
}

.item_block h2.special span:before{
background:url(/extra/iot_202006/media/icon_special.png) center bottom no-repeat;
}


.item_special ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}


.item_special li{
margin:15px 0;
display:block;
width:48%;
}

.item_special li .new{
text-align:center;
margin:10px auto;
display:block;
font-size:14px;
font-weight:bold;
color:#e9b913;
}


.item_special li a{
display:block;
padding:20px 30px;
color:#e9b913;
background-color:#7ba422;
}



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

.item_special li a span{
padding:10px 0;
display:block;
font-size:120%;
}

.item_special li a:hover span{
color:#e9b913 !important;
}

.item_special li a:hover img{
filter: grayscale(100%);
}




/* video **************************************/



.item_video h2.video{
background-color:#f38d49;
}

.item_video h2.video span:before{
background:url(/extra/iot_202006/media/icon_video.png) center bottom no-repeat;
}



.item_video{
background:rgba(255,255,255,0.5);
background:url(/extra/iot_202006/media/img_background.png) center center no-repeat;
background-size:cover;
}



.item_video ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.item_video li{
display:block;
width:36%;
}

.item_video li a{
background-color:#f38d49;
}



.item_video li a span{
padding:10px 0;
display:block;
font-size:120%;
}

.item_video li a:hover span{
color:#f38d49 !important;
}






/* white paper **************************************/




.item_block h2.wp{
background-color:#7f7de0;
}

.item_block h2.wp span:before{
background:url(/extra/iot_202006/media/icon_wp.png) center bottom no-repeat;
}


.item_wp ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.item_wp li{
margin:25px 10px;
width:28%;
}

.item_wp li a{
background-color:#7f7de0;
}




.item_wp li a img{
max-width:100%;
}

.item_wp li a span{
margin-top:5px;
padding:5px 0;
display:block;
line-height:1.6;
color:#f9adea;
}

.item_wp li a:hover span{
color:#7f7de0;
}


.item_wp li a:hover img{
filter: grayscale(100%);
}






/* article **************************************/



.item_block h2.article{
background-color:#45b5da;
}

.item_block h2.article span:before{
background:url(/extra/iot_202006/media/icon_article.png) center bottom no-repeat;
}


.item_article{
background:rgba(255,255,255,0.5);
background:url(/extra/iot_202006/media/img_background.png) center center no-repeat;
background-size:cover;
}

.item_article ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.item_article li{
margin:0 10px 25px;
display:block;
width:22%;

}

.item_article li a{
display:block;
padding:20px;
background-color:#45b5da;
}

.item_article li a:hover{

}



.item_article li a span{

line-height:1.6;
color:#fff;
font-size:100% !important;
transition:0.5s;
}

.item_article li a:hover span{
color:#45b5da !important;
}

.item_article li a:hover img{
filter: grayscale(100%);
}





/* sponcor */


.item_block h2.sponcor{
background-color:#2e2419;
color:#fff;
}

.item_block h2.sponcor span:before{
background:url(/extra/iot_202006/media/icon_sponcor.png) center bottom no-repeat;
}


.item_sponcor{
background:#fff;
}

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

.item_sponcor .logo-area li{
width:250px;
margin:0 15px;
text-align:center;
}

.item_sponcor .logo-area li a:hover{
background:none;
}




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




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



.sp-wrap{
background-position:80% top;
background-size:cover;
}

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


.hero-area .icon img{
width:80%;
display:block;
}


.hero-area .title{
font-size:160%;
width:100%;
}


.item_block{
background-position:center center;
}

.item_block h2{
width:160px;
height:160px;
font-size:150%;
}


.item_block h2 span:before{
top:-50px;
}



/*special*/

.item_special li{
width:70%;
}


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


/*video*/

.item_video li{
width:60%;
}


/*wp*/

.item_wp li{
width:40%;
}

/*article*/

.item_article li{
width:40%;
}



}




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



.sp-wrap{
background-position:80% top;
background-size:cover;
}


.hero-area{
margin:15% 5% 10%;
}

.hero-area .icon{
top:-50px;
left:0;
}

.hero-area .icon img{
display:block;
}

.hero-area .object{
display:none;
}


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


.hero-area .title{
width:100%;
}


.lead_block{
padding:6% 0 0;
font-size:90%;
}


.item_block{
padding:8% 0;
background-position:top center;
}


.item_block h2{
width:140px;
height:140px;
font-size:130%;
}

.item_block h2 span:before{
top:-45px;
}



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





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



}