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

@media screen and (max-width:699px){

	.sp{display: inherit;}
	.pc{display: none !important;}
	section,.content{width: 100%;}

	header{padding: 15px;text-align: left;}
	header > *:not([class="logo"]){display: none;}
	header .logo{margin-right: 0;}
	header .logo img{width: 60vw;}

	label[for="gnav"]{
		width: 28px;
		padding:8px 0;
		display: inline-block;
		border-bottom: 1.5px solid #00a770;
		box-sizing: border-box;
		position: absolute;
		top:20px;
		right: 10px;
		z-index: 9999;
	}
	label[for="gnav"]:before,
	label[for="gnav"]:after{
		content: "";
		width: 100%;
		height: 1.5px;
		background: #00a770;
		position: absolute;
		left: 0;
		z-index: 9999;
		transition-duration: .3s;
	}
	label[for="gnav"]:before{top: 0;}
	label[for="gnav"]:after{top:50%;}
	nav{margin-bottom: 0;}
	nav ul{
		width: 100%;
		display: block;
		overflow: hidden;
		text-align: left;
		position: fixed;
		top:0;
		left: 100%;
		bottom: 0;
		padding: 30px 30px 60px;
		margin: 0;
		background: #fff;
		z-index: 99;
		transition-duration: .3s;
		overflow-y: auto;
	}

	nav ul li{display: block;text-align: left;}

	nav li a img{
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 0;
	}

	nav ul li a{
		color: #fff;
		font-weight: 300;
	}

	.link_box li:first-child {
		border: 0;
	}

	.link_box {
		width: 210px;
		background: #00a770;
		padding: 10px 0 0;
		margin: 0 auto;
		top: 0;
		position: static;
	}

	.link_box li {
		float: left;
		vertical-align: middle;
		text-align: center;
		margin: 0 17.5px 0 0;
	}

	.link_box li:last-child {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.link_box li a {
		display: block;
		text-decoration: none;
		color: #fff;
		font-size: 14px;
		letter-spacing: 0;
	}

	.link_box li a img {
		width: 50px;
		height: 50px;
		margin: 0 0 5px;
	}

	input#gnav:checked ~ ul{
		left:0;
		background: #00a770;
	}
	input#gnav:checked ~ label[for="gnav"]{border: none;}
	input#gnav:checked + label[for="gnav"]:before,
	input#gnav:checked + label[for="gnav"]:after{background: #fff;}
	input#gnav:checked + label[for="gnav"]:before{transform: rotate(45deg) translate(5.5px,5.5px);}
	input#gnav:checked + label[for="gnav"]:after{transform: rotate(-45deg);}

	.top h2 + p{padding:0 20px;}
	.top h2 + p br{display: none;}
	.mv{margin-bottom: 30px;}
	.mv .catch img{width: 90vw;}

	.mv,.mv .photo,
	.slick-slider .slick-track,
	.slick-slider .slick-list{width: 100%;height: 405px;}

	/*main.top > section:first-of-type{padding:0 20px;}*/
	main.top > section{padding:0 20px;}

	.departments{width: 100%;}
	.departments td{display: none;}
	.departments th a{
		display: flex;
		font-size: 1rem;
		justify-content: center;
		flex-wrap:wrap;
		padding: 15px 0 20px;
	}
	.departments th span{
		flex-basis: 100%;
		margin-bottom: 5px;
		order: -1;}
	.departments th a:before{
		content: "一覧を見る";
		order: 1;
	}
	.departments th a:after{
		flex-basis: 100%;
		order: 2;
		border: none;
		content: "▼";
		transform: scale(1,0.8);
		text-decoration:none;
		margin:5px auto 0;
	}

	.feature{border: none;padding: 0;}
	.feature ul{
		width: 100%;
		flex-wrap: wrap;}
	.feature ul li{
		flex-basis: calc(100%/2 - 5px/2);
		margin-bottom: 5px;
	}
	.feature ul li:not(:last-child){margin-right: 0;}
	.feature ul li:nth-child(even){margin-left: 5px;}
	.feature ul h3{text-decoration: underline;}

	.feature ul li img{width: 35vw;}
	.feature ul li:first-child img{width: auto;height: 33vw;}

	.outpatient{padding: 0 20px;}
	.outpatient ul{
		width: 100%;
		margin-bottom: 0;
	}

	.outpatient ul li{
		border: none;
		position: relative;
		overflow: hidden;
		padding-bottom: 0;
		margin-bottom: 20px;
		margin-right: 0;
	}
	.outpatient ul:first-of-type{display: block;}
	.outpatient ul:first-of-type li{
		background: none;
		padding:60px 0 0;}
	.outpatient ul li .detail{display: none;}


	.outpatient ul li img{
		position: absolute;
		width: 120%;
		height: 100%;
		top: 0;
		right: 0;
		bottom:0;
		left: 0;
		z-index: -1;
	}
	.outpatient ul li a{
		text-align: center;
		padding: 15px 20px;
	}
	.outpatient ul:first-of-type li a{background: rgba(255,255,255,.9);}
	.outpatient ul h3{
		text-decoration: underline;
		margin-bottom: 10px;
	}
	.outpatient ul h3 + p{
		text-align: center;
		margin-bottom: 0;}

	.outpatient ul:last-of-type li{flex-basis: calc(100%/2 - 15px/2);}

	.hospitalization{
		padding: 0 0 30px;
		margin-bottom: 0;
	}
	.hospitalization ul{
		width: 100%;
		display: block;
		padding: 0 30px;
	}
	.hospitalization li a{text-decoration: underline;}
	.hospitalization li a:after{display: none;}
	.hospitalization h2{
		background: #fff;
		color: #333;
		padding: 0 0 20px;
		margin-bottom: 40px;
	}
	.hospitalization h2 span{color: #f48656;}

	section.news{
		width: 100%;
		background: #e5f6f0;
		padding-bottom: 20px;
		margin-bottom: 30px;
	}

	section.news h2{margin-bottom: 0;}
	.news_in{padding: 0 20px 10px;}
	.news dl{
		width: 100%;
		background: #fff;
		padding:25px 20px;
		margin-bottom: 20px;
		font-weight: 500;
	}

	.news dl dt{
		display: block;
		color: #333;
		font-size: 0.85em;
		padding-bottom: 5px;
		position: relative;
		border-bottom: 1px solid;
		margin-bottom: 15px;
	}
	.news dl dt span{
		color: #00a770;
		margin: 0;
		padding: 0;
		border: none;
		position: absolute;
		right: 0;
		bottom: 5px;
		font-size: 0.92rem;
	}
	.news dl dt em{
		font-size: 1.07rem;
		display: block;}

	.news dl dd{width:100%;}

	.news_in .btn{
		position: static;
		padding: 0 20px;
		margin-top: 30px;
		font-size: 1em;
	}
	.news_in .btn a{
		display: block;
		text-decoration: underline;
	}
	.news_in .btn a:after{display: none;}

	.facility .btn a{
		width: 80%;
		border: 1px solid;
		background: #fff;
		text-decoration: underline;
	}
	.facility .btn a:after{
		content: "を見る";
		display: inline-block;
		background: none;
		width: auto;
		height: auto;
		margin: 0;
		vertical-align: unset;
		text-decoration: underline;
	}
	.facility .btn a:hover:after{background: none;}


	footer{
		display: flex;
		flex-wrap: wrap;
		border-top: none;}
	footer .info_area{
		flex-basis: 100%;
		display: block;
		padding: 0 40px;
		margin-bottom: 30px;
		order: 1;
	}

	.info_area .logo_area{
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-right:none;
	border-bottom: 1px solid #00a770;
	}

	.info_area .contact {
		width: 100%;
		border: none;
		margin: 0 auto;
		text-align: center;
	}

	.info_area .logo_area img{width: 70vw;}

	.contact p:not([class]),.contact .mail{display: none;}
	.contact p img{vertical-align: middle;}
	.contact .tel{
		font-size: 7vw;
		text-align: center;}
	.contact{
		margin-bottom: 10px;
	}

	/* .mailmagazine a{font-size: 1em;text-decoration: underline;}
	.mailmagazine a br{display: none;} */

	footer .link_box_f {
		width: 212px;
		margin: 0 auto;
		padding: 25px 0 0;
		height: auto;
	}

	footer .link_box_f li {
		float: left;
		text-align: center;
		margin: 0 20px 0 0;
	}

	footer .link_box_f li:last-child {
		margin: 0;
	}

	footer .link_box_f li a {
		display: block;
		text-decoration: none;
		color: #333;
		font-size: 14px;

	}

	footer .map{flex-basis: 100%;order: 3;height: 340px;}
	footer .map iframe{height: 340px;}
	.foot_department{display: none;}

	.foot_nav{
		background: none;
		flex-basis: 100%;
		order: 2;
		padding: 20px 0;
	}
	.foot_nav ul{display: none;}

	footer .side_fix{
		flex-basis: 100%;
		position: static;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		display: flex;
		justify-content: space-between;
		display: none;
	}
	footer .side_fix p{
		width: calc(50% - 5px);
		vertical-align: top;
	}

	footer .side_fix .personnel{order: 2;}
	footer .side_fix .personnel a{
		background: #fff;
		color: #f48656;
		border: 1px solid;
	}
	footer .side_fix .personnel a:before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		width:20px;
		height:25px;
		background: url(../images/common/ico_personnel2.png) no-repeat center center;
		background-size: 100%;
		margin-right: 5px;

	}

	footer .side_fix .zaidan a img{
		width: auto;
		height: 25px;
		vertical-align: middle;
		margin: 0 5px 0 0;}

	.foot_nav section > div {
		max-width: 375px;
		padding: 0 17.5px;
		margin: 0 auto;
	}

	.foot_nav section > div .link_list {
		float: left;
		max-width: 107px;
		width: 100%;
		margin: 0 8px 0 0;
	}

	.foot_nav section > div .link_list a {
		display: block;
		height: 52.5px;
		border: 1px solid #000;
	}

	.foot_nav section > div .link_ghc a {
		text-align: left;
		padding: 4.5px 7px;
		border: solid 1px #bf9e36;
	}

	.foot_nav section > div .link_ghc a img {
		width: 40px;
	}

	.foot_nav section > div .link_ghc a span {
		display: inline-block;
		font-size: 10px;
		color: #bf9e36;
		margin: 0 0 0 5px;
		letter-spacing: 0.15em;
	}

	.foot_nav section > div .link_jcep a {
		text-align: left;
		padding: 13px 27px;
		border: 1px solid #000;
	}

	.foot_nav section > div .link_kes {
		margin: 0;

	}

	.foot_nav section > div .link_kes a {
		text-align: left;
		padding: 9.5px 25px;
		border: 1px solid #000;
	}

	.copy{
		flex-basis: 100%;
		order: 4;
		font-size: 2vw;
		padding-bottom: 70px;
	}
	.pagetop{
	position: fixed;
	right: 5px;
	bottom: 100px;
}

	.cv_area{
		position: fixed;
		align-content: stretch;
		align-items: center;
		background: #fff;
		border-top: 1px solid #00a770;
		width: 100%;
		display: flex;
		bottom:0;
		left: 0;
		z-index: 999;
	}
	.cv_area li{
		flex-grow: 1;
		text-align: center;
	}
	.cv_area a{
		display: block;
		padding: 10px 0;
		font-weight: 500;
		font-size: 0.92em;
		min-height: 43px;
	}
	.cv_area li:not(:last-child) a{border-right: 1px solid #00a770;}
	.cv_area img{
		display: block;
		width: auto;
		height: 20px;
		margin:0 auto 5px;
	}


	/* SUB---------------------------------------------------------------------------*/
	main.sub{
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	main.sub img{max-width: 100%;}
	main.sub table{max-width: 100%;}
	main.sub table th,main.sub table td{padding: 5px;}

	main.sub h1{font-size: 7vw;}
	main.sub h1 span{font-size: 5vw;}
	main.sub h1 em{font-size: 4vw;}

	main.sub h2{
		padding: 0 11vw 10px;
		min-height: 9.1vw;
	}

	.float_l img,
	.float_r img{
		float: none;
		display: block;
		margin:0 auto 20px;}

	/*------190205追記ここから------*/
	.box2,.box2:nth-child(2){
		display: block;
		float: none;
		width: 300px;
		margin: 30px auto;
	}
	.box3,.box3:nth-child(3){
		display: block;
		float: none;
		width: 300px;
		margin: 30px auto;
	}
	main.sub table.t_b tr,main.sub table.t_b th,main.sub table.t_b td{
		display: block;
		width: 100%;
	}
	main.sub table.t_b tr:last-child{ border-bottom: 1px solid #00a770;}
	main.sub table.t_b th,main.sub table.t_b td{ border-bottom: none;}
	/*------190206追記ここまで------*/

	/*------190206追記ここから------*/
	main.sub h2.access_free{
		background-position: left -8vw bottom,right -2vw bottom;
		background-size: auto 18vw,auto 9vw;
		padding-top: 8vw;
	}
	main.sub h2.access{
		background-position: left -10vw bottom,right -2vw bottom;
		background-size:auto 8vw;
	}
	.timetable{font-size: 0.85em;}
	.timetable td{white-space: nowrap;}

	.timetable tr{
		display: flex;
		flex-wrap: wrap;}
	main.sub .timetable th{
		flex-basis: 100%;
		border-bottom: none;}
	main.sub .timetable td{
		flex-grow: 1;
		text-align: center;
		flex-basis: calc(100%/3);
		border-width: 1px 0 0px 1px;
	}
	.timetable tr:last-child{border-bottom: 1px solid #00a770;}
	main.sub .timetable td:nth-of-type(3n),
	main.sub .timetable td:last-of-type{border-right: 1px solid #00a770;}

	.process_box{flex-basis: calc(50% - 10px);}
	.process_box:before{width: 30px;height: 30px;}/*------190206追記ここまで------*/

/*------190220追記ここから------*/
	input[type="text"],input[type="email"],textarea{
		border: 1px solid #00a770;
	}
	input[type="text"],input[type="email"]{
		height: 30px;
		margin: 0 auto;
    	display: block;
	}
	main.sub table.co_t th,
	main.sub table.co_t td{
		padding: 20px 15px;
		display: block;}

	main.sub table.co_t th,
	main.sub table.co_t tr:first-child td,
	main.sub table.co_t tr:nth-child(2) td{
		border-bottom: none;
	}/*------190220追記ここまで------*/
	/*------200110追記ここから------*/
	main.sub .sanfujinka-pink h2 {
		background: url(../images/common/sanfujinka_h2_bg.jpg)center/contain no-repeat;
		min-height: 9.1vw;
		background-position: bottom;
		padding: 2vw 15vw 0;
	}

	main.sub .sanfujinka-pink th {
		color: #333333;
		background: #fff0f0;
		border-color: #d90000;
	}

	main.sub .sanfujinka-pink td {
		border-color: #d90000;
	}
	/*------200110追記ここまで-----*/
	li.last-gnav {
    background: #fff;
    padding: 15px 10px;
    text-align: center;
    margin: 20px 0;
}
	li.last-gnav a{
		color: #00a770;
	}
	.sub_mv {
    height: 150px;
    margin-bottom: 20px;
}
	/* khc */
	.khc_container{
		display: block;
		width: 100%;
	}
	.khc_container.r20{
		margin-right: 0;
	}
	h3.khc_h3{
		font-size: 1.2em!important;
		width: 100%;
	}
	.khc_container table.timetable{
		margin-bottom: 0!important;
		width: 100%;
	}
	.khc_container table.timetable tr{ display: table-row;}
	ul.clinic_features{
		line-height: 2;
		margin-bottom: 20px;
		padding-left:1em;
		text-indent:-1em;
	}
	ul.clinic_features li::before{
		content: '>';
		padding-right: 7px;
	}
	.khc_container .btn{
		margin: 0 auto!important;
		float: none;
	}
	.khc_container .btn a:hover {
		background: inherit;
	}
	form.search_form {
		margin: 20px 13px 15px;
		text-align: left;
	}
	form.search_form input[type="text"]{
		height: 30px;
		font-size: 16px;
		display: inline-block;
		width: 70%;
	}
	form.search_form input[type="image"]{
		height: 38px!important;
		display: inline-block;
	}
	.cards-nav ul{
		width: auto;
		display: block;
	}
	.cards-nav ul li {
		margin: 0 0 1em;
	}
	.sp-small-font {
		font-size: 10px;
	}
	.sp-break-all {
		word-break: break-all;
	}
	.medical-reserve-banner {
		margin:2em 20px;
		width: auto;
	}
	footer > .maternity-banner {
		margin: 2em 0;
		padding: 0 20px;
		width: 100%;
	}
	.archive .news dl dd{
		width: auto;
	}
	.department_box{
		width: 100%;
		margin: 0 auto 50px;
	   padding: 10px;
	}
	div.separate {
		border: none;
		margin: 20px 0;
	}

	.date {
		margin: 7px 0 0 0;
	}

	.table_fukuyaku select {
		width: 250px;
		margin: 0;
		padding: 0;
	}

	.table_fukuyaku input {
		width: 248px;
		margin: 0;
		padding: 0;
	}

	.table_fukuyaku textarea {
		width: 248px;
		margin: 0;
		padding: 0;
	}

	.video-wrap {
		position: relative;
		width: 100%;
	  }
	  .video-wrap:before {
		content:"";
		display: block;
		padding-top: 56.25%;
	  }
	  .video-wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }
}