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

/* ----------------------------------------------------------------------- */

/* 社員インタビュー */

/* ----------------------------------------------------------------------- */

@keyframes tabAnim{
	0%{
		top:-100%;
}
	100%{
		top:0;
	}
}

.tab_wrap{
	width:800px; 
	margin:50px auto 60px auto;
}

input[type="radio"]{
	display:none;
}

.tab_area{
	font-size:0;
	margin:0 10px;
}

.tab_area label{
	width:30%; 
	margin:0 5px; 
	display:inline-block; 
	padding:12px 0;
	color:#999; 
	background:#ddd; 
	text-align:center; 
	font-size:13px;
	word-spacing: 1.4em;
	line-height: 1.4em;
	cursor:pointer; 
	transition:ease 0.2s opacity;
	border-top: 3px solid #0066e9;
	border-right: 3px solid #0066e9;
	border-left: 3px solid #0066e9;
}

.tab_area label:hover{
	opacity:0.5;
}

.panel_area{
	overflow:hidden; 
	height:750px;
	position:relative;
	box-shadow:2px 2px 3px #898f88;
}

.tab_panel{
	width:100%;
	background:#fff;
	overflow:hidden;
	position:absolute;
	height:100%;
  	background: -moz-linear-gradient(top, #00A0E9, #00a5ea 25%, #0066e9);
    background: -webkit-linear-gradient(top, #00A0E9, #00a5ea 25%, #0066e9);
    background: linear-gradient(to bottom, #00A0E9, #00a5ea 25%, #0066e9);
}

.tab_panel .copy{
	width: 100%;
	padding: 15px 10px 15px 20px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	background-color: #0066e9;
}

.tab_panel .interviewphoto{
	padding: 20px;
	float: left;
	width: 45%;
}

.tab_panel .interviewplofile{
	color: aliceblue;
	line-height: 2.5em;
	font-size: 110%;
}

.tab_panel .interviewplofile span{
	padding: 5px 30px;
	margin-right: 20px;
	background-color: aliceblue;
	border: 1px solid aliceblue;
	border-radius: 3px;
	color: #00A0E9;
}

.tab_panel .word{
	width: 45%;
	float: left;
	font-size:12px;
	letter-spacing:1.1px;
	line-height: 1.8em;
	text-align:left;
	padding:20px 0 20px 0;
	margin-left: 25px;
	color: white;
}

.tab_panel .word .marker{
	background:linear-gradient(transparent 85%, #ff6 85%);
}

#tab1:checked ~ .tab_area .tab1_label{
	background:#fff; 
	color:#000;
}

#tab1:checked ~ .panel_area #panel1{
	animation:tabAnim ease 0.4s forwards; 
	-ms-animation:tabAnim ease 0.4s forwards; 
	z-index:1;
}

#tab2:checked ~ .tab_area .tab2_label{
	background:#fff;
	color:#000;
}

#tab2:checked ~ .panel_area #panel2{
	animation:tabAnim ease 0.4s forwards; 
	-ms-animation:tabAnim ease 0.4s forwards; 
	z-index:1;}

#tab3:checked ~ .tab_area .tab3_label{
	background:#fff; color:#000;
}

#tab3:checked ~ .panel_area #panel3{
	animation:tabAnim ease 0.4s forwards;
	-ms-animation:tabAnim ease 0.4s forwards; 
	z-index:1;
}

/* ----------------------------------------------------------------------- */

/* 社員インタビュー（レスポンシブ） */

/* ----------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
@keyframes tabAnim{
	0%{
		top:-100%;
}
	100%{
		top:0;
	}
}

.tab_wrap{
	width:80%; 
	margin:50px auto 60px auto;
}

input[type="radio"]{
	display:none;
}

.tab_area{
	font-size:0;
	margin:0 10px;
}

.tab_area label{
	width:30%; 
	margin:0 2px; 
	display:inline-block; 
	padding:10px 0;
	color:#999; 
	background:#ddd; 
	text-align:center; 
	font-size:12px;
	word-spacing: 1.4em;
	line-height: 1.2em;
	cursor:pointer; 
	transition:ease 0.2s opacity;
	border-top: 3px solid #00A0E9;
	border-right: 3px solid #00A0E9;
	border-left: 3px solid #00A0E9;
}

.tab_area label:hover{
	opacity:0.5;
}

.panel_area{
	overflow:hidden; 
	height:1300px;
	position:relative;
	box-shadow:2px 2px 3px #898f88;
	z-index: 800;
}

.tab_panel{
	width:100%;
	background:#fff;
	overflow:hidden;
	position:absolute;
	height:100%;
  	background: -moz-linear-gradient(top, #00A0E9, #00a5ea 25%, #0066e9);
    background: -webkit-linear-gradient(top, #00A0E9, #00a5ea 25%, #0066e9);
    background: linear-gradient(to bottom, #00A0E9, #00a5ea 25%, #0066e9);
}

.tab_panel .copy{
	width: 100%;
	padding: 15px 10px 15px 20px;
	font-size: 70%;
	font-weight: bold;
	color: white;
	background-color: #0066e9;
}

.tab_panel .photo_wrap {
	width: 90%;
	padding: 20px;		
}	

.tab_panel .interviewphoto{
	padding: 0;
	float: none;
	width: 100%;
}

.tab_panel .interviewphoto img{
	width: 100%;
	height: auto;
}
	
.tab_panel .interviewplofile{
	margin-bottom: 30px;
	
}

.tab_panel .word{
	width: 100%;
	float: left;
	font-size:12px;
	letter-spacing:1.1px;
	line-height: 1.6em;
	text-align:left;
	padding:10px 0 20px 0;
	margin-left: 0;
	color: white;
}

#tab1:checked ~ .tab_area .tab1_label{
	background:#fff; 
	color:#000;
}

#tab1:checked ~ .panel_area #panel1{
	animation:tabAnim ease 0.4s forwards; 
	-ms-animation:tabAnim ease 0.4s forwards; 
	z-index:1;
}

#tab2:checked ~ .tab_area .tab2_label{
	background:#fff;
	color:#000;
}

#tab2:checked ~ .panel_area #panel2{
	animation:tabAnim ease 0.4s forwards; 
	-ms-animation:tabAnim ease 0.4s forwards; 
	z-index:1;}

#tab3:checked ~ .tab_area .tab3_label{
	background:#fff; color:#000;
}

#tab3:checked ~ .panel_area #panel3{
	animation:tabAnim ease 0.4s forwards;
	-ms-animation:tabAnim ease 0.4s forwards; 
	z-index:1;
}
}