@charset "utf-8";
/* CSS Document */

div.balloon-box ul:not([class]), div.balloon-box ol { margin-top: 0.5em; margin-bottom: 0; }
/* 吹き出し */
.balloon-box { position: relative; overflow: hidden; padding-bottom: 3px; margin-top: 20px; }

.balloon-icon { position: absolute; top: 0; overflow: hidden; width: 80px; height: 80px; margin-bottom: 0; }

@media (max-width: 767px) { .balloon-icon { width: 60px; height: 60px; } }

.balloon-icon.maru { border: 2px solid #eee; border-radius: 40px; }

.icon-name { position: absolute; text-align: center; letter-spacing: 0; line-height: 0.7rem !important; color: #777; }

@media (max-width: 767px) { .icon-name { width: 60px; top: 62px; font-size: 9px; } }

@media (min-width: 768px) { .icon-name { width: 80px; top: 85px; font-size: 10px; } }

.balloon-icon img { width: 80px; height: auto; margin-bottom: 0 !important; }

@media (max-width: 767px) { .balloon-icon img { width: 60px; } }

.balloon-serif .balloon-content img.star { width: 24%; padding-bottom: 1px; margin-bottom: -3px !important; }

@media (max-width: 767px) { .balloon-serif .balloon-content img.star { width: 38%; padding-bottom: 2px; } }

.balloon-content p:last-of-type { padding-bottom: 0 !important; }

.balloon-left .balloon-icon { left: 0; }

.balloon-left .icon-name { left: 0; }

.balloon-left .balloon-serif { position: relative; float: left; margin: 10px 105px 20px 105px; padding: 0; }

@media (max-width: 767px) { .balloon-left .balloon-serif { margin: 10px 0px 20px 78px; } }

.balloon-left .balloon-serif:before { content: ""; position: absolute; left: -7px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 10px 7px 0; z-index: 3; }

@media (max-width: 767px) { .balloon-left .balloon-serif:before { top: 13px; } }

@media (min-width: 768px) { .balloon-left .balloon-serif:before { top: 16px; } }

.balloon-left .balloon-serif:after { content: ""; position: absolute; left: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 8px 10px 8px 0; z-index: 2; }

@media (max-width: 767px) { .balloon-left .balloon-serif:after { top: 12px; } }

@media (min-width: 768px) { .balloon-left .balloon-serif:after { top: 15px; } }

.balloon-left .balloon-serif .balloon-content { position: relative; line-height: 1.5rem; border: 2px solid #ccc; background: #fff; border-radius: 6px; font-size: 0.95em; z-index: 2; }

@media (max-width: 767px) { .balloon-left .balloon-serif .balloon-content { padding: 0.8rem; } }

@media (min-width: 768px) { .balloon-left .balloon-serif .balloon-content { padding: 1.15rem; } }

.balloon-right .balloon-icon { right: 0; }

.balloon-right .icon-name { right: 0; }

.balloon-right .balloon-serif { position: relative; float: right; margin: 0 105px 20px 105px; padding: 0; }

@media (max-width: 767px) { .balloon-right .balloon-serif { margin: 0 78px 20px 0px; } }

.balloon-right .balloon-serif:before { content: ""; position: absolute; right: -7px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 0px 7px 10px; z-index: 3; }

@media (max-width: 767px) { .balloon-right .balloon-serif:before { top: 13px; } }

@media (min-width: 768px) { .balloon-right .balloon-serif:before { top: 16px; } }

.balloon-right .balloon-serif:after { content: ""; position: absolute; right: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 8px 0px 8px 10px; z-index: 2; }

@media (max-width: 767px) { .balloon-right .balloon-serif:after { top: 12px; } }

@media (min-width: 768px) { .balloon-right .balloon-serif:after { top: 15px; } }

.balloon-right .balloon-serif .balloon-content { position: relative; line-height: 1.5rem; border: 2px solid; border-radius: 6px; font-size: 0.95em; z-index: 2; }

@media (max-width: 767px) { .balloon-right .balloon-serif .balloon-content { padding: 0.8rem; } }

@media (min-width: 768px) { .balloon-right .balloon-serif .balloon-content { padding: 1.15rem; } }

.balloon-box ol li { position: relative; display: block; padding: 1px 0px 5px 25px; margin-bottom: 0.15em; }

.balloon-box ol li:after { counter-increment: li; content: counter(li); position: absolute; left: 0px; top: 1.2em; padding: 0 0 0 0px; height: 20px; width: 20px; color: #fff; text-align: center; font-size: 0.65em; border-radius: 11px; }

.balloon-right.balloon-gray .balloon-serif:after, .balloon-right.has-ccc-ballon .balloon-serif:after { border-color: transparent transparent transparent #ccc; }

.balloon-right.balloon-gray .balloon-content, .balloon-right.has-ccc-ballon .balloon-content { border-color: #ccc; }

.balloon-left.balloon-gray .balloon-serif:after, .balloon-left.has-ccc-ballon .balloon-serif:after { border-color: transparent #ccc transparent transparent; }

.balloon-left.balloon-gray .balloon-content, .balloon-left.has-ccc-ballon .balloon-content { border-color: #ccc; }

.balloon-right.balloon-bg-gray .balloon-serif:before, .balloon-right.has-efefef-bgballon .balloon-serif:before { border-color: transparent transparent transparent #efefef; }

.balloon-right.balloon-bg-gray .balloon-content, .balloon-right.has-efefef-bgballon .balloon-content { background: #efefef; }

.balloon-left.balloon-bg-gray .balloon-serif:before, .balloon-left.has-efefef-bgballon .balloon-serif:before { border-color: transparent #efefef transparent transparent; }

.balloon-left.balloon-bg-gray .balloon-content, .balloon-left.has-efefef-bgballon .balloon-content { background: #efefef; }

.balloon-right.balloon-blue .balloon-serif:after, .balloon-right.has-93-d-2-f-0-ballon .balloon-serif:after { border-color: transparent transparent transparent #93D2F0; }

.balloon-right.balloon-blue .balloon-content, .balloon-right.has-93-d-2-f-0-ballon .balloon-content { border-color: #93D2F0; }

.balloon-left.balloon-blue .balloon-serif:after, .balloon-left.has-93-d-2-f-0-ballon .balloon-serif:after { border-color: transparent #93D2F0 transparent transparent; }

.balloon-left.balloon-blue .balloon-content, .balloon-left.has-93-d-2-f-0-ballon .balloon-content { border-color: #93D2F0; }

.balloon-right.balloon-bg-blue .balloon-serif:before, .balloon-right.has-e-2-f-6-ff-bgballon .balloon-serif:before { border-color: transparent transparent transparent #E2F6FF; }

.balloon-right.balloon-bg-blue .balloon-content, .balloon-right.has-e-2-f-6-ff-bgballon .balloon-content { background: #E2F6FF; }

.balloon-left.balloon-bg-blue .balloon-serif:before, .balloon-left.has-e-2-f-6-ff-bgballon .balloon-serif:before { border-color: transparent #E2F6FF transparent transparent; }

.balloon-left.balloon-bg-blue .balloon-content, .balloon-left.has-e-2-f-6-ff-bgballon .balloon-content { background: #E2F6FF; }

.balloon-right.balloon-red .balloon-serif:after, .balloon-right.has-f-48789-ballon .balloon-serif:after { border-color: transparent transparent transparent #F48789; }

.balloon-right.balloon-red .balloon-content, .balloon-right.has-f-48789-ballon .balloon-content { border-color: #F48789; }

.balloon-left.balloon-red .balloon-serif:after, .balloon-left.has-f-48789-ballon .balloon-serif:after { border-color: transparent #F48789 transparent transparent; }

.balloon-left.balloon-red .balloon-content, .balloon-left.has-f-48789-ballon .balloon-content { border-color: #F48789; }

.balloon-right.balloon-bg-red .balloon-serif:before, .balloon-right.has-ffebeb-bgballon .balloon-serif:before { border-color: transparent transparent transparent #FFEBEB; }

.balloon-right.balloon-bg-red .balloon-content, .balloon-right.has-ffebeb-bgballon .balloon-content { background: #FFEBEB; }

.balloon-left.balloon-bg-red .balloon-serif:before, .balloon-left.has-ffebeb-bgballon .balloon-serif:before { border-color: transparent #FFEBEB transparent transparent; }

.balloon-left.balloon-bg-red .balloon-content, .balloon-left.has-ffebeb-bgballon .balloon-content { background: #FFEBEB; }

.balloon-right.balloon-green .balloon-serif:after, .balloon-right.has-9-ddd-93-ballon .balloon-serif:after { border-color: transparent transparent transparent #9DDD93; }

.balloon-right.balloon-green .balloon-content, .balloon-right.has-9-ddd-93-ballon .balloon-content { border-color: #9DDD93; }

.balloon-left.balloon-green .balloon-serif:after, .balloon-left.has-9-ddd-93-ballon .balloon-serif:after { border-color: transparent #9DDD93 transparent transparent; }

.balloon-left.balloon-green .balloon-content, .balloon-left.has-9-ddd-93-ballon .balloon-content { border-color: #9DDD93; }

.balloon-right.balloon-bg-green .balloon-serif:before, .balloon-right.has-d-1-f-8-c-2-bgballon .balloon-serif:before { border-color: transparent transparent transparent #D1F8C2; }

.balloon-right.balloon-bg-green .balloon-content, .balloon-right.has-d-1-f-8-c-2-bgballon .balloon-content { background: #D1F8C2; }

.balloon-left.balloon-bg-green .balloon-serif:before, .balloon-left.has-d-1-f-8-c-2-bgballon .balloon-serif:before { border-color: transparent #D1F8C2 transparent transparent; }

.balloon-left.balloon-bg-green .balloon-content, .balloon-left.has-d-1-f-8-c-2-bgballon .balloon-content { background: #D1F8C2; }

.balloon-right.balloon-yellow .balloon-serif:after, .balloon-right.has-ffd-75-e-ballon .balloon-serif:after { border-color: transparent transparent transparent #FFD75E; }

.balloon-right.balloon-yellow .balloon-content, .balloon-right.has-ffd-75-e-ballon .balloon-content { border-color: #FFD75E; }

.balloon-left.balloon-yellow .balloon-serif:after, .balloon-left.has-ffd-75-e-ballon .balloon-serif:after { border-color: transparent #FFD75E transparent transparent; }

.balloon-left.balloon-yellow .balloon-content, .balloon-left.has-ffd-75-e-ballon .balloon-content { border-color: #FFD75E; }

.balloon-right.balloon-bg-yellow .balloon-serif:before, .balloon-right.has-fff-8-d-1-bgballon .balloon-serif:before { border-color: transparent transparent transparent #FFF8D1; }

.balloon-right.balloon-bg-yellow .balloon-content, .balloon-right.has-fff-8-d-1-bgballon .balloon-content { background: #FFF8D1; }

.balloon-left.balloon-bg-yellow .balloon-serif:before, .balloon-left.has-fff-8-d-1-bgballon .balloon-serif:before { border-color: transparent #FFF8D1 transparent transparent; }

.balloon-left.balloon-bg-yellow .balloon-content, .balloon-left.has-fff-8-d-1-bgballon .balloon-content { background: #FFF8D1; }

.balloon-right.balloon-bg-none .balloon-serif:before, .balloon-right.has-fff-bgballon .balloon-serif:before { border-color: transparent transparent transparent #fff; }

.balloon-right.balloon-bg-none .balloon-content, .balloon-right.has-fff-bgballon .balloon-content { background: #fff; }

.balloon-left.balloon-bg-none .balloon-serif:before, .balloon-left.has-fff-bgballon .balloon-serif:before { border-color: transparent #fff transparent transparent; }

.balloon-left.balloon-bg-none .balloon-content, .balloon-left.has-fff-bgballon .balloon-content { background: #fff; }

.balloon-left.balloon-none .balloon-serif:after, .balloon-left.balloon-none .balloon-content, .balloon-right.balloon-none .balloon-serif:after, .balloon-right.balloon-none .balloon-content, .balloon-left.has-fff-ballon .balloon-serif:after, .balloon-left.has-fff-ballon .balloon-content, .balloon-right.has-fff-ballon .balloon-serif:after, .balloon-right.has-fff-ballon .balloon-content { border-color: transparent; }

.balloon-left.balloon-none .balloon-serif:before, .balloon-left.has-fff-ballon .balloon-serif:before { left: -9px; }

.balloon-right.balloon-none .balloon-serif:before, .balloon-right.has-fff-ballon .balloon-serif:before { right: -9px; }

.balloon-content p { margin: 5px; }