/* エナレーター 共通スタイル（新デザイン・青×アンバー）
   index.html は自己完結のため未使用。legal / privacy / terms などの
   テキストページで共有する。 */

:root{
  --bg:#2C6E9A; --card:#31789F; --text:#FFFFFF; --muted:#D2E2EC;
  --line:#4E8AAE; --amber:#FFB703; --accent:rgba(255,183,3,.95); --soft:#3B82AA;
  --ink:#EAF2F8;
  --shadow:0 1px 2px rgba(10,40,60,.12), 0 8px 24px rgba(10,40,60,.18);
  --shadow-lg:0 2px 6px rgba(10,40,60,.16), 0 20px 48px rgba(10,40,60,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#22587D; --card:#2A6890; --text:#FFFFFF; --muted:#C2D6E4;
    --line:#3E7699; --soft:#316F98; --ink:#E4EEF5;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--amber);text-decoration:underline;}
::selection{background:var(--amber);color:#1C1C1E;}

/* ===== ヘッダー ===== */
.site-header{position:sticky;top:0;z-index:50;background:#FFFFFF;box-shadow:0 2px 10px rgba(10,40,60,.08);}
.hd-inner{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;}
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 6px;background:transparent;border:none;cursor:pointer;}
.hamburger span{display:block;height:5px;border-radius:3px;background:rgba(255,183,3,.9);}
.brand{font-weight:800;font-size:16px;letter-spacing:.01em;color:#2C6E9A;}
.brand:hover{text-decoration:none;color:#2C6E9A;}
.menu-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:1px solid var(--line);background:#FFFFFF;position:relative;z-index:2;}
.menu-nav{max-width:1120px;margin:0 auto;padding:8px 40px 24px;display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;}
.menu-col{display:flex;flex-direction:column;gap:8px;}
.menu-h{font-weight:800;font-size:11px;color:#2C6E9A;letter-spacing:.08em;padding-bottom:4px;}
.menu-col a{font-size:14px;color:#1C1C1E;}
.menu-col a:hover{color:var(--accent);text-decoration:underline;}
.menu-overlay{display:none;position:fixed;inset:0;z-index:40;background:transparent;}
@media (max-width:680px){ .menu-nav{flex-direction:column;gap:20px;} }

/* ===== コンテンツ ===== */
.wrap{max-width:860px;margin:0 auto;padding:56px 20px 24px;}
.page-eyebrow{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.22em;color:var(--accent);font-weight:700;}
.page-title{font-size:clamp(26px,4vw,38px);font-weight:900;margin:8px 0 6px;line-height:1.25;}
.page-meta{font-size:13px;color:var(--muted);margin:0 0 8px;}

.prose{color:var(--ink);font-size:15.5px;}
.prose h2{font-size:clamp(19px,2.6vw,23px);font-weight:900;color:#fff;margin:36px 0 12px;padding-left:12px;border-left:4px solid var(--amber);line-height:1.4;}
.prose h3{font-size:16.5px;font-weight:800;color:#fff;margin:22px 0 8px;}
.prose p{margin:0 0 14px;}
.prose ul,.prose ol{margin:0 0 14px;padding-left:1.3em;}
.prose li{margin:0 0 7px;}
.prose ul li::marker{color:var(--accent);}
.prose small{color:var(--muted);}
.prose strong{color:#fff;}

/* 定義テーブル（特商法など） */
.deftable{width:100%;border-collapse:collapse;margin:8px 0 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.deftable th,.deftable td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px;}
.deftable tr:last-child th,.deftable tr:last-child td{border-bottom:none;}
.deftable th{width:34%;font-weight:800;color:#fff;background:var(--soft);white-space:normal;}
.deftable td{color:var(--ink);}
@media (max-width:600px){
  .deftable,.deftable tbody,.deftable tr,.deftable th,.deftable td{display:block;width:100%;}
  .deftable th{border-bottom:none;padding-bottom:2px;}
  .deftable td{padding-top:2px;padding-bottom:14px;}
}

/* 記入待ちプレースホルダの強調 */
.fillin{color:#1C1C1E;background:var(--amber);border-radius:4px;padding:0 6px;font-weight:700;font-size:.92em;}

/* 補足カード */
.callout{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;padding:16px 20px;margin:16px 0;font-size:13.5px;color:var(--muted);}

/* ===== フッター ===== */
.site-footer{border-top:1px solid var(--line);background:var(--card);margin-top:48px;}
.ft-cols{max-width:1120px;margin:0 auto;padding:40px 40px;display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;}
.ft-col{display:flex;flex-direction:column;gap:10px;}
.ft-h{font-weight:800;font-size:12px;color:var(--text);letter-spacing:.04em;}
.ft-col a{font-size:13px;color:var(--muted);}
.ft-col a:hover{color:var(--accent);text-decoration:underline;}
.ft-sns-row{border-top:1px solid var(--line);background:#fff;}
.ft-sns-row .sns{color:rgba(0,0,0,.7);}
.ft-sns-inner{max-width:1120px;margin:0 auto;padding:24px 40px;display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:flex-start;}
.sns{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);transition:opacity .15s ease;}
.sns:hover{opacity:.7;text-decoration:none;}
.sns img{display:block;}
.sns span{font-size:12px;font-weight:700;letter-spacing:.02em;}

/* 「SOON」テープ — 準備中のものに斜めに掛ける一時的な目印。
   アカウント開設 / ストア公開までの措置。公開したら .soon を外すだけで戻る。
   メインカラー（#2C6E9A）の半透明なので、下のアイコンは透けて見える。 */
.soon{position:relative;pointer-events:none;}
.soon img{opacity:.45;filter:grayscale(.5);}
.soon span{opacity:.45;}
.soon::after{
  content:"SOON";
  position:absolute;
  left:50%;
  top:var(--soon-top,50%);
  transform:translate(-50%,-50%) rotate(-14deg);
  width:var(--soon-w,52px);
  text-align:center;
  background:rgba(44,110,154,.82);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:2.4;
  letter-spacing:.04em;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.22),0 1px 5px rgba(0,0,0,.22);
  pointer-events:none;
}
/* SNSアイコンは 40px の画像＋下にラベル。テープは画像の中心（≒20px）に掛ける。
   ★幅は % ではなく固定px。% だと基準が「ラベルの幅」になり、
     Instagram(63px) と TikTok(41px) でテープの大きさが変わり、SOON が切れる。 */
.ft-sns-row .sns.soon{--soon-top:20px;}
/* 狭い画面で SNS 4つが 3+1 に折り返すのを防ぐ。
   375px では 左右padding 40px×2 と gap 34px×3 で必要幅299px > 利用可能幅280px だった。 */
@media (max-width:430px){
  .ft-sns-inner{padding-left:16px;padding-right:16px;gap:22px;}
}
.ft-bottom{border-top:1px solid var(--line);}
.ft-bottom-inner{max-width:1120px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;}
.ft-bottom-inner span{font-size:11.5px;color:var(--muted);}

/* ===== フォーム（feedback / contact） ===== */
.backlink{display:inline-block;margin-bottom:18px;color:var(--accent);font-size:14px;}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:var(--shadow);}
.field{margin-bottom:20px;}
.field > label{display:block;font-weight:800;font-size:14px;color:#fff;margin-bottom:8px;}
.req{color:#1C1C1E;background:var(--amber);border-radius:4px;padding:0 6px;font-size:11px;font-weight:700;margin-left:6px;}
.opt{color:var(--muted);font-size:12px;font-weight:600;margin-left:6px;}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.96);color:#1C1C1E;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.7;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,183,3,.28);}
.field .hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);}
.btn-submit{width:100%;border:none;cursor:pointer;background:var(--amber);color:#1C1C1E;font-weight:800;font-size:16px;padding:14px;border-radius:12px;box-shadow:var(--shadow);transition:transform .15s;}
.btn-submit:hover{transform:translateY(-1px);}
.form-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;text-align:center;}
.alt-contact{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#1C1C1E;color:#fff;padding:12px 20px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:60;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 解約手順（billing）のストア別ブロック */
.store-steps{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:14px 0;box-shadow:var(--shadow);}
.store-steps h3{margin-top:6px;}
.store-steps ol{margin:6px 0 0;padding-left:1.3em;}
.store-steps li{margin:0 0 7px;}

/* ===== FAQ（help） ===== */
.faq-cat{margin:34px 0 0;}
.faq-cat > h2{font-size:clamp(19px,2.6vw,23px);font-weight:900;color:#fff;margin:0 0 12px;padding-left:12px;border-left:4px solid var(--amber);}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:10px 0;overflow:hidden;box-shadow:var(--shadow);}
details.faq > summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:800;font-size:15px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;}
details.faq > summary::-webkit-details-marker{display:none;}
details.faq > summary::after{content:"＋";color:var(--accent);font-weight:900;font-size:18px;line-height:1;flex-shrink:0;}
details.faq[open] > summary::after{content:"−";}
details.faq > summary:hover{color:var(--accent);}
details.faq .body{padding:0 20px 18px;color:var(--ink);font-size:14.5px;line-height:1.85;}
details.faq .body p{margin:0 0 10px;}
details.faq .body p:last-child{margin-bottom:0;}

/* ===== サイトポリシー（legal / privacy / terms）：全体テキストを小さめに ===== */
.policy-page .page-title{font-size:clamp(22px,3.4vw,30px);}
.policy-page .page-meta{font-size:12px;}
.policy-page .prose{font-size:13.5px;line-height:1.8;}
.policy-page .prose h2{font-size:clamp(16px,2.2vw,19px);margin:30px 0 10px;}
.policy-page .prose h3{font-size:14.5px;}
.policy-page .prose li{margin:0 0 6px;}
.policy-page .prose small{font-size:11.5px;}
.policy-page .deftable th,
.policy-page .deftable td{font-size:12.5px;padding:12px 16px;}
.policy-page .callout{font-size:12px;}

/* ===== beta ページのヒーロー画像（エナっち） ===== */
.beta-hero-img{display:block;margin:14px auto 6px;width:min(420px,80%);height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.30));animation:beta-float 5s ease-in-out infinite;}
@keyframes beta-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion:reduce){.beta-hero-img{animation:none;}}