/* components.css */

/* おすすめカード */
#container .navi-entry-cards {
  margin-left: 20px;
}

#container .recommended.rcs-card-margin a {
  border-radius: 5px;
  margin: 38px 10px 10px 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  transition: transform 0.1s ease-in-out;
}

#container .recommended.rcs-card-margin a:hover {
  transform: translateY(-2px);
}

#container .recommended.rcs-center-label-title .card-content .card-title {
  padding: 10px 0.5em;
  color: #666;
  background-color: #ffffff91;
  transition: none;
  border-radius: 1px;
  font-size: 0.9em;
  font-weight: bold;
  width: 100%;
}

/* トップページ記事一覧の背景 */
#container .main:not(.page .main):not(.single .main) {
  background: inherit;
}

/* トップページ記事一覧カード */
#container .ecb-entry-border .entry-card-wrap {
  border: inherit;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}

#container .entry-card-wrap:hover {
  transform: translateY(-2px);
  transition: all 0.05s;
  background: #fff;
}

#container .ect-vertical-card .entry-card-wrap .entry-card-thumb img {
  border-radius: 14px 14px 0 0;
  height: 191px;
  object-fit: cover;
}

#container .entry-card-title {
  margin: 0px 5px 25px;
}

#container .cat-label {
  background: #fff;
  color: #444;
  border-radius: 30px;
  top: 10px;
  left: 10px;
  padding: 2px 8px 0;
  border: inherit;
}

/* タブ */
#container #index-tab-wrap * {
  animation: none !important;
}

#container .index-tab-buttons {
  margin: 0em 0 1.4em;
}

#container .index-tab-buttons .index-tab-button {
  padding: 10px 16px;
  font-size: 14px;
  margin: 2px 5px;
  border-radius: 30px;
  background-color: #fff;
  border: none;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

#container .index-tab-buttons .index-tab-button::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid var(--uki-main-color);
  opacity: 0;
}

#container #index-tab-1:checked~.index-tab-buttons .index-tab-button[for="index-tab-1"],
#container #index-tab-2:checked~.index-tab-buttons .index-tab-button[for="index-tab-2"],
#container #index-tab-3:checked~.index-tab-buttons .index-tab-button[for="index-tab-3"],
#container #index-tab-4:checked~.index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background: none var(--uki-main-color);
  border: 1px solid var(--uki-main-color) 1px solid;
  color: #fff;
  font-weight: 700;
  position: relative;
}

#container #index-tab-1:checked~.index-tab-buttons .index-tab-button[for="index-tab-1"]::after,
#container #index-tab-2:checked~.index-tab-buttons .index-tab-button[for="index-tab-2"]::after,
#container #index-tab-3:checked~.index-tab-buttons .index-tab-button[for="index-tab-3"]::after,
#container #index-tab-4:checked~.index-tab-buttons .index-tab-button[for="index-tab-4"]::after {
  opacity: 1;
}

/* さらに表示ボタン */
#container .list-more-button {
  margin: 2em 0 2em;
  font-weight: 500;
  color: #fff;
  border: inherit;
  background: var(--uki-main-color);
  width: 50%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/* アーカイブタイトル */
#container .archive-title {
  font-size: 22px;
  margin: 16px 5px;
  line-height: 1.3;
  color: #666;
}

#container .archive-title .svg-inline--fa {
  padding-right: 10px;
}

/* カードの幅と余白、角丸 */
#container .ect-vertical-card .entry-card-wrap {
  width: 48.5%;
  padding: inherit;
  margin-bottom: 8px;
  border-radius: 14px;
}

#container .ect-vertical-card {
  column-gap: 3%;
}

#container .entry-card-content {
  padding: 0px 15px 40px;
}

#container .entry-card-title {
  font-size: 16px;
  margin: 0px 0px 8px;
}

/* カード情報の余白 */
#container .entry-card-info {
  margin: 10px 15px 10px 0px;
}

/* ページネーション */
#container .page-numbers.current {
  background: var(--uki-main-color);
  color: #fff;
}

#container .page-numbers {
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/* 次のページボタンの調整 */

#container .pagination-next-link {
  font-weight: 500;
  color: #777;
  border: inherit;
  border-radius: 14px;
  background: #fff;
  width: 70%;
  margin: 0 auto 15px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

#container .pagination-next-link:hover {
  background: #f9f9f9;
}


/* TOPへ戻るボタン */
#container .go-to-top-button {
  color: var(--uki-main-color);
  font-size: 40px;
  background-color: #eee0;
  margin-bottom: 20px;
  margin-right: 30px;
}

#container .fa-circle-chevron-up {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  display: inline-block;
  border-radius: 50%;
}

#container .fa-chevron-circle-up:before {
  content: '\f139';
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}