@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */
#main {
margin-top: 5vw;
text-align: center;
}
#main h2{
display: none;
}

#qa dl{
background-color: #f7e8eb;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.2s ease;
}
#qa dl:last-child{
margin-bottom: 0px;
}
#qa dt{
display: flex;
}
#qa dt::before{
content: "Q";
display: block;
width: 30px;
height: 30px;
font-size: 16px;
font-weight: bold;
line-height: 30px;
text-align: center;
border-radius: 50%;
color: #fff;
background-color: #b3203a;
margin-right: 5px;
}
#qa dt h3{
flex: 1;
font-weight: bold;
color: #b3203a;
}
#qa dd{
display: flex;
margin-top: 5px;
}
#qa dd::before{
content: "A";
display: block;
width: 30px;
height: 30px;
font-size: 16px;
font-weight: bold;
line-height: 30px;
text-align: center;
border-radius: 50%;
color: #b3203a;
background-color: #fff;
margin-right: 5px;
}
#qa dd .inner{
flex: 1;
}
#qa dd p{
margin-bottom: 1em;
}
#qa dd p:last-child{
margin-bottom: 0;
}

/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){
#main{
margin-top: 60px;
}

#qa dl:hover{
background-color: #eed4d9;
}
#qa dt::before{
width: 40px;
height: 40px;
font-size: 24px;
line-height: 40px;
}
#qa dt::before{
margin-right: 10px;
}
#qa dt h3{
font-size: 20px;
padding-top: 0.1em;
}

#qa dd{
margin-top: 10px;
}
#qa dd::before{
width: 40px;
height: 40px;
font-size: 24px;
line-height: 40px;
}
#qa dd .inner{
padding-top: 0.25em;
}





}