/* /sks/css/header-style.css (ドロワーメニューアイコン追加・マージ版) */

body.preload * { transition: none !important; }

.site-header {
  background-color: #f8f9fa !important;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  position: sticky; top: 0; z-index: 1000; width: 100%;
}

.header-content {
  max-width: 1100px; margin: 0 auto; padding: 0 15px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}

.logo img { height: 40px; width: auto; display: block; }

/* --- モバイル用リンクボタン --- */
.mobile-links { display: flex; gap: 8px; margin-left: 15px; margin-right: 8px; }
.mobile-links a.mobile-link-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 5px; font-size: 12px; color: #333; text-decoration: none;
  border-radius: 6px; background-color: #fff; border: 1px solid #dee2e6;
  width: 60px; height: 50px; box-sizing: border-box;
  text-align: center; transition: background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); white-space: nowrap;
}
.mobile-links a.mobile-link-button i { font-size: 18px; margin-bottom: 2px; color: #007bff; display: block !important; width: 100%; text-align: center; }
.mobile-links a.mobile-link-button span { display: block !important; width: 100%; text-align: center; }
.mobile-links a.mobile-link-button:hover { background-color: #e9ecef; }

/* --- ハンバーガーメニュー --- */
.hamburger-menu {
  display: flex; flex-direction: column; justify-content: space-around;
  width: 60px; height: 50px; background: #fff; border: 1px solid #dee2e6;
  border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer;
  padding: 12px 10px; margin-left: auto; box-sizing: border-box; z-index: 1010;
}
.hamburger-menu span { width: 100%; height: 3px; background-color: #333; border-radius: 2px; transition: all 0.3s ease-in-out; }
body.nav-open .hamburger-menu span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
body.nav-open .hamburger-menu span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger-menu span:nth-child(3) { transform: rotate(-45deg) translate(6px, -5px); }

/* --- PC用メインナビゲーション --- */
.main-nav { display: none; margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 15px; }
.main-nav li a { color: #333; text-decoration: none; padding: 10px 15px; font-weight: 500; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; }
.main-nav li a:hover { background-color: #007bff; color: #fff; }

/* --- スマホ用ドロワーメニュー --- */
.mobile-drawer-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background-color: #ffffff; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.3s;
  z-index: 999; border-top: 1px solid #eee;
}
body.nav-open .mobile-drawer-nav {
  max-height: calc(100vh - 70px); opacity: 1; visibility: visible; overflow-y: auto; padding: 0;
  transition: max-height 0.3s ease-in, opacity 0.3s ease-in, visibility 0s linear 0s;
}

/* --- Drawer Menu Items Styling --- */
.mobile-drawer-nav ul { list-style: none; padding: 0; margin: 0; }

.mobile-drawer-nav li {
    border-bottom: 1px solid #eee;
}

/* 奇数行のスタイル */
.mobile-drawer-nav li:nth-child(odd) a {
    background-color: #e3e7eb; /* ユーザー設定色 */
}
/* 偶数行のスタイル */
.mobile-drawer-nav li:nth-child(even) a {
    background-color: #f3f5f7; /* ユーザー設定色 */
}
/* ホバー時のスタイル */
.mobile-drawer-nav li a:hover {
  background-color: #c1d6eb; /* ユーザー設定色 */
}

/* ▼▼▼ メニュー項目リンクのスタイル修正 ▼▼▼ */
.mobile-drawer-nav li a {
  display: flex; /* Flexbox で横並び */
  align-items: center; /* 垂直方向中央揃え */
  gap: 10px; /* アイコンとテキストの間隔 */
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.2s ease;
}
/* ▲▲▲ 修正ここまで ▲▲▲ */


/* --- Add to Home Screen Item Specific Styles --- */
.add-to-homescreen-item {
     /* nth-childで背景色がつく */
     /* border-bottom は継承される */
}
.add-to-homescreen-item a {
   /* display: flexなどは共通スタイルで適用 */
}

/* ▼▼▼ アイコン共通スタイル ▼▼▼ */
.mobile-drawer-nav li a i.fa-fw { /* fa-fwクラスを持つアイコンに適用 */
  width: 20px; /* アイコン幅指定 */
  text-align: center;
  color: #007bff; /* アイコンの色 */
  flex-shrink: 0; /* アイコンが縮まないように */
}
/* ▲▲▲ アイコン共通スタイルここまで ▲▲▲ */


/* --- Instruction Panel Styling --- */
.instructions-panel {
  display: none; padding: 10px 20px 15px 20px; background-color: #e9ecef;
  font-size: 0.9em; color: #333;
}
.instructions-panel p { margin: 0.5em 0; }
.instructions-panel small { line-height: 1.4; }
.instructions-panel a { color: #007bff; font-size: 0.9em; }

.mobile-drawer-nav.instructions-visible .instructions-panel { display: block; }
.mobile-drawer-nav.instructions-visible li.add-to-homescreen-item { border-bottom: none; }

.mobile-drawer-nav > *:last-child { border-bottom: none; }
.mobile-drawer-nav > ul > li:last-child { border-bottom: none; }


/* --- レスポンシブ --- */
@media (min-width: 768px) {
  .mobile-links { display: none; }
  .hamburger-menu { display: none; }
  .main-nav { display: flex; }
  .mobile-drawer-nav { display: none; }
}
@media (min-width: 992px) {
    .main-nav ul { gap: 25px; }
}