@charset "UTF-8";

/* ---------- ---------- ----------
    :: www-kao-com/jp/ja/hygiene-science ::
    :: lv.4, lv.5 ::

00. Component Resets
01. Component
02. Project
03. Utility

---------- ---------- ---------- */


/* ---------- ---------- ----------
:: for large screen ::
@media only screen and (min-width: 1025px) {
}
:: for medium screen ::
@media only screen and (min-width: 641px) and (max-width: 1024px) {
}
:: for small screen ::
@media only screen and (max-width: 640px) {
}
---------- ---------- ---------- */





/* 00. Component Resets
---------- ---------- ---------- */
/* 00-1. Setting
---------- ---------- */
/* Text（エリア全体） */
#area-Contents,
.l-HeadingTitle__h2, .l-HeadingTitle__h3, .l-HeadingTitle__h4, .l-HeadingTitle__h6, .l-HeadingTitle__p,
.l-AnnotationListUnit, .l-AnnotationListUnit--v2,
.l-ButtonP__list__item, .l-ButtonUnit__link,
.l-AccordionUnit__titleBlock,
.l-BannerLinkP__list__item,
.l-TextLinkP__list__item,
.l-TextLinkUnit__link,
.l-PageTitle__h1,
.l-Column__cols,
.l-ListUnit,
.l-Text {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #000;
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .l-Breadcrumbs {
    margin-top: 3%;
  }
}





/* 01. Component
---------- ---------- ---------- */
/* h1 */
.c-lv4-lv5-h1-titleText .l-Text {
  font-size: 20px;
}
.c-lv4-lv5-h1-titleText02 .l-Text {
  font-size: 30px;
}
.c-lv4-lv5-h1-titleText .l-PageTitle__h1,
.c-lv4-lv5-h1-titleText02 .l-PageTitle__h1 {
  font-size: 50px;
  line-height: 1.2;
  letter-spacing: 0.09em;
}
.c-lv4-lv5-h1-titleText .l-PageTitle__h1 {
  color: #00a29a;
}

.c-lv4-lv5-h1-frame-box.l-Column {
  position: relative;
  padding: 40px;
}
.c-lv4-lv5-h1-frame-box.l-Column::before, .c-lv4-lv5-h1-frame-box.l-Column::after {
  position: absolute;
  content: '';
	width: 85px;
	height: 85px;
}
.c-lv4-lv5-h1-frame-box.l-Column::before {
  top: 0;
  left: 0;
  border-top: solid 5px #B5B5B6;
  border-left: solid 5px #B5B5B6;
}
.c-lv4-lv5-h1-frame-box.l-Column::after {
  right: 0;
  bottom: 0;
  border-right: solid 5px #B5B5B6;
	border-bottom: solid 5px #B5B5B6;
}

@media only screen and (max-width: 640px) {
  .c-lv4-lv5-h1-titleText .l-Text {
    font-size: 14px;
    line-height: 1.5;
  }
  .c-lv4-lv5-h1-titleText02 .l-Text {
    font-size: 16px;
  }
  .c-lv4-lv5-h1-titleText .l-PageTitle__h1,
  .c-lv4-lv5-h1-titleText02 .l-PageTitle__h1 {
    font-size: 29px;
  }

  .c-lv4-lv5-h1-frame-box.l-Column {
    padding: 15px;
  }
  .c-lv4-lv5-h1-frame-box.l-Column::before, .c-lv4-lv5-h1-frame-box.l-Column::after {
    width: 42px;
    height: 42px;
  }
}


/* h2 */
.c-lv4-lv5-h2-Text .l-HeadingTitle__h2 {
  font-size: 30px;
  line-height: 1.7;
}

.c-lv4-lv5-h2-icon .l-HeadingTitle__h2 {
  position: relative;
  padding-left: 2.4em;
}
.c-lv4-lv5-h2-icon .l-HeadingTitle__h2::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 62px;
  height: 100%;
  background: url(/content/dam/sites/kao/www-kao-com/jp/ja/hygiene-science/expert/common/img/lv4-h2-icon.jpg) left top / contain no-repeat;
}

.c-lv4-lv5-h2-bgLine .l-HeadingTitle__h2 {
  display: flex;
  align-items: center;
}
.c-lv4-lv5-h2-bgLine .l-HeadingTitle__h2 .cmn-richtext {
  flex-grow: 2.1;
}
.c-lv4-lv5-h2-bgLine .l-HeadingTitle__h2::before {
  content: "";
  flex-basis: 30%;
  height: 1em;
  margin-right: 1rem;
  background-color: #00a29a;
}

@media only screen and (max-width: 1400px) {
  .c-lv4-lv5-h2-bgLine .l-HeadingTitle__h2 .cmn-richtext {
    flex-basis: 20%;
  }
}

@media only screen and (max-width: 640px) {
  .c-lv4-lv5-h2-Text .l-HeadingTitle__h2 {
    font-size: 23px;
    line-height: 1.5;
  }

  .c-lv4-lv5-h2-icon .l-HeadingTitle__h2::before {
    width: 36px;
  }

  .c-lv4-lv5-h2-bgLine .l-HeadingTitle__h2::before {
    flex-basis: 20%;
    height: 2.8em;
  }
}


/* text */
.c-lv4-lv5-desc-text.l-Text {
  font-size: 22px;
}

@media only screen and (max-width: 640px) {
  .c-lv4-lv5-desc-text.l-Text {
    font-size: 16px;
  }
}


/* img */
.c-lv4-lv5-img-line .l-ColumnUnit {
  padding: 40px 60px;
  border: 5px solid #00a29a;
}

.c-lv4-lv5-img-line02 {
  border: 5px solid #00a29a;
}

.c-lv4-lv5-img-captionTop.l-Text {
  font-size: 36px;
  line-height: 1.6;
  text-align: center;
}

.c-lv4-lv5-img-caption.l-Text {
  font-size: 14px;
  letter-spacing: normal;
  text-align: center;
}

.c-lv4-lv5-img-caption02.l-Text {
  font-size: 14px;
  letter-spacing: normal;
}

@media only screen and (max-width: 640px) {
  .c-lv4-lv5-img-line .l-ColumnUnit {
    padding: 20px;
  }
  .c-lv4-lv5-img-captionTop.l-Text {
    font-size: 24px;
    text-align: left;
  }
  .c-lv4-lv5-img-caption.l-Text {
    text-align: left;
  }
}


/* list */
.c-lv4-lv5-reference-title .cmn-richtext,
.c-lv4-lv5-reference-list .cmn-richtext {
  font-size: 14px;
  letter-spacing: 0.025em;
}
.c-lv4-lv5-reference-title .cmn-richtext::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #000;
  border-radius: 50%;
}
.c-lv4-lv5-reference-list.l-ListP {
  margin-left: 1.25em;
}
.c-lv4-lv5-reference-list .l-ListP__ul__item {
  margin-bottom: 2.5em;
}

@media only screen and (max-width: 640px) {
  .c-lv4-lv5-reference-list .cmn-richtext {
    line-height: 1.8;
  }
}


/* 論文リスト */
.u-text-bold, .u-text-bold .cmn-richtext {
  font-family: "FP-ヒラギノUD角ゴ StdN W5", FP-HiraginoUDSansStdN-W5, sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.c-lv4-toc-textList.l-Text {
  padding-left: 1em;
  text-indent: -1.2em;
}

.c-lv4-toc-textList .cmn-richtext::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #000;
  border-radius: 50%;
}


/* 02. Project
---------- ---------- ---------- */
/* inactivatingｰcompound
---------- ---------- */
/* ボタンリンクのグレー枠追加 */
.inactivating-compound-button-list .is-colorset--1 .l-ButtonUnit__link{
  border: 2px solid #B5B5B6;
  padding-left: 50px;
  padding-top: 16px;
  padding-bottom: 16px;
}

@media only screen and (max-width: 640px) {
  .inactivating-compound-button-list .is-colorset--1 .l-ButtonUnit__link{
    padding-left: 50px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* SP時の矢印位置 */
@media only screen and (max-width: 640px) {
    .inactivating-compound-button-list.corp-button .is-leftIcon .l-ButtonUnit__link .l-ButtonUnit__link__icon{
    left: 20px;
    right: inherit;
  }
}

/* 詳しくはこちらボタン */
span.details-btn{
  background:#000;
  font-size: 16px;
  padding: 5px 40px 5px 20px;
  color:#fff;
  margin-right: 10px;
  position: relative;
}

span.details-btn::before{
  content:  '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right:20px;
  top:10px;
}





/* 03. Utility
---------- ---------- ---------- */
/* bg
---------- ---------- */
.u-bg-keyColor {
  background-color: #00a29a;
}

.u-bg-white {
  background-color: #fff;
}

.u-bg-gray {
  background-color: #EFEFEF;
}

.u-bg-gray02 {
  background-color: #DCDDDD;
}


/* text
---------- ---------- */
.u-text-bold .cmn-richtext {
  font-family: "FP-ヒラギノUD角ゴ StdN W5", FP-HiraginoUDSansStdN-W5, sans-serif;
  font-weight: 500;
}

/* <br>の後ろに余白が自動的に入ってしまう箇所の修正設定（PC、TB） */
@media only screen and (min-width: 641px) {
  span.u-br-text-indent {
    margin-left: -0.3em;
  }
}


/* text-color
---------- ---------- */
.u-text-color-white .cmn-richtext {
  color: #fff;
}

.u-text-color-green .cmn-richtext {
  color: #00a29a;
}