/* =========================================================
   HKTT Category Flyout Menu (EC-CUBE4.3)
   - right flyout (multi-level)
   - white boxed items with border
   - wide click/hover area (doesn't collapse easily)
   - scoped to .hktt-mainmenu only
   ========================================================= */

/* ---- Reset / base ---- */
.hktt-mainmenu .hktt-menu,
.hktt-mainmenu .hktt-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* メニュー全体 */
.hktt-mainmenu {
  position: relative;
  overflow: visible; /* 親コンテナでhiddenになってても出せるように */
}

/* ---- Item box ---- */
.hktt-mainmenu .hktt-menu__item {
  position: relative;     /* 子ulのabsolute基準 */
  background: #fff;
  border: 1px solid #ddd;
}

/* ルートは縦積み（境界線の二重を軽減） */
.hktt-mainmenu .hktt-menu--root > .hktt-menu__item {
  border-bottom: none;
}
.hktt-mainmenu .hktt-menu--root > .hktt-menu__item:last-child {
  border-bottom: 1px solid #ddd;
}

/* サブ側も二重線軽減（必要なら） */
.hktt-mainmenu .hktt-menu__sub > .hktt-menu__item {
  border-bottom: none;
}
.hktt-mainmenu .hktt-menu__sub > .hktt-menu__item:last-child {
  border-bottom: 1px solid #ddd;
}

/* ---- Link (make the whole row clickable) ---- */
.hktt-mainmenu .hktt-menu__link {
  display: block;
  padding: 10px 12px;      /* クリック範囲を広げる */
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
  user-select: none;
}

/* hover / focus */
.hktt-mainmenu .hktt-menu__item:hover > .hktt-menu__link,
.hktt-mainmenu .hktt-menu__item:focus-within > .hktt-menu__link {
  text-decoration: none;
}

/* ---- Sub menu (flyout to the right) ---- */
.hktt-mainmenu .hktt-menu__sub {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 240px;
  z-index: 1000;

  /* ★隙間ゼロで親に密着させて“消えにくく”する */
  margin-left: 0;

  background: #fff;
  border: 1px solid #ddd;
}

/* 親liをhover/focusしたら直下の子ulを表示 */
.hktt-mainmenu .hktt-menu__item--has-children:hover > .hktt-menu__sub,
.hktt-mainmenu .hktt-menu__item--has-children:focus-within > .hktt-menu__sub {
  display: block;
}

/* サブ側のリンクは少し詰める（好みで調整OK） */
.hktt-mainmenu .hktt-menu__sub > .hktt-menu__item > .hktt-menu__link {
  padding: 10px 12px;
}

/* ---- Prevent accidental close (hover “bridge”) ----
   親→子にマウスを移すときのブレで閉じるのを防ぐ透明帯 */
.hktt-mainmenu .hktt-menu__item--has-children::after {
  content: "";
  position: absolute;
  top: 0;
  right: -14px;   /* 子メニュー側へ少し伸ばす */
  width: 14px;    /* この幅が大きいほど閉じにくい（大きすぎ注意） */
  height: 100%;
}

/* ---- Chevron for items that have children ---- */
.hktt-mainmenu .hktt-menu__item--has-children > .hktt-menu__link {
  padding-right: 28px; /* 矢印分の余白 */
}
.hktt-mainmenu .hktt-menu__item--has-children > .hktt-menu__link::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}

/* ---- Optional: small visual separation inside submenus ---- */
.hktt-mainmenu .hktt-menu__sub {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* ---- Optional: keep submenus within viewport (simple) ----
   画面右端で見切れる場合、left方向に出すなどはJS/追加調整が必要。
   ここでは最低限の対策としてmax-widthを付ける。 */
.hktt-mainmenu .hktt-menu__sub {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 3階層目以降が見切れる対策（必須） */
.hktt-mainmenu .hktt-menu__sub {
  overflow: visible;     /* hidden をやめる */
  white-space: normal;   /* nowrap をやめる（任意） */
  max-width: none;       /* max-width を解除（任意） */
}
/* ---- Accessibility: reduce motion preference (if you later add transitions) ---- */
@media (prefers-reduced-motion: reduce) {
  .hktt-mainmenu * {
    transition: none !important;
  }
}



/* ===== Member menu card ===== */
/* =========================================================
   Member menu (EC-CUBE4.3) - Card UI + Image Icons (full)
   - Uses inline CSS var: --icon set on <a class="member_item">
   - Scoped to #member only
   ========================================================= */

/* list card */
#member .member_link{
  list-style:none;
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}

/* dividers */
#member .member_link > li + li{
  border-top:1px solid #e5e7eb;
}

/* item */
#member .member_item{
  display:block;
  position:relative;
  padding:14px 16px 14px 76px; /* 左アイコン分 */
  color:#374151;
  text-decoration:none;
  font-weight:700;
  line-height:1.25;
  background:#fff;
}

#member .member_item:hover{
  background:#f9fafb;
  text-decoration:none;
}

/* circle background */
/*
#member .member_item::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:44px;
  height:44px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#f3f4f6;
}
*/
/* icon image */
#member .member_item::after{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:44px;
  height:44px;
  transform:translateY(-50%);
  border-radius:999px;
  background-image: var(--icon);
  background-repeat:no-repeat;
  background-position:center;
  background-size: 70% 70%; /* 画像の余白に合わせて調整 */
}

/* focus */
#member .member_item:focus{
  outline:2px solid #cbd5e1;
  outline-offset:2px;
}


.page-heading {
    margin: 0 0 8px;
    font-size: 16px;
    font-size: 1.6rem;
/*     font-weight: bold; */
    border-bottom: 1px dotted #ccc;
    border-top: 1px solid #ccc;
    padding: 8px;
}

/* 商品一覧の画像枠を統一 */
.ec-shelfGrid__item-image{
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形。4:3にしたいなら 4 / 3 */
  overflow: hidden;
  margin: 0;
}

/* 枠いっぱいに表示（はみ出た分はトリミング） */
.ec-shelfGrid__item-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


.img-fluid{
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形。4:3にしたいなら 4 / 3 */
  overflow: hidden;
  margin: 0;
}
.img-fluid{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tax-label { font-size: 0.85em; margin-left: .25em; }

.price02-default {
  color: red;
  font-size: 16px;
}
.price{
  color: red;
  font-size: 16px;
}

.welcome-user{
  color: #fff;
  font-weight: 700;
}
.txt-topics{
    font-size: 17px;
}

/* お知らせ(News)のリンクを視覚的に分かりやすく(青+下線, sub色#2189D5) */
a.news-link {
    color: #2189D5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.news-link:hover {
    color: #14629b;
    text-decoration: underline;
}

/* お知らせ アコーディオン(タイトルクリックで本文をトグル表示) */
.news-accordion { list-style: none; padding-left: 0; margin-bottom: 0; }
.news-toggle { cursor: pointer; }
.news-toggle:hover .title { color: #2189D5; }
.news-chevron { color: #2189D5; font-size: .8em; transition: transform .25s ease; }
.news-item.is-open .news-chevron { transform: rotate(180deg); }
.news-detail { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.news-detail-inner { color: #333; line-height: 1.8; }