@charset "utf-8";
/* ===========================
 menu.css - メニューページ専用スタイル
 style.cssに合わせて font-size / margin / padding / gap をvw・calc寄せ
 =========================== */

/* ===========================
 メインビジュアル
 =========================== */
.article__header {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mainImg_box {
    position: relative;
    width: min(79vw, 1137.6px);
    margin: 0 auto;
}

.article__header > .mainImg_PC {
    display: block;
    height: auto;
}

.mainImg_box .mainImg_SP {
    display: none;
}

.mainImg_box .oshinagaki_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-46.43%, -50%);
    width: auto;
    height: 79%;
    z-index: 2;
}


/* ===========================
 お弁当セクション
 =========================== */
.section--bento {
    position: relative;
    padding: min(7vw, 100.8px) min(0vw, 0px) 0;
    overflow: hidden;
}

/* 背景装飾 */
.section--bento > .diamond {
    width: min(28vw, 403.2px);
    height: min(28vw, 403.2px);
    background: var(--primary-lightbrown);
    position: absolute;
    transform: rotate(45deg);
    opacity: 0.1;
    z-index: -1;
}

.section--bento > .diamond:first-of-type {
    top: calc(-1 * min(7vw, 100.8px));
    left: calc(-1 * min(10vw, 144px));
}

.section--bento > .diamond:last-of-type {
    bottom: min(14vw, 201.6px);
    left: calc(-1 * min(10vw, 144px));
}

.section--bento > .illust_dot {
    position: absolute;
    width: min(14vw, 201.6px);
    opacity: 0.15;
    z-index: -1;
}

.section--bento > .illust_dot:first-of-type {
    top: min(0.2vw, 2.88px);
    left: calc(-1 * min(1.5vw, 21.6px));
}

.section--bento > .illust_dot:last-of-type {
    bottom: min(28vw, 403.2px);
    left: min(2vw, 28.8px);
}


/* お弁当タイトルエリア */
.bento_about {
    text-align: center;
    margin-bottom: min(5vw, 72px);
}

.menu_title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(1.7vw, 24.48px);
    margin-bottom: min(2.2vw, 31.68px);
}

.menu_title img {
    width: min(5vw, 72px);
    height: auto;
}

.menu_title p {
    font-family: var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.2rem + min(1.2vw, 17.28px));
    letter-spacing: min(0.5vw, 7.2px);
    line-height: 1.25;
}

.bento_about > p:last-of-type {
    font-family: var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.0rem + min(0.8vw, 11.52px));
    line-height: 1.875;
    letter-spacing: min(0.35vw, 5.04px);
}


/* お弁当コンテンツ共通 */

.bento_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(3vw, 43.2px);
    margin: 0px 0 min(4vw, 57.6px);
}

.bento_flex .bento_contents {
max-width: 390px;
    padding: 0;
    margin: 0;}

.bento_contents {
    max-width: 966px;
    width: 90%;
    margin: 0 auto min(4vw, 57.6px);
    padding: 0 5%;
    position: relative;
}

.bento_title {
    text-align: center;
    margin-bottom: 0;
    position: relative;
}

.bento_title p {
    font-family: var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.0rem + min(0.8vw, 11.52px));
    letter-spacing: min(0.45vw, 6.48px);
    display: inline-block;
    line-height: 1.4;
}

.recommend {
    position: absolute;
    width: min(11vw, 158.4px);
    top: calc(-1 * min(0.9vw, 12.96px));
    left: calc(50% + min(5.5vw, 79.2px));
    transform: rotate(8deg);
    height: auto;
    z-index: 1000;
}

/* お弁当ブロック */
.bento_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(2.8vw, 40.32px);
    background: rgba(255, 255, 255, 0.5);
    padding: min(4vw, 57.6px) min(4vw, 57.6px) min(5.5vw, 79.2px);
    border: none;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.bento_body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(3.5vw, 50.4px);
    width: 100%;
}

.bento_body > img {
    width: 373px;
    height: auto;
    flex-shrink: 0;
}

.nidan .bento_body > img {
    width: 417px;
}

.bento_detail {
    text-align: center;
    flex: 1;
    max-width: 380px;
}

.bento_detail .price {
    font-family: var(--fontFamilyEN);
    font-size: calc(2.4rem + min(1.6vw, 23.04px));
    font-weight: 700;
    letter-spacing: min(0.65vw, 9.36px);
    line-height: 1;
    margin-bottom: min(2vw, 28.8px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: min(0.6vw, 8.64px);
    white-space: nowrap;
}

.bento_detail .price span {
    font-family: 'Shippori Mincho B1', var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.1rem + min(0.4vw, 5.76px));
    letter-spacing: min(0.28vw, 4.032px);
    margin-left: min(0.3vw, 4.32px);
    white-space: nowrap;
    flex-shrink: 0;
}

.bento_detail .okazu {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: calc(1.1rem + min(0.4vw, 5.76px));
    line-height: 1.4;
    letter-spacing: min(0.28vw, 4.032px);
    margin: 0 auto;
    padding: min(1vw, 14.4px) min(1.1vw, 15.84px);
    width: 262px;
    height: 78px;
    background: #f3f1ee;
    mix-blend-mode: multiply;
    text-align: center;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento_detail .plus {
    display: block;
    width: min(1vw, 14.4px);
    height: min(1vw, 14.4px);
    margin: min(1vw, 14.4px) auto;
    position: relative;
}

.bento_detail .plus::before,
.bento_detail .plus::after {
    content: "";
    position: absolute;
    background: var(--primary-lightbrown);
}

.bento_detail .plus::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.bento_detail .plus::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

.bento_detail .rice_band {
    background: #f3f1ee;
    mix-blend-mode: multiply;
    padding: min(1vw, 14.4px) min(1.1vw, 15.84px);
    width: 262px;
    height: 78px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento_detail .koshihikari {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: calc(1.1rem + min(0.3vw, 4.32px));
    letter-spacing: min(0.2vw, 2.88px);
    color: var(--primary-brown);
    margin-bottom: min(0.4vw, 5.76px);
    text-align: center;
}

.bento_detail .rice {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: calc(1.1rem + min(0.4vw, 5.76px));
    letter-spacing: min(0.28vw, 4.032px);
    line-height: 1.4;
    text-align: center;
    margin: 0;
}

.bento_detail .rice span {
    font-size: calc(1.1rem + min(0.3vw, 4.32px));
    letter-spacing: min(0.2vw, 2.88px);
    margin: 0 min(0.6vw, 8.64px);
    color: var(--primary-brown);
}

/* 2段弁当（オススメなし） */
.nidan .bento_title img {
    display: none;
}


/* ===========================
 予約ボタン
 =========================== */
.section--bento > .reserve_btn {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    margin: min(7vw, 100.8px) auto;
    padding: 0;
    background: var(--primary-brown);
    border: none;
}

.section--bento > .reserve_btn a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: min(1.7vw, 24.48px);
    width: 100%;
    padding: min(2vw, 28.8px) min(3.3vw, 47.52px);
    box-sizing: border-box;
}

.section--bento > .reserve_btn p {
    writing-mode: horizontal-tb;
    white-space: nowrap;
    font-family: var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.1rem + min(0.4vw, 5.76px));
    letter-spacing: min(0.28vw, 4.032px);
    color: #fafaf8;
    line-height: 1;
    margin: 0;
}

.section--bento > .reserve_btn .btn_link {
    width: min(2vw, 28.8px);
    max-width: 28px;
    height: auto;
    flex-shrink: 0;
}


/* ===========================
 ケータリングリンク
 =========================== */
a.link_btn.catering {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 90%;
    max-width: 966px;
    height: min(16.5vw, 237.6px);
    min-height: 180px;
    margin: min(7vw, 100.8px) auto;
    padding: 0 min(3vw, 43.2px);
    background-image: url(../img/menu_catering.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
    text-decoration: none;
    gap: min(1.7vw, 24.48px);
}

.link_btn.catering::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(74, 61, 61, 0.75);
}

.link_btn.catering p {
    position: relative;
    z-index: 1;
}

.link_btn.catering > p:first-of-type {
    font-family: var(--fontFamilyJP);
    font-weight: 500;
    font-size: calc(1.1rem + min(0.4vw, 5.76px));
    letter-spacing: min(0.22vw, 3.168px);
    margin: 0;
    line-height: 1;
}

.link_btn.catering .link_text {
    font-family: var(--fontFamilyJP);
    font-weight: 500;
    font-size: calc(1.0rem + min(0.8vw, 11.52px));
    letter-spacing: min(0.3vw, 4.32px);
    display: inline-flex;
    align-items: center;
    gap: min(1.1vw, 15.84px);
    line-height: 1;
}

.link_btn.catering img {
    position: relative;
    z-index: 1;
    width: min(2.8vw, 40.32px);
    max-width: 40px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}


/* ===========================
 キャンセルポリシー
 =========================== */
#cancelPolisy {
    max-width: 1100px;
    width: 90%;
    margin: min(7vw, 100.8px) auto 0;
    padding: 0 5%;
    text-align: center;
}

#cancelPolisy > .canscelPolisy_title {
    font-family: var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.2rem + min(1.2vw, 17.28px));
    letter-spacing: min(0.5vw, 7.2px);
    line-height: 1.25;
    margin-bottom: min(2.8vw, 40.32px);
    position: relative;
    display: inline-block;
    color: var(--primary-brown);
    text-align: center;
}

#cancelPolisy > .canscelPolisy_title::before,
#cancelPolisy > .canscelPolisy_title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: min(4.2vw, 60.48px);
    height: 1px;
    background: var(--primary-brown);
}

#cancelPolisy > .canscelPolisy_title::before {
    left: calc(-1 * min(5.8vw, 83.52px));
}

#cancelPolisy > .canscelPolisy_title::after {
    right: calc(-1 * min(5.8vw, 83.52px));
}

#cancelPolisy > p:not(.canscelPolisy_title) {
    font-family: var(--fontFamilyJP);
    font-weight: 500;
    font-size: calc(1.0rem + min(0.4vw, 5.76px));
    line-height: 2.5;
    letter-spacing: min(0.18vw, 2.592px);
    text-align: left;
    color: var(--primary-brown);
}

#cancelPolisy > p:nth-of-type(2) {
    margin-bottom: 0;
}

.cancel_detail {
    background: transparent;
    padding: min(1.1vw, 15.84px) 0 min(1.1vw, 15.84px) min(2.5vw, 36px);
    margin: min(1.7vw, 24.48px) 0 min(2.2vw, 31.68px);
    text-align: left;
}

.cancel_detail p {
    font-family: var(--fontFamilyJP);
    font-weight: 700;
    font-size: calc(1.0rem + min(0.4vw, 5.76px));
    line-height: 2.5;
    letter-spacing: min(0.18vw, 2.592px);
    position: relative;
    padding-left: min(2.5vw, 36px);
}

.cancel_detail p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: min(1.2vw, 17.28px);
    height: min(1.2vw, 17.28px);
    background: var(--primary-lightbrown);
    transform: translateY(-50%) rotate(45deg);
}

#cancelPolisy > p:last-of-type {
    font-family: var(--fontFamilyJP);
    font-weight: 500;
    font-size: calc(1.0rem + min(0.4vw, 5.76px));
    line-height: 2.5;
    letter-spacing: min(0.18vw, 2.592px);
    color: var(--primary-brown);
}


/* =================================
 Tablet (769px〜1200px)
 ================================= */

@media screen and  (max-width:1200px) {

    .section--bento {
        padding: 8vw 0 6vw;
    }

    .bento_about {
        margin-bottom: 6vw;
    }

    .menu_title p {
        font-size: calc(1.2rem + 1vw);
    }

    .bento_about > p:last-of-type {
        font-size: calc(1rem + 0.6vw);
    }

    .bento_contents {
        width: 92%;
        margin: 0 auto 5vw;
    }

    .bento_block {
        padding: 5vw 4vw;
    }

    .bento_body {
        gap: 4vw;
    }

    .bento_body > img {
        width: 32vw;
        max-width: 340px;
    }

    .nidan .bento_body > img {
        width: 35vw;
        max-width: 380px;
    }

    .bento_detail .price {
        font-size: calc(2rem + 1vw);
        margin-bottom: 2.5vw;
    }

    .bento_detail .okazu,
    .bento_detail .rice_band {
        width: 22vw;
        min-width: 220px;
    }

    .bento_title img {
        width: 90px;
        top: -45px;
    }

    /* 予約ボタン */

    .section--bento > .reserve_btn {
        margin: 8vw auto;
    }

    .section--bento > .reserve_btn a {
        padding: 2.2vw 4vw;
    }

    /* ケータリング */

    a.link_btn.catering {
        width: 92%;
        height: 22vw;
        min-height: 220px;
        margin: 8vw auto;
    }

    .link_btn.catering .link_text {
        font-size: calc(1rem + 0.8vw);
    }

    /* キャンセルポリシー */

    #cancelPolisy {
        width: 92%;
        margin: 8vw auto 0;
    }

    #cancelPolisy > .canscelPolisy_title {
        font-size: calc(1.2rem + 1vw);
    }

}




/* ===========================
 レスポンシブ
 =========================== */
@media screen and (max-width: 768px) {

    /* メインビジュアル */
    .mainImg_box {
        width: 100vw;
    }

    .article__header > .mainImg_PC {
        display: block;
        margin: 15vw 0 0;
        width: 15vw;
    }

    .mainImg_box .oshinagaki_title {
        height: 50%;
    }

    /* お弁当セクション */
    .recommend {
    position: absolute;
    width: 30vw;
    top: -3.8vw;
    left: calc(50% + 3.5vw);
    transform: rotate(8deg);
    height: auto;
    z-index: 1000;
}

    .section--bento {
        padding: 16vw 0vw 0;
    }

    .section--bento > .diamond {
        width: 66vw;
        height: 66vw;
    }

    .section--bento > .diamond:first-of-type {
        top: -26vw;
        left: -40vw;
    }

    .section--bento > .diamond:last-of-type {
        bottom: 53vw;
        left: -40vw;
    }

    .section--bento > .illust_dot {
        width: 32vw;
    }

    .section--bento > .illust_dot:first-of-type {
        top: 0.5vw;
        left: -5vw;
    }

    .section--bento > .illust_dot:last-of-type {
        bottom: 97vw;
        left: -9vw;
    }

    .menu_title {
        gap: 4.2vw;
        margin-bottom: 5.3vw;
    }

    .menu_title img {
        width: 13vw;
    }

    .menu_title p {
        font-size: calc(1.0rem + 2.2vw);
        letter-spacing: 0.4rem;
    }

    .bento_about {
        margin-bottom: 10.6vw;
    }

    .bento_about > p:last-of-type {
        font-size: calc(1.1rem + 0.8vw);
        letter-spacing: 0.28rem;
        line-height: 2.4;
    }

    /* お弁当ブロック */

    .bento_flex {
        display: block;
    }

    .bento_flex .bento_contents {
    max-width: 90%;
    padding: 0;
    margin: 0 auto 8.5vw;
}


    .bento_contents {
        padding: 0 5.3%;
        margin: 0 auto 8.5vw;
        max-width: 100%;
        width: 100%;
    }

    .bento_block {
        padding: 13vw 5.3vw 10.6vw;
        gap: 0;
        max-width: 95%;
    }

    .bento_body {
        flex-direction: column;
        gap: 4.2vw;
    }

    .bento_body > img,
    .nidan .bento_body > img {
        width: 64vw;
        max-width: 240px;
    }

    .bento_detail {
        max-width: 100%;
        width: 100%;
    }

    .bento_detail .price {
        font-size: calc(1.6rem + 3.2vw);
        letter-spacing: 0.56rem;
        margin-bottom: 6.4vw;
    }

    .bento_detail .price span {
        font-size: calc(1.1rem + 0.3vw);
        letter-spacing: 0.28rem;
    }

    .bento_detail .okazu {
        font-size: calc(1.1rem + 0.8vw);
        letter-spacing: 0.28rem;
        line-height: 1.78;
        padding: 3.2vw;
        width: 64vw;
        max-width: 240px;
        height: auto;
        min-height: 78px;
    }

    .bento_detail .plus {
        width: 3.2vw;
        height: 3.2vw;
        margin: 2.6vw auto;
    }

    .bento_detail .rice_band {
        padding: 3.2vw;
        width: 64vw;
        max-width: 240px;
        height: auto;
        min-height: 78px;
    }

    .bento_detail .koshihikari {
        font-size: calc(1.1rem + 0.3vw);
        letter-spacing: 0.26rem;
        margin-bottom: 1vw;
    }

    .bento_detail .rice {
        font-size: calc(1.1rem + 0.8vw);
        letter-spacing: 0.28rem;
    }

    .bento_detail .rice span {
        font-size: calc(1.1rem + 0.3vw);
        letter-spacing: 0.24rem;
        margin: 0 2vw;
    }

    .bento_title {
        margin-bottom: 6.4vw;
    }

    .bento_title p {
        font-size: calc(1.0rem + 2.2vw);
        letter-spacing: 0.4rem;
    }

    .bento_title img {
        width: 20vw;
        max-width: 75px;
        top: -9.3vw;
        left: calc(50% + 8vw);
        transform: rotate(8deg);
    }

    /* 予約ボタン */
    .section--bento > .reserve_btn {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        margin: 16vw 0;
        padding: 5.3vw;
    }

    .section--bento > .reserve_btn a {
        flex-direction: row;
        gap: 3.2vw;
        padding: 0;
        min-height: 0;
    }

    .section--bento > .reserve_btn p {
        writing-mode: horizontal-tb !important;
        font-size: calc(1.1rem + 0.8vw);
        letter-spacing: 0.32rem;
    }

    .section--bento > .reserve_btn .btn_link {
        width: 5.8vw;
        max-width: 22px;
    }

    /* ケータリング */
    a.link_btn.catering {
        height: 42.6vw;
        min-height: 160px;
        max-width: 336px;
        width: 89.6vw;
        padding: 0 5.3vw;
        margin: 16vw auto;
        gap: 3.7vw;
    }

    .link_btn.catering > p:first-of-type {
        font-size: calc(1.1rem + 0.3vw);
        letter-spacing: 0.18rem;
    }

    .link_btn.catering .link_text {
        font-size: calc(1.1rem + 0.8vw);
        letter-spacing: 0.24rem;
        gap: 3.2vw;
    }

    .link_btn.catering img {
        width: 7.7vw;
        max-width: 29px;
    }

    /* キャンセルポリシー */
    #cancelPolisy {
        margin: 16vw auto 0;
        max-width: 100%;
        width: 90%;
        padding: 0 2.7%;

    }

    #cancelPolisy > .canscelPolisy_title {
        font-size: calc(1.0rem + 2.2vw);
        letter-spacing: 0.4rem;
        margin-bottom: 6.4vw;
    }

    #cancelPolisy > .canscelPolisy_title::before,
    #cancelPolisy > .canscelPolisy_title::after {
        width: 10.6vw;
    }

    #cancelPolisy > .canscelPolisy_title::before {
        left: -14.6vw;
    }

    #cancelPolisy > .canscelPolisy_title::after {
        right: -14.6vw;
    }

    #cancelPolisy > p:not(.canscelPolisy_title),
    .cancel_detail p {
        font-size: calc(0.45rem + 1.4vw);
        letter-spacing: 0.165rem;
        line-height: 3;
    }

    .cancel_detail {
        padding: 3.2vw 0 3.2vw 0vw;
        margin: 4.2vw 0 5.3vw;
    }

    .cancel_detail p {
        padding-left: 6.4vw;
        font-weight: 700;
        letter-spacing: 0.15rem;
    }

    .cancel_detail p::before {
        width: 3.2vw;
        height: 3.2vw;
    }

    #cancelPolisy > p:last-of-type {
        font-size: calc(0.45rem + 1.4vw);
        letter-spacing: 0.165rem;
    }
}

/* =========================
   NOTE
   PC側のvwは1440pxを上限に固定。
   1200px以下のTablet / 768px以下のSP指定は元のまま。
========================= */