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

.inner dl{margin:20px;}
.inner dt, .inner dd{background:#fff; border-radius:10px; padding:20px; position:relative;}
.inner dt{background:#bef18c;}
.inner dl dt:before{content: ""; position: absolute; top: 0; left: -25px; width: 20px; height: 20px; border: 0 solid transparent; border-left: 10px solid #bef18c; border-radius: 20px 0 20px 0; transform: rotate(-90deg);}
.inner dl dt:after {content: "Q"; position:absolute; top:2px; left:10px; color:#fff; font-size:1.4em;}
.inner dl dd:before{content: ""; position: absolute; top: 0; right: -25px; width: 20px; height: 20px; border: 0 solid transparent; border-right: 10px solid #fff; border-radius: 0 20px 0 0; transform: rotate(90deg);}
.inner dl dd:after {content: "A"; position:absolute; top:2px; right:10px; color:#bef18c; font-size:1.4em;}
@media screen and (min-width: 721px){
	.inner dt, .inner dd{width:45%;}
	.inner dd{margin-left:auto;}
	.inner dl{display:flex;}
}
@media screen and (max-width: 720px){
	.inner dt{margin: 0 10px 10px 0;}
	.inner dd{margin: 0 0 0 10px;}
}