@charset "utf-8";

/* .lead, */
/* .characteristic, */
/* .lineup */
/* .gift, */
/* .ingredient, */
/* .story, */
/* .fragrance */

/* .how-to-use, */
/* {
  display: none;
} */

/* =========================
            共通
========================= */
.common__title {
  font-size: 5.4vw;
}

.common__title--en {
  font-size: 10.1vw;
}

.data {
  margin-top: 3.9vw;
}

.name-and-price {
  font-size: 3.3vw;
}

.cart__btn,
.bcs {
  margin-top: 3.9vw;
}

.cart__btn a,
.bcs .bbg {
  width: 48.5vw;
  font-size: 3.6vw;
  padding: 5.5vw 0;
}

.cart__btn a svg {
  font-size: 3vw;
  right: 7px;
}

.common__obj {
  width: 100vw;
  left: 0;
  z-index: 10;
}

.common-title__obj {
  width: 13.7vw;
}

.section__line {
  height: 3vw;
}

.limited {
  width: 12.5vw;
  height: 12.5vw;
  padding: 1px;
  top: -1vw;
  right: -6vw;
}

.ltext {
  font-size: 3.3vw;
}

/* =======================
            kv
======================= */
.kv-text__wrapper {
  width: 100%;
  top: 7vw;
  left: 0;
}

.kv__title {
  font-size: 10.2vw;
}

.kv__lead {
  font-size: 4vw;
  line-height: 1.2;
  margin-top: 1.5vw;
}

.kv__icon {
  top: 25vw;
  right: 27vw;
}

.kv__icon img {
  width: 13.5vw;
}

.campaign-banner__wrapper {
  width: 93.2vw;
  bottom: -20vw;
}

/* =======================
          lead
======================= */
.lead {
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/bg_lead.jpg);
}

.lead__inner {
  padding: 24vw 0 13.1vw;
}

.nav-anchor__list {
  flex-wrap: wrap;
  column-gap: 1.9vw;
  row-gap: 1.8vw;
}

.nav-anchor__item {
  width: 28.8vw;
  height: 11.1vw;
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/bg_nav.png);
  background-size: contain;
}

.nav-anchor__link {
  font-size: 2.9vw;
  padding-top: 2.8vw;
}

.lead__label {
  width: 53.6vw;
  margin: 9.1vw auto 0;
}

.lead__text {
  font-size: 5.1vw;
  line-height: 1.2;
  margin-top: 4.6vw;
}

/* =======================
        5つの特長
======================= */
.characteristic {
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/bg_characteristic.jpg);
}

.characteristic__inner {
  padding: 10.3vw 0 6.7vw;
}

.common__title--num {
  font-size: 10.1vw;
}

.characteristic-title__obj {
  margin-top: 2.6vw;
}

.characteristic__img {
  width: 96.6vw;
  margin: 3.3vw auto 0;
}


/* =======================
      All Line Up
======================= */
.lineup__inner {
  padding: 11.1vw 0 13.8vw;
  position: relative;
  z-index: 50;
}

.lineup-tab-area {
  width: 95.5vw;
  flex-wrap: wrap;
  column-gap: 1.3vw;
  row-gap: 1.3vw;
  margin: 5.8vw auto 0;
}

.lineup-tab {
  width: 30vw;
  height: 10.1vw;
  font-size: 3.3vw;
  padding: 1.8vw 0;
}

.lineup-panel-group {
  width: 100vw;
}

/* .lineup__item {
  width: auto;
} */

.lineup__catch {
  font-size: 4.5vw;
  line-height: 1.4;
  margin-top: 8.4vw;
}

.lineup__list {
  margin-top: 3.9vw;
}

.lineup__img {
  width: 48.2vw;
}

.lineup-panel-area .slick-arrow {
  top: 55%;
}

.slick-arrow.slick-prev::after,
.slick-arrow.slick-next::after {
  display: none;
}

.lineup-prev,
.lineup-next,
.gift-prev,
.gift-next,
.bundle-prev,
.bundle-next {
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
  transition: unset;
  border-width: 0px;
  border-style: none;
  opacity: 1;
}

.slick-arrow.lineup-prev,
.slick-arrow.gift-prev,
.slick-arrow.bundle-prev {
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/prev.svg);
  left: 11vw;
}

.slick-arrow.lineup-next,
.slick-arrow.gift-next,
.slick-arrow.bundle-next {
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/next.svg);
  right: 11vw;
}

.size-filter {
  display: flex !important;
  column-gap: 2.4vw;
  justify-content: center;
}

.size-filter li {
  width: 18.5vw;
  background-color: #d2e9e5;
  border-radius: 50px;
  color: #2c7676;
  font-size: 3.3vw;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-top: 7.7vw;
  padding: 2.9vw 0 3.5vw;
}

.size-filter.gr li {
  background-color: #fddfe3;
  color: #df5476;
}

.size-filter.plv li {
  background-color: #eadbf0;
  color: #8b50b5;
}

.size-filter.wt li {
  background-color: #d6ebd6;
  color: #458c51;
}

.size-filter.tk li {
  background-color: #f8dcf4;
  color: #d048d5;
}

.size-filter.rt li {
  background-color: #fad8d4;
  color: #d14242;
}

.size-filter li.active {
  background-color: #69b8b8;
  color: #fff;
}

.size-filter.gr li.active {
  background-color: #f897af;
}

.size-filter.plv li.active {
  background-color: #ba89dc;
}

.size-filter.wt li.active {
  background-color: #78bf84;
}

.size-filter.tk li.active {
  background-color: #e78cea;
}

.size-filter.rt li.active {
  background-color: #ed7f7f;
}

/* =========================
        For Gift
========================= */
.gift__inner {
  padding: 11.9vw 0 16.3vw;
}

.gift-slider {
  width: 100vw;
}

.gift__list {
  margin: 7.4vw auto 0;
}

.gift__catch {
  font-size: 4.5vw;
}

.gift__img {
  width: 54.1vw;
  margin: 4.2vw auto 0;
}

.gift-slider .slick-dots,
.bundle-slider .slick-dots {
  margin-top: 5.6vw;
}

.gift-slider .slick-dots>li>button::before,
.bundle-slider .slick-dots>li>button::before {
  width: 8px;
  height: 8px;
  background: #9c894c;
  opacity: 0.4;
}

.gift-slider .slick-dots>li.slick-active>button::before,
.bundle-slider .slick-dots>li.slick-active>button::before {
  opacity: 1;
}

/* =========================
        bundle
========================= */
.bundle-set__inner {
  padding: 11.9vw 0 16.3vw;
}

.bundle__catch {
  font-size: 4.5vw;
  line-height: 1.4;
}

.bundle-slider {
  width: 100vw;
}

.bundle__list {
  margin: 3.9vw auto 0;
}

.bundle__img {
  width: 48.2vw;
}

.limited--bundle {
  width: 14.5vw;
  height: 14.5vw;
  top: 1vw;
  right: -2vw;
}

.ltext--bundle {
  font-size: 4vw;
}


/* =========================
            成分
========================= */
.ingredient__inner {
  padding: 12.9vw 0 13.8vw;
  position: relative;
  z-index: 50;
}

.ingredient__title {
  font-feature-settings: "palt";
  line-height: 1.1;
}

.ingredient__title--num {
  margin-right: 1vw;
  transform: translateY(0.5vw);
}

.ingredient-title__obj {
  margin-top: 1vw;
}

.ingredient__wrapper {
  width: 100%;
  flex-direction: column;
  column-gap: 0;
  margin: 0 auto;
  padding: 0;
}

.ingredient__wrapper1 {
  row-gap: 6vw;
  margin-top: 1.9vw;
}

.num1 {
  width: 7.3vw;
}

.ingredient-main__img {
  width: 90vw;
  margin: 0 auto;
}

.ingredient__text {
  font-size: 4vw;
  line-height: 1.4;
  text-align: center;
  padding-top: 0;
}

.ingredient-title__wrapper1 {
  padding-left: 15.8vw;
}

.ingredient-detail__title {
  font-size: 5.4vw;
  text-align: center;
  margin-left: -1.9vw;
  padding-top: 3.8vw;
}

.ingredient-detail__wrapper {
  column-gap: 1.2vw;
  justify-content: center;
  margin-top: 5.6vw;
}

.ingredient__img {
  width: 21.4vw;
}

.ingredient__img::after {
  width: 5.3vw;
  height: 5.3vw;
  left: 90%;
}

.ingredient-detail__text {
  font-size: 3.3vw;
  line-height: 1.3;
  margin-top: 3.3vw;
}

.ingredient__inner--botanical {
  padding: 2.8vw 0 14.2vw;
  position: relative;
  z-index: 50;
}

.num2 {
  width: 12.7vw;
  padding-left: 9.9vw;
}

.ingredient-title__wrapper2 {
  flex-wrap: wrap;
  row-gap: 1.6vw;
  padding-left: 10.8vw;
}

.ingredient-detail__title--botanical {
  margin-left: -8vw;
  padding-top: 11.8vw;
}

.ingredient__text--botanical {
  margin-left: 0;
}

.ingredient-botanical__wrapper {
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  row-gap: 1.1vw;
  margin: 3.3vw auto 0;
}

.ingredient-botanical__img {
  width: 83vw;
  margin: 0 auto;
  position: relative;
}

.ingredient-botanical__text {
  font-size: 4.5vw;
  top: 5.9vw;
}

.ingredient-botanical__text1 {
  left: 6.4vw;
}

.ingredient-botanical__text2 {
  right: 9.1vw;
}

.ingredient-botanical__text3 {
  left: 7.1vw;
}

.ingredient-botanical__text4 {
  right: 11.1vw;
}

.ingredient-botanical__text sup {
  font-size: 2.1vw;
}

.ingredient__notes {
  width: 83vw;
  font-size: 2.9vw;
  line-height: 1.5;
  margin: 6vw auto 0;
}

.common__obj1 {
  top: 13vw;
}

/* =========================
            香り
========================= */
.fragrance__inner {
  padding: 13.6vw 0 15.5vw;
}

.gen-text__wrapper {
  align-items: center;
  column-gap: 0.6vw;
  margin-top: 7.2vw;
}

.gen__text {
  font-size: 2.9vw;
}

.graph__img {
  width: 91vw;
  margin: 4vw auto 0;
}

.fragrance__btn {
  border-radius: 50px;
  font-size: 3.6vw;
  box-shadow: 0.6vw 0.6vw #dfdaca;
  padding: 2.2vw 0 1.4vw;
}

.fragrance__btn::after {
  width: 1.5vw;
  height: 1.5vw;
  right: 2vw;
}

.fragrance-type__btn-text {
  font-size: 2.9vw;
}

.fragrance-type__wrapper {
  column-gap: 1vw;
  margin-top: 1.1vw;
}

.fragrance-modal__inner {
  border-radius: 20px;
}

.fragrance-modal__close {
  width: 6.2vw;
  height: 6.2vw;
  top: 4vw;
  right: 4vw;
}

.fragrance-modal__close::before,
.fragrance-modal__close::after {
  top: 50%;
  left: 50%;
  width: 0.4vw;
  height: 6.2vw;
}

.fragrance-slider .slick-dots {
  margin-top: 3.3vw;
}

.fragrance-slider .slick-dots>li>button::before {
  width: 1.5vw;
  height: 1.5vw;
}

.fragrance-slider .fragrance-prev {
  left: -18px;
}

.fragrance-slider .fragrance-next {
  right: -18px;
}

/* .fragrance__list .slick-list {
  overflow: visible;
} */

/* .fragrance__list .slick-track {
  width: 473px !important;
} */

.fragrance__list {
  width: 73.1vw;
  height: 73.4vw;
}

.fragrance__item {
  width: 73.1vw !important;
  height: 73.4vw;
  border-radius: 30px;
  padding: 9.3vw 0 7vw;
}

.fragrance-name__title {
  font-feature-settings: "palt";
  font-size: 5.8vw;
  line-height: 1;
}

.recommend__text {
  width: 28vw;
  border-radius: 50px;
  font-size: 2.9vw;
  line-height: 1;
  margin: 3.8vw auto 0;
  padding: 1.6vw 0;
}

.type__text {
  font-size: 4.7vw;
  margin: 3.6vw auto 0;
}

.type__text::before,
.type__text::after {
  width: 5.8vw;
  height: 1.6vw;
  background-size: contain;
  top: 40%;
}

.type__text::before {
  left: -8vw;
}

.type__text::after {
  right: -8vw;
}

.fragrance-detail__text {
  font-size: 3.6vw;
  line-height: 1.2;
  margin-top: 2.2vw;
}

.fragrance-detail__btn {
  width: 48.4vw;
  margin: 4.5vw auto 0;
}

.fragrance-detail__btn::after {
  width: 1.5vw;
  height: 1.5vw;
  right: 12px;
}

.fragrance-detail__btn a {
  font-size: 3.8vw;
  padding: 4.7vw 0;
}

.fragrance__obj {
  z-index: 50;
}

/* ホワイトティー */
.fragrance__btn--wt {
  width: 41.9vw;
  top: 9vw;
  left: 0;
}

.wt__obj--l {
  width: 20.4vw;
  top: -5vw;
  left: -6vw;
}

.wt__obj--r {
  width: 11.6vw;
  bottom: 7vw;
  right: -5vw;
}

/* ジャスミン */
.fragrance__btn--dj {
  width: 43.7vw;
  top: 9vw;
  right: 0;
}

.dj__obj--l {
  width: 20.6vw;
  top: -6vw;
  left: -7vw;
}

.dj__obj--r {
  width: 20.6vw;
  bottom: 5vw;
  right: -10vw;
}

/* グリーン・ローズ */
.fragrance__btn--gr {
  width: 40.6vw;
  top: 26vw;
  left: 0.5vw;
}

.gr__obj--l {
  width: 17.8vw;
  top: -5vw;
  left: -5vw;
}

.gr__obj--r {
  width: 17vw;
  right: -6vw;
  bottom: 12vw;
}

/* パチュリ・ラベンダー・バニラ */
.fragrance__btn--plv {
  width: 42.9vw;
  bottom: 17vw;
  left: -1.5vw;
}

.plv__obj--l {
  width: 34vw;
  top: -2vw;
  left: -13vw;
}

.plv__obj--r {
  width: 20.4vw;
  right: -7vw;
  bottom: -5vw;
}

/* ローズ・ティー */
.fragrance__btn--rt {
  width: 36.9vw;
  bottom: 20vw;
  right: 3.2vw;
}

.rt__obj--l {
  width: 23.5vw;
  top: -4vw;
  left: -7vw;
}

.rt__obj--r {
  width: 20.4vw;
  right: -7vw;
  bottom: 18vw;
}

/* TOKYO */
.fragrance__btn--tk {
  width: 39vw;
  top: 26vw;
  right: 2vw;
}

.tk__obj--l {
  width: 17.8vw;
  top: -2vw;
  left: -2vw;
}

.tk__obj--r {
  width: 15.8vw;
  right: -5vw;
  bottom: 12vw;
}

.fra__line {
  width: 46.6vw;
  margin: 3.3vw auto 0;
}

/* =======================
          story
======================= */
.story {
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/bg_story.jpg);
}

.story__inner {
  padding: 12.9vw 0 14.6vw;
}

.name__label {
  width: 77.9vw;
  margin: 3.8vw auto 0;
}

.story__sub-title {
  font-size: 4.5vw;
  line-height: 1.4;
}

.story__text {
  width: 80.7vw;
  font-size: 3.6vw;
  line-height: 1.4;
  text-align: justify;
}

.reason-more-btn {
  bottom: 0;
}

.reason-more-btn a {
  width: 40vw;
  font-size: 4vw;
  padding: 4vw 0;
}

.reason-more-btn a .icon {
  font-size: 6vw;
  right: 2vw;
}

.rb-text-list {
  margin: 2.3vw auto 0;
}

.rb-text-list .reason-close-btn {
  bottom: 0;
}

.reason-close-btn a {
  font-size: 4vw;
  padding-left: 6vw;
}

.reason-close-btn a .icon {
  font-size: 5vw;
}

#rb1 {
  height: 17vw;
}

#rb1.open {
  height: 120vw;
}

/* =======================
      How to Use
======================= */
.how-to-use__inner {
  padding: 10.5vw 0 14.2vw;
}

.how-to-use__sub-title {
  font-size: 4vw;
  line-height: 1.3;
  margin-top: 3.8vw;
}

.how-to-use-title__obj {
  margin-top: 3.7vw;
}

.step__bg1 {
  width: 71.4vw;
  top: 42.3vw;
  left: inherit;
  right: 0;
}

.step__bg2 {
  width: 62vw;
  top: 117.6vw;
  left: 0;
}

.step__bg3 {
  width: 69.9vw;
  top: 179vw;
  left: inherit;
  right: 0;
}

.how-to-use__wrapper {
  width: 89.9vw;
  margin: 6.3vw auto 0;
}

.step__title {
  font-size: 4.5vw;
  padding: 1.2vw 0 0 3.3vw;
}

.step__title--num {
  font-size: 6.7vw;
}

.step__wrapper {
  column-gap: 0;
  margin-top: 5vw;
}

.step__img {
  width: 34vw;
  position: absolute;
}

.step__img1,
.step__img3 {
  left: 3.9vw;
}

.step__img2 {
  right: 3.9vw;
}

.step-text__wrapper {
  position: relative;
  z-index: 50;
}

.step-text__wrapper1 {
  padding-top: 5vw;
}

.step-text__wrapper2,
.step-text__wrapper3 {
  padding-top: 9vw;
}

.step-main__title {
  font-size: 5.8vw;
  text-align: center;
}

.step-main__title--aj {
  line-height: 1.3;
}

.step-main__title1 {
  margin-left: 35vw;
}

.step-main__title2 {
  margin-right: 63vw;
}

.step-main__title3 {
  margin-left: 38vw;
}

.step__text {
  width: 83vw;
  font-size: 3.6vw;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.step__text1 {
  margin-top: 8vw;
}

.step__text2,
.step__text3 {
  margin-top: 14vw;
}

.step__text span {
  margin-top: 2.2vw;
}

.line {
  width: 91.6vw;
  margin: 6.7vw auto 0;
}

/* =======================
        Movie
======================= */
.movie__inner {
  padding: 7.9vw 0 0;
}

.movie-title__obj {
  margin-top: 4.5vw;
}

.youtube {
  width: 89.4vw;
  height: 50.2vw;
  margin: 3.6vw auto 0;
}

/* =======================
        Campaign
======================= */
.campaign {
  background-image: url(../../../images/sp/special_contents/ShowerOil/20260423/bg_campaign.jpg);
}

.campaign__inner {
  padding: 10.3vw 0 11.2vw;
}

.campaign__detail-wrapper {
  width: 91.5vw;
  border-radius: 20px;
  margin: 5.8vw auto 0;
  padding: 5.5vw 0 9.6vw;
}

.campaign__label {
  width: 45.5vw;
}

.campaign__date {
  font-size: 5vw;
  margin: 2.5vw auto 0;
}

.campaign__date::before,
.campaign__date::after {
  width: 4vw;
  height: 7.3vw;
  background-size: contain;
}

.campaign__date::before {
  left: -30px;
}

.campaign__date::after {
  right: -30px;
}

.campaign__date span {
  font-size: 3.9vw;
}

.campaign__contents {
  margin-top: 4.6vw;
}

.campaign__detail {
  flex-direction: column;
  column-gap: 0;
  row-gap: 4.5vw;
}

.campaign-text__s {
  font-size: 4vw;
  line-height: 1.4;
}

.campaign-text__l {
  font-size: 5.7vw;
  margin-top: 2.2vw;
}

.campaign-text__l span {
  font-size: 4vw;
}

.campaign__img {
  width: 37.4vw;
}

.comment {
  width: 30.9vw;
  top: 1.5vw;
  left: -22vw;
}

.sc-accordion__title {
  font-size: 3.6vw;
}

.sc-comment__list {
  font-size: 2.7vw;
  text-align-last: left;
  padding: 6.2vw 5.5vw 6.2vw 5vw;
}

.sc-accordion__wrapper {
  width: 83.5vw;
  margin: 5.1vw auto 0;
}

.sc-accordion {
  margin-top: 0;
  padding: 2.8vw 0;
}

.common-icon {
  font-size: 7vw;
  position: absolute;
  top: 52%;
  right: 2vw;
  transform: translateY(-52%);
  -webkit-transform: translateY(-52%);
}

.pagetop {
  bottom: 11px;
  left: 11px;
}

.pagetop .pagetop-link a:hover {
  opacity: 1;
}