/* ================================================
   ピーチピッグ セールページ専用CSS
   新商品の美白セット・ヘアケア製品が最大60％OFFセール
   ================================================ */

* {
  box-sizing: border-box !important;
}

ul {
  list-style: none !important;
}

body {
  font-family: "游ゴシック Medium",'Lato', 'Noto Sans JP', "YuGothic", "游ゴシック体", sans-serif !important;
  letter-spacing: 2px !important;
  width: 100% !important;
  background-color: white !important;
  margin: 0 auto !important;
}

.serif {
  font-family: "kinto-sans","arno-pro",'Noto Serif JP', serif !important;
}

a {
  text-decoration: none !important;
  color: inherit !important;
}

/* 状態ごとに色を固定する */
a:link,
a:visited,
a:hover,
a:active {
  color: inherit !important;
  text-decoration: none !important;
}

.only-sp {
  display: none !important;
}

.only-pc {
  display: block !important;
}

@media screen and (max-width: 600px) {
  .only-sp {
    display: block !important;
  }

  .only-pc {
    display: none !important;
  }
}

.fadein {
  -webkit-transition: all 0.55s linear !important;
  -o-transition: all 0.55s linear !important;
  transition: all 0.55s linear !important;
  opacity: 0 !important;
}

.fadein.active {
  opacity: 1 !important;
}

.fadein-left {
  -webkit-transition: all 0.35s linear !important;
  -o-transition: all 0.35s linear !important;
  transition: all 0.35s linear !important;
  -webkit-transform: translateX(-18px) !important;
  -moz-transform: translateX(-18px) !important;
  -ms-transform: translateX(-18px) !important;
  transform: translateX(-18px) !important;
  opacity: 0 !important;
}

.fadein-left.active {
  -webkit-transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* PC・スマホ共通：はみ出し防止 */
img, video, iframe {
  max-width: 100% !important;
  height: auto !important;
}

h1 {
  text-align: center !important;
  font-size: 18px !important;
  font-weight: normal !important;
  margin-top: 100px !important;
}

@media screen and (max-width: 600px) {
  h1 {
    text-align: center !important;
    font-size: 18px !important;
    font-weight: normal !important;
    margin-top: 20px !important;
  }
}

.top-detail {
  width: 80% !important;
  display: flex !important;
  text-align: center !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: normal !important;
  margin: 20px auto !important;
  padding: 10px !important;
  justify-content: center !important;
  line-height: 20px !important;
}

.top-banner {
  display: block !important;
  width: 80% !important;
  margin: 50px auto !important;
  text-align: center !important;
}

/* レシピ一覧のグリッド */
.recipe-grid {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
}

/* レシピカード */
.recipe-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  border: 1px solid #ddd !important;
  padding: 20px !important;
  text-align: center !important;
  font-size: 16px !important;
}

/* レシピカード上部（説明文・商品名・割引率） - 固定高さ */
.recipe-header {
  height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.waribiki {
  display: inline-block !important;
  font-family: "Montserrat", sans-serif !important;
  background-color: #EDE1E2 !important;
  font-size: 18px !important;
  letter-spacing: 5px !important;
  padding: 3px 15px !important;
  color: #554343 !important;
  margin: 10px auto !important;
}

.recipe-item img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  display: block !important;
  aspect-ratio: 8 / 6 !important;
  flex-shrink: 0 !important;
}

.title {
  text-align: center !important;
  margin: 0 auto 3px auto !important;
  font-size: 16px !important;
  letter-spacing: 3px !important;
  line-height: 1.3 !important;
}

.item-name {
  margin: 0 auto 5px auto !important;
  text-align: center !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
}

.detail {
  width: 80% !important;
  height: 150px !important;
  margin: 20px auto !important;
  text-align: left !important;
  font-size: 14px !important;
}

/* カート */
.addCart {
  background: transparent !important;
  color: #778899 !important;
  border: 1px solid #778899 !important;
  transition: all 0.3s ease !important;
  margin-left: 0 !important;
  letter-spacing: 5px !important;
  padding: 2px 5px !important;
  font-size: 12px !important;
}

.addCart:hover {
  background: #a9a9a9 !important;
  color: #fff !important;
  transform: translateX(2px) !important;
}

.price-cart {
  display: grid !important;
  grid-template-columns: 1fr 150px !important;
  gap: 10px 20px !important;
}

.price-list {
  display: contents !important;
}

.kakaku {
  text-align: left !important;
  margin-left: 40px !important;
  font-size: 14px !important;
  padding: 5px 0 0 0 !important;
}

/* アコーディオン */
.accordion-css {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 30px auto !important;
  border: 1px solid #ccc !important;
}

.accordion-css-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 15px 20px !important;
  background: #f5f5f5 !important;
  font-weight: bold !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 18px !important;
}

.accordion-css-header::-webkit-details-marker {
  display: none !important;
}

.accordion-icon {
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

.accordion-css[open] .accordion-icon {
  transform: rotate(180deg) !important;
}

.accordion-css-content {
  padding: 15px 20px !important;
  border-top: 1px solid #ccc !important;
  background: #fff !important;
  font-size: 16px !important;
}

.ul {
  text-align: left !important;
  margin-left: 0 !important;
  line-height: 10px !important;
}

@media screen and (max-width: 600px) {
  .accordion-css-content {
    padding: 15px 2px 15px 2px !important;
    border-top: 1px solid #ccc !important;
    background: #fff !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  .ul {
    text-align: left !important;
    margin-left: 0 !important;
  }
}

/* スマホ（600px以下）対応 */
@media screen and (max-width: 600px) {
  .top-banner {
    display: block !important;
    width: 95% !important;
    margin: 20px auto !important;
    text-align: center !important;
  }

  .top-detail {
    width: 90% !important;
    display: flex !important;
    text-align: center !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: normal !important;
    margin: 20px auto !important;
    padding: 10px !important;
    justify-content: center !important;
    line-height: 20px !important;
  }

  .recipe-grid {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    width: 95% !important;
    margin: 0 auto !important;
  }

  .recipe-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border: 1px solid #ddd !important;
    padding: 20px !important;
    text-align: center !important;
    font-size: 16px !important;
  }

  .recipe-item img {
    width: 100% !important;
    height: 250px !important;
    display: block !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* モバイル版：上部ヘッダーの高さも固定 */
  .recipe-header {
    height: 120px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .detail {
    width: 95% !important;
    height: 150px !important;
    margin: 20px auto !important;
    text-align: left !important;
    font-size: 15px !important;
  }

  .price-cart {
    grid-template-columns: 1fr !important;
  }

  .kakaku {
    text-align: center !important;
    margin: 0 auto !important;
  }

  .addCart {
    display: flex !important;
    justify-content: center !important;
    font-size: 10px !important;
    width: 50% !important;
    margin: 0 auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-weight: normal !important;
    text-align: center !important;
  }

  .addCart:hover {
    background-color: #e0e0e0 !important;
    color: #000000 !important;
    transform: translateX(2px) !important;
  }
}

/* プレゼント */
.present {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 50px auto !important;
  align-items: center !important;
  border: 1px solid #e0e0e0 !important;
  padding: 15px !important;
}

.present-6000 {
  width: 100% !important;
  z-index: 2 !important;
  position: relative !important;
  transform: translateX(50px) !important;
}

.present-pic {
  width: 100% !important;
  z-index: 0 !important;
  position: relative !important;
  transform: translateX(-80px) !important;
}

.present-title {
  font-size: 20px !important;
  font-weight: bold !important;
  margin: 10px 0 10px 30px !important;
}

.present-detail {
  font-size: 18px !important;
  margin: 10px auto !important;
  padding-left: 20px !important;
}

.present-name {
  font-size: 20px !important;
  padding: 15px !important;
  background-color: #A4B5C3 !important;
  color: white !important;
  margin: 15px !important;
  text-align: center !important;
}

.present-pic-link {
  width: 100% !important;
  display: block !important;
  z-index: 0 !important;
  position: relative !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* スマホ（600px以下）プレゼント対応 */
@media screen and (max-width: 600px) {
  .present {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 95% !important;
    margin: 50px auto !important;
    align-items: center !important;
  }

  .present-6000 {
    width: 100% !important;
    position: static !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .present-pic {
    width: 100% !important;
    position: static !important;
    transform: none !important;
  }

  .present-detail {
    width: 100% !important;
    font-size: 12px !important;
    margin: 10px auto !important;
    padding-left: 0 !important;
  }

  .present-title {
    width: 100% !important;
    font-size: 20px !important;
    font-weight: bold !important;
    margin: 5px auto !important;
  }

  .present-name {
    width: 100% !important;
    font-size: 20px !important;
    padding: 5% 0 !important;
    background-color: #A4B5C3 !important;
    color: white !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* トップに戻る */
@media screen and (max-width: 600px) {
  #page_top {
    width: 50px !important;
    height: 50px !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #3f98ef !important;
    opacity: 0.6 !important;
    border-radius: 50% !important;
  }

  #page_top a {
    position: relative !important;
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    text-decoration: none !important;
  }

  #page_top a::before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    content: '\f102' !important;
    font-size: 25px !important;
    color: #fff !important;
    position: absolute !important;
    width: 25px !important;
    height: 25px !important;
    top: -5px !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
    text-align: center !important;
  }
}

.line {
  display: inline-block !important;
  background: linear-gradient(transparent 60%, #fff59d 60%) !important;
}

.red,
.new {
  color: red !important;
  display: block !important;
  width: 90% !important;
  margin: 10px auto 10px !important;
  text-align: center !important;
}

.recipe {
  background-color: #D8D9E3 !important;
  padding: 10px !important;
  border: 1px solid #e0e0e0 !important;
  display: block !important;
  width: 70% !important;
  text-align: center !important;
  margin: 20px auto 0 !important;
}