/***ここからカルーセル***/


/* カルーセルの外枠 */
.carousel {
  width: 320px;
  height: 260px;
  position: relative;
  display: flex;    /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  margin: 0 auto;   /* 水平方向中央寄せ */
  z-index: 0;
}
.carousel-area {
  /* リスト数×リスト幅を計算してwidth指定してもいいが、汎用性を考慮してjQueryで計算代入する */
  height: 100%;
  position: absolute;
  display: flex;
}
.carousel-list {
  width: 320px;
  height: 100%;
  margin-right: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
ul{
    list-style-type:none;
    padding:0;
  }
@media screen and (max-width: 320px) {
  .carousel {
    width: 300px;
    height: calc(300px * 0.5625);
  }
  .carousel-list {
    height: calc(300px * 0.5625);
    margin-right: 0;
  }
}
/*ボタンリセット*/
button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}
/* 共有パーツ */
.arrow-wrap {
  width: 120%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrow-btn {
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: 2px solid #ffffff;
  transition: .2s;
}
.arrow-btn:focus {
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}
.arrow-btn:hover {
  background-color: rgb(0, 0, 0);
  border: 2px solid #ff0000;
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
  animation: fadeout 1s forwards;
}
@keyframes fadeout {
  0% {background-color: rgb(0, 0, 0); border-color: #ff0000;}
  50% {background-color: rgb(0, 0, 0); border-color: #ff0000;}
  100% {background-color: rgba(0, 0, 0, 0.5); border-color: #ffffff;}
}
/* 左 */
.arrow-left {
  position: relative
}
/* ボタン左の中身（三角を擬似要素で表現） */
.arrow-left:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%)rotate(-45deg);
}
.arrow-left:hover::before {
  border-color: #ff0000;
  animation: fadeout-arrow 1s forwards;
}
@keyframes fadeout-arrow {
  0% {border-color: #ff0000;}
  50% {border-color: #ff0000;}
  100% {border-color: #ffffff;}
}
/* 右 */
.arrow-right {
  position: relative
}
/* ボタン右の中身（三角を擬似要素で表現） */
.arrow-right:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-70%, -50%)rotate(135deg);
}
.arrow-right:hover::before {
  border-color: #ff0000;
  animation: fadeout-arrow 1s forwards;
}
/* ページネーション */
.pagination {
  width: 150px;
  margin: 5% auto 0;
  display: flex;
  justify-content: space-around;
}
.pagination-circle {
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
}
/* jsでtargetクラスがついたら背景色を変える */
.pagination-circle.target {
  background-color: rgba(255, 0, 0, 0.33);
  border-color: #ff0000;
}