/*
Name:         colorstore theme
Written by:   TetraThemes - (http://tetra-themes.net) 
Edited By:    MIHUNE - (https://mihune-web.com)
*/
*,*::before,*::after{box-sizing:border-box}
*{transition: .3s;}
html{font-size:62.5%;overflow-x: hidden !important;scroll-behavior:smooth}
ul,ol{list-style:none;padding:0}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,figcaption{font-size:1.4rem;font-weight:400;}
p{line-height: 1.6}
body{overflow-x: hidden !important;min-height:100vh;text-rendering:optimizeSpeed;}
input,button,textarea,select{font:inherit;}
@media(prefers-reduced-motion:reduce){*{-webkit-animation-duration:.01ms !important;animation-duration:.01ms !important;-webkit-animation-iteration-count:1 !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

:root{
  --tColor1: #1F8754;
  --tColor2: rgb(121, 182, 152);
  --tColor3: rgb(232, 242, 237);
  --tColor4: #155e3a;
}

/**
 *  img-responsive
 */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.flex {
  display: flex;
  flex-wrap: wrap;
 }
.bold{
  font-weight: 600;
}
/**
 *  body
 */
body {
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  color: #555;
  background-color: #fff;
}
.page-wrapper {
    width:100%;
	max-width: 144.0rem;
	margin: 0 auto;
}
/**
 *  headline
 */
h1, .h1 {
  font-size: calc(1.4rem + 2vw);
}
h2, .h2 {
  font-size: calc(1.4rem + 1vw);
}
h3, .h3 {
  font-size: 2.0rem;
}
h4, .h4 {
  font-size: 1.8rem;
}
h5, .h5 {
  font-size: 1.6rem;
}
h6, .h6 {
  font-size: 1.4rem;
}
/**
 *  link
 */
a {
  transition: .2s;
  color: #777;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #222;
}
a:hover img {
  opacity: .8;
}
/**
 *  list-inline
 */
.list-inline > li {
  padding-right: 0;
}
/**
 *  dl
 */
.ui-side dl {
  margin-bottom: 10px;
}
/**
 *  well
 */
.well {
  margin-bottom: 40px;
  border-radius: 0;
  box-shadow: none;
  color: #444;
  background-color: #f4f4f4;
}
.well p {
  margin-bottom: 0;
}
/**
 *  form
 */
.form-control {
  border-radius: 2px;
}
/**
 *  table
 */
.table tbody tr th {
  background-color: #f4f4f4;
}
.table tbody tr td {
  padding: 10px;
}
/*
 *  breadcrumb
 */
.breadcrumb {
  padding: 8px 0;
  margin: 0;
  list-style: none;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: ">";
}
/*_____________

 * HEADER
______________ */
.ui-header {
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 15px 0;
}
/**
 *  header_login_area
 */
.block-header-login {
  background-color: #333;
}
.block-header-login .site-description {
  font-size: 12px;
  color: #fff;
  margin-bottom: 0;
  padding:4px;
}
.block-header-login__menu {
  margin-left: auto;
  margin-right: 1.2rem;
  padding: 2px 0 0px;
}
.block-header-login__menu__item{
  padding-left: 1.0rem;
}
.block-header-login__menu__item a{
  font-size: 1.2rem ;
  color: #fff;
}
.block-header-login__menu svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  vertical-align: middle;
}
/**
 *  logo_area
 */
 .block-head-logo {
  text-align: center;
}
.block-head-logo .logo {
  margin: 0;
}
.block-head-content {
  margin-left: auto;
  margin-right: 2em;
}
/*__________

  main Navigation
  ___________ */
#mainNav {
  background: rgb(121, 182, 152);
  background: var(--tColor2, rgb(121, 182, 152) );
  box-shadow: 0 4px 8px var(--tColor4, #155e3a);
}
#mainNav ul.nav-body {
  width: 96%;
  margin: auto;
  padding: 8px;
  background: #1F8754;
  background: var(--tColor1, #1F8754);
  list-style: none;
  transform: translateY(8px);
}
#mainNav li.mainNav__item{
  position: relative;
}
#mainNav li.mainNav__item > a {
  display: flex;
  font-size: 13px;
  color: #fff;
  margin-bottom: 1px;
  padding: 1.2rem 1.6rem;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 1px #eee;
}
#mainNav .mainNav__item > a:hover,
#mainNav .mainNav__item > a:focus{
  color: #555;
  background: #eee;
}
.mainNav__subCate {
  display: none;
  color: #555;
  background: #eee;
  margin: 0;
  padding: 8px;
  box-shadow: 0 0 2px #fff;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 4px;
  z-index: 2;
}
.mainNav__subCate__item {
  padding: 4px 8px;
  border-bottom: 1px dotted;
}
.mainNav__subCate__item > a {
  font-size: 1.4rem;
}
#mainNav .mainNav__item:hover > .mainNav__subCate,
#mainNav .mainNav__item:focus > .mainNav__subCate{
  display: block;
}
/*_____________

   LAYOUT
  ____________ */
/**
 *  grid responsive
 */
.container {
  width: 90%;
}
.mainContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-around;
}
.mainContent {
  padding: 0 2vw;
}
.sideContent {
  padding: 1.6rem;
  padding-left: 0;
}
/**
 *  ui-section
 */
.ui-content-top {
	margin-bottom: 4.0rem;
	position: relative;
	z-index: 1;
}
.ui-main-top .ui-section {
  margin-bottom: 4.0rem;
}
/**
 *  ui-content-bottom
 */
.ui-content-bottom {
  margin-bottom: 4.0rem;
}
.ui-main .ui-section {
  margin-bottom: 4.0rem;
}
.ui-side .ui-section {
  margin-bottom: 3.2rem;
}
.ui-content-bottom .ui-section {
  margin-bottom: 1.6rem;
}
/**
 *  ui-pagetop
 */
.ui-pagetop {
  text-align: right;
  margin-bottom: -1px;
}
.ui-pagetop a {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  padding: 8px 16px;
  background: rgb(121, 182, 152);
  background: var(--tColor2, rgb(121, 182, 152));
  transform-origin: bottom;
}
.ui-pagetop a:hover {
  transform: scaleY(1.4);
}
/**
 *  copyright
 */
.ui-footer .copy {
	font-size: 1.0rem;
	color: #fff;
	padding: 1.4rem 0;
	border: none;
    background-color: #155e3a ;
    background-color: var(--tColor4, #155e3a);
	text-align: center;
}
/*________

  BUTTON
____________*/
.btn {
  border-radius: 0px;
}
.btn-main {
  color: #fff;
  background-color: #222;
  border-color: #222;
  border-bottom-color: #090909;
}
.btn-main:hover,
.btn-main:focus, 
.btn-main.focus, 
.btn-main:active, 
.btn-main.active,
.btn-main .open > .dropdown-toggle {
  color: #fff;
  background-color: #090909;
  border-color: #030303;
}
.btn-main:active, 
.btn-main.active,
.btn-main .open > .dropdown-toggle {
  background-image: none;
}
.btn-main.disabled, 
.btn-main.disabled:hover, 
.btn-main.disabled:focus, 
.btn-main.disabled.focus, 
.btn-main.disabled:active, 
.btn-main.disabled.active, 
.btn-main[disabled], 
.btn-main[disabled]:hover, 
.btn-main[disabled]:focus, 
.btn-main[disabled].focus, 
.btn-main[disabled]:active, 
.btn-main[disabled].active, 
fieldset[disabled] .btn-main, 
fieldset[disabled] .btn-main:hover, 
fieldset[disabled] .btn-main:focus, 
fieldset[disabled] .btn-main.focus, 
fieldset[disabled] .btn-main:active, 
fieldset[disabled] .btn-main.active {
  background-color: #222;
  border-color: #222;
}
.btn-main .badge {
  color: #222;
  background-color: #fff;
}
.btn-key {
  color: #fff;
  background-color: #DD2C2C;
  border-color: #DD2C2C;
  border-bottom-color: #b81e1e;
}
.btn-key:hover, .btn-key:focus, .btn-key.focus, .btn-key:active, .btn-key.active,
.btn-key .open > .dropdown-toggle {
  color: #fff;
  background-color: #b81e1e;
  border-color: #b01c1c;
}
.btn-key:active, .btn-key.active,
.btn-key .open > .dropdown-toggle {
  background-image: none;
}
.btn-key.disabled, .btn-key.disabled:hover, .btn-key.disabled:focus, .btn-key.disabled.focus, .btn-key.disabled:active, .btn-key.disabled.active, .btn-key[disabled], .btn-key[disabled]:hover, .btn-key[disabled]:focus, .btn-key[disabled].focus, .btn-key[disabled]:active, .btn-key[disabled].active, fieldset[disabled] .btn-key, fieldset[disabled] .btn-key:hover, fieldset[disabled] .btn-key:focus, fieldset[disabled] .btn-key.focus, fieldset[disabled] .btn-key:active, fieldset[disabled] .btn-key.active {
  background-color: #DD2C2C;
  border-color: #DD2C2C;
}
.btn-key .badge {
  color: #DD2C2C;
  background-color: #fff;
}
/**
 *  カレンダー
 */
.ui-side .table caption {
  text-align: center;
}
.ui-side .table > thead > tr > th {
  background-color: #f4f4f4;
}
@media (min-width: 769px) {
  .ui-side .table > thead > tr > th {
    padding: 3px;
    font-size: 12px;
  }
}
@media (min-width: 981px) {
  .ui-side .table > thead > tr > th {
    padding: 6px;
  }
}
.ui-side .table > tbody > tr > td {
  text-align: center;
  border: none;
}
.ui-side .table > tbody > tr > td.off {
  background-color: #FFCFCF;
}
@media (min-width: 769px) {
  .ui-side .table > tbody > tr > td {
    padding: 3px;
    font-size: 12px;
  }
}
@media (min-width: 981px) {
  .ui-side .table > tbody > tr > td {
    padding: 6px;
  }
}
/**
 *  ui-title
 */
.entry-title .title,
.section-title .title,
.side-title .title {
  display: inline-block;
  margin: 0;
  font-weight: 500;
}
/**
 *  entry-title
 */
.entry-title {
  margin-bottom: 25px;
}
.entry-title .title {
  font-size: 32px;
  font-weight: bold;
}
.entry-title .title a {
  font-weight: bold;
}
/**
 *  content-title
 */
.content-title {
  margin-bottom: 15px;
}
.content-title .title {
  font-size: 16px;
}
.content-title .title a {
  font-size: 16px;
}
/**
 *  section-title
 */
.mainContent h2.title {
  display: block;
  font-size: calc(16px + 1vw);
  font-weight: 600;
  color: #155e3a ;
  color: var(--tColor4, #155e3a);
  line-height: 2;
  margin-top: 6.4rem;
  border-bottom: 1px solid #eee;
}
/**
 *  ui-box-item
 */
.ui-box-item {
  margin-bottom: 3.2rem;
}
.ui-box-item .box-image {
  margin-bottom: 10px;
}
.ui-box-item .box-title .title {
  margin-top: 0;
  margin-bottom: 5px;
  display: inline-block;
  color: #555;
  font-size: 12px;
}
.ui-box-item .box-title .title a {
  display: inline-block;
  color: #555;
}
.ui-box-item .box-title .title a:hover {
  color: #222;
}
.ui-box-item .review {
  color: #333;
}
.ui-box-item .review .count {
  color: #555;
}
.mainContent .section-body {
  padding: 0 1.4rem;
  margin: 1.4rem 0;
}
/**
 *  news
 */
.block-news .section-body {
  font-size: 1.4rem;
  max-height: 300px;
  overflow-y: scroll;
  padding: 1.6rem;
  border: 1px solid #ccc;
}
.mainContent .section-body {
  padding: 0 1.4rem;
  margin: 1.4rem 0;
}
.block-banner {
  margin-bottom: 1.6rem;
}
.addFavBtn {
  text-align: right;
  padding-right: 8px;
  padding-bottom: 8px;
}
.addFavBtn button {
  background: none;
  border: none;
}
.addFavBtn button > svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: #ddd;
}
.addFavBtn button.fav-items > svg {
  fill: rgb(250, 128, 114);
}
.ui-box-item {
  padding: 8px;
  box-shadow: 0px 1px 4px #eee;
  position: relative;
}
.ui-box-item .box-title .title a {
  display: inline-block;
  color: #555;
  font-weight: 600;
  font-size: 1.4rem;
}
.box-body .description {
  font-size: 1.2rem;
}
/*________

  ITEM LABEL

 _________*/
.mark {
  font-size: 1.3rem;
  background: rgb(232, 242, 237);
  background: var(--tColor3,rgb(232, 242, 237));
  width: 6rem;
  padding: 4px;
  text-align: center;
  position: absolute;
  top: -2px;
  left: -1px;
}
.mark.sldmark {
  color: #fff;
  background: #222;
}
.mark.salemark {
  background: rgb(255,0,0);
  color: #ff0;
  font-weight: 600;
}
.mark.osumark {
  background: #1F8754;
  background: var(--tColor1, #1F8754);
  color: #fff;
}
.mark.sagemark {
  color: #fff;
  background: rgb(121, 182, 152);
  background: var(--tColor2, rgb(121, 182, 152));
}
.mark.newmark {
  background: #155e3a;
  background: var(--tColor4, #155e3a);
  color: #fff;
  font-weight: 600;
}
/**
 *  ui-box-list
 */
.ui-box-list {
  margin-bottom: 15px;
}
.ui-box-list .box-image {
  margin-bottom: 10px;
}
.ui-box-list .box-title .title {
  margin-top: 0;
  margin-bottom: 5px;
  display: inline-block;
  color: #555;
  font-size: 12px;
}
.ui-box-list .box-title .title a {
  display: inline-block;
  color: #555;
}
.ui-box-list .box-title .title a:hover {
  color: #222;
}

.ui-side .ui-box-list > div.row {
  margin-left: -5px;
  margin-right: -5px;
}
.ui-side .ui-box-list > div.row > * {
  padding-left: 5px;
  padding-right: 5px;
}
/*_______

 *  side-title
________ */
.side-title {
  margin-bottom: 1.6rem;
  padding: 8px 0;
  border-bottom: 1px solid #ccc;
}
.side-title .title {
  font-size: 1.6rem;
  font-weight: bold;
}
.side-title .title a {
  font-size: 1.4rem;
  font-weight: bold;
}
/*__________

サイド　商品検索

____________*/
.searchForm select,
.searchForm input {
  border:1px solid #aaa;
}
.searchForm__input {
  width: calc(100% - 4.8rem);
  height: 3.2rem;
  margin-top: 1.4rem;
}
.searchForm input:focus-within {
  background: rgb(232, 242, 237);
  background: var(--tColor3, rgb(232, 242, 237));
  border-bottom: 2px solid var(--tColor1, #1F8754);
}
.searchForm__btn {
  width: 3.2rem;
  height: 3.0rem;
  color: inherit;
  margin-top:1.0rem;
  padding-left: 1.6rem;
  background: none;
  border: none;
}
.searchForm button svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}
/**
 *  サイド　ナビゲーション
 */
.ui-list-menu {
  padding-left: 8px;
  margin: 0;
  list-style: none;
}
.sideNav__item{
  position: relative;
  justify-content: space-between;
}
.sideNav__item:hover, 
.sideNav__item:focus {
  color: #fff;
  background: #1F8754;
  background: var(--tColor1, #1F8754);
}
.sideNav__item > a {
  font-size: 1.4rem;
}
.sideNav__item > a.mainCate__link {
	width: calc(100% - 3.2rem);
	font-size: 1.4rem;
}
.sideNav__item > a:hover,
.sideNav__item > a:focus{
  font-weight: 600;
  color: #fff;
  background: #1F8754;
  background: var(--tColor1, #1F8754);
}
.sideNav__item button.openSub {
  width: 3.0rem;
  color: inherit;
  background: no-repeat;
  border: none;
  padding: 0;
}
.sideNav__item svg{
  width: 1em;
  height: 1em;
  fill: currentColor;
  transform: rotate(-90deg);
}
.sideNav .subCate {
  display: none;
  position: absolute;
  top: 4px;
  left: 100%;
  width: 20.0rem;
  margin-left: 0;
  background: rgb(232, 242, 237);
  background: var(--tColor3, rgb(232, 242, 237));
}
.sideNav__item:hover > .subCate, 
.sideNav__item:focus > .subCate {
  display: block;
}
#drwer h4 {
  margin-top: 2.4rem;
  font-weight: 600;
}
/**
 *  block-banner
 */
.block-banner {
  margin-bottom: 1.6rem;
}
/*____________

  block-shopping-guide
 ________________*/
.block-shopping-guide {
  margin: 4.0rem 0;
  padding: 0 1.6rem;
}
.block-shopping-guide h3 {
  font-weight: 600;
  padding-left: 1em;
}
.block-shopping-guide .section-body {
  padding: 1.6rem;
  border: 1px solid #ccc;
}
.block-shopping-guide h4 {
  font-size: 1.6rem;
  background: rgb(232, 242, 237);
  background: var(--tColor3, rgb(232, 242, 237));
  padding: 4px 8px;
  margin: 8px 0;
}
.block-shopping-guide .guide-body {
  padding: 0 8px;
}
.block-shopping-guide h5 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
  margin: 0;
}
.block-shopping-guide__desc{
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
  padding-left: 4px;
}
.block-shopping-guide__more {
  display: block;
  font-size: 1.4rem;
  position: relative;
}
.block-shopping-guide__more::before {
  content: ">>";
  margin-left: 2.4rem;
}

.block-shopping-guide .guide-body img {
  max-width: 100%;
  max-height: 100%;
}
/*___________

  SINGLE  PRODUCT
 _____________*/
#page-detail .product-title .title {
  margin-top: 0;
  margin-bottom: 20px;
  color: #222;
  font-size: 22px;
  font-weight: bold;
}
#page-detail .photo-column {
  margin-bottom: 40px;
}
#page-detail .photo-column .main-img {
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
}
#page-detail .photo-column .thumb-src {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
#page-detail .photo-column .thumb-src:hover {
  cursor: pointer;
}
#page-detail dl dt {
  width: 100%;
  text-align: left;
}
#page-detail .price-area,
#page-detail .option-area,
#page-detail .cart-area,
#page-detail .guide-area,
#page-detail .sns-area {
  margin-bottom: 15px;
}
#page-detail .price-area .price {
  font-size: 18px;
  font-weight: bold;
}
#page-detail .price-area .sale-price span.sale{
  color: #f00;
  font-size: 18px;
  font-weight: bold;
}
#page-detail .guide-area {
  text-align: center;
  line-height: 2;
}
/*___________

  商品オプション

 ____________*/
#page-detail .option-table {
  padding: 15px 0;
}
#page-detail .option-table table {
  border: 1px solid #ccc;
}
#page-detail .option-table table th {
  text-align: center;
  border: 1px solid #ccc;
  background-color: #f4f4f4;
}
#page-detail .option-table table td {
  padding: 10px;
  border: 1px solid #ccc;
}
#page-detail .option-table table td.none {
  background-color: #f4f4f4;
}
/* __________

 CART-IN  FORM
______________*/
#page-detail .cartin {
  margin-top: 3.2rem;
}
#page-detail .cart-area {
  margin: 2.4rem 0;
  padding: 1.6rem;
  border: 1px solid #ddd;
  background-color: #fafafa;
}
#page-detail .cart-area ul {
  justify-content: space-around;
  align-items: center;
  margin: 0;
}
#page-detail .cart-area input[type="text"] {
  width: 5.4rem;
  height: 3.2rem;
  text-align: center;
}
#page-detail .cart-area .btn-default {
  width: 4.0rem;
  height: 3.2rem;
  color: #333 !important;
  background-color: #eee;
}
/* _________

 商品の詳細説明
 ___________*/
#product-description {
  margin-top: 4.0rem;
  padding:0 1.4rem;
}
#product-description .section-title h3.title, 
#together-area .section-title h3.title {
  font-size: 1.6rem;
  font-weight: 600;
  display: block;
  border-bottom: 1px solid;
  padding-top: 1.6rem;
}
#page-detail #product-description .section-title {
  margin-bottom: 25px;
}
#page-detail .description-body {
  color: #222;
}
#page-detail .description-body h1 {
  margin-top: 20px;
  margin-bottom: 40px;
  font-size: 30px;
}
#page-detail .description-body h2 {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 26px;
}
#page-detail .description-body h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
}
#page-detail .description-body img {
  margin-top: 10px;
  margin-bottom: 20px;
}
#page-detail .description-body p, #page-detail .description-body ul, #page-detail .description-body ol {
  font-size: 14px;
}
#page-detail .description-body table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
#page-detail .description-body table thead > tr > th,
#page-detail .description-body table tbody > tr > th,
#page-detail .description-body table tfoot > tr > th,
#page-detail .description-body table thead > tr > td,
#page-detail .description-body table tbody > tr > td,
#page-detail .description-body table tfoot > tr > td {
  padding: 8px;
  line-height: 1.4;
  vertical-align: top;
  border-top: 1px solid #ccc;
}
@media (max-width: 980px) {
  #page-detail .description-body table thead > tr > th,
  #page-detail .description-body table tbody > tr > th,
  #page-detail .description-body table tfoot > tr > th,
  #page-detail .description-body table thead > tr > td,
  #page-detail .description-body table tbody > tr > td,
  #page-detail .description-body table tfoot > tr > td {
    padding: 4px;
  }
}
#page-detail .description-body table th {
  background-color: #f4f4f4;
}
.breadcrumb > li svg {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
}
#grouptag p {
  margin-bottom: 8px;
}
#grouptag a {
  font-size: 1.2rem;
  padding: 4px;
  margin-right: 8px;
  background: #eee;
  border-bottom-right-radius: 8px;
}
#grouptag svg {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
  margin-right: 2px;
  fill: #555;
}
#page-detail .photo-column {
  margin-bottom: 4.0rem;
  padding: 2.4rem;
  position: relative;
}
#page-detail .photo-column .main-img {
  width: 100%;
  max-width: 95%;
  margin: auto;
}
.photo-thumb {
  width: 86%;
  margin: 1.6rem auto 0;
}
#page-detail .product-title h1.title {
  font-size: calc(1.4rem + 1vw);
  font-weight: 600;
  color:#155e3a; 
  color: var(--tColor4, #155e3a);
  margin: 0 0 2.4rem;
}

#page-detail .price-area dt {
  width: 30%;
  font-size: 1.4rem;
  margin-bottom: 4px;
  padding: 4px;
  background:rgb(232, 242, 237);
  background: var(--tColor3, rgb(232, 242, 237));
  text-align: center;
}
#page-detail .price-area dd {
  width: 70%;
  margin-bottom: 4px;
  padding: 4px;
  padding-left: 3%;
}
.explain-area {
  padding: 1.6rem;
  font-size: 1.6rem;
  margin: 1.6rem auto;
}
#page-detail .option-area dt {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 600;
}
#page-detail .option-area dd select {
  font-size: 1.4rem;
  height: 4rem;
}
#page-detail .option-link {
  margin: 1.6rem auto;
  text-align: right;
  position: relative;
}
#page-detail .option-link a {
  font-size: 1.4rem;
  position: relative;
}
#page-detail .option-link a::before {
  content: ">>";
}
#page-detail .guide-area {
  text-align: center;
}
.guide-area li a {
  font-size: 1.2rem;
  line-height: 2;
}
#sns_share {
  justify-content: center;
}
#sns_share svg {
  width: 4rem;
  height: 4rem;
  fill: #ddd;
}
#sns_share button {
  background: none;
  border: none;
}
#sns_share button svg {
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 4px;
}
#sns_share button.fav-items svg {
  fill: rgb(250, 128, 114);
}
#sns_share svg.line {
  fill: #00B900;
}
#sns_share svg.fb {
  fill: #385898;
}
#sns_share svg.tw {
  fill: #1DA1F2;
}
/* ------------

  product list
-------------- */
/**
 *  page-list
 */
.list-pager {
  text-align: right;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.list-pager ul {
  margin-bottom: 0;
}
.list-pager.bottom {
  margin-bottom: 30px;
  border-top: 1px solid #ccc;
  border-bottom-color: transparent;
}
/**
 *  privacy
 */
#privacy h3 {
  margin-top: 40px;
  margin-bottom: 10px;
}
#delivery .ui-table th,#delivery .ui-table td,
#payment .ui-table th,#payment .ui-table td{
    display: block;
    width :100%;
}
#delivery .bold,
#payment .bold{
  margin: 8px;
}
/**
 *  eyecatch
 */
.eyecatch {
  display: block;
  max-width: 100%;
  height: auto;
}
/**
 *  tbl_calendar
 */
.tbl_calendar {
  display: block;
  width: 90%;
  margin: 2.4rem auto;
}
.tbl_calendar caption {
  padding: 4px 0;
  font-size: 14px;
}
.tbl_calendar tbody th {
  color: #222;
  text-align: center;
  padding: 4px 12px;
  background-color: #eee;
}
.tbl_calendar tbody td {
  text-align: center;
  padding: 4px 8px;
  border: 1px solid #eee;
}
@media (max-width: 1199px) {
  .tbl_calendar tbody th, .tbl_calendar tbody td {
    padding: 2px 6px;
  }
}
@media (max-width: 980px) {
  .tbl_calendar tbody th, .tbl_calendar tbody td {
    padding: 1px 2px;
  }
}
@media (max-width: 768px) {
  .tbl_calendar tbody th, .tbl_calendar tbody td {
    padding: 4px 12px;
  }
}
/**
 *  theme edit
 */
.ui-list-menu li a, .ui-list-menu li span {
  display: block;
  padding: 10px 0;
  border-bottom: 1px dotted #ccc;
}
.ui-list-menu li a i, .ui-list-menu li span i {
  margin-top: 2px;
}
.ui-list-menu li a img, .ui-list-menu li span img {
  max-width: 32px;
  margin-right: 10px;
}
.ui-list-menu li ul {
  padding: 0;
  margin: 0;
}
.ui-list-menu li.level2 a {
  padding-left: 15px;
}
.block-history {
  margin-top: 15px;
}
.block-news .section-body {
  max-height: 250px;
  overflow-y: auto;
  padding: 15px;
  border: 1px solid #ccc;
}
.block-news .section-body .newslist {
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px dotted #ccc;
}
.block-news .section-body .newslist dd {
  margin-left: 0;
}
.ui-footer .footer-list {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 0;
  border-top: 1px solid #ccc;
  background-color: #fff;
}
.ui-footer .footer-list a {
  font-size: 10px;
}
.ui-footer .copy {
  text-align: center;
  padding: 10px 0;
  border: none;
  font-size: 10px;
}
.bnr-list li {
 margin: 0 0 15px; 
  border: 1px solid #ccc;
}
.bnr-list li img {
  width: 100%;
  height: auto;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}
/*_______

 MEDIA QUERY
 _________*/
@media (min-width: 769px) {
  .visible-phone {
    display: none !important;
  }
  .hidden-phone {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .visible-phone {
    display: block !important;
  }
  .hidden-phone {
    display: none !important;
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background: #fff;
    z-index: 5;
  }
  .container {
    width: 100% !important;
    padding: 2.4rem !important;
  }
  .ui-header {
    flex-direction: column;
    text-align: center;
  }
  .mainContainer,
  .ui-main-bottom,
  footer {
    position: relative;
    top: 18.0rem;
  }
.sideContent {
  display:none;
  position: fixed;
  top: 32px;
  left: 0;
  z-index: 4;
  height: calc(100vh - 32px);
  overflow-y: scroll;
}
#drwerOpenLabel {
  position: fixed;
  width: 3.2rem;
  height: 3.6rem;
  background:#fff;
  top: 4.8rem;
  left: 0.8rem;
  z-index: 5;
}
#drwerOpenLabel > span {
  width: 3.0rem;
  height: 0;
  border: 2px solid #222;
  position: absolute;
  top: 33%;
  left: 4px;
  border-radius: 4px;
}
#drwerOpenLabel > span:nth-of-type(2) {
  top: 60%;
}
#drwerOpenLabel > span:nth-of-type(3) {
  top: 90%;
}
#drwerOpen:checked + label > span:nth-of-type(1) {
  transform-origin: top left;
  transform: rotate(45deg);
  border-color: tomato;
} 
#drwerOpen:checked + label > span:nth-of-type(2) {
  display: none;
}
#drwerOpen:checked + label > span:nth-of-type(3) {
  transform-origin: bottom left;
  transform: rotate(-45deg);
  border-color: tomato;
}
#drwer {
  width: 96%;
  max-width: 35.0rem;
  color: #fff;
  padding: 8px;
  background: #1F8754;
  background: var(--tColor1, #1F8754);
  position: relative;
  overflow-y: visible;
  top: 6.4rem;
}
  #drwerOpen:checked ~ .sideContent {
    display: block;
  }
  #drwer a:not(.subCate__link),
  .sideNav__item > a {
    color: #fff;
  }
  .sideNav .subCate {
    width: 96%;
    top: 100%;
    left: 4%;
    z-index: 3;
  }
  .sideNav .sideNav__item .subCate[aria-hidden="false"]{
    display: block;
  }
   .sideNav .sideNav__item .subCate[aria-hidden="true"]{
    display: none;
  }
  .sideNav__item button[aria-pressed="false"] > svg{
    transform: rotate(0deg);
  }
  .sideNav__item button[aria-pressed="true"] > svg{
    transform: rotate(180deg);
  }
  .block-shopping-guide .section-body {
    padding: 0.8rem;
  }
  .list-pager ul .sort {
    width: 100%;
    margin-bottom: 10px;
  }
  .list-pager ul .sort select {
    width: 100%;
  }
}
@media (max-width: 480px){
  .mainContainer,
  .ui-main-bottom,
  footer {
    position: relative;
    top: 12.0rem;
  }
  .container {
    padding: 1.4rem !important;
  }
  .block-banner .col-lg-4 {
	margin-bottom: 1.6rem;
}
}
/* ===== Main Nav refresh ===== */
#mainNav{
  background:#1f7f6f; /* 少しだけくすんだ青緑 */
  box-shadow:0 2px 10px rgba(0,0,0,.06) inset;
}
#mainNav .nav-body{
  max-width:1200px;
  margin:0 auto;
  padding:10px 8px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
#mainNav .mainNav__item > a{
  display:block;
  padding:10px 16px;
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  border-radius:9999px;         /* 丸ボタン */
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
#mainNav .mainNav__item > a:hover{
  background:#2ea39a;           /* ほんの少し明るい青緑 */
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* サブカテゴリドロップ（PCだけ表示でOK） */
#mainNav .mainNav__subCate{
  position:absolute;
  margin-top:8px;
  padding:8px;
  background:#fff;
  border-radius:12px;
  border:1px solid #e8ecef;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:none;
  min-width:220px;
  z-index:20;
}
#mainNav .mainNav__subCate__item a{
  display:block;
  padding:8px 10px;
  color:#184b45;
  border-radius:8px;
}
#mainNav .mainNav__subCate__item a:hover{
  background:#f1f6f5;
}
#mainNav .mainNav__item:hover > .mainNav__subCate{ display:block; }
/* ===== Left nav tune ===== */
.sideNav .mainCate > .sideNav__item { padding:6px 0; }
.sideNav .mainCate > .sideNav__item .mainCate__link{
  display:block; padding:8px 10px; border-radius:8px; font-weight:600; color:#184b45;
}
.sideNav .mainCate > .sideNav__item .mainCate__link:hover{ background:#f4f8f7; }

.sideNav .subCate{ margin:6px 0 10px 10px; padding-left:8px; border-left:2px solid #e3eeec; }
.sideNav .subCate .subCate__link{
  display:block; padding:6px 8px; border-radius:6px; color:#2d524d; font-size:.95rem;
}
.sideNav .subCate .subCate__link:hover{ background:#f6fbfa; }
/* ===== SNS row ===== */
.sns-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  list-style:none; padding:0; margin:6px 0 0;
}
.sns{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  background:#fff; border:1px solid #e8ecef;
  text-decoration:none; color:#1d3f3a; font-weight:600;
}
.sns:hover{ background:#f7fbfa; border-color:#dfe9e7; }

/* 色味だけブランド寄せ（アイコンはテキストでOK：後でSVG差替可） */
.sns.ig   { border-color:#eec7ef; }
.sns.x    { border-color:#d9d9d9; }
.sns.fb   { border-color:#cfe0ff; }
.sns.yt   { border-color:#ffd9d9; }
.sns.rn   { border-color:#cde7df; }
.sns.note { border-color:#cfeee6; }
<style id="dc-header-inline">
  .container{max-width:1180px;margin:0 auto;padding:0 16px;}
  .flex{display:flex;} .between{justify-content:space-between;} .middle{align-items:center;}

  /* Topbar */
  .dc-topbar{background:#f6f9f8;border-bottom:1px solid #e6eeec;font-size:13px;color:#334155;}
  .dc-topbar .dc-topbar__catch{margin:8px 0;color:#475569;}
  .dc-topbar__menu{gap:18px;list-style:none;margin:8px 0;padding:0;}
  .dc-topbar__menu a{color:#276e69;text-decoration:none;} .dc-topbar__menu a:hover{color:#1e5551;text-decoration:underline;}

  /* Header main */
  .dc-header__row{padding:16px 0;}
  .dc-header__right{display:flex;flex-direction:column;gap:6px;text-align:right;}
  .dc-operator{font-size:13px;color:#475569;}
  .dc-operator__label{color:#64748b;}
  .dc-operator a{color:#276e69;font-weight:600;text-decoration:none;} .dc-operator a:hover{text-decoration:underline;}
  .dc-operator__note{color:#64748b;margin-left:.25em;}

  /* Global nav */
  .dc-globalnav{background:#1f8a83;}
  .dc-globalnav__list{display:flex;gap:10px;list-style:none;margin:0;padding:10px 16px;overflow:auto;}
  .dc-globalnav__list a{display:block;padding:8px 14px;border-radius:22px;background:#20766f;color:#fff;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;}
  .dc-globalnav__list a:hover{background:#1a645e;}

  /* Trust band */
  .dc-trust{background:#eef7f6;border-top:1px solid #e0efec;border-bottom:1px solid #e0efec;}
  .dc-trust .container{gap:10px;padding:10px 16px;}
  .dc-trust__dot{width:8px;height:8px;background:#2e8b86;border-radius:50%;}
  .dc-trust__copy{margin:0;font-size:13px;color:#36534f;}

  @media (max-width:768px){
    .dc-header__right{text-align:left;}
    .dc-globalnav__list{gap:8px;}
/* === GlobalNav：センター寄せ & 6色ボタン === */
.dc-globalnav{ background:transparent !important; }

/* ul のセンター寄せ（container付き/なし両対応） */
.dc-globalnav__list.container,
.dc-globalnav .dc-globalnav__list{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px;
  flex-wrap:wrap;
  margin:0 auto !important;
  padding:12px 0 !important;
}

/* 丸ボタンの共通見た目 */
.dc-globalnav__list a{
  display:block;
  padding:10px 16px;
  border-radius:9999px;
  font-weight:700;
  color:#fff !important;
  text-decoration:none;
  transition:filter .15s ease, transform .15s ease;
}
.dc-globalnav__list a:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

/* 6色割り当て（順番どおり） */
.dc-globalnav__list li:nth-child(1) a{ background:#f39c12 !important; } /* おうちでじっくり */
.dc-globalnav__list li:nth-child(2) a{ background:#3498db !important; } /* 脳トレグッズ */
.dc-globalnav__list li:nth-child(3) a{ background:#27ae60 !important; } /* 音楽・カラオケ */
.dc-globalnav__list li:nth-child(4) a{ background:#9b59b6 !important; } /* おうちで運動 */
.dc-globalnav__list li:nth-child(5) a{ background:#e74c3c !important; } /* リラックスタイム */
.dc-globalnav__list li:nth-child(6) a{ background:#e85a9b !important; } /* ギフト・プレゼント */

/* === 信頼コピー帯（テキスト＆ボタン）センター === */
.dc-trust .container,
.dc-trust__wrap{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center !important;
  align-items:center !important;
  gap:12px;
  text-align:center;
}
.dc-trust__copy{ line-height:1.7; }

/* ボタンをロゴのピンク寄りに */
.dc-trust__cta{
  background:#ff6aa2 !important;
  border:1px solid #ff6aa2 !important;
  color:#fff !important;
  padding:8px 16px;
  border-radius:9999px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(255,106,162,.25);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.dc-trust__cta:hover{
  background:#e6538f !important;
  border-color:#e6538f !important;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(230,83,143,.28);
}

/* 旧・緑の丸ボタン列が残っている場合もセンター（任意） */
.ui-content-top .nav-body{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px;
  flex-wrap:wrap;
}
/* ===== サイド：小カテゴリを常時表示・縦積み ===== */
#drwer .sideNav .subCate{
  display:block !important;
  position:static !important;   /* 横フロート解除 */
  width:auto !important;
  margin:6px 0 10px 12px;
  padding-left:8px;
  border-left:2px solid #e6eeec;
  background:transparent !important;
  z-index:auto !important;
}

/* 見た目の微調整 */
#drwer .sideNav .subCate .subCate__link{
  display:block; padding:4px 8px; border-radius:6px;
  font-size:13px; color:#2d524d; text-decoration:none;
}
#drwer .sideNav .subCate .subCate__link:hover{ background:#f4f8f7; }

/* 旧指定の打ち消し（ホバーでのみ表示させるCSSがある場合） */
#drwer .sideNav .sideNav__item:hover > .subCate{ display:block !important; }
#drwer .sideNav .sideNav__item .subCate[aria-hidden="true"]{ display:block !important; }
    /* =========================
   左メニュー 最終仕上げ
   PC: 親にホバーで子表示 / SP: 子を常時展開
   トーン：PALLETEのミント系で統一
   ========================= */

/* 子カテゴリの箱（見やすさUP） */
#drwer .sideNav .subCate{
  display:none;                 /* ←PCでは通常は非表示 */
  position:absolute;
  top:0; left:100%;
  min-width:200px;              /* 横幅ゆったり */
  max-width:280px;
  background:#f9fdfc;           /* 薄いミント */
  border:1px solid #e0ece9;
  border-radius:8px;
  padding:6px 10px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-size:14px;               /* 文字少し大きく */
  line-height:1.6;
  z-index:50;
}

/* 子リンク */
#drwer .sideNav .subCate__link{
  display:block;
  padding:8px 10px;
  color:#184b45;                /* 読みやすい濃グリーン */
  text-decoration:none;
  border-radius:6px;
  white-space:nowrap;           /* 1行で見やすく */
}
#drwer .sideNav .subCate__link:hover{
  background:#e0f5f2;           /* hoverでうっすら強調 */
  color:#0f3834;
}

/* 親カテゴリ（行間・クリック領域UP） */
#drwer .sideNav .mainCate__link{
  display:block;
  padding:10px 12px;            /* 触りやすく */
  border-radius:8px;
  color:#184b45;
  font-weight:700;
}
#drwer .sideNav .mainCate__link:hover{
  background:#f4f8f7;
}

/* PCで親にホバーしたら子を表示 */
@media (min-width: 769px){
  #drwer .sideNav .sideNav__item{ position:relative; }
  #drwer .sideNav .sideNav__item:hover > .subCate{ display:block; }
}

/* スマホでは子を常時展開＆段組に */
@media (max-width: 768px){
  #drwer .sideNav .subCate{
    position:static;
    display:block;              /* ←常時展開 */
    box-shadow:none;
    border-radius:6px;
    margin:6px 0 10px 10px;
    padding:6px 8px;
  }
  #drwer .sideNav .subCate__link{
    padding:6px 8px;
    white-space:normal;         /* 2行OK */
  }
}

/* 小さめ画面でのはみ出し防止（PC） */
@media (min-width: 769px) and (max-width: 1100px){
  #drwer .sideNav .subCate{ left: calc(100% - 10px); }
}
/* ===== フッターSNSリンク ===== */
.footer-sns{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 20px;
  margin:12px 0 6px;
  padding:0;
  list-style:none;
}
.footer-sns li a{
  display:inline-block;
  padding:6px 10px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  transition:background .2s ease, transform .15s ease;
}

/* 各サービスごとの色分け */
.footer-sns a.ig{ background:#d6249f; }
.footer-sns a.x{ background:#000; }
.footer-sns a.yt{ background:#ff0000; }
.footer-sns a.fb{ background:#1877f2; }
.footer-sns a.rn{ background:#2e8b86; }
.footer-sns a.note{ background:#41c9b4; }

.footer-sns a:hover{
  opacity:.85;
  transform:translateY(-2px);
}
/* ===== フッターSNS（横並び・中央寄せ） ===== */
.ui-footer .footer-social{
  clear: both;                 /* 既存のfloatの影響を断つ */
  margin: 14px 0 6px;
  text-align: center;
}
.ui-footer .footer-sns{
  display: flex !important;    /* 既存のUL指定を上書き */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-footer .footer-sns li{ margin: 0; padding: 0; }
.ui-footer .footer-sns a{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}

/* サービスごとの色 */
.ui-footer .footer-sns a.ig{   background:#d6249f; }
.ui-footer .footer-sns a.x{    background:#000; }
.ui-footer .footer-sns a.yt{   background:#ff0000; }
.ui-footer .footer-sns a.fb{   background:#1877f2; }
.ui-footer .footer-sns a.rn{   background:#2e8b86; }  /* ブランドの緑 */
.ui-footer .footer-sns a.note{ background:#41c9b4; }

.ui-footer .footer-sns a:hover{
  opacity:.88;
  transform: translateY(-2px);
}

/* モバイルは少し文字を小さく & 余白調整 */
@media (max-width: 480px){
  .ui-footer .footer-sns{ gap: 10px 12px; }
  .ui-footer .footer-sns a{ font-size: 13px; padding: 6px 8px; }
}
/* ===== Footer lists tidy ===== */
.ui-footer .footer-list.inline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 8px 16px;        /* 横と縦のスキマ */
  margin: 6px 0;        /* 上下の余白を薄く */
  padding: 0;
  list-style: none;
}
.ui-footer .footer-list.inline li{ margin:0; padding:0; }
.ui-footer .footer-list.inline a{ font-size:13px; text-decoration:none; }
.recnet-feed ul{list-style:none;margin:0;padding:0}
.recnet-feed li{margin:6px 0;padding:0}
.recnet-feed a{color:#2e8b86;text-decoration:none}
.recnet-feed a:hover{text-decoration:underline}
.recnet-feed .date{display:inline-block;margin-left:.5em;color:#888;font-size:12px}
/* === サイドメニュー：小カテゴリを常時展開 === */
.sideNav .subCate{
  display:block !important;          /* ← 常に表示 */
  position: static !important;       /* ← 絶対配置をやめる */
  top:auto; left:auto;               /* 念のためリセット */
  width:auto;
  margin:6px 0 10px 14px;
  padding:0;
  border-left:2px solid #e3eeec;
  list-style:none;
}
.sideNav .level2{ margin:2px 0; }

.sideNav .subCate__link{
  display:block;
  padding:4px 8px;
  font-size:14px;
  color:#2d524d;
  text-decoration:none;
  border-radius:6px;
}
.sideNav .subCate__link:hover{
  background:#f6fbfa;
  color:#1f7f6f;
}

/* 大カテゴリ見出しを少しだけ強調 */
.sideNav .mainCate__link{
  display:block;
  padding:8px 10px;
  font-weight:700;
  color:#184b45;
  border-radius:8px;
}
.sideNav .mainCate__link:hover{
  background:#f4f8f7;
}

/* 以前の「ホバーで表示」ルールを無効化 */
.sideNav__item:hover > .subCate,
.sideNav__item:focus  > .subCate{
  display:block !important;
}
/* ===== サイドカテゴリ（常時展開）の可読性アップ ===== */
/* 大カテゴリ（見出し行） */
.sideNav .mainCate > .sideNav__item > .mainCate__link{
  font-size:16px !important;
  font-weight:700;
  padding:10px 12px;
}

/* サブカテゴリ枠の背景＆レイアウト */
.sideNav .subCate{
  display:block !important;              /* 念のため常時表示 */
  margin:6px 0 14px 12px;
  padding-left:0;
  background:#f8fdfb !important;         /* 薄い背景に */
  border-left:2px solid #e3eeec !important;
}

/* サブカテゴリ行（文字・余白） */
.sideNav .subCate li a,
.sideNav .subCate .subCate__link{
  display:block !important;
  font-size:15px !important;             /* ← ここで大きく */
  line-height:1.7 !important;
  padding:6px 10px !important;
  color:#333 !important;
  background:transparent !important;     /* 濃い緑のベタを打ち消す */
  border-radius:4px;
  text-decoration:none !important;
}

/* ホバー時の反応 */
.sideNav .subCate li a:hover,
.sideNav .subCate .subCate__link:hover{
  background:#eaf5f2 !important;
  color:#2e8b86 !important;
}

/* スマホは少しコンパクトに */
@media (max-width: 768px){
  .sideNav .subCate li a,
  .sideNav .subCate .subCate__link{
    font-size:14px !important;
    padding:6px 8px !important;
  }
}
/* === 左メニューの文字サイズを大きく・読みやすく === */

/* 見出し（例：手先を使うレク 等） */
#drwer .side-title h4{
  font-size:1.7rem !important;   /* 17px */
  font-weight:700;
}

/* 大カテゴリ行 */
#drwer .sideNav .mainCate__link{
  font-size:1.6rem !important;   /* 16px */
  line-height:1.6 !important;
  padding:10px 12px !important;
}

/* サブカテゴリの入れ物（PC常時展開用の調整） */
#drwer .sideNav .subCate{
  display:block !important;
  position:static !important;
  width:auto !important;
  margin:8px 0 12px 12px !important;
  padding-left:8px !important;
  border-left:2px solid #e3eeec !important;
  background:transparent !important;
}

/* サブカテゴリ各リンク */
#drwer .sideNav .subCate li{ margin:3px 0; }

#drwer .sideNav .subCate a.subCate__link{
  display:block;
  font-size:1.5rem !important;   /* 15px（もう少し大きくしたければ 1.6rem に） */
  line-height:1.7 !important;
  color:#333 !important;
  background:#f6fbf9;
  padding:6px 10px;
  border-radius:6px;
  text-decoration:none;
}

#drwer .sideNav .subCate a.subCate__link:hover{
  background:#e3eeec;
  color:#2e8b86 !important;
}

/* スマホは折りたたみ（PC常時展開を崩さない） */
@media (max-width:768px){
  #drwer .sideNav .subCate{ display:none; }  /* 後でJSでトグル */
}
/* ▼ グループ共通カラー（ヘッダー pill と トップのタイルを共有） */
.pill--jikkuri, .dc-tile.is-jikkuri { background:#2E7D74; }
.pill--noutore, .dc-tile.is-noutore { background:#1976D2; }
.pill--ongaku,  .dc-tile.is-ongaku  { background:#F08A00; }
.pill--undou,   .dc-tile.is-undou   { background:#E64A19; }
.pill--relax,   .dc-tile.is-relax   { background:#81D4FA; color:#0b3552; }
.pill--gift,    .dc-tile.is-gift    { background:#EC407A; }

/* ▼ ヘッダーメニュー pill */
.dc-header-groups{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
}
.dc-header-groups li{ flex:0 0 auto; }
.pill{
  display:inline-block; padding:10px 16px; border-radius:9999px;
  color:#fff; font-weight:700; text-decoration:none; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease;
}
.pill:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.12); }

/* ▼ スマホ：横スクロール */
@media (max-width: 768px){
  .dc-header-groups{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dc-header-groups::-webkit-scrollbar{ display:none; }
}
/* === SPだけ：カテゴリ丸ボタンを見やすく（安全版） === */
@media (max-width: 768px){
  /* 丸ボタンの並びを中央&折返し */
  .dc-globalnav__list{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:12px !important;
    margin:12px auto !important;
    padding:0 !important;
  }
  .dc-globalnav__list a{
    display:block;
    padding:12px 16px;
    border-radius:9999px;
    font-weight:700;
    text-decoration:none;
  }

  /* 商品一覧：2カラムのカード化（安全指定） */
  .products, .product-list, .list, ul.items{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .products img, .product-list img, .list img, ul.items img{
    width:100% !important; height:auto !important; display:block;
    border-radius:8px;
  }
}
/* === HOTFIX: SPでヘッダー被りを解除 === */
@media (max-width: 768px){
  header{ position: static !important; top:auto !important; z-index:auto !important; }
  .mainContainer, .ui-main-bottom, footer{
    position: static !important; top:auto !important;
  }
  /* 念のため：ハンバーガー/サイドの被り抑制 */
  #drwerOpenLabel{ position: fixed; z-index: 3 !important; }
  .sideContent{ display:none !important; }
  .dc-globalnav__list a{ pointer-events:auto !important; }
}
/* === スマホで小さい丸ボタン非表示 === */
@media (max-width: 768px){
  .dc-globalnav { 
    display: none !important;
  }
}
/* === SPだけ：ヘッダー周りをコンパクトに === */
@media (max-width: 768px){
  /* 全体の上余白をぎゅっと */
  .ui-header{ padding: 6px 0 0 !important; }        /* 15px→6px くらい */
  .block-head-logo{ margin: 4px 0 !important; }
  .block-head-logo .logo img{ max-height: 44px !important; width:auto; } /* ロゴ縮小 */

  /* キャッチや上帯を少し小さく（使っていれば） */
  .block-header-login .site-description{ font-size: 12px; padding: 2px 8px !important; }
  .dc-topbar{ padding: 2px 0 !important; }
  .dc-topbar .dc-topbar__catch{ margin: 2px 0 !important; font-size: 12px !important; }

  /* ハンバーガー位置を下げてかぶり感を減らす（必要なら微調整） */
  #drwerOpenLabel{ top: 3.2rem !important; }  /* 4.8rem → 3.2rem など */

  /* 直後のセクションの余白も軽く詰める */
  .ui-content-top,
  .ui-main-top .ui-section{ margin-bottom: 1.6rem !important; }  /* 4rem → 1.6rem */
  .dc-trust{ margin-top: 6px !important; } /* ピンクのCTA帯などがあれば少し上げる */
}