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






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

#adspecial_vmware_multicloud_202104{
padding: 0;

}

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

footer{
margin-top:0;
}


.block_sponsored {
padding: 3% 20px;
text-align: center;
background-color:#5a575b;
color:#fff;
}

.block_sponsored a{
color:#fff;
}







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


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

  100% {
    opacity: 1;}
}



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


.hero-area{
margin:0 auto;
padding:5%;
background:url(/extra/vmware_multicloud_202104/media/img-hero.jpg) center center no-repeat;
position:relative;
overflow:hidden;
}


.hero-area .head_block{
/*background:rgba(0,145,218,0.8);*/
background: rgb(29,66,138);
background: linear-gradient(90deg, rgba(29,66,138,0.85) 0%, rgba(0,145,218,0.7) 100%);
width:70%;
margin:0 auto;
padding:50px 5%;
transform-origin: top left;
opacity: 0;
animation: bg-slide 0.3s linear 0.3s forwards;
}



.hero-area .head_block h1{
font-size:200%;
text-align:center;
margin:0 auto 45px;
line-height:1.4;
color:#fff;
position:relative;
z-index:100;
opacity:0;
animation: fade 0.5s linear 0.8s forwards;
}

.hero-area .head_block h1 span{
font-size:80%;
display:block;
margin-top:10px;
}


.hero-area .head_block h1:after{
content:"";
position:absolute;
bottom:-25px;
left:0;
width:100%;
height:2px;
background: linear-gradient(90deg, rgba(0,145,218,1) 0%, rgba(120,190,32,1) 100%);
transition:0.5s ease;
transform-origin: top left;
opacity: 0;
animation: bg-slide 0.5s linear 1.5s forwards;
}


.head_block p{
color:#fff;
font-size:100%;
line-height:1.5;
margin-bottom:25px;
opacity:0;
animation: fade 0.5s linear 1.2s forwards;
}




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

@keyframes bg-slide{
0% {
    opacity: 0;
    transform:scaleX(0);
}
100% {
    opacity: 1;
    transform:scaleX(1);
}
}










/*続きを読む*/

.lead-text {
    display: none;
}


.readmore {
    position: relative;
    margin: -30px 5% 0;
padding:25px 0;
    display: block;
text-align:center;
background-color:#fff;
    color: #fff;
    border: none;
    outline: 0;
    transition: .5s;
font-size:16px;
cursor: pointer;
border-radius:15px;
width:40%;
z-index:100;
}
 


.readmore:after{
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-top: 2px solid #0091da;
    border-right: 2px solid #0091da;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .2s;
}


.readmore:hover{
background-color:#0091da;
}
 
.readmore:hover:after {
    /*top: 40px;*/
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
}
 
.on-click {
    margin: -30px auto 0 !important;
    color: transparent!important;

}

.on-click:after{
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #0091da;
    border-left: solid 2px #0091da;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .3s;
}


/*button.on-click:after{
    top: 50%;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #fff;
    border-left: solid 2px #fff;
}*/


.on-click:hover:after {
    top: 50%;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #fff;
    border-left: solid 2px #fff;
}
 




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




.fade_text{
position: relative;
}

.fade_text:after{
position: absolute;
bottom: 0;
left: 0;
content: "";
display: block;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(240,240,240,1) 80%,rgba(240,240,240,1) 100%);
}



.category-area{
margin:0 auto;
padding:0;
background-color:#fff;
overflow:hidden;
position:relative;
}

.category-area h2{
position:absolute;
top:0;
left:0;
font-size:180%;
color:#fff;
margin:0;
padding:35px 0 40px 3%;
text-align:left;
width:50%;
z-index:100;
}


.category-area h2:before{
content:"";
position:absolute;
top:0;
left:-60px;
width:0;
height:100%;
/*background-color:#0091da;*/
/*background: rgb(0,145,218);
background: linear-gradient(90deg, rgba(0,145,218,1) 0%, rgba(120,190,32,1) 100%);*/
transition:0.5s ease;
z-index:-1;
/*transform:skew(-20deg);*/
}

.category-area h2.slide:before{
width:100%;
}

.category-area h2.wp:before{
background-color:#78BE20;
}

.category-area h2.article:before{
background-color:#0091DA;
}



.category-area h2 span{
color:#fff;
font-size:50%;
line-height:1.4;
position:relative;
display:block;
}


.category-area h2.info{
top:0;
/*color:#0091da;*/
color:#fff;
}

.category-area h2.info span{
color:#fff;
}

.category-area h2.info:before{
background: rgb(0,145,218);
background: linear-gradient(90deg, rgba(0,145,218,1) 0%, rgba(0,193,215,1) 100%);
}


.category-area h2.green:before{
background-color:#0091da;
}




.category-area .category-inner{
margin:0 auto;
max-width:1020px;
overflow:hidden;
}

.bg-back{
background:url(/extra/vmware_multicloud_202104/media/img-contents.jpg) center bottom no-repeat;
background-size:cover;
background-attachment:fixed;
}

.bg-blue{
background-color:#1d428a;
}

.bg-green{
background-color:#78be20;
}


.bg-gray{
background-color:#717074;
background:rgba(113,112,116,0.2);
}


.category-area .summary{
font-size:18px;
line-height:1.4;
margin:55px auto 0;
text-align:left;
color:#555555;
width:78%;
}



.category-area .contents-list{
display:flex;
flex-wrap:wrap;
justify-content:left;
/*align-items:baseline;*/
align-items:center;
margin:10% 0 50px;
position:relative;
z-index:1000 !important;
}

.category-area .contents-list li{
width:28%;
height:370px;
margin:0 20px 40px;
padding:20px;
position:relative;
background-color:#fff;
box-shadow:0 0 20px #ccc;
opacity:0;
transition:1.0s ease;
}


.category-area .contents-list li.fade-in{
    opacity: 1;
}


.category-area .contents-list li:hover,
.category-area .contents-list li a:hover{
background:rgba(255,255,255,0.7);
}


.category-area .contents-list li img{
border:1px solid #ccc;
margin:15px auto 25px;
text-align:center;
display:block;
width:140px;
height:auto;
}


.category-area .contents-list li:hover img{
box-shadow:0 0 15px #b0b0b0;
transition:0.5s;
}

.category-area .contents-list li a span{
text-align:left;
margin:15px auto;
color:#5a575b;
display:block;
font-size:16px;
line-height:1.4;
position:relative;
}

.category-area .contents-list li a:hover span{
color:#0091da;
}



.category-area .contents-list li a span:before{
content:"";
position:absolute;
top:-10px;
right:0;
width:0;
height:1px;
background-color:#78be20;
transition:0.5s;
}

.category-area .contents-list li a span:after{
content:"";
position:absolute;
bottom:-10px;
left:0;
width:0;
height:1px;
background-color:#78be20;
transition:0.5s;
}


.category-area .contents-list li a:hover span:before,
.category-area .contents-list li a:hover span:after{
width:100%;
}








.category-area .article-list li{
height:280px;
margin-bottom:25px;
}



.category-area .info-list{
margin:5% 0 50px 0;
padding:0 5% 5%;
}

.category-area .info-list li{
width:300px;
height:300px;
margin:0 auto;
background:none;
box-shadow:none;
}

.category-area .info-list li:hover{
background:none;
}



.category-area .info-list li img{
border:none;
width:250px;
height:250px;
margin:15px 0 0;
background-color:#ccc;
}

.category-area .info-list li:hover img{
box-shadow:0 0 5px #fff;
transition:0.5s ease;
}

.category-area .info-list li a h3{
font-size:18px;
margin-bottom:5px;
color:#fff;
}

.category-area .info-list li a span{
font-size:14px;
color:#fff;
}

.category-area .info-list li a:hover h3,
.category-area .info-list li a:hover span{
color:#0091da;
transition:0.3s ease;
}



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






/*tag*/

.category-area .contents-list .tag-icon{
margin:5px auto;
padding:6px 10px;
border-radius:50px;
display:inline-block;
color:#fff;
font-size:11px;
font-weight:bold;
}

.category-area .contents-list .tag-a{
background-color:#FF9922;
}

.category-area .contents-list .tag-b{
/*background-color:#569C3C;*/
background-color:#888888;
}

.category-area .contents-list .tag-c{
background-color:#7A3CA3
}




/*pagetop*/

.page-top {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
}


.page-top a{
display: block;
padding: 8px 0 0 8px;
width: 40px;
height: 40px;
background-color: #000;
color: #fff;
text-align: center;
position:relative;
}


.page-top a:hover{
background-color: #555;
transition:0.5s ease;
}


.page-top a:after{
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 12px;
    height: 12px;
    margin: -3px 0 0 -6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
}






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



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


.hero-area .head_block{
width:75%;
}

.category-area .contents-list{
margin:13% 0 50px;
}






}


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


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

.hero-area:after{
right:15px;
background-size:40%;
}

.hero-area .head_block{
width:70%;
padding:25px;
}


.hero-area .head_block h1{
margin:0 auto 6%;
font-size:160%;
}


.hero-area .head_block h1:after{
bottom:-10px;
left:0;
}



.hero-area .head_block p{
font-size:90%;
}


.lead_block{
padding:15px 15px 30px;
font-size:100%;
}


.category-area h2{
padding:30px 0 50px 4%;
font-size:160%;
width:60%;
}



.category-area .contents-list{
margin:15% auto 4%;
}

.category-area .contents-list li{
width:42%;
}








}




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


.hero-area{
padding:0;
position:relative;
}

.hero-area .head_block{
margin:5%;
padding:15px;
width:90%;
}


.hero-area h1{
font-size:120%;
z-index:1000;
margin:35% 0 0 5%;
}



.lead_block{
margin:0;
padding:5%;
font-size:100%;
}


button.readmore{
width:60px;
height:60px;
}


.category-area h2{
font-size:120%;
width:80%;
padding:30px 0 50px 6%;
}



.category-area .contents-list{
display:block;
margin:25% 0 0 0;
}


.category-area .contents-list li{
width:70%;
height:auto;
margin:45px auto;
padding:25px;
}

.category-area .contents-list li img{
margin:0 auto;
display:block;
}

.category-area .contents-list li span{
margin:15px auto;
}



.category-area .info-list li{
width:300px;
height:300px;
margin:0 auto 40px;
}


.category-area .info-list li a h3{
text-align:center;
margin:10px auto 0;
}


.page-top a{
display:none;
}




}