.fz-d-100 {
  font-size: calc(100vw * (100 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-100 {
    font-size: 100px;
  }
}

.fz-d-90 {
  font-size: calc(100vw * (90 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-90 {
    font-size: 90px;
  }
}

.fz-d-70 {
  font-size: calc(100vw * (70 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-70 {
    font-size: 70px;
  }
}

.fz-d-60 {
  font-size: calc(100vw * (60 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-60 {
    font-size: 60px;
  }
}

.fz-d-65 {
  font-size: calc(100vw * (65 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-65 {
    font-size: 65px;
  }
}

.fz-d-50 {
  font-size: calc(100vw * (50 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-50 {
    font-size: 50px;
  }
}

.fz-d-35 {
  font-size: calc(100vw * (35 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-35 {
    font-size: 35px;
  }
}

.fz-d-32 {
  font-size: calc(100vw * (32 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-32 {
    font-size: 32px;
  }
}

.fz-d-30 {
  font-size: calc(100vw * (30 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-30 {
    font-size: 30px;
  }
}

.fz-d-28 {
  font-size: calc(100vw * (28 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-28 {
    font-size: 28px;
  }
}

.fz-d-26 {
  font-size: calc(100vw * (26 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-26 {
    font-size: 26px;
  }
}

.fz-d-22 {
  font-size: calc(100vw * (22 / 1000));
}
@media (min-width: 1000px) {
  .fz-d-22 {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .fz-m-60 {
    font-size: calc(100vw * (60 / 375));
  }

  .fz-m-55 {
    font-size: calc(100vw * (55 / 375));
  }

  .fz-m-48 {
    font-size: calc(100vw * (48 / 375));
  }

  .fz-m-45 {
    font-size: calc(100vw * (45 / 375));
  }

  .fz-m-42 {
    font-size: calc(100vw * (42 / 375));
  }

  .fz-m-36 {
    font-size: calc(100vw * (36 / 375));
  }

  .fz-m-35 {
    font-size: calc(100vw * (35 / 375));
  }

  .fz-m-30 {
    font-size: calc(100vw * (30 / 375));
  }

  .fz-m-28 {
    font-size: calc(100vw * (28 / 375));
  }

  .fz-m-26 {
    font-size: calc(100vw * (26 / 375));
  }

  .fz-m-25 {
    font-size: calc(100vw * (25 / 375));
  }

  .fz-m-24 {
    font-size: calc(100vw * (24 / 375));
  }

  .fz-m-23 {
    font-size: calc(100vw * (23 / 375));
  }

  .fz-m-20 {
    font-size: calc(100vw * (20 / 375));
  }

  .fz-m-17 {
    font-size: calc(100vw * (17 / 375));
  }
}
.invisible.visible {
  visibility: visible !important;
}

.spotlight-item-view .container {
  overflow-x: visible;
}

.flex-media {
  display: flex;
  align-items: flex-start;
}

.flex-media .body {
  flex: 1;
}

.btn-user-review,
.shopping-link {
  background-color: white;
  border: 1px solid #FFCC06;
  color: #16234C;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  outline: 0;
  padding: 10px 50px;
  border-radius: 0;
  cursor: pointer;
}
@media (max-width: 767px) {
  .btn-user-review,
.shopping-link {
    padding: 5px 40px;
  }
}
.btn-user-review:visited,
.shopping-link:visited {
  color: #16234C;
}

.border-main-color {
  border: 2px solid var(--main-color);
}

.border-main-bottom {
  border-bottom: 10px solid var(--main-color);
}

.w-20 {
  width: 20% !important;
}

.mw-100vw {
  max-width: 100vw;
}

.mw-1280px {
  max-width: 1280px;
}

.mw-1140px {
  max-width: 1140px;
}

.mw-1000px {
  max-width: 1000px;
}

.text-fat {
  transform: scale(1, 0.85);
}

ul.disc-ul,
ul.outline-ul {
  padding-left: 9%;
}
ul.disc-ul li,
ul.outline-ul li {
  position: relative;
}
ul.disc-ul li:before,
ul.outline-ul li:before {
  content: "●";
  position: absolute;
  margin-left: -9%;
}

ul.outline-ul li {
  position: relative;
}
ul.outline-ul li:before {
  content: "◦";
}

.over-width {
  margin-left: calc(-1 * (50vw - 360px));
  margin-right: calc(-1 * (50vw - 360px));
}

@media (min-width: 1440px) {
  .over-width {
    margin-left: calc(-1 * (720px - 360px));
    margin-right: calc(-1 * (720px - 360px));
  }
}
@media (max-width: 991px) {
  .over-width {
    margin-left: calc(-1 * (50vw - 285px));
    margin-right: calc(-1 * (50vw - 285px));
  }
}
@media (max-width: 600px) {
  .over-width {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media (max-width: 581px) {
  .over-width .container .wrapper {
    max-width: 100vw;
  }

  .over-width > .container > .wrapper:not(.px-0) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
br.d {
  display: inline;
}
@media (max-width: 767px) {
  br.d {
    display: none;
  }
}
br.m {
  display: none;
}
@media (max-width: 767px) {
  br.m {
    display: inline;
  }
}

hr.v {
  border: none;
  border-left-style: solid;
  border-left-width: 1px;
  height: 100%;
  min-height: 2rem;
  width: 1px;
}

.between-line {
  display: inline-block;
  position: relative;
}
.between-line:before, .between-line:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
  top: 50%;
  width: 50vw;
}
.between-line:before {
  right: 100%;
  margin-right: 15px;
}
.between-line:after {
  left: 100%;
  margin-left: 15px;
}

.cover.over-width {
  background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/1440/head___1.png") top center no-repeat;
  background-size: 100% auto;
  height: calc(100vw * 1128/1440);
}
@media (min-width: 1440px) {
  .cover.over-width {
    height: 1128px;
    background-size: 1440px auto;
  }
}
@media (max-width: 767px) {
  .cover.over-width {
    background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/375/head_2x.png") top center no-repeat;
    background-size: 100% auto;
    height: calc(100vw * 598/375);
  }
}
.cover.over-width .title-top {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: calc(100vw * 400/1440);
}
@media (min-width: 1440px) {
  .cover.over-width .title-top {
    height: 400px;
  }
}
@media (max-width: 767px) {
  .cover.over-width .title-top {
    height: calc(100vw * 200/375);
  }
}
.cover.over-width .title-top .logo {
  width: calc(100vw * 215/1000);
}
@media (min-width: 1000px) {
  .cover.over-width .title-top .logo {
    width: 215px;
  }
}
@media (max-width: 767px) {
  .cover.over-width .title-top .logo {
    width: calc(100vw * 100/375);
  }
}
.cover.over-width .title-top h1 {
  color: #FFCC06;
  line-height: 1;
}
.cover.over-width .title-top h1.d-block {
  line-height: 0.75;
}
.cover.over-width .title-top h2 {
  color: white;
  font-weight: normal;
  line-height: 1;
}
.cover.over-width .title-bottom {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: calc(100vw * 200/1440);
}
@media (min-width: 1440px) {
  .cover.over-width .title-bottom {
    height: 200px;
  }
}
@media (max-width: 767px) {
  .cover.over-width .title-bottom {
    height: calc(100vw * 110/375);
  }
}
.cover.over-width .title-bottom h2 {
  color: #FFCC06;
  line-height: 0.8;
}
@media (max-width: 767px) {
  .cover.over-width .title-bottom h2 {
    line-height: 0.8;
  }
}
.cover.over-width .title-bottom h3 {
  color: white;
  font-weight: normal;
  line-height: 0.8;
}
@media (max-width: 767px) {
  .cover.over-width .title-bottom h3 {
    line-height: 0.8;
  }
}

#section-1 p {
  color: #16234C;
}
#section-1 hr {
  border-color: #16234C;
  min-height: calc(100vw * 75/1000);
}
@media (min-width: 1000px) {
  #section-1 hr {
    min-height: 75px;
  }
}
@media (max-width: 767px) {
  #section-1 hr {
    min-height: calc(100vw * 40/375);
  }
}

#section-2 {
  color: white;
  background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/1440/section-2-bg.jpg") top center no-repeat;
  background-size: 100% auto;
  height: calc(100vw * 900/1440);
}
@media (min-width: 1440px) {
  #section-2 {
    height: 900px;
    background-size: 1440px auto;
  }
}
@media (max-width: 767px) {
  #section-2 {
    background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/375/section-2-bg.jpg") top center no-repeat;
    background-size: 100% auto;
    height: calc(100vw * 520/375);
  }
}
#section-2 .inner-box {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
#section-2 .blue-box {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  top: calc(100vw * 340/1440);
  left: calc(100vw * 190/1440);
  height: calc(100vw * 402/1440);
  width: calc(100vw * 1060/1440);
}
@media (min-width: 1440px) {
  #section-2 .blue-box {
    top: 340px;
    height: 402px;
    left: 190px;
    width: 1060px;
  }
}
@media (max-width: 767px) {
  #section-2 .blue-box {
    top: calc(100vw * 125/375);
    left: 0;
    height: calc(100vw * 330/375);
    width: 100%;
  }
}

#section-3 {
  background: #16234C;
}
#section-3 h2, #section-3 h3 {
  line-height: 0.9;
  margin: 0;
}
#section-3 h2 {
  color: #FFCC06;
}
#section-3 h2:before, #section-3 h2:after {
  border-color: #FFCC06;
}
@media (max-width: 767px) {
  #section-3 h2:before, #section-3 h2:after {
    top: 75%;
  }
  #section-3 h2:before {
    right: 85%;
    margin-right: unset;
  }
  #section-3 h2:after {
    left: 85%;
    margin-left: unset;
  }
}
#section-3 .bubble-1,
#section-3 .bubble-2,
#section-3 .bubble-3 {
  color: #16234C;
  text-align: left;
  position: relative;
}
#section-3 .bubble-1:before,
#section-3 .bubble-2:before,
#section-3 .bubble-3:before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
}
#section-3 .bubble-1:after,
#section-3 .bubble-2:after,
#section-3 .bubble-3:after {
  /* to clear float */
  content: "";
  display: table;
  clear: both;
}
#section-3 .bubble-1 .inner,
#section-3 .bubble-2 .inner,
#section-3 .bubble-3 .inner {
  position: absolute;
}
#section-3 .bubble-1 .inner strong,
#section-3 .bubble-2 .inner strong,
#section-3 .bubble-3 .inner strong {
  font-family: "DB-Heavent-reg" !important;
  line-height: 1;
  font-size: 120%;
}
#section-3 .bubble-1 {
  background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/1440/bubble-1.png") top center no-repeat;
  background-size: contain;
  width: 65%;
}
#section-3 .bubble-1:before {
  padding-top: 75%;
}
#section-3 .bubble-1 .inner {
  top: 15%;
  left: 31%;
  width: 50%;
}
#section-3 .bubble-1 .inner li:not(:last-child) {
  margin-bottom: 4%;
}
#section-3 .bubble-2 {
  background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/1440/bubble-2.png") top center no-repeat;
  background-size: contain;
  width: 75%;
  margin-top: -17.5%;
}
#section-3 .bubble-2:before {
  padding-top: 78.3333333333%;
}
#section-3 .bubble-2 .inner {
  top: 15%;
  left: 18%;
  width: 52%;
}
#section-3 .bubble-2 .inner ul.outline-ul {
  margin-top: 4%;
}
#section-3 .bubble-3 {
  background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/1440/bubble-3.png") top center no-repeat;
  background-size: contain;
  width: 45%;
  margin-top: -22.5%;
  margin-right: 7.5%;
}
#section-3 .bubble-3:before {
  padding-top: 99.1666666667%;
}
#section-3 .bubble-3 .inner {
  top: 15%;
  left: 23%;
  width: 65%;
  height: 62.5%;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  #section-3 .wrapper {
    padding: 0 !important;
  }
  #section-3 .bubble-1 .inner strong,
#section-3 .bubble-2 .inner strong,
#section-3 .bubble-3 .inner strong {
    font-size: 104% !important;
  }
  #section-3 .bubble-1 {
    background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/375/bubble-1.png") top center no-repeat;
    background-size: contain;
    width: 100%;
    margin-right: -2.5%;
  }
  #section-3 .bubble-1:before {
    padding-top: 100%;
  }
  #section-3 .bubble-1 .inner {
    top: 15%;
    left: 26%;
    width: 60%;
  }
  #section-3 .bubble-1 .inner li:not(:last-child) {
    margin-bottom: 5%;
  }
  #section-3 .bubble-2 {
    background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/375/bubble-2.png") top center no-repeat;
    background-size: contain;
    width: 114%;
    margin-left: -17.5%;
    margin-top: -7.5%;
  }
  #section-3 .bubble-2:before {
    padding-top: 100.5%;
  }
  #section-3 .bubble-2 .inner {
    top: 11%;
    left: 27%;
    width: 62%;
  }
  #section-3 .bubble-2 .inner ul.outline-ul {
    margin-top: 5%;
  }
  #section-3 .bubble-3 {
    background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/375/bubble-3.png") top center no-repeat;
    background-size: contain;
    width: 95%;
    margin-top: unset;
    margin-right: 7.5%;
    margin-top: -7.5%;
  }
  #section-3 .bubble-3:before {
    padding-top: 100%;
  }
  #section-3 .bubble-3 .inner {
    top: 15%;
    left: 23%;
    width: 65%;
    height: 62.5%;
    display: flex;
    align-items: center;
  }
}

#section-4 {
  background: #16234C;
}
#section-4 h2, #section-4 h3 {
  line-height: 0.9;
  margin: 0;
}
#section-4 h2 {
  color: #FFCC06;
}
#section-4 h2:before, #section-4 h2:after {
  border-color: #FFCC06;
}
#section-4 .flex-media .image {
  width: 32.5%;
}
#section-4 .flex-media .image img {
  margin-left: -30%;
  margin-right: -10%;
  max-width: 140%;
  margin-bottom: -95%;
  height: auto;
}
#section-4 .flex-media .body {
  margin-top: 10%;
}
@media (max-width: 767px) {
  #section-4 .flex-media .image {
    width: 100%;
  }
  #section-4 .flex-media .image img {
    margin-left: unset;
    margin-right: unset;
    margin-bottom: -45%;
    max-width: 75%;
  }
  #section-4 .flex-media .body {
    display: none;
  }
}

#section-4 .card,
#section-5 .card {
  color: #16234C;
  border-color: #FFCC06;
  border-radius: 0;
  margin-bottom: 25px;
}
#section-4 .card.dark,
#section-5 .card.dark {
  background: #16234C;
}
#section-4 .card.dark .card-body,
#section-5 .card.dark .card-body {
  color: white;
}
#section-4 .card.dark .btn-user-review,
#section-5 .card.dark .btn-user-review {
  background: #16234C;
  color: white;
}
#section-4 .card.dark .btn-user-review:visited,
#section-5 .card.dark .btn-user-review:visited {
  color: white;
}
@media (max-width: 767px) {
  #section-4 .card,
#section-5 .card {
    margin-top: calc((100vw * (20/49)) - 73.061224489795918px);
    margin-bottom: calc((100vw * 0.048469387755102) - 2.176020408163265px + 5px);
  }
}
#section-4 .card .card-header,
#section-5 .card .card-header {
  background: #FFCC06;
  border-radius: 0;
}
@media (max-width: 767px) {
  #section-4 .card .card-header,
#section-5 .card .card-header {
    padding: 0.25rem 0;
  }
}
#section-4 .card .card-footer,
#section-5 .card .card-footer {
  border: none;
  background: none;
  padding: 0;
  height: 20px;
}
@media (max-width: 767px) {
  #section-4 .card .card-footer,
#section-5 .card .card-footer {
    height: calc((100vw * 0.048469387755102) - 2.176020408163265px);
  }
}

#section-5 div.bullets {
  margin-left: auto;
  width: 67.5%;
  color: #16234C;
}
@media (max-width: 767px) {
  #section-5 div.bullets {
    margin-left: unset;
    width: unset;
  }
}

#section-6 .container:first-child {
  border-color: #FFCC06;
  border-width: calc((100vw * 0.022535211267606) - 0.450704225352113px);
  border-style: none solid;
}
@media (min-width: 1440px) {
  #section-6 .container:first-child {
    border-width: 32px;
  }
}
#section-6 .wrapper p {
  color: #16234C;
}
#section-6 .flex-media h3 {
  font-size: calc(100vw * 250 / 1000);
  line-height: 0.25;
  color: #FFCC06;
  margin-left: 2.5%;
}
@media (min-width: 1000px) {
  #section-6 .flex-media h3 {
    font-size: 250px;
  }
}
@media (max-width: 767px) {
  #section-6 .flex-media h3 {
    font-size: calc(100vw * 200/375);
  }
}
#section-6 .flex-media .body {
  line-height: 0.85;
  color: #16234C;
  margin-left: 2.5%;
  white-space: nowrap;
}

#section-7 {
  background: #16234C;
  position: relative;
  padding-bottom: 5%;
}
#section-7:before {
  position: absolute;
  content: "";
  background: white;
  left: 0;
  right: 0;
  height: calc((100vw * 0.04) + 45px);
}
@media (min-width: 1000px) {
  #section-7:before {
    height: 85px;
  }
}
@media (max-width: 767px) {
  #section-7:before {
    display: none;
  }
}
@media (max-width: 767px) {
  #section-7 {
    padding-top: 5%;
  }
}
#section-7 .card {
  border: none;
  border-radius: 0;
  width: 80%;
  margin: 5% auto;
}
#section-7 .card img {
  border-radius: 0;
}
#section-7 .card .card-body {
  line-height: 1.3;
  color: #16234C;
}
#section-7 .card .card-body h5 {
  font-family: "DB-Heavent-reg" !important;
  margin: 0;
}
@media (max-width: 767px) {
  #section-7 .card {
    width: 90%;
    margin: 8% auto;
  }
  #section-7 .card:nth-child(odd) {
    margin-right: 0;
    margin-left: auto;
  }
  #section-7 .card:nth-child(even) {
    margin-right: auto;
    margin-left: 0;
  }
}
#section-7 .remark {
  width: 62.5%;
  margin-left: 10% !important;
}
@media (max-width: 767px) {
  #section-7 .remark {
    width: 90%;
    margin-left: auto !important;
  }
}

#section-8 {
  background: url("https://www.jeban.com/spotlight-item/l-occitane_reset/section-8-bg.jpg") bottom center no-repeat #16234C;
  background-size: 100% auto;
  padding-bottom: 15% !important;
}
@media (min-width: 1440px) {
  #section-8 {
    background-size: 1440px auto;
  }
}
@media (max-width: 767px) {
  #section-8 {
    background-size: 200% auto;
    padding-bottom: calc((100vw * 75/196) - 43.494897959183673px) !important;
  }
}
#section-8 h2 {
  line-height: 0.9;
  margin: 0;
  color: #FFCC06;
}
#section-8 h2:before, #section-8 h2:after {
  border-color: #FFCC06;
}
#section-8 .card {
  height: 100%;
  border-radius: 0;
  border: none;
}
#section-8 .card img {
  border-radius: 0;
}
#section-8 .card .card-body {
  border: 1px solid #FFCC06;
  color: white;
  background: #16234C;
}
#section-8 .card .card-body .card-title {
  margin: 0;
  background: #FFCC06;
  color: #16234C;
}

#section-9 {
  background: #FFCC06;
  color: #16234C;
}
#section-9 .flex-media {
  width: 90%;
  align-items: flex-end;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  #section-9 .flex-media {
    width: 100%;
    flex-flow: column;
    align-items: center;
  }
}
#section-9 .flex-media img {
  width: 25%;
  margin-top: -12.5%;
}
@media (max-width: 767px) {
  #section-9 .flex-media img {
    width: 35%;
    margin-top: -27.5%;
  }
}
#section-9 .flex-media .body {
  padding-bottom: 2.5%;
}
#section-9 .flex-media .body h3 {
  line-height: 0.85;
}
#section-9 .flex-media .body h4 {
  line-height: 1;
  margin-top: 2%;
}
#section-9 .flex-media .body .shopping-link {
  display: inline-flex;
  padding: 0 7.5%;
  margin-top: 2.5%;
  background: transparent;
  border-color: #16234C;
}