/* 
Theme Name: Custom Mypage Theme
Theme URI: https://example.com
Author: You
Description: Mobile-first header & sidebar skeleton
Version: 0.1.0
Text Domain: custom-mypage-theme
*/

:root {
  --header-h: 30px;
  --sidebar-w: 260px;
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --brand: #6d3c9e; /* 江戸紫っぽいトーン */
  --border: #e5e7eb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--fg);
  background: var(--bg);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
}

body {
  font-family: var(--font-sans);
  background: #fff;
  color: #222;
}

/* === 4:5の外枠（幅に応じて高さが自動で決まる） === */
.design-frame {
  font-family: "Bodoni 72 Smallcaps Book", "Bodoni 72", "Bodoni MT", serif;
  width: calc(100% - 1px);
  max-width: 480px;
  margin: 24px auto;
  border: 2px solid #cfcfd3;
  background: #f5f5f5;
  position: relative;
  box-sizing: border-box;
  /* ★これで必ず4:5に固定（幅:高さ=4:5） */
  aspect-ratio: 4 / 5;
  overflow: hidden; /* 念のためはみ出し防止 */
}

/* === 原寸キャンバス：ここに全部乗せる（固定480×600px） === */
.pattern {
  /* 原寸キャンバス（固定） */
  width: 480px;
  height: 600px; /* 4:5 */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  z-index: 0;

  /* ★ 三角背景を必ず出す（以前の data:image を復活） */
  background-color: #fff;
  --tri-side: 60px;
  --tri-height: calc(var(--tri-side) * 0.8660254038);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='960' height='103.9230484541' viewBox='0 0 960 103.9230484541'><polygon points='0,51.961524227 30,0 60,51.961524227' fill='%23e5e7eb'/><polygon points='60,51.961524227 90,0 120,51.961524227' fill='%23e5e7eb'/><polygon points='120,51.961524227 150,0 180,51.961524227' fill='%23e5e7eb'/><polygon points='180,51.961524227 210,0 240,51.961524227' fill='%23e5e7eb'/><polygon points='240,51.961524227 270,0 300,51.961524227' fill='%23e5e7eb'/><polygon points='300,51.961524227 330,0 360,51.961524227' fill='%23e5e7eb'/><polygon points='360,51.961524227 390,0 420,51.961524227' fill='%23e5e7eb'/><polygon points='420,51.961524227 450,0 480,51.961524227' fill='%23e5e7eb'/><polygon points='480,51.961524227 510,0 540,51.961524227' fill='%23e5e7eb'/><polygon points='540,51.961524227 570,0 600,51.961524227' fill='%23e5e7eb'/><polygon points='600,51.961524227 630,0 660,51.961524227' fill='%23e5e7eb'/><polygon points='660,51.961524227 690,0 720,51.961524227' fill='%23e5e7eb'/><polygon points='720,51.961524227 750,0 780,51.961524227' fill='%23e5e7eb'/><polygon points='780,51.961524227 810,0 840,51.961524227' fill='%23e5e7eb'/><polygon points='840,51.961524227 870,0 900,51.961524227' fill='%23e5e7eb'/><polygon points='900,51.961524227 930,0 960,51.961524227' fill='%23e5e7eb'/><polygon points='-30,103.9230484541 0,51.961524227 30,103.9230484541' fill='%23e5e7eb'/><polygon points='30,103.9230484541 60,51.961524227 90,103.9230484541' fill='%23e5e7eb'/><polygon points='90,103.9230484541 120,51.961524227 150,103.9230484541' fill='%23e5e7eb'/><polygon points='150,103.9230484541 180,51.961524227 210,103.9230484541' fill='%23e5e7eb'/><polygon points='210,103.9230484541 240,51.961524227 270,103.9230484541' fill='%23e5e7eb'/><polygon points='270,103.9230484541 300,51.961524227 330,103.9230484541' fill='%23e5e7eb'/><polygon points='330,103.9230484541 360,51.961524227 390,103.9230484541' fill='%23e5e7eb'/><polygon points='390,103.9230484541 420,51.961524227 450,103.9230484541' fill='%23e5e7eb'/><polygon points='450,103.9230484541 480,51.961524227 510,103.9230484541' fill='%23e5e7eb'/><polygon points='510,103.9230484541 540,51.961524227 570,103.9230484541' fill='%23e5e7eb'/><polygon points='570,103.9230484541 600,51.961524227 630,103.9230484541' fill='%23e5e7eb'/><polygon points='630,103.9230484541 660,51.961524227 690,103.9230484541' fill='%23e5e7eb'/><polygon points='690,103.9230484541 720,51.961524227 750,103.9230484541' fill='%23e5e7eb'/><polygon points='750,103.9230484541 780,51.961524227 810,103.9230484541' fill='%23e5e7eb'/><polygon points='810,103.9230484541 840,51.961524227 870,103.9230484541' fill='%23e5e7eb'/><polygon points='870,103.9230484541 900,51.961524227 930,103.9230484541' fill='%23e5e7eb'/><polygon points='930,103.9230484541 960,51.961524227 990,103.9230484541' fill='%23e5e7eb'/></svg>");
  background-repeat: repeat;
  background-position: left top;
}

/* ===== Header (mobile first) ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

.menu-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--brand);
}

.site-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ===== Sidebar (off-canvas on mobile) ===== */
.site-sidebar {
  position: fixed;
  top: var(--header-h);
  left: calc(-1 * var(--sidebar-w)); /* 隠す */
  width: var(--sidebar-w);
  height: calc(100dvh - var(--header-h));
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow: auto;
  transition: left 0.3s ease;
  z-index: 900;
}

.site-sidebar.open {
  left: 0;
}

/* ナビ */
.sidebar-nav {
  margin: 0;
  padding: 0;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fg);
  text-decoration: none;
}

.sidebar-item.active .sidebar-link,
.sidebar-link:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ===== Overlay (モバイルでサイドバー表示時) ===== */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  top: var(--header-h);
}

.sidebar-overlay.show {
  opacity: 1;
  pointer-events: auto;
  z-index: 800;
}

/* ===== Main (ヘッダー分の余白) ===== */
.site-main {
  padding: calc(var(--header-h) + 12px) 12px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== PCレイアウト（768px〜） ===== */
@media (min-width: 768px) {
  .site-sidebar {
    left: 0;
    height: 100dvh;
    top: 0;
  }

  .sidebar-overlay {
    display: none;
  }

  .site-header {
    position: sticky;
    top: 0;
    padding-left: calc(var(--sidebar-w) + 12px);
  }

  .menu-toggle {
    display: none;
  }

  .site-main {
    padding-top: 12px;
    margin-left: var(--sidebar-w);
  }
}

/* === SNSアイコン行 === */
.sidebar-social-row {
  margin: 10px 0 14px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.social-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: #111;
  background: #fff;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.08s ease;
}

.social-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.social-btn:hover {
  border-color: var(--fg);
  transform: translateY(-1px);
}

/* 見た目調整：TikTok/YouTubeは黒スクエア、IGは輪郭のみ */
.social-tiktok,
.social-yt {
  background: #111;
  color: #fff;
  border-color: #111;
}

.social-ig {
  background: #fff;
  color: #111;
}

/* === LINE 問い合わせCTA（枠＋アイコン＋テキスト） === */
.line-cta {
  display: block;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  text-decoration: none;
  margin: 4px 0 18px;
  padding: 10px 12px;
  color: var(--fg);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.line-cta:hover {
  border-color: var(--fg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.line-cta-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.line-logo {
  width: 16px;
  height: 16px;
  display: block;
}

.line-text {
  font-size: 12px;
}

/* === 下部テキストリンク === */
.sidebar-plain-links {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 14px;
}

.sidebar-plain-links a {
  color: var(--fg);
  text-decoration: none;
  font-size: 14.5px;
}

.sidebar-plain-links a:hover {
  text-decoration: underline;
}

/* フォントウェイトの統一 */
.sidebar-link,
.sidebar-plain-links a,
.line-text {
  font-weight: 600;
}

/* --- 追加: ガイド内の文字スタイルを強制 --- */
:root {
  --deep-purple: #4c1d95;
} /* 濃い紫 */

.guide-overlay,
.guide-overlay * {
  font-weight: 700 !important; /* 全部太字 */
}

/* ガイド内のデフォルト文字色は黒 */
.guide-overlay p,
.guide-overlay span,
.guide-overlay li,
.guide-overlay div {
  color: #111 !important;
}

/* ヒント文は濃い紫で強調 */
.guide-overlay .guide-hint {
  color: var(black) !important;
}

/* バッジのテキストも黒 or 濃い紫に（背景は透明・枠は紫） */
.guide-overlay .badge {
  color: var(black) !important;
  background: transparent !important;
  border: 2px solid var(--deep-purple) !important;
  border-radius: 9999px;
}

/* === ガイドの見やすさアップ（透過を少し濃く＋ブラー強め） === */
:root {
  --guide-scrim: 0.66;
} /* 0.66=66%の濃さ。見えにくかったら .70〜.75 に上げてOK */

.guide-overlay {
  background: rgba(
    0,
    0,
    0,
    var(--guide-scrim)
  ) !important; /* 既存 .45 を上書きして読みやすく */
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px); /* iOS/Safari */
}

/* 中心付近をほんの少しだけ暗くして文字を浮かせる（クリックはそのまま通す） */
.guide-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 45%,
    rgba(0, 0, 0, 0.22) 80%
  );
}

/* === ガイドを明るく＆読みやすく（白スクリーン＋軽いブラー） === */
:root {
  --guide-scrim: 0.7; /* 明るさ：0.45〜0.60で微調整。数値↑で更に白っぽく */
  --guide-blur: 3px; /* 背景ぼかし。1.5〜3pxで調整 */
}

.guide-overlay {
  background: rgba(
    255,
    255,
    255,
    var(--guide-scrim)
  ) !important; /* 白スクリーン */
  backdrop-filter: blur(var(--guide-blur));
  -webkit-backdrop-filter: blur(var(--guide-blur)); /* iOS/Safari */
}

/* 文字をさらに読みやすくするためのごく薄いハイライト（不要ならこのブロック削除OK） */
.guide-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.16) 80%
  );
}

/* ====== ラベル ====== */
.label-white {
  background: rgba(255, 255, 255, 0.7);
  color: #111;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border: 0.5px solid #00ff66;
  border-radius: 0;
  display: inline-block;
  margin-bottom: 2px;
}

/* ====== 枠囲み ====== */
.box-wrapper {
  display: inline-block;
  padding: 4px;
  border: 0.5px solid #000;
  border-radius: 0; /* 四角に */
  background: #fff;
  position: relative;
  z-index: 10; /* 通常は前面 */
}

.model-wrapper {
  border: 1.3px solid #000; /* 例: 黒で3pxに変更 */
  z-index: 0 !important; /* 既存の背面配置はそのまま */
}

/* ====== アップローダ ====== */
.uploader {
  display: block;
  position: relative;
  border: 1px #cfcfd3;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}

.uploader input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* モザイク風背景 */
.uploader .box {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  /* === ここを新しい画像に置き換える === */
  background-image: url("/wp-content/uploads/2025/10/S__74711063.jpg");
  background-size: cover; /* 枠いっぱいにフィット */
  background-position: center; /* 中央寄せ */
  background-repeat: no-repeat; /* タイル化なし */
  /* background-color: rgba(255,255,255,0.3); */ /* オーバーレイの白感を軽く残したい場合 */
}

/* サイズ */
.sz-80 {
  width: 90px;
  height: 90px;
}

.sz-98 {
  width: 130px;
  height: 130px;
}

.sz-110 {
  width: 160px;
  height: 160px;
}

.sz-220x440 {
  width: 290px;
  height: 380px;
}

/* ====== ガイドオーバーレイ ====== */
.guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1px);
  display: none;
}

.guide-overlay.is-on {
  display: block;
}

.guide-panel {
  max-width: 360px;
  margin: 0 auto;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid #111; /* 黒い枠線 */
  padding: 16px;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff; /* 白文字 */
  background: #6d28d9; /* 紫塗り（江戸紫系） */
  border: 1px solid #6d28d9; /* 枠も同色で統一 */
}

/* ====== ガイド文（枠外シンプル） ====== */
.guide-hint {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  display: none;
}

.guide-hint.is-on {
  display: block;
}

/* 枠外説明文（.explanation-text） */
.explanation-text {
  font-weight: 500;
}

/* === ガイド用：説明タグ & リーダー線 ============================ */
:root {
  --deep-purple: #4c1d95;
}

/* リーダー線（最背面） */
.guide-overlay .guide-anno {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* 説明タグのレイヤー（線より上） */
.guide-overlay .guide-tags {
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* 説明タグの見た目（日本語・太字・濃い紫） */
.guide-overlay .guide-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--deep-purple);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-weight: 700;
  font-size: 12px;
  color: var(--deep-purple);
  line-height: 1.2;
  pointer-events: auto;
}

/* === ガイド用：説明タグ & リーダー線（重複だが保持） ============================ */
:root {
  --deep-purple: #4c1d95;
}

/* リーダー線（SVG）は最背面、タグはその上に乗せる */
.guide-overlay .guide-anno {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 線はクリック不可 */
  z-index: 5;
}

.guide-overlay .guide-tags {
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* 説明タグの見た目（日本語・太字・黒/濃紫系） */
.guide-overlay .guide-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--deep-purple);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-weight: 700;
  font-size: 12px;
  color: var(--deep-purple);
  line-height: 1.2;
  pointer-events: auto; /* クリックでガイドを閉じたくなければこの行を消す or JS側調整 */
}

/* ベース：アクセント色を変数化（デフォルトは currentColor） */
.guide-pill {
  position: absolute;
  --lead: 20px; /* 線の長さ */
  --line-w: 1px; /* 線の太さ */
  --accent: currentColor; /* ← 追加：線＆枠＆塗りで使う色 */
  font-size: 12px;
  font-weight: 700;
  padding: 4px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--accent); /* ← currentColor → var(--accent) */
  color: currentColor;
  white-space: nowrap;
}

/* 線（擬似要素）の“色”は常に --accent を使う（配置は別ルールで） */
.guide-pill::after {
  content: "";
  position: absolute;
  width: var(--lead);
  height: var(--line-w);
  background: var(--accent);
}

/* 線をタグの上辺から出す（色指定はベースで済むので配置だけ） */
.guide-pill.lead-angled::after {
  left: 50%;
  top: 0%;
  transform-origin: 0 0;
  transform: rotate(var(--angle, 0deg));
}

/* 色バリエーション：--accent を確定→塗りと枠に流用 */
.guide-pill.purple {
  --accent: #6d28d9;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.guide-pill.black {
  --accent: #111111;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}

/* 緑色はそのまま。点線 → 実線に変更 */
.box-wrapper.highlight {
  border: 1px solid #00ff66; /* 元の色を継承（LimeGreen系） */
  position: relative; /* 疑似要素配置のため */
}

/* 飾り共通レイヤー */
.decor {
  position: absolute;
  .decor--catch {
    pointer-events: auto !important; /* ← クリックを有効化 */
    cursor: pointer; /* ← ユーザーが分かるようにポインタ表示 */
  }
  z-index: 20; /* アップローダより前面、ガイドOverlayより背面でOKならこのまま */
}

/* 扇形キャッチ：画像・位置・サイズはCSSで完結 */
.decor--catch {
  /* 画像パス（相対。style.cssがテーマ直下ならこの相対でOK） */
  background-image: url("/wp-content/uploads/2025/10/ChatGPT-Image-2025年9月15日-06_50_19.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  /* 位置・サイズ（pxは全部CSSで管理） */
  top: 30px; /* お好みで微調整 */
  left: -30px !important; /* ← もっと左へ */
  right: auto !important;
  width: 200px;
  height: 120px;

  /* 少しだけ立体感（任意） */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.decor--catch::before {
  background-position: left center; /* center → left */
}

/* 端末幅が狭い時に少しだけ小さく（任意） */
@media (max-width: 380px) {
  .decor--catch {
    width: 260px;
    height: 140px;
    top: 44px;
    left: 2%;
  }
}

/* SNSアイコン */
.sidebar-social-row {
  display: flex;
  justify-content: left;
  gap: 24px;
  margin-top: 220px; /* ご成約内容との間に余白 */
}

/* メインリンク */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.sidebar-menu li {
  margin-bottom: 8px;
}

.sidebar-link {
  position: relative; /* 疑似要素配置のため */
  text-decoration: none;
  color: #222;
  font-weight: 500;
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 6px 0;
  margin-top: 20px;
}

/* ＞アイコンを右に表示 */
.sidebar-link::after {
  content: "＞"; /* ←ここを▶︎などに変えてもOK */
  position: absolute;
  right: 12px; /* 右端の位置調整 */
  top: 50%;
  transform: translateY(-50%);
  color: #999; /* 矢印の色 */
  font-size: 13px;
  transition: color 0.2s ease;
}

/* ホバー時に色を変える */
.sidebar-link:hover::after {
  color: #000;
}

/* === FINAL: バッジは紫塗り＋白文字で統一 === */
.guide-overlay .badge,
.guide-panel .badge,
.badge {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #fff !important;
  margin-top: 5px; /* ご成約内容との間に余白 */
}

/* ===== index.php のレイアウト指定をCSSに集約 ===== */
/* ページタイトル */
.page-title-wrap {
  max-width: 480px;
  margin: 0 auto;
}

.page-title {
  font-size: 12px;
  padding: 0 8px;
  margin-bottom: -4px;
}

/* 右上固定のブランド表記 */
.brand-fixed {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 12px;
}

/* スロット共通（もともと inline: absolute + top/left/right + width） */
.slot {
  position: absolute;
}

.slot-hairset-lg {
  top: 66px;
  left: 165px;
  width: 200px;
}

.slot-hair-acc {
  top: 30px;
  right: 130px;
  width: 110px;
}

.slot-makeup {
  top: 182px;
  left: 30px;
  width: 110px;
}

.slot-item-a {
  top: 180px;
  right: 25px;
  width: 110px;
}

.slot-item-b {
  top: 360px;
  right: 14px;
  width: 110px;
}

.slot-item-c {
  top: 540px;
  right: 48px;
  width: 160px;
}

.slot-nail {
  top: 400px;
  left: 30px;
  width: 110px;
}

/* モデル枠の配置（中央配置 + 上余白） */
.model-block {
  display: flex;
  justify-content: center;
  padding-top: 190px;
}

/* ガイド切替と説明文の外枠 */
.explanation-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px;
  background: #fff;
}

.guide-toggle {
  text-align: left;
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 8px 0;
  cursor: pointer;
}

/* 角度＆線長は .guide-pill.lead-angled の既存仕組み（--angle / --lead）を使用 */
/* 枠外の説明文を小さく */
.explanation-wrap .explanation-text {
  font-size: 12px !important; /* Tailwindの text-sm が付いていても確実に上書き */
  line-height: 1.8; /* 行間は読みやすく少し広め */
  letter-spacing: 0.02em; /* ほんのり字間 */
}

/* 外側は透過（背景を抜く） */
.box-wrapper,
.uploader {
  background: transparent !important;
}

/* 画像が入ったらノイズを消して画像だけ表示（既存仕様のまま） */
.uploader.has-image .box {
  background-image: none !important;
  background-color: transparent !important;
}

/* 左下配置：テキストの左に縦線、下に横線だけを引く L 字 */
.brand-fixed--msb-bl {
  position: absolute;
  left: 10px; /* 位置はお好みで微調整 */
  bottom: 10px;
  right: auto;
  top: auto;
  display: inline-block;
  padding: 6px 10px; /* テキストの当たり */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg);
  z-index: 26;
  pointer-events: none; /* 下の操作を邪魔しない。必要なら auto に */

  /* L字のパラメータ（調整しやすいよう変数化） */
  --l-gap: 1px; /* テキスト枠と線の距離（外側へどれだけ離すか） */
  --l-thick: 1px; /* 線の太さ */
  --l-color: currentColor; /* 線の色（文字色に追随） */

  /* テキスト端から線を少し“延長”したい場合の余白（0にするとピッタリ） */
  --l-extra-x: 30px; /* 下線の右方向への延長量 */
  --l-extra-y: 20px; /* 縦線の下方向への延長量 */
}

/* 左の縦線（下に向かって少し延長） */
.brand-fixed--msb-bl::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--l-gap));
  bottom: calc(-1 * var(--l-gap));
  width: var(--l-thick);
  height: calc(100% + var(--l-gap) + var(--l-extra-y));
  background: var(--l-color);
  pointer-events: none;
}

/* 下の横線（右に向かって少し延長） */
.brand-fixed--msb-bl::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--l-gap));
  bottom: calc(-1 * var(--l-gap));
  height: var(--l-thick);
  width: calc(100% + var(--l-gap) + var(--l-extra-x));
  background: var(--l-color);
  pointer-events: none;
}

/* 緑枠アップロードの説明文（中のテキストを緑の枠で囲う） */
.box-wrapper.highlight .desc-green {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1.5px solid #00ff66; /* 既存の緑と合わせる */
  border-radius: 8px;
  background: rgba(
    154,
    205,
    50,
    0.06
  ); /* ごく薄い緑の下地（不要なら transparent）*/
  color: #111;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 初期のモザイク背景（画像タイル） */
.uploader .box {
  background-image: url("http://172.22.1.132:8080/wp-content/uploads/2025/10/スクリーンショット-2025-10-23-19.17.02.png") !important;
  background-size: 180px auto; /* ← 1タイルの大きさ。好みで 120–260px 程度に調整 */
  background-repeat: repeat; /* ← 繰り返す（モザイク化） */
  background-position: 0 0; /* タイルの基準位置 */
}

/* 画像が選択されたら初期モザイクを消す（既存の仕様そのまま） */
.uploader.has-image .box {
  background-image: none !important;
  background-color: transparent !important;
}

/* ===== ラベル（完全に枠外に独立配置できる） ===== */
.label-black {
  position: absolute; /* 独立レイヤー配置 */
  z-index: 200; /* 枠より上に常に表示 */
  pointer-events: none; /* 背景操作の邪魔をしない */
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 0;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* 黒ラベル */
.label-black {
  background: #000;
  color: #fff;
}

/* 好きな位置に自由配置できるように：相対基準を親に付与 */
.position-anchor {
  position: relative; /* この中でラベルをabsolute配置できる */
}

/* ===== アップロード枠と同サイズの黒枠ガイド ===== */
.free-guide {
  position: absolute;
  inset: 0; /* 親要素と同じサイズ */
  border: 2px solid #000; /* 黒枠線 */
  box-sizing: border-box;
  border-radius: 0;
  pointer-events: none;
  z-index: 150; /* アップローダより前面、文字等より後ろ */
}

/* 中にテキストを入れる場合 */
.free-guide::after {
  content: attr(data-label); /* HTML側で data-label="HAIR SET" のように指定 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: #000;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border: 1px solid #000;
  border-radius: 0;
}

/* ===== アップロード枠サイズに合わせる黒枠ガイド ===== */
.free-guide-box {
  position: absolute;
  border: 2px solid #000;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  pointer-events: none; /* 下の操作を邪魔しない */
  z-index: 140; /* アップローダの上に表示 */
}

/* ラベルを中央に入れたい場合（不要なら削除OK） */
.free-guide-box::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #000;
  background: rgba(255, 255, 255, 0.75);
  padding: 2px 6px;
  border: 1px solid #000;
}

/* ===== 座標（pattern基準） ===== */
/* MAKE UP 近辺：右隣／下隣 */
.slot-makeup-fg-1 {
  top: 100px;
  left: 300px;
} /* 右隣 */
.slot-makeup-fg-2 {
  top: 300px;
  left: 69px;
} /* 下隣 */

/* HAIR SET(大) 近辺：右隣（480px幅に収まるギリギリ） */
.slot-hairset-fg-1 {
  top: 180px;
  left: 130px;
}

/* ===== 緑の小さいガイド正方形 ===== */
.guide-square {
  position: absolute;
  width: 10px; /* サイズ（小さく調整可） */
  height: 10px;
  background: #00ff66; /* 鮮やかな緑 (#00ff66 が近い色) */
  border: 1px solid #00ff66;
  box-sizing: border-box;
  z-index: 500;
  border-radius: 2px;
  pointer-events: none;
}

/* ===== 緑の小さいガイド正方形（四隅用）===== */
.guide-square {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #00ff66; /* 鮮やかな緑 */
  border: 1px solid #00ff66;
  box-sizing: border-box;
  z-index: 400;
  border-radius: 2px;
  pointer-events: none;
}

/* NAIL・ITEM 枠に対して四隅に配置 */
.slot-nail .guide-square,
.slot-item-a .guide-square,
.slot-item-b .guide-square,
.slot-item-c .guide-square {
  position: absolute;
}

/* 各隅の共通座標 */
.guide-tl {
  top: -6px;
  left: -6px;
} /* 左上 */
.guide-tr {
  top: -6px;
  right: -6px;
} /* 右上 */
.guide-bl {
  bottom: -6px;
  left: -6px;
} /* 左下 */
.guide-br {
  bottom: -6px;
  right: -6px;
} /* 右下 */

/* ===== 緑の小さいガイド正方形 ===== */
.guide-square {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #00ff66; /* 鮮やかな緑 */
  border: 1px solid #00ff66;
  box-sizing: border-box;
  border-radius: 2px;
  z-index: 300;
  pointer-events: none;
}

/* ===== 四隅の座標 ===== */
.guide-tl {
  top: -6px;
  left: -6px;
} /* 左上 */
.guide-tr {
  top: -6px;
  right: -6px;
} /* 右上 */
.guide-bl {
  bottom: -6px;
  left: -6px;
} /* 左下 */
.guide-br {
  bottom: -6px;
  right: -6px;
} /* 右下 */

/* ===== 白抜きの緑ガイド（小さな四角）===== */
.guide-square {
  position: absolute;
  width: 8px; /* 正方形：8〜10px 推奨 */
  height: 8px;
  background: transparent; /* 白抜き */
  border: 1.5px solid #00ff66; /* 緑の線だけ */
  border-radius: 2px; /* 少しだけ角丸。直角が良ければ 0 に */
  box-sizing: border-box;
  z-index: 60; /* 画像の上に来るように */
  pointer-events: none; /* クリック干渉なし */
}

/* 四隅（.uploader を基準に少し“はみ出す”演出。内側にしたければ数値を+に） */
.guide-tl {
  top: -5px;
  left: -5px;
}
.guide-tr {
  top: -5px;
  right: -5px;
}
.guide-bl {
  bottom: -5px;
  left: -5px;
}
.guide-br {
  bottom: -5px;
  right: -5px;
}

/* ===== 白抜きの緑ガイド（小さな四角）===== */
.guide-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent; /* 白抜き */
  border: 1.5px solid #00ff66; /* 緑の線だけ */
  border-radius: 2px;
  box-sizing: border-box;

  /* 最前面に出すための設定 */
  z-index: 9999; /* ← 最上層に固定 */
  pointer-events: none; /* 操作は下に通す */
}

/* 四隅の位置指定（外枠の上に少しはみ出す） */
.guide-tl {
  top: -6px;
  left: -6px;
}
.guide-tr {
  top: -6px;
  right: -6px;
}
.guide-bl {
  bottom: -6px;
  left: -6px;
}
.guide-br {
  bottom: -6px;
  right: -6px;
}

/* ===== 緑の白抜きガイド四角 ===== */
.guide-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 2px solid #00ff66;
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999; /* 枠の上に確実に来る */
}

/* 四隅の位置調整（枠よりやや外に） */
.guide-tl {
  top: -6px;
  left: -6px;
}
.guide-tr {
  top: -6px;
  right: -6px;
}
.guide-bl {
  bottom: -6px;
  left: -6px;
}
.guide-br {
  bottom: -6px;
  right: -6px;
}

.guide-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid #00ff66;
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
}

.guide-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid #00ff66;
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
}

/* 枠より外に出す位置を調整 */
.guide-tl {
  top: -34px;
  left: -8px;
} /* ← 上に4pxずらした */
.guide-tr {
  top: -34px;
  right: -8px;
} /* ← 上に4pxずらした */
.guide-bl {
  bottom: -8px;
  left: -8px;
}
.guide-br {
  bottom: -8px;
  right: -8px;
}

/* 四辺の中央にも配置（中間位置のガイド） */
.guide-mid-top {
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-mid-bottom {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-mid-left {
  top: 37%;
  left: -8px;
  transform: translateY(-50%);
}
.guide-mid-right {
  top: 37%;
  right: -8px;
  transform: translateY(-50%);
}

/* はみ出し防止を解除 */
.uploader,
.box-wrapper,
.design-frame,
.pattern {
  overflow: visible !important;
}

/* 横幅は既存のアップロード枠のサイズクラスを再利用 */
.sz-98 {
  width: 110px;
  height: 110px;
} /* 既存 */
.sz-110 {
  width: 110px;
  height: 110px;
} /* 既存 */

/* 新しい細い黒帯タグ（ラベルの代替） */
.floating-tag {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  height: var(--h, 14px); /* ← 縦の薄さはここで調整 */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ← 左寄せ */
  padding: 0 6px;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
  z-index: 200; /* 枠の上に出す */
  pointer-events: none; /* 操作の邪魔をしない */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* 幅だけ拝借。高さは帯なので上書きされます */
.floating-tag.sz-98 {
  width: 90px;
}
.floating-tag.sz-110 {
  width: 120px;
}

/* === コンテンツ（ヘッダー下の隙間） === */
.site-main {
  padding-top: calc(var(--header-h) + 40px); /* ← 余白を広めに */
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 40px;
}

/* === サイドバー全体に上余白を追加 === */
.site-sidebar {
  padding-top: 60px; /* ← 上方向に余裕 */
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 各ブロックの間隔 */
}

/* スマホ（768px未満）でも上余白が効くように */
@media (max-width: 767px) {
  .site-sidebar {
    padding-top: 28px;
  }
}

/* 画像プレビューは <img> で最前面に重ねる */
.uploader {
  position: relative;
  z-index: 20;
}

.uploader .preview {
  position: absolute;
  inset: 0;
  z-index: 600; /* 画像を最前面へ */
  display: none; /* 画像が入るまで非表示 */
}

.uploader .preview img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいにフィット */
  display: block;
}

/* 画像が入ったらプレビューを表示し、下地は消す */
.uploader.has-image .preview {
  display: block;
}
.uploader.has-image .box {
  background: transparent !important; /* ← 下地やタイルを無効化 */
  background-image: none !important;
}

/* 他の装飾レイヤーとの前後関係（必要に応じて） */
.floating-tag {
  z-index: 200;
} /* 画像の下にしたいなら小さめ */
.box-wrapper {
  z-index: 10;
}
.guide-square {
  z-index: 9999;
  pointer-events: none;
} /* 角の緑は最前面のまま */

/* デフォルト：ガイド表示（今まで通り） */
.pattern .guide-square,
.pattern .floating-tag {
  display: block;
}

/* OFF のときに隠す */
.pattern.guides-off .guide-square,
.pattern.guides-off .floating-tag {
  display: none !important;
}

/* ===============================
   My Styling Board – guides scale fix
   （既存style.cssの“後”に読み込むこと）
   =============================== */

/* ■ 4:5の外枠とステージの基準（既存があればそのまま上書き） */
.design-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.pattern {
  position: absolute;
  top: 0;
  left: 0;
  /* あなたの既存幅・高さ指定があれば尊重されるが、
     なければ以下が効く（480×600の原寸キャンバス想定） */
  width: 480px;
  height: 600px;
  transform-origin: 0 0;
}

/* ■ ガイド一式を #stage 基準に固定（必ずstage内で絶対配置） */
#stage .guide-overlay,
#stage .guide-tags {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

/* ■ 緑の角ハンドル（定義が重複していても最終版が勝つ） */
.guide-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 2px solid #00ff66;
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
}

.guide-tl {
  top: -34px;
  left: -4px;
}
.guide-tr {
  top: -3px;
  right: -4px;
}
.guide-bl {
  bottom: -6px;
  left: -4px;
}
.guide-br {
  bottom: -6px;
  right: -4px;
}

.guide-mid-top {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-mid-bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-mid-left {
  top: 37%;
  left: -6px;
  transform: translateY(-50%);
}
.guide-mid-right {
  top: 37%;
  right: -6px;
  transform: translateY(-50%);
}

/* ■ 浮遊ラベル（黒帯）— 既存の見た目は尊重。座標は従来どおりpx指定 */
.floating-tag {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  height: var(--h, 14px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
  z-index: 700;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.floating-tag.sz-98 {
  width: 90px;
}
.floating-tag.sz-110 {
  width: 120px;
}

.tag-makeup-1 {
  top: 400px;
  left: 30px;
}
.tag-makeup-2 {
  top: 325px;
  left: 30px;
}
.tag-hairset-1 {
  top: 185px;
  left: 165px;
}

/* ■ ガイドピル（線色はcurrentColorを継承） */
.guide-pill {
  position: absolute;
  --lead: 20px;
  --line-w: 1px;
  --accent: currentColor;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--accent);
  color: currentColor;
  white-space: nowrap;
}

.guide-pill::after {
  content: "";
  position: absolute;
  width: var(--lead);
  height: var(--line-w);
  background: var(--accent);
}

.guide-pill.lead-angled::after {
  left: 50%;
  top: 0%;
  transform-origin: 0 0;
  transform: rotate(var(--angle, 0deg));
}

/* ■ レイヤー順の最終調整（既存と競合してもこれが勝つ） */
.box-wrapper {
  z-index: 10;
}
.uploader {
  z-index: 20;
}
.uploader .preview {
  z-index: 600;
} /* 画像 */
.floating-tag {
  z-index: 700;
} /* ラベル */
.guide-square {
  z-index: 9999;
} /* 角ハンドル最前面 */

/* ■ ガイドのON/OFF（既存のクラスを活用） */
.pattern .guide-square,
.pattern .floating-tag {
  display: block;
}

.pattern.guides-off .guide-square,
.pattern.guides-off .floating-tag {
  display: none !important;
}

/* ===============================
   My Styling Board – guides scale fix
   （既存style.cssの“後”に読み込む）
   =============================== */

/* ■ 4:5外枠 + ステージ */
.design-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 700px;
  transform-origin: 0 0;
}

/* ■ ガイド一式は #stage 基準で固定 */
#stage .guide-overlay,
#stage .guide-tags {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

/* ■ 浮遊ラベル（黒帯タグ）— 常時表示がデフォルト */
.floating-tag {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  height: var(--h, 14px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
  background: #000;
  color: #fff;
  font-size: 5.7px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
  z-index: 700;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.floating-tag.sz-98 {
  width: 90px;
}
.floating-tag.sz-110 {
  width: 119px;
}

.tag-makeup-1 {
  top: 320px;
  left: 30px;
}
.tag-makeup-2 {
  top: 305px;
  left: 30px;
}
.tag-hairset-1 {
  top: 185px;
  left: 165px;
}

/* ★ ガイドONのときだけ黒帯タグを隠す（他の“ガイド時に隠す要素”と同様の挙動） */
#stage .guide-overlay.is-on ~ .floating-tag {
  display: none !important;
}

/* #stage .guide-overlay.is-on ~ .label-black { display: none !important; } */

/* ■ 緑の角ハンドル（重複定義があってもこれが勝つ） */
.guide-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid #00ff66;
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
}

.guide-tl {
  top: -34px;
  left: -6px;
}
.guide-tr {
  top: -34px;
  right: -6px;
}
.guide-bl {
  bottom: -6px;
  left: -6px;
}
.guide-br {
  bottom: -6px;
  right: -6px;
}

.guide-mid-top {
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-mid-bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-mid-left {
  top: 40%;
  left: -6px;
  transform: translateY(-50%);
}
.guide-mid-right {
  top: 40%;
  right: -6px;
  transform: translateY(-50%);
}

/* ■ ガイドピル（線色はcurrentColorベース） */
.guide-pill {
  position: absolute;
  --lead: 20px;
  --line-w: 1px;
  --accent: currentColor;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--accent);
  color: currentColor;
  white-space: nowrap;
}

.guide-pill::after {
  content: "";
  position: absolute;
  width: var(--lead);
  height: var(--line-w);
  background: var(--accent);
}

.guide-pill.lead-angled::after {
  left: 50%;
  top: 0%;
  transform-origin: 0 0;
  transform: rotate(var(--angle, 0deg));
}

.guide-pill.purple {
  --accent: #6d28d9;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.guide-pill.black {
  --accent: #111;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ピルの座標（pattern基準） */
.pill-hairset {
  top: 140px;
  left: 45px;
  --angle: -30deg;
  --lead: 90px;
}
.pill-kazari {
  top: 160px;
  left: 345px;
  --angle: -120deg;
  --lead: 30px;
}
.pill-makeup {
  top: 340px;
  left: -20px;
  --angle: -75deg;
  --lead: 100px;
}
.pill-item-a {
  top: 352px;
  left: 420px;
  --angle: -110deg;
  --lead: 40px;
}
.pill-item-b {
  top: 660px;
  left: 300px;
  --angle: -40deg;
  --lead: 30px;
}
.pill-item-c {
  top: 600px;
  left: 460px;
  --angle: -80deg;
  --lead: 100px;
}
.pill-item-nail {
  top: 600px;
  left: 15px;
  --angle: -65deg;
  --lead: 60px;
}

/* ■ レイヤー順の最終調整 */
.box-wrapper {
  z-index: 10;
}
.uploader {
  z-index: 20;
}
.uploader .preview {
  z-index: 600;
}
.floating-tag {
  z-index: 700;
}
.guide-square {
  z-index: 9999;
}

/* ===============================
   ガイド表示中の文字スタイル強制（ヒラギノ角ゴ + 太め）
   =============================== */
#stage .guide-overlay,
#stage .guide-overlay * {
  font-family:
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Noto Sans JP",
    "Yu Gothic", "YuGothic", Meiryo, sans-serif !important;

  font-weight: 600 !important; /* 少し細くするならここを調整 */
  font-size: 9px !important; /* ★ 白いガイド文言の基本サイズをここで固定 */
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* =========================================
   Sidebar を少しスリム化 + タイトル類を小さく
   追記パッチ（style.css の末尾に貼る）
   ========================================= */

/* 1) サイドバー幅を微調整（260px → 236px） */
:root {
  --sidebar-w: 236px; /* ← ここを変えるだけで全体が追従 */
}

/* 2) サイドバー幅を詰めた分、余白系を微調整（PC幅） */
@media (min-width: 768px) {
  .site-header {
    padding-left: calc(var(--sidebar-w) + 12px);
  }
  .site-main {
    margin-left: var(--sidebar-w);
  }
}

/* 3) サイドバー内の行間とパディングを微調整（圧縮しすぎない程度に） */
.site-sidebar {
  padding: 14px 14px 20px; /* 上下左右を少しだけ詰める */
}

.sidebar-link {
  gap: 8px;
  padding: 8px 10px; /* 行の高さを少しだけ低く */
  border-radius: 8px;
  font-size: 13px; /* 項目テキストもわずかに縮小 */
}

.sidebar-plain-links a {
  font-size: 13.5px;
  line-height: 1.4;
}

/* 4) 「マイスタイリングボード」（ページ上部タイトル想定）を小さく */
.page-title-wrap .page-title,
.page-title {
  font-size: 11px !important; /* 12px → 11px に */
  letter-spacing: 0.02em;
}

/* 5) 「ご成約内容」（サイドバー見出し想定）を小さく */
.site-sidebar .section-title,
.site-sidebar .sidebar-title,
.site-sidebar h2,
.site-sidebar h3 {
  font-size: 12px !important; /* 見出しを控えめに */
  line-height: 1.35;
  font-weight: 700;
  margin: 8px 0 6px;
}

/* 6) LINE CTA と SNS 行もわずかに詰める（はみ出し対策） */
.line-cta {
  padding: 8px 10px;
}
.line-text {
  font-size: 11.5px;
}
.sidebar-social-row {
  gap: 10px;
}

/* 7) 右端の「＞」アイコン位置を微調整（幅を詰めたので） */
.sidebar-link::after {
  right: 10px;
  font-size: 12px;
}

/* 8) タイトルの上部ヘッダー文字も気持ち小さく（任意） */
.site-title {
  font-size: 15px;
}

/* 2) SNSアイコン行に左右の余白を追加 */
.sidebar-social-row {
  margin-left: 16px; /* 左右の外側余白 */
  margin-right: 16px;
  justify-content: space-between; /* 両端に広げる配置。中央寄せなら center */
  gap: 16px; /* アイコン間の距離（既存より少し広め） */
}

/* SNSアイコン自体のサイズを微調整（詰まりすぎ防止） */
.sidebar-social-row .social-btn {
  width: 24px;
  height: 24px;
}

/* =========================================
   Sidebar – 「マイスタイリングボード」上に余白追加
   （style.css の末尾に貼る）
   ========================================= */

/* サイドバー内の最初のメニュー項目の上に余白 */
.sidebar-menu li:first-child {
  margin-top: 18px; /* ← お好みで 12〜24px 程度まで調整可 */
}

/* 見出し「ご成約内容」などの直前に余白を増やす */
.site-sidebar h2,
.site-sidebar .section-title,
.site-sidebar .sidebar-title {
  margin-top: 24px; /* ↑サイドバー内セクションの区切り強調 */
}

/* =========================================
   ガイド表示ON/OFF 上の余白をゼロにする
   ========================================= */

/* 枠全体 (.explanation-wrap) の上パディングを削除 */
.explanation-wrap {
  padding-top: 0 !important;
}

/* 「＋ ガイド表示 ON/OFF」テキストの上マージンも削除 */
.guide-toggle {
  margin-top: 0 !important;
  margin-bottom: 8px; /* 下は少し残すとバランス良い */
}

/* =========================================
   タイトル・ガイド表示の余白調整
   ========================================= */

/* Members Page の下の余白を詰める */
.page-title-wrap {
  margin-bottom: 4px !important;
}

/* ガイド表示 ON/OFF の上余白を詰める */
.explanation-wrap {
  padding-top: 0 !important;
}

/* =========================================
   ガイド表示ON/OFFを枠線のすぐ下にくっつける
   ========================================= */

/* 枠外説明エリア全体（白いボックス）を上詰め */
.explanation-wrap {
  margin-top: 0 !important; /* 枠との外側余白を完全になくす */
  padding-top: 0 !important; /* 内側の余白もなくす */
}

/* 「＋ ガイド表示 ON/OFF」自体も上マージンをゼロに */
.guide-toggle {
  margin-top: 0 !important;
  margin-bottom: 8px; /* 下の説明文との間だけ少し余白 */
}

/* デザインフレームの下に少しでも margin が残っていれば削除 */
.design-frame {
  margin-bottom: 0 !important;
}

/* =========================================
   ガイド表示 ON/OFF ボタンの文字サイズと色調整
   ========================================= */
.guide-toggle {
  font-size: 9px !important; /* 小さめに */
  color: #000 !important; /* 黒文字に変更 */
  font-weight: 500; /* 少しだけ太く（視認性キープ） */
  letter-spacing: 0.02em;
  margin-top: 0 !important; /* 枠線に密着 */
  margin-bottom: 24px;
  line-height: 1.5;
  cursor: pointer;
}

.guide-toggle:hover {
  color: #222; /* hover時ほんの少し濃く */
}

/* =========================================
   Members Page タイトルをメイン枠線にぴったりくっつける
   ========================================= */

/* タイトル全体を完全に上詰め＆下詰め */
.page-title-wrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1;
}

/* タイトル文字自体も上下マージンを完全リセット */
.page-title {
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  font-weight: 600;
  color: #999 !important;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* design-frame の上余白も完全削除 */
.design-frame {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-width: 1px; /* ← 上線を確実に見せる（tailwind干渉防止） */
}

/* 万が一 tailwind の mt-* クラスが付いていたら無効化 */
.page-title-wrap[class*="mt-"],
.page-title[class*="mt-"] {
  margin-top: 0 !important;
}
/* ▼ 説明＋メモ全体のコンテナ */
.explanation-wrap {
  max-width: 520px; /* 少し広めに */
  margin: 40px auto 24px;
  padding: 0 8px; /* 余白も少しだけに */
}

/* メモ全体を左右いっぱいに */
.memo-wrap {
  margin-top: 34px;
  margin-left: -4px; /* paddingぶん少しはみ出させて広く見せる */
  margin-right: -4px;
}

/* 上の1行：左に色バー＋文＋下線 */
.memo-header {
  display: flex;
  align-items: flex-start;
  gap: 6px; /* すこし詰める */
  border-bottom: 1px solid #6f3381;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

/* 左の江戸紫バー */
.memo-bar {
  width: 4px; /* バーを少し細くして本文の横幅を確保 */
  background: #6f3381;
  min-height: 16px;
}

/* タイトル文：ヒラギノ＋1行に収める */
.memo-title {
  margin: 0;
  line-height: 1.8;
  font-size: 8px; /* 小さめ */
  overflow: hidden;
  text-overflow: ellipsis; /* 端が少し切れる場合は「…」に */
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
    "Meiryo", sans-serif;
  font-weight: 550;
}

/* 入力枠：江戸紫の四角枠 */
.memo-textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid #6f3381;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #ffffff;
  color: inherit;
  line-height: 1.5;
  font-size: 10px;
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
    "Meiryo", sans-serif;
}

.memo-textarea::placeholder {
  color: #9ca3af;
}
/* 枠外右下にボタンを寄せる */
.memo-action {
  max-width: 520px; /* explanation-wrap と合わせる */
  margin: 6px auto 0;
  padding: 0 8px;
  display: flex;
  justify-content: flex-end;
}

/* 保存ボタン */
.memo-save-btn {
  font-size: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid #6f3381;
  background: #6f3381;
  color: #fff;
  cursor: pointer;
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
    "Meiryo", sans-serif;
}

.memo-save-btn:hover {
  opacity: 0.9;
}
/* --- サブタブをコンパクトに --- */
#sb-styleboard-children {
  margin-top: 4px; /* 6→4 などに */
  padding-left: 8px;
}

#sb-styleboard-children li {
  margin: 0.5px 0; /* 項目間の縦間隔を狭める */
}

#sb-styleboard-children .sidebar-sublink {
  padding: 5px 8px; /* 内側余白を小さく */
  font-size: 13px; /* 少しだけ小さく（任意） */
  line-height: 1.25; /* 行間を詰める */
  border-radius: 8px; /* アクティブ時の角丸もほんの少し控えめに */
}

/* アクティブ時の見た目はそのまま・枠だけコンパクト */
#sb-styleboard-children .sidebar-sublink.is-active {
  box-shadow: 0 0 0 2px rgba(109, 60, 158, 0.12);
}
/* ==== サイドバーSNSアイコンを常に32pxに固定 ==== */
.site-sidebar .sidebar-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.site-sidebar .social-btn {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.site-sidebar .social-icon {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* 念のため：サイドバー内の他の img が暴れない保険 */
.site-sidebar img {
  max-width: 100%;
  height: auto;
}

/* もしSVGアイコンを使う箇所があれば同様に固定 */
.site-sidebar svg {
  width: 32px;
  height: 32px;
}
/* ===== ガイド表示と「背景を戻す」を同じスタイルで左詰め ===== */

.explanation-header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */
  gap: 6px; /* 文字同士の間隔 */
  margin-bottom: 6px;
}

/* 左右どちらも同じ見た目・同じ大きさ */
.explanation-header .guide-toggle,
.explanation-header .reset-bg-text {
  margin: 0;
  font-size: 9px !important; /* ← ガイド表示と同じに固定したいので !important */
  font-weight: 500;
  color: #000; /* 黒 */
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

/* 触ったときにちょっとだけ反応 */
.explanation-header .guide-toggle:hover,
.explanation-header .reset-bg-text:hover {
  opacity: 0.6;
}
/* ===== ガイド内の白い文言サイズを最後に強制上書き ===== */
#stage .guide-pill {
  font-size: 8px !important; /* 好きなサイズに */
  padding: 3px 5px; /* 小さめにしたい場合はここも調整 */
}