html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

:root {
  --cw-bg: var(--bgcolor, #ffffff);
  --cw-fg: var(--primarycolor, #111111);
  --cw-font: "DM Sans", dnp-shuei-gothic-kin-std, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-feature-settings: 'palt' 1;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
  font-size: 14px;
}
body {
  background-color: var(--cw-bg);
  color: var(--cw-fg);
  font-family: var(--cw-font);
  font-weight: 400;
  font-size: clamp(1rem, 1.7vmin, 1.6rem);
  line-height: 1;
}
a{
  color: var(--cw-fg);
  text-decoration: none;
}

.cw-loader {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: var(--cw-bg);
  --cw-loader-year-bottom-offset: 1rem;
  --cw-loader-year-position-dur: 520ms;
  opacity: 1;
  pointer-events: none;
  transition: background-color var(--cw-loader-bg-fade, 520ms) ease;
}
.cw-loader.is-complete {
  background-color: transparent;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .cw-loader {
    --cw-loader-year-bottom-offset: calc(1rem + env(safe-area-inset-bottom));
  }
}
@supports (bottom: constant(safe-area-inset-bottom)) {
  .cw-loader {
    --cw-loader-year-bottom-offset: calc(1rem + constant(safe-area-inset-bottom));
  }
}
.cw-loader-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.0625rem;
  background: transparent;
  transform: translateY(-50%);
}
.cw-loader-line-fill {
  width: 0;
  height: 100%;
  background: var(--cw-fg);
  transform-origin: 100% 50%;
}
.cw-loader-year {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  letter-spacing: 0;
  font-size: clamp(1.2rem, 1.7vmin, 1.8rem);
  line-height: 1;
  padding: 0 1rem;
  background-color: var(--bgcolor, #fff);
  color: var(--cw-fg);
  opacity: 0;
  transform: translateY(-50%);
  transition:
    opacity var(--cw-loader-year-fade, 560ms) ease,
    font-size 420ms ease;
  will-change: left, top, opacity, transform, font-size;
}
body.is-loading .cw-loader-year {
  font-size: clamp(2rem, 4.2vmin, 4.4rem);
}
.cw-loader.is-year-layout-animated .cw-loader-year {
  transition:
    opacity var(--cw-loader-year-fade, 560ms) ease,
    top var(--cw-loader-year-position-dur, 520ms) ease,
    transform var(--cw-loader-year-position-dur, 520ms) ease,
    font-size 420ms ease;
}
.cw-loader-year.is-visible {
  opacity: 1;
}
.cw-loader-start-year {
  left: 0;
}
@media (max-width: 767px) {
  body.is-loading .cw-loader-year {
    font-size: clamp(1.55rem, 6.5vw, 2.2rem);
  }
}

.cw-logo {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 21;
  color: var(--cw-fg);
  opacity: 0;
  transition: opacity var(--cw-logo-fade, 560ms) ease;
}
.cw-logo.is-visible {
  opacity: 1;
}
.cw-logo svg {
  display: block;
  width: clamp(8rem, 2vmin, 14rem);
  height: auto;
  fill: currentColor;
  line-height: 0;
}
.cw-logo h1 {
  margin-top: 0.75rem;
}

.cw-title-sub {
  position: fixed;
  right: 1rem;
  top: 5rem;
  z-index: 11;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--cw-fg);
  font-size: clamp(0.8rem, 1.7vmin, 1.4rem);
  letter-spacing: 0.08rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity var(--cw-title-sub-fade, 560ms) ease;
}
.cw-title-sub.is-visible {
  opacity: 1;
}

.cw-nav{
  display: flex;
  position: fixed;
  right: 5rem;
  top: 1rem;
  z-index: 11;
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cw-nav-fade, 560ms) ease;
}
.cw-nav.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.cw-nav li{
  margin-left: 1rem;
}
.cw-nav li:first-child{
  margin-left: 0;
}

.cw-celebration{
  display: flex;
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 11;
  font-size: clamp(2.2rem, 2.1vmin, 3.1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cw-celebration-fade, 560ms) ease;
}
.cw-celebration.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.cw-celebration a {
  display: inline-block;
  cursor: pointer;
  transform-origin: 50% 50%;
}
.cw-celebration.is-popping a {
  animation: cw-celebration-pop var(--cw-celebration-pop-dur, 360ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cw-celebration-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.78); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.cw-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.cw-balloon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 49;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  animation-name: cw-balloon-fall;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.cw-balloon-inner {
  display: inline-block;
  will-change: transform;
  animation-name: cw-balloon-sway;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.cw-balloon-img {
  display: block;
  height: auto;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes cw-balloon-fall {
  0%   { transform: translateY(-20vh); }
  100% { transform: translateY(120vh); }
}
@keyframes cw-balloon-sway {
  0%   { transform: translateX(calc(var(--cw-sway, 60px) * -1)) rotate(-12deg); }
  100% { transform: translateX(var(--cw-sway, 60px)) rotate(12deg); }
}

.cw-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  opacity: 1;
  transition: opacity var(--cw-stage-fade, 420ms) ease;
}
.cw-stage.is-dragging { cursor: grabbing; }
body.is-loading .cw-stage {
  opacity: 0;
  pointer-events: none;
}

.cw-wheel-hitarea {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: var(--cw-size, 37.5rem);
  height: var(--cw-size, 37.5rem);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  touch-action: none;
}
body.popeye-50interviews-single .cw-stage {
  cursor: default;
  overscroll-behavior: auto;
  pointer-events: none;
  touch-action: auto;
}
body.popeye-50interviews-single .cw-wheel-hitarea {
  cursor: grab;
  pointer-events: auto;
}
body.popeye-50interviews-single .cw-stage.is-dragging .cw-wheel-hitarea {
  cursor: grabbing;
}
@media (max-width: 767px) {
  body.popeye-50interviews-single .cw-stage {
    height: calc(var(--cw-size, 37.5rem) + 4rem);
    max-height: 100dvh;
  }
}

.cw-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw-size, 37.5rem);
  height: var(--cw-size, 37.5rem);
  transform: translate(-50%, -50%) rotate(var(--cw-rotation, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.cw-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--cw-fg);
  font-size: clamp(1rem, 2vmin, 1.25rem);
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0;
}
.cw-empty[hidden] {
  display: none;
}
.cw-stage.is-empty {
  cursor: default;
}
/* 個別インタビューページが準備中（公開インタビュー0件）のときは、下部wheelを丸ごと非表示にする。
   ABOUT/INDEXの配線にwheelのDOMが必要なためマークアップ自体は出力し、視覚的にだけ隠す。 */
body.popeye-50interviews-single .cw-stage.is-empty { display: none; }
body.popeye-50interviews-single .rowm-4:has(> .cw-stage.is-empty) { display: none; }

.cw-word {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  margin-top: -0.5rem;
  white-space: nowrap;
  font-size: var(--cw-word-size, clamp(8px, 1.7vmin, 20px));
  line-height: 1;
  color: #cccccc;
  text-align: left;
  transform-origin: 0 50%;
  transition: color 160ms ease;
  transform:
    rotate(var(--angle, 0deg))
    translateX(var(--cw-radius, 18.75rem))
    translateX(-100%);
}
.cw-word.is-current {
  color: var(--cw-fg);
}
@media (max-width: 767px) {
  .cw-word {
    font-size: var(--cw-word-size, clamp(10px, 2.9vmin, 13px));
  }
}

.cw-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--cw-size, 31.25rem) * 0.4);
  height: calc(var(--cw-size, 31.25rem) * 0.4);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.cw-center-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 50%;
  transition:
    opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cw-center.is-modal-active .cw-center-img-wrap {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cw-center-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}
.cw-center-img.is-loaded {
  opacity: 1;
}

.cw-center-name {
  margin-top: 0.3rem;
  font-weight: bold;
  min-height: 1rem;
}

.cw-modal[hidden] {
  display: none;
}
.cw-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.36);
  opacity: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: opacity 700ms ease;
}
.cw-modal.is-open .cw-modal-backdrop {
  opacity: 1;
}
.cw-modal.is-closing .cw-modal-backdrop {
  opacity: 0;
  transition: opacity 600ms ease;
}
.cw-modal-panel {
  --cw-card-bg: #fffaf0;
  --cw-card-fg: #111111;
  position: relative;
  background: var(--cw-card-bg);
  color: var(--cw-card-fg);
  padding: clamp(1rem, 3vw, 1.5rem);
  width: min(calc(100% - 2rem), 34rem);
  max-height: calc(100dvh - 2rem);
  margin: 0 1rem 1rem;
  overflow: auto;
  border: 2px solid var(--cw-card-fg);
  border-radius: 1.6rem;
  box-shadow:
    0 1.2rem 3rem rgba(0, 0, 0, 0.18),
    0 0.35rem 0 rgba(17, 17, 17, 0.14);
  transform: translateY(calc(100% + 2rem)) rotate(3deg) scale(0.98);
  transform-origin: 50% 100%;
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.cw-modal.is-open .cw-modal-panel {
  transform: translateY(0) rotate(0deg) scale(1);
}
.cw-modal.is-closing .cw-modal-panel {
  transform: translate(calc(-50vw - 50% - 2rem), calc(100% + 3rem)) rotate(-10deg) scale(0.96);
  transition: transform 680ms cubic-bezier(0.5, 0, 0.85, 0.4);
}
.cw-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--cw-card-bg);
  border: 2px solid var(--cw-card-fg);
  border-radius: 999px;
  box-shadow: 0 0.2rem 0 rgba(17, 17, 17, 0.14);
  color: var(--cw-card-fg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.cw-modal-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: min(46dvh, 22rem);
  object-fit: contain;
  background: #ffffff;
  border: 2px solid var(--cw-card-fg);
  border-radius: 1rem;
  margin-bottom: 1.15rem;
}
.cw-modal-name {
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.cw-modal-word {
  font-size: 0.88rem;
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}
.cw-modal-profile {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  white-space: pre-line;
}
.cw-modal-link {
  display: inline-block;
  background: var(--cw-card-fg);
  border: 1px solid var(--cw-card-fg);
  border-radius: 999px;
  color: var(--cw-card-bg);
  font-size: 0.92rem;
  line-height: 1;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.cw-modal-link:hover,
.cw-modal-link:focus-visible {
  background: var(--cw-card-bg);
  color: var(--cw-card-fg);
}
.cw-modal-link[hidden] {
  display: none;
}
.cw-modal-coming-soon {
  color: var(--cw-card-fg);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.cw-modal-coming-soon[hidden] {
  display: none;
}

.cw-about[hidden],
.cw-index[hidden] {
  display: none;
}
.cw-about,
.cw-index {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--cw-bg);
  color: var(--cw-fg);
  padding: 6rem 2rem 4rem;
  opacity: 0;
  transition: opacity 480ms ease;
}
.cw-about {
  display: flex;
  overflow: auto;
}
.cw-index {
  display: block;
  overflow: auto;
}
.cw-about.is-open,
.cw-index.is-open {
  opacity: 1;
}
.cw-about-inner {
  width: 100%;
  max-width: none;
  margin: auto 0;
}
.cw-index-inner {
  max-width: 90rem;
  width: 100%;
  margin: 0 auto;
}
.cw-about-title,
.cw-index-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vmin, 2.6rem);
  font-weight: bold;
  letter-spacing: 0.06em;
  margin-bottom: 3rem;
  line-height: 1;
}
.cw-about-text {
  font-size: clamp(0.95rem, 1.8vmin, 1.15rem);
  line-height: 1.9;
}
.cw-about-content {
  width: 100%;
}
.cw-index-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3rem 1.5rem;
}
.cw-index-item {
  display: block;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--cw-fg);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}
.cw-index-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.35rem;
}
.cw-index-item:hover .cw-index-name,
.cw-index-item:focus-visible .cw-index-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cw-index-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 0.55rem;
}
.cw-index-name {
  text-align: center;
  display: block;
  font-size: 0.92rem;
  font-weight: bold;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 1023px) {
  .cw-index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 0.7rem;
  }
}
@media (max-width: 520px) {
  .cw-index {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .cw-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 0.7rem;
  }
  .cw-index-name {
    font-size: 0.82rem;
  }
}
.cw-about-close,
.cw-index-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  color: var(--cw-fg);
}
.cw-about-bottom,
.cw-index-bottom {
  margin-top: 2.5rem;
  text-align: center;
}
.cw-about-close-bottom,
.cw-index-close-bottom {
  background: transparent;
  border: 1px solid var(--cw-fg);
  color: var(--cw-fg);
  font: inherit;
  font-size: clamp(0.85rem, 1.5vmin, 1rem);
  letter-spacing: 0.1em;
  line-height: 1;
  cursor: pointer;
  padding: 0.85rem 2.4rem;
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease;
}
.cw-about-close-bottom:hover,
.cw-about-close-bottom:focus-visible,
.cw-index-close-bottom:hover,
.cw-index-close-bottom:focus-visible {
  background: var(--cw-fg);
  color: var(--cw-bg);
}

body.is-about-open .cw-stage,
body.is-about-open .cw-title-sub,
body.is-about-open .cw-celebration,
body.is-index-open .cw-stage,
body.is-index-open .cw-title-sub,
body.is-index-open .cw-celebration {
  opacity: 0;
  pointer-events: none;
}