/* ==================================================
   RECIPES PAGE
================================================== */

.recipes {
    background-color: #fdf5eb;
    margin-top: 120px;
    min-height: calc(100vh - 240px);
    padding-bottom: 80px;
}


/* ==================================================
   RECIPE INTRO
================================================== */

.recipe-intro {
    width: 100%;
    margin: 0 auto 70px;
    padding: 0;
    background-color: #fdf5eb;
}


/* ==================================================
   INTRO TOP
================================================== */

.recipe-intro-top {
    padding: 45px 30px 50px;
    text-align: center;
}


/* ==================================================
   INTRO TOP TITLE
================================================== */

.recipe-intro-top h2 {
    margin: 0;

    font-family:
        acme-gothic-wide,
        Georgia,
        "Times New Roman",
        Times,
        serif;

    font-size: clamp(40px, 5vw, 74px);
    font-weight: 700;
    line-height: 1.08;

    color: #f6b82e;

    text-align: center;
}


/* ==================================================
   ITALIAN FLAG DECORATION
================================================== */

.recipe-title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(580px, 65%);

    margin: 34px auto 0;
}


/* RED LINES */

.recipe-title-decoration .line {
    display: block;

    height: 4px;

    background-color: #e51b23;

    flex: 1;
}


/* FLAG AREA */

.recipe-title-decoration .flag {
    display: flex;

    gap: 8px;

    margin: 0 36px;
}


/* FLAG BLOCKS */

.recipe-title-decoration .flag i {
    display: block;

    width: 43px;
    height: 10px;
}


/* GREEN */

.recipe-title-decoration .flag-green {
    background-color: #50b894;
}


/* WHITE */

.recipe-title-decoration .flag-white {
    background-color: #ffffff;
}


/* RED */

.recipe-title-decoration .flag-red {
    background-color: #e35b42;
}


/* ==================================================
   MAIN VISUAL
================================================== */

.recipe-mv {
    position: relative;

    width: 100%;

    /*
    PCでは横長のメインビジュアルとして表示
    */

    aspect-ratio: 2 / 1;

    overflow: hidden;

    background-color: #fdf5eb;
}


/* MAIN VISUAL IMAGE */

.recipe-mv img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    /*
    ボトルを中心に配置
    */

    object-position: 50% 30%;
}


/* ==================================================
   INTRO BOTTOM
================================================== */

.recipe-intro-bottom {
    padding: 50px 30px 55px;

    text-align: center;
}


/* ==================================================
   INTRO BOTTOM TITLE
================================================== */

.recipe-intro-bottom h2 {
    margin: 0;

    font-family:
        acme-gothic-wide,
        Georgia,
        "Times New Roman",
        Times,
        serif;

    font-size: clamp(40px, 5vw, 74px);
    font-weight: 700;
    line-height: 1.08;

    color: #445bdc;

    text-align: center;
}


/* ==================================================
   RECIPE AREA
================================================== */

.recipes #recipeItem {
    width: 100%;
}


/* ==================================================
   RECIPE LIST
================================================== */

.recipes #recipeItem .recipeItemList {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    column-gap: 70px;
    row-gap: 55px;

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 40px;

    list-style: none;

    box-sizing: border-box;
}


/* ==================================================
   RECIPE CARD
================================================== */

.recipes #recipeItem .recipe-card {
    /*
    PC 3列
    */

    width: calc((100% - 140px) / 3);

    margin: 0;

    padding: 0;

    text-align: center;

    box-sizing: border-box;
}


/* ==================================================
   RECIPE THUMBNAIL
================================================== */

.recipes #recipeItem .recipe-photo {
    display: block;

    position: static;

    width: 100%;
    height: auto;

    margin: 0 0 18px;

    padding: 0;
}


/* ==================================================
   RECIPE TITLE
================================================== */

.recipes #recipeItem .recipe-card h3 {
    margin: 0 0 9px;

    padding: 0;

    color: #445bdc;

    font-family:
        acme-gothic-wide,
        Georgia,
        "Times New Roman",
        Times,
        serif;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.1;

    text-align: center;
}


/* ==================================================
   RECIPE DESCRIPTION
================================================== */

.recipes #recipeItem .recipe-card p {
    /*
    説明文が1行・2行の場合でも
    EXPLOREボタンの位置を揃える
    */

    min-height: 48px;

    margin: 0 0 20px;

    padding: 0;

    color: #e51b23;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.35;

    text-align: center;
}


/* ==================================================
   EXPLORE BUTTON
================================================== */

.recipes #recipeItem .explore-btn {
    display: inline-block;

    min-width: 145px;

    margin: 0;

    padding: 11px 24px;

    border: 0;

    border-radius: 0;

    background-color: #e51b23;

    color: #ffffff;

    font-family:
        acme-gothic-wide,
        Georgia,
        "Times New Roman",
        Times,
        serif;

    font-size: 18px;

    font-weight: 700;

    line-height: 1;

    text-align: center;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color .25s ease;
}


/* ==================================================
   EXPLORE BUTTON HOVER
================================================== */

.recipes #recipeItem .explore-btn:hover,
.recipes #recipeItem .explore-btn:focus {
    background-color: #445bdc;

    color: #ffffff;
}


/* ==================================================
   MODAL
================================================== */

.recipe-modal {
    position: fixed;

    z-index: 99999;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background-color: rgba(0, 0, 0, .78);

    box-sizing: border-box;

    /*
    通常は非表示
    */

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


/* ==================================================
   MODAL OPEN
================================================== */

.recipe-modal.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ==================================================
   MODAL INNER
================================================== */

.recipe-modal-inner {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: auto;

    max-width: 95vw;

    max-height: 90vh;
}


/* ==================================================
   MODAL IMAGE
================================================== */

.recipe-modal-inner img {
    display: block;

    width: auto;

    height: auto;

    max-width: 90vw;

    max-height: 88vh;

    margin: 0;

    object-fit: contain;
}


/* ==================================================
   MODAL CLOSE BUTTON
================================================== */

.recipe-modal-close {
    position: absolute;

    z-index: 10;

    top: -20px;

    right: -20px;

    width: 46px;

    height: 46px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background-color: #e51b23;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 32px;

    font-weight: 400;

    line-height: 44px;

    text-align: center;

    cursor: pointer;

    transition:
        background-color .25s ease;
}


/* CLOSE BUTTON HOVER */

.recipe-modal-close:hover,
.recipe-modal-close:focus {
    background-color: #445bdc;
}


/* ==================================================
   STOP PAGE SCROLL WHEN MODAL OPEN
================================================== */

body.modal-open {
    overflow: hidden;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

    /* ------------------------------------------
       INTRO
    ------------------------------------------ */

    .recipe-intro-top {
        padding: 40px 25px 40px;
    }


    .recipe-intro-top h2 {
        font-size: clamp(34px, 7vw, 55px);
    }


    .recipe-title-decoration {
        width: 65%;

        margin-top: 28px;
    }


    .recipe-title-decoration .flag {
        gap: 6px;

        margin: 0 22px;
    }


    .recipe-title-decoration .flag i {
        width: 32px;

        height: 8px;
    }


    /* ------------------------------------------
       MAIN VISUAL

       タブレットでは少し縦方向を広くする
    ------------------------------------------ */

    .recipe-mv {
        aspect-ratio: 16 / 9;
    }


    .recipe-mv img {
        object-position: 50% 52%;
    }


    .recipe-intro-bottom {
        padding: 42px 25px 48px;
    }


    .recipe-intro-bottom h2 {
        font-size: clamp(34px, 7vw, 55px);
    }


    /* ------------------------------------------
       RECIPE LIST
    ------------------------------------------ */

    .recipes #recipeItem .recipeItemList {
        column-gap: 35px;

        padding-left: 30px;

        padding-right: 30px;
    }


    .recipes #recipeItem .recipe-card {
        width: calc((100% - 70px) / 3);
    }


    .recipes #recipeItem .recipe-card h3 {
        font-size: 24px;
    }


    .recipes #recipeItem .recipe-card p {
        font-size: 15px;
    }

}


/* ==================================================
   MOBILE / SMALL TABLET
================================================== */

@media (max-width: 991.98px) {

    /* ------------------------------------------
       PAGE
    ------------------------------------------ */

    .recipes {
        margin-top: 72px;

        min-height: calc(100vh - 144px);

        padding-bottom: 60px;
    }


    /* ------------------------------------------
       INTRO
    ------------------------------------------ */

    .recipe-intro {
        margin-bottom: 55px;
    }


    /* ------------------------------------------
       RECIPE LIST
    ------------------------------------------ */

    .recipes #recipeItem .recipeItemList {
        display: block;

        max-width: none;

        margin: 0;

        padding: 0 6vw;
    }


    .recipes #recipeItem .recipe-card {
        width: 100%;

        max-width: 500px;

        margin: 0 auto 60px;
    }


    .recipes #recipeItem .recipe-photo {
        width: 100%;

        margin-bottom: 18px;
    }


    .recipes #recipeItem .recipe-card h3 {
        font-size: 28px;

        margin-bottom: 9px;
    }


    .recipes #recipeItem .recipe-card p {
        min-height: 0;

        margin-bottom: 22px;

        font-size: 17px;
    }


    .recipes #recipeItem .explore-btn {
        min-width: 145px;

        font-size: 18px;
    }


    /* ------------------------------------------
       MODAL
    ------------------------------------------ */

    .recipe-modal {
        padding: 25px 15px;
    }


    .recipe-modal-inner {
        max-width: 100%;

        max-height: 92vh;
    }


    .recipe-modal-inner img {
        max-width: 94vw;

        max-height: 88vh;
    }


    .recipe-modal-close {
        top: -18px;

        right: -5px;

        width: 42px;

        height: 42px;

        font-size: 29px;

        line-height: 40px;
    }

}


/* ==================================================
   SMARTPHONE
================================================== */

@media (max-width: 600px) {

    /* ------------------------------------------
       INTRO
    ------------------------------------------ */

    .recipe-intro {
        margin-bottom: 45px;
    }


    .recipe-intro-top {
        padding: 32px 18px 34px;
    }


    .recipe-intro-top h2 {
        font-size: 8.5vw;

        line-height: 1.1;
    }


    /* ------------------------------------------
       ITALIAN FLAG DECORATION
    ------------------------------------------ */

    .recipe-title-decoration {
        width: 78%;

        margin-top: 22px;
    }


    .recipe-title-decoration .line {
        height: 3px;
    }


    .recipe-title-decoration .flag {
        gap: 4px;

        margin: 0 14px;
    }


    .recipe-title-decoration .flag i {
        width: 21px;

        height: 6px;
    }


    /* ------------------------------------------
       MAIN VISUAL

       スマートフォンでは写真全体を表示。

       object-fit: cover を使用しないことで
       中央のボトルと左右のグラスが
       切れないようにする。
    ------------------------------------------ */

    .recipe-mv {
        aspect-ratio: auto;

        overflow: visible;
    }


    .recipe-mv img {
        display: block;

        width: 100%;

        height: auto;

        object-fit: contain;

        object-position: center center;
    }


    /* ------------------------------------------
       BOTTOM TITLE
    ------------------------------------------ */

    .recipe-intro-bottom {
        padding: 36px 18px 42px;
    }


    .recipe-intro-bottom h2 {
        font-size: 8.5vw;

        line-height: 1.1;
    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 480px) {

    /* ------------------------------------------
       RECIPE LIST
    ------------------------------------------ */

    .recipes #recipeItem .recipeItemList {
        padding-left: 20px;

        padding-right: 20px;
    }


    .recipes #recipeItem .recipe-card {
        margin-bottom: 50px;
    }


    .recipes #recipeItem .recipe-card h3 {
        font-size: 24px;
    }


    .recipes #recipeItem .recipe-card p {
        font-size: 15px;
    }

}