@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------
スタッフ
--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.StaffList { overflow:hidden; padding:16px; }
.StaffList > ul { display:flex; flex-wrap:wrap; align-items:stretch; margin-right:-1px; }
.StaffList > ul > li { width:25%; margin-bottom:40px; padding-right:1px; box-sizing:border-box; }
.StaffList > ul > li a { display:block; box-sizing:border-box; color:inherit; text-decoration:none; }
.StaffList > ul > li .thumArea { overflow:hidden; width:100%; padding-top:58.75%; position:relative; }
.StaffList > ul > li .thumArea > img { position:absolute; top:0; left:0; transition:all .2s; transform:scale(1); width:calc(100% + 1px); }
.hover .StaffList > ul > li a:hover .thumArea > img { transform:scale(1.1) rotate(0.1deg); }
.StaffList > ul > li .textArea { padding:36px 40px 37px 0; }
.StaffList > ul > li .textArea .name { font-size:0; margin-bottom:4px; }
.StaffList > ul > li .textArea .name__jp { display:inline-block; font-size:16px; line-height:1.5; margin-right:8px; letter-spacing:.1em; }
.StaffList > ul > li .textArea .text { font-size:12px; line-height:1.5; letter-spacing:.1em; opacity:.7; }


@media screen and (max-width:1600px) { /* macbookpro15 */ 
	.StaffList > ul > li { width:33.33%; }
}
@media screen and (max-width:1199px) { /* tablet横表示 ＆ PC小 */ 
	.StaffList > ul > li { width:50%; }
}
@media screen and (max-width:767px) { /* 6Plus */
	.StaffList > ul > li { width:100%; margin-bottom:24px; }
	.StaffList > ul > li:last-child { margin-bottom:12px; }
	.StaffList > ul > li .textArea { padding:12px 40px 13px 0; }
}



/*----------------------------------------------------
ライブラリ詳細ページ
----------------------------------------------------*/
.PageBody.-staff_detail .Layout2Colum.-staff_detail .Layout2Colum__nav { width:284px; } /* 追従エリアの横幅 */
@media screen and (max-width:1199px) { /* pc_s */
	.PageBody.-staff_detail .Layout2Colum.-staff_detail .Layout2Colum__nav { width:136px; }
}
@media screen and (max-width:1023px) {
	.PageBody.-staff_detail .Layout2Colum.-staff_detail .Layout2Colum__nav { width:100%; }
}





.StaffDetail { width:100%; box-sizing:border-box; }
.StaffDetail > .sectionHead { width:100%; position:relative; }

/* ヘッダー画像 */
.StaffDetail > .sectionHead > .thumArea { width:100%; box-sizing:border-box; }
.StaffDetail > .sectionHead > .thumArea > img { height:calc(100vh - 72px); width:100%; object-fit:cover; font-family:'object-fit:cover;'; }

.StaffDetail > .sectionHead > .name { width:392px; position:absolute; top:50%; transform:translateY(-50%); right:0px; font-family:'Roboto', sans-serif; font-weight:400; font-feature-settings:"palt"; letter-spacing:.2em; font-size:24px; 
	text-shadow:0 0 10px rgba(0,0,0,.5);
}
.StaffDetail > .sectionHead > .name.-ashino { color:#fff; }
.StaffDetail > .sectionHead > .name.-kuroda { color:#fff; }
.StaffDetail > .sectionHead > .name.-mariam { color:#666; text-shadow:0 0 8px rgba(255,255,255,1); }
.StaffDetail > .sectionHead > .name.-mitsuda { color:#fff; }
.StaffDetail > .sectionHead > .name.-nozaki { color:#fff; }
.StaffDetail > .sectionHead > .name.-tom { color:#fff; }
.StaffDetail > .sectionHead > .name.-tsuchiya { color:#fff; }


/* ページナビ */
.StaffDetail > .sectionHead > .StaffNavi { overflow:hidden; position:absolute; bottom:0; left:auto; right:0; margin:auto; width:392px; z-index:1; }
.StaffDetail > .sectionHead > .StaffNavi > ul { font-size:0; text-align:right; }
.StaffDetail > .sectionHead > .StaffNavi > ul > li { display:inline-block; width:33.33%; box-sizing:border-box; padding-left:1px; box-sizing:border-box; }
.StaffDetail > .sectionHead > .StaffNavi > ul > li > .inner { display:flex; justify-content:center; align-items:center; height:40px; font-size:10px; font-family:'Roboto', sans-serif; font-feature-settings:"palt"; letter-spacing:.1em; text-indent:.1em; }
.StaffDetail > .sectionHead > .StaffNavi > ul > li .StaffNavi__link { display:flex; width:100%; height:40px; justify-content:center; align-items:center; text-decoration:none; color:inherit;  }
.StaffDetail > .sectionHead > .StaffNavi > ul > li .StaffNavi__link.-active {}

/* normal */
.normal .StaffDetail > .sectionHead > .StaffNavi > ul > li {}
.normal .StaffDetail > .sectionHead > .StaffNavi > ul > li > .inner { background:#213A5F; color:rgba(255,255,255,.2); }
.normal .StaffDetail > .sectionHead > .StaffNavi > ul > li .StaffNavi__link { background:#213A5F; color:rgba(255,255,255,.9); }
.normal .StaffDetail > .sectionHead > .StaffNavi > ul > li .StaffNavi__link.-active { background:#fff; color:#333; }

/* dark */
.dark .StaffDetail > .sectionHead > .StaffNavi > ul > li {}
.dark .StaffDetail > .sectionHead > .StaffNavi > ul > li > .inner { background:#fff; color:rgba(0,0,0,.2); }
.dark .StaffDetail > .sectionHead > .StaffNavi > ul > li .StaffNavi__link { background:#fff; color:#333; }
.dark .StaffDetail > .sectionHead > .StaffNavi > ul > li .StaffNavi__link.-active { background:#222; color:rgba(255,255,255,9); }

@media screen and (max-width:1199px) { /* pc_s */
	.Layout2Colum__nav.-staff_detail { width:136px; } /* 追従エリアの横幅 */
}
@media screen and (max-width:1023px) { /* tablet */
	.StaffDetail > .sectionHead > .name { transform: translateY(0); top:auto; bottom:80px; }
	.StaffDetail > .sectionHead > .thumArea { position:relative; padding-top:70%; }
	.StaffDetail > .sectionHead > .thumArea > img { height:100%; position:absolute; top:0; left:0; }
	.StaffDetail > .sectionHead > .name.-mariam { color:#fff; text-shadow:0 0 10px rgba(0,0,0,.5); }
}
@media screen and (max-width:767px) { /* sp_l */
	.StaffDetail > .sectionHead > .name { width:auto; font-size:20px; bottom:64px; right:16px; }
	.StaffDetail > .sectionHead > .StaffNavi { width:100%; }
	.StaffDetail > .sectionHead > .StaffNavi > ul { margin-left:-1px; }
}





/* 見出し画像 */
.StaffDetail .sectionOuter {}
.StaffDetail .sectionOuter > .title {
	text-align:center; padding:120px 240px;
	font-family:'Roboto', sans-serif; font-weight:400; font-feature-settings:"palt"; letter-spacing:.2em; text-indent:.2em;
	text-align:center; font-size:16px;
}
@media screen and (max-width:1023px) { /* tablet */
	.StaffDetail .sectionOuter > .title { text-align:center; padding:80px; }
}
@media screen and (max-width:767px) { /* sp_l */
	.StaffDetail .sectionOuter > .title { text-align:center; padding:40px 16px; }
}



/* BIOGRAPHY */
.StaffDetail .staff_biography { padding:0 80px 120px; }
@media screen and (max-width:1199px) { /* pc_s */
	.StaffDetail .staff_biography { padding:0 80px 120px; }
}
@media screen and (max-width:1023px) { /* tablet */
	.StaffDetail .staff_biography { padding:0 40px 80px; }
}
@media screen and (max-width:767px) { /* sp_l */
	.StaffDetail .staff_biography { padding:0 16px 40px; }
}




.StaffDetail .staff_biography .section01 { max-width:860px; margin:auto; padding:40px 0; border-top:1px solid #ccc; }
.StaffDetail .staff_biography .section01 .name_jp { font-size:32px; font-weight:bold; letter-spacing:.1em; line-height:1.5; font-feature-settings:"palt"; }
.StaffDetail .staff_biography .section01 .name_en { font-size:16px; font-weight:bold; letter-spacing:.1em; line-height:2; margin-bottom:16px; font-family:'Roboto', sans-serif; }
.StaffDetail .staff_biography .section01 .socialLink { display:flex; margin-bottom:16px; }
.StaffDetail .staff_biography .section01 .socialLink > li {}
.StaffDetail .staff_biography .section01 .socialLink > li > a { cursor:pointer; display:flex; justify-content:center; align-items:center; text-decoration:none; font-size:24px; width:48px; height:48px; margin-right:8px; border-radius:50%; box-shadow:0px 0px 0px 1px #ccc inset; color:#666; }
.StaffDetail .staff_biography .section01 .socialLink > li > a .text { font-size:11px; font-family:'Roboto', sans-serif; font-weight:400; position:relative; top:1px; letter-spacing:.1em; text-indent:.1em; }
.StaffDetail .staff_biography .section01 .socialLink > li > a i { font-size:18px; opacity:.7; }
.StaffDetail .staff_biography .section01 .text { font-size:14px; line-height:2; }
.StaffDetail .staff_biography .section02 { max-width:860px; margin:auto; padding:40px 0; border-top:1px solid #ccc; }
.StaffDetail .staff_biography .section02 .ttl { font-size:14px; line-height:2; margin-bottom:32px; font-family:'Roboto', sans-serif; font-feature-settings:"palt"; letter-spacing:.1em; }
.StaffDetail .staff_biography .section02 .text { font-size:14px; line-height:2; margin-bottom:16px; }
.StaffDetail .staff_biography .section02 .text:last-child { margin-bottom:0; }
.StaffDetail .staff_biography .section03 { max-width:860px; margin:auto; }
.StaffDetail .staff_biography .section03 .thum {}
.StaffDetail .staff_biography .section04 { max-width:860px; margin:auto; padding:40px 0 0; }
.StaffDetail .staff_biography .section04 .ttl { font-size:14px; line-height:2; margin-bottom:32px; font-family:'Roboto', sans-serif; font-feature-settings:"palt"; letter-spacing:.1em; }
.StaffDetail .staff_biography .section04 .text { font-size:14px; line-height:2; margin-bottom:16px; }
.StaffDetail .staff_biography .section04 .text:last-child { margin-bottom:0; }

/* normal */
.normal .StaffDetail .sectionOuter > .title {}
.normal .StaffDetail .staff_biography .section01 { border-color:rgba(0,0,0,.2); }
.normal .StaffDetail .staff_biography .section01 .name_jp {}
.normal .StaffDetail .staff_biography .section01 .name_en {}
.normal .StaffDetail .staff_biography .section01 .socialLink > li > a { box-shadow:0px 0px 0px 1px rgba(0,0,0,.2) inset; color:rgba(0,0,0,7); }
.normal .StaffDetail .staff_biography .section01 .text {}
.normal .StaffDetail .staff_biography .section02 { border-color:rgba(0,0,0,.2); }

/* dark */
.dark .StaffDetail .sectionOuter > .title { color:#AA8B5D; }
.dark .StaffDetail .staff_biography .section01 { border-color:rgba(255,255,255,.1); }
.dark .StaffDetail .staff_biography .section01 .name_jp {}
.dark .StaffDetail .staff_biography .section01 .name_en {}
.dark .StaffDetail .staff_biography .section01 .socialLink > li > a { box-shadow:0px 0px 0px 1px rgba(255,255,255,.2) inset; color:rgba(255,255,255,.7); }
.dark .StaffDetail .staff_biography .section01 .text {}
.dark .StaffDetail .staff_biography .section02 { border-color:rgba(255,255,255,.1); }

@media screen and (max-width:767px) { /* sp_l */
	.StaffDetail .staff_biography .section01 .name_jp { font-size:30px; }
	.StaffDetail .staff_biography .section01 .name_en { }
	.StaffDetail .staff_biography .section01 .text { font-size:16px; line-height:1.5; }
	.StaffDetail .staff_biography .section02 .ttl { font-size:16px; line-height:1.5; }
	.StaffDetail .staff_biography .section02 .text { font-size:16px; line-height:1.5; }
	.StaffDetail .staff_biography .section04 .ttl { font-size:16px; line-height:1.5; }
	.StaffDetail .staff_biography .section04 .text { font-size:16px; line-height:1.5; }
}






/* WORK LIST */
.staff_worksList { padding:0 80px 120px; margin-top:-56px; }
@media screen and (max-width:1199px) { /* pc_s */
	.StaffDetail .staff_worksList { padding:0 80px 120px; } /* 追従エリアの横幅 */
}
@media screen and (max-width:1023px) { /* tablet */
	.StaffDetail .staff_worksList { padding:0 40px 80px; } /* 追従エリアの横幅 */
}
@media screen and (max-width:767px) { /* sp_l */
	.StaffDetail .staff_worksList { padding:0 16px 40px; margin-top:0; } /* 追従エリアの横幅 */
}

.staff_worksList .ttl { width:100%; max-width:860px; margin:auto; padding:0 0 8px; font-size:48px; font-family:'Roboto', sans-serif; font-weight:300; font-feature-settings:"palt"; }
.staff_worksList table { font-size:11px; width:100%; max-width:860px; margin:0 auto 24px; }
.staff_worksList table tr {}
.staff_worksList table tr td { padding:6px 4px; box-sizing:border-box; line-height:1.3; }
.staff_worksList table tr td:nth-child(1) { display:none; }
.staff_worksList table tr td:nth-child(2) { display:none; }
.staff_worksList table tr td:nth-child(3) { padding:6px 4px 6px 0; width:60px; box-sizing:border-box; } /*ラベル*/
.staff_worksList table tr td:nth-child(4) { box-sizing:border-box; } /*タイトル*/
.staff_worksList table tr td:nth-child(5) { font-size:10px; opacity:.7; width:132px; box-sizing:border-box; } /*補足*/
.staff_worksList table tr td:last-child { padding:6px 0 6px 4px; width:180px; box-sizing:border-box; } /*担当*/
.staff_worksList table:last-child { margin-bottom:0; }
.staff_worksList table tr td .label { font-size:10px; display:flex; align-items:center; justify-content:center; color:#fff; padding:2px 4px 1px; width:48px; border-radius:100px; font-family:'Roboto', sans-serif; font-weight:400; letter-spacing:.1em; text-indent:.1em; }
.staff_worksList table tr td .label.-music { background:#2499F8; }
.staff_worksList table tr td .label.-game { background:#1AC53C; }
.staff_worksList table tr td .label.-live { background:#E0397E; padding:1px 4px 2px; }
.staff_worksList table tr td .label.-tv { background:#6262CE; }
.staff_worksList table tr td .label.-event { background:#E1A32D; }
.staff_worksList table tr td .label.-movie { background:#7A4B17; }
.staff_worksList table tr td .label.-other { background:#666; }

@media screen and (max-width:767px) { /* sp_l */
	.staff_worksList .ttl { font-size:32px; }
	.staff_worksList table { font-size:12px; display:block; }
	.staff_worksList table tbody { display:block; }
	.staff_worksList table tr { display:block; padding:6px 0; }
	.staff_worksList table tr td { display:block; padding:0; line-height:1.2; }
	.staff_worksList table tr td:nth-child(1) { display:none; }
	.staff_worksList table tr td:nth-child(2) { display:none; }
	.staff_worksList table tr td:nth-child(3) { padding:4px 0; font-size:11px; width:100%; }
	.staff_worksList table tr td:nth-child(4) { padding:4px 0; font-weight:bold; width:100%; }
	.staff_worksList table tr td:nth-child(5) { font-size:10px; opacity:.7; width:100%; } 
	.staff_worksList table tr td:last-child { padding:4px 0; width:100%; }
	.staff_worksList table tr td .label {}
	.staff_worksList table tr td .label.-live { background:#E0397E; padding:2px 4px 1px; }
}

/* normal */
.normal .staff_worksList .ttl { border-bottom:1px solid rgba(0,0,0,.2); color:#223a5f; }
.normal .staff_worksList table tr { border-bottom:1px solid rgba(0,0,0,.2); }

/* dark */
.dark .staff_worksList .ttl { border-bottom:1px solid rgba(255,255,255,.1); color:#AA8B5D; }
.dark .staff_worksList table tr { border-bottom:1px solid rgba(255,255,255,.1); }
















/* MUSIC DEMO*/
.staff_musicList { padding:0 120px 120px; }
@media screen and (max-width:1199px) { /* pc_s */
.StaffDetail .staff_musicList { padding:0 80px 120px; } /* 追従エリアの横幅 */
}
@media screen and (max-width:1023px) { /* tablet */
.StaffDetail .staff_musicList { padding:0 40px 80px; } /* 追従エリアの横幅 */
}
@media screen and (max-width:767px) { /* sp_l */
.StaffDetail .staff_musicList { padding:0 16px 40px; } /* 追従エリアの横幅 */
}



.staff_musicList ul li { margin-bottom:40px; }
.staff_musicList ul li:last-child { margin-bottom:0; }
.staff_musicList ul li .wrap {}
.staff_musicList ul li .wrap__row { display:table; width:100%; }
.staff_musicList ul li .wrap__col { display:table-cell; vertical-align:top; }
.staff_musicList ul li .wrap__col.-audio { width:35%; min-width:300px; }
.staff_musicList ul li .wrap__col.-text { padding-left:24px; }
.staff_musicList ul li .wrap__col.-audio .youtube { position:relative; width:100%; padding-top:56.25%; }
.staff_musicList ul li .wrap__col.-audio .youtube iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; }
.staff_musicList ul li .wrap__col.-audio .thumArea { overflow:hidden; width:100%; padding-top:56.25%; position:relative; cursor:pointer; }
.staff_musicList ul li .wrap__col.-audio .playicon { width:48px; height:48px; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:3; }
.staff_musicList ul li .wrap__col.-audio .img { width:100%; position:absolute; top:0; right:0; transform:scale(1.01); width:calc(100% + 1px); transition-duration:0.2s; z-index:1; }
.staff_musicList ul li .wrap__col.-audio .img { pointer-events:auto; }
.staff_musicList ul li audio { margin-bottom:16px; }
.staff_musicList ul li table {}
.staff_musicList ul li table tr th { font-size:14px; line-height:2; padding-right:10px; vertical-align:top; position:relative; }
.staff_musicList ul li table tr th::after { content:":"; display:inline; position:absolute; top:0; right:0; }
.staff_musicList ul li table tr td { font-size:14px; line-height:2; padding-left:8px; vertical-align:top; }

/* hover */
.hover .staff_musicList ul li .wrap__col.-audio .thumArea:hover .img { transform:scale(1.05) rotate(0.1deg); opacity:.8; }


.mejs__time-slider { outline:none; }

.normal .mejs__controls:not([style*='display: none']) {
	background:none; 
}
.dark .mejs__controls:not([style*='display: none']) {
	background:none; 
}


.normal .mejs__container { background:rgba(34, 57, 95, 1); }
.dark .mejs__container { background:rgba(170, 139, 93, .8); }


@media screen and (max-width:767px) { /* sp_l */
.staff_musicList ul li { margin-bottom:40px; }
.staff_musicList ul li:last-child { margin-bottom:0; }
.staff_musicList ul li .wrap {}
.staff_musicList ul li .wrap__row { display:block; width:100%; }
.staff_musicList ul li .wrap__col { display:block; vertical-align:top; }
.staff_musicList ul li .wrap__col.-audio { width:100%; min-width:0; margin-bottom:12px; }
.staff_musicList ul li .wrap__col.-text { padding-left:0; }
.staff_musicList ul li .wrap__col.-audio .youtube { }
.staff_musicList ul li .wrap__col.-audio .youtube iframe {}
.staff_musicList ul li .wrap__col.-audio .thumArea {}
.staff_musicList ul li .wrap__col.-audio .playicon { width:40px; height:40px; }
.staff_musicList ul li .wrap__col.-audio .img {}
.staff_musicList ul li .wrap__col.-audio .img {}
.staff_musicList ul li audio { margin-bottom:16px; }
.staff_musicList ul li table {}
.staff_musicList ul li table tr th { font-size:14px; line-height:2; padding-right:10px; }
.staff_musicList ul li table tr th::after {  }
.staff_musicList ul li table tr td { font-size:14px; line-height:2; padding-left:8px; }
}