@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    pagetop
 *       =1-4    footer
 *       =1-5    sidepanel
 *
 * ===============================================================
*/



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

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

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#container {
			right: 0;
			z-index: 2;
			margin: 0;
			width: 100%;
			-moz-transition: all 300ms ease-in-out;
			-webkit-transition: all 300ms ease-in-out;
			transition: all 300ms ease-in-out;
		}
		.panelopened #container {
			right: 250px;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#container {
			width: 100%;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#container {
			width: 100%;
		}
	}


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

	#header {
		width: 100%;
	}
	#header section{
		margin:0 10px 10px 10px;
	}
	#header section h1{
		text-align:center;
		margin:0 auto 10px auto;
	}
	#header section p.header01{
		position:fixed;
		top:0;
		left: 0;
	}
	#header section p.header02{
		position:fixed;
		top:0;
		right: 0;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#header section h1{
				padding-top:15px;
			}
			#header section p.header01,
			#header section p.header02{
				width:60px;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#header section h1{
				padding-top:20px;
				width:75%;
			}
			#header section p.header01,
			#header section p.header02{
				width:140px;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#header section h1{
				padding-top:30px;
			}
			#header section p.header01,
			#header section p.header02{
				width:200px;
			}
		}


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

	#contents {
		width: 100%;
		margin: 0 auto;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#contents {
				padding-bottom: 140px;	/* #footerのheightと同じ値（フッターを最下部に固定する為）+余白40px */
				width:95%;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#contents {
				padding-bottom: 150px;	/* #footerのheightと同じ値（フッターを最下部に固定する為）+余白40px */
				width:90%;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#contents {
				padding-bottom: 160px;	/* #footerのheightと同じ値（フッターを最下部に固定する為）+余白40px */
				width:960px;
			}
		}


		/* [ main contents ]
		------------------------------ */
		#contents #main {
		}

		#contents #main #sns_btn {
			margin-bottom:20px;
			float:right;
		}
		#contents #main #sns_btn .twitter,
		#contents #main #sns_btn .facebook,
		#contents #main #sns_btn .line{
			float: left;
			margin: 0px 10px 0px 0px;
			padding: 0px;
			display: inline;
			width:95px;
		}


			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				#contents #main {
				}
				#contents #main #sns_btn .line{
					width: 83px;
				}
			}

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

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 960px) {
				#contents #main {
					width: 960px;
				}
			}

	/** =1-3
	 * pagetop
	 * ----------------------------------
	 */

	#pagetop {
		display: none;
		position: fixed;
		right: 10px;
		bottom: 0px;
		z-index: 10;
	}

	#pagetop a {
		display: block;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#pagetop {
				width: 65px;
				height: auto;
			}
		}

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

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#pagetop {
				width: 100px;
				height: 44px;
			}
		}


	/** =1-4
	 * footer
	 * ----------------------------------
	 */

	#footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	#footer section{
		margin:0 10px;
	}
	#footer section #footer_nav{
		margin:10px 0 0 0;
	}
	#footer section p.copyright{
		clear:both;
		font-size:80%;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#footer {
					height: 100px;
			}

			#footer section #footer_nav{
				position:relative;
				overflow:hidden;
			}
			#footer section #footer_nav li{
				float:left;
				margin:0 5px 10px 5px;
				width:65px;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#footer {
					height: 110px;
			}
			
			#footer section #footer_nav li{
				float:left;
				margin:0 10px 10px 0;
				width:90px;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#footer {
					height: 120px;
			}
			
			#footer section #footer_nav li{
				float:left;
				margin:0 10px 10px 0;
			}
		}