@charset "euc-jp";
/* CSSリセット https://github.com/filipelinhares/ress */
html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:hidden}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;border-style:none}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default}

/* ++++++++++
全般設定
++++++++++ */
:root{
  --container-width:1250px; /* コンテンツの最大幅 */
  --main-text:#333; /*　基本の文字色 */
  --linkText:#3c2820; /* （旧デザインが残っているときのため置いておく）*/
  --link-color:#23abdd; /*リンク色*/
  --hover-text:#1c1c1c; /* ホバー文字色 */
  --active-text:#dc143c; /* アクティブ文字色 */
  --btn-text:#fff; /* ボタン文字色 */
  --btn-border-color:#93897f; /* ボタン　線 */
  --btn-bg-color:#6b5b4c; /* ボタン　背景色 */
  --btn-bg-hover-color:rgb(135, 135, 135); /* ボタンホバー　背景色 */
  --label-bg-color:#82705f; /* タブやラベルなど背景色 */
  --site-bg-color:#FAFAF7; /*　サイト背景色 */
  --header-bg-color: #685a4c; /*ヘッダー背景色*/
  --footer-bg-color:#e5e5e5; /*フッター背景色*/
}
html{
  scroll-behavior: smooth;
}
body {
  font-size: 14px;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo","Lucida Grande","Verdana",sans-serif;
  color:var(--main-text);
  background-color:var(--site-bg-color);
  box-sizing: border-box;
}
@media (orientation: portrait) {
  :where(body>*){
   overflow-x:hidden;
  }
}
p{
  margin-bottom:10px
}
a{
  display: inline-block;
  color:#494949;
  text-decoration:none;
}
:where( a:not([class]), a:not([id]), :not([class]) > a ,:not([id]) > a){
  text-decoration:underline dotted 1px #aaa;
  text-underline-offset: .2em;
}
  

a:focus{
  color:var(--hover-text);
  text-decoration: underline 1px;
}
a:active{
  color:var(--active-text);
}
@media(hover:hover){
  a:hover{
    color:var(--hover-text);
    text-decoration:underline 1px #aaa;
  }
}
ul,ol{
  margin:0;
  padding:0;
  list-style:none;
}
img{
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
figcaption {
  margin-bottom: 10px;
}
@media(min-width:1025px) {
  figcaption {
    padding-left: 0px;
    padding-right: 0px;
  }
}
input,select,button{
  color:var(--main-text,#333)
}
input[type="text"],
input[type="search"]{
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
}
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"]{
  -moz-appearance: textfield;
}

input::-webkit-calendar-picker-indicator, 
input::-webkit-inner-spin-button {/* datalist の▼を消す*/
  display: none !important; 
}

select {
  border-radius: 0;
}
select, [type="file"] {
  height: auto;
  line-height: initial;
}
input[type="reset"] {
  width: 100%;
}
input[type="reset"]:hover{
  box-shadow: 2px 2px 2px var(--btn-border-color);
}
svg{
  width:30px;
  height:30px;
  fill:currentColor;
}

/* skip link for キーボードユーザー */
a.skip-to-main {
  display: block;
  width: 100%;
  font-size: 18px;
  padding: 16px 0;
  padding-left:1em;
  background: #111;
  transform: rotateX(90deg);
  transform-origin: top;
  position: absolute;
  top: 0;
  left:0
}
a.skip-to-main:focus{
  color: #fff;
  transform: rotate(0);
  z-index: 10;
}
/* スクリーンリーダー用テキスト */
.reader-txt {
  width: 0px;
  height: 0px;
  position: absolute ;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
}


/* 基準になるコンテンツサイズと余白*/

.kg-inner {
  overflow-x: hidden
}
@media(min-width: 481px){
  .kg-inner {
    width: min( 98vw,var(--container-width) );
    margin-inline: auto;
  }
}
@media(min-width:768px){
  .kg-inner{
    overflow-x : initial
  }
}
:where( #main:not(.free-page) > .kg-inner > :not(:empty) ) {
  padding-block: clamp(16px,3.0vw,40px);
}

/*
* ヘッダー上インフォメーション
*/
#information_area{
  background:#fafaf7;
}
#information_area .information-area-inner {
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 20px 10px 10px;
}
#information_area span {
  font-size: clamp(13px,1.5vw, 15px);
  font-weight: 600;
  color: #666;
  line-height: 1.5;
  margin: 0;
  /*margin: 8px 5px;*/
}

/* ヘッダー */
#main_header {
  background-color: var(--header-bg-color , #685a4c);
      position:sticky;
      top:0;
      z-index:10
}
.header-inner {
  padding-block: 0px; /* ヘッダーの高さを変えたいときに上下の余白を広げる*/
  position: relative;
}

#site_logo {
  width: clamp(300px,100% - 48px,378px);
  margin-inline:auto;
  text-align: center;
}

/* .header-menu-container {
  position: absolute;
  top: 12px;
  right: -2px;
  width: 48px;
} */
.header-menu-container {
  position: absolute;
  top: .6em;
  right: -2px;
  width: 40px;
}

.header-menu {
  width: 10px;
  height: 50px;
  position: relative;
}
.header-menu svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.header-menu[aria-controls="main-navi"] svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
.header-menu__name {
  font-size: 12px;
  padding-block: 4px;
}
.header-menu-container > :not(:last-child) {
  display: none;
}
.header-search {
  padding: 12px;
  background: #f5f5f5;
  margin-bottom: 1px;
  position: sticky;
  top: 0;
  transition: translate .2s;
  z-index: 9;
}

#main_header.slidedown ~ .header-search {
  translate: 0 70px;
}

.header-search-inner {
  min-width: 100%;
  display: grid;
  grid-template-columns: 20px auto 32px;
  padding-inline: 12px;
  border-radius: 15px;
  background: #fff;
}

.header-search-select-wrap {
  position: relative;
}

.header-search-select-wrap::after {
  position: absolute;
  top: calc(50% - 6px);
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  transform: rotate(-45deg);
  pointer-events: none;
}
.header-search__category {
  width: 1px;
}

input.header-search__input {
  font-size: 16px;
  width: 100%;
  line-height: 1.8;
  height: auto;
  border:none;
  border-radius: 14px !important;
      cursor:pointer;
}
button.header-search__submit span {
  display: none;
}
  button.header-search__submit svg {
      width: 24px;
      height: 24px;
  }

/* :focus  */
.header-search-select-wrap:has(:focus) ,
.header-search__input:is(:focus, :focus-visible) ,
.header-search__submit:focus {
  outline: 0px solid var(--link-color);
}


body:has( :is(.header-search__input , .header-search__category):focus )::after{
  content: "";
  display: block;
  background: rgb(0 0 0 /.6);
  position: fixed;
  inset: 0;
  z-index: 5;
}
.header-search:focus-within {
  position: relative;
  z-index: 10;
}
#show_result[hidden]{
  display:none
}
@media(min-width: 1170px){
  .header-inner {
    display: grid;
    grid-template-columns: min(40%,380px) 520px minmax(0,1fr);
    grid-template-areas: "logo search btns";
    align-items: center;
    max-width: var(--container-width);
    margin-inline : auto;
  }
  .header-menu-container {
    display: grid;
    grid-template-columns: repeat(3,80px);
    position: static;
    grid-area: btns;
    justify-content: end;
    width: auto;
  }
  .header-menu:not(:last-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 64px;
    justify-content: center;
    color: #f7f7f7;
  }
  .header-menu-container > :last-child {
    display: none;
  }
  .header-search {
    grid-area: search;
    border-bottom: none;
    background: none;
    margin: 0;
  }
  .header-search-inner {
    grid-template-columns: auto 134px 64px;
    grid-template-areas: "input select btn";
          gap:1px;
    padding:0;
  }
  .header-search-select-wrap {
    grid-area: select;
  }
  .header-search__input {
    grid-area: input;
  }
 input.header-search__input {
    cursor: text;
}
  .header-search__submit {
    grid-area: btn;
  }
  .header-search-select-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-left: 1px solid #666;
  }
  .header-search-select-wrap::after {
    content: "▼";
    top: 0.4em;
    left: initial;
    right: 4px;
    border: none;
    transform: none;
  }
  .header-search__category {
    width: 100%;
    font-size: 12px;
  }
      input.header-search__input{
          border-top-right-radius:0px !important;
          border-bottom-right-radius:0px !important;
          padding-left: 20px;

      }
      .header-search__submit {
          background: #e5e5e5;
          border-top-right-radius: 14px;
          border-bottom-right-radius: 14px;

      }
  button.header-search__submit span {
    display: block;
  }
  .header-search__submit svg {
    display: none;
  }
}
  @media(hover:hover){
      .header-search__submit:hover {
          transition:background-color:.2s;
          background-color: var(--btn-bg-hover-color);
          color: #fff;
      }
  }

.incart-num:empty{
  visibility:hidden
}
.incart-num{
  position:absolute;
  top:2px;
  right:4px;
  display:flex;
  justify-content:center;
  align-items:center;
  width:22px;
  height:22px;
  font-size:10px;
  line-height:1;
  color:#fff;
  font-weight:600;
  background:red;
  border-radius:50%;
  padding:2px 4px
}
@media(min-width:768px){
  .incart-num{
    top:-8px
  }
}
/* ヘッダー下のメニュー */
#toolbox{
  --toolbox-border-color: #aaa;
  --toolbox-bg-color: #efefef;
  --toolbox-columns: 7;
  background-color:var(--toolbox-bg-color);
}
.toolbox-inner {
  display: grid;
  grid-template-columns: repeat(var(--toolbox-columns), 1fr);
  border-top: 1px solid var(--toolbox-bg-color);
  border-bottom: 1px solid  var(--toolbox-bg-color);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.toolbox__link, .toolbox__btn {
  width: 100%;
  min-width: max-content;
  margin: 0;
  padding: 12px;
/*	box-shadow: inset 0 0 0 0.5px #efefef,inset 1px 0 2px 2px #fff;*/
  text-align: center;
  background: #efefef;
/*	border-radius: 2px; */
}
:is(.toolbox__link, .toolbox__btn) {
  border-top: 1px solid var(--site-bg-color);
  border-right: 1px solid #666;
}
:is(.toolbox__link, .toolbox__btn):first-child {
  border-right: 1px solid #666;
  border-left: 1px solid #666;

}
@media(min-width:1025px){
  #toolbox{
    border-bottom: none;
    position:sticky;
    top: 0;
    z-index:9;
    transition: translate .2s
  }
  #main_header.slidedown ~ #toolbox{
    translate: 0 70px;
  }
  :is(.toolbox__link, .toolbox__btn)::after {
    content: "▼";
    display: inline-block;
    margin-left: 4px;
    width: 1em;
    height: 1em;
    line-height: 1;
  }
  .toolbox__link::after{
    transform:rotate(-90deg);
    margin-top:4px;
  }
}
@media(hover: hover){
  :is(.toolbox__link, .toolbox__btn):hover {
    text-decoration: none;
    box-shadow: none;
    background-color: var(--btn-bg-hover-color);
    transition: background-color .4s;
    color: #fff;
  }
}

/* PCのみカテゴリー一覧*/
#category_navi[aria-hidden="true"] {
  display: none;
}
@media(min-width:980px){
  #category_navi {
	position: absolute;
    top:100%;
	right: 0;
	width: min(280px,80%);
    height: calc(100vh - 120px);
	background: var(--footer-bg-color);
	padding-left: 12px;
	box-shadow: 0 0 20px #f5f5f5,0 0 24px #777,0 0 0 1px #eee;
	padding-top: 12px;
    overflow-y:scroll;
    z-index:1
  }
  #category_navi[aria-hidden="false"] {
      z-index: 100;
  }
  .category-navi-item {
      padding-block: 1px;
      border-bottom: 1px solid #fff;
  }
  .category-navi__link {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 0.5em;
    text-align: left;
    font-size: 0.9em;
    margin: 2px 0;
  }
  .category-navi__link:hover {
    color: var(--btn-text);
    background: var(--header-bg-color);
    text-decoration: none;
    transition: all .3s;
  }
}
@media(max-width:979px){
 button.toolbox__btn.category {
    display: none;
 }
  #toolbox {
    --toolbox-columns: 6;
 }
}
li.catclose.category-navi-item.category-navi__link {
  font-size: 1.2em;
  color: #494949;
}

li.catclose.category-navi-item.category-navi__link :hover {
    color: #fff;
}
/* ++++++++++
モバイルドロワーメニュー 
++++++++++ */
#main-navi {
  position: fixed;
  top: 0;
  left: -100vw;
  width: auto;
  height: 100%;
  color: #fff;
  background: rgba(0,0,0,.7);
  transition: transform .2s ease-in;
  overflow-x: hidden;
  z-index: 1200;
}
#main-navi[aria-hidden=false]{
  display: flex !important;
  overflow-y: scroll;
  overscroll-behavior: contain;
  transform: translateX(100vw);
}
#main-navi[aria-hidden="false"]::after{
  content:"";
  display:block;
  width:1px;
  height:calc(100vh + 1px);
}
.drawer-item {
  border-bottom: 1px solid #FFFFFF;
}
#main-navi > .drawer {
  width:280px;
    overflow-y: scroll;
}
.drawer-item__link, 
.drawer-item__btn {
  font-size: 16px;
  color: #fff;
  padding: 14px;
  display: flex;
  align-items:center;
  width:100%;
  background:#b0b0b0
}
.drawer-item__text {
  color: #fff;
  padding-left:5px;
  border-bottom: 1px solid #111;
  background: #666;
}
.drawer-item__icon {
  margin-right: 10px;
}
.drawer-item__icon:last-child {
  margin-left: auto;
}
.drawer-sub[aria-hidden=true]{
  display: none;
}
.drawer-sub .drawer-item__link {
  background: #333;
}


/**
* 基本のコンテンツ見出し（h2）
**/
.section-title {
  font-weight: 600;
  line-height: 1.1;
  padding-block: 3.5em 0.3em;
  text-align: center;
}

:is(.section-title__link, .section-title__btn) {
  display: block;
  font-size: 1.1em;
  font-weight: 600;
  color: #2768d6;
  width: max-content;
  margin: 2px 14px 8px auto;
}

.section-title-sub {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: center;
}
/**
* お気に入りボタンの共通設定
*/
.favo-btn{
  color:#e8e8e8;
  background-color:#fff;
}
.favo-btn svg{
  fill:#e8e8e8;
  stroke-width:1px;
  stroke:currentColor
}
.favo-btn.added{
  color: rgb(240, 120, 110)
}
.favo-btn.added svg {
  fill: currentColor;
  stroke:none
}

/**
* 商品リストの基本構造
**/
.grid {
  --columns:3; /* 一列に表示するアイテム数 => これはモバイルの時３列表示を意味*/
  display: grid;
  grid-template-columns: repeat(var(--columns) , minmax(0,1fr));
  gap: 8px clamp(2px,1vw - 2px,8px); 
  margin: 4px;
/* 元々24px */
}

/* 768px以上は4列表示　iPad mini以上*/
@media(min-width: 768px){
  .grid {
    --columns:4;
  }
}
/* 1025px以上は6列表示 一般的なPC*/
@media(min-width:1025px){
  .grid{
    --columns:6;
  }
}
@media(min-width:1025px){/* 24-12-5 一覧・検索結果はPCで5列*/
#productlist .grid{
    --columns:5;
  }
}

/* リスト商品の基本構造*/
.grid-item {
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-areas: 
    "img img"
    "favo price"
    "name name";
  gap : clamp(0px, 1vw - 4px, 8px) 0; /* 縦方向の間隔。無くても良い気はする */  
  position: relative;
  background: #fff;
  --list-item-radius: 12px;/* 角の丸み*/
  border-radius: var(--list-item-radius);
}
.grid-item__image-wrap{ grid-area: img }
.grid-item__favo      { grid-area: favo }
.grid-item__price     { grid-area: price }
.grid-item__name-wrap { grid-area: name}

@media(max-width:768px){
.grid-item__name-wrap {
    grid-area: name;
    margin: 2px 5px 2px 5px;
  }}

.grid-item__image{
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-top-right-radius: var(--list-item-radius);
  border-top-left-radius: var(--list-item-radius);
}
.grid-item__name {
  --max-line:6; /*何行まで表示するか */
  width: 100%;
  height: calc( 1em * 1.4 * var(--max-line) );/* 1文字のサイズ × 1行の高さ × 行数*/
  font-size: clamp(13px,1.4vw,14px);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
  margin-bottom: 15px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--max-line);
}
/*タブレット以上 ４行まで表示*/
@media(min-width:768px){
.grid-item__name{
  --max-line:4; 
  }
}
.grid-item__price {
  font-size: clamp(12px,1.5vw,15px);
  padding: 16px 8px 0;
  text-align: right;
}
.grid-item__favo {
  width: 40px;
  height: 40px;
  padding-block:4px;
}


@media(hover:hover){
  .grid-item a:hover {
    text-decoration: none;
  }
  .grid-item:hover .grid-item__image {
    filter: saturate(1.1);
    opacity: .8;
    transition: .3s ease-out;
  }
}



/* 商品ソート（一覧と検索結果ページ）*/
.c-sort {
  margin: 16px 0;
  padding: 16px 8px;
  text-align: right;
}
.c-sort__label {
  display: inline;
}
.c-sort__select {
  width: max-content;
  padding: 4px;
  padding-right: 20px;
  border: 1px solid #666;
  background: linear-gradient(to top left,transparent 50%,var(--btn-bg-color) 51%) calc(100% - 2px) 55%/.4em .8em no-repeat,linear-gradient(to top right,transparent 50%,var(--btn-bg-color) 51%) calc(100% - 2px - .4em) 55%/.4em .8em no-repeat #fff;
}
optgroup {
  font-weight: 700;
}




/*
* カルーセルスライドの共通設定
**/
.swiper-initialized .swiper-wrapper {/* ボタン分の余白*/
	padding-inline: 10px;
}

.swiper-btn {/* 初期はボタン非表示*/
  display:none;
  position: absolute;
  top: 35%;
  z-index: 5;
  width: 40px;
  height: 40px;
  color: #f5f5f5;
  background: rgb(80 80 80 /.5);
  border-radius: 50%;
}

.swiper-initialized .swiper-btn {/*スライド有効になればボタン表示*/
  display: block;
  width: 40px;
  height: 40px;
  color: #f5f5f5;
  background: rgb(80 80 80 /.5);
  border-radius: 50%;
  position: absolute;
  top: 35%;
  z-index: 5;
}
.swiper-button-disabled {
  opacity: 0.1;
  pointer-events: none;
  transition: opacity .3s;
}
.swiper-btn.next {
  rotate: 90deg;
  right: 0;
}
.swiper-btn.prev {
  rotate: -90deg;
  left: 0;
}
.swiper-btn.swiper-button-disabled {/* loop無効スライドの非アクティブ時*/
  opacity: 0.1;
  pointer-events: none;
  transition: opacity .3s;
}
/*
.swiper-horizontal {
	touch-action:auto !important;
}
*/

/*トップページ上部のスライド*/
#slider_list .swiper-btn {
  top: 45%;
}
/*
#slider_list .slider_list-pagination {
  padding-block: 20px;
  display: flex;
  justify-content: center;
}
*/
/* チェックした商品（トップ・商品詳細 共通） */
#checkitem {
  position: relative;
  overflow-x: hidden
}
#checkitem:has(> [hidden]) {
  display: none;
}
#checkitem-container:not(.swiper-initialized) .grid {/* スライドする必要がないとき or JSの読みこみに失敗したとき */
  display: grid !important;
  overflow-x: auto;
  overflow-y: hidden;
}
#checkitem-container.swiper-initialized {
  overflow-x: hidden;
}
#checkitem-container a.grid-item__name {
    --max-line: 5;
}

/* SNSアイコングループの共通設定 */
.sns-icon-container {
  --item-size: 50px; /* １アイコンあたりに使うサイズ*/
  display: grid;
  grid-template-columns: repeat(4,var(--item-size));
  column-gap: 12px;
  justify-content: center;
  width: 220px;
  margin-inline: auto;
}
.sns-icon__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--main-text);
}
@media(hover: hover){
  .sns-icon__link:hover {
    background: var(--main-text);
    color: #fff;
  }
}

.footer-sns-container{
  margin-top:40px;
}
.footer-sns-container.sns-icon-container > li {
  width: var(--item-size , 50px);
  height: var(--item-size, 50px);
  clip-path: circle();
  overflow: hidden;
  background: #fff;
}


/*
* フッター
*/
#main_footer {
  background-color: var(--footer-bg-color,#e5e5e5);
}
@media(max-width:979px){
  #main_footer { /* 底固定メニューを980px以上で非表示*/
    padding-bottom: 70px;
  }
}
.footer-inner.kg-inner {
  padding: clamp(16px,3.2vw,32px);
  margin-top: 30px;
}
.footer-logo {
  margin-bottom: 24px;
}
.footer-logo img {
  display: block;
  width: min(480px,80%);
  margin-inline: auto;
}
.footer-menu-container {
  --columns: 2;
  display: grid;
  grid-template-columns: repeat(var(--columns),1fr);
  gap: 24px clamp(8px,2vw + 1px,24px);　
  padding-bottom: 32px;
}
.footer-menu-item {
  font-size: clamp(12px,1.5vw,15px);
  padding-block: 8px;
  text-align:center;
}
@media( min-width:981px){
  .footer-menu-item{
    text-align:initial
  }
}
@media( min-width: 1025px){
  .footer-menu-container {
    --columns: 4;
  }
  .footer-menu {
    padding: 16px 20px 32px;
    position: relative;
  }
  .footer-menu::before, .footer-menu:last-child::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background: var(--mainText); /* 暫定値*/
  }
  .footer-menu:last-child::after {
    left: initial;
    right: 0;
  }
}

/*
*モバイルボトムメニュー
*/
#bottom-menu-container {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 2px;
  width:100%;
  height: 60px;
  padding-block: 8px;
  text-align: center;
  font-size: clamp(11px,1vw + 5px,14px);
  font-weight: 600;
  letter-spacing: .1em;
  background: var(--site-bg-color);
  box-shadow: 0 -1px 2px #eee;
  z-index: 20;
  position: fixed;
  bottom: 0;
  left:0;
  padding: 0 10px;
}
#bottom-menu-container > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
  justify-content: center;
  width: 100%;
}
#bottom-menu-container svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media(min-width:1170px){
  #bottom-menu-container{
    display:none;
  }
}
/*------------
サイドバー検索モーダル
------------*/
@media(min-width:980px){
  #background {
    z-index: 1;
  }
  #background ul {
    margin: 0 auto;
    padding-left: 10px;
    font-size: x-small;
    list-style: none;
  }
  #background li {
    margin: 1px;
    font-size: 13px;
    padding: 1px
  }
  #src-bg {
    height: 550px;
    margin: 2px auto 3px;
    padding: 5px;
    color: #FFF;
    background: rgba(45,45,45, 0.9);
  }
  #src-close-btn {
    position: absolute;
    right: 5px;
    top: 5px;
  }
  #src-main {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 523px;
    margin-top: 10px;
  }
  #src-main ul {
    display: inline-block;
    white-space: normal;
    width: 250px;
    vertical-align: top;
  }
  #src-main .on {
    color: #FF0000;
  }
  #src-sub {
    display: none;
    position: absolute;
    top: 0;
    margin: 50px;
  }
  #src-sub div {
    margin-bottom: 10px;
  }
  .keywords {
    cursor: pointer;
  }
  .item_zero {
    cursor: default;
    opacity: 0.5;
  }
  #post-src {
    display:table;
    width: 1150px;
    margin: 2px auto;
    padding: 5px;
    color: #FFF;
    background: rgba(45,45,45,0.9);
  }
  #post-src ul {
    float: left;
    width: 110px;
  }
  #post-src ul li:first-child {
    font-size: small;
  }
  .post-div {
    display: table-cell;
    float: right;
    position: relative;
    height: 100px;
    margin-right:2px;
  }
  .btns-div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
  .sub_contents {
    width: 200px;
    height: 50px;
    margin-right: 30px;
    text-align: left;
    font-size: medium;
    background: rgba(230, 230, 230, 1);
  }
  .btns {
    width: 150px;
    height: 25px;
    margin: 0 3px 5px 5px;
    text-align: left;
    font-size: 0.8em;
    background: rgba(230, 230, 230, 1);
    cursor: pointer;
  }
  .group_select > span[style] {/* 2023-12-26追記 */
  font-size: 10.5px !important;
  }
  .src-clear {
    width: 150px;
    height: 25px;
    margin: 0 3px 5px 5px;
    text-align: left;
    background: rgba(230, 230, 230, 1);
    cursor: pointer;
  }
  .group_select:before {
    content: url('https://img03.shop-pro.jp/PA01004/001/etc/triangle.png');
  }
  .src-back:before {
    content: url('https://img03.shop-pro.jp/PA01004/001/etc/backward.png');
  }
  #src-btn {
    width: 200px;
    height: 50px;
    margin: 0 3px 5px 5px;
    font-size: large;
    background: rgba(230, 230, 230, 1);
  }
  #src-num-div {
    display: table;
    width: 100%;
    height: 50px;
  }
  #src-num-div strong {
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
  }
  .src-num-span {
    display: inline-block;
    float: left;
    width: 50%;
    text-align: center;
  }
  .btn_on {
    background: #f1790a;
  }
  .btn_off {
    opacity: 0.6;
  }
  .group4off {
  visibility: hidden;
  }
  .li_item {
    text-decoration:underline;
  }
  :is(.stone_flg-1,.stone_flg-2) .li_item{ /* 変更@2024-02-01 */
    cursor: pointer
  }
  .listItem-header h3 {
    margin: 0 4px;
    font-weight: 400;
  }
}

























/**
* 旧CSSから引継ぎ。フリースペースなどで使用している可能性があるので消すの厳禁
* ここから
**/

/* ++++++++++
見出しの装飾 (Hタグ) 
++++++++++*/
.title_h2{
  font-size: 20px;
  font-weight: 400;
  margin-top: 32px;
  margin-bottom: 20px;
  padding-left: 12px;
  border-bottom: 1px solid var(--main-text);
}
.all_imgbox{ /* フリーページで使用 */
  font-size: 18px;
  font-weight: 600;
  margin-top: 4px;
  padding-bottom: 12px;
  text-align: center;
}

.title_h2.large-title{ /* 特商法・プライバシーポリシーなど */
  font-size:28px;
  margin-bottom:32px;
}
.heading_border { /* 線付きタイトル */
  font-size: 16px;
  color: #333;
  letter-spacing: .1em;
  margin-bottom: .8em;
  text-align: center;
  position: relative;
}
.heading_border > * {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 0 2.5em;
  background: #f7f5ed;
  position: relative;
  z-index: 1;
}
.heading_border::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--main-text);
}
.ttl-h2 {  /*お気に入りページで発見。他のページにもある可能性*/
    font-size: 16px;
    margin: 12px;
}

/*------------
  ボタン各種 :フリーページ等で使用
------------*/
.btn{
  display: inline-block;
  font-size: 14px;
  color: #333;
  margin-bottom: 0;
  padding: 4px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f5f5f5;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.ltdmore {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.ltdmore a:visited {
  color: #fff;
}
.btn-border {
  display: inline-block;
  max-width: 200px;
  padding: 4px 60px;
  text-align: left;
  font-size: 15px;
  color: #ffffff;
  background-color: #6b5b4c;
  border: 2px solid #93897f;
  border-radius: 4px;
  text-decoration: none;
  transition: .4s;
  box-sizing: content-box;
}
@media(hover:hover){
  .btn-border:hover {
    color: #fff;
    background-color: #a3988e;
    border-color: #93897f;
  }
}
/* ++++++++++
ページャー（商品一覧＆検索結果）
++++++++++ */
/* 商品リスト上のページャー*/
.kg-pager {
  font-size: 18px;
  font-weight: bold;
  margin-block: 10px 20px;
  padding-inline: 10px;
  text-align: right;
}
.kg-pager a {
  font-size: 14px;
}
.pager-index {
  display: none;
}
@media(min-width:811px){
  .pager-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas: "space pager sort";
    align-items: center;
  }
  .c-sort {
    grid-area: sort;
  }
  .kg-pager {
    grid-area: pager;
    margin-block: 40px 10px;
    text-align: center;
  }
  .kg-pager a {
    font-size: inherit;
  }
  .pager-index {
    display: initial;
  }
}

/* 商品リスト下のページャー*/
.mobile-pager {
  display: grid;
  grid-template-columns: 24px max-content 24px;
  justify-content:center;
  column-gap: 8px;
  align-items: center;
  margin: 16px 0;
}
.mobile-pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  max-width:calc(100vw - 2em - 64px);
}
.mobile-pager-list-item {
  width: calc(100% / 6);
  min-width:36px;
  position: relative;
  text-align: center;
  padding: 8px 0;
}
.mobile-pager-list-item > * {
  font-size: 16px;
}
.mobile-pager-list-item [aria-current="page"] {
  font-weight:600;
  color: var(--active-text);
  text-decoration: underline 1px;
}
.p-pager{
  display:none
}
@media(min-width:769px){
  .mobile-pager{
    display:none
  }
  .p-pager{
    display:block;
    font-size: 18px;
    font-weight: bold; 
    margin:40px 0 10px 0;
    padding:0px 10px 0 10px ;
    text-align: center;
  }

  .c-pager-container{
    display:flex;
    justify-content:center;
    margin:16px 0;
    padding:8px 16px
  }
  .pager-title {
    font-size: 16px;
    font-weight: 400;
    padding-top:3px;
    word-break:keep-all;
  }
  .c-pager {
    display: flex;
    flex-wrap:wrap;
    font-size: 16px;
    list-style: none;
    padding: 0 16px;
    margin: 0;
  }
  .c-pager-item:not(:first-child)::before {
    content: "|";
    font-weight:300;
    margin-left: 6px;
  }
  .c-pager__link {
    font-size: 16px;
    font-weight: 400;
    padding: 4px;
    text-decoration: none;
  }
  .c-pager__link[aria-current="page"] {
    font-weight:600;
    color:var(--active-text);
    text-decoration:underline 1px;
  }
}
/* ++++++++++
フリースペース
++++++++++ */
.cg_freespace_01,
.cg_freespace_01 h2,
.cg_freespace_02{
  font-size: 14px;
  line-height: 22px;
  margin-top: 10px;
  padding-block: 0;
}
/* ++++++++++
　お知らせ
++++++++++ */
.logbox {
  height: 280px;
  margin-top:40px;
  margin-bottom:56px;
  padding: 1.5em;
  border: 1px solid  #808080;
  overflow:scroll;
}
/* ：フリーページ等で使用 */
.bgc_gray {
  background-color: #f1f1f1;
}
.boxcat {
    position: relative;
    margin: 5em 0 0 0;
    padding: 1em 1.5em;
    /* border: solid 3px #82705f; */
    background: #fff;
    border-radius: 12px;
}
.boxcat .box-title {
  position: absolute;
  display: inline-block;
  width:100%;
  top: -27px;
  /* left: 45%; */
  left:0;
  padding: 0 9px;
  height: 25px;
  line-height: 0px;
  font-size: 20px;
  /* background: #82705f; */
  color: #333;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
  text-align:center;
}
.boxcat p {
  margin: 2; 
  padding: 0;
}
.boxcat u {
  line-height: 2.0;
}
.boxcat span {
  line-height: 2.0;
}
.boxcat .inline{
  display: inline-block;
  text-decoration: underline;
}
.boxcat hr {
    height: 2px;
    /* background-color: #866f58; */
    margin: 18px 0 18px;
    border-bottom: 2px solid #333;
}
.cat_contents {
    background: #fff;
    padding: 10px 10px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.tab_line {
    display: none;
}

/* .cat_contents が入ってないフリースペースを無理やりそれっぽく見せるCSS　*/
.cg_freespace_01:has(>h2):not(:has(> .cat_contents)) {
  --padding: 10px;
  background-color: #fff;
  background-clip: padding-box;
  padding: var(--padding) !important;
}
.cg_freespace_01:has(>h2):not(:has(> .cat_contents)) .boxcat {
  margin-top: 7em;
}
.cg_freespace_01:has(>h2):not(:has(> .cat_contents)) .boxcat::before {
  content: "";
  display: block;
  width: calc(100% + var(--padding) * 2);
  height: 6em;
  position: absolute;
  background: var(--site-bg-color);
  top: -6em;
  left: calc(var(--padding) * -1);
}
/*ここまで .cat_contents が入ってないフリースペースをそれっぽく見せる　*/

/* ++++++++++
村津追加
------------*/
:is(.recommend-unit,.seller-unit,.mr__item,.productlist-unit,.together_list,.heightLine,.fav-image) img{
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover;
  margin-left: 1px;
  margin-right: 1px;
  margin-inline: 1px;
  width: calc(100% - 2px) !important;
}

.grid_together{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2px;
  row-gap: 10px;
}

@media (min-width:600px) and (max-width:768px), (min-width:980px){
.grid_together{
    grid-template-columns:repeat(3,1fr)
  }
  #main > section .grid{
    margin-left: -10px;
    margin-right: -10px;
  }  
}
@media (min-width:769px) and (max-width:979px){
.grid_together{
    grid-template-columns:repeat(3,1fr)
  }
}
.txt_short3 {
    font-size: 14px;
    font-weight: 400;
    padding: 12px 8px 0px;
    margin-bottom: 8px;
    text-align: left;
    word-break: break-all;
    line-height: 1.4;
}
@media(max-width:768px){
.txt_short3 {
    font-size: 13px;
  }}
@media screen and (max-width: 480px){	
.col-xs-4 {
    width: 32%;
    display: inline-block;
    float: none;
    vertical-align: top;
}}

@media screen and (max-width: 480px){	
.col-md-6 {
    width: 49%;
    display: inline-block;
    float: none;
    vertical-align: top;
}}
@media screen and (min-width: 481px){	
.col-lg-3 {
    width: 24%;
    display: inline-block;
    float: none;
    vertical-align: top;
}}
@media(max-width:768px){
  .sp-pager{
    font-size: 18px;
    font-weight: bold; 
    margin:10px 0 20px 0;
    padding:0px 10px 0 10px ;
    text-align: right;
  }}

.mobile-pager-btn {
    width: 30px;
}

h1 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.mar_t_50 {
  margin-top: 50px;
}

/*
  font size
------------*/

.txt_10 {
  font-size: 10px;
}
.txt_12 {
  font-size: 12px;
}
.txt_14 {
  font-size: 14px;
}
.txt_15 {
  font-size: 15px;
}
.txt_16 {
  font-size: 16px;
}
.txt_18 {
  font-size: 18px;
}
.txt_20 {
  font-size: 20px;
}
.txt_22 {
  font-size: 22px;
}
.txt_24 {
  font-size: 24px;
  background-color: #6b5b4c;
}
.txt_26 {
  font-size: 26px;
}
.txt_28 {
  font-size: 28px;
}

/*
  color
------------*/

.txt_c_kg1 {
  color: #fff;
}
.txt_c_333 {
  color: #333;
}

.bor_b_1 {
  border-bottom: 1px solid #333;
}

/*
  margin
------------*/

.mar_auto {
  margin: 0 auto;
}
.mar_0 {
  margin: 0;
}
.mar_t_0 {
  margin-top: 0;
}
.mar_r_0 {
  margin-right: 0;
}
.mar_b_0 {
  margin-bottom: 0;
}
.mar_l_0 {
  margin-left: 0;
}
.mar_5 {
  margin: 5px;
}
.mar_t_5 {
  margin-top: 5px;
}
.mar_r_5 {
  margin-right: 5px;
}
.mar_b_5 {
  margin-bottom: 5px;
}
.mar_l_5 {
  margin-left: 5px;
}
.mar_t_10 {
  margin-top: 10px;
}
.mar_r_10 {
  margin-right: 10px;
}
.mar_b_10 {
  margin-bottom: 10px;
}
.mar_l_10 {
  margin-left: 10px;
}
.mar_l_16 {
  margin-left: 16px;
}
.mar_t_20 {
  margin-top: 20px;
}
.mar_r_20 {
  margin-right: 20px;
}
.mar_b_20 {
  margin-bottom: 20px;
}
.mar_l_20 {
  margin-left: 20px;
}
.mar_t_30 {
  margin-top: 30px;
}
.mar_r_30 {
  margin-right: 30px;
}
.mar_b_30 {
  margin-bottom: 30px;
}
.mar_l_30 {
  margin-left: 30px;
}
.mar_t_50 {
  margin-top: 50px;
}
.mar_r_50 {
  margin-right: 50px;
}
.mar_b_50 {
  margin-bottom: 50px;
}
.mar_l_50 {
  margin-left: 50px;
}

/*
  padding
------------*/

.pad_v_10 {
  padding: 10px 0;
}
.pad_v_20 {
  padding: 20px 0;
}
.pad_v_30 {
  padding: 30px 0;
}
.pad_0 {
  padding: 0;
}
.pad_t_0 {
  padding-top: 0;
}
.pad_r_0 {
  padding-right: 0;
}
.pad_b_0 {
  padding-bottom: 0;
}
.pad_l_0 {
  padding-left: 0;
}
.pad_2 {
  padding: 2px;
}
.pad_t_2 {
  padding-top: 2px;
}
.pad_r_2 {
  padding-right: 2px;
}
.pad_b_2 {
  padding-bottom: 2px;
}
.pad_l_2 {
  padding-left: 2px;
}
.pad_5 {
  padding: 5px;
}
.pad_t_5 {
  padding-top: 5px;
}
.pad_r_5 {
  padding-right: 5px;
}
.pad_b_5 {
  padding-bottom: 5px;
}
.pad_l_5 {
  padding-left: 5px;
}
.pad_10 {
  padding: 10px;
}
.pad_t_10 {
  padding-top: 10px;
}
.pad_r_10 {
  padding-right: 10px;
}
.pad_b_10 {
  padding-bottom: 10px;
}
.pad_l_10 {
  padding-left: 10px;
}
.pad_20 {
  padding: 20px;
}
.pad_t_20 {
  padding-top: 20px;
}
.pad_r_20 {
  padding-right: 20px;
}
.pad_b_20 {
  padding-bottom: 20px;
}
.pad_l_20 {
  padding-left: 20px;
}
.pad_30 {
  padding: 30px
}
.pad_t_30 {
  padding-top: 30px;
}
.pad_r_30 {
  padding-right: 30px;
}
.pad_b_30 {
  padding-bottom: 30px;
}
.pad_l_30 {
  padding-left: 30px;
}

/*
  border
------------*/

.bor_t_1 {
  border-top: 1px solid #eee;
}
.bor_r_1 {
  border-right: 1px solid #eee;
}
.bor_b_1 {
  border-bottom: 1px solid #333;
}
.bor_l_1 {
  border-left: 1px solid #eee;
}

/*
  vertical align
------------*/

.va-10 {
  vertical-align: -10%;
}
.va-20 {
  vertical-align: -20%;
}
.va-30 {
  vertical-align: -30%;
}
.va-35 {
  vertical-align: -35%;
}
.va-40 {
  vertical-align: -40%;
}

/*
  text align
------------*/

.txt_l {
  text-align: left;
}
.txt_c {
  text-align: center;
}
.txt_r {
  text-align: right;
}

/*
  font weight
------------*/
.txt_fwn {
  font-weight: normal;
}
.txt_fwb {
  font-weight: bold;
}
/*------------
  イベント告知
------------*/
.topinfo-inner-s {
  padding: 16px 0;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.topinfo-inner-s p {
  color: #ff0000;
}
.topinfo-inner-s a {
  text-decoration: 1px underline #333;
}
/**
* 消すの厳禁ここまで
**/


.free-page{
    margin: 5px;
}

.information-area-inner.infolink {
    margin-top: -40px;
    margin-left: 90%;
}

#information_area .infolink span{
    font-size:12px;
    color: #2768d6;
    }
#information_area .infolink a{
    color: #2768d6;
    }



@media (max-width: 1170px) {
.information-area-inner.infolink {
    margin-top: -15px;
    margin-bottom: -20px;
    margin-left: 72%;
}
}


/**
* スマホinfo三行の時
**/
.information-area-inner.kg-inner {
    margin-bottom: 8px;
}