/* index.htmlでのみ使用するCSS */
@media (min-width:961px) {
  br.only-show-sp {
    display: none;
  }
}


hr {
  width: 80%;
  margin: 3rem;
}

#recommend-content {
  display: flex;
  gap: 2rem;
  padding: 0 5rem;
}

.greeting-p-box {
  padding: 0 6rem;
}

.recommend-section-content {
  display: flex;
  justify-content: space-around;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem !important;
}


.recommend-section-content>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.soap-col {
  max-width: 45%;
}

.recommend-content-text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.soap-img-box {
  aspect-ratio: 1/1;
}

.EC-buttons {
  display: flex;
  gap: 1rem;
}

.EC-link-like-btn {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3em;
  color: white;
  display: block;
  background-color: #904a88;
  font-size: 1.8rem;
  padding: 0.5rem 2.5rem;
  margin: 0.25rem;
  text-align: center;
  width: 500px;
}

.del-strikethrough {
  text-decoration: none;
}

/* メールオーダーギフトの画像を横スクロールにする。 */
.catalog-item {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  max-width: calc(100vw - 0.5rem);
  overflow-x: scroll;
  margin: 0.25rem 0;
  padding: 0.5rem 0;
}


.catalog-item .img-box picture {
  min-height: 10px;
  min-width: 10px;
}

.catalog-item:focus-visible {
  border: solid 1px rgb(150, 150, 150, 1) !important;
}

.catalog-item>.img-box {
  width: 1051px;
}

.catalog-item>p {
  width: 1051px;
  padding: 0 0.5rem;
}

.gift-lineup {
  padding: 0 0.5rem;
}

.gift-lineup>p {
  margin-bottom: 1rem;
}

.scrollable-notice {
  display: none;
}

.small-text {
  margin: 0 0.5rem;
}

@media (max-width: 1070px) {
  .scrollable-notice {
    display: block;
  }

  .catalog-item {
    border: solid 1px rgb(240, 240, 240, 1);
  }
}

/* 横スクロールが発生するとカタログ画像がビューポート外に出てしまうため、左寄せにする。 */
.catalog-item .img-box {
  justify-content: flex-start !important
}

@supports not (aspect-ratio: 1/1) {
  .soap-img-box {
    min-height: 330px;
  }
}

@media (max-width: 960px) {

  .reccomend-section-content {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .greeting-p-box {
    padding: 0 0.5rem;
  }

  .soap-col {
    width: 100%;
    max-width: initial;
  }

  .soap-bundle {
    flex-direction: column;
  }

  .EC-buttons {
    width: 100%;
    flex-direction: column;
  }

  .EC-link-like-btn {
    width: 100%;
    height: auto;
    font-size: 1.25rem;
    padding: 0.5rem 0.25rem;
  }

}

/* 会社概要 */

.company-info {
  margin-bottom: 2rem;
}

#information dl {
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 25px;
}

#information dl dt {
  position: relative;
  width: 28%;
  text-align: center;
  color: #000;
  font-weight: bold;
  background-color: #ecdfff;
  border: solid 1px #ffffff;
}

#information dl dt span {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#information dl dd {
  margin: 0;
  padding: 22px 30px;
  width: 72%;
  background-color: #fff;
  border: solid 1px #c8c8c8;
  font-size: 14px;
}

#information dl dd span {
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 26px;
  color: #904a88;
}

#information dl dd:first-of-type {
  padding: 0;
}

#information .g-map {
  width: 100%;
}


.loyal-customers {
  width: 100%;
  display: grid;
  justify-items: center;
  grid-template-columns: 50% 50%;
}

.mailordergift-content {
  margin-bottom: 0.5rem !important;
}

@media (max-width: 960px) {
  #recommend-content {
    flex-direction: column;
    padding: 0 0.5rem;
  }

  .loyal-customers {
    grid-template-columns: 100%;

  }
}

.buy-button {
  width: 800px !important;
}

@media (max-width: 960px) {
  .buy-button {
    width: 100% !important;
    font-size: 1.25rem;
    padding: 0.5rem 0.25rem;
  }
}

.loyal-customers-list-container {
  width: 80%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

@media (max-width:960px) {
  .loyal-customers-list-container {
    width: 50%;
  }
}

@media (max-width:600px) {
  .loyal-customers-list-container {
    width: 100%;
  }
}

.buy-button {
  width: 800px !important;
}

@media (max-width: 960px) {
  .buy-button {
    width: 100% !important;
    font-size: 1.25rem;
    padding: 0.5rem 0.25rem;
  }
}