@charset 'UTF-8';

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

メインビジュアル

-----------------------------------------------------------------------------*/
.mainvisual{
	text-align:center;
	padding:6em 0 8em;
	position:relative;
}
.mainvisual p img{
	max-width:45%;
}
@media screen and (max-width:768px){
.mainvisual{
	padding:4em 1.5em 6em;
}
.mainvisual p img{
	max-width:100%;
	}
}

.scroll {
  position: absolute;
  left: 2%;
  top: 50%;
}
@media screen and (max-width:768px){
.scroll {
  position: absolute;
  left: 0%;
  top: 85%;
	}
}


.scroll span{
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}

/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: 60px;
  content: "";
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

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

キャッチコピー

-----------------------------------------------------------------------------*/
.catchcopy_div{
	background:#3296FF;
	padding:12em 0 ;
	color:#fff;
}
.catchcopy_common{
	max-width:90%!important;
}
/*--タブレット--*/
@media all and (min-width: 769px) and (max-width: 1280px) {
.catchcopy_common{
	max-width:95%!important;
	}
}
@media screen and (min-width:1281px){
.catchcopy_common{
	max-width:880px!important;
	}
}
@media screen and (max-width:768px){
.catchcopy_div{
	padding:8em 0 ;
	}
}
.catchcopy_div .large_copy{
	font-size:2.2rem;
	font-weight:700;
	letter-spacing:2px;
}
@media screen and (max-width:768px){
.catchcopy_div .large_copy{
	font-size:1.7rem;
	}
}
.catchcopy_div dl dd{
	margin:5px 0 ;
	font-weight:700;
}

.firstTxt{
	margin:0 0 40px;
}
.secondTxt{
	margin:40px 0 0px;
}

.first_List{
	margin: 0 0 40px;
}
.second_List dd:last-child{
	margin: 40px 0 0px;
}

.first_List span{
	display:inline-block;
	width:200px;
}
@media screen and (max-width:768px){
.first_List span{
	display:block;
	width:100%;
	font-weight:700;
	margin:20px 0 0px ;
	}
}
.first_List , .second_List{
	font-size:.9rem;
}

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

アップロードで働く4つのメリット

-----------------------------------------------------------------------------*/
.merit_div{
	background:#F4F4F4;
	padding:12em 0 ;
}
@media screen and (max-width:768px){
.merit_div{
	padding:8em 0 ;
	}
}
.merit_div h2{
	font-weight:700;
	font-size:4em;
	color:#333;
}
@media screen and (max-width:768px){
.merit_div h2{
	font-size:2.5em;
	}
}


.listIcon{
	margin:60px 0 0 ;
	display:flex;
	justify-content:space-between;
}
@media screen and (max-width:768px){
.listIcon{
	margin:40px 0 0 ;
	display:flex;
	flex-wrap:wrap;
	}
}

.listIcon dl{
	margin: 0 0px;
	text-align:center;
}
@media screen and (max-width:768px){
.listIcon dl{
	margin: 10px 0px;
	width:calc(100% / 2);
	padding:20px 10px ;
	}
}

.listIcon dl dt{
	padding:0px 20px 0px;
}
.listIcon dl dt img{
	max-width:100%;
	}
@media screen and (max-width:768px){
.listIcon dl dt img{
	max-width:100%;
	}
}

/*
.blue_border{border-bottom:1px solid #6C7BFF;}
.green_border{border-bottom:1px solid #68D135;}
.yellow_border{border-bottom:1px solid #FFDC41;}
.pink_border{border-bottom:1px solid #EF7988;}
*/
.blue_border ,
.green_border ,
.yellow_border ,
.pink_border{
	border:none;
}

.listIcon dl dd{
	padding:30px 0 0;
	font-size:1.1rem;
	font-weight:700;
	line-height:1.3;
}
/*
.blue_color{color: #6C7BFF;}
.green_color{color:#68D135;}
.yellow_color{color:#FFDC41;}
.pink_color{color:#EF7988;}
*/
/*----------------------------------------------------------------------------

コンテンツ共通

-----------------------------------------------------------------------------*/
.commonBox{
	background:#fff;
	position:relative;

}
.main_contents_top{
	max-width:1080px;
	margin: 0 auto;
	position:relative;
	z-index:1;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.main_contents_top{
	max-width:95%;
	}
}
@media all and (max-width: 768px) {
.main_contents_top{
	max-width:90%;
	}
}


.titleImg img{
	max-width:100%;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.titleImg img{
	max-width:50%;
	}
}
@media all and (max-width: 768px) {
.titleImg img{
	max-width:100%;
	}
.training-img img{
	max-width:300px;
	}

}

/*------小見出し----------*/
.top_subtitle{
	font-weight:700;
}
/*-------見出し(voice以外)-----------*/
.titlemargin{
	margin:70px 0 ;
}
/*-------キャッチコピー---*/
.top_copy_text{
	font-weight:700;
	line-height:2;
	font-size:.9em;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.top_copy_text{
	max-width:50%;
	}
}
@media all and (max-width: 768px) {
.top_copy_text{
	max-width:100%;
	}
}
/*------色味指定---------*/
.company_color{color:#3296FF;}
.carrerpath_color{color:#6C7BFF;}
.training_color{color:#68D135;}
.interview_color{color:#FF8C00;}
.voice_color{color:#EF7988;}
/*------ボタン設定--------*/
.btn_action{
	margin:80px 0 ;

}

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

カンパニー

-----------------------------------------------------------------------------*/
.companyonly{
	padding:15em 0 21em;
	position:relative;
	z-index:1;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.companyonly{
	padding:15em 0 5em;
	}

}

@media all and (max-width: 768px) {
.companyonly{
	padding:8em 0 20em;
	}
}
.companyonly::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	background:#CEE6FF;
	height:55%;
	width:80%;
}
.companyonly::after{
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	background:url(../images/company_bg.jpg) no-repeat 100% 350px ;
	background-size:45%;
	height:100%;
	width:100%;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.companyonly::before{
	height:72%;
	width:90%;
}
.companyonly::after{
	background:url(../images/company_bg.jpg) no-repeat 100% 350px ;
	background-size:45%;
	}
}
@media all and (max-width: 768px) {
.companyonly::before{
	height:100%;
}
.companyonly::after{
	background:url(../images/company_bg.jpg) no-repeat 100% 100% ;
	background-size:100%;
	}
}


.color_company_btn a{
	background:#3296FF;
}
/*----------------------------------------------------------------------------

キャリアパス

-----------------------------------------------------------------------------*/
.carrerpathonly{
	padding:15em 0 5em;
	background:url(../images/career_bg.png) no-repeat 100% 30% #fff;

}
@media all and (min-width: 769px) and (max-width: 1280px) {
.carrerpathonly{
	padding:5em 0 5em;
	background:url(../images/career_bg.png) no-repeat 100% 100% ;
	background-size:45%;
	}
}
@media all and (max-width: 768px) {
.carrerpathonly{
	padding:8em 0 25em;
	background:url(../images/career_bg_sp.png) no-repeat 0% 100% ;
	background-size:100%;
	}
}

.carrerpath_btn_position{
	max-width:400px;
	margin: 80px 0 0 0;
}
@media all and (max-width: 768px) {
.carrerpath_btn_position{
	max-width:100%;
	}
}
.carrerpath_btn a{
	background:#6C7BFF;
}
.carrerImg{
	text-align:left;

}
.carrer_bg span{
	background:none;
	display:inline-block;
	padding:0 0em;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.carrer_bg span{
	background:none;
	display:block;
	padding:0 0em;
	}
}

.carrerpath_text{
	max-width:400px;
}
@media all and (max-width: 768px) {
.carrerpath_text{
	max-width:100%;
	margin: 0 auto;
	}
}
.carrerpath-margin{
	margin:-180px 0 0; 
}
@media all and (max-width: 768px) {
.carrerpath-margin{
	margin:0px 0 0; 
	}
}
/*----------------------------------------------------------------------------

トレーニング

-----------------------------------------------------------------------------*/
.trainingonly{
	padding:15em 0 15em;
	background:url(../images/training_bg.png) no-repeat 0% 0% #fff;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.trainingonly{
	padding:7em 0 7em;
	background:url(../images/training_bg.png) no-repeat 0% 0% ;
	background-size:50%;
	}
}
@media all and (max-width: 768px) {
.trainingonly{
	padding:7em 0 23em;
	background:url(../images/training_bg_sp.png) no-repeat 100% 100% ;
	background-size:100%;
	}
}

.training_btn_position{
	max-width:400px;
	margin: 80px 0 0 auto;
}
@media all and (max-width: 768px) {
.training_btn_position{
	max-width:100%;
	margin: 80px 0 0 auto;
	}
}

.training_btn a{
	background:#68D135;
}

.trainingImg{
	text-align:right;
}
@media all and (max-width: 768px) {
.trainingImg{
	text-align:left;
	}
}

.training_text{
	max-width:500px;
	text-align:left;
	margin:0 0 0 auto;
}
.training_margin{
	max-width:500px;
	text-align:left;
	margin:80px 0 0 auto;
}
@media all and (max-width: 768px) {
.training_margin{
	max-width:90%;
	margin:80px 0 30px 0;
	}

}


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

インタビュー

-----------------------------------------------------------------------------*/
.interviewonly{
	padding:25em 0 25em;
	background:url(../images/interview_bg.jpg) no-repeat 0% 50% #fff;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.interviewonly{
	padding:15em 0 15em;
	background:url(../images/interview_bg.jpg) no-repeat 0% 50% ;
	background-size:50%;
	}
}
@media all and (max-width: 768px) {
.interviewonly{
	padding:7em 0 30em;
	background:url(../images/interview_bg_sp.jpg) no-repeat 0% 100% #f8f8f8;
	background-size:100%;
	}
}

.interview_btn_position{
	max-width:500px;
	margin: 80px 0 0 auto;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.interview_btn_position{
	max-width:480px;
	margin: 80px 0 0 auto;

	}
}

.interview_btn a{
	background:#FF8C00;
}
.interviewImg{
	text-align:right;
}

.interview_text{
	max-width:400px;
	margin: 0 100px 0 auto;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.interview_text{
	max-width:480px;
	margin: 0 0px 0 auto;
	}
}
@media all and (max-width: 768px) {
.interview_text{
	max-width:100%;
	margin: 0 0px 0 auto;

	}

}
.interview_margin{
	margin:-55px 0 50px;
}

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

ボイス

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


.titleImg_voice img{
	max-width:100%;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.titleImg_voice img{
	max-width:85%;
	}
}
@media all and (max-width: 768px) {
.titleImg_voice img{
	max-width:200px;
	}
}

.voiceonly{
	padding:5em 0 10em;
	background: linear-gradient(180deg, #fff 0%, #fff 750px, #CEE6FF 750px, #CEE6FF 100%);
}
@media all and (max-width: 768px) {
.voiceonly{
	padding:5em 0;

	}
}

.voice_title{
	display:flex;
	align-items:end;
	justify-content:center;
}
.voiceImg{
	padding:70px 20px 70px 0;
}
.voice_text{
	max-width:400px;
	margin: 0 auto;
}

.voice_detail{
	margin: 120px auto 0px;
	display:flex;
}


.voice_detail .detail{
	background:#fff;
	margin:20px 10px ;
	position:relative;
}




@media all and (min-width: 769px) and (max-width: 1280px) {
.voice_detail .detail{
	width:calc(90% / 3);
	}
}
@media all and (max-width: 768px) {
.voice_detail{
	flex-wrap:wrap;
	justify-content:space-between;
}
.voice_detail .detail{
	margin:10px 0 ;
	width:calc(95% / 2);
	}
}

.voice_jobName{
	font-size:.9rem;
	padding:25px 60px 0px;
	font-weight:700;
	margin: 0 auto;
}
@media all and (max-width: 768px) {
.voice_jobName{
	text-align:left;
	max-width:90%;
	margin: 0 auto;
	padding:25px 0px 0px;
	}
}
.detail dl{
	padding:0 0 20px;

}
.detail dl dt{
	font-size:1rem;
	max-width:210px;
	margin: 0 auto;

}
@media all and (max-width: 768px) {
.detail dl dt{
	max-width:90%;
	}
}

.detail dl dt span{
	font-weight:500;

}
.detail dl dd{
	font-size:.7rem;
	max-width:95%;
	text-align:right;
	padding:0 0px 0 0;

}
.detail dl dd span{
	font-size:1.3rem;
	display:inline-block;
	margin:0 0 0 .3em;
}
@media all and (max-width: 768px) {
.detail dl dd span{
	font-size:1rem;
	}
}

.detail dl dd p{
	border-bottom:1px solid #333;
	display:inline-block;
	}
.circle {
	width: 70px;
	height: 70px; 
	background:#EF7988;
	border-radius: 50%; 
	margin: 0 auto;/* ←円を中央揃え */
	text-align: center;/* ←文字を左右に中央揃え */
	line-height: 70px;/* ←文字を上下に中央揃え */
	color:#fff;
	position:absolute;
	left:10px;
	top:10px;
	font-size:.8rem;
}
@media all and (max-width: 768px) {
.circle {
	width: 43px;
	height: 43px; 
	line-height: 43px;/* ←文字を上下に中央揃え */
	font-size:.6rem;
	left:5px;
	top:5px;
	}
}

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
	margin:0 0 120px;
}
@media all and (max-width: 768px) {
.cp_box {
	margin:0 0 30px;
	}
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 140px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: #CEE6FF;

}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 45%;
	width: 100%;
	font-family:"ヒラギノ角ゴ Pro W3"!important;
/*	font-family:"Century Gothic", sans-serif;*/
	content: '+'' 　MORE';
	transform: translate(-45%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 0px;
	background-color:#3296FF;
	padding:40px 0;
	font-size:1.1rem;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 250px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family:"ヒラギノ角ゴ Pro W3"!important;
	content: '-'' CLOSE';

}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 180px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.3s;
}

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

ボタン設定

-----------------------------------------------------------------------------*/
/*== ボタン共通設定 */
.btn_top{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;


    padding: 10px 45px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn_top span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	font-size:.8em;

}

.btn_top:hover span{
	color:#fff;

}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#333;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

.post02 {
	display: block;
	margin: 0px 0px 0px 0;
	text-decoration: none;
	padding: 0 0 0px;
	color:#333;
}


.post02 .image {
	height: auto;
	overflow: hidden;
	display:block;
}

.post02 .image img {
	max-width: 100%;
	height: auto;
	transition: .3s;
}

.post02:hover .image img {
	transform: scale(1.1);
}