/* ============================================================
   こぼたん共通スタイル (KOUBO NEXT mascot)
   使い方:
     <link rel="stylesheet" href="assets/kobotan.css">
     <div class="kobo" data-pose="pointing">
       <img src="assets/mascot/optimized/kobotan_pointing.webp" alt="こぼたん">
       <div class="kobo-bubble">無料プランから試せるよ！</div>
     </div>
   サイズ: kobo-sm / kobo-md(default) / kobo-lg / kobo-hero
============================================================ */

.kobo {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  vertical-align: middle;
}
.kobo > img {
  flex-shrink: 0;
  width: 120px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.kobo.kobo-sm > img  { width: 72px; }
.kobo.kobo-md > img  { width: 120px; }
.kobo.kobo-lg > img  { width: 200px; }
.kobo.kobo-hero > img{ width: 320px; }

/* 吹き出し */
.kobo-bubble {
  position: relative;
  background: #ffffff;
  border: 2px solid #fbbf24;
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #78350f;
  max-width: 260px;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.12);
  font-weight: 600;
  align-self: center;
}
.kobo-bubble::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: #fbbf24;
}
.kobo-bubble::after {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #ffffff;
}

/* 縦並び (画像下に吹き出し) */
.kobo.kobo-stack {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kobo.kobo-stack .kobo-bubble::before,
.kobo.kobo-stack .kobo-bubble::after {
  left: 50%;
  top: -12px;
  transform: translateX(-50%) rotate(90deg);
}
.kobo.kobo-stack .kobo-bubble::after {
  top: -8px;
}

/* 浮遊アニメ (subtle) */
@media (prefers-reduced-motion: no-preference) {
  .kobo-float > img {
    animation: kobo-float 4s ease-in-out infinite;
  }
}
@keyframes kobo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* 行動促進バナー (ページ全幅) */
.kobo-cta-banner {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
  color: #fff;
}
.kobo-cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 24px;
  text-align: center;
}
@media (min-width: 640px) {
  .kobo-cta-banner__inner {
    flex-direction: row;
    text-align: left;
  }
}
.kobo-cta-banner__img {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}
.kobo-cta-banner__title {
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0 0 6px;
}
.kobo-cta-banner__lead {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin: 0 0 14px;
}
.kobo-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #fff;
  color: #1d4ed8;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transition: transform .15s, background-color .15s;
}
.kobo-cta-banner__btn:hover {
  background: #eff6ff;
  transform: translateY(-1px);
}

/* モバイル: hero以外は自動で sm 相当に */
@media (max-width: 640px) {
  .kobo:not(.kobo-hero):not(.kobo-keep) > img { width: 80px; }
  .kobo-bubble { font-size: 12px; padding: 10px 12px; max-width: 200px; }
}

/* ============================================================
   ヘッダー統一 (index.html のスリムヘッダーに全ページを合わせる)
   旧Tailwindヘッダー (h-16 / w-9 h-9 ロゴ / テキストサブタイトル付き)
   を index と同じ 56px / font-size 0.8125rem に正規化する
============================================================ */
.site-header > .max-w-7xl,
.site-header > div.max-w-7xl,
.site-header > .max-w-screen-xl,
.site-header > div[class*="max-w-"] {
  height: 56px !important;
  min-height: 56px !important;
  max-width: 1200px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.site-header .h-16 { height: 56px !important; min-height: 56px !important; }

/* ロゴ（ヘッダー直下の最初の a のみ対象。nav内の"公募一覧"などは除外）*/
.site-header > div > a[href="index.html"] {
  gap: 10px !important;
  text-decoration: none !important;
}
.site-header > div > a[href="index.html"] > div:first-child,
.site-header > div > a[href="index.html"] > img {
  display: none !important;
}
.site-header > div > a[href="index.html"]::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('../favicon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.site-header > div > a[href="index.html"] .text-xs { display: none !important; }
.site-header > div > a[href="index.html"] .text-sm.font-black,
.site-header > div > a[href="index.html"] > div > div:first-child {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
}

/* ナビのフォント/余白統一 */
.site-header nav { gap: 28px !important; font-size: 0.8125rem !important; }
.site-header nav > a,
.site-header nav .dropdown > button {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #666 !important;
}
.site-header nav > a:hover,
.site-header nav .dropdown > button:hover { color: #1a1a1a !important; }
.site-header nav .dropdown > button.text-blue-600,
.site-header nav > a.text-blue-600,
.site-header nav > a.font-bold { color: #2563eb !important; font-weight: 700 !important; }
/* nav内のSVG（アイコン）も同じサイズに */
.site-header nav > a > svg { width: 10px !important; height: 10px !important; }