@charset "UTF-8";
/* ***********************************************************************
    Otaki Clinic - <Nav>
*********************************************************************** */
/*  (LowerPage)
    1 : Global Nav（SP ハンバーガーメニュー）
	2 : Side Nav
	3 : Footer Nav
	4 : Anchor Nav （診療科目 ローカルナビ）+ PageTop
	5 : Fixed Nav (2025~）スマホのみ
	6 : Header Nav
*/

/* ***********************************************************************
    1 : Global Nav（SP ハンバーガーメニュー）
*********************************************************************** */
html {
	background-color: #333;
}
body {
	position                   : relative;
	background-color           : #fff;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-transition         : -webkit-transform .3s ease-in-out;
	transition                 : transform .3s ease-in-out;
}
#wrapper {
	overflow: hidden;!important
	z-index: 0;
}
#navigation {
	position: absolute;
	left    : -200px;
	top     : 0;
	width   : 200px;!important
	z-index : 100;
}
#navigation a {
	display       : block;
	min-height    : 20px;
	height        : auto;
	padding       : 12px 10px;
	color         : #fff;
	line-height   : 20px;
	vertical-align: middle;
	text-align    : left;
	border-bottom : 1px solid rgba(255,255,255,0.1);
}
#navigation a.active {
	color: #a5c81f;
}
/** ↓HOME **/
#navigation a#homeIcon {
	background     : url(../images/icon_home_green.png) 12px 15px no-repeat;
	background-size: auto 14px;
}
#navigation a#homeIcon img {
	display: inline-block;
	width  : auto;
	height : 14px;
	padding: 3px 8px 3px 2px;
}
#navigation a#homeIcon.active img {
	opacity     : 0;
	filter      : alpha(opacity=0);
	-moz-opacity: 0;
}
/** ↓内視鏡検査について **/
#navigation li#title {
	background-color: #222;
	height          : 20px;
	color           : #fff;
	font-size       : 12px;
	font-weight     : bold;
	line-height     : 20px;
	text-align      : center;
}
#navigation li.lightgray {
	background-color: #474747;
}

#navigation li a#one-minute {
	display        : block;
	background     : url(../images/icon_1minute.png) 9px center no-repeat;
	background-size: 38px 38px;
	width          : 137px;
	/*height         : 35px;
	height: auto;*/
	height: 53px;
	padding-left   : 53px;
	padding-top    : 0;
	padding-top    : 8px;
	padding-bottom : 15px;
}
#navigation li a#one-minute.active {
	background     : url(../images/icon_1minute_green.png) 9px center no-repeat;
	background-size: 38px 38px;
}

/** 240404追加 **/

#navigation #privacyBtn a {
	border-bottom: none;
	/***/
	height     : 20px;
	color      : #777;
	font-size  : 12px;
	font-weight: bold;
	line-height: 20px;
}
#navigation #privacyBtn a.active {
	color: #a5c81f;
}


@media screen and (min-width:768px) {
/** [ TABLET ] **/
	#navigation {
		display: none;
	}
}


/* ***********************************************************************
	2 : Side Nav
*********************************************************************** */
/**[ SP ]**/
#sideNav ul {
	display: none;
}
@media screen and (min-width:768px) {
/** [ TABLET ] **/
	#sideNav ul {
		display: block;
		width        : 225px;
		height       : 300px;
		margin-top   : 1px;
		border-bottom: solid 1px #c3c3c3;
	}
	#sideNav ul li {
		display: block;
		width  : 225px;
		height : 60px;	
	}
	#sideNav ul li a {
		display          : block;
		background-image : url(../images/sideNav.png?ver=1.0.1);
		background-repeat: no-repeat;
		width            : 225px;
		height           : 60px;
		text-decoration  : none;
		text-indent      : -9999px;		
	}
	
	/*****/
	
	#sideNav ul li#sn01 a {
		background-position: 0 0;
	}
	#sideNav ul li#sn01 a:hover {
		background-position: -225px 0;
	}
	#shokaki #sideNav ul li#sn01 a {
		background-position: -450px 0;
	} 
	
	#sideNav ul li#sn02 a {
		background-position: 0 -60px;
	}
	#sideNav ul li#sn02 a:hover {
		background-position: -225px -60px;
	}
	#naika #sideNav ul li#sn02 a {
		background-position: -450px -60px;
	} 
	
	#sideNav ul li#sn03 a {
		background-position: 0 -120px;
	}
	#sideNav ul li#sn03 a:hover {
		background-position: -225px -120px;
	}
	#pediatric #sideNav ul li#sn03 a {
		background-position: -450px -120px;
	} 
	
	#sideNav ul li#sn04 a {
		background-position: 0 -180px;
	}
	#sideNav ul li#sn04 a:hover {
		background-position: -225px -180px;
	}
	#kenshin #sideNav ul li#sn04 a {
		background-position: -450px -180px;
	} 
	
	#sideNav ul li#sn05 a {
		background-position: 0 -240px;
	}
	#sideNav ul li#sn05 a:hover {
		background-position: -225px -240px;
	}
	#kinen #sideNav ul li#sn05 a {
		background-position: -450px -240px;
	} 
}

/* ***********************************************************************
	3 : Footer Nav　（PCサイト版／pageTopへ）
*********************************************************************** */
#spFooter #footerNav {
	width     : 100%;
	height    : 45px;
	border-top: solid 2px #aecd20;
}

#spFooter #footerNav ul #fn01 {
	float              : left;
	width              : 227px;
	height             : 35px;
	padding            : 5px 0;
	text-align         : center;
}
#spFooter #footerNav ul #fn01 a {
	display            : block;
	background-image   : url(../images/btn_PCsite.gif);
	background-size    : 207px 35px;
	background-position: left top;
	background-repeat  : no-repeat;
	width              : 207px;
	height             : 35px;
	margin             : 0 auto;
	text-indent        : -9999px;
}
#spFooter #footerNav ul #fn02 {
	float              : right;
	background-image   : url(../images/btn_pageTop.gif);
	background-size    : 93px 35px;
	background-position: left 5px;
	background-repeat  : no-repeat;
	width              : 93px;
	height             : 45px;
}
#spFooter #footerNav ul #fn02 a {
	display    : block;
	width      : 91px;
	height     : 35px;
	margin-left: 2px;
	padding    : 5px 0;
	text-indent: -9999px;
}

@media screen and (min-width:768px) {
/** [ TABLET ] **/
	#spFooter {
		display: none;
	}
	#pcFooter {
		display: block;
	}
	/***/
	#footerNav {
		width : 540px;
		height: 63px;
	}
	#footerNav ul {
		width     : 540px;
		height    : 21px;
		text-align: left;
	}
	#footerNav ul li {
		float : left;
		height: 21px;
	}
	#footerNav ul li a {
		display          : block;
		background-image : url(../images/footerNav.gif?ver=0.0.2);
		background-repeat: no-repeat;
		background-size  : 540px 76px;
		height           : 21px;
		font-size        : 5px;
		text-indent      : -9999px;
	}
	
	/*****/
	
	#footerNav ul li#fn01 a {
		width              : 53px;
		background-position: 0 0;
	}
	#footerNav ul li#fn01 a:hover {
		background-position: 0 -42px;
	}
	
	#footerNav ul li#fn02 a {
		width              : 67px;
		background-position: -53px 0;
	}
	#footerNav ul li#fn02 a:hover {
		background-position: -53px -42px;
	}
	
	#footerNav ul li#fn03 a {
		width              : 89px;
		background-position: -120px 0;
	}
	#footerNav ul li#fn03 a:hover {
		background-position: -120px -42px;
	}
	
	#footerNav ul li#fn04 a {
		width              : 99px;
		background-position: -209px 0;
	}
	#footerNav ul li#fn04 a:hover {
		background-position: -209px -42px;
	}
	
	#footerNav ul li#fn05 a {
		width              : 95px;
		background-position: -308px 0;
	}
	#footerNav ul li#fn05 a:hover {
		background-position: -308px -42px;
	}
	/**/
	#footerNav ul li#fn06 a {
		width              : 108px;
		background-position: 0 -21px;
	}
	#footerNav ul li#fn06 a:hover {
		background-position: 0 -63px;
	}
	
	#footerNav ul li#fn07 a {
		width              : 53px;
		background-position: -108px -21px;
	}
	#footerNav ul li#fn07 a:hover {
		background-position: -108px -63px;
	}
	
	#footerNav ul li#fn08 a {
		width              : 60px;
		background-position: -161px -21px;
	}
	#footerNav ul li#fn08 a:hover {
		background-position: -161px -63px;
	}
	
	#footerNav ul li#fn09 a {
		width              : 95px;
		background-position: -221px -21px;
	}
	#footerNav ul li#fn09 a:hover {
		background-position: -221px -63px;
	}
	
	#footerNav ul li#fn10 a {
		/*width              : 124px;*/
		width: 83px;
		background-position: -316px -21px;
		/*
		border: solid 1px blue;*/
	}
	#footerNav ul li#fn10 a:hover {
		background-position: -316px -63px;
	}
	
	#footerNav ul li#fn_line a {
		width              : 1px;
		margin             : 0;
		padding            : 0;
		background-position: -397px -21px;
	}
	#footerNav ul li#fn_line a:hover {
		background-position: -397px -21px;
		cursor             : default;
	}
	
	#footerNav ul li#fn11 a {
		width              : 90px;
		background-position: -399px -21px;
		/*
		border: solid 1px red;*/
	}
	#footerNav ul li#fn11 a:hover {
		background-position: -399px -63px;
	} 
	
	#footerNav ul li#fn12 a {
		display            : block;
		background-image   : url(../images/footerNavPrivacy.gif?ver=0.0.1);
		background-repeat  : no-repeat;
		background-size    : 100px 42px;
		background-position: 0 0;
		width            : 100px;
		height           : 21px;
		font-size        : 5px;
		text-indent      : -9999px;
	}
	#footerNav ul li#fn12 a:hover {
		background-position: 0 -21px;
	} 

}


/* ***********************************************************************
	4 : Anchor Nav（診療科目 ローカルナビ）+ PageTop
*********************************************************************** */

#anchorNav {
	display         : block;
	border-top      : solid 1px #c3c3c3;
	background-color: #f5f5f5;
	width           : 100%;
	height          : auto;
	margin          : 0;
	text-align      : center;
}
#anchorNav ul {
	display      : block;
	width        : auto;
	min-height   : 40px;
	margin       : 0 10px;
	text-align   : left;
	border-bottom: solid 1px #fff;
	
}
#anchorNav ul li {
	float          : left;
	background     : url(../images/arrow_anchor.png) left center no-repeat;
	background-size: 10px auto;
	margin-left    : 4%;
	padding-left   : 16px;
}
#anchorNav ul li:first-child {
	margin-left: 0;
}

#anchorNav ul li a {
	display    : block;
	width      : auto;
	min-height : 40px;
	font-size  : 13px;
	font-weight: bold;
	line-height: 40px;
	color      : #885f38;
	white-space: nowrap;
	letter-spacing: -0.01em;
}


/***/

.pageTop {
	position: relative;
	width   : auto;
	height  : 20px;
	margin  : 20px 10px 40px;
}
.pageTop a {
	float      : right;
	display    : block;
	min-width  : 90px;
	font-size  : 13px;
	font-weight: bold;
	line-height: 20px;
	text-align : right;
	color      : #885f38;
}
.pageTop a img {
	display       : inline-block;
	width         : 11px;
	height        : 11px;
	padding-left  : 6px;
	padding-bottom: 5px;
}
@media screen and (min-width:768px) {
/** [ TABLET ] **/
	#spFooter .pageTop {
		display: none;
	}
}



/* ***********************************************************************
	5 : Fixed Nav (2025~）スマホのみ
*********************************************************************** */
#fixed {
	position  : fixed;
	left      : 0;
	bottom    : 0;
	width     : 100%;
	height    : 60px;
	z-index   : 100;
	box-shadow: 0 -8px 8px 0 rgba(128, 128, 128, 0.25);	
}
#fixed_01,
#fixed_02 {
	float  : left;
	display: block;
	width  : 50%;
	height : 60px;
}
#fixed_01 {
	background-color: #a5c81f;
}
#fixed_02 {
	background-color: #00b900;
}
#fixed_01 img,
#fixed_02 img {
	width : auto;
	height: 60px;
	margin: 0 auto;
}
@media screen and (min-width:768px) {
/** [ TABLET ] **/
	#fixed {
		display: none;
	}
}


/* ***********************************************************************
	6 : Header Nav
*********************************************************************** */

@media screen and (min-width:768px) {
/** [ TABLET ] **/
	header #header_innerBox #globalNav {
		float        : left;
		position     : relative;
		display      : block;
		max-width    : 605px;
		width        : auto;
		height       : 49px;
		margin-left  : 60px;
		margin-top   : 14px;
		margin-bottom: 17px;
		
		/*border: solid 1px red;*/
	}
	header #header_innerBox #globalNav ul {
		width     : auto;
		height    : 49px;
		text-align: left;
	}
	header #header_innerBox #globalNav ul li {
		float      : left;
		display    : block;
		width      : auto;
		height     : 49px;
		margin-left: 42px;
	}
	header #header_innerBox #globalNav ul li:first-child {
		margin-left: 0;
	}
	header #header_innerBox #globalNav ul li a {
		color      : #444;
		font-size  : 14px;
		font-family: "UD Shin Go Medium", sans-serif;
		line-height: 49px;
	}
	header #header_innerBox #globalNav ul li a:hover {
		opacity        : 0.6;
		filter         : alpha(opacity=60);
		text-decoration: none;
	}
	/***/
	a#hn01 {
		position        : absolute;
		top             : 0;
		right           : 0;
		display         : block;
		background-color: #6b9d04;
		width           : 90px;
		height          : 24px;
		font            : bold 12px/24px "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
		text-align      : center;
		color           : #fff;
	}
	a#hn01:hover {
		background-color: #88b211;
		text-decoration : none;
	}
}