/*
Theme Name: Hana Hata Sheep ER Clinic TEMPLATE
Theme URI: 
Description: 医療法人社団 恵羊会 ひつじ救急クリニックテーマ

*/


@import url(common/css/top.css);
@import url(common/css/blog.css);

* {
  margin: 0;
  padding: 0;
  font-size : 100%;
  box-sizing:border-box;
}


html{
  scroll-behavior: smooth;
}

body{
color: #252525;
background-color: #f4f4f4;
font-family: "Noto Sans JP", sans-serif;
font-size: 1.125rem;
letter-spacing: 0.05em;
line-height: 1;
}

table{
border-collapse: collapse;
}

td,th{
text-align: left;
vertical-align: top;
}

.clearfix{
zoom: 1;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

li{
list-style-type: none;
}

img{ 
display: block;
border:0;
max-width: 100%;
height: auto;
}

a:link{color: #5b657e;text-decoration: underline;}
a:visited{color: #5b657e;text-decoration: none;}
a:hover{color: #5b657e;text-decoration: none;}
a:active{color: #2177be;text-decoration: none;}


.img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
font-family: 'object-fit: cover; object-position: center center;'
}

a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
color:#000;
text-decoration : none;
}

@media (max-width: 959px) {
a[href^="tel:"] {
    cursor: pointer;
    pointer-events: auto;
}
}

header{
	background: url(img/main.jpg) no-repeat top center / 1920px auto;
	width: 100%;
	height: 991px;
}

header h1{
	width: 552px;
	position: absolute;
	left: 80px;
	top: 75px;
}

header ul{
	width: 255px;
	height: 150px;
	position: absolute;
	right: 0;
	top: 0;
}

header ul li{
		display: block;
	width: 100%;
	height: 100%;
}

header ul a{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #3fab9b;
	color: #fff !important;
	font-family: "DM Sans","Noto Sans JP", sans-serif;
	text-align: center;
	padding-top: 50px;
}

header ul a:hover{
	background-color: #252525;
	transition: all 0.3s ease;
}

header ul a>span{
	display: inline-block;
	min-height: 45px;
	padding-left: 70px;
	background: url(img/ico-recruit.png) no-repeat 0 0 / 49px auto;
	font-size: 130%;
}


header ul a>span span{
	display: block;
	font-size: 60%;
	letter-spacing: .05em;
	line-height: 1;
	padding-top: 8px;
}

header h2{
font-family: "Zen Maru Gothic", sans-serif;
font-size: 180%;
font-weight: 400;
letter-spacing: .05em;
line-height: 1;
color: #fff;
padding-top: 320px;
padding-left: 15%;
}

header h2 span{
	display: inline-block;
	padding-right: 20px;
}

@media (max-width: 1700px) {
header h2{
font-size: 160%;
padding-top: 300px;
padding-left: 10%;
}
}


@media (max-width: 1320px) {
header{
	background: url(img/main.jpg) no-repeat top center / 1320px auto;
	height: 680px;
}
header h1{
	width: 350px;
	position: absolute;
	left: 40px;
	top: 45px;
}
header h2{
font-size: 150%;
padding-top: 200px;
padding-left: 10%;
}

header ul{
	width: 200px;
	height: 100px;
}

header ul a{
	padding-top: 30px;
}
header ul a>span{
	padding-left: 60px;
	font-size: 120%;
}
}

@media (max-width: 1080px) {
header h2{
padding-left: 0;
padding-top: 190px;
text-align: center;
}
}

@media (max-width: 959px) {
header{
	background: url(img/main-sp.jpg) no-repeat bottom center / 100% auto #274d94;
	height: 100svh;
}
header h2{
padding-top: 30%;
}

header h2 span{
	display: block;
	padding-right: 0;
	padding-bottom: 15px;
	font-size: 120%;
}

}

@media (max-width: 680px) {
header h1{
	width: 300px;
}
header h2{
padding-top: 35%;
}
header h2 span{
	font-size: 100%;
}
}

@media (max-width: 599px) {
header h2{
padding-top: 45%;
}
header h2{
	font-size: 120%;
}
header ul{
	width: 90px;
	height: 110px;
	position: absolute;
	right: 0;
	top: 0;
}

header ul a{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #3fab9b;
	color: #fff !important;
	font-family: "DM Sans","Noto Sans JP", sans-serif;
	text-align: center;
	padding-top: 20px;
}

header ul a:hover{
	background-color: #252525;
	transition: all 0.3s ease;
}

header ul a>span{
	display: inline-block;
	min-height: auto;
	padding-top: 30px;
	padding-left: 0;
	background: url(img/ico-recruit.png) no-repeat top center / 30px auto;
	font-size: 100%;
}

header ul a>span span{
	display: block;
	font-size: 70%;
	letter-spacing: .05em;
	line-height: 1;
	padding-top: 4px;
}
}

@media (max-width: 479px) {
	header{
	background: url(img/main-sp.jpg) no-repeat bottom center / 100% auto #274d94;
	height: 500px;
}
header h1{
	width: 250px;
	left: 35px;
}
}

@media (max-width: 400px) {
header h1{
	width: 210px;
	left: 15px;
}
header h2{
	padding-top: 55%;
	font-size: 110%;
}
}


#top-recruit{
	width: 100%;
	max-width: 1920px;
	margin: -90px auto 0;
}


@media (max-width: 959px) {
	#top-recruit{
	margin: 0 auto;
}

}

#top-recruit-in{
	width: 95%;
	margin-left: 5%;
	padding-left: 10%;
	padding-right:40%;
	background: url(img/bg-recruit.jpg) no-repeat top right / cover;
	padding-top: 120px;
	padding-bottom: 120px;
}

@media (max-width: 1700px) {
#top-recruit-in{
	background: url(img/bg-recruit.jpg) no-repeat top right 30% / cover;
}
}

@media (max-width: 1380px) {
	#top-recruit-in{
	width: 100%;
	margin-left: 0;
	padding-left: 5%;
	padding-right:40%;
	background: url(img/bg-recruit.jpg) no-repeat top right 30% / cover;
	padding-top: 80px;
	padding-bottom: 80px;
}
}


#top-recruit-in h2{
	text-align: center;
	color: #3fab9b;
	padding-bottom: 50px;
}

#top-recruit-in h2 strong{
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: 400%;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .05em;
}

#top-recruit-in h2 span{
	display: block;
	font-size: 130%;
	font-weight: 400;
	line-height: 1;
}

#top-recruit-content{
	width: 100%;
	background-color: rgba(244, 244, 244, 0.87);
	padding-bottom: 70px;
}

#top-recruit-content h3{
	text-align: center;
	font-size: 140%;
	letter-spacing: .05em;
	line-height: 1;
	padding-top: 80px;
	padding-bottom: 30px;
}

#top-recruit-content h3 br{
	display: none;
}

@media (max-width: 1550px) {
#top-recruit-content h3{
	font-size: 120%;
}
}

@media (max-width: 1380px) {
	#top-recruit-content h3{
		line-height: 1.6;
	}
#top-recruit-content h3 br{
	display: inline;
}
}

#top-recruit-content p{
	width: 80%;
	margin: 0 auto;
	line-height: 1.8;
	padding-bottom: 35px;
}

#top-recruit-in ul{
	width: 90%;
	max-width: 312px;
	margin: -40px auto 0;
	text-align: center;
}

#top-recruit-in ul a{
	background-color: #fff;
	display: block;
	width: 100%;
	color: #252525;
	text-decoration: none;
	font-size: 95%;
	padding: 30px 0;
}

#top-recruit-in ul a:hover{
	background-color: #BFE8E1;
	transition: all 0.3s ease;
}

#top-recruit-in ul a span{
	display: inline-block;
	padding-left: 30px;
	background: url(img/arrow.png) no-repeat left center / 15px auto;
	transition: all 0.3s ease;
}

#top-recruit-in ul a:hover span{
	background: url(img/arrow.png) no-repeat left 5px center / 15px auto;
}

@media (max-width: 959px) {
#top-recruit-in h2 strong{
	font-size: 260%;
}

#top-recruit-in h2 span{
	font-size: 110%;
}

#top-recruit-in{
	width: 100%;
	margin-left: 0;
	padding-left: 0;
	padding-right:0;
	background: url(img/bg-recruit-sp.jpg) no-repeat bottom center / 959px auto #f7fafe;
	padding-top: 80px;
	padding-bottom: 480px;
}
#top-recruit-content h3{
	line-height: 1.6;
}
#top-recruit-content h3 br{
	display: inline;
}
}

@media (max-width: 599px) {
#top-recruit-in{
	background: url(img/bg-recruit-sp.jpg) no-repeat bottom center / 600px auto #f7fafe;
	padding-top: 80px;
	padding-bottom: 320px;
}
}


@media (max-width: 400px) {
#top-recruit-content h3{
	font-size: 120%;
}
}



#top-about{
	width: 100%;
	display: flex;
}

#top-about-in{
	flex: 0 0 50%;
		padding-top: 115px;
		padding-bottom: 115px;
}

#top-about-in h2{
	text-align: center;
	font-size: 200%;
	line-height: 1;
	font-weight: 300;
	letter-spacing: .05em;
	padding-bottom: 45px;
}

#top-about-in h3{
	width: 70%;
	margin: 0 auto;
}
#top-about-in h3 img{
	margin: 0 auto 50px;
}

#top-about-in-data{
	width: 80%;
	max-width: 550px;
	margin: 0 auto;
	border-top: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
	padding-top: 50px;
	padding-bottom: 20px;
}

#top-about-in-data dl{
	width: 100%;
	position: relative;
	margin: 0 auto;
	display: flex;
	gap: 30px;
	line-height: 1.8;
	padding-bottom: 30px;
}

#top-about-in-data dl dt{
	flex: 0 0 25%;
	text-align: right;
	font-weight: 800;
}
#top-about-in-data dl dd{
	flex: 0 0 75%;
}


#top-about-map{
	flex: 0 0 50%;
}

#top-about-map iframe{
	display: block;
	border: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 959px) {
#top-about{
	width: 100%;
	display: block;
}

#top-about-map iframe{
	height: 550px;
}
}

@media (max-width: 599px) {
	#top-about-in h2{
	font-size: 140%;
}

#top-about-in-data dl{
	width: 100%;
	padding-bottom: 30px;
	display: block;
}
#top-about-in-data dl dt{
	text-align: left;
}

}

footer{
	background-color: #3d3d3d;
	color: #fff;
	padding-top: 90px;
}

#foot-in{
	width: 90%;
	max-width: 1380px;
	margin: 0 auto;
	position: relative;
	padding-left: 340px;
}

#foot-in::before{
	content: " ";
display: block;
top: 0;
left: 340px;
width: 1px;
height: 100%;
position: absolute;
z-index: 10;
background-color: #4d4d4d;
}

#foot-in h2{
	position: absolute;
	left: 0;
	top: 0;
	width: 340px;
}

#foot-content{
	padding-left: 65px;
	display: flex;
}

#foot-content1{
	flex: 0 0 50%;
}



#foot-content1 li{
	color: #3fab9b;
	font-weight: 600;
	font-size: 110%;
	font-family: "DM Sans","Noto Sans JP", sans-serif;
}

#foot-content1 li a{
	color: #3fab9b !important;
	font-size: 130%;
	display: inline-block;
	margin-right: 15px;
}

#foot-content1 li>span{
	font-size: 90%
}

#foot-content1 li>span span{
	font-size: 120%;
}

#foot-content1 dl{
	padding-top: 30px;
	font-size: 90%;
}

#foot-content1 dl dt{
	display: block;
	font-weight: 800;
	padding-bottom: 15px;
}

#foot-content1 dl dd{
	line-height: 1.6;
}

#foot-content1 p{
	padding-top: 30px;
	font-size: 90%;
	line-height: 1;
}


#foot-content2{
	flex: 0 0 50%;
}

#foot-content2 table{
	width: 100%;
	font-size: 90%;
}

#foot-content2 table thead th,
#foot-content2 table tbody td{
	text-align: center;
		padding: 10px;
}

#foot-content2 table tbody tr:first-child th,
#foot-content2 table tbody tr:first-child td{
	border-bottom: 1px solid #525252;
}

#foot-content2 table tbody th{
	font-family: "DM Sans", sans-serif;
	padding: 12px;
}

#foot-content2 table tbody th span:first-child{
	width: 70px;
	display: inline-block;
	position: relative;
}

#foot-content2 table tbody th span:first-child::before{
	content: "-";
display: block;
top: 0;
right: 7px;
position: absolute;
z-index: 10;
}

#foot-content2 table .maru{
	content: " ";
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #3fab9b;
margin: 0 auto;
}

#foot-content2 table .batu{
		content: " ";
display: block;
width: 2px;
height: 16px;
margin: 0 auto;
background-color: #3fab9b;
transform: rotate(45deg);
}


@media (max-width: 1480px) {
	#foot-in{
	max-width: 820px;
	padding-left: 300px;
}

#foot-in::before{
left: 300px;
}

#foot-in h2{
	width: 300px;
}
#foot-content{
	padding-left: 55px;
	display: block;
}
#foot-content2{
	margin-top: 45px;
	width: 450px;
}
}

@media (max-width: 959px) {

footer{
	padding-top: 90px;
}

#foot-in{
	width: 90%;
	max-width: 460px;
	margin: 0 auto;
	position: relative;
	padding-left: 0;
}

#foot-content{
	padding-left: 0;
	display: block;
}

#foot-in::before{
	display: none;
}

#foot-in h2{
	position: relative;
	left: auto;
	top: auto;
	width: 249px;
	margin: 0 auto 45px;
}

#foot-content2{
	margin-top: 45px;
	width: 100%;
}

}

@media (max-width: 530px) {
#foot-content1 li{
	line-height: 1.6;
	text-align: center;
}
#foot-content1 li a{
	margin-right: 0;
}

#foot-content1 li>span{
	display: block;
	font-size: 90%
}

#foot-content2{
	width: 350px;
	margin: 45px auto;
}

#foot-content2 table thead th,
#foot-content2 table tbody td{
	text-align: center;
		padding: 12px 3px;
}
}

@media (max-width: 400px) {
#foot-content2{
	width: 280px;
}
#foot-content2 table tbody th{
	padding: 12px 4px;
}

#foot-content2 table thead th,
#foot-content2 table tbody td{
		padding: 12px 0;
}
}


#copy{
	text-align: center;
	font-family: "DM Sans", sans-serif;
	font-size: 70%;
	padding-top: 100px;
	padding-bottom: 90px;
}

@media (max-width: 479px) {
#copy{
	font-size: 60%;
	padding-top: 10px;
	padding-bottom: 80px;
}
}