@charset "utf-8";

/* EXPERIENCE */
main.experience {

}


main.experience .mainvisual {
    position: relative;

}

/* SP */
@media (max-width: 768px) {
    main.experience .mainvisual {
            width: 100%;
            height: auto;
    }
}

main.experience .mainvisual .mv_main {
    width: 100%;
    position: relative;
    z-index: 3;
}

/* SP */
@media (max-width: 768px) {
    main.experience .mainvisual .mv_main {
        
            aspect-ratio: 402 / 291;
        object-fit: cover;
        object-position: center;
        transform-origin: center top;
    }
}

main.experience .mainvisual div.mv_exp {
    max-width: 1100px;
    width: 96%;
    align-items: center;
    position: absolute;
    z-index: 4;
    top: calc(50% - 150px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #ffffff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

}

main.experience .mainvisual div.mv_exp h2 {
    font-size: 4rem;
    line-height: 1;
}

main.experience .mainvisual div.mv_exp small {
    font-size: 2rem;
    font-weight: 400;
}

/* SP */
@media (max-width: 768px) {
    main.experience .mainvisual div.mv_exp {
        width: 90%;
        top: 30%;
    }
    main.experience .mainvisual div.mv_exp h2 {
        font-size: 2rem;
    }
    main.experience .mainvisual div.mv_exp small {
        font-size: 0.8125rem;
}

}

main.experience .mainvisual div.top_exp {
    width: 100%;
    height: fit-content;
    background: #ffffff;
    align-items: center;
    position: relative;
    z-index: 5;
    margin-top: -50px;
    padding-bottom: 3rem;
}

main.experience .mainvisual div.top_exp h3 {
    font-size: 2.625rem;
    color: var(--red);
    position: relative;
    z-index: 5;
    margin-bottom: 1rem;
}
main.experience .mainvisual div.top_exp h3 small {
    font-size: 1.25rem;
}

main.experience .mainvisual div.top_exp p {
    font-size: 1.5rem;
    max-width: 1130px;
    width: 96%;
    display: block;
}


main.experience .mainvisual div.top_exp:after {
    content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100px; 
  background-color: #ffffff; 
  clip-path: ellipse(58% 100% at 50% 100%);
  z-index: 4; 
}



/* SP */
@media (max-width: 768px) {
    main.experience .mainvisual div.top_exp {
        width: 100%;
        background: #ffffff;
        align-items: center;
        position: relative;
        z-index: 5;
        margin-top: -1rem;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    main.experience .mainvisual div.top_exp h3 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    main.experience .mainvisual div.top_exp h3 small {
        font-size: 1.25rem;
    }

    main.experience .mainvisual div.top_exp p {
        font-size: 1rem;
    }

    main.experience .mainvisual div.top_exp:after {
        height: 2rem;
        clip-path: ellipse(57% 100% at 50% 100%);
        top: -1rem;
    }
}



.ex_main {
    background: #ffffff;
    width: 100%;
    padding-bottom: 5rem;
}


/* SP */
@media (max-width: 768px) {
    .ex_main {
    padding-bottom:3rem;
}

}

.ex_main .ex_main_wrap {
    max-width: 1130px;
    width: 96%;
    gap: 3rem;
    justify-content: center;

}

.ex_main div.ex_main_center {
    width: 1px;
    background: #000000;
}


/* SP */
@media (max-width: 768px) {
    .ex_main .ex_main_wrap {
        gap: 2rem;
    }
    .ex_main div.ex_main_center {
    width: 100%;
    height: 1px;
    background: #000000;
}
}

.ex_main_wrap article {
    width: calc(50% - 1.5rem);
}

/* SP */
@media (max-width: 768px) {
    .ex_main_wrap article {
        width: 100%;
    }
}

.ex_main_wrap article.sushi {
    --ex-accent-bg: var(--red);
}

.ex_main_wrap article.tea {
    --ex-accent-bg: #00873F;
}


.ex_main_wrap article h4 {
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 9999px;
    padding: 0.5rem 0;
    background: var(--ex-accent-bg);
    color: #ffffff;
    font-size: 2.625rem;
    font-weight: 700;
    margin-bottom: 1rem;
}


.ex_main_wrap article span.price {
    color:  var(--ex-accent-bg);
    font-size: 2.5rem;
    font-weight: 700;
    align-items:center;
    justify-content: center;
    text-align: center;
    margin-bottom: 4rem;
}
.ex_main_wrap article span.price small {
    font-size: 1.5rem;
}

.ex_main_wrap article .arrow {
    background: var(--ex-accent-bg);
    width: 2.625rem;
    height: 1.3125rem;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin-bottom: 2rem;
}
.ex_main_wrap article .arrow.arrow_top {
    margin-bottom: 1rem;
}

.ex_main_wrap article img {
    margin-bottom: 1rem;
    aspect-ratio: 500 / 400;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ex_main_wrap article p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* SP */
@media (max-width: 768px) {
.ex_main_wrap article h4 {
    font-size: 1.5rem;
    padding: 0.8rem 0;
}
.ex_main_wrap article span.price {
    margin-bottom: 1rem;
}
.ex_main_wrap article .arrow {
    margin-bottom: 1rem;
}
.ex_main_wrap article img {
    border-radius: 0;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1rem;
}

.ex_main_wrap article p {
    font-size: 1rem;
    margin-bottom: 1rem;
}
}


.flowofex {
    background: #ffffff;
    padding-bottom: 4rem;
    margin-bottom: 5rem;
}

.flowofex h3 {
    background: var(--red);
    color: #ffffff;
    width: 100%;
    padding: 2rem;
    width: 100%;
    font-size: 2.625rem;
    font-weight: 700;
    justify-content: center;
    align-items: center;
}

.flowofex .bt_tri {
    background: var(--red);
    width: 100%;
    height: 3.75rem;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin-bottom: 2rem;
}


/* SP */
@media (max-width: 768px) {
.flowofex {
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}
.flowofex h3 {
    font-size: 2rem;
}
.flowofex .bt_tri {
    height: 2.5rem;
}

}

.flowofex .arrow {
    background: var(--red);
    width: 7.875rem;
    height: 1.9375rem;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: 0 auto 2rem;
}

.flowofex a.booknow {
    margin-top: 2rem;
}

.flowofex article {
    gap: 3rem;
    align-items: center;
    margin-bottom: 2rem;
}

.flowofex article img {
    width: 540px;
    border-radius: 25px;
}


.flowofex article span {
    background: var(--red);
    padding: 0.3rem 0.7rem;
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    display: flex;
    width: fit-content;

}

.flowofex article p {
    font-size: 1.5rem;
    max-width: 550px;
}


/* SP */
@media (max-width: 768px) {
.flowofex article {
    gap: 1rem;
}
.flowofex article img {
    width: 100%;
}

.flowofex article {
    align-items: center;
}
.flowofex article div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flowofex article span {
    margin-bottom: 1rem;
}
.flowofex article p {
    font-size: 1rem
};

}