﻿@charset "utf-8";

/* =======================================

	CommonElements

======================================= */




/* index.html / index02.html
--------------------------- */
#slideshow {
	width: 100%;
	text-align: left;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}

#slideshow img {
	width: 100%;
	height: auto;
}

#slideshow div {
	width: 100%;
	position: relative;
	clear:both;
}

#slideshow .wrapper {
margin-top: 20px;
}

#slideshow div div {
	top: 0;
	left: 0;
	position: absolute;
	clear:both;
}




#slideshow ul {
	width: 100%;
	z-index:2;
    position: relative;
}

#slideshow ul li {
	width: 13%;
	float: left;
	display: inline;
	margin-right: 1.5%;
	margin-bottom: 20px;
	border: 6px solid #9bb7c6;
}



#slideshow .active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
	border: 6px solid #1473b5;
	box-sizing: border-box;
}
@media print , screen and (min-width: 768px) {
#slideshow ul li:nth-child(7n) {
	margin-right: 0%;
}
}

@media only screen and (max-width: 767px) {
#slideshow ul li {
	width: 23.5%;
	margin-right: 2%;
	margin-bottom: 15px;
}
#slideshow ul li:nth-child(4n) {
	margin-right: 0%;
}
}




/* =======================================
	ClearFixElements
======================================= */
#slideshow ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#slideshow ul {
	display: inline-block;
	overflow: hidden;
}


#moveprev img, #movenext img {
	width: 100%;
	max-width: 22px;
	 cursor:pointer;
	 opacity: 1;
}

#moveprev img:hover, #movenext img:hover {
	 opacity: 0.5;
	transition : all 0.5s ease 0s;
}

.move_block{
  display: flex;
  margin-top: -40px;
  padding-top: 28%;
  padding-bottom: 28%;
    z-index:100;
    position: relative;
	max-height: 682px;
}
.move_block .contents_l {
	width: 50%;
	text-align: left;
	margin-right: auto;
	justify-content: left;
	padding-left: 5%;
}
.move_block .contents_r {
  width: 50%;
    text-align: right;
    margin-left: auto;
    justify-content: right;
	padding-right: 5%;
}

@media only screen and (max-width: 767px) {
.move_block .contents_l {
	padding-left: 1%;
}
.move_block .contents_r {
	padding-right: 1%;
}
}
