@charset "utf-8";

/* -------------------------------------------------- */
/* modal */
/* -------------------------------------------------- */
.modaal-container{max-width:1220px;color:#332e2d!important;}
.modaal-content-container{padding:50px;}
.modaal-close{position:absolute;top:-20px;right:-20px;background:#332e2d!important;width:72px;height:72px;border:1px solid #332e2d!important;transition:.25s ease;}
.modaal-close:hover{background:#fff!important;}
.modaal-close:after,.modaal-close:before{width:2px;height:24px;top:50%;left:50%;margin:-12px 0 0 -1px;transition:.25s ease;}
.modaal-close:hover:after,.modaal-close:hover:before{background:#332e2d;}
.block-modal{display:none;}
.block-modal-contents .modal-ttl{font-size:3.6rem;font-weight:bold;text-align:center;line-height:1.4;border-bottom:1px solid #332e2d;padding-bottom:15px;margin-bottom:25px;}
.block-modal-contents .modal-ttl span{font-size:1.4rem;padding:5px 30px 4px;display:inline-block;border:1px solid #332e2d;white-space:nowrap;line-height:1;margin-bottom:12px;}
.block-modal-contents .modal-menu{font-size:2.4rem;font-weight:bold;display:flex;flex-direction:row-reverse;justify-content:center;flex-wrap:wrap;gap:30px;margin:auto;}
.block-modal-contents .modal-menu dl{display:flex;flex-direction:column;}
.block-modal-contents .modal-menu dt{min-height:6.4em;letter-spacing:0.2em;writing-mode: vertical-rl;-ms-writing-mode: tb-rl;white-space:nowrap;}
.block-modal-contents .modal-menu dd{letter-spacing:0.2em;writing-mode: vertical-rl;-ms-writing-mode: tb-rl;}
.block-modal-contents .modal-attention{font-size:1.4rem;font-weight:bold;margin-top:35px;}
.block-modal-contents .modal-name{font-size:1.8rem;font-weight:bold;text-align:right;margin-top:15px;}

@media screen and (min-width:1px) and (max-width:1199px){
  .block-modal-contents .modal-menu{gap:15px;}
}
@media screen and (min-width:1px) and (max-width:999px){
  .block-modal-contents .modal-ttl{font-size:3rem;}
  .block-modal-contents .modal-menu{font-size:2rem;gap:5px;}
}
@media screen and (min-width:1px) and (max-width:767px){
  .modaal-content-container{padding:40px;}
  .block-modal-contents .modal-menu{font-size:1.8rem;gap:2px;}
}
@media screen and (min-width:1px) and (max-width:622px){
  .modaal-content-container{padding:20px;}
  .modaal-close{width:40px;height:40px;top:-10px;right:-10px;}
  .modaal-close:after,.modaal-close:before{height:18px;margin:-9px 0 0 -1px;}
  .block-modal-contents .modal-ttl{font-size:2.4rem;padding-bottom:8px;margin-bottom:20px;}
  .block-modal-contents .modal-menu{font-size:1.4rem;display:block;}
  .block-modal-contents .modal-menu dl{flex-direction:row;text-align:left;}
  .block-modal-contents .modal-menu dl + dl{margin-top:3px;}
  .block-modal-contents .modal-menu dt{min-height:1px;min-width:6.4em;letter-spacing:0.05em;writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;}
  .block-modal-contents .modal-menu dd{flex:1;letter-spacing:0.05em;writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;}
  .block-modal-contents .modal-attention{font-size:1.2rem;margin-top:20px;font-weight:normal;}
  .block-modal-contents .modal-name{font-size:1.4rem;}
}

/* -------------------------------------------------- */
/* #block-drink */
/* -------------------------------------------------- */
#block-drink .list-drink{display:flex;gap:0 40px;}
#block-drink .list-drink > div{width:calc((100% - 80px) / 3);}
#block-drink .list-drink > div.wide-type{width:100%;}
#block-drink .list-drink .ttl{font-size:2.4rem;font-weight:bold;margin-bottom:-5px;}
#block-drink .list-drink .list-sub + .ttl{margin-top:50px;}
#block-drink .list-drink .list-sub:first-child{margin-top:-15px;}
#block-drink .list-drink .list-sub > li{padding:25px 0;font-size:1.4rem;line-height:1.57;border-bottom:1px solid #dedddf;display:flex;align-items:center;justify-content:space-between;gap:35px;}
#block-drink .list-drink .list-sub > li .inner{flex:1;}
#block-drink .list-drink .list-sub > li .name{font-size:1.8rem;font-weight:bold;}
#block-drink .list-drink .list-sub > li .name + p{margin-top:5px;}
#block-drink .list-drink .list-sub > li .name2{font-size:1.8rem;font-weight:bold;display:flex;gap:20px;}
#block-drink .list-drink .list-sub > li .name2 > div{flex:1;}
#block-drink .list-drink .list-sub > li .name2 > div span{display:block;}
#block-drink .list-drink .list-sub > li .name2 > div span + span{margin-top:8px;}
#block-drink .list-drink .list-sub > li .price{font-size:1.8rem;font-weight:bold;white-space:nowrap;text-align:right;}
#block-drink .list-drink .list-sub > li .price .label{font-size:1.4rem;font-weight:bold;white-space:nowrap;display:inline-block;border:1px solid #332e2d;text-align:center;line-height:1;padding:3px 6px 1px;margin-bottom:3px;}
#block-drink .list-drink > div.wide-type .list-sub{display:flex;gap:0 40px;flex-wrap:wrap;}
#block-drink .list-drink > div.wide-type .list-sub > li{width:calc((100% - 80px) / 3);}
#block-drink .list-drink > div.wide-type .list-sub > li.wide{width:100%;}

#block-drink .box-free{margin-top:120px;border:1px solid #332e2d;text-align:center;padding:50px 40px;font-size:1.8rem;font-weight:bold}
#block-drink .box-free .ttl{font-size:3.2rem;font-weight:bold;margin-bottom:30px;}
#block-drink .box-free p{line-height:2;}
#block-drink .box-free .bottom{margin-top:35px;}
#block-drink .box-free .label span{font-size:1.6rem;display:inline-block;border:1px solid #332e2d;line-height:1.4;padding:4px 8px 2px;margin-bottom:8px;}
#block-drink .box-free .price{font-size:1.6rem;}
#block-drink .box-free .price .num{font-size:2.4rem;}
#block-drink .attention{font-size:1.4rem;text-align:right;margin-top:30px;}

@media screen and (min-width:1px) and (max-width:999px){
  #block-drink .list-drink .ttl{font-size:2rem;}
  #block-drink .list-drink .list-sub > li{flex-direction:column;justify-content:space-between;padding:25px 0 15px;}
  #block-drink .list-drink .list-sub > li .name,
  #block-drink .list-drink .list-sub > li .name2{font-size:1.6rem;}
  #block-drink .list-drink .list-sub > li .price{font-size:1.6rem;margin-top:5px;width:100%;}
  #block-drink .box-free .ttl{font-size:2.8rem;}
}
@media screen and (min-width:1px) and (max-width:767px){
  #block-drink .list-drink{display:block;}
  #block-drink .list-drink > div{width:100%;}
  #block-drink .list-drink > div + div{margin-top:40px;}
  #block-drink .list-drink .list-sub > li{flex-direction:row;padding:20px 0;}
  #block-drink .list-drink .list-sub > li .name2{display:block;}
  #block-drink .list-drink .list-sub > li .price{width:auto;}
  #block-drink .list-drink > div.wide-type .list-sub{display:block;}
  #block-drink .list-drink > div.wide-type .list-sub > li{width:100%;}
  #block-drink .box-free{margin-top:80px;}

  #block-drink .ttl.ttl-sp-none{display:none;}
  #block-drink .list-drink > div + div.div-sp-up{margin-top:0!important;}
}
@media screen and (min-width:1px) and (max-width:622px){
    #block-drink .list-drink .list-sub > li{padding:15px 0;gap:20px;}
    #block-drink .list-drink .list-sub + .ttl{margin-top:40px;}
    #block-drink .list-drink .list-sub > li p{font-size:1.2rem;}
    #block-drink .list-drink .list-sub > li .name,
    #block-drink .list-drink .list-sub > li .name2{font-size:1.4rem;line-height:1.5;}
    #block-drink .list-drink .list-sub > li .name + p{margin-top:2px;}
    #block-drink .list-drink .list-sub > li .price{font-size:1.4rem;}
    #block-drink .list-drink .list-sub > li .price .label{font-size:1.2rem;}

    #block-drink .box-free{margin-top:50px;padding:30px 20px;font-size:1.4rem;}
    #block-drink .box-free .ttl{font-size:2.2rem;margin-bottom:20px;}
    #block-drink .box-free .label span{font-size:1.4rem;}
    #block-drink .box-free .bottom{margin-top:25px;}
    #block-drink .box-free .price{font-size:1.4rem;}
    #block-drink .box-free .price .num{font-size:2rem;}
    #block-drink .attention{font-size:1.2rem;margin-top:20px;}
}