@charset "UTF-8";
/* --------------------------------
:: /www-kao-co-jp/genki/index.html ::

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

/* --------------------------------
:: 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;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.opt-md-mt15--imp {
		margin-top: 15px !important;
	}
	.opt-md-mt25--imp {
		margin-top: 25px !important;
	}
}

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

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

/* font-size */
.opt-fs26 {
	font-size: 1.625rem;
}
.opt-fs22 {
	font-size: 1.375rem;
}
.opt-fs18 {
	font-size: 1.125rem;
}
.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;
	}
}

@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;
	}
}

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

/* 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%);
}

.heading-ttl-block .cmn-richtext .opt-fontfamily--01 {
	font-family: "FP-ヒラギノUD角ゴ StdN W6", FP-HiraginoUDSansStdN-W6, sans-serif;
}

@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: 40px;
		padding-bottom: 40px;
	}

	.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;
}

@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. seikatsusya
-------------------------------- */
@media screen and (min-width: 1025px) {
	.overview-block {
		min-width: 781px;
	}
}

.introduce-column .g-ImageTextHP--v2.is-layoutL .g-ImageTextHP--v2__contentsBlock__image {
	padding-right: 0;
}

.introduce-column .cmn-richtext {
	line-height: 1.5;
	font-family: "FP-ヒラギノUD角ゴ StdN W3", FP-HiraginoUDSansStdN-W3, sans-serif;
}
@media screen and (min-width: 641px) {
	.introduce-column .cmn-richtext {
		font-size: 1.25rem;
		letter-spacing: .04em;
	}
}
@media screen and (max-width: 640px) {
	.introduce-column .cmn-richtext {
		font-size: 1rem;
		letter-spacing: .02em;
	}
}

.nav-block.g-BannerLinkP--v2.is-gutter--m .g-BannerLinkP--v2__list {
	margin-left: auto;
	margin-right: auto;
}

.nav-block .cmn-icon {
	color: #333;
}

@media screen and (min-width: 641px) {
	.introduce-column .g-ImageTextHP--v2__contentsBlock__text {
		display: flex;
		align-items: flex-end;
	}

	.nav-block.g-BannerLinkP--v2 .g-BannerLinkP--v2__list {
		max-width: 1167px;
	}

	.nav-block.g-BannerLinkP--v2 .g-BannerLinkP--v2__list__item {
		padding: 0 10px;
	}
}

@media screen and (max-width: 640px) {
	.nav-block.g-BannerLinkP--v2 .g-BannerLinkP--v2__list {
		max-width: 338px;
		margin-right: auto;
		margin-left: auto;
	}

	.nav-block.g-BannerLinkP--v2 .g-BannerLinkP--v2__list__item {
		padding: 0;
	}
	.nav-block.g-BannerLinkP--v2 .g-BannerLinkP--v2__list__item:not(:last-child) {
		margin-bottom: 10px;
	}
}

.list-annotation .cmn-richtext {
	font-family: "FP-ヒラギノUD角ゴ StdN W3", FP-HiraginoUDSansStdN-W3, sans-serif;
}