@charset "UTF-8";

html {
	overflow:auto;
}

* {
	box-sizing: border-box;
}



/* ----------------------------------------------------------------------
タイトル&背景

-------------------------------------------------------------------------*/







.wrap {
  overflow: hidden;
}


.wrap h1 {
	position: absolute;
	top: 200px;
	width: 100%;
	text-align: center;
	color: #FFF;
	font-size: 1.8em;
	text-align: center;
	z-index: 1000;
	left: 50%;
	transform: translate(-50%, -50%);
}

.wrap h2 {
	position: absolute;
	top: 280px;
	width: 100%;
	text-align: center;
	color: #FFF;
	font-size: 3em;
	text-align: center;
	z-index: 1000;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sliding {
  background: url("images/virtual_top.png") repeat-x;
  height: 400px;
  width: 3384px;
  animation: slide 60s linear infinite;
 position: relative;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}




.box {
    position: relative;
    margin: 30px 0px 0px 0px ;
    padding: 30px 30px;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box p {
    margin: 0;
    padding: 0;
}








.header_copy {
  width: 100%;
  margin: 0px auto;
  max-width: 1000px;
}


.header_copy2 {
  width: 100%;
  margin: 0px auto 0px auto ;
  max-width: 1000px;
}




/* ----------------------------------------------------------------------
全般　（フォント、クリアなど）

-------------------------------------------------------------------------*/

.clear {
	clear: both;
}




h2 {
font-family: 'Raleway', sans-serif;
		text-align: center;
	color: #294ce4;
}

h4 {
font-family: 'Raleway', sans-serif;
	text-align: center;
	color: #294ce4;
	}

h3 {
font-family: 'Raleway', sans-serif;
	}

h5 {
font-family: 'Raleway', sans-serif;
	}

p {
font-family: 'Raleway', sans-serif;
	}

h1 {font-family: 'Raleway', sans-serif;
	text-align: center;
	font-size: 1.5em;
	color: #e94d55;
	padding: 30px 120px;
}


/* ----------------------------------------------------------------------
フェードイン　アニメーション

-------------------------------------------------------------------------*/
.fadein{
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 1s linear;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}




/* ----------------------------------------------------------------------
　商品　3つ並び

-------------------------------------------------------------------------*/

.three_contents {
max-width: 1280px;
  width: 96%;
padding: 0 2%;
  margin: 50px auto;
}


.three_contents h3{
font-size:1.6em;
	color:cornflowerblue;
}



#optional_bg {
 background: #F1EFEF;
background-size: cover;
}

#optional {
max-width: 1280px;
  width: 100%;
  margin: 50px auto;
}


#optional h3 {
	padding:20px 20px 0px 20px;
	font-size:2em;
	color:cornflowerblue;
}

#optional h5 {
	padding: 20px;
	font-size:1.6em;
  Line-height:1.2em;
	color:cornflowerblue;
}

#optional p {
	text-align: center;
}




#virtual {
max-width: 1280px;
  width: 100%;
  margin: 50px auto;
}


#virtual h3 {
	padding:20px 20px 0px 20px;
	font-size:1.6em;
	color:cornflowerblue;
}

#virtual h5 {
	padding:20px;
	font-size:1.6em;
  Line-height:1.2em;
	color:cornflowerblue;
}



#us {
max-width: 1280px;
  width: 100%;
  margin: 50px auto;
}

.hisvideo{
float:right;
padding:20px
}

.hisvideo iframe{
  width:380px;
  height:200px;
}




.prod_3 {
  display: block;
  width: 31.33%;
  min-height:500px;
  margin: 10px 1% 30px 1%;
	  padding: 10px 0px 0px 0px;
  float: left;
  background-color: #FFF;
	 background-color: rgba(255,255,255,0.50);
	text-align: center;
}



.prod_3 img {
  width: 100%;
}

.prod_3 h3 {
  color: #000;
  padding: 20px;
  font-size: 1.3em;
  clear: both;

}

.prod_3 p {
  font-size: 1em;
  padding: 0 20px;
}



/* ----------------------------------------------------------------------
　商品　4つ並び

-------------------------------------------------------------------------*/

.four_contents {
max-width: 1280px;
  width: 100%;
padding: 0px auto;
  margin: 50px auto;
}


.four_contents h3{
font-size:1.6em;
	color:cornflowerblue;
}

.prod_4  {
  display: block;
 width: 23%;
 height: 400px;
float: left;
	text-align: center;
  background-color: #FFF;
text-decoration: none;
 margin: 9px 9px 0px 9px;
 padding: 2px 2px;
}

.prod_4 img {
  width: 100%;
}


.prod_4 h3 {
  color: #000;
  padding: 20px;
  font-size: 1.3em;
  clear: both;

}

.prod__4 p {
  font-size: 1em;
  padding: 0 20px;
}





/* ----------------------------------------------------------------------
全商品　商品　共通部分

-------------------------------------------------------------------------*/


.prod {
  display: block;
  width: 48%;
min-height: 725px;
  margin: 10px 1% 30px 1%;
  box-shadow: 3px 3px 3px grey;
  float: left;
  background-color: #FFF;
text-align: center;
}

.prod img {
  width: 100%;
}

.prod h3 {
  color: #000;
  padding: 15px;
  font-size: 1.3em;
  line-height: 1.4em;
  clear: both;
  text-align: center;
}

.prod p {
  font-size: 1em;
  padding: 15px;
  text-align: center;
}


.prod_noshadow {
	 width: 48%;
  display: block;
  margin: 30px 1% 30px 1%;
  float: left;
  background-color: #95ccff;
text-align: center;
}

.prod_noshadow img {
  width: 100%;
}



.font-smaller3 {
	font-size:1.2em;
}


.tags {
  margin: 10px;
}





.location {
  font-size: 1.2em;
  color: #FFF;
  background-color: #e72855;
  float: left;
  margin: 3px;
  font-weight: bolder;
  padding: 5px 15px;
}




/* ----------------------------------------------------------------------
ボタン
-------------------------------------------------------------------------*/


.btn {
  text-align: center;
  font-size: 1em;
  margin: 20px;
  background-color: #294ce4;
  font-weight: bolder;
  border-radius: 30px;
  color: #FFF;
  padding: 10px 20px;
  text-decoration: none;
}

.btn:hover {
   background-color: #294ce4;
}





.other_buttons {
 text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0px 0 20px 0;
}

.other_buttons ul {
  position: relative;
  left: 50%;
  float: left;
}

.other_buttons li {
  position: relative;
  right: 50%;
  float: left;
}

.buttons01 {
  float:left;
  margin: 0px 10px;
}




.buttons_blue a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:230px;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 30px;
    color: #FFF;
    background-color: #234a9e;
	font-weight: bolder;
}



.buttons_green a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:230px;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 30px;
    color: #FFF;
    background-color: #2B9B1E;
	font-weight: bolder;
}





.buttons_orange a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:230px;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 30px;
    color: #FFF;
    background-color: #E4791F;
	font-weight: bolder;
}



.buttons_gray a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:180px;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 40px;
    color: #FFF;
    background-color: #2E2E2E;
	font-weight: bolder;
}





.buttons01 a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:230px;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 30px;
    color: #FFF;
    background-color: #234a9e;
	font-weight: bolder;
}


.other_buttons2 {
 text-align: center;
  position: relative;
  overflow: hidden;
  margin: 20px 0 20px 0;
text-decoration: none;
}

.other_buttons2 ul {
  position: relative;
  left: 50%;
  float: left;
}

.other_buttons2 li {
  position: relative;
  right: 50%;
  float: left;
}


.buttons02 {
  float:left;
  margin: 15px 10px;
}


.buttons02 a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:920px;
    padding: 20px;
	margin: 10px 20px;
	border-radius: 10px;
	font-size: 1.5em;
    color: #FFFFFF;
	font-weight: bolder;
	background-color:#00a1e9;
}


.buttons03 {
  float:left;
  margin: 0px 10px;
}


.buttons03 a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:180px;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 40px;
    color: #FFF;
    background-color: #234a9e;
	font-weight: bolder;
}



/* ----------------------------------------------------------------------


media Queries


-------------------------------------------------------------------------*/


/* スマホに適用するCSS */
@media screen and (max-width:768px ) {




h1 {
	padding: 30px 30px;
	font-size:1.2em;
}


.lp-title div{
padding: 90px auto;
}


.lp-title div img {
  width: 50%;
  margin: auto;
}


.wrap {
	width: 100%;
}


.wrap h1 {
	z-index: -1000;
	top: 120px;
	font-size: 1.2em !important;
}

.wrap h2 {
	z-index: -1000;
	top: 200px;
	font-size: 2em !important;
}



.wrap img {
	width:60%;
}


.sliding {
  height: 240px !important;
  width: 100% !important; 
  animation: none !important;
  position: relative !important;
	z-index: -1100;
}

.hisvideo{
float:none;
padding:10px ;
	}

.hisvideo iframe{
  width:90%;
  height:100%;
}


#virtual {
padding: 0 1% 0 1%;
}


#virtual h5 {
	font-size:1.0em;
	color:cornflowerblue;
}


.three_contents {
padding: 0 1% 0 1%;
}



.prod_3 {
    width: 94%;
    margin: 5px 3% 15px 3%;
    min-height: 350px;
  }



.four_contents {
padding: 0 1% 0 1%;
}


.prod_4 {
	  float: none;
	 margin: 9px auto 0px auto;
	    width: 100%;
	 height: 100%;
    }
    
.prod_4 img {
	width: 100%;
}


.other_buttons ul {
  position: relative;
  left: 50%;
  float: none;
}

.other_buttons li {
  position: relative;
  right: 50%;
  float: none;
}

.buttons01 {
  float:none;
  margin: 15px 10px;
}


.other_buttons2 ul {
  position: relative;
  left: 50%;
  float: none;
}

.other_buttons2 li {
  position: relative;
  right: 50%;
  float: none;
}


.buttons01 a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:75%;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 20px;
}


.buttons02 a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:80%;
    padding: 10px;
	margin: 10px 20px 10px 35px;
	border-radius: 10px;
	font-size: 1.0em;
}


.buttons03 {
  float:none;
  margin: 15px 10px;
}


.buttons03 a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:75%;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 20px;
}



.buttons_blue a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:75%;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 20px;
}



.buttons_green a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:75%;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 20px;
}





.buttons_orange a {
	display: inline-block;
    text-align: center;
    text-decoration: none;
	width:75%;
    padding: 10px;
	margin: 10px 20px;
	border-radius: 20px;
}




.font-smaller3 {
	font-size:1.2em;
}





/* タブレットに適用するCSS */
@media screen and (max-width: 1024px){






.wrap h1 {
	top: 150px;
	width: 100%;
	font-size: 1.4em;
}

.wrap h2 {
	top: 220px;
	width: 100%;
	font-size: 2.6em;
}



.hisvideo{
float:none;
padding:10px ;
	}

.hisvideo iframe{
  width:90%;
  height:100%;
}


#virtual {
padding: 0 2%;
}


.three_contents {
padding: 0 2%;
}


  .prod h3 {
    font-size: 1.3em;
    clear: both;
  }

  .prod p {
    font-size: 0.9em;
  }

.prod {
    min-height: 600px;
}







.prod_3 {
    min-height: 400px;
}


.prod_3 h3 {
    font-size: 1.2em;
  }

.prod_3 p {
    font-size: 0.9em;
  }




.prod_4 {
	  float: none;
	    width: 100%;
	 height: 100%;
    }
    




	}