@charset "utf-8";
/* CSS Document */



#mainimage{
	width:100%;
	height: 340px;
	text-align:center;
	margin-bottom:0px;
}

#mainimage-inner{
	width: 1200px;
	margin:0 auto;
}

/*アコーディオン*/

/*
* {
	margin: 0; 
	padding: 0;
}
*/

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
	width: 1200px;
	height: 340px;
	overflow: hidden;
	
	/*Time for some styling
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);*/
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 1920px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 240px;
	float: left;
	
	border-left: 1px solid #fff;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

.accordian li:first-child{
	border-left: 1px solid #fff;
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 215px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 340px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	display:none;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 340px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}

/* #gnavi */

#gnavi{
	width:100%;
	height:320px;
	text-align:center;
	margin-bottom:0px;
	border-top:1px solid #78502f;
	border-bottom:1px solid #78502f;
}

#gnavi ul{
	width:1200px;
	margin:0 auto;
	list-style:none;
}

#gnavi ul li{
	float:left;
	border-right:1px solid #78502f;
}

#gnavi ul li:last-child{
	border-right:none;
}

#gnavi ul li a p{
	text-align:left;
	font-size:100%;
	line-height:1.2em;
}

/*内視鏡検査*/

#gnavi ul li.inspection{
	width:238px;
}

#gnavi ul li.inspection a{
	display:block;
	width:198px;
	height:100px;
	background:url(../images/index/gnavi_001.png) no-repeat;
	-webkit-transition:background 0.2s linear 0s;
	-moz-transition:background 0.2s linear 0s;
	padding:0 20px;
	padding-top:220px;
	color:#78502f;
	text-decoration:none;
}

#gnavi ul li.inspection a:hover{
	background:url(../images/index/gnavi_001_bg.png) no-repeat;
	color:#000;
}

/*ジオン注射*/

#gnavi ul li.alta{
	width:239px;
}

#gnavi ul li.alta a{
	display:block;
	width:199px;
	height:100px;
	background:url(../images/index/gnavi_002.png) no-repeat;
	-webkit-transition:background 0.2s linear 0s;
	-moz-transition:background 0.2s linear 0s;
	padding:0 20px;
	padding-top:220px;
	color:#78502f;
	text-decoration:none;
}

#gnavi ul li.alta a:hover{
	background:url(../images/index/gnavi_002_bg.png) no-repeat;
	color:#000;
}

/*日帰り手術*/

#gnavi ul li.daysurgery{
	width:239px;
}

#gnavi ul li.daysurgery a{
	display:block;
	width:199px;
	height:100px;
	background:url(../images/index/gnavi_003.png) no-repeat;
	-webkit-transition:background 0.2s linear 0s;
	-moz-transition:background 0.2s linear 0s;
	padding:0 20px;
	padding-top:220px;
	color:#78502f;
	text-decoration:none;
}

#gnavi ul li.daysurgery a:hover{
	background:url(../images/index/gnavi_003_bg.png) no-repeat;
	color:#000;
}

/*便秘外来*/

#gnavi ul li.constipation{
	width:239px;
}

#gnavi ul li.constipation a{
	display:block;
	width:199px;
	height:100px;
	background:url(../images/index/gnavi_004.png) no-repeat;
	-webkit-transition:background 0.2s linear 0s;
	-moz-transition:background 0.2s linear 0s;
	padding:0 20px;
	padding-top:220px;
	color:#78502f;
	text-decoration:none;
}

#gnavi ul li.constipation a:hover{
	background:url(../images/index/gnavi_004_bg.png) no-repeat;
	color:#000;
}

/*各種手術費用*/

#gnavi ul li.bits{
	width:230px;
}

#gnavi ul li.bits a{
	display:block;
	width:201px;
	height:100px;
	background:#fefaee url(../images/index/gnavi_005.png) no-repeat;
	-webkit-transition:background 0.2s linear 0s;
	-moz-transition:background 0.2s linear 0s;
	padding:0 20px;
	padding-top:220px;
	color:#78502f;
	text-decoration:none;
}

#gnavi ul li.bits a:hover{
	background:#3ebedd url(../images/index/gnavi_005_bg.png) no-repeat;
	color:#000;
}

.intro{
	text-align:center;
	padding:30px 0 20px 0;
}


/*================================================
　#content01
================================================*/

#content01{
	margin-bottom:0;
}

#content01 #news{
	float:left;
	width:600px;
	min-height:250px;
	padding:20px;
}

#content01 #news dl{
}

#content01 #news dt{
	width:130px;
	float:left;
	font-size:120%;
	line-height:1.5em;
}

#content01 #news dd{
	padding-left:130px;
	font-size:120%;
	line-height:1.5em;
	padding-bottom:5px;
	margin-bottom:5px;
	border-bottom:1px dotted #78502f;
}


#content01 #time{
	float:left;
	width:400px;
	padding:20px;
}