/* ========= Global ========= */
:root{
  --sw-font-base: 16px;
  --sw-font-title: clamp(24px,2.8vw,30px);
  --sw-font-en: clamp(14px,1.8vw,18px);
  --sw-font-table: 1rem;
  --sw-radius: 16px;
  --sw-shadow: 0 12px 30px rgba(0,0,0,.08);
  --sw-border: 1px solid rgba(0,0,0,.12);
  --sw-bg: #fff;
}
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.sw-body{ background:#f6f7fb; }

/* Brand */
.dareca-brand{ text-align:center; padding:12px 0 2px; }
.dareca-brand img{ width:60px; height:auto; display:inline-block; }
.dareca-copy{ text-align:center; padding:16px 0 24px; color:#6b7280; font-size:.92rem; }
.dareca-copy a{ color:inherit; text-decoration:none; }

/* Layout */
#sw-app{}
.sw-container{ max-width:760px; margin:0 auto; padding:0 18px; }
.sw-center{ text-align:center; }
.sw-title{ text-align:center; margin:14px 0; font-size:clamp(20px,2.2vw,28px); }

/* Cards */
.sw-card{ background:var(--sw-bg); border-radius:var(--sw-radius); box-shadow:var(--sw-shadow); padding:22px; margin:16px 0; }
.sw-card--mini{ padding:0; overflow:hidden; }
.sw-card--mini .sw-card__link{ display:block; padding:14px; text-decoration:none; color:inherit; }
.sw-card__thumb{ width:100%; height:auto; display:block; }
.sw-card__title{ font-size:1.05rem; margin:8px 0 2px; }
.sw-card__meta{ font-size:.85rem; color:#6b7280; }

/* Buttons */
.sw-btn{ display:inline-block; background:#111; color:#fff; padding:.6rem 1.1rem; border-radius:999px; text-decoration:none; }
.sw-btn.ghost{ background:transparent; color:#111; border:1px solid #111; }

/* Head block */
#dareca-sw .sw-head{
  text-align:center; background:var(--sw-bg); box-shadow:var(--sw-shadow);
  border-radius:12px; padding:12px 10px 10px; margin:8px 0 14px;
}
#dareca-sw .sw-name{ font-size:var(--sw-font-title); margin:0 0 4px; font-weight:800; }
#dareca-sw .sw-name-en{ font-size:var(--sw-font-en); opacity:.75; margin:0 0 4px; }
#dareca-sw .sw-tagline{ font-weight:700; margin:4px 0 0; }

/* Photo */
#dareca-sw .sw-photo{ max-width:640px; margin:0 auto 12px; }
#dareca-sw .sw-photo img{ width:100%; height:auto; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.06); }

/* Table */
#dareca-sw .sw-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--sw-font-table); }
#dareca-sw .sw-table th, #dareca-sw .sw-table td{ border:var(--sw-border); padding:10px 12px; background:#fff; color:#111; }
#dareca-sw .sw-table th{ width:32%; text-align:center; font-weight:700; background:#f6f8fb; }

/* Tags */
#dareca-sw .sw-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0 2px; padding:0; }
#dareca-sw .sw-tags li{ background:#eef2ff; color:#111; border-radius:999px; padding:6px 10px; font-size:.94rem; }
.sw-tags.mini li{ font-size:.82rem; }

/* Sections */
#dareca-sw .sw-section{ background:var(--sw-bg); border-radius:var(--sw-radius); box-shadow:var(--sw-shadow); padding:22px; margin:16px 10px 10px 10px; }

/* SNS */
#dareca-sw .sw-sns-grid{ list-style:none; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:16px; align-items:center; }
#dareca-sw .sw-sns{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
#dareca-sw .sw-sns svg{ width:48px; height:48px; display:block; }

/* Grid for archive */
.sw-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }

/* Mobile tweak */
@media (max-width:768px){
  .sw-container{ padding:0 14px; }
  #dareca-sw .sw-section, #dareca-sw .sw-card{ margin-left:0; margin-right:0; }
}


/* ========== Profile photo: 画像だけ小さく（カード幅はそのまま） ========== */

/* 調整しやすいように変数化 */
:root{
  --sw-photo-img-max: 420px;   /* ← PC時の写真の最大幅。好みで 360–480px あたり */
  --sw-photo-img-max-sm: 300px;/* ← スマホ時の最大幅 */
}

/* カード自体の幅は触らない。画像だけ縮めて中央揃え */
#dareca-sw .sw-photo{
  text-align: center;                /* 念のため中央寄せ */
}

/* 画像サイズを制御（重要：width: auto & max-width 指定） */
#dareca-sw .sw-photo img,
#dareca-sw .sw-card.sw-photo img{    /* どちらのHTMLでも拾えるように両対応 */
  width: auto !important;            /* ← これで「横いっぱい」を抑止 */
  max-width: var(--sw-photo-img-max);
  height: auto;
  display: block;
  margin: 0 auto;                    /* 中央寄せ */
  border-radius: 12px;               /* 角丸はお好みで */
}

/* スマホ時はさらに小さく */
@media (max-width: 600px){
  #dareca-sw .sw-photo img,
  #dareca-sw .sw-card.sw-photo img{
    max-width: var(--sw-photo-img-max-sm);
  }
}

/* スマホ時（必要なら幅をさらに絞る） */
@media (max-width: 600px){
  #dareca-sw .sw-photo{ max-width: var(--sw-photo-max-sm); }
}

/* ===== Tags (ジャンル) spacing ===== */
:root{
  --sw-tags-top: 28px;   /* ← タグの“上”の余白 例: 20〜40px */
}

#dareca-sw .sw-tags{
  margin-top: var(--sw-tags-top);
  justify-content: center;   /* すでに中央寄せなら不要 */
  gap: 12px;
}

/* --- SNSアイコン --- */
#dareca-sw .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;}
#dareca-sw .sw-sns-icons{
  list-style:none; padding:0; margin:8px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:16px;
}
#dareca-sw .sw-sns-icon{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto;
  border-radius:999px; background:#f5f7fb; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
#dareca-sw .sw-sns-icon:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.08); }
#dareca-sw .sw-sns-icon svg{ width:28px; height:28px; display:block; }

/* --- 行レイアウト（スキル／趣味 共有） --- */
#dareca-sw .sw-rows{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
#dareca-sw .sw-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:10px; background:#f8fafc;
}
#dareca-sw .sw-row__name{ font-weight:600; }
#dareca-sw .sw-stars{ color:#ffb300; letter-spacing:.12em; }

@media (max-width: 600px){
  #dareca-sw .sw-photo img,
  #dareca-sw .sw-card.sw-photo img{
-   max-width: var(--sw-photo-img-max-sm);
+   max-width: var(--sw-photo-img-max-sm);
  }
}

- /* スマホ時（必要なら幅をさらに絞る） */
- @media (max-width: 600px){
-   #dareca-sw .sw-photo{ max-width: var(--sw-photo-max-sm); }
- }

/* ============ Directory ============ */
#dareca-dir .dir-head { margin: 10px 0 24px; }
#dareca-dir .dir-desc { color:#6b7280; }

#dareca-dir .dir-filter { background:#fff; box-shadow: var(--sw-shadow,0 12px 30px rgba(0,0,0,.08));
  border-radius:16px; padding:16px; margin:0 0 16px; }
#dareca-dir .dir-filter fieldset { border:0; padding:8px 0; margin:6px 0; }
#dareca-dir .dir-filter legend { font-weight:700; margin-bottom:6px; }
#dareca-dir .dir-filter label { display:inline-flex; align-items:center; gap:8px; margin:4px 10px 4px 0; }
#dareca-dir .dir-actions { display:flex; gap:10px; padding-top:8px; }

#dareca-dir .dir-grid { display:grid; gap:16px; }
@media (min-width: 900px){ #dareca-dir .dir-grid { grid-template-columns: 1fr; } } /* 1列（大きめカード） */

#dareca-dir .dir-card { display:grid; grid-template-columns: 170px 1fr; gap:24px;
  background:#fff; border-radius:22px; padding:18px; text-decoration:none; color:inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; }
#dareca-dir .dir-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }

#dareca-dir .dir-thumb { width:170px; height:170px; border-radius:14px; overflow:hidden; background:#f3f4f6; }
#dareca-dir .dir-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
#dareca-dir .dir-noimg { display:block; width:100%; height:100%; background: #e5e7eb; }

#dareca-dir .dir-name { font-size: clamp(28px,3.2vw,54px); line-height:1.05; margin:2px 0 4px; font-weight:800; }
#dareca-dir .dir-name-en { font-size: clamp(14px,1.6vw,22px); opacity:.8; margin:0 0 6px; letter-spacing:.02em; }
#dareca-dir .dir-tagline { margin: 4px 0 10px; font-weight:700; }

#dareca-dir .dir-sub { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; }
#dareca-dir .dir-region-pill { background:#111; color:#fff; border-radius:999px; padding:4px 10px; font-size:.9rem; }
#dareca-dir .dir-tags { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
#dareca-dir .dir-tags li { background:#eef2ff; border-radius:999px; padding:6px 10px; font-size:.92rem; }

/* 既定は黒（=主要SNS以外は黒で表示） */
#dareca-sw .sw-sns-icon { color: #000000; }

/* 主要SNSのブランド色 */
#dareca-sw .sw-sns-icon.sw-twitter   { color: #000000; } /* Xは黒 */
#dareca-sw .sw-sns-icon.sw-instagram { color: #E1306C; } /* 簡易ピンク */
#dareca-sw .sw-sns-icon.sw-facebook  { color: #1877F2; }
#dareca-sw .sw-sns-icon.sw-youtube   { color: #FF0000; }
#dareca-sw .sw-sns-icon.sw-tiktok    { color: #000000; } /* ベース黒 */

/* 行レイアウトの安定化 */
#dareca-sw .sw-rows{ display:flex; flex-direction:column; gap:.5rem; }
#dareca-sw .sw-row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem .9rem; background:#f5f7fb; border-radius:12px;
}
#dareca-sw .sw-row__name{ flex:1 1 auto; min-width:0; }
#dareca-sw .sw-stars{ flex:0 0 auto; margin-left:auto; white-space:nowrap; }

/* ==== SKILL: 金色の★だけ表示（グレーなし） ==== */
#dareca-sw .sw-stars{ font-size:1rem; line-height:1; letter-spacing:.1ch; }
#dareca-sw .sw-stars::before{ content:none; }
#dareca-sw .sw-stars::after{ color:#ffb300; content:""; }
#dareca-sw .sw-stars[data-score="0"]::after{ content:""; }
#dareca-sw .sw-stars[data-score="1"]::after{ content:"★"; }
#dareca-sw .sw-stars[data-score="2"]::after{ content:"★★"; }
#dareca-sw .sw-stars[data-score="3"]::after{ content:"★★★"; }
#dareca-sw .sw-stars[data-score="4"]::after{ content:"★★★★"; }
#dareca-sw .sw-stars[data-score="5"]::after{ content:"★★★★★"; }

/* =========================================================
   /directory 専用（#dareca-dir）
   固定高カード / 縦センター / タグは右端
   ========================================================= */
#dareca-dir{ --dir-card-h:112px; --dir-thumb:64px; --dir-gap:14px; }
@media (max-width:600px){
  #dareca-dir{ --dir-card-h:100px; --dir-thumb:56px; --dir-gap:12px; }
}

/* 一覧の並び */
#dareca-dir .dir-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}

/* ── カード骨組み：左=サムネ / 右=本文（固定高 & 縦センター） */
#dareca-dir .dir-card{
  display:grid;
  grid-template-columns: var(--dir-thumb) 1fr;
  align-items:center;                 /* ← サムネと本文ブロックを縦センター */
  gap:var(--dir-gap);
  height: var(--dir-card-h);          /* ★ 全カード同じ高さ */
  padding:8px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  text-decoration:none; color:inherit;
}

/* サムネ（正方形） */
#dareca-dir .dir-thumb{ width:var(--dir-thumb); height:var(--dir-thumb); border-radius:12px; overflow:hidden; margin:0; }
#dareca-dir .dir-thumb img, #dareca-dir .dir-noimg{ width:100%; height:100%; object-fit:cover; display:block; background:#eef1f5; }

/* ── 本文ブロック：左列=テキスト群 / 右列=タグ（グリッド領域で制御） */
#dareca-dir .dir-meta{
  height:100%;                         /* カードの固定高に合わせる */
  display:grid;
  grid-template-columns: 1fr auto;     /* 左=本文 / 右=タグ */
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "name   tags"
    "en     tags"
    "catch  tags"
    "region tags";
  column-gap:12px;
  align-items:center;                   /* ← テキスト群も縦センター寄せ */
  align-content:center;                 /* ← 行の塊ごと中央に */
}

/* 要素の割当（左列）*/
#dareca-dir .dir-name{        grid-area:name;   font-size:18px; font-weight:800; line-height:1.2; margin:0; }
#dareca-dir .dir-name-en{     grid-area:en;     font-size:11px; color:#777; margin:0; }
#dareca-dir .dir-tagline{     grid-area:catch;  font-size:12px; color:#333; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dareca-dir .dir-region-pill{ grid-area:region; display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:#111; color:#fff; white-space:nowrap; }

/* タグ（右列）：列全体を占有し、縦センター & 右寄せ */
#dareca-dir .dir-tags{
  grid-area: tags;                      /* 1〜最終行までを1つの領域として確保 */
  align-self:center;                    /* ← 領域の中で縦センター */
  justify-self:end;                     /* ← 右寄せ */
  display:flex; gap:6px; flex-wrap:wrap; margin:0; padding:0; list-style:none;
}
#dareca-dir .dir-tags > li{
  font-size:11.5px; line-height:1; padding:6px 8px; border-radius:999px;
  background:#f3f5f7; border:1px solid #e6e9ee; white-space:nowrap;
}
/* タグは3つまで（保険） */
#dareca-dir .dir-tags > li:nth-child(n+4){ display:none !important; }

/* 旧3カラム用の .dir-aside を無効化（存在しても影響させない） */
#dareca-dir .dir-aside{ display:none !important; }

/* フィルタの fieldset.dir-region はリセット（黒背景を消す） */
#dareca-dir .dir-filter .dir-region{ background:transparent; color:inherit; padding:0; border-radius:0; display:block; }

/* ====== Directory 仕上げパッチ（位置/幅/省略） ====== */

/* 1) 地域ピルの“置き場所”を固定（catch の下） */
#dareca-dir .dir-sub{ display: contents !important; } /* 中身を親グリッドへ */
#dareca-dir .dir-meta{
  grid-template-areas:
    "name   tags"
    "en     tags"
    "catch  tags"
    "region tags" !important;       /* ← この順で固定 */
}
#dareca-dir .dir-name{        grid-area: name   !important; }
#dareca-dir .dir-name-en{     grid-area: en     !important; }
#dareca-dir .dir-tagline{     grid-area: catch  !important; }
#dareca-dir .dir-region-pill{ grid-area: region !important; }

/* 2) 右端タグは常に右寄せ＆縦センター（レイアウト崩れ防止） */
#dareca-dir .dir-tags{
  align-self: center !important;    /* 縦センター */
  justify-self: end !important;     /* 右寄せ */
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}

/* 3) タグの横幅を“揃える”＋長文は省略（PC） */
#dareca-dir .dir-tags > li{
  width: 140px;                      /* ★PCの統一幅（お好みで 136–160px） */
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-flex;
  justify-content: center;
}

/* 4) スマホの横幅バランス：左=本文 / 右=タグ幅を固定して安定化 */
@media (max-width: 600px){
  /* 本文ブロックを「本文列 + タグ列（固定幅）」に */
  #dareca-dir .dir-meta{
    grid-template-columns: minmax(0, 1fr) 126px !important;  /* ← 右列=タグ幅 */
    align-items: center !important;                           /* 縦センター */
  }
  /* タグの幅もそろえる（SPサイズ） */
  #dareca-dir .dir-tags > li{
    width: 120px !important;    /* ★SPの統一幅（110–130pxで調整可） */
    max-width: 120px !important;
    font-size: 10.5px !important;
    padding: 5px 7px !important;
  }
}

/* 5) 地域ピルは改行禁止（縦割れ防止） */
#dareca-dir .dir-region-pill{ white-space: nowrap !important; }

/* ===== /directory/ SP：名前エリアを広げ、タグを小さく ===== */
@media (max-width: 600px){
  /* 右カラム(タグ列)を細く → 左(名前側)が広がる */
  #dareca-dir .dir-meta{
    grid-template-columns: minmax(0, 1fr) 100px !important; /* ← 100pxに縮小（元126px） */
    align-items: center !important; /* 縦センター維持 */
    column-gap: 8px !important;
  }

  /* タグの見た目を小さく＆幅を統一 */
  #dareca-dir .dir-tags{ gap: 4px !important; }
  #dareca-dir .dir-tags > li{
    width: 85px !important;          /* ★タグの横幅（90–110の範囲でお好みで） */
    max-width: 92px !important;
    font-size: 8px !important;      /* 少し小さく */
    padding: 4px 6px !important;     /* チップも小さく */
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* 入りきらない文字は…に */
  }
}

/* ===== /directory/ 地域ピルを内容幅に（SP/PC共通） ===== */
#dareca-dir .dir-region-pill{
  display: inline-flex !important;      /* インライン要素にして */
  width: max-content !important;        /* ← 内容ぶんだけの幅に縮む */
  max-width: 100% !important;           /* （万一のはみ出しガード） */
  white-space: nowrap !important;       /* 改行しない */
  justify-self: start !important;       /* グリッドの横伸びを無効化 */
  align-self: center !important;        /* 縦センター */
  padding: 2px 10px !important;         /* 見た目はそのまま */
}

/* 念のため：他要素が stretch しても影響を受けないように */
#dareca-dir .dir-tags{ justify-self: end !important; }

/* PC用（お好みの数値に） */
#dareca-dir{
  --dir-card-h: 96px;   /* 例：112px → 96px に縮める */
  /* ついでに余白やサムネも少しだけ詰めたいなら
  --dir-gap: 12px;
  --dir-thumb: 60px;
  */
}

/* スマホ用 */
@media (max-width:600px){
  #dareca-dir{
    --dir-card-h: 70px;  /* 例：100px → 88px */
    /* --dir-gap: 10px; --dir-thumb: 54px; などもOK */
  }
}

/* ===== DARECA Register (page-id-97) ===== */

/* 上下の白帯（ヘッダー/フッター/余白）を登録ページだけ消す */
body.page-id-97 #masthead,
body.page-id-97 .site-header,
body.page-id-97 .site-footer{
  display:none !important;
}

body.page-id-97 .site,
body.page-id-97 .site-content,
body.page-id-97 .content-area,
body.page-id-97 .entry-header,
body.page-id-97 .entry-title,
body.page-id-97 .entry-content{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

/* 背景フル画面＆中央寄せ */
body.page-id-97 .dareca-auth{
  margin:0;
  padding:clamp(16px,3vw,40px);
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(80% 60% at 50% 0%, #0b2a4a 0%, #0f172a 40%, #0b223d 100%);
}

/* カードのはみ出し防止＆ログイン風スタイル */
body.page-id-97 .dareca-auth .auth-card{
  width:min(92vw,440px);
  box-sizing:border-box;
  overflow:hidden;
  margin:0 auto;
  padding:22px clamp(18px,3.5vw,26px) 26px;
  border-radius:18px;
  background:rgba(16,24,40,.86);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  color:#e2e8f0;
}

/* ラベル/入力/ボタン（ログインページ準拠） */
body.page-id-97 .auth-card label{
  display:block; margin:10px 0 6px;
  font-size:13px; font-weight:600; color:#9fb3c8;
}
body.page-id-97 .auth-card input[type="text"],
body.page-id-97 .auth-card input[type="password"]{
  width:100%; padding:12px 14px; margin-bottom:16px;
  border-radius:12px; border:1px solid rgba(148,163,184,.28);
  background:rgba(2,6,23,.55); color:#e2e8f0;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .2s, box-shadow .2s, transform .05s;
}
body.page-id-97 .auth-card input:focus{
  outline:none; border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(37,99,235,.25), inset 0 2px 5px rgba(0,0,0,.35);
}
body.page-id-97 .auth-card input[type="submit"]{
  width:100%; padding:12px 14px; border:none; border-radius:12px;
  font-weight:800; letter-spacing:.02em; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#22c1f1 0%, #3b82f6 100%);
  box-shadow:0 10px 22px rgba(59,130,246,.35);
  transition:transform .05s, box-shadow .2s, filter .2s;
}
body.page-id-97 .auth-card input[type="submit"]:hover{ filter:brightness(1.05); }
body.page-id-97 .auth-card input[type="submit"]:active{ transform:translateY(1px); }

body.page-id-97 .auth-card a{
  display:inline-block; margin-top:14px; font-size:13px;
  color:#60a5fa; text-decoration:none;
}
body.page-id-97 .auth-card a:hover{ text-decoration:underline; }
body.page-id-97 .auth-card .copyright{ margin-top:18px; font-size:12px; color:#8aa0b8; opacity:.8; }

/* ===== Register page clean fix (page-id-97) ===== */

/* ページ全体の余白＆横スクロール禁止 */
html.page-id-97,
body.page-id-97{
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  background:#0b223d !important; /* 白チラ防止 */
}

/* ヘッダー・フッター・タイトル類を非表示 */
body.page-id-97 .dareca-brand,
body.page-id-97 .dareca-copy,
body.page-id-97 #masthead,
body.page-id-97 .site-header,
body.page-id-97 .site-footer,
body.page-id-97 .entry-header,
body.page-id-97 .entry-title{
  display:none !important;
}

/* 画面全体の背景＋中央寄せ */
body.page-id-97 .dareca-auth{
  position:fixed;
  inset:0;                      /* 4辺ピッタリにフィット */
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,36px); /* 余白は安全範囲 */
  box-sizing:border-box;
  overflow:auto;                /* 高さ不足なら縦スクロール */
  background: radial-gradient(
    80% 60% at 50% 0%,
    #0b2a4a 0%,
    #0f172a 40%,
    #0b223d 100%
  );
}

/* カード本体 */
body.page-id-97 .auth-card{
  width:min(92vw,440px);
  margin:0 auto;
  padding:22px clamp(18px,3.5vw,26px) 26px;
  border-radius:18px;
  background:rgba(16,24,40,.86);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  color:#e2e8f0;
  box-sizing:border-box;
  overflow:hidden;
}

/* フォーム要素 */
body.page-id-97 .auth-card label{
  display:block; margin:10px 0 6px;
  font-size:13px; font-weight:600; color:#9fb3c8;
}
body.page-id-97 .auth-card input[type="text"],
body.page-id-97 .auth-card input[type="password"]{
  width:100%; padding:12px 14px; margin-bottom:16px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(2,6,23,.55);
  color:#e2e8f0;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),
             0 1px 0 rgba(255,255,255,.03);
  transition:border-color .2s, box-shadow .2s;
}
body.page-id-97 .auth-card input:focus{
  outline:none; border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(37,99,235,.25),
             inset 0 2px 5px rgba(0,0,0,.35);
}
body.page-id-97 .auth-card input[type="submit"]{
  width:100%; padding:12px 14px; border:none; border-radius:12px;
  font-weight:800; letter-spacing:.02em; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#22c1f1 0%, #3b82f6 100%);
  box-shadow:0 10px 22px rgba(59,130,246,.35);
  transition:filter .2s, transform .05s;
}
body.page-id-97 .auth-card input[type="submit"]:hover{ filter:brightness(1.05); }
body.page-id-97 .auth-card input[type="submit"]:active{ transform:translateY(1px); }

body.page-id-97 .auth-card a{
  display:inline-block; margin-top:14px;
  font-size:13px; color:#60a5fa; text-decoration:none;
}
body.page-id-97 .auth-card a:hover{ text-decoration:underline; }
body.page-id-97 .auth-card .copyright{
  margin-top:18px; font-size:12px; color:#8aa0b8; opacity:.8; text-align:center;
}

/* === Register inputs fit to card (page-id-97) === */

/* カード内はすべて border-box で幅計算 */
body.page-id-97 .auth-card,
body.page-id-97 .auth-card *{
  box-sizing: border-box;
}

/* 余白をリセット（テーマの p や row による左右はみ出し対策） */
body.page-id-97 .auth-card form,
body.page-id-97 .auth-card p,
body.page-id-97 .auth-card .form-row{
  margin: 0;
  padding: 0;
}

/* 入力欄の幅を強制的にカード内に収める */
body.page-id-97 .auth-card input[type="text"],
body.page-id-97 .auth-card input[type="password"],
body.page-id-97 .auth-card input[type="email"],
body.page-id-97 .auth-card select,
body.page-id-97 .auth-card textarea{
  display: block;
  width: 100% !important;
  max-width: 100% !important;   /* calc() 系を上書き */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 入力欄の見た目（再掲：必要なら残す） */
body.page-id-97 .auth-card input[type="text"],
body.page-id-97 .auth-card input[type="password"]{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(2,6,23,.55);
  color: #e2e8f0;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03);
}

/* DMボタン（やや明るめブルーグラデ・控えめシャドウ） */
.sw-btn.sw-btn-dm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7em 1.6em;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%); /* 明るめブルー */
  border: none;
  box-shadow: 0 2px 8px rgba(66, 153, 225, 0.35); /* 控えめな影 */
  transition: all 0.3s ease;
}

.sw-btn.sw-btn-dm:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2c5282 0%, #3182ce 100%); /* 少し濃く */
  box-shadow: 0 3px 10px rgba(66, 153, 225, 0.45);
}

.sw-btn.sw-btn-dm:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(66, 153, 225, 0.3);
}

/* ===== Scroll Reveal (fade & slide-up) ===== */
:root{ --reveal-distance:16px; --reveal-duration:.7s; --reveal-ease:cubic-bezier(.2,.6,.2,1); }

[data-reveal]{
  opacity:0; transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: transform, opacity;
}

/* 表示状態 */
[data-reveal].is-visible{
  opacity:1; transform: none;
}

/* まとまり内でのステップ遅延（グリッド/リストに便利） */
[data-reveal-parent] > *[data-reveal]{
  transition-delay: calc( (var(--reveal-index, 0) * 90ms) + var(--reveal-delay, 0ms) );
}

/* 個別遅延をカスタムプロパティでも可 */
[data-reveal]{ transition-delay: var(--reveal-delay, 0ms); }

/* 動きが苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none !important; transition:none !important; }
}