@charset "utf-8";
/* CSS Document */
/* :root {
	--font--osw: "Oswald", sans-serif;
	--font--zen: "Zen Kaku Gothic New", sans-serif;
	--font--letter: 0.1em;
	--txt--main: #1c1c1c;
	--clr--gry: #b3b3b3;
	--clr--lgy01: #e3e3e3;
	--clr--red : #cb0002;

} */
/* =============================================== */
/* article
-------------------------------------------------- */
article {
	display: flex; justify-content: space-between; flex-direction: row-reverse;
	width:min(94%, 1200px);
	margin:0 auto 80px;
	font-family: var(--font--osw);
}

main {
	width:100%;
}

main .crumb { 
	position: relative;
	font-size:min(3.6vw, 13px);
	font-family: var(--font--osw);
}
main .crumb a { position: relative; padding-right: 2em;}
main .crumb a::after {
	content:'';
	position: absolute; right: 1em; top:50%; transform: translateY(-50%) rotate(-45deg) ;
	border-right:1px solid var(--clr--gry); border-bottom:1px solid var(--clr--gry);
	width:5px; height:5px;
}
main .crumb span { font-size: min(4.2vw, 16px);}

@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
	main { width:77%;}
}
@media (max-width: 640px) {
/* SP用 */
	article {
		flex-direction: column;
		margin-bottom: 0px;
	}
	main, aside { width:96%; margin: 0 auto;}
	
	main { margin-bottom: 0px;}
	
	aside .talent--list h2 { width:auto;}
}


/* nav--talent
-------------------------------------------------- */
.nav--talentPage {
	position: relative;
	display: flex; flex-wrap: wrap; gap:30px;
	padding: 30px;
	font-size: min(3.9vw, 16px);
	background: var(--clr--lgy01);
	border-radius: 8px;
	
	display: none;
}
.nav--talentPage::before {
	content:'';
	position: absolute; left: 50%; top:106px; transform: translateX(-50%);
	width:calc(100% - 60px); height:1px;
	background: var(--clr--gry);
}
.nav--talentPage .ttl h3 { font-size: min(4.6vw, 18px);}

.nav--talentPage .ttl { 
	display: flex; flex-wrap: wrap; flex-direction: column; gap:5px; 
	width:30%;
}
.nav--talentPage .talentCat { width:65%;}

.ul--talentCat { display: flex; flex-wrap: wrap; gap:5px;}
.ul--talentCat li { width:48%;}

@media (min-width: 769px) {
/* PC用 */
	.nav--talentPage {  margin-bottom: 50px;}
	
}
@media (max-width: 768px) {
/* tablet用 */
	.nav--talentPage {  margin-bottom: 50px;}
	.nav--talentPage .talentCat { width:55%;}
}
@media (max-width: 640px) {
/* SP用 */
	.nav--talentPage { flex-direction: column; gap:5px;}
	.nav--talentPage::before { top:132px;}
	
	.nav--talentPage .ttl,
	.nav--talentPage .talentCat { width:100%;}
	.nav--talentPage .ttl { flex-direction: row;}
	.nav--talentPage .ttl h3, .nav--talentPage .ttl ul { width:48%;}
	
	.talentCat + .ttl { margin-top: 20px;}
}


/* talentSearch
-------------------------------------------------- */
.talentSearch {
	margin-bottom: 50px;
	padding: 24px 30px;
	background: var(--clr--lgy01);
	border-radius: 8px;
}
.talentSearch form {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap:16px 24px;
}
.talentSearch--item {
	display: flex; flex-direction: column; gap:5px;
	flex: 1 1 240px;
}
.talentSearch--item label {
	font-size: min(3.6vw, 14px);
	font-weight: 500;
}
.talentSearch input,
.talentSearch select {
	width:100%; height:44px;
	padding: 0 12px;
	font-size: 16px;
	font-family: var(--font--zen);
	color: var(--txt--main);
	background: #fff;
	border:1px solid var(--clr--gry);
	border-radius: 4px;
	box-sizing: border-box;
}
.talentSearch--btn {
	display: flex; align-items: center; gap:16px;
}
.talentSearch--btn button {
	height:44px;
	padding: 0 32px;
	font-size: 16px;
	font-family: var(--font--osw);
	letter-spacing: var(--font--letter);
	color: #fff;
	background: var(--clr--red);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: .4s all;
}
.talentSearch--btn button:hover { opacity: .8;}
.talentSearch--btn a {
	font-family: var(--font--osw);
	color: var(--txt--main);
	text-decoration: underline;
}
.talentSearch--result { margin: -0.6em 0 1.4em;}
.talentSearch--none { padding: 40px 0; text-align: center;}

@media (max-width: 640px) {
/* SP用 */
	.talentSearch { margin-bottom: 40px; padding: 20px;}
	.talentSearch--item { flex-basis: 100%;}
	.talentSearch--btn { width:100%;}
	.talentSearch--btn button { flex: 1;}
}


/* talentLists
-------------------------------------------------- */
.talentLists {}
.talentLists h2 {
	position: relative;
	margin-bottom: 1.4em; padding-left: .7em;
	font-size: min(6vw, 30px);
	line-height: 1;
}
.talentLists h2::before {
	content:'';
	position: absolute; left: 0; top:0; transform: translate(0, 0);
	width:6px; height:30px;
	background: var(--clr--red);
}

.ul--talentList {
	display: grid; grid-template-columns: repeat(6, 1fr); gap:40px 30px;
}
.ul--talentList > li {
	display: grid; grid-template-rows: subgrid; grid-row: span 4; gap:5px;
}
.name--en {
	font-size: min(6vw, 30px);
	line-height: 1.1;
	font-weight: 600;
}
.name--en .fstName {
	display: block;
	text-transform: capitalize;
}
.name--jp { color: var(--clr--gry);}

.viewProf {
	padding: 9px;
	border:1px solid var(--clr--lgy01);
}
.viewProf a {
	position: relative;
	display: block;
	padding: 12px 12px 12px 36px;
	color: var(--txt--main);
	background: var(--clr--lgy01);
}
.viewProf a::before {
	content:'';
	position:absolute; left:16px; top:50%; transform: translateY(-50%);
	width:0; height:0;
	border-left: 6px solid var(--clr--red);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.ul--talentList a { transition: .4s all;}
.ul--talentList a:hover { opacity: .8;}

.nav--talentPage.nav02 { margin: 60px 0;}

@media (min-width: 769px) {
/* PC用 */
	
	
}
@media (max-width: 768px) {
/* tablet用 */
	.ul--talentList {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 640px) {
/* SP用 */
	.ul--talentList {
		grid-template-columns: repeat(2, 1fr); gap:40px 20px;
	}
	.talentLists h2::before { height: 24px;}
	
	.nav--talentPage.nav02 { margin: 40px 0 0;}
}


/* pagenation
-------------------------------------------------- */
.pagenation {
	margin: 50px 0 0;
}
.ul--page01 {
	display: flex; justify-content: center; align-items: center;
}
.ul--page01 li { margin: 0 6px;}
.ul--page01 li span {
	padding: .2em .8em .3em;
	font-size:min(3.6vw, 13px);
	color: var(--txt--main);
	border: 1px solid var(--clr--gry);
	transition: .4s all;
}
.ul--page01 li.current span { color: #fff; background: var(--clr--red);}

.ul--page01 a {
	text-decoration: none;
	transition: .4s all;
}
.ul--page01 li a:hover span { color: #fff; background: var(--clr--gry);}

.ul--page01 li:first-of-type a,
.ul--page01 li:last-of-type a { padding: .4em .8em; font-size:min(4.4vw, 18px);}
.ul--page01 li:first-of-type a:hover,
.ul--page01 li:last-of-type a:hover { color: var(--clr--red);}
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
	.pagenation { margin: 35px 0 0;}
}


/* aside
-------------------------------------------------- */
aside .ul--talentCat li {}
aside .ul--talentCat li a { 
	position: relative;
	padding-left: 11px;
}
aside .ul--talentCat li a:hover::before,
aside .ul--talentCat li.current a::before {
	content:'';
	position: absolute; left: 0; top:50%; transform: translateY(-50%);
	width:4px; height:9px;
	background:  url(../img/common/icn_mfp01.png) center bottom no-repeat;
	background-size:100% auto;
	
}
/*background: var(--clr--red);*/
@media (min-width: 769px) {
/* PC用 */
	aside { width:22%;}
	aside .talent--list h2 { width:auto;}
	aside .ul--talentCat { margin-bottom: 30px;}
	aside .ul--talentCat li {
		width:100%;
		padding:5px 0 15px;
		text-align: left;
	}
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* =============================================== */
/* for single page
-------------------------------------------------- */
.talent--detail { width: min(100%, 880px); margin:0 auto;}
.talent--detail .ttl--area h2 { margin-bottom: -5px}
.talent--detail .ttl--area h2 span {
	padding:.12em 1em .3em;
	font-size:min(5vw, 20px);
	color: #fff;
	background: #cb0002;
}
.talent--detail .ttl--area:after {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background: #cb0002;
}

.backToList { clear: both; width:min(100%, 400px); margin:50px auto 0; }
.backToList span {
	display: block;
	border:1px solid #ccc;
}
.backToList span a {
	position: relative;
	display: block;
	margin:12px;
	padding:.8em 2em;
	background: #dddddd;
	font-size:min(4.4vw, 18px);	font-weight: bold; text-align: center; color: var(--txt--main);
	text-decoration: none;
	transition:.4s all;
}
.backToList span a::before {
	content:'';
	position: absolute; left: 50%; top:50%; transform: translate(-4em, -50%) rotate(180deg);
	width:7px; height: 13px;
	background: url("../img/common/icn_mfp01.png") center top no-repeat;
	background-size:100% auto;
}
.backToList a:hover { opacity: .7;}

@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}
/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 640px) {
/* SP用 */
}