@charset "utf-8";

/* ==================================================================
	about.css
	
=================================================================== */

.accentArea{
	background-image: url("../../images/medical/title_bg.jpg");
}
/* =================================
   ■ consultation
================================== */

#consultation .bgarea{

}


	#consultation .bgarea .textarea h3{
		line-height: 2;
        text-align: center;
		margin-bottom: 25px;
	}

	#consultation .bgarea .textarea h3 span{
		font-size: 221%;
		color: #E18C12;
		font-weight: 500;
		border-bottom: 2px solid #D36015;
	}

    #consultation .bgarea .textarea p.text{
        text-align: center;
    }

/* =================================
   ■ target
================================== */

#target ul.list{
    margin-bottom: 35px;
}

#target ul.list > li{
	padding: 25px 0;
	border-top: 2px solid #E18C12;
}

	#target ul.list li dl{
		font-size: 114%;
		display: table;
		width: 100%;
	}

	#target ul.list li dl dt{
		color: #E18C12;
		display: table-cell;
		width: 20%;
		vertical-align: top;
	}

	#target ul.list li dl dd{
		display: table-cell;
	}

	#target ul.list li dl dd ul.type li{
		list-style-type: disc;
		line-height: 2;
	}

	#target ul.list li dl dd ul.inline li{
		width: 30%;
		float: left;
	}

	#target ul.list li dl dd ul.inline li.block{
        width: 100%;
    }

	#target ul.list li dl dd ul.inline li a{
        color: #293241;
        text-decoration: none;
        border-bottom: 1px solid #333;
        padding-bottom: 2px;
    }

	#target ul.list li dl dd ul.inline li a:hover{
        color: #E18C12;
        border-bottom: 1px solid #E18C12;
    s}

	#target ul.list li dl dd ul.inline li a span{
    }

#target p.text_center{
    text-align: center;
    font-size: 124%;
}

/* =================================
   ■ flow
================================== */

#flow ul.flowlist {
    width: 1000px;
    margin: auto;
    overflow: hidden;
    margin-bottom: 55px;
}

#flow ul.flowlist li{
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#flow ul.flowlist li:after{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid;
    border-color: transparent transparent #E18C12 #E18C12;
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10px;
}

#flow ul.flowlist li:last-child:after{
    display: none;
}

#flow ul.flowlist li p.image{
    display:inline-block;
    float: right;
}

#flow ul.flowlist li dl{
    float: left;
    width: 70%;
}

#flow ul.flowlist li dl dt{
    font-size: 135%;
    font-weight: 700;
    color: #E18C12;
    margin-bottom: 10px;
}

#flow ul.flowlist li dl dt span{
    font-size: 200%;
    margin-right: 15px;
    color: #e4e4e4;
}

#flow ul.flowlist li dl dd{
    font-size: 107%;
}





/* =================================
   ■ examination
================================== */

#examination ul.item {
    width: 790px;
    margin: auto;
    overflow: hidden;
    margin-bottom: 55px;
}

	#examination ul.item li{
		width: 220px;
		float: left;
		margin-right: 65px;
	}

	#examination ul.item li a{
		color: #293241;
	}

	#examination ul.item li a:hover{
		color: #E18C12;
		text-decoration: none;
	}

	#examination ul.item li:last-child{
		margin-right: 0;
	}

	#examination ul.item li dl{
		text-align: center;
	}

	#examination ul.item li dl dt{
		margin-bottom: 17px;
	}

	#examination ul.item li dl dd.name{
		font-size: 135%;
		font-weight: 700;
		color: #E18C12;
		margin-bottom: 10px;
	}

	#examination ul.item li dl dd.text{
		text-align: left;
		font-size: 107%;
	}

/* =================================
   ■ machine
================================== */

#machine ul.item li{
}

	#machine ul.item li dl{
	}

	#machine ul.item li dl dt{
		width: 40%;
		float: left;
	}

	#machine ul.item li dl dt img{
		width: 100%;
	}

	#machine ul.item li dl dd{
		width: 50%;
		float: right;
	}

	#machine ul.item li dl dd.name{
		font-size: 135%;
		font-weight: 700;
		color: #E18C12;
		margin-bottom: 10px;
	}

	#machine ul.item li dl dd.text{
		font-size: 107%;
	}

/* =================================
   ■ skincare
================================== */

#skincare{
	padding-bottom: 0;
}

	#skincare p.text{
		font-size: 135%;
		text-align: center;
		margin-bottom: 50px;
	}

	#skincare ul.item{
	}

	#skincare ul.item > li{
		width: 31%;
		float: left;
		margin-right: 3%;
        margin-bottom: 40px;
	}

	#skincare ul.item > li:last-child{
		margin-right: 0;
	}

	#skincare ul.item > li p.image{
		background: #FBFBFB;
		border-radius: 36px;
		text-align: center;
		height: 284px;
		box-sizing: border-box;
		margin-bottom: 32px;
	}

		#skincare ul.item li p.goods1{
			padding: 56px;
		}

		#skincare ul.item > li p.goods1 img{
			width: 87%;
		}

		#skincare ul.item > li p.goods2{
			padding: 25px;
		}

		#skincare ul.item > li p.goods2 img{
			width: 48%;
		}

		#skincare ul.item > li p.goods3{
			padding: 25px;
		}

		#skincare ul.item > li p.goods3 img{
			width: 80%;
		}

	#skincare ul.item > li dl.area{
		text-align: center;
	}

	#skincare ul.item > li dl.area > dt{
		font-size: 135%;
		font-weight: 700;
		color: #E18C12;
		margin-bottom: 23px;
	}

	#skincare ul.item > li dl.area dd ul.pricelist{
		margin-bottom: 25px;
	}

	#skincare ul.item > li dl.area dd ul.pricelist li{
		font-size: 107%;
		font-weight: 700;
		margin-top: -20px;
	}

	#skincare ul.item > li dl.area dd ul.pricelist li span{
		background: #E6E6E6;
		width: 45%;
		display: inline-block;
		text-align: center;
		border-radius: 8px;
		margin-right: 10px;
	}

	#skincare ul.item > li dl.area dd ul.pricelist li em{
		font-size: 200%;
	}

	#skincare ul.item > li dl.area dd dl.explain{
	}

	#skincare ul.item > li dl.area dd dl.explain dt{
		font-size: 121%;
		font-weight: 700;
		margin-bottom: 16px;
	}

	#skincare ul.item > li dl.area dd dl.explain dd{
		text-align: left;
		font-size: 107%;
	}

/* =================================
   ■ disease
================================== */


#disease ul.type li{
    margin-bottom: 40px;
    clear: both;
    overflow: hidden;
}

#disease ul.type li dl dt{
    font-size: 135%;
    font-weight: 700;
    color: #E18C12;
    margin-bottom: 10px;
}

#disease ul.type li dl dd{
    line-height: 2;
}

#disease ul.type li dl.explain{
    width: 70%;
    float: left;
}

#disease ul.type li p.image{
    display: inline-block;
    float: right;
    margin-top: 50px;
}


@media only screen and
(max-width : 767px) {

/* =================================
   ■ flow
================================== */

#flow ul.flowlist {
    width: auto;
    margin-bottom: 55px;
}

#flow ul.flowlist li dl {
    float: none;
    width: auto;
    margin-bottom: 15px;
}
    
#flow ul.flowlist li p.image {
    float: none;
    display: block;
    text-align: center;
    margin-bottom: 30px;
}    
    
#flow ul.flowlist li {
    overflow: hidden;
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 0;
}

/* --------------------------------
   □ consultation
-------------------------------- */ 
#consultation .bgarea {
    height: 300px;
    background-size: cover;
}

	#consultation .bgarea .textarea {
		width: auto;
		position: initial;
		left: auto;
		bottom: auto;
		padding: 20px;
	}

	#consultation .bgarea .textarea h3 span {
		font-size: 140%;
	}
/* =================================
   ■ target
================================== */

#target{
	padding-top: 0;
}

	#target ul.list li dl,
	#target ul.list li dl dt ,
	#target ul.list li dl dd{
		display: block;
		width: 100%;
	}

	#target ul.list > li {
		overflow: hidden;
	}

	#target ul.list li dl dd ul.inline{
		margin-left: 30px;
	}

	#target ul.list li dl dd ul.inline li {
		width: auto;
		float: none;
	}

/* =================================
   ■ examination
================================== */

	#examination ul.item {
		width: auto;
		margin-bottom: 0;
	}
	
	#examination ul.item li{
		width: 31%;
		margin-right: 3%;
	}
	
	#examination ul.item li dl dd.name {
		font-size: 114%;
	}
	

/* =================================
   ■ machine
================================== */

#machine ul.item li dl dt {
    width: auto;
    float: none;
    margin-bottom: 20px;
}

	#machine ul.item li dl dd {
		width: auto;
		float: none;
	}

/* =================================
   ■ skincare
================================== */

#skincare p.text {
    font-size: 114%;
}

#skincare ul.item {
    width: auto;
}

	#skincare ul.item > li {
		width: auto;
		float: none;
		margin-right: 0;
		margin-bottom: 40px;
	}

	#skincare ul.item > li:last-child{
		margin-bottom: 0;
	}
	
	#skincare ul.item > li dl.area dd dl.explain {
		margin-bottom: 50px;
	}

	#skincare ul.item > li dl.area dd dl.explain:last-child {
		margin-bottom: 0;
	}

/* --------------------------------
   □ disease
-------------------------------- */ 

    #disease .box{
        padding-bottom: 0;
    }
    
    #disease ul.type li {
        padding-top: 70px;
        margin-top: -70px;
    }


    #disease ul.type li dl.explain{
        width: auto;
        float: none;
    }

    #disease ul.type li p.image{
        text-align: center;
        display: block;
        float: none;
        margin-top: 15px;
    }







}