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




/*ドリル*/
p{line-height: 2.3; margin-bottom: 5px;}

.cp02{background-color: #fffcdb;}
.answer{display: flex;}
.answer2{color: #1f96cd; font-weight: bold; font-size: 20px; margin: 20px 0 10px;}
.cp03{background-color:  #fffcdb; margin-bottom: 20px;}

.cp03flex .flex01{background-color: #00a7b6;color: white; font-weight: bold; height: 25px; border-radius: 0 20px 20px 0;} 
.cp03flex li{list-style: none;}

@media (min-width: 768px) {
.cp01{margin: 70px 0; border-radius: 25px; padding: 20px;}
.cp02{padding: 40px 20px 20px; border-radius: 25px; margin-top: -4%;}
.answer{ width: 50%; }
.cp03{padding: 20px 10px 20px 0;}
.cp03 .cp03flex{display: flex;}
.cp03flex .flex01{width: 10%; padding-left: 10px; margin-right: 11px;} 
.cp03flex img{width: 20%; margin-left: 20px;}
.img_frex{display: flex; width: 50%;}
.img_frex .rightimg{margin-left: 40px;}
.img_frex .leftimg{width: 72%; margin: 0 20px; padding: 30px;}
.answer3{ width: 50%; }    
}

@media (max-width: 767.98px) {
#detail_box {font-size: 14px;}
.cp01{margin: 30px 0; border-radius: 20px; padding: 10px;}
.cp02{padding: 30px 20px 20px; border-radius: 20px; margin-top: -7%;}
.answer{width: 80%;}

.cp03flex{padding: 10px 0;}
.cp03flex .flex01{width: 20%; padding-left: 10px;} 
.cp03flex li{padding-right: 5px; padding-left: 1em; text-indent: -1em;}
.cp03flex img{width: 60%; margin: 0 auto; display: block; padding-top: 10px;}
.img_frex .leftimg{width: 60%; margin: 0 auto; display: block; margin-top: 20px;}
}