/* ============================================
   共通リセット
   ============================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Zen Kaku Gothic New", "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ページテーマ（body class="page-xxx"） */
/* page-portfolio（404）・page-privacy はTOPページと同じネイビー×オレンジ配色。page-pianist・page-horror は現行デザインを維持（別途リニューアル予定のため変更しない） */
body.page-portfolio { background: #FFFFFF; color: #172E4A; }
body.page-privacy { background: #FFFFFF; color: #172E4A; }
body.page-pianist { background: #08080A; color: #F2EFE9; }
body:has(.pn-shell) {
  color: #F2EFE9;
  background: linear-gradient(180deg,rgba(8,8,10,0.4),rgba(8,8,10,0.65)), url("images/25253200_l.webp") center / cover no-repeat fixed, #08080A;
}
body:has(.top-shell) {
  background: #FFFFFF;
}
body.page-portfolio a:hover { color: #DC8541; }
body.page-privacy a:hover { color: #DC8541; }
body.page-pianist a:hover { color: #E4C97E; }
.pn-shell a:hover { color: #E4C97E; }
body.page-portfolio ::selection,
body.page-privacy ::selection { background: #F6D3B0; color: #172E4A; }

body.page-horror { background: #07070A; color: #D6D2CB; }
body.page-horror a:hover { color: #9B2C22; }
p {margin: 0;}
/* ============================================
   キーフレームアニメーション
   ============================================ */
@keyframes fadeup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes flick { 0%,100% { opacity: .85; } 47% { opacity: .85; } 48% { opacity: .35; } 52% { opacity: .9; } 70% { opacity: .6; } }

/* ============================================
   共通ユーティリティ
   ============================================ */
.container { max-width: 1000px; margin: 0 auto; padding-inline: clamp(20px,5vw,64px);
@media (max-width: 767px) { max-width: 500px; } }

.tag-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; font-size: 12px; letter-spacing: 0.01em; font-weight: 500; color: #3E4A5C; border: none; border-radius: 999px; padding: 8px 16px; background: rgba(23,46,74,0.07); white-space: nowrap; }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: 0.09em; padding: 20px 34px; border-radius: 999px; border: 3px solid transparent; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease, box-shadow .15s ease; white-space: nowrap; }
.btn:hover { transform: translate(3px,3px); }
.btn:active { transform: translate(5px,5px); }
.btn--primary { background: #DC8541; color: #FFFFFF; box-shadow: 5px 5px 0 #172E4A; }
.btn--primary:hover { background: #172E4A; color: #FFFFFF; box-shadow: 2px 2px 0 #DC8541; }
.btn--primary:active { box-shadow: 0 0 0 #DC8541; }
.btn--secondary { background: #FFFFFF; color: #172E4A; border-color: #172E4A; box-shadow: 5px 5px 0 #DC8541; }
.btn--secondary:hover { background: #172E4A; color: #FFFFFF; box-shadow: 2px 2px 0 #DC8541; }
.btn--secondary:active { box-shadow: 0 0 0 #DC8541; }
.btn--sm { padding: 13px clamp(14px,1.6vw,22px); font-size: 12px; font-weight: 600; box-shadow: 4px 4px 0 #172E4A; }
.btn--sm:hover { box-shadow: 1px 1px 0 #172E4A; }
.btn--sm:active { box-shadow: 0 0 0 #172E4A; }

/* ============================================
   shell（各ページ共通の外枠カード／pianist・horrorと共有のため触らない）
   ============================================ */
.shell {
  container-type: inline-size;
  max-width: 375px;
  margin: 0 auto;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: #F5F8FC;
  box-shadow: 0 0 80px rgba(18,36,63,0.16);
}
.shell--muted { background: #F0F5FA; }
.shell--dark { background: #0B0B0C; box-shadow: 0 0 80px rgba(0,0,0,0.5); }

.skip-link { position: absolute; left: -9999px; top: 0; background: #12243F; color: #F5F8FC; padding: 12px 18px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

/* ============================================
   page-header（下層ページの戻るリンクヘッダー／pianist・horrorと共有のため触らない）
   ============================================ */
.page-header { padding: 24px clamp(20px,6cqw,80px); display: flex; justify-content: space-between; align-items: center; font-family: Archivo, sans-serif; font-size: 12px; letter-spacing: 0.16em; }
.page-header--dark { color: #8A8580; }
.page-header__back { display: inline-flex; align-items: center; gap: 10px; transition: gap .3s ease; }
.page-header__back:hover { gap: 18px; }
.page-header__label { color: #7B8DA6; }

/* ============================================
   page-footer（下層ページ共通フッター／pianist・horrorと共有のため触らない）
   ============================================ */
.page-footer { padding: clamp(40px,5cqw,72px) clamp(20px,6cqw,80px); border-top: 1px solid #D3DEEB; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.16em; color: #7B8DA6; margin-top: auto; }
.page-footer--dark { border-top-color: #1E1D1D; color: #5A5652; }

/* ============================================
   top-shell（TOPページのラッパー／固定フレームは使わずフル幅レスポンシブ／
   「手描きポップ」デザイン：太め枠線・オフセット影・回転バッジが基調）
   ============================================ */
.top-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body:has(.top-shell) a:hover { color: #DC8541; }
body:has(.top-shell) ::selection { background: #F6D3B0; color: #172E4A; }

@keyframes prupru {
  0% { transform: rotate(-2deg) translate(0,0); }
  12% { transform: rotate(2.4deg) translate(2px,-1px); }
  26% { transform: rotate(-3.2deg) translate(-2px,1px); }
  40% { transform: rotate(2.6deg) translate(2px,1px); }
  54% { transform: rotate(-2.4deg) translate(-1px,-1px); }
  68% { transform: rotate(1.6deg) translate(1px,0); }
  84% { transform: rotate(-2.4deg) translate(-1px,0); }
  100% { transform: rotate(-2deg) translate(0,0); }
}

/* ============================================
   site-header（TOPページ固定ヘッダー／DCコンポーネントの状態クラス hero-nav / menu は名称を維持）
   ============================================ */
.hero-nav {
  position: sticky; top: 0; z-index: 96;
  background: rgba(255,255,255,0.93);
  border-bottom: 4px solid #172E4A;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
}
.hero-nav__h1 { margin: 0; }
.hero-nav__logo { display: inline-flex; align-items: center; gap: 12px; line-height: 1; transition: opacity .2s ease; }
.hero-nav__logo-mark { width: 34px; height: 34px; object-fit: contain; display: block; flex: none; }
.hero-nav__logo-text {font-size: 18px; letter-spacing: 0.09em; color: #DC8541; font-weight: 500; transition: color .2s ease;}
.hero-nav__logo-main { font-size: 18px; letter-spacing: 0.09em; color: #172E4A; font-weight: 500; transition: color .2s ease; }
.hero-nav__logo-sub { font-size: 9px; letter-spacing: 0.26em; color: #DC8541; transition: color .2s ease; }
.hero-nav__logo:hover .hero-nav__logo-main { color: #DC8541; }
.hero-nav__logo:hover .hero-nav__logo-sub { color: #172E4A; }

.hero-nav__nav { display: none; }
.hero-nav__nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(10px,1.8vw,28px); font-size: 13.5px; color: #3E4A5C; white-space: nowrap; }
.hero-nav__nav-list a { transition: color .2s ease; }
.hero-nav__nav-list a:hover { color: #DC8541; }
.hero-nav__actions { display: flex; align-items: center; gap: 10px; }
.hero-nav__cta--compact { display: none; }

.hero-nav__toggle {
  width: 44px; height: 44px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; padding: 0; flex: none;
}
.hero-nav__bar {
  display: block; height: 2px; width: 22px; border-radius: 2px; background: #172E4A;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.hero-nav.is-open .hero-nav__bar--top { transform: translateY(4px) rotate(45deg); }
.hero-nav.is-open .hero-nav__bar--bottom { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 768px) {
  .hero-nav__nav { display: block; }
  .hero-nav__toggle { display: none; }
  .hero-nav__cta--compact { display: none; }
}
@media (max-width: 767px) {
  .hero-nav__cta--full { display: none; }
  .hero-nav__cta--compact { display: inline-flex; }
}

/* ============================================
   menu（ハンバーガーで開くフルスクリーンナビ／DCコンポーネントの状態クラス menu は名称を維持）
   ============================================ */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: linear-gradient(160deg,#1B335A 0%,#172E4A 45%,#0F2038 100%);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 96px clamp(24px,7vw,56px) 48px;
  transition: opacity .4s ease, visibility .4s ease;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu__cta { margin: 0; }
.menu__inner { display: grid; gap: clamp(28px,6vw,44px); width: 100%; max-width: 420px; margin-inline: auto;}
.menu__inner > div + div { border-top: 2px dashed rgba(224,185,143,0.28); padding-top: clamp(26px,6vw,40px); }
.menu__nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 700; font-size: 19px; line-height: 1.25; color: #FFFFFF; counter-reset: menu-index; }
.menu__nav-list li { counter-increment: menu-index; }
.menu__nav-list a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px; margin-inline: -10px; border-radius: 14px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), color .25s ease, background .25s ease;
}
.menu__nav-list a::before {
  content: counter(menu-index, decimal-leading-zero);
  font-family: ui-monospace,Menlo,monospace; font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; color: #DC8541;
}
.menu__nav-list a::after {
  content: "→"; margin-left: auto; font-size: 15px; color: #DC8541;
  opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease;
}
.menu__nav-list a:hover { color: #F6D3B0; background: rgba(255,255,255,0.06); transform: translateX(6px); }
.menu__nav-list a:hover::after { opacity: 1; transform: translateX(0); }
.menu__credit { margin: 36px 0 0; font-size: 11px; letter-spacing: 0.16em; color: #6B85A6; }

@media (min-width: 768px) {
  .menu { display: none; }
}

/* ============================================
   section 基本パターン
   ============================================ */
.section { position: relative; z-index: 0; padding-block: clamp(40px,9vw,120px); background: #FFFFFF; overflow: hidden; }
.section--alt { background: #FFF3E6; }
.section--dark { background: #172E4A; color: #EAF0F6; }

.section__head-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(22px,4vw,48px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .section__lead { margin: 18px auto 0; }
.section__body { position: relative; padding-top: clamp(24px,4vw,40px); }

@media (max-width: 480px) {
  .section__deco { width: clamp(84px,26vw,120px); }
}
.section__eyebrow {
  display: inline-block; margin: 0; font-weight: 700; font-size: 11px; line-height: 1;
  letter-spacing: 0.22em; color: #FFFFFF; background: #172E4A; padding: 9px 16px; border-radius: 999px;
  transform: rotate(-2deg);
}
.section--dark .section__eyebrow { background: #DC8541; color: #172E4A; }
.section__heading { margin: 0; font-weight: 900; font-size: clamp(26px,3.6vw,40px); line-height: 1.42; letter-spacing: -0.01em; color: #172E4A; word-break: keep-all; overflow-wrap: break-word; }
.section__eyebrow + .section__heading { margin-top: 18px; }
.section--dark .section__heading { color: #FFFFFF; }
.section__lead { margin: 18px 0 0; font-size: 15px; line-height: 2; color: #56637A; }
.section--dark .section__lead { color: #C3D0E0; }
.section__pretitle { margin: 0; font-weight: 900; font-size: clamp(18px,2.4vw,24px); line-height: 1.5; color: #DC8541; }
.section__eyebrow + .section__pretitle { margin-top: 18px; }
.section__pretitle + .section__heading { margin-top: 10px; }

/* ============================================
   hero
   ============================================ */
.hero { padding-top: clamp(48px,8vw,92px); padding-bottom: clamp(60px,9vw,104px); background: linear-gradient(180deg,#FFFFFF 0%,#FFF3E6 100%); overflow: hidden; }
.hero__inner { display: grid; gap: clamp(40px,6vw,40px); align-items: end; }
.hero__audience { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;  padding: 8px 16px; border-radius: 100vmax; background: rgba(220,133,65,0.12); }
.hero__audience-en { font-size: 10px; letter-spacing: 0.18em; color: #DC8541; font-weight: 700; }
.hero__audience-ja { font-size: 12.5px; font-weight: 700; color: #172E4A; }
.hero__heading { margin: 0; font-weight: 900; font-size: clamp(26px,4.2vw,44px); line-height: 1.45; letter-spacing: -0.01em; color: #172E4A; word-break: keep-all; overflow-wrap: break-word; }
.hero__line { display: block; }
.hero__highlight { position: relative; display: inline-block; color: #172E4A; }
.hero__highlight::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 12px; background: rgba(220,133,65,0.24); border-radius: 6px; z-index: -1; }
.hero__lead { margin: clamp(24px,3vw,32px) 0 0; font-size: 15px; line-height: 2.05; color: #56637A;  }
.hero__actions { margin-top: clamp(28px,4vw,38px); }

.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__photo {
  position: relative; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 4/5;
  border-radius: 32px;
  transform: rotate(-2deg);
  box-shadow: 14px 18px 36px rgba(220,133,65,0.45);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 768px) {
  .hero__inner { grid-template-columns: minmax(0,1fr) 320px; }
  .hero__visual { order: 2; }
}

/* ============================================
   tile-grid（PROBLEMS / TEAM / WORK STYLE 共通／太枠＋オフセット影のポップカード）
   ============================================ */
.tile-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; background: #FFFFFF; border: 3px solid #172E4A; border-radius: 24px; padding: clamp(24px,3vw,32px); box-shadow: 6px 6px 0 #172E4A; }
.tile__icon img { width: auto; height: clamp(60px,8vw,92px); object-fit: contain; display: block; }
.tile__label { font-size: 14px; font-weight: 700; line-height: 1.6; color: #172E4A; }

.tile-grid--dot { display: flex; flex-wrap: wrap; }
.tile-grid--dot .tile--row { flex: 0 1 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; box-shadow: none; padding: 20px 22px; }
.tile__dot { flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(220,133,65,0.14); display: flex; align-items: center; justify-content: center; }
.tile__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #DC8541; }

@media (min-width: 768px) {
  .tile-grid--3 { grid-template-columns: repeat(3,1fr); }
}

/* ============================================
   problem-list（PROBLEMS／番号付きの課題一覧リスト）
   ============================================ */
.problem-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(23,46,74,0.14); }
.problem-list__item { display: flex; align-items: flex-start; gap: clamp(16px,2.6vw,26px); padding: clamp(20px,2.6vw,26px) 4px; border-bottom: 1px solid rgba(23,46,74,0.14); }
.problem-list__no { flex: none; font-family: ui-monospace,Menlo,monospace; font-weight: 900; font-size: clamp(26px,3.4vw,34px); color: #DC8541; line-height: 1; letter-spacing: -0.02em; }
.problem-list__text { margin: 0; font-size: 15px; line-height: 1.9; font-weight: 500; color: #172E4A; }

@media (min-width: 768px) {
  .problem-list { display: grid; grid-template-columns: repeat(2,1fr); column-gap: clamp(32px,4vw,56px); border-top: none; }
  .problem-list__item:nth-child(-n+2) { border-top: 1px solid rgba(23,46,74,0.14); }
}

/* ============================================
   scope-highlight（SCOPE／常時表示の主要3項目）
   ============================================ */
.scope-highlight { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.scope-highlight + .flow-diagram { margin-top: clamp(28px,4vw,40px); }
.scope-highlight__item {
  background: #FFF3E6;
  padding: 28px 22px 22px;
  box-shadow: 0 10px 18px -6px rgba(23,46,74,0.3);
}
.scope-highlight__item:nth-child(2) { background: #FFEAD1; }
.scope-highlight__title { margin: 0; font-weight: 700; font-size: 16px; color: #172E4A; }
.scope-highlight__text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.9; color: #56637A; }

@media (min-width: 768px) {
  .scope-highlight { grid-template-columns: repeat(3,1fr); }
}

/* ============================================
   team-scope（TEAM／Web Directionを主役にした情報階層）
   ============================================ */
.team-scope { display: grid; gap: 20px; }
.team-scope__primary { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; background: #172E4A; color: #FFFFFF; border: 3px solid #172E4A; border-radius: 26px; padding: clamp(28px,4vw,40px); box-shadow: 8px 8px 0 #A85A1E; }
.team-scope__primary .tile__icon { display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 50%; padding: clamp(14px,2vw,20px); }
.team-scope__primary .tile__icon img { width: auto; height: clamp(56px,7vw,80px); object-fit: contain; display: block; }
.team-scope__primary-label { margin: 0; font-weight: 900; font-size: clamp(20px,2.6vw,26px); color: #FFFFFF; }
.team-scope__primary-tag { margin: 0; font-size: 11px; letter-spacing: 0.16em; color: #E0B98F; }
.team-scope__secondary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.team-scope__secondary li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #FFFFFF; border: 2px solid #D7DEE8; border-radius: 18px; padding: clamp(16px,2vw,22px); }
.team-scope__secondary .tile__icon img { width: auto; height: clamp(40px,5vw,56px); object-fit: contain; display: block; opacity: .85; }
.team-scope__secondary .tile__label { font-size: 12.5px; font-weight: 600; color: #3E4A5C; }

@media (min-width: 768px) {
  .team-scope__secondary { grid-template-columns: repeat(5,1fr); }
}

/* ============================================
   team-note（TEAM／海外開発チーム連携の補足ブロック）
   ============================================ */
.team-note { margin-top: clamp(24px,3.4vw,34px); padding: clamp(20px,3vw,28px) clamp(22px,3vw,30px); border: 2px solid #D7DEE8; border-radius: 20px; background: #FFFFFF; display: grid; gap: 12px; }
.team-note__title { margin: 0; font-weight: 700; font-size: 15px; color: #172E4A; }
.team-note__text { margin: 0; font-size: 13.5px; line-height: 1.95; color: #56637A; }

/* ============================================
   flow-diagram（SCOPE／受注→要件定義→制作→公開のフロー図）
   ============================================ */
.flow-diagram { position: relative; display: flex; flex-direction: column; gap: 14px; }
.flow-diagram__node {
  position: relative; z-index: 1;
  border: 2.5px solid #172E4A; border-radius: 16px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 15px; color: #172E4A; padding: 18px 16px;
}
.flow-diagram__group { position: relative; z-index: 1; border: 2.5px solid #172E4A; border-radius: 16px; background: #FFFFFF; overflow: hidden; }
.flow-diagram__group--orange { border-color: #DC8541; }
.flow-diagram__group-title {
  margin: 0; padding: 13px 20px; text-align: center;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: #FFFFFF; background: #172E4A;
}
.flow-diagram__group--orange .flow-diagram__group-title { background: #DC8541; }
.flow-diagram__list { list-style: none; margin: 0; padding: 18px 22px; display: grid; gap: 10px; }
.flow-diagram__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #172E4A; }
.flow-diagram__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #172E4A; }
.flow-diagram__group--orange .flow-diagram__list li::before { background: #DC8541; }

/* flow-diagram__flow：受注→要件定義→制作→公開のカード後ろを貫く1本の矢印（CSS clip-path、テキスト矢印は使わない） */
.flow-diagram__flow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -18px; bottom: -18px; left: 50%; right: auto; width: 40px; height: auto;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #172E4A 0%, #172E4A 65%, #DC8541 100%);
  clip-path: polygon(32% 0%, 68% 0%, 68% 88%, 92% 88%, 50% 100%, 8% 88%, 32% 88%);
}

@media (min-width: 768px) {
  .flow-diagram { flex-direction: row; align-items: stretch; gap: 14px; }
  .flow-diagram__node { flex: 0 0 112px; }
  .flow-diagram__group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .flow-diagram__list { flex: 1; }
  .flow-diagram__flow {
    top: 50%; bottom: auto; left: -20px; right: -20px; width: auto; height: 40px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #172E4A 0%, #172E4A 65%, #DC8541 100%);
    clip-path: polygon(0% 32%, 0% 68%, 88% 68%, 88% 92%, 100% 50%, 88% 8%, 88% 32%);
  }
}

/* ============================================
   philosophy（PHILOSOPHY）
   ============================================ */
.chain { position: relative; display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 920px; margin: 0 auto; }
.chain__node { position: relative; z-index: 1; flex: 1; min-width: 0; background: #1E3A5C; color: #FFFFFF; border: 3px solid #E0B98F; border-radius: 22px; padding: clamp(22px,3vw,30px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.chain__node--accent { background: #FFFFFF; color: #172E4A; border: none; box-shadow: 8px 8px 0 #A85A1E; }
.chain__icon img { width: clamp(60px,8vw,92px); height: clamp(60px,8vw,92px); object-fit: contain; display: block; }
.chain__role { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: inherit; }
.chain__node--accent .chain__role { color: #C06E2E; }
.chain__points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chain__points .tag { font-size: 11px; padding: 6px 13px; background: rgba(23,46,74,0.08); }

/* chain__flow：Client → Director → Designer のカード後ろを貫く1本の大きな矢印（CSS clip-path） */
.chain__flow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -22px; bottom: -22px; left: 50%; right: auto; width: 150px; height: auto;
  transform: translateX(-50%);
  background: #DC8541;
  clip-path: polygon(32% 0%, 68% 0%, 68% 88%, 92% 88%, 50% 100%, 8% 88%, 32% 88%);
}

.philosophy__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40ch; }
.philosophy__points li { font-size: 14.5px; color: #FFFFFF; padding-left: 22px; position: relative; }
.philosophy__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #DC8541; }

@media (min-width: 768px) {
  .chain { flex-direction: row; }
  .chain__flow {
    top: 50%; bottom: auto; left: -26px; right: -26px; width: auto; height: 46px;
    transform: translateY(-50%);
    clip-path: polygon(0% 32%, 0% 68%, 88% 68%, 88% 92%, 100% 50%, 88% 8%, 88% 32%);
  }
}

/* ============================================
   work-card（WORKS／画像＋タイトル＋詳細を見る のみ。詳細情報はモーダル側で表示）
   ============================================ */
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.work-card { display: flex; flex-direction: column; cursor: pointer; background: #FFFFFF; border: 3px solid #172E4A; border-radius: 24px; overflow: hidden; box-shadow: 8px 8px 0 #172E4A; transition: transform .2s ease, box-shadow .2s ease; }
.work-card:hover, .work-card:focus-visible { transform: translate(-3px,-3px); box-shadow: 11px 11px 0 #172E4A; }
.work-card:focus-visible { outline: 3px solid #DC8541; outline-offset: 3px; }
.work-card__media { position: relative; aspect-ratio: 4/3;  overflow: hidden; }
.work-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-card:hover .work-card__media img, .work-card:focus-visible .work-card__media img { transform: scale(1.06); }
.work-card__body { flex: 1; padding: 20px clamp(18px,2.4vw,24px) 24px; display: flex; flex-direction: column; gap: 10px; background: #FFF; }
.work-card__title { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.5; color: #172E4A; }
.work-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: #A85A1E; }

@media (max-width: 767px) {
  .work-grid { grid-template-columns: repeat(1,1fr); gap: 24px; }
}

.work-midcta { margin-top: clamp(28px,4vw,40px); text-align: center; }
.work-midcta__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #A85A1E; border-bottom: 2px solid rgba(168,90,30,0.35); padding-bottom: 4px; transition: border-color .2s ease, color .2s ease; }
.work-midcta__link:hover { color: #DC8541; border-color: #DC8541; }

/* ============================================
   process-row（DIRECTION SAMPLE／番号バッジ入りカードのグリッド）
   ============================================ */
.process-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 12px; }
.process-row__item { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; background: #FFFFFF; border: 3px solid #172E4A; }
.process-row__no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(220,133,65,0.12); color: #C06E2E; }
.process-row__label { font-size: 14.5px; line-height: 1.7; font-weight: 500; color: #172E4A; }
.process-row__item--highlight { background: #A85A1E; }
.process-row__item--highlight .process-row__no { background: rgba(255,255,255,0.22); color: #FFFFFF; }
.process-row__item--highlight .process-row__label { color: #FFFFFF; }

/* ============================================
   sample-grid（DIRECTION SAMPLE／ディレクションサンプルのサムネイル）
   ============================================ */
.sample-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.sample-card { background: #FFFFFF; border: 3px solid #172E4A; border-radius: 20px; overflow: hidden; box-shadow: 6px 6px 0 #172E4A; }
.sample-card__thumb { aspect-ratio: 4/3; background-image: repeating-linear-gradient(135deg,#FFE0BF 0 12px,#FFF3E6 12px 24px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sample-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sample-card__no { margin: 16px 18px 0; font-size: 11px; letter-spacing: 0.2em; color: #DC8541; }
.sample-card__title { margin: 6px 18px 18px; font-size: 13.5px; font-weight: 700; color: #172E4A; line-height: 1.6; }

@media (max-width: 767px) {
  .sample-grid { grid-template-columns: repeat(2,1fr); }
}

/* ============================================
   profile（PROFILE／写真を主役にしたコンパクトな2カラム構成）
   ============================================ */
.profile__grid { display: grid; gap: clamp(26px,4vw,40px); align-items: start; margin-top: 20px; }
.profile__photo {
  width: 100%; max-width: 280px; aspect-ratio: 4/5; margin: 0 auto;
  border-radius: 28px;
  transform: rotate(2deg);
  box-shadow: 12px 16px 32px rgba(220,133,65,0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.profile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile__content { min-width: 0; text-align: center; }
.profile__name { margin: 20px 0 0; font-weight: 900; font-size: clamp(21px,2.6vw,26px); color: #172E4A; }
.profile__name-en { display: inline-block; margin-left: 12px; font-size: 11px; letter-spacing: 0.2em; color: #A7AFBC; font-weight: 500; }
.profile__role { margin: 8px 0 0; font-size: 13px; color: #56637A; }
.profile__bio { margin: 18px auto 0;  font-size: 16px; line-height: 1.95; color: #56637A; }
.profile__skills { list-style: none; margin: 20px auto 0; padding: 0; display: inline-grid; gap: 9px; text-align: left; }
.profile__skills li { position: relative; padding-left: 22px; font-size: 16px; font-weight: 600; color: #172E4A; }
.profile__skills li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #DC8541; }

.pull-quote { margin: clamp(30px,4.4vw,44px) 0 0; text-align: center; font-weight: 900; font-size: clamp(19px,2.6vw,28px); line-height: 1.75; color: #C06E2E; max-width: 32ch; }

@media (min-width: 768px) {
  .profile__grid { grid-template-columns: 1fr 2fr; margin-top: 40px; gap: 40px; align-items: end; }
  .profile__content { text-align: left; }
  .profile__bio { margin: 18px 0 0; }
  .profile__skills { margin: 20px 0 0; }
}

/* ============================================
   contact + form
   ============================================ */
.contact__lead { font-size: 14px; line-height: 2; color: #56637A; }
.contact__reassurance { max-width: 660px; margin: 20px 0 0; padding: 14px 20px; background: rgba(220,133,65,0.1); border-left: 6px solid #DC8541; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #A85A1E; }
.contact__frame { display: none; width: 0; height: 0; border: 0; }

.form {  margin-inline: auto; }
.form.is-sent { display: none; }
.form__fields { display: grid; gap: 24px; }
.form__field { display: grid; gap: 8px; }
.form__label { font-size: 14px; font-weight: 700; color: #172E4A; }
.form__required { color: #DC8541; }
.form__input {
  width: 100%; font: inherit; font-size: 16px; color: #172E4A;
  background: #FFFFFF; border: 2.5px solid #172E4A; border-radius: 14px;
  padding: 14px 16px; outline: none; transition: border-color .25s ease, box-shadow .25s ease;
}
.form__input:focus { border-color: #DC8541; box-shadow: 0 0 0 3px rgba(220,133,65,0.2); }
.form__hint { font-size: 12.5px; color: #56637A; line-height: 1.8; }
.form__fieldset { margin: 0; padding: 22px 24px; border: 3px solid #172E4A; border-radius: 20px; display: grid; gap: 14px; background: #FFFFFF; }
.form__legend { font-size: 14px; font-weight: 700; color: #172E4A; padding: 0 8px; margin: 0; }
.form__radio-label { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #3E4A5C; cursor: pointer; }
.form__radio { accent-color: #DC8541; width: 18px; height: 18px; }
.form__other-input {
  width: 100%; font: inherit; font-size: 16px; color: #172E4A;
  background: #FFF3E6; border: 2px solid #172E4A; border-radius: 12px;
  padding: 10px 14px; outline: none; margin-left: 30px; max-width: calc(100% - 30px); display: none;
}
.form__fieldset.is-other .form__other-input { display: block; }
.form__textarea { width: 100%; font: inherit; font-size: 16px; color: #172E4A; background: #FFFFFF; border: 2.5px solid #172E4A; border-radius: 16px; padding: 16px; outline: none; resize: vertical; transition: border-color .25s ease, box-shadow .25s ease; }
.form__textarea:focus { border-color: #DC8541; box-shadow: 0 0 0 3px rgba(220,133,65,0.2); }
.form__checkbox-label { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #3E4A5C; line-height: 1.9; cursor: pointer; }
.form__checkbox { accent-color: #DC8541; width: 18px; height: 18px; margin-top: 3px; }
.form__privacy-link { border-bottom: 1px solid rgba(23,46,74,0.28); }
.form__submit { margin-top: 8px; justify-self: start; display: inline-flex; align-items: center; gap: 14px; background: #DC8541; color: #FFFFFF; font-weight: 700; font-size: 15px; letter-spacing: 0.09em; padding: 21px 40px; border: none; border-radius: 999px; cursor: pointer; box-shadow: 5px 5px 0 #172E4A; transition: background .25s ease, transform .15s ease; margin-inline: auto; }
.form__submit:hover { background: #172E4A; color: #FFFFFF; transform: translateY(-1px); }

.thanks { max-width: 660px; margin-inline: auto; display: none; }
.thanks.is-sent { display: block; }
.thanks__eyebrow { margin: 0; font-size: 11px; letter-spacing: 0.2em; color: #DC8541; }
.thanks__title { margin: 18px 0 0; font-weight: 700; font-size: 19px; color: #172E4A; }
.thanks__message { margin: 12px 0 0; font-size: 14px; line-height: 2; color: #56637A; }

/* ============================================
   case-detail モーダル（WORKSカードのクリックで開く）
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(23,46,74,0.4);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  display: flex; align-items: center; justify-content: center; padding: clamp(16px,4vw,48px);
  overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
  position: relative; width: 100%; max-width: 560px; margin: auto;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 3px solid #172E4A; border-radius: 28px; box-shadow: 10px 10px 0 #A85A1E;
  overflow: hidden;
}
.modal__close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid #172E4A; background: #FFFFFF; color: #172E4A; font-weight: 700; font-size: 18px; line-height: 1; cursor: pointer; }
.modal__media { position: relative; aspect-ratio: 16/10; border-bottom: 3px solid #172E4A; overflow: hidden; }
.modal__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(24px,4vw,36px); background: #FFFFFF; }
.modal__no { margin: 0; display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; color: #FFFFFF; background: #172E4A; padding: 8px 15px; border-radius: 999px; transform: rotate(-2deg); }
.modal__title { margin: 16px 0 0; font-weight: 900; font-size: clamp(20px,2.6vw,26px); line-height: 1.45; color: #172E4A; }
.modal__highlight { margin-top: 22px; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: rgba(220,133,65,0.12); border: 2px solid rgba(220,133,65,0.35); border-radius: 16px; }
.modal__highlight-icon { flex: none; font-size: 15px; color: #DC8541; line-height: 1.6; }
.modal__highlight-label { margin: 0; font-weight: 700; font-size: 10px; letter-spacing: 0.18em; color: #A85A1E; }
.modal__highlight-text { margin-top: 4px; font-size: 14px; font-weight: 700; color: #A85A1E; line-height: 1.7; }
.modal__block { margin-top: 22px; }
.modal__field-label { margin: 0; font-weight: 700; font-size: 10px; letter-spacing: 0.18em; color: #A7AFBC; }
.modal__roles { list-style: none; margin-top: 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.modal__role { font-size: 12px; font-weight: 700; color: #172E4A; background: rgba(23,46,74,0.07); border-radius: 999px; padding: 6px 13px; }
.modal__text { margin-top: 10px; font-size: 14px; line-height: 1.95; color: #3E4A5C; }
.modal__cta { display: flex; width: 100%; margin-top: 26px; }

/* ============================================
   back-to-top（追従の「ページ先頭へ戻る」ボタン）
   ============================================ */
.back-to-top {
  position: fixed; right: clamp(14px,3vw,24px); bottom: clamp(14px,3vw,24px); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #172E4A; color: #FFFFFF; border: 3px solid #DC8541; font-size: 20px; line-height: 1;
  box-shadow: 4px 4px 0 rgba(23,46,74,0.3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease, color .25s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: #DC8541; color: #172E4A; }

/* ============================================
   site-footer（TOPページフッター）
   ============================================ */
.footer-deco { width: clamp(90px,11vw,150px); aspect-ratio: 1/1; margin: 32px auto 0; pointer-events: none; }
.footer-deco img { width: 100%; height: 100%; object-fit: contain; display: block; }

.site-footer { background: #172E4A; color: #FFFFFF; padding: clamp(44px,5vw,64px) clamp(20px,5vw,56px) clamp(26px,3vw,34px); margin-top: auto; }
.site-footer__grid { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,48px); align-items: flex-start; justify-content: space-between; }
.site-footer__name { margin: 0; font-size: 18px; letter-spacing: 0.06em; }
.site-footer__role { margin: 10px 0 0; font-size: 12px; color: #9DB4CD; }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; letter-spacing: 0.06em; }
.site-footer__social-link { display: inline-flex; align-items: center; gap: 9px; color: #C3D0E0; }
.site-footer__copyright { max-width: 1000px; margin: clamp(28px,4vw,42px) auto 0; font-size: 11px; letter-spacing: 0.12em; color: #6B85A6; }

/* ============================================
   icon-slot（アイコン表示）
   ============================================ */
.icon-slot { display: inline-block; flex-shrink: 0; object-fit: contain; }
.icon-slot--social { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.icon-slot--social-muted { opacity: .85; }

/* ============================================
   sub-hero（PIANISTページ）
   ============================================ */
.sub-hero { padding: clamp(60px,10cqw,140px) clamp(20px,6cqw,80px) clamp(60px,8cqw,120px); border-bottom: 1px solid #D3DEEB; }
.sub-hero__inner { max-width: 1180px; margin: 0 auto; animation: fadeup .9s cubic-bezier(.2,.7,.2,1) both; }
.sub-hero__title { margin: 0; font-family: Archivo, sans-serif; font-weight: 400; font-size: clamp(48px,13cqw,180px); line-height: 0.92; letter-spacing: -0.03em; }
.sub-hero__subtitle { margin: clamp(24px,4cqw,44px) 0 0; font-family: Archivo, sans-serif; font-style: italic; font-size: clamp(18px,2.4cqw,30px); color: #D2661F; }

.pianist-intro__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(32px,5cqw,80px); margin-top: clamp(40px,6cqw,88px); align-items: start; }
.pianist-intro__body { display: grid; gap: 24px; font-size: 15px; line-height: 2.2; color: #2A3D5C; max-width: 44ch; }
.pianist-intro__photo { aspect-ratio: 5/4; background-image: repeating-linear-gradient(135deg,#E2EAF4 0 10px,#EDF2F8 10px 20px); border: 1px solid #D3DEEB; display: flex; align-items: center; justify-content: center; }
.pianist-intro__photo-label { font-family: ui-monospace,Menlo,monospace; font-size: 11px; letter-spacing: 0.16em; color: #7B8DA6; background: #F0F5FA; padding: 6px 12px; border: 1px solid #D3DEEB; }

.pianist-contents { padding: clamp(60px,8cqw,120px) clamp(20px,6cqw,80px); }
.pianist-contents__eyebrow { font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.26em; color: #7B8DA6; margin: 0 0 clamp(28px,4cqw,48px); }
.content-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1px; background: #D3DEEB; border: 1px solid #D3DEEB; }
.content-grid__item { background: #F0F5FA; padding: clamp(28px,3cqw,44px); transition: background .4s ease; }
.content-grid__item:hover { background: #E4EDF7; }
.content-grid__number { margin: 0; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.2em; color: #D2661F; }
.content-grid__title { margin: 14px 0 0; font-size: 17px; font-weight: 500; }
.content-grid__desc { margin: 10px 0 0; font-size: 13px; line-height: 1.9; color: #4A5D78; }

/* ============================================
   horror-gate / horror-hero / horror-archive（HORRORページ）
   ============================================ */
.horror-gate__warning { margin: 0; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.42em; color: #9B2C22; animation: flick 5s infinite; }
.horror-gate__message { margin: clamp(28px,5cqw,52px) 0 0; font-family: Archivo, sans-serif; font-size: clamp(18px,3.2cqw,40px); line-height: 1.7; letter-spacing: 0.08em; color: #CFC9C1; }
.horror-gate__enter { margin-top: clamp(40px,6cqw,72px); background: none; border: 1px solid #3A3736; color: #D6D2CB; font-family: Archivo, sans-serif; font-size: 13px; letter-spacing: 0.3em; padding: 18px 44px; cursor: pointer; transition: background .4s ease, border-color .4s ease, letter-spacing .4s ease; }
.horror-gate__enter:hover { background: #9B2C22; border-color: #9B2C22; letter-spacing: 0.42em; }
.horror-gate__back { margin-top: 28px; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.2em; color: #5A5652; }

.horror-hero { padding: clamp(60px,10cqw,150px) clamp(20px,6cqw,80px) clamp(50px,7cqw,110px); border-bottom: 1px solid #1E1D1D; }
.horror-hero__title { margin: 0; font-family: Archivo, sans-serif; font-weight: 400; font-size: clamp(52px,14cqw,190px); line-height: 0.9; letter-spacing: -0.03em; color: #EDE9E3; }
.horror-hero__desc { margin: clamp(28px,4cqw,52px) 0 0; font-size: 15px; line-height: 2.2; color: #9A948C; max-width: 44ch; }

.horror-archive { padding: clamp(50px,7cqw,110px) clamp(20px,6cqw,80px); }
.horror-archive__eyebrow { font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.26em; color: #5A5652; margin: 0 0 clamp(28px,4cqw,48px); }
.horror-archive__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(24px,3cqw,44px); }
.horror-archive__thumb { aspect-ratio: 16/10; background-image: repeating-linear-gradient(135deg,#141414 0 10px,#101010 10px 20px); border: 1px solid #1E1D1D; display: flex; align-items: center; justify-content: center; transition: border-color .4s ease; }
.horror-archive__thumb:hover { border-color: #9B2C22; }
.horror-archive__thumb-label { font-family: ui-monospace,Menlo,monospace; font-size: 11px; letter-spacing: 0.16em; color: #5A5652; }
.horror-archive__no { margin: 16px 0 0; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.2em; color: #5A5652; }
.horror-archive__title { margin: 8px 0 0; font-size: 15px; color: #C7C2BB; }

.dream-experience { position: relative; overflow: hidden; background: #050506; border-top: 1px solid #1E1D1D; border-bottom: 1px solid #1E1D1D; }
.dream-experience__noise { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.08) 4px,transparent 5px); mix-blend-mode: screen; }
.dream-experience__inner { position: relative; padding: clamp(70px,10cqw,140px) clamp(20px,6cqw,80px) clamp(80px,11cqw,160px); }
.dream-experience__eyebrow { margin: 0; color: #9B2C22; font: 11px Archivo, sans-serif; letter-spacing: .25em; }
.dream-experience__title { margin: 22px 0 0; color: #EDE9E3; font: 400 clamp(42px,12cqw,160px)/.9 Archivo, sans-serif; letter-spacing: -.04em; }
.dream-experience__lead { margin: 28px 0 0; color: #8A8580; font-size: 13px; line-height: 2; }
.dream-stage { position: relative; min-height: 300px; margin: 54px 0 0; border: 1px solid #292627; background: radial-gradient(circle at 50% 52%,#1b1818 0,#0b0a0b 38%,#050506 76%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dream-stage__sky { position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(90deg,transparent 0 46px,rgba(155,44,34,.12) 47px,transparent 48px); animation: dreamDrift 8s linear infinite; }
.dream-stage__ear { position: relative; width: 118px; height: 174px; border: 3px solid #B9B0A9; border-radius: 54% 46% 48% 52% / 44% 46% 54% 56%; transform: rotate(-17deg); opacity: .85; box-shadow: inset -10px -5px 0 rgba(155,44,34,.12); }
.dream-stage__ear::before { content: ""; position: absolute; width: 48px; height: 82px; left: 31px; top: 42px; border: 3px solid #8A8580; border-radius: 50%; }
.dream-stage__ear-hole { position: absolute; left: 49px; top: 78px; width: 23px; height: 34px; border: 4px solid #9B2C22; border-radius: 50%; background: #050506; }
.dream-stage__ear-pulse { position: absolute; left: 35px; top: 65px; width: 50px; height: 58px; border: 1px solid #C1493B; border-radius: 50%; animation: earPulse 1.1s ease-in-out infinite; }
.dream-stage__insects { position: absolute; inset: 24px; color: #B9B0A9; opacity: 0; font: 24px/1 ui-monospace, monospace; }
.dream-stage__insects i { position: absolute; font-style: normal; }
.dream-stage__insects i:nth-child(1) { left: 14%; top: 18%; }.dream-stage__insects i:nth-child(2) { left: 76%; top: 20%; }.dream-stage__insects i:nth-child(3) { left: 21%; top: 70%; }.dream-stage__insects i:nth-child(4) { left: 68%; top: 74%; }.dream-stage__insects i:nth-child(5) { left: 44%; top: 10%; }.dream-stage__insects i:nth-child(6) { left: 85%; top: 51%; }.dream-stage__insects i:nth-child(7) { left: 6%; top: 48%; }.dream-stage__insects i:nth-child(8) { left: 48%; top: 86%; }
.dream-stage--still .dream-stage__ear { opacity: .08; transform: rotate(-17deg) scale(.82); }
.dream-stage--sound .dream-stage__ear-pulse { animation-duration: .38s; }
.dream-stage--nothing .dream-stage__ear { opacity: .04; transform: translateX(64px) rotate(-17deg); }
.dream-stage--nothing .dream-stage__caption { animation: flick 1.2s infinite; }
.dream-stage--inside .dream-stage__ear { transform: rotate(-17deg) scale(1.08); }
.dream-stage--inside .dream-stage__ear-hole { box-shadow: 0 0 22px 8px rgba(155,44,34,.36); }
.dream-stage--pull .dream-stage__ear { animation: earShake .16s ease-in-out infinite alternate; }
.dream-stage--pull .dream-stage__ear-pulse { animation-duration: .18s; }
.dream-stage--release .dream-stage__ear { opacity: .2; transform: rotate(-17deg) scale(.7); }
.dream-stage--release .dream-stage__insects { opacity: .8; animation: insectBurst 1.1s ease-out both; }
.dream-stage__caption { position: relative; margin: 0; color: #D6D2CB; font: 11px Archivo, sans-serif; letter-spacing: .22em; text-align: center; animation: flick 4s infinite; }
.dream-experience__copy { white-space: pre-line; min-height: 92px; margin: 28px 0 0; color: #B9B0A9; font-size: 14px; line-height: 2.1; }
.dream-experience__action { margin-top: 22px; border: 1px solid #4A2724; background: transparent; color: #D6D2CB; padding: 15px 18px; cursor: pointer; font: 11px Archivo, sans-serif; letter-spacing: .18em; transition: background .3s ease, border-color .3s ease; }
.dream-experience__action:hover { background: #9B2C22; border-color: #9B2C22; }
.dream-experience__progress { margin: 18px 0 0; color: #5A5652; font: 10px Archivo, sans-serif; letter-spacing: .2em; }
@keyframes dreamDrift { from { transform: translateX(0); } to { transform: translateX(48px); } }
@keyframes earPulse { 0%,100% { transform: scale(.8); opacity: .15; } 50% { transform: scale(1.2); opacity: .8; } }
@keyframes earShake { from { transform: rotate(-19deg) translateX(-4px); } to { transform: rotate(-14deg) translateX(4px); } }
@keyframes insectBurst { from { transform: scale(.2); opacity: 0; } 35% { opacity: .9; } to { transform: scale(1.25); opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .dream-stage__sky, .dream-stage__ear-pulse { animation: none; } }

/* ============================================
   policy-doc（PRIVACYページ本文／カードUIを避けた文書レイアウト）
   ============================================ */
.policy-doc { max-width: 720px; margin: clamp(40px,6vw,64px) auto 0; }
.policy-doc__section { padding-top: clamp(26px,4vw,36px); margin-top: clamp(26px,4vw,36px); border-top: 1px solid #E3E6EB; }
.policy-doc__section:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.policy-doc__no { display: block; margin: 0 0 8px; font-size: 11px; letter-spacing: 0.2em; font-weight: 700; color: #DC8541; }
.policy-doc__heading { margin: 0; font-weight: 700; font-size: clamp(17px,2vw,19px); color: #172E4A; }
.policy-doc__body { margin: 14px 0 0; font-size: 14.5px; line-height: 2.05; color: #56637A; }
.policy-doc__body a { color: #172E4A; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,46,74,0.35); transition: color .2s ease, text-decoration-color .2s ease; }
.policy-doc__body a:hover { color: #DC8541; text-decoration-color: currentColor; }
.policy-doc__body a:focus-visible { outline: 2px solid #DC8541; outline-offset: 2px; }
.policy-doc__meta { margin-top: clamp(26px,4vw,36px); padding-top: clamp(26px,4vw,36px); border-top: 1px solid #E3E6EB; display: grid; gap: 6px; }
.policy-doc__cta { text-align: center; margin-top: clamp(40px,6vw,64px); }
.policy-doc__meta p { margin: 0; font-size: 12px; letter-spacing: 0.04em; color: #A7AFBC; }

/* ============================================
   error-page（404.html / support.js非依存の静的ページ）
   ============================================ */
.error-page { max-width: 480px; margin: 0 auto; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: clamp(32px,8vw,64px); }
.error-page__code { margin: 0; font-family: Jost, sans-serif; font-weight: 400; font-size: clamp(56px,14vw,100px); line-height: 1; color: #172E4A; }
.error-page__title { margin: 0; font-size: 18px; font-weight: 500; color: #172E4A; }
.error-page__message { margin: 0; font-size: 14px; line-height: 2; color: #56637A; }
.error-page__back { margin-top: 10px; display: inline-flex; align-items: center; gap: 12px; background: #DC8541; color: #FFFFFF; font-weight: 600; font-family: Jost, sans-serif; font-size: 13px; letter-spacing: 0.1em; padding: 17px 30px; border-radius: 999px; transition: background .25s ease; }
.error-page__back:hover { background: #C06E2E; }


/* ============================================
   PIANIST v2（黒×ゴールド）
   ここから下が pianist.html 専用のスタイルです
   ============================================ */
.pn-shell ::selection { background: #C9A34E; color: #08080A; }
.pn-shell { background: #08080A; box-shadow: 0 0 90px rgba(0,0,0,0.65); }
.pn-shell .page-header { color: #8A8579; position: relative; z-index: 10; }
.pn-shell .page-header__label { color: #6E6A61; }
.pn-shell .page-footer { border-top-color: #23211D; color: #6E6A61; position: relative; z-index: 10; }

/* --- 音符レイヤー（スクロールに合わせて弧を描いて流れる装飾） --- */
.pn-notes { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%,375px); z-index: 1; pointer-events: none; overflow: hidden; }
.pn-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pn-wave__ghost { fill: none; stroke: rgba(201,163,78,0.15); stroke-width: 1; }
.pn-wave__live { fill: none; stroke: url(#pnWaveGrad); stroke-width: 1.4; stroke-linecap: round; }
.pn-note { position: absolute; left: 0; top: 0; font-family: "Cormorant Garamond", Georgia, serif; line-height: 1; color: rgba(201,163,78,0.55); will-change: transform; }
.pn-note__glyph { display: block; transform-origin: 50% 50%; animation: pnDrift var(--pn-dur,7s) ease-in-out infinite; }
.pn-note--lead { font-size: 26px; color: #C9A34E; --pn-dur: 6.5s; }
.pn-note--trail-a { font-size: 16px; color: rgba(201,163,78,0.5); --pn-dur: 8.5s; }
.pn-note--trail-b { font-size: 12px; color: rgba(201,163,78,0.3); --pn-dur: 10s; }
@keyframes pnDrift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .pn-note__glyph { animation: none; } }

/* --- 共通パーツ --- */
.pn-wrap { position: relative; z-index: 10; }
.pn-section { padding: clamp(56px,9cqw,120px) clamp(22px,6cqw,80px); }
.pn-section--line { border-top: 1px solid #23211D; }
.pn-eyebrow { margin: 0 0 clamp(22px,3cqw,36px); font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: 0.34em; color: #C9A34E; }
.pn-h2 { margin: 0 0 clamp(28px,4cqw,44px); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(28px,6cqw,44px); line-height: 1.3; letter-spacing: 0.02em; color: #F2EFE9; }
.pn-h2 .pn-h2__ja { display: block; margin-top: 10px; font-family: "Zen Old Mincho", serif; font-size: 13px; letter-spacing: 0.22em; color: #8A8579; }
.pn-text { margin: 0; font-family: "Zen Old Mincho", serif; font-size: 14px; line-height: 2.3; color: #C6C1B7; }
.pn-stack { display: grid; gap: 22px; }
.pn-rule { height: 1px; background: linear-gradient(90deg,rgba(201,163,78,0.55),rgba(201,163,78,0)); }

/* --- 写真プレースホルダー --- */
.pn-photo { position: relative; aspect-ratio: 4/5; border: 1px solid #23211D; background-image: repeating-linear-gradient(135deg,#0E0E10 0 10px,#121214 10px 20px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pn-photo--wide { aspect-ratio: 16/10; }
.pn-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn-photo__label { font-family: ui-monospace,Menlo,monospace; font-size: 10px; letter-spacing: 0.16em; color: #6E6A61; border: 1px solid #23211D; background: #08080A; padding: 6px 12px; }

/* --- 演奏会セクション（普段は非表示） --- */
.pn-concert { position: relative; z-index: 10; padding: clamp(30px,6cqw,54px) clamp(22px,6cqw,80px) clamp(34px,6cqw,58px); border-bottom: 1px solid rgba(201,163,78,0.28); }
.pn-concert__badge { display: inline-flex; align-items: center; gap: 10px; font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: 0.28em; color: #C9A34E; border: 1px solid rgba(201,163,78,0.42); padding: 8px 14px; }
.pn-concert__title { margin: 22px 0 0; font-family: "Zen Old Mincho", serif; font-weight: 500; font-size: clamp(20px,4.6cqw,30px); line-height: 1.6; color: #F2EFE9; }
.pn-concert__date { margin: 18px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(26px,6cqw,40px); line-height: 1.2; color: #E4C97E; letter-spacing: 0.02em; }
.pn-concert__meta { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.pn-concert__meta li { display: grid; grid-template-columns: 68px 1fr; gap: 12px; font-size: 13px; line-height: 1.9; color: #C6C1B7; font-family: "Zen Old Mincho", serif; }
.pn-concert__meta span { font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: 0.2em; color: #6E6A61; padding-top: 4px; }
.pn-concert__link { margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.24em; color: #08080A; background: linear-gradient(120deg,#C9A34E,#E4C97E); padding: 16px 26px; transition: gap .3s ease; }
.pn-concert__link:hover { gap: 24px; color: #08080A; }

/* --- HERO --- */
.pn-hero { padding: clamp(40px,8cqw,90px) clamp(22px,6cqw,80px) clamp(56px,9cqw,110px); }
.pn-hero__title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: clamp(56px,17cqw,190px); line-height: 0.95; letter-spacing: 0.04em; color: #F2EFE9; }
.pn-hero__sub { margin: 18px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(17px,3.6cqw,26px); color: #C9A34E; letter-spacing: 0.04em; }
.pn-hero__name { margin: 30px 0 0; font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: 0.34em; color: #6E6A61; }
.pn-hero__photo { margin-top: clamp(34px,6cqw,64px); }
.pn-hero__lead { margin-top: clamp(32px,5cqw,56px); }

/* --- PROFILE --- */
.pn-profile__aside { margin-top: clamp(34px,5cqw,56px); border-top: 1px solid #23211D; padding-top: 26px; display: grid; gap: 22px; }
.pn-profile__label { margin: 0 0 8px; font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: 0.26em; color: #C9A34E; }
.pn-profile__item { margin: 0; font-family: "Zen Old Mincho", serif; font-size: 14px; line-height: 1.9; color: #F2EFE9; }

/* --- AWARDS --- */
.pn-awards { list-style: none; margin: 0; padding: 0; display: grid; }
.pn-awards__item { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid #23211D; align-items: baseline; }
.pn-awards__item:last-child { border-bottom: 1px solid #23211D; }
.pn-awards__year { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; color: #C9A34E; }
.pn-awards__text { font-family: "Zen Old Mincho", serif; font-size: 13.5px; line-height: 1.95; color: #C6C1B7; }
.pn-awards__text em { font-style: normal; color: #F2EFE9; }

/* --- PERFORMANCE --- */
.pn-videos { display: grid; gap: clamp(26px,4cqw,44px); }
.pn-video__frame { position: relative; aspect-ratio: 16/9; border: 1px solid #23211D; background: #0E0E10; }
.pn-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pn-video__cap { margin: 12px 0 0; display: flex; justify-content: space-between; gap: 14px; font-size: 12px; color: #8A8579; font-family: "Zen Old Mincho", serif; }
.pn-video__no { font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: 0.2em; color: #C9A34E; }

/* --- CONTACT / SNS --- */
.pn-contact__mail { display: inline-block; margin-top: 6px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(22px,5cqw,34px); letter-spacing: 0.03em; color: #E4C97E; border-bottom: 1px solid rgba(201,163,78,0.4); padding-bottom: 6px; }
.pn-sns { list-style: none; margin: clamp(34px,5cqw,52px) 0 0; padding: 0; display: grid; gap: 1px; background: #23211D; border: 1px solid #23211D; }
.pn-sns__link { display: flex; align-items: center; gap: 14px; background: #08080A; padding: 18px 20px; font-family: Archivo, sans-serif; font-size: 12px; letter-spacing: 0.18em; color: #F2EFE9; transition: background .35s ease, color .35s ease; }
.pn-sns__link:hover { background: #100E0A; color: #E4C97E; }
.pn-sns__icon { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: .8; }
.pn-sns__arrow { margin-left: auto; color: #6E6A61; }