@charset "UTF-8";

/*----------------------------------------------------
	☆PC
----------------------------------------------------*/

.bgRed02{ background: #ad0000;}

/*--- mv --*/
#mv{
    width: 100%;
    height: 55.55vw;
    max-height: 800px;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
}
#mv .inr{
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1440px;
    justify-content: space-between;
    align-items: center;
}
#mv .title{
    width: 55.55%;
    position: relative;
    z-index: 0;
    height: 100%;
}
#mv .images{
    width: 57.15%;
    height: 100%;
    margin-left: -12.7%;
    z-index: 1;
    position: relative;
    display: flex;
    gap: 12px;
}
#mv .images .group{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#mv .images .group01{
    width: 27%;
}
#mv .images .group02{
    width: 33.2%;
    justify-content: flex-start;
}
#mv .images .group03{
    width: 29.4%;
}
#mv .images .copy01{
    position: absolute;
    width: 17.9%;
    left: 53.2%;
    top: 0;
    margin-top: 10.34%;
}

/*--- keyword ---*/

#contents .keyword{
    position: relative;
    z-index: 1;
    margin-top: 0;
    overflow: hidden;
    background: #e21b13;
}
#contents .keyword .message{
    text-align: center;
    color: #fff;
    max-width: 800px;
    margin: 0 auto 120px;
    width: 85%;
}

#contents .keyword ul{
    position: relative;
    max-width: 1316px;
    width: 85%;
    margin: 0 auto -10px;
    aspect-ratio: 1316 / 1648;
}
#contents .keyword ul li{
    width: calc((100% - 30px) / 4);
    overflow: hidden;
    box-shadow: inset 15px 15px 25px rgb(119 0 37 / 50%);
    transition: .4s;
    position: absolute;
    aspect-ratio: 1 / 1;
}
#contents .keyword ul li.wide{
    width: calc(((100% - 30px) / 4) * 2 + 10px);
    aspect-ratio: 652 / 320;
}
#contents .keyword ul li.tall{
    aspect-ratio: 320 / 652;
}

#contents .keyword ul li.li01{ left: 0; top: 0;}
#contents .keyword ul li.li02{ left: calc(((100% - 30px) / 4) * 2 + 10px + 10px); top: 0;}
#contents .keyword ul li.li03{ right: 0; top: 0;}

#contents .keyword ul li.li04{ left: 0; top: calc(((100% - 40px) / 5) * 1 + 10px);}
#contents .keyword ul li.li05{ left: calc(((100% - 30px) / 4) * 1 + 10px); top: calc(((100% - 40px) / 5) * 1 + 10px);}
#contents .keyword ul li.li06{ left: calc(((100% - 30px) / 4) * 3 + 30px); top: calc(((100% - 40px) / 5) * 1 + 10px);}

#contents .keyword ul li.li07{ left: calc(((100% - 30px) / 4) * 1 + 10px); top: calc(((100% - 40px) / 5) * 2 + 20px);}
#contents .keyword ul li.li08{ left: calc(((100% - 30px) / 4) * 2 + 20px); top: calc(((100% - 40px) / 5) * 2 + 20px);}
#contents .keyword ul li.li09{ left: calc(((100% - 30px) / 4) * 3 + 30px); top: calc(((100% - 40px) / 5) * 2 + 20px);}

#contents .keyword ul li.li10{ left: 0; top: calc(((100% - 40px) / 5) * 3 + 30px);}
#contents .keyword ul li.li11{ left: calc(((100% - 30px) / 4) * 2 + 20px); top: calc(((100% - 40px) / 5) * 3 + 30px);}

#contents .keyword ul li.li12{ left: 0; top: calc(((100% - 40px) / 5) * 4 + 40px);}
#contents .keyword ul li.li13{ left: calc(((100% - 30px) / 4) * 1 + 10px); top: calc(((100% - 40px) / 5) * 4 + 40px);}
#contents .keyword ul li.li14{ left: calc(((100% - 30px) / 4) * 2 + 20px); top: calc(((100% - 40px) / 5) * 4 + 40px);}
#contents .keyword ul li.li15{ left: calc(((100% - 30px) / 4) * 3 + 30px); top: calc(((100% - 40px) / 5) * 4 + 40px);}

#contents .keyword ul li a{
    display: block;
    position: relative;
    z-index: 2;
}
#contents .keyword ul li a .linkArrow01{
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 22px;
    height: 22px;
}

#contents .keyword ul li .image{
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(1.1);
    z-index: 0;
    transition: .4s;
}
#contents .keyword ul li .text{
    display: block;
    position: relative;
    z-index: 1;
    transition: .4s;
}



/*--- sample --*/

/*--- sample --*/




/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/

#mv .slidein{
    animation: slidein 1.5s ease forwards;
}

/*----------------------------------------------------
	☆901以上　PCのみ & HOVER
----------------------------------------------------*/

@media screen and (min-width:901px) {
    
     #contents .keyword ul li:hover .image{
        transform: translate(-50%,-50%) scale(1.02);
    }
    #contents .keyword ul li:hover .text{
        transform: scale(0.95);
    }
    
    .linkArrow01{
        transition: .4s;
    }
    a:hover .linkArrow01{
        background: #ffda00;
    }
    a:hover .linkArrow01::before{
        border-color: #000;
    }
}


/*----------------------------------------------------
	☆TOP UNDER 1200
----------------------------------------------------*/

@media screen and (max-width:1200px) {
    
    #mv {
        min-height: 55.55vw;
        height: auto;
        max-height: none;
        padding-top: 40px;
    }
    
}

/*----------------------------------------------------
	☆TOP UNDER 900
----------------------------------------------------*/

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


/*----------------------------------------------------
	☆TOP UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    /*--- mv --*/
    #mv{
        width: 100%;
        height: 181.25vw;
        max-height: none;
        flex-direction: column;
        padding: 0;
    }
    #mv .inr{
        max-height: none;
        flex-direction: column;
    }
    #mv .title{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        height: 100%;
    }
    #mv .images{
        width: 86.25%;
        margin: 87.25% auto 0;
        gap: 6px;
    }
    #mv .images .group{
        gap: 6px;        
    }
    #mv .images .group01{width: 30%;}
    #mv .images .group02{width: 36%}
    #mv .images .group03{width: 34%;}
    
    #mv .images .copy01 {
        width: 26%;
        left: 55%;
        top: 0;
        margin-top: 21%;
    }

    
    /*--- keyword --*/
    #contents .keyword .message{
        text-align: justify;
        margin-bottom: 40px;
    }
    #contents .keyword .message br{
        display: none;
    }
    
    #contents .keyword ul{
        aspect-ratio: 325 / 1645;
    }
    
    #contents .keyword ul li{
        width: calc((100% - 5px) / 2);
        box-shadow: inset 10px 10px 20px rgb(119 0 37 / 50%);
    }
    #contents .keyword ul li.wide{
        width: calc(((100% - 5px) / 2) * 2 + 5px);
    }
    
    #contents .keyword ul li.li01{ left: 0; top: 0;}
    #contents .keyword ul li.li02{ left: 0; top: calc(((100% - 45px) / 10) * 1 + 5px);}
    #contents .keyword ul li.li03{ right: 0; top: calc(((100% - 45px) / 10) * 1 + 5px);}

    #contents .keyword ul li.li04{ left: auto; right: 0; top: calc(((100% - 45px) / 10) * 2 + 10px);}
    #contents .keyword ul li.li05{ left: 0; top: calc(((100% - 45px) / 10) * 3 + 15px);}
    #contents .keyword ul li.li06{ left: 0; top: calc(((100% - 45px) / 10) * 4 + 20px);}

    #contents .keyword ul li.li07{ left: auto; right: 0; top: calc(((100% - 45px) / 10) * 4 + 20px);}
    #contents .keyword ul li.li08{ left: 0; top: calc(((100% - 45px) / 10) * 5 + 25px);}
    #contents .keyword ul li.li09{ left: auto; right: 0; top: calc(((100% - 45px) / 10) * 5 + 25px);}

    #contents .keyword ul li.li11{ left: 0; top: calc(((100% - 45px) / 10) * 6 + 30px);}
    #contents .keyword ul li.li10{ left: 0; top: calc(((100% - 45px) / 10) * 7 + 35px);}

    #contents .keyword ul li.li12{ left: 0; top: calc(((100% - 45px) / 10) * 8 + 40px);}
    #contents .keyword ul li.li13{ left: auto; right: 0; top: calc(((100% - 45px) / 10) * 8 + 40px);}
    #contents .keyword ul li.li14{ left: 0; top: calc(((100% - 45px) / 10) * 9 + 45px);}
    #contents .keyword ul li.li15{ left: auto; right: 0; top: calc(((100% - 45px) / 10) * 9 + 45px);}
    
    #contents .keyword ul li a .linkArrow01 {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 16px;
        height: 16px;
    }
    
}