@charset "UTF-8";
/* ============================================================
   ページ個別CSS（TOP以外）
   共通の site.css に足りない分を、ページごとにまとめたものです。

   各指定は body.nana-（スラッグ）の中だけに効くよう限定しています。
   限定しないと、あるページ用の装飾が別のページにもかかってしまい、
   元のデザインと変わってしまうためです。

   TOPページ用は top.css にあります。
   ============================================================ */

/* ---------- SCHEDULE ページ ---------- */
body.nana-schedule .month-block{margin-bottom:clamp(32px,4vw,52px);}
body.nana-schedule .month-label{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
body.nana-schedule .month-label .ml-num{font-family:var(--cormo);font-style:italic;font-weight:600;font-size:clamp(28px,3.4vw,44px);color:var(--orange);line-height:1;}
body.nana-schedule .month-label .ml-jp{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,21px);color:var(--ink);}
body.nana-schedule .sc-row{display:grid;grid-template-columns:120px 96px 1fr auto;align-items:center;gap:22px;
    padding:22px 10px;border-bottom:1px solid var(--line);transition:background .2s;}
body.nana-schedule .sc-list{border-top:2px solid var(--ink);}
body.nana-schedule .sc-row:hover{background:var(--paper2);}
body.nana-schedule .sc-date{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.25;color:var(--ink);}
body.nana-schedule .sc-date small{display:block;font-family:var(--sans);font-weight:500;font-size:12px;color:var(--ink-soft);margin-top:3px;}
body.nana-schedule .sc-cat{font-family:var(--latin);font-weight:600;letter-spacing:.08em;font-size:11px;text-transform:uppercase;
    color:#fff;padding:6px 0;border-radius:999px;text-align:center;}
body.nana-schedule .sc-body .sc-title{font-family:var(--serif);font-weight:700;font-size:clamp(16px,1.6vw,19px);color:var(--ink);}
body.nana-schedule .sc-body .sc-place{font-size:13px;color:var(--ink-soft);margin-top:3px;}
body.nana-schedule .sc-go{font-family:var(--latin);color:var(--orange);font-size:18px;}

@media (max-width:639px){
body.nana-schedule .sc-row{grid-template-columns:1fr auto;gap:6px 12px;padding:18px 4px;}
body.nana-schedule .sc-date{grid-column:1;font-size:17px;}
body.nana-schedule .sc-cat{grid-row:1;grid-column:2;align-self:center;padding:6px 12px;}
body.nana-schedule .sc-body{grid-column:1/-1;}
body.nana-schedule .sc-go{display:none;}
}

/* ---------- FAN CLUB ページ（ななふぁみり） ---------- */
body.nana-fanclub .fam-why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
body.nana-fanclub .why-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);
    padding:clamp(24px,2.6vw,36px);box-shadow:var(--card-shadow);}
body.nana-fanclub .why-card .why-sf{color:var(--gold);margin-bottom:14px;}
body.nana-fanclub .why-card h3{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,22px);color:var(--ink);}
body.nana-fanclub .why-card p{font-size:14px;color:var(--ink-soft);line-height:1.9;margin-top:12px;}
body.nana-fanclub .fam-cta-band{text-align:center;}
body.nana-fanclub .fam-cta-band .note{font-family:var(--hand);font-size:17px;color:var(--orange-deep);}

@media (max-width:1023px){
body.nana-fanclub .fam-why{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
}
/* ななふぁみり-starring hero */
body.nana-fanclub .fam-hero{position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(120deg,#3A2113 0%,#9A4418 50%,#E27328 86%,#EBAB22 100%);}
body.nana-fanclub .fam-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 90% at 88% 0%,rgba(235,171,34,.5),rgba(235,171,34,0) 55%);}
body.nana-fanclub .fam-hero .wrap{position:relative;padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(52px,6.5vw,92px);}
body.nana-fanclub .fam-crumb{font-family:var(--latin);font-weight:500;letter-spacing:.12em;font-size:12px;color:rgba(255,255,255,.8);
    display:flex;align-items:center;gap:8px;margin-bottom:clamp(26px,4vw,46px);}
body.nana-fanclub .fam-crumb a{color:rgba(255,255,255,.8);}
body.nana-fanclub .fam-crumb a:hover{color:#fff;}
body.nana-fanclub .fam-crumb span{color:#FCE3B8;}
body.nana-fanclub .fam-en{font-family:var(--latin);font-weight:500;letter-spacing:.34em;font-size:13px;color:#FCE3B8;
    display:inline-flex;align-items:center;gap:12px;}
body.nana-fanclub .fam-en .sf{color:var(--gold);}
body.nana-fanclub .fam-name{font-family:var(--serif);font-weight:900;font-size:clamp(52px,8.5vw,108px);line-height:1;letter-spacing:.03em;
    margin:14px 0 4px;text-shadow:0 4px 30px rgba(40,18,4,.3);}
body.nana-fanclub .fam-name .sf{width:.72em;height:.72em;vertical-align:-.04em;margin-left:.12em;}
body.nana-fanclub .fam-tagline{font-family:var(--hand);font-weight:600;font-size:clamp(22px,2.8vw,34px);color:#fff;margin-top:18px;
    transform:rotate(-1.4deg);text-shadow:0 2px 14px rgba(40,18,4,.25);}
body.nana-fanclub .fam-lead{font-size:clamp(15px,1.55vw,18px);line-height:2;color:rgba(255,255,255,.95);max-width:32em;margin-top:20px;}
body.nana-fanclub .fam-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.4vw,40px);}
body.nana-fanclub .fam-hero-cta .btn-sun{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--orange-deep);
    font-family:var(--sans);font-weight:700;font-size:15px;padding:16px 32px;border-radius:999px;transition:.2s;white-space:nowrap;}
body.nana-fanclub .fam-hero-cta .btn-sun:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px);}
body.nana-fanclub .fam-hero-cta .btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.6);
    color:#fff;font-family:var(--sans);font-weight:700;font-size:14px;padding:16px 28px;border-radius:999px;transition:.2s;}
body.nana-fanclub .fam-hero-cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;}
/* festival pennant strip at the bottom of the hero */
body.nana-fanclub .fam-hero .pennant{position:absolute;left:0;right:0;bottom:0;height:18px;
    background:repeating-linear-gradient(135deg,#EBAB22 0 22px,#E27328 22px 44px,#FCE3B8 44px 66px);opacity:.92;}
body.nana-fanclub .fam-why-intro{font-family:var(--hand);font-weight:600;font-size:clamp(20px,2.2vw,26px);color:var(--orange-deep);
    margin-bottom:clamp(22px,2.8vw,36px);transform:rotate(-1deg);}

@media (max-width:639px){
body.nana-fanclub .fam-hero-cta{flex-direction:column;align-items:stretch;}
body.nana-fanclub .fam-hero-cta .btn-sun, body.nana-fanclub .fam-hero-cta .btn-ghost{justify-content:center;}
}
/* plan card "詳しく見る" hint */
body.nana-fanclub .plan{cursor:pointer;}
body.nana-fanclub .plan-more{font-family:var(--latin);font-weight:500;letter-spacing:.06em;font-size:12px;color:var(--orange-deep);margin-top:10px;}
body.nana-fanclub .plan:hover .plan-more{color:var(--orange);}
/* plan detail modal */
body.nana-fanclub .plan-modal[hidden]{display:none;}
body.nana-fanclub .plan-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
body.nana-fanclub .pm-overlay{position:absolute;inset:0;background:rgba(40,22,8,.55);backdrop-filter:blur(3px);animation:pmfade .25s ease;}

@keyframes pmfade{from{opacity:0;}to{opacity:1;}}
body.nana-fanclub .pm-card{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--card);
    border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(40,18,4,.4);padding:clamp(28px,3.6vw,46px);animation:pmrise .3s cubic-bezier(.2,.8,.3,1);}

@keyframes pmrise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
body.nana-fanclub .pm-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:none;background:var(--paper2);border-radius:50%;
    font-size:22px;line-height:1;color:var(--ink);cursor:pointer;transition:.2s;}
body.nana-fanclub .pm-close:hover{background:var(--orange);color:#fff;}
body.nana-fanclub .pm-fam{font-family:var(--hand);font-size:14px;color:var(--orange-deep);}
body.nana-fanclub .pm-head h3{font-family:var(--serif);font-weight:900;font-size:clamp(24px,3vw,32px);color:var(--ink);margin-top:2px;}
body.nana-fanclub .pm-price{font-family:var(--cormo);font-weight:600;font-size:30px;color:var(--orange-deep);margin-top:6px;}
body.nana-fanclub .pm-price small{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink-soft);margin-left:3px;}
body.nana-fanclub .pm-section{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;}
body.nana-fanclub .pm-section h4{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--orange-deep);
    display:flex;align-items:center;gap:9px;}
body.nana-fanclub .pm-section h4::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--orange);}
body.nana-fanclub .pm-section p{font-size:14.5px;line-height:1.9;color:var(--ink);margin-top:10px;}
body.nana-fanclub .pm-perks{list-style:none;margin-top:12px;display:grid;gap:8px;}
body.nana-fanclub .pm-perks li{font-size:14px;color:var(--ink);padding-left:24px;position:relative;line-height:1.6;}
body.nana-fanclub .pm-perks li::before{content:"🌻";position:absolute;left:0;top:1px;font-size:13px;}
body.nana-fanclub .pm-note{font-size:12px !important;color:var(--ink-soft) !important;margin-top:14px !important;}
body.nana-fanclub .pm-apply{display:inline-block;margin-top:26px;}

/* ---------- ROOM ページ ---------- */
body.nana-room .cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
body.nana-room .cat-chips a{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink);background:var(--card);
    border:1px solid var(--card-border);padding:10px 18px;border-radius:999px;box-shadow:var(--card-shadow);transition:.2s;}
body.nana-room .cat-chips a:hover{background:var(--orange);color:#fff;border-color:transparent;}
body.nana-room .cat-chips a.cat-blog{background:#2C7BD2;color:#fff;border-color:transparent;}
body.nana-room .cat-chips a.cat-blog:hover{filter:brightness(1.08);background:#2C7BD2;}
body.nana-room .room-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);}

@media (max-width:1023px){
body.nana-room .room-grid-4{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:639px){
body.nana-room .room-grid-4{grid-template-columns:1fr;}
}

/* ---------- TALK ページ（ななフォン） ---------- */
body.nana-talk .talk-phone-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px);}
body.nana-talk .talk-phone-grid .phone-card{flex-direction:column;gap:4px;padding:clamp(24px,2.6vw,34px) 14px;}
body.nana-talk .talk-phone-grid .ph-unit{font-size:12px;}
body.nana-talk .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
body.nana-talk .step{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);
    padding:clamp(24px,2.6vw,34px);box-shadow:var(--card-shadow);position:relative;}
body.nana-talk .step .st-no{font-family:var(--cormo);font-style:italic;font-weight:600;font-size:34px;color:var(--orange);line-height:1;}
body.nana-talk .step h4{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);margin-top:8px;}
body.nana-talk .step p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin-top:10px;}
body.nana-talk .future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,22px);}
body.nana-talk .future-card{background:var(--card);border:1px dashed rgba(201,85,26,.4);border-radius:var(--radius-lg);
    padding:clamp(22px,2.4vw,30px);text-align:center;}
body.nana-talk .future-card .fu-nm{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);}
body.nana-talk .future-card .fu-soon{font-family:var(--latin);letter-spacing:.14em;font-size:11px;color:var(--orange-deep);margin-top:8px;display:block;}

@media (max-width:1023px){
body.nana-talk .talk-phone-grid{grid-template-columns:repeat(3,1fr);}
body.nana-talk .steps{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
body.nana-talk .future-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
}

@media (max-width:639px){
body.nana-talk .talk-phone-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- LIVE ページ：過去公演カード（2026年9月 内容更新で追加） ----------
   元デザインの過去公演枠は「Coming Soon」だけだったため、実際の公演を載せる書式を足しています。
   色・書体は「これからの予定」カード（.live-soon-card）の指定にそろえています。 */
body.nana-live .archive-card .ar-date{font-family:var(--cormo);font-style:italic;font-weight:600;font-size:22px;color:var(--orange);line-height:1.2;}
body.nana-live .archive-card .ar-soon{margin-top:6px;}
body.nana-live .archive-card .ar-title{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-top:8px;line-height:1.55;}
body.nana-live .archive-card .ar-place{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.7;}
body.nana-live .archive-card .ar-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--orange-deep);}
/* 過去公演が4件なので、パソコン幅では4列にして1枚だけ2段目に残らないようにする。
   タブレット・スマホ（1023px以下）は、元デザインどおり1列のまま。 */
@media (min-width:1024px){
body.nana-live .archive-grid{grid-template-columns:repeat(4,1fr);}
}

/* ---------- CONTACT ページ（2026年10月 追加） ----------
   カードは既存の .live-soon-card をそのまま使い、中の文字だけ整えています。 */
body.nana-contact .live-soon-card{display:flex;flex-direction:column;gap:10px;}
body.nana-contact .ct-label{align-self:flex-start;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--orange-deep);background:var(--peach);border-radius:999px;padding:5px 12px;}
body.nana-contact .live-soon-card h4{margin-top:0;}
body.nana-contact .ct-text{font-size:14px;color:var(--ink-soft);line-height:1.9;}
body.nana-contact .ct-mail{display:inline-block;font-family:var(--sans);font-weight:700;font-size:15px;
  color:var(--orange-deep);background:var(--paper2);border-radius:var(--radius);padding:10px 14px;
  word-break:normal;overflow-wrap:break-word;line-height:1.7;}
body.nana-contact .ct-mail:hover{background:var(--peach);}
body.nana-contact .ct-note{font-size:12.5px;color:var(--ink-soft);line-height:1.8;}
body.nana-contact .ct-note a{color:var(--orange-deep);font-weight:700;}
body.nana-contact .ct-sns{display:flex;flex-wrap:wrap;gap:10px;}
body.nana-contact .ct-sns a{font-family:var(--latin);font-weight:600;letter-spacing:.1em;font-size:12px;
  color:#fff;background:var(--ink);border-radius:999px;padding:9px 18px;}
body.nana-contact .ct-sns a:hover{background:var(--orange-deep);}

/* ---------- CLOCK ページ：公演後のお礼（2026年10月 追加） ---------- */
body.nana-clock .clock-thanks{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,24px);
  margin-top:clamp(32px,4vw,56px);}
body.nana-clock .clock-thanks figure{margin:0;max-width:380px;width:100%;}
body.nana-clock .clock-thanks img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);}
body.nana-clock .clock-thanks p{font-family:var(--hand);font-size:clamp(19px,2.4vw,25px);line-height:1.8;
  color:var(--orange-deep);text-align:center;}

/* ---------- LIVEページ：これからの予定カードの説明文（2026年10月 追加） ---------- */
body.nana-live .live-soon-card .ls-info{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin-top:8px;}
body.nana-live .live-soon-card .ls-info b{color:var(--ink);}

/* ---------- LIVEページ：フライヤーを切らずに出す（2026年10月 追加） ----------
   もとのデザインは縦3:4の枠に合わせて写真を切り抜く作りでした。
   フライヤーは日時やチケット代が端に書かれていることが多く、
   切れると情報が欠けてしまうため、画像そのままの形で表示します。
   どんな形のフライヤーでも、そのまま収まります。 */
body.nana-live .event-flyer .ph{aspect-ratio:auto;}
body.nana-live .event-flyer .ph > img{position:static;width:100%;height:auto;object-fit:contain;}


/* ---------- PROFILE：夢を前に出す（2026年10月 追加） ---------- */
body.nana-profile .profile-dream{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:12px 20px 12px 14px;border-radius:999px;
  background:var(--peach);border:1px solid rgba(201,85,26,.25);}
body.nana-profile .profile-dream .pd-label{font-family:var(--latin);font-weight:600;font-size:11px;letter-spacing:.18em;
  color:#fff;background:var(--orange-deep);border-radius:999px;padding:6px 12px;line-height:1;}
body.nana-profile .profile-dream .pd-text{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.8vw,21px);
  color:var(--ink);line-height:1.5;}

/* ---------- GOODS：値段が複数あるグッズ（2026年10月 追加） ---------- */
body.nana-goods .goods-pr small.gp-sub{display:block;margin:4px 0 0;font-size:12px;}
body.nana-goods .goods-nm small.gn-sub{display:block;font-family:var(--sans);font-weight:500;font-size:11.5px;
  color:var(--ink-soft);margin-top:2px;}

/* ---------- GALLERY：写真を押すと大きく見られる（2026年10月 追加） ---------- */
body.nana-gallery .ga-item{cursor:zoom-in;}
.ga-lightbox{position:fixed;inset:0;z-index:100;background:rgba(30,18,10,.9);display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);cursor:zoom-out;}
.ga-lightbox[hidden]{display:none;}
.ga-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.ga-lightbox .ga-close{position:absolute;top:14px;right:18px;font-size:30px;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer;padding:6px 10px;}

/* ---------- LIVE：過去公演に写真（2026年10月 追加） ----------
   写真はカードの上いっぱいに。写真がない公演は、ひまわりの枠で高さをそろえる。 */
body.nana-live .archive-card{display:flex;flex-direction:column;align-items:center;}
body.nana-live .archive-card .ar-photo{align-self:stretch;margin:calc(-1 * clamp(22px,2.4vw,30px)) calc(-1 * clamp(22px,2.4vw,30px)) 16px;
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--paper2);}
body.nana-live .archive-card .ar-photo img{width:100%;height:100%;object-fit:cover;display:block;}
body.nana-live .archive-card .ar-noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--peach),var(--paper2));color:var(--orange);opacity:.85;}

/* ---------- MUSIC：管理画面から追加した曲（2026年10月 追加） ---------- */
.song-jacket.song-noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--peach),var(--paper2));color:var(--orange);}
.song-jacket.song-noimg::before,.song-jacket.song-noimg::after{display:none;}
.song-note{font-size:13px;color:var(--ink-soft);line-height:1.8;margin-top:6px;}

/* ---------- PROFILE：キーワードのカード（2026年10月 追加） ----------
   もとのデザインでは、この見た目の指定が FAN CLUB 専用になっていて、
   PROFILE ではカードにならず、ひまわりも濃い茶色（ネジのよう）に見えていました。
   FAN CLUB と同じ指定を PROFILE にも当てます。 */
body.nana-profile .fam-why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
body.nana-profile .why-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);
    padding:clamp(24px,2.6vw,36px);box-shadow:var(--card-shadow);}
body.nana-profile .why-card .why-sf{color:var(--gold);margin-bottom:14px;}
body.nana-profile .why-card h3{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,22px);color:var(--ink);}
body.nana-profile .why-card p{font-size:14px;color:var(--ink-soft);line-height:1.9;margin-top:12px;}
@media (max-width:1023px){
  body.nana-profile .fam-why{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
}
body.nana-profile .fam-why-intro{font-family:var(--hand);font-weight:600;font-size:clamp(20px,2.2vw,26px);color:var(--orange-deep);
    margin-bottom:clamp(22px,2.8vw,36px);transform:rotate(-1deg);}