@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: module.css
 * Summary:   モジュール用スタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    modules
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * modules
 * ========================================
 */
#contents {
	position: relative;
}
.navHandler {
	display: none;
}

.navHandler {
	display: block;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2;
}
.close {
	position: relative;
	z-index: 3;
}
.l-nav {
	border-top: 1px solid #fff;
}
#nav .navHandler {
	position: static;
}


.navList .navListItem {
	border-bottom: 1px solid #fff;
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 1.4rem;
	padding: 1rem;
}
.borderNone {
	border-bottom: none!important;
}

.navList li a {
	display: block;
	color: #fff;
}
.subNavListItem {
	padding: 1rem 2rem;
}
.subNavListItem a {
	font-weight: bold;
	font-size: 1.4rem;
}

	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  position: relative;
	  width: 50px;
	  height: 44px;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: #fff;
	  border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 20px;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}

	.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-20px) rotate(45deg);
}

.close {
	position: fixed;
	top: 20px;
	right: 20px;
	background-color: #22a93e;
}


#nav {
	/* position: fixed; */
}

/*
 * form
 * ----------------------------------
 */

.formLabel {
	font-weight: bold;
}

.formField {
	border-bottom: 1px dotted #CCC;
}

.formButtons {
	padding: 10px;
	text-align: center;
}

.required {
	margin-left: 5px;
	color: #F33;
	font-size: 80%;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		.form {
			padding: 0 10px;
		}

		.formLabel {
			padding: 5px 0;
		}

		.formField {
			margin-bottom: 10px;
			padding: 5px 0;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		.form {
			padding: 0 10px;
		}

		.formLabel {
			padding: 5px 0;
		}

		.formField {
			margin-bottom: 10px;
			padding: 5px 0;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		.form {
			padding: 0 20px;
		}

		.formLabel {
			float: left;
			width: 180px;
			padding: 5px 0;
		}

		.formField {
			padding: 5px 0 5px 180px;
		}
	}



/*
 * iframe
 * ----------------------------------
 */

.iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}



/*
 * pagetop
 * ----------------------------------
 */

.pagetop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 10;
	display: inline-block;
}



.pagetop a {
	align-items: center;
	justify-content: center;
	display: flex;
	width: 60px;
	height: 60px;
	background-color: #22a93e;
}
.pagetop .fas:before {
 color: #fff;
 font-size: 3rem;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		.pagetop {
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		.pagetop {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		.pagetop {
		}
	}