@charset "UTF-8";
/* ==========================================================================
   GREENROOM CO. ／ 共通スタイル（全ページ）
   - モバイルファースト（min-width で上書き。max-width は使わない）
   - 色・書体・文字サイズ・寸法は :root の変数で一括管理（値を足すときは _style_rules.md も直す）
   - PCはデザイン（幅1366px）の 1px を --u とし、画面幅に合わせて伸び縮みさせる
   ========================================================================== */

:root {
  /* 色（デザインPDFから実測） */
  --c-bg: #f9f8f3;        /* 地の色（オフホワイト） */
  --c-ink: #3f3a3a;       /* 文字・罫線の基本色 */
  --c-ink-deep: #231916;  /* WE MAKES の大きい文字 */
  --c-gray: #5f6060;      /* WEBボタン・協賛/出店ボタン・SNSアイコン */
  --c-dot: #716c74;       /* スライドの点 */
  --c-teal: #4bbbb4;      /* ロゴ・強調・ホバー */
  --c-white: #fff;

  /* 書体
     英字は Sofia Sans Condensed（Google Fonts・無料）。2026-11-08 松下さん指定で仮決め
     字の高さは font-size-adjust でデザインの SF Pro と同じ（大文字の高さ＝文字サイズの0.704倍）にそろえる */
  --ff-en: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --ff-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --fw-display: 800;   /* 大見出し（デザインの SF Pro Compressed Heavy） */
  --fw-title: 700;     /* 名称（SF Pro Compressed Bold） */
  --fw-ui: 500;        /* メニュー・ボタン（SF Pro Regular / Semibold） */
  --fw-light: 300;     /* 和文の本文 */
  --cap: cap-height 0.704;

  /* 文字サイズ（この段階だけを使う。スマホの値。PCは下の @media で上書き）
     英字の見出し   d1 大見出し／d2 下層のページ見出し／d3 WE MAKES・NEWS帯／d4 下層の小見出し・PICK UP／d5 名称
     和文           xl キャッチ／h3 小見出し／h4 さらに小さい見出し／l 導入文／m 本文／s 補足・ラベル／xs 注記・ボタン */
  --fz-d1: calc(var(--s) * 96);
  --fz-d2: calc(var(--s) * 60);
  --fz-d3: calc(var(--s) * 52);
  --fz-d4: calc(var(--s) * 40);
  --fz-d5: 2.6rem;
  --fz-xl: 1.8rem;
  --fz-h3: 1.6rem;
  --fz-h4: 1.5rem;
  --fz-l: 1.4rem;
  --fz-m: 1.3rem;
  --fz-s: 1.2rem;
  --fz-xs: 1.1rem;
  --fz-nav: 1.6rem;    /* 英字のメニュー・READ NOW */
  --fz-btn: 1.3rem;    /* WEBボタン */

  /* 行の高さ・字間 */
  --lh-tight: 1.1;   /* 英字の見出し */
  --lh-head: 1.5;    /* 和文の見出し */
  --lh-body: 1.8;    /* 本文 */
  --lh-lead: 2;      /* 導入文 */
  --ls-body: 0.04em;
  --ls-lead: 0.06em;

  /* 寸法：スマホは 390px 幅を基準にした 1px（--s）。タブレット幅で英字が大きくなりすぎないよう 600px で止める */
  --s: calc(min(100vw, 600px) / 390);
  --gutter: 2rem;
  --header-h: 6rem;

  /* 動き */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);
}
@media (min-width: 1024px) {
  :root {
    /* PC：デザイン 1366px の 1px。1600px より広い画面ではそれ以上大きくしない */
    --u: calc(min(100vw, 1600px) / 1366);
    --gutter: calc(var(--u) * 42);
    --header-h: calc(var(--u) * 96);

    --fz-d1: calc(var(--u) * 204);
    --fz-d2: calc(var(--u) * 120);
    --fz-d3: calc(var(--u) * 107);
    --fz-d4: calc(var(--u) * 56);
    --fz-d5: calc(var(--u) * 32);
    --fz-xl: max(1.8rem, calc(var(--u) * 28));
    --fz-h3: max(1.6rem, calc(var(--u) * 22));
    --fz-h4: max(1.5rem, calc(var(--u) * 18));
    --fz-l: max(1.4rem, calc(var(--u) * 16));
    --fz-m: max(1.3rem, calc(var(--u) * 15));
    --fz-s: max(1.2rem, calc(var(--u) * 14));
    --fz-xs: max(1.1rem, calc(var(--u) * 12));
    --fz-nav: max(1.4rem, calc(var(--u) * 20));
    --fz-btn: max(1.2rem, calc(var(--u) * 18));
  }
}

/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }

body {
  font-family: var(--ff-ja);
  font-size: var(--fz-m);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }

.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 英字の書体（3種類） */
.f-display { font-family: var(--ff-en); font-weight: var(--fw-display); font-size-adjust: var(--cap); line-height: 1; letter-spacing: 0.01em; }
.f-title { font-family: var(--ff-en); font-weight: var(--fw-title); font-size-adjust: var(--cap); line-height: 1.07; letter-spacing: 0.01em; }
.f-en { font-family: var(--ff-en); font-weight: var(--fw-ui); font-size-adjust: var(--cap); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   ロゴ（SVG の symbol を use で呼ぶ。色は color で変える）
   -------------------------------------------------------------------------- */
.c-logo { display: block; width: 100%; height: auto; fill: currentColor; }

/* --------------------------------------------------------------------------
   スロット風のホバー（メニュー・ヒーローの項目）
   文字が上に抜け、下から緑の同じ文字が入ってくる
   -------------------------------------------------------------------------- */
.c-slot { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.c-slot__in { position: relative; display: block; transition: transform 0.6s var(--ease); }
.c-slot__in > span { display: block; }
.c-slot__dup { position: absolute; left: 0; top: 100%; color: var(--c-teal); }
a:active .c-slot__in { transform: translateY(-100%); }
@media (hover: hover) and (min-width: 1024px) {
  a:hover .c-slot__in { transform: translateY(-100%); }
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.l-header {
  position: fixed; z-index: 100; inset: 0 0 auto;
  height: var(--header-h);
  color: var(--c-ink);
  transition: transform 0.6s var(--ease), color 0.4s;
}
.l-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(249 248 243 / 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.4s;
}
.l-header.is-scrolled::before { opacity: 1; }
.l-header.is-over { color: var(--c-bg); }
.l-header.is-over::before { opacity: 0; }
.l-header.is-hidden { transform: translateY(-100%); }
.is-menu-open .l-header { transform: none; color: var(--c-bg); }
.is-menu-open .l-header::before { opacity: 0; }

.l-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 var(--gutter);
}
.l-header__logo { position: relative; z-index: 2; display: block; width: 12.8rem; }
@media (min-width: 1024px) {
  .l-header__logo { width: calc(var(--u) * 146); }
}

/* メニューボタン（スマホ・タブレット） */
.l-header__menu { position: relative; z-index: 2; width: 4.4rem; height: 4.4rem; margin-right: -1rem; }
.l-header__menu-line {
  position: absolute; left: 1rem; width: 2.4rem; height: 1.5px; background: currentColor;
  transition: transform 0.5s var(--ease), top 0.5s var(--ease);
}
.l-header__menu-line:nth-child(1) { top: 1.8rem; }
.l-header__menu-line:nth-child(2) { top: 2.6rem; }
.is-menu-open .l-header__menu-line:nth-child(1) { top: 2.2rem; transform: rotate(20deg); }
.is-menu-open .l-header__menu-line:nth-child(2) { top: 2.2rem; transform: rotate(-20deg); }
@media (min-width: 1024px) {
  .l-header__menu { display: none; }
}

/* グローバルナビ：スマホは全画面のパネル、PCは横並び */
.l-gnav {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem;
  background: var(--c-ink); color: var(--c-bg);
  visibility: hidden; opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-in-out), opacity 0s 0.8s, visibility 0s 0.8s;
}
.is-menu-open .l-gnav {
  visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s var(--ease-in-out);
}
.l-gnav__list { display: grid; gap: 0.4rem; }
.l-gnav__link { display: inline-block; font-size: var(--fz-d4); font-weight: var(--fw-display); line-height: 1.1; }
.l-gnav__item { overflow: hidden; }
.l-gnav__item .c-slot { transform: translateY(105%); transition: transform 0.8s var(--ease); }
.is-menu-open .l-gnav__item .c-slot { transform: none; }
.is-menu-open .l-gnav__item:nth-child(1) .c-slot { transition-delay: 0.25s; }
.is-menu-open .l-gnav__item:nth-child(2) .c-slot { transition-delay: 0.3s; }
.is-menu-open .l-gnav__item:nth-child(3) .c-slot { transition-delay: 0.35s; }
.is-menu-open .l-gnav__item:nth-child(4) .c-slot { transition-delay: 0.4s; }
.is-menu-open .l-gnav__item:nth-child(5) .c-slot { transition-delay: 0.45s; }
.is-menu-open .l-gnav__item:nth-child(6) .c-slot { transition-delay: 0.5s; }
.is-menu-open .l-gnav__item:nth-child(7) .c-slot { transition-delay: 0.55s; }
.l-gnav__sns { display: flex; gap: 2rem; margin-top: 3.2rem; }
.l-gnav__sns a { display: block; width: 2.6rem; transition: color 0.3s; }
.l-gnav__sns svg { width: 100%; height: auto; fill: currentColor; }
.l-gnav__sns a:active { color: var(--c-teal); }

@media (min-width: 1024px) {
  .l-gnav {
    position: static; flex-direction: row; align-items: center; gap: calc(var(--u) * 34);
    padding: 0; background: none; color: inherit;
    visibility: visible; opacity: 1; clip-path: none; transition: none;
  }
  .l-gnav__list { display: flex; gap: calc(var(--u) * 22); }
  .l-gnav__item { overflow: visible; }
  .l-gnav__item .c-slot { transform: none; transition: none; }
  .l-gnav__link { font-size: var(--fz-nav); font-weight: var(--fw-ui); letter-spacing: 0.04em; }
  .l-gnav__link[aria-current="page"] { color: var(--c-teal); }
  .l-gnav__sns { gap: calc(var(--u) * 36); margin-top: 0; }
  .l-gnav__sns a { width: calc(var(--u) * 27); }
}
@media (hover: hover) and (min-width: 1024px) {
  .l-gnav__sns a:hover { color: var(--c-teal); }
}

/* --------------------------------------------------------------------------
   フッター（SAVE THE OCEAN. ＋ グループのロゴ ＋ コピーライト）
   -------------------------------------------------------------------------- */
.l-footer { padding: 6.4rem var(--gutter) 3.2rem; text-align: center; overflow: hidden; }
.l-footer__copy { font-size: calc(var(--s) * 50); white-space: nowrap; }
.l-footer__logos {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center;
  gap: 2.8rem 2rem; margin: 4.8rem auto 0; max-width: 34rem;
}
.l-footer__logos a { display: block; transition: opacity 0.3s; }
.l-footer__logos img { width: auto; }
.l-footer__logo--grco { width: 11rem; color: var(--c-teal); }
.l-footer__rights { margin-top: 4.8rem; font-family: var(--ff-en); font-size: var(--fz-xs); letter-spacing: 0.06em; }
.l-footer__rights small { font-size: inherit; }
@media (min-width: 1024px) {
  .l-footer { padding: calc(var(--u) * 60) 0 calc(var(--u) * 48); }
  .l-footer__copy { font-size: var(--fz-d1); }
  .l-footer__logos { display: flex; justify-content: center; gap: calc(var(--u) * 40); max-width: none; margin-top: calc(var(--u) * 56); }
  .l-footer__logo--grco { width: calc(var(--u) * 158); }
  .l-footer__rights { margin-top: calc(var(--u) * 72); }
}
@media (hover: hover) and (min-width: 1024px) {
  .l-footer__logos a:hover { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   部品：ボタン
   -------------------------------------------------------------------------- */
/* WEB（枠線の丸ボタン） */
.c-btn-web {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 5.6rem; height: 2.6rem; padding: 0 1rem;
  border: 1.5px solid var(--c-gray); border-radius: 99px;
  font-family: var(--ff-en); font-weight: 600; font-size: var(--fz-btn); font-size-adjust: var(--cap); letter-spacing: 0.02em;
  color: var(--c-gray); line-height: 1;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.c-btn-web:active { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
@media (min-width: 1024px) {
  .c-btn-web { min-width: calc(var(--u) * 70); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-width: max(1.5px, calc(var(--u) * 2)); }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-btn-web:hover { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
}

/* Instagram などのアイコンリンク */
.c-btn-icon { display: block; width: 2.6rem; color: var(--c-gray); transition: color 0.3s; }
.c-btn-icon svg { width: 100%; height: auto; fill: currentColor; }
.c-btn-icon:active { color: var(--c-teal); }
@media (min-width: 1024px) {
  .c-btn-icon { width: calc(var(--u) * 30); }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-btn-icon:hover { color: var(--c-teal); }
}

/* 協賛お問合せ・出店お問合せ（塗りの小さい丸ボタン） */
.c-btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 10.4rem; height: 2.4rem; padding: 0 1rem; border-radius: 99px;
  background: var(--c-gray); color: var(--c-bg);
  font-size: var(--fz-xs); font-weight: 700; letter-spacing: 0.05em; line-height: 1;
  transition: background-color 0.3s;
}
.c-btn-pill:active { background: var(--c-teal); }
@media (min-width: 1024px) {
  .c-btn-pill { min-width: calc(var(--u) * 120); height: max(2rem, calc(var(--u) * 22)); padding: 0 calc(var(--u) * 10); }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-btn-pill:hover { background: var(--c-teal); }
}

/* --------------------------------------------------------------------------
   部品：スライドの矢印と点
   -------------------------------------------------------------------------- */
.c-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; color: var(--c-ink);
  transition: transform 0.4s var(--ease), opacity 0.3s, color 0.3s;
}
.c-arrow svg { width: 3.2rem; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
.c-arrow--prev svg { transform: scaleX(-1); }
.c-arrow.swiper-button-disabled { opacity: 0.25; pointer-events: none; }
@media (min-width: 1024px) {
  .c-arrow { width: calc(var(--u) * 60); height: calc(var(--u) * 60); }
  .c-arrow svg { width: calc(var(--u) * 50); }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-arrow:hover { color: var(--c-teal); }
  .c-arrow--next:hover { transform: translateX(6px); }
  .c-arrow--prev:hover { transform: translateX(-6px); }
}

.c-dots { display: flex; justify-content: center; gap: 1.2rem; }
.c-dots__dot {
  display: block; width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid var(--c-dot); cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.c-dots__dot.is-active { background: var(--c-dot); }
@media (min-width: 1024px) {
  .c-dots { gap: calc(var(--u) * 23); }
  .c-dots__dot { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-dots__dot:hover { border-color: var(--c-teal); }
}

/* --------------------------------------------------------------------------
   部品：英字の大見出し（FESTIVAL / MUSIC … ）と説明文
   -------------------------------------------------------------------------- */
.c-sec-head { padding: 6.4rem var(--gutter) 5.6rem; text-align: center; }
.c-sec-head__title { font-size: var(--fz-d1); }
.c-sec-head__lead { margin-top: 2rem; font-size: var(--fz-l); font-weight: var(--fw-light); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); }
@media (min-width: 1024px) {
  .c-sec-head { padding: calc(var(--u) * 60) 0 calc(var(--u) * 86); }
  .c-sec-head__lead { margin-top: calc(var(--u) * 28); }
}

/* 罫線ではさんだ見出し（NEWS） */
.c-band-head { display: flex; align-items: center; justify-content: center; height: 8rem; border-block: 1px solid var(--c-ink); }
.c-band-head__title { font-size: var(--fz-d3); }
@media (min-width: 1024px) {
  .c-band-head { height: calc(var(--u) * 137); }
}

/* 1文字ずつせり上がる動き（JSで分割） */
.c-split { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.c-split__char { display: inline-block; }

/* JSが動かない・動きを減らす設定のときは、最初から見せる */
.is-static [data-reveal] { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
.is-static *, .is-static *::before, .is-static *::after { transition: none !important; }
html.js:not(.is-static) [data-reveal="up"] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}