@charset "utf-8";

/*  ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	file name  :index.css
 
 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
 
 .w110pt2{
	 width:100%;
	 margin:0 auto;
	 padding-left:0px;
	 position:absolute;
 }
 
 
.video-wrap {
  position: relative;
}
video {
  margin: 0 0 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

.fade-up {
  transition: opacity 2.5s;
  -moz-transition: opacity 2.5s;
  -webkit-transition: opacity 2.5s;
  -o-transition: opacity 2.5s;
  transition: transform 2.5s;
  -moz-transition: transform 2.5s;
  -webkit-transition: transform 2.5s;
  -o-transition: transform 2.5s;
}
 
.fbSp{
	display:none;
}

 .information{
	 background:url(../../img/footerImg.jpg) 50% 50% no-repeat;
	 height:318px;
	 margin:0 auto;
	 background-size:cover;
	 padding-top:76px;
 }
 
 .informationHeading{
	 color:#FFFFFF;
	 font-size:54px;
	 letter-spacing:5px;
	 font-weight:100;
	 text-align:center;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	 
 }
 
 .contactFooterLeft{
	 float:left;
	 width:490px;
	 background: linear-gradient(-135deg,#3eb3d0,#64c8cd );
	 padding:34px 0px;
	 margin-top:46px;
 }
 
 .contactFooterRight{
	 margin-top:46px;
	 float:right;
	 width:490px;
	 background: linear-gradient(-135deg,#3eb3d0,#64c8cd );
	 padding:34px 0px;
 }
 
 .en{
	 font-size:28px;
	 text-align:center;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	 letter-spacing:2px;
 }
 
 .ja{
	 font-size:12px;
	 text-align:center;
	 letter-spacing:0.5px;
 }
 

.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.youtubewide{
	width:49%;
	margin:0 auto;
	float:left;
	padding:5px;
	border:1px solid #464646;
	margin-bottom:15px;
}

.youtubewideright{
	width:49%;
	margin:0 auto;
	float:right;
	padding:5px;
	border:1px solid #464646;
}
.clear {
    clear:both;　/*floatの解除、ここがポイント*/
}

#youtubewidebox{
	padding-top:60px;
}

 .skill2{
	 color:#ffffff;
	 font-size:20px;
	 letter-spacing:10px;
	 font-weight:100;
	 text-align:center;
	 position:relative;
	 top:-10px;
 }

.bgc{
	background:#0465b3;
	padding-top:20px;
}

 .tpConcept span{
	font-size:22px;
}


.fb a:after{
	display:none;
}

 
.header_nav a{
	display:inline-block;
}

.bnr a{
	display:block !important;
}		
	
a:hover{
    opacity: .75;
    filter: alpha(opacity=75);
    -ms-filter: "alpha(opacity=75)";
    -khtml-opacity: .75;
    -moz-opacity: .75;
}

 
 


body{
	width:100%;
	overflow-x:hidden;
}

h2{
	margin:0;
}
p{
	margin:0px;
}
h3{
	margin:0px;
}

#header {
	overflow: hidden;
	min-width: 100%;
    min-height: 100%;
	background:url(../../img/top_01.png) 50% 50% no-repeat;
	background-size:cover;;
}
.header_area{
	margin: 0 auto;
	width: 100%;
	height:100%;
	z-index: 1000;
}

@media screen and (max-width: 1280px){
	.w110pt2{
	 width:100%;
	 margin:0 auto;
	 padding-left:60px;
	 position:absolute;
 }
 
	.header_area{
		width: 100%;
	}
	.fbSp{
	display:block;
	float:right;
	padding-top:24px;
	padding-right:6px;
}

.logo{
	width:120px;
	float:left;
	margin-top:12px;
}

	.header_nav a{
	display:block;
}

.fb{
	display:none !important;
	visibility:hidden;
}

 .tpConcept{
	 background:url(../../img/skyblue.jpg) bottom;
	 height:740px;
	 margin:0 auto;
	 padding-top:120px !important;
	 background-size:cover;
 }
 
}

@media screen and (max-width: 640px){
	#tubular-container iframe {
		display: none;
	}
	
	.ftNav{
		display:none;
	}
	
	.bgc{
	background:#0465b3;
	padding-top:30px;
}
	
	.youtubewide{
	width:100%;
	margin:0 auto;
	float:left;
	padding:2px;
	border:1px solid #464646;
	margin-bottom:15px;
}

	.youtubewideright{
	width:100%;
	margin:0 auto;
	float:right;
	padding:2px;
	border:1px solid #464646;
	margin-bottom:15px;
}
	
	 .skill2{
	 color:#ffffff;
	 font-size:16px;
	 letter-spacing:0px;
	 font-weight:100;
	 text-align:center;
	 position:relative;
	 top:-15px;
 }
	
	#youtubewidebox{
	padding-top:30px;
	width:80%;
	margin:0 auto;
}

	#header{
		background-image: url(代替え画像URL);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
 
 
 .header_nav ul{
	 list-style:none;
 }
 
  .header_nav li{
	 display:inline-block;
	 color:#FFFFFF;
	 font-size:14px;
	 margin-left:20px;
	 letter-spacing:0.1em;
	 font-weight:400;
 }
 
 
	 
 
 #tubular-container,#tubular-shield{
	 position:fixed;
	 left:0;
	 top:0;
	 z-index:-1 !important;
	 background-size: cover;
	 min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;

 }
 
 body,html{
	 height:100%;
	 width:100%;
 }
 
 
 #hd{
	 position:relative;
	 z-index:300;
 }
 
 .mvLogo{
position: absolute;
 top: 36px;
 left: 52px;
 z-index:333;
 }

 .sns{
	 position:fixed;
	 z-index:1300;
 top:480px;
 left:-70px;
 }
 
  .header_nav{
position: absolute;
 top: 20px;
 right:30px;
 color:#FFFFFF;
 }
 
 .scroolName{
	 color:#FFFFFF;
	 letter-spacing:5px;
	 text-align:center;
	 font-size:20px;
	 border-bottom:2px solid #FFFFFF;
 }
 
 .mvScroll{
	 margin:auto; 
	 position:absolute;
	 height:200px;
	 left:0;
	 right:0;
	 top:90%;
	 bottom:0;
 }
 
  .mvScroll .scrool{
	  text-align:center;
	  margin-top:10px;
	  }
 
 
 .mvCatch{
	text-align:center;
	top:45%;
	position:absolute;
	left:50%;
	margin-left:-414px;
	z-index:2000;
 }
 
  .mvCatch22{
	text-align:center;
	top:0;
	position:absolute;
	left:0%;
 }
 
 .Catch{
	text-align:center;
	margin-top:46px;
 }
 
  .mvCatch img{
	  text-align:center;
 }
 
 #hd img{
	 width:100%; 
	 max-width: 100%;
 }
 
 a{
	 text-decoration:none;
	 color:#FEFEFE;
 }
 
 .tpConcept{
	 background:url(../../img/president.jpg) 50% 50% no-repeat;
	 height:806px;
	 margin:0 auto;
	 padding-top:100px;
	 background-size:cover;
 }
 
 .contentsCopy{
	 font-size:45px;
	 color:#141414;
	 letter-spacing:0px;
	 margin-top:56px;
	 margin-bottom:41px;
	 text-align:left;
	 font-weight:100;
	 line-height:62px;
	 font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
 }
 .video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.bnr iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
 
 .w110{
	 width:1100px;
	 margin:0 auto;
	 text-align:left;
 }
 
  .text{
	 font-size:14px !important;
	 line-height:38px !important;
	 color:#FFFFFF;
	 font-weight:100;
	 letter-spacing:0px;
 }
 
 @media screen and (max-width:1024px)and (min-width:768px) {
 .w110{
	 width:100%;
	 margin:0 auto;
	 padding-left:60px;
 }
 
.information .w110{
	 width:93%;
	 margin:0 auto;
	 padding-left:0px;
 }
 
 .w110pt2{
	 width:100%;
	 margin:0 auto;
	 padding-left:60px;
	 position:absolute;
 }


 }
 
 .skill{
	 color:#6d6d6d;
	 font-size:54px;
	 letter-spacing:5px;
	 font-weight:100;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
 }
 
 .text{
	 font-size:12px !important;
	 line-height:28px !important;
	 color:#FFFFFF;
	 font-weight:100;
	 letter-spacing:0px;
 }
 
 .reason{
	 background:#FFFFFF;
	 margin:0 auto;
	 background-size:cover;
 }
 
 .Imgarea{
	 height:216px;
	 background:url(../../img/imgarea.jpg) 50% 50% no-repeat;
	 background-size:cover;
 }
 
 
  .vision{
	 background:#FFFFFF;
	 background:url(../../img/view.jpg) 50% 50% no-repeat;
	 height:738px;
	 margin:0 auto;
	 background-size:cover;
 }
 
 .mvCatch2{
	 margin-top:36px;
	 margin-bottom:40px;
	 text-align:center;
	 margin-right:18px;
 }

.reasonHeading{
	 color:#234964;
	 font-size:54px;
	 letter-spacing:5px;
	 font-weight:400;
	 text-align:center;
	 padding-top:100px;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
 }
 
 .visionHeading{
	 color:#FEFEFE;
	 font-size:54px;
	 letter-spacing:5px;
	 font-weight:400;
	 text-align:center;
	 padding-top:100px;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
 }
 
 .reasonText{
	 font-size:17px !important;
	 line-height:37px !important;
	 color:#234964;
	 font-weight:700;
	 text-align:center;
	 letter-spacing:0px;
 }
 
  .visionText{
	 font-size:17px !important;
	 line-height:37px !important;
	 color:#FFFFFF;
	 font-weight:100;
	 text-align:center;
	 letter-spacing:1px;
 }
 
 .visionText span{
	 font-size:23px !important;
	 line-height:90px !important;
	 color:#FFFFFF;
	 font-weight:500;
	 text-align:center;
	 letter-spacing:1px;
 }
 
 .reasonText{
	font-size:14px;
	line-height:37px;
	text-align:center;
	 letter-spacing:1px;
	 margin-top:30px;
}




.line{
	text-align:center;
	margin-top:32px;
}


.footer{
	background:#000000;
	padding-top:44px;
	padding-right:4%;
	padding-left:4%;
	padding-bottom:0px;
}

.ftInfoLeft p{
	color:#FFFFFF;
	font-size:13px;
	line-height:32px;
}
.ftInfoLeft p span{
	color:#FFFFFF;
	font-size:13px !important;
}

.ftInfo{
	padding-bottom:20px;
}

.bnr{
	margin:0 auto;
	text-align:center;
	padding-top:70px;
}

.bnr01{
	background:url(../../img/bnr01.jpg) no-repeat;
	width:100%;
	margin:0 auto;
	background-size: cover;
}





.bnr01 img{
	width:100%;
}

.bnr03 img{
	width:100%;
}

.bnr02 img{
	width:100%;
}

.bnr02{
	background:url(../../img/bnr02.jpg) no-repeat;
	margin:0 auto;
	
	width:100%;
	background-size: cover;
}

.bnr03{
	background:url(../../img/bnr03.jpg) no-repeat;
	width:100%;
	margin:0 auto;
	background-size: cover;
}
	
.bnr .english{
	font-size:22px;
	color:#c6a47b;
	letter-spacing:3px;
	font-weight:100;
	line-height:34px;
	text-align:left;
	padding-left:108px;
	padding-top:122px;
	padding-bottom:0px !important;
	font-family: 'Squada One', cursive;
}

.bnr .english3{
	font-size:22px;
	color:#c6a47b;
	letter-spacing:3px;
	font-weight:100;
	line-height:34px;
	text-align:left;
	padding-left:108px;
	padding-top:122px;
	padding-bottom:0px !important;
	font-family: 'Squada One', cursive;
}

.bnr h3{
	font-size:38px;
	color:#FFFFFF;
	letter-spacing:3px;
	font-weight:400;
	text-align:left;
	margin-bottom:2px;
	padding-top:7px;
	padding-left:108px;;
}

.bnr p{
	font-size:16px;
	color:#FFFFFF;
	letter-spacing:1px;
	font-weight:400;
	line-height:34px;
	text-align:left;
	padding-left:108px;
	padding-bottom:122px;
}

.bnr .englishRight{
	font-size:22px;
	color:#c6a47b;
	letter-spacing:3px;
	font-weight:400;
	line-height:34px;
	text-align:left;
	padding-right:108px;
	padding-bottom:0px !important;
	padding-top:122px;
	font-family: 'Squada One', cursive;
}

.bnr .h3Right{
	font-size:34px;
	color:#FFFFFF;
	letter-spacing:3px;
	font-weight:400;
	text-align:left;
	margin-bottom:2px;
	padding-top:7px;
	padding-right:108px;
}

.bnr .textRight{
	font-size:16px;
	color:#FFFFFF;
	letter-spacing:1px;
	font-weight:400;
	line-height:34px;
	text-align:left;
	padding-right:108px;
}

.textRightFloat{
	float:right;
}

.ftNav li{
	display:inline-block;
	margin-left:30px;
	font-size:15px;
}

.ftNav{
	float:right;
}

.ftLogo{
	margin-bottom:25px;
	float:left;
	margin-right:34px;
}


.ftLogo a{
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  background-color: #333;
}


#hoge{
  height:627px;
  margin:0 auto;
}



.ftInfoLeft{
	float:left;
	letter-spacing:1px;
	width:600px;
}

.clearfix:after{
	display: block;
  clear: both;
  content: "";
  visibility:hidden;
  height:0;
}

.copyright{
	color:#b2b2b2;
	font-size:11px;
	text-align:right;
	float:right;
	width:300px;
	margin-top:-37px;
	letter-spacing:1px;
}

/*------------------------------------*\
    BORDERS
\*------------------------------------*/
 

 
/* ...and position them! */
html:before{
    height:14px;
    left:0;
    right:0;
    top:0;
}
html:after{
    width:14px;
    top:0;
    right:0;
    bottom:0;
}
body:before{
    height:14px;
    right:0;
    bottom:0;
    left:0;
}
body:after{
    width:14px;
    top:0;
    bottom:0;
    left:0;
}

.header_nav ul {
	font-size: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	list-style: none;
	text-align: center;
}
.header_nav li {
	font-size: 15px;
	margin: 20px 16px;
	display: inline-block;
}
.mvScroll ul {
	font-size: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	list-style: none;
	text-align: center;
}

.mvScroll li {
	font-size: 13px;
	letter-spacing:1px;
	margin: 20px -1px;
	display: inline-block;
	border:2px solid #FFFFFF !important;
	padding:15px;
	width:200px;
}

.header_nav li a {
	text-decoration: none;
	padding-bottom: 20px; /* 文字と下線に隙間を作る */
	color: #FFFFFF;
	display: block;
}
.header_nav li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 1px solid #c6a47b;
	padding-bottom:5px;
	display: block;
}
.header_nav li a:hover:after {
	width: 100%;
	color: #c6a47b;
	border-bottom: 1px solid #c6a47b;
}

.header_nav li a:hover{
	color: #c6a47b;
}





.ftNav ul {
	font-size: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	list-style: none;
	text-align: center;
}
.ftNav li {
	font-size: 15px;
	margin: 20px 16px;
	display: inline-block;
	font-weight:100;
}
.ftNav li a {
	text-decoration: none;
	padding-bottom: 20px; /* 文字と下線に隙間を作る */
	color: #FFFFFF;
	display: block;
}
.ftNav li a:after {
	content: '';
	width: 0;
	border-bottom: 2px solid #ffffff !important;
	padding-bottom:5px;
	display: block;
}
.ftNav li a:hover:after {
	width: 100%;
	color: #c6a47b;
	border-bottom: 1px solid #c6a47b;
}

.ftNav li a:hover{
	color: #c6a47b;
}

.brbr{
	display:none;
}

.Scrollsp{
	display:none;
	}
	
	 .text{
	 font-size:17px !important;
	 line-height:35px !important;
	 color:#6D6D6F;
	 font-weight:700;
	 letter-spacing:0px;
 }
 
 
 
 
 .scrollmark{
  padding-top: 42px;
}

 .scrollmark span{
  margin-left:-12px;
  line-height:33px;
  z-index:100;
}
.scrollmark{
  position: absolute;
  top: 89%;
  left: 50%;
  width: 28px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
  font-size:12px;
  color:#F6F6F6;
  font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
  letter-spacing:1px;
}
.scrollmark  span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
  padding-left:-15px;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width:768px){
	.header_nav a{
		display:block !important;
	}
	
	.scrollmark{
  position: absolute;
  top: 88%;
  left: 50%;
  width: 26px;
  height: 0px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
  font-size:13px;
  color:#F6F6F6;
  font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
  letter-spacing:1px;
  margin-left:-10px;
}

	.Imgarea{
	 height:216px;
	 background:url(../../img/imgarea2.jpg) 50% 50% no-repeat;
	 background-size:cover;
 }
 
	.Scrollsp{
		position:absolute;
		top:60%;
		display:block;
		width:100%;
		text-align:center;
	}
	
	.noneTop{
display:none;
}

	#header{
		background:url(../../img/mvSp.jpg) center center;
		background-size:cover;
		width:100%;
	}
	
	.mvLogo img{
		width:100%;
	}
	
	.mvScroll{
		visibility: hidden;
	}
	
	.mvCatch{
		display:none;
	}
	
	.tpConcept{
	 background:url(../../img/skyblueSp.jpg) no-repeat;
	 background-size:cover;
	 padding-top:40px !important;
 }
	
.bnr{
	padding-left:7% !important;
	padding-right:7% !important;
}
.reasonHeading{
	font-size:24px;
}
.reasonText{
	font-size:13px;
	display:block;
	letter-spacing:0px;
}

.reason{
	padding-bottom:50px;
}

.w110{
	width:100%;
}

.skill{
	padding-left:18px;
	letter-spacing:2px;
}

.contentsCopy{
	padding-left:24px;
	letter-spacing:2px;
	font-size:34px;
}

.text{
	padding-left:35px;
	padding-right:35px;
}
 .text{
	 font-size:12px !important;
	 line-height:28px !important;
	 color:#FFFFFF;
	 font-weight:100;
	 letter-spacing:0px;
 }


.tpConcept{
	height:100%;
	position:top center;
	padding-bottom:50px;
	background:#ececec;
}
.brbr{
	display:block;
}
.brbrbr{
	display:none;
}

.reasonHeading{
	padding-top:72px;
	padding-left:32px;
	padding-right:32px;
}

.english{
	padding-top:100px !important;
	padding-left:0px !important;
	font-size:10px;
	text-align:center !important;
	letter-spacing:0px;
}

.english3{
	padding-top:85px !important;
	padding-left:0px !important;
	font-size:10px;
	text-align:center !important;
	letter-spacing:0px;
}

.englishRight{
	padding-top:85px !important;
	padding-left:0px !important;
	padding-right:0px !important;
	font-size:10px;
	text-align:center !important;
	letter-spacing:0px;
}

.textRightFloat{
	float:none;
}

.bnr h3{
	font-size:32px;
	padding-left:0px !important;
	text-align:center;
	width:100%;
}

.bnr .h3Right{
	font-size:32px;
	padding-left:0px !important;
	text-align:center;
	width:100%;
	padding-right:0px !important;
}

.bnr .textRight{
	font-size:15px;
	text-align:center;
	padding-left:0px;
	text-align:center;
	padding-right:0px;
	
	line-height:26px;
}

.bnr p{
	font-size:15px;
	text-align:center;
	padding-left:0px;
	text-align:center;
	line-height:26px;
}

.bnr h3{
	margin-bottom:0px;
	padding-top:0px;
}
.bnr .h3Right{
	margin-bottom:0px;
	padding-top:0px;
}

.copyright{
	text-align:center;
	margin-top:20px;
	font-size:9px;
	width:100%;
}

.ftLogo img{
	width:100%;
}

.reason{
	padding-left:0;
	padding-right:0;
}
.bnr01{
	background:url(../../img/bnr01sp.jpg) center center !important;
	width:100%;
	height:300px;
	text-align:center;
	background-size:cover !important;
	margin:0 auto;
	}
	.bnr02{
	background:url(../../img/bnr02sp.jpg) center center  !important;
	width:100%;
	height:300px;
	background-size:cover !important;
	}
	.bnr03{
	background:url(../../img/bnr03sp.jpg) top center !important;
	width:100%;
	height:300px;
	background-size:cover !important;
}
/*------------------------------------*\
    BORDERS
\*------------------------------------*/
 
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
    visibility: hidden;
}

.header_nav li a{
	padding:13px 0px!important;
	display:inline-block;
}



.header_nav li a:after{
	display:none;
}

.header_nav li{
	margin:3px 0px;
	border:1px solid;
	width:88%;
	display:inline-block;
}

.noneTop{
	visibility:hidden;
display:none !important;
}
	
	.header_nav li{
		padding:5px 0px;
	}



 .header_nav{
	 width:100%;
 padding-top:0px;
 color:#FFFFFF;
 top:100px;;
 right:inherit;
 }
 
 .header_nav{
	 right:none !important;
	  }
 
 
 .ftNav ul {
	font-size: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0px;
	list-style: none;
	text-align: center;
	margin:0 auto;
	padding-left:0px !important;
}
.ftNav li {
	font-size: 15px;
	margin: 6px 6px;
	display: inline-block;
	text-align:left;
}
.ftNav li a {
	text-decoration: none;
	color: #FFFFFF;
	display:inline-block;
}
.ftNav li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 0px solid #c6a47b !important;
	padding-bottom:0px;
	display:inline-block;
}
.ftNav li a:hover:after {
	width: 100%;
	color: #c6a47b;
	border-bottom: 0px solid #c6a47b;
}

.ftNav li a:hover{
	color:#F9F9F9
	;
}

.ftNav{
	float:left;
	margin-top:16px;
}

.ftInfo{
	border-bottom:1px solid #727270;
	padding-bottom:0px;
}
.ndLeft{
	padding:0px 20px;
}

.mvLogo{
	position:static;
	top:0px !important;
	text-align:center;
}

 .ftNav ul {
	font-size: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0px;
	list-style: none;
	text-align: center;
}
.ftNav li {
	font-size: 12px;
	display: block;
	text-align:center;
}
.ftNav li a {
	text-decoration: none;
	color: #FFFFFF;
	display: block;
}
.ftNav li a:after {
	display:none;
}

.ftNav li a:hover:after {
	display:none;
}

.ftNav{
	float:left;
	margin-top:16px;
	margin-bottom:16px;
}

.ftInfo{
	border-bottom:1px solid #727270;
	padding-bottom:0px;
	margin-bottom:30px;
}

.ftNav li {
margin:0.5%;
width:100%;
float:left;
border:1px solid #FFFFFF;
text-align:center;
}


.ftNav ul {
text-align:center;
width:100%;
}


.ftNav{
padding:0 0px;
margin-top:16px;
}

.ftNav li a {
padding:10px 9px !important;
}

.ftNav li a:after {
	display:none;
}

.ftNav li a:hover:after {
	display:none;
}

}



.footerBlue{
	background:#4c4a49;
	height:68px;
	text-align:center;
	padding:0;
}

.footerBlue{
	height:45px;
}

 .spPhotoTop{
	 display:none;
 }
 
 .spTop{
	 display:none;
 }

 @media screen and (max-width:1024px)and (min-width:768px) {
	.header_area{
		width: 100%;
	}
	.fbSp{
	display:block;
	float:right;
	padding-top:44px;
	padding-right:46px;
}

 }
 

 
 body  {
        background: #ececec;
        padding: 40px 0;
        font-family: roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
        color: #444;
        text-align: center
    }
    .button-wrapper {
        display: inline-block;
        margin: 46px 0px;
		width:49%;
    }
    .button {
        background: #fff;
        border: none;
        padding: 2px;
        cursor: pointer;
        display: block;
        position: relative;
        overflow: hidden;
        transition: all .35s ease-in-out .35s;
        margin: 0 auto;
        text-align: center;
    }
    .dark-button .button,
    .dark-button .button span {
        background: linear-gradient(-135deg, #3eb3d0, #64c8cd);;
        color: #fff;
    }
	
	.inforight{
		float:right;
	}
	
	.infoleft{
		float:left;
	}
	
    .dark-button .button:after,
    .dark-button .button:before,
    .dark-button .button:hover span {
        background: #fff;
        color: #444;
    } 
    .dark-button-2 .button,
    .dark-button-2 .button span {
        background: #333;
        color: #fff;
    }
    .dark-button-2 .button:after,
    .dark-button-2 .button:before,
    .dark-button-2 .button:hover span {
        background: #fff;
        color: #444;
    } 
    .button span {
        display: block;
        padding: 34px 30px;
        background: #fff;
        z-index: 100;
        position: relative;
        transition: all .35s ease-in-out .35s;
    }
    .button:hover span {
        background: #36B4C7;
        color: #fff;
        transition: all .35s ease-in-out .35s;
    }
    .button:after {
        bottom: -100%;
        right: -100%;
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: #36B4C7;
        transition: all .35s ease-in-out .5s;
    }
    .button:hover:after {
        right: 0;
        bottom: 0;
        transition: all ease-in-out .35s;
    }
    .button:before {
        top: -100%;
        left: -100%;
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: #36B4C7;
        transition: all .35s ease-in-out .5s;
    }
    .button:hover:before {
        left: 0;
        top: 0;
        transition: all ease-in-out .35s;
    }
	
	.spbr{
		display:none;
	}
	
	
@media screen and (max-width:768px){
	.ftLogo{
	margin-bottom:25px;
	float:left;
	margin-right:0px;
}
.spTop{
	 display:block;
	 width:100%;
	 position:absolute;
	 top:42%;
 }
 
#hoge{
  height:496px;
  margin:0 auto;
}


.ftLogo{
	margin-bottom:12px;
	float:none;
	margin-right:0px;
}

.ftInfoLeft{
	float:none;
	letter-spacing:1px;
	width:70%;
}

.footer{
	background:#000000;
	padding-top:44px;
	padding-right:4%;
	padding-left:4%;
	padding-bottom:30px;
}
	
	.ftInfoLeft{
	float:none;
	letter-spacing:1px;
	margin:0 auto;
	width:60%;
	margin-bottom:30px;
}
	
	.spPhotoTop{
	display:block;
	margin-bottom:-10px;
	margin-top:14px;
}

.spPhotoTop img{
	width:100%;
}

.visionHeading{
	 color:#FEFEFE;
	 font-size:33px;
	 letter-spacing:5px;
	 font-weight:100;
	 text-align:center;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	 padding-top:80px;
 }	
 
   .button span {
        display: block;
        padding: 15px 30px;
        background: #fff;
        z-index: 100;
        position: relative;
        transition: all .35s ease-in-out .35s;
    }
	
 .spbr{
		display:block;
	}
 
 .mvCatch2 img{
 width:94%;
 }
 
  .vision{
	 background:#FFFFFF;
	 background:url(../../img/view.jpg) 20% 50% no-repeat;
	 height:auto;
	 margin:0 auto;
	 background-size:cover;
	 padding-bottom:60px;
 }
 
 .w110{
	 width:94%;
 }
 
 .w110pt2{
	 width:97%;
	 margin:0 auto;
	 padding-left:3%;
	 position:absolute;
 }
 
   .visionText{
	 font-size:13px !important;
	 line-height:25px !important;
	 color:#FFFFFF;
	 font-weight:100;
	 text-align:left;
	 letter-spacing:0px;
 }
 
  .visionText span{
	 font-size:26px !important;
	 line-height:40px !important;
	 color:#FFFFFF;
	 font-weight:100;
	 text-align:center;
	 letter-spacing:0px;
 }
 
 .Catch img{
	 width:94%;
 }
 
 .reasonHeading{
	 color:#020202;
	 padding-top:80px;
	 font-size:33px;
	 letter-spacing:5px;
	 font-weight:100;
	 text-align:center;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
 }
 
 .reasonText{
	font-size:13px !important;
	line-height:25px !important;
	text-align:left;
	 letter-spacing:1px;
	 margin-top:30px;
}
.reason{
	 background:#FFFFFF;
	 padding-bottom:0px;
	 margin:0 auto;
	 padding-top:0px;
	 background-size:cover;
 }
 
 .Catch{
	text-align:center;
	margin-top:36px;
 }
 
 .informationHeading{
	 color:#FFFFFF;
	 font-size:33px;
	 letter-spacing:5px;
	 font-weight:100;
	 text-align:center;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif; 
 }
 
  .information{
	 background:url(../../img/footerImgsp.jpg) 50% 50% no-repeat;
	 height:296px;
	 margin:0 auto;
	 padding-top:56px;
	 background-size:cover;
 }
 

    .button-wrapper {
        display: inline-block;
        margin: 36px 0px 6px;;
		width:100%;
    }
 
 .inforight{
		float:none;
	}
	
	.infoleft{
		float:none;
	}
	.button {
        background: #fff;
        border: none;
        padding: 2px;
        cursor: pointer;
        display: block;
        position: relative;
        overflow: hidden;
        transition: all .35s ease-in-out .35s;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
	 .en{
	 font-size:18px;
	 text-align:center;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	 letter-spacing:2px;
	 line-height:28px;
 }
 
 .ja{
	 font-size:10px;
	 text-align:center;
	 letter-spacing:0.5px;
 }
	
	.inforight{
		margin-top:6px;
	}
	
	.skill{
	 color:#6d6d6d;
	 font-size:33px;
	 letter-spacing:5px;
	 font-weight:100;
	 font-family:roboto, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
 }
 
 .contentsCopy{
	padding-left:0px;
	letter-spacing:1px;
	font-size:24px;
	margin-top:24px;
	margin-bottom:14px;
	line-height:36px;s
}
.skill{
	padding-left:0px;
	letter-spacing:2px;
}

.text{
	padding-left:0px;
	padding-right:0px;
	color:#323333;
	font-size:13px !important;
	line-height:25px !important;
}

.pcbr{
	display:none;
}
  }