/* ----------------------------
   昨日・明日ボタン共通
---------------------------- */
.menu-yesterday a,
.menu-tomorrow a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 矢印画像 */
.menu-yesterday a { background-image: url('/wp-content/themes/cocoon-child-master/images/kinou.png'); }
.menu-tomorrow a { background-image: url('/wp-content/themes/cocoon-child-master/images/asita.png'); }

/* 中央文字（背景画像の中央に表示） */
.menu-yesterday a::after {
  content: '昨日';
  color: white;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}

.menu-tomorrow a::after {
  content: '明日';
  color: white;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}

/* 黒文字タイトルは非表示（spanタグの黒文字を消す） */
.menu-yesterday a > span,
.menu-tomorrow a > span {
  display: none;
}

/* ホバー時の明るさ */
.menu-yesterday a:hover,
.menu-tomorrow a:hover {
  filter: brightness(1.2);
}

/* ----------------------------
   レスポンシブ：スマホ
---------------------------- */
@media screen and (max-width: 480px){
    /* li 自体を flex にして中央揃え */
    .menu-yesterday,
    .menu-tomorrow {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* a 内も flex にして文字も中央 */
    .menu-yesterday a,
    .menu-tomorrow a {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 80px;  /* 矢印を大きく */
        height: 60px;
    }

    /* 中央文字のサイズ調整 */
    .menu-yesterday a::after,
    .menu-tomorrow a::after {
        font-size: 16px; /* 少し大きめ */
        color: white;    /* 矢印上の文字は白のまま */
    }
}