/* HALUENE shared styles — app-green.css
   This file consolidates common styling used across the demo pages.
*/

/* 1) Design Tokens */
:root{
  --bg:#f8f5f2;
  --ink:#2b2b2b;
  --muted:#7b7b7b;
  --white:#ffffff;
  --line:#dfeee6;
  --accent-1:#35d889;
  --accent-2:#00b26f;
  --accent-3:#0a9963;
  --thead:#ecf7f1;
}

/* 2) Reset & Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:15px/1.65 system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","游ゴシック体",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* 3) App Bar & Breadcrumbs */
.appbar{background:#fff; border-bottom:1px solid var(--line)}
.appbar-inner{
  max-width:1200px; margin:auto; height:64px;
  display:grid; grid-template-columns: 44px 1fr auto; align-items:center; gap:12px; padding:0 16px;
}
.hamburger.dummy {
  visibility: hidden; /* 枠は残して透明化 */
}
.hamburger{width:32px; height:32px; border-radius:6px; border:1px solid var(--line); background:#fff; display:grid; place-items:center}
.hamburger span{width:18px; height:2px; background:#1b9d63; box-shadow:0 6px 0 #1b9d63, 0 -6px 0 #1b9d63;}
.brand{display:flex; justify-content:center}
.brand img{height:36px; width:auto}
.pill{padding:8px 12px; border-radius:20px; background:#222; color:#fff; font-weight:700; text-decoration:none}
.appbar-grad{height:8px; background:linear-gradient(90deg,var(--accent-2),var(--accent-1) 45%,var(--accent-3))}

.crumbs{max-width:1200px; margin:10px auto 0; padding:0 16px 8px; color:#498a6d; font-weight:600}

/* 4) Panels, Menus, Layout */
.page{
  max-width:1200px; margin:0 auto; padding:10px 16px 40px;
  display:grid; grid-template-columns: 280px 1fr; gap:24px;
}
.panel{
  background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.panel h3{margin:0; padding:14px 16px; border-bottom:2px solid #bfead5; font-size:16px}

.vmenu{list-style:none; margin:0; padding:10px}
.vmenu a{
  display:block; padding:13px 14px; margin:8px 0;
  border-radius:10px; text-decoration:none; color:#333; background:#fff;
  border:1.5px solid #cfe9db;
  transition:background .15s, border-color .15s, transform .04s, box-shadow .15s;
}
.vmenu--bg a{ background:#ecfff6; border-color:#c7f5df; }
.vmenu a:hover{ background:#e7fff1; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(0,178,111,.15); }
.vmenu a.active{ background:#e7fff1; border-color:var(--accent-2); font-weight:700; box-shadow:inset 0 0 0 2px rgba(0,178,111,.25); }

/* 5) Common Components */
.content header{padding:14px 16px 10px; border-bottom:1px solid var(--line)}
.content h1{margin:0; font-size:20px}

/* forms */
/* 共通入力欄（強制的に適用） */
.form .input,
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background-color: #f0faec !important;   /* ← 他のスタイルに負けない */
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}

/* フォーカス時の強調 */
.form .input:focus,
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent-2) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,178,111,0.15);
}
/* --- フォーム整形 --- */
.form {
  display: grid;
  gap: 16px; /* 各フィールド間の余白 */
  max-width: 700px; /* コンテンツ幅を制限 */
}

.field {
  display: grid;
   grid-template-columns: minmax(140px, 220px) 1fr; /* ← ラベル幅を可変 */
  align-items: center;
  gap: 12px;
}

.field label {
  font-weight: 600;
  color: #333;
  text-align: right;   /* ラベルを右寄せ */
  white-space: normal; 
  overflow: visible;
  text-overflow: initial; 
}

.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  font-size: 15px;
}

.readonly{background:#f7fffb}
.hint{color:#8b7964}
.error{color:#b00020; font-weight:700; font-size:13px; display:none}
.ok{color:#0f8e4a; font-weight:700; display:none}
.actions {
  display: flex;
  justify-content: flex-end; /* 右寄せ。中央なら center */
  margin-top: 20px;
  gap: 12px;
}

.btn {
  background: var(--accent-1);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.btn:hover {
  background: var(--accent-2);
}
.btn.secondary{
  background:#fff; color:#6b5b4a; border:1.5px solid var(--line); box-shadow:none; font-weight:700;
}

/* stepper */
.stepper{display:grid; grid-template-columns:repeat(5,1fr); border-radius:10px 10px 0 0; border-bottom:1px solid var(--line); overflow:hidden}
.step{position:relative; padding:14px 10px; text-align:center; font-weight:800; letter-spacing:.05em; color:#9f958b; background:#eaf7f1}
.step:not(:last-child)::after{content:""; position:absolute; right:-12px; top:0; border-style:solid; border-width:26px 0 26px 12px; border-color:transparent transparent transparent #eaf7f1}
.step .lbl{display:block; font-size:12px; opacity:.85}
.step.active{color:#fff; background:linear-gradient(90deg,var(--accent-2),var(--accent-1))}
.step.active::after{border-left-color:var(--accent-1)}
.step.done{color:#0f8e4a; background:#d9ffef}
.step.done::after{border-left-color:#d9ffef}

/* sections */
.sect{padding:18px}
.sect h2{margin:0 0 10px; font-size:16px; border-left:4px solid var(--accent-2); padding-left:10px}

/* article / news */
.article header{ padding:18px 18px 8px; border-bottom:1px solid var(--line); }
.title{ margin:0 0 8px; font-size:22px; line-height:1.4; letter-spacing:.02em; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; color:#8e7a64; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; font-weight:700; font-size:12px;
  background:#ecfff6; color:#0a6b44; border:1px solid #bfead5; }
.date{ font-variant-numeric:tabular-nums; }
.divider{height:6px; background:linear-gradient(90deg,var(--accent-2),var(--accent-1) 55%,var(--accent-3)); opacity:.15}
.article .body{ padding:16px 18px 22px; }
.article .body h2{ margin:20px 0 8px; font-size:16px; border-left:4px solid var(--accent-2); padding-left:10px; }
.article .body p{ margin:10px 0; }
.article .body ul{ margin:8px 0 8px 1.4em; }
.callout{ margin:14px 0; padding:12px 14px; border:1px dashed #bfead5; background:#f5fffa; border-radius:10px; color:#3e6a51; }

.news .list{
  display:flex;
  flex-direction:column;
  gap:8px;                  /* 各行の間隔（お好みで 4〜10px） */
  margin:8px 0;
}

.news .item:first-child{border-top:0}
.news .title::before{content:""; position:absolute; left:0; top:50%; width:8px; height:8px; border-radius:50%; background:#00c076; box-shadow:0 0 0 3px #d9ffef; transform:translateY(-50%);}
.news .item{
  display:flex;
  align-items:center;
  gap:16px;                 /* 日付とタイトルの間 */
  padding:8px 12px;         /* ← 内側余白を小さく */
  border:1px solid var(--line);
  border-radius:6px;        /* ← 角丸小さく */
  background:#fff;
  box-shadow:none;          /* ← フワッとした大きな影をOFF */
}

.news .item:hover{
  background:#fbfffd;
  border-color:#d7efe6;
}

/* 日付は固定幅・折り返しなし */
.news .date{
  flex:0 0 96px;            /* 80–110px で調整可 */
  font-size:.9rem;
  color:#6b7280;
  white-space:nowrap;       /* ← 改行させない */
}

/* タイトルは1行で省略（長文は …） */
.news .title{
  flex:1 1 auto;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position: relative; 
  padding-left: 16px;
}

/* パネル自体も少しタイトに */
.content.panel{ padding:12px 16px 18px; }
.content.panel header{ padding:2px 0 8px; }

/* kv & tables for billing */
.kv{display:grid; grid-template-columns: 220px 1fr; gap:8px}
.kv .k{background:var(--accent-2); color:#fff; font-weight:700; padding:10px 12px; border-radius:6px}
.kv .v{background:#f5fffa; border:1px solid #bfead5; color:#2f4a3f; padding:10px 12px; border-radius:6px}
.kv2{display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap:8px}
.kv2 .k{grid-column: span 1; background:var(--accent-2); color:#fff; font-weight:700; padding:10px 12px; border-radius:6px}
.kv2 .v{grid-column: span 1; background:#f5fffa; border:1px solid #bfead5; color:#2f4a3f; padding:10px 12px; border-radius:6px}

.table{width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.table thead th{background:var(--thead); color:#5c534a; text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); font-weight:700}
.table tbody td{padding:10px 10px; border-top:1px solid var(--line); background:#fff}
.table tr:nth-child(even) td{background:#f1fbf6}
.table tfoot td{padding:12px 10px; background:#eafff3; font-weight:800; border-top:2px solid #d0eadc}
.right{text-align:right}
.center{text-align:center}

.sect .bar{
  background:linear-gradient(90deg,var(--accent-2),var(--accent-1) 55%,var(--accent-3));
  color:#fff; font-weight:800; letter-spacing:.05em; padding:10px 12px; font-size:14px;
}
.sect .inner{padding:12px}
.note{margin:10px 0; color:#3e6a51; background:#f5fffa; border:1px dashed #bfead5; border-radius:8px; padding:10px 12px}

/* 6) Utilities & Responsive */
.copy{padding:22px 0 30px; text-align:center; color:#a39789; font-size:13px}
@media (max-width: 981px){ .page{grid-template-columns:1fr} .brand{justify-content:flex-start} }
@media (max-width: 720px){ .step .lbl{display:none} }

/* ===== Login page module ===== */
.hero{
  position:relative;
  background:linear-gradient(180deg,#eafff4 0%, #f9fffb 100%);
  padding:24px 16px 40px;
  border-bottom:1px solid var(--line);
}
.hero .container{
  max-width:1100px; margin:auto;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center;
}
.brand{display:flex; flex-direction:column; align-items:center; gap:14px}
.brand-box{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 18px; box-shadow:0 10px 26px rgba(0,0,0,.06);}
.brand .logo{height:56px; width:auto}
.brand .pill{margin-left:auto}

.card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.card h2{margin:6px 0 12px; font-size:18px}
.card .field{display:grid; grid-template-columns: 36px 1fr; gap:10px; align-items:center; margin:12px 0}
.card .field .icon{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#eafff4; color:#0a9963; border:1px solid #c9eadb}
.card .field input{width:100%; padding:12px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font:inherit}
.card .actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px}
.sub a{font-size:13px; color:#0a9963; text-decoration:underline}
.btn{appearance:none; border:0; border-radius:28px; padding:10px 18px; font-weight:800; cursor:pointer;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-3)); color:#fff; box-shadow:0 8px 20px rgba(0,178,111,.25);}

.news{max-width:1100px; margin:22px auto; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.05)}
.news-header{padding:12px 14px; font-weight:800; border-bottom:1px solid var(--line)}
.news ul{list-style:none; margin:0; padding:0}
.news li{display:grid; grid-template-columns: 120px 1fr; gap:18px; align-items:center; padding:14px; border-top:1px solid var(--line)}
.news li:first-child{border-top:0}
.news .date{color:#7a6a59}
.news .title a{text-decoration:none; border-bottom:1px dotted #a5dcca}
.news .title a:hover{border-bottom-color:#0a9963}

@media (max-width: 900px){
  .hero .container{grid-template-columns: 1fr}
  .card{order:2}
}

/* === Login hero: deep green with decorative shapes (news area unaffected) === */
.hero{
  position:relative;
  min-height:360px;
  padding:56px 16px 64px;
  /* 濃い緑への多段グラデーション */
  background:
    linear-gradient(100deg, #03c27a 0%, #00b26f 34%, #00a364 62%, #008c58 100%);
  /* ヒーローだけ反映。下のセクションには影響しない */
}

/* 左上の斜めハイライト＋淡い円光（ライト感） */
.hero::before{
  content:"";
  position:absolute; inset:-60px -40px 40% -40px;
  background:
    /* 円光（大） */
    radial-gradient(330px 330px at 28% 48%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
    /* 円光（小） */
    radial-gradient(160px 160px at 38% 66%, rgba(255,255,255,.08), rgba(255,255,255,0) 72%),
    /* 左上から差し込む斜めの白 */
    conic-gradient(from 230deg at -10% -40%, rgba(255,255,255,.22), rgba(255,255,255,0) 12%);
  pointer-events:none;
}

/* ロゴカード/ログインカードの立体感を少し強める（元のトーンに合わせて緑系の影） */
.brand-box{
  box-shadow:
    0 20px 50px rgba(0,0,0,.15),
    0 0 0 1px rgba(255,255,255,.6) inset;
}
.card{
  box-shadow:
    0 18px 36px rgba(0, 140, 88, .22),
    0 2px 10px rgba(0,0,0,.06);
  border:1px solid rgba(255,255,255,.65);
}
.hero .card {
  padding: 16px 20px;           /* ← 内側余白を控えめに */
  border-radius: 8px;           /* ← 角丸小さめ */
  box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* ← 影を薄く */
  max-width: 460px;             /* ← 幅も広がりすぎないように制限 */
  margin: auto;
}

/* 入力行のレイアウトとアイコンサイズを拡大 */
.hero .card .field{
  grid-template-columns: 44px 1fr; /* ← アイコン列を太く */
  gap: 12px;
}
.hero .card .field .icon{
  width: 44px; height: 44px;  border-radius: 12px;
}

/* 入力欄の“高さ/文字サイズ”を拡大 */
.hero .card .field input{
  height: 44px;               /* ← 高さUP */
  font-size: 16px;
  padding: 10px 12px;
}

/* ログインボタンも高さ合わせ */
.hero .card .actions .btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 24px;
  font-size: 15px;
}

/* 画面が広い時は右カラム幅も少しだけ確保 */
@media (min-width: 980px){
  .hero .container{ grid-template-columns: 1fr 520px; }  /* 右カラムを広く */
  .hero .card{ max-width:520px; width:520px; padding:18px 22px; }
}

/* 入力欄は白を維持しつつ枠線だけ淡い緑ニュアンス */
.field input{
  background:#fff;
  border:1.5px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.field .icon{
  background:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.9);
  color:#00a86b;
}
.hero .card .field{
  grid-template-columns: 52px 1fr;  /* アイコン列を広く */
  gap:14px;
}
.hero .card .field .icon{
  width:48px; height:48px; border-radius:12px;
}

.hero .card .field input{
  height:48px !important;          /* ← 勝たせる */
  line-height:48px !important;
  font-size:16px;
  padding:0 14px;
}

.hero .card .actions .btn{
  height:48px !important;
  line-height:48px !important;
  padding:0 20px;
  border-radius:24px;
  font-size:15px;
}

/* レスポンシブ：幅が狭いときは高さを少し抑える */
@media (max-width: 900px){
  .hero{ min-height:300px; padding:40px 16px 48px; }
}


/* ===== Panel / タイトルと本文の間隔を広げる ===== */
.crumbs{
  margin: 12px auto 20px;      /* パンくずの下に余白を追加（お好みで 24px まで） */
}

.page{
  gap: 24px;                   /* サイドバーと本文の間隔。既存より広めに */
}

.content.panel{
  padding: 16px 20px 24px;     /* パネル上下の内側余白を少し増やす */
}

.content.panel header{
  padding: 4px 0 12px;         /* タイトル行の下側に余白 */
  border-bottom: 1px solid var(--line);
}

.content.panel header h1{
  margin: 0;                   /* 変な外側余白をリセット */
  line-height: 1.35;
}

/* タイトル直下の要素に“ひと呼吸分”の余白を必ずつける */
.content.panel header + *{
  margin-top: 18px;            /* 足りなければ 20〜24px に */
}

/* ついでにフォームの行間も少し広げる（任意） */
.form{ row-gap: 18px; }        /* 既に gap 指定があれば上書きされます */

/* ===========================
   Setup Wizard (scoped)
   =========================== */
.setup :root{
  --bg:#f8f5f2; --ink:#2b2b2b; --muted:#7b7b7b; --white:#fff;
  --line:#dfeee6; --accent-1:#35d889; --accent-2:#00b26f; --accent-3:#0a9963;
}

/* ヘッダー（ロゴをカードで中央配置） */
.setup .appbar{background:transparent; border:0}
.setup .appbar-inner{
  max-width:1200px; margin:16px auto 8px;
  display:flex; justify-content:center; align-items:center;
}
.setup .brand-box{
  display:flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:16px;
  background:#fff; border:1px solid #e6f4ee;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.setup .brand-box img{ height:48px; width:auto; display:block; }
.setup .appbar-grad{
  height:6px; background:linear-gradient(90deg,var(--accent-2),var(--accent-1) 45%,var(--accent-3));
}

/* コンテンツ幅と余白 */
.setup .wrap{ max-width:1100px; margin:0 auto; padding:0 16px 24px; }
.setup .panel{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.setup .panel + .panel{ margin-top:14px; }
.setup .sect{ padding:18px; }

/* ステッパー（上部タブの緑グラデ） */
.setup .stepper{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-radius:12px 12px 0 0; overflow:hidden; border-bottom:1px solid var(--line);
}
.setup .step{
  position:relative; padding:16px 10px; text-align:center;
  font-weight:800; letter-spacing:.05em; color:#9f958b; background:#eaf7f1;
}
.setup .step .lbl{ display:block; font-size:12px; opacity:.85; }
.setup .step:not(:last-child)::after{
  content:""; position:absolute; right:-12px; top:0; width:0; height:0;
  border-style:solid; border-width:28px 0 28px 12px; border-color:transparent transparent transparent #eaf7f1;
}
.setup .step.active{ color:#fff; background:linear-gradient(90deg,var(--accent-2),var(--accent-1)); }
.setup .step.active::after{ border-left-color:var(--accent-1); }
.setup .step.done{ color:#0f8e4a; background:#d9ffef; }
.setup .step.done::after{ border-left-color:#d9ffef; }

/* 見出しと本文の間隔 */
.setup .content.panel header{ padding:4px 0 10px; border-bottom:1px solid var(--line); }
.setup .content.panel header + *{ margin-top:16px; }

/* フォーム（横並びで整える） */
.setup .form{ display:grid; gap:14px; max-width:900px; }
.setup .form .field{
  display:grid; grid-template-columns: 220px 1fr;
  align-items:center; gap:12px;
}
.setup .form .field label{ font-weight:700; color:#6f5b45; text-align:right; white-space:normal; }
.setup .form .input,
.setup .form input,
.setup .form select,
.setup .form textarea{
  width:100%; padding:11px 12px; border-radius:10px;
  border:1.5px solid var(--line); background:#f7fffb;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.setup .form .input:focus,
.setup .form input:focus,
.setup .form select:focus,
.setup .form textarea:focus{
  outline:none; background:#fff; border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(0,178,111,.15);
}

/* 読み取り専用の見た目 */
.setup .readonly{
  padding:10px 12px; border-radius:10px; background:#f7fffb;
  border:1.5px solid var(--line);
}

/* ボタン */
.setup .actions{ display:flex; gap:12px; justify-content:flex-start; margin-top:6px; }
.setup .btn{
  appearance:none; border:0; border-radius:24px; padding:10px 18px;
  font-weight:800; cursor:pointer; color:#fff;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-3));
  box-shadow:0 8px 20px rgba(0,178,111,.22);
}
.setup .btn.secondary{
  background:#fff; color:#6b5b4a; border:1.5px solid var(--line); box-shadow:none;
}

/* お知らせボックス調 */
.setup .note{
  margin-top:10px; padding:12px; border:1px dashed #bfead5;
  background:#f5fffa; border-radius:10px; color:#3e6a51;
}

/* コピーライト */
.setup .copy{ padding:22px 0 30px; text-align:center; color:#a39789; font-size:13px; }
@media (max-width:720px){
  .setup .step .lbl{ display:none; }
  .setup .form .field{ grid-template-columns: 1fr; }
  .setup .form .field label{ text-align:left; padding-bottom:4px; }
}

/* billingスタイル */
/* ===== Billing page polish ===== */
.billing-page .card{ width:100%; max-width:none; margin:0 0 18px; }

/* セクション見出しを緑グラデに */
.billing-page .box-header{
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  color:#fff; border:0; padding:10px 14px; font-weight:700;
  border-radius:8px 8px 0 0;
}

/* 各テーブルを“箱”として独立させる（間隔＋枠＋影） */
.billing-page .kv-table,
.billing-page .amount-table,
.billing-page .stripe-table{
  width:100%;
  border-collapse:separate;   /* ← くっつかない */
  border-spacing:0;
  margin:14px 0;              /* ← テーブル間の余白 */
  border:1.5px solid #cfe9db; /* 緑寄りのライン */
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,178,111,.08);
}

/* 罫線色や背景を緑トーンへ */
.billing-page .kv-table th,
.billing-page .kv-table td,
.billing-page .amount-table th,
.billing-page .amount-table td,
.billing-page .stripe-table th,
.billing-page .stripe-table td{
  border:1px solid #d8efe4;
  padding:10px;
}

.billing-page .kv-table th{ background:#ecfff6; color:#2f4a3f; width:22%; white-space:nowrap; }
.billing-page .kv-table.two-col th{ width:18%; }

/* 金額サマリのヘッダーを少し濃い緑 */
.billing-page .amount-table thead th{ background:#e7fff1; color:#2f4a3f; }
.billing-page .amount-table .num,
.billing-page .kv-table .num,
.billing-page .stripe-table .num{ text-align:right; }

/* 内訳テーブルの配色（見出しは淡緑、偶数行シマ） */
.billing-page .stripe-table thead th{ background:#e1f7ee; color:#2f4a3f; }
.billing-page .stripe-table tbody tr:nth-child(even){ background:#f5fffa; }

/* スマホで2列→1列落ち */
@media (max-width: 720px){
  .billing-page .kv-table.two-col th{ width:40%; }
}

.billing-page .kv-table,
.billing-page .amount-table,
.billing-page .stripe-table{
  margin: 18px 0;                 /* ちょい広め */
}
.billing-page .card + .card{      /* Billごとの箱の間 */
  margin-top: 22px;
}

.billing-page .info-bar{
  margin: 12px 0 6px;
  padding: 10px 14px;
  background:#ecfff6;
  border:1.5px solid #cfe9db;
  border-radius:10px;
  color:#1b6b4f;
  font-weight:700;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  box-shadow:0 4px 12px rgba(0,178,111,.08);
}
.billing-page .info-bar .label{color:#0a6b44; font-weight:800;}
.billing-page .info-bar .sep{opacity:.5}

/* テーブル間の距離と配色（前に入れた緑トーンと相性◎） */
.billing-page .kv-table,
.billing-page .amount-table,
.billing-page .stripe-table{
  margin: 14px 0;
}
.billing-page .info-bar .label{
  background:#dff8ee; padding:2px 8px; border-radius:999px; font-weight:800;
}
.billing-page .info-bar .sep{opacity:.4}