/* ==========================================================
   サクラス財務クラウドLight 記事LP  style.css
   design.md準拠（2026-07-08 デジタルレクリム）
   ========================================================== */
:root{
  --navy:#3A3A4C;
  --blue:#6E93C8;
  --bg-gray:#EDF1F7;
  --sakura:#E4879C;
  --cta:#D95E7A;
  --cta-hover:#C24A66;
  --gold:#D0BB73;
  --green:#2E8B57;
  --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;color:var(--navy);font-size:16px;line-height:1.9;background:var(--white);overflow-x:hidden}
h1,h2,h3,p{overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--blue)}

/* ---- ボタン ---- */
.btn{display:inline-block;text-align:center;border-radius:999px;font-weight:700;transition:.2s;cursor:pointer;border:none;white-space:nowrap}
.btn--fill{background:var(--cta);color:#fff;padding:18px 48px;font-size:18px;box-shadow:0 4px 14px rgba(217,94,122,.35)}
.btn--fill:hover{background:var(--cta-hover);transform:translateY(-2px)}
.btn--line{border:2px solid var(--cta);color:var(--cta);padding:16px 44px;font-size:16px;background:#fff}
.btn--line:hover{background:#FDF2F5}
.btn--sm{padding:10px 24px;font-size:14px}
.btn--wide{width:100%;max-width:480px}

/* ---- ヘッダー ---- */
.header{position:sticky;top:0;background:#fff;z-index:100;box-shadow:0 1px 6px rgba(58,58,76,.08)}
.header__inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:10px 20px;height:64px}
.header__brand{display:flex;align-items:center;gap:10px}
.header__logo{height:44px;width:auto}
.header__edition{font-size:12px;font-weight:700;color:var(--sakura);border:1px solid var(--sakura);border-radius:4px;padding:1px 6px;white-space:nowrap}
.header__nav{margin-left:auto;display:flex;gap:22px}
.header__nav a{color:var(--navy);font-size:14px;font-weight:500}
.header__nav a:hover{color:var(--cta)}

/* ---- FV（左＝コピー・CTA／右＝超大型価格・バッジ。サイズはclampで全幅流動） ---- */
.fv{background:var(--bg-gray);min-height:92svh;display:flex;align-items:center;position:relative;overflow:hidden}
.fv__inner{max-width:1080px;margin:0 auto;padding:48px 20px 36px;width:100%}
.fv__h1{font-size:clamp(30px,4.3vw,52px);font-weight:900;letter-spacing:.02em;text-align:center;margin-bottom:32px;line-height:1.4}
.fv__card{background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(58,58,76,.10);display:flex;align-items:center;padding:clamp(28px,4vw,48px) clamp(24px,4.2vw,52px);gap:clamp(22px,3.2vw,40px)}
.fv__left{flex:1.1;min-width:0}
.fv__sub{font-size:clamp(19px,2.2vw,26px);font-weight:700;line-height:1.6;margin-bottom:12px}
.fv__note{font-size:14px;color:#666;margin-bottom:22px}
.fv__cta{display:flex;flex-direction:column;gap:12px;max-width:340px}
.fv__right{flex:.9;min-width:0;text-align:center;border-left:1px solid #EEE;padding-left:clamp(18px,3vw,40px)}
.fv__price-label{font-size:clamp(11px,1.2vw,14px);font-weight:700;color:var(--blue);margin-bottom:2px}
.fv__price{color:var(--cta);font-weight:900;line-height:1.05;margin-bottom:12px;white-space:nowrap}
.fv__price strong{font-size:clamp(50px,6.6vw,92px);letter-spacing:-.02em}
.fv__price span{font-size:clamp(20px,2.4vw,30px)}
.fv__price small{display:block;font-size:14px;color:var(--navy);font-weight:700;margin-top:4px;letter-spacing:.08em}
.fv__badge-img{max-width:clamp(150px,17vw,200px);margin:0 auto 12px}
.fv__chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;color:var(--blue);background:#EEF3FA;border-radius:999px;padding:4px 12px}
.fv__legal{font-size:12px;color:#888;text-align:center;margin-top:14px}

/* ---- セクション共通 ---- */
.sec{padding:88px 0}
.sec--white{background:#fff}
.sec--gray{background:var(--bg-gray)}
.sec__inner{max-width:1080px;margin:0 auto;padding:0 20px}
.sec__inner--narrow{max-width:820px}
.sec__h2{font-size:clamp(24px,3vw,36px);font-weight:700;text-align:center;margin-bottom:18px;position:relative;padding-bottom:18px}
.sec__h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:56px;height:4px;border-radius:2px;background:var(--sakura)}
.sec__lead{text-align:center;margin-bottom:44px}
.sec__notes{font-size:12px;color:#888;margin-top:20px;text-align:center}

/* ---- ② 相場3帯 ---- */
.tier{display:flex;gap:20px;align-items:stretch}
.tier__card{flex:1;background:#fff;border:1px solid #E2E6EE;border-radius:12px;padding:30px 24px;text-align:center}
.tier__card--hero{border:3px solid var(--cta);position:relative;box-shadow:0 8px 24px rgba(217,94,122,.18)}
.tier__here{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--cta);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:4px 16px;white-space:nowrap}
.tier__price{font-size:36px;font-weight:900;color:var(--blue)}
.tier__card--hero .tier__price{color:var(--cta);font-size:42px}
.tier__price span{font-size:18px}
.tier__name{font-weight:700;margin:6px 0 10px}
.tier__desc{font-size:14px;text-align:left;line-height:1.8}

/* ---- ③ 数字カード＋ステップ ---- */
.nums{display:flex;gap:20px;margin-bottom:52px}
.nums__card{flex:1;background:#fff;border-radius:12px;padding:30px 20px;text-align:center;box-shadow:0 2px 10px rgba(58,58,76,.06)}
.nums__big{font-size:clamp(38px,4.4vw,52px);font-weight:900;color:var(--blue);line-height:1.2}
.nums__big span{font-size:24px}
.nums__txt{font-size:14px;margin-top:8px}
.steps{display:flex;gap:20px;margin-bottom:44px}
.steps__item{flex:1;background:#fff;border-radius:12px;padding:28px 22px;position:relative;box-shadow:0 2px 10px rgba(58,58,76,.06)}
.steps__no{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--cta);color:#fff;font-weight:900;font-size:20px;align-items:center;justify-content:center;margin-bottom:12px}
.steps__t{font-weight:700;font-size:18px;margin-bottom:6px}
.steps__d{font-size:14px}
.figure{max-width:860px;margin:0 auto 32px;background:#fff;border-radius:12px;padding:24px}
.figure--steps{max-width:920px;padding:14px}
.figure--steps img{border-radius:8px}
.figure--price{max-width:920px;padding:14px;border:1px solid #E2E6EE}
.figure--price img{border-radius:8px}
.figure__caption{font-size:13px;color:#666;text-align:center;margin-top:10px}
.figure--screen{max-width:720px}
/* 拡大できる画像 */
.zoomable{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;position:relative;border-radius:8px;overflow:hidden}
.zoomable img{border-radius:8px;display:block;transition:.2s}
.zoomable:hover img{filter:brightness(.96)}
.zoomable__hint{position:absolute;right:10px;bottom:10px;background:rgba(58,58,76,.82);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;pointer-events:none}
.zoomable:hover .zoomable__hint{background:var(--cta)}
/* ライトボックス */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(30,30,40,.88);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.lightbox__close{position:absolute;top:16px;right:20px;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.2);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:.2s}
.lightbox__close:hover{background:rgba(255,255,255,.35)}

/* ---- ④ 住み分け ---- */
.compare{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px}
.compare__card{background:#fff;border:1px solid #E2E6EE;border-radius:12px;padding:26px 20px}
.compare__card h3{font-size:17px;margin-bottom:10px}
.compare__card p{font-size:14px}
.compare__card--hero{border:3px solid var(--sakura);background:#FDF6F8;position:relative}
.compare__pr{font-size:11px;font-weight:700;color:var(--sakura);margin-bottom:6px}
.compare__switch{text-align:center;background:var(--bg-gray);border-radius:12px;padding:20px}

/* ---- ⑤ 事例 ---- */
.voice{display:flex;gap:36px;background:#fff;border-radius:16px;padding:40px;align-items:center;box-shadow:0 2px 12px rgba(58,58,76,.06)}
.voice__photo{flex:0 0 280px}
.voice__photo img{border-radius:12px}
.voice__quote{font-size:24px;font-weight:700;color:var(--cta);margin-bottom:12px}
.voice__txt{font-size:15px;margin-bottom:14px}
.voice__name{font-size:14px;font-weight:700;color:#666}

/* ---- ⑥ 安心 ---- */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.trust__card{background:var(--bg-gray);border-radius:12px;padding:30px 28px}
.trust__card h3{font-size:19px;margin-bottom:10px;padding-left:14px;border-left:4px solid var(--sakura)}
.trust__card p{font-size:14px;margin-bottom:14px}
.trust__card img{max-width:420px;margin:0 auto;border-radius:8px}
.trust__badge{max-width:150px !important}

/* ---- ⑦ FAQ ---- */
.faq__item{background:#fff;border-radius:10px;margin-bottom:12px;overflow:hidden;border:1px solid #E2E6EE}
.faq__item summary{cursor:pointer;font-weight:700;padding:20px 48px 20px 22px;list-style:none;position:relative}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{content:"Q";color:var(--cta);font-weight:900;margin-right:10px}
.faq__item summary::after{content:"＋";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--blue);font-weight:700}
.faq__item[open] summary::after{content:"−"}
.faq__item p{padding:0 22px 20px;font-size:15px}

/* ---- 締めCTA ---- */
.closing{background:var(--navy);color:#fff;padding:88px 0;text-align:center}
.closing__h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;margin-bottom:16px}
.closing__lead{margin-bottom:36px}
.form{background:#fff;border-radius:16px;padding:40px;color:var(--navy);text-align:left;max-width:560px;margin:0 auto 22px}
.form__row{margin-bottom:18px}
.form__row label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.req{background:var(--cta);color:#fff;font-size:11px;border-radius:4px;padding:1px 6px;margin-left:6px}
.form__row input{width:100%;border:1px solid #CCD3DE;border-radius:8px;padding:12px 14px;font-size:16px}
.form__row input:focus{outline:2px solid var(--blue)}
.form .btn{display:block;margin:26px auto 0}
/* ハニーポット（スパム対策の隠し欄。人間には見えない） */
.form__hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.closing__alt{font-size:14px;color:#C9CEDC}

/* ---- フッター ---- */
.footer{background:#fff;padding:44px 0 32px;border-top:1px solid #E2E6EE}
.footer__inner{max-width:1080px;margin:0 auto;padding:0 20px;text-align:center}
.footer__logo{height:40px;width:auto;margin:0 auto 14px}
.footer__company{font-size:13px;color:#666;margin-bottom:8px}
.footer__copy{font-size:12px;color:#AAA}

/* ---- 追従CTA ---- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:10px 16px;background:rgba(255,255,255,.96);box-shadow:0 -2px 12px rgba(58,58,76,.12);z-index:99;text-align:center;transform:translateY(110%);transition:.3s}
.sticky-cta.is-show{transform:translateY(0)}
.sticky-cta .btn{max-width:560px}

/* ==========================================================
   レスポンシブ：中間帯（769〜1080px）＝崩れやすい帯を先回りで縦・2列化
   ========================================================== */
@media (max-width:1080px) and (min-width:769px){
  .compare{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px) and (min-width:769px){
  .nums,.steps,.tier{flex-direction:column}
  .voice{flex-direction:column;align-items:flex-start}
  .voice__photo{flex:none;max-width:320px}
  .fv__card{flex-direction:column;align-items:stretch;text-align:center}
  .fv__right{border-left:none;border-top:1px solid #EEE;padding-left:0;padding-top:24px;margin-top:24px}
  .fv__cta{margin:0 auto;max-width:360px}
  .fv{min-height:auto}
}

/* ==========================================================
   レスポンシブ（〜768px）
   ========================================================== */
@media (max-width:768px){
  .header__nav{display:none}
  .header__inner{height:56px;padding:8px 12px;gap:10px}
  .header__logo{height:24px}
  .header__edition{display:none}
  .header .btn--sm{padding:8px 18px;font-size:13px;margin-left:auto}
  .fv{min-height:auto}
  .fv__inner{padding:32px 16px 28px}
  .fv__h1{margin-bottom:22px}
  .fv__card{flex-direction:column-reverse;padding:26px 20px;gap:22px}
  .fv__right{border-left:none;padding-left:0;border-bottom:1px solid #EEE;padding-bottom:22px;width:100%}
  .fv__price strong{font-size:58px}
  .fv__sub{font-size:18px}
  .fv__sub br{display:none}
  .fv__cta{max-width:none}
  .sec{padding:56px 0}
  .sec__h2{font-size:26px}
  .tier,.nums,.steps{flex-direction:column}
  .compare{grid-template-columns:1fr}
  .voice{flex-direction:column;padding:26px 20px}
  .voice__photo{flex:none}
  .trust{grid-template-columns:1fr}
  .closing__h2{font-size:28px}
  .form{padding:26px 20px}
  body{padding-bottom:72px} /* 追従CTA分 */
  .sticky-cta .btn{white-space:normal;font-size:14px;padding:13px 12px;line-height:1.4}
}
@media (min-width:769px){
  .sp{display:none}
}