/* カスタマイズ用CSS */
/**
 * 20220815 ksp hara #25257
 */
.ec-productRole .ec-productRole__tag {
  color: #fff;
  border: solid 1px #5cb1b1;
  background-color: #5cb1b1;
}

/**
 * 20220617 ksp jin #24280
 */
.ec-inlineBtn,
.ec-inlineBtn--primary,
.ec-inlineBtn--action,
.ec-inlineBtn--cancel,
.ec-blockBtn,
.ec-blockBtn--primary,
.ec-blockBtn--action,
.ec-blockBtn--cancel {
  border-top-left-radius: 50rem;
  border-top-right-radius: 50rem;
  border-bottom-left-radius: 50rem;
  border-bottom-right-radius: 50rem;
}

/**
   * 20220617 ksp jin #24282
   */
.bg-ksk-blue {
  background-color: #2f436e;
}

.bg-ksk-black {
  background-color: #000000;
}


.ec-pageHeader h1 {
  text-align: center;
}

/**
   * 20220617 ksp jin #24291
   */
.ec-blockBtn--action.disabled,
.ec-blockBtn--action[disabled],
fieldset[disabled] .ec-blockBtn--action,
.ec-blockBtn--action.disabled:hover,
.ec-blockBtn--action.disabled:focus,
.ec-blockBtn--action.disabled.focus,
.ec-blockBtn--action[disabled]:hover,
.ec-blockBtn--action[disabled]:focus,
.ec-blockBtn--action[disabled].focus,
fieldset[disabled] .ec-blockBtn--action:hover,
fieldset[disabled] .ec-blockBtn--action:focus,
fieldset[disabled] .ec-blockBtn--action.focus {
  background-color: #525263;
  border-color: #525263;
}

/**
   * 20220513 ksp jin
   */
@media only screen and (min-width: 768px) {
  /*カテゴリ縦も並べる*/
  .ec-itemNav__nav {
    display: flex;
    flex-direction: column;
  }
  /*文字を左寄せ*/
  .ec-itemNav__nav li a {
    text-align: left;
  }

  /*カテゴリの位置と横幅調整*/
  .ec-itemNav__nav li ul li ul,
  .ec-itemNav__nav li ul li:hover ul li {
    width: 100%;
  }

  .ec-itemNav__nav li ul {
    left: 100%;
    width: 100%;
    top: 0;
  }

  /*背景色、文字サイズ調整*/
  .ec-itemNav__nav > li:hover > a {
    background-color: #eee;
  }

  .ec-itemNav__nav li a,
  .ec-itemNav__nav li ul li a {
    padding: 1rem;
  }
  /*タイトル画像サイズ調整*/
  .title-img {
    height: 3.5rem;
    width: auto !important;
  }
  /*検索窓サイズ調整*/
  .ec-headerSearch .ec-headerSearch__category .ec-select select {
    max-width: 110px;
  }

  .ec-borderedDefs dd {
    line-height: 1.7;
  }
}
.ec-borderedDefs dd {
  line-height: 1.7;
}
/*#24769*/
.form-inline #entry_mailmaga_flg label {
  display: inline-block;
}

/*#25081*/
.ec-productRole__description img {
  width: auto;
}

@media (max-width: 767.98px) {
  /*SPサイズ時は左側を大きく*/
  .ec-headerNaviRole .ec-headerNaviRole__left {
    width: calc(100% * 2 / 3);
  }
  .ec-headerNaviRole .ec-headerNaviRole__right {
    width: calc(100% / 3);
  }
}

/* 20220810 Add Start S.Murayama */
/* 営業日カレンダープラグイン用 */
/* .apg_sc_table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.5;
  margin-left: auto;
  margin-right: 10px;
  margin-bottom: 20px;
  float: left;
} */

.apg_sc_table th,
.apg_sc_table td {
  border: none;
  /*border: 1px solid #ccc;*/
}

.apg_sc_table thead th {
  padding: 0.5rem;
  font-weight: bold;
  vertical-align: top;
  color: #fff;
  background: #efefef;
}
.apg_sc_table tbody th {
  /*background: #efefef;*/
  /* line-height: 2.4em; */
  text-align: center;
}

.apg_sc_table td {
  padding: 0.5rem;
  vertical-align: top;
  text-align: center;
  background-color: #fff;
}
/* ★休日のカラ ーはここで設定しています。 */
.apg_sc_table .apg_sc_holiday {
  background: #ecc6c7;
  color: #f00;
}
.apg_sc_table .apg_sc_today {
  background: #fff99d;
  color: darkblue;
  font-weight: bold;
}
.apg_sc_table .apg_sc_saturday {
  color: blue;
}

.apg_sc_table .apg_sc_sunday {
  color: #f00;
}

/* .apg_sc_table {
  float: none;
  margin-top: 20px;
  margin-right: auto;
} */
/* @media only screen and (max-width: 767px) {
  .apg_sc_table {
    float: none;
    margin-top: 20px;
    margin-right: auto;
  }
} */
/* 20220810 Add End S.Murayama */


.fontred{
color:#de5d50;
}
.fancybox-content {
    max-width: 90vw; /* ビューポートの 90% 幅 */
    max-height: 80vh; /* ビューポートの 80% 高さ */
}

.fancybox-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}
@media (max-width: 768px) {
    .fancybox-content {
        max-width: 95vw;
        max-height: 85vh;
    }

    .product_img {
        width: 100%;
        height: auto;
    }
}
@media (max-width: 767.98px) {
  .pagetop {
    display: none !important;
  }
}
.ec-hide-review,
.ec-hide-cart {
  display: none !important;
}

.ec-productImageWrapper {
  position: relative;
  overflow: hidden;
  background-color: #fff; /* 👈 背景透け対策 */
}

.ec-productImageInner {
  position: relative;
  width: 100%;
}

.ec-productImageInner img {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
}

.ec-productImageInner .second-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* ✅ 2枚目があるときだけホバー切替 */
.ec-productImageWrapper.has-hover:hover .second-image {
  opacity: 1;
}
.ec-productImageWrapper.has-hover:hover .first-image {
  opacity: 0;
}

/* ホバー可能なデバイスにだけ hover 効果を適用 */
@media (hover: hover) and (pointer: fine) {
  .ec-productImageWrapper.has-hover:hover .second-image {
    opacity: 1;
  }
  .ec-productImageWrapper.has-hover:hover .first-image {
    opacity: 0;
  }
}

.soldout-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
}

.clamp2lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;             /* 正方形 */
  object-fit: cover;              /* はみ出す部分を中央から裁断 */
  object-position: center center; /* 念のため中央指定 */
  display: block;
}

/* カテゴリ（selectボックス）の角丸除去 */
select.category_id {
    border-radius: 0 !important;
}

/* キーワード入力欄の角丸除去 */
input.search-name {
    border-radius: 0 !important;
}

/* 検索ボタンの角丸除去 */
.ec-headerSearch__keywordBtn {
    border-radius: 0 !important;
}

/* 検索ボックス全体の囲み枠の角丸除去 */
.searchform {
    border-radius: 0 !important;
}

/* ▼ カテゴリセレクト（select） */
select.category_id,
.ec-select_search select {
    border-radius: 0 !important;
}

/* ▼ キーワード入力欄 */
input.search-name,
.ec-input input[type="text"] {
    border-radius: 0 !important;
}

/* ▼ 検索ボタン */
.ec-headerSearch__keywordBtn,
.ec-headerSearch__keywordBtn .ec-icon,
.ec-headerSearch__keywordBtn img {
    border-radius: 0 !important;
}

/* ▼ 検索フォーム本体 */
form.searchform,
div.ec-headerSearch,
.ec-headerSearch__keyword,
.ec-headerSearch__category {
    border-radius: 0 !important;
}

/* ▼ セレクトボックスの文字を左寄せ */
select.category_id {
    text-align: left !important;
    text-indent: 0.5em; /* ちょっと余白を追加して見やすく */
}

/* ▼ を押しても反応するように、選択ボックス全体の表示方法を強制 */
.ec-select_search {
    position: relative;
    width: 100%;
}

.ec-select_search select {
    width: 100%;
    appearance: menulist; /* ▼のスタイルをブラウザ標準にする */
    cursor: pointer;
}

/* IE/Edge/Safari対策：透明な要素がかぶってないか確認 */
.ec-select_search::after {
    pointer-events: none; /* もし装飾要素がある場合でもクリックを透過 */
}

/* ▼ セレクトボックスの文字を左寄せ（Chrome/Edge対応） */
select.category_id {
    text-align-last: left !important; /* ← 実際の表示位置に影響するプロパティ */
    padding-left: 10px;                /* ← インデントで擬似左寄せ */
    direction: ltr;                    /* ← 必要に応じて左→右方向に指定 */
}

/* ▼マークをクリック可能にする（装飾を透過） */
.ec-select_search::after {
    content: none !important; /* デザイン用矢印が邪魔な場合は削除 */
    pointer-events: none;
}

/* ▼セレクトボックスの装飾・干渉を完全に除去してネイティブ表示に戻す */
.ec-select_search {
    all: unset; /* div.ec-select の干渉CSSを全解除 */
    display: block;
    max-width: 150px;
}

/* ▼ select要素自体の再整形 */
select.category_id {
    appearance: menulist;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    width: 100%;
    box-sizing: border-box;

    text-align: left;
    text-align-last: left;
    direction: ltr;
    border-radius: 0;
    cursor: pointer;
}

/* ▼ 不要な装飾が残る場合は強制非表示 */
.ec-select_search::after,
.ec-select::after {
    content: none !important;
    pointer-events: none !important;
}

@media (max-width: 767.98px) {
  /* スマホ幅時にキーワード欄をフルに近く広げる */
  .ec-headerSearch__keyword {
    width: 100%;
    flex-grow: 1;
  }

  .ec-input {
    width: 100%;
  }

  input.search-name {
    width: 100%;
    font-size: 16px; /* スマホで読みやすく */
    padding: 10px 36px 10px 12px; /* ボタンが右にある前提で余白調整 */
    box-sizing: border-box;
  }

  .ec-headerSearch__keywordBtn {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
  }

  .ec-headerSearch__keywordBtn img {
    width: 16px;
    height: 16px;
  }

  .ec-headerSearch {
    flex-direction: column; /* カテゴリとキーワードを縦並びにするのも検討可能 */
  }

  .ec-headerSearch__category {
    width: 100%;
    margin-bottom: 8px;
  }
}

@media (max-width: 767.98px) {
  /* ▼ selectとinputの高さ・表示を揃える */
  select.category_id,
  input.search-name {
    height: 42px; /* 統一した高さ */
    font-size: 16px;
    line-height: 1.4;
    padding: 8px 10px;
    box-sizing: border-box;
    width: 100%;
  }

  /* ▼ 検索フォームの内側を統一 */
  .ec-headerSearch__category,
  .ec-headerSearch__keyword {
    width: 100%;
    margin-bottom: 8px;
  }

  /* ▼ フォーム全体の枠を整える */
  .searchform {
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    box-sizing: border-box;
  }

  /* ▼ 検索ボタンの位置調整 */
  .ec-headerSearch__keywordBtn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
  }

  .ec-headerSearch__keywordBtn img {
    width: 16px;
    height: 16px;
  }

  .ec-input {
    position: relative;
    width: 100%;
  }
}

/* 共通スタイル */
#header-category-wrapper,
#header-category-pc {
    margin: 1rem 0;
}

.category-menu ul,
.category-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-menu li,
.category-nav li {
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
}

.category-menu ul ul,
.category-nav ul ul {
    padding-left: 1rem;
    background-color: #f9f9f9;
}

/* PC版 hover展開（任意） */
@media (min-width: 768px) {
    .category-nav li {
        position: relative;
    }

    .category-nav ul ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        z-index: 10;
    }

    .category-nav li:hover > ul {
        display: block;
    }
}

/* 共通スタイル */
.category-header {
  margin: 1rem 0;
}

.category-toggle-btn {
  display: none;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.category-menu ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

.category-menu li {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.category-menu a {
  text-decoration: none;
  color: #333;
}

.child-categories {
  padding-left: 1rem;
  background-color: #f9f9f9;
}

/* PC表示：カテゴリ常時表示＋ボタン非表示 */
@media (min-width: 768px) {
  .category-toggle-btn {
    display: none;
  }
  .category-menu {
    display: block !important;
  }
}

/* アコーディオンカテゴリ基本スタイル */
.category-accordion {
  width: 100%;
  margin: 1rem 0;
}

.category-accordion .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.category-accordion .menu-item {
  position: relative;
  width: 15%;
  border: 1px solid #ccc;
  margin: 0.5rem;
  background: #fff;
}

.category-accordion .menu-title {
  display: block;
  padding: 10px;
  text-align: center;
  background-color: #f5f5f5;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.category-accordion .sub-menu {
  display: none;
  background: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid #ccc;
}

.category-accordion .sub-menu li a {
  display: block;
  padding: 8px 10px;
  font-size: 9px;
  color: #333;
  text-decoration: none;
}

.category-accordion .sub-menu li a:hover {
  background-color: #f0f0f0;
}

/* スマホ表示 */
@media (max-width: 767.98px) {
  .category-accordion .menu {
    display: block;
  }

  .category-accordion .menu-item {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .category-accordion {
    display: none;
  }
}

.side-category-accordion .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-category-accordion .menu-item > a {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.side-category-accordion .sub-menu,
.side-category-accordion .sub-sub-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #ccc;
  min-width: 200px;
  z-index: 10;
}

.side-category-accordion .menu-item:hover > .sub-menu,
.side-category-accordion .submenu-item:hover > .sub-sub-menu {
  display: block;
}

.side-category-accordion .sub-menu a,
.side-category-accordion .sub-sub-menu a {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.95rem;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.side-category-accordion .sub-menu a:hover,
.side-category-accordion .sub-sub-menu a:hover {
  background-color: #efefef;
}

.side-category-accordion .menu-item,
.side-category-accordion .submenu-item {
  position: relative;
}

html, body {
  overflow-x: hidden;
}

.side-category-accordion .menu-item > a {
  font-size: 16px;           /* ← 文字サイズを大きく */
  padding: 14px 12px;        /* ← 高さを広げる（上下に余白） */
  line-height: 1.6;          /* ← 行間を広げる（任意） */
}

.ec-productImageWrapper {
  position: relative;
  overflow: hidden;
}

.ec-productImageWrapper img {
  width: 100%;
  display: block;
  transition: opacity 0.3s ease;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.second-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .ec-productImageWrapper.has-hover:hover .second-image {
    opacity: 1;
  }
  .ec-productImageWrapper.has-hover:hover .first-image {
    opacity: 0;
  }
}

.category-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.category-text {
  font-size: 0.9rem;
  line-height: 1.2;
  color: #000;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ▼ カテゴリボックスの画像とテキストを横並びに左寄せ */
.category-box {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 100%;
  background-color: #fff;
}

.category-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.category-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #000;
  white-space: normal;
  overflow: hidden;
  display: block;
}

.category-arrow {
  margin-left: auto;
  color: #888;
  font-size: 1.25rem;
}

.category-hover-box {
  transition: background-color 0.3s, border-color 0.3s;
}

.category-hover-box:hover {
  background-color: #f8f9fa; /* 薄いグレー背景 */
  border-color: #007bff;     /* 青い枠線 */
}

.category-hover-box:hover .category-hover-arrow {
  color: #007bff; /* 矢印も青く */
}

/* ▼ おすすめ商品：画像と名前と価格の構成制御 */
.recommend-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px; /* 調整可：商品タイトル量に応じて */
}

.recommend-title-wrapper {
  flex-grow: 1;
  overflow: hidden;
}

.recommend-title {
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最大2行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-price-wrapper {
  margin-top: auto;
}

.recommend-price {
  color: #DE5D50;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

/* ★ おすすめ商品 5列レイアウト（PC） */
@media (min-width: 992px) {
  .ec-shelfGrid__item {
    width: 20%;
    float: left;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .ec-shelfGrid {
    margin-left: -8px;
    margin-right: -8px;
    overflow: hidden;
  }
}

/* 税込表示を少し小さめに調整（任意） */
.recommend-price .tax-label {
  font-size: 0.8rem;
  color: #555;
  margin-left: 0.25em;
}

.category-block {
  position: relative;
  z-index: 2;
}

@media (max-width: 575.98px) {
  .ec-newItemRole .row > div {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* フローティングカート全体 */
#floating-cart {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 9999;
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 240px;
  text-align: center;
}

/* 商品画像 */
.floating-cart-inner img {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}

/* 価格 */
.floating-price {
  font-size: 18px;
  color: #e60012;
  font-weight: bold;
  margin-bottom: 2px;
}

/* (税込) 表示を小さく */
.floating-tax {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

/* 数量表示ラベル */
.floating-quantity-label {
  display: block;
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
}

/* 数量入力 */
.floating-quantity input {
  width: 60px;
  text-align: center;
  margin-bottom: 10px;
}

/* カートボタン */
.floating-cart-btn {
  background-color: #e60012;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

@media (max-width: 767px) {
  #calender_area {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  #calender_area .col-md-auto {
    flex: 1 1 0;
    max-width: 49%;
    padding: 0 4px;
  }

  #calender_area table {
    width: 100%;
    font-size: 11px; /* ← 文字も縮小 */
  }

  #calender_area th,
  #calender_area td {
    padding: 2px 4px;
    font-size: 10px;
  }

  #calender_area caption {
    font-size: 12px;
    margin-bottom: 4px;
  }
}

.floating-tax-label {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

.floating-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  gap: 6px;
}

.floating-quantity-label {
  font-size: 13px;
  color: #333;
}

/* ▼ 初期状態は半透明（薄く表示） */
#floating-cart {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

/* ▼ マウスホバー時は完全表示 */
#floating-cart:hover {
  opacity: 1;
}

.ec-blockBtn {
  display: block;
  text-align: center;
  clear: both;
  margin: 1.5rem 0;
}

.ec-blockBtn a {
  display: inline-block;
  margin: 0 auto;
}

/* 空カート時の戻るボタンが崩れないように明示的に調整 */
.ec-cart-empty-btn {
  clear: both;
  margin-top: 2rem;
  text-align: center;
  padding-top: 1rem;
}

.ec-cart-empty-btn a.ec-blockBtn--action {
  border-radius: 8px !important;
  padding: 1em 2em !important;
  background: #e05a4f !important;
  box-shadow: none !important;
}

.cart-return-btn {
  display: inline-block;
  background-color: #e05a4f;
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.cart-return-btn:hover {
  background-color: #c5483f;
}

@media (max-width: 767.98px) {
  ._ec-headerNav__itemLink {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767.98px) {
  .ec-headerNaviRole {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .ec-headerNaviRole__left,
  .ec-headerNaviRole__right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ec-headerNaviRole__right {
    justify-content: flex-end;
    margin-top: 0.5rem;
  }

  .ec-headerNavi__label {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .ec-headerNaviRole__right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0 !important;
    padding-right: 0.25rem;
    flex-wrap: nowrap;
  }

  .ec-headerNavGroup {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .ec-headerNavGroup > div {
    padding: 0 !important;
    margin: 0 2px !important;
  }

  .ec-headerNavGroup a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    width: 28px;
    height: 28px;
  }

  .ec-headerNavGroup img {
    width: 20px !important;
    height: 20px !important;
  }

  .ec-headerNavi__label {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .mobile-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  }

  body {
    padding-top: 50px; /* ヘッダーの高さ分スペース確保 */
  }
}

@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__news {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
}

/* 親が overflow:hidden だとツールチップが切れるため可視に */
.ec-shelfGrid__title { overflow: visible; }

/* ベース */
.has-tooltip {
  position: relative;
  /* アクセシビリティ: フォーカス枠を見やすく（任意） */
  outline-offset: 2px;
}

/* 共通：カードのCSSは触らない (overflow は既存のまま) */

/* body 直下に置くツールチップ */
.tooltip-bubble {
  position: fixed;            /* ビューポート基準なので親の overflow に影響されない */
  z-index: 9999;
  background: rgba(0,0,0,.9);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 6px;
  max-width: min(480px, 90vw);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.tooltip-bubble::after {
  content: "";
  position: absolute;
  left: 16px;                /* 中央寄せにしたい時はJSで left を再計算してもOK */
  bottom: -6px;
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,.9);
}
.tooltip-bubble.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 1) 以前の回避を撤回：タイトルラッパーは overflow:hidden に戻す */
.ec-shelfGrid__title { overflow: hidden; }

/* 2) 2行クランプを確実にする（pに効かないテーマでも a にも適用） */
.ec-shelfGrid__title.clamp2lines > a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 2行で省略 */
  overflow: hidden;
  white-space: normal;
}

/* 3) どこかで nowrap が当たっている場合の打ち消し（保険） */
.ec-shelfGrid__title a { white-space: normal !important; }

.item_visual .slick-track { display:flex !important; align-items:center !important; }
.item_visual .slick-slide {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:auto !important;
}
.item_visual .slide-item { display:flex; align-items:center; justify-content:center; width:100%; }

/* 16:9：padding法 */
.youtube-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  padding-bottom: 56.25%;
}
.youtube-wrapper.ratio-16x9 { aspect-ratio: 16/9; padding-bottom: 56.25%; }

/* 9:16：高さベース、縦最大600pxで比率維持・中央寄せ */
.youtube-wrapper.ratio-9x16 {
  padding-bottom: 0 !important;
  height: clamp(360px, 80vh, 600px);
  max-height: 600px;
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* iframe を枠いっぱいに */
.youtube-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* （任意）スマホは少し低めに */
@media (max-width: 767.98px) {
  .youtube-wrapper.ratio-9x16 {
    height: clamp(300px, 65vh, 520px);
    max-height: 520px;
  }
}

/* サムネの見た目（任意・動画アイコン） */
.slideThumb.is-video { position: relative; }
.slideThumb.is-video::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:20px; height:20px; transform:translate(-50%,-50%);
  border-left:12px solid #fff;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  pointer-events:none; opacity:.95;
}
.item_nav .slideThumb { position:relative; overflow:hidden; }
.item_nav .slideThumb img { display:block; width:100%; height:100%; object-fit:cover; }

/* PC専用：ロゴ＆追加画像のサイズ調整 */
@media (min-width: 768px) {
  .logo-big {
    height: 30px !important;   /* ロゴ */
    width: auto !important;
    max-width: none !important;
  }
  .guide-big {
    height: 90px !important;  /* 追加画像 */
    width: auto !important;
    max-width: none !important;
  }
}

/* SP専用：追加画像は帯で全幅 */
@media (max-width: 767.98px) {
  .ec-headerGuideBand .w-100-sp {
    width: 100% !important;
    height: auto;
    display: block;
  }
}

/* 本番寄せ：SPロゴは高さ固定 + 残余幅にフィット（右側ナビを潰さない） */
@media (max-width: 767.98px) {
  .logo-sp {
    height: 36px !important;                 /* 本番の見た目に合わせて適度な高さ（32〜40pxで微調整可） */
    width: auto !important;
    max-width: calc(100vw - 128px - 40px) !important; /* 右ナビ(約128px) + 左メニュー/余白(約40px) を差し引く */
    display: block !important;
  }

  /* 行を1本に固定（強制安全策）：左右が折り返さないように */
  .ec-headerNaviRole {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
  }
  .ec-headerNaviRole__left, .ec-headerNaviRole__right {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .ec-headerNaviRole__left { flex: 1 1 auto !important; min-width: 0 !important; }
  .ec-headerNaviRole__right { flex: 0 0 auto !important; min-width: 108px !important; }
}
/* ===== PCだけ：ヘッダーロゴ/追加画像が潰れないように強制上書き ===== */
@media (min-width: 768px) {
  /* 親のflexで画像が伸びないように固定化 */
  .ec-headerNaviRole__left img { 
    flex: 0 0 auto !important;
  }

  /* ロゴ：高さだけ指定、幅は自動。汎用の max-width:100% を打ち消し */
  .logo-big {
    height: 70px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }

  /* 追加画像：高さだけ指定、幅は自動。汎用の max-width:100% を打ち消し */
  .guide-big {
    height: 120px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }
}

/* ===== PC専用：ロゴ/追加画像が潰れないように強制上書き ===== */
@media (min-width: 768px) {

  /* 親Flexの伸長影響を完全に排除 */
  .ec-headerNaviRole__left { align-items: center !important; }
  .ec-headerNaviRole__left h1,
  .ec-headerNaviRole__left h1 a,
  .ec-headerNaviRole__left h1 a img.logo-big,
  .ec-headerNaviRole__left .guide-big {
    display: inline-block !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
  }

  /* ロゴ：高さ基準、幅は自動。比率固定・どのmax系にも負けない */
  .ec-headerNaviRole__left h1 a img.logo-big {
    height: 50px !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    min-width: 0 !important;
    object-fit: contain !important;   /* 念のため比率保護 */
  }

  /* 追加画像：高さ基準、幅は自動。比率固定 */
  .ec-headerNaviRole__left .guide-big {
    height: 120px !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    min-width: 0 !important;
    object-fit: contain !important;
  }

  /* 画像全般の強制ルール（テーマの img{max-width:100%} を打ち消し） */
  .ec-headerNaviRole__left img.logo-big,
  .ec-headerNaviRole__left img.guide-big {
    max-width: none !important;
  }
}

/* ===== PC：ロゴ横の追加画像を確実に120pxで表示 ===== */
@media (min-width: 768px) {
  .ec-headerNaviRole__left .guide-big {
    height: 80px !important;     /* ← 比率は高さ基準で固定 */
    width: auto !important;
    max-width: none !important;    /* ← テーマの img{max-width:100%} を無効化 */
    max-height: none !important;
    display: inline-block !important;
    flex: 0 0 auto !important;     /* ← 親flexの伸縮影響を遮断 */
    object-fit: contain !important;
  }
}

/* ===== SP最終安定版（Flexのみ：食い込み防止＆SNS横並び） ===== */
@media (max-width: 767.98px) {

  /* ヘッダー全体：1行固定 */
  .ec-headerNaviRole{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:.5rem !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
  .ec-headerNaviRole__right{
    flex:0 0 120px !important;         /* 右側の最低幅：108〜132で微調整可 */
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:.25rem !important;
    margin-top:0 !important;
  }

  /* 左ブロック：Flexで“ハンバーガー固定／ロゴ可変”を実現 */
  .ec-headerNaviRole__left{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:.5rem !important;
    flex:1 1 auto !important;
    min-width:0 !important;            /* ← ロゴの縮小を許可 */
  }

  /* DOM順が h1 → ハンバーガーでもOKにする（ハンバーガーを左へ） */
  .ec-headerNaviRole__left .ec-headerRole__navSP{ order:0 !important; }
  .ec-headerNaviRole__left h1{ order:1 !important; }

  /* ハンバーガー：固定幅の箱に収める（被り禁止） */
  .ec-headerRole__navSP{
    flex:0 0 40px !important;          /* 端末により 36/40/44px で調整可 */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .ec-headerRole__navSP button,
  .ec-headerRole__navSP a[role="button"]{
    width:40px !important;
    height:40px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
  }

  /* ロゴ側：残り幅100%でフィット（画像は比率維持） */
  .ec-headerNaviRole__left h1{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding-left:.5rem !important;
  }
  .ec-headerNaviRole__left h1 .title-img.d-inline-block.d-md-none{
    display:block !important;
    width:100% !important;             /* ← 残り幅いっぱい */
    height:auto !important;
    max-width:100% !important;
  }

  /* ヘッダー直下のSNS帯：横一列＆上余白ゼロ */
  .ec-headerNaviRole + .ec-role.bg-ksk-blue{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:.5rem !important;
    margin-top:0 !important;           /* ← 余白を確実に消す */
    padding:.25rem 0 !important;
  }
  .ec-headerNaviRole + .ec-role.bg-ksk-blue a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .ec-headerNaviRole + .ec-role.bg-ksk-blue img{
    display:inline-block !important;   /* ← 縦並び防止（blockにしない） */
    height:auto !important;
    vertical-align:middle !important;
  }
}

@media (max-width: 767.98px) {
  /* ヘッダー直後の“最初の”帯（告知帯）だけを非表示 */
  .ec-headerNaviRole + .ec-role.bg-ksk-blue:first-of-type {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  /* ヘッダー直後の最初の帯（告知帯）を薄く・低く */
  .ec-headerNaviRole + .ec-role.bg-ksk-blue:first-of-type {
    margin-top: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1 !important;
    font-size: 12px !important;           /* 必要なら 11–13px で微調整 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-top: 0 !important;             /* 余計な線があれば無効化 */
  }

  /* マージン折りたたみが空白を生まないよう保険 */
  .ec-headerNaviRole { 
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important; 
    border-bottom: 0 !important; 
    overflow: hidden !important; 
  }
}

@media (max-width: 767.98px) {

  /* ① ヘッダーの器を“箱”として決める（高さ・内側余白・中央揃え） */
  .mobile-sticky-header{
    position: fixed; /* 既存 */
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);

    /* ↓ ここが重要 */
    height: 64px;                 /* ← ヘッダーの“実高さ”を明示 */
    padding: 0 12px;              /* ← 縦のpaddingは0にして計算を単純化 */
    display: flex;                /* 中央揃え */
    align-items: center;          /* 垂直中央 */
    box-sizing: border-box;       /* 高さ64pxにpaddingを含める */
    overflow: hidden;             /* 器からはみ出す描画をカット（保険） */
  }

  /* ② 左のハンバーガーを“箱の中サイズ”に固定（64pxの中に収める） */
  .ec-headerRole__navSP{
    flex: 0 0 40px;               /* 占有幅（36/40/44で微調整可） */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ec-headerRole__navSP button,
  .ec-headerRole__navSP a[role="button"]{
    width: 40px; height: 40px;    /* ← 40pxなら高さ64pxの中央に余裕あり */
    padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    /* まれに absolute 指定があるテーマがあるので念のためリセット */
    position: static !important;
  }

  /* ③ 真ん中のロゴは“残り幅にフィット”させる（食い込み防止） */
  .ec-headerNaviRole{
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: nowrap; margin: 0; padding: 0;
  }
  .ec-headerNaviRole__left{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
  .ec-headerNaviRole__right{ flex: 0 0 120px; display: flex; justify-content: flex-end; gap: .25rem; }
  .ec-headerNaviRole__left h1{ flex: 1 1 auto; min-width: 0; margin: 0; }
  .ec-headerNaviRole__left img.title-img.d-inline-block.d-md-none{
    display: block; width: 100%; height: auto; max-width: 100%;
  }

  /* ④ 本文の押し下げ量を“ヘッダー実高さ”に合わせる */
  body{ padding-top: 64px; }
}

.ec-searchnavRole__infos { display:flex; flex-wrap:wrap; }
.ec-searchnavRole__actions { order: 1; }
.ec-searchnavRole__counter { order: 2; }

@media (max-width: 767px) {
  .ec-searchnavRole__actions { order: 2; }
  .ec-searchnavRole__counter { order: 1; }
}

/* ==== Category header 強制左寄せ＋横一列 Fix ==== */

/* 親の中央寄せ・インライン配置を打ち消し */
.ec-searchnavRole,
.ec-searchnavRole__infos {
  text-align: left !important;
}

/* 横一列で左寄せ・折り返さない・段差対策 */
.ec-searchnavRole__infos {
  display: flex !important;
  align-items: center !important;      /* 高さ違いの段差を中央で揃える */
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100%;
  min-width: 0;
}

/* 左側：表示件数/並び順 */
.ec-searchnavRole__actions {
  order: 1;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* セレクト周りが100%幅になって崩れるテーマ対策 */
.ec-searchnavRole__actions .ec-select,
.ec-searchnavRole__actions .ec-select__wrapper {
  display: flex !important;
  align-items: center !important;
  width: auto !important;            /* ← これが横並び維持のカギ */
  max-width: none !important;
  margin: 0 !important;
}
.ec-searchnavRole__actions select {
  height: 36px;                      /* テーマに合わせて 34~38px で調整可 */
  line-height: 36px;
  margin: 0 !important;
}

/* 右側：件数表示を右端へ固定／折返し防止 */
.ec-searchnavRole__counter {
  order: 2;
  margin-left: auto !important;      /* 右端へ */
  text-align: right !important;
  white-space: nowrap !important;    /* 折り返しで段差が出るのを防止 */
}
.ec-searchnavRole__counter p { margin: 0 !important; }

/* それでも中央に寄る場合の最終保険 */
.ec-searchnavRole__infos { justify-content: flex-start !important; }
.ec-searchnavRole__counter { margin-left: auto !important; }

/* スマホ：縦積み（上＝件数、下＝表示件数/並び順） */
@media (max-width: 767px) {
  .ec-searchnavRole__infos {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .ec-searchnavRole__counter {
    order: 1;
    margin-left: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .ec-searchnavRole__actions {
    order: 2;
  }
}

/* サジェストで選択中の行の強調表示 */
.suggest-item[aria-selected="true"] {
    background: #e6f2ff;     /* 好きな色に変更OK */
}