@charset "utf-8";

/**************************************************************************************

--------------------------------------------------------------------------------------
変革へ挑戦を続ける仲間たち - 先輩のひと言
***************************************************************************************/

/* アニメーション
========================================== */

@keyframes fadeKey {
	0%   {display:none;opacity:0;}
	100% {display:block;opacity:1;}
}

/* 導入
========================================== */

#main p.intro {
	margin-top:50px;
	text-align:center;
	padding:0 20px;
}
@media only screen and (max-width:768px) {
	#main p.intro {
		margin-top:30px;
	}
}

/* スライドメニュー
========================================== */

#main .slideNav {
	margin:50px auto 0;
	padding:0 120px;
	max-width:2000px;
}
#main .slideNav ul {
	display:none;
}
#main .slideNav ul.slick-initialized {
	display:block;
}
#main .slideNav ul li {
	margin:0 0.7vw 0.6%;
	position:relative;
}
#main .slideNav ul li a {
	display:block;
	position:relative;
}
#main .slideNav ul li a:hover  {
	opacity:1;
}
#main .slideNav ul li a::before {
	content:"";
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:auto;
	height:auto;
	border:0.7vw solid #db9c5e;
	/*opacity:0;*/
}
#main .slideNav ul li a::after {
	content:"";
	display:none;
	position:absolute;
	background:url("../img/staff/txt_click.png") center top / 100% auto no-repeat;
	width:100%;
	height:15%;
	bottom:-15%;
	/*opacity:0;*/
}
#main .slideNav ul li a:hover::before,
#main .slideNav ul li a:hover::after {
	display:block;
	animation: appear .3s ease;
	/*opacity:1;*/
	/*animation:fadeKey 0.3s ease 0s 1 normal;*/
}
@keyframes appear {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
#main .slideNav .slick-next {
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	border-left:20px solid #db9c5e;
}
#main .slideNav .slick-prev {
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	border-right:20px solid #db9c5e;
}
@media only screen and (max-width:768px) {
	#main .slideNav {
		margin-top:30px;
		padding:0 30px;
	}
	#main .slideNav .slick-next,
	#main .slideNav .slick-prev {
		border-width:10px;
	}
}

/* プロフィール
========================================== */

#main #profile {
	max-width:2000px;
	margin:30px auto 0;
}

/* ---------------------------
ビジュアル
----------------------------- */

#main #profile .visual {
	display:flex;
	color:#fff;
}
#main #profile.ptR .visual {
	flex-direction:row-reverse;
}
#main #profile.ptR .visual {
}
#main #profile .visual .txtBox {
	width:44%;
	background-color:#db9c5e;
	position:relative;
}
#main #profile.ptL .visual .txtBox {padding-left:4%;}
#main #profile.ptR .visual .txtBox {padding-left:15%;}

#main #profile .visual .txtBox .genre {
	height:26%;
	padding-bottom:2%;
	display:flex;
	flex-wrap:wrap;
	align-content:flex-end;
}
#main #profile .visual .txtBox .genre::before {
	content:"";
	width:88.6%;
	height:1px;
	background-color:#fff;
	position:absolute;
	top:26%;
	left:0;
}
#main #profile .visual .txtBox .genre p {
	font-size:22px;
	font-weight:bold;
	width:100%;
	display: flex;
}
#main #profile.ptL .visual .txtBox .genre p {
	padding-right: 70px;
}
#main #profile .visual .txtBox .genre p span {
	font-weight: inherit;
	flex-shrink: 0;
	display: inline-block;
	padding-right: 1em;
}
#main #profile .visual .txtBox .genre p.depa {
	line-height:1.4;
}
#main #profile .visual .txtBox .genre p.year {
	margin-top:5px;
}
#main #profile .visual .txtBox .cmt {
	height:61%;
	position:relative;
}
#main #profile .visual .txtBox .cmt p {
	font-size:26px;
	line-height:1.8;
	font-weight:bold;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
_:-ms-lang(x)::-ms-backdrop, #main #profile .visual .txtBox .cmt p {
	line-height:1.5;
}
#main #profile .visual .txtBox .more {
	height:35px;
	position:relative;
}
#main #profile.ptL .visual .txtBox .more {
	margin-left:20%;
}
#main #profile .visual .txtBox .more::before {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background-color:#fff;
	position:absolute;
	bottom:0;
	left:0;
}
#main #profile .visual .txtBox .more a {
	display:inline-block;
	background-color:#fff;
	color:#db9c5e;
	font-size:18px;
	font-weight:bold;
	height:35px;
	line-height:35px;
	position:relative;
	padding:0 60px 0 30px;
	cursor:pointer;
}
_:-ms-lang(x)::-ms-backdrop, #main #profile .visual .txtBox .more a {
	font-size:16px;
}
#main #profile .visual .txtBox .more a::before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:20px;
	border-top:11px solid #db9c5e;
	border-right:9px solid transparent;
	border-left:9px solid transparent;
}
#main #profile .visual .photo {
	width:56%;
}
@media only screen and (max-width:1260px) {
	#main #profile .visual .txtBox {
		width:40%;
	}
	#main #profile .visual .photo {
		width:60%;
	}
	#main #profile.ptR .visual .txtBox {
		padding-left:4%;
	}
	#main #profile .visual .txtBox .genre {
		height: 35%;
		padding-bottom: 0;
		align-content: center;
	}
	#main #profile .visual .txtBox .genre::before {
		top: 35%;
	}
	#main #profile .visual .txtBox .cmt {
		height:52%;
	}
	#main #profile .visual .txtBox .genre p {
		font-size:18px;
	}
	#main #profile .visual .txtBox .cmt p {
		font-size:22px;
		line-height:1.6;
	}
}
/*@media only screen and (max-width:980px) {
	#main #profile .visual .txtBox {
		width:35%;
	}
	#main #profile .visual .photo {
		width:65%;
	}
	#main #profile .visual .txtBox {
		padding-left:3%!important;
	}
	#main #profile .visual .txtBox .genre p {
		font-size:15px;
	}
	#main #profile .visual .txtBox .cmt p {
		font-size:18px;
		line-height:1.6;
	}
	#main #profile .visual .txtBox .more {
		height:30px;
	}
	#main #profile .visual .txtBox .more a {
		height:30px;
		line-height:30px;
	}
}*/
@media only screen and (max-width:980px) {
	#main #profile .visual {
		display:block;
	}
	#main #profile .visual .txtBox {
		width:100%;
		padding:0 20px 20px!important;
	}
	#main #profile .visual .txtBox .genre {
		height:auto;
		display:block;
		padding-bottom:20px;
		border-bottom:1px solid #fff;
	}
	#main #profile .visual .txtBox .genre::before {
		display:none;
	}
	#main #profile .visual .txtBox .genre p {
		font-size:16px;
	}
	#main #profile .visual .txtBox .cmt {
		height:auto;
	}
	#main #profile .visual .txtBox .cmt p {
		position:static;
		transform:none;
		font-size:20px;
		margin-top:30px;
		line-height:1.6;
	}
	#main #profile .visual .txtBox .more {
		height:auto;
		margin-top:30px;
	}
	#main #profile.ptL .visual .txtBox .more {
		margin-left:0;
	}
	#main #profile .visual .txtBox .more::before {
		display:none;
	}
	#main #profile .visual .txtBox .more a {
		height:46px;
		line-height:46px;
		width:100%;
	}
	#main #profile .visual .photo {
		width:100%;
		background-color:#db9c5e;
		text-align:center;
		padding:20px;
	}
	#main #profile .visual .photo img {
		width:500px;
		max-width:100%;
	}
}

/* ---------------------------
動画
----------------------------- */

#main #profile .movie {
	width:960px;
	max-width:100%;
	margin:50px auto 0;
	padding:0 20px;
}
#main #profile .movie video {
	width:100%;
}
@media only screen and (max-width:1460px) {
	#main #profile .movie {
		width:860px;
	}
}
@media only screen and (max-width:1360px) {
	#main #profile .movie {
		width:760px;
	}
}
@media only screen and (max-width:1260px) {
	#main #profile .movie {
		width:660px;
	}
}
@media only screen and (max-width:1160px) {
	#main #profile .movie {
		width:560px;
	}
}
@media only screen and (max-width:1060px) {
	#main #profile .movie {
		width:800px;
	}
}
@media only screen and (max-width:768px) {
	#main #profile .movie {
		margin-top:30px;
	}
}

/* ---------------------------
PREV / NEXT ボタン
----------------------------- */

#main #profile .btnPNArea {
	position:relative;
}
#main #profile .btnPNArea a {
	background-color:#db9c5e;
	position:absolute;
	top:-37px;
}
#main #profile .btnPNArea a.prev {left:60px;}
#main #profile .btnPNArea a.next {right:60px;}

@media only screen and (max-width:1060px) {
	#main #profile .btnPNArea {
		margin-top:20px;
		padding:0 20px;
		display:flex;
		justify-content:space-between;
	}
	#main #profile .btnPNArea a {
		position:relative;
		top:auto;
		left:auto!important;
		right:auto!important;
	}
}

/* ---------------------------
more view の中身
----------------------------- */

/* モーダルウィンドウ */
.modal_bg {
    position:fixed;
    top:0;
    left:0;
	right:0;
	bottom:0;
    z-index:6666;
    display:none;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.75);
}
.modal_box {
    position:fixed;
    z-index:7777;
    display:none;
    width:750px;
	max-width:90%;
	height:90vh;
    margin:0;
    padding:30px 30px 0;
    background:#fff;
	overflow-y:scroll;
	overflow-x:hidden;
	box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.modal_box::before {
	content:"";
	display:block;
	width:7px;
	height:70px;
	background-color:#e5a84b;
	position:absolute;
	top:0;
	left:0;
}
@media screen and (max-width:768px) {
	.modal_box {
		height:90vh;
		padding:15px 15px 0;
		box-shadow:0 0 10px rgba(0,0,0,0.2);
	}
	.modal_box::before {
		width:4px;
		height:50px;
	}
}

/* ボタン類 */
.modal_box .btnSwitch {
	margin-top:20px;
	padding-bottom:30px;
	text-align:right;
}
.modal_box .btnSwitch a {
	display:inline-block;
	font-size:16px;
	color:#fff;
	font-weight:bold;
	background-color:#db9c5e;
	position:relative;
	height:35px;
	line-height:35px;
	padding:0 80px 0 50px;
	border-radius:0 25px 25px 0;
	text-align:right;
	cursor:pointer;
}
.modal_box .btnSwitch a::before {
	content:"";
	display:block;
	background:url("../img/staff/ic_arrow.png") center / 18px 14px no-repeat;
	width:18px;
	height:14px;	
	position:absolute;
	top:50%;
	right:30px;
	transform:translateY(-50%) rotate(180deg);
}
@media only screen and (max-width:500px) {
	.modal_box .btnSwitch a {
		height:46px;
		line-height:46px;
		width:50%;
		text-align:left;
		padding-left:15px;
		padding-right:0;
	}
	.modal_box .btnSwitch a::before {
		right:15px;
	}
}

/* メッセージ */
.modal_box .message {
}
.modal_box .message .photo {
	position:relative;
	width:600px;
	max-width:100%;
	margin:0 auto;
}
.modal_box .message .photo ul.imgArea li {
	position:absolute;
}
.modal_box .message .photo ul.imgArea li input {
	display:none;
}
.modal_box .message .photo ul.imgArea li label {
	display:inline-block;
	width:15px;
	height:15px;
	border:1px solid #ccc;
	cursor:pointer;
	position:absolute;
	bottom:-25px;
}
.modal_box .message .photo ul.imgArea li:nth-of-type(1) label {right:50px;}
.modal_box .message .photo ul.imgArea li:nth-of-type(2) label {right:25px;}
.modal_box .message .photo ul.imgArea li:nth-of-type(3) label {right:0;}

.modal_box .message .photo ul.imgArea li input:checked + label {
	background-color:#db9c5e;	
}
.modal_box .message .photo ul.imgArea li .show {
	opacity:0;
}
.modal_box .message .photo ul.imgArea li input:checked ~ .show {
	opacity:1;
	animation:fadeKey 1.5s ease 0s 1 normal;
}
.modal_box .message .photo ul.imgArea li .show img {
	width:100%;
}
.modal_box .message dl {
	width:520px;
	max-width:100%;
	margin:0 auto;
	line-height:1.4;
	padding-top:450px;
}
.modal_box .message dl dt {
	font-size:30px;
	font-weight:bold;
}
.modal_box .message dl dd {
	line-height:1.6;
	border-top:1px solid #000;
	margin-top:20px;
	padding-top:20px;
}
@media screen and (max-width:768px) {
	.modal_box .message .photo ul.imgArea li label {
		width:50px;
		height:10px;
		bottom:-15px;
	}
	.modal_box .message .photo ul.imgArea li:nth-of-type(1) label {right:120px;}
	.modal_box .message .photo ul.imgArea li:nth-of-type(2) label {right:60px;}
	.modal_box .message dl {
		padding-top:79%;
	}
	.modal_box .message dl dt {
		font-size:20px;
	}
}

/* スケジュール */
.modal_box .schedule {
	padding-left:5%;
} 
.modal_box .schedule dl {
	width:100%;
	line-height:1.4;
	border-left:2px solid #000;
	padding:20px 0 30px;
}
.modal_box .schedule dl dt {
	font-size:18px;
	font-weight:bold;
	position:relative;
	padding:5px 0 0 85px;
}
.modal_box .schedule dl dt:not(:first-of-type) {
	margin-top:20px;
}
.modal_box .schedule dl dt + dt {
	margin-top:30px!important;
}
.modal_box .schedule dl dt::before {
	content:"";
	display:block;
	background:url("../img/staff/ic_time.png") center / 36px 34px no-repeat;
	width:36px;
	height:34px;
	position:absolute;
	top:0;
	left:-20px;
}
.modal_box .schedule dl dt.nontime::before {
	display: none;
}
.modal_box .schedule dl dt em {
	font-weight:bold;
	display:block;
	position:absolute;
	top:5px;
	left:25px;
} 
.modal_box .schedule dl dd {
	margin-top:10px;
	padding-left:85px;
}
.modal_box .schedule dl dd .inTit {
	font-size:18px;
	font-weight:bold;
	display:inline-block;
	margin-top: 10px;
	margin-bottom: 5px;
}
.modal_box .schedule dl dd .photo {
	margin-top:15px;
}
@media screen and (max-width:768px) {
	.modal_box .schedule dl dd {
		padding-left:25px;
	}
}