@charset "UTF-8";

@import "../_setting";
@import "../_mixin";
@import "../base/_fs-base";
@import "../base/_reset";
@import "../base/_body";
@import "../_layout";
@import "../module/_button";
@import "../module/_title";
@import "../module/_form";
@import "../module/_other";
@import "../module/_modal";
@import "../_state";


/*****************************
TOP
*****************************/
.top {
  // 1colum parts
  &__mv {
    .fs-c-slick .slick-prev, .fs-c-slick .slick-next {
      border-radius: 50%;
      background-color: rgba($color4, 0.6);
    }
    .fs-c-slick .slick-prev:before, .fs-c-slick .slick-next:before {
      opacity: 1;
    }
    .fs-c-slick .slick-prev {
      left: calc(50% - 500px);
      transform: translateX(-50%);
      @include breakpoint(1100px) {
        left: 0;
        transform: translateX(0%);
      }
    }
    .fs-c-slick .slick-next {
      right: calc(50% - 500px);
      transform: translateX(50%);
      @include breakpoint(1100px) {
        right: 0;
        transform: translateX(0%);
      }
    }
    .slick-dots {
      display: none !important;
      @include bpTb {
        bottom: -17px;
        display: block !important;
        text-align: center;
      }
    }
    .fs-c-slick .slick-dots li {
      margin: 5px;
    }
    .fs-c-slick .slick-dots li button:before {
      color: $color4;
      font-size: 15px;
    }
  }

  &__search {
    max-width: 610px;
    width: 100%;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    @include bpTb {
      display: none;
    }

    .fs-p-headerNavigation__search {
    }
    .fs-p-inputGroup {
      background-color: transparent;
      border: none;
    }
    .fs-p-searchForm__input {
      width: calc(100% - 5.2em);
      border: 1px solid $color3;
      @include f-size(18);
      padding: 10px;
    }
    .fs-p-searchForm__button {
      width: 5em;
      height: auto;
      padding: 5px;
      margin-left: 10px;
      border-radius: 3px;
      text-indent: 0;
    }
    .fs-p-searchForm__button::before {
      position: static;
      display: inline;
      vertical-align: bottom;
      @include f-size(20);
    }

    &-keyword {
      margin-top: 10px;
      a {
        margin-left: 10px;
        border-bottom: 1px solid $color11;
        color: $color11;
        &:visited {
          color: $color11;
        }
        &:hover {
          border-bottom: none;
          text-decoration: none;
        }
      }
    }
  }

  &__banner {
    margin-top: 35px;
    margin-bottom: 80px;
    padding-top: 15px;
    padding-bottom: 45px;
    background-color: $color2;
    @include bpTb {
      margin-bottom: 50px;
    }
    @include bpSp {
      margin-bottom: 35px;
    }

    &-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      @include bpTb {
        max-width: $baseWidthSp;
      }
    }
    &-item {
      display: block;
      width: 100%;
      margin-top: 30px;
      text-align: center;
      @include bpTb {
        margin-top: 15px;
      }
      &-col1 {
        max-width: 100%;
      }
      &-col2 {
        max-width: 48%;
        @include bpSp {
          max-width: 100%;
        }
      }
      &-col3 {
        max-width: 31%;
        @include bpSp {
          max-width: 100%;
        }
      }
      &-col4 {
        max-width: 23%;
        @include bpSp {
          max-width: 48%;
        }
      }
    }
  }

  &__gift {
    &-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 35px;
      @include bpSp {
        margin-top: 15px;
      }
      &::before,
      &::after {
        content: "";
        display: block;
        max-width: 23%;
        width: 100%;
        height: 0;
        order: 1;
        @include bpSp {
          content: none;
        }
      }
    }
    &-item {
      max-width: 23%;
      width: 100%;
      @include bpSp {
        max-width: 48%;
        margin-top: 10px;
      }
    }
    &-link {
      font-weight: 500;
    }
    &-image {
      margin-bottom: 5px;
    }
  }
  &__btn-wrap {
    margin-top: 55px;
    @include bpTb {
      margin-top: 40px;
    }
    @include bpSp {
      margin-top: 30px;
    }
  }

  &__news {
    .fs-pt-column {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .fs-pt-column__item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      max-width: 535px;
      width: 100%;
      margin-top: 20px;
      @include bpTb {
        max-width: 48%;
      }
      @include bpSp {
        max-width: 100%;
      }
    }
    .fs-pt-column__image {
      max-width: 200px;
      width: 100%;
      margin-right: 10px;
    }
    .fs-pt-column__heading {
      margin-top: 0;
      font-weight: 500;
      @include f-size(18);
    }
    .fs-pt-column__description {
      display: none;
    }
    time {
      display: block;
      color: $color12;
      font-weight: 400;
      @include f-size(18);
    }
  }

  // parts
  &__content {
    &-style1 {
      &:not(:first-of-type) {
        margin-top: 90px;
        padding-top: 90px;
        border-top: 1px solid $color3;
        @include bpTb {
          margin-top: 60px;
          padding-top: 60px;
        }
        @include bpSp {
          margin-top: 40px;
          padding-top: 40px;
        }
      }
    }
    &-style2 {
      margin-top: 105px;
      @include bpTb {
        margin-top: 60px;
      }
      @include bpSp {
        margin-top: 40px;
      }
    }

    &-inner {
      margin-top: 35px;
    }
  }


  // 2colum parts

  // main
  &__content {
    &-banner {
      &-top {
        display: block;
        text-align: center;
      }
      &-bottom {
        display: block;
        margin-top: 40px;
        text-align: center;
      }
    }

    &-inner {
      & + & {
        margin-top: 50px;
        @include bpSp {
          margin-top: 35px;
        }
      }
      &-box {
        margin-top: 30px;
        @include bpSp {
          margin-top: 20px;
        }
        @include bpTb {
          display: flex;
          flex-direction: column;
        }
      }
      &-text {
        @include f-size(19);
        line-height: 2;
        @include bpSp {
          @include f-size(17);
          line-height: 1.7;
        }
        &:not(:last-child) {
          margin-bottom: 1.4em;
        }
        em {
          font-weight: bold;
        }
      }

      &-image {
        display: flex;
        justify-content: space-between;
        @include bpTb {
          margin-top: 10px;
          align-items: flex-start;
          order: 1;
        }
        img {
          @include bpTb {
            align-self: flex-start;
            width: 100%;
            height: auto;
          }
          & + img {
            @include bpTb {
              margin-left: 4%;
            }
          }
        }
        &:first-child {
          margin-bottom: 1.4em;
        }
        &-vertical {
          flex-direction: column;
          @include bpTb {
            flex-direction: row;
          }
          img {
            & + img {
              margin-top: 18px;
              @include bpTb {
                margin-top: 0;
                margin-left: 4%;
              }
            }
          }
        }
        &-right {
          float: right;
          margin-left: 40px;
          @include bpTb {
            float: none;
            margin-left: 0px;
          }
        }
      }

      &-list {
        &-item {
          @include f-size(17);
          @include bpSp {
            @include f-size(16);
          }
          &:not(:first-of-type) {
            // margin-top: 10px;
          }
        }
      }

      &-movie {
        position: relative;
        width: 100%;
        height: 0;
        margin-top: 60px;
        padding-top: 56.3%;
        overflow: hidden;
        order: 2;
        &:first-child {
          margin-bottom: 1.4em;
        }
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

    &-worry {}
    &-favorite {}
    &-about {}
    &-commitment {}
    &-jas {}
    &-trademark {}
  }
}



/*****************************
PRODUCT
*****************************/
#production {
  &.l-main-col2 {
    margin-top:  -90px;
    padding-top: 170px;
    @include bpTb {
      margin-top:  -50px;
      padding-top: 100px;
    }
  }
}
.header-belt {
  background-image: url(../../img/common/bg_belt.jpg?);
  @include bpTb {
    margin-top: 90px;
  }
  &-text {
    font-family: $Serif;
    color: #ffffff;
    @include f-size(22);
    text-align: center;
  }
}
.fs-l-productLayout__item--2 {
  .fs-c-productNameHeading__copy {}
  .fs-c-productNameHeading__name {
    @include f-size(25);
    line-height: 1.1;
    @include bpSp {
      @include f-size(22);
    }
  }
  .fs-c-productNameHeading {
    margin-bottom: 0;
  }
  .fs-c-productNumber {
    .fs-c-productNumber__label {}
    .fs-c-productNumber__number {
      font-weight: 400;
    }
  }

  .fs-c-productMarks {
    .fs-c-mark {}
    .fs-c-mark__label {}
  }
  .fs-c-productPrices--productDetail {
    .fs-c-productPrice--selling {
      justify-content: flex-end;
      .fs-c-productPrice__main {
        .fs-c-productPrice__main__label {}
        .fs-c-productPrice__main__price {
          color: $color4;
          @include f-size(36);
          font-weight: bold;
          line-height: 1;
          @include bpSp {
            @include f-size(28);
          }
          .fs-c-price__currencyMark {}
          .fs-c-price__value {}
        }
      }

      .fs-c-productPrice__addon {
        @include f-size(16);
        &::before {}
        &::after {}
        .fs-c-productPrice__addon__label {}
      }
    }
  }

  .fs-c-productPointDisplay {
    display: block;
    background-color: transparent;
    text-align: right;
    color: $color4;
    @include f-size(15);
  }

  .fs-c-productQuantityAndAction {
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    .fs-c-productQuantityAndAction__action {
      width: 100%;
      border-radius: 5px;
      overflow: hidden;
      .fs-c-button--addToCart--subscriptionDetail {
        width: 100%;
        padding: 0.8em 1.6em 0.8em;
        background-color: $color1;
        @include f-size(25);
        font-weight: bold;
        border: none;
        @include bpSp {
          @include f-size(20);
        }
      }
      .fs-c-button--addToSubscriptionCart--detail {
        width: 100%;
        padding: 0.8em 1.6em 0.8em;
        background-color: $color8;
        @include f-size(25);
        font-weight: bold;
        border: none;
        @include bpSp {
          @include f-size(20);
        }
      }

      &.fs-c-productQuantityAndAction--subscription {}
    }
    .fs-c-productQuantityAndAction__quantity {
      display: flex;
      align-self: flex-start;
      align-items: center;
      &::before {
          content: '数量';
          display: block;
          width: 5em;
          vertical-align: middle;
      }
      &.fs-c-quantity {
        width: 22%;
        position: relative;
      }
    }
    .fs-c-buttonContainer {}
    .fs-c-productQuantityAndAction__quantity {
      margin-bottom: 10px;
    }

  }
  .fs-c-subscriptionPriceTable {}
  .fs-c-subscriptionPriceTable__label,
  .fs-c-subscriptionPriceTable__price {
    border: none;
  }
  .fs-c-subscriptionPriceTable__label {
    background-color: transparent;
    @include f-size(22);
    font-weight: bold;
    @include bpSp {
      @include f-size(18);
    }
  }
  .fs-c-subscriptionPriceTable__price {
    .fs-c-productPrice__main__price {
      color: $color4;
      @include f-size(34);
      font-weight: bold;
      @include bpSp {
        @include f-size(26);
      }
    }
    .fs-c-productPrice__addon {
      @include f-size(16);
    }
  }

  // 通常
  .fs-c-button--addToCart--detail {
    width: 100%;
    padding: 0.8em 1.6em 0.8em;
    background-color: $color1;
    @include f-size(25);
    font-weight: bold;
    border: none;
    @include bpSp {
      @include f-size(20);
    }
  }
}

.fs-c-productQuantityAndWishlist__quantity {
  display: flex;
  align-self: flex-start;
  align-items: center;
  &::before {
      content: '数量';
      display: block;
      width: 5em;
      vertical-align: middle;
  }
  &.fs-c-quantity {
    position: relative;
  }
}

.product {
  &__lp {}

  &__addcart {
    margin-bottom: 30px !important;
    padding-bottom: 30px;
    border-bottom: 2px dotted $color2;
    @include bpSp {
      margin-bottom: 20px !important;
      padding-bottom: 20px;
    }
  }
  &__subscription {
    padding: 30px 35px;
    background-color: $color2;
    @include bpSp {
      padding: 20px 25px;
    }
    &-image {
      margin-top: 20px;
      margin-bottom: 20px;
      text-align: center;
      @include bpSp {
        margin-top: 10px;
        margin-bottom: 15px;
      }
    }
  }

  &__information {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    @include bpSp {
      display: block;
      margin-top: 40px;
    }
    &-description {
      max-width: 48%;
      width: 100%;
      @include bpSp {
        max-width: 100%;
      }
      .fs-p-productDescription--full {
        margin-top: 25px;
        @include f-size(19);
      }
    }
    &-ingredient {
      max-width: 48%;
      width: 100%;
      @include bpSp {
        max-width: 100%;
      }
      .fs-p-productDescription--short {
        margin-top: 25px;
      }
      table {
        width: 100%;
        tr {
          th,td {
            padding: 20px;
            border: 1px solid $color16;
            @include f-size(19);
            @include bpSp {
              padding: 13px;
            }
          }
          th {
            width: 145px;
            background-color: $color2;
            text-align: center;
            font-weight: 500;
          }
          td {
            font-weight: 400;
          }
        }
      }
    }
  }

  &__btn {
    &-wrap {
      margin-top: 50px;
      @include bpSp {
        margin-top: 30px;
      }
    }
  }

  &__review {
    margin-top: 70px;
    @include bpSp {
      margin-top: 40px;
    }
    .fs-c-productReview {
      margin-top: 30px;
      padding: 25px;
      background-color: #ffffff;
      border: 25px solid $color2;
      @include bpSp {
        padding: 15px;
        border: 15px solid $color2;
      }
    }

    .fs-c-aggregateRating {
      margin-bottom: 10px;
    }

    .fs-c-reviewList--productDescription {
      .fs-c-reviewList__item {
        padding-right: 0;
        padding-left: 0;
        border-bottom: 2px solid $color3;
        &:first-child {
          border-top: 2px solid $color17;
        }
      }
    }

    .fs-c-aggregateRating__count {
      @include f-size(18);
      &::after {}
    }

    .fs-c-reviewer__name {
      @include f-size(18);
      .fs-c-reviewer__name__nickname {}
      .fs-c-reviewer__name__reviewNumber {
        &::before {}
        &::after {}
      }
    }

    .fs-c-button__label {}
    .fs-c-productReview__allReviews {
      padding-bottom: 0;
      .fs-c-button--viewAllReviews {
        &::before {}
      }
    }

    .fs-c-productReview__addReview {
      padding-top: 0;
      .fs-c-button--addReview--detail {
        &::before {}
      }
    }
  }

  &__production {
    h1 {
      padding-bottom: 5px;
      border-bottom: 2px solid $color8;
      font-family: $Serif;
      @include f-size(28);
      font-weight: 600;
      @include bpSp {
        @include f-size(24);
        line-height: 1.5;
      }
      &:not(:first-child) {
        margin-top: 30px;
      }
    }
    h2 {
      padding: 5px 15px 7px;
      border-left: 5px solid $color8;
      background-color: $color13;
      font-family: $Serif;
      @include f-size(28);
      font-weight: 600;
      @include bpSp {
        @include f-size(24);
        line-height: 1.5;
      }
      &:not(:first-child) {
        margin-top: 30px;
      }
    }
    h3 {
      padding: 10px 7px;
      border-top: 1px solid $color4;
      border-bottom: 1px solid $color4;
      @include f-size(22);
      font-weight: 500;
      @include bpSp {
        @include f-size(20);
        line-height: 1.5;
      }
      &:not(:first-child) {
        margin-top: 30px;
      }
    }
    p {
      @include f-size(19);
      line-height: 2;
      @include bpSp {
        @include f-size(17);
        line-height: 1.5;
      }
      &:not(:first-child) {
        margin-top: 30px;
        @include bpSp {
          margin-top: 20px;
        }
      }
      em {
        font-weight: bold;
      }
      a {
        color: $color11;
        border-bottom: 1px solid $color11;
        &:hover {
          text-decoration: none;
        }
      }
    }
    iframe {
      max-width: 100%;
      &:not(:first-child) {
        margin-top: 30px;
        @include bpSp {
          margin-top: 20px;
        }
      }
    }
  }
}

/*****************************
PRODUCT-LIST
*****************************/
.fs-c-productList {
  margin-top: 90px;
  padding-top: 25px;
  border-top: 1px solid $color3;
  @include bpTb {
    margin-top: 60px;
    padding-top: 15px;
  }
}
.fs-c-productList__controller {
  .fs-c-sortItems {
    @include bpTb {
      border: none;
    }
  }
  .fs-c-sortItems__label {
    border: none;
    @include f-size(15);
    font-weight: 500;
    @include bpTb {
      @include f-size(13);
    }
    @include bpSp {
      @include f-size(12);
    }
    &::after {
      content: '：';
    }
  }
}
.fs-c-sortItems__list {
  .fs-c-sortItems__list__item {
    border-top: 1px solid $color4;
    border-right: 1px solid $color4;
    border-bottom: 1px solid $color4;
    &:first-of-type {
      border-left: 1px solid $color4;
    }
    .fs-c-sortItems__list__item__label {
      padding: 10px 15px;
      background-color: #ffffff;
      @include f-size(15);
      font-weight: 500;
      @include bpTb {
        padding: 5px 10px;
        @include f-size(13);
      }
      @include bpSp {
        padding: 5px 5px;
        @include f-size(12);
      }
    }
    &.is-active {
      .fs-c-sortItems__list__item__label {
        background-color: $color4;
      }
    }
  }
}

.fs-c-listControl__status {
  @include f-size(15);
  font-weight: 500;
  @include bpTb {
    @include f-size(13);
  }
}

.fs-c-pagination {
  align-items: center;
}
.fs-c-pagination__item {
  padding: 15px 13px;
  color: $color4;
  @include f-size(15);
  font-weight: 500;
  @include bpTb {
    @include f-size(13);
    padding: 12px 10px;
  }
  &.is-active {
    background-color: $color9;
    color: $color4;
  }
}
.fs-c-pagination__item--next {
  display: inline-block;
  width: auto;
  margin-top: 5px;
  &::before {
    width: auto;
    height: auto;
    @include f-size(25);
    line-height: 0.6;
  }
}

.fs-c-productList__list {
  display: block;
  padding-right: 50px;
  padding-left: 50px;
  @include bpTb {
    padding-right: 35px;
    padding-left: 35px;
  }
  @include bpSp {
    padding-right: 0px;
    padding-left: 0px;
  }
  .fs-c-productList__list__item {
    // border-bottom: none;
    padding: 35px 0;
    @include bpSp {
      padding: 35px 0 25px;
    }
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
  .fs-c-productName {
    margin-top: 0;
    margin-bottom: 0;
    @include f-size(25);
    @include bpTb {
      @include f-size(20);
    }
  }
  .fs-c-productListItem__image {
    float: left;
    max-width: 500px;
    width: 100%;
    margin-right: 50px;
    @include bpTb {
      float: none;
    }
  }
  .fs-c-productListItem__viewMoreImageButton,
  .fs-c-button--addToWishList--icon {
    display: none;
  }
  .fs-c-productMarks {
    margin-top: 15px;
    .fs-c-mark--normalAndSubscription {
      min-width: 90px;
      background-color: $color4;
      padding: 8px;
      color: #ffffff;
      @include f-size(15);
    }
  }
    .fs-c-productMark__mark {
      padding: 9px !important;
      margin-bottom: 2px !important;
      font-size: 1.7rem !important;
    }
  
  .fs-c-productListItem__prices {
    margin-top: 25px;
    @include bpTb {
      margin-top: 15px;
    }
    @include bpSp {
      margin-top: 10px;
    }
    .fs-c-productPrice__main__label {
      margin-right: 10px;
      @include f-size(22);
      font-weight: 500;
      @include bpSp {
        @include f-size(20);
      }
    }
    .fs-c-productPrice__main__price {
      color: $color4;
      @include f-size(36);
      font-weight: bold;
      @include bpTb {
        @include f-size(30);
      }
      @include bpSp {
        @include f-size(28);
      }
    }
    .fs-c-productPrice__addon {
      @include f-size(16);
      font-weight: 500;
    }
  }

  .fs-c-productListItem__productName,
  .fs-c-productListItem__prices,
  .fs-c-productListItem__control,
  .fs-c-productListItem__outOfStock {
    max-width: 450px;
    flex-wrap: wrap;
    margin-left: auto;
    @include bpTb {
      max-width: 100%;
    }
  }
  .fs-c-button--viewProductDetail {
    position: relative;
    width: 100%;
    margin-top: 17px;
    padding: 0.8em 1.6em 0.8em;
    background-color: $color1;
    color: #ffffff;
    @include f-size(20);
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-align: center;
    @include bpSp {
      padding: 0.6em 1.2em 0.6em;
      @include f-size(16);
    }
    &::before {
      content: "\f054";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      font-family: "Font Awesome 5 Free" !important;
      font-weight: 900;
      line-height: 1;
    }
  }
  .fs-c-button--addToCart--list {
    max-width: 100%;
    width: 100%;
    margin-top: 17px;
    padding: 0.8em 1.6em 0.8em;
    background-color: $color1;
    color: #ffffff;
    @include f-size(20);
    font-weight: bold;
    border: none;
    border-radius: 5px;
    @include bpTb {
      max-width: 100%;
    }
    @include bpSp {
      padding: 0.6em 1.2em 0.6em;
      @include f-size(16);
    }
    &::after {}
  }
  .fs-c-button--addToWishList--icon {
    display: block;
    margin-top: 10px;
    &::before {
      vertical-align: text-top;
    }
    .fs-c-button__label {
      display: inline-block;
    }
  }
}

/*****************************
LOGIN
*****************************/
.fs-body-wishlist-login,
.fs-body-login {
  .fs-c-loginForm {
    align-items: flex-start;
  }
  .fs-c-registeredUsers,
  .fs-c-newUsers {
    padding: 50px 45px;
    border: 2px solid $color3;
    @include bpSp {
      padding: 20px 15px;
    }
  }
  .fs-c-registeredUsers {
    flex-basis: calc(57.5% + 35px);
  }
  .fs-c-newUsers {
    margin-left: 35px;
    @include bpTb {
      margin-left: 0;
    }
  }
  .fs-c-inputInformation__field {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
  }
  .fs-c-subSection__title {
    margin-bottom: 20px;
    border-bottom: none;
    color: $color19;
    @include f-size(22);
    font-weight: 500;
    text-align: center;
  }
  .fs-c-inputTable>tbody>tr {
    display: block;
  }
  .fs-c-inputTable__headerCell,
  .fs-c-inputTable__dataCell {
    display: block;
  }
  .fs-c-inputTable__headerCell {
    padding-left: 0;
  }
  .fs-c-inputTable__dataCell {
    max-width: 100%;
    width: 100%;
  }
  .fs-c-requiredMark::before {
    content: none;
  }
  .fs-c-inputInformation__link {
    text-align: center;
    .fs-c-textLink {
      color: $color11;
      border-bottom: 1px solid $color11;
    }
  }

  .fs-c-otherServiceLogin {
    margin-bottom: 0;
  }
  .fs-c-anotherLogin__button--amazon {
    margin-top: 15px;
  }
  .fs-c-anotherLogin__message--amazon {
    p {
      @include f-size(18);
      @include bpSp {
        @include f-size(16);
      }
    }
  }

  .fs-c-newUsers__message {
    @include f-size(19);
    @include bpSp {
      @include f-size(16);
    }
  }
}


/*****************************
CART
*****************************/
.fs-body-cart {
  .fs-l-cart {
    margin-top: 75px;
    @include bpSp {
      margin-top: 40px;
    }
  }
  .fs-c-cartTable {
    th,td {
      @include bpTb {
        border: 1px solid $color18;
      }
    }
  }
  .fs-c-cartTable__row {
    @include bpSp {
      display: table-row;
    }
  }
  .fs-c-cartTableContainer {
    padding: 0;
    border: none;
  }
  .fs-l-cart__contentsArea {
    grid-template-columns: 1fr;
    grid-row-gap: 0;
  }
  .fs-c-cartTable__productInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fs-c-cartTable__headerCell,
  .fs-c-cartTable__dataCell {
    vertical-align: middle;
  }
  .fs-c-cartTable__headerCell {
    background-color: $color13;
    @include f-size(22);
    font-weight: 500;
    text-align: center;
  }
  .fs-c-cartTable__dataCell {
    padding: 20px;
  }
  .fs-c-cartTable__unitPrice {
    display: none;
  }
  .fs-c-cartTable__dataCell--quantity {
    @include f-size(24);
    font-weight: bold;
    text-align: center;
  }
  .fs-c-cartTable__dataCell--subtotal {
    @include f-size(24);
    font-weight: bold;
    text-align: center;
  }
  .fs-c-cartTable__dataCell--point {
    @include f-size(24);
    font-weight: bold;
    text-align: center;
    @include bpSp {
      text-align: right;
    }
  }
  .fs-c-cartTable__dataCell--action {
    text-align: center;
    .fs-c-button__label {
      @include f-size(19);
      font-weight: 500;
    }
  }

  .fs-c-cartTable__dataCell--point::before,
  .fs-c-cartTable__dataCell--quantity::before,
  .fs-c-cartTable__dataCell--subtotal::before {
    @include bpSp {
      @include f-size(16);
    }
  }
  .fs-c-cartDiscountInfo__info {
    color: $color7;
    @include f-size(24);
    font-weight: 400;
  }

  .fs-c-totalAndActions {
    margin-top: -80px;
    padding: 0;
    border: none;
    @include bpTb {
      margin-top: 0;
    }
  }
  .fs-c-orderTotalTable {
    max-width: 500px;
    width: 100%;
    border: 1px solid $color18;
    margin-left: auto;
    @include bpTb {
      max-width: 100%;
    }
  }
  .fs-c-orderTotalTable__count,
  .fs-c-orderTotalTable__itemPriceSummary,
  .fs-c-orderTotalTable__getPoint {
    th,td {}
    th {
      width: 210px;
      background-color: $color13;
      @include f-size(18);
      font-weight: 500;
    }
    td {}
  }

  .fs-c-purchaseHere {
    display: flex;
    justify-content: center;
    @include bpSp {
      flex-direction: column;
    }
  }
  .fs-c-purchaseHere__message {
    display: none;
  }
  .fs-c-buttonContainer {
    display: block;
    max-width: 445px;
    width: 100%;
  }
  .fs-c-buttonContainer--registerAndSubscribe,
  .fs-c-buttonContainer--unregisteredUserPurchase {
    margin-left: 10px;
    @include bpSp {
      margin-left: 0;
    }
  }

  .fs-c-payWithAmazon__message {
    text-align: center;
    p {
      @include f-size(19);
    }
  }
  .fs-c-payWithAmazon__button {
    margin-top: 25px;
  }
}

.fs-body-cart.fs-body-cartSubscribe {
  .fs-l-cart__contentsArea {
    grid-template-columns: 1fr;
  }
  .fs-c-totalAndActions {
    margin-top: 35px;
  }
}
.cart-p-announcement {
  padding: 20px;
  background-color: $color13;
  font-family: $Serif;
  @include f-size(26);
  font-weight: 500;
  line-height: 1;
}
.cart-p-announcement-more {
  margin-top: 15px;
  margin-bottom: 15px;
  @include f-size(19);
  font-weight: 500;
}


/*****************************
MY PAGE
*****************************/
.mypage-user {
  @include bpTb {
    margin-bottom: 20px;
  }
  &__text {
    @include f-size(18);
    @include bpSp {
      @include f-size(16);
    }
    .num {
      color: $color7;
      @include f-size(30);
      @include bpSp {
        @include f-size(24);
      }
    }
  }
}

.mypage-information {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid $color3;
  @include bpSp {
    margin-top: 40px;
    padding-top: 40px;
  }
  &__box {
    & + & {
      margin-top: 50px;
      @include bpSp {
        margin-top: 40px;
      }
    }
  }
  &__text {
    @include f-size(19);
    @include bpSp {
      @include f-size(16);
    }
    .num {
      color: $color7;
    }
    .link {
      color: $color11;
      border-bottom: 1px solid $color11;
      &:hover {
        border: none;
        text-decoration: none;
      }
    }
  }
}

.mypage__logout {
  margin-bottom: 30px;
  a {
    color: $color8;
  }
}


/*****************************
CATEGORY
*****************************/
.cateList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 45px;
  &-item {
    margin-bottom: 15px;
    border-left: 1px solid $color3;
    @include bpSp {
      width: 50%;
    }
    &:last-of-type {
      border-right: 1px solid $color3;
    }
    &:nth-of-type(even) {
      @include bpSp {
        border-right: 1px solid $color3;
        border-right: 1px solid $color3;
      }
    }
  }
  &-link {
    display: block;
    padding-right: 40px;
    padding-left: 40px;
    @include f-size(17);
    font-weight: 500;
    @include bpSp {
      padding-right: 10px;
      padding-left: 10px;
      @include f-size(14);
    }
  }
}

.cateProduct {
  &-item {
    & + & {
      margin-top: 30px;
    }
  }
}



/*****************************
PRIVACY
*****************************/
.privacy {
  &-text {
    @include f-size(19);
    letter-spacing: -0.5px;
    line-height: 1.8;
    @include bpSp {
      @include f-size(16);
    }
  }
  &__company {
    &-text {
      margin-bottom: 20px;
    }
  }

  &__info {
    & + & {
      margin-top: 40px;
      @include bpSp {
        margin-top: 25px;
      }
    }
    &-heading {
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid $color3;
      @include f-size(22);
      font-weight: 500;
      @include bpSp {
        margin-bottom: 10px;
        padding-bottom: 7px;
        @include f-size(18);
      }
    }
    &-text {}

    &-list {
      &-item {
        text-indent: -1.5em;
        padding-left: 1.5em;
      }
    }
    &-link {
      color: $color11;
      padding-bottom: 2px;
      border-bottom: 1px solid $color11;
      &:hover {
        border-bottom: none;
        text-decoration: none;
      }
    }
  }
}


/*****************************
TERMS
*****************************/
.terms {
  &-text {
    @include f-size(19);
    letter-spacing: -0.4px;
    line-height: 1.9;
    @include bpSp {
      @include f-size(16);
    }
  }
  &__info {
    & + & {
      margin-top: 25px;
      @include bpSp {
        margin-top: 20px;
      }
    }
    &-heading {
      margin-bottom: 10px;
      @include f-size(22);
      font-weight: 500;
      @include bpSp {
        margin-bottom: 5px;
        @include f-size(20);
      }
    }
    &-list {
      &-item {
        text-indent: -1.1em;
        padding-left: 1.1em;
      }
    }
  }
}

.terms {
  &__wrap {
    margin-top: 50px;
    @include bpSp {
      margin-top: 35px;
    }
    & + & {
      margin-top: 90px;
      @include bpSp {
        margin-top: 50px;
      }
    }
  }
  &__heading {
    padding: 11px 15px;
    background-color: $color13;
    font-family: $Serif;
    @include f-size(26);
    font-weight: 600;
    line-height: 1.4;
  }

  &__table {
    width: 100%;
    table-layout: fixed;
    &-wrap {
      margin-top: 25px;
    }

    tr {
      border-top: 1px solid $color3;
      &:last-of-type {
        border-bottom: 1px solid $color3;
      }
      th,td {
        padding: 17px 22px;
        @include f-size(19);
        line-height: 1.4;
        vertical-align: middle;
        @include bpSp {
          @include f-size(16);
        }
      }
      th {
        width: 195px;
        background-color: $color13;
        @include bpSp {
          width: 45%;
        }
      }
      td {}
    }
  }

  &__inner {
    margin-top: 35px;
    @include bpSp {
      margin-top: 25px;
    }
    &-title {
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid $color3;
      @include f-size(22);
      font-weight: 500;
      line-height: 1.3;
      @include bpSp {
        margin-bottom: 10px;
      }
    }
    &-text {
      @include f-size(19);
      @include bpSp {
        @include f-size(16);
      }
    }
    &-list {
      &-item {
        @include f-size(19);
        padding-left: 1em;
        text-indent: -1em;
        @include bpSp {
          @include f-size(16);
        }
      }
    }
  }
}


/*****************************
QA
*****************************/
.qa {
  &__anchor {
    &-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &::after {
        content: "";
        max-width: 252px;
        width: 100%;
        height: 0;
        @include bpTb {
          max-width: 31%;
        }
        @include bpSp {
          max-width:100%;
        }
      }
      &-item {
        max-width: 252px;
        width: 100%;
        @include bpTb {
          max-width: 31%;
        }
        @include bpSp {
          max-width:100%;
        }
      }
      &-link {
        position: relative;
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 12px 30px 12px 15px;
        @include f-size(18);
        background-color: $color3;
        border-radius: 5px;
        @include bpTb {
          padding-top: 7px;
          padding-bottom: 9px;
          @include f-size(16);
        }
        @include bpSp {
          margin-top: 15px;
          @include f-size(17);
        }
        &::after {
          content: "\f107";
          position: absolute;
          top: 50%;
          right: 15px;
          transform: translateY(-50%);
          @include iconFont;
        }
        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  &__content {
    margin-top: 40px;
    &-wrap {
      & + & {
        margin-top: 30px;
      }
    }

    &-heading {
      text-align: center;
      padding: 22px 30px 10px;
      background-image: url(../../img/common/m-heading-parts_leaf.png);
      background-size: 55px;
      background-repeat: no-repeat;
      background-position: left 70%;
      border-bottom: 2px solid $color4;
      font-family: $Serif;
      @include f-size(22);
      font-weight: 600;
      line-height: 1.5;
      text-align: left;
    }
    &-inner {
      margin-top: 25px;
    }

    &-title {
      padding-bottom: 6px;
      border-bottom: 1px solid $color3;
      color: $color8;
      @include f-size(22);
    }
    &-box {
      border-bottom: 1px solid $color3;
    }

    &-question {
      position: relative;
      padding-top: 25px;
      padding-right: 65px;
      padding-bottom: 30px;
      @include f-size(19);
      text-indent: -1.5em;
      padding-left: calc(15px + 1.5em);
      cursor: pointer;
      @include bpSp {
        padding-top: 15px;
        padding-right: 45px;
        padding-bottom: 20px;
        @include f-size(17);
      }
      &::before {
        content: 'Q.';
        margin-right: 5px;
        font-family: $Lato;
        color: $color1;
        @include f-size(20);
        font-weight: bold;
      }

      &::after {
        content: "\f107";
        position: absolute;
        top: 35px;
        right: 15px;
        @include iconFont;
        color: $color12;
        @include bpSp {
          top: 25px;
        }
      }

      &.is-active {
        &::after {
          content: "\f106";
        }
      }
    }
    &-answer {
      @include f-size(19);
      padding-left: calc(44px + 1.5em);
      text-indent: -1.5em;
      @include bpSp {
        padding-left: calc(14px + 1.5em);
        @include f-size(17);
      }
      &::before {
        content: 'A.';
        margin-right: 5px;
        font-family: $Lato;
        color: $color8;
        @include f-size(20);
        font-weight: bold;
      }

      &-wrap {
        display: none;
        padding: 30px 65px 30px 0;
        @include bpSp {
          padding: 30px 35px 30px 0;
        }
        background-color: $color13;
        &.is-active {
          padding-top: 30px;
          padding-bottom: 30px;
          @include bpSp {
            padding-top: 15px;
            padding-bottom: 20px;
          }
        }
        table {
          margin-left: 65px;
          @include bpSp {
            width: 768px;
            margin-left: 0;
          }
          &:not(:first-child) {
            margin-top: 15px;
          }
          tr {
            th,td {
              padding: 7px;
              @include f-size(19);
              background-color: #fff;
              border: 1px solid $color17;
              @include bpSp {
                @include f-size(17);
              }
            }
          }
        }
      }

      a {
        color: #3790e8;
        text-decoration: underline;
      }
    }
  }

  &__table-scroll {
    margin-top: 30px;
    @include bpSp {
      overflow-x: scroll;
      margin-left: 35px;
    }
  }
}



/*****************************
SHOPPING GUIDE
*****************************/
.shopping_guide {
  &__info {
    @include bpSp {
      margin-top: 40px;
    }
    &-heading {
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #cdcdcd;
      @include f-size(22);
      font-weight: 500;
      @include bpSp {
        margin-bottom: 10px;
        padding-bottom: 7px;
        @include f-size(18);
      }
    }
    &-text {
      @include f-size(18);
      letter-spacing: -0.5px;
      line-height: 2;
      @include bpSp {
        @include f-size(16);
      }
      .c-red {
        color: $color7;
      }
      a {
        border-bottom: 1px solid $color11;
        color: $color11;
        &:hover {
          text-decoration: none;
          border-bottom: none;
        }
      }
    }
    &-point {
      margin-top: 40px;
    }

    &-wrap {
      & + & {
        margin-top: 40px;
      }
    }

    & + & {
      margin-top: 55px;
    }
  }

  &-title {
    margin-bottom: 15px;
    padding: 10px 20px;
    background-color: $color13;
    font-family: $Serif;
    @include f-size(26);
    font-weight: 600;
    @include bpSp {
      padding: 7px 15px;
      @include f-size(21);
    }
  }
  &-text {
    margin-top: 10px;
  }

  &__table {
    margin-top: 30px;
    table-layout: fixed;
    caption {
      padding: 5px 10px;
      border-top: 1px solid $color3;
      border-right: 1px solid $color3;
      border-left: 1px solid $color3;
      @include f-size(18);
      text-align: center;
      @include bpSp {
        @include f-size(16);
      }
    }
    tr {
      th,td {
        padding: 5px 10px;
        @include f-size(18);
        border: 1px solid $color3;
        @include bpSp {
          @include f-size(16);
        }
      }
      th {
        width: 140px;
        background-color: $color13;
      }
      td {
        width: 175px;
      }
    }
  }
}



/*****************************
ABOUT
*****************************/
.about {
  &__anchor {
    &-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &::after {
        content: "";
        max-width: 252px;
        width: 100%;
        height: 0;
        @include bpTb {
          max-width: 31%;
        }
        @include bpSp {
          max-width:100%;
        }
      }
      &-item {
        max-width: 252px;
        width: 100%;
        @include bpTb {
          max-width: 31%;
        }
        @include bpSp {
          max-width:100%;
        }
      }
      &-link {
        position: relative;
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 12px 30px 12px 15px;
        @include f-size(18);
        background-color: $color3;
        border-radius: 5px;
        @include bpTb {
          padding-top: 7px;
          padding-bottom: 9px;
          @include f-size(16);
        }
        @include bpSp {
          margin-top: 15px;
          @include f-size(17);
        }
        &::after {
          content: "\f107";
          position: absolute;
          top: 50%;
          right: 15px;
          transform: translateY(-50%);
          @include iconFont;
        }
        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  &__content {
    margin-top: 85px;
    @include bpTb {
      margin-top: 60px;
    }
    @include bpSp {
      margin-top: 45px;
    }
    & + & {
      margin-top: 110px;
      @include bpTb {
        margin-top: 80px;
      }
      @include bpSp {
        margin-top: 60px;
      }
    }

    &-title {
      padding: 15px;
      background-color: $color13;
      font-family: $Serif;
      @include f-size(26);
      font-weight: 600;
      line-height: 1.4;
      @include bpSp {
        padding: 10px;
        @include f-size(22);
      }
    }
    &-text {
      margin-top: 20px;
      @include f-size(19);
      line-height: 2;
      @include bpSp {
        @include f-size(17);
      }
    }
    &-image {
      margin-top: 20px;
      & + & {
        margin-top: 15px;
      }
    }
    &-table {
      width: 100%;
      table-layout: fixed;
      @include bpTb {
        width: 780px;
      }
      tr {
        border-top: 1px solid $color3;
        &:last-of-type {
          border-bottom: 1px solid $color3;
        }
        th,td {
          padding: 15px 7px 17px 17px;
          @include f-size(19);
          @include bpSp {
            padding: 10px 15px;
            @include f-size(17);
          }
        }
        th {
          width: 195px;
          background-color: $color13;
        }
        td {
          &.photo {
            position: relative;
            img {
              position: absolute;
              top: 10px;
              right: 15px;
            }
            &.admin {
              padding-bottom: 30px;
              @include bpSp {
                padding-bottom: 50px;
              }
            }

            a {
              color: #3790e8;
              text-decoration: underline;
              &:hover {
                text-decoration: none;
              }
            }
          }
          &.inner {
            padding: 0;
          }
        }
      }
    }
    &-table-inner {
      table-layout: fixed;
      tr {
        border-top: none;
        &:last-of-type {
          border-bottom: none;
        }
        th,td {
          padding: 20px 14px;
          border: 1px solid $color13;
          @include f-size(15);
          vertical-align: top;
        }
        th {
          width: 75px;
          max-height: 100%;
          background-color: transparent;
          line-height: initial;
          text-align: center;
          vertical-align: middle;
          span {
            min-height: 5.2em;
            writing-mode: vertical-rl;
            text-align: left;
          }
        }
        td {
          vertical-align: middle;
          &.head {
            text-align: center;
            vertical-align: middle;
          }
          &.td-2 {
            width: 175px;
          }
          &.td-3 {
            width: 118px;
          }
          &.td-4 {
            width: 110px;
          }
        }
      }
    }


    &_philosophy {
      &-wrap {
        & + & {
          margin-top: 35px;
          @include bpSp {
            margin-top: 25px;
          }
        }
      }
      &-heading {
        color: $color8;
        @include f-size(22);
        font-weight: 500;
        @include bpSp {
          @include f-size(20);
        }
      }
      &-image {
        margin-top: 25px;
      }
      &-text {
        margin-top: 5px;
        @include f-size(19);
        @include bpSp {
          @include f-size(17);
        }
      }
      &-about {
        margin-top: 55px;
        @include f-size(19);
        text-align: right;
        @include bpSp {
          margin-top: 30px;
          @include f-size(17);
        }
      }
    }
    &_medicine {
      &-box {
        & + & {
          margin-top: 70px;
        }
      }
      &-sub {
        margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid $color3;
        @include f-size(22);
        font-weight: 500;
        @include bpSp {
          @include f-size(20);
        }
      }
      &-text {
        margin-top: 10px;
        @include f-size(19);
        line-height: 2;
        @include bpSp {
          @include f-size(17);
        }
      }
    }

    &-info {
      &-box {}
      &-text {
        margin-top: 50px;
        @include f-size(22);
        text-align: center;
        @include bpSp {
          @include f-size(20);
        }
      }
      &-map {
        margin-top: 30px;
      }
      &-mapWrap {
        position: relative;
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-top: 44.5%;
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
    &-booking {
      &-text {
        margin-top: 25px;
        @include f-size(22);
        text-align: center;
        font-weight: 500;
        @include bpSp {
          @include f-size(20);
        }
      }
      &-link {
        border-bottom: 3px solid $color11;
        color: $color11;
        @include f-size(56);
        font-weight: bold;
        line-height: 1;
        @include bpSp {
          @include f-size(36);
        }
        .min-text {
          @include f-size(28);
          @include bpSp {
            @include f-size(24);
          }
        }
      }
      &-time {
        display: inline-block;
        margin-top: 15px;
        @include f-size(23);
        font-weight: bold;
        @include bpSp {
          @include f-size(20);
        }
      }
    }
  }
  &__btn-wrap {
    margin-top: 30px;
  }

  &__table-scroll {
    margin-top: 25px;
    @include bpTb {
      overflow-x: scroll;
    }
  }
}


/*****************************
TRIAL
*****************************/
.trial {
  &__wrap {
    max-width: $contentWidth;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    @include bpTb {
      max-width: $baseWidthSp;
    }
  }

  &__reason {
    &-banner {
      margin-top: 75px;
      @include bpTb {
        margin-top: 50px;
      }
      @include bpSp {
        margin-top: 40px;
      }
    }
  }

  &__content {
    &-num01 {
      margin-top: 100px;
      @include bpTb {
        margin-top: 40px;
      }
      @include bpSp {
        margin-top: 30px;
      }
    }
    &-num02 {
      margin-top: 110px;
      padding-top: 90px;
      padding-bottom: 115px;
      background-color: $color25;
      @include bpTb {
        margin-top: 50px;
        padding-top: 40px;
        padding-bottom: 60px;
      }
      @include bpSp {
        margin-top: 30px;
        padding-top: 30px;
        padding-bottom: 45px;
      }
    }
    &-num03 {
      margin-top: 100px;
      @include bpTb {
        margin-top: 40px;
      }
      @include bpSp {
        margin-top: 30px;
      }
    }
    &-num04 {
      position: relative;
      z-index: 1;
      margin-top: 110px;
      padding-top: 90px;
      padding-bottom: 115px;
      background-color: $color25;
      @include bpTb {
        margin-top: 50px;
        padding-top: 40px;
        padding-bottom: 60px;
      }
      @include bpSp {
        margin-top: 30px;
        padding-top: 30px;
        padding-bottom: 45px;
      }
    }

    &-num05 {
      position: relative;
      z-index: 0;
      margin-top: -500px;
      padding-top: 540px;
      padding-bottom: 115px;
      @include bpTb {
        margin-top: 50px;
        padding-top: 40px;
        padding-bottom: 60px;
      }
      @include bpSp {
        margin-top: 30px;
        padding-top: 30px;
        padding-bottom: 45px;
      }
    }

    &-num06 {
      padding-top: 90px;
      padding-bottom: 115px;
      background-color: $color25;
      @include bpTb {
        margin-top: 50px;
        padding-top: 40px;
        padding-bottom: 60px;
      }
      @include bpSp {
        margin-top: 30px;
        padding-top: 30px;
        padding-bottom: 45px;
      }
    }

    &-num07 {
      padding-top: 90px;
      // padding-bottom: 115px;
      @include bpTb {
        margin-top: 50px;
        padding-top: 40px;
        // padding-bottom: 60px;
      }
      @include bpSp {
        margin-top: 30px;
        padding-top: 30px;
        // padding-bottom: 45px;
      }
    }

    &-heading {
      text-align: center;
    }
    &-num {
      font-family: $Cormorant;
      color: $color8;
      @include f-size(100);
      font-weight: 500;
      font-style: italic;
      line-height: 1;
      @include bpTb {
        @include f-size(70);
        line-height: 1.2;
      }
      @include bpSp {
        @include f-size(50);
      }
    }
    &-title {
      font-family: $Serif;
      @include f-size(50);
      font-weight: 500;
      line-height: 1.2;
      @include bpTb {
        @include f-size(36);
      }
      @include bpSp {
        @include f-size(24);
      }
    }
  }

  &__graph {
    &-popular {
      &-text {
        margin-top: 50px;
        font-family: $Serif;
        @include f-size(32);
        font-weight: 600;
        text-align: center;
        line-height: 1.4;
        @include bpSp {
          margin-top: 35px;
          @include f-size(24);
        }
      }
    }
    &-comment {
      &-image {
        margin-top: 30px;
      }
      &-text {
        margin-top: 20px;
        font-family: $Serif;
        color: $color26;
        @include f-size(40);
        font-weight: 600;
        text-align: center;
        line-height: 1.3;
        @include bpSp {
          @include f-size(24);
        }
      }
    }

    &-safe {
      display: flex;
      justify-content: space-between;
      margin-top: 45px;
      padding: 50px;
      background-color: $color25;
      @include bpTb {
        display: block;
      }
      @include bpSp {
        margin-top: 25px;
        padding: 20px;
      }

      &-content {
        margin-right: 50px;
        @include bpTb {
          margin-right: 0px;
        }
      }
      &-title {
        font-family: $Serif;
        @include f-size(36);
        font-weight: 600;
        line-height: 1.5;
        @include bpSp {
          @include f-size(26);
        }
        em {
          color: $color27;
        }
      }
      &-text {
        margin-top: 15px;
        @include f-size(19);
        @include bpSp {
          @include f-size(17);
        }
      }
      &-image {
        @include bpTb {
          margin-top: 20px;
        }
      }
    }
  }

  &__nutrient {
    margin-top: 30px;
    padding: 45px 60px;
    background-color: #fff;
    @include bpSp {
      padding: 0px;
    }
    &-title {
      text-align: center;
    }
    &-inner {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin-top: 45px;
      @include bpTb {
        display: block;
        margin-top: 20px;
      }
    }
    &-image {
      margin-right: 45px;
      @include bpTb {
        margin-right: 0;
        text-align: center;
      }
    }
    &-list {
      max-width: 550px;
      width: 100%;
      @include bpTb {
        max-width: 100%;
      }
    }
    &-dl {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      @include bpSp {
        display: block;
      }
      dt,dd {
        margin-bottom: 10px;
        @include bpSp {
          margin-bottom: 0;
        }
      }
      dt {
        width: 176px;
        margin-right: 10px;
        padding: 10px 7px;
        font-family: $Serif;
        @include f-size(22);
        text-align: center;
        font-weight: 500;
        line-height: 1;
        @include bpSp {
          margin-top: 20px;
        }
        &.yellow {
          border: 2px solid $color28;
          color: $color28;
        }
        &.red {
          border: 2px solid $color24;
          color: $color24;
        }
        &.skyBlue {
          border: 2px solid $color29;
          color: $color29;
        }
        &.blue {
          border: 2px solid $color30;
          color: $color30;
        }
        &.green {
          border: 2px solid $color31;
          color: $color31;
        }
        &.purple {
          border: 2px solid $color32;
          color: $color32;
        }
        &.lightGreen {
          border: 2px solid $color33;
          color: $color33;
        }
      }
      dd {
        width: calc(100% - 186px);
        margin-top: 10px;
        @include f-size(20);
        line-height: 1.3;
        @include bpSp {
          width: 100%;

        }
      }
    }
  }

  &__commitment {
    margin-top: 45px;
    padding-bottom: 65px;
    background-color: #ffffff;
    &-heading {
      background-image: url(../../img/trial/trial_prejudice-haeing_bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
      text-align: center;
    }
    &-title {
      background-image: url(../../img/trial/trial_prejudice-obj01.png), url(../../img/trial/trial_prejudice-obj02.png);
      background-position: 5% bottom, 95% bottom;
      background-repeat: no-repeat;
      padding-top: 30px;
      padding-bottom: 45px;
      font-family: $Serif;
      color: #fff;
      @include f-size(32);
      font-weight: 600;
      line-height: 1.3;
      @include bpTb {
        padding-right: 12%;
        padding-left: 12%;
        background-position: 2% bottom, 98% bottom;
        background-size: 13%, 13%;
        @include f-size(26);
      }
      @include bpSp {
        padding-right: 5%;
        padding-bottom: 55px;
        padding-left: 5%;
        background-size: 20%, 20%;
        @include f-size(22);
      }
    }

    &-recommend {
      &-inner {
        max-width: 1000px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
      }
      &-box {
        display: flex;
        justify-content: space-between;
        padding-left: 15px;
        @include bpSp {
          padding: 15px;
        }
      }
      &-praise {
        @include bpTb {
          flex-wrap: wrap;
        }
        &-content {
          max-width: 430px;
          width: 100%;
          @include bpTb {
            max-width: 100%;
          }
        }
        &-title {
          font-family: $Serif;
          @include f-size(37);
          font-weight: 600;
          line-height: 1.5;
          @include bpTb {
            @include f-size(30);
          }
          @include bpSp {
            @include f-size(26);
          }
          .marker {
            background: linear-gradient(transparent 70%, #fff100 70%);
            @include f-size(51);
            line-height: 1.1;
            @include bpTb {
              @include f-size(40);
            }
            @include bpSp {
              @include f-size(34);
            }
          }
        }
        &-text {
          margin-top: 40px;
          font-family: $Serif;
          @include f-size(37);
          font-weight: 600;
          line-height: 1.5;
          @include bpTb {
            margin-top: 25px;
            @include f-size(30);
          }
          @include bpSp {
            @include f-size(26);
          }
        }
        &-image {
          max-width: 490px;
          width: 100%;
          @include bpTb {
            max-width: 100%;
            margin-top: 30px;
            text-align: center;
          }
        }
      }

      &-teacher {
        margin-top: 45px;
        padding-top: 50px;
        border-top: 1px solid $color3;
        @include bpSp {
          flex-direction: column;
        }
        &-image {
          max-width: 290px;
          width: 100%;
          margin-right: 30px;
          @include bpSp {
            max-width: 100%;
            margin-bottom: 20px;
            text-align: center;
          }
        }
        &-content {}
        &-title {
          display: inline-block;
          border-bottom: 2px dotted $color34;
          font-family: $Serif;
          @include f-size(36);
          font-weight: 600;
          line-height: 1.3;
        }
        &-text {
          margin-top: 20px;
          @include f-size(27);
          line-height: 1.3;
          .small {
            @include f-size(20);
          }
        }
        &-comment {
          margin-top: 20px;
          padding: 20px 30px;
          background-color: $color23;
          &-text {
            @include f-size(18);
          }
        }
      }
    }

    &-btn {
      margin-top: 25px;
      &-link {
        position: relative;
        display: inline-block;
        transition: all .2s ease;
        background-color: $color1;
        border: 2px solid $color1;
        border-radius: 3px;
        max-width: 450px;
        width: 100%;
        padding: 12px 40px;
        color: #fff !important;
        @include f-size(20);
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        @include bpSp {
          @include f-size(16);
          padding-right: 20px;
          padding-left: 10px;
        }
        &::after {
          content: '\f054';
          position: absolute;
          top: 50%;
          right: 12px;
          transform: translateY(-50%);
          @include iconFont;
          @include f-size(20);
          @include bpSp {
            @include f-size(18);
            right: 8px;
          }
        }
        &:hover {
          color: #fff;
          text-decoration: none;
          opacity: 0.85;
        }
      }
    }

    &-compassion {
      margin-top: 75px;
      @include bpSp {
        margin-top: 30px;
      }
      &-title {
        font-family: $Serif;
        @include f-size(32);
        font-weight: 600;
        text-align: center;
        @include bpSp {
          @include f-size(24);
        }
      }
      &-wrap {
        margin-top: 35px;
        display: flex;
        justify-content: flex-end;
        background-image: url(../../img/trial/trial_tyaba.jpg);
        background-repeat: no-repeat;
        background-position: 2.5% 96%;
        @include bpSp {
          // display: block;
          flex-direction: column-reverse;
          background-position: left bottom;
        }
      }
      &-content {
        margin-right: 110px;
        @include bpSp {
          margin-right: 0;
        }
      }
      &-text {
        font-family: $Serif;
        @include f-size(28);
        font-weight: 500;
        writing-mode: vertical-rl;
        text-shadow: 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff;
        height: 12em;
        @include bpSp {
          margin-top: 25px;
          margin-left: auto;
          @include f-size(22);
        }
      }
      &-image {
        @include bpSp {
          margin-top: 15px;
        }
      }
    }

    &-greeting {
      margin-top: 60px;
      padding: 15px;
      background-image: url(../../img/trial/trial_greeting-bg.jpg);
      @include bpSp {
        margin-top: 30px;
      }
      &-content {
        padding: 55px;
        background-repeat: repeat;
        background-size: auto;
        background-color: $color36;
        @include bpTb {
          display: flex;
          flex-direction: column;
        }
        @include bpSp {
          padding: 20px;
        }
      }
      &-image {
        margin-bottom: 35px;
        margin-left: 40px;
        float: right;
        @include bpTb {
          float: none;
          margin-bottom: 20px;
          margin-left: 0;
          text-align: center;
        }
      }
      &-box {}
      &-title {
        display: flex;
        padding-bottom: 15px;
        border-bottom: 2px solid $color35;
      }
      &-text {
        margin-top: 20px;
        @include f-size(19);
        line-height: 2;
        @include bpSp {
          @include f-size(16);
        }
        span {
          font-weight: bold;
        }
        em {
          color: $color27;
          font-weight: bold;
        }
      }
    }

    &-iso {
      margin-top: 30px;
      @include bpSp {
        margin-top: 40px;
      }
      &-title {
        font-family: $Serif;
        @include f-size(30);
        font-weight: 600;
        text-align: center;
        @include bpSp {
          @include f-size(22);
        }
      }
      &-wrap {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: 685px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
      }
      &-box {
        max-width: 49%;
        @include bpTb {
          max-width: 48%;
        }
        @include bpSp {
          max-width: 100%;
        }
        & + & {
          @include bpSp {
            margin-top: 20px;
          }
        }
      }
      &-name {
        background-color: $color2;
        @include f-size(19);
        text-align: center;

      }
      &-image {
        margin-top: 15px;
      }
      &-scene {
        display: flex;
        justify-content: space-between;
        margin-top: 45px;
        @include bpSp {
          display: block;
          margin-top: 30px;
        }
      }
    }

    &-jas {
      // max-width: 880px;
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      margin-top: 95px;
      @include bpTb {
        max-width: $baseWidthSp;
      }
      @include bpSp {
        margin-top: 50px;
        padding-top: 30px;
      }
      &-title {
        font-family: $Serif;
        @include f-size(30);
        font-weight: 600;
        @include bpSp {
          @include f-size(22);
        }
      }
      &-image {
        margin-top: 30px;
      }

      &-box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 70px;
      }
      &-inner {
        margin-left: 45px;
        @include bpSp {
          margin-top: 20px;
          margin-left: 0;
        }
        .jas-mark {
          @include bpSp {
            display: none;
          }
        }
      }
      &-main {}
    }

    &-repeat {
      margin-top: 90px;
      @include bpTb {
        max-width: $baseWidthSp;
        margin-right: auto;
        margin-left: auto;
      }
      &-title {
        font-family: $Serif;
        @include f-size(40);
        font-weight: 600;
        text-align: center;
        @include bpTb {
          @include f-size(36);
        }
        @include bpSp {
          @include f-size(24);
        }
      }
      &-text {
        margin-top: 30px;
        font-family: $Serif;
        @include f-size(32);
        font-weight: 600;
        text-align: center;
        @include bpTb {
          @include f-size(26);
        }
        @include bpSp {
          margin-top: 10px;
          @include f-size(22);
        }
      }
      &-image {
        margin-top: 50px;
        text-align: center;
      }
      &-question {
        margin-top: 30px;
        font-family: $Serif;
        @include f-size(40);
        font-weight: 600;
        text-align: center;
        @include bpTb {
          @include f-size(26);
        }
        @include bpSp {
          margin-top: 10px;
          @include f-size(22);
        }
      }
    }
  }

  &__production {
    &-image {
      margin-top: 50px;
      @include bpTb {
        margin-top: 35px;
      }
      @include bpSp {
        margin-top: 25px;
      }
      &-col2 {
        display: flex;
        justify-content: space-between;
        @include bpSp {
          display: block;
        }
        img {
          & + img {
            @include bpSp {
              margin-top: 10px;
            }
          }
        }
      }
    }

    &-text {
      margin-top: 50px;
      font-family: $Serif;
      @include f-size(32);
      font-weight: 600;
      text-align: center;
      @include bpTb {
        margin-top: 35px;
        @include f-size(26);
      }
      @include bpSp {
        margin-top: 25px;
        @include f-size(22);
      }

      &.trial {
        @include f-size(40);
        @include bpTb {
          @include f-size(28);
        }
        @include bpSp {
          @include f-size(24);
        }
      }
    }
  }

  &__reason-sub {
    margin-top: 100px;
    @include bpSp {
      margin-top: 50px;
    }
    &-wrap {
      padding: 50px;
      background-color: $color23;
      background-image: url(../../img/trial/trial_delicious-bg.png);
      background-repeat: no-repeat;
      background-position: right bottom;
      @include bpSp {
        padding: 20px;
      }
    }
    &-title {
      text-align: center;
    }
    &-content {
      max-width: 645px;
      width: 100%;
    }
    &-text {
      margin-top: 20px;
      @include f-size(19);
      font-weight: 500;
      line-height: 1.6;
      text-shadow: 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff;
      em {
        color: $color27;
        @include f-size(23);
      }
    }
    &-use {
      margin-top: 15px;
      padding: 25px;
      background-color: #fff;
      &-box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        @include bpSp {
          display: block;
        }
        & + & {
          margin-top: 15px;
          padding-top: 20px;
          border-top: 2px solid $color38;
        }
      }
      &_item {
        display: inline-block;
        width: 145px;
        margin-right: 15px;
        padding: 7px;
        background-color: $color37;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        @include f-size(19);
        @include bpSp {
          @include f-size(17);
          padding: 5px;
        }
      }
      &_text {
        @include f-size(19);
      }
      &-attention {
        margin-top: 15px;
        padding: 10px;
        background-color: $color2;
        &_text {
          @include f-size(17);
          padding-left: 1em;
          text-indent: -1em;
          line-height: 1.3;
        }
      }
    }
  }

  &__cart_link {
    display: none;
    position: fixed;
    top: 205px;
    right: 25px;
    z-index: 10;
    @include bpTb {
      width: 15%;
      top: 105px;
      right: 15px;
    }
    @include bpSp {
      width: 16%;
      right: 10px;
    }
  }

}


/*****************************
REGULAR
*****************************/
.regular {
  &__title {
    position: relative;
    padding-top: 20px;
    padding-bottom: 35px;
    background-image: url(../../img/regular/regular-obj01.png), url(../../img/regular/regular-obj02.png);
    background-repeat: no-repeat;
    background-position: 2% top, 98% top;
    background-size: 133px, 142px;
    text-align: center;
    font-family: $Serif;
    @include f-size(50);
    font-weight: 600;

    @include bpTb {
      background-size: 15%, 15%;
      background-position: 2% 35%, 98% 35%;
      @include f-size(35);
    }
    @include bpSp {
      padding-bottom: 0;
      background-size: 12%, 12%;
      background-position: 2% 0%, 98% 0%;
      @include f-size(26);
    }


    &::before {
      content: "";
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      width: 53px;
      height: 3px;
      background-color: $color8;
    }
  }
  &__main {
    &-image {}
  }

  &__convenient {
    margin-top: 60px;
    @include bpTb {
      margin-top: 40px;
    }
    @include bpSp {
      margin-top: 40px;
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    &-inner {
      display: flex;
      justify-content: flex-start;
      position: relative;
      margin-top: 20px;
      padding: 25px 20px;
      background-color: $color2;
      @include bpTb {
        align-items: center;
      }
    }
    &-col1 {
      max-width: 100%;
      width: 100%;
    }
    &-col2 {
      max-width: 49%;
      width: 100%;
      @include bpTb {
        max-width: 100%;
      }
    }
    &-num {}

    &-content {
      margin-left: 25px;
      padding-left: 25px;
      border-left: 1px solid $color17;
      .marker {
        background:linear-gradient(transparent 60%, $color22 60%);
      }
    }
    &-heading {
      font-family: $Serif;
      @include f-size(31);
      font-weight: 600;
      line-height: 1.4;
      @include bpTb {
        @include f-size(26);
      }
      @include bpSp {
        @include f-size(22);
      }
      &_small {
        @include f-size(26);
        @include bpTb {
          @include f-size(22);
        }
        @include bpSp {
          @include f-size(18);
        }
      }
    }
    &-text {
      margin-top: 15px;
      @include f-size(19);
      @include bpTb {
        @include f-size(17);
      }
      @include bpSp {
        margin-top: 7px;
        @include f-size(16);
      }
    }

    &-num {
      font-family: $Cormorant;
      @include f-size(70);
      font-weight: 500;
      font-style: italic;
    }
    &-obj {
      position: absolute;
      right: 20px;
      bottom: 10px;
      @include bpTb {
        width: 25%;
        top: 10px;
        bottom: auto;
      }
      @include bpSp {
        // display: none;
        position: static;
        width: auto;
      }
    }
  }

  &__anxiety {
    margin-top: 90px;
    padding-bottom: 90px;
    background-color: $color23;
    @include bpTb {
      margin-top: 60px;
      padding-bottom: 60px;
    }
    &-wrap {
      padding-top: 50px;
      padding-bottom: 95px;
      background-image: url(../../img/regular/regular_anxiety-bg.png);
      background-position: center top;
      background-size: cover;
    }
    &-inneer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: $contentWidth;
      margin-right: auto;
      margin-left: auto;
      @include bpTb {
        max-width: $baseWidthSp;
        margin-right: auto;
        margin-left: auto;
      }
      @include bpSp {
        flex-direction: column;
      }
    }
    &-box {
      &-title {
        font-family: $Serif;
        color: #fff;
        @include f-size(60);
        line-height: 1.3;
        letter-spacing: 0px;
        @include bpTb {
          @include f-size(40);
        }
        @include bpSp {
          @include f-size(28);
          text-align: left;
        }
        &_small {
          @include f-size(52);
          @include bpTb {
            @include f-size(30);
          }
          @include bpSp {
            @include f-size(24);
          }
        }
      }

      &-list {
        margin-top: 45px;
        @include bpTb {
          margin-top: 20px;
        }
      }
      &-item {
        font-family: $Serif;
        color: #fff;
        @include f-size(29);
        @include bpTb {
          @include f-size(20);
        }
        @include bpSp {
          @include f-size(18);
          text-indent: -2.2em;
          text-indent: -2.2em;
          padding-left: 2.2em;
        }
        img {
          margin-right: 10px;
        }
      }
      &-image {
        @include bpTb {
          width: 40%;
        }
        @include bpSp {
          width: 80%;
          margin-top: 25px;
        }
      }
    }
  }

  &__safe {
    margin-top: 8px;
    &-content {}
    &-heading {
      text-align: center;
      &-title {
        font-family: $Serif;
        @include f-size(80);
        font-weight: 600;
        @include bpTb {
          @include f-size(50);
        }
        @include bpSp {
          @include f-size(34);
        }
      }
      &-text {
        font-family: $Serif;
        @include f-size(31);
        font-weight: 600;
        line-height: 1.3;
        @include bpTb {
          @include f-size(28);
        }
        @include bpSp {
          @include f-size(22);
        }
      }
      &-strong {
        background:linear-gradient(transparent 60%, $color22 60%);
        color: $color24;
        @include f-size(40);
        @include bpTb {
          @include f-size(36);
        }
        @include bpSp {
          @include f-size(26);
        }
      }
    }

    &-box {
      position: relative;
      margin-top: 50px;
      padding: 45px 160px 60px 45px;
      background-color: #fff;
      @include bpTb {
        padding: 45px;
      }
      @include bpSp {
        padding: 25px;
      }
    }
    &-area {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      @include bpSp {
        // flex-direction: column;
        // align-items: center;
        // justify-content: center;
        display: block;
      }
      & + & {
        margin-top: 40px;
      }
    }
    &-num {
      width: 120px;
      height: 120px;
      margin-right: 10px;
      @include bpSp {
        width: 20vw;
        height: 20vw;
        float: left;
      }
      @include breakpoint(330px) {
        height: 30vw;
      }
    }

    &-content {
      width: calc(100% - 130px);
      padding-top: 7px;
      @include bpSp {
        width: 100%;
      }
      &-title {
        color: $color8;
        font-family: $Serif;
        @include f-size(35);
        font-weight: 600;
        line-height: 1.3;
        @include bpTb {
          @include f-size(30);
        }
        @include bpSp {
          @include f-size(23);
          min-height: 4.6em;
        }
        @include bpSps {
          @include f-size(20);
          min-height: 3.2em;
        }
      }
      &-text {
        margin-top: 15px;
        @include f-size(19);
        line-height: 1.5;
        @include bpTb {
          @include f-size(18);
        }
        @include bpTb {
          @include f-size(16);
        }
      }
    }

    &-obj {
      position: absolute;
      right: 20px;
      bottom: 20px;
      @include bpTb {
        // display: none;
        position: static;
        width: 30%;
        margin-left: auto;
      }
    }
  }
}


/*****************************
HISTORY
*****************************/
.history {
  &__wrap {
    max-width: $contentWidth;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    @include bpTb {
      max-width: $baseWidthSp;
    }
  }

  &__content {
    &-heading {
      text-align: center;
    }
    &-num {
      position: relative;
      padding-bottom: 12px;
      font-family: $Cormorant;
      color: $color12;
      @include f-size(32);
      font-weight: 500;
      font-style: italic;
      line-height: 1;
      @include bpSp {
        @include f-size(30);
      }
      &-white {
        color: #fff;
      }
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        width: 50px;
        height: 3px;
        background-color: $color8;
      }
    }
    &-title {
      margin-top: 25px;
      font-family: $Serif;
      @include f-size(36);
      font-weight: 600;
      line-height: 1.3;
      @include bpSp {
        margin-top: 10px;
        @include f-size(26);
      }
      &-white {
        color: #fff;
      }
    }
  }

  &__mv {
    margin-top: 45px;
    text-align: center;
    @include bpSp {
      margin-top: 20px;
    }
  }

  &__beginning {
    margin-top: 85px;
    @include bpTb {
      margin-top: 60px;
    }
    @include bpSp {
      max-width: $baseWidthSp;
      margin-top: 40px;
      margin-right: auto;
      margin-left: auto;
    }
    &-wrap {
      margin-top: 45px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      @include bpSp {
        margin-top: 25px;
      }
    }
    &-content {
      max-width: 660px;
      width: 100%;
      margin-right: 10px;
      @include bpTb {
        max-width: 100%;
        margin-right: 0;
      }
    }
    &-text {
      @include f-size(19);
      @include bpSp {
        @include f-size(16);
      }
    }
    &-image {
      @include bpTb {
        width: 100%;
        text-align: center;
        margin-top: 20px;
      }
    }
    &-gallery {
      margin-top: 45px;
      @include bpSp {
        margin-top: 30px;
      }
    }
  }

  &__harvest {
    margin-top: 105px;
    padding-top: 60px;
    padding-bottom: 100px;
    background-image: url(../../img/history/history_harvest-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    @include bpTb {
      margin-top: 70px;
      padding-top: 40px;
      padding-bottom: 70px;
    }
    @include bpSp {
      margin-top: 40px;
      padding-top: 30px;
      padding-bottom: 40px;
    }
    &-content {
      margin-top: 45px;
      @include bpSp {
        max-width: $baseWidthSp;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
      }
    }
    &-iamge {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      img {
        @include bpTb {
          width: 48%;
        }
      }
    }
    &-text {
      margin-top: 35px;
      color: #fff;
      @include f-size(19);
      line-height: 2;
      @include bpSp {
        margin-top: 10px;
        @include f-size(16);
      }
    }
  }

  &__agricultural {
    padding-top: 60px;
    padding-bottom: 80px;
    background-color: $color25;
    @include bpTb {
      padding-top: 40px;
      padding-bottom: 60px;
    }
    @include bpSp {
      @include f-size(16);
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      @include bpTb {
        margin-top: 35px;
        flex-wrap: wrap;
      }
      @include bpSp {
        max-width: $baseWidthSp;
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
      }
    }
    &-content {
    }
    &-text {
      max-width: 655px;
      width: 100%;
      @include f-size(19);
      line-height: 2;
      @include bpSp {
        @include f-size(16);
      }
    }
    &-image {
      @include bpTb {
        width: 100%;
        margin-top: 20px;
        text-align: center;
      }
    }
  }

  &__jas {
    margin-top: 60px;
    padding: 60px;
    background-color: #fff;
    @include bpTb {
      padding: 30px 45px 45px;
    }
    @include bpSp {
      padding: 25px;
    }
    &-title {
      font-family: $Serif;
      @include f-size(36);
      font-weight: 500;
      text-align: center;
      @include bpTb {
        @include f-size(28);
      }
      @include bpSp {
        @include f-size(20);
      }
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;
      @include bpSp {
        margin-top: 15px;
      }
    }
    &-image {
      @include bpTb {
        width: 100%;
        text-align: center;
      }
    }
    &-content {
      max-width: 500px;
      width: 100%;
      @include bpTb {
        max-width: 100%;
        margin-top: 30px;
      }
      @include bpSp {
        margin-top: 20px;
      }
    }
    &-text {
      @include f-size(19);
      @include bpSp {
        @include f-size(16);
      }
      &-image {
        margin-top: 30px;
        @include bpSp {
          margin-top: 20px;
        }
      }
    }
  }

  &__target {
    margin-top: 65px;
    @include bpTb {
      margin-top: 50px;
    }
    @include bpSp {
      margin-top: 35px;
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 55px;
      @include bpTb {
        margin-top: 35px;
      }
      @include bpSp {
        margin-top: 25px;
      }
    }
    &-content {
      max-width: 660px;
      width: 100%;
      @include bpTb {
        max-width: 100%
      }
    }
    &-text {
      @include f-size(19);
      line-height: 2;
      @include bpSp {
        @include f-size(16);
      }
    }
    &-image {
      @include bpTb {
        margin-top: 30px;
      }
      @include bpSp {
        margin-top: 20px;
      }
    }
  }
}



/*****************************
PREGNANT HABIT
*****************************/
.pregnant {
  &__wrap {
    max-width: $contentWidth;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    @include bpTb {
      max-width: $baseWidthSp;
    }
  }

  &__anchor {
    margin-top: 40px;
    margin-bottom: 35px;
    display: flex;
    justify-content: space-between;
    flex: auto;
    @include bpTb {
      flex-wrap: wrap;
      justify-content: center;
    }
    @include bpSp {
      margin-top: 15px;
      margin-bottom: 20px;
      justify-content: space-between;
    }
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 100%;
      border-right: 3px dotted $color24;
      @include bpTb {
        width: 32%;
        margin-top: 10px;
      }
      @include bpSp {
        width: 100%;
        border-right: none;
        border-bottom: 3px dotted $color24;
      }
      &:last-of-type {
        border-right: none;
        @include bpSp {
          border-bottom: none;
        }
      }
      &:nth-child(odd) {
        // border-right: none;
      }
    }
    &-link {
      display: block;
      @include f-size(17);
      @include bpTb {
        padding-right: 20px;
        padding-left: 20px;
        @include f-size(15);
      }
      @include bpSp {
        width: 100%;
        line-height: 1.4;
        padding-bottom: 10px;
      }

      &::after {
        @include bpSp {
          content: "\f107";
          @include iconFont();
          color: $color40;
          @include f-size(17);
          float: right;
        }
      }
    }
  }

  &__why {
    padding-top: 75px;
    padding-bottom: 75px;
    background-color: $color23;
    @include bpSp {
      padding-top: 35px;
      padding-bottom: 35px;
    }
    &-image {
      text-align: center;
    }
    &-text {
      max-width: 665px;
      width: 100%;
      margin-top: 20px;
      margin-right: auto;
      margin-left: auto;
      @include f-size(18);
      @include bpSp {
        @include f-size(16);
      }
    }
  }

  &__recommend {
    margin-top: 85px;
    &-box {
      position: relative;
      padding: 15px;
      background-image: url(../../img/pregnant_habit/pregnant_midwife-bg.jpg);
      &::after {
        content: "";
        position: absolute;
        top: -63px;
        right: -13px;
        display: block;
        width: 150px;
        height: 162px;
        background-image: url(../../img/pregnant_habit/pregnant_clip-obj.png);
        background-size: contain;
        @include bpSp {
          width: 49px;
          height: 53px;
          top: -23px;
          right: -6px;
        }
      }
    }
    &-inner {
      padding: 55px;
      background-color: $color36;
      @include bpSp {
        padding: 25px;
      }
    }
    &-title {
      text-align: center;
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
      @include bpTb {
        flex-direction: column-reverse;
      }
      @include bpSp {
        margin-top: 15px;
        flex-direction: column;
      }
    }
    &-image {
      max-width: 370px;
      width: 100%;
      @include bpTb {
        max-width: 100%;
        margin-top: 20px;
        text-align: center;
      }
      @include bpSp {
        margin-bottom: 20px;
      }
    }
    &-content {
      max-width: 540px;
      width: 100%;
    }
    &-job {
      font-family: $Serif;
      @include f-size(25);
      font-weight: 600;
      line-height: 1.3;
      @include bpSp {
        @include f-size(18);
      }
    }
    &-name {
      font-family: $Serif;
      @include f-size(36);
      font-weight: 600;
      line-height: 1.3;
      @include bpSp {
        @include f-size(24);
      }
    }
    &-text {
      margin-top: 30px;
      @include f-size(18);
      line-height: 2;
      @include bpSp {
        margin-top: 20px;
        @include f-size(16);
        line-height: 1.8;
      }
    }
  }

  &__reason {
    margin-top: 85px;
    padding-top: 75px;
    padding-bottom: 105px;
    background-color: $color39;
    @include bpSp {
      margin-top: 40px;
      padding-top: 30px;
      padding-bottom: 50px;
    }
    &-heading {
      text-align: center;
      background-image: url(../../img/pregnant_habit/pregnant_habit-obj.png);
      background-repeat: no-repeat;
      background-position: 87% bottom;
      @include bpTb {
        background-size: 10%;
        background-position: 97% bottom;
      }
      @include bpSp {
        background-image: none;
      }
    }
    &-title {}
    &-box {
      position: relative;
      padding: 55px;
      background-color: #fff;
      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
      @include bpSp {
        padding: 50px 25px 35px;
      }
      & + & {
        margin-top: 95px;
        @include bpSp {
          margin-top: 65px;
        }
      }
      &-03 {
        background-image: url(../../img/pregnant_habit/pregnant_habit-reason-obj.png);
        background-repeat: no-repeat;
        background-position: 95% 5%;
        @include bpSp {
          background-image: none;
        }
      }
    }
    &-num {
      position: absolute;
      top: -65px;
      left: -33px;
      @include bpSp {
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
      }
    }
    &-inner {
      margin-top: 35px;
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      @include bpTb {
        flex-wrap: wrap;
        flex-direction: column;
      }
    }
    &-content {
      padding-top: 20px;
      max-width: 555px;
      width: 100%;
      @include bpTb {
        max-width: 100%;
      }
      &-title {
        img {
          @include bpSp {
            max-height: 49px;
          }
        }
      }
      &-text {
        margin-top: 30px;
        @include f-size(18);
        line-height: 2;
        @include bpTb {
          margin-top: 20px;
        }
        @include bpSp {
          @include f-size(16);
        }
        .marker {
          background: linear-gradient(transparent 70%, rgba(238,88,70,.3) 70%);
          @include f-size(22);
          font-weight: bold;
          @include bpSp {
            @include f-size(18);
          }
        }
      }
    }
    &-image {
      @include bpTb {
        max-width: 100%;
        margin-top: 25px;
        text-align: center;
      }
    }

    &-conditions {
      margin-top: 25px;
      padding: 25px 35px;
      background-color: $color2;
      @include bpSp {
        padding: 15px 15px;
      }
      &-title {
        @include f-size(16);
      }
      &-list {
        &-item {
          @include f-size(16);
          padding-left: 1em;
          text-indent: -1em;
        }
      }
    }

    &-nutrition {
      width: 100%;
      margin-top: 35px;
      &-item {
        display: flex;
        justify-content: flex-start;
        & + & {
          margin-top: 20px;
          padding-top: 20px;
          border-top: 3px dotted $color38;
        }
        @include bpSp {
          display: block;
        }
      }
      &-name {
        width: 135px;
        height: 135px;
        margin-right: 30px;
        @include bpSp {
          display: block;
          width: 20%;
          height: auto;
          text-align: center;
          float: left;
          // margin-bottom: 15px;
        }
      }
      &-box {
        max-width: calc(100% - 165px);
        @include bpSp {
          max-width: 100%;
        }
      }
      &-title {
        font-family: $Serif;
        @include f-size(24);
        font-weight: 500;
        @include bpSp {
          @include f-size(18);
        }
      }
      &-text {
        margin-top: 5px;
        @include f-size(17);
        @include bpSp {
          @include f-size(15);
        }
      }
    }
  }

  &__message {
    padding-top: 65px;
    padding-bottom: 40px;
    background-image: url(../../img/pregnant_habit/pregnant_message-pbj01.png),url(../../img/pregnant_habit/pregnant_message-pbj02.png),url(../../img/pregnant_habit/pregnant_midwife-bg.jpg);
    background-position: 10% 2%, 90% 7%, left top;
    background-repeat: no-repeat, no-repeat, repeat;
    @include bpTb {
      background-position: 5% 1.5%, 95% 1.5%, left top;
    }
    @include bpSp {
      padding-top: 35px;
      padding-bottom: 20px;
      background-image: none,none,url(../../img/pregnant_habit/pregnant_midwife-bg.jpg);
    }
    &-heading {
      text-align: center;
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    &-box {
      width: 49%;
      margin-top: 23px;
      padding: 30px;
      border-top: 6px solid $color40;
      background-color: #fff;
      @include bpSp {
        width: 100%;
        margin-top: 15px;
        padding: 15px;
        border-top: 3px solid $color40;
      }
    }
    &-title {
      padding-bottom: 10px;
      border-bottom: 2px dotted $color41;
      font-family: $Serif;
      @include f-size(26);
      font-weight: 600;
      line-height: 1.3;
      @include bpSp {
        @include f-size(15);
      }
    }
    &-text {
      margin-top: 20px;
      @include f-size(17);
      @include bpTb {
        margin-top: 10px;
      }
      @include bpSp {
        @include f-size(15);
      }
      .marker {
        background: linear-gradient(transparent 70%, rgba(238,88,70,.3) 70%);
        @include f-size(22);
        font-weight: bold;
        @include bpSp {
          @include f-size(18);
        }
      }
    }

    &-caution {
      margin-top: 10px;
      color: $color41;
      @include f-size(15);
      @include bpSp {
        margin-top: 5px;
        @include f-size(13);
      }
    }
  }

  &__easy {
    padding-top: 50px;
    padding-bottom: 100px;
    background-color: $color23;
    &-title {
      text-align: center;
    }
    &-wrap {
      display: flex;
      justify-content: space-between;
      margin-top: 35px;
      @include bpTb {
        flex-direction: column;
      }
    }
    &-content {
      max-width: 655px;
      width: 100%;
      background-image: url(../../img/pregnant_habit/pregnant_drink-obj.png);
      background-repeat: no-repeat;
      background-position: right top;
      @include bpTb {
        max-width: 100%;
      }
      @include bpSp {
        background-size: 30%;
      }
      &-title {}
      &-text {
        margin-top: 20px;
        @include f-size(19);
        font-weight: 500;
        line-height: 1.6;
        text-shadow: 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff, 0px 0px 6px #ffffff;
      }
      &-use {
        margin-top: 15px;
        padding: 25px;
        background-color: #fff;
        &-box {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          @include bpSp {
            display: block;
          }
          & + & {
            margin-top: 15px;
            padding-top: 20px;
            border-top: 2px solid $color38;
          }
        }
        &_item {
          display: inline-block;
          width: 145px;
          margin-right: 15px;
          padding: 7px;
          background-color: $color37;
          border-radius: 5px;
          color: #fff;
          font-weight: bold;
          text-align: center;
          @include f-size(19);
          @include bpSp {
            width: 100%;
            @include f-size(17);
            padding: 5px;
          }
          &.red {
            background-color: $color42;
          }
          &.skyBlue {
            background-color: $color43;
          }
          &.yellow {
            background-color: $color44;
          }
        }
        &_text {
          @include f-size(19);
        }
        &-attention {
          margin-top: 15px;
          padding: 10px;
          background-color: $color2;
          &_text {
            @include f-size(17);
            padding-left: 1em;
            text-indent: -1em;
            line-height: 1.3;
          }
        }
      }
    }

    &-image {
      @include bpTb {
        max-width: 100%;
        margin-top: 20px;
        text-align: center;
      }
    }
  }
}


/*****************************
INQUIRTY
*****************************/
.inquiry {
  &__text {
    color: $color7;
    @include f-size(19);
    @include bpSp {
      @include f-size(16);
    }
  }

  &__wrap {
    margin-top: 30px;
    @include bpSp {
      margin-top: 20px;
    }
  }
}
.inquiry__wrap {
  .contact_frame {
    height: 1220px;
    @include bpTb {
      height: 1300px;
    }
    @include bpSp {
      height: 1890px;
    }
  }
}


// category_lp
.category_lp {
  img {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 100%;
  }
}


/*****************************
REVIEW
*****************************/
#fs_Reviews {
  .fs-c-reviewList__item__info {
    margin-left: 10px;
    @include bpSp {
      margin-left: 0;
    }
  }
  .fs-c-reviewList__item__body {
    margin-left: 30px;
    @include bpSp {
      margin-left: 0;
    }
  }

  .fs-c-history {
    margin-top: 35px;
    @include bpSp {
      margin-top: 25px;
    }
  }
}
.review {
  &__link {
    &-type01 {
      &_list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &::after {
          content: "";
          max-width: 100%;
          width: 100%;
          height: 0;
        }

        &-item {
          max-width: 100%;
          width: 100%;
        }

        &-link {
          position: relative;
          display: block;
          width: 100%;
          margin-top: 10px;
          padding: 12px 30px 12px 15px;
          @include f-size(18);
          background-color: #ffffff;
          border: 2px solid $color3;
          border-radius: 5px;

          @include bpTb {
            padding-top: 7px;
            padding-bottom: 9px;
            @include f-size(16);
          }

          @include bpSp {
            margin-top: 15px;
            @include f-size(17);
          }

          &::after {
            content: "\f107";
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            @include iconFont;
          }

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    &-type02 {
      &_list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &::after {
          content: "";
          max-width: 49%;
          width: 100%;
          height: 0;

          @include bpSp {
            max-width: 100%;
          }
        }

        &-item {
          max-width: 49%;
          width: 100%;

          @include bpSp {
            max-width: 100%;
          }
        }

        &-link {
          position: relative;
          display: block;
          width: 100%;
          margin-top: 4.5%;
          padding: 12px 30px 12px 15px;
          @include f-size(18);
          background-color: #ffffff;
          border: 2px solid $color3;
          border-radius: 5px;

          @include bpTb {
            padding-top: 7px;
            padding-bottom: 9px;
            @include f-size(16);
          }

          @include bpSp {
            margin-top: 15px;
            @include f-size(17);
          }

          &::after {
            content: "\f107";
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            @include iconFont;
          }

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    &-type03 {
      &_list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        &::after {
          content: "";
          max-width: 32%;
          width: 100%;
          height: 0;
          @include bpTb {
            max-width: 32%;
          }
          @include bpSp {
            max-width:100%;
          }
        }
        &-item {
          max-width: 32%;
          width: 100%;
          @include bpTb {
            max-width: 32%;
          }
          @include bpSp {
            max-width:100%;
          }
        }
        &-link {
          position: relative;
          display: block;
          width: 100%;
          margin-top: 6%;
          padding: 12px 30px 12px 15px;
          @include f-size(18);
          background-color: $color3;
          border-radius: 5px;
          @include bpTb {
            padding-top: 7px;
            padding-bottom: 9px;
            @include f-size(16);
          }
          @include bpSp {
            margin-top: 15px;
            @include f-size(17);
          }
          &::after {
            content: "\f107";
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            @include iconFont;
          }
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }