@charset "UTF-8";

/*メインイメージ*/
.contentpage .m_img_area {background-image: url(../images/yobo/m_img@2x.jpg);}



/*共通
---------------------------------------------------------*/
.med_index1 {
    background: #ABD37F;
}

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

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

}





/*box1
---------------------------------------------------------*/
.medical .box1 > .med_box{
	padding-bottom: 110px
}
.box1 .graph{
	text-align: center;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.medical .box1 > .med_box{
	padding-bottom: 60px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.medical .box1 > .med_box{
	padding-bottom: 12%;
}
}





/*box2
---------------------------------------------------------*/
/*selfcare*/
.box2 .selfcare .point_box{
	padding: 35px 3%;
	background: url(../../images/bg1.png) repeat left top;
	background-size: 1500px auto;
	border-radius: 10px;
}
.box2 .selfcare .point_box .tbl_box{
	display: table;
	max-width: 965px;
	margin: 0 auto;
}
.box2 .selfcare .point_box .tbl_box dt{
	display: table-cell;
	width: 134px;
	padding-right: 35px;
	vertical-align: middle;
}

.box2 .selfcare .point_box .tbl_box dd{
	display: table-cell;
	vertical-align: middle;
}

.box2 .med_frame_box.selfcare{
	background:rgba(171,211,127,0.60);
}
.box2 .med_frame_box.selfcare .med_frame_title{
	color: #6DB92B;
	border-color: #8BC24E;
}
.box2 .med_frame_box.selfcare .med_frame_list > li .med_style1 dt::before,
.box2 .med_frame_box.selfcare .med_frame_list > li p.title::before{
	color: #9CCB54;
}

.box2 .med_frame_box.procare{
	background-color: rgba(242,221,77,0.60);
}
.box2 .med_frame_box.procare .med_frame_title{
	color: #DA9700;
	border-color: #E0B300;
}
.box2 .med_frame_box.procare .med_frame_list > li .med_style1 dt::before,
.box2 .med_frame_box.procare .med_frame_list > li p.title::before{
	color: #F2C200;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*selfcare*/
.box2 .selfcare .point_box{
	padding: 20px 3%;
}
.box2 .selfcare .point_box .tbl_box dt{
	padding-right: 1.5em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/*selfcare*/
.box2 .selfcare .point_box{
	padding: 5%;
}
.box2 .selfcare .point_box .tbl_box{
	display: block;
	max-width: 100%;
}
.box2 .selfcare .point_box .tbl_box dt{
	display: block;
	width: 50%;
	padding-right: 0;
	margin: 0 auto 4%;
	text-align: center;
}

.box2 .selfcare .point_box .tbl_box dd{
	display: block;
}
}



/*procare*/
.box2 .procare .pmtc_flow{
	background: url(../../images/bg1.png) repeat left top;
	background-size: 1500px auto;
	border-radius: 10px;
}
.box2 .procare .pmtc_flow h4{
	text-align: center;
	font-size: 160%;
	line-height: 1.5em;
	letter-spacing: 0.2em;
	background-color:rgba(224,179,0,0.70);
	color: #fff;
	border-radius: 10px 10px 0 0;
	padding: 0.6em 3%;
}
.box2 .procare .pmtc_flow .flow_list{
	padding: 25px 0;
	max-width: 920px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
	width: 94%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.box2 .procare .pmtc_flow .flow_list > li{
	width: 17.5%;
	text-align: center;
}
.box2 .procare .pmtc_flow .flow_list > li.flow_arrow{
	width: 1.8%;
	padding-top: 63.5px;
}
.box2 .procare .pmtc_flow .flow_list > li .txt{
	font-size: 90%;
	margin-top: 0.8em;
	line-height: 1.5em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box2 .procare .pmtc_flow h4{
	font-size: 140%;
}
.box2 .procare .pmtc_flow .flow_list{
	padding: 20px 0;
}
.box2 .procare .pmtc_flow .flow_list > li.flow_arrow{
	padding-top: 56.8px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.box2 .procare .pmtc_flow h4{
	font-size: 4.8vw;
}
.box2 .procare .pmtc_flow .flow_list{
	padding: 6% 0;
	max-width: 88%;
	width: 88%;
	display: block;
}
.box2 .procare .pmtc_flow .flow_list > li{
	width: 100%;
}
.box2 .procare .pmtc_flow .flow_list > li:nth-child(odd){
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.box2 .procare .pmtc_flow .flow_list > li .illust{
	width: 33%;
}
.box2 .procare .pmtc_flow .flow_list > li .txt{
	margin-top: 0;
	width: 61%;
	margin-left: 6%;
	font-size: 100%;
	text-align: left;
	line-height: 1.7em;
}
.box2 .procare .pmtc_flow .flow_list > li.flow_arrow {
	width: 6%;
	max-width: 13px;
	padding:2% 0;
	margin: 0 auto;
}
.box2 .procare .pmtc_flow .flow_list > li.flow_arrow img {
	display: block;
	margin: auto;
	transform: rotate(90deg);
}
}