/* 社長 × ハカセの掛け合い（inc/manga.php）。解説記事と会社ページで読む（2026-10-30） */
/* 記事の掛け合い（社長 × ハカセ、inc/manga.php・2026-10-30）。セキュリティ図鑑と同じ形を、図鑑の紺と淡い光に合わせた色で */
.mg-talk{display:grid;gap:14px;margin:6px 0 26px;padding:20px 18px;border-radius:22px;background:radial-gradient(circle at 1px 1px,rgba(21,48,79,.08) 1px,transparent 1.5px) 0 0/14px 14px,#FBFCFE;border:2px solid #15304F;box-shadow:5px 5px 0 #15304F}
.mg-row{display:flex;align-items:flex-start;gap:12px}
.mg-row.a{justify-content:flex-end}
.mg-face{flex:none;width:62px;text-align:center}
.mg-face svg{display:block;width:62px;height:62px;border-radius:50%;border:2px solid #15304F;background:#fff}
.mg-face small{display:block;margin-top:3px;font-size:11px;font-weight:900;color:#15304F}
.mg-bub{position:relative;margin:4px 0 0!important;max-width:min(560px,80%);padding:12px 16px;border:2px solid #15304F;border-radius:18px;background:#fff;font-size:15px!important;line-height:1.8!important;font-weight:700;color:#0D1B2A;overflow-wrap:anywhere;word-break:normal}
.mg-row.q .mg-bub{background:#FFF6D9}
.mg-row.a .mg-bub{background:#E9F1FB}
.mg-row.q .mg-bub::before{content:"";position:absolute;left:-11px;top:16px;border:9px solid transparent;border-right:11px solid #15304F;border-left:0}
.mg-row.q .mg-bub::after{content:"";position:absolute;left:-7px;top:18px;border:7px solid transparent;border-right:9px solid #FFF6D9;border-left:0}
.mg-row.a .mg-bub::before{content:"";position:absolute;right:-11px;top:16px;border:9px solid transparent;border-left:11px solid #15304F;border-right:0}
.mg-row.a .mg-bub::after{content:"";position:absolute;right:-7px;top:18px;border:7px solid transparent;border-left:9px solid #E9F1FB;border-right:0}
@media (max-width:700px){.mg-talk{padding:14px 10px;box-shadow:3px 3px 0 #15304F}.mg-face,.mg-face svg{width:48px}.mg-face svg{height:48px}.mg-bub{max-width:82%;font-size:14px!important;padding:10px 12px}}
/* 上の結論をハカセの吹き出しに・スライドの小さな掛け合い・FAQの顔（2026-10-30） */
.ax-answer.mg-hero{display:flex;align-items:flex-start;gap:12px;max-width:640px;padding:0;background:none;border:0;box-shadow:none}
.mg-hero .mg-face{width:54px}.mg-hero .mg-face svg{width:54px;height:54px}
.mg-hero-b{position:relative;flex:1;min-width:0;padding:12px 16px;border:2px solid #15304F;border-radius:16px;background:#E9F1FB}
.mg-hero-b::before{content:"";position:absolute;left:-11px;top:16px;border:9px solid transparent;border-right:11px solid #15304F;border-left:0}
.mg-hero-b::after{content:"";position:absolute;left:-7px;top:18px;border:7px solid transparent;border-right:9px solid #E9F1FB;border-left:0}
.mg-hero-b b{display:block;font-size:12px;color:#0E7F70;margin-bottom:2px}
.mg-hero-b p{margin:0;font-size:15px;line-height:1.85;font-weight:600;color:#0D1B2A}
.mg-mini{display:grid;gap:8px;margin-top:8px}
.mg-mini .mg-row{gap:8px;align-items:flex-start}
.mg-mini .mg-face{width:36px}.mg-mini .mg-face svg{width:36px;height:36px;border-width:1.5px}
.gprose .mg-mini .mg-bub,.fzs .mg-mini .mg-bub{max-width:none;flex:1;margin:0!important;padding:8px 12px;border-width:1.5px;border-radius:14px;font-size:13.5px!important;line-height:1.75!important;font-weight:700;color:#0D1B2A}
.gprose .mg-mini .mg-row.q .mg-bub,.fzs .mg-mini .mg-row.q .mg-bub{flex:0 1 auto}
.mg-mini .mg-bub::before,.mg-mini .mg-bub::after{display:none}
.gprose .mg-mini .mg-bub b,.fzs .mg-mini .mg-bub b{box-shadow:inset 0 -7px 0 rgba(242,169,59,.30)}
.cp-faq .qn.mg-qn{width:34px;height:34px;padding:0;background:none!important;overflow:hidden}
.cp-faq .qn.mg-qn svg{display:block;width:34px;height:34px;border-radius:50%;border:1.5px solid #15304F;background:#fff}
@media (max-width:700px){.mg-hero .mg-face,.mg-hero .mg-face svg{width:44px}.mg-hero .mg-face svg{height:44px}.mg-hero-b p{font-size:14px}}
/* 会社ページ：今ある箱の中に入れる一言（顔＋小さな吹き出し、2026-10-30） */
.mg-in{display:flex;align-items:flex-start;gap:10px;margin-top:16px;text-align:left}
.mg-in .mg-face{flex:none;width:44px;text-align:center}
.mg-in .mg-face svg{display:block;width:44px;height:44px;border-radius:50%;border:1.5px solid #15304F;background:#fff}
.mg-in .mg-face small{display:block;margin-top:2px;font-size:10px;font-weight:900;color:#15304F;letter-spacing:0}
.mg-in .mg-bub{position:relative;flex:1;min-width:0;margin:2px 0 0!important;max-width:none;padding:9px 13px;border:1.5px solid #15304F;border-radius:14px;font-size:13.5px!important;line-height:1.7!important;font-weight:700;color:#0D1B2A}
.mg-in.a .mg-bub{background:#E9F1FB}.mg-in.q .mg-bub{background:#FFF6D9}
.mg-in .mg-bub::before{content:"";position:absolute;left:-9px;top:13px;border:7px solid transparent;border-right:9px solid #15304F;border-left:0}
.mg-in .mg-bub::after{content:"";position:absolute;left:-6px;top:15px;border:5px solid transparent;border-right:7px solid #FFF6D9;border-left:0}
.mg-in.a .mg-bub::after{border-right-color:#E9F1FB}
.tr-sum .mg-in{width:100%;max-width:260px;margin-top:22px}
.lp-fit-good .mg-in,.lp-fit-bad .mg-in{margin-top:18px;padding-top:14px;border-top:1px dashed #DCE5EF}
#ask .mg-in{margin:4px 0 14px}
.cp-cmp-box .mg-in{margin:18px 10px 6px}
/* 「8/9」の箱の中は縦に（顔が上、吹き出しが下で幅いっぱい） */
.tr-sum .mg-in{flex-direction:column;align-items:center;gap:6px}
.tr-sum .mg-in .mg-bub{width:100%;text-align:left}
.tr-sum .mg-in .mg-bub::before{left:50%;top:-9px;margin-left:-7px;border:7px solid transparent;border-bottom:9px solid #15304F;border-top:0}
.tr-sum .mg-in .mg-bub::after{left:50%;top:-6px;margin-left:-5px;border:5px solid transparent;border-bottom:7px solid #E9F1FB;border-top:0}
.fzs .mg-mini .mg-row.q .mg-bub{background:#FFF6D9}.fzs .mg-mini .mg-row.a .mg-bub{background:#E9F1FB}