@charset "UTF-8";

/*box1
---------------------------------------------------------*/
.box1 .graph {
	width: 85%;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background: #F8F7F6;
	padding: 60px 3% 30px;
	border-radius: 20px;
	text-align: center;
	position: relative;
}
.box1 .graph .abs {
	width: 14%;
	max-width: 111px;
	position: absolute;
	z-index: 0;
	left: 2%;
	top: 0;
	transform: translateY(-20%);
}
.box1 .graph .ft_rodin {
	position: relative;
	z-index: 1;
	font-size: 175%;
	letter-spacing: .15em;
	line-height: 1.4em;
	margin-bottom: .4em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box1 .graph {
	padding: 5% 3% 3%;
	border-radius: 2vw;
}
.box1 .graph .ft_rodin {
	font-size: 160%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.box1 .graph {
	width: 100%;
	padding: 8% 3% 4%;
	border-radius: 4vw;
}
.box1 .graph .ft_rodin {
	font-size: 130%;
	letter-spacing: .1em;
	margin-bottom: .4em;
}
}



/*box2
---------------------------------------------------------*/
#selfcare .med_bgbox .bgbox_tit {color: #F9A183;}
#selfcare .med_bgbox .bgbox_tit::before {background: #F9A183;}
#selfcare .med_bgbox .bgbox_style > dt,
#selfcare .med_bgbox p.bgbox_style {color: #F9A183;}
#selfcare .med_point dt > span {color: #F9A183;}

#procare .med_bgbox .bgbox_tit {color: #5ACBC8;}
#procare .med_bgbox .bgbox_tit::before {background: #5ACBC8;}
#procare .med_bgbox .bgbox_style > dt,
#procare .med_bgbox p.bgbox_style {color: #5ACBC8;}

#procare .med_bgbox .bgbox_style > dt > span {
	display: inline-block;
	vertical-align: middle;
	font-size: 75%;
	letter-spacing: .05em;
	line-height: 1.4em;
	margin-left: -.5em;
	transform: translateY(-.1em);
}
#gbt .bgbox_inbox {
	background: #5ACBC8;
	padding-top: 50px;
	padding-bottom: 50px;
	color: #fff;
}
#gbt .bgbox_inbox .img_l {
	float: left;
	width: 41%;
	max-width: 400px;
}
#gbt .bgbox_inbox .txt_r {
	float: right;
	width: 55%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#procare .med_bgbox .bgbox_style > dt > span {
	display: block;
	letter-spacing: normal;
	transform: none;
}
#gbt .bgbox_inbox {
	padding-top: 4%;
	padding-bottom: 4%;
}
#gbt .bgbox_inbox .img_l {
	margin-right: 4%;
	margin-bottom: 1.0em;
}
#gbt .bgbox_inbox .txt_r {
	float: none;
	width: 100%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#procare .med_bgbox .bgbox_style > dt > span {
	display: block;
	font-size: 70%;
	letter-spacing: normal;
	transform: none;
}
#gbt .bgbox_inbox {
	padding-top: 8%;
	padding-bottom: 8%;
}
#gbt .bgbox_inbox .img_l {
	float: none;
	width: 80%;
	margin: 0 auto 1.0em;
}
#gbt .bgbox_inbox .txt_r {
	float: none;
	width: 100%;
}
}



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

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}