@charset "UTF-8";
/* ***********************************************************************
    SHIROYASHIKI CLINIC - <Page>
*********************************************************************** */
/*
	01 : greeting
    02 : forpatients
	03 : guide
    04 : facility
    05 : access
*/


/* ***********************************************************************
	01 : greeting
*********************************************************************** */
/** ごあいさつ **/
#greeting article .iBox .contents .indentBox #face {
	float     : left;
	width     : 232px;
	height    : auto;
}
#greeting article .iBox .contents .indentBox #face img {
	width : 232px;
	height: auto;
}
#greeting article .iBox .contents .indentBox #greText {
	float : right;
	width : 576px;
	height: auto;
}


/** 医療理念 **/
#greeting article .iBox .contents .indentBox #aboutLogo {
	margin-top: 50px;
}
#greeting article .iBox .contents .indentBox #aboutLogo div {
	float      : right;
	width      : 640px;
	height     : auto;
	margin-left: 32px;
}
#greeting article .iBox .contents .indentBox #aboutLogo img {
	display   : block;
	float     : right;
	width     : 168px;
	height    : auto;
	margin-top: 10px;
	
}

/** プロフィール **/
#greeting article .iBox .contents #profile div {
	float      : left;
	width      : 404px;
	height     : auto;
	margin-left: 32px;
}
#greeting article .iBox .contents #profile div:first-child {
	margin-left: 0;
}
#greeting article .iBox .contents #profile div dl,
#greeting article .iBox .contents #profile div ul {
	width      : 404px;
	min-height : auto;
	margin-top : 10px;
	text-align : left;
	line-height: 1.5;
}
#greeting article .iBox .contents #profile div dl dt {
	float : left;
	width : 96px;
	height: auto;
}
#greeting article .iBox .contents #profile div dl dd {
	float : left;
	width : 308px;
	height: auto;
}
#greeting article .iBox .contents #profile div ul li {
	display   : block;
	width     : 404px;
	margin-top: 10px;
}


@media (max-width:800px) {
	/*#greeting article .iBox .contents .indentBox img {
		display: inline-block;
	}*/
	
	/** ごあいさつ **/
	#greeting article .iBox .contents .indentBox #face {
		float : none;
		width : 100%;
	}
	#greeting article .iBox .contents .indentBox #face img {
		width : 175px;
	}
	#greeting article .iBox .contents .indentBox #greText {
		float     : none;
		width     : 100%;
		margin-top: 30px;
	}
	
	
	/** 医療理念 **/
	#rinen .spImg {
		display   : inline-block;
		margin-top: 15px;
	}
	#greeting article .iBox .contents .indentBox #aboutLogo img {
		display: block;
		float  : none;
		width  : 192px;
		margin : 15px auto 0;
	}
	#greeting article .iBox .contents .indentBox #aboutLogo div {
		float      : none;
		width      : 100%;
		margin-left: 0;
	}
	
	
	/** プロフィール **/
	#greeting article .iBox .contents #profile div {
		float      : none;
		width      : 100%;
		margin-left: 0;!important
	}
	#greeting article .iBox .contents #profile .shikaku {
		margin-top: 30px;
	}
	#greeting article .iBox .contents #profile div dl,
	#greeting article .iBox .contents #profile div ul {
		width      : 100%;
		/*min-height : auto;
		margin-top : 10px;
		text-align : left;
		line-height: 1.5;*/
	}
	#greeting article .iBox .contents #profile div dl dt {
		width : 28.75%;
	}
	#greeting article .iBox .contents #profile div dl dd {
		width : 71.25%;
	}
	#greeting article .iBox .contents #profile div ul li {
		width: 100%;
	}
}



/* ***********************************************************************
    02 : forpatients
*********************************************************************** */
#forpatients article .iBox .contents .indentBox #naika,
#forpatients article .iBox .contents .indentBox #diseases div {
	width        : 356px;
	height       : auto;
	padding      : 20px 24px 16px;
	text-align   : center;
	border-radius: 10px;
}
#forpatients article .iBox .contents .indentBox #naika h4,
#forpatients article .iBox .contents .indentBox #diseases div h4 {
	width : 356px;
	height: 24px;
}
#forpatients article .iBox .contents .indentBox #naika h4 img,
#forpatients article .iBox .contents .indentBox #diseases div h4 img {
	width : 356px;
	height: auto;
}
#forpatients article .iBox .contents .indentBox #naika p,
#forpatients article .iBox .contents .indentBox #diseases div p {
	width      : 356px;
	height     : auto;
	font-size  : 15px;
	line-height: 1.6;
	text-align : left;
}
#forpatients article .iBox .contents .indentBox #naika {
	float           : left;
	background-color: #fde6a2;
}
#forpatients article .iBox .contents .indentBox #diseases {
	float: right;
}
#forpatients article .iBox .contents .indentBox #diseases div:first-child {
	background-color: #fbdaa5;
}
#forpatients article .iBox .contents .indentBox #diseases div:nth-child(2) {
	background-color: #f3eddd;
	margin-top      : 16px;
}
#aboutInflu {
	display      : block;
	background   : url(../images/arrow_brown.png) 809px center no-repeat;
	width        : 834px;
	height       : 60px;
	margin-top   : 24px;
	text-align   : center;
	line-height  : 60px;
	color        : #684206;
	border       : solid 3px #fde08b;
	border-radius: 10px;
}
#aboutInflu:hover {
	background      : url(../images/arrow_brown.png) 809px center no-repeat;
	background-color: #fef6dc;
	text-decoration : none;
}

#forpatients article .iBox .contents .indentBox #belongings {
	background-color: #f3f7db;
	width           : 100%;
	height          : auto;
	padding         : 12px 0;
	border-radius   : 10px;
	text-align      : center;
}
#forpatients article .iBox .contents .indentBox #belongings p {
	line-height: 1.8;
	margin-top : 0;
}

@media (max-width:800px) {
	#forpatients article .iBox .contents .indentBox #naika,
	#forpatients article .iBox .contents .indentBox #diseases div {
		width        : 87.6%;
		padding      : 16px 6.2%;
		border-radius: 15px;
	}
	#forpatients article .iBox .contents .indentBox #naika h4,
	#forpatients article .iBox .contents .indentBox #diseases div h4 {
		width : 100%;
		height: auto;
	}
	#forpatients article .iBox .contents .indentBox #naika h4 img,
	#forpatients article .iBox .contents .indentBox #diseases div h4 img {
		width : 100%;
		height: auto;
	}
	#forpatients article .iBox .contents .indentBox #naika p,
	#forpatients article .iBox .contents .indentBox #diseases div p {
		width    : 100%;
		font-size: 16px;
	}
	#forpatients article .iBox .contents .indentBox #naika {
		float: none;
	}
	#forpatients article .iBox .contents .indentBox #diseases {
		float     : none;
		margin-top: 16px;
	}
	#aboutInflu {
		background   : url(../images/arrow_brown.png) 96% center no-repeat;
		width        : 86%;
		height       : auto;
		padding      : 16px 8% 16px 4%; 
		line-height  : 1.4;
		border       : solid 1% #fde08b;
		border-radius: 15px;
	}
	#aboutInflu:hover {
		background      : url(../images/arrow_brown.png) 96% center no-repeat;
		background-color: #fef6dc;
		text-decoration : none;
	}
	
	#forpatients article .iBox .contents .indentBox #belongings {
		width        : 87.6%;
		padding      : 16px 6.2%;
		border-radius: 15px;
	}
	#forpatients article .iBox .contents .indentBox #belongings p {
		line-height: 1.4;
	}
	#forpatients article .iBox .contents .indentBox #belongings p:first-child {
		text-align: center;
		margin    : 8px 0;
	}
	#forpatients article .iBox .contents .indentBox #belongings p:nth-child(2) {
		font-size : 15px;
		margin-top: 10px;
	}
}


/* ***********************************************************************
	03 : guide
*********************************************************************** */
table {
	width        : 100%;
	height       : auto;
	margin-top   : 32px;
	border-bottom: solid 2px #684206;
}

/** thead **/
table thead tr th {
	background      : url(../images/dotted_nav.png) left center no-repeat;
	background-color: #684206;
	padding         : 6px 0 6px 1px;
	color           : #fff;
	text-align      : center;
	font            : normal 18px/30px "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	word-wrap       : normal;
}
table thead tr th:first-child {
	background-image: none;
}

/** tbody **/
table tbody tr th,
table tbody tr td {
	padding       : 8px;
	border-top    : solid 2px #684206;
	vertical-align: middle;
}
table tbody tr:first-child {
	border-top: 0;
}
table tbody tr.no-border th,
table tbody tr.no-border td {
	border-top: 0;!important
}
table tbody tr.no-border td.dotted {
	background: url(../images/dotted_p.gif) left center repeat-x;
	height    : 2px;
	padding   : 0;!important
}
table tbody tr th {
	background-color: #f3f7db;
	font            : normal 18px/1.3 "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	color           : #684206;
	text-align      : left;
}
#guide table tbody tr th {
	max-width: 192px;
}
table tbody tr th.summary {
	width               : 24px;
	vertical-align      : middle;
	text-align          : center;
	/*-webkit-writing-mode: vertical-rl;
    -ms-writing-mode    : tb-rl;
    writing-mode        : vertical-rl;
	line-height         : 1.1;*/
}
#guide table tbody tr th.summary img {
	display: inline-block;
	width  : 18px;
	height : auto;
}

table tbody tr th.orange {
	background-color: #f8dba2;
}
table tbody tr th.beige {
	background-color: #d9cdaf;
	padding-top     : 16px;
}
table tbody tr td.yoyaku {
	background-color: #fffef1;
	text-align      : center;
	font            : normal 14px/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color           : #333;
}
#guide table tbody tr td.yoyaku {
	width: 88px;
}
table tbody tr td.cont {
	background-color: #fff;
	width           : 512px;
	text-align      : left;
	font            : normal 16px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color           : #333;
}

#please {
	background-color: #fce8c7;
	width           : 90%;
	height          : auto;
	padding         : 8px 5%;
	border-radius   : 20px;
	text-align      : center;
	font            : normal 20px/1.2 "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho",  serif;
	color           : #684206;
}

@media (max-width:800px) {

	/** thead **/
	table thead tr th {
		padding    : 4px 0 4px 1px;
		font-size  : 16px;
		line-height: 26px;
	}
		
	/** tbody **/
	table tbody tr th {
		font-size  : 16px;
		line-height: 1.2;
		text-align : center;
	}
	table tbody tr th.summary {
		width               : 20px;
		/*-webkit-writing-mode: lr-tb;
		-ms-writing-mode    : lr-tb;
		writing-mode        : lr-tb;
		line-height         : 1.0;*/
	}
	#guide table tbody tr th.summary img {
		width  : 16px;
	}
	table tbody tr td.yoyaku {
		width: 50px;
	}
	table tbody tr td.cont {
		width      : auto;
		font-size  : 15px;
		line-height: 1.4;
	}
	.sp-tate-kakko {
		display          : block;
		-moz-transform   : rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform     : rotate(90deg);
		transform        : rotate(90deg);
		filter           : progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
		margin-top       : -2px;
		margin-bottom    : -2px;
	}
	table tbody tr td .brown {
		font-weight  : bold;
		margin-bottom: 8px;
		display      : inline-block;
	}
}







/* ***********************************************************************
    04 : facility
*********************************************************************** */
#facility #gallery {
	position  : relative;
	width     : 840px;
	height    : auto;
	margin-top: 0;
}
#facility ul#box-container {
	margin : 0;
	padding: 0;
}
#facility ul#box-container li.box {
	list-style-type: none;
	float          : left;
	margin-top     : 24px;
	margin-left    : 24px;
	width          : 192px;
}
#facility ul#box-container .box:nth-child(4n+1) {
	clear      : both;
	margin-left: 0;
}
#facility ul#box-container .box a {
	display: block;
	width  : 192px;
	height : 192px;
}
#facility ul#box-container .box a img {
	-webkit-back-visibility: hidden;
	display                : block;
	width                  : 192px;
	height                 : 192px;
	vertical-align         : bottom;
}



@media (max-width:800px) {
	#facility #gallery {
		width     : 95%;
		height    : auto;
	}
	#facility ul#box-container {
		margin : 0;
		padding: 0;
	}
	#facility ul#box-container li.box {
		list-style-type: none;
		float          : left;
		margin-top     : 6%;
		margin-left    : 6%;
		width          : 47%;
	}
	#facility ul#box-container .box:nth-child(2n+1) {
		clear      : s;
		margin-left: 0;
	}
	#facility ul#box-container .box a {
		display: block;
		width  : 100%;
		height : auto;
	}
	#facility ul#box-container .box a img {
		-webkit-back-visibility: hidden;
		display                : block;
		width                  : 100%;
		height                 : auto;
		vertical-align         : bottom;
	}
}






/* ***********************************************************************
    05 : access
*********************************************************************** */
#access #addBox {
	background-color: #f0e9d5;
	width           : 808px;
	height          : auto;
	padding         : 16px;
}
#access #addBox dt {
	float       : left;
	width       : 580px;
	height      : auto;
	padding-left: 4px;
	font        : normal 18px/24px "UD Shin Go Conde90 L", sans-serif;
}
#access #addBox dt span {
	display  : inline-block;
	transform: scale(1.02, 1);
}
#access #addBox dd {
	float       : right;
	background  : url(../images/dotted_v.png) left top repeat-y;
	width       : 221px;
	padding-left: 3px;
}
#access #addBox dd a {
	display    : block;
	background : url(../images/arrow_brown.png) right center no-repeat;
	width      : 221px;
	min-height : 48px;
	text-align : center;
	line-height: 48px;
}
#access #sp_toGooglemap {
	display: none;
}

#access #parking .text,
#access #busStop .text {
	float      : right;
	width      : 496px;
	height     : auto;
	margin-left: 24px;
	text-align : left;
}
#access #busStop table {
	margin-top: 16px;
}
#access table tbody tr td.yoyaku {
	width      : 40%;
	font-size  : 16px;
	line-height: 2.0;
}
#access #parking .img,
#access #busStop .img {
	float : left;
	width : 320px;
	height: auto;
}
#access #busStop .img a {
	display    : block;
	width      : 320px;
	height     : 24px;
	margin-top : 8px;
	text-align : center;
	line-height: 24px;
}


@media (max-width:800px) {
	#access #addBox {
		width  : 96%;
		height : auto;
		padding: 8px 2%;
	}
	#access #addBox dt {
		float       : none;
		width       : 100%;
		height      : auto;
		padding-left: 0;
		font-size   : 14px;
		line-height : 18px;
	}
	#access #addBox dd {
		float  : none;
		display: none;
	}
	#access #addBox dd a {
		display: none;
	}
	
	#access #sp_toGooglemap {
		display   : block;
		width     : 100%;
		height    : auto;
		margin-top: 32px;
		text-align: left;
	}
	#access #sp_toGooglemap h5 {
		font-size  : 14px;
		line-height: 1.2;
		color      : #684206;
	}
	#access #sp_toGooglemap p {
		font-size  : 14px;
		line-height: 1.4;
		margin-top : 8px;
	}
	#access #sp_toGooglemap a {
		display   : block;
		margin-top: 16px;
		width     : 100%;
	}
	#access #sp_toGooglemap a img {
		width : 100%;
		height: auto;
	}

	#access #parking .text,
	#access #busStop .text {
		float      : none;
		width      : 100%;
		margin-left: 0;
	}
	#access #busStop table {
		margin-bottom: 32px;
	}
	#access table tbody tr th font {
		display: block;
	}
	#access #parking .img,
	#access #busStop .img {
		float     : none;
		width     : 100%;
		margin-top: 24px;
	}
	#access #busStop .img a {
		display      : block;
		background   : url(../images/arrow_brown.png) right center no-repeat;
		width        : 94.5%;
		height       : 24px;
		line-height  : 24px;
		padding-right: 5.5%;
		text-align   : right;
	}
}