/* 万代宝書房 書籍LP 「和・写真仕上げ」レイヤー（2026-10-26）
   book-lp-bright.css の後に読み込む。otera-sou / shoin-kyoiku で使用。
   参考: Drive 02_LP量産計画/ブラッシュアップ参考版(GPT image 2.0) — 写真を活かしたFV、金の和雲、丸アイコンの実績、帯に写真、紺フッター */
:root{--paper:#faf6ef;--gold-deep:#a9811f;--gold-grad:linear-gradient(135deg,#a9811f 0%,#e2c46a 45%,#b78d2c 100%)}

/* header */
.header{background:rgba(255,255,255,.9)}
.header .hbtn{padding:11px 24px}
.header .hbtn::after{content:" →"}

/* ---------- FV ---------- */
.fv{padding:84px 0 88px;background:var(--paper)}
.fv .bg{background-position:center 55%}
.fv .bg::after{background:linear-gradient(90deg,rgba(255,252,246,.93) 0%,rgba(255,252,246,.86) 30%,rgba(255,252,246,.46) 55%,rgba(255,252,246,.1) 100%)}
@media(min-width:861px){.fv .wrap{grid-template-columns:1.2fr .8fr;gap:40px}}
.fv .eyebrow{color:var(--navy);letter-spacing:.26em;font-size:12.5px}
.fv .eyebrow::before{background:var(--gold-deep)}
.fv h1{font-family:var(--head);font-weight:900;font-size:clamp(40px,5.8vw,78px);line-height:1.14;letter-spacing:.02em;color:var(--navy);text-shadow:0 2px 24px rgba(255,255,255,.85)}
.fv h1 em{background:var(--h1-grad,var(--gold-grad));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fv h1 small{display:block;font-size:.4em;font-weight:700;letter-spacing:.1em;color:var(--navy);margin-bottom:.3em}
.fv .h1sub{font-family:var(--head);font-weight:700;letter-spacing:.06em}
.fv .catch{color:#2b2430;text-shadow:0 1px 14px rgba(255,255,255,.9)}
.fv .author{color:#5a5060}
.deco{position:absolute;color:var(--gold-deep);opacity:.5;pointer-events:none}
.deco svg{width:100%;height:auto;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fv .deco-tr{right:-30px;top:28px;width:320px}
.fv .deco-bl{left:-40px;bottom:16px;width:260px;transform:scaleX(-1)}
/* 実績: 丸アイコン＋数字 */
.usps{border-color:rgba(0,0,0,.1);padding:18px 0;margin-bottom:30px}
.usp{padding:0 24px;border-left-color:rgba(0,0,0,.1)}
.usp .ico{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--gold-deep);background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);margin-right:14px;flex:none}
.usp .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.usp .lb{font-size:11.5px;color:#4a4050;letter-spacing:.08em}
.usp .num{font-family:var(--head);font-size:15px}
.usp .num b{font-family:var(--head);font-size:34px;font-weight:900;letter-spacing:0}
.usp .num b.jp{font-size:26px}
.usp .nt{color:#6a6070}
/* 引用 */
.fvq{padding-left:38px;margin-bottom:30px}
.fvq::before{left:0;top:-10px;font-size:64px;color:var(--gold-deep);opacity:.95}
.fvq p{display:inline;font-size:clamp(22px,2.6vw,32px);color:var(--navy);line-height:1.5}
.fvq p em{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text}
.fvq p em::after{content:"”";font-family:var(--serif);font-size:1.9em;font-weight:700;color:var(--gold-deep);line-height:0;margin-left:4px;vertical-align:-.35em;opacity:.95;-webkit-text-fill-color:var(--gold-deep)}
/* ボタン: Amazon=金、楽天/BASE=白抜き */
.fv .cta,.dark .cta,.final .cta{display:flex;flex-wrap:wrap;gap:14px;max-width:none}
.fv .cta .row,.dark .cta .row,.final .cta .row{display:contents}
.btn{font-size:15.5px}
.btn.amazon{background:linear-gradient(135deg,#e9bc4f 0%,#d79a1f 55%,#c7850f 100%);color:#1f1300;box-shadow:0 16px 36px -10px rgba(199,133,15,.55),0 4px 10px rgba(199,133,15,.2)}
.btn.amazon::after{color:#c7850f}
.btn.rakuten{background:#fff;color:#bf0000;border:1.5px solid #d42a2a;box-shadow:0 10px 24px -12px rgba(0,0,0,.25)}
.btn.rakuten::after{background:#c81e1e;color:#fff}
.btn.base{background:#fff;color:#1b4fbe;border:1.5px solid #2a66e0;box-shadow:0 10px 24px -12px rgba(0,0,0,.25)}
.btn.base::after{background:#2a66e0;color:#fff}
.sticky-buy .btn.rakuten,.sticky-buy .btn.base{border-width:1px}
/* 立体表紙 大きめ */
.book .vol{width:min(82%,360px);transform:rotateY(-18deg) rotateX(2deg);filter:drop-shadow(24px 40px 40px rgba(25,12,35,.45))}

/* ---------- 共通セクション ---------- */
.soft{background:radial-gradient(ellipse at 15% 0%,#fff 0%,var(--paper) 55%,var(--paper) 100%)}
.sec-head .eyebrow{color:var(--gold-deep)}
.sec-head .eyebrow::before{background:var(--gold-deep)}
.sec-head .lead{color:#5a5060}
/* カード: 明朝の大きな番号 */
.pcard{border-radius:14px;border-color:rgba(0,0,0,.06);box-shadow:0 14px 36px rgba(40,20,60,.08)}
.pcard .im img{aspect-ratio:16/9}
.pcard .im::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
.pcard .no{top:auto;bottom:-16px;left:18px;width:auto;height:auto;border-radius:0 10px 0 0;background:#fff;color:var(--blue);box-shadow:none;font-family:var(--head);font-size:38px;font-weight:900;line-height:1;padding:6px 12px 0 2px;letter-spacing:.02em}
.pcard .lb{left:auto;right:16px;bottom:12px}
.pcard .pb{padding:34px 24px 26px}
.pcard h3{font-weight:800}
/* 帯: 右に写真 */
.dark{border-radius:20px;padding:72px 48px;text-align:left;border:1px solid rgba(226,196,106,.35);box-shadow:0 30px 60px -24px rgba(25,12,35,.55)}
.dark::before,.dark::after{display:none}
.dark .ph{position:absolute;right:0;top:0;bottom:0;width:50%;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%);mask-image:linear-gradient(90deg,transparent 0%,#000 48%);opacity:.9;z-index:0}
.dark .deco{left:-20px;top:-10px;width:260px;color:var(--gold2);opacity:.35;z-index:0}
.dark .in{position:relative;z-index:1;max-width:58%}
.dark .pill{color:var(--gold2);border-color:rgba(226,196,106,.6)}
.dark h2{text-align:left}
.dark h2 em{background:linear-gradient(135deg,#f3dd93,#d9b45a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dark .chips{justify-content:flex-start;margin-bottom:24px}
.dark .chip{font-size:14px;padding:9px 18px}
.dark p{margin:0 0 30px;text-align:left}
.dark .cta{margin:0}
/* 価格・FAQ・フッター */
.price-card{border-color:var(--gold-deep)}
.faq-item .q::before{color:var(--gold-deep)}
.final{border-top:3px solid var(--gold-deep)}
.final .deco{right:-30px;top:10px;width:300px;color:var(--gold2);opacity:.3}
.footer{background:var(--navy);color:#fff;padding:48px 0 28px}
.footer .name{color:#fff}
.footer .name img{border-radius:6px}
.footer .addr{color:rgba(255,255,255,.7)}
.footer nav a{color:#fff}
.footer .disc{border-top-color:rgba(255,255,255,.15);color:rgba(255,255,255,.65)}
.footer .copy{color:rgba(255,255,255,.5)}

/* ---------- SP ---------- */
@media(max-width:900px){.dark{padding:0 24px 44px;text-align:center}.dark .ph{position:relative;width:auto;height:230px;margin:0 -24px 28px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}.dark .in{max-width:none}.dark h2,.dark p{text-align:center}.dark .chips{justify-content:center}.dark .cta{justify-content:center}}
@media(max-width:860px){.fv{padding:40px 0 56px}.fv .bg::after{background:linear-gradient(180deg,rgba(255,252,246,.92) 0%,rgba(255,252,246,.8) 60%,rgba(255,252,246,.7) 100%)}.fv .deco-tr{width:220px;right:-40px;top:10px}.fv .deco-bl{display:none}.fv h1{font-size:clamp(36px,10vw,48px)}.usp .ico{width:44px;height:44px;margin-right:10px}.usp .ico svg{width:22px;height:22px}.usp .num b{font-size:28px}.usp .num b.jp{font-size:22px}.fvq p{font-size:22px}.fvq p em::after{vertical-align:-.3em}.book .vol{width:min(60%,250px)}}
@media(max-width:600px){.fv .cta{gap:10px}.fv .cta .btn,.dark .cta .btn,.final .cta .btn{width:100%}.pcard .no{font-size:32px}}

/* ---- 2026-10-26 修正: アイコン表示（base の .usp svg{display:none} を解除）、実績3つを横一列に、SPは縦積み ---- */
.usp .ico svg{display:block}
@media(min-width:601px){.usps{display:grid;grid-template-columns:repeat(3,1fr);padding:16px 0}.usp{padding:0 16px}.usp:first-child{padding-left:0}.usp .lb,.usp .nt{white-space:normal}.usp .num{white-space:nowrap}}
@media(max-width:600px){.usps{display:flex;flex-direction:column;gap:10px;padding:14px 0;margin-bottom:24px}.usp{padding:0;border-left:0}.usp:nth-child(3){border-top:0;margin-top:0;padding:0}.usp .ico{width:42px;height:42px}.usp .ico svg{width:21px;height:21px}.usp .num b{font-size:26px}.usp .num b.jp{font-size:21px}.fvq{padding-left:32px}.fvq::before{font-size:52px;top:-8px}.fvq p{font-size:21px}.fvq p em{white-space:nowrap}}
@media(max-width:860px){.fv .book{order:-1;padding:0 0 6px}.fv .book .vol{width:min(54%,230px);transform:rotateY(-14deg) rotateX(2deg)}}