@charset "UTF-8";
/* CSS Document */
#boxTit{margin: 0 0 45px;}

.frame{margin: 0 auto 80px;}
.frame h3{margin: 0;}
.frame ul{padding: 20px 0; border-bottom: 1px dashed #ccc;}
.frame ul:last-of-type{border-bottom: none;}
.frame li{position: relative; padding-left: 60px;}
.frame li:before{position: absolute; top:0; left: 0; width: 40px; height: 30px; line-height: 30px; font-size: 18px; line-height: 30px; text-align: center; color: #fff; border-radius: 3px;}
.frame li:nth-of-type(1){font-size: 16px; font-weight: bold; margin: 0 0 12px;}
.frame li:nth-of-type(1):before{content: 'Q'; background: #355bc8;}
.frame li:nth-of-type(2){padding-top: 4px;}
.frame li:nth-of-type(2):before{content: 'A'; background: #c83535;}

.frame2{border: 1px solid #000; padding: 19px;}
.frame2 h3{margin: 0 0 25px;}
.frame2 .tit{font-size: 18px; font-weight: bold; margin: 0 0 5px -0.5em;}
.frame2 .item{margin: 0 0 40px; position: relative;}
.frame2 .item:nth-of-type(2){margin: 0;}
.frame2 .btn{position: absolute; top:35%; right: 0; width: 100%; max-width: 320px; line-height: 1.4; background: #0058a4; color: #fff; display: block; text-align: center; font-size: 15px; border-radius: 5px; padding:10px 0;}
.frame2 .btn:after{content: '▶'; position: absolute; top: 50%; right: 6.25%; transform: translateY(-50%); font-size: 6px; color: #fff;}
.frame2 .item:nth-of-type(2) .btn{padding:5px 0;}

/*===============================
             MEDIA
================================*/
@media only screen and (max-width:750px){
    .frame2 .btn{position: relative; top:0; margin: 20px auto 0;}
	.frame2 .btn:after{right: 3%;}
}