/* 協賛企業コラムの一覧：開く瞬間の「製本めくり」（functions/toseikyo-columns.php） */

/* JSが準備するまでのあいだ、一覧が一瞬見えないように紙で覆う（4秒で自然に消える） */
html.ts50-col-intro:not(.ts50-col-ready)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #f4f1ea;
  animation: ts50ColGone 0s linear 4s forwards;
}

.ts50-col-open { display: none; }
html.ts50-col-intro .ts50-col-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #f4f1ea;
  cursor: pointer;
  /* 最後の見開きを見せてから、紙ごと上へ抜ける */
  animation: ts50ColLeave .62s cubic-bezier(.76, 0, .24, 1) var(--end) both;
}
.ts50-col-open.is-leave { animation: ts50ColLeave .55s cubic-bezier(.76, 0, .24, 1) 0s both !important; }

.ts50-col-open__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: ts50ColRise .55s cubic-bezier(.2, .7, .2, 1) both;
}

/* 冊子：1ページの大きさ。開くと右へ半分ずれて見開きが真ん中にくる */
.ts50-col-book {
  --w: clamp(150px, 30vw, 300px);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.38);
  animation: ts50ColShift .55s cubic-bezier(.6, 0, .25, 1) .6s both;
}
.ts50-col-book::after {
  /* 机に落ちる影 */
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -18px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 16, 64, .22), rgba(0, 16, 64, 0) 70%);
  z-index: -1;
}

.ts50-col-page {
  position: absolute;
  inset: 0;
  z-index: var(--z);
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: ts50ColFlip .5s cubic-bezier(.45, .05, .3, 1) calc(.6s + var(--i) * var(--step)) both;
}
.ts50-col-page--last { animation: none; }
.ts50-col-page__f,
.ts50-col-page__b {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.ts50-col-page__f {
  display: flex;
  flex-direction: column;
  padding: 10% 9% 9%;
  background: #fff;
  box-shadow: inset 6px 0 10px -6px rgba(0, 16, 64, .25), 0 1px 0 rgba(0, 16, 64, .08);
  color: #001040;
}
/* めくった裏：罫の入った紙 */
.ts50-col-page__b {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(#f9f7f2 0 17px, #e3ddd0 17px 18px) 0 18% / 100% 70% no-repeat,
    #f9f7f2;
  box-shadow: inset -6px 0 10px -6px rgba(0, 16, 64, .25);
}

/* 表紙：紺に特色の青の背、縦組みの題字 */
.ts50-col-page--cover .ts50-col-page__f {
  align-items: center;
  justify-content: space-between;
  padding: 9% 8% 9% 14%;
  background: #001040;
  color: #fff;
  box-shadow: inset 7px 0 0 #15a8e2;
}
.ts50-col-cover__kicker { font-size: clamp(8px, 1.2vw, 11px); letter-spacing: .12em; opacity: .75; }
.ts50-col-cover__title {
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(17px, 3vw, 31px);
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}
.ts50-col-cover__count { font-family: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", serif; font-size: clamp(10px, 1.4vw, 13px); letter-spacing: .14em; color: #15a8e2; }

/* 寄稿のページ：写真・番号・テーマ・社名 */
.ts50-col-page__img { display: block; flex: 0 0 52%; margin-bottom: 10%; background: #e6e0d3 center / cover no-repeat; }
.ts50-col-page__no { font-size: clamp(8px, 1.1vw, 11px); font-weight: 600; letter-spacing: .16em; color: #15a8e2; }
.ts50-col-page__theme {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6%;
  font-family: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(10px, 1.45vw, 15px);
  font-weight: 700;
  line-height: 1.6;
}
.ts50-col-page__company { margin-top: auto; padding-top: 6%; border-top: 1px solid rgba(0, 16, 64, .2); font-size: clamp(7px, 1vw, 10px); line-height: 1.5; color: #5a6270; }

/* 最後のページ：結びの一文 */
.ts50-col-page--last .ts50-col-page__f { justify-content: center; align-items: flex-start; background: #fbfaf6; }
.ts50-col-last__text { font-family: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", serif; font-size: clamp(12px, 1.9vw, 19px); font-weight: 800; line-height: 1.9; }
.ts50-col-last__sub { margin-top: 12%; font-size: clamp(8px, 1.1vw, 11px); letter-spacing: .16em; color: #15a8e2; }

.ts50-col-open__skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  gap: 8px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid rgba(0, 16, 64, .35);
  background: none;
  color: #001040;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
}

/* 一覧のカード：冊子が抜けたあと、紙を置くように1枚ずつ */
html.ts50-col-ready:not(.ts50-col-done) .p-archive--post-item { opacity: 0; }
html.ts50-col-done .p-archive--post-item {
  animation: ts50ColPlace .75s cubic-bezier(.2, .7, .2, 1) calc(var(--k, 0) * .09s) both;
}

@keyframes ts50ColRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ts50ColShift { to { transform: translateX(50%); } }
@keyframes ts50ColFlip {
  0% { transform: perspective(1600px) rotateY(0); z-index: var(--z); }
  49% { z-index: var(--z); }
  50% { z-index: 300; }
  100% { transform: perspective(1600px) rotateY(-180deg); z-index: 300; }
}
@keyframes ts50ColLeave {
  0% { transform: none; }
  99% { transform: translateY(-100%); visibility: visible; }
  100% { transform: translateY(-100%); visibility: hidden; }
}
@keyframes ts50ColPlace {
  from { opacity: 0; transform: translateY(28px) rotate(-1.6deg); }
  to { opacity: 1; transform: none; }
}
@keyframes ts50ColGone { to { visibility: hidden; } }

@media (max-width: 767px) {
  .ts50-col-book { --w: 44vw; }
  .ts50-col-cover__kicker { display: none; }
  .ts50-col-page--cover .ts50-col-page__f { justify-content: center; gap: 12%; }
  .ts50-col-page__theme { display: none; }
  .ts50-col-page__img { flex-basis: 56%; }
  .ts50-col-open__skip { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts50-col-open, html.ts50-col-intro::before { display: none !important; }
}