@charset "UTF-8";
* { font-family: Hiragino Sans,"ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN,"ヒラギノ角ゴ ProN W3","メイリオ","ＭＳ Ｐゴシック",sans-serif; word-break: break-all; }
html { font-size: 12px; -webkit-text-size-adjust: none; }
body { margin: 0px auto; padding: 0px; width: 100%; background: #fff; }
img { border-width: 0px; border-style: none; }
ul { list-style: none; }
br { letter-spacing: 0;}
a { color: #FFF; text-decoration: underline; }
a:hover { color: #0093DC; }
.clear { zoom: 100%; }
.clear:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }

/* PC Site */
@media(min-width:800px){
	/* Sub Page : Base Height */
	#header_set_sub { margin: 0px 0px 30px 0px; padding: 0px; width: 100%; height: 420px; position: relative; }
	
	/* Header */
	#header_set { margin: 0px 0px 30px 0px; padding: 0px; width: 100%; height: 520px; position: relative; }
	#header { margin: 0px; padding: 0px; width: 100%; height: 100%; position: absolute; z-index: 3; }
	#header_set #header_img { margin: 0px; padding: 0px; min-width: 1000px; width: 100%; height: 520px; overflow: hidden; position: absolute; z-index: 2; }
	#header_set_sub #header_img { margin: 0px; padding: 0px; min-width: 1000px; width: 100%; height: 420px; overflow: hidden; position: absolute; z-index: 2; }
	#header_img img { width: 100%; height: auto; position: absolute; top: 0px; display: none; }
	
	/* Top Logo & Text */
	#top_logo_base { margin: 15px auto 20px auto; padding: 0px; width: 1000px; height: 69px; position: relative; z-index: 4; }
	#top_logo_base_back { margin: 0px; padding: 0px; width: 1000px; height: 69px; background-repeat: none; background-position: left top; position: absolute; top: 0; left: 0; z-index: 1; }
	#top_logo_base_back { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	#top_logo { margin: 0px; padding: 0px; width: 100%; height: 69px; background-repeat: none; background-position: left top; position: absolute; z-index: 5; }
	#top_logo dl { margin: 0px; padding: 0px; width: 100%; }
	#top_logo dt { width: 110px; margin-left: 372px; color: #fff; line-height: 69px; text-align: center; float: left; }
	#top_logo dt { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	#top_logo dd { padding: 17px 10px 0px 0px; color: #999; text-align: right; float: right; }
	#top_logo dd { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	
	/* Top Logo Animation */
	//.top_logo_animetion { animation: Anime 1s steps(29) both; -webkit-animation: Anime 1s steps(29) both; }
	@keyframes Anime {
		  0% { background-position: top left;}
		100% { background-position: top right;}
	}
	
	/* Main Button */
	#mb { margin: 0px auto; padding: 0px; width: 1000px; height: 65px; z-index: 7; position: static; }
	#mb ul { margin: 0px; padding: 0px; width: 100%; }
	#mb li { margin: 0px; padding: 0px; width: 140px; height: 60px; text-align: center; float: left; }
	#mb li a { color: #666; text-decoration: none; display: block; width: 100%; line-height: 60px; background-color: rgba(255,255,255,0.7); }
	#mb li a { transition: color 1s ease-in-out,background-color 0.35s ease-in-out; }
	#mb li:first-child a { border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; }
	#mb li:not(.now) a:hover { color: #000; background-color: rgba(255,255,255,1.0); }
	#mb li:last-child { width: 160px; background-color: rgba(255,255,255,0.7); border-bottom: solid 5px #ccc; border-top-right-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topright: 8px; }
	#mb .now { background-color: rgba(255,255,255,1.0); }
	#mb .now a { color: #ff9900; cursor: default; }
	#mb_home { border-bottom: solid 5px #fc5e3f; }
	#mb_service { border-bottom: solid 5px #fe8f3e; }
	#mb_client { border-bottom: solid 5px #fec237; }
	#mb_tools { border-bottom: solid 5px #9cdb32; }
	#mb_about { border-bottom: solid 5px #66cef1; }
	#mb_contact { border-bottom: solid 5px #65adf0; }
	
	/* Page Comment */
	#header_set #page_comment { margin: 0px auto; padding: 280px 0px 0px 0px; width: 1000px; color: #fff; font-size: 2.33rem; text-align: left; font-weight: bold; }
	#header_set_sub #page_comment { margin: 0px auto; padding: 180px 0px 0px 0px; width: 1000px; color: #fff; font-size: 2.33rem; text-align: left; font-weight: bold; }
	#page_comment { text-shadow: 3px 3px 2px rgba(0,0,0,0.35); -webkit-text-shadow: 3px 3px 2px rgba(0,0,0,0.35); -moz-text-shadow: 3px 3px 2px rgba(0,0,0,0.35); }
	
	/* Content */
	#content { margin: 0px auto; padding: 0px; width: 1000px; }
	
	/* Section Line */
	.section { margin: 0px; padding: 0px; width: 100%; text-align: center; background:url(../i/section_border.jpg) repeat-x center center; }
	.section:before { content: ""; padding-left: 15px; }
	.section:after { content: ""; padding-right: 15px; }
	.section:first-line { color: #444; font-size: 1.5rem; font-weight: bold; background: #fff; }
	
	/* Footer */
	#footer { margin: 0px; padding: 0px; width: 100%; height: 50px; color: #999; line-height: 50px; }
	#footer { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
	#footer { background: #f9f9f9; }
	#footer span { margin: 0px; padding: 0px 0px 0px 20px; }
	#footer_link { margin: 0px; padding: 0px 15px; height: 50px; float: right; }
	#footer_link li { padding-left: 15px; text-align: center; float: left; }
	#footer_link li a { color: #999; text-decoration: none; }
	#footer_link li a { transition: color 0.35s ease-in-out; }
	#footer_link li a:hover { color: #000; }
	#footer_link .now a { color: #ff9900; }
	
	/* Scroll to Pagetop */
	#b_pagetop { position: fixed; bottom: 20px; right: 20px; }
	#b_pagetop a { width: 40px; font-size: 1.16rem; line-height: 2rem; color: #fff; text-align: center; text-decoration: none; background: #666; display: block; border: solid 2px #eee; border-radius: 5px; }
	#b_pagetop a:hover { background: #999; }
}

/* Mobile Site */
@media(max-width:799px){
	/* Sub Page : Base Height */
	#header_set_sub { margin: 0px auto 30px auto; padding: 0px; width: 95%; height: 420px; position: relative; }
	
	/* Header */
	#header_set { margin: 0px 0px 30px 0px; padding: 0px; width: 100%; height: 400px; position: relative; }
	#header { margin: 0px; padding: 0px; width: 100%; height: 100%; position: absolute; z-index: 3; }
	#header_set #header_img { margin: 0px; padding: 0px; width: 100%; height: 400px; overflow: hidden; position: absolute; z-index: 2; }
	#header_set_sub #header_img { margin: 0px; padding: 0px; width: 100%; height: 320px; overflow: hidden; position: absolute; z-index: 2; }
	#header_img img { width: 100%; height: auto; position: absolute; top: 0px; display: none; }
	
	/* Top Logo & Text */
	#top_logo_base { margin: 15px auto 20px auto; padding: 0px; width: 100%; height: auto; position: relative; z-index: 4; }
	#top_logo_base_back { margin: 0px; padding: 0px; width: 100%; height: auto; background-repeat: none; background-position: center top; background-size: contain; position: absolute; top: 0; z-index: 1; }
	#top_logo_base_back { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	#top_logo { margin: 0px; padding: 0px; width: 100%; height: auto; background-size: contain; background-repeat: no-repeat; background-position: left top; position: absolute; z-index: 5; }
	#top_logo dl { margin: 0px; padding: 0px; width: 100%; }
	#top_logo dt { width: 110px; margin-left: 300px; color: #fff; font-size: 2.3vw; line-height: 150px; text-align: center; float: none; }
	#top_logo dt { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	#top_logo dd { margin: 5px auto 15px auto; padding: 5px 0px; width: 95%; color: #999; font-size: 3vw; text-align: center; background-color: rgba(255,255,255,0.8); border-radius: 6px; z-index: 6; float: none; }
	#top_logo dd { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	
	/* Top Logo Animation */
	.top_logo_animetion { animation: Anime 1s steps(29) both; -webkit-animation: Anime 1s steps(29) both; }
	@-ms-keyframes Anime {
		  0% { background-position: top left;}
		100% { background-position: top right;}
	}
	@keyframes Anime {
		  0% { background-position: top left;}
		100% { background-position: top right;}
	}
	
	/* Main Button */
	#mb { margin: 0px auto; padding: 0px; width: 100%; height: auto; z-index: 7; position: absolute; }
	#mb_menu { margin: 0px; padding: 0px; width: 180px; height: 150px; background: url(../i/b_menu.png) no-repeat top right; background-size: contain; cursor: pointer; position: absolute; border-radius: 6px; }
	#mb_menu { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	#mb ul { margin: 0px; padding: 0px; width: 65%; height: auto; position: absolute; right: 10px; }
	#mb ul { filter:alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; zoom: 1; }
	#mb li { margin: 0px auto; padding: 0px; width: 100%; text-align: center; }
	#mb li a { width: 100%; color: #666; font-size: 5vw; line-height: 15vw; text-decoration: none; background-color: rgba(255,255,255,0.7); display: block; }
	#mb li a { transition: color 1s ease-in-out,background-color 0.35s ease-in-out; }
	#mb li:first-child a { border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; }
	#mb li:not(.now) a:hover { color: #000; background-color: rgba(255,255,255,1.0); }
	#mb li:last-child { display: none; }
	#mb .now { background-color: rgba(255,255,255,1.0); }
	#mb .now a { color: #ff9900; cursor: default; }
	#mb_home { border-bottom: solid 5px #fc5e3f; }
	#mb_service { border-bottom: solid 5px #fe8f3e; }
	#mb_client { border-bottom: solid 5px #fec237; }
	#mb_tools { border-bottom: solid 5px #9cdb32; }
	#mb_about { border-bottom: solid 5px #66cef1; }
	#mb_contact { border-bottom: solid 5px #65adf0; }
	
	/* Page Comment */
	#header_set #page_comment { margin: 0px auto; padding: 0px; width: 100%; color: #fff; font-size: 4.2vw; text-align: left; font-weight: bold; }
	#header_set_sub #page_comment { margin: 0px auto; padding: 0px; width: 100%; color: #fff; font-size: 4.2vw; text-align: left; font-weight: bold; }
	#page_comment { text-shadow: 3px 3px 2px rgba(0,0,0,0.35); -webkit-text-shadow: 3px 3px 2px rgba(0,0,0,0.35); -moz-text-shadow: 3px 3px 2px rgba(0,0,0,0.35); }
	
	/* Content */
	#content { margin: 0px auto; padding: 0px; width: 95%; }
	
	/* Section Line */
	.section { margin: 0px; padding: 0px; width: 100%; text-align: center; background:url(../i/section_border.jpg) repeat-x center center; }
	.section:before { content: ""; padding-left: 15px; }
	.section:after { content: ""; padding-right: 15px; }
	.section:first-line { color: #444; font-size: 4.4vw; font-weight: bold; background: #fff; }
	
	/* Footer */
	#footer { margin: 15px 0px; padding: 3px 0px; width: 100%; color: #999; line-height: 12vw; }
	#footer { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
	#footer { background: #f9f9f9; }
	#footer span { margin: 0px; padding: 0px 0px 0px 15px; display: block; font-size: 4vw; }
	#footer_link { margin: 0px; padding: 0px; width: 100%; }
	#footer_link li:first-child { border-top: solid 1px #ccc; }
	#footer_link li:not(:last-child) { border-bottom: solid 1px #ccc; }
	#footer_link li { padding-left: 15px; text-align: center; display: block; }
	#footer_link li a { color: #999; text-decoration: none; font-size: 4vw; }
	#footer_link li a { transition: color 0.35s ease-in-out; }
	#footer_link li a:hover { color: #000; }
	#footer_link .now a { color: #ff9900; }
	
	/* Scroll to Pagetop */
	#b_pagetop { position: fixed; bottom: 20px; right: 20px; }
	#b_pagetop a { width: 80px; font-size: 7vw; line-height: 8vw; color: #fff; text-align: center; text-decoration: none; background: #666; display: block; border: solid 2px #eee; border-radius: 5px; }
	#b_pagetop a:hover { background: #999; }
}