/* 本文の等幅フォント：Liberation Mono（SIL Open Font License 1.1）
   Courier New と文字幅が同じなので、レイアウトはそのままで線だけがくっきりする */
@font-face {
  font-family: 'Liberation Mono';
  src: url('../fonts/liberation-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Liberation Mono';
  src: url('../fonts/liberation-mono-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 日本語：Noto Sans JP（SIL Open Font License 1.1）
   サイトで使っている文字だけを抜き出した軽いファイル。文字を足したら ?v= を変えて、古いファイルが端末に残らないようにする。入っていない文字は端末のゴシック体で出る */
@font-face {
  font-family: "Noto Sans JP";
  src: url('../fonts/noto-sans-jp-400.woff2?v=20261012') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url('../fonts/noto-sans-jp-500.woff2?v=20261012') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url('../fonts/noto-sans-jp-700.woff2?v=20261012') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   base.css
   全ページ共通のベーススタイル（レイアウト・ヘッダー・ナビ・
   モバイルメニュー・フッター・背景キャンバス）
   色はCSS変数化してあるので、テーマ違い（例: works.css）は
   :root の変数を上書きするだけで対応できます。
   ========================================================== */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: rgba(0, 0, 0, 0.4);
  --menu-bg: rgba(255, 255, 255, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  min-height: 100lvh;
  overflow-x: hidden;
  background: var(--bg);
  /* スマホでページの端を引っぱったときの「びよーん」と戻る動きを止める。
     これがあると、背景のキャンバスの外（白い地の色）が一瞬見えてしまうため */
  overscroll-behavior-y: none;
  /* スマホでリンクやボタンをタップしたときに、ブラウザが出す「うすい青の膜」を消す（サイト全体。メニューの開閉・メニューの項目など） */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: transparent;
  color: var(--fg);
  font-family: 'Liberation Mono', 'Courier New', monospace;
  margin: 0;
  min-height: 100%;
  min-height: 100lvh;
}

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  height: 100lvh;   /* スマホでアドレスバーが隠れて画面が縦に伸びても、下に白いすき間ができないように */
  pointer-events: none;
  z-index: -1;
  opacity: 0.88;
}

header {
  /* 下へスクロールすると隠れ、上へスクロールすると出てくるヘッダー（js/nav.js が切り替え） */
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 20px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.35s ease, box-shadow 0.35s ease;
}
/* ページの途中で出てきたときは、☰ メニューと同じすりガラスの背景を敷いて本文と重ならないように */
header.is-floating {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.is-floating { background: rgba(255, 255, 255, 0.92); }
}
header.is-hidden { transform: translateY(-100%); }
/* PC：ページを開いた時点から、ごく薄い白のすりガラスを敷く（スクロールで出てくる帯も同じ薄さにそろえる） */
@media (min-width: 601px) {
  header,
  header.is-floating {
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }
}
/* スマホ：途中で出てくる半透明の帯は細くして、下の画面を見やすく */
@media (max-width: 600px) {
  header.is-floating { padding-top: 4px; padding-bottom: 4px; }
  header.is-floating .hamburger { padding-top: 2px; padding-bottom: 2px; font-size: 28px; }
  header.is-floating h1.logo { font-size: clamp(1rem, 5.4vw, 1.45rem); }
}
@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
}

h1 {
  color: var(--fg);
  margin: 0;
  font-size: 2.1em;
  letter-spacing: 2px;
}

/* ロゴ：タップ／クリックするとトップ（index.html）にもどる。
   ロゴなので、リンクらしい反応（色・下線・薄くなる・タップ時の光・指のカーソル）は付けない */
header h1 a {
  color: inherit;
  text-decoration: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* ロゴ：カプセル（左：白に赤いハート／右：ラベンダー→水色の網点）＋社名 */
.logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  white-space: nowrap;
}
.logo-mark {
  display: block;
  height: 0.95em;
  width: auto;
  flex-shrink: 0;
  overflow: visible;
}
.logo-mark .lm-heart { fill: #ff4d5e; }  /* 線だけの過去側の半分に、赤いハート */
/* PC：ロゴとメニューの間に、ゆとりのある距離を保つ */
header h1.logo { font-size: clamp(1.5rem, 2.6vw, 2.1em); }
@media (max-width: 600px) {
  header h1.logo { font-size: clamp(1.15rem, 6.4vw, 1.7rem); letter-spacing: 1px; }
}

.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 32px;
  color: var(--fg);
  cursor: pointer;
  z-index: 100;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 32px;
  align-items: center;
}

nav ul li a {
  color: var(--fg);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 8px 0;
  letter-spacing: 0.4px;
  transition: opacity 0.2s ease;
}

nav ul li a:hover {
  opacity: 0.75;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 99;
  font-size: 1.8em;
  color: var(--fg);
}

/* backdrop-filter 非対応ブラウザ向けフォールバック（透過を弱めに） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu {
    background: rgba(255, 255, 255, 0.95);
  }
}

.mobile-menu.active {
  display: flex;
}

.mobile-menu a {
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.mobile-menu a:hover {
  opacity: 0.75;
}

.menu-close {
  position: absolute;
  top: 20px;
  right: 5%;
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
  padding: 10px;
  z-index: 101;
  transition: opacity 0.25s ease;
}

.menu-close:hover {
  opacity: 0.75;
}

/* メニューやロゴをタップ／クリックしたときに出る「ブラウザの選択枠」を消す。
   この枠は、キーボード（Tab）で移動する人のための印。
   ・指でさわるだけの機器（スマホ・タブレット）では、出さない（タップしたあとや、前のページから戻ったときに、枠が残って見えるため）
   ・マウスのあるパソコンでは、Tab で移動したときだけ出す（クリックでは出ない） */
header a:focus,
.hamburger:focus,
.mobile-menu a:focus,
.menu-close:focus {
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  header a:focus-visible,
  .hamburger:focus-visible,
  .mobile-menu a:focus-visible,
  .menu-close:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
  }
}

footer {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: 0.9em;
  position: relative;
  z-index: 2;
}

/* メニューが6項目（Sampler を追加）になり、横幅が足りないと右端が切れるので、
   1240px 以下は ☰ メニューに切り替える（ロゴにマークが付いて幅が増えたため。以前は 980px） */
@media (max-width: 1240px) {
  .hamburger { display: block; }
  nav, nav ul { display: none; }
}

/* ==========================================================
   flower-bg
   背景にゆっくり浮遊するハイビスカスの装飾レイヤー
   （全ページ共通。canvasのパーティクルより手前・本文コンテンツより奥）
   ========================================================== */

.flower-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.flower-bg img {
  position: absolute;
  will-change: transform;
  animation-name: floatFlower;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes floatFlower {
  0%   { transform: translate(0, 0) rotate(0deg) scale(var(--flower-scale, 1)); }
  25%  { transform: translate(var(--dx), calc(-1 * var(--dy))) rotate(var(--rot)) scale(var(--flower-scale, 1)); }
  50%  { transform: translate(calc(-1 * var(--dx)), 0) rotate(0deg) scale(var(--flower-scale, 1)); }
  75%  { transform: translate(0, var(--dy)) rotate(calc(-1 * var(--rot))) scale(var(--flower-scale, 1)); }
  100% { transform: translate(0, 0) rotate(0deg) scale(var(--flower-scale, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .flower-bg img { animation: none; }
}

/* ==========================================================
   英字の単語間：等幅フォント（Liberation Mono）は半角スペースも1文字分の幅があり、
   単語の間が空きすぎて見えるので、サイト全体で詰める。
   大きな見出しほど強く、本文・小さい文字は控えめに（日本語の文章には影響しない）
   ========================================================== */
h1, h2, h3,
.tagline,
.philosophy li,
.ph-finale li,
.about p {
  word-spacing: -0.4em;
}
/* 等幅でない書体（EB Garamond の「Pocket your dream.」など）は、ふつうの単語間に戻す */
.app-ad .ad-head { word-spacing: normal; }
.ad-more,
.ad-sound,
.demo-sound,
.more-row figcaption b,
.track-title,
#nowPlaying,
footer p {
  word-spacing: -0.25em;
}

/* ==========================================================
   各ページのタイトル（PHILOSOPHY / MUSIC / PRODUCT / INVADERS / ART / ABOUT）
   ヘッダーからの距離・大きさ・字間を全ページでそろえる
   ========================================================== */
:root { --title-gap: 56px; }
@media (max-width: 600px) { :root { --title-gap: 40px; } }
.philosophy, .product, .illustration, .about { padding-top: 0 !important; }
.game-page { padding-top: 0 !important; justify-content: flex-start !important; }
.game-page .game-container { margin-top: 0 !important; }
h2.page-title {
  margin-top: var(--title-gap) !important;
  font-size: clamp(1.7rem, 7.4vw, 2.6rem) !important;
  letter-spacing: 4px !important;
  line-height: 1.2 !important;
  text-align: center;
}

/* メニュー：ページのタイトル（PHILOSOPHY など）と同じ書体・太さ・字間にそろえる
   ― 等幅の Liberation Mono・太字・大文字・字間 0.1em（タイトルの 4px と同じ比率） */
nav ul li a,
.mobile-menu a {
  font-family: 'Liberation Mono', 'Courier New', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: normal;
}
nav ul li a { font-size: 1.12rem; }   /* PC のメニューは大きめに（以前は 0.92rem） */
.mobile-menu a { font-size: 1.4rem; }