/* =========================================================
   SHARED COMPONENTS
   ========================================================= */

/* Product list card: category lists, recommendations, related products */
.product-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
}
.product-list-grid--related { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .product-list-grid--related { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .product-list-grid:not(.product-list-grid--related) { grid-template-columns: 1fr 1fr; }
}

/* Normal product grids
   Keep dividers on existing cards without exposing the grid background
   when the last row has fewer than 3 items. */
.product-list-grid:not(.product-list-grid--related) {
  gap: 0;
  background: transparent;
}

.product-list-grid:not(.product-list-grid--related) > .product-card {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Desktop: 3 columns */
.product-list-grid:not(.product-list-grid--related) > .product-card:nth-child(3n),
.product-list-grid:not(.product-list-grid--related) > .product-card:last-child {
  border-right: 0;
}

@media (max-width: 640px) {
  /* SP: 2 columns; reset the desktop 3-column rule */
  .product-list-grid:not(.product-list-grid--related) > .product-card:nth-child(3n) {
    border-right: 1px solid var(--color-border);
  }

  .product-list-grid:not(.product-list-grid--related) > .product-card:nth-child(2n),
  .product-list-grid:not(.product-list-grid--related) > .product-card:last-child {
    border-right: 0;
  }
}
.product-card { background: #fff; cursor: pointer; display: flex; flex-direction: column; position: relative; }
.product-card:hover .product-card__image img { transform: scale(1.05); }
.product-card:hover .product-card__name { color: var(--color-accent); }
.product-card__image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-card); }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card__body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; gap: .75rem; }
.product-list-grid--related .product-card__body { padding: 1rem 1rem; }
.product-card__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; line-height: 1.4; transition: color .3s; }
.product-card__specs { font-size: 11px; letter-spacing: .08em; color: var(--color-muted); line-height: 1.6; }
.product-card__price-area { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--color-border); }
.product-card__price-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--color-muted); margin-bottom: .25rem; }
.product-card__price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--color-accent); }
.product-card__price span { font-size: 11px; font-family: var(--font-sans); font-weight: 400; color: var(--color-muted); margin-left: .2rem; }
.product-card__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.product-card__tag { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; font-size: 10px; letter-spacing: .08em; color: #fff; }
.product-card__tag img { width: 13px; height: 13px; }


/* Product badges: shared by product detail and product cards */
.bdg-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.bdg a { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem; font-size: 11px; letter-spacing: .08em; color: #fff; }
.bdg img { width: 14px; height: 14px; }
.bdg--countertop { background: #9FA8B5; }
.bdg--undersink { background: #a9acba; }
.bdg--domestic { background: #A89FB5; }
.bdg--lead { background: #9FB5A8; }
.bdg--cartridge { background: #B5AA9F; }
.bdg--portable { background: #A6B59F; }
.bdg--disaster { background: #B59F9F; }
.bdg--body { background: #a9b6ba; }
.bdg--business { background: #baa9b3; }
.bdg--parts { background: #a9b6ba; }
.bdg--faucet{ background: #a9b6ba }
.bdg--exclusive{ background: #baafa9 }
/* ASPX product-card badge markup: span > a > img + text */
.product-card__tags.bdg-row { gap: .5rem; margin-bottom: 0; }
.product-card__tags.bdg-row .product-card__tag { display: inline-flex; align-items: stretch; padding: 0; color: #fff; }
.product-card__tags.bdg-row .product-card__tag > a {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem;
  color: #fff; font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-decoration: none;
}
.product-card__tags.bdg-row .product-card__tag > a:hover,
.product-card__tags.bdg-row .product-card__tag > a:visited { color: #fff; text-decoration: none; }
.product-card__tags.bdg-row .product-card__tag img { width: 14px; height: 14px; flex: 0 0 auto; object-fit: contain; }

/* System-generated product-card price table: shared by category and related products */
.product-card__price > table,
.product-card__price > table > tbody,
.product-card__price > table > tbody > tr,
.product-card__price > table > tbody > tr > td {
  width: 100%; margin: 0; padding: 0; border: 0; background: transparent;
}
.product-card__price .ListPriceTable { display: block; width: 100%; }
.product-card__price .ListPriceDiv1,
.product-card__price .ListPriceDiv2,
.product-card__price .ListPriceTableEnd { display: none !important; }
.product-card__price .ListPriceDiv3,
.product-card__price .ListPriceDiv4 { display: block; width: 100%; margin: 0; padding: 0; float: none; }
.product-card__price .PriceTitleA,
.product-card__price .PriceTitleB,
.product-card__price .ListPriceTextA,
.product-card__price .ListPriceTextA2,
.product-card__price .ListPriceTextB,
.product-card__price .ListPriceTextB2 { display: none; }
.product-card__price .priceB,
.product-card__price .priceC,
.product-card__price .priceD { display: flex; align-items: baseline; flex-wrap: wrap; margin: 0; line-height: 1.25; }
.product-card__price .priceB::before,
.product-card__price .priceC::before,
.product-card__price .priceD::before {
  flex: 0 0 100%; width: 100%; margin: 0 0 .25rem !important;
  font-family: var(--font-mono); font-size: 10px !important; line-height: 1.5;
  letter-spacing: .2em; color: var(--color-muted) !important; font-weight: 400 !important;
}
.product-card__price .priceB .priceArea1,
.product-card__price .priceC .priceArea1,
.product-card__price .priceD .priceArea1 {
  display: inline-flex; align-items: baseline; font-family: var(--font-display);
  font-size: 1.25rem !important; font-weight: 500; color: var(--color-accent) !important; letter-spacing: 0;
}
.product-card__price .priceUnit,
.product-card__price .priceNumeric { margin: 0 !important; font-size: inherit !important; line-height: inherit; color: inherit !important; }
.product-card__price .priceB::after,
.product-card__price .priceC::after,
.product-card__price .priceD::after {
  margin: 0 0 0 .2rem !important; font-family: var(--font-sans); font-size: 11px !important;
  line-height: 1.5; letter-spacing: 0; color: var(--color-muted) !important; font-weight: 400 !important;
}
/* Same labels as Site.css; included for standalone contents preview. */
.product-card__price .ListPriceDiv3 .priceB::before { content: "Online Offer Price"; }
.product-card__price .ListPriceDiv3 .priceB::after { content: "（税込）"; }
.product-card__wish {
  position: absolute; top: .75rem; left: .75rem; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.8); backdrop-filter: blur(4px); border: none;
  cursor: pointer; transition: background .2s;
}
.product-card__wish:hover { background: #fff; }
.product-card__wish svg { width: 15px; height: 15px; stroke: var(--color-muted); fill: none; transition: all .2s; }
.product-card__wish.on svg { stroke: var(--color-accent); fill: var(--color-accent); }

/* Columns */
.column-sec{padding:6rem 0;background:var(--color-bg);}
.col-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid var(--color-border);}
@media(max-width:768px){.col-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.col-grid{grid-template-columns:1fr;}}
.col-card{cursor:pointer;display:flex;flex-direction:column;border-right:1px solid var(--color-border);background:var(--color-bg);text-decoration:none;color:inherit;overflow:hidden;}
.col-img{aspect-ratio:4/3;overflow:hidden;flex-shrink:0;}
.col-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s;}
.col-card:hover .col-img img{transform:scale(1.05);}
.col-text{position:relative;flex:1;}
.col-slide{padding:1.5rem 1.5rem 4rem;background:var(--color-bg);position:relative;z-index:1;transition:transform .5s cubic-bezier(.25,.46,.45,.94);}
.col-card:hover .col-slide{transform:translateY(-104px);}
.col-date{font-family:var(--font-sans);font-size:11px;letter-spacing:.1em;color:var(--color-muted);margin-bottom:.625rem;}
.col-ttl{font-family:var(--font-sans);font-size:.9375rem;font-weight:600;line-height:1.55;letter-spacing:.02em;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.55em * 2);}
.col-excerpt{font-family:var(--font-sans);font-size:12px;color:var(--color-muted);line-height:1.85;letter-spacing:.03em;opacity:0;transition:opacity .3s .15s;}
.col-card:hover .col-excerpt{opacity:1;}
.col-bottom{position:absolute;bottom:0;left:0;right:0;height:4rem;padding:0 1.5rem 1.5rem;display:flex;align-items:flex-end;z-index:1;}
.col-tag{display:inline-block;border:1px solid var(--color-border);padding:.2rem .75rem;font-family:var(--font-sans);font-size:10px;letter-spacing:.1em;color:var(--color-muted);transition:opacity .2s;}
.col-card:hover .col-tag{opacity:0;}
.col-more-link{position:absolute;bottom:1.5rem;left:1.5rem;font-family:var(--font-sans);font-size:11px;letter-spacing:.15em;color:var(--color-accent);display:inline-flex;align-items:center;gap:.35rem;opacity:0;transition:opacity .3s .2s;}
.col-card:hover .col-more-link{opacity:1;}
.col-sec-more{text-align:right;margin-top:2rem;}
.col-sec-more a{font-family:var(--font-sans);font-size:12px;letter-spacing:.15em;color:var(--color-muted);transition:color .3s;}
.col-sec-more a:hover{color:var(--color-fg);}

/* News — 2-col layout */
.news-sec{padding:6rem 0;background:#EBF2F8;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.news-layout{display:grid;grid-template-columns:260px 1fr;gap:6rem;align-items:start;}
@media(max-width:768px){.news-layout{grid-template-columns:1fr;gap:2.5rem;}}
.news-heading-col{}
.news-list{display:flex;flex-direction:column;border-top:1px solid var(--color-border);}

/*
 * News item
 * aタグあり／なしのどちらでも同じレイアウトになるよう、
 * 行本体とリンク要素の両方に共通の3カラムを設定する。
 */
.news-item{
  display:grid;
  grid-template-columns:86px max-content minmax(0,1fr);
  column-gap:1rem;
  align-items:start;
  padding:1.25rem 0;
  border-bottom:1px solid var(--color-border);
  text-decoration:none;
}
.news-item > a{
  display:grid;
  grid-template-columns:86px max-content minmax(0,1fr);
  column-gap:1rem;
  align-items:start;
  grid-column:1 / -1;
  width:100%;
  color:inherit;
  text-decoration:none;
}
.news-date{
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.8;
  letter-spacing:.1em;
  color:var(--color-muted);
  white-space:nowrap;
}
.news-cat-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  margin-top:1px;
  padding:.15rem .625rem;
  border:1px solid var(--color-border);
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.12em;
  white-space:nowrap;
}
.news-ttl{
  min-width:0;
  color:var(--color-fg);
  font-size:13px;
  line-height:1.85;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
  transition:color .3s;
}
.news-item > a:hover .news-ttl,
.news-item > a:focus-visible .news-ttl{color:var(--color-accent);}
.news-item > a:focus-visible{outline:2px solid var(--color-accent);outline-offset:6px;}

@media(max-width:640px){
  .news-item,
  .news-item > a{
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:.75rem;
    row-gap:.625rem;
  }
  .news-date{grid-column:1;}
  .news-cat-badge{grid-column:2;justify-self:start;}
  .news-ttl{grid-column:1 / -1;}
}

/* =========================================================
   NEWS DETAIL
   Site.cssの既存指定を残したまま、components.css側で表示を整える。
   対象HTML: .page-wrap > ul.WhatsNew.newsdetail_wrap
   ========================================================= */
.page-wrap .WhatsNew.newsdetail_wrap {
  width: min(100% - 48px, 960px);
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: var(--color-fg);
  text-align: left;
  list-style: none;
}

.page-wrap .WhatsNew.newsdetail_wrap > li {
  list-style: none;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailDate {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .14em;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTit {
  margin: 0;
  padding: 0 0 clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt {
  padding: clamp(2rem, 5vw, 3.5rem) 0 0;
  color: var(--color-fg);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt > :first-child {
  margin-top: 0;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt > :last-child {
  margin-bottom: 0;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt p {
  margin: 0 0 1.5em;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h1,
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h2,
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h3 {
  color: var(--color-fg);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h1 {
  margin: 2.5em 0 1em;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.5;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h2 {
  margin: 0;
  padding-bottom:0em;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.55;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h3 {
  margin: 2.25em 0 .875em;
  font-size: 1.125rem;
  line-height: 1.6;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt hr {
  height: 1px;
  margin: 1rem 0;
  padding: 0;
  border: 0;
  background: var(--color-border);
}

/* CMSから挿入される余分なbrが連続しても、空白が過剰になりにくいよう調整 */
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt br {
  line-height: .75;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt a:hover {
  text-decoration-thickness: 2px;
}

/* 画像1枚・複数枚のどちらにも対応 */
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt .newsImage,
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt > div:has(> img) {
  width: 100%;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: 0;
  text-align: center;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 古いブラウザでも画像自体の可変表示は維持 */
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt > div > img {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* CMS表：PCは横幅いっぱい、狭い画面では横スクロール */
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  margin: 1.25rem 0 2.5rem;
  overflow-x: auto;
  border: 0;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table tbody {
  display: table;
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table td,
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table th {
  padding: .875rem .75rem;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-fg);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* ソース上はthではなくtdのため、先頭行を見出しとして扱う */
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table tr:first-child td,
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table th {
  background: #E8EEF4;
  font-weight: 600;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table tr:nth-child(even):not(:first-child) td {
  background: #F7F9FB;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt ul,
.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt ol {
  margin: 1.5rem 0;
  padding-left: 1.5em;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt li {
  margin: .5em 0;
  list-style: revert;
}

.page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: #F3F6F9;
}

@media (max-width: 640px) {
  .page-wrap .WhatsNew.newsdetail_wrap {
    width: min(100% - 32px, 960px);
    padding: 3.5rem 0 4.5rem;
  }

  .page-wrap .WhatsNew.newsdetail_wrap .newsDetailTit {
    font-size: 1.625rem;
    line-height: 1.55;
  }

  .page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt {
    padding-top: 2rem;
    font-size: 14px;
    line-height: 1.9;
  }

  .page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h1 {
    font-size: 1.5rem;
  }

  .page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt h2 {
    font-size: 1.25rem;
  }

  .page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table td,
  .page-wrap .WhatsNew.newsdetail_wrap .newsDetailTxt table th {
    padding: .75rem .625rem;
    font-size: 12px;
  }
}

/* =========================================================
   Related products
   Keep divider lines on existing cards without exposing the
   grid background when the last row has fewer than 4 items.
   ========================================================= */
.product-list-grid--related {
  gap: 0;
  background: transparent;
}

.product-list-grid--related > .product-card {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* 2 columns: no outer line on the right edge */
.product-list-grid--related > .product-card:nth-child(2n) {
  border-right: 0;
}

.product-list-grid--related > .product-card:last-child {
  border-right: 0;
}

@media (min-width: 768px) {
  /* 4 columns: reset the 2-column rule and remove only row-end borders */
  .product-list-grid--related > .product-card:nth-child(2n) {
    border-right: 1px solid var(--color-border);
  }

  .product-list-grid--related > .product-card:nth-child(4n),
  .product-list-grid--related > .product-card:last-child {
    border-right: 0;
  }
}

/* =========================================================
   Notice bar
   Reusable site-wide announcement component
   Multiple notices supported
   ========================================================= */
.notice-bar {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.notice-in {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-in > li {
  display: flow-root;
  margin: 0;
  padding: .9rem 0;
  color: var(--color-fg);
  font-size: .8125rem;
  line-height: 1.8;
  letter-spacing: .03em;
}

.notice-in > li + li {
  border-top: 1px solid var(--color-border);
}

.notice-badge {
  float: left;
  margin: .15rem 1rem .25rem 0;
  padding: .25rem .75rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .18em;
  white-space: nowrap;
}

.notice-in p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.notice-in p + p {
  margin-top: .2rem;
}

.notice-in a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.notice-in a:hover {
  text-decoration-thickness: 2px;
}

.notice-text {
  font-size: 13px;
  color: var(--color-fg);
  letter-spacing: .05em;
}

@media (max-width: 640px) {
  .notice-in > li {
    padding: .85rem 0;
    font-size: .75rem;
    line-height: 1.75;
  }

  .notice-badge {
    float: none;
    display: table;
    margin: 0 0 .55rem;
  }

  .notice-in p + p {
    margin-top: .35rem;
  }
}

/* =========================
   Shared list controls
   ========================= */
.list-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem; flex-wrap: wrap; gap: .75rem;
}
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: 11px; color: var(--color-muted); letter-spacing: .1em; padding-top: 1rem; padding-bottom: 1rem; }
.breadcrumb a:hover { color: var(--color-fg); }
.breadcrumb .sep { opacity: .4; }
.count { font-size: 12px; color: var(--color-muted); margin-top: .25rem; }
.count b { color: var(--color-fg); }

.sort-wrap { position: relative; }
.sort-trigger {
  display: flex; align-items: center; gap: .5rem; border: 1px solid var(--color-border);
  padding: .5rem .875rem; font-size: 12px; letter-spacing: .1em; color: var(--color-muted); cursor: pointer; transition: all .2s;
}
.sort-trigger:hover { color: var(--color-fg); border-color: rgba(10,22,40,.3); }
.sort-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(10,22,40,.1); min-width: 150px; z-index: 20;
}
.sort-wrap.open .sort-menu { display: block; }
.sort-menu button {
  display: block; width: 100%; text-align: left; padding: .625rem 1rem;
  font-size: 12px; letter-spacing: .1em; color: var(--color-muted);
  transition: all .2s; background: none; border: none; cursor: pointer;
}
.sort-menu button:hover, .sort-menu button.active { color: var(--color-fg); background: var(--color-bg); }

.pg { display: flex; justify-content: center; margin-top: 3rem; }
.pg-num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: .1em; border: 1px solid var(--color-fg); background: var(--color-fg); color: #fff; }

/* Recommended slider */
.rec { background: var(--color-fg); padding: 4rem 0 5rem; }
.rec-hd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
.rec-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .4em; color: rgba(244,247,250,.45); text-transform: uppercase; margin-bottom: .5rem; }
.rec-h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 500; color: #fff; }
.rec-all { font-size: 12px; letter-spacing: .2em; color: rgba(244,247,250,.6); transition: color .3s; }
.rec-all:hover { color: #fff; }
.rec-slider-wr { position: relative; }
.rec-slider { display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none; }
.rec-slider::-webkit-scrollbar { display: none; }
.rec-item { flex-shrink: 0; width: 220px; background: rgba(255,255,255,.04); display: flex; flex-direction: column; text-decoration: none; }
@media (min-width: 768px) { .rec-item { width: calc(20% - 1px); } }
.rec-item:hover .ri-img img { transform: scale(1.05); }
.ri-img { aspect-ratio: 1; overflow: hidden; background: rgba(255,255,255,.07); }
.ri-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ri-body { padding: .875rem 1rem; }
.ri-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; color: rgba(244,247,250,.45); margin-bottom: .25rem; }
.ri-name { font-size: 12px; letter-spacing: .05em; color: rgba(244,247,250,.75); line-height: 1.5; margin-bottom: .5rem; }
.ri-price-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: rgba(244,247,250,.45); margin-bottom: .2rem; }
.ri-price { font-family: var(--font-display); font-size: 1rem; color: #fff; }
.ri-price span { font-size: 10px; font-family: var(--font-sans); color: rgba(244,247,250,.45); margin-left: .2rem; }
.rec-arrow {
  position: absolute; top: 35%; z-index: 10; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,247,250,.1); border: 1px solid rgba(244,247,250,.2);
  color: rgba(244,247,250,.8); cursor: pointer; transition: all .2s;
}
.rec-arrow:hover { background: rgba(244,247,250,.2); }
.rec-arrow.lft { left: -1rem; }
.rec-arrow.rgt { right: -1rem; }

/* =========================================================
   PRODUCT LIST CONTROLS / PAGER
   Fixed system markup compatibility
   ========================================================= */

/* list controls */
.list-controls {
  display: block;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.list-controls > div {
  width: 100%;
}

.list-controls .ProductListHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.list-controls .ProductListHeader::after {
  content: '';
  display: block;
  clear: both;
}

.list-controls .ProductListHeader .ItemLeft,
.list-controls .ProductListHeader .ItemRight {
  float: none;
  width: auto;
  padding: 0;
}

.list-controls .ProductListHeader .ItemLeft {
  flex: 0 1 auto;
}

.list-controls .ProductListHeader .ItemRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-left: auto;
}

.list-controls .pagination,
.list-controls .item-position {
  margin: 0;
}

.list-controls .item-position {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--color-muted);
  white-space: nowrap;
}

.list-controls .item-position .itemCount {
  margin: 0 .15em;
  font-weight: 600;
  color: var(--color-fg);
}

.list-controls .list_selectbox {
  position: relative;
  width: auto;
  min-width: 148px;
  margin: 0;
  overflow: visible !important;
}

.list-controls .list_selectbox::before {
  content: '';
  position: absolute;
  top: 50%;
  right: .9rem;
  left: auto;
  z-index: 2;
  width: 7px;
  height: 7px;
  margin: -5px 0 0;
  border-top: 1px solid var(--color-fg);
  border-right: 1px solid var(--color-fg);
  transform: rotate(135deg);
  pointer-events: none;
}

.list-controls .list_selectbox select {
  width: 100%;
  min-width: 148px;
  height: 38px;
  margin: 0;
  padding: 0 2.25rem 0 .875rem !important;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: #fff;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .05em;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, color .2s, background-color .2s;
}

.list-controls .list_selectbox select:hover,
.list-controls .list_selectbox select:focus-visible {
  border-color: rgba(10, 22, 40, .35);
  color: var(--color-fg);
  outline: none;
}

@media (max-width: 640px) {

  .list-controls {
    padding: 1.25rem 0;
  }

  .list-controls .ProductListHeader {
    align-items: stretch;
    flex-direction: column;
    gap: .875rem;
  }

  .list-controls .ProductListHeader .ItemLeft,
  .list-controls .ProductListHeader .ItemRight {
    width: 100%;
  }

  .list-controls .ProductListHeader .ItemRight {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-left: 0;
  }

  .list-controls .list_selectbox,
  .list-controls .list_selectbox select {
    width: 100%;
    min-width: 0;
  }

  .list-controls .list_selectbox select {
    padding-left: .75rem !important;
    font-size: 11px;
  }
}

/* =========================
   Shared product list pager
   ========================= */
/* paging */
.ProductListFooter {
  width: 100%;
}

.ProductListFooter .pg {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.ProductListFooter .pagerBase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ProductListFooter .pagerBase > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ProductListFooter .pagerBase .pg-num,
.ProductListFooter .pagerBase .prev,
.ProductListFooter .pagerBase .next {
  min-width: 36px;
  height: 36px;
}

.ProductListFooter .pagerBase .pg-num {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .05em;
}

.ProductListFooter .pagerBase .pg-num a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: color .2s, background-color .2s, border-color .2s;
}

.ProductListFooter .pagerBase .pg-num:not(.target):hover,
.ProductListFooter .pagerBase .pg-num:not(.target):focus-within {
  border-color: rgba(10, 22, 40, .35);
  color: var(--color-fg);
}

.ProductListFooter .pagerBase .pg-num.target {
  border-color: var(--color-fg);
  background: var(--color-fg);
  color: #fff;
}

.ProductListFooter .pagerBase .prev,
.ProductListFooter .pagerBase .next {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ProductListFooter .pagerBase .prev:empty,
.ProductListFooter .pagerBase .next:empty {
  display: none;
}

.ProductListFooter .pagerBase .prev a,
.ProductListFooter .pagerBase .next a {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}

.ProductListFooter .pagerBase .prev a::before,
.ProductListFooter .pagerBase .next a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--color-fg);
  border-right: 1px solid var(--color-fg);
}

.ProductListFooter .pagerBase .prev a::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.ProductListFooter .pagerBase .next a::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

.ProductListFooter .pagerBase .prev a:hover,
.ProductListFooter .pagerBase .next a:hover,
.ProductListFooter .pagerBase .prev a:focus-visible,
.ProductListFooter .pagerBase .next a:focus-visible {
  border-color: rgba(10, 22, 40, .35);
  background: var(--color-bg);
  outline: none;
}

@media (max-width: 640px) {
  .ProductListFooter .pg {
      margin-top: 2.5rem;
    }
  
    .ProductListFooter .pagerBase {
      gap: .35rem;
    }
  
    .ProductListFooter .pagerBase .pg-num,
    .ProductListFooter .pagerBase .prev,
    .ProductListFooter .pagerBase .next,
    .ProductListFooter .pagerBase .prev a,
    .ProductListFooter .pagerBase .next a {
      min-width: 34px;
      width: 34px;
      height: 34px;
    }
}

/* =========================================================
   RECOMMENDED / ASPX markup compatibility
   ========================================================= */

/* ASPX側のbutton共通スタイルに影響されず、スライダー左右中央へ固定 */
.rec .rec-slider-wr {
  position: relative;
}

.rec .rec-slider-wr > button.rec-arrow {
  position: absolute;
  top: 50%;
  bottom: auto;
  z-index: 10;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  line-height: 1;
}

.rec .rec-slider-wr > button.rec-arrow.lft {
  left: -1rem;
  right: auto;
}

.rec .rec-slider-wr > button.rec-arrow.rgt {
  right: -1rem;
  left: auto;
}

/* ASPX側は .rec-item がdiv、その内側がリンク */
.rec .rec-item.product {
  flex-shrink: 0;
  width: 220px;
  background: rgba(255,255,255,.04);
}

.rec .rec-item.product > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .rec .rec-item.product {
    width: calc(20% - 1px);
  }
}

/* ASPX価格出力を通常の商品カードと同じ見せ方へ */
.rec .ri-body .pricearea {
  margin-top: auto;
}

.rec .ri-body .pricearea > .ri-price:empty {
  display: none;
}

.rec .ri-body .pricearea > table,
.rec .ri-body .pricearea > table > tbody,
.rec .ri-body .pricearea > table > tbody > tr,
.rec .ri-body .pricearea > table > tbody > tr > td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.rec .ri-body .pricearea .ListPriceTable {
  display: block;
  width: 100%;
}

.rec .ri-body .pricearea .ListPriceDiv1,
.rec .ri-body .pricearea .ListPriceDiv2,
.rec .ri-body .pricearea .ListPriceTableEnd,
.rec .ri-body .pricearea .PriceTitleA,
.rec .ri-body .pricearea .PriceTitleB,
.rec .ri-body .pricearea .ListPriceTextA,
.rec .ri-body .pricearea .ListPriceTextA2,
.rec .ri-body .pricearea .ListPriceTextB,
.rec .ri-body .pricearea .ListPriceTextB2 {
  display: none !important;
}

.rec .ri-body .pricearea .ListPriceDiv3,
.rec .ri-body .pricearea .ListPriceDiv4 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

.rec .ri-body .pricearea .priceB,
.rec .ri-body .pricearea .priceC,
.rec .ri-body .pricearea .priceD {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}

.rec .ri-body .pricearea .priceB::before,
.rec .ri-body .pricearea .priceC::before,
.rec .ri-body .pricearea .priceD::before {
  content: "Online Offer Price";
  flex: 0 0 100%;
  margin-bottom: .2rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .2em;
  color: rgba(244,247,250,.45);
}

.rec .ri-body .pricearea .priceB::after,
.rec .ri-body .pricearea .priceC::after,
.rec .ri-body .pricearea .priceD::after {
  content: "（税込）";
  margin-left: .2rem;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  color: rgba(244,247,250,.45);
}

.rec .ri-body .pricearea .priceArea1 {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
}

.rec .ri-body .pricearea .priceUnit,
.rec .ri-body .pricearea .priceNumeric {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit;
  color: inherit !important;
}

@media (max-width: 767px) {
  .rec .rec-slider-wr > button.rec-arrow.lft {
    left: -.5rem;
  }

  .rec .rec-slider-wr > button.rec-arrow.rgt {
    right: -.5rem;
  }
}

/* =========================================================
   RECOMMENDED / arrow stability & visibility
   ========================================================= */

/* 共通buttonのhover / active / focus指定に影響されないよう位置を固定 */
.rec .rec-slider-wr > button.rec-arrow,
.rec .rec-slider-wr > button.rec-arrow:hover,
.rec .rec-slider-wr > button.rec-arrow:focus,
.rec .rec-slider-wr > button.rec-arrow:focus-visible,
.rec .rec-slider-wr > button.rec-arrow:active {
  position: absolute;
  top: 50%;
  bottom: auto;
  z-index: 20;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(10,22,40,.88);
  color: #fff;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(10,22,40,.18);
  cursor: pointer;
}

.rec .rec-slider-wr > button.rec-arrow:hover {
  background: rgba(10,22,40,1);
}

.rec .rec-slider-wr > button.rec-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.rec .rec-slider-wr > button.rec-arrow svg {
  display: block;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex: 0 0 auto;
  pointer-events: none;
}

/* 左右位置も状態に関わらず固定 */
.rec .rec-slider-wr > button.rec-arrow.lft,
.rec .rec-slider-wr > button.rec-arrow.lft:hover,
.rec .rec-slider-wr > button.rec-arrow.lft:focus,
.rec .rec-slider-wr > button.rec-arrow.lft:focus-visible,
.rec .rec-slider-wr > button.rec-arrow.lft:active {
  left: -19px;
  right: auto;
}

.rec .rec-slider-wr > button.rec-arrow.rgt,
.rec .rec-slider-wr > button.rec-arrow.rgt:hover,
.rec .rec-slider-wr > button.rec-arrow.rgt:focus,
.rec .rec-slider-wr > button.rec-arrow.rgt:focus-visible,
.rec .rec-slider-wr > button.rec-arrow.rgt:active {
  right: -19px;
  left: auto;
}

@media (max-width: 767px) {
  .rec .rec-slider-wr > button.rec-arrow,
  .rec .rec-slider-wr > button.rec-arrow:hover,
  .rec .rec-slider-wr > button.rec-arrow:focus,
  .rec .rec-slider-wr > button.rec-arrow:focus-visible,
  .rec .rec-slider-wr > button.rec-arrow:active {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .rec .rec-slider-wr > button.rec-arrow.lft,
  .rec .rec-slider-wr > button.rec-arrow.lft:hover,
  .rec .rec-slider-wr > button.rec-arrow.lft:focus,
  .rec .rec-slider-wr > button.rec-arrow.lft:focus-visible,
  .rec .rec-slider-wr > button.rec-arrow.lft:active {
    left: -8px;
  }

  .rec .rec-slider-wr > button.rec-arrow.rgt,
  .rec .rec-slider-wr > button.rec-arrow.rgt:hover,
  .rec .rec-slider-wr > button.rec-arrow.rgt:focus,
  .rec .rec-slider-wr > button.rec-arrow.rgt:focus-visible,
  .rec .rec-slider-wr > button.rec-arrow.rgt:active {
    right: -8px;
  }
}

/* ========================================
   Member price / product cards & recommended
   ======================================== */

/* 会員価格側の補助表記はカードでは使用しない */
.product-card__price .ListPriceDiv4 .ListPriceTextC,
.product-card__price .ListPriceDiv4 .ListPriceTextC2,
.product-card__price .ListPriceDiv4 .DiscountRateC,
.rec .ri-body .pricearea .ListPriceDiv4 .ListPriceTextC,
.rec .ri-body .pricearea .ListPriceDiv4 .ListPriceTextC2,
.rec .ri-body .pricearea .ListPriceDiv4 .DiscountRateC {
  display: none !important;
}

/* 商品カード：会員価格がある場合も価格間に区切り線は入れない */
.product-card__price
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4 {
  float: none !important;
  width: 100%;
  margin: .4rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* MemberPriceTitle はカードでは不要 */
.product-card__price:has(.MemberPriceExists) .MemberPriceTitle,
.pricearea:has(.MemberPriceExists) .MemberPriceTitle {
  display: none !important;
}

.product-card__price
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4
  .priceC {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
  line-height: 1.25;
  color: var(--color-accent) !important;
}

.product-card__price
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4
  .priceC::before,
.pricearea
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4
  .priceC::before {
  content: "セールスレップ" !important;
  display: block !important;
}

.product-card__price
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4
  .priceC::after {
  content: "（税込）";
}

/* おすすめ商品：会員価格がある場合も価格間に区切り線は入れない */
.rec .ri-body .pricearea
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4 {
  float: none !important;
  width: 100%;
  margin: .35rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.rec .ri-body .pricearea
  .ListPriceDiv3.MemberPriceExists
  + .ListPriceDiv4
  .priceC::after {
  content: "（税込）";
}