/* ================= Root Variables ================= */
:root{
  --fp-ink:  #111111;   /* 本文の基準色 */
  --fp-ink-2:#5a5a5a;   /* ナビの通常色 */
  --fp-dark: #888;   /* ブランドダーク */
  --fp-main: #888;   /* ブランドメイン */
  --fp-gray: #888;   /* ブランドグレー */
  --accent:  #e0c684;   /* アクセント色 */
}

/* ================= Base Typography ================= */
body{
  font-family: sans-serif;
  font-weight:400;
  color: var(--fp-ink);
}
h1,h2,h3,h4,h5,h6{ font-weight:400; color: var(--fp-ink); }

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--fp-main); }

/* ================= Header ================= */
.bh-header{
  z-index:10;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(120%) blur(2px);
}
.bh-header .navbar-brand{
  font-weight:400;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  color: var(--fp-ink) !important;
  letter-spacing: .02em;
}
.bh-header .brand-tagline{ font-size:.7rem; font-weight:400; letter-spacing:.03em; }
.bh-header .brand-logo{ font-size:1.85em; }

.bh-header .nav-link{
  font-size:.85rem;
  font-weight:400;
  color: var(--fp-ink-2) !important;
  padding:.75rem 1rem;
}
.bh-header .nav-link:hover{ color: var(--fp-dark) !important; }
.bh-header .nav-link:focus{ color: inherit !important;}

.bh-header .dropdown-menu{ font-weight:400; border-color:#e9ecef; }
.bh-header .dropdown-item{ color: var(--fp-ink-2); font-size:1rem; font-weight:400; }
.bh-header .dropdown-item:hover{ color:var(--fp-dark); background:#f6f5f4; }

/* スマ幅余白調整 */
@media (max-width:575.98px){
  .bh-header nav.navbar.container{
    --bs-gutter-x:0 !important;
    padding-inline: clamp(16px, 4vw, 24px) !important;
  }
}

/* アクセシビリティ */
.bh-header a:focus,
.bh-header button:focus{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ================= Navbar Toggler ================= */
.bh-header .navbar-toggler{
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  background:transparent !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important; outline:none !important;
  -webkit-tap-highlight-color:transparent;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-border-radius: 0;
}
.bh-header .navbar-toggler:focus,
.bh-header .navbar-toggler:active{ outline:none !important; box-shadow:none !important; }
.bh-header .navbar-toggler .navbar-toggler-icon{
  width:35px; height:35px; display:block;
  background-size:100% 100%;
  margin-top:3px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================= Dropdown Animation ================= */
.navbar .dropdown-menu{
  display:block;
  opacity:0; transform:translateY(8px); visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  will-change: transform, opacity;
  pointer-events:none;
}
.navbar .dropdown-menu.show{
  opacity:1; transform:translateY(0); visibility:visible;
  transition:opacity .3s ease, transform .3s ease, visibility 0s;
  pointer-events:auto;
}
@media (max-width:991.98px){
  .navbar .dropdown-menu{ transform:translateY(6px); }
}
@media (prefers-reduced-motion: reduce){
  .navbar .dropdown-menu,
  .navbar .dropdown-menu.show{
    transition:none; transform:none; opacity:1; visibility:visible;
  }
}

/* ================= Offcanvas Menu ================= */
.offcanvas-menu{ font-size:1.05rem; line-height:1.6; letter-spacing:.01em; }
.offcanvas-menu .list-group-item{
  font-size:1rem; font-weight:400;
  padding:.9rem 1rem;
  border-color:#eee;
  display:flex; align-items:center; gap:.6rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.offcanvas-menu .iconNav{
  width:2em; height:2em; flex:0 0 auto;
  fill:currentColor; opacity:1;
}

/* セクション見出し */
#bhMenuOffcanvasLabel{ font-size:1.1rem; letter-spacing:.02em; }
.offcanvas-menu .heading-item{ background:#888; color:#fff; font-weight:400; }
/* オフキャンバス見出し：ホバー時も変化させない */
.offcanvas-menu .list-group-item.heading-item{
  background:#888 !important;  /* 既定の濃茶を固定 */
  color:#fff !important;
  cursor: default;
  pointer-events: none;            /* 反応なし（クリック不可） */
}
.offcanvas-menu .list-group-item.heading-item:hover,
.offcanvas-menu .list-group-item.heading-item:focus,
.offcanvas-menu .list-group-item.heading-item:active{
  background:#888 !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* 仕切り線調整 */
.offcanvas-menu hr.my-0{ margin:.25rem 0 !important; }

/* フッタ部 */
.offcanvas-menu .small{ font-size:.92rem; }
.offcanvas-menu .brand-mark{ font-size:1.2rem; font-weight:400; color:#000; }

/* Submenu */
.offcanvas-menu .submenu{ background:rgba(59,40,36,.03); border-left:2px solid #888; }
.offcanvas-menu .submenu .list-group-item{
  padding-left:2rem;
  font-size:1rem; font-weight:400;
}
.offcanvas-menu .submenu .list-group-item:hover{ background:#f7f4f2; }
.offcanvas-menu .submenu.collapse{ transition:height .2s ease; }
.offcanvas-menu .submenu-caret{
  width:.6em; height:.6em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease;
}
.offcanvas-menu .collapsed .submenu-caret{ transform:rotate(-135deg); }

/* 小端末微調整 */
@media (max-width:360px){
  .offcanvas-menu{ font-size:1rem; }
  .offcanvas-menu .list-group-item{ padding:.8rem .9rem; }
  .offcanvas-menu .submenu .list-group-item{ padding-left:1.6rem; }
}

/* ================= Dropdown Item Size ================= */
.dropdown-item{ font-size:1rem; font-weight:400; line-height:1.5; padding:.5rem 1rem; }
.dropdown-item.font-S{ font-size:1rem !important; font-weight:400 !important; }
/* ヘッダー（PC）— リンクの色・ホバー背景を強制 */
.bh-header .nav-link{ color: var(--fp-ink-2) !important; }
.bh-header .nav-link:hover,
.bh-header .dropdown-item:hover{
  color: var(--fp-dark) !important;
  background:#f6f5f4 !important;      /* 背景ハイライトを必ず出す */
}

/* ドロップダウン項目（色/サイズ統一） */
.bh-header .dropdown-item{
  font-size:1rem !important;
  font-weight:400 !important;
  color: var(--fp-ink-2) !important;
}

/* オフキャンバス（スマホメニュー）— ホバー背景を強制 */
#bhMenuOffcanvas .list-group-item{
  font-size:1rem !important;
  font-weight:400 !important;
  color: var(--fp-ink) !important;
}
#bhMenuOffcanvas .list-group-item:hover{
  background:#f7f4f2 !important;
  color: var(--fp-ink) !important;
}
/* desk-stock-submenu 内のボタン hover スタイル */
.desk-stock-submenu .dropdown-item:hover,
.desk-stock-submenu .dropdown-item:focus {
  background-color: #888 !important; /* 背景色をブランド色 */
  color: #ffffff !important;            /* 文字色を白 */
}
/* インスタボタン */
/* .ig-btn{
  width:48px; height:48px;
  display:grid; place-items:center;
  color: var(--fp-ink-2);
  margin-right: -5px;
}
.ig-btn i{ font-size:2.6rem; line-height:1; }
.ig-btn:hover i{ color: var(--fp-main); } */

/* サイズ用の簡易カスタム変数（必要なら数値だけ調整） */
:root{
  --bh-touch: 50px;   /* ボタンのタップ領域 */
  --bh-icon:  50px;   /* 三本線アイコンの見た目サイズ */
  --bh-stroke:2.5;    /* 三本線の太さ */
}

@media (max-width: 991.98px){
  /* ハンバーガー本体を大きく */
  .bh-header .navbar-toggler{
    width: var(--bh-touch);
    height: var(--bh-touch);
  }
  /* アイコンも拡大（背景SVGを太線に差し替え） */
  .bh-header .navbar-toggler .navbar-toggler-icon{
    width: var(--bh-icon);
    height: var(--bh-icon);
    margin-top: 0;                /* 余計なずれをリセット */
    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='currentColor' stroke-linecap='round' stroke-width='%2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* ↑ stroke-width を 2.5 に。数値を変えるなら --bh-stroke を使わず、この行の %2.5 を調整 */
  }

  /* Instagramボタンも同じ高さに揃える */
  .ig-btn{
    width: var(--bh-touch);
    height: var(--bh-touch);
  }
  .ig-btn i{
    font-size: 2.5rem;
    margin-right:-5px;
  }
}

/* PC用：作品販売オフキャンバスの幅 */
@media (min-width: 992px){
  #stockOffcanvas.offcanvas-end{
    width: 330px;
  }
}

/* 縦間隔＝約20pxに詰める（フォーム側余白をゼロ、ボタン側でコントロール） */
#stockOffcanvas .list-group.list-group-flush > form.list-group-item{
  padding: 0 !important;
  border: 0 !important;
}

#stockOffcanvas .dropdown-item{
  padding: 7px 14px !important;  /* 上10 + 下10 = 実質20pxのリズム */
  line-height: 1.4;
}

#stockOffcanvas .dropdown-item i{
  margin-right: 10px !important;  /* 15→10に詰める */
}

/* 見出し・検索周りも少しだけ圧縮（必要なら） */
#stockOffcanvas .heading-item{
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
#stockOffcanvas .p-3{ padding: 12px !important; }

/* === Header nav: hover背景を無し、文字色だけ#888に === */
.bh-header .nav-link:hover {
  background: transparent !important;
  color: #888 !important; /* = var(--fp-dark) */
}

/* === Header nav: フォーカスリングの色/太さを変更（黄っぽい枠を置き換え）=== */

.bh-header a:focus-visible,
.bh-header .nav-link:focus-visible,
.bh-header button:focus {
  outline: 2px solid #888 !important; /* 細く＆色変更 */
  outline-offset: 2px;
  border-radius: 4px;
  background: transparent !important;     /* 背景強調を消す */
}

.bh-header a:focus {outline: none !important;}

.bh-header .nav-link:focus { color: inherit !important;}

/* （任意）フォーカス時も文字色を揃える */
.bh-header .nav-link:focus,
.bh-header .nav-link:focus-visible {
  color: #888 !important;
}
/* Back-to-Top を各オーバーレイより下にする（クリックも譲る） */
#page_top{
  position: fixed;      /* 既定ならそのまま */
  z-index: 900 !important; /* Bootstrapのoffcanvas(1045)・backdrop(1040)より低く */
}

/* （任意）オフキャンバス表示中は完全に無効化したい場合 */
.offcanvas.show ~ #page_top,
.offcanvas-backdrop.show ~ #page_top{
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 767.98px){
  .bh-header .navbar-brand .brand-logo{
    font-size: 1.4rem !important;  /* 例: 少し小さめに */
  }
}
@media (min-width: 992px){
  .bh-header .navbar{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.bh-header .brand-logo {
  letter-spacing: -0.062em; /* 少しだけ狭める */
}

.headerIcon-right { width: 25px; height: 25px; fill:#888; margin-left:-10px; margin-right:5px;}

.headerIcon-instagram-1 { width: 45px; height: 45px; fill:#111#888; margin-left:-10px; margin-right:5px;}
.headerIcon-instagram-1:hover { fill:#888 !important;}



/* 矢印の基礎スタイル */
.nav-caret{
  transition: transform .18s ease;
  transform-origin: center;
  display:inline-block;
  vertical-align:middle;
}

/* オフキャンバスが開いている時に反転（上向き） */
.nav-caret.is-open{
  transform: rotate(180deg);
}