/* 非会員向けのメニュー帯（ user/_guest_menu.blade.php ）。

   ⚠️ 2つのレイアウトが読む。 どちらかだけに置かないこと。
        user/layouts/master         … /character ・ /character/detail/{id}
        entrance/layouts-master     … /service-guide

   ⚠️ **位置取りはここに書かない。** レイアウトごとに土台が違う
      （ エントランスは #header が position:fixed・高さ90px、 user 側は通常フロー ）。
      固定配置はエントランス側の <style> が持つ。 ここは見た目だけ。
*/

/* ===== 非会員向けメニュー帯 =====
   エントランス（ entrance/layouts-master の #menu ）の見た目を移植。
   /service-guide から /character へ来ても同じ帯が続くようにする。 */
/* ⚠️ 地色は画面の端まで、 項目は下のコンテンツ幅（ .container-all = 1180px ）に合わせる。
   帯ごと 1180px に縮めると 左右に下地の星柄が覗いて、 帯が宙に浮いて見える。
   外側が地色（ 非選択と同じ ）、 内側が項目、 の2枚構成にしてあるのはこのため。 */
.guest-menu {
    background: linear-gradient(180deg, #fff 0%, #fff2f8 100%);
    border-bottom: 2px solid #e91e8c;
    box-shadow: 0 2px 10px rgba(233, 30, 140, .12);
}
.guest-menu__inner {
    display: flex;
    max-width: 1180px;
    margin: 0 auto;
}
/* ⚠️ 全状態に色を当てること。 共通の a:hover（灰色）に負けて文字が読めなくなる */
.guest-menu__item,
.guest-menu__item:link,
.guest-menu__item:visited,
.guest-menu__item:active {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    color: #c06596;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .2s, color .2s;
}
/* 項目の区切り。
   ⚠️ 両端にも引くこと。 外側の地色と非選択の項目が同じ色なので、 線が無いと
      メニューがどこから始まってどこで終わるのかが分からない。
   ⚠️ 線は項目側に持たせる（ .guest-menu__inner に border を足すと 2px ぶん内側にずれて、
      下のコンテンツ（ .container-all ）と左右が揃わなくなる ）。 */
.guest-menu__item + .guest-menu__item,
.guest-menu__item:first-child { border-left: 1px solid rgba(233, 30, 140, .22); }
.guest-menu__item:last-child { border-right: 1px solid rgba(233, 30, 140, .22); }
.guest-menu__item:hover { background: #ffe9f4; color: #e91e8c; text-decoration: none; }
/* 開いているページ */
.guest-menu__item.is-current,
.guest-menu__item.is-current:link,
.guest-menu__item.is-current:visited,
.guest-menu__item.is-current:hover,
.guest-menu__item.is-current:active {
    background: linear-gradient(180deg, #e91e8c, #c2156f);
    color: #fff;
}
@media (max-width: 767px) {
    .guest-menu__item,
    .guest-menu__item:link,
    .guest-menu__item:visited,
    .guest-menu__item:active { height: 40px; font-size: 13px; letter-spacing: .02em; }
}