:root{--wf-bg:#f6f7f9;--wf-card:#fff;--wf-line:#e6e8eb;--wf-text:#222;--wf-muted:#6b7280;--wf-shadow:0 1px 2px rgba(0,0,0,.04);--wf-radius:16px;}
.p-studio-archive{max-width:1080px;margin:0 auto;padding:24px 16px 80px;color:var(--wf-text);background:var(--wf-bg);}
.studio-hero{margin:4px 0 20px;}
.studio-ttl{font-size:28px;font-weight:800;letter-spacing:.02em;margin:0;}
.studio-pill{display:inline-block;padding:6px 14px;border:1px solid var(--wf-line);border-radius:999px;background:#fff;box-shadow:var(--wf-shadow);}
.st-card{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-radius);box-shadow:var(--wf-shadow);padding:20px;margin:20px 0 36px;}
.st-grid{display:grid;grid-template-columns:520px 1fr;gap:24px;}
.st-media{min-width:0;}
.st-view{aspect-ratio:16/10;border-radius:12px;background:#fafafa;border:1px solid var(--wf-line);overflow:hidden;margin:0 0 12px;}
.st-view img{width:100%;height:100%;object-fit:cover;display:block;}
.st-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.st-thumb{width:90px;height:64px;border:1px solid var(--wf-line);border-radius:10px;background:#fff;padding:0;margin:0;overflow:hidden;cursor:pointer;box-shadow:var(--wf-shadow);}
.st-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.st-thumb.is-active{outline:2px solid #b7bcc3;}
.st-title{font-size:24px;font-weight:800;margin:2px 0 8px;}
.st-content{color:var(--wf-muted);line-height:1.8;margin:6px 0 14px;}
.p-studio-archive a{color:inherit;text-decoration:none;}
.p-studio-archive a:hover{opacity:.85;}
.st-map .map-text{margin:.4em 0 .2em;}
.st-map .map-link a{display:inline-block;padding:6px 10px;border:1px dashed var(--wf-line);border-radius:999px;font-size:13px;}
.parking-line{display:flex;align-items:center;gap:8px;margin:.6em 0;}
.parking-line .ui-icon{width:16px;height:16px;display:block;}
.parking-label{font-weight:700;}
.parking-value.is-no{color:var(--wf-muted);}
.genre-line{margin:.6em 0 1em;padding:.5em .75em;color:var(--wf-muted);font-size:14px;}
.option-links{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.option-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--wf-line);border-radius:9999px;background:#fff;box-shadow:var(--wf-shadow);}
.st-info > * + *{margin-top:10px;}
@media (max-width:980px){.st-grid{grid-template-columns:1fr;}.st-view{aspect-ratio:16/9;}}

/* ============================
   Studio Archive – Wireframe UI
   ============================ */



   
/* ==== Studio 見出しブロックの基礎 ==== */
.st-head{
  /* ここをいじるだけで配置調整できます */
  --balls-x: -80px;    /* 三原色画像のXオフセット（-で左 / +で右） */
  --balls-y: -10px;    /* 三原色画像のYオフセット（-で上 / +で下） */
  --balls-scale: 1.5;    /* 三原色画像の拡大縮小 */
  --title-x: -20px;      /* タイトルのXオフセット（-で左 / +で右） */
  --title-y: 18px;      /* タイトルのYオフセット（-で上 / +で下） */

  position: relative;
  display: inline-block; /* 見出し周りだけの相対座標にする */
  line-height: 1;
}

/* 三原色の丸の画像（タイトルの背面に配置） */
.st-head .st-balls{
  position: absolute;
  top: 0; left: 0;             /* 原点はタイトルの左上 */
  transform: translate(var(--balls-x), var(--balls-y)) scale(var(--balls-scale));
  transform-origin: top left;
  z-index: 1;                  /* 背面 */
  pointer-events: none;        /* クリックを拾わない */
  user-select: none;
  width: clamp(56px, 8vw, 92px); /* 画像サイズの基準（お好みで） */
}

/* 見出し文字 */
.st-head .studio-title{
  position: relative;
  z-index: 2;                  /* 三原色の上に表示 */
  transform: translate(var(--title-x), var(--title-y));
  margin: 0;
  font-weight: 800;
  letter-spacing: .02em;
  /* サイトのタイポに合わせて調整 */
  font-family: "Outfit","Noto Sans JP",system-ui,sans-serif;
  font-size: clamp(28px, 6vw, 64px);
}

/* ===== レスポンシブ微調整例 ===== */
@media (max-width: 960px){
  .st-head{
    --balls-x: -10px;
    --balls-y: -8px;
    --balls-scale: .9;
    --title-x: 0px;
    --title-y: 0px;
  }
}

@media (max-width: 600px){
  .st-head{
    --balls-x: -6px;
    --balls-y: -6px;
    --balls-scale: .8;
  }
}

/* 見出しブロックの下に十分な余白を確保 */
.st-head{
  margin-bottom: clamp(40px, 6vw, 72px); /* 画面幅に応じて 40〜72px */
}


.st-head{ grid-area: head; position: relative; z-index: 2; }
.st-body{ grid-area: body; }
.studio-title{
  margin: 0 0 8px;
  font: 900 var(--title-size)/1 "Outfit","Noto Sans JP", system-ui,sans-serif;
}
.st-lead{
  margin: 0 0 10px;
  font: 800 var(--lead-size)/1.35 "Outfit","Noto Sans JP",system-ui,sans-serif;
}
.st-desc{ margin: 0 0 22px; color: var(--body-color); }

.st-balls{
  position: absolute;
  left: 8px; top: -24px;
  width: clamp(150px, 18vw, 240px);
  height: auto;
  z-index: -1;
  pointer-events: none; user-select: none;
}


/* 色・余白の基準 */



/* ページ背景とベース文字色 */
.p-studio-archive{
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  color: var(--wf-text);
  background: var(--wf-bg);
}

/* ヒーロー */
.studio-hero{ margin: 4px 0 20px; }
.studio-ttl{ font-size: 28px; font-weight: 800; letter-spacing: .02em; margin: 0; }
.studio-pill{
  display:inline-block; padding: 6px 14px; border:1px solid var(--wf-line);
  border-radius:999px; background:#fff; box-shadow: var(--wf-shadow);
}

/* カード */
.st-card{
  background: var(--wf-card);
  border:1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow);
  padding: 20px;
  margin: 20px 0 36px;
}

/* 2カラムレイアウト */
.st-grid{
  display:grid; grid-template-columns: 520px 1fr; gap: 24px;
}

/* 画像エリア */
.st-view{
  aspect-ratio: 16/10;
  border-radius: 12px;
  background: #fafafa;
  border:1px solid var(--wf-line);
  overflow:hidden;
  margin:0 0 12px;
}
.st-view img{ width:100%; height:100%; object-fit:cover; display:block; }

/* サムネ */
.st-thumbs{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
}
.st-thumb{
  width:90px; height:64px; border:1px solid var(--wf-line); border-radius:10px;
  background:#fff; padding:0; margin:0; overflow:hidden; cursor:pointer;
  box-shadow: var(--wf-shadow);
}
.st-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-thumb.is-active{ outline:2px solid #b7bcc3; }

/* 情報エリア */
.st-title{ font-size:24px; font-weight:800; margin:2px 0 8px; }
.st-content{ color: var(--wf-muted); line-height:1.8; margin: 6px 0 14px; }
.p-studio-archive a{ color:inherit; text-decoration:none; }
.p-studio-archive a:hover{ opacity:.85; }

/* 本文と住所の間の線 */
.st-sep{
  height:1px;
  background: #e6e6e6;        /* 好みで */
  margin: 12px 0 10px;
}

/* 住所 */
.map-line{
  display:flex; align-items:center; gap:8px; margin:.6em 0;
}
.price-label{ font-weight:700; }

/* 駐車場 */
.parking-line{
  display:flex; align-items:center; gap:8px; margin:.6em 0;
}
.parking-line .ui-icon{ width:16px; height:16px; display:block; }
.parking-label{ font-weight:700; }
.parking-value.is-no{ color:var(--wf-muted); }


/* 料金 */
.price-line{
  display:flex; align-items:center; gap:8px; margin:.6em 0;
}
.price-label{ font-weight:700; }
/* 薄めにしたい場合：
.price-value{ color: var(--wf-muted); }
*/



/* ラベル部分だけ太字にしたい場合（任意） */
.p-studio-archive .genre-line::before{
  content: "撮影可能ジャンル：";
  font-weight: 700;
  margin-right: .25em;
  color: #111827;                    /* さらに濃い */
}



/* ジャンル */
.genre-line{
  margin:.6em 0 1em; padding:.5em .75em; 
  color: var(--wf-muted); font-size:14px;
}



/* ラベル部分だけ太字にしたい場合（任意） */
.p-studio-archive .genre-line::before{
  content: "撮影可能ジャンル：";
  font-weight: 700;
  margin-right: .25em;
  color: #111827;                    /* さらに濃い */
}

.st-line{ border-bottom:1px solid #111827;}


/* オプション（モデル/カメラマン） */
.option-links{
  list-style:none; margin: 10px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.option-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--wf-line);
  border-radius:9999px; background:#fff; box-shadow: var(--wf-shadow);
}

.st-sns{ display:flex; gap:10px; margin:.5em 0; }
.sns-link{ display:inline-block; }
.sns-link img{ display:block; border:1px solid #e5e7eb; border-radius:999px; }
.sns-link:hover img{ opacity:.85; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }



.sns-row{ display:flex; gap:12px; margin:10px 0 0; flex-wrap:wrap; }



.sns-pill:hover{ background:#f5f7fa; }



/* 細かい調整 */
.st-info > * + *{ margin-top: 10px; }       /* 情報欄の縦リズム */
.st-media{ min-width:0; }                    /* 画像側のはみ出し対策 */

/* レスポンシブ */
@media (max-width: 980px){
  .st-grid{ grid-template-columns: 1fr; }
  .st-view{ aspect-ratio: 16/9; }
}


/* 見出し「Studio」の白いピル背景を消す */
.studio-pill{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;      /* 余白も消したい場合 */
  border-radius: 0 !important;
}

/* 各カードの白背景と影を消す */
.p-studio-archive article{
  background: transparent !important;
  box-shadow: none !important;
}

/* 「撮影可能ジャンル」などの薄グレー帯を消す */
.p-studio-archive .st-field,
.p-studio-archive .st-note,
.p-studio-archive .st-chipbox{
  background: transparent !important;
}


/* 追加：本文と住所の区切り線 */
.st-sep{ height:1px; background:var(--wf-line); margin:12px 0 10px; }

/* 追加：住所（リンクなし・アイコン＋テキスト） */
.st-address--plain{ display:flex; align-items:center; gap:8px; margin:0; }
.st-address-ico{ width:18px; height:auto; flex:0 0 auto; }
.st-address-text{ line-height:1.8; }


.p-studio-archive{ background:transparent; } 

/* ===== Wireframe / Skeleton モード ===== */
/* カードに .is-wireframe を付けると発動 */
.st-card.is-wireframe{
  --wf-row: 24px;            /* 1行の高さ（line-height相当） */
  --wf-pad-y: 2px;           /* 各行の上下の余白 */
}



/* 複数行テキスト（p/説明など）はストライプで行を表現 */
.st-card.is-wireframe :where(p, .studio-desc, .genre-line)::after{
  content:"";
  position:absolute; inset:0;
  border-radius:8px;
  background:
    linear-gradient(90deg, transparent 0, var(--wf-shm) 50%, transparent 100%) 0/200% 100%,
    repeating-linear-gradient(
      to bottom,
      var(--wf-base) 0 calc(var(--wf-row) - 6px),
      var(--wf-gap)  calc(var(--wf-row) - 6px) var(--wf-row)
    );
  animation: wf-shimmer 1.4s linear infinite;
}

/* 1行項目（ラベル／値）も同様に矩形化 */
.st-card.is-wireframe :where(.st-label, .st-value)::after{
  content:"";
  position:absolute; inset:var(--wf-pad-y) 0;
  height: calc(var(--wf-row) - var(--wf-pad-y)*2);
  border-radius:8px;
  background:
    linear-gradient(90deg, transparent 0, var(--wf-shm) 50%, transparent 100%) 0/200% 100%,
    linear-gradient(var(--wf-base), var(--wf-base));
  animation: wf-shimmer 1.4s linear infinite;
}


/* アイコンやピン画像・三原色はそのまま見せたいので無効化しない */
.st-card.is-wireframe :where(img, svg){ opacity:1; }


/* 共通：2列（ラベル / 値）グリッド */
.st-info{
  --label-w: 9em;
  --row-pad: 10px;
  --line: #e6e8eb;
  font-size: 15px; line-height: 1.6;
}
.st-line{
  display:grid;
  grid-template-columns: var(--label-w) 1fr;
  column-gap: 12px;
  align-items: start;
  padding: var(--row-pad) 0;
}


.st-value{ color:#111; }
.info-btn{ width:16px; height:16px; display:inline-block; }
.parking-value.is-yes{ padding:.1em .6em; border:1px solid var(--line); border-radius:999px; }

/* 住所だけは [ピン][テキスト] の2カラムで“左寄せ” */
.st-item--addr{
  grid-template-columns: auto 1fr;   /* ラベル列を使わず、左にピン、右に住所 */
  grid-column: 1 / -1;               /* 行全幅を使う（必要なら） */
}
.st-item--addr .addr-ico{ width:16px; height:16px; margin-top:.2em; }
.st-item--addr .addr-text a{ text-decoration:none; }

/* ← ここが“枠を消す”指定 */
.st-info--plain{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding-left:0; padding-right:0;
}

/* スマホ微調整 */
@media (max-width:600px){
  .st-info{ --label-w: 7.5em; font-size:14px; }
}


/* 共通：2列（ラベル / 値）グリッド */
.st-info{
  --label-w: 9em;
  --row-pad: 10px;
  --line: #e6e8eb;
  font-size: 15px; line-height: 1.6;
}
.st-line{
  display:grid;
  grid-template-columns: var(--label-w) 1fr;
  column-gap: 12px;
  align-items: start;
  padding: var(--row-pad) 0;
}

.st-label{
  color: #111; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.st-value{ color:#111; }
.info-btn{ width:16px; height:16px; display:inline-block; }
.parking-value.is-yes{ padding:.1em .6em; border:1px solid var(--line); border-radius:999px; }

/* 住所だけは [ピン][テキスト] の2カラムで“左寄せ” */
.st-item--addr{
  grid-template-columns: auto 1fr;   /* ラベル列を使わず、左にピン、右に住所 */
  grid-column: 1 / -1;               /* 行全幅を使う（必要なら） */
}
.st-item--addr .addr-ico{ width:16px; height:16px; margin-top:.2em; }
.st-item--addr .addr-text a{ text-decoration:none; }

/* ← ここが“枠を消す”指定 */
.st-info--plain{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding-left:0; padding-right:0;
}

/* スマホ微調整 */
@media (max-width:600px){
  .st-info{ --label-w: 7.5em; font-size:14px; }
}


/* ========== 駐車場「あり/なし」の枠を消す ========== */
.st-value.parking-value{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-weight: 400; /* お好みで：普通にしたいなら 400 */
}
.st-value.parking-value.is-yes,
.st-value.parking-value.is-no{
  border: 0 !important;
  background: transparent !important;
}

/* ========== 「提携モデルを見る」ボタン（画像）の枠を消す ========== */
.st-optline .nm-imgbtn img{
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important; /* 角丸も要らなければ 0 */
  box-shadow: none !important;
}

/* フォールバックでテキストピルが出た場合も枠を消す */
.st-optline .nm-pill{
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* 住所行のレイアウトをアイコン込みで整える */
.st-item--addr{
  display:flex;
  align-items:center;
  gap:6px;                    /* ラベル/アイコン/テキストの間隔 */
}
.st-item--addr .info-btn--addr .st-item--parking{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:middle;
  opacity:.9;
  text-size-adjust: flex                 /* お好みで */
}

/* アンダーラインなど既存の装飾に合わせたいときの例 */
.st-item--addr .addr-text a{
  color:#111;
  text-decoration:none;
  border-bottom:1px dashed #cfcfcf;
}
.st-item--addr .addr-text a:hover{
  border-bottom-color:#111;
}

/* 行を揃える：ラベルと値を同一ライン＆中央揃え */
.st-item--parking{
  display: flex;
  align-items: center;   /* 縦位置を揃える */
  gap: 8px;              /* ラベルとの間隔 */
}

/* ラベルと値の文字スタイルを統一 */
.st-item--parking .st-label,
.st-item--parking .st-value{
  font-size: 15px;       /* ここはサイトの基準に合わせてOK */
  line-height: 1.8;      /* ラベルと同じに */
  font-weight: 400;      /* 太さを揃える（700にしたいなら両方700で） */
  color: #111;
  white-space: nowrap;   /* 折り返さない（ラベルに合わせる） */
}

/* “あり/なし”の余計な見た目を完全にオフ */
.st-item--parking .st-value{
  display: inline-flex;  /* アイコン入れる時も中央に */
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* 料金帯 行の余白をなくす */
.st-item--price{
  display:flex;                 /* 念のため指定 */
  align-items:center;
  justify-content:flex-start;   /* 両端揃えを無効化 */
  gap:0 !important;             /* flex/gap をゼロに */
  column-gap:0 !important;      /* Safari対策 */
}

/* ラベル/値の個別余白もゼロに */
.st-item--price .st-label,
.st-item--price .st-value{
  margin:0 !important;
  padding:0 !important;
}

/* もしラベル側に右マージン/最小幅が付いていたら無効化 */
.st-item--price .st-label{
  margin-right:0 !important;
  min-width:auto !important;
  width:auto !important;
}


/* アイコン画像（左寄せ＆サイズ固定） */
.st-item--addr .info-btn{
  width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;   /* 縦横比を保持 */
}


/* 画像ボタンのUA/グローバルbuttonスタイルをリセット */
button.nm-imgbtn{
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 0;        /* 画像だけにする */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ボタン内の画像だけ表示 */
button.nm-imgbtn img{
  display:block;
}

/* オプションサービス内の画像の高さを統一 */
.st-optline {
  display: flex;
  align-items: center;         /* 垂直位置も揃える */
  gap: 10px;
}

/* 画像・SVGの高さを統一（横幅は自動） */
.st-optline :is(img, svg) {
  height: 28px;                /* ← ここを好きな高さに */
  width: auto;
  display: block;
  object-fit: contain;
}

/* 画像ボタンのUA既定スタイルを無効化して高さだけ効かせる */
.st-optline button.nm-imgbtn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
}
.st-optline button.nm-imgbtn img {
  height: 28px;                /* 統一 */
  width: auto;
  display: block;
}

/* ピル型ボタンの高さを統一したい場合（任意） */
.st-optline .pill,
.st-optline .sns-btn,
.st-optline .web-btn {
  height: 36px;                /* ボタンの外寸 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.st-optline .pill img,
.st-optline .sns-btn img,
.st-optline .web-btn img { height: 24px; }


.st-optline{
  display:flex;
  flex-wrap:wrap;        /* 折り返しを許可 */
  align-items:center;
  gap:8px;
}
.st-optline > .st-label{
  flex-basis:100%;       /* ここで1行使い切る＝改行 */
  display:flex;          /* （任意）アイコンと文字を横並びに */
  align-items:center;
  gap:6px;
}


/* --- モーダル本体を十分広くする（PCで5枚入る幅） --- */
.nm-modal__sheet{
  width: min(100vw - 48px, 1120px) !important;  /* 余白込みで最大幅 */
  padding: 20px 24px !important;
}

/* --- 一覧を必ずグリッド5列に（他スタイルを無効化） --- */
.nm-modal .nm-model-grid{
  display: grid !important;                     /* flex指定があっても潰す */
  grid-auto-flow: row !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px 18px !important;
  align-items: start;
}

/* --- 各カードの初期化（横幅固定されていると崩れるため） --- */
.nm-modal .model-card{
  width: auto !important;
  min-width: 0 !important;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  /* padding: 10px; */
}

/* 画像を同寸トリミング */
.nm-modal .model-card img{
  width: 100%;
  aspect-ratio: 4 / 5;          /* 正方形なら 1/1 */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* タイトル/ハンドル */
.nm-modal .model-name{
  margin:6px 0 2px;
  font-weight:700;
  font-size:14px;
  text-align:center;
}
.nm-modal .model-handle{ margin:0; font-size:12px; color:#5e92fb; text-align:center; }
.nm-modal .model-handle a{ color:inherit; text-decoration:none; }
.nm-modal .model-handle a:hover{ text-decoration:underline; }

/* 画面が狭い時だけ列数を落とす */
@media (max-width: 1200px){ .nm-modal .nm-model-grid{ grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px) { .nm-modal .nm-model-grid{ grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .nm-modal .nm-model-grid{ grid-template-columns: repeat(2, 1fr) !important; } }


/* 提携モデルモーダル：カードの薄い枠を消す */
.nm-modal .model-card{
  border: none !important;
  box-shadow: none !important;   /* 影が薄枠に見える場合も消す */
  background: transparent;       /* 必要なら背景も透明に */
  /* 角丸は残したくなければ ↓ も */
  /* border-radius: 0; */
}

/* 念のため、画像にも枠が付いていたら消す */
.nm-modal .model-card img{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}




/* モーダルのフッターCTAの白背景を消す（枠は残す） */
.nm-modal .nm-modal__cta{
  background: transparent !important;   /* ←白背景OFF */
  border: 1.5px solid currentColor !important;  /* 既存の黒枠を活かす */
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 800;
  color: var(--nm-ink, #111);            /* 好きな色に */
  text-decoration: none !important;      /* 下線を消したい時 */
}

/* hover時の見た目（任意） */
.nm-modal .nm-modal__cta:hover{
  background: rgba(0,0,0,.06);           /* うっすらハイライト */
}


/* ====== カメラマン モーダルのベース ====== */
.nm-modal--cam .nm-modal__sheet{
  width: min(100vw - 64px, 920px);
  padding: 20px 24px 22px;
  background: #e9f0fb;                 /* ワイヤーの淡いブルーっぽい背景 */
  border-radius: 14px;
}

.nm-modal--cam .nm-modal__header h3{
  margin: 8px 0 18px;
  text-align: center;
  font-weight: 800;
}

/* ×ボタンは白丸なし（必要なら前に入れた指定のままでOK） */
.nm-modal--cam .nm-modal__close{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 22px;
  color: #333;
}

/* ====== グリッド（3列） ====== */
.nm-cam-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 22px 24px;
  align-items: start;
}

/* ====== カード ====== */
.cam-card{
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  padding: 16px 14px 14px;
  text-align: center;
}

/* 枠線を消したい場合は上の border を 0 に */
 /* .cam-card{ border:0; background:#fff; } */

/* 円形アバター */
.cam-avatar{
  width: 96px; height: 96px;
  border-radius: 9999px;
  overflow: hidden;
  margin: 0 auto 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.cam-avatar img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.cam-name{
  margin: 4px 0 6px;
  font-weight: 700;
  font-size: 14px;
}
.cam-handle{
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}
.cam-handle a{ color: inherit; text-decoration: none; }
.cam-handle a:hover{ text-decoration: underline; }

/* フッターのCTA（白背景ナシ、枠だけ） */
.nm-modal--cam .nm-modal__footer{
  margin-top: 18px;
  display: flex; justify-content: center;
}
.nm-modal--cam .nm-modal__cta{
  display: inline-block;
  padding: 10px 16px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;            /* ←白背景をなくす */
  font-weight: 800;
  color: #111;
  text-decoration: none;
}
.nm-modal--cam .nm-modal__cta:hover{ background: rgba(0,0,0,.06); }

/* レスポンシブ */
@media (max-width: 980px){
  .nm-cam-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 600px){
  .nm-cam-grid{ grid-template-columns: 1fr; }
}


/* ===== 提携カメラマン：グリッドを中央寄せ＆カードを白い角丸に ===== */

/* モーダル本体を少し広めに（任意） */
.nm-modal--cam .nm-modal__sheet{
  width: min(100vw - 64px, 980px) !important;
  padding: 22px 24px 20px !important;
}

/* グリッド：カード幅を固定して中央に並べる */
.nm-modal--cam .nm-cam-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 260px) !important; /* 1枚の見かけ幅 */
  justify-content: center !important;                 /* 全体中央寄せ */
  justify-items: center !important;                   /* 各セル中央寄せ */
  gap: 28px 32px !important;
}

/* 画面幅が狭い時は列数を落とす */
@media (max-width: 980px){
  .nm-modal--cam .nm-cam-grid{ grid-template-columns: repeat(2, 260px) !important; }
}
@media (max-width: 620px){
  .nm-modal--cam .nm-cam-grid{ grid-template-columns: 260px !important; }
}

/* カードの見た目：白背景＋角丸＋影（中央） */
.nm-modal--cam .cam-card{
  width: 260px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: none !important;               /* 薄い枠を消す */
  border-radius: 16px !important;        /* 角丸 */
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  padding: 18px 16px 16px !important;
  text-align: center !important;
}

/* アバター（円形・少し大きめ） */
.nm-modal--cam .cam-avatar{
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto 12px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
.nm-modal--cam .cam-avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* タイポ微調整 */
.nm-modal--cam .cam-name{ margin: 6px 0 6px !important; font-weight: 700 !important; }
.nm-modal--cam .cam-handle{ margin: 0 !important; color: #6b7280 !important; }

/* ×ボタンの白丸を消す（必要なら） */
.nm-modal--cam .nm-modal__close{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 22px; color:#333;
}


/* ===== Studio Lightbox ===== */
.stlb{
  position: fixed; inset: 0;
  display: none;
  z-index: 10000;
}
.stlb.is-open{ display: block; }
.stlb__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}
.stlb__sheet{
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  padding: 48px 60px;
  pointer-events: none; /* 中の要素だけクリック可に */
}
.stlb__img{
  max-width: 92vw; max-height: 86vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  pointer-events: auto;
  background:#000; /* 読み込み時のチラつき抑制 */
}

/* 閉じる */
.stlb__close{
  position: absolute; top: 14px; right: 18px;
  pointer-events: auto;
  background: transparent; border: 0;
  font-size: 28px; line-height: 1; color: #fff; opacity: .9;
}
.stlb__close:hover{ opacity: 1; }

/* 前後ナビ */
.stlb__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  pointer-events: auto;
  background: rgba(0,0,0,.35);
  color: #fff; border: 0; width: 44px; height: 64px;
  font-size: 30px; line-height: 1; border-radius: 8px;
}
.stlb__prev{ left: 10px; }
.stlb__next{ right: 10px; }
.stlb__nav:hover{ background: rgba(0,0,0,.5); }

/* 下部の番号/キャプション */
.stlb__meta{
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  pointer-events: none;
  display: flex; gap: 12px; align-items: center;
}
.stlb__caption{ opacity: .9; }

@media (max-width: 640px){
  .stlb__sheet{ padding: 36px 14px; }
  .stlb__nav{ width: 40px; height: 56px; font-size: 26px; }
}

/* 大きい画像は“拡大できる”ことが伝わるカーソル */
.st-view .js-st-view{ cursor: zoom-in; }

/* サムネは通常の矢印（好みで） */
.st-thumb{ cursor: pointer; } /* 差し替え用のクリックは残す */


/* Lightbox */
.stlb{position:fixed;inset:0;display:none;z-index:99999;}
.stlb.is-open{display:block;}
.stlb__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.stlb__sheet{position:absolute;inset:0;display:grid;place-items:center;padding:0px 0px;pointer-events:none;}
.stlb__img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);background:#000;pointer-events:auto;}
.stlb__close{position:absolute;top:14px;right:18px;background:transparent;border:0;color:#fff;font-size:28px;line-height:1;pointer-events:auto;}
.stlb__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:8px;background:rgba(0,0,0,.35);color:#fff;font-size:30px;pointer-events:auto;}
.stlb__prev{left:10px;} .stlb__next{right:10px;}
.stlb__nav:hover{background:rgba(0,0,0,.5);}
.stlb__meta{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);display:flex;gap:12px;}
/* メイン画像は拡大できる見た目に */
.st-view .js-st-view{cursor:zoom-in;}


/* サムネの再生マーク */
.st-thumb { position: relative; }
.st-thumb__play{
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 6px 8px;
  font-size: 12px; line-height: 1;
  color: #fff; background: rgba(0,0,0,.55);
  border-radius: 999px;
}

/* メイン動画の見た目 */
.st-view video{
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  border: 1px solid var(--wf-line);
  border-radius: 12px;
}


/* ===== Lightbox: 中央フキダシ ===== */
.stlb__floating{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #fff;
  background: rgba(0,0,0,.65);
  border-radius: 999px;
  pointer-events: none;              /* クリックの邪魔をしない */
  backdrop-filter: saturate(140%) blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  font-weight: 700;
}
.stlb__floating-icon{ font-size: 14px; line-height: 1; }
@media (max-width: 640px){
  .stlb__floating{
    top: 16px;
    left: auto;
    right: 16px;
    transform: none;                 /* スマホは右上に寄せる */
    padding: 6px 10px;
    font-size: 14px;
  }
}

.stlb__floating { display: none !important; }


.sec-partners {
  padding: 60px 0;
  background: #fff;
}
.partners-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.partners-title {
  font: 800 24px/1.2 "Outfit","Noto Sans JP",sans-serif;
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 24px;
}
.partner-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  padding: 20px;
}
.partner-thumb img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.partner-name { font-weight: 700; margin: 12px 0 8px; }
.partner-desc { font-size: 14px; color: #555; margin-bottom: 16px; }
.partner-links { display: flex; gap: 8px; }
.partner-btn {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  text-decoration: none;
  background: #fafafa;
}


/* ===== Partners セクション ===== */
.sec-partners{
  padding: 56px 0 80px;
  background: #fff;
}

.sec-partners .partners-head{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}
.sec-partners .partners-title{
  margin: 0;
  font: 800 28px/1.15 "Outfit","Noto Sans JP",system-ui,sans-serif;
  letter-spacing: .02em;
}
.sec-partners .partners-title span{
  margin-left: .6em;
  font: 700 16px/1 "Noto Sans JP",system-ui,sans-serif;
  color: #6b7280;
}

/* 三原色の飾りをタイトル後ろに（画像は1枚でOK） */
.sec-partners .partners-logo{
  width: clamp(70px, 12vw, 110px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* カードグリッド */
.partners-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* カード本体 */
.partner-card{
  background: #fff;
  border: 1px solid #eef0f3;       /* うっすら線 */
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 22px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.partner-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* サムネ（丸アイコン） */
.partner-thumb{
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #f7f7f8;
  box-shadow: inset 0 0 0 1px #edf0f3;
  margin-bottom: 10px;
}
.partner-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* タイトル・本文 */
.partner-name{
  margin: 0 0 8px;
  font: 800 22px/1.25 "Noto Sans JP",system-ui,sans-serif;
  letter-spacing: .01em;
}
.partner-desc{
  margin: 0 0 14px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.9;
  display: -webkit-box;
  /* -webkit-line-clamp: 4; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ボタン行（左寄せ） */
.partner-links{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.partner-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  color: #111827;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.partner-btn:hover{
  background: #f8fafc;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* X のボタンだけ微妙に差し色（任意） */
.partner-btn[data-kind="x"]{
  border-color: #e6e7eb;
}

/* モバイルちょい詰め */
@media (max-width: 640px){
  .partners-grid{ gap: 18px; }
  .partner-card{ padding: 18px; border-radius: 18px; }
  .partner-thumb{ width: 64px; height: 64px; }
  .partner-name{ font-size: 20px; }
}




/* ===== Partners: カードを少し細くする（上書き） ===== */
.partners-grid{
  /* 320px → 280px（さらに細くしたければ 260px などへ） */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; /* 24px → 20px */
}

.partner-card{
  padding: 18px;          /* 22px → 18px */
  border-radius: 18px;    /* 20px → 18px（お好み） */
}

.partner-thumb{ width: 64px; height: 64px; }   /* 72 → 64 */
.partner-name{  font-size: 20px; }             /* 22 → 20 */
.partner-desc{  font-size: 13.5px; }           /* 14 → 13.5 */
.partner-btn{
  padding: 7px 12px;       /* 8x14 → 7x12 */
  font-size: 12.5px;       /* 13 → 12.5 */
}


/* ===== Partners: 横幅を小さく（強制上書き） ===== */
.partners-grid{
  /* 列の最小幅を 260px に。さらに細くしたければ 240px などへ */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
}

.partner-card{
  padding: 16px !important;
  border-radius: 16px !important;
}

.partner-thumb{ width: 60px !important; height: 60px !important; }
.partner-name { font-size: 20px !important; }
.partner-desc { font-size: 13.5px !important; }
.partner-btn  { padding: 6px 12px !important; font-size: 12.5px !important; }


/* 見出し行の左右配置：左=Partners / 右=関連事業者 */
.p-studio-archive .st-head{
  display: flex;
  align-items: flex-end;      /* ベースラインを揃える */
  justify-content: space-between;
  gap: 12px;
}

.p-studio-archive .st-head .st-body{
  margin-left: auto;          /* 念のため右側へ押し出す */
}

.p-studio-archive .st-head .st-lead{
  margin: 0;
  font-weight: 800;           /* 必要なら調整 */
}

/* スマホでは縦並びに戻す */
@media (max-width: 600px){
  .p-studio-archive .st-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .p-studio-archive .st-head .st-body{
    margin-left: 0;
    margin-top: 6px;
  }
}

/* 見出し行の整列：左に Partners、右に 関連事業者 */
.p-studio-archive .st-head{
  position: relative;
  display: flex;
  align-items: baseline;         /* ベースライン合わせ */
  justify-content: flex-start;   /* 左開始 */
  gap: 12px;
}

/* 飾りの三原色は絶対配置でレイアウトに影響させない */
.p-studio-archive .st-head .st-balls{
  position: absolute;
  left: 8px;
  top: -24px;
  width: clamp(150px, 18vw, 240px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

.p-studio-archive .studio-title{
  margin: 0;
  font-weight: 900;
}

/* 右端に「関連事業者」を寄せる */
.p-studio-archive .st-lead{
  margin: 0 0 0 auto;            /* ← これで右端へ */
  font-weight: 800;
  color: #334155;                 /* お好みで */
  white-space: nowrap;            /* 折り返し防止（必要なら） */
}

/* スマホでは縦積みに戻す */
@media (max-width: 600px){
  .p-studio-archive .st-head{
    flex-wrap: wrap;
  }
  .p-studio-archive .st-lead{
    margin-left: 0;
    width: 100%;
    text-align: left;             /* モバイルは左揃え */
  }
}

/* ===== Partners 見出しブロックの微調整ノブ =====
   ここだけ数値を変えれば配置を調整できます（px でも % でもOK）
---------------------------------------------------------------- */
.p-studio-archive .st-head{
  /* 三原色の画像 */
  --balls-x:  0px;   /* X方向: 右へ+ / 左へ- */
  --balls-y:  -20px;   /* Y方向: 下へ+ / 上へ- */
  --balls-scale: 0.5;  /* 拡大縮小 */

  /* Partners 見出し */
  --title-x:   60px;
  --title-y:   0px;

  /* 「関連事業者」サブ見出し */
  --lead-x:    0px;
  --lead-y:    0px;

  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* 下に少し余白（お好みで） */
  margin-bottom: clamp(20px, 3vw, 36px);
}

/* 三原色の画像は装飾扱い：絶対配置で重ねる */
.p-studio-archive .st-head .st-balls{
  position: absolute;
  top: 0; left: 0;
  transform: translate(var(--balls-x), var(--balls-y)) scale(var(--balls-scale));
  transform-origin: top left;
  width: clamp(140px, 18vw, 240px);
  height: auto;
  z-index: -1;             /* 文字の背面へ */
  pointer-events: none; user-select: none;
}

/* Partners（h2） */
.p-studio-archive .studio-title{
  margin: 0;
  font-weight: 900;
  transform: translate(var(--title-x), var(--title-y));
  letter-spacing: .1em;
}

/* 関連事業者（h3）— 右寄せしたい時は margin-left:auto を付ける */
.p-studio-archive .st-lead{
  margin: 0 0 0 auto;      /* 右端へ寄せる。左寄せに戻すなら削除 */
  font-weight: 800;
  white-space: nowrap;
  transform: translate(var(--lead-x), var(--lead-y));
  color: #334155;
}

/* モバイルでは縦積みに戻す（必要なら） */
@media (max-width: 640px){
  .p-studio-archive .st-head{
    flex-wrap: wrap;
  }
  .p-studio-archive .st-lead{
    margin-left: 0;        /* スマホは左揃えに */
  }
}

/* カードのヘッダーを中央寄せ */
.pt-card__head{
  display: grid;
  grid-template-columns: 1fr; /* 1列 */
  justify-items: center;      /* 中央に寄せる */
  text-align: center;         /* ついでに見出しも中央 */
}

/* 丸いアバターを中央配置 */
.pt-card__avatar{
  width: 88px;                 /* お好みで */
  height: 88px;
  border-radius: 9999px;
  overflow: hidden;
  display: grid;               /* 中の <img> を中央に */
  place-items: center;
  margin: 0 auto 12px;         /* ← 水平中央 */
}

/* 画像は枠いっぱいに収める */
.pt-card__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===== Partners カード（効きを強めるためにスコープを限定） ===== */
section.p-partners .partners-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 72px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

/* カード本体：4:3 を維持しながら中身をグリッド配置 */
section.p-partners .partner-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--wf-line);
  border-radius: 16px;
  box-shadow: var(--wf-shadow);
  padding: 22px;
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* icon / title / desc(伸びる) / links(下) */
  align-items: start;
  aspect-ratio: 4 / 3;                    /* ← 4:3 に固定 */
  overflow: hidden;                       /* はみ出し保護 */
}

/* アイコンを完全中央寄せ（円形にトリミング） */
section.p-partners .partner-thumb{
  width: 96px;            /* お好みで 88～120px */
  height: 96px;
  border-radius: 9999px;
  overflow: hidden;
  margin: 4px au
}


/* ===== Partners: アイコン左・テキスト右の横並びレイアウト ===== */
section.p-partners .partner-card{
  /* ボックス */
  position: relative;
  background: #fff;
  border: 1px solid var(--wf-line);
  border-radius: 16px;
  box-shadow: var(--wf-shadow);
  padding: 18px 20px;

  /* 横並びグリッド： [icon] [texts] */
  display: grid;
  grid-template-columns: 88px 1fr;  /* ← 左アイコン幅 / 右テキスト幅 */
  grid-template-rows: auto auto 1fr;/* タイトル / 説明 / リンク(下に張り付く) */
  column-gap: 16px;
  row-gap: 6px;

  /* 以前の 4:3 指定を解除して自然な高さに */
  aspect-ratio: auto;
  min-height: 160px; /* お好みで 150–200px に調整 */
  align-items: start;
}

/* アイコン（円形トリム）を左列に固定して全体中央よりやや上に */
section.p-partners .partner-thumb{
  grid-column: 1;
  grid-row: 1 / span 3;         /* 3行ぶち抜きで縦の中心に近づける */
  width: 88px; height: 88px;
  border-radius: 9999px;
  overflow: hidden;
  margin: 0;                    /* 中央寄せは解除 */
  display: grid;
  place-items: center;
}
section.p-partners .partner-thumb img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* タイトル・本文・リンクを右列に */
section.p-partners .partner-name{
  grid-column: 2; grid-row: 1;
  margin: 0;
  font-weight: 800;
  font-size: 20px;              /* 見出し感を少し強める */
  line-height: 1.3;
  text-align: left;             /* 以前の center を上書き */
}
section.p-partners .partner-desc{
  grid-column: 2; grid-row: 2;
  margin: 0;
  color: var(--wf-muted);
  line-height: 1.8;
  overflow: hidden;             /* 高さが足りないときは切る */
  text-overflow: ellipsis;
}
section.p-partners .partner-links{
  grid-column: 2; grid-row: 3;
  align-self: end;              /* 常にカード下側に揃える */
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: flex-start;  /* 左揃え */
}

/* グリッド（カード一覧）の幅感はそのまま。必要なら調整 */
section.p-partners .partners-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 72px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); /* 横長カードに合わせて幅を少し広げる */
  gap: 28px;
}

/* モバイル最適化（横幅が狭いときは縦積み） */
@media (max-width: 640px){
  section.p-partners .partner-card{
    grid-template-columns: 72px 1fr;
    min-height: 140px;
  }
  section.p-partners .partner-thumb{ width:72px; height:72px; }
  section.p-partners .partner-name{ font-size: 18px; }
}


/* ===== Partners 背景（::before） ===== */
.p-partners{
  position: relative;
}

/* ワイヤーフレーム風のグレー背景パネル */
.p-partners::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* どの位置に出すか（見出しの少し下） */
  top: clamp(72px, 10vw, 128px);

  /* サイズ：中央にどーんと置く丸角パネル */
  width: min(1200px, calc(100% - 48px));
  height: clamp(260px, 36vw, 420px);

  /* 色と表情（薄いグレー + うっすら縁取り）*/
  background: #f3f5f7;
  border-radius: 40px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);

  z-index: 0;           /* 奥に */
}

/* 前景（見出し・カード群）は手前へ */
.p-partners .st-head,
.p-partners .partners-grid{
  position: relative;
  z-index: 1;
}

/* 画面が狭い時はパネルを少し小さく/下げる */
@media (max-width: 640px){
  .p-partners::before{
    top: 96px;
    border-radius: 28px;
  }
}

/* ===== Partners セクション：背景パネルを一番後ろへ／右寄せ・右角丸 ===== */
.p-partners{
  position: relative;
  z-index: 0;                 /* 擬似要素の下地（負の z-index を成立させる） */
}

/* 見出しとカードは前面 */
.p-partners .st-head,
.p-partners .partners-grid{
  position: relative;
  z-index: 1;
}

/* ワイヤーフレーム風の薄いグレー背景（右寄せ・右側だけ丸く） */
.p-partners::before{
  content: "";
  position: absolute;

  /* 位置とサイズ（右寄せ） */
  top: clamp(88px, 10vw, 140px);                 /* 見出しの少し下から */
  right: 24px;                                   /* 右端に寄せる */
  left: auto;                                    /* 中央寄せ解除 */
  width: min(1120px, calc(100% - 64px));         /* 右寄せで横幅を制御 */
  height: clamp(260px, 36vw, 420px);             /* お好みで調整OK */

  /* 見た目 */
  background: #f3f5f7;
  border-radius: 0 40px 40px 0;                  /* 右上/右下だけ丸く */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);

  /* いちばん奥へ */
  z-index: -1;                                   /* 背景を最背面に */
  pointer-events: none;                          /* クリックを邪魔しない */
}

/* モバイルは全幅寄りにして角丸を均等に */
@media (max-width: 640px){
  .p-partners::before{
    right: 12px;
    width: calc(100% - 24px);
    border-radius: 24px;                          /* 全角丸 */
    top: 96px;
    height: clamp(220px, 46vw, 360px);
  }
}


/* ===== Partners 背景パネル：右寄せ＆左角まるみ ===== */
.p-partners { position: relative; z-index: 0; }
.p-partners .st-head,
.p-partners .partners-grid { position: relative; z-index: 1; }

.p-partners::before{
  content: "";
  position: absolute;

  /* 右寄せに変更 */
  right: -600px;
  left: auto;                 /* ← 左固定を無効化 */
  width: min(1120px, calc(100% - 64px));  /* 右端からの横幅 */

  /* 位置とサイズは好みで微調整 */
  top: clamp(88px, 10vw, 140px);
  height: clamp(260px, 36vw, 420px);

  background: #f3f5f7;
  /* 左上・左下だけ丸くする */
  border-radius: 354px 0 0 354px;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
  z-index: -1;
  pointer-events: none;
}

/* モバイルのとき（任意） */
@media (max-width: 640px){
  .p-partners::before{
    right: 12px;
    width: calc(100% - 24px);
    border-radius: 24px 0 0 24px;   /* 左角だけ丸いまま */
    top: 96px;
    height: clamp(220px, 46vw, 360px);
  }
}

/* ===== Partners のカードを中央寄せ ===== */
.p-partners .partners-grid{
  /* コンテナを画面の中央に固定 */
  max-width: 1120px;           /* ← 今のカード2枚が収まる幅に調整 */
  margin: 0 auto 56px;         /* 左右 auto で中央寄せ */
  padding: 0 16px;             /* 端の余白（任意） */

  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr)); /* 今のサイズ感を維持 */
  column-gap: 40px;
  row-gap: 28px;

  justify-content: center;     /* 2枚でも中央に寄るように */
}

/* 1列になるブレークポイント（任意） */
@media (max-width: 920px){
  .p-partners .partners-grid{
    grid-template-columns: minmax(320px, 680px);
    justify-content: center;   /* 1枚でも中央 */
  }
}

/* 念のため、各カードが勝手に広がらないよう保護 */
.partner-card{
  max-width: 680px;            /* いまのカード幅上限（必要なら調整） */
  width: 100%;
  margin: 0 auto;              /* 1列時も中央 */
}


/* Partners グリッド：中央寄せ＆今のサイズ感維持 */
.p-partners .partners-grid{
  width: min(1120px, 100%);
  margin: 0 auto 56px;
  padding: 0 16px;

  display: grid;
  grid-template-columns: repeat(2, minmax(460px, 1fr)); /* 今のカード幅感に合わせて調整 */
  column-gap: 40px;
  row-gap: 28px;

  /* ← これが効いていないと左寄せになる */
  justify-content: center;            /* グリッド全体を中央に */
  justify-items: stretch;             /* 各カードの幅はカラムにフィット */
}

/* 1列落ち時も中央1枚表示 */
@media (max-width: 1100px){
  .p-partners .partners-grid{
    grid-template-columns: minmax(320px, 680px);
    justify-content: center;
  }
}

/* 念のためカードの最大幅を制御（任意） */
.p-partners .partner-card{
  max-width: 560px;
  width: 100%;
  margin: 0 auto;                     /* 1列時の中央寄せ */
  position: relative;
  z-index: 1;                         /* 背景の before より前に出す */
}


/* Partners：カードを白背景に */
.p-partners .partner-card{
  background: #fff;
  border-radius: 16px;        /* 角丸はお好みで */
  box-shadow: 0 6px 18px rgba(0,0,0,.06); /* うっすら影（任意） */
  z-index: 1;                 /* 背景の擬似要素より前に出す */
}

/* アイコン横レイアウト使っている場合の内側余白（任意） */
.p-partners .partner-card .partner-row{
  padding: 20px 24px;
}

/* 1) 背景の擬似要素は一番後ろへ */
section.p-partners { position: relative; }
section.p-partners::before{
  z-index: -1;        /* 背景を最背面に */
}

/* 2) グリッドとカードは前面のスタッキングに */
section.p-partners .partners-grid{
  position: relative;
  isolation: isolate; /* 自前のスタックを作って背景が表に来ないように */
  z-index: 0;
}

/* 3) カード背景を確実に白に（!important で勝たせる） */
section.p-partners .partner-card{
  position: relative;
  z-index: 1;
  background-color: #fff !important;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* 念のため、カード内のブロックに背景が付いていたら透明にする */
section.p-partners .partner-card .partner-name,
section.p-partners .partner-card .partner-desc,
section.p-partners .partner-card .partner-links{
  background: transparent !important;
}