@charset "UTF-8";
/*--------------------------------------------------------------
Foundation
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, i, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption,
button, input, textarea, select, i {
  border: 0;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1.5;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.5;
  background: #fff;
  color: #231815;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", "Meiryo", sans-serif;
}



ul,
li {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a:hover,
a:active,
a:focus {
  outline: 0;
}

a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  -webkit-transition-property: opacity, color, background, box-shadow, -webkit-transform;
  transition-property: opacity, color, background, box-shadow, -webkit-transform;
  transition-property: opacity, color, background, transform, box-shadow;
  transition-property: opacity, color, background, transform, box-shadow, -webkit-transform;
  opacity: 1;
  line-height: inherit;
}

img {
  vertical-align: middle;
}

img,
input[type="image"] {
  border: 0;
  height: auto;
  max-width: 100%;
}

input[type="submit"], input[type="button"], button {
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
  font-size: inherit;
  letter-spacing: inherit;
  background: none;
}

strong {
  font-weight: bold;
}

a {
  text-decoration: none;
}

a:hover,
input[type="image"]:hover {
  opacity: 0.7;
}

p {
  line-height: inherit;
}

p * {
  line-height: inherit;
}

main {
  overflow: hidden;
}


/*--------------------------------------------------------------
Project
--------------------------------------------------------------*/
.buy .low_ttl{
  padding-bottom: 6rem;
}

.buy .filter{
  text-align: center;
  margin-bottom: 10rem;
}

.headline_group{
  text-align: center;
  margin-bottom: 8rem;
}

.headline_group h5{
  font-size: 3.6rem;
  letter-spacing: .1em;
  padding-bottom: 2rem;
}


.gallery_lis .product {
      width: 400px;
      margin: 0 auto;
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 10px;
    }

.gallery_lis img {
      width: 100%;
      border-radius: 8px;
    }

    select, button {
      padding: 10px;
      margin-top: 15px;
      font-size: 16px;
    }

    button {
      background: #000;
      color: #fff;
      border: none;
      cursor: pointer;
      width: 100%;
    }

    button:hover {
      opacity: 0.8;
    }



  .filter_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2rem;
}

.label {
      font-size: 16px;
    padding-right: .5rem;
    margin-left: 1rem;
}

.gallery_list.is-filtered{
background: #eaeaea;
    margin: 0 2rem;
    padding-bottom: 10rem;
    display: flex;
  flex-wrap: wrap;
  gap: 2%;
  /* 
     max-width: 1640px を超えた時に margin: auto と同じ見栄えにするための padding 
     (100% - 1640px) / 2 で、左右に margin: auto と同じだけの空きを作ります 
  */
  padding-left: calc((100% - 1640px) / 2 + 2rem); 
  padding-right: calc((100% - 1640px) / 2 + 2rem);
  
  /* 画面幅が 1640px より小さい時のために最低限の左右 padding を確保 */
  box-sizing: border-box; 
  padding-top: 5rem;
  padding-bottom: 10rem;
}


.gallery_list ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 2%;
  max-width: 1640px;  /* ←これ必須 */
  width: 100%;        /* ←これも入れると安定 */
  margin: 0 auto;
}



.gallery_list.is-filtered .default,
.gallery_list.is-filtered ul {
  display: contents !important; 
}

.gallery_list li{
  width: 32%;
  position: relative;
  margin-bottom: 10rem;
  background-color: #fff;
}

.gallery_list li .yoyaku{
  position: absolute;
  left: 2rem;
  top: 9rem;
}

.gallery_list li dl{
  position: absolute;
  left: 2rem;
  top: 1rem;
  width: 98%;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
}

.gallery_list li dd{
  position: absolute;
  top: 0;
  right: 2rem;
}

.gallery_list li dd span{
  font-size: 1.4rem;
}

.gallery_list li img{
  padding-top: 2rem;
}

.gallery_list .box{
  position: absolute;
  bottom: 1rem;
  display: flex;
}

.gallery_list .box p{
  background: #545353;
  color: #fff;
  margin-left: 1rem;
  font-size: 1.6rem;
  padding: .5rem 1rem;
  line-height: 1;
}

.gallery_list.is-filtered h3 {
  display: none;
}

.default{
  padding: 8rem 10rem;
  margin-bottom: 15rem !important;
  position: relative;
}

.gallery_list.is-filtered .default {
  margin: 0 1.6rem !important;
  padding-bottom: 0;
}

.gallery_list.is-filtered #limited {
  padding-top: 0;
}

.gallery_list.is-filtered #premium {
  padding-top: 0;
}


.gallery_list .default:has(li[style*="display: none"]:last-child:first-child), /* liが1つもない場合 */
.gallery_list .default:not(:has(li:not([style*="display: none"]))) {
    display: none;
}


.default h3{
  font-size:3.2rem;
  border: 1px solid;
  padding: .5rem 3rem;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,-50%);
}


* --- 既存の .default の余白を、フィルター時はリセットする --- */
.gallery_list.is-filtered .default {
  margin: 0 !important;   /* 15remなどの大きな余白を消す */
  padding: 0 !important;  /* paddingも一旦0にする */
}

/* --- 中身（表示されているli）があるグループだけに、下の余白を付ける --- */
.gallery_list.is-filtered .default:has(li:not([style*="display: none"])) {
  padding-bottom: 5rem; /* 任意：グループ間の最低限の隙間 */
}

/* --- 【重要】中身がすべて非表示のグループは完全に消す --- */
.gallery_list.is-filtered .default:not(:has(li:not([style*="display: none"]))) {
  display: none !important;
}

/* フィルター中はタイトルも完全に詰める */
.gallery_list.is-filtered h3 {
  display: none;
  margin: 0;
}

.filter_item select{
  border: 1px solid;
  padding: .5rem 1rem;
}

.custom-select {
  position: relative;
  width: 120px;
  cursor: pointer;
}

.lim .custom-select {
  width: 180px;
}

.selected {
  border: 1px solid #000;
  padding: .5rem 1rem;
  background: #fff;
  text-align: left;
  position: relative;
  border-radius: 5px;
  font-size: 16px;
}

.selected::after{
 content: "";
}

.selected.is-all::after {
  content: "▼";
  position: absolute;
  right: 2rem;
  font-size: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #000;
  border-top: none;
  background: #fff;
  display: none;
  z-index: 10;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.options.active {
  display: block;
}

.options .item {
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}

.options .item:hover {
  background: #f2f2f2;
}

.selected .circle {
  position: absolute;
  right: 2rem; /* ▼と同じ位置 */
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
}

.selected.is-all .circle {
  display: none;
}

/* 丸 */
.circle {
  display: inline-block;
  width: .85em;
  height: .85em;
  border-radius: 50%;
}

.circle.wh {
  background: #fff;
  border: 1px solid #231815;
}

.circle.bk {
  background: #231815;
}

.circle.gy {
  background: #898989;
}

.circle.rd {
  background: #cf121b;
}

.circle.or {
  background: #f5ac3c;
}

.circle.gd {
  background: #b59717;
}

.circle.sl {
  background: #c8c9ca;
}

.circle.bz {
  background: #804921;
}

.circle.cg{
  background: #d4d4d4;
}
.circle.pb{
  background: #bf9f88;
}

.circle.my{
  background: #ddc160;
}

.circle.dm{
  background: #9db0ae;
}

.cart_btn{
  color: #fff;
  text-align: center;
  position: absolute;
  width: 100%;
  background-color: #000;
  max-width: 600px !important;
  align-items: center;
justify-content: center;
padding: 1rem 0;
}


@media screen and (max-width: 767px) {

  .headline_group h5{
    font-size: 5.2rem;
  }

 .headline_group p{
  font-size:2.8rem;
  text-align:left;
 }

 .default{
    padding: 10rem 4rem;
 }

.default h3{
  font-size: 4.2rem;
}

.gallery_list.is-filtered{
background: #eaeaea;
    margin: 0 2rem;
    padding-bottom: 10rem;
    padding: 6rem 4rem 10rem;
}


.gallery_list li .yoyaku{
  top: 12rem;
  width: 20rem;
}

.gallery_list li dl{
  font-size: 2.6rem;
}

.gallery_list li dd span {
    font-size: 1.8rem;
}

.gallery_list .box p{
  font-size: 2rem;
}


  .buy .filter{
    text-align: left;
  }
  .filter_item{
    width: 100%;
    margin-bottom: 1rem;
  }
  .filter_item .label{
    width: 40%;
    font-size: 3rem;
  }
  .filter_item .label span{
    display: none;
  }
.custom-select,.lim .custom-select{
  width: 60%;
  background: #eaeaea;
  border-radius: 5px;
}

.selected{
  border: 1px solid #eaeaea;
   background: #eaeaea;
}

.selected,.options {
  font-size: 2.4rem;
  border: 1px solid #eaeaea;
   background: #eaeaea;
}
.options .item{
    font-size: 2.4rem;
}

.gallery_list ul{
  display: block;
}
.gallery_list li {
  width: 100%;
  margin-bottom: 20rem;
}


}


/*shopify*/
.shopify-buy-frame--toggle.is-sticky{
  top: 25% !important;
}


.shopify-buy-frame iframe {
  outline: none !important;
  border: none !important;
}

.shopify-buy-frame--cart {
  outline: none !important;
}
.shopify-buy-frame:focus,
.shopify-buy-frame iframe:focus {
  outline: none !important;
}

.shopify-buy__btn--close:focus,
.shopify-buy__btn--close:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


.noto{
  border-top: 1px solid;
  border-bottom: 1px solid;
  max-width: 78rem;
  margin: 0 auto 12rem;
  padding: 1rem 2rem 3rem;

}

.noto dl{
  padding-top: 2rem;
   font-size: 1.8rem;
}

.noto dt{
  font-weight: 700;
}


@media screen and (max-width: 767px) {
.noto{
  padding: 1rem 0 3rem;
}

  .noto dl{
  font-size: 2.6rem;
}
}

.shopify-buy__cart__notice{
  text-align: left !important;
}