@charset "UTF-8";
/* font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Zen+Kurenaido&display=swap");
/* レスポンシブ消去
-------------------------------------------------- */
.user_voice .pcB {
  display: none;
}
@media screen and (min-width: 641px) {
  .user_voice .pcB {
    display: block;
  }
}
.user_voice .spB {
  display: block;
}
@media screen and (min-width: 641px) {
  .user_voice .spB {
    display: none;
  }
}
.user_voice .pcI {
  display: none;
}
@media screen and (min-width: 641px) {
  .user_voice .pcI {
    display: inline;
  }
}
.user_voice .spI {
  display: inline;
}
@media screen and (min-width: 641px) {
  .user_voice .spI {
    display: none;
  }
}

/* 相殺
-------------------------------------------------- */
.block-contents-1 {
  margin: initial !important;
  width: initial !important;
}

.block-h1 {
  padding: initial !important;
}

h1 {
  box-sizing: initial !important;
  -webkit-box-shadow: initial !important;
}

h3 {
  background: initial;
}

/* 共通
-------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
}
@media screen and (max-width: 640px) {
  html {
    scroll-padding-top: 118px;
  }
}

.user_voice {
  background-color: #fff;
  font-family: "Noto Serif JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Montserrat", sans-serif;
}
.user_voice img {
  width: 100%;
}
.user_voice .inner {
  margin: 0 auto;
  width: min(62.5dvw, 1200px);
}
@media screen and (max-width: 640px) {
  .user_voice .inner {
    width: 89.33334dvw;
  }
}

/* kv
-------------------------------------------------- */
.user_voice .kv h1 {
  border: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1920px;
}
.user_voice .kv h1:after {
  content: none !important;
}

/* about
-------------------------------------------------- */
.user_voice .about {
  background-image: url("/-/media/obagi/promotion/user_voice/bg_about_pc.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 640px) {
  .user_voice .about {
    background-image: url("/-/media/obagi/promotion/user_voice/bg_about_sp.svg");
  }
}
.user_voice .about__inner {
  margin: 0 auto;
  padding: min(6.51042dvw, 125px) 0;
}
@media screen and (max-width: 640px) {
  .user_voice .about__inner {
    padding: 11.06667dvw 0;
  }
}
.user_voice .about__txt {
  color: #CC387D;
  font-size: min(1.5625dvw, 30px);
  font-weight: 700;
  line-height: 2.3334;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .user_voice .about__txt {
    font-size: 4dvw;
    font-weight: 600;
    line-height: 2.3334;
  }
}
.user_voice .about__logo {
  margin: min(1.51042dvw, 29px) auto 0;
  width: min(6.66667dvw, 128px);
}
@media screen and (max-width: 640px) {
  .user_voice .about__logo {
    margin: 2dvw auto 0;
    width: 16.8dvw;
  }
}

/* anchorNavi
-------------------------------------------------- */
.user_voice .anchorNavi__inner {
  margin: 0 auto;
  padding: min(4.63542dvw, 89px) 0 min(2.08334dvw, 40px);
}
@media screen and (max-width: 640px) {
  .user_voice .anchorNavi__inner {
    padding: 10.66667dvw 0 4dvw;
  }
}
.user_voice .anchorNavi__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(1.5625dvw, 30px) min(2.08334dvw, 40px);
  margin: 0 auto;
  width: min(36.66667dvw, 704px);
}
@media screen and (max-width: 640px) {
  .user_voice .anchorNavi__list {
    gap: 1.6dvw 1.86667dvw;
    width: auto;
  }
}
.user_voice .anchorNavi__list li {
  width: min(17.29167dvw, 332px);
}
@media screen and (max-width: 640px) {
  .user_voice .anchorNavi__list li {
    width: 43.73334dvw;
  }
}
.user_voice .anchorNavi__list li a {
  display: block;
  filter: drop-shadow(min(0.15625dvw, 3px) min(0.15625dvw, 3px) min(0.26042dvw, 5px) rgba(0, 0, 0, 0.3));
}
@media screen and (max-width: 640px) {
  .user_voice .anchorNavi__list li a {
    filter: drop-shadow(0.4dvw 0.4dvw 0.66667dvw rgba(0, 0, 0, 0.3));
  }
}

/* tvCm
-------------------------------------------------- */
.user_voice .tvCm {
  background-image: url("/-/media/obagi/promotion/user_voice/bg_tvCm_pc.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 640px) {
  .user_voice .tvCm {
    background-image: url("/-/media/obagi/promotion/user_voice/bg_tvCm_sp.svg");
  }
}
.user_voice .tvCm__inner {
  margin: 0 auto;
  padding: min(11.04167dvw, 212px) 0 min(12.44792dvw, 239px);
}
@media screen and (max-width: 640px) {
  .user_voice .tvCm__inner {
    padding: 18.93334dvw 0 25.2dvw;
  }
}
.user_voice .tvCm__ttl {
  color: #fff;
  font-family: "Noto Serif JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Montserrat", sans-serif;
  font-size: min(2.60417dvw, 50px);
  font-weight: 700;
  letter-spacing: -0.001em;
  line-height: 1.28;
  text-align: center;
  padding: min(2.5dvw, 48px) 0 0;
  margin: max(-2.5dvw, -48px) 0 min(3.02084dvw, 58px);
}
@media screen and (max-width: 640px) {
  .user_voice .tvCm__ttl {
    font-size: 6.66667dvw;
    line-height: 1.32;
    margin: -5.33333dvw 0 7.06667dvw;
    padding: 5.33334dvw 0 0;
  }
}
.user_voice .tvCm__video {
  margin: 0 auto;
  width: min(54.16667dvw, 1040px);
  aspect-ratio: 16/9;
}
@media screen and (max-width: 640px) {
  .user_voice .tvCm__video {
    width: auto;
  }
}
.user_voice .tvCm__video iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

/* webMovie
-------------------------------------------------- */
.user_voice .webMovie__inner {
  margin: 0 auto;
  padding: min(2.5dvw, 48px) 0 min(8.80209dvw, 169px);
}
@media screen and (max-width: 640px) {
  .user_voice .webMovie__inner {
    padding: 11.2dvw 0 16.26667dvw;
  }
}
.user_voice .webMovie__ttl {
  color: #CC387D;
  font-family: "Noto Serif JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Montserrat", sans-serif;
  font-size: min(2.60417dvw, 50px);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  margin: 0 0 min(4.6875dvw, 90px);
  padding: 0;
}
@media screen and (max-width: 640px) {
  .user_voice .webMovie__ttl {
    font-size: 6.66667dvw;
    letter-spacing: -0.01em;
    line-height: 1.32;
    margin: 0 0 7.06667dvw;
  }
}
.user_voice .webMovie__videoWrap {
  position: relative;
  width: 100%;
}
.user_voice .webMovie__videoWrap .video {
  margin: 0 auto;
  height: min(35.88542dvw, 689px);
  width: min(20.20834dvw, 388px);
}
@media screen and (max-width: 640px) {
  .user_voice .webMovie__videoWrap .video {
    height: 110.93334dvw;
    width: 62.4dvw;
  }
}
.user_voice .webMovie__videoWrap .video iframe {
  height: 100%;
  width: 100%;
}
.user_voice .speechBubbleWrap {
  height: auto;
  width: 100%;
}
@media screen and (max-width: 640px) {
  .user_voice .speechBubbleWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.53334dvw 1.86667dvw;
    margin: 3.73334dvw -1.33333dvw 0;
    width: auto;
  }
}
.user_voice .speechBubbleWrap .speechBubble {
  position: absolute;
  width: min(20.83334dvw, 400px);
}
@media screen and (max-width: 640px) {
  .user_voice .speechBubbleWrap .speechBubble {
    position: initial;
  }
}
@media screen and (min-width: 641px) {
  .user_voice .speechBubbleWrap .speechBubble:nth-of-type(1) {
    top: min(2.44792dvw, 47px);
    left: 0;
  }
}
@media screen and (max-width: 640px) {
  .user_voice .speechBubbleWrap .speechBubble:nth-of-type(1) {
    width: 43.73334dvw;
  }
}
@media screen and (min-width: 641px) {
  .user_voice .speechBubbleWrap .speechBubble:nth-of-type(2) {
    top: min(21.25dvw, 408px);
    left: 0;
  }
}
@media screen and (max-width: 640px) {
  .user_voice .speechBubbleWrap .speechBubble:nth-of-type(2) {
    width: 45.86667dvw;
  }
}
@media screen and (min-width: 641px) {
  .user_voice .speechBubbleWrap .speechBubble:nth-of-type(3) {
    top: min(14.16667dvw, 272px);
    right: 0;
  }
}
@media screen and (max-width: 640px) {
  .user_voice .speechBubbleWrap .speechBubble:nth-of-type(3) {
    width: 47.73334dvw;
  }
}

/* review
-------------------------------------------------- */
.user_voice .review__inner {
  margin: 0 auto;
  max-width: 1920px;
}
.user_voice .review__topWrap {
  background-image: url("/-/media/obagi/promotion/user_voice/bg_review_pc.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: min(6.35417dvw, 122px) 0 min(5.20834dvw, 100px);
}
@media screen and (max-width: 640px) {
  .user_voice .review__topWrap {
    background-image: url("/-/media/obagi/promotion/user_voice/bg_review_sp.svg");
    padding: 14.93334dvw 0 13.33334dvw;
  }
}
.user_voice .review__bottomWrap {
  background-color: #fff;
  padding: min(5.20834dvw, 100px) 0 min(0.88542dvw, 17px);
}
@media screen and (max-width: 640px) {
  .user_voice .review__bottomWrap {
    padding: 13.33334dvw 0;
  }
}
.user_voice .review__ttl {
  margin: 0 auto min(2.96875dvw, 57px);
  padding: 0;
  width: min(35.88542dvw, 689px);
}
@media screen and (max-width: 640px) {
  .user_voice .review__ttl {
    margin: 0 auto 8.8dvw;
    width: 92.8dvw;
  }
}
.user_voice .review__list {
  display: flex;
  flex-direction: column;
  gap: min(5.20834dvw, 100px) 0;
  margin: 0 auto;
  width: min(62.5dvw, 1200px);
}
@media screen and (max-width: 640px) {
  .user_voice .review__list {
    gap: 13.33334dvw 0;
    width: 89.33334dvw;
  }
}
.user_voice .review__list__ttl {
  margin: 0 auto min(1.04167dvw, 20px);
  padding: 0;
  width: min(36.45834dvw, 700px);
}
@media screen and (max-width: 640px) {
  .user_voice .review__list__ttl {
    margin: 0 auto 4dvw;
    width: 93.6dvw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.user_voice .review__note {
  color: #8E8E8E;
  font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: min(0.72917dvw, 14px);
  line-height: 1.4286;
  text-align: right;
  margin: min(3.80209dvw, 73px) auto 0;
  width: min(62.5dvw, 1200px);
}
@media screen and (max-width: 640px) {
  .user_voice .review__note {
    font-size: 2.66667dvw;
    line-height: 1.45;
    text-align: center;
    margin-top: 12.8dvw;
    width: auto;
  }
}

/* swiper
-------------------------------------------------- */
.carousel {
  position: relative;
}
@media screen and (max-width: 640px) {
  .carousel {
    margin: 0 auto;
    width: 89.33334dvw;
  }
}

.swiper {
  width: min(48.28125dvw, 927px);
}
@media screen and (max-width: 640px) {
  .swiper {
    width: auto;
  }
}

.swiper-slide {
  box-sizing: border-box;
  padding: 0 min(1.30209dvw, 25px);
  width: min(39.6875dvw, 762px) !important;
}
@media screen and (max-width: 640px) {
  .swiper-slide {
    padding: 0 5.33334dvw;
    width: 89.73334dvw !important;
  }
}

.swiper-navWrap {
  margin-top: min(0.72917dvw, 14px);
}
@media screen and (max-width: 640px) {
  .swiper-navWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8dvw;
  }
}

.swiper-paginationWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 min(1.5625dvw, 30px);
}
@media screen and (max-width: 640px) {
  .swiper-paginationWrap {
    gap: 0 3.73334dvw;
  }
}

.swiper-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: min(0.9375dvw, 18px);
}
@media screen and (max-width: 640px) {
  .swiper-pagination {
    gap: 2.13334dvw;
  }
}
.swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  border: min(0.10417dvw, 2px) solid #F37C9D;
  border-radius: 50%;
  cursor: pointer;
  height: min(0.72917dvw, 14px);
  width: min(0.72917dvw, 14px);
}
@media screen and (max-width: 640px) {
  .swiper-pagination .swiper-pagination-bullet {
    border: 0.26667dvw solid #F37C9D;
    height: 2.66667dvw;
    width: 2.66667dvw;
  }
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #F37C9D;
}

.swiper-playButton {
  cursor: pointer;
  background-color: initial;
  border: none;
  padding: 0;
}
.swiper-playButton .stop {
  display: block;
  height: min(1.35417dvw, 26px);
}
@media screen and (max-width: 640px) {
  .swiper-playButton .stop {
    height: 4.53334dvw;
  }
}
.swiper-playButton .start {
  display: block;
  height: min(1.35417dvw, 26px);
}
@media screen and (max-width: 640px) {
  .swiper-playButton .start {
    height: 4.53334dvw;
  }
}
.swiper-playButton .is-hide {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  background-color: initial;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media screen and (min-width: 641px) {
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: calc(50% - min(2.08334dvw, 40px));
    transform: translateY(-50%);
    width: min(3.75dvw, 72px);
  }
}
@media screen and (max-width: 640px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 9.33334dvw;
  }
}
.swiper-button-prev > svg,
.swiper-button-next > svg {
  display: none;
}

@media screen and (min-width: 641px) {
  .swiper-button-next {
    right: 0;
  }
}

.innerLine .swiper-pagination-bullet {
  border-color: #FF9B34;
}
.innerLine .swiper-pagination-bullet-active {
  background-color: #FF9B34;
}

/* interview
-------------------------------------------------- */
.user_voice .interview {
  margin-top: min(1.45834dvw, 28px);
}
@media screen and (max-width: 640px) {
  .user_voice .interview {
    margin-top: 2.13334dvw;
  }
}
.user_voice .interview__inner {
  margin: 0 auto;
  padding: min(8.64584dvw, 166px) 0;
  width: min(54.16667dvw, 1040px);
}
@media screen and (max-width: 640px) {
  .user_voice .interview__inner {
    padding: 6.66667dvw 0;
    width: 89.33334dvw;
  }
}
.user_voice .interview .bnr {
  margin: 0 auto;
  width: min(54.16667dvw, 1040px);
}
@media screen and (max-width: 640px) {
  .user_voice .interview .bnr {
    width: auto;
  }
}
.user_voice .interview .bnr a {
  display: block;
  filter: drop-shadow(min(0.15625dvw, 3px) min(0.15625dvw, 3px) min(0.26042dvw, 5px) rgba(0, 0, 0, 0.3));
}
@media screen and (max-width: 640px) {
  .user_voice .interview .bnr a {
    filter: drop-shadow(0.4dvw 0.4dvw 0.66667dvw rgba(0, 0, 0, 0.3));
  }
}