/*
 * 開催情報、アクセス、メンバー、FAQ、フッター。
 * ページ後半の情報表示をまとめる。
 */
/* Info */
.info { overflow: clip; background: var(--paper); }
.info-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.counter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 60px; }
.counter-card { min-height: 180px; display: flex; padding: 24px; flex-direction: column; justify-content: space-between; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-.5deg); }
.counter-card:nth-child(even) { background: #fff2ba; transform: rotate(.6deg); }
.counter-label { font-weight: 700; }
.counter-value { font-family: var(--latin); font-size: clamp(42px, 5vw, 66px); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em; }
.counter-note { color: var(--ink-soft); font-size: .72rem; }
.info-poster { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 76px); margin-top: 74px; padding: clamp(30px, 5vw, 60px); border: 4px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 7px 7px 0 var(--blue); }
.info-poster::before { position: absolute; top: -16px; left: 14%; width: 110px; height: 28px; background: rgba(255,197,49,.85); content: ""; transform: rotate(-4deg); }
.info-copy h3 { font-family: var(--display); font-size: clamp(25px, 3vw, 34px); font-weight: 400; line-height: 1.45; }
.info-copy p { margin-top: 18px; color: var(--ink-soft); }
.info-table { border-top: 3px solid var(--ink); }
.info-row { display: grid; grid-template-columns: 8.2em 1fr; gap: 20px; padding: 16px 0; border-bottom: 2px dashed var(--line); }
.info-row dt { font-weight: 700; }
.info-row dd { color: var(--ink-soft); }
.info-row strong { color: var(--red); }
.info-star { top: 2px; right: 6px; }

/* Schedule and access */
.schedule-section { overflow: clip; border-block: 3px solid var(--ink); background: #eef2ff; }
.schedule-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 100px); align-items: end; }
.schedule-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 58px; }
.day-ticket { position: relative; padding: 30px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 5px 5px 0 var(--ink); }
.day-ticket:nth-child(2) { background: #fff4bf; }
.day-title { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 3px solid var(--ink); }
.day-title strong { color: var(--red); font-family: var(--latin); font-size: clamp(36px, 5vw, 58px); line-height: .9; }
.day-title span { font-weight: 700; }
.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.time-grid time { display: grid; min-height: 42px; padding: 6px; place-items: center; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-family: var(--latin); font-size: .72rem; font-variant-numeric: tabular-nums; }
.ticket-note { margin-top: 19px; padding-top: 15px; border-top: 2px dashed var(--line); color: var(--ink-soft); font-size: .82rem; }
.ticket-note strong { color: var(--ink); }
.access-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(44px, 8vw, 100px); margin-top: 84px; align-items: center; }
.access-copy h3 { margin-top: 18px; font-family: var(--display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; line-height: 1.45; }
.access-copy p { margin-top: 18px; color: var(--ink-soft); }
.route-list { display: grid; gap: 10px; margin-top: 28px; }
.route-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; font-weight: 700; }
.route-list b { width: 34px; height: 34px; display: grid; border: 2px solid var(--ink); border-radius: 999px; place-items: center; background: var(--yellow); font-family: var(--latin); }
.campus-map { position: relative; padding: 18px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 6px 6px 0 var(--blue); transform: rotate(.6deg); }
.campus-map svg { width: 100%; height: auto; }
.map-building { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 3; }
.map-room { fill: var(--yellow); stroke: var(--ink); stroke-width: 3; }
.map-route { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.map-dot { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
.campus-map text { fill: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 700; }
.campus-map .map-small { font-size: 11px; }
.map-caption { display: flex; margin-top: 12px; justify-content: space-between; gap: 12px; font-size: .72rem; font-weight: 700; }

/* Members */
.members { overflow: clip; background: var(--paper); }
.members-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 96px); align-items: end; }
.members-number { display: inline-flex; align-items: baseline; gap: 12px; color: var(--red); font-family: var(--latin); }
.members-number strong { font-size: clamp(64px, 9vw, 118px); line-height: .76; }
.members-number span { max-width: 10em; color: var(--ink); font-family: var(--body); font-weight: 700; line-height: 1.5; }
.team-photo { position: relative; margin-top: 62px; padding: 18px 18px 54px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 7px 7px 0 var(--red); transform: rotate(-.7deg); }
.team-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid var(--ink); border-radius: 12px; }
.team-photo figcaption { position: absolute; right: 20px; bottom: 13px; left: 20px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--latin); font-size: .72rem; }
.team-photo .tape { top: -13px; right: 14%; }
.member-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 54px; }
.member-card { position: relative; padding: 24px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 5px 5px 0 var(--ink); }
.member-card:nth-child(2) { background: #fff1c8; transform: rotate(.7deg); }
.member-card:nth-child(3) { background: #edf2ff; transform: rotate(-.5deg); }
.member-card:nth-child(4) { background: #fff0ed; transform: rotate(.5deg); }
.avatar { width: 118px; height: 118px; margin: -8px auto 18px; overflow: hidden; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-role { color: var(--blue); font-size: .74rem; font-weight: 700; text-align: center; }
.member-name { margin-top: 4px; font-family: var(--display); font-size: 1.35rem; font-weight: 400; text-align: center; }
.member-quote { margin-top: 15px; padding-top: 15px; border-top: 2px dashed var(--line); color: var(--ink-soft); font-size: .86rem; line-height: 1.8; }
.desk-doodle { position: relative; margin-top: 52px; min-height: 112px; padding: 24px 90px 24px 28px; border: 3px solid var(--ink); border-radius: 12px; background: repeating-linear-gradient(0deg, #d99b54 0 5px, #cf8e47 5px 8px); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); transform: rotate(-.5deg); }
.desk-doodle p { max-width: 42em; padding: 10px 16px; border-radius: 12px; background: rgba(255,246,231,.88); font-weight: 700; transform: rotate(.4deg); }
.members-star { top: 31px; right: 25px; }
.members-star svg { opacity: .6; }

/* FAQ */
.faq { overflow: clip; border-top: 3px solid var(--ink); background: #fff3bd; }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(48px, 9vw, 118px); align-items: start; }
.faq-note { margin-top: 26px; color: var(--ink-soft); }
.faq-list { border-top: 3px solid var(--ink); }
.faq-item { border-bottom: 3px solid var(--ink); }
.faq-item summary { position: relative; min-height: 82px; display: flex; padding: 22px 60px 22px 0; align-items: center; gap: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { color: var(--red); font-family: var(--latin); content: "Q"; }
.faq-plus { position: absolute; top: 50%; right: 6px; width: 34px; height: 34px; display: grid; border: 2px solid var(--ink); border-radius: 999px; place-items: center; background: var(--paper); font-size: 1.4rem; line-height: 1; transform: translateY(-50%); transition: transform .38s var(--ease); }
.faq-item[open] .faq-plus { background: var(--red); color: var(--white); transform: translateY(-50%) rotate(45deg); }
.faq-answer { padding: 0 54px 24px 29px; color: var(--ink-soft); }
html:not(.js) .faq-item > .faq-answer { display: block !important; }
html:not(.js) .faq-plus { display: none; }

/* CTA and footer */
.final-cta { position: relative; overflow: clip; padding-block: clamp(88px, 11vw, 150px); background: var(--ink); color: var(--paper); }
.final-cta::before { position: absolute; top: -52px; right: -42px; width: 230px; height: 230px; border: 18px solid var(--yellow); content: ""; clip-path: polygon(50% 0,61% 35%,98% 36%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 36%,39% 35%); opacity: .16; transform: rotate(12deg); }
.final-panel { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(42px, 8vw, 110px); padding: clamp(34px, 6vw, 72px); align-items: center; border: 4px solid var(--paper); border-radius: 12px; background: var(--red); box-shadow: 7px 7px 0 var(--yellow); }
.final-panel h2 { max-width: none; font-family: var(--display); font-size: 40px; font-weight: 400; line-height: 1.5; }
.final-title-date, .final-title-message { display: block; }
.final-title-date { font-size: .8em; }
.final-title-message { white-space: nowrap; }
.final-panel p { margin-top: 19px; line-height: 2; }
.final-details { display: grid; gap: 12px; }
.final-detail { padding: 15px 17px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.final-detail small { display: block; font-family: var(--latin); font-size: .66rem; letter-spacing: .1em; }
.final-detail strong { display: block; margin-top: 4px; font-size: 1.08rem; }
.final-details .button { margin-top: 10px; }
.site-footer { padding: 62px 0 34px; border-top: 3px solid var(--ink); background: var(--paper); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 44px; }
.footer-brand { font-family: var(--display); font-size: 1.25rem; }
.footer-meta { margin-top: 12px; color: var(--ink-soft); font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: flex-end; font-weight: 700; }
.footer-note { margin-top: 45px; padding-top: 22px; border-top: 2px dashed var(--line); color: var(--ink-soft); font-size: .75rem; }