@charset "UTF-8";

/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5em;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.onlyPc {
  display: block !important;
}

.onlySmp {
  display: none !important;
}



/* LP全体コンテナ（PCでの最大幅固定＋中央寄せ） */
main {
  padding-bottom: min(5%, 50px);
  background-color: #FFC052;
  background-image: url(../img/bg_pattern01.png);
  background-repeat: repeat;
  background-size: 50px 50px !important;
}

section {
  margin: 0 auto;
}

/* -----------------------------------
   トップセクション
----------------------------------- */
#top_img {
  position: relative;
  width: min(92%, 1280px);
  margin: 0 auto;
  padding-top: min(8vw, 60px);
}


/* -----------------------------------
  特長＆ポイント）
----------------------------------- */
.content_box {
  margin: min(5vw, 50px) auto min(5vw, 50px) auto;
  padding: 80px 12px 80px 12px;
  width: min(92%, 1280px);
  border-radius: min(4vw, 30px);
  background-color: #FFF7E8;
  border: 7px solid #63a44e;
  padding-bottom: min(2vw, 10px);
}

/* キャッチ画像 */
.feature_catch {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  line-height: 0;
}

.feature_catch img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* 特長画像 */
.feature img {
  display: block;
  width: 95%;
  height: auto;
  margin: 0 auto 20px;
}

/* 特長1の上部余白をなくす */
.feature_catch+.feature {
  margin-top: 0;
  padding-top: 0;
}

/* 特長4 商品情報 */
.feature02 {
  box-sizing: border-box;
  width: 95%;
  margin: 0 auto 20px;
  padding: 8% 5% 5%;
  background-image: url("../img/features_04.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

/* 商品情報画像 */
.feature02 .goods_info {
  display: block;
  width: 95%;
  height: auto;
  margin: 0 auto;
}

/* ------------ オーダー ------------ */

#ecBtnArea {
  width: 95%;
  margin: 30px auto;
  padding: 0;
}

#ecBtnArea p {
  padding-bottom: min(2.77vw, 40px);
  padding-top: min(5.136vw, 75px);
}

#ecBtnArea ul {
  display: flex;
  flex-wrap: wrap;
  gap: min(.6849vw, 10px) .93%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#ecBtnArea ul::before {
  content: "";
  display: block;
  width: 10.7%;
  order: 1;
}

#ecBtnArea ul li {
  display: flex;
  width: 24.3%;
  min-height: min(9.383vw, 137px);
  list-style: none;
}

#ecBtnArea ul li a {
  display: flex;
  align-items: center;
  padding: min(.6849vw, 10px) 1.2em;
  border-radius: 1rem;
  text-decoration: none;
  background: #ffb11b;
  text-align: center;
  box-sizing: border-box;
}

#ecBtnArea ul li a img {
  width: 85%;
  display: block;
  margin: 0 auto;
}

.copyAmazon {
  font-size: 100%;
  width: 100%;
  margin: 0 !important;
}

/* ------------ スマホ ------------ */

@media screen and (max-width:1000px) {
  .content_box {
    border: 5px solid #63a44e;
  }
}

/* max-width:1000px 終了 */

@media screen and (max-width:640px) {
  .onlyPc {
    display: none !important;
  }

  .onlySmp {
    display: block !important;
  }


  main {
    padding-bottom: min(5%, 50px);
    background-color: #FFC052;
    background-image: url(../img/bg_pattern01.png);
    background-repeat: repeat;
    background-size: 30px 30px !important;
    ;
  }


  #top_img {
    margin: 5px auto 0 auto;
    width: 93%;
  }

  .content_box {
    padding: 20px 0px 20px 0px;
    border: 4px solid #63a44e;
  }

  /* 特長画像 */
  .feature img {
    margin: 0 auto 5px;
  }

  /* 特長4 商品情報 */
  .feature02 {
    padding: 6% 5% 5%;
    background-image: url("../img/features_04_sp.png");
    margin: 0 auto 5px;
  }


  /* ------------ オーダー ------------ */

  #ecBtnArea {
    padding: 0 3vw;
  }

  #ecBtnArea p {
    width: 95%;
    padding: 4vw 0 5vw;
  }

  #ecBtnArea ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8vw 2%;
  }

  /* 空白要素を非表示 */
  #ecBtnArea ul::before {
    display: none;
  }

  /* 3列表示 */
  #ecBtnArea ul li {
    width: 32%;
    min-height: 16vw;
  }

  /* ボタン内の調整 */
  #ecBtnArea ul li a {
    width: 100%;
    padding: 1vw;
    border-radius: 6px;
  }

  #ecBtnArea ul li a img {
    width: 95%;
    height: auto;
  }

  .copyAmazon {
    width: 100%;
    margin: 2vw auto 3vw !important;
    font-size: 11px;
    text-align: center;
  }


}

/* max-width:640px 終了 */




/* ===== 特長3 カルーセル ===== */

/* PCでは非表示 */
.feature-slider {
  display: none !important;
}

/* スマホのみ表示 */
@media screen and (max-width:640px) {

  .feature-slider {
    display: block !important;
    position: relative;
    width: 95%;
    margin: 0 auto 20px;
    overflow: hidden;
  }

  .feature-slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.4s ease;
  }

  .feature-slide {
    flex: 0 0 100%;
    min-width: 0;
  }

  .feature .feature-slider .feature-slide img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }

  /* 左右の矢印 */
  .feature-slider .slider-prev,
  .feature-slider .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #193e9b;
    border-radius: 50%;
    background: #fff;
    color: #193e9b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .feature-slider .slider-prev {
    left: 7%;
  }

  .feature-slider .slider-next {
    right: 7%;
  }

  /* ドット */
  .feature-slider .slider-dots {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
  }

  .feature-slider .slider-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid #193e9b;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }

  .feature-slider .slider-dots button.active {
    background: #193e9b;
  }
}

/* max-width:640px 終了 */