/*------------------------------------------------------------
ブラウザ固有reset
-------------------------------------------------------------*/
html{scroll-behavior: smooth;}
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,p,ul,blockquote,table,th,td{
	margin: 0;
	padding: 0;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 10px;
}

address,caption,cite,code,dfn,h1,h2,h3,h4,th,var{
	font-style: normal;
	font-weight: normal;
}


a{ text-decoration: none; }
img{
	border: none;
	vertical-align: bottom;
}
input {
  margin-right: 2px;
  font-size: 93%;
  line-height: 1;
  vertical-align: middle;
}
 
label {
  font-size: 93%;
  line-height: 1;
  vertical-align: middle;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/*Firefox対策*/
html{ overflow-y: scroll; }
body,x:-moz-broken { margin-left:-1px; }
li {
	list-style-type: none;
}

a img.over{opacity:1.0;transition: 1.0s;}
a:hover img.over{opacity:0.6;transition: 0.5s;}

.pagenation {
	clear: both; position:relative;
	width: 100%;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;
}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto; text-align:center;
}
.pagenation li { position:relative;list-style: none outside none;margin-left: 3px;display: inline-block;}
.pagenation li:first-child {
    margin-left: 0;
}
.pagenation li.active {
	background-color: #181b39;
	color: #FFFFFF;
	padding: 10px 20px;
}
.pagenation li a {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #FFFFFF;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
    background-color: #181b39;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}


/* =======================================
Loading Unit
======================================= */
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

.fade-animation{-webkit-animation-duration: 2s;animation-delay:2s;}
.fadeIn {animation-duration: 1s;animation-delay: 1s;}

.sliderContent{overflow:hidden;}
.slider {width: 100%;
	margin: 0 auto 30px;
}
.slider img {
	width: 100%;
	height: auto;
}
.thumb-item-nav {
	max-width: 100%;width: 100%;
	margin: 0 auto 100px auto;
}
.thumb-item-nav li{max-width:175px; cursor:pointer;}
.thumb-item-nav li img { width:100%;}

.thumb-item .slick-slide:not(.slick-center) {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.0s linear;
}



.sliderContents{overflow:hidden;}
#sliders {width: 700px;
	margin: 0 auto 30px;
}
#sliders img {
	width: 100%;
	height: auto;
}
.thumb-item-navs {
	max-width: 700px;width: 100%;
	margin: 20px auto 0 auto; font-size:0;
}
.thumb-item-navs li{max-width:175px; cursor:pointer; display:inline-block;vertical-align:top;}
.thumb-item-navs li img { width:100%;}

.thumb-itemss .slick-slide:not(.slick-center) {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.0s linear;
}

/* smartPhone */
@media screen and (max-width: 768px) {
#sliders {width: 100%;}
.thumb-item-navs {
	max-width: 700px;width: 100%;
	margin: 20px auto 0 auto; font-size:0;
}
.thumb-item-navs li{max-width:25%; cursor:pointer; display:inline-block;vertical-align:top;}

}