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



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


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



#adspecial_ppap_202501{
padding: 0;
}


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





footer{
margin-top:0;
}


.block_sponsored {
background-color:#fff;
}



.head-wrap{
margin: 0 auto;
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_202501/media/img_mainvisual.png) right bottom no-repeat;
width:100%;
height:100%;
animation: fade-bottom 0.5s linear 0s forwards;
}

.head-wrap:after{
content:"";
position:absolute;
top:0;
right:0;
background:url(/extra/ppap_202501/media/img_background.png) center bottom no-repeat;
background-size:contain;
width:100%;
height:100%;
z-index:-1;
}

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

.head-wrap .ttl-area .ttl-label{
position:absolute;
top:15%;
left:30px;
padding:5px 20px;
background-color: #ff5722;
color:#fff;
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: #051929;
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:nth-child(1){
opacity:0;
animation: fade 0.3s linear 0.5s forwards;
}


.head-wrap .ttl-area h1 span:nth-child(2){
opacity:0;
animation: fade 0.3s linear 0.8s forwards;
}

.head-wrap .ttl-area h1 span:nth-child(3){
opacity:0;
animation: fade 0.3s linear 1.1s forwards;
}


.head-wrap .ttl-area h1 span strong{
color:#da4208;
font-size:130%;
opacity:0;
animation: fade 0.3s linear 1.5s forwards;
}


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

.head-wrap .ttl-area h1 span:nth-child(1)::before{
animation: line 0.5s linear 1.0s forwards;
}

.head-wrap .ttl-area h1 span:nth-child(2)::before{
animation: line 0.5s linear 1.5s forwards;
}

.head-wrap .ttl-area h1 span:nth-child(3)::before{
animation: line 0.5s linear 2.0s 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:20px;
/*background-color:#1f3140;*/
background-color:#e8f1f5;
position:relative;
z-index:100;
}


.lead-area p {
margin:0 auto;
padding:30px 15px;
max-width:1100px;
font-size: 1rem;
line-height:1.8;
color:#1f3140;
}



/*** contents ***/


h2 {
position: relative;
margin:0 auto;
padding:30px;
text-align:center;
color: #fff;
font-size: 2.25rem;
line-height:1.4;
width:fit-content;
z-index:1000;
}

h2:before{
content:"";
position:absolute;
top:-30px;
left:calc(50% - 20px);
width:40px;
height:40px;
background-color:#051929;
}

h2.whitepaper,
h2.sponsor{
color:#051929;
}
h2.sponsor::before{
display:none;
}


h2 span{
font-size:0.9rem;
/*background:rgba(255,255,255,0.95);*/
background-color:#fff4d3;
color:#051929;
border-radius:30px;
text-align:center;
margin:10px auto;
padding:2px 15px 4px;
font-weight:normal;
width:fit-content;
display:block;
}

h2.sponsor span{
background:#1f3140;
color:#fff;
}


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


.bg-blue{
background-color:#e4f1f6;
}
.bg-dark-blue{
/*background-color:#2b4050;*/
/*background-color:#43596b;*/
background-color:#243f55;
background: linear-gradient(180deg, rgba(36,63,85,1) 0%, rgba(5,25,41,1) 100%);
}
.bg-green{
background-color:#21b2a0;
}

.bg-yellow{
background-color:#f9c31d;
}


.bg-yellow::before{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/ppap_202501/media/parts_background.png) center bottom no-repeat;
background-size:contain;
width:100%;
height:100%;
}

.bg-dark-blue::before{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/ppap_202501/media/img_background.png) center bottom no-repeat;
width:100%;
height:100%;
opacity:0.1;
z-index-1;
}

.bg-dark-blue::after{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/ppap_202501/media/parts_background.png) center bottom no-repeat;
background-size:contain;
width:100%;
height:100%;
opacity:0.1;
z-index-1;
}




.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;
background-color:#fff;
box-sizing:border-box;
}

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

.content-area ul li:nth-of-type(2n+1){
transition-delay: 0.2s;
}
.content-area ul li:nth-of-type(2n+2){
transition-delay: 0.4s;
}

.content-area ul li:nth-of-type(3n+1){
transition-delay: 0.2s;
}
.content-area ul li:nth-of-type(3n+2){
transition-delay: 0.4s;
}
.content-area ul li:nth-of-type(3n+3){
transition-delay: 0.6s;
}

.content-area ul li:nth-of-type(4n+1){
transition-delay: 0.2s;
}
.content-area ul li:nth-of-type(4n+2){
transition-delay: 0.4s;
}
.content-area ul li:nth-of-type(4n+3){
transition-delay: 0.6s;
}
.content-area ul li:nth-of-type(4n+4){
transition-delay: 0.8s;
}


.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:#051929;
}

/*.content-area ul li a:hover span{
color:#ff5722;
}*/

.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;
}

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

.content-area .wp-inner li:hover{
background-color:#051929;
box-shadow:0 20px 20px -10px #444;
}

.content-area .wp-inner a:hover span{
color:#fff;
}

.content-area ul.article-inner li:hover{
/*background-color:#fefcec;*/
background-color:#f9c31d;
}


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

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



.sponsor-area{
padding:25px 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: 960px) {



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

.head-wrap:before{
background-size:contain;
}


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



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


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


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


}




@media (max-width: 640px) {




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

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


.head-wrap .ttl-area h1 span{
background:rgba(255,255,255,0.75);
}


.head-wrap .ttl-area h1 span::before{
display:none;
}



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


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

.content-area .wp-inner li,
.content-area .article-inner li{
width:fit-content;
}


.sponsor-area ul{
display:block;
}

.sponsor-area ul li{
margin:0 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:25px 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;
}

}