@charset "UTF-8";
/*
 * index.css
 *
 */

/* 全デバイス共通
---------------------------------------- */

.blue{color:#004EA2;}

#newsWrap .up_ymd{display:none;}


/*===============================================
●画面の横幅が640px以上(PC/タブレット)
===============================================*/
@media screen and (min-width: 737px) {

	.mainImage{
		height:48vw;
		max-height:500px;
		background:url(../../images/index/img_main.jpg) no-repeat center;
		background-size:cover;
	}
	
	.mainImage h1{
		display:block;
		width:940px;
		padding: 50px 0 0;
		margin:0 auto ;
		box-sizing: border-box;
		text-align: center;
	}
	
	
	#drawernav {
	width: 816px;
	margin: 10px auto 50px;
	}
	
#drawernav ul li:first-child {
	display:none;
}
	
	
/* contents */	
	#index .lead{
		text-align: center;
		font-size:30px;
		margin-bottom:20px;
		line-height:1.45em;
	}
	
	#box01{
		padding:40px 0;
		box-sizing:border-box;
	}
	
	#box01 .opening_hours_wrap{
		width: 630px;
		float: left;
		margin-right:25px;
	}
	
	#box01 .opening_hours_wrap .boxL{
		width:112px;
		height:170px;
		padding:35px 0 0;
		box-sizing: border-box;
		border: 3px solid #68C5DE;
		border-radius: 10px;
		text-align: center;
		background:#fff;
		text-align: center;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#box01 .opening_hours_wrap .boxL h3{
		font-size:30px;
		margin-bottom:1vw;
	}
	
	#box01 .opening_hours_wrap .boxL p{
		text-align:center;
	}
	
	#box01 .opening_hours_wrap .boxR{
		width:500px;
	}
	
	/*診察時間*/
	
	#box01 table.opening_hours{
		height:170px;
		margin-bottom: 30px;
		border-collapse: separate;
		border: 3px solid #68C5DE;
		border-radius: 10px;
		background:#fff;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#box01 table.opening_hours th,#box01 table td{
		text-align: center;
		vertical-align: middle;
		box-sizing: border-box;
	}
	
	#box01 table.opening_hours th{
		width:170px;
		border-left: 2px solid #68C5DE;
		border-top: 2px solid #68C5DE;
	}
	
	#box01 table.opening_hours th:first-child{
		border-left:none;
	}
	#box01 table.opening_hours td{
		width:54px;
		border-left: 2px solid #68C5DE;
		border-top: 2px solid #68C5DE;
	}
	
	#box01 table.opening_hours td:first-child{
		border-left:none;
	}
	
	#box01 table.opening_hours tr.first_block th,
	#box01 table.opening_hours tr.first_block td {
		border-top:none;
	}
	
	/*休診日*/
	
	#box01 .closed_day p{
		width:112px;
		height:170px;
		padding: 65px 0 0;
		margin:0 15px 15px 0;
		box-sizing:border-box;
		font-size:30px;
		border-radius: 10px;
		background:#FFFFD9;
		text-align: center;
		float: left;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#box01 .closed_day ul{
		display:block;
		height:170px;
		float: left; 
	}

	
	#box01 .closed_day ul li{
		display:block;
		width:153px;
		height:46px;
		margin-bottom:15px;
		box-sizing:border-box;
		color:#F65BAC;
		border-radius: 10px;
		background:#FFFFD9;
		text-align: center;
		line-height:46px;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#box01 .reserve{
		width: 358px;
		height:105px;
		padding:10px 10px 10px 120px;
		margin-bottom:10px;
		box-sizing:border-box;
		font-size:22px;
		line-height:1.3em;
		color:#fff;
		background: url(../../images/index/bg_reserve.png) no-repeat #F771B7 2vw center;
		border-radius: 10px;
		float:left;
	}

	#box01 .first_visit{
		width:558px;
		height:105px;
		padding:10px 20px;
		margin-bottom: 10px;
		box-sizing:border-box;
		background:#fff;
		border-radius: 10px;
		float:right;
	}
	
	#box01 .first_visit p{
		width:60%;
		float:left;
		font-size:20px;
		color:#F771B7;
		line-height:1.4em;
	 }
	
	#box01 .first_visit a img{
		width:174px;
		float:right;
		border-radius: 10px;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	/*#box02*/
	
	#box02 .information{
		border:2px solid #68C5DE;
		border-radius:5px;
		margin:3vw 0;
	}
	
	#box02 .information h2{
		display:block;
		background:#68C5DE;
	}
	
	#box02 .information h2{
		padding:2vw 3vw;
		background: url(../../images/index/txt_information.png) no-repeat 3.5vw center #68C5DE;
		background-size:27.5% auto;
		color:#fff;
		text-align:right;
	} 
	
	#box02 iframe{
		width: 940px;
		height:150px;
		/*overflow-y:scroll;
		overflow-x:hidden;*/
		
	} 
	
	#box02 .newsBox{
		width: 940px;
		height:160px;
		overflow: auto;
		-webkit-overflow-scrolling:touch;
	}
	
	
	
	/*#box03*/
	
	#box03 .glasses_info,
	#box03 .lens_info{
		width:450px;
		height:180px;
		margin-bottom:3vw;
		box-sizing: border-box;
		border:2px solid #1398DE;
		border-radius:10px;
		text-align: center;
	}
	
	#box03 .glasses_info p,
	#box03 .lens_info p{
		font-size:25px;
		text-align: center;
		line-height:1.8em;
	}
	
	#box03 .glasses_info{
	padding:25px 0 0 220px;
	background:url(../../images/index/btn_bg01.jpg) no-repeat left center;
	background-size: auto 100%;
	letter-spacing: 0.3em;
		float: left;
	}
	
	#box03 .lens_info{
	padding:5px 0 5px 200px;
	background:url(../../images/index/btn_bg02.jpg) no-repeat left center;
	background-size: auto 100% ;
	margin-bottom: 4vw;
		float:right;
	}
	
	#box03 .lens_info a{
		display: block;
		margin-bottom:10px;
	}
	
	#access{margin-top:0;}
	
	
	
}

/*===============================================
●画面の横幅が640px以下(スマホ）
===============================================*/
@media screen and (max-width: 736px) {
	
	#index .indexNav{
		width:90%;
		margin:0.5vw auto;
	}	
	
	#index .indexNav li{
		display:block;
		width:14vw;
		float: left;
		margin:3vw 0.4vw;
		border-radius: 50%;
	}
	
	
	#index .indexNav li:nth-child(odd)/*奇数*/ {
	/*background: #ffffff;*/
background: -moz-linear-gradient(top, #ffffff 0%, #6ad936 85%);
background: -webkit-linear-gradient(top, #ffffff 0%,#6ad936 85%);
background: linear-gradient(to bottom, #ffffff 0%,#6ad936 85%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6ad936',GradientType=0 );
}

#index .indexNav li:nth-child(even)/*偶数*/ {
	background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #3c95e2 85%);
background: -webkit-linear-gradient(top, #ffffff 0%,#3c95e2 85%);
background: linear-gradient(to bottom, #ffffff 0%,#3c95e2 85%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3c95e2',GradientType=0 );
}
	
	#index .indexNav li img{
		border-radius: 50%;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#index .lead{
		text-align: center;
		font-size:3.5vw;
		margin-bottom:3.5vw;
	}
	
	
	#box01{
		padding:4.6vw 0;
		box-sizing:border-box;
	}
	
	#box01 .boxL{
		width:15.6vw;
		padding:2.5vw 0 0.8vw;
		border: 2px solid #68C5DE;
		border-radius: 5px;
		text-align: center;
		background:#fff;
		text-align: center;
		font-size:0.77em;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#box01 .boxL h3{
		font-size:3.5vw;
		margin-bottom:1vw;
	}
	
	#box01 .boxL p{
		text-align:center;
	}
	
	#box01 .boxR{
		width:72.5vw;
	}
	
	/*診察時間*/
	
	#box01 table.opening_hours{
		margin-bottom: 3vw;
		border-collapse: separate;
		border: 2px solid #68C5DE;
		border-radius: 5px;
		background:#fff;
		box-shadow: 0px 2px 3px -1px #313131;
		font-size:2.8vw;
	}
	
	#box01 table.opening_hours th,#box01 table td{
		text-align: center;
		padding: 0.54vw;
		box-sizing: border-box;
	}
	
	#box01 table.opening_hours th{
		width:24vw;
		border-left: 2px solid #68C5DE;
		border-top: 2px solid #68C5DE;
		font-size:;
	}
	
	#box01 table.opening_hours th:first-child{
		border-left:none;
	}
	#box01 table.opening_hours td{
		width:7.8vw;
		border-left: 2px solid #68C5DE;
		border-top: 2px solid #68C5DE;
	}
	
	#box01 table.opening_hours td:first-child{
		border-left:none;
	}
	
	#box01 table.opening_hours tr.first_block th,
	#box01 table.opening_hours tr.first_block td {
		border-top:none;
	}
	
	/*休診日*/
	
	#box01 .closed_day{
		padding-bottom: 1vw;
		margin-bottom: 2vw;
	}
	
	#box01 .closed_day p{
		width:15.2vw;
		padding: 1vw 0 0.5vw;
		box-sizing:border-box;
		font-size:3.5vw;
		border-radius: 5px;
		background:#FFFFD9;
		text-align: center;
		float: left;
		box-shadow: 0px 2px 3px -1px #313131;
	}

	
	#box01 .closed_day ul li{
		display:block;
		width:22.1vw;
		padding:0.8vw;
		margin-left:2.5vw;
		box-sizing:border-box;
		color:#F65BAC;
		border-radius: 5px;
		background:#FFFFD9;
		text-align: center;
		float: left;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	#box01 .reserve{
		width: 100%;
		padding:2vw 1vw 2vw 8vw;
		box-sizing:border-box;
		text-align:center;
		font-size:3.2vw;
		color:#fff;
		background: url(../../images/index/bg_reserve.png) no-repeat #F771B7 2vw center;
		background-size:7% auto;
		border-radius: 5px;
	}

	#box01 .first_visit{
		margin:3vw 0 0.5vw;
		padding:2vw;
		background:#fff;
		border-radius: 5px;
	}
	
	#box01 .first_visit p{
		width:77%;
		float:left;
		font-size:2.7vw;
		color:#F771B7;
	 }
	
	#box01 .first_visit a img{
		width:20.6%;
		float:right;
		border-radius: 5px;
		box-shadow: 0px 2px 3px -1px #313131;
	}
	
	/*#box02*/
	
	#box02 .information{
		border:2px solid #68C5DE;
		border-radius:5px;
		margin:3vw 0;
	}
	
	#box02 .information h2{
		display:block;
		background:#68C5DE;
	}
	
	#box02 .information h2{
		padding:2vw 3vw;
		background: url(../../images/index/txt_information.png) no-repeat 3.5vw center #68C5DE;
		background-size:48% auto;
		color:#fff;
		text-align:right;
	} 
	
	#box02 iframe{
		border:none;
		display: block;
		width: 100%;
		height:100%;
		
	}
	
	#box02 .newsBox{
		width: 100%;;
		height:17.1vw;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	
	/*#box03*/
	
	#box03 .glasses_info,
	#box03 .lens_info{
		padding:2vw 3vw 2vw 27vw;
		margin-bottom:3vw;
		box-sizing: border-box;
		border:2px solid #1398DE;
		border-radius:5px;
		text-align: center;
	} 
	
	#box03 .glasses_info p,
	#box03 .lens_info p{
		font-size:3.2vw;
		text-align: center;
		line-height:1.8em;
	}
	
	#box03 .glasses_info{
	background:url(../../images/index/btn_bg01.jpg) no-repeat left center;
	background-size: auto 130%;
	letter-spacing: 0.3em;
	}
	
	#box03 .glasses_info img{
		width:28vw;
	}
	
	#box03 .lens_info{
	background:url(../../images/index/btn_bg02.jpg) no-repeat left center;
	background-size: auto 130% ;
	margin-bottom: 4vw;
	}
	
	#box03 .lens_info a{
		display: block;
		width:28vw;
		float: left;
	}
	
	#box03 .lens_info a:nth-child(2){
		float:right;
	}
	
	#footer{margin-top:0;}


}