<!-- jQuer -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- FAQ -->
<div class="qaItem">
<div class="qaBox">
<div class="qaBox__q">
<span>Q</span>あああああ
<div class="qaBox__icon">
<div class="qaBox__arw"></div>
</div>
</div>
<div class="qaBox__a">
<div class="qaBox__content">
<span>A</span>いいいい
</div>
</div>
</div>
</div>
@media screen and (max-width:1049px){
/* faq */
.qa__title--ja {
color: #767676;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 41px; /* 128.125% */
}
.qaItem {
margin-bottom: 10px;
padding: 0;
border-radius: 4px;
background-color: #FFF;
}
.qaUnitWpr .qaItem {
border: 1px solid #d7f0fc;
}
.qaBox__q {
position: relative;
padding: 12px 42px 12px 45px;
font-size: 14px;
font-weight: 700;
position: relative;
color: #222;
}
.qaBox__q br{
display: none;
}
.qaBox__q span{
position: absolute;
display: block;
left: 10px;
width: 20px;
height: 20px;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
color: #1b313d;
text-align: center;
line-height: 22px;
}
.qaBox__a {
display: none;
}
.qaBox__content {
position: relative;
padding: 12px 22px 12px 45px;
border-radius: 8px;
font-size: 14px;
line-height: 21px;
font-style: normal;
font-weight: 400;
position: relative;
color: #222;
}
.qaBox__content br{
display: none;
}
.qaBox__content span{
position: absolute;
display: block;
left: 10px;
width: 20px;
height: 20px;
border-radius: 10px;
font-size: 19px;
font-weight: 700;
color: #e72119;
text-align: center;
}
.qaBox__icon {
width: 20px;
height: 20px;
position: absolute;
right: 3%;
top: 50%;
transform: translateY(-50%);
}
.qaBox__arw {
position: absolute;
top: 0;
bottom: 3px;
right: 3px;
width: 10px;
height: 10px;
margin: auto 0;
border-bottom: 2px solid #1b313d;
border-right: 2px solid #1b313d;
transform: rotate(45deg);
transition: .3s;
}
.qaBox__icon.is-open .qaBox__arw {
transform: rotate(225deg);
transition: .3s;
bottom: -3px;
}
}
@media screen and (min-width:1050px){
/* faq */
.qaItem {
margin-bottom: 12px;
padding: 5px 0;
border-radius: 4px;
background-color: #FFF;/*QとAの背景色*/
border: 1px solid #dedede;/*QとAのボーダー*/
border-radius: 4px;
}
.qaBox__q {
position: relative !important;
padding: 17px 22px 17px 55px;
font-size: 17px;
font-weight: 700;
position: relative;
color: #222;
}
.qaBox__q br{
display: none;
}
.qaBox__q span{
position: absolute;
display: block;
left: 17px;
width: 20px;
height: 20px;
padding: 0;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 700;
color: #1b313d;
text-align: center;
line-height: 20px;
}
.qaBox__a {
display: none;
}
.qaBox__content {
position: relative;
padding: 16px 26px 12px 55px;
border-radius: 8px;
font-size: 17px;
line-height: 26px;
font-style: normal;
font-weight: 400;
position: relative;
color: #222;
}
.qaBox__content br{
display: none;
}
.qaBox__content span{
position: absolute;
display: block;
left: 17px;
width: 20px;
height: 20px;
border-radius: 10px;
font-size: 24px;
font-weight: 700;
color: #e72119;
text-align: center;
}
.qaBox__icon {
width: 30px;
height: 20px;
position: absolute;
right: 3%;
top: 50%;
transform: translateY(-50%);
}
.qaBox__arw {
position: absolute;
top: 0;
bottom: 3px;
right: 0;
width: 12px;
height: 12px;
margin: auto 0;
border-bottom: 2px solid #1b313d;
border-right: 2px solid #1b313d;
transform: rotate(45deg);
transition: .3s;
}
.qaBox__icon.is-open .qaBox__arw {
transform: rotate(225deg);
transition: .3s;
bottom: -3px;
}
}
jQuery('.qaBox__q').on('click', function() {
// クリックされた要素(this)の次の要素(next)
jQuery(this).next().slideToggle();
jQuery(this).children('.qaBox__icon').toggleClass('is-open');
});
