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




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

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


#adspecial_microsoft_nva_202112{
padding: 0;
}


#adspecial_microsoft_nva_202112.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
background:#fff url(/extra/microsoft_nva_202112/media/img_footer.jpg) center bottom no-repeat;
}

footer{
margin-top:0;
}



#adspecial_microsoft_nva_202112.adspecial_type1 .frame_col_left{
position:relative;
}



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

}

footer{
margin-top:0;
}


.block_sponsored {
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: 15px;
right: 15px;
padding:10px 30px;
border-radius:5px;
color:#333 !important;
font-size:12px;
/*background-color:#01358b;*/
background:rgba(255,255,255,.6);
box-shadow:0 0 15px #ccc;
transition:0.3s ease;
z-index:1000;
}

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





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



.hero-area{
background:url(/extra/microsoft_nva_2022/media/img_hero_2022.jpg) center top no-repeat;
background-size:cover;
padding:0;
height:400px;
color:#fff;
line-height:1.4;
position:relative;
}


.hero-area:before{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/microsoft_nva_2022/media/logo_azure.png) 25px center no-repeat;
width:100%;
height:100%;
z-index:1000;
}




/*.hero-area .label-title{
font-size:200%;
font-family: 'Barlow', serif;
width:40%;
text-align:center;
position:relative;
color:#fff;
z-index:100;
}

.hero-area .label-title:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#14c88f;
border-radius:3px;
z-index:-1;
opacity:0;
animation: slide 0.5s linear 0.3s forwards;
}*/



.hero-area .title-area{
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
height:400px;
position:relative;
z-index:1000;
}


.hero-area h1{
font-size:200%;
text-align:center;
line-height:1.4;
margin:0 0 10px 0;
opacity:0;
animation: fade 0.5s linear 0.5s forwards;
text-shadow:0 0 8px #454545;
}


.hero-area .sub-title{
font-size:80%;
color:#fff;
font-weight:bold;
/*max-width:55%;*/
text-align:center;
opacity:0;
animation: fade 0.5s linear 1.0s forwards;
text-shadow:0 0 8px #151515;
}


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

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

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






/* navigation-------------------------------------------------------------------------------- */



.category-area,
.navigation-area{
max-width:1050px;
margin:0 auto;
}




.navigation-area ul {
margin:50px auto 0;
display:flex;
flex-wrap:wrap;
justify-content: space-around;
}


.navigation-area ul li{
width:25%;
padding:0 0 35px 0;
text-align:center;
position:relative;
}


.navigation-area ul li:after{
content:"";
position:absolute;
bottom:-5px;
left:40%;
display: inline-block;
width: 16px;
height: 16px;
margin: 0 10px;
border-bottom: 4px solid #0e5ecb;
border-right: 4px solid #0e5ecb;
transform: rotate(45deg);
}

.navigation-area ul li:hover:after{
transform: translateY(10px) rotate(45deg);
transition:.3s;
}


.navigation-area ul li a span{
display:block;
}

.navigation-area ul li a span.main-title{
font-size:130%;
font-weight:bold;
color:#444;
margin-bottom:7px;
text-align:center;
}

.navigation-area ul li a span.sub-title{
font-size:100%;
line-height:1.2;
width:70%;
margin:0 auto;
color:#b0b0b0;
font-family: 'Oswald', sans-serif;
letter-spacing:0.05em;
}


.navigation-area ul li a:hover span{
color:#d5d5d5;
transition:.3s;
}




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



.category-area h2{
text-align:center;
font-size:220%;
color:#252525;
line-height:1.2;
margin-bottom:40px;
position:relative;
}


/*.category-area h2:before{
content:"";
position:absolute;
bottom:-25px;
left:0;
background-color:#ccc;
width:100%;
height:1px;
}*/


/*.category-area h2:after{
content:"";
position:absolute;
bottom:-25px;
right:0;
color:#ccc;
letter-spacing:0.05em;
font-size:130%;
width:100%;
height:100%;
}*/


.category-area h2.workflow1:after{
background:url(/extra/microsoft_nva_202112/media/parts_wf01.png) right bottom no-repeat;
}

.category-area h2.workflow2:after{
background:url(/extra/microsoft_nva_202112/media/parts_wf02.png) right bottom no-repeat;
}

.category-area h2.workflow3:after{
background:url(/extra/microsoft_nva_202112/media/parts_wf03.png) right bottom no-repeat;
}

.category-area h2.workflow4:after{
background:url(/extra/microsoft_nva_202112/media/parts_wf04.png) right bottom no-repeat;
}



.category-area h2 span{
font-size:60%;
color:#2f80ee;
font-family: 'Oswald', sans-serif;
letter-spacing:0.05em;
display:block;
}


.contents-section,
.logo-section{
padding:5% 0 0;
}

.logo-section{
padding:8% 0 15%;
}

.contents-section ul,
.logo-section ul{
display:flex;
flex-wrap:wrap;
/*justify-content: space-between;*/
justify-content: space-around;
}

.logo-section ul{
justify-content: center;
}




.contents-section ul li{
width:220px;
margin:30px 0;
padding:0;
line-height:1.3;
position:relative;
}



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


.contents-section ul li img{
width:100%;
height:150px;
object-fit:cover;
text-align:center;
margin-bottom:10px;
border:1px solid #eee;
display:block;
}


.contents-section ul li img.fit-left{
object-position: left top;
}

.contents-section ul li img.fit-right{
object-position: right top;
}


.contents-section ul li img:hover{
filter: grayscale(1);
opacity:0.7;
transition:0.3s;
}


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

.contents-section ul li span.title{
font-size:110%;
color:#444;
margin:0;
}

.contents-section ul li span.caption{
font-size:90%;
/*font-weight:bold;*/
color:#666666;
margin:5px 0 0 0;
}

.contents-section ul li span.date{
font-size:100%;
font-weight:bold;
color:#a0a0a0;
}


.contents-section ul li span.tag{
font-size:80%;
font-weight:bold;
color:#a0a0a0;
margin:5px 0 0 0;
}


.contents-section ul li a:hover span{
transition:0.3s;
/*color:#ccc;*/
color:#2f80ee;
}



.contents-section span.label{
width:120px;
padding:0 10px;
height:18px;
line-height:18px;
color:#fff;
font-size:13px;
text-align:center;
border-radius:5px;
}
.contents-section span.webinar{
background-color:#28abcc;
}
.contents-section span.whitepaper{
background-color:#6839c9;
}
.contents-section span.webcast{
background-color:#0b92d1;
}
.contents-section span.special{
background-color:#65d025;
}
.contents-section span.news{
background-color:#10bdbb;
}
.contents-section span.event{
background-color:#07b50b
}
.contents-section span.solution{
background-color:#b0b0b0;
}




.contents-section .news_block{
/*border:1px solid #cccccc;*/
background-color:#f3f3f3;
margin:40px auto 0;
padding:20px 25px;
position:relative;
z-index:1;
}


.contents-section .news_block ul{
display:block;
width:100%;
}

.contents-section .news_block ul li{
padding:0 0 0 25px;
font-weight:bold;
position:relative;
width:100%;
}

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

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



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

.contents-section .news_block ul li a:hover{
color:#7fb8f2 !important;
}



.contents-section .news_block ul li span.label{
display:inline;
font-size:10px;
font-weight:normal;
background-color: #7fb8f2;
border-radius:3px;
vertical-align:top;
margin-left:15px;
padding:2px 4px;
text-align:center;
color:#fff;
}





.contents-section img.banner:hover{
opacity:0.7;
transition:0.3s;
}


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

.contents-section .gray_box span.live{
background-color: #07b50b;
}



.contents-section .gray_box ul li{
color:#444444;
font-weight:bold;
margin:15px 0;
padding-left:25px;
width:100%;
position:relative;
}


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

.contents-section .gray_box ul li a{
display:inline;
font-feature-settings: "palt";
}

.contents-section .gray_box ul li a.live{
color:#05a30c;
}

.contents-section .gray_box ul li a:hover{
color:#568eda !important;
}

.contents-section .gray_box ul li:hover:before{
transform: translateX(5px) rotate(45deg);
transition:.3s;
}


.contents-section .gray_box span.label{
position:absolute;
top:-20px;
left:-1px;
width:130px;
height:20px;
line-height:20px;
color:#fff;
font-size:13px;
text-align:center;
z-index:100;
}

.contents-section .gray_box span.news{
background-color:#10bdbb;
}

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



.logo-section li{
width:250px;
height:100px;
margin:0 0 45px;
}

.logo_section li img{

}

.logo_section li img:hover{
filter: grayscale(0);
opacity:1;
}


.contents-section ul.logo_section span{
font-size:100%;
color:#666;
display:block;
margin:0 auto;
text-align:center;
}






/* 202209 renew add ************************************************************************ */


.category-area .btn_links{
margin:20px auto 70px;
}
.category-area .btn_links a{
width:300px;
height:auto;
margin:0 auto;
text-align:center;
padding:25px;
border-radius:100px;
background-color:#287dfc;
color:#fff;
display:block;
}

.category-area .btn_links a:hover{
background-color:#85b3f9;
color:#fff !important;
transition:0.5s;
}


.contents-section .keyword_block{
border-top:1px solid #e1eaf4;
border-bottom:1px solid #e1eaf4;
padding:25px;
display:flex;
justify-content:space-between;
}


.contents-section .keyword_block li{
margin:10px 0;
text-align:center;
width:240px;
}

.contents-section .keyword_block li a{
padding:8px 10px;
background-color:#7fb8f2;
color:#fff;
border-radius:10px;
transition:0.5s;
display:block;
}

.contents-section .keyword_block li a:hover{
background-color:#f0f0f0;
color:#7fb8f2 !important;
}







/* slick setting -------------------------------------------------------------------------------- */


/* Slider */
.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
margin:30px 20px;/*202301 add*/
}

.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}




/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    /*top: 50%;*/
top:30%;
    display: block;
    /*width: 20px;
    height: 20px;*/
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
z-index:1000;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    /*font-family: 'slick';
    font-size: 30px;
    line-height: 1;*/

    /*opacity: .75;
    color: white;*/

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
left:-40px;
}


.slick-prev:before
{
/*content: url(/extra/digital_trust_now/media/img_arrow_left_yellow.png);*/
content:"";
position:absolute;
color: #333;
line-height: 1;
width: 40px;
height: 40px;
border: 1px solid #a0a0a0;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateX(25%) rotate(-135deg); 
}



.slick-next
{
right:0;
}



.slick-next:before
{
/*content: url(/extra/digital_trust_now/media/img_arrow_right_yellow.png);*/
content:"";
position:absolute;
color: #333;
line-height: 1;
width: 40px;
height: 40px;
border: 1px solid #a0a0a0;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateX(-25%) rotate(45deg);
}




/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    /*opacity: 1;*/
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 36px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    /*opacity: .25;
    color: black;*/
color:#737373;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
color:#7fbbe9;
}





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

.slick-prev{
left:0;
}

.slick-next{
right:40px;
}

}


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

.slick-dotted.slick-slider{
margin-bottom:10px;
}

.slick-prev{
left:0;
}

.slick-next{
right:40px;
}




}





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


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

.hero-area{
height:350px;
}

.hero-area .title-area{
height:350px;
}


.hero-area:before{
background-size:250px
}




}



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


/*.hero-area{
background:url(/extra/microsoft_nva_2022/media/img_hero_2022.jpg) no-repeat;
background-position:85% top;
}*/


.hero-area:before{
background-size:150px
}


.hero-area:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}


.hero-area .label-title{
font-size:230%;
/*width:50%;*/
}

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

.hero-area .sub-title{
max-width:70%;
}



.hero-area .label-title,
.hero-area .sub-title,
.hero-area h1{
position:relative;
z-index:100;
line-height:1.4;
}




}





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



.hero-area{
background:url(/extra/microsoft_nva_2022/media/img_hero_2022.jpg) no-repeat;
background-position:90% top;
}

.hero-area:before{
background-position:center 10px;
}


.hero-area:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
}


.hero-area .title-area h1{
font-size:150%;
margin:45px auto 10px;
}


.hero-area .label-title{
font-size:200%;
width:50%;
}


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


/*.category-area, 
.navigation-area{
padding:0 15px;
}*/



.navigation-area ul li a span.main-title{
font-size:100%;
}

.navigation-area ul li a span.sub-title{
font-size:50%;
}



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

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

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


.logo-section li{
width:200px;
}



.contents-section .keyword_block{
margin:0 0 40px 0;
}

.contents-section .keyword_block li{
width:200px;
}




.contents-section ul.slide-newcontents li img{
height:200px !important;
}



}








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


.hero-area{
background-size:cover;
padding:15px;
}


.hero-area .label-title{
font-size:180%;
width:100%;
}

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



.navigation-area ul{
margin:25px 0 0 0;
}

.navigation-area ul li{
width:48%;
}


.navigation-area ul li:after{
bottom:15px;
width:12px;
height:12px;
}


/*.contents-section ul{
display:block;
}*/

.contents-section ul li{
width:150px;
margin:10px 0;
}

.contents-section ul li img{
width:150px;
height:100px;
object-fit:cover;
}


.category-area h2{
padding-top:40px;
font-size:160%;
}


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



.contents-section ul.logo_section li{
width:250px;
margin:0 auto 45px;
text-align:center;
}

.contents-section .keyword_block{
padding:10px;
}

.contents-section .keyword_block li{
width:150px;
font-size:14px;
}


.contents-section .slide-newcontents li img{
width:100% !important;
}




}