@charset "utf-8";

/* Potta One ロゴ用 */
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');

/* 見出し用：丸くて読みやすい日本語フォント */
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* ===============================
   stacon ロゴ背景：完全パターン化（4重レイヤー）
=============================== */

/* ベース背景（パステルグラデ） */
body {
  background: linear-gradient(135deg, #ffeaf3, #ffe2f1, #fff0f8);
  position: relative;
  overflow-x: hidden;
}

/* 1層目：細かいロゴが流れる（メインパターン） */
body::before {
  content: "stacon stacon stacon stacon stacon stacon stacon stacon stacon stacon stacon stacon ";
  position: fixed;
  inset: 100px;
  font-family: "Potta One", cursive;
  font-size: 38px;
  line-height: 1.4;
  letter-spacing: 8px;
  color: rgba(255, 107, 155, 0.12);
  white-space: nowrap;
  transform: rotate(-35deg);
  z-index: -2;
  animation: stacon-bg-move1 40s linear infinite;
  pointer-events: none;
}

/* 2層目：奥行きを作るための薄いロゴ */
body::after {
  content: "stacon stacon stacon stacon stacon stacon stacon stacon stacon stacon stacon stacon ";
  position: fixed;
  inset: 400px;
  font-family: "Potta One", cursive;
  font-size: 46px;
  line-height: 1.6;
  letter-spacing: 10px;
  color: rgba(255, 107, 155, 0.06);
  white-space: nowrap;
  transform: rotate(-35deg) translateY(80px);
  z-index: -3;
  animation: stacon-bg-move2 65s linear infinite;
  pointer-events: none;
}

/* 3層目：アクセントとして大きなロゴ（静止させる） */
body .bg-layer-3 {
  content: "";
  position: fixed;
  inset: 200px;
  z-index: -4;
  pointer-events: none;
  font-family: "Potta One", cursive;
  font-size: 200px;
  line-height: 1.5;
  color: rgba(255, 107, 155, 0.05);
  white-space: nowrap;
  transform: rotate(-35deg);
}

/* 4層目：もっと大きいロゴを薄く敷き詰める（静止） */
body .bg-layer-4 {
  content: "";
  position: fixed;
  inset: 500px;
  z-index: -5;
  pointer-events: none;
  font-family: "Potta One", cursive;
  font-size: 160px;
  color: rgba(255, 107, 155, 0.03);
  transform: rotate(-35deg) translateY(120px);
}

/* ========== アニメーション ========== */

@keyframes stacon-bg-move1 {
  0% {
    transform: rotate(-35deg) translateX(0);
  }
  100% {
    transform: rotate(-35deg) translateX(-1500px);
  }
}

@keyframes stacon-bg-move2 {
  0% {
    transform: rotate(-35deg) translateX(0) translateY(80px);
  }
  100% {
    transform: rotate(-35deg) translateX(-2200px) translateY(80px);
  }
}

/* 共通 */
main.main {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 40px;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===============================
   ヘッダー（想定）
================================ */
.st-header {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

.st-header-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-logo a {
  font-family: "Potta One", cursive;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #ff6b9b;
}

.st-nav {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.st-nav a {
  position: relative;
  padding-bottom: 2px;
}

.st-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #ff6b9b;
  transition: width .18s ease;
}

.st-nav a:active::after,
.st-nav a:hover::after {
  width: 100%;
}

/* ===============================
   スライダー（CSSのみで仮画像生成）
================================ */
.st-slide-text {
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 18px rgba(255,255,255,0.9);
}

.st-slide-label {
  font-size: 11px;
  color: #ff6b9b;
  margin: 0 0 6px;
}

.st-slide-title {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

/* ===============================
   新規登録 / ログインボタン
================================ */
.st-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 20px 18px;
  align-items: center;
}

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.st-btn--primary {
  background: linear-gradient(135deg, #ffd75f, #ff9c6b);
  color: #633200;
  box-shadow: 0 10px 18px rgba(255, 149, 50, 0.4);
}

.st-btn--ghost {
  background: #f7f7f7;
  color: #555;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ripple エフェクト用 */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.5;
  background: rgba(255,255,255,0.8);
  animation: ripple-anim 0.5s ease-out;
  pointer-events: none;
}

@keyframes ripple-anim {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* ===============================
   共通セクション
================================ */

/* セクション本文の余白は少し上に詰める */
.st-section-title {
  margin-top: 6px; /* 上の帯と被らないように少し下げる */
}


.st-section-title {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 18px;
  margin: 0 0 6px;
  letter-spacing: 0.06em;
  color: #ff6b9b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-about h2,
.st-steps h2,
.st-price h2 {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #ff6b9b;
  margin: 0 0 6px;
}


/* タイトル横に小さなハートドット */
.st-section-title::before {
  content: "＊";
  font-size: 14px;
  color: #ff9cb9;
  transform: translateY(-1px);
}

.st-section-title::after {
  content: "＊";
  font-size: 14px;
  color: #ffcfde;
  transform: translateY(-1px);
}


.st-section-desc {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 10px;
}

/* グリッド */
.st-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.st-grid-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fdf2ff;
  box-shadow:
    0 4px 10px rgba(255, 153, 204, 0.2),
    0 0 0 1px rgba(255, 204, 236, 0.8);
}


.st-grid-thumb {
  width: 100%;
  padding-top: 100%; /* 1:1 */
  position: relative;
  background-size: cover;
  background-position: center;
  user-select: none;
}

/* SAMPLE ラベル */
.st-sample {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  color: #fff;
}

/* hover でふわっと拡大 */
.st-grid-item:active .st-grid-thumb,
.st-grid-item:hover .st-grid-thumb {
  transform: scale(1.03);
  transition: transform .15s ease-out;
}

/* もっと見る */
.st-more {
  text-align: right;
  font-size: 13px;
}

.st-more a {
  color: #ff6b9b;
}

.st-more a::after {
  content: " ＞";
  font-size: 11px;
}

/* ===============================
   staconとは？
================================ */
.st-about-text {
  font-size: 13px;
  line-height: 1.7;
  margin: 4px 0 0;
}

/* ===============================
   登録方法
================================ */
.st-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.st-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.st-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ff9cb9;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}

.st-step p {
  font-size: 13px;
  margin: 0;
}

/* ===============================
   料金
================================ */
.st-price-box {
  text-align: center;
  padding: 10px 10px 6px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7de, #ffe4f1);
  border: 1px solid rgba(255,255,255,0.8);
}

.st-price-main {
  margin: 0 0 4px;
  font-size: 16px;
}

.st-price-main span {
  font-size: 28px;
  font-weight: 700;
}

.st-price-note {
  margin: 0;
  font-size: 12px;
}

/* ===============================
   フッター（wallwall 構造想定）
================================ */
footer {
  margin-top: 10px;
  padding-bottom: 20px;
}

#ftList {
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 12px 0;
  list-style: none;
  text-align: center;
  font-size: 11px;
}

#ftList li {
  display: inline-block;
  margin: 0 4px;
}

#ftList a {
  color: #555;
}

/* ===============================
   フェードインアニメ
================================ */
.st-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.st-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   画像コピー防止強化
================================ */
.st-grid-thumb {
  pointer-events: none;       /* 画像自体はクリックできない（リンクはaが担当） */
}

img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* ===============================
   ダミーサムネイル背景（色味だけ）
   ここは本番で画像URLに差し替えてOK
================================ */

/* ファンシー */
.fancy-1 { background-image: linear-gradient(135deg,#ffe6f7,#ffb8d9); }
.fancy-2 { background-image: linear-gradient(135deg,#ffe0f0,#ffcddf); }
.fancy-3 { background-image: linear-gradient(135deg,#e4f0ff,#ffdff3); }
.fancy-4 { background-image: linear-gradient(135deg,#fffee0,#ffd0e4); }
.fancy-5 { background-image: linear-gradient(135deg,#ffe9e3,#ffe3ff); }
.fancy-6 { background-image: linear-gradient(135deg,#e7f7ff,#fff0f6); }
.fancy-7 { background-image: linear-gradient(135deg,#ffe3f4,#ffd3e1); }
.fancy-8 { background-image: linear-gradient(135deg,#fff5e4,#ffd7f3); }
.fancy-9 { background-image: linear-gradient(135deg,#ffe7ff,#ffc7e6); }

/* メルヘン */
.merhen-1 { background-image: linear-gradient(135deg,#c4e3ff,#ffe0ff); }
.merhen-2 { background-image: linear-gradient(135deg,#d9fbff,#fbe1ff); }
.merhen-3 { background-image: linear-gradient(135deg,#fbe4ff,#e0f9ff); }
.merhen-4 { background-image: linear-gradient(135deg,#fff0e4,#e0f4ff); }
.merhen-5 { background-image: linear-gradient(135deg,#e3f0ff,#ffe4f1); }
.merhen-6 { background-image: linear-gradient(135deg,#f6e8ff,#e3f5ff); }
.merhen-7 { background-image: linear-gradient(135deg,#ffe8f3,#e4f7ff); }
.merhen-8 { background-image: linear-gradient(135deg,#e9f3ff,#ffe7f4); }
.merhen-9 { background-image: linear-gradient(135deg,#fff0fa,#e5f7ff); }

/* キュン系 */
.kyun-1 { background-image: linear-gradient(135deg,#ffb6c1,#ffe5ec); }
.kyun-2 { background-image: linear-gradient(135deg,#ff9aa2,#ffd1dc); }
.kyun-3 { background-image: linear-gradient(135deg,#ffb3ba,#ffdfd3); }
.kyun-4 { background-image: linear-gradient(135deg,#ffc6ff,#fffffc); }
.kyun-5 { background-image: linear-gradient(135deg,#ff8b94,#ffcfd2); }
.kyun-6 { background-image: linear-gradient(135deg,#ffccd5,#fce1e4); }
.kyun-7 { background-image: linear-gradient(135deg,#ffdde1,#ee9ca7); }
.kyun-8 { background-image: linear-gradient(135deg,#ffd1ff,#ffe3f1); }
.kyun-9 { background-image: linear-gradient(135deg,#ffdae0,#ffeef4); }

/* ぐうかわ */
.guukawa-1 { background-image: linear-gradient(135deg,#b3e6ff,#ffe6cc); }
.guukawa-2 { background-image: linear-gradient(135deg,#c1f0d3,#ffe6f0); }
.guukawa-3 { background-image: linear-gradient(135deg,#ffe0b2,#dcedc8); }
.guukawa-4 { background-image: linear-gradient(135deg,#ffccbc,#c8e6c9); }
.guukawa-5 { background-image: linear-gradient(135deg,#e1bee7,#c5cae9); }
.guukawa-6 { background-image: linear-gradient(135deg,#d1c4e9,#b2dfdb); }
.guukawa-7 { background-image: linear-gradient(135deg,#ffecb3,#ffcdd2); }
.guukawa-8 { background-image: linear-gradient(135deg,#f8bbd0,#b3e5fc); }
.guukawa-9 { background-image: linear-gradient(135deg,#ffe0b2,#ffccbc); }

/* ゆっくり流れるアニメーション（質感アップ） */
@keyframes st-bg-slide {
  from {
    transform: rotate(-35deg) translateX(0);
  }
  to {
    transform: rotate(-35deg) translateX(-600px);
  }
}

@keyframes st-bg-slide2 {
  from {
    transform: rotate(-35deg) translateX(0) translateY(60px);
  }
  to {
    transform: rotate(-35deg) translateX(-800px) translateY(60px);
  }
}


/* --- タイトルは少しだけ上寄せ（見た目のバランス調整） --- */
.st-section-title {
  margin-top: 2px;  /* padding-topを増やしたので、ここは控えめに */
}


/* ▼ もっと見るまわりの余白を少し増やす */
.st-more {
  text-align: right;
  font-size: 13px;
  margin-top: 8px;
  margin-bottom: 2px;  /* 下に少し空きを作る */
}

/* ▼ グリッドのボックスをふんわり半透明に */
.st-grid-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(253, 242, 255, 0.30);  
  box-shadow:
    0 3px 8px rgba(255, 153, 204, 0.18),
    0 0 0 1px rgba(255, 204, 236, 0.55);
}

/* 背景グラデ自体も少し透過させて、全体を軽く */
.st-grid-thumb {
  opacity: 0.30;         
  transition: transform .15s ease-out, opacity .15s ease-out;
}

.st-grid-item:active .st-grid-thumb,
.st-grid-item:hover .st-grid-thumb {
  transform: scale(1.03);
  opacity: 1;             /* ホバー時だけ少し濃く見える演出 */
}


/* ▼ セクションカード（半透明ガラス風・飛び出さない版） */
.st-section,
.st-about,
.st-steps,
.st-price {
  position: relative;
  margin: 0 14px 18px;
  padding: 20px 16px 22px;
  border-radius: 20px;

  /* ここだけで背景を作る：かなり透ける白 */
  background: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 4px 12px rgba(255, 143, 180, 0.18);
  border: 1px solid rgba(255, 209, 234, 0.7);
  backdrop-filter: blur(8px);
}

/* ▼ キャンディ帯：各カテゴリセクションだけに、カードの「内側」に配置 */
.st-section::before {
  content: "";
  position: absolute;
  top: 4px;      /* もうマイナスにはしない → 飛び出さない */
  left: 8px;
  width: 90px;
  height: 26px;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.4) 40%, transparent 70%),
    linear-gradient(135deg, rgba(255,233,244,0.9), rgba(255,230,201,0.9));
  border-radius: 20px;
  opacity: 0.9;
  box-shadow: 0 4px 10px rgba(255, 158, 188, 0.45);
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: -1;  /* タイトルテキストの裏側に行くように */
}

/* ▼ 右下の丸シールもカードの中におさめる */
.st-section::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fffafb 0, #ffd5ea 45%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

/* キャンディ楕円＆丸シールは使わない（全部オフ） */
.st-section::before,
.st-section::after,
.st-about::before,
.st-about::after,
.st-steps::before,
.st-steps::after,
.st-price::before,
.st-price::after {
  content: none !important;
}

/* 重要見出し（カテゴリ・セクションタイトル）をしっかり目立たせる */
.st-section-title,
.st-about h2,
.st-steps h2,
.st-price h2 {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff6b9b;
  margin: 0 0 8px;
  display: inline-block;
  position: relative;
  padding: 2px 10px 3px;
  /* 文字に白縁＋影を付けて、背景に負けないようにする */
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 2px 3px rgba(255, 120, 160, 0.45);
}

/* 両端の「＊」はかわいいので残す。色だけ少し薄めに。 */
.st-section-title::before,
.st-section-title::after {
  content: "＊";
  font-size: 13px;
  color: #ffbfd5;
  transform: translateY(-1px);
}

/* タイトルの前後の余白も少し調整して読みやすく */
.st-section-desc {
  margin-top: 2px;
}

/* ===============================
   TOPの新規登録 / ログインボタン調整
================================ */
.st-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 20px 22px;
  align-items: center;
}

.st-actions .st-btn--hero {
  max-width: 360px;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd873, #ff9c6b);
  color: #633200;
  box-shadow: 0 12px 22px rgba(255, 158, 72, 0.45);
}

.st-actions .st-btn--login {
  max-width: 220px;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #555;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border: 1px solid rgba(255, 209, 234, 0.9);
}

/* ===============================
   staconとは？ 内のボタン
================================ */
.st-about-actions {
  margin-top: 10px;
  text-align: center;
}

.st-btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255, 153, 204, 0.8);
  color: #ff6b9b;
  box-shadow: 0 4px 10px rgba(255, 143, 180, 0.25);
}

/* ===============================
   最終 CTA セクション
================================ */
.st-cta {
  margin: 0 14px 26px;
  padding: 20px 16px 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,238,250,0.95), rgba(255,224,232,0.96));
  box-shadow:
    0 8px 20px rgba(255, 143, 180, 0.28),
    0 0 0 1px rgba(255, 209, 234, 0.8);
  text-align: center;
}

.st-cta-title {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff6b9b;
  margin: 0 0 8px;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 2px 3px rgba(255, 120, 160, 0.35);
}

.st-cta-text {
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 12px;
}

.st-cta-actions {
  display: flex;
  justify-content: center;
}

.st-btn--cta {
  max-width: 260px;
  padding: 10px 24px;
  font-size: 15px;
}

/* =====================================
   ファンシー＊はちみつプリン系ボタン（黄色グラデ）
===================================== */
.st-actions .st-btn--hero,
.st-cta .st-btn--cta {
  max-width: 360px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;

  /* 🍯 ハニー×ピーチの見やすくて可愛いグラデ */
  background: linear-gradient(135deg, #ffe9a8 0%, #ffd274 40%, #ffbd5d 100%);

  /* 🍮 ぷにっとした光沢感（内側の白ハイライト） */
  box-shadow:
    0 6px 14px rgba(255, 180, 80, 0.35),
    inset 0 0 14px rgba(255, 255, 255, 0.65),
    inset 0 8px 18px rgba(255, 255, 255, 0.35);

  /* 優しいブラウンで視認性UP */
  color: #6b3e00;
  letter-spacing: .05em;
  transition: all .25s ease;
}

/* hover：ふわっと浮く */
.st-actions .st-btn--hero:hover,
.st-cta .st-btn--cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 20px rgba(255, 180, 80, 0.35),
    inset 0 0 18px rgba(255, 255, 255, 0.75);
}

/* active：軽く沈む */
.st-btn--hero:active,
.st-cta .st-btn--cta:active {
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(255, 170, 70, 0.28),
    inset 0 0 12px rgba(255, 255, 255, 0.5);
}

/* =====================================
   stacon ログイン後ヘッダー ファンシー仕上げ
===================================== */

/* ベース：少し透けるホワイト＋ガラス感 */
.st-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 205, 232, 0.8);
  box-shadow: 0 4px 16px rgba(255, 170, 210, 0.25);
}

.st-header--login .st-header-inner {
  position: relative;
}

/* ロゴをちょっとだけ「アイコンアプリ風」に強調 */
.st-logo--login a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: "Potta One", cursive;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #ff6b9b;
}

/* ロゴ右上にキラッと光る星 */
.st-logo--login a::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -4px;
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0, #fff 45%, transparent 70%),
    radial-gradient(circle at 70% 70%, #ffd8f3 0, #ff9bd4 80%);
  border-radius: 50%;
  transform: rotate(18deg);
  box-shadow: 0 0 8px rgba(255, 180, 220, 0.8);
  animation: st-logo-twinkle 2.4s ease-in-out infinite;
}

@keyframes st-logo-twinkle {
  0%, 100% { transform: rotate(18deg) scale(0.8); opacity: 0; }
  40%      { transform: rotate(18deg) scale(1);   opacity: 1; }
  70%      { transform: rotate(18deg) scale(1.1); opacity: 0.4; }
}

/* ナビをピル型にしてファンシー感UP */
.st-nav--login {
  display: flex;
  gap: 6px;
  font-size: 13px;
}

.st-nav--login .st-nav-item {
  position: relative;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  color: #906070;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* hover でふわっと光るピル背景 */
.st-nav--login .st-nav-item:hover {
  background: rgba(255, 220, 245, 0.95);
  box-shadow: 0 4px 10px rgba(255, 160, 210, 0.45);
  transform: translateY(-1px);
}

/* ログアウトだけ色を少し抑える */
.st-nav-item--logout {
  color: #aa6b7f;
  opacity: 0.85;
}

/* ヘッダーの下にふわっとした光の帯を敷く */
.st-header-glow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 65%;
  max-width: 480px;
  height: 18px;
  background: radial-gradient(circle at 50% 0,
    rgba(255, 220, 244, 0.95),
    rgba(255, 180, 225, 0.0) 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

/* =====================================
   stacon ログイン前ヘッダー（ファンシーMAX）
===================================== */

/* ログイン前は明るめ＋柔らかいグラス感 */
.st-header--front {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 205, 232, 0.9);
  box-shadow: 0 4px 18px rgba(255, 170, 210, 0.35);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ロゴ（ログイン後より“かわいさ強め”） */
.st-logo--front a {
  font-family: "Potta One", cursive;
  font-size: 25px;
  letter-spacing: 0.10em;
  color: #ff6b9b;
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ロゴ右上のキラッ（前ヘッダーは少し大きくして印象UP） */
.st-logo--front a::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -6px;
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0, #fff 50%, transparent 70%),
    radial-gradient(circle at 70% 70%, #ffd8f3 0, #ff9bd4 80%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 180, 220, 0.9);
  transform: rotate(18deg);
  animation: st-logo-twinkle 2.4s ease-in-out infinite;
}

/* ナビ（pillボタン＋ゆめかわ） */
.st-nav--front {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.st-nav--front .st-nav-item {
  padding: 6px 14px;
  border-radius: 999px;
  color: #906070;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  transition: all .18s ease;
}

/* 新規登録だけ特別カラー（ピーチグラデ） */
.st-nav-item--accent {
  background: linear-gradient(135deg, #ffd7ee, #ffbfe0);
  color: #6b3758;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(255, 160, 210, .3);
}

/* hover 共通（淡ピンクに光る） */
.st-nav--front .st-nav-item:hover {
  background: rgba(255, 225, 245, 0.9);
  box-shadow: 0 4px 10px rgba(255, 170, 220, 0.4);
  transform: translateY(-1px);
}

/* 下の光の帯 */
.st-header--front .st-header-glow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 70%;
  max-width: 480px;
  height: 22px;
  background: radial-gradient(
    circle at 50% 0,
    rgba(255, 225, 245, 0.95),
    rgba(255, 180, 225, 0.0) 70%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

.st-faq {
  max-width: 480px;
  margin: 12px auto 32px;
  padding: 16px 14px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(255, 143, 180, 0.16);
}

.st-faq-label {
  font-size: 11px;
  letter-spacing: .15em;
  color: #ff9cb9;
  margin: 0 0 4px;
}

.st-faq-lead {
  font-size: 13px;
  line-height: 1.7;
  margin: 8px 0 14px;
}

.st-faq-toc ol {
  padding-left: 18px;
  margin: 0 0 16px;
  font-size: 13px;
}

.st-faq-link {
  color: #ff6b9b;
  text-decoration: underline;
  text-decoration-color: rgba(255, 161, 197, 0.7);
}

.st-faq-item {
  margin-bottom: 18px;
}

.st-faq-question {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  margin: 0 0 6px;
  color: #ff6b9b;
}

.st-faq-answer {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

.st-faq-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
}

/* ===============================
   stacon お問い合わせページ
================================ */

/* 全体ラッパー（FAQとトーンを合わせたカード群） */
.st-inquiry {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 4px 10px 20px;
}

/* 見出しまわり */
.st-inquiry-header {
  margin-bottom: 10px;
}

.st-inquiry-header .st-section-title {
  /* 既存の .st-section-title をそのまま活かしつつ、
     問い合わせページでは少しだけ余白を広めに */
  margin-bottom: 6px;
}

.st-faq-label {
  font-size: 11px;
  letter-spacing: .18em;
  color: #ff9cb9;
  margin: 0 0 3px 2px;
}

.st-faq-lead {
  font-size: 13px;
  line-height: 1.7;
  margin: 6px 0 12px;
}

/* カード本体 */
.inquiry-box {
  margin: 0 4px 14px;
  padding: 14px 12px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 209, 234, 0.9);
  box-shadow:
    0 4px 12px rgba(255, 143, 180, 0.20),
    0 0 0 1px rgba(255, 245, 252, 0.7);
  backdrop-filter: blur(8px);
}

/* カードタイトル */
.inquiry-title {
  margin: 0 0 8px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  letter-spacing: .06em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.35);
}

/* テキスト本文 */
.inquiry-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

/* よくあるお問い合わせリスト */
.inquiry-sub {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 184, 214, 0.9);
  font-size: 13px;
}

.inquiry-sub ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.inquiry-sub li + li {
  margin-top: 4px;
}

/* stacon用リンクスタイル（FAQと共通でOKならそのまま使い回し） */
.st-faq-link {
  color: #ff6b9b;
  text-decoration: underline;
  text-decoration-color: rgba(255, 161, 197, 0.85);
  text-underline-offset: 2px;
}

.st-faq-link:hover {
  text-decoration-thickness: 2px;
}

/* スマホでの余白微調整 */
@media (max-width: 480px) {
  .inquiry-box {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===============================
   stacon プライバシーポリシー
================================ */

.st-policy {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 22px;
}

.st-policy-header {
  margin-bottom: 10px;
}

/* セクションカード風レイアウト */
.st-policy-section {
  margin: 0 4px 14px;
  padding: 12px 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 209, 234, 0.85);
  box-shadow:
    0 4px 12px rgba(255, 143, 180, 0.15),
    0 0 0 1px rgba(255, 246, 252, 0.75);
  backdrop-filter: blur(8px);
}

/* 中見出し（第◯条） */
.st-policy-heading {
  margin: 0 0 6px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.3);
}

/* 本文 */
.st-policy-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 4px;
}

/* 箇条書き */
.st-policy-list {
  margin: 4px 0 6px 18px;
  padding: 0;
  font-size: 13px;
}

.st-policy-list li + li {
  margin-top: 2px;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-policy-section {
    margin-left: 2px;
    margin-right: 2px;
  }
}

/* ===============================
   stacon 利用規約（rule.blade.php）
================================ */

/* 全体ラッパー */
.st-terms {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 22px;
}

/* ヘッダーは既存の .st-section-title / .st-faq-label / .st-faq-lead を流用 */

/* 各条文ブロック（カード風） */
.st-terms-section {
  position: relative;
  margin: 0 4px 14px;
  padding: 14px 12px 14px;
  border-radius: 18px;

  /* policy / inquiry と少し差をつけた、やわらかストライプ */
  background:
    linear-gradient(135deg, rgba(255, 246, 252, 0.9), rgba(255, 235, 246, 0.95));
  border: 1px solid rgba(255, 209, 234, 0.85);
  box-shadow:
    0 4px 10px rgba(255, 143, 180, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* 左端にうっすらピンクのライン */
.st-terms-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd9ec, #ffc3df);
  opacity: 0.9;
}

/* 見出し（第◯条） */
.st-terms-heading {
  margin: 0 0 6px 4px;
  padding-left: 8px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #ff6b9b;
  position: relative;
}

/* 見出し前に小さなパステル丸 */
.st-terms-heading::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #fff8fc 0, #ffbcd9 60%, transparent 80%);
}

/* 本文テキスト */
.st-terms-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 4px;
}

/* 箇条書き（ol） */
.st-terms-list {
  margin: 4px 0 6px 20px;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* ネストされた ol も少しだけ下げる */
.st-terms-list > li > ol {
  margin-top: 4px;
  margin-bottom: 2px;
}

/* リスト同士の余白 */
.st-terms-list li + li {
  margin-top: 3px;
}

/* 最後の「以上」 */
.st-terms-end {
  text-align: right;
  font-size: 12px;
  margin: 8px 12px 0;
}

/* スマホ調整 */
@media (max-width: 480px) {
  .st-terms-section {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 14px;
    padding-right: 12px;
  }
}

/* ===============================
   stacon 特定商取引法表示
================================ */

.st-specific {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 22px;
}

.st-specific-header {
  margin-bottom: 10px;
}

/* セクション（情報カード） */
.st-specific-section {
  position: relative;
  margin: 0 4px 14px;
  padding: 12px 12px 14px;
  border-radius: 18px;

  /* 利用規約・ポリシーとは少し違う、淡いブロック */
  background: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(
    135deg,
    rgba(255, 244, 252, 0.95),
    rgba(255, 237, 245, 0.9)
  );
  border: 1px solid rgba(255, 209, 234, 0.85);
  box-shadow:
    0 4px 10px rgba(255, 143, 180, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* 右上に小さなタグ風アクセント */
.st-specific-section::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 18px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe3f4, #ffd1e7);
  opacity: 0.7;
}

/* 見出し */
.st-specific-heading {
  margin: 0 0 6px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.3);
}

/* 本文 */
.st-specific-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 4px;
}

/* 箇条書き（支払方法など） */
.st-specific-list {
  margin: 4px 0 6px 18px;
  padding: 0;
  font-size: 13px;
}

.st-specific-list li + li {
  margin-top: 2px;
}

/* 事業者情報の定義リスト */
.st-specific-def {
  margin: 4px 0 0;
  padding: 0;
  font-size: 13px;
}

.st-specific-def > div {
  display: flex;
  margin-bottom: 4px;
}

.st-specific-def dt {
  flex: 0 0 92px;
  font-weight: 600;
  color: #ff6b9b;
}

.st-specific-def dd {
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.6;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-specific-section {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .st-specific-def > div {
    flex-direction: column;
  }

  .st-specific-def dt {
    flex: none;
    margin-bottom: 1px;
  }
}

/* ===============================
   stacon ログインページ
================================ */

.st-login {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 24px;
}

/* ヘッダーまわり（FAQ系とトーン合わせ） */
.st-login-header {
  margin-bottom: 10px;
}

/* ログインカード本体 */
.st-login-card {
  margin: 0 4px 14px;
  padding: 16px 14px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.85) 0, transparent 60%),
    linear-gradient(135deg, rgba(255,249,230,0.96), rgba(255,236,246,0.95));
  border: 1px solid rgba(255, 209, 234, 0.9);
  box-shadow:
    0 6px 16px rgba(255, 170, 200, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* フォーム全体 */
.st-login-form {
  margin: 0;
}

/* 各フォーム行 */
.st-form-row {
  margin-bottom: 12px;
}

/* ラベル */
.st-form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ff6b9b;
  font-weight: 600;
  margin-bottom: 4px;
}

/* 必須バッジ */
.st-form-required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255, 182, 210, 0.14);
  color: #ff6b9b;
  border: 1px solid rgba(255, 182, 210, 0.8);
}

/* テキストボックス */
.st-input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 193, 218, 0.9);
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.st-input::placeholder {
  color: #c4a9b9;
  font-size: 12px;
}

.st-input:focus {
  background: #ffffff;
  border-color: #ffb7d5;
  box-shadow:
    0 0 0 2px rgba(255, 203, 228, 0.8),
    0 4px 10px rgba(255, 160, 200, 0.35);
}

/* エラーメッセージ */
.st-form-error {
  margin-top: 4px;
  font-size: 11px;
  color: #e11d48;
}

/* ボタン行 */
.st-form-row--actions {
  margin-top: 6px;
  text-align: center;
}

/* ログインボタン（黄色系ファンシー） */
.st-btn--login-main {
  width: 100%;
  max-width: 260px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;

  background: linear-gradient(135deg, #ffe899 0%, #ffd36a 45%, #ffc157 100%);
  box-shadow:
    0 0 10px rgba(255, 220, 150, 0.8),
    0 8px 18px rgba(255, 187, 92, 0.55),
    inset 0 0 16px rgba(255, 255, 255, 0.7);

  color: #5f3a00;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.st-btn--login-main:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 14px rgba(255, 230, 168, 0.9),
    0 10px 22px rgba(255, 190, 96, 0.6),
    inset 0 0 18px rgba(255, 255, 255, 0.8);
  filter: brightness(1.02);
}

.st-btn--login-main:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 12px rgba(255, 190, 96, 0.55),
    inset 0 0 12px rgba(255, 255, 255, 0.65);
}

/* 備考テキスト */
.st-form-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #6b7280;
  text-align: left;
}

/* 下部の「まだ会員でない方へ」エリア */
.st-login-bottom {
  margin: 0 4px;
  padding: 12px 10px 14px;
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 4px 12px rgba(255, 170, 200, 0.2),
    0 0 0 1px rgba(255, 243, 251, 0.9);
}

.st-login-bottom-text {
  font-size: 12px;
  line-height: 1.8;
  margin: 0 0 8px;
}

/* ここで使うアウトラインボタンに少し余白調整 */
.st-login-bottom .st-btn--outline {
  padding: 8px 22px;
  font-size: 13px;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-login-card,
  .st-login-bottom {
    margin-left: 2px;
    margin-right: 2px;
  }
}

/* ===============================
   stacon 新規会員登録ページ
================================ */

.st-regist {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 24px;
}

/* ヘッダー（既存 .st-faq-label / .st-section-title / .st-faq-lead と組み合わせ） */
.st-regist-header {
  margin-bottom: 10px;
}

/* 共通セクション（半透明カード） */
.st-regist-section {
  position: relative;
  margin: 0 4px 14px;
  padding: 14px 13px 16px;
  border-radius: 20px;

  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.85) 0, transparent 60%),
    linear-gradient(135deg, rgba(255,247,237,0.96), rgba(255,236,247,0.95));
  border: 1px solid rgba(255, 209, 234, 0.88);
  box-shadow:
    0 6px 14px rgba(255, 170, 200, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* 左上のタブ風アクセント */
.st-regist-section::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe3f4, #ffd982);
  opacity: 0.7;
}

/* 見出し */
.st-regist-heading {
  margin: 0 0 6px;
  padding-left: 4px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.3);
}

/* 説明テキスト */
.st-regist-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 2px 0 6px;
}

/* 利用規約リンク行 */
.st-regist-link {
  margin: 4px 0 0;
  font-size: 13px;
}

/* 汎用リンク（faq等と同じトーンで） */
.st-faq-link {
  color: #ff6b9b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* 料金などの太字が浮きすぎないように */
.st-regist-text strong {
  font-weight: 700;
  color: #f9739a;
}

/* ===============================
   キャリア決済カード
================================ */

.st-regist-paylist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.st-regist-payitem {
  flex: 1 1 140px;
  max-width: 160px;
}

/* それぞれのキャリア枠 */
.st-regist-paycard {
  border-radius: 16px;
  padding: 10px 8px 10px;
  text-align: center;
  background: rgba(255,255,255,0.9);
  box-shadow:
    0 4px 10px rgba(255, 170, 200, 0.18),
    0 0 0 1px rgba(255, 240, 250, 0.9);
}

/* 既存の img クラスをそのまま使う想定 */
.st-regist-paycard img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 4px;
}

.st-regist-paydesc {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}

/* 既存の説明クラスにも寄せておく（他ページとの見た目差を減らす） */
.descriptionMobileCarriers {
  font-size: 11px;
  line-height: 1.6;
}

/* ===============================
   ご利用ガイド リスト
================================ */

.st-regist-guidelist {
  margin: 6px 0 4px 16px;
  padding: 0;
  font-size: 13px;
}

.st-regist-guidelist li + li {
  margin-top: 4px;
}

/* 備考文（SoftBank などの注記） */
.st-regist-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #6b7280;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-regist-section {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .st-regist-payitem {
    max-width: none;
  }
}

/* ===============================
   stacon 新規登録：キャリアボタン調整
   （縦並び・サイズ揃え・立体感アップ）
================================ */

/* ▼ ボタンを縦並びにする */
.st-regist-paylist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;   /* ← 縦並び */
  gap: 12px;
  justify-content: flex-start;
  align-items: stretch;     /* 幅をそろえる */
}

/* 各アイテムは横幅いっぱい・高さ自動 */
.st-regist-payitem {
  flex: 0 0 auto;
  max-width: none;
}

/* ▼ カード自体を「ボタンっぽい」見た目に */
.st-regist-paycard {
  width: 100%;
  border-radius: 18px;
  padding: 10px 10px 12px;
  text-align: center;
  background: linear-gradient(135deg, #ffffff, #fff7fd);
  box-shadow:
    0 6px 14px rgba(255, 170, 200, 0.35),
    0 0 0 1px rgba(255, 230, 246, 0.95);
}

/* カード内の「ロゴボタン」部分をそろえる */
.st-regist-paycard .buttonMobileCarriers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 8px rgba(255, 255, 255, 0.9);
}

/* ロゴ画像の大きさを揃える */
.st-regist-paycard img {
  max-width: 180px;
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}

/* ロゴ下の説明テキストも共通ルックに */
.st-regist-paydesc,
.descriptionMobileCarriers {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

/* ▼ 押した感じの演出（軽く沈む） */
.st-regist-paycard:active {
  transform: translateY(1px);
  box-shadow:
    0 3px 8px rgba(255, 170, 200, 0.3),
    0 0 0 1px rgba(255, 230, 246, 0.95);
}

/* ===============================
   stacon 登録完了ページ
================================ */

.st-registered {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 24px;
}

/* ヘッダーは既存の .st-faq-label / .st-section-title / .st-faq-lead を活かす */
.st-registered-header {
  margin-bottom: 10px;
}

/* 完了カード本体 */
.st-registered-box {
  position: relative;
  margin: 0 4px 18px;
  padding: 16px 14px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, transparent 60%),
    linear-gradient(135deg, rgba(255,247,236,0.97), rgba(255,236,248,0.96));
  border: 1px solid rgba(255, 209, 234, 0.9);
  box-shadow:
    0 8px 18px rgba(255, 170, 200, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* ちいさな上部アクセント */
.st-registered-box::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 32px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe5f2, #ffd87a);
  opacity: 0.8;
}

/* 見出し */
.st-registered-heading {
  margin: 0 0 6px;
  padding-left: 2px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.3);
}

/* 説明文 */
.st-registered-text {
  font-size: 13px;
  line-height: 1.7;
  margin: 4px 0 10px;
}

/* ユーザー情報テーブル */
.st-registered-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 13px;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 3px 10px rgba(255, 170, 200, 0.18),
    0 0 0 1px rgba(255, 240, 250, 0.85);
}

.st-registered-table th,
.st-registered-table td {
  padding: 8px 10px;
}

.st-registered-table th {
  width: 30%;
  background: linear-gradient(135deg, #ffe5f3, #ffd9ef);
  color: #ff4f8f;
  text-align: center;
  font-weight: 700;
}

.st-registered-table td {
  background: #ffffff;
  text-align: left;
  word-break: break-all;
}

/* 下の注意書き */
.st-registered-note {
  margin: 4px 0 10px;
  font-size: 11px;
  line-height: 1.7;
  color: #6b7280;
}

/* HOMEボタンの配置 */
.st-registered-nav {
  text-align: center;
  margin-top: 4px;
}

/* 既存 .st-btn--hero をそのまま利用しつつ、少し幅を調整 */
.st-registered-nav .st-btn--hero {
  max-width: 260px;
  width: 100%;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-registered-box {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===============================
   stacon 退会ページ
================================ */

.st-unsub {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 24px;
}

/* ヘッダーは既存の .st-faq-label / .st-section-title / .st-faq-lead を利用 */
.st-unsub-header {
  margin-bottom: 10px;
}

/* 注意事項カード */
.st-unsub-box {
  position: relative;
  margin: 0 4px 18px;
  padding: 16px 14px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, transparent 60%),
    linear-gradient(135deg, rgba(255,244,238,0.97), rgba(255,235,244,0.96));
  border: 1px solid rgba(255, 206, 220, 0.9);
  box-shadow:
    0 8px 18px rgba(255, 167, 195, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* 上部の細い帯アクセント */
.st-unsub-box::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe1ec, #ffd37a);
  opacity: 0.85;
}

/* 見出し */
.st-unsub-title {
  margin: 0 0 6px;
  padding-left: 2px;
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #f9739a;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.25);
}

/* 箇条書き */
.st-unsub-list {
  margin: 4px 0 8px 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.8;
}

.st-unsub-list li + li {
  margin-top: 3px;
}

/* 注意文 */
.st-unsub-note {
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.7;
  color: #6b7280;
}

/* 退会フォーム */
.st-unsub-form {
  margin-top: 6px;
  text-align: center;
}

/* 退会ボタン（少しだけ落ち着いた色味） */
.st-btn--unsub {
  max-width: 260px;
  width: 100%;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;

  background: linear-gradient(135deg, #ffe1b2 0%, #ffb3c1 45%, #ff8fa3 100%);
  color: #5b2a20;
  border: none;
  box-shadow:
    0 0 10px rgba(255, 210, 190, 0.8),
    0 8px 18px rgba(255, 160, 170, 0.55),
    inset 0 0 14px rgba(255, 255, 255, 0.7);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* hover / active で少しだけ動く */
.st-btn--unsub:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 14px rgba(255, 222, 206, 0.9),
    0 10px 22px rgba(255, 158, 176, 0.6),
    inset 0 0 16px rgba(255, 255, 255, 0.8);
  filter: brightness(1.02);
}

.st-btn--unsub:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 12px rgba(255, 150, 170, 0.55),
    inset 0 0 12px rgba(255, 255, 255, 0.65);
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-unsub-box {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===============================
   stacon 退会完了 / 失敗ページ
================================ */

.st-unsub-result {
  max-width: 480px;
  margin: 14px auto 32px;
  padding: 6px 10px 24px;
}

/* ヘッダーは既存の .st-faq-label / .st-section-title / .st-faq-lead を再利用 */
.st-unsub-result-header {
  margin-bottom: 10px;
}

/* 本文カード */
.st-unsub-result-body {
  position: relative;
  margin: 0 4px 18px;
  padding: 16px 14px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, transparent 60%),
    linear-gradient(135deg, rgba(255,246,238,0.97), rgba(255,236,248,0.96));
  border: 1px solid rgba(255, 210, 230, 0.9);
  box-shadow:
    0 8px 18px rgba(255, 170, 200, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* 上部アクセント（細い帯） */
.st-unsub-result-body::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe2f1, #ffe099);
  opacity: 0.85;
}

/* テキスト */
.st-unsub-result-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 6px 0 10px;
}

/* ボタンエリア */
.st-unsub-result-actions {
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ここで使うアウトラインボタン・ヒーローボタンの微調整だけ */
.st-unsub-result-actions .st-btn--outline {
  padding: 8px 18px;
  font-size: 13px;
}

.st-unsub-result-actions .st-btn--hero {
  max-width: 260px;
  padding: 10px 22px;
  font-size: 14px;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .st-unsub-result-body {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* =========================================
   stacon 会員ホーム（home.blade.php 用）
========================================= */

/* ページヘッダーを少し可愛く強めに */
.home-stacon .dc-page-header {
  padding: 18px 16px 10px;
}

.home-stacon .dc-page-title {
  font-family: "Yusei Magic","Yu Gothic","Meiryo",sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ff6b9b;
  text-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 2px 4px rgba(255,150,190,.45);
}

/* カテゴリカード全体 */
.st-home-category {
  margin: 0 14px 18px;
  padding: 14px 14px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.22);
  box-shadow:
    0 6px 16px rgba(255,143,180,0.22),
    0 0 0 1px rgba(255,210,235,0.8);
  backdrop-filter: blur(8px);
}

/* 上部ラベル＆タイトル */
.st-home-category-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-home-category-label {
  font-size: 11px;
  letter-spacing: .16em;
  color: #ff9cb9;
  margin: 0;
  text-transform: uppercase;
}

.st-home-category-title {
  font-family: "Yusei Magic","Yu Gothic","Meiryo",sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ff6b9b;
  margin: 0;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.35);
}

/* 本体ブロック */
.st-home-category-body {
  margin-top: 8px;
}

/* メイン1枚エリア */
.st-home-main-stamp {
  margin-bottom: 8px;
}

.st-home-main-link,
.st-home-main-dummy {
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 6px 14px rgba(255,143,180,0.3),
    0 0 0 1px rgba(255,210,235,0.8);
}

/* 実画像 */
.st-home-main-link img {
  width: 100%;
  display: block;
}

/* 画像がまだ無い時のダミー（カテゴリ別色） */
.st-home-main-dummy {
  width: 100%;
  padding-top: 100%; /* 1:1 */
  background-size: cover;
  background-position: center;
}

/* ファンシー */
.st-home-main-dummy--fancy {
  background-image:
    radial-gradient(circle at 15% 15%, #fff5ff 0, transparent 55%),
    linear-gradient(135deg,#ffe0f7,#ffc3e4);
}

/* メルヘン壁紙 */
.st-home-main-dummy--merhen {
  background-image:
    radial-gradient(circle at 85% 20%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#d8f0ff,#ffe1ff);
}

/* キュンキュン */
.st-home-main-dummy--kyun {
  background-image:
    radial-gradient(circle at 10% 80%, #fffdf5 0, transparent 55%),
    linear-gradient(135deg,#ffb6c9,#ffe1ec);
}

/* ぐうかわ壁紙 */
.st-home-main-dummy--guukawa {
  background-image:
    radial-gradient(circle at 80% 80%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#c4f1ff,#ffe7c7);
}

/* もっと見るで開くサムネ（初期は閉じる） */
.st-home-more-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .28s ease, margin-top .28s ease;
}

/* 開いた状態 */
.st-home-more-thumbs.is-open {
  margin-top: 8px;
  max-height: 200px; /* 1段3枚想定なので十分大きめ */
  opacity: 1;
}

/* サムネボタン */
.st-home-thumb {
  flex: 1 1 0;
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 4px 10px rgba(255,160,200,0.25),
    0 0 0 1px rgba(255,210,235,0.85);
}

.st-home-thumb img {
  width: 100%;
  display: block;
}

/* ちょっとだけ拡大エフェクト */
.st-home-thumb img {
  transition: transform .15s ease-out;
}
.st-home-thumb:active img,
.st-home-thumb:hover img {
  transform: scale(1.03);
}

/* ボタンエリア */
.st-home-category-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 共通ピルボタン */
.st-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* もっと見る（白＆ピンクふち） */
.st-btn-pill--more {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.9);
  color: #ff6b9b;
  border: 1px solid rgba(255,180,210,0.9);
  box-shadow: 0 4px 10px rgba(255,150,200,0.22);
}

/* このカテゴリを見る（メイン黄グラデ） */
.st-btn-pill--link {
  flex: 1;
  min-width: 0;
  background: linear-gradient(135deg,#ffd873,#ffb56b);
  color: #633200;
  box-shadow:
    0 6px 14px rgba(255,180,110,0.45),
    inset 0 0 12px rgba(255,255,255,0.65);
}

/* 押したときの軽い動き */
.st-btn-pill--more:hover,
.st-btn-pill--link:hover {
  transform: translateY(-1px);
}

.st-btn-pill--more:active,
.st-btn-pill--link:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(255,150,200,0.25);
}

/* 横幅が広いときは2列グリッドっぽく */
@media (min-width: 640px) {
  .home-stacon main.main {
    max-width: 640px;
  }
  .home-stacon .st-home-category {
    margin: 0 18px 20px;
  }
}

/* =========================================
   stacon 会員ホーム：2列カテゴリレイアウト
========================================= */

.home-stacon main.main {
  max-width: 520px; /* スマホでもPCでも「2列」で見やすい幅 */
}

/* 2列グリッド：上段 1&3 / 下段 2&4 */
.st-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 12px 24px;
}

/* 各カテゴリカード */
.st-home-category {
  padding: 10px 9px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.22);
  box-shadow:
    0 4px 12px rgba(255,143,180,0.25),
    0 0 0 1px rgba(255,210,235,0.9);
  backdrop-filter: blur(8px);
}

/* ラベル＆タイトル */
.st-home-category-head {
  margin-bottom: 4px;
}

.st-home-category-label {
  margin: 0;
  font-size: 10px;
  letter-spacing: .16em;
  color: #ff9cb9;
}

.st-home-category-title {
  margin: 0;
  font-family: "Yusei Magic","Yu Gothic","Meiryo",sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 1px 2px rgba(255,120,160,0.35);
}

/* 2枚並ぶサムネゾーン */
.st-home-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* 実画像サムネ */
.st-home-thumb-item {
  flex: 1 1 0;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 3px 8px rgba(255,150,200,0.25),
    0 0 0 1px rgba(255,210,235,0.85);
}

.st-home-thumb-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .15s ease-out;
}

.st-home-thumb-item:hover img,
.st-home-thumb-item:active img {
  transform: scale(1.03);
}

/* 画像が無い場合のダミー */
.st-home-thumb-dummy {
  width: 100%;
  padding-top: 100%; /* 1:1 */
  background-size: cover;
  background-position: center;
}

/* カテゴリ別ダミー色 */
.st-home-thumb-dummy--fancy {
  background-image:
    radial-gradient(circle at 10% 15%, #fff6ff 0, transparent 55%),
    linear-gradient(135deg,#ffe3f9,#ffc4e9);
}

.st-home-thumb-dummy--merhen {
  background-image:
    radial-gradient(circle at 80% 15%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#d8f3ff,#ffe5ff);
}

.st-home-thumb-dummy--kyun {
  background-image:
    radial-gradient(circle at 15% 80%, #fffdf5 0, transparent 55%),
    linear-gradient(135deg,#ffb6c9,#ffe1ec);
}

.st-home-thumb-dummy--guukawa {
  background-image:
    radial-gradient(circle at 80% 80%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#c4f1ff,#ffe7c7);
}

/* 「このカテゴリを見る」ボタンを1つだけ */
.st-home-category-actions {
  margin-top: 8px;
  text-align: center;
}

.st-home-category-actions .st-btn-pill--link {
  width: 100%;
  max-width: none;
  padding: 7px 8px;
  font-size: 11px;
}

/* 既存の .st-btn-pill--link の色味はそのまま再利用 */

/* ===============================
      stacon フッター
=============================== */
.st-footer {
  margin-top: 30px;
  padding: 26px 0 32px;
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 200, 230, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 18px rgba(255, 150, 200, 0.22);
}

.st-footer-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* ナビリンク */
.st-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.st-footer-nav a {
  font-size: 12px;
  color: #ff6b9b;
  text-decoration: none;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;

  transition: all .2s ease;
}

.st-footer-nav a:hover {
  background: rgba(255, 200, 230, 0.35);
  box-shadow: 0 2px 6px rgba(255, 150, 180, 0.25);
}

/* コピーライト */
.st-footer-copy {
  font-size: 11px;
  color: #ad6685;
  opacity: 0.9;
  margin-top: 10px;
  letter-spacing: 0.03em;
}


/* 会員ホーム：2列カテゴリ */
.home-stacon main.main {
  max-width: 520px;
}

/* 1&3 / 2&4 の 2列 */
.st-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 12px 22px;
}

.st-home-category {
  padding: 10px 9px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.22);
  box-shadow:
    0 4px 12px rgba(255,143,180,0.25),
    0 0 0 1px rgba(255,210,235,0.9);
  backdrop-filter: blur(8px);
}

.st-home-category-head { margin-bottom: 4px; }

.st-home-category-label {
  margin: 0;
  font-size: 10px;
  letter-spacing: .16em;
  color: #ff9cb9;
}

.st-home-category-title {
  margin: 0;
  font-family: "Yusei Magic","Yu Gothic","Meiryo",sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ff6b9b;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 1px 2px rgba(255,120,160,0.35);
}

.st-home-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.st-home-thumb-item {
  flex: 1 1 0;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 3px 8px rgba(255,150,200,0.25),
    0 0 0 1px rgba(255,210,235,0.85);
}

.st-home-thumb-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .15s ease-out;
}

.st-home-thumb-item:hover img,
.st-home-thumb-item:active img {
  transform: scale(1.03);
}

/* ダミー背景（各カテゴリ用） */
.st-home-thumb-dummy {
  width: 100%;
  padding-top: 100%;
  background-size: cover;
  background-position: center;
}

.st-home-thumb-dummy--fancy {
  background-image:
    radial-gradient(circle at 10% 15%, #fff6ff 0, transparent 55%),
    linear-gradient(135deg,#ffe3f9,#ffc4e9);
}
.st-home-thumb-dummy--merhen {
  background-image:
    radial-gradient(circle at 80% 15%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#d8f3ff,#ffe5ff);
}
.st-home-thumb-dummy--kyun {
  background-image:
    radial-gradient(circle at 15% 80%, #fffdf5 0, transparent 55%),
    linear-gradient(135deg,#ffb6c9,#ffe1ec);
}
.st-home-thumb-dummy--guukawa {
  background-image:
    radial-gradient(circle at 80% 80%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#c4f1ff,#ffe7c7);
}

.st-home-category-actions {
  margin-top: 8px;
  text-align: center;
}
.st-home-category-actions .st-btn-pill--link {
  width: 100%;
  padding: 7px 8px;
  font-size: 11px;
}

/* 気分アンケート */
.st-mood {
  margin: 0 14px 24px;
  padding: 18px 14px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.22);
  box-shadow:
    0 6px 14px rgba(255,143,180,0.24),
    0 0 0 1px rgba(255,210,235,0.8);
  backdrop-filter: blur(10px);
}

.st-mood-desc {
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0 10px;
}

.st-mood-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.st-mood-btn {
  flex: 1 1 calc(50% - 8px);
  padding: 7px 10px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg,#ffe8f7,#ffd6b8);
  box-shadow:
    0 4px 10px rgba(255,150,190,0.35),
    inset 0 0 10px rgba(255,255,255,0.8);
  color: #7c3a4a;
  letter-spacing: .05em;
  transition: transform .15s ease, box-shadow .15s ease;
}

.st-mood-btn:active,
.st-mood-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 16px rgba(255,150,190,0.45),
    inset 0 0 12px rgba(255,255,255,0.9);
}

.st-mood-result {
  margin-top: 4px;
}

.st-mood-wall {
  width: 100%;
  border-radius: 16px;
  padding-top: 60%;  /* 横長壁紙っぽく */
  background-size: cover;
  background-position: center;
  box-shadow:
    0 4px 14px rgba(255,150,190,0.35),
    0 0 0 1px rgba(255,210,235,0.9);
  margin-bottom: 8px;
}

/* 初期状態 */
.st-mood-wall--placeholder {
  background-image:
    linear-gradient(135deg,#ffeef9,#ffe3f1);
}

/* 元気系 */
.st-mood-wall--genki1 {
  background-image:
    radial-gradient(circle at 10% 20%, #fffcee 0, transparent 55%),
    linear-gradient(135deg,#ffe27a,#ff9fbf);
}
.st-mood-wall--genki2 {
  background-image:
    radial-gradient(circle at 80% 10%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#ffb86c,#ff6fb1);
}

/* 悲しい */
.st-mood-wall--sad1 {
  background-image:
    radial-gradient(circle at 10% 90%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#b8c7ff,#f3e6ff);
}
.st-mood-wall--sad2 {
  background-image:
    radial-gradient(circle at 90% 0, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#cfd9ff,#f5f0ff);
}

/* 気分を変えたい */
.st-mood-wall--change1 {
  background-image:
    radial-gradient(circle at 0 0, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#c2f5ff,#ffcef2);
}
.st-mood-wall--change2 {
  background-image:
    radial-gradient(circle at 100% 100%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#ffdfb8,#b8f2ff);
}

/* 疲れてる */
.st-mood-wall--tired1 {
  background-image:
    radial-gradient(circle at 20% 10%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#f7f0ff,#ffe9d2);
}
.st-mood-wall--tired2 {
  background-image:
    radial-gradient(circle at 80% 90%, #ffffff 0, transparent 55%),
    linear-gradient(135deg,#e4f4ff,#ffe9f3);
}

.st-mood-caption {
  font-size: 12px;
  line-height: 1.7;
}

/* ===============================
   stacon ギャラリー（list.blade 用）
================================ */

/* 全体ラッパ */
.st-gallery-page .dc-page-header {
  margin-bottom: 14px;
}

/* 「表示中のカテゴリ：〇〇」 */
.st-gallery-current {
  margin: 10px 0 0;
  font-size: 12px;
  color: #ff6b9b;
}

.st-gallery-current__name {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 209, 234, 0.9);
  font-size: 11px;
  color: #ff5c9f;
}

/* ===============================
   ギャラリーグリッド
================================ */
.st-gallery {
  margin: 0 10px 18px;
  padding: 14px 10px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 209, 234, 0.7);
  box-shadow: 0 6px 16px rgba(255, 155, 195, 0.28);
  backdrop-filter: blur(7px);
}

/* サムネイルのグリッド（スマホ前提） */
.st-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* PC幅でも詰まりすぎないように */
@media (min-width: 600px) {
  .st-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.st-gallery-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 20% 0, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.6) 35%, transparent 70%),
              linear-gradient(135deg, rgba(255,230,248,0.9), rgba(255,219,231,0.9));
  box-shadow:
    0 4px 12px rgba(255, 155, 198, 0.35),
    0 0 0 1px rgba(255, 209, 234, 0.9);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}

.st-gallery-item:active,
.st-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(255, 155, 198, 0.45),
    0 0 0 1px rgba(255, 225, 242, 1);
}

/* サムネイル枠（正方形） */
.st-gallery-thumb {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 */
  overflow: hidden;
}

.st-gallery-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* 画像は拾わせない（リンクは a が担当） */
  transition: transform .2s ease-out;
}

.st-gallery-item:hover .st-gallery-thumb img,
.st-gallery-item:active .st-gallery-thumb img {
  transform: scale(1.05);
}

/* TAP バッジ */
.st-gallery-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ===============================
   ページネーション
================================ */
.st-gallery-pagination {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
}

/* もし .search-pagination を既に使っているなら
   そこに対しても軽く馴染む調整をしておく */
.search-pagination > * {
  display: inline-block;
}

/* ===============================
   カテゴリショートカット（list 下部）
================================ */
.st-gallery-categories {
  margin: 0 10px 24px;
  padding: 16px 12px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,243,252,0.98), rgba(255,235,246,0.98));
  box-shadow:
    0 8px 18px rgba(255, 155, 198, 0.3),
    0 0 0 1px rgba(255, 209, 234, 0.8);
}

.st-gallery-categories .st-section-title {
  margin-bottom: 4px;
}

.st-category-lead {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 10px;
}

/* 2×2 グリッド（カテゴリカード） */
.st-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.st-category-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0, rgba(255,255,255,0.9) 0, transparent 55%),
    linear-gradient(135deg, #ffeefa, #ffe6ef);
  box-shadow:
    0 4px 10px rgba(255, 155, 198, 0.35),
    0 0 0 1px rgba(255, 209, 234, 0.9);
  text-align: center;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.st-category-card:hover,
.st-category-card:active {
  transform: translateY(-2px);
  box-shadow:
    0 7px 16px rgba(255, 155, 198, 0.45),
    0 0 0 1px rgba(255, 225, 242, 1);
}

.st-category-card-label {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ff6b9b;
  letter-spacing: .05em;
}

/* 小さいキラキラ飾り */
.st-category-card::before,
.st-category-card::after {
  content: "＊";
  position: absolute;
  font-size: 11px;
  color: rgba(255, 188, 215, 0.9);
}

.st-category-card::before {
  top: 4px;
  left: 10px;
}

.st-category-card::after {
  bottom: 4px;
  right: 10px;
}

/* ===============================
   stacon 単体ビュー（view.blade 用）
================================ */

/* ページ全体 */
.st-view {
  padding-bottom: 20px;
}

/* サブページヘッダーの微調整（他ページと共通で使える） */
.st-subpage-header {
  margin-bottom: 14px;
}

/* 本文ラッパ（カードを中央寄せ） */
.st-view-body {
  margin: 0 12px 24px;
}

/* ダウンロードカード本体 */
.st-view-card {
  border-radius: 24px;
  padding: 16px 14px 18px;
  background:
    radial-gradient(circle at 10% 0, rgba(255,255,255,0.9) 0, transparent 55%),
    linear-gradient(135deg, rgba(255,240,252,0.96), rgba(255,229,243,0.96));
  box-shadow:
    0 10px 22px rgba(255, 155, 198, 0.35),
    0 0 0 1px rgba(255, 209, 234, 0.85);
}

/* 画像エリア */
.st-view-image-wrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 12px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 8px 18px rgba(255, 180, 220, 0.45),
    0 0 0 1px rgba(255, 230, 245, 0.9);
}

.st-view-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  /* view では画像を長押し保存させたいので pointer-events は切らない */
}

/* テキスト部分 */
.st-view-text {
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  margin-top: 4px;
}

.st-view-message {
  margin: 0 0 6px;
}

.st-view-message strong {
  color: #ff6b9b;
  font-weight: 700;
}

.st-view-tips {
  margin: 0;
  padding-left: 1.2em;
  font-size: 12px;
  color: #777;
}

.st-view-tips li + li {
  margin-top: 2px;
}

/* ボタンエリア */
.st-view-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* ボタン共通 */
.st-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 260px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s ease-out;
}

/* 一覧にもどる（サブ・幽霊ボタン） */
.st-view-btn--back {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 209, 234, 0.9);
  color: #777;
  box-shadow: 0 5px 12px rgba(255, 170, 210, 0.25);
}

.st-view-btn--back:hover,
.st-view-btn--back:active {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(255, 170, 210, 0.35);
}

/* マイルームへ（メイン・きいろ系） */
.st-view-btn--home {
  background: linear-gradient(135deg, #ffe27b 0%, #ffc46b 40%, #ffac6b 100%);
  color: #633200;
  box-shadow:
    0 9px 20px rgba(255, 170, 100, 0.5),
    inset 0 0 16px rgba(255, 255, 255, 0.6);
}

.st-view-btn--home:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(255, 170, 100, 0.6),
    inset 0 0 18px rgba(255, 255, 255, 0.75);
}

.st-view-btn--home:active {
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(255, 150, 90, 0.45),
    inset 0 0 14px rgba(255, 255, 255, 0.65);
}

/* ちょっとだけ横並びにしたい場合（幅がある端末） */
@media (min-width: 560px) {
  .st-view-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ===============================
   気分アンケート結果（ランダム壁紙）
   2枚を2列でかわいく並べる
================================ */
.st-mood-result {
  margin-top: 14px;
}

/* 2列グリッドで並べる */
.st-mood-result-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* 各カード */
.st-mood-wall {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  padding: 8px 8px 10px;
  box-shadow:
    0 4px 12px rgba(255, 143, 180, 0.28),
    0 0 0 1px rgba(255, 209, 234, 0.7);
}

/* 壁紙サムネ：縦長だけどカード内でトリミングして表示 */
.st-mood-wall-thumb {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  position: relative;

  /* 9:16 縦長比率くらいで固定表示 */
  aspect-ratio: 9 / 16;
}

/* aspect-ratio 未対応ブラウザ向けの簡易フォールバック */
@supports not (aspect-ratio: 1 / 1) {
  .st-mood-wall-thumb {
    padding-top: 160%;      /* だいたい 9:16 */
  }
  .st-mood-wall-thumb img {
    position: absolute;
    inset: 0;
  }
}

/* 画像は枠いっぱいにフィットさせる */
.st-mood-wall-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下に一言ラベル */
.st-mood-wall-label {
  margin: 6px 0 0;
  font-size: 11px;
  text-align: center;
  color: #ff6b9b;
}

/* ===============================
   スライダー（index と同じ）
================================ */

.st-slide-text {
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 18px rgba(255,255,255,0.9);
}

.st-slide-label {
  font-size: 11px;
  color: #ff6b9b;
  margin: 0 0 6px;
}

.st-slide-title {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}


/* ログイン後ヘッダーのナビを1行固定 */
.dc-header__nav {
  display: flex;
  flex-wrap: nowrap;      /* ★ 改行禁止 */
  gap: 18px;              /* ナビ間の適度な余白 */
  white-space: nowrap;    /* ★ テキスト改行禁止 */
  align-items: center;
}

/* 各リンクのフォント調整（可愛い雰囲気＋詰まり対策） */
.dc-header__nav a {
  font-size: 14px;
  letter-spacing: 0.03em;
  display: inline-block;
  padding: 4px 0;
}

/* ヘッダー右側の余白を少し調整して詰まりを防ぐ */
.dc-header__inner {
  padding: 10px 12px;
}

/* ▼ スマホ時：ナビを必ず1行に収める */
@media (max-width: 480px) {

  .dc-header__nav {
    display: flex;
    flex-wrap: nowrap;       /* 改行させない */
    gap: 12px;               /* 余白詰める */
    white-space: nowrap;     /* テキスト改行禁止 */
  }

  .dc-header__nav a {
    font-size: 12px;         /* 字を少し小さくする */
    letter-spacing: 0.02em;
    padding: 4px 0;
  }

  /* ▼ ロゴ横のナビ位置も少し調整 */
  .dc-header__inner {
    padding: 10px 10px;
    justify-content: space-between;
  }
}

/* ===============================
   グローバル：ページ見出しデザイン
   （home / list / view / faq / policy など共通）
================================ */

/* 外枠カード */
.dc-page-header {
  max-width: 480px;
  margin: 14px auto 20px;
  padding: 16px 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 6px 16px rgba(255, 143, 180, 0.25),
    0 0 0 1px rgba(255, 210, 234, 0.7);
  position: relative;
  overflow: hidden;
}

/* 左上のふわっとした色味アクセント */
.dc-page-header::before {
  content: "";
  position: absolute;
  top: -34px;
  left: -46px;
  width: 130px;
  height: 70px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.9) 40%, transparent 70%),
    linear-gradient(135deg, #ffeaf5, #ffd5e4);
  opacity: 0.9;
}

/* ラベル（FAQ / PRIVACY POLICY / マイスタンプルーム など） */
.dc-page-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #f89fbe;
  margin: 0 0 6px;
  text-transform: uppercase;
}

/* メインタイトル */
.dc-page-title {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff6b9b;
  margin: 0 0 8px;
  position: relative;
  display: inline-block;
}

/* タイトルの両端に「＊」っぽい飾りライン */
.dc-page-title::before,
.dc-page-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffbcd7);
}

.dc-page-title::before {
  right: 100%;
  margin-right: 8px;
}

.dc-page-title::after {
  left: 100%;
  margin-left: 8px;
}

/* リード文 */
.dc-page-lead {
  font-size: 13px;
  line-height: 1.7;
  margin: 4px 0 0;
  color: #555;
}

/* スマホ時は少しだけ詰める */
@media (max-width: 480px) {
  .dc-page-header {
    margin: 10px 10px 18px;
    padding: 14px 14px 16px;
  }

  .dc-page-title {
    font-size: 18px;
  }
}


/* 飴玉エフェクト：背景として背面に配置 */
.dc-page-header::before {
  content: "";
  position: absolute;
  top: 0;             /* 元の位置のままでOK */
  left: 0;
  width: 80px;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.75) 40%, transparent 70%),
    linear-gradient(135deg, #ffeaf5, #ffd5e4);
  opacity: 0.9;

  z-index: 0;         /* ← 背面に置く（ここが超重要） */
}

/* タイトルやラベルは前面に */
.dc-page-label,
.dc-page-title,
.dc-page-lead {
  position: relative;
  z-index: 2;         /* ← 飴玉より前に表示させる */
}

/* =====================================================
   共通：サブページ（home / list / view / FAQ など）の
   ヘッダーカード ＋ 飴エフェクト
===================================================== */
.dc-page-header {
  position: relative;
  margin: 16px 14px 20px;
  padding: 16px 14px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 209, 234, 0.85);
  box-shadow: 0 6px 16px rgba(255, 150, 190, 0.25);
}

/* 飴玉はあくまで背景。文字の背面にだけ見せる */
.dc-page-header::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 120px;
  height: 60px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.75) 40%, transparent 70%),
    linear-gradient(135deg, #ffe8f6, #ffe0c6);
  opacity: 0.95;
  box-shadow: 0 6px 14px rgba(255, 160, 200, 0.45);
  z-index: 0;           /* ← 背面に固定 */
}

/* ラベル／タイトル／リードは前面に出す */
.dc-page-label,
.dc-page-title,
.dc-page-lead,
.st-gallery-current {
  position: relative;
  z-index: 2;
}

.dc-page-label {
  font-size: 11px;
  letter-spacing: .12em;
  color: #ff9cbf;
  margin: 0 0 4px;
}

.dc-page-title {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ff6b9b;
  margin: 0 0 6px;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,120,160,0.35);
}

.dc-page-lead {
  font-size: 13px;
  line-height: 1.7;
  margin: 2px 0 0;
}

/* list 用の補足行（現在カテゴリ） */
.st-gallery-current {
  margin: 10px 0 0;
  font-size: 12px;
  color: #ff7fa8;
}
.st-gallery-current__name {
  font-weight: 700;
}


/* =====================================================
   stacon ログイン後：ギャラリーページ（/deco/list）
===================================================== */

.st-gallery-page {
  max-width: 480px;
  margin: 0 auto;
}

/* ギャラリーセクション本体 */
.st-gallery {
  margin: 0 14px 24px;
}

.st-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* PC のときは 3 列にする */
@media (min-width: 768px) {
  .st-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.st-gallery-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.9);
  box-shadow:
    0 5px 14px rgba(255, 150, 190, 0.28),
    0 0 0 1px rgba(255, 210, 236, 0.9);
  transform: translateY(0);
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}

.st-gallery-item:hover,
.st-gallery-item:active {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(255, 150, 190, 0.38),
    0 0 0 1px rgba(255, 210, 236, 1);
}

.st-gallery-thumb {
  width: 100%;
  padding-top: 100%;          /* 正方形 */
  position: relative;
  overflow: hidden;
  background: #fce7f5;
}

.st-gallery-thumb img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* “TAPで表示” バッジ */
.st-gallery-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
}

/* ページネーション */
.st-gallery-pagination {
  margin: 14px 0 4px;
  text-align: center;
}

/* =====================================================
   下部カテゴリショートカット（stacon版）
===================================================== */
.st-gallery-categories {
  margin: 0 14px 26px;
}

.st-category-section {
  padding: 16px 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.38);
  border: 1px solid rgba(255, 209, 234, 0.85);
  box-shadow: 0 6px 14px rgba(255, 150, 190, 0.25);
}

.st-category-lead {
  font-size: 12px;
  line-height: 1.7;
  margin: 2px 0 10px;
}

.st-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.st-category-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe9f7, #ffe4e3);
  box-shadow:
    0 4px 10px rgba(255, 150, 190, 0.3),
    0 0 0 1px rgba(255, 209, 234, 0.9);
  font-size: 12px;
  color: #ff6b9b;
  text-align: center;
}

.st-category-card-label {
  line-height: 1.4;
}

/* ===============================
   ヘッダー用スライダー（3枚・1枚4秒）
================================ */

/* スライド内テキストボックス */
.st-slide-text {
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 18px rgba(255,255,255,0.9);
}

.st-slide-label {
  font-size: 11px;
  color: #ff6b9b;
  margin: 0 0 6px;
}

.st-slide-title {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
/* ===============================
   ヘッダー用スライダー（3枚・1枚4秒・フェード）
================================ */

/* スライダーの枠（高さはここでだけ指定） */
.st-slider {
  margin: 10px 10px 16px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 25px rgba(255,105,180,0.25);
  height: 240px;              /* 好みで 220〜260px くらいに調整OK */
}

@media (min-width:480px) {
  .st-slider {
    height: 280px;
  }
}

/* トラック：横スライドは一切させない */
.st-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  animation: none !important;  /* ← ここで古いアニメを完全にOFF */
}

/* 各スライドを重ねて配置（フェード用） */
.st-slide {
  position: absolute;
  inset: 0;
  height: 100%;
  padding: 22px 18px;
  display: flex;
  align-items: flex-end;

  opacity: 0;
  animation: st-fade-slide 12s infinite;
}

/* 画像を背景にするスライド用 */
.st-slide-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 1〜3枚目：表示タイミングをずらすだけ */
.st-slide1 { animation-delay: 0s; }
.st-slide2 { animation-delay: 5s; }
.st-slide3 { animation-delay: 10s; }

/* テキストボックス */
.st-slide-text {
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 18px rgba(255,255,255,0.9);
}

.st-slide-label {
  font-size: 11px;
  color: #ff6b9b;
  margin: 0 0 6px;
}

.st-slide-title {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

/* 3枚で 12秒 = 4秒ずつ表示 */
@keyframes st-fade-slide {
  0%   { opacity: 0; }
  5%   { opacity: 1; }  /* ちょっとかけてフェードイン */
  30%  { opacity: 1; }  /* しっかり見えてる時間 */
  35%  { opacity: 0; }  /* ここでフェードアウト */
  100% { opacity: 0; }  /* 残り時間は待機 */
}

/* スライダーのタイトルを「ようこそ、staconへ」と同じ雰囲気に */
.st-slide-title {
  font-family: "Yusei Magic", "Yu Gothic", "Meiryo", sans-serif; /* ← これ！ */
  font-size: 20px;            /* 少し大きくして見やすく */
  font-weight: 700;           /* 太めでかわいい見た目に */
  letter-spacing: .05em;
  line-height: 1.5;
  margin: 0;

  /* ゆめかわ感アップ：白いフワッとした影 */
  color: #ffa5ff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 2px 3px rgba(255,150,190,0.35);
}

/* ====== カテゴリグリッドの画像を正方形にトリミング ====== */

/* 正方形の枠を作る */
.st-grid-thumb {
  position: relative;
  width: 100%;
  padding-top: 100%;   /* 1:1 の正方形 */
  overflow: hidden;
}

/* 中の画像を枠いっぱいにフィットさせる */
.st-grid-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 中央でトリミング */
  display: block;
}

/* 正方形の枠を作る */
.st-grid-thumb {
  position: relative;
  width: 100%;
  padding-top: 100%;   /* 1:1 の正方形 */
  overflow: hidden;
}

/* 中の画像を枠いっぱいにフィットさせる */
.st-grid-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* ===============================
   stacon 検索ページ（search.blade 用）
================================ */

.st-search-page {
  padding-bottom: 24px;
}

/* 検索ボックス */
.st-search-box {
  margin: 0 12px 20px;
  padding: 16px 14px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, transparent 55%),
    linear-gradient(135deg, rgba(255,243,252,0.98), rgba(255,235,246,0.98));
  box-shadow:
    0 10px 22px rgba(255, 155, 198, 0.35),
    0 0 0 1px rgba(255, 209, 234, 0.8);
}

.st-search-caption {
  font-size: 12px;
  line-height: 1.7;
  margin: 4px 0 10px;
  color: #666;
}

/* フォームの横並び */
.st-search-form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.st-search-input-wrap {
  flex: 1 1 180px;
}

/* x-admin.form-input から出てくる input を丸ボックスに */
.st-search-input-wrap input[type="text"],
.st-search-input-wrap input[type="search"] {
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255, 175, 210, 0.8);
  padding: 9px 14px;
  background-color: #ffffff;
  font-size: 13px;
  outline: none;
}

.st-search-input-wrap input[type="text"]:focus,
.st-search-input-wrap input[type="search"]:focus {
  border-color: #ff6b9b;
  box-shadow: 0 0 0 2px rgba(255, 182, 214, 0.45);
}

/* 検索ボタン */
.st-search-button-wrap {
  flex: 0 0 auto;
}

.st-search-button {
  max-width: 180px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffe27b, #ffb36b);
  color: #633200;
  box-shadow:
    0 10px 20px rgba(255, 170, 100, 0.5),
    inset 0 0 14px rgba(255, 255, 255, 0.7);
  border: none;
}

/* ripple は既存の .ripple を流用 */

.st-search-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px rgba(255, 170, 100, 0.6),
    inset 0 0 16px rgba(255, 255, 255, 0.8);
}

.st-search-button:active {
  transform: translateY(0);
}

/* スマホ時は縦並び */
@media (max-width: 600px) {
  .st-search-form-row {
    align-items: stretch;
  }
  .st-search-button-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .st-search-button {
    width: 100%;
    max-width: none;
  }
}

/* キーワードチップ */
.st-search-chips {
  margin-top: 10px;
}

.st-search-chips-label {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.st-search-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-chip {
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 209, 234, 0.9);
  color: #ff6b9b;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(255, 155, 198, 0.3);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
}

.st-chip:hover {
  transform: translateY(-1px);
  background: #fff7fc;
  box-shadow: 0 4px 8px rgba(255, 155, 198, 0.4);
}

.st-chip:active {
  transform: translateY(0);
}

/* ===============================
   検索結果
================================ */
.st-search-results {
  margin: 0 12px 18px;
  padding: 14px 12px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 209, 234, 0.7);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 18px rgba(255, 155, 198, 0.3);
}

.st-search-results-header {
  margin-bottom: 6px;
}

.st-search-results-label {
  font-size: 12px;
  color: #777;
  margin: 0;
}

.st-search-results-label span {
  font-weight: 700;
  color: #ff6b9b;
}

/* 結果が0件のとき */
.st-search-empty {
  font-size: 12px;
  line-height: 1.7;
  color: #666;
  margin: 8px 0 2px;
  text-align: left;
}

/* ギャラリー部分は list 用に作った .st-gallery-grid / .st-gallery-item を流用 */

/* もし未定義なら簡易定義（既に入れていたらここは不要） */
.st-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 600px) {
  .st-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.st-gallery-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0, rgba(255,255,255,0.9) 0, transparent 55%),
    linear-gradient(135deg, #ffeefa, #ffe6ef);
  box-shadow:
    0 4px 12px rgba(255, 153, 204, 0.35),
    0 0 0 1px rgba(255, 209, 234, 0.9);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}

.st-gallery-item:hover,
.st-gallery-item:active {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(255, 153, 204, 0.45),
    0 0 0 1px rgba(255, 225, 242, 1);
}

.st-gallery-thumb {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
}

.st-gallery-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  transition: transform .2s ease-out;
}

.st-gallery-item:hover .st-gallery-thumb img,
.st-gallery-item:active .st-gallery-thumb img {
  transform: scale(1.05);
}

.st-gallery-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

/* ページネーション */
.st-gallery-pagination {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
}