@charset "UTF-8";



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

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



header,
nav.gnav,
.wrapper {
	z-index: 1000 !important;
}



.wrap {
  overflow: hidden;
}


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

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

.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: 'Helvetica Neue',            
               'Segoe UI',                 
               'Hiragino Kaku Gothic ProN', 
               Meiryo, 
	　　　　　　'メイリオ'
               sans-serif;
		text-align: center;
	color: #294ce4;
}

h4 {
font-family: 'Helvetica Neue',            
               'Segoe UI',                 
               'Hiragino Kaku Gothic ProN', 
               Meiryo, 
	　　　　　　'メイリオ'
               sans-serif;
	text-align: center;
	color: #294ce4;
	}

h3 {
font-family: 'Helvetica Neue',            
               'Segoe UI',                 
               'Hiragino Kaku Gothic ProN', 
               Meiryo, 
	　　　　　　'メイリオ'
               sans-serif;
	}

h5 {
font-family: 'Helvetica Neue',            
               'Segoe UI',                 
               'Hiragino Kaku Gothic ProN', 
               Meiryo, 
	　　　　　　'メイリオ'
               sans-serif;
	}

p {
font-family:'Helvetica Neue',            
               'Segoe UI',                 
               'Hiragino Kaku Gothic ProN', 
               Meiryo, 
	　　　　　　'メイリオ'
               sans-serif;
	}

/*h1 {font-family:'Helvetica Neue',            
               'Segoe UI',                 
               'Hiragino Kaku Gothic ProN', 
               Meiryo, 
	　　　　　　'メイリオ'
               sans-serif;
	text-align: center;
	font-size: 1.5em;
	color: #e94d55;
	padding: 30px 120px;
}*/

/* ----------------------------------------------------------------------
ナビ

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


.navi {
 text-align: center;
  position: relative;
  overflow: hidden;
  font-weight: bolder;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

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

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


.navi_link {
  float:left;
  border-right: 1px solid #294ce4;
}


.navi_link_opt {
  float:left;
}


.navi_link a {
	display: inline-block; 
    text-align: center;
    text-decoration: none; 
	width:275px; 
    padding: 20px 5px;
	font-size: 1.2em;
    color: #294ce4;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	font-weight: 900;
}


.navi_link_opt a {
	display: inline-block; 
    text-align: center;
    text-decoration: none; 
	width:275px; 
    padding: 20px 5px;
	font-size: 1.2em;
    color: #294ce4;
   background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    font-weight: 900;
}


.navi li:hover{
	background-color:#FFFFFF;
	border-style: solid;
	border-top: solid 3px #95ccff;
	border-left: solid 3px #95ccff;
    border-right: solid 3px #95ccff;
	border-bottom: solid 3px #95ccff;
}


.pink {
	color: #e72855;
	font-size: 0.9em;
}


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

-------------------------------------------------------------------------*/
.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: 100%;
padding: 0px 20px 0px 20px;
  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:1.6em; 
	color:cornflowerblue;
}	

#optional h5 {
	padding:0px 20px 20px 20px;
	font-size:1.3em; 
	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:0px 20px 20px 20px;
	font-size:1.3em; 
	color:cornflowerblue;
}	



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

.hisvideo{
float:right;}

.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: 1em;
  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:0.9em; 
}	


.tags {
  margin: 10px;
}





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


.new {
  font-size: 1.1em;
  color: #FFF;
  background-color:cornflowerblue;
  float: left;
  margin: 3px;
  font-weight: bolder;
  padding: 5px 15px;
}


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


.btn {
  text-align: center;
  font-size: 0.8em;
  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 h1 {
	top: 120px;
	font-size: 1.2em;
}

.wrap h2 {
	top: 200px;
	font-size: 2em;
}	
	

	
.wrap img {
	width:60%;
}	
	
	
.sliding {
  height: 320px;
}	
	
	
	
	
.hisvideo{
float:none;
padding:10px 0px ;	
	}

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

	
#virtual {
padding:0px 20px 0px 20px;
}		
	

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

	

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

.navi li {
  position: relative;
  right: 50%;
  float: none;
}	
		
	
.navi_link {
  float:none;
  margin: 0px 0px;
text-align: center;
 border-right: none;
}

.navi_link_opt {
  float:none;
  text-align: center;
  margin: 0px 0px;
}

	
	
.navi_link a {
	display: inline-block; 
    text-align: center;
    text-decoration: none; 
	width:100%; 
    padding: 10px;
	font-weight: bolder;
}


.navi_link_opt a {
	display: inline-block; 
    text-align: center;
    text-decoration: none; 
    width:100%; 
    padding: 10px;
	font-weight: bolder;
}
		
	
	
	
	
.three_contents {
padding:0px 20px 0px 20px;
}			

		

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


	
.four_contents {
padding:0px 20px 0px 20px;
}			
	
	
.prod_4 {
	  float: none;
	 margin: 9px auto 0px auto;
	    width: 100%;
	 height: 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:0.8em; 
}	
	

	
	
	
/* タブレットに適用する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 0px ;	
	}

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


#virtual {
padding:0px 20px 0px 20px;
}		
	
	

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

.navi li {
  position: relative;
  right: 50%;
  float: none;
}	
		
	
.navi_link {
  float:none;
  margin: 0px 0px;
text-align: center;
 border-right: none;
}

.navi_link_opt {
  float:none;
  text-align: center;
  margin: 0px 0px;
}

	
	
.navi_link a {
	display: inline-block; 
    text-align: center;
    text-decoration: none; 
	width:100%; 
    padding: 10px;
	font-weight: bolder;
}


.navi_link_opt a {
	display: inline-block; 
    text-align: center;
    text-decoration: none; 
    width:100%; 
    padding: 10px;
	font-weight: bolder;
}
		
	
	
	
	
.three_contents {
padding:0px 30px 0px 30px;
}		
		

  .prod h3 {
    font-size: 1.2em;
    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%;
    }		



			
	}