@charset "utf-8";

.lower-cover-bg-pc {
	display: block;
}

.lower-cover-bg-sp {
	display: none;
}


/*===========================================================
冒頭
===========================================================*/

.intro-wrapper {
    padding: 12rem 0 14rem;
    position: relative;
}

.intro-inner {
    max-width: 145rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
    position: relative;
}

.intro-deco01 {
    max-width: 57rem;
    width: 29.68%;
    position: absolute;
    left: 4.94%;
    bottom: 19.05%;
}

.intro-frame {
    max-width: 153.4rem;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.intro-area {
    max-width: 105.8rem;
    width: 74.5%;
    margin: 6rem 0 0;
}

.intro-title-area {
    max-width: 21rem;
    width: 14.78%;
}

.intro-title-sp {
    display: none;
}

.intro-img-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.intro-img-item01 {
    max-width: 52.4rem;
    width: 50%;
}

.intro-img-item02 {
    max-width: 42.5rem;
    width: 45%;
    padding: 6.33% 7.09% 0 0;
    position: relative;
}

.intro-deco02 {
    max-width: 20.4rem;
    width: 48%;
    position: absolute;
    top: 0;
    right: 0;
}

.intro-text-block {
    max-width: 85.7rem;
    width: 100%;
    margin: 7rem 0 0;
}

.intro-text-box {
    max-width: 80rem;
    width: 100%;
    margin: 0 0 0 auto;
}

/*===========================================================
安心ポイント
===========================================================*/

.point-wrapper {
    padding: 12.4rem 0 13rem;
}

.point-inner {
    max-width: 145rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.point-title {
    margin: 1.3rem auto 0;
}

.point-title-pc {
    max-width: 82.1rem;
    width: 60%;
}

.point-title-sp {
    display: none;
}

.point-card-group {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: flex-start;
    gap: 2.8rem;
    margin: 7rem auto 0;
}

.point-card {
    background: url(../../../../uploads/course_bg01.png) no-repeat center / cover;
    color: var(--white);
    padding: 3rem 4rem 4rem;
}

.point-card:nth-child(even) {
    transform: translateY(4rem);
}

.point-card-text {
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 2.18em;
    margin: 2rem 0 0;
}

.point-title03 br {
    display: none;
}

/*===========================================================
コース
===========================================================*/

.course {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 8rem 1.5rem 13rem;
    position: relative;
}

.course02-illust-box {
    max-width: 51.6rem;
    width: 40%;
    position: absolute;
    right: 0;
    top: 22%;
    margin: auto;
    z-index: -1;
}

.course-main-title-box {
    text-align: center;
}

.course-main-title {
    margin: 1.2rem auto 0;
    width: 50%;
}

.course-tax-box {
    margin: 2rem 0 0;
    display: inline-flex;
    font-weight: 400 !important;
}

.course-container {
    margin: 8rem auto 0;
    width: 100%;
}

.course01-area {
    max-width: 132rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}

.course01-left {
    max-width: 65rem;
    width: 100%;
}

.course01-title-frame {
    max-width: 38rem;
    width: 100%;
    margin: 0 auto;
}

.course-title-container {
    text-align: center;
}

.course-title-area {
    padding: 1.5rem 0;
    border-top: 0.1rem solid var(--primary);
    border-bottom: 0.1rem solid var(--primary);
}

.course-title-box {
    padding: 3rem 0;
    border-top: 0.1rem dotted var(--primary);
    border-bottom: 0.1rem dotted var(--primary);
}

.course-title03 {
    margin: 0 0 1.5rem;
}

.course01-img-box {
    margin: 6rem 0 0;
    width: 100%;
}

.course01-right {
    margin: 5rem 0 0 -8.3rem;
    max-width: 75.4rem;
    width: 100%;
}

.course-menu-container {
    width: 100%;
    padding: 6rem 1.5rem;
}

.course-menu-area {
    margin: 0 auto;
    width: 100%;
}

.course-menu-area01 {
    max-width: 61.4rem;
}

.course-menu-title-td {
    text-align: right;
}

.course-menu-title-box {
    padding: 0 0 1.5rem;
    position: relative;
}

.course-menu-title-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: url(../../../../uploads/normal_border.svg);
    background-attachment: scroll !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.course-menu-text-container {
    margin: 2rem 0 0;
}

.course-menu-text-area {
    margin: 2rem 0 0;
}

.course-menu-point-text-box {
    display: flex;
    align-items: center;
    position: relative;
}

.course-menu-point-text-box::before {
    content: "";
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    background: var(--bg-primary);
    margin: 0 1rem 0 0;
}

.course-menu-text-box {
    margin: 1rem 0 0;
}

.course02-area {
    max-width: 142rem;
    width: 100%;
    margin: 7rem auto 0;
}

.course02-title-frame {
    max-width: 76.7rem;
    width: 85%;
    margin: 0 auto;
}

.course02-block-container {
    margin: 6rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem 2rem;
}

.course02-block {
    max-width: 65rem;
    width: 100%;
}

.course-menu-area02 {
    max-width: 51rem;
}

.course03-area {
    max-width: 122rem;
    width: 100%;
    margin: 12rem auto 0;
    display: flex;
    align-items: center;
}

.course03-text-container {
    margin: 0 -44.5rem 0 0;
    max-width: 79.8rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.course03-text-box {
    margin: 3rem 0 0;
    max-width: 60rem;
    width: 100%;
}

.course03-btn-area {
    margin: 6rem 0 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.course03-img-box {
    max-width: 87rem;
    width: 100%;
}

.course03-title01 br {
    display: none;
}

.course03-area {
    max-width: 122rem;
    width: 100%;
    margin: 12rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course03-text-container {
    margin: 0 -31.4rem 0 0;
    max-width: 79.8rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.course03-text-box {
    margin: 3rem 0 0;
    max-width: 60rem;
    width: 100%;
}

.course03-btn-area {
    margin: 6rem 0 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.course03-img-box {
    max-width: 73.6rem;
    width: 60.3%;
    position: relative;
}

.course03-img-box::before {
    content: "";
    display: block;
    width: 80%;
    height: 100%;
    background: linear-gradient(to left, rgba(230, 224, 206, 0), rgba(232, 225, 207, 1));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.course03-title01 br {
    display: none;
}

.course03-title01 {
    text-shadow: 0 1px 4px rgba(233, 225, 204);
}

.course04-area {
    margin: 15rem 0 0;
}

.course04-title-frame {
    max-width: 76.7rem;
    width: 100%;
    margin: 0 auto;
}

.course-title02 br {
    display: none;
}

/* .course04-box {
    margin: 7rem -1rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
} */

.course04-box {
    margin: 6rem auto 0;
    max-width: 142rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.course-menu-area03 {
    max-width: 40rem;
}

.course04-point-area {
    margin: 8rem auto 0;
    max-width: 122rem;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course04-point-img-box {
    max-width: 65rem;
    width: 53.3%;
}

.course-point-menu-container {
    max-width: 50rem;
    width: 40.8%;
}

.course05-area {
    margin: 12rem auto 0;
    padding: 6rem 1.5rem 7rem;
    max-width: 90rem;
    width: 100%;
    border: 0.1rem solid var(--bg-primary);
}

.course05-box {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
}

.course05-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.course05-title-box::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3rem;
    background: url(../../../../uploads/circle_icon.svg);
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.course05-title-box::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3rem;
    background: url(../../../../uploads/circle_icon.svg);
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.course05-title01 br {
    display: none;
}

.course05-title01 {
    margin: 0 4%;
}

.course05-text-box {
    margin: 4rem 0 0;
    text-align: center;
}

.course05-text01 strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.course05-text01 br {
    display: none;
}

/* ----- モーダル ----- */

.modal {
    display: none;
}

.modaal-container {
    max-width: 122rem;
}

.modaal-content-container {
    padding: 0 !important;
}

.course-drink-frame {
    max-width: 122rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}

.course-drink-container {
    padding: 6rem 2rem;
    width: 100%;
    border: 0.1rem solid var(--white);
}

.course-drink-main-title-box {
    text-align: center;
}

.course-drink-area {
    margin: 6rem auto 0;
    max-width: 102rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem 2rem;
}

.course-drink-block {
    max-width: 26rem;
    width: 100%;
}

.course-drink-item {
    margin: 6rem 0 0;
}

.course-drink-item:first-child {
    margin: 0;
}

.course-drink-title-box {
    display: flex;
    align-items: center;
}

.course-drink-title-box::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 0.8rem 0 0;
    background: var(--white);
    transform: rotate(45deg);
}

.course-drink-menu-area {
    margin: 2.5rem 0 0;
}

.course-drink-row {
    padding: 1.5rem 0.5rem 1rem;
    border-bottom: 0.1rem dotted var(--white);
}

.course-drink-row:first-child {
    padding: 0 0.5rem 1rem;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


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

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



}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1550px) {

    /*===========================================================
    冒頭
    ===========================================================*/

    .intro-frame {
        padding: 0 7% 0 0;
    }

    /*===========================================================
    コース
    ===========================================================*/

    .intro-text-box {
        max-width: 82rem;
    }

    .course-menu-title03 {
        font-size: 2.1rem;
    }

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {

    /*===========================================================
    安心ポイント
    ===========================================================*/
    
    .point-card-group {
        gap: 2rem;
    }
    
    .point-card {
        padding: 2rem 1.5rem 3rem;
    }
    
    .point-card-text {
        margin: 1.5rem 0 0;
    }

    .point-card-title03 {
        font-size: 2.1rem;
    }

    /*===========================================================
    コース
    ===========================================================*/

    .course01-right {
        margin: 0 0 0 -4rem;
    }

    .course03-title01 br {
        display: block;
    }

    .course04-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .course04-point-area {
        width: 100%;
    }

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {


    /*===========================================================
    冒頭
    ===========================================================*/

    .intro-wrapper {
        padding: 8rem 0 10rem;
    }
    
    .intro-deco01 {
        width: 45%;
        left: 3%;
        bottom: 12%;
    }
    
    .intro-frame {
        padding: 0;
        flex-direction: column;
    }
    
    .intro-title-area {
        max-width: 54.5rem;
        width: 100%;
        text-align: center;
        margin: auto;
    }
    
    .intro-area {
        max-width: 100%;
        width: 100%;
        margin: 4rem 0 0;
    }
    
    .intro-text-block {
        margin: 4rem 0 0;
    }

    /*===========================================================
    安心ポイント
    ===========================================================*/

    .point-wrapper {
        padding: 8rem 0;
    }
    
    .point-title-pc {
        display: none;
    }
    
    .point-title-sp {
        display: block;
        max-width: 45rem;
        width: 86%;
    }
    
    .point-card-group {
        grid-template-columns: repeat(1,1fr);
        margin: 4rem auto 0;
    }
    
    .point-card:nth-child(even) {
        transform: unset;
    }

    .point-title03 br {
        display: block;
    }

    /*===========================================================
    コース
    ===========================================================*/

    .course01-area {
        flex-direction: column;
        align-items: center;
    }

    .course-title-area {
        padding: 1rem 0;
    }

    .course-title-box {
        padding: 2rem 0;
    }

    .course01-img-box {
        margin: 3rem 0 0;
    }

    .course01-right {
        margin: 4rem auto 0;
    }

    .course02-block-container {
        margin: 5rem 0 0;
    }

    .course02-block-container {
        flex-direction: column;
        justify-content: center;
    }

    .course02-block {
        max-width: 100%;
    }

    .course-menu-area02 {
        max-width: 61.4rem;
    }

    .course03-area {
        flex-direction: column-reverse;
    }

    .course03-text-container {
        margin: -12rem 0 0;
    }

    .course03-text-box {
        margin: 2rem 0 0;
    }

    .course03-btn-area {
        margin: 4rem 0 0;
    }

    .course03-img-box {
        width: 80%;
        margin: 0 0 0 auto;
    }

    .course04-area {
        margin: 10rem auto 0;
    }

    .course04-point-area {
        margin: 6rem auto 0;
        flex-direction: column;
        justify-content: center;
    }

    .course04-point-img-box {
        width: 100%;
    }

    .course-point-menu-container {
        margin: 4rem 0 0;
        max-width: 60rem;
        width: 100%;
    }

    /* ----- モーダル ----- */

    .course-drink-area {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    .course-drink-block {
        display: contents;
    }

    .course-drink-item {
        margin: 0;
        width: 48%;
    }

    .course-menu-title03 {
        font-size: 2.1rem;
    }

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {

    .lower-cover-bg-pc {
        display: none;
    }

    .lower-cover-bg-sp {
        display: block;
    }


    /*===========================================================
    冒頭
    ===========================================================*/
    
    .intro-img-block {
        flex-direction: column;
    }
    
    .intro-img-item01 {
        width: 80%;
        margin: 0 0 0 auto;
    }
    
    .intro-img-item02 {
        width: 55%;
        margin: 3rem 0 0;
    }

    .intro-title-pc {
        display: none;
    }
    
    .intro-title-sp {
        max-width: 26.5rem;
        width: 37%;
        display: block;
        margin: auto;
    }

    /*===========================================================
    コース
    ===========================================================*/

    .course03-btn-area {
        justify-content: center;
    }

    .course-menu-container {
        padding: 4rem 1.5rem;
    }

    .course-menu-title09 {
        font-size: 2.4rem;
    }

    .course03-text-container {
        margin: -5rem 0 0;
    }

    .course04-area {
        margin: 8rem auto 0;
    }

    .course04-box {
        margin: 6rem 0 0;
        grid-template-columns: repeat(1, 1fr);
    }

    .course05-area {
        margin: 8rem 0 0;
    }

    .course05-title01 br {
        display: block;
    }

    .course05-text01 br {
        display: block;
    }

    /* ----- モーダル ----- */

    .course-drink-item {
        width: 100%;
    }

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


    /*===========================================================
    コース
    ===========================================================*/

    .course-title02 br {
        display: block;
    }

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */