/* -------------------- 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 { text-align: center; padding: 35px 0; margin-bottom: 65px; }
.hl3-wrapper h3 { font-size: 136px; color: #003451; }
.hl3-wrapper h3 span { display: block; font-size: 25%; letter-spacing: 36px; margin-top: 22px; }

.float-wrapper { margin-bottom: 70px; }
.float-wrapper > div:nth-child(2) { box-shadow: #333 4px 4px 6px; border: 5px solid #003451; border-radius: 20px; overflow: hidden; box-sizing: border-box; }
.float-wrapper h4 { font-size: 36px; line-height: 1.5; color: #003451; margin-bottom: 40px; }
.float-wrapper p { font-size: 20px; line-height: 1.8; color: #003451; }
.float-wrapper img { width: 100%; }

#content2, #content3, #content4, #content5 { padding: 35px 0; margin-bottom: 150px; }

/* content1 */
#content1 { padding-bottom: 80px; }

/* content2 */
#content2 { background-color: #fed700; }

/* content3 */
#content3 .hl3-wrapper { background-color: #8abbbb; }

/* content4 */
#content4 { background-color: #94d3f0; }

/* content5 */
#content5 .hl3-wrapper { background-color: #80d7e0; }

/**
* scroll actions
*/


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

	@media (max-width:1366px) {

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

			/* header */

			/* footer */

			/* content1 */

			/* content2 */

			/* content3 */

			/* content4 */
			
			@media(max-width:768px) {
				/* common */
				.hl3-wrapper h3 { font-size: 96px; }
				.float-wrapper h4 { text-align: center; }
				.float-wrapper p { margin-top: 20px; }

				#content2, #content3, #content4, #content5 { margin-bottom: 30px; }

				/* header */

				/* footer */

				/* content1 */
				#content1 .flex-wrapper { flex-wrap: wrap; }
				#content1 .flex-wrapper > div { width: 50%; }

				/* 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 { padding: 10px 0; margin-bottom: 20px; }
					.hl3-wrapper h3 { font-size: 28px; }
					.hl3-wrapper h3 span { font-size: 50%; letter-spacing: 0; }
					.float-wrapper { margin-bottom: 20px; }
					.float-wrapper h4 { font-size: 18px; margin-bottom: 20px; }
					.float-wrapper p { font-size: 14px; }
					#content2, #content3, #content4, #content5 { padding: 20px 0; margin-bottom: 20px; }

					/* header */

					/* footer */

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

					/* content2 */

					/* content3 */

					/* content4 */

					@media (max-width:512px) {

						@media (max-width:456px) {

							@media (max-width:321px) {

							}
						}
					}
				}
			}
		}
	}
}