@charset "UTF-8";
/* ========================================
   ENTRY ボタンの飛び先が複数あるときの選択肢
   ★2026-08-31 新設（跡田さん選択＝「押すと選択肢が開く」）

   ■ 前提
   ENTRY ボタンは3か所に出る（PCナビ内の1つは元から display:none）。
     ・PCヘッダー右 .l-header-entry        （1161px 以上）
     ・SPヘッダー右 .l-header-drawer-entry （1160px 以下）
     ・フッター     .l-footer-entry        （全幅）

   ■ 入れ物（.l-entry）を足した理由と、位置がずれない理由
   開いた一覧をボタンの真下（フッターは真上）に出すには、基準になる箱が要る。
   そこでボタンを .l-entry で包んだ。並びの指定（margin-left:auto など）は
   包んだ側に付け直してあるので、ボタンの位置は今までと変わらない。
   ボタン自身の指定（.l-header-entry 等）は header.css / footer.css の
   ものをそのまま使っており、こちらでは書き換えていない。

   ※ 包んだだけだと、表示しない側の入れ物が場所を取ってしまう
     （中のボタンは display:none でも入れ物は残るため）。
     そのため入れ物自体を幅ごとに出し分けている。

   ■ 開き方
     1161px 以上 … ボタンに紐づいたドロップダウン（ヘッダーは下、フッターは上）
     1160px 以下 … 画面下からせり出すシート。指で押しやすい位置に出す

   飛び先が1件のときはこの仕組みは動かない（ボタンがただのリンクになる）。
======================================== */

.l-entry {
  position: relative;
  line-height: 0;                 /* 画像の下に隙間を作らない（元のボタンと同じ扱い） */
}

/* ---- 入れ物の並び。中のボタンから引き継いだ指定 ---- */
.l-entry--header {
  margin-left: auto;              /* ナビの右端へ寄せる */
  flex-shrink: 0;
}
.l-entry--drawer {
  display: none;                  /* PC では出さない（中のボタンも元から非表示） */
}

/* ========================================
   選択肢のカード
   見た目は PCナビのドロップダウン（白カード・2px の黒枠・角丸14px）に揃えている
======================================== */
.l-entry-menu {
  position: absolute;
  z-index: 1700;                  /* ドロワー(1600)より前に出す */
  min-width: 260px;
  margin: 0;
  padding: 20px 24px;
  background-color: #fff;
  border: 2px solid #212121;
  border-radius: 14px;
  line-height: 1.6;               /* .l-entry の line-height:0 を打ち消す */
  text-align: left;
  animation: l-entry-in 0.18s ease;
}

@keyframes l-entry-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 動きを減らす設定の端末では動かさない */
@media (prefers-reduced-motion: reduce) {
  .l-entry-menu { animation: none; }
}

.l-entry-menu-title {
  margin: 0 0 12px;
  font-size: 14px;
  color: #555;
  white-space: nowrap;
}

.l-entry-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-entry-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #212121;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

/* 矢印。サイト共通の「黄丸＋赤▼」ではなく、進む向きが分かる小さな三角にしている */
.l-entry-menu-arrow {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #f75959;
  border-right: 2px solid #f75959;
  transform: rotate(45deg);
}

/* 押せる端末だけホバーを効かせる（タッチ端末はタップ後もホバーが残るため） */
@media (hover: hover) and (pointer: fine) {
  .l-entry-menu-link:hover { background-color: #ffcd53; }
}
.l-entry-menu-link:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 2px;
}

/* 「閉じる」はシート表示のときだけ出す。PC は外側を押すか Esc で閉じられる */
.l-entry-menu-close {
  display: none;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 2px solid #212121;
  border-radius: 999px;
  background: #fff;
  color: #212121;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

/* ---- 開く向き（PC）---- */
.l-entry--header .l-entry-menu,
.l-entry--nav .l-entry-menu {
  top: calc(100% + 14px);
  right: 0;                        /* ボタンの右端に揃える。画面外へはみ出させない */
}
.l-entry--footer .l-entry-menu {
  bottom: calc(100% + 14px);       /* フッターは上へ開く */
  left: 50%;
  transform: translateX(-50%);
}
/* 上へ開く側は、出てくる向きも上からにする */
@keyframes l-entry-in-up {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.l-entry--footer .l-entry-menu { animation-name: l-entry-in-up; }

/* ========================================
   1160px 以下：画面下からせり出すシート
   ヘッダーのボタンは画面上端にあるが、指が届くのは下側なので下から出す。
   フッターも同じ見た目に揃える（同じ操作で同じものが出る方が迷わない）
======================================== */
@media screen and (max-width: 1160px) {
  .l-entry--header { display: none; }
  .l-entry--drawer {
    display: block;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 1600;                 /* ドロワーの上に残す（元のボタンと同じ） */
  }

  .l-entry-menu,
  .l-entry--footer .l-entry-menu {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    border-width: 2px 0 0;
    border-radius: 16px 16px 0 0;
    transform: none;
    /* 背景を暗くする。影を画面いっぱいに広げているだけで、要素は増やしていない */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
    animation-name: l-entry-in-sheet;
  }
  @keyframes l-entry-in-sheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .l-entry-menu-title { font-size: 15px; text-align: center; white-space: normal; }
  .l-entry-menu-list { gap: 8px; }
  .l-entry-menu-link {
    padding: 16px 14px;            /* 指で押せる高さを確保する */
    border: 1px solid #dcdcdc;
    font-size: 16px;
    white-space: normal;
  }
  .l-entry-menu-close { display: block; }
}