@charset "UTF-8";
/* Reset
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
address,em,strong,th {
	font-style: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

hr,legend {
	display: none;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

img,fieldset {
	border: 0;
}

li {
	list-style-type: none;
}

img {
	vertical-align: top;
}

/*IE6*/
* html img{
	vertical-align: bottom;
}
/*IE7*/
*:first-child+html img{
	vertical-align: bottom;
}

a{
	outline:none;	
}

/* Fonts
------------------------------------------------------------*/
body {
	font-size: 75%; /* IE */
	font-family: "qMmpS Pro W3","Hiragino Kaku Gothic Pro","CI","Meiryo",verdana,Osaka,"lr oSVbN","MS PGothic",Sans-Serif;
	/*
	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;*/

	-webkit-text-size-adjust: 100%;
}

body .ai{
	font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;	
}

body .ita{
	font-style:italic;
}

html>/**/body {
	font-size: 12px; /* Except IE */
}

/* clearfix
------------------------------------------------------------*/
.cf:after {  
	visibility: hidden;  
	display: block;  
	font-size: 0;  
	content: " ";  
	clear: both;  
	height: 0;  
}  

* html .cf { zoom: 1; } /* IE6 */  
*:first-child+html .cf { zoom: 1; } /* IE7 */  


.ani_none,
.ani_none > *,
.ani_none:before,
.ani_none:after{
	transition:none !important;
	-webkit-transition:none !important;
	-moz-transition:none !important;	
}


/*------------ 初期設定 ------------*/
p {
	color: #000000;
	line-height: 1.7;	
}

/*------------ 全体 ------------*/
html {
}

body {
	width:100%;
	overflow-x:hidden;
	padding-top:80px;
	/*min-width:1280px;*/
	margin:0 auto;
}

._hover{
	opacity:1;
	transition: all 0.4s;
}

._hover:hover{
	opacity:0.7;
}

.btn_more{
	display:block;
	position:relative;
	width:160px;
	margin:60px auto auto;
	background:#000;
	text-align:center;
	font-size:12px;
	color:#fffefe;
	text-decoration:none;	
	padding:15px 0 13px;
	transition: all 0.4s;
}

.btn_more.wide{
	 width:200px;	
}

.btn_more:hover{
	background:#FFF;
	color:#000;
}

.btn_more::before,
.btn_more::after {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
}

.btn_more:hover::before,
.btn_more:hover::after {
  width: 100%;
  height: 100%;
}
.btn_more:hover::before {
  border-top-color: #000;
  border-right-color: #000;
  transition: width .3s, height .3s .3s;
}
.btn_more:hover::after {
  border-bottom-color: #000;
  border-left-color: #000;
  transition: height .3s, width .3s .3s;
}

.btn_more span{
	display:block;
	position:relative;	
}

.btn_more span:after{
	content:">";
	display:inline-block;
	position:relative;
	left:0px;
	transition: all 0.4s;
}

.btn_more:hover span:after{
	left:4px;	
}

.btn_more.btn_more2 span:after{
	display:none;
}

.btn_more.btn_more2 span:before{
	content:"<";
	display:inline-block;
	position:relative;
	right:0px;
	transition: all 0.4s;
}

.btn_more.btn_more2:hover span:before{
	right:4px;	
}

.btn_more.btn_more2.mt_min{
	margin:30px auto auto;	
}


@media screen and (max-width: 840px) {
	.btn_more{
		display:block;
		position:relative;
		width:50%;
		margin:8% auto auto;
		background:#000;
		text-align:center;
		font-size:4vw;
		color:#fffefe;
		padding:3% 0 2%;
	}
	
	.btn_more.wide{
		width:60%;	
	}
	
	.btn_more.btn_more2.mt_min{
		margin-top:5%;
	}
}

/*------------ WRAPPER ------------*/
#wrapper {
	width:950px;
	margin:0 auto;
}

/*------------ HEADER ------------*/

#header{
	width:100%;
	margin:0 auto;	
	position:fixed;
	left:0;
	top:0;
	background:rgba(255,255,255,0.8);
	z-index:200;
}

#header h1{
	width:150px;
	float:left;
	padding:20px 0 20px 20px;	
}

#header ul{
	width:500px;
	text-align:right;
	float:right;
	padding:30px 20px 0 0 ;
}

#header ul li{
	display:inline-block;	
	font-size:12px;
	margin-right:40px;
}

#header ul li:nth-child(4){
	margin-right:70px;	
}

#header ul li:last-child{
	margin-right:0;	
}

#header ul li a{
	color:#000;
	text-decoration:none;
	display:inline-block;
	position:relative;
}

#header ul li a.bd:after{
	content:"";
	display:block;
	width:100%;
	height:1px;
	background:#000;
	transform: scaleX(0);
    transition: all .3s ease;
	position:absolute;
	bottom:-5px;
	left:-1px;
}

#header ul li a.bd.active:after{
	transform: scaleX(1);	
}

#header ul li a.bd:hover:after{
	width:100%;
	transform: scaleX(1);
}


.sp{
	display:none;
}
@media screen and (max-width: 840px) {
	
	.sp{
		display:block;
	}
	
	.pc{
		display:none;	
	}
	
	body ,
	html{
		width:100%;
		min-width:100%;
		overflow-x:hidden;
	}	
	
	body{
		padding-top:40px;	
	}
	
	#header{
		width:100%;
		margin:0 auto;	
		position:fixed;
	}
	
	#header h1{
		width:85px;
		float:none;
		
		padding:5px 0 8px 5px;	
	}
	
	#header ul{
		width:100%;
		text-align:center;
		float:none;
		height:100vh;
		background-color: rgba(0, 0, 0,0.7);
		padding:30px 0px 0 0 ;
		position:absolute;
		left:0;
		top:0;
		z-index:3000;
		padding-top:20vh;
		box-sizing:border-box;
		top:-100vh;
		transition: all 0.4s;
	}
	
	#header ul.active{
		top:0;
	}
	
	#header ul li{
		display:block;	
		font-size:24px;
		text-align:center;
		margin-right:0px;
		margin-bottom:30px;
		color:#FFF;
		opacity:0;
		transition: all 0.4s;
	}
	
	#header ul.active li{
		opacity:1;
	}
	
	#header ul.active li:nth-child(1) {
		-webkit-transition-delay: 600ms;
		transition-delay: 600ms;
	}
	#header ul.active li:nth-child(2) {
		-webkit-transition-delay: 700ms;
		transition-delay: 700ms;
	}
	#header ul.active li:nth-child(3) {
		-webkit-transition-delay: 800ms;
		transition-delay: 800ms;
	}
	#header ul.active li:nth-child(4) {
		-webkit-transition-delay: 900ms;
		transition-delay: 900ms;
	}
	#header ul.active li:nth-child(5) {
		-webkit-transition-delay: 1000ms;
		transition-delay: 1000ms;
	}
	#header ul.active li:nth-child(6) {
		-webkit-transition-delay: 1100ms;
		transition-delay: 1100ms;
	}
	#header ul.active li:nth-child(7) {
		-webkit-transition-delay: 1200ms;
		transition-delay: 1200ms;
	}
	
	#header ul li:nth-child(4){
		margin-right:0px;	
	}
	
	#header ul li:last-child{
		margin-right:0;	
	}
	
	#header ul li a{
		color:#FFF;
		text-decoration:none;	
	}
	
	
	#btn_menu{
		position:absolute;
		right:0px;
		top:0px;
		width: 40px;
		height:41px;
		box-sizing:border-box;
		display:block;
		z-index:10000;
		cursor:pointer;
		background:#000;
		padding:6px 5px;
	}
	
	#btn_menu span {
		display: block;
		background: #FFF;
		width: 22px;
		height: 1px;
		position: absolute;
		left: 50%;
		margin-left:-11px;
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
	}
	#btn_menu span:first-child {
		top: 13px;
	}
	#btn_menu span:nth-child(2) {
		top: 50%;
	}
	#btn_menu span:nth-child(3){
		bottom: 13px;
	}
	#btn_menu.active span:first-child {
		-webkit-transform: translateY(7px) rotate(45deg);
		-moz-transform: translateY(7px) rotate(45deg);
		-ms-transform: translateY(7px) rotate(45deg);
		transform: translateY(7px) rotate(45deg);
		background: #FFF;
	}
	#btn_menu.active span:nth-child(2) {
		opacity: 0;
	}
	#btn_menu.active span:nth-child(3) {
		-webkit-transform: translateY(-7px) rotate(-45deg);
		-moz-transform: translateY(-7px) rotate(-45deg);
		-ms-transform: translateY(-7px) rotate(-45deg);
		transform: translateY(-7px) rotate(-45deg);
		background: #FFF;
	}
	
	#btn_menu.active p{
		display:none;	
	}
	
	img{
		width:100%;
		height:auto;
	}
	
}

/*------------ NAVI ------------*/


/*------------ TOP ------------*/


/*------------ FOOTER ------------*/

.page_top{
	margin-top:160px;
	position:relative;
	text-align:center;
}

.page_top a{
	display:inline-block;
	position:relative;	
}

.page_top a img{
	position:relative;
	transition: all 0.4s;
	top:0;	
}

.page_top a:hover img{
	top:-4px;	
}

#footer{
	background:#000;
	margin-top:80px;
}

#footer{
	padding:20px 0;	
}

#footer .inner{
	width:1120px;
	margin:0 auto;	
	position:relative;
}

#footer .inner ul.list01 li{
	display:block;
	margin-right:0px;
	margin-bottom:8px;
}

#footer .inner ul.list01 li a{
	font-size:15px;
	color:#ffffff;	
}

#footer .inner ul.list02{
	position:absolute;
	right:230px;
	top:10px;
}

#footer .inner ul.list02 li{
	display:inline-block;
	margin-right:20px;
}

#footer .inner .logo{
	position:absolute;
	right:0;
	top:0px;
}

#footer small{
	display:block;
	margin-top:20px;
	font-size:16px;
	color:#ffffff;	
}

@media screen and (max-width: 840px) {
	#footer .inner ul.list02{
		position:relative;
		right:auto;
		margin-bottom:20px !important;	
	}
	
	.page_top{
		margin-top:10%;
		position:relative;
		text-align:center;
	}
	
	.page_top a{
		display:inline-block;
		position:relative;	
	}
	
	.page_top a img{
		position:relative;
		transition: all 0.4s;
		top:0;	
	}
	
	.page_top a:hover img{
		top:-4px;	
	}
	
	#footer{
		background:#000;
		margin-top:8%;
	}
	
	#footer{
		padding:0px 0;	
	}
	
	#footer .inner{
		width:100%;
		margin:0 auto;	
		position:relative;
	}
	
	#footer .inner ul.list01 li{
		display:block;
		margin-right:0px;
		text-align:center;
		border-bottom:solid 1px #FFF;
	}
	
	#footer .inner ul.list01 li a{
		display:block;
		text-decoration:none;
		font-size:12px;
		color:#ffffff;
		padding:13px 0 10px;
	}
	
	#footer .inner ul.list02{
		margin-top:30px;
		text-align:center;
	}
	
	#footer .inner ul.list02 li{
		display:inline-block;
		margin-right:20px;
	}
	
	#footer .inner ul.list02 li:last-child{
		margin-right:0;	
	}
	
	#footer .inner .logo{
		position:relative;
		right:auto;
		top:auto;
		text-align:center;
		margin-top:20px;
		padding-top:20px;
	}
	
	#footer .inner .logo img{
		width:200px;
		height:auto;	
	}
	
	#footer small{
		display:block;
		margin-top:30px;
		font-size:10px;
		color:#ffffff;
		text-align:center;
		padding-bottom:20px;
	}	
}
	
/*-------- text_right --------*/
.t_right {
	text-align: right;
}

/*-------- text_left --------*/
.t_left {
	text-align: left;
}

/*-------- center --------*/
.t_center {
	text-align: center;
}

/*-------- ClearBoth --------*/
.cb {
	clear: both;
}

/*-------- COLOR --------*/

.red{
	color:#FF0000;
}

.orange{
	color:#FF6600;
}

.blue{
	color:#0097B2;
}

/*-------- FONT --------*/

.bold{
	font-weight:700;
}

.f10{
	font-size:10px;
}

.f14{
	font-size:14px;
}

/*-------- WIDTH --------*/

.w149{
	width:149px;	
}

.w180{
	width:180px;	
}

.w287{
	width:287px;
}

.w380{
	width:380px;
}

.w304{
	width:304px;
}

/*-------- HEIGHT --------*/

.h350{
	height:350px;	
}

.h375{
	height:375px;	
}

.h500{
	height:420px;	
}

.h600{
	height:470px;	
}

/*-------- MARGIN --------*/

.ml3{
	margin:0 0 0 3px;
}

.ml10{
	margin:0 0 0 10px;
}

.ml30{
	margin:0 0 0 30px;
}

.ml40{
	margin:0 0 0 40px;
}

.ml60{
	margin:0 0 0 60px;
}

.ml70{
	margin:0 0 0 70px;
}

.mb10{
	margin:0 0 10px 0;
}

.mb15{
	margin:0 0 15px 0;
}

.mt3{
	margin:3px 0 0 0;
}

.mt10{
	margin:10px 0 0 0;
}


.mt20{
	margin:20px 0 0 0;
}

.mt30{
	margin:30px 0 0 0;
}

/*-------- PADDING --------*/

.pt5{
	padding-top:5px;
}

.pt10{
	padding-top:10px;
}

.pt15{
	padding-top:15px;
}

.pt20{
	padding-top:20px;
}

.pt25{
	padding-top:25px;
}

.pt30{
	padding-top:30px;
}

.pt40{
	padding-top:40px;
}

.pt60{
	padding-top:60px;
}

.pl10{
	padding-left:10px;	
}

.pl12{
	padding-left:12px;	
}

.pl15{
	padding-left:15px;	
}

.pl20{
	padding-left:20px;	
}

.pl30{
	padding-left:30px;	
}

.pl40{
	padding-left:40px;	
}

.pl50{
	padding-left:50px;	
}

.pl60{
	padding-left:60px;	
}

.pl70{
	padding-left:70px;	
}

.pl80{
	padding-left:80px;	
}

.pl100{
	padding-left:100px;	
}

.pr100{
	padding-right:100px;	
}


.pb20{
	padding-bottom:20px;	
}

/*-------- COMMON --------*/

.pic{
	padding:2px;
	display:block;
	border:1px solid #CCCCCC;
}

.hidden{
	overflow:hidden;
}

.abs{
	position:absolute;
}

.ondes{
	color:#999999;
}

@media screen and (max-width: 840px) {
	.delay2{
		opacity:0;
		transition: all 0.4s;
	}
	.delay4{
		opacity:0;
		transition: all 0.4s;
	}
	
	.delay6{
		opacity:0;
		transition: all 0.4s;
	}
	.delay8{
		opacity:0;
		transition: all 0.4s;
	}
	
	.delay2.active{
		opacity:1;	
		transition-delay: 200ms;
	}
	.delay4.active{
		opacity:1;	
		transition-delay: 400ms;
	}
	.delay6.active{
		opacity:1;	
		transition-delay: 600ms;
	}
	.delay8.active{
		opacity:1;	
		transition-delay: 800ms;
	}
}


.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #000000;
  background: -moz-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: -webkit-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: -o-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: -ms-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: linear-gradient(to right, #000000 10%, rgba(0,0,0, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position:absolute;
  left:50%;
  margin-left:-5.5em;
  top:20%;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #000000;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #FFF;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}