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

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



/** =1
 * ========================================
 * modules
 * ========================================
 */

.navHandler {
	display: none;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		.navHandler {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
		}
		.navHandler a {
			display: block;
			width: 80px;
			height: 80px;
			background: url(../src/image/common/nav.svg) no-repeat center center;
			background-size:80%;
		}
		.navHandler span {
			display: none;
		}
		#nav .navHandler {
			position: static;
		}
	}

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


.navList li {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		.navList {
		padding-top: 40px;
		}
		.navList li {
		margin: 25px;
		text-align: center;
		}
		.navList li a {
			display: block;
			padding: 0.1em 0;
			font-size: 250%; 
			color: #FFFFFF;
			line-height: 1.2;
		}
		.navList li a span {
			display: block;
			font-size: 25%; 
			letter-spacing: 0.1em;
		}
		
		.navList li.twitter,
		.navList li.booth,
		.navList li.toranoana{
	}
		.navList li.twitter a,
		.navList li.booth a,
		.navList li.toranoana a{
			width: 200px;
			padding: 0 ;
		display: block;
		margin: 0 auto;
		}
		.navList li.twitter a{
			background: #2aa3ef url(../src/image/common/twitter.svg) no-repeat 10% center;
			background-size:25%;
			font-size: 20px;
			text-indent: 1.2em;
			font-weight: bold;
			text-align: center;
			padding: 10px 0 ;
			margin: 50px auto -10px;
		}
		.navList li.toranoana a{
			background: #ffb531;
			color: #da0721;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			padding: 10px 0 ;
			font-family: "Helvetica Neue",
				Arial,
				"Hiragino Kaku Gothic ProN",
				"Hiragino Sans",
				Meiryo,
				sans-serif;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 640px) {
		.navList li {
			margin-bottom: 10px;
		}
		.navList li:last-child {
			margin-bottom: 0;
		}
		.navList li a {
			display: block;
			padding: 0.1em 0;
			font-size: 200%; 
			color: #FFFFFF;
			line-height: 1;
		}
		.navList li a span {
			font-size: 25%; 
			margin: -2em 0 0;
			display: inline-block;
			letter-spacing: 0.1em;
		}
		
		.navList li.twitter a,
		.navList li.booth a,
		.navList li.toranoana a{
			width: 100px;
			padding: 0 ;
		}
		.navList li.twitter a{
			background: #2aa3ef url(../src/image/common/twitter.svg) no-repeat 10% center;
			background-size:25%;
			font-size: 14px;
			text-indent: 1.2em;
			font-weight: bold;
			text-align: center;
			padding: 4px 0 ;
			margin: 30px 0 -5px;
		}
		.navList li.toranoana a{
			background: #ffb531;
			/*color: #da0721;*/
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			padding: 4px 0 ;
			font-family: "Helvetica Neue",
				Arial,
				"Hiragino Kaku Gothic ProN",
				"Hiragino Sans",
				Meiryo,
				sans-serif;
		}
	}



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

.formLabel {
	font-weight: bold;
	font-weight: normal;
}

.formField {
}
.formField input ,
.formField textarea {
	border: 1px solid  #CCC;
	border-radius: 3px;
}
.formButtons {
	padding: 10px;
	text-align: center;
}
.formButtons input.btn{
	color: #FFFFFF;
	font-weight: bold;
	padding: 10px 20px;
	background: linear-gradient(to top, transparent, #339999 0%, #99cccc 100%);
	border: none;
	border-radius: 3px;
	cursor: pointer;
	margin: 10px;
}
.formButtons input.btn:hover{
	background: linear-gradient(to top, transparent, #339999 0%, #66cccc 100%);
}

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

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

		.formLabel {
			font-weight: bold;
			padding: 5px 0 5px 1.6em;
			position: relative;
		}
		.formLabel::after {
			display: block;
			content: '';
			position: absolute;
			top: 1em;
			left: 0.25em;
			width: 8px;
			height: 3px;
			background-color: #339999;
		}

		.formField {
			padding: 5px 0;
		}
		.formField input {
			padding: 10px;
			width: 95%;
		}
		.formField textarea {
			padding: 10px;
			width: 95%;
			height: 200px;
		}
		.formButtons input.btn{
			font-size: 15px;
			padding: 15px  0;
			width: 50%;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 640px) {
		.form {
		}
		.formLabel {
			float: left;
			width: 130px;
			padding: 16px 0 0;
			text-align: right;
		}

		.formField {
			padding: 5px 0 5px 140px;
		}
		.formField input {
			padding: 10px;
			width: 50%;
		}
		.formField textarea {
			padding: 10px;
			width: 80%;
			height: 240px;
		}
		.formButtons input.btn{
			width: 25%;
		}
	}


/*
 * 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;
}

.pagetop a {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: url(../src/image/common/pagetop.svg) no-repeat center center;
	background-size:80%;
}
.pagetop a:hover {
	background-color: #ffcc00;
}
.pagetop span {
	display: none;
}




/*
 * footer
 * ----------------------------------
 */

.l-footer p {
	color: #FFFFFF;
	text-align: center;
	padding: 2em;
	font-size: 80%;
}