html { min-height: 100%; }

body {
	position: absolute;
	min-height: 100%;
	min-width: 100%;
	width: 100%;
	color: #666666;
}

/* PC Layout */
@media screen and (min-width: 767px) {

	/* description */
	.description {
		font-size: 1.2rem;
		line-height: 1.2rem;
		color: green;
	}

	/* siteTitle */
	#siteTitle {
		width: 100%;
		height: calc(100vh - 65px);
		background: url(../_image/section_bg/title_bg.jpg) no-repeat;
		background-size: cover;
		color: #FFFFFF;
	}
		#siteTitle h1 {
			width: 100%;
			font-size: 4.0rem;
			font-weight: bold;
			line-height: 6.0rem;
			text-shadow: 5px 5px 5px #666666;
			text-align: center;
			padding: 15% 15% 3% 15%;
		}
		#siteTitle h2 {
			font-size: 2.0rem;
			line-height: 3.0rem;
			text-align: center;
			text-shadow: 5px 5px 5px #666666;
			padding: 0 23%;
		}
		#siteTitle #siteTitleClose {
			width: 90%;
			font-size: 1.5rem;
			line-height: 3.0rem;
			text-align: center;
			margin: 5%;
			cursor: pointer;
		}

	/* header */
	header {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 60px;
		background: #FFFFFF;
		box-shadow: 0 3px 3px #CCCCCC;
	}
		header #LogoImageTop {width: 20%;max-width: 180px;margin: 10px;}
		header nav {
			display: inline-block;
			vertical-align: top;
			padding-left: 30px;
			padding-top: 25px;
		}
			header nav ul {position: relative;width: 530px;}
				header nav ul li{
					position: relative;
					display: inline-block;
					margin-right: 20px;
					font-size: 1.5rem;
				}

	/* sideBar */
	#sideBarSwitch {
		position: fixed;
		top: 61px;
		left: calc(-20% + 100px);
		z-index: 20;
		width: 20%;
		background: #FFFFFF;
		opacity: 0.8;
		padding-top: 10px;
	}
		#sideBarSwitch img {
			float: right;
			width: 100px;
			padding: 5px;
			cursor: pointer;
		}
	#sideBar {
		position: fixed;
		top: 0;
		left: -20%;
		z-index: 10;
		width: 20%;
		height: 100vh;
		background: #FFFFFF;
		opacity: 0.8;
	}
		#sideBar #LogoImageMenu {width: 100%;max-width: 180px;margin: 10px;}
		#sideBar #sideBarLogo {max-height: 40px;margin: 5%;}
		#sideBar #sideBarMenuClose {text-align: left;padding: 5px 0 0 5px;}
			#sideBar #sideBarMenuClose img {width: 90px;cursor: pointer;}
			#sideBar nav ul li {
				width: 100%;
				height: 30px;
				background: #FFFFFF;
				box-shadow: 0 3px 3px #AAAAAA;
				font-size: 1.3rem;
				text-align: right;
				vertical-align: top;
				margin-top: 7px;
				padding: 7px;
			}

	/* contents*/
	#contents {width: 96%;margin-top: 10px;margin: 0 2%;}

		/* contents */
		#contents .sectionFrame {position: relative;word-wrap: break-word;margin-bottom: 10%;}
			#contents .sectionFrame a { font-size: 1.5rem; color: white; margin-left: 10px; }
			#contents .sectionFrame > div { position: relative; width: 75%; }
			#contents .sectionFrame > div .link { width: 100%; text-align:right; }
			#contents .sectionFrame .sectionItemLeft { margin-left: 3%; }
			#contents .sectionFrame .sectionItemRight { margin-left: 22%; }
			#contents .sectionFrame .sectionHeader {
				position: relative;
				color: #FFFFFF;
				text-shadow: 5px 5px 5px #666666;
				font-size: 3.0rem;
				line-height: 5.0rem;
				font-weight: bold;
				padding: 2%;
			}
			#contents .sectionFrame .sectionText {
				position: relative;
				color: #FFFFFF;
				text-shadow: 1px 1px 3px #666666;
				font-size: 2.2rem;
				line-height: 4.0rem;
				padding: 25px;
			}
				#contents .sectionFrame .sectionText h1 {
					font-size: 3.5rem;
					font-weight: bold;
					margin: 0;
				}
				#contents .sectionFrame .sectionText .link a {
					background: white;
					color: red;
					font-size: 2.0rem;
					border-radius: 20px;
					padding-top: 5px;
					padding-bottom: 5px;
					padding-left: 30px;
					padding-right: 30px;
					text-shadow: 2px 2px 5px darkgray;
				}
				#contents .sectionFrame .sectionText ul li {
					list-style-type: square;
					font-size: 1.7rem;
					line-height: 150%;
					margin-left: 5px;
					margin-bottom: 2%;
				}
					#contents .sectionFrame .sectionText ul li .infoHeader { font-size: 2.2rem; font-weight: bold; }

			/* companyInfo */
			#contents .sectionFrame .sectionTable {
				position: relative;
				color: #333333;
				font-size: 1.8rem;
				line-height: 3.0rem;
				padding: 25px;
			}
				#contents .sectionFrame .sectionTable > .sectionTableRow:first-child { border: thin solid #333333; }
				#contents .sectionFrame .sectionTable > .sectionTableRow { display: table; width:100%; border: thin solid #333333; border-top: none; }
				#contents .sectionFrame .sectionTable .tableHeader {
					display: table-cell;
					vertical-align: top;
					width: 25%;
					padding: 10px;
				}
				#contents .sectionFrame .sectionTable .tableText {
					display: table-cell;
					vertical-align: top;
					width: 75%;
					border-left: thin solid #333333;
					padding: 10px;
				}
					#contents .sectionFrame .sectionTable .tableText a {font-size: inherit;color: inherit;margin-left: inherit;}
					#contents .sectionFrame form input[type=text], #contents .sectionFrame form textarea{ width: 95%; padding: 5px; font-size: 1.5rem; }
					#contents .sectionFrame form input[type=button]{ width: 200px; padding: 5px; font-size: 1.5rem; }

	/* footer */
	footer { position: relative; text-align: center; border-top: thin solid #666666; padding: 5px; }
	
}

/* Mobile Layout */
@media screen and (max-width: 767px) {

	/* description */
	.description {
		font-size: 1.2rem;
		line-height: 1.2rem;
		color: green;
	}

	/* siteTitle */
	#siteTitle {
		width: 100%;
		height: calc(100vh - 35px);
		background: url(../_image/section_bg/title_bg.jpg) no-repeat;
		background-size: cover;
		color: #FFFFFF;
	}
		#siteTitle h1 {
			width: 100%;
			font-size: 2.0rem;
			font-weight: bold;
			line-height: 3.0rem;
			text-shadow: 5px 5px 5px #666666;
			text-align: center;
			padding: 15% 15% 3% 15%;
		}
		#siteTitle h2 {
			font-size: 1.5rem;
			line-height: 2.0rem;
			text-align: center;
			text-shadow: 5px 5px 5px #666666;
			padding: 0 23%;
		}
		#siteTitle #siteTitleClose {
			width: 90%;
			font-size: 1.5rem;
			line-height: 3.0rem;
			text-align: center;
			margin: 5%;
			cursor: pointer;
		}

	/* header */
	header {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 70px;
		background: #FFFFFF;
		box-shadow: 0 3px 3px #CCCCCC;
	}
		header #LogoImageTop { width: 40%; margin: 0;}
		header nav { width: 100%; margin: 3px;}
			header nav ul { position: relative; width: 100%; }
				header nav ul li{ position: relative; display: inline-block; margin: 3px; font-size: 1.2rem; }
				
	/* sideBar */
	#sideBarSwitch { position: fixed;	width: 0%; left: -10%; }
		#sideBarSwitch img { display: none; }
	#sideBar { position: fixed; left: -10%; width: 0%; }
		#sideBar #LogoImageMenu { width: 0%; }
		#sideBar #sideBarLogo { width: 0%; }
			#sideBar #sideBarMenuClose img { width: 0%; }
			#sideBar nav ul li { width: 0%; }

	/* contents*/
	#contents { width: 100%; }

		/* contents */
		#contents .sectionFrame {position: relative;word-wrap: break-word;margin-bottom: 5%;}
			#contents .sectionFrame a { font-size: 1.2rem; color: white; margin-left: 3%; }
			#contents .sectionFrame > div { position: relative; width: 100%; }
			#contents .sectionFrame > div .link { width: 100%; text-align:right; }
			#contents .sectionFrame .sectionItemLeft, #contents .sectionFrame .sectionItemRight {  }
			#contents .sectionFrame .sectionHeader {
				position: relative;
				color: #FFFFFF;
				text-shadow: 5px 5px 5px #666666;
				font-size: 2.0rem;
				line-height: 3.5rem;
				font-weight: bold;
				padding: 3%;
			}
			#contents .sectionFrame .sectionText {
				position: relative;
				color: #FFFFFF;
				text-shadow: 1px 1px 3px #666666;
				font-size: 1.5rem;
				line-height: 2.5rem;
				padding: 3%;
			}
				#contents .sectionFrame .sectionText h1 {
					font-size: 2.0rem;
					font-weight: bold;
					margin: 0;
				}
				#contents .sectionFrame .sectionText .link a {
					background: white;
					color: red;
					font-size: 2.0rem;
					border-radius: 20px;
					padding-top: 5px;
					padding-bottom: 5px;
					padding-left: 30px;
					padding-right: 30px;
					text-shadow: 2px 2px 5px darkgray;
				}
				#contents .sectionFrame .sectionText ul li {
					list-style-type: square;
					font-size: 1.2rem;
					line-height: 120%;
					margin-left: 5%;
					margin-bottom: 5%;
				}
					#contents .sectionFrame .sectionText ul li .infoHeader { font-size: 1.5rem; line-height: 130%; font-weight: bold; }

			/* companyInfo */
			#contents .sectionFrame .sectionTable {
				position: relative;
				color: #333333;
				font-size: 1.2rem;
				line-height: 1.5rem;
				padding: 3px;
			}
				#contents .sectionFrame .sectionTable > .sectionTableRow:first-child { border: thin solid #333333; }
				#contents .sectionFrame .sectionTable > .sectionTableRow { display: table; width:100%; border: thin solid #333333; border-top: none; }
				#contents .sectionFrame .sectionTable .tableHeader {
					display: table-cell;
					vertical-align: top;
					width: 30%;
					padding: 5px;
				}
				#contents .sectionFrame .sectionTable .tableText {
					display: table-cell;
					vertical-align: top;
					width: 70%;
					border-left: thin solid #333333;
					padding: 5px;
				}
					#contents .sectionFrame .sectionTable .tableText a {font-size: inherit;color: inherit;margin-left: inherit;}
					#contents .sectionFrame form input[type=text], #contents .sectionFrame form textarea{ width: 95%; padding: 5px; font-size: 1.5rem; }
					#contents .sectionFrame form input[type=button]{ width: 200px; padding: 5px; font-size: 1.5rem; }

	/* footer */
	footer {
		position: relative;
		text-align: center;
		border-top: thin solid #666666;
		padding: 3%;
	}
	
}