@charset "UTF-8";
/* ============================================================
   不具合の修正（2026年9月）
   元デザインのHTMLにもあった不具合を、見た目を変えずに直すための指定です。
   全9ページで読み込んでいます（TOPは top.css、ほかは site.css の後）。

   ■ スマホで、ページが横にはみ出す
     スマホ用メニューは、閉じているあいだ画面の右外に置かれています。
     スマホのブラウザはその分まで横に広いページだと判断し、
     ページ全体を縮めたり、横にずれて動いたりしてしまいます。
     → 横方向だけ、画面の外を切り取るようにしました。
       hidden ではなく clip を使うのは、上部ヘッダーがスクロールしても
       付いてくる動き（sticky）を壊さないためです。
   ============================================================ */
html, body { overflow-x: clip; }

/* ■ スマホで、見出しの右側（「VIEW ALL」「のぞいてみる」）が画面の外に切れる
     「NANA FAMILY ROOM」のように長い英語の見出しでは、1行に収まりません。
     → 収まらないときだけ、2行目に回します（収まる見出しは今までと同じ）。
     TOPとファンクラブの「ななふぁみりROOM」の見出しで起きていました。

   ■ スマホで、SNSの枠が右に切れる
     3列のうち1列が、長いアカウント名（@houkago_sailormyuun）に合わせて広がり、
     3列の合計が画面より広くなっていました。
     → スマホでは2列にし、アカウント名が途中で改行されないようにしました。
       ファンの方が検索したり書き写したりする情報なので、読みやすさを優先しています。 */
@media (max-width: 639px) {
  .sec-head { flex-wrap: wrap; }
  .sns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- TOPのライブ欄が1件だけのとき（2026年10月 追加） ----------
   もとのデザインは2件並ぶ前提で左右2列になっています。
   予定が1件だけのときは、半分だけ埋まって欠けて見えるため、
   1列にして中央に置きます。2件に戻れば自動でもとの2列に戻ります。 */
body.nana-top .stage-grid:has(> .stage-card:only-child){
  grid-template-columns:minmax(0,560px);
  justify-content:center;
}

/* ════════════════════════════════════════════════════════════
   ヘッダー（2026年10月 追加）
   ・スマホ（639px以下）だけ「≡」で開閉するメニュー
   ・それより大きい画面では、メニューを常に表示し、ボタンの形で並べる
   ════════════════════════════════════════════════════════════ */

/* ① ロゴ「かっさいなな」は、どの画面幅でも1行のまま・縮ませない
      （以前はメニューに押されて「かっさい／なな」と折れたり、
        タブレット幅では1文字ずつ縦に並んで下にはみ出したりしていました） */
.site-header .brand{white-space:nowrap;flex-shrink:0;}

/* ② 640px以上：メニューは閉じずに常に表示。1つずつボタンの形にする */
@media (min-width:640px){
  .main-nav{flex-wrap:wrap;gap:clamp(3px,.35vw,6px);}
  /* 文字とボタンの大きさは、画面が狭いほど少しずつ小さくなる（11〜13px）。
     こうすることで、画面幅1140px以上ならロゴと同じ高さに横1列で収まります
     （LIVE を「LIVE / STAGE」にしたぶん、以前の1000pxから広げています） */
  .main-nav a{display:inline-flex;align-items:center;line-height:1;
      font-size:clamp(11px,.55vw + 6px,13px);letter-spacing:clamp(.5px,.1vw,1.5px);
      padding:6px clamp(6px,.6vw,10px);
      border:1px solid var(--line);border-radius:999px;background:var(--card);
      color:var(--ink);opacity:1;transition:background .2s,border-color .2s,color .2s;}
  .main-nav a:hover{border-color:var(--orange);color:var(--orange-deep);background:#fff;}
  /* いま見ているページ：オレンジで塗りつぶしたボタン */
  .main-nav a.is-current{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;font-weight:600;}
}

/* ③ 画面幅1140px以上：ロゴと同じ高さに横1列（ヘッダーの高さはもとのデザインのまま） */
@media (min-width:1140px){
  .main-nav{flex-wrap:nowrap;}
}
/* ④ それより小さい画面（640〜1139px）だけ、ロゴの下に2段目として並べる */
@media (min-width:640px) and (max-width:1139px){
  .header-inner{flex-wrap:wrap;height:auto;row-gap:8px;
      padding-top:10px;padding-bottom:10px;}
  .main-nav{flex-basis:100%;}
}

/* ⑤ スマホ（639px以下）：「≡」で開くメニュー（形はもとのデザインのまま） */
@media (max-width:639px){
  /* 黒いパネルを画面の上から下までの高さにする。
     ヘッダーの「すりガラス」のぼかし効果の影響で、パネルがヘッダーの高さ（約80px）に
     閉じ込められていました。もとのデザインからあった不具合で、項目が白い文字のまま
     明るい背景にはみ出し、ほとんど読めない状態でした。 */
  .main-nav{bottom:auto;height:100vh;height:100dvh;overflow-y:auto;justify-content:safe center;}
  /* いま見ているページ：金色の文字・太く・左にオレンジの線 */
  .main-nav a.is-current{opacity:1;color:var(--gold);font-weight:600;
      box-shadow:inset 3px 0 0 var(--orange);padding-left:14px;}
  /* 開いたときの「×」を2本とも白に（もとは片方が黒いパネルに溶けて「／」に見えていました） */
  .nav-toggle:checked ~ .burger span{background:#fff;}
}

/* ---------- 予定の一覧：会場を公演名の下の行に（2026年10月 追加） ----------
   もとのデザインでは会場に「上に少し隙間をあける」指定があり、
   公演名の下に置く意図でしたが、文字の途中扱いのため改行されず、
   「〜Halloween Party〜MELODIA Tokyo」のように続けて表示されていました。 */
.sc-body .sc-place,.sch-place{display:block;}

/* ════════════════════════════════════════════════════════════
   各ページいちばん上の見出し（2026年10月 追加）
   本人の希望で「HOME / ○○」の道しるべを外し、見出しまわりの余白を詰めて、
   中身が画面の上のほうから見えるようにしています。
   ════════════════════════════════════════════════════════════ */
.crumb,.fam-crumb{display:none;}   /* FAN CLUB（.fam-crumb）など、見出しの作りが違うページも含めてすべて非表示 */
.page-hero{padding-top:clamp(14px,1.8vw,24px);padding-bottom:clamp(12px,1.4vw,18px);}
/* 大きな英字見出し（NEWS など）は、本文と同じゆったりした行の高さを受け継いで
   見た目より縦に場所をとっていたので、行の高さを詰める */
.page-hero .page-en{line-height:1.15;}
.page-hero .page-jp{margin-top:2px;line-height:1.5;}
.page-hero .page-lead{margin-top:4px;line-height:1.7;}
/* 見出しのすぐ下のまとまりも、上の余白を詰める
   （各ページに直接書かれた余白より優先させるため !important を付けています） */
.page-hero + section.section{padding-top:clamp(12px,1.6vw,22px) !important;}

/* ════════════════════════════════════════════════════════════
   トップの写真（2026年10月 追加）
   パソコンでは写真の欄が「高さ730px固定」だったため、ヘッダーと合わせて
   画面の高さが815px以上ないと、写真の下（「来てくれて、ありがとう。」の付箋）が
   切れていました。ノートパソコンのブラウザはふつう700〜800px程度しかありません。
   画面の高さに合わせて縮むようにし、顔が切れないよう600pxより小さくはしません。
   あわせて、大きな画面（横1920pxなど）では写真が横に広がるぶん上下が大きく切り取られ、
   頭のてっぺんが切れていたため、写真の欄の高さを「画面の横幅に比例」させています
   （横1440pxのときに、もとのデザインと同じ730pxになる比率）。
   ════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .hero{min-height:max(600px, min(50.7vw, calc(100vh - clamp(60px,8vw,84px) - 1px)));
        min-height:max(600px, min(50.7vw, calc(100svh - clamp(60px,8vw,84px) - 1px)));}
  .hero-copy{padding-top:clamp(32px,6vh,92px);padding-bottom:clamp(32px,6vh,92px);}
}

/* ---------- トップの TOPICS（2026年10月 追加） ----------
   中身はNEWSページと共通（template-parts/news-rows.php）。
   トップでは新しい順に上から3件だけ見せる。 */
.top-topics .news-row:nth-child(n+4){display:none;}

/* ---------- 大きな名前やキャッチコピーを、言葉の途中で改行しない（2026年10月 追加） ----------
   スマホで「かっさい な／な」「シェアハピシン／ガー。」のように
   言葉の途中で折り返していたため、空白や「、」の位置で折り返すようにする。 */
.hero-name,.hero-greet,.profile-bigname{word-break:keep-all;overflow-wrap:anywhere;}

/* トップの写真の縦書き「なんか楽しそうから始まる」も、途中で2列に折れないようにする。
   スマホ・タブレットでは写真が低いため、字の間隔を少し詰めて1列に収める。 */
.hero-vtext{white-space:nowrap;}
@media (max-width:1023px){.hero-vtext{letter-spacing:.22em;top:14px;}}