@charset "UTF-8";
/*----------------------------------------------------
  植物生まれ ブランドTOP
----------------------------------------------------*/
:root {
  scroll-behavior: auto;
}

.index {
  background-color: #fff;
}

/* メインビジュアル
----------------------------------------------------*/
.mv {
  background-color: var(--color-blue);
}

.mv__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ブランド訴求
----------------------------------------------------*/
.lead {
  text-align: center;
}

.lead__wave {
  position: relative;
  width: 100%;
  aspect-ratio: 390/72;
  overflow: visible;
}

.lead__wave__shape {
  display: block;
  width: 100%;
  height: auto;
}

.lead__wave__orange {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 300px;
  height: auto;
}
.lead__wave__orange img {
  width: 100%;
}

.lead__title {
  padding-block-start: 20px;
  padding-inline: 20px;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set28);
  line-height: 1.4;
}
.lead__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-block-start: 12px;
  background-image: radial-gradient(circle at center, #f7931e 1.4px, transparent 2px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.lead__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* お客様レビューカルーセル
----------------------------------------------------*/
.review {
  padding-block-start: 30px;
  padding-block-end: 20px;
  text-align: center;
}

.review__slider {
  position: relative;
  padding-inline: 20px;
  padding-block-start: 20px;
}

.review__label {
  width: -moz-fit-content;
  width: fit-content;
  white-space: pre;
  background-color: #fff;
  color: var(--color-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set15);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.review__card {
  padding-block: 20px;
  padding-inline: 28px;
  border: 1px solid #f0831e;
  border-radius: 10px;
  background-color: #fff;
  text-align: left;
  touch-action: auto;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.review__head {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
@media screen and (width > 750px) {
  .review__head {
    align-items: center;
  }
}

.review__thumb {
  flex: none;
  width: 77px;
  height: auto;
}

.review__product {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review__productName {
  color: #f0831e;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set18);
  line-height: 1.4;
}

.review__productLink {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-flow: row nowrap;
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
  color: #7d7d7d;
  font-size: var(--font-size-set14);
  text-decoration: none;
}
.review__productLink:hover {
  text-decoration: underline;
}

.review__productLink__arrow {
  vertical-align: middle;
}

.review__rating {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 24px;
}
.review__rating::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-image: radial-gradient(circle at center, #f7931e 1.4px, transparent 2px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.review__ratingHeadline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set18);
}

.review__ratingRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  -moz-column-gap: 24px;
       column-gap: 24px;
}

.review__ratingName {
  color: #7d7d7d;
  font-family: var(--font-body);
  font-size: var(--font-size-set14);
}

.review__star {
  color: #ffa100;
}
.review__star:not(.is-active) {
  color: #ddd;
}

.review__comment {
  margin-block-start: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-set14);
  line-height: 1.8;
  text-align: justify;
}

.review__caption {
  margin-block-start: 8px;
  color: #7d7d7d;
  font-size: var(--font-size-set12);
}

.review__prev,
.review__next {
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transform: translateY(-50%);
}
.review__prev::after,
.review__next::after {
  display: none;
}
.review__prev,
.review__next {
  background-image: url("/orange-n/assets/images/index/review-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.review__prev.swiper-button-disabled,
.review__next.swiper-button-disabled {
  opacity: 0.3;
}

.review__prev {
  left: 0;
  transform: translateY(-50%) scaleX(-1);
}

.review__next {
  right: 0;
}

/* お悩み訴求
----------------------------------------------------*/
.worry {
  padding-inline: 20px;
  padding-block-end: 40px;
  background-color: var(--color-yellow);
}

.worry__wave {
  margin-inline: -20px;
}
.worry__wave img {
  display: block;
  width: 100%;
  height: auto;
}

.worry__title {
  margin-block-start: 62px;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set28);
  line-height: 1.4;
  text-align: center;
}
.worry__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-inline: auto;
  margin-block-start: 10px;
  background-image: radial-gradient(circle at center, #f7931e 1.4px, transparent 2px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.worry__title__accent {
  color: var(--color-blue-accent);
}

.worry__body {
  margin-block-start: 20px;
}
@media screen and (width > 750px) {
  .worry__body {
    display: grid;
    grid-template-columns: 1fr 350px;
    align-items: center;
    gap: 20px;
  }
}

.worry__list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.worry__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  color: var(--color-green);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set16);
  line-height: 1.7;
}

.worry__item__icon {
  flex: none;
}

.worry__photos {
  max-width: 350px;
  margin-inline: auto;
  margin-block-start: 10px;
}
@media screen and (width > 750px) {
  .worry__photos {
    margin-block-start: 0;
  }
}
.worry__photos img {
  display: block;
  width: 100%;
  height: auto;
}

.worry__text {
  display: grid;
  row-gap: 8px;
  margin-block-start: 28px;
  font-family: var(--font-body);
  font-size: var(--font-size-set15);
  line-height: 1.9;
}

/* 植物生まれの秘密
----------------------------------------------------*/
.secret {
  display: grid;
  gap: 40px;
  margin-block-start: 28px;
  padding-block: 30px;
  padding-inline: 20px;
  border-radius: 12px;
  background-image: url("/orange-n/assets/images/index/secret-paper-texture.png");
  background-size: cover;
}

.secret__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.secret__logo {
  display: block;
  width: 200px;
  height: auto;
}

.secret__titleText {
  text-align: center;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set18);
  line-height: 1.6;
}
@media screen and (width > 750px) {
  .secret__titleText {
    display: block;
    width: calc(100% + 40px);
    margin-inline: -20px;
  }
}
.secret__titleText::after {
  content: "";
  display: block;
  width: 100%;
  margin-inline: auto;
  margin-block-start: 10px;
  border-bottom: 2px solid var(--color-orange);
}

.secret__block {
  display: grid;
  gap: 10px;
}

.secret__tag {
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 10px;
  border-radius: 6px;
  background-color: var(--color-orange);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set18);
}

.secret__text {
  color: #009fe8;
  font-family: var(--font-body);
  font-size: var(--font-size-set15);
  line-height: 1.8;
}

.secret__photo {
  max-width: 630px;
  margin-inline: auto;
  margin-block-start: 10px;
}
.secret__photo img {
  width: 100%;
}

/* 香りと成分
----------------------------------------------------*/
.scent {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  padding-inline: 20px;
  padding-block-end: 40px;
  text-align: center;
}
@media screen and (width > 750px) {
  .scent {
    padding-block-start: 120px;
  }
}
@media screen and (width <= 750px) {
  .scent {
    padding-block-start: 60px;
  }
}
.scent::before {
  content: "";
  position: absolute;
  inset-inline: -20px;
  top: 0;
  z-index: -2;
  aspect-ratio: 390/283;
  background-color: var(--color-yellow);
}

.scent__arch {
  position: absolute;
  inset-inline: -20px;
  top: 0;
  aspect-ratio: 390/296;
  z-index: -1;
  border-radius: 1000px 1000px 0 0;
  background-color: #fff;
  clip-path: inset(0 0 -100% 0 round 1000px 1000px 0 0);
}
.scent__arch img {
  position: absolute;
  left: -24.97%;
  top: -90%;
  width: 142.24%;
  height: 210.36%;
  max-width: none;
  opacity: 0.4;
}

.scent__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-block-end: 42px;
}

.scent__pendant {
  max-width: 165px;
  width: 30%;
  height: auto;
}
.scent__pendant img {
  width: 100%;
}

.scent__title {
  width: 100%;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set28);
  line-height: 1.4;
}
.scent__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-inline: auto;
  margin-block-start: 10px;
  background-image: radial-gradient(circle at center, #f7931e 1.4px, transparent 2px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.scent__title--topGap {
  margin-block-start: 20px;
}

.scent__title__accent {
  color: var(--color-blue-accent);
}

.scent__content {
  display: grid;
  row-gap: 20px;
}

.scent__text {
  font-family: var(--font-body);
  font-size: var(--font-size-set15);
  line-height: 1.8;
  text-align: left;
}

.scent__photos {
  position: relative;
  width: 100%;
  max-width: 710px;
  margin-inline: auto;
}

.scent__photos__kazari {
  position: absolute;
  z-index: 0;
  right: -45px;
  top: -25px;
  width: 100px;
  height: auto;
}

.scent__photos__photo {
  width: 100%;
}

.scent__ingredients {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.scent__ingredients img {
  width: 100%;
  height: auto;
}

/* ブランドストーリー
----------------------------------------------------*/
.story {
  padding-inline: 20px;
  background-color: var(--color-yellow);
  text-align: center;
}

.story__wave {
  position: relative;
  margin-inline: -20px;
}

.story__wave__shape {
  display: block;
  width: 100%;
  height: auto;
}

.story__wave__kazari {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 120px;
  width: 28%;
  height: auto;
}
.story__wave__kazari img {
  width: 100%;
}

.story__title {
  margin-block-start: 60px;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set26);
  line-height: 1.4;
}
.story__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-inline: auto;
  margin-block-start: 16px;
  background-image: radial-gradient(circle at center, #f7931e 1.4px, transparent 2px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.story__title__accent {
  color: var(--color-blue-accent);
  font-size: var(--font-size-set28);
}

.story__photo {
  margin-block-start: 12px;
  max-width: 359px;
  margin-inline: auto;
}
.story__photo img {
  width: 100%;
  height: auto;
}

.story__text {
  display: grid;
  row-gap: 8px;
  margin-block-start: 24px;
  font-family: var(--font-body);
  font-size: var(--font-size-set15);
  line-height: 1.9;
  text-align: left;
}

.story__band {
  margin-block-start: 32px;
  margin-inline: -20px;
}
.story__band img {
  width: 100%;
}

/* 製品一覧
----------------------------------------------------*/
.productList {
  background-color: #fff;
  padding: 20px;
  display: grid;
  row-gap: 40px;
}

.productList__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set28);
  line-height: 1.4;
  text-align: center;
}
.productList__title::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 350px;
  height: 3px;
  background-image: radial-gradient(circle at center, #f7931e 1.4px, transparent 2px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.productList__title__accent {
  color: var(--color-blue-accent);
}

.productList__list {
  display: grid;
  row-gap: 80px;
}

.productList__item__name {
  margin-inline: -20px;
  margin-block-end: 20px;
  padding-block: 10px;
  background-color: #d2ecf9;
  color: var(--color-blue-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set18);
  line-height: 1.7;
  text-align: center;
}