@charset "UTF-8";
/* ============================================================
   トラトラ 本体サイト v3「ワクワク調」
   v2（service.css）の配置・余白はそのまま、
   20 代女性ターゲットに向けて色と遊びを足すオーバーライド。
   方針：ダークトーンの背景を使わない / 公式ロゴの
   オレンジ × スカイブルー（+ ピンク）をアクセントに
   ============================================================ */
/* enqueued directly */

:root {
  --pink-400: #F472B6;
  --pink-100: #FCE7F3;
  --sky-400: #38BDF8;
  --sky-100: #E0F2FE;
  --amber-200: #FDE68A;
  --cream: #FFF9F2;
}

/* ============ ロゴ ============ */
.logo-img { height: 46px; width: auto; display: block; }

/* ============ 見出しラベル：2 色ドット ============ */
.eyebrow::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 10px; vertical-align: 1px;
  background: linear-gradient(135deg, var(--orange-500), var(--pink-400));
}

/* ============ ヒーロー：マーカー・ブロブ・マスコット ============ */
.hero { position: relative; z-index: 0; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -110px; right: -70px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sky-100), rgba(224,242,254,0) 70%);
}
.hero::after {
  content: ''; position: absolute; z-index: -1;
  bottom: 40px; left: -90px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, var(--orange-50), rgba(255,247,237,0) 70%);
}
.hero h1 .accent {
  color: var(--orange-600);
  background: linear-gradient(transparent 62%, var(--amber-200) 62%);
  padding: 0 4px;
}
.hero-photo img { border-radius: 24px; }
.hero-photo .hero-mascot {
  position: absolute; top: -34px; right: 24px;
  width: 84px; height: 84px; object-fit: contain; border-radius: 0;
  transform: rotate(6deg);
  filter: drop-shadow(0 6px 14px rgba(28,25,23,0.14));
}
.hero-event-card {
  transform: rotate(-1.6deg); border-color: #FFE1C4;
  transition: transform 0.2s ease;
}
.hero-event-card:hover { transform: rotate(0deg); }

/* ============ スタッツ：カラードット ============ */
.stat .l::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 7px;
}
.stat:nth-child(1) .l::before { background: var(--orange-500); }
.stat:nth-child(2) .l::before { background: var(--sky-400); }
.stat:nth-child(3) .l::before { background: var(--pink-400); }
.stat:nth-child(4) .l::before { background: #F59E0B; }

/* ============ 3 本柱：カラフルな罫線と番号 ============ */
.svc { border-top-width: 3px; }
.svc:nth-child(1) { border-top-color: var(--orange-500); }
.svc:nth-child(2) { border-top-color: var(--sky-400); }
.svc:nth-child(3) { border-top-color: var(--pink-400); }
.svc:nth-child(2) .num { color: var(--sky-400); }
.svc:nth-child(3) .num { color: var(--pink-400); }

/* ============ ビザ認知バンド：ダーク → 明るいワクワクへ ============ */
.dark-band {
  background: linear-gradient(120deg, var(--orange-50) 0%, #FFE9D6 48%, var(--pink-100) 100%);
  color: var(--ink-900);
  position: relative; overflow: hidden;
}
.dark-band::before {
  content: ''; position: absolute; top: -70px; right: -50px;
  width: 240px; height: 240px; border-radius: 50%;
  border: 34px solid rgba(255,255,255,0.55);
}
.dark-band::after {
  content: ''; position: absolute; bottom: 26px; left: 4%;
  width: 150px; height: 90px; opacity: 0.4;
  background-image: radial-gradient(var(--pink-400) 2px, transparent 2.6px);
  background-size: 18px 18px;
}
.dark-band .container { position: relative; z-index: 1; }
.dark-band .eyebrow { color: var(--orange-600); }
.dark-band h2 { color: var(--ink-900); }
.dark-band p { color: var(--ink-700); }
.dark-note { color: var(--ink-500); }

/* ============ イベント：ホバーを温かく ============ */
.event-row:hover { background: var(--orange-50); }
.tag.free { border-color: #F9A8D4; background: var(--pink-50, #FDF2F8); color: #BE185D; }

/* ============ eSIM / オフィスバンド：ほんのり暖色 ============ */
.band-warm { background: var(--cream); border-color: #FFE9D8; }
.plan-card { border-color: #FFE1C4; }
.badge-plain { background: var(--orange-50); }

/* ============ アプリストリップ ============ */
.app-strip { background: #FFFBEB; border-color: #FCD34D; }

/* ============ 最後の CTA：オレンジ → ピンクの明るいグラデ ============ */
.cta-final {
  background: linear-gradient(120deg, #FB923C 0%, var(--orange-500) 55%, var(--pink-400) 140%);
  position: relative; overflow: hidden;
}
.cta-final::before {
  content: ''; position: absolute; top: 20px; left: 5%;
  width: 160px; height: 90px; opacity: 0.22;
  background-image: radial-gradient(#fff 2px, transparent 2.6px);
  background-size: 18px 18px;
}
.cta-final::after {
  content: ''; position: absolute; bottom: -60px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 28px solid rgba(255,255,255,0.25);
}
.cta-final .container { position: relative; z-index: 1; }

/* ============ フッター：ダーク → ライトへ ============ */
.sv-footer {
  background: var(--cream);
  color: var(--ink-500);
  border-top: 1px solid #FFE9D8;
}
.sv-footer h4 { color: var(--ink-900); }
.sv-footer .f-links a { color: var(--ink-500); }
.sv-footer .f-links a:hover { color: var(--orange-600); }
.f-company { color: var(--ink-500); }
.legal { color: var(--ink-500); }
.copyright { border-top: 1px solid #FFE9D8; color: var(--ink-500); }

/* ============ レスポンシブ微調整 ============ */
@media (max-width: 960px) {
  .hero-photo .hero-mascot { width: 64px; height: 64px; top: -24px; right: 14px; }
}