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


body {
width: 100%;
position:relative;
}



#adspecial_vmware_202306{
padding: 0;
}


#adspecial_vmware_202306.adspecial_type1{
width:100% !important;
max-width:100% !important;
position:relative;
line-height:1.5;
}



footer{
margin-top:0;
}


.block_sponsored {
background:#1e2a31;
margin:0;
padding: 30px 20px;
text-align: center;
color:#fff;
}

.block_sponsored a{
color:#018ed7;
}



.container-fluid {
max-width: 1000px;
margin:0 auto;
padding:40px 0;
background-color: transparent;
}


.head-wrap{
margin: 0 auto;
background:url(/extra/vmware_202306/media/head_background.jpg) center center no-repeat;
background-size:cover;
box-shadow:0 0 20px #909090;
z-index:-1;
position:relative;
}


.head-wrap:before{
content:"";
position:absolute;
top:0;
left:-25%;
background: linear-gradient(45deg, rgba(0,145,218,0.8) 20%, rgba(120,190,32,0.7) 100%);
width:100vw;
height:100%;
transform:skew(-45deg);
z-index:1;
}

.head-wrap:after{
content:"";
position:absolute;
top:0;
left:65%;
background: linear-gradient(45deg, rgba(0,145,218,0.8) 0%, rgba(0,193,213,0.5) 100%);
width:25vw;
height:80%;
transform:skew(-45deg);
z-index:2;
}


.ttl-area {
max-width:1300px;
margin:0 auto;
padding:0 15px;
position: relative;
z-index:100;
}

/*.ttl-area:before{
content:"";
position:absolute;
top:0;
right:-15%;
background: linear-gradient(45deg, rgba(0,145,218,0.8) 0%, rgba(29,66,138,0.6) 100%);
width:35%;
height:100%;
transform:skew(-45deg);
z-index:2;
}*/


.ttl-area h1 {
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
height: 200px;
margin:0 auto;
padding:0 15px;
color: #fff;
font-size:2.8rem;
position:relative;
z-index:1000;
}

.ttl-area h1 span{
width:fit-content;
margin-bottom:8px;
font-family: Arial, sans-serif !important;
}



.ttl-area h1 .ttl-main{
font-weight:normal;
position:relative;
opacity:0;
animation: fade 0.5s linear 0.5s forwards;
}

.ttl-area h1 .ttl-label{
font-weight:normal;
font-size:50%;
background: linear-gradient(90deg, rgba(29,66,138,1) 0%, rgba(0,145,218,1) 100%);
color:#fff;
padding:0 65px;
opacity:0;
animation: fade 0.5s linear 0.2s forwards;
}


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

  100% {
    opacity: 1;}
}


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

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



h2 {
position: relative;
margin:0 auto 50px;
padding:0;
text-align:center;
color: #666;
font-weight: normal;
font-size: 2rem;
line-height:1.4;
width:fit-content;
font-feature-settings: "palt" 1;
z-index:1000;
}

h2:before{
content:"";
position:absolute;
bottom:-10px;
width:100%;
height:4px;
/*background: linear-gradient(90deg, rgba(26,67,139,1) 0%, rgba(0,156,221,1) 30%, rgba(36,192,158,1) 70%, rgba(97,191,66,1) 100%);*/
background: linear-gradient(to right,#6fbe2e 19%,#00bbd6 38%,#0f61a9 64%,#5a39a0 88%);
}


h2 span{
font-size:1rem;
color:#666;
display:block;
}




/*** summary ***/


.lead-area {
width:100%;
margin:0 auto;
padding:0 15px 50px 15px;
max-width:1300px;
position:relative;
z-index:100;
}


.lead-area p {
font-size: 16px;
line-height: 1.8;
color:#fff;
padding: 10px 15px;
max-width:800px;
text-shadow:0 0 10px #444;
opacity:0;
animation: fade 0.5s linear 1.0s forwards;
}




/*** contents ***/


.background-gray{
background-color:#f4f8fa;
padding:30px 0 20px 0;
}

.content-area{
position:relative;
margin:20px auto;
padding:45px 0;
}

.content-area .content-inner,
.sponsor-area ul{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
max-width:100%;
position:relative;
z-index:100;
}



.content-area .wizaas-area,
.content-area .nissho-area{
margin:0;
padding:25px;
width:45%;
background-color:#fff;
box-shadow:0 0 20px #d5d5d5;
border-radius:5px;
}


.content-area .banner-inner,
.content-area .wp-inner{
margin:30px auto;
text-align:center;
}

.content-area .banner-inner a:hover{
opacity:0.7;
transition:0.5s;
}

.content-area .wp-inner{
display:flex;
justify-content:space-between;
margin:30px auto 0;
padding-top:40px;
border-top:1px dotted #e0e0e0;
}

.content-area .wp-inner a img{
max-width:130px;
border:1px solid #eee;
}

.content-area .wp-inner a:hover{
opacity:0.7;
transition:0.3s;
}


.content-area .wp-inner a span{
color:#666;
font-size:16px;
margin:15px;
display:block;
}

.content-area .wp-inner a:hover span{
color:#0091da !important;
}



.content-area .link-inner{
/*background-color:#f0f0f0;*/
margin:45px auto;
padding:0 30px;
}


.content-area ul li a{
margin:25px auto;
padding:20px 40px;
text-align:center;
background-color:#0091da;
color:#fff;
font-size:16px;
/*border-radius:5px;*/
max-width:800px;
display:block;
position:relative;
}

.content-area ul li a:hover{
background-color:#fff;
color:#0091da !important;
box-shadow:0 0 20px #c0c0c0;
}

.content-area ul li a:before{
content:"";
position:absolute;
top:40%;
right:20px;
width: 15px;
height: 15px;
border-top: solid 1px #0091da;
border-right: solid 1px #0091da;
transform: translateX(-25px) rotate(45deg);
transition:0.5s;
opacity:0;
}

.content-area ul li a:hover:before{
transform: translateX(0) rotate(45deg);
transition:0.5s;
opacity:1;
}

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

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










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



@media (max-width: 960px) {


#adspecial_vmware_202306.adspecial_type1{
background-size:cover;
}

.head-wrap:before{
left:-40%;
width:130vw;
}

.head-wrap:after{
width:30vw;
left:80%;
}


.ttl-area h1,
.ttl-area h1 .ttl-main{
font-size:2rem;
}

h2{
font-size:1.5rem;
}


.content-area .content-inner,
.sponsor-area ul{
display:block;
}


.content-area .link-inner{
padding:15px 30px 0;
}

.content-area .wizaas-area,
.content-area .nissho-area,
.content-area ul li a{
width:auto;
margin:15px;
}


.sponsor-area ul li{
margin:0 auto;
}


}




@media (max-width: 640px) {



.head-wrap:before{
left:-100%;
width:200vw;
}

.head-wrap:after{
width:40vw;
left:95%;
}




.lead-area p{
font-size:14px;
}


.content-area .wp-inner a span{
font-soze:14px;
}


.content-area .wp-inner{
display:block;
margin:30px auto;
}



}