/* ================================================================
   SP メニューダイアログ
   ================================================================ */

/* ===== オーバーレイ ===== */
.sp-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16rem;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sp-menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== パネル（モーダル） ===== */
.sp-menu-panel {
  position: relative;
  width: 100%;
  max-width: 420rem;
  margin: auto 0;
  background-color: var(--color-bg-01);
  border-radius: 32rem;
  box-shadow: 0 8rem 30rem rgba(111, 111, 111, 0.2);
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 24rem;
  padding: 64rem 24rem 56rem;
  box-sizing: border-box;
  transform: translateY(-12rem) scale(0.98);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sp-menu-overlay.is-open .sp-menu-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ===== 閉じるボタン（円形・右上 / Figma close 4993:84799: 48px・bg light-orange-02・×20px key色） ===== */
.sp-menu-close {
  position: absolute;
  top: 16rem;
  right: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  padding: 0;
  background-color: var(--color-light-orange-02);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 2;
}

.sp-menu-close img {
  width: 20rem;
  height: 20rem;
  display: block;
}

/* ===== ナビゲーション全体 ===== */
.sp-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ===== メインナビ アイテム（Figma 4993:86393: py20・px8・薄グレー境界） ===== */
.sp-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8rem;
  padding: 20rem 8rem;
  border-bottom: 1px solid rgba(217, 217, 217, 0.88);
  text-decoration: none;
  color: var(--color-neutral-01);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.sp-menu-item:first-child {
  border-top: 1px solid rgba(217, 217, 217, 0.88);
}

.sp-menu-item-label {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: 0.04em;
  color: var(--color-neutral-01);
  text-align: left;
  flex: 1;
}

.sp-menu-item-icon {
  width: 14rem;
  height: 14rem;
  flex-shrink: 0;
}

/* ===== アコーディオン ===== */
.sp-menu-accordion {
  display: flex;
  flex-direction: column;
}

.sp-menu-item--accordion {
  font: inherit;
}

.sp-menu-item-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18rem;
  height: 18rem;
  flex-shrink: 0;
}

/* プラス/マイナス 切替 */
.sp-toggle-minus {
  display: none;
}
.sp-toggle-plus {
  display: block;
}
.sp-menu-accordion.is-open .sp-toggle-plus {
  display: none;
}
.sp-menu-accordion.is-open .sp-toggle-minus {
  display: block;
}

/* サブメニュー */
.sp-menu-sub {
  display: none;
  flex-direction: column;
  background-color: transparent;
  overflow: hidden;
}

.sp-menu-accordion.is-open .sp-menu-sub {
  display: flex;
}

/* アコーディオン展開時: トリガー下線を消し、サブ群の下端に薄グレー線+16px余白（Figma）。
   SNSボディ(.sp-menu-sns-body)は下線を付けない */
.sp-menu-accordion.is-open .sp-menu-item--accordion {
  border-bottom: none;
}
.sp-menu-accordion.is-open .sp-menu-sub:not(.sp-menu-sns-body) {
  padding-bottom: 16rem;
  border-bottom: 1px solid rgba(217, 217, 217, 0.88);
}

/* サブ項目（Figma navi_txt_link: padding8・インデントなし・bold・行間線なし） */
.sp-menu-sub-item {
  display: flex;
  align-items: center;
  padding: 8rem;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: 0.04em;
  color: var(--color-neutral-01);
  text-decoration: none;
  box-sizing: border-box;
}

/* ===== セパレーター（Figma: 濃い線は使わず Neutral04 の薄線 / 位置で出し分け） ===== */
.sp-menu-separator {
  width: 100%;
  height: 1px;
  background-color: var(--color-neutral-04); /* #D9D9D9 line color。サブナビ↔SNS の区切り(Rectangle4252) */
  flex-shrink: 0;
  margin: 12rem 0;
}

/* アコーディオン群↔サブナビ: 線なし（区切りはアコーディオン群の薄線が担う）。透明gapのみ */
.sp-menu-separator:has(+ .sp-menu-sub-nav-item) {
  height: 0;
  background-color: transparent;
}

/* SNS↔Language: 同一枠内 gap8 相当（線なし） */
.sp-menu-section + .sp-menu-separator {
  height: 0;
  margin: 4rem 0;
  background-color: transparent;
}

/* ===== サブナビ（Figma 4993:86433: py10・px8・13px bold） ===== */
.sp-menu-sub-nav-item {
  display: flex;
  align-items: center;
  padding: 10rem 8rem;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13rem;
  letter-spacing: 0.04em;
  color: var(--color-neutral-01);
  text-decoration: none;
  box-sizing: border-box;
}

/* ===== セクション（SNS・Language） ===== */
.sp-menu-section {
  padding: 0;
}

.sp-menu-section-header {
  display: flex;
  align-items: center;
  gap: 6rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  padding: 8rem;
}

.sp-menu-sns-label-icon {
  width: 21rem;
  height: 19rem;
  flex-shrink: 0;
}

.sp-menu-lang-icon {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
}

.sp-menu-section-title {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 12rem;
  letter-spacing: 0.04em;
  color: var(--color-neutral-01);
  flex: 1;
  text-align: left;
}

.sp-menu-section-dash {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
}

/* SNS・Language のボディは背景なし */
.sp-menu-sns-body,
.sp-menu-lang-body {
  background-color: transparent;
}

/* ===== SNS グリッド（Figma 4993:86485: 5列×2行・gap24・40px透明ボタン・フルカラー・eightは2列分） ===== */
.sp-menu-sns-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24rem;
  padding: 16rem;
  width: 100%;
  box-sizing: border-box;
}

.sp-menu-sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 40rem;
  height: 40rem;
  border-radius: 24rem;
  background: none;
  text-decoration: none;
  transition: background-color var(--duration-fast, 150ms) ease;
}

.sp-menu-sns-btn:hover {
  background-color: var(--color-light-orange-02);
}

.sp-menu-sns-icon {
  width: 27rem;
  height: 27rem;
  object-fit: contain;
}

.sp-menu-sns-btn--x .sp-menu-sns-icon {
  width: 19rem;
  height: 19rem;
}

/* eight は横長ロゴ: 3〜4列目を占有 */
.sp-menu-sns-btn--eight {
  grid-column: 3 / span 2;
  width: auto;
  justify-self: stretch;
}

.sp-menu-sns-icon--eight {
  width: 86rem;
  height: 18rem;
}

/* ===== Language リスト（Figma navi_txt_link: padding8・14px bold） ===== */
.sp-menu-lang-list {
  display: flex;
  flex-direction: column;
}

.sp-menu-lang-item {
  display: flex;
  align-items: center;
  padding: 8rem;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: 0.04em;
  color: var(--color-neutral-01);
  text-decoration: none;
}

/* ===== お問い合わせボタン（Figma Primary_link_btn 4993:86512: pl40 pr20 py16・gap16・border2白・radius32） ===== */
.sp-menu-contact-wrap {
  display: flex;
  justify-content: center;
  padding: 24rem 0 0;
}

.sp-menu-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  padding: 16rem 20rem 16rem 40rem;
  background-color: var(--color-key);
  border: 2rem solid var(--color-white);
  border-radius: 32rem;
  text-decoration: none;
}

.sp-menu-contact-btn span {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: 0.7rem;
  color: var(--color-white);
}

.sp-menu-contact-btn img {
  width: 14rem;
  height: 14rem;
  filter: brightness(0) invert(1);
}

.sp-menu-contact-btn:hover {
  opacity: 0.85;
}

/* ================================================================
   SP 検索ダイアログ
   ================================================================ */

/* ===== オーバーレイ ===== */
.sp-srch-overlay {
  position: fixed;
  inset: 0;
  /* 検索ダイアログは固定ヘッダー(.sp-header z-index:10001)より前面へ。
     旧 10000 はヘッダー背面でダイアログにヘッダーが被っていた（QA No.38）。
     メニューオーバーレイ(10002)と同列に揃える。 */
  z-index: 10002;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rem 8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
}

.sp-srch-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== ダイアログ本体 ===== */
.sp-srch-frame {
  background-color: var(--color-white);
  border-radius: 32rem;
  padding: 24rem 16rem;
  width: 100%;
  max-width: 420rem;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  box-sizing: border-box;
}

/* ===== タブ ===== */
/* タブ本体は共通 c-tab（pill・on-bg）へ統合。ラッパーのみ残置 */
.sp-srch-tab-wrap {
  width: 100%;
}

/* ===== 検索パネル共通 ===== */
.sp-srch-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sp-srch-body--hidden {
  display: none;
}

/* ===== サイト内検索：ベージュ枠 ===== */
.sp-srch-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rem;
  padding: 24rem 12rem;
  background-color: var(--color-bg-02, #faf8f7);
  border-radius: 24rem;
  width: 100%;
  box-sizing: border-box;
}

.sp-srch-keyword-group {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  width: 100%;
}

.sp-srch-label {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
}

.sp-srch-label-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, var(--color-orange-01) 0%, var(--color-key) 100%);
  flex-shrink: 0;
}

.sp-srch-label-text {
  font-size: 16rem;
  font-weight: 700;
  line-height: 24rem;
  color: var(--color-neutral-01, #222);
  font-family: "Noto Sans JP", sans-serif;
}

.sp-srch-input-box {
  height: 56rem;
  display: flex;
  align-items: center;
  padding: 0 16rem;
  background-color: var(--color-white);
  border-radius: 32rem;
  box-sizing: border-box;
  width: 100%;
}

.sp-srch-input-inner {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.sp-srch-input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 14rem;
  font-weight: 500;
  letter-spacing: 0.28rem;
  color: var(--color-neutral-01, #222);
  background: transparent;
  font-family: "Noto Sans JP", sans-serif;
}

.sp-srch-input::placeholder {
  color: var(--color-neutral-02, #aaa);
}

/* ===== 検索するボタン（ベージュ枠内・中央） ===== */
.sp-srch-submit-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* 検索ボタンは共通 c-button（search）へ委譲。キーワード検索パネルでの横幅のみ踏襲。 */
.sp-srch-submit-wrap .c-button {
  width: 200rem;
}

/* ===== 製品検索パネル ===== */
.sp-srch-body--product {
  background-color: var(--color-bg-02, var(--color-bg-02));
  border-radius: 24rem;
  padding: 24rem 16rem;
  box-sizing: border-box;
}

.sp-srch-product-fields {
  display: flex;
  flex-direction: column;
}

.sp-srch-product-row {
  display: flex;
  flex-direction: column;
  gap: 14rem;
  padding: 16rem 0;
}

.sp-srch-product-row--border {
  border-bottom: 1px solid rgba(217, 217, 217, 0.88);
}

.sp-srch-product-label {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
}

/* ===== 区分ラジオボタン ===== */
.sp-srch-product-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
}

.sp-srch-radio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  height: 36rem;
  padding: 0 14rem 0 10rem;
  border-radius: 20rem;
  border: none;
  background-color: var(--color-white);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.6rem;
  color: var(--color-neutral-01, var(--color-neutral-01));
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sp-srch-radio-btn.sp-srch-radio-btn--active {
  background-color: var(--color-bg-03, var(--color-bg-03));
  border: 2rem solid var(--color-white);
  color: var(--color-neutral-01, var(--color-neutral-01));
}

.sp-srch-radio-input {
  display: none;
}

/* ラジオインジケータ（circle） */
.sp-srch-radio-indicator {
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background-color: var(--color-bg-02, var(--color-bg-02));
  flex-shrink: 0;
  position: relative;
}

.sp-srch-radio-btn.sp-srch-radio-btn--active .sp-srch-radio-indicator {
  background-color: var(--color-white);
}

.sp-srch-radio-btn.sp-srch-radio-btn--active .sp-srch-radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: var(--color-key, var(--color-key));
}

/* ===== カテゴリーチェックボックス ===== */
.sp-srch-product-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12rem;
}

.sp-srch-checkbox-btn {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  padding: 10rem 14rem 10rem 12rem;
  border-radius: 20rem;
  border: none;
  background-color: var(--color-white);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.6rem;
  color: var(--color-neutral-01, var(--color-neutral-01));
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sp-srch-checkbox-input {
  display: none;
}

/* チェックボックスインジケータ（square） */
.sp-srch-checkbox-indicator {
  width: 16rem;
  height: 16rem;
  border-radius: 2rem;
  background-color: var(--color-bg-02, var(--color-bg-02));
  flex-shrink: 0;
  position: relative;
}

.sp-srch-checkbox-btn:has(.sp-srch-checkbox-input:checked) {
  background-color: var(--color-bg-03, var(--color-bg-03));
  border: 2rem solid var(--color-white);
}

.sp-srch-checkbox-btn:has(.sp-srch-checkbox-input:checked) .sp-srch-checkbox-indicator {
  background-color: var(--color-white);
}

.sp-srch-checkbox-btn:has(.sp-srch-checkbox-input:checked) .sp-srch-checkbox-indicator::after {
  content: '';
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 10rem;
  height: 10rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='%23ff6243' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sp-srch-checkbox-text {
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.6rem;
  line-height: 18rem;
  font-family: "Noto Sans JP", sans-serif;
}

/* ===== さらに表示 / 表示を減らすボタン ===== */
.sp-srch-more-btn {
  display: inline-flex;
  height: 36rem;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding: 0 16rem 0 24rem;
  background-color: var(--color-white);
  border-radius: 19rem;
  border: 1px solid var(--color-light-orange-01, var(--color-light-orange-01));
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.6rem;
  color: var(--color-neutral-01, var(--color-neutral-01));
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.sp-srch-more-btn:hover {
  opacity: 0.75;
}

.sp-srch-more-icon {
  width: 20rem;
  height: 20rem;
}

/* 折りたたみ中：6件目以降のラベルを隠す（ボタン自身は nth-child で除外） */
.sp-srch-product-categories.is-collapsed .sp-srch-checkbox-btn:nth-child(n+6) {
  display: none;
}

/* リセット / 検索ボタン行 */
.sp-srch-product-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  padding-top: 16rem;
}
/* リセット/製品を探す は共通 c-button（secondary-close / search）へ委譲。行は上の flex で中央寄せ。 */

/* ===== 閉じるボタン ===== */
.sp-srch-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  width: 100%;
  padding: 0 8rem;
  background: none;
  border: none;
  cursor: pointer;
}

.sp-srch-close-icon {
  width: 20rem;
  height: 20rem;
}

.sp-srch-close-text {
  font-size: 16rem;
  font-weight: 700;
  line-height: 24rem;
  color: var(--color-neutral-01, var(--color-neutral-01));
  font-family: "Noto Sans JP", sans-serif;
}