@charset "UTF-8";

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

/* 00. global settings
-------------------------------- */

/* margin / padding */
.opt-mrl-auto,
.opt-mrl-auto img {
	margin-right: auto;
	margin-left: auto;
}

.opt-p0--imp {
	padding: 0 !important;
}

.opt-mt15--imp {
	margin-top: 15px !important;
}

.opt-mt140--imp {
	margin-top: 140px !important;
}

.opt-mb140--imp {
	margin-bottom: 140px !important;
}

@media screen and (min-width: 1025px) {
	.opt-lg-pt15--imp {
		padding-top: 15px !important;
	}

	.opt-lg-mt15--imp {
		margin-top: 15px !important;
	}

	.opt-lg-mb75--imp {
		margin-bottom: 75px !important;
	}

	.opt-lg-mt120--imp {
		margin-top: 120px !important;
	}

	.opt-lg-mt130--imp {
		margin-top: 130px !important;
	}

	.opt-lg-mt140--imp {
		margin-top: 140px !important;
	}

	.opt-lg-mb140--imp {
		margin-bottom: 140px !important;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.opt-md-pt65--imp {
		padding-top: 65px !important;
	}

	.opt-md-mt5--imp {
		margin-top: 5px !important;
	}

	.opt-md-mt15--imp {
		margin-top: 15px !important;
	}

	.opt-md-mt25--imp {
		margin-top: 25px !important;
	}

	.opt-md-mt65--imp {
		margin-top: 65px !important;
	}

	.opt-md-mt75--imp {
		margin-top: 75px !important;
	}

	.opt-md-mb75--imp {
		margin-bottom: 75px !important;
	}

	.opt-md-mt120--imp {
		margin-top: 120px !important;
	}
}

@media screen and (max-width: 640px) {
	.opt-sm-mt15--imp {
		margin-top: 15px !important;
	}

	.opt-sm-mt25--imp {
		margin-top: 25px !important;
	}

	.opt-sm-mt35--imp {
		margin-top: 35px !important;
	}

	.opt-sm-mt45--imp {
		margin-top: 45px !important;
	}

	.opt-sm-mt85--imp {
		margin-top: 85px !important;
	}

	.opt-sm-mb70--imp {
		margin-bottom: 70px !important;
	}

	.opt-sm-mb45--imp {
		margin-bottom: 45px !important;
	}

	.opt-sm-pt45--imp {
		padding-top: 45px !important;
	}
}

/* font-size */
.opt-fs26 {
	font-size: 1.625rem;
}
.opt-fs22 {
	font-size: 1.375rem;
}
.opt-fs18 {
	font-size: 1.125rem;
	line-height: 1.5;
}
.opt-fs16 {
	font-size: 1rem;
	line-height: 1.5;
}
.opt-fs12 {
	font-size: .75rem;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.opt-md-fs18 {
		font-size: 1.125rem;
	}
	.opt-md-fs16 {
		font-size: 1rem;
	}
	.opt-md-fs14 {
		font-size: .875rem;
	}
	.opt-md-fs13 {
		font-size: .8125rem;
	}
}

@media screen and (max-width: 640px) {
	.opt-sm-fs18 {
		font-size: 1.125rem;
	}
	.opt-sm-fs16 {
		font-size: 1rem;
	}
	.opt-sm-fs14 {
		font-size: .875rem;
	}
	.opt-sm-fs13 {
		font-size: .8125rem;
	}
}

/* border */
.opt-border-none--imp {
	border: none !important;
}

/* display */
.opt-display-block {
	display: block;
}

/* indent */
.opt-indent-1 {
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}

.opt-indent-1-25 {
	display: inline-block;
	padding-left: 1.25em;
	text-indent: -1.25em;
}

.opt-indent-1-3 {
	display: inline-block;
	padding-left: 1.3em;
	text-indent: -1.3em;
}

.opt-indent-1-35 {
	display: inline-block;
	padding-left: 1.35em;
	text-indent: -1.35em;
}

@media screen and (max-width: 640px) {
	.opt-indent-1-45-sp {
		display: inline-block;
		padding-left: 1.45em;
		text-indent: -1.45em;
	}
}

/* width */
.opt-w78p {
	width: 78%;
}

/* 01. component styles
-------------------------------- */

/* common component */
.g-Area .g-Image--v2,
.g-Area .g-AccordionMenu__item:not(:last-child) .g-AccordionUnit,
.g-Area .g-HeadingTitle--v2__titleBlock__titleBox__title,
.g-Area .g-HeadingTitle--v2.g-HeadingTitle--v2--h2.is-titleBorder--none {
	margin-bottom: 0;
}

.g-Area .g-TileLinkVUnit--v2__leadBlock {
	padding-right: 0;
}

.g-Area .opt-borderradius--s .g-Image--v2__img {
	border-radius: 10px;
	overflow: hidden;
}

@media screen and (max-width: 640px) {
	.g-Area .cmn-richtext {
		line-height: 1.5;
	}

	.g-Area .g-Section:not(.is-fullWidth) .l-Section__inner,
	.g-Area .g-Section.heading-ttl-block .l-Section__inner {
		padding-right: 19px;
		padding-left: 19px;
	}

	.g-Area .l-Section .l-Column.is-gutter--m .l-Column__cols {
		padding: 0;
	}

	.g-Area .l-Column.is-gutter--m .l-Column__inner {
		margin-left: 0;
		margin-right: 0;
	}
}

/* icon */
.g-Area .l-AccordionUnit__titleBlock__icon {
	font-size: 1.25rem;
	color: #008470;
	right: 30px;
}

@media screen and (max-width: 640px) {
	.g-Area .l-AccordionUnit__titleBlock__icon {
		right: 15px;
	}
}

/* 02. common elements
-------------------------------- */

.icon-genki {
	color: transparent;
	font-size: 0;
}
.icon-genki::before {
	content: "";
	width: 370px;
	height: 47px;
	display: inline-block;
	background: url(/content/dam/sites/kao/www-kao-co-jp/genki/common/genki-logo-02.png) no-repeat;
	background-size: 100% auto;
}

@media screen and (max-width: 1024px) {
	.icon-genki::before {
		width: 230px;
		height: 30px;
	}
}

@media screen and (min-width: 641px) {
	.icon-genki {
		vertical-align: -3px;
	}
}

@media screen and (max-width: 640px) {
	.icon-genki {
		display: block;
		margin-right: 0;
		margin-bottom: 12px;
	}
}

/* Heading Title Block */
.heading-ttl-block {
	border-top: 4px solid #008470;
	background: #dcf0ee;
	padding-top: 79px;
	padding-bottom: 81px;
}

.heading-ttl-block .icon-genki {
	margin-right: 23px;
}

.heading-ttl-block .cmn-richtext {
	color: #333;
	font-size: 3rem;
	line-height: 1;
}

.heading-ttl-block .cmn-icon {
	font-size: 1.25rem;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: #008470;
	color: #fff;
	margin-top: 0;
	transform: translateY(-50%);
}

@media screen and (min-width: 641px) {
	.heading-ttl-block .g-HeadingTitle--v2 {
		max-width: 1093px;
		padding: 0 65px;
		margin: 0 auto;
	}

	.heading-ttl-block .cmn-icon {
		right: 65px;
	}
}

@media screen and (max-width: 1024px) {
	.heading-ttl-block .cmn-richtext {
		font-size: 1.8125rem;
	}

	.heading-ttl-block .cmn-icon {
		width: 24px;
    height: 24px;
    font-size: .875rem;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.heading-ttl-block {
		padding-top: 54px;
		padding-bottom: 55px;
	}
}

@media screen and (max-width: 640px) {
	.heading-ttl-block {
		padding-top: 34px;
		padding-bottom: 34px;
	}

	.heading-ttl-block .cmn-richtext {
		line-height: 1.3;
	}

	.heading-ttl-block .icon-genki {
		margin-right: 0;
	}
}

/* Tile Link Block */
.tile-link-block {
	max-width: 922px;
	margin: 0 auto;
}

.tile-link-block.opt-al-center .g-TileLinkTextP__list {
	display: flex;
	justify-content: center;
}

.tile-link-block .l-TileLinkTextUnit.is-colorset--1 {
	padding: 23px 30px 19px;
	border-radius: 10px;
	background: #f0f0ee;
}

.tile-link-block.l-TileLinkTextP.is-gutter--m .l-TileLinkTextP__list__tile {
	max-width: 476px;
	padding: 0 10px;
}

.tile-link-block .cmn-richtext {
	font-size: 1.375rem;
	font-family: "FP-ヒラギノUD角ゴ StdN W6", FP-HiraginoUDSansStdN-W6, sans-serif;
}

.tile-link-block .link-sub-text .cmn-richtext {
	font-size: 1rem;
}

.tile-link-block .cmn-icon {
	font-size: 1.25rem;
}

.tile-link-block .cmn-icon--external,
.tile-link-block .cmn-icon--bullet {
	margin-top: 0;
	transform: translateY(-50%);
}
.tile-link-block .cmn-icon--external:before,
.tile-link-block .cmn-icon--bullet:before {
	color: #008470;
	font-size: 1.3rem;
}

@media screen and (max-width: 1024px) {
	.tile-link-block .cmn-richtext {
		font-size: 1rem;
	}

	.tile-link-block .link-sub-text .cmn-richtext {
		font-size: .8125rem;
	}

	.tile-link-block .l-TileLinkTextUnit.is-colorset--1 {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media screen and (min-width: 641px) and (min-width: 1024px) {
	.tile-link-block .cmn-icon--external {
		font-size: 1rem;
		right: 18px;
	}
}

@media screen and (max-width: 640px) {
	.tile-link-block .cmn-icon {
		font-size: 1rem;
	}
	.tile-link-block .cmn-icon.cmn-icon--bullet {
		right: 13px;
	}
	.tile-link-block .cmn-icon.cmn-icon--external {
		right: 17px;
	}

	.tile-link-block .l-TileLinkTextUnit.is-colorset--1 {
		padding: 13px 20px 14px;
	}
}

/* 03. side nav
-------------------------------- */
@media screen and (min-width: 641px) {
	.side-nav {
		width: 130px;
		position: fixed;
		top: 0;
		right: -130px;
		z-index: 100;
		transition: right .3s;
	}
	.side-nav.is-display {
		right: 0;
	}
}

@media screen and (max-width: 640px) {
	.side-nav {
		display: flex;
		gap: 4px;
		padding: 4px 0;
	}

	.side-nav.is-fixed {
		position: fixed;
    left: 0;
    background: #fff;
    z-index: 100;
		top: 0;
	}
}

/* 04. introduction
-------------------------------- */
/* heading ttl */
.introduction-sec .heading-ttl-h3 {
  border-bottom: 2px solid #008470;
  padding-bottom: 11px;
  margin-bottom: 34px;
}

.introduction-sec .heading-ttl-h3 .cmn-richtext {
  font-size: 2rem;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #008470;
}

.introduction-sec .heading-ttl-h3 .g-Text .cmn-richtext {
  font-size: 1.375rem;
  line-height: 1.5;
  color: #333;
}

.introduction-sec .heading-ttl-h4 .cmn-richtext {
  font-size: 1.375rem;
  line-height: 1.5;
  letter-spacing: .04em;
}

.introduction-sec .heading-ttl-h5.-left-bar {
	padding-left: 20px;
	position: relative;
	margin-bottom: 10px;
}
.introduction-sec .heading-ttl-h5.-left-bar:before {
	content: "";
	width: 8px;
	height: 24px;
	background: #008470;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.introduction-sec .heading-ttl-h5 .cmn-richtext {
  font-size: 1.375rem;
	letter-spacing: .04em;
	line-height: 1.5;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.introduction-sec .heading-ttl-h3 {
		margin-bottom: 17px;
	}
}

@media screen and (max-width: 1024px) {
  .introduction-sec .heading-ttl-h3 .cmn-richtext {
    font-size: 1.3125rem;
  }

  .introduction-sec .heading-ttl-h3 .g-Text .cmn-richtext,
  .introduction-sec .heading-ttl-h4 .cmn-richtext {
    font-size: 1rem;
  }

	.introduction-sec .heading-ttl-h5 .cmn-richtext {
		font-size: 1rem;
		letter-spacing: .02em;
	}
}

@media screen and (max-width: 640px) {
  .introduction-sec .heading-ttl-h3 {
    padding-bottom: 10px;
    margin-bottom: 26px;
  }

	.introduction-sec .heading-ttl-h4 {
		margin-bottom: 6px;
	}

	.introduction-sec .heading-ttl-h5.-left-bar {
		padding-left: 14px;
	}
	.introduction-sec .heading-ttl-h5.-left-bar:before {
		width: 6px;
		height: 18px;
	}
}

.service-ttl .g-HeadingTitle--v2__titleBlock {
  display: flex;
  justify-content: center;
}

.service-ttl .g-HeadingTitle--v2__titleBlock__imageBox {
  width: 180px;
  padding-right: 10px;
  box-sizing: content-box;
}

.service-ttl .cmn-richtext {
  font-size: 1.375rem;
		letter-spacing: .04em;
}

@media screen and (max-width: 1024px) {
	.service-ttl .cmn-richtext {
		font-size: 1rem;
		letter-spacing: .02em;
	}
}

@media screen and (max-width: 640px) {
	.service-ttl {
		margin-bottom: 15px;
	}

	.service-ttl .g-HeadingTitle--v2__titleBlock__imageBox {
		width: 120px;
		padding-top: 4px;
	}
}

/* text */
.introduction-sec .text-body {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #333;
}

@media screen and (max-width: 1024px) {
  .introduction-sec .text-body {
    font-size: .875rem;
  }
}

/* link */
.introduction-sec .text-body .anchor-link {
  color: #008470;
	text-decoration: underline;
}
.introduction-sec .text-body .anchor-link:hover {
	text-decoration: none;
}

/* annotaion */
.introduction-sec .annotation-list .g-List--ver2__ul {
	padding-left: 20px;
	font-size: .75rem;
	line-height: 1.5;
}

.introduction-sec .annotation-txt,
.introduction-sec .annotation-list .cmn-richtext {
	font-size: .75rem;
	line-height: 1.5;
	letter-spacing: .04em;
	color: #333;
}

.introduction-sec .g-AnnotationListP--v2 {
  margin-bottom: 0;
}

.introduction-sec .g-AnnotationListUnit--v2__symbol,
.introduction-sec .g-AnnotationListUnit--v2__text .cmn-richtext {
  font-size: .75rem;
  line-height: 1.5;
}

@media screen and (max-width: 1024px) {
	.introduction-sec .annotation-list .g-List--ver2__ul {
		font-size: .625rem;
	}

	.introduction-sec .annotation-txt,
	.introduction-sec .annotation-list .cmn-richtext {
		font-size: .625rem;
		line-height: 1.5;
		letter-spacing: .02em;
	}

  .introduction-sec .g-AnnotationListUnit--v2__symbol,
  .introduction-sec .g-AnnotationListUnit--v2__text .cmn-richtext {
    font-size: .625rem;
  }
}

@media screen and (max-width: 640px) {
	.introduction-sec .annotation-list .g-List--ver2__ul {
		padding-left: 13px;
	}
}

/* logo */
@media screen and (max-width: 640px) {
	.introduction-sec .logo-list .g-Column__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* link */
.introduction-sec .link-list .cmn-icon {
	font-size: 1.25rem;
	color: #008470;
}

.introduction-sec .link-list .l-TextLinkP__list__item {
	padding-top: 17px;
	padding-bottom: 17px;
}

.introduction-sec .link-list .l-TextLinkUnit__link {
	line-height: 1.5;
}

.introduction-sec .link-list .cmn-richtext {
	padding-left: 1.9em;
}
.introduction-sec .link-list .l-TextLinkUnit__link .cmn-richtext {
	text-decoration: underline;
}
.introduction-sec .link-list .l-TextLinkUnit__link .cmn-richtext:hover {
	text-decoration: none;
}

@media screen and (max-width: 1024px) {
  .introduction-sec .link-list .cmn-icon {
		font-size: 1rem;
	}
}

@media screen and (max-width: 640px) {
	.introduction-sec .link-list .l-TextLinkP__list__item {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.introduction-sec .link-list .cmn-richtext {
		padding-left: 1.2em;
	}
}

/* feature */
.introduction-sec .feature-box {
	padding: 20px 30px 30px;
	border-radius: 10px;
	border: 1px solid #dbdbdb;
}

@media screen and (max-width: 640px) {
  .introduction-sec .feature-box {
		padding: 17px 20px 19px;
		border-radius: 5px;
	}
}

/* button */
.introduction-sec .button-link .l-ButtonP__list__item {
  padding: 0;
}

.introduction-sec .button-link .cmn-richtext {
  font-size: 1.175rem;
  text-align: left;
}

.introduction-sec .button-link .l-ButtonUnit__link {
  width: 427px;
  padding: 23px 30px 19px;
  border-radius: 10px;
  background: #f0f0ee;
}

.introduction-sec .button-link .cmn-icon {
    font-size: 1.25rem;
}
.introduction-sec .button-link .cmn-icon--external,
.introduction-sec .button-link .cmn-icon--bullet {
  margin-top: 0;
  transform: translateY(-50%);
}
.introduction-sec .button-link .cmn-icon--external:before,
.introduction-sec .button-link .cmn-icon--bullet:before {
  color: #008470;
}

@media screen and (max-width: 1024px) {
	.introduction-sec .button-link .cmn-icon {
		font-size: 1rem;
	}

	.introduction-sec .button-link .cmn-richtext {
    font-size: .875rem;
	}
}

@media screen and (max-width: 640px) {
	.introduction-sec .button-link .l-ButtonP__list {
		margin-right: 0;
		margin-left: 0;
	}

	.introduction-sec .button-link .l-ButtonUnit__link {
		padding: 14px 20px;
		border-radius: 5px;
	}

	.introduction-sec .button-link .cmn-icon--bullet {
		right: 12px;
	}
}

/* figure */
.introduction-sec .figure-group {
	max-width: 765px;
	margin: 0 auto;
}

/* service-box */
.introduction-sec .service-box {
  background: #f0f0ee;
  padding: 17px 24px 24px 24px;
  border-radius: 10px;
  height: 100%;
  box-sizing: border-box;
}

.introduction-sec .service-box .g-ImageTextHP--v2__contentsBlock {
  grid-template-columns: 39.12% 60.88%;
}

.introduction-sec .service-box .g-HeadingTitle--v2 {
  margin-bottom: 16px;
}

.introduction-sec .service-box .g-ImageTextHP--v2__contentsBlock__image {
  padding-right: 20px;
}

.introduction-sec .service-box .text-body {
  margin-top: -4px;
}

.introduction-sec .service-box .text-body .cmn-richtext {
  font-size: 1rem;
  letter-spacing: .04em;
}

@media screen and (max-width: 1024px) {
  .introduction-sec .service-box .text-body .cmn-richtext {
    font-size: .8125rem;
  	letter-spacing: .02em;
  }
}

@media screen and (max-width: 640px) {
  .introduction-sec .service-box {
		padding: 16px 20px 20px;
	}

  .introduction-sec .service-box .g-ImageTextHP--v2__contentsBlock {
		grid-template-columns: 39.06% 60.94%;
	}

	.introduction-sec .service-box .g-ImageTextHP--v2__contentsBlock__image {
		padding-right: 15px;
	}

	.introduction-sec .service-box .g-HeadingTitle--v2 {
		margin-bottom: 10px;
	}

	.introduction-sec .service-box .text-body {
		margin-top: -3px;
	}
}