@charset "UTF-8";

/*m_img
---------------------------------------------------------*/
.contentpage .m_img {
	background-image: url(../images/medical/yobo/m_img.jpg);
}



/*生涯、ご自身の歯で健康に過ごすために
---------------------------------------------------------*/
.yobo .box01 .graph_list {
	margin-top: 40px;
	background: #edf2f1;
	padding: 30px 4% 0;
}
.yobo .box01 .graph_list li:first-child {
	float: left;
	width: 54%;
	max-width: 500px;
}
.yobo .box01 .graph_list li:last-child {
	float: right;
	width: 44%;
	max-width: 412px;
}

.yobo .box01 .med_grd_box {
	margin-top: 60px;
	background-color: #69c9a2;
	background-image: url(../images/medical/yobo/bg1.jpg);
}
.yobo .box01 .med_grd_box::before {
	background: -moz-linear-gradient(left,  rgba(105,201,162,1) 80%, rgba(105,201,162,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(105,201,162,1) 80%,rgba(105,201,162,0) 100%);
	background: linear-gradient(to right,  rgba(105,201,162,1) 80%,rgba(105,201,162,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69c9a2', endColorstr='#0069c9a2',GradientType=1 );
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.yobo .box01 .graph_list {
	margin-top: 4%;
	padding: 3% 3% 0;
}

.yobo .box01 .med_grd_box {
	margin-top: 5%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.yobo .box01 .graph_list {
	margin-top: 6%;
	padding: 5% 5% 0;
}
.yobo .box01 .graph_list li:first-child,
.yobo .box01 .graph_list li:last-child {
	float: none;
	width: 100%;
	margin: 0 auto;
}
.yobo .box01 .graph_list li:last-child {
	width: 80%;
}

.yobo .box01 .med_grd_box {
	margin-top: 8%;
	padding-bottom: 0;
	background-image: none;
}
.yobo .box01 .med_grd_box::before {
	display: none;
}
.yobo .box01 .med_grd_box .sp_img {
	width: 60%;
	margin: 4% auto 0;
	text-align: center;
}
}



/*より効果的な予防を実践するために
---------------------------------------------------------*/
.yobo .box02 .care_box {
	margin-top: 100px;
	padding: 40px 4%;
}

.yobo .care_box .care_style dt,
.yobo .care_box .care_style p {
	font-size: 150%;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.6em;
	padding-left: 1.2em;
	position: relative;
}
.yobo .care_box .care_style dt::before,
.yobo .care_box .care_style p::before {
	position: absolute;
	left: 0;
	top: .1em;
	font-family: 'fontello';
	content: '\e808';
	font-size: 90%;
}
.yobo .care_box .care_style dt span,
.yobo .care_box .care_style p span {
	font-size: 80%;
}
.yobo .pro_care .care_style dt,
.yobo .pro_care .care_style p {
	color: #48b78a;
}
.yobo .self_care .care_style dt,
.yobo .self_care .care_style p {
	color: #9bbf3f;
}
.yobo .care_box .care_style dt {
	margin-bottom: .4em;
}
.yobo .care_box .care_style dd {
	line-height: 2.0em;
}

.yobo .care_box .border_t {
	margin-top: 50px;
	border-top: solid 1px #c7bca9;
	padding-top: 40px;
}

.yobo .care_box .img_flt p {
	float: right;
	margin-left: 3%;
	margin-bottom: 10px;
}

.yobo .care_box .care_col3 li {
	width: 31.4%;
	margin-left: 2.9%;
	float: left;
}
.yobo .care_box .care_col3 li:first-child {
	margin-left: 0;
}
.yobo .care_box .care_col3 li p {
	margin-top: 20px;
}

/* プロケア */
.yobo .pro_care .flow_box {
	margin-top: 40px;
	background: #edf2f1;
	padding: 25px 3%;
	text-align: center;
}
.yobo .pro_care .flow_box h5 {
	color: #282a3a;
	font-size: 120%;
	font-family: 'BIZ UDPMincho', serif;
	font-weight: 400;
	letter-spacing: .2em;
	line-height: 1.2em;
	margin-bottom: 15px;
}
.yobo .pro_care .flow_box li {
	width: 17%;
	float: left;
}
.yobo .pro_care .flow_box li.flow_arrow {
	width: 3.75%;
	padding-top: 7%;
}
.yobo .pro_care .flow_box li p {
	max-width: 141px;
	margin: 0 auto;
}
.yobo .pro_care .flow_box li .txt {
	text-align: center;
	margin-top: 10px;
	letter-spacing: 0em;
	line-height: 1.6em;
}
.yobo .pro_care .flow_box li.flow_arrow img {
	max-width: 15px;
	margin: auto;
}

/* セルフケア */
.yobo .self_care .point {
	margin-top: 40px;
	background: #edf2f1;
	padding: 20px 3%;
	display: table;
	width: 94%;
	table-layout: fixed;
}
.yobo .self_care .point dt,
.yobo .self_care .point dd {
	display: table-cell;
	vertical-align: middle;
}
.yobo .self_care .point dt {
	width: 90px;
	text-align: center;
	background: #9bbf3f;
	color: #fff;
	font-size: 140%;
	font-weight: 300;
	letter-spacing: .1em;
	line-height: 1.0em;
}
.yobo .self_care .point dd {
	padding-left: 3%;
	line-height: 1.8em;
}

/* 微調整
------------------------------------------*/
@media only screen and (max-width: 1100px) {
.yobo .box02 .med_style dt br {
	display: none;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.yobo .box02 .care_box {
	margin-top: 8%;
	padding: 4%;
}

.yobo .care_box .care_style dt,
.yobo .care_box .care_style p {
	font-size: 120%;
}
.yobo .care_box .care_style dt {
	margin-bottom: .3em;
}
.yobo .care_box .care_style dd {
	line-height: 1.6em;
}

.yobo .care_box .border_t {
	margin-top: 5%;
	padding-top: 4%;
}

.yobo .care_box .img_flt p {
	width: 30%;
	max-width: 290px;
}

/* プロケア */
.yobo .pro_care .flow_box {
	margin-top: 4%;
	padding: 3%;
}
.yobo .pro_care .flow_box li .txt {
	font-size: 90%;
}
.yobo .pro_care .flow_box li .txt br {
	display: none;
}

/* セルフケア */
.yobo .self_care .point {
	margin-top: 4%;
}
.yobo .self_care .point dd {
	font-size: 90%;
	line-height: 1.6em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.yobo .box02 .care_box {
	margin-top: 10%;
	padding: 5%;
}

.yobo .care_box .care_style dt,
.yobo .care_box .care_style p {
	font-size: 130%;
}
.yobo .care_box .care_style dt span,
.yobo .care_box .care_style p span {
	font-size: 90%;
}
.yobo .care_box .care_style dt {
	margin-bottom: .2em;
}
.yobo .care_box .care_style dd {
	line-height: 1.6em;
}

.yobo .care_box .border_t {
	margin-top: 8%;
	padding-top: 6%;
}

.yobo .care_box .img_flt p {
	float: none;
	width: 70%;
	margin: 0 auto 3%;
}

.yobo .care_box .care_col3 li {
	width: 100%;
	margin-left: 0;
	float: none;
	margin-top: 8%;
	border-top: solid 1px #c7bca9;
	padding-top: 6%;
}
.yobo .care_box .care_col3 li:first-child {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}
.yobo .care_box .care_col3 li p {
	width: 70%;
	margin: 4% auto 0;
}

/* プロケア */
.yobo .pro_care .flow_box {
	margin-top: 8%;
	padding: 6%;
}
.yobo .pro_care .flow_box li {
	width: 100%;
	float: none;
}
.yobo .pro_care .flow_box h5 {
	margin-bottom: .5em;
}
.yobo .pro_care .flow_box li p {
	max-width: 100%;
	display: inline-block;
	vertical-align: middle;
}
.yobo .pro_care .flow_box li .illust {
	width: 30%;
}
.yobo .pro_care .flow_box li .txt {
	margin-top: 0;
	width: 56%;
	margin-left: 2%;
	font-size: 90%;
	text-align: left;
}
.yobo .pro_care .flow_box li .txt br {
	display: none;
}
.yobo .pro_care .flow_box li.flow_arrow {
	width: 100%;
	padding: 0;
}
.yobo .pro_care .flow_box li.flow_arrow img {
	transform: rotate(90deg);
}

/* セルフケア */
.yobo .self_care .point {
	margin-top: 6%;
	padding: 3%;
	display: block;
}
.yobo .self_care .point dt,
.yobo .self_care .point dd {
	display: block;
}
.yobo .self_care .point dt {
	width: 100%;
	padding: .4em 0;
	font-size: 120%;
	text-align: center;
}
.yobo .self_care .point dd {
	padding-left: 0;
	line-height: 1.6em;
	padding: 5%;
}
}