@charset "UTF-8";
body {
	font: 100%/1.4 ;
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-size : 14px;
	font-size : 0.9rem;
	margin: 0;
	padding: 0;
	color: #000;
}

/** =================
loading
================== **/
body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}
 
.anime {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #ffffff;
 position: relative;
}
 
.anime img {
 display: block;
 position: absolute;
 top: 33%;
 left: 44%;
 width : 13%;
}
 
#wrapper {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 position: relative;
}
 

/** ===========================
animation
=========================== **/
.fadeInUp{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 visibility: visible !important;
}


#wrapper p{
	line-height : 3;
	letter-spacing: 1.6px;
}

ul, ol, dl {padding: 0;margin: 0;}
a img { border: none;}
a:link {color:#414958;text-decoration:none;}
a:visited {color: #4E5869;text-decoration:none;}
a:hover, a:active, a:focus {text-decoration: none;}
.clearfloat { clear:both;height:0;font-size: 1px;line-height: 0px;}

.tb{font-weight : bold;}
.tInB{display:inline-block}

a.fade:hover {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a.fade {
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}



/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
.inner img{
	width : 80%;
	margin : 5% auto;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 4% auto;
  border-bottom: 1px solid #CBCBCB;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1.5em;
  text-decoration: none;
  transition-duration: 0.4s;
}
nav .inner ul li a:hover {
  background-color: #F1F1F1 !important;
  transition-duration: 0.4s;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 8%;
  right: 10%;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(135deg);
  transform: translateY(-10px) rotate(135deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

/** ==============================
Index 
==============================  **/
#header{
	width : 80%;
	margin : 5% auto;
}
#navArea {
	width : 100%;
	position : relative;
}
#navArea h1{
	width : 15%;
}
#navArea h1 img{
	width : 100%;
}

#ic{
	width : 80%;
	margin : 0 auto;
	position : relative;
}
#ic p{
	width : 30%;
	position : absolute;
	top : 60%;
	left : 0;
	background-color : #fff;
	padding : 3%;
	z-index : 1;
}

.swiper-container {
      width: 90%;
      margin-left : 10% !important;
    }
.swiper-slide img{
	width : 100%;
}







#contents{
	width : 75%;
	margin : 30% auto;
}
#contents img{
	width : 100%;
}

.section02 img{
	padding-bottom : 5%;
}
img.pan{
	width : 60% !important;
	padding-left : 40%;
	margin : 5% 0 15%;
}
.section05{
	margin : 20% 0;
}
#nairan{
	background-color : #7E7E7E;
	width : 100%;
	padding : 10% 0;
	text-align : center;
}
.vrSection{
	width : 50%;
	margin : 10% auto;
}
.vrMovie{
	width : 100%;
	position : relative;
  	padding-top: 56.25%;
}
.vrMovie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
#nairan h2{
	font-size : 2rem;
	color : #fff;
	letter-spacing: 2px;
	line-height : 3;
	width : 20%;
	border-bottom : 1px solid #fff;
	margin : 0 auto;
}
#nairan p{
	padding : 3% 0;
	color : #fff;
}


#contact{
	width : 80%;
	margin : 0 auto;
	padding : 15% 0;
	text-align : center !important;
}
#contact h2{
	font-size : 2rem;
	margin : -5% auto 5%;
	line-height : 3;
	width : 30%;
	border-bottom : 1px solid #6A6A6A;
}

#form{
	width : 80%;
	max-width : 1280px;
	margin : 2% auto;
	border : 1px solid #666;
}
input.formName,input.mf{
	width : 70%;
	line-height : 2.5;
}
td.send{
	text-align:center;
	width : 100%;
}
.sendButton{
	text-align:center;
}
td.send input{
	margin : 3% 0;
	display:inline-block;
	text-align : center;
	line-height : 2;
	padding : 2% 10%;
	background-color : #fff;
	border-style:none;
	border : 1px solid #333;
    -webkit-border-radius: 1px;
	border-radius: 1px;  
	font-size : 0.8rem;
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	cursor:pointer;
    -webkit-appearance: none;
}



.credit {
	width : 100%;
	text-align : center;
	font-size : 0.6rem;
}


/**
仮設ページ
*************************************************************************************************************/
.kasetsu{
	width : 80%;
	margin : 0 auto;
	text-align : center;
	padding : 5% 0;
	line-height : 1.8;
	color : #707070;
	font-size : 1rem;
}
.kConcept{
	width : 35%;
	margin : 0 auto;
	padding : 10% 0 13%;
}
.kButton{
	width : 70%;
	margin : 0 auto;
	padding : 5% 0;
}
.kButton .bt{
width : 21.5%;
margin : 0 5%;
float : left;
border : 1px solid #666;
border-radius: 2px;
padding : 3.5% 8.5%;

}
.button{
     display:inline-block;
     text-decoration: none;
     text-align: center;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}


@media screen and (max-width : 1280px) {
.toggle_btn {
  display: block;
  position: fixed;
  top: 6%;
  right: 10%;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
}
@media screen and (max-width : 960px) {
.anime img {
 top: 33%;
 left: 41.5%;
 width : 18%;
}
#navArea h1{
	width : 25%;
}
.toggle_btn {
  top: 5%;
  width: 30px;
  height: 30px;
}
#ic p{
	width : 70%;
	position : inherit;;
}
.vrSection{
	width : 70%;
	margin : 10% auto;
}
#contact h2{
	font-size : 2rem;
	margin : -5% auto 5%;
	line-height : 3;
	width : 40%;
}

}

/**
for smartphone-horizontal & tablet *************** **/
@media screen and (max-width : 768px) {
.anime img {
 top: 38%;
 left: 41%;
 width : 20%;
}
#ic p{
	width : 90%;
}
#header{
	width : 80%;
	margin : 10% auto;
}
#navArea h1{
	width : 25%;
}
.toggle_btn {
  top: 6.5%;
}

#nairan h2{
	font-size : 1.8rem;
	letter-spacing: 3px;
	line-height : 3.2;
	width : 30%;
}
#contact h2{
	font-size : 2rem;
	margin : -5% auto 5%;
	line-height : 3;
	width : 40%;
}
}
/**
for smartphone ************************** **/
@media screen and (max-width : 600px) {
.anime img {
 top: 35%;
 left: 39%;
 width : 24%;
}
nav .inner ul li {
  position: relative;
  margin: 6% auto;
  border-bottom: 1px solid #CBCBCB;
}
nav .inner ul li a {
  font-size: 0.9rem;
  padding: 1.5em;
  text-decoration: none;
  transition-duration: 0.4s;
}
body {
	font-size : 0.7rem;
}
#header{
	width : 85%;
	margin : 10% auto;
}
#navArea h1{
	width : 25%;
}
.toggle_btn {
  top: 5%;
}
.vrSection{
	width : 70%;
	margin : 10% auto;
}
#nairan h2{
	font-size : 1.8rem;
	color : #fff;
	letter-spacing: 3px;
	line-height : 3.2;
	width : 30%;
}
#nairan p{
	text-align : left !important;
}
#contact h2{
	font-size : 1.8rem;
	margin : -5% auto 5%;
	line-height : 3.2;
	width : 50%;
}
#form {
		width : 100%;
	}
table.mailform tr th, table.mailform tr td{
		font-size : 0.8rem !important;
	}
}
/**
for smartphone-vertical ************************** **/
@media screen and (max-width : 480px) {
.anime img {
 top: 35%;
 left: 31%;
 width : 40%;
}
#header{
	margin : 15% auto;
}
#navArea h1{
	width : 32%;
}	
#wrapper p{
	line-height : 2.5;
	letter-spacing: 1.4px;
}
.toggle_btn {
  top: 6%;
}
.vrSection{
	width : 70%;
	margin : 10% auto;
}
#nairan h2{
	font-size : 1.4rem;
	color : #fff;
	letter-spacing: 3px;
	line-height : 2.8;
	width : 40%;
}
#contact h2{
	font-size : 1.4rem;
	margin : -5% auto 5%;
	line-height : 2.8;
	width : 80%;
}
	.contactHead{
		text-align : left;
	}
	.spdnCH{
		display : none !important
			;
	}
}

/**
for smartphone-vertical(small) ************************** **/
@media screen and (max-width : 400px) {
	#navArea h1{
	width : 38%;
}	
	.toggle_btn {
  top: 5.5%;
}
}