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

/*=========================
　　　　基本設定
===========================*/
body {
	font-family:"メイリオ", Meiryo, sans-serif;
    margin:0;
    padding:0;
	-webkit-overflow-scrolling: touch;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 1.6;
}
a,a:hover{
	text-decoration:none;
	border:0;
}	
h1,h2,h3,h4,h5,h6,p{
	padding:0;
	margin:0;
}	
ul,li{
    margin:0;
    padding:0;
	list-style:none;
}
a img{
	border:0;	
}
img{
    max-width:100%;
    height:auto;
}

/* 共通クラス */
.container{
	width:1080px;
	margin:0 auto;
    display:block;
}

.block-left{
    float:left;
}
.block-right{
	float:right;
}
.clear{
	clear:both;
}
.SP{
    display:none;
}

.font_10{font-size: 10px;}
.font_12{font-size: 12px;}
.font_14{font-size: 14px;}
.font_16{font-size: 16px;}
.font_18{font-size: 18px;}
.font_20{font-size: 20px;}
.font_22{font-size: 22px;}
.font_28{font-size: 28px;}
.font_32{font-size: 32px;}
.font_36{font-size: 36px;}
.font_b{font-weight: bold;}

.text_left{text-align: left;}
.text_center{text-align: center;}
.text_right{text-align: right;}

.color_red{
    color: #FF0000;
}

.margin_t_10{margin-top:10px!important;}
.margin_t_20{margin-top:20px!important;}
.margin_t_30{margin-top:30px!important;}
.margin_t_40{margin-top:40px!important;}
.margin_t_50{margin-top:50px!important;}
.margin_t_60{margin-top:60px!important;}
.margin_t_100{margin-top: 100px!important;}

.margin_b_10{margin-bottom:10px!important;}
.margin_b_20{margin-bottom:20px!important;}
.margin_b_30{margin-bottom: 30px!important;}
.margin_b_40{margin-bottom: 40px!important;}
.margin_b_50{margin-bottom: 50px!important;}
.margin_b_60{margin-bottom: 60px!important;}
.margin_b_70{margin-bottom: 70px!important;}
.margin_b_100{margin-bottom: 100px!important;}

#pageTop {
  position: fixed;
  bottom: 30px;
  right: 10%;
	z-index: 10;
}

/*=========================
　　　　エフェクト
===========================*/
/*---一瞬点滅----*/
.hvr-flash img:hover{
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
/*---くるくる----*/
#header_entry_button {
    overflow: hidden;
}
#header_entry_button img:hover {
    -webkit-transform:	rotate(360deg);
	transform:	rotate(360deg);
}
#header_entry_button img {
    -webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
}
/*---くるりん----*/
.fruit-name {
    overflow: hidden;
}
.fruit-name:hover {
    -webkit-transform:	rotateY(360deg);
	transform:	rotateY(360deg);
}
.fruit-name, .fruit-name:hover {
    -webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
}
/* Float （浮く）*/
.hvr-float {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

/*=========================
　　　　ヘッダー
===========================*/
#header{
    position: relative;
}
#header_top{
    padding: 10px 0;
}
#header_logo, #header_recruit_text{
    display: inline-block;
}
#header_logo{
    width: 345px;
    margin-left: 30px;
    vertical-align: middle;
}
#header_recruit_text{
    margin-left: 20px;
    vertical-align: super;
}
#header_bottom{
    position: relative;
}
#header_bg, #header_bg img{
    z-index: -1;
    width: 100%;
    font-size: 0;
}
#header_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
#header_text img{
    width: 100%;
}
#header_entry_button{
    position: absolute;
    right: 5%;
    top: 4%;
}

/*=========================
　　　　メッセージ
===========================*/
#message{
    margin-bottom: 250px;
}
#message_contents{
    position: relative;
}
#message_left{
    width: 60%;
}
#president_img img{
    width: 100%;
}
#president_name{
    margin-top: 10px;
    margin-right: 20%;
}
#message_right{
    width: 44%;
    position: absolute;
    right: 0;
    top: 15%;
    background-color: #FFF;
    padding: 25px 30px;
    box-shadow:3px 4px 6px -2px #000000;
    line-height: 1.7;
}

/*=========================
　　　　トップ背景エリア
===========================*/
#top_bg_area{
    background: url(img/top_bg_area.jpg) center center / cover no-repeat fixed;
}
.top_bg_contents{
    padding-left: 120px;
}
.about_text,.we_want_you_text{
    background-color: rgba(0,0,0,0.4);
    color: #FFF;
    font-size: 26px;
    width: 100%;
    padding: 15px 35px;
    box-sizing: border-box;
}
.we_want_you_text{
    width: 475px;
}

/*=========================
　　　　募集要項
===========================*/
#career_guide_left, #career_guide_right{
    width: 47%;
}
.career_guide_text{
    font-size: 28px;
    text-align: center;
    padding: 70px 0;
	display: block;
	color: #000;
}
#career_guide_left .career_guide_text{
    background-color: #E8FBFF;
    border: solid 10px #00CCFF;
}
#career_guide_left .career_guide_text:hover{
    background-color: #00CCFF;
    border: solid 10px #E8FBFF;
	color: #fff;
}
#career_guide_right .career_guide_text{
    background-color: #FFE7E9;
    border: solid 10px #FD1425;
}
#career_guide_right .career_guide_text:hover{
    background-color: #FD1425;
    border: solid 10px #FFE7E9;
	color: #fff;
}

.top_interview_button .career_guide_text{
    background-color: #33CC66;
    border: solid 10px #006600;
    color: #FFF;
}
.top_interview_button .career_guide_text:hover{
    background-color: #006600;
    border: solid 10px #33CC66;
}

/*=========================
　　　　社員インタビュー
===========================*/
.people_left, .people_right{
    width: 47%;
	margin-bottom: 70px;
}
/*=========================
　　　フッター
===========================*/
#footer{
    background: #FD1425;
    padding: 35px 0 20px 0;
	color: #fff;
}
#foot_l{
	margin-right: 20px;
	padding-right: 25px;
	border-right: solid 1px #fff;
}
.inline_style{font-size: 0;}
.inline_style li{
	display: inline-block;
}
#foot_r li{
	vertical-align: top;
	margin-bottom: 10px;
	margin-right: 15px;
	font-size: 14px;
}
.foot_ad1{width: 65px;}
.foot_ad2{width: 230px;}
.foot_ad3{width: 320px;}
#foot_btn{
	display: block;
	text-align: center;
	border: solid 1px #fff;
	padding: 5px 0;
	color: #fff;
}
#foot_btn:hover{
	background: #fff;
	color: #FD1425;
}
#copyright{
	text-align: center;
	font-size: 12px;
	color: #666666;
	padding: 7px 0;
}
.policy_btn{
	display: inline-block;
	margin-right: 2%;
	font-size: 13px;
	color: #fff;
	padding-left: 13px;
	background: url("img/arrow02.png")no-repeat left top;
}
.foot_policy{
	text-align: right;
}

/*=========================
　　　インタビューページ
===========================*/
#interview #header{
	border-bottom: solid 1px #CCCCCC;
}
#interview #header_entry_button{
	right: 20%;
	top: 20px;
}
#interview_main_img{
	margin-bottom: 40px;
}
.interview_l{width: 475px;}
.interview_r{width: 540px;}
.interview_time_l{
	width: 65px;
}
.interview_time_r{
	width: 455px;
	padding: 0 0 30px 0;
}
.inline_cent{
	display: inline-block;
	vertical-align: middle;
}
.inline_top{
	display: inline-block;
	vertical-align: top;
}
.interview_block{margin-bottom: 30px;}
.interview_q2{
	color: #666666;
	margin-left: 1%;
	width: 360px;
}
.interview_text{
	margin: 10px 0 10px 6%;
}
.interview_time_r p{
	color: #666666;
	padding: 10px 0;
	margin-bottom: 15px;
	border-bottom: solid 1px #CCCCCC;
}
.interview_time_r li{
	list-style: disc;
	margin: 5px 0 5px 20px;
}
#interview_slide{
	margin-top: 50px;
}

/*=========================
　　　エントリー
===========================*/
.entry_title{
	font-size: 31px;
	padding: 25px 0 5px 30px;
	margin: 50px 0;
	font-weight: normal;
}
.entry_new{
	border-left: solid 10px #00CCFF;
}
.entry_chuto{
	border-left: solid 10px #FF6699;
}
.entry_table{
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 30px;
	width: 100%;
}
.entry_table th, .entry_table td{
	border: solid 1px #999999;
	padding: 5px 2%;
}
.entry_table th{
	vertical-align: top;
	font-weight: normal;
	text-align: left;
	background: #F4F4F4;
	width: 20%;
}
.entry_table li{
	list-style: decimal;
	margin: 0 0 5px 25px;
}
.entry_btn a{
	display: block;
	text-align: center;
	padding: 25px 0 17px 0;
	width: 80%;
	margin: 50px auto 80px auto;
}
.entry_new_btn a{background: #00CCFF;}
.entry_new_btn a:hover{background: #82E6FF;}
.entry_chuto_btn a{background: #FF6699;}
.entry_chuto_btn a:hover{background: #FFBBD1;}

/*=========================
　　　FAQ
===========================*/
#faq_menu_area{
    background: #FF0000;
}
#faq_menu li{
    display: inline-block;
    margin: 10px 15px 8px 0;
}

.accordion-title {
    background-color: #FF6666;
    font-size: 16px;
    padding: 20px 25px;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: #FFF;
    border-bottom: 1px solid #FFF;
}
.accordion-title::before, .accordion-title::after {
    content: '';
    display: block;
    background-color: #fff;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    right: 25px;
}
.accordion-title::after {
    transform: rotate(90deg);
    transition-duration: .3s;
}
.accordion-title:hover,
.accordion-title:active,
.accordion-title.is-active { 
    background-color: #FF9999;
}
.accordion-title:active,
.accordion-title.is-active {
    border-bottom: none;
}
.accordion-title.is-active::before {
    opacity: 0;
}
.accordion-title.is-active::after {
    transform: rotate(0);
}
.accordion-content {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition-duration: .3s;
}
.accordion-content a{
    color: #0000FF;
    text-decoration: underline;
}
.accordion-content.is-open {
    border: 1px solid #FF9999;
    padding: 20px 25px;
    line-height: normal; /* numberに書き換える*/
    height: auto;
    opacity: 1;
}

/*===========================================================================
　　レスポンシブ設定
=============================================================================*/

   /*=====タブレット=====*/
@media(max-width:979px){
    .PC{
		display: none!important;
	}
    .TAB{
        display: block;
    }
    .container{
	   width: 95%;
    }
	#pageTop {
		right: 3%;
	}
    
    /*----ヘッダー----*/
    #header_logo, #header_recruit_text{
        width: 45%;
    }
    #header_logo{
        margin-left: 0;
    }
    #header_entry_button{
        top: 10%;
        width: 15%;
    }
	
	/*----フッター----*/
	#foot_l{
		display: block;
		margin: 0 0 20px 0;
		padding: 0 0 25px 0;
		border-right: 0;
		border-bottom: solid 1px #fff;
		text-align: center;
	}
	#foot_r{display: block;}
	#foot_btn{
		width: 277px;
		margin: 0 auto;
	}
    
    /*----メッセージ----*/
    #message{
        margin-bottom: 150px;
    }
    #message_left{
        width: 100%;
    }
    #message_right{
        width: 90%;
        position: static;
        padding: 25px 5%;
    }
    #president_name{
        margin: 10px 0;
        text-align: center;
    }
	#message_left, #message_right, #president_name{
		float: none;
	}
    
    /*----募集要項----*/

    .career_guide_text{
        margin-bottom: 40px;
    }
    
    /*----社員インタビュー----*/
    .people_left, .people_right{
        width: 48%;
		margin-bottom: 25px;
    }
	.interview_q{width: 20%;}
	.interview_q2{width: 75%;}
	
	/*----インタビューページ----*/
	#interview #header_entry_button{
		right: 1%;
		top: 70px;
	}
	.interview_l{width: 45%;}
	.interview_r{width: 50%;}
	.interview_time_r{width: 75%;}
}

   /*=====スマホ=====*/
@media (max-width:759px){
    .PC_TAB{
        display: none;
    }
    .SP{
        display: block;
    }
    
    /*----ヘッダー----*/
    #header_entry_button{
        top: 15%;
        width: 20%;
    }
	
	/*----フッター----*/
	#foot_r ul{margin: 20px 0;}
	#foot_r li{
		display: block;
		margin: 0 0 5px 0;
		width: 100%;
	}
	
	/*----トップページ----*/
	.people_left, .people_right{
		margin-bottom: 20px;
	}
    
    /*----トップ背景エリア----*/
    .top_bg_contents{
        padding-left: 0;
    }
    .about_text,.we_want_you_text{
        font-size: 18px;
        padding: 15px 25px;
        width: 100%;
    }
	
	/*----インタビューページ----*/
	.interview_l, .interview_r, #career_guide_left, #career_guide_right, .people_left, .people_right{
		width: 100%;
		float: none;
	}
	.interview_l{
		margin-bottom: 60px;
	}
	#interview #header_entry_button{top: 65%;}
	
	
	/*-----エントリー-----*/
	.entry_table th{width: 30%;}
	.entry_btn a{
		width: 95%;
		margin: 30px auto 80px auto;
	}
}