@charset "UTF-8";

/*-----------------------------------
最終更新日：2022年10月2日
-----------------------------------*/

/* navi */

.g-BrHeaderCommon {
    padding: 3px 11px;
}

@media only screen and (min-width: 1025px) {
  .g-BrHeaderCommon {
    padding: 6px 12px;
  }
}

/* 画像の横幅が足りないときの中央寄せ設定 */
.img-center .g-Image__img {
  line-height: 0 !important;
  text-align: center !important;
}
.img-center .g-Image__img img {
  display: inline !important;
}

/*-----------------------------------
最終更新日：2026年7月30日
-----------------------------------*/
/* <br>の後ろに余白が自動的に入ってしまう箇所の修正設定 */
span.br-text-indent{
    margin-left: -0.35em;
}

@media screen and (min-width: 641px){
  span.br-text-indent-pc{
      margin-left: -0.35em;       
  }
}

@media screen and (max-width: 640px){
  span.br-text-indent-sp{
      margin-left: -0.35em;       
  }
}

.resesh-section .cmn-richtext {
  font-family: 'NotoSansCJKjp-Medium', sans-serif !important;
}

.resesh-section .f-bold {
  font-family: 'NotoSansCJKjp-Bold', sans-serif !important;
}

.resesh-section .l-Column {
  max-width: 1000px;
}

@media screen and (max-width: 640px) {
  .resesh-section .l-Column {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.l-Text {
  letter-spacing: 0 !important;
}

.bg-mint {
  background-color: #DDF7ED;
}

.bg-cream {
  background-color: #FAF4DF;
}

.bg-pink {
  background-color: #FAEBE7;
}

.bg-gray {
  background-color: #4F4F4F;
}

.bg-teal {
  background-color: #019799;
}

.bg-lightgray {
  background-color: #EDEDED;
}

.c-dark-teal .cmn-richtext {
  color: #006C73  !important;
}

.c-black .cmn-richtext,.c-black .cmn-richtext::before {
  color: #000000 !important;
}


.note-asterisk .l-List--ver2__ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  counter-reset: note-asterisk;
}

.note-asterisk li {
  position: relative;
  padding-left: 2.3em;
}

.note-asterisk li::before {
  content: "＊" counter(note-asterisk);
  counter-increment: note-asterisk;
  position: absolute;
  top: 0.15em;
  left: 0;
  font-size: 0.75em;
}

.g-Text.note-asterisk .cmn-richtext {
  position: relative;
  padding-left: 2.3em;
  display: inline-block;
}

.g-Text.note-asterisk .cmn-richtext::before {
  content: "＊";
  position: absolute;
  display: inline-block;
  top: 0.5em;
  left: 0;
  font-size: 0.75em;
}

.note-reference .cmn-richtext {
  position: relative;
  padding-left: 1.5em;
  display: inline-block;
}

.note-reference .cmn-richtext::before {
  content: "※";
  position: absolute;
  top: 0.1em;
  left: 0;
  font-size: 1em;
  color: #ffffff;
}

.note-asterisk--s .cmn-richtext {
  position: relative;
  padding-left: 1.5em;
  display: inline-block;
}

.note-asterisk--s .cmn-richtext::before {
  content: "＊";
  position: absolute;
  top: 0.1em;
  left: 0;
  font-size: 1em;
  color: #ffffff;
}


/* 商品ページ */
.resesh-products {
  border-left: 15px solid #01A5A8;
  border-right: 15px solid #01A5A8;
}

@media screen and (max-width: 640px) {
  .resesh-products {
    border-width: 7px;
  }
}



@media screen and (max-width: 640px) {
  .resesh-products .opt-fontsize--xl {
    font-size: 1.14em;
  }
  .resesh-products .opt-fontsize--l {
    font-size: 1em;
  }
}

.resesh-products-header,.resesh-products-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 30px;
  padding-bottom: 30px;
  border-left: 15px solid #01A5A8;
  border-right: 15px solid #01A5A8;
}


@media screen and (max-width: 640px) {
  .resesh-products-header, .resesh-products-footer {
    border-width: 7px;
  }
}

.resesh-products-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150%;
  height: 180%;
  background-color: #01A5A8;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.resesh-products-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  height: 180%;
  background-color: #01A5A8;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.resesh-products-header .l-PageTitle__titleBlock__titleBox__title {
  max-width: 236px;
}

.resesh-products-footer .l-PageTitle__titleBlock__titleBox__title {
  max-width: 105px;
}

@media screen and (max-width: 640px) {
  .resesh-products-footer .l-PageTitle__titleBlock__titleBox__title {
    max-width: 87px;
  }
}

.resesh-products-header > *, .resesh-products-footer > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 640px) {
  .resesh-products .l-Column {
    padding-left: 23px;
    padding-right: 23px;
  }
}

/* 商品ページ 強力収集シリーズ */
.resesh-section--kyoryoku .l-Column__cols {
  color: #ffffff;
  max-width: 1000px;
}



/* 無自覚臭ページ */
.resesh-mujikakushu .cmn-richtext {
  font-family: 'UD Shin Go NT Medium', sans-serif !important;
}

.resesh-mujikakushu .f-bold .cmn-richtext {
  font-family: 'UD Shin Go NT Bold', sans-serif !important;
}

.resesh-mujikakushu .l-Column {
  max-width: 1000px;
}

@media screen and (max-width: 640px) {
  .resesh-mujikakushu .l-Column {
    padding-left: 15px;
    padding-right: 15px;
  }

  .resesh-mujikakushu .sp-pl15 {
    padding-left: 15px;
  }

  .resesh-mujikakushu .sp-pr15 {
    padding-right: 15px;
  }
}

.resesh-mujikakushu-round--top,.resesh-mujikakushu-round--bottom {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 80px;
}


@media screen and (max-width: 640px) {
  .resesh-mujikakushu-round--top, .resesh-mujikakushu-round--bottom  {
    padding-top: 60px;
  }
}

.resesh-mujikakushu-round--top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 130%;
  height: 330%;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 0;
}


.resesh-mujikakushu-round--bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 130%;
  height: 330%;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 0;
}


.resesh-mujikakushu-round--top > *, .resesh-mujikakushu-round--bottom > * {
  position: relative;
  z-index: 1;
}

.resesh-mujikakushu-point .l-Column__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

@media screen and (max-width: 640px) {
  .resesh-mujikakushu-point .l-Column__inner {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
  }
}

.resesh-mujikakushu-point .l-Column__cols {
  width: 100%;
}

.resesh-mujikakushu-point .l-Column__inner .l-GroupBox {
  position: relative;
  background: #fff;
  border-radius: 15px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.20));
  z-index: 2;
}

.resesh-mujikakushu-point .l-Column__inner .l-GroupBox::before {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 105px;
  height: 58px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.resesh-mujikakushu-point .l-Column__inner .g-GroupBox::after {
  content: none;
}

.resesh-mujikakushu-point .g-Column__inner::after {
  content: none;
}

.resesh-mujikakushu-point .point-number {
  transform: translateY(-10px);
}


.resesh-mujikakushu-message .l-Column__inner {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.resesh-mujikakushu-message .l-Column__inner .l-GroupBox {
  border: 2px solid #007D84;
  border-radius: 12px;
  position: relative;
  margin-bottom: 30px;
  padding: 15px;
}

@media screen and (max-width: 640px) {
  .resesh-mujikakushu-message .l-Column__inner .l-GroupBox {
    border-radius: 10px;
    margin-bottom: 20px;
  }
}

.resesh-mujikakushu-message .l-Column__inner .l-GroupBox::after {
  content: "";
  background: url(/content/dam/sites/kao/www-kao-co-jp/resesh/2026/mujikakushu/fukidashi.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 12px;
  height: 16px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}


@media screen and (max-width: 640px) {
  .resesh-mujikakushu-message .l-Column__inner {
    flex-direction: column;
    gap: 20px;
  }
}

.resesh-mujikakushu-message .l-Column__inner::after {
  content: none;
}

.resesh-mujikakushu-point .l-Column__cols:nth-child(1) {
  flex: 1;
}


.resesh-mujikakushu-point .point-image {
  flex: 0 1 calc(252 / 683 * 100%);
}


.resesh-mujikakushu-movie .cmn-richtext {
  color: #000000 !important;
  font-family: 'UD Shin Go NT Medium', sans-serif !important;
}