@charset "UTF-8";

/*==========================================================
「お客様の声を活かして」配下の設定
============================================================*/

/* H1タイトルの背景設定 */
.soudan-h1-bg {
	background-color: #00a582;
}

.soudan-h1-bg .g-PageTitle__h1 .cmn-richtext {
	color: #fff;
}

/* キャプション細字設定 */
.soudan-caption-font .l-Image__caption {
	font-family: "FP-ヒラギノUD角ゴ StdN W3", FP-HiraginoUDSansStdN-W3, sans-serif !important;
}

/* お客様の声を生かして 事例文字設定（SP） */
@media only screen and (max-width: 640px) {
	.soudan-yoki-index-product-text-sp .l-ImageTextHP__contentsBlock__text .g-Text {
		font-size: 14px !important;
	}
}


/*==========================================================
「生活者コミュニケーションセンターのご案内」の設定
============================================================*/
/* 「花王 生活者コミュニケーションセンター活動報告書」のイレギュラーPDF設定 */
.consumer_pdf_irregular .is-colorset--1 .l-TextLinkUnit__link>.cmn-icon {
	color: #999;
	font-size: 35px;
}

.consumer_pdf_irregular .is-rightIcon .g-TextLinkUnit__link>.cmn-richtext {
	padding-right: 3.5em;
	padding-top: 0.8em;
}

@media only screen and (max-width: 640px) {
	.consumer_pdf_irregular .is-rightIcon .g-TextLinkUnit__link>.cmn-richtext {
		padding-top: 0.2em;
	}
}

.consumer_pdf_irregular .corp-textLink {
	margin-bottom: 0px !important;
}

@media only screen and (min-width: 641px) {
	.consumer_pdf_irregular .l-TextLinkP.is-gutter--m .l-TextLinkP__list__item {
		padding: 5px 15px;
	}
}

@media only screen and (max-width: 640px) {
	.consumer_pdf_irregular .l-TextLinkP.is-gutter--m .l-TextLinkP__list__item {
		padding: 13px 13px 5px 13px;
	}

	.consumer_pdf_irregular .opt-al_r {
		text-align: left;
	}
}

/* 「活動報告書」の改修設定 */
.consumer-pdf-image-border01 img {
	border: 1px solid #d9d9d9;
}

@media only screen and (min-width: 1025px) {
	.consumer-pdf-caution-position01 {
		padding-left: 56%;
		margin-top: -14%;
	}
}

@media only screen and (max-width: 1024px) and (min-width: 641px) {
	.consumer-pdf-caution-position01 {
		padding-left: 60%;
		margin-top: -14%;
	}
}

@media only screen and (min-width: 641px) {
	.consumer-pdf-caution-text01 .cmn-richtext {
		padding-right: 2.6em !important;
	}
}

@media only screen and (max-width: 640px) {
	.consumer-pdf-caution-text01 .cmn-richtext {
		padding-left: 3.5em !important;
	}
}

.consumer-pdf-caution-text01 .cmn-richtext span {
	border-bottom: none !important;
}

@media only screen and (min-width: 641px) {
	.consumer-pdf-caution-text01 .is-leftIcon .g-TextLinkUnit__link__icon {
		right: 0;
	}
}

/* 「消費者相談対応における基本方針」箇所 体裁設定 220118 */
.policy-Section .corp-listItem-02 .l-ListP__ol {
	color: #000;
}

.policy-Section .TextBox-R {
	width: 25%;
	margin-left: auto;
}

@media only screen and (max-width: 1024px) and (min-width: 641px) {
	.policy-Section .TextBox-R {
		width: 40%;
	}
}

@media only screen and (max-width: 640px) {
	.policy-Section .TextBox-R {
		width: 60%;
	}
}

.policy-Section .font-s{
	line-height: 1.3;
}

/*==========================================================
「English・中文・한국어 Call Center」の設定
============================================================*/
@media only screen and (min-width: 641px) {
	.soudan-corp-iconTel-01-wrapper .cmn-richtext {
		font-size: 18px !important;
	}

	.soudan-corp-iconTel-01-wrapper .l-TelephoneCall__item__icon__phone {
		margin-top: -3px;
	}

	.soudan-corp-iconTel-01-wrapper .l-TelephoneCall__item__icon__phone:before {
		font-size: 18px !important;
	}
}

@media only screen and (max-width: 640px) {
	.soudan-corp-iconTel-01-wrapper .cmn-richtext {
		font-size: 17px !important;
	}

	.soudan-corp-iconTel-01-wrapper .l-TelephoneCall__item__icon__phone:before {
		font-size: 14px !important;
	}
}


/*==========================================================
「お客様の声を活かして」の改修 2022/11/17
============================================================*/
/* H1タイトルの背景設定 */
.yokimonodukuri-h1-bg {
	background-color: #cceceb !important;
}

/* 製品アコーディオン設定 */
.yokimonodukuri-productsAccordion{
	border-bottom: solid 1px #d9d9d9;
}
.yokimonodukuri-productsAccordion .g-AccordionMenu{
	margin-bottom: 0px !important;
}
.yokimonodukuri-productsAccordion .g-AccordionUnit__titleBlock{
	padding: 30px 0 10px 2.4em;
}
.yokimonodukuri-productsAccordion .g-AccordionUnit__titleBlock,
.yokimonodukuri-productsAccordion .g-AccordionUnit__contentBlock{
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
}
.yokimonodukuri-productsAccordion .g-AccordionUnit__titleBlock__icon{
	left: 0.8em;
	top: 90px !important;
}
@media only screen and (min-width: 1025px) and (max-width: 1251px) {
	.yokimonodukuri-productsAccordion .g-AccordionUnit__titleBlock__icon{
		top: 7vw !important;
	}
}
@media only screen and (max-width: 1024px) and (min-width: 641px) {
	.yokimonodukuri-productsAccordion .g-AccordionUnit__titleBlock__icon{
		top: 9.2vw !important;
	}
}
@media only screen and (max-width: 640px) {
	.yokimonodukuri-productsAccordion .g-AccordionUnit__titleBlock__icon{
		top: 14.6vw !important;
	}
}
.yokimonodukuri-productsAccordion .cmn-icon--down:before,
.yokimonodukuri-productsAccordion .cmn-icon--up:before{
	color: #00a582;
}

.yokimonodukuri-productsAccordion .g-HeadingTitle__titleBlock__titleBox{
	vertical-align: top !important;
}

/* 製品アコーディオン内の2カラム画像設定 */
.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-2columnImage .g-TileLinkVUnit{
	padding: 0px;
	border: none;
}
.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-2columnImage .l-TileLinkVUnit__imageBlock{
	margin-bottom: 0px;
}
.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-2columnImage .l-TileLinkVUnit__leadBlock{
	display: none;
}

/* 製品アコーディオン内のラベル設定 */
.yokimonodukuri-productsAccordion .yokimonodukuri-product-label{
	width: 20%;
	padding-top: 0.6em;
	padding-right: 0.8em;
}
@media only screen and (max-width: 640px) {
	.yokimonodukuri-productsAccordion .yokimonodukuri-product-label{
		width: 40%;
	}
}

.yokimonodukuri-product-labelbox {
	margin: 0;
	padding: 0;
}
.yokimonodukuri-product-greenlabel{
	display: inline-block;
	color: #0a7a5d;
	font-family: "FP-ヒラギノUD角ゴ StdN W6", FP-HiraginoUDSansStdN-W6, sans-serif;
	font-size: 0.9375rem;
	background-color: #ddf2f0;
	border: 3px solid #ddf2f0;
	border-radius: 10px;
	padding: 5px 20px;
	min-width: 80px;
	text-align: center;
	margin: 0.6em 0.8em 0 0;
}

@media only screen and (max-width: 640px) {
.yokimonodukuri-product-greenlabel{
	font-size: 0.65em;
	padding: 0 6px;
	min-width: 40px;
	margin: 0.6em 0.6em 0 0;
}
}


/* 製品アコーディオンタイトル右の製品画像設定 */
.yokimonodukuri-productsAccordion .g-HeadingTitle__titleBlock{
	position: relative;
}
.yokimonodukuri-productsAccordion .yokimonodukuri-product-image{
	position: absolute;
	width: 16%;
	right: 0;
	top: 0;
}
.yokimonodukuri-productsAccordion .g-HeadingTitle__titleBlock__titleBox{
	padding-right: 18%;
}
@media only screen and (max-width: 640px) {
	.yokimonodukuri-productsAccordion .yokimonodukuri-product-image{
		width: 20%;
	}
	.yokimonodukuri-productsAccordion .g-HeadingTitle__titleBlock__titleBox{
		padding-right: 22%;
	}
}

/* 製品アコーディオンSP表示設定 */
@media only screen and (max-width: 640px) {
	.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-ImageTextPack .g-ImageTextHP__contentsBlock__image{
		width: 30%;
		margin-right: 70% !important;
	}
	.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-ImageTextPack .g-HeadingTitle{
		margin-top: -22%;
		padding-left: 34% !important;
	}
}
@media only screen and (min-width: 501px) and (max-width: 640px) {
	.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-ImageTextPack .g-HeadingTitle{
		margin-bottom: 15% !important;
	}
}
@media only screen and (max-width: 500px){
	.yokimonodukuri-productsAccordion .yokimonodukuri-productsAccordion-ImageTextPack .g-HeadingTitle{
		margin-bottom: 12% !important;
	}
}

/* 製品アコーディオンのロゴ画像の位置調整 */
.yokimonodukuri-productsAccordion .g-HeadingTitle__titleBlock__imageBox{
	vertical-align: top !important;
}


/*==========================================================
「お客様の声を活かして」の改修 2024/10
============================================================*/
/* H1タイトル */
.past-efforts-h1 {
	margin-bottom: 8px;
}
.past-efforts-h1:after {
  content: "";
  position: relative;
  height: 2px;
  background: #00806d;
  display: block;
	margin-top: 32px;
  width: 80px;
}
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .past-efforts-h1:after {
    width: 60px;
  }
}
@media only screen and (max-width: 640px) {
  .past-efforts-h1:after {
    margin-top: 24px;
    width: 48px;
  }
}

/* H2 */
.support-headingLv2-01.l-HeadingTitle--v2.l-HeadingTitle--v2--h2 {
  border-color: #007662;
  margin-bottom: 24px;
}

/* other article */
.support-article {
  background: #fff;
  height: 100%;
  position: relative;
	border: none;
  border-radius: 15px;
	overflow: hidden;
  padding: 0 0 18px;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,.3);
}

.support-article .g-TileLinkVUnit--v2__imageBlock,
.support-article .g-Text {
	margin-bottom: 0;
}

.support-article .g-TileLinkVUnit--v2__leadBlock {
	position: unset;
}

.support-article p {
	margin: 0;
}

.support-article .article-ttl .cmn-richtext {
  padding-right: 15px;
  padding-left: 15px;
}

@media screen and (max-width: 640px) {
  .support-article .article-ttl .cmn-richtext {
    padding-right: 10px;
    padding-left: 10px;
    line-height: 1.5;
  }
}

.support-article .article-link {
  position: absolute;
  right: 15px;
  bottom: 15px;
  margin-bottom: 0;
	border-bottom: 1px solid #333;
}
.support-article .article-link .cmn-richtext > span:before {
	content: "\e006";
	font-family: 'icomoon';
	position: relative;
	top: 2px;
}

.support-article .article-link:hover {
  opacity: .8;
}

@media screen and (max-width: 640px) {
  .support-article .article-link:hover {
    opacity: 1;
  }
}

.support-article .article-link .l-TextLinkUnit__link {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid #333;
}

.support-article .article-link .cmn-richtext,
.support-article .article-link .cmn-icon {
  line-height: 1;
  margin: 0;
}

.support-article .article-link .l-TextLinkUnit__link > .cmn-icon {
  color: #333;
}

.support-article .article-link .l-TextLinkUnit__link > .cmn-icon.cmn-icon--external:before {
  content: "\e006";
}

/* tag */
.support-tag {
  display: inline-block;
	transform: translateX(12rem);
}

@media screen and (max-width: 640px) {
	.support-tag {
		transform: translateX(5.5rem);
	}
}

/* option */
.opt-bg-01 {
	background-color: #82cfc6;
}

.opt-bg-02 {
	background-color: #e1f3f1;
}

.opt-bg-03 {
  background-color: #f6fbfb;
}

.opt-fz18 {
  font-size: 1.125rem;
}

.opt-fz20 {
  font-size: 1.25rem;
}

.opt-fz22 {
  font-size: 1.375rem;
}

.opt-fz24 {
  font-size: 1.5rem;
}

.opt-fz26 {
  font-size: 1.625rem;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
  .opt-md-fz22 {
		font-size: 1.375rem;
  }
}

@media screen and (max-width: 640px) {
  .opt-sm-fz14 {
    font-size: .875rem;
  }

  .opt-sm-fz16 {
    font-size: 1rem;
  }

  .opt-sm-fz18 {
    font-size: 1.125rem;
  }
}

.opt-fontcolor-01 {
  color: #00806d;
}

.opt-fontcolor-02 {
  color: #005a4d;
}

.opt-ls-01e {
  letter-spacing: .1em;
}

.opt-button-01 .l-ButtonUnit__link {
  font-size: 1.375rem;
  font-weight: bold;
  color: #fff;
  background-color: #00806d;
  border: none;
  border-radius: 30px;
  padding: 10px 100px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .3);
  position: relative;
}

.opt-button-01 .l-ButtonUnit__link:after {
  content: "\e006";
  font-family: "icomoon";
  font-weight: 400;
  color: #fff;
  font-size: 1.25rem;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .opt-button-01 .l-ButtonUnit__link {
    font-size: 1.125rem;
    padding-left: 40px;
    padding-right: 40px;
  }
}