.accordion {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: relative;
width: 100%;
}

.accordion-title {
cursor: pointer;
font-weight: 600;
padding: 30px 80px 30px 100px;
margin-bottom: 0;
font-size: 1.6rem;
}

.accordion-title::before {
display: block;
content: “Q”;
font-family: ‘Archivo’, sans-serif;
background: #f78216;
color: #fff;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 2.0rem;
position: absolute;
top: 27px;
left: 40px;
}

.accordion-content {
display: none;
padding: 15px 80px 40px 100px;
}

.accordion-content p::before {
display: block;
content: “A”;
font-family: ‘Archivo’, sans-serif;
background: #003f7e;
color: #fff;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 2.0rem;
position: absolute;
top: 0px;
left: -60px;
}

.accordion-content p {
position: relative;
margin-bottom: 0;
font-size: 1.3rem;
}

/* 矢印 */
.accordion-title {
position: relative;
}

.accordion-title::after {
border-right: solid 4px #f78216;
border-top: solid 4px #f78216;
content: “”;
display: block;
height: 16px;
position: absolute;
right: 40px;
top: 38%;
transform: rotate(135deg);
transition: transform .3s ease-in-out, top .3s ease-in-out;
width: 16px;
}

.accordion-title.open::after {
top: 45%;
transform: rotate(-45deg);
}

@media(min-width:768px) {
.accordion-title {
font-size: 1.6rem;
}

.accordion-content p {
font-size: 1.3rem;
}
}

@media(min-width:1024px) {
.accordion-title {
font-size: 1.8rem;
}

.accordion-content p {
font-size: 1.5rem;
}
}

@media(min-width:1366px) {
.accordion-title {
font-size: 2.2rem;
}

.accordion-content p {
font-size: 1.8rem;
}
}

@media only screen and (max-width: 428px) {

.accordion-title {
padding: 30px 40px 30px 50px;
font-size: 1.5rem;
}

.accordion-title::before {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 1.8rem;
top: 27px;
left: 10px;
}

.accordion-content {
padding: 15px 20px 40px 50px;
}

.accordion-content p::before {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 1.8rem;
top: 0px;
left: -40px;
}

.accordion-content p {
font-size: 1.3rem;
}

/* 矢印 */
.accordion-title::after {
border-right: solid 4px #f78216;
border-top: solid 4px #f78216;
content: “”;
display: block;
height: 16px;
position: absolute;
right: 15px;
top: 38%;
transform: rotate(135deg);
transition: transform .3s ease-in-out, top .3s ease-in-out;
width: 16px;
}
}