@charset "utf-8";

body { background:#fff; }
#wrap { background:#f8f8f8; overflow:hidden;}
header { width:100%; height:49px; border-bottom:1px solid #c7c7c7; background:#fff; position:relative; left:0; top:0; z-index:100;}
header #nav_btn { background:url(../images/common/menu.gif) no-repeat center; width:49px; height:49px; position:absolute; top:0; left:50%; margin-left:-25px; cursor:pointer; z-index:2;}

header .bg.navon { border-bottom:1px solid #67cef6; background:#01aef0;}
header .bg.navon #nav_btn { background:url(../images/common/menu_close.png) no-repeat center;}
header .bg.navover { border-bottom:1px solid #01aef0; background:#01aef0; opacity:0;}
header .bg.navover #nav_btn { background:url(../images/common/menu_over.gif) no-repeat center;}
header .bg { background:#fff; position:absolute; width:100%; height:100%; left:0; top:0; z-index:1;}
#nav { position:fixed; left:0; top:0; width:100%; height:100%; z-index:1000; background:#01aef0; text-align:center; display:none; opacity:0;}
#nav #nav_btn_close { height:49px; border-bottom:1px solid #67cef6; }
#nav #nav_btn_close span { background:url(../images/common/menu_close.png) no-repeat center; width:49px; height:49px; position:absolute; top:0; left:50%; margin-left:-25px; cursor:pointer;}
#nav ul { position:absolute; top:50%; left:0; margin:-90px 0 0 0; width:100%; text-align:center;}
#nav ul li { margin:0 0 20px;}
#nav ul li a { color:#fff; font-size:22px; font-weight:200;}
#nav ul li a:hover { font-weight:500;}
#nav ul li a.on { font-weight:800;}
#logo { padding:22px 0 15px; border-bottom:4px solid #181818; width:90%; margin:0 auto; max-width:980px; position:relative; z-index:100; background:#f9f9f9; }
#logo.sub { width:100%; max-width:none;}
#logo p { font-size:11px; padding-top:4px;}
#side_visual { width:90%; max-width:980px; height:100%; position:absolute; left:0; top:0; z-index:1;}
#side_visual > div { background:#fff; width:140px; height:560px; border-radius:70px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); z-index:-1;}
@keyframes background-changer1 {
  0%, 100% {
    background-image: url(../images/main/side1_top.jpg); }
  50% {
    background-image: url(../images/main/side2_top.jpg);
  }
}
#side_visual .sv_top { position:absolute; left:120px; top:-230px; background-image: url(../images/main/side1_top.jpg); background-repeat:no-repeat; background-size:cover; animation: background-changer1 10s infinite;}
@keyframes background-changer2 {
  0%, 100% {
    background-image: url(../images/main/side1_bottom.jpg); }
  50% {
    background-image: url(../images/main/side2_bottom.jpg);
  }
}
#side_visual .sv_bottom { position:absolute; right:55px; bottom:-190px; background-image: url(../images/main/side1_bottom.jpg); background-repeat:no-repeat; background-size:cover; animation: background-changer2 10s infinite;}
#main_visual { width:90%; max-width:980px; margin:35px auto 0; background:url(../images/common/bg_ff.gif) no-repeat 0 5px; background-size:100% auto; padding:30px 0 105px;}
#main_visual .slides { padding:0 25%; background:url(../images/main/visual_bg.png) no-repeat center; background-size:auto 100%;}
h2 { font-size:2em !important; margin:1.5em 0 -0.8em 0;}

#aboutWrap { width:100%; max-width:980px; margin:60px auto 0; padding:30px 0 50px;}
#aboutWrap h3 { color:#252525; font-weight:600; font-size:25px; margin-bottom:40px; line-height:35px;}
#aboutWrap .intro { background:url(../images/about/intro_bg.gif) repeat-x top; border-bottom:1px solid #00aeef; padding-bottom:60px;}
#aboutWrap .intro img { margin-bottom:50px; width:100%; max-width:640px;}
#aboutWrap .intro p { color:#252525; font-size:15px; font-weight:300; line-height:22px; margin:10px auto 0; width:90%; word-break: keep-all;}
#aboutWrap .intro p strong{ color:#252525;}
#aboutWrap .overview { padding:60px 0; border-bottom:1px solid #00aeef; }
#aboutWrap .overview table { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0 90px 0 0;}
#aboutWrap .overview table th { font-size:12px; color:#000; font-weight:500; text-align:left; width:70px; }
#aboutWrap .overview table td { font-size:13px; color:#252525; font-weight:300; text-align:left; padding:0 0 12px; }
#aboutWrap .overview table td strong { font-weight:600;}
#aboutWrap .overview > img { vertical-align:top;}
#aboutWrap .service { padding:50px 0 60px; }
#aboutWrap .service ul { margin-top:-10px;}
#aboutWrap .service ul li { display:inline-block; zoom:1; *display:inline; width:190px; padding:0 10px 20px; vertical-align:top;}
#aboutWrap .service ul li h4 { font-size:20px; font-weight:600; margin:12px 0 8px;}
#aboutWrap .service ul li p { font-size:12px; font-weight:300; line-height:18px; word-break: keep-all;}
#aboutWrap .service > p { color:#252525; font-weight:500; font-size:18px; line-height:24px; margin:30px auto 0; width:90%; word-break: keep-all;}

#map_canvas, #map_canvas2 { border:1px solid #00aeef; width:90%; max-width:1000px; margin:3em auto 1.5em; height:420px;}
#map_info, #map_info2 { width:100%; width:90%; max-width:1000px; margin:0 auto 0; position:relative; }
#map_info p, #map_info2 p { word-break: keep-all;}
#contactWrap { padding:0 0 100px;}
#contactWrap h3 { color:#333; font-weight:600; font-weight:bold; font-size:1.3em; text-align:left; margin:0 0 0.7em 0;  background:url(../images/bl_contact.gif) 0.5em bottom no-repeat; padding-left:0.4em; padding-bottom:0.5em;}
#contactWrap p { color:#888888; font-size:0.8em; font-weight:200; font-weight:normal; text-align:left; margin-left:0.7em; }
#contactWrap p strong { color:#000; font-weight:400; font-weight:normal; font-size:1.2em; display:inline-block; zoom:1; *display:inline; padding-bottom:0.3em; }

footer { background:#181818; padding:30px 0 35px; text-align:center; position:relative; z-index:10; }
.footerwrap:after { content:" "; height:0; display:block; visibility:hidden; clear:both; }
* html .footerwrap { height:1%; }
.footerwrap { display:block; min-height:1%; width:100%; max-width:980px; margin:0 auto; background:#181818; *height:127px;}
footer ul { display:inline-block; zoom:1; *display:inline; color:#cbcbcb; font-size:12px; vertical-align:top; text-align:left;}
footer .ftlink {width:380px; float:left;}
footer .ftinfo {width:380px; float:right;}
footer .ftlink li { display:inline-block; *zoom:1; *display:inline; margin:0 0 0 40px; text-align:left; }
footer .ftlink a { color:#919191; *font-size:12px}
footer .ftlink a strong { color:#cbcbcb !important; font-weight:900; display:block;}
footer .ftlink a:hover { color:#cbcbcb !important;}
footer .ftlink a:hover strong { color:#fff !important;}

footer .ftinfo { border-left:1px solid #3e3e3e; padding:0;}
footer .ftinfo li { text-align:left; color:#919191; color:#cbcbcb;}
footer .ftinfo li strong { color:#cbcbcb; font-weight:900; margin:0 4px 0 15px;}
footer .ftinfo li a { color:#919191; }
footer .ftinfo li a:hover { color:#cbcbcb; text-decoration:underline; }
footer .ftinfo li+li+li { padding:10px 0 0 15px; font-size:11px;}

@media only screen and (max-width:1024px) {
#side_visual > div { width:17%; height:90%; }
#side_visual .sv_top { left:16%; top:-42%;}
#side_visual .sv_bottom { right:10%; bottom:-38%;}
}

@media only screen and (max-width:800px) {
footer { padding:15px 0 10px;}
footer ul { display:block; text-align:center;}
footer .ftlink {width:100%; float:none;}
footer .ftinfo {width:100%; float:none;}
footer .ftlink li { margin:0 15px;}
footer .ftlink a strong { display:inline-block; zoom:1; *display:inline; margin-right:10px;}
footer .ftinfo { border-left:none; border-top:1px solid #3e3e3e; padding:10px 0; margin-top:15px;}
footer .ftinfo li { text-align:center; margin-right:15px;}
footer .ftinfo li+li+li { padding:10px 0 0 0;}
}

@media only screen and (max-width:640px) {
header { width:49px; height:49px; border-bottom:0; background:none; position:absolute; left:auto; right:0; top:0; z-index:101;}
header #nav_btn { left:auto; right:0;}
#logo { border-bottom:3px solid #181818; width:100%; padding:10px 0 7px; background: #fff;}
#logo img { height:1.6em; width:auto;}
#logo p { font-size:10px; padding-top:2px;}
#nav #nav_btn_close span { left:auto; margin-left:0; right:0;}

#side_visual .sv_top { left:27%; top:-60%;}
#side_visual .sv_bottom { right:15%; bottom:-48%;}
#main_visual { background-size:140% auto; background-position:top center; padding:20px 0 70px;}
.flex-control-nav { bottom:25px !important;}

#main_visual .slides { padding:0 15%;}
#aboutWrap h3 { margin-bottom:30px; font-size:25px; line-height:28px;}
#aboutWrap .intro { background:url('');}
#aboutWrap .overview table { margin:0 auto 30px; width:90%;}
#aboutWrap .service > p { font-size:17px;}
#map_canvas, #map_canvas2 { height:300px;}

footer .ftlink li { text-align:center; margin:0 5%;}
footer .ftlink a strong { color:#cbcbcb; font-weight:900; display:block; margin:0;}
}

@media only screen and (max-width:480px) {
#main_visual { padding:15px 0 65px;}
#side_visual > div { width:22%; height:90%; }
#side_visual .sv_top { left:23%; top:-60%;}
#side_visual .sv_bottom { right:12%; bottom:-48%;}
footer { padding: 12px 0 10px;}
footer .ftlink li { text-align:center; margin:0 3%;}
footer .ftinfo { margin-top: 10px; padding-bottom:5px;}
footer .ftinfo li + li + li { padding: 5px 0 0 0;}

}

@media only screen and (max-width:320px) {
#side_visual > div { width:25%; height:90%; }
#side_visual .sv_top { left:23%; top:-60%;}
#side_visual .sv_bottom { right:12%; bottom:-48%;}
#main_visual { padding:20px 0 60px;}
}
