@charset "UTF-8";
@media (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* ループさせるために複製必要 */
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.kv {
  position: relative;
  z-index: 0;
}
@media (max-width: 767px) {
  .kv {
    padding-top: 11vw;
    aspect-ratio: 9/16;
    width: 100%;
    height: 183vw;
  }
}
@media (min-width: 768px) {
  .kv {
    aspect-ratio: 16/9;
    width: 100%;
    margin-bottom: 2.2%;
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .kv .movie_logo {
    position: relative;
    width: 68%;
    bottom: 32%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
  }
}
@media (min-width: 768px) {
  .kv .movie_logo {
    position: absolute;
    left: 5%;
    z-index: 2;
    width: 31%;
    bottom: 7%;
  }
}
.kv .movie_box {
  z-index: 1;
}
@media (max-width: 767px) {
  .kv .movie_box {
    position: absolute;
    height: 176vw;
  }
}
@media (min-width: 768px) {
  .kv .movie_box {
    position: absolute;
  }
}

#wrap {
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #161616;
}
.main_contents {
  background-repeat: no-repeat;
  background-position: top center;
  color: #FFF;
}
@media (max-width: 767px) {
  .main_contents {
    background-image: url(../img/products/styling-gel/sp/line.png);
    background-size: 100%;
    background-position: top;
    padding: 24.3% 0 0;
    margin-top: 8.4%;
  }
}
@media (min-width: 768px) {
  .main_contents {
    background-image: url(../img/products/styling-gel/pc/line.png);
    background-size: 95%;
    padding: 10% 0;
  }
}
.main_contents .title_play {
  margin: 0.5% auto 8.5%;
}
@media (max-width: 767px) {
  .main_contents .title_play {
    width: 89%;
  }
}
@media (min-width: 768px) {
  .main_contents .title_play {
    width: 48%;
  }
}
.main_contents .pr_line {
  overflow: hidden;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .main_contents .pr_line {
    padding: 9.5% 0 0;
  }
}
.main_contents .pr_line #carousel {
  display: flex;
  gap: 2vw;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
}
.main_contents .pr_line #carousel li {
  flex: 0 0 auto;
  animation: rotate 5s linear infinite;
}
.main_contents .pr_line #carousel li img {
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .main_contents .pr_line #carousel li img {
    width: 46vw;
  }
}
@media (min-width: 768px) {
  .main_contents .pr_line #carousel li img {
    width: clamp(100px, 30vw, 500px);
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec {
    padding: 21.5% 0 19.5%;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec {
    padding: 8.7% 0 6.3%;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .title_feature {
    width: 60%;
    margin: 0 auto 12%;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .title_feature {
    width: 30%;
    margin: 0 auto 3.3%;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .catch {
    width: 96.8%;
    margin-left: 1.1%;
    padding: 0 8vw;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .catch {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5.3%;
    padding: 0 10.5%;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .catch .img {
    margin-left: 2.5%;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .catch .text {
    margin-top: 1vw;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .catch .text {
    margin-left: 2.3%;
    margin-top: 2.9%;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .catch .text .copy1 {
    width: 99%;
    padding: 0% 0% 14% 1%;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .catch .text .copy1 p {
    font-size: 118%;
    margin-left: 1%;
    margin-top: 1.2%;
    line-height: 1.85em;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .catch .text .copy1 p {
    font-size: 170%;
    margin-left: 2%;
    margin-top: 1.4%;
    line-height: 1.85em;
    letter-spacing: 0.11em;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .kaori {
    width: 78%;
    margin: 0 auto 10%;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .kaori {
    width: 57%;
    margin: 0 auto 3.5%;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .main_contents .feature_sec .kaori img {
    margin-left: 1.4%;
  }
}
@media (max-width: 767px) {
  .main_contents .feature_sec .catch2 {
    width: 78.1%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .main_contents .feature_sec .catch2 {
    width: 55.5%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec {
    padding: 0 0 3.5vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec {
    padding: 0 0 8.7vw;
    height: 191vw;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .title_products {
    width: 61%;
    margin: 0 auto 10.3%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .title_products {
    width: 30%;
    margin: 0 auto 3.3%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box {
    padding: 0 8vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box {
    display: flex;
    justify-content: space-between;
    padding: 0 0%;
    margin-left: 13.8%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_text {
    width: 64%;
    margin-top: 1.1%;
  }
}
.main_contents .products_sec .pr_box .pr_text .pr_title01 {
  margin-bottom: 12%;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_text .pr_text01 {
    width: 77%;
    margin-left: 6%;
    margin-bottom: 6.2%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_text .pr_text01 {
    width: 93.5%;
    margin-left: 5%;
    margin-bottom: 7.3%;
  }
}
.main_contents .products_sec .pr_box .pr_text .pr_text02 {
  margin-left: 6.4%;
  margin-bottom: 6.2%;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_text .pr_text02 {
    width: 87.5%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_text .pr_text02 {
    width: 106%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_text .pr_text02 p {
    font-size: 113.5%;
    line-height: 1.7em;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_text .pr_text02 p {
    font-size: 166%;
    line-height: 1.7em;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_text .pr_graph {
    width: 60%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_text .pr_graph {
    width: 61%;
    margin-left: 5%;
  }
}
.main_contents .products_sec .pr_box .pr_movie {
  position: relative;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_movie {
    height: 115vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_movie {
    width: 98%;
  }
}
.main_contents .products_sec .pr_box .pr_movie .pr_movie01 {
  float: right;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_movie01 {
    width: 89%;
    margin-top: 14%;
    margin-right: -8vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_movie01 {
    width: 79.8%;
    margin-top: 5.2%;
  }
}
.main_contents .products_sec .pr_box .pr_movie .pr_movie01 .pr_movie_box {
  padding: 0;
  position: absolute;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_movie01 .pr_movie_box {
    width: 74.4vw;
    height: 78vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_movie01 .pr_movie_box {
    width: 42vw;
    height: 41vw;
  }
}
.main_contents .products_sec .pr_box .pr_movie .pr_img01 {
  z-index: 2;
  position: absolute;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_img01 {
    width: 45%;
    margin: 78% 0% 0% 0%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_img01 {
    width: 37%;
    margin: 69.9% 0% 0% 9.5%;
  }
}
.main_contents .products_sec .pr_box .pr_movie .pr_movie02 {
  width: 79.8%;
  float: left;
  margin-top: 4.2%;
  position: relative;
  z-index: 1;
}
.main_contents .products_sec .pr_box .pr_movie .pr_movie02 .pr_movie_box {
  padding: 0;
  position: absolute;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_movie02 .pr_movie_box {
    width: 74.4vw;
    height: 78vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box .pr_movie .pr_movie02 .pr_movie_box {
    width: 41vw;
    height: 41vw;
  }
}
.main_contents .products_sec .pr_box .pr_movie .pr_img02 {
  width: 37%;
  position: absolute;
  margin: 68.4% 0% 0% 55%;
  z-index: 2;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box02 {
    padding: 11vw 8vw 1vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 {
    margin-left: 0;
    margin-bottom: 5.2%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text {
    order: 2;
    margin-top: 1.2%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_title01 {
    width: 94%;
    margin: 0 0 12% 4%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_title01 {
    padding: 8.5% 30% 0% 2.5%;
    margin-bottom: 8.8%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_text01 {
    width: 89%;
    margin-left: 6.6%;
    margin-bottom: 6.2%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_text01 {
    margin-left: -3%;
    margin-bottom: 5%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_text01 img {
    width: 83%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_text02 {
    width: 76%;
    margin-left: -2.5%;
    margin-bottom: 5.9%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_text .pr_graph {
    width: 44%;
    margin-left: 16.5%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_movie {
    order: 1;
    width: 70%;
    margin: 5% 0 0;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_movie .pr_movie02 {
    width: 90.3%;
    margin: 14% 0 0 -8vw;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_movie .pr_img02 {
    width: 44%;
    margin: 78% 0% 0% 55%;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box02 .pr_movie .pr_img02 {
    width: 36.3%;
    margin: 69.5% 0% 0% 55%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box03 .pr_text .pr_title01 {
    width: 89%;
    margin-left: 2%;
    margin-bottom: 11%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box03 .pr_text .pr_text02 {
    margin-bottom: 11%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box03 .pr_movie .pr_movie01 {
    width: 90%;
    margin-top: 18%;
    margin-right: -8vw;
  }
}
.main_contents .products_sec .pr_box.pr_box03 .pr_movie .pr_movie01 .pr_movie_box {
  padding: 0;
  position: absolute;
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box03 .pr_movie .pr_movie01 .pr_movie_box {
    width: 75vw;
    height: 78vw;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec .pr_box.pr_box03 .pr_movie .pr_movie01 .pr_movie_box {
    width: 42vw;
    height: 41vw;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec .pr_box.pr_box03 .pr_movie .pr_img01 {
    margin: 81% 0% 0% 0%;
  }
}
@media (max-width: 767px) {
  .main_contents .products_sec sup {
    top: -3px;
    font-size: 65%;
    padding: 0 0.3em;
  }
}
@media (min-width: 768px) {
  .main_contents .products_sec sup {
    top: -3px;
    font-size: 65%;
    padding: 0 0.3em;
  }
}
.main_contents .buy_area {
  padding: 1.7% 9% 8.5%;
}
@media (max-width: 767px) {
  .main_contents .buy_area ul {
    padding: 5% 0 0;
  }
}
@media (min-width: 768px) {
  .main_contents .buy_area ul {
    display: flex;
    margin-bottom: 8.8%;
  }
}
.main_contents .buy_area ul li {
  text-align: center;
}
@media (max-width: 767px) {
  .main_contents .buy_area ul li {
    width: 70%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .main_contents .buy_area ul li {
    width: 33.3%;
    padding: 0 4%;
  }
}
.main_contents .buy_area ul li .buy_pr {
  margin: 0 0 4.5%;
}
.main_contents .buy_area ul li .buy_text {
  text-align: center;
}
@media (max-width: 767px) {
  .main_contents .buy_area ul li .buy_text {
    margin: 0 auto 2%;
  }
}
@media (min-width: 768px) {
  .main_contents .buy_area ul li .buy_text {
    margin: 0 auto;
  }
}
.main_contents .buy_area ul li .buy_text.bt01 {
  width: 75%;
}
.main_contents .buy_area ul li .buy_text.bt02 {
  width: 75%;
}
.main_contents .buy_area ul li .buy_text.bt03 {
  width: 44%;
}
.main_contents .buy_area ul li p {
  padding: 6% 0 16%;
  letter-spacing: 0em;
}
@media (max-width: 767px) {
  .main_contents .buy_area ul li p {
    font-size: 125%;
    line-height: 2em;
  }
}
@media (min-width: 768px) {
  .main_contents .buy_area ul li p {
    font-size: 180%;
    line-height: 1.5em;
    white-space: nowrap;
  }
}
.main_contents .buy_area ul li .buy_btn {
  width: 100%;
  cursor: pointer;
}
@media (max-width: 767px) {
  .main_contents .buy_area ul li .buy_btn {
    margin: 0 auto 28%;
  }
}
.main_contents .buy_area .note {
  color: #FFF;
  text-align: center;
  font-size: 116%;
}
.main_contents .mc_footer {
  overflow: hidden;
  width: 100%;
}
@media (max-width: 767px) {
  .main_contents .mc_footer {
    margin-top: -6vw;
    padding-bottom: 75vw;
  }
}
@media (min-width: 768px) {
  .main_contents .mc_footer {
    margin-top: -6.5%;
    margin-bottom: 12.5%;
  }
}
.main_contents .mc_footer .scroller {
  z-index: 2;
}
@media (max-width: 767px) {
  .main_contents .mc_footer .scroller {
    position: relative;
    height: 21vw;
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 100s linear infinite;
  }
}
@media (min-width: 768px) {
  .main_contents .mc_footer .scroller {
    display: flex;
    width: max-content;
    animation: scroll-left 100s linear infinite;
    position: relative;
    height: 16vw;
  }
}
@media (max-width: 767px) {
  .main_contents .mc_footer .scroller img {
    display: inline-block;
    vertical-align: top;
    width: 333vw;
    z-index: 16;
    position: relative;
    max-width: none;
  }
}
@media (min-width: 768px) {
  .main_contents .mc_footer .scroller img {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }
}
.main_contents .mc_footer .mc_footer_bg {
  position: absolute;
  z-index: 1;
}
@media (max-width: 767px) {
  .main_contents .mc_footer .mc_footer_bg {
    margin-top: -11.3%;
    height: 86vw;
  }
}
@media (min-width: 768px) {
  .main_contents .mc_footer .mc_footer_bg {
    margin-top: -8.3%;
  }
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.pagetop {
  display: none !important;
}
@media (max-width: 767px) {
  .pagetop {
    display: flex;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    padding: 0 3.75rem 1rem;
    margin-top: 1rem;
  }
}
@media (min-width: 768px) {
  .pagetop {
    position: relative;
    width: 100%;
    max-width: 1980px;
    margin: auto;
    padding: 0 8.3rem;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
  }
}

.hv_action {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.hv_action img {
  display: block;
  transition: opacity 0.3s ease;
}

.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.hv_action:hover .img-hover {
  opacity: 1;
}

.hv_action:hover .img-normal {
  opacity: 0;
}/*# sourceMappingURL=styling-gel.css.map */