@charset "UTF-8";

/**{*/
	/*outline:1px solid red;*/
/*}*/

.img-frame {
	/*margin-top:16px;*/
	position: relative;
}

.zoom-area {
	display: block;
	position: absolute;
	margin-top:30px;
	top: 0;
	left: 250px;
	height: 480px;			/*Daiji*/
	width: 740px;			//746-Daiji
}

.zoom-area img {
  width: 800px;				/*1040-520-no-bai*/
	height:100%;			/*Daiji*/
  margin-top: -30px;		/*-30*/
  margin-left: -60px;		/*-60*/
}

.thumb {
  /*width: 100px;*/
  cursor: pointer;
  /*transition: transform 0.2s;*/
}

/*********************************************
.thumb:hover {
  transform: scale(1.1);
}
*********************************************/
button{
	color:#65bbe9;
	width:90px;
	height:50px;
}
.flx{
	display:flex;
	/*margin:0 auto;*/
}

.prev {
	display: flex;
      justify-content: center;
      align-items: center;
	fore-color:#65bbe9;
	font-size:22px;
  font-weight:bold;
  position: absolute;
  top: 480px;
  left:191px;
  padding: 1em 2em;
  cursor: pointer;
  background-color: #cae8e2;
	border-color:#65bbe9;
  border-radius: 5px;
  /*border-top: 1px solid #FFF;*/
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}

.next {
	display: flex;
      justify-content: center;
      align-items: center;
	fore-color:#65bbe9;
 	font-size:22px;
  font-weight:bold;
  position: absolute;
  top: 480px;
  left:900px;
  /*justify-content:flex-end;*/
  padding: 1em 2em;
  cursor: pointer;
  background-color: #cae8e2;
	border-color:#65bbe9;
  border-radius: 5px;
  /*border-top: 1px solid #FFF;*/
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}

.slides-container {
  width: 230px;
  /*overflow: hidden;*/
}

.slides {
  display: flex;
  flex-direction:column;
  align-content: space-around;			/*x-align-items-x*/
  width: 220px;						/*700*/
  padding-left:20px;
  /*padding-top:480px;*/
}

.slide {
  background: #fff;
  text-align: center;
  width: 94px;			/*187*/
  height: 70px;			/*140*/
  margin:0px 0px 13px 0px;
	list-style:none;
}

.cell {
  vertical-align: middle;
}

img{
	width: 187px;
    height: 140px;
	object-fit: cover;
}

.img-panel {
  display: inline-block;
  position: relative;
  /*margin*/
}
.img-panel img {
	max-width: 94px;			/*187*/
	max-height: 70px;			/*140*/
}

.img-panel:hover .m-lens {
  display: block;
}

/***********************************************************/
@media only screen and (max-width: 768px) {
	.mbl{
		width:100%;
  	}
	.mbl > div.zoom-area{
		position: absolute;
		top: 200px;
		left: 20px;
		width:90vw;
		overflow: hidden;			/*Daiji*/
  	}
  	.mbl > div.flx > button.prev {
  		top: 680px;
		left: 20px;  	
  	}
  	.mbl > div.flx > button.next{
		top: 680px;
		left: 80vw;		//Daiji-541px
  	}  	
}

/*************************************************************/
@media only screen and (max-width: 768px) {
	.mob{							/*slides-container*/		
		width:100vw;
		/*width:700px;*/
	}
	.mob > ul.slides{
		width:100%;				/*Daiji*/
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		/*padding:0px 0px 0px 16.5%;*/
  	}
  	.mob > ul.slides > li.slide{
  	width:calc(100vw/5);
  	  margin:0px 7vw 2vh 0px;
  	}
}

/*************************************************************/
footer{
	display:flex;
	justify-content:flex-start;
	text-align:left;
	color: #ffffff;
    background-color:#ffceec;			/*#ffcccc-#00dfff*/
	background-size:cover;
		width:100vW;
    /*margin-top:20px;*/
}

.lower{
	display:block;
    padding:40px 3px 0px 540px;
  	text-align:center;
  	height:35px;
  	width:120px;
    background-color:#ffceec;
}

ul li.backbefore a:visited{
    /*color: #000000;*/
	color:#0000cd;
    	padding: :10px;
}

ul li.backbefore a:hover{
    color:#ffffff;
    padding: 10px;
    background-color: #0071e2;
	border-radius:10px;
 }

ul li.backbefore a{
    transition-duration: 0.8s;
}

strong{
    font-size: 200%;
    color: #ee7600;
}

p{
	padding:40px 0px 0px 50px;
}

/******************************************************************/
@media only screen and (max-width: 768px) {
	.suma{
	    margin-top:500px;
		width:100%;
		display:flex;
		flex-direction:low;
  	}
	.suma > div.lower{
		padding:40px 3px 0px 120px;
  	}
}