@charset "utf-8";
/* =============================================================================
   三獣士 — 共通の土台
   デザイントークン／ベース／アニメーション／全ページで使い回すパーツ

   数値は design_handoff_sanjuushi の確定値。むやみに丸めないこと。
   影・パネル・グリッドなどサイズ違いが出るものは CSS変数で受けるので、
   使う側は style="--sd:7px;--sc:#F4796F" のように差分だけ書けばよい。
   ========================================================================== */

/* --- デザイントークン ----------------------------------------------------- */
:root {
  /* 背景は クリーム と ダーク の2色だけ。セクションはこの2色を交互に。 */
  --sj-dark:      #17122B;
  --sj-dark-2:    #1B1436;
  --sj-dark-3:    #241B45;
  --sj-dark-grad-a: #1A1433;
  --sj-dark-grad-b: #2C2050;
  --sj-cream:     #FFF7E8;
  --sj-white:     #FFFFFF;
  --sj-ink:       #241B3E;

  /* キャラ色： かにぱん=赤 ／ おこげ=緑 ／ こぎつねまる=黄 ／ 魔王・CDA=紫 */
  --sj-yellow:    #F8C63C;
  --sj-yellow-d:  #C79A20;
  --sj-yellow-l:  #FFE08A;
  --sj-yellow-p:  #FFEEC2;
  --sj-yellow-p2: #FFF0C9;
  --sj-yellow-p3: #FFDF95;

  --sj-red:       #F4796F;
  --sj-red-d:     #D9564C;
  --sj-red-p:     #FFDCD8;
  --sj-red-p2:    #FFE4E1;

  --sj-green:     #6FD3AE;
  --sj-green-d:   #35A87F;
  --sj-green-p:   #D6F3E7;
  --sj-green-p2:  #DDF5EC;

  --sj-purple:    #8158D8;
  --sj-purple-l:  #A688F0;
  --sj-purple-p:  #EFE7FB;
  --sj-purple-d:  #3D2C6B;
  --sj-purple-d2: #5B3AA6;

  --sj-gray:      #D5CEE2;
  --sj-gray-d:    #4A4360;
  --sj-gray-m:    #A9A2BC;

  --sj-font-title: 'Dela Gothic One', sans-serif;
  --sj-font-body:  'Zen Maru Gothic', sans-serif;

  /* ダーク面のうすい線と面 */
  --sj-line-dark: rgba(255, 247, 232, .18);
  --sj-dash-ink:  rgba(36, 27, 62, .22);
}

/* --- ベース --------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 74px; }
html, body { margin: 0; padding: 0; background: var(--sj-dark); }
* { box-sizing: border-box; }
/* hidden 属性は、あとから付くクラスの display に負けないようにしておく */
[hidden] { display: none !important; }
a { color: var(--sj-yellow); text-decoration: none; }
a:hover { color: var(--sj-yellow-l); }
::selection { background: var(--sj-red); color: #fff; }
img { max-width: 100%; }

.sj-page {
  font-family: var(--sj-font-body);
  background: var(--sj-dark);
  color: var(--sj-cream);
  overflow-x: hidden;
}
.sj-page--min { min-height: 100vh; }

/* --- アニメーション ------------------------------------------------------- */
@keyframes floaty   { 0%, 100% { transform: translateY(0) }   50% { transform: translateY(-14px) } }
@keyframes floaty-s { 0%, 100% { transform: translateY(0) }   50% { transform: translateY(-12px) } }
@keyframes twinkle  { 0%, 100% { opacity: .25; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.1) } }
@keyframes marquee  { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes pop      { from { transform: scale(.96) translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes bubbleUp { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes spin     { to { transform: rotate(360deg) } }

.sj-floaty { animation: floaty var(--fl-dur, 5s) ease-in-out var(--fl-delay, 0s) infinite; }
.sj-pop    { animation: pop .3s ease-out; }

/* --- ナビゲーション ------------------------------------------------------- */
.sj-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  height: 62px;
  background: rgba(23, 18, 43, .9);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(248, 198, 60, .28);
}
.sj-nav--public { gap: 26px; background: rgba(23, 18, 43, .86); }

.sj-nav__brand {
  font-family: var(--sj-font-title);
  font-size: 17px;
  color: var(--sj-yellow);
}
.sj-nav--public .sj-nav__brand { font-size: 19px; letter-spacing: .04em; }

.sj-nav__links {
  display: flex;
  /* 既定の stretch だと、テキストのリンクだけ上端に貼りついてピルボタンと中心がズレる */
  align-items: center;
  gap: 18px;
  margin-left: auto;
  min-width: 0;
  /* 入りきらないときは横スクロールできるが、スクロールバーの帯は出さない。
     出したままだと帯のぶん(15px)だけ中身が上に押し込まれて、ナビの縦位置がズレる。 */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.sj-nav__links::-webkit-scrollbar { display: none; }
.sj-nav--public .sj-nav__links { gap: 17px; }
.sj-nav__link { flex: none; color: var(--sj-cream); }
.sj-nav__link:hover { color: var(--sj-yellow); }
.sj-nav__link.is-current { color: var(--sj-yellow); }
.sj-nav__logout { flex: none; margin: 0; display: flex; }
.sj-nav__logout-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(255, 247, 232, .6);
}
.sj-nav__logout-btn:hover { color: var(--sj-yellow); }
.sj-nav__cta {
  flex: none;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--sj-yellow);
  color: var(--sj-dark);
}
.sj-nav__cta:hover { background: var(--sj-yellow-l); color: var(--sj-dark); }

/* --- セクションの器 ------------------------------------------------------- */
.sj-hero { position: relative; overflow: hidden; }
.sj-wrap { max-width: var(--wrap, 1180px); margin: 0 auto; }
.sj-wrap--center { text-align: center; position: relative; }

/* セクションの上下余白は --pt / --pb で差分だけ書く */
.sj-section { padding: var(--pt, 88px) 24px var(--pb, 96px); }
.sj-section--cream { background: var(--sj-cream); color: var(--sj-ink); }
.sj-section--dark  { background: var(--sj-dark); }

.sj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 290px), 1fr));
  gap: var(--gap, 24px);
}
.sj-grid--fit { grid-template-columns: repeat(auto-fit, minmax(var(--min, 300px), 1fr)); }
.sj-grid--top { align-items: start; }

/* 星（位置は使う側で指定） */
.sj-star {
  position: absolute;
  border-radius: 50%;
  animation: twinkle var(--tw-dur, 3s) ease-in-out var(--tw-delay, 0s) infinite;
  pointer-events: none;
}

/* --- 文字まわり ----------------------------------------------------------- */
.sj-eyebrow { font-size: 13px; font-weight: 900; letter-spacing: .5em; color: var(--eb-c, var(--sj-yellow)); }
.sj-label   { font-size: 13px; font-weight: 900; letter-spacing: .3em; color: var(--lb-c, var(--sj-purple)); }
.sj-cap     { font-size: var(--cap-fs, 11px); font-weight: 900; letter-spacing: var(--cap-ls, .2em); color: var(--cap-c, var(--sj-purple)); }

.sj-h1 {
  font-family: var(--sj-font-title);
  font-size: clamp(38px, 7.5vw, 84px);
  line-height: 1;
  margin: 10px 0 0;
  text-shadow: 6px 6px 0 var(--sj-purple);
}
.sj-h2 {
  font-family: var(--sj-font-title);
  font-size: clamp(var(--h2-min, 28px), 5vw, var(--h2-max, 46px));
  margin: 10px 0 0;
}
.sj-h3 { font-family: var(--sj-font-title); margin: 0; }
.sj-lead {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  margin: 18px auto 0;
  max-width: 640px;
  color: rgba(255, 247, 232, .8);
  text-wrap: pretty;
}
.sj-note { font-size: 14px; font-weight: 700; margin: 0; color: rgba(255, 247, 232, .6); }
.sj-section--cream .sj-note { color: rgba(36, 27, 62, .6); }

.sj-head { text-align: center; margin-bottom: var(--head-mb, 44px); }
.sj-head .sj-h2 { margin-top: 10px; }
.sj-head p { margin: 8px 0 0; }

/* --- 影（ハードシャドウ） -------------------------------------------------- */
/* 使い方: <div class="sj-shadow" style="--sd:10px;--sc:var(--sj-purple)"> */
.sj-shadow { box-shadow: var(--sd, 10px) var(--sd, 10px) 0 var(--sc, var(--sj-purple)); }
.sj-shadow--lift:hover {
  transform: translate(-3px, -3px);
  box-shadow: calc(var(--sd, 10px) + 3px) calc(var(--sd, 10px) + 3px) 0 var(--sc, var(--sj-purple));
}
/* 小さいカード用の控えめな持ち上がり（用語辞典） */
.sj-shadow--lift2:hover {
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--sd, 6px) + 2px) calc(var(--sd, 6px) + 2px) 0 var(--sc, var(--sj-purple));
}

/* --- カード --------------------------------------------------------------- */
.sj-card {
  border: 3px solid var(--sj-ink);
  border-radius: var(--radius, 22px);
  background: var(--sj-white);
  color: var(--sj-ink);
  overflow: hidden;
}
.sj-card--cream { background: var(--sj-cream); }
.sj-card--ink   { background: var(--sj-ink); color: var(--sj-cream); }

/* 方眼紙のような斜めストライプ（台本・アイデアカードの見出し面） */
.sj-paper { background: repeating-linear-gradient(45deg, #FFF3D6 0 14px, #FFF7E8 14px 28px); }

/* --- ピル・タグ・チップ ---------------------------------------------------- */
.sj-pill {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.sj-pill--xs { padding: 4px 11px; font-size: 10px; }
.sj-pill--sm { padding: 5px 12px; font-size: 11px; }
.sj-pill--ink { background: var(--sj-ink); color: var(--sj-cream); }

.sj-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 247, 232, .1);
  border: 2px solid rgba(255, 247, 232, .22);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}

.sj-chip {
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 9px 17px;
  border-radius: 999px;
  border: 2px solid var(--sj-ink);
  background: var(--sj-cream);
  color: var(--sj-ink);
}
.sj-chip.is-on { background: var(--sj-ink); color: var(--sj-cream); }

/* --- ボタン --------------------------------------------------------------- */
.sj-btn {
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  border-radius: 999px;
  border: 0;
  display: inline-block;
}
.sj-btn--primary {
  padding: var(--btn-pad, 15px 30px);
  font-size: var(--btn-fs, 15px);
  background: var(--sj-yellow);
  color: var(--sj-dark);
  box-shadow: 0 var(--btn-sd, 6px) 0 var(--sj-yellow-d);
}
.sj-btn--primary:hover {
  transform: translateY(2px);
  box-shadow: 0 calc(var(--btn-sd, 6px) - 2px) 0 var(--sj-yellow-d);
  color: var(--sj-dark);
}
.sj-btn--ghost {
  padding: 15px 30px;
  font-size: 15px;
  background: transparent;
  color: var(--sj-cream);
  border: 2px solid rgba(255, 247, 232, .4);
}
.sj-btn--ghost:hover { background: rgba(255, 247, 232, .12); color: var(--sj-cream); }
.sj-btn--dark {
  padding: 14px 30px;
  font-size: 14px;
  background: var(--sj-ink);
  color: var(--sj-cream);
}
.sj-btn--dark:hover { background: var(--sj-purple); }
.sj-btn--yellow {
  padding: 9px 18px;
  font-size: 13px;
  background: var(--sj-yellow);
  color: var(--sj-dark);
}
.sj-btn--yellow:hover { background: var(--sj-yellow-l); }
.sj-btn--soft {
  padding: 9px 16px;
  font-size: 13px;
  background: rgba(255, 247, 232, .14);
  color: var(--sj-cream);
}
.sj-btn--soft:hover { background: rgba(255, 247, 232, .28); }
.sj-btn--outline {
  padding: 16px 28px;
  font-size: 15px;
  background: transparent;
  color: var(--sj-ink);
  border: 3px solid var(--sj-ink);
}
.sj-btn--danger {
  padding: 7px 16px;
  font-size: 12px;
  background: transparent;
  color: var(--sj-red);
  border: 2px solid rgba(244, 121, 111, .6);
}
.sj-btn--danger:hover { background: var(--sj-red); color: var(--sj-dark); }
.sj-btn[disabled] { opacity: .5; cursor: default; }
.sj-btn[disabled]:hover { transform: none; }

/* --- 帯（マーキー） -------------------------------------------------------- */
.sj-marquee {
  overflow: hidden;
  background: var(--sj-yellow);
  color: var(--sj-dark);
  padding: var(--mq-pad, 13px) 0;
  border-top: 3px solid var(--sj-dark);
  border-bottom: 3px solid var(--sj-dark);
}
.sj-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--mq-dur, 24s) linear infinite;
  font-family: var(--sj-font-title);
  font-size: var(--mq-fs, 19px);
}
.sj-marquee__track span { padding-right: 28px; }

/* --- 統計タイル ----------------------------------------------------------- */
.sj-stat {
  min-width: 128px;
  padding: 16px 22px;
  border-radius: 20px;
  background: rgba(255, 247, 232, .08);
  border: 2px solid rgba(255, 247, 232, .18);
}
.sj-stat__num { font-family: var(--sj-font-title); font-size: var(--st-fs, 32px); line-height: 1; color: var(--st-c, inherit); }
.sj-stat__label { font-size: 11px; font-weight: 900; margin-top: 6px; color: rgba(255, 247, 232, .7); }

/* --- 4コマのコマ（❶〜❹） -------------------------------------------------- */
.sj-panels { display: flex; flex-direction: column; }
.sj-panel {
  display: flex;
  gap: var(--pn-gap, 18px);
  padding: var(--pn-pad-y, 22px) var(--pn-pad-x, 28px);
  border-bottom: 1px dashed rgba(36, 27, 62, .2);
}
.sj-panel__no {
  flex: none;
  width: var(--pn-size, 42px);
  height: var(--pn-size, 42px);
  line-height: var(--pn-size, 42px);
  border-radius: 50%;
  background: var(--sj-ink);
  color: var(--sj-cream);
  font-family: var(--sj-font-title);
  font-size: var(--pn-no-fs, 19px);
  text-align: center;
}
.sj-panel__text {
  flex: 1;
  min-width: 0;
  font-size: var(--pn-fs, 15px);
  font-weight: 700;
  line-height: var(--pn-lh, 2);
  white-space: pre-line;
  text-wrap: pretty;
}
/* 小さめ（アイデアカード） */
.sj-panels--sm { --pn-gap: 14px; --pn-pad-y: 16px; --pn-pad-x: 22px; --pn-size: 34px; --pn-no-fs: 16px; --pn-fs: 14px; --pn-lh: 1.9; }
/* さらに小さめ（ネタ帳の生成結果） */
.sj-panels--xs { --pn-gap: 12px; --pn-pad-y: 14px; --pn-pad-x: 20px; --pn-size: 30px; --pn-no-fs: 14px; --pn-fs: 13px; --pn-lh: 1.9; }

/* --- 入力 ----------------------------------------------------------------- */
.sj-input, .sj-textarea {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 17px;
  border-radius: 14px;
  border: 3px solid var(--sj-ink);
  background: var(--sj-white);
  color: var(--sj-ink);
  outline: none;
  width: 100%;
}
.sj-textarea { line-height: 1.8; font-size: 14px; padding: 12px 15px; resize: vertical; }
.sj-input--pill { border-radius: 999px; padding: 13px 18px; font-size: 14px; }
.sj-input::placeholder, .sj-textarea::placeholder { color: rgba(36, 27, 62, .38); }
.sj-field__label { font-size: 12px; font-weight: 900; color: var(--sj-purple); }

/* --- モーダル ------------------------------------------------------------- */
.sj-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 11, 28, .92);
  overflow-y: auto;
  padding: 22px;
  animation: pop .2s ease-out;
}
.sj-modal--deep { background: rgba(15, 11, 28, .93); }
.sj-modal[hidden] { display: none; }
.sj-modal__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto 16px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(23, 18, 43, .9);
  border: 2px solid rgba(248, 198, 60, .4);
}

/* --- ローディング --------------------------------------------------------- */
.sj-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  border-radius: 24px;
  border: 3px dashed var(--load-border, rgba(36, 27, 62, .28));
}
.sj-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 4px solid var(--sp-track, rgba(36, 27, 62, .18));
  border-top-color: var(--sp-head, var(--sj-purple));
  animation: spin .8s linear infinite;
}
.sj-busy-msg { font-size: 15px; font-weight: 900; }

/* --- エラー --------------------------------------------------------------- */
.sj-error {
  padding: 22px 26px;
  border-radius: 22px;
  border: 3px solid var(--sj-red);
  background: var(--sj-red-p2);
  color: var(--sj-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.8;
}
.sj-error--dark { background: rgba(244, 121, 111, .14); color: var(--sj-cream); border-radius: 20px; padding: 20px 24px; }

/* --- フッター ------------------------------------------------------------- */
.sj-footer {
  padding: var(--ft-pt, 56px) 24px var(--ft-pb, 50px);
  background: var(--sj-dark);
  border-top: 3px solid rgba(248, 198, 60, .3);
  text-align: center;
}
.sj-footer__logo { font-family: var(--sj-font-title); font-size: var(--ft-fs, 24px); color: var(--sj-yellow); }
.sj-footer__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 2;
  margin: 12px 0 0;
  color: rgba(255, 247, 232, .7);
}
.sj-footer__fine { font-size: 12px; font-weight: 500; margin: 22px 0 0; color: rgba(255, 247, 232, .4); }

/* --- 補助 ----------------------------------------------------------------- */
.sj-hidden { display: none !important; }
.sj-empty {
  padding: 70px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: rgba(36, 27, 62, .5);
}