@charset "utf-8";
/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/

/* MAIN */

#main {
    overflow: hidden;
    margin-bottom: 34px;
}

#main .mainSlider {
    display: flex;
    width: max-content;
    padding-bottom: 11px;
}

#main .mainSlider li {
    width: 29.2vw;
    min-width: 300px;
}

#main .mainSlider:not(.inited) li {
    margin-right: 20px;
}

#main .mainSlider li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}

/* ARAEBEGINNER */

.araeBeginner {
    margin-bottom: 101px;
}

.araeBeginner .innerBig {
    position: relative;
    overflow: hidden;
}

.araeBeginner .innerBig::before {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    background-color: #fff;
    width: 32px;
    height: 100%;
    z-index: 2;
}

.araeBeginner .areaTitle {
    margin-bottom: 38px;
}

.araeBeginner .beginnerSlider {
    display: flex;
    padding-left: 4px;
    padding-bottom: 30px;
}


.araeBeginner .beginnerSlider li {
    overflow: hidden;
    max-width: 210px;
    min-width: 210px;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}

.araeBeginner .beginnerSlider li .beginnerPhoto {
    margin-bottom: 10px;
}

.araeBeginner .beginnerSlider li .beginnerPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 210/132;
}

.araeBeginner .beginnerSlider li .beginnerContent {
    padding: 0 10px 16px;
}

.araeBeginner .beginnerSlider li .beginnerTitle {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1px;
}

.araeBeginner .beginnerSlider li .star {
    position: relative;
    text-align: center;
    margin-bottom: 4px;
}

.araeBeginner .beginnerSlider li .star::before {
    content: "";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    height: 1px;
    background: #B28F5C;
}

.araeBeginner .beginnerSlider li .star span {
    position: relative;
    display: inline-block;
    padding: 0 3px;
    background: #fff;
}

.araeBeginner .beginnerSlider li .beginnerTxt {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.4px;
    padding-left: 2px;
}

/* AREAFLOW */
.areaFlow {
    position: relative;
    background: #F6F8FF;
    padding: 23px 0 38px;
    margin-bottom: 69px;
}

.areaFlow::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 0;
    width: 100%;
    height: 40px;
    background: #f6f8ff;
    border-top-left-radius: 50% 80%;
    border-top-right-radius: 50% 80%;
    z-index: -1;
}

.areaFlow .areaTitle {
    margin-bottom: 56px;
}

.areaFlow .listTelling {
    display: flex;
    justify-content: space-between;
    padding-left: 21px;
    margin-bottom: 31px;
}

.areaFlow .listTelling li {
    position: relative;
    width: calc(100% / 4 - 38px);
    background: #fff;
    padding: 18px 15px 25px;
    box-shadow: 0 0 6px hsl(231deg 93% 57% / 12%);
    border-radius: 10px;
}

.areaFlow .listTelling li:not(:last-child):before {
    content: "";
    position: absolute;
    top: 56.7%;
    right: -40px;
    transform: translateY(-50.9%);
    border-top: 21px solid transparent;
    border-left: 24px solid #DA74B4;
    border-bottom: 21px solid transparent;
}

.areaFlow .listTelling li .tellingStep {
    position: absolute;
    top: -20px;
    left: -21px;
    background: #DA74B4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 41px;
    height: 41px;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
}

.areaFlow .listTelling li .tellingStep span {
    display: block;
    font-size: 23px;
    line-height: 1;
    margin-top: -6px;
    transform: translateY(1px);
}

.areaFlow .listTelling li .tellingPhoto {
    margin-bottom: 11px;
}

.areaFlow .listTelling li .tellingPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 9px;
}

.areaFlow .listTelling li .tellingTitle {
    font-size: 18px;
    color: #DA74B4;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
}

.areaFlow .listTelling li .tellingTxt {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: justify;
}

@media (max-width:950px) {
    .areaFlow .listTelling {
        padding: 0 30px;
        flex-direction: column;
    }

    .areaFlow .listTelling li {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 80px;
        padding: 20px;
    }

    .areaFlow .listTelling li:last-child {
        margin-bottom: 0;
    }

    .areaFlow .listTelling li:not(:last-child):before {
        top: auto;
        bottom: -55px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        border-left: 21px solid transparent;
        border-right: 21px solid transparent;
        border-top: 24px solid #DA74B4;
        border-bottom: 0;
    }

    .areaFlow .listTelling li .tellingPhoto {
        margin-bottom: 0;
        width: 29.6%;
    }

    .areaFlow .listTelling li .tellingBox {
        width: 66%;
        padding-top: 5px;
    }

    .areaFlow .listTelling li .tellingTitle {
        text-align: left;
    }
}

@media(max-width:720px) {
    #main {
        margin-bottom: 33px;
    }

    #main .mainSlider {
        padding-bottom: 15px;
        width: auto;
    }

    #main .mainSlider li {
        width: auto;
        min-width: 86.6vw;
        max-width: 86.6vw;
    }
    #main .mainSlider:not(.inited) {
        justify-content: center;
    }
    #main .mainSlider:not(.inited) li {
        margin-bottom: 10px;
    }

    /* .araeBeginner */

    .araeBeginner {
        margin-bottom: 66px;
    }

    .araeBeginner .innerBig::before {
        content: "";
        display: none;
    }

    .araeBeginner .titleEn {
        width: 100px;
        margin: 0 auto 14px;
    }

    .araeBeginner .areaTitle {
        margin-bottom: 26px;
    }

    .araeBeginner .beginnerSlider {
        padding-left: 0;
        margin-left: 0;
        padding-bottom: 20px;
    }

    .araeBeginner .beginnerSlider li .beginnerContent {
        padding-bottom: 15px;
    }

    /* areaFlow */
    .areaFlow {
        padding: 29px 0 40px;
    }

    .areaFlow .titleEn {
        width: 107px;
        margin: 0 auto 12px;
    }

    .areaFlow::before {
        background-image: url(../images/index/flow-border-sp.png);
        top: -21px;
        height: 22px;
    }

    .areaFlow .listTelling {
        padding: 0 0 0 21px;
        margin-bottom: 32px;
    }

    .areaFlow .areaTitle {
        margin-bottom: 31px;
    }

    .areaFlow .listTelling li {
        padding: 18px 15px 16px;
        margin-bottom: 45px;
        align-items: center;
    }

    .areaFlow .listTelling li .tellingPhoto {
        width: 106px;
        height: 104px;
    }

    .areaFlow .listTelling li .tellingBox {
        width: calc(100% - 123px);
        padding-top: 0;
    }

    .areaFlow .listTelling li:not(:last-child):before {
        bottom: -32px;
        left: 47.5%;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 16px solid #DA74B4;
    }
}