/* =========================
   単水栓ページ専用レイアウト（single.css）
   - カードサイズは変数で統一（通常200 / compact160）
   - グリッドは「カード幅基準」で並べる
   - スコープ（通常 / モーダル / もっと絞り込む）で変数だけ差し替え
   ========================= */

/* =========================
   0) サイズトークン
   ========================= */
   :root{
    --mn-card-size: 200px;     /* 通常カード */
    --mn-card-radius: 12px;
    --mn-card-pad: 12px;
    --mn-card-gap: 24px;
    --mn-type-label-size: 1rem;

    --mn-card-shadow: 6px 6px 12px rgba(0,0,0,.25);
    --mn-card-shadow-hover: 0 4px 10px rgba(15,23,42,.12);
  }

  /* compact（モーダル/もっと絞り込む） */
  .mn-is-compact{
    --mn-card-size: 160px;
    --mn-card-radius: 20px;
    --mn-card-pad: 10px;
  }

  /* =========================
     1) 全体レイアウト：左バー＋メイン
     ========================= */
  .mn-layout{
    max-width: 1510px;
    margin: 0 auto;
    display: flex;
  }

  .mn-main{
    flex: 1;
    min-width: 0;
    padding-bottom: 72px; /* 下の追従バーに被らない */
  }

  .contentaria{
    width: 90%;
    margin: 0 auto;
  }

  /* =========================
     2) サイドバー（枠）＋下ボタンを一体で追従させる
     - sticky は wrap 側のみ
     ========================= */
  .mn-sidebar-wrap{
    width: 220px;        /* .mn-sidebar と同じ幅 */
    flex-shrink: 0;

    position: sticky;
    top: 20px;           /* 通常時 */
    align-self: flex-start;
    z-index: 50;

    display: flex;
    flex-direction: column;
    gap: 8px;            /* 枠とボタンの間隔 */
  }

  /* ヘッダーが出ている間だけ、wrap をヘッダー下へ（+1rem） */
  body:has(#mnStickyHeader:not(.is-hidden)) .mn-sidebar-wrap{
    top: calc(var(--mn-header-h, 0px) + 1rem);
  }
  body.mn-header-visible .mn-sidebar-wrap{
    top: calc(var(--mn-header-h, 0px) + 1rem);
  }

  /* aside 自体は sticky にしない（wrap が担当） */
  .mn-sidebar{
    width: 100%;
    background: #f5f5f5;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    padding: 0 8px 8px;
    box-sizing: border-box;
    font-size: 12px;

    position: static;
  }

  .mn-sidebar__title{
    font-size: 1rem;
  }

  /* 枠の下に出すフッター（ボタン用） */
  .mn-sidebar__footer-out{
    width: 100%;
  }
  .mn-sidebar__footer-out .mn-sidebar__reset{
    width: 100%;
    border-radius: 0;
  }

  /* ----- サイドバー内部 ----- */
  .mn-sidebar__header{
    margin: 0 -8px 4px;
    padding: 4px 8px;
    background: #9ca3af;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  .mn-sidebar__body{ margin-top: 2px; }

  .mn-sidebar__current{
    padding: 4px 0 6px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
  }

  .mn-sidebar__current-main{
    font-size: 1rem;
    font-weight: 700;
    color: #314895;
  }

  .mn-sidebar__filters{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mn-sidebar__block{
    border-radius: 2px;
    padding: 6px 4px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e7eb;
  }

  /* 最後のブロックだけ罫線を消す */
  .mn-sidebar__filters .mn-sidebar__block:last-child{
    border-bottom: none;
  }

  .mn-sidebar__block-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .mn-sidebar__block-label{
    font-size: 0.8rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 0;
  }

  .mn-sidebar__block-clear{
    border: none;
    background: none;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
  }
  .mn-sidebar__block-clear:hover{ color: #111827; }

  .mn-sidebar__block-body{
    font-size: 11px;
    margin-top: 2px;
  }

  .mn-sidebar__row{
    grid-template-columns: 72px 1fr; /* 左ラベル固定 / 右は残り全部 */
    gap: 8px;
    align-items: start;
    padding-top: 1px;
  }

  .mn-sidebar__row-label{
    color: #6b7280;
    white-space: nowrap;
    font-size: 0.7rem;
  }

  .mn-sidebar__row-value{
    text-align: left;
    min-width: 0;
    word-break: break-word;
    font-size: 1rem;
    font-weight: 700;
    color: rgb(49, 72, 149);
  }

  /* サイドバークリック */
  .mn-sidebar__row-value--clickable{ cursor: pointer; }
  .mn-sidebar__color-line{ line-height: 1.4; }

  /* =========================
     サイドバー：選択サムネ（色/タイプなど）
     - 50px
     - 多い時は「枠内で折り返し」+「3段まで表示、超えたら縦スクロール」
     ========================= */
  .mn-sidebar__thumb-row{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;

    /* 50px × 3段 + gap(6px) × 2 = 162px */
    max-height: calc(50px * 3 + 6px * 2);
    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .mn-sidebar__thumb{
    width: 45px;
    height: 45px;
    flex: 0 0 50px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
  }

  .mn-sidebar__thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 色は画像URLじゃなく背景画像で描く（swatch流用） */
  .mn-sidebar__thumb--color{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .mn-sidebar__color-line{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 既存ボタン */
  .mn-sidebar__reset{
    width: 100%;
    border-radius: 0;
    border: none;
    background: #0b1f5a;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    padding: 0.6rem 0;
  }
  .mn-sidebar__reset:hover,
  .mn-sidebar__reset:active{ background: #3b82f6; }

  @media (max-width: 960px){
    .mn-sidebar__reset{
      width: 90%;
      margin: 0 auto;
      display: block;
    }
  }

  .mn-sidebar__reset-hint{
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #1f2937;
    position: relative;
    line-height: 1.5;
  }
  .mn-sidebar__reset-hint::before{
    content: "";
    position: absolute;
    top: -8px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #f8fafc;
  }
  .mn-sidebar__reset-hint::after{
    content: "";
    position: absolute;
    top: -9px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e2e8f0;
  }
  .mn-sidebar__reset-hint p{ margin: 0; }

  /* =========================
     3) 質問ブロック共通
     ========================= */
  .mn-question-block{
    margin-bottom: 56px; /* セクション間の余白 */
  }

  .mn-question-title{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    color: #072033;
  }

  .mn-question-line{
    width: 100%;
    display: block;
    margin-bottom: 16px;
  }

  /* =========================
     4) グリッド（カード一覧）
     ========================= */
  .mn-type-card-row{
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--mn-card-size));
    gap: var(--mn-card-gap);
    justify-content: center;
    align-items: start;
  }

  /* wrap を grid 直下に展開して、accordion を “全幅行” にできるようにする */
  .mn-type-major-wrap{ display: contents; }

  /* =========================
     5) カード共通（200/160 は変数で吸収）
     ========================= */
  .mn-type-card{
    width: var(--mn-card-size);
    height: var(--mn-card-size);
    border-radius: var(--mn-card-radius);
    border: 2px solid #e5e7eb;
    background: #fff;
    box-shadow: var(--mn-card-shadow);
    padding: var(--mn-card-pad);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    overflow: hidden;

    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  }

  .mn-type-card:hover{
    box-shadow: var(--mn-card-shadow-hover);
    transform: translateY(-1px);
  }

  .mn-type-card.is-selected{
    background: rgb(255, 255, 123);
    border-color: #e5e7eb;
    box-shadow: var(--mn-card-shadow);
  }

  .mn-type-card__thumb{
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  .mn-type-card__thumb img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
  }

  .mn-type-card__label{
    flex: 0 0 auto;
    width: 100%;
    color: #111827;
    font-size: var(--mn-type-label-size);
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    padding: 0 8px 2px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  .mn-type-card.has-help{
    overflow: visible;
  }

  .mn-type-card__label.has-help{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: visible;
    min-height: calc(var(--mn-type-label-size) * 2 * 1.25);
  }

  .mn-type-card__label.has-help .mn-option-help-text{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    flex: 0 1 auto;
    max-width: calc(100% - 24px);
    width: auto;
  }

  .mn-type-card__label.has-help .mn-option-help{
    flex: 0 0 auto;
  }

  /* =========================
     6) 中分類アコーディオン（吹き出し）
     ========================= */
  .mn-type-accordion{
    display: none;
    grid-column: 1 / -1;
    position: relative;
    margin-top: 12px;
    margin-bottom: 28px;

    padding: 32px 40px;
    background: #fff9d8;
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(15,23,42,.16);
    border: none;
    width: 100%;
  }

  .mn-type-accordion.is-open{ display: block; }

  .mn-type-card-row .mn-type-accordion{
    display: none !important;
  }

  .mn-type-accordion::before{
    content: "";
    position: absolute;
    top: -12px;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff9d8;
  }

  /* 中分類グリッド（通常は“カード幅”で並べる） */
  .mn-type-sub-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--mn-card-size));
    gap: var(--mn-card-gap);
    justify-content: center;
  }

  .mn-type-sub-item{
    width: auto;
    cursor: pointer;
    user-select: none;
  }

  .mn-type-sub-item.is-disabled .mn-type-card{
    opacity: .45;
    filter: grayscale(0.35);
  }
  .mn-type-sub-item.is-disabled .mn-type-card__label{
    color: #8a8a8a;
  }
  .mn-type-sub-item.is-disabled .mn-type-card__thumb img{
    opacity: .6;
  }

  .mn-type-sub-item.is-selected .mn-type-card{
    background: #fff3a3;
    border-color: #e5e7eb;
    box-shadow: var(--mn-card-shadow);
  }

  /* ★ アコーディオンホスト：普段はgrid/flexに参加させない */
  .mn-type-accordion-host{
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 12px;
  }
  .mn-type-accordion-host.is-active{ display: block; }

  /* =========================
     7) アコーディオン → モーダル内に移して使う時の見た目調整
     ========================= */
  #mnSubPickBody .mn-type-accordion{
    display: block !important;
    margin: 0;
    box-shadow: none;
    border-radius: 12px;
    background: #fff;
  }
  #mnSubPickBody .mn-type-accordion::before{ display: none; }

  /* =========================
     8) カラー選択トリガー（カードと同じ見た目に統一）
     ========================= */
  .color-trigger-row{
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--mn-card-size));
    gap: var(--mn-card-gap);
    justify-content: center;
    align-items: start;
  }

  .btn-color-trigger{
    width: var(--mn-card-size);
    height: var(--mn-card-size);
    border-radius: var(--mn-card-radius);
    border: 2px solid #e5e7eb;
    background: #fff;
    box-shadow: var(--mn-card-shadow);
    padding: var(--mn-card-pad);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  }

  .btn-color-trigger:hover{
    box-shadow: var(--mn-card-shadow-hover);
    transform: translateY(-1px);
  }

  .btn-color-trigger .mn-type-card__thumb{
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  .btn-color-trigger img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  .btn-color-trigger .mn-type-card__label{
    width: 100%;
    text-align: center;
  }

  /* =========================
     9) モーダル（単水栓ページ用）
     ========================= */
  .mn-modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .mn-modal-backdrop.is-open{ display: flex; }

  .mn-modal{
    background: #fff;
    border-radius: 16px;
    padding: 18px 22px 22px;
    max-width: 1140px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 18px 36px rgba(0,0,0,.35);
    border: 2px solid #111827;
    position: relative;
  }

  .mn-modal__header{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    position: relative;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
  }

  .mn-modal__title-wrap{
    flex: 0 1 auto;
    text-align: center;
  }

  .mn-modal__title-bar{
    width: 120px;
    height: 6px;
    background: #ffe95c;
    border-radius: 999px;
    margin: 0 auto 6px;
  }

  .mn-modal__title{ font-size: 20px; font-weight: 700; }

  .mn-modal__close{
    border: none;
    background: none;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .mn-modal__body{ font-size: 14px; }

  #faucetColorModalTitle,
  #handleColorModalTitle{
    margin-bottom: 0.4rem;
  }

  /* =========================
     10) カラータイル（単水栓ページ用）
     ========================= */
  .mn-color-tile-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 18px;
    justify-content: center;
  }

  .mn-color-tile{
    width: 110px;
    cursor: pointer;
    text-align: center;
    user-select: none;
  }
  .mn-color-tile.is-hidden{ display: none; }

  .mn-color-tile__swatch{
    width: 100px;
    height: 100px;
    border-radius: 4px;
    box-shadow: 0 8px 10px rgba(0,0,0,.35);
    border: 2px solid transparent;
    margin: 0 auto 6px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
  }

  .mn-color-tile.is-selected .mn-color-tile__swatch{
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.6);
  }

  .mn-color-tile__label{
    font-size: 13px;
    font-weight: 600;
  }

  .mn-color-tile__label.has-help{
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* ★ 画像URLマップ（ここだけ差し替えればOK） */
  .mn-color-tile__swatch[data-color-key="シルバー"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/シルバー系.webp"); }
  .mn-color-tile__swatch[data-color-key="ゴールド・ブロンズ"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/ゴールド・ブロンズ系.webp"); }
  .mn-color-tile__swatch[data-color-key="白"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/白系.webp"); }
  .mn-color-tile__swatch[data-color-key="黒"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/黒系.webp"); }
  .mn-color-tile__swatch[data-color-key="その他"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/カラー_その他.webp"); }
  .mn-color-tile__swatch[data-color-key="ブルー"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Blue.webp"); }
  .mn-color-tile__swatch[data-color-key="イエロー"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Yellow.webp"); }
  .mn-color-tile__swatch[data-color-key="レッド"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Red.webp"); }
  .mn-color-tile__swatch[data-color-key="グリーン"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Green.webp"); }
  .mn-color-tile__swatch[data-color-key="オレンジ"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Orange.webp"); }
  .mn-color-tile__swatch[data-color-key="ピンク"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Pink.webp"); }
  .mn-color-tile__swatch[data-color-key="グレー"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Gray.webp"); }
  .mn-color-tile__swatch[data-color-key="ブラウン"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Brown.webp"); }
  .mn-color-tile__swatch[data-color-key="ガラス（透明）"]{ background-image:url("https://product.kakudai.jp/volume/maintenance/choiceImg/webp/Glass.webp"); }

  /* =========================
     11) 商品カード
     ========================= */
  .itemFlex{
    width: 90%;
    margin: 0 auto;
  }

  .itemFlexStyle{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
  }

  .itemLink{ text-decoration: none; color: inherit; }

  .itemList{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    padding: 4px 6px 8px;
    box-sizing: border-box;
    position: relative;

    cursor: pointer;
    user-select: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  }

  .mn-item-card__imageWrapper{
    width: 100%;
    height: 180px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    position: relative;
  }

  .mn-item-card__imageWrapper img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  .mn-item-card__row{
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
  }

  .mn-item-card__label{
    display: inline-block;
    margin-top: 0.2rem;
  }

  .mn-item-card__value{
    font-weight: 600;
    text-align: left;
    letter-spacing: .05rem;
  }

  .itemList .mn-item-check{
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 30;
    pointer-events: none;

    display: none;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: none;

    color: #2563eb;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
  }

  .itemList.is-selected{
    border-color: #6fa6ff;
    border-width: 3px;
    box-shadow: none;
  }
  .itemList.is-selected .mn-item-check{ display: flex; }

  .itemList:focus{
    outline: none;
    box-shadow: none;
  }

  .itemList:focus-visible{
    box-shadow: 0 0 0 3px rgba(37,99,235,.35);
  }

  /* =========================
     12) 画面下追従：検索結果数バー（mn-main幅に追従）
     ========================= */
  .mn-resultbar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    pointer-events: none;
  }

  .mn-resultbar__inner{
    pointer-events: auto;
    background: rgba(0,0,0,.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 3rem;
    box-sizing: border-box;
  }

  .mn-resultbarText{
    letter-spacing: .1rem;
  }

  .mn-resultbar__label,
  .mn-resultbar__unit{
    font-size: 1rem;
  }

  .mn-resultbar__count{
    font-size: 2rem;
    font-weight: 900;
    color: #ffe95c;
  }

  .junpBtn{
    background: rgb(255, 255, 111);
    color: #000;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: .1rem;
    padding: .6rem 1.4rem;
    text-decoration: none;
  }

  .junpBtn:hover{
    background-color: #4963da;
    color: white;
  }

  /* =========================
     13) 選択商品アクションバー
     ========================= */
  .mn-selectedbar{
    position: fixed;
    bottom: 96px;
    left: 0;
    width: 100%;
    z-index: 2100;
    display: none;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }

  @media (min-width: 961px){
    .mn-selectedbar{
      bottom: calc(var(--mn-resultbar-h, 64px) + 16px);
      align-items: center;
    }
  }

  .mn-selectedbar.is-visible{
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  .mn-selectedbar__btn{
    pointer-events: auto;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 18px 86px;
    font-size: 1.4rem;
    font-weight: 700;
    gap: 16px;
    align-items: center;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
    cursor: pointer;
  }
  .mn-selectedbar__btn:hover{ background: #2563eb; }

  .mn-selectedbar__text{ font-size: 1.6rem; }

  .mn-selectedbar__count{
    font-size: 1.2rem;
    font-weight: 600;
    opacity: .95;
  }

  .results-phase.has-selectedbar-space{
    padding-bottom: 160px;
  }

  /* =========================
     14) もっと絞り込む（中央ボタン）
     ========================= */
  .mn-more-filter{
    position: relative;
    margin-top: 40px;
    padding-bottom: 8px;
  }

  .mn-more-filter.is-open{
    background: #f3f6fb;
    padding-bottom: 24px;
  }

  .mn-more-filter__line{
    margin: 4rem 0 18px;
  }

  .mn-more-filter__btn{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid #1f3b82;
    background: #2f4fa3;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
  }
  .mn-more-filter__btn:hover{ filter: brightness(1.05); }

  .mn-more-filter.is-open .mn-more-filter__btn{
    background: #111827;
    border-color: #111827;
  }

  .mn-more-filter__btnIcon{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mn-more-filter__btnIcon::before{
    content: "∨";
    font-size: 12px;
    line-height: 1;
    transform: translate(0, 0);
  }
  .mn-more-filter.is-open .mn-more-filter__btnIcon::before{ content: "∧"; }

  .mn-more-filter__panel{ margin-top: 24px; }

  .mn-more-filter__panelInner{
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 24px 0;
  }

  .mn-more-filter__note{
    color: #374151;
    font-size: 14px;
  }

  /* =========================
     15) スコープ別：compact化 & 5カラム化
     ========================= */
  .mn-modal__body,
  #mnSubPickBody{
    --mn-card-size: 160px;
    --mn-card-radius: 20px;
    --mn-card-pad: 10px;
  }

  /* モーダル内グリッド：見た目を揃える */
  .mn-modal__body .mn-type-card-row,
  #mnSubPickBody .mn-type-card-row,
  .mn-modal__body .mn-type-sub-grid,
  #mnSubPickBody .mn-type-sub-grid{
    justify-content: center;
  }

  /* もっと絞り込む：is-open時だけ compact + 5カラム */
  .mn-more-filter.is-open{
    --mn-card-size: 160px;
    --mn-card-radius: 20px;
    --mn-card-pad: 10px;
  }

  .mn-more-filter.is-open .mn-type-card-row{
    grid-template-columns: repeat(auto-fill, minmax(var(--mn-card-size), 1fr));
    justify-content: center;
  }

  .mn-more-filter.is-open .mn-type-sub-grid{
    grid-template-columns: repeat(auto-fill, minmax(var(--mn-card-size), 1fr));
    justify-content: center;
  }

  /* =========================
     16) レスポンシブ（600px / 360px）
     ========================= */
  @media (max-width:600px){
    .mn-more-filter.is-open .mn-type-card-row{
      grid-template-columns: repeat(2, minmax(0, var(--mn-card-size)));
    }

    .mn-more-filter.is-open .mn-type-sub-grid{
      grid-template-columns: repeat(2, minmax(0, var(--mn-card-size)));
    }
  }

  @media (max-width:360px){
    .mn-modal{
      width: 94%;
      padding: 14px 14px 18px;
    }

    .mn-modal__body,
    #mnSubPickBody{
      --mn-card-size: 120px;
      --mn-card-radius: 16px;
      --mn-card-pad: 8px;
    }

    .mn-color-tile-grid{
      gap: 14px;
    }

    .mn-color-tile{
      width: 80px;
    }

    .mn-color-tile__swatch{
      width: 70px;
      height: 70px;
    }
  }

  /* =========================
     17) 追従バー/選択バー（既存hotfix）＋ヘッダー
     ========================= */
  #mnResultBar.mn-resultbar{
    display: block !important;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    left: 0;
    width: 100%;
  }
  #mnResultBar .mn-resultbar__inner{ pointer-events: auto; }

  body{
    overflow-x: hidden;
    padding-top: var(--mn-header-h, 0px); /* ヘッダー分だけ本文を下げる */
  }

  #mnSelectedBar[hidden]{ display: none !important; }
  #mnSelectedBar:not([hidden]){
    display: flex !important;
    justify-content: center;
  }

  /* 追従ヘッダー（下スクロールで隠れて、上スクロールで出る） */
  .headerContent{
    position: sticky; /* JS有効時はfixedになる想定の保険 */
  }

  #mnStickyHeader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    background: #fff;
    transform: translateY(0);
    transition: transform .18s ease;
    will-change: transform;
  }

  #mnStickyHeader.is-hidden{
    transform: translateY(-110%);
  }

  .acodionTitle{
    font-size: 1.2rem;
    border-bottom: solid 3px #d3d3d3;
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
    width: 90%;
    margin: 0 auto 1rem auto;
  }

  body .headerContent .headerContentItem img {
    width: 15%;
  }
  body .headerContent .headerContentItem{
    padding-top: 0.3rem;
  }

  /* テストリンク */
  .mn-header-test-links{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    z-index: 1;
  }

  .mn-header-test-toggle{
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    font-size: 11px;
    line-height: 1;
  }

  .mn-mobile-hide{
    display: inline-flex;
  }

  .mn-header-test-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
  }

  .mn-header-test-link:hover{
    background: #1f2937;
  }

  /* =========================
     18) 気候区分ラベル（一般地/寒冷地/一般地／寒冷地共用）
     ========================= */
  .mark-general,
  .mark-cold,
  .mark-both{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 0.5;
  }

  /* 一般地：黄色 */
  .mark-general{
    background-color: #f7cd8d;
  }

  /* 寒冷地：青 */
  .mark-cold{
    background-color: #8daef7;
  }

  /* 一般地／寒冷地共用：左 黄 / 右 青（くっきり） */
  .mark-both{
    background: linear-gradient(
      90deg,
      #f7cd8d 0%,
      #f7cd8d 25%,
      #8daef7 40%,
      #8daef7 100%
    );
  }

  /* バッジ内の整列を安定させる */
  .mn-item-card__label.mark-general,
  .mn-item-card__label.mark-cold,
  .mn-item-card__label.mark-both{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 0.5;
  }

  /* 一般地 ? ヘルプ */
  .mn-climate-help{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    background: rgb(109 109 109 / 68%);
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    cursor: help;
    flex-shrink: 0;
    margin-left: 0.5rem;
  }

  .mn-climate-help__icon{
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: 700;
    line-height: 0.5;
  }

  /* ポップアップ本体 */
  .mn-climate-tooltip{
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 6px;

    padding: 8px 10px;
    min-width: 230px;

    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 6px;

    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
    text-align: left;
  }

  /* ホバー時に表示 */
  .mn-climate-help:hover .mn-climate-tooltip{
    opacity: 1;
  }

  /* 選択項目の説明ツールチップ */
  .mn-option-help{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    flex-shrink: 0;
  }

  .mn-option-help__icon{
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    object-fit: contain;
    cursor: help;
  }

  .mn-option-tooltip{
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 8px 10px;
    min-width: 240px;
    max-width: 320px;
    width: max-content;
    max-width: min(320px, 80vw);
    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 6px;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
    text-align: left;
  }

  .mn-option-help:hover .mn-option-tooltip,
  .mn-option-help.is-visible .mn-option-tooltip{
    opacity: 1;
    pointer-events: auto;
  }

  /* =========================
     19) モーダルのフッターボタン
     ========================= */
  .modalCloseBtn{
    display: flex;
    width: 100%;
    margin-top: 24px;
  }
  .modalCloseBtn--right{
    justify-content: flex-end;
  }
  .mn-modal__close-btn{
    border: none;
    background: linear-gradient(120deg, #0a4fb3, #0f7adb);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: .04em;
    box-shadow: 0 8px 20px rgba(15, 122, 219, 0.25);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  }
  .mn-modal__close-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 122, 219, 0.32);
  }
  .mn-modal__close-btn:active{
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(15, 122, 219, 0.28);
    opacity: 0.9;
  }

  /* =========================
     20) Mobile sidebar menu（ベース）
     ========================= */
  .mn-sidebar__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mn-sidebar__close{
    display: none;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .mn-sidebar-toggle{
    display: none;
    padding: 10px 14px;
    margin-left: auto;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    color: #314895;
    cursor: pointer;
  }

  .mn-sidebar-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 11000;
  }

  body.mn-sidebar-open .mn-sidebar-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  body.mn-sidebar-open{
    overflow: hidden;
  }


  .sp-only{
    display: none;
}

  /* =========================
     21) レスポンシブ（max-width: 960px）
     ========================= */
  @media (max-width:960px){
    .mn-layout{
      display: block;
    }

    /* サイドバー表示用トグルボタン */
    .mn-sidebar-toggle{
      display: inline-flex;
      white-space: nowrap;
      font-size: 0.8rem;
      background: #314895;
      color: #fff;
      border-color: #314895;
    }

    .mn-sidebar__close{
      display: inline-flex;
    }

    .mn-sidebar__header{
      position: sticky;
      top: 0;
      z-index: 2;
      background: #9ca3af;
    }

    .mn-header-logo{
      width: 55%;
      max-width: 88vw;
      height: auto;
    }

    body .headerContent .headerContentItem img.mn-header-logo{
      width: 55%;
    }

    .mn-mobile-hide{
      display: none !important;
    }

    /* モバイル時はサイドバーをモーダル風に */
    .mn-sidebar-wrap{
      position: fixed;
      left: 50%;
      top: 10px;
      height: 90vh;
      width: 90vw;
      max-width: 560px;
      transform: translateX(-200%);
      transition: transform 0.25s ease;
      z-index: 11010;
      background: #f5f5f5;
      box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 200px;
      visibility: hidden;
      pointer-events: none;
    }

    body.mn-sidebar-open .mn-sidebar-wrap{
      transform: translateX(-50%);
      visibility: visible;
      pointer-events: auto;
    }

    .mn-sidebar{
      width: 100%;
      margin: 0 auto;
    }

    /* カード系サイズ調整 */
    :root{
      --mn-card-size: 160px;
      --mn-card-radius: 20px;
      --mn-card-pad: 10px;
      --mn-type-label-size: 0.8rem;
    }

    .mn-type-card-row,
    .mn-type-sub-grid{
      grid-template-columns: repeat(2, var(--mn-card-size));
      justify-content: center;
    }

    .itemFlexStyle{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itemFlex{
      width: 100%;
    }

    .color-trigger-row{ justify-content: center; }

    .mn-more-filter__btn{
      font-size: 16px;
      padding: 10px 18px;
    }

    .mn-selectedbar__btn{
      padding: 12px 48px;
    }

    .mn-selectedbar__text{
      font-size: 1.2rem;
    }

    .mn-selectedbar__count{
      font-size: 1rem;
    }

    .mn-item-card__row{
      font-size: 11px;
      line-height: 1.45;
    }

    .mn-item-card__value{
      letter-spacing: .02rem;
      border-bottom: none;
      text-decoration: none;
    }

    .mn-question-title{
      font-size: 1.2rem;
    }

    .junpBtn{
      font-size: 0.7rem;
      padding: .6rem 0.7rem;
    }

    .mn-color-tile{
      width: 90px;
    }

    .mn-color-tile__swatch{
      width: 70px;
      height: 70px;
    }

    /* ヘッダー内テストリンクの詰め */
    .mn-header-test-links{
      right: 10px;
      gap: 6px;
    }

    .mn-header-test-link{
      padding: 5px 8px;
      font-size: 11px;
    }

    /* 結果バー：画面幅いっぱいに伸ばす */
    .mn-resultbar__inner{
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 0.6rem 1rem;
      border-radius: 0;
    }

    .mn-resultbar__label{
      font-size: 0.8rem;
    }

    .sp-only{
        display: block;
    }
  }