/* CSS Document */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
インタビューページ共通設定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

html{
    font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

/*背景テクスチャ指定*/
body{
    background: url(../img/interview_bg.jpg) repeat-y top center;
    line-height: 1.8;
}

span01{
    display: inline-block;
}

.contents {
    min-height: 100%;
}

.contentsInner {
    padding-bottom: 50px;
}

.footer {
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: -50px;
    background-color:#393939;
    color:#ffffff;
}

/*リンクの共通設定*/
.hoverItem:hover{
    opacity:0.7;
    -ms-filter: "alpha(opacity=70)";/*IE8_9*/
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.headerArea{
    background: #54c2c2;
}

.header{
    background: url(../img/interview_header.webp) no-repeat;
    height: 349px;
    width: 800px;
    margin: 0 auto;
}

#menu .headerArea{
    background: none;
}

/*戻るボタン*/
.topBtn{
    display: block;
    background: url("../img/topBtn.png") no-repeat;
    width: 116px;
    height: 116px;
    position: relative;
    top: 20px;
    left: 650px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メニュー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.menuInner{
    padding-bottom: 50px;
}

.menuInnerBtn{
    display: block;
    background-color: #FFFFFF;
    width: 738px;
    height: 200px;
    margin: 10px auto 50px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メインイメージ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.mainImg{
    width:800px;
    height: 552px;
    margin: 0 auto;
    position: relative;
}

.mainImg p{
    width:500px;
    position: absolute;
    top:150px;
    left:56px;
    font-size: 18px;
}

#sales .mainImg p{
    width:500px;
    position: absolute;
    top:180px;
    left:56px;
    font-size: 18px;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
タブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.tabContents{
    margin: 50px auto;
    width:736px;
    position: relative;
}

.tabContentsItemInner{
    background-color: #ffedb4;
}

.tabArea{
    width:736px;
    background: url(../img/interview_schedule_tabBg.png) repeat-x;
    height:195px;
}

.tabArea.tabAreaBottom {
    width:736px;
    background: url("../img/interview_schedule_tabBg_02.png") repeat-x;
    height:195px;
}

.tabAreaInner{
    width:680px;
    position: absolute;
    left:28px;
}

ul {
    list-style:none;
}

ul.tabbox .tabItem {
    float:left;
    width:340px;
    height:196px;
    text-align:center;
    cursor:pointer;
    box-sizing: border-box;
}

ul.textbox {
    width:100%;
    border:1px solid #c0c0c0;
    box-sizing: border-box;
    height:200px;
    padding:10px;
}

ul.textbox .tabItem {
    display:none;
}

.tabContents .tabContentsItem {
    display:none;
}

.tabContents .tabContentsItem.hideItem{
    display:block;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

/*未選択*/
.voice {
    background-image: url(../img/interview_voice.png);
}

.tabAreaBottom .voice {
    background-image: url(../img/interview_voice_02.png);
}

.schedule {
    background-image: url(../img/interview_schedule.png);
}

.tabAreaBottom .schedule {
    background-image: url(../img/interview_schedule_02.png);
}

/*選択*/
.voice.selectedItem {
    background-image: url(../img/interview_voice_select.png);
}

.tabAreaBottom .voice.selectedItem {
    background-image: url("../img/interview_voice_select_02.png");
}

.schedule.selectedItem {
    background-image: url(../img/interview_schedule_select.png);
}

.tabAreaBottom .schedule.selectedItem {
    background-image: url("../img/interview_schedule_select_02.png");
}

/*hover*/
.tabItem.voice:hover {
    background-image: url(../img/interview_voice_hover.png);
}

.tabAreaBottom .tabItem.voice:hover {
    background-image: url("../img/interview_voice_hover_02.png");
}

/*選択中は変化しない*/
.tabItem.voice.selectedItem:hover {
    opacity:1;
    -ms-filter: "alpha(opacity=100)"; /* IE 8,9 */
}

/*hover*/
.tabItem.schedule:hover {
background-image: url(../img/interview_schedule_hover.png);
}

.tabAreaBottom .tabItem.schedule:hover {
background-image: url("../img/interview_schedule_hover_02.png");
}

/*選択中は変化しない*/
.tabItem.schedule.selectedItem:hover {
opacity:1;
-ms-filter: "alpha(opacity=100)"; /* IE 8,9 */
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
インタビュータブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.voiceItem .aTxt{
    font-size: 18px;
    margin-left: 20px;
    padding-bottom: 50px;
}

.q1 .aTxt{
    padding-top: 460px;
}

.q2 .aTxt{
    padding-top: 510px;
}

#sales .q2 .aTxt{
    padding-top: 455px;
}

#design .q2 .aTxt{
    padding-top: 455px;
}

.q3 .aTxt{
    padding-top: 440px;
}

#design .q3 .aTxt{
    padding-top: 420px;
}

.q4 .aTitle{
    padding-top: 230px;
    font-size: 24px;
    margin-left: 20px;
    margin-bottom: 30px;
    text-indent: -1em;
    padding-left:1em;
    line-height: 1.4;
}

.voiceItem .q5Title{
    background: url(../img/engineer_voice_05.png) no-repeat;
    height: 58px;
    padding-bottom: 25px;
}

.q5 .aTitle{
    color: #0c9d9d;
    padding-top: 20px;
    font-size: 24px;
    margin-left: 25px;
}

#support .q5 .aTitle,
#design .q5 .aTitle
{
    padding-top: 25px;
}

#clerk .q5 .aTitle,
#engineer .q5 .aTitle
{
    padding-top: 28px;
}

.q5 .aTxt{
    margin-left: 25px;
    padding-bottom: 14px;
    line-height: 1.7;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
タイムスケジュールタブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.scheduleItem{
    position: relative;
    font-size: 18px;
}

.scheduleItem p{
    position: absolute;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メニューへ戻るボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.menuBtnArea{
    background-color: #ffffff;
    padding-top: 50px;
}

.menuBtn{
    display: block;
    background: url(../img/menuBtn.png) no-repeat ;
    width:383px;
    height: 85px;
    margin: 0 auto;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
各部署によって変更が必要な箇所
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*━━━━━━━━━━━━━━━━
mainイメージ
━━━━━━━━━━━━━━━━*/

/*技術*/
#engineer .mainImg{
    background: url(../img/engineer_mainImg.png) no-repeat ;
}

/*デザイン*/
#design .mainImg{
    background: url("../img/design_mainImg.webp") no-repeat ;
    
    /*画像に合わせてサイズ調整*/
    /*width:840px;*/
    height: 689px;
}

/*管理部*/
#clerk .mainImg{
    background: url(../img/clerk_mainImg.png) no-repeat ;
}

/*プロダクトサポーター*/
#support .mainImg{
    background: url("../img/support_mainImg.png") no-repeat ;
}

/*営業職*/
#sales .mainImg{
    background: url("../img/sales_mainImg.webp") no-repeat ;
}

/*━━━━━━━━━━━━━━━━
voiceタブ
━━━━━━━━━━━━━━━━*/

/*━━Q1━━*/
/*技術*/
#engineer .voiceItem .q1{
    background: url(../img/engineer_voice_01.png) no-repeat;
}

/*デザイン*/
#design .voiceItem .q1{
    background: url("../img/design_voice_01.webp") no-repeat;
}

/*管理部*/
#clerk .voiceItem .q1{
    background: url(../img/clerk_voice_01.png) no-repeat;
}

/*プロダクトサポーター*/
#support .voiceItem .q1{
    background: url(../img/support_voice_01.png) no-repeat;
}

/*営業職*/
#sales .voiceItem .q1{
    background: url("../img/sales_voice_01.webp") no-repeat;
}

/*━━Q2━━*/
/*技術*/
#engineer .voiceItem .q2{
    background: url(../img/engineer_voice_02.png) no-repeat #cceded;
}

/*デザイン*/
#design .voiceItem .q2{
    background: url("../img/design_voice_02.webp") no-repeat #cceded;
}

/*管理部*/
#clerk .voiceItem .q2{
    background: url(../img/clerk_voice_02.png) no-repeat #cceded;
}

/*プロダクトサポーター*/
#support .voiceItem .q2{
    background: url(../img/support_voice_02.png) no-repeat #cceded;
}

/*営業職*/
#sales .voiceItem .q2{
    background: url("../img/sales_voice_02.webp") no-repeat #cceded;
}

/*━━Q3━━*/
/*技術*/
#engineer .voiceItem .q3{
    background: url(../img/engineer_voice_03.png) no-repeat;
}

/*デザイン*/
#design .voiceItem .q3{
    background: url("../img/design_voice_03.webp") no-repeat;
}

/*管理部*/
#clerk .voiceItem .q3{
    background: url(../img/clerk_voice_03.png) no-repeat;
}

/*プロダクトサポーター*/
#support .voiceItem .q3{
    background: url(../img/support_voice_03.png) no-repeat;
}

/*営業職*/
#sales .voiceItem .q3{
    background: url("../img/sales_voice_03.webp") no-repeat;
}

/*━━Q4━━*/
/*技術*/
#engineer .voiceItem .q4{
    background: url(../img/engineer_voice_04.png) no-repeat #cceded;
}

/*デザイン*/
#design .voiceItem .q4{
    background: url("../img/design_voice_04.webp") no-repeat #cceded;
}

/*管理部*/
#clerk .voiceItem .q4{
    background: url(../img/clerk_voice_04.png) no-repeat #cceded;
}

/*プロダクトサポーター*/
#support .voiceItem .q4{
    background: url(../img/support_voice_04.png) no-repeat #cceded;
    height: 637px;
}

/*営業職*/
#sales .voiceItem .q4{
    background: url("../img/sales_voice_04.webp") no-repeat #cceded;
}

/*━━Q5━━*/

.voiceItem .q5{
    background: #cceded;
    padding-bottom: 30px;
}

/*技術*/
#engineer .voiceItem .q5Inner{
    background: url(../img/engineer_voice_06.png) no-repeat;
    height: 488px;
    width: 688px;
    margin: 0 auto;
}

/*デザイン*/
#design .voiceItem .q5Inner{
    background: url("../img/design_voice_06.webp") no-repeat;
    height: 338px;
    width: 688px;
    margin: 0 auto;
}

/*管理部*/
#clerk .voiceItem .q5Inner{
    background: url(../img/clerk_voice_06.png) no-repeat;
    height: 487px;
    width: 689px;
    margin: 0 auto;
}

/*プロダクトサポーター*/
#support .voiceItem .q5Inner{
    background: url(../img/support_voice_06.png) no-repeat;
    height: 272px;
    width: 688px;
    margin: 0 auto;
}

/*営業職*/
#sales .voiceItem .q5Inner{
    background: url(../img/sales_voice_06.webp) no-repeat;
    height: 431px;
    width: 687px;
    margin: 0 auto;
}

/*━━━━━━━━━━━━━━━━
scheduleタブ
━━━━━━━━━━━━━━━━*/
/*技術*/
#engineer .scheduleItem{
    background: url(../img/interview_scheduleBg.jpg) no-repeat;
    height:3289px;
    width:736px;
}

#engineer .time_01{
    left: 428px;
    top: 54px;
}

#engineer .time_02{
    left: 40px;
    top: 948px;
}

#engineer .time_03{
    left: 40px;
    top: 1401px;
}

#engineer .time_04{
    left: 40px;
    top: 1920px;
}

#engineer .time_05{
    left: 40px;
    top: 2425px;
}

#engineer .time_06{
    left: 40px;
    top: 2935px;
}

#design .time_06{
    left: 450px;
    top: 2200px;
}

/*━━offの日━━*/

#engineer .offArea{
    background: url(../img/interview_schedule_offBg.jpg) no-repeat #cceded;
    height: 416px;
    width:736px;
    margin-top: 50px;
}

#engineer .offArea p{
    font-size: 18px;
    margin-left: 370px;
    padding-top: 200px;
}

/*デザイン*/
#design .scheduleItem{
    background: url("../img/design_scheduleBg.webp") no-repeat;
    height:2580px;
    width:736px;
}

#design .time_01{
    left: 428px;
    top: 24px;
}

#design .time_02{
    left: 40px;
    top: 565px;
}

#design .time_03{
    left: 445px;
    top: 920px;
}

#design .time_04{
    left: 445px;
    top: 1095px;
}

#design .time_05{
    left: 40px;
    top: 2030px;
}

/*━━offの日━━*/

#design .offArea{
    background: url("../img/design_schedule_offBg.webp") no-repeat #cceded;
    height: 387px;
    width:736px;
    margin-top: 50px;
}

#design .offArea p{
    font-size: 18px;
    margin-left: 370px;
    padding-top: 200px;
    line-height: 1.5;
}

/*管理部*/
#clerk .scheduleItem{
    background: url("../img/clerk_scheduleBg.webp") no-repeat;
    height:3384px;
    width:736px;
}

#clerk .time_01{
    left: 428px;
    top: 50px;
}

#clerk .time_02{
    left: 40px;
    top: 630px;
}

#clerk .time_03{
    left: 40px;
    top: 1115px;
}

#clerk .time_04{
    left: 40px;
    top: 1490px;
}

#clerk .time_05{
    left: 40px;
    top: 2050px;
}

#clerk .time_06{
    left: 40px;
    top: 2580px;
}

#clerk .time_07{
    left: 40px;
    top: 3060px;
}

#design .time_07{
    left: 40px;
    top: 2420px;
}

/*━━offの日━━*/

#clerk .offArea{
    background: url(../img/clerk_schedule_offBg.png) no-repeat #cceded;
    height: 429px;
    width:736px;
    margin-top: 50px;
}

#clerk .offArea p{
    font-size: 18px;
    margin-left: 370px;
    padding-top: 200px;
    line-height: 1.5;
}

/*プロダクトサポーター*/
#support .scheduleItem{
    background: url("../img/support_scheduleBg.webp") no-repeat;
    height:3131px;
    width:736px;
}

#support .time_01{
    left: 428px;
    top: 54px;
}

#support .time_02{
    left: 40px;
    top: 600px;
}

#support .time_03{
    left: 40px;
    top: 1060px;
}

#support .time_04{
    left: 40px;
    top: 1460px;
}

#support .time_05{
    left: 40px;
    top: 1970px;
}

#support .time_06{
    left: 40px;
    top: 2500px;
}

#support .time_07{
    left: 428px;
    top: 2980px;
}

/*━━offの日━━*/

#support .offArea{
    background: url(../img/support_schedule_offBg.png) no-repeat #cceded;
    height: 416px;
    width:736px;
    margin-top: 50px;
}

#support .offArea p{
    font-size: 18px;
    margin-left: 370px;
    padding-top: 200px;
}

/*営業職*/
#sales .scheduleItem{
    background: url("../img/sales_scheduleBg.webp") no-repeat;
    height:2360px;
    width:736px;
}

#sales .time_01{
    left: 40px;
    top: 300px;
}

#sales .time_02{
    left: 40px;
    top: 440px;
}

#sales .time_03{
    left: 40px;
    top: 1185px;
}

#sales .time_04{
    left: 385px;
    top: 1520px;
}

#sales .time_05{
    left: 40px;
    top: 2040px;
}

#sales .time_06{
    left: 40px;
    top: 2220px;
}

/*━━offの日━━*/

#sales .offArea{
    background: url("../img/sales_schedule_offBg.webp") no-repeat #cceded;
    height: 416px;
    width:736px;
    margin-top: 50px;
}

#sales .offArea p{
    font-size: 18px;
    margin-left: 370px;
    padding-top: 200px;
    line-height: 1.5;
}