/* ポイントのしくみのページだけで使うスタイル（共通の style.css には手を加えない） */
.unit{font-family:"BIZ UDPGothic",sans-serif;font-weight:700;letter-spacing:.02em;line-height:1;}
.unit.xp{color:var(--dj-blue);}
.unit.pt{color:var(--navy);}
.intro-pair{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:8px;}
.chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 22px;box-shadow:0 8px 24px rgba(31,56,100,.10);font-weight:700;color:var(--navy);font-size:15px;}
.chip .unit{font-size:26px;}
.plus{font-family:"BIZ UDPGothic",sans-serif;font-weight:700;font-size:28px;color:var(--navy);}

/* 2. XPとPtのちがい：2枚のカード */
.vs{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
.vs .panel{display:flex;flex-direction:column;gap:12px;border-top:7px solid var(--c);}
.vs .unit{font-size:56px;}
.vs h3{margin:0;font-size:20px;}
.vs ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.vs li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink);line-height:1.6;}
.vs li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);margin-top:8px;}

/* 3. もらえる量 */
.earn{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.earn .panel{display:flex;flex-direction:column;gap:14px;}
.earn h3{margin:0;font-size:20px;}
.earn .amt{display:flex;gap:14px;flex-wrap:wrap;}
.earn .amt div{flex:1;min-width:110px;background:var(--bg-soft);border-radius:14px;padding:14px 16px;text-align:center;}
.earn .amt .unit{font-size:40px;}
.earn .amt .unit small{font-size:18px;margin-left:2px;}
.earn .amt span{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--muted);}

/* 4. ためて使うまでの流れ：横に並ぶステップ（狭い画面では縦） */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;}
.flow .step h3{word-break:keep-all;overflow-wrap:anywhere;}
.flow .step{position:relative;box-shadow:0 8px 24px rgba(31,56,100,.10);text-align:center;align-items:center;padding:22px 14px;}
.flow .step h3{font-size:16px;line-height:1.5;}
.flow .step p{font-size:13px;}
.flow .step:not(:last-child)::after{content:"";position:absolute;right:-21px;top:40px;border:8px solid transparent;border-left:12px solid var(--navy);}
.flow .step.hl{background:var(--navy);}
.flow .step.hl h3,.flow .step.hl p{color:#fff;}
@media (max-width:1100px){
  .flow{grid-template-columns:1fr;gap:26px;}
  .flow .step{flex-direction:row;text-align:left;padding:16px 18px;gap:14px;}
  .flow .step .n{flex:none;}
  .flow .step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-24px;margin-left:-8px;border:8px solid transparent;border-top:12px solid var(--navy);}
}

.nb{display:inline-block;}
.note{font-size:12px;color:var(--muted);margin:16px 0 0;line-height:1.7;}
@media (max-width:560px){
  section{padding-block:52px;}
  .vs .panel{padding:22px 20px;}
}