@charset "UTF-8";
/*-----------------------------------------------
scroll-top.scss
----------------------------------------------- */
#scrollTopBtn {
  /* 初期状態では非表示 */
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 99;
  padding: 1rem;
  font-size: 0;
  color: #fff;
  cursor: pointer;
  visibility: hidden;
  background-color: #2d3c5a;
  border: none;
  border-radius: 50%;
  outline: none;
  opacity: 0;
  transition: all 0.3s;
}
#scrollTopBtn::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 13 13" fill="%23fff" xmlns="http://www.w3.org/2000/svg"><g><path d="M12.3599 3.95146C12.3042 3.8975 12.238 3.8547 12.1651 3.82549C12.0922 3.79628 12.0141 3.78125 11.9352 3.78125C11.8562 3.78125 11.7781 3.79628 11.7052 3.82549C11.6323 3.8547 11.5661 3.8975 11.5104 3.95146L6.53598 8.75665L1.56153 3.95146C1.44889 3.84267 1.29611 3.78155 1.1368 3.78155C0.977493 3.78155 0.82471 3.84267 0.712063 3.95146C0.599417 4.06024 0.536133 4.20779 0.536133 4.36164C0.536133 4.51549 0.599417 4.66304 0.712063 4.77183L6.11124 9.98604C6.16697 10.04 6.23317 10.0828 6.30605 10.112C6.37893 10.1412 6.45707 10.1562 6.53598 10.1562C6.61488 10.1562 6.69302 10.1412 6.7659 10.112C6.83878 10.0828 6.90498 10.04 6.96071 9.98604L12.3599 4.77183C12.4158 4.71801 12.4601 4.65408 12.4903 4.58369C12.5206 4.5133 12.5361 4.43785 12.5361 4.36164C12.5361 4.28544 12.5206 4.20998 12.4903 4.13959C12.4601 4.06921 12.4158 4.00527 12.3599 3.95146Z"/></g></svg>');
  transform: rotate(180deg);
}
#scrollTopBtn.active {
  visibility: visible;
  opacity: 1;
}

.contents-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  color: #371f20;
}
.contents-container::before {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -100;
  width: 100vw;
  height: 100vh;
  content: "";
  background-image: url("https://sleep.itembox.design/item/free-page/img/feature/mother/bg_sp.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .contents-container::before {
    background-image: url("https://sleep.itembox.design/item/free-page/img/feature/mother/bg_pc.jpg");
  }
}
.contents-container a:not(.c-button) {
  color: #371f20;
}
.contents-container a:hover {
  text-decoration: none;
}

.section {
  width: 100%;
  padding: clamp(7rem, 6.308rem + 3.077vw, 10rem) clamp(1rem, 0.769rem + 1.026vw, 2rem) 3rem;
}
@media screen and (min-width: 768px) {
  .section#ranking {
    padding-bottom: 7rem;
  }
}
.section__wrapper {
  max-width: 1024px;
  margin-inline: auto;
}
.section__heading {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-size: clamp(1.6rem, 1.392rem + 0.923vw, 2.5rem);
  font-weight: bold;
  color: rgb(86.6170212766, 31.3829787234, 33.8936170213);
  text-align: center;
}
.section__heading::before {
  position: absolute;
  top: -100%;
  left: 50%;
  z-index: -1;
  font-family: "Dancing Script";
  font-size: clamp(4rem, 3.308rem + 3.077vw, 7rem);
  font-weight: normal;
  line-height: 1;
  color: rgb(232.1276595745, 191.8723404255, 193.7021276596);
  white-space: pre;
  content: attr(data-en-title);
  transform: rotate(-5deg) translateX(-50%);
  transform-origin: center;
}
#ranking .section__heading::before {
  color: #cd7579;
  color: rgb(191.4361702128, 79.5638297872, 84.6489361702);
  opacity: 0.4;
}
.section__heading-sub {
  position: relative;
  z-index: 1;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
  font-size: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 3px solid #cd7579;
}
.section__heading-sub::after {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  z-index: 1;
  content: "";
  border: 1rem solid transparent;
  border-top: 1rem solid #cd7579;
  border-bottom: none;
  transform: translate(-50%, 0);
}
.section__heading-main {
  margin-top: 1rem;
}
.section__description {
  margin-top: 2rem;
  text-align: center;
}

.fv {
  background-repeat: no-repeat;
  background-position: bottom 30% right;
  background-size: cover;
}
.fv__title {
  margin: auto;
}
@media screen and (min-width: 768px) {
  .fv__title {
    background-size: contain;
  }
}

.event {
  padding-top: clamp(2rem, -1rem + 9.6vw, 5rem);
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.event__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3vw;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .event__container {
    grid-template-columns: repeat(2, 1fr);
    background-size: contain;
  }
}
.event__container > * {
  border: 1px solid #64748b;
}

.intro {
  padding-top: clamp(3rem, 1.846rem + 5.128vw, 8rem);
}
.intro__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__container {
  display: inherit;
  flex-direction: column;
  gap: 1rem;
  align-items: inherit;
  justify-content: inherit;
}
@media screen and (min-width: 768px) {
  .intro__container {
    text-align: center;
  }
}
.intro__heading {
  font-size: clamp(1.85rem, 1.654rem + 0.872vw, 2.7rem);
  font-weight: bold;
  line-height: 1.6;
  color: #cd7579;
  word-break: keep-all;
}
.intro__icon {
  position: relative;
}
.intro__icon img {
  width: auto;
  max-height: 5rem;
}
.intro__icon figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  color: transparent;
}
.intro__description {
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .intro__description {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
.intro__description strong {
  font-size: 1.5em;
  color: #cd7579;
}

.special {
  padding-top: clamp(2rem, 1.308rem + 3.077vw, 5rem);
  padding-bottom: clamp(5rem, 4.538rem + 2.051vw, 7rem);
  background-color: rgb(248.4042553191, 236.7957446809, 237.3234042553);
}
.special + .special {
  background-color: #fff;
}
.special__wrapper {
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  padding-top: clamp(1.5rem, 0.692rem + 3.59vw, 5rem);
}
@media screen and (min-width: 768px) {
  .special__wrapper + .special__wrapper {
    margin-top: 1.5rem;
  }
}
.special__container {
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  background-color: #fff;
  border-radius: 1.5rem;
  filter: drop-shadow(0 5px 16px rgba(205, 117, 121, 0.08));
}
#shipping .special__container {
  flex-direction: column-reverse;
}
@media screen and (min-width: 768px) {
  .special__container {
    flex-direction: row;
    width: calc(100% - 4rem);
  }
  #benefit .special__container {
    overflow: initial;
    transform: translateX(1rem);
  }
  #shipping .special__container {
    flex-direction: row;
  }
}
.special__image {
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 1.5rem 1.5rem;
}
#benefit .special__image {
  border-radius: 1.5rem 1.5rem 0 0;
}
@media screen and (min-width: 768px) {
  .special__image {
    max-width: 400px;
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #benefit .special__image {
    border-radius: 1rem;
    filter: drop-shadow(5px 5px 3px hsla(357.2727272727, 46.8085106383%, 113.137254902%, 0.16));
    transform: translate(-2rem, -1rem) scale(1.1) rotate(-5deg);
  }
}
.special__contents {
  position: relative;
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  padding: 2rem 1rem;
}
@media screen and (min-width: 768px) {
  .special__contents {
    padding: 2rem;
  }
}
.special__contents::before {
  position: absolute;
  top: -0.7em;
  left: 50%;
  font-family: "Dancing Script";
  font-size: 4em;
  line-height: 1;
  color: rgb(232.1276595745, 191.8723404255, 193.7021276596);
  white-space: pre;
  text-shadow: 0 0 15px #fff;
  content: attr(data-benefit-title);
  transform: translateX(-50%) rotate(-10deg);
}
@media screen and (min-width: 768px) {
  .special__contents::before {
    left: 0;
    filter: drop-shadow(0 0 20px #fff);
    transform: rotate(-10deg);
  }
}
.special__contents-title {
  font-size: clamp(1.2rem, 1.092rem + 0.482vw, 1.4rem);
  font-weight: bold;
  text-align: center;
  -webkit-text-decoration: underline dashed rgb(218.5638297872, 154.4361702128, 157.3510638298);
          text-decoration: underline dashed rgb(218.5638297872, 154.4361702128, 157.3510638298);
  text-underline-offset: 5px;
}
.special__contents-desc {
  margin-top: 1rem;
}
.special__contents-desc small {
  display: block;
  margin-top: 0.5rem;
}

.navigation {
  max-width: initial;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: rgb(248.4042553191, 236.7957446809, 237.3234042553);
}
.navigation .section__heading {
  gap: 0.5rem;
  align-items: center;
}
.navigation .section__heading::after {
  width: 64px;
  height: 64px;
  margin-bottom: -1rem;
  font-size: 1rem;
  content: "";
  background-image: url("https://sleep.itembox.design/item/free-page/img/feature/mother/carnation_clipping.png");
  background-size: cover;
}
.navigation-main .list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  justify-content: center;
  max-width: 1500px;
  margin: 3rem auto 0;
}
@media screen and (min-width: 768px) {
  .navigation-main .list {
    flex-direction: row;
  }
}
.navigation-main .list-item {
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 5px 8px rgba(49.1808510638, 17.8191489362, 19.2446808511, 0.16);
}
.navigation-main .list-item__contents {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 1.538rem + 2.051vw, 4rem) 0.5rem;
  font-weight: bold;
  text-align: center;
}
.navigation-main .list-item__contents::before, .navigation-main .list-item__contents::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.navigation-main .list-item__contents::before {
  z-index: -2;
  content: "";
  background-position: top 45% center;
  background-size: cover;
  transition: transform 0.3s 0.15s;
}
.navigation-main .list-item__contents::after {
  z-index: -1;
  background-color: rgba(245, 250, 255, 0.6);
  border-radius: 1rem;
  transition: background-color 0.3s;
}
@media (hover) {
  .navigation-main .list-item__contents:hover::before {
    transform: scale(1.1);
  }
  .navigation-main .list-item__contents:hover::after {
    background-color: rgba(245, 250, 255, 0.1);
    border: 2px solid #cd7579;
  }
}
.navigation-main .list-item__catchcopy {
  filter: drop-shadow(0 0 10px #fff);
}
.navigation-main .list-item__catchcopy::before {
  content: "【";
}
.navigation-main .list-item__catchcopy::after {
  content: "】";
}
.navigation-main .list-item__name {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 5px #fff);
}
.navigation-main .list-item:nth-of-type(1) .list-item__contents::before {
  background-image: url("https://sleep.itembox.design/item/free-page/img/feature/mother/nav_ranking.jpg");
}
.navigation-main .list-item:nth-of-type(2) .list-item__contents::before {
  background-image: url("https://sleep.itembox.design/item/free-page/img/feature/mother/nav_problem.jpg");
}
.navigation-main .list-item:nth-of-type(3) .list-item__contents::before {
  background-image: url("https://sleep.itembox.design/item/free-page/img/feature/mother/nav_set.jpg");
}
.navigation-sub .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0;
  margin: 3rem auto 0;
}
@media screen and (min-width: 768px) {
  .navigation-sub .list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1024px;
  }
}
.navigation-sub .list-item {
  width: 100%;
}
.navigation-sub .list-item:nth-of-type(even) {
  border-left: 1px solid #64748b;
}
@media screen and (min-width: 768px) {
  .navigation-sub .list-item {
    border-left: 1px solid #64748b;
  }
  .navigation-sub .list-item:last-of-type {
    border-right: 1px solid #64748b;
  }
}
.navigation-sub .list-item__contents {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
}
.navigation-sub .list-item__contents::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 13 13" fill="%23cd7579" xmlns="http://www.w3.org/2000/svg"><g><path d="M12.3599 3.95146C12.3042 3.8975 12.238 3.8547 12.1651 3.82549C12.0922 3.79628 12.0141 3.78125 11.9352 3.78125C11.8562 3.78125 11.7781 3.79628 11.7052 3.82549C11.6323 3.8547 11.5661 3.8975 11.5104 3.95146L6.53598 8.75665L1.56153 3.95146C1.44889 3.84267 1.29611 3.78155 1.1368 3.78155C0.977493 3.78155 0.82471 3.84267 0.712063 3.95146C0.599417 4.06024 0.536133 4.20779 0.536133 4.36164C0.536133 4.51549 0.599417 4.66304 0.712063 4.77183L6.11124 9.98604C6.16697 10.04 6.23317 10.0828 6.30605 10.112C6.37893 10.1412 6.45707 10.1562 6.53598 10.1562C6.61488 10.1562 6.69302 10.1412 6.7659 10.112C6.83878 10.0828 6.90498 10.04 6.96071 9.98604L12.3599 4.77183C12.4158 4.71801 12.4601 4.65408 12.4903 4.58369C12.5206 4.5133 12.5361 4.43785 12.5361 4.36164C12.5361 4.28544 12.5206 4.20998 12.4903 4.13959C12.4601 4.06921 12.4158 4.00527 12.3599 3.95146Z"/></g></svg>');
}
.navigation-sub .list-item__image {
  max-width: 80px;
}
.navigation-sub .list-item__catchcopy {
  font-size: 0.9em;
}
.navigation-sub .list-item__name {
  font-size: 1.1em;
  font-weight: bold;
}

.product#ranking {
  background-image: url("https://sleep.itembox.design/item/free-page/img/feature/keirou/contents-bg.jpg");
  background-size: cover;
}
.product__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 5vw, 5rem) clamp(0.5rem, 3vw, 1rem);
  margin: 3rem auto 0;
}
#ranking .product__list {
  gap: 3rem;
}
@media screen and (min-width: 768px) {
  .product__list {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1024px;
    margin-top: 2rem;
  }
  #ranking .product__list {
    gap: clamp(1rem, 5vw, 5rem) clamp(0.5rem, 3vw, 1rem);
  }
  #set .product__list {
    grid-template-columns: 1fr;
  }
}
#ranking .product__list-item:nth-of-type(1) .product__list-item__contents::before {
  content: "1";
}
#ranking .product__list-item:nth-of-type(2) .product__list-item__contents::before {
  content: "2";
}
#ranking .product__list-item:nth-of-type(3) .product__list-item__contents::before {
  content: "3";
}
#ranking .product__list-item:nth-of-type(1) .product__list-item__contents::before {
  background-color: rgb(215.4, 188.3803921569, 77.6);
}
#ranking .product__list-item:nth-of-type(2) .product__list-item__contents::before {
  background-color: rgb(199.125, 178.487745098, 93.875);
}
.product__list-item__contents {
  position: relative;
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 0.8rem;
  height: 100%;
  padding: 0.75rem 0.75rem 1rem;
  background-color: white;
  border: 1px solid rgb(232.1276595745, 191.8723404255, 193.7021276596);
  border-radius: 0.5rem;
  box-shadow: 0 5px 8px rgba(55, 31, 32, 0.1);
}
@media screen and (min-width: 768px) {
  .product__list-item__contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1rem;
  }
}
#ranking .product__list-item__contents {
  padding: clamp(1rem, 0.769rem + 1.026vw, 2rem);
}
#ranking .product__list-item__contents::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 3.5rem;
  height: 2.5rem;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 2;
  color: #fff;
  text-align: center;
  background-color: #aca279;
  -webkit-clip-path: polygon(0 15%, 20% 45%, 50% 0, 80% 45%, 100% 15%, 90% 100%, 10% 100%);
          clip-path: polygon(0 15%, 20% 45%, 50% 0, 80% 45%, 100% 15%, 90% 100%, 10% 100%);
  transform: translate(-50%, -60%);
}
.product__list-item__contents.no-link {
  pointer-events: none;
}
.product__list-item__image {
  grid-row: 2/3;
  grid-column: 1/2;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
  .product__list-item__image {
    flex-basis: revert;
  }
}
.product__list-item__text {
  display: flex;
  flex-direction: column;
  grid-row: 1/2;
  grid-column: 1/3;
  gap: 0.5rem;
}
#ranking .product__list-item__text {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .product__list-item__text {
    flex-basis: revert;
  }
}
.product__list-item__name {
  width: 100%;
  padding: 0.5rem 0;
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
  -webkit-text-decoration: underline dashed #cd7579;
          text-decoration: underline dashed #cd7579;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5rem;
}
@media screen and (min-width: 768px) {
  .product__list-item__name {
    position: initial;
  }
}
.product__list-item__description {
  grid-row: 2/3;
  grid-column: 2/3;
  font-size: 0.9em;
}
.product__list-item__description em {
  font-style: normal;
  color: #2d3c5a;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-color: #2d3c5a;
          text-decoration-color: #2d3c5a;
  text-underline-offset: 3px;
}
.product__list-item__description b {
  font-size: 1.2em;
  color: #ef4444;
}
.product__list-item__price {
  display: flex;
  grid-row: 3/4;
  grid-column: 1/3;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: auto;
  text-align: right;
}
.product__list-item__price-number {
  font-size: 1.25em;
  font-weight: bold;
  color: #cd7579;
}
.product__list-item__price-number::after {
  font-size: 0.8em;
  content: "円";
}
.product__list-item__price::before {
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: -0.01em;
  border: 1px solid #371f20;
  border-radius: 0.25rem;
}
.product__list-item__price.gift-item::before {
  color: #cd7579;
  content: "母の日ギフト対応";
  border: 1px solid #cd7579;
}
.product__list-item__price.shipping-free::before {
  content: "送料無料";
}
.product__list-item__price.next-day::before {
  content: "最短翌日お届け";
}
.product__list-item__price.sale {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.product__list-item__price.sale .product__list-item__price-rate {
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  background-color: #ef4444;
  border-radius: 0.25rem;
}
.product__list-item__price.sale .product__list-item__price-number {
  font-size: 1.5rem;
}
.product__list-item__price.sale .product__list-item__price-number::before {
  margin-right: 0.5rem;
  font-size: 0.72em;
  color: #371f20;
  text-decoration: line-through;
  content: attr(data-base-price) "円";
}
.product__list-item__link {
  grid-row: 4/5;
  grid-column: 1/3;
  padding-block: 0.5rem;
  margin: 0 auto;
  background-color: #cd7579;
}

#ranking .product__list-item__contents {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.most__title {
  width: 100%;
  padding: 0.8rem 0;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1;
  color: #cd7579;
  text-align: center;
  border-top: 1px solid rgb(161.4893617021, 58.5106382979, 63.1914893617);
  border-bottom: 1px solid rgb(161.4893617021, 58.5106382979, 63.1914893617);
}

.fs-c-buttonContainer {
  margin-top: 2.5rem;
}

#faq {
  background-color: rgb(242, 242, 242);
}/*# sourceMappingURL=mother.css.map */