@charset "UTF-8";
body, button, input, select, textarea {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "meiryo", sans-serif;
}
ol, ul {
  padding-left: 0;
}

/* 20220928 松本追記 */
.main .section_product .prod_list .prod_inner .prod_contents .prod_image .prod_bg {
  height: 100%;
}
.main .common_layout_section .section_contents .button_area .button .mag-text {
  text-align: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .main .section_how_to_use {
    margin: 0 0 30px;
    padding-top: 60px;
  }
}

.main .section_product .prod_list .prod {
  background: rgba(0, 0, 0, 0.3);
}
.main .section_product .prod_list .prod:last-child {
  margin: 0 auto 50px;
}
.main .common_layout_section {
  background: transparent;
}
.main .section_product .prod_list .prod_inner .prod_contents .prod_desc .desc_inner p b {
  font-size: 18px;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "meiryo", sans-serif;
}
@media screen and (max-width: 767px) {
  .main .section_product .prod_list .prod_inner .prod_contents .prod_desc .desc_inner p b {
    font-size: 16px;
  }
}

#section_agefarre.section_agefarre {
  background: none;
}
#section_agefarre.section_agefarre .section_contents {
  margin: 0 auto 100px;
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    translate: 0 50px;
    opacity: 0;
}
@media screen and (max-width: 767px) {
  #section_agefarre.section_agefarre .section_contents {
    margin: 0 auto 20px;
  }
}
#section_agefarre.section_agefarre .section_contents.inview {
  opacity: 1;
  translate: 0 0;
}
#section_agefarre.section_agefarre .section_contents a img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .main .section_product .prod_list .prod_inner .prod_contents .prod_desc {
      width: 100%;
      padding: 50px 30px 50px 30px;
  }
}


.main .section_interval_01 h3 {
  font-size: 4rem;
  text-align: center;
  color: #fff;
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 0 50px;
  opacity: 0;
}
.main .section_interval_01 h3.inview {
  opacity: 1;
  translate: 0 0;
}
@media screen and (max-width: 767px) {
  .main .section_interval_01 h3 {
    font-size: 2.5rem;
  }
}



/* 202210改修css */
#section_fv .sec p {
  margin-bottom: 2rem;
}
#section_first_bn .section_first_bn_inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#section_first_bn .section_first_bn_inner a {
  display: block;
  width: 90%;
  margin: 0 auto;
  max-width: 700px;
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s
}
#section_first_bn .section_first_bn_inner a.inview {
  opacity: 1;
  translate: 0 0;
}
#section_first_bn .section_first_bn_inner a img {
  width: 100%;
}
#section_second_bn .section_second_bn_inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 100px;
}
#section_second_bn .section_second_bn_inner a {
  display: block;
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s
}
#section_second_bn .section_second_bn_inner a.inview {
  opacity: 1;
  translate: 0 0;
}
#section_second_bn .section_second_bn_inner a img {
  width: 100%;
}
#section_second_bn .section_second_bn_inner img {
  width: 90%;
  display: inline;
}
#section_banner .section_banner_header p {
  font-size: 24px;
}
.main .section_header .section_title {
  font-size: 4rem;
}
.main .section_product .prod_list .prod.layout_02 .prod_desc {
  order: 1;
}
.main .section_product .prod_list .prod_inner .prod_contents .prod_desc::before, .main .section_product .prod_list .prod_inner .prod_contents .prod_desc::after {
  content: none;
}
.main .section_product .prod_list .prod_inner .prod_contents .prod_desc {
  padding: 50px 0 50px 30px;
}
.desc_inner_title {
  display: flex;
  align-items: center;
}
.desc_inner_title p {
  line-height: 1.2em;
}
.desc_inner_title h4 {
  margin-right: 20px;
}
.desc_inner_title p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.main .section_product .prod_list .prod {
  display: block;
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  background: none;
  padding: 0 20px;
}
.main .section_product .prod_list .prod_inner .prod_contents .prod_desc .desc_inner:after {
  content: none;
}
.prod_desc_02 {
  background: url('../images/02_bg.jpg?1') no-repeat;
  background-size: cover;
}
.prod_desc_03 {
  background: url('../images/03_bg.jpg?1') no-repeat;
  background-size: cover;
}
.prod_desc_04 {
  background: url('../images/04_bg.jpg?1') no-repeat;
  background-size: cover;
}
.prod_desc_05 {
  background: url('../images/05_bg.jpg?1') no-repeat;
  background-size: cover;
}
.prod_desc_06 {
  background: url('../images/06_bg.jpg?1') no-repeat;
  background-size: cover;
}
.prod_desc_11 {
  background: url('../images/mango_bg.jpg?1') no-repeat;
  background-size: cover;
}
.prod_desc_12 {
  background: url('../images/muscat_bg.jpg?1') no-repeat;
  background-size: cover;
}
.f_color_w {
  color: #fff;
}
.desc_inner_btn {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
}
.main .section_product .prod_list .prod .desc_inner_btn a {
  padding: 0;
}
.desc_inner_btn_01 {
  width: 100%;
}
.main .section_product .prod_list .prod .desc_inner_btn_01 a {
  display: block;
  position: relative;
}
.desc_inner_btn_01 a span {
  display: block;
  position: absolute;
  right: -20px;
  width: 110px;
  top: -50px;
}
.desc_inner_btn_02, .desc_inner_btn_03 {
  width: 50%;
}
.desc_inner_btn_02 img, .desc_inner_btn_03 img {
  width: 100%;
}
.main .section_product .prod_list .prod_inner .prod_contents .prod_desc .desc_inner p {
  margin-bottom: 30px;
}
.main .section_product .prod_list .prod_inner .desc_inner .desc_inner_btn {
  translate:100px 0;
  opacity: 0;
  transition: 1s .5s;
}
.main .section_product .prod_list .prod_inner.inview .desc_inner .desc_inner_btn {
  translate: 0 0;
  opacity: 1;
}
.section_how_to_use > p {
  margin: 1rem 0 2rem;
  color: #fff;
  text-align: center;
}
.main .section_how_to_use_inner .pri p {
  position: static;
}
.main .section_how_to_use_inner .pri .sec {
  position: absolute;
  right: 0;
  top: 0;
  width: 36%;
}
.main .section_how_to_use_inner .sec .flow_list {
  padding: 0;
  margin: 20px 2%;
  display: flex;
  flex-wrap: wrap;
  width: 96%;
  position: relative;
  z-index: 2;
}
.main .section_how_to_use_inner .sec .flow_list .flow {
  width: 46%;
  margin: 0 2% 20px;
}
.main .section_how_to_use_inner .pri .section_bg {
  min-height: 550px;
}
.main .section_how_to_use_inner .pri .desc p {
  color: #000;
  font-size: 12px;
  text-align: left;
}
.main .section_how_to_use_inner .sec .flow_list .flow {
  width: 46%;
}
.main .banner_subscription {
  background: transparent;
}
.main .banner_subscription a img {
  width: 100%;
}
.more_btn a {
  display: block;
  width: 80%;
  max-width: 300px;
  background: #fff;
  text-align: center;
  padding: 20px 30px 20px 0;
  margin: 0 auto;
  border-radius: 10px;
  transition: .3s;
}
.more_btn.line_btn a {
  display: block;
  width: 80%;
  max-width: 300px;
  background: #06C755;
  color: #fff;
  text-align: center;
  padding: 20px 30px 20px 0;
  margin: 0 auto;
  border-radius: 10px;
  transition: .3s;
}
.more_btn a:hover {
  opacity: .7;
}
.main .section_how_to_use_inner .sec .flow_list .flow:before {
  font-size: 2.5rem!important;
}
.complete .loading {
  animation: loading_hide 1s forwards alternate!important;
}


@media screen and (max-width: 767px) {
  #section_second_bn .section_second_bn_inner{
    margin-bottom: 50px;
  }
  #section_banner .section_banner_header p {
    margin: 20px auto;
  }
  .desc_inner_title {
    display: block;
  }
  .main .section_product .prod_list .prod_inner .prod_contents .prod_desc {
    padding: 20px 20px 20px 20px;
  }
  .desc_inner_btn {
    width: 100%;
  }
  .main .section_how_to_use_inner .pri .sec {
    position: static;
    width: 100%;
  }
  .main .section_how_to_use_inner .sec .flow_list {
    margin: 20px -2% 0;
    width: 104%;
  }
  .main .banner_subscription {
    margin: 0 auto;
  }
  .main .section_header .section_title {
    font-size: 4rem;
  }
  .main .section_how_to_use_inner .pri .section_bg {
    min-height: 350px;
  }
  .section_how_to_use > p {
    font-size: 13px;
  }
  .main .section_product .prod_list .prod_inner .prod_contents .prod_desc .desc_inner p {
    margin-bottom: 15px;
  }
  .desc_inner_btn_01 a span {
    width: 90px;
  }
}


/* 20221212_renewal 追加 */
.main .section_fv {
  height: auto;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.main .section_fv .catchcopy > div > img {
  width: 100%;
}
.section_video_cm_inner {
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s;
}
.section_video_cm_inner.inview {
  opacity: 1;
  translate: 0 0;
}
#section_banner {
  background-image: url('../images/bg_lineup_takeru_pc.jpg');
}
.main .section_banner_contents .lineup ul li {
  margin: 0 2%;
}
.main .section_banner_contents .lineup ul li:nth-of-type(1) {
  translate: calc(-200px + (0 * 100px)) 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(2) {
  translate: calc(-200px + (1 * 100px)) 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(3) {
  translate: calc(-200px + (2 * 100px)) 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(4) {
  translate: calc(-200px + (3 * 100px)) 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(5) {
  translate: calc(-200px + (4 * 100px)) 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(6) {
  translate: calc(-200px + (5 * 100px)) 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(7) {
  translate: calc(-200px + (6 * 100px)) 0;
}
.main .section_banner_contents .lineup ul.inview li {
  opacity: 1;
  translate: 0 0;
}
.main .section_banner_contents .lineup ul li:nth-of-type(1) img,
.main .section_banner_contents .lineup ul li:nth-of-type(2) img {
  rotate: 5deg;
  height: 100%;
  width: auto;
}
.main .section_banner_contents .lineup ul li img {
  rotate: 0deg;
  height: 100%;
  width: auto;
}
.main .section_banner_contents .lineup ul li:nth-of-type(1) {
  position: relative;
}
.main .section_banner_contents .lineup ul li:nth-of-type(1) .icon_new_flavor {
  position: absolute;
  top: -70px;
  left: -30px;
  width: 90px;
}
.main #section_about_cbd {
  padding: 60px 0;
}
.main #section_about_cbd .section_header p.inview {
  opacity: 1;
  translate: 0 0;
}
.main #section_product {
  padding: 60px 0;
}
.main #section_product .section_header p.inview {
  opacity: 1;
  translate: 0 0;
}
.main #section_product .section_header p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 0 50px;
  opacity: 0;
}
.main #section_product .section_header p {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.section_product_new_inner {
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 100px;
  margin: 0 auto;
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s;
}
.section_product_new_inner.inview {
  opacity: 1;
  translate: 0 0;
}
.section_product_new_inner > div > img {
  width: 100%;
}
.section_interval_01_inner {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  padding-bottom: 100px;
  margin: 0 auto;
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s;
}
.section_interval_01_inner.inview {
  opacity: 1;
  translate: 0 0;
}
.section_interval_01_inner > div > img {
  width: 100%;
}
.main .section_how_to_use_inner {
  padding-top: 50px;
}
#section_about {
  background: url(../images/bg-about-pc.jpg) no-repeat;
  background-size: cover;
  padding: 60px 0;
  background-position: center center;
}
#section_about .section_contents {
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s;
}
#section_about .section_contents.inview {
  opacity: 1;
  translate: 0 0;
}
#section_about .section_contents .about_catch {
  width: 90%;
  max-width: 400px;
  margin: 40px auto 0;
}
#section_about .section_contents .about_comment p {
  width: 90%;
  max-width: 500px;
  margin: 40px auto;
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: 2em;
}
#section_our_safety {
  padding: 0 0 50px;
}
#section_our_safety .section_contents .safety_catch {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  width: 90%;
  max-width: 400px;
  margin: 40px auto;
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s;
}
#section_our_safety .section_contents .safety_catch.inview {
  opacity: 1;
  translate: 0 0;
}
#section_our_safety .section_contents .button_area {
  opacity: 0;
  translate: 0 50px;
  transition: 0.5s;
}
#section_our_safety .section_contents .button_area.inview {
  opacity: 1;
  translate: 0 0;
}
#section_faq {
  padding: 0 0 50px;
}
#section_faq .section_contents {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  padding-bottom: 0;
}
.faq_new_list_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.faq_new_list {
  width: calc( 100% / 2 - 4% );
  margin: 0 0 50px;
  opacity: 0;
  translate: -100px 0;
  transition: 1s;
}
.faq_new_list:nth-of-type(2n) {
  opacity: 0;
  translate: 100px 0;
  transition: 1s;
}
.faq_new_list.inview {
  opacity: 1;
  translate: 0 0;
}
.faq_new_list dt {
  font-size: 18px;
  font-weight: bold;
  padding-left: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
  margin-bottom: 20px;
  background: url(../images/icon-faq.svg) no-repeat;
  background-size: 30px;
}


.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
.main .section_user_voice .slick-arrow {
  top: calc(50% - 0.5rem);
}
.main .section_user_voice .slick_slider li {
  border-radius: 0;
  padding: 0px;
}
#section_user_voice .top_image {
  position: relative;
}
.main .section_user_voice .slick_slider li .top_image {
  margin-bottom: 0;
}
#section_user_voice .top_image .voice_name {
  position: absolute;
  padding: 10px;
  background: rgb(255 255 255 / 52%);
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}
#section_user_voice .top_image .voice_name small {
  margin-right: 10px;
}
.main .section_user_voice .slick_slider li .voice_title {
  padding: 5px 0;
  border-bottom: none;
}
.main .section_user_voice .slick_slider li .voice_desc {
  font-size: 14px;
  padding: 5px 0;
}
.main .section_user_voice .slick_slider li .voice_text {
  padding: 15px;
}
#section_user_voice .section_contents {
  opacity: 0;
  translate: 0 50px;
  transition: 1s;
}
#section_user_voice .section_contents.inview {
  opacity: 1;
  translate: 0 0;
}
.news_list_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.news_list_wrap a {
  color: #fff;
}
.news_list {
  width: calc( 100% / 2 - 4% );
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  opacity: 0;
  translate: -100px 0;
  transition: 1s;
  margin-bottom: 20px;
}
.news_list:nth-of-type(2n) {
  opacity: 0;
  translate: 100px 0;
  transition: 1s;
}
.news_list.inview {
  opacity: 1;
  translate: 0 0;
}
.news_list_image {
  width: 33%;
}
.news_list_image img {
  width: 100%;
}
.news_list_text {
  width: 63%;
}
.news_list_text dl dt {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}
#section_follow .socials {
  max-width: 300px;
  margin: 0 auto 50px;
  opacity: 0;
  translate: 0 50px;
  transition: 1s;
}
#section_follow .socials.inview {
  opacity: 1;
  translate: 0 0;
}
#section_follow .socials ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
}
#section_follow .socials ul li {
  max-width: 40px;
  margin: 0 auto;
}
#section_follow a {
  color: rgb(255, 255, 255);
}
#section_follow .socials img {
  width: 100%;
}
.insta_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  translate: 0 50px;
  transition: 1s;
}
.insta_wrap.inview {
  opacity: 1;
  translate: 0 0;
}
.insta_img {
  display: block;
  position: relative;
  max-width: 300px;
}
.insta_img {
  width: calc( 100% / 3 - 1% );
  margin-bottom: 10px;
}
.insta_img:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.insta_img img {
  position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: cover;
}
.present {
  max-width: 700px;
  width: 90%;
  margin: 0 auto 50px;
  opacity: 0;
  translate: 0 50px;
  transition: 1s;
}
.present.inview {
  opacity: 1;
  translate: 0 0;
}
.present img {
  width: 100%;
}
.banner_float .close_btn {
  position: absolute;
  top: -20px;
}

/* フレーバーマップ */
.main #section_product .section_header p {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.main #section_product .section_header p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 0 50px;
  opacity: 0;
}
.main #section_product .section_header p.inview {
  opacity: 1;
  translate: 0 0;
}
.flavor_map {
  max-width: 700px;
    width: 100%;
    margin: 50px auto 100px;
    position: relative;
    padding-bottom: 0px;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 0 50px;
  opacity: 0;
}
.flavor_map.inview {
  opacity: 1;
  translate: 0 0;
}
.flavor_map .flavor_map_table {
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
}
.flavor_map_td {
  width: 20%;
  height: 120px;
  display: table-cell;
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  background: rgb(0 0 0 / 50%);
}
.flavor_map_vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: max(4%,28.5px);
}
.flavor_map_beside {
  position: absolute;
  bottom: -60px;
  left: 50px;
  max-width: 600px;
  width: 90%;
}
.flavor_map_icon {
  position: absolute;
  z-index: 1;
  width: 130px;
}
.flavor_map_icon img {
  width: 100%;
}
.flavor_map_turmeric {
  top: 12%;
  left: 24%;
}
.flavor_map_muscat {
  top: 12%;
  left: 58%;
}
.flavor_map_soda {
  top: 73%;
  left: 58%;
}
.flavor_map_maple {
  top: 73%;
  left: 75%;
}
.flavor_map_cherry {
  top: 37%;
  left: 58%;
}
.flavor_map_oropo {
  top: 37%;
  left: 40%;
}
.flavor_map_lemon {
  top: 37%;
  left: 6%;
}
.flavor_map_energydrink {
  top: -10%;
  left: 6%;
}
.flavor_map_menthol {
  position: absolute;
  z-index: 1;
  width: 150px;
  bottom: 2%;
  left: 8%;
}
.flavor_map_menthol img {
  width: 100%;
}
.flavor_map_lower {
  max-width: 700px;
  width: 90%;
  margin: 50px auto 0;
  opacity: 0;
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 0 50px;
}
.flavor_map_lower.inview {
  opacity: 1;
  translate: 0 0;
}

.main_bg_video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
/* footer {
  z-index: 99;
  position: relative;
} */

.l-footer__menu {
  width: 50%;
}
.c-footer_menu {
  width: calc( 100% / 2 - 60px);
}
.c-footer_menu__title {
  margin-bottom: 10px;
  border-bottom: 1px solid #555;
  padding-bottom: 10px;
}
.u-color__border--border {
  border: none!important;
}

.main .banner_float {
  z-index: 1000;
}


@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
.gheader_inner .secondary .gnav_more_button.active + .gnav_more_contents {
  right: 350px;
}
.gheader .gnav_more_contents {
  width: 350px;
}
.gheader .gnav_more_contents_inner .glink_list li .txt_link_ja {
  color: #515151;
  margin-left: 20px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
}





/*2023/04　追加*/
.inview_content {
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 0 50px;
  opacity: 0;
}
.inview_content.inview {
  opacity: 1;
  translate: 0 0;
  transition: 1s 0.1s;
}


.section_concept {
  margin-bottom: 100px;
}
.section_concept .section_header {
  margin-bottom: 30px;
}
.section_concept_inner {
  text-align: center;
  color: #fff;
}
.concept_text {
  margin-bottom: 30px;
}
.concept_text_pattern1 {
  font-size: 18px;
}
.concept_text_pattern2 {
  font-size: 18px;
  font-weight: bold;
}
.concept_text_pattern3 {
  font-size: 20px;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


.section_banner_contents {
  width: 780px;
  margin-right: 0;
  margin-left: auto;
}
.main .section_banner_contents .lineup ul {
  margin-top: 370px;
}
.main .section_banner_contents .lineup ul li img {
  rotate: 5deg;
}


#section_rank1 {
  background-image: url('../images/bg_no1_pc.jpg');
}
.main .section_rank1 {
  height: fit-content;
  position: relative;
  background-size: cover;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
}
.section_rank1_inner {
  width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.section_rank1_imgbox {
  padding: 80px 0;
  max-width: 475px;
  margin: 0 auto;
}
.section_rank1_imgbox img {
  max-width: 100%;
}

#section_about_cbd {
  background-image: url('../images/bg-whatscbd.jpg');
}
.main #section_about_cbd .section_header p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 30px;
  text-align: center;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 50px;
}
.section_about_cbd_box {
  color: #fff;
}
.section_about_cbd_box_upper {
  width: 1000px;
  margin: 0 auto 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.section_about_cbd_box_upper_text {
  width: 50%;
  font-size: 24px;
}
.section_about_cbd_box_upper_image {
  width: 44%;
}
.section_about_cbd_box_upper_image img {
  width: 100%;
}
.section_about_cbd_box_middle {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 800px;
  width: 100%;
  margin: 0 auto 50px;
}
.section_about_cbd_box_middle_box {
  width: calc( 100% / 3 - 4% );
  margin: 0 2% 20px;
  text-align: center;
}
.section_about_cbd_box_middle_box_image {
  margin-bottom: 10px;
}
.section_about_cbd_box_middle_box_image img {
  max-width: 100%;
}
.section_about_cbd_box_middle_box_text {
  width: 100%;
  text-align: center;
}


#section_on_off {
  background-image: url('../images/bg_onoff_takeru_pc.jpg');
}
.main .section_on_off {
  height: fit-content;
  position: relative;
  background-size: cover;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
}
.section_on_off_inner {
  width: 400px;
  height: 750px;
  margin: 0 auto;
  text-align: center;
}
.section_on_off_imgbox {
  padding: 400px 0 50px;
}
.section_on_off_imgbox img {
  max-width: 100%;
}




.main .section_how_to_use_new {
  height: fit-content;
  position: relative;
  background-size: cover;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 100px;
}
.main .section_how_to_use_new h3 {
  font-size: 4rem;
  text-align: center;
  color: #fff;
  margin-left: -13px;
  mix-blend-mode: difference;
}
.main #section_how_to_use_new .section_header p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 30px;
  text-align: center;
  margin-right: -58px
}
.section_how_to_use_new_inner {
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 50px;
}
.section_how_to_use_new_inner_w800 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.section_how_to_use_new_text1 {
  background: #000;
  padding: 10px;
  color: #fff;
  text-align: center;
  width: 80%;
  margin: 0 auto 50px;
  max-width: 400px;
  font-size: 20px;
}
.section_how_to_use_new_text1 span {
  color: #ffff00;
} 
.section_how_to_use_new_image1 {
  display: flex;
  justify-content: space-between;
}
.section_how_to_use_new_image1 img {
  width: 100%;
}
.section_how_to_use_new_image1 .section_how_to_use_new_image1_left {
  width: calc( 100% / 2 - 20% );
  margin: 0 10% 30px;
}
.section_how_to_use_new_image1 .section_how_to_use_new_image1_right {
  width: calc( 100% / 2 - 20% );
  margin: 0 10% 30px;
}
.section_how_to_use_new_image2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section_how_to_use_new_image2 img {
  max-width: 100%;
  width: 100%;
}
.section_how_to_use_new_image2 .section_how_to_use_new_image1_left {
  width: calc( 100% / 2 - 20% );
  margin: 0 10% 30px;
}
.section_how_to_use_new_image2 .section_how_to_use_new_image1_right {
  width: calc( 100% / 2 - 20% );
  margin: 0 10% 30px;
}
.section_how_to_use_new_text2 {
  display: inline-block;
  margin: 0 auto 50px;
  text-align: center;
  width: 100%;
}
.section_how_to_use_new_text2 span {
  background: #000;
  padding: 7px 10px;
  color: #fff;
  margin: 0 auto;
}
.section_how_to_use_new_text3 {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 30px;
  text-align: center;
  color: #fff;
  mix-blend-mode: difference;
  margin-bottom: 30px;
}
.section_how_to_use_new_scene {
  display: flex;
  justify-content: space-between;
}
.section_how_to_use_new_scene_left {
  width: calc( 100% / 2 - 2% );
  margin: 0 2% 30px;
}
.section_how_to_use_new_scene_right {
  width: calc( 100% / 2 - 2% );
  margin: 0 2% 30px;
}
.section_how_to_use_new_scene img {
  width: 100%;
}
.section_how_to_use_new_scene_left {
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: -50px 0;
  opacity: 0;
}
.section_how_to_use_new_scene_left.inview {
  translate: 0 0;
  opacity: 1;
  transition: 1s 0.1s;
}
.section_how_to_use_new_scene_right {
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  translate: 50px 0;
  opacity: 0;
}
.section_how_to_use_new_scene_right.inview {
  translate: 0 0;
  opacity: 1;
  transition: 1s 0.1s;
}

.main .section_how_to_use_inner .sec .flow_list .flow:first-child {
  width: 100%;
}
.main .section_how_to_use_inner .sec .flow_list.inview .flow:first-child {
  width: 100%;
}






.more_btn a {
  position: relative;
}
.more_btn a:before {
  content: '';
  position: absolute;
  bottom: 29px;
  right: 20px;
  width: 30px;
  height: 1px;
  background: #000;
  transition: all .3s;
  z-index: 2;
}
.more_btn a:after {
  content: '';
  position: absolute;
  bottom: 33px;
  right: 19px;
  width: 15px;
  height: 1px;
  background: #000;
  transform: rotate(35deg);
  transition: all .3s;
  z-index: 2;
}
.more_btn.line_btn a:before {
  content: '';
  position: absolute;
  bottom: 29px;
  right: 20px;
  width: 30px;
  height: 1px;
  background: #fff;
  transition: all .3s;
  z-index: 2;
}
.more_btn.line_btn a:after {
  content: '';
  position: absolute;
  bottom: 33px;
  right: 19px;
  width: 15px;
  height: 1px;
  background: #fff;
  transform: rotate(35deg);
  transition: all .3s;
  z-index: 2;
}
.main .section_how_to_use {
  padding-top: 50px;
}
.main .section_how_to_use_inner .sec .flow_list .flow:before {
  font-size: 20px!important;
}
.main .section_how_to_use_inner .sec .flow_list .flow .illust img {
  margin-top: 30px;
}
.main .section_how_to_use_inner .sec .flow_list .flow:nth-of-type(1)::before {
  content: "吸い方";
}
.main .section_how_to_use_inner .sec .flow_list .flow:nth-of-type(2)::before {
  content: "充電が無くなったら...";
}
.main .section_how_to_use_inner .sec .flow_list .flow:nth-of-type(3)::before {
  content: "ご注意ください";
}
.main .section_how_to_use_inner .pri {
  margin-bottom: 50px;
}


.gheader .gnav_more_contents_inner .glink_banner {
  padding: 20px 0 0;
}
.program_banner {
  padding: 0 0 20px;
}
.program_banner a {
  display: block;
  max-width: 200px;
  margin: 0 auto;
}

.section_effect_button_area {
  max-width: 500px;
  width: 90%;
  margin: 0 auto;
}
.section_effect_button_area .desc_inner_btn {
  width: 100%;
}






@media screen and (max-width: 767px) {
  .main .section_header .section_title {
    font-size: 2.5rem;
  }
  .main .section_fv {
    padding-top: 0;
  }
  .main .section_banner_contents .lineup ul li {
    height: 180px;
  }
  .main .section_banner_contents .lineup ul {
    margin-top: 100vw;
    margin-bottom: 0px;
  }
  .main .section_banner_contents .lineup ul li:nth-of-type(1) .icon_new_flavor {
    position: absolute;
    top: -30px;
    left: -20px;
    width: 50px;
  }
  .main #section_product .section_header p {
    font-size: 7vw;
  }
  .main .section_product .prod_list {
    padding: 20px 0;
  }
  .section_product_new_inner {
    padding-top: 20px;
    padding-bottom: 0;
  }
  .section_interval_01_inner {
    padding-top: 20px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .main .section_how_to_use_inner {
    padding-top: 20px;
  }
  #section_about {
    background: url(../images/bg-about-sp.jpg) no-repeat;
    background-size: cover;
    padding: 300px 20px 60px;
    background-position: center center;
  }
  #section_about .section_contents .about_comment p {
    font-size: 4vw;
  }
  .main .common_layout_section {
    margin-top: 50px;
    padding-top: 0px;
  }
  #section_our_safety .section_contents .safety_catch {
    font-size: 5vw;
  }
  .main .common_layout_section .section_contents .button_area {
    padding: 50px 0 20px;
  }
  #section_faq .section_contents {
    padding-top: 10px;
  }
  .faq_new_list_wrap .faq_new_list:last-child {
    margin-bottom: 0;
  }
  .faq_new_list {
    width: calc( 100% / 1 );
    margin: 0 0 30px;
  }
  .main .section_user_voice .section_contents {
    padding-left: 0;
    padding-right: 0;
  }
  .main .section_user_voice .slick_slider li {
    margin: 0 20px;
  }
  .main .section_user_voice .slick-prev {
    left: 4%;
  }
  .main .section_user_voice .slick-next {
    right: 4%;
  }
  .main .section_user_voice .slick_slider li .voice_desc {
    font-size: 3vw;
  }
  .news_list {
    width: calc( 100% / 1 );
    padding-bottom: 0;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
  }
  .news_list:last-child {
    border-bottom: none;
  }
  .news_list_text dl dd {
    font-size: 3vw;
  }
  .insta_img {
    width: calc( 100% / 3 - 1% );
    margin-bottom: 5px;
  }

  /* フレーバーマップ */
  .flavor_map {
    padding-bottom: 0px;
    margin: 30px auto 80px;
  }
  .flavor_map .flavor_map_table {
    width: 87%;
    margin: 0 5% 0 auto;
  }
  .flavor_map_td {
    height: 18vw;
  }
  .flavor_map_vertical {
    width: max(4.3vw,0px);
    left: 5px;
  }
  .flavor_map_beside {
    left: 8%;
    width: 87%;
    bottom: -30px;
  }
  .flavor_map_icon {
    width: 22vw;
  }
  .flavor_map_menthol {
    width: 25vw;
  }

  .l-footer__menu {
    width: 100%;
  }

  .u-font--subhead {
    font-size: 15px!important
  }
  .c-footer_menu {
    width: 100%;
    margin-bottom: 0;
  }
  .l-footer {
    flex-direction: column;
    padding: 40px 10px 30px;
  }
  .l-footer__menu {
      display: flex;
  }
  .c-footer_menu__title.u-font--subhead {
    font-size: 16px!important;
    letter-spacing: 0;
    margin-bottom: 10px;
  }
  .l-footer__info {
    padding: 30px 10px 0px;
    border-top: 1px solid #777;
  }
  .gheader_inner .secondary .gnav_more_button.active + .gnav_more_contents {
    right: 100%;
  }
  .gheader .gnav_more_contents {
    width: 100%;
  }





  /*2023/04　追加*/
  #section_banner {
    background-image: url(../images/bg_lineup_takeru_sp.jpg);
  }
  .section_concept {
    margin-bottom: 30px;
  }
  .concept_text_pattern1 {
    font-size: 4vw;
  }
  .concept_text_pattern2 {
    font-size: 4vw;
  }
  .concept_text_pattern3 {
    font-size: 5vw;
  }


  .section_banner_contents {
    width: 100%;
    margin-right: 0;
    margin-left: auto;
  }
  .section_about_cbd_box_middle {
    width: 96%;
  }
  .section_about_cbd_box_middle_box {
    width: calc( 100% / 3 - 2% );
    margin: 0 1% 20px;
    text-align: center;
  }
  .main #section_about_cbd .section_header p {
    font-size: 5vw;
    margin-bottom: 30px;
  }

  .section_rank1_inner {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .section_rank1_imgbox {
    padding: 50px 0;
  }

  .section_about_cbd_box_upper {
    width: 90%;
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
  }
  .section_about_cbd_box_upper_text {
    width: 100%;
    font-size: 4.5vw;
    margin-bottom: 20px;
  }
  .section_about_cbd_box_upper_image {
    width: 80%;
    margin: 0 auto;
  }
  .section_about_cbd_box_middle_box span {
    font-size: 10px;
    line-height: 1.5em;
    display: block;
  }
  .section_about_cbd_box_middle_box_text span {
    font-size: 10px;
  }

  #section_on_off {
    background-image: url('../images/bg_onoff_takeru_sp.jpg');
  }
  .section_on_off_inner {
    height: 115vw;
  }

  .section_on_off_imgbox {
    width: 50%;
    margin: 0 auto;
    padding: 46vw 0 10px;
  }

  .main .section_how_to_use_new {
    padding-top: 30px;
  }
  .main #section_how_to_use_new .section_header p {
    font-size: 5vw;
    margin-right: -11vw;
  }
  .section_how_to_use_new_inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .section_how_to_use_new_text1 {
    width: 90%;
    margin: 0 auto 30px;
    font-size: 4vw;
  }
  .section_how_to_use_new_text2 {
    margin: 0 auto 20px;
  }
  .section_how_to_use_new_text2 span {
    font-size: 10px;
  }
  .section_how_to_use_new_text3 {
    font-size: 5vw;
    margin-bottom: 10px;
  }
  .main .section_how_to_use_inner .sec .flow_list .flow:before {
    font-size: 3.5vw!important;
  }

  .main .section_how_to_use_inner .pri {
    margin-bottom: 30px;
  
  }

  .main #section_product {
    padding: 60px 0 0;
  }

  .program_banner a {
    max-width: 94%;
    margin: 10px auto 0;
  }
}