@charset "UTF-8";

/* ------------------------------------------------------------
	Guide CSS
	Author: Tadanori Sumi
	Contact: http://www.summertriangle.jp/contact/
------------------------------------------------------------ */

/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; vertical-align: top; line-height: 1.5; font-size: 100%; font-weight: normal; background: transparent; border: 0; outline: 0 }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
ul, ol { list-style: none }
abbr[title], dfn[titile] { border-bottom: 1px dotted; cursor: help }
table { border-collapse: collapse; border-spacing: 0 }
input, select { vertical-align: middle }

/* Basic Font */
body { color: #fff; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "Meiryo", "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif; font-size: 75% }

	/* Basic Text */
	a { color: #0095d9; text-decoration: none; cursor: pointer }
		a:hover { color: #fff; text-shadow: 0 0 3px #165e83 }
		a:active { color: #fff }

/* Layout Fixed Footer */
html, body { height: 100% }
	#container { min-height: 100%; height: auto!important; height: 100%; margin: 0 auto -75px }
	aside#sidebar { padding-bottom: 75px }
	footer { height: 75px }

/* Layout */
body { background: url(../../img/bg.jpg) no-repeat #203c4a center top fixed; background-size: cover }

/* Header */
header { border-top: 6px solid #333; border-top: 6px solid rgba(0,0,0,.6) }
	hgroup { width: 93%; height: 96px; overflow: hidden; margin: 0 auto }
		header h1 { float: left }
		header h2 { margin-top: 30px; margin-left: 180px; font-size: 83.3% }
	nav { clear: left; width: 99%; height: 45px; margin: 0 auto 15px }
			nav ul li { float: left; width: 31.8%; margin: 0 .6%; text-align: center; line-height: 45px; font-size: 108.3%; background: url(../../img/blank.png) no-repeat right center }
				nav ul li a { display: block; width: 100%; height: 45px; color: #fff; text-shadow: 0 -1px 0 #000; background: #165e83; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,149,217,0)), to(rgba(0,149,217,.9))); background: -moz-linear-gradient(top, rgba(0,149,217,.9), rgba(0,149,217,.0)); border: 1px solid #0095d9; border: 1px solid rgba(0,149,217,.3); border-radius: 6px; -moz-border-radius: 6px; -webkit-box-shadow: 0 1.5px 1.5px rgba(0,0,0,.75); -moz-box-shadow: 0 .9px .9px rgba(0,0,0,.75) }
				nav ul li a:active { background: #a0d8ef; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,149,217,0)), to(rgba(0,149,217,.45))); background: -moz-linear-gradient(top, rgba(0,149,217,0), rgba(0,149,217,.45)) }
				nav ul li a small { display: block; position: relative; top: 1.2em; left: 0; line-height: .9; font-size: 75% }

/* Main */
#main { clear: left; color: #333; background: #f3f6f6; background: rgba(255,255,255,.75); border-top: 1px solid #fff; box-shadow: 0 -1px 2px rgba(0,0,0,.6); -webkit-box-shadow: 0 -1px 2px rgba(0,0,0,.6); -moz-box-shadow: 0 -1px 2px rgba(0,0,0,.6) }
		#main a:hover { color: #666 }
		#main a:active { color: #666 }
	p#breadcrumb { padding: 9px 1.5%; font-size: 83.3% }
	section { padding: 15px 3%; background: #fff }
		section aside { margin: 15px 0 0; padding: 0 3% 15px; border: 1px dashed #ccc; border-radius: 6px; -moz-border-radius: 6px }
	aside#sidebar p { padding: 9px 1.5%; text-align: center; color: #333; font-size: 83.3%; background: #f3f6f6; background: rgba(255,255,255,.75); border-bottom: 1px solid #fff; box-shadow: 0 2px 2px rgba(0,0,0,.6); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.6); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.6) }
		aside#sidebar p a { margin: 0 3px; padding: 3px 9px; color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#0095d9), to(#007bbb)); background: -moz-linear-gradient(top, #0095d9, #007bbb); border-radius: 4.5px; -moz-border-radius: 4.5px }
			aside#sidebar p a:active { background: #007bbb }

	/* Section */
	section h2 { margin: 15px 0 6px; line-height: 1.8; text-align: center; border-bottom: #a3a3a2 solid 1px }
		section h2 span { margin-left: .9em; line-height: 2.1; font-size: 91.7% }
	section h3 { margin: 15px 0 6px; font-weight: bold }
	section h4 { margin: 15px 0 6px; padding: 0 1.5%; line-height: 2.4; background-color: #fce9f2; border-radius: 4.5px; -moz-border-radius: 4.5px }
	section p, section dl, section ul, section ol, section table { margin: 6px 1.5% }
		section strong { color: #c9171e; font-weight: bold }
		section em { color: #c9171e; font-style: normal }
			section ul li { margin-bottom: .6em; margin-left: 1.8em; list-style: disc }
			section ol li { margin-bottom: .6em; margin-left: 1.8em; list-style: decimal }
				section ol li ul { margin: 9px 0; padding: 9px 3%; background-color: #f2f2f2; border-radius: 4.5px; -moz-border-radius: 4.5px  }
				section ol li ul li { margin: 0; list-style: none }
			section dl dt { padding: 6px 1.5%; background-color: #efefef; border: 1px solid #e7e7eb; border-bottom: 1px dotted #e7e7eb; border-top-left-radius: 4.5px; border-top-right-radius: 4.5px; -moz-border-top-left-radius: 4.5px; -moz-border-top-right-radius: 4.5px }
			section dl dd { margin-bottom: 9px; padding: 6px 1.5%; border: 1px solid #e7e7eb; border-top: none; border-bottom-left-radius: 4.5px; border-bottom-right-radius: 4.5px; -moz-border-bottom-left-radius: 4.5px; -moz-border-bottom-right-radius: 4.5px }
	section blockquote { margin: 9px 0; padding: 9px 1.5%; background-color: #f2f2f2; border-radius: 4.5px; -moz-border-radius: 4.5px }
	section table { margin: 6px 1.5% }
		section table th { padding: 6px 9px; font-weight: normal; white-space: nowrap; background-color: #f2f2f2; border: 1px solid #ccc  }
		section table td { padding: 6px 9px; font-weight: normal; border: 1px solid #ccc  }

		/* Section ID */
		section#summary ul li { margin: 0 0 6px; padding: 4.5px; list-style: none; background: #eee; border-radius: 4.5px; -moz-border-radius: 4.5px }
			section#summary ul li div { padding: 6px 1.5%; background: #fff; border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px }
		section p.revision { text-align: right }
		section#copyright strong { color: #333 }
		section.outservice img { margin-right: 9px; vertical-align: middle }
		section#commentflow ol li { margin: 0 0 9px; padding: 6px 1.5%; list-style-position: inside; background-color: #efefef; border: 1px solid #e7e7eb; border-radius: 4.5px; -moz-border-radius: 4.5px }
			section#commentflow ol li small { display: block; margin-left: 1.5em }

			/* Contact */
			p#flow { margin: 15px 0; text-align: center; color: #a3a3a2 }
				p#flow em { padding: 6px 9px; color: #fff; background-color: #595857; border: 1px solid #2b2b2b; border-radius: 4.5px; -moz-border-radius: 4.5px }
				p#flow span { padding: 6px 9px; color: #a3a3a2; background-color: #e7e7eb; border: 1px solid #a3a3a2; border-radius: 4.5px; -moz-border-radius: 4.5px }
			section#contact dl dt { border: 1px solid #e7e7eb; border-radius: 4.5px; -moz-border-radius: 4.5px }
				section#contact dl dd { margin-bottom: 0; border: none }
			form { width: 90%; margin: 15px auto 0; padding: 0 1.5%; border: 1px dashed #ccc; border-radius: 6px; -moz-border-radius: 6px  }
				form dl { margin: 9px 0 }
					form dl dt, form dl dd { margin: 0 }
						form dl dd { padding: 6px 0 }
							form dl small { margin-left: 9px }
							form dl a small { margin-left: 0 }
							input#username, input#mailaddress, textarea { width: 97%; padding: 6px 1.5%; line-height: 1.8; border: solid 1px #a3a3a2; border-radius: 4.5px; -moz-border-radius: 4.5px }
							textarea { height: 12em }
							input#accept { margin-left: 15px }
							button { margin-right: 9px; background: #fff; border: none }
								button span { display: block; padding: 6px 15px; color: #fff; text-shadow: 0 -1px 0 #000; background: #0095d9; background: -webkit-gradient(linear, left top, left bottom, from(#0095d9), to(#007bbb)); background: -moz-linear-gradient(top, #0095d9, #007bbb); border: 1px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.6); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.6); border-radius: 4.5px; -moz-border-radius: 4.5px }
									button:hover span { background: #007bbb }
									button#stop span { padding: 3px 9px; text-shadow: none; background: #a0d8ef; background: -webkit-gradient(linear, left top, left bottom, from(#2ca9e1), to(#0095d9)); background: -moz-linear-gradient(top, #2ca9e1, #0095d9); border: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none }
										button#stop:hover span { background: #0095d9 }
				.error { color: #d00; font-weight: bold }
				form table { width: 97%; margin: 15px 0 }
					form table th { width: 9em; text-align: right }
					form table td { text-align: left }
			section#result, section#thanks { text-align: center }

/* Footer */
footer { text-align: right; color: #165e83; font-size: 91.7%; background: #333; background: rgba(0,0,0,.6) }
	footer p { width: 93%; margin: 0 auto; padding-top: 9px }

/* for IE user */
#notice { color: #fff; padding: 6px 12px; background-color: #2b2b2b }