@charset "UTF-8";

/*font-face
---------------------------------------------*/
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/NotoSansJP-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ZenOldMincho-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ZenOldMincho-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ZenOldMincho-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-Medium.woff2") format("woff2");
}

@media (min-width:800px) {

  button:hover,
  .bt:hover {
    opacity: 0.5;
    transition: 0.2s all;

  }
}

.bold {
  font-weight: bold !important;
}

.fw_600 {
  font-weight: 600 !important;
}

/*accodion_btn（View more / Close ボタン／QUALITY・STORY共通）
---------------------------------------------*/
.accodion_btn {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;

  &>* {

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

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

  &>*:last-child {
    margin-right: 0;
  }

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

  .btn_text {
    display: block;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    color: var(--cellvane-blue);
    white-space: nowrap;
    margin-bottom: 0;

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

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

  .icon {
    flex: none;
    position: relative;
    border: 1px solid var(--cellvane-blue);
    border-radius: 50%;
    box-sizing: border-box;



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

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

  }
}

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

.accodion_btn .icon::before {
  width: 2.667vw;
  height: 1px;
}

.accodion_btn .icon::after {
  width: 1px;
  height: 2.667vw;
}

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

  .accodion_btn .icon::after {
    width: 1px;
    height: 11.813px;
  }
}

/*title_line1 / title_line2（2行タイトルの1行目・2行目共通／HOW TO USEのsub_title・LINE UPのname）
---------------------------------------------*/
.title_line1 {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.6;

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

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

.title_line2 {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  /* font-weight: bold; */




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

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



    font-size: 4.267vw;
    /* font-weight: bold; */



  }
}

.-pc {

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

  /*-sp*/
  @media (max-width:799px) {
    display: none !important;
  }
}

.-sp {

  /*-pc*/
  @media (min-width:800px) {
    display: none !important;
  }

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


/*scroll driven animation
  -----------------------------------------------------*/
.-fadeUp {
  opacity: 0;
  transition: 1.5s all;
  transform: translateY(30px);
}

.-fadeUp.on {
  opacity: 1;
  transition-duration: 1.2s;
  transform: translate(0);
}

.text .text_item {
  margin-bottom: 0.7em;
}