*{
  margin: 0;
  padding: 0;
  border: 0;
}
#slide_area{
  width: 1100px;
  margin: 20px auto;
}
#navi{
  width: 280px;
  float:right;
}
#navi{
  overflow: hidden;
}
#navi ul{
  height: 450px;
	padding:10px;
  list-style-type: none;
}

#navi ul li {
    width: 120px;
    padding: 5px;
    float: left;
    background: #eee;
}

#navi .pageWrap{
  width: 1100px;
}
#navi .pageWrap .page{
  width: 300px;
  height: 600px;
  float: left;
}
#navi p{
  clear: both;
  text-align: center;
  margin-bottom:20px;
}
#navi p img{
  cursor: pointer;
}
#main{
  width: 800px;
  height: 600px;
  float: left;
}
#main iframe {
  width: 800px;
  height:600px;
  border: 3px solid white;
  position: absolute;
}


#main_slide_image {
    width: 800px;
    height:600px;
    border: 3px solid white;
    position: absolute;
    object-fit: contain;
}

.thum{
  width:120px;
  height:120px;
  pointer-events: none;
}
.thumdiv_img img {
    object-fit: cover;
}

.thumdiv_iframe {
    width:120px;
    height:120px;
}

.thum_a {
    pointer-events: none;
}


/**/
.video-wrap {
    position: relative;
    width: 100%;
    height: 400px;
}
.video-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.main-carousel {
    width: 100%;
    height: 300px;
    margin: auto;
}

.flickity-viewport,
.flickity-slider {
    height: 300px;
}

.carousel-cell {
    width: 100%;
    height: 300px;
}
.carousel-cell img{
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 641px) and (max-width: 790px) {

#slide_area{
	display:none;
}

#mobile_slide_area{
    height: 50vh;
    width: 100%;
}

/*.slide_iframe{*/
/*    height: 50vh;*/
/*    width: 100%;*/
/*}*/

.slide_image{
    height: 100%;
    width: 100%;
    object-fit: contain;
}


.main-carousel .slide iframe {
    width: 100%;
    height:auto;
}

/*.slide iframe{*/
/*    height: 300px;*/
/*    width: 300px;*/
/*}*/
/*#slide_area{
  width: 791px;
  margin: 20px auto;
}
#navi{
  width: 180px;
  float:right;
	background:#eee;
}
#navi{
  overflow: hidden;
}
#navi ul{
  height: 300px;
	padding:10px;
  list-style-type: none;
}
#navi ul li{
  width: 80px;
	margin:5px 5px 0px 0px;
  padding: 0;
  float: left;
}
#navi .pageWrap{
  width: 791px;
}
#navi .pageWrap .page{
  width: 200px;
  float: left;
	
}
#navi p{
  clear: both;
  text-align: center;
	margin-bottom:20px;
}
#navi p img{
  cursor: pointer;
}
#main{
  width: 530px;
  height: 500px;
  float: left;
}
#main img{
  width: 530px;
	height:auto;
  border: 3px solid white;
  position: absolute;
}
.thum{
	width:80px;
	height:80px;
}

*/




















/*#slide_area{
  width: 96%;
  margin: 20px auto;
	padding:0px 2%;
}
#main{
  width: 100%;
  height:auto;
  float:none;
	display:block;
}
#main img{
  width: 100%;
  height:auto;
  border:none;
  position: absolute;
}

#navi{
  width: 100%;
	height:auto;
	padding:300px 0px 0px;
	margin:0px auto;
	float:none;
	display:block;
	background:none;
	background:#eee;
}
#navi ul{
	width:96%;
	height:auto;
	margin:0px auto;
	padding:0px;
  list-style-type: none;
}
#navi ul li{
	width : 30vw;
	display: -webkit-flex;
	display: flex;
}
#navi .pageWrap{
	width : 300vw;
  height:300px;
	
}

#navi .pageWrap .page{
  height:300px;
	width : 100vw;
  float: left;
	margin:0px auto;
	
}
#navi p img{
	width:30px;
	margin:0px 15px;
}

.thum{
	width : 30vw;
	height:auto;


}
*/

}