/* 借りずに稼ぐ.com 共通スタイル（デザイン.md 2026-08-29 改定版）
   白 #fff / 黒 #000 / 蛍光イエロー #eeff00。影なし・黒2px罫線・角はピルと円だけ。
   PCでもコンテンツは中央のスマホ幅列（520px）。 */
:root{
  --ink:#000; --bg:#fff; --y:#eeff00; --gray:#f4f4f4; --ghost:#f0f0f0; --sub:#555;
  --en:"Manrope",-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:520px;margin:0 auto;padding:0 20px}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}

/* 左右の飾り帯（広い画面のみ） */
.rail{display:none}
@media(min-width:1240px){
  .rail{display:block;position:fixed;top:0;bottom:0;width:150px;z-index:0;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='480' viewBox='0 0 150 480'><g stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'><circle cx='75' cy='60' r='34' fill='%23eeff00'/><path d='M61 46 L75 66 L89 46'/><path d='M75 66 L75 90'/><path d='M64 74 H86 M64 82 H86'/><path d='M30 140 q20 20 0 40 q-20 20 0 40'/><path d='M100 150 v20 M90 160 h20 M93 153 l14 14 M107 153 l-14 14'/><g transform='rotate(-8 75 267)'><rect x='40' y='250' width='70' height='34'/><path d='M50 262 H100 M50 272 H86'/></g><circle cx='104' cy='340' r='11'/><path d='M38 410 c30 12 52 2 72 -16'/><path d='M98 390 l14 3 -6 13'/></g></svg>");
    background-repeat:repeat-y;background-position:center top}
  .rail.left{left:0}
  .rail.right{right:0}
}

/* 最上部の黒帯（PR表記） */
.topbar{background:var(--ink);color:#fff;font-size:11.5px;text-align:center;padding:7px 14px;line-height:1.6;position:relative;z-index:1}

header{border-bottom:2px solid var(--ink);background:#fff;position:sticky;top:0;z-index:10}
/* ヘッダーだけは全幅（ロゴ左端・リンク右端） */
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:none;padding:0 24px}
.brand{font-weight:900;font-size:18px;letter-spacing:.02em;text-decoration:none;color:inherit}
.brand span{background:linear-gradient(transparent 70%,var(--y) 70%)}

/* HERO */
.hero{padding:64px 0 56px;text-align:center}
.tagchip,.kicker{display:inline-block;font-size:12.5px;letter-spacing:.1em;font-weight:700;border:2px solid var(--ink);padding:6px 20px;border-radius:100px;margin-bottom:30px;background:none;color:var(--ink)}
h1{font-size:33px;font-weight:900;line-height:1.65;margin-bottom:20px;letter-spacing:.02em}
h1 .hl{background:linear-gradient(transparent 72%,var(--y) 72%)}
.lead{font-size:15.5px;margin:0 auto 44px;max-width:640px;text-align:left}
.lead b{background:none}

/* スマホ枠（中身は本物のページのスクショ） */
.phone-stage{position:relative;display:inline-block;margin-bottom:8px}
.phone{width:300px;border:8px solid var(--ink);border-radius:44px;overflow:hidden;background:#fff;position:relative}
.phone::before{content:"";display:block;position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:10px;border-radius:100px;background:var(--ink);z-index:2}
.phone img{width:100%;height:520px;object-fit:cover;object-position:top;display:block}
.badge{position:absolute;top:-22px;right:-40px;width:88px;height:88px;border-radius:100%;background:var(--y);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;line-height:1.4;transform:rotate(10deg);z-index:3}
.doodle{position:absolute;z-index:3}
.doodle text{font-weight:900;font-size:14px;font-family:inherit}
.d-left{left:-160px;top:120px}
.d-right{right:-165px;bottom:130px}
@media(max-width:760px){.d-left,.d-right{display:none}.badge{right:-14px}}
.phone-cap{font-size:12.5px;color:var(--sub);margin:14px 0 36px}

.cta-lead{font-weight:900;font-size:18px;margin-bottom:16px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;text-decoration:none;border:2px solid var(--ink);cursor:pointer;border-radius:100px;padding:16px 34px;font-weight:700;font-size:15px;transition:.15s;font-family:inherit;background:var(--ink);color:#fff}
.btn:hover{background:#fff;color:var(--ink)}
.note-mini{font-size:12.5px;color:var(--sub);margin-top:18px}
.note-mini a{font-weight:700;color:var(--ink)}

/* 4つの約束タイル */
.tiles{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);margin:8px 0 0}
.tile{padding:18px 14px;border-left:2px solid var(--ink);font-size:12.5px;line-height:1.7;color:var(--sub)}
.tile:nth-child(odd){border-left:none}
.tile:nth-child(n+3){border-top:2px solid var(--ink)}
.tile b{display:block;color:var(--ink);font-size:14.5px;font-weight:900}

/* セクション共通 */
section{padding:72px 0 64px}
.eyebrow{font-family:var(--en);font-weight:800;font-size:14px;letter-spacing:.18em;display:inline-block;margin-bottom:8px}
.eyebrow::before{content:"";display:inline-block;width:10px;height:10px;background:var(--y);border:2px solid var(--ink);margin-right:9px}
.eyebrow .jp{font-family:"Noto Sans JP","Hiragino Sans",Meiryo,sans-serif;font-weight:400;letter-spacing:.08em;font-size:13px}
h2{font-size:31px;font-weight:900;margin-bottom:14px;letter-spacing:.02em}
h2 .hl{background:linear-gradient(transparent 72%,var(--y) 72%)}
.sec-sub{font-size:14.5px;color:var(--sub);margin-bottom:30px}
p{margin-bottom:14px}

/* 実際にやった記録 */
.record{border-top:2px solid var(--ink)}
.proof-row{display:block;border-bottom:2px solid var(--ink);padding:20px 4px}
.proof-row .what{font-size:14.5px;display:block}
.proof-row .result{font-weight:700;font-size:15.5px;line-height:1.8;display:block;margin:4px 0}
.proof-row .result .u{background:linear-gradient(transparent 70%,var(--y) 70%)}
.proof-row .go2{font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:underline;display:inline-block;margin-top:2px}

/* POINT */
.point-sec{position:relative;border-top:2px solid var(--ink);padding:84px 0 64px;overflow:hidden}
.point-water{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-family:var(--en);font-weight:800;font-size:120px;line-height:1;color:var(--ghost);letter-spacing:.02em;white-space:nowrap;user-select:none;pointer-events:none}
.point-inner{position:relative;text-align:center;max-width:640px;margin:0 auto}
.point-label{font-family:var(--en);font-weight:800;font-size:20px;display:block;margin-bottom:10px}
.point-inner h3{font-size:27px;font-weight:900;margin-bottom:16px}
.point-inner h3 .hl{background:linear-gradient(transparent 72%,var(--y) 72%)}
.point-inner p{font-size:14.5px;text-align:left}
.point-meta{display:inline-block;border:2px solid var(--ink);padding:8px 18px;font-weight:900;font-size:14px;margin:6px 0 22px}
.point-inner .btn{margin-top:4px}

/* カード（ハブページ用） */
.cards{display:grid;gap:22px}
.card{background:#fff;border:2px solid var(--ink);padding:24px 22px}
.card .tag{display:inline-block;font-size:11.5px;letter-spacing:.08em;font-weight:700;border:2px solid var(--ink);padding:2px 12px;margin-bottom:12px}
.card h3{font-size:17.5px;font-weight:900;margin-bottom:8px;line-height:1.5}
.card p{font-size:14px;margin-bottom:16px}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.price{font-weight:900;font-size:14px}
.buy{cursor:pointer;border:2px solid var(--ink);font-family:inherit;font-weight:700;font-size:13.5px;color:#fff;background:var(--ink);padding:10px 20px;border-radius:100px;text-decoration:none;display:inline-block}
.buy:hover{background:#fff;color:var(--ink)}
.buy:disabled{opacity:.6;cursor:default}

/* 対比ボックス（フロー型/ストック型など） */
.contrast{display:grid;gap:22px}
.cbox{background:#fff;border:2px solid var(--ink);padding:24px 22px}
.cbox .cx{display:block;font-size:13px;font-weight:700;color:var(--sub);margin-bottom:2px}
.cbox .co{font-size:16.5px;font-weight:900;margin-bottom:10px;background:linear-gradient(transparent 72%,var(--y) 72%);display:inline}
.cbox p{font-size:14px;margin:12px 0 0}

/* 関連記事への導線カード */
.linkcard{display:block;border:2px solid var(--ink);background:#fff;padding:16px 18px;margin:20px 0;text-decoration:none;transition:.15s}
.linkcard:hover{background:var(--y)}
.linkcard .lc-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;background:var(--y);border:2px solid var(--ink);padding:1px 10px;margin-bottom:8px}
.linkcard:hover .lc-label{background:#fff}
.linkcard .lc-title{display:block;font-weight:900;font-size:15px;line-height:1.5}
.linkcard .lc-title::after{content:"　→"}
.linkcard .lc-desc{display:block;font-size:12.5px;color:var(--sub);margin-top:4px}

/* パンくず */
.crumb{font-size:12.5px;color:var(--sub);margin:18px 0 0}
.crumb a{color:var(--ink);font-weight:700}

/* 手順（丸番号） */
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step::before{counter-increment:s;content:counter(s);flex:0 0 34px;height:34px;border-radius:100%;border:2px solid var(--ink);background:var(--y);color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px}
.step b{display:block;margin-bottom:2px}
.step p{margin:0;font-size:14px}

/* 登録カード */
.regs{display:grid;gap:22px}
.reg{background:#fff;border:2px solid var(--ink);padding:24px 22px;display:flex;flex-direction:column}
.reg .rbadge{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;background:var(--y);border:2px solid var(--ink);padding:2px 12px;margin-bottom:12px;color:var(--ink)}
.reg .rbadge.alt{background:#fff}
.reg h3{font-size:18px;font-weight:900;margin-bottom:4px}
.reg .tagline{font-size:13px;color:var(--sub);margin-bottom:14px}
.reg ul{list-style:none;margin:0 0 18px;padding:0}
.reg li{font-size:13.5px;padding:7px 0;border-top:1px solid #ddd;display:flex;gap:8px}
.reg li:first-child{border-top:none}
.reg .go{margin-top:auto;text-decoration:none;text-align:center;font-weight:700;font-size:14.5px;color:#fff;background:var(--ink);border:2px solid var(--ink);padding:13px 16px;border-radius:100px}
.reg .go:hover{background:#fff;color:var(--ink)}
.reg .howto{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:700;color:var(--ink)}
.reg-note{font-size:12.5px;color:var(--sub);margin-top:14px;background:var(--gray);border:2px solid var(--ink);padding:12px 14px}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px;background:#fff}
th,td{border:2px solid var(--ink);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--gray)}

/* 注意ボックス */
.honest{border:2px solid var(--ink);background:var(--gray);padding:22px}
.honest h2{font-size:18px}
.honest ul{margin:10px 0 0 18px}
.honest li{margin-bottom:8px;font-size:14.5px}

/* 白抜きボタン */
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* 目立たせタグ */
.card .tag.hot{background:var(--y)}

/* email capture */
.optin{background:#fff;border:2px solid var(--ink);padding:32px;max-width:760px}
.optin h2{font-size:22px}
.optin p{font-size:14px}
.optin b{background:linear-gradient(transparent 72%,var(--y) 72%)}
.optin form{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.optin input{flex:1;min-width:220px;padding:14px;border:2px solid var(--ink);border-radius:0;font-size:15px;font-family:inherit}
.optin .msg{font-size:13px;margin-top:10px;min-height:18px}
.optin .msg.ok{font-weight:700}
.optin .msg.err{color:#c0392b}

/* FAQ */
details{border:2px solid var(--ink);padding:4px 18px;background:#fff;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;padding:13px 0;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";font-weight:900;margin-right:12px}
details[open] summary::before{content:"−"}
details p{font-size:14px;padding-bottom:14px}
details a{font-weight:700}

/* FINAL（黒ベタ・全幅） */
.final{background:var(--ink);color:#fff;text-align:center;padding:84px 20px;margin-top:8px;position:relative;z-index:1}
.final h2{font-size:30px;color:#fff}
.final h2 .hl{background:linear-gradient(transparent 72%,var(--y) 72%)}
.final p{margin-bottom:30px}
.final .btn{background:var(--y);color:var(--ink);border-color:var(--y)}
.final .btn:hover{background:var(--ink);color:var(--y)}

footer{padding:34px 0 54px;color:var(--sub);font-size:12px;border-top:2px solid var(--ink)}
footer .disc{background:var(--gray);padding:16px;margin-bottom:18px;line-height:1.7}
footer a{color:var(--ink)}
.fnav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.alert{display:none;background:#fff;border:2px solid #c0392b;color:#c0392b;padding:12px 14px;font-size:13.5px;margin-top:18px;font-weight:700}

@media(max-width:560px){
  h1{font-size:28px}
  h2{font-size:24px}
  .phone{width:256px}
  .phone img{height:450px}
  .point-water{font-size:72px;top:16px}
  .point-inner h3{font-size:22px}
  .final h2{font-size:23px}
}