/* -------------------- PC -------------------- */
/**
* common
*/

/**
* fonts
**/

/**
* animation
**/

/**
* header
*/

/**
* nav
*/

/**
* footer
*/

/* common */
.hl2-wrapper h2 { font-size: 95px; padding: 40px 0; }
.hl2-wrapper h2 span { display: block; font-size: 25%; letter-spacing: 36px; margin-top: 22px; }
.hl3-wrapper h3 { font-size: 57px; padding: 0 0; }
.hl3-wrapper h3 span { display: block; font-size: 35%; margin-top: 6px; }

.button-deco3 { width: 100%; max-width: 700px; height: 185px; margin: 92px auto 0; background-color: #000; border-radius: 5px; overflow: hidden;   }
.button-deco3 a { position: relative; display: block; width: 100%; height: 100%; color: #fff; box-sizing: border-box; align-items: center; justify-content: center; }
.button-deco3 a > p { font-size: 87px; font-weight: bold; text-align: center; padding: 30px 0; box-sizing: border-box; }
.button-deco3 a > p span { display: block; font-size: 35%; margin-top: 12px; }
.button-deco3 a:after { content: ""; display: block; position: absolute; width: 12px; height: 12px;  top: calc(50% - 9px); right: 40px; border-style: solid; border-color: #fff; border-width: 4px 4px 0 0; transform: rotate(45deg); }


/* content1 */
#content1 { padding: 30px 0; margin: 20px auto 120px; background-color: #7cc8d4; }
#content1 img { max-width: 90%; }

/* content2 */
#content2 { padding: 55px 0; background-color: #009aaf; }
#content2 h3 { color: #fff; }
#content2 h4 { font-size: 46px; color: #fff; line-height: 1.4; margin-top: 36px;  letter-spacing: -1px; }
#content2 p { font-size: 16px; color: #fff; line-height: 1.75; margin-top: 100px; }
#content2 .flex-wrapper div:nth-child(1) { width: 40%; margin-right: 6%; }
#content2 .flex-wrapper div:nth-child(2) { width: 54%; margin-top: 80px; border: 5px solid #003451; border-radius: 40px; box-sizing: border-box; overflow: hidden; }

/* content3 */
#content3 { position: relative; padding-bottom: 25px; background-color: #7cc8d4; }
.content3-1 { padding: 85px 0 45px; background-color: #fff; }
.content3-1 .Tleft { max-width: 75%; position: relative; z-index: 2; }
.content3-1 .Tright { position: absolute; top: -85px; right: -100px; max-width: 470px; }
.content3-2 { padding: 90px 0 44px; }
.content3-2 .hl3-wrapper { text-align: center; }
.content3-2 > p { font-size: 18px; font-weight: bold; text-align: left; margin: 48px 0 0 10%; }
.content3-2 > div:nth-child(n + 3) { position: relative;}
.content3-2 > div:nth-child(3) { margin: 115px auto 30px; padding-top: 1px; }
.content3-2 > div:nth-child(n + 3) > div:nth-child(1) { position: absolute; top: 0; right: 0; font-size: 100px; text-align: right; color: #fff; }
.content3-2 > div:nth-child(4) div:nth-child(1) { top: 27px; }
.content3-2 .hl4-wrapper { display: inline-block; margin-top: 31px; height: 75px; line-height: 75px; }
.content3-2 .hl4-wrapper h4 { font-size: 46px; font-weight: bold; color: #fff; text-align: left; position: relative ;}
.content3-2 > div:nth-child(3) .hl4-wrapper h4:after { content: url(./images/1x/recruit-img5.png); display: block; position: absolute; top: -90px; right: -140px; }
.content3-2 .hl4-wrapper h4 span { display: inline-block; padding: 0 20px; margin-bottom: 12px; background-color: #000; }
.content3-2 .float-wrapper { margin-top: 8px; }
.content3-2 > div:nth-child(4) .float-wrapper { margin-top: 50px; }
.content3-2 .float-wrapper .Fleft:nth-child(1) { width: 18%; margin-top: 5px; font-size: 185px; text-align: center; }
.content3-2 .float-wrapper .Fleft:nth-child(3) { width: 62%; }
.content3-2 .float-wrapper .Fleft:nth-child(3) p { font-size: 18px; line-height: 1.7; margin-top: 20px; }
.content3-2 .float-wrapper .Fleft:nth-child(3) p:nth-child(2) { font-weight: bold; }
.content3-2 .float-wrapper .Fright { width: 19%; }
#content3 .button-deco1 { max-width: 700px; height: 140px; margin: 80px auto 0; background-color: #000; }
#content3 .button-deco1 a > * { font-size: 30px; }
#content3 .button-deco1 a:after { width: 12px; height: 12px; border-width: 4px 4px 0 0; right: 40px; top: calc(50% - 9px); }

/* content4 */
#content4 { padding: 100px 0 108px; }
#content4 h3 { font-size: 100px; text-align: center; color: #003451; }
#content4 .absolute-wrapper { position: relative; min-height: 79rem; margin: 76px auto; }
#content4 .absolute-wrapper div { position: absolute; transform: scale(0); }
#content4 .absolute-wrapper div.scroll-active { transform: scale(1); }
#content4 .absolute-wrapper div img { width: unset; }
#content4 .absolute-wrapper div:nth-child(1) { width: 66%; top: 0; left: 0; transition: .2s; }
#content4 .absolute-wrapper div:nth-child(2) { width: 44%; bottom: 0; left: 0; transition: .4s; }
#content4 .absolute-wrapper div:nth-child(3) { width: 32%; top: 5%; right: 0; transition: .3s; }
#content4 .absolute-wrapper div:nth-child(4) { width: 27%; top: 43%; right: 27%; z-index: 2; transition: .2s; }
#content4 .absolute-wrapper div:nth-child(5) { width: 40%; top: 43%; left: 4%; transition: .3s; }
#content4 .absolute-wrapper div:nth-child(6) { width: 21%; bottom: 0; right: 33%; transition: .2s; }
#content4 .absolute-wrapper div:nth-child(7) { width: 32%; bottom: 25%; right: 0; z-index: 1; transition: .4s; }
#content4 .absolute-wrapper div:nth-child(8) { width: 28%; bottom: 0; right: 3%; transition: .3s; }
#content4 .button-deco3 { margin: 92px auto 0; }

/* content5 */
#content5 { padding: 0; }
#content5 > div { position: relative; }
#content5 .absolute-wrapper { position: absolute; top: 0; right: 0; left: 0; height: 100%; width: 100%; margin: 0 auto; }
#content5 .absolute-wrapper > div { position: absolute; transform: scale(0); }
#content5 .absolute-wrapper > div.scroll-active { transform: scale(1); }
#content5 img { width: unset; }
.content5-1 { padding: 20px 0 4px; background-color: #7cc8d4; }
.content5-1 > div:nth-child(1) { padding-top: 46px; }
.content5-1 > div:nth-child(1) h3 { font-size: 46px }
.content5-1 > div:nth-child(1) p { font-size: 20px; font-weight: bold; line-height: 1.6; margin-top: 3px; }
.content5-1 > p { font-size: 175px; font-weight: bold; color: rgba(255,255,255,.5); padding: 16rem 0 15rem; }
.content5-1 .absolute-wrapper div:nth-child(1) { top: 2.5%; right: 0.86%; transition: .4s; }
#content5 .content5-1 .absolute-wrapper div:nth-child(2) { top: 75.8%; right: 0; left: 0; margin: 0 auto; text-align: center; transform: scale(1); }
#content5 .content5-1 .absolute-wrapper div:nth-child(3) { top: 75.8%; right: 0; transform: scale(1); }
.content5-1 .absolute-wrapper div:nth-child(4) { top: 22.7%; left: 29.4%; transition: .4s; }
.content5-1 .absolute-wrapper div:nth-child(5) { top: 29.3%; right: 21.3%; transition: .5s; }
.content5-1 .absolute-wrapper div:nth-child(6) { top: 31%; left: 0.4%; transition: .5s; }
.content5-1 .absolute-wrapper div:nth-child(7) { top: 45.8%; right: 39.3%; transition: .6s; }
.content5-1 .absolute-wrapper div:nth-child(8) { top: 51%; left: 19%; transition: .2s; }
.content5-1 .absolute-wrapper div:nth-child(9) { bottom: 3.8%; left: 0.6%; transition: .4s; }
.content5-2 > p { font-size: 175px; font-weight: bold; text-align: right; color: rgba(124,200,212,.5); padding: 17rem 0 29rem; }
.content5-2 .absolute-wrapper div:nth-child(1) { top: 29%; left: 0.5%; transition: .4s; }
#content5 .content5-2 .absolute-wrapper div:nth-child(2) { top: 5.7%; left: 0; left: 0; margin: 0 auto; text-align: center; transform: scale(1); }
.content5-2 .absolute-wrapper div:nth-child(3) { top: 4%; right: 0; transition: .4s; }
.content5-2 .absolute-wrapper div:nth-child(4) { top: 31.3%; right: 18.5%; transition: .5s; }
.content5-2 .absolute-wrapper div:nth-child(5) { top: 32%; left: 40%; transition: .4s; }
.content5-2 .absolute-wrapper div:nth-child(6) { top: 46.5%; right: 2.1%; transition: .6s; }
.content5-2 .absolute-wrapper div:nth-child(7) { bottom: 21.4%; left: 22.6%; transition: .4s; }
.content5-2 .absolute-wrapper div:nth-child(8) { bottom: 14.5%; right: 25%; transition: .5s; }

/* content6 */
#content6 { padding-bottom: 104px; }

/* content7 */
#content7 { padding: 95px 0;  background-color: #009aaf; }
#content7 h3 { color: #fff; }
#content7 h4 { font-size: 50px; color: #009aaf; line-height: 1; margin-top: 64px;  letter-spacing: -1px; }
#content7 h4 span { display: inline-block; padding: 14px 20px; margin-bottom: 5px; background-color: #fff; }
#content7 p { font-size: 16px; color: #fff; line-height: 1.75; margin-top: 43px; }
#content7 .flex-wrapper div:nth-child(1) { width: 47%; margin-right: 6%; }
#content7 .flex-wrapper div:nth-child(2) { width: 47%; margin-top: 146px; box-sizing: border-box; overflow: hidden; }
#content7 .Tright { margin-top: 75px; }
#content7 .Tright p { font-size: 46px; }
#content7 .Tright p span { font-size: 50%; margin-right: 30px; }

/* content8 */
#content8 { padding: 90px 0 0; background-color: #fff; }
#content8 .hl3-wrapper { text-align: center; }
#content8 .hl3-wrapper h3 { font-size: 80px; }
#content8 .table-wrapper { max-width: 1020px; margin: 56px auto 0; }
/* #content8 .table-wrapper:nth-child(2),#content8 .table-wrapper:nth-child(3) { border-bottom: 2px dashed #ccc; } */
#content8 .table-wrapper:not(:last-child) { border-bottom: 2px dashed #ccc; }
#content8 .table-wrapper > div { display: flex; line-height: 1.95; margin-bottom: 19px; }
#content8 .table-wrapper div div:nth-child(1) { width: 16%; }
#content8 .table-wrapper div div:nth-child(2) { width: 84%; }
#content8 .table-wrapper p { font-size: 26px; }
#content8 .Tcenter { margin-top: -600px; }

/* content9 */
#content9 { padding: 120px 0 75px; background-color: #fdd108; }
#content9 .Tcenter p { font-size: 70px; font-weight: bold; }


/**
* scroll actions
*/


/* -------------------- SP -------------------- */
@media (max-width:1550px) {

	@media (max-width:1366px) {

		@media(max-width:1024px) {
			/* common */

			/* header */

			/* footer */

			/* content1 */

			/* content2 */
			#content2 .flex-wrapper { flex-wrap: wrap; }
			#content2 .flex-wrapper div:nth-child(1), #content2 .flex-wrapper div:nth-child(2) { width: 100%; margin: 0 auto 20px; text-align: center; }
			#content2 h3, #content2 h4, #content2 p { display: inline-block; text-align: left; margin-top: 20px; }
			#content2 .flex-wrapper div:nth-child(2) img { width: 100%; }

			/* content3 */
			.content3-1 .Tright { width: 25%; top: 0; right: 0; }
			.content3-2 > div:nth-child(n + 3) > div:nth-child(1) { position: relative; text-align: center; }
			.content3-2 > div:nth-child(4) div:nth-child(1) { top: 0; }
			.content3-2 .hl4-wrapper { display: block; width: 90%; height: auto; line-height: 1; text-align: center; margin: 0 auto; padding: 30px; box-sizing: border-box; background-color: #fff; border-radius: 20px 20px 0 0; }
			.content3-2 .hl4-wrapper h4 { display: inline-block; height: 75px; line-height: 75px; }
			.content3-2 > div:nth-child(3) .hl4-wrapper h4:after { top: -100px; left: 50px; right: unset; }
			.content3-2 .float-wrapper { width: 90%; margin: 0 auto 60px; padding: 30px; background-color: #fff; border-radius: 0 0 20px 20px; box-sizing: border-box; }
			.content3-2 > div:nth-child(4) .float-wrapper { margin-top: 0; }
			.content3-2 .float-wrapper .Fleft:nth-child(1), .content3-2 .float-wrapper .Fright { width: 50%; text-align: center; }
			.content3-2 .float-wrapper .Fleft:nth-child(3) { width: 100%; float: none; clear: both; margin-top: 20px; }

			/* content4 */
			#content4 .absolute-wrapper { display: flex; flex-wrap: wrap; }
			#content4 .absolute-wrapper div { position: relative; margin-bottom: 20px; }
			#content4 .absolute-wrapper div img { width: 100%; }
			#content4 .absolute-wrapper div:nth-child(1) { width: 100%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(2) { width: 100%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(3) { width: 48%; margin-right: 2%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(4) { width: 48%; margin-left: 2%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(5) { width: 100%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(6) { width: 48%; margin-right: 2%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(7) { width: 48%; margin-left: 2%; top: unset; right: unset; left: unset; }
			#content4 .absolute-wrapper div:nth-child(8) { width: 100%; top: unset; right: unset; left: unset; }

			/* content5 */
			#content5 .absolute-wrapper > div img { transform: scale(.8); }

			/* content7 */
			#content7 .flex-wrapper { flex-wrap: wrap; }
			#content7 .flex-wrapper div:nth-child(1), #content7 .flex-wrapper div:nth-child(2) { width: 100%; margin: 0 auto 20px; text-align: center; }
			#content7 h4 { display: inline-block; text-align: left; margin: 0 auto; }
			#content7 p { text-align: left; }
			#content7 .Tright { text-align: right; margin-top: 20px; }
			#content7 .Tright p { text-align: right; margin-top: 0; }
			#content7 .flex-wrapper div:nth-child(2) img { width: 100%; }

			/* content8 */
			#content8 .Tcenter { margin-top: 100px; }

			/* content9 */
			#content9 .Tcenter p { font-size: 46px; }


			@media(max-width:768px) {
				/* common */

				/* header */

				/* footer */

				/* content1 */

				/* content2 */

				/* content3 */
				.content3-2 .float-wrapper .Fleft:nth-child(1), .content3-2 .float-wrapper .Fright { float: left; }

				/* content4 */
				#content4 h3 { font-size: 60px; }

				/* content5 */
				.content5-1 > div:nth-child(1) { text-align: center; }
				.content5-1 > div:nth-child(1) p { display: inline-block; text-align: left; margin-top: 20px; }
				#content5 .absolute-wrapper { width: 96%; }
				.content5-1 > p, .content5-2 > p { font-size: 90px; }
				.content5-1 > p { padding: 3rem 0 30rem; }
				#content5 .absolute-wrapper > div img { transform: scale(1); }
				#content5 .absolute-wrapper > div { width: 23%; }
				#content5 .content5-1 .absolute-wrapper div:nth-child(1) { width: 30%; top: 25%; right: 0; }
				#content5 .content5-1 .absolute-wrapper div:nth-child(2) { width: 50%; top: 83%; }
				#content5 .content5-1 .absolute-wrapper div:nth-child(3) { width: 23%; top: 83%; }
				.content5-1 .absolute-wrapper div:nth-child(4) { top: 46%; left: 32%; }
				#content5 .absolute-wrapper > div:nth-child(5) { top: 47%; }
				.content5-1 .absolute-wrapper div:nth-child(6) { top: 48%; }
				.content5-1 .absolute-wrapper div:nth-child(7) { top: 63%; right: 30%; }
				.content5-1 .absolute-wrapper div:nth-child(8) { top: 60%; }
				.content5-2 .absolute-wrapper div:nth-child(1) { width: 30%; }
				#content5 .content5-2 .absolute-wrapper div:nth-child(2) { width: 23%; top: 4.5%; }

				/* content8 */
				#content9 .Tcenter p { font-size: 38px; }

				@media (max-width:767px) {
					/* common */
					.hl2-wrapper h2 { font-size: 24px; padding: 20px 0; }
					.hl2-wrapper h2 span { font-size: 50%; letter-spacing: 10px; }
					.hl3-wrapper h3 { font-size: 30px; }
					.button-deco3 { height: 70px; }
					.button-deco3 a > p { font-size: 18px; padding: 15px 0; }
					.button-deco1 a:after { width: 6px; height: 6px; border-width: 2px 2px 0 0; right: 20px; top: calc(50% - 6px); }

					/* header */

					/* footer */

					/* content1 */
					#content1 { margin: 0 auto 30px; }

					/* content2 */
					#content2 { padding: 20px 0; }
					#content2 h4 { font-size: 28px; }

					/* content3 */
					.content3-1 { padding: 30px 0; }
					.content3-2 { padding: 30px 0; }
					.content3-2 > p { margin: 20px auto 0; line-height: 1.75; }
					.content3-2 > div:nth-child(3) { margin-top: 30px; }
					.content3-2 > div:nth-child(n + 3) > div:nth-child(1) { font-size: 46px; }
					.content3-2 .hl4-wrapper h4 { font-size: 18px; height: 40px; line-height: 40px; }
					.content3-2 > div:nth-child(3) .hl4-wrapper h4:after { content: none; }
					.content3-2 .float-wrapper { margin-bottom: 30px; }
					.content3-2 .float-wrapper .Fleft:nth-child(3) p { font-size: 16px; }
					#content3 .button-deco1 { height: 70px; margin-top: 30px; }
					#content3 .button-deco1 a > * { font-size: 18px; }
					#content3 .button-deco1 a:after { width: 6px; height: 6px; border-width: 2px 2px 0 0; right: 20px; top: calc(50% - 6px); }

					/* content4 */
					#content4 { padding: 60px 0; }
					#content4 h3 { font-size: 30px; }
					#content4 .absolute-wrapper { margin: 20px auto 0; }
					#content4 .button-deco3 { margin-top: 30px; }

					/* content5 */
					.content5-1 > div:nth-child(1) { padding-top: 20px; }
					.content5-1 > div:nth-child(1) h3 { font-size: 30px; }
					.content5-1 > div:nth-child(1) p { font-size: 16px; }
					.content5-1 > p, .content5-2 > p { font-size: 46px; }
					.content5-1 > p { padding-bottom: 20rem; }
					#content5 .absolute-wrapper > div { width: 30%; }
					#content5 .content5-1 .absolute-wrapper div:nth-child(1) { width: 35%; top: 35%; }
					#content5 .content5-1 .absolute-wrapper div:nth-child(2), #content5 .content5-1 .absolute-wrapper div:nth-child(3) { top: 90%; }
					#content5 .content5-1 .absolute-wrapper > div:nth-child(5) { top: 67%; right: 3%; }
					.content5-1 .absolute-wrapper div:nth-child(8) { top: 62%; left: 10%; }
					.content5-1 .absolute-wrapper div:nth-child(9) { bottom: 10%; }
					.content5-2 > p { padding: 8rem 0 15rem; }
					#content5 .content5-2 .absolute-wrapper div:nth-child(1) { width: 35%; top: 20%; }
					#content5 .content5-2 .absolute-wrapper div:nth-child(2) { top: 6%; }
					.content5-2 .absolute-wrapper div:nth-child(3) { top: 20%; }
					.content5-2 .absolute-wrapper div:nth-child(4) { top: 41%; right: 26%; }
					#content5 .absolute-wrapper > div:nth-child(5) { top: 65%; }
					.content5-2 .absolute-wrapper div:nth-child(6) { top: 50%; right: 0; }
					.content5-2 .absolute-wrapper div:nth-child(7) { bottom: 2%; left: 10%; }
					.content5-2 .absolute-wrapper div:nth-child(8) { bottom: 3%; right: 3%; }

					/* content6 */
					#content6 { padding-bottom: 30px; }

					/* content7 */
					#content7 { padding: 30px 0; }
					#content7 h4 { font-size: 20px; }
					#content7 h4 span { padding: 10px; }
					#content7 .Tright p { font-size: 30px; }

					/* content8 */
					#content8 { padding: 30px 0; }
					#content8 .hl3-wrapper h3 { font-size: 30px; }
					#content8 .table-wrapper { margin: 20px auto; }
					#content8 .table-wrapper > div { flex-wrap: wrap; }
					#content8 .table-wrapper div div:nth-child(1), #content8 .table-wrapper div div:nth-child(2) { width: 100%; }
					#content8 .table-wrapper p { font-size: 16px; }
					#content8 .table-wrapper div div:nth-child(1) p { font-weight: bold; }

					/* content9 */
					#content9 { padding: 40px 0; }
					#content9 .Tcenter p { font-size: 20px; }
					#content9 .button-deco3 { margin-top: 20px; }

					@media (max-width:512px) {

						@media (max-width:456px) {

							@media (max-width:321px) {

							}
						}
					}
				}
			}
		}
	}
}