@charset "utf-8";
.section {
position: relative;
zoom: 1;
}

.sliders img {
vertical-align: bottom;
}

.sliders * {
margin: 0;
padding: 0;
}

/*--------------
 sliders用
--------------*/
.sliders {
position: relative;
}

.sliders li {
overflow: hidden;
list-style-type: none;
}

.sliders li a img {
border: 0;
}

.pager {
padding: 10px 0;
text-align: center;
}

.pager li {
display: inline-block;
*display: inline!important;
list-style-type: none;
zoom: 1;
}

.pager a {
margin: 0 5px;
display: block;
width: 10px;
height: 10px;
background: url(image/pager_off.png) no-repeat left top;
text-decoration: none;
text-indent: -9999px;
outline: none;
}

.pager a:hover,
.pager .current a {
color: red;
text-decoration: none;
background: url(image/pager_on.png) no-repeat left top;
}

.prev {
margin-top: -25px;
margin-left: -450px;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
background: url(image/prev_off.png) no-repeat left top;
text-indent: -9999px;
z-index: 50;
cursor: pointer;
}

.prev:hover {
background-image: url(image/prev_on.png);
}

.next {
margin-top: -25px;
margin-left: 400px;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
background: url(image/next_off.png) no-repeat left top;
text-indent: -9999px;
z-index: 50;
cursor: pointer;
}

.next:hover {
background-image: url(image/next_on.png);
}


/*--------------
 テーマバナー用
--------------*/

* {
  padding: 0;
  margin: 0;
}

/* 1. ここで表示したい場所の「幅」と「高さ」を指定します */
.main-slide {
  position: relative;     /* 追加：画像をこの枠の中に閉じ込めます */
  width: 980px;           /* 変更：任意の横幅（%指定でもOK） */
  height: 160px;          /* 変更：任意の高さ（必ず指定してください） */
  overflow: hidden;       /* 追加：枠からはみ出た画像を表示しない */
  margin: 20px auto;      /* 追加：ページ中央に配置する場合のサンプル */
}

/* 2. 画像が枠いっぱいに綺麗に収まるよう調整しました */
.main-slide img {
  width: 100%;
  height: 100%;           /* 変更：枠の高さに合わせる */
  object-fit: cover;      /* 追加：画像の縦横比を保ったまま枠を埋める */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: slide-animation 12s linear infinite 0s;
}

.main-slide img {
  animation-delay: 0s;
}

.main-slide img:nth-of-type(2){
  animation-delay: 3s;/*2枚目の開始時間*/
}


@keyframes slide-animation {
  0% {
    animation-timing-function: ease-in;/*ゆっくり表示される*/
    opacity: 0;
  }
  10% {
    animation-timing-function: ease-out;/*表示された*/
    opacity: 1;
  }
  80% {
    opacity: 1;/*＊表示期間*/
  }
  90% {
    opacity: 0;/*次の画像で消えている*/
  }
  100% {
    opacity: 0;/*表示されていない時間*/
  } 
}