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

#interviewer_contents3_wrapper{width:800px; margin:30px auto 0; position: relative; font-size:16px ; line-height:26px ;}
#interviewer_contents3_title{
	width:100%;
	height:238px;
	margin: 0 0 10px 0 ;
	background:
	url(../../img/interviewer/iv_3_title1.png),
	url(../../img/interviewer/iv_3_title2.png),
	url(../../img/interviewer/iv_1_titleback.png);
	background-repeat: 
	no-repeat,
	no-repeat,
	repeat !important;
	background-position:
	50% 15%,
	50% 91%,
	0 0;
	 text-indent:100%; white-space:nowrap; overflow:hidden;
}
#interviewer_contents3_text1{
	background-color:#ffffff ;
	width:800px; 
	margin:20px 0;
	overflow: hidden ;
}


#interviewer_contents3_text2{
	background:url(../../img/interviewer/iv_2_br_bl_str.png) ;
	text-align:center ;
	width:800px; 
	height: 530px ;
	margin:20px 0;
	overflow:hidden; 
}

#interviewer_contents3_text3{
	background:url(../../img/interviewer/iv_2_br_bl_str.png) ;
	text-align:center ;
	width:800px; 
	height: 370px ;
	margin:20px 0;
}


.interviewer_contents3_text1_1{
	float:left ;
	margin: 20px 0 20px 20px ;
}

.interviewer_contents3_text1_2{
	float:right ;
	width:476px ;
	background-color: #ffffff ;
	margin: 20px 20px 20px 0 ;
}

.interviewer_contents3_text1_2 div{
	border-top: solid 2px #3245AD;
	border-bottom: solid 2px #3245AD;
}


.interviewer_contents3_text1_2 p{
	font-size:20px ;
	color:#3245AD ;
	font-weight:600 ;
	line-height:36px ;
	text-align:center ;
	margin:20px ;
}

.interviewer_contents3_text1_2 div{
	margin:20px ;
}

.tabs {
	width: 800px;
}

.tabs > .tab {
	display: inline-block;
	width: 398px;
	height: 212px;
	margin-bottom: 17px;
}
.tabs > .tab.active {
	width: 398px;
	height: 229px;
	margin-bottom: 0;
}
.tab a {
	display: block;
	width: 398px;
	height: 229px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#tab1 {
	background-image: url(../../img/interviewer/iv_3_subtitle_1.png);
	background-repeat: repeat !important;
	float:left ;
	margin-right:4px ;
}
#tab2 {
	background-image: url(../../img/interviewer/iv_3_subtitle_2.png);
	background-repeat: repeat !important;
}
.panels > .panel {
	display: none;
}
.panels > .panel.active {
	display: block;
}


.interviewer_contents3_main_frame {
	width: 800px;
	height: 580px;
	margin: 0;
}
#interviewer_contents3_main_frame1 {
	background-image: url(../../img/interviewer/iv_3_bg_blue1.jpg);
	background-repeat: repeat !important;
	margin: 0;
}
#interviewer_contents3_main_frame2 {
	background-image: url(../../img/interviewer/iv_3_bg_blue2.jpg);
	background-repeat: repeat !important;
	margin: 0;
}
.interviewer_contents3_frame_title {
	text-align: center;
	height: 60px;
}
.interviewer_contents3_frame_title img {
	height: 34px;
	margin-top: 13px;
}
.interviewer_contents3_frame_inner {
	width: 760px;
	height: 500px;
	margin: 0 20px;
	padding: 1px;
	background-color: #ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.interviewer_contents3_frame_inner_title {
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	margin-top: 20px;
}

/* ここからhuman */
div.starting_point_human1 {
	position: relative;
	width: 200px;
	height: 280px;
	padding-top: 10px;
	margin: 8px 10px 0px 10px;
	float:left;
}
div.opener_human1 > div.longtext_human1 {
	display: none;
	width: 412px;
	height: 118px;
	padding-top: 10px;
	margin-top:-100px ;
}
div.opener_human1:hover > div.longtext_human1 {
	z-index:999 ;
	width: 200px;
	height: 118px;
	position: absolute;
	display: block;
	top: 90px ;
	left: 200px ;
	/* 装飾設定 -------------------- */
	color : #fff;
	font-size: 12px;
	line-height: 1.5;
	/*margin-top:-100px ;*/
	animation: rotate1 0.8s;
	animation-iteration-count: 1;
	-webkit-animation: rotate1 0.8s; /* Safari & Chrome */
 	-webkit-animation-iteration-count: 1;
}



@keyframes rotate1 {
	0% { transform: rotate(100deg); }
	100% { transform: rotate(0deg); }
}
@-webkit-keyframes rotate1 { /*Safari & Chrome */
	  0% { -webkit-transform: rotate(100deg); }
	  100% { -webkit-transform: rotate(0deg); }
} 


div.starting_point_human2 {
	position: relative;
	width: 200px;
	height: 280px;
	padding-top: 10px;
	margin: 8px 10px 0px 10px;
	float:left;
}
div.opener_human2 > div.longtext_human2 {
	display: none;
	width: 412px;
	height: 118px;
	padding-top: 10px;
	margin-top:-100px ;
}
div.opener_human2:hover > div.longtext_human2 {
	z-index:999 ;
	width: 200px;
	height: 118px;
	position: absolute;
	display: block;
	top: -10px;
	left: 55px;
	/* 装飾設定 -------------------- */
	color : #fff;
	font-size: 12px;
	line-height: 1.5;
	/*margin-top:-100px ;*/
	animation: inout 2s;
	animation-iteration-count: 1;
	-webkit-animation: inout 2s; /* Safari & Chrome */
	-webkit-animation-iteration-count: 1;
}

@keyframes inout {
	0%   { transform: scale(0, 0); }
	25%   { transform: scale(1.2, 1.2); }
	50%   { transform: scale(0.8, 0.8); }
	100%  { transform: scale(1, 1); }
	}
	@-webkit-keyframes inout { /* Safari & Chrome */
	0%   { -webkit-transform: scale(0, 0); }
	25%  { -webkit-transform: scale(1.2, 1.2); }
	50%  { -webkit-transform: scale(0.8, 0.8); }
	100% { -webkit-transform: scale(1, 1); }
}

div.starting_point_human3 {
	position: relative;
	width: 200px;
	height: 280px;
	padding-top: 10px;
	margin: 8px 10px 0px 10px;
	float:left;
}
div.opener_human3 > div.longtext_human3 {
	display: none;
	width: 412px;
	height: 118px;
	padding-top: 10px;
	margin-top:-100px ;
}
div.opener_human3:hover > div.longtext_human3 {
	z-index:999 ;
	width: 200px;
	height: 118px;
	position: absolute;
	display: block;
	top: 90px ;
	left: -140px ;
	/* 装飾設定 -------------------- */
	color : #fff;
	font-size: 12px;
	line-height: 1.5;
	/*margin-top:-100px ;*/
	animation: rotate 0.8s;
	animation-iteration-count: 1;
	-webkit-animation: rotate 0.8s; /* Safari & Chrome */
 	-webkit-animation-iteration-count: 1;
}

@keyframes rotate {
	0% { transform: rotate(-100deg); }
	100% { transform: rotate(0deg); }
}
@-webkit-keyframes rotate { /*Safari & Chrome */
	  0% { -webkit-transform: rotate(-100deg); }
	  100% { -webkit-transform: rotate(0deg); }
} 

/* ここまでhuman */

#interviewer_contents3_main_frame1_human {
	text-align: center;
	width: 740px;
	margin: 20px 0 40px 0px;
}
.box {
	float: left;
	text-align: center;
}
img.human {
	margin-right: 40px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
}
img.human:hover {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
}

#human1{
	margin-left:20px ;
}

#human2{
	margin-left:60px ;
}

#human3{
	margin-left:80px ;
}

#human1,#human3{
	margin-top:26px ;
	margin-bottom:-26px ;
}

#interviewer_contents3_main_frame1_word {
	font-size: 30px;
	color: #496CDB;
	margin-left: 90px;
}
#interviewer_contents3_main_frame1_word div {
	float: left;
	line-height: 30px;
	font-weight: 900;
	text-align: center;
	margin-right: 40px;
}
#interviewer_contents3_main_frame1_word div span {
	display: block;
	font-size: 16px;
	color: #496CDB;
}

/*left*/

#interviewer_contents3_main_frame2_left{
	float:left ;
}

div.starting_point {
	position: relative;
	width: 412px;
	height: 118px;
	background-color: #E7E7E7;
	padding-top: 10px;
	margin: 8px 10px 0px 10px;
}
div.opener > div.longtext {
	display: none;
	width: 412px;
	height: 118px;
	padding-top: 10px;
}
div.opener:visited > div.longtext {
	width: 412px;
	height: 118px;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	/* 装飾設定 -------------------- */
	color : #fff;
	background: rgba(0,0,0,0.8);
	font-size: 12px;
	line-height: 1.5;
}

div.opener:hover > div.longtext {
	width: 412px;
	height: 118px;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	/* 装飾設定 -------------------- */
	color : #fff;
	background: rgba(0,0,0,0.8);
	font-size: 12px;
	line-height: 1.5;
}

div.opener:active > div.longtext {
	width: 412px;
	height: 118px;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	/* 装飾設定 -------------------- */
	color : #fff;
	background: rgba(0,0,0,0.8);
	font-size: 12px;
	line-height: 1.5;
}

div.big_wm {
	display: inline-block;
	color: #ffffff;
	font-size: 32px;
	font-weight: 900;
	line-height: 36px;
	width: 30px;
	height: 118px;
	margin-left: 10px;
}
div.lank {
	font-size: 20px;
	font-weight: 900;
	color: #444444;
	line-height: 34px;
	display: block;
	float: right;
	width: 350px;
	height: 118px;
	margin-top: 4px;
}
div.lank span {
	color: #419EFF;
}
div.comment {
	font-size: 15px;
	color: #ffffff;
	line-height: 24px;
	display: block;
	float: right;
	width: 330px;
	height: 118px;
	margin: 4px 18px 0 0 ;
}

div.comment strong {
	font-weight:900 ;
	margin: 0 4px ;
}

div.comment a , div.comment2 a ,label a , label2 a {
	font-weight:900 ;
	color:#ffcc00 ;
	margin: 0 4px ;
}

div.comment2 a {
	font-weight:900 ;
	color:#ffcc00 ;
	margin: 0 4px ;
}

div.comment span {
	display: inline-block ;
	color: #ffffff ;
	background-color: #419EFF;
	margin: 4px 10px 0 0 ;
	padding: 0 4px ;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

/* left終わり */

/*right*/

#interviewer_contents3_main_frame2_right{
	float:left ;
}

div.starting_point2 {
	position: relative;
	width: 280px;
	height: 186px;
	background-color: #E7E7E7;
	padding-top: 10px;
	margin: 8px 10px 0px 10px;
}
div.opener2 > div.longtext2 {
	display: none;
	width: 280px;
	height: 186px;
	padding-top: 10px;
}
div.opener2:hover > div.longtext2 {
	width: 280px;
	height: 186px;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	/* 装飾設定 -------------------- */
	color : #fff;
	background: rgba(0,0,0,0.8);
	font-size: 12px;
	line-height: 1.5;
}
div.big_wm2 {
	display: inline-block;
	color: #ffffff;
	font-size: 32px;
	font-weight: 900;
	line-height: 36px;
	text-align:center ;
	width:100% ;
	margin-left:10px ;
}

div.lank2 {
	font-size: 20px;
	font-weight: 900;
	color: #444444;
	line-height: 34px;
	display: block;
	width: 280px;
	height: 118px;
	margin: 16px 0 0 10px ;
}
div.lank2 span {
	color: #419EFF;
}

div.lank3 {
	font-size: 20px;
	font-weight: 900;
	color: #444444;
	line-height: 34px;
	display: block;
	width: 280px;
	height: 118px;
	margin: 10px 0 0 10px ;
}
div.lank3 span {
	color: #419EFF;
}

div.comment2 {
	font-size: 15px;
	color: #ffffff;
	line-height: 24px;
	display: block;
	width: 240px;
	height: 118px;
	margin: 4px 20px 0 20px ;
}

div.comment2 strong {
	font-weight:900 ;
	margin: 0 4px ;
}

div.comment2 span {
	display: inline-block ;
	color: #ffffff ;
	background-color: #419EFF;
	margin: 10px 10px 0 0 ;
	padding: 0 4px ;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}


/*right　おわり*/


div#mouse{
	position:relative ;
	font-size:20px ;
	width:740px ;
	height: 50px ;
	margin-left:10px ;
}

div#mouse img{
	float:left ;
	display:block ;
	height:50px ;
	margin: -4px  20px 0 ;
}

div#mouse div{
	display:inline-block ;
	font-size:21px ;
	width:660px ;
	height:50px ;
	margin-top:16px ;
}


#def1:hover , #def2:hover , #def3:hover{
	font-size:16px ;
	color:#D7B60A ;
}

#def1 img:hover , #def2 img:hover , #def3 img:hover{
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
}


/*last*/
#interviewer_contents3_last_frame {
	width: 800px;
	height: 620px;
	background-image: url(../../img/interviewer/iv_3_bg_blue1.jpg);
	background-repeat: repeat !important;
	margin: 0;
}

#interviewer_contents3_last_frame_1{
	background-image:url(../../img/interviewer/iv_3_lasttitle_n.png);
    background-repeat: repeat !important;
}

#interviewer_contents3_last_frame_2 {
	width: 760px;
	height: 460px;
	margin: 0 20px;
	padding: 1px;
	background-color: #ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#interviewer_contents3_last_frame_2_inner {
	font-size:16px ;
	line-height:30px ;
	width: 715px;
	height: 500px;
	margin: 22px 22px;
	padding: 1px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#interviewer_contents3_last_frame_2_inner a{
	color:#496CDB ;
	font-weight:900 ;
}