@charset "utf-8";
/* CSS Document */
#original_wrapper{font-family: 'Overpass', 'mizolet', sans-serif;}

@media only screen and (min-width: 768px){
#original_wrapper{margin:0 auto 100px!important;}}
#original_wrapper h2 {
    text-align: center;
    font-size: 180%;
    font-family: mizolet, sans-serif;
    font-weight: 400;
    margin: 15px 0 0;
}

h1.fs-c-heading{display:none;}

.topimg{
margin: 0 calc(50% - 50vw);
width: 100vw;
max-width: inherit;
}
@media (min-width: 768px) {
    .topimg{
    width: 100vw;
    max-width: 1216px;
    margin-right: auto;
    margin-left: auto;
}}

p.explanation { text-align: center; padding: 10px;}
.set_box {margin-top: 100px;}

/*SETアイテムリンク(2列で配置)*/
.set_container {margin: 0 calc(50% - 50vw); width: 100vw; max-width: inherit;}
.set_box {display: flex;/* flex-wrap: wrap; */margin: 0;}
.set_item_img {border: solid 1px #999;}
.set_item a { font-weight: normal; color: #333; font-size: 90%;}
.set_item a.more {padding: 3px 0;margin: 10px auto;}
.set_item_text {margin: 5px;text-align: center;}
.set_item_text .link {font-weight: bold;color: #dc143c;}
.set_item .sale-price {font-size: 160%;color: #e17a7a;}
.set_item .sale-price small {font-size: 60%;}
.set_item {width: 100%;height: auto;margin: 0;position: relative;padding: 20px 10px;}
.set_item:nth-child(odd){margin-right: 2%;background: #f5f5ef;}
a.item {display: block;padding: 10px;text-align: center;border: solid 1px #000;border-bottom: none;position: relative;margin: 10px 0 0;font-size: 80%;}
a.item::after {content: "▼";display: flow;position: absolute;top: 50%;right: 1em;transform: translateY(-43%) rotate(30deg);font-size: 80%;}
a.item:last-child {border-bottom: solid 1px #000;}
p.off-rate {color: #e17a7a;width: 45%;margin: 10px auto -5px;padding: 8px 5px 5px;border: solid 1px #e17a7a;font-weight: 400;font-size: 120%;line-height: 1.1em;border-radius: 5px;}
p.name { font-size: 120%; font-weight: bold; line-height: 1.2em;}
.hr01{border-top: 1px solid #000; margin-top: calc(80 / 750 * 100vw);}
.hr02{border-top: 1px solid #000; margin-bottom: calc(80 / 750 * 100vw);}
@media only screen and (min-width: 768px) {.set_box {max-width: 1216px;flex-wrap:nowrap;margin: 0 auto;} .set_item{width: calc(98% / 2);border: solid 1px #ededed;margin-bottom: 30px;padding: 10px 20px;box-shadow: 3px 3px 5px #ededed;} .set_item a.more {margin-top: 20px!important; padding:8px 0;} .set_item:nth-child(odd){margin-right:2%;background: none;} p.off-rate {width: 45%;font-size: 110%;margin-top: 10px; margin: 15px auto;}
p.explanation { text-align: center; padding: 10px; font-size: 120%;}
.offbox{display:flex;flex-wrap: wrap;}}

/*番号*/
.set_box p.number {font-size: 180%;color: #ab8181;font-style: normal;/* background-color: #ccc; */margin: 0 auto;text-align: center;border-radius: 30px;width: 20%;padding: 5px 0 0;letter-spacing: 0.1em;font-family: "scarlet-wood", sans-serif;font-weight: 700;font-style: normal;}
@media only screen and (min-width: 750px) {.set_box p.number {font-size: 200%;width: 15%;}}
/*キャッチコピー*/
.set_box p.catch {color: #333333;text-align: center;font-size: 100%;margin: 5px 0 10px;}
@media only screen and (min-width: 750px) {.set_box p.catch {font-size: 120%;}}



/*赤字強調テキスト*/
.lead .red {
    color: #931919;
    font-weight: bold;
    font-size: 120%;
}

/*まとめてカートに入れるボタン*/
.set_item button {
    border: none;
    background-color: #7e7e7e;
    padding: 15px 10px 12px 10px;
    width: 100%;
    position: relative;
    font-size: 100%;
    margin: 10px 0 0;
    color: #ffffff;
    border-radius: 12px;
}
.set_item button:hover {background: #333;color: #ffffff;}
    
@media only screen and (min-width: 768px) {
.set_item button {font-size: 100%;}
}
.set_item button:after {
    content: "▼";
    display: flow;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-43%) rotate(30deg);
    font-size: 80%;
}

.set_item h3 {
    font-size: 100%;
    margin: 0;
    font-weight: bold;
    line-height: 1.4em;
}

/*セレクト*/
.select-area {
    padding: 5% 10%;
    background: #f5f5f5;
}
.set_item select {font-size: 80%;margin: 5px 0 15px;background: #ffffff;border: solid 1px #ffffff;width: 60%;box-shadow: 1px 1px 2px 0 #00000021;}

.select-box {display: flex;margin-bottom: 5px;}
.select-box:last-child {border-bottom: none;}
.select-box p {font-size: 100%;text-align: right;width: 60%;margin: 8px 0;}
@media only screen and (min-width: 768px) {
.set_item h3 {font-size: 120%;margin:0px}
.select-box {margin: 5px;}
.set_item select {width:50%;font-size: 90%;margin: 5px 0 10px;background: #ffffff;border: none;}
}

/*おすすめ一覧から選ぶボタン*/
.set_item .btn_link a{
  display: block;
  padding: 15px 0 12px;
  cursor: pointer;
  margin: 0 0 10px;
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 0 5px rgba(0, 0, 0, 0.2);
  font-size: 100%;
}
.set_item .btn_link a:after {
    content: "▼";
    display: flow;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-43%) rotate(30deg);
}
.set_item .btn_link a:hover {
  background:#7E7E7E;
  color:#fff;
}


/*-----コーデスライダー-----*/
/* 選択されていないサムネイルは薄くする */
.splide__slide {
  opacity: .6;
}
/* 選択されているサムネイルだけ透過しない */
.splide__slide.is-active {
  opacity: 1;
}
/* 画像サイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}
/* スライダーの幅 */
.slider_area {
  margin-inline: auto;
  width: 100%;
}
.slider_area button{
    background-color: #ffffff;
    padding: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top:50%;
    border-radius: 30px;
    margin: 0;
}
.slider_area button:after{display:none;}
.slider_area .splide__arrow svg {fill: #000000;height: 1em;width: 1em;}
.slider_area .splide__track--nav>.splide__list>.splide__slide.is-active {border: 1px solid #dcdcdc;}
.slider_area a::before {content: "▼";display: flow;position: absolute;top: 50%;left: -1.5em;transform: translateY(-43%) rotate(30deg);font-size: 80%;}

/*画像テキストを載せる設定*/
.splide__slide {
    position: relative;
}
.splide__slide ul {
    position: absolute;
    bottom:10px;
    left:10px;
    margin:0;
    padding: 5px 10px 5px 20px;
    text-align: left;
    background-color: #ffffff8f;
}
.splide__slide ul.txt {
    padding: 0;
    font-size:80%;
    background-color: #00000000;
    color: #fff;
    bottom: 5px;
}
.splide__slide li {list-style-type:none;position: relative;}
/*.splide__slide li a {
    color: #fff!important;
}*/
/*画像にテキストを載せる設定ここまで*/

/*-----コーデスライダーここまで-----*/


/*-----アコーディオン-----*/
#original_wrapper .accordion {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 5px rgb(0 0 0 / 0.2);
  overflow: hidden;
  margin-bottom: 15px;
}

/* inputのチェックボックスを非表示 */
#original_wrapper .accordion-hidden {
  display: none;
}

/* 見出しボタン部分 */
#original_wrapper .accordion-open {
  display: block;
  padding: 15px 0 12px;
  cursor: pointer;
  margin: 0;
  position: relative;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  text-align: center;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
}

/* ＋アイコン */
#original_wrapper .accordion-open::before,
#original_wrapper .accordion-open::after {
  content: '';
  width: 14px;
  height: 1px;
  background: #000000;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* アイコンのー */
#original_wrapper .accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたらーに */
#original_wrapper .accordion-hidden:checked+.accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* アコーディオン中身部分 */
#original_wrapper .accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
  cursor: pointer;
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
#original_wrapper .accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
}
/* ↑ここまで共通 */
/*-----アコーディオンここまで-----*/