@charset "euc-jp";

/* トップページ行間 */
.topnews{
 line-height:1.8em;
}

/* reset */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, textarea,
p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
.none_border_table,
.product_option_table table {
  border-spacing: 0;
  border-collapse: collapse;
}
fieldset,
img {
  border: 0;
}
address, caption, cite, code,
dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}
 
ol, ul {
  list-style: none;
}
 
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}
q:before,
q:after {
  content: '';
}
abbr, acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
}
input,
textarea,
select {
  *font-size: 100%;
}
legend {
  color: #000;
}

/* font size */
body {
  font: 13px/1.231 arial,helvetica,clean,sans-serif;
  line-height:1.3em;
  *font-size: small; /* for IE */
  *font: x-small; /* for IE in quirks mode */
}
select, input, button, textarea {
  font: 99% arial,helvetica,clean,sans-serif;
}
table {
  font: 100%;
  font-size: inherit;
}
pre, code, kbd, samp, tt {
  font-family: monospace;
  line-height: 100%;
  *font-size: 108%;
}

/* common */
body {
  color: #444;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
  background-image: url(https://img16.shop-pro.jp/PA01092/872/etc/gs_bg.jpg);
  background-position:left top;
background-repeat:repeat-x;
background-color:#f3edd8;
background-attachment:fixed;
}
a {
  color: #3579bf;
}
input[type="text"],
textarea,
select {
  border: 1px solid #888;
}
/* clearfix */
.clearfix {
  *zoom: 1;
}
  .clearfix:before, .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

/* icons */
.icon:before,
.ie_icon {
  display: block;
  float: left;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background-image: url(https://img.shop-pro.jp/tmpl_img/62/icons16.png);
  background-repeat: no-repeat;
  content: "";
}
  .icon_myaccount:before,
  .ie_icon_myaccount {
    background-position: left -96px;
  }
  .icon_regist:before,
  .ie_icon_regist {
    background-position: left -192px;
  }
  .icon_login:before,
  .ie_icon_login {
    background-position: left -224px;
  }
  .icon_logout:before,
  .ie_icon_logout {
    background-position: left -208px;
  }
  .icon_search:before,
  .ie_icon_search {
    background-position: left -16px;
  }
  .icon_viewcart:before,
  .ie_icon_viewcart {
    background-position: left -0px;
  }
  .icon_sort:before,
  .ie_icon_sort {
    background-position: left -112px;
  }
  .icon_prev:before,
  .ie_icon_prev {
    margin-right: 0;
    background-position: left -32px;
  }
  .icon_next:before,
  .ie_icon_next {
    float: right;
    margin-right: 0;
    background-position: right -48px;
  }
  .icon_prev_dis:before,
  .ie_icon_prev_dis {
    margin-right: 0;
    background-position: left -64px;
  }
  .icon_next_dis:before,
  .ie_icon_next_dis {
    float: right;
    margin-right: 0;
    background-position: right -80px;
  }
  .icon_lst:before,
  .ie_icon_lst {
    margin-right: 0;
    background-position: left -176px;
  }
    .footer_lst .icon_lst:before,
    .footer_lst .ie_icon_lst {
      margin-left: -16px;
    }
  .icon_down:before,
  .ie_icon_down {
    display: none;
  }
  .icon_category_lst:before,
  .ie_icon_category_lst {
    display: none;
  }
  .icon_review:before,
  .ie_icon_review {
    background-position: left -240px;
  }
  .icon_review_post:before,
  .ie_icon_review_post {
    background-position: left -256px;
  }

/* layout */
.layout_wrapper {
  margin: 0 auto;
  width: 1000px;
  background-color: #fff;
}
.layout_header,
.layout_container,
.layout_footer {
  margin: 0 auto;
  width: 94%;
}
.layout_header {
  padding-top: 10px;
}
.layout_footer {
  margin-top: 3em;
}
.header_btn {
  font-size: 92.307%;
  line-height: 1.5;
}
  .header_btn a {
    color: #444;
  }
.viewcart_btn {
  float: right;
  margin-bottom: .5em;
  margin-left: 1.063%;
}
.header_member_nav {
  float: right;
  width: 29.787%;
}
  .header_member_nav li {
    float: right;
    white-space: nowrap;
    margin-left: 3.571%;
  }
  .member_login_name {
    float: right;
    clear: right;
    margin-bottom: .5em;
    text-align: right;
    line-height: 1.5;
  }

/* delivery price */
.header_delivery_price {
  padding: .5em 1em .3em;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #df7676;
  color: #fff;
  line-height: 1.5;
  float: right;
  clear: right;
}

/* product search form */
.prd_search_block {
  position: relative;
  float: left;
  margin: -6px 0 0 0;
  padding: 6px 0 0 1px;
  width: 30.212%;
  font-size: 92.307%;
}
  .prd_search_block.open {
    padding: 5px 0;
    border: 1px solid #888;
  }
  .prd_search_form_btn {
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
    padding: .3em .5em;
    border: 1px solid #a0a0a0;
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
  .prd_search_form {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: none;
    overflow: hidden;
    margin-top: 5px;
    padding: 5px;
    border-top: 1px solid #888;
    width: 97%;
  }
  .prd_search_keyword {
    float: left;
    padding: .5em 0;
    width: 80%;
    border: 1px solid #888;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-indent: 5px;
  }
  .prd_search_btn {
    float: right;
    padding: .35em 0;
    width: 18%;
    border: 1px solid #444;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #444;
    color: #fff;
    cursor: pointer;
  }
  .prd_search_optioncategory {
    margin-top: 10px;
    line-height: 1.5;
  }
  .prd_search_select {
    display: inline-block;
    width: 100%;
    font-size: 120%;
  }
  .prd_search_select option {
    word-break: break-all;
  }

/* shopname logo */
.shop_name {
  clear: both;
  padding: 1em 10% 2em;
  text-align: center;
  line-height: 1.5;
  margin-top: 2em;
  border-bottom: 1px solid #888;
}

  .shop_name a {
    color: #444;
    text-decoration: none;
  }
    .shop_name a:hover {
      text-decoration: underline;
    }
  .shop_name p {
    margin-bottom: 10px;
    text-align: center;
    font-size: 246.153%;
  }
  .shop_name img {
    max-width: 100%;
    height: inherit;
  }

/* header global nav */
.header_global_nav {
  margin-top: 3px;
  margin-bottom: 2em;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
}
.header_nav_lst {
  text-align: center;
}
.header_nav_menu {
  position: relative;
  display: inline;
  margin: 0 1em;
  padding: 0 1em;
  text-align: center;
  font-weight: bold;
  line-height: 4;
}
.header_nav_menu a,
.header_nav_menu span {
  display: inline;
  color: #444;
  text-decoration: none;
  cursor: pointer;
}
.header_nav_menu_category img {
  position: relative;
  width: 16px;
  height: 16px;
}
.header_category_lst {
  position: absolute;
  left: 0;
  z-index: 101;
  display: none;
  min-width: 100%;
  width: auto;
  border-top: 1px solid #aaa;
  background-color: #fff;
}
.header_category_lst li {
  display: block;
  float: none;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  border-left: 1px solid #888;
  text-align: left;
  white-space: nowrap;
  word-break: break-all;
  line-height: 1.4;
}
.header_category_lst a {
  display: block !important;
  padding: 1em;
  background-color: #fff;
}

/* title */
.ttl_h2 {
  margin-top: 3em;
  margin-bottom: .7em;
  color: #444;
  font-weight: bold;
  font-size: 124%;
}
.ttl_h3 {
  margin-top: 2em;
  margin-bottom: .5em;
  color: #444;
  font-weight: bold;
  font-size: 92.307%;
}

/* topicpath */
.topicpath_nav {
  margin: 2em 0;
  font-size: 84.615%;
}
  .topicpath_nav li {
    display: inline;
    margin-right: .2em;
  }
  .topicpath_nav li a {
    margin-left: .2em;
    color: #444;
    text-decoration: none;
  }
  .topicpath_nav li a:hover {
    text-decoration: underline;
  }

/* prduct list */
.prd_lst {
  position: relative;
  clear: both;
  margin-left: -2.218%;
}
.prd_lst_unit {
  float: left;
  margin-bottom: 15px;
  margin-left: 2.083%;
  word-break: break-all;
}
  .prd_lst_unit_s {
    width: 22.916%;
  }
  .prd_lst_unit_m {
    width: 31.25%;
  }
  .prd_lst_unit a {
    color: #000;
    text-decoration: none;
  }
  .prd_lst_unit a:hover {
    text-decoration: underline;
  }
  .prd_lst_img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: inherit;
  }
  .prd_lst_span {
    display: block;
    margin: .3em 0;
  }
  .prd_lst_name {
    margin-top: .5em;
  }
  .prd_lst_exp {
    color: #666;
    font-size: 84.615%;
  }
  .prd_lst_price,
  .prd_lst_soldout {
    font-weight: bold;
    font-size: 92.307%;
  }
  .prd_lst_regular {
    color: #666;
    text-decoration: line-through;
  }
  .prd_lst_none {
    clear: both;
    text-align: center;
    font-size: 123.076%;
    line-height: 16;
  }
.prd_lst_block .ttl_h2 {
  float: left;
  margin: 20px 0 0;
}
.prd_lst_sort {
  float: right;
  margin: 20px 0;
}
  .prd_lst_sort a {
    color: #444;
  }
  .prd_lst_pager {
    position: relative;
    overflow: hidden;
    margin-top: 2em;
  }
  .prd_lst_pager ul {
    position: relative;
    left: 50%;
    float: left;
  }
  .prd_lst_pager li {
    position: relative;
    left: -50%;
    float: left;
  }
  .prd_lst_pager .prd_lst_pager_prev,
  .prd_lst_pager .prd_lst_pager_next {
    padding: .5em 0;
    width: 8em;
  }
  .prd_lst_pager .prd_lst_pager_next {
    text-align: right;
  }
  .icon_prev_dis,
  .icon_next_dis {
    display: block;
    color: #aaa;
  }
  .prd_lst_pager a {
    color: #444;
    text-decoration: none;
  }
  .prd_lst_pager a:hover {
    text-decoration: underline;
  }
.prd_lst_pos b {
  font-size: 160%;
}

/* footer */
.footer_section {
  float: left;
  margin-top: 1em;
  margin-right: 1.5%;
  margin-bottom: 15px;
  width: 23%;
}
  .footer_section .ttl_h2 {
    margin-top: 0;
  }
.footer_nav {
  position: relative;
  clear: both;
  padding: 2em 0;
  border-top: 1px solid #d8d8d8;
}
.footer_lst {
  font-size: 92.307%;
  line-height: 1.5;
}
  .footer_lst li {
    word-break: break-all;
    margin-bottom: .5em;
    padding-left: 16px;
  }
  .footer_lst .footer_category_img {
    display: block;
    margin-bottom: .3em;
    max-width: 100%;
    height: auto;
  }
  .footer_lst a {
    color: #444;
    text-decoration: none;
  }
    .footer_lst a:hover {
      text-decoration: underline;
    }

/* manager */
.manager_img img {
  max-width: 100%;
}
.manager_memo .ttl_h3 {
  margin-top: .7em;
}

/* social icons */
.social_lst ul {
  padding-left: 16px;
  text-align: left;
}
.social_lst li {
  display: inline;
  margin: 1.5%;
}
.social_lst img {
  width: 24px;
  height: 24px;
  vertical-align: bottom;
}

  .copyright {
    clear: both;
    padding: 1em 0;
    text-align: right;
    font-size: 76.923%;
  }
    .powered {
      display: inline;
      margin-left: 1em;
      text-align: right;
      line-height: 18px;
    }
    .powered a {
      color: #777;
      text-decoration: none;
    }
    .powered img {
      margin-left: .3em;
      width: 200px;
      height: 18px;
    }

/* list */
.def_lst {
  border-top: 1px solid #eee;
}
  .def_lst_dt {
    padding-top: 1em;
    padding-bottom: 1em;
    font-weight: bold;
    float: left;
    clear: both;
    width: 30%;
    word-break: break-all;
  }
  .def_lst_dd {
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 35%;
    border-bottom: 1px solid #eee;
  }
    .def_lst_dd img {
      max-width: 100%;
      width: inherit;
      height: auto;
    }

/* product option */
.product_option_table {
  margin: 3em 0;
}
  .product_option_table table {
    width: 100%;
    border-bottom: 1px solid #dadada;
    border-left: 1px solid #dadada;
  }
  .product_option_table th,
  .product_option_table td {
    padding: .8em .5em;
    border-top: 1px solid #dadada;
    border-right: 1px solid #dadada;
  }
  .product_option_table th {
    text-align: center;
  }
  .product_option_table td {
    vertical-align: top;
    text-align: center;
  }

/* policy */
#policy p {
  margin: 1em 0;
  color: #666;
  line-height: 1.8;
}
.policy_lead {
  padding-bottom: 1em;
  border-bottom: 1px solid #eee;
}

/* for ie7 - 8 */
.ie_wrapper .header_global_nav {
  position: relative;
  z-index: 101;
}
.ie_wrapper .header_nav_menu {
  z-index: 60;
}
.ie_wrapper .header_nav_menu_category {
  z-index: 100;
}
.ie_wrapper .header_category_lst {
  top: 3em;
}
/* for ie7 */
.ie.icon_prev,
.ie.icon_prev_dis {
  margin-right: 2em;
}
.ie_wrapper .header_category_lst {
  top: 2.7em;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 1.5) {
  .icon:before {
    background-image: url(https://img.shop-pro.jp/tmpl_img/62/icons16_2x.png) !important;
    -webkit-background-size: 16px 320px;
    background-size: 16px 320px;
  }
}


/* === Minimal White Overrides（コピペOK） === */
:root{--bg:#fff;--fg:#111;--muted:#6b7280;--border:#e5e7eb;--accent:#111;--radius:12px;--container:1200px;--leading:1.8;--space-xs:6px;--space-sm:10px;--space-md:16px;--space-lg:24px;--space-xl:32px}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);line-height:var(--leading);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--fg);text-decoration-thickness:1px;text-underline-offset:2px}a:hover{text-decoration:underline}
h1,.ttl_h1{font-weight:700;line-height:1.2;margin:24px 0 16px;font-size:clamp(22px,3vw,32px)}
h2,.ttl_h2{font-weight:700;line-height:1.3;margin:24px 0 10px;font-size:clamp(18px,2.4vw,24px)}
h3,.ttl_h3{font-weight:600;line-height:1.35;margin:16px 0 6px;font-size:clamp(16px,2vw,18px)}
.layout_wrapper{width:100%;max-width:var(--container);margin:0 auto;background:var(--bg)}
.layout_header,.layout_container,.layout_footer{width:100%;max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.topicpath_nav{margin:24px 0;font-size:90%}.topicpath_nav a{color:var(--fg)}.topicpath_nav li{color:var(--muted)}
button,input[type=button],input[type=submit],input[type=reset],.header_btn a,.viewcart_btn a,.page_navi a,.page_navi strong,.prd_lst_sort a,.icon_prev,.icon_next,.icon_prev_dis,.icon_next_dis{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;line-height:1.2;padding:10px 14px;border:1px solid var(--accent);color:var(--fg);background:var(--bg);border-radius:999px;text-decoration:none;box-shadow:none}
button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,.header_btn a:hover,.viewcart_btn a:hover,.page_navi a:hover,.prd_lst_sort a:hover{background:var(--accent);color:#fff;text-decoration:none}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],textarea,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--fg);outline:none;box-shadow:none}
input:focus,textarea:focus,select:focus{border-color:#cbd5e1}
.product_spec_table,.product_option_table table,.none_border_table{width:100%;border-collapse:collapse}
.product_spec_table th,.product_spec_table td,.product_option_table th,.product_option_table td,.none_border_table th,.none_border_table td{border:1px solid var(--border);padding:12px;text-align:left;vertical-align:top}
.product_spec_table th,.product_option_table th{background:#fafafa;text-align:center}
.header_global_nav .header_nav_lst{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:10px 0}
.header_global_nav .header_nav_lst a{text-decoration:none;padding:8px 10px;border-radius:8px;border:1px solid transparent}
.header_global_nav .header_nav_lst a:hover{border-color:var(--border)}
.prd_lst{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;margin:24px 0;padding:0;list-style:none}
.prd_lst_unit{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;box-shadow:none}
.prd_lst_unit .prd_lst_link{display:block;padding:16px;text-decoration:none;color:inherit}
.prd_lst_unit img{display:block;width:100%;height:auto;border-bottom:1px solid var(--border)}
.prd_lst_unit .prd_lst_name,.prd_lst_unit .prd_lst_price{margin-top:10px}
.prd_lst_pager ul{display:flex;align-items:center;gap:10px;list-style:none;padding:0;margin:24px 0}
.product_detail_block,.product_info_block{margin-top:24px}
.product_image_main img{width:100%;height:auto;border:1px solid var(--border);border-radius:12px;background:#fff}
.product_image_thumb ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;list-style:none;padding:0}
.product_image_thumb li img{border:1px solid var(--border);border-radius:8px;background:#fff}
.container_section,.contents_section{margin-top:24px}
.box,.notice_box,.information_box{border:1px solid var(--border);border-radius:12px;background:#fff;padding:16px;box-shadow:none}
.layout_footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);color:var(--muted);font-size:90%}
@media (max-width:1024px){.layout_header,.layout_container,.layout_footer{padding-left:10px;padding-right:10px}.prd_lst{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}}
@media (max-width:640px){.prd_lst{grid-template-columns:repeat(2,1fr);gap:16px}.header_global_nav .header_nav_lst{gap:8px}.product_spec_table th,.product_spec_table td,.product_option_table th,.product_option_table td{padding:10px}}


/* === Header (minimal) === */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.site-header__left{display:flex;align-items:center;gap:18px;min-width:0}
.site-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--fg)}
.site-logo__text{font-weight:700;font-size:18px;letter-spacing:.02em}
.site-nav__list{display:flex;align-items:center;gap:14px;list-style:none;margin:0;padding:0;overflow:auto}
.site-nav__item a{display:block;padding:8px 10px;border-radius:8px;border:1px solid transparent;color:inherit;text-decoration:none;white-space:nowrap}
.site-nav__item a:hover{border-color:var(--border)}
.site-header__right{display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--fg)}
.icon-btn:hover{border-color:#cbd5e1}
.cart-link{padding:0 2px}
.cart-count{position:absolute;top:-4px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#111;color:#fff;display:none;font-size:12px;line-height:18px;text-align:center}
.cart-link[data-count]:not([data-count="0"]) .cart-count{display:inline-block}

/* 検索バー */
.header-search{border-bottom:1px solid var(--border);background:#fff}
.header-search__form{display:flex;gap:12px;align-items:center;padding:12px 0}
.header-search__input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
.header-search__btn{padding:10px 14px;border:1px solid #111;border-radius:999px;background:#fff}
.header-search__btn:hover{background:#111;color:#fff}

/* ユーザーメニュー（ポップオーバー） */
.user-menu{position:relative}
.menu-popover{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.menu-popover a{display:block;padding:10px 12px;color:inherit;text-decoration:none}
.menu-popover a:hover{background:#f7f7f7}

/* モバイル調整 */
@media(max-width:768px){
  .site-header__bar{height:auto;padding-top:8px;padding-bottom:8px;align-items:flex-start}
  .site-header__left{flex:1;gap:12px}
  .site-logo__text{font-size:16px}
  .site-nav__list{gap:10px}
}

/* スクリーンリーダー専用テキスト */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================
   Minimal White Overrides + New Header Accordion (2025-08-26)
   既存定義は残し、このブロックを一番下に追記してください。
   ========================================================= */

/* ベース変数 */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --border:#e5e7eb;
  --container:1200px;
}

/* 配色・タイポ上書き */
html{ background: var(--bg); }
body{
  background: var(--bg) !important;
  color: var(--fg);
  line-height: 1.8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /* 旧：背景画像・色を打ち消し */
  background-image: none !important;
  background-color: var(--bg) !important;
}

/* レイアウトを可変幅化（1000px固定→最大1200px） */
.layout_wrapper{
  width: 100% !important;
  max-width: var(--container);
  margin: 0 auto;
  background: #fff;
}
.layout_header,
.layout_container,
.layout_footer{
  width: 100% !important;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

/* 旧ヘッダーUIは非表示（新ヘッダーに置換済みのため） */
.header_headline_nav,
.header_global_nav,
.prd_search_block,
.viewcart_btn,
.header_member_nav{
  display: none !important;
}

/* 旧ロゴ帯（shop_name）は新ヘッダーに集約するため非表示 */
.shop_name{ display: none !important; }

/* ===================== 新ヘッダー（共通） ===================== */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.site-header__left{display:flex;align-items:center;gap:18px;min-width:0}
.site-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--fg)}
.site-header__right{display:flex;align-items:center;gap:10px}

/* 汎用アイコンボタン */
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--fg)
}
.icon-btn:hover{border-color:#cbd5e1}

/* カート個数バッジ（.cart-link[data-count]で表示） */
.cart-link{padding:0 2px}
.cart-count{
  position:absolute;top:-4px;right:-2px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#111;color:#fff;display:none;font-size:12px;line-height:18px;text-align:center
}
.cart-link[data-count]:not([data-count="0"]) .cart-count{display:inline-block}

/* ===================== アコーディオン ===================== */
.accordion-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .28s ease;
  border-bottom:1px solid var(--border);
  background:#fff;
}

/* カテゴリー・アコーディオン内の並び */
.header-cats .site-nav__list{
  display:flex;flex-wrap:wrap;gap:10px 16px;padding:12px 0;margin:0;list-style:none;
}
.header-cats .site-nav__item a{
  display:block;padding:8px 10px;border:1px solid var(--border);
  border-radius:999px;text-decoration:none;color:inherit;
}
.header-cats .site-nav__item a:hover{ border-color:#cbd5e1; }

/* 検索パネル（余白のみ調整） */
.header-search .header-search__form{ display:flex;gap:12px;align-items:center;padding:12px 0; }
.header-search__input{ flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px; }
.header-search__btn{ padding:10px 14px;border:1px solid #111;border-radius:999px;background:#fff; }
.header-search__btn:hover{ background:#111;color:#fff; }

/* カテゴリ用トグルボタン */
.acc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--fg);line-height:1.2;
}
.acc-btn:hover{ border-color:#cbd5e1; }

/* ユーザーポップオーバー */
.user-menu{ position:relative; }
.menu-popover{
  position:absolute;right:0;top:calc(100% + 10px);min-width:200px;
  border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.06)
}
.menu-popover a{ display:block;padding:10px 12px;color:inherit;text-decoration:none; }
.menu-popover a:hover{ background:#f7f7f7; }

/* アクセシビリティ向けテキスト */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* モバイル微調整 */
@media(max-width:768px){
  .site-header__bar{min-height:56px;padding-top:8px;padding-bottom:8px;align-items:flex-start}
  .site-header__left{flex:1;gap:12px}
}

/* === Product List (PC) - bigger cards & square images === */
.prd_lst{
  /* 旧floatレイアウトを無効化し、CSS Gridに */
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-left: 0 !important; /* 既存の-マージン打ち消し */
}
.prd_lst_block .ttl_h2{ float:none !important; margin: 20px 0 12px !important; }

.prd_lst_unit,
.prd_lst_unit_s,
.prd_lst_unit_m{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* 画像を“正方形・はみ出しトリミング”で統一 */
.prd_lst_img{
  display:block;
  width:100% !important;
  height:auto !important;           /* 既存 height:inherit を打ち消し */
  aspect-ratio: 1 / 1;              /* CSSの正方比 */
  object-fit: cover;                /* はみ出しトリミング */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* テキストの見栄えを調整 */
.prd_lst_name{ 
  margin-top:.6em; 
  font-size: 15px; 
  font-weight: 600; 
  line-height: 1.5;
}
.prd_lst_exp{ font-size: 13px; color:#666; line-height:1.6; }
.prd_lst_price{ font-size:14px; font-weight:700; }
.prd_lst_regular{ color:#777; text-decoration:line-through; }

/* ページャなどの整形（中央寄せ崩れ対策） */
.prd_lst_pager{ margin-top:24px; }
.prd_lst_pager ul, .prd_lst_pager li{ left:0 !important; float:none !important; }
.prd_lst_pager ul{ display:flex; gap:8px; justify-content:center; }

/* === Product Detail main image max-width (PC) === */
.product_image{ display:block; }
.product_image_main{
  display:block;
  max-width: 680px;     /* ← お好みで 560〜720px などに調整 */
  margin: 0 auto;       /* センター */
}
.product_image_main img{
  display:block;
  width:100% !important;
  height:auto !important;
}

/* === Fix: 横スクロール抑止 & はみ出し防止（PC） === */

/* 1) パディング分も含めて幅計算（100%+paddingのはみ出し対策） */
*, *::before, *::after { box-sizing: border-box; }

/* 2) ビューポート外へのはみ出しを抑制（最終手段として横スク非表示） */
html, body { max-width: 100%; overflow-x: hidden; }

/* 3) ラッパー群は border-box で幅100%+padding にしてもはみ出さない */
.layout_wrapper,
.layout_header,
.layout_container,
.layout_footer { box-sizing: border-box; }

/* 4) 旧レイアウトの“横ズレ”要因を明示的に打ち消し */
.prd_lst { margin-left: 0 !important; }            /* 旧: -2.218% を無効化 */
.header_category_lst { left: 0; right: 0; }        /* 万一の横はみ出し防止（旧ナビ対策） */

/* 5) メディアなどのはみ出し対策（保険） */
.layout_wrapper img,
.layout_wrapper video,
.layout_wrapper iframe { max-width: 100%; height: auto; }

/* 6) Masonry領域の微小オーバーフロー（サブピクセル）対策 */
.footer_nav { overflow: hidden; }

/* === Fix: 一覧の1個目が空く問題（製品カード以外をグリッド計算から除外） === */

/* まず、一覧はモバイル2列／PC3列固定（既出の指定があれば上書き不要） */
.prd_lst{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-left: 0 !important;
}
@media (min-width: 1024px){
  .prd_lst{ grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}

/* 製品カードの定義（この3クラスだけを“カード”として扱う） */
.prd_lst > .prd_lst_unit,
.prd_lst > .prd_lst_unit_s,
.prd_lst > .prd_lst_unit_m{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  min-width:0; /* グリッド内でのはみ出し防止 */
}

/* ← ここが重要：カード以外の直下要素は“グリッドの列を占有しない”ようにする */
.prd_lst > :not(.prd_lst_unit):not(.prd_lst_unit_s):not(.prd_lst_unit_m){
  display: contents !important;   /* 可視のまま“ラッパーだけ”を消す＝グリッドの空きが出ない */
}

/* よく混ざる要素（保険）：clearfixや見出しなどは列を消費させない */
.prd_lst > .clearfix,
.prd_lst > .ttl_h2,
.prd_lst > .prd_lst_sort,
.prd_lst > .prd_lst_pager,
.prd_lst > .prd_lst_pos{
  display: contents !important;
}

/* 画像は正方形トリミング（一覧の見栄え安定） */
.prd_lst_img{
  display:block; width:100% !important; height:auto !important;
  aspect-ratio:1/1; object-fit:cover; border:1px solid #e5e7eb; border-radius:8px;
}

/* === Fix: 一覧の1個目が空く問題（疑似要素＆ラッパー除外） === */

/* 1) グリッド計算に参加してしまう clearfix の ::before/::after を無効化 */
.prd_lst::before,
.prd_lst::after{
  content: none !important;
  display: none !important;
}

/* 2) UL既定の余白でズレるのを防止 */
.prd_lst{
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) “製品カード以外”の直下要素は列を消費しない（ラッパーは中身だけ表示） */
.prd_lst > :not(.prd_lst_unit):not(.prd_lst_unit_s):not(.prd_lst_unit_m){
  display: contents !important;
}

/* 4) ありがちなラッパー類（保険） */
.prd_lst > .clearfix,
.prd_lst > .prd_lst_sort,
.prd_lst > .prd_lst_pager,
.prd_lst > .prd_lst_pos,
.prd_lst > .ttl_h2{
  display: contents !important;
}

/* 5) もし空要素が混ざっていたら無視 */
.prd_lst > li:empty,
.prd_lst > div:empty{
  display: none !important;
}

/* === 商品一覧：タイトル・説明文に左右の余白 === */

/* カード内テキストにだけ左右パディングを付与（画像はそのまま） */
.prd_lst_unit .prd_lst_name,
.prd_lst_unit .prd_lst_exp,
.prd_lst_unit .prd_lst_price,
.prd_lst_unit .prd_lst_regular,
.prd_lst_unit .prd_lst_soldout,
.prd_lst_unit_s .prd_lst_name,
.prd_lst_unit_s .prd_lst_exp,
.prd_lst_unit_s .prd_lst_price,
.prd_lst_unit_s .prd_lst_regular,
.prd_lst_unit_s .prd_lst_soldout,
.prd_lst_unit_m .prd_lst_name,
.prd_lst_unit_m .prd_lst_exp,
.prd_lst_unit_m .prd_lst_price,
.prd_lst_unit_m .prd_lst_regular,
.prd_lst_unit_m .prd_lst_soldout{
  padding-left: 12px;
  padding-right: 12px;
}

/* ページ内の一覧タイトル（見出し）にも少しだけ余白を足したい場合 */
.prd_lst_block .ttl_h2{
  padding-left: 12px;
  padding-right: 12px;
}

/* PCでは少し広めに */
@media (min-width: 1024px){
  .prd_lst_unit .prd_lst_name,
  .prd_lst_unit .prd_lst_exp,
  .prd_lst_unit .prd_lst_price,
  .prd_lst_unit .prd_lst_regular,
  .prd_lst_unit .prd_lst_soldout,
  .prd_lst_unit_s .prd_lst_name,
  .prd_lst_unit_s .prd_lst_exp,
  .prd_lst_unit_s .prd_lst_price,
  .prd_lst_unit_s .prd_lst_regular,
  .prd_lst_unit_s .prd_lst_soldout,
  .prd_lst_unit_m .prd_lst_name,
  .prd_lst_unit_m .prd_lst_exp,
  .prd_lst_unit_m .prd_lst_price,
  .prd_lst_unit_m .prd_lst_regular,
  .prd_lst_unit_m .prd_lst_soldout{
    padding-left: 16px;
    padding-right: 16px;
  }
  .prd_lst_block .ttl_h2{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* === 商品一覧：PCは4列固定（1024px以上） === */
@media (min-width: 1024px){
  .prd_lst{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important; /* お好みで 16〜28px などに調整可 */
  }
}

/* === Header logo: adjust size with vars === */
:root{
  --logo-h-mobile: 32px;  /* モバイルの最大高さ */
  --logo-h-pc:     50px;  /* PCの最大高さ（大きすぎたら 34px / 32px、小さければ 40px に） */
}

.site-logo{
  display:inline-flex; align-items:center; line-height:1;
}

/* 画像/SVGロゴ */
.site-logo img,
.site-logo svg{
  display:block;
  width:auto !important;
  height:auto !important;
  max-height: var(--logo-h-mobile);
}

@media (min-width:1024px){
  .site-logo img,
  .site-logo svg{
    max-height: var(--logo-h-pc) !important;
  }
  /* ヘッダーの高さも余裕を少しだけ確保 */
  .site-header__bar{ min-height: 64px; }
}

/* テキストロゴだった場合のサイズ（画像であれば無視されます） */
.site-logo{ font-size: 18px; }
@media (min-width:1024px){
  .site-logo{ font-size: 20px; }
}

/* === Header icon size normalize (search/user vs cart) === */
:root{
  --header-icon-size: 22px; /* 必要なら 24px/20px などに変更可 */
}

/* a と button の挙動差を吸収 */
.site-header .icon-btn{
  width:38px; height:38px;
  padding:0; line-height:0;           /* 文字サイズの影響を断つ */
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff; color:var(--fg);
  display:inline-flex; align-items:center; justify-content:center;
  appearance:none; -webkit-appearance:none;
}

/* 中の SVG を強制同寸に（既存の 1em 指定などを無効化） */
.site-header .icon-btn svg{
  display:block;
  width:var(--header-icon-size) !important;
  height:var(--header-icon-size) !important;
  flex:0 0 var(--header-icon-size);
}

/* 余計な余白を出さない */
.site-header .icon-btn > svg{ vertical-align:middle; }

/* === 商品一覧サムネ：高さを固定、幅は比率で自動 === */
/* 管理画面のサムネイル“長辺/高さ”に合わせて数値を設定してください */
:root{
  --thumb-h-mobile: 160px;  /* モバイル時サムネ高さ（例） */
  --thumb-h-pc:     220px;  /* PC時サムネ高さ（例） */
}

/* 画像要素が .prd_lst_img だったり、その内側に <img> があるケースの両方に効かせる */
.prd_lst_img,
.prd_lst_img img{
  display:block;
  margin:0 auto;                 /* 中央寄せ */
  height: var(--thumb-h-mobile) !important; /* 高さを固定（設定値） */
  width: auto !important;        /* 幅は比率で自動 */
  max-width: 100% !important;    /* カラム幅を超えない */
  object-fit: contain !important; /* 画像を切り抜かない */
  aspect-ratio: auto !important;  /* 以前の 1/1 指定を無効化 */
  border-radius: 8px;             /* お好みで */
  border: 1px solid #e5e7eb;      /* お好みで */
}

/* PCは高さを変更（設定のサムネ高さに） */
@media (min-width:1024px){
  .prd_lst_img,
  .prd_lst_img img{
    height: var(--thumb-h-pc) !important;
  }
}

/* === 一覧サムネ：枠は角丸、画像は角丸なし（どちらのマークアップでも対応） === */

/* まず画像側の角丸・枠はオフ（以前付けた丸み/枠を打ち消し） */
.prd_lst_img,
.prd_lst_img img{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  position: relative;
  z-index: 1; /* 枠（下の疑似要素）より前に表示 */
}

/* 各カードの先頭に“枠”を描く（画像と同じ高さで表示） */
.prd_lst_unit,
.prd_lst_unit_s,
.prd_lst_unit_m{ position: relative; }

.prd_lst_unit::before,
.prd_lst_unit_s::before,
.prd_lst_unit_m::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height: var(--thumb-h-mobile);         /* ← 既に設定済みのサムネ高さを流用 */
  border: 1px solid #e5e7eb;
  border-radius: 8px;                     /* 枠だけ角丸に */
  background:#fff;                        /* 好みで */
  z-index:0;
  pointer-events:none;
}
@media (min-width:1024px){
  .prd_lst_unit::before,
  .prd_lst_unit_s::before,
  .prd_lst_unit_m::before{
    height: var(--thumb-h-pc);            /* PC側のサムネ高さに合わせる */
  }
}

/* 画像サイズは以前の指定をそのまま利用（高さ固定・幅は比率で自動） */
.prd_lst_img,
.prd_lst_img img{
  display:block;
  margin:0 auto;
  height: var(--thumb-h-mobile) !important;
  width:auto !important;
  max-width:100% !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
@media (min-width:1024px){
  .prd_lst_img,
  .prd_lst_img img{
    height: var(--thumb-h-pc) !important;
  }
}

/* === 一覧サムネ：二重枠の解消（枠は1つだけ .prd_lst_img に描く） === */

/* 1) 以前の“カードに描く枠”を完全に無効化 */
.prd_lst_unit::before,
.prd_lst_unit_s::before,
.prd_lst_unit_m::before{ content:none !important; display:none !important; }

/* 2) 画像とラッパーの既存の枠/角丸はすべて消す（画像角丸ナシを保証） */
.prd_lst_img,
.prd_lst_img img{
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* 3) サムネはラッパー .prd_lst_img を基準にサイズ決定（高さ固定・幅は比率で自動） */
:root{
  /* 既に定義済みならそのままでOK。必要なら値だけ合わせてください。 */
  --thumb-h-mobile: 160px;
  --thumb-h-pc:     220px;
}
.prd_lst_img{
  position:relative;
  width:100% !important;
  height:var(--thumb-h-mobile) !important;
}
@media (min-width:1024px){
  .prd_lst_img{ height:var(--thumb-h-pc) !important; }
}

/* 4) 画像は枠内で比率維持・トリミングなし */
.prd_lst_img img{
  display:block;
  max-height:100% !important;
  height:auto !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 auto;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

/* 5) 枠は .prd_lst_img の ::before で1つだけ描く（角丸は枠のみ） */
.prd_lst_img::before{
  content:"";
  position:absolute; inset:0;
  border:1px solid #e5e7eb;  /* 枠色はお好みで */
  border-radius:8px;         /* 角丸は枠だけ */
  pointer-events:none;
  background:#fff;           /* 必要なければ transparent に */
}

/* === Fixed Header: 常時固定版 === */

/* 追尾系のクラス効果は無効化 */
.site-header.is-pinned,
.site-header--hidden { transform: none !important; }

/* 完全固定 */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  transform: none !important;
  border-bottom: 1px solid var(--border);
  background: #fff; /* 念のため */
}

/* ヘッダーバーの高さぶん本文を押し下げる */
body.has-fixed-header #container,
body.has-fixed-header .layout_container{
  padding-top: var(--header-h, 64px);
}

/* パネルはヘッダー内で全幅に（開いたときも綺麗に出す） */
.accordion-panel{
  position: relative;   /* fixedの子要素として自然に展開 */
  left: 0; right: 0;
  width: 100%;
}

/* === Header spacing = コンテンツと同じ余白＆幅に揃える === */
/* 本文側と同じ最大幅＆左右パディング */
:root{
  /* 既存の --container を使っているならそれを流用。無い場合は 1200px などに。 */
  --container: 1200px;
  --content-pad: 16px;        /* 本文の左右余白に合わせる（必要なら 20/24 に） */
}

.site-header__bar{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* アコーディオンの中身（カテゴリ/検索）も同じ余白＆幅に */
.accordion-panel > *{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* 右側アイコン群の詰まり感を少しだけ緩和（お好みで） */
.site-header__right{ gap: 12px; }

/* ===== Top page layout (PC two-column) ===== */
:root{
  --container: var(--container, 1200px);
  --content-pad: var(--content-pad, 16px);
  --sidebar-w: 260px;        /* 左カラム幅：お好みで 240&#8211;280px */
  --gap: 24px;               /* カラム間余白 */
}

/* スライダーの周りの余白（ヘッダー固定時でも被らない） */
.top-hero{
  max-width: var(--container);
  margin: 0 auto 16px;
  padding-inline: var(--content-pad);
}

/* 本文と同じ中央寄せ＆左右余白 */
.top-layout{
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--content-pad);
}

/* スマホ：縦積みのまま（変更なし） */
.top-sidebar{ margin-bottom: 16px; }

/* PC：2カラム化 */
@media (min-width: 1024px){
  .top-layout{
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: var(--gap);
    align-items: start;
  }
  /* 左サイド：スクロール時に見失わない程度に固定（必要なければ position指定を削除） */
  .top-sidebar{
    position: sticky;
    top: calc(var(--header-h, 64px) + 12px);
    align-self: start;
  }
}

/* サイドカテゴリの見た目 */
.side-cat__title{
  font-weight: 700;
  margin: 8px 0 10px;
  font-size: 18px;
}
.side-cat__list{
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 8px;
}
.side-cat__list a{
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.side-cat__list a:hover{
  border-color: #cbd5e1;
}
.side-cat__section{
  margin-top: 6px;
  color: #6b7280; /* muted */
  font-size: 90%;
}

/* 右側本文の余白調整（見出し詰まり防止） */
.top-main .ttl_h2{ margin-top: 8px; }
.top-content{ margin-top: 12px; }

/* スライダー内の画像が親幅を超えないように */
.slider img{ max-width:100%; height:auto; display:block; }

/* ===== Side Category: mobile/tablet accordion, desktop expanded ===== */
:root{
  /* 既存にあれば流用されます */
  --border: #e5e7eb;
  --content-pad: var(--content-pad, 16px);
}

/* トグルの見た目 */
.side-cat__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  cursor: pointer;
}
.side-cat__toggle .chev{ transition: transform .2s ease; }
.side-cat__toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* パネルの余白 */
.side-cat__panel{ margin-top: 10px; }

/* デフォルト（SP/Tablet）：ボタン表示、パネルは hidden 属性で閉じる */
@media (max-width: 1023.98px){
  .side-cat__toggle{ display: inline-flex; }
  .side-cat__panel[hidden]{ display: none; }
}

/* PC：ボタン非表示、パネルは常に表示（hidden を無効化） */
@media (min-width: 1024px){
  .side-cat__toggle{ display: none !important; }
  .side-cat__panel{ display: block !important; }
  .side-cat__panel[hidden]{ display: block !important; }
}

/* 既存のカテゴリリストのスタイル（そのまま使う場合） */
.side-cat__title{
  font-weight: 700;
  margin: 8px 0 10px;
  font-size: 18px;
}
.side-cat__list{
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 8px;
}
.side-cat__list a{
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.side-cat__list a:hover{ border-color: #cbd5e1; }
.side-cat__section{
  margin-top: 6px;
  color: #6b7280;
  font-size: 90%;
}

/* === Header container padding fix === */
:root{
  --container: 1200px; /* 既存と合わせる */
  --header-gutter: 16px; /* 左右余白 */
  --header-h: 64px;      /* ヘッダーの高さ */
}

/* 固定ヘッダー */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background:#fff; border-bottom:1px solid var(--border);
}

/* ヘッダーバーの中身をコンテナ幅＋左右余白で中央寄せ */
.site-header__bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--header-gutter);
  width: 100%;
}

/* アコーディオン（カテゴリー／検索）も同じコンテナ揃え */
.header-cats > nav,
.header-search__form{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--header-gutter);
}

/* パネル本体にも左右パディングだけ欲しい場合 */
.header-cats,
.header-search{
  padding-left: 0;  /* ←上の内側でパディング付けるので0でOK */
  padding-right: 0;
  border-bottom: 1px solid var(--border);
  background:#fff;
}

/* 固定ヘッダー分だけ本文を押し下げ（被り防止） */
body{ padding-top: var(--header-h); }

/* タブレット以上で少し広くするなら */
@media (min-width: 1024px){
  :root{ --header-gutter: 20px; }
}

/* 表示高さ（必要なら数値だけお好みで） */
:root{
  --logo-h-mobile: 34px;  /* スマホ表示の最大高さ */
  --logo-h-pc:     56px;  /* PC表示の最大高さ（元画像57pxに近い） */
}

/* ヘッダーバーの左右余白は本文と揃える */
.site-header__bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* ロゴの入る箱。横長ロゴでもアイコン群を圧迫しないよう最大幅を設定 */
.site-logo{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  max-width: clamp(160px, 28vw, 320px);  /* 画面幅で自然に可変 */
  overflow: hidden;
}

/* 画像は “高さの上限” を基準に縮小。幅は比率で自動。 */
.site-logo img{
  display: block;
  max-height: var(--logo-h-mobile) !important; /* 旧CSSのheight指定を無効化 */
  height: auto !important;
  width: auto;
  max-width: 100%;  /* 箱より大きければ幅側でも縮む */
}

/* PCでは少し大きめに */
@media (min-width:1024px){
  .site-logo img{
    max-height: var(--logo-h-pc) !important;
  }
}

/* ヘッダー高さを “実測” で反映するための変数（初期値は保険） */
:root{
  --header-offset: 64px; /* JSで上書きされます */
}

/* 固定ヘッダー＋オフセット。左右の余白は本文と同じに維持 */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.site-header__bar{
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

/* スペーサーは “ヘッダーの実高” 分だけ確保（JSで高さ同期） */
.header-spacer{
  height: var(--header-offset);
}

/* スライダー周りの余白を完全に排除（bxSliderのラッパも含む） */
.top-hero{ margin-top: 0 !important; padding-top: 0 !important; }
.top-hero .slider{ margin: 0 !important; }
.bx-wrapper{ margin: 0 auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }

/* 旧テーマ由来で余白が乗るケースの保険（任意） */
.layout_header{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* --- Fix: ヘッダー下の二重オフセットを解消 --- */
.header-spacer{ display:none !important; height:0 !important; }

/* bodyに直接入れていたオフセットは使わない（.has-fixed-header 方式に一本化） */
body{ padding-top: 0 !important; }

/* コンテナ側の押し下げは .has-fixed-header 用だけ残す（既にあるならOK） */
/* 参考：
body.has-fixed-header #container,
body.has-fixed-header .layout_container{
  padding-top: var(--header-h, 64px);
}
*/

/* --- Slider fix: コンテナ幅にフィット（右側の余白解消） --- */
.top-hero{
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;   /* ← ここで左右パディングを殺す */
  box-sizing: border-box;
}
.top-hero .slider,
.top-hero .bx-wrapper,
.top-hero .bx-viewport,
.top-hero #slider{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.top-hero .bx-viewport img{
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* === 商品一覧：列数（SP=2 / Tablet=3 / PC=4） === */
.prd_lst{
  /* デフォルト（スマホ） */
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

/* タブレット（例：768px&#12316;1023.98px）は3列 */
@media (min-width: 768px) and (max-width: 1023.98px){
  .prd_lst{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* PC（1024px&#12316;）は4列 */
@media (min-width: 1024px){
  .prd_lst{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* === 商品一覧：画像と商品名の間の隙間を縮める === */
/* 画像を囲うリンクの下パディングを小さく */
.prd_lst_link{
  padding-bottom: 0px !important; /* 16px → 6px などに */
}

/* 商品名の上マージンも控えめに */
.prd_lst_unit .prd_lst_name,
.prd_lst_unit_s .prd_lst_name,
.prd_lst_unit_m .prd_lst_name{
  margin-top: 6px !important;     /* 10px/.6em → 6px */
}

/* （任意）共通スパンの上下余白が効いている場合は少しだけ詰める */
.prd_lst_span{
  margin-top: .2em !important;
  margin-bottom: .15em !important;
}

/* ===== Cart button: black -> invert on hover (detail page only) ===== */
.product_addcart_btn{
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* hover / focus で反転 */
.product_addcart_btn:hover,
.product_addcart_btn:focus{
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  outline: none;
}

/* キーボードフォーカスを見やすく */
.product_addcart_btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}

/* 無効時（念のため） */
.product_addcart_btn:disabled{
  background: #777 !important;
  border-color: #777 !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: .7;
}

/* ========== A) デフォルト（HTML変更なし）：中央にタイトル＋左右に細ライン ========== */
/* 対象：info/recommend/seller の見出し */
.info_block .ttl_h2,
.prd_recommend_block .ttl_h2,
.prd_seller_block .ttl_h2{
  display:flex;
  align-items:center;
  justify-content:center;   /* タイトル中央 */
  gap:12px;
  margin:28px 0 16px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.3;
}

.info_block .ttl_h2::before,
.info_block .ttl_h2::after,
.prd_recommend_block .ttl_h2::before,
.prd_recommend_block .ttl_h2::after,
.prd_seller_block .ttl_h2::before,
.prd_seller_block .ttl_h2::after{
  content:"";
  flex:1 1 24px;            /* 24pxを下限に伸縮する細ライン */
  height:1px;
  background:#111;
  opacity:.18;              /* うるさくならない薄さ */
}

/* モバイルは少し詰める */
@media (max-width: 767.98px){
  .info_block .ttl_h2,
  .prd_recommend_block .ttl_h2,
  .prd_seller_block .ttl_h2{
    margin:22px 0 12px;
    gap:10px;
  }
}

/* ===== PC限定：左カラム「カテゴリー」見出し＋一覧のスタイルアップ ===== */
@media (min-width: 1024px){
  /* カード風の箱 */
  .top-sidebar .side-cat{
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
  }

  /* 見出し：左に細い黒バー＋字間少し詰める */
  .top-sidebar .side-cat__title{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  .top-sidebar .side-cat__title::before{
    content: "";
    display: inline-block;
    width: 6px; height: 1.1em;
    background: #111;
    border-radius: 2px;
  }

  /* リスト：すっきりグリッド */
  .top-sidebar .side-cat__list{
    display: grid;
    gap: 8px;
    padding: 0; margin: 0;
    list-style: none;
  }

  /* 各項目：ドット＋テキスト、ホバーで反転 */
  .top-sidebar .side-cat__list a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  /* 先頭の“ドット” */
  .top-sidebar .side-cat__list a::before{
    content:"";
    width: 6px; height: 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    flex: 0 0 6px;
    transform: translateY(1px);
    transition: background .15s ease, border-color .15s ease;
  }
  /* ホバー：黒反転＋ドット白抜き */
  .top-sidebar .side-cat__list a:hover{
    background: #111; color: #fff; border-color: #111;
  }
  .top-sidebar .side-cat__list a:hover::before{
    background: #fff; border-color: #fff;
  }

  /* アクセシビリティ：キーボードフォーカス */
  .top-sidebar .side-cat__list a:focus-visible{
    outline: 2px solid #111;
    outline-offset: 2px;
  }

  /* セクション区切り（&#8212; グループ &#8212;）を控えめに */
  .top-sidebar .side-cat__section{
    margin-top: 10px;
    padding-top: 6px;
    color: #6b7280;
    font-size: 90%;
    border-top: 1px dashed var(--border, #e5e7eb);
  }

  /* “現在のカテゴリ”を強調したい場合の任意クラス／属性（どちらでもOK） */
  .top-sidebar .side-cat__list a.is-current,
  .top-sidebar .side-cat__list a[aria-current="page"]{
    background: #111; color: #fff; border-color: #111;
  }
  .top-sidebar .side-cat__list a.is-current::before,
  .top-sidebar .side-cat__list a[aria-current="page"]::before{
    background: #fff; border-color: #fff;
  }
}

/* PC限定：カテゴリカードの上余白＆アイテムの縦詰め */
@media (min-width: 1024px){
  /* 枠（カード）の上に余白を作る */
  .top-sidebar .side-cat{
    margin-top: 16px;               /* ← お好みで 12&#8211;24px に調整可 */
    padding: 12px 14px;             /* ほんの少しだけタイトに */
  }

  /* 見出しの下余白も控えめに */
  .top-sidebar .side-cat__title{
    margin: 2px 0 10px;
  }

  /* リストの行間を詰める */
  .top-sidebar .side-cat__list{
    gap: 6px;                       /* 旧: 8px → 6px */
  }

  /* 各項目の上下パディングを少し減らす */
  .top-sidebar .side-cat__list a{
    padding: 8px 10px;              /* 旧: 10px 12px → 縦を-2px */
  }

  /* 区切りテキスト（&#8212; グループ &#8212;）も詰め気味に */
  .top-sidebar .side-cat__section{
    margin-top: 8px;
    padding-top: 4px;
  }
}

/* ==== SPだけ：ヘッダー内の縦位置＆余白を最適化 ==== */
@media (max-width: 768px){
  /* ノッチ分も含めて上に少しゆとりを作る */
  .site-header{
    /* 古い iOS 用 constant() を併記してもOK */
    padding-top: max(6px, env(safe-area-inset-top));
  }

  /* 中身は縦中央に。上下パディングで“貼り付き”解消 */
  .site-header__bar{
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 10px;
    align-items: center !important;   /* 以前の flex-start を打ち消す */
  }

  .site-header__left,
  .site-header__right{
    align-items: center !important;
  }

  /* ロゴが小さく潰れないようモバイルの上限を少しだけ上げる（任意） */
  :root{ --logo-h-mobile: 36px; }
  .site-logo img{
    max-height: var(--logo-h-mobile) !important;
  }

  /* アイコンボタンの縦センターを安定 */
  .site-header .icon-btn{ height: 38px; }
  .site-header .icon-btn svg{ display: block; }
}

/* 固定ヘッダー用スペーサーを“実測＋ノッチ”で確保 */
.header-spacer{
  height: calc(var(--header-offset, 64px) + env(safe-area-inset-top));
}

/* === Product List Pager: Minimal Pill Style === */
.prd_lst_pager{ margin-top:28px; }
.prd_lst_pager ul{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; padding:0; margin:24px 0;
  list-style:none;
}
.prd_lst_pager li{ list-style:none; }

/* ボタン（リンク＆現在ページ strong を同じ見た目で） */
.prd_lst_pager a,
.prd_lst_pager strong{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:42px; height:38px; padding:0 14px;
  border:1px solid #111; border-radius:999px;
  background:#fff; color:#111; text-decoration:none;
  font-weight:600; letter-spacing:.02em; line-height:1;
  transition:background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
}

/* ホバーで反転 */
.prd_lst_pager a:hover{ background:#111; color:#fff; transform:translateY(-1px); }

/* 現在ページ（strong）を反転固定 */
.prd_lst_pager strong{ background:#111; color:#fff; cursor:default; }

/* 前/次 矢印（既存の prev/next クラスに付与） */
.prd_lst_pager_prev a::before{ content:"←"; font-size:14px; }
.prd_lst_pager_next a::after { content:"→"; font-size:14px; }

/* 無効状態（最初/最後のページなど） */
.prd_lst_pager .icon_prev_dis,
.prd_lst_pager .icon_next_dis{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:38px; padding:0 14px;
  border:1px solid #ddd; border-radius:999px; color:#b3b3b3;
  background:#f7f7f7;
}

/* 旧レイアウト由来のズレを念のため打ち消し */
.prd_lst_pager ul, .prd_lst_pager li{ left:0 !important; float:none !important; }

/* モバイルは少しコンパクトに */
@media (max-width:480px){
  .prd_lst_pager a,
  .prd_lst_pager strong,
  .prd_lst_pager .icon_prev_dis,
  .prd_lst_pager .icon_next_dis{
    min-width:36px; height:34px; padding:0 12px; font-weight:600; font-size:13px;
  }
  .prd_lst_pager ul{ gap:8px; margin:18px 0; }
}

/* 旧アイコン文字や擬似要素をオフ（重なり防止） */
.prd_lst_pager .icon_prev:before,
.prd_lst_pager .icon_next:before,
.prd_lst_pager_prev a::before,
.prd_lst_pager_next a::before,
.prd_lst_pager_prev a::after,
.prd_lst_pager_next a::after { content: none !important; }

/* レイアウト */
.prd_lst_pager ul{
  display:flex; justify-content:center; gap:10px;
  list-style:none; padding:0; margin:24px 0;
}
.prd_lst_pager li{ float:none !important; left:0 !important; }

/* ボタン */
.prd_lst_pager a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border:1px solid #111; border-radius:999px;
  background:#fff; color:#111; text-decoration:none;
  white-space:nowrap; line-height:1; font-weight:600;
}
.prd_lst_pager a:hover{ background:#111; color:#fff; }