/* 全画面のサイトメニュー。紺の地に、見出し＋細い罫＋子ページの3列。開くときはC・M・Yの版が走ってから紺が刷られる。 */
.ts50-menu {
  --m-ink: #001040;
  --m-paper: #f4f1ea;
  --m-spot: #15a8e2;
  --m-mincho: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  color: var(--m-paper);
}
.ts50-menu *, .ts50-menu *::before, .ts50-menu *::after { box-sizing: border-box; }
.ts50-menu.is-open { visibility: visible; pointer-events: auto; }

/* 版：C・M・Yの細い帯が上から下へ走り、その後ろから紺の地が刷られる */
.ts50-menu__plates { position: absolute; inset: 0; overflow: hidden; }
.ts50-menu__plates i { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(-101%); }
.ts50-menu__plates i:nth-child(1) { background: #00a0e9; }
.ts50-menu__plates i:nth-child(2) { background: #e4007f; }
.ts50-menu__plates i:nth-child(3) { background: var(--m-ink); }
.ts50-menu.is-open .ts50-menu__plates i { transform: translateY(0); transition: transform .62s cubic-bezier(.76, 0, .24, 1); }
.ts50-menu.is-open .ts50-menu__plates i:nth-child(2) { transition-delay: .07s; }
.ts50-menu.is-open .ts50-menu__plates i:nth-child(3) { transition-delay: .14s; }
.ts50-menu.is-closing .ts50-menu__plates i { transform: translateY(101%); transition: transform .5s cubic-bezier(.76, 0, .24, 1); }
.ts50-menu.is-closing .ts50-menu__plates i:nth-child(2) { transition-delay: .04s; }
.ts50-menu.is-closing .ts50-menu__plates i:nth-child(1) { transition-delay: .08s; }

.ts50-menu__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 clamp(20px, 5vw, 72px) 48px;
  opacity: 0;
}
.ts50-menu.is-open .ts50-menu__inner { opacity: 1; transition: opacity .3s ease .5s; }
.ts50-menu.is-closing .ts50-menu__inner { opacity: 0; transition: opacity .2s ease; }

/* 上：サイト名と閉じる */
.ts50-menu__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; background: var(--m-ink); }
.ts50-menu__brand { display: flex; align-items: baseline; gap: 14px; color: var(--m-paper); text-decoration: none; min-width: 0; }
.ts50-menu__brand b { font-family: var(--m-mincho); font-size: 22px; font-weight: 800; white-space: nowrap; }
.ts50-menu__brand span { overflow: hidden; font-size: 12px; letter-spacing: .06em; opacity: .7; white-space: nowrap; text-overflow: ellipsis; }
.ts50-menu__close { position: relative; flex: 0 0 auto; width: 52px; height: 52px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.ts50-menu__close span { position: absolute; left: 13px; top: 25px; width: 26px; height: 2px; background: var(--m-paper); transform: rotate(45deg); transition: transform .3s; }
.ts50-menu__close span + span { transform: rotate(-45deg); }
.ts50-menu__close:hover span { transform: rotate(135deg); }
.ts50-menu__close:hover span + span { transform: rotate(45deg); }

/* 本体：左に縦書き、右に3列 */
.ts50-menu__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); max-width: 1240px; margin: 36px auto 0; }
.ts50-menu__tate {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--m-mincho);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .14em;
  color: var(--m-paper);
}
.ts50-menu__tate span { display: block; }
.ts50-menu__tate span + span { margin-top: 2.4em; }
.ts50-menu__tate em { font-style: normal; text-combine-upright: all; color: var(--m-spot); }
.ts50-menu.is-open .ts50-menu__tate span { animation: ts50MenuTate .9s cubic-bezier(.2, .7, .2, 1) .55s both; }
.ts50-menu.is-open .ts50-menu__tate span + span { animation-delay: .75s; }
@keyframes ts50MenuTate { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.ts50-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(24px, 3vw, 48px); align-content: start; }
.ts50-menu__group { min-width: 0; }
.ts50-menu.is-open .ts50-menu__group { animation: ts50MenuUp .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.5s + var(--i) * 60ms); }
@keyframes ts50MenuUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ts50-menu__parent {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(244, 241, 234, .28);
  color: var(--m-paper);
  font-family: var(--m-mincho);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  text-decoration: none;
}
.ts50-menu__parent::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--m-spot); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.ts50-menu__parent:hover::after, .ts50-menu__parent:focus-visible::after, .ts50-menu__parent.is-current::after { transform: scaleX(1); }
.ts50-menu__no { font-size: 13px; font-weight: 600; color: var(--m-spot); }
.ts50-menu__group ul { margin: 16px 0 0; padding: 0; list-style: none; }
.ts50-menu__group li { margin: 0; }
.ts50-menu__group li a { display: inline-block; padding: 7px 0; color: rgba(244, 241, 234, .82); font-size: 14px; letter-spacing: .04em; text-decoration: none; transition: color .25s, transform .25s; }
.ts50-menu__group li a::before { content: "─"; margin-right: 8px; color: rgba(244, 241, 234, .35); }
.ts50-menu__group li a:hover, .ts50-menu__group li a.is-current { color: #fff; transform: translateX(4px); }
.ts50-menu__group li a.is-current::before { color: var(--m-spot); }

/* 下：大きな案内カードとSNS */
.ts50-menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; max-width: 1240px; margin: 56px auto 0; }
.ts50-menu.is-open .ts50-menu__foot { animation: ts50MenuUp .7s cubic-bezier(.2, .7, .2, 1) .85s both; }
.ts50-menu__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: min(100%, 330px);
  padding: 18px 22px;
  background: var(--m-paper);
  color: var(--m-ink);
  text-decoration: none;
  transition: background .3s, color .3s;
}
.ts50-menu__card b { display: block; font-family: var(--m-mincho); font-size: 18px; font-weight: 700; }
.ts50-menu__card small { display: block; margin-top: 2px; font-size: 12px; color: #4b5563; }
.ts50-menu__card i { font-style: normal; font-size: 22px; transition: transform .3s; }
.ts50-menu__card:hover { background: var(--m-spot); color: #fff; }
.ts50-menu__card:hover small { color: #fff; }
.ts50-menu__card:hover i { transform: translateX(5px); }
.ts50-menu__sns { display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.ts50-menu__sns a { color: rgba(244, 241, 234, .8); font-size: 13px; letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid rgba(244, 241, 234, .3); padding-bottom: 2px; }
.ts50-menu__sns a:hover { color: #fff; border-color: #fff; }

/* フッターの案内：横一列に並べ、主催を添える */
.l-footer .l-footer__nav { padding: 56px 0 8px; }
.l-footer .l-footer__nav-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.l-footer .l-footer__nav-inner::after {
  content: "主催　東京都印刷工業組合 東京青年印刷人協議会";
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 241, 234, .6);
}
.l-footer .l-footer__nav-list { width: 100%; max-width: none; }
.l-footer .l-footer__nav-list .menu { display: flex; flex-wrap: wrap; gap: 6px 34px; margin: 0; padding: 0; }
.l-footer .l-footer__nav-list .menu > li { margin: 0; padding: 0; border: 0; }
.l-footer .l-footer__nav-list .menu > li > a {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  color: #f4f1ea;
  text-decoration: none;
}
.l-footer .l-footer__nav-list .menu > li > a:hover { color: #15a8e2; }
.l-footer .l-footer__nav-list .sub-menu { display: none; }

/* 標準のメニュー（横から出るもの）は使わない */
#js-drawer, #js-close-overlay { display: none !important; }
html.ts50-menu-open, html.ts50-menu-open body { overflow: hidden; }

@media (max-width: 900px) {
  .ts50-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ts50-menu__head { height: 64px; }
  .ts50-menu__brand span { display: none; }
  .ts50-menu__body { grid-template-columns: 1fr; gap: 28px; margin-top: 16px; }
  .ts50-menu__tate { writing-mode: horizontal-tb; font-size: 20px; letter-spacing: .08em; }
  .ts50-menu__tate span, .ts50-menu__tate span + span { display: inline; margin: 0 .6em 0 0; }
  .ts50-menu__grid { grid-template-columns: 1fr; gap: 26px; }
  .ts50-menu__group ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; }
  .ts50-menu__group li a { font-size: 14px; padding: 6px 0; }
  .ts50-menu__foot { margin-top: 36px; }
  .ts50-menu__card { width: 100%; }
  .ts50-menu__sns { margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ts50-menu__plates i:nth-child(1), .ts50-menu__plates i:nth-child(2) { display: none; }
  .ts50-menu.is-open .ts50-menu__plates i, .ts50-menu.is-closing .ts50-menu__plates i { transition: none; }
  .ts50-menu.is-open .ts50-menu__inner { transition: none; }
  .ts50-menu.is-open .ts50-menu__tate span, .ts50-menu.is-open .ts50-menu__group, .ts50-menu.is-open .ts50-menu__foot { animation: none; }
}