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



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


body{
width: 100%;
position:relative;
font-family:'Noto Sans JP', sans-serif !important;
}



#adspecial_ppap_202312{
padding: 0;
}


#adspecial_ppap_202312.adspecial_type1{
width:100% !important;
max-width:100% !important;
position:relative;
line-height:1.5;
}

#adspecial_ppap_202312.adspecial_type1:before{
content:"";
position:fixed;
background:url(/extra/ppap_202312/media/img_base_background.png) top center no-repeat;
background-size:cover;
width:100%;
height:100%;
z-index:-1;
}



footer{
margin-top:0;
}


.block_sponsored {
background-color:#0a2337;
margin:0;
padding: 30px 20px;
text-align: center;
color:#fff;
}

.block_sponsored a{
color:#018ed7;
}



.container-fluid {
max-width: 1050px;
margin:0 auto;
padding:40px 0;
background-color: transparent;
}


.head-wrap{
margin: 0 auto;
background:rgba(255,255,255,0.4);
box-shadow:0 0 20px #909090;
height:500px;
overflow:hidden;
position:relative;
z-index:-1;
}

.head-wrap:before{
content:"";
position:absolute;
top:0;
right:0;
background:url(/extra/ppap_202312/media/img_mainvisual.png) right top no-repeat;
background-size:cover;
width:100%;
height:100%;
animation: fade-bottom 0.5s linear 0s forwards;
}



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

.head-wrap .ttl-area .ttl-label{
position:absolute;
top:25%;
left:30px;
padding:5px 20px;
background-color:#fff;
border:1px solid #0a2337;
color:#0a2337;
font-size:20px;
width:fit-content;
}


.head-wrap .ttl-area h1{
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
margin:0 auto;
padding:0;
height:500px;
color: #0a2337;
font-size:clamp(1.25rem, 1.063rem + 0.94vw, 2rem);
position:relative;
z-index:1000;
}

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

.head-wrap .ttl-area h1 span.ttl-01{
opacity:0;
animation: fade 0.5s linear 0.4s forwards;
}

.head-wrap .ttl-area h1 span.ttl-02{
opacity:0;
animation: fade 0.5s linear 0.8s forwards;
}

.head-wrap .ttl-area h1 span strong{
color:#0d5bab;
}


.head-wrap .ttl-area h1 span:before{
content:"";
position:absolute;
bottom:0;
left:0;
width:0;
height:1px;
background-color:#0d5bab;
}


.head-wrap .ttl-area h1 span.ttl-01:before{
animation: line 0.5s linear 1.0s forwards;
}

.head-wrap .ttl-area h1 span.ttl-02:before{
animation: line 0.5s linear 1.5s forwards;
}



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

  100% {
    opacity: 1;}
}



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

  100% {
    width: 100%;}
}



@keyframes fade-bottom{
  0% {
    opacity: 0.4;
transform:translateY(100px);
}

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





/*** summary ***/


.lead-area {
width:100%;
margin:0 auto;
padding:50px 20px;
max-width:900px;
position:relative;
z-index:100;
}


.lead-area p {
font-size: 1rem;
line-height:1.8;
color:#454545;
padding: 10px 15px;
}



/*** contents ***/


h2 {
position: relative;
margin:0 auto;
padding:30px;
text-align:center;
border:1px solid #0d5bab;
/*background:rgba(255,255,255,0.15);*/
color: #0d5bab;
font-weight: normal;
font-size: 1.5rem;
line-height:1.4;
width:fit-content;
font-feature-settings: "palt" 1;
z-index:1000;
}


h2 span{
font-size:1rem;
color:#666;
display:block;
}


.background-blue{
/*background-color:#e6f0f4;*/
background:rgba(199,223,233,0.65);
padding:30px 0 20px 0;
}

.content-area{
margin:20px auto;
padding:25px 10px;
position:relative;
}



.content-area .article-inner,
.content-area .wp-inner{
display:flex;
flex-wrap:wrap;
justify-content:center;
margin:45px auto;
max-width:1200px;
position:relative;
}


.content-area ul li{
width:30%;
margin:20px;
padding:20px;
border-radius:5px;
text-align:left;
background-color:#fff;
border:4px solid #fff;
box-sizing:border-box;
box-shadow:0 5px 25px #666;
}


.content-area ul li:hover{
border:4px solid #0a2337;
box-shadow:0 5px 25px #333;
transition:0.5s;
}



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

.content-area ul li a:hover span{
color:#0d5bab;
display:block;
}


.content-area ul li a img{
max-width:100%;
display:block;
margin:0 auto 10px;
border:1px solid #e5e5e5;
overflow:hidden;
}

.content-area ul li a img:hover{
transform:scale(1.02,1.02);
}

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


.content-area ul.article-inner li{
background-color:#e6f0f4;
}


.content-area .parts-left{
position:absolute;
bottom:40px;
left:10px;
}


.content-area .parts-right{
position:absolute;
top:40px;
right:10px;
}



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

.fade-in.active {
opacity: 0.5;
transform: translateX(0px);
}



.sponsor-area{
padding:45px 0;
background-color:#fff;
}

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

.sponsor-area ul li{
width:250px;
margin:0 30px;
}







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



@media (max-width: 1300px) {

.head-wrap .ttl-area h1 span{
background:rgba(255,255,255,0.75);
width:fit-content;
padding:10px;
}

}


@media (max-width: 960px) {



.head-wrap,
.head-wrap .ttl-area h1{
height:300px;
}


.head-wrap .ttl-area .ttl-label{
top:15%;
font-size:16px;
}




h2{
font-size:1.25rem;
}


.content-area{
padding:25px;
}

.content-area ul li{
padding:10px;
width:45%;
}


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


.content-area .parts-left,
.content-area .parts-right{
display:none;
}






}




@media (max-width: 640px) {




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

.head-wrap .ttl-area{
padding:15px;
}




.lead-area p{
font-size:14px;
}


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


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



.sponsor-area ul{
display:block;
}

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



}