/*! custom-category.css — category_page.hbs と section_page.hbs の共用。★編集すると2ページに影響する */
/* トークンもスタイルもこのファイル内で完結させる（rule.md 1-7） */

:root {
  /* Color（design.md「2. Color Palette」より、本ページで使用する分のみ抜粋） */
  --color-text-primary: #505050;
  --color-text-orange: #ED6C00;
  --color-text-orange-hover: #F6B580;
  --color-border-base: #DFDFDF;
  --color-border-strong: #505050;
  --color-bg-gray: #F3F2F2;

  /* Spacing（Mobile値をデフォルト、PCは768px以上で再定義） */
  --spacing-sss: 4px;
  --spacing-ss: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 40px;
}
@media (min-width: 768px) {
  :root {
    --spacing-sss: 8px;
    --spacing-ss: 16px;
    --spacing-s: 24px;
    --spacing-m: 40px;
    --spacing-l: 60px;
  }
}

/* ==== パンくず（既存 .LABreadcrumbs のスコープ内上書きのみ） ==== */
/*! Mobileの12pxはトークンに無い例外値（意図的）。記事ページのパンくずと同値にすること */
.custom-category-breadcrumbs .breadcrumbs,
.custom-category-breadcrumbs .breadcrumbs li,
.custom-category-breadcrumbs .breadcrumbs li a {
  font-size: 12px;
}
@media (min-width: 768px) {
  .custom-category-breadcrumbs .breadcrumbs,
  .custom-category-breadcrumbs .breadcrumbs li,
  .custom-category-breadcrumbs .breadcrumbs li a {
    font-size: 14px; /* PC: body.m */
  }
}
/*! 区切り文字のchevron化。`.breadcrumbs.breadcrumbs` の重複指定は意図的（整理すると効かなくなる） */
.LABreadcrumbs.custom-category-breadcrumbs .breadcrumbs.breadcrumbs li + li::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  vertical-align: -2px;
  /* 実アセット未取得のためCSS描画で暫定実装 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="%23505050" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*! セクションページは最後の項目（セクション名）が <a> で出力されるため style.css のオレンジが当たる。
    グレーに上書きしてカテゴリページと揃える（custom-article-header.css と同じ対処）。
    ★カテゴリページは最後の項目がリンクでないため、このルールは空振り＝影響なし */
.LABreadcrumbs.custom-category-breadcrumbs .breadcrumbs li:last-child a,
.LABreadcrumbs.custom-category-breadcrumbs .breadcrumbs li:last-child a:visited {
  color: #666464; /* style.css の現在ページのグレーと同値 */
}

/* ==== ページラッパー ==== */
.custom-category-page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--spacing-s);
}
.custom-category-page h2,
.custom-category-page h3,
.custom-category-page p,
.custom-category-page ul {
  margin: 0; /*! ここに padding: 0 を足さないこと（タイトル側のpaddingが常に0で上書きされる） */
}
.custom-category-page ul {
  padding-left: 0; /* ブラウザ標準のリスト字下げのみ個別にリセット */
}

/* ==== カテゴリタイトル ==== */
/*! 記事ページの h1.custom-category-title と同じ値にすること（片方だけ変えるとずれる） */
.custom-category-title {
  font-size: 22px; /* Mobile: title.h2 */
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  padding: var(--spacing-ss) 0;
  border-bottom: 1px solid var(--color-border-base);
}
@media (min-width: 768px) {
  .custom-category-title {
    font-size: 24px; /* PC: title.h1 */
  }
}
.custom-category-description {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-top: var(--spacing-ss) !important;
}

/* ==== アンカーナビ（Mobileはアコーディオンで開閉、PC(≥768px)は常時表示） ==== */
/*! @media で囲むのは必須（アクセシビリティ）。html に指定すること（スクロールコンテナ） */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.custom-category-anchor-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-s);
  width: 100%;
  height: 36px;
  margin-top: var(--spacing-s);
  padding: 0 var(--spacing-s);
  border: none;
  border-radius: 0; /* ユーザー指示。角丸を付けないこと */
  background: var(--color-bg-gray);
  font-size: 14px; /* body.m。このボタンはPCで非表示のためMobile値のみ */
  font-weight: 600;
  color: var(--color-text-orange);
  cursor: pointer;
}
.custom-category-anchor-toggle__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="%23ed6c00" stroke-width="2" stroke-linecap="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s;
}
.custom-category-anchor-toggle[aria-expanded="true"] .custom-category-anchor-toggle__icon {
  transform: rotate(45deg); /* 開いている間はプラス→×に見せて「閉じる」を示す */
}

.custom-in-page-nav {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--spacing-s);
  /* 区切り線の左右が対称に見える固定値。spacing tokenに置き換えないこと */
  column-gap: 16px;
  margin-top: var(--spacing-s);
  background-color: var(--color-bg-gray);
  padding: var(--spacing-ss);
}
/*! 開閉状態は .is-open で表す。hidden 属性に戻さないこと（PCはCSSで常時表示のため食い違う） */
.custom-in-page-nav:not(.is-open) {
  display: none;
}
@media (min-width: 768px) {
  .custom-category-anchor-toggle {
    display: none; /* PCでは常時表示のため開閉ボタンは不要 */
  }
  /* Mobileで閉じたままPC幅にしても表示されるよう、開閉状態に関わらず表示する */
  .custom-in-page-nav:not(.is-open) {
    display: flex;
  }
}
/* リンク部品はTOPページの Anchor-Link と同一 */
/*! ★区切り線をMobileでも出すのはTOPとの意図的な差分。TOPに揃える修正をしないこと */
.custom-anchor-link {
  display: flex;
  align-items: center;
  font-size: 14px; /* PCは下の @media で切り替える */
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  /* hover時のunderlineは style.css の a:hover が担うので、ここでは指定しない */
  text-decoration: none;
}
@media (min-width: 768px) {
  .custom-anchor-link {
    font-size: 16px;
  }
}
/* オレンジ円＋白い下向き矢印（16px）。画像アセットを使わず data URI で描画 */
.custom-anchor-link::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 8px; /* 両ブレークポイント共通 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="%23ED6C00"/><path d="M8 4.2v6.4M5.2 8l2.8 2.8L10.8 8" fill="none" stroke="%23ffffff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* 項目間の区切り線（項目の右に16px空けて1px・高さ24px） */
.custom-anchor-link:not(:last-child)::after {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 24px;
  margin-left: 16px;
  background-color: var(--color-border-base);
}
.custom-anchor-link:focus-visible {
  outline: 2px solid var(--color-text-orange);
  outline-offset: 2px;
}

/* ==== 記事一覧セクション（2カラムグリッド） ==== */
.custom-category-section-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-l);
  margin-top: var(--spacing-m);
  padding: 0 var(--spacing-ss); /* Mobileのみの左右inset。PCでは下の @media で0にする */
}
@media (min-width: 768px) {
  .custom-category-section-container {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-l);
    row-gap: var(--spacing-l);
    padding: 0; /* PCはこのinsetなし */
  }
}

.custom-category-section {
  display: flex;
  flex-direction: column;
  gap: 0; /* Mobile: HeadingとListの間にgapなし */
  position: relative;
  padding-top: var(--spacing-s); /* 罫線⇔タイトルの余白 */
}
/*! 区切り線はセクション間 gap の中央に置く ::before。一覧の一番上には引かない */
.custom-category-section::before {
  content: "";
  position: absolute;
  top: calc(var(--spacing-l) / -2);
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-border-base);
}
.custom-category-section:first-child::before {
  content: none; /* Mobile: 一覧の一番上には引かない */
}
@media (min-width: 768px) {
  .custom-category-section {
    gap: var(--spacing-sss); /* PC */
  }
  /*! PC(2カラム)は奇数番目（左列）だけに2カラム幅の罫線を描き、偶数番目（右列）は消す */
  .custom-category-section::before {
    content: none;
  }
  .custom-category-section:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: calc(var(--spacing-l) / -2);
    left: 0;
    width: calc(200% + var(--spacing-l)); /* 自セル幅 + 列間ガター + 隣セル幅 */
    height: 2px;
    background: var(--color-border-base);
  }
  .custom-category-section:nth-child(-n+2)::before {
    content: none; /* 1行目（1・2番目）の上には引かない */
  }
}

.custom-category-section-title {
  font-size: 18px; /* title.h3 */
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.custom-category-article-list {
  list-style: none;
}

.custom-category-article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-ss);
  padding: var(--spacing-s) 0; /* Mobile */
  border-bottom: 1px dotted var(--color-border-base); /* dotted はユーザー指示。実線に戻さないこと */
}
@media (min-width: 768px) {
  .custom-category-article-item {
    /* PCは参照するtier自体を切り替える（design.md「4. Spacing」のtier切替パターン） */
    padding: var(--spacing-ss) 0;
  }
}
.custom-category-article-item--error {
  color: var(--color-text-primary);
}

.custom-category-article-link {
  font-size: 14px; /* Mobile: body.m */
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-primary);
  text-decoration: none;
  flex: 1 1 auto;
}
@media (min-width: 768px) {
  .custom-category-article-link {
    font-size: 16px; /* PC: body.l */
  }
}
/*! 矢印は <a> の兄弟なので `<a>:hover` では届かない。ホバーは <li> 側で受けること */
.custom-category-article-item:hover .custom-category-article-link,
.custom-category-article-link:focus-visible {
  color: var(--color-text-orange);
}

.custom-category-article-link__arrow {
  flex-shrink: 0;
  width: 20px; /* Mobile */
  height: 20px;
  display: inline-block;
  /* 実アセット未取得のためSVGを手描きで代替。アセットが用意できたら差し替え可 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="%23ed6c00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 768px) {
  .custom-category-article-link__arrow {
    width: 24px; /* PC */
    height: 24px;
  }
}
/*! hover色。`%23F6B580` は --color-text-orange-hover と同値。変更時は両方直すこと */
.custom-category-article-item:hover .custom-category-article-link__arrow,
.custom-category-article-link:focus-visible ~ .custom-category-article-link__arrow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="%23F6B580" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.custom-category-article-item--more {
  justify-content: center;
  border-bottom: none;
  padding: 0; /*! padding を戻すと内側の .custom-category-show-more のぶんと二重に加算される */
}
.custom-category-show-more {
  display: inline-flex;
  align-items: center;
  gap: 16px; /* 固定値。spacing tokenに置き換えないこと */
  background: none;
  border: none;
  padding: 14px 0; /* 固定値。spacing tokenに置き換えないこと */
  font-size: 14px; /* Mobile: body.m */
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-orange);
  cursor: pointer;
}
@media (min-width: 768px) {
  .custom-category-show-more {
    font-size: 16px; /* PC: body.l */
  }
}
/* アイコンが <button> の内側なので、button の :hover で文字・アイコン両方に届く */
.custom-category-show-more:hover,
.custom-category-show-more:focus-visible {
  color: var(--color-text-orange-hover);
}
.custom-category-show-more:focus-visible {
  outline: 2px solid var(--color-text-orange);
  outline-offset: 2px;
}
.custom-category-show-more__icon {
  width: 20px; /* Mobile */
  height: 20px;
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="%23ed6c00" stroke-width="2" stroke-linecap="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 768px) {
  .custom-category-show-more__icon {
    width: 24px; /* PC */
    height: 24px;
  }
}
/*! hover色。`%23F6B580` は --color-text-orange-hover と同値。変更時は両方直すこと */
.custom-category-show-more:hover .custom-category-show-more__icon,
.custom-category-show-more:focus-visible .custom-category-show-more__icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="%23F6B580" stroke-width="2" stroke-linecap="round"/></svg>');
}

.custom-category-article-item[hidden] {
  display: none;
}

/* ==== セクションページ専用（記事一覧そのものは上のカテゴリページ用スタイルを共有） ==== */
/*  1カラムなのは下位区分が無いため。カテゴリの2カラムはセクション単位で、記事リストは向こうも1カラム */
.custom-section-article-container {
  margin-top: var(--spacing-m);
  padding: 0 var(--spacing-ss); /* Mobileのみの左右inset。PCでは下の @media で0にする */
}
@media (min-width: 768px) {
  .custom-section-article-container {
    padding: 0;
  }
}

.custom-section-pager {
  overflow: hidden; /*! style.css の `.pagination li { float: left }` を含めるため。外すと下に重なる */
}
/*! 余白は .pagination 単体ではなくこの複合セレクタで持つこと（上の ul リセットに負けて消えるため） */
.custom-section-pager .pagination {
  margin: var(--spacing-m) 0 0;
}

/* ==== ページの先頭へ（全幅グレーのバー） ==== */
/*! #EEEEEE はトークンに無い値。正式なトークン名が決まったら差し替えること */
.custom-page-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--spacing-m);
  padding: 16px;
  background-color: #EEEEEE;
  color: var(--color-text-primary);
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s;
}
.custom-page-top-btn:hover {
  background-color: var(--color-border-base); /* #DFDFDF */
}

/*! フッターと隣接させるための打ち消し。★読み込み順を変えると効かなくなる（同詳細度） */
.custom-footer {
  margin-top: 0;
}

/*! PCは style.css の `body > main { min-height: 65vh }` が短いページで main を引き伸ばし、余りがバー⇔フッター間の隙間になる */
/*! 高さの確保先を main からラッパーへ移して隙間を消す。★main を flex 化する方法は不可 */
@media (min-width: 1024px) {
  body > main {
    min-height: 0;
  }
  .custom-category-page {
    min-height: 65vh; /*! style.css の main と同値。外すと短いページで隙間が戻る */
  }
}
/*! :hover/:focus を外すと style.css の a:hover に負けて下線が出る（!important は不要） */
.custom-page-top-btn:hover,
.custom-page-top-btn:focus {
  text-decoration: none;
}

/* 上向きの矢印（CSSで描画。custom-guide.css と同一） */
.custom-icon-arrow-up {
  position: relative;
  width: 12px;
  height: 14px;
  flex-shrink: 0;
}
.custom-icon-arrow-up::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-text-primary);
  border-left: 1.5px solid var(--color-text-primary);
}
.custom-icon-arrow-up::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 12px;
  background-color: var(--color-text-primary);
}