@charset "UTF-8";

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

/*--- mv --*/
#mv .mainList{
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
#mv .mainList li{
    width: calc(16.6% - 2px);
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
}
#mv .mainList li.image{ 
    padding-top: 16.6%; 
    background-position: center center;
    background-size: cover;
}
#mv .mainList li.orange{
    background: #e9651f;
    padding-top: min(350px,23%);
}
#mv .mainList li.lion{
    padding-top: min(350px,23%);
}
#mv .mainList li.kirin{
    background: url("../images/onepage/bg_kirin.jpg") center center / 324px repeat;
}

#mv .mainList .titleBox{
    width: calc((16.6% * 4 - 6px ) - 2px);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#mv .mainList .titleBox .title{
    width: 85%;
    max-width: 624px;
    margin: 0 auto 20px;
}
#mv .mainList .titleBox .lead{
    text-align: center;
    font-weight: bold;
}
#mv .mainList .titleBox .deco01{
    width: 168px;
    top: -60px;
    right: calc(50% - 510px);
}
#mv .mainList .titleBox .deco02{
    width: 188px;
    left: calc(50% - 510px);
    bottom: -20px;
}
#mv .mainList .titleBox .deco03{
    width: 318px;
    left: 0;
    transform: translate(-50%,0);
}

/*--- intro --*/
#contents .intro .title{
    text-align: center;
    line-height: 1.4;
    font-size: 32px;
    margin-bottom: 50px;
}
#contents .intro ul{
    display: flex;
    justify-content: space-between;
    width: 85%;
    max-width: 1260px;
    margin: 0 auto;
}
#contents .intro ul li{
    width: 23%;
}

/*--- common --*/
#contents .section{
    position: relative;
}
#contents .section .inrWhiteBox{
    max-width: 1200px;
    padding: 100px; 
}
#contents .sectionTitle {
    width: 850px;
    position: absolute;
    top: -224px;
    right: 47%;
    pointer-events: none;
    z-index: 2;
}

/*--- work --*/
#contents .charms{
    max-width: 900px;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#contents .charms:nth-child(2){
    flex-direction: row-reverse;
}
#contents .charms:last-child{
    margin-bottom: 0;
}
#contents .charms .image{
    width: 50%;
    flex-shrink: 0;
    position: relative;
}
#contents .charms .info{
    width: 47%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

#contents .charms .info.sp{
     display: none;
}

#contents .charms .info .num{
    max-width: 120px;
    margin: 0 auto;
}

#contents .charms .info .num{
        opacity: 0;
    transform: rotateY(0deg) translate(0, 75%);
}
#contents .charms.in .info .num{
    animation: coin_rotation 1s ease forwards;
}

@keyframes coin_rotation {
  0% {
    transform: rotateY(0deg) translate(0,75%);
      opacity: 0;
  }
  100% {
    transform: rotateY(360deg) translate(0,0);
      opacity: 1;
  }
}

#contents .charms .info .title{
    font-size: 36px;
    line-height: 2;
    text-align: center;
    margin: 30px auto 10px;
}
#contents .charms .info .title .inner{
    display: table;
    padding-bottom: 15px;
    margin: 0 auto 15px;
    position: relative;
    line-height: 1;
}
#contents .charms .info .title .inner::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    border-radius: 5px;
}

#contents .charms .info .text{
    font-weight: bold;
    line-height: 1.75;
    margin-bottom: 20px;
}

#contents .work .charms .deco01{
    width: 254px;
    left: -100px;
    bottom: -20px;
}
#contents .work .charms .deco02{
    width: 164px;
    right: -100px;
    top: 0;
}

#contents .title.orange{ color: #e9651f;}
#contents .title.orange .inner::after{ background: #e9651f;}
#contents .title.green{ color: #07a587;}
#contents .title.green .inner::after{ background: #07a587;}
#contents .title.purple{ color: #8f5ae1;}
#contents .title.purple .inner::after{ background: #8f5ae1;}
#contents .title.pink{ color: #ff6695;}
#contents .title.pink .inner::after{ background: #ff6695;}

#contents .charms .info .btns{
    display: flex;
    gap:20px;
    justify-content: center;
}


/*--- environment --*/
#contents .environment .charms .deco01{
    width: 218px;
    left: -115px;
    bottom: -115px;
}
#contents .environment .charms .deco02{
    width: 171px;
    right: -120px;
    bottom: -70px;
}
#contents .environment .charms .deco03{
    width: 160px;
    left: -70px;
    bottom: -70px;
}



/*--- ranking --*/
#contents .ranking{
    position: relative;
}
#contents .sectionTitle02{
    width: 360px;
    left: -160px;
    position: absolute;
}
#contents .envTitleBox{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 20px;
    z-index: 1;
}

#contents .ranking{
    margin-bottom: 80px;
}

#contents .ranking .envTitleBox{
    max-width: 444px;
}
#contents .ranking .envTitleBox .balloon{
    width: 33%;
    top: 0;
    left: 3%;
    position: absolute;
    margin-top: 7%;
}

#contents .ranking .rankingList{
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;
}
#contents .ranking .rankingList::before{
    content: "";
    display: block;
    width: 850px;
    height: 662px;
    background: url("../images/onepage/bg_rank_01.png") center bottom / contain no-repeat;
    position: absolute;
    left: 50%;
    top: -240px;
    transform: translate(-50%,0);
    z-index: 0;
}
#contents .ranking .rankingList li{
    width: 28%;
}
#contents .ranking .rankingList li:nth-child(1){
    order: 2;
}
#contents .ranking .rankingList li:nth-child(1) .image{
    width: 128%;
    margin-left: 50%;
    transform: translate(-50%,0);
    position: relative;
}
#contents .ranking .rankingList li:nth-child(1) .image .deco01{
    width: 37%;
    left: -9%;
    bottom: 0;
}
#contents .ranking .rankingList li .image{
    margin-bottom: 20px;
}
#contents .ranking .rankingList li:nth-child(2){
    order: 1;
}
#contents .ranking .rankingList li:nth-child(3){
    order: 3;
}
#contents .ranking .rankingList li:nth-child(2),
#contents .ranking .rankingList li:nth-child(3){
    margin-top: 98px;
}
#contents .ranking .rankingList li .text{
    line-height: 1.8;
}

/*--- woman --*/
#contents .woman{
    position: relative;
    background: url("../images/onepage/bg_woman_01.png") center center / 800px no-repeat;
}

#contents .woman .envTitleBox{
    max-width: 544px;
}
#contents .woman .envTitleBox .balloon{
    width: 70%;
    margin-bottom: 5px;
}
#contents .woman .voiceList{
    display: flex;
    justify-content: space-between;
    background: url("../images/onepage/bg_woman_02.png") center bottom / 100% no-repeat;
    padding-bottom: 32.5%;
}
#contents .woman .voiceList li{
    width: 28%;
    margin: 0 -1.5%;
}
#contents .woman .voiceList li:nth-child(2n){
    margin-top: 50px;
}

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

#mv .mainList li{
    opacity: 0;
}
#mv .mainList li{
    animation: fadein 1s ease forwards;
}
#mv .mainList li:nth-child(2){ animation-delay: 0.1s !important;}
#mv .mainList li:nth-child(3){ animation-delay: 0.2s !important;}
#mv .mainList li:nth-child(4){ animation-delay: 0.3s !important;}
#mv .mainList li:nth-child(5){ animation-delay: 0.4s !important;}
#mv .mainList li:nth-child(6){ animation-delay: 0.5s !important;}
#mv .mainList li:nth-child(9){ animation-delay: 0.6s !important;}
#mv .mainList li:nth-child(15){ animation-delay: 0.7s !important;}
#mv .mainList li:nth-child(14){ animation-delay: 0.8s !important;}
#mv .mainList li:nth-child(13){ animation-delay: 0.9s !important;}
#mv .mainList li:nth-child(12){ animation-delay: 1s !important;}
#mv .mainList li:nth-child(11){ animation-delay: 1.1s !important;}
#mv .mainList li:nth-child(10){ animation-delay: 1.2s !important;}
#mv .mainList li:nth-child(7){ animation-delay: 1.3s !important;}
#mv .mainList li:nth-child(8){ animation-delay: 1.4s !important;}

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

@media screen and (min-width:901px) {
}


/*----------------------------------------------------
	☆UNDER 1400
----------------------------------------------------*/

@media screen and (max-width:1400px) {
    
    #contents .sectionTitle {
        width: 720px;
        left: -70px;
    }
    
}
    
/*----------------------------------------------------
	☆UNDER 1300
----------------------------------------------------*/

@media screen and (max-width:1300px) {
    
    /*--- mv --*/
    #mv .mainList .titleBox .deco01 {
        width: 20%;
        top: -60px;
        right: -8%;
    }
    #mv .mainList .titleBox .deco02 {
        width: 23%;
        left: -13%;
        bottom: -20px;
    }
    #mv .mainList .titleBox .deco03 {
        width: 30%;        
        top: -60px;
    }
    #mv .mainList .titleBox .title {
        width: 70%;
    }
    #mv .mainList .titleBox .lead {
        font-size: clamp(12px,1.3vw,16px);
    }
    
    #contents .charms .info .btns{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    
}


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

@media screen and (max-width:1200px) {
    
    
    /*--- work --*/
    #contents .charms .info .num {
        max-width: 100px;
    }
    #contents .charms .info .title {
        font-size: 2.9vw;
    }
    #contents .work .charms .deco01 {
        width: 56%;
        left: -14%;
        bottom: 0;
    }
    #contents .work .charms .deco02 {
        width: 40%;
        right: auto;
        top: auto;
        left: -15%;
        bottom: -10%;
    }
    
    
    #contents .environment .charms .deco01 {
        width: 61%;
        left: -20%;
        bottom: -52%;
    }
    #contents .environment .charms .deco02 {
        width: 50%;
        right: -39%;
        bottom: -29%;
    }
    #contents .environment .charms .deco03 {
        width: 49%;
        left: -29%;
        bottom: -26%;
    }
    
    
    #contents .sectionTitle02 {
        width: 260px;
        left: -160px;
        position: absolute;
        top: -40px;
    }
    #contents .ranking .envTitleBox {
        max-width: 380px;
    }
    
    #contents .woman .envTitleBox{
        width: 80%;
    }
    #contents .woman .voiceList li {
        width: 27%;
        margin: 0 -3.5%;
    }
    
}

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

@media screen and (max-width:900px) { 
    
    #contents .section .inrWhiteBox {
        padding: 60px;
    }
    #contents .sectionTitle {
        width: 500px;
        left: -40px;
        top: -160px;
    }
    
    /*--- mv --*/
    #mv .mainList li.orange,
    #mv .mainList li.lion {
        padding-top: 30%;
    }
    #mv .mainList .titleBox .deco03 {
        left: -3%;
    }
    #mv .mainList .titleBox .deco01{
        top: -10%;
    }
    #mv .mainList .titleBox .deco02 {
        left: -16%;
    }
    
    /*--- work --*/
    #contents .charms{
        flex-direction: column !important;
    }
    #contents .charms .info{
        width: 100%;
    }
    #contents .charms .info.sp{
         display: flex;
    }
    
    #contents .charms .info .num {
        max-width: 80px;
    }
    #contents .charms .info .title {
        font-size: 26px;
        display: table;
        width: fit-object;
        position: relative;
        padding-bottom: 15px;
        margin-top: 10px;
    }
    #contents .charms .info .title .inner::after {
        border-radius: 0;
        height: 3px;
    }
    #contents .charms .info .title .inner{
        display: inline;
    }
    #contents .charms .info .text{
        max-width: 360px;
    }
    #contents .charms .image {
        width: 70%;
        margin-bottom: 30px;
    }
    
    #contents .work .charms .deco02 {
        width: 37%;
        left: -18%;
        bottom: 0;
    }
    #contents .environment .charms .deco01 {
        width: 50%;
        left: -30%;
        bottom: -9%;
    }
    #contents .charms .info .btns{
        flex-direction: row;
    }
    #contents .environment .charms .deco02 {
        width: 39%;
        right: -28%;
        bottom: -6%;
    }
    #contents .environment .charms .deco03 {
        width: 39%;
        left: -24%;
        bottom: -11%;
    }
    
    #contents .sectionTitle02 {
        width: 240px;
        left: -90px;
        position: absolute;
        top: -60px;
    }
    #contents .ranking .envTitleBox {
        max-width: 380px;
        width: 65%;
    }
    
    #contents .ranking .rankingList{
        flex-direction: column;
    } 
    #contents .ranking .rankingList::before {
        width: 100%;
        height: auto;
        background: url(../images/onepage/bg_rank_01.png) center bottom / contain no-repeat;
        top: -28vw;
        transform: translate(-50%, 0);
        aspect-ratio: 800 / 660;
    }
    #contents .ranking .rankingList li{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        align-items: center;
        margin-top: 0 !important;
    }
    #contents .ranking .rankingList li:nth-child(1){
        order: 1;
    }
    #contents .ranking .rankingList li:nth-child(2){
        order: 2;
    }
    #contents .ranking .rankingList li .image {
        width: 40%;
        margin-bottom: 0;
    }
    #contents .ranking .rankingList li:nth-child(1) .image {
        width: 42%;
        margin-left: 0;
        transform: translate(0, 0);
        position: relative;
    }
    #contents .ranking .rankingList li .text{
        width: 55%;
    }
    
}


/*----------------------------------------------------
	☆UNDER 750
----------------------------------------------------*/

@media screen and (max-width:750px) {
    
    /*--- mv ---*/
    #mv .mainList{
        position: relative;
    }
    #mv .mainList li{
        width: 25%;
    }
    #mv .mainList li.image,
    #mv .mainList li.lion,
    #mv .mainList li.orange{
        padding-top: 25%;
    }
    #mv .mainList li.titleBox{
        position: absolute;
        left: 25%;
        width: 50%;
        height: calc(75vw + 4px);
        top: calc(25vw + 2px);
        background: #fff;
    }
    #mv .mainList li:nth-child(5),
    #mv .mainList li:nth-child(7),
    #mv .mainList li:nth-child(10){
        margin-right: 50%;
    }
    #mv .mainList .titleBox .lead{
        padding: 0 30px;
        font-size: clamp(9px, 2.2vw, 16px);
    }
    #mv .mainList .titleBox .title {
        width: 80%;
        margin-bottom: 8%;
    }
    #mv .mainList .titleBox .deco01 {
        top: -6.4%;
        width: 40%;
        right: -13.4%;
    }
    #mv .mainList .titleBox .deco02 {
        left: -8%;
        width: 40%;
    }
    #mv .mainList .titleBox .deco03 {
        left: -7%;
        width: 47%;
        top: 29%;
    }
    
    
    #mv .mainList li:nth-child(2){ animation-delay: 0.1s !important;}
    #mv .mainList li:nth-child(3){ animation-delay: 0.2s !important;}
    #mv .mainList li:nth-child(4){ animation-delay: 0.3s !important;}
    #mv .mainList li:nth-child(6){ animation-delay: 0.4s !important;}
    #mv .mainList li:nth-child(9){ animation-delay: 0.5s !important;}
    #mv .mainList li:nth-child(11){ animation-delay: 0.6s !important;}
    #mv .mainList li:nth-child(15){ animation-delay: 0.7s !important;}
    #mv .mainList li:nth-child(14){ animation-delay: 0.8s !important;}
    #mv .mainList li:nth-child(13){ animation-delay: 0.9s !important;}
    #mv .mainList li:nth-child(12){ animation-delay: 1.0s !important;}
    #mv .mainList li:nth-child(10){ animation-delay: 1.2s !important;}
    #mv .mainList li:nth-child(7){ animation-delay: 1.3s !important;}
    #mv .mainList li:nth-child(5){ animation-delay: 1.4s !important;}
    #mv .mainList li:nth-child(8){ animation-delay: 1.5s !important;}
    
    
    /*--- intro ---*/
    #contents .intro .title{
        margin-bottom: 30px;
    }
    #contents .intro ul{
        flex-wrap: wrap;
    }
    #contents .intro ul li {
        width: 48%;
        margin-bottom: 30px;
    }    
    #contents .intro ul li img{
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    
    
    
}


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

@media screen and (max-width:600px) {
    
    /*--- intro ---*/
    #contents .intro .title {
        font-size: 26px;
    }
    
    /*--- common ---*/
    #contents .sectionTitle {
        width: 380px;
        top: -130px;
    }
    #contents .section .inrWhiteBox {
        padding: 40px 30px;
    }
    
    /*--- work ---*/
    #contents .charms{
        margin-bottom: 50px;
    }
    #contents .charms .image {
        width: 100%;
        max-width: 300px;
    }
    #contents .charms .info .title{
        font-size: 22px;
        padding-bottom: 0;
    }
    #contents .charms .info .title .inner{
        display: table;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    #contents .work .charms .deco02 {
        width: 32%;
        left: -7%;
    }
    
    #contents .section.environment{
        margin-top: 40px;
    }
    #contents .section.environment .inrWhiteBox{
        padding-bottom: 0;
    }
    
    #contents .environment .charms .deco01 {
        bottom: 0%;
        width: 40%;
        left: -13%;
    }
    #contents .charms .info .btns{
        flex-direction: column;
    }
    #contents .environment .charms .deco02 {
        width: 32%;
        right: -19%;
        bottom: -0%;
    }
    #contents .environment .charms .deco03 {
        width: 34%;
        left: -17%;
        bottom: -0%;
    }
    
    #contents .sectionTitle02 {
        width: 180px;
        left: -40px;
        position: absolute;
        top: -20px;
    }
    #contents .ranking{
        padding-top: 65px;
        margin-bottom: 40px;
    }
    #contents .ranking .envTitleBox {
        width: 90%;
        margin: 20px auto 20px;
    }
    #contents .ranking .rankingList li{
        flex-direction: column;
        justify-content: center;
    }
    #contents .ranking .rankingList li:nth-child(1) .image,
    #contents .ranking .rankingList li .image{
        width: 80%;
        max-width: 220px;
        margin-bottom: 15px;
    }
    #contents .ranking .rankingList li .text{
        width: 100%;
    }
    
    #contents .woman {
        padding-top: 100px;
        width: calc(100% + 60px);
        margin-left: -30px;
    }
    #contents .woman .sectionTitle02 {
        left: -10px;
    }
    #contents .woman .envTitleBox{
        width: 85%;
        margin-bottom: 40px;
    }
    #contents .woman .voiceList{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #contents .woman .voiceList{
        padding-left: 20px;
        padding-right: 20px;
    }
    #contents .woman .voiceList li{
        width: 80%;
        margin: 0;
        max-width: 230px;
    }
    #contents .woman .voiceList li:nth-child(2){
        margin: -5% -10% -5% 0;
    }
    #contents .woman .voiceList li:nth-child(3),
    #contents .woman .voiceList li:nth-child(5){
        margin: -5% -30% -5% 0;
    }
    #contents .woman .voiceList li:nth-child(1),
    #contents .woman .voiceList li:nth-child(4){
        margin: -5% 0 -5% -30%;
    }
    
}

/*----------------------------------------------------
	☆UNDER 480
----------------------------------------------------*/

@media screen and (max-width:480px) {
    
    #mv{
        margin-top: 14px;
    }
    #mv .mainList .titleBox .deco02 {
        left: -17%;
    }
    #mv .mainList .titleBox .deco01 {
        top: -12.4%;
        width: 40%;
        right: -18.4%;
    }
    
    /*--- intro ---*/
    #contents .intro .title {
        font-size: 22px;
    }
    
    /*--- wrok ---*/
    #contents .charms .image{
        margin-bottom: 10px;
    }
    
    
}