/* =============================================
  トップ > 記事スライダー（カスタム）
  - slidesPerView:'auto'（js/post-slider.js）と組み合わせ、
    カード幅をここで制御する
  - PC : カード幅 820px 固定、両脇チラ見せ（中央寄せ）
  - 画面が狭まると最小チラ見せ(--ps-peek)を保ちつつカード幅を縮小
  - タブレット以下 : カード内レイアウトを縦組に
  - SP : 1枚表示
  ※ #post_slider のID指定で親テーマCSSより優先（!important不要）
   ============================================= */
#post_slider {
  --ps-card-w: 820px;   /* PCでのカード固定幅 */
  --ps-peek: 40px;      /* 片側の最小チラ見せ量 */
  --ps-card-tb: 76vw;   /* タブレットでのカード幅 */
  --ps-card-sp: 86vw;   /* SPでのカード幅 */

  padding: 64px 0;
  background-color: #E6ECF1;
}

#post_slider .p-postSlider__swiper {
  padding-bottom: 40px;
}

#post_slider .p-postSlider__swiper .p-postList__item {
  width: min(var(--ps-card-w), calc(100vw - var(--ps-peek) * 2));
}

#post_slider .p-postList__link {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  background-color: var(--tunag-color-secondary-white);
  border-radius: var(--tunag-border-radius);
  overflow: hidden; 
}

#post_slider .p-postList__thumb {
  width: 68%;
  border-radius: 0;
}

#post_slider .p-postList__body {
  width: 32%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}

#post_slider .p-postList__title {
  font-size: var(--tunag-font-size-base);
  font-weight: 400;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  max-height: none; /* 親テーマのmax-height(3.6em/4.2em)を解除。高さはline-clampで制御 */
  overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
  background: var(--tunag-color-primary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 11px;
  top: unset!important;
  bottom: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

@media (max-width: 959px) {
  #post_slider .p-postSlider__swiper .p-postList__item {
    width: var(--ps-card-tb);
  }

  #post_slider .p-postList__link {
    flex-direction: column;
  }

  #post_slider .p-postList__thumb,
  #post_slider .p-postList__body {
    width: 100%;
  }
}

@media (max-width: 599px) {
  #post_slider {
    padding: 48px 0;
  }

  #post_slider .p-postSlider__swiper .p-postList__item {
    width: var(--ps-card-sp);
  }

  #post_slider .p-postList__body {
    padding: 20px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 24px;
    height: 24px;
    padding: 8px;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    width: 8px;
    height: 8px;
  }
}

/* トップ > カテゴリ */
.top-category {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 0!important;
}

.top-category-item {
    width: calc(50% - 10px);
    margin: 0!important;
    list-style: none;
    border-radius: var(--tunag-border-radius);
    overflow: hidden;
}

.top-category-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.top-category-image {
    aspect-ratio: 310 / 120;
    position: relative;
}

.top-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.top-category-title {
    color: var(--tunag-color-secondary-white);
    text-align: center;
    padding: 12px 32px 12px 12px;
    position: relative;
}

.knowledge .top-category-title {
    background-color: var(--tunag-color-accent-green);
}

.interview .top-category-title {
    background-color: var(--tunag-color-accent-yellow);
}

.cases .top-category-title {
    background-color: var(--tunag-color-accent-red);
}

.top-category-title::before {
    content: "";
    display: block;
    width: 8px;
    height: 16px;
    background-image: url(../img/chevron-right-wh.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 960px) {
    .top-category-link:hover {
        opacity: 0.8;
    }

    .top-category-link:hover .top-category-image img {
        width: 110%;
        height: 110%;
    }
}

@media (max-width: 599px) {
  .top-category {
    flex-direction: column;
  }

  .top-category-item {
    width: 100%;
  }
}