*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

:root{
  --ink: #0f1020;
  --bg: #6E75FF;
  --bg2: #6672ff;
  --text: #fff;
}

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP";
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, #7f86ff 0%, var(--bg) 35%, #5d64ff 100%) fixed;
  overflow-x: hidden;
}

.topbar{
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(8px, 1.5vw, 16px) clamp(14px, 3vw, 36px);
  z-index: 30;
}

.topbar .logo{
  font-family: "Lexend", system-ui, sans-serif; font-weight: 900; letter-spacing: .02em; opacity: .85;
}
.topbar .menu{
  background: rgba(255,255,255,.14); border: 0; color: #fff; padding: 8px 12px; border-radius: 999px;
  font-weight: 700; backdrop-filter: blur(6px); cursor: pointer;
}

#hero{
  position: relative; min-height: 100dvh; display: block; overflow: hidden; isolation: isolate;
}
.bubbles{ position: absolute; inset: -12vh -12vw; filter: url(#goo); z-index: 1; }
.bubble{
  position: absolute; will-change: transform, border-radius, background-color, opacity;
  opacity: .95; box-shadow: 0 12px 40px rgba(0,0,0,.12), inset 0 0 1px rgba(255,255,255,.25);
}

.center{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6; text-align: center; pointer-events: none;
}
.brand{
  margin: 0; font-family: "Lexend", system-ui, sans-serif; font-weight: 900; letter-spacing: -0.01em;
  line-height: 1.03; font-size: clamp(42px, 8.5vw, 124px);
  text-shadow: 0 2px 0 rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.2);
}
.sub{ margin-top: 10px; opacity: .9; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce){ .bubble{ transition: none !important; } }
@media (max-width: 720px){ .topbar{ padding: 10px 16px; } .topbar .logo{ font-size: 14px; } .sub{ font-size: 12px; } }

#hero::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 2px),
                    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay; opacity: .25; z-index: 2;
}

/* Sections */
.container{ width: min(1200px, 92vw); margin: 0 auto; }
.section-title{ font-family: "Lexend", system-ui, sans-serif; font-weight: 900; letter-spacing: .02em; font-size: clamp(22px, 3vw, 36px); margin: 0 0 22px; }
.apps{ position: relative; padding: clamp(36px, 6vw, 80px) 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.04) 100%); border-top: 1px solid rgba(255,255,255,.12); }
.grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 2.8vw, 28px); }
@media (max-width: 1120px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); border-radius: 18px;
  overflow: hidden; box-shadow: 0 10px 35px rgba(0,0,0,.25); backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,.35); background: rgba(255,255,255,.12); }
.thumb{ margin: 0; background: rgba(0,0,0,.25); aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; }
.thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body{ padding: 16px 16px 18px; }
.card-title{ font-family: "Lexend", system-ui, sans-serif; font-weight: 900; margin: 2px 0 6px; font-size: clamp(18px, 2.2vw, 22px); }
.meta{ opacity: .8; font-size: 12px; margin: 0 0 8px; }
.desc{ opacity: .95; font-size: 14px; line-height: 1.6; min-height: 2.6em; }
.btn{
  display: inline-block; margin-top: 12px; padding: 10px 14px; border-radius: 999px; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.45);
  text-decoration: none; transition: transform .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); }

/* Why */
.why{ padding: clamp(40px, 7vw, 96px) 0; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04)); border-top: 1px solid rgba(255,255,255,.12); }
.card.mini{ min-height: 0; }
.card.mini .card-body{ padding: 18px 18px 20px; }
.card.mini .card-title{ font-size: clamp(16px, 2.1vw, 20px); margin-bottom: 8px; }
.card.mini .desc{ font-size: 14px; }

/* FAQ */
.faq{ padding: clamp(36px, 6vw, 80px) 0; }
.faq-list{ display: grid; gap: 12px; }
.qa{ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; overflow: hidden; }
.qa > summary{ list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 800; letter-spacing: .02em; }
.qa > summary::-webkit-details-marker{ display: none; }
.qa > summary span{ opacity: .7; margin-right: .5em; }
.qa[open] > summary{ background: rgba(255,255,255,.06); }
.qa .a{ padding: 14px 16px 18px; line-height: 1.75; font-size: 14px; }

/* Libraries */
.libs{ padding: clamp(36px, 6vw, 80px) 0; }
.chips{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li{ border: 1px solid rgba(255,255,255,.45); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); padding: 8px 12px; border-radius: 999px; font-weight: 700; }
.note{ opacity: .85; font-size: 12px; margin-top: 12px; line-height: 1.7; }

/* Footer */
.site-footer{ border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: 18px 0; }
.footer-inner{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer-nav a{ color: #fff; text-decoration: none; margin-left: 14px; font-size: 14px; opacity: .9; }
.footer-nav a:hover{ text-decoration: underline; }
@media (max-width: 720px){ .footer-inner{ flex-direction: column; align-items: flex-start; } .footer-nav a{ margin-left: 0; margin-right: 14px; display: inline-block; } }

/* Terms page extras */
.page-hero{ padding-top: 96px; padding-bottom: 24px; }
.legal{ padding: 8px 0 64px; }
.terms h2{ margin: 22px 0 8px; font-family: "Lexend", system-ui, sans-serif; font-weight: 900; }
.terms p, .terms li{ line-height: 1.85; font-size: 15px; }
.terms ul{ padding-left: 1.1em; }

/* Helpers */
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; padding: 0; border: 0; margin: -1px; }
#apps{ scroll-margin-top: 72px; }

/* ---------- Link styles (yellow & readable) ---------- */
:root{
  --link: #FFD700;           /* gold/yellow */
  --link-hover: #FFF27A;     /* lighter yellow on hover */
  --link-underline: rgba(255,215,0,.72);
}
/* Global link color (buttons/menu/nav keep their own colors) */
a{
  color: var(--link);
  text-decoration-color: var(--link-underline);
  text-underline-offset: .18em;
}
a:visited{ color: var(--link); }
a:hover,
a:focus-visible{
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
  outline: none;
}

/* Footer © link (keep footer nav white as before) */
.site-footer small a{
  color: var(--link);
  text-decoration-color: var(--link-underline);
}
.site-footer small a:hover,
.site-footer small a:focus-visible{
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* ボタンがグローバルな a:visited の色に引っ張られないように */
.btn,
.btn:visited{
  color: #fff;
  text-decoration: none;
}

/* フラット黄色ボタン（アプリを開く専用） */
.btn--yellow,
.btn--yellow:visited{
  background: #FFD700;   /* flat yellow */
  color: #656af8;        /* 指定色 */
  border: none;
  text-decoration: none;
}

.btn--yellow:hover,
.btn--yellow:focus-visible{
  background: #FFE24D;   /* 少しだけ明るく */
}

/* MENU Panel (shared) */
.menu-panel{
  position: fixed;
  top: clamp(56px, 7vw, 72px);
  right: clamp(12px, 3vw, 24px);
  z-index: 100;
  min-width: 240px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.menu-inner{ padding: 10px; display: grid; gap: 6px; }
.menu-panel h3{
  margin: 6px 8px; font-size: 12px; opacity: .8; letter-spacing: .08em; text-transform: uppercase;
}
.menu-panel a{
  color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 10px; font-weight: 700;
}
.menu-panel a:hover{ background: rgba(255,255,255,.12); }

/* ロゴリンクは白・下線なし */
.topbar .logo,
.topbar .logo:visited{
  color: #fff;
  text-decoration: none;
}
.topbar .logo:hover,
.topbar .logo:focus-visible{
  text-decoration: none;
  opacity: .9;
}