@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap');

/* フレーム設定-------------------------------------------------------------------------------- */
body {
  background: #1B2B32;
}


.bg {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
  background: url(/extra/vmware_202107/media/hero.png) no-repeat top right;
    overflow: hidden;
    z-index: -1;
    opacity: 1;
}
.bg.blurry {
    opacity: .3;
    animation: blurry .3s linear 1 forwards;
}

@keyframes blurry {
0% {
    opacity: 1;
}
100% {
    opacity: .3;
}
}

#adspecial_vmware_202107{
padding: 0;

}

#adspecial_vmware_202107.adspecial_type1{
max-width:none !important;
color:#444;
}

footer{
margin-top:0;
}


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

.block_sponsored a{
color:#fff;
}


.contents-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 16px;
}

.btn-border {
  display: inline-block;
  min-width: 30%;
  margin: 24px 1% 0;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  background-color: #1D428B;
  border-radius: 5px;
}
.btn-border:hover {color: #fff !important; background-color: #3B99C8;}


/* headline-------------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  height: 400px;
  padding-top: 80px;
  color: #fff;
}
.hero h1 {
  position: relative;
  z-index: 5;
  margin-left: 5%;
  font-size: 5.6rem;
  line-height: 1;
  font-family: 'Rajdhani', sans-serif;
  text-shadow: 8px 8px 0 #1B2B32;
}
.hero h1 span {
  position: relative;
  display: inline-block;
}

.hero h1 span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #1b2b32;
  transform: scale(1, 1);
  transform-origin: top right;
  animation: wipe .2s linear .5s 1 forwards;
}
.hero h1 span:nth-of-type(2)::after {animation: wipe .2s linear .7s 1 forwards;}
.hero h1 span:nth-of-type(3)::after {animation: wipe .2s linear .9s 1 forwards;}

@keyframes wipe {
  0% {transform: scale(1, 1);}
  100% {transform: scale(0, 1);}
}





/* contents-------------------------------------------------------------------------------- */
.summary {
  color: #fff;
}
.summary .contents-inner {
  margin: 0 0 0 5%;
  width: 50%;
}
.summary p {
  margin-bottom: 24px;
}

.media-list {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.media-list.comingsoon:hover {pointer-events: none; color: #444 !important;}
.media-list .media-list-thumb {
  width: 120px;
  flex-shrink: 0;
  margin-right: 16px;
}
.media-list .media-list-title {
  line-height: 1.6;
}


.movie-list {
  position: relative;
  display: block;
  padding: 16px 16px 16px 56px;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

.movie-list::before {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: 16px;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.movie-list::after {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 25px;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #cccccc;
}

.panle-list-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.panle-list-block .media-list {
  display: block;
  width: 48%;
  min-height: 300px;
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
}
.panle-list-block .media-list .media-list-thumb {
  width: 100%;
  margin: 0 0 8px;
  text-align: center;
}
.panle-list-block .media-list .media-list-thumb img {border: 1px solid #ccc;}

.tieup-vm {background: #fff;}
.tieup-vm .media-list-thumb {
  width: 20%;
  margin-right: 40px;
}
.tieup-vm .media-list-thumb img {width: 100%;}



.tieup {
  position: relative;
  background: linear-gradient(to right, #eff1ec 0%,#eff1ec 50%,#eff1ec 50%,#eaeef1 50%,#eaeef1 100%); 
}
.tieup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #78be21 0%,#78be21 50%,#78be21 50%,#2d91da 50%,#2d91da 100%); 
}

.tieup .contents-inner {
  display: flex;
  justify-content: space-between;
}
.tieup [class^="tieup-"] {
  width: 45%;
}
.tieup [class^="tieup-"]  h2 {
  position: relative;
  margin-bottom: 32px;
  font-size: 2.5rem;
  font-family: 'Rajdhani', sans-serif;
}
.tieup [class^="tieup-"]  h2::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 80px;
  height: 4px;
  background: #78BE21;
}
.tieup .tieup-appdown  h2::before {
  background: #2D91DA;}

.tieup .media-list {
  padding: 16px;
  background: #fff;
}


/* webinar link */
.webinar .contents-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 48px auto;
  padding: 48px;
  border: 1px solid rgba(255,255,255, .2);
  color: #fff;
  background: rgba(19,85,97, .3);
}

.webinar .webinar-text strong {
  font-size: 2rem;
}
.webinar .btn-border {
  margin: 0;
  color: #fff;
}
.webinar .btn-border:hover {
  background: rgba(255,255,255,.6);
}



/* sponsor logo */
.sponsor {background: #fff;}
.sponsor ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sponsor li {
  width: 25%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sponsor ul.logo-s img {
  width: 90%;
}




/*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:960px) {
  .bg {
      opacity: .3 !important;
  }
  .bg.blurry {animation: none;}
  .hero {padding-top: 0;}
  .summary {background: #1B2B32;}
  .summary .contents-inner {
      margin: 0;
      padding: 48px 16px 32px;
      width: auto;
  }
.panle-list-block .media-list {
  min-height: 0;
}

  .tieup {
    background:none;
  }
  .tieup::before {display: none;}
  .tieup .contents-inner {display: block;  padding: 0;}
  .tieup [class^="tieup-"] {width: auto; padding: 24px 16px;}
  .tieup .tieup-infraup {background: #EFF1ED;}
  .tieup .tieup-appdown {background: #EAEEF1;}

  .webinar .contents-inner {
    display: block;
    margin: 48px 16px;
  }
  .webinar .webinar-text strong {font-size: 1.5rem;}
  .webinar .btn-border {margin: 24px auto 0;}
}




@media screen and (max-width:640px) {
  .hero h1 {
    font-size: 3.6rem;
  }

  .media-list .media-list-thumb {width: 80px;}
  .media-list .media-list-title {font-size: .85rem;}

  .tieup-vm .media-list {display: block;}
  .tieup-vm .media-list-thumb {
    width: 100%;
    margin: 0 0 16px;
  }
  .tieup-vm .btn-border {display: block; max-width: 70%; margin:  16px auto;}


  .page-top a{
    display:none;
  }
  .block_sponsored {font-size: 10px;}

.sponsor li {
  width: 50%;
}
}