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

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: layout.css
 * Summary:   レイアウト用スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    structures
 *       =1-1    header
 *       =1-2    contents
 *                 - main contents
 *                 - navigation
 *       =1-3    footer
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * structures
 * ========================================
 */

.l-container {
	position: relative;
	height: auto;
	min-height: 100%;
	width: 100%;
	margin: 0 auto;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 735px) {
		* {
			word-wrap: break-word;
		}

		body {
			overflow-x: hidden;
		}

		.l-container {
		}
	}

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



.l-inner {
	margin: 0 auto;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 735px) {
		.l-inner {
			width: 100%;
		}
	}

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





	/** =1-1
	 * header
	 * ----------------------------------
	 */

	.l-header {
		width: 100%;
		height: 330px;
		margin-bottom: 30px;
		text-align: center;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 735px) {
			.l-header {
				height: auto;
			}

			.l-header img {
				width: 100%;
			}
		}

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


	/** =1-1
	 * informationNav
	 * ----------------------------------
	 */

	.l-informationNav {
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 735px) {
			.l-informationNav {
				width: 90%;
				margin: 0 auto 40px;
			}

			.l-informationNav .pc {
				display: none;
			}

			.l-informationNav div {
				float: left;
			}
			.l-informationNav .osakajo {
				width: 50%;
			}
			.l-informationNav .younglion {
				width: 50%;
			}

			.l-informationNav .twitter {
				display: none;
			}

			.l-informationNav dt {
				text-align: center;
			}
			.l-informationNav dt img {
				width: 80%;
			}

			.l-informationNav dd {
				text-align: center;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 736px) {
			.l-informationNav {
				width: 860px;
				margin: 0 auto 40px;
				padding: 0 50px;
			}

			.l-informationNav .sp {
				display: none;
			}

			.l-informationNav div {
				margin-right: 10px;
				padding: 0 5px;
				float: left;
			}
			.l-informationNav div.osakajo {
				width: 260px;
			}
			.l-informationNav div.younglion {
				width: 302px;
			}
			.l-informationNav div.twitter {
				width: 250px;
				margin-right: 0;
				padding: 0 0 0 5px;
			}

			.l-informationNav dd {
				padding: 5px 0;
			}

			.l-informationNav div.twitter .twitterWidget {
				width: 246px;
				margin: 0;
				padding: 5px 10px;
				/*border: 2px solid #B6090D;*/
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				background: rgba(255, 255, 255, 0.5);
			}
			.l-informationNav div.twitter iframe {
				height: 350px !important;
			}
		}


	/** =1-2
	 * contents
	 * ----------------------------------
	 */

	.l-contents {
		padding-bottom: 150px;
	}

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

			.l-contents img {
				max-width: 100%;
			}
		}

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


		/* [ main contents ]
		------------------------------ */
		.l-main {
			padding: 20px;
		}

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

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

		.l-article {
			margin: 0 auto 20px;
		}

		.l-article .section {
			margin-bottom: 30px;
		}

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

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 736px) {
				.l-article {
					width: 860px;
					margin: 0 auto 30px;
				}
			}


	/** =1-3
	 * footer
	 * ----------------------------------
	 */

	.l-footer {
		width: 100%;
		padding-top: 30px;
	}

	.l-footer .l-inner {
		position: relative;
		margin: 0 auto;
		padding: 20px 0;
	}

	.l-footer ul {
		float: left;
		width: 250px;
		padding-left: 20px;
	}

	.l-footer li {
		float: left;
		width: 110px;
		height: 20px;
	}

	.l-footer p {
		padding-right: 20px;
		text-align: right;
	}

	.l-footer #twitterLink {
		position: absolute;
		top: -120px;
		right: 20px;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 735px) {
			.l-footer {
			}
			.l-footer ul {
				float: none;
			}
			.l-footer p {
				float: none;
			}
		}

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