@charset "utf-8";
/* -----------------------------------------------
 一覧ページ　カテゴリーカラー設定
-------------------------------------------------- */
/*観光*/
#sightseeing {
  background: #E9F4FA;
  background: linear-gradient(180deg, rgba(233, 244, 250, 1) 0%, rgba(255, 255, 255, 1) 30%);
}
#sightseeing .bg-eventa-list {
  background: #E9F4FA;
  background: linear-gradient(180deg, #D7EEFB 0%, rgba(255, 255, 255, 1) 50%);
  border-radius: 4vw 4vw 0 0
}
/*食事*/
#food {
  background: #F6DCB5;
  background: linear-gradient(180deg, rgba(246,242,221,1.00) 0%, rgba(255, 255, 255, 1) 30%);
}
#food .bg-eventa-list {
  background: #F6DCB5;
  background: linear-gradient(180deg, #F6DCB5 0%, rgba(255, 255, 255, 1) 50%);
  border-radius: 4vw 4vw 0 0
}
/*見学*/
#visit {
  background: #EAF6F5;
  background: linear-gradient(180deg, rgba(234,246,245,1.00) 0%, rgba(255, 255, 255, 1) 30%);
}
#visit .bg-eventa-list {
  background: #F6DCB5;
  background: linear-gradient(180deg, #D2EAE5 0%, rgba(255, 255, 255, 1) 50%);
  border-radius: 4vw 4vw 0 0
}
/*体験*/
#experience {
  background: #F5F4E8;
  background: linear-gradient(180deg, rgba(231,224,189,.5) 0%, rgba(255, 255, 255, 1) 30%);
}
#experience .bg-eventa-list {
  background: #F5F4E8;
  background: linear-gradient(180deg, #E7E0BD 0%, rgba(255, 255, 255, 1) 50%);
  border-radius: 4vw 4vw 0 0
}
/*まつり*/
#festival {
  background: #FEF7F8;
  background: linear-gradient(180deg, rgba(254,247,248,1.00) 0%, rgba(255, 255, 255, 1) 30%);
}
#festival .bg-eventa-list {
  background: #F8D5DC;
  background: linear-gradient(180deg, #F8D5DC 0%, rgba(255, 255, 255, 1) 50%);
  border-radius: 4vw 4vw 0 0
}
/*観光体験マップ*/
#map {
  background: #F4F5F8;
  background: linear-gradient(180deg, rgba(205,206,226,.3) 0%, rgba(255, 255, 255, 1) 30%);
}
#map .bg-eventa-list {
  background: #D8D8E8;
  background: linear-gradient(180deg, #D8D8E8 0%, rgba(255, 255, 255, 1) 50%);
  border-radius: 4vw 4vw 0 0
}
/*アイコン*/
.cate-icon {
  position: relative;
  left: 0;
  width: 15vw;
  max-width: 120px;
  height: auto;
  padding-bottom: 1em
}
/*キャラクター*/
.cate-char img {
  position: absolute;
  width: 10vw;
  max-width: 100px;
  top: 0;
  right: 3%;
}
/* ----------------------------------------
詳細ページカテゴリースライダー（写真あり）
---------------------------------------- */
/*初期設定：右のスライドをチラ見せ*/
.photo-slider .slick-list {
  padding: 0 20% !important;
}
.photo-slider .slick-slide {
  /*初期設定：スライド間の隙間を指定*/
  margin: 0 15px 30px 15px;
}
.photo-slider {
  position: relative;
  overflow: hidden;
}
.photo-slider ul {
  overflow: visible;
  padding-left: 0;
}
.photo-slider ul li {
  padding: 0;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.photo-slider ul li img {
  width: 100%;
  transition: 0.2s;
}
.photo-slider li img {
  object-fit: cover;
  aspect-ratio: 16/9;
  object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 50%;' /* IE・Edge対応 */
}
.photo-slider li.test img {
  object-fit: cover;
  aspect-ratio: 4/3;
  object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 50%;' /* IE・Edge対応 */
}
.arrow_box {
  display: flex;
  width: 60%;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  margin: 0 auto
}
.prev-arrow, .next-arrow {
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow)
}
.prev-arrow {
  transform: rotate(180deg);
  margin-right: 20px;
}
.prev-arrow::before, .next-arrow::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--bk);
  border-top: 2px solid var(--bk);
  top: 0;
  bottom: 0;
  left: -5px;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
}
/*ドットカスタム*/
.dots-wrap {
  display: flex;
  justify-content: center;
}
.dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 5px !important;
  background: #D5D5D5;
  border-radius: 50%;
  cursor: pointer;
}
.dots-wrap li:hover, .dots-wrap li.slick-active {
  background: var(--blue);
}
.dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 769px) {
  /*初期設定：右のスライドをチラ見せ*/
  .photo-slider .slick-list {
    padding: 0 10% !important;
  }
  .photo-slider .slick-slide {
    /*初期設定：スライド間の隙間を指定*/
    margin: 0 10px 30px 10px;
  }
  .arrow_box {
    width: 85%;
  }
  .prev-arrow, .next-arrow {
    width: 40px;
    height: 40px;
  }
  .prev-arrow::before, .next-arrow::before {
    width: 13px;
    height: 13px;
  }
}
@media screen and (max-width: 769px) {
  /*初期設定：右のスライドをチラ見せ*/
  .photo-slider .slick-list {
    padding: 0 5% !important;
  }
  .photo-slider .slick-slide {
    /*初期設定：スライド間の隙間を指定*/
    margin: 0 10px 20px 10px;
  }
  .arrow_box {
    width: 100%;
  }
}
/* -----------------------------------------------
 イベン太一覧タイトル・キャラクターレイアウト
-------------------------------------------------- */
.category {
  position: relative;
  overflow: hidden;
  padding-top: 3em;
}
.category h2 {
  position: relative;
  line-height: 1.4;
  letter-spacing: 2px;
  text-indent: 130px;
  width: auto;
	z-index: 1;

}
.category h2 span {
  display: block;
}
.category h2 img {
  position: absolute;
  width: 10%;
  max-height: 100%;
  top: 3px;
  max-width: 100px;
}
.category .lead-text {
  position: absolute;
  width: 45%;
  right: 15%;
  top: 20%;
  border-left: 1px solid black;
  padding-left: 2em;
  font-weight: bold;
	z-index: 2
}
.category .lead-text2 {
  position: absolute;
  width: 45%;
	height: 2em;
  left: 50%;
  top: 20%;
  border-left: 1px solid black;
  padding-left: 2em;
  font-weight: bold;
	z-index: 2
}
/*キャラクターポジション*/
.character {
  position: absolute;
  width: 10vw;
  max-width: 100px;
  top: 8%;
  right: 2%;
}
@media screen and (max-width: 1024px) {
.category {
  padding-top: 0;
}
  .category h2 {
    text-indent: 15%;
  }
  .category .lead-text,
.category .lead-text2{
    position: relative;
    width: 100%;
    right: auto;
	left: 0;
    top: 30%;
    border-left: none;
    padding-left: 0;
    margin-top: 2em
  }
  .character {
    left: auto !important;
    top: 0 !important;
    right: 5% !important;
  }
  .character{
	  width: auto;
	  height: 100%;
	  max-height: 60px 
  }
.machiaruki{
	width: 70%;
}
}