@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */

.img01{
text-align: center;
}


#merit .alpha{
margin-bottom: 40px;
}
#merit .inner .img{
width: 40%;
float: right;
margin-left: 10px;
}
#merit .inner p{
flex: 1;
}

#merit .box{
background-color: #eee;
padding: 20px;
margin-top: 20px;
border-radius: 10px;
}
#merit .box h4{
font-size: 18px;
}


#merit .beta{
margin-bottom: 40px;
}
#merit .beta .title{
display: flex;
align-items: center;
}
#merit .beta .title span{
display: grid;
place-items: center;
width: 15vw;
height: 15vw;
margin-top: -10vw;
border-radius: 50%;
font-size: 4vw;
font-weight: bold;
text-align: center;
color: #fff;
background-color: #b3203a;
margin-right: 2vw;
position: relative;
}
#merit .beta .title span::after{
content: "";
display: block;
width: 20px;
height: 30px;
clip-path: polygon(50% 100%,100% 0,0 0);
background-color: #b3203a;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
bottom: 0;
right: -3px;
z-index: -1;
}
#merit .beta h3{
font-size: 4.8vw;
font-weight: bold;
color: #b3203a;
position: relative;
}
#merit .beta h3 em{
font-size: 6vw;
}
#merit .beta ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#merit .beta li{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48%;
margin-top: 4%;
aspect-ratio: 1/1;
background-color: #f4e5e7;
font-weight: bold;
text-align: center;
border-radius: 50%;
}
#merit .beta li .icon{
width: 10vw;
height: 10vw;
margin-bottom: 2vw;
display: grid;
place-items: center;
}
#merit .beta li .icon img{
max-width: 10vw;
max-height: 10vw;
}
#merit .beta li h4{
font-size: 4vw;
line-height: 1.6;
font-weight: bold;
}
#merit .beta li em{
display: block;
font-size: 3vw;
line-height: 1.6;
font-weight: bold;
}











/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){

#merit .alpha{
position: relative;
padding-right: 320px;
}
#merit .inner .img{
width: 280px;
float: none;
margin-left: 0;
position: absolute;
top: 0;
right: 0;
}

#merit .beta .title{
justify-content: center;
}
#merit .beta .title span{
width: 70px;
height: 70px;
font-size: 20px;
margin-top: -30px;
margin-right: 20px;
}
#merit .beta h3{
font-size: 30px;
}
#merit .beta h3 em{
font-size: 40px;
}

#merit .beta li{
width: 23%;
}
#merit .beta li .icon{
width: 4vw;
height: 4vw;
margin-bottom: .5vw;
}
#merit .beta li .icon img{
max-width: 4vw;
max-height: 4vw;
}
#merit .beta li h4{
font-size: 2.5vw;
line-height: 1.4;
margin: .2em 0;
}
#merit .beta li em{
font-size: 1.2vw;
line-height: 1.4;
}
#merit .common_woman_voice .text{
font-size: 30px;
}


}