@charset "utf-8";

/* ヒーローセクションの画像 */
.hero{
    background-image: url(/mid-careers/assets/img/qa02.png);
}

@media screen and (max-width: 768px) {
    .hero-to-right {
        background-position: 24% center;
    }
}

.qa-label{
    margin-bottom:3em;
}
.qa-label p{
    position: relative;
    margin-bottom:0.5em;
}
.qa-label p span{
    background-color: #fff;
    display: inline-block;
    padding-right: 1em;
}

.qa-label p::after{
    content: "";
    width: 100%;
    border-bottom: 1px solid #000;
    display: block;
    transform: translateY(-0.5em);
    position: absolute;
    z-index:-1;
}
.qa-label div{
    font-size:2em;
    font-weight: bold;
}
.qa-contents{
    margin-bottom:4.5em;
}
.qa-contents > div:not(:last-child){
    margin-bottom:2em;
}

.qa-content{
    background-color: #ECF6FF;
    border-radius:1em;
}

.qa-content > div:nth-child(1) span{
    color:#0A5A96;
    margin-right:.5em;
}

.qa-content > div:nth-child(1){
    font-size:1.5em;
    font-weight: bold;
    position: relative;
}
.qa-content > div:nth-child(1)::after{
    content: "▼";
    position: absolute;
    right:1.25em;
    top:40%;
    color:#0A5A96;
    font-size:0.75em;
    transition: transform 0.4s ease;
}
.qa-content > div:nth-child(1).active::after{
    transform: rotate(180deg);
}
.qa-content > div:nth-child(2) div{
    padding: 1em 1em 1em 2em;
    border-radius:0.5em;
    background-color: #fff;
    line-height: 150%;
    text-indent: -1em;
    margin-top:0.5em;
}
.qa-content > div:nth-child(2) div span{
    color:#F29224;
    margin-right:.5em;
}

.qa-contents-contents{
    padding:0 1em 1em 1em;
    display:none;
}

.qa-contents-button{
    cursor:pointer;
    padding:0.75em;
    padding-right: 2em;
}

@media screen and (max-width: 768px) {
    .qa-label p {
        font-size: 0.9em;
    }
    .qa-label div {
        font-size: 1.5em;
    }
    .qa-content > div:nth-child(1) {
        font-size: 1em;
    }
}