@charset "UTF-8";
/*
 * 参考
 * https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/
/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
html {
  font-size: 16px;
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  color: #333;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

@media screen and (min-width: 768px) {
  a:hover {
    opacity: 0.8;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.c-btn--body {
  display: block;
  width: 100%;
  max-width: 20.625rem;
  aspect-ratio: 330/88;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 1600px) {
  .c-btn--body {
    max-width: 31.25rem;
  }
}
.c-btn--body:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.c-btn--mini {
  display: block;
  width: 100%;
  max-width: 20.625rem;
  aspect-ratio: 330/88;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 1600px) {
  .c-btn--mini {
    max-width: 31.25rem;
  }
}
.c-btn--mini:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.c-btn__point {
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 100%;
  max-width: 20.625rem;
  aspect-ratio: 330/126;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .c-btn__point {
    max-width: 25.25rem;
    aspect-ratio: 404/144;
  }
}
@media screen and (min-width: 1600px) {
  .c-btn__point {
    max-width: 31.25rem;
  }
}
.c-btn__point:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.c-btn--refill {
  display: block;
  width: 100%;
  max-width: 20.625rem;
  aspect-ratio: 330/88;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 1600px) {
  .c-btn--refill {
    max-width: 31.25rem;
  }
}
.c-btn--refill:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.c-btn--normal {
  display: block;
  width: 100%;
  max-width: 20.625rem;
  aspect-ratio: 330/94;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
  .c-btn--normal {
    max-width: 25.25rem;
    aspect-ratio: 404/102;
  }
}
@media screen and (min-width: 1600px) {
  .c-btn--normal {
    max-width: 31.25rem;
    aspect-ratio: 500/126;
  }
}
.c-btn--normal:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.c-btn--new {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 20.625rem;
  aspect-ratio: 330/94;
  text-decoration: none;
}
@media screen and (min-width: 1600px) {
  .c-btn--new {
    max-width: 31.25rem;
  }
}

.c-btn__content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding-right: 1.25rem;
  position: relative;
  z-index: 2;
}

.c-btn__spray {
  width: 1.75rem;
  height: 5.75rem;
  -o-object-fit: cover;
  object-fit: cover;
  margin-right: 0.5rem;
}

.c-btn__raku-container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}

.c-btn__raku {
  width: 2.9375rem;
  height: 0.8125rem;
  -o-object-fit: cover;
  object-fit: cover;
  margin-right: 0.25rem;
}

.c-btn__text {
  font-size: 0.875rem;
  color: #FEFEFE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  margin-left: -0.3125rem;
  letter-spacing: 0.05em;
}

.c-btn__arrow {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.1875rem;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 3;
}

.c-btn__btn2 {
  position: absolute;
  top: 17px;
  left: 0;
  z-index: 1;
}

.c-btn__btn2 img {
  width: 20.625rem;
  height: 3.9375rem;
  -o-object-fit: cover;
  object-fit: cover;
}

.c-btn__img {
  width: 100%;
  height: 100%;
}

.p-btn__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem 1.25rem;
}

.p-dog {
  position: relative;
}

.p-dog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  background-image: url(../images/common/product-bg-sp.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  aspect-ratio: 432/288;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-dog::before {
    background-image: url(../images/common/product-bg-pc.jpg);
    aspect-ratio: 1440/1044;
  }
}

.p-dog__inner {
  max-width: 46.875rem;
  width: 100%;
  margin-inline: auto;
  padding-block: 5rem;
  padding-inline: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-dog__inner {
    max-width: 50.625rem;
    padding-block: 10.625rem;
    padding-inline: 0rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-dog__inner {
    max-width: 56.25rem;
  }
}

.p-dog__head {
  text-align: center;
  overflow: visible;
  padding-inline: 3.125rem;
}

.p-dog__lead {
  position: relative;
  font-size: 1.25rem;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #726745;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 400px) {
  .p-dog__lead {
    font-size: 1.375rem;
  }
}
@media screen and (min-width: 768px) {
  .p-dog__lead {
    font-size: 2rem;
  }
}

.p-dog__lead::before {
  content: "";
  position: absolute;
  bottom: 0.3125rem;
  left: -1.875rem;
  width: 1.3125rem;
  height: 1.3125rem;
  background-image: url("../images/common/line-left.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (min-width: 768px) {
  .p-dog__lead::before {
    width: 2.15625rem;
    height: 2.0625rem;
    left: -3.125rem;
    bottom: 0rem;
  }
}

.p-dog__lead::after {
  content: "";
  position: absolute;
  bottom: 0.3125rem;
  right: -1.875rem;
  width: 1.375rem;
  height: 1.375rem;
  background-image: url("../images/common/line-right.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (min-width: 768px) {
  .p-dog__lead::after {
    width: 2.15625rem;
    height: 2.0625rem;
    right: -3.125rem;
    bottom: 0rem;
  }
}

.p-dog__title {
  margin-top: 0.25rem;
  font-size: 1.25rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  display: block;
}
@media screen and (min-width: 768px) {
  .p-dog__title {
    font-size: 1.75rem;
  }
}

.p-dog__titleAccent {
  position: relative;
  padding-inline: 0.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  color: #726745;
}
@media screen and (min-width: 400px) {
  .p-dog__titleAccent {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 768px) {
  .p-dog__titleAccent {
    font-size: 2.375rem;
  }
}

.p-dog__titleAccent::after {
  content: "";
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  bottom: -0.8125rem;
  height: 55%;
  background: #F6FF8E;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-dog__titleAccent::after {
    bottom: -1.375rem;
    height: 55%;
  }
}

.p-dog__list {
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-dog__list {
    margin-top: 5.625rem;
  }
}

.p-dog__item {
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-dog__item {
    margin-top: 3.5rem;
  }
}

.p-dog__itemHead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.p-dog__label {
  background-color: #E0EBD3;
  font-size: 0.875rem;
  font-family: "Zen Maru Gothic", sans-serif;
  border-radius: 6.1875rem;
  padding: 0.25rem 0.75rem;
  color: #726745;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .p-dog__label {
    font-size: 1rem;
  }
}

.p-dog__labelNumber {
  font-weight: bold;
}

.p-dog__name {
  font-size: 1rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .p-dog__name {
    font-size: 1.125rem;
  }
}

.p-dog__imageWrap {
  text-align: center;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-dog__imageWrap.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.p-dog__image {
  display: inline-block;
  width: 100%;
}

.p-dog__image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 370/238;
}
@media screen and (min-width: 768px) {
  .p-dog__image img {
    aspect-ratio: 810/316;
  }
}

.p-dog__caption {
  font-size: 0.5rem;
  font-family: "Fredoka", sans-serif;
  color: #726745;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .p-dog__caption {
    font-size: 0.875rem;
  }
}

.p-dog__buttonWrap {
  margin-top: 1.25rem;
  text-align: center;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-dog__buttonWrap.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-dog__buttonWrap {
    margin-top: 3rem;
  }
}

.p-features {
  position: relative;
  min-height: 48.3125rem;
  overflow-x: visible;
  overflow-y: hidden;
  width: 100%;
  margin-top: 4.875rem;
  padding-bottom: 4.875rem;
}
@media screen and (min-width: 768px) {
  .p-features {
    margin-top: 10rem;
    min-height: 31.25rem;
    overflow: visible;
    padding-top: 2.5rem;
    padding-bottom: 10rem;
  }
}

.p-features::before {
  content: "";
  position: absolute;
  top: 3.125rem;
  left: 0;
  width: 100%;
  height: calc(100% - 3.125rem);
  background-image: url("../images/common/features-bg-sp.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-features::before {
    background-image: url("../images/common/features-bg-pc.jpg");
  }
}

.p-features__container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 9.375rem;
}
@media screen and (min-width: 400px) {
  .p-features__container {
    padding-left: 1.6875rem;
    padding-right: 1.6875rem;
  }
}
@media screen and (min-width: 768px) {
  .p-features__container {
    max-width: 65.3125rem;
    width: 100%;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__container {
    max-width: 75rem;
    width: 100%;
  }
}

.p-features__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
  .p-features__content {
    max-width: 58.3125rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__content {
    max-width: 66.9375rem;
  }
}

.p-features__contentWrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
  .p-features__contentWrapper {
    max-width: 65.3125rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__contentWrapper {
    max-width: 75rem;
  }
}

.p-features__contentWrapper::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 25.4vw;
  height: 24.6vw;
  background-image: url("../images/common/features-s.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  bottom: -31%;
  right: -0.25rem;
  transform: translateY(-50%) translateX(0.625rem);
  margin-top: -0.625rem;
}
@media screen and (min-width: 768px) {
  .p-features__contentWrapper::before {
    width: 16.6vw;
    height: 16.2vw;
    bottom: -37%;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__contentWrapper::before {
    width: 12.45vw;
    height: 12.15vw;
    bottom: -43%;
  }
}

.p-features__imageContainer {
  position: relative;
  z-index: 3;
  width: 62.1vw;
  height: 52.3vw;
  order: 1;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-features__imageContainer {
    width: 40.7vw;
    height: 34.3vw;
    order: 2;
    flex-shrink: 0;
    gap: 0.9375rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__imageContainer {
    width: 30.7vw;
    height: 25.8vw;
  }
}

.p-features__mainImage {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: -6.875rem;
  margin-left: -3.125rem;
  transform: translateX(0.625rem);
}
@media screen and (min-width: 768px) {
  .p-features__mainImage {
    margin-left: -6.25rem;
    margin-top: -18.125rem;
  }
}

.p-features__mainPicture {
  width: 100%;
  height: 100%;
}

.p-features__mainImg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-features__titleSection {
  position: relative;
  z-index: 4;
  order: 2;
  margin-bottom: 0.625rem;
  margin-top: -8.5rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-10px, 0);
  transition: all 1.5s;
}
.p-features__titleSection.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-features__titleSection {
    order: 1;
    margin-top: -3.125rem;
    margin-bottom: 0;
    margin-right: -15.625rem;
  }
}

.p-features__subtitle {
  font-family: "Fredoka", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #5BBC56;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-features__subtitle {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
}

.p-features__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .p-features__title {
    font-size: 2.375rem;
    letter-spacing: 0.2em;
  }
}

.p-features__titleText {
  color: #726745;
  display: inline-block;
  padding: 0.1875rem 0rem 0.1875rem 0.375rem;
  background: #FEFEFE;
  margin-bottom: 0.9375rem;
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .p-features__titleText {
    padding: 0.25rem 0rem 0.25rem 0.5rem;
  }
}

.p-features__titleLine {
  display: inline-block;
}

.p-features__titleHighlight {
  padding: 0.25rem 0.5rem 0.25rem 0;
  background: #FEFEFE;
  color: #5BBC56;
  display: inline-block;
  margin-left: 0;
}

.p-features__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  width: 100%;
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-features__cards {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    margin-top: -1.5rem;
    align-items: center;
  }
}

.p-features__row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 400px) {
  .p-features__row {
    gap: 0rem;
  }
}
@media screen and (min-width: 768px) {
  .p-features__row {
    flex-direction: row;
    gap: 1.25rem;
  }
}

@media screen and (min-width: 768px) {
  .p-features__row--right {
    margin-left: auto;
    gap: 0.5625rem;
  }
}

@media screen and (min-width: 768px) {
  .p-features__row--left {
    margin-right: auto;
  }
}

@media screen and (min-width: 768px) {
  .p-features__row--right {
    margin-left: auto;
  }
}

.p-features__card {
  padding: 0.625rem;
  position: relative;
  min-height: 6.25rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-features__card.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-features__card {
    padding: 1rem;
    min-height: 8.75rem;
  }
}

.p-features__card--01 {
  background-image: url("../images/common/features-card1.png");
  width: 12.9375rem;
  height: 8.8125rem;
}
@media screen and (min-width: 768px) {
  .p-features__card--01 {
    width: 17.6875rem;
    height: 12.0625rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__card--01 {
    width: 21.25rem;
    height: 14.5rem;
  }
}

.p-features__card--02 {
  background-image: url("../images/common/features-card2.png");
  width: 12.625rem;
  height: 8.8125rem;
  margin-left: auto;
  margin-top: -1.875rem;
}
@media screen and (min-width: 768px) {
  .p-features__card--02 {
    width: 17.25rem;
    height: 12rem;
    margin-top: -1.25rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__card--02 {
    width: 20.6875rem;
    height: 14.375rem;
  }
}

.p-features__card--03 {
  background-image: url("../images/common/features-card3.png");
  width: 14.0625rem;
  height: 9.5625rem;
  margin-top: -0.625rem;
  padding-top: 1.125rem;
}
@media screen and (min-width: 400px) {
  .p-features__card--03 {
    margin-top: -1.5625rem;
  }
}
@media screen and (min-width: 768px) {
  .p-features__card--03 {
    margin-top: -0.3125rem;
    width: 19.25rem;
    height: 13.0625rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__card--03 {
    width: 23.125rem;
    height: 15.6875rem;
  }
}

.p-features__card--04 {
  background-image: url("../images/common/features-card4.png");
  width: 13.6875rem;
  height: 8.8125rem;
  margin-left: auto;
  margin-top: -1.25rem;
}
@media screen and (min-width: 768px) {
  .p-features__card--04 {
    margin-top: -1.875rem;
    width: 19.25rem;
    height: 12.0625rem;
    margin-top: -2.1875rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__card--04 {
    width: 23.125rem;
    height: 14.5rem;
  }
}

.p-features__cardNumber {
  margin-bottom: 0.5rem;
  background: #E0EBD3;
  display: inline-block;
  text-align: center;
  padding: 0.75rem 0.9375rem;
  border-radius: 0.375rem;
  line-height: 0;
  border-radius: 50%;
  position: absolute;
  width: 3.5625rem;
  height: 3.5625rem;
  top: -1.875rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .p-features__cardNumber {
    top: -3.75rem;
    width: 5.8125rem;
    height: 5.8125rem;
    margin-bottom: 0.75rem;
    padding: 1.125rem 1.5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__cardNumber {
    width: 6.5625rem;
    height: 6.5625rem;
    padding: 1.25rem 1.625rem;
  }
}

.p-features__cardLabel {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #5BBC56;
  display: block;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .p-features__cardLabel {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__cardLabel {
    font-size: 1.125rem;
  }
}

.p-features__cardNumberText {
  font-family: "Fredoka", sans-serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #5BBC56;
  display: block;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .p-features__cardNumberText {
    font-size: 2.25rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__cardNumberText {
    font-size: 2.5rem;
  }
}

.p-features__cardContent {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  color: #726745;
}
@media screen and (min-width: 768px) {
  .p-features__cardContent {
    font-size: 1.0625rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__cardContent {
    font-size: 1.1875rem;
  }
}

.p-features__cardText {
  margin: 0;
  text-align: center;
  padding-top: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-features__cardText {
    padding-top: 2.4375rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__cardText {
    padding-top: 3.4375rem;
  }
}

@media screen and (min-width: 768px) {
  .p-features__card--03 .p-features__cardText {
    padding-top: 2.75rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__card--03 .p-features__cardText {
    padding-top: 3.375rem;
  }
}

.p-features__cardHighlight {
  color: #5BBC56;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-features__cardHighlight {
    font-size: 1.0625rem;
  }
}

.p-features__cardBold {
  font-weight: 700;
}

.p-features__cardNote {
  font-size: 0.75rem;
  font-weight: 400;
  color: #726745;
}
@media screen and (min-width: 768px) {
  .p-features__cardNote {
    font-size: 0.875rem;
  }
}

.p-features__card--01 .p-features__cardContent {
  font-size: 0.875rem;
  position: relative;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .p-features__card--01 .p-features__cardContent {
    font-size: 1rem;
  }
}

.p-features__card--01 .p-features__cardHighlight {
  color: #5BBC56;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-features__card--01 .p-features__cardHighlight {
    font-size: 1.0625rem;
  }
}

.p-features__card--02 .p-features__cardHighlight {
  color: #5BBC56;
  font-weight: 700;
}

.p-features__card--03 .p-features__cardHighlight {
  color: #5BBC56;
  font-weight: 700;
}

.p-features__card--04 .p-features__cardContent {
  color: #726745;
}

.p-features__ingredients {
  padding-bottom: 1.6875rem;
  margin-top: 3.125rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-features__ingredients {
    max-width: 65.3125rem;
    width: 100%;
    margin-top: 5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features__ingredients {
    max-width: 75rem;
  }
}

.p-features__ingredientsContainer {
  margin: 0 auto;
  background-color: #E0EBD3;
  border-radius: 1.25rem;
  padding-block: 1.875rem;
  padding-inline: 2.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsContainer {
    padding-inline: 3.75rem;
    margin-inline: auto;
    padding-top: 3.75rem;
    padding-bottom: 5rem;
  }
}

.p-features__ingredientsTitleWrap {
  position: relative;
  text-align: center;
  margin-bottom: 1.25rem;
  display: inline-block;
  padding-inline: 2.0625rem;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsTitleWrap {
    padding-inline: 2.5625rem;
    margin-bottom: 1.5625rem;
  }
}

.p-features__ingredientsTitleWrap::before,
.p-features__ingredientsTitleWrap::after {
  content: "";
  width: 1.25rem;
  height: 100%;
  position: absolute;
  top: 0;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsTitleWrap::before,
  .p-features__ingredientsTitleWrap::after {
    width: 1.875rem;
  }
}

.p-features__ingredientsTitleWrap::before {
  border-left: solid 0.125rem #5BBC56;
  border-top: solid 0.125rem #5BBC56;
  border-bottom: solid 0.125rem #5BBC56;
  left: 0;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsTitleWrap::before {
    border-left: solid 0.21875rem #5BBC56;
    border-top: solid 0.21875rem #5BBC56;
    border-bottom: solid 0.21875rem #5BBC56;
  }
}

.p-features__ingredientsTitleWrap::after {
  border-right: solid 0.125rem #5BBC56;
  border-top: solid 0.125rem #5BBC56;
  border-bottom: solid 0.125rem #5BBC56;
  right: 0;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsTitleWrap::after {
    border-right: solid 0.21875rem #5BBC56;
    border-top: solid 0.21875rem #5BBC56;
    border-bottom: solid 0.21875rem #5BBC56;
  }
}

.p-features__ingredientsTitle {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #5BBC56;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsTitle {
    font-size: 2rem;
  }
}

.p-features__ingredientsSubtitle {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #726745;
  text-align: center;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsSubtitle {
    font-size: 1.125rem;
  }
}

.p-features__ingredientsGrid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsGrid {
    row-gap: 1.25rem;
  }
}

.p-features__ingredientsItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: calc(50% - 0.625rem);
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsItem {
    flex: 1;
    min-width: calc(25% - 0.9375rem);
    padding: 1.25rem 0.9375rem;
  }
}

.p-features__ingredientsTextContent {
  line-height: 1;
}

.p-features__ingredientsImageWrap {
  width: 6.375rem;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsImageWrap {
    width: 11.25rem;
    height: auto;
    margin-bottom: 0.9375rem;
  }
}

.p-features__ingredientsImage {
  width: 100%;
  height: 100%;
}

.p-features__ingredientsName {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #453E2B;
  margin-bottom: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsName {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
  }
}

.p-features__ingredientsDescription {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #453E2B;
}
@media screen and (min-width: 768px) {
  .p-features__ingredientsDescription {
    font-size: 0.9375rem;
  }
}

.p-features-qa {
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1.875rem;
  max-width: 50rem;
  overflow-x: visible;
}
@media screen and (min-width: 768px) {
  .p-features-qa {
    overflow-x: hidden;
  }
}
@media screen and (min-width: 1200px) {
  .p-features-qa {
    padding-inline: 0;
  }
}
@media screen and (min-width: 1600px) {
  .p-features-qa {
    max-width: 58.125rem;
  }
}

.p-features-qa__container {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-features-qa__container {
    padding: 0;
  }
}

.p-features-qa__title {
  font-family: "Fredoka", sans-serif;
  font-size: 3.25rem;
  font-weight: 400;
  color: #E0EBD3;
  text-align: left;
  letter-spacing: 0.1em;
  display: block;
  line-height: 1;
  margin-left: -1.875rem;
  padding-left: 0;
  margin-bottom: -0.375rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-features-qa__title {
    font-size: 5rem;
    margin-bottom: -0.625rem;
    margin-left: 0rem;
  }
}

.p-features-qa__accordion {
  margin: 0 auto;
  margin-top: -0.25rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-features-qa__accordion {
    width: 50.625rem;
    max-width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  .p-features-qa__accordion {
    width: 58.125rem;
  }
}

.p-features-qa__item {
  margin-bottom: 1.25rem;
  border: 2px solid #5BBC56;
  border-radius: 1.5625rem;
  overflow: hidden;
}
.p-features-qa__item:last-child {
  margin-bottom: 0;
}

.p-features-qa__question {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.p-features-qa__questionLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5625rem;
  height: 1.5625rem;
  background-color: #5BBC56;
  color: #FEFEFE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  margin-right: 0.75rem;
  flex-shrink: 0;
  line-height: 1;
  padding-bottom: 0.125rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa__questionLabel {
    width: 2.5625rem;
    height: 2.5625rem;
    font-size: 1.375rem;
    padding-bottom: 0.25rem;
  }
}

.p-features-qa__questionText {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #5BBC56;
  letter-spacing: 0.06em;
  flex: 1;
}
@media screen and (min-width: 768px) {
  .p-features-qa__questionText {
    font-size: 1.0625rem;
  }
}

.p-features-qa__arrow {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: translateX(0.3125rem);
}

.p-features-qa__arrowImg {
  width: 1rem;
  height: 1rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.p-features-qa__arrowImg {
  content: url("../images/common/arrow-up.svg");
  transform: rotate(180deg);
}

.js-accordion-title.open .p-features-qa__arrowImg {
  transform: rotate(0deg);
}

.p-features-qa__answer {
  display: none;
  padding: 1.25rem;
  position: relative;
}

.p-features-qa__answer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  border-top: 1px dashed #453E2B;
}

.p-features-qa__answerContent {
  display: flex;
  align-items: flex-start;
}

.p-features-qa__answerLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5625rem;
  height: 1.5625rem;
  background-color: #C49A2F;
  color: #FEFEFE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  margin-right: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  line-height: 1;
  padding-bottom: 0.125rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa__answerLabel {
    font-size: 1.375rem;
    width: 2.5625rem;
    height: 2.5625rem;
    padding-bottom: 0.25rem;
  }
}

.p-features-qa__answerText {
  flex: 1;
}

.p-features-qa__answerMain {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #453E2B;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding-top: 0.375rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa__answerMain {
    font-size: 1.0625rem;
  }
}

.p-features-qa__answerNote {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  color: #453E2B;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .p-features-qa__answerNote {
    font-size: 0.875rem;
  }
}

.p-features-qa-last {
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1.875rem;
  max-width: 50rem;
  overflow-x: visible;
  padding-top: 6.25rem;
  padding-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last {
    padding-inline: 0rem;
    padding-top: 10rem;
    overflow-x: hidden;
    padding-bottom: 10rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-features-qa-last {
    max-width: 50.625rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-features-qa-last {
    max-width: 58.125rem;
  }
}

.p-features-qa-last__container {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__container {
    padding: 0;
  }
}

.p-qa-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #726745;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: -16%;
  left: 0%;
  z-index: 2;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-qa-title {
    font-size: 2rem;
  }
}

.p-features-qa-last__titleContainer {
  position: relative;
  text-align: center;
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__titleContainer {
    margin-bottom: 2.5rem;
  }
}

.p-features-qa-last__title {
  font-family: "Fredoka", sans-serif;
  font-size: 3.25rem;
  font-weight: 400;
  color: #E0EBD3;
  text-align: left;
  letter-spacing: 0.1em;
  display: block;
  line-height: 1;
  margin-left: -1.875rem;
  padding-left: 0;
  margin-bottom: -1.75rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__title {
    font-size: 5rem;
    margin-bottom: -3.125rem;
    margin-left: 0rem;
  }
}

.p-features-qa-last__accordion {
  margin: 0 auto;
  margin-top: -0.25rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__accordion {
    width: 50.625rem;
    max-width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  .p-features-qa-last__accordion {
    width: 58.125rem;
  }
}

.p-features-qa-last__item {
  margin-bottom: 1.25rem;
  border: 2px solid #5BBC56;
  border-radius: 1.5625rem;
  overflow: hidden;
}
.p-features-qa-last__item:last-child {
  margin-bottom: 0;
}

.p-features-qa-last__question {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.p-features-qa-last__questionLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5625rem;
  height: 1.5625rem;
  background-color: #5BBC56;
  color: #FEFEFE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__questionLabel {
    width: 2.5625rem;
    height: 2.5625rem;
    font-size: 1.375rem;
    padding-bottom: 0.125rem;
  }
}

.p-features-qa-last__questionText {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #5BBC56;
  letter-spacing: 0.06em;
  flex: 1;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__questionText {
    font-size: 1.0625rem;
  }
}

.p-features-qa-last__arrow {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: translateX(0.3125rem);
}

.p-features-qa-last__arrowImg {
  width: 1rem;
  height: 1rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.p-features-qa-last__arrowImg {
  content: url("../images/common/arrow-up.svg");
  transform: rotate(180deg);
}

.js-accordion-title.open .p-features-qa-last__arrowImg {
  transform: rotate(0deg);
}

.p-features-qa-last__answer {
  display: none;
  padding: 1.25rem;
  position: relative;
}

.p-features-qa-last__answer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  border-top: 1px dashed #453E2B;
}

.p-features-qa-last__answerContent {
  display: flex;
  align-items: flex-start;
}

.p-features-qa-last__answerLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5625rem;
  height: 1.5625rem;
  background-color: #C49A2F;
  color: #FEFEFE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__answerLabel {
    width: 2.5625rem;
    height: 2.5625rem;
    font-size: 1.375rem;
    padding-bottom: 0.25rem;
  }
}

.p-features-qa-last__answerText {
  flex: 1;
}

.p-features-qa-last__answerMain {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #453E2B;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding-top: 0.375rem;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__answerMain {
    font-size: 1.0625rem;
  }
}

.p-features-qa-last__answerNote {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  color: #453E2B;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .p-features-qa-last__answerNote {
    font-size: 0.875rem;
  }
}

.p-flow {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}
@media screen and (min-width: 768px) {
  .p-flow {
    background-color: #2E2E2E;
  }
}

.p-flow::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-flow::before {
    background: linear-gradient(to top, #2E2E2E 0%, transparent 100%);
  }
}

.p-flow.is-active {
  transform: translateY(0);
}

.p-flow__container {
  max-width: 35rem;
  margin-inline: auto;
  aspect-ratio: 560/119;
  position: relative;
}

.p-flow__button {
  display: block;
  width: 100%;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 0;
}

.p-flow__button:hover {
  transform: translateY(-0.25rem);
}

@keyframes gentle-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-0.3125rem);
  }
  60% {
    transform: translateY(-0.125rem);
  }
}
.p-flow__picture {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  animation: gentle-bounce 2.8s ease-in-out infinite;
}

.p-flow__img {
  display: block;
  width: 100%;
  height: auto;
}

.p-footer {
  background-color: #453E2B;
  padding-top: 2.5rem;
  padding-bottom: 7.5rem;
}
@media screen and (min-width: 768px) {
  .p-footer {
    padding-bottom: 8.75rem;
    padding-top: 5rem;
  }
}

.p-footer__container {
  max-width: 50.625rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.p-footer__content {
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-footer__content {
    margin-bottom: 1.875rem;
  }
}

.p-footer__logo {
  margin-bottom: 1.875rem;
}

.p-footer__logoImg {
  width: 4rem;
  height: 4rem;
  aspect-ratio: 105/106;
}
@media screen and (min-width: 768px) {
  .p-footer__logoImg {
    width: 6.5625rem;
    height: 6.625rem;
  }
}

.p-footer__links {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  line-height: 0.5;
}
@media screen and (min-width: 768px) {
  .p-footer__links {
    font-size: 1.1875rem;
  }
}

.p-footer__link {
  display: block;
  color: #FEFEFE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
  margin-top: 0.9375rem;
  padding-bottom: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-footer__link {
    font-size: 1.1875rem;
  }
}

.p-footer__link:first-child {
  margin-top: 0;
}

.p-footer__link:hover {
  opacity: 0.7;
}

.p-footer__copyrightContent {
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-footer__copyrightContent {
    text-align: center;
  }
}

.p-footer__copyrightText {
  color: #FEFEFE;
  font-family: "Fredoka", sans-serif;
  font-size: 0.625rem;
  line-height: 1.4;
  margin: 0;
  margin-top: 0.3125rem;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .p-footer__copyrightText {
    font-size: 0.875rem;
  }
}

.p-footer__copyrightText:first-child {
  margin-top: 0;
}

.p-gallery {
  background-color: #F8F8F8;
}

.p-gallery__container {
  width: 100%;
}

.p-gallery__image {
  width: 100%;
  margin-bottom: 1.625rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-gallery__image {
    margin-bottom: -2.375rem;
  }
}

.p-gallery__picture {
  display: block;
  width: 100%;
}

.p-gallery__img {
  width: 100%;
  height: auto;
  aspect-ratio: 430/309;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: bottom;
}
@media screen and (min-width: 768px) {
  .p-gallery__img {
    aspect-ratio: 1440/460;
  }
}

.p-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 1;
  margin-top: -2.5rem;
}
@media screen and (min-width: 768px) {
  .p-gallery__grid {
    display: none;
  }
}

.p-gallery__gridItem {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.p-gallery__gridImg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.p-gallery__scroll {
  display: none;
  overflow: hidden;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-gallery__scroll {
    display: block;
  }
}

.p-gallery__wrap {
  display: flex;
  overflow: hidden;
}

.p-gallery__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: infinity-scroll-left 40s infinite linear 0.5s both;
}

.p-gallery__item {
  width: 18.75rem;
  flex-shrink: 0;
  height: 18.75rem;
  overflow: hidden;
}

.p-gallery__slideImg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-gallery__bottom {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-gallery__bottom {
    display: none;
  }
}

.p-gallery__bottomImg {
  width: 100%;
  height: auto;
  aspect-ratio: 430/7;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: bottom;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.p-header__container {
  max-width: 50rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-header__container {
    max-width: 160rem;
    width: 100%;
  }
}

.p-header__picture {
  display: block;
  width: 100%;
}
.p-header__picture img {
  width: 100%;
  height: auto;
  aspect-ratio: 430/137;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 768px) {
  .p-header__picture img {
    aspect-ratio: 1440/106;
  }
}

.p-mv {
  position: relative;
  width: 100%;
}

.p-mv__container {
  width: 100%;
}

.p-mv__picture {
  display: block;
  width: 100%;
}

.p-mv__img {
  width: 100%;
  height: auto;
  aspect-ratio: 430/699;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: bottom;
}
@media screen and (min-width: 768px) {
  .p-mv__img {
    aspect-ratio: 1440/686;
  }
}

.p-nuum {
  position: relative;
  width: 100%;
}

.p-nuum__container {
  width: 100%;
}

.p-nuum__topSection {
  background-color: #FFFFFF;
  padding-block: 2.5rem;
  padding-inline: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__topSection {
    padding-top: 5rem;
    padding-bottom: 2.0625rem;
    padding-inline: 2.5rem;
  }
}

.p-nuum__topContent {
  text-align: center;
}

.p-nuum__topTitle {
  font-size: 1.25rem;
  color: #5BBC56;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.4285714286;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-nuum__topTitle.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-nuum__topTitle {
    margin-bottom: 1.25rem;
    font-size: 1.875rem;
  }
}

.p-nuum__topTitleSub {
  color: #453E2B;
  font-size: 1.125rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .p-nuum__topTitleSub {
    font-size: 1.75rem;
  }
}

.p-nuum__buttonWrap {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-nuum__buttonWrap.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.p-nuum__bottomSection {
  position: relative;
  padding-block: 1.5625rem;
  padding-inline: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__bottomSection {
    padding-block: 4.375rem;
    padding-inline: 2.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .p-nuum__bottomSection {
    padding-top: 5.625rem;
    padding-bottom: 3.9375rem;
  }
}

.p-nuum__bottomSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/common/nuum-bg-sp.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p-nuum__bottomSection::before {
    background-image: url("../images/common/nuum-bg-pc.png");
  }
}

.p-nuum__careImage {
  width: 100%;
}

.p-nuum__carePicture {
  width: 100%;
  display: block;
}

.p-nuum__careImg {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
  aspect-ratio: 430/804;
}
@media screen and (min-width: 768px) {
  .p-nuum__careImg {
    aspect-ratio: 1440/1228;
  }
}

.p-nuum__bottomContent {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__bottomContent {
    flex-direction: row;
    align-items: flex-start;
    gap: 3.75rem;
    max-width: 65.3125rem;
    margin: auto;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__bottomContent {
    max-width: 75rem;
    margin-top: 3.625rem;
  }
}

.p-nuum__textContent {
  flex: 1;
}

.p-nuum__subtitle {
  font-size: 0.8125rem;
  font-family: "Fredoka", sans-serif;
  color: #5BBC56;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.9375rem;
  margin-top: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__subtitle {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 768px) {
  .p-nuum__subtitle {
    font-size: 1.5rem;
    margin-bottom: 0.625rem;
  }
}

.p-nuum__titleAndImage {
  display: flex;
  align-items: flex-start;
  gap: 0.9375rem;
  margin-bottom: 1.5625rem;
  max-width: 37.5rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__titleAndImage {
    gap: 0rem;
    margin-bottom: 2.1875rem;
    max-width: 41.25rem;
  }
}

.p-nuum__textSection {
  flex: 1;
  min-width: 0;
  max-width: 25rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__textSection {
    max-width: 31.25rem;
  }
}

.p-nuum__mainTitle {
  margin-bottom: 0;
}

.p-nuum__imageWrap {
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .p-nuum__imageWrap {
    margin-top: 0.625rem;
  }
}

.p-nuum__image {
  width: 10.6875rem;
  height: 8.5rem;
  -o-object-fit: contain;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
  .p-nuum__image {
    width: 14.125rem;
    height: 11.25rem;
  }
}

.p-nuum__mainTitleLine1 {
  display: block;
  color: #453E2B;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.75rem;
  white-space: nowrap;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .p-nuum__mainTitleLine1 {
    font-size: 2.375rem;
  }
}

.p-nuum__mainTitleLine2 {
  display: block;
  color: #453E2B;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.75rem;
  position: relative;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-nuum__mainTitleLine2 {
    font-size: 2.375rem;
  }
}

.p-nuum__mainTitleLine2::after {
  content: "";
  position: absolute;
  bottom: -0.0625rem;
  left: -0.5rem;
  width: 11.9375rem;
  height: 0.9375rem;
  background-image: url("../images/common/nuum-title.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-nuum__mainTitleLine2::after {
    bottom: 0.0625rem;
    width: 100%;
    height: 35%;
  }
}

.p-nuum__description {
  margin-top: 1.25rem;
}

.p-nuum__descriptionText {
  font-family: "Noto Sans", sans-serif;
  color: #707070;
  line-height: 1.7142857143;
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__descriptionText {
    font-size: 1rem;
  }
}

.p-nuum__highlight {
  color: #5BBC56;
  font-weight: 700;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__highlight {
    font-size: 1.0625rem;
  }
}

.p-seasonalCare {
  background-color: #F4F4F4;
  padding-block: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare {
    padding-block: 5rem;
    padding-inline: 2.5rem;
  }
}

.p-seasonalCare__container {
  width: 100%;
  max-width: 65.3125rem;
  margin: auto;
}
@media screen and (min-width: 1600px) {
  .p-seasonalCare__container {
    max-width: 75rem;
  }
}

.p-seasonalCare__section {
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section {
    margin-bottom: 0rem;
  }
}

.p-seasonalCare__section:last-child {
  margin-bottom: 0;
}

.p-seasonalCare__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__content {
    flex-direction: row;
    gap: 2.5rem;
    justify-content: flex-start;
    align-items: center;
  }
}

@media screen and (min-width: 1600px) {
  .p-seasonalCare__section--spring .p-seasonalCare__content {
    justify-content: center;
    gap: 0;
  }
}

.p-seasonalCare__section--spring .p-seasonalCare__content {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--spring .p-seasonalCare__content {
    flex-direction: row-reverse;
  }
}

.p-seasonalCare__section--spring .p-seasonalCare__imageWrap {
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--spring .p-seasonalCare__imageWrap {
    margin-top: 0;
  }
}

.p-seasonalCare__image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 407/275;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__image {
    width: 29.25rem;
    height: auto;
    aspect-ratio: auto;
  }
}

.p-seasonalCare__section--spring .p-seasonalCare__image {
  height: auto;
  aspect-ratio: 407/275;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--spring .p-seasonalCare__image {
    width: 30.625rem;
    height: auto;
    aspect-ratio: auto;
  }
}

.p-seasonalCare__textContent {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: left;
  margin-top: -31%;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__textContent {
    margin-top: 0rem;
  }
}

.p-seasonalCare__section--spring .p-seasonalCare__textContent {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--spring .p-seasonalCare__textContent {
    z-index: 1;
  }
}

.p-seasonalCare__section--autumn .p-seasonalCare__textContent {
  margin-left: auto;
  padding-right: 6%;
}

.p-seasonalCare__section--spring .p-seasonalCare__textContent {
  margin-right: auto;
  padding-left: 6%;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--spring .p-seasonalCare__textContent {
    padding-left: 0;
  }
}
@media screen and (min-width: 1600px) {
  .p-seasonalCare__section--spring .p-seasonalCare__textContent {
    padding-left: 18%;
  }
}

.p-seasonalCare__seasonTitle {
  position: relative;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3125rem;
  display: none;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__seasonTitle {
    display: block;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.p-seasonalCare__seasonTitleEn {
  position: relative;
  display: block;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 2.25rem;
  color: rgba(91, 188, 86, 0.1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__seasonTitleEn {
    font-size: 2.875rem;
  }
}

.p-seasonalCare__section--autumn .p-seasonalCare__seasonTitleEn {
  text-align: right;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--autumn .p-seasonalCare__seasonTitleEn {
    text-align: left;
  }
}

.p-seasonalCare__section--spring .p-seasonalCare__seasonTitleEn {
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__section--spring .p-seasonalCare__seasonTitleEn {
    text-align: left;
  }
}

.p-seasonalCare__seasonTitleEn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4.5%;
  transform: translateY(-50%);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #5BBC56;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__seasonTitleEn::after {
    left: 3.8%;
    font-size: 1.375rem;
  }
}

.p-seasonalCare__section--autumn .p-seasonalCare__seasonTitleEn::after {
  content: "秋冬の時期";
}

.p-seasonalCare__section--spring .p-seasonalCare__seasonTitleEn::after {
  content: "春夏の時期";
}

.p-seasonalCare__mainContent {
  margin-top: 0.625rem;
  opacity: 0;
  transform: translate(10px, 0);
  transition: all 1.5s;
}
.p-seasonalCare__mainContent.scrollin {
  opacity: 1;
  transform: translate(0, 0) !important;
}

.seasonal-slide-right {
  opacity: 0;
  transform: translate(10px, 0);
  transition: all 1.5s;
}
.seasonal-slide-right.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.seasonal-slide-left {
  opacity: 0;
  transform: translate(-10px, 0);
  transition: all 1.5s;
}
.seasonal-slide-left.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.p-seasonalCare__mainText {
  margin-bottom: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__mainText {
    margin-bottom: 1.25rem;
    background: #FFFFFF;
    padding-inline: 0.9375rem;
    display: inline-block;
  }
  .p-seasonalCare__mainText br {
    display: none;
  }
}

.p-seasonalCare__mainTextLine {
  display: inline-block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 1.375rem;
  color: #453E2B;
  letter-spacing: 0.1em;
  line-height: 1.6363636364;
  background-color: #FFFFFF;
  padding: 0rem 0.625rem;
  white-space: nowrap;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__mainTextLine {
    padding: 0.3125rem 0.625rem;
    font-size: 2rem;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
  }
}

.p-seasonalCare__comma {
  letter-spacing: -0.45em;
}

.p-seasonalCare__mainTextLine--green {
  color: #5BBC56;
}

.p-seasonalCare__greenText {
  color: #5BBC56;
}

.p-seasonalCare__description {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #453E2B;
  line-height: 1.7142857143;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-seasonalCare__description {
    font-size: 1.0625rem;
    padding-left: 0.6875rem;
  }
}

.p-nuum__graySection {
  position: relative;
  width: 100%;
  height: 100%;
}

.p-nuum__graySection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 430/809;
  background-image: url("../images/common/nuum-gray-sp.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .p-nuum__graySection::before {
    aspect-ratio: 1440/1288;
    background-image: url("../images/common/nuum-gray-pc.png");
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__graySection::before {
    aspect-ratio: 1440/1000;
  }
}

.p-nuum__graySection::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16.25rem;
  height: 3.8125rem;
  aspect-ratio: 260/61;
  background-image: url("../images/common/nuum-y.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-nuum__graySection::after {
    width: 29rem;
    height: 6.8125rem;
    aspect-ratio: 464/109;
  }
}

.p-nuum__grayContainer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 65.3125rem;
  margin: auto;
}
@media screen and (min-width: 1600px) {
  .p-nuum__grayContainer {
    max-width: 75rem;
  }
}

.p-nuum__grayContent {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
  padding: 5rem 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__grayContent {
    padding: 10rem 2.5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__grayContent {
    padding: 6.25rem 3.75rem;
  }
}

.p-nuum__grayTitle {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4583333333;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-nuum__grayTitle {
    font-size: 2.125rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__grayTitle {
    font-size: 3rem;
    margin-bottom: 1.875rem;
    margin-top: 5rem;
  }
}

.p-nuum__grayTitleGreen {
  color: #5BBC56;
}

.p-nuum__grayTitleWhite {
  color: #FFFFFF;
}

.p-nuum__grayDescription {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #FFFFFF;
  line-height: 1.7142857143;
  margin: 0;
  margin-top: 1.875rem;
  text-align: left;
  max-width: 25rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__grayDescription {
    margin-top: 2.25rem;
    font-size: 1.0625rem;
    max-width: 50.375rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__grayDescription {
    font-size: 1.25rem;
    max-width: 56.25rem;
    margin-top: 1.875rem;
  }
}

.p-nuum__grayImageWrap {
  margin: 2.125rem 0;
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 21.125rem;
}
@media screen and (min-width: 768px) {
  .p-nuum__grayImageWrap {
    max-width: 33.5625rem;
    margin: 3.125rem 0;
    margin-top: 3.125rem;
    margin-bottom: 4.1875rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__grayImageWrap {
    max-width: 37.5rem;
  }
}

.p-nuum__grayImage {
  width: 100%;
  height: auto;
  aspect-ratio: 338/249;
}
@media screen and (min-width: 768px) {
  .p-nuum__grayImage {
    aspect-ratio: 537/395;
  }
}

.p-nuum__grayButtonWrap {
  width: 100%;
  max-width: 20.625rem;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-nuum__grayButtonWrap.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-nuum__grayButtonWrap {
    max-width: 25.25rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum__grayButtonWrap {
    max-width: 31.25rem;
  }
}

.p-nuum-gray {
  position: relative;
  width: 100%;
}

.p-nuum-gray::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/common/nuum-gray-sp.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray::before {
    aspect-ratio: 1440/1288;
    background-image: url("../images/common/nuum-gray-pc.png");
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray::before {
    aspect-ratio: 1440/1000;
  }
}

.p-nuum-gray__container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 65.3125rem;
  margin: auto;
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray__container {
    max-width: 100rem;
  }
}

.p-nuum-gray__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
  padding: 5.625rem 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__content {
    padding: 10rem 2.5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray__content {
    padding: 12.5rem 2.5rem;
  }
}

.p-nuum-gray__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4583333333;
  margin-bottom: 1.4375rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__title {
    font-size: 2.125rem;
    margin-top: 2.5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray__title {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
    margin-top: 3.75rem;
  }
}

.p-nuum-gray__description {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  color: #FFFFFF;
  line-height: 1.7142857143;
  margin: 0;
  margin-top: 1.4375rem;
  text-align: left;
  max-width: 25rem;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__description {
    font-size: 1.0625rem;
    max-width: 37.5rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray__description {
    font-size: 1.5rem;
    max-width: 56.25rem;
    margin-top: 2.5rem;
  }
}

.p-nuum-gray__titleGreen {
  color: #5BBC56;
}

.p-nuum-gray__titleWhite {
  color: #FFFFFF;
}

.p-nuum-gray__description {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  color: #FFFFFF;
  line-height: 1.7142857143;
  margin: 0;
  margin-top: 1.4375rem;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__description {
    font-size: 1.0625rem;
  }
}

.p-nuum-gray__imageWrap {
  margin: 1.875rem 0;
  width: 100%;
  max-width: 21.125rem;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__imageWrap {
    max-width: 41.9375rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray__imageWrap {
    max-width: 56.25rem;
    margin: 3.125rem 0;
  }
}

.p-nuum-gray__image {
  width: 100%;
  height: auto;
  aspect-ratio: 338/249;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__image {
    aspect-ratio: 671/494;
  }
}

.p-nuum-gray__buttonWrap {
  margin-top: 1.875rem;
  width: 100%;
  max-width: 20.625rem;
}
@media screen and (min-width: 768px) {
  .p-nuum-gray__buttonWrap {
    max-width: 25.25rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-nuum-gray__buttonWrap {
    max-width: 31.25rem;
    margin-top: 3.125rem;
  }
}

.c-btn--point {
  display: block;
  width: 100%;
}

.c-btn--point .c-btn__img {
  width: 100%;
  height: auto;
  aspect-ratio: 330/125;
}
@media screen and (min-width: 768px) {
  .c-btn--point .c-btn__img {
    aspect-ratio: 404/144;
  }
}

.p-product-spray {
  width: 100%;
}

.p-product-spray__container {
  width: 100%;
  padding-inline: 1.875rem;
}

.p-product-spray__topSection {
  background-color: #FEFEFE;
  padding-top: 1.875rem;
  padding-bottom: 8.125rem;
}
@media screen and (min-width: 768px) {
  .p-product-spray__topSection {
    padding-top: 5rem;
    padding-bottom: 8.8125rem;
  }
}

.p-product-spray__topContent {
  text-align: center;
}

.p-product-spray__subtitle {
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #453E2B;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .p-product-spray__subtitle {
    font-size: 1.125rem;
    margin-bottom: 0.9375rem;
  }
}

.p-product-spray__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  color: #453E2B;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-product-spray__title {
    font-size: 2.375rem;
  }
}

.p-product-spray__titleHighlight {
  font-size: 1.75rem;
  color: #5BBC56;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .p-product-spray__titleHighlight {
    font-size: 2.625rem;
  }
}

.p-product-spray__scroll {
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow: hidden;
  width: 100%;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p-product-spray__scroll {
    top: 41%;
  }
}

.p-product-spray__sub-title {
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.06em;
  color: #453E2B;
  line-height: 1.45;
  margin-bottom: 0.875rem;
  opacity: 0;
  transform: translate(-10px, 0);
  transition: all 1.5s;
}
.p-product-spray__sub-title.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.p-product-spray__sub-title {
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-product-spray__sub-title {
    font-size: 1.875rem;
  }
}

.p-product-spray__scrollWrap {
  display: flex;
  overflow: hidden;
}

.p-product-spray__scrollText {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.p-product-spray__scrollText--left {
  animation: titleloop 50s linear infinite;
}

.p-product-spray__scrollItem {
  font-family: "Fredoka", sans-serif;
  font-size: 3.5625rem;
  font-weight: 500;
  color: #5BBC56;
  opacity: 0.1;
  letter-spacing: 0.01em;
  padding-inline: 1.875rem;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .p-product-spray__scrollItem {
    font-size: 5.6875rem;
    padding-inline: 3rem;
  }
}

.p-product-spray__bottomSection {
  background-color: #F0F5E9;
  padding-top: 2.9375rem;
  padding-bottom: 5rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
@media screen and (min-width: 768px) {
  .p-product-spray__bottomSection {
    padding-top: 6.25rem;
    padding-bottom: 9.375rem;
  }
}

.p-product-spray__bottomContent {
  width: 100%;
  max-width: 65.3125rem;
  margin-inline: auto;
  padding-inline: 1.875rem;
  margin-top: 0.625rem;
}
@media screen and (min-width: 1200px) {
  .p-product-spray__bottomContent {
    padding-inline: 0rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-product-spray__bottomContent {
    max-width: 75rem;
  }
}

.p-product-spray__imageWrap {
  position: relative;
  text-align: center;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  margin-top: -9.3125rem;
  margin-bottom: 1.6875rem;
}
@media screen and (min-width: 768px) {
  .p-product-spray__imageWrap {
    margin-top: -11.25rem;
    margin-bottom: 2.5rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-product-spray__imageWrap {
    margin-top: -12.5rem;
    margin-bottom: 2.9375rem;
  }
}

.p-product-spray__imageCircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 68.3%;
  height: auto;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-product-spray__imageCircle {
    width: 25rem;
    height: 25rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-product-spray__imageCircle {
    width: 29.3125rem;
    height: 29.3125rem;
  }
}

.p-product-spray__image {
  width: 100%;
  height: auto;
  aspect-ratio: 483/469;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-product-spray__cards {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-product-spray__cards {
    flex-direction: row;
    gap: 1.875rem;
  }
}

.p-product-spray__card {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-product-spray__card.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-product-spray__card {
    width: 50%;
    border-radius: 1.25rem;
  }
}

.p-product-spray__cardHeader {
  position: relative;
  padding-block: 0.875rem;
  padding-inline: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-product-spray__cardHeader {
    padding-block: 1.5625rem;
    padding-inline: 2.5rem;
  }
}

.p-product-spray__card--neem {
  overflow: visible;
}

.p-product-spray__card--neem .p-product-spray__cardHeader {
  background-color: #453E2B;
  overflow: visible;
  border-radius: 1rem 1rem 0 0;
}
@media screen and (min-width: 768px) {
  .p-product-spray__card--neem .p-product-spray__cardHeader {
    border-radius: 1.25rem 1.25rem 0 0;
  }
}

.p-product-spray__card--neem .p-product-spray__cardHeader::after {
  content: "";
  position: absolute;
  right: calc(50% - 50vw);
  top: 37%;
  transform: translateY(-50%);
  width: 50vw;
  height: 9.4375rem;
  background-image: url("../images/common/oil-sp.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}
@media screen and (min-width: 400px) {
  .p-product-spray__card--neem .p-product-spray__cardHeader::after {
    height: 10.6875rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product-spray__card--neem .p-product-spray__cardHeader::after {
    right: 0;
    width: 10.75rem;
    height: 9.625rem;
    background-image: url("../images/common/oil-pc.png");
    background-position: center;
  }
}

.p-product-spray__card--mineral .p-product-spray__cardHeader {
  background-color: #67ABB4;
  border-radius: 1rem 1rem 0 0;
}
@media screen and (min-width: 768px) {
  .p-product-spray__card--mineral .p-product-spray__cardHeader {
    border-radius: 1.25rem 1.25rem 0 0;
  }
}

.p-product-spray__card--mineral .p-product-spray__cardHeader::after {
  content: "";
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 6.6875rem;
  height: 4.375rem;
  background-image: url("../images/common/mineral.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (min-width: 768px) {
  .p-product-spray__card--mineral .p-product-spray__cardHeader::after {
    width: 9.5rem;
    height: 6.1875rem;
  }
}

.p-product-spray__cardBody {
  background-color: #FFFFFF;
  flex: 1;
  padding-block: 1.25rem;
  padding-inline: 1.25rem;
  border-radius: 0 0 1rem 1rem;
}
@media screen and (min-width: 768px) {
  .p-product-spray__cardBody {
    padding-block: 1.5625rem;
    padding-inline: 1.5625rem;
    border-radius: 0 0 1.25rem 1.25rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-product-spray__cardBody {
    padding-block: 1.875rem;
    padding-inline: 1.875rem;
    padding-bottom: 3.0625rem;
  }
}

.p-product-spray__cardTitle {
  text-align: left;
  max-width: 70%;
}

.p-product-spray__cardTitleMain {
  display: inline-block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.4;
  margin-bottom: 0.1875rem;
  border: 1px solid #FEFEFE;
  padding: 0.3125rem 0.9375rem;
  border-radius: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-product-spray__cardTitleMain {
    font-size: 1rem;
    margin-bottom: 0.3125rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-product-spray__cardTitleMain {
    font-size: 1.125rem;
  }
}

.p-product-spray__cardTitleSub {
  display: block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.4;
}
@media screen and (min-width: 400px) {
  .p-product-spray__cardTitleSub {
    font-size: 1.375rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product-spray__cardTitleSub {
    font-size: 1.625rem;
  }
}

.p-product-spray__cardText {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #453E2B;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .p-product-spray__cardText {
    font-size: 1.0625rem;
    line-height: 1.8;
  }
}
@media screen and (min-width: 1200px) {
  .p-product-spray__cardText {
    font-size: 1.0625rem;
    line-height: 1.85;
  }
}

.p-product-spray__cardTextHighlight {
  color: #5BBC56;
}

@keyframes titleloop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.p-product {
  position: relative;
  text-align: center;
  padding-top: 5rem;
}
@media screen and (min-width: 768px) {
  .p-product {
    padding-top: 10rem;
  }
}

.p-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  background-image: url("../images/common/product-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 430/288;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-product::before {
    background-image: url("../images/common/product-bg-pc.png");
    aspect-ratio: 1440/1044;
  }
}

.p-product__container {
  width: 100%;
  max-width: 26.875rem;
  margin-inline: auto;
  padding-inline: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-product__container {
    max-width: 75rem;
    padding-inline: 1.5625rem;
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  .p-product__container {
    max-width: 75rem;
  }
}

.p-product__titleWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-product__subtitle {
  font-family: "Fredoka", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #5BBC56;
  margin-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .p-product__subtitle {
    font-size: 1.5rem;
  }
}

.p-product__title {
  position: relative;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .p-product__title {
    font-size: 2.375rem;
  }
}

.p-product__titleMain {
  position: relative;
}
.p-product__titleMain::before {
  content: "";
  position: absolute;
  left: 48%;
  bottom: -0.0625rem;
  transform: translateX(-50%);
  width: 106%;
  height: 1rem;
  background-image: url("../images/common/title-line.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.p-product__titleSelect {
  color: #726745;
}

.p-product__titleType {
  color: #5BBC56;
}

.p-product__description {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #453E2B;
}
@media screen and (min-width: 768px) {
  .p-product__description {
    font-size: 2rem;
  }
}

.p-product__cardsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  margin-top: 1.875rem;
}
@media screen and (min-width: 400px) {
  .p-product__cardsContainer {
    gap: 1.875rem;
    margin-top: 2.5rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product__cardsContainer {
    gap: 3.75rem;
  }
}

.p-product__cardOuter {
  background-color: #F4F4F4;
  padding-inline: 0.75rem;
  border-radius: 3.125rem;
  max-width: 23.125rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate(-10px, 0);
  transition: all 1.5s;
}
.p-product__cardOuter:nth-child(2) {
  transform: translate(10px, 0);
}
.p-product__cardOuter:nth-child(3) {
  transform: translate(-10px, 0);
}
.p-product__cardOuter.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 400px) {
  .p-product__cardOuter {
    padding-inline: 1.25rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product__cardOuter {
    padding-inline: 0rem;
    max-width: 65.3125rem;
    width: 100%;
    flex: none;
    min-height: 33.625rem;
  }
}
@media screen and (min-width: 1600px) {
  .p-product__cardOuter {
    max-width: 75rem;
  }
}

.p-product__cardWrap {
  padding-top: 3.1875rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-product__card {
  position: relative;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
@media screen and (min-width: 400px) {
  .p-product__card {
    gap: 1.25rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product__card {
    gap: 1.5rem;
  }
}

.p-product__mainSection {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  padding-inline: 4.5%;
}
@media screen and (min-width: 768px) {
  .p-product__mainSection {
    gap: 37px;
  }
}

.p-product__pointsSection {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-product__pointsSection {
    margin-top: 1.5625rem;
  }
}
.p-product__pointsSection--sp {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-product__pointsSection--sp {
    display: none;
  }
}

.p-product__pointsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media screen and (min-width: 400px) {
  .p-product__pointsContainer {
    gap: 0.625rem;
  }
}
.p-product__pointsContainer--pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-product__pointsContainer--pc {
    display: flex;
  }
}

.p-product__buttonWrap {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-product__popularLabel {
  width: 6.25rem;
  aspect-ratio: 121/47;
}
@media screen and (min-width: 400px) {
  .p-product__popularLabel {
    width: 7.5625rem;
  }
}

.p-product__popularImg {
  width: 100%;
  height: auto;
}

.p-product__typeLabel {
  display: inline-block;
  font-family: "Fredoka", sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #FEFEFE;
  background-color: #726745;
  border-radius: 0.6875rem;
  padding-block: 0.0625rem;
  padding-inline: 0.375rem;
  white-space: nowrap;
  align-self: flex-start;
  text-align: left;
}
@media screen and (min-width: 400px) {
  .p-product__typeLabel {
    padding-block: 0.125rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product__typeLabel {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }
}

.p-product__mainContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.125rem;
}
@media screen and (min-width: 400px) {
  .p-product__mainContent {
    gap: 0rem;
  }
}

.p-product__imageSection {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32%;
  flex-shrink: 0;
}
@media screen and (min-width: 400px) {
  .p-product__imageSection {
    width: 35%;
  }
}
@media screen and (min-width: 768px) {
  .p-product__imageSection {
    width: 27.5%;
    margin-left: 1.5625rem;
    margin-top: 1.5rem;
  }
}

.p-product__imageWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 9.375rem;
}
@media screen and (min-width: 768px) {
  .p-product__imageWrap {
    margin-top: 0.3125rem;
    max-width: 12.5rem;
  }
}

.p-product__sprayImg {
  width: 100%;
  height: auto;
  max-width: 6.75rem;
}
@media screen and (min-width: 768px) {
  .p-product__sprayImg {
    max-width: 14.6875rem;
  }
}

.p-product__contentSection {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  flex: 1;
  width: 60%;
  margin-top: 0.5625rem;
}
@media screen and (min-width: 400px) {
  .p-product__contentSection {
    gap: 1.25rem;
    width: 65%;
    margin-top: 0rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product__contentSection {
    gap: 1.5625rem;
    width: 71%;
  }
}

.p-product__detailsWrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-product__detailsWrap {
    gap: 0.875rem;
  }
}

.p-product__productName {
  text-align: left;
  position: relative;
}

.p-product__productName::before {
  content: "";
  position: absolute;
  top: -48px;
  right: -14px;
  width: 7.5625rem;
  height: 3.0625rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 10;
  display: block;
}
@media screen and (min-width: 400px) {
  .p-product__productName::before {
    right: -28px;
  }
}
@media screen and (min-width: 768px) {
  .p-product__productName::before {
    display: none;
  }
}

.p-product__productName::after {
  content: "";
  position: absolute;
  bottom: -83.93px;
  right: 235.8px;
  width: 10.1875rem;
  height: 4.75rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 10;
  display: none;
}
@media screen and (min-width: 768px) {
  .p-product__productName::after {
    display: block;
    right: 152px;
    bottom: -55px;
    width: 10.1875rem;
  }
}
@media screen and (min-width: 1000px) {
  .p-product__productName::after {
    right: 261px;
    bottom: -80px;
  }
}
@media screen and (min-width: 1600px) {
  .p-product__productName::after {
    right: 327.8px;
    bottom: -83.93px;
  }
}

.p-product__card--type01 .p-product__productName::before {
  background-image: url("../images/common/no1.png");
}

.p-product__card--type01 .p-product__productName::after {
  background-image: url("../images/common/no1.png");
}

.p-product__card--type02 .p-product__productName::before {
  background-image: url("../images/common/trial.png");
}

.p-product__card--type02 .p-product__productName::after {
  background-image: url("../images/common/trial.png");
}

.p-product__card--type03 .p-product__productName::before {
  background-image: url("../images/common/eco.png");
}

.p-product__card--type03 .p-product__productName::after {
  background-image: url("../images/common/eco.png");
}
@media screen and (min-width: 768px) {
  .p-product__card--type03 .p-product__productName::after {
    right: 147px;
  }
}
@media screen and (min-width: 1000px) {
  .p-product__card--type03 .p-product__productName::after {
    right: 229px;
    bottom: -80px;
  }
}
@media screen and (min-width: 1600px) {
  .p-product__card--type03 .p-product__productName::after {
    right: 285.8px;
    bottom: -83.93px;
  }
}

.p-product__productNamePrimary {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #726745;
  white-space: nowrap;
}
@media screen and (min-width: 400px) {
  .p-product__productNamePrimary {
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    line-height: 1.38;
  }
}
@media screen and (min-width: 768px) {
  .p-product__productNamePrimary {
    font-size: 2rem;
    letter-spacing: 0.06em;
    white-space: normal;
  }
}

.p-product__capacity {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #726745;
  text-align: left;
  margin: 0;
  margin-top: -0.375rem;
}
@media screen and (min-width: 400px) {
  .p-product__capacity {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
  }
}
@media screen and (min-width: 768px) {
  .p-product__capacity {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

.p-product__priceWrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4375rem;
}
.p-product__priceWrap--withShipping {
  align-items: baseline;
  gap: 0rem;
}

.p-product__freeShipping {
  padding-top: 0.5rem;
}

.p-product__freeShippingImg {
  width: 2.8125rem;
  height: auto;
  aspect-ratio: 45/45;
}
@media screen and (min-width: 400px) {
  .p-product__freeShippingImg {
    width: 3.1875rem;
    aspect-ratio: 51/51;
  }
}
@media screen and (min-width: 768px) {
  .p-product__freeShippingImg {
    width: 4.75rem;
    height: 4.75rem;
    aspect-ratio: 76/76;
  }
}

.p-product__price {
  display: flex;
  align-items: baseline;
}

.p-product__priceNumber {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #726745;
  line-height: 1;
}
@media screen and (min-width: 400px) {
  .p-product__priceNumber {
    font-size: 2.75rem;
    line-height: 1;
  }
}
@media screen and (min-width: 768px) {
  .p-product__priceNumber {
    font-size: 4.4375rem;
  }
}

.p-product__priceUnit {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #726745;
  line-height: 1;
}
@media screen and (min-width: 400px) {
  .p-product__priceUnit {
    font-size: 1.375rem;
    line-height: 1;
  }
}
@media screen and (min-width: 768px) {
  .p-product__priceUnit {
    font-size: 2.625rem;
  }
}

.p-product__shipping {
  flex-shrink: 0;
}

.p-product__shippingText {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  color: #726745;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
@media screen and (min-width: 400px) {
  .p-product__shippingText {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }
}
@media screen and (min-width: 768px) {
  .p-product__shippingText {
    font-size: 1.125rem;
  }
}

.p-product__pointItem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #FFFFFF;
  padding: 0.625rem 0.75rem;
  border-radius: 1.5625rem;
  width: 100%;
}
@media screen and (min-width: 400px) {
  .p-product__pointItem {
    gap: 0.625rem;
    padding: 1rem 1.25rem;
  }
}
.p-product__pointItem:last-child {
  margin-bottom: 0;
}

.p-product__pointCheck {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}
.p-product__pointCheck img {
  width: 100%;
  height: auto;
}

.p-product__pointContent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-product__pointContent {
    flex-direction: row;
    align-items: center;
    gap: 1.0625rem;
  }
}

.p-product__pointNumber {
  font-family: "Fredoka", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.25;
  color: #5BBC56;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-product__pointNumber {
    font-size: 1rem;
  }
}

.p-product__pointDescription {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  color: #726745;
  margin: 0;
}
@media screen and (min-width: 400px) {
  .p-product__pointDescription {
    font-size: 0.875rem;
    line-height: 1.7;
  }
}
@media screen and (min-width: 768px) {
  .p-product__pointDescription {
    font-size: 1.0625rem;
  }
}

.p-product__pointHighlight {
  color: #5BBC56;
}

.p-scene {
  background-color: #E0EBD3;
  padding-top: 5.625rem;
  padding-bottom: 4.4375rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-scene {
    padding-block: 6.25rem;
  }
}

.p-scene::after {
  position: absolute;
  width: 16.4375rem;
  height: 5.0625rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  background-image: url("../images/common/scene.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-scene::after {
    display: none;
  }
}

.p-scene__container {
  max-width: 26.875rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-scene__container {
    max-width: 65.3125rem;
    padding-inline: 0;
  }
}
@media screen and (min-width: 1600px) {
  .p-scene__container {
    max-width: 75rem;
  }
}

.p-scene__titleWrap {
  text-align: center;
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-scene__titleWrap {
    margin-bottom: 3.75rem;
  }
}

.p-scene__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
}
@media screen and (min-width: 768px) {
  .p-scene__title {
    font-size: 2rem;
  }
}

.p-scene__titleLine1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #453E2B;
}
@media screen and (min-width: 1000px) {
  .p-scene__titleLine1 {
    display: inline;
  }
}

.p-scene__titleLine1::after {
  content: "";
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  bottom: -0.625rem;
  height: 55%;
  background: #F6FF8E;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-scene__titleLine1::after {
    bottom: -1.4375rem;
    height: 86%;
  }
}

.p-scene__titleLine2 {
  display: block;
  color: #453E2B;
  letter-spacing: 0.02em;
  font-weight: 500;
}
@media screen and (min-width: 1000px) {
  .p-scene__titleLine2 {
    display: inline;
  }
}

.p-scene__titleText {
  color: #453E2B;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .p-scene__titleText {
    font-size: 2.125rem;
  }
}

.p-scene__titleHighlight {
  color: #5BBC56;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .p-scene__titleHighlight {
    font-size: 2.625rem;
  }
}

.p-scene__cards {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  margin-bottom: 3.125rem;
}
@media screen and (min-width: 1000px) {
  .p-scene__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.875rem;
    row-gap: 1.875rem;
    margin-bottom: 3.75rem;
  }
}

.p-scene__cardsRow {
  display: flex;
  justify-content: center;
  gap: 0.8125rem;
}
@media screen and (min-width: 1000px) {
  .p-scene__cardsRow {
    display: contents;
  }
}

.p-scene__cardsRow--first {
  display: flex;
  justify-content: center;
  gap: 0.8125rem;
}
@media screen and (min-width: 1000px) {
  .p-scene__cardsRow--first {
    display: contents;
  }
}

.p-scene__cardsRow--second {
  display: flex;
  justify-content: center;
  gap: 0.8125rem;
}
@media screen and (min-width: 1000px) {
  .p-scene__cardsRow--second {
    display: contents;
  }
}

.p-scene__card {
  text-align: center;
}

.p-scene__cardImageWrap {
  width: 100%;
  max-width: 7.5rem;
  margin-inline: auto;
  margin-bottom: 0.8125rem;
  aspect-ratio: 196/189;
}
@media screen and (min-width: 768px) {
  .p-scene__cardImageWrap {
    max-width: 12.25rem;
    aspect-ratio: 196/189;
  }
}

.p-scene__cardImage {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-scene__cardText {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #453E2B;
}
@media screen and (min-width: 768px) {
  .p-scene__cardText {
    font-size: 1.125rem;
  }
}

.p-scene__cta {
  background-color: #5BBC56;
  border-radius: 0.75rem;
  padding: 1.875rem 1.25rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-scene__cta {
    padding: 2.5rem 1.875rem;
  }
}

.p-scene__ctaContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-scene__ctaContent {
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.p-scene__priceWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.p-scene__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.p-scene__priceNumber {
  font-family: "Fredoka", sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #FEFEFE;
}
@media screen and (min-width: 768px) {
  .p-scene__priceNumber {
    font-size: 3rem;
  }
}

.p-scene__priceUnit {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #FEFEFE;
}
@media screen and (min-width: 768px) {
  .p-scene__priceUnit {
    font-size: 1.5rem;
  }
}

.p-scene__shipping {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #FEFEFE;
}
@media screen and (min-width: 768px) {
  .p-scene__shipping {
    font-size: 1rem;
  }
}

.p-scene__pointsWrap {
  background-color: #C49A2F;
  padding: 0.5rem 1rem;
  border-radius: 1.25rem;
}

.p-scene__points {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FEFEFE;
}
@media screen and (min-width: 768px) {
  .p-scene__points {
    font-size: 1rem;
  }
}

.p-scene__buttonWrap {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-scene__buttonWrap.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.p-use {
  background: #F4F4F4;
  padding: 3.75rem 0 4.8125rem;
}
@media screen and (min-width: 768px) {
  .p-use {
    padding: 5rem 0 7.5rem;
    padding-bottom: 10.1875rem;
  }
}

.p-use__contentWrapper {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-use__contentWrapper {
    width: 58%;
  }
}

.p-use__textContent {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translate(-10px, 0);
  transition: all 1.5s;
}
.p-use__textContent.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.p-use__imageWrap {
  position: relative;
  z-index: 1;
  margin-top: -5.125rem;
  aspect-ratio: 337/284;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-use__imageWrap {
    margin-top: -6.125rem;
    width: 100%;
    aspect-ratio: 554/467;
  }
}

.p-use__image {
  width: 100%;
  height: auto;
}

.p-use__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #726745;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .p-use__title {
    font-size: 2.375rem;
  }
}

.p-use__subtitle {
  font-size: 0.875rem;
  font-weight: 500;
  color: #453E2B;
  text-align: center;
  letter-spacing: 0.2em;
  color: #5BBC56;
  font-family: "Fredoka", sans-serif;
  display: inline-block;
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-use__subtitle {
    font-size: 1.5rem;
  }
}

.p-use__titlePart1 {
  background: #FFFFFF;
  padding: 0.5rem 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (min-width: 768px) {
  .p-use__titlePart1 {
    padding: 0.75rem 0.5rem;
  }
}

.p-use__titlePart2 {
  line-height: 1;
  width: -moz-fit-content;
  width: fit-content;
  background: #FFFFFF;
  padding: 0.5rem 0.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #5BBC56;
}
@media screen and (min-width: 768px) {
  .p-use__titlePart2 {
    padding: 0.75rem 0.5rem;
  }
}

.p-use__inner {
  max-width: 65.3125rem;
  margin-inline: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-use__inner {
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 1600px) {
  .p-use__inner {
    max-width: 75rem;
  }
}

@media screen and (min-width: 768px) {
  .p-use__descriptionWrap {
    margin-top: 10rem;
    width: 40%;
  }
}

.p-use__description {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  color: #453E2B;
}
@media screen and (min-width: 768px) {
  .p-use__description {
    font-size: 1.0625rem;
  }
}

.p-use__topWrap {
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-use__topWrap {
    flex-direction: row;
    gap: 3.125rem;
    margin-top: 2.8125rem;
  }
}

.p-use__content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-use__content {
    flex-direction: row;
    gap: 1.25rem;
    margin-top: 2.8125rem;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.p-use__card {
  border-radius: 1.5625rem;
  margin-top: -1.875rem;
  display: flex;
  gap: 1.6875rem;
  flex: 1;
  min-width: 0;
}
@media screen and (min-width: 768px) {
  .p-use__card {
    gap: 1.875rem;
    margin-top: 0rem;
    flex-direction: column;
    flex: 1 1 0;
    max-width: 19.5rem;
    min-width: 0;
  }
}

.p-use__card--reverse {
  flex-direction: row-reverse;
  gap: 0.8125rem;
}
@media screen and (min-width: 768px) {
  .p-use__card--reverse {
    flex-direction: column;
    gap: 1.875rem;
  }
}

.p-use__cardHeader {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-use__cardHeader {
    width: 19.5rem;
  }
}

.p-use__cardNumber {
  margin-bottom: 0.5rem;
  background: #E0EBD3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  line-height: 1;
  position: absolute;
  width: 3.5625rem;
  height: 3.5625rem;
  top: -0.75rem;
  left: 0%;
  padding-left: 0.125rem;
  padding-top: 0.125rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5BBC56;
}
@media screen and (min-width: 768px) {
  .p-use__cardNumber {
    width: 5.8125rem;
    height: 5.8125rem;
    top: -0.875rem;
    left: 5%;
    font-size: 1rem;
  }
}

.p-use__cardImageWrap {
  text-align: center;
  width: 10.625rem;
  aspect-ratio: 180/175;
  position: relative;
}
@media screen and (min-width: 400px) {
  .p-use__cardImageWrap {
    width: 11.125rem;
  }
}
@media screen and (min-width: 768px) {
  .p-use__cardImageWrap {
    margin-bottom: 0.9375rem;
    width: 19.5rem;
    height: 19rem;
    aspect-ratio: 312/304;
  }
}

.p-use__cardImage {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-use__cardContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6875rem;
  width: 10.625rem;
}
@media screen and (min-width: 400px) {
  .p-use__cardContent {
    width: 11.125rem;
  }
}
@media screen and (min-width: 768px) {
  .p-use__cardContent {
    flex-direction: column;
    gap: 1.875rem;
    width: 19.5rem;
  }
}

.p-use__cardContent--reverse {
  flex-direction: row-reverse;
  width: 10.625rem;
}
@media screen and (min-width: 400px) {
  .p-use__cardContent--reverse {
    width: 11.125rem;
  }
}
@media screen and (min-width: 768px) {
  .p-use__cardContent--reverse {
    flex-direction: column;
    width: 19.5rem;
  }
}

.p-use__cardTextContent {
  flex: 1;
}

.p-use__cardText {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.7142857143;
  color: #453E2B;
  font-family: "Noto Sans", sans-serif;
}
@media screen and (min-width: 768px) {
  .p-use__cardText {
    font-size: 1.0625rem;
    margin-top: 1.5625rem;
  }
}

.p-use__card--reverse .p-use__cardText {
  margin-right: 0;
}

.p-use__card:nth-child(3) .p-use__cardText {
  margin-top: 1.875rem;
}

.p-use__cardTextHighlight {
  color: #5BBC56;
}

.p-use__cardTextDark {
  color: #726745;
}

.p-use__buttonWrap {
  margin-top: 1.25rem;
  text-align: center;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-use__buttonWrap.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 768px) {
  .p-use__buttonWrap {
    margin-top: 3rem;
  }
}

.p-use__noteText {
  font-family: "Noto Sans", sans-serif;
  color: #453E2B;
  margin-top: 1.6875rem;
  padding: 1.5rem 1.25rem;
  background: #F8FDE8;
  border-radius: 1.5625rem;
  margin-bottom: 2rem;
  line-height: 1.6470588235;
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-use__noteText {
    padding: 2.5rem 3.75rem;
    margin-bottom: 2.75rem;
    font-size: 1.0625rem;
    margin-top: 4.125rem;
  }
}

.p-use__cardLabel {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-use__cardLabel {
    font-size: 1rem;
  }
}

.p-use__cardNumberText {
  font-family: "Fredoka", sans-serif;
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .p-use__cardNumberText {
    font-size: 2.25rem;
  }
}

.p-voice {
  position: relative;
  background-color: #F4F5EF;
}

.p-voice__top {
  position: relative;
  padding-top: 5rem;
  background-image: url("../images/common/voice-bg-sp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
@media screen and (min-width: 768px) {
  .p-voice__top {
    padding-bottom: 1.25rem;
    padding-top: 10rem;
    background-image: url("../images/common/voice-bg-pc.jpg");
  }
}
@media screen and (min-width: 1600px) {
  .p-voice__top {
    background-image: url("../images/common/voice-bg-pc-xl.jpg");
  }
}

.p-voice__qaSection {
  position: relative;
  overflow-x: hidden;
}

.p-voice__container {
  position: relative;
  z-index: 2;
  max-width: 65.3125rem;
  margin: 0 auto;
}
@media screen and (min-width: 1600px) {
  .p-voice__container {
    max-width: 75rem;
  }
}

.p-voice__titleWrap {
  position: relative;
  text-align: center;
  margin-bottom: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-voice__titleWrap {
    margin-bottom: 0rem;
    text-align: left;
  }
}

.p-voice__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  color: #333;
  margin-bottom: 1.25rem;
  display: inline-block;
  position: relative;
  line-height: 1.45;
}
.p-voice__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 0.9375rem;
  background-image: url("../images/common/voice-title-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-voice__title::after {
    height: 1.25rem;
  }
}
@media screen and (min-width: 768px) {
  .p-voice__title {
    margin-bottom: 1.875rem;
  }
}

.p-voice__titleLine1 {
  display: block;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-voice__titleLine1 {
    font-size: 2rem;
  }
}

.p-voice__titleLine2 {
  display: block;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-voice__titleLine2 {
    font-size: 2.375rem;
  }
}

.p-voice__users {
  width: 90%;
  max-width: 23.125rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .p-voice__users {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 100%;
  }
}

.p-voice__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@media screen and (min-width: 768px) {
  .p-voice__flex {
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: 100%;
  }
}

.p-voice__user {
  position: relative;
  text-align: center;
  height: auto;
  aspect-ratio: 190/200;
  width: 50%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-voice__user {
    width: 26.7%;
    aspect-ratio: 270/286;
  }
}

.p-voice__userImage {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 1.5s;
}
.p-voice__userImage.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.p-voice__userImg {
  width: 100%;
  height: auto;
  display: block;
}

.p-voice__userImageText {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1.7;
  z-index: 2;
  width: 90%;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .p-voice__userImageText {
    font-size: 1.0625rem;
    width: 80%;
    padding: 0.9375rem 0.9375rem;
  }
}

.p-voice__userImageTextGreen {
  color: #5BBC56;
  display: block;
}

.p-voice__userImageTextDark {
  color: #726745;
  display: block;
}

.p-voice__topButtonWrap {
  width: 100%;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-voice__topButtonWrap {
    margin-top: 5rem;
  }
}

.p-voice__topButtonPicture {
  display: block;
  width: 100%;
}

.p-voice__topButtonImg {
  width: 100%;
  height: auto;
  display: block;
}

.p-voice__buttonWrap {
  margin-top: -0.3125rem;
  text-align: center;
  padding-bottom: 3.75rem;
  background: #FEFEFE;
}
@media screen and (min-width: 768px) {
  .p-voice__buttonWrap {
    margin-top: -1.875rem;
    padding-bottom: 5rem;
  }
}

@media screen and (min-width: 768px) {
  .p-voice__user--01 {
    margin-right: -1.5625rem;
    z-index: 4;
  }
}

.p-voice__user--02 {
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .p-voice__user--02 {
    margin-top: 10rem;
    margin-right: -1.25rem;
    z-index: 3;
  }
}

.p-voice__user--03 {
  margin-right: -0.125rem;
  margin-top: -4.0625rem;
}
@media screen and (min-width: 768px) {
  .p-voice__user--03 {
    margin-right: 0;
    margin-top: 0;
    margin-left: -1.5625rem;
    z-index: 2;
  }
}

.p-voice__user--04 {
  margin-left: -0.125rem;
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-voice__user--04 {
    margin-left: 0;
    margin-top: 10rem;
    margin-left: -1.875rem;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) {
  .is-sp {
    display: none !important;
  }
}

.is-pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .is-pc {
    display: block !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*# sourceMappingURL=style.css.map */