@import url("https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap");
.mb.mb.mb *{all:revert}
/* 無料会員登録型(見本 co-key.jp 後継者サーチ by hurex)。読みやすい版。直したら style.css を作り直す(頭のクラスを3つ重ねて all:revert を先頭に) */

.mb.mb.mb{--rd:#ad181f;--rd2:#cc3e44;--nv:#082d52;--nv2:#1f4367;--gd:#d9c398;--dk:#2e2e2e;--ink:#2e2e2e;--gy:#fafafa;--tl:#3e5958;--pu:#4b4560;
  max-width:480px;margin:0 auto;background:#fff;color:var(--ink);font-family:"Noto Sans JP",system-ui,sans-serif;font-size:15px;font-weight:400;line-height:1.7;letter-spacing:0;overflow:hidden;position:relative;-webkit-font-smoothing:antialiased}
.mb.mb.mb *{box-sizing:border-box}
.mb.mb.mb img{display:block;max-width:100%}
.mb.mb.mb p{margin:0}
.mb.mb.mb p,.mb.mb.mb li,.mb.mb.mb h3,.mb.mb.mb dd{text-wrap:pretty}
.mb.mb.mb h1,.mb.mb.mb h2,.mb.mb.mb h3,.mb.mb.mb h4{margin:0;font-weight:400}
.mb.mb.mb ul,.mb.mb.mb ol,.mb.mb.mb dl,.mb.mb.mb dd{margin:0;padding:0;list-style:none}
.mb.mb.mb a{color:inherit;text-decoration:none}
.mb.mb.mb em{font-style:normal}
.mb.mb.mb i{font-style:normal}
.mb.mb.mb .se{font-family:"Noto Serif JP","Yu Mincho",serif}
.mb.mb.mb .tk{font-family:"Teko","Oswald",sans-serif;font-weight:500;letter-spacing:.02em}
.mb.mb.mb section{position:relative}

/* 見出し: 赤い英字(Teko)+明朝の見出し。.l は左寄せ+金の線 */
.mb.mb.mb .hx{position:relative;text-align:center}
.mb.mb.mb .hx small{display:block;color:var(--rd);font-size:16px;line-height:1.2}
.mb.mb.mb .hx h2{margin-top:6px;font-size:24px;line-height:1.35;color:var(--ink)}
.mb.mb.mb .hx.l{text-align:left}
.mb.mb.mb .hx.l small{display:flex;align-items:center;gap:20px}
.mb.mb.mb .hx.l small:after{content:"";width:160px;height:1px;background:var(--gd)}
.mb.mb.mb .tx{margin-top:22px;font-size:13px;line-height:1.7}

/* 四角いボタン(赤=登録・紺=もう1つ) */
.mb.mb.mb .bt{display:flex;align-items:center;justify-content:center;min-height:50px;padding:6px 16px;color:#fff;font-size:15px;font-weight:700;line-height:1.4;text-align:center;letter-spacing:.04em}
.mb.mb.mb .bt.rd{background:var(--rd);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.mb.mb.mb .bt.nv{background:var(--nv)}
.mb.mb.mb .bt.w{width:310px;max-width:calc(100% - 40px);margin:30px auto 0}

/* 進み具合の線(金+紺) */
.mb.mb.mb .bar{position:relative;width:310px;max-width:calc(100% - 40px);height:2px;margin:34px auto 0;background:var(--nv)}
.mb.mb.mb .bar i{position:absolute;left:0;top:-1px;width:26%;height:4px;background:var(--gd)}

/* よこに流れるカードの棚 */
.mb.mb.mb .rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mb.mb.mb .rail::-webkit-scrollbar{display:none}
.mb.mb.mb .rail>*{flex:none;scroll-snap-align:center}

/* ---- いちばん上 ---- */
.mb.mb.mb .tn{padding:4px 10px;background:#f3f3f3;color:#777;font-size:11px;line-height:1.5;text-align:center}
.mb.mb.mb .hd{position:relative;z-index:3;height:49px;padding:0 14px;background:#fff;display:flex;align-items:center}
.mb.mb.mb .lg{display:flex;align-items:center;gap:8px}
.mb.mb.mb .mk{position:relative;display:block;width:38px;height:22px;flex:none}
.mb.mb.mb .mk:before,.mb.mb.mb .mk:after{content:"";position:absolute;top:3px;width:15px;height:15px;border:3px solid var(--rd);transform:rotate(45deg)}
.mb.mb.mb .mk:before{left:3px}
.mb.mb.mb .mk:after{left:17px;opacity:.85}
.mb.mb.mb .lg span{display:flex;flex-direction:column;line-height:1}
.mb.mb.mb .lg b{color:var(--rd);font-size:21px;font-weight:600;letter-spacing:.14em}
.mb.mb.mb .lg small{margin-top:3px;color:#8a8a8a;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---- 最初の画面: 写真+紺むらさきの空・白い三角と赤い斜めの帯・黒いひし形の中に赤いボタン ---- */
.mb.mb.mb .fv{position:relative;height:840px;background:#fff}
.mb.mb.mb .fv .ph{position:absolute;inset:0;background-color:#3a356f;background-size:auto 600px;background-repeat:no-repeat;background-position:18% 100%;clip-path:polygon(0 0,100% 0,100% calc(100% - 290px),66px 100%,0 calc(100% - 66px))}
.mb.mb.mb .fv .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#34306c 0%,#4a4486 24%,#4b4688 33%,rgba(62,60,120,.82) 42%,rgba(36,44,92,.5) 56%,rgba(16,26,54,.4) 74%,rgba(8,16,34,.62) 100%)}
.mb.mb.mb .fv .wt,.mb.mb.mb .fv .ln,.mb.mb.mb .fv .rb{position:absolute;top:0;right:0;width:100%;aspect-ratio:1/1;pointer-events:none}
.mb.mb.mb .fv .wt{background:#fff;clip-path:polygon(41% 0,100% 0,100% 59%)}
.mb.mb.mb .fv .ln{background:var(--nv);clip-path:polygon(44.5% 0,45% 0,100% 55%,100% 55.5%)}
.mb.mb.mb .fv .rb{background:var(--rd);clip-path:polygon(35% 0,41% 0,100% 59%,100% 65%)}
.mb.mb.mb .fv .co{position:absolute;z-index:2;top:14px;right:16px;max-width:52%;color:var(--ink);font-size:10.5px;line-height:1.6;text-align:right}
.mb.mb.mb .fv .vt{position:absolute;z-index:2;top:52px;right:14px;max-height:126px;writing-mode:vertical-rl;color:var(--ink);font-size:10px;line-height:1.5;letter-spacing:.08em;white-space:nowrap;overflow:hidden}
.mb.mb.mb .fv h1{position:absolute;z-index:2;top:78px;left:20px;right:20px;color:#fff;font-size:clamp(34px,10.3vw,46px);font-weight:500;line-height:1.45;letter-spacing:.03em;text-shadow:0 2px 12px rgba(10,14,40,.35)}
.mb.mb.mb .fv .ld{position:absolute;z-index:2;top:228px;left:20px;right:20px;color:#fff;font-size:16.5px;font-weight:600;line-height:1.75;letter-spacing:.04em;text-shadow:0 1px 8px rgba(10,14,40,.45)}
.mb.mb.mb .fv .dia{position:absolute;z-index:2;top:352px;left:calc(57% - 140px);width:280px;height:280px;background:rgba(46,46,46,.97);transform:rotate(45deg);box-shadow:0 0 0 1px rgba(46,46,46,.5)}
.mb.mb.mb .fv .dia>i{position:absolute;inset:9px;border:1px solid rgba(255,255,255,.32)}
.mb.mb.mb .fv .dia .in{position:absolute;left:50%;top:50%;width:250px;transform:translate(-50%,-50%) rotate(-45deg);text-align:center}
.mb.mb.mb .fv .dia .bt{width:225px;margin:0 auto;font-size:18px;font-weight:700}
.mb.mb.mb .fv .dia p{margin-top:16px;color:var(--gd);font-size:13px;line-height:1.75}
.mb.mb.mb .fv .pn{position:absolute;z-index:2;left:14px;top:700px;color:rgba(255,255,255,.85);font-size:10px}
.mb.mb.mb .fv .sc{position:absolute;z-index:2;left:50%;top:752px;width:1px;height:66px;background:var(--dk)}
.mb.mb.mb .fv .sc:after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--dk)}

/* ---- カードの段(見本: 求人案件例)。紺の見出し帯・表・紺のボタン・後ろに黒と赤の斜めの帯 ---- */
.mb.mb.mb .of{padding:58px 0 70px;overflow:hidden}
.mb.mb.mb .of:before{content:"";position:absolute;right:0;top:260px;width:100%;height:640px;background:var(--dk);clip-path:polygon(100% 0,100% 72%,72% 100%,18% 46%)}
.mb.mb.mb .of:after{content:"";position:absolute;right:0;top:260px;width:100%;height:640px;background:var(--rd);clip-path:polygon(4% 40%,9% 40%,100% 92%,100% 100%)}
.mb.mb.mb .of>*{position:relative;z-index:1}
.mb.mb.mb .of .nt{margin:22px 20px 0;font-size:13px;line-height:1.7;text-align:center}
.mb.mb.mb .of .rail{margin-top:34px;padding-left:47px;padding-right:47px;scroll-padding:0 47px}
.mb.mb.mb .of .cd{width:295px;max-width:calc(100vw - 80px);padding-bottom:28px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mb.mb.mb .of .cd h3{display:flex;align-items:stretch;min-height:41px;background:var(--nv2);color:#fff;font-size:18px;line-height:1.4}
.mb.mb.mb .of .cd h3 small{flex:none;display:flex;align-items:center;justify-content:center;width:40px;background:var(--nv);color:var(--gd);font-size:16px;font-weight:600}
.mb.mb.mb .of .cd h3 span{display:flex;align-items:center;padding:7px 12px}
.mb.mb.mb .of .cl{margin:18px 20px 0;color:var(--nv);font-size:17px;font-weight:700;line-height:1.5}
.mb.mb.mb .of dl{margin:12px 20px 0}
.mb.mb.mb .of dl div{display:flex;gap:6px;padding:7px 4px;border-bottom:1px solid #e3e3e3;font-size:15px;line-height:1.6}
.mb.mb.mb .of dt{flex:none;width:31%;font-weight:400}
.mb.mb.mb .of dd{flex:1}
.mb.mb.mb .of dt+dd:before{content:"：";margin-left:-.4em}
.mb.mb.mb .of dd:only-child{padding-left:16px;position:relative}
.mb.mb.mb .of dd:only-child:before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--rd)}
.mb.mb.mb .of .cd .bt{margin:22px 20px 0;font-weight:400}
.mb.mb.mb .of .bn{margin-top:12px;color:var(--rd);font-size:12px;text-align:center}

/* ---- ABOUT: 黒い地・ふたりの丸い写真の間にサービス名の白い丸(赤い二重の輪) ---- */
.mb.mb.mb .ab{padding:44px 20px 60px;background:#2b2b2b;color:#fff;overflow:hidden}
.mb.mb.mb .ab .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.14;filter:grayscale(1) contrast(1.1)}
.mb.mb.mb .ab>*{position:relative}
.mb.mb.mb .ab .hx h2{color:#fff}
.mb.mb.mb .ab .tx{margin:24px auto 0;max-width:330px;padding:8px 6px;background:rgba(18,18,18,.78);color:#fff;font-weight:700;text-align:center}
.mb.mb.mb .ab .mt{display:flex;flex-direction:column;align-items:center;margin-top:46px}
.mb.mb.mb .ab .pp{display:flex;flex-direction:column;align-items:center}
.mb.mb.mb .ab .rd0{width:140px;height:140px;border-radius:50%;overflow:hidden;background:#f1f1f1}
.mb.mb.mb .ab .rd0 img{width:100%;height:100%;object-fit:cover}
.mb.mb.mb .ab .lb{margin-top:12px;min-width:140px;padding:8px 14px;color:#f1eee6;font-size:15px;line-height:1.5;text-align:center;letter-spacing:.06em}
.mb.mb.mb .ab .lb.a{background:var(--tl)}
.mb.mb.mb .ab .lb.b{background:var(--pu)}
.mb.mb.mb .ab .ar{display:block;margin:10px 0;color:var(--rd);font-size:48px;font-weight:300;line-height:1;letter-spacing:-.12em}
.mb.mb.mb .ab .ar:before{content:"\2191\2193"}
.mb.mb.mb .ab .ring{position:relative;width:270px;height:270px;margin:10px 0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.mb.mb.mb .ab .ring:before,.mb.mb.mb .ab .ring:after{content:"";position:absolute;border-radius:50%;border:1px solid var(--rd)}
.mb.mb.mb .ab .ring:before{inset:-12px}
.mb.mb.mb .ab .ring:after{inset:-20px;opacity:.7}
.mb.mb.mb .ab .ring div{display:flex;flex-direction:column;align-items:center;padding:0 24px}
.mb.mb.mb .ab .ring small{color:var(--ink);font-size:10px;font-weight:700;line-height:1.7;letter-spacing:.06em}
.mb.mb.mb .ab .ring b{margin-top:16px;color:var(--rd);font-size:44px;font-weight:500;line-height:1.1;letter-spacing:.12em}
.mb.mb.mb .ab .ring .mk{margin-top:16px;transform:scale(1.7)}
.mb.mb.mb .ab .ring em{margin-top:8px;color:#8a8a8a;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.mb.mb.mb .ab .msg{margin:46px auto 0;max-width:330px;padding:24px 20px;background:rgba(46,46,46,.95);color:#fff;font-size:15px;line-height:1.75;text-align:center}
.mb.mb.mb .ab .bt.w{margin-top:40px}

/* ---- REASON: 黒い地・金の英字が上の線にのる枠(左だけ赤い線) ---- */
.mb.mb.mb .re{padding:46px 20px 66px;background:var(--dk);color:#fff;overflow:hidden}
.mb.mb.mb .re:before{content:"";position:absolute;left:-30%;top:46%;width:160%;aspect-ratio:3/1;border:60px solid rgba(255,255,255,.025);transform:rotate(-30deg)}
.mb.mb.mb .re>*{position:relative}
.mb.mb.mb .re .hx h2{color:#fff}
.mb.mb.mb .re .tx{margin-top:24px;text-align:center;color:#fff;font-weight:700}
.mb.mb.mb .re .stat{width:310px;max-width:100%;margin:30px auto 0;padding:14px 16px 12px;border:1px solid var(--gd);text-align:center}
.mb.mb.mb .re .stat small{display:block;color:#fff;font-size:13px;font-weight:700}
.mb.mb.mb .re .stat p{display:flex;align-items:baseline;justify-content:center;gap:4px;color:var(--gd)}
.mb.mb.mb .re .stat b{font-size:40px;font-weight:700;line-height:1.2;letter-spacing:.02em}
.mb.mb.mb .re .stat em{font-size:16px;font-weight:700}
.mb.mb.mb .re .stat span{display:block;margin-top:2px;color:rgba(255,255,255,.75);font-size:11px;line-height:1.5}
.mb.mb.mb .re .fs{position:relative;width:312px;max-width:100%;margin:46px auto 0;padding:34px 24px 26px;border:1px solid rgba(255,255,255,.2);border-left-color:var(--rd)}
.mb.mb.mb .re .fs .en{position:absolute;left:50%;top:-22px;transform:translateX(-50%);padding:0 14px;background:var(--dk);color:var(--gd);font-size:24px;font-weight:700;line-height:1.7;white-space:nowrap;letter-spacing:.01em}
.mb.mb.mb .re .fs h3{font-size:18px;font-weight:700;line-height:1.4;text-align:center}
.mb.mb.mb .re .fs .bd{margin-top:22px;font-size:15px;line-height:1.68}
.mb.mb.mb .re .tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mb.mb.mb .re .tg li{padding:2px 9px;border:1px solid rgba(217,195,152,.6);color:var(--gd);font-size:12px;line-height:1.6}

/* ---- 人のカード(見本: コンサルタント紹介)。左に写真・右上に赤い帯の大きな英字・右下に紺の名前 ---- */
.mb.mb.mb .it{padding:44px 20px 60px;background:#fff;overflow:hidden}
.mb.mb.mb .it:before{content:"";position:absolute;right:0;top:0;width:40%;height:150px;background:var(--dk);clip-path:polygon(0 0,100% 0,100% 100%)}
.mb.mb.mb .it:after{content:"";position:absolute;left:0;top:30%;width:100%;height:60%;background:#f7f7f7;clip-path:polygon(0 0,100% 70%,100% 100%,0 100%)}
.mb.mb.mb .it>*{position:relative;z-index:1}
.mb.mb.mb .it .tx{max-width:330px}
.mb.mb.mb .it .pl{display:flex;flex-direction:column;gap:20px;width:310px;max-width:100%;margin:40px auto 0}
.mb.mb.mb .it .pc{display:flex;height:105px;overflow:hidden}
.mb.mb.mb .it .im{width:126px;flex:none;background:#dcc59a}
.mb.mb.mb .it .im img{width:100%;height:100%;object-fit:cover}
.mb.mb.mb .it .nm{flex:1;display:flex;flex-direction:column;min-width:0}
.mb.mb.mb .it .bnd{height:42px;padding:0 6px;background:var(--rd);color:rgba(255,255,255,.13);font-size:44px;line-height:52px;white-space:nowrap;overflow:hidden;letter-spacing:.02em}
.mb.mb.mb .it .na{flex:1;display:flex;align-items:center;justify-content:center;background:var(--nv);color:#efe4cc;font-size:18px;font-weight:500;letter-spacing:.12em;text-align:center;line-height:1.35;padding:0 8px}
.mb.mb.mb .it .pnn{margin-top:14px;font-size:11px;color:#777;text-align:right;width:310px;max-width:100%;margin-left:auto;margin-right:auto}

/* ---- 黒い帯(登録のおさそい)・右上に金の三角 ---- */
.mb.mb.mb .rg{padding:44px 20px 40px;background:var(--dk);color:#fff;text-align:center;overflow:hidden}
.mb.mb.mb .rg:before{content:"";position:absolute;right:0;top:0;width:28%;height:110px;background:linear-gradient(225deg,#d9c398 0%,#b9a57c 40%,rgba(185,165,124,0) 100%);clip-path:polygon(0 0,100% 0,100% 100%)}
.mb.mb.mb .rg>*{position:relative}
.mb.mb.mb .rg p{font-size:18px;line-height:1.7}
.mb.mb.mb .rg .bt.w{margin-top:30px;font-size:18px}
.mb.mb.mb .rg.last{background:#3e3b39}
.mb.mb.mb .rg.last .bt.w+.bt.w{margin-top:20px}

/* ---- 流れ: 金の細い枠のカード・上に金のひし形のSTEP・右に赤い三角 ---- */
.mb.mb.mb .fl{padding:44px 0 60px;background:#fff;overflow:hidden}
.mb.mb.mb .fl:before{content:"";position:absolute;left:0;top:18%;width:100%;height:60%;background:#f7f7f7;clip-path:polygon(0 0,95% 66%,0 100%)}
.mb.mb.mb .fl>*{position:relative;z-index:1}
.mb.mb.mb .fl .rail{margin-top:30px;padding:46px 54px 10px;gap:52px;scroll-padding:0 54px}
.mb.mb.mb .fl .st{position:relative;width:282px;max-width:calc(100vw - 108px);min-height:430px;padding:70px 20px 30px;border:1px solid var(--gd);background:#fff;text-align:center}
.mb.mb.mb .fl .st:after{content:"";position:absolute;right:-34px;top:162px;border:32px solid transparent;border-left:24px solid var(--rd);border-right:0}
.mb.mb.mb .fl .st:last-child:after{display:none}
.mb.mb.mb .fl .dm{position:absolute;left:50%;top:-40px;width:79px;height:79px;margin-left:-40px;display:flex;align-items:center;justify-content:center}
.mb.mb.mb .fl .dm:before{content:"";position:absolute;inset:11px;background:var(--gd);transform:rotate(45deg)}
.mb.mb.mb .fl .dm span{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ink);font-size:12px;line-height:1.3}
.mb.mb.mb .fl .dm b{font-size:20px;font-weight:700;line-height:1.2}
.mb.mb.mb .fl .st h3{font-size:18px;line-height:1.7}
.mb.mb.mb .fl .ic{width:160px;height:120px;margin:22px auto 0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mb.mb.mb .fl .ic img{width:100%;height:100%;object-fit:contain}
.mb.mb.mb .fl .st ul{margin-top:24px;padding-top:22px;border-top:1px solid #dcdcdc;font-size:15px;line-height:1.7}
.mb.mb.mb .fl .bar{margin-top:30px}

/* 特典の帯(見本: 本のプレゼントのバナー)。紺の地・白い箱の太い文字・右に本・下に白い丸ボタン */
.mb.mb.mb .gf{display:block;position:relative;width:310px;max-width:calc(100% - 40px);margin:50px auto 0;padding:16px 14px 16px;background:linear-gradient(150deg,#123f72 0%,var(--nv) 55%,#041b33 100%);color:#fff;overflow:hidden}
.mb.mb.mb .gf:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px)}
.mb.mb.mb .gf>*{position:relative}
.mb.mb.mb .gf .gp{font-size:12px;font-weight:700;line-height:1.5;text-align:center;letter-spacing:.02em}
.mb.mb.mb .gf .gt{margin-top:8px;font-size:23px;font-weight:900;line-height:1.78;letter-spacing:.02em}
.mb.mb.mb .gf .gt span{padding:1px 8px;background:#fff;color:#111;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mb.mb.mb .gf .gg{margin-top:12px;font-size:30px;font-weight:900;line-height:1.2;letter-spacing:.04em}
.mb.mb.mb .gf .gb{display:flex;gap:10px;margin-top:12px;align-items:flex-start}
.mb.mb.mb .gf .gb ul{flex:1;min-width:0;padding-top:4px}
.mb.mb.mb .gf .gb li{position:relative;padding-left:16px;font-size:13px;font-weight:700;line-height:1.5}
.mb.mb.mb .gf .gb li+li{margin-top:8px}
.mb.mb.mb .gf .gb li:before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;background:#fff}
.mb.mb.mb .gf .bk{flex:none;width:118px;padding:9px 8px 0;background:#fff;color:var(--nv);box-shadow:4px 4px 0 rgba(0,0,0,.25);overflow:hidden}
.mb.mb.mb .gf .bk .k{font-size:8.5px;font-weight:700;line-height:1.4}
.mb.mb.mb .gf .bk .t{margin-top:3px;font-size:13px;font-weight:700;line-height:1.35}
.mb.mb.mb .gf .bk .t em{display:block;margin-top:2px;color:var(--rd);font-size:17px}
.mb.mb.mb .gf .bk .s{margin-top:4px;color:#555;font-size:7.5px;line-height:1.5}
.mb.mb.mb .gf .bk img{width:calc(100% + 16px);height:62px;margin:6px -8px 0;object-fit:cover;object-position:50% 70%}
.mb.mb.mb .gf .bk .au{margin:0 -8px;padding:2px 8px;background:var(--nv);color:#fff;font-size:8.5px;text-align:right}
.mb.mb.mb .gf .gbtn{margin-top:14px;padding:9px 30px 9px 8px;border-radius:999px;background:#fff;color:var(--nv);font-size:12px;font-weight:900;line-height:1.4;letter-spacing:-.02em;text-align:center;position:relative}
.mb.mb.mb .gf .gbtn:after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:3px solid var(--nv);border-right:3px solid var(--nv);transform:rotate(45deg)}

/* ---- FAQ: 赤い Q の列・黒い質問の帯・金の矢じるし ---- */
.mb.mb.mb .fq{padding:44px 20px 40px;background:var(--gy)}
.mb.mb.mb .fq .ql{width:310px;max-width:100%;margin:30px auto 0}
.mb.mb.mb .fq details{background:var(--dk)}
.mb.mb.mb .fq summary{display:flex;align-items:stretch;min-height:71px;color:#fff;font-size:15px;line-height:1.7;cursor:pointer;list-style:none}
.mb.mb.mb .fq summary::-webkit-details-marker{display:none}
.mb.mb.mb .fq summary i{flex:none;display:flex;align-items:center;justify-content:center;width:40px;background:var(--rd);color:var(--gd);font-size:16px}
.mb.mb.mb .fq summary span{flex:1;position:relative;display:flex;align-items:center;padding:10px 44px 10px 16px}
.mb.mb.mb .fq summary span:after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--gd);border-bottom:2px solid var(--gd);transform:rotate(45deg);transition:transform .2s}
.mb.mb.mb .fq details[open] summary span:after{margin-top:-2px;transform:rotate(-135deg)}
.mb.mb.mb .fq details p{display:flex;gap:12px;padding:16px 16px 18px;background:#fff;border:1px solid #e6e6e6;border-top:0;font-size:14px;line-height:1.75}
.mb.mb.mb .fq details p i{flex:none;color:var(--rd);font-size:16px;line-height:1.5}

/* ---- 読みものカード(見本: 特集コンテンツ) ---- */
.mb.mb.mb .ft{padding:44px 0 60px;background:#fff}
.mb.mb.mb .ft .hx,.mb.mb.mb .ft .tx{margin-left:20px;margin-right:20px}
.mb.mb.mb .ft .rail{margin-top:30px;padding:4px 55px 12px;gap:20px;scroll-padding:0 55px}
.mb.mb.mb .ft .fc{width:280px;max-width:calc(100vw - 110px);background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.16)}
.mb.mb.mb .ft .fc img{width:100%;height:130px;object-fit:cover}
.mb.mb.mb .ft .fb{padding:20px 20px 24px}
.mb.mb.mb .ft .fb h3{font-size:16px;font-weight:700;line-height:1.35}
.mb.mb.mb .ft .fb p{margin-top:8px;padding-bottom:12px;border-bottom:1px solid #e5e5e5;font-size:14px;line-height:1.7}
.mb.mb.mb .ft .ftg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-top:16px}
.mb.mb.mb .ft .ftg li{padding:2px 14px;background:#eee;font-size:13px;line-height:1.7}

/* ---- いちばん下 ---- */
.mb.mb.mb .fo{background:#fff;padding:40px 0 0}
.mb.mb.mb .fo .nav{width:310px;max-width:calc(100% - 40px);margin:0 auto}
.mb.mb.mb .fo .nav li{border-bottom:1px solid #ddd}
.mb.mb.mb .fo .nav a{position:relative;display:block;padding:14px 24px 14px 0;font-size:15px;line-height:1.6}
.mb.mb.mb .fo .nav a:after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);transform:rotate(45deg)}
.mb.mb.mb .fo .cp{width:310px;max-width:calc(100% - 40px);margin:30px auto 0;padding:14px 16px;background:#f7f6f4;font-size:12px;line-height:1.6}
.mb.mb.mb .fo .cp div{display:flex;gap:10px;padding:4px 0}
.mb.mb.mb .fo .cp dt{flex:none;width:5.5em;color:#777}
.mb.mb.mb .fo .cp dd{flex:1}
.mb.mb.mb .fo .lg{justify-content:center;margin:34px auto 30px;padding-top:30px;width:310px;max-width:calc(100% - 40px);border-top:1px solid #e5e5e5}
.mb.mb.mb .fo .lg b{font-size:24px}
.mb.mb.mb .fo .cr{padding:12px 16px;background:#000;color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:1.6}