/*
 * Cosboo Cards：チケットカード（.cb-ticket）／切手カード（.cb-stamp）／協賛企業カード（.cb-sponsor）
 * 見出しや段落にテーマの本文用スタイル（.post_content h3 の !important など）が掛からないよう、中身は span だけで組んでいる。
 * 本文の ul・li のスタイルに負けないよう、器は2クラス分のセレクタにしている。
 */
.cb-tickets.cb-tickets,
.cb-stamps.cb-stamps,
.cb-sponsors.cb-sponsors {
  --cb-or: rgb(var(--tcd-key1-color, 255, 90, 0));
  --cb-or-l: #ffac7f;
  --cb-navy: #2a3045;
  --cb-blue: #5ec8f2;
  --cb-heading: "Dela Gothic One", "M PLUS 2", sans-serif;

  display: grid;
  gap: 28px;
  margin: 2em 0 !important;
  text-align: left; /* 記事の枠（.cstm-box-sticky）の中央揃えを引き継がない */
  padding: 0 !important;
  list-style: none !important;
}
.cb-tickets .cb-ticket-item,
.cb-stamps .cb-stamp-item,
.cb-sponsors .cb-sponsor-item {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}
/*
 * テーマのコンテンツビルダーなどに HTML を貼ると、自動整形がカードの部品と部品の間にも <br> を入れる
 * （改行して書いたところすべて）。カードの「骨組み」の直下に入った <br>・空の <p> は隠す。
 * 文章の中（説明文・消印・見出しなど）の <br> は意図した改行なので残す。
 */
.cb-stamp-item > br,
.cb-stamp > br,
.cb-stamp__inner > br,
.cb-stamp__img > br,
.cb-ticket-item > br,
.cb-ticket > br,
.cb-ticket__stub > br,
.cb-ticket__body > br,
.cb-sponsor-item > br,
.cb-sponsor > br,
.cb-stamp-item > p:empty,
.cb-stamp > p:empty,
.cb-stamp__inner > p:empty,
.cb-ticket > p:empty,
.cb-ticket__body > p:empty,
.cb-sponsor > p:empty {
  display: none;
}
.cb-stamp-marquee > br,
.cb-stamp-marquee > p:empty {
  display: none;
}

/* HTML を直接貼った場所で自動整形が <br>・空の <p> を挟んでも、一覧のマスが空かないよう隠す */
.cb-tickets.cb-tickets > br,
.cb-stamps.cb-stamps > br,
.cb-sponsors.cb-sponsors > br,
.cb-tickets.cb-tickets > p:empty,
.cb-stamps.cb-stamps > p:empty,
.cb-sponsors.cb-sponsors > p:empty {
  display: none;
}
.cb-tickets .cb-ticket-item::before,
.cb-stamps .cb-stamp-item::before,
.cb-sponsors .cb-sponsor-item::before {
  content: none;
}

/* ===== B. チケットカード ===== */
.cb-tickets.cb-tickets--cols-1 { grid-template-columns: 1fr; }
.cb-tickets.cb-tickets--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-tickets.cb-tickets--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .cb-tickets.cb-tickets--cols-2,
  .cb-tickets.cb-tickets--cols-3 { grid-template-columns: 1fr; }
}

/* 影は切り欠きの形に沿わせるため、器（li）に drop-shadow で付ける */
.cb-tickets .cb-ticket-item {
  filter: drop-shadow(0 4px 0 #e2e2e2);
}
.cb-tickets .cb-ticket {
  --stub: 100px;
  display: grid;
  grid-template-columns: var(--stub) 1fr;
  min-height: 150px;
  height: 100%;
  background: #fff;
  border-radius: 14px;
  color: var(--cb-navy);
  text-decoration: none;
  /* 半券と本体の境目の上下に、丸い切り欠き（背景の柄が透けて見える） */
  -webkit-mask:
    radial-gradient(circle 12px at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 12px at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 12px at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 12px at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform .2s ease;
}
a.cb-ticket:hover,
a.cb-ticket:focus-visible {
  transform: translateY(-3px);
}
a.cb-ticket:focus-visible {
  outline: 3px solid var(--cb-or);
  outline-offset: 3px;
}
.cb-tickets .cb-ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px;
  background: var(--cb-or);
  color: #fff;
  border-right: 3px dashed #fff;
  text-align: center;
}
.cb-tickets .cb-ticket__top,
.cb-tickets .cb-ticket__bottom {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.cb-tickets .cb-ticket__big {
  font-family: var(--cb-heading);
  font-size: 34px;
  line-height: 1;
}
.cb-tickets .cb-ticket__big--long {
  font-size: 18px;
  letter-spacing: -.02em;
}
.cb-tickets .cb-ticket__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 18px 16px 22px;
  min-width: 0;
}
.cb-tickets .cb-ticket__label {
  align-self: flex-start;
  padding: 2px 10px;
  border: 1.5px solid var(--cb-or);
  border-radius: 999px;
  color: var(--cb-or);
  font-size: 11px;
  font-weight: 800;
}
.cb-tickets .cb-ticket__title {
  font-family: var(--cb-heading);
  font-size: 19px;
  line-height: 1.35;
  color: var(--cb-navy);
  overflow-wrap: anywhere;
}
.cb-tickets .cb-ticket__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13px;
  color: #555;
}
.cb-tickets .cb-ticket__meta b {
  margin-right: 4px;
  color: var(--cb-or);
  font-weight: 700;
}

/* ===== C. 切手カード ===== */
.cb-stamps.cb-stamps--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-stamps.cb-stamps--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-stamps.cb-stamps--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) {
  .cb-stamps.cb-stamps--cols-3,
  .cb-stamps.cb-stamps--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cb-stamps.cb-stamps { grid-template-columns: 1fr; }
}
.cb-stamps.cb-stamps {
  gap: 36px 28px;
  padding-top: 14px !important; /* 消印のはみ出し分 */
}

/* 少しずつ傾けて貼った感じ。影は切手のギザギザに沿わせるため器に付ける */
.cb-stamps .cb-stamp-item {
  position: relative;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .1));
  transition: transform .2s ease;
}
.cb-stamps .cb-stamp-item:nth-of-type(3n+1) { transform: rotate(-1.5deg); }
.cb-stamps .cb-stamp-item:nth-of-type(3n+2) { transform: rotate(1deg); }
.cb-stamps .cb-stamp-item:nth-of-type(3n)   { transform: rotate(-.5deg); }
.cb-stamps .cb-stamp-item:hover,
.cb-stamps .cb-stamp-item:focus-within {
  transform: rotate(0) translateY(-4px);
}
.cb-stamps .cb-stamp {
  display: block;
  padding: 7px;
  background: #fff;
  color: var(--cb-navy);
  text-decoration: none;
  /* 縁だけギザギザ：外側 7px に丸い穴を並べ、内側（content-box）は全面を残す */
  -webkit-mask:
    radial-gradient(circle, transparent 4.5px, #000 5px) -7px -7px / 14px 14px round,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle, transparent 4.5px, #000 5px) -7px -7px / 14px 14px round,
    linear-gradient(#000 0 0) content-box;
}
a.cb-stamp:focus-visible {
  outline: 3px solid var(--cb-or);
  outline-offset: -3px;
}
.cb-stamps .cb-stamp__inner {
  display: block;
  margin: 7px;
  padding: 10px 10px 14px;
  border: 2px solid var(--cb-or-l);
}
.cb-stamps .cb-stamp__img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
}
.cb-stamps .cb-stamp__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
}
/*
 * 写真の提供者の名前：写真の左下に、カメラのアイコン付きの白いラベルで重ねる（長い名前は「…」で切る）
 * <span class="cb-stamp__img"><img …><span class="cb-stamp__credit">名前</span></span>
 * アイコン：Font Awesome Free の camera（CC BY 4.0）
 */
.cb-stamps .cb-stamp__img {
  position: relative;
}
.cb-stamps .cb-stamp__credit {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: block; /* flex にすると長い名前の末尾が「…」にならない */
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 4px 10px 4px 28px;
  border-radius: 99px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .92);
  color: var(--cb-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.cb-stamps .cb-stamp__credit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -6.5px;
  width: 13px;
  height: 13px;
  background: var(--cb-or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%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='M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cb-stamps .cb-stamp__title {
  display: block;
  margin: 12px 2px 2px;
  font-family: var(--cb-heading);
  font-size: 19px;
  line-height: 1.35;
  color: var(--cb-navy);
  overflow-wrap: anywhere;
}
.cb-stamps .cb-stamp__sub {
  display: block;
  margin: 0 2px;
  font-family: var(--cb-heading);
  font-size: 13px;
  color: var(--cb-or);
}
/* エアメールの縞 */
.cb-stamps .cb-stamp__air {
  display: block;
  height: 8px;
  margin-top: 10px;
  background: repeating-linear-gradient(-45deg, var(--cb-or) 0 10px, #fff 10px 20px, var(--cb-blue) 20px 30px, #fff 30px 40px);
}
/* 右上の消印 */
.cb-stamps .cb-stamp__mark {
  position: absolute;
  top: -14px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 3px solid var(--cb-or);
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--cb-or);
  color: var(--cb-or);
  font-family: var(--cb-heading);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  transform: rotate(14deg);
  pointer-events: none;
}

/* ===== S1. 協賛企業カード（ロゴ主役） =====
 * ロゴは各社の規定に合わせ、白地の上に形・色・縦横比を変えずに置き、周りに余白を取る。
 * ロゴには影・透過・フィルター・傾きを付けない（ホバーで動くのはカード全体だけ）。
 */
.cb-sponsors.cb-sponsors {
  gap: 28px;
  padding-top: 14px !important; /* ランクのリボンのはみ出し分 */
}
.cb-sponsors.cb-sponsors--cols-1 { grid-template-columns: 1fr; }
.cb-sponsors.cb-sponsors--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-sponsors.cb-sponsors--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .cb-sponsors.cb-sponsors--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cb-sponsors.cb-sponsors { grid-template-columns: 1fr; }
}
.cb-sponsors .cb-sponsor {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 24px 22px;
  background: #fff;
  border: 2px solid var(--cb-or);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--cb-or);
  color: var(--cb-navy);
  text-decoration: none;
  transition: transform .15s ease;
}
a.cb-sponsor:hover,
a.cb-sponsor:focus-visible {
  transform: translateY(-3px);
}
a.cb-sponsor:focus-visible {
  outline: 3px solid var(--cb-navy);
  outline-offset: 4px;
}
.cb-sponsors .cb-sponsor__rank {
  position: absolute;
  top: -14px;
  left: 20px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--cb-or);
  color: #fff;
  font-family: var(--cb-heading);
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.2;
}
.cb-sponsors .cb-sponsor__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  margin: 0 0 16px;
  padding: 30px 44px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 10px;
}
.cb-sponsors .cb-sponsor__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  border-radius: 0;
}
.cb-sponsors .cb-sponsor__tag {
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 2px 10px;
  border: 1.5px solid var(--cb-or);
  border-radius: 999px;
  color: var(--cb-or);
  font-size: 12px;
  font-weight: 700;
}
.cb-sponsors .cb-sponsor__name {
  display: block;
  margin: 0 0 8px;
  font-family: var(--cb-heading);
  font-size: 20px;
  line-height: 1.35;
  color: var(--cb-navy);
  overflow-wrap: anywhere;
}
.cb-sponsors .cb-sponsor__text {
  display: block;
  flex: 1;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.85;
  color: #333;
}
.cb-sponsors .cb-sponsor__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--cb-or-l);
  color: var(--cb-or);
  font-size: 13px;
  font-weight: 700;
}
.cb-sponsors .cb-sponsor__link svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 600px) {
  .cb-sponsors .cb-sponsor__logo {
    height: 140px;
    padding: 24px 32px;
  }
}

/* ===== C'. 切手のローテーション（横に流れ続ける帯） =====
 * <div class="cb-stamp-marquee"><ul class="cb-stamps cb-stamp-marquee__track"> 切手の <li> を並べる </ul></div>
 * 切手の見た目は .cb-stamps の指定をそのまま使い、並べ方だけ横一列にして流す。
 * 帯が画面より短いときは cosboo-cards.js が <ul> を複製して隙間なく流れるようにし、速さもそろえる。
 */
.cb-stamp-marquee {
  --cb-marquee-duration: 40s;
  display: flex;
  overflow: hidden;
  padding: 44px 0 52px; /* 消印のはみ出し・傾き・ホバーで浮く分 */
  margin: 1.5em 0;
}
.cb-stamp-marquee .cb-stamps.cb-stamp-marquee__track {
  display: flex;
  flex: none;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  animation: cb-stamp-marquee var(--cb-marquee-duration) linear infinite;
}
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item {
  flex: 0 0 340px;
  margin-right: 36px;
}
/*
 * 帯の切手は、切手カードより強めに左右へ傾けて「貼った」感じを出す（4枚で1巡。同じ向きが続かない）。
 * マウスを乗せた1枚はまっすぐに戻して浮かせる（切手カードの指定をそのまま使う）。
 */
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item:nth-of-type(4n+1) { transform: rotate(-4deg); }
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item:nth-of-type(4n+2) { transform: rotate(3deg); }
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item:nth-of-type(4n+3) { transform: rotate(-2.5deg); }
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item:nth-of-type(4n)   { transform: rotate(4.5deg); }
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item:hover,
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item:focus-within {
  transform: rotate(0) translateY(-6px);
}

/* 帯の切手は写真を大きく見せるため、枠の内側の余白を詰める */
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp__inner {
  padding: 8px 8px 12px;
  border-width: 2.5px;
}
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp__title {
  font-size: 18px;
}
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp__air {
  height: 10px;
  margin-top: 12px;
}
.cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp__mark {
  top: -18px;
  right: -10px;
  width: 112px;
  height: 112px;
  font-size: 15px;
}
/* マウスを乗せている間は止める */
.cb-stamp-marquee:hover .cb-stamp-marquee__track,
.cb-stamp-marquee:focus-within .cb-stamp-marquee__track {
  animation-play-state: paused;
}
@keyframes cb-stamp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (max-width: 900px) {
  .cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item {
    flex-basis: 280px;
    margin-right: 30px;
  }
  .cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp__mark {
    width: 96px;
    height: 96px;
    font-size: 13px;
  }
}
@media (max-width: 600px) {
  /* スマホ：1枚が画面の 3分の2 くらい。次の切手が少し見えて、流れていることが分かる */
  .cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp-item {
    flex-basis: 240px;
    margin-right: 24px;
  }
  .cb-stamp-marquee .cb-stamp-marquee__track .cb-stamp__mark {
    top: -14px;
    right: -6px;
    width: 86px;
    height: 86px;
    font-size: 12px;
  }
}
/* 動きを減らす設定の人には流さず、横にスクロールして見られるようにする（複製した <ul> は隠す） */
@media (prefers-reduced-motion: reduce) {
  .cb-stamp-marquee {
    overflow-x: auto;
  }
  .cb-stamp-marquee .cb-stamp-marquee__track {
    animation: none;
  }
  .cb-stamp-marquee .cb-stamp-marquee__track[data-cb-clone] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-tickets .cb-ticket,
  .cb-stamps .cb-stamp-item,
  .cb-sponsors .cb-sponsor {
    transition: none;
  }
}