/* ============================================================
   top-patch.css  … トップページ(index.html)の追加分
   index.html の <head> で style.css の「あと」に読み込みます。
   ============================================================ */

/* ---- 小見出し用フォント：大見出し(Dela Gothic One)はそのまま、小さい見出しは読みやすい丸ゴシックの極太に ---- */
:root { --font-heading: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif; }
.card__title, .shop-card__title, .about-card__text h3, .sns-box__title, .consult__title,
.quick-nav__en, .service__catch, .about-lead__tag {
  font-family: var(--font-heading); font-weight: 900; letter-spacing: .02em;
}
.card__title, .shop-card__title { line-height: 1.45; }

/* ---- キャラ2・キャラ3：同じ大きさ。ひとつの吹き出しが2人から同時に出る ---- */
.person-pair { position: relative; display: flex; align-items: flex-end; gap: 1.5em; --hide: calc(8.8 * .5em); cursor: pointer; }
.person-pair .person { --hide: calc(8.8 * .5em); }
.person-pair:hover .person__fig, .person-pair:focus-within .person__fig { transform: translateY(0); }
.pair__bubble {
  position: absolute; bottom: 100%; left: var(--mid, 50%);   /* --mid は js/top-patch.js が、2人の真ん中に合わせます */ margin-bottom: .6rem;
  transform: translateX(-50%) translateY(var(--hide));
  min-width: var(--span, 0px); text-align: center; box-sizing: border-box;
  background: #fff; color: var(--ink); border-radius: 999px; padding: .2em 1.2em;
  font-size: .78rem; font-weight: 900; white-space: nowrap;
  filter: drop-shadow(0 2px 0 rgba(29,43,46,.18));
  transition: transform .55s cubic-bezier(.2, 1.1, .3, 1.35);
}
.pair__bubble::before, .pair__bubble::after {      /* 2人それぞれに向かう、2つのしっぽ */
  content: ""; position: absolute; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg);
}
.pair__bubble::before { left: calc(50% + var(--d1, -26%)); }   /* キャラ2に向かうしっぽ */
.pair__bubble::after { left: calc(50% + var(--d2, 26%)); }     /* キャラ3に向かうしっぽ */
.person-pair:hover .pair__bubble, .person-pair:focus-within .pair__bubble { transform: translateX(-50%) translateY(0) scale(1.08); }
@media (max-width: 520px) { .person-pair .person:last-child { display: none; } .pair__bubble::after { display: none; } .pair__bubble::before { left: 50%; } }

/* ---- X(旧Twitter)のボックス ---- */
.sns-box__embed--x { display: block; min-height: 0; background: #fff; border-radius: 16px; overflow: hidden; }
.sns-box__embed--x .twitter-timeline { display: block; padding: 1em; font-weight: 700; }
.sns-box__link--x::before { content: "𝕏"; margin-right: .5em; }

/* ---- SHOP：準備中のカード（リンク未定） ---- */
.shop-card.is-soon { cursor: default; }
.shop-card.is-soon:hover { transform: none; }
.shop-card.is-soon .shop-card__btn { background: #9aa6a8; color: #fff; }


/* ============================================================
   雑誌ボタン：20秒たつと、右下にふわっと出て、画面に追従します
   ★出てくるまでの秒数 … 下の「20s」を変えてください
   ============================================================ */
.mag-float {
  position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 24px); z-index: 150;
  width: clamp(84px, 8vw, 116px);
  opacity: 0; visibility: hidden; translate: 0 26px; scale: .9;   /* 最初は見えない */
  animation: mag-float-in .9s cubic-bezier(.2, 1.1, .3, 1.3) 20s forwards;
}
.mag-float[hidden] { display: none; }
.mag-float .mag { position: static; display: block; width: 100%; right: auto; bottom: auto; }
.mag-float__close {
  position: absolute; top: -10px; right: -10px; z-index: 2; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: .95rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: background .25s;
}
.mag-float__close:hover { background: var(--red); }
@keyframes mag-float-in { to { opacity: 1; visibility: visible; translate: 0 0; scale: 1; } }
@media (max-width: 520px) { .mag-float { width: 76px; bottom: 10px; right: 10px; } }
@media (prefers-reduced-motion: reduce) { .mag-float { animation: mag-float-in .01s 20s forwards !important; } }

/* ============================================================
   「こんなご相談」：カラフルな雲型の吹き出し。「おもしろい仕事、相談する」ボタンに向かって、
   空想の吹き出しのように小さな丸が続きます（丸の向きは js/top-patch.js が自動で計算）
   ★色を変えるときは、下の --bc（吹き出しの色）と --fg（文字の色）を書き換えます
   ============================================================ */
.bubbles { max-width: 980px; gap: 50px 24px; }
.bubbles li {
  --bc: #86dfd2; --fg: #1d2b2e;
  position: relative; isolation: isolate; border: 0; color: var(--fg); background: var(--bc);
  padding: .65em 1.6em; border-radius: 999px; font-weight: 900; letter-spacing: .02em;
  filter: drop-shadow(0 3px 0 rgba(29, 43, 46, .16));
}
.bubbles li:nth-child(1) { --bc: #86dfd2; --fg: #1d2b2e; }
.bubbles li:nth-child(2) { --bc: #c8262d; --fg: #fff; }
.bubbles li:nth-child(3) { --bc: #f2b632; --fg: #1d2b2e; }
.bubbles li:nth-child(4) { --bc: #3f6fe0; --fg: #fff; }
.bubbles li:nth-child(5) { --bc: #f27fa6; --fg: #1d2b2e; }
.bubbles li:nth-child(6) { --bc: #4cae6a; --fg: #fff; }
.bubbles li:nth-child(7) { --bc: #f7941d; --fg: #1d2b2e; }
.bubbles li:nth-child(8) { --bc: #8b5fd0; --fg: #fff; }
.bubbles li:nth-child(9) { --bc: #1a9c8d; --fg: #fff; }
.bubbles li:nth-child(n+10) { --bc: #c5efe7; --fg: #1d2b2e; }
/* ボタンに向かう、小さな2つの丸（位置は js/top-patch.js が計算） */
.bubbles__dot { position: absolute; left: 0; top: 0; z-index: -1; width: 12px; height: 12px; border-radius: 50%; background: var(--bc); pointer-events: none; transform: translate(-50%, -50%); }
.bubbles__dot + .bubbles__dot { width: 7px; height: 7px; }