@charset "utf-8";
/* CSS Document */

/* =====================
   common
===================== */
.container {
	max-width: 1120px;
}
.gra-wrap3 {
    height:580px;
    margin-top: -230px;
}
.index .ttl-wrap {
    background-image: url(../images/director/img_staff_bk.jpg);
}
.talk .ttl-wrap {
    background-image: url(../images/director/talk/img_staff_bk_20241101.png);
}
h2.title {
    top: 320px;
}
.main h3 {
	font-size: 3.2rem;
	margin-bottom: 60px;
	font-weight: 600;
	color: #52524E;
}


/* =====================
   index
===================== */
.index .main .message {
	float: left;
	width: 65%;
	padding-right: 30px;
	box-sizing: border-box;
}
.index .main .message ul {
	margin: 30px 0;
}
.index .main .message ul li {
	margin: 25px 0;
	color: #AA8E66;
	padding-left: 25px;
	position: relative;
	font-weight: 600;
}
.index .main .message ul li:before {
    content: "・";
    font-size: 2.4rem;
    position: absolute;
    left: 0;
    bottom: -4px;
}
.index .main .message p.detail {
	margin: 60px 0;
	line-height: 2;
}
.index .main .message p.name {
	text-align: right;
	font-size: 2rem;
}
.index .main .img-wrap {
	float: right;
	width: 35%;
}
.index .main .img-wrap img {
	max-width: 100%;
	text-align: right;
}
.index .main .bnr {
	text-align: center;
	margin: 60px 0 180px;
}
.index .main .bnr a {
	display: inline-block;
	position: relative;
	border: 4px solid #fff;
	border-radius: 5px;
}
.index .main .bnr a img {
	width: 100%;
}
.index .main .bnr a .text {
	position: absolute;
	top: 0;
	left: 18px;
	background-color: #fff;
	width: 300px;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30px;
	text-align: left;
}
.index .main .bnr a h4 {
	display: inline-block;
	margin: 20px 0;
	position: relative;
	font-size: 2.4rem;
	font-weight: 600;
	margin: 50px 0 30px;
}
.index .main .bnr a h4:after {
	position: absolute;
	right: -40px;
	bottom: 3px;
	content: url(../images/common/btn_arrow02.png);
	display: inline-block;
}

/* =====================
   talk
===================== */
.talk .staff {
	position: relative;
	height: 600px;
	background-repeat: no-repeat;
	background-position: top 0px right 50%;
	margin-bottom: 60px;
}
.talk .staff:before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 70%;
	opacity: 0.7;
	right: 0;
	top: 0;
}
.talk .vet-wrap .staff {
	background-position: top 0px left 50%;
}
.talk .vet-wrap .staff:before {
	left: 0;
}
.talk .nurse .staff:before {
	height: 400px;
}
.talk .vet .staff:before {
	height: 490px;
}
.talk .trimmer .staff:before {
	height: 450px;
}
.vet .staff:before {
    background: linear-gradient(20deg, #7FD9D5, #7FC7D9);
}
.nurse .staff:before {
    background: linear-gradient(20deg, #FBADA0, #FBA1AA);
}
.trimmer .staff:before {
    background: linear-gradient(20deg, #BAD91A, #CFD91A);
}
.talk .staff .items {
	position: relative;
}
.talk .staff .items h3 {
    font-size: 11.2rem;
    text-align: center;
    font-weight: 500;
    display: inline-block;
    position: absolute;
    left: 20px;
    top: -50px;
    font-family: 'Montserrat', sans-serif;
}
.talk .vet-wrap .staff .items h3 {
	right: 20px;
	left: inherit;
}
.talk .staff .items h3 span {
	font-family: "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ ゴシック", sans-serif;
	font-size: 1.6rem;
    font-weight: 600;
	letter-spacing: 0.2em;
	display: block;
}
.nurse h3 {
	color: #F8A1AA;
}
.trimmer h3 {
	color: #CFD91A;
}
.vet h3 {
	color: #62D2CD;
}
.talk .staff .img-wrap {
	position: relative;
	max-width: 1120px;
	padding-top: 90px;
}
.talk .staff .img-wrap:after {
    position: absolute;
    font-size: 3.2rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #fff;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    right: 10%;
    top: 30px;
}
.talk .vet-wrap .staff .items {
	text-align: right;
}
.talk .vet-wrap .staff .img-wrap:after {
	left: 10%;
	right: inherit;
}
.nurse .staff .img-wrap:after {
    content: "学会への参加について";
}
.vet .staff .img-wrap:after {
    content: "ならしの動物医療センターを選んだ理由";
}
.trimmer .staff .img-wrap:after {
    content: "入社前後での院長の印象";
}
.talk .staff .img-wrap img {
	max-width: 100%;
}
/* トークセッション */
.staff-wrap .talk-wrap .talk-box {
	margin-bottom: 150px;
}
.staff-wrap .talk-wrap .talk-box .session {
    float: right;
    width: 62%;
    padding-right: 20px;
    box-sizing: border-box;
    text-align: left;
}
.staff-wrap .talk-wrap .talk-box .session dl {
	margin-bottom: 30px;
}
.staff-wrap .talk-wrap .talk-box .session dl dt {
	padding: 10px 0;
	width: 100px;
	text-align: center;
	color: #fff;
	margin-right: 20px;
	box-sizing: border-box;
	border-radius: 5px;
	display: inline-block;
	vertical-align: top;
	font-weight: 500;
}
.staff-wrap .talk-wrap .talk-box .session .director dt {
	background-color: #AA8F66;
}
.staff-wrap .talk-wrap .talk-box .session .nurse dt {
	background-color: #F8A1AA;
}
.staff-wrap .talk-wrap .talk-box .session .vet dt {
	background-color: #62D2CD;
}
.staff-wrap .talk-wrap .talk-box .session .trimmer dt {
	background-color: #CFD91A;
}
.staff-wrap .talk-wrap .talk-box .session dl dd {
	display: inline-block;
	width: 80%;
	line-height: 1.6;
}
.staff-wrap .talk-wrap .talk-box .img-wrap {
	float: right;
	display: inline-block;
	box-sizing: border-box;
}
.staff-wrap .talk-wrap .talk-box .img-wrap img {
	max-width: 100%;
	display: block;
}
.staff-wrap .talk-wrap .talk-box .img-wrap img:first-child {	
	margin-bottom: 20px;
}

.staff-wrap .talk-wrap:nth-child(3) .talk-box .session {
    float: right;
    padding-left: 20px;
}
.staff-wrap .talk-wrap:nth-child(3) .talk-box .img-wrap {
	float: left;
}



@media screen and (min-width: 769px) and (max-width: 1160px) {
	
	.talk .staff .img-wrap:after {
		font-size: 3.2rem;
		-ms-writing-mode: tb-lr;
		-webkit-writing-mode: vertical-lr;
		writing-mode: lr-tb;
		top: 30px;
	}
	.talk .vet-wrap .staff .img-wrap:after {
		left: 5%;
	}
}

@media screen and (max-width: 1160px) {
	.talk .staff {
		margin-bottom: 20px;
	}
/* トークセッション */
	.staff-wrap .talk-wrap .talk-box {
		margin-bottom: 60px;
	}
	.staff-wrap .talk-wrap .talk-box .session {
		float: none;
		width: 100%;
		padding-right: 0px;
}
	.staff-wrap .talk-wrap .talk-box .session dl {
		margin-bottom: 20px;
	}
	.staff-wrap .talk-wrap .talk-box .session dl dt {
		padding: 6px 0;
		width: 50px;
		margin-right: 10px;
	}
	.staff-wrap .talk-wrap .talk-box .session dl dd {
		width: 93%;
		line-height: 1.4;
	}
	.staff-wrap .talk-wrap .talk-box .img-wrap {
		display: none;
	}
	.staff-wrap .talk-wrap:nth-child(3) .talk-box .session {
		padding-left: 10px;
	}
}

@media screen and (max-width: 1006px) {
	.index .main .message {
		float: none;
		width: 100%;
		padding-right: 0px;
	}
	.index .main .message ul {
		margin: 15px 0;
	}
	.index .main .message ul li {
		margin: 10px 0;
		padding-left: 20px;
	}
	.index .main .message ul li:before {
		font-size: 2rem;
	}
	.index .main .message p.detail {
		margin: 20px 0;
		line-height: 1.6;
	}
	.index .main .message p.name {
		font-size: 1.6rem;
	}
	.index .main .img-wrap {
		float: none;
		width: 100%;
		margin-bottom: 20px;
		text-align: center;
	}
	.index .main .img-wrap img {
		text-align: center;
	}
}
@media screen and (max-width: 978px) {
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 90%; }
}

@media screen and (max-width: 820px) {
	.staff-wrap .staff .text { padding: 50px 0px 35px 20px; }
}



/* ====================================================================================
         SP時
  ==================================================================================== */
@media screen and (max-width: 768px) {
	
/* =====================
   common
===================== */
	.gra-wrap3 {
		height: 200px;
		margin-top: -84px;
		margin-bottom: 0;
	}
	h2.title {
		top: 110px;
	}
	.main h3 {
		font-size: 2.4rem;
		margin-bottom: 20px;
	}

	
/* =====================
   index
===================== */
	.index .main .bnr {
		margin-bottom: 260px;
	}
	.index .main .bnr p {
		margin-bottom: 0;
	}
	.index .main .bnr a {
		display: inline-block;
		position: relative;
		border: none;
		border-radius: 5px;
		background-image: url(../images/director/img_bnr_sp_20241101.png);
		background-repeat: no-repeat;
		width: 100%;
		height: 200px;
		background-size: cover;
		-webkit-border-radius: 0;
		-moz-border-radius:  0;
		border-radius:  0;
	}
	.index .main .bnr a img {
		display: none;
	}
	.index .main .bnr a .text {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		height: initial;
		border: 4px solid #fff;
		-webkit-border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
		-moz-border-radius:  0px 0px 5px 5px / 0px 0px 5px 5px;
		border-radius:  0px 0px 5px 5px / 0px 0px 5px 5px;
	}
	.index .main .bnr a h4 {
		font-size: 1.8rem;
		margin: 0 0 10px 0;
	}
	
/* =====================
   talk
===================== */
	.talk .staff-talk {
		margin-bottom: 25px;
	}
	.talk .staff-talk li {
		display: inline-block;
		width: 33.333%;
		text-align: center;
	}
	.talk .staff-talk h3 {
		font-size: 3rem;
		text-align: center;
		font-weight: 500;
		display: inline-block;
		font-family: 'Montserrat', sans-serif;
		position: relative;
	}
	.talk .staff-talk h3:after {
		content: "";
		position: absolute;
		right: 50%;
		bottom: -15px;
		display: inline-block;
		width: 12px;
		height: 12px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		margin-right: -6px;
	}
	.talk .staff-talk .nurse h3:after {
		border-top: 2px solid #F8A1AA;
		border-right: 2px solid #F8A1AA;
	}
	.talk .staff-talk .vet h3:after {
		border-top: 2px solid #62D2CD;
		border-right: 2px solid #62D2CD;
	}
	.talk .staff-talk .trimmer h3:after {
		border-top: 2px solid #CFD91A;
		border-right: 2px solid #CFD91A;
	}
	.talk .staff-talk h3 span {
		font-size: 1rem;
		font-family: "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ ゴシック", sans-serif;
		font-size: 1.6rem;
		font-weight: 600;
		display: block;
	}
	.talk .staff {
		height: 470px;
	}
	.talk .nurse .staff:before {
		height: 150px;
	}
	.talk .vet .staff:before {
		height: 150px;
	}
	.talk .trimmer .staff:before {
		height: 150px;
	}
	.talk .staff .items h3 {
		font-size: 3rem;
		left: 20px;
		top: 5px;
	}
	.talk .vet-wrap .staff .items h3 {
		right: 20px;
	}
	.talk .staff .items h3 span {
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	.talk .staff .img-wrap {
		max-width: 100%;
		padding-top: 56px;
	}
	.talk .staff .img-wrap:after {
		font-size: 1.6rem;
		right: 5%;
		top: 20px;
		-ms-writing-mode: tb-lr;
		-webkit-writing-mode: vertical-lr;
		writing-mode: lr-tb;
	}
	.talk .staff .img-wrap img {
		max-width: 90%;
	}
}

@media screen and (max-width: 750px) {
	.talk .staff { height: 450px; }
}
@media screen and (max-width: 720px) {
	.talk .staff { height: 430px; }
}
@media screen and (max-width: 680px) {
	.talk .staff { height: 400px; }
}
@media screen and (max-width: 630px) {
	.talk .staff { height: 380px; }
}
@media screen and (max-width: 600px) {
	.talk .staff { height: 360px; }
}
@media screen and (max-width: 729px) {
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 90%; }
}
@media screen and (max-width: 696px) {
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 88%; }
}
@media screen and (max-width: 589px) {
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 85%; }
}
@media screen and (max-width: 550px) {
	.talk .staff { height: 340px; }
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 83%; }
}
@media screen and (max-width: 540px) {
	.index .main .bnr a { height: 150px; }
}
@media screen and (max-width: 500px) {
	.talk .staff { height: 300px; }
}
@media screen and (max-width: 450px) {
	.talk .staff { height: 270px; }
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 82%; }
	.index .main .bnr a { height: 103px; }
}
@media screen and (max-width: 430px) {
	.talk .vet-wrap .staff .img-wrap:after { left: 0%; }
	.vet .staff .img-wrap:after {
		content: "ならしの動物医療センターを\A選んだ理由";
		white-space: pre;
		text-align: left;
		line-height: 1.2;
	}
	.talk .staff .img-wrap {
		padding-top: 70px;
	}
}
@media screen and (max-width: 426px) {
	.talk .staff { height: 280px; }
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 72%; }
}
@media screen and (max-width: 360px) {
	.trimmer .staff .img-wrap:after {
		content: "入社前後での\A院長の印象";
		white-space: pre;
		text-align: right;
		line-height: 1.2;
	}
}
@media screen and (max-width: 352px) {
	.talk .staff { height: 220px; }
}
@media screen and (max-width: 320px){
.talk .staff .img-wrap:after {
    right: 0;
}
}
@media screen and (max-width: 303px) {
	.staff-wrap .talk-wrap .talk-box .session dl dd { width: 68%; }
}