/* =========================================================
   Asobilog Brand Palette & Global Overrides (2025 refresh)
   ========================================================= */

/* ---- Brand palette -------------------------------------------------------- */
:root{
  /* Brand (ピンク) – 主旋律 */
  --brand:        #E94E9A;    /* ロゴのピンク */
  --brand-600:    #D73E8C;
  --brand-700:    #C4337E;
  --brand-soft:   #FBE3F0;
  --brand-ink:    #9C1E59;

  /* Support colors – ロゴ準拠（使いやすく微調整） */
  --asobi-blue:        #3FA9F5;
  --asobi-blue-soft:   #E7F3FC;
  --asobi-blue-ink:    #1565C0;

  --asobi-green:       #4CB050;
  --asobi-green-soft:  #E7F6EA;
  --asobi-green-ink:   #2E7D32;

  --asobi-orange:      #F7941D;
  --asobi-orange-soft: #FFF4E5;
  --asobi-orange-ink:  #E65100;

  --asobi-purple:      #9C27B0;
  --asobi-purple-soft: #F3E5F5;
  --asobi-purple-ink:  #6A1B9A;

  --asobi-yellow:      #FBC02D;
  --asobi-yellow-soft: #FFF6D5;
  --asobi-yellow-ink:  #8A6D00;

  --asobi-danger:      #DC3545;
  --asobi-danger-soft: #FDE2E2;
  --asobi-danger-ink:  #842029;

  --asobi-border:#E9EEF3;

  /* 旧コード互換 */
  --pink:   var(--brand);
  --green:  var(--asobi-green);
  --blue:   var(--asobi-blue);
  --orange: var(--asobi-orange);
  --purple: var(--asobi-purple);
  --yellow: var(--asobi-yellow);

  /* 互換のため pink-soft/ink も提供 */
  --asobi-pink-soft: var(--brand-soft);
  --asobi-pink-ink:  var(--brand-ink);
}

/* ---- Brand utilities ------------------------------------------------------ */
.bg-brand-soft{ background:var(--brand-soft)!important; color:var(--brand-ink)!important; }
.text-brand{ color:var(--brand)!important; }
.text-brand-ink{ color:var(--brand-ink)!important; }

/* 見出し帯（統一） */
.asobi-section-title{
  display:inline-flex; align-items:center;
  background:var(--brand); color:#fff;
  border-radius:999px;
  padding:.5em 1.2em; font-size:1.12rem; font-weight:700; line-height:1.1;
  gap:.5em; margin:0 0 1.2em 0;
}
.asobi-section-title .bi-stars{font-size:1.28em;margin-right:.5em;color:#FFE761;}

/* ---- Bootstrap overrides -------------------------------------------------- */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary{
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color:#fff;
}
a, .link-primary{ color:var(--brand); }
a:hover, .link-primary:hover{ color:var(--brand-600); }

/* ナビ hover/active */
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color:var(--brand-600); }
.navbar .nav-link.active{ color:var(--brand); font-weight:700; }

/* ページャー（統一） */
.page-link{ color:var(--brand-ink); border-color:rgba(0,0,0,.08); }
.page-link:hover{ background:var(--brand-soft); color:var(--brand-ink); }
.page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* バッジ（一覧右カラム用の色味調整） */
.badge.bg-success{ background-color:var(--asobi-green)!important; }
.badge.bg-danger{  background-color:var(--asobi-orange)!important; }

/* CTA & cards 微調整 */
.hero-actions .btn-lg{ border-radius:.75rem; box-shadow:0 8px 22px rgba(233,78,154,.22); }
.hero-actions .btn-outline-light{ border-width:2px; }
.card:hover{ box-shadow:0 10px 30px rgba(233,78,154,.12); }

/* ---- Soft background utilities (従来互換) --------------------------------- */
.bg-asobi-pink-soft    { background: var(--asobi-pink-soft)   !important; color: var(--asobi-pink-ink)   !important; }
.bg-asobi-green-soft   { background: var(--asobi-green-soft)  !important; color: var(--asobi-green-ink)  !important; }
.bg-asobi-blue-soft    { background: var(--asobi-blue-soft)   !important; color: var(--asobi-blue-ink)   !important; }
.bg-asobi-orange-soft  { background: var(--asobi-orange-soft) !important; color: var(--asobi-orange-ink) !important; }
.bg-asobi-purple-soft  { background: var(--asobi-purple-soft) !important; color: var(--asobi-purple-ink) !important; }
.bg-asobi-yellow-soft  { background: var(--asobi-yellow-soft) !important; color: var(--asobi-yellow-ink) !important; }
.bg-asobi-danger-soft  { background: var(--asobi-danger-soft) !important; color: var(--asobi-danger-ink) !important; }

/* 濃色テキストユーティリティ（互換） */
.text-asobi-pink-strong    { color: var(--asobi-pink-ink)   !important; }
.text-asobi-green-strong   { color: var(--asobi-green-ink)  !important; }
.text-asobi-blue-strong    { color: var(--asobi-blue-ink)   !important; }
.text-asobi-orange-strong  { color: var(--asobi-orange-ink) !important; }
.text-asobi-purple-strong  { color: var(--asobi-purple-ink) !important; }
.text-asobi-yellow-strong  { color: var(--asobi-yellow-ink) !important; }
.text-asobi-danger-strong  { color: var(--asobi-danger-ink) !important; }

/* タグ（badge風） */
.badge-recipe-tag{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  font-size:.85rem; margin:.15rem .25rem 0 0;
  background:var(--asobi-pink-soft); color:var(--asobi-pink-ink);
  border:1px solid #F5B9D4;
}
.badge-recipe-tag[data-hue="green"]  { background:var(--asobi-green-soft);  color:var(--asobi-green-ink);  border-color:#BFE3B6; }
.badge-recipe-tag[data-hue="blue"]   { background:var(--asobi-blue-soft);   color:var(--asobi-blue-ink);   border-color:#AEDDEA; }
.badge-recipe-tag[data-hue="orange"] { background:var(--asobi-orange-soft); color:var(--asobi-orange-ink); border-color:#F7CFA3; }
.badge-recipe-tag[data-hue="purple"] { background:var(--asobi-purple-soft); color:var(--asobi-purple-ink); border-color:#D5B6E3; }
.badge-recipe-tag[data-hue="yellow"] { background:var(--asobi-yellow-soft); color:var(--asobi-yellow-ink); border-color:#FBECA8; }
.badge-recipe-tag[data-hue="danger"] { background:var(--asobi-danger-soft); color:var(--asobi-danger-ink); border-color:#f5c2c7; }

/* セクション見出し（詳細ページ内の帯） */
.bg-asobi-orange-soft-header{ background:var(--asobi-orange-soft)!important; color:var(--asobi-orange-ink)!important; }
.bg-asobi-yellow-soft-header{ background:var(--asobi-yellow-soft)!important; color:var(--asobi-yellow-ink)!important; }

/* 他のあそびレシピボタン（詳細ページ下部） */
.btn-asobi-purple{ background-color:var(--asobi-purple-soft)!important; color:var(--asobi-purple-ink)!important; border:1px solid var(--asobi-purple-ink)!important; }
.btn-asobi-purple:hover{ background-color:var(--asobi-purple)!important; color:#fff!important; }

/* ====== Layout base ====== */
html,body{ margin:0; padding:0; }
body{
  background:#fafaff;
  font-family:'游ゴシック体','Yu Gothic','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
  color:#222; min-height:100vh; display:flex; flex-direction:column;
}
main.container{ flex:1 0 auto; }

/* Header（旧デザイン互換） */
header{ margin-top:2.5rem; margin-bottom:1.5rem; text-align:center; }
header img{ max-width:320px; width:100%; height:auto; margin-bottom:1.2rem; }
header p{ font-size:1.08rem; color:#7b848e; margin:1.5rem 0 .8rem; }

/* ====== Card system ====== */
.card{
  border-radius:12px; box-shadow:0 3px 12px rgba(180,180,200,.07);
  background:#fff; transition:box-shadow .22s, transform .22s; cursor:default;
  display:flex; flex-direction:column; min-height:100%; position:relative;
}
.card:hover{ transform:translateY(-3px) scale(1.02); }

/* 汎用タイトル（2行省略） */
.card .card-title{
  font-size:1rem; font-weight:bold; margin-bottom:.4rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; line-height:1.3; min-height:calc(1.3em*2);
  word-break:break-word;
}

/* 汎用本文（絶対配置フッター対策の下パディング想定） */
.card .card-body{ flex:1 1 auto; padding:12px 12px var(--card-footer-h); }

/* 汎用フッター（旧設計互換） */
.card .card-footer{
  position:absolute; right:12px; bottom:10px; padding:0;
  background:none; border:none; font-size:.93em; text-align:right;
}

/* 共通テキスト省略 */
.card .card-text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:3em;
}
@media (max-width:576px){
  .card .card-text{-webkit-line-clamp:3;}
  .card .card-title{-webkit-line-clamp:1; min-height:1.3em;}
}

/* サムネ共通 */
.card-img-top{ width:100%; height:180px; object-fit:cover; background:#eee; border-radius:10px 10px 0 0; }

/* イベント（旧：絶対配置フッター） */
.card-event{ min-height:110px; }
.card-event .card-body{ padding:14px 110px 14px 16px; }
.card-event .card-footer{ right:16px; bottom:12px; }
@media (max-width:576px){
  .card-event{ min-height:96px; }
  .card-event .card-body{ padding-right:96px; }
  .card-event .card-footer{ right:12px; bottom:10px; }
}

/* セクション余白 */
section.mb-4{ margin-bottom:1.5rem!important; }

/* カードリンク */
a.card-link{ display:block; height:100%; text-decoration:none; color:inherit; cursor:pointer; }
a.card-link:hover .card, .card-link:focus .card{
  box-shadow:0 10px 34px rgba(180,100,200,.18);
  transform:translateY(-4px) scale(1.03);
  transition:box-shadow .2s, transform .2s;
}

/* カルーセル */
.carousel-inner img:not(.no-media-img){
  width:100%; height:250px; object-fit:cover; border-radius:12px;
}
@media (max-width:768px){ .carousel-inner img:not(.no-media-img){ height:160px; } }

/* 2カラム補助 */
.row-cols-md-2 > .col{ display:flex; }
.card.h-100{ height:100%; min-height:135px; display:flex; flex-direction:column; }

/* メタ情報 */
.recipe-meta-row{ margin-top:1.5em; margin-bottom:2em; display:grid; grid-template-columns:1fr; gap:12px; align-items:start; }
@media (min-width:768px){ .recipe-meta-row{ grid-template-columns:1fr 1fr; gap:24px; } }
.recipe-meta-block{ text-align:left; margin:0; }
.recipe-meta-provider-label{ color:var(--pink); font-weight:bold; font-size:1em; margin-bottom:.35rem; }
.recipe-meta-provider-content{ font-weight:bold; font-size:1.07em; color:#333; margin:0; word-break:break-word; }
.recipe-meta-tag-label{ color:var(--green); font-weight:bold; font-size:1em; margin-bottom:.35rem; }
.recipe-meta-tags{ display:flex; flex-wrap:wrap; gap:6px 8px; }

/* ---- レシピ（index 小カード）自然配置 ---- */
.card-recipe{ display:flex; flex-direction:column; }
.card-recipe .card-link{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.card-recipe .recipe-thumb{ width:100%; height:160px; object-fit:cover; display:block; border-radius:10px 10px 0 0; }
.card-recipe .card-body{ flex:0 0 auto; padding:10px 12px 6px; }
.card-recipe .card-title{
  margin:0; line-height:1.35; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; min-height:auto;
}
.card-recipe .card-footer{ position:static; margin-top:.25rem; padding:.35rem .85rem; background:transparent; border:0; }
.card-recipe .card-footer .text-muted{ font-size:.85rem; }

/* ---- お知らせ（横型カード）自然配置 ---- */
.card-info{
  display:flex; gap:12px; align-items:flex-start; min-height:180px;
  padding:12px; background:#f9f9f9; border:none; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.card-info .info-thumb{ width:140px; height:88px; object-fit:cover; border-radius:8px; flex:0 0 auto; background:#eee; }
.card-info .card-body{ flex:1 1 auto; padding:10px 8px 6px; }
.card-info .card-title{ margin:0; line-height:1.35; font-size:1.02rem; }
.card-info .card-body p:last-child{ margin-bottom:0; }
.card-info .card-text{ line-height:1.45; color:#444; }
.card-info .card-footer{ position:static; margin-top:8px; padding:4px 0 0; background:transparent; border:0; }
.card-info .card-link{ text-decoration:none; color:inherit; }
.card-info .card-link:hover .card-title{ text-decoration:underline; }

/* 2行クランプ汎用 */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 埋め込み iframe サイズ補助 */
#carouselRecipeMedia .ratio > iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* ---- Navbar brand sizing / keep menu in one line ------------------------- */
.navbar-brand img{ height:64px; }
@media (max-width:576px){ .navbar-brand img{ height:56px; } }
.navbar .btn, .navbar .nav-link{ white-space:nowrap; }
@media (max-width:991.98px){
  .navbar-brand img{ height:52px; }
  .navbar .btn{ padding:.35rem .6rem; font-size:.92rem; }
  .navbar .nav-link{ padding-right:.4rem; padding-left:.4rem; }
  .navbar .btn + .btn, .navbar .btn + .dropdown, .navbar .dropdown + .btn{ margin-left:.4rem; }
}
@media (max-width:576px){ .navbar-brand img{ height:46px; } }

/* ---- Card spacing restore (Bootstrap friendly) --------------------------- */
.card{ border:1px solid rgba(0,0,0,.08); border-radius:.6rem; box-shadow:0 1px 1px rgba(0,0,0,.02); }
.card-header{ padding:.75rem 1rem!important; border-bottom:1px solid rgba(0,0,0,.05); font-weight:700; }
.card-body{ padding:1rem!important; }
.card-footer{ padding:.5rem 1rem!important; background:#fff; border-top:1px solid rgba(0,0,0,.05); }
.list-group-item{ padding:.75rem 1rem!important; }
.card + .card, .card:not(:first-child){ margin-top:1rem; }

/* タグ色味（一覧用：既存に寄せる） */
.badge-recipe-tag{ display:inline-block; padding:.25rem .55rem; border-radius:999px;
  font-size:.78rem; background:var(--asobi-green-soft); color:var(--asobi-green-ink); border:1px solid #BFE3B6;
}
.badge-recipe-tag[data-hue="blue"]   { background:var(--asobi-blue-soft);   color:var(--asobi-blue-ink);   border-color:#AEDDEA; }
.badge-recipe-tag[data-hue="orange"] { background:var(--asobi-orange-soft); color:var(--asobi-orange-ink); border-color:#F7CFA3; }
.badge-recipe-tag[data-hue="purple"] { background:var(--asobi-purple-soft); color:var(--asobi-purple-ink); border-color:#D5B6E3; }
.badge-recipe-tag[data-hue="pink"]   { background:var(--asobi-pink-soft);   color:var(--asobi-pink-ink);   border-color:#F5B9D4; }

/* ---- Event list cards（重なり防止・確実版） ------------------------------ */
.card.event-card .card-link{ display:flex; flex-direction:column; height:100%; }
.card.event-card .card-img-top{ aspect-ratio:16/9; object-fit:cover; }
.card.event-card .card-body{ flex:1 1 auto; padding:.75rem .75rem .5rem; }
.card.event-card .card-title{ font-size:1rem; line-height:1.3; margin:0 0 .25rem; }
.card.event-card .card-text{
  line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:calc(1em * 1.4 * 2); margin:0;
}
/* 自然配置フッター */
.card.event-card .card-footer{
  position:static!important; margin-top:auto; background:#fff;
  border-top:1px solid rgba(0,0,0,.08); padding:.5rem .75rem;
}
/* 旧構成を使う場合の保険 */
.card.event-card .card-body .text-muted.small{
  position:absolute; right:.75rem; top:.6rem; background:#fff; padding:0 .25rem; white-space:nowrap;
}
.card.event-card .card-body{ position:relative; padding-right:6.2rem; }
.card.event-card .card-title{ margin-right:6.2rem; }

/* ---- Info card（統一） ---------------------------------------------------- */
.info-card .card-link{ display:flex; flex-direction:column; height:100%; position:relative; }
.info-card .card-img-top{ aspect-ratio:16/9; object-fit:cover; }
.info-card .card-body{ flex:1 1 auto; padding:.75rem .75rem .5rem; }
.info-card .card-title{
  font-size:1rem; line-height:1.3; margin:0 0 .25rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.info-card .card-text{
  line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:calc(1em * 1.5 * 2); margin:0;
}
.info-card .card-footer{ margin-top:auto; background:#fff; border-top:1px solid rgba(0,0,0,.08); padding:.5rem .75rem; position:relative; }

/* ---- WYSIWYG safe -------------------------------------------------------- */
.post-body img, .post-body video, .post-body iframe{ max-width:100%; height:auto; display:block; }
.post-body table{ width:100%; max-width:100%; }
.post-body iframe{ width:100%; border:0; }
.post-body figure{ margin:0 0 1rem; }
.post-body *{ box-sizing:border-box; }

/* イベント詳細 */
.post-hero{ border:1px solid rgba(0,0,0,.06); border-radius:.6rem; overflow:hidden; background:#fff; margin-bottom:.75rem; }
.post-hero img{ width:100%; height:auto; object-fit:cover; aspect-ratio:16/9; }
.post-head{ background:var(--asobi-blue-soft); color:var(--asobi-blue-ink); padding:.6rem .9rem; font-weight:700; border-radius:.5rem; border:1px solid rgba(0,0,0,.06); margin-bottom:.75rem; }
.post-body{ line-height:1.8; }

/* 中央CTA（ロゴと重なり防止の質感） */
@media (min-width:992px){
  .navbar-cta .btn{ box-shadow:0 6px 18px rgba(0,0,0,.08); border-radius:.7rem; }
}

/* ---- Modal / Carousel controls ------------------------------------------- */
.carousel-control-prev,.carousel-control-next{ width:60px; }
.carousel-control-prev-icon,.carousel-control-next-icon{
  width:2.6rem; height:2.6rem; background-size:80% 80%; background-color:rgba(0,0,0,.45);
  border-radius:50%; filter:invert(1); box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:background-color .2s, transform .1s;
}
.carousel-control-prev-icon:hover,.carousel-control-next-icon:hover{ background-color:rgba(0,0,0,.65); transform:scale(1.06); }

#mediaModal .modal-dialog{ max-width:96vw; }
#mediaModal .modal-content{ background:rgba(0,0,0,.92); }
#mediaModal .btn-close{
  position:absolute; top:.5rem; right:.5rem; z-index:1056; filter:invert(1);
  background-color:rgba(0,0,0,.4); border-radius:50%; width:2rem; height:2rem;
}
#mediaModal .carousel-control-prev,#mediaModal .carousel-control-next{ width:60px; }
#mediaModal .carousel-control-prev-icon,#mediaModal .carousel-control-next-icon{
  width:2.8rem; height:2.8rem; background-size:80% 80%; background-color:rgba(0,0,0,.45); border-radius:50%; filter:invert(1);
}
#mediaModal .carousel-control-prev-icon:hover,#mediaModal .carousel-control-next-icon:hover{ background-color:rgba(0,0,0,.65); }

/* NO IMAGE（モーダル内） */
@media (max-width:576px){ .no-media-img{ max-width:85vw; max-height:50vh; } }

/* NO IMAGE プレースホルダー */
.no-media-box{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:#eef0f4; border-radius:.5rem;
}
.no-media-box .no-media-img{ max-width:65%; max-height:70%; object-fit:contain; display:block; }

/* 実メディアは前面に */
.carousel-item img,.carousel-item video{ position:relative; z-index:1; }
#carouselRecipeMedia .ratio > img,#carouselRecipeMedia .ratio > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#carouselRecipeMedia .ratio > img{ display:block; }

/* アクセシビリティ */
a.card-link:focus-visible .card{ outline:3px solid rgba(74,179,207,.7); outline-offset:2px; }

/* 低モーション */
@media (prefers-reduced-motion:reduce){
  .card{ transition:none; }
  a.card-link:hover .card, .card-link:focus .card{ transform:none; box-shadow:0 3px 12px rgba(180,180,200,.07); }
}

/* ===== restore: Bootstrap primary CSS vars (brand binding) ===== */
:root{
  --bs-primary: var(--brand);
  --bs-primary-rgb: 233, 78, 154; /* #E94E9A */
}

/* ===== restore: footer ===== */
footer{
  color:#888;
  background:transparent;
  border-top:1px solid #eee;
  margin-top:2.5rem;
  padding-top:1.2rem;
  font-size:.96em;
}

/* ===== restore: recipe_detail title nav ===== */
.title-nav{display:flex;align-items:center;gap:.75rem;}
.title-nav a,.title-nav .title-nav-spacer{flex:0 0 auto;}
.title-nav .title-clamp{
  flex:1 1 auto; text-align:center; line-height:1.25; margin:0;
  word-break:break-word; overflow-wrap:anywhere;
  font-size:clamp(1.25rem,2.2vw,2.1rem); max-width:min(100%,1100px); margin-inline:auto;
}
.title-nav-spacer{width:44px;height:44px;display:inline-block;}
.title-nav-icon{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;border-radius:50%;line-height:1;white-space:nowrap;
}
.title-nav-icon .bi{font-size:1.25rem;}
@media (min-width:576px){
  .title-nav-icon{padding:.5rem .8rem;width:auto;height:44px;border-radius:999px;gap:.25rem;}
}
@media (min-width:768px){
  .title-nav .title-clamp{font-size:clamp(1.1rem,1.9vw,2rem);}
}

/* 下部ナビ */
.title-nav-bottom{display:flex;align-items:center;gap:.75rem;}
.title-nav-bottom .title-nav-spacer{flex:1 1 auto;}
@media (min-width:576px){.title-nav-bottom{justify-content:space-between;}}
@media (max-width:575.98px){.title-nav-bottom{justify-content:center;}.title-nav-bottom .title-nav-spacer{display:none;}}

/* ===== restore: NO IMAGE (card) ===== */
.card.no-image .card-img-top{
  background:#ddd;
  display:flex;justify-content:center;align-items:center;
  color:#aaa;font-size:1.5rem;
}

/* ===== restore: section divider ===== */
.section-intro{ border-top:1px solid #e9ecef; }

/* ===== restore: legacy custom buttons (used on older pages) ===== */
.btn-event{
  background:var(--brand); color:#fff!important;
  border-radius:30px; font-weight:bold;
}
.btn-event:hover{ background:var(--brand-600); }

.btn-howto{
  background:var(--asobi-green); color:#fff!important;
  border-radius:30px; font-weight:bold;
}
.btn-howto:hover{ background:#3c8a41; }

.btn-info{
  background:var(--asobi-purple); color:#fff!important;
  border-radius:30px; font-weight:bold;
}
.btn-info:hover{ background:#7c408a; }

/* 小さな色リボン（上辺だけ） */
.ribbon--pink   { border-top:4px solid var(--brand); }
.ribbon--orange { border-top:4px solid var(--asobi-orange); }
.ribbon--green  { border-top:4px solid var(--asobi-green); }
.ribbon--blue   { border-top:4px solid var(--asobi-blue); }
.ribbon--purple { border-top:4px solid var(--asobi-purple); }

/* ハイライト点灯（星などのアイコン着色） */
.text-yellow { color: var(--asobi-yellow)!important; }