@charset "utf-8";

/*html {
    scroll-behavior: smooth;
}*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ボディの基本設定 */

.max-width-wrapper {
  margin: 0;
  letter-spacing: 0.09em;
}

/* デフォルトの余白とパディングを削除 */

ul,
ol,
button,
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
time,
small {
  margin: 0;
  padding: 0;
}

/* リストスタイルのリセット */

ul,
ol {
  list-style: none;
}

/* aタグのスタイルとトランジション */
a {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}

button {
  color: inherit;
}

/* ホバー時のカーソル設定 */

/* タップ時のハイライトを透明に設定 */

a {
  -webkit-tap-highlight-color: transparent;
  /* リンクのハイライトを透明に */
}

button {
  -webkit-tap-highlight-color: transparent;
  /* ボタンのハイライトも透明に */
}

:root {
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-second: "Century Gothic", "Montserrat", "Helvetica", sans-serif;
  --font-Montserrat: "Montserrat", sans-serif;
  --font-Cardo: "Cardo", serif;
}

:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

:root {
  --red-color: #bc0602;
  --blue-color: #2251a2;
  --dark-blue: #003174;
  --green-color: #72B75E;
  --dark-brown: #391F1A;
  --light-blue-color: #00c5e9;
  --transition-default: 0.2s;
  --black-color: #000000;
  --white-color: #ffffff;
  --yellow-color: #caaf61;
  --grey-color: #888888;
  --pastel-yellow-color: #f5eed0;
  --floral-white-color: #fffcf2;
  --gold-color: #a88729;
  --light-yellow-color: #e1cb70;
  --shade-yellow-color: #cba505;
  --deep-orange-color: #bf9000;
  --brown-color: #7f6000;
  --cream-color: #fdfbf4;
  --light-white-color: #f1f1f1;
  --pure-yellow-color: #ebb100;
  --gargoyle-gas-color: #ffd54b;
  --soft-yellow-color: #ffe793;
  --sunset-color: #ffd998;
  --pale-orange-color: #ffe5bc;
  --ivory-color: #fbf8eb;
  --light-grey-color: #d2d2d2;
  --white-smoke-color: #f7f7f7;
  --shade-grey-color: #79787c;
  --dark-grey-color: #595757;
}

.max-width-wrapper {
  color: var(--black-color);
  font-family: var(--font-family-base);
}

.u-desktop {
  display: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.flex {
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}


/* Do not change --------------------------------------------------------- */
.center_column {
  z-index: 2;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  letter-spacing: 0;
}

.txt_mod a:not(.button)[href]:not([href=""]):not([href="#"]):not([href*="javascript"]) {
  line-height: 1.2;
  margin-bottom: 3vw;
  font-size: 4vw;
  transition: border-bottom 0.3s ease, opacity 0.3s ease;
  border-bottom: 1px solid var(--white-color);
  pointer-events: auto;
}

.txt_mod a:not(.button)[href]:not([href=""]):not([href="#"]):not([href*="javascript"]):hover {
  border-bottom: transparent;
  opacity: 0.5;
}

/* For links WITHOUT valid href - NO border and NO pointer events */
.txt_mod a:not(.button):not([href]),
.txt_mod a:not(.button)[href=""],
.txt_mod a:not(.button)[href="#"],
.txt_mod a:not(.button)[href*="javascript:"] {
  line-height: 1.2;
  margin-bottom: 3vw;
  font-size: 4vw;
  cursor: default;
  border-bottom: none !important;
  pointer-events: none !important;
}

/* Common styles for ALL .txt_mod links */
.txt_mod a:not(.button) {
  color: var(--white-color);
}

a:not(.button).link_sidebar_breadcrumb,
.sidebar_breadcrumb_separator {
  margin-right: 3px;
  margin-left: 3px;
  font-weight: 500;
}

a:not(.button).link_sidebar_breadcrumb,
.sidebar_breadcrumb_separator,
.sidebar_breadcrumb_current {
  line-height: 1.58333;
  color: #000000;
  font-family: var(--font-family-base);
  font-size: 3vw;
  letter-spacing: 0.04em;
  font-style: 400;
  opacity: 1;
}

.t_center {
  text-align: center;
}

.t_left {
  text-align: left;
}

.t_right {
  text-align: right;
}

@media only screen and (min-width:768px) {

  @font-face {
    font-family: 'Material Symbols Outlined';
    font-weight: 100 700;
    font-style: normal;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v290/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
  }

  .u-desktop {
    display: block;
  }

  .u-mobile {
    display: none;
  }

  .sidebar_breadcrumb {
    visibility: hidden;
    opacity: 0;
  }

  .sidebar_breadcrumb.is-active {
    visibility: visible;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    opacity: 1;
  }

  a:not(.button).link_sidebar_breadcrumb,
  .sidebar_breadcrumb_separator,
  .sidebar_breadcrumb_current {
    /* color: var(--white-color); */
    font-size: 12px;
    opacity: .8;
  }

  .three_col_layout {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .left_column.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 30.07vw;
    height: 100vh;
    padding: 1.563vw;
    padding-top: 129px;
    background: url("../images/26ss/img_sidebar_bg_left.jpg") no-repeat 5% center;
    background-size: cover;
  }

  .sidebar_inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }

  .sidebar_category {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .sidebar_category_title {
    line-height: normal;
    color: var(--white-color);
    font-family: "Century Gothic", "Montserrat", "Helvetica", sans-serif;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-style: normal;
    text-shadow: 1px 1px #00000033;
  }

  .sidebar_category_list {
    display: flex;
    flex-direction: column;
    gap: 21px;
  }

  .sidebar_category_link {
    display: flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    transition: opacity 0.3s ease;
    gap: 10px;
  }

  .sidebar_category_item {
    display: inline-block;
  }

  .sidebar_category_link_line {
    width: 13.5px;
    height: 1px;
    background-color: var(--white-color);
  }

  .sidebar_category_link_text {
    color: var(--white-color);
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    letter-spacing: 0.04em;
    transition: border-bottom 0.3s ease;
    border-bottom: 1px dotted transparent;
    text-shadow: 1px 1px #00000033;
  }

  .sidebar_btn_blk .btn_mod {
    width: 49%;
    padding: 15px 12px;
    font-size: 14px;
  }

  .sidebar_btn_blk .btn_mod::after {
    right: 12px;
    width: 8px;
    height: 12px;
  }

  .sidebar_language {
    display: flex;
    margin-top: 40px;
    gap: 30px;
  }

  .sidebar_language_link {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .sidebar_language_link_text {
    color: var(--yellow-color);
    font-family: "Century Gothic", "Montserrat", "Helvetica", sans-serif;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
  }

  .material_symbols_outlined {
    display: inline-block;
    line-height: 1;
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    font-weight: normal;
    white-space: nowrap;
    letter-spacing: normal;
    text-transform: none;
    font-style: normal;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  .sidebar_language_icon {
    color: var(--yellow-color);
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  /*end of left_col*/

  .right_column {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 5;
    width: 30.07vw;
    height: 100vh;
  }

  .right_column_images {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Slideshow images */
  .right_column_images_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1.5s ease-in-out;
    object-fit: cover;
    opacity: 0;
  }

  /* Active image class */
  .right_column_images_img.is-active {
    opacity: 1;
  }

  /*end of left_column*/

  .center_column {
    width: 39.06vw;
    margin-top: -2vw;
    padding-top: 129px;
  }


  .txt_mod a:not(.button)[href]:not([href=""]):not([href="#"]):not([href*="javascript"]) {
    margin-bottom: 0;
    font-size: 1.4rem;
  }

  .txt_mod a:not(.button):not([href]),
  .txt_mod a:not(.button)[href=""],
  .txt_mod a:not(.button)[href="#"],
  .txt_mod a:not(.button)[href*="javascript:"] {
    margin-bottom: 0;
    font-size: 1.4rem;
  }
}

.page_top {
  position: fixed;
  z-index: 7;
  visibility: hidden;
  background-color: var(--yellow-color);
  cursor: pointer;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
}

.page_top.is-visible {
  visibility: visible;
  opacity: 1;
}

.page_top_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.page_top_link img {
  width: 25px;
}

.page_top_link:focus {
  outline: none;
}

@media only screen and (min-width:768px) {
  .page_top {
    right: calc((100% - 37.06vw) / 2);
    bottom: 1.5vw;
    width: 5.7vw;
    height: 5vw;
    box-shadow: 0 0.4vw 2vw var(--light-yellow-color);
    border-radius: 2vw;
  }

  .page_top_link img {
    width: 2.5vw;
  }
}

@media only screen and (max-width:767.9px) {
  .page_top {
    right: 2.667vw;
    bottom: 4vw;
    width: 15.2vw;
    height: 13.333vw;
    box-shadow: 0 1.067vw 5.333vw var(--light-yellow-color);
    border-radius: 5.333vw;
  }

  .page_top_link img {
    width: 6.667vw;
  }
}

footer {
  background: var(--white-color);
}

.footer__links-login {
  padding: 30px 0;
  text-align: center;
}

.footer__links-login svg {
  display: inline-block;
}

/* Common CSS */
.f_medium {
  font-weight: var(--font-weight-medium);
}

.scroll_prevent body {
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {

  a:hover,
  .menu_toggle:hover,
  .accordion_ttl:hover,
  .page_top_link:hover,
  .modal_close:hover {
    opacity: 0.7;
  }
}

/* Common Title */
.ttl_mod_jp {
  line-height: 1.6;
  color: var(--yellow-color);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.ttl_mod_en {
  position: relative;
  color: var(--yellow-color);
  font-family: var(--font-Cardo);
  font-weight: var(--font-weight-bold);
}

.ttl_mod_en::before {
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--yellow-color);
  content: "";
  transform: translateY(-50%);
}

/* Common Text */
.txt_mod {
  line-height: 2;
  color: var(--grey-color);
  text-align: center;
}

/* Common Button  */
.btn_mod {
  display: block;
  position: relative;
  width: 90%;
  margin: 0 auto;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.btn_mod::after {
  position: absolute;
  top: 50%;
  content: "";
  transform: translateY(-50%);
}

.btn_en {
  font-family: var(--font-Cardo);
  text-transform: uppercase;
}

.btn_white {
  background-color: var(--white-color);
  color: var(--yellow-color);
}

.btn_white::after {
  background: url("../images/26ss/icon_right_arr_yellow.png") no-repeat center/contain;
}

.btn_yellow {
  background-color: var(--yellow-color);
  color: var(--white-color);
}

.btn_yellow::after {
  background: url("../images/26ss/icon_right_arr_white.png") no-repeat center/contain;
}

.btn_grey {
  background-color: var(--white-color);
  color: var(--shade-grey-color);
}

.btn_grey::after {
  background: url("../images/26ss/icon_right_arr_grey.png") no-repeat center/contain;
}

/* Common Raindrops */
.raindrops_blk {
  background: linear-gradient(90deg, #dda55d 0%, #e0a949 100%);
}

.raindrops_blk p {
  overflow: hidden;
  text-align: center;
}

.raindrops_blk p span {
  display: inline-block;
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  opacity: 0;
}

.raindrops_blk .js_text.active span {
  animation: fadeInText 0.9s both;
  -webkit-animation: fadeInText 0.9s both;
}

@keyframes fadeInText {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInText {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Common Swiper */
.swiper,
.swiper-wrapper {
  height: 100%;
  margin: 0;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet {
  background-color: var(--white-color) !important;
  opacity: 1;
  border-radius: 100%;
}

.swiper-pagination-bullet-active {
  background-color: var(--yellow-color) !important;
}

/* Modal Popup */
.modal_overlay {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  background-color: rgba(33, 34, 35, 0.7);
  transition: all 0.5s;
  opacity: 0;
  pointer-events: none;
}

.modal_overlay.is_visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal_wrap {
  position: relative;
}

.modal_inner {
  position: relative;
  margin: 0 auto;
  background-color: var(--white-color);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 75vh;
}

.modal_close {
  display: flex;
  position: absolute;
  top: 50%;
  justify-content: center;
  align-items: center;
  background-color: var(--white-color);
  cursor: pointer;
  transform: translateY(-50%);
  border-radius: 100%;
  -webkit-tap-highlight-color: transparent;
}

.modal_content .img_blk {
  position: relative;
  background-color: var(--yellow-color);
}

.modal_content .modal_ttl {
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
}

.modal_content .modal_ttl span {
  font-weight: var(--font-weight-bold);
}

.modal_content .sub_ttl {
  line-height: 1.5;
  color: var(--yellow-color);
  font-weight: var(--font-weight-bold);
}

.modal_content .modal_txt {
  line-height: 2;
  color: var(--grey-color);
}

/* Mainvisual Section */
.sec_mv {
  position: relative;
  text-align: center;
}

.sec_mv .sec_mv_images {
  position: relative;
  width: 100%;
  height: 100%;
}

.sec_mv .sec_mv_images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1.5s ease-in-out;
  object-fit: cover;
  opacity: 0;
}

.sec_mv .sec_mv_images img.is-active {
  opacity: 1;
}

.sec_mv .mv_txt_blk,
.sec_mv .mv_logo {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.sec_mv .mv_ttl {
  line-height: 1.5;
  color: var(--yellow-color);
  font-weight: var(--font-weight-medium);
}

.sec_mv .mv_txt {
  line-height: 1.5;
  color: var(--grey-color);
}

/* Intro Section */
.sec_intro {
  position: relative;
  text-align: center;
}

.sec_intro .intro_blk {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.sec_intro .product_name {
  position: absolute;
  color: var(--yellow-color);
  font-weight: var(--font-weight-bold);
  text-shadow: 0 0 4px #ffffff77;
  width: 50%;
}

/* Problems Section */
.sec_problems .graph_blk {
  margin: 0 7px 30px;
}

.sec_problems .graph_base {
  justify-content: space-between;
}

.sec_problems .graph_base p {
  position: relative;
  line-height: 2.3;
  color: var(--light-grey-color);
  font-weight: var(--font-weight-medium);
}

.sec_problems .graph_base p::before {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  background-color: var(--white-smoke-color);
  content: "";
}

.sec_problems .graph_item {
  position: relative;
  z-index: 1;
  line-height: 2.1;
  margin-bottom: 2.3px;
}

.sec_problems .graph_item .item_label {
  color: var(--gold-color);
  font-weight: var(--font-weight-medium);
}

.sec_problems .graph_item .bar_track {
  position: relative;
  width: 100%;
  overflow: visible;
}

.sec_problems .graph_item .bar_fill {
  position: relative;
  width: 0%;
  height: 100%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sec_problems .graph_item.active .bar_fill {
  animation: slideIn 2s ease-out forwards;
  -webkit-animation: slideIn 2s ease-out forwards;
}

@keyframes slideIn {
  from {
    width: 0%;
  }
}

@-webkit-keyframes slideIn {
  from {
    width: 0%;
  }
}

.sec_problems .graph_item:nth-child(1) .bar_fill {
  width: 90%;
  background: linear-gradient(90deg, #e2ca6b 0%, #e6b00d 100%);
}

.sec_problems .graph_item.active:nth-child(2) .bar_fill {
  width: 60%;
  background: linear-gradient(90deg, #fee996 0%, #ffd751 100%);
}

.sec_problems .graph_item.active:nth-child(3) .bar_fill {
  width: 48.5%;
  background: linear-gradient(90deg, #ffe6b9 0%, #f5c164 100%);
}

.sec_problems .graph_item.active:nth-child(4) .bar_fill {
  width: 20%;
  background: linear-gradient(90deg, #fde590 0%, #ffdf6e 100%);
}

.sec_problems .graph_item.active:nth-child(5) .bar_fill {
  width: 0%;
}

.sec_problems .graph_item.active:nth-child(6) .bar_fill {
  width: 30%;
  background: linear-gradient(90deg, #fff4e4 0%, #ffdaa2 100%);
}

.sec_problems .graph_item .percentage {
  position: absolute;
  top: 50%;
  color: var(--grey-color);
  font-weight: var(--font-weight-medium);
  transform: translateY(-50%);
}

.sec_problems .notes {
  line-height: 1.7;
  color: var(--gold-color);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* Haircare Series Section */
.sec_haircare_series {
  position: relative;
  z-index: 1;
}

.sec_haircare_series .healthy_notes {
  line-height: 2;
  color: var(--grey-color);
}

.sec_haircare_series .benefits_blk {
  background: url("../images/26ss/img_benefits_bg.jpg") no-repeat center/cover;
}

.sec_haircare_series .benefits_ttl {
  position: relative;
  background-color: rgba(255, 255, 255, 0.76);
  color: var(--yellow-color);
  font-weight: var(--font-weight-bold);
}

.sec_haircare_series .benefits_ttl span {
  font-weight: var(--font-weight-bold);
}

.sec_haircare_series .benefits_ttl::after {
  position: absolute;
  top: 50%;
  right: 0;
  background: url("../images/26ss/icon_open.png") no-repeat center/contain;
  content: "";
  transform: translateY(-50%);
}

/* Types Section */
.sec_types .txt_content {
  line-height: 1.8;
  color: var(--grey-color);
  text-align: center;
}

.sec_types .more_content_blk {
  background-color: var(--ivory-color);
}

.sec_types .more_ttl {
  line-height: 1.8;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sec_types .more_ttl span {
  position: relative;
  color: var(--yellow-color);
  font-family: var(--font-Cardo);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.sec_types .more_ttl span::before {
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--white-color);
  content: "";
  transform: translateY(-50%) rotate(0);
  border-radius: 100%;
}

.sec_types .more_ttl span::after {
  position: absolute;
  top: 50%;
  background: url("../images/26ss/icon_down_arr.png") no-repeat center/contain;
  content: "";
  transform: translateY(-50%);
}

.sec_types .more_ttl.open span::after {
  transform: translateY(-50%) rotate(180deg);
}

.sec_types .more_content {
  display: none;
}

.sec_types .more_content .ttl_mod_jp {
  text-align: left;
}

.sec_types .more_content .txt_mod {
  text-align: left;
}

.sec_types .more_content .txt_notes {
  line-height: 2;
  color: var(--grey-color);
}

/* Healthy Section */
.sec_healthy .healthy_bg {
  background: url("../images/26ss/img_healthy_bg.png") no-repeat center/cover;
}

/* Products Section */
.sec_products .txt_mod {
  color: var(--yellow-color);
}

/* How To Section */
.sec_howto .howto_slide {
  text-align: center;
}

.sec_howto .step_txt {
  color: var(--yellow-color);
  font-family: var(--font-Cardo);
  font-weight: var(--font-weight-bold);
}

.sec_howto .step_ttl {
  line-height: 1.5;
  color: var(--grey-color);
  font-weight: var(--font-weight-regular);
}

.sec_howto .step_img {
  overflow: hidden;
  background-color: var(--white-color);
}

/* Reward Section */
.sec_reward {
  position: relative;
}

.sec_reward .ttl_mod_jp {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: var(--shade-grey-color);
}

.sec_reward .txt_no {
  position: absolute;
  color: var(--dark-grey-color);
  font-weight: var(--font-weight-bold);
}

.sec_reward .btn_grey {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  box-shadow: none;
}

/* Voice Section */
.sec_voice .tab_nav li {
  width: 50%;
}

.sec_voice .tab_nav li a {
  display: block;
  line-height: 1.5;
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.sec_voice .tab_container {
  margin-top: -1px;
}

.sec_voice .img_content {
  position: relative;
  width: 100%;
}

.sec_voice .img_content img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 95%;
  height: 96%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 1.5s ease-in-out;
  object-fit: cover;
  opacity: 0;
}

.sec_voice .img_content img.is_active,
.sec_voice .txt_content p.is_active {
  opacity: 1;
}

.sec_voice .txt_content {
  position: relative;
}

.sec_voice .txt_content p {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: var(--yellow-color);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.bg_yellow {
  background-color: var(--shade-yellow-color);
}

.bg_orange {
  background-color: var(--deep-orange-color);
}

.bg_brown {
  background-color: var(--brown-color);
}

/* Feedback Section */
.sec_feedback {
  background-color: var(--cream-color);
}

.sec_feedback .feedback_slide {
  display: flex;
  position: relative;
  align-items: stretch;
  height: auto;
  text-align: center;
}

.sec_feedback .feedback_img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.sec_feedback .feedback_txt {
  width: 100%;
  background-color: var(--white-color);
}

.sec_feedback .notes {
  line-height: 1.5;
  color: var(--grey-color);
}

/* Q&A Section */
.sec_qa .accordion_ttl {
  position: relative;
  line-height: 1.7;
  color: var(--yellow-color);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sec_qa .accordion_ttl::before {
  position: absolute;
  left: 0;
  font-family: var(--font-Cardo);
  content: "Q";
}

.sec_qa .accordion_ttl .icon {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--yellow-color);
  border-radius: 100%;
}

.sec_qa .accordion_ttl .icon::before,
.sec_qa .accordion_ttl .icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--white-color);
  content: "";
  transform: translate(-50%, -50%);
  transition: all 300ms;
}

.sec_qa .accordion_ttl.close .icon::after {
  height: 0;
}

.sec_qa .accordion_content {
  display: none;
  line-height: 2;
  color: var(--grey-color);
}

.sec_qa .accordion_notes {
  background-color: var(--floral-white-color);
}

.sec_qa .accordion_content a {
  color: var(--gold-color);
}

.sec_mv .mv_logo img {
  filter: drop-shadow(0px 0px 1px #ffffffff);
}
@media only screen and (min-width:768px) {

  /* Common Title */
  .ttl_mod_jp {
    font-size: 1.8vw;
  }

  .ttl_mod_en {
    padding: 0 3vw;
    font-size: 2.4vw;
  }

  .ttl_mod_en::before {
    width: 2.2vw;
    height: 0.3vw;
  }

  /* Common Text */
  .txt_mod {
    font-size: 1.4vw;
  }

  /* Common Button  */
  .btn_mod {
    padding: 1.5vw 1vw;
    box-shadow: 0 0.4vw 2vw var(--light-yellow-color);
    font-size: 1.6vw;
    border-radius: 2vw;
  }

  .btn_mod::after {
    right: 2.6vw;
    width: 0.6vw;
    height: 1vw;
  }

  /* Common Raindrops */
  .raindrops_blk {
    margin: 0 1vw;
    padding: 0.9vw 0;
  }

  .raindrops_blk p {
    font-size: 1.8vw;
  }

  /* Common Swiper */
  .swiper-pagination-bullet {
    width: 0.6vw;
    height: 0.6vw;
    margin: 0 0.5vw !important;
  }

  /* Modal Popup */
  .modal_wrap {
    top: 4.5vw;
  }

  .modal_inner {
    width: 35.5vw;
    box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.13);
  }

  .modal_close {
    right: 0.8vw;
    width: 3.6vw;
    height: 3.6vw;
    box-shadow: 0 0 0.7vw rgba(0, 0, 0, 0.1);
  }

  .modal_close img {
    width: 1.65vw;
  }

  .modal_content .img_blk {
    padding: 1.5vw 1.7vw;
  }

  .modal_content .modal_ttl {
    font-size: 2vw;
  }

  .modal_content .modal_ttl span {
    font-size: 1.6vw;
  }

  .modal_content .txt_blk {
    padding: 2.1vw 1.7vw;
  }

  .modal_content .sub_ttl {
    margin-bottom: 0.6vw;
    font-size: 1.4vw;
  }

  .modal_content .modal_txt {
    margin-bottom: 1.7vw;
    font-size: 1.2vw;
  }

  /* Menu Toggle */
  .menu_toggle,
  .side_nav {
    display: none;
  }

  /* Mainvisual Section */
  .sec_mv {
    height: 73.8vw;
  }

  .sec_mv .mv_txt_blk {
    top: 6.4vw;
  }

  .sec_mv .mv_ttl {
    padding-bottom: 0.8vw;
    font-size: 3.2vw;
  }

  .sec_mv .mv_txt {
    font-size: 1.6vw;
    letter-spacing: 0.05vw;
  }

  .sec_mv .mv_logo {
    bottom: 2.2vw;
    width: 16.5vw;
  }

  /* Intro Section */
  .sec_intro .intro_blk {
    top: 1vw;
  }

  .sec_intro .ttl_mod_jp {
    margin-bottom: 2.4vw;
  }

  .sec_intro .txt_mod+.txt_mod {
    margin-top: 2.6vw;
  }

  .sec_intro .product_name {
    /* width: 14vw; */
    font-size: 1.6vw;
  }

  .sec_intro .name01 {
    bottom: 3.4vw;
    left: 0;
    text-align: right;
  }

  .sec_intro .name02 {
    right: 0;
    bottom: 7.4vw;
    text-align: left;
    padding-left: 1em;
  }

  /* Problems Section */
  .sec_problems {
    padding: 1.8vw 1vw 3.9vw;
  }

  .sec_problems .sec_problems_inner {
    padding: 2.8vw 0 1.9vw;
    box-shadow: 0 0.1vw 1vw rgba(0, 0, 0, 0.17);
    border-radius: 2.4vw;
  }

  .sec_problems .ttl_mod_jp {
    margin-bottom: 3.4vw;
  }

  .sec_problems .txt_mod {
    margin-bottom: 3.4vw;
  }

  .sec_problems .graph_blk {
    margin: 0 0.7vw 3vw;
  }

  .sec_problems .graph_base p {
    font-size: 0.8vw;
  }

  .sec_problems .graph_base p::before {
    top: 2vw;
    width: 0.1vw;
    height: 24vw;
  }

  .sec_problems .graph_list {
    margin: 0.2vw 0.6vw;
  }

  .sec_problems .graph_item {
    margin-bottom: 0.23vw;
  }

  .sec_problems .graph_item .item_label {
    padding: 0 0.5vw;
    font-size: 1vw;
  }

  .sec_problems .graph_item .bar_track {
    height: 1.4vw;
  }

  .sec_problems .graph_item .percentage {
    right: -2.7vw;
    font-size: 1vw;
  }

  .sec_problems .graph_item:nth-child(5) .percentage {
    right: -2vw;
  }

  .sec_problems .notes {
    font-size: 1vw;
  }

  /* Haircare Series Section */
  .sec_haircare_series {
    padding-top: 1vw;
  }

  .sec_haircare_series .ttl_mod_jp {
    margin-bottom: 0.3vw;
  }

  .sec_haircare_series .txt_mod {
    margin: 0 0 2.4vw;
  }

  .sec_haircare_series .healthy_notes {
    margin: 2.4vw 1vw;
    font-size: 1.2vw;
    letter-spacing: 0.01vw;
  }

  .sec_haircare_series .benefits_blk {
    margin: 2.5vw 0;
    padding: 5.6vw 1.9vw 4.6vw;
  }

  .sec_haircare_series .benefits_list li+li {
    margin-top: 1.5vw;
  }

  .sec_haircare_series .benefits_ttl {
    width: 25vw;
    padding: 1.1vw;
    font-size: 1.6vw;
  }

  .sec_haircare_series .benefits_ttl span {
    font-size: 1.2vw;
  }

  .sec_haircare_series .benefits_ttl::after {
    right: 1.4vw;
    width: 2.1vw;
    height: 2.1vw;
  }

  /* Types Section */
  .sec_types {
    padding: 0 1vw;
  }

  .sec_types .ttl_mod_jp {
    margin-bottom: 2.2vw;
  }

  .sec_types .txt_content {
    margin-bottom: 2.2vw;
    font-size: 1.2vw;
  }

  .sec_types .txt_content:first-of-type {
    margin-bottom: 1vw;
  }

  .sec_types .more_ttl {
    padding: 1.35vw 0;
  }

  .sec_types .more_ttl span {
    padding-right: 4vw;
    font-size: 1.6vw;
  }

  .sec_types .more_ttl span::before {
    width: 2.9vw;
    height: 2.9vw;
    box-shadow: 0 0 0.7vw rgba(0, 0, 0, 0.1);
  }

  .sec_types .more_ttl span::after {
    right: 0.8vw;
    width: 1.3vw;
    height: 0.9vw;
  }

  .sec_types .more_content {
    padding: 1.7vw 0.3vw 0;
  }

  .sec_types .more_content .ttl_mod_jp {
    margin-bottom: 0.8vw;
  }

  .sec_types .more_content .txt_mod {
    margin-bottom: 1.5vw;
  }

  .sec_types .more_content .txt_notes {
    margin-bottom: 3vw;
    font-size: 1.2vw;
    letter-spacing: 0.01vw;
  }

  /* Healthy Section */
  .sec_healthy {
    padding-top: 4.2vw;
  }

  .sec_healthy .healthy_bg {
    padding: 2.8vw 1vw;
  }

  .sec_healthy .ttl_mod_jp {
    margin-bottom: 1.8vw;
  }

  .sec_healthy .txt_mod {
    margin-bottom: 2.8vw;
  }

  /* Products Section */
  .sec_products {
    padding: 2.5vw 0;
  }

  .sec_products .txt_mod {
    margin-top: 0vw;
  }

  /* Gift Section */
  .sec_gift {
    padding: 1.4vw 0;
  }

  .sec_gift .ttl_mod_en {
    margin-bottom: 3vw;
  }

  .sec_gift .gift_img {
    margin: 0 1vw 1.5vw;
  }

  .sec_gift .ttl_mod_jp {
    margin-bottom: 2vw;
  }

  .sec_gift .txt_mod {
    margin-bottom: 2.8vw;
  }

  .sec_gift .btn_blk .btn_mod+.btn_mod {
    margin-top: 3.4vw;
  }

  /* How To Section */
  .sec_howto {
    padding: 3.8vw 0;
  }

  .sec_howto .ttl_mod_en {
    margin-bottom: 4vw;
  }

  .sec_howto .ttl_mod_jp {
    margin-bottom: 0.8vw;
  }

  .sec_howto .txt_mod {
    margin-bottom: 4.4vw;
  }

  .sec_howto .howto_swiper {
    padding: 2.9vw 0 4.2vw 1.3vw;
  }

  .sec_howto .howto_slide {
    width: 15vw !important;
    margin-right: 2.5vw !important;
  }

  .sec_howto .step_txt {
    margin-bottom: 0.4vw;
    font-size: 1.6vw;
  }

  .sec_howto .step_ttl {
    margin-bottom: 1vw;
    font-size: 1.2vw;
  }

  .sec_howto .ttl_lg {
    height: 3.6vw;
  }

  .sec_howto .step_img {
    box-shadow: 0 0 0.8vw rgba(0, 0, 0, 0.08);
    border-radius: 1.6vw;
  }

  .sec_howto .swiper-pagination {
    margin: 2.5vw 0 0 0;
  }

  .sec_howto .swiper-pagination-bullet {
    border: 0.1vw solid var(--light-white-color);
  }

  .sec_howto .swiper-pagination-bullet-active {
    border: 0.1vw solid var(--yellow-color);
  }

  /* Reward Section */
  .sec_reward {
    padding: 0 1vw;
  }

  .sec_reward .ttl_mod_jp {
    top: 2vw;
  }

  .sec_reward .txt_no {
    top: 7.8vw;
    right: 3.8vw;
    font-size: 1.8vw;
  }

  .sec_reward .btn_grey {
    bottom: 1.6vw;
    width: 27vw;
  }

  /* Voice Section */
  .sec_voice {
    padding: 3.5vw 0 2.4vw;
  }

  .sec_voice .ttl_mod_en {
    margin-bottom: 3.8vw;
  }

  .sec_voice .ttl_mod_jp {
    margin-bottom: 2vw;
  }

  .sec_voice .txt_mod {
    margin-bottom: 1.5vw;
  }

  .sec_voice .tab_nav li a {
    padding: 1.2vw 0.5vw;
    font-size: 1.4vw;
    border-radius: 1vw 1vw 0 0;
  }

  .sec_voice .img_content {
    height: 51.2vw;
    padding: 1vw;
  }

  .sec_voice .txt_content {
    height: 2.8vw;
    margin: 1.4vw 1vw;
  }

  .sec_voice .txt_content p {
    font-size: 1.4vw;
  }

  /* Feedback Section */
  .sec_feedback {
    padding: 2.5vw 2.2vw 3vw;
  }

  .sec_feedback .ttl_mod_jp {
    margin-bottom: 2.7vw;
  }

  .sec_feedback .feedback_slide {
    width: 32.8vw;
    margin: 0 3vw 2.2vw;
  }

  .sec_feedback .feedback_img {
    width: 8.1vw;
  }

  .sec_feedback .feedback_txt {
    margin-top: 6.2vw;
    padding: 4vw 3vw 2vw;
  }

  .sec_feedback .swiper-pagination {
    margin: 1.2vw 0;
  }

  .sec_feedback .notes {
    font-size: 1vw;
  }

  /* Q&A Section */
  .sec_qa {
    padding: 3.8vw 0 4.4vw;
  }

  .sec_qa .accordion_wrap {
    margin: 2.1vw 1vw 4vw;
  }

  .sec_qa .accordion_item {
    padding: 2.2vw 0;
    border-bottom: 0.2vw solid var(--pastel-yellow-color);
  }

  .sec_qa .accordion_ttl {
    padding: 0 5vw 0 3vw;
    font-size: 1.4vw;
  }

  .sec_qa .accordion_ttl::before {
    top: -0.7vw;
    font-size: 2.4vw;
  }

  .sec_qa .accordion_ttl .icon {
    width: 3vw;
    height: 3vw;
  }

  .sec_qa .accordion_ttl .icon::before {
    width: 1.6vw;
    height: 0.3vw;
  }

  .sec_qa .accordion_ttl .icon::after {
    width: 0.3vw;
    height: 1.6vw;
  }

  .sec_qa .accordion_content {
    padding-top: 2vw;
    font-size: 1.2vw;
  }

  .sec_qa .accordion_notes {
    margin-top: 1.1vw;
    padding: 1.5vw 0.3vw;
  }

  .sec_qa .accordion_content a {
    padding-bottom: 0.2vw;
    border-bottom: 0.1vw solid var(--gold-color);
  }

  .sec_qa .btn_gp+.btn_gp {
    margin-top: 5.6vw;
  }

  .sec_qa .btn_gp a+a {
    margin-top: 2.8vw;
  }

}

@media only screen and (max-width: 767.9px) {

  /* Common Title */
  .ttl_mod_jp {
    font-size: 4.8vw;
  }

  .ttl_mod_en {
    padding: 0 8vw;
    font-size: 6.4vw;
  }

  .ttl_mod_en::before {
    width: 5.867vw;
    height: 0.8vw;
  }

  /* Common Text */
  .txt_mod {
    font-size: 3.733vw;
  }

  /* Common Button  */
  .btn_mod {
    padding: 4vw 2.667vw;
    box-shadow: 0 1.067vw 5.333vw var(--light-yellow-color);
    font-size: 4.267vw;
    border-radius: 5.333vw;
  }

  .btn_mod::after {
    right: 5.333vw;
    width: 1.6vw;
    height: 2.667vw;
  }

  /* Common Raindrops */
  .raindrops_blk {
    margin: 0 2.667vw;
    padding: 2.4vw 0;
  }

  .raindrops_blk p {
    font-size: 4.8vw;
  }

  /* Common Swiper */
  .swiper-pagination-bullet {
    width: 1.6vw;
    height: 1.6vw;
    margin: 0 1.333vw !important;
  }

  /* Modal Popup */
  .modal_wrap {
    top: 6.333vw;
  }

  .modal_inner {
    width: 94.667vw;
    box-shadow: 0 1.067vw 2.667vw rgba(0, 0, 0, 0.13);
  }

  .modal_close {
    right: 2.133vw;
    width: 9.6vw;
    height: 9.6vw;
    box-shadow: 0 0 1.867vw rgba(0, 0, 0, 0.1);
  }

  .modal_close img {
    width: 4.4vw;
  }

  .modal_content .img_blk {
    padding: 4vw 4.533vw;
  }

  .modal_content .modal_ttl {
    font-size: 5.333vw;
  }

  .modal_content .modal_ttl span {
    font-size: 4.333vw;
  }

  .modal_content .txt_blk {
    padding: 5.6vw 4.533vw;
  }

  .modal_content .sub_ttl {
    margin-bottom: 1.6vw;
    font-size: 3.733vw;
  }

  .modal_content .modal_txt {
    margin-bottom: 4.533vw;
    font-size: 3.2vw;
  }

  /* Menu Toggle */
  .menu_toggle {
    display: flex;
    position: fixed;
    top: 18vw;
    right: 2.667vw;
    justify-content: center;
    align-items: center;
    z-index: 9;
    width: 12vw;
    height: 12vw;
    visibility: hidden;
    background-color: var(--yellow-color);
    cursor: pointer;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    border-radius: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  .menu_toggle p {
    position: relative;
    width: 5.6vw;
    height: 4.8vw;
  }

  .menu_toggle span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.067vw;
    background-color: var(--white-color);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 2.667vw;
  }

  .menu_toggle span:nth-child(1) {
    top: 0;
    width: 100%;
  }

  .menu_toggle span:nth-child(2) {
    top: 1.867vw;
    width: 55%;
    justify-self: start;
  }

  .menu_toggle span:nth-child(3) {
    top: 3.733vw;
    width: 100%;
  }

  .menu_toggle.active span:nth-child(1) {
    top: 1.867vw;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .menu_toggle.active span:nth-child(2) {
    background-color: transparent;
  }

  .menu_toggle.active span:nth-child(3) {
    top: 1.867vw;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .side_nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 8;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    padding: 47.2vw 0 13.333vw;
    background: transparent;
    overflow-y: auto;
    opacity: 0;
  }

  .side_nav .glass_filter {
    position: absolute;
    z-index: 0;
    inset: 0;
    backdrop-filter: blur(1.333vw);
    isolation: isolate;
  }

  .side_nav .glass_overlay {
    position: absolute;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
    inset: 0;
  }

  .side_nav.is_show {
    visibility: visible;
    opacity: 1;
  }

  .side_nav ul {
    position: relative;
    z-index: 3;
    margin-bottom: 2.667vw;
  }

  .side_nav li {
    width: 80%;
    margin: 0 auto;
    padding: 5.067vw 0;
    text-align: center;
    border-bottom: 0.267vw solid var(--yellow-color);
  }

  .side_nav li:last-child {
    border-bottom: none;
  }

  .side_nav li a {
    color: var(--yellow-color);
    font-family: var(--font-Cardo);
    font-size: 7.467vw;
    font-weight: var(--font-weight-bold);
  }

  .side_nav .btn_blk {
    position: relative;
    justify-content: space-between;
    z-index: 3;
    padding: 0 4.267vw;
  }

  .side_nav .btn_blk .btn_mod {
    width: 47%;
    margin: 0;
  }

  .side_nav .btn_blk .btn_mod::after {
    display: none;
  }

  /* Mainvisual Section */
  .sec_mv {
    height: 189.133vw;
  }

  .sec_mv .mv_txt_blk {
    top: 17.067vw;
  }

  .sec_mv .mv_ttl {
    padding-bottom: 2.133vw;
    font-size: 8.533vw;
  }

  .sec_mv .mv_txt {
    font-size: 4.267vw;
    letter-spacing: 0.133vw;
  }

  .sec_mv .mv_logo {
    bottom: 4vw;
    width: 44vw;
  }

  /* Intro Section */
  .sec_intro .intro_blk {
    top: 2.667vw;
  }

  .sec_intro .ttl_mod_jp {
    margin-bottom: 6.4vw;
  }

  .sec_intro .txt_mod+.txt_mod {
    margin-top: 6.933vw;
  }

  .sec_intro .product_name {
    /* width: 37.333vw; */
    font-size: 4.267vw;
  }

  .sec_intro .name01 {
    bottom: 8.8vw;
    /* left: 7.467vw; */
    left: 0;
    text-align: right;
  }

  .sec_intro .name02 {
    /* right: 8vw; */
    right: 0;
    bottom: 17.8vw;
    text-align-last: left;
    padding-left: 1em;
  }

  /* Problems Section */
  .sec_problems {
    padding: 4.8vw 2.667vw 10.4vw;
  }

  .sec_problems .sec_problems_inner {
    padding: 7.467vw 0 5.067vw;
    box-shadow: 0 0.267vw 2.667vw rgba(0, 0, 0, 0.17);
    border-radius: 6.4vw;
  }

  .sec_problems .ttl_mod_jp {
    margin-bottom: 9.067vw;
  }

  .sec_problems .txt_mod {
    margin-bottom: 9.067vw;
  }

  .sec_problems .graph_blk {
    margin: 0 1.867vw 8vw;
  }

  .sec_problems .graph_base p {
    font-size: 2.133vw;
  }

  .sec_problems .graph_base p::before {
    top: 5.333vw;
    width: 0.267vw;
    height: 64vw;
  }

  .sec_problems .graph_list {
    margin: 0.533vw 1.6vw;
  }

  .sec_problems .graph_item {
    margin-bottom: 0.613vw;
  }

  .sec_problems .graph_item .item_label {
    padding: 0 1.333vw;
    font-size: 2.667vw;
  }

  .sec_problems .graph_item .bar_track {
    height: 3.733vw;
  }

  .sec_problems .graph_item .percentage {
    right: -7.2vw;
    font-size: 2.667vw;
  }

  .sec_problems .graph_item:nth-child(5) .percentage {
    right: -5.333vw;
  }

  .sec_problems .notes {
    font-size: 2.667vw;
  }

  /* Haircare Series Section */
  .sec_haircare_series {
    padding-top: 2.667vw;
  }

  .sec_haircare_series .ttl_mod_jp {
    margin-bottom: 0.8vw;
  }

  .sec_haircare_series .txt_mod {
    margin: 0vw 0 6.4vw;
  }

  .sec_haircare_series .healthy_notes {
    margin: 6.4vw 2.667vw 6.4vw;
    font-size: 3.2vw;
    letter-spacing: 0.027vw;
  }

  .sec_haircare_series .benefits_blk {
    margin: 6.667vw 0;
    padding: 14.933vw 5.067vw 12.267vw;
  }

  .sec_haircare_series .benefits_list li+li {
    margin-top: 4vw;
  }

  .sec_haircare_series .benefits_ttl {
    width: 66vw;
    padding: 2.933vw;
    font-size: 4.267vw;
  }

  .sec_haircare_series .benefits_ttl span {
    font-size: 3.2vw;
  }

  .sec_haircare_series .benefits_ttl::after {
    right: 3.733vw;
    width: 5.6vw;
    height: 5.6vw;
  }


  /* Types Section */
  .sec_types {
    padding: 0 2.667vw;
  }

  .sec_types .ttl_mod_jp {
    margin-bottom: 5.867vw;
  }

  .sec_types .txt_content {
    margin-bottom: 5.867vw;
    font-size: 3.2vw;
  }

  .sec_types .txt_content:first-of-type {
    margin-bottom: 3.867vw;
  }

  .sec_types .more_ttl {
    padding: 3.6vw 0;
  }

  .sec_types .more_ttl span {
    padding-right: 10.667vw;
    font-size: 4.267vw;
  }

  .sec_types .more_ttl span::before {
    width: 7.733vw;
    height: 7.733vw;
    box-shadow: 0 0 1.867vw rgba(0, 0, 0, 0.1);
  }

  .sec_types .more_ttl span::after {
    right: 2.133vw;
    width: 3.467vw;
    height: 2.4vw;
  }

  .sec_types .more_content {
    padding: 4.533vw 0.8vw 0;
  }

  .sec_types .more_content .ttl_mod_jp {
    margin-bottom: 2.133vw;
  }

  .sec_types .more_content .txt_mod {
    margin-bottom: 8vw;
  }

  .sec_types .more_content .txt_notes {
    margin-bottom: 8vw;
    font-size: 3.2vw;
    letter-spacing: 0.027vw;
  }

  /* Healthy Section */
  .sec_healthy {
    padding-top: 11.2vw;
  }

  .sec_healthy .healthy_bg {
    padding: 7.467vw 2.667vw;
  }

  .sec_healthy .ttl_mod_jp {
    margin-bottom: 4.8vw;
  }

  .sec_healthy .txt_mod {
    margin-bottom: 7.467vw;
  }

  /* Products Section */
  .sec_products {
    padding: 6.667vw 0;
  }

  .sec_products .txt_mod {
    margin-top: 0vw;
  }

  /* Gift Section */
  .sec_gift {
    padding: 3.733vw 0;
  }

  .sec_gift .ttl_mod_en {
    margin-bottom: 8vw;
  }

  .sec_gift .gift_img {
    margin: 0 2.667vw 4vw;
  }

  .sec_gift .ttl_mod_jp {
    margin-bottom: 5.333vw;
  }

  .sec_gift .txt_mod {
    margin-bottom: 7.467vw;
  }

  .sec_gift .btn_blk .btn_mod+.btn_mod {
    margin-top: 9.067vw;
  }

  /* How To Section */
  .sec_howto {
    padding: 10.133vw 0;
  }

  .sec_howto .ttl_mod_en {
    margin-bottom: 10.667vw;
  }

  .sec_howto .ttl_mod_jp {
    margin-bottom: 2.133vw;
  }

  .sec_howto .txt_mod {
    margin-bottom: 11.733vw;
  }

  .sec_howto .howto_swiper {
    padding: 7.733vw 0 11.2vw 3.467vw;
  }

  .sec_howto .howto_slide {
    width: 40vw !important;
    margin-right: 6.667vw !important;
  }

  .sec_howto .step_txt {
    margin-bottom: 1.067vw;
    font-size: 4.267vw;
  }

  .sec_howto .step_ttl {
    margin-bottom: 2.667vw;
    font-size: 3.2vw;
  }

  .sec_howto .ttl_lg {
    height: 10.133vw;
  }

  .sec_howto .step_img {
    box-shadow: 0 0 2.133vw rgba(0, 0, 0, 0.08);
    border-radius: 4.267vw;
  }

  .sec_howto .swiper-pagination {
    margin: 6.667vw 0 0;
  }

  .sec_howto .swiper-pagination-bullet {
    border: 0.267vw solid var(--light-white-color);
  }

  .sec_howto .swiper-pagination-bullet-active {
    border: 0.267vw solid var(--yellow-color);
  }

  /* Reward Section */
  .sec_reward {
    padding: 0 2.667vw;
  }

  .sec_reward .ttl_mod_jp {
    top: 5.333vw;
  }

  .sec_reward .txt_no {
    top: 20.8vw;
    right: 10.133vw;
    font-size: 4.8vw;
  }

  .sec_reward .btn_grey {
    bottom: 4.267vw;
    width: 66.667vw;
  }

  /* Voice Section */
  .sec_voice {
    padding: 9.333vw 0 6.4vw;
  }

  .sec_voice .ttl_mod_en {
    margin-bottom: 10.133vw;
  }

  .sec_voice .ttl_mod_jp {
    margin-bottom: 5.333vw;
  }

  .sec_voice .txt_mod {
    margin-bottom: 4vw;
  }

  .sec_voice .tab_nav li a {
    padding: 3.2vw 1.333vw;
    font-size: 3.733vw;
    border-radius: 2.667vw 2.667vw 0 0;
  }

  .sec_voice .img_content {
    height: 136.533vw;
    padding: 2.667vw;
  }

  .sec_voice .txt_content {
    height: 7.467vw;
    margin: 3.733vw 2.667vw;
  }

  .sec_voice .txt_content p {
    font-size: 3.733vw;
  }

  /* Feedback Section */
  .sec_feedback {
    padding: 6.667vw 5.867vw 8vw;
  }

  .sec_feedback .ttl_mod_jp {
    margin-bottom: 7.2vw;
  }

  .sec_feedback .feedback_slide {
    width: 87.467vw;
    margin: 0 8vw 5.867vw;
  }

  .sec_feedback .feedback_img {
    width: 21.6vw;
  }

  .sec_feedback .feedback_txt {
    margin-top: 16.533vw;
    padding: 10.667vw 8vw 8.667vw;
  }

  .sec_feedback .swiper-pagination {
    margin: 3.2vw 0;
  }

  .sec_feedback .notes {
    font-size: 2.667vw;
  }

  /* Q&A Section */
  .sec_qa {
    padding: 10.133vw 0 11.733vw;
  }

  .sec_qa .accordion_wrap {
    margin: 5.6vw 2.667vw 10.667vw;
  }

  .sec_qa .accordion_item {
    padding: 5.867vw 0;
    border-bottom: 0.533vw solid var(--pastel-yellow-color);
  }

  .sec_qa .accordion_ttl {
    padding: 0 12.133vw 0 8vw;
    font-size: 3.733vw;
  }

  .sec_qa .accordion_ttl::before {
    top: -1.867vw;
    font-size: 6.4vw;
  }

  .sec_qa .accordion_ttl .icon {
    width: 8vw;
    height: 8vw;
  }

  .sec_qa .accordion_ttl .icon::before {
    width: 4.267vw;
    height: 0.8vw;
  }

  .sec_qa .accordion_ttl .icon::after {
    width: 0.8vw;
    height: 4.267vw;
  }

  .sec_qa .accordion_content {
    padding-top: 5.333vw;
    font-size: 3.2vw;
  }

  .sec_qa .accordion_notes {
    margin-top: 2.933vw;
    padding: 4vw 0.8vw;
  }

  .sec_qa .accordion_content a {
    padding-bottom: 0.533vw;
    border-bottom: 0.267vw solid var(--gold-color);
  }

  .sec_qa .btn_gp+.btn_gp {
    margin-top: 14.933vw;
  }

  .sec_qa .btn_gp a+a {
    margin-top: 7.467vw;
  }

}

/* Fade Up Animation */
.js_fadein,
.js_fadeup {
  opacity: 0;
}

.js_fadein.active,
.js_fadeup.active {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.js_fadein.active {
  animation-name: fadeIn;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -webkit-animation-name: fadeIn;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

.js_fadeup.active {
  animation-name: fadeUp;
  animation-duration: 0.6s;
  -webkit-animation-name: fadeUp;
  -webkit-animation-duration: 0.6s;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fadeUp {
  from {
    -webkit-transform: translateY(20%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    transform: translateY(20%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.delay01 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.delay02 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.radius_img {
  border-radius: 2em;
  overflow: hidden;
}