@charset "utf-8";
/*BASE*/


/*SP*/
@media screen and (max-width: 767.98px) {

/*BASE*/
section {
	padding:2rem 2rem 4rem 2rem;
}
section .hgroup {
	margin-bottom:2rem;
}

/*院長*/
.head-doctor {
	padding:1rem;
	background: linear-gradient(180deg,rgba(130, 186, 255, 1) 0%, rgba(187, 236, 255, 1) 100%);
	overflow:clip;
	border-radius:10px;
}
.head-doctor .img-box {
	padding:10px;
	background-color:#FFF;
}
.head-doctor dl {
	display:flex;
	justify-content:center;
	align-items:baseline;
	column-gap:1rem;
	padding:calc(20px + .5em) 0 20px;
}
.head-doctor dl .post {
	font-size:16px;
}
.head-doctor dl .name {
	font-size:18px;
}
.head-doctor .activity {
	display:flex;
	flex-flow: row nowrap;
	gap:10px;
}
.head-doctor .activity li {
	flex: 1;
}
.head-doctor .activity li a {
	display:block;
	color:#FFF;
	text-align:center;
	padding:.5rem 0;
	border-radius:6px;
	opacity:1;
	transition:opacity ease-in .2s;
}
.head-doctor .activity li:nth-child(1) a {
	background-color:rgba(108,195,156,1);
	letter-spacing:2em;
	text-indent:2em;
	white-space:nowrap;
}
.head-doctor .activity li:nth-child(2) a {
	background-color:#ffaa26;
}
.head-doctor .txt-box {
	color:#050b4d;
}
.head-doctor .txt-box .message-box {
	font-size:16px;
	padding:1.5rem 1rem;
}
.head-doctor .txt-box .degree {
	padding:1rem;
	background-color:rgba(187, 236, 255, .5);
	border-radius:6px;
}
.head-doctor .txt-box .degree li {
	display:flex;
	font-size:12px;
}
.head-doctor .txt-box .degree li:not(:last-child) {
	margin-bottom:.5rem;
}
.head-doctor .txt-box .degree li::before {
	content:"●"
}

/*医療チーム*/
.team { padding:1.5rem 0; }
.team .profile {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:1.5rem;
}
.team .profile > li {
	padding:1rem;
	background: linear-gradient(180deg,rgba(130, 186, 255, 1) 0%, rgba(187, 236, 255, 1) 100%);
	overflow:clip;
	border-radius:10px;
}
.team .profile > li .img-box {
	background-color:#FFF;
	padding:10px;
	margin-bottom:1rem;
}
.team .profile > li .img-box dl {
	padding:10px 0 0;
}
.team .profile > li .img-box .post {
	font-size:12px;
	margin-bottom:5px;
}
.team .profile > li .img-box .post .sub {
	display:block;
	font-size:10px;
}
.team .profile > li .img-box .name {
	font-size:clamp(14px, 1.6vw, 18px);
	text-align:center;
}
.team .profile > li .txt-box {
	align-self:center;
}
.team .profile > li .txt-box .message-box {
	font-size:12px;
	text-align:justify;
}

/*歯科医師*/
.team .profile > li.dentist {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}
.team .profile > li.dentist {
	padding:1rem;
	background: linear-gradient(180deg,rgba(247, 199, 123, 1) 0%, rgba(253, 255, 174, 1) 100%);
}
.team .profile > li.dentist .img-box {
	padding:10px;
	background-color:#FFF;
}
.team .profile > li.dentist .img-box dl {
	display:flex;
	justify-content:center;
	align-items:baseline;
	column-gap:1rem;
	padding:20px 0 10px;
}
.team .profile > li.dentist .img-box dl .post {
	font-size:16px;
}
.team .profile > li.dentist .img-box dl .name {
	font-size:18px;
}
.team .profile > li.dentist .txt-box {
	color:#4d0505;
}
.team .profile > li.dentist .txt-box .message-box {
	font-size:16px;
	padding:1.5rem 1rem;
}
.team .profile > li.dentist .txt-box .degree {	
	padding:1rem;
	background-color:rgba(253, 255, 174, .5);
	border-radius:6px;
}
.team .profile > li.dentist .txt-box .degree li {
	display:flex;
	font-size:12px;
}
.team .profile > li.dentist .txt-box .degree li:not(:last-child) {
	margin-bottom:.5rem;
}
.team .profile > li.dentist .txt-box .degree li::before {
	content:"●"
}

/*歯科衛生士*/
.team .profile > li.hygienist {
	background: linear-gradient(180deg,rgba(255, 212, 228, 1) 0%, rgba(255, 238, 198, 1) 100%);
}
.team .profile > li.hygienist .txt-box {
	color:#3d0535;
}
/*歯科助手*/
.team .profile > li.assistant {
	background: linear-gradient(180deg,rgba(197, 255, 210, 1) 0%, rgba(233, 255, 199, 1) 100%);
}
.team .profile > li.assistant .txt-box {
	color:#0e140d;
}
/*受付*/
.team .profile > li.reception {
	background: linear-gradient(180deg,rgba(255, 230, 212, 1) 0%, rgba(255, 246, 198, 1) 100%);
}
.team .profile > li.reception .txt-box {
	color:#4d0505;
}

}


/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/
section {
	padding:80px 60px;
}
section .container {
	max-width:1440px;
	margin:auto;
}
section .hgroup h1 {
	text-align:center;
	padding-right:98px;
}

section .content-box {
	max-width:1280px;
	margin:auto;
	padding:60px 0 0;
}

/*院長*/
.head-doctor {
	display:grid;
	grid-template-columns: clamp(240px, 30%, 320px) 1fr;
	gap:0 40px;
	padding: clamp(40px, 5vw, 60px);
	background: linear-gradient(180deg,rgba(130, 186, 255, 1) 0%, rgba(187, 236, 255, 1) 100%);
	overflow:clip;
	border-radius:10px;
}
.head-doctor .img-box {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	padding:10px;
	background-color:#FFF;
}
.head-doctor dl {
	display:flex;
	justify-content:center;
	align-items:baseline;
	column-gap:1rem;
	padding:calc(20px + .5em) 0 20px;
}
.head-doctor dl .post {
	font-size:clamp(16px, 1.8vw, 24px);
}
.head-doctor dl .name {
	font-size:clamp(24px, 2.4vw, 34px);
}
.head-doctor .activity {
	display:flex;
	flex-flow: row nowrap;
	gap:10px;
}
.head-doctor .activity li {
	flex: 1;
}
.head-doctor .activity li a {
	display:block;
	color:#FFF;
	text-align:center;
	padding:.5rem 0;
	border-radius:6px;
	opacity:1;
	transition:opacity ease-in .2s;
}
.head-doctor .activity li a:hover {
	opacity:.8;
}
.head-doctor .activity li:nth-child(1) a {
	background-color:rgba(108,195,156,1);
	letter-spacing:2em;
	text-indent:2em;
	white-space:nowrap;
}
.head-doctor .activity li:nth-child(2) a {
	background-color:#ffaa26;
}
.head-doctor .txt-box {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	display:grid;
	grid-template-columns: auto;
	grid-template-rows:1fr auto;
	gap:20px;
	color:#050b4d;
}
.head-doctor .txt-box .message-box {
	grid-row: 1 / 2;
	align-self:center;
	font-size:clamp(16px, 1.6vw, 24px);
}
.head-doctor .txt-box .degree {
	padding:20px;
	background-color:rgba(187, 236, 255, .5);
	border-radius:6px;
}
.head-doctor .txt-box .degree li::before {
	content:"●"
}

.head-doctor .activity {
	grid-row: 3 / 4;
	grid-column: 1 / 3;
}

/*医療チーム*/
.team { padding:60px 0; }
.team .profile {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:60px 60px;
}
.team .profile > li {
	display:grid;
	grid-template-columns:clamp(160px, 30%, 280px) 1fr;
	gap:clamp(20px, 2.2vw, 40px);
	padding: clamp(40px, 5vw, 60px);
	background: linear-gradient(180deg,rgba(130, 186, 255, 1) 0%, rgba(187, 236, 255, 1) 100%);
	overflow:clip;
	border-radius:10px;
}
.team .profile > li .img-box {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	padding:10px;
	background-color:#FFF;
}
.team .profile > li .img-box dl {
	padding:20px 0 10px;
}
.team .profile > li .img-box .post {
	display:flex;
	/*justify-content:space-between;*/
	align-items:center;
	column-gap:.5rem;
	font-size:clamp(12px, 1.4vw, 14px);
	margin-bottom:5px;
}
.team .profile > li .img-box .post .sub {
	font-size:10px;
}
.team .profile > li .img-box .name {
	font-size:clamp(14px, 1.6vw, 18px);
	text-align:center;
}
.team .profile > li .txt-box {
	align-self:center;
}
.team .profile > li .txt-box .message-box {
	font-size:clamp(12px, 1.2vw, 16px);
	text-align:justify;
}

/*歯科医師*/
.team .profile > li.dentist {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}
.team .profile > li.dentist {
	display:grid;
	grid-template-columns: clamp(240px, 30%, 320px) 1fr;
	gap:0 40px;
	background: linear-gradient(180deg,rgba(247, 199, 123, 1) 0%, rgba(253, 255, 174, 1) 100%);
}
.team .profile > li.dentist .img-box {
	padding:10px;
	background-color:#FFF;
}
.team .profile > li.dentist .img-box dl {
	display:flex;
	justify-content:center;
	align-items:baseline;
	column-gap:1rem;
	padding:20px 0 10px;
}
.team .profile > li.dentist .img-box dl .post {
	font-size:clamp(16px, 1.8vw, 24px);
}
.team .profile > li.dentist .img-box dl .name {
	font-size:clamp(24px, 2.4vw, 34px);
}
.team .profile > li.dentist .txt-box {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	align-self:stretch;
	display:grid;
	grid-template-columns: auto;
	grid-template-rows:1fr auto;
	gap:20px;
	color:#4d0505;
}
.team .profile > li.dentist .txt-box .message-box {
	grid-row: 1 / 2;
	align-self:center;
	font-size:clamp(18px, 1.8vw, 24px);
}
.team .profile > li.dentist .txt-box .degree {
	align-self:end;
	display:flex;
	flex-flow: row wrap; 
	gap:.5rem 2rem;
	padding:20px;
	background-color:rgba(253, 255, 174, .5);
	border-radius:6px;
}
.team .profile > li.dentist .txt-box .degree li::before {
	content:"●"
}

/*歯科衛生士*/
.team .profile > li.hygienist {
	background: linear-gradient(180deg,rgba(255, 212, 228, 1) 0%, rgba(255, 238, 198, 1) 100%);
}
.team .profile > li.hygienist .txt-box {
	color:#3d0535;
}
/*歯科助手*/
.team .profile > li.assistant {
	background: linear-gradient(180deg,rgba(197, 255, 210, 1) 0%, rgba(233, 255, 199, 1) 100%);
}
.team .profile > li.assistant .txt-box {
	color:#0e140d;
}
/*受付*/
.team .profile > li.reception {
	background: linear-gradient(180deg,rgba(255, 230, 212, 1) 0%, rgba(255, 246, 198, 1) 100%);
}
.team .profile > li.reception .txt-box {
	color:#4d0505;
}

}