@charset "utf-8";


/************************************
#message
************************************/
@media screen and (min-width: 1200px) {
	h2.message {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		padding-top: 100px;
		margin-bottom: 40px;
	}
	
	#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 {
		display: flex;
		justify-content: space-between;
		width: 960px;
		padding: 50px 0;
		margin: 0 auto;
	}
	
	#message .wrapper.doctor_01 {
		border-bottom: 1px solid var(--bw3);
	}
	
	#message .wrapper>.title {
		flex-grow: 1;
	}
	
	#message .wrapper>.title h3 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: 40px;
	}
	
	#message .wrapper>.title .doctor {
		position: relative;
		width: 200px;
	}
	
	#message .wrapper>.title .doctor::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.doctor_01>.title .doctor::before {
		content: "院長";
	}
	
	#message .wrapper.doctor_02>.title .doctor::before {
		content: "副院長";
	}
	
	#message .wrapper>.title .doctor::after {
		position: absolute;
		display: block;
		content: "";
		background-size: 100% 100%;
		width: 62px;
		height: 80px;
		top: 120px;
		right: -25px;
	}
	
	#message .wrapper.doctor_01>.title .doctor::after {
		background: url("../img/common/character_u.svg") no-repeat;
	}
	
	#message .wrapper.doctor_02>.title .doctor::after {
		background: url("../img/common/character_lala.svg") no-repeat;
	}
	
	#message .wrapper>.title .doctor img {
		border-radius: calc(200px / 2);
		width: 100%;
		height: 200px;
		margin-bottom: 15px;
	}
	
	#message .wrapper>.title .doctor .name {
		width: 100%;
	}
	
	#message .wrapper>.title .doctor .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>.title .doctor .name h4 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
	
	#message .wrapper .text {
		width: 620px;
	}
	
	#message .wrapper .text p {
		color: var(--bw1);
		font-size: 16px;
		line-height: 26px;
		font-weight: var(--regular);
		text-align: justify;
		width: 100%;
		margin-bottom: 35px;
	}
	
	#message .wrapper .text .profile {
		width: 100%;
	}
	
	#message .wrapper .text .profile h5 {
		color: var(--bw1);
		font-size: 22px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		border-bottom: 1px solid var(--bw3);
		width: 100%;
		padding-bottom: 13px;
		margin-bottom: 20px;
	}
	
	#message .wrapper .text .profile table {
		width: 100%;
	}
	
	#message .wrapper .text .profile table tr {
		display: block;
		width: 100%;
		padding: 10px 0;
	}
	
	#message .wrapper .text .profile table tr th {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
		width: 70px;
	}
	
	#message .wrapper .text .profile table tr td {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	h2.message {
		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));
	}
	
	#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 {
		display: flex;
		justify-content: space-between;
		width: calc(960vw / var(--tablet));
		padding: calc(50vw / var(--tablet)) 0;
		margin: 0 auto;
	}
	
	#message .wrapper.doctor_01 {
		border-bottom: calc(1vw / var(--tablet)) solid var(--bw3);
	}
	
	#message .wrapper>.title {
		flex-grow: 1;
	}
	
	#message .wrapper>.title 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(40vw / var(--tablet));
	}
	
	#message .wrapper>.title .doctor {
		position: relative;
		width: calc(200vw / var(--tablet));
	}
	
	#message .wrapper>.title .doctor::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.doctor_01>.title .doctor::before {
		content: "院長";
	}
	
	#message .wrapper.doctor_02>.title .doctor::before {
		content: "副院長";
	}
	
	#message .wrapper>.title .doctor::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.doctor_01>.title .doctor::after {
		background: url("../img/common/character_u.svg") no-repeat;
	}
	
	#message .wrapper.doctor_02>.title .doctor::after {
		background: url("../img/common/character_lala.svg") no-repeat;
	}
	
	#message .wrapper>.title .doctor img {
		border-radius: calc((200vw / var(--tablet)) / 2);
		width: 100%;
		height: calc(200vw / var(--tablet));
		margin-bottom: calc(15vw / var(--tablet));
	}
	
	#message .wrapper>.title .doctor .name {
		width: 100%;
	}
	
	#message .wrapper>.title .doctor .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>.title .doctor .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 .text {
		width: calc(620vw / var(--tablet));
	}
	
	#message .wrapper .text p {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: calc(26vw / var(--tablet));
		font-weight: var(--regular);
		text-align: justify;
		width: 100%;
		margin-bottom: calc(35vw / var(--tablet));
	}
	
	#message .wrapper .text .profile {
		width: 100%;
	}
	
	#message .wrapper .text .profile h5 {
		color: var(--bw1);
		font-size: calc(22vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		border-bottom: calc(1vw / var(--tablet)) solid var(--bw3);
		width: 100%;
		padding-bottom: calc(13vw / var(--tablet));
		margin-bottom: calc(20vw / var(--tablet));
	}
	
	#message .wrapper .text .profile table {
		width: 100%;
	}
	
	#message .wrapper .text .profile table tr {
		display: block;
		width: 100%;
		padding: calc(10vw / var(--tablet)) 0;
	}
	
	#message .wrapper .text .profile table tr th {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
		width: calc(70vw / var(--tablet));
	}
	
	#message .wrapper .text .profile table tr td {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
}

@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(25vw / 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.doctor_01 {
		margin-bottom: calc(90vw / var(--sp));
	}
	
	#message .wrapper>.title {
		width: 100%;
	}
	
	#message .wrapper>.title 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>.title .doctor {
		position: relative;
		width: calc(200vw / var(--sp));
		margin: 0 auto calc(30vw / var(--sp));
	}
	
	#message .wrapper>.title .doctor::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.doctor_01>.title .doctor::before {
		content: "院長";
	}
	
	#message .wrapper.doctor_02>.title .doctor::before {
		content: "副院長";
	}
	
	#message .wrapper>.title .doctor::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.doctor_01>.title .doctor::after {
		background: url("../img/common/character_u.svg") no-repeat;
	}
	
	#message .wrapper.doctor_02>.title .doctor::after {
		background: url("../img/common/character_lala.svg") no-repeat;
	}
	
	#message .wrapper>.title .doctor img {
		border-radius: calc((200vw / var(--sp)) / 2);
		width: 100%;
		height: calc(200vw / var(--sp));
		margin-bottom: calc(15vw / var(--sp));
	}
	
	#message .wrapper>.title .doctor .name {
		width: 100%;
	}
	
	#message .wrapper>.title .doctor .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>.title .doctor .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 .text {
		width: 100%;
	}
	
	#message .wrapper .text p {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: justify;
		width: 100%;
		margin-bottom: calc(20vw / var(--sp));
	}
	
	#message .wrapper .text .profile {
		width: 100%;
	}
	
	#message .wrapper .text .profile h5 {
		color: var(--bw1);
		font-size: calc(26vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(10vw / var(--sp));
	}
	
	#message .wrapper .text .profile table {
		width: 100%;
	}
	
	#message .wrapper .text .profile table tr {
		display: block;
		width: 100%;
		padding: calc(10vw / var(--sp)) 0;
	}
	
	#message .wrapper .text .profile 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(70vw / var(--sp));
	}
	
	#message .wrapper .text .profile 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;
	}
}