@charset "utf-8";
/* CSS Document */

:root {
    --paper: #FBF7EE;
    --surface: #FFFFFF;
    --surface-soft: #F4EFE4;
    --ink: #26231F;
    --ink-soft: #625D55;
    --line: #DED6C8;
    --orange: #D95F2B;
    --orange-dark: #B94B20;
    --green: #275B52;
    --green-dark: #113730;
    --yellow: #E5B84B;
    --red: #C8463A;
    --navy: #142D5A;
    --shadow: 0 8px 24px rgba(55, 45, 32, .08);
}
.shoplist {
    background: var(--paper);
    border-top: 1px solid var(--line);
}
.machibar_header {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 30px;
    @media (width <= 999px) {
        grid-template-columns: 1fr;
    }
    .machibar_header-text {
        h2 {
            margin-bottom: 15px;
            font-size: 5rem;
            font-weight: bold;
            line-height: 1.28;
            @media (width <= 999px) {
                font-size: 3.2rem;
            }
            span {
                margin-bottom: 15px;
                font-size: 1.4rem;
                font-weight: bold;
                color: var(--green);
                letter-spacing: 2px;
                display :flex;
                align-items :center;
                position: relative;
                @media (width <= 999px) {
                    font-size: 1.3rem;
                }
                &::before {
                    content: "";
                    background: var(--orange);
                    margin-right: 10px;
                    width: 30px;
                    height: 3px;
                    display: block;
                }
            }
        }
    }
    .machibar_header-img {
        img {
            vertical-align: bottom;
        }
    }
}

.machibar_footer {
    background: #FFF2E8;
    border: 1px solid #E8C2AE;
    border-left: 6px solid var(--orange);
    border-radius: 8px;
    margin-top: 38px;
    padding: 26px 22px;
    text-align: center;
    p {
        margin: 0 0 14px;
        font-weight: bold;
        color: var(--ink);
    }
}

.machibar_header, .machibar_footer {
    .ticket_button {
        font-weight: bold;
        a {
            background: var(--orange);
            border: 2px solid var(--orange);
            border-radius: 6px;
            margin-right: 15px;
            padding: 11px 35px 11px 20px;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 0 4px 0 var(--orange-dark);
            position: relative;
            @media (width <= 999px) {
                margin-bottom: 15px;
                margin-right: 0;
                text-align: center;
                display: block;
            }
            &:hover {
                background: var(--orange-dark);
                transform: translateY(-1px);
            }
            &::before {
                content: "→";
                position: absolute;
                right: 10px;
            }
            &:last-child {
                margin-right: 0;
            }
            &.ticket_reserve {
            }
            &.ticket_more {
                background: var(--green);
                border: 2px solid var(--green);
                box-shadow: 0 4px 0 var(--green-dark);
                &:hover {
                    background: var(--green-dark);
                }
            }
        }
    }
    .join-store {
        font-weight: bold;
        span {
            margin-left: 10px;
            color: #275B52;
            display: inline-block;
            @media (width <= 999px) {
                margin-left: 0;
                text-align: center;
                display: block;
            }
            i {
                margin: 0 5px;
                font-size: 3.0rem;
            }
        }
    }
}

.machibar_map {
    h2 {
        border-bottom: 3px solid #26231F;
        margin-bottom: 20px;
        padding-bottom: 15px;
        font-size: 2.5rem;
        font-weight: bold;
    }
    iframe {
        margin-bottom: 0;
    }
}

.machibar-shops_list-header {
    border-bottom: 3px solid #26231F;
    margin-bottom: 20px;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    h2 {
        font-size: 2.5rem;
        font-weight: bold;
    }
    p {
        margin: 0!important;
    }
}

.machibar-shops_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    @media (width <= 999px) {
        grid-template-columns: 1fr;
    }
    li {
        background: var(--surface);
        border: 1px solid var(--line);
        border-top: 5px solid var(--orange);
        border-radius: 8px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        box-shadow: var(--shadow);
        .shopbox {
            .shopbox-photo {
                position: relative;
                span {
                    background: var(--green);
                    border-radius: 4px;
                    padding: 5px 15px;
                    font-size: 1.3rem;
                    font-weight: 800;
                    color: #fff;
                    letter-spacing: .02em;
                    position: absolute;
                    top: 10px;
                    left: 10px;
                }
                img {
                    vertical-align: bottom;
                }
            }
            .shopbox-content {
                padding: 15px;
                .shopbox-content_name {
                    margin-bottom: 10px;
                    font-size: 1.8rem;
                    font-weight: bold;
                    a {
                        text-decoration: none;
                        font-size: 1.3rem;
                        color: #000;
                        border: 1px solid #ccc;
                        border-radius: 3px;
                        padding: 3px 5px;
                        font-weight: normal;
                        position: relative;
                        top: -2px;
                        &:hover {
                            background: #000;
                            color: #fff;
                        }
                    }
                }
                .shopbox-content_menu {
                    margin-bottom: 10px;
                    font-size: 1.5rem;
                }
                .shopbox-content_price {
                    border-bottom: 3px solid #F0C969;
                    width: max-content;
                    margin-bottom: 15px;
                    display: flex;
                    align-items: baseline;
                    gap: 4px;
                    span {
                        font-size: 1.8rem;
                        font-weight: bold;
                        color: var(--orange-dark);
                    }
                    i {
                        font-size: 1.2rem;
                    }
                }
                .shopbox-content_tickets {
                    margin-bottom: 20px;
                    span {
                        border-radius: 999px;
                        margin-bottom: 5px;
                        margin-right: 10px;
                        padding: 5px 10px;
                        color: #6D5135;
                        line-height: 1.2;
                        font-size: 1.2rem;
                        font-weight: 700;
                        display: inline-block;
                        &.tickets_reserve {
                            background: #EAF7F3;
                            border: 1px solid #AFCFC6;
                            color: #246B5A;
                        }
                        &.tickets_takeout {
                            background: #FFF1E6;
                            border: 1px solid #E8B78D;
                            color: #A84F16;
                        }
                        &.tickets_coupon {
                            background: #FFF0F4;
                            border: 1px solid #E5B8C5;
                            color: #9A3D5A;
                        }
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
                .shopbox-content_info {
                    border-top: 1px solid var(--line);
                    margin-top: auto;
                    padding-top: 10px;
                    font-size: 1.3rem;
                    > div {
                        margin-top: 10px;
                        display: grid;
                        grid-template-columns: 72px minmax(0,1fr);
                        gap: 10px;
                        span {
                            &:nth-child(1) {
                                font-weight: bold;
                                color: var(--green);
                            }
                            &:nth-child(2) {
                                
                            }
                        }
                    }
                }
            }
        }
    }
}