/* assets/public-menu.css
   一般向けページで menu.php を使うときに読み込むスタイル。
   旧システムの Bootstrap ベースのマークアップを、Bootstrap なしで再現する。
   インクルード例:
     <link rel="stylesheet" href="<?= SITE_URL ?>/assets/public-menu.css">
*/

/* ===== タイトルバー ===== */
.title-bar { width: 100%; }
.title-text { font-size: 20px; color: rgb(53, 141, 63); }

/* ===== navbar（Bootstrap 4 互換レイアウト） ===== */
.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}
.navbar-brand { text-decoration: none; }

/* ハンバーガー（mobile） */
.navbar-toggler {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  cursor: pointer;
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background: no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* collapse 開閉（data-toggle="collapse" の自前制御用） */
.collapse { display: none; }
.collapse.show { display: block; }
.navbar-collapse { width: 100%; }

/* メニューリスト */
.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-item { margin: 0; }
.nav-link {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: inherit;
}

/* hover-green（旧 customer.css 準拠） */
.hover-green { color: #888; }
.hover-green:hover { color: rgb(53, 141, 63); }

/* 選択中 */
.nav-item.selected { border: 1px solid #ccc; }
span.hover-green.selected { border: none; color: rgb(53, 141, 63); }

/* md 以上のブレイクポイント */
@media (min-width: 768px) {
  .navbar-toggler { display: none; }
  .collapse { display: flex !important; }
  .navbar {
    display: block;
    text-align: left;
  }
  .navbar-collapse {
    justify-content: center;
    margin: auto;
  }
  .navbar-nav {
    flex-direction: row;
    align-items: center;
    margin: auto;
  }
  .title-bar { width: 960px; margin: auto; }
  .title-text { font-size: 30px; }
}

/* ===== guruguru（ページ遷移中のローディングスピナー） ===== */
.guruguru-wrapper {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: lightgrey;
  opacity: 0.5;
}
.guruguru-wrapper[hidden] { display: none !important; }

.balls-guruguru {
  z-index: 100;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: lightgrey;
}
.ball {
  width: 50%;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  transform-origin: 100% 50%;
  left: 0;
}
.ball::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.ball-1::before { animation: ball-guruguru 1s linear 0s infinite; }
.ball-2 { transform: rotate(315deg); }
.ball-2::before { animation: ball-guruguru 1s linear -0.125s infinite; }
.ball-3 { transform: rotate(270deg); }
.ball-3::before { animation: ball-guruguru 1s linear -0.25s infinite; }
.ball-4 { transform: rotate(225deg); }
.ball-4::before { animation: ball-guruguru 1s linear -0.375s infinite; }
.ball-5 { transform: rotate(180deg); }
.ball-5::before { animation: ball-guruguru 1s linear -0.5s infinite; }
.ball-6 { transform: rotate(135deg); }
.ball-6::before { animation: ball-guruguru 1s linear -0.625s infinite; }
.ball-7 { transform: rotate(90deg); }
.ball-7::before { animation: ball-guruguru 1s linear -0.75s infinite; }
.ball-8 { transform: rotate(45deg); }
.ball-8::before { animation: ball-guruguru 1s linear -0.875s infinite; }

@keyframes ball-guruguru {
  0%   { width: 20px; height: 20px; opacity: 1; }
  100% { width: 6px;  height: 6px;  opacity: .2; margin-left: 7px; }
}