/* =========================
   Theme tokens
   ========================= */
:root{
  --bg:#060916;
  --bg2:#070b1b;

  --bgGrad:
    radial-gradient(1200px 700px at 20% 10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(250,204,21,.12), transparent 55%),
    radial-gradient(900px 650px at 70% 90%, rgba(167,139,250,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));

  --surface: rgba(255,255,255,.04);
  --surface2: rgba(255,255,255,.06);
  --card: rgba(255,255,255,.05);
  --card2: rgba(0,0,0,.12);

  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.08);

  --ink:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.56);

  --shadow:0 18px 60px rgba(0,0,0,.45);
  --shadow2:0 12px 40px rgba(0,0,0,.32);

  --radius:22px;
  --radius2:18px;

  --accent:#facc15;  /* ひよこ */
  --sky:#38bdf8;     /* 空色 */
  --lav:#a78bfa;     /* 紫 */
  --good:#22c55e;
  --danger:#ff5a5a;

  --lineGreen:#06c755;
  --teal:#11b6a3;

  --max:1120px;
}

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--ink);
  background: var(--bgGrad);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

.accent-yellow{ color:rgba(250,204,21,.95); }
.accent-sky{ color:rgba(56,189,248,.95); }
.soft{ opacity:.95; }

.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.mt-34{ margin-top:34px; }

/* =========================
   Header / Nav
   ========================= */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(6,9,22,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:800;
  letter-spacing:.02em;
}
.logo{
  width:38px; height:38px; border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(135deg, rgba(250,204,21,.95), rgba(56,189,248,.65));
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
}
.brand small{
  display:block; font-weight:600; color:var(--muted2);
  letter-spacing:.01em; margin-top:2px;
}
.menu{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.menu a{
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
  transition:.18s ease;
  font-weight:650;
  font-size:14px;
}
.menu a:hover{
  color:var(--ink);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.nav-cta{ display:flex; align-items:center; gap:10px; }

/* =========================
   Buttons / Pills
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--ink);
  font-weight:800;
  box-shadow: var(--shadow2);
  transition:.18s ease;
  white-space:nowrap;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.08); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  border-color: rgba(250,204,21,.35);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(135deg, rgba(250,204,21,.92), rgba(56,189,248,.78));
  color:#07101a;
}
.btn-primary:hover{ filter:saturate(1.05) brightness(1.02); }

.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.18);
  color:var(--ink);
  box-shadow:none;
}

.btn-line{
  border-color: rgba(6,199,85,.40);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(135deg, rgba(6,199,85,.96), rgba(17,182,163,.78));
  color:#06110a;
}
.btn-line:hover{ filter:saturate(1.05) brightness(1.02); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-weight:750;
  font-size:13px;
}
.pill-warm{ border-color: rgba(250,204,21,.22); background: rgba(250,204,21,.08); }
.pill-cool{ border-color: rgba(56,189,248,.22); background: rgba(56,189,248,.08); }

/* =========================
   Hero
   ========================= */
.hero{ padding:56px 0 26px; position:relative; }
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
}

.hero-left{
  padding:26px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-left::after{
  content:"";
  position:absolute; inset:auto -60px -60px auto;
  width:220px; height:220px;
  background: radial-gradient(circle at 35% 35%, rgba(250,204,21,.26), transparent 62%);
  filter: blur(6px);
  transform: rotate(10deg);
  pointer-events:none;
}
.kicker{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }

.hero h1{
  margin:12px 0 10px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height:1.15;
  letter-spacing:.01em;
}
.hero p.lead{
  margin:0;
  color:var(--muted);
  font-weight:650;
  font-size: clamp(15px, 1.45vw, 17px);
  line-height:1.75;
  max-width: 58ch;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

.micro{
  margin-top:14px;
  color:var(--muted2);
  font-size:13px;
  line-height:1.6;
}

.hero-right{ display:grid; gap:18px; align-content:start; }

.hero-card{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.hero-card .top{
  padding:18px 18px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
.ai-gateway{
  padding:6px 18px 18px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight:900;
  letter-spacing:.06em;
  color: rgba(255,66,66,.92);
  text-shadow: 0 10px 28px rgba(255,66,66,.22);
}

/* =========================
   Audio Player
   ========================= */
.player{
  padding:14px 16px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:10px;
}
.player-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.play-btn{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:.18s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  user-select:none;
}
.play-btn:hover{ background: rgba(255,255,255,.10); transform:translateY(-1px); }

.track{
  flex:1;
  min-width: 220px;
  display:grid;
  gap:6px;
}
.track strong{ font-size:14px; }
.track span{ font-size:12.5px; color:var(--muted2); }
.bar{
  height:10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar > i{
  display:block; height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(250,204,21,.9), rgba(56,189,248,.9));
  border-radius:999px;
  transition: width .1s linear;
}
.player-note{ font-size:12.5px; color:var(--muted2); }

/* =========================
   Sections
   ========================= */
section{ padding:64px 0; }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.section-head h2{
  margin:0;
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing:.01em;
}
.section-head p{
  margin:0;
  color:var(--muted);
  font-weight:650;
  max-width: 70ch;
  line-height:1.7;
}

/* =========================
   Story
   ========================= */
.story{ padding-top:44px; }
.story-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width: 980px){
  .story-grid{ grid-template-columns:1fr; }
}
.story-quote{
  padding:26px;
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.story-quote::before{
  content:"";
  position:absolute; inset:auto -100px -120px auto;
  width:320px; height:320px;
  background: radial-gradient(circle at 35% 35%, rgba(167,139,250,.18), transparent 65%);
  filter: blur(10px);
  transform: rotate(-12deg);
  pointer-events:none;
}
.story-quote h3{
  margin:0 0 12px;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height:1.15;
  letter-spacing:.01em;
}
.story-quote h3 .hi{
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(56,189,248,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.story-quote p{
  margin:0;
  color:var(--muted);
  font-weight:650;
  line-height:1.85;
  font-size:16px;
  max-width: 70ch;
}
.story-quote .line{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  color:var(--muted);
  font-weight:700;
  line-height:1.7;
}
.story-side{ display:grid; gap:14px; align-content:start; }

.mini-card{
  padding:18px;
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}
.mini-card strong{ display:block; margin-bottom:8px; }
.mini-card p{ margin:0; color:var(--muted); line-height:1.75; font-weight:650; }

/* =========================
   Owner
   ========================= */
.owner{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.owner-grid{
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width: 980px){
  .owner-grid{ grid-template-columns:1fr; }
}
.owner-photo{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height: 320px;
  display:flex; align-items:flex-end;
}
.owner-photo img{
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
  opacity:.92;
  filter: saturate(1.02) contrast(1.02);
}
.owner-badge{
  position:relative;
  margin:18px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(6,9,22,.62);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  color:var(--ink);
  font-weight:800;
  line-height:1.4;
}
.owner-badge-sub{ color:rgba(234,240,255,.72); font-weight:700; }
.owner-text{
  padding:22px;
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}
.owner-text p{ margin:0 0 12px; color:var(--muted); font-weight:650; line-height:1.85; }
.owner-text p:last-child{ margin-bottom:0; }
.steps{
  display:grid;
  gap:10px;
  margin:14px 0;
  padding:0;
  list-style:none;
}
.steps li{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: var(--card2);
}
.num{
  width:28px; height:28px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(250,204,21,.85), rgba(56,189,248,.75));
  color:#07101a;
  flex:0 0 auto;
  margin-top:2px;
}
.steps strong{ display:block; margin-bottom:2px; }
.steps span{ color:var(--muted2); font-weight:650; line-height:1.65; }
.owner-final{ margin-top:14px; color:rgba(234,240,255,.86); font-weight:800; }

/* =========================
   Services
   ========================= */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}
@media (max-width: 980px){
  .services-grid{ grid-template-columns:1fr; }
}
.card{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-120px auto auto -140px;
  width:260px; height:260px;
  background: radial-gradient(circle at 40% 40%, rgba(56,189,248,.14), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.card h3{ margin:0 0 8px; font-size:18px; letter-spacing:.01em; }
.card p{ margin:0; color:var(--muted); font-weight:650; line-height:1.75; }
.card .meta{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
.link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transition:.18s ease;
  white-space:nowrap;
}
.link:hover{ transform:translateY(-1px); background: rgba(255,255,255,.08); }
.tag{
  font-size:12.5px;
  color:var(--muted2);
  font-weight:750;
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.10);
}

/* =========================
   Divider
   ========================= */
.section-divider{
  height:1px;
  background: rgba(148,163,184,.30);
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
  margin: 28px 0;
}

/* =========================
   Sellless box
   ========================= */
.sellless-box{
  margin:18px 0 10px;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255, 90, 90, .24);
  background:
    radial-gradient(500px 220px at 15% 20%, rgba(255, 90, 90, .12), transparent 60%),
    radial-gradient(520px 240px at 85% 30%, rgba(250,204,21,.08), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow2);
}
.sellless-title{
  font-weight:950;
  color: rgba(234,240,255,.92);
  line-height: 1.6;
  margin: 0 0 6px;
  font-size: 14.5px;
}
.sellless-list{
  margin:10px 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.sellless-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.sellless-item-name{ font-weight:900; color: rgba(234,240,255,.92); }
.sellless-item-price{
  font-weight:1000;
  letter-spacing:.02em;
  color: rgba(255, 120, 120, .90);
  white-space: nowrap;
}
.sellless-note{
  margin:0;
  color: var(--muted);
  font-weight:650;
  line-height:1.75;
  padding-top:10px;
  border-top:1px dashed rgba(255, 90, 90, .24);
}
@media (max-width: 520px){
  .sellless-list li{ flex-direction: column; align-items:flex-start; }
  .sellless-item-price{ margin-top:2px; }
}

/* =========================
   CANMENU (Dark unified)
   ========================= */
.canmenu{
  margin: 18px calc(50% - 50vw);
  padding: 34px 0 30px;
  background:
    radial-gradient(900px 320px at 15% 12%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 340px at 85% 0%, rgba(167,139,250,.14), transparent 60%),
    radial-gradient(900px 360px at 85% 100%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.canmenu-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}
.canmenu-head{ text-align:center; margin-bottom: 16px; }
.canmenu-head h3{
  margin:0 0 6px;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing:.02em;
}
.canmenu-head p{
  margin:0;
  color: var(--muted);
  font-size:14px;
  line-height:1.7;
}
.canmenu-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}
@media (max-width: 980px){
  .canmenu-grid{ grid-template-columns: 1fr; }
}

.canmenu-card{
  --acc: var(--sky);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.canmenu-card::before{
  content:"";
  position:absolute;
  inset:-140px auto auto -160px;
  width:340px; height:340px;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.06), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.canmenu-card[data-theme="sky"]{  --acc: var(--sky); }
.canmenu-card[data-theme="amber"]{--acc: #f59e0b; }
.canmenu-card[data-theme="teal"]{ --acc: #14b8a6; }

.canmenu-top{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items:start;
}
.canmenu-ico{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  font-size: 18px;
}
.canmenu-title{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
  color: color-mix(in srgb, var(--acc) 78%, #ffffff 22%);
}
.canmenu-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 650;
}
.canmenu-no{
  font-weight: 900;
  color: rgba(234,240,255,.50);
  font-size: 13px;
  padding-top: 4px;
}
.canmenu-rule{
  height:1px;
  margin: 12px 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 70%, #ffffff 30%), transparent);
  opacity: .55;
}
.canmenu-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.canmenu-tag{
  font-size: 12px;
  font-weight: 850;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: rgba(234,240,255,.86);
  white-space: nowrap;
}

/* tags tint (dark friendly) */
.canmenu-tag.t-sky  { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.22); }
.canmenu-tag.t-mint { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.20); }
.canmenu-tag.t-gray { background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.18); }
.canmenu-tag.t-sand { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.20); }
.canmenu-tag.t-pink { background: rgba(236,72,153,.10); border-color: rgba(236,72,153,.20); }
.canmenu-tag.t-lav  { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.22); }

.canmenu-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.canmenu-note{ font-size: 13px; color: var(--muted2); }
.canmenu-link{
  font-size: 13px;
  font-weight: 900;
  color: color-mix(in srgb, var(--acc) 78%, #ffffff 22%);
}
.canmenu-link:hover{ text-decoration: underline; }

/* =========================
   Fit block
   ========================= */
.fit-block{
  margin: 18px 0 10px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: var(--surface);
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}
.fit-block::after{
  content:"";
  position:absolute;
  inset:auto -90px -110px auto;
  width:340px; height:340px;
  background: radial-gradient(circle at 35% 35%, rgba(250,204,21,.14), transparent 64%);
  filter: blur(10px);
  pointer-events:none;
}
.fit-head{ text-align:center; margin-bottom: 18px; }
.fit-head h3{
  margin:0;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing:.01em;
}
.fit-head p{
  margin: 8px auto 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.75;
  max-width: 70ch;
}
.fit-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  .fit-grid{ grid-template-columns: 1fr; }
}
.fit-cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px){
  .fit-cards{ grid-template-columns: 1fr; }
}
.fit-card{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}
.fit-card::before{
  content:"";
  position:absolute;
  inset:-140px auto auto -160px;
  width:340px; height:340px;
  background: radial-gradient(circle at 40% 40%, rgba(56,189,248,.10), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.fit-wide{ grid-column: 1 / -1; }

.fit-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fit-icon{
  width: 38px; height: 38px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  font-size: 18px;
}
.fit-num{
  color: rgba(234,240,255,.55);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
}
.fit-card h4{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing:.01em;
}
.fit-card p{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.7;
  font-size: 14px;
}

.fit-panel{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.fit-panel::before{
  content:"";
  position:absolute;
  inset:-160px auto auto -160px;
  width:360px; height:360px;
  background: radial-gradient(circle at 40% 40%, rgba(167,139,250,.14), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.fit-panel-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(234,240,255,.70);
  font-weight: 850;
  font-size: 13px;
  margin-bottom: 10px;
}
.fit-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(56,189,248,.95);
  box-shadow: 0 0 0 6px rgba(56,189,248,.12);
}
.fit-panel h4{ margin: 0 0 8px; font-size: 18px; letter-spacing:.01em; }
.fit-panel-desc{
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.75;
}

.btn-fit{
  border-color: rgba(56,189,248,.28);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 45%),
    linear-gradient(135deg, rgba(56,189,248,.92), rgba(167,139,250,.82));
  color:#07101a;
}
.btn-fit:hover{ filter:saturate(1.05) brightness(1.02); }

.fit-links{ display:grid; gap:10px; margin-top: 12px; }
.fit-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: rgba(234,240,255,.86);
  font-weight: 900;
  transition: .18s ease;
}
.fit-link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }

.fit-check{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.fit-check li{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
}

/* =========================
   Reasons
   ========================= */
.reasons{
  margin-top:20px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){
  .reasons{ grid-template-columns:1fr; }
}
.reason{
  padding:18px;
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}
.reason strong{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:16px; }
.reason p{ margin:0; color:var(--muted); font-weight:650; line-height:1.75; }

/* =========================
   Flow / Solutions
   ========================= */
.flow-block{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.flow-head{ display:grid; gap:8px; margin-bottom: 14px; }
.flow-head h3{ margin:0; font-size: clamp(18px, 2vw, 22px); letter-spacing: .01em; }
.flow-head p{ margin:0; color: var(--muted); font-weight: 650; line-height: 1.75; }

.flow-steps{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
}
@media (max-width: 1100px){
  .flow-steps{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .flow-steps{
    grid-template-columns: repeat(6, minmax(220px, 1fr));
    overflow-x:auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }
  .flow-step{ scroll-snap-align: start; }
  .flow-steps::-webkit-scrollbar{ height: 10px; }
  .flow-steps::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }
  .flow-steps::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
}
.flow-step{
  padding:16px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  min-height: 124px;
}
.flow-step::before{
  content:"";
  position:absolute;
  inset:-120px auto auto -140px;
  width:260px; height:260px;
  background: radial-gradient(circle at 40% 40%, rgba(56,189,248,.12), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.flow-step__top{ display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.flow-step__num{
  width:34px; height:34px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; color:#07101a;
  background: linear-gradient(135deg, rgba(250,204,21,.92), rgba(56,189,248,.78));
  border: 1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
}
.flow-step__title{ font-weight: 900; letter-spacing: .01em; }
.flow-step__desc{ margin:0; color: var(--muted); font-weight: 650; line-height: 1.75; font-size: 14px; }

.solutions-block{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.14);
}
.solutions-head{ display:grid; gap:8px; margin-bottom: 14px; }
.solutions-head h3{ margin:0; font-size: clamp(18px, 2vw, 22px); letter-spacing: .01em; }
.solutions-head p{ margin:0; color: var(--muted); font-weight: 650; line-height: 1.75; }

.solutions-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){
  .solutions-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .solutions-grid{ grid-template-columns: 1fr; }
}
.sol-card{
  padding:16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.sol-card::after{
  content:"";
  position:absolute;
  inset:auto -80px -90px auto;
  width:240px; height:240px;
  background: radial-gradient(circle at 35% 35%, rgba(167,139,250,.12), transparent 64%);
  filter: blur(10px);
  pointer-events:none;
}
.sol-card__top{ display:flex; align-items:flex-start; gap:10px; margin-bottom: 10px; }
.sol-card__num{
  width:28px; height:28px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; color:#07101a;
  background: linear-gradient(135deg, rgba(250,204,21,.90), rgba(56,189,248,.75));
  border: 1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
  margin-top: 2px;
}
.sol-card__title{ margin:0; font-size: 14.5px; line-height: 1.5; letter-spacing: .01em; font-weight: 900; }
.sol-card__desc{ margin:0; color: var(--muted); font-weight: 650; line-height: 1.75; font-size: 14px; }

/* =========================
   CTA panel
   ========================= */
.cta-panel{
  margin-top:20px;
  padding:18px;
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.cta-panel .left{ display:grid; gap:6px; }
.cta-panel .left strong{ font-size:18px; letter-spacing:.01em; }
.cta-panel .left span{ color:var(--muted); font-weight:650; line-height:1.75; }
.cta-panel .right{ display:flex; gap:10px; flex-wrap:wrap; }

/* =========================
   Final / LINE
   ========================= */
.line-cta{
  padding:70px 0;
  background:
    radial-gradient(1100px 520px at 20% 10%, rgba(17,182,163,.16), transparent 60%),
    radial-gradient(800px 420px at 80% 18%, rgba(6,199,85,.12), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.14));
  border-top:1px solid rgba(255,255,255,.08);
}

/* Pricing */
.pricing-block{
  margin-bottom: 26px;
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: var(--surface);
  box-shadow: var(--shadow2);
}
.pricing-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .pricing-2col{ grid-template-columns: 1fr; }
}

.product-card{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap:14px;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
@media (max-width: 860px){
  .product-card{ grid-template-columns: 1fr; }
}

.product-media{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  position:relative;
  height: clamp(180px, 20vw, 240px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-fallback{
  text-align:center;
  color: rgba(234,240,255,.72);
  font-weight: 900;
  letter-spacing:.02em;
  padding: 16px;
}

.product-body{ display:grid; gap:10px; align-content:start; }
.product-top{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.product-body h3{ margin:0; font-size: 18px; letter-spacing:.01em; }
.product-lead{ margin:0; color: var(--muted); font-weight: 650; line-height: 1.75; }
.product-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Price box */
.price-box{
  margin-top: 6px;
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.06), transparent 60%),
    rgba(255,255,255,.04);
}
.price-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.price-main{ display:grid; gap:4px; }
.price-label{ font-size: 12px; color: var(--muted2); font-weight: 800; }

.price-amount{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.price-amount .yen{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing:.02em;
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(56,189,248,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.price-amount .unit{ font-weight: 900; color: rgba(234,240,255,.82); }

.price-sub{ color: var(--muted2); font-weight: 750; font-size: 12.5px; }
.price-badge{
  padding:7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: rgba(234,240,255,.78);
  font-weight: 900;
  font-size: 12px;
  white-space:nowrap;
}
.price-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
}
.price-list .small{ color: var(--muted2); font-size: 12.5px; }

/* Plans */
.pricing-3col{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.16);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 1100px){
  .pricing-3col{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .pricing-3col{ grid-template-columns: 1fr; }
}

.plan-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.plan-media{
  height: clamp(160px, 18vw, 220px);
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.plan-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}
.thumb-contain{
  object-fit: contain;
  padding: 10px;
  background: rgba(255,255,255,.04);
}
.plan-body{
  padding:14px;
  display:grid;
  gap:10px;
}
.plan-body h4{ margin:0; font-size: 17px; letter-spacing:.01em; }
.plan-sub{ margin:0; color: var(--muted2); font-weight: 750; }
.plan-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.plan-price-sub{ color: var(--muted2); font-weight:800; font-size:12.5px; }
.plan-note{ margin:0; color: var(--muted); font-weight:650; line-height:1.7; }
.plan-free-link{ color: rgba(56,189,248,.92); font-weight:900; }
.plan-free-link:hover{ text-decoration: underline; }

.pricing-bottom-cta{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Final layout */
.final-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .final-grid{ grid-template-columns: 1fr; }
}

.final-story{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  padding:18px;
}
.ba{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 860px){
  .ba{ grid-template-columns:1fr; }
  .ba-arrow{ display:none; }
}
.ba-card{
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding:16px;
}
.ba-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.ba-before .ba-tag{ border-color: rgba(250,204,21,.25); }
.ba-after .ba-tag{ border-color: rgba(6,199,85,.28); }
.ba-card h3{ margin:10px 0; font-size:16px; letter-spacing:.01em; }
.ba-card ul{ margin:0; padding:0 0 0 18px; color: var(--muted); font-weight:650; line-height:1.7; }
.ba-arrow{ display:flex; align-items:center; justify-content:center; font-size: 28px; color: rgba(234,240,255,.60); padding: 0 6px; }

.final-note{
  margin-top:14px;
  padding:16px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.final-note h3{ margin:0 0 10px; font-size:16px; }
.final-flow{ margin:0; padding-left: 18px; display:grid; gap:10px; }
.final-flow li{ color: var(--muted); font-weight:650; line-height:1.7; }
.final-flow strong{ color: rgba(234,240,255,.92); }
.final-flow span{ display:block; color: var(--muted2); margin-top:2px; }

.final-words{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.word{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: rgba(234,240,255,.78);
  font-weight:800;
  font-size:12.5px;
}
.final-last{ margin:12px 0 0; color: var(--muted); font-weight:650; line-height:1.75; }

/* LINE panel */
.line-panel{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding:18px;
  overflow:hidden;
}
.line-head{ display:grid; gap:6px; margin-bottom: 12px; }
.line-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(6,199,85,.28);
  background: rgba(6,199,85,.10);
  color: rgba(234,240,255,.88);
  font-weight:900;
  font-size:12.5px;
}
.line-head h3{ margin:0; font-size:18px; letter-spacing:.01em; }
.line-head p{ margin:0; color: var(--muted); font-weight:650; line-height:1.7; }

.qr-box{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  margin: 12px 0;
}
@media (max-width: 520px){
  .qr-box{ grid-template-columns: 1fr; }
}
.qr-box img{
  width:110px;
  height:110px;
  object-fit:contain;
  background: #fff;
  border-radius: 14px;
  padding:10px;
}
.qr-note strong{ display:block; margin-bottom:2px; }
.qr-note span{ color: var(--muted2); font-weight:650; line-height:1.6; }

/* Howto */
.howto{
  margin-top: 14px;
  padding:14px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg, rgba(17,182,163,.14), rgba(6,199,85,.10));
}
.howto-title{
  text-align:center;
  font-weight: 1000;
  letter-spacing:.02em;
  margin-bottom: 12px;
  font-size: 16px;
  color: rgba(234,240,255,.92);
}
.howto-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.howto-circle{
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  border: 1px solid rgba(0,0,0,.08);
}
.howto-text{ text-align:center; color:#062018; font-weight: 900; line-height: 1.25; }
.howto-top{ display:block; font-size: 14px; }
.howto-mid{ display:block; font-size: 16px; margin-top: 4px; }
.howto-chip{
  display:inline-flex;
  margin-top: 10px;
  padding:10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,140,90,.98), rgba(255,96,160,.88));
  color:#fff;
  font-weight: 1000;
  font-size: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.howto-icon{ display:block; margin-top: 10px; font-size: 30px; }
.howto-arrow{ color: rgba(234,240,255,.90); font-size: 22px; font-weight: 1000; }
.howto-foot{
  margin-top: 12px;
  color: rgba(234,240,255,.78);
  font-weight: 700;
  line-height:1.6;
  font-size: 13px;
  text-align:center;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.22);
}

/* Footer */
footer{
  padding:26px 0 34px;
  color:var(--muted2);
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.08);
}
footer .foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  font-weight:650;
}

/* Mobile */
@media (max-width: 720px){
  .menu{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .hero-left{ padding:22px 18px; }
  section{ padding:54px 0; }
  .howto-circle{ width: 160px; height: 160px; }
}

.card-img{
  display:block;
  max-width:100%;
  height:auto;   /* ←これが比率維持の要 */
}

/* brand の代わり（ロゴ＋文字を横並びにする） */
.brand2{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

/* ロゴ枠（ここで全体サイズ決定） */
.logo2{
  width:34px;
  height:34px;
  border-radius:12px;   /* 丸にしたいなら 50% */
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,.06);
}

/* 画像は cover で切り抜いて“アイコンっぽく”見せる */
.logo2 img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* もっとひよこを大きく見せたい場合（任意） */
/*
.logo2 img{
  transform: scale(1.25);
  transform-origin:center;
}
*/