/*
 * Cosboo Cards：記事一覧のチケットデザイン（.cb-tl は cosboo-list.js が組み替えた一覧にだけ付く）
 * お知らせ一覧（#news_archive_list）と、お知らせ記事の下の「新着のお知らせ」（#recent_news_list）は同じ組み方。
 * 左に日付の半券（.cb-tl-stub）、境目に上下の切り込み。お知らせ一覧は PC だけ右にサムネイルを出す。
 * テーマの指定（#news_archive_list … / #archive …）より強くするため、id＋クラスで書いている。
 */
.cb-tl {
  --cb-or: rgb(var(--tcd-key1-color, 255, 90, 0));
  --cb-tl-stub: 112px;
  --cb-tl-notch: 9px;

  display: grid;
  gap: 14px;
}

/* 1件分：白いチケット。半券と本文の境目の上下を丸く切り抜く */
#news_archive_list.cb-tl .item,
#recent_news_list.cb-tl .item,
#archive .cb-tl .item {
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
}
#news_archive_list.cb-tl .link,
#recent_news_list.cb-tl .link,
#archive .cb-tl .link {
  display: grid;
  grid-template-columns: var(--cb-tl-stub) minmax(0, 1fr);
  align-items: stretch;
  height: auto;
  min-height: 120px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden; /* 半券の色を角丸で切る */
  background: #fff;
  color: inherit;
  -webkit-mask:
    radial-gradient(circle var(--cb-tl-notch) at var(--cb-tl-stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--cb-tl-notch) at var(--cb-tl-stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--cb-tl-notch) at var(--cb-tl-stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--cb-tl-notch) at var(--cb-tl-stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform .25s ease;
}
/* mask を掛けると box-shadow が切れるので、影は .item 側に drop-shadow で付ける */
#news_archive_list.cb-tl .item,
#recent_news_list.cb-tl .item,
#archive .cb-tl .item {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .07));
}
#news_archive_list.cb-tl .link:hover,
#recent_news_list.cb-tl .link:hover,
#archive .cb-tl .link:hover,
#news_archive_list.cb-tl .link:focus-visible,
#recent_news_list.cb-tl .link:focus-visible,
#archive .cb-tl .link:focus-visible {
  transform: translateY(-3px);
}

/* 左の半券：年／月.日／種類 */
.cb-tl .cb-tl-stub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 14px 6px;
  background: var(--cb-or);
  color: #fff;
  text-align: center;
  border-right: 2px dashed rgba(255, 255, 255, .7);
  line-height: 1.2;
}
.cb-tl .cb-tl-stub__y {
  font-size: 12px;
  opacity: .85;
}
.cb-tl .cb-tl-stub__md {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
.cb-tl .cb-tl-stub__kind {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* ===== お知らせ一覧：半券｜本文｜サムネイル ===== */
#news_archive_list.cb-tl .link,
#recent_news_list.cb-tl .link {
  grid-template-columns: var(--cb-tl-stub) minmax(0, 1fr) 200px;
}
#news_archive_list.cb-tl .content,
#recent_news_list.cb-tl .content {
  order: 2;
  width: auto;
  height: auto;
  position: static;
  border: 0;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: center;
}
#news_archive_list.cb-tl .content > .inner,
#recent_news_list.cb-tl .content > .inner {
  position: static;
  transform: none;
  padding: 18px 22px;
  display: grid;
  gap: 8px;
}
#news_archive_list.cb-tl .date,
#recent_news_list.cb-tl .date,
#recent_news_list.cb-tl .date.sp,
#recent_news_list.cb-tl .date.pc {
  display: none; /* 日付は半券に出している */
}
#news_archive_list.cb-tl .title,
#recent_news_list.cb-tl .title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  max-height: none;
  color: #1f1f1f;
}
#news_archive_list.cb-tl .image_wrap,
#recent_news_list.cb-tl .image_wrap {
  order: 3;
  width: auto;
  height: auto;
  border-radius: 0;
}
#news_archive_list.cb-tl .image,
#recent_news_list.cb-tl .image {
  height: 100%;
}

#news_archive_list.cb-tl.no_thumbnail .link,
#recent_news_list.cb-tl.no_thumbnail .link {
  grid-template-columns: var(--cb-tl-stub) minmax(0, 1fr);
}
.cb-tl .cb-tl-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-or);
}
#news_archive_list.cb-tl .link:hover .title,
#recent_news_list.cb-tl .link:hover .title {
  color: var(--cb-or);
}

/* ===== カテゴリー等の一覧：半券｜タイトル＋抜粋 ===== */
#archive .cb-tl .cb-tl-body {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px 22px;
}
#archive .cb-tl .title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #1f1f1f;
}
#archive .cb-tl .title span {
  display: block;
  margin: 0;
  white-space: normal; /* テーマは1行で「…」にしているので、折り返して全文を出す */
  overflow: visible;
  text-overflow: clip;
}
#archive .cb-tl .desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #777;
}
#archive .cb-tl .desc span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  margin: 0;
}
#archive .cb-tl .link:hover .title {
  color: var(--cb-or);
}

/* ===== スマホ：半券を細く、サムネイルは隠す ===== */
@media (max-width: 700px) {
  .cb-tl {
    --cb-tl-stub: 84px;
    --cb-tl-notch: 7px;
    gap: 12px;
  }
  #news_archive_list.cb-tl .link,
  #recent_news_list.cb-tl .link {
    grid-template-columns: var(--cb-tl-stub) minmax(0, 1fr);
    min-height: 100px;
  }
  #archive .cb-tl .link {
    min-height: 100px;
  }
  #news_archive_list.cb-tl .image_wrap,
  #recent_news_list.cb-tl .image_wrap {
    display: none;
  }
  .cb-tl .cb-tl-stub__md {
    font-size: 20px;
  }
  #news_archive_list.cb-tl .content > .inner,
  #recent_news_list.cb-tl .content > .inner,
  #archive .cb-tl .cb-tl-body {
    padding: 14px 16px;
  }
  #news_archive_list.cb-tl .title,
  #recent_news_list.cb-tl .title,
  #archive .cb-tl .title {
    font-size: 15px;
  }
  /* テーマはスマホで一覧を画面の端まで広げるので、左右に余白を戻す */
  #archive .cb-tl {
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #news_archive_list.cb-tl .link,
  #recent_news_list.cb-tl .link,
  #archive .cb-tl .link {
    transition: none;
  }
}

/*
 * 記事一覧の上の検索欄（テーマの .post_archive_form_area > .main_search_area）：デザイン案 A「タイトル帯にのせる」
 * 灰色の帯をやめてタイトル帯・パンくずと同じオレンジの地にし、白い丸い欄（虫めがね＋ボタンを中に収める）をパンくずの左端にそろえて置く。
 * テーマの responsive.css がこの CSS より後に読み込まれるので、body を足して強くしている。
 */
body .post_archive_form_area {
  padding: 0 0 26px;
  background: rgba(var(--tcd-key2-color, 255, 172, 127), 1);
}
body .post_archive_form_area .main_search_area {
  max-width: 1130px; /* パンくず（#bread_crumb ul）と同じ幅・同じ左端 */
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  font-size: 15px;
}
body .post_archive_form_area .main_search_area::before {
  content: none; /* テーマの虫めがね（アイコンフォント）。下で欄の中に描き直す */
}
body .post_archive_form_area .main_search_area #searchform {
  position: relative;
  max-width: 640px;
  height: 52px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(194, 68, 0, .18);
}
body .post_archive_form_area .main_search_area #searchform:focus-within {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
body .post_archive_form_area .main_search_area #searchform > div {
  display: flex;
  align-items: stretch;
  height: 100%;
}
/* 虫めがね（Font Awesome Free の magnifying-glass、CC BY 4.0） */
body .post_archive_form_area .main_search_area #searchform > div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: rgb(var(--tcd-key1-color, 255, 90, 0));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
body .post_archive_form_area .main_search_area #searchform #s {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 50px;
  border: 0;
  border-radius: 99px 0 0 99px;
  background: none;
  color: #1f1f1f;
  font-size: 15px;
  outline: none;
}
/* 入力した文字と見分けられる薄いグレー（Firefox は既定で薄くするので opacity を戻す） */
body .post_archive_form_area .main_search_area #searchform #s::placeholder {
  color: #a8a8a8;
  opacity: 1;
}
body .post_archive_form_area .main_search_area .submit_button2 {
  position: static;
  width: auto;
  height: auto;
  padding: 5px;
  background: none;
}
body .post_archive_form_area .main_search_area #searchform #searchsubmit {
  width: auto;
  height: 100%;
  padding: 0 24px;
  border-radius: 99px;
  background: rgb(var(--tcd-key1-color, 255, 90, 0));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-indent: 0;
  transition: filter .2s;
}
body .post_archive_form_area .main_search_area #searchform #searchsubmit:hover {
  opacity: 1;
  filter: brightness(1.08);
}

/* PC でも幅が狭いとき：パンくずと同じく左右に 20px 空ける */
@media (max-width: 1201px) {
  body .post_archive_form_area .main_search_area {
    max-width: none;
    padding: 0 20px;
  }
}
@media (max-width: 600px) {
  body .post_archive_form_area {
    padding-bottom: 22px;
  }
  body .post_archive_form_area .main_search_area #searchform {
    height: 48px;
  }
  body .post_archive_form_area .main_search_area #searchform > div::before {
    left: 16px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }
  body .post_archive_form_area .main_search_area #searchform #s {
    padding-left: 40px;
    font-size: 14px;
  }
  body .post_archive_form_area .main_search_area #searchform #searchsubmit {
    padding: 0 14px;
    font-size: 14px;
  }
}