/* site-overrides v1.0.6 - overrides that do not fit in index.css (92.9% full). */
/* Served from the ColorMe FTP: /assets/css/ =                                  */
/* https://file001.shop-pro.jp/PA01008/381/assets/css/site-overrides.v1.0.6.css  */
/* Linked from index.html directly after nav-icons.v1.1.2.css, which is after    */
/* the shop-generated index.css, so plain class selectors already win on order.  */
/* Where it was free, selectors are element-qualified (ul./li./button.) so they  */
/* also win on specificity and do not depend on load order at all.               */
/* Pure ASCII on purpose - no BOM needed. Bump the file name, never a ?v= query  */
/* (CloudFront does not keep the query string in the cache key).                 */
/* v1.0.6: image-first side banners ([G]) after adversarial review of v1.0.4     */
/* (v1.0.4/v1.0.5 were never linked from production). [B] is now the SP list     */
/* layout; [F] is gone.                                                          */
/* [A] [C] [D] [E] are byte-identical to v1.0.3.                                 */

/* ===========================================================================
   [A] Verbatim copy of the <style> block that used to sit in index.html head.
   Moved here to give index.html its bytes back; the text below is byte-for-byte
   identical to the original block. It covers:
     - nav SVG icons shown only in the SP drawer (the PC header has no width
       budget: 768-826px / 1280-1356px push the cart off screen)
     - SP sidebar collapse (hide .l-side-slider, start the 4 headings closed)
     - the min-width:768px !important rule that undoes the inline display
       slideToggle leaves behind on PC
   Do not reformat: it is kept as one line so a diff against the old inline
   block stays a single comparison.
   =========================================================================== */
.l-main-navi-list__link svg{display:none}@media screen and (max-width:767px){.l-main-navi-list__link svg{display:block}}@media screen and (max-width:767px){.l-side-slider{display:none}.l-side-navi>.js-side-toggle__contents{display:none}.l-side-navi__ttl.js-side-toggle__btn{cursor:pointer}.l-side-navi__ttl.js-side-toggle__btn::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}.l-side-navi__ttl.js-side-toggle__btn.is-open::after{transform:rotate(-135deg)}}@media screen and (min-width:768px){.l-side-navi>.js-side-toggle__contents{display:block!important}}

/* ===========================================================================
   [B] SP side banners: one row per item   (v1.0.5, replaces audit medium #1)
   History: index.css:566 stacks the banners below 767px as full-width 4:3
   tiles (~266px each). v1.0.0-v1.0.4 kept them as a 3-up grid instead, so
   three own-brand kanteisho banners did not eat ~800px. The feed has since
   grown to 9 items and the tiles became captioned, and a 3-up grid then
   fails in two measured ways at 390px: the 103px caption column holds
   16 characters, so 5 of 9 article titles clamp to the SAME two lines
   (three tiles read identically), and the caption (56px) is as tall as
   the 58px photo - not image-first where it matters.
   So below 768px each item is one row: 16:9 thumbnail left (38%), eyebrow
   + 2-line title right, hairline between rows - the same shape the News
   component uses on SP. Measured at 390px: thumbnail 133x75, title 14px,
   ~15 characters per line so all 9 titles stay distinct; 9 rows = ~850px
   versus 384px for the grid. That is the trade: +465px at the very bottom
   of the SP page (below the four collapsed nav headings) for legible,
   distinct, image-led rows.
   index.css sets, at <=1023px: ul margin -10px, li padding 10px + width
   33.3333% + margin-bottom 20px; at <=767px: ul display:block, li
   margin-bottom 10px + width:auto + text-align:center. All undone below.
   768-1023px keeps the 3-up grid from index.css.
   Selectors are ul.>li.>a (0,2,3) etc. on purpose: [G] below declares
   .l-contents-side li.l-side-bottom-bnr__item > a {display:block} at (0,2,2)
   and .l-contents-side div.title_area {padding} at (0,2,1) LATER in this
   file, so the SP rules must out-rank them, not just precede them
   (v1.0.5 lost exactly this way and rendered the grid captions full width).
   =========================================================================== */
@media screen and (max-width: 767px) {
  ul.l-side-bottom-bnr {
    display: block;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid #b3b2b2;
  }
  ul.l-side-bottom-bnr > li.l-side-bottom-bnr__item {
    width: auto;
    margin: 0;
    padding: 0;
    border-top: 1px solid #b3b2b2;
    text-align: left;
  }
  ul.l-side-bottom-bnr > li.l-side-bottom-bnr__item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
  }
  ul.l-side-bottom-bnr > li.l-side-bottom-bnr__item .image-container-4-3 {
    flex: 0 0 38%;
    width: 38%;
    max-width: 200px; /* 600-767px: keep the row a row, not a 276px poster */
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
  ul.l-side-bottom-bnr > li.l-side-bottom-bnr__item div.title_area {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }
}

/* ===========================================================================
   [C] audit medium #22  touch-carousel-dots-under-24px  (the index.css half)
   Same pattern as top.css .custom-slider-pager .pager-dot: the <button> itself
   becomes the 24x24 target (WCAG 2.5.8) and the visible dot keeps its old size,
   drawn by a pseudo element. The top.css half (.p-ranking-list / .p-gallery__img)
   is handled in top.css, not here.
   =========================================================================== */

/* Side slider: index.css:433 makes the button itself the 10px dot. Empty the
   button out and redraw the dot with ::after. The `.slick-active` selector is
   repeated because index.css:440 (0,3,2) outranks a plain (0,2,3) rule. */
.l-side-slider ul.slick-dots li {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
}
.l-side-slider ul.slick-dots li button,
.l-side-slider ul.slick-dots li.slick-active button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* slick-theme.css paints a bullet glyph in ::before; ours is ::after. */
.l-side-slider ul.slick-dots li button:before {
  display: none;
}
.l-side-slider ul.slick-dots li button:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8d8d8;
}
.l-side-slider ul.slick-dots li.slick-active button:after {
  background: #2d2d2d;
}

/* Favourite carousel: index.css:1353 already draws the dot in ::before, so only
   the hit area grows and the 12px dot is re-centred (4px inset -> 6px inset,
   6 + 12 + 6 = 24). Colours and the active state are left untouched. The li
   margin (slick-theme's 0 5px) is left alone so the row keeps its rhythm. */
.c-slider-thema ul.slick-dots li {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}
.c-slider-thema ul.slick-dots li button {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
}
.c-slider-thema ul.slick-dots li button:before {
  top: 6px;
  left: 6px;
}

/* ===========================================================================
   [D] audit medium #23  a11y-focus-ring-removed-on-cart  (WCAG 2.4.7 AA)
   index.css:1543 / 2051 / 2105 / 2555 all set outline:none with no keyboard
   condition. Put the ring back for :focus-visible only - a :focus fallback is
   deliberately NOT provided, because it would also fire on mouse clicks.
   =========================================================================== */

/* Header buttons sit on the white header ($headercolor, measured white), so a
   single #2d2d2d ring is 12.6:1 there. */
.l-sp-header-cart-btn__link:focus-visible,
.l-header-cart button:focus-visible,
.l-sp-header-search-btn__link:focus-visible {
  outline: 2px solid #2d2d2d;
  outline-offset: 2px;
}
/* The cart-in modal button is a solid #2169f3 face (index.css:2562) where
   #2d2d2d would only reach 2.9:1. Double ring instead: white drawn inside the
   button (4.8:1 against the blue) and a dark ring outside it, on the modal's
   white panel (12.6:1). The panel has 20px padding and no overflow:hidden, so
   the outer ring is not clipped. Re-declaring box-shadow also beats the
   `:hover, :focus { box-shadow:none }` rule at index.css:2567. */
.cart_in_modal__button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -5px;
  box-shadow: 0 0 0 3px #2d2d2d;
}

/* ===========================================================================
   [E] audit medium #6  list-member-price-flat   (v1.0.1)
   index.css defines .c-item-list__off with a colour and nothing else, and gives
   .is-discount no rule at all, so a logged-in member sees no visual sign that a
   discount applied. The same class names are reused by the "favourites" and
   "recently viewed" blocks that index.html renders on EVERY page, so these two
   rules live here rather than in product_list.css / product_srh.css - keeping
   them page-local made the badge look different depending on the page.
   #9b2828 is 7.70:1 on white (AA).
   =========================================================================== */
.c-item-list__price.is-discount {
  color: #9b2828;
}
.c-item-list__off {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  /* Without this the badge breaks mid-word ("10%O / FF") in the 165px card,
     because .c-item-list__item allows breaking anywhere. */
  white-space: nowrap;
}


/* ===========================================================================
   [G] image-first side banners   (v1.0.5)
   Replaces the old [F] photo scrim.

   What was wrong: index.css lays the title over the photo (.title_area is
   absolutely positioned, white text, 3 lines of 16px/28px) and [F] backed it
   with a 0.58-0.72 black scrim. Measured on production: the caption block
   covered 70% of a 210x158 tile at 1280px, so the sidebar read as a column
   of dark text boxes and the illustrations were barely visible.

   What this does: the photo is shown whole and the text moves BELOW it.
     - .overlay is retired, .title_area becomes a static caption.
     - 16:9 tile instead of 4:3. Six of the nine feed banners are WordPress
       eyecatch images at 600x338 (16:9); 4:3 was cropping 25% of their
       width. The three own-brand 1024x768 product visuals lose 12.5% top
       and bottom (the sun-mandala one loses both arcs of its ring - the
       clean fix is re-exporting those three assets at 16:9, not CSS).
       The class name .image-container-4-3 is historical: site-common.js
       generates it, so renaming would mean a JS release for a label.
     - The $recommend slider keeps its 1:1 box: those are product photos
       and a 16:9 cover crop would cut 44% of their height. The slider is
       labelled by a real heading in index.html instead of an eyebrow.
     - One-word eyebrow above each banner title, drawn with ::before from
       the link target: /apps/note/ -> yomimono, ?pid= -> shouhin,
       mode=cate -> kategorii, mode=grp -> guruupu, mode=f -> kontentsu
       (the nav's own words). Anything else gets a zero-width space so the
       eyebrow line still exists and the titles stay level. The strings are
       \unicode escapes so this file stays pure ASCII (no BOM).
     - Eyebrow #767676 (DESIGN.md --sr-text-sub, 4.54:1): a label, not an
       action, so it does not wear the link blue. Blue #0E5C7D is reserved
       for hover (title) and focus (ring).
     - Title 13px/1.55/400 #2d2d2d, 2-line clamp, line-break:strict so a
       line never starts with a prolonged-sound mark or small kana.
       Weight 400 on purpose: only Hiragino W3 / Noto 400 are guaranteed
       locally, 500 would be synthesised on most machines.
     - Hover: photo scales 1.04 inside its clipped box, title turns blue.
       index.css .u-opa img:hover{opacity:.8} used to be unreachable (the
       overlay sat on top of the img); hiding the overlay exposed it, so
       it is neutralised here. Disabled under prefers-reduced-motion.
     - Keyline: a 1px 6% inset drawn on ::after ABOVE the image (a
       box-shadow on the container would paint under the object-fit:cover
       image and never show), so a white product thumbnail still has an
       edge while it is invisible on the paintings.
     - Focus: the bottom-banner link gets an outline; the slider link
       cannot (slick's .slick-list clips outside the slide), so it draws
       an inset 2px border on ::after instead.
     - index.css a{transition:all .5s} would fade the focus ring in over
       700ms; transitions are turned off on the link and put back on the
       title colour only.
   Measured on the template-73 preview, first tile (tile / photo /
   caption): 1280: 210x184 / 210x118 / 210x66; 768: 246x196 / 226x127 /
   226x69; 390: row 350x94 with a 133x75 thumbnail; slider slide 210x258
   at >=1024 (all slides equal, fade mode).
   =========================================================================== */
.l-contents-side .l-side-slider__link,
.l-contents-side li.l-side-bottom-bnr__item > a {
  display: block;
  position: relative;
  color: #2d2d2d;
  text-decoration: none;
  transition: none;
}
.l-contents-side .overlay {
  display: none;
}
.l-contents-side .image-container,
.l-contents-side .image-container-4-3 {
  background: #f4f1ea;
}
.l-contents-side .image-container::after,
.l-contents-side .image-container-4-3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.l-contents-side .image-container-4-3 {
  padding-bottom: 56.25%;
}
.l-contents-side .product-image {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* (0,3,1) beats index.css .u-opa img:hover (0,2,1). */
.l-contents-side img.product-image:hover {
  opacity: 1;
}
.l-contents-side a:hover .product-image {
  transform: scale(1.04);
}
/* div. / h3. qualifiers: index.css declares the same two selectors at (0,2,0),
   so these win on specificity as well as order. */
.l-contents-side div.title_area {
  position: static;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 8px 0 0;
  background: none;
  color: #2d2d2d;
  text-shadow: none;
  text-align: left;
  line-break: strict;
}
.l-contents-side div.title_area::before {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #767676;
}
.l-side-slider div.title_area::before {
  display: none;
}
li.l-side-bottom-bnr__item div.title_area::before {
  content: "\200B";
}
li.l-side-bottom-bnr__item a[href*="/apps/note/"] div.title_area::before {
  content: "\8AAD\307F\3082\306E"; /* yomimono */
}
li.l-side-bottom-bnr__item a[href*="mode=cate"] div.title_area::before {
  content: "\30AB\30C6\30B4\30EA\30FC"; /* kategorii */
}
li.l-side-bottom-bnr__item a[href*="mode=grp"] div.title_area::before {
  content: "\30B0\30EB\30FC\30D7"; /* guruupu */
}
li.l-side-bottom-bnr__item a[href*="mode=f"] div.title_area::before {
  content: "\30B3\30F3\30C6\30F3\30C4"; /* kontentsu */
}
li.l-side-bottom-bnr__item a[href*="?pid="] div.title_area::before,
li.l-side-bottom-bnr__item a[href*="&pid="] div.title_area::before {
  content: "\5546\54C1"; /* shouhin */
}
.l-contents-side h3.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  color: inherit;
  transition: color 0.2s ease;
}
/* Fade-mode slides share one box; keep every caption two lines tall so no
   slide is shorter than its neighbours. em so it follows the 14px tablet
   step and user font scaling. */
.l-side-slider h3.title {
  min-height: 3.1em;
}
.l-contents-side a:hover h3.title {
  color: #0E5C7D;
}
.l-contents-side li.l-side-bottom-bnr__item > a:focus-visible {
  outline: 2px solid #0E5C7D;
  outline-offset: 2px;
}
.l-contents-side .l-side-slider__link:focus-visible {
  outline: none;
}
.l-contents-side .l-side-slider__link:focus-visible::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #0E5C7D;
  z-index: 2;
  pointer-events: none;
}
li.l-side-bottom-bnr__item {
  margin-bottom: 24px;
}
/* Headings added in index.html for the two banner modules. They reuse
   .l-side-navi__ttl (18px / 19px SP) and get the sidebar's hairline. */
.l-contents-side .l-side-bnr__ttl {
  padding-bottom: 10px;
  border-bottom: 1px solid #b3b2b2;
}
.l-contents-side .l-side-reco__ttl {
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .l-contents-side h3.title {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  /* [A] hides .l-side-slider on SP; its heading goes with it. */
  .l-contents-side .l-side-reco__ttl {
    display: none;
  }
  .l-contents-side h3.title {
    font-size: 14px;
    line-height: 1.45;
  }
  .l-contents-side .l-side-bnr__ttl {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-contents-side .product-image {
    transition: none;
  }
  .l-contents-side a:hover .product-image {
    transform: none;
  }
}