/* ============================================================
   買取の流れ（店頭/宅配）ブロックスタイル（mobilestreet/fl-* → msfl-*）
   ------------------------------------------------------------
   AION提供 005_店舗買取/preview_6.html（.msf）と
   006_宅配買取/preview_7.html（.mship）を統合し、
   カスタムブロック出力用に移植。各セクションがトップレベルに
   出力されるため、変数は .msfl-hero / .msfl-sec に定義する。
   全幅前提レイアウト：page-lp-full.php（LP全幅テンプレート）で使用。
   ※ fr-*（加盟店LP）/ g-*（買取ガイド）/ ss-,sd-*（店舗）とは別系統。
   ============================================================ */

/* ---- 共通トークン＆リセット ---- */
.msfl-hero,.msfl-sec{
  --accent:#FF6B35; --accent2:#F59E0B;
  --bg:#FFF6EE; --bg2:#FFFFFF;
  --ink:#2B2018; --muted:#8A7B6D;
  --soft:#FFEFE2; --line:#F1E4D7;
  --radius:28px; --radius-sm:16px;
  font-family:'Noto Sans JP',sans-serif;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.msfl-hero *,.msfl-sec *{box-sizing:border-box;}
.msfl-hero img,.msfl-sec img{max-width:100%;display:block;}
.msfl-hero a,.msfl-sec a{color:inherit;text-decoration:none;}
.msfl-hero p,.msfl-sec p{margin-top:0;margin-bottom:0;}
.msfl-hero ul,.msfl-sec ul{list-style:none;padding:0;margin:0;}
.msfl-zen{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;}
@keyframes msfl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.msfl-sec{padding:clamp(48px,6vw,80px) 20px;background:var(--bg);}
.msfl-wrap{max-width:1040px;margin:0 auto;}
.msfl-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.14em;}
.msfl-eyebrow>span:empty{width:22px;height:2px;background:var(--accent);}
.msfl-h2{font-weight:900;font-size:clamp(26px,4vw,40px);color:var(--ink);margin:12px 0 12px;line-height:1.3;}
.msfl-lead{font-size:15px;color:var(--muted);font-weight:500;line-height:1.9;}
.msfl-center{text-align:center;}

/* ---- HERO ---- */
.msfl-hero{position:relative;overflow:hidden;padding:clamp(46px,6vw,78px) 20px clamp(32px,4vw,44px);
  background:radial-gradient(120% 90% at 50% -10%, var(--soft) 0%, var(--bg) 60%);text-align:center;}
.msfl-blob{position:absolute;border-radius:50%;pointer-events:none;}
.msfl-blob--1{top:-70px;left:-50px;width:270px;height:270px;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.12;animation:msfl-float 7s ease-in-out infinite;}
.msfl-blob--2{bottom:-50px;right:-40px;width:230px;height:230px;background:radial-gradient(circle,var(--accent2) 0%,transparent 70%);opacity:.14;animation:msfl-float 9s ease-in-out infinite;}
.msfl-hero__inner{position:relative;max-width:780px;margin:0 auto;}
.msfl-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:16px;flex-wrap:wrap;}
.msfl-breadcrumb a:hover{color:var(--accent);}
.msfl-breadcrumb__ic{display:flex;}
.msfl-breadcrumb__ic svg{width:13px;height:13px;opacity:.6;}
.msfl-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);color:var(--accent);font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(70,34,12,.25);}
.msfl-hero h1{font-weight:900;font-size:clamp(30px,5vw,48px);line-height:1.26;margin:18px 0 16px;color:var(--ink);}
.msfl-hero h1 em{color:var(--accent);font-style:normal;}
.msfl-hero__p{font-size:clamp(14.5px,2.2vw,16px);line-height:1.9;color:var(--muted);font-weight:500;max-width:600px;margin:0 auto;}

/* HERO直後のFLOWセクションは上余白を詰める */
.msfl-hero+.msfl-flow{padding-top:clamp(28px,3vw,40px);}

/* ---- STEP フロー ---- */
.msfl-steps{max-width:860px;margin:44px auto 0;position:relative;}
.msfl-steps::before{content:"";position:absolute;left:33px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(var(--accent),var(--accent2));opacity:.35;}
.msfl-step{position:relative;display:grid;grid-template-columns:68px 1fr;gap:20px;padding-bottom:26px;text-align:left;}
.msfl-step:last-child{padding-bottom:0;}
.msfl-step__num{position:relative;z-index:1;width:68px;height:68px;border-radius:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 12px 24px -10px var(--accent);flex:none;}
.msfl-step__num b{font-size:22px;font-weight:900;line-height:1;font-family:'Zen Maru Gothic',sans-serif;}
.msfl-step__num i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;opacity:.9;margin-bottom:3px;}
.msfl-step__card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;}
.msfl-step__card h3{font-weight:900;font-size:clamp(18px,2.6vw,22px);color:var(--ink);margin:0 0 12px;line-height:1.5;}
.msfl-step__body p{font-size:14px;line-height:1.9;color:var(--muted);}
.msfl-step__body p + p{margin-top:10px;}
.msfl-step__body em{color:var(--accent);font-weight:700;font-style:normal;}

/* ---- 分岐（納得/非納得） ---- */
.msfl-branch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.msfl-branch__item{border-radius:var(--radius-sm);padding:16px 18px;font-size:13px;line-height:1.8;}
.msfl-branch__item h4{font-size:14px;font-weight:900;margin:0 0 6px;display:flex;align-items:center;gap:7px;}
.msfl-branch__ic{display:flex;}
.msfl-branch__ic svg{width:16px;height:16px;flex:none;}
.msfl-branch__item p{font-size:13px;line-height:1.8;color:var(--ink);}
.msfl-branch__ok{background:var(--soft);border:1px solid var(--line);}
.msfl-branch__ok h4{color:var(--accent);}
.msfl-branch__ng{background:#F7F7F5;border:1px solid #ECECE8;}
.msfl-branch__ng h4{color:var(--muted);}
.msfl-branch__ng p{color:var(--muted);}
.msfl-branch__item em{color:var(--accent);font-weight:700;font-style:normal;}
.msfl-branch__ng em{color:var(--ink);}

/* ---- 注意ボックス（本人確認・発送前・発送先） ---- */
.msfl-callout{margin-top:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;}
.msfl-callout h4{font-size:14px;font-weight:900;color:var(--ink);margin:0 0 8px;display:flex;align-items:center;gap:8px;}
.msfl-callout__ic{display:flex;}
.msfl-callout__ic svg{width:17px;height:17px;color:var(--accent);flex:none;}
.msfl-callout__body p{font-size:13.5px;line-height:1.85;color:var(--muted);}
.msfl-callout__body p + p{margin-top:8px;}
.msfl-callout__body em{color:var(--accent);font-weight:700;font-style:normal;}
/* 赤文字（後で記入するプレースホルダ項目） */
.msfl-callout--red .msfl-callout__body p{color:#D40000;font-weight:700;line-height:2;}
.msfl-chips{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:7px;}
.msfl-chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--ink);}
.msfl-minor{margin-top:10px;background:#fff;border:1px dashed var(--accent);border-radius:12px;padding:12px 15px;
  font-size:13px;line-height:1.85;color:var(--ink);}
.msfl-minor b,.msfl-minor strong{color:var(--accent);}

/* ---- インラインボタン列 ---- */
.msfl-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.msfl-btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:999px;transition:.15s;}
.msfl-btn--solid{background:var(--accent);color:#fff;box-shadow:0 12px 22px -12px var(--accent);}
.msfl-btn--solid:hover{transform:translateY(-1px);}
.msfl-btn--ghost{background:#fff;border:1.5px solid var(--accent);color:var(--accent);}
.msfl-btn--ghost:hover{background:var(--soft);}
.msfl-btn__ic{display:flex;}
.msfl-btn__ic svg{width:15px;height:15px;}

/* ---- 同梱物 ---- */
.msfl-inc{background:var(--bg2);}
.msfl-incgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:38px;text-align:left;}
.msfl-inccard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative;display:flex;flex-direction:column;}
.msfl-inccard__no{position:absolute;top:20px;right:22px;font-weight:900;font-size:26px;color:var(--soft);font-family:'Zen Maru Gothic',sans-serif;line-height:1;}
.msfl-inccard h4{font-weight:900;font-size:18px;color:var(--ink);margin:0 0 10px;padding-right:36px;}
.msfl-inccard p{font-size:13.5px;line-height:1.85;color:var(--muted);}
.msfl-inccard__fields{margin-top:12px;background:var(--soft);border-radius:12px;padding:12px 15px;font-size:12.5px;line-height:1.85;color:var(--ink);font-weight:600;}
.msfl-inclist{margin:14px 0 0;display:flex;flex-direction:column;gap:7px;}
.msfl-inclist li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.6;}
.msfl-inclist--dot li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:8px;}
.msfl-inclist--check li::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
.msfl-inccard__note{margin-top:14px;font-size:12px;line-height:1.8;color:var(--muted);}
.msfl-inccard__btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;border:1.5px solid var(--accent);color:var(--accent);font-weight:700;font-size:13.5px;
  padding:12px 18px;border-radius:999px;margin-top:18px;transition:.15s;}
.msfl-inccard__btn:hover{background:var(--accent);color:#fff;}
.msfl-inccard__ic{display:flex;}
.msfl-inccard__ic svg{width:15px;height:15px;}

/* ---- CTA ---- */
.msfl-cta{background:var(--bg2);}
.msfl-cta__card{max-width:680px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(32px,5vw,52px) clamp(24px,4vw,44px);text-align:center;box-shadow:0 30px 70px -34px rgba(70,34,12,.3);}
.msfl-cta__card h2{font-weight:900;font-size:clamp(24px,3.6vw,34px);margin:0 0 12px;}
.msfl-cta__card p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:28px;font-weight:500;}
.msfl-cta__btns{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto;}
.msfl-cta__btns a,.msfl-cta__btns>span{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:999px;font-weight:700;font-size:16px;}
.msfl-cta__btns .line{background:#06C755;color:#fff;box-shadow:0 14px 26px -13px #06C755;}
.msfl-cta__btns .primary{background:var(--accent);color:#fff;box-shadow:0 14px 26px -13px var(--accent);}
.msfl-cta__btns .tel{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 26px -13px rgba(43,32,24,.5);}
.msfl-cta__btns .tel .msfl-cta__ic svg{color:var(--accent);}
.msfl-cta__ic{display:flex;}
.msfl-cta__ic svg{width:18px;height:18px;}

/* ---- モバイル ---- */
@media(max-width:720px){
  .msfl-step{grid-template-columns:52px 1fr;gap:14px;}
  .msfl-steps::before{left:25px;}
  .msfl-step__num{width:52px;height:52px;border-radius:16px;}
  .msfl-step__num b{font-size:18px;}
  .msfl-step__card{padding:20px;}
  .msfl-branch{grid-template-columns:1fr;}
  .msfl-cta__btns a,.msfl-cta__btns>span{width:100%;}
}

/* ---- LP全幅テンプレ（main.ms-lead）でのリンク文字色の詳細度対策 ---- */
/* blocks.css の .ms-lead a{color:var(--color_main)} にボタン文字色が奪われるのを防ぐ */
.ms-lead .msfl-breadcrumb a{color:var(--muted);}
.ms-lead .msfl-breadcrumb a:hover{color:var(--accent);}
.ms-lead .msfl-btn--solid{color:#fff;}
.ms-lead .msfl-btn--ghost{color:var(--accent);}
.ms-lead .msfl-inccard__btn{color:var(--accent);}
.ms-lead .msfl-inccard__btn:hover{color:#fff;}
.ms-lead .msfl-cta__btns a.line,.ms-lead .msfl-cta__btns a.primary{color:#fff;}
.ms-lead .msfl-cta__btns a.tel{color:var(--ink);}