@charset "utf-8";

/* ==========================================================

    MV

========================================================== */
.mv .-_medai {
    display: flex;
    justify-content: space-between; align-items: center;
}

.mv .-_medai .-__contents {
    margin-left: 5.9%;
    width: 48.15%;
}


/* PC */
@media screen and (width >= 1280px) {
    .mv {
        height: 700px;
        background: url(../img/wapuu/mv_bg.png) no-repeat center center;
    }

    .mv .-_medai { padding-top: 94px;}

    .mv .-_medai .-__img {
        transform: translateX(22px);
    }

    .mv .-_medai .btn-ly_center { margin-top: 80px;}
}

/* TB */
@media screen and (width >= 576px) and (width < 1280px) {
    
}

/* SP */
@media screen and (width < 576px) {
    .mv {
        background: url(../img/wapuu/mv_bg.png) no-repeat center center;
        background-size: cover;
    }

    .mv .-_medai { flex-direction: column-reverse;}

    .mv .-_medai .-__img { width: 80vw;}

    .mv .-_medai .-__contents {
        margin-top: -9vw; margin-right: auto; margin-left: auto;
        width: 80vw;
    }

    .mv .-_medai .-__contents .btn-ly_center { margin-top: 5vw;}
}







/* ==========================================================

    .bl_introduce

========================================================== */
.bl_introduce { padding-top: 40px;}

.bl_introduce .ttl_bd-img { margin-bottom: 90px;}

.bl_introduce [class^="-_block"] {
    display: flex;
    justify-content: center; align-items: center;
}

.bl_introduce [class^="-_block"].--reverse {
    flex-direction: row-reverse;
}

.bl_introduce .-_block01 { margin-left: 20px;}

.bl_introduce .-_block02 .-__img {
    margin-top: -20px; margin-bottom: -80px;
}

.bl_introduce .-_block03 { margin-left: 100px;}

.bl_introduce [class^="-_block"] .-__ttl {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 54px;
}

.bl_introduce .btn-ly_center { margin-top: 40px;}

.bl_introduce .-_size {
    margin-top: 80px; margin-bottom: 100px;
    position: relative;
    max-width: 810px;
    margin-right: auto; margin-left: auto;
    background: url(../img/wapuu/bg_parchment.png);
    display: flex;
    justify-content: space-between; align-items: center;
    padding: 20px 34px 12px 76px;
}

.bl_introduce .-_size::before {
    content: '';
    width: calc(100% - 26px);
    height: calc(100% - 26px);
    border: 3px solid #fff;
    position: absolute; top: 10px; left: 10px; z-index: 0;
}

.bl_introduce .-_size .-__ttl {
    position: absolute; left: -23px; top: -26px;
}

.bl_introduce .-_size .-__contents { padding-top: 20px;}

.bl_introduce .-_size .-__contents div {
    display: flex;
    justify-content: flex-start; align-items: center;
    line-height: 1.4;
    margin-top: 10px;
}

.bl_introduce .-_size .-__contents .__notes {
    font-size: 12px;
    display: block;
}

.bl_introduce .-_size .-__contents dt {
    width: 6em;
}

.bl_introduce .-_size .-__contents dd::before {
    content: '：';
}

/* PC */
@media screen and (width >= 1280px) {
    .bl_introduce [class^="-_block"] .-__contents {
        width: 436px;
    }

    .bl_introduce .-_block03 .-__contents {
        width: 360px;
        margin-right: 40px;
    }
}

/* SP */
@media screen and (width < 576px) {
    .bl_introduce { margin-top: 10vw;}

    .bl_introduce .ttl_bd-img { margin-bottom: 10vw;}

    .bl_introduce [class^="-_block"],
    .bl_introduce [class^="-_block"].--reverse {
        flex-direction: column-reverse;
        margin-bottom: 5vw;
    }

    .bl_introduce .-_block01 { margin-left: 0;}

    .bl_introduce .-_block02 .-__img {
        margin-top: 0; margin-bottom: 0;
    }

    .bl_introduce .-_block03 { margin-left: 0;}

    .bl_introduce [class^="-_block"] .-__ttl {
        margin-top: -4vw; margin-bottom: 5vw;
        line-height: 1.5;
        font-size: 22px;
    }
}





/* ==========================================================

    .bl_notes

========================================================== */
.bl_notes {
    background: linear-gradient(180deg,rgba(253, 247, 227, 1) 0%, rgba(255, 252, 246, 1) 40%, rgba(255, 244, 229, 1) 100%);
    padding-top: 100px;
}

.bl_notes .-_area {
    position: relative;
    padding-top: 72px; padding-bottom: 150px;
    display: flex;
    justify-content: center; align-items: center;
    line-height: 1.4;
}

.bl_notes .-_area li a { color: inherit;}

.bl_notes .-_area .-___list01 { background: url(../img/wapuu/notes_bg01.png) no-repeat center center;}
.bl_notes .-_area .-___list02 { background: url(../img/wapuu/notes_bg02.png) no-repeat center center;}
.bl_notes .-_area .-___list03 { background: url(../img/wapuu/notes_bg03.png) no-repeat center center;}
.bl_notes .-_area .-___list04 { background: url(../img/wapuu/notes_bg04.png) no-repeat center center;}


/* PC */
@media screen and (width >= 1280px) {
    .bl_notes .-_area li { position: absolute;}

    .bl_notes .-_area .-___list01 { left: -42px;  top: 20px;}
    .bl_notes .-_area .-___list02 { left: 0;  top: 173px;}
    .bl_notes .-_area .-___list03 { right: 0;  top: 62px;}
    .bl_notes .-_area .-___list04 { right: 8px;  top: 250px;}
}

/* TB・PC */
@media screen and (width >= 576px) {
    .bl_notes .-_area .-___list01 {
        width: 400px;
        padding: 58px 81px;
    }

    .bl_notes .-_area .-___list02 {
        width: 412px;
        padding: 66px 70px;
    }

    .bl_notes .-_area .-___list03 {
        width: 444px;
        padding: 60px 86px;
    }

    .bl_notes .-_area .-___list04 {
        width: 468px;
        padding: 70px 90px;
    }
}

/* SP */
@media screen and (width < 576px) {
    .bl_notes .-_area {
        flex-direction: column;
        padding-top: 40px; padding-bottom: 30px;
    }

    .bl_introduce .-_size .-__ttl {
        top: -50px;
        rotate: 10deg;
    }

    .bl_introduce .-_size {
        flex-direction: column;
        padding-right: 5vw; padding-left: 5vw;
    }

    .bl_notes .-_area .-___list01 {
        padding: 58px 81px;
    }

    .bl_notes .-_area .-___list02 {
        padding: 66px 70px;
    }

    .bl_notes .-_area .-___list03 {
        padding: 60px 86px;
    }

    .bl_notes .-_area .-___list04 {
        padding: 70px 90px;
    }

    .bl_notes .-_area .-__img { width: 50vw;}
}





/* ==========================================================

    .bl_birth

========================================================== */
.bl_birth {
    padding-top: 100px;
}





/* ==========================================================

    .bl_trial

========================================================== */
.bl_trial {
    background: url(../img/wapuu/bg_hemp.png) center center;
    background-size: 100% auto;
    position: relative;
}

.bl_trial::before {
    content: '';
    border: dashed 8px #D8C4AE;
    width: calc(100% - 56px);
    height: calc(100% - 48px);
    position: absolute; left: 20px; top: 16px; z-index: 1;
}

.bl_trial .-__box {
    display: flex;
    flex-direction: column; justify-content: center; align-items: center;
    position: relative; z-index: 2;
    line-height: 1.5;
}

/* TB・PC */
@media screen and (width >= 576px) {
    .bl_trial .-_area { display: grid;}
}

/* PC */
@media screen and (width >= 1280px) {
    .bl_trial { padding: 72px;}

    .bl_trial .-_area {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 70px 45px;
    }

    .bl_trial .-__box { width: 200px;}

    .bl_trial .-__box:nth-child(8n-7)::after,
    .bl_trial .-__box:nth-child(8n-6)::after,
    .bl_trial .-__box:nth-child(8n-5)::after {
        content: '';
        width: 25px; height: 38px;
        background: url(../img/wapuu/arr_triangle.png);
        position: absolute; top: 50%; right: -33px;
        transform: translateY(-50%);
    }

    .bl_trial .-__box:nth-child(8n-1)::after,
    .bl_trial .-__box:nth-child(8n-2)::after,
    .bl_trial .-__box:nth-child(8n-3)::after {
        content: '';
        width: 25px; height: 38px;
        background: url(../img/wapuu/arr_triangle.png);
        position: absolute; top: 50%; left: -38px;
        transform: translateY(-50%) scaleX(-1);
    }

    .bl_trial .-__box:nth-child(4n)::after {
        content: '';
        width: 25px; height: 38px;
        background: url(../img/wapuu/arr_triangle.png);
        position: absolute; bottom: -68px; left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .bl_trial .-__box:last-child::after { content: none;}

    .bl_trial .-__box:nth-child(5) { order: 8;}
    .bl_trial .-__box:nth-child(6) { order: 7;}
    .bl_trial .-__box:nth-child(7) { order: 6;}
    .bl_trial .-__box:nth-child(8) { order: 4;}
}

/* TB */
@media screen and (width >= 576px) and (width < 1280px) {
    .bl_trial { padding: 40px 5%;}

    .bl_trial .-_area {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 7%;
    }

    .bl_trial .-__box img { max-width: 100%;}

    .bl_trial .-__box:nth-child(6n-5)::after,
    .bl_trial .-__box:nth-child(6n-4)::after {
        content: '';
        aspect-ratio: 25 / 38;
        width: 10%; max-width: 25px;
        background: url(../img/wapuu/arr_triangle.png);
        background-size: cover;
        position: absolute; top: 50%; right: -14%;
        transform: translateY(-50%);
    }

    .bl_trial .-__box:nth-child(6n-1)::after,
    .bl_trial .-__box:nth-child(6n-2)::after {
        content: '';
        aspect-ratio: 25 / 38;
        width: 10%; max-width: 25px;
        background: url(../img/wapuu/arr_triangle.png);
        position: absolute; top: 50%; left: -14%;
        transform: translateY(-50%) scaleX(-1);
    }

    .bl_trial .-__box:nth-child(3n)::after {
        content: '';
        aspect-ratio: 25 / 38;
        width: 10%; max-width: 25px;
        background: url(../img/wapuu/arr_triangle.png);
        position: absolute; bottom: -42px; left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .bl_trial .-__box:last-child::after { content: none;}

    .bl_trial .-__box:nth-child(4) { order: 6;}
    .bl_trial .-__box:nth-child(5) { order: 5;}
    .bl_trial .-__box:nth-child(6) { order: 4;}
    .bl_trial .-__box:nth-child(7) { order: 7;}
    .bl_trial .-__box:nth-child(8) { order: 8;}
}


/* SP */
@media screen and (width < 576px) {
    .bl_trial {
        padding: 10vw 6vw 10vw;
        background-size: cover;
    }
    
    .bl_trial::before {
        content: '';
        border: dashed 4px #D8C4AE;
        width: calc(100% - 3vw * 2 - 4px * 2);
        height: calc(100% - ( 3vw + 7vw) - 4px * 2);
        position: absolute; left: 3vw; top: 5vw; z-index: 1;
    }

    .bl_trial .-__box {
        flex-direction: row;
    }

    .bl_trial .-__box::after {
        content: '';
        width: 4vw; height: auto;
        aspect-ratio: 25 / 38;
        background: url(../img/wapuu/arr_triangle.png);
        background-size: 100% auto;
        position: absolute; bottom: -5vw; left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .bl_trial .-__box:last-child::after { content: none;}

    .bl_trial .-__box img { width: 50vw;}
}




/* ==========================================================

    .bl_complete

========================================================== */
.bl_complete { margin-top: 50px;}

.bl_complete .-_area {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between; align-items: center;
}

.bl_complete .-_ttl { text-align: center;}

.bl_complete .-__contents { text-align: left;}

/* PC */
@media screen and (width >= 1280px) {
    .bl_complete {
        width: 820px;
        margin-right: auto; margin-left: auto;
    }

    .bl_complete .-__contents { width: 480px;}
}

/* TB */
@media screen and (width >= 576px) and (width < 1280px) {
    .bl_complete {
        max-width: 820px;
        margin-right: auto; margin-left: auto;
    }

    .bl_complete .-__img {
        width: calc(293 / 820 * 100%);
        margin-right: 4.8%;
    }

    .bl_complete .-__img img { width: 100%;}

    .bl_complete .-__contents { flex: 1;}
}

/* SP */
@media screen and (width < 576px) {
    .bl_complete { margin-top: 30px;}

    .bl_complete .-_area {
        flex-direction: column;
        width: 88vw;
        margin-right: auto; margin-left: auto;
    }

    .bl_complete .-_area .-__img { width: 60vw;}

    .bl_complete .-_ttl img { width: 35vw;}
}