@charset "utf-8";

#food{
    padding: 80px 0;
}

.grid.type_list{
    display: grid;
    grid-template-columns: repeat(3,max-content);
    gap: 5px;
    margin-bottom: 20px;
}

.grid.type_list li{
    color: #fff;
    border-radius: 10px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.ico_softdrink{
    background: #59c0d0;
}

.ico_basic_softdrink{
    background: #ee9641;
}

.ico_standard{
    background: #dba206;
}

.ico_premium{
    background: #e7477a;
}

.ico_off{
    background: #d3dadb;
}

.grid.drink_ct{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    margin-bottom: 50px;
    position: relative;
}

.soft_drink .grid.drink_ct,
.light_soft_drink .grid.drink_ct{
    background: #e1f0f8;
}

.soft_drink .drink_ttl,
.light_soft_drink .drink_ttl{
    font-weight: bold;
    color: #3277d5;
    border-bottom: #3277d5 5px solid;
}

.standard_soft_drink .grid.drink_ct{
    background: #fff0e2;
}

.standard_soft_drink .drink_ttl{
    font-weight: bold;
    color: #ee9641;
    border-bottom: #ee9641 5px solid;
}

.standard_drink .grid.drink_ct,
.standard_alcohol .grid.drink_ct{
    background: #f8ecb7;
}

.standard_drink .drink_ttl,
.standard_alcohol .drink_ttl{
    font-weight: bold;
    color: #dba206;
    border-bottom: #dba206 5px solid;
}

.premium_alcohol .grid.drink_ct,
.premium_soft_drink .grid.drink_ct{
    background: #fdf4f4;
}

.premium_alcohol .drink_ttl,
.premium_soft_drink .drink_ttl{
    font-weight: bold;
    color: #f27b9b;
    border-bottom: #f27b9b 5px solid;
}

.drink_list li{
    font-size: 12px;
    font-weight: bold;
}

.subtext {
    font-weight: normal;
    font-size: 0.8em;
}

.kids::after{
    content: "";
    display: inline-block;
    width: 16px;
    height: 13px;
    background: url(/images_2024r/food/drink/baby_ico.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-left: 5px;
    margin-bottom: 2px;
}

.bg_blue {
    background: #23b2c8;
}

.bg_orange {
    background: #ee9641;
}

.bg_red {
    background: #e7477a;
}

.fa-check {
    color: #fff;
    text-align: center;
    font-size: 16px;
}

.td_course {
    width: 100px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    position: relative;
    padding: 5px 1px;
    text-align: center;
    line-height: 1.5;
}

.td_slash {
    background-image: linear-gradient(18deg, /*角度*/ transparent 48%, white 49%, /*斜線の色*/ white 51%, /*斜線の色*/ transparent 52%, transparent);
}

.slach_ue {
    text-align: right;
    font-weight: bold;
    font-size: 12px;
    margin-right: 5px;
}

.slach_shita {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    margin-left: 5px;
}

.drink_types {
    color: #fff;
    font-size: 12px;
}

.box_select{
    background-color: #d3dadb;
    margin-bottom: 50px;
    margin-top: 80px;
}

.box_select tr td:last-of-type{
    border-right: none;
}

.box_select tr td:first-of-type{
    border-left: none;
}

.box_select tr:first-of-type td{
    border-top: none;
}

.box_select tr:last-of-type td{
    border-bottom: none;
}

.box_select tr:not(:first-of-type) > td:not(:first-of-type){
    text-align: center;
    vertical-align: middle;
}

.box_select td{
    border: solid 4px #fff;
    box-sizing: border-box;
    text-align: center;
}

.td_1st{
    border-left: none;
    padding: 0px 10px;
}

.ttl_drink{
    text-align: left;
    font-size: 12px;
    padding-left: 10px;
}

.btn_drink{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%;
    height: 20px;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 10px;
    text-align: left;
    padding-left: 10px;
    color: #fff;
    padding: 1px;
    border-radius: 5px;
}

.softdrink {
    background: #e1f0f8;
    outline: #7cc3ea 3px solid;
    outline-offset: -4px;
    padding: 0;
    text-align: left;
}

.basic_softdrink,
.premium_non {
    background: #fce5cf;
    outline: #f0ba03 3px solid;
    outline-offset: -4px;
    padding: 0;
    text-align: left;
}

.standard {
    background: #f8ecb7;
    outline: #f0ba03 3px solid;
    outline-offset: -4px;
    padding: 0;
    text-align: left;
}

.premium {
    background: #ffe8e9;
    outline: #f69fb5 3px solid;
    outline-offset: -4px;
    padding: 0;
    text-align: left;
}

.softdrink .btn_drink {
    background: #4bb5ef;
}

.basic_softdrink .btn_drink,
.premium_non .btn_drink {
    background: #ee9641;
}

.standard .btn_drink {
    background: #f0ba03;
}

.premium .btn_drink {
    background: #f27b9b;
}

.fa-angle-down:before{
    font-size: 14px;
    margin-left: 3px;
}

.no1::before {
    font-family: "Font Awesome 5 Free";
    content: "\f521\A＼人気NO.1／";
    white-space: pre;
    position: absolute;
    top: -40px;
    color: #8e6200;
    font-weight: bold;
    font-size: 11px;
    left: 7px;
    font-weight: bold;
}

.osusume::before {
    font-family: "Font Awesome 5 Free";
    content: "＼おすすめ／";
    white-space: pre;
    position: absolute;
    top: -23px;
    color: #ce3737;
    font-weight: bold;
    font-size: 11px;
    left: 12px;
    font-weight: bold;
}

.bg_logo {
    position: absolute;
    mix-blend-mode: overlay;
    width: 38%;
    left: 15%;
    top: 15%;
    transform: rotate(-15deg);
}

.bg_drink {
    position: absolute;
    width: 35%;
    right: 5%;
    bottom: 5%;
    transform: rotate(15deg);
}

.kids_note{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / 3;
    margin-top: 15px;
}

.soft_drink .kids_note .kids_note_text,
.light_soft_drink .kids_note .kids_note_text,
.standard_soft_drink .kids_note .kids_note_text {
    text-align: center;
    color: #333333;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    margin-right: 25px;
}

.type_list + img{
    width: 100%;
}

.grid.drink_ct > div{
    position: relative;
}

.drink_nav{
    margin: 50px 0;
}

.drink_nav_list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.drink_nav_list li{
    padding: 10px;
    height: 75px;
}

.drink_nav_list li a{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.drink_nav .ttl_drink{
    font-size: 12px;
    line-height: 1.2;
    padding-left: 0;
    text-align: center;
}

.drink_nav .btn_drink{
    width: 90px;
    margin-bottom: 0;
    margin-left: 0;
    margin: 0 auto;
}

.drink_nav .softdrink .ttl_drink{
    white-space: nowrap;
}

@media screen and (max-width: 1019px) {
    .td_1st{
        width: 36vw;
        padding: 5px 0;
    }
    .btn_drink{
        width: 74%;
        font-size: 9px;
    }
    .drink_types,
    .ttl_drink{
        font-size: 10px;
    }
    .td_course{
        width: 22vw;
    }
    .no1::before,
    .osusume::before{
        font-size: 10px;
        left: calc(50% - 36px);
    }
    .td_slash{
        position: relative;
    }
    .slach_ue{
        position: absolute;
        top:10px;
        right: 10px;
    }
    .slach_ue{
        position: absolute;
        top:10px;
        right: 10px;
    }
    .slach_shita{
        position: absolute;
        left: 10px;
        bottom:10px;
    }
    .ttl_drink{
        line-height: 1.5;
    }
    .kids_note{
        grid-template-columns: 1fr;
    }
    .soft_drink .kids_note .kids_note_text ,
    .light_soft_drink .kids_note .kids_note_text {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .soft_drink .kids_note .kids_note_text + img,
    .light_soft_drink .kids_note .kids_note_text + img{
        height: 70px;
    }
    .drink_nav_list{
        grid-template-columns: 1fr 1fr;
    }
    .drink_nav .ttl_drink{
        font-size: 12px;
    }
    .drink_osaka .grid.type_list{
        grid-template-columns: 1fr 1fr;
    }

}

.nomiho_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.drink_osaka .nomiho_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
}

.nomiho_list li {
    display: grid;
    grid-template-rows: subgrid;
}

.nomiho_list li a {
    display: grid;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    text-align: center;
}

.nomiho_list li .fa-caret-down {
    font-size: 20px;
}

.drink_wrap img.nomiho_img {
    width: 100%;
    min-height: 148px;
    max-height: 188px;
    object-fit: cover;
    object-position: top;
}

.drink_img_bx {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
}

.standard_soft_drink .kids_note {
    margin-bottom: 30px; 
}

.ttl_sec_02 > span {
    font-size: 12px;
    font-weight: normal;
}

.nomiho_tag {
    display: inline-block;
    margin: 0 3px 3px 0;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
}

@media screen and (max-width: 1019px) {
    .drink_img_bx {
        grid-template-columns: none;
    }
}