@charset "UTF-8";

/*----------------------------------------------------
☆Reset
----------------------------------------------------*/

html {
background-color:#FFF;
font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,p,img {
margin: 0;
padding: 0;
}

body {
background-color:#fff;
font-family: 'Open Sans', Arial, Roboto, 游ゴシック体, 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
color:#202020;
font-size: 16px;
font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */
line-height: 1;
letter-spacing: 0.02em;
font-feature-settings : "halt" 1;
font-weight:500;
/*min-width:1000px;*/
}

body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

#fancybox-wrap,
#fancybox-wrap *,
#fancybox-tmp,
#fancybox-loading {
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
-o-box-sizing: content-box!important;
-ms-box-sizing: content-box!important;
box-sizing: content-box!important;
}

a,
a:link,
a:hover,
a:focus {
color: #333;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;}

a:hover {
text-decoration: none;
}

ul,
ol {
list-style-type: none;
}

::selection {
background-color: #888;
color: #FFF; /* Safari */
}

::-moz-selection {
background-color: #888;
color: #FFF; /* Firefox */
}

#contents p{
line-height: 1.7;
}
img {
vertical-align: top;
}

/*----------------------------------------------------
☆Crearfix
----------------------------------------------------*/
.clearfix:after {
content:".";
height:0;
clear:both;
display:block;
font-size:0.1em;
line-height:0;
visibility:hidden;
}

.clearfix {
display:inline-block;
min-height:1%;
}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
/* End hide from IE-mac */


/*----------------------------------------------------
☆topcontrol
----------------------------------------------------*/
#topcontrol{
z-index: 99999999999999;
}

#topcontrol a {
background:url(../js/scrollup.png) center center no-repeat #000;
background : url(../js/scrollup.gif) center center no-repeat\9 #000; /* IE8 */
*background : url(../cmn_js/scrolltop/scrollup.gif) center center no-repeat #000; /* IE7 */
_background : url(../js/scrollup.gif) center center no-repeat #000; /* IE6 */
display:block;
height:60px;
width:60px;
filter: alpha(opacity=70) !important;
opacity:0.7 !important;

-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#topcontrol a:hover {
filter: alpha(opacity=10) !important;
opacity:1 !important;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 transform: scale(1.2);
}



/*----------------------------------------------------
☆opacity Hack
----------------------------------------------------*/
.roBtn:hover {
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}

/* IE8 */
html>/**/body .roBtn:hover {
display /*\**/: inline-block\9;
zoom /*\**/: 1\9;
}
 
/* 新旧Firefox */
.roBtn:hover, x:-moz-any-link {
background: #fff;
}
.roBtn:hover, x:-moz-any-link, x:default {
background: #fff;
}


/*----------------------------------------------------
☆base contents
----------------------------------------------------*/

/*-- HEADER --*/
header {
position: relative!important;
width: 100%;
background:#FFF;
}
#header h1.tagline {
color:#FFF;
font-size:1.1rem!important;
font-weight:normal;
padding:10px 0;
}
#header p.logo {
position: absolute;
top:60px;
left:30px;
}
#header div.hdR {
background-color:#448CBC;
color:#FFF;
float:right;
width:600px;
}
#header div.hdR p {
padding:20px;
}
#spHeader{
display: none;
}
#headerSubN {
position:absolute;
top: 20px;
right:30px;
z-index: 999999999999;
}
#headerSubN li {
display:inline-block;
margin-left:15px;
font-size:1.3rem;
font-weight:bold;
}

/*-- GNAV --*/
.h_nav {
padding: 50px 0 0 0;
}
#gNav {
margin: 0 auto;
max-width:1200px;
width: 100%;
z-index: 2;
}
#gNav ul {
max-width:1200px;
width: 100%;
margin: 0;
}
#gNav ul li {
width: calc( 90%/ 8 );
float:left;
text-align:center;
}
#gNav ul li a {
color:#000;
display:block;
padding:10px 0;
}
#gNav ul li ul li a {
font-size: 0.8em;
}
#gNav ul li.li1 a { background-color:#F9F9F9;}
#gNav ul li.li2 a { background-color:#F9F9F9;}
#gNav ul li.li3 a { background-color:#F9F9F9;}
#gNav ul li.li4 a { background-color:#F9F9F9;}
#gNav ul li.li5 a { background-color:#F9F9F9;}
.fixed {
position: fixed;
top: 0;
left: 0;
}
.fixed .nav li {
line-height: 40px;
}
#gnav > ul {
display: table;
padding-left: 50px;
}
#gnav > ul > li {
display: table-cell;
margin-right: 2em;
font-size:1.6rem;
font-weight:bold;
}
#gnav > ul > li:hover {
color: #fff;
background-color: #19192b;
}
#gnav > ul > li:hover > a {
color: #fff;
}
#gnav > ul > li:hover .menu {
max-height: 9999px;
opacity: 1;
}
#gnav > ul > li > a {
display: block;
padding: 25.5px 1em 15.5px;
transition: all .2s ease-in;
}
#gnav > ul .menu {
transition: all .2s ease-in;
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%;
left: 0;
text-align: center;
position: absolute;
background-color: #19192b;
}
#gnav > ul .menu .menu_inner {
padding: 1em 0;
}
#gnav > ul .menu .menu_inner li {
display: inline-block;
margin: 0 .5em;
}
#gnav > ul .menu a {
color: #fff;
}
#gnav {
position:absolute;
top:57px;
right:24px;
}
#gnav ul li {
display:inline-block;
font-weight:bold;
margin-left:1.2em;
}
#gnav ul li a {
position: relative;
display: inline-block;
padding: 0.5em 0.2em;
transition: .3s;
}
#gnav ul li a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 2px;
background-color: #D01119;
transition: .3s;
}
#gnav ul li a:hover::after {
width: 100%;
}
#mv {
width:100%;
margin: 0;
padding: 0;
}

@media all and (-ms-high-contrast: none){
#mv {
width:100%;
margin-top:80px;
}
}
/*
@-moz-document url-prefix(){
#mv {
width:100%;
margin-top:80px;
}
}

/* デバイスの横幅が画像サイズを超えた場合 */
@media only screen and (min-width: 2000px) {
#mv {
background-size:100% auto;
}
}

#mv div.mvInr {
display: table;
margin: 0 auto;
height: 336px;
max-width: 1000px;
width: 100%;
padding: 0;
}

#mv div.mvInr h2.mvHead {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 2.8rem;
line-height: 1.2;
letter-spacing: 0.2em;
}

#mv div.mvInr h2.mvHead span {
background-color: #D01119;
color: #FFF;
display: inline;
padding: 1px 6px 0 10px;
}

#mv div.mvInr h2.mvHead small {
color: #FFF;
display: inline;
font-size: 60%;
padding: 3px 0;
letter-spacing: 0.02em;
font-family: 'Open Sans Condensed', sans-serif;
}

/*-- BREADCHUMBS --*/
#breadChumbs {
margin: 10px 0 60px;
padding: 10px 30px;
width:100%;
text-align:right;
}
#breadChumbs p {
font-size: 1.2rem;
margin: 0 auto;
width: 100%;
}
#breadChumbs p span {
position: relative;
padding: 0 1.4em 0 0;
}
#breadChumbs p span:before{
position: absolute;
top: 3px;
right: 0;
content: "｜";
width: 1em;
height: 1em;
}
#breadChumbs p span.mainas:before{
top: -1px;
}
#breadChumbs p span:last-child:before {
display:none;
}
#breadChumbs p span a {
color: #106685;
}
#breadChumbs p span.currentPoint {
font-weight: bold;
}


/*-- CONTENTS --*/
#contents {
background-color:#FFF;
margin:0 auto;
width:100%;
}

@media all and (-ms-high-contrast: none){
#contents {
background-color:#FFF;
margin:0 auto -16px;
width:100%;
}
}

@-moz-document url-prefix(){
#contents {
background-color:#FFF;
margin:0 auto -16px;
width:100%;
}
}

#sideNav {
float:left;
width:200px;
}
#sideNav ul {
width:100%;
}
#sideNav ul li {
margin-bottom:1px;
width:100%;
}
#sideNav ul li a {
background-color:#448CBC;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:1px solid #448CBC;
color:#FFF;
display:block;
padding:20px;
text-decoration:none;
}
#sideNav ul li a:hover {
background-color:#FFF;
color:#448CBC;
}

/*-- FOOTER --*/
#footer {
width:100%;
}
#footer .ser_abt {
width: 100%;
text-align: center;
overflow: hidden;
}
#footer .ser_abt .ser_lt,#footer .ser_abt .abt_rt {
width: 50%;
background: #F5F5F8;
float: left;
}
#footer .ser_abt a {
display: block;
text-decoration: none;
padding: 80px 0 80px 4%;
overflow: hidden;
}
#footer .ser_abt a:hover{
background: rgba(0,0,0,0.2);
text-decoration: none;
}
#footer .ser_abt .ser_lt a .inner,#footer .ser_abt .abt_rt a .inner {
position:relative;
overflow:hidden;
}
#footer .ser_abt .ser_lt a .inner div,#footer .ser_abt .abt_rt a .inner div {
float:left;
}
#footer .ser_abt .ser_lt a .inner div.icBox,#footer .ser_abt .abt_rt a .inner div.icBox {
width:170px;
}
#footer .footerContact {
background: url(../images/common/bg-footer.jpg) center top no-repeat;
height:400px;
text-align:center;
width:100%;
}
#footer .footerContact .fCInner {
margin:0 auto;
vertical-align: middle;
padding-top:140px;
}
#footer .footerContact .fCInner p {
margin: 0 auto;
text-align:center;
max-width:1000px;
}

/* デバイスの横幅が画像サイズを超えた場合 */
@media only screen and (min-width: 2000px) {
#footer .footerContact {
background-size:100% auto;
}
}
#footer div.footerBtm {
background:#EDEDF1;
padding: 80px 0 60px;
margin:0 auto;
text-align:center;
}
#footer div.footerBtm ul li {
position: relative;
top: 4px;
left: 0;
padding: 0 1.2em 0.6em 0;
display: inline-block;
font-size: 13px;
font-size: 1.3rem;
text-align: center;
margin: 0 auto;
letter-spacing:0;
}
#footer div.footerBtm ul li a:hover {
color:#106685;
}
#footer div.footerBtm ul li:before {
position: absolute;
top: -1px;
right: 0;
content: "|";
width: 1em;
height: 1em;
}
#footer div.footerBtm ul li:last-child:before {
display:none;
}
#footer .ser_abt .title {
font-size: 3.4rem;
font-family: 'Open Sans Condensed', sans-serif;
color:#D01119;
font-weight:bold;
text-align:left;
margin: 30px 0 10px;
}
#footer .ser_abt .desc {
text-align:left;
}
#footer .ser_abt .abt_rt {
width: 50%;
background: #EAEAEE;
float: left;
}
#footer div.footerBtm div#fLogoArea {
overflow:hidden;
width: 100%;
max-width:1100px;
margin:0 auto;
}
#footer div.footerBtm div#fLogoArea p {
float:left;
width:30%;
text-align:left;
padding: 70px 0 0 40px;
}

/*-- COPYRIGHT --*/
#footer div.footerBtm div#fLogoArea small#copyright {
display:block;
font-size:1.1rem!important;
padding:70px 40px 0 0;
text-align:right;
float:right;
width:60%;
}