/* drawer.css ——— ドロワーメニュー全体 */

#site-drawer {
  overflow-y: auto;    /* スクロールは残す */
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

#site-drawer::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.site-drawer {
  position: fixed;
  top: 0;
  right: -375px;
  width: 375px;
  height: 100vh;
  background: rgba(51,51,51,0.95);
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transition: right .3s ease;
  z-index: 1101;
  overflow-y: auto;
  padding: 0 2rem;
}
.site-drawer.open {
  right: 0;
}

/* オーバーレイ */
.drawer-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease;
  z-index: 1100;
}
.drawer-overlay.show {
  opacity: 1; visibility: visible;
}

/* ドロワーヘッダー */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.drawer-title {
  margin: 0;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 100 !important;
}
.drawer-subtitle {
  margin: -5px 0 0;
  color: #fff;
  font-size: 12px;
}

/* ハンバーガーボタン（≡／×切替） */
.menu-toggle {
  display: inline-block !important;
  width: 72px;
  height: 72px;
  background: rgba(96,96,96,1) !important;
  border: none;
  border-radius: 0 0 0 10px;
  cursor: pointer;
  /* float は外します */
  float: none;
  /* ビュー ポートに固定表示 */
  position: fixed;
  top: 0;      /* ヘッダー内の見た目に合わせて調整 */
  right: 0;
  z-index: 1200;
  transition: 0.2s ease;
}
.menu-toggle:hover {
  opacity:0.5;
}
.header-right a,
.header-right a:hover{
  transition: 0.2s ease;
}

.header-right a:hover{
  opacity:0.5;
}
/* アイコンは上下２本線 */
.hamburger-icon {
  background: transparent !important;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  left: 50%;
  transform: translateX(-50%); 
  width: 40%; height: 1px;
  background: #333;
  position: absolute;
  transition: transform .3s ease, top .3s ease;
  
}
/* 線の配置（ボタン内で上下均等に） */
.hamburger-icon::before {
  top: calc(50% - 5px);   /* 中心より上に8px */
}
.hamburger-icon {
  top: 50%;               /* 中央は非表示にして透明化する場合この行は不要 */
  background: transparent;/* 中央線を消したいなら */
}
.hamburger-icon::after {
  top: calc(50% + 5px);   /* 中心より下に8px */
}
/* 開閉時のアニメーション（＋→×） */
/* × に変形するときも中央で回転 */
.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

/* ──────────────────────────────────────────────
   ハンバーガーアイコンの２本線を白色に
────────────────────────────────────────────── */
.menu-toggle .hamburger-icon,
.menu-toggle .hamburger-icon::before,
.menu-toggle .hamburger-icon::after {
  background: #fff !important;
}

/* ──────────────────────────────────────────────
   メニューリスト共通
────────────────────────────────────────────── */
.drawer-extra,
.drawer-accordion-content {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 固定リンク（制作事例／お問い合わせ／プライバシー） */
.drawer-fixed-link > a,
.drawer-extra > li > a {
  display: block;
  padding: .75rem 1rem;
  color: #fff;
  text-decoration: none;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.drawer-fixed-link > a::after,
.drawer-extra > li > a::after {
  content: '›';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}
.drawer-extra > li:last-child > a {
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* ───────────────────────────────────────
   ハンバーガーメニュー内 固定リンクのホバー
──────────────────────────────────────── */
.drawer-fixed-link > a:hover,
.drawer-extra > li > a:hover {
  background-color: rgb(204 205 204);
  color: #000;
  text-decoration: none;
}


/* タクソノミー見出しボタン */
.drawer-accordion-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  text-align: left;
  padding: .75rem 1rem;
  cursor: pointer;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.2);
  transition: background .2s ease;
  line-height: 1.5;
}

/* プラス用 */
.drawer-accordion-toggle::before,
.drawer-accordion-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 「＋」 */
.drawer-accordion-toggle::before {
  content: '+';
  opacity: 1;
}

/* 「−」 */
.drawer-accordion-toggle::after {
  content: '−';
  opacity: 0;
}

/* open クラスが付いたらプラスをフェードアウト、マイナスをフェードイン */
.drawer-accordion-toggle.open::before {
  opacity: 0;
  transform: translateY(-50%) rotate(20deg); /* 軽く回転させてもOK */
}
.drawer-accordion-toggle.open::after {
  opacity: 1;
  transform: translateY(-50%) rotate(0deg);
}

/* ────────── コンテンツ開閉のスライドアニメーション ────────── */
/* コンテンツ領域 */
/* CSS は max-height トランジションだけでOK */
.drawer-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* open クラスが付いたら展開 */
.drawer-accordion-content.open {
  background: rgba(255,255,255,0.05);
}

.drawer-accordion-toggle:hover {
  background-color: rgb(204 205 204);
  color: #000;
  text-decoration: none;
}

/* カテゴリコンテンツ（最初非表示）*/
.drawer-accordion-content {
  padding-left: 1rem;
}
.drawer-accordion-content.open {
  background: rgba(255,255,255,0.05);
  transition: background .2s ease;
}
.drawer-accordion-content li {
  border-bottom: 2px dashed rgb(153 153 154);
  background-color: #666767;
}
.drawer-accordion-content li:last-child {
  border-bottom: none;
}
/* カテゴリリンクホバー */
.drawer-accordion-content li a {
  display: block;
  padding: .5rem 1rem;
  color: #fff;
  text-decoration: none;
  background-color: #666767;
}
.drawer-accordion-content li a:hover {
  background: #cccdcc;
  color: #000;
}

/* 下部ボタン */
.drawer-buttons {
  margin: 1.5rem 1rem;
}
.drawer-buttons .drawer-btn {
  display: block;
  margin-bottom: .75rem;
  padding: .75rem;
  border: 1px solid #666767;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: transparent;
  transition: background .2s ease;
}

.drawer-btn::after {
  content: '›';
  position: absolute;
  right: 4rem;
  color: #fff;
}

.drawer-buttons .drawer-btn:hover {
  background: rgba(255,255,255,0.1);
}