@charset "utf-8";

.cont h2 {
    /*    margin-bottom: 10px;*/
}

/*============================
アコディオン
============================*/

/* リセットCSS */

.accordion-container {
    /*    margin: 50px auto 0;*/
    width: 100%;
}

.accordion-list {
    background: var(--bg03-color);
    border-radius: 30px;
}

.accordion-list:not(:first-child) {
    margin-top: 30px;
}

.accordion-title {
    /*    background: #DDD;*/
    cursor: pointer;
    font-size: 16px;
    padding: 26px 30px;
    position: relative;
}

.accordion-title span,
.accordion-text div {
    position: relative;
    padding-left: 30px;
    display: block;
}

.accordion-title span::before,
.accordion-text div::before {
    content: "Q";
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    position: absolute;
    top: -5px;
    left: 0;
}

.accordion-text div::before {
    content: "A";
}

.accordion-title:before {
    position: absolute;
    content: '';
    top: 50%;
    right: 25px;
    height: 2px;
    width: 15px;
    background: var(--bg01-color);
    transform: rotate(90deg);
    transition: all .3s ease-in-out;
}

.accordion-title:after {
    position: absolute;
    content: '';
    top: 50%;
    right: 25px;
    height: 2px;
    width: 15px;
    background: var(--bg01-color);
    transition: all .3s ease-in-out;
}

.accordion-title.open:before {
    transform: rotate(180deg);
}

.accordion-title.open:after {
    opacity: 0;
}

.accordion-text {
    border-top: 1px solid var(--bg01-color);
    display: none;
    padding: 20px 0;
    margin: 0 30px;
    counter-reset: number 0;
}

/*工事期間ってどのくらい？*/

.accordion-text .flow {
    margin: 20px 0;
    counter-reset: flow 0;
    align-items: stretch;
}

.accordion-text .flow li {
    width: 80px;
    position: relative;
    background: var(--bg01-color);
    color: var(--text02-color);
    padding: 40px 27px 20px;
    border-radius: 40px;
    writing-mode: vertical-rl;
}

.accordion-text .flow li::before {
    counter-increment: flow 1;
    content: counter(flow, decimal-leading-zero);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    writing-mode: horizontal-tb;
}

.accordion-text .flow li:not(:last-of-type)::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 20px;
    border-color: transparent transparent transparent var(--bg01-color);
    position: absolute;
    top: calc(50% - 14px);
    right: -20px;
}

.accordion-text p.bg {
    border-radius: 30px;
    font-size: 14px;
}

/*!_工事期間ってどのくらい？*/

.accordion-text img {
    width: 100%;
    margin-top: 20px;
}

.accordion-text dl {
    position: relative;
    padding-left: 30px;
}

/*答えの中の詳細についた番号*/
.accordion-text dl::before {
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    position: absolute;
    top: -1px;
    left: 0;
}

.accordion-text dl:not(:first-of-type) {
    margin-top: 30px;
}

.accordion-text dt {
    font-weight: 700;
}

.money {
    margin-top: 80px;
}

@media only screen and (max-width: 768px) {
    
    .accordion-list:not(:first-child) {
    margin-top: 20px;
}
    
    .accordion-title {
    padding: 20px 50px 20px 30px;
}
    /*工事期間ってどのくらい？*/

.accordion-text .flow {
    margin: 20px 0;
    counter-reset: flow 0;
    align-items: stretch;
    grid-gap: 30px;
}

.accordion-text .flow li {
    width: 100%;
    position: relative;
    background: var(--bg01-color);
    color: var(--text02-color);
    padding: 40px 27px 20px;
    border-radius: 40px;
     writing-mode: horizontal-tb;
    text-align: center;
}

.accordion-text .flow li::before {
    counter-increment: flow 1;
    content: counter(flow, decimal-leading-zero);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    writing-mode: horizontal-tb;
}

.accordion-text .flow li:not(:last-of-type)::after {
    content: "";
    width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 14px 0 14px;
        border-color: var(--bg01-color) transparent transparent transparent;
        position: absolute;
        top: auto;
        right: 0;
        left: 0;
        bottom: -20px;
        margin: auto;
}

.accordion-text p.bg {
    border-radius: 30px;
    font-size: 14px;
}

/*!_工事期間ってどのくらい？*/
    
    .money {
    margin-top: 40px;
}
    .money_illust {
        background: url(../../images/common/money_illust_sp.png) no-repeat center center;
        background-size: 100%;
        width: 100%;
        height: 0;
        padding-top: 251.22%;
        overflow: hidden;
}
}