@charset "utf-8";



/*####################　下層ページ専用スマホ・パソコン共通　####################*/


.check{position:relative;top:-8px;width:15px;}


.arrow{width:18px;height:15px;position:relative;top:-5px;}

input{width:180px;border:solid 1px;}
input[type="submit"]{background:#006EA1;color:#fff;opacity:1.0:}



/* パソコン用*/

@media print, screen and (min-width: 768px) {



/* Hide the images by default */
.imgchange {
  display: none;
}

.big{width:100%;Z-index:50;}

.big:hover{width:110%;	
-webkit-transition: all 1.3s ease;
transition: all 1.3s ease;}


/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

.infonext{	

color:#0000ff;
		text-align:center;
	
	font-size:15px;

		
		text-decoration:none;
	
	}


.prev{position: relative;
	display: inline-block;
	padding: 5px 10px;
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: 100;
}

.prev:after{content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}


.next{position: relative;
	display: inline-block;
	padding: 5px 10px;
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: 100;
}

.next:after{content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}



/* Number text (1/3 etc) */
.numbertext {
  color: #ff0000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
 
}


.caption-container:after {

}


.row:after {
  content: "";
  display: table;
  clear: both;
}





}/* パソコン用end*/












/* スマホ用*/

@media screen and (max-width: 767px) {



/* Hide the images by default */
.imgchange {
  display: none;
}

.big{width:100%;}

.big:hover{width:200%;	-webkit-transition: all 1.3s ease;
transition: all 1.3s ease;	}


/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

.infonext{	

color:#0000ff;
		text-align:center;
	
	font-size:15px;

		
		text-decoration:none;
	
	}


.prev{position: relative;
	display: inline-block;
	padding: 5px 10px;
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: 100;
}

.prev:after{content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}


.next{position: relative;
	display: inline-block;
	padding: 5px 10px;
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: 100;
}

.next:after{content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}



/* Number text (1/3 etc) */
.numbertext {
  color: #ff0000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
 
}


.caption-container:after {

}




.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 33.333333%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}