@charset "UTF-8";
/**
 * ナレッジ一覧ページ（/knowledge/）専用スタイル
 *
 * Figma: Astrideサイト → フレーム「Knowledge」(node 1363:3448)
 * 使う側: page-knowledge.php
 *
 * すべて .kn- 接頭辞でスコープする。Cocoon本体・追加CSS（post 11）の
 * .knowledge-* とは名前空間を分けてあるので、既存ページには影響しない。
 */

/* ============ 土台 ============ */

.kn-page {
  --kn-navy: #0c1e35;
  --kn-accent: #0a84ff;
  --kn-body: #4b4b4b;
  --kn-muted: #747474;
  --kn-panel-w: 1216px;   /* 白パネルの最大幅 */
  --kn-grid-w: 1044px;    /* カード3列ぶんの幅 332*3 + 24*2 */

  background: var(--kn-navy);
  color: var(--kn-navy);
}

/* Cocoonのメインカラムを全幅で使う（page_type: column1_full_wide と併用） */
.kn-page * {
  box-sizing: border-box;
}

/* ============ ヒーロー ============ */

.kn-hero {
  position: relative;
  height: 720px;
  overflow: hidden;
  background: var(--kn-navy);
}

/* Figmaでは 1440×960 の画像を top:-222px に置いている（下寄りのトリミング） */
.kn-hero__photo {
  position: absolute;
  top: -222px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 1440px;
  height: 960px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* 下端に向かって紺へ沈める。文字の可読性はこれで確保する */
.kn-hero__scrim {
  position: absolute;
  left: 0;
  top: 217px;
  width: 100%;
  height: 503px;
  background: linear-gradient(180deg, rgba(12, 30, 53, 0) 0%, #0c1e35 100%);
  pointer-events: none;
}

.kn-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--kn-panel-w);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

.kn-hero__eyebrow {
  margin: 0;
  padding-top: 258px;
  font-family: "Mulish", "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0;
}

.kn-hero__title {
  margin: 46px 0 0;
  padding: 0;
  max-width: 1040px;
  font-size: 43px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.kn-hero__lead {
  margin: 16px 0 0;
  max-width: 1040px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #fff;
}

/* ============ 検索 ============ */

/* Figma: ヒーロー内 y=556、634×64。タブの上に置く。
   タブが分野の入口、検索は分野をまたいで探すための入口という並び */
.kn-search {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  z-index: 3;
  width: 634px;
  max-width: calc(100% - 40px);
}

.kn-page .kn-search__form {
  display: flex;
  align-items: stretch;
  height: 64px;
  background: #fff;
  border: 2.9px solid #d9d9d9;
  border-radius: 15px;
  overflow: hidden;
}

.kn-page .kn-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  /* 角丸の内側に文字が寄りすぎないよう、左は少し空ける */
  padding: 0 20px 0 30px;
  border: 0;
  /* 枠の角丸（15px）から線の太さを引いた内側の丸み。左側だけ丸める */
  border-radius: 12px 0 0 12px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--kn-navy);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.kn-page .kn-search__input::placeholder {
  color: #9f9f9f;
  opacity: 1;
}

.kn-page .kn-search__input:focus {
  outline: none;
  box-shadow: none;
}

.kn-page .kn-search__form:focus-within {
  border-color: var(--kn-navy);
}

.kn-page .kn-search__submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 189px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: #d9d9d9;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--kn-navy);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Figmaの字間 7.2px。最後の1字のうしろにも入るぶんを打ち消す */
.kn-page .kn-search__submit-label {
  letter-spacing: 7.2px;
  margin-right: -7.2px;
}

.kn-page .kn-search__submit:hover {
  background: #cfcfcf;
}

.kn-page .kn-search__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: block;
  color: currentColor;
}

/* 検索語を消すボタン。入力があるときだけ出す */
.kn-page .kn-search__clear {
  position: absolute;
  right: 205px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececec;
  color: #5b6472;
  font-size: 15px;
  line-height: 28px;
  cursor: pointer;
}

.kn-search__clear[hidden] {
  display: none;
}

/* ============ タブ ============ */

.kn-tabs {
  position: absolute;
  left: 0;
  bottom: 16px;
  z-index: 3;
  width: 100%;
}

/* 文字の間隔はFigmaどおり32px。選択中の背景（pill）を敷くぶんを
   gap ではなくリンクの左右paddingで持たせ、見た目の間隔を変えずに済ませる */
.kn-tabs__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0 20px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kn-tabs__list::-webkit-scrollbar {
  display: none;
}

/* 横スクロールできることを示す右端のフェード。
   端まで送ったら消す（is-end は knowledge.js が付ける） */
.kn-tabs::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 100%;
  background: linear-gradient(90deg, rgba(12, 30, 53, 0) 0%, #0c1e35 85%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kn-tabs.is-scrollable:not(.is-end)::after {
  opacity: 1;
}

.kn-tabs__item {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.kn-tabs__link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.kn-tabs__link:hover,
.kn-tabs__link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

/* 選択中は薄いグレーの背景に紺文字。7項目あるため、文字色の違いだけでは
   選択中がどれか読み取りにくい。検索ボタン（#d9d9d9）と同じ面で揃えている */
.kn-tabs__item.is-current .kn-tabs__link {
  color: var(--kn-navy);
  background: #d9d9d9;
}

.kn-tabs__item.is-current .kn-tabs__link:hover {
  color: var(--kn-navy);
  background: #d9d9d9;
}

/* Cocoonの .screen-reader-text は label 限定の定義しかないため、ここで用意する。
   件数の「件」を読み上げにだけ渡す */
.kn-page .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 記事本数。蓄積の厚みが一目で伝わるように添える */
.kn-tabs__count {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  font-feature-settings: "tnum";
}

.kn-tabs__link:hover .kn-tabs__count {
  color: rgba(255, 255, 255, 0.8);
}

.kn-tabs__item.is-current .kn-tabs__count,
.kn-tabs__item.is-current .kn-tabs__link:hover .kn-tabs__count {
  color: rgba(12, 30, 53, 0.55);
}

/* ============ 白パネル ============ */

.kn-body {
  background: var(--kn-navy);
  padding: 0 20px;
}

.kn-panel {
  max-width: var(--kn-panel-w);
  margin: 0 auto;
  background: #fff;
  padding: 40px 86px 80px;
}

/* タブごとの説明。何が読めるページなのかを、一覧に入る前に伝える */
.kn-note {
  max-width: var(--kn-grid-w);
  margin: 0 auto 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--kn-muted);
}

.kn-note strong {
  font-weight: 700;
  color: var(--kn-navy);
}

/* ============ カードグリッド ============ */

.kn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  max-width: var(--kn-grid-w);
  margin: 0 auto;
}

.kn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  color: inherit;
}

/* タイトルのリンクをカード全体まで広げる。タグを個別のリンクにするため、
   カードそのものを <a> で包めない（リンクの入れ子は作れない） */
.kn-card__link {
  color: inherit;
  text-decoration: none;
}

.kn-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kn-card__link:hover {
  text-decoration: none;
}

.kn-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: #e9edf2;
}

.kn-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.kn-card:hover .kn-card__thumb img {
  transform: scale(1.04);
}

.kn-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  word-break: break-word;
}

.kn-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--kn-navy);
  transition: color 0.2s ease;
}

.kn-card:hover .kn-card__title {
  color: var(--kn-accent);
}

.kn-card__tags {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--kn-muted);
}

/* カード全体のリンクより手前に置いて、タグ単体で押せるようにする */
.kn-card__tags a {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kn-card__tags a:hover,
.kn-card__tags a:focus-visible {
  color: var(--kn-navy);
  text-decoration: underline;
}

/* タイトルとタグの行数は記事ごとに違う。日付はカード下端で揃える
   （Figmaはダミーテキストのため全カードが同じ高さになっている） */
.kn-card__date {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  gap: 13px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--kn-body);
  white-space: nowrap;
}

.kn-card__date span {
  display: block;
}

/* ============ Show More ============ */

/* 上の余白はボタン自身に持たせる。次のページが無くてボタンを出さないとき、
   空の余白だけが残らないようにするため */
.kn-more {
  margin: 0;
  text-align: center;
}

.kn-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 96px;
  padding: 6px 32px;
  min-height: 36px;
  border: 1px solid var(--kn-navy);
  border-radius: 40px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: var(--kn-navy);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.kn-more__btn:hover:not(:disabled) {
  background: var(--kn-navy);
  color: #fff;
}

.kn-more__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* display の指定が hidden 属性の既定（display:none）を上回るため、明示して消す。
   次のページが無いときはボタンごと余白も消える */
.kn-more__btn[hidden] {
  display: none;
}

/* 該当なしのとき */
.kn-empty {
  margin: 0;
  padding: 80px 0;
  text-align: center;
  font-size: 16px;
  color: var(--kn-body);
}

/* ============ レスポンシブ ============ */

/* リード文は画面幅で使い分ける。狭い画面では7行になってヒーローを埋めるため、
   何が読めるかに絞った短い版へ差し替える */
.kn-hero__lead--short {
  display: none;
}

@media (max-width: 1280px) {
  .kn-panel {
    padding: 40px 40px 64px;
  }
}

@media (max-width: 1080px) {
  .kn-hero {
    height: 660px;
  }

  .kn-hero__photo {
    top: -160px;
    height: 860px;
  }

  .kn-hero__scrim {
    top: 160px;
    height: 500px;
  }

  .kn-hero__eyebrow {
    padding-top: 180px;
    font-size: 60px;
  }

  .kn-hero__title {
    margin-top: 32px;
    font-size: 32px;
  }

  .kn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .kn-card__title {
    font-size: 20px;
  }

  .kn-more__btn {
    margin-top: 72px;
  }
}

@media (max-width: 800px) {
  .kn-tabs__list {
    justify-content: flex-start;
  }

  .kn-tabs__link {
    padding: 6px 12px;
  }
}

@media (max-width: 620px) {
  .kn-hero {
    height: 486px;
  }

  .kn-hero__photo {
    top: -96px;
    min-width: 780px;
    height: 620px;
  }

  .kn-hero__scrim {
    top: 86px;
    height: 400px;
  }

  .kn-hero__inner {
    padding: 0 16px;
  }

  .kn-hero__eyebrow {
    padding-top: 124px;
    font-size: 40px;
  }

  .kn-hero__title {
    margin-top: 20px;
    font-size: 24px;
  }

  .kn-hero__lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 22px;
  }

  .kn-hero__lead--full {
    display: none;
  }

  .kn-hero__lead--short {
    display: block;
  }

  .kn-search {
    bottom: 76px;
    max-width: calc(100% - 32px);
  }

  .kn-page .kn-search__form {
    height: 52px;
    border-width: 2px;
    border-radius: 12px;
  }

  .kn-page .kn-search__input {
    padding: 0 12px 0 20px;
    font-size: 16px;
    border-radius: 10px 0 0 10px;
  }

  .kn-page .kn-search__submit {
    width: 96px;
    padding: 0 10px;
    gap: 6px;
    font-size: 14px;
  }

  .kn-page .kn-search__submit-label {
    letter-spacing: 2px;
    margin-right: -2px;
  }

  .kn-page .kn-search__icon {
    width: 20px;
    height: 20px;
  }

  .kn-page .kn-search__clear {
    right: 108px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 13px;
  }

  .kn-tabs {
    bottom: 12px;
  }

  .kn-tabs__list {
    padding: 0 8px;
  }

  .kn-tabs__link {
    padding: 6px 10px;
    font-size: 15px;
  }

  .kn-tabs__count {
    font-size: 12px;
  }

  .kn-tabs::after {
    width: 44px;
  }

  .kn-body {
    padding: 0;
  }

  .kn-panel {
    padding: 28px 16px 44px;
  }

  .kn-note {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 24px;
  }

  .kn-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .kn-card__title {
    font-size: 18px;
  }

  .kn-card__tags,
  .kn-card__date {
    font-size: 14px;
  }

  .kn-more__btn {
    margin-top: 48px;
  }
}