/* ============================================================
FC加盟店募集LP ブロックスタイル（mobilestreet/fr-* → msfr-*）
------------------------------------------------------------
AION提供 preview.html のデザインをカスタムブロック出力用に移植。
全セレクタは .msfr- プレフィックスでスコープ（既存CSSと衝突しない）。
全幅前提レイアウト：page-lp-full.php（LP全幅テンプレート）で使用する。
============================================================ */
/* ---- ページラッパー＆共通トークン ---- */
.msfr-page{background:#FFF6EE;}
.msfr-hero,.msfr-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;
}
.msfr-hero *,.msfr-sec *{box-sizing:border-box;}
.msfr-hero img,.msfr-sec img{max-width:100%;display:block;}
.msfr-hero a,.msfr-sec a{text-decoration:none;}
.msfr-zen{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;}
@keyframes msfr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.msfr-ph{background:#FFEFE2;border:1.5px dashed #F1E4D7;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#8A7B6D;font-size:12px;font-weight:700;text-align:center;padding:10px;}
/* ---- セクション共通 ---- */
.msfr-sec{padding:clamp(56px,8vw,96px) 20px;scroll-margin-top:84px;background:var(--bg);}
.msfr-sec--white{background:var(--bg2);}
.msfr-sec--gradient{background:linear-gradient(120deg,var(--accent) 0%,var(--accent2) 100%);color:#fff;}
.msfr-wrap{max-width:1180px;margin:0 auto;}
.msfr-center{text-align:center;}
.msfr-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.12em;}
.msfr-eyebrow>span:first-child,.msfr-eyebrow>span:last-child{width:22px;height:2px;background:var(--accent);}
.msfr-h2{font-weight:900;font-size:clamp(26px,4vw,42px);color:var(--ink);margin:12px 0 10px;line-height:1.3;}
.msfr-lead{font-size:15px;color:var(--muted);font-weight:500;margin:0;}
.msfr-sec__body{margin-top:36px;}
.msfr-sec__body--narrow{max-width:820px;margin-left:auto;margin-right:auto;text-align:left;}
.msfr-sec--gradient .msfr-eyebrow{color:#fff;opacity:.92;}
.msfr-sec--gradient .msfr-eyebrow>span:first-child,
.msfr-sec--gradient .msfr-eyebrow>span:last-child{background:#fff;}
.msfr-sec--gradient .msfr-h2{color:#fff;}
.msfr-sec--gradient .msfr-lead{color:rgba(255,255,255,.88);}
/* 注記段落（コアの段落ブロックに msfr-disc クラスを付けて使用） */
.msfr-sec .msfr-disc{font-size:11px;color:var(--muted);margin:26px 0 0;}
.msfr-sec--gradient .msfr-disc{color:#fff;opacity:.8;}
/* ============ HERO ============ */
.msfr-hero{position:relative;overflow:hidden;padding:clamp(46px,7vw,86px) 20px clamp(40px,6vw,70px);
background:radial-gradient(120% 95% at 50% -15%, var(--soft) 0%, var(--bg) 62%);}
.msfr-blob{position:absolute;border-radius:50%;pointer-events:none;}
.msfr-blob--1{top:-80px;left:-60px;width:300px;height:300px;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.14;animation:msfr-float 7s ease-in-out infinite;}
.msfr-blob--2{bottom:-40px;right:-40px;width:260px;height:260px;background:radial-gradient(circle,var(--accent2) 0%,transparent 70%);opacity:.16;animation:msfr-float 9s ease-in-out infinite;}
.msfr-hero__inner{position:relative;max-width:1040px;margin:0 auto;text-align:center;}
.msfr-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);}
/* H1 は常にDOMに存在。PCでは視覚的にのみ隠す（SEO・スクリーンリーダー対策） */
.msfr-hero__h1{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.msfr-hero__fig{margin:28px auto 0;max-width:1100px;}
.msfr-hero__fig img{width:100%;height:auto;border-radius:var(--radius);}
.msfr-hero__txt{display:none;}
.msfr-hero__badges{display:none;list-style:none;padding:0;margin:0;}
@media(max-width:768px){
.msfr-hero__fig{display:none;}
.msfr-hero__txt{display:block;}
.msfr-hero__h1{
position:static;width:auto;height:auto;padding:0;margin:26px 0 18px;
overflow:visible;clip:auto;clip-path:none;white-space:normal;
font-weight:900;font-size:clamp(34px,9.5vw,46px);line-height:1.24;
letter-spacing:-.02em;color:var(--ink);
}
.msfr-hero__badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
}
.msfr-hero__h1 span,.msfr-hero__h1 em,.msfr-hero__h1 i{color:var(--accent);font-style:normal;}
.msfr-hero__h1 b,.msfr-hero__h1 strong{font-weight:900;font-size:1.75em;color:var(--accent);letter-spacing:-.04em;line-height:1;background:linear-gradient(transparent 74%, var(--accent2) 74%);padding:0 .02em;}
.msfr-hero__txt p{font-size:clamp(14.5px,4vw,17px);line-height:1.85;color:var(--muted);font-weight:600;margin:0 0 28px;}
.msfr-hero__txt p em,.msfr-hero__txt p strong{font-style:normal;font-weight:900;color:var(--accent);}
/* バッジ（モバイル丸カード） */
.msfr-hero__badges li.msfr-badge{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 8px 14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;box-shadow:0 10px 24px -14px rgba(70,34,12,.35);min-height:118px;margin:0;}
.msfr-badge__ic{display:flex;}
.msfr-badge__ic svg{width:30px;height:30px;color:var(--accent);flex:none;}
.msfr-badge>b{font-weight:900;font-size:32px;color:var(--accent);line-height:1;letter-spacing:-.03em;}
.msfr-badge>b i{font-style:normal;font-size:.45em;margin-left:1px;}
.msfr-badge__t{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.5;text-align:center;}
@media(max-width:360px){
.msfr-hero__badges li.msfr-badge{padding:14px 5px 11px;min-height:106px;}
.msfr-badge__t{font-size:10.5px;}
.msfr-badge>b{font-size:27px;}
}
/* ============ ボタン ============ */
.msfr-btns--row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px;}
.msfr-btns--stack{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:26px auto 0;}
.msfr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;border-radius:999px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;}
.msfr-btns--stack .msfr-btn{display:flex;padding:17px;font-size:16px;}
.msfr-btn__ic{display:flex;}
.msfr-btn__ic svg{width:17px;height:17px;flex:none;}
.msfr-btn--line .msfr-btn__ic svg{width:20px;height:20px;}
.msfr-btn--primary{background:var(--accent);color:#fff;box-shadow:0 14px 28px -12px var(--accent);}
.msfr-btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.msfr-btn--line{background:#06C755;color:#fff;}
.msfr-btn--tel{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
/* LP全幅テンプレは main.ms-lead 配下のため、blocks.css の .ms-lead a{color:var(--color_main)}
にボタン文字色が奪われる。より高い詳細度で文字色を確定させる */
.ms-lead .msfr-btn{color:var(--ink);}
.ms-lead .msfr-btn--primary,.ms-lead .msfr-btn--line{color:#fff;}
@media(max-width:640px){
.msfr-btns--row .msfr-btn{width:100%;justify-content:center;}
}
/* ============ 信頼チップ ============ */
.msfr-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:26px;}
.msfr-trust__item{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink);}
.msfr-trust__ic{display:flex;}
.msfr-trust__ic svg{width:17px;height:17px;color:var(--accent);flex:none;}
/* ============ 数字グリッド（リスクセクション） ============ */
.msfr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;max-width:1080px;margin-left:auto;margin-right:auto;}
.msfr-stat .n{font-weight:900;font-size:clamp(38px,6vw,58px);line-height:1;white-space:nowrap;}
.msfr-stat .n i{font-size:.42em;font-style:normal;}
.msfr-stat .n small{font-size:.38em;font-weight:700;}
.msfr-stat .t{font-size:13px;font-weight:600;margin-top:10px;color:var(--muted);}
.msfr-sec--gradient .msfr-stat .t{color:#fff;opacity:.92;}
/* ============ カードグリッド3種 ============ */
.msfr-grid{display:grid;gap:16px;text-align:left;}
.msfr-grid--prob{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.msfr-grid--feat{grid-template-columns:repeat(3,1fr);margin-top:40px;}
.msfr-grid--step{grid-template-columns:repeat(3,1fr);margin-top:40px;}
.msfr-sec__body .msfr-grid--feat,.msfr-sec__body .msfr-grid--step{margin-top:0;}
/* 課題カード */
.msfr-prob__card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;}
.msfr-sec--white .msfr-prob__card{background:var(--bg);}
.msfr-prob__card .q{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:var(--soft);color:var(--accent);font-weight:900;font-size:15px;margin-bottom:14px;}
.msfr-prob__card h4{font-weight:700;font-size:16.5px;color:var(--ink);margin:0 0 8px;line-height:1.6;}
.msfr-prob__card p{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0;}
/* 特長カード */
.msfr-feat{background:var(--bg2);border-radius:var(--radius);padding:28px 24px;border:1px solid var(--line);}
.msfr-feat .ic{width:48px;height:48px;border-radius:14px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px;}
.msfr-feat .ic svg{width:24px;height:24px;}
.msfr-feat h4{font-weight:700;font-size:18px;color:var(--ink);margin:0 0 8px;}
.msfr-feat p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;}
/* STEPカード */
.msfr-step{background:var(--bg);border-radius:var(--radius);padding:26px 22px;border:1px solid var(--line);position:relative;}
.msfr-step .no{font-weight:900;font-size:13px;color:var(--accent);letter-spacing:.08em;}
.msfr-step h4{font-weight:700;font-size:18px;color:var(--ink);margin:10px 0 6px;}
.msfr-step p{font-size:13.5px;line-height:1.75;color:var(--muted);margin:0;}
/* ============ FAQ（loos/faq を msfr セクション内で再装飾） ============ */
.msfr-faqcat{font-weight:900;font-size:15px;color:var(--accent);letter-spacing:.04em;margin:32px 0 14px;text-align:left;}
.msfr-sec__body--narrow>.msfr-faqcat:first-child{margin-top:0;}
.msfr-sec .swell-block-faq{margin:0;display:flex;flex-direction:column;gap:10px;}
.msfr-sec .swell-block-faq__item{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.msfr-sec .swell-block-faq__item+.swell-block-faq__item{margin-top:0;}
.msfr-sec .swell-block-faq .faq_q{
display:flex;align-items:center;gap:14px;padding:16px 20px;margin:0;
font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.5;cursor:pointer;background:none;
}
.msfr-sec .swell-block-faq .faq_q::before{
content:"Q";position:static;flex:none;width:26px;height:26px;border-radius:8px;
background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:900;font-size:14px;line-height:1;box-shadow:none;
}
.msfr-sec .swell-block-faq .faq_q::after{
content:"+";margin-left:auto;color:var(--accent);font-size:22px;font-weight:700;line-height:1;
transition:transform .2s;flex:none;
}
.msfr-sec .swell-block-faq__item.is-open .faq_q::after{transform:rotate(45deg);}
.msfr-sec .swell-block-faq .faq_a{
display:none;padding:0 20px 18px 60px;margin:0;
font-size:14.5px;line-height:1.85;color:var(--muted);
}
.msfr-sec .swell-block-faq .faq_a::before{content:none;}
.msfr-sec .swell-block-faq__item.is-open .faq_a{display:block;}
.msfr-sec .swell-block-faq .faq_a p{margin:0 0 .6em;}
.msfr-sec .swell-block-faq .faq_a p:last-child{margin-bottom:0;}
@media(max-width:640px){
.msfr-sec .swell-block-faq .faq_a{padding-left:20px;}
}
/* ============ お問い合わせセクション ============ */
/* 区切り線ラベル（コアの段落ブロックに msfr-or クラスを付けて使用） */
.msfr-sec .msfr-or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;font-weight:700;
letter-spacing:.1em;margin:34px auto 0;max-width:420px;}
.msfr-sec .msfr-or::before,.msfr-sec .msfr-or::after{content:"";flex:1;height:1px;background:var(--line);}
/* 受付時間などの注記（コアの段落ブロックに msfr-note クラスを付けて使用） */
.msfr-sec .msfr-note{margin:22px 0 0;font-size:12.5px;color:var(--muted);font-weight:500;}
/* Contact Form 7（msfr セクション内のフォームのみに適用） */
.msfr-sec .wpcf7{
max-width:660px;margin:0 auto;
padding:clamp(28px,4vw,44px) clamp(20px,3vw,36px);
background:#fff;border:1px solid var(--line);border-radius:28px;
box-shadow:0 30px 70px -30px rgba(70,34,12,.3);
font-family:'Noto Sans JP',sans-serif;text-align:left;
}
.msfr-sec .wpcf7 p{margin:0 0 16px;}
.msfr-sec .wpcf7 label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px;}
/* CF7マークアップの
の
が余分な1行を生むため隠す */
.msfr-sec .wpcf7 label+br{display:none;}
.msfr-sec .wpcf7 input[type=text],
.msfr-sec .wpcf7 input[type=email],
.msfr-sec .wpcf7 input[type=tel],
.msfr-sec .wpcf7 textarea,
.msfr-sec .wpcf7 select{
width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
font-size:15px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s;
margin:0; /* カスタマイザー追加CSS（.wpcf7 input 全体指定）の上下marginを打ち消す */
}
.msfr-sec .wpcf7 input:focus,
.msfr-sec .wpcf7 textarea:focus,
.msfr-sec .wpcf7 select:focus{outline:none;border-color:var(--accent);}
.msfr-sec .wpcf7 textarea{min-height:150px;resize:vertical;}
.msfr-sec .wpcf7 input[type=submit]{
width:100%;max-width:none;margin:8px 0 0;/* カスタマイザー追加CSSの max-width:320px / margin を打ち消す */
padding:17px;background:var(--accent);color:#fff;border:none;border-radius:999px;
font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;
box-shadow:0 16px 30px -14px var(--accent);transition:transform .12s;
-webkit-appearance:none;appearance:none;
}
.msfr-sec .wpcf7 input[type=submit]:hover{transform:translateY(-1px);}
.msfr-sec .wpcf7 .req{
display:inline-block;margin-left:6px;padding:2px 7px;border-radius:5px;
background:var(--accent);color:#fff;font-size:10px;font-weight:700;vertical-align:1px;
}
.msfr-sec .wpcf7 .wpcf7-not-valid-tip{font-size:12.5px;color:#E23A2E;margin-top:5px;font-weight:600;}
.msfr-sec .wpcf7 .wpcf7-response-output{
margin:20px 0 0;padding:14px 18px;border-radius:var(--radius-sm);
border:1.5px solid var(--line);font-size:14px;font-weight:600;
}
.msfr-sec .wpcf7 .wpcf7-spinner{margin:12px auto 0;display:block;}
/* 260725: ポイント(仕組み)/フロー グリッドを3列×2に統一。タブレット2列/スマホ1列 */
@media(max-width:820px){.msfr-grid--feat,.msfr-grid--step{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.msfr-grid--feat,.msfr-grid--step{grid-template-columns:1fr;}}