@charset "utf-8";


/************************************
#clinic
************************************/
@media screen and (min-width: 1200px) {
	#clinic {
		width: 1080px;
		margin: 0 auto 50px;
	}
	
	#clinic h2 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		padding-top: 100px;
		margin-bottom: 40px;
	}
	
	#clinic .wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 50px;
	}
	
	#clinic .wrapper h3 {
		color: var(--bw1);
		font-size: 26px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
	}
	
	#clinic .wrapper table {
		width: 780px;
	}
	
	#clinic .wrapper table tr {
		display: block;
		border-bottom: 1px solid var(--bw4);
		padding: 25px 0;
	}
	
	#clinic .wrapper table tr:first-child {
		border-top: 1px solid var(--bw4);
	}
	
	#clinic .wrapper table tr th {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 115px;
	}
	
	#clinic .wrapper table tr td {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
	
	#clinic .map {
		width: 100%;
	}
	
	#clinic .map iframe {
		width: 100%;
		height: 500px;
		margin-bottom: 20px;
	}
	
	#clinic .map .attention {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#clinic {
		width: calc(1080vw / var(--tablet));
		padding-top: calc(100vw / var(--tablet));
		margin: 0 auto calc(50vw / var(--tablet));
	}
	
	#clinic h2 {
		color: var(--bw1);
		font-size: calc(30vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		padding-top: calc(100vw / var(--tablet));
		margin-bottom: calc(40vw / var(--tablet));
	}
	
	#clinic .wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: calc(50vw / var(--tablet));
	}
	
	#clinic .wrapper h3 {
		color: var(--bw1);
		font-size: calc(26vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
	}
	
	#clinic .wrapper table {
		width: calc(780vw / var(--tablet));
	}
	
	#clinic .wrapper table tr {
		display: block;
		border-bottom: calc(1vw / var(--tablet)) solid var(--bw4);
		padding: calc(25vw / var(--tablet)) 0;
	}
	
	#clinic .wrapper table tr:first-child {
		border-top: calc(1vw / var(--tablet)) solid var(--bw4);
	}
	
	#clinic .wrapper table tr th {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: calc(115vw / var(--tablet));
	}
	
	#clinic .wrapper table tr td {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
	
	#clinic .map {
		width: 100%;
	}
	
	#clinic .map iframe {
		width: 100%;
		height: calc(500vw / var(--tablet));
		margin-bottom: calc(20vw / var(--tablet));
	}
	
	#clinic .map .attention {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
	}
}

@media screen and (max-width: 767px) {
	#clinic {
		width: calc(340vw / var(--sp));
		padding-top: calc(20vw / var(--sp));
		margin: 0 auto calc(60vw / var(--sp));
	}
	
	#clinic .wrapper {
		width: 100%;
		margin-bottom: calc(50vw / var(--sp));
	}
	
	#clinic .wrapper h3 {
		color: var(--bw1);
		font-size: calc(26vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		margin-bottom: calc(20vw / var(--sp));
	}
	
	#clinic .wrapper table {
		width: 100%;
	}
	
	#clinic .wrapper table tr {
		display: block;
		border-bottom: calc(1vw / var(--sp)) solid var(--bw4);
		padding: calc(25vw / var(--sp)) 0;
	}
	
	#clinic .wrapper table tr:first-child {
		border-top: calc(1vw / var(--sp)) solid var(--bw4);
	}
	
	#clinic .wrapper table tr th {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: left;
		width: calc(87vw / var(--sp));
	}
	
	#clinic .wrapper table tr td {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: left;
	}
	
	#clinic .map {
		width: 100%;
	}
	
	#clinic .map iframe {
		width: 100%;
		height: calc(320vw / var(--sp));
		margin-bottom: calc(15vw / var(--sp));
	}
	
	#clinic .map .attention {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
}


/************************************
#message
************************************/
@media screen and (min-width: 1200px) {
	#message {
		position: relative;
		box-sizing: border-box;
		background: var(--green2);
		border-radius: 20px;
		width: 1080px;
		padding-top: 30px;
		margin: 0 auto 105px;
	}
	
	#message .en_corner p {
		color: var(--green1);
	}
	
	#message .wrapper {
		width: 960px;
		padding: 80px 0 50px;
		margin: 0 auto;
	}
	
	#message .wrapper h3 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: 10px;
	}
	
	#message .wrapper ul {
		display: flex;
		justify-content: space-between;
		width: 478px;
		margin: 0 auto 50px;
	}
	
	#message .wrapper ul li {
		position: relative;
		width: 200px;
	}
	
	#message .wrapper ul li::before {
		position: absolute;
		display: block;
		align-content: center;
		background: var(--bw6);
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-radius: calc(68px / 2);
		width: 68px;
		height: 68px;
		top: 47px;
		right: -27px;
	}
	
	#message .wrapper ul li.doctor_01::before {
		content: "院長";
	}
	
	#message .wrapper ul li.doctor_02::before {
		content: "副院長";
	}
	
	#message .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background-size: 100% 100%;
		width: 62px;
		height: 80px;
		top: 120px;
		right: -25px;
	}
	
	#message .wrapper ul li.doctor_01::after {
		background: url("../img/common/character_u.svg") no-repeat;
	}
	
	#message .wrapper ul li.doctor_02::after {
		background: url("../img/common/character_lala.svg") no-repeat;
	}
	
	#message .wrapper ul li img {
		border-radius: calc(200px / 2);
		width: 100%;
		height: 200px;
		margin-bottom: 15px;
	}
	
	#message .wrapper ul li .name {
		width: 100%;
	}
	
	#message .wrapper ul li .name .kana {
		color: var(--bw1);
		font-size: 14px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
		width: 100%;
		margin-bottom: 10px;
	}
	
	#message .wrapper ul li .name h4 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
	
	#message .wrapper a {
		position: relative;
		display: block;
		box-sizing: border-box;
		align-content: center;
		background: var(--green1);
		border-radius: 10px;
		width: 280px;
		height: 90px;
		padding-left: 20px;
		margin: 0 auto;
	}
	
	#message .wrapper a p {
		color: var(--bw6);
		font-size: 22px;
		line-height: 32px;
		font-weight: var(--bold);
		text-align: left;
	}
	
	#message .wrapper a i {
		position: absolute;
		display: block;
		align-content: center;
		background: var(--bw6);
		color: var(--green1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-radius: 4px;
		width: 28px;
		height: 28px;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#message {
		position: relative;
		box-sizing: border-box;
		background: var(--green2);
		border-radius: calc(20vw / var(--tablet));
		width: calc(1080vw / var(--tablet));
		padding-top: calc(30vw / var(--tablet));
		margin: 0 auto calc(105vw / var(--tablet));
	}
	
	#message .en_corner p {
		color: var(--green1);
	}
	
	#message .wrapper {
		width: calc(960vw / var(--tablet));
		padding: calc(80vw / var(--tablet)) 0 calc(50vw / var(--tablet));
		margin: 0 auto;
	}
	
	#message .wrapper h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: calc(10vw / var(--tablet));
	}
	
	#message .wrapper ul {
		display: flex;
		justify-content: space-between;
		width: calc(478vw / var(--tablet));
		margin: 0 auto calc(50vw / var(--tablet));
	}
	
	#message .wrapper ul li {
		position: relative;
		width: calc(200vw / var(--tablet));
	}
	
	#message .wrapper ul li::before {
		position: absolute;
		display: block;
		align-content: center;
		background: var(--bw6);
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-radius: calc((68vw / var(--tablet)) / 2);
		width: calc(68vw / var(--tablet));
		height: calc(68vw / var(--tablet));
		top: calc(47vw / var(--tablet));
		right: calc(-27vw / var(--tablet));
	}
	
	#message .wrapper ul li.doctor_01::before {
		content: "院長";
	}
	
	#message .wrapper ul li.doctor_02::before {
		content: "副院長";
	}
	
	#message .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background-size: 100% 100%;
		width: calc(62vw / var(--tablet));
		height: calc(80vw / var(--tablet));
		top: calc(120vw / var(--tablet));
		right: calc(-25vw / var(--tablet));
	}
	
	#message .wrapper ul li.doctor_01::after {
		background: url("../img/common/character_u.svg") no-repeat;
	}
	
	#message .wrapper ul li.doctor_02::after {
		background: url("../img/common/character_lala.svg") no-repeat;
	}
	
	#message .wrapper ul li img {
		border-radius: calc((200vw / var(--tablet)) / 2);
		width: 100%;
		height: calc(200vw / var(--tablet));
		margin-bottom: calc(15vw / var(--tablet));
	}
	
	#message .wrapper ul li .name {
		width: 100%;
	}
	
	#message .wrapper ul li .name .kana {
		color: var(--bw1);
		font-size: calc(14vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
		width: 100%;
		margin-bottom: calc(10vw / var(--tablet));
	}
	
	#message .wrapper ul li .name h4 {
		color: var(--bw1);
		font-size: calc(30vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
	
	#message .wrapper a {
		position: relative;
		display: block;
		box-sizing: border-box;
		align-content: center;
		background: var(--green1);
		border-radius: calc(10vw / var(--tablet));
		width: calc(280vw / var(--tablet));
		height: calc(90vw / var(--tablet));
		padding-left: calc(20vw / var(--tablet));
		margin: 0 auto;
	}
	
	#message .wrapper a p {
		color: var(--bw6);
		font-size: calc(22vw / var(--tablet));
		line-height: calc(32vw / var(--tablet));
		font-weight: var(--bold);
		text-align: left;
	}
	
	#message .wrapper a i {
		position: absolute;
		display: block;
		align-content: center;
		background: var(--bw6);
		color: var(--green1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-radius: calc(4vw / var(--tablet));
		width: calc(28vw / var(--tablet));
		height: calc(28vw / var(--tablet));
		top: 50%;
		right: calc(20vw / var(--tablet));
		transform: translateY(-50%);
	}
}

@media screen and (max-width: 767px) {
	#message {
		position: relative;
		box-sizing: border-box;
		background: var(--green2);
		border-radius: calc(20vw / var(--sp));
		width: calc(340vw / var(--sp));
		padding: calc(60vw / var(--sp)) 0 calc(30vw / var(--sp));
		margin: 0 auto calc(60vw / var(--sp));
	}
	
	#message .en_corner p {
		color: var(--green1);
	}
	
	#message .wrapper {
		width: calc(280vw / var(--sp));
		margin: 0 auto;
	}
	
	#message .wrapper h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(30vw / var(--sp));
	}
	
	#message .wrapper ul {
		display: flex;
		flex-direction: column;
		gap: calc(40vw / var(--sp)) 0;
		width: 100%;
		margin-bottom: calc(35vw / var(--sp));
	}
	
	#message .wrapper ul li {
		position: relative;
		width: calc(200vw / var(--sp));
		margin: 0 auto;
	}
	
	#message .wrapper ul li::before {
		position: absolute;
		display: block;
		align-content: center;
		background: var(--bw6);
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-radius: calc((68vw / var(--sp)) / 2);
		width: calc(68vw / var(--sp));
		height: calc(68vw / var(--sp));
		top: calc(47vw / var(--sp));
		right: calc(-27vw / var(--sp));
	}
	
	#message .wrapper ul li.doctor_01::before {
		content: "院長";
	}
	
	#message .wrapper ul li.doctor_02::before {
		content: "副院長";
	}
	
	#message .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background-size: 100% 100%;
		width: calc(62vw / var(--sp));
		height: calc(80vw / var(--sp));
		top: calc(120vw / var(--sp));
		right: calc(-25vw / var(--sp));
	}
	
	#message .wrapper ul li.doctor_01::after {
		background: url("../img/common/character_u.svg") no-repeat;
	}
	
	#message .wrapper ul li.doctor_02::after {
		background: url("../img/common/character_lala.svg") no-repeat;
	}
	
	#message .wrapper ul li img {
		border-radius: calc((200vw / var(--sp)) / 2);
		width: 100%;
		height: calc(200vw / var(--sp));
		margin-bottom: calc(15vw / var(--sp));
	}
	
	#message .wrapper ul li .name {
		width: 100%;
	}
	
	#message .wrapper ul li .name .kana {
		color: var(--bw1);
		font-size: calc(14vw / var(--sp));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
		width: 100%;
		margin-bottom: calc(10vw / var(--sp));
	}
	
	#message .wrapper ul li .name h4 {
		color: var(--bw1);
		font-size: calc(30vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
	
	#message .wrapper a {
		position: relative;
		display: block;
		box-sizing: border-box;
		align-content: center;
		background: var(--green1);
		border-radius: calc(10vw / var(--sp));
		width: 100%;
		height: calc(90vw / var(--sp));
		padding-left: calc(20vw / var(--sp));
	}
	
	#message .wrapper a p {
		color: var(--bw6);
		font-size: calc(22vw / var(--sp));
		line-height: calc(32vw / var(--sp));
		font-weight: var(--bold);
		text-align: left;
	}
	
	#message .wrapper a i {
		position: absolute;
		display: block;
		align-content: center;
		background: var(--bw6);
		color: var(--green1);
		font-size: calc(16vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-radius: calc(4vw / var(--sp));
		width: calc(28vw / var(--sp));
		height: calc(28vw / var(--sp));
		top: 50%;
		right: calc(20vw / var(--sp));
		transform: translateY(-50%);
	}
}