@charset "utf-8";
/* キャラクターページ用 共通*/
/* 一覧ページ */
.list_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.list_container .list_item {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
		transform: translateY(-20px);
  }
  100% {
    opacity: 1;
		transform: translateY(0);
  }
}
.list_container .list_item:last-child{
	margin-right: auto;
}
.list_container .list_item .thumbnail{
	width: calc(100% - 8px);
	max-width: 200px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 8;
}
.list_container .list_item .thumbnail.no_image{
	border: 2px dotted #e1e196;
	border-radius: 5%;
}
.list_container .list_item .thumbnail img{
	border: 1px #472720 solid;
	width: 100%;
	border-radius: 5%;
}
.list_container .list_item a{
	font-size: clamp(12px, 2.0vw, 20px);
}
.list_container .list_item .poke_name{
	font-size: clamp(9px, 1.8vw, 16px);
}


/* 検索条件 */
.accordion_contents {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
		transform: translateY(-100px);
  }
  100% {
    opacity: 1;
		transform: translateY(0);
  }
}

/* タブ動作 */
.tab-area {
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px solid #ffffee;
}
.tab-area.active .tab{
	cursor: pointer;
}
.tab-area .tab {
	width: 25%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #472720;
	border: 1px solid  #e1e196;
	border-bottom: none;
}
.tab-area .tab.active {
	background-color: #e1e196;
	border: 1px solid #e1e196;
	font-weight: bold;
	border-bottom: 1px solid #ffffee;
	cursor: default;
}

/* もっと見るボタン */
.section.viewmore{
	text-align: center;
}
button#viewmore::before{
	content: "▼ もっと見る";
}

/* フッタ */

/* ページング */
.visuallyhidden {
  clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

.pagination {
  display: flex;
  justify-content: center;
  text-align: center;

  a {
    display: inline-block;
    padding: .5rem .7rem;
    border: 1px solid #e1e196;
    text-decoration: none;
    color: #472720;

    &:hover,
    &:focus {
      background-color:#e1e196;
    }
  }
}
.pagination__prev {
  &::before {
    content: '<';
  }
}
.pagination__next {
  &::before {
    content: '>';
  }
}
.pagination__items {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  counter-reset: pagination;
  margin: 0 1px;

  li {
    position: absolute;
    top: -100vh;
    counter-increment: pagination;
    margin: 0 1px;

    &:first-child,
    &:last-child {
      position: static;
    }
    &.is-active {
      position: static;

      &:not(:nth-child(1)):not(:nth-child(2)) {
        &::before {
          content: '...';
          display: inline-block;
          padding: .5rem .7rem;
					border: 1px solid #e1e196;
          margin-right: 2px;
        }
      }
      & + li,
      & + li + li {
        position: static;
      }
      & + li + li:not(:last-child):not(:nth-last-child(2)) {
        &::after {
          content: '...';
          display: inline-block;
          padding: .5rem .7rem;
    			border: 1px solid #e1e196;
          margin-left: 2px;
        }
      }
    }
  }
  a {
    &::before {
      content: counter(pagination);
    }
  }
  .is-active a {
    background-color: #e1e196;
    color: #472720;
		font-weight: bold;
  }
}