@charset "utf-8";
/* CSS Document */
@media screen and (max-width:870px){
	html {
		font-size: 8px;
	}
	body {
		max-width: 8750px;
	}
	
	
	/*header*/
	#header {
		width: 98%;
		position: absolute;
		top:0;
		left: 0;
		z-index: 2;
	}
	.head-inner {
		justify-content: space-between;
		align-items: flex-start;
	}
	.head-inner h1 {
		width: 25%;
	}
	.head-right {
		width: 73%;
		justify-content: space-between;
		align-items: center;
	}
	.h-adress {
		font-size: 13px;
	}
	.h-icons {
		gap:2rem;
		align-items: center;
	}
	.h-icon {
		align-items: center;
		gap: 1rem;
	}
	.h-icon img {
		width: 40px;
		height: 40px;
	}
	.h-icon p {
		font-size: 12px;
		text-align: center;
	}
	.h-bnr {
		gap:1rem;
		align-items: flex-start;
		flex-direction: column;
	}
	.h-bnr .h-tel,
	.h-bnr .h-web {
		width: 150px;
	}
	
	/*mainvisual*/
	#mainvisual {
		width:100%;
		height: 80vh;
		position: relative;
	}
	.catch-copy {
		width: 80%;
		position: absolute;
		top: 12%;
		left: 50%;
		transform: translateX(-50%);
	}
	.first-bnr {
		width: 150px;
		position: absolute;
		bottom: 150px;
		left: 30px;
	}
	.h-timetable {
		width: 320px;
		position: absolute;
		bottom: 150px;
		right: 30px;
	}
	.h-nav {
		width: 90%;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
	.h-nav ul {
		width: 85%;
		margin: auto;
		justify-content: space-between;
	}
	.h-nav ul li a {
		display: block;
		font-size: 15px;
		color: #333;
	}
	
	/*info*/
	#info {
		width: 90%;
		margin: 10rem auto;
	}
	.ttl01 {
		font-size: 40px;
		color: #31B887;
	}
	.ttl01 span {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-weight: 500;
		color: #333;
		font-size: 28px;
		margin-left: 2rem;
	}
	#info .inner {
		width: 90%;
		margin: 5rem auto 0 auto;
	}
	#info .inner dl {
		flex-wrap: nowrap;
		position: relative;
	}
	#info .inner dl dt {
		width: 20%;
		background: #31B887;
		padding: 1rem 0;
		text-align: center;
		font-size: 16px;
		z-index: 2;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	#info .inner dl dd {
		width: 80%;
		background: #F5F5F5;
		box-sizing: border-box;
		font-size: 16px;
		padding: 2rem 0 2rem 2rem;
		position: absolute;
		left: 120px;
		top: 50%;
		transform: translateY(-50%);
		z-index: -1;
	}

	/*感染症対策*/
	#covid19 {
		padding: 5rem 0;
		background: #FBFEF5;
	}
	.accordion-001 {
		max-width: 80%;
		margin: 0 auto;	
	}
 .covid19-list {
		width: 90%;
		margin: 0 auto;
		padding: 30px 0;
		text-align: center;
	}
	.covid19-ttl {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 3rem;
		position: relative;
	}
	.covid19-txt {
		font-size: 15px;
		flex-direction: column;
		gap:1.5rem;
	}
	.covid19-txt li {
		list-style: disc;
		list-style-position: inside;
	}
	
	/*greeting*/
	#greeting {
		width: 100%;
		padding: 10rem 0;
		background: url("../img/bg-greeting.png");
		background-size: cover;
		position: relative;
	}
	#greeting::before {
		content: "";

		background-size: cover;
		position: absolute;
		top: 10rem;
		right: 0;
		z-index: -1;
	}
	#greeting::after {
		content: "";
		width: 400px;
		height: 200px;
		background: url("../img/deco14.png");
		background-size: cover;
		position: absolute;
		bottom: 20rem;
		right: 0;
	}
	#greeting .inner {
		width:80%;
		margin: auto;
	}
	.greeting-box {
		width: 100%;
		margin: 5rem auto;
		flex-direction: column;
		gap:3rem;
	}
	.greeting-box .txt {
		width: 80%;
		margin: auto;
	}
	.greeting-txt {
		font-size: 16px;
		line-height: 2;
	}
	.greeting-name {
		font-size: 20px;
		margin-top: 2.5rem;
	}
	.greeting-name span {
		font-size: 16px;
		color: #31B887;
		margin-left: 1.5rem;
	}
	.greeting-box .img {
		width: 60%;
		margin-right: 250px;
	}
	.more-link {
		width: 250px;
		margin: 3rem auto 0 auto;
		background: #F08CBE;
		border-radius: 1rem;
		padding: 2rem 0;
	}
	.more-link a {
		display: block;
		text-align: center;
		font-size: 18px;
	}
	
	
	/*feature*/
	#feature {
		margin-top: 20rem;
		margin-bottom: 20rem;
		position: relative;
		background: url("../img/bg01.png");
		background-attachment: fixed;
	}
	#feature::before {
		content: "";
		width: 100%;
		height: 150px;
		background: url("../img/bg-deco.png");
		position: absolute;
		top: -150px;
		left: 0;
	}
	#feature::after {
		content: "";
		width: 100%;
		height: 150px;
		background: url("../img/bg-deco02.png");
		background-position: bottom;
		position: absolute;
		bottom: -150px;
		right: 0;
	}
	.feature-ttl {
		width: 80%;
		margin: auto;
	}
	.feature-list {
		width: 98%;
		margin: 5rem auto 0 auto;
		flex-direction: column;
		gap:5rem;
	}
	.feature-list li {
		justify-content: space-between;
		align-items: center;
	}
	.feature-list li .txt{
		width: 51%;
	}
	.feature-list li .img {
		width: 48%;
	}
	.feature-list li .txt p {
		text-align: center;
	}
	.feature-no {
		font-size: 70px;
		margin-bottom: 2rem;
	}
	.feature-b-txt {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 1.5rem;
	}
	.feature-s-txt {
		width: 90%;
		margin: auto;
		font-size: 15px;
		line-height: 2;
	}
	
	
	/*medical*/
	#medical-info {
		padding: 10rem 0;
		position: relative;
	}
	#medical-info::before {
		content: "";
		width: 150px;
		height: 150px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		top:150px;
		left: 50px;
		z-index: -1;
	}
	#medical-info::after {
		content: "";
		width: 350px;
		height: 250px;
		background: url("../img/deco15.png");
		background-size: cover;
		position: absolute;
		top:0px;
		right: 0px;
		z-index: -1;
	}
	.ttl02 {
		width: 60%;
		margin: auto;
		position: relative;
	}
	.ttl02::before {
		content: "";
		width: 80px;
		height: 33px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		top: -50px;
		left: 50%;
		transform: translateX(-50%);
	}
	.ttl02 h3 {
		font-size: 50px;
		text-align: center;
		color: #31B887;
		line-height: 0.8;
	}
	.ttl02 h3 span {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-weight: 500;
		color: #333;
		font-size: 24px;
	}
	.medical-wrapper {
		margin-top: 10rem;
	}
	.medical-wrapper ul {
		width: 95%;
		margin: auto;
		justify-content: space-between;
	}
	.medical-wrapper ul li {
		width: 28%;
		background: #EEF1F2;
		padding-top: 2rem;
		border-radius: 3rem;
		margin-bottom: 5rem;
	}
	.medical-wrapper ul li:hover {
		background: #CCD5D8;
	}
	.medical-wrapper ul li a {
		display: block;
		text-align: center;
		line-height: 3;
	}
	.medical-wrapper ul li a img {
		width: 60%;
		margin: auto;
	}
	.medical-wrapper ul li a span {
		font-size: 20px;
		color: #333333;
	}
	.visit {
		width: 90%;
		margin: 5rem auto;
		padding-bottom: 10rem;
		position: relative;
	}
	.visit::before {
		content: "";
		width: 300px;
		height: 80px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.visit::after {
		content: "";
		width: 165px;
		height: 161px;
		background: url("../img/deco12.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.visit-ttl {
		width: 300px;
		margin: 0 auto 3rem auto;
		border-bottom: 3px solid #31B887;
		padding-bottom: 1rem;
	}
	.visit-ttl p {
		font-size: 24px;
		text-align: center;
	}
	.visit-txt {
		font-size: 16px;
		line-height: 2;
		text-align: center;
	}
	
	
	/*recruit*/
	#recruit {
		margin: 5rem auto;
	}
	.recruit-bnr {
		width: 100%;
		margin: auto;
		justify-content: space-between;
	}
	.recruit-bnr .img,
	.recruit-bnr .txt {
		width: 50%;
	}
	.recruit-bnr .img {
		background-position: center top 20%;/
	}
	.recruit-bnr .txt {
		background: #E4F8F0;
		padding: 4rem 0 4rem 2rem;
		box-sizing: border-box;
		position: relative;
	}
	.recruit-bnr .txt::before {
		content: "";
		width: 85px;
		height: 65px;
		background: url("../img/deco04.png");
		background-size: cover;
		position: absolute;
		top:5px;
		right: 5px;
	}
	.r-bnr-ttl {
		font-size: 30px;
		color: #31B887;
	}
	.r-bnr-ttl span {
		font-family: zen-kaku-gothic-new, sans-serif;
		margin-left: 2rem;
		font-size: 18px;
		color: #333;
	}
	.r-bnr-txt {
		width: 95%;
		font-size: 14px;
		line-height: 1.5;
	}
	
	/*qaanda*/
	#qanda {
		padding-top: 10rem;
		padding-bottom: 10rem;
		background: #FBFEF5;
	}
	.qa-wrapper {
		width: 98%;
		margin: 5rem auto;
	}
	.qa-wrapper ul {
		justify-content: space-between;
		align-items: flex-start;
	}
	.qa-wrapper ul li {
		width: 350px;
		height: 350px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 2px 2px 5px #ccc;
		padding-top: 10rem;
		box-sizing: border-box;
		margin-bottom: 5rem;
	}
	.qa-inner {
		width: 250px;
		margin: auto;
	}
	.qa-inner p {
		text-align: center;
	}
	.q-txt {
		font-size: 18px;
		margin-bottom: 2rem;
	}
	.a-txt {
		font-size: 14px;
		line-height: 2;
	}


	/*footer*/
	#footer {
		margin-top: 10rem;
	}
	.foot-top {
		width: 90%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}
	.foot-top .left {
		width: 50%;
	}
	.foot-top .left h1 {
		width: 100%;
		margin-bottom: 2rem;
	}
	.f-adress p {
		text-align: center;
		font-size: 16px;
	}
	.f-adress p i {
		font-size: 20px;
		margin-right: 1rem;
	}
	.f-bnrs {
		width: 100%;
		margin-top: 2rem;
		align-items: center;
		justify-content: space-between;
	}
	.f-bnr {
		width: 48%;
	}
	.f-bnr img {
		width: 100%;
	}
	.foot-top .right {
		width: 48%;
	}
	.f-timetable {
		width: 100%;
		margin-bottom: 2rem;
	}
	.f-icon-box {
		width: 90%;
		margin: auto;
		background: #fff;
		padding: 1.5rem 0;
		border-radius: 2rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.f-icons {
		width: 70%;
		margin: auto;
		justify-content: space-between;
	}
	.f-icon {
		width: 48%;
		align-items: center;
	}
	.f-icon img {
		width: 60px;
		height: 60px;
	}
	.f-icon p {
		font-size: 14px;
		text-align: center;
	}
	.foot-bottom {
		flex-direction: column-reverse;
		gap:5rem;
		margin-top: 5rem;
	}
	.f-map {
		width: 100%;
	}
	.f-map iframe {
		width: 100%;
	}
	.f-nav {
		margin: auto;
		padding-top: 5rem;
		box-sizing: border-box;
	}
	.f-nav-inner {
		gap:5rem;
	}
	.f-nav-ttl {
		font-size: 20px;
	}
	.f-nav-inner ul {
		margin-top: 3rem;
	}
	.f-nav-inner ul li {
		padding: 1rem;
	}
	.f-nav-inner ul li a {
		display: block;
		color: #333;
		font-size: 16px;
	}
	.f-nav-inner ul li:hover a {
		color: #737272;
	}
	.copy p {
		font-size: 12px;
		text-align: center;
	}
	
	.ttl02 {
		width: 60%;
		margin: auto;
		position: relative;
	}
	.ttl02::before {
		content: "";
		width: 60px;
		height: 25px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
	.ttl02 h3 {
		font-size: 40px;
		text-align: center;
		color: #31B887;
		line-height: 0.8;
	}
	.ttl02 h3 span {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-weight: 500;
		color: #333;
		font-size: 20px;
	}
	
	
	/*下層*/

	/*mainvisual*/
	#s-mainvisual {
		width:100%;
		height: 55vh;
		background: url("../img/clinic07.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.page-ttl {
		width: 70%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-ttl h2 {
		font-size: 45px;
		text-align: center;
		text-shadow: 2px 2px 5px #000;
		font-weight: 550;
		letter-spacing: 3px;
	}

	/*clinic*/
	.clinic-body {
		padding: 5rem 0;
		background: url("../img/bg01.png");
		background-size: cover;
		background-attachment: fixed;
	}

	#policy {
		padding: 10rem 0;
	}
	.policy-top {
		width: 95%;
		margin: 5rem auto;
		padding: 3rem 0;
		border-radius: 3rem;
		position: relative;
	}
	.policy-top::before {
		content: "";
		width: 80px;
		height: 40px;
		background: url("../img/deco10.png");
		background-size: cover;
		position: absolute;
		top:0;
		right: 0;
	}
	.policy-top::after {
		content: "";
		width: 80px;
		height: 40px;
		background: url("../img/deco11.png");
		background-size: cover;
		position: absolute;
		bottom:0;
		left: 0;
	}
	.policy-top p {
		font-size: 24px;
		text-align: center;
	}
	.policy-inner {
		width: 98%;
		margin: auto;
		flex-direction: column-reverse;
		gap:3rem;
	}
	.policy-inner .img {
		width: 60%;
		margin: auto;
	}
	.policy-inner .txt {
		width: 100%;
	}
	.policy-inner .txt p {
		font-size: 16px;
		line-height: 2;
		text-align: center;
	}

	#s-feature {
		padding: 10rem 0;
	}


	#garelly {
		padding: 10rem 0 0 0;
	}
	.garelly-inner {
		width: 90%;
		margin: 5rem auto;
	}
	/*==================================================
	スライダーのためのcss
	===================================*/
	.g-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
			width:94%;
			margin:0 auto;
	}

	.g-slider img {
			width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
			height:auto;
	}

	.g-slider .slick-slide {
		transform: scale(0.8);/*左右の画像のサイズを80%に*/
		transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
		opacity: 0.5;/*透過50%*/
	}

	.g-slider .slick-slide.slick-center{
		transform: scale(1);/*中央の画像のサイズだけ等倍に*/
		opacity: 1;/*透過なし*/
	}


	/*矢印の設定*/

	/*戻る、次へ矢印の位置*/
	.slick-prev, 
	.slick-next {
			position: absolute;/*絶対配置にする*/
			top: 42%;
			cursor: pointer;/*マウスカーソルを指マークに*/
			outline: none;/*クリックをしたら出てくる枠線を消す*/
			border-top: 2px solid #666;/*矢印の色*/
			border-right: 2px solid #666;/*矢印の色*/
			height: 15px;
			width: 15px;
	}

	.slick-prev {/*戻る矢印の位置と形状*/
			left: -1.5%;
			transform: rotate(-135deg);
	}

	.slick-next {/*次へ矢印の位置と形状*/
			right: -1.5%;
			transform: rotate(45deg);
	}

	/*ドットナビゲーションの設定*/

	.slick-dots {
		text-align:center !important;
		margin:20px 0 0 0 !important;
	}

	.slick-dots li {
		display:inline-block;
		margin:0 5px;
	}

	.slick-dots button {
			color: transparent !important;
			outline: none !important;
			width:8px !important;/*ドットボタンのサイズ*/
			height:8px !important;/*ドットボタンのサイズ*/
			display:block !important;
			border-radius:50% !important;
			background:#ccc !important;/*ドットボタンの色*/
	}

	.slick-dots .slick-active button{
			background:#333;/*ドットボタンの現在地表示の色*/
	}


	/*doctor*/
	#doctor {
		padding-top: 10rem;
	}
	.doctor-container {
		margin-top: 15rem;
		background: #EFF8DD;
		position: relative;
		padding-bottom: 10rem;
	}
	.doctor-container::before {
		content: "";
		width: 100%;
		height: 10rem;
		background: url("../img/bg-deco03.png");
		position: absolute;
		top: -10rem;
		left: 0;
	}
	.doctor-container::after {
		content: "";
		width: 150px;
		height: 60px;
		background: url("../img/deco05.png");
		background-size: cover;
		position: absolute;
		top: -100px;
		right: 150px;
	}
	.docto-inner {
		width: 95%;
		margin: auto;
		flex-direction: column-reverse;
		gap:3rem;
	}
	.docto-inner .txt {
		width: 90%;
		margin: auto;
	}
	.docto-inner .txt p {
		font-size: 15px;
		line-height: 2;
	}
	.docto-inner .img {
		width: 70%;
		position: relative;
	}
	.doctor-card {
		width: 200px;
		padding: 1rem 0;
		background: #fff;
		border-radius: 2rem;
		position: absolute;
		bottom:1rem;
		right: 1rem;
	}
	.doctor-card p {
		text-align: center;
		font-size: 24px;
	}
	.doctor-card p .dp-s {
		font-size: 15px;
	}
	.doctor-card p .en {
		font-size: 17px;
		color: #31B887;
	}
	.d-carrer-con {
		width: 95%;
		flex-direction: column;
		gap: 3rem;
	}
	.d-carrer {
		width: 80%;
	}
	.dc-ttl {
		font-size: 20px;
		margin-bottom: 2rem;
	}
	.d-carrer dl {
		justify-content: space-between;
		font-size: 17px;
	}
	.d-carrer dl dt {
		width: 30%;
		margin-bottom: 1rem;
	}
	.d-carrer dl dd {
		width: 70%;
		margin-bottom: 1rem;
	}


	/*medical*/
	.medical-body {
		padding: 10rem 0 5rem 0;
		background: url("../img/bg01.png");
		background-size: cover;
		background-attachment: fixed;
	}
	.medical-box {
		margin-bottom: 15rem;
	}
	.m-ttl {
		width: 100%;
		height: 120px;
		background: url("../img/bg-deco03.png");
		background-position: top center;
		padding-top: 8rem;
		box-sizing:border-box;
		position: relative;
	}
	.m-ttl::before {
		content: "";
		width: 100px;
		height: 75px;
		background: url("../img/deco06.png");
		background-size: cover;
		position: absolute;
		top: 20px;
		left: 100px;
	}
	.m-ttl::after {
		content: "";
		width: 110px;
		height: 60px;
		background: url("../img/deco07.png");
		background-size: cover;
		position: absolute;
		top: 40px;
		right: 100px;
	}
	.m-ttl h5 {
		text-align: center;
		font-size: 28px;
		letter-spacing: 3px;
		font-weight: 500;
	}
	.mb-inner {
		width: 95%;
		margin: 8rem auto 0 auto;
		justify-content: space-between;
		align-items: center;
	}
	.mb-inner .txt {
		width: 50%;
	}
	.mb-inner .txt p {
		font-size: 15px;
		line-height: 2;
	}
	.mb-inner .img {
		width: 48%;
	}
	.medical-topic {
		width: 70%;
		margin: 5rem auto 0 auto;
		background: #fff;
		border-radius: 3rem;
		padding: 3rem;
		box-sizing: border-box;
	}
	.medical-topic p {
		font-size: 14px;
		line-height: 2;
	}


	/*access*/
	#access {
		padding-top: 10rem;
	}
	.access-container {
		margin-top: 15rem;
		background: #EFF8DD;
		position: relative;
		padding-bottom: 5rem;
	}
	.access-container::before {
		content: "";
		width: 100%;
		height: 10rem;
		background: url("../img/bg-deco03.png");
		position: absolute;
		top: -10rem;
		left: 0;
	}
	.access-container::after {
		content: "";
		width: 150px;
		height: 60px;
		background: url("../img/deco05.png");
		background-size: cover;
		position: absolute;
		top: -100px;
		right: 150px;
	}
	.access-inner {
		width: 98%;
		margin: auto;
		position: relative;
	}
	.access-inner::before {
		content: "";
		width: 100px;
		height: 262px;
		background: url("../img/deco08.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.access-inner::after {
		content: "";
		width: 150px;
		height: 75px;
		background: url("../img/deco09.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.access-img {
		width: 70%;
		margin: 5rem auto;
	}
	.access-img img {
		width: 100%;
		border-radius: 5rem;
	}
	.access-adress p {
		font-size: 20px;
		text-align: center;
	}
	.access-adress p i {
		font-size: 36px;
		color: #31B887;
	}
	.access-timetable {
		width: 500px;
		margin: 3rem auto;
	}
	.a-icon-box {
		width: 400px;
		margin: auto;
		background: #fff;
		padding: 1.5rem 0;
		border-radius: 2rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.a-icons {
		width: 70%;
		margin: auto;
		justify-content: space-between;
	}
	.a-icon {
		width: 48%;
		align-items: center;
		gap:1rem;
	}
	.a-icon img {
		width: 60px;
		height: 60px;
	}
	.a-icon p {
		font-size: 14px;
		text-align: center;
	}


	/*recruit*/
	.recruit-body {
		padding: 10rem 0;
		background: url("../img/bg01.png");
		background-size: cover;
		background-attachment: fixed;
	}
	.recruit-inner {
		width: 95%;
		margin: 5rem auto;
		justify-content: space-between;
		align-items: center;
	}
	.recruit-inner .txt {
		width: 50%;
	}
	.recruit-inner .txt p {
		font-size: 14px;
		line-height: 2;
	}
	.recruit-inner .img {
		width: 48%;
	}
	.recruit-AR {
		width: 95%;
		margin: auto;
		padding: 5rem 0;
	}
	.ar-ttl {
		width: 250px;
		margin: 0 auto 5rem auto;
		border-bottom: 3px solid #31B887;
	}
	 .ar-ttl p {
		font-size: 24px;
		text-align: center;
		letter-spacing: 2px;
	}
	.recruit-AR table {
		width: 100%;
	}
	.recruit-AR table th {
		width: 25%;
		background: #5BC59D;
		border:#C4EFD7 1px solid;
		padding: 1.5rem 0;
		text-align: center;
		vertical-align:middle;
		font-size: 16px;
		font-weight: 500;
	}
	.recruit-AR table td {
		width: 75%;
		background: #fff;
		border:#C4EFD7 1px solid;
		padding: 1.5rem 0 1.5rem 1.5rem;
		box-sizing: border-box;
		vertical-align:middle;
		font-size: 15px;
	}
	.recruit-AR table td span {
		font-size: 17px;
		line-height: 2;
	}

	.single-date,
	.single-body,
	.pagination {
    padding: 0px 40px;
	}
}


@media screen and (max-width:430px){
	html {
		font-size: 6px;
	}
	body {
		max-width: 430px;
	}
	
	.sp-only {
		display: block;
	}
	.pc-only {
		display: none;
	}
	
	
	/*header*/
	#header {
		width: 98%;
		position: absolute;
		top:0;
		left: 0;
		z-index: 2;
	}
	.head-inner h1 {
		width: 55%;
	}
	
	/*mainvisual*/
	#mainvisual {
		width:100%;
		height: 60vh;
		background: url("../img/clinic11.jpg");
		background-size: cover;
		position: relative;
	}
	.catch-copy {
		width: 90%;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
	}

	
	/*info*/
	#info {
		width: 98%;
		margin: 10rem auto;
	}
	.ttl01 {
		font-size: 24px;
		color: #31B887;
	}
	.ttl01 span {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-weight: 500;
		color: #333;
		font-size: 28px;
		margin-left: 2rem;
	}
	#info .inner {
		width: 100%;
		margin: 5rem auto 0 auto;
	}
	#info .inner dl {
		flex-wrap: nowrap;
		position: relative;
		flex-direction: column;
		gap:1rem;
	}
	#info .inner dl dt {
		width: 30%;
		background: #31B887;
		padding: 1rem 0;
		text-align: center;
		font-size: 16px;
		z-index: 2;
		position: static;
		
	}
	#info .inner dl dd {
		width: 100%;
		background: #F5F5F5;
		box-sizing: border-box;
		font-size: 16px;
		padding: 2rem 0 2rem 2rem;
		position: static;
	}

	/*感染症対策*/
	#covid19 {
		padding: 5rem 0;
		background: #FBFEF5;
	}
	.accordion-001 summary {
		font-size: 18px;
	}
	.accordion-001 {
		max-width: 90%;
		margin: 12px auto;	
	}
 .covid19-list {
		width: 95%;
		margin: 0 auto;
		padding: 30px 0;
		text-align: center;
	}
	.covid19-ttl {
		font-size: 17px;
		font-weight: 600;
		margin-bottom: 3rem;
		position: relative;
	}
	.covid19-txt {
		font-size: 15px;
		flex-direction: column;
		gap:1.5rem;
		font-weight: 400;
	}
	.covid19-txt li {
		list-style: disc;
		list-style-position: inside;
	}
	
	
	.ttl01 {
		font-size: 30px;
		color: #31B887;
	}
	.ttl01 span {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-weight: 500;
		color: #333;
		font-size: 18px;
		margin-left: 2rem;
	}
	
	
	/*greeting*/
	#greeting {
		width: 100%;
		padding: 10rem 0;
		background: url("../img/bg-greeting.png");
		background-size: cover;
		position: relative;
	}
	#greeting::before {
		display: none;
	}
	#greeting::after {
		content: "";
		width: 200px;
		height: 100px;
		background: url("../img/deco14.png");
		background-size: cover;
		position: absolute;
		bottom: 20rem;
		right: 0;
	}
	#greeting .inner {
		width:98%;
		margin: 0 auto;
	}
	.greeting-box {
		width: 100%;
		margin: 5rem auto;
		flex-direction: column;
	}
	.greeting-box .txt {
		width: 98%;
		margin: 0 auto;
	}
	.greeting-txt {
		font-size: 14px;
		line-height: 2;
		padding: 0;
	}
	.greeting-name {
		font-size: 20px;
		margin-top: 2.5rem;
	}
	.greeting-name span {
		font-size: 16px;
		color: #31B887;
		margin-left: 1.5rem;
	}
	.greeting-box .img {
		width: 100%;
		margin-right:auto;
	}
	.more-link {
		width: 250px;
		margin: 3rem auto 0 auto;
		background: #F08CBE;
		border-radius: 1rem;
		padding: 2rem 0;
	}
	.more-link a {
		display: block;
		text-align: center;
		font-size: 18px;
	}
	
	
	/*feature*/
	#feature {
		margin-top: 20rem;
		margin-bottom: 20rem;
		position: relative;
		background: url("../img/bg01.png");
		background-attachment: fixed;
	}
	#feature::before {
		content: "";
		width: 100%;
		height: 150px;
		background: url("../img/bg-deco.png");
		position: absolute;
		top: -150px;
		left: 0;
	}
	#feature::after {
		content: "";
		width: 100%;
		height: 150px;
		background: url("../img/bg-deco02.png");
		background-position: bottom;
		position: absolute;
		bottom: -150px;
		right: 0;
	}
	.feature-ttl {
		width: 95%;
		margin: auto;
	}
	.feature-list {
		width: 98%;
		margin: 5rem auto 0 auto;
		flex-direction: column;
		gap:5rem;
	}
	.feature-list li {
		flex-direction: column;
		gap:2rem;
	}
	.feature-list li .txt{
		width: 100%;
	}
	.feature-list li .img {
		width: 100%;
	}
	.feature-list li .txt p {
		text-align: center;
	}
	.feature-no {
		font-size: 40px;
		margin-bottom: 2rem;
	}
	.feature-b-txt {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 1.5rem;
	}
	.feature-s-txt {
		width: 90%;
		margin: auto;
		font-size: 15px;
		line-height: 2;
	}
	
	
	/*medical*/
	#medical-info {
		padding: 10rem 0;
		position: relative;
	}
	#medical-info::before {
		content: "";
		width: 100px;
		height: 100px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		top:150px;
		left: 0px;
		z-index: -1;
	}
	#medical-info::after {
		content: "";
		width: 200px;
		height: 170px;
		background: url("../img/deco15.png");
		background-size: cover;
		position: absolute;
		top:0px;
		right: 0px;
		z-index: -1;
	}	
	.medical-wrapper {
		margin-top: 10rem;
	}
	.medical-wrapper ul {
		width: 95%;
		margin: auto;
		justify-content: space-between;
	}
	.medical-wrapper ul li {
		width: 45%;
		background: #EEF1F2;
		padding-top: 2rem;
		border-radius: 3rem;
		margin-bottom: 5rem;
	}
	.medical-wrapper ul li:hover {
		background: #CCD5D8;
	}
	.medical-wrapper ul li a {
		display: block;
		text-align: center;
		line-height: 3;
	}
	.medical-wrapper ul li a img {
		width: 60%;
		margin: auto;
	}
	.medical-wrapper ul li a span {
		font-size: 20px;
		color: #333333;
	}
	.visit {
		width: 95%;
		margin: 5rem auto;
		padding-bottom: 10rem;
		position: relative;
	}
	.visit::before {
		content: "";
		width: 200px;
		height: 60px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.visit::after {
		content: "";
		width: 100px;
		height: 102px;
		background: url("../img/deco12.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.visit-ttl {
		width: 200px;
		margin: 0 auto 3rem auto;
		border-bottom: 3px solid #31B887;
		padding-bottom: 1rem;
	}
	.visit-ttl p {
		font-size: 20px;
		text-align: center;
	}
	.visit-txt {
		font-size: 15px;
		line-height: 2;
		text-align: center;
	}
	
	
	/*recruit*/
	#recruit {
		margin: 5rem auto;
	}
	.recruit-bnr {
		width: 100%;
		margin: auto;
		flex-direction: column;
	}
	.recruit-bnr .img,
	.recruit-bnr .txt {
		width: 100%;
	}
	.recruit-bnr .img {
		background-position: center top 17%;
		height: 200px;
	}
	.recruit-bnr .txt {
		background: #E4F8F0;
		padding: 4rem 0 4rem 2rem;
		box-sizing: border-box;
		position: relative;
	}
	.recruit-bnr .txt::before {
		content: "";
		width: 85px;
		height: 65px;
		background: url("../img/deco04.png");
		background-size: cover;
		position: absolute;
		top:5px;
		right: 5px;
	}
	.r-bnr-ttl {
		font-size: 30px;
		color: #31B887;
		margin-bottom: 1rem;
	}
	.r-bnr-ttl span {
		font-family: zen-kaku-gothic-new, sans-serif;
		margin-left: 2rem;
		font-size: 18px;
		color: #333;
	}
	.r-bnr-txt {
		width: 95%;
		font-size: 14px;
		line-height: 1.5;
	}
	
	/*qaanda*/
	#qanda {
		padding-top: 10rem;
		padding-bottom: 10rem;
		background: #FBFEF5;
	}
	.qa-wrapper {
		width: 98%;
		margin: 5rem auto;
	}
	.qa-wrapper ul {
		flex-direction: column;
		gap:3rem;
	}
	.qa-wrapper ul li {
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 2px 2px 5px #ccc;
		padding-top: 12rem;
		box-sizing: border-box;
		margin-bottom: 5rem;
		margin: auto;
	}
	.qa-inner {
		width: 250px;
		margin: auto;
	}
	.qa-inner p {
		text-align: center;
	}
	.q-txt {
		font-size: 17px;
		margin-bottom: 2rem;
	}
	.a-txt {
		font-size: 13px;
		line-height: 2;
	}


	/*footer*/
	#footer {
		margin-top: 10rem;
	}
	.foot-top {
		width: 95%;
		margin: auto;
		flex-direction: column;
		gap:3rem;
	}
	.foot-top .left {
		width: 100%;
	}
	.foot-top .left h1 {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
	}
	.f-adress p {
		text-align: center;
		font-size: 16px;
	}
	.f-adress p i {
		font-size: 20px;
		margin-right: 1rem;
	}
	.f-bnrs {
		width: 100%;
		margin-top: 2rem;
		align-items: center;
		justify-content: space-between;
	}
	.f-bnr {
		width: 48%;
	}
	.f-bnr img {
		width: 100%;
	}
	.foot-top .right {
		width: 100%;
	}
	.f-timetable {
		width: 100%;
		margin-bottom: 2rem;
	}
	.f-icon-box {
		width: 90%;
		margin: auto;
		background: #fff;
		padding: 1.5rem 0;
		border-radius: 2rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.f-icons {
		width: 70%;
		margin: auto;
		justify-content: space-between;
	}
	.f-icon {
		width: 48%;
		align-items: center;
	}
	.f-icon img {
		width: 60px;
		height: 60px;
	}
	.f-icon p {
		font-size: 14px;
		text-align: center;
	}
	.foot-bottom {
		flex-direction: column-reverse;
		gap:5rem;
		margin-top: 5rem;
	}
	.f-map {
		width: 100%;
	}
	.f-map iframe {
		width: 100%;
	}
	.f-nav {
		margin: auto;
		padding-top: 5rem;
		box-sizing: border-box;
	}
	.f-nav-inner {
		gap:5rem;
	}
	.f-nav-ttl {
		font-size: 20px;
	}
	.f-nav-inner ul {
		margin-top: 3rem;
	}
	.f-nav-inner ul li {
		padding: 1rem;
	}
	.f-nav-inner ul li a {
		display: block;
		color: #333;
		font-size: 16px;
	}
	.f-nav-inner ul li:hover a {
		color: #737272;
	}
	.copy p {
		font-size: 12px;
		text-align: center;
	}
	
	.ttl02 {
		width: 70%;
		margin: auto;
		position: relative;
	}
	.ttl02::before {
		content: "";
		width: 60px;
		height: 25px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
	.ttl02 h3 {
		font-size: 30px;
		text-align: center;
		color: #31B887;
		line-height: 0.8;
	}
	.ttl02 h3 span {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-weight: 500;
		color: #333;
		font-size: 16px;
	}
	
	
	/*下層*/

	/*mainvisual*/
	#s-mainvisual {
		width:100%;
		height: 75vh;
		background: url("../img/clinic07.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	#s-mainvisual.clinic-mv {
		background-position: left 10% center;
	}
	.page-ttl {
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-ttl h2 {
		font-size: 30px;
		text-align: center;
		text-shadow: 2px 2px 5px #000;
		font-weight: 550;
		letter-spacing: 3px;
	}

	/*clinic*/
	.clinic-body {
		padding: 5rem 0;
		background: url("../img/bg01.png");
		background-size: cover;
		background-attachment: fixed;
	}

	#policy {
		padding: 10rem 0;
	}
	.policy-top {
		width: 98%;
		margin: 5rem auto;
		padding: 3rem 0;
		border-radius: 3rem;
		position: relative;
	}
	.policy-top::before {
		content: "";
		width: 60px;
		height: 30px;
		background: url("../img/deco10.png");
		background-size: cover;
		position: absolute;
		top:0;
		right: 0;
	}
	.policy-top::after {
		content: "";
		width: 80px;
		height: 30px;
		background: url("../img/deco11.png");
		background-size: cover;
		position: absolute;
		bottom:0;
		left: 0;
	}
	.policy-top p {
		font-size: 17px;
		text-align: center;
	}
	.policy-inner {
		width: 98%;
		margin: auto;
		flex-direction: column-reverse;
		gap:3rem;
	}
	.policy-inner .img {
		width: 80%;
		margin: auto;
	}
	.policy-inner .txt {
		width: 100%;
	}
	.policy-inner .txt p {
		font-size: 14px;
		line-height: 2;
		text-align: left;
	}

	#s-feature {
		padding: 10rem 0;
	}


	#garelly {
		padding: 10rem 0 0 0;
	}
	.garelly-inner {
		width: 100%;
		margin: 5rem auto;
	}
	/*==================================================
	スライダーのためのcss
	===================================*/
	.g-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
			width:94%;
			margin:0 auto;
	}

	.g-slider img {
			width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
			height:auto;
	}

	.g-slider .slick-slide {
		transform: scale(0.8);/*左右の画像のサイズを80%に*/
		transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
		opacity: 0.5;/*透過50%*/
	}

	.g-slider .slick-slide.slick-center{
		transform: scale(1);/*中央の画像のサイズだけ等倍に*/
		opacity: 1;/*透過なし*/
	}


	/*矢印の設定*/

	/*戻る、次へ矢印の位置*/
	.slick-prev, 
	.slick-next {
			position: absolute;/*絶対配置にする*/
			top: 42%;
			cursor: pointer;/*マウスカーソルを指マークに*/
			outline: none;/*クリックをしたら出てくる枠線を消す*/
			border-top: 2px solid #666;/*矢印の色*/
			border-right: 2px solid #666;/*矢印の色*/
			height: 15px;
			width: 15px;
	}

	.slick-prev {/*戻る矢印の位置と形状*/
			left: -1.5%;
			transform: rotate(-135deg);
	}

	.slick-next {/*次へ矢印の位置と形状*/
			right: -1.5%;
			transform: rotate(45deg);
	}

	/*ドットナビゲーションの設定*/

	.slick-dots {
		text-align:center;
		margin:20px 0 0 0 !important;
	}

	.slick-dots li {
		display:inline-block !important;
		margin:0 5px;
	}

	.slick-dots button {
			color: transparent !important;
			outline: none !important;
			width:8px !important;/*ドットボタンのサイズ*/
			height:8px !important;/*ドットボタンのサイズ*/
			display:block !important;
			border-radius:50% !important;
			background:#ccc !important;/*ドットボタンの色*/
	}

	.slick-dots .slick-active button{
			background:#333 !important;/*ドットボタンの現在地表示の色*/
	}


	/*doctor*/
	#doctor {
		padding-top: 10rem;
	}
	.doctor-container {
		margin-top: 15rem;
		background: #EFF8DD;
		position: relative;
		padding-bottom: 10rem;
	}
	.doctor-container::before {
		content: "";
		width: 100%;
		height: 10rem;
		background: url("../img/bg-deco03.png");
		background-size: cover;
		position: absolute;
		top: -10rem;
		left: 0;
	}
	.doctor-container::after {
		content: "";
		width: 100px;
		height: 40px;
		background: url("../img/deco05.png");
		background-size: cover;
		position: absolute;
		top: -80px;
		right: 50px;
	}
	.docto-inner {
		width: 98%;
		margin: auto;
		flex-direction: column-reverse;
		gap:3rem;
	}
	.docto-inner .txt {
		width: 100%;
		margin: auto;
	}
	.docto-inner .txt p {
		font-size: 14px;
		line-height: 2;
	}
	.docto-inner .img {
		width: 90%;
		position: relative;
	}
	.doctor-card {
		width: 150px;
		padding: 1rem 0;
		background: #fff;
		border-radius: 2rem;
		position: absolute;
		bottom:1rem;
		right: 1rem;
	}
	.doctor-card p {
		text-align: center;
		font-size: 20px;
	}
	.doctor-card p .dp-s {
		font-size: 13px;
	}
	.doctor-card p .en {
		font-size: 15px;
		color: #31B887;
	}
	.d-carrer-con {
		width: 95%;
		flex-direction: column;
		gap: 3rem;
	}
	.d-carrer {
		width: 90%;
		margin: 5rem auto 0 auto;
		background: #fff;
		border-radius: 3rem;
		padding: 3rem;
		box-sizing: border-box;
	}
	.dc-ttl {
		font-size: 18px;
		margin-bottom: 2rem;
	}
	.d-carrer dl {
		justify-content: space-between;
		font-size: 14px;
	}
	.d-carrer dl dt {
		width: 30%;
		margin-bottom: 1rem;
	}
	.d-carrer dl dd {
		width: 70%;
		margin-bottom: 1rem;
	}


	/*medical*/
	.medical-body {
		padding: 10rem 0 5rem 0;
		background: url("../img/bg01.png");
		background-size: cover;
		background-attachment: fixed;
	}
	.medical-box {
		margin-bottom: 15rem;
	}
	.m-ttl {
		width: 100%;
		height: 100px;
		background: url("../img/bg-deco03.png");
		background-position: top center;
		padding-top: 8rem;
		box-sizing:border-box;
		position: relative;
	}
	.m-ttl::before {
		content: "";
		width: 75px;
		height: 42px;
		background: url("../img/deco06.png");
		background-size: cover;
		position: absolute;
		top: 40px;
		left: 30px;
	}
	.m-ttl::after {
		content: "";
		width: 55px;
		height: 30px;
		background: url("../img/deco07.png");
		background-size: cover;
		position: absolute;
		top: 60px;
		right: 30px;
	}
	.m-ttl h5 {
		text-align: center;
		font-size: 20px;
		letter-spacing: 3px;
		font-weight: 500;
	}
	.mb-inner {
		width: 95%;
		margin: 8rem auto 0 auto;
		flex-direction: column;
		gap:3rem;
	}
	.mb-inner .txt {
		width: 100%;
	}
	.mb-inner .txt p {
		font-size: 14px;
		line-height: 2;
	}
	.mb-inner .img {
		width: 100%;
	}
	.medical-topic {
		width: 95%;
		margin: 5rem auto 0 auto;
		background: #fff;
		border-radius: 3rem;
		padding: 3rem;
		box-sizing: border-box;
	}
	.medical-topic p {
		font-size: 13px;
		line-height: 2;
	}


	/*access*/
	#access {
		padding-top: 10rem;
	}
	.access-container {
		margin-top: 15rem;
		background: #EFF8DD;
		position: relative;
		padding-bottom: 10rem;
	}
	.access-container::before {
		content: "";
		width: 100%;
		height: 10rem;
		background: url("../img/bg-deco03.png");
		background-size: cover;
		position: absolute;
		top: -10rem;
		left: 0;
	}
	.access-container::after {
		content: "";
		width: 100px;
		height: 40px;
		background: url("../img/deco05.png");
		background-size: cover;
		position: absolute;
		top: -80px;
		right: 50px;
	}
	.access-inner {
		width: 98%;
		margin: auto;
		position: relative;
	}
	.access-inner::before {
		display: none;
	}
	.access-inner::after {
		display: none;
	}
	.access-img {
		width: 80%;
		margin: 5rem auto;
	}
	.access-img img {
		width: 100%;
		border-radius: 5rem;
	}
	.access-adress p {
		font-size: 17px;
		text-align: center;
	}
	.access-adress p i {
		font-size: 28px;
		color: #31B887;
	}
	.access-timetable {
		width: 98%;
		margin: 3rem auto;
	}
	.a-icon-box {
		width: 80%;
		margin: auto;
		background: #fff;
		padding: 1.5rem 0;
		border-radius: 2rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.a-icons {
		width: 90%;
		margin: auto;
		justify-content: space-between;
	}
	.a-icon {
		width: 48%;
		align-items: center;
		gap:1rem;
	}
	.a-icon img {
		width: 60px;
		height: 60px;
	}
	.a-icon p {
		font-size: 14px;
		text-align: center;
	}


	/*recruit*/
	.recruit-body {
		padding: 10rem 0;
		background: url("../img/bg01.png");
		background-size: cover;
		background-attachment: fixed;
	}
	.recruit-inner {
		width: 95%;
		margin: 5rem auto;
		flex-direction: column;
		gap:3rem;
	}
	.recruit-inner .txt {
		width: 100%;
	}
	.recruit-inner .txt p {
		font-size: 14px;
		line-height: 2;
	}
	.recruit-inner .img {
		width: 100%;
	}
	.recruit-AR {
		width: 100%;
		margin: auto;
		padding: 5rem 0;
		overflow-y: scroll;
	}
	.ar-ttl {
		width: 250px;
		margin: 0 auto 5rem auto;
		border-bottom: 3px solid #31B887;
	}
	 .ar-ttl p {
		font-size: 24px;
		text-align: center;
		letter-spacing: 2px;
	}
	.recruit-AR table {
		width: 100%;
	}
	.recruit-AR table th {
		width: 25%;
		background: #5BC59D;
		border:#C4EFD7 1px solid;
		padding: 1.5rem 0;
		text-align: center;
		vertical-align:middle;
		font-size: 14px;
		font-weight: 500;
	}
	.recruit-AR table td {
		width: 75%;
		background: #fff;
		border:#C4EFD7 1px solid;
		padding: 1.5rem 0 1.5rem 1.5rem;
		box-sizing: border-box;
		vertical-align:middle;
		font-size: 13px;overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
		
	}
	.recruit-AR table td span {
		font-size: 14px;
		line-height: 2;
	}
	
	
	
	
	
	
	
	#sp-btn {
		position: fixed;
		bottom: 0;
		left: 50%;
		z-index: 980;
    width: 100%;
		transform: translateX(-50%);
	}
	#sp-btn ul {
		justify-content: center;
    max-width: 430px;
    padding-bottom: 0;
    margin: 0 auto;
    position: relative;
	}
	#sp-btn .type1 ul::before {
		background-color: #487F63;
	}
	#sp-btn ul::before {
		content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
		background: #487F63;
		backdrop-filter: blur(2px);
	}
	#sp-btn ul li {
		width: calc(100% / 4);
    margin: 0;
    padding: 10px 0 6px;
    text-align: center;
    line-height: 1.2;
    position: relative;
	}
	#sp-btn ul li a {
		display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
		text-align: center;
	}
	#sp-btn ul li i {
		font-size: 3.6rem;
    font-family: "Font Awesome 5 Free";
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
		text-align: center;
	}
	#sp-btn ul li span {
		display: block;
    font-size: 1.8rem;
    color: #fff;
		text-align: center;
	}

	.single-nav {
    padding: 20px 45px;
	}
}