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

#main{
margin-top: 5vw;
}
#main h2{
display: none;
}



#reason{
background-color: #b3203a;
color: #fff;
padding-top: 60px;
padding-bottom: 60px;
}
#reason .contents_size{
text-align: center;
}
#reason .title{
line-height: 1.4;
margin-bottom: 20px;
}
#reason .title em{
display: block;
font-size: 5vw;
font-weight: bold;
}
#reason .title h3{
display: inline-block;
font-size: 8vw;
font-weight: bold;
text-align: center;
padding: 0 .25em;
position: relative;
}
#reason .title h3::before,
#reason .title h3::after{
content: "";
display: block;
width: 2px;
height: 100%;
background-color: #fff;
position: absolute;
top: 50%;
margin: auto 0;
}
#reason .title h3::before{
transform: translateY(-50%) rotate(-10deg);
-webkit-transform: translateY(-50%) rotate(-10deg);
left: -3vw;
}
#reason .title h3::after{
transform: translateY(-50%) rotate(10deg);
-webkit-transform: translateY(-50%) rotate(10deg);
right: -3vw;
}
#reason .title h3 span{
font-size: 10vw;
}
#reason .title h3 img{
display: inline-block;
vertical-align: middle;
height: 8vw;
margin-bottom: 0.2em;
margin-left: 0.2em;
}
#reason .title + p{
text-align: left;
}

#reason dl{
margin-top: 40px;
}
#reason dt{
font-weight: bold;
display: inline-block;
position: relative;
font-size: 5vw;
height: 18vw;
text-align: center;
padding: 0 30px;/*横の大きさ*/
color: #b3203a;
background: #ffcc00;/*塗りつぶし色*/
box-sizing: border-box;
}
#reason dt::before,
#reason dt::after {
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
}
#reason dt::before {
top: 0;
left: 0;
border-width: 9vw 0px 9vw 15px;
border-color: transparent transparent transparent #b3203a;
border-style: solid;
}
#reason dt::after {
top: 0;
right: 0;
border-width: 9vw 15px 9vw 0px;
border-color: transparent #b3203a transparent transparent;
border-style: solid;
}

#reason dd ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#reason dd li{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48%;
margin-top: 4%;
aspect-ratio: 1/1;
color: #b3203a;
background-color: #fff;
font-weight: bold;
text-align: center;
border-radius: 50%;
}
#reason dd li:nth-child(1){
margin-right: 4%;
}
#reason dd li .icon{
width: 10vw;
height: 10vw;
margin-bottom: 2vw;
display: grid;
place-items: center;
}
#reason dd li .icon img{
max-width: 10vw;
max-height: 10vw;
}
#reason dd li h4{
font-size: 4vw;
line-height: 1.6;
font-weight: bold;
}
#reason dd li em{
display: block;
font-size: 3vw;
line-height: 1.6;
font-weight: bold;
}



#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;
}


#choice{
background-color: #eee;
padding-top: 60px;
padding-bottom: 60px;
}
#choice .text{
margin-bottom: 20px;
}
#choice h3{
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}



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

#main{
margin-top: 60px;
}


#reason{
padding-top: 120px;
padding-bottom: 120px;
}
#reason .title{
margin-bottom: 20px;
}
#reason .title em{
font-size: 3.5vw;
}
#reason .title h3{
font-size: 3.5vw;
}
#reason .title h3 span{
font-size: 5.5vw;
}
#reason .title h3 img{
height: 3.5vw;
}
#reason .title + p{
text-align: center;
}

#reason dl{
margin-top: 80px;
}
#reason dt{
font-size: 3vw;
line-height: 7vw;
height: 7vw;
}
#reason dt::before {
border-width: 3.5vw 0px 3.5vw 15px;
}
#reason dt::after {
border-width: 3.5vw 15px 3.5vw 0px;
}
#reason dd li{
width: 23%;
margin: 4% 2% 0 !important;
}
#reason dd li .icon{
width: 4vw;
height: 4vw;
margin-bottom: .5vw;
}
#reason dd li .icon img{
max-width: 4vw;
max-height: 4vw;
}
#reason dd li h4{
font-size: 2.5vw;
line-height: 1.4;
margin: .2em 0;
}
#reason dd li em{
font-size: 1.2vw;
line-height: 1.4;
}





#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;
}



#choice{
padding-top: 120px;
padding-bottom: 120px;
}
#choice .contents_size{
display: flex;
justify-content: space-between;
}
#choice .text{
margin-bottom: 0px;
flex: 1;
margin-right: 60px;
}
#choice h3{
font-size: 30px;
margin-bottom: 20px;
}








}