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

/**
* fonts
**/

/**
* animation
**/

/**
* header
*/

/**
* nav
*/

/**
* footer
*/

/* common */
.hl2-wrapper h2 { font-size: 95px; padding: 40px 0 67px; }
.hl2-wrapper h2 span { display: block; font-size: 25%; letter-spacing: 36px; margin-top: 22px; }
.hl3-wrapper h3 { font-size: 56px; margin-top: 15px; letter-spacing: 5px; color: #003451; }
.flex-table { flex-wrap: wrap; width: 100%; max-width: 930px; margin: 0 auto; }
.flex-table > div { display: flex; flex-wrap: wrap; line-height: 1.75; border-bottom: 1px dotted #999; }
.flex-table > div:nth-child(odd) { background-color: transparent; }
.flex-table > div:nth-child(even) { background-color: transparent; }
.flex-table div div { font-size: 24px; line-height: 1.75; padding: 20px; box-sizing: border-box; }
.flex-table div div:nth-child(odd) { width: 25%; text-align: left; font-weight: bold; }
.flex-table div div:nth-child(even) { width: 75%; text-align: left; }

/* content1 */
#content1 { position: relative; padding-bottom: 7px; }
#content1:after { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 100%; height: 55%; background-color: #56bdcb; z-index: -1; }

/* content2 */
#content2 { padding: 184px 0 85px; }
#content2 .Fleft { width: 30%; margin-right: 2%; }
#content2 .Fright { width: 68%; }
#content2 .hl3-wrapper h3 { font-size: 40px; text-align: center; margin-top: 75px; }
#content2 .hl3-wrapper h3 span { display: block; font-size: 50%; text-align: left; margin-top: 22px; }
#content2 .Fleft p { font-size: 20px; color: #003451; line-height: 1.75; margin-top: 20px; }
#content2 .flex-wrapper > div { width: 32%; margin-right: 3%; background-color: #fff; border: 5px solid #003451; border-radius: 20px; overflow: hidden; box-sizing: border-box; }
#content2 .flex-wrapper > div:last-child { margin-right: 0; }
#content2 .flex-wrapper > div img { width: 100%; }
#content2 .flex-wrapper > div p { width: 90%; margin: 10px auto; line-height: 1.5; }

/* content3 */
#content3 { padding: 134px 0; background-color: #56bdcb; }
#content3 .shadow { box-shadow: #333 4px 4px 6px; border: 5px solid #003451; border-radius: 40px; overflow: hidden; box-sizing: border-box; }
#content3 .flex-wrapper { margin: 70px auto 0; }
#content3 .flex-wrapper > div:nth-child(1) { width: 60%; margin-right: 1%; }
#content3 .flex-wrapper > div:nth-child(2) { width: 39%; }
#content3 .flex-wrapper > div:nth-child(1) p { font-size: 20px; color: #003451; line-height: 1.75; margin-top: 46px; }

/* content4 */
#content4 .hl2-wrapper h2 { padding: 82px 0; }

/* content5 */
#content5 { padding: 100px 0 0; }
#content5 > div:nth-child(n + 2):nth-child(odd) { background-color: #4ab4d3; }
#content5 .hl3-wrapper { position: absolute; bottom: 0; right: 0; }
#content5 .hl3-wrapper h3 { font-size: 150px; margin: 0; padding: 0; letter-spacing: 0; }
#content5 h4 { font-size: 30px; line-height: 1.5; color: #003451; margin: 25px 0; }
#content5 .flex-wrapper p { font-size: 22px; line-height: 1.64; color: #003451; }
#content5 div .flex-wrapper { position: relative; padding-bottom: 180px; }
#content5 div:nth-child(1) .flex-wrapper { margin-bottom: 35px; }
#content5 div:nth-child(1) .flex-wrapper > div:nth-child(2) { width: 59%; margin-right: 6%; border: 5px solid #003451; border-radius: 20px; overflow: hidden; box-sizing: border-box; }
#content5 div:nth-child(1) .flex-wrapper > div:nth-child(3) { width: 35%; }
#content5 div:nth-child(even) .flex-wrapper { flex-direction: row-reverse; }
#content5 div:nth-child(n + 2) .flex-wrapper { padding: 72px 0; }
#content5 div:nth-child(n + 2) .flex-wrapper > div:nth-child(1) { width: 48%; border: 5px solid #003451; border-radius: 20px; overflow: hidden; box-sizing: border-box; }
#content5 div:nth-child(n + 2) .flex-wrapper > div:nth-child(2) { width: 48%; background: center / contain no-repeat; }
#content5 div:nth-child(n + 2):nth-child(even) .flex-wrapper > div:nth-child(1) { margin-left: 4%; }
#content5 div:nth-child(n + 2):nth-child(odd) .flex-wrapper > div:nth-child(1) { margin-right: 4%; }
#content5 div:nth-child(2) .flex-wrapper > div:nth-child(2) { background-image: url('./images/2x/vision-bg1@2x.png'); }
#content5 div:nth-child(3) .flex-wrapper > div:nth-child(2) { background-image: url('./images/2x/vision-bg2@2x.png'); }
#content5 div:nth-child(4) .flex-wrapper > div:nth-child(2) { background-image: url('./images/2x/vision-bg3@2x.png'); }
#content5 div:nth-child(5) .flex-wrapper > div:nth-child(2) { background-image: url('./images/2x/vision-bg4@2x.png'); }

/**
* scroll actions
*/


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

	@media (max-width:1366px) {

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

			/* header */

			/* footer */

			/* content1 */

			/* content2 */
			#content2 { padding: 60px 0; }
			#content2 .Fleft, #content2 .Fright { width: 100%; float: none; margin: 0 auto 20px; }
			#content2 .hl3-wrapper h3 { margin-top: 0; font-size: 56px; }
			#content2 .hl3-wrapper h3 span { text-align: center; }

			/* content3 */
			#content3 .flex-wrapper { flex-wrap: wrap; margin: 60px 0; }
			#content3 .flex-wrapper > div:nth-child(1) { width: 100%; margin: 0 auto 20px; }
			#content3 .flex-wrapper > div:nth-child(1) p { width: 90%; padding: 20px; margin: 0 auto; background-color: #fff; box-sizing: border-box; }
			#content3 .flex-wrapper > div:nth-child(2)  { display: none; }

			/* content4 */
			#content4 .hl2-wrapper h2 { font-size: 70px; padding: 60px 0; }

			/* contetn5 */
			#content5 div .flex-wrapper { flex-wrap: wrap; }
			#content5 div .flex-wrapper img { width: 100%; }
			#content5 .hl3-wrapper { position: relative; width: 100%; left: unset; bottom: unset; text-align: center; margin-bottom: 40px; }
			#content5 .hl3-wrapper h3 { font-size: 120px; }
			#content5 div:nth-child(1) .flex-wrapper { padding-bottom: 0; }
			#content5 div:nth-child(1) .flex-wrapper > div:nth-child(2), #content5 div:nth-child(1) .flex-wrapper > div:nth-child(3) { width: 100%; margin: 0 auto 20px; }
			#content5 div:nth-child(n + 2) .flex-wrapper > div:nth-child(1), #content5 div:nth-child(n + 2) .flex-wrapper > div:nth-child(2) { width: 100%; margin: 0 auto 20px; }
			#content5 div:nth-child(n + 2):nth-child(odd) .flex-wrapper > div:nth-child(1) { margin-right: auto; }
			
			@media(max-width:768px) {
				/* common */

				/* header */

				/* footer */

				/* content1 */

				/* content2 */

				/* content3 */

				/* content4 */

				@media (max-width:767px) {
					/* common */
					.hl2-wrapper h2 { font-size: 24px; padding: 20px 0; }
					.hl2-wrapper h2 span { font-size: 50%; letter-spacing: 0px; margin-top: 10px; }
					.hl3-wrapper h3 { font-size: 24px; }

					.flex-table > div { flex-wrap: wrap; }
					.flex-table div div:nth-child(odd), .flex-table div div:nth-child(even) { width: 100%; }
					.flex-table div div:nth-child(odd) { text-align: center; padding-bottom: 0; font-size: 20px; }
					.flex-table div div:nth-child(even) { padding-top: 0; font-size: 16px; }

					/* header */
					#header-title-wrapper { background-color: #56bdcb; }

					/* footer */

					/* content1 */
					#content1:after { top: 0; bottom: unset; height: 40%; }

					/* content2 */
					#content2 { padding: 30px 0; background: linear-gradient(#56bdcb 0, #56bdcb 20%, transparent 20%, transparent 100% ); }
					#content2 .hl3-wrapper h3 { font-size: 24px; }
					#content2 .Fleft p { font-size: 14px; width: 90%; margin: 20px auto; }
					#content2 .Fleft, #content2 .Fright { flex-wrap: wrap; }
					#content2 .flex-wrapper > div { width: 100%; margin: 0 auto 20px; }

					/* content3 */
					#content3 { padding: 0; background: unset; }
					#content3 .content-inner { width: 100%; }
					#content3 .shadow { box-shadow: unset; border: unset; border-radius: unset; }
					#content3 .flex-wrapper { margin: 0 auto; }
					#content3 .flex-wrapper > div:nth-child(1) p { font-size: 14px; padding: 0; }

					/* content4 */
					#content4 .hl2-wrapper h2 { font-size: 24px; padding: 30px 0; }

					/* content5 */
					#content5 { padding-top: 0; }
					#content5 div:nth-child(1) .flex-wrapper { margin-bottom: 0; }
					#content5 div:nth-child(n + 2) .flex-wrapper { padding: 30px 0; }
					#content5 .hl3-wrapper h3 { font-size: 46px; }
					#content5 h4 { font-size: 18px; text-align: center; }
					#content5 .flex-wrapper p { font-size: 14px; }

					@media (max-width:512px) {

						@media (max-width:456px) {

							@media (max-width:321px) {

							}
						}
					}
				}
			}
		}
	}
}