@charset "utf-8";


/* eyecatch */
.eyecatch {
    margin: 0 auto;
    width: 100%;
    position: relative;
}
.eyecatch-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.eyecatch_txt {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(50vw/12, 50px);
    color: #fff;
    font-weight: 700;
}
.eyecatch_txt span {
    font-size: min(32vw/12, 32px);
}
@media(min-width:1201px) {
    .eyecatch-inner {
        max-width: 1920px;
    }
}
@media(max-width:780px) {
    .eyecatch-inner {
        max-width: 780px;
    }
    .eyecatch_txt {
        font-size: min(58vw/7.8, 58px);
        text-align: center;
    }
    .eyecatch_txt span {
        font-size: min(38vw/7.8, 38px);
    }
} 


/* **********
    menu-title
 ********** */
.menu-title_sin, .menu-title_mult {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: min(20vw/12, 20px);
    padding-left: min(240vw/12, 240px);
}
.menu-titleWrap {
    width: 100%;
    position: relative;
    display: flex;
    z-index: 1;
}
.menu-title_sin .menu-titleWrap ::before {
    content: "";
    background-image: url(../img/icon_text03.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: min(226vw/12, 226px);
    height: min(224vw/12, 224px);
    position: absolute;
    bottom: max(-50vw/12, -50px);
    left: max(-230vw/12, -230px);
    z-index: 2;
}
.menu-title_mult .menu-titleWrap ::before {
    content: "";
    background-image: url(../img/icon_text04.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: min(226vw/12, 226px);
    height: min(224vw/12, 224px);
    position: absolute;
    bottom: max(-50vw/12, -50px);
    left: max(-230vw/12, -230px);
    z-index: 2;
}
.menu-titleWrapIn {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.menu-title {
    font-size: min(50vw/12, 50px);
    letter-spacing: 0.01em;
    font-weight: 700;
    line-height: 0.9;
    color: #7c050b;
    margin: 0 min(20vw/12, 20px);
}
.title-cap {
    font-size: min(26vw/12, 26px);
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: 0.02em;
    display: inline-block;
    flex-shrink: 0;
    margin: 0 auto;
    color: #7c050b;
}
.menu-title-line {
    height: min(3vw/12, 3px);
    width: 100%;
    margin: auto;
    background: #7c050b;
}
@media(max-width:780px) {
    .menu-title_left {
        margin: 0 calc(50% - 50vw) min(40vw/7.8, 40px) 0;
        padding-left: min(180vw/7.8, 180px);
    }
    .menu-title_right {
        margin-bottom: min(40vw/7.8, 40px);
        padding-right: min(180vw/7.8, 180px);
    }
    .menu-title_left .menu-titleWrap ::before {
        width: min(226vw/7.8, 226px);
        height: min(224vw/7.8, 224px);
        bottom: max(-70vw/7.8, -70px);
        left: max(-220vw/7.8, -220px);
    }
    .menu-title_right .menu-titleWrap ::before {
        width: min(226vw/7.8, 226px);
        height: min(224vw/7.8, 224px);
        bottom: max(-70vw/7.8, -70px);
        right: max(-220vw/7.8, -220px);
    }
    .menu-title {
        font-size: min(62vw/7.8, 62px);
        margin: 0 min(20vw/7.8, 20px);
    }
    .title-cap {
        font-size: min(30vw/7.8, 30px);
    }
    .menu-title-line {
        height: min(3vw/7.8, 3px);
    }
}

/* **********
    menu
 ********** */
.menu {
    max-width: 1200px;
    margin: 0 auto;
}
.menu-inner {
    padding: min(140vw/12, 140px) min(80vw/12, 80px) min(120vw/12, 120px);
    position: relative;
}
.menu-caution {
    padding: min(20vw/12, 20px) min(80vw/12, 80px) min(20vw/12, 20px);
    font-size: min(18vw/12, 18px);
    color: #7c050b;
    text-align: center;
}

@media(max-width:780px) {
    .menu {
        max-width: 780px;
    }
    .menu-inner {
        padding: min(140vw/7.8, 140px) min(40vw/7.8, 40px) min(120vw/7.8, 120px);
        position: relative;
    }
    .menu-caution {
        padding: min(20vw/7.8, 20px) min(40vw/7.8, 40px) min(20vw/7.8, 20px);
        font-size: min(28vw/7.8, 28px);
        text-align: left;
    }
}

/* menu-area */
.menu-area_top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(40vw/12, 40px);
    margin-bottom: min(40vw/12, 40px);
}
.menu-area_bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: min(40vw/12, 40px);
    margin-bottom: min(140vw/12, 140px);
}
.menu-txt_area .menu-txt_area_title {
    font-size: min(26vw/12, 26px);
    font-weight: 700;
    color: #131313;
    padding: min(20vw/12, 20px) 0;
}
.menu-txt_area .menu-txt_area_title02 {
    font-size: min(22vw/12, 22px);
    font-weight: 700;
    color: #131313;
    padding: min(20vw/12, 20px) 0;
}
.menu-txt_area .menu-txt_area_cap {
    display: inline-block;
    font-size: min(18vw/12, 18px);
    font-weight: normal;
    padding-top: min(10vw/12, 10px);
}
.menu-txt_area .menu-txt_area_cap02 {
    display: inline-block;
    font-size: min(16vw/12, 16px);
    font-weight: normal;
    padding-top: min(10vw/12, 10px);
}
.menu-txt_area .menu-price {
    font-size: min(20vw/12, 20px);
    line-height: 2.2em;
    color: #131313;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.menu-txt_area .menu-price02 {
    font-size: min(18vw/12, 18px);
    line-height: 1.75em;
    color: #131313;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.menu-txt_area .menu-sub {
    font-size: min(20vw/12, 20px);
    line-height: 2.2em;
    color: #131313;
    text-align: right;
}
.menu-txt_area .menu-left, .menu-txt_area .menu-right {
    flex: 0 1 auto;
}
.menu-txt_area .menu-sub span, .menu-txt_area .menu-left span, .menu-txt_area .menu-right span {
    font-size: min(16vw/12, 16px);
}
.menu-txt_area .center-line {
    padding: min(20vw/12, 20px) min(15vw/12, 15px);
    flex-grow: 2;
}
.menu-txt_area .center-line hr {
    border-width: min(2vw/12, 2px) 0px 0px 0px;
    border-style: dotted;
    border-color: #131313;
}
@media(max-width:780px) {
    .menu-area_top {
        grid-template-columns: 1fr;
        gap: min(40vw/7.8, 40px);
        margin-bottom: min(40vw/7.8, 40px);
    }
    .menu-area_bottom {
        grid-template-columns: 1fr;
        gap: min(40vw/7.8, 40px);
        margin-bottom: min(140vw/7.8, 140px);
    }
    .menu-area_bottom_box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: min(30vw/7.8, 30px);
        grid-row-gap: 0;
    }
    .menu-txt_area .menu-txt_area_title {
        font-size: min(44vw/7.8, 44px);
        padding: min(20vw/7.8, 20px) 0;
    }
    .menu-txt_area .menu-txt_area_title02 {
        font-size: min(40vw/7.8, 40px);
        padding: 0 0 min(20vw/7.8, 20px);
    }
    .menu-txt_area .menu-txt_area_cap {
        display: block;
        font-size: min(28vw/7.8, 28px);
        padding-top: min(10vw/7.8, 10px);
    }
    .menu-txt_area .menu-txt_area_cap02 {
        font-size: min(28vw/7.8, 28px);
        padding-top: min(10vw/7.8, 10px);
    }
    .menu-txt_area .menu-price {
        font-size: min(36vw/7.8, 36px);
    }
    .menu-txt_area .menu-price02 {
        font-size: min(34vw/7.8, 34px);
    }
    .menu-txt_area .menu-sub {
        font-size: min(36vw/7.8, 36px);
    }
    .menu-txt_area .menu-sub span, .menu-txt_area .menu-left span, .menu-txt_area .menu-right span {
        font-size: min(26vw/7.8, 26px);
    }
    .menu-txt_area .menu-left span, .menu-txt_area .menu-right span span {
        font-size: min(24vw/7.8, 24px);
    }

    .menu-txt_area .center-line {
        padding: min(30vw/7.8, 30px) min(20vw/7.8, 20px);
    }
    .menu-txt_area .center-line hr {
        border-width: min(2vw/7.8, 2px) 0px 0px 0px;
    }
}

/* side-area */
.side-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(40vw/12, 40px);
}

.side-area_bottom{ grid-area: 1 / 1 / 2 / 3; }
.side-area_left { grid-area: 2 / 1 / 3 / 2; }
.side-area_right { grid-area: 2 / 2 / 3 / 3; }


.side-area_left, .side-area_right {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: min(20vw/12, 20px) min(40vw/12, 40px) min(80vw/12, 80px);
}
.side-area h3 {
    display: inline-block;
    font-size: min(42vw/12, 42px);
    text-align: center;
    line-height: 1.5em;
    font-weight: bold;
    color: #7c050b;
    border-bottom: min(4vw/12, 4px) solid #7c050b;
    margin: 0 auto min(24vw/12, 24px);
}
.side-area p {
    font-size: clamp(0.875rem, 0.121rem + 1.54vw, 1.125rem);
    line-height: 1.85em;
    color: #131313;
}
@media(max-width:780px) {
    .side-area {
        grid-template-columns: 1fr;
        gap: min(40vw/7.8, 40px);
        margin-bottom: min(40vw/7.8, 40px);
    }
    .side-area_bottom { grid-area: 1 / 1 / 2 / 2; }
    .side-area_left { grid-area: 2 / 1 / 3 / 2; }
    .side-area_right { grid-area: 3 / 1 / 4 / 2; }

    .side-area_left, .side-area_right {
        padding: min(20vw/7.8, 20px) min(40vw/7.8, 40px) min(60vw/7.8, 60px);
    }
    .side-area h3 {
        font-size: min(44vw/7.8, 44px);
        border-bottom: min(4vw/7.8, 4px) solid #7c050b;
        margin: 0 auto min(24vw/7.8, 24px);
    }
    .side-area p {
        font-size: min(30vw/7.8, 30px);
    }
}

/* 吹き出し */
.side-arrow {
    display: flex;
    justify-content: center;
}
.side-arrow_box {
    position:relative;
    width: min(660vw/12, 660px);
    height: min(200vw/12, 200px);
    background:#ead196;
    padding: min(20vw/12, 20px);
}
.side-arrow_box li {
    text-align:left;
    color: #7c050B;
    font-size: min(18vw/12, 18px);
    line-height: 1.5em;
}
.side-arrow_box .bold {
    font-size: min(22vw/12, 22px);
    font-weight: 700;
}
.side-arrow_box a {
    display: inline-block;
    background: linear-gradient(transparent 60%, #ffffff 30%);
    margin-bottom: min(20vw/12, 20px);
    margin-left: min(20vw/12, 20px);
    padding: 0 min(20vw/12, 20px);
}
.side-arrow_box .sns {
    font-size: min(22vw/12, 22px);
    font-weight: 700;
}
.side-arrow_box .sns img {
    width: min(44vw/12, 44px);
}
.side-arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(234, 209, 150, 0);
    border-top-width: min(10vw/12, 10px);
    border-bottom-width: min(10vw/12, 10px);
    border-left-width: min(19vw/12, 19px);
    border-right-width: min(19vw/12, 19px);
    margin-top: max(-10vw/12, -10px);
    border-left-color:#ead196;
    left: 100%;
    top: 50%;
}
.side-arrow_icon {
    margin-left: min(20vw/12, 20px);
    margin-top: min(30vw/12, 30px);
}
.side-arrow_icon img {
    width: min(133vw/12, 133px);
    height: min(108vw/12, 108px);
}
@media(max-width:780px) {
    .side-arrow_box {
        position:relative;
        width: min(540vw/7.8, 540px);
        height: min(400vw/7.8, 400px);
        padding: min(20vw/7.8, 20px);
    }
    .side-arrow_box li {
        font-size: min(28vw/7.8, 28px);
        line-height: 1.5em;
    }
    .side-arrow_box .bold {
        font-size: min(34vw/7.8, 34px);
    }
    .side-arrow_box a {
        background: linear-gradient(transparent 60%, #ffffff 30%);
        margin-bottom: min(20vw/7.8, 20px);
        margin-left: min(20vw/7.8, 20px);
        padding: 0 min(20vw/7.8, 20px) min(5vw/7.8, 5px);
    }
    .side-arrow_box .sns {
        font-size: min(32vw/7.8, 32px);
    }
    .side-arrow_box .sns img {
        width: min(60vw/7.8, 60px);
    }
    .side-arrow_box:after{
        border-top-width: min(10vw/7.8, 10px);
        border-bottom-width: min(10vw/7.8, 10px);
        border-left-width: min(19vw/7.8, 19px);
        border-right-width: min(19vw/7.8, 19px);
        margin-top: max(-10vw/7.8, -10px);
    }
    .side-arrow_icon {
        margin-top: min(140vw/7.8, 140px);
        margin-left: min(20vw/7.8, 20px);
    }
    .side-arrow_icon img {
        width: min(133vw/7.8, 133px);
        height: min(108vw/7.8, 108px);
    }
}