:root{
  --sakura:#e85d8a; --sakura-d:#d64b78; --sakura-l:#f7a8c4; --sakura-pale:#ffe3ee;
  --ink:#2b2b33; --bg:#fff7fa; --line:#f0d8e2;
}
*{ box-sizing:border-box; }
body{ margin:0; color:var(--ink); background:var(--bg); line-height:1.6;
      font-family:"M PLUS Rounded 1c","Zen Maru Gothic","Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }
img{ max-width:100%; }

/* ===== ヘッダー(公開ページ) ===== */
.site-header{ position:sticky; top:0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:10px 22px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; }
.brand img{ width:42px; height:42px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(232,93,138,.25)); }
.login-btn{ background:linear-gradient(135deg,var(--sakura),var(--sakura-l)); color:#fff;
  text-decoration:none; padding:10px 22px; border-radius:999px; font-weight:700;
  box-shadow:0 6px 16px rgba(232,93,138,.3); transition:transform .15s; }
.login-btn:hover{ transform:translateY(-1px); }

/* ===== ヒーロー(モダン: メッシュ背景＋ガラスチップ) ===== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 60% at 82% 8%,  #ffd0e4 0%, rgba(255,208,228,0) 60%),
    radial-gradient(55% 55% at 12% 18%, #ffe1cf 0%, rgba(255,225,207,0) 60%),
    radial-gradient(70% 70% at 70% 100%,#e9d6ff 0%, rgba(233,214,255,0) 60%),
    linear-gradient(160deg, #fff4f9 0%, #ffffff 60%);
  border-bottom:1px solid var(--line);
}
/* ふわっとぼかしたカラーブロブ(メッシュ風) */
.hero::before, .hero::after{ content:""; position:absolute; z-index:0; border-radius:50%;
  filter:blur(70px); opacity:.55; pointer-events:none; }
.hero::before{ width:420px; height:420px; top:-120px; right:-80px;
  background:radial-gradient(circle,#ff9ec0,rgba(255,158,192,0) 70%); }
.hero::after{ width:380px; height:380px; bottom:-140px; left:-90px;
  background:radial-gradient(circle,#c9a8ff,rgba(201,168,255,0) 70%); }
.hero-inner{
  position:relative; z-index:2; max-width:1140px; margin:0 auto;
  padding:84px 24px 76px; display:flex; align-items:center; gap:56px; flex-wrap:wrap;
}
.hero-text{ flex:1 1 380px; }
.hero-text h1{ font-size:34px; margin:0 0 14px; line-height:1.3; }
.lead{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--sakura-d);
  background:#fff; padding:7px 16px 7px 12px; border-radius:999px;
  box-shadow:0 4px 14px rgba(232,93,138,.14); border:1px solid var(--sakura-pale);
}
.lead-dot{ font-size:15px; line-height:1; }
.hero-logo{
  display:block; max-width:460px; width:100%; height:auto; margin:0 0 20px;
  filter:drop-shadow(0 10px 22px rgba(232,93,138,.22));
}
/* ヒーローのアプリ画面(小さめ・独立) */
.hero-shot{
  display:block; width:100%; max-width:430px; height:auto; margin:0 0 26px;
  border-radius:14px; border:1px solid rgba(232,93,138,.12); background:#fff;
  box-shadow:0 18px 40px rgba(214,75,120,.22);
}
.hero-sub{ font-size:17px; color:#6a5560; margin:0 0 30px; font-weight:500; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary{
  background:linear-gradient(135deg,var(--sakura) 0%,var(--sakura-l) 100%);
  color:#fff; text-decoration:none; padding:15px 30px; border-radius:999px;
  font-weight:800; font-size:16px; letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(232,93,138,.35); transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(232,93,138,.45); }
.btn-ghost{
  border:2px solid var(--sakura); color:var(--sakura-d); background:rgba(255,255,255,.7);
  text-decoration:none; padding:13px 26px; border-radius:999px; font-weight:700; font-size:16px;
  transition:background .15s, transform .15s;
}
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); }
.btn-primary .arr{ display:inline-block; transition:transform .15s; }
.btn-primary:hover .arr{ transform:translateX(4px); }

/* 信頼ライン */
.hero-trust{ display:flex; align-items:center; gap:10px; margin-top:26px;
  font-size:13px; font-weight:600; color:#9a7a86; }
.hero-trust img{ width:30px; height:30px; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(232,93,138,.25)); }

/* ===== ビジュアル: 丸ステージ＋ガラスチップ ===== */
.hero-visual{ position:relative; flex:0 0 440px; max-width:48%; min-height:520px;
  display:flex; align-items:center; justify-content:center; }
.hero-glow{
  position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,205,226,.7) 40%, rgba(255,205,226,0) 72%);
  border-radius:50%; z-index:0;
}
/* 装飾リング(キャラカードの後ろにのぞく点線丸) */
.hero-ring{ position:absolute; left:50%; top:50%; width:78%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; z-index:0;
  border:2px dashed rgba(232,93,138,.28); animation:spin 36s linear infinite; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
/* キャラを収める角丸フォトカード */
.hero-stage{
  position:relative; z-index:1; width:80%; max-width:380px; aspect-ratio:3/4;
  border-radius:28px; overflow:hidden; background:#fff; padding:8px;
  box-shadow:0 30px 60px rgba(214,75,120,.24), 0 0 0 1px rgba(255,255,255,.7);
  animation:floaty 6s ease-in-out infinite;
}
.hero-stage::after{ content:""; position:absolute; inset:8px; border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(232,93,138,.12); pointer-events:none; }
.hero-stage img{
  display:block; width:100%; height:100%; border-radius:20px;
  object-fit:cover; object-position:50% 16%;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ガラス調 機能チップ */
.chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
  padding:11px 16px 11px 12px; border-radius:16px;
  background:rgba(255,255,255,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 12px 30px rgba(214,75,120,.18);
  animation:floaty 5s ease-in-out infinite; }
.chip-ic{ font-size:22px; line-height:1;
  width:40px; height:40px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ffe1ec,#fff); border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(232,93,138,.15); }
.chip-tx{ display:flex; flex-direction:column; line-height:1.25; }
.chip-tx b{ font-size:14px; color:var(--ink); }
.chip-tx small{ font-size:11px; color:#a07e8b; }
.chip-1{ top:6%;   left:-6%;  animation-delay:.0s; }
.chip-2{ top:44%;  right:-10%; animation-delay:1.2s; }
.chip-3{ bottom:6%; left:2%;  animation-delay:2.1s; }
.accent{ color:var(--sakura); }

/* 背景に散る花びら */
.petal{ position:absolute; z-index:1; width:26px; height:26px; opacity:.55; pointer-events:none;
  background:var(--sakura-l);
  -webkit-mask:radial-gradient(circle at 50% 120%, transparent 38%, #000 39%) center/100% 100% no-repeat;
          mask:radial-gradient(circle at 50% 120%, transparent 38%, #000 39%) center/100% 100% no-repeat;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation:petal-fall linear infinite; }
.petal::before{ content:""; }
.p1{ left:8%;  top:-30px; animation-duration:13s; animation-delay:0s;   background:#ffb6cf; }
.p2{ left:24%; top:-30px; animation-duration:17s; animation-delay:4s;   background:#ff9ec0; width:18px; height:18px; }
.p3{ left:58%; top:-30px; animation-duration:15s; animation-delay:2s;   background:#ffc7dc; width:22px; height:22px; }
.p4{ left:74%; top:-30px; animation-duration:19s; animation-delay:6s;   background:#ffb6cf; width:16px; height:16px; }
.p5{ left:90%; top:-30px; animation-duration:14s; animation-delay:1.5s; background:#ff9ec0; width:20px; height:20px; }
@keyframes petal-fall{
  0%{ transform:translateY(-40px) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  100%{ transform:translateY(620px) rotate(360deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .hero-stage, .chip{ animation:none; }
  .hero-ring{ animation:none; }
  .petal{ display:none; }
}

/* タブレット: チップを内側へ */
@media (max-width:980px){
  .chip-1{ left:0; } .chip-2{ right:-2%; } .chip-3{ left:4%; }
}

/* スマホ */
@media (max-width:760px){
  .hero-inner{ padding:52px 20px 44px; gap:34px; text-align:center; }
  .hero-text{ flex:1 1 100%; }
  .lead{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-trust{ justify-content:center; }
  .hero-visual{ flex:1 1 100%; max-width:380px; min-height:0; margin:6px auto 0; }
  .chip{ padding:9px 13px 9px 9px; }
  .chip-ic{ width:34px; height:34px; font-size:18px; }
  .chip-tx b{ font-size:12.5px; } .chip-tx small{ font-size:10px; }
  .chip-1{ top:2%; left:-2%; } .chip-2{ top:46%; right:-4%; } .chip-3{ bottom:2%; left:-2%; }
}

/* ===== 紹介動画(2本並び) ===== */
.videos{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  max-width:880px; margin:0 auto; }
.vid{ margin:0; }
.vid-logo{ display:block; height:40px; width:auto; max-width:80%; margin:0 auto 10px; object-fit:contain; }
.vid video{ width:100%; border-radius:14px; border:1px solid var(--line); background:#000; display:block; }
.vid-todo{ width:100%; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--line);
  background-size:cover; background-position:center; display:flex; align-items:flex-end;
  justify-content:flex-end; position:relative; overflow:hidden;
  box-shadow:0 6px 20px rgba(232,93,138,.14); }
.vid-todo::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(214,75,120,.18) 0%, rgba(214,75,120,0) 40%); }
.vid-todo span{ position:relative; margin:0 12px 12px 0; background:rgba(255,255,255,.92);
  color:var(--sakura-d); font-weight:700; font-size:13px; line-height:1.4;
  padding:6px 13px; border-radius:999px; box-shadow:0 3px 10px rgba(232,93,138,.2); }
.vid figcaption{ text-align:center; font-size:13px; color:#777; margin-top:8px; }

/* ===== 製品紹介ブロック(縦積み: ロゴ→動画+機能) ===== */
.product{ max-width:980px; margin:0 auto 40px; }
.prod-logo{ display:block; height:48px; width:auto; max-width:82%; margin:0 auto 18px; object-fit:contain; }
.prod-body{ display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.prod-video{ flex:1 1 400px; }
.prod-video video{ width:100%; border-radius:14px; border:1px solid var(--line); background:#000; display:block; }
.prod-feat{ flex:1 1 260px; }
.prod-feat h3{ font-size:17px; margin:0 0 10px; color:var(--sakura-d); }
.feat{ margin:0; padding-left:20px; font-size:14px; line-height:1.9; color:#444; }
.feat ul{ margin:4px 0 6px; }

/* ===== セクション ===== */
.section{ max-width:1040px; margin:0 auto; padding:28px 20px; }
.section h2{ font-size:26px; font-weight:900; margin:0 0 26px; text-align:center; color:var(--ink); }
.section h2::after{ content:""; display:block; width:54px; height:4px; margin:12px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--sakura),var(--sakura-l)); }
.intro video{ display:block; width:100%; max-width:760px; margin:0 auto;
  border-radius:14px; border:1px solid var(--line); background:#000; }

/* ===== カードグリッド ===== */
.grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px;
  box-shadow:0 4px 14px rgba(232,93,138,.08); display:flex; flex-direction:column; }
.card .icon{ font-size:40px; line-height:1; }
.card .icon-img{ width:56px; height:56px; object-fit:contain; }
.card h3{ font-size:18px; margin:10px 0 6px; }
.card p{ flex:1; font-size:14px; color:#555; margin:0 0 16px; }
.badge{ font-size:11px; background:#fde7ee; color:var(--sakura);
  padding:2px 8px; border-radius:999px; margin-left:4px; }
.btn{ display:inline-block; text-align:center; text-decoration:none; background:var(--sakura);
  color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; }
.btn:hover{ background:var(--sakura-d); }
.btn.full{ display:block; width:100%; padding:13px; }

/* ===== フッター ===== */
footer{ text-align:center; padding:26px; color:#999; font-size:13px; }

/* ===== ログイン ===== */
.login-wrap{ min-height:78vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px;
  max-width:380px; width:100%; box-shadow:0 8px 30px rgba(232,93,138,.12); text-align:center; }
.login-card .lg{ width:72px; height:72px; object-fit:contain; }
.login-card h1{ font-size:20px; margin:10px 0 20px; }
.field{ text-align:left; margin-bottom:14px; }
.field label{ display:block; font-size:13px; color:#666; margin-bottom:5px; }
.field input{ width:100%; padding:11px 12px; border:1px solid #e3c9d4; border-radius:10px; font-size:15px; }
.login-note{ font-size:12px; color:#aaa; margin-top:16px; }

/* ===== さくらデスクトップ ===== */
.dt-header{ position:sticky; top:0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; background:linear-gradient(135deg,#e85d8a,#f7a8c4);
  color:#fff; padding:12px 20px; }
.dt-header .brand{ color:#fff; }
.dt-header .brand img{ background:#fff; border-radius:50%; padding:3px; }
.dt-user{ display:flex; align-items:center; gap:10px; font-size:14px; }
.dt-user img{ width:36px; height:36px; border-radius:50%; object-fit:contain; background:#fff; }
.logout{ color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.7);
  padding:6px 14px; border-radius:9px; font-size:13px; }
.notice{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }
.notice img{ width:54px; height:54px; border-radius:50%; object-fit:contain; background:#fde7ee; flex:0 0 auto; }
.notice h3{ margin:0 0 8px; font-size:16px; }
.notice ul{ margin:0; padding-left:18px; font-size:14px; color:#555; }
.notice li{ margin:4px 0; }
.dt-card{ text-decoration:none; color:inherit; transition:.15s; }
.dt-card:hover{ box-shadow:0 6px 20px rgba(232,93,138,.16); transform:translateY(-2px); }

/* ===== アバター(頭文字) ===== */
.avatar{ width:56px; height:56px; border-radius:50%; background:#fde7ee; color:var(--sakura-d);
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; flex:0 0 auto; }

/* ===== アドレス帳 ===== */
.ab-note{ text-align:center; color:#777; font-size:14px; margin:0 0 20px; }
.contact{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  margin-bottom:16px; display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  box-shadow:0 4px 14px rgba(232,93,138,.06); }
.contact-main{ display:flex; gap:14px; align-items:center; flex:1 1 300px; }
.contact-info h3{ margin:0 0 4px; font-size:18px; }
.contact-info .org{ font-size:13px; color:#777; margin:0 0 8px; }
.contact-actions a{ display:inline-block; font-size:13px; color:var(--sakura-d);
  text-decoration:none; margin-right:14px; }
.contact-actions a:hover{ text-decoration:underline; }
.contact-meishi{ flex:0 0 240px; }
.contact-meishi .cap{ font-size:11px; color:#aaa; text-align:center; margin-top:6px; }

/* 名刺フリップ(クリックで表↔裏。JS不要のチェックボックス方式) */
.flip-toggle{ position:absolute; opacity:0; pointer-events:none; }
.flip-card{ display:block; width:240px; max-width:100%; cursor:pointer; perspective:1000px; }
/* 高さを明示(240×440/728≒145px)。faces の height:100% が確実に効く=潰れない */
.flip-inner{ display:block; position:relative; width:240px; max-width:100%; height:145px;
  transition:transform .5s; transform-style:preserve-3d; }
.flip-toggle:checked + .flip-card .flip-inner{ transform:rotateY(180deg); }
.flip-face{ position:absolute; inset:0; width:100%; height:100%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:10px; border:1px solid var(--line); object-fit:cover; }
.flip-back{ transform:rotateY(180deg); }
.flip-toggle:focus-visible + .flip-card{ outline:2px solid var(--sakura); outline-offset:3px; border-radius:10px; }

/* ===== プロフィール ===== */
.prof{ max-width:720px; margin:0 auto; }
.prof-head{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.prof-head .avatar{ width:72px; height:72px; font-size:30px; }
.prof-head h2{ margin:0; font-size:22px; }
.prof-head .org{ color:#777; font-size:14px; margin:4px 0 0; }
.prof-fields{ margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px 20px; }
.pf{ display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }
.pf:last-child{ border-bottom:none; }
.pf .k{ color:#888; flex:0 0 auto; }
.pf .v{ text-align:right; word-break:break-all; }
.prof-meishi{ margin-top:24px; }
.prof-meishi h3{ font-size:16px; margin:0 0 12px; }
.meishi-pair{ display:flex; gap:16px; flex-wrap:wrap; }
.meishi-pair figure{ margin:0; }
.meishi-pair img{ width:320px; max-width:100%; border-radius:10px; border:1px solid var(--line); display:block; }
.meishi-pair figcaption{ font-size:12px; color:#888; text-align:center; margin-top:5px; }
.edit-btn{ display:inline-block; margin-top:8px; background:#fff; color:var(--sakura-d);
  border:1px solid var(--sakura); border-radius:9px; padding:7px 16px; font-size:13px;
  text-decoration:none; font-weight:600; }

/* ===== 自分のE名刺(さくらステーションから登録 → 取り込み → プロフィール反映) ===== */
.mycards{ margin:0 0 28px; }
.mycards .sec-title{ font-size:16px; margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.mycards .sec-note{ color:#777; font-size:13px; margin:0 0 14px; }
.mycards-grid{ display:flex; gap:16px; flex-wrap:wrap; }
.mycard{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px;
  width:300px; max-width:100%; box-shadow:0 4px 14px rgba(232,93,138,.06); position:relative; }
.mycard.selected{ border-color:var(--sakura); box-shadow:0 6px 18px rgba(232,93,138,.18); }
.mycard .badge{ position:absolute; top:10px; right:10px; background:var(--sakura); color:#fff;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:11px; }
.mycard .ecard-view{ width:100%; border-radius:9px; border:1px solid var(--line); overflow:hidden;
  background:#fff; cursor:pointer; }
.mycard .ecard-view img{ display:block; width:100%; height:auto; }
.mycard .ecard-view iframe{ display:block; width:100%; border:0; background:#fff; }
.mycard .anim-tag{ font-size:11px; color:var(--sakura-d); margin:7px 0 0; }
.mycard h4{ margin:8px 0 2px; font-size:15px; }
.mycard .org{ font-size:12px; color:#777; margin:0 0 2px; }
.mycard .from{ font-size:11px; color:#999; margin:0 0 10px; }
.mycard .row{ display:flex; gap:8px; align-items:center; }
.mycard .pick{ flex:1; background:var(--sakura); color:#fff; border:0; border-radius:9px;
  padding:9px; font-size:13px; font-weight:600; cursor:pointer; }
.mycard .pick:hover{ background:var(--sakura-d); }
.mycard .pick.done{ background:#fff; color:var(--sakura-d); border:1px solid var(--sakura); cursor:default; }
.mycard .play{ background:#fff; color:var(--sakura-d); border:1px solid var(--sakura);
  border-radius:9px; padding:9px 11px; font-size:12px; cursor:pointer; }
.mycards-empty{ color:#999; font-size:14px; background:#fff; border:1px dashed var(--line);
  border-radius:12px; padding:20px; text-align:center; }

/* プロフィール編集フォーム */
.prof-edit{ margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.prof-edit label{ display:block; font-size:13px; color:#888; margin-bottom:12px; }
.prof-edit input{ display:block; width:100%; box-sizing:border-box; margin-top:5px; padding:9px 11px;
  border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--ink); }
.prof-edit input:focus{ outline:none; border-color:var(--sakura); }
.prof-edit-actions{ display:flex; gap:10px; align-items:center; margin-top:4px; }
.prof-edit-note{ font-size:12px; color:#999; }

/* プロフィールの採用中E名刺(アニメ表示=iframe) */
.prof-meishi .ecard-frame{ width:340px; max-width:100%; border-radius:10px; border:1px solid var(--line);
  overflow:hidden; background:#fff; }
.prof-meishi .ecard-frame iframe{ display:block; width:100%; border:0; background:#fff; }
.prof-meishi .none{ color:#999; font-size:14px; background:#fff; border:1px dashed var(--line);
  border-radius:12px; padding:18px; }

/* ===== 埋め込み(さくらワールドのWebView用: ?embed=1 でヘッダー非表示) ===== */
.embed .site-header, .embed .dt-header{ display:none; }
.embed .section{ padding-top:18px; }