@charset "utf-8";

/* ==========================================================
	スマホ 640px以下
========================================================== */

@media (max-width: 640px) {
	
	body {
		-webkit-text-size-adjust: 100%;
    	line-height: 1.6;
		font-size: 16px;
	}
	
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	button.drawer-toggle.drawer-hamburger.sp {
		display: block;
	}

		

	/* ****************************************************** ヘッダー */
	header h1 {
		float: none;
		margin-bottom: 10px;
		padding: 0 0 0 10px;
		text-align: left;
		width: 280px;
		margin: 0 auto 0 0;
	}
	header .tel {
		float: none;
		margin: 0 auto 2%;
		/* width: 90%; */
	}
	header{
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		margin: 0 auto 1%;
	}

	header h1 {
		grid-area: 1 / 1 / 2 / 4;
	}
	header .rsv{
		grid-area: 2 / 1 / 3 / 2;
		padding-right: 0;
		width: 100%;
		padding-left: 20%;
	}
	header .tel {
		grid-area: 2 / 2 / 3 / 4;
		width: 70%;
		padding-left: 10%;
	}
	/* header#header_u h1 {
		float: none;
		margin-bottom: 10px;
		padding: 10px 0 0 10px;
		text-align: left;
		width: 280px;
	} */
	/* header#header_u .tel {
		float: none;
		margin: 0 auto 2%;
		width: 90%;
	} */

	button.drawer-toggle.drawer-hamburger.sp {
		background-color: #FFF;
		margin: 3px 3px 0 0;
	}
	nav.drawer-nav {
		background-color: #FFF;
		padding: 0;
	}
	nav ul {
		margin: 0;
		max-width: auto;
		padding: 0;
	}
	nav ul li {
		border-bottom: 1px solid #000;
		float: none;
		padding: 1% 0 1% 3%;
		text-align: left;
		width: 100%;
	}
	nav ul li.active {
		background: none;
	}
	nav ul li:hover {
		background: none;
	}
	nav ul li a {
		border-left: none;
		color: #676762;
		font-weight: bold;
		padding: 5.5% 0 5.5% 5%;
		display: block;
		text-decoration: none;
	}
	nav ul li.last a {
		border-right: none;
	}

	nav ul li.last.rsv{
		border-bottom: none;
    width: 60%;
	}


	/* ****************************************************** メインコンテンツ */
	
	#top #blk2 .box {
		background-size: 65%;
	}
	#top #blk2 .go-clinic {
		padding-left: 0;
		text-align: center;
		width: 100%;
	}
	#top #blk2-1{
		margin-bottom: 10%;
	}
	#top #blk3 .upper .box {
		display: inline-block;
		margin: 0 1% 3%;
		width: 65%;
	}
	#top #blk3 .lower .box {
		display: block;
		margin: 0 auto 3%;
		width: 65%;
	}
	
	#top #blk4 .inner .box {
		padding: 1.5% 2%;
	}
	#top #blk4 .inner .box li {
		background: none;
		padding: 1em 1em 1em 1em;
	}
	#top #blk4 .inner .box li .text {
		display: block;
	}
	#top #blk5 .inner #map_canvas {
		height: 250px;
	}

	#clinic #blk1 .inner .left {
		float: none;
		margin-bottom: 5%;
		width: 100%;
	}
	#clinic #blk1 .inner .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	#clinic #blk2 .inner .box figure {
		float: none;
		margin: 0 0 5% 0;
		text-align: center;
		width: 100%;
	}
	#clinic #blk3 .inner .box table {
		font-size: 16px;
	}
	#clinic #blk4 .inner .box table {
		font-size: 14px;
	}
	#clinic #blk4 .inner .box table td{
		padding: 0.2%;
	}
	#clinic #blk4 .inner .box table td:nth-child(3),#clinic #blk4 .inner .box table td:nth-child(4),#clinic #blk4 .inner .box table td:nth-child(6),#clinic #blk4 .inner .box table td:nth-child(7){
		width: 66px;
	}
	#clinic #blk4 .inner .box table th{
		width: 7.1%;
	}
	#clinic #blk5 .inner .box {
		margin: 0% 0.5% 1.7% 0.5%;
		width: 44.4%;
	}

	#mc #blk1 .inner .left {
		float: none;
		margin-bottom: 7%;
		width: 100%;
	}
	#mc #blk1 .inner .left .go-link {
		text-align: center;
	}

	#mc #blk1 .inner .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	#mc #blk1 .inner .right .photo01,
	#mc #blk1 .inner .right .photo02 {
		display: inline-block;
		margin: 0 1%;
		width: 47%;
	}
	#mc #blk2 .inner table th,
	#mc #blk2 .inner table td {
		display: block;
	}
	#mc #blk2 .inner table th,
	#mc #blk2 .inner table.upper th {
		border-bottom: none;
		width: auto;
	}
	#mc #blk2 .inner table th {
		padding: 3% 1% 2% 3%;
	}
	#mc #blk2 .inner table td {
		padding: 0 4% 2%;
	}

	#oc #blk2 .inner > p {
		text-align: left;
	}
	#oc #blk2 .inner table th,
	#oc #blk2 .inner table td {
		display: block;
	}
	#oc #blk2 .inner table th {
		border-bottom: none;
		padding: 3% 3% 1.5% 3%;
	}
	#oc #blk2 .inner table td {
		padding: 1.5% 3% 3% 3%;
	}
	#oc #blk2 .inner table td ul {
		margin-left: 2em;
	}
	#oc #blk2 .inner table td ul li {
		background: none;
		list-style-image: url(../images/oc/icon_blk2.png);
		padding-left: 0;
	}

	#rehabilitation #blk1 .inner .left {
		float: none;
		margin-bottom: 7%;
		width: 100%;
	}
	#rehabilitation #blk1 .inner .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	#rehabilitation #blk2 .inner .left-l {
		float: none;
		width: 100%;
	}	
	#rehabilitation #blk2 .inner .left-r {
		float: none;
		text-align: center;
		width: 100%;
	}
	#rehabilitation #blk2 .inner p {
		margin-bottom: 5%;
	}
	#rehabilitation #blk3 .inner .box {
		margin: 0% 0.5% 1.7% 0.5%;
		width: 44.4%;
	}

	#hospitalization #blk1 .inner .left {
		float: none;
		margin-bottom: 7%;
		width: 100%;
	}
	#hospitalization #blk1 .inner .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	#hospitalization #blk1 .inner .lower .photo1,
	#hospitalization #blk1 .inner .lower .photo2,
	#hospitalization #blk1 .inner .lower .photo3 {
		display: block;
		width: 100%;
	}
	#hospitalization #blk1 .inner .lower .photo2 {
		margin-top: 4%;
	}
	#hospitalization #blk2 .inner .left {
		float: none;
		margin-bottom: 2%;
		width: 95%;
	}
	#hospitalization #blk2 .inner .right {
		float: none;
		width: 95%;
	}
	#hospitalization #blk3 table th,
	#hospitalization #blk3 table td {
		display: block;
		text-align: left;
		width: 96%;
	}
	#hospitalization #blk3 table th {
		border-bottom: none;
		padding-bottom: 0;
	}
	#hospitalization #blk3 table td {
		border-top: none;
		margin-bottom: 2%;
	}
	#hospitalization #blk5 .inner .box .upper .left {
		float: none;
		margin-bottom: 2%;
		width: 100%;
	}
	#hospitalization #blk5 .inner .box .upper .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	#hospitalization #blk5 .inner .box .lower figure {
		float: none;
		margin: 2%;
		text-align: center;
		width: 100%;
	}
	#hospitalization #blk6 table th,
	#hospitalization #blk6 table td {
		display: block;
		text-align: left;
		width: 96%;
	}
	#hospitalization #blk6 table th {
		border-bottom: none;
		padding-bottom: 0;
	}
	#hospitalization #blk6 table td {
		border-top: none;
		margin-bottom: 2%;
	}

	#he #blk1 .odd .inner img,
	#he #blk1 .even .inner img {
		float: none;
		margin: 2% 0;
	}

	#mi #blk1 .odd .inner .name,
	#mi #blk1 .even .inner .name {
		font-size: 28px;
	}

	#access #blk1 #map_canvas {
		height: 250px;
	}
	#access #blk2 .inner .box .left {
		float: none;
		margin-bottom: 3%;
		width: 100%;
	}
	#access #blk2 .inner .box .right {
		float: none;
		text-align: center;
		width: 100%;
	}
	#access #blk3 .inner .box .left {
		float: none;
		margin-bottom: 3%;
		width: 100%;
	}
	#access #blk3 .inner .box .right {
		float: none;
		margin-bottom: 5%;
		text-align: center;
		width: 100%;
	}

	#news #blk1 .inner {
		padding: 1.5% 2%;
	}
	#news #blk1 .inner li {
		background: none;
		padding: 1em 1em 1em 1em;
	}
	#news #blk1 .inner li .text {
		display: block;
	}



	/* ****************************************************** フッター */
	#footer {
	}
	#footer .inner .box .left {
		float: none;
		margin: 0 auto 5%;
		text-align: center;
		width: 100%
	}
	#footer .inner .box .right {
		float: none;
		text-align: center;
		width: 100%
	}
	#footer .inner .box .right .title {
		background-color: #83accf;
		color: #FFF;
		margin-bottom: 0;
		padding: 0.5% 0
	}
	#footer .copy {
		font-size: 50%;
	}


}

/* ==========================================================
	スマホ 480px以下
========================================================== */

@media (max-width: 480px) {

	div.title {
		margin: 2% 0;
	}
	#top #blk2 {
		margin-top: -3%;
	}
	#top #blk2 .title {
		margin-bottom: 5%;
		width: 90%;
	}
	#top #blk2 .text p {
		font-size: 14px;
		margin-bottom: 2.5%;
	}

	#top #blk3 .upper .box {
		display: block;
		margin: 0 auto 3%;
		width: 85%;
	}
	#top #blk3 .lower .box {
		display: block;
		margin: 0 auto 3%;
		width: 85%;
	}

	#clinic #blk5 .inner .box {
		padding: 4%;
		width: 91%;
	}

	#mc #blk1 .inner .right .photo01,
	#mc #blk1 .inner .right .photo02 {
		display: block;
		margin: 5% 0;
		width: 100%;
	}

	#rehabilitation #blk1 .inner .left .target .title span {
		display: block;
		margin-bottom: 1%;
	}
	#rehabilitation #blk2 .inner .left {
		float: none;
		margin-bottom: 3%;
		width: 95%;
	}	
	#rehabilitation #blk2 .inner .right {
		float: none;
		width: 95%;
	}
	#rehabilitation #blk2 .inner .title2 {
		margin-bottom: 1%!important;
		text-align: center;
	}
	#rehabilitation #blk3 .inner .box {
		padding: 4%;
		width: 91%;
	}
	#rehabilitation #blk3 .inner .box > div {
		text-align: center;
	}

	#hospitalization #blk5 .inner .box .lower img {
		width: 90%;
	}

	#mi #blk1 .odd .inner table th,
	#mi #blk1 .odd .inner table td,
	#mi #blk1 .even .inner table th,
	#mi #blk1 .even .inner table td {
		display: block;
		padding: 1%;
		text-align: left;
		width: 98%;
	}
	#mi #blk1 .odd .inner table th,
	#mi #blk1 .even .inner table th {
		margin-top: 1%;
	}
	#mi #blk1 .odd .inner table td,
	#mi #blk1 .even .inner table td {
		border-top: none;
	}

	#footer .inner .box .left {
		width: 80%
	}

}