/*body*/
footer{margin-top:0;}




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

#adspecial_ms_win365_202209{
padding: 0;
}



#adspecial_ms_win365_202209.adspecial_type1{
width:100% !important;
max-width:100% !important;
}

#adspecial_ms_win365_202209.adspecial_type1 .frame_col_left{
margin:0;
}


.block_sponsored{
padding:3%;
text-align:center;
background-color:#a0a0a0;
color:#fff;
}

.block_sponsored a{
color:#fff;
}

.block_sponsored a:hover{
color:#4285F4 !important;
}


/* head -------------------------------------------------------------------------------- */


#adspecial_ms_win365_202209.adspecial_type1 .head-area {
width:100%;
height:600px;
padding:7% 8% 0;
/*background-size:cover;*/
position:relative;
}



#adspecial_ms_win365_202209.adspecial_type1 .head-area:before{
content:"";
position:absolute;
top:0;
right:0;
background:url(/extra/ms_win365_202209/media/hero.jpg) right 0 no-repeat;
width:100%;
height:100%;
z-index:-1;
}


#adspecial_ms_win365_202209.adspecial_type1 .head-area:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:10px;
/*background-color:#4f98fb;*/
background:rgba(79,152,251,0.6);
opacity:0;
animation: line 1s linear 2.5s 1 forwards;
}


#adspecial_ms_win365_202209.adspecial_type1 .head-area h1{
line-height:1.6;
display:flex;
flex-direction:column;
/*align-items:center;*/
text-align:left;
max-width:800px;
color:#071828;
position:relative;
}

#adspecial_ms_win365_202209.adspecial_type1 .head-area .main-title{
font-size:250%;
color:#071828;
opacity:0;
}


#adspecial_ms_win365_202209.adspecial_type1 .head-area .sub-title{
font-size:150%;
font-weight:normal;
color:#4a8ac4;
opacity:0;
}



#adspecial_ms_win365_202209.adspecial_type1 .head-area .flowing{
margin:0;
white-space: nowrap;
overflow: hidden;
animation: flowing-anime 1.0s forwards linear;
}

#adspecial_ms_win365_202209.adspecial_type1 .head-area .flowing:nth-child(2) {
animation-delay: 1s;
animation-duration:2s;
}


@keyframes flowing-anime {
 0%{
     width: 0%;
opacity:0;
   }
50%{
opacity:1;
   }
100%{
     width: 100%;
opacity:1;
   }
}




#adspecial_ms_win365_202209.adspecial_type1 .lead-block {
max-width:700px;
text-align:left;
margin:25px 0;
padding:20px 10px;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
opacity:0;
animation: fade 0.5s 2s forwards linear;
}



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


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



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

h2.ttl-section {
font-size:230%;
font-weight: normal;
text-align:center;
color: #444;
}

.section {
  padding: 48px 0;
}


.contents-area{
position: relative;
background-color:#fff;
color:#424242;
}


.document-tile {
max-width: 1200px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin: 35px auto;
position:relative;
}

.document-tile:before{
content: "";
display: block;
width: 22%;
height: 0;
order: 1;
}

.document-tile:after{
content: "";
display: block;
width: 22%;
height: 0;
}


.document-tile li{
position: relative;
width: 20%;
margin: 0 15px 60px;
background-color:#f8f8f8;
padding:20px;
position:relative;
}


.document-tile li:before{
content:"";
position:absolute;
border-left: solid 1px #4f98fb;
border-top: solid 1px #4f98fb;
top: -1px;
left: -1px;
width:30px;
height:30px;
}

.document-tile li:after{
content:"";
position:absolute;
border-right: solid 1px #4f98fb;
border-bottom: solid 1px #4f98fb;
bottom: -1px;
right: -1px;
width:30px;
height:30px;
}


no
.document-tile li a:hover{
color:#0078d4 !important;
}


.document-tile li .thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 170px;
  margin-bottom: 16px;
  transition: .5s;
}
.document-tile li .thumb img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.document-tile li a:hover .thumb img{
transform:scale(1.05,1.05);
/*background:rgba(79,152,251,0.3);*/
display:block;
box-shadow:0 0 10px #d5d5d5;
transition: .3s;
} 



.document-tile li .caption {
  margin-top: auto;
  display: block;
  font-size: 90%;
  line-height: 1.4;
}



.related-article-area {
position: relative;
background-color:#f8f8f8;
}


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


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

#adspecial_ms_win365_202209.adspecial_type1 .head-area{
padding:5% 3%;
background:rgba(255,255,255,0.4);
}

#adspecial_ms_win365_202209.adspecial_type1 .head-area:before{
opacity:0.5;
background-siz:cover;
}


#adspecial_ms_win365_202209.adspecial_type1 .lead-block {
background:rgba(255,255,255,0.2);
padding:15px;
}


}


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

#adspecial_ms_win365_202209.adspecial_type1 .head-area{
padding:5% 20px;
position:relative;
}



#adspecial_ms_win365_202209.adspecial_type1 .head-area .main-title{
font-size:180%;
}


#adspecial_ms_win365_202209.adspecial_type1 .head-area .sub-title{
font-size:120%;
}

.document-tile{
justify-content:center;
}

.document-tile li {
  width: 40%;
}

}




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


#adspecial_ms_win365_202209.adspecial_type1 .head-area{
height:400px;
padding:30px 15px;
background:rgba(255,255,255,0.7);
position:relative;
}

#adspecial_ms_win365_202209.adspecial_type1 .head-area:before{
background-size:cover;
}



#adspecial_ms_win365_202209.adspecial_type1 .head-area .main-title{
font-size:130%;
}

#adspecial_ms_win365_202209.adspecial_type1 .head-area .sub-title{
font-size:90%;
}


/*#adspecial_ms_win365_202209.adspecial_type1 .head-area .flowing{
white-space: normal;
}*/




#adspecial_ms_win365_202209.adspecial_type1 .lead-block p {font-size: .85rem;}


h2.ttl-section {
font-size:160%;
}


.document-tile li {
width: 40%;
padding:25px 10px;
}



}


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

/*.document-tile li {
width: 100%;
padding:25px 10px;
}*/


}