/* 長崎ツアーズ デザイントークン */
/* DESIGN_RULE.md §1 に対応 / renewal/css/tokens.css より移植 */

:root {
  /* ブランドカラー */
  --brand:    #849eed;
  --brand-d:  #6a82d6;
  --brand-bg: #eeeeff;

  /* CTAカラー */
  --coral:    #ff6b6b;
  --coral-d:  #e85555;

  /* サブカラー */
  --teal:     #4ecdc4;
  --yellow:     #f89518;

  /* ページ背景 */
  --cream:    #fffbf4;

  /* カードボーダー */
  --card-bd:  #ede8ff;

  /* テキスト */
  --text-h:   #2a2640;
  --text-b:   #5c5875;
  --text-m:   #9c98b8;
}

/* リセット */
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--text-h); }

/* テキストカラー ユーティリティ（Tailwind補完） */
.txt-h { color: var(--text-h); }
.txt-b { color: var(--text-b); }
.txt-m { color: var(--text-m); }
.txt-brand { color: var(--brand); }

/* スクロールバー非表示 */
.scroll-x { scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* カルーセル */
.carousel-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
}
.carousel-slide-text {
  bottom: 3rem;
}
#carouselDots {
  bottom: 2rem;
}
@media(min-width:768px) {
  .carousel-slide-text {
    bottom: 4rem;
  }
}

/* エリアボタン */
.area-btn {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #ddd8f5;
  background: #fff;
  color: var(--text-b);
  transition: all .15s;
  white-space: nowrap;
}
.area-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* アクティビティチェックボタン */
.act-btn input { display: none; }
.act-btn label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 2px solid #ddd8f5;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-b);
  background: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all .15s;
}
.act-btn input:checked + label {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* CTAボタン */
.btn-coral {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: #fff;
  font-weight: 900;
  border-radius: 999px;
}

/* セクション見出しアクセントライン */
.sec-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background: var(--brand);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

/* カード */
.card {
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 10px;
  overflow: hidden;
}

/* タグ */
.tag-brand  { background: var(--brand-bg); color: var(--brand); }
.tag-teal   { background: #e4f9f8;         color: var(--teal); }
.tag-coral  { background: #fff0f0;         color: var(--coral); }
.tag-yellow { background: #fffaeb;         color: #d97706; }
.tag-green  { background: #edfff0;         color: #22c55e; }
.tag-purple { background: #f5f0ff;         color: #8b7cf6; }

/* padding / margin */
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }