@charset "UTF-8";


.contentpage .m_img{
	background-image: url("../images/perio/m_img@2x.jpg");
}


/*box1
---------------------------------------------------------*/
.box1 .med_flow_list li {
	width: 24%;
}
.box1 .med_flow_list li.flow_arrow {
	width: 1.2%;
	padding-top:10%;
}
.box1 .med_flow_list li .ft_min{
	font-size: 115%;
	line-height: 1.4em;
	padding-bottom: 0.8em;
}
.box1 .med_flow_list li .illust.rel_img{
	position: relative;
	z-index: 1;
}
.box1 .med_flow_list li .illust.rel_img::after{
	position: absolute;
	content: "";
	background: url(../images/perio/ab_fikitashi@2x.png) no-repeat right top;
	background-size: 105px auto;
	height: 100%;
	width: 100%;
	top:-15px;
	right: 0;
	z-index: 2;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1125px) {
.box1 .med_flow_list li .illust.rel_img::after{
	right: -15px;
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box1 .med_flow_list li {
	width: 21%;
}
.box1 .med_flow_list li.flow_arrow {
	width: 2%;
	padding-top:15%;
}
.box1 .med_flow_list li .ft_min{
	font-size: 110%;
	padding-bottom: 0.7em;
}
.box1 .med_flow_list li .illust.rel_img::after{
	background-size: 60% auto;
	top:-5%;
	right: -15%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.box1 .med_flow_list li {
	width: 100%;
}
.box1 .med_flow_list li.flow_arrow {
	width: 100%;
	padding: 2% 0;
}
.box1 .med_flow_list li .ft_min{
font-size: 120%;
}
.box1 .med_flow_list li .illust.rel_img::after{
	background-size: 60% auto;
	top:-20%;
	right: -10%;
}
}





/*box2
---------------------------------------------------------*/
/*col_3 */
/* PC調整 (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1150px) {
.box2 .col_3 li{
	width: 48%;
	margin-top: 4%;
}
.box2 .col_3 li:nth-child(3){
	margin-top: 4%;
}
}





/*box3
---------------------------------------------------------*/
/*med_style1*/
.box3 .med_frame_box.no_back .med_style1 dt .green{
	color: #2ab0ce;
}
.box3 .med_frame_box.no_back .med_style1 dd .arrow_com {
	font-size: 17px;
}
.box3 .med_frame_box.no_back .med_style1 dd .arrow_com span{
	min-width: 350px;
	margin-top: 1.5em;
}
.box3 .book_box{
	background-color: #ecf8fb;
	padding: 35px 4%;
	border-radius: 20px;
	box-sizing: border-box;
	position: relative;
}
.box3 .book_box .book_inbox{
	max-width: 1000px;
	margin: 0 auto;
}
.box3 .book_box dl{
	max-width: 740px;
	width: 74%;
}
.box3 .book_box dl dt{
	display: flex;
	justify-content: space-between;
	 align-items: center;
	margin-bottom: 1em;
}
.box3 .book_box .book_tit{
	font-size: 210%;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	padding-left: 3em;
	position: relative;
}
.box3 .book_box .book_tit::before{
	position: absolute;
	content: "";
	background: url("../../images/book_icon.svg") no-repeat left center;
	background-size: 100% 100%;
	width: 2.23em;
	height: 2.23em;
	left: 0;
	top:50%;
	transform: translateY(-50%);
}
.box3 .book_box .arrow_bdr{
	font-size: 75%;
}
.box3 .book_box .arrow_bdr span a{
	padding-right: 1.3em;
}
.box3 .book_box .arrow_bdr span a::before{
	font-family: "fontello";
	content: '\e804';
	font-size: 1em;
	line-height: 1em;
	width: 1em;
	height: 1em;
	top:0.15em;
	right: 0;
	transform: translateY(0) rotate(0);
	border-top: 0;
	border-right:0;
}
.box3 .book_box .abs_img{
	position: absolute;
	max-width: 218px;
	width: 20%;
	right: 4.1%;
	top:0;
	transform: translateY(-8%)
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box3 .med_frame_box.no_back .med_flt .txt_r{
	float: right;
	width: 63.2%;
}
.box3 .med_frame_box.no_back .med_style1 dd .arrow_com span{
	margin-top: 1em;
}
.box3 .book_box{
	padding: 3.5vw 4%;
	border-radius: 2vw;
}
.box3 .book_box dl{
	max-width: 100%;
	width: 100%;
}
.box3 .book_box .book_tit{
	font-size: 200%;
}
.box3 .book_box .abs_img{
	position: static;
	transform: translateY(0);
	float: right;
	width: 25%;
	margin-top:0;
	margin-left: 2%;
	margin-bottom: 0.5em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.box3 .med_frame_box.no_back .med_style1 dd .arrow_com{
	text-align: center;
}
.box3 .med_frame_box.no_back .med_style1 dd .arrow_com span{
	min-width: 250px;
	margin-top: 1em;
}

.box3 .book_box{
	padding: 3% 4% 8%;
}
.box3 .book_box dl{
	width: 100%;
}
.box3 .book_box dl dt{
	display: block;
	margin-bottom: .7em;
}
.box3 .book_box .book_tit{
	position: relative;
	display: block;
	font-size: 170%;
	letter-spacing: 0.05em;
	padding-left: 0;
	text-align: center;
	padding-top: 2em;
	margin-bottom: 0;
}
.box3 .book_box .book_tit::before{
	background-position: center top;
	background-size: 100% auto;
	width: 2.23em;
	height: 2.23em;
	left: 0;
	right: 0;
	margin: 0 auto;
	top:0;
	transform: translateY(0);
}
.box3 .book_box .arrow_bdr{
	font-size: 100%;
	text-align: center;
	margin: 1em auto 0;
}
.box3 .book_box .arrow_bdr span a{
	padding-right: 1.3em;
}
.box3 .book_box .arrow_bdr span a::before{
	font-size: .8em;
	top:0.2em;
}
.box3 .book_box .abs_img{
	position: static;
	width: 50%;
	transform: translateY(0);
	margin: 5% auto 0;
}
}


/*pc_chousei*/
/* PC調整 (Portrait)
------------------------------------------*/
@media only screen and (max-width: 1050px) {
.box3 .pc_chousei{display:none !important;
}
}