/* ============================================================
   MIWO OFFICIAL WEB SITE — style.css
   静かな余白 / 落ち着いた色 / 写真がゆっくり現れる

   配色は1st Album『Tranquillo』のジャケットから取っていた
   （生成りの紙・藍・真鍮）。
   2026-08-22 MIWO様のご依頼で、アクセントを真鍮 #a4884f から
   深いワインレッド（ボルドー）へ変更。ドレスの色に合わせたもの。
   使用箇所は小さな要素（番号・細い線・リンク・日付）に限定し、
   モノトーン基調は変えない、というご意向。
   ============================================================ */

:root{
  --bg:#f3f1ec;              /* 生成りの紙 */
  --bg-2:#eae6dd;
  --paper:#fffdf9;
  --ink:#191b21;             /* 黒に少しだけ藍を混ぜた文字色 */
  --ink-soft:#5c5f68;
  --ink-dim:#9a988f;
  --line:rgba(25,27,33,.13);
  --hair:rgba(25,27,33,.08);
  --indigo:#2c3a52;          /* ジャケットの藍 */
  --accent:#6e2a3c;          /* 深いワインレッド（2026-08-22〜。旧：真鍮 #a4884f） */
  --accent-dim:rgba(110,42,60,.30);

  --ease:cubic-bezier(.65,0,.15,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad:clamp(20px,6vw,110px);
  --maxw:1280px;

  --f-min:"Shippori Mincho","Noto Serif JP",serif;
  --f-go:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-lat:"Cormorant Garamond",Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-go);font-weight:400;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:2.1;letter-spacing:.06em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-wrap:pretty;line-break:strict;word-break:normal;overflow-wrap:break-word;
}
body.lock{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
/* ⚠ height:auto を必ず添える（2026-08-15 社長指摘）。
   HTML の <img> には width / height を書いてある（読み込む前に場所を
   取っておくため）。max-width だけを指定すると、**幅は縮むのに高さは
   書いた数字のまま**になり、写真が縦に潰れて表示される。
   height:auto があって初めて、幅に合わせて高さも比どおりに縮む。
   ここを1行足せば、個別の指定に頼らず全部の写真が正しい比で出る。 */
img{max-width:100%;height:auto;display:block}
li{list-style:none}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,.ttl{text-wrap:balance}
/* 句点で改行させる。main.js の sentenceWrap が1文ずつ span で包む */
.jp-s{display:inline-block}
.pc{display:inline}
@media(max-width:760px){.pc{display:none}}
/* 単語・人名を行の途中で切らない（2026-08-23 MIWO様追加ご依頼⑦）。
   「MGMミュージカル」「フレッド・アステア」などが途中で折り返されるのを防ぐ */
.nb{white-space:nowrap}
/* スマホでだけ効く改行。トップの一文を「ロンドンで心惹かれた」で折り返す */
.sp{display:none}
@media(max-width:760px){.sp{display:inline}}

/* ============================================================
   1. 空気（粒子・周辺減光・かすかに浮かぶ写真）
   ============================================================ */

/* フィルムのような粒子。乗算で重ねると、平らな色に奥行きが出る */
.grain{position:fixed;inset:-50%;z-index:9996;pointer-events:none;opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(8) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}14%{transform:translate(-3%,-3%)}28%{transform:translate(-6%,2%)}
  42%{transform:translate(3%,-4%)}56%{transform:translate(-2%,6%)}70%{transform:translate(-6%,3%)}
  84%{transform:translate(4%,0)}100%{transform:translate(0,0)}}

.vignette{position:fixed;inset:0;z-index:9995;pointer-events:none;
  box-shadow:inset 0 0 clamp(80px,14vw,240px) rgba(25,27,33,.09)}

/* ---- MIWO様のご要望「背景にかすかに写真が浮かび上がる見せ方」 ----
   固定した層に写真を大小ばらばらに置き、ごく薄く、少しぼかして重ねる。
   ゆっくり漂わせ、スクロールでも speed に応じて動かす（main.js）。
   opacity をこれ以上上げると本文が読みにくくなるので、上限は .14 まで。 */
/* ⚠ **z-index は 901。ヘッダー（900）より上。**（2026-08-28 社長ご指示）
   社長「スクロールしたときに、左上のワインレッドの写真が最上段のメニューバーに
   隠れる。それが嫌なので、隠れないようにしたい」

   ★**写真が動いて隠れるのではない。** .atmos は position:fixed で画面に貼り付いて
     いて、そもそも動かない。スクロールで .header に .shrink が付くと
     .header::before の曇りガラス（rgba(243,241,236,.82)）が現れ、
     **動かない写真の上端に覆いかぶさる。**これが「隠れる」の正体。
     写真は opacity .17 なので、82%の紙色を被せると実質3%まで消える。

   ⚠ **だから「写真を下へずらす」方向に直してはいけない。**
     2026-08-28 09:48 に別セッションが px 固定＋スクロール方向の反転で直そうとして、
     10:02 に社長から「違います。もう一度元に戻して」と差し戻された。
     **覆っているガラスの側を越えさせるのが正しい。**

   ⚠ **ガラス（.header::before）そのものは触らない。**
     backdrop-filter を持つ要素は position:fixed の子孫の基準になる仕様のため、
     ここをいじると 2026-08-22 に直した「ハンバーガーメニューが下しか見えない」
     不具合（MIWO様ご指摘⑦）が再発する。CLAUDE.md の⑦を参照。 */
.atmos{position:fixed;inset:0;z-index:901;pointer-events:none;overflow:hidden}
/* ⚠ メニューを開いている間だけは元の層へ落とす。
   開いたメニュー（.nav は .header の中＝900層）の上に写真が乗ると、
   薄いとはいえ品書きの上に模様が掛かる。body.lock はメニューを開いた印。 */
body.lock .atmos{z-index:0}
/* ⚠ 枠は写真と同じ 4:3 にしてある（背景に使う静物はすべて 4:3）。
   高さを別に決めると background-size:cover が写真を切り抜いてしまうため、
   **幅と縦横比だけ**を指定して、切り抜きが起きないようにしている。
   大小の変化は「幅」で付ける（2026-08-15 社長指示：縦横比を変えない）。 */
.atmos i{position:absolute;display:block;aspect-ratio:4/3;
  background-size:cover;background-position:center;
  opacity:0;filter:blur(1.5px) saturate(.72);
  transition:opacity 2.6s var(--ease-out);will-change:transform}
.atmos.on i{opacity:var(--o,.10)}
/* ---- 2026-08-28 MIWO様ご依頼（ここが最新の配置） ----
   **ワンピース（miwo-06）＝左上／花（flower-01）＝右下。**
   ⚠ **8/27 の夜に一度、「写真の中にロゴが入っている」形（大きな写真＋
      白いロゴ）へ作り替えたが、MIWO様のご判断で 8/28 に元へ戻した。**
      ご本人の言葉：「以前の、中央にワインレッド色で jazzvocalist MIWO と
      表記頂いていたのと写真を背景でぼかして掲載頂いてたデザインが
      とても気に入っていたので、一旦元に戻して頂き、
      ワンピ写真を左上、花の写真を右下の配置で」。
      **この“かすかに背景で浮かぶ”見せ方が、MIWO様の好まれた形。**
      経緯は _修正依頼_20260828.md。**大きな写真の形へ戻さないこと。**
   ⚠ **マイクを持った白いドレス（miwo-07）は外したまま。**「人物写真が2枚だと
      too much」とのご判断（8/27 昼）。**戻さないこと。**
   ・ドレスは 8/27 昼のご依頼で 35vw → 42vw（少し大きく）。そのまま
   ・miwo-06 は**人物が写真の右寄り**にいる。左上に置くぶんには切れないが、
      **右へ寄せるときは画面外へ出しすぎない**（2026-08-23 に -7vw で顔が切れた）
   ・花は 41vw → 38vw（8/27 昼「少し小さく」）。そのまま
   ・⚠ **4枚目にあった小さい花は外した**（背景は2枚）。MIWO様は背景を
      「花1枚・ドレス1枚」と数えておられる */
/* ⚠ **ドレスの top は 0。上に余白を作らない。**（2026-08-28 社長ご指示）
   社長「左上のワインレッドのワンピース画像を上一杯まで上げて。上部分の余白無しで」
   以前は top:6vh（スマホ 5vh）で、画面の上に隙間があった。

   ⚠ **漂わせ方も float2 から float3 へ変えた。理由がある。**
     float2 は 50% で **下へ 3vh** 動く。top:0 にしただけだと、
     **漂うたびに上へ隙間が空いて「余白無し」が崩れる。**
     float3 は**横へ流れて、ふくらむだけ**（上下に動かさない）。
     ⚠ **float2 は `.wash i:nth-child(2)` も使っているので、float2 自体は直さない。** */
.atmos i:nth-child(1){--o:.17;width:42vw;left:-3vw;top:0;aspect-ratio:3/2;
  filter:blur(.2px) saturate(.9);animation:float3 55s ease-in-out infinite}   /* ドレス：ぼかしすぎない */
.atmos i:nth-child(2){--o:.13;width:38vw;right:-4vw;bottom:4vh;
  filter:blur(1.2px) saturate(.78);animation:float1 42s ease-in-out infinite} /* 花：薄くぼかす（クリア寄り） */
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2.5vw,-3vh) scale(1.06)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2vw,3vh) scale(1.08)}}
/* ⚠ 上下に動かさない漂い。上端を 0 に貼り付けたままにするため。
   ふくらみ（scale）は中心から広がるので、上へは画面の外に出るだけ＝隙間にならない。 */
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2vw,0) scale(1.08)}}
@media(max-width:760px){
  /* スマホは画面が狭いぶん vw が小さいので、広めに（2026-08-23 ご依頼①）。
     2026-08-28：ドレス＝左上／花＝右下 */
  /* ⚠ **スマホだけ、ドレスを 52vw → 62vw に広げてある。**（2026-08-28 社長ご指示）
     社長「スマホ版だとMIWOの文字が顔に当たりそうなので、スマホ版だけ
     右上の画像をもう少し右に移動して。左に余白ができそうであれば埋めて」

     ★**left をプラスにして右へずらしてはいけない。**そうすると左に紙の帯が出る。
       この写真は**人物が右寄り**にいるので、**左端を画面の外（-2vw）に置いたまま
       横幅を広げる**と、人物だけが右へ動き、左に余白もできない。

     実測（社長の 2026-08-28 11:00 のスクショ・iPhone 390px）
       ロゴ「MIWO」の右端 … 28.2vw
       お顔の左端        … 25.6vw   ← 重なりかけていた
       この写真の中でのお顔の位置は、横幅の 55.6%〜74.3% のところ。
       つまり **お顔の左端 = left + 0.556 × 横幅**。

         52vw … 26.9vw   ★ロゴに掛かる
         62vw … 32.5vw   （2026-08-28 いちど適用。まだ近いとのご指摘）
         74vw … 39.1vw   ← いま

     ⚠ 右端は -2+74＝72vw、お顔の右端は 53vw。どちらも画面の内側。
       **これ以上広げると顔が切れる**（2026-08-23 に left:-7vw で実際に切れた）。
       まだ近いようなら、次は写真ではなくロゴ側を動かす。 */
  /* ⚠ **left は 0。「左の余白が無くなるまで左へ」**（2026-08-28 社長ご指示）
     **左に紙の帯を出さずに置ける、いちばん右の位置がこれ。**
     0 より右にすると帯が出る。0 より左にすると写真が画面の外へ逃げるだけで、
     お顔も左へ戻ってロゴに近づく。**つまりここが両立点。**

     たどった順（横幅74vw・お顔の左端 = left + 0.556×横幅）
       -2vw … 39.1vw   帯なし。ただし「もっと右へ」とのご指示
       10vw … 51.1vw   いちばん右。ただし左に 10vw の帯が出た
        0vw … 41.1vw   ← いま。**帯なしで、いちばん右**

     ⚠ これ以上お顔を右へ動かすには、**横幅を広げる**しかない（お顔は写真の
       右寄り 55.6%〜74.3% にいるため）。ただし 52→62→74vw と広げる手は
       2回とも「違う」とされている。**次に手を入れるならロゴの側。** */
  /* ⚠ **74vw → 66vw**（2026-08-29 MIWO様ご依頼①）
     MIWO様「①添付画像のようにProfileなどの見出しの上の部分と写真が
     少しだけ被ってるので、ほんの気持ち写真サイズを小さくしてください」

     ★**幅を縮めると、高さも一緒に縮む**（aspect-ratio:3/2 のため）。
       74vw → 高さ 49.3vw ／ 66vw → 高さ 44vw。見出しにかかる量が減る。

     ⚠ **これ以上小さくしない。**小さくするとお顔が左へ戻り、
       ロゴ「MIWO」に再び近づく（2026-08-28 に社長から
       「文字と顔が被りそう」とご指摘をいただいた経緯）。
         お顔の左端 = left + 0.556 × 横幅
           52vw … 26.9vw  ★ロゴ（28.2vw）に掛かる
           66vw … 36.7vw  ← いま。ロゴから 8.5vw 離れている
           74vw … 41.1vw

     ⚠ **見出しとの重なりを完全には消せない。**この写真は position:fixed で
       画面に貼り付いており、本文の方がうしろを流れていく作りなので、
       **どこかのスクロール位置では必ず何かと重なる**。消すには
       背景を fixed でなくするか、濃さ（opacity .17）を下げるしかない。 */
  .atmos i:nth-child(1){width:66vw;left:0;top:0}   /* ⚠ 上も左も 0（余白なし） */
  .atmos i:nth-child(2){width:54vw;right:-2vw}
}

/* 藍のにじみ。写真だけだと寒々しいので、色の層を1枚挟む */
.wash{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wash i{position:absolute;border-radius:50%;filter:blur(100px);opacity:.42}
.wash i:nth-child(1){width:52vw;height:52vw;left:-16vw;top:-12vw;
  background:radial-gradient(circle,rgba(44,58,82,.24),transparent 70%);
  animation:float1 50s ease-in-out infinite}
.wash i:nth-child(2){width:46vw;height:46vw;right:-14vw;bottom:-10vw;
  background:radial-gradient(circle,rgba(110,42,60,.16),transparent 70%);
  animation:float2 62s ease-in-out infinite}

.progress{position:fixed;top:0;left:0;width:100%;height:1px;z-index:950;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--accent);opacity:.8}

/* ============================================================
   2. 幕（読み込み中の画面）

   ⚠ 進み具合の数字やバーは出さない。
      2026-08-15 社長より「アトリエECのものと似ているので変えて」。
      あちらは〈名前＋細い罫線＋パーセント〉。こちらは**別の考え方**にする。

   ここでは「幕が開く」形にした。中央から左右へ細い線が伸び、
   伸びきると画面が上下に分かれて退く。数字は出さない。
   ジャズのステージの幕が上がる間合いに合わせた、静かな見せ方。
   ============================================================ */
.opening{position:fixed;inset:0;z-index:10000;pointer-events:none}
.opening__half{position:fixed;left:0;width:100%;height:50.5vh;background:var(--bg);
  transition:transform 1.25s var(--ease) .15s}
.opening__half--t{top:0}
.opening__half--b{bottom:0}
.opening.done .opening__half--t{transform:translateY(-100%)}
.opening.done .opening__half--b{transform:translateY(100%)}

.opening__line{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(56vw,520px);height:1px;background:var(--hair);overflow:hidden;
  transition:opacity .5s var(--ease)}
.opening__line i{position:absolute;left:50%;top:0;height:100%;width:0;background:var(--accent);
  transform:translateX(-50%);transition:width 1.15s var(--ease-out)}
.opening.grow .opening__line i{width:100%}
.opening.done .opening__line{opacity:0}

/* 幕の中央に、小さく名前だけ添える */
.opening__mark{position:fixed;left:50%;top:50%;transform:translate(-50%,calc(-50% - 34px));
  font-family:var(--f-lat);font-size:clamp(19px,2.6vw,26px);letter-spacing:.46em;text-indent:.46em;
  color:var(--ink);opacity:0;transition:opacity 1.1s var(--ease-out)}
.opening.grow .opening__mark{opacity:1}
.opening.done .opening__mark{opacity:0;transition:opacity .45s var(--ease)}

.opening.gone{display:none}

/* ============================================================
   3. ヘッダー / ナビ
   ============================================================ */
.header{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;align-items:center;
  justify-content:space-between;padding:24px var(--pad);
  transition:padding .7s var(--ease),border-color .7s;
  border-bottom:1px solid transparent}
/* ⚠ 曇りガラス（backdrop-filter）はヘッダー本体に付けない（2026-08-22 修正）。
   backdrop-filter を持つ要素は position:fixed の子孫の「基準」になってしまう
   仕様のため、中の .nav（fixed; inset:0）が画面全体ではなく高さ50px程の
   ヘッダーの大きさになり、スクロール後（.shrink 中）にメニューを開くと
   中央寄せされたリンクの上半分が画面外へはみ出て「下段しか見えない」不具合が
   出ていた（MIWO様ご指摘⑦）。効果は子の ::before に持たせれば基準は変わらない。 */
.header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(243,241,236,.82);backdrop-filter:blur(16px);
  opacity:0;transition:opacity .7s}
.header.shrink{padding:14px var(--pad);border-bottom-color:var(--hair)}
.header.shrink::before{opacity:1}
.brand{font-family:var(--f-lat);font-size:21px;letter-spacing:.34em;text-indent:.34em;
  transition:opacity .5s}
.brand:hover{opacity:.62}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.nav__link{font-family:var(--f-lat);font-size:14px;letter-spacing:.16em;position:relative;padding:4px 0}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .7s var(--ease)}
.nav__link:hover::after,.nav__link.is-here::after{transform:scaleX(1);transform-origin:left}
.nav__link sup{font-family:var(--f-go);font-size:8px;letter-spacing:.08em;color:var(--accent);
  vertical-align:super;margin-left:3px}

.burger{display:none;flex-direction:column;gap:6px;width:42px;height:42px;background:none;border:0;
  cursor:pointer;align-items:center;justify-content:center;z-index:901}
.burger span{width:22px;height:1px;background:var(--ink);transition:transform .5s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:flex}
  /* 背の低い画面（横向きのスマホなど）で全項目が入りきらないときの保険として
     縦スクロールを許す。中央寄せは justify-content ではなく先頭・末尾の
     margin:auto で行う（scroll 容器で justify-content:center にすると、
     あふれた上側へスクロールで戻れなくなるため）。2026-08-22 */
  .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;
    gap:26px;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s;
    overflow-y:auto;padding:24px 0}
  .nav .nav__link:first-child{margin-top:auto}
  .nav .nav__link:last-child{margin-bottom:auto}
  .nav.open{opacity:1;visibility:visible}
  .nav__link{font-size:20px;letter-spacing:.2em}
}

/* ============================================================
   4. 共通の器
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.section{padding:clamp(84px,13vw,190px) 0;position:relative;z-index:2}
.section--tight{padding:clamp(58px,8vw,110px) 0}

/* 1枚もの（LP）でメニューから飛んだとき、見出しが固定ヘッダーの下に
   隠れないよう、その高さぶん手前で止める */
.section[id],.hero[id]{scroll-margin-top:76px}
@media(max-width:900px){.section[id],.hero[id]{scroll-margin-top:64px}}

/* 見出し。英字を大きく、日本語を小さく添える */
.head{margin-bottom:clamp(38px,6vw,74px)}
.head__no{font-family:var(--f-lat);font-size:12px;letter-spacing:.34em;color:var(--accent);
  display:block;margin-bottom:14px}
.head__en{font-family:var(--f-lat);font-size:clamp(34px,6.4vw,68px);line-height:1.06;
  letter-spacing:.06em;font-weight:300}
.head__jp{font-family:var(--f-min);font-size:12px;letter-spacing:.3em;color:var(--ink-soft);
  display:block;margin-top:12px}
.head--center{text-align:center}

.hair{height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease)}
.hair.in{transform:scaleX(1)}

.lead{font-family:var(--f-min);font-size:clamp(15px,1.5vw,17px);line-height:2.5;
  letter-spacing:.09em;color:var(--ink)}
.body-txt{color:var(--ink-soft);line-height:2.35}
.body-txt+.body-txt{margin-top:1.5em}

/* 現れ方。強すぎない。上へ 22px と、ほんのわずかな拡大だけ */
.fade{opacity:0;transform:translateY(22px);
  transition:opacity 1.25s var(--ease-out),transform 1.25s var(--ease-out)}
.fade.in{opacity:1;transform:none}
.fade--d1{transition-delay:.12s}.fade--d2{transition-delay:.24s}
.fade--d3{transition-delay:.36s}.fade--d4{transition-delay:.48s}

/* 写真の現れ方。覆いが下から上へ退いて、中の写真はゆっくり縮む */
.reveal-img{position:relative;overflow:hidden}
.reveal-img::after{content:"";position:absolute;inset:0;background:var(--bg);
  transform:translateY(0);transition:transform 1.5s var(--ease)}
.reveal-img.in::after{transform:translateY(-101%)}
.reveal-img img{transform:scale(1.16);transition:transform 2.2s var(--ease-out)}
.reveal-img.in img{transform:scale(1)}

/* ============================================================
   5. トップの見出し部
   ============================================================ */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;z-index:2;
  padding:120px 0 90px}
.hero__inner{width:100%}
.hero__sub{font-family:var(--f-lat);font-size:12px;letter-spacing:.4em;color:var(--accent);
  margin-bottom:24px;opacity:0;transform:translateY(12px);
  transition:opacity 1.2s var(--ease-out) .2s,transform 1.2s var(--ease-out) .2s}
/* 「MIWO」は深いワインレッドに（2026-08-22 MIWO様ご依頼①）。
   大きな文字でも品が保てるよう、明るい赤ではなく黒に近いボルドーを使う */
.hero__name{font-family:var(--f-lat);font-weight:300;line-height:.92;color:var(--accent);
  font-size:clamp(64px,17vw,220px);letter-spacing:.04em;display:flex;overflow:hidden}
.hero__name .ch{display:inline-block;transform:translateY(105%);
  transition:transform 1.5s var(--ease-out);transition-delay:calc(var(--i) * .07s + .3s)}
/* ⚠ 2026-08-28、社長ご指示で
   ・写真をヘッダーの下へ潜り込ませない（top を px に、スクロールの向きを下へ）
   ・写真と重なった文字だけ白系にする
   の2つを試しましたが、**社長のご指示で両方とも元へ戻しました**（同日）。
   経緯と実測値は CLAUDE.md の「⚠ 0.」の節にあります。**同じ手を繰り返す前に読むこと。** */
.hero__lead{font-family:var(--f-min);font-size:clamp(14.5px,1.4vw,16px);line-height:2.4;
  letter-spacing:.14em;color:var(--ink-soft);margin-top:34px;max-width:34em;
  opacity:0;transform:translateY(14px);
  transition:opacity 1.3s var(--ease-out) .95s,transform 1.3s var(--ease-out) .95s}
.hero.in .hero__sub,.hero.in .hero__lead{opacity:1;transform:none}
.hero.in .hero__name .ch{transform:none}

/* 右下に小さく写真を1枚。主役は余白のままにする。
   ⚠ 縦横比は指定しない。写真そのものの形で出す */
.hero__shot{position:absolute;right:var(--pad);bottom:clamp(40px,7vw,84px);
  width:clamp(180px,24vw,340px);z-index:2}
.hero__shot img{width:100%;height:auto}
@media(max-width:900px){.hero__shot{display:none}}

.scrollcue{position:absolute;left:var(--pad);bottom:36px;display:flex;align-items:center;gap:12px;
  font-family:var(--f-lat);font-size:11px;letter-spacing:.28em;color:var(--ink-dim);z-index:3}
.scrollcue i{display:block;width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateX(-100%);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ============================================================
   6. 2段組（写真＋文章）
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,86px);align-items:center}
.split--rev .split__media{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:38px}.split--rev .split__media{order:0}}
/* ⚠ 写真の縦横比は変えない（2026-08-15 社長指示）。
   以前は aspect-ratio と object-fit:cover で枠に合わせて切り抜いていたが、
   撮影された構図が損なわれる。枠の形は写真に従わせる。 */
.split__media img{width:100%;height:auto}
.split__body h3{font-family:var(--f-min);font-size:clamp(18px,2.2vw,24px);line-height:1.85;
  letter-spacing:.1em;margin-bottom:26px;font-weight:500}

/* ---- 2026-08-22 MIWO様ご依頼⑥ ----
   PROFILE の余白に、花の写真を低濃度で溶け込ませる。
   「写真そのものを見せるのではなく、余白の一部に溶け込ませる程度」との
   ご意向なので、不透明度 .07・軽いぼかし・端は円形のマスクで透明へ逃がす。
   .wrap（z-index:2）の下に敷かれるため、本文には掛からない。 */
#profile{overflow:hidden}
#profile::before{content:"";position:absolute;right:-10vw;top:clamp(20px,6vw,90px);
  width:min(58vw,760px);aspect-ratio:4/3;
  background:url("../img/flower-01-1000.jpg") center/cover no-repeat;
  opacity:.07;filter:blur(2px);pointer-events:none;
  -webkit-mask-image:radial-gradient(75% 75% at 55% 45%,#000 40%,transparent 78%);
  mask-image:radial-gradient(75% 75% at 55% 45%,#000 40%,transparent 78%)}

/* ============================================================
   7. 予定（SCHEDULE）
   ============================================================ */
.sch{border-top:1px solid var(--hair)}
.sch__item{display:grid;grid-template-columns:132px 1fr auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--hair);
  transition:background .6s var(--ease),padding-left .6s var(--ease)}
.sch__item:hover{background:rgba(255,253,249,.6);padding-left:14px}
/* 日付と会場名は一回り大きく・太く、日付はワインレッドで
   （2026-08-22 MIWO様ご依頼③。ひと目で拾えるように）
   2026-08-23 追加ご依頼②：さらに一回り大きく（日付＞店名の順）。
   店名と曜日もワインレッドに。 */
.sch__date{font-family:var(--f-lat);font-size:clamp(23px,2.8vw,31px);letter-spacing:.06em;
  color:var(--accent);white-space:nowrap}
.sch__date b{font-weight:500}
.sch__date i{font-style:normal;font-size:13px;letter-spacing:.18em;color:var(--accent);
  font-family:var(--f-go);margin-left:8px}
.sch__venue{font-family:var(--f-min);font-size:clamp(17px,2vw,21px);letter-spacing:.08em;
  line-height:1.9;font-weight:500;color:var(--accent)}
.sch__members{display:block;font-family:var(--f-go);font-size:12px;color:var(--ink-soft);
  letter-spacing:.05em;margin-top:7px;line-height:1.95}
.sch__note{display:block;font-size:11.5px;color:var(--ink-dim);margin-top:5px;line-height:1.9}
.sch__open{font-family:var(--f-lat);font-size:14px;letter-spacing:.12em;color:var(--ink-soft);
  white-space:nowrap}
.sch__link{display:inline-block;margin-top:8px;font-family:var(--f-lat);font-size:12px;
  letter-spacing:.14em;color:var(--accent);border-bottom:1px solid var(--accent-dim);
  padding-bottom:2px}
/* 「会場情報」は OPEN の下（2026-08-23 追加ご依頼③）。
   .sch__open は nowrap の1行なので、リンクだけ塊にして下へ落とす */
.sch__open .sch__link{display:block;margin-top:6px;text-align:right}
@media(max-width:700px){.sch__open .sch__link{text-align:left}}
.sch__empty{padding:60px 0;text-align:center;color:var(--ink-dim);font-family:var(--f-min);
  letter-spacing:.12em}
@media(max-width:700px){
  .sch__item{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .sch__item:hover{padding-left:0}
  .sch__open{margin-top:4px}
}
/* 過ぎた予定は控えめに */
.sch__item--past{opacity:.5}
.sch__toggle{margin-top:44px;text-align:center}
.sch__toggle .btn span{color:var(--ink-dim);font-size:12px}

/* 年の見出し。年が変わるところにだけ挟む */
.sch__year{padding:34px 0 10px;border-bottom:1px solid var(--hair)}
.sch__year:first-child{padding-top:0}
.sch__year span{font-family:var(--f-lat);font-size:13px;letter-spacing:.34em;color:var(--accent)}

/* ============================================================
   8. ディスコグラフィ
   ============================================================ */
.disc{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(30px,5vw,72px);
  align-items:start}
@media(max-width:860px){.disc{grid-template-columns:1fr}}
.disc__jk{box-shadow:0 22px 60px rgba(25,27,33,.16)}
.disc__ttl{font-family:var(--f-min);font-size:clamp(19px,2.4vw,27px);letter-spacing:.1em;
  line-height:1.7;margin-bottom:10px}
.disc__date{font-family:var(--f-lat);font-size:14px;letter-spacing:.2em;color:var(--accent);
  margin-bottom:32px;display:block}
.disc__h{font-family:var(--f-lat);font-size:12px;letter-spacing:.28em;color:var(--ink-dim);
  margin:32px 0 14px;display:block}
.tracks{counter-reset:t;column-count:2;column-gap:34px}
@media(max-width:560px){.tracks{column-count:1}}
.tracks li{counter-increment:t;font-size:13px;line-height:2.3;color:var(--ink-soft);
  padding-left:30px;position:relative;break-inside:avoid}
.tracks li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;
  font-family:var(--f-lat);font-size:11px;color:var(--ink-dim);letter-spacing:.08em}
.credits li{font-size:13px;line-height:2.2;color:var(--ink-soft)}
.credits li b{font-weight:400;color:var(--ink);font-family:var(--f-min)}

/* ============================================================
   9. 動画
   ============================================================ */
.movie{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   10. お知らせ
   ============================================================ */
.news__item{border-top:1px solid var(--hair);padding:clamp(26px,3.4vw,44px) 0}
.news__item:last-child{border-bottom:1px solid var(--hair)}
.news__date{font-family:var(--f-lat);font-size:13px;letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:14px}
.news__ttl{font-family:var(--f-min);font-size:clamp(16px,1.9vw,20px);line-height:1.9;
  letter-spacing:.09em;margin-bottom:16px;font-weight:500}
/* ⚠ 掲載誌の写真は縦横比がまちまち。切り抜かず、上端を揃えて並べる */
.news__figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
  margin-top:26px;align-items:start}
.news__figs img{width:100%;height:auto}

/* ============================================================
   11. リンク・ボタン
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-lat);font-size:14px;
  letter-spacing:.16em;border:1px solid var(--line);border-radius:40px;padding:14px 34px;
  transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--fill{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--fill:hover{background:transparent;color:var(--ink);border-color:var(--line)}
.link-u{border-bottom:1px solid var(--accent-dim);padding-bottom:2px;color:var(--accent);
  transition:border-color .5s}
.link-u:hover{border-color:var(--accent)}

.buys{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.buys a{font-family:var(--f-lat);font-size:12.5px;letter-spacing:.14em;border:1px solid var(--line);
  padding:11px 22px;border-radius:40px;transition:border-color .5s,background .5s}
.buys a:hover{border-color:var(--accent);background:rgba(164,136,79,.06)}

/* ============================================================
   12. 問い合わせ
   ============================================================ */
.contact{text-align:center}
/* メールアドレスは太字＆ワインレッド（2026-08-23 MIWO様追加ご依頼⑥）。
   Cormorant Garamond は 600 も読み込んである（index.html の fonts の指定） */
.contact__mail{font-family:var(--f-lat);font-size:clamp(21px,3.6vw,40px);letter-spacing:.09em;
  font-weight:600;color:var(--accent);
  display:inline-block;margin-top:26px;border-bottom:1px solid var(--accent-dim);padding-bottom:10px;
  transition:border-color .6s,color .6s}
.contact__mail:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   13. 下部
   ============================================================ */
.footer{border-top:1px solid var(--hair);padding:56px 0 40px;position:relative;z-index:2}
.footer__in{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.footer__brand{font-family:var(--f-lat);font-size:17px;letter-spacing:.32em}
.footer__nav{display:flex;gap:22px;flex-wrap:wrap}
.footer__nav a{font-family:var(--f-lat);font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft);
  transition:color .5s}
.footer__nav a:hover{color:var(--accent)}
/* 2026-08-24 ご依頼④：Instagramはアイコン付き。文字と同じ色で並べる */
.footer__ig svg{width:13px;height:13px;vertical-align:-2px;margin-right:6px}
.footer__cp{font-family:var(--f-lat);font-size:11px;letter-spacing:.16em;color:var(--ink-dim);
  width:100%;text-align:center;margin-top:34px}

/* ============================================================
   14. 下層ページの頭
   ============================================================ */
.subhero{padding:clamp(150px,20vw,240px) 0 clamp(50px,7vw,90px);position:relative;z-index:2}
.subhero__no{font-family:var(--f-lat);font-size:12px;letter-spacing:.34em;color:var(--accent);
  display:block;margin-bottom:16px}
.subhero__ttl{font-family:var(--f-lat);font-weight:300;font-size:clamp(42px,9vw,110px);
  line-height:1;letter-spacing:.05em}
.subhero__jp{font-family:var(--f-min);font-size:12px;letter-spacing:.3em;color:var(--ink-soft);
  display:block;margin-top:18px}

/* ============================================================
   15. スマホの小さい文字を底上げする
   （2026-08-22 MIWO様ご依頼⑧「一部文字が小さすぎて見にくい」）
   注記・番号・一覧など、12px前後だったものを 13〜15px へ。
   デザインの階層（大小の差）は保ったまま、最小サイズだけ引き上げる。
   ============================================================ */
@media(max-width:760px){
  body{font-size:15px}
  .head__no{font-size:13px}
  .head__jp{font-size:13px}
  .hero__sub{font-size:12.5px}
  /* 2026-08-27 MIWO様ご依頼：1行目を
     「ロンドンで心惹かれたMGMミュージカルから、」で切る。
     字間 .14em のままだと 6インチ級のスマホで 1行に収まらず、
     ご指定の位置より手前で折り返してしまう。この段落だけ詰める */
  .hero__lead{letter-spacing:.08em}
  .scrollcue{font-size:12px}
  .sch__members{font-size:13.5px}
  .sch__note{font-size:13px}
  .sch__link{font-size:13px}
  .sch__year span{font-size:14px}
  .tracks li{font-size:14px}
  .credits li{font-size:14px}
  .news__date{font-size:14px}
  .disc__h{font-size:13px}
  .buys a{font-size:13.5px}
  .footer__nav a{font-size:13.5px}
  .footer__cp{font-size:12px}
}
/* iPhone SE / mini（375px）などの狭い機種は、字間 .08em でもまだ収まらず
   「ロンドンで心惹かれた」で折り返してしまう。ここだけさらに詰める。
   ⚠ 文字の**大きさ**は変えない（2026-08-22 ご依頼⑧「小さすぎた文字を大きく」）。
      詰めるのは字間だけ。 */
@media(max-width:385px){
  .hero__lead{letter-spacing:.03em}
}

/* ============================================================
   16. 動きを減らす設定への配慮
   （OS で「視差効果を減らす」にしている方には、動かさず出すだけにする）
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .fade{opacity:1;transform:none}
  .reveal-img::after{display:none}
  .reveal-img img{transform:none}
  .hero__name .ch{transform:none}
  .hero__sub,.hero__lead{opacity:1;transform:none}
}