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

/*==========================================
 MERIT
===========================================*/
.merit_block .text{
 line-height: 1.8;
}
.merit_block .text .lead{
 font-family: 'Josefin Sans', sans-serif;
 font-weight: bold;
 font-size: 2.4rem;
 color: #00a7ad;
 line-height: normal;
 letter-spacing: 0.1em;
}
.merit_block .text .lead .number{
 font-size: 4.8rem;
}
.merit_block .text .ttl{
 font-size: 2.4rem;
 font-weight: bold;
 letter-spacing: 0.05em;
 margin: 25px 0;
 line-height: normal;
color: #333;
}
.merit_list .frag_r,
.merit_list .frag_l{
 max-width: 198px;
 width: 100%;
 padding-top: 14%;
 margin: 15px auto;
}
.merit_list .frag_l{
 background: url(../img/common/img_flag02_left.png) no-repeat center top;
 background-size: contain;
}
.merit_list .frag_r{
 background: url(../img/common/img_flag02_right.png) no-repeat center top;
 background-size: contain;
}
.merit_block .yellow_line{
background: linear-gradient(transparent 60%, #fffea7 60%);
}

@media screen and (min-width: 768px) { 
.merit_block{
 justify-content: space-between;
 align-items: center;
}
.merit_block.mbR{
 flex-direction:row-reverse;	
}
.merit_block .text,
.merit_block .img{
 width: 48%;
}
}
@media screen and (min-width: 768px) and (max-width: 1040px) {
.merit_block .text{
 width: 55%;
}
.merit_block .img{
 width: 40%;
}
}
@media screen and (max-width: 1040px) {
.merit_block .text .ttl {
 font-size: 2.1rem;
 letter-spacing: normal;
}
.merit_block .text .item br{
 display: none;
}
}
@media screen and (max-width: 767px) {
.merit_list .frag_r,
.merit_list .frag_l{
 padding-top: 17%;
}
.merit_block .text .ttl{
 margin: 5px 0 15px;
}
.merit_block .text .ttl br{
 display: none;
}
.merit_block .img{
 margin: 20px auto 0;
 text-align: center;
}
}
@media screen and (max-width: 480px) {
.merit_list .frag_r,
.merit_list .frag_l{
 padding-top: 27%;
}	
}