body{
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ Ｐゴシック', arial, sans-serif;
}

footer{margin-top:0;}


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

#adspecial_aws_202007{
padding: 0;

}



#adspecial_aws_202007.adspecial_type1{
width:100% !important;
max-width:100% !important;
}

#adspecial_aws_202007.adspecial_type1 .frame_col_left{
margin:0;
}


.block_sponsored{
margin:25px auto 0;
padding:4%;
text-align:center;
background-color:#232f3e;
color:#f29417;
}

.block_sponsored a{
color:#fff;
}


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

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

  100% {
    opacity: 1;}
}

@keyframes color{
  0% {
    color:#fff;}

  100% {
    color:#f29417;}
}


@keyframes line{
0%{
opacity:0;
transform:scaleX(0);
}
100%{
opacity:1;
transform:scaleX(1);
}
}


@keyframes bgslide{
   0% { opacity: 0; }
   10% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 1; }
  45% { opacity: 0; }
 100% { opacity: 0; }
}


#adspecial_aws_202007.adspecial_type1 .header-area{
/*background:url(/extra/aws_202007/media/head_title.jpg) 30% top no-repeat;*/
/*animation: fade 0.3s linear 0.1s forwards;
opacity:0;*/
position:relative;
width:100%;
}


#adspecial_aws_202007.adspecial_type1 .header-area .back-img {
  position   : absolute;
  top        : 0;
  left       : 0;
bottom:0;
right:0;
  opacity    : 0;
  animation  : bgslide 12s infinite; 
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
background-position: 30% top no-repeat;
}

#adspecial_aws_202007.adspecial_type1 .header-area .bg1{
  background-image : url(/extra/aws_202007/media/head_title1.jpg); 
  animation-delay  : 0s;
}
#adspecial_aws_202007.adspecial_type1 .header-area .bg2 {
  background-image : url(/extra/aws_202007/media/head_title2.jpg);
  animation-delay  : 4s;
}
#adspecial_aws_202007.adspecial_type1 .header-area .bg3 {
  background-image : url(/extra/aws_202007/media/head_title3.jpg);
  animation-delay  : 8s;
}



#adspecial_aws_202007.adspecial_type1 .specialttl{
/*background:rgba(0,0,0,0.15);*/
padding:10px 0;
}
#adspecial_aws_202007.adspecial_type1 .specialttl a{
display:block;
margin:0 auto;
text-align:center;
font-size:120%;
font-family:'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
font-weight:bold;
color:#fff;
position:relative;
}
#adspecial_aws_202007.adspecial_type1 .specialttl a:hover{
color:#f29417 !important;
}

/*
#adspecial_aws_202007.adspecial_type1 .specialttl a:after{
content:"";
position:absolute;
bottom:-8px;
left:48%;
width:4%;
height:3px;
background-color:#fff;
}
*/



#adspecial_aws_202007.adspecial_type1 .subttl{
margin:3% 6% 0;
padding:1px 15px;
text-align:center;
font-size:120%;
color:#1a293c;
animation: fade 0.3s linear 0.5s forwards;
opacity:0;
background:#f29417;
border-radius:50px;
display:inline-block;
font-weight:bold;
position:relative;
z-index:2;
}


#adspecial_aws_202007.adspecial_type1 .subttl a{
color:#1a293c !important;
}


#adspecial_aws_202007.adspecial_type1 .subttl a:hover{
color:#1a293c !important;
opacity:0.9;
transition:0.5s;
}


#adspecial_aws_202007.adspecial_type1 h1{
padding:0 6% 3%;
font-size:190%;
line-height:1.5;
color:#fff;
letter-spacing:0.08em;
animation: fade 1.0s linear 0.8s forwards;
opacity:0;
display:block;
position:relative;
z-index:1;
}

#adspecial_aws_202007.adspecial_type1 .mainttl{/*IT活用大辞典*/
color:#f29417;
font-size:140%;
}



#adspecial_aws_202007.adspecial_type1 .page-ttl{
padding:15px;
color:#fff;
font-size:130%;
font-weight:bold;
display:block;
position:relative;
text-align:center;
width:100%;
height:100%;
z-index:2 !important;
}

#adspecial_aws_202007.adspecial_type1 .page-ttl:after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
animation: line 0.5s linear 0.8s forwards;
opacity:0;
z-index:-1;
}

#adspecial_aws_202007.adspecial_type1 .ttl-cloud{
color:#f42433;
}


#adspecial_aws_202007.adspecial_type1 .ttl-infra{
color:#ed5e1f;
}

#adspecial_aws_202007.adspecial_type1 .ttl-productivity{
color:#b3da17;
}

#adspecial_aws_202007.adspecial_type1 .ttl-security{
color:#039164;
}


#adspecial_aws_202007.adspecial_type1 .ttl-competitive{
color:#1dd2f2;
}

#adspecial_aws_202007.adspecial_type1 .ttl-driven{
color:#3382f9;
}

#adspecial_aws_202007.adspecial_type1 .ttl-innovation{
color:#8340dd;
}

#adspecial_aws_202007.adspecial_type1 .ttl-tag{
color:#f29418;
}








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


.lead-area{
background-color: #1a293c;
background-image: url("https://www.transparenttextures.com/patterns/brilliant.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
color:#fff;
padding:2% 6%;
}


.explanation{
font-size:85%;
margin-top:30px;
color:#f29417;
}


.nav-category{
display:flex;
/*background:rgba(0,0,0,0.5);*/
align-items:center;
padding:0 2%;
}

.nav-category li{
width:17%;
line-height:1.4;
font-size:85%;
font-weight:bold;
}

.nav-category li a{
text-align:center;
color:#fff;
display:block;
justify-content:space-between;
position:relative;
margin:0;
padding:12% 0;
}


.nav-category li a:after {
position: absolute;
left: 20%;
bottom:0;
content:"";
width: 60%;
height: 3px;
background-color:#fff;
transform: scale(0, 1);
transform-origin: center top;
transition: transform 0.3s;
}

.nav-category li a:hover:after  {
  transform: scale(1, 1);
}



.nav-category li.management span,
.nav-category li.management a:hover{
color:#f42433 !important;
}
.nav-category li.management a:hover:after{
background-color:#f42433 !important;
}


.nav-category li.infrastructure span,
.nav-category li.infrastructure a:hover{
color:#ed5e1f !important;
}
.nav-category li.infrastructure a:hover:after{
background-color:#ed5e1f !important;
}


.nav-category li.productivity span,
.nav-category li.productivity a:hover{
color:#b3da17 !important;
}
.nav-category li.productivity a:hover:after{
background-color:#b3da17 !important;
}


.nav-category li.security span,
.nav-category li.security a:hover{
color:#039164 !important;
}
.nav-category li.security a:hover:after{
background-color:#039164 !important;
}

.nav-category li.competitive span,
.nav-category li.competitive a:hover{
color:#1dd2f2 !important;
}
.nav-category li.competitive a:hover:after{
background-color:#1dd2f2 !important;
}


.nav-category li.datadriven span,
.nav-category li.datadriven a:hover{
color:#3382f9 !important;
}
.nav-category li.datadriven a:hover:after{
background-color:#3382f9 !important;
}

.nav-category li.innovation span,
.nav-category li.innovation a:hover{
color:#8340dd !important;
}
.nav-category li.innovation a:hover:after{
background-color:#8340dd !important;
}



.nav-category li span{
font-size:70%;
text-align:center;
color:#fff;
display:block;
font-weight:bold;
font-family:'arial';
}





h2{
text-align:center;
padding:25px 0;
color:#232f3e;
font-size:220%;
font-family:'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
line-height:1.3;
letter-spacing:-0.05em;
}

h2 span{
font-size:14px;
display:block;
text-align:center;
}






.aws-contents{
padding:3% 8%;
background-color:#e5e5e5;
}



/*tag*/

.tag-area{
padding:0 8% 3%;
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.tag-area li a{
display:block;
margin:15px;
padding:5px 15px;
background-color:#f29417;
box-shadow:0 0 8px #ccc;
color:#fff;
font-size:16px;
position:relative;
z-index:2;
border-radius:25px;
}

.tag-area li a:hover{
color:#232f3e !important;
}

.tag-area li a:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform: scale(0.7);
z-index:-1;
border-radius:25px;
}

.tag-area li a:hover:before{
background-color:#fff;
transform: scale(1.0);
color:#232f3e !important;
transition:0.2s ease;
}







/*contents tile*/

.contents-tile{
width:100%;
margin:0;
padding:30px 0;
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.contents-tile div{
width:17%;
margin:0 30px 50px;
padding:1.5%;
background-color:#151515;
box-shadow:0 0 10px #a0a0a0;
position:relative;
z-index:2;
}
.contents-tile div span{
display:block;
}

.contents-tile div img{
display:block;
margin:0 auto;
text-align:center;
width:75%;
}

.contents-tile .tile-ttl{
margin:10px 0;
font-size:14px;
font-weight:bold;
color:#fff;
display:block;
}


.contents-tile div:before{
content:"";
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0.8);
z-index:-1;
}

.contents-tile div:hover:before{
background-color:#fff;
transform: scale(1.0);
transition:0.2s ease;
}

.contents-tile div:hover a span{
color:#333;
}

.contents-tile div:hover a img{
box-shadow:0 0 10px #999;
}



/*
.free-wall {
}

.filter-items {
padding: 10px 0px;
}
*/



.filter-label,
.contents-label {
margin:10px auto 0;
background-color:#ccc;
padding: 3px;
text-align: center;
color: #ffffff;
font-weight:bold;
border-radius:2px;
}

.contents-label{
padding: 1px;
font-size:11px;
text-align:center;
width:120px;
}



.label-tag{
background-color:#f29418;
color:#232f3e;
font-weight:bold;
}


.label-wp,
.label-special,
.label-video,
.label-article{
background-color:#232f3e;
color:#f29418;
font-weight:bold;
}





.label-management{
background-color:#f42433;
}

.label-infra{
background-color:#ed5e1f;
}

.label-productivity{
background-color:#b3da17;
}

.label-security{
background-color:#039164;
}

.label-competitive{
background-color:#1dd2f2;
}

.label-datadriven{
background-color:#8340dd;
}

.label-innovation{
background-color:#3382f9;
}


.filter-label.active,
.filter-label:hover {opacity: 1.0;}

.free-wall {
	margin: auto;
}








.free-wall-logo {
	margin: auto;
	height: 420px;
}




/*トップへ戻る*/


.btn-top a{
background-color:#f29417;
width:25%;
margin:25px auto;
padding:1.5%;
text-align:center;
color:#fff;
font-size:100%;
display:block;
}

.btn-top a:hover{
background-color:#232f3e;
color:#f29417 !important;
}


/*sponsor*/

.sponsor-area{
background-color:#fff;
padding:2% 5%;
}

.sponsor-area ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.sponsor-area ul li{
width:150px;
margin:0 50px;
}




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

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



#adspecial_aws_202007.adspecial_type1 .header-area{
background:url(/extra/aws_202007/media/head_title.jpg) 50% top no-repeat;
background-size:cover;
}


.nav-category{
flex-wrap: wrap;
justify-content:center;
}

.nav-category li{
width:30%;
margin:10px 0;
line-height:1.5;
}

.nav-category li a{
padding:8% 0;
}



/*tag*/

.tag-area{
padding:2% 10%;
}





/*tile*/


.contents-tile div{
width:40%;
margin:0 25px 30px;
padding:4%;
}



.btn-top a{
width:60%;
}




}




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


#adspecial_aws_202007.adspecial_type1 .header-area{
background:url(/extra/aws_202007/media/head_title.jpg) 70% center no-repeat;
background-size:cover;
}

#adspecial_aws_202007.adspecial_type1 .specialttl a{
font-size:90%;
}

#adspecial_aws_202007.adspecial_type1 .specialttl a:after{
width:20%;
left:40%;
}

#adspecial_aws_202007.adspecial_type1 .subttl{
font-size:90%;
margin-bottom:15px;
}
#adspecial_aws_202007.adspecial_type1 h1{
padding:0 6% 3%;
font-size:120%;
}

#adspecial_aws_202007.adspecial_type1 .mainttl{
width:100%;
font-size:120%;
}


.lead-area{
padding:5%;
}

.nav-category{
flex-wrap: wrap;
}

.nav-category li{
width:48%;
margin:5px 0;
line-height:1.5;
}

.nav-category li a{
padding:5% 0;
}


/*tag*/

.tag-area{
padding:2% 5%;
}


/*tile*/


.contents-tile{
display:block;
}

.contents-tile div{
width:100%;
margin:0 auto 30px;
padding:15px;
}




.btn-top a{
width:80%;
}


.sponsor-area ul li{
width:100px;
margin:0 25px;
}



}