@charset "utf-8";

@import "base.css";
@import "common.css";
@import "layout.css";
@import "layoutFull.css";
 
/* index
---------------------------------------------------*/
#index .bgGrayFull::before {
    top: 250px;
    height: calc(100% - 330px);
}

#index p.taC{
    font-size: 1.8rem;
    margin-bottom: 40px;
}

#index .bgPinkArea .tit{
    color: #dc186e;
    font-size: 3.0rem;
    margin-bottom: 20px;
    line-height: 1.4;
    text-align: center;
}

#index .bgPinkArea .flex{
    display: flex;
    justify-content: space-between;
    width: 440px;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: left;
    gap:10px 0;
    margin: 25px auto;
}

#index .bgPinkArea .flex li{
    width: 200px;
    margin: 0;
}

#index .btn.pink{
    margin: 25px auto;
}

#index .btn.pink a{
    color: #fff;
    background:#dc186e;
    border-color: #dc186e;
    width: 340px;
    box-shadow: none;
    font-size: 2.0rem;
    min-width: 440px;
    height: 56px;
    line-height: 56px;    
    border-radius: 30px;
}

#index .btn.pink a:hover{
    color: #dc186e;
    background:#fff;
    border-color: #fff;
}

#index .bgPinkArea .note{
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

#index .bgPinkArea .note li + li{
    margin-top: 0;
}

#index .bgWhiteArea{
    padding:50px 20px 0;
}

#index .bgWhiteArea .tit{
    font-size: 3.0rem;
    margin-bottom: 20px;
    line-height: 1.4;
    text-align: center;
}

#index .bgWhiteArea dl.number{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 2.0rem;
    width: 250px;
    line-height: 1.6;
    margin: 0 auto 25px;
}

#index .bgWhiteArea dl.number dt{
    width: 100px;
}

@media only screen and (max-width:767px) {
    #index .bgGrayFull::before {
      top:  calc(250vw / 7.5);
      height: calc(100% - calc(330vw / 7.5));
    }  
    
    #index p.taC{
        font-size: calc(26vw / 7.5);
        margin-bottom: calc(60vw / 7.5);
    }
    
    #index .bgPinkArea .tit{
        font-size: calc(36vw / 7.5);
        margin-bottom: calc(40vw / 7.5);
    }

    #index .bgPinkArea .flex{
        width: calc(380vw / 7.5);
        flex-wrap: wrap;
        flex-direction: column;
        gap:calc(20px / 7.5) 0;
        margin: calc(40vw / 7.5) auto;
        justify-content: center;
    }

    #index .bgPinkArea .flex li{
        width: inherit;
        margin: 0;
    }

    #index .bgPinkArea .note{
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
    }

    #index .btn.pink{
        width: auto;
        margin: calc(40vw / 7.5) auto;
    }

    #index .btn.pink a{
        height: calc(90vw / 7.5);
        line-height:  calc(90vw / 7.5);
        border-radius:  calc(45vw / 7.5);
        min-width: inherit;
        width: auto;
        font-size: calc(30vw / 7.5);
    }
    
    #index .bgWhiteArea .tit{
        font-size: calc(36vw / 7.5);
        margin-bottom: calc(40vw / 7.5);
    }

    #index .bgWhiteArea dl.number{
        font-size:calc(30vw / 7.5);
        width:  calc(370vw / 7.5);
        margin: 0 auto calc(40vw / 7.5);
    }

    #index .bgWhiteArea dl.number dt{
        width: calc(140vw / 7.5);
    }
}