@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

* {
  font-family: 'Zen Maru Gothic', sans-serif;
}

body {
  margin: 0;
  color: #333;
  background-image: linear-gradient(
    135deg,
    #ffe8f3 0%,
    #ffe0f1 15%,
    #fff0d9 30%,
    #fff9cc 45%,
    #eafbe9 60%,
    #e8f4ff 75%,
    #f2e9ff 88%,
    #ffe8f3 100%
  ) !important;
  background-size: 300% 300% !important;
  background-attachment: fixed;
  animation: softPinkRainbow 38s ease-in-out infinite;
}

@keyframes softPinkRainbow {
  0%   {
    background-position: 0% 50%;
  }

  50%  {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.records-page {
  position: relative;
  overflow: hidden;
  background-color: #fff1f8;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.9) 0 7%, transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(255, 210, 236, 0.9) 0 11%, transparent 38%),
    radial-gradient(circle at 15% 88%, rgba(221, 214, 254, 0.72) 0 12%, transparent 38%),
    radial-gradient(circle at 90% 82%, rgba(186, 230, 253, 0.68) 0 12%, transparent 37%),
    linear-gradient(145deg, #ffe0f1 0%, #ffd6ec 18%, #f5d0fe 38%, #ddd6fe 55%, #bfdbfe 72%, #fef3c7 88%, #ffd9ec 100%);
  background-attachment: fixed;
}

.records-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 26%, rgba(255, 255, 255, 0.72) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.72) 0 1.2px, transparent 2px),
    radial-gradient(circle at 38% 70%, rgba(255, 255, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 68%, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px);
  background-size: 180px 180px;
}

.records-page > .container {
  position: relative;
  z-index: 1;
}

.wooden-header {
  background: linear-gradient(135deg, #ffd6cc 0%, #ffb3a4 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 60px;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-logo {
  font-size: 1.6rem;
  font-weight: 900;
  color: #222;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 #fff, 3px 3px 6px rgba(0,0,0,.15), 6px 6px 10px rgba(0,0,0,.1);
  text-decoration: none;
  transition: transform .3s, text-shadow .3s;
}

.header-logo:hover {
  transform: scale(1.07);
  text-shadow: 2px 2px 0 #fff, 4px 4px 10px rgba(0,0,0,.25);
}

.header-subtitle {
  font-size: .9rem;
  color: #666;
  margin-left: 8px;
}

.header-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.nav-button {
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  border: 1px solid transparent;
}

/* checkmark：ヘッダー内では非表示 */

.header-nav .checkmark,
.nav-button .checkmark {
  display: none;
}

/* checkmark：箱カード内では表示 */

.green-box .checkmark,
.purple-box .checkmark,
.pink-box .checkmark {
  display: inline;
}

.checkmark {
  font-size: 1rem;
  margin-right: 6px;
  line-height: 1;
  vertical-align: middle;
  font-weight: 700;
  color: #15803d;
}

.green-box .checkmark {
  color:#16a34a;
}

.purple-box .checkmark {
  color:#7e22ce;
}

.pink-box .checkmark {
  color:#db2777;
}

#howToLink {
  background: linear-gradient(135deg, #fff7cc, #ffe680);
  color: #554400;
  border-color: #ffe680;
}

#howToLink:hover {
  background: linear-gradient(135deg, #ffec99, #ffd84d);
  transform: translateY(-2px);
}

.nav-button:nth-of-type(2) {
  background: linear-gradient(135deg, #ffe2b3, #ffc56b);
  color: #5a3a00;
  border-color: #ffc56b;
}

.nav-button:nth-of-type(2):hover {
  background: linear-gradient(135deg, #ffd48c, #ffb74d);
  transform: translateY(-2px);
}

.nav-button:nth-of-type(3) {
  background: linear-gradient(135deg, #b9f6ca, #8de6a1);
  color: #104e25;
  border: 1px solid #8de6a1;
}

.nav-button:nth-of-type(3):hover {
  background: linear-gradient(135deg, #a2edb5, #73da8e);
  transform: translateY(-2px);
}

.nav-button.signup-button {
  background: linear-gradient(135deg, #c4f3d5, #8ee5a1);
  color: #0f3f1a;
  border-color: #8ee5a1;
}

.nav-button.signup-button:hover {
  background: linear-gradient(135deg, #a9eac1, #6fdb8a);
  transform: translateY(-2px);
}

.nav-button.mypage-button {
  background: linear-gradient(135deg, #d9f2e6, #aee5cc);
  color: #1f5a3f;
  border-color: #aee5cc;
}

.nav-button.mypage-button:hover {
  background: linear-gradient(135deg, #c4ead8, #8fd8b8);
  transform: translateY(-2px);
}

.nav-button.new-post-link {
  background: linear-gradient(135deg, #e8f4ff, #bfe3ff);
  color: #1f4f7a;
  border: 1px solid #bfe3ff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(31, 79, 122, 0.15);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.nav-button.new-post-link:hover {
  background: linear-gradient(135deg, #d6ecff, #a7d6ff);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(31, 79, 122, 0.18);
}

.btn-primary {
  background: linear-gradient(135deg,#ffa9a9,#ff7b7b);
  color:#fff;
  font-weight:700;
  border: 2px solid #ff9a9a;
  border-radius:10px;
  padding:14px 28px;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 4px 10px rgba(255,120,120,.3);
  transition: all .25s;
}

.btn-primary:hover {
  transform:translateY(-3px);
  background:linear-gradient(135deg,#ff8b8b,#ff6262);
  box-shadow:0 6px 14px rgba(255,100,100,.4);
}

.btn-secondary {
  background: linear-gradient(135deg,#f5f5f5,#e5e7eb);
  color:#4b5563;
  font-weight:700;
  border: 2px solid #e5e7eb;
  border-radius:10px;
  padding:14px 28px;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 4px 10px rgba(107,114,128,.2);
  transition: all .25s;
}

.btn-secondary:hover {
  transform:translateY(-3px);
  background:linear-gradient(135deg,#e5e7eb,#d1d5db);
  box-shadow:0 6px 14px rgba(107,114,128,.25);
}

.btn-danger {
  background: linear-gradient(135deg, #ff5a5a, #e53935);
  color: #fff;
  font-weight: 700;
  border: 2px solid #d32f2f;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(229, 57, 53, 0.35);
  transition: all .25s;
}

.btn-danger:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  box-shadow: 0 6px 14px rgba(183, 28, 28, 0.45);
}

.hero {
  margin-top:-20px;
  padding-bottom:60px;
  text-align:center;
  position:relative;
}

.hero button#helpButton {
  position:absolute;
  top:32px;
  right:32px;
  z-index:100;
  width:46px;
  height:46px;
  font-size:1.5rem;
  border:none;
  border-radius:50%;
  background:linear-gradient(145deg,#ffe8ec,#ffbfc9);
  color:#ff6b6b;
  box-shadow:0 4px 8px rgba(255,160,160,.4), inset 0 2px 4px rgba(255,255,255,.6);
  transition:all .25s;
}

.hero button#helpButton:hover {
  transform:scale(1.15) rotate(10deg);
  background:linear-gradient(145deg,#ffd1d6,#ff9fae);
  color:#fff;
  box-shadow:0 6px 12px rgba(255,120,120,.5), inset 0 3px 6px rgba(255,255,255,.7);
}

.hero button#helpButton:active {
  transform:scale(.95);
}

.suggestion-box {
  background: linear-gradient(135deg, #fff4f2 0%, #ffe1dc 100%);
  border:4px solid #ffd6cc;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  border-radius:24px;
  padding:40px 80px;
  margin:30px auto 60px;
  width:100%;
  max-width:900px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.mail-slot span {
  line-height: 1;
  background: linear-gradient(180deg, #ffb3a4, #ff9a8e);
  width: 95%;
  margin: 0 auto 30px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
  text-decoration: none;
  cursor: pointer;
}

@keyframes floating {
  0%,100% {
    transform:translateY(0);
  }

  50% {
    transform:translateY(-10px);
  }
}

.floating {
  animation:floating 3s ease-in-out infinite;
  font-size:3rem;
  font-weight:900;
  color:#111;
  text-shadow:2px 2px 0 #fff, 4px 4px 10px rgba(0,0,0,.3);
  letter-spacing:0.05em;
}

.box-card {
  border-radius:20px;
  overflow:hidden;
  border:3px solid #ffd6cc;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:transform .3s, box-shadow .3s;
}

.box-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.green-box {
  background:linear-gradient(135deg,#f9fffa,#f1fff5);
}

.purple-box {
  background:linear-gradient(135deg,#fbf7ff,#f5efff);
}

.pink-box {
  background:linear-gradient(135deg,#fff9fa,#fff2f4);
}

.box-slot {
  text-align:center;
  padding:10px;
  color:#fff;
  font-weight:700;
  background:linear-gradient(180deg,#ffb3a4,#ff9a8e);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.15);
  letter-spacing:0.1em;
}

.box-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 16px;
}

.icon-box {
  font-size:3rem;
  line-height:1;
  margin-top:8px;
}

.box-header .icon-box {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 0;
}

.box-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

.green-box .box-title {
  color:#15803d;
}

.purple-box .box-title {
  color:#6b46c1;
}

.pink-box .box-title {
  color:#c53030;
}

.box-description,
.box-features {
  line-height: 1.85;
  color: #374151;
  font-weight: 600;
}

.example-box {
  padding:14px 18px;
  border-radius:12px;
  margin-top:16px;
  font-size:.95rem;
  font-weight:600;
  line-height: 1.75;
}

.green-box .example-box {
  background:#dcf5e5;
  border:1px solid #5ed189;
  color:#14532d;
}

.purple-box .example-box {
  background:#e9dbff;
  border:1px solid #a77bff;
  color:#4b2999;
}

.pink-box .example-box {
  background:#ffdbe2;
  border:1px solid #ff8fa2;
  color:#8b1a2b;
}

.green-box ul,
.purple-box ul,
.pink-box ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.narrow-summary-box {
  max-width: 640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.login-button {
  background: linear-gradient(135deg, #a3d4ff, #7fc3ff);
  color: #003366;
  border: 1px solid #7fc3ff;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  transition: all .25s ease;
}

.login-button:hover {
  background: linear-gradient(135deg, #7fc3ff, #5bb3ff);
  transform: translateY(-2px);
}

.logout-button {
  background: linear-gradient(135deg, #ff5a5a, #e53935);
  color: #fff;
  border: 1px solid #d32f2f;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(229, 57, 53, 0.4);
  transition: all .25s ease;
}

.logout-button:hover {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  box-shadow: 0 5px 10px rgba(183, 28, 28, 0.45);
  transform: translateY(-2px);
}

.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-slide.active {
  opacity: 1;
  z-index: 1;
}

.slideshow-slide.hidden {
  opacity: 0;
  z-index: 0;
}

.slideshow-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* monthly stats */

.monthly-stats {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.monthly-stat-card {
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  text-align: center;
  background: #f6f9fc;
  border: 1.5px solid #c8d6e5;
}

.monthly-stat-card:nth-child(2) {
  background: #fcf7ff;
  border: 1.5px solid #e6cffa;
}

.monthly-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
}

.monthly-stat-value {
  margin-top: 0.35rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1f2937;
}

/* 1024 */

@media (max-width: 1024px) {
  .suggestion-box {
    max-width: 760px;
    padding: 32px 48px;
  }
}

/* 768 */

@media (max-width: 768px) {
  .slideshow-container {
    height: 300px;
    max-width: 100%;
    margin: 1rem auto;
  }

  .suggestion-box {
    max-width: 560px;
    width: calc(100% - 32px);
    padding: 28px 28px;
  }

  .floating {
    font-size: 1rem;
  }

  .hero button#helpButton {
    top: 20px;
    right: 20px;
  }

  .box-card .p-8 {
    padding: 24px;
  }

  .box-card .flex {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .icon-box {
    font-size: 2.4rem;
  }

  .box-title {
    font-size: 1.4rem;
  }

  .box-description,
  .box-features,
  .example-box {
    line-height: 1.6;
  }

  .hamburger-button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    position: relative;
    z-index: 9999;
    transition: 0.3s ease;
  }

  .hamburger-button span {
    width: 28px;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: 0.4s ease;
    transform-origin: center;
  }

  .hamburger-button.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .hamburger-button.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-button.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .header-nav {
    flex-direction: column;
    gap: 14px;
    background: rgba(255, 220, 230, 0.95);
    padding: 16px;
    position: absolute;
    right: 16px;
    top: 70px;
    width: 200px;
    border-radius: 10px;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  }

  .header-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* 640 */

@media (max-width: 640px) {
  .monthly-stats {
    grid-template-columns: 1fr;
  }
}

/* 480 */

@media (max-width: 480px) {
  .slideshow-container {
    height: 200px;
    border-radius: 12px;
  }

  .suggestion-box {
    max-width: 420px;
    width: calc(100% - 24px);
    padding: 22px 20px;
  }

  .box-card {
    border-radius: 16px;
  }

  .icon-box {
    font-size: 2.3rem;
  }

  .box-title {
    font-size: 1.25rem;
  }

  .box-header {
    gap: 8px;
    margin-bottom: 14px;
  }

  .example-box {
    font-size: 0.9rem;
  }
}

@keyframes topRainbowFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

body.users-mypage_posts {
  background-image: linear-gradient(
    120deg,
    #ffdede 0%,      /* 淡い赤 */
    #f3d9ff 25%,     /* 淡い紫 */
    #fdfcff 38%,     /* メタリック白 */
    #d9f7e8 55%,     /* 淡いグリーン */
    #ffe6e6 75%,     /* 赤へ戻る中間 */
    #ffdede 100%     /* ループ用 */
  ) !important;
  background-size: 300% 300% !important;
  background-attachment: fixed;
  animation: softLoopFlow 50s ease-in-out infinite;
}

@media (max-width: 768px) {
  body,
  body.users-mypage_posts {
    /* iOS Safari でも背景アニメを安定させる */
    background-attachment: scroll;
    background-size: 240% 240% !important;
    animation-duration: 70s;
  }

  body::before,
  body.users-mypage_posts::before {
    /* スマホではコストが高いぼかし＋長尺アニメを弱める */
    filter: blur(1.6px);
    opacity: 0.45;
    animation: cloudDrift 420s linear infinite;
  }

  body::after,
  body.users-mypage_posts::after {
    opacity: 0.1;
  }

  .records-page {
    background-attachment: scroll;
  }
}

@keyframes softLoopFlow {
  0%   {
    background-position: 0% 50%;
  }

  50%  {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

/* 雲レイヤー（右 → 左） */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("/assets/cocopos.back-59f4365d.jpg");
  background-repeat: repeat;
  background-size: 900px auto;
  opacity: 0.62;
  /* ぼかしを少し強める（継ぎ目が馴染みやすい） */
  filter: blur(3.2px);
  transform: scale(1.02);
  /* 端のにじみ対策 */
  will-change: background-position, filter;
  animation: cloudDrift 300s linear infinite;
}

@keyframes cloudDrift {
  from {
    background-position: 0 0;
  }

  to   {
    background-position: -2000px 0;
  }
}

/* 継ぎ目を和らげるベール（既存 + 方向性を追加） */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.35), transparent 60%),

    /* 繋ぎ目に出やすい縦・横の“帯”を薄く崩す */
    linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 40%, rgba(255,255,255,0.14)),
    linear-gradient(0deg,  rgba(255,255,255,0.10), rgba(255,255,255,0.00) 45%, rgba(255,255,255,0.10)),

    linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.10));
  mix-blend-mode: soft-light;
  opacity: 0.15;
}

main {
  position: relative;
  z-index: 2;
}

/* 右上固定・縦積み・少しワイド */

#flash-container {
  position: fixed;
  top: 110px;
  /* ヘッダーと被るなら調整 */
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  /* 横一列を強制的に縦へ */
  align-items: flex-end;
  /* 右寄せ */
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
  /* 背景操作を邪魔しない */
}

#flash-container .flash {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  opacity: 0.96;
  white-space: normal;
  /* 長文は折り返す */
  word-break: break-word;
}

/* 色分け（既存があれば上書きされます） */

#flash-container .flash-notice {
  background: linear-gradient(135deg, #d7ecff, #a3d4ff);
  border: 1px solid #a3d4ff;
  color: #003366;
}

#flash-container .flash-alert {
  background: linear-gradient(135deg, #ffb3b3, #ff8080);
  border: 1px solid #ff9999;
  color: #ffffff;
}

#flash-container .flash.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.3s ease;
}

@media (max-width: 768px) {
  #flash-container {
    right: 8px;
    left: auto;
    width: min(420px, calc(100vw - 16px));
    max-width: min(420px, calc(100vw - 16px));
    align-items: flex-end;
  }
}

.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #fff0ea 0%, #ffdcd0 100%);
  padding: 2.5rem;
}

.auth-card {
  background: #ffffff;
  border: 3px solid #ffb8a8;
  border-radius: 20px;
  padding: 3rem 3.2rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.auth-card h2 {
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  font-weight: 800;
  color: #333;
}

.auth-card .field {
  margin-bottom: 1.2rem;
  text-align: left;
}

.auth-card label {
  font-weight: 600;
  color: #444;
  display: block;
  margin-bottom: 0.05rem;
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.8px solid #ffb8a8;
  border-radius: 10px;
  font-size: 1rem;
  background-color: #fff8f6;
  color: #333;
  transition: all 0.2s ease;
}

.auth-card input:focus {
  border-color: #ff8a70;
  box-shadow: 0 0 0 3px rgba(255, 138, 112, 0.25);
  outline: none;
  background-color: #fff;
}

.auth-card .actions {
  margin-top: 1.6rem;
}

.auth-card input[type="submit"] {
  background: linear-gradient(135deg, #ff9b85 0%, #ff6f5b 100%);
  color: white;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  transition: 0.3s;
}

.auth-card input[type="submit"]:hover {
  background: linear-gradient(135deg, #ff8570 0%, #ff5c47 100%);
  transform: translateY(-2px);
}

.auth-card .links {
  margin-top: 1.8rem;
  font-size: 0.95rem;
  line-height: 1.9;
}

.auth-card .links a {
  color: #ff6f5b;
  text-decoration: none;
  font-weight: 600;
  margin: 0 0.5rem;
  transition: color 0.2s ease;
}

.auth-card .links a:hover {
  text-decoration: underline;
  color: #ff4f3b;
}

.error_explanation {
  margin-bottom: 1rem;
  text-align: left;
}

.error_explanation h2 {
  font-size: 0.95rem;
  color: #d32f2f;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.error_explanation ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: #b71c1c;
  list-style-type: disc;
}

#error_explanation li {
  margin-bottom: 0.25rem;
}

.mypage-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.03em;
  transition: color 0.3s ease;
}

body.spring .mypage-title {
  color: #ec4899;
}

body.summer .mypage-title {
  color: #0ea5e9;
}

body.autumn .mypage-title {
  color: #f97316;
}

body.winter .mypage-title {
  color: #3b82f6;
}

.mypage-subtitle {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 2.5rem;
  color: #4b5563;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

body.spring .mypage-subtitle {
  color: #db2777;
}

body.summer .mypage-subtitle {
  color: #0369a1;
}

body.autumn .mypage-subtitle {
  color: #b45309;
}

body.winter .mypage-subtitle {
  color: #1d4ed8;
}

.mypage-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.action-btn {
  display: block;
  border-radius: 1.25rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.action-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.action-btn.green {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.action-btn.blue {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.action-btn.gray {
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.action-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.4rem;
}

.action-content p {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.action-content span {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  border-radius: 0.6rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.action-content span:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  color: #1f2937;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.action-btn:hover .action-icon {
  transform: scale(1.1) rotate(3deg);
}

.action-btn.green {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.action-btn.blue {
  background: linear-gradient(135deg, #ebf8ff, #cdeffd);
}

.action-btn.gray {
  background: linear-gradient(135deg, #e5e7eb, #d5d7db);
}

.action-btn.green .action-icon {
  background: radial-gradient(circle at 30% 30%, #bbf7d0, #86efac 70%);
}

.action-btn.blue .action-icon {
  background: radial-gradient(circle at 30% 30%, #cfefff, #93c5fd 70%);
}

.action-btn.gray .action-icon {
  background: radial-gradient(circle at 30% 30%, #d1d5db, #9ca3af 70%);
}

.action-btn.green span {
  background: linear-gradient(135deg, #34d399, #059669);
}

.action-btn.blue span {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}

.action-btn.gray span {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.action-btn.records {
  background: linear-gradient(135deg, #ffe4f3 0%, #ffd1f7 18%, #e4d4ff 36%, #d2e7ff 54%, #d4ffe9 72%, #fff0b3 88%, #ffd0e8 100%);
}

.action-btn.records .action-icon {
  background: radial-gradient(circle at 30% 30%, #ffd6ee, #f0abfc 70%);
}

.action-btn.records span {
  background: linear-gradient(135deg, #f472b6, #a855f7, #22d3ee);
}

.action-btn.cursor-default {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.calendar-container {
  max-width: 800px;
  width: 100%;
  margin: auto;
  background: #f8f2f2;
  border-radius: 25px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}

.calendar-container:hover {
  transform: translateY(-5px);
}

@keyframes petalFall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.petal {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  animation: petalFall 8s linear infinite;
  pointer-events: none;
  z-index: 2;
  opacity: 0.1;
}

body.spring .petal {
  background: radial-gradient(circle, #ffe0eb 0%, #ffb3c6 100%);
}

body.summer .petal {
  background: radial-gradient(circle, #fff9c4 0%, #ffecb3 100%);
}

body.autumn .petal {
  background: radial-gradient(circle, #ffe0b2 0%, #ffcc80 100%);
}

body.winter .petal {
  background: radial-gradient(circle, #e3f2fd 0%, #bbdefb 100%);
}

.flower-frame {
  position: relative;
  padding: 3.5rem;
  border-radius: 45px;
  animation: fadeIn 0.6s ease-out;
  overflow: visible;
  margin-bottom: 2rem;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

body.spring .flower-frame {
  background: radial-gradient(circle at 50% 50%, #fff0f6 0%, #ffe0eb 100%);
}

body.summer .flower-frame {
  background: radial-gradient(circle at 50% 50%, #e0faff 0%, #b2f1ff 100%);
}

body.autumn .flower-frame {
  background: radial-gradient(circle at 50% 50%, #fff5e0 0%, #ffd699 100%);
}

body.winter .flower-frame {
  background: radial-gradient(circle at 50% 50%, #f0faff 0%, #cfe9ff 100%);
}

.calendar-day {
  aspect-ratio: 1;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-weight: 600;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #fffdfb 0%, #fff3ef 100%);
  z-index: 5;
}

.no-post:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #fffaf8 0%, #ffece7 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.has-post {
  background: linear-gradient(135deg, #ffb3a4 0%, #ff9580 100%) !important;
  color: #fff;
  font-weight: 700;
  border: none;
  box-shadow:
    0 0 20px rgba(255, 150, 130, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.25);
  z-index: 6;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
  padding: 6px;
}

.has-post:hover {
  transform: scale(1.07);
}

.calendar-day.today {
  border: 2px solid #ffb3a4;
  background: linear-gradient(135deg, #fff9f7 0%, #ffe7e0 100%);
  color: #ff6b6b;
  font-weight: 800;
  z-index: 9;
  animation: glow-today-none 2s ease-in-out infinite alternate;
}

.has-post.today {
  background: linear-gradient(135deg, #ffb3a4 0%, #ff7050 100%) !important;
  color: #fff;
  font-weight: 900;
  border: none;
  box-shadow:
    0 0 40px rgba(255, 70, 40, 0.6),
    0 0 80px rgba(255, 90, 60, 0.7);
  animation: glow-today-post 2s ease-in-out infinite alternate;
  z-index: 12;
}

@keyframes glow-today-none {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(255, 200, 180, 0.2),
      0 0 22px rgba(255, 180, 150, 0.15);
  }

  50% {
    box-shadow:
      0 0 20px rgba(255, 180, 160, 0.3),
      0 0 28px rgba(255, 160, 140, 0.25);
  }
}

@keyframes glow-today-post {
  0%, 100% {
    box-shadow:
      0 0 60px rgba(255, 100, 70, 0.6),
      0 0 100px rgba(255, 60, 30, 0.7);
  }

  50% {
    box-shadow:
      0 0 80px rgba(255, 70, 40, 0.8),
      0 0 120px rgba(255, 40, 10, 0.9);
  }
}

.calendar-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: linear-gradient(135deg, #fff8f5 0%, #ffe4dc 100%);
  color: #333;
  border-radius: 14px;
  padding: 12px 14px;
  width: 250px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    inset 0 0 8px rgba(255, 200, 180, 0.3);
  border: 1px solid rgba(255, 160, 140, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 20;
}

.has-post:hover .calendar-tooltip,
.calendar-tooltip.active,
.calendar-tooltip:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.calendar-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: #ffe4dc transparent transparent transparent;
}

.calendar-day button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.legend-box {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #555;
}

.legend-color {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
}

.legend-item:nth-child(1) .legend-color {
  background: linear-gradient(135deg, #fffdfb 0%, #fff3ef 100%);
  border: 1px solid #e5e5e5;
}

.legend-item:nth-child(2) .legend-color {
  background: linear-gradient(135deg, #ffb3a4 0%, #ff9580 100%);
  border: 1px solid #ff9a8e;
}

.legend-item:nth-child(3) .legend-color {
  background: linear-gradient(135deg, #fff9f7 0%, #ffe7e0 100%);
  border: 2px solid #ffb3a4;
  animation: glow-today-none 2s ease-in-out infinite alternate;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- mobile ---- */

@media (max-width: 640px) {
  .flower-frame {
    padding: 1.4rem;
    border-radius: 28px;
    margin-bottom: 1.25rem;
  }

  .calendar-container {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .calendar-day {
    border-radius: 8px;
    font-size: 0.8rem;
  }

  .has-post {
    padding: 4px;
  }

  .calendar-tooltip {
    width: min(240px, calc(100vw - 32px));
    font-size: 12px;
    padding: 10px 12px;
  }

  .legend-box {
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    margin-top: 1.25rem;
  }

  .legend-color {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.45rem;
  }

  .legend-item {
    white-space: nowrap;
  }

  .petal {
    width: 12px;
    height: 12px;
    opacity: 0.08;
  }
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 投稿カード（手紙・便箋ベース） */

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #fffdf6 0%, #fff6e3 100%);
  border: 1px solid rgba(160, 120, 70, 0.22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(101, 74, 41, 0.14);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  cursor: pointer;
  animation: fadeIn 0.45s ease-out;
}

.post-card-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* 便箋の内枠（破線） */

.post-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(160, 120, 70, 0.22);
  border-radius: 16px;
  pointer-events: none;
}

/* ホバー */

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(101, 74, 41, 0.18);
}

/* ヘッダー */

.post-card-header {
  position: relative;
  z-index: 1;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  border-bottom: 1px dashed rgba(101, 74, 41, 0.24);
}

.post-card-header.future {
  background: linear-gradient(
    135deg,
    rgba(209, 250, 229, 0.95) 0%,
    rgba(167, 243, 208, 0.95) 100%
  );
  color: #047857;
}

.post-card-header.organize {
  background: linear-gradient(
    135deg,
    rgba(233, 213, 255, 0.95) 0%,
    rgba(216, 180, 254, 0.95) 100%
  );
  color: #6d28d9;
}

.post-card-header.thanks {
  background: linear-gradient(
    135deg,
    rgba(252, 231, 243, 0.95) 0%,
    rgba(251, 207, 232, 0.95) 100%
  );
  color: #be185d;
}

/* ボディ（便箋の罫線＋左綴じ帯） */

.post-card-body {
  position: relative;
  z-index: 1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  flex: 1 1 auto;
  min-height: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(220, 190, 150, 0.38) 1px,
    transparent 1px
  );
  background-size: 100% 28px;
  background-position: 0 18px;
}

/* テキストが帯の上に乗らないように */

.post-card-body > * {
  position: relative;
}

/* タイトル */

.post-title {
  font-size: 18px;
  font-weight: 800;
  color: #3d2c1c;
  margin-bottom: 10px;
  line-height: 1.4;
}

.post-content {
  color: #4b3a2a;
  font-size: 15px;
  line-height: 1.8;
  box-sizing: border-box;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  overflow-wrap: break-word;
  /* line clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  height: calc(1.8em * 3 + 16px + 0.2em);
}

/* フッター */

.post-card-footer {
  position: relative;
  z-index: 1;
  padding: 16px;
  border-top: 1px dashed rgba(101, 74, 41, 0.24);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  min-height: 72px;
  /* ボトム固定（本文量に依存しない） */
  margin-top: auto;
}

/* 投稿メタ */

.post-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-author {
  font-size: 13px;
  color: #7b6246;
  font-weight: 600;
}

.comment-status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1e40af;
  display: inline-block;
  border: 1px solid rgba(30, 64, 175, 0.12);
}

/* アクション */

.post-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 80px;
  min-height: 36px;
}

/* ボタン（統合） */

.comment-btn,
.flower-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(21, 128, 61, 0.18);
  background: linear-gradient(
    180deg,
    rgba(206, 244, 217, 0.95) 0%,
    rgba(186, 247, 208, 0.95) 100%
  );
  color: #166534;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.comment-btn span,
.flower-btn .flower-count {
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

.interaction-inactive {
  background: linear-gradient(180deg, rgba(245, 245, 245, 0.95) 0%, rgba(229, 231, 235, 0.95) 100%);
  color: #6b7280;
  border-color: rgba(107, 114, 128, 0.2);
}

.interaction-active {
  background: linear-gradient(180deg, rgba(206, 244, 217, 0.95) 0%, rgba(186, 247, 208, 0.95) 100%);
  color: #166534;
  border-color: rgba(21, 128, 61, 0.18);
}

/* ホバー（コメントは青寄せ、花は緑寄せで差を作る） */

.comment-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(224, 242, 254, 0.95) 0%,
    rgba(186, 230, 253, 0.95) 100%
  );
  color: #0369a1;
  border-color: rgba(3, 105, 161, 0.18);
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(56, 189, 248, 0.28);
}

.flower-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(220, 252, 231, 0.95) 0%,
    rgba(187, 247, 208, 0.95) 100%
  );
  color: #166534;
  border-color: rgba(22, 101, 52, 0.18);
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(34, 197, 94, 0.26);
}

/* ページネーション */

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}

.pagination a,
.pagination span {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(160, 120, 70, 0.22);
  font-weight: 700;
  font-size: 14px;
  color: #5a4732;
  background: linear-gradient(180deg, #ffffff 0%, #fff6e6 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pagination a:hover {
  background: linear-gradient(135deg, #fff0eb 0%, #ffe4db 100%);
  color: #b45309;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(180, 83, 9, 0.14);
}

.pagination .current {
  background: linear-gradient(135deg, #ffb3a4 0%, #ff9a8e 100%);
  color: #fff;
  border-color: rgba(255, 154, 142, 0.9);
  box-shadow: 0 6px 14px rgba(255, 154, 142, 0.28);
}

.pagination .disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* フィルタバー（紙の帯っぽい） */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fff6e6 100%);
  border-radius: 18px;
  border: 1px solid rgba(160, 120, 70, 0.18);
  box-shadow: 0 6px 18px rgba(101, 74, 41, 0.1);
  padding: 16px 24px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

/* フィルタバーの紙ハイライト */

.filter-bar::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0)
  );
  transform: rotate(-12deg);
  pointer-events: none;
}

/* フィルタボタン */

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  padding: 8px 18px;
  border: 1px solid rgba(160, 120, 70, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #5a4732;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
}

.filter-btn:hover {
  border-color: rgba(180, 83, 9, 0.35);
  color: #b45309;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(180, 83, 9, 0.12);
}

.filter-btn.active {
  background: linear-gradient(135deg, #ffb3a4 0%, #ff9a8e 100%);
  color: #fff;
  border-color: rgba(255, 154, 142, 0.9);
  box-shadow: 0 6px 14px rgba(255, 154, 142, 0.24);
}

/* ソート */

.sort-select {
  padding: 8px 16px;
  border: 1px solid rgba(160, 120, 70, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  color: #5a4732;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sort-select:hover,
.sort-select:focus {
  border-color: rgba(180, 83, 9, 0.35);
  outline: none;
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.12);
}

.filter-label {
  font-weight: 800;
  color: #4b3a2a;
  margin-right: 8px;
}

.card-ui {
  position: relative;
  border: 3px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

label .card-ui:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

label:has(input[value="future"]):hover .card-ui {
  border-color: #10b981;
}

label:has(input[value="organize"]):hover .card-ui {
  border-color: #8b5cf6;
}

label:has(input[value="thanks"]):hover .card-ui {
  border-color: #ec4899;
}

label:has(input[value="future"]:checked) .card-ui {
  border-color: #10b981;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
  transform: translateY(-5px);
}

label:has(input[value="organize"]:checked) .card-ui {
  border-color: #ccb6fe;
  background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
  transform: translateY(-5px);
}

label:has(input[value="thanks"]:checked) .card-ui {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.25);
  transform: translateY(-5px);
}

.card-ui:has(input:checked) {
  border-color: #fb923c;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.2);
  transform: translateY(-3px);
}

.opinion-radio:checked ~ .opinion-content {
  border-color: #ff9a8e !important;
  background: linear-gradient(135deg, #fff0eb 0%, #ffe4db 100%) !important;
  box-shadow: 0 4px 15px rgba(255, 154, 142, 0.3);
}

html.modal-open,
body.modal-open {
  overflow: hidden;
  height: 100%;
}

body.modal-open {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

/* ==============================
   overlay の器（背景は別ファイルで担当）
   - ここは「器 + 表示制御」のみ
============================== */

.loading-screen,
.completion-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 表示切り替え（JSで active を付け外し） */

.loading-screen.active {
  opacity: 1;
  pointer-events: all;
}

.completion-screen {
  transform: scale(0.99);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.completion-screen.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

/* ==============================
   投函アニメ本体（前面）
============================== */

.postbox-animation {
  position: relative;
  z-index: 2;
  width: 420px;
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(1.1);
  overflow: visible;
}

.postbox {
  position: relative;
  width: 240px;
  height: 330px;
  background: linear-gradient(180deg, #ff6250 0%, #c02929 95%);
  border-radius: 14px 14px 8px 8px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.3),
    inset 0 -5px 12px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(100, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1;
}

.postbox-slot {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 12px;
  background: linear-gradient(90deg, #2a2a2a 0%, #111 50%, #2a2a2a 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -3px 5px rgba(0, 0, 0, 0.8);
}

.postbox::after {
  content: "〒";
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.8rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

.letter {
  position: absolute;
  top: -360px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 100px;
  background: linear-gradient(135deg, #fff8f6 0%, #ffe4dc 100%);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  animation: letterInsert 2.3s ease-in-out forwards;
  z-index: 10;
}

.letter::after {
  content: "💌";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 44px;
}

@keyframes letterInsert {
  0% {
    top: -360px;
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }

  30% {
    top: -180px;
    transform: translateX(-50%) scale(1.1);
  }

  60% {
    top: -40px;
    transform: translateX(-50%) scale(1);
  }

  80% {
    top: 100px;
    opacity: 0.6;
  }

  100% {
    top: 260px;
    opacity: 0;
    transform: translateX(-50%) scale(0.9);
  }
}

.loading-text {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 700;
  color: #3b3b3b;
  letter-spacing: 0.05em;
  animation: pulse 1.5s ease-in-out infinite;
  z-index: 10;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ==============================
   投函後のコンテンツ（前面）
============================== */

.completion-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, #fffaf7 0%, #ffeae2 100%);
  border-radius: 30px;
  padding: 60px 50px;
  box-shadow: 0 10px 35px rgba(255, 150, 120, 0.25);
  text-align: center;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.completion-screen.active .completion-content {
  opacity: 1;
  transform: translateY(0);
}

.completion-content h1 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.completion-content p {
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 50px;
}

.completion-content .checkmark {
  width: 100px;
  height: 100px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
  animation: checkmarkPop 0.6s ease-out;
}

.completion-content .checkmark::after {
  content: "✓";
  font-size: 54px;
  color: white;
  font-weight: bold;
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.completion-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.action-card {
  width: 70%;
  max-width: 340px;
  background: linear-gradient(135deg, #ffd6c8 0%, #ffb7a2 100%);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 4px 15px rgba(255, 160, 130, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  text-decoration: none;
}

.action-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 25px rgba(255, 150, 120, 0.35);
}

.action-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
  .completion-content {
    padding: 24px 18px;
  }

  .checkmark {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
  }

  .checkmark::after {
    font-size: 36px;
  }

  .completion-content h1 {
    font-size: 1.3rem;
    margin-bottom: 6px;
  }

  .completion-content p {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }

  .completion-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
    max-width: 340px;
  }

  .completion-actions .action-card {
    width: 100%;
    padding: 10px 6px;
    border-radius: 14px;
  }

  .action-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    margin: 0 auto 6px;
  }

  .action-card h3 {
    font-size: 0.75rem;
    line-height: 1.2;
  }
}

/* 外枠（封筒/紙の台紙） */

.post-detail-card {
  animation: fadeInPostDetail 0.45s ease-out;
  background: linear-gradient(180deg, #fffdf6 0%, #fff6e3 100%);
  border: 1px solid rgba(160, 120, 70, 0.22);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(101, 74, 41, 0.16);
  position: relative;
  overflow: hidden;
}

/* 内枠（便箋の破線） */

.post-detail-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(160, 120, 70, 0.20);
  border-radius: 20px;
  pointer-events: none;
}

.post-edit-page {
  background: linear-gradient(
    180deg,
    #fffdf6 0%,
    #fff7e4 100%
  );
}

/* 編集カード自体も紙に馴染ませる */

.post-edit-page .bg-white {
  background: linear-gradient(
    180deg,
    #fffdf7 0%,
    #fff7e6 100%
  );
  border: 1px solid rgba(160, 120, 70, 0.22);
  box-shadow: 0 12px 28px rgba(101, 74, 41, 0.14);
}

/* 入力フォームを「便箋感」に */

.post-edit-page textarea,
.post-edit-page input[type="text"],
.post-edit-page input[type="date"],
.post-edit-page select {
  background-color: #fffdf7;
  border-color: rgba(160, 120, 70, 0.28);
}

/* フォーカス時も黄色トーン維持 */

.post-edit-page textarea:focus,
.post-edit-page input:focus,
.post-edit-page select:focus {
  outline: none;
  border-color: rgba(180, 83, 9, 0.45);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18);
}

/* ふわっと表示 */

@keyframes fadeInPostDetail {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:root {
  --c-bg: #e9f7ef;
  --c-surface: #f5fbf7;
  --c-border: #c8e6c9;
  --c-muted: #52796f;
  --c-accent: #81c784;
  --c-accent-hover: #66bb6a;
  --c-edit: #4caf50;
  --c-edit-hover: #388e3c;
  --c-danger: #ef5350;
  --c-danger-hover: #e53935;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --fade-in: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comments-section {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  animation: var(--fade-in);
}

.comments-section .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  animation: var(--fade-in);
}

.comment-content {
  color: var(--c-text);
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.6;
}

.comment-meta {
  font-size: 0.75rem;
  color: var(--c-muted);
  margin-top: 0.5rem;
}

.comment-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.comment-actions a,
.comment-actions button {
  font-size: 0.8rem;
  border-radius: 6px;
  padding: 4px 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.comment-actions .edit-btn {
  color: var(--c-edit);
  background: rgba(76, 175, 80, 0.1);
}

.comment-actions .edit-btn:hover {
  background: var(--c-edit-hover);
  color: #fff;
}

.comment-actions .delete-btn {
  color: var(--c-danger);
  background: rgba(239, 83, 80, 0.1);
}

.comment-actions .delete-btn:hover {
  background: var(--c-danger-hover);
  color: #fff;
}

.comment-form {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  animation: var(--fade-in);
}

.comment-form .form-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.comment-form textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  background: #fff;
  color: var(--c-text);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.3);
}

.comment-form .submit-btn {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 8px 20px;
  margin-top: 12px;
  transition: background 0.2s ease, transform 0.1s ease;
}

.comment-form .submit-btn:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}

.comment-form .login-required {
  text-align: center;
  color: var(--c-muted);
  padding: 16px 0;
  font-size: 0.9rem;
}

.comment-edit-form {
  background-color: #e9f7ef;
  border: 1px solid #c8e6c9;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  animation: fadeIn 0.6s ease-in-out both;
}

.edit-title {
  text-align: center;
  color: #1b5e20;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.edit-field {
  margin-bottom: 1.5rem;
}

.edit-textarea {
  width: 100%;
  border: 1px solid #c8e6c9;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1b5e20;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-textarea:focus {
  outline: none;
  border-color: #81c784;
  box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.3);
}

.edit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cancel-link {
  color: #2e7d32;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.cancel-link:hover {
  color: #1b5e20;
  text-decoration: underline;
}

.submit-btn {
  background: #66bb6a;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 20px;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 3px 8px rgba(102, 187, 106, 0.25);
}

.submit-btn:hover {
  background: #43a047;
  transform: translateY(-1px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#helpModal {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(32px, 6vw, 60px) 0;
  background: rgba(255, 230, 225, 0.18);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#helpModal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#helpModal .modal-content {
  position: relative;
  width: min(92%, 1000px);
  padding: clamp(28px, 4.6vw, 52px);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 245, 240, 0.96),
    rgba(255, 230, 220, 0.94)
  );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#helpModal.active .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body.modal-open {
  overflow: hidden;
  touch-action: none;
}

#helpModal .modal-x {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 24px);
  right: 24px;
  font-size: 30px;
  color: #ff6b6b;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

#helpModal .modal-x:hover {
  color: #ff4d4d;
}

/* ===== タイトル周り ===== */

#helpModal .help-title {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #ff8a7a;
}

#helpModal .help-lead {
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  margin: 0 auto 0.8rem;
  max-width: 52rem;
  line-height: 1.6;
  color: #6b7280;
}

#helpModal .help-note {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 600;
  margin: 0 auto clamp(1.6rem, 3.2vw, 2.4rem);
  max-width: 54rem;
  line-height: 1.6;
  color: #555;
}

/* ===== 箱カード ===== */

#helpModal .box-card {
  width: min(86%, 860px);
  margin: 0 auto clamp(28px, 4vw, 48px);
  border-radius: 20px;
  border: 3px solid #ffd6cc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  text-align: center;
}

/* 各箱テーマ背景 */

#helpModal .green-box {
  background: linear-gradient(
    135deg,
    rgba(220, 252, 231, 0.55),
    rgba(255, 255, 255, 0.95)
  );
}

#helpModal .purple-box {
  background: linear-gradient(
    135deg,
    rgba(237, 233, 254, 0.55),
    rgba(255, 255, 255, 0.95)
  );
}

#helpModal .pink-box {
  background: linear-gradient(
    135deg,
    rgba(252, 231, 243, 0.55),
    rgba(255, 255, 255, 0.95)
  );
}

#helpModal .box-slot {
  font-weight: 800;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(180deg, #ffb3a4, #ff9a8e);
}

#helpModal .box-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

#helpModal .icon-box.box-icon {
  font-size: 2.1rem;
}

#helpModal .box-title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 900;
  margin: 0;
}

#helpModal .green-box .box-title {
  color: #15803d;
}

#helpModal .purple-box .box-title {
  color: #6b46c1;
}

#helpModal .pink-box .box-title {
  color: #c53030;
}

/* 説明文とチェックリストの開始位置を揃える */

#helpModal .box-body {
  --text-block: min(760px, calc(100% - 56px));
}

/* 説明文（中央ブロック内で左揃え） */

#helpModal .box-description {
  width: var(--text-block);
  margin: 0 auto 16px;
  text-align: left;
  line-height: 1.5;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.15rem);
  color: #555;
}

/* ✓リスト：説明文と同じブロック幅＆同じ左端 */

#helpModal .box-features {
  width: var(--text-block);
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

#helpModal .feature-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  line-height: 1.35;
  font-weight: 600;
  font-size: clamp(0.98rem, 2vw, 1.05rem);
  color: #4b5563;
}

/* ✓（色付きのみ） */

#helpModal .feature-item::before {
  content: "✓";
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800;
}

#helpModal .green-box .feature-item::before {
  color: #16a34a;
}

#helpModal .purple-box .feature-item::before {
  color: #7e22ce;
}

#helpModal .pink-box .feature-item::before {
  color: #db2777;
}

/* 例ボックス */

#helpModal .example-box {
  margin-top: 16px;
  border-radius: 14px;
  padding: 12px 16px;
}

#helpModal .example-text {
  margin: 0;
  font-weight: 600;
  font-size: clamp(0.95rem, 2vw, 1rem);
  line-height: 1.6;
}

#helpModal .green-box .example-box {
  background: #dcf5e5;
  border: 1px solid #5ed189;
}

#helpModal .green-box .example-text {
  color: #14532d;
}

#helpModal .purple-box .example-box {
  background: #e9dbff;
  border: 1px solid #a77bff;
}

#helpModal .purple-box .example-text {
  color: #4b2999;
}

#helpModal .pink-box .example-box {
  background: #ffdbe2;
  border: 1px solid #ff8fa2;
}

#helpModal .pink-box .example-text {
  color: #8b1a2b;
}

/* リンク */

#helpModal .mypage-link {
  color: #ff6b6b;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 107, 107, 0.35);
  padding-bottom: 2px;
  transition: all 0.2s ease;
}

#helpModal .mypage-link:hover {
  color: #ff4d4d;
  border-bottom-color: rgba(255, 77, 77, 0.70);
}

@media (max-width: 768px) {
  #helpModal {
    padding: max(16px, env(safe-area-inset-top, 0px)) 0 calc(140px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }

  /* モーダルをよりワイドに */

  #helpModal .modal-content {
    width: 100%;
    padding: 18px 16px;
    border-radius: 18px;
    max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /* ボックスもワイドに */

  #helpModal .box-card {
    width: 100%;
    margin-bottom: 24px;
  }

  /* テキストブロック幅 */

  #helpModal .box-body {
    --text-block: min(100%, calc(100% - 16px));
  }

  /* タイトル */

  #helpModal .help-title {
    font-size: clamp(1.25rem, 4.2vw, 1.6rem);
  }

  /* リード文 */

  #helpModal .help-lead {
    font-size: clamp(0.75rem, 2.6vw, 0.85rem);
  }

  /* マイページ説明 */

  #helpModal .help-note {
    font-size: clamp(0.72rem, 2.4vw, 0.82rem);
  }

  /* 箱タイトル */

  #helpModal .box-title {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  }

  /* 説明文 */

  #helpModal .box-description {
    font-size: clamp(0.8rem, 2.6vw, 0.88rem);
  }

  /* ✓ リスト */

  #helpModal .feature-item {
    font-size: clamp(0.75rem, 2.4vw, 0.85rem);
    line-height: 1.32;
  }

  /* 例文 */

  #helpModal .example-text {
    font-size: clamp(0.72rem, 2.2vw, 0.8rem);
  }
}

/* 背景レイヤー */

#accountDeleteModal {
  display: none;
}

#accountDeleteModal.active {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

/* 中央カード */

#accountDeleteModal .modal-content {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

/* タブレット以上 */

@media (min-width: 640px) {
  #accountDeleteModal.active {
    padding: 32px;
  }

  #accountDeleteModal .modal-content {
    padding: 32px;
  }
}

/* PC以上 */

@media (min-width: 1024px) {
  #accountDeleteModal .modal-content {
    max-width: 520px;
    border-radius: 20px;
  }
}

.loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow: hidden;
  /* 白ベール＋淡いメタリックレインボー */
  background:
    /* 白いベール */
    linear-gradient(
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.35)
    ),
    /* 柔らかい金属ハイライト */
    radial-gradient(1000px 480px at 50% 18%,
      rgba(255,255,255,0.40) 0%,
      rgba(255,255,255,0.16) 35%,
      rgba(255,255,255,0.00) 70%
    ),
    /* さらに淡めレインボー */
    linear-gradient(
      120deg,
      #4a4e6a 0%,
      #ff9fd6 16%,
      #ffd7a8 30%,
      #fbffbf 44%,
      #a8fff0 58%,
      #a5d8ff 72%,
      #cbb8ff 86%,
      #ff9fd6 96%,
      #4a4e6a 100%
    );
  background-size: 100% 100%, 100% 100%, 360% 360%;
  background-position: 0 0, 50% 18%, 0% 50%;
  background-attachment: fixed;
  filter: saturate(1.04) contrast(1.05);
}

.loading-screen.active {
  opacity: 1;
  pointer-events: all;
  animation: loadingRainbowFlow 8s ease-in-out infinite;
}

.loading-screen .postbox-animation {
  position: relative;
  z-index: 3;
}

.loading-screen .warp-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.loading-screen.active .warp-layer {
  opacity: 1;
}

.loading-screen .warp-layer::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.16) 18%,
      rgba(255,255,255,0.00) 48%
    ),
    radial-gradient(circle at 50% 50%,
      rgba(120,170,255,0.18) 0%,
      rgba(255,140,200,0.10) 22%,
      rgba(0,0,0,0.00) 56%
    );
  filter: blur(6px);
  transform-origin: center;
  mix-blend-mode: screen;
  animation: warpPulse 2.6s ease-in-out infinite,
             warpRotate 6.5s linear infinite;
}

.loading-screen .warp-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0.00) 0deg,
      rgba(255,255,255,0.16) 6deg,
      rgba(255,255,255,0.00) 14deg,
      rgba(255,255,255,0.12) 22deg,
      rgba(255,255,255,0.00) 32deg,
      rgba(255,255,255,0.10) 42deg,
      rgba(255,255,255,0.00) 55deg,
      rgba(255,255,255,0.14) 64deg,
      rgba(255,255,255,0.00) 78deg,
      rgba(255,255,255,0.12) 92deg,
      rgba(255,255,255,0.00) 110deg,
      rgba(255,255,255,0.16) 126deg,
      rgba(255,255,255,0.00) 145deg,
      rgba(255,255,255,0.12) 162deg,
      rgba(255,255,255,0.00) 180deg,
      rgba(255,255,255,0.14) 196deg,
      rgba(255,255,255,0.00) 214deg,
      rgba(255,255,255,0.12) 232deg,
      rgba(255,255,255,0.00) 252deg,
      rgba(255,255,255,0.16) 270deg,
      rgba(255,255,255,0.00) 290deg,
      rgba(255,255,255,0.12) 312deg,
      rgba(255,255,255,0.00) 336deg,
      rgba(255,255,255,0.14) 360deg
    );
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 18%,
    rgba(0,0,0,0.10) 52%,
    rgba(0,0,0,0.00) 78%
  );
  mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 18%,
    rgba(0,0,0,0.10) 52%,
    rgba(0,0,0,0.00) 78%
  );
  mix-blend-mode: soft-light;
  opacity: 0.9;
  filter: blur(0.6px);
  transform-origin: center;
  animation: particlePull 1.8s ease-in-out infinite,
             particleSpin 5.2s linear infinite;
}

@keyframes loadingRainbowFlow {
  0%   {
    background-position: 0 0, 50% 18%, 0% 50%;
  }

  50%  {
    background-position: 0 0, 50% 18%, 100% 50%;
  }

  100% {
    background-position: 0 0, 50% 18%, 0% 50%;
  }
}

@keyframes warpPulse {
  0%   {
    opacity: 0.70;
    transform: scale(1.00);
  }

  50%  {
    opacity: 1.00;
    transform: scale(1.06);
  }

  100% {
    opacity: 0.70;
    transform: scale(1.00);
  }
}

@keyframes warpRotate {
  0%   {
    transform: rotate(0deg) scale(1.02);
  }

  100% {
    transform: rotate(360deg) scale(1.02);
  }
}

@keyframes particlePull {
  0%   {
    transform: scale(1.20);
    opacity: 0.65;
  }

  50%  {
    transform: scale(0.98);
    opacity: 0.95;
  }

  100% {
    transform: scale(1.20);
    opacity: 0.65;
  }
}

@keyframes particleSpin {
  0%   {
    transform: rotate(0deg) scale(1.15);
  }

  100% {
    transform: rotate(360deg) scale(1.15);
  }
}

@media (max-width: 768px) {
  .loading-screen {
    /* モバイルでは fixed 背景を避け、色変化を止めずに負荷を下げる */
    background-attachment: scroll;
    background-size: 100% 100%, 100% 100%, 260% 260%;
  }

  .loading-screen.active {
    animation-duration: 12s;
  }
}

.completion-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  opacity: 0;
  transform: scale(0.99);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  /* 不透明・穏やかな虹 */
  background: linear-gradient(
    120deg,
    #ff9a9e,
    #fbc2eb,
    #fcd5ce,
    #d5f5e3,
    #c7ceea,
    #e0c3fc
  );
  background-size: 300% 300%;
  background-position: 0% 50%;
}

/* active時のみ動かす */

.completion-screen.active {
  opacity: 1;
  pointer-events: all;
  animation: completionSoftRainbow 10s ease-in-out infinite;
}

/* やわらかい光レイヤー（不透明・ブレンドなし） */

.completion-screen::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.18), transparent 65%);
  filter: blur(40px);
  opacity: 0.6;
}

@keyframes completionSoftRainbow {
  0%   {
    background-position: 0% 50%;
  }

  50%  {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

.pointer-events-none{
  pointer-events: none;
}

.pointer-events-auto{
  pointer-events: auto;
}

.visible{
  visibility: visible;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.inset-0{
  inset: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.bottom-\[120\%\]{
  bottom: 120%;
}

.left-1\/2{
  left: 50%;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.top-4{
  top: 1rem;
}

.isolate{
  isolation: isolate;
}

.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-50{
  z-index: 50;
}

.z-\[10000\]{
  z-index: 10000;
}

.z-\[9999\]{
  z-index: 9999;
}

.col-span-full{
  grid-column: 1 / -1;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-4{
  margin-left: 1rem;
}

.ml-auto{
  margin-left: auto;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-auto{
  margin-top: auto;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.h-12{
  height: 3rem;
}

.h-2{
  height: 0.5rem;
}

.h-3{
  height: 0.75rem;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-full{
  height: 100%;
}

.max-h-\[45vh\]{
  max-height: 45vh;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

.min-h-screen{
  min-height: 100vh;
}

.w-12{
  width: 3rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-5{
  width: 1.25rem;
}

.w-60{
  width: 15rem;
}

.w-full{
  width: 100%;
}

.min-w-0{
  min-width: 0px;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-6xl{
  max-width: 72rem;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-none{
  max-width: none;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xl{
  max-width: 36rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.flex-grow{
  flex-grow: 1;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none{
  resize: none;
}

.resize{
  resize: both;
}

.list-inside{
  list-style-position: inside;
}

.list-disc{
  list-style-type: disc;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-1{
  gap: 0.25rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-y-auto{
  overflow-y: auto;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre-line{
  white-space: pre-line;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.break-words{
  overflow-wrap: break-word;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b-3xl{
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-t{
  border-top-width: 1px;
}

.border-dashed{
  border-style: dashed;
}

.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-green-100{
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
}

.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-600{
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-orange-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}

.border-orange-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}

.border-pink-200{
  --tw-border-opacity: 1;
  border-color: rgb(251 207 232 / var(--tw-border-opacity, 1));
}

.border-pink-300{
  --tw-border-opacity: 1;
  border-color: rgb(249 168 212 / var(--tw-border-opacity, 1));
}

.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-rose-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}

.border-rose-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}

.border-t-transparent{
  border-top-color: transparent;
}

.\!bg-sky-100{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1)) !important;
}

.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}

.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/40{
  background-color: rgb(240 253 244 / 0.4);
}

.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}

.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-pink-100{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-pink-400{
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}

.bg-pink-50{
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}

.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/70{
  background-color: rgb(255 255 255 / 0.7);
}

.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.\!bg-none{
  background-image: none !important;
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[\#fff8f5\]{
  --tw-gradient-from: #fff8f5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 248 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#fff9f7\]{
  --tw-gradient-from: #fff9f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 249 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#fffdfb\]{
  --tw-gradient-from: #fffdfb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 253 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-400{
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-300{
  --tw-gradient-from: #fdba74 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 186 116 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-400{
  --tw-gradient-from: #fb923c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500{
  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-50{
  --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-orange-400{
  --tw-gradient-to: rgb(251 146 60 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#ffe4dc\]{
  --tw-gradient-to: #ffe4dc var(--tw-gradient-to-position);
}

.to-\[\#ffe7e0\]{
  --tw-gradient-to: #ffe7e0 var(--tw-gradient-to-position);
}

.to-\[\#fff3ef\]{
  --tw-gradient-to: #fff3ef var(--tw-gradient-to-position);
}

.to-blue-500{
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.to-orange-50{
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.to-pink-300{
  --tw-gradient-to: #f9a8d4 var(--tw-gradient-to-position);
}

.to-pink-400{
  --tw-gradient-to: #f472b6 var(--tw-gradient-to-position);
}

.to-yellow-400{
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}

.p-0{
  padding: 0px;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pl-9{
  padding-left: 2.25rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pt-20{
  padding-top: 5rem;
}

.pt-24{
  padding-top: 6rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.font-\[\'Zen_Maru_Gothic\'\]{
  font-family: 'Zen Maru Gothic';
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.leading-none{
  line-height: 1;
}

.leading-relaxed{
  line-height: 1.625;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-orange-400{
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-pink-500{
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}

.text-pink-700{
  --tw-text-opacity: 1;
  color: rgb(190 24 93 / var(--tw-text-opacity, 1));
}

.text-pink-800{
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}

.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-rose-500{
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.line-through{
  text-decoration-line: line-through;
}

.no-underline{
  text-decoration-line: none;
}

.accent-green-500{
  accent-color: #22c55e;
}

.opacity-0{
  opacity: 0;
}

.opacity-60{
  opacity: 0.6;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline{
  outline-style: solid;
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter{
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:\!bg-sky-200:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(186 230 253 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-100\/50:hover{
  background-color: rgb(220 252 231 / 0.5);
}

.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pink-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-green-900:hover{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:shadow:hover{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:brightness-110:hover{
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:border-orange-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-orange-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity, 1));
}

.focus\:ring-orange-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity, 1));
}

.active\:scale-\[0\.99\]:active{
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:opacity-40:disabled{
  opacity: 0.4;
}

.peer:checked ~ .peer-checked\:border-orange-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-purple-400{
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:checked ~ .peer-checked\:ring-orange-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity, 1));
}

.peer:checked ~ .peer-checked\:ring-purple-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px){
  .sm\:max-h-\[55vh\]{
    max-height: 55vh;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:justify-end{
    justify-content: flex-end;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }
}

@media (min-width: 768px){
  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:max-w-4xl{
    max-width: 56rem;
  }

  .md\:max-w-5xl{
    max-width: 64rem;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px){
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}