body {
  color: #002B3B;
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  line-height: 1.7;
}

.title {
  text-align: center;
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 24px;
  line-height: normal;
}
@media (min-width: 768px) {
  .title {
    font-size: 2.4305555556vw;
  }
}

.sub-title {
  display: block;
  margin-bottom: 5px;
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 10px;
  line-height: normal;
}
@media (min-width: 768px) {
  .sub-title {
    font-size: 0.9722222222vw;
  }
}

.main {
  background: url(../images/strength-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  background-position: center;
  background-attachment: fixed;
}

.left-content {
  display: none;
}
@media (min-width: 768px) {
  .left-content {
    display: block;
    width: 30%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }
}

@media (min-width: 768px) {
  .left-content__inner {
    padding: 62px 3.1944444444vw 0 2.6388888889vw;
  }
}

@media (min-width: 768px) {
  .left-content__logo img {
    width: 17.6388888889vw;
  }
}

@media (min-width: 768px) {
  .left-content__paragraph {
    position: relative;
  }
}
@media (min-width: 768px) {
  .left-content__paragraph::after {
    content: "";
    position: absolute;
    width: 24.1666666667vw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: rgba(255, 252, 239, 0.7);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: -1;
  }
}
@media (min-width: 768px) {
  .left-content__paragraph {
    margin-top: 25vh;
  }
}

@media (min-width: 768px) {
  .left-content__title {
    display: block;
    margin-bottom: 5px;
    text-align: center;
    font-family: "Zen Kaku Gothic New", serif;
    font-size: 2.4306vw;
    line-height: normal;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .left-content__sub-title {
    display: block;
    text-align: center;
    font-family: "Zen Kaku Gothic New", serif;
    font-size: 0.9027777778vw;
    line-height: normal;
    letter-spacing: 0.7px;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .left-content__btn {
    display: block;
    width: 16.0416666667vw;
    margin: 17px auto 0;
    padding: 8px 4.6527777778vw 10px 4.7222222222vw;
    border-radius: 50px;
    background: #C30D23;
    color: #FFFFFF;
    font-size: 0.8333333333vw;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .left-content__btn:hover {
    opacity: 0.6;
  }
}

.middle-content {
  background: #fff;
}
@media (min-width: 768px) {
  .middle-content {
    margin: 0 auto;
    width: 40%;
  }
}

.right-content {
  display: none;
}
@media (min-width: 768px) {
  .right-content {
    display: block;
    width: 30%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
  }
}

@media (min-width: 768px) {
  .right-content__list {
    margin-top: 30vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 31px;
  }
}

@media (min-width: 768px) {
  .right-content__link {
    text-align: center;
    font-size: 1.6666666667vw;
    line-height: normal;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .right-content__link:hover {
    opacity: 0.6;
  }
}

.header {
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 52;
  width: 100vw;
  background: #fff;
  -webkit-box-shadow: 0px 1px 10px 1px rgba(67, 67, 67, 0.25);
          box-shadow: 0px 1px 10px 1px rgba(67, 67, 67, 0.25);
}
@media (min-width: 768px) {
  .header {
    display: none;
  }
}

.header__inner {
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.logo img {
  width: 100px;
}

.drawer-icon {
  position: relative;
  cursor: pointer;
  z-index: 51;
}
.drawer-icon.is-checked .drawer-icon-line {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.drawer-icon.is-checked .drawer-icon-line:nth-of-type(1) {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.drawer-icon.is-checked .drawer-icon-line:nth-of-type(2) {
  display: none;
}
.drawer-icon.is-checked .drawer-icon-line:nth-of-type(3) {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.drawer-icon-line {
  display: block;
  width: 16px;
  height: 1px;
  background: #002B3B;
}
.drawer-icon-line:nth-of-type(2) {
  margin: 4px 0;
}

.drawer-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 252, 239, 0.8);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  z-index: 50;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.drawer-content.is-checked {
  -webkit-transform: translate(0);
          transform: translate(0);
}

.drawer-content__logo {
  padding: 12px 16px;
}
.drawer-content__logo img {
  width: 100px;
}

.drawer-content__nav {
  margin-top: 48px;
}

.drawer-content__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 48px;
}

.drawer-content__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.drawer-content__item::before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: #002B3B;
}

.drawer-content__link {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.drawer-content__link:hover {
  opacity: 0.6;
}

.fv {
  margin-top: 52px;
}
@media (min-width: 768px) {
  .fv {
    margin-top: 0;
  }
}

.fv__inner {
  position: relative;
}

.fv__img img {
  width: 100%;
}

.fv__paragraph {
  position: absolute;
  bottom: 21px;
  right: 5.8666666667vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 9px;
}
@media (min-width: 768px) {
  .fv__paragraph {
    bottom: 33px;
    right: 1.9vw;
  }
}

.fv__text {
  display: block;
  padding: 0 1.3333333333vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 4vw;
  letter-spacing: 1.05px;
}
@media (min-width: 768px) {
  .fv__text {
    font-size: 1.6vw;
  }
}

.about__inner {
  padding: 48px 16px;
  background: #FFFCEF;
}

.about__img {
  margin-top: 27px;
}

.about__text {
  margin-top: 27px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .about__text {
    font-size: 1.3888888889vw;
  }
}

.about__bg img {
  width: 100vw;
}

.reason {
  padding: 48px 0;
}

.reason__inner {
  padding: 0 16px;
}

.reason__list {
  margin-top: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}

.reason__item-topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 36px;
}
@media (min-width: 768px) {
  .reason__item-topic {
    gap: 60px;
  }
}

.reason__item-nmb {
  font-family: "Roboto Condensed", serif;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .reason__item-nmb {
    font-size: 5.2083333333vw;
  }
}

.reason__item-title {
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 24px;
  line-height: normal;
}
@media (min-width: 768px) {
  .reason__item-title {
    font-size: 2.6388888889vw;
  }
}

.reason__item-text {
  margin-top: 15px;
}
@media (min-width: 768px) {
  .reason__item-text {
    font-size: 1.3194444444vw;
  }
}

.reason__img {
  margin-top: 35px;
  text-align: center;
}
.reason__img img {
  width: 91.4666666667vw;
  border-radius: 10px 70px;
}

.product__bg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.product__bg--footer {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.product__bg img {
  width: 100vw;
}

.product__inner {
  padding: 48px 16px;
  background: #FFFCEF;
}

.product__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 35px;
}

.product__item {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 27px;
  border-radius: 39px;
  background: #fff;
}

.product__img {
  text-align: center;
}

.product__paragraph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .product__name {
    font-size: 1.7361111111vw;
  }
}

.product__subName {
  display: block;
  font-size: 12px;
}
@media (min-width: 768px) {
  .product__subName {
    font-size: 1.25vw;
  }
}

.product__price {
  color: #D4DD00;
  font-family: "Roboto Condensed", serif;
  font-size: 40px;
  line-height: normal;
}
@media (min-width: 768px) {
  .product__price {
    font-size: 4.375vw;
  }
}

.product__price-en {
  color: #D4DD00;
  font-size: 16px;
  font-family: "Roboto Condensed", serif;
  line-height: normal;
}
@media (min-width: 768px) {
  .product__price-en {
    font-size: 1.8055555556vw;
  }
}

.product__price-tax {
  color: #002B3B;
  font-family: "Noto Sans JP", serif;
  font-size: 10px;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .product__price-tax {
    font-size: 1.0416666667vw;
  }
}

.product__place {
  font-size: 10px;
}
@media (min-width: 768px) {
  .product__place {
    font-size: 1.0416666667vw;
  }
}

.product__btn {
  width: 231px;
  margin: 0 auto;
  padding: 8px 67px 10px 68px;
  border-radius: 50px;
  background: #C30D23;
  color: #FFFFFF;
  font-size: 12px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.product__btn:hover {
  opacity: 0.6;
}

.strength {
  padding: 48px 0;
  background: url(../images/strength-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}

.strength__inner {
  padding: 0 16px;
}

.strength__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

.strength__item__text {
  margin-top: 15px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .strength__item__text {
    font-size: 1.3194444444vw;
  }
}

.strength__table-list {
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}

.strength__table-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 51px;
}
.strength__table-img img {
  width: clamp(119px, 38.4vw, 144px);
}
@media (min-width: 768px) {
  .strength__table-img img {
    width: 10vw;
  }
}

.strength__table-text {
  margin-top: 10px;
  text-align: center;
}

.farm {
  padding: 48px 0;
}

.farm__inner {
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

.farm__img img {
  border-radius: 10px 70px;
}

.farm__paragraph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}

.farm__title {
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 20px;
}
@media (min-width: 768px) {
  .farm__title {
    font-size: 2.2222222222vw;
  }
}

.farm__name {
  font-weight: 500;
}
@media (min-width: 768px) {
  .farm__name {
    font-size: 1.7361111111vw;
  }
}

@media (min-width: 768px) {
  .farm__text {
    font-size: 1.7361111111vw;
  }
}

.question {
  padding: 48px 0;
}

.question__inner {
  padding: 0 16px;
}
@media (min-width: 768px) {
  .question__inner {
    padding: 0 17px;
  }
}

.question__list {
  margin-top: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}

.question__q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 15px;
}

.question__q-q {
  padding: 6px 12px 5px 12px;
  display: block;
  border-radius: 50%;
  background: #002B3B;
  color: #FFFFFF;
  font-family: "Roboto Condensed", serif;
  font-size: 24px;
  line-height: normal;
}
@media (min-width: 768px) {
  .question__q-q {
    padding: 6px 17px 5px 17px;
    font-size: 40px;
  }
}

.question__q-topic {
  display: block;
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 20px;
}
@media (min-width: 768px) {
  .question__q-topic {
    font-size: 2.2916666667vw;
  }
}

.question__a {
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}

.question__a-a {
  padding: 6px 12px 5px 13px;
  display: block;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 50%;
  background: #D4DD00;
  color: #FFFFFF;
  font-family: "Roboto Condensed", serif;
  font-size: 24px;
  line-height: normal;
}
@media (min-width: 768px) {
  .question__a-a {
    padding: 6px 17px 5px 17px;
    font-size: 40px;
  }
}

.question__a-topic {
  font-family: "Zen Kaku Gothic New", serif;
  font-size: 20px;
}
@media (min-width: 768px) {
  .question__a-topic {
    font-size: 2.2916666667vw;
  }
}

.question__a-text {
  display: block;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .question__a-text {
    font-size: 1.8055555556vw;
  }
}

.footer {
  padding: 12px 0;
}

.footer__inner {
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.footer__logo img {
  width: 100px;
}
@media (min-width: 768px) {
  .footer__logo img {
    width: 140px;
  }
}

.copy small {
  display: block;
  font-family: "Roboto Condensed", serif;
  font-size: 5px;
  line-height: normal;
}
@media (min-width: 768px) {
  .copy small {
    font-size: 10px;
  }
}