@charset "UTF-8";



/*導入*/
.com_lead_box .lead_bg {
	background-image: url("../images/whitening/m_img@2x.png");
}




/*ご要望を叶える治療法をご提案します
---------------------------------------------------------*/
/*流れ*/
.box2 .med_bgbox .flow {
	text-align: center;
}
.box2 .med_bgbox .flow dt {
	color: #FFF;
	font-size: 130%;
	line-height: 1.7;
	letter-spacing: .3em;
	background-color: rgba(106,179,178);
	padding: .4em 0;
	border-radius: 20px 20px 0 0;
}
.box2 .med_bgbox .flow dd {
	background-color: rgba(106,179,178,0.15);
	padding: 50px 5%;
	border-radius: 0 0 20px 20px;
}
.box2 .med_bgbox .flow dd .flow_list {
	max-width: 760px;
	margin: 0 auto;
}
.box2 .med_bgbox .flow dd .flow_list li {
	width: 20%;
}
.box2 .med_bgbox .flow dd .flow_list li .box_img {
	position: relative;
	margin-bottom: .5em;
}
.box2 .med_bgbox .flow dd .flow_list li:not(:last-of-type) .box_img::after {
	position: absolute;
	content: '';
	background: url("../images/arrow1.svg") no-repeat center center;
    background-size: 100% auto;
	width: 9px;
	height: 13px;
	left: 113%;
	top: 50%;
	transform: translateY(-50%);
}
.box2 .med_bgbox .flow dd .flow_list li .box_img img {
	margin: 0 auto;
}
.box2 .med_bgbox .flow dd .flow_list li p {
	font-size: 88%;
	line-height: 1.5;
	letter-spacing: .04em;
}

/*こんなあなたにおすすめ*/
.box2 .med_bgbox .recommend {
	padding: 30px 3%;
	border: 2px solid #6ab3b2;
	box-sizing: border-box;
}
.box2 .med_bgbox .recommend .rec_index {
	width: 23%;
	align-self: center;
}
.box2 .med_bgbox .recommend .rec_index .ft_min {
	position: relative;
	max-width: 215px;
	font-size: 135%;
	letter-spacing: .15em;
	text-align: center;
	z-index: 1;
	margin-right: auto;
}
.box2 .med_bgbox .recommend .rec_index .ft_min::before {
	position: absolute;
	content: '';
	background: url("../images/check@2x.png") no-repeat left center;
    background-size: 100% auto;
	width: 90%;
	height: 170%;
	left: 3%;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}
.box2 .med_bgbox .recommend .rec_index .ft_min span {
	color: #e87e3a;
}
.box2 .med_bgbox .recommend .med_maru_list {
	width: 76%;
}

/*ホームホワイトニング*/
.box2 .med_bgbox .recommend .med_maru_list li::before {
	color: #6ab3b2;
}

/*オフィスホワイトニング*/
.med_bgbox .office .bg_index {
    border-top-color: #b18db8;
    border-bottom-color: #b18db8;
    color: #9e74a0;
}
.box2 .med_bgbox .office .flow dt {
	background-color: rgba(177,141,184);

}
.box2 .med_bgbox .office .flow dd {
	background-color: rgba(177,141,184,0.15);
}
.box2 .med_bgbox .office .recommend {
	border-color: #b18db8;
}
.box2 .med_bgbox .office .recommend .med_maru_list li::before {
	color: #b18db8;
}

/*デュアルホワイトニング*/
.med_bgbox .dual .bg_index {
    border-top-color: #bea971;
    border-bottom-color: #bea971;
    color: #ac9a58;
}
.box2 .med_bgbox .dual .recommend {
	border-color: #bea971;
}
.box2 .med_bgbox .dual .recommend .med_maru_list li::before {
	color: #bea971;
}


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

/*流れ*/
.box2 .med_bgbox .flow dt {
	font-size: 130%;
	letter-spacing: .1em;
}
.box2 .med_bgbox .flow dd {
	padding: 6% 5%;
}
.box2 .med_bgbox .flow dd .flow_list li p {
	letter-spacing: 0;
	font-feature-settings: "palt";
}
	
/*こんなあなたにおすすめ*/
.box2 .med_bgbox .recommend {
	padding: 3%;
}
.box2 .med_bgbox .recommend .rec_index .ft_min {
	font-size: 120%;
	letter-spacing: .03em;
}
.box2 .med_bgbox .recommend .med_maru_list {
	width: 74%;
}
.box2 .med_bgbox .recommend .med_maru_list li {
	letter-spacing: .05em;
}

	
}

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

/*流れ*/
.box2 .med_bgbox .flow dt {
	font-size: 110%;
	letter-spacing: .1em;
}
.box2 .med_bgbox .flow dd {
	padding: 8% 5%;
}
.box2 .med_bgbox .flow dd .flow_list {
	width: 90%;
}
.box2 .med_bgbox .flow dd .flow_list li {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10%;
}
.box2 .med_bgbox .flow dd .flow_list li:last-of-type {
    margin-bottom: 0;
}
.box2 .med_bgbox .flow dd .flow_list li .box_img {
    width: 40%;
    margin-bottom: 0;
}
.box2 .med_bgbox .flow dd .flow_list li:not(:last-of-type) .box_img::after {
    left: 108%;
    top: 100%;
    transform: translateY(0) rotate(90deg);
}
.box2 .med_bgbox .flow dd .flow_list li p {
    width: 54%;
    align-self: center;
    text-align: left;
	letter-spacing: 0;
	font-feature-settings: "palt";
}
	
/*こんなあなたにおすすめ*/
.box2 .med_bgbox .recommend {
	display: block;
	padding: 3% 3% 5%;
}
.box2 .med_bgbox .recommend .rec_index {
	width: 100%;
}
.box2 .med_bgbox .recommend .rec_index .ft_min {
	max-width: none;
	font-size: 120%;
	letter-spacing: .03em;
	margin: 0 auto;
	padding: .5em 0;
}
.box2 .med_bgbox .recommend .rec_index .ft_min::before {
	background-size: auto 100%;
	width: 50%;
	height: 100%;
}
.box2 .med_bgbox .recommend .med_maru_list {
	width: 100%;
}
.box2 .med_bgbox .recommend .med_maru_list li {
	font-size: 95%;
	letter-spacing: .05em;
}
	
	
}