@charset "utf-8";

#Contents {
	padding-bottom: 0;
	overflow: hidden;
}
#Footer {
	position: relative;
}
#newGraduateNavi {
	z-index: 2;
}
#fixBG {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: transparent;
	background-image: url("/image/hfd/recruit/new_graduate/index/bg_body.jpg");
	background-repeat:  no-repeat;
	background-size: auto 100%;
	background-position: left top;
}
#fixBG.fix {
	position: fixed;
}
#fixBG.bottom {
	top: auto;
	bottom: 0;
}
@media screen and ( max-aspect-ratio: 1713/500 ) {
	#fixBG {
		background-position: calc( 50% - 96vh ) top;
	}
}
@media screen and ( max-aspect-ratio: 3/2 ) {
	#fixBG {
		background-position: -96vh top;
	}
}
@media screen and ( max-aspect-ratio: 3/4 ) {
	#fixBG {
		background-position: calc( 50% - 59vh ) top;
	}
}

/* mainvisual */
#mainvisual {
	position: relative;
	width: auto;
	background: #ffffff;
	margin-bottom: 0;
}

#mainvisual h1 {
	margin-top: 0;
}
@media screen and (max-width: 1304px) {
	#mainvisual {
		margin: 0 -15px;
	}
}

#mainvisualTheater {
	position: relative;
	background: #000000;
	overflow: hidden;
}

#mainvisualCurtain {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0%;
	height: 1%;
	background: #ffffff;
	border-radius: 50%;
	box-shadow:
		#ffffff 0px 0px 15px,
		#ffffff 0px 0px 15px,
		#0000ff 0px 0px 5px,
		#0000ff 0px 0px 5px,
		#0000ff 0px 0px 5px,
		#0000ff 0px 0px 5px;
	overflow: hidden;
}

#mainvisualSleeve {
	position: relative;
	width: 1275px;
	max-width: 100%;
	margin: 0 auto;
}

#mainvisualStage {
	position: relative;
	width: 100%;
	height: 0;
	padding: 0 0 47.06%;
	font-size: 0;
	line-height: 0;
	transform: perspective(100px);
}

#mainvisualStage > * {
	position: absolute;
}

#mainvisualStage * {
	transition-property: all;
	transform-origin: center;
}

#mainvisualStage img {
	height: auto;
}


#mainvisualStage #mvPh {
	position: absolute;
	left: 0%;
	top: 0%;
	width :100%;
	height: 100%;
}

#mainvisualStage #mvPh > div {
	position: absolute;
	width: 100%;
	background: #ffffff;
	opacity: 0;
	box-shadow:
		#ffffff 0 0 15px,
		#ffffff 0 0 15px;
	transform-origin: center;
}

#mainvisualStage #mvPh > div > img {
	width: 100%;
	opacity: 0;
  transform: perspective(0px);
}

#mainvisualStage #mvPh01 {
	transform:
    perspective(0px)
		scale(0.366)
		translate(8.8%, -102%);
}

#mainvisualStage #mvPh02 {
	transform:
    perspective(0px)
		scale(0.3655)
		translate(99%, -80%);
}

#mainvisualStage #mvPh03 {
	transform:
    perspective(0px)
		scale(0.36)
		translate(52%, 27%);
}

#mainvisualStage #mvPh04 {
	transform:
    perspective(0px)
		scale(0.35)
		translate(-47%, 6%);
}

#mainvisualStage #mvPh05 {
	transform:
    perspective(0px)
		scale(0.355)
		translate(-82%, -86%);
}

#mainvisualStage #mvPh06 {
	transform:
    perspective(0px)
		scale(0.2555)
		translate(188%, 1%);
}

#mainvisualStage #mvPh07 {
	transform:
    perspective(0px)
		scale(0.255)
		translate(-178%, 47%);
}

#mainvisualStage [src*="sample"] {
	opacity: 0.5;
	right: 0%;
	bottom: 0%;
	height: auto;
}

#mainvisualStage [src*="souchi"] {
	height: 139%!important;
	left: 0%;
	top: -20.4%;
	opacity: 0;
}

#mainvisualStage [src*="p0"] {
	opacity: 0;
}

#mainvisualStage [src*="p01"] {
	width: 10.4%;
	left: 52.8%;
	bottom: -100%;
}

#mainvisualStage [src*="p02"] {
	width: 6.3%;
	left: 64.3%;
	bottom: -100%;
}

#mainvisualStage [src*="p03"] {
	width: 10.2%;
	left: 68.4%;
	bottom: -100%;
}

#mainvisualStage [src*="p04"] {
	width: 10.1%;
	left: 79.2%;
	bottom: -100%;
}

#mainvisualStage [src*="p05"] {
	width: 11.2%;
	left: 88.2%;
	bottom: -100%;
}

#mvTxt {
	left: 26.4%;
	top: -1%;
	width: 74.8%;
}

#mvTxt > * {
	width: 100%;
	height: 100%;
}

#mvTxtFull {
}

#mvTxtFull > * {
	position: relative;
	left: -100%;
	overflow: hidden;
}

#mvTxtFull img {
	position: relative;
	width: 100%;
	left: 100%;
}

#mvTxtParts {
	position: absolute;
	left: 0%;
	top: 0%;
}

#mvTxtParts > div {
	position: relative;
	left: 0%;
	width: 100%;
	height: 100%;
}

#mvTxtParts > div > img {
	position: absolute;
}

#mainvisualStage [src*="txt01"] {
	left: 40.75%;
	top: 0%;
	width: 47.65%;
	opacity: 0;
	transform: scale(2);
}

#mainvisualStage [src*="txt02"] {
	left: 0.1%;
	top: 45.95%;
	width: 33.65%;
	opacity: 0;
	transform: scale(2);
}

#mainvisualStage [src*="txt03"] {
	left: 32.4%;
	top: 49.9%;
	width: 14.1%;
	opacity: 0;
	transform: scale(2);
}
/* =====  ===== */
/* ===== / ===== */

/* ===== run  ===== */
.run #mainvisualStage #mvPh {
	transition-timing-function: linear;
	transition-property: all;
	transition-duration: 3050ms;
	transform-origin: center;
	transform: scale(0.9);
}
/* ===== /run  ===== */

/* ===== ph in  ===== */
.ph1in #mainvisualStage #mvPh01,
.ph2in #mainvisualStage #mvPh02,
.ph3in #mainvisualStage #mvPh03,
.ph4in #mainvisualStage #mvPh04,
.ph5in #mainvisualStage #mvPh05,
.ph6in #mainvisualStage #mvPh06,
.ph7in #mainvisualStage #mvPh07 {
	opacity: 1;
}
.ph1in #mainvisualStage #mvPh01 img,
.ph2in #mainvisualStage #mvPh02 img,
.ph3in #mainvisualStage #mvPh03 img,
.ph4in #mainvisualStage #mvPh04 img,
.ph5in #mainvisualStage #mvPh05 img,
.ph6in #mainvisualStage #mvPh06 img,
.ph7in #mainvisualStage #mvPh07 img {
	transition-timing-function: linear;
	transition-property: opacity;
	transition-duration: 300ms;
	opacity: 1;
}
/* ===== /ph in  ===== */

/* ===== crunch  ===== */
.crunch #mainvisualStage #mvPh {
	transition-timing-function: cubic-bezier(.42,-0.47,1,.24);
	transition-property: all;
	transition-duration: 1000ms;
	transform-origin: center;
	transform: scale(0);
}
.crunch #mainvisualStage #mvPh img {
	transition-timing-function: cubic-bezier(.42,-0.47,1,.24);
	transition-property: all;
	transition-duration: 1000ms;
	opacity: 0;
}
/* ===== /crunch  ===== */

/* ===== explosion ===== */
#mainvisualCurtain {
	transition-timing-function: cubic-bezier(.23,.87,.48,.98);
	transition-property: all;
}

.explosion1 #mainvisualCurtain {
	left: 0%;
	width: 100%;
	height: 0.3%;
	border-radius: 0%;
	transition-duration: 500ms;
}
.explosion2 #mainvisualCurtain {
	top: 0%;
	height: 100%;
	transition-duration: 500ms;
}

/* ===== /explosion ===== */

/* ===== fadeInSouchi ===== */
.fadeInSouchi #mainvisualStage [src*="souchi"] {
	transition-timing-function: cubic-bezier(.23,.87,.48,.98);
	transition-duration: 500ms;
	transition-property: opacity;
	opacity: 1;
}
/* ===== /fadeInSouchi ===== */

/* ===== moveSouchi ===== */
.moveSouchi #mainvisualStage [src*="souchi"] {
	transition-timing-function: ease-in-out;
	transition-duration: 1500ms;
	transition-property: left;
	left: -59.7%;
}
/* ===== /moveSouchi ===== */

/* ===== txt in ===== */
.txt1in #mainvisualStage [src*="txt01"],
.txt2in #mainvisualStage [src*="txt02"] {
	transition-timing-function: cubic-bezier(.23,.87,.48,.98);
	transition-duration: 500ms;
	transition-property: all;
	transform: scale(1);
	opacity: 1;
}
/* ===== txt2in ===== */

/* ===== txtSlide ===== */
.txtSlide #mvTxtFull > *,
.txtSlide #mvTxtFull img,
.txtSlide #mvTxtParts,
.txtSlide #mvTxtParts > div {
	transition-timing-function: cubic-bezier(.23,.87,.48,.98);
	transition-duration: 600ms;
	transition-property: left;
}

.txtSlide #mvTxtFull > * {
	left: 0%;
}

.txtSlide #mvTxtFull img {
	left: 0%;
}
.txtSlide #mvTxtParts {
	left: 100%;
	overflow: hidden;
}
.txtSlide #mvTxtParts > div {
	left: -100%;
}
/* ===== /txtSlide ===== */

/* ===== Fin ===== */
.fin #mainvisualStage [src*="txt03"] {
	opacity: 1;
	transition-timing-function: cubic-bezier(.23,.87,.48,.98);
	transition-duration: 600ms;
	transform: scale(1);
}

.fin #mainvisualStage [src*="p0"] {
	transition-timing-function: cubic-bezier(.23,.87,.48,.98);
	opacity: 1;
}

.fin #mainvisualStage [src*="p01"] {
	bottom: -0.6%;
	transition-duration: 550ms;
}

.fin #mainvisualStage [src*="p02"] {
	bottom: -0.6%;
	transition-duration: 650ms;
}

.fin #mainvisualStage [src*="p03"] {
	bottom: 2%;
	transition-duration: 500ms;
}

.fin #mainvisualStage [src*="p04"] {
	bottom: 10.9%;
	transition-duration: 700ms;
}

.fin #mainvisualStage [src*="p05"] {
	bottom: 1.9%;
	transition-duration: 600ms;
}

/* ===== /Fin ===== */



/* topNews */
#topNews {
	background: #012666;
	padding: 0 30px;
}

#topNews .sectionInner {
	display: flex;
	align-items: center;
	max-width: 960px;
	padding: 20px 0;
}

#topNews h2,
#topNews h2 span,
#topNews dt,
#topNews dd,
#topNews dd a {
	color: #ffffff;
}

#topNews h2 {
	width: 190px;
	margin: 0;
	padding: 0;
}

#topNews h2,
#topNews h2 span {
	background: none;
}

#topNews h2 {
	line-height: 1;
	font-size: 36px;
	font-weight: bold;
}

#topNews h2 span {
	display: block;
	padding: 10px 0 0;
	font-size: 18px;
	font-weight: normal;
}

#topNews dt {
	clear: both;
	float: left;
	width: 110px;
}

#topNews dt,
#topNews dd {
	margin: 0;
	padding: 7px 0;
	line-height: 1.2;
}

#topNews dd {
	margin-left: 110px;
}

@media screen and (max-width: 1304px) {
	#topNews {
		margin: 0 -15px;
	}
}

@media screen and (max-width: 767px) {
	#topNews {
		padding: 0 15px;
	}

	#topNews .sectionInner {
		display: block;
		max-width: 960px;
		padding: 20px 0 10px;
	}

	#topNews h2 {
		width: auto;
		padding: 0;
	}

	#topNews h2 {
		font-size: 24px;
	}

	#topNews h2 span {
		display: inline-block;
		padding: 0 0 0 10px;
		font-size: 14px;
	}

	#topNews dt {
		float: none;
		font-size: 14px;
		width: auto;
		padding: 10px 0 0;
	}

	#topNews dd {
		margin-left: 0;
		padding: 0 0;
		font-size: 14px;
	}
}

/* topLead */
#topLead {
	position: relative;
	padding: 60px 15px 100px;
	margin-bottom: 0px;
}
@media screen and (max-width: 1304px) {
	#topLead {
		margin-left: -15px;
		margin-right: -15px;
	}
}

.topLead_inner {
	position: relative;
	z-index: 1;
	max-width: 1275px;
	margin: 0 auto;
	padding: 0;
}
.topLead_inner::after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
}

h2.topLead_title {
	margin: 0 20px 0;
	padding: 0 0 50px;
	background: none;
	text-align: center;
}

.topLead_main {
	margin-right: calc( 53% - 50vw );
}

p.topLead_text {
	padding: 0 20px;
}

.topLead_img {
	float: right;
	width: 40%;
	height: auto;
	margin: 0 0 5px 20px;
}

.topLead_btn {
	margin: 20px 0 0;
	padding-right: 10px;
	text-align: right;
}

.topLead_btn a {

}

@media screen and (max-width: 767px) {
	#topLead {
		position: relative;
		padding: 24px 15px 60px;
	}

	.topLead_inner {
		max-width: 1275px;
		margin: 0 auto;
	}

	h2.topLead_title {
		margin: 0 0px 0;
		padding: 0 0 15px;
	}

	.topLead_main {
		margin: 0 15px;
	}

	p.topLead_text {
		padding: 0;
		font-size: 18px;
	}

	.topLead_img {
		float: none;
		width: 100%;
		margin: 0 0 15px;
	}

	.topLead_btn {
		margin: 20px 40px 0 30px;
	}

	.topLead_btn a {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}
}


/* company */
.company_lead {
	max-width: 1275px;
	margin: 0 auto 100px;
	margin-left: calc( 50% - 50vw );
}
.company_lead::after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
}
.company_lead_img {
	float: left;
	width: 55%;
	max-width: 510px!important;
	height: auto;
	margin: 0 20px 5px 0;
}
.company_lead p {
	margin: 0 15px 1em;
}

/* town */
#topTown {
	position: relative;
	max-width: 1300px;
	margin: 30px auto 0;
}

#topTown > img {
	width: 100%;
	height: auto;
}

#topTown > img:last-child {
	position: absolute;
	left: 0px;
	top :0px;
}

#topTown > figure {
	position: absolute;
	left: 0px;
	top :0px;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
}

#topTown > figure > img {
	width: 100%;
	height: auto;
	opacity: 1;
}

#topTown > figure > img:last-child {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: all 300ms;
}

#topTown > div:hover + figure > img:last-child {
	opacity: 1;
}


#topTown > div {
	position: absolute;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	background: url("/image/hfd/recruit/new_graduate/index/town_icon.png") no-repeat center center;
	background-size: 100% 100%;
	cursor: pointer;
	z-index: 1;
	overflow: hidden;
}

#topTown > div:hover {
	width: 260px;
	height: auto;
	margin-left: -130px;
	padding-bottom: 14px;
	background: none;
	z-index: 2;
}

#topTown dl {
	position: relative;
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	width: 260px;
	background: #ffffff;
	border: #244172 solid 2px;
	border-radius: 5px;
	box-sizing: border-box;
}

#topTown > div:hover dl {
	display: flex;
}

#topTown dl::after {
	content: "";
	position: absolute;
	left: calc( 50% - 10px );
	bottom: -12px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	background: #ffffff;
	border-color: #244172;
	border-style: solid;
	border-width: 0 2px 2px 0;
	transform-origin: center;
	transform: rotate(45deg);
}

#topTown dt {
	width: 100%;
	padding: 5px 0 0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

#topTown dd {
	display: flex;
	flex-wrap: wrap;
	padding: 0px 10px 5px;
	font-size: 14px;
	width: 100%;
}

#topTown dd  > span {
	box-sizing: border-box;
	display: block;
	text-align: center;
	width: 50%;
}

.sectionInner .topH2 img {
	display: block;
	max-width: 100%;
}


.companyList {
  position: relative;
}


.companyBG {
  width: 100%;
}
.companyBG img {
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
  width: auto!important;
  height: auto!important;
  max-width: auto!important;
  max-height: auto!important;
  opacity: 0;
  transition: opacity 120ms linear;
}
@media screen and (max-aspect-ratio: 1/1) {
}
@media screen and (min-aspect-ratio: 1/1) {
}
@media screen and (max-width: 767px) {
	#topTown {
		display: none;
	}
  
  #company {
    position: relative;
  }
  
  #company .companyList {
    margin: 40px -15px 40px;
    padding: 0 15px;
  }
	
  .companyBG {
    position: absolute;
    top: 0;
  }
  .fix .companyBG {
    position: fixed;
    top: 40px;
  }
  .stay .companyBG {
    top: auto;
    bottom: 0;
  }
  .companyBG img {
    display: block;
  }
  .companyBG img:first-child {
    opacity: 1;
  }
  .companyBG {
    width: 100vw;
    height: 94.27vw;
    left: 0;
  }
  .companyList a {
    margin-top: calc( 94.27vw * 2 );
    margin-bottom: calc( 94.27vw + 80px )
  }
  @media screen and (min-aspect-ratio: 1/1) {
    .companyBG {
      width: calc( 106.08vh - 42.43px );
      height: calc( 100vh - 40px );
      left: calc( 50vw - 50vh + 10px);
    }
    .companyList a {
      margin-top: calc( 100vh * 2);
      margin-bottom: calc( 100vh + 80px );
    }
  }
	.linkList > a {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 767px) {
	.entryContentsTop_btn {
		text-align: center;
		margin: 32px 0;
	}
}

@media screen and (min-width: 768px) {
	.linkListSymposium a {
		margin: 0 14px;
	}
}

.linkList > a.btn_top_member {
	background-color: #00b9e1;
	display: none;
}

.column03 .linkList .btn_top_member figcaption > span {
	padding: 0 5px;
}

.btn_top_member p {
	text-indent: -3em;
	padding-left: 3em;
	line-height: 1.2;
}

.btn_top_member p span.small {
    font-size: 80%;
}