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

.onlypc{}
.onlysp{ display: none;}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 共通 */
/*　カラー：グリーン　#00AF9A　*/
/*　カラー：グレー　#536278　*/
body#page_employment_newgrads{ background: #fff}

article#newgrads { margin: 0 auto; background: #fff;

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight:900;}

article#newgrads{color: #536278; overflow: hidden;}
article#newgrads p{line-height: 140%;}
article#newgrads h4{font-size: 24px; line-height: 140%;font-family: "Montserrat", sans-serif; font-weight: 900; color: #00AF9A; padding-bottom: 20px;}
article#newgrads h3{font-size: 40px; line-height: 140%; font-weight: 800; color: #333;}
article#newgrads p{font-size: 16px; line-height: 140%;}

/* スクロール写真 */


:root{
  --gap: 16px; /* 画像間のスペース */
  --img-height: 250px; /* 画像の高さ */
  --speed-px-per-sec: 100; /* ピクセル毎秒 */
}
.marquee-wrap{width:100%;overflow:hidden;}
.marquee-track{display:flex;align-items:flex-end;gap:var(--gap);will-change:transform;}
.marquee-item{display:flex;align-items:flex-end;}
.marquee-item img{height:var(--img-height);width:auto;display:block;object-fit:cover;transform:translateY(var(--offset, 0));}


/* メインビジュアル */
#newgrads_KV{max-width: 1980px;margin:0 auto;}

#newgrads_job {}
#newgrads_job h4{ text-align: center; padding: 20px;}
#newgrads_job h3{ text-align: center;}

#newgrads_job .newgrads_jobBox{ height: 760px; position: relative;
	background:url('/files/user/feeco/celsys_img/img_employment_newgrads/celsysline_kv_x2.png') no-repeat center 30px; background-size: auto 587px;}
#newgrads_job .newgrads_jobBox .newgrads_LeadBox{ max-width: 1100px; margin: 0 auto; position: relative;}
#newgrads_job .newgrads_jobBox .newgrads_LeadBoxWrap{ max-width: 800px; position: absolute; top: 120px;right: 20px; }
#newgrads_job .newgrads_jobBox .newgrads_LeadBox p{ font-size: 24px; height: 140%; font-weight:600; color: #000; padding-bottom: 30px;}
#newgrads_job .newgrads_jobBox .newgrads_LeadBox p strong{background: linear-gradient(transparent 60%, #ffc4c4 60%);}

#newgrads_job .newgrads_jobBox #photoScroll{position: absolute;bottom: 0;left:auto; right: auto;}



/* work */
#newgrads_workIntro{ max-width:1040px; padding: 0 20px; margin: 100px auto 0;}
#newgrads_workIntro h4{ font-size: 32px; padding-bottom: 5px;}
#newgrads_workIntro h3{ padding-bottom: 30px;}
#newgrads_workIntro div{ width: 50%; float: left;}
#newgrads_workIntro div p{ padding-bottom: 20px;}
#newgrads_workIntro div p strong.marker{background: linear-gradient(transparent 60%, #ffc4c4 60%); font-size: 24px; line-height: 36px; margin-top: 10px;}
article#newgrads #newgrads_workIntro .newgrads_LeadBox p{padding-bottom: 20px;}
/* work phase*/
#newgrads_workPhase {margin: 100px auto;}

#newgrads_workPhase {background:url('/files/user/feeco/celsys_img/img_employment_newgrads/workPhase_line.png')  repeat-x top;}


#newgrads_workPhase div.newgrads_phase_zu{ max-width: 1280px; margin: 50px auto 0; padding-bottom: 64px;}
#newgrads_workPhase div.newgrads_phase_zu ol{ margin: 20px; height: 500px; display: flex;
	background:url('/files/user/feeco/celsys_img/img_employment_newgrads/workPhase_circle.png') no-repeat top; background-size: 100%;}



#newgrads_workPhase div.newgrads_phase_zu ol li{ width: 33.3333%; position: relative;}
#newgrads_workPhase div.newgrads_phase_zu ol li h4{ position: absolute; left:10px; font-size: 30px;}
#newgrads_workPhase div.newgrads_phase_zu ol li h5{ position: absolute; top: 90px; font-size: 30px;
	font-weight:bold;text-align: center; width: 100%;}
#newgrads_workPhase div.newgrads_phase_zu ol li figure{ position: absolute; top: 100px; text-align: center; width: 100%; text-align: center;}
#newgrads_workPhase div.newgrads_phase_zu ol li figure img{ max-width:200px;}
#newgrads_workPhase div.newgrads_phase_zu ol li strong{ display: block; font-size: 16px; position: absolute; top:300px; text-align: center; width: 100%;}
#newgrads_workPhase div.newgrads_phase_zu ol li div{ position: absolute; top: 450px; width:100%; text-align: center;}
#newgrads_workPhase div.newgrads_phase_zu ol li div p{ width: 300px; margin: 10px auto;padding: 0; font-size: 14px; text-align: left;}

#newgrads_workPhase div.newgrads_phase_zu ol li div img.clipstudioLogo{ display: block; margin: 0 auto;width: 180px;}

#newgrads_workPhase div.newgrads_phase_zu figure{ max-width: 1280px; margin: 50px auto;}
#newgrads_workPhase div.newgrads_phase_zu figure img{ width: 100%;}

#newgrads_workPhase div#newgrads_work_phase01{ background-color: #d8eeeb; padding: 50px 0;}
#newgrads_workPhase div#newgrads_work_phase01 section.newgrads_work_phaseBox .newgradsBox div figure{ background-color: #d8eeeb;}
#newgrads_workPhase div#newgrads_work_phase02{ background-color: #f0f7f2; padding: 50px 0;}
#newgrads_workPhase div#newgrads_work_phase02 section.newgrads_work_phaseBox .newgradsBox div figure{ background-color: #f0f7f2;}
#newgrads_workPhase div#newgrads_work_phase03{ background-color: #fdfcf8; padding: 50px 0;}
#newgrads_workPhase div#newgrads_work_phase03 section.newgrads_work_phaseBox .newgradsBox div figure{ background-color: #fdfcf8;}

#newgrads_workPhase section.newgrads_work_phaseBox{ max-width:1040px; padding: 0 20px; margin: 0 auto;}
#newgrads_workPhase section.newgrads_work_phaseBox h4{}
#newgrads_workPhase section.newgrads_work_phaseBox h3{}
#newgrads_workPhase figure.newgrads_mIcon{ width: 280px; height: 160px; margin: 10px 0 10px 50px;}
#newgrads_workPhase figure.newgrads_mIcon img{ width:100%;}

#newgrads_workPhase section.newgrads_work_phaseBox .left {width: 380px; float: left; padding-top: 50px;}
#newgrads_workPhase section.newgrads_work_phaseBox .left figure{ max-width: 1500px; margin: 50px auto;}
#newgrads_workPhase section.newgrads_work_phaseBox .left figure img{ max-width:100%;}
#newgrads_workPhase section.newgrads_work_phaseBox .left p{ font-size: 16px; line-height: 28px;}

#newgrads_workPhase section.newgrads_work_phaseBox .right { width: 600px;float: right;}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsWrap{
column-count: 2;      /* 2列にする */
  column-gap: 20px;     /* 列間の余白 */
}
/* Phaseの白い背景 */
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox {
  display: block;
  width: 290px;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
  break-inside: avoid;
	border-radius: 4px;
  -webkit-column-break-inside: avoid;
}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox div{ padding-bottom: 10px; display: flex;
  align-items: center;     /* 縦方向の中央 */}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox div figure{ width: 64px;border-radius: 5px;}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox div figure img{ width: 100%;}
#newgrads_workPhase section.newgrads_work_phaseBox h5{ font-size: 18px; font-weight:bold; padding-left: 10px;}

#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox ul {display: flex; flex-wrap: wrap;gap: 10px; margin: 10px 0;}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox ul li{}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox ul li a{display: block; padding: 0px 15px; background: #536278;border-radius: 20px; color: #fff; font-weight: 500;}
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox p{ padding-top: 10px;}
	


/* Voice */
section#newgrads_voice{margin: 60px auto 0;}
section#newgrads_voice h4{text-align: center; padding: 5px;}
section#newgrads_voice h3{text-align: center;}
section#newgrads_voice .newgrads_voiceBox{ margin: 50px auto 0; padding: 0 20px 90px 20px;
	background:url('/files/user/feeco/celsys_img/img_employment_newgrads/celsysline_voice_x2.png') no-repeat center 125px; background-size: auto 370px;}

section#newgrads_voice .newgrads_voiceBox ul{max-width:1280px;margin: 0 auto; display: flex; flex-wrap: wrap;}
section#newgrads_voice .newgrads_voiceBox ul li{ width:25%; padding: 0 10px; box-sizing: border-box;}
section#newgrads_voice .newgrads_voiceBox ul li:nth-child(odd) { margin-top: 20px;}
section#newgrads_voice .newgrads_voiceBox ul li figure{ margin: 0 auto;position: relative;max-width:300px; height: 380px; border-radius: 5px; overflow: hidden;background:url('/files/user/feeco/celsys_img/img_employment_newgrads/voice_bg.jpg') no-repeat center bottom; background-size: 300px;}
section#newgrads_voice .newgrads_voiceBox ul li figure img{ width: 100%; display: block; position: absolute; bottom: 0;}
section#newgrads_voice .newgrads_voiceBox ul li figure figcaption{ padding: 20px; font-size: 16px; color: #00AF9A; font-weight: bold;}
section#newgrads_voice .newgrads_voiceBox ul li p{ margin-top: 10px;}
section#newgrads_voice .newgrads_voiceBox ul li p strong{ font-weight: bold;}
section#newgrads_voice .newgrads_voiceBox ul li p span{font-size: 12px;}
section#newgrads_voice .newgrads_voiceBox ul li p.white{ color: #fff;}



/* 共通エリア */
div.newgrads_CntBox{ max-width:1040px; padding: 0 20px; margin: 0 auto;}
div.newgrads_CntBox h4{ font-size: 20px; padding-bottom: 30px;}
div.newgrads_CntBox h3{ padding-bottom: 30px;}
div.newgrads_CntBox img{ max-width: 100%;}
	
/* 共通エリア(福利厚生・制度) */
section#newgrads_fukuri{ padding: 50px 0;}
section#newgrads_fukuri dl{ width: 47%; margin-top: 50px;}
section#newgrads_fukuri dl.left{ float: left;}
section#newgrads_fukuri dl.right{ float: right;}
section#newgrads_fukuri dl dt{ padding-top: 10px;}
section#newgrads_fukuri dl dt p{ padding: 5px 0; color: #00AF9A; font-weight: bold; font-size: 18px;}
section#newgrads_fukuri dl dd{border-bottom: 1px solid #d7efeb; padding-bottom: 10px;}
section#newgrads_fukuri dl dd p{ padding: 5px 0; font-weight: bold;}
section#newgrads_fukuri dl dd li{text-indent:-1.5em; margin-left: 1.5em; }
section#newgrads_fukuri dl dd ul li::before{content: "■";color: #00AF9A;margin-right: 6px;}

/* 共通エリア(応募資格) */
section#newgrads_oubo{ padding: 50px 0;}
section#newgrads_oubo dl{ display: flex; flex-wrap: wrap;}
section#newgrads_oubo dl dt{ width: 20%; border-bottom: 1px solid #d7efeb;}
section#newgrads_oubo dl dt p{ padding: 15px 0; color: #00AF9A; font-weight: bold; font-size: 18px;}
section#newgrads_oubo dl dd{ width: 80%; border-bottom: 1px solid #d7efeb;}
section#newgrads_oubo dl dd p{ padding: 15px 0;}

/* 共通エリア(選考の流れ) */
section#newgrads_senkou{ padding: 50px 0;}
section#newgrads_senkou figure img{max-width: 100%; padding-bottom: 10px;}
section#newgrads_senkou dl dt{ padding-top: 10px;}
section#newgrads_senkou dl dt p{ padding: 5px 0; color: #00AF9A; font-weight: bold; font-size: 18px;}
section#newgrads_senkou dl dd li{text-indent:-1.5em; margin-left: 1.5em; }
section#newgrads_senkou dl dd ul li::before{content: "■";color: #00AF9A;margin-right: 6px;}

/* 共通エリア(勤務条件) */
section#newgrads_kinmu{ padding: 50px 0;}
section#newgrads_kinmu dl{ display: flex; flex-wrap: wrap;}
section#newgrads_kinmu dl dt{ width: 20%; border-bottom: 1px solid #d7efeb;}
section#newgrads_kinmu dl dt p{ padding: 15px 0; color: #00AF9A; font-weight: bold; font-size: 18px;}
section#newgrads_kinmu dl dd{ width: 80%; border-bottom: 1px solid #d7efeb;}
section#newgrads_kinmu dl dd p{ padding: 15px 0;}

/* 写真イメージ */
section.newgrads_photo { max-width: 1980px; margin: 50px auto;}
section.newgrads_photo figure{}
section.newgrads_photo img{width: 100%;}

/* 募集職種 */
section#newgrads_recruit { max-width: 1600px; margin: 100px auto; }
section#newgrads_recruit .newgradsWrap{}
section#newgrads_recruit h3 { text-align: center;}
section#newgrads_recruit h4 { text-align: center;font-size: 20px; padding-bottom: 20px;}
section#newgrads_recruit h5 { text-align: center; font-size: 20px; font-weight:bold; margin-top: 20px;}
section#newgrads_recruit .newgrads_recruitBox{max-width:1280px;  margin: 30px auto;}
section#newgrads_recruit ul{ display: flex; flex-wrap: wrap;}
section#newgrads_recruit ul li{width : calc(100% / 3) ;}
section#newgrads_recruit ul li a{ margin: 20px; background: #536278;font-weight: bold; display: flex; flex-wrap: wrap;}
section#newgrads_recruit ul li span{ width: 70%; display: block; padding: 15px 0 ;}
section#newgrads_recruit ul li h4{ color: #fff; font-size: 16px; line-height: 120%; font-weight: bold; padding: 0 13px 5px; text-align: left;}
section#newgrads_recruit ul li p{ color: #fff; font-size: 12px; line-height: 120%; padding: 0 13px ;}
section#newgrads_recruit ul li figure{ width: 30%;}
section#newgrads_recruit ul li figure img{ width: 100%;}
section#newgrads_recruit ul li figure figcaption{ margin-top: 10px;}

	/* ここからタブレット　*/
	
	@media (max-width:1100px){
article#newgrads h4{font-size: 20px; line-height: 140%; font-weight: 600;}
article#newgrads h3{font-size: 32px; line-height: 140%; font-weight: 600;}
article#newgrads p{font-size: 16px; line-height: 140%;}

/* スクロール写真 */


:root{
  --gap: 16px; /* 画像間のスペース */
  --img-height: 200px; /* 画像の高さ */
  --speed-px-per-sec: 100; /* ピクセル毎秒 */
}

		
/* メインビジュアル */
#newgrads_KV{}

#newgrads_job {}
#newgrads_job h4{}
#newgrads_job h3{}

#newgrads_job .newgrads_jobBox{ height: 600px; position: relative;
	background:url('/files/user/feeco/celsys_img/img_employment_newgrads/celsysline_kv_tb_x2.png') no-repeat center 30px; background-size: 100% auto;}



#newgrads_job .newgrads_jobBox .newgrads_LeadBox{}
#newgrads_job .newgrads_jobBox .newgrads_LeadBoxWrap{ position: absolute; font-size: 20px; top: 60px; width: 55%; right: 50px; }

#newgrads_job .newgrads_jobBox .newgrads_LeadBox p{ font-size: 20px;font-weight:600; }
#newgrads_job .newgrads_jobBox .newgrads_LeadBox p strong{}




/* work */
#newgrads_workIntro{}
#newgrads_workIntro h4{}
#newgrads_workIntro h5{}
#newgrads_workIntro div{ width: inherit;float: inherit;}
#newgrads_workIntro div p{ padding-bottom: 20px;}
		
#newgrads_workIntro div p strong.marker{background: linear-gradient(transparent 60%, #ffc4c4 60%); font-size: 24px; line-height: 36px; margin-top: 10px;}

article#newgrads #newgrads_workIntro .newgrads_LeadBox p{ margin-top: 10px; padding-bottom: 20px;}
article#newgrads #newgrads_workIntro .newgrads_LeadBox p br{display: none;}
/* work phase*/

#newgrads_workPhase {margin: 0 auto;}
#newgrads_workPhase div.newgrads_phase_zu ol{ background:none; width: 840px; margin: 0 auto;}
#newgrads_workPhase div.newgrads_phase_zu ol li h4{top: 30px;left:30px; font-size: 20px; }
#newgrads_workPhase div.newgrads_phase_zu ol li h5{top: 60px; font-size: 24px;}
#newgrads_workPhase div.newgrads_phase_zu ol li figure{top: 60px; border: 2px solid #00AF9A; width: 200px; height: 200px; left: 40px; right: 40px;background: #d8eeeb;border-radius: 200px;}
#newgrads_workPhase div.newgrads_phase_zu ol li figure img{ display: block; padding-top: 50px; max-width: 150px; margin: 0 auto;}
#newgrads_workPhase div.newgrads_phase_zu ol li strong{top:330px;}
#newgrads_workPhase div.newgrads_phase_zu ol li div{top: 400px;}
#newgrads_workPhase div.newgrads_phase_zu ol li div p{width: 200px; margin: 0 auto;padding: 0; font-size: 12px; text-align: left; text-indent: -1em; }
#newgrads_workPhase div.newgrads_phase_zu ol li:nth-child(1) figure{background: #d8eeeb;}
#newgrads_workPhase div.newgrads_phase_zu ol li:nth-child(2) figure{background: #f0f7f2;}
#newgrads_workPhase div.newgrads_phase_zu ol li:nth-child(3) figure{background: #fdfcf8;}


		
#newgrads_workPhase section.newgrads_work_phaseBox .left { float:inherit; padding-top: 0px; text-align: center; margin: 10px auto;}


#newgrads_workPhase section.newgrads_work_phaseBox .left figure{ width: 300px;text-align: center;margin: 10px auto;}
#newgrads_workPhase section.newgrads_work_phaseBox .left figure img{width:80%;}
#newgrads_workPhase section.newgrads_work_phaseBox .left p{ width: 300px; font-size: 16px; line-height: 28px; text-align: left;margin: 10px auto;}
		
		
		
#newgrads_workPhase section.newgrads_work_phaseBox .right {float:inherit; width:740px;margin: 30px auto;}

		/* Phaseの白い背景 */
#newgrads_workPhase section.newgrads_work_phaseBox .newgradsBox {
  display: block;
  width: 360px;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
  break-inside: avoid; /* ← 最重要！！ */
  -webkit-column-break-inside: avoid;
}
		
/* Voice */
section#newgrads_voice .newgrads_voiceBox{ margin: 50px auto 0; padding: 0 20px 75px 20px;
	background:url('/files/user/feeco/celsys_img/img_employment_newgrads/voiceBox_bg.png') no-repeat center top;}

section#newgrads_voice .newgrads_voiceBox ul li{ width:50%; margin-top: 30px;}
section#newgrads_voice .newgrads_voiceBox ul li p{ text-align: center;}
section#newgrads_voice .newgrads_voiceBox ul li p.white{ color:initial;}

section#newgrads_voice .newgrads_voiceBox{background:url('/files/user/feeco/celsys_img/img_employment_newgrads/celsysline_voice_sp_x2.png') no-repeat center 400px; background-size: 100% auto;}

		

/* 共通エリア */
div.newgrads_CntBox{}
div.newgrads_CntBox h4{}
div.newgrads_CntBox h3{}
div.newgrads_CntBox img{}
	
/* 共通エリア(福利厚生・制度) */


/* 共通エリア(応募資格) */

section#newgrads_oubo dl dt{ width: 30%; border-bottom: 1px solid #d7efeb;}

/* 共通エリア(選考の流れ) */


/* 共通エリア(勤務条件) */


/* 写真イメージ */


/* 募集職種 */
section#newgrads_recruit ul li{width :50%;}
	
}