@charset "UTF-8";
/* ==========================================================================
   GREENROOM CO. ／ トップページ
   PCの寸法はデザイン（幅1366px）の値を calc(var(--u) * 値) で書く。文字サイズは common.css の --fz-* だけを使う
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヒーロー（写真が右から左へ流れ、次の写真が右から入ってくる＋ロゴ＋項目）
   -------------------------------------------------------------------------- */
.p-hero { position: relative; height: 100svh; min-height: 56rem; overflow: hidden; color: var(--c-bg); background: #0d0d0e; }
.p-hero__media { position: absolute; inset: 0; }
.p-hero__slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.p-hero__slide.is-active { visibility: visible; }
.p-hero__slide img { position: absolute; left: 0; top: 0; width: 112%; max-width: none; height: 100%; object-fit: cover; }
.p-hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.4) 100%);
}
.p-hero__logo { position: absolute; z-index: 3; left: 50%; top: 50%; width: 80vw; transform: translate(-50%, -50%); color: var(--c-teal); }
.p-hero__cats { position: absolute; z-index: 3; left: var(--gutter); bottom: 3.2rem; font-size: 1.5rem; line-height: 1.6; }
.p-hero__cat { overflow: hidden; }
@media (min-width: 1024px) {
  .p-hero { min-height: calc(var(--u) * 700); }
  .p-hero__logo { width: calc(var(--u) * 900); }
  .p-hero__cats { left: calc(var(--u) * 49); bottom: calc(var(--u) * 48); font-size: calc(var(--u) * 24); line-height: 1.55; }
}

/* --------------------------------------------------------------------------
   WE MAKES ＿＿ FESTIVAL（枠の中の単語がスロットのように入れ替わる）
   --k … この区画だけの1px。PCはデザインの1px、スマホはデザインを0.29倍に縮めた1px
   枠の幅は一番長い単語に合わせ、単語は枠の左右中央。枠より上に抜けた単語は枠の上端で切れて見えなくなる
   -------------------------------------------------------------------------- */
/* 文字の大きさ --fs を決めれば、枠の高さ・単語の間隔・単語の上下位置はその比率で決まる（Sofia Sans Condensed は字幅が広いので、デザインと同じ横幅に収まる 92 にしている） */
.p-intro { --k: calc(var(--s) * 0.29); --fs: calc(var(--k) * 92); --box: calc(var(--fs) * 0.897); --step: calc(var(--fs) * 0.785); padding: 9.6rem var(--gutter); text-align: center; }
@media (min-width: 1024px) {
  .p-intro { --k: var(--u); padding: calc(var(--u) * 192) 0 calc(var(--u) * 170); }
}
.p-intro__phrase {
  display: flex; justify-content: center; align-items: flex-start;
  height: calc(var(--box) + var(--step) * 4);
  color: var(--c-ink-deep); font-size: var(--fs);
}
.p-intro__we, .p-intro__fes { line-height: var(--box); white-space: nowrap; }
.p-intro__slot { position: relative; flex: none; height: var(--box); padding: 0 calc(var(--k) * 26); margin: 0 calc(var(--k) * 16); }
.p-intro__slot::before { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--c-ink-deep); pointer-events: none; }
.p-intro__sizer { display: block; height: 0; overflow: hidden; visibility: hidden; line-height: var(--step); white-space: nowrap; }
/* 見える範囲＝枠の上端から、下に続く4語の最後の行の下端まで（6語目は見せない） */
.p-intro__window { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--box) * 0.1 + var(--step) * 4.92); overflow: hidden; }
/* 大文字の上端〜下端が枠の上下中央に来る位置（Sofia Sans Condensed の字の高さから計算） */
.p-intro__words { position: absolute; left: 0; right: 0; top: calc(var(--box) * 0.1); will-change: transform; }
.p-intro__word { display: block; height: var(--step); line-height: var(--step); white-space: nowrap; transition: color 0.6s; }
.p-intro__word.is-current { color: var(--c-teal); }
.p-intro__window.is-jump .p-intro__word { transition: none; }
.p-intro__catch { margin-top: calc(var(--k) * 88); font-size: var(--fz-xl); font-weight: 400; letter-spacing: var(--ls-body); line-height: var(--lh-head); }
.p-intro__catch .f-en { font-size-adjust: none; letter-spacing: 0.02em; }
.p-intro__text { margin-top: 2.4rem; font-size: var(--fz-l); font-weight: var(--fw-light); line-height: 2.2; letter-spacing: var(--ls-lead); }
@media (min-width: 1024px) {
  .p-intro__text { margin-top: calc(var(--u) * 28); }
}

/* --------------------------------------------------------------------------
   NEWS（PCは矢印の内側に3枚ちょうど。端で切れたカードは見せない）
   -------------------------------------------------------------------------- */
.p-news { border-bottom: 1px solid var(--c-ink); }
.p-news__body { position: relative; padding: 3.2rem 0; }
.p-news__body .swiper { padding: 0 var(--gutter); }
.p-news__item { display: block; }
.p-news__thumb {
  position: relative; aspect-ratio: 376 / 446; border-radius: 0.6rem; overflow: hidden;
  border: 1px solid var(--c-ink); box-shadow: 0.6rem 0.6rem 0 var(--c-ink); margin-right: 0.6rem;
}
.p-news__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.p-news__date { display: block; margin-top: 2.2rem; font-family: var(--ff-en); font-size: var(--fz-s); letter-spacing: 0.06em; }
.p-news__title { margin-top: 0.4rem; font-size: var(--fz-d5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-news__title .ja { font-family: var(--ff-ja); font-weight: 600; font-size: 0.875em; }
.p-news__excerpt {
  margin-top: 0.8rem; font-size: var(--fz-m); font-weight: var(--fw-light); line-height: 1.7; letter-spacing: var(--ls-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-news__more { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1rem; font-size: var(--fz-nav); transition: color 0.3s; }
.p-news__more svg { width: 2.6rem; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 0.5s var(--ease); }
.p-news__nav { display: none; }
.p-news__dots { margin-top: 2.8rem; }
@media (min-width: 1024px) {
  .p-news__body { padding: calc(var(--u) * 58) 0 calc(var(--u) * 24); }
  .p-news__body .swiper { padding: 0; margin: 0 calc(var(--u) * 67); }
  .p-news__thumb { border-radius: calc(var(--u) * 8); box-shadow: calc(var(--u) * 8) calc(var(--u) * 8) 0 var(--c-ink); margin-right: calc(var(--u) * 8); }
  .p-news__date { margin-top: calc(var(--u) * 28); }
  .p-news__title { margin-top: calc(var(--u) * 2); }
  .p-news__excerpt { margin-top: calc(var(--u) * 10); }
  .p-news__more { margin-top: calc(var(--u) * 4); }
  .p-news__more svg { width: calc(var(--u) * 34); }
  .p-news__nav {
    display: flex; justify-content: space-between; position: absolute; z-index: 2;
    left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * (58 + 223 - 30));
    pointer-events: none;
  }
  .p-news__nav .c-arrow { pointer-events: auto; }
  .p-news__dots { margin-top: calc(var(--u) * 34); }
}
@media (hover: hover) and (min-width: 1024px) {
  .p-news__item:hover .p-news__thumb img { transform: scale(1.05); }
  .p-news__item:hover .p-news__more { color: var(--c-teal); }
  .p-news__item:hover .p-news__more svg { transform: translateX(6px); }
}

/* --------------------------------------------------------------------------
   実績（FESTIVAL / MUSIC / ART / SPORTS / CULTURE / MARKET）
   並べ方は5種類（.c-work--wide / --split / --split-r / --half / --quarter）
   -------------------------------------------------------------------------- */
.p-works { scroll-margin-top: var(--header-h); }
.p-works__grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--c-ink); }
@media (min-width: 1024px) {
  .p-works__grid { grid-template-columns: 1fr 1fr; }
}

.c-work { position: relative; display: grid; border-bottom: 1px solid var(--c-ink); background: var(--c-bg); }
.c-work__media { position: relative; overflow: hidden; background: #ddd; }
.c-work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.c-work__body { position: relative; display: flex; flex-direction: column; gap: 1.6rem; padding: 1.6rem var(--gutter) 2rem; }
.c-work__title { font-size: var(--fz-d5); }
.c-work__title .ja { font-family: var(--ff-ja); font-weight: 600; font-size: 0.875em; }
.c-work__text { margin-top: 0.8rem; font-size: var(--fz-m); font-weight: var(--fw-light); line-height: 1.7; letter-spacing: 0.02em; }
.c-work__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.c-work__btns { display: flex; align-items: center; gap: 1rem; }
.c-work__pills { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* スマホ：「小さい横並び」だけは写真を左に置き、それ以外は写真→文字の縦積み */
.c-work--quarter { grid-template-columns: 40% 1fr; }
.c-work--quarter .c-work__media { min-height: 12rem; }
.c-work--quarter .c-work__body { padding: 1.2rem 1.6rem 1.6rem; gap: 1rem; }
.c-work--quarter .c-work__title { font-size: 2rem; }
.c-work--wide .c-work__media { aspect-ratio: 1366 / 760; }
.c-work--split .c-work__media, .c-work--split-r .c-work__media { aspect-ratio: 770 / 500; }
.c-work--half .c-work__media { aspect-ratio: 683 / 415; }

@media (min-width: 1024px) {
  .c-work { grid-column: span 2; }
  .c-work--half, .c-work--quarter { grid-column: span 1; }
  .c-work--left { border-right: 1px solid var(--c-ink); }   /* 2列の左側（HTMLを作るときに付ける） */

  .c-work__body {
    flex-direction: row; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 24);
    padding: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 32);
  }
  .c-work__text { margin-top: calc(var(--u) * 12); max-width: calc(var(--u) * 505); }
  .c-work__links { flex: none; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 9); }
  .c-work__btns { gap: calc(var(--u) * 10); }
  .c-work__pills { flex-direction: column; gap: calc(var(--u) * 7); }

  .c-work--wide .c-work__media { aspect-ratio: 1366 / 700; }
  .c-work--wide .c-work__body { min-height: calc(var(--u) * 175); align-items: flex-start; }
  .c-work--wide .c-work__links { align-self: flex-start; margin-top: calc(var(--u) * 30); }

  .c-work--split { grid-template-columns: calc(var(--u) * 770) 1fr; }
  .c-work--split-r { grid-template-columns: 1fr calc(var(--u) * 770); }
  .c-work--split-r .c-work__media { order: 2; }
  .c-work--split .c-work__media, .c-work--split-r .c-work__media { aspect-ratio: auto; height: calc(var(--u) * 505); }
  .c-work--split .c-work__body, .c-work--split-r .c-work__body {
    flex-direction: column; justify-content: space-between; align-items: stretch;
    padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 20);
  }
  .c-work--split-r .c-work__body { padding-left: calc(var(--u) * 38); }
  .c-work--split .c-work__links { align-self: flex-end; }
  .c-work--split-r .c-work__links { align-self: flex-start; align-items: flex-start; }
  .c-work--split .c-work__text, .c-work--split-r .c-work__text { max-width: calc(var(--u) * 520); }

  .c-work--half { grid-template-rows: auto 1fr; }
  .c-work--half .c-work__body { min-height: calc(var(--u) * 163); padding-top: calc(var(--u) * 10); align-items: flex-start; }
  .c-work--half .c-work__links { align-self: flex-end; }

  .c-work--quarter { grid-template-columns: calc(var(--u) * 380) 1fr; }
  .c-work--quarter .c-work__media { min-height: 0; height: calc(var(--u) * 284); }
  .c-work--quarter .c-work__body {
    flex-direction: column; justify-content: space-between; align-items: stretch;
    padding: calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 22); gap: calc(var(--u) * 10);
  }
  .c-work--quarter .c-work__title { font-size: var(--fz-d5); }
  .c-work--quarter .c-work__links { align-self: flex-end; }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-work:hover .c-work__media img { transform: scale(1.05); }
}

/* --------------------------------------------------------------------------
   PICK UP（縦長の動画・写真。自動で流れる）
   -------------------------------------------------------------------------- */
.p-pickup { padding: 4.8rem 0; border-bottom: 1px solid var(--c-ink); }
.p-pickup__title { text-align: center; font-size: var(--fz-d4); letter-spacing: 0.03em; }
.p-pickup__body { position: relative; margin-top: 2.8rem; }
.p-pickup__item { position: relative; display: block; aspect-ratio: 219 / 387; overflow: hidden; border-radius: 0.4rem; background: #222; }
.p-pickup__item img, .p-pickup__item video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.p-pickup__src {
  position: absolute; left: 1rem; bottom: 1rem; width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / 0.85); color: var(--c-white);
}
.p-pickup__src svg { width: 56%; height: auto; fill: currentColor; }
.p-pickup__nav { display: none; }
.p-pickup__dots { margin-top: 2.4rem; }
@media (min-width: 1024px) {
  .p-pickup { padding: calc(var(--u) * 48) 0 calc(var(--u) * 80); }
  .p-pickup__body { margin-top: calc(var(--u) * 60); }
  .p-pickup__item { border-radius: calc(var(--u) * 6); }
  .p-pickup__src { left: calc(var(--u) * 14); bottom: calc(var(--u) * 14); width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
  .p-pickup__nav {
    display: flex; justify-content: space-between; position: absolute; z-index: 2;
    left: calc(var(--u) * 28); right: calc(var(--u) * 28); top: 50%; transform: translateY(-50%); pointer-events: none;
  }
  .p-pickup__nav .c-arrow { pointer-events: auto; color: var(--c-white); filter: drop-shadow(0 0 6px rgb(0 0 0 / 0.4)); }
  .p-pickup__dots { margin-top: calc(var(--u) * 36); }
}
@media (hover: hover) and (min-width: 1024px) {
  .p-pickup__item:hover img, .p-pickup__item:hover video { transform: scale(1.05); }
}