@charset "UTF-8";

/* 
mesona-j
------------------------ 
*/


/* section01 */

#mj .top p {
    position: absolute;
    top: 6%;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
}

#mj .mov {
    bottom: 10%;
}

#mj .mov video {
    width: 95%;
    margin: 0 auto;
}

#mj .sec01 {
    background: #fbe4db;
}

#mj .sec01 ul li dt {
    font-size: 3.7rem;
    color: #eb774d;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mj .sec01 ul li dt::before {
    content: '';
    display: block;
    width: 5%;
    aspect-ratio: 34 / 40;
    background: url("../images/menu/mesona-j/sec1_ttl_l.png") no-repeat;
    background-size: contain;
    margin-right: 2%;
}

#mj .sec01 ul li dt::after {
    content: '';
    display: block;
    width: 5%;
    aspect-ratio: 34 / 40;
    background: url("../images/menu/mesona-j/sec1_ttl_r.png") no-repeat;
    background-size: contain;
    margin-left: -1.5%;
}


/* section02 */

#mj .sec02 {
    /* background: url("../images/menu/mesona-j/sec02_bg.jpg") ;
    background-repeat: repeat;
    background-size: contain; */
    width: 100%;
}

#mj .sec02 .inner {
    padding-top: 8%;
    padding-bottom: 12%;
}

#mj .sec02 h3 {
    text-align: center;
    font-size: 4.8rem;
    line-height: 1.5;
    color: #694f57;
    margin-bottom: 1%;
}

#mj .sec02 h3 span {
    color: #f28ca5;
}

#mj .sec02 .heading_area {
    margin-bottom: 4%;
}

#mj .sec02 .heading_area figure {
    width: 95%;
    margin: 0 auto;
}

#mj .sec02 .txt_wrap {
    position: relative;
    border-radius: 60px;
}

#mj .sec02 .txt_wrap::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #d2cdce;
    top: 3.5%;
    left: 1.5%;
    z-index: 3;
    border-radius: 60px;
}

#mj .sec02 .bg_area {
    background-image: linear-gradient(309deg, rgba(248, 245, 221, 1), rgba(251, 224, 214, 1));
    padding: 6% 6%;
    position: relative;
    border-radius: 60px;
    z-index: 3;
}

#mj .sec02 .txt_wrap ul li {
    margin-bottom: 2%;
}

#mj .sec02 .txt_wrap ul li:last-child {
    margin-bottom: 0;
}

#mj .sec02 .txt_wrap ul li figure {
    width: 6%;
}

#mj .sec02 .txt_wrap ul li .p_txt {
    color: #6b595e;
    margin-left: 2%;
    font-feature-settings: "palt";
}

@media screen and (max-width: 749px) {
    #mj .sec02 .txt_wrap ul li .p_txt {
        font-size: 3.4vw;
    }
}

#mj .sec02 .txt_wrap ul li .p_txt span {
    color: #639669;
}

#mj .sec02 .txt_wrap .trouble_img {
    position: absolute; 
    right: -2%;
    bottom: -20%;
    width: 35%;
    overflow: hidden;
}

@media screen and (max-width: 450px) {
    #mj .sec02 .txt_wrap::before {
        border-radius: 30px;
    }

    #mj .sec02 .bg_area {
        border-radius: 30px;
        padding: 6% 7%;
    }
}


/* section03 */

#mj .sec03 {
    background: #fce8ed;
}

#mj .sec03 .inner {
    padding-bottom: 10%;
}

#mj .sec03 .txt_wrap {
    margin-bottom: 12%;
    padding: 0 3% 4%;
}

#mj .sec03 .p_txt {
    line-height: 1.5;
}

#mj .sec03 .p_txt .bg_txt {
    background: #fff;
}

#mj .sec03 .img_wrap .img_area {
    position: relative;
    padding: 4% 4%;
}

#mj .sec03 .img_wrap .img_area2 {
    padding: 12% 4% 4%;
}

#mj .sec03 .img_wrap .img_area1 {
    margin-bottom: 20%;
}

#mj .sec03 .img_wrap .img_area h4 {
    position: absolute;
    top: -11%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
}

#mj .sec03 .img_wrap .img_area2 h4 {
    width: 110%;
    top: -14%;
    left: -5.5%;
    transform: none;
    overflow: hidden;
    /* overflow-y: scroll;
    -webkit-overflow-scrolling: touch; */
}

@media screen and (max-width: 570px) {
    #mj .sec03 .img_wrap .img_area2 h4 {
        width: 103%;
        left: -3%;
    }
}

#mj .sec03 .img_wrap .img_area .p_txt {
    position: absolute;
    width: 60%;
    top: 16%;
    left: 6%;
    font-feature-settings: "palt";
}

#mj .sec03 .img_wrap .img_area2 .p_txt {
    top: 15%;
}

#mj .sec03 .img_wrap .img_area .plus {
    position: absolute;
    bottom: -13%;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
}


/* section04 */

#mj .sec04 {
    background: url("../images/menu/mesona-j/sec4_bg.jpg")repeat-y;
    background-size: contain;
}

#mj .sec04 .img_area {
    position: relative;
}

#mj .sec04 h4 {
    font-size: 3.6rem;
    position: absolute;
    top: 16%;
    left: 6%;
    font-weight: 500;
}

#mj .sec04 .inner .p_txt1 {
    padding: 4% 4% 4%;
}

#mj .sec04 .inner {
    padding-top: 0;
}

#mj .sec04 .inner2 {
    padding-bottom: 8%;
}

#mj .sec04 .inner2 .w_bg {
    padding: 5% 5%;
}

#mj .sec04 .inner2 .w_bg .p_txt {
    line-height: 1.6;
}

#mj .sec04 .inner2 .w_bg .p_txt .bg_txt {
    background: #fff034;
}


/* section05 */

#mj .sec05 {
    background: url(../images/menu/mesona-j/sec5_bg.jpg) repeat-y;
    background-size: contain;
}

#mj .sec05 .inner {
    padding-top: 0;
    padding-bottom: 8%;
}

#mj .sec05 .txt_wrap {
    position: relative;
}

#mj .sec05 .txt_wrap::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #f7a5ba;
    top: 0.8%;
    left: 1.5%;
}

#mj .sec05 .border_area {
    background: #fff;
    position: relative;
    z-index: 3;
    padding: 6% 4% 5% 6%;
    border: 2px solid #f28ca5;
}

#mj .sec05 .border_area dt {
    /* justify-content: center; */
    margin-bottom: 1%;
}

#mj .sec05 .border_area dt figure {
    margin-right: 1%;
    width: 3%;
}

#mj .sec05 .border_area dt h5 {
    color: #f28ca5;
    font-size: 3.1rem;
}

#mj .sec05 .border_area dd {
    font-size: 2.5rem;
    font-feature-settings: "palt";
    line-height: 1.6;
}

#mj .sec05 .border_area ul li {
    margin-bottom: 4%;
}

#mj .sec05 .border_area .arg {
    margin-bottom: 5%;
}

#mj .sec05 .border_area .hai .a-center {
    align-items: flex-start;
}

#mj .sec05 .border_area .hai h5 {
    line-height: 1.1;
    margin-top: -1%
}

#mj .sec05 .border_area .hai .txt_s {
    font-size: 2.7rem;
}


/* section06 */

#mj .sec06 {
    background: #fef3f7;
    padding-bottom: 4%;
}

#mj .sec06 .inner p {
    padding: 0 2%;
}


/* section07 */

#mj .sec07 {
    padding: 4% 0 0;
}

#mj .sec07 h3 img {
    width: 74%;
}

#mj .sec07 .time {
    width: 55%;
    margin: 6% auto 6%;
}

#mj .sec07 .time p {
    font-size: 2.8rem;
}

#mj .sec07 .time_l {
    background: #f28ca5;
    color: #fff;
    padding: 1% 0;
    border-radius: 30px 0 0 30px;
    border: 4px solid #f28ca5;
}

#mj .sec07 .time_r {
    border: 4px solid #f28ca5;
    padding: 1% 0;
    border-radius: 0 30px 30px 0;
    color: #f28ca5;
    box-sizing: border-box;
}

@media screen and (max-width: 450px) {
    #mj .sec07 .time_l {
        border: 2px solid #f28ca5;
    }
    
    #mj .sec07 .time_r {
        border: 2px solid #f28ca5;
    }
}



/* section07 */

#mj .sec07 .fee_list li {
    margin-bottom: 8%;
}

#mj .sec07 .fee_list dl dd {
    border: 2px solid #f28ca5;
    margin: 6% 4%;
}

#mj .sec07 .fee_list .course2 dd {
    border: 3px solid #71efc4;
}

#mj .sec07 .fee_list .course3 dd {
    border: 3px solid #80d5cc;
}

#mj .sec07 .fee_list dl dd .fee_top {
    background: #fce8ed;
    font-size: 2.8rem;
    padding: 3% 4% 3%;
}

#mj .sec07 .fee_list dt .p_txt {
    color: #f28ca5;
    padding: 4% 3% 0;
}

#mj .sec07 .fee_list .course2 dd .fee_top {
    background: #b1f6de;
}

#mj .sec07 .fee_list .course3 dd .fee_top {
    background: #cceeeb;
}

#mj .sec07 .fee_list dl dd .fee_top h5 {
    text-align: center;
    background: #fff;
    padding: .5% 0;
    width: 30%;
    margin: 0 auto 2%;
    border-radius: 30px;
    font-size: 3rem;
}

#mj .sec07 .fee_list dl dd .fee_bottom {
    padding: 1.5% 4% 0;
    align-items: center;
}

#mj .sec07 .fee_list dl dd .p_txt {
    font-size: 3rem;
}

#mj .sec07 .fee_list dl dd .fee_left {
    width: 20%;
    transform: translateY(20%);
    font-size: 3.3rem;
}

#mj .sec07 .fee_list dl dd .fee_right {
    width: 80%;
    text-align: center;
    /* letter-spacing: 0; */
}

#mj .sec07 .fee_list dl dd .pk_txt {
    font-size: 3.8rem;
}

#mj .sec07 .fee_list dl dd .price {
    font-size: 5.3rem;
}

#mj .sec07 .fee_list dl dd .pk_txt {
    color: #e97a9f;
}

@media screen and (max-width: 749px) {
    #mj .sec07 .fee_list dl dd .pk_txt {
        font-size: 4.2vw;
    }
    
    #mj .sec07 .fee_list dl dd .price {
        font-size: 7.1vw;
    }

    #mj .sec07 .fee_list dl dd .p_txt {
        font-size: 4vw;
    }
}

#mj .sec07 .option {
    text-align: center;
    background: #d1edd5;
    padding: 4% 0 0;
    margin-bottom: 4%;
}

#mj .sec07 .option .op_top {
    margin-bottom: 4%;
}

#mj .sec07 .option h4 {
    font-size: 4rem;
    color: #32b941;
    background: #fff;
    border-radius: 40px;
    padding: 1% 4%;
    width: 75%;
    margin: 0 auto 2%;
}

#mj .sec07 .option .op_list li:nth-child(odd) {
    background: #b3e3b9;
}

#mj .sec07 .option .op_list li dl {
    padding: 2% 2% 2% 4%;
    align-items: center;
}

#mj .sec07 .option .op_list li dl dt {
    font-size: 2.8rem;
    text-align: left;
}

#mj .sec07 .option .op_list li dl dt .small {
    font-size: 2rem;
}

#mj .sec07 .option .op_list li dl dt .txt_xs {
    font-size: 1.8rem;
}

#mj .sec07 .option .op_list li dl .sp-height {
    line-height: 1;
}

#mj .sec07 .option .op_list li dl dd .price {
    font-size: 4rem;
}

#mj .sec07 .option .op_list li dl .p_txt {
    font-size: 2.2rem;
    text-align: left;
}

@media screen and (max-width: 749px) {
    #mj .sec07 .option h4 {
        font-size: 5vw
    }

    #mj .sec07 .option .op_list li dl dt {
        font-size: 3.8vw;
    }

    #mj .sec07 .option .op_list li dl dt .small {
        font-size: 2.5vw;
    }

    #mj .sec07 .option .op_list li dl dd .price {
        font-size: 5vw;
    }

    #mj .sec07 .option .op_list li dl .p_txt {
        font-size: 3vw;
        letter-spacing: 0.01em;
    }
}

#mj .sec07 .bottom_wrap .bottom_txt {
    width: 65%;
    letter-spacing: .2rem;
}

#mj .sec07 .bottom_wrap .bottom_img {
    width: 35%;
}


/* 広告用
-------------- */

#mj_pr .mov_area {
    position: relative;
}

#mj_pr .mov_area .mov {
    bottom: 10%;
}

#mj_pr .mov_area video {
    width: 95%;
    margin: 0 auto;
}

/* メニュー調整2406 */
#mj .sec07 .fee_list dl .fee_2406 .fee_left {
    text-align: center;
}

#mj .sec07 .fee_list dl .fee_2406 .fee_right {
    text-align: right;
}


/* renewal 2411 */
#mj .pk_txt {
    color: #e97a9f;
}

/* #mj .bottom_info .pk_txt {
    color: #4fb0dd;
}

#mj .approval .pk_txt {
    color: #4fb0dd;
} */