@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');





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

body{
font-family: 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}


#adspecial_microsoft_ivs_202210{
padding: 0;
}


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

footer{
margin-top:0;
}



#adspecial_microsoft_ivs_202210.adspecial_type1 .frame_col_left{
position:relative;

}



.adspecial_type1{
    max-width: 1050px !important;
    width: 100% !important;

}

footer{
margin-top:0;
}


.block_sponsored {
max-width:1000px;
border-top:1px solid #d5e1eb;
margin:0 auto;
padding: 60px 15px;
font-weight:bold;
text-align: center;
color:#444;
}

.block_sponsored a{
color:#568eda;
}

.block_sponsored img{
display:block;
margin:25px auto 0;
}



.pagetop {
display: none;
position: fixed !important;
bottom: 20px;
right: 20px;
padding:10px 25px;
color:#fff;
background:#0078d4;
font-size:14px;
/*box-shadow:0 0 15px #ccc;*/
transition:0.3s ease;
font-family: 'Barlow', sans-serif;
}

.pagetop:hover{
color:#fff !important;
background:rgba(0,0,0,0.4);
}





/* header-------------------------------------------------------------------------------- */



.hero-area{
background:#fff url(/extra/microsoft_ivs_202210/media/img_hero.png) right top no-repeat;
background-size:cover;
padding:3% 7% 0;
height:450px;
color:#fff;
line-height:1.4;
position:relative;
}


.hero-area h1{
font-size:250%;
color:#0778d8;
text-align:left;
line-height:1.2;
display:flex;
flex-direction: column;
position:relative;
z-index:100;
}


.hero-area span.main-ttl{
font-family:Barlow , sans-serif;
position:relative;
display:inline-block;
opacity:0;
animation: fade-down 0.5s linear 0.2s forwards;
}


.hero-area span.sub-ttl{
font-size:50%;
margin:20px 0 0 0;
display:inline-block;
opacity:0;
animation: fade-down 0.5s linear 0.7s forwards;
}



.hero-area .lead{
margin:20px 0;
padding:15px;
width:50%;
background:rgba(255,255,255,0.7);
color:#444;
box-shadow:0 0 20px #eee;
font-size:85%;
line-height:1.6;
opacity:0;
animation: fade 0.5s linear 1.0s forwards;
}


.hero-area .parts-cloud img:nth-of-type(1){
position:absolute;
top:15%;
right:38%;
animation: cloud-move01 5s ease-in-out 0s infinite;
z-index:1;
}


.hero-area .parts-cloud img:nth-of-type(2){
position:absolute;
top:4%;
right:20%;
animation: cloud-move02 3s ease-in-out 0s infinite;
z-index:1;
}

.hero-area .parts-cloud img:nth-of-type(3){
position:absolute;
top:5%;
right:0;
animation: cloud-move03 4s ease-in-out 0s infinite;
z-index:1;
}



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

  100% {
    opacity: 1;}
}

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

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


@keyframes slide{
  0% {
    opacity: 0;
width:0;}

  100% {
    opacity: 1;
width:100%;}
}



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

@keyframes cloud-move02 {
  0%{
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

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






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



.category-area{
margin:0 auto;
max-width:1000px;
}


.category-area h2{
font-size:250%;
color:#0778d8;
text-align:center;
position:relative;
font-family: 'Barlow', sans-serif;
}

.category-area h2 span{
background-color:#fff;
padding:0 60px;
line-height:1.2;
}

.category-area .ttl-jpn{
margin-top:-10px;
text-align:center;
font-size:13px;
color:#ccc;
margin-bottom:40px;
}


.category-area h2:before{
content:"";
position:absolute;
top:50%;
left:0;
background-color:#ccc;
width:100%;
height:1px;
z-index:-1;
}


.category-area .nav-section{
display:flex;
justify-content:space-between;
}

.category-area .nav-section .btn_nav{
margin:20px auto 60px;
padding:10px;
text-align:center;
/*background-color:#d8eaf7;*/
background-color:#fff;
color:#2387dc;
font-weight:bold;
box-shadow:0 0 15px #cfe6f5;
border-radius:5px;
transition:0.3s;
width:48%;
display:block;
position:relative;
}


.category-area .nav-section .btn_nav:hover{
background-color:#d8eaf7;
color:#2387dc !important;
position:relative;
}

.category-area .nav-section .btn_nav:after{
content:"";
position:absolute;
bottom:-5px;
left:calc(50% - 16px);
width: 16px;
height: 16px;
margin: 0 10px;
border-bottom: 3px solid #2387dc;
border-right: 3px solid #2387dc;
transform: rotate(45deg);
opacity:0;
transition:0.3s;
}

.category-area .nav-section .btn_nav:hover:after{
bottom:-15px;
opacity:1;
}




.contents-section{
margin:5% auto;
max-width:1050px;
}

.contents-section ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
width:100%;
position:relative;
}



.contents-section ul.document-section{
margin:60px 0 0 0;
}


.contents-section ul.tag-section{
gap: 30px 5px;
justify-content:center;
}

.contents-section ul.tag-section li{
margin:0 5px;
}

.contents-section ul.tag-section li a{
padding:10px 15px;
color:#2387dc;
font-size:14px;
font-weight:bold;
box-shadow:0 0 10px #eee;
display:block;
transition:0.5s;
}


.contents-section ul.tag-section li a:hover{
background-color:#5fb9fe;
color:#fff !important;
}



.contents-section ul.document-section li{
width:200px;
margin:20px 25px 60px;
padding:0;
line-height:1.3;
position:relative;
}


.contents-section ul.document-section li:hover:after{
content:"";
position:absolute;
bottom:-10px;
left:0;
width:0;
height:5px;
background-color:#5fb9fe;
opacity:0;
animation: slide 0.3s linear 0s 1 forwards;
}





@keyframes zoom-in {/*フィルタリング用アニメーション*/
  0% {
   transform: scale(0.5);
  }
  100% {
    transform: none;
  }
}

.contents-section .document-section .animate {/*フィルタリング用アニメーション*/
  animation: 0.5s zoom-in;
}


.contents-section ul li a{
display:block;
}


.contents-section ul li img{
width:200px;
height:260px;
margin:0 auto 15px;
object-fit:contain;
text-align:center;
border:1px solid #eee;
display:block;
}

.contents-section ul li a:hover img{
opacity:0.5;
transition:0.5s;
}


.contents-section ul li span{
display:block;
}



.contents-section ul li span.caption{
font-size:90%;
font-weight:bold;
line-height:1.5;
color:#666666;
margin:10px 0 15px;
}


.contents-section ul li span.tag{
font-size: 70%;
margin: 5px 0 0;
color: #70838f;
line-height: 1.4;
}


.contents-section ul li a:hover span{
transition:0.3s;
color:#5fb9fe;
}


.contents-section ul li span.label{
width:auto;
height:18px;
line-height:18px;
background-color:#5fb9fe;
color:#fff;
font-size:11px;
font-weight:bold;
text-align:center;
}

.contents-section ul li span.label.special{
background-color:#53dfaf;
}

.contents-section ul li a:hover span.label{
color:#fff;
}


.contents-section .list_box{
/*border:1px solid #cccccc;*/
margin:40px auto;
position:relative;
z-index:1;
}


.contents-section .list_box .ttl_label{
position:absolute;
top:-20px;
left:0;
width:130px;
height:20px;
line-height:20px;
background-color:#0778d8;
color:#fff;
font-size:13px;
text-align:center;
z-index:100;
}



.contents-section .list_box ul{
display:block;
position:relative;
/*background-color:#f5f5f5;*/
padding:20px;
}



.contents-section .list_box span.ondemand,
.contents-section .list_box span.live{
display:inline;
font-size:11px;
font-weight:normal;
background-color: #5fb9fe;
border-radius:3px;
vertical-align:center;
margin-right:10px;
padding:2px 5px;
text-align:center;
color:#fff;
}


.contents-section .list_box span.live{
background-color: #23c6a0;
}


.contents-section .list_box ul li{
color:#252525;
font-size:100%;
font-weight:bold;
margin:25px 0;
padding-left:30px;
width:100%;
position:relative;
}


.contents-section .list_box ul li:before{
content:"";
position:absolute;
top:5px;
left: 0;
width: 10px;
height: 10px;
border-top: 1px solid #444;
border-right: 1px solid #444;
transform: rotate(45deg);
}


.contents-section .list_box ul li a:hover{
color:#0778d8 !important;
}

.contents-section .list_box ul li:hover:before{
border-top: 1px solid #0778d8;
border-right: 1px solid #0778d8;
transform: translateX(5px) rotate(45deg);
transition:.3s;
}


.contents-section .list_box span.event{
background-color:#07b50b
}


/* scroll */




::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-track {
  background: #e5e5e5;
}

::-webkit-scrollbar-thumb {
  background: #a0a0a0;
}





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


@media screen and (max-width:1300px){
.hero-area{
padding:3% 5% 0;
background-position:60% top;
}


}


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


.hero-area{
padding:3% 5% 0;
background-position:60% top;
}


.hero-area h1{
font-size:200%;
}


.hero-area .lead{
width:100%;
background:rgba(255,255,255,0.8);
}


.category-area{
padding:0;
}


.category-area h2{
font-size:180%;
}


.contents-section ul li img{
height:180px;
}




.contents-section .gray_box{
margin:0 15px;
}

.contents-section .gray_box ul{
padding:10px;
}


}





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


.hero-area{
height:400px;
background-position:70% top;
}


.hero-area h1{
font-size:140%;
}

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


.hero-area .parts-cloud{
display:none;
}


.category-area .nav-section .btn_nav{
width:45%;
}



.contents-section ul li img{
height:100%;
}


.contents-section ul.tag-section{
gap:10px;
}

.contents-section ul.tag-section li{
width:auto;
margin:5px auto;
text-align:center;
}


.contents-section ul.document-section li{
width:150px;
}

.contents-section ul.document-section li img{
width:150px;
}

.category-area h2{
margin:0 0 20px;
font-size:160%;
}

.category-area h2 span{
padding:20px;
}


.category-area h2:after{/*workflow text*/
background-size:40% !important;
}


.contents-section ul.document-section li{
margin:20px auto 40px;
}






}



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





}