@charset "UTF-8";
/* ==========================================================================
   国内旅のカテゴリ一覧 (特集 / グルメ / お土産 / おでかけ・モデルコース / 宿・ホテル)
   category.php + pages-template/category-list/head.php。読み込みは対象5カテゴリだけ (functions.php)。

   - すべて #main .tsp-catlist 配下に閉じる。記事カードとページ送りは既存の style.css のまま触らない。
   - 既存 style.css は触らない (本番は minified で stg と中身が違うため)。
   - ブレークポイントはテーマと同じ max-width:960px (SP) / 961px〜 (PC)。
   - 寸法の正は「カテゴリ一覧ページ 実装仕様」版1.0、見た目の正は確定版モック。
   ========================================================================== */

#main .tsp-catlist .tsp-catlist__head {
  /* 編集部おすすめの寸法 (仕様 §3-1)。右の小カードのタイトル部分の高さに効く値 */
  --tsp-cl-pk-gap: 24px;      /* 左右の間隔 */
  --tsp-cl-pk-row: 20.5px;    /* 右の2段の間隔 */
  --tsp-cl-pk-sm-fs: 13.5px;  /* 小のタイトルの文字 */
  --tsp-cl-pk-sm-mt: 9px;     /* 小の写真とタイトルの間 */
  --tsp-cl-pk-lh: 1.55;
  display: flex;
  flex-direction: column;
  gap: 34px;
  /* 幅と位置は下の記事一覧 (style.css の .container_new_wrapper: PC は最大968px・中央寄せ) にそろえる */
  max-width: 968px;
  margin: 0 auto 2px; /* 見出しから記事の写真まで 22px (PC のカードは上に 20px の余白を持つので +2px) */
  color: #212121;
  text-align: left;
  letter-spacing: 0; /* テーマの body の字間を引き継がない (モックは字間なし。必要な所だけ個別に付ける) */
  font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "メイリオ", Meiryo, sans-serif;
  line-height: 1.7;
}

#main .tsp-catlist .tsp-catlist__head * {
  box-sizing: border-box;
}

/* 記事一覧の枠の上の余白 (style.css で PC 20px / SP 4.6189vw) は、このページでは見出しとの間を上で決めているので 0 にする。
   カード自体には触らない。style.css の #main section.section#content_new > .inner .container_new_wrapper に勝つ詳細度にする */
#main section.section#content_new.tsp-catlist > .inner .container_new_wrapper {
  margin-top: 0;
}

/* ---- キービジュアル (仕様 §2-2) ---------------------------------------- */
#main .tsp-catlist .tsp-catlist__kv {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #2a2420;
}

#main .tsp-catlist .tsp-catlist__kv-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 55%;
}

/* 白抜き文字を読ませる暗がけ。PC は左から */
#main .tsp-catlist .tsp-catlist__kv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20, 14, 10, .78) 0%, rgba(20, 14, 10, .45) 48%, rgba(20, 14, 10, 0) 78%);
}

#main .tsp-catlist .tsp-catlist__kv-tx {
  position: absolute;
  left: 48px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  max-width: 470px;
  color: #fff;
}

#main .tsp-catlist .tsp-catlist__kv-title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .08em;
  text-align: left;
}

#main .tsp-catlist .tsp-catlist__kv-en {
  margin: 8px 0 18px;
  font-family: "Karla", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  opacity: .85;
}

#main .tsp-catlist .tsp-catlist__kv-lead {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  line-height: 1.9;
}

/* ---- 編集部おすすめ (仕様 §3-1) ----------------------------------------- */
#main .tsp-catlist .tsp-catlist__pk-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

#main .tsp-catlist .tsp-catlist__pk-head-en {
  font-family: "Karla", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

#main .tsp-catlist .tsp-catlist__pk-head-ja {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

/*
 * 大1枚 + 右に小2枚。写真はすべて 3:2 のまま切らず、大の写真の下辺と右下の写真の下辺をそろえる。
 * 本文幅 W・間隔 G、大の幅 B・小の幅 S とすると
 *   大の写真の高さ B/1.5 = 右列 (小の写真 S/1.5 ×2 + 小タイトル T)
 *   T = 写真との間 9 + 13.5×1.55×2 + 段間 20.5 = 71.35px
 *   B + S = W − G
 * → S = (W − G − 1.5T) / 3 、B は残り。W=983 なら B=675 / S=284 (仕様の表の値)。
 * 本文幅が変わってもそろうよう、固定値ではなくこの式をそのまま書く (% は本文幅に対する割合)。
 */
#main .tsp-catlist .tsp-catlist__pk {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    calc((100% - var(--tsp-cl-pk-gap) - 1.5 * (var(--tsp-cl-pk-sm-mt) + var(--tsp-cl-pk-sm-fs) * var(--tsp-cl-pk-lh) * 2 + var(--tsp-cl-pk-row))) / 3);
  gap: var(--tsp-cl-pk-gap);
  align-items: start;
}

#main .tsp-catlist .tsp-catlist__pk-col {
  display: flex;
  flex-direction: column;
  gap: var(--tsp-cl-pk-row);
  min-width: 0;
}

#main .tsp-catlist .tsp-catlist__pk-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

#main .tsp-catlist .tsp-catlist__pk-ph {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ececec;
}

#main .tsp-catlist .tsp-catlist__pk-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: opacity .2s;
}

#main .tsp-catlist .tsp-catlist__pk-card:hover .tsp-catlist__pk-ph img {
  opacity: .85;
}

#main .tsp-catlist .tsp-catlist__pk-card:focus-visible {
  outline: 2px solid #159eb7;
  outline-offset: 2px;
}

#main .tsp-catlist .tsp-catlist__pk-by {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 3px 9px;
  background: #212121;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .1em;
}

/* タイトルは2行で固定 (超えたら「…」)。高さも2行分に固定して、1行のときも下辺がずれないようにする */
#main .tsp-catlist .tsp-catlist__pk-title {
  display: -webkit-box;
  margin: 12px 0 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  height: calc(17px * 1.55 * 2);
  text-align: left;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#main .tsp-catlist .tsp-catlist__pk-card--sm .tsp-catlist__pk-title {
  margin-top: var(--tsp-cl-pk-sm-mt);
  font-size: var(--tsp-cl-pk-sm-fs);
  line-height: var(--tsp-cl-pk-lh);
  height: calc(var(--tsp-cl-pk-sm-fs) * var(--tsp-cl-pk-lh) * 2);
}

/* ---- エリアで絞り込む (仕様 §4) ------------------------------------------ */
#main .tsp-catlist .tsp-catlist__area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: 130px; /* #catlist-area へ飛んだとき、PC の固定ヘッダーに隠れないように */
}

#main .tsp-catlist .tsp-catlist__area-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

#main .tsp-catlist .tsp-catlist__area-title::after {
  content: "";
  flex: 1;
  height: .5px;
  background: #212121;
}

#main .tsp-catlist .tsp-catlist__area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main .tsp-catlist .tsp-catlist__area-list li {
  margin: 0;
  padding: 0;
}

#main .tsp-catlist .tsp-catlist__area-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  border: 1px solid #212121;
  border-radius: 999px;
  background: #fff;
  color: #212121;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

#main .tsp-catlist .tsp-catlist__area-list a:hover {
  background: #eef7f9;
}

#main .tsp-catlist .tsp-catlist__area-list a[aria-current="page"] {
  background: #212121;
  color: #fff;
}

#main .tsp-catlist .tsp-catlist__area-list a:focus-visible {
  outline: 2px solid #159eb7;
  outline-offset: 2px;
}

/* ---- 一覧の見出し (新着の◯◯記事 / 北海道の◯◯記事) ------------------------ */
#main .tsp-catlist .tsp-catlist__list-head {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #212121;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
  text-align: left;
}

/* ==========================================================================
   SP (〜960px)。並びはモックどおり キービジュアル → エリア → おすすめ → 一覧
   ========================================================================== */
@media screen and (max-width: 960px) {
  #main .tsp-catlist .tsp-catlist__head {
    gap: 24px;
    /* 記事一覧の枠 (style.css で SP は幅 91.9168vw・中央寄せ) にそろえる */
    max-width: 91.9168vw;
    /* 見出しから記事の写真まで 16px (SP のカードは上の余白なし) */
    margin-bottom: 16px;
  }

  #main .tsp-catlist .tsp-catlist__kv { order: 1; }
  #main .tsp-catlist .tsp-catlist__area { order: 2; scroll-margin-top: 16px; }
  #main .tsp-catlist .tsp-catlist__pickup { order: 3; }
  #main .tsp-catlist .tsp-catlist__list-head { order: 4; }

  /* 100vw はスクロールバーの幅を含むので、スクロールバーのある環境 (幅を狭めた PC のブラウザ) ではみ出さないよう切る */
  #main section.section.tsp-catlist {
    overflow-x: clip;
  }

  /* キービジュアルは画面幅いっぱい (SP は本文が画面の中央にあるので、中央から左右に 50vw ずつ広げる) */
  #main .tsp-catlist .tsp-catlist__kv {
    width: 100vw;
    height: 210px;
    margin-left: calc(50% - 50vw);
  }

  /* SP は下から暗がけ */
  #main .tsp-catlist .tsp-catlist__kv::after {
    background: linear-gradient(0deg, rgba(20, 14, 10, .82) 0%, rgba(20, 14, 10, .35) 60%, rgba(20, 14, 10, .05) 100%);
  }

  #main .tsp-catlist .tsp-catlist__kv-tx {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 16px;
    transform: none;
  }

  #main .tsp-catlist .tsp-catlist__kv-title { font-size: 28px; }
  #main .tsp-catlist .tsp-catlist__kv-en { margin: 4px 0 8px; font-size: 13px; }
  #main .tsp-catlist .tsp-catlist__kv-lead { font-size: 12px; line-height: 1.7; }

  #main .tsp-catlist .tsp-catlist__pk-head-en { font-size: 22px; }

  /* 大1枚 (幅いっぱい) + 下に小2枚を横並び */
  #main .tsp-catlist .tsp-catlist__pk {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #main .tsp-catlist .tsp-catlist__pk-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #main .tsp-catlist .tsp-catlist__pk-title {
    font-size: 15px;
    height: auto;
  }

  /* 小のタイトルは3行まで */
  #main .tsp-catlist .tsp-catlist__pk-card--sm .tsp-catlist__pk-title {
    margin-top: 8px;
    font-size: 12.5px;
    height: auto;
    -webkit-line-clamp: 3;
  }

  #main .tsp-catlist .tsp-catlist__pk-by {
    padding: 2px 6px;
    font-size: 8.5px;
  }

  /* 5列2段 */
  #main .tsp-catlist .tsp-catlist__area-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  #main .tsp-catlist .tsp-catlist__area-list a {
    padding: 5px 0;
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  #main .tsp-catlist .tsp-catlist__list-head {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main .tsp-catlist .tsp-catlist__pk-ph img,
  #main .tsp-catlist .tsp-catlist__area-list a {
    transition: none;
  }
}