/* =========================================================
   stores.css ─ 店舗一覧 / 店舗詳細 / 出店パートナー募集 の3ページ固有
   読み込み順： common.css → page.css → stores.css
   ★クラスは全て st- 接頭辞（TOPの .pt-* / page.css の汎用部品と衝突させない）
   ★色は common.css の :root のみ。新しい色は足さない
   ========================================================= */

/* ---------- 共通：カードグリッド ----------
   カラム数で本文サイズを決める（1カラム16px / 2カラム15px / 3カラム以上14px） */
.st-grid{display:grid;gap:clamp(14px,1.6vw,26px);margin-top:clamp(40px,4.4vw,64px);}
.st-grid.st-c2{grid-template-columns:repeat(2,1fr);}
.st-grid.st-c3{grid-template-columns:repeat(3,1fr);}
.st-grid.st-c4{grid-template-columns:repeat(4,1fr);}
.st-grid.st-c5{grid-template-columns:repeat(5,1fr);}

/* ---------- 共通：白カード ---------- */
.st-card{background:#fff;border-radius:clamp(16px,1.6vw,22px);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
/* ★ホバーはリンクのカードだけ（非リンクに付けると押せそうに見える偽アフォーダンス） */
a.st-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(60,40,20,.5);}
/* カード内の写真枠は角丸・枠線を殺してカード上端に密着させる（親が overflow:hidden） */
.st-card .ph-in{border-radius:0;border:0;aspect-ratio:16/9;}
.st-card .ph-in.st-sq{aspect-ratio:1/1;}
/* ★写真枠の地色だけ差し替える：既定の --line-2(#f0ebe2) は --paper-2(#F2EEE7) のセクション上で
   ほぼ同色（コントラスト比1.02）＝カードの写真部分が地に溶けて「カードの上半分が消える」。
   --line なら --paper / --paper-2 どちらの地でも枠として見える（比1.13＝about の写真枠と同等）。
   写真が入れば解消するが、いまレビューするのは写真待ちの状態なので枠が見えることを優先する。
   ※ <br> が効かない件（display:flex）は common.css 側で flex-direction:column が入り解決済み。 */
.st-card .ph-in,.st-brand .ph-in,.st-map .ph-in,.st-visual .ph-in{background:var(--line);}
.st-card-b{padding:clamp(16px,1.5vw,20px);}
.st-cat{font-size:13px;line-height:1.7;color:var(--ink-2);letter-spacing:.04em;margin:0 0 8px;}
.st-name{font-size:clamp(16px,1.45vw,20px);font-weight:700;line-height:1.6;margin:0;}
.st-card-tx{color:var(--ink-2);font-size:15px;line-height:28px;margin:10px 0 0;}
/* 01〜04 / TYPE 01 などの通し番号（about の .value-no と同じ language） */
.st-no{font-family:var(--lt);font-size:clamp(22px,2.3vw,30px);font-weight:600;letter-spacing:.06em;
  line-height:1;color:#f2eee7;display:block;margin-bottom:12px;}   /* 淡色のゴースト数字 */
.st-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;}
.st-hours{font-family:var(--lt);font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:.02em;}
/* 既定＝白カードの上に置くタグ（地は --paper-2） */
.st-tag{font-size:12px;line-height:1;padding:7px 11px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-2);letter-spacing:.04em;white-space:nowrap;}
/* ★地が --paper-2 のページヘッダー、および hover で --line-2 になるお知らせ行では
   --paper-2 のタグは地に沈んで消える（#F2EEE7 と #f0ebe2 はほぼ同色）。地色で反転させる。 */
.st-news .st-tag{background:#fff;border:1px solid var(--line);}
/* 店舗詳細のタグは囲いをやめてハッシュタグ表記に */
.st-tags .st-tag{background:none;border:0;padding:0;font-size:14px;color:var(--accent);font-weight:500;letter-spacing:.02em;}

/* ---------- 共通：定義リスト（店舗情報・募集条件・タイプ別スペック） ----------
   ★表はSPで崩れるので dl。--st-dt=ラベル列幅 / --st-fz=本文サイズ を用途ごとに差し替える */
/* ★グリッドは .st-dl（表全体）に1つだけ持たせ、行は display:contents で透過させる。
   行ごとに grid を張ると列幅が行ごとに解決され、値の頭が行によってズレる（203坪だけ右にずれた） */
.st-dl{--st-dt:132px;--st-fz:15px;--st-pad:16px;
  display:grid;grid-template-columns:minmax(var(--st-dt),max-content) minmax(0,1fr);
  background:#fff;border-radius:clamp(16px,1.6vw,22px);overflow:hidden;margin:0;}
/* ラベル列は minmax(下限, max-content)＝表の中で一番長いラベルに自動で合わせる。
   固定幅だと「アミューズメント面積」が列内で2行に割れる（手で数字を足すと他の表が破綻する） */
.st-dl-row{display:contents;}
.st-dt,.st-dd{border-top:1px solid var(--line-2);}
.st-dl-row:first-child .st-dt,.st-dl-row:first-child .st-dd{border-top:0;}
/* ★ラベル列に地色を敷かない：--paper を敷くと --paper のセクション上で列ごと消え、
   --paper-2 のセクション上では白カードが欠けて見える。太さと色だけで区別する（地色に依存しない） */
.st-dt{margin:0;padding:var(--st-pad) clamp(16px,1.6vw,22px);background:transparent;
  font-size:14px;font-weight:700;line-height:1.7;color:var(--ink);}
.st-dd{margin:0;padding:var(--st-pad) clamp(16px,1.6vw,22px);
  font-size:var(--st-fz);line-height:1.9;color:var(--ink-2);}
/* 1カラムで見せる表（募集条件）＝本文16px・ラベル列広め */
.st-dl.st-wide{--st-dt:160px;--st-fz:16px;--st-pad:18px;}
.st-dl.st-narrow-dl{max-width:820px;margin-left:auto;margin-right:auto;margin-top:clamp(40px,4.4vw,64px);}
/* カードの中に置く小さいスペック表＝地は透明・罫だけ */
.st-dl.st-sm{--st-dt:78px;--st-fz:15px;--st-pad:11px;
  background:transparent;border-radius:0;border-top:1px solid var(--line-2);margin-top:clamp(14px,1.4vw,18px);}
.st-dl.st-sm .st-dt,.st-dl.st-sm .st-dd{padding-left:0;padding-right:0;}
.st-dl.st-sm .st-dd{padding-left:12px;}

/* ---------- 共通：ボタン列 ---------- */
.st-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.4vw,32px);}
.st-actions.st-center{justify-content:center;}
.st-grid + .st-actions{margin-top:clamp(36px,4vw,54px);}

/* ---------- 共通：地図プレースホルダ ----------
   全国マップは版面いっぱいに広げると「ただの巨大な灰色」になるので幅を抑える */
.st-map{max-width:1040px;margin:clamp(28px,3vw,44px) auto 0;}
.st-map .ph-in{aspect-ratio:16/9;}
/* 店舗詳細のアクセス地図（Googleマップ埋め込み）。プレースホルダと同じ比率・角丸にそろえる */
.st-gmap{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;}
/* 一覧の全国マップ＝Googleマイマップ（44店舗のピン）。iframeは高さを持たないので比率で確保する */
.st-gmap-all{aspect-ratio:16/10;border-radius:clamp(16px,1.8vw,24px);}

/* =========================================================
   店舗一覧（/stores/）
   ========================================================= */
/* エリア絞り込みチップ（見た目＋ページ内の簡易JSで動く。実装時はCMS検索に置き換え） */
.st-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(30px,3.2vw,44px);}
.st-chip{font-family:var(--jp);font-size:14px;font-weight:500;line-height:1;padding:12px 20px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);cursor:pointer;transition:.25s;}
.st-chip:hover{border-color:var(--ink);color:var(--ink);}
.st-chip.st-on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
/* 絞り込み結果が0件のとき（JSが .st-on を付ける） */
.st-empty{display:none;text-align:center;color:var(--ink-2);font-size:15px;line-height:2;
  padding:clamp(40px,5vw,72px) 0 0;margin:0;}
.st-empty.st-on{display:block;}
/* ページャ */
.st-pager{display:flex;justify-content:center;gap:8px;margin-top:clamp(36px,4vw,56px);}
.st-page{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-family:var(--lt);font-size:14px;font-weight:500;color:var(--ink-2);transition:.25s;}
a.st-page:hover{border-color:var(--ink);color:var(--ink);}
.st-page.st-on{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* =========================================================
   店舗詳細（/stores/detail/）
   ========================================================= */
.st-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:clamp(14px,1.6vw,20px);}
/* 店舗ビジュアル（ワイヤーの 21:9） */
.st-visual .ph-in{aspect-ratio:21/9;border-radius:clamp(16px,1.8vw,24px);}
/* 店舗写真（CTAボタンの上）。プレースホルダと同じ比率・角丸 */
.st-visual-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:clamp(16px,1.8vw,24px);}
.st-visual{margin-top:clamp(22px,2.4vw,32px);}
/* 店舗情報 ＋ 地図 */
.st-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;margin-top:clamp(36px,4vw,56px);}
/* ★margin:0 まで戻すこと。グリッドアイテムに margin-left/right:auto が残ると
   「中央寄せ＝収縮」になって地図が中身サイズまで潰れる（.st-map の auto を継承させない） */
.st-split .st-map{max-width:none;margin:0;}
.st-split .st-map .ph-in{aspect-ratio:4/3;}
/* ページヘッダーに置く注記（テンプレート見本の断り書き）＝リード幅に揃える */
.st-hero-note{max-width:680px;margin-left:auto;margin-right:auto;}
/* この店舗のお知らせ（TOPの .news-row と同じ language） */
.wrap.st-narrow{max-width:964px;}
.st-news{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line);}
.st-news-row{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  padding:clamp(16px,1.6vw,20px) 4px;border-bottom:1px solid var(--line-2);transition:background .25s;}
.st-news-row:hover{background:var(--line-2);}
.st-news-date{flex:none;width:92px;font-family:var(--lt);font-size:13px;font-weight:500;color:var(--ink-2);}
.st-news-ttl{font-size:16px;font-weight:500;line-height:1.7;}
.st-news-row:hover .st-news-ttl{color:var(--accent);}

/* =========================================================
   出店パートナー募集（/partner/）
   ========================================================= */
/* 証明カード＝about と同じ .fact を流用。ただし確定している事実が2つなので2列に。
   ★page.css の .facts と同特異度＝後勝ち。SPの1列指定も page.css と同じ幅で貼り直さないと
     stores.css が勝って2列のまま潰れる（下の 900 のブロックで再指定している） */
.facts.st-facts2{grid-template-columns:repeat(2,1fr);}

/* ストアブランド */
.st-brand{display:flex;flex-direction:column;background:#fff;border-radius:clamp(16px,1.6vw,22px);
  overflow:hidden;transition:transform .3s,box-shadow .3s;}
.st-brand:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(60,40,20,.5);}
.st-brand .ph-in{border-radius:0;border:0;aspect-ratio:4/3;}
.st-brand-b{display:flex;align-items:center;gap:10px;padding:clamp(14px,1.4vw,18px);}
.st-brand-nm{font-size:14px;font-weight:700;line-height:1.5;min-width:0;}
.st-brand-ar{flex:none;margin-left:auto;width:18px;height:auto;color:var(--accent);transition:transform .25s;}
.st-brand:hover .st-brand-ar{transform:translateX(3px);}

/* 出店相談の流れ */
.st-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px);margin-top:clamp(40px,4.4vw,64px);}
.st-step{background:#fff;border-radius:clamp(16px,1.6vw,22px);
  padding:clamp(24px,2.6vw,36px) clamp(16px,1.6vw,22px);text-align:center;}
.st-step-no{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px);border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--lt);font-size:14px;font-weight:600;letter-spacing:.04em;margin-bottom:16px;}
.st-step-ttl{font-size:14px;font-weight:700;line-height:1.8;margin:0;}

/* ---------- 出店のご相談＝深緑パネル（TOPの #partner と地続き） ---------- */
.st-panel{position:relative;background:var(--green);color:#fff;text-align:center;
  border-radius:clamp(24px,3vw,44px);padding:clamp(52px,6.2vw,100px) clamp(28px,4vw,76px);}
.st-panel-icon{display:block;width:clamp(52px,5vw,74px);margin:0 auto clamp(18px,2vw,26px);}
.st-panel-icon svg{width:100%;height:auto;display:block;}
.st-panel-lab{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:clamp(8px,1vw,14px);margin:0 0 clamp(16px,1.8vw,24px);}
/* TOPの .pt-en と同じ組み（英字＋下線） */
.st-panel-en{font-family:var(--lt);font-size:clamp(30px,3.7vw,53px);font-weight:600;letter-spacing:.1em;line-height:1;
  padding-bottom:7px;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 2px;background-repeat:no-repeat;background-position:left bottom;}
.st-panel-ja{font-size:clamp(14px,1.2vw,17px);font-weight:700;}
.st-panel-tx{font-size:clamp(14px,1.05vw,15px);line-height:2;margin:0 auto;max-width:620px;color:rgba(255,255,255,.86);}
.st-tel{font-family:var(--lt);font-size:clamp(27px,2.5vw,36px);font-weight:600;letter-spacing:.02em;
  margin:clamp(18px,2vw,26px) 0 0;color:#fff;}
.st-tel small{display:block;font-family:var(--jp);font-size:16px;font-weight:400;letter-spacing:1px;
  color:rgba(255,255,255,.66);margin:0 0 20px;}
/* 深緑パネルの上＝白ピル（白地に白ピルは消えるので地色で反転させる：TOPの .pt-btn と同じ約束） */
.st-panel-btn{background:#fff;color:var(--ink);margin-top:clamp(22px,2.4vw,34px);}
.st-panel-btn .cir{background:var(--green);color:#fff;}
/* パネルの縁をまたいで遊ぶキャラ（アニメは common.css の fpHop/fpSpin/fpBob を再利用） */
.st-panel-ch{position:absolute;display:block;height:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 8px 7px rgba(16,12,6,.28));}
.st-ch1{left:6%;top:calc(-1 * clamp(40px,4.2vw,60px));width:clamp(80px,8.8vw,128px);
  animation:fpHop 2.6s ease-in-out infinite .2s;}
.st-ch2{right:7%;top:calc(-1 * clamp(36px,3.8vw,54px));width:clamp(72px,8vw,116px);
  animation:fpSpin 5.4s ease-in-out infinite .9s;transform-origin:50% 64%;}
.st-ch3{left:14%;bottom:calc(-1 * clamp(38px,4vw,56px));width:clamp(76px,8.4vw,120px);
  animation:fpBob 3.1s ease-in-out infinite .5s;}
.st-ch4{right:16%;bottom:calc(-1 * clamp(32px,3.4vw,48px));width:clamp(66px,7.2vw,104px);
  animation:fpSpin 6.2s ease-in-out infinite 1.7s;transform-origin:50% 64%;}
/* ★common.css の reduced-motion 指定は .fp/.pt-ch しか見ていない＝自分の分は自分で止める */
@media(prefers-reduced-motion:reduce){.st-panel-ch{animation:none!important;}}

/* =========================================================
   Responsive（page.css と同じ 900 / 560 で折る）
   ========================================================= */
/* ブランドは3列×2列・中央寄せ。5枚なので2行目(2枚)を中央に置くため grid でなく flex */
#brands .st-grid{display:flex;flex-wrap:wrap;justify-content:center;}
#brands .st-brand{flex:0 0 calc((100% - 2 * clamp(14px,1.6vw,26px)) / 3);}

/* ===== 出店パートナー：写真まわり ===== */
/* ブランドカードの写真とロゴ */
.st-brand-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.st-brand-logo{display:block;height:clamp(26px,2.6vw,38px);width:auto;max-width:100%;object-fit:contain;}
/* 数字の下に写真／数字は写真に少し重なる（負マージンで重ねる＝場所は確保される） */
.st-card-ph{overflow:hidden;}
.st-card-ph .st-card-img{aspect-ratio:4/3;}
/* ★ で数字が淡色(#f2eee7)になったため、白いピルの上では見えない。
   → ピルをやめ「写真の上に置く淡色の数字」にする（絶対配置で本文の直上＝写真の下端に重ねる）。
   写真の明暗が一定でないので影で可読性を担保する。 */
.st-card-ph .st-card-b{position:relative;}
.st-card-ph .st-no{position:absolute;bottom:100%;left:clamp(16px,1.5vw,20px);
  margin:0 0 clamp(8px,1vw,14px);background:none;padding:0;line-height:1;
  text-shadow:0 2px 10px rgba(28,26,23,.55);}
/* 全面写真＋濃度レイヤー（文字が乗るので暗くする） */
.st-bgphoto{position:relative;isolation:isolate;background:var(--ink);}
.st-bgphoto-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.st-bgphoto::before{content:"";position:absolute;inset:0;background:rgba(28,26,23,.66);z-index:-1;}
/* dlの背景を取り、テキストと罫を白に＝写真の上に直接置く */
.st-bgphoto > .wrap > .s-head .title{color:var(--paper);}
.st-bgphoto .st-dl{background:none;box-shadow:none;border:0;}
.st-bgphoto .st-dt,.st-bgphoto .st-dd{color:var(--paper);border-color:rgba(251,249,246,.34);}
/* ★巨大白抜き英字は淡い地では「ほぼ不可視」の飾りだが、濃い地だと完全に出て見出しと competing する。
   写真セクションでは透かして、h2 を主役に戻す */
.st-bgphoto .eyebrow.lg{color:rgba(251,249,246,.2);}
.st-bgphoto::before{background:rgba(28,26,23,.72);}


.st-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(46px,5vw,72px);}
.st-fl{display:flex;flex-direction:column;}
.st-fl-no{display:flex;flex-direction:column;margin:0 0 clamp(2px,.6vw,8px);padding-left:4px;}
.st-fl-lb{font-family:var(--lt);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-3);}
.st-fl-no b{font-family:var(--lt);font-size:clamp(34px,3.6vw,48px);font-weight:600;line-height:1.05;letter-spacing:.02em;}
.st-fl-ill{display:block;width:clamp(96px,10vw,132px);height:auto;margin:0 auto -14px;position:relative;z-index:2;}
.st-fl-card{background:#fff;border-radius:clamp(16px,1.6vw,22px);padding:clamp(22px,2.4vw,32px);
  padding-top:clamp(28px,3vw,40px);flex:1;text-align:center;}
.st-fl-ttl{font-size:clamp(16px,1.4vw,19px);font-weight:700;line-height:1.6;margin:0 0 10px;}
.st-fl-tx{color:var(--ink-2);font-size:14px;line-height:1.95;margin:0;text-align:left;}

@media(max-width:1180px){
  .st-grid.st-c5{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:900px){
  .st-flow{grid-template-columns:repeat(2,1fr);}
  .st-grid.st-c2,.st-grid.st-c3,.st-grid.st-c4{grid-template-columns:repeat(2,1fr);}
  .st-split{grid-template-columns:1fr;}
  .st-steps{grid-template-columns:repeat(2,1fr);}
  /* ★page.css の .facts{1fr} と同特異度。stores.css が後ろ＝貼り直さないと2列のまま */
  .facts.st-facts2{grid-template-columns:1fr;}
  .st-panel-tx{max-width:none;}
}
@media(max-width:640px){
  .st-grid.st-c5{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .st-flow{grid-template-columns:1fr;}
  .st-grid.st-c2,.st-grid.st-c3,.st-grid.st-c4{grid-template-columns:1fr;}
  /* ★小さい正方形カード（この店舗の遊び）は SP でも2列を保つ。
     .st-c4 と同特異度なので、必ずこの後ろに置くこと */
  .st-grid.st-keep2{grid-template-columns:repeat(2,1fr);}
  /* 定義リストはSPで積む（ラベル列を持つと本文が潰れる）。罫はラベル側にだけ残す */
  .st-dl{grid-template-columns:1fr;}
  .st-dt{padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);}
  .st-dd{padding-top:6px;border-top:0;}
  .st-dl.st-sm .st-dt{padding-top:12px;}
  /* 地図・店舗ビジュアルは横長すぎると中身が見えない */
  .st-map .ph-in{aspect-ratio:4/3;}
  .st-visual .ph-in,.st-visual-img{aspect-ratio:4/3;}
  .st-gmap-all{aspect-ratio:3/4;}
  .st-chips{gap:8px;}
  .st-chip{padding:10px 15px;}
  .st-news-row{flex-wrap:wrap;gap:8px 12px;}
  .st-news-ttl{width:100%;}
  /* ★横に並べると「この店舗で働く」が“働／く”で割れる。SPは全幅で積む */
  .st-actions{flex-direction:column;align-items:stretch;}
  .st-actions .btn{justify-content:center;}
}

/* 店舗カードの写真（プレースホルダ .ph-in と同じ 16:9） */
.st-card-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
.st-card-img.st-sq{aspect-ratio:1/1;}
/* 店舗詳細サマリー：.st-tags は既定で中央寄せ済み。上余白だけ詰める */
/* 店舗詳細のサマリー。直下 #info と同じ地色で続くので下余白は持たせず、#info の上余白だけで間を取る */
#summary{padding-top:clamp(40px,4.4vw,64px);padding-bottom:0;}
#summary .st-tags{margin-top:0;}
/* エリア絞り込みの該当件数 */
/* ブランドで絞り込んで着地したときの告知 */
.st-brandnote{text-align:center;font-size:14px;line-height:1.9;color:var(--ink);
  margin:clamp(24px,2.6vw,34px) auto 0;max-width:720px;}
.st-brandnote a{color:var(--accent);text-underline-offset:3px;margin-left:10px;}
.st-brandnote[hidden]{display:none;}
.st-count{text-align:center;font-size:14px;color:var(--ink-2);margin:clamp(20px,2.2vw,30px) 0 0;letter-spacing:.04em;}
.st-count b{font-family:var(--lt);font-size:17px;font-weight:600;color:var(--ink);}

/* ---------- partner等・SP ---------- */
@media(max-width:640px){
  /* ブランド/店舗グリッドの間隔 14→40px */
  .st-grid{gap:40px;}
  /* 店舗/強み名 16→18px */
  .st-name{font-size:18px;}
}

/* ---------- partner #brands・SP ---------- */
@media(max-width:640px){
  /* SPはブランドを1行1枚に＝写真の下にロゴ（＋矢印）が縦に積まれ、大きく読める */
  #brands .st-brand{flex:0 0 100%;}
}

/* ---------- partner・SP ---------- */
@media(max-width:640px){
  /* 定義リストの見出し語 12→18px／行間20.4→34px */
  .st-dt{font-size:18px;line-height:34px;}
  /* カード本文の余白 16→30px */
  .st-card-b{padding:30px;}
  /* 出店の流れの見出し 16→24px */
  .st-fl-ttl{font-size:24px;}
  /* 出店の流れの間隔 14→40px */
  .st-flow{gap:40px;}
  /* CONTACTの下に「出店のご相談」を改行して置く（縦積み・中央） */
  .st-panel-lab{flex-direction:column;align-items:center;}
}

/* ---------- 出店パートナーのブランドタイル ----------
   Forest Print Studio は帯ごとのロゴ＝他ブランドのロゴと高さを揃えず、幅で合わせる。 */
.st-brand-logo-band{height:auto;width:min(100%,180px);border-radius:8px;}

/* ストアブランドのタイルにロゴを2つ並べる（CARD BOX／S CARD OASIS・2026-09-16）*/
.st-brand-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.st-brand-logos .st-brand-logo{margin:0;}