@charset "UTF-8";
/* CSS Document */


/* layout01 */

.layout01 .box-title {
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-color: #DEDBD0;
    border-width: 3px;
}

.layout01 .box-title h3 {
    font-weight: var(--base-weight);
    color: var(--color-sub);
    font-size: var(--base-font-size4);
    line-height: 1.2;
}

.layout01 .box-wrap:not(:last-child) {
    margin-bottom: 80px;
}

.layout01 .box {
    background-color: #FFF;
    cursor: pointer;
}


.layout01 .box:not(:last-child) {
    margin-bottom: 35px;
}

.layout01 .box-question {
    background-color: var(--color-sub);
    position: relative;
    background-image: url("../../images/faq/title-faq.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    /*+マークの位置基準とするためrelative指定*/
    transition: all .5s ease;
}

.layout01 .box-answer {
    position: relative;
    padding: 42px;
    padding-left: 160px;
    display: none;
}

.box-question::before,
.box-question::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 1px;
    background-color: var(--color-sub);
    transition: all .5s ease;
}

.box-question::before {
    top: 50%;
    right: 37px;
    transform: rotate(0deg);
}

.box-question::after {
    top: 50%;
    right: 37px;
    transform: rotate(90deg);
}

.box-faq .box.close .box-question::before {
    transform: rotate(0deg);
}

.box-faq .box.close .box-question::after {
    transform: rotate(180deg);
}

.layout01 h5::before,
.layout01 .box-answer::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 30px;
    display: block;
    font-family: var(--subtitle2-font);
    font-weight: var(--base-weight);
    color: var(--color-main);
    font-size: 45px;
    line-height: 0.9;
    letter-spacing: 0em;
}

.layout01 h5::before {
    content: "";
    color: #FFF;
}

.layout01 .box:nth-child(1) .box-answer::before {
    content: "A.1";
}

.layout01 .box:nth-child(2) .box-answer::before {
    content: "A.2";
}

.layout01 .box:nth-child(3) .box-answer::before {
    content: "A.3";
}

.layout01 .box:nth-child(4) .box-answer::before {
    content: "A.4";
}

.layout01 .box:nth-child(5) .box-answer::before {
    content: "A.5";
}

.layout01 .box:nth-child(6) .box-answer::before {
    content: "A.6";
}

.layout01 .box:nth-child(7) .box-answer::before {
    content: "A.7";
}

.layout01 .box:nth-child(8) .box-answer::before {
    content: "Q.8";
}

.layout01 .box:nth-child(9) .box-answer::before {
    content: "A.9";
}

.layout01 .box:nth-child(1) h5::before {
    content: "Q.1";
}

.layout01 .box:nth-child(2) h5::before {
    content: "Q.2";
}

.layout01 .box:nth-child(3) h5::before {
    content: "Q.3";
}

.layout01 .box:nth-child(4) h5::before {
    content: "Q.4";
}

.layout01 .box:nth-child(5) h5::before {
    content: "Q.5";
}

.layout01 .box:nth-child(6) h5::before {
    content: "Q.6";
}

.layout01 .box:nth-child(7) h5::before {
    content: "Q.7";
}

.layout01 .box:nth-child(8) h5::before {
    content: "Q.8";
}

.layout01 .box:nth-child(9) .box-question::before {
    content: "Q.9";
}

.layout01 h5 {
    font-size: 22px;
    font-weight: var(--base-weight2);
    color: #FFF;
    line-height: 1.2;
    letter-spacing: 0em;
    height: 106px;
    padding-left: 160px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    background-image: url("../../images/faq/icon-faq.svg");
    background-position: right 30px center;
    background-repeat: no-repeat;
    background-size: 30px auto;
}

.layout01 p {
    font-size: 14px;
    font-weight: var(--base-weight);
}

.layout01 p a {
    color: var(--color-sub);
    text-decoration: underline;
}

.sp-view {
    display: none;
}