@charset "utf-8";

/* ==================================================================
	index.css
	
=================================================================== */

/* --------------------------------
   □ news
-------------------------------- */ 
#news{
	margin-top: 95px;
}

	#news .news{
		position: relative;
        min-height: 190px;
	}

	#news .titlearea{
		text-align: left;
		width: 180px;
		margin-right: 120px;
		float: left;
		margin-top: 65px;
	}

		#news .titlearea h3.title{
			font-size: 171%;
			text-align: left;
			margin-bottom: 23px;
			font-weight: 500;
		}

		#news .titlearea h3.title span{
			font-size: 75%;
			font-family: 'Noto Sans JP', sans-serif;
		}

		#news .titlearea .buttonStyle a{
			width: 170px;
			padding: 10px;
		}

	#news ul.newslist{
		width: 72%;
		float: right;
	}
		#news ul.newslist li{
			border-bottom: 2px solid #E8E8E8;
			font-size: 107%;
		}

		#news ul.newslist li:last-child{
			border-bottom:none;
		}
		
		#news ul.newslist li a{
			position: relative;
			display: block;
			color: #293241;
			padding: 25px 30px 25px 0;
		}

		#news ul.newslist li a:hover{
			background: #f9f9f9;
			text-decoration: none;
			color: #E18C12;
		}

		#news ul.newslist li a:after{
			position: absolute;
			top: 50%;
			right: 3%;
			margin-top: -4px;
			display: block;
			width: 8px;
			height: 8px;
			border-top: 1px solid #293241;
			border-right: 1px solid #293241;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			content: "";
		}

		#news ul.newslist li dl dt{
			display: table-cell;
			vertical-align: middle;
			width: 145px;
			font-weight: 700;
		}

		#news ul.newslist li dl dd{
			display: table-cell;
			vertical-align: middle;
		}

#news p.buttonStyle{
	clear: both;
	position: absolute;
    left: 0;
	top: 130px;
}

#news p.buttonStyle a{
	width: 175px;
    padding: 10px 20px;
}

/* --------------------------------
   □ medical
-------------------------------- */ 

#medical{
	padding: 0;
	
}

	#medical .box {
		background: #FDFAF2;
		margin: 0 30px;
		border-radius: 55px;
		padding: 65px 0;
	}

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

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

	#medical ul.menulist li a{
		color: #293241;
	}

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

	#medical ul.menulist li:last-child{
		margin-right: 0;
	}

	#medical ul.menulist li dl{
		text-align: center;
	}

	#medical ul.menulist li dl dt{
		margin-bottom: 17px;
	}

	#medical ul.menulist li dl dd{
		font-size: 135%;
		font-weight: 700;
	}

	#medical p.buttonStyle{
		text-align: center;
	}

/* --------------------------------
   □ greeting
-------------------------------- */ 

#greeting{
	background-color: #fff;
	background-size: 27%;
}

#greeting .container{
    width: 790px;
    margin: auto;
}

	#greeting p.image{
        width: 30%;
		float: left;
	}

#greeting p.image img{
    max-width: 100%;
}

	#greeting .explain{
		width: 60%;
		float: right;
	}

	#greeting .explain dl{
		margin-bottom: 25px;
	}

	#greeting .explain dl dt{
		font-size: 192%;
		color: #E18C12;
		margin-bottom: 32px;
	}

	#greeting .explain dl dt span{
		font-size: 60%;
		display: block;
		margin-bottom: 14px;
		letter-spacing: 0.1em;
	}

	#greeting .explain dl dd{
		font-size: 114%;
	}

	#greeting .explain p.buttonStyle{
	}
	
/* --------------------------------
   □ access
-------------------------------- */ 

#access{
	padding-top: 65px;
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 1024px) and 
(min-width: 768px) {


#news .titlearea {
    width: 20%;
    margin-right: 5%;
}

#greeting p.image {
    margin-right: 30px;
}
	
#greeting .explain {
    width: 45%;
}






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

#news {
	margin-top: 0;
}

#news .titlearea h3.title {
    text-align: center;
}
	
	#news .titlearea {
		text-align: left;
		width: auto;
		margin-right: 0;
		float: none;
		margin-top: 0;
	}

	#news ul.newslist {
		width: auto;
		float: none;
		margin-bottom: 45px;
	}

	#news ul.newslist li a {
		padding: 10px 0;
	}

	#news ul.newslist li dl dt {
		display: block;
		width: auto;
	}

    #news ul.newslist li dl dd{
        display: block;
    }
    
	#news p.buttonStyle {
		clear: both;
		position: inherit;
		left: inherit;
		top: inherit;
		text-align: center;
	}

	#news p.buttonStyle a{
		width: 80%;
	}

#medical ul.menulist {
	width: auto;
}

	#medical ul.menulist li {
		width: 31%;
		margin-right:3%;
	}

	#news ul.newslist li dl dd span{
		width: 90%;
		display: block;
		height: 2em;
		overflow: hidden;
	}
	
#medical .box {
    background: #FDFAF2;
    margin: 0;
    border-radius: 0;
	padding: 7% 0;
}

	#medical ul.menulist li dl dt img{
		box-shadow: #c3c3c3 2px 2px 2px;
		border-radius: 50%;
	}

	#medical ul.menulist li dl dd {
		font-size: 114%;
	}

#greeting {
    background: url(../../images/common/icon/mark.png) 100% 58% no-repeat;
    background-size: 75%;
    overflow: hidden;
}

    #greeting .container {
        width: auto;
        margin: 0 2%;
    }
    
	#greeting .explain {
		width: auto;
		float: none;
	}

	#greeting p.image {
		text-align: center;
		margin-right: 0;
		display: block;
		float: none;
		margin-bottom: 25px;
        width: auto;
	}

	#greeting .explain dl dt {
		line-height: 1.4;
		font-size: 135%;
	}

#access {
    padding-top: 0;
}
	
	#access .container{
		margin: 0;
	}

    #access p.buttonStyle {
        margin: 0 2%;
    }
















































}