@charset "UTF-8";

#staff main {
	font-family: "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/*------------------------------------------ main_area */
#staff .main_area {
	text-align: center;
	position:relative;
	z-index: 2;
}
#staff .main_area h1 {
	font-weight: bold;
	line-height: 1.2;
	z-index: 999;
	position: relative;
}
#staff .main_area h1 span {
	color: #f94a41;
}

/*------------------------------------------ point_area */
#staff .point_area {
	background: #f94a41;
	position:relative;
	overflow:hidden;
	z-index: 1;
}
#staff .point_area h2 {
	color: #fff;
	text-align: center;
	font-weight: bold;
	position: relative;
}
#staff .point_area h2 span {
	font-size: 277%;
	line-height: 1.2;
}
#staff .point_area h2 span span {
	font-size: 125%;
}
#staff .point_area h2::before {
	content: "＼";
	bottom: 0;
	margin-left: -1em;
	position: absolute;
	font-size: 300%;
}
#staff .point_area h2::after {
	content: "／";
	bottom: 0;
	position: absolute;
	font-size: 300%;
}
#staff .point_area ul {
	margin: 0;
}
#staff .point_area li {
	list-style: none;
	font-weight: bold;
	text-align: center;
	background: #fff;
	border-radius: 10px;
	vertical-align: top;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
	position: relative;
}
#staff .point_area li .highlight {
	background: linear-gradient(transparent 50%, #ffeb8d 0%);
	line-height: 1.3em;
}
#staff .point_area li::before {
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}
#staff .point_area li:nth-child(1)::before {
	background-image: url(../../staff/img/icon_01.png);
}
#staff .point_area li:nth-child(2)::before {
	background-image: url(../../staff/img/icon_02.png);
}
#staff .point_area li:nth-child(3)::before {
	background-image: url(../../staff/img/icon_03.png);
}
#staff .point_area li:nth-child(4)::before {
	background-image: url(../../staff/img/icon_04.png);
}
#staff .point_area li:nth-child(5)::before {
	background-image: url(../../staff/img/icon_05.png);
}
#staff .point_area li:nth-child(6)::before {
	background-image: url(../../staff/img/icon_06.png);
}
#staff .point_area li p {
	margin: 0;
}
#staff .point_area li .fred {
	color: #f94a41;
	font-size: 125%;
}

/*------------------------------------------ staff_link_area */
#staff .staff_link_area h3 {
	font-weight: bold;
	color: #f94a41;
	text-align: center;
}
#staff .staff_link_area p {
	text-align: center;
}
#staff .staff_link_area .bnr_list li {
	list-style: none;
}

/*------------------------------------------ swiper */

#staff .swiper-slide {
	list-style: none;
}

/*--------------------------------------------------------------------
 *	737px未満用（SP用）の記述
 *--------------------------------------------------------------------*/
@media screen and (max-width: 736px) {

#staff #header_contents {
	position: relative;
}

/*------------------------------------------ header */
#staff #header_contents #logo {
	position: absolute;
	top: 0;
	left: -10%;
	width: 50%;
}
#staff #header_contents #logo img {
	width: 100%;
}
#staff #header_contents #contact {
	position: absolute;
	top: 0;
	right: 2.6%;
	margin-top: 2.6%;
}
#staff #header_contents #contact a {
	background: #f94a41;
	color: #fff;
	text-decoration: none ;
	display: block;
	border-radius: 30px;
	padding: 0.5em 1.5em;
}
#staff #header_contents #contact p {
	margin: 0;
	line-height: 1;
}
#staff #header_contents #contact a .tel {
	font-weight: bold;
	position: relative;
	padding-left: 15%;
	font-size: 4.5vw;
	margin-bottom: 5%;
}
#staff #header_contents #contact a .tel::before {
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	background-image: url(../../staff/img/icon_tel.png);
	width: 12%;
	height: 32px;
	position: absolute;
	left: 0;
}
#staff #header_contents #contact a .hours {
	font-size: 2.6vw;
}

/*------------------------------------------ main_area */
#staff .main_area h1 {
	margin: 50% 0 0;
	font-size: 9vw;
	position: absolute;
	top: 0;
	left: 9.3%;
}
#staff .main_area .desc {
	margin-top: 33%;
}


/*------------------------------------------ slider */
.staff_slider {
	margin-top: 22%;
	width: 100%;
	padding: 6.6% 10% 0; /* 左右に余白をつけて前後スライドを見せる */
	box-sizing: border-box;
}
.staff_slider .swiper-slide {
	width: 80%; /* 真ん中スライドの幅（調整可） */
}
.staff_slider .swiper-slide:nth-child(2n) {
	margin-top: -6.6%;
}
.staff_slider .swiper-slide img {
	width: 100%;
	border-radius: 20px;
}


/*------------------------------------------ point_area */
#staff .point_area {
	padding: 20% 0 8%;
	&::before{
		content:"";
		width:120%;
		height:40vw;
		position:absolute;
		top:-25%;
		left:50%;
		background:#fff;
		transform:translate(-50%,50%);
		border-radius:100%;
	}
}
#staff .point_area li {
	height: 40vw;
	width: 46.8%;
	margin-bottom: 6%;
	display: inline-block;
	font-size: 3.5vw;
}
#staff .point_area li:not(:nth-child(2n)) {
	margin-right: 6%;
}
#staff .point_area li::before {
	width: 65%;
	height: 141px;
	margin-top: 10%;
}
#staff .point_area li p {
	position: absolute;
	bottom: 14%;
	display: block;
	width: 100%;
}
#staff .point_area li:has(br) p {
	bottom: 6%;
}
#staff .staff_link_area {
	padding: 15% 0 10%;
	position:relative;
	overflow:hidden;
	&::before{
		content:"";
		width:120%;
		height:40vw;
		position:absolute;
		top:-35%;
		left:50%;
		background:#f94a41;
		transform:translate(-50%,50%);
		border-radius:100%;
	}
}
#staff .staff_link_area h3 {
	font-size: 130%;
}
#staff .staff_link_area .bnr_list {
	margin: 10% 0 0;
}
#staff .staff_link_area .bnr_list li {
	display: inline-block;
	width: 100%;
	margin: 0 0 3%;
}


/* 737px未満用（SP用）の記述 end -------------------------------------*/
}



/*--------------------------------------------------------------------
 *	737px以上用（PC用）の記述
 *--------------------------------------------------------------------*/
@media screen and (min-width: 737px), print {

#staff main {
	min-width: 1200px;
}
#staff main .wrap {
	width: 980px;
}

/*------------------------------------------ header */

#staff #header_contents #contact {
	background: #f94a41;
	color: #fff;
	text-decoration: none ;
	display: block;
	margin: 20px 20px 0 0;
	line-height: 0.1;
	padding: 20px 35px 8px;
	border-radius: 50px;
}
#staff #header_contents #contact .tel {
	line-height: 0.1;
	margin: 0;
	font-weight: bold;
	font-size: 34px;
	padding-left: 5px;
}

#staff #header_contents #contact .tel::before {
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	background-image: url(../../staff/img/icon_tel.png);
	width: 32px;
	height: 32px;
	margin-top: -5px;
	left: -5px;
	position: relative;
}


/*------------------------------------------ main_area */

#staff .main_area {
	position: relative;
}

#staff .main_area h1 {
	min-width: 980px;
	margin: 495px 0 0;
	font-size: 72px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
#staff .main_area .desc {
	margin-top: 246px;
}
#staff .main_area .desc p {
	font-size: 20px;
}

/*------------------------------------------ slider */
.staff_slider {
	margin-top: 155px;
	width: 100%;
	padding: 50px 10% 0; /* 左右に余白をつけて前後スライドを見せる */
	box-sizing: border-box;
}

.staff_slider .swiper-slide {
	width: 540px; /* 真ん中スライドの幅（調整可） */
}
.staff_slider .swiper-slide:nth-child(2n) {
	margin-top: -50px;
}
.staff_slider .swiper-slide img {
	width: 100%;
	border-radius: 20px;
}

/*------------------------------------------ point_area */
#staff .point_area {
	margin-top: -50px;
	padding: 160px 0 0;
	&::before{
		content:"";
		width:120%;
		height:400px;
		position:absolute;
		top:-42%;
		left:50%;
		background:#fff;
		transform:translate(-50%,50%);
		border-radius:100%;
	}
}
#staff .point_area h2 {
	font-size: 26px;
}
#staff .point_area li {
	height: 300px;
	width: 300px;
	margin-bottom: 39px;
	display: inline-block;
	font-size: 20.8px;
	transition: transform 0.8s ease;
}

/* アニメーション定義 */
@keyframes pop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* ホバー時にアニメーション実行 */
#staff .point_area li:hover {
	animation: pop 0.8s ease forwards;
}
#staff .point_area li:not(:nth-child(3n)) {
	margin-right: 39px;
}
#staff .point_area li::before {
	width: 195px;
	height: 141px;
	margin-top: 40px;
}
#staff .point_area li p {
	position: absolute;
	bottom: 40px;
	display: block;
	width: 100%;
}
#staff .point_area li:has(br) p {
	bottom: 20px;
}
#staff .staff_link_area {
	padding: 135px 0 140px;
	position:relative;
	overflow:hidden;
	&::before{
		content:"";
		width:120%;
		height:400px;
		position:absolute;
		top:-79%;
		left:50%;
		background:#f94a41;
		transform:translate(-50%,50%);
		border-radius:100%;
	}
}
#staff .staff_link_area h3 {
	font-size: 30px;
}
#staff .staff_link_area .bnr_list {
	margin: 35px 0 0;
}
#staff .staff_link_area .bnr_list li {
	display: inline-block;
	width: 470px;
	margin: 0;
	transition: .3s;
}
#staff .staff_link_area .bnr_list li:first-child {
	margin-right: 39px;
}
#staff .staff_link_area .bnr_list li:hover {
	opacity: .6;
}


/* 737px以上用（PC用）の記述 end -------------------------------------*/
}



@media print {
/* 印刷用（PC表示）の記述 */


/* 印刷用（PC表示）の記述 end */
}