@charset "UTF-8";

/*base
---------------------------------------------*/
:root {
  --cellvane-blue: #172154;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: "Noto Sans JP", "Zen Old Mincho", sans-serif;
  color: #111;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

.mark {
  font-size: 0.6em;
  vertical-align: super;
}

.-auto_fadeIn {
  opacity: 0;
  animation-name: move-anim;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform;

}

@keyframes move-anim {
  from {
    filter: blur(8px);
    transform: scale(1.05);
    opacity: 0;
  }

  to {
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
  }
}

/*JS制御 共通（アコーディオン / メニュー）
---------------------------------------------*/
body.-noscroll {
  overflow: hidden;
}

/* HOW TO USE / quality_accodion / story_accodion 共通の開閉制御（表示切替は各アイテム側で&.-openとして定義） */
.-accodion_btn.-open .icon::after {
  opacity: 0;
}

/* HOW TO USEアイコンの+/-（&ネスト未対応の旧Safari対策のため非ネストで記述） */
.how_to_use_btn .icon::before,
.how_to_use_btn .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #111;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.how_to_use_btn .icon::before {
  width: 2.9vw;
  height: 1px;
}

.how_to_use_btn .icon::after {
  width: 1px;
  height: 2.9vw;
}

@media (min-width:800px) {
  .how_to_use_btn .icon::before {
    width: 12.9px;
    height: 1px;
  }

  .how_to_use_btn .icon::after {
    width: 1px;
    height: 12.9px;
  }
}

.anchor_wrap {
  position: relative;

  .anchor_item {
    position: absolute;

    /*-pc*/
    @media (min-width : 800px) {
      top: -100px;
    }

    /*-sp*/
    @media (max-width : 799px) {
      top: -50vw;
    }
  }
}

/*content_all_wrap / content_wrap
---------------------------------------------*/
.content_all_wrap {
  width: 100%;
  background-color: #fff;
  overflow-x: hidden;

  /*-pc*/
  @media (min-width: 800px) {
    background-image: url(../images/pc_bg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
  }
}

.content_wrap {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;

  /*-pc*/
  @media (min-width : 800px) {
    max-width: 450px;
  }

  /*-sp*/
  @media (max-width : 799px) {
    padding-top: 17.1vw;
  }
}

/*header
---------------------------------------------*/
section.header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  top: 0;
  position: fixed;
  z-index: 2;
  height: 17.1vw;
  padding: 1vw 6.1vw 0 3.2vw;

  .logo {
    max-width: 30.5vw;
    width: 100%;
    line-height: 0;
  }

  .btn_menu {
    position: relative;
    display: block;
    background-color: transparent;
    border: none;
    padding: 0;
    width: 7vw;
    cursor: pointer;

    img {
      display: block;
      width: 7.3vw;
    }
  }
}

/*pc_navi
------------------------------------*/
.content_pcnavi_wrap {
  position: relative;
  margin: auto;

  /*-pc*/
  @media (min-width : 799px) {
    width: 450px;
  }

  /*-sp*/
  @media (max-width : 800px) {}

  .pc_navi {
    position: absolute;
    margin: auto;
    box-sizing: border-box;
    right: -380px;
    top: calc(50dvh - 250px);
    width: 270px;
    display: block;
    color: #172154;
    font-size: 18px;
    font-family:
      "Zen Old Mincho", serif;
    font-weight: 400;
    color: var(--cellvane-blue);
    text-align: center;
    padding: 20px 0;
    height: 500px;

    /*-tb*/
    @media (max-width : 1260px) {
      right: -300px;
    }

    .logo {
      width: 155px;
      display: block;
      margin-bottom: 30px;
    }

    .menu_nav {
      position: fixed;
      width: 270px;
    }

    li {
      display: block;
      padding: 26px 0;
      text-align: left;
      border-bottom: 0.5px solid #111;

      .about_logo {
        width: 120px;
        display: inline-block;
      }


    }

    .sub {
      position: relative;
      top: -3px;
    }
  }
}

/*menu_section（ハンバーガーメニュー）
---------------------------------------------*/
section.menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  overflow-y: auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  filter: blur(10px);
  transition: all 0.8s;

  &.-open {
    display: flex;
    filter: blur(0px);
    transition: all 0.8s;
  }

  .menu_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    width: 100%;
    box-sizing: border-box;
    height: 17vw;
    padding: 0 6vw 0 3.2vw;

    .logo {
      max-width: 30.5vw;
      width: 100%;
    }

    .btn_close {
      position: relative;
      display: block;
      flex: none;
      background-color: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 5.9vw;
      height: 5.9vw;

      .line {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        background-color: var(--cellvane-blue);

        /*-pc*/
        @media (min-width:800px) {
          width: 37.1px;
          height: 1.1px;
        }

        /*-sp*/
        @media (max-width:799px) {
          width: 8.3vw;
          height: 1.5px;
        }
      }

      .line1 {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      .line2 {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
  }

  .menu_nav {
    width: 100%;
    box-sizing: border-box;
    padding: 6vw 6.5vw 0;

    ul {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    li {
      width: 100%;
      border-bottom: 1px solid #ddd;

      .about_logo {
        width: 35vw;
        display: inline-block;
        opacity: 0.65;
      }
    }

    a {
      display: flex;
      align-items: center;
      width: 100%;
      font-family: "Zen Old Mincho", serif;
      font-weight: 400;
      color: var(--cellvane-blue);
      box-sizing: border-box;
      height: 20.7vw;
      font-size: 5.1vw;

      .sub {
        font-size: 5.3vw;
        padding-left: 2vw;
      }
    }
  }
}

/*kv_section
---------------------------------------------*/
section.kv {
  overflow: hidden;

  .kv_pict {
    width: 100%;
  }
}

/*about_section
---------------------------------------------*/
section.about {
  background-color: #fff;

  /*-pc*/
  @media (min-width:800px) {
    padding: 88.9px 16.9px 0;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 20vw 6.7vw 0;
  }

  /*-about_catch
  ---------------------------------------------*/
  .about_catch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;

    /*-pc*/
    @media (min-width:800px) {
      margin-bottom: 106.3px;
    }

    .about_catch_head {
      display: flex;
      align-items: center;

      /*-pc*/
      @media (min-width:800px) {
        width: 371.25px;
        margin-bottom: 28.7px;
      }

      /*-sp*/
      @media (max-width:799px) {
        width: 83vw;
        margin-bottom: 6vw;
      }

      .about_catch_logo {

        /*-pc*/
        @media (min-width:800px) {
          max-width: 302.1px;
          width: 100%;
          display: block;
          margin-right: 3.9px;
        }

        /*-sp*/
        @media (max-width:799px) {
          max-width: 73.3vw;
          width: 100%;
          margin-right: 2.7vw;
        }
      }

      .about_catch_label {
        font-family: "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);
        white-space: nowrap;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 28.7px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 6.4vw;
        }
      }
    }

    .about_catch_text {
      font-family: "Zen Old Mincho", serif;
      font-weight: 400;
      color: var(--cellvane-blue);
      text-align: center;

      /*-pc*/
      @media (min-width:800px) {
        font-size: 21.4px;
        line-height: 1.8;
        margin-bottom: 28.7px;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 4.8vw;
        line-height: 1.8;
        margin-bottom: 5vw;
      }
    }

    .about_catch_pict {
      max-width: 100%;
      position: relative;

      /*-pc*/
      @media (min-width:800px) {
        width: 360px;
        margin-bottom: 23px;
        right: 20px;
      }

      /*-sp*/
      @media (max-width:799px) {
        width: 80vw;
        margin-bottom: 5vw;
        right: 3vw;
      }
    }

    .about_catch_card {
      width: 100%;
      margin: auto;
      /* border: 3px solid #d8d8d8; */
      box-sizing: border-box;
      text-align: center;
      background-image: url(../images/about_catch_card_bg.webp);
      background-size: contain;
      background-position: center top;
      background-repeat: no-repeat;

      /*-pc*/
      @media (min-width:800px) {
        padding: 21.4px 22.5px;
        max-width: 382.5px;
        margin-bottom: 24px;
        height: 180px;
      }

      /*-sp*/
      @media (max-width:799px) {



















        padding: 5.6vw 6vw;
        margin-bottom: 5vw;
        height: 41vw;



















      }

      .title {
        font-family: "Zen Old Mincho", serif;
        font-weight: 600;
        color: var(--cellvane-blue);

        /*-pc*/
        @media (min-width:800px) {
          font-size: 24.2px;
          margin-bottom: 15.75px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 5.3vw;
          margin-bottom: 2.7vw;
        }
      }

      .text {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        text-align: left;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 16.9px;
          line-height: 1.8;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 3.7vw;
          line-height: 1.8;
        }
      }
    }

    .about_catch_note {
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        padding: 0 8.4px;
      }

      /*-sp*/
      @media (max-width:799px) {
        padding: 0 2.5vw;
      }
    }
  }

  /*-note（共通の注釈テキスト）
  ---------------------------------------------*/
  .note {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    color: #444;

    /*-pc*/
    @media (min-width:800px) {
      font-size: 12px;
      max-width: 379.7px;
      margin: auto;
      margin-bottom: 21px;
    }

    /*-sp*/
    @media (max-width:799px) {
      font-size: 3vw;
      margin-bottom: 5.3vw;
      padding: 0 2.7vw;
    }

    p {
      line-height: 1.4;
      text-indent: -2.5em;
      padding-left: 1.8em;
    }
  }

  /*-features_wrap（特長エリア全体のラップ／block）
  ---------------------------------------------*/
  .features_wrap {

    /*-pc*/
    @media (min-width:800px) {
      padding-top: 51.2px;
      padding-bottom: 37.1px;
      padding: 0 14.1px;
    }

    /*-sp*/
    @media (max-width:799px) {
      padding-top: 21.9vw;
      padding-bottom: 26.7vw;
    }

    /*-features_head（「Cellvane pro の特長」見出し行／横並びなのでflexのまま）
    ---------------------------------------------*/
    .features_head {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;

      /*-pc*/
      @media (min-width:800px) {
        /* margin-left: 33px; */
        margin-bottom: 41px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 9.2vw;
      }

      .title {
        font-family: "Poppins", "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);
        white-space: nowrap;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 24.2px;
          margin-right: 11.8px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 5.3vw;
          margin-right: 2.7vw;
        }
      }

      .line {
        display: block;
        flex: 1 1 auto;
        background-color: var(--cellvane-blue);
        height: 1px;
      }
    }

    /*-feature_item_wrap.pointN（Point.1〜3の各カード／縦積みなのでblock＋個別margin-bottom）
    ---------------------------------------------*/
    .feature_item_wrap {
      position: relative;

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 39.4px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 18.7vw;
      }

      &:last-child {
        margin-bottom: 0;
      }

      /*-point_bg（Point毎の背景装飾／現在の要素の背後に配置）
      ---------------------------------------------*/
      .point_bg {
        display: block;
        position: absolute;
        pointer-events: none;
        z-index: 0;
      }

      &.point1 .point_bg {

        /*-pc*/
        @media (min-width:800px) {
          top: -196px;
          left: -33px;
          width: 104.1px;
        }

        /*-sp*/
        @media (max-width:799px) {
          top: -41.5vw;
          left: -8.8vw;
          width: 22.5vw;
        }
      }

      &.point2 .point_bg {

        /*-pc*/
        @media (min-width: 800px) {
          top: -152px;
          right: -38px;
          width: 186px;
        }

        /*-sp*/
        @media (max-width:799px) {
          top: -33.4vw;
          right: -6.5vw;
          width: 40.1vw;
        }
      }

      &.point3 .point_bg {

        /*-pc*/
        @media (min-width: 800px) {
          top: -124.6px;
          right: -1.4px;
          width: 166.25px;
        }

        /*-sp*/
        @media (max-width:799px) {
          top: -28.4vw;
          right: -0.2vw;
          width: 35.4vw;
        }
      }

      .label {
        display: block;
        font-family: "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);

        /*-pc*/
        @media (min-width:800px) {
          font-size: 19.1px;
          /* width: 670px; */
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 11.25px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4.4vw;
          margin-bottom: 2vw;
        }
      }

      .title {
        display: block;
        font-family: "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);

        /*-pc*/
        @media (min-width:800px) {
          font-size: 30.9px;
          line-height: 1.4;
          /* width: 670px; */
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 11.25px;
        }

        /*-sp*/
        @media (max-width: 799px) {
          font-size: 6.9vw;
          line-height: 1.4;
          margin-bottom: 3.7vw;
        }
      }

      .text {
        display: block;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 19.1px;
          line-height: 1.8;
          /* width: 670px; */
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 24.2px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4.2vw;
          line-height: 1.8;
          margin-bottom: 4.6vw;
        }
      }

      .pict {
        width: 100%;
        /* max-width: 670px; */
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: relative;
        z-index: 1;

        /*-pc*/
        @media (min-width : 800px) {
          margin-bottom: 83px;
        }

        /*-sp*/
        @media (max-width : 799px) {
          /* margin-bottom: 70px; */
        }
      }
    }
  }
}

/*explanation_section
---------------------------------------------*/
section.explanation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eef5f9;
  background-image: url(../images/explanation_bg.webp);
  background-size: cover;

  /*-pc*/
  @media (min-width:800px) {
    padding: 60.2px 33.75px 83.8px;
    margin-top: 122.1px;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 13vw 6.7vw 18.7vw;
  }

  .title {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    color: var(--cellvane-blue);
    text-align: left;
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      font-size: 30.9px;
      line-height: 1.6;
      margin-bottom: 36px;
    }

    /*-sp*/
    @media (max-width:799px) {
      font-size: 6.9vw;
      line-height: 1.6;
      margin-bottom: 8vw;
    }
  }

  .pict {
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      margin-bottom: 36px;
    }

    /*-sp*/
    @media (max-width:799px) {
      margin-bottom: 6vw;
    }
  }

  .message_wrap {
    display: flex;
    flex-direction: column;
    width: 100%;

    .message {
      display: flex;
      flex-direction: column;
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 36px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 8vw;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .text_title {
        font-family: "Zen Old Mincho", serif;
        font-weight: 600;
        color: var(--cellvane-blue);

        /*-pc*/
        @media (min-width:800px) {
          font-size: 21.4px;
          line-height: 1.6;
          margin-bottom: 11.8px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4.7vw;
          line-height: 1.6;
          margin-bottom: 2.7vw;
        }
      }

      .text {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 19.1px;
          line-height: 1.8;
          color: var(--cellvane-blue);
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4.2vw;
          line-height: 1.8;
          color: var(--cellvane-blue);
        }
      }
    }
  }
}

/*lineup_section
---------------------------------------------*/
section.lineup {
  display: flex;
  flex-direction: column;
  align-items: center;

  /*-pc*/
  @media (min-width:800px) {
    padding: 122.1px 0 0;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 26.7vw 0 0;
  }

  .title {

    /*-pc*/
    @media (min-width:800px) {
      max-width: 204.2px;
      width: 100%;
      margin-bottom: 70.3px;
    }

    /*-sp*/
    @media (max-width:799px) {
      max-width: 45.3vw;
      width: 100%;
      margin-bottom: 15.7vw;
    }
  }

  .pict {
    width: 100%;
    overflow: hidden;
  }

  /*-lineup_btn_wrap
  ---------------------------------------------*/
  .lineup_btn_wrap {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      padding: 0 15.2px;
      margin-top: 24.2px;
      gap: 11.8px;
    }

    /*-sp*/
    @media (max-width:799px) {
      padding: 0 3.3vw;
      margin-top: 5.3vw;
      gap: 2.6vw;
    }

    .-lineup_btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
      border: none;
      box-sizing: border-box;
      cursor: pointer;

      /*-pc*/
      @media (min-width:800px) {
        flex: 0 0 calc((100% - 23.6px) / 3);
      }

      /*-sp*/
      @media (max-width:799px) {
        flex: 0 0 calc((100% - 5.3vw) / 3);
      }

      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ddd;
        box-sizing: border-box;

        /*-pc*/
        @media (min-width:800px) {
          height: 96.2px;
          margin-bottom: 5.1px;
        }

        /*-sp*/
        @media (max-width:799px) {
          height: 21.3vw;
          margin-bottom: 1.1vw;
        }

        img {
          width: auto;

          /*-pc*/
          @media (min-width:800px) {
            max-height: 70.9px;
          }

          /*-sp*/
          @media (max-width:799px) {
            max-height: 15.7vw;
          }
        }
      }

      &.-lineup_btn1 .box,
      &.-lineup_btn2 .box,
      &.-lineup_btn3 .box,
      &.-lineup_btn4 .box,
      &.-lineup_btn5 .box,
      &.-lineup_btn6 .box {
        border-color: #666;

        /*-pc*/
        @media (min-width:800px) {
          border-width: 2.25px;
        }

        /*-sp*/
        @media (max-width:799px) {
          border-width: 2px;
        }
      }

      .label {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 400;
        color: #111;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 1.2rem;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 2.7vw;
        }
      }

      &.-lineup_btn1 .label,
      &.-lineup_btn2 .label,
      &.-lineup_btn3 .label,
      &.-lineup_btn4 .label,
      &.-lineup_btn5 .label,
      &.-lineup_btn6 .label {
        font-weight: 700;
      }
    }
  }

  /*-lineup_detail_wrap
  ---------------------------------------------*/
  .lineup_detail_wrap {
    width: 100%;
    box-sizing: border-box;

    /*-pc*/
    @media (min-width:800px) {
      padding: 58px 38.8px 0;
    }

    /*-sp*/
    @media (max-width:799px) {
      padding: 10.7vw 8.7vw 0;
    }

    .-lineup_detail {
      display: none;
      flex-direction: column;
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        padding-bottom: 125px;
      }

      /*-sp*/
      @media (max-width:799px) {
        padding-bottom: 26.7vw;
      }

      &.-lineup_detail1,
      &.-lineup_detail2,
      &.-lineup_detail3,
      &.-lineup_detail4,
      &.-lineup_detail5,
      &.-lineup_detail6 {
        display: flex;
      }

      /* head/pict/info/badge/note/how_to_use_wrap は商品ごとに有無・順序が変わるため、
         各要素に :not(:last-child) でmargin-bottomを持たせ、実際に最後の要素だけ0にする */
      .head {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 18px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }
        }

        .category {
          order: -1;
          display: flex;
          flex-direction: column;
          align-items: center;

          /* .head内で視覚的に先頭表示される要素のため、.headとの間隔はこの要素のmargin-bottomで持つ */
          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 16.9px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }

          .label {
            font-family: "Noto Sans JP", sans-serif;
            font-weight: 400;
            color: #111;
            text-align: center;

            /*-pc*/
            @media (min-width:800px) {
              font-size: 19.1px;
              margin-bottom: 9.6px;
            }

            /*-sp*/
            @media (max-width:799px) {
              font-size: 4.3vw;
              margin-bottom: 2.1vw;
            }
          }

          .line {
            display: block;
            background-color: var(--cellvane-blue);
            height: 1px;

            /*-pc*/
            @media (min-width:800px) {
              width: 180px;
            }

            /*-sp*/
            @media (max-width:799px) {
              width: 40vw;
            }
          }
        }

        .headline {
          font-family: "Zen Old Mincho", serif;
          font-weight: 700;
          color: var(--cellvane-blue);
          text-align: center;

          /*-pc*/
          @media (min-width:800px) {
            font-size: 27px;
            line-height: 1.6;
            margin-top: 11.25px;
            white-space: nowrap;
          }

          /*-sp*/
          @media (max-width:799px) {
            font-size: 5.3vw;
            line-height: 1.6;
            white-space: nowrap;
          }
        }
      }

      .pict {
        width: 100%;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 18px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 2vw;
          }
        }
      }

      .pict.-noimage {
        background-color: #bdbdbd;
      }

      .info {
        display: flex;
        flex-direction: column;
        width: 100%;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 18px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }
        }

        .name {
          color: #111;

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 7.3px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 1.6vw;
          }
        }

        .spec {
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 400;
          color: #111;

          /*-pc*/
          @media (min-width:800px) {
            font-size: 19.1px;
            line-height: 1.6;
          }

          /*-sp*/
          @media (max-width:799px) {
            font-size: 4.3vw;
            line-height: 1.6;
          }
        }
      }

      .badge {
        display: flex;
        align-items: flex-start;
        width: 100%;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 18px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 4vw;
          }
        }

        .badge_pict {
          flex: none;

          /*-pc*/
          @media (min-width:800px) {
            width: 86.6px;
            margin-right: 20.25px;
          }

          /*-sp*/
          @media (max-width:799px) {
            width: 19vw;
            margin-right: 4.5vw;
          }
        }

        .badge_text {
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 400;
          color: #111;

          /*-pc*/
          @media (min-width:800px) {









            font-size: 14.3px;
            line-height: 1.4;
            width: 260px;









          }

          /*-sp*/
          @media (max-width:799px) {
            font-size: 3.1vw;
            line-height: 1.4;
            max-width: 55vw;
          }
        }
      }

      .note {
        width: 100%;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        color: #444;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 0.8rem;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 3vw;
        }

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 18px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }
        }

        p {
          line-height: 1.4;
          display: block;

          /*-pc*/
          @media (min-width : 800px) {
            font-size: 12px;
          }

          /*-sp*/
          @media (max-width : 799px) {
            font-size: 3vw;
          }
        }
      }

      .how_to_use_wrap {
        width: 100%;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 18px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }
        }

        /*-pc*/
        @media (min-width:800px) {
          margin-top: 33.75px;
        }

        /*-sp*/
        @media (max-width:799px) {
          margin-top: 16vw;
        }

        .how_to_use_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 100%;
          background-color: transparent;
          border: none;
          border-bottom: 1px solid var(--cellvane-blue);
          box-sizing: border-box;
          cursor: pointer;

          /*-pc*/
          @media (min-width:800px) {
            padding: 0 0 16.9px;
          }

          /*-sp*/
          @media (max-width:799px) {
            padding: 0 0 2.1vw;
          }

          .text {
            font-family: "Poppins", "Zen Old Mincho", serif;
            font-weight: 500;
            color: #111;

            /*-pc*/
            @media (min-width:800px) {
              font-size: 21.4px;
            }

            /*-sp*/
            @media (max-width:799px) {
              font-size: 4.7vw;
              padding-bottom: 1.9vw;
            }
          }

          .icon {
            position: absolute;
            top: 0;
            border: 1px solid #111;
            border-radius: 50%;
            box-sizing: border-box;

            /*-pc*/
            @media (min-width:800px) {
              right: 0;
              width: 26.4px;
              height: 26.4px;
              position: relative;
              top: 0px;
              right: -94.5px;
            }

            /*-sp*/
            @media (max-width:799px) {
              right: 1.4vw;
              width: 5.9vw;
              height: 5.9vw;
            }
          }
        }

        .how_to_use_item {
          display: none;
          overflow: hidden;
          flex-direction: column;
          align-items: center;

          /*-pc*/
          @media (min-width:800px) {
            padding-top: 24.2px;
          }

          /*-sp*/
          @media (max-width:799px) {
            padding-top: 5.3vw;
          }

          &.-open {
            display: flex;
          }

          .sub_title {
            color: #111111;
            text-align: center;

            /*-pc*/
            @media (min-width:800px) {
              margin-bottom: 16.9px;
            }

            /*-sp*/
            @media (max-width:799px) {
              margin-bottom: 5.1vw;
            }
          }

          .face_pict {
            width: 100%;

            /*-pc*/
            @media (min-width:800px) {
              max-width: 163px;
              margin-bottom: 16.9px;
            }

            /*-sp*/
            @media (max-width:799px) {
              max-width: 37.5vw;
              margin-bottom: 5.1vw;
            }
          }

          /* HOW TO USEのステップ数は商品ごとに1〜2件と可変のため、
             :not(:last-child) で「実際に最後のstep」だけ0にする */
          .step:not(:last-child) {

            /*-pc*/
            @media (min-width:800px) {
              margin-bottom: 27px;
            }

            /*-sp*/
            @media (max-width:799px) {
              margin-bottom: 5.1vw;
            }
          }

          .step {
            display: flex;
            flex-direction: column;
            width: 100%;

            .step_label {
              font-family: "Noto Sans JP", sans-serif;
              font-weight: 700;
              color: #111;
              background-color: #efefef;
              text-align: center;

              /*-pc*/
              @media (min-width:800px) {
                font-size: 19.1px;
                padding: 7.3px 0;
                margin-bottom: 9.6px;
              }

              /*-sp*/
              @media (max-width:799px) {
                font-size: 4.3vw;
                padding: 1.6vw 0;
                margin-bottom: 2.1vw;
              }
            }

            .step_text {
              font-family: "Noto Sans JP", sans-serif;
              font-weight: 400;
              color: #111;

              /*-pc*/
              @media (min-width:800px) {
                font-size: 19.1px;
                line-height: 1.6;
              }

              /*-sp*/
              @media (max-width:799px) {
                font-size: 4.2vw;
                line-height: 1.6;
                margin-bottom: 1vw;
              }
            }
          }
        }
      }
    }
  }
}

/*quality_section
---------------------------------------------*/
section.quality {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #efefef;
  box-sizing: border-box;

  /*-pc*/
  @media (min-width:800px) {
    padding: 119.8px 0px 63px;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 24.7vw 0px 14vw;
  }

  .quality_contents_wrap {
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      padding: 0 26px;
    }

    /*-sp*/
    @media (max-width:799px) {
      padding: 0 6.7vw;
    }
  }

  .title {

    /*-pc*/
    @media (min-width:800px) {
      width: 232.3px;
      margin-bottom: 72px;
    }

    /*-sp*/
    @media (max-width:799px) {
      max-width: 50.4vw;
      width: 100%;
      margin-bottom: 16vw;
    }
  }

  .quality_accodion_wrap {
    width: 100%;

    /*-quality_accodion_item（アコーディオンの中身／block＋直下要素に共通margin-bottom）
    ---------------------------------------------*/
    .quality_accodion_item {
      display: none;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;

      &.-open {
        display: block;
        /* margin-bottom: 40px; */
      }

      &.-open+.accodion_btn {

        /*-pc*/
        @media (min-width:800px) {
          margin-top: 16.9px;
        }

        /*-sp*/
        @media (max-width:799px) {
          margin-top: 0;
        }
      }

      .title {
        font-family: "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);

        /*-pc*/
        @media (min-width:800px) {
          font-size: 26.5px;
          line-height: 1.6;
          margin-bottom: 21px;
          width: 100%;
        }

        /*-sp*/
        @media (max-width:799px) {





          font-size: 5.6vw;
          line-height: 1.6;
          margin-bottom: 3.7vw;
          min-width: 100%;





        }
      }

      /* PDRN/PRISM Technologyの説明では.textが複数回・可変で登場するため、
         PCは:not(:last-child)で末尾以外にのみmargin-bottomを付与。
         SPは元々.textだけ独自のmargin-bottomを持っていたため、その挙動を維持 */
      .text {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        color: #111;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 26px;
          }
        }

        /*-pc*/
        @media (min-width:800px) {
          font-size: 19px;
          line-height: 1.8;
          margin-bottom: 20px;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4.2vw;
          line-height: 1.8;
          margin-bottom: 5.3vw;
        }

        strong {
          font-weight: 700;
        }
      }

      .pict {
        display: block;
        width: 100%;

        /*-pc*/
        @media (min-width: 800px) {
          margin-bottom: 35px;
          margin-top: 50px;
        }

        /*-sp*/
        @media (max-width:799px) {
          margin-bottom: 6.7vw;
          margin-top: 12vw;
        }
      }

      .prism_pict {
        display: block;
        margin-left: auto;
        margin-right: auto;

        /*-pc*/
        @media (min-width:800px) {
          max-width: 189.6px;
          margin-bottom: 36px;
          margin-top: 60px;
        }

        /*-sp*/
        @media (max-width:799px) {
          max-width: 42.1vw;
          margin-bottom: 6.7vw;
          margin-top: 13vw;
        }
      }

      .note {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        color: #111;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 12px;
          margin-bottom: 40.25px;
          line-height: 1.5em;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 3vw;
          line-height: 1.5em;
          margin-bottom: 6.7vw;
        }
      }

      .badge {
        display: flex;
        align-items: flex-start;
        width: 100%;

        /*-pc*/
        @media (min-width:800px) {
          margin-bottom: 20px;
        }

        /*-sp*/
        @media (max-width:799px) {
          margin-bottom: 5vw;
        }

        .badge_pict {
          flex: none;

          /*-pc*/
          @media (min-width:800px) {
            width: 86.6px;
            margin-right: 20.25px;
          }

          /*-sp*/
          @media (max-width:799px) {
            width: 19.2vw;
            margin-right: 4.5vw;
          }
        }

        .badge_text {
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 400;
          color: #111;

          /*-pc*/
          @media (min-width:800px) {



















            font-size: 14.3px;
            line-height: 1.4;



















          }

          /*-sp*/
          @media (max-width:799px) {





            font-size: 3.1vw;
            line-height: 1.4;
            max-width: 55vw;





          }
        }
      }
    }
  }

  .quality_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      margin-bottom: 72px;
    }

    /*-sp*/
    @media (max-width:799px) {
      margin-bottom: 16vw;
    }

    .pict {
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 24.2px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 5.3vw;
      }
    }

    .text {
      font-family: "Zen Old Mincho", serif;
      font-weight: 400;
      color: var(--cellvane-blue);
      text-align: center;

      /*-pc*/
      @media (min-width:800px) {
        font-size: 30.9px;
        line-height: 1.4;
        text-align: left;
        margin-bottom: 13.5px;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 6.9vw;
        line-height: 1.4;
        text-align: left;
        margin-bottom: 4.8vw;
      }
    }
  }

  /*-quality_item_wrap（PDRN／PRISM Technologyの各項目／block＋個別margin-bottom）
  ---------------------------------------------*/
  .quality_item_wrap {
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      padding: 0 44.5px;
    }

    /*-sp*/
    @media (max-width:799px) {
      padding: 0 6.7vw;
    }

    /* item1/item2で共通のクラスを使い回すため、:not(:last-child)で末尾以外にのみmargin-bottomを付与 */
    &:not(:last-child) {

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 44px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 16vw;
      }
    }

    .quality_item_title {
      display: block;
      /* font-family: "Poppins", "Zen Old Mincho", serif; */
      font-weight: 400;
      color: var(--cellvane-blue);

      /*-pc*/
      @media (min-width:800px) {
        font-size: 24.2px;
        line-height: 1.4;
        margin-bottom: 14px;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 4.8vw;
        line-height: 1.4;
        margin-bottom: 4.3vw;
      }
    }

    .quality_pict {
      display: block;
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 19.1px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 4.3vw;
      }
    }

    .quality_discription {
      display: block;
      font-family: "Zen Old Mincho", serif;
      font-weight: 400;
      color: var(--cellvane-blue);

      /*-pc*/
      @media (min-width:800px) {
        font-size: 26.4px;
        line-height: 1.4;
        margin-bottom: 10pxpx;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 5.8vw;
        line-height: 1.4;
        margin-bottom: 4vw;
      }
    }

    &.item1 .quality_discription {}

    &.item2 .quality_discription {

      /*-pc*/
      @media (min-width : 768px) {
        margin-bottom: 30px;
      }

      /*-sp*/
      @media (max-width : 767px) {
        margin-bottom: 5vw;
      }
    }

    .quality_accodion_wrap {

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 19.1px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin: 8vw 0 4.3vw;
      }
    }

    .note {
      display: block;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 400;
      color: var(--cellvane-blue);

      /*-pc*/
      @media (min-width:800px) {
        font-size: 12px;
        margin: 11px 0 30px;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 3vw;
      }
    }
  }
}

/*story_section
---------------------------------------------*/
section.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;

  /*-pc*/
  @media (min-width:800px) {
    padding: 119.8px 0px;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 26.7vw 0px;
  }

  .title {

    /*-pc*/
    @media (min-width:800px) {
      width: 185.1px;
      margin-bottom: 72px;
    }

    /*-sp*/
    @media (max-width:799px) {
      width: 41.1vw;
      margin-bottom: 13.3vw;
    }
  }

  .story_contents_wrap {
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      padding: 0px 34px;
    }

    /*-sp*/
    @media (max-width:799px) {
      padding: 0px 6.7vw;
    }
  }

  .story_accodion_wrap {
    width: 100%;

    /*-story_accodion_item（アコーディオンの中身／block＋直下要素に共通margin-bottom）
    ---------------------------------------------*/
    .story_accodion_item {
      display: none;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;

      &.-open {
        display: block;

        /*-pc*/
        @media (min-width : 800px) {
          margin-bottom: 37px;
        }

        /*-sp*/
        @media (max-width : 799px) {}
      }

      &.-open+.accodion_btn {

        /*-pc*/
        @media (min-width:800px) {
          margin-top: 16.9px;
        }

        /*-sp*/
        @media (max-width:799px) {
          margin-top: 9.1vw;
        }
      }

      /*-subtitle（見出しの後に続くフック文・アコーディオン内の導入行）
      ---------------------------------------------*/
      .subtitle {
        font-family: "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);
        display: block;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 13px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 3.7vw;
            /* white-space: nowrap; */
          }
        }

        /*-pc*/
        @media (min-width:800px) {
          font-size: 21px;
          line-height: 1.6;
        }

        /*-sp*/
        @media (max-width: 799px) {
          font-size: 4.9vw;
          line-height: 1.6;
        }

        &.mt_custom {

          /*-pc*/
          @media (min-width : 800px) {
            margin-top: 50px;
          }

          /*-sp*/
          @media (max-width : 790px) {
            margin-top: 10vw;
          }

        }
      }

      .subtitle_l {
        font-family: "Zen Old Mincho", serif;
        font-weight: 400;
        color: var(--cellvane-blue);
        display: block;
        line-height: 1.5em;
        margin-bottom: 5vw;




        /*-pc*/
        @media (min-width:800px) {
          font-size: 25px;
          margin-bottom: 10px;
        }

        /*-sp*/
        @media (max-width: 799px) {
          font-size: 5.6vw;
        }
      }

      /*-text（本文）
      ---------------------------------------------*/
      .text {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        color: #111;
        display: block;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 24.2px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }
        }

        /*-pc*/
        @media (min-width:800px) {
          font-size: 19.1px;
          line-height: 1.8;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4.2vw;
          line-height: 1.8;
        }
      }

      .introduction {
        background-color: #EFEFEF;

        /*-pc*/
        @media (min-width : 800px) {
          padding: 28px 20px 17px;
          margin-top: 58px;
        }

        /*-sp*/
        @media (max-width : 799px) {
          padding: 5vw 5vw 3.3vw;
          margin-top: 14vw;
        }

        .superviser_name {

          font-family: "Zen Old Mincho", serif;
          font-weight: 400;
          color: var(--cellvane-blue);
          display: block;

          /*-pc*/
          @media (min-width : 800px) {












            font-size: 22px;
            margin-bottom: 18px;












          }

          /*-sp*/
          @media (max-width : 799px) {


            font-size: 5vw;
            margin-bottom: 5vw;


          }
        }

        .superviser_detail {



          /*-pc*/
          @media (min-width : 800px) {
            line-height: 1.8em;
            font-size: 15px;
          }

          /*-sp*/
          @media (max-width : 799px) {






            line-height: 1.8em;
            font-size: 3.2vw;






          }
        }

      }


      /*-remarks（注釈・注意書き）
      ---------------------------------------------*/
      .remarks {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        color: #111;
        display: block;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 59px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
            line-height: 1.5em;
          }
        }

        /*-pc*/
        @media (min-width:800px) {
          font-size: 12px;
          line-height: 1.5em;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 3vw;
        }
      }

      /*-sub_contents_wrap（アコーディオン内の小見出し＋本文のサブブロック）
      ---------------------------------------------*/
      .sub_contents_wrap {
        width: 100%;
        display: block;

        &:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 24.2px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 5.3vw;
          }
        }

        .sub_contents_title {
          font-family: "Zen Old Mincho", serif;
          font-weight: 600;
          color: var(--cellvane-blue);
          display: block;
          font-feature-settings: "palt";

          /*-pc*/
          @media (min-width:800px) {













            font-size: 25px;
            letter-spacing: -0.05em;
            line-height: 1.6;
            margin-top: 56.25px;
            margin-bottom: 11.8px;













          }

          /*-sp*/
          @media (max-width: 799px) {

















            font-size: 5.6vw;
            letter-spacing: -0.05em;
            line-height: 1.6;
            margin: 13.3vw 0 5.3vw;
            margin-bottom: 2.7vw;

















          }
        }

        .pict {
          display: block;
          width: 100%;

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 11.8px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 4.7vw;
          }
        }

        /* sub_contents_wrap内のtext/remarksは、この階層の方が詳細度が高いため
           外側(.story_accodion_item直下)より優先して21px/2.7vwが適用される */
        .text:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 20px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 8vw;
          }
        }

        .text:last-child {
          line-height: 1.8em;
        }

        .remarks:not(:last-child) {

          /*-pc*/
          @media (min-width:800px) {
            margin-bottom: 11.8px;
          }

          /*-sp*/
          @media (max-width:799px) {
            margin-bottom: 2.7vw;
          }
        }

        .remarks:last-child {
          line-height: 1.8em;
        }
      }
    }
  }

  .story_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      margin-bottom: 72px;
    }

    /*-sp*/
    @media (max-width:799px) {
      margin-bottom: 18.3vw;
    }

    .pict {
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 24.2px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 5.3vw;
      }
    }

    /*-title（story_title冒頭のリード見出し）
    ---------------------------------------------*/
    .title {
      font-family: "Zen Old Mincho", serif;
      font-weight: 400;
      color: var(--cellvane-blue);
      text-align: center;

      /*-pc*/
      @media (min-width:800px) {
        font-size: 31px;
        line-height: 1.4;
        text-align: left;
        margin-bottom: 36.4px;
        width: 100%;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 6.8vw;
        line-height: 1.4;
        text-align: left;
        margin-bottom: 8.3vw;
        width: 100%;
      }
    }
  }

  /*-story_item_wrap（MESSAGE／PROMISEの各項目／block＋直下要素に共通margin-bottom）
  ---------------------------------------------*/
  .story_item_wrap {
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      padding: 0 44px;
    }

    /*-sp*/
    @media (max-width: 799px) {
      padding: 0px 8.9vw;
    }

    /* item1/item2で共通のクラスを使い回すため、:not(:last-child)で末尾以外にのみmargin-bottomを付与 */
    &:not(:last-child) {

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 79px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 13.3vw;
      }
    }

    .story_item_title {
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      color: var(--cellvane-blue);
      letter-spacing: 4px;
      display: block;

      /*-pc*/
      @media (min-width:800px) {
        font-size: 24.2px;
        margin-bottom: 19.1px;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 5.3vw;
        margin-bottom: 4.3vw;
      }
    }

    .story_pict {
      display: block;
      width: 100%;

      /*-pc*/
      @media (min-width:800px) {
        margin-bottom: 25px;
      }

      /*-sp*/
      @media (max-width:799px) {
        margin-bottom: 4.3vw;
      }
    }

    /*-title（各項目の見出し／アコーディオン内の強調行にも共通適用）
    ---------------------------------------------*/
    .title {
      font-family: "Zen Old Mincho", serif;
      font-weight: 400;
      color: var(--cellvane-blue);
      display: block;

      /*-pc*/
      @media (min-width:800px) {
        font-size: 26.4px;
        line-height: 1.4;
        margin-bottom: 32px;
        width: 100%;
      }

      /*-sp*/
      @media (max-width:799px) {
        font-size: 5.8vw;
        line-height: 1.4;
        margin-bottom: 7.3vw;
        width: 100%;



      }

      .supervisor {
        text-align: right;

        /*-pc*/
        @media (min-width:800px) {
          font-size: 18px;
          margin: 10px 0;
        }

        /*-sp*/
        @media (max-width:799px) {
          font-size: 4vw;
        }
      }
    }
  }
}

/*contact_section
---------------------------------------------*/
section.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #efefef;
  box-sizing: border-box;

  /*-pc*/
  @media (min-width:800px) {
    padding: 119.8px 33px 140px;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 26.7vw 7.5vw 31vw;
  }

  .contact_title {

    /*-pc*/
    @media (min-width:800px) {
      width: 263.8px;
      margin-bottom: 47.8px;
    }

    /*-sp*/
    @media (max-width:799px) {
      width: 58.7vw;
      margin-bottom: 10.7vw;
    }
  }

  .discription {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #111;
    text-align: center;

    /*-pc*/
    @media (min-width:800px) {
      font-size: 21.4px;
      line-height: 1.8;
      margin-bottom: 23px;
    }

    /*-sp*/
    @media (max-width:799px) {
      font-size: 4.6vw;
      line-height: 1.6;
      margin-bottom: 5.8vw;
    }
  }

  .contact_btn {
    display: block;
    width: 100%;

    /*-pc*/
    @media (min-width:800px) {
      max-width: 360px;
    }

    /*-sp*/
    @media (max-width:799px) {
      max-width: 80vw;
    }

    .pict {
      width: 100%;
    }
  }
}

/*footer_section
---------------------------------------------*/
section.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--cellvane-blue);
  box-sizing: border-box;

  /*-pc*/
  @media (min-width:800px) {
    padding: 50px 0 20px 30px;
  }

  /*-sp*/
  @media (max-width:799px) {
    padding: 11vw 0 5vw 6.7vw;
  }

  .logo {

    /*-pc*/
    @media (min-width:800px) {
      width: 166px;
      margin-bottom: 32.1px;
    }

    /*-sp*/
    @media (max-width: 799px) {
      max-width: 36.6vw;
      margin-bottom: 6.9vw;
    }
  }

  .company {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #fff;

    /*-pc*/
    @media (min-width:800px) {
      font-size: 15.75px;
      margin-bottom: 6.2px;
    }

    /*-sp*/
    @media (max-width:799px) {
      font-size: 3.4vw;
      margin-bottom: 1.9vw;
    }
  }

  .address {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #fff;

    /*-pc*/
    @media (min-width:800px) {
      font-size: 15.75px;
      margin-bottom: 52.4px;
    }

    /*-sp*/
    @media (max-width:799px) {
      font-size: 3.4vw;
      margin-bottom: 9.9vw;
    }

    p {
      line-height: 1.5;
    }
  }

  .copyright {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    box-sizing: border-box;

    /*-pc*/
    @media (min-width:800px) {
      font-size: 12.9px;
      padding: 0 29.8px 16.9px 0;
    }

    /*-sp*/
    @media (max-width:799px) {
      font-size: 2.9vw;
      padding: 0 6.7vw 4vw 0;
    }
  }
}