.information .title .name-wrap {
    width: 47.44%;
}

.houei .overview .overview-title-images>.img-wrap::before {
    background: right bottom / contain no-repeat url(../../img/works/houei/w01hoei_00staff.png);
    right: 103%;
    max-width: 198px;
    max-height: 220px;
}

.houei .profile {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.expectation {
    display: flex;
    gap: 20px;
}

.expectation .text1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: end;
    width: 70%;
}

.expectation .text1 .bold {
    font-weight: bold;
}

.expectation .image {
    width: 30%;
}

.experience {
    display: flex;
    gap: 20px;
}

.experience .image {
    width: 30%;
}

#a9 {
    position: relative;
    top: -100px;
}

#a10::before {
    left: -8%;
}

.experience .imaget4 {
    width: 70%;
}

.experience .imaget4 .image-text {
    width: 100%;
    display: flex;
    gap: 20px;
}

.profile .fontstyle4 {
    color: white;
    color: var(--current-color);
    font-weight: bold;
    text-align: center;
    font-size: min(max(35px, 1.5625rem + (1vw - 7.68px)*3.125), 5em);
    padding-bottom: 10px;
    position: relative;
}

.message .pp {
    width: 283px;
    margin: 0 auto;
}

.img-txt-box .img-txt-wrap .img-wrap,
.img-txt-box .img-txt-wrap .txt-wrap span {
    line-height: 2;
}


.houei .profile .value .img-txt-wrap .txt-wrap p {
    line-height: 1.5
}

.houei .profile .value .img-txt-wrap .txt-wrap img {
    padding-top: 30px;
}

.houei .profile .value .img-txt-wrap .img-wrap img {
    height: 550px;
}

.houei .profile .value h3 {
    margin-bottom: 1em;
    padding: .5em;
    width: 100%;
    min-height: 0vw;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: var(--current-color);
}

.houei .profile .img-wrap {
    padding-bottom: 1.5em;
}

.houei .message .video-wrap p {
    display: inline-block;
    margin: 0 auto;
    padding: .25em 1.5em;
    font-size: 26px;
    font-weight: bold;
    color: #231815;
    border: 3px solid #231815;
    border-radius: 2em;
    background-color: #c4d700;
}

.houei .message .video-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    font-weight: bold;
}

.houei .text span {
    line-height: 2;
}

.houei .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 30px 0;
}

.houei .text p {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding: .25em 1.5em;
    font-size: 26px;
    font-weight: bold;
    color: var(--current-color);
    border: 3px solid var(--current-color);
    border-radius: 2em;
    text-align: center;
}

.question-box.question-text-box .question-wrap:not(:nth-of-type(3n)) {
    margin: 0;
}

.houei .text .a1 {
    display: flex;
    gap: 20px;
}

.houei .text .img-wrap {
    width: 46.1%;
    min-width: 300px;
}

.question-box {
    gap: 20px;
    flex-wrap: unset;
}
.question-box .txt-wrap p {
    padding-bottom: 0;
}



.houei .description {
    background-color: #e6f5f3;
    padding: 30px 9.77%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.houei .description .top-text {
    color: #145537;
    font-size: min(max(25px, 1.5625rem + (1vw - 7.68px)*3.125), 37px);
    font-weight: bold;
    text-align: center;
}

.houei .description .a2 {
    display: flex;
    gap: 20px;
    justify-content: end;
    align-items: center;
    padding-bottom: 20px;
}

.houei .description #imaget3 {
    width: 81.96%;
    margin: 0 auto;
}
.houei .description #imaget3 .image {
    width: 29.3%;
}
.houei .description #imaget3 .text1 {
    width: 67.44%;
    margin-left: 2em;
}
.houei .description #imaget3 .text1 p::before {
    left: -17px;
}

.houei .question {
    display: flex;
    gap: 20px;
}

.question-box.question-text-box .question-wrap {
    margin-bottom: 3.2%;
    width: 25.56vw;
    height: 26.56vw;
    max-width: 272px;
    max-height: 200px;
    border-radius: 10px;
}

.question-box.question-text-box .question-wrap .question .txt-wrap {
    border-radius: 25px;
}

.sample-slider {
    width: 100%;
}

.sample-slider img {
    width: 100%;
}


.question-box.question-text-box .question-wrap .question .answer.wrong::before {
    top: auto;
    left: auto;
}

.question-box.question-text-box .question-wrap .question .answer.right::before {
    left: auto;
    top: auto;
}
.question-box.question-text-box .question-wrap .question .answer.active {
    border-radius: 25px;
    background-color: #fff;
}
.question-box.question-text-box .question-wrap .question .answer .answer-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}

.rigtharrow {
    background-color: #fff;
    width: 100%;
    min-width: 200px;
    padding: 1.5em;
    border: 4px solid #1dab95;
    border-radius: 10px;
    position: relative;
}



.rigtharrow::before {
    content: "";
    position: absolute;
    top: calc(45% - 7px);
    left: 100%;
    transform: rotate(-92deg);
    width: 18px;
    height: 24px;
    background: center / contain no-repeat url(../../img/works/houei/service-arrow.png);
}


.houei .description .a5 {
    display: flex;
    gap: 8.53%;
    justify-content: end;
    align-items: center;
    padding-bottom: 20px;
}

.houei .description .a2 .text {
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: end;
    align-items: end;
}

.qa .qa-title {
    text-align: left;
    font-size: min(max(26px, 1.625rem + (1vw - 5.41px)*1.2422), 30px);
}
.qa .question-box .question-wrap .txt-wrap p {
    padding-bottom: 0;
}

.bowlimg {
    width: 100%;
    text-align: center;
}

.bowlimg img {
    width: 80%;
}

.houei .description .a2 .text h2 {
    width: 100%;
    border: 3px solid #1dab95;
    border-radius: 10px;
    background-color: white;
    padding: 1.5em;
}

.houei .description .a2 .text div {
    width: 100%;
    max-width: 300px;
    position: relative;
}

.houei .description .a2 .text div::before {
    content: "";
    position: absolute;
    top: calc(16% - 7px);
    left: 99%;
    transform: rotate(-92deg);
    width: 18px;
    height: 24px;
    background: center / contain no-repeat url(../../img/works/houei/service-arrow.png);
}

.houei .description p {
    line-height: 1.5;
    padding-bottom: 20px;
    position: relative;
}

.rightarrow::before {
    content: "";
    position: absolute;
    top: calc(28% - 7px);
    left: -9%;
    transform: rotateY(180deg);
    width: 18px;
    height: 24px;
    background: center / contain no-repeat url(../../img/works/houei/service-arrow.png);
}

.houei .description .a2 .img-wrap {
    width: 26.66vw;
    height: 26.66vw;
    max-width: 273px;
    max-height: 273px;
    border-radius: 50%;
    overflow: hidden;
}
.houei .description .a2 .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.houei .description .a5 .img {
    width: 200%;
}

.a4::before {
    content: "";
    position: absolute;
    top: calc(16% - 7px);
    left: -3%;
    width: 18px;
    height: 24px;
    transform: rotate(90deg) scale(-1, 1);
    background: center / contain no-repeat url(../../img/works/houei/service-arrow.png);
}
.a4.a12::before {
    left: -7%;
}

.a4 {
    background-color: white;
    width: 100%;
    min-width: 200px;
    padding: 1.5em;
    border: 4px solid #1dab95;
    border-radius: 10px;
    position: relative;
    text-align: left;
}

.image-text {
    display: flex;
    justify-content: center;
}

.image-text .image {
    width: 30%;
}

.image-text .text1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    gap: 20px;
}

.image-text .text2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    align-items: end;
    gap: 10px;
}

.titletext {
    background-color: white;
    font-weight: bold;
    border: 4px solid;
    border-radius: 10px;
    text-align: center;
    width: 60%;
    padding: 0.5em;
    margin-left: 10px;
}

.history {
    margin-top: 4.35%;
}
.history .accordion-box {
    margin-bottom: 9.77%;
}
.history .accordion-box .accordion02 .accordion-contents .img-wrap  {
    width: 34.87%;
}
.history .accordion-box .accordion02 .accordion-contents .txt-wrap  {
    width: 59.32%;
}
.history .accordion-box .accordion02 .accordion-contents .txt-wrap p,
.history .accordion-box .accordion01 .accordion-contents .txt-wrap {
    margin-top: 0;
}
.history .accordion-box .accordion02 figcaption {
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
.employee-data {
    position: relative;
    text-align: center;
    padding: .5em;
    font-weight: bold;
    background-color: #fff;
    border: 3px solid #231815;
    border-radius: .5em;
    width: max-content;
}
.employee-data dt {
    font-size: .8em;
}
.employee-data dd .san {
    font-size: .8em;
    letter-spacing: 0;
}

@media (max-width:540px) {
    .information .title .name-wrap {
        width: 73.6%;
    }
    .houei .overview .overview-title-images>.img-wrap::before {
        right: 0;
    }
    .houei .text .img-wrap {
        width: 100%;
    }

    .houei .text .a1 {
        flex-direction: column-reverse;
    }

    .houei .description .a2 {
        flex-direction: column-reverse;
        gap: 35px;
        padding-bottom: 0;
    }

    .houei .description .a5 {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .houei .description .a2 .text {
        width: 100%;
        flex-direction: column-reverse;
    }

    .houei .description .a5 .img {
        width: 100%;
    }

    .houei .description .a5 .a4::before {
        top: calc(102% - 7px);
        left: 72%;
        transform: rotate(180deg);
    }

    .houei .description .a2 .text h2 {
        width: 100%;
    }

    .houei .description .a2 .text div::before {
        top: calc(-11% - 7px);
        left: 23%;
        transform: rotateX(-180deg);
    }
    .houei .description .a2 .text #a7::before {
        transform: rotateX(-180deg)!important;
    }

    .houei .description .a2 .text div {
        width: 100%;
    }

    .houei .description .a2 .img-wrap {
        width: 66.67vw;
        height: 66.67vw;
    }

    .houei .description .image-text .employee-data02 {
        margin-top: -2em;
    }

    .houei .description .image-text.imaget2 {
        flex-direction: column;
    }

    #a10::before {
        left: 46.5%;
    }
    .a12#a10::before {
        transform: rotateY(180deg);
    }

    .image-text {
        align-items: center;
        gap: 20px;
        flex-direction: column-reverse;
    }

    #imaget1 {
        flex-direction: column-reverse;
    }
    #imaget1 .employee-data04 {
        margin-top: -2em;
    }

    .houei .description #imaget3 {
        flex-direction: column-reverse;
        width: 100%;
    }
    .houei .description #imaget3 .employee-data05 {
        margin-top: -2em;
    }
    .houei .description #imaget3 .image {
        width: 60%;
    }
    .houei .description #imaget3 .text1 {
        width: 100%;
        margin-left: 0;
    }
    .houei .description #imaget3 .text1 p::before {
        left: 60%;
    }

    #imaget2 {
        flex-direction: column;
        gap: 0;
    }
    #imaget2 .text2 {
        width: 100%;
        margin-top: 1em;
    }
    #imaget2 .employee-data06 {
        margin-top: -2em;
    }

    .image-text .image {
        width: 60%;
    }

    .a4::before {
        top: calc(102% - 7px);
        left: 60%;
        transform: rotateY(180deg);
    }

    .image-text .text1 {
        align-items: center;
        flex-direction: column-reverse;
    }

    .titletext {
        width: 100%;
    }

    .question-box.question-text-box .question-wrap {
        width: 46.885%;
        margin-right: 6.23%;
        margin-bottom: 6.23%;
    }

    .question-box {
        flex-wrap: wrap;
        gap: 10px;
    }

    .question-box.question-text-box .question-wrap .question .answer.wrong::before {
        width: 17.6vw;
    }

    .question-box.question-text-box .question-wrap .question .answer.right::before {
        width: 17.6vw;
    }

    .question-box.question-text-box .question-wrap .question .answer.active p {
        font-size: 11px;
    }

    .rigtharrow::before {
        top: calc(102% - 7px);
        left: 60%;
        transform: rotateY(180deg);

    }

    .qa-title {
        width: 100% !important;
    }

    #a7::before {
        transform: rotateY(180deg);
    }

    .expectation {
        flex-direction: column-reverse;
    }

    .expectation .image {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .expectation .image img {
        width: 50%;
    }

    .expectation .text1 {
        width: 100%;
    }

    .experience {
        flex-direction: column;
    }
    .experience .image {
        display: flex;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }
    .experience .image #a9 {
        top: 0;
    }
    .experience .imaget4 {
        width: 100%;
    }
    .experience .imaget4 .image-text {
        flex-direction: column;
    }
    .experience .imaget4 .image-text .employee-data01 {
        margin-top: -2em;
    }
    .history {
        margin-bottom: 9.77%;
    }
    .image-text .text1 {
        width: 100%;
    }

    .history .accordion-box {
        margin-bottom: 0;
    }
    .history .accordion-box .accordion02 .accordion-contents .img-wrap  {
        width: 100%;
    }
    .history .accordion-box .accordion02 .accordion-contents .txt-wrap  {
        width: 100%;
    }
}
