@charset "UTF-8";

/**************************************************
** variable / utility
**************************************************/
:root {
  --color-web: #b3e2fc;
  --color-magazine: #b3e2fc;
  --color-text: #333;
  --font-size: 26;
}

/**************************************************
** common
**************************************************/
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a,
button {
  transition: 0.4s;
  cursor: pointer;
}

a:hover,
button:hover {
  opacity: 0.6;
}

.container {
  overflow: hidden;
  width: min(750px, 100%);
  margin: 0 auto;
  padding-top: 0;
  font-size: min(calc(var(--font-size) / 750 * 100vw), 26px);
}

.container img {
  width: 100%;
  height: auto;
  vertical-align: top;
  outline: none;
}

.container a:focus {
  outline: none;
}

.col-md-12 blockquote:first-of-type {
  padding: 0;
}

.popup .btn {
  height: 2em;
  border-color: #999;
  background: #fff;
  color: var(--color-text);
}

.popup .reco {
  margin-left: auto;
  margin-right: auto;
}

.reco-list {
  justify-content: center;
}

.reco-list__item {
  width: calc(50% - 0.5em);
}

.reco-list__item .product_cat {
  width: fit-content;
  padding: 0.25em 0.5em;
  margin-bottom: 0.5em;
  background-color: #9cb97b;
  border-radius: 0.4em;
  color: #fff;
}

.reco-list__item .product_name {
  font-size: 14px;
  font-weight: 400;
}

.reco-list__item .product_price {
  font-size: 12px;
}

.reco-list__item .btn-add {
  border: initial;
  background-color: #314223;
  font-size: 14px;
  color: #fff;
}

.reco-list__item .btn-add:hover {
  opacity: 0.6;
}

.reco-list__item .icon__wrapper {
  width: 1em;
  margin: 0.05em 0.5em 0 -0.5em;
  filter: invert(1);
}

.reco-list__item .icon__wrapper svg {
  width: 100%;
}

@media screen and (min-width: 751px) {
  .popup .reco {
    width: 336px;
  }

  .reco-list__item .product_name {
    font-size: 1rem;
  }

  .reco-list__item .product_price {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  .gift__name {
    font-size: 16px;
  }
}

/* カート追加時のローディング画面 */
.loading {
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: initial;
}

.loading__icon {
  filter: grayscale(1) brightness(2);
}

/**************************************************
** epo plus
**************************************************/
/* メインコンテンツ */
.l-main {
  padding: 0;
  font-feature-settings: "palt";
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  background-color: var(--color-web);
}

.l-main p {
  font-size: 1em;
  line-height: 1.6;
  color: var(--color-text);
}

/* 商品詳細モーダルスタイル */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  overflow-y: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: relative;
  max-width: 690px;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  display: none;
}

.modal-content.is-active { display: block }

.js-modal-footer {
  padding: clamp(30px, 8.7vw, 60px) 0;
}

.modal-content .btn-more {
  margin: 0 auto;
  padding: 0;
  width: 73.9%;
  display: block;
}

.datail-footer-cv-btn {
  margin: 0 auto clamp(13px, 3.62vw, 25px);
  padding: 0;
  width: 86%;
  display: block;
}

.btn-close {
  display: block;
  position: fixed;
  top: 0;
  right: 0.2em;
  padding: 0;
  font-size: 3em;
  font-weight: 300;
  color: #fff;
}

@media screen and (min-width: 751px) {
  .btn-close {
    right: calc(0.2em + 15px);
    font-size: 2em;
  }
}

.web-fv__content {
  position: relative;
}

/* Slider */
.web-slider {
  width: 84%;
  aspect-ratio: 630 / 360;
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
}
.web-slider .splide__pagination {
  bottom: calc(-46 / var(--font-size) * 1em);
}
.splide__pagination li:not(:first-child) {
  margin-left: min(calc(25 / var(--font-size) * 1em), 25px);
}
.splide__pagination__page {
  height: min(calc(16 / var(--font-size) * 1em), 16px);
  width: min(calc(16 / var(--font-size) * 1em), 16px);
  opacity: 1;
  background-color: #fff;
  border: 1px solid #9a9b99;
}
.splide__pagination__page.is-active {
  transform: scale(1);
  background-color: #314223;
  border: 1px solid #314223;
}

.web-content {
  padding: 0 clamp(15px, 4vw, 30px) clamp(30px, 8vw, 60px);
}

.web-section {
  margin: clamp(30px, 8vw, 60px) 0;
  overflow: hidden;
  border: clamp(2px, 0.53vw, 4px) solid #fff;
  border-radius: clamp(20px, 5.33vw, 40px);
  background-color: #fff;
}

.web-section__title {
  padding: clamp(15px, 4vw, 30px);
  font-family: "Noto Serif JP", serif;
  background-image: linear-gradient(to right, #108ccf, #68c9f2 34%, #108ccf);
  font-size: clamp(18px, 5vw, 38px);
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: #fff;
}

.web-section__inner {
  padding: clamp(25px, 6.66vw, 50px) clamp(13px, 3.46vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 6.66vw, 50px);
}

.cp-main-title {
  color: #333;
  font-size: clamp(16px, 4.26vw, 32px);
  font-weight: 700;
  text-align: center;
}

.cta {
  position: relative;
  display: block;
  width: 100%;
}

.cta__product {
  position: relative;
  width: 100%;
}

.cta-btn {
  margin: clamp(10px, 2vw, 15px) auto;
  display: block;
  width: 92.7%;
}

.more-btn {
  margin: 0 auto;
  display: block;
  width: 63.49%;
}

.cta-select-quantity-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 19.04%;
  height: auto;
  transform: translateY(-5%);
}

.cta-select-quantity-wrapper::after {
  content: '';
  display: block;
  right: clamp(12px, 2.4vw, 24px);
  width: clamp(10px, 2.67vw, 20px);
  height: auto;
  aspect-ratio: 20 / 14;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #999;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.cta-select-quantity {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 120 / 80;
  font-size: clamp(14px, 3.46vw, 26px);
  padding-left: clamp(13px, 3.33vw, 25px);
  border: clamp(2px, 0.4vw, 3px) solid #999;
  border-radius: clamp(5px, 1.33vw, 10px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*** .cp-guide ***/
.cp-guide {
  padding: 0 clamp(35px, 9.33vw, 70px);
  text-align: center;
  font-size: clamp(13px, 3.46vw, 26px);
  font-weight: 600;
  line-height: 1.6;
}

.cp-guide h2 {
  margin: 0 auto clamp(18px, 4.66vw, 35px);
  padding: clamp(8px, 2vw, 15px) clamp(17px, 4.66vw, 35px);
  background: #e84a70;
  border: initial;
  font-size: clamp(16px, 4.26vw, 32px);
  font-weight: 700;
  color: #fff;
}