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



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


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



#adspecial_idaas_202502{
padding: 0;
}


#adspecial_idaas_202502.adspecial_type1{
width:100% !important;
max-width:100% !important;
font-family:'Noto Sans JP', sans-serif !important;
position:relative;
line-height:1.5;
}

#adspecial_idaas_202502.adspecial_type1::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(/extra/idaas_202502/media/img_background.png) center top no-repeat;
background-size:cover;
opacity:0.6;
z-index:-2;
}


#adspecial_idaas_202502.adspecial_type1::after{
content:"";
position:fixed;
top:30%;
left:-8%;
width:100%;
height:100%;
background:url(/extra/idaas_202502/media/parts_cloud_1.png) left top no-repeat;
z-index:-1;
}



footer{
margin-top:0;
}


.block_sponsored {
background-color:#fff;
padding:40px 0;
}


.head-wrap{
margin: 0 auto;
height:500px;
overflow:hidden;
position:relative;
z-index:1;
}


.head-wrap::before{
content:"";
position:absolute;
bottom:30px;
right:3%;
width:100%;
height:100%;
background:url(/extra/idaas_202502/media/parts_cloud_2.png) right bottom no-repeat;
}


.head-wrap .ttl-area {
max-width:1200px;
margin:0 auto;
padding:0 20px;
position: relative;
z-index:100;
}

.head-wrap .ttl-area .ttl-patch{
margin:3% 0 0 0;
padding:15px;
text-align:center;
background:rgba(255,255,255,0.6);
width:80px;
height:80px;
line-height:40px;
border-radius:15px;
border:3px solid #04b2f2;
color:#04b2f2;
font-family:'Noto Sans JP', sans-serif !important;
font-size:1.25rem;
font-weight:bold;
}


.head-wrap .ttl-area h1{
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
margin:0 auto;
padding:0;
height:350px;
color: #183c5a;
font-size:clamp(1.25rem, 0.417rem + 2.08vw, 2.5rem);
font-family:'Noto Sans JP', sans-serif !important;
position:relative;
z-index:100;
}

.head-wrap .ttl-area h1 span{
width:fit-content;
margin-bottom:15px;
padding:5px 15px;
position:relative;
}

.head-wrap .ttl-area h1 span::before{
content:"";
position:absolute;
top:0;
left:0;
background:rgba(255,255,255,1);
width:100%;
height:100%;
z-index:-1;
}

.head-wrap .ttl-area h1 span:nth-child(1)::before{
opacity:0;
animation: fade-left 0.4s ease-out 0.5s forwards;
}

.head-wrap .ttl-area h1 span:nth-child(2)::before{
opacity:0;
animation: fade-left 0.4s ease-out 1s forwards;
}

.head-wrap .ttl-area h1 span:nth-child(3)::before{
opacity:0;
animation: fade-left 0.4s ease-out 1.5s forwards;
}


.head-wrap .ttl-area h1 span strong{
color:#04b2f2;
font-size:110%;
margin-right:10px;
}







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

  100% {
    opacity: 1;}
}



@keyframes line{
  0% {
    width: 0;}

  100% {
    width: 100%;}
}



@keyframes fade-left{
  0% {
opacity: 0;
transform:translateX(-300px);
}

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





/*************** summary ***************/


.lead-area {
width:100%;
margin:0 auto;
padding:20px;
background-color:#04b2f2;
color:#fff;
position:relative;
z-index:100;
}


.lead-area p {
margin:0 auto;
padding:20px 15px;
max-width:1000px;
font-size: 1rem;
line-height:1.8;
}



/*************** contents ***************/


h2 {
position: relative;
margin:0 auto;
padding:30px;
text-align:center;
color: #183c5a;
font-size:clamp(2rem, 1.833rem + 0.42vw, 2.25rem);
line-height:1.4;
width:fit-content;
z-index:1000;
}



h2 span{
font-size:1.25rem;
color:#75d0ff;
border-radius:10px;
text-align:center;
margin:30px auto 10px;
padding:5px 10px 8px;
/*background-color:#fff;*/
border-bottom:5px solid #75d0ff;
font-weight:normal;
width:fit-content;
display:block;
}

h2.sponsor{
color:#fff;
}


.content-area{
margin:0 auto;
padding:10px 10px 60px;
position:relative;
}

.bg-wp{
backdrop-filter: blur(3px);
}
.bg-article{
background:rgba(4, 178, 242, 0.2);
}





/* wp list & aritcle list */

.content-area .article-inner,
.content-area .wp-inner{
display:flex;
flex-wrap:wrap;
justify-content:center;
margin:20px auto;
max-width:1400px;
position:relative;
z-index:100;
}

.content-area ul li{
width:28%;
margin:20px 20px 40px;
border-radius:10px;
text-align:left;
box-sizing:border-box;
}

.content-area ul li a{
padding:30px 20px;
display:block;
}

.content-area ul li:hover,
.content-area ul li a:hover{
transition:0.3s;
}

.content-area ul li a span{
display:block;
color:#183c5a;
font-size:1rem;
}

.content-area ul li a:hover span{
color:#04b2f2;
}


.content-area ul li a img{
max-width:100%;
display:block;
margin:10px auto 25px;
overflow:hidden;
}

.content-area ul li a:hover img{
transform:scale(1.03,1.03);
transition:0.5s;
}




/* wp list */


.content-area .wp-inner li{
background: rgb(140,213,255);
background: linear-gradient(45deg, rgba(140,213,255,1) 0%, rgba(213,241,255,1) 100%);
box-shadow:0 20px 20px -10px #666;
}


.content-area .wp-inner li:hover{
/*background-color:#d5f1ff;*/
background:#fff;
box-shadow:none;
}

.content-area .wp-inner li a span{
font-size:1.25rem;
}


/* aritcle list */


.content-area .article-inner{
justify-content:space-between;
}

.content-area .article-inner li{
width:30%;
margin:25px 15px;
/*box-shadow:0 0 15px #d5d5d5;*/
}

.content-area .article-inner li a{
background-color:#fff;
display:flex;
border:5px solid #75d0ff;
border-radius:10px;
box-sizing:border-box;
box-shadow:0 10px 10px -5px #999;
}

.content-area .article-inner li a:hover{
border:5px solid #fff;
}

.content-area .article-inner li a img{
width:100px;
height:75px;
flex-shrink:0;
margin:0 15px 0 0;
}






.sponsor-area{
padding:25px 0 50px;
background-color:#14293e;
}

.sponsor-area ul{
display:flex;
justify-content:center;
padding:15px 0;
}

.sponsor-area ul li{
width:250px;
margin:0 30px;
padding:0;
background-color:#fff;
border-radius:10px;
}

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




.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s, transform 1s;
}

.fade-in.active {
opacity: 1;
transform: translateY(0px);
}






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


@media (max-width: 960px) {


#adspecial_idaas_202502.adspecial_type1::after{
background-size:70%;
}


.head-wrap::after{
background-size:40%;
}


.head-wrap{
padding:0 20px;
}
/*.head-wrap .ttl-area h1{
height:200px;
}*/


.head-wrap:before{
right:2%;
bottom:20px;
}


.head-wrap .ttl-area .ttl-patch {
    margin: 5% 0 0 0;
    width: 80px;
    height: 80px;
    line-height: 40px;
    font-size: 1rem;
}


.content-area ul li a span{
font-size:1rem;
}


.content-area .wp-inner li{
width:43.5%;
}

.content-area .article-inner li{
width:100%;
}


}




@media (max-width: 640px) {


.head-wrap{
height:400px;
}


.head-wrap .ttl-area .ttl-patch{
top:5%;
}

.head-wrap .ttl-area{
padding:0;
}


.lead-area{
padding:10px;
}

.content-area{
padding:0 20px;
}

.content-area ul li{
display:block;
width:100%;
margin:30px auto;
}

.content-area .article-inner,
.content-area .wp-inner{
display:block;
}

.content-area .wp-inner li{
width:100%;
}

.content-area .article-inner li{
width:fit-content;
margin:25px auto;
}


.sponsor-area ul{
display:block;
}

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



}



/* ヘッダー＆フッター広告表記 2024～
-------------------------------------------------------------------------------------------------------*/

.header_sponsored_area{
    width:100%;
    background-color:#fff;
    color:#444;
    font-size:14px;
    text-align:right;
    padding:15px 20px;
    position:relative;
    z-index:1000;
}

.header_sponsored_area span{
    margin:0;
    line-height:1.3;
    display:block;
}


.block_sponsored_area{
    clear:both;
    background-color:#fff;
    color:#444;
    font-size:14px;
    border:1px solid #444;
    margin:0 auto;
    padding:15px 15px 10px;
    max-width:760px;
    position:relative;
    z-index:1000;
}

.block_sponsored_area span{
    margin:5px 0;
    text-align:left;
    display:block;
}


.block_sponsored_area:before{
    display: block;
    content: "PR";
    position: absolute;
    top: -12px;
    left: 30px;
    width: 40px;
    height: 30px;
    text-align: center;
    background-color: #fff;
}


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

.block_sponsored_area{
margin:25px;
}

}