@charset "UTF-8";

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

/*--- mainTitle --*/
#mainTitle::before{
    background: url("../images/benefits/bg_title.jpg") right bottom / auto 100% no-repeat;
}

/*--- sample --*/
#contents .event{
    background: url("../images/benefits/bg_event.png") center center / contain no-repeat;
    aspect-ratio: 960 / 449;
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
#contents .event li{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 960 / 50;
}
#contents .event li a{
    display: block;
    width: 100%;
    height: 100%;
    transition: .4s;
}
#contents .event li a .linkArrow01{
    margin: 0;
    position: absolute;
    right: 20px;
    top: calc(50% - 0.5em);
    transition: .4s;
    transform-origin: center center;
}
#contents .event li.eventBtn01{
    margin-top: 29.06%;
}
#contents .event li.eventBtn01 a{
    background: url("../images/benefits/btn_01.png") center center / contain no-repeat;
}
#contents .event li.eventBtn02{
    margin-top: 35.3125%;
}
#contents .event li.eventBtn02 a{
    background: url("../images/benefits/btn_02.png") center center / contain no-repeat;
}
#contents .event li.eventBtn03{
    margin-top: 41.56%;
}
#contents .event li.eventBtn03 a{
    background: url("../images/benefits/btn_03.png") center center / contain no-repeat;
}

/*--- beneList --*/

#contents .beneList{
    display: flex;
    justify-content: center;
    margin-left: -60px;
    margin-bottom: -60px;
    flex-wrap: wrap;
    align-items: flex-start;
}
#contents .beneList li{
    width: calc((100% - (60px * 3)) / 3);
    margin-left: 60px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#contents .beneList li .icon{
    max-width: 140px;
}
#contents .beneList li .title{
    font-size: 22px;
    line-height: 1.2;
    margin: 15px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#contents .beneList li .text{
    line-height: 1.75;
}
#contents #discounts .beneList li .title{ color: #e21b13;}
#contents #support .beneList li .title{ color: #e21b13;}
#contents #other .beneList li .title{ color: #f75e5e;}




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



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

@media screen and (min-width:901px) {
    
    #contents .event li a:hover{
        transform: translate(0,5px);
    }
    #contents .event li a:hover .linkArrow01{
        transform: rotate(90deg);
        background: #000;
    }
    
}


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

@media screen and (max-width:1200px) {
    
    #contents .beneList li .icon {
        max-width: 120px;
    }
    
}

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

@media screen and (max-width:900px) {   
    
    #contents .beneList{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 0;
    }
    #contents .beneList li{
        width: 100%;
        max-width: 500px;
        margin-left: 0;
    }
    #contents .beneList li .icon{
        max-width: 100px;
    }
    
}


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

@media screen and (max-width:600px) {
    
    
    #contents .event{
        background: url("../images/benefits/bg_event_sp.png") center center / contain no-repeat;
        aspect-ratio: 458 / 960;
        max-width: 460px;
    }
    #contents .event li{
        width: auto;
        height: 100%;
        aspect-ratio: 50 / 960;
    }
    #contents .event li a .linkArrow01{
        right: auto;
        left: calc(50% - 0.5em);
        bottom: 20px;
        top: auto;
    }
    #contents .event li.eventBtn01{
        margin: 0 0 0 62.88%;
    }
    #contents .event li.eventBtn01 a{
        background: url("../images/benefits/btn_01_sp.png") center center / auto 100% no-repeat;
    }
    #contents .event li.eventBtn02{
        margin: 0 0 0 75.9825%;
    }
    #contents .event li.eventBtn02 a{
        background: url("../images/benefits/btn_02_sp.png") center center / auto 100% no-repeat;
    }
    #contents .event li.eventBtn03{
        margin: 0 0 0 89.08%;
    }
    #contents .event li.eventBtn03 a{
        background: url("../images/benefits/btn_03_sp.png") center center / auto 100% no-repeat;
    }
    
    #contents .beneList {
        margin-bottom: -40px;
    }
    #contents .beneList li {
        margin-bottom: 40px;
    }
    #contents .beneList li .icon{
        max-width: 80px;
    }
    #contents .beneList li .title{
        font-size: 18px;
        margin: 10px auto;
    }
    
    
    
    
}