@charset "UTF-8";

.top-merit-items{width: 90vw;margin: 0 auto;background: url(../images/bg01.jpg) repeat top center;background-size: 10vw;padding: 5%;}
.top-merit-items li { width: 100%; padding: 1px 5vw 5vw; margin:0 auto 5vw; background: #f7f6e2; border: 2px solid #e9e6c3; }
.top-merit-item-title { margin: -2.5vw auto 2.5vw; text-align: center; }
.top-merit-item-title .badge { width: 12vw; height: 12vw; margin: 0 auto 2vw; color: #fff; font-size: 7.89vw; font-family: "Lato"; font-weight: 700;  background: -moz-linear-gradient(300deg, #ff7000 50%, #fc984c 50%); background: -webkit-linear-gradient(300deg, #ff7000 50%, #fc984c 50%); background: linear-gradient(150deg, #ff7000 50%, #fc984c 50%); border: 2px solid var(--orange); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.top-merit-item-title .title { color: var(--orange); font-size: 5.26vw; font-weight: bold; line-height: 1.4; }
.top-merit-item-image { width: 100%; margin-bottom: 2.5vw; }
.top-merit-item-comment p { font-size: 3.42vw; font-weight: bold; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.midashi{background: linear-gradient(to right, #ff7002, #ff0800);}
.midashi p{color:#fff;font-weight:bold;text-align:center;line-height:1.3;font-size:4.5vw;padding:4% 0;}
.midashi b{font-size:170%;display:block;color:#fffa8b;}

/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) { 
.top-merit-items{width:100%;background: url(../images/bg01.jpg) repeat top center;background-size: 35px;padding: 30px;}
.top-merit-items li { padding: 20px; margin-bottom: 10px; border-width: 5px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
.top-merit-item-text {width: 100%;}
.top-merit-item-title { margin: 0 auto 8px; text-align: left; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-merit-item-title .badge {width: 45px;height: 45px;margin: 0 10px 0 0;font-size: 30px;}
.top-merit-item-title .title {font-size: 26px;flex: 1;}
.top-merit-item-comment p{font-size:15px;}

.midashi p{font-size:24px;}
}