:root{
  --brand:#b6232a; -/* Mango House Red */
  --brand-ink:#7d151a;
  --bg:#ffffff; --fg:#0f172a; /* slategrey-900 */
  --muted:#64748b; --line:#dcdada; --card:#ffffff;
  --accent:#f59e0b; --ok:#10b981; --warn:#ffd0b7; --brand2:#6c6c6c;
}

/* Sections */
.mh-section{padding:1.25rem .75rem;margin:0 auto;max-width:1080px}
.mh-section>h2{font-size:clamp(1.95rem,1rem + .8vw,1.6rem);font-weight:700;margin:0 0 1.5rem;position:relative}
.mh-section>h2::after{content:"";display:block;width:64px;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:3px;margin:.35rem 0 0}
.mh-section .sub{color:var(--muted);margin:.25rem 0 .75rem}
.mh-section>h3{font-size:clamp(1.75rem,1rem + .8vw,1.6rem);font-weight:700;margin:1.5rem 0 .45rem;position:relative}
.mh-section>p{padding:0 15px 0;}
/* Grid */
.grid{display:grid;gap:10px}
.grid.methods{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:720px){.grid.methods{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid.methods{grid-template-columns:repeat(3,1fr)}}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 3px 5px rgba(0,0,0,.05)}
.card-head{display:flex;align-items:center;gap:.5rem}
.card .icon{font-size:11.9rem!important}
.card h3{margin:0;line-height:2.5;font-size:1.95rem;font-weight:700;color:#b6232a;}
.card .desc{margin:1.35rem 0;color:var(--fg)}
.bullets{margin:.35rem 1.2rem 0;padding-left:1.1rem;}
.bullets li{list-style:square;}
.bullets a{text-decoration:underline!important;}

/* Pills */
.pill{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem 1.35rem;border-radius:999px;border:1px solid var(--line);font-size:1.4rem}
.pill-primary{background:color-mix(in srgb,var(--brand) 10%, var(--card));border-color:color-mix(in srgb,var(--brand) 35%,var(--line));color:var(--brand-ink)}
.pill-warn{background:color-mix(in srgb,var(--warn) 12%, var(--card));border-color:color-mix(in srgb,var(--warn) 40%,var(--line));}

/* Tables */
.table-wrap{border:1px solid var(--line);border-radius:5px;overflow:auto;margin:0%;}
.mh-table{width:100%;border-collapse:separate;border-spacing:0;min-width:60px}
.mh-table th,.mh-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.mh-table thead th{position:sticky;top:0;background:var(--bg);z-index:1}
.mh-table tbody tr:nth-child(odd){background:color-mix(in srgb,var(--bg) 92%, var(--brand2) 8%)}

.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-weight:700}
.badge-free{background:color-mix(in srgb,#4f46e5 15%, var(--bg));color:#3730a3}
.badge-paid{background:color-mix(in srgb,#f97316 18%, var(--bg));color:#9a3412}

.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem}
.chip-company::before{content:"\2714"}

/* Notes */
.notes{margin:.25rem 0 0;padding-left:1.25rem}
.notes li{list-style:square;margin:1rem 0 0;}
.notes{margin:.35rem 1.2rem 0;padding-left:1.1rem; line-height:2.2rem;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}
/* Settlement icons strip（サイト準拠） */
.settlementarea{margin:8px auto 16px;max-width:1080px;padding:4px 12px}
.settlementarea>p{margin:0 0 6px;font-weight:700;color:var(--brand)}
.settlement{display:flex;flex-wrap:wrap;gap:10px 14px;list-style:none;padding:0;margin:6px 0}
.settlement li{display:flex;align-items:center}
.settlement .imgauto{height:32px;max-width:100%;width:auto;display:block}
@media (min-width:768px){.settlement .imgauto{height:36px}}

/* 支払い方法カード内のロゴ */
.pm-icon{height:30px;width:auto;display:block}
@media (min-width:640px){.pm-icon{height:22px}}
.card-head .pm-icon{margin-right:.25rem}

/* h3を別段に：1行目=アイコン+ピル、2行目=見出し */
.card-head{flex-wrap:wrap}
.card-head h3{flex:1 0 100%;order:2;margin-top:.25rem}
.mini{font-size:1.2rem;}
.mh-table th{background-color:#c9c9c9!important; }

/* ▼ 見た目の基本設定 */
:root{
  --flow-color: #7a1a1a; /* 文字＆矢印色（お好みで変更） */
  --step-gap: 10px;      /* ステップ同士の間隔 */
}

.flow-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;     /* スナップ（任意） */
  padding: 2px 2px;
  border-radius: 8px;
}

.flow-steps{
  margin: 0;
  padding: 6px 6px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--step-gap);
  white-space: nowrap;               /* 1行固定 */
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--flow-color);
}

/* ▼ 各ステップ */
.step{
  position: relative;
  line-height: 1.1;
  font-size: clamp(14px, 2.3vw, 22px); /* 画像の細め文字に近いサイズ感 */
  scroll-snap-align: start;
  padding: 2px 0;
}

/* ▼ 区切りの山括弧（＞）を擬似要素で生成 */
.step:not(:last-child)::after{
  content: "";
  display: inline-block;
  width: 20px;   /* 矢印の幅 */
  height: 20px;  /* 矢印の高さ */
  margin-left: var(--step-gap);
  /* 右向き山括弧のSVG（塗り=現在の文字色） */
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path fill="%23000" d="M7.2 2.6L18 11l-10.8 8.4-2.4-3.1L12.7 11 4.8 5.7l2.4-3.1z"/></svg>') no-repeat 50% 50% / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path fill="%23000" d="M7.2 2.6L18 11l-10.8 8.4-2.4-3.1L12.7 11 4.8 5.7l2.4-3.1z"/></svg>') no-repeat 50% 50% / contain;
}

/* ▼ スクロールバーを控えめに（対応ブラウザ） */
.flow-scroll::-webkit-scrollbar{ height: 3px; }