@charset "UTF-8";



/*---------------------------------------------------------
 Common
---------------------------------------------------------*/

/* Common - stf-name
-----------------------------------------------*/
.stf-name {
	font: var(--font-min);
	font-size: 112%;
	line-height: 1.5;
}
.stf-name dt {
	margin-bottom: 1.5em;
}
.stf-name dd {
	font-size: 194%;
}
.stf-name dd.u-font-en {
	color: #ddccaa;
	font-size: 100%;
	letter-spacing: .1em;
	margin-top: .4em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.stf-name {
	font-size: 90%;
}
.stf-name dt {
	margin-bottom: 1em;
}
}

/* Common - stf-bio
-----------------------------------------------*/
.stf-bio dt {
	font: var(--font-min);
	color: var(--color-brw-300);
	font-size: 112%;
	letter-spacing: .15em;
	line-height: 1.5;
	margin-bottom: .8em;
}
.stf-bio dd {
	font-size: 88%;
}
.c-list--year > li {
	display: flex;
	column-gap: 1em;
	white-space: nowrap;
	padding-left: 0;
}
.c-list--year > li p:first-child {
	width: 4em;
	white-space: nowrap;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

.stf-bio .l-box--bg__inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5em 10%;
}
.stf-bio__col2 {
	display: flex;
	justify-content: space-between;
	column-gap: 15%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.stf-bio .l-box--bg__inner {
	display: grid;
	row-gap: 1.5em;
}
.stf-bio dt {
	font-size: 100%;
}
}


/*---------------------------------------------------------
 Doctor
---------------------------------------------------------*/
.doctor .c-bg-color {
	height: 500px;
	background-image: url(../images/common/shadow-yel@2x.png),
					linear-gradient(to bottom, #f1efda, transparent);
	background-size: 90% auto, 100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
.doctor .c-hdg--enjp .c-hdg--en {
	color: var(--color-och-200);
}

/* Doctor - director
-----------------------------------------------*/
.director__img {
	width: 85%;
	max-width: 1000px;
	color: #FFF;
	background-color: var(--color-och);
	margin-inline: auto;
}
.director__img figcaption {
	padding: 5%;
}
.director__img figcaption dl {
	max-width: max-content;
	margin-inline: auto;
}

.director__msg {
	position: relative;
	padding-left: 4.4%;
}
.director .c-bg-img {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: auto;
    mask-size: auto;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

.director__img {
	display: grid;
	grid-template-columns: 50% 1fr; 
}
.director__img figcaption {
	align-self: center;
}
.director__msg p {
	width: 70%;
	max-width: 690px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.director__img {
	width: 80%;
}
.director__img figcaption {
	padding: 10%;
}

.director__msg {
	padding: 30vw 2% 10%;
}
.director__msg .c-hdg--min {
	font-size: 160%;
}
.director .c-bg-img {
	top: -10vw;
}
}



/*---------------------------------------------------------
 Orthodontist
---------------------------------------------------------*/
.orthodontist {
	text-align: center;
}
.ortho__img {
	width: 80%;
	max-width: max-content;
	margin-inline: auto;
}
.ortho__ttl .c-hdg--bld {
	width: 29em;
	background-color: var(--color-ivo);
	padding-top: 1.3em;
	margin: -3em auto 1em;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ortho__ttl .c-hdg--bld::before {
	display: block;
	content: "";
	background: url(../images/staff/icon-teeth.svg) no-repeat center top;
	background-size: contain;
	width: 1.6em;
	height: 1.6em;
	margin: 0 auto .4em;
}
.ortho__ttl .c-hdg--bld span {
	color: var(--color-brw-300);
}
.ortho__txt small {
	display: block;
	font-size: 94%;
	line-height: 1.5;
	margin-top: .5em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.ortho__img {
	width: 100%;
}
.ortho__ttl .c-hdg--bld {
	width: 90%;
	font-size: 105%;
	margin-top: -2em;
}
.ortho__txt small {
	font-size: 85%;
}
}



/*---------------------------------------------------------
 Staff
---------------------------------------------------------*/
.staff {
	padding-bottom: min(10vw,80px);
}
.staff .c-bg-color {
	background-color: #eeeadd;
}
.staff .c-bg-frame {
	background-color: var(--color-ivo);
}
.staff .c-hdg--enjp .c-hdg--en {
	color: #cec29c;
}

.staff__msg {
	width: 92%;
	margin-inline: auto;
}
.staff__msg .c-hdg--min {
	font-size: min(3.4vw,264%);
}

.staff .c-slide--ticker .splide__slide {
	width: 50vw;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.staff__msg .c-hdg--min {
	font-size: 145%;
}
}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}