/* =========================================================
   business.css ─ 事業案内まわり4ページ専用（/business/ 配下）
   /business/ ・/business/amuseum/ ・/business/print-studio/ ・/business/peterpan/
   ★クラスは全部 bz- 接頭辞（既存クラスと衝突させない）。
   ★common.css / page.css の部品（.wrap .s .s-head .eyebrow .title .lead .btn .ph-in）
     で足りるものは足していない。ここにあるのは「4ページで新しく要った型」だけ。
   読み込み順：common.css → page.css → business.css
   ========================================================= */

/* ---------- ページヘッダーの巨大英字：文字列が長いページだけSP下限を下げる ----------
   .eyebrow.lg の既定は clamp(38px,6.95vw,100px)。SP390の版面は 390-18*2=354px しかなく、
   文字数が多いと 38px でも版面を超える（common.css の #news = NEWS & TOPICS と同じ事情。
   ★「同じdeviceでも文字列長で下限が変わる」）。→ そのページの .page-hero にだけ効かせる。
   特異度 (0,3,0) > common.css の .eyebrow.lg (0,2,0)＝確実に勝つ。
   ★下限は目測でなく390で実測して決めた（headlessで .eyebrow.lg の実幅を採寸）：
     Business(8字)=213px / Amuseum(7字)=221px / Print Studio(12字)=308px … 全部38pxのまま354pxに収まる
     Kids Attraction(15字) だけ 38px→401px で版面超過。→ このページだけ下限を30pxへ（→317px）。 */
.page-hero.bz-eb-long .eyebrow.lg{font-size:clamp(30px,6.95vw,100px);}   /* Kids Attraction（15字） */

/* ---------- ブランドのキービジュアル（版面いっぱいの21:9） ----------
   .ph-in の角丸と左右の枠線だけ落として、ページヘッダー直下に横いっぱいで敷く。
   ★SPは21:9だと高さ167pxで潰れるので 4/3 に切り替える。 */
.bz-kv{aspect-ratio:21/9;border-radius:0;border-left:0;border-right:0;}
/* 写真版のKV。プレースホルダ(.bz-kv)と同じ比率・同じ振る舞いにそろえる */
.bz-kv-img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;}

/* ---------- 見出しの泣き別れ止め ----------
   最終行に1文字だけ残る折返しを防ぐ（行長を均等に割り付ける）。
   ★SP390で実測して見つけた：「お近くのアミュージアムを探す」（26pxで368px要る／版面354px）
     「絵本の世界に迷い込む、遊び場」「Forest Print Studio の楽しみ方」が全部“最終行1文字”だった。
   font-size を字数に合わせて刻むより、折返しを均衡させる方が字数の増減に強い。
   ※未対応ブラウザでは単に今までどおり折り返すだけ＝害はない。 */
.bz-balance{text-wrap:balance;}

/* ---------- コンセプトの一文（B to Fun） ----------
   ページの主役コピー。.s-head の既定 760px だと 1440/1920 で 20px 足りず、
   「す。」だけが2行目に落ちる（実測：46px時に1行へ要る幅=780px）。→ このブロックだけ 820px に。
   ★.lead まで820pxに広がると和文1行が約51字＝読みにくいので、リードは760pxに戻す。 */
.s-head.bz-concept{max-width:820px;}
.bz-concept .lead{max-width:760px;margin-left:auto;margin-right:auto;}

/* ---------- 運営ブランド一覧（写真＋文章の左右交互） ---------- */
.bz-brands{display:flex;flex-direction:column;gap:clamp(32px,4.2vw,60px);margin-top:clamp(46px,5vw,72px);}
.bz-brand{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(20px,2.6vw,44px);
  align-items:center;background:#fff;border-radius:100px;padding:clamp(28px,3vw,48px);position:relative;}
/* 偶数行は写真を右へ（写真列の比率も入れ替える） */
.bz-brand:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.85fr);}
.bz-brand:nth-child(even) .bz-brand-ph{order:2;}
.bz-brand-ph .ph-in{aspect-ratio:4/3;}
/* ブランド写真＋TOP事業内容のイラスト（写真の反対側の下部にのぞかせる） */
.bz-brand-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;}
/* 写真側の外下角にのぞかせる：奇数=写真左→左下／偶数=写真右→右下（3倍の70%サイズ） */
.bz-ill{position:absolute;bottom:clamp(-10px,-1vw,-18px);left:clamp(4px,.8vw,16px);right:auto;
  width:clamp(161px,21.7vw,252px);height:auto;z-index:2;filter:drop-shadow(0 6px 9px rgba(60,45,25,.16));pointer-events:none;}
.bz-brand:nth-child(even) .bz-ill{left:auto;right:clamp(4px,.8vw,16px);}
/* イラスト内キャラが飛び跳ねる */
.bz-jump{animation:bzJump 1.5s ease-in-out infinite;}
@keyframes bzJump{0%,100%{transform:translateY(0);}42%{transform:translateY(-24px);}}
@media(prefers-reduced-motion:reduce){.bz-jump{animation:none;}}
/* ブランドロゴ（あるブランドのみ・名前の上） */
.bz-logo{display:block;height:clamp(45px,5.4vw,69px);width:auto;max-width:80%;object-fit:contain;object-position:left center;margin-bottom:clamp(12px,1.4vw,18px);}  /* 名前テキストの代わり・1.5倍 */
/* カテゴリ（和英混在なので .fact-lb の10pxは使わず12px） */
.bz-cat{display:block;font-size:16px;font-weight:700;letter-spacing:.1em;line-height:1.7;
  color:var(--accent);margin-bottom:clamp(18px,2.1vw,30px);}   /* 12→16px・下余白10→30px(PC1440基準) */
.bz-name{font-size:clamp(19px,1.7vw,26px);font-weight:700;line-height:1.5;margin:0 0 12px;}
.bz-txt{color:var(--ink);font-size:15px;line-height:2;margin:0 0 clamp(20px,2.1vw,30px);}  /* 2カラム＝15px／文字色を濃く・下余白26→30px(PC1440基準) */
/* 登録商標マーク。.5em だけだとSP（.bz-name=19px）で9.5pxまで落ちるので下限を張る
   ※読ませる文字でなく記号なので11px。本文の最小12pxとは別扱い（要確認事項として申し送り） */
.bz-rm{font-size:max(11px,.5em);font-weight:500;letter-spacing:.02em;vertical-align:super;}

/* ---------- ボタンの並び ---------- */
.bz-btns{display:flex;flex-wrap:wrap;gap:10px;}
/* ブランドページ Stores のCTAは中央寄せ（見出し.s-headが中央寄せなのに合わせる）。
   #stores は amuseum / peterpan のみ・business.css は他ページで読まれないので安全 */
#stores .bz-btns{justify-content:center;}
/* section#stores の余白を 0 に（全ページ＝amuseum / peterpan の2ページ） */
#stores{padding:0;}
/* ブランドページ：セクション見出しの上に置く店舗ロゴ（中央寄せ）。
   ★地色が --paper-2 なので透過PNGを使う（白背景のJPGだと白い箱が出る） */
.bz-brand-logo{display:block;margin:0 auto clamp(20px,2.4vw,34px);height:clamp(52px,5.6vw,86px);width:auto;max-width:100%;object-fit:contain;}
/* #experience の上余白だけ 132→180px(PC1440基準)。
   ★#experience は3ブランドページ共通のidなので、この要素だけに効くよう
   amuseum の section にだけモディファイア class を付けてスコープしている（body class は3ページとも sub で区別不可） */
.bz-exp-top{padding-top:clamp(98px,13.6vw,180px);}
.bz-ar{flex:none;width:14px;height:auto;display:block;}

/* ---------- 左右分割（対応エリア／店舗を探す） ---------- */
.bz-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.6vw,64px);align-items:center;}
/* 見出しは .title 既定（最大46px）だと半分の列に対して大きすぎる。実測：
   「お近くのアミュージアムを探す」は46pxで650px要るのに列幅は608〜622px＝PC全幅で「す」だけが
   2行目に落ちた。中央寄せの全幅セクション見出しより一段小さくするのが階層としても正しい。
   ★SP下限は既定どおり26pxのまま（SPは素直に2行で折り返させる）。 */
.bz-split .title{font-size:clamp(26px,2.6vw,36px);}
.bz-split .bz-btns{margin-top:clamp(24px,2.6vw,36px);}
/* .bz-map / .bz-jpmap / .bz-jpland / .bz-jpmark は common.css へ集約（business・amuseum・peterpan・stores の4ページで共有）*/
/* 地図を大きく見せるため #area だけ地図側の列を広げる（SPの1カラム化を壊さないよう min-width で囲う） */
@media(min-width:901px){
  #area .bz-split{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);}
}
/* 対応エリアの見出しだけ左寄せ（business.css は他ページで読まれないので #area で安全にスコープ） */
#area .s-head{text-align:left;}
/* 巨大白抜き AREA は position:relative+left:50%+translateX(-50%) の中央寄せなので、text-align では動かない。左端に付け直す */
#area .eyebrow.lg{left:0;transform:none;}
/* テキスト列（見出し＋リード＋ボタン）を200px上へ。1440で -200px ちょうど・狭いPCでは緩めに。
   SPは1カラムで上のセクションに突っ込むため PC限定（min-width:901px）。transform＝レイアウトに影響させない */
@media(min-width:901px){
  #area .bz-split > div:first-child{transform:translateY(clamp(-200px,-13.9vw,-120px));}
  /* 地図を上のセクション(#brands)に100px重ねる。#area の上余白132pxぶん＋100pxで -232px(1440基準)。
     #brands/#area とも overflow:visible なので切れない。SPは1カラムでブランドカードに突っ込むため除外 */
  #area .bz-map{transform:translateY(clamp(-232px,-16.1vw,-140px));}
  /* transform は場所を確保したままなので、地図を上げたぶん下に空きが残る。
     地図と同じ値の負マージンで相殺し、下余白を通常のセクション余白(132px@1440)に戻す */
  #area{margin-bottom:clamp(-232px,-16.1vw,-140px);}
}
/* #brands の下余白だけ 132→250px（この要素のみ）。上で地図が重なる余白を作る */
#brands{padding-bottom:clamp(136px,17.4vw,250px);}

/* ---------- カードグリッド（遊びのラインナップ／楽しみ方） ---------- */
.bz-grid{display:grid;gap:clamp(14px,1.6vw,26px);margin-top:clamp(46px,5vw,72px);}
.bz-grid-4{grid-template-columns:repeat(4,1fr);}
.bz-grid-3{grid-template-columns:repeat(3,1fr);}
.bz-card{background:#fff;border-radius:clamp(16px,1.6vw,22px);padding:clamp(14px,1.4vw,20px);transition:transform .3s;}
.bz-card:hover{transform:translateY(-5px);}
.bz-grid-4 .ph-in{aspect-ratio:1/1;}
.bz-grid-3 .ph-in{aspect-ratio:4/3;}
/* 写真版のカード画像。プレースホルダ(.ph-in)と同じ比率・角丸にそろえる */
.bz-card-img{display:block;width:100%;object-fit:cover;border-radius:14px;}
.bz-grid-4 .bz-card-img{aspect-ratio:1/1;}
.bz-grid-3 .bz-card-img{aspect-ratio:4/3;}
.bz-card-ttl{font-size:clamp(14px,1.15vw,16px);font-weight:700;line-height:1.7;margin:clamp(13px,1.3vw,17px) 0 0;}
.bz-grid-4 .bz-card-ttl{text-align:center;}   /* 本文が無い＝タイトルだけなので中央に置く */
.bz-card-tx{color:var(--ink-2);font-size:14px;line-height:1.95;margin:8px 0 0;}   /* 3カラム＝14px */
/* グリッド下の単独ボタン */
.bz-grid-btn{display:flex;justify-content:center;margin-top:clamp(30px,3.2vw,48px);}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .bz-brand,.bz-brand:nth-child(even){grid-template-columns:1fr;}
  .bz-brand:nth-child(even) .bz-brand-ph{order:0;}
  .bz-split{grid-template-columns:1fr;}
  .bz-grid-4,.bz-grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .bz-kv,.bz-kv-img{aspect-ratio:4/3;}
  .bz-grid-3{grid-template-columns:1fr;}
  .bz-grid-3 .ph-in,.bz-grid-3 .bz-card-img{aspect-ratio:16/9;}
}

/* ---------- business・SP ---------- */
@media(max-width:640px){
  /* ブランド行の余白 28一律→上60/左右30/下120（下は .bz-ill のはみ出し分の逃げ） */
  .bz-brand{padding:60px 30px 120px;}
  /* SPは奇数行も含め .bz-ill を全て右寄せに統一（積み時に左右バラつかせない） */
  .bz-brand .bz-ill{left:auto;right:clamp(4px,.8vw,16px);}
}

/* ---------- ピーターパンと仲間たち＝アミュージアムの中の店舗 ----------
   単独のブランドカードをやめ、アミュージアムのテキスト段の下に入れ子で置く。
   囲みは薄い外線1本（座布団・色罫は使わない）。ロゴは親カードの半分の高さにして従属関係を出す。 */
.bz-sub{margin-top:clamp(26px,2.8vw,38px);padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:20px;}
.bz-sub-lb{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-2);margin-bottom:clamp(12px,1.4vw,18px);}
.bz-sub-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(14px,1.6vw,24px);align-items:center;}
.bz-sub-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;}
.bz-sub-logo{display:block;height:clamp(38px,4.2vw,54px);width:auto;max-width:70%;object-fit:contain;object-position:left center;margin-bottom:10px;}
.bz-sub .bz-cat{font-size:13px;margin-bottom:10px;}
.bz-sub .bz-txt{font-size:14px;line-height:1.95;margin-bottom:clamp(14px,1.5vw,20px);}
@media(max-width:900px){
  .bz-sub-in{grid-template-columns:1fr;}
  .bz-sub-ph img{aspect-ratio:16/9;}
}

/* ---------- ブランドロゴの支給ぶんを反映 ----------
   Forest Print Studio は「ミントの帯」ごとが正規のロゴ＝角を丸めて版面になじませる。
   CARD BOX と S CARD OASIS は1つのカードに2ブランドなので横に並べ、狭い幅では縦に積む。 */
.bz-logo-band{height:auto;width:min(100%,340px);max-width:100%;border-radius:10px;}
.bz-logos{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(12px,1.4vw,18px);}
.bz-logos .bz-logo{margin-bottom:0;height:clamp(30px,3.4vw,44px);max-width:none;}
@media(max-width:640px){
  .bz-logo-band{width:100%;}
  .bz-logos{gap:12px;}
}

/* 出店エリアの地図を大きく（2026-09-16）。地図は common.css で4ページ共有のため、business の #area だけにスコープする */
@media(min-width:901px){
  /* 地図の列を広げたうえで、右のガター(--gut)まではみ出させる。778px→約930px。
     ガターは .wrap の padding なので、負マージンで食い込んでも画面の外には出ない */
  #area .bz-jpmap{max-width:none;}
  #area .bz-map{margin-right:calc(-1 * var(--gut));}
}