/* =========================
  TOP menu
========================= */
.topMenu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 800px;
  margin: auto;
}
.menu__item {
position: relative;
  text-align: center;
}
.menu__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50px;
  background-color: #ddd;
}
.menu__item:nth-child(4n)::after {
  display: none;
}
.menu__link {
  display: flex;
  flex-direction: column;
  align-items: center;         
  justify-content: flex-start;  
  padding: 16px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #2f2725;
  font-weight: bold;
  transition: background-color 0.2s ease;
  font-size: 11px;
  line-height: 1.3;
}
.menu__link:hover {
  background-color: #f3f3f3;
}
.menu__link::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.menu__item--reserve .menu__link::before {
  background-image: url("../images/icon_m01.svg");
}

.menu__item--buy .menu__link::before {
  background-image: url("../images/icon_m02.svg");
}
.menu__item--price .menu__link::before {
  background-image: url("../images/icon_m03.svg");
}

.menu__item--regular .menu__link::before {
  background-image: url("../images/icon_m04.svg");
}

.menu__item--history .menu__link::before {
  background-image: url("../images/icon_m05.svg");
}

.menu__item--point .menu__link::before {
  background-image: url("../images/icon_m06.svg");
}

.menu__item--coupon .menu__link::before {
  background-image: url("../images/icon_m07.svg");
}

.menu__item--setting .menu__link::before {
  background-image: url("../images/icon_m08.svg");
}

/* =========================
  TOP 予約/配送状況
========================= */
.section--status{
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom:15px;
}
.reserve-ttl{
    padding: 2px 5px 2px 0;
    border-right:solid 1px #ddd;
    font-weight: bold;
    font-size: .9em;
    margin-right:10px;
}
.reserve{
    background-color: #fff;
    padding: 15px;
    border:1px solid #ececec;
}
.reserve--no{
text-align: center;
padding: 20px 0 30px;
}
.reserve--no p{

}
.btn-area a.btn-sub{
    margin-right: 8px;
}
.reserve .btn-area {
    padding-top: 10px;
    margin-bottom: 7px;
}

.topStatus__reserve{
    margin-bottom:10px;
}
.topStatus__reserve--ttl{
    padding:5px 0 5px 28px;
    background-image: url("../images/icon_bd01_rs.svg");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: left center;
}

.delivery-ttl{
    padding: 2px 5px 2px 0;
    border-right:solid 1px #ddd;
    font-weight: bold;
    font-size: .9em;
    margin-right:10px;
}
.delivery{
    background-color: #fff;
    padding: 15px;
    border:1px solid #ececec;
}
.topStatus__delivery--ttl{
    padding:5px 0 5px 28px;
    background-image: url("../images/icon_bd02_ds.svg");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: left center;
}
.deliveryStatus{
    font-weight: bold;
    color:#c43737;
}
.delivery--waiting{
  text-align: center;
  padding: 20px 0;
}
.delivery--no{
  text-align: center;
  padding: 20px 0;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.toast.is-show {
  opacity: 1;
}

@media screen and (min-width: 769px){
    .topStatus{
    display: flex;
    gap:15px;
    }
    .topStatus__reserve{
        max-width: 400px;
        width: 50%;
    }
    .topStatus__delivery{
        max-width: 400px;
        width: 50%;
    }
}

/* =========================
  TOP あなたへのおすすめ
========================= */
.section--recommend{
background-color: #fff;
    border-bottom: 1px solid #e2e2e2;
    padding-top: 10px;
    padding-bottom:50px;
}
.section--recommend h2{
  margin-bottom:5px;
}
/* =========================
  TOP LINE連携
========================= */
.section--alignment{
  margin-bottom:30px;
}
/*連携済*/
.lineLink__linkedMessage{
  background-color: #fff;
  padding: 25px 20px;
  text-align: center;
  border:1px solid #ececec;
}
.lineLink__linkedMessage span{
color:#595757;
font-weight: bold;
font-size: 1.1em;
background-image: url("../images/icon_check.svg");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: left center;
    padding-left: 30px;
}

/*未携済*/
.lineLink__unlinkedMessage{
  padding: 25px 10px 15px;
  text-align: center;
}
.lineLink__unlinkedMessage span{
  color:#595757;
font-size: .9em;
}
.lineLink--unlinked .btn-area{
text-align: center;
}

@media screen and (min-width: 769px){
.lineLink__linkedMessage{
  padding: 45px 40px;
}
.lineLink--unlinked{
  padding: 25px 40px;
}
}