/* rikubill v8 — 3つの書類（請求書・見積書・領収書）と8機能の部品。v7.css の上に読み込む。色は v7 と同じ 黒・紙・白・黄。 */

/* 書類の流れ（見積 → 請求 → 領収） */
.d-chain{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);align-items:center;margin:0 0 72px}
.d-doc{background:#fff;color:#1b1b1a;border-radius:8px;padding:26px 24px 24px;font-size:11px;line-height:1.55;box-shadow:0 40px 70px -34px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.04);position:relative;min-width:0}
.d-doc .ttl{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #1b1b1a;padding-bottom:8px;margin-bottom:12px}
.d-doc .ttl strong{font-family:var(--f-head);font-weight:900;font-size:19px;letter-spacing:.22em}
.d-doc .ttl em{font-style:normal;font-size:9px;border:1px solid #c33;color:#c33;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:.1em;flex:none}
.d-doc .no{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-num);color:#6b675e;font-size:10.5px;margin:0 0 10px}
.d-doc .to{font-weight:700;font-size:12px;border-bottom:1px solid #1b1b1a;padding-bottom:2px;margin:0 0 10px;display:inline-block}
.d-doc .amt{background:#F4F1E8;border-radius:4px;padding:8px 10px;display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin:0 0 10px}
.d-doc .amt b{font-family:var(--f-num);font-size:18px;letter-spacing:-.01em}
.d-doc ul{list-style:none;margin:0;padding:0}
.d-doc li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid #ece8de}
.d-doc li span:last-child{font-family:var(--f-num)}
.d-doc .from{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:10px;color:#4a4842}
.d-doc .from small{display:block;font-family:var(--f-num);color:#7a766c;font-size:9.5px}
.d-seal{flex:none;width:38px;height:38px;border:2px solid #c8392f;color:#c8392f;border-radius:3px;display:grid;place-items:center;font-family:var(--f-head);font-weight:900;font-size:10px;letter-spacing:.06em;line-height:1.1;text-align:center;transform:rotate(-4deg);opacity:.9}
.d-doc .warn{margin-top:10px;background:var(--yellow-soft);border-left:3px solid var(--yellow);padding:6px 8px;font-size:10px;line-height:1.5;border-radius:2px;color:#3a3934}
.d-doc--quote{transform:rotate(-1.5deg)}
.d-doc--receipt{transform:rotate(1.5deg)}
.d-link{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--yellow);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-align:center;line-height:1.4;padding:0 4px}
.d-link i{display:block;width:100%;max-width:56px;height:2px;background:var(--yellow);position:relative}
.d-link i::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid var(--yellow);border-right:2px solid var(--yellow);transform:rotate(45deg)}
.d-chain-cap{grid-column:1/-1;margin:28px 0 0;font-size:12.5px;color:#8f8b82;text-align:center}

/* 8つの機能 */
.d-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.d-feats li{border-top:1px solid var(--rule-dark);padding:28px 0 36px;min-width:0}
.d-feats .n{display:block;font-family:var(--f-num);font-weight:300;font-size:40px;line-height:1;color:#fff;letter-spacing:-.03em;margin-bottom:18px}
.d-feats .n::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-left:5px;vertical-align:top}
.d-feats h3{font-family:var(--f-head);font-weight:700;font-size:17.5px;line-height:1.5;color:#fff;margin:0 0 10px}
.d-feats p{margin:0;font-size:14px;line-height:1.9;color:#B9B5AB}
.d-feats q{quotes:"「" "」";color:#F1EEE6}
.d-notes{margin:24px 0 0;padding:20px 24px;border:1px solid var(--rule-dark);border-radius:var(--r-md);font-size:13px;line-height:1.9;color:#9d998f}
.d-notes p{margin:0}
.d-notes p+p{margin-top:6px}

/* 使い方ページ：言い方の例 */
.d-say-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--rule)}
.d-say-list li{display:grid;grid-template-columns:minmax(0,5fr) 40px minmax(0,6fr);align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.d-say{justify-self:start;background:#9FE27B;color:#121211;border-radius:18px 18px 6px 18px;padding:10px 16px;font-size:14.5px;line-height:1.7;max-width:100%}
.d-arrow{width:28px;height:2px;background:var(--ink);position:relative;justify-self:center}
.d-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.d-then{font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.d-then b{color:var(--ink)}
.d-say-cap{margin:14px 0 0}

/* 使い方ページ：確認カードの見本を並べる */
.d-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px;align-items:start}
.d-cards figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.d-cards figcaption{font-size:13px;color:var(--mute);text-align:center}
.d-cards .x-card{transform:none;width:min(300px,100%);font-size:12px}
.d-cards .x-card dl{font-size:11.5px}
.d-cards .x-card .kind{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 0;font-weight:700;color:var(--ink);font-size:12.5px}
.d-cards .x-card .kind span{font-size:10.5px;font-weight:500;color:var(--mute)}
.d-cards .x-card .warn{margin:8px 12px 0;background:var(--yellow-soft);border-left:3px solid var(--yellow);padding:7px 9px;font-size:10.5px;line-height:1.6;border-radius:2px;color:#3a3934}

/* 使い方ページ：3つの流れの図（見積→請求→領収、月まとめ） */
.d-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.d-steps li{padding:28px 28px 8px 0;min-width:0}
.d-steps li+li{padding-left:28px;border-left:1px solid var(--rule)}
.d-steps .n{display:block;font-family:var(--f-num);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--mute);margin-bottom:12px}
.d-steps h3{font-family:var(--f-head);font-weight:700;font-size:18px;line-height:1.5;margin:0 0 8px}
.d-steps p{margin:0;font-size:14.5px;line-height:1.9}
.d-month{margin-top:36px;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:28px 32px;max-width:640px}
.band--wash .d-month{background:var(--paper)}
.d-month-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink);margin-bottom:14px}
.d-month-h span{font-family:var(--f-num);font-size:11px;color:var(--mute);letter-spacing:.1em}
.d-month-row{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:13.5px}
.d-month-row span:first-child,.d-month-row span:last-child{font-family:var(--f-num)}
.d-month-row span:last-child{text-align:right;color:var(--ink);font-weight:600}
.d-month-tot{display:flex;justify-content:space-between;border-top:1.5px solid var(--ink);margin-top:4px;padding-top:12px;font-weight:700;color:var(--ink)}
.d-month-tot b{font-family:var(--f-num);font-size:18px}
.d-month .btns{display:flex;gap:10px;margin-top:16px}
.d-month .btns span{flex:1;text-align:center;border-radius:999px;padding:9px 0;font-weight:700;font-size:13px;border:1px solid rgba(18,18,17,.18)}
.d-month .btns .ok{background:var(--ink);color:#fff;border-color:var(--ink);flex:1.4}

/* 一覧の種類バッジ */
.x-list-row .pdf.k{font-family:var(--f-body);font-size:10px}

@media (max-width:1080px){
  .d-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-chain{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr)}
  .d-doc{padding:20px 16px 18px;font-size:10px}
  .d-doc .ttl strong{font-size:16px;letter-spacing:.14em}
}
@media (max-width:900px){
  .d-chain{grid-template-columns:1fr;gap:0;max-width:360px;margin-left:auto;margin-right:auto}
  .d-link{flex-direction:row;justify-content:center;padding:18px 0}
  .d-link i{width:2px;height:28px;max-width:none}
  .d-link i::after{right:auto;left:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .d-doc--quote,.d-doc--receipt{transform:none}
  .d-say-list li{grid-template-columns:1fr;gap:10px}
  .d-arrow{display:none}
  .d-then{padding-left:4px;border-left:3px solid var(--yellow);padding-left:12px}
  .d-cards{grid-template-columns:1fr}
  .d-steps{grid-template-columns:1fr}
  .d-steps li,.d-steps li+li{padding:24px 0 12px;border-left:0;border-top:1px solid var(--rule)}
  .d-steps li:first-child{border-top:0}
}
@media (max-width:600px){
  .d-feats{grid-template-columns:1fr}
  .d-feats li{padding:24px 0 28px}
  .d-feats .n{font-size:34px}
  .d-doc{font-size:11px;padding:22px 20px 20px}
  .d-doc .ttl strong{font-size:18px}
  .d-month{padding:22px 18px}
  .d-month-row{grid-template-columns:56px 1fr auto;font-size:12.5px}
}

/* ===== v8 見た目の調整（freeeを見て取り入れた点。真似ではなく、明るさ・字の太さ・見出しの並べ方・ボタンの形を寄せる） ===== */
:root{--paper:#FAF8F2;--paper-2:#F1EDE2;--r-lg:18px;--r-md:14px;
  --shadow-card:0 0 0 1px rgba(18,18,17,.06),0 6px 18px -10px rgba(18,18,17,.12);
  --shadow-ui:0 0 0 1px rgba(18,18,17,.06),0 24px 48px -24px rgba(18,18,17,.22)}
body{background:#fff;font-size:15.5px;line-height:1.9;color:#3A3934}
/* 字：太すぎる見出しを1段軽く、大きさも控えめに */
.h-display{font-weight:700;letter-spacing:.02em;line-height:1.3}
.x-hero .h-display{font-size:clamp(2rem,4.1vw,3.35rem);margin:22px 0 24px}
.hero .h-display{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.h-section{font-weight:700;font-size:clamp(1.45rem,2.45vw,2.05rem);line-height:1.5;letter-spacing:.03em}
.one-line{font-size:1.02rem;line-height:1.95;color:var(--ink-2)}
.x-bento h3,.x-flow h3,.x-steps h3,.x-assure h3,.x-cmp h3{font-size:18.5px;letter-spacing:.02em}
/* 見出しは中央にそろえ、下に短い説明（freeeのセクション見出しの型） */
.x-head,.x-head--stack{display:block;text-align:center;max-width:780px;margin:0 auto 56px}
.x-head>div{display:block}
.x-head .eyebrow{justify-content:center}
.x-head .h-section{margin:0 0 14px}
.x-head .one-line,.x-head p{margin:0 auto 6px;max-width:40em}
.x-sec{padding:104px 0}
/* 色：黒い面を減らして明るく。黒は文字とフッター、黄は印に */
.x-hero::before{background:linear-gradient(180deg,#FFF8DC 0%,#FFFCF2 62%,#fff 100%)}
.x-stage{background:linear-gradient(155deg,#FFF3C4 0%,#FBE9A6 55%,#F6DF8A 100%);box-shadow:0 0 0 1px rgba(18,18,17,.05),0 30px 60px -36px rgba(120,90,0,.45);border-radius:24px}
.x-stage::before{display:none}
.x-stage::after{background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent)}
.x-phone{box-shadow:0 0 0 1.5px #2a2a27,0 40px 60px -30px rgba(60,45,0,.55)}
.x-paper{box-shadow:0 30px 60px -28px rgba(60,45,0,.55),0 0 0 1px rgba(0,0,0,.05)}
.x-tag{background:#fff;border-color:rgba(18,18,17,.08);color:var(--ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.2)}
.x-rail{border-top-color:rgba(18,18,17,.08)}
/* ボタン：丸すぎない角丸の長方形。主ボタンは黄で目立たせ、もう一つは白地に線 */
.btn{border-radius:10px;min-height:52px;letter-spacing:.03em}
.btn--line{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:0 8px 18px -10px rgba(160,120,0,.6)}
.btn--line:hover{background:#FFD21F;color:var(--ink)}
.btn--ghost{background:#fff;border:1px solid rgba(18,18,17,.25)}
.site-nav .nav-cta a{border-radius:8px;background:var(--ink)}
.sticky-cta{background:rgba(255,255,255,.94)}
/* カード：角を少し締め、影は薄く線で区切る */
.x-bento>li,.x-flow>li{border-radius:16px}
.x-aud>div{border-radius:16px;background:var(--paper)}
.x-ico{border-radius:12px;background:var(--yellow-soft)}
.x-ico svg{stroke:var(--ink)}
/* 比べる表（明るい版） */
.x-cmp>div{border-radius:16px;padding:40px}
.x-cmp .before{background:var(--paper);border:0}
.x-cmp .after{background:#fff;box-shadow:0 0 0 2px var(--yellow)}
.x-cmp .before h3{color:var(--mute)}
.x-cmp .after h3{color:var(--ink)}
.x-cmp li{border-top-color:var(--rule)}
.x-cmp .before li{color:#6f6b62}
.x-cmp .after li{color:var(--ink)}
.x-cmp .before li::before{border-color:#bdb8ad;background:linear-gradient(45deg,transparent 45%,#bdb8ad 45%,#bdb8ad 55%,transparent 55%)}
/* 3つの書類（明るい版） */
#documents{background:var(--paper)}
#documents .d-doc{box-shadow:0 24px 44px -26px rgba(18,18,17,.4),0 0 0 1px rgba(18,18,17,.06)}
#documents .d-link{color:var(--ink)}
#documents .d-link i,#documents .d-link i::after{background:none}
#documents .d-link i{background:var(--ink)}
#documents .d-link i::after{border-color:var(--ink)}
#documents .d-chain-cap{color:var(--mute)}
#documents .d-feats{gap:16px}
#documents .d-feats li{background:#fff;border:0;border-radius:16px;padding:28px 26px 30px;box-shadow:var(--shadow-card)}
#documents .d-feats .n{color:var(--ink);font-size:30px;margin-bottom:14px}
#documents .d-feats h3{color:var(--ink)}
#documents .d-feats p{color:var(--ink-2)}
#documents .d-feats q{color:var(--ink);font-weight:600}
#documents .d-notes{border-color:var(--rule);color:var(--ink-2);background:#fff;text-align:center}
/* 下層ページの見出しまわり */
.hero{padding:80px 0 56px;background:linear-gradient(180deg,#FFF8DC 0%,#fff 100%)}
.band{padding:96px 0}
.band--wash{background:var(--paper)}
.band:not(.band--wash) .note-box{background:var(--paper)}
.note-box{border-radius:14px}
.x-links a{border-radius:8px}
@media (max-width:900px){
  .x-sec{padding:80px 0}
  .band{padding:72px 0}
  .x-head,.x-head--stack{margin-bottom:40px}
}
@media (max-width:600px){
  .x-hero .h-display{font-size:clamp(1.75rem,8.4vw,2.2rem)}
  .h-section{font-size:clamp(1.35rem,6vw,1.6rem)}
  .x-cmp>div{padding:28px 22px}
  #documents .d-feats li{padding:24px 22px 26px}
}
.site-header{background:rgba(255,255,255,.9);background-color:rgba(255,255,255,.9)}
.x-sec .wrap>.x-links,#start .hero-actions,#price .x-links{justify-content:center}
.d-cards .x-card{align-self:center}
.d-say-list li{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}
@media (max-width:600px){
  .x-head,.x-head--stack{text-align:left}
  .x-head .eyebrow{justify-content:flex-start}
  .x-head .one-line,.x-head p{margin-left:0}
}
@media (max-width:600px){
  .x-hero{padding-top:44px}
  .x-hero .h-display{margin:16px 0 16px}
  .x-hero .one-line{font-size:14.5px;line-height:1.85;margin-bottom:24px}
  .x-hero .plate-label{font-size:12px;letter-spacing:.06em}
}