@charset "utf-8";

/**
 *
 * common: 共通
 *
 */
 
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

/*====================
 Page
=====================*/
#Page {
	position:relative;
	z-index:2;
	opacity:0;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
#Page.active {
	opacity:1;
}

/*====================
 Header
=====================*/
#Header {
	width:100%;
	position:relative;
	top:0;
	left:0;
	z-index:600;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
	opacity:1;
}

.sub #Header {

    height: 75px;
		margin:0 0 100px;
		position:fixed;
}

#Header.hide {
	opacity:0;
}
#Header p#Title {
	background:url(../images/logo.png) no-repeat left top;
	background-size:contain;
	text-indent:-100em;
	width:180px;
	height:22px;
	position:fixed;
	top:40px;
	left:40px;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
	opacity:1;
}
.sub #Header p#Title {
top:30px;
position:absolute;
}
.sub #Header p#Title a{display:block;}
#Header p#Title.hide {
	opacity:0;
}

#Header #Nav {
	position:fixed;
	top:40px;
	right:40px;
}

.sub #Header #Nav {
top:30px;
position:absolute;
}

#Header #Nav li {
	display:inline-block;
	padding:0 0 0 30px;
	color:#fff;
}
#Header #Nav li a {
	font-size:15px;
	color:#fff;
	font-weight:500;
	letter-spacing:2px;
	height:24px;
	position:relative;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

.sub #Header #Nav li a {
height:45px;	
}
#Header #Nav li a:hover{
	color:#fff;
}
#Header #Nav li a:after {
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:1px;
	background:#fff;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Header #Nav li a:hover:after {
	width:100%;
}
#Header.active #Nav li,
#Header.active #Nav li a {
	color:#222;
}
#Header #Nav li span {
	display:inline-block;
	padding:0 10px;
}
#Header.active #Nav li a:after {
	background:#222;
}
#Header.active p#Title {
	background:url(../images/logo-black.png) no-repeat left top;
	background-size:contain;
}

#Header #Nav li a.active:after {
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#fff;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Header.active #Nav li a.active:after {
	background:#222;
}

/*====================
 Footer
=====================*/

#Footer {
	width:100%;
	text-align:center;
	max-width:1160px;
	margin:0 auto;
	padding:50px;
}

.sub #Footer{max-width: 990px;
    padding: 50px 0;}
		
#Footer ul {
	text-align:left;
	display:block;
	position:relative;
	overflow:hidden;
}
#Footer ul:before {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background:#ddd;
	position:absolute;
	bottom:0;
	left:0;
}
#Footer li {
	display:inline-block;
	padding:0 20px 0 0;
}
#Footer li a {
	font-size:14px;
	color:#222;
	font-weight:500;
	letter-spacing:2px;
	height:40px;
	position:relative;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Footer nav li a:after {
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:1px;
	background:#222;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Footer nav li a:hover:after {
	width:100%;
}
#Footer nav li:last-child {
	float:right;
	padding:0;
}
#Footer nav li span {
	display:inline-block;
	padding:0 10px;
}
#Footer small {
	display:block;
	text-align:left;
	padding:30px 0 60px 0;
	font-size:12px;
	letter-spacing:1px;
}
#Footer nav li a.active:after {
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#222;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}


/*--------------------------------------------------------------------------
	Tablet
---------------------------------------------------------------------------*/

@media all and (max-width: 1024px) {
#Header #Nav li {
	padding:0 0 0 20px;
}

#Header #Nav li a {
	font-size:14px;
	color:#fff;
	font-weight:500;
	letter-spacing:2px;
	height:24px;
	position:relative;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Header #Nav li a:hover {
	font-size:14px;
	color:#fff;
	font-weight:500;
	letter-spacing:2px;
	height:24px;
	position:relative;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

#Header #Nav li a:hover:after {
	width:0;
}

#Footer li {
	display:inline-block;
	padding:0 15px 0 0;
}
#Footer li a {
	font-size:13px;
	letter-spacing:1.5px;
	
}
#Footer nav li a:hover:after {
	width:0;
}

.sub #Footer{
    padding: 50px 5%;}
}

/*--------------------------------------------------------------------------
	Smart Phone
---------------------------------------------------------------------------*/

@media all and (max-width: 767px){
/*====================
 Header
=====================*/
#Header {
	width:100%;
}
.sub #Header {
		margin:0 0 20px;
		position: relative;
}
#Header p#Title {
	height:14px;
	position:fixed;
	top:20px;
	left:20px;
}
#Header #Nav {
	display:block;
	float:none;
	position:fixed;
	width:100%;
	height:100%;
	background:#fff;
	z-index:100;
}
#Header #Nav ul {
	margin:-40px 0 0 0;
	text-align:center;
	position: relative;
	top: 50%;
	  -webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
	  transform: translateY(-50%);
}
#Header #Nav li {
	display:block;
	padding:0;
	margin:50px 0;
	color:#222;
}
#Header #Nav li a {
	font-size:20px;
	color:#222;
	font-weight:500;
	letter-spacing:2px;
	height:10px;
	position:relative;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Header #Nav li a.hover {
	font-size:20px;
	color:#222;
	font-weight:500;
	letter-spacing:2px;
	height:10px;
	position:relative;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Header #Nav li a.active:after {
	content:"";
	display:block;
	position:absolute;
	bottom:-20px;
	left:0;
	width:100%;
	height:1px;
	background:#222;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
#Header #Nav li a:hover:after{
	color:#222;
	display:none;
}
.sub #Header #Nav li a {
height:auto;	
}

/*====================
 Footer
=====================*/

#Footer {
	text-align:center;
	padding:20px;
}
#Footer ul {
	text-align:center;
}
#Footer ul:before {
	content:"";
	display:none;
}
#Footer li {
	display:block;
	text-align:center;
	padding:0;
	margin:0 0 20px 0;
}
#Footer li a {
	font-size:14px;
	height:20px;
}

#Footer nav li:last-child {
	float:none;
	padding:0;
}
#Footer nav li span {
	display:inline-block;
	padding:0 10px;
}
#Footer small {
	display:block;
	text-align:center;
	padding:40px 10px;
	font-size:12px;
	letter-spacing:1px;
}



}