@charset "utf-8";
@import "anime.css";

/*
------------
zaisu_guide.css
------------
*/
button:focus {
    outline: none;
    border: none;
}
/* kv_area */
#kv_area {
    width: 100%;
    height: min(calc(100vw * 720 / 1400), 720px);
    background-image: url(../../images/content/zisu_guide/kvBgPC.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
#kv_area::before,
#kv_area::after {
    content: "";
    height: auto;
    background-size: 100% auto;
    position: absolute;
    top: 0;
}
#kv_area::before {
    width: min(calc(100vw * 656 / 1400), 656px);
    aspect-ratio: 1312 / 1440;
    background-image: url(../../images/content/zisu_guide/kvImgPC01.webp);
    left: 0;
}
#kv_area::after {
    width: min(calc(100vw * 732 / 1400), 732px);
    aspect-ratio: 1464 / 1440;
    background-image: url(../../images/content/zisu_guide/kvImgPC02.webp);
    right: 0;
}
#kv_area .inner {
    height: min(calc(100vw * 720 / 1400), 720px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#kv_area .inner .item p {
    font-size: calc(100vw * 20 / 1400);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #806627;
}
#kv_area .inner .item h2 {
    font-size: calc(100vw * 30 / 1400);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #fff;
    position: relative;
    z-index: 1;
    margin: 15px 0 0 0;
}
#kv_area .inner .item h2::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 5px);
    background-color: #806627;
    position: absolute;
    top: calc(50% + 2px);
    left: calc(50% - 2px);
    transform: translate(-50%, -50%);
    z-index: -1;
}
@media only screen and (max-width: 768px) {
    #kv_area {
        height: 100svh;
        background-image: url(../../images/content/zisu_guide/kvBgSP.webp);
    }
    #kv_area::before {
        width: 100%;
        aspect-ratio: 750 / 520;
        background-image: url(../../images/content/zisu_guide/kvImgSP01.webp);
    }
    #kv_area::after {
        width: 100%;
        aspect-ratio: 750 / 522;
        background-image: url(../../images/content/zisu_guide/kvImgSP02.webp);
        top: auto;
        bottom: 0;
    }
    #kv_area .inner {
        height: 100%;
    }
    #kv_area .inner .item p {
        font-size: calc(100vw * 14 / 375);
    }
    #kv_area .inner .item h2 {
        font-size: calc(100vw * 25 / 375);
        line-height: 1.8;
        margin: 10px 0 0 0;
    }
    #kv_area .inner .item h2::before {
        content: none;
    }
    #kv_area .inner .item h2 span {
        position: relative;
        z-index: 1;
    }
    #kv_area .inner .item h2 span::before {
        content: "";
        width: calc(100% + 4px);
        height: 100%;
        background-color: #806627;
        position: absolute;
        top: calc(50% + 1px);
        left: calc(50% - 1px);
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}
@media screen and (max-width: 375px) and (max-height: 667px) {
    #kv_area::before {
        width: 100%;
        aspect-ratio: 750 / 468;
        background-image: url(../../images/content/zisu_guide/kvImgSP01_02.webp);
    }
    #kv_area::after {
        width: 100%;
        aspect-ratio: 750 / 478;
        background-image: url(../../images/content/zisu_guide/kvImgSP02_02.webp);
        top: auto;
        bottom: 0;
    }
    #kv_area .inner .item p {
        font-size: calc(100vw * 12 / 375);
    }
    #kv_area .inner .item h2 {
        font-size: calc(100vw * 22 / 375);
        line-height: 1.6;
        margin: 7px 0 0 0;
    }
}
/* intro_area */
#intro_area {
    margin: 150px 0 0 0;
    padding: 0 0 150px 0;
}
#intro_area .inner {
    display: flex;
    justify-content: flex-start;
    gap: min(calc(100vw * 60 / 1400), 60px);
}
#intro_area .inner .img_area,
#intro_area .inner .item {
    flex: 0 0 auto;
}
#intro_area .inner .img_area {
    position: relative;
    width: min(calc(100vw * 570 / 1400), 570px);
    top: min(calc(100vw * 83 / 1400), 83px);
}
#intro_area .inner .img_area::before {
    content: "";
    width: min(calc(100vw * 370 / 1400), 370px);
    height: auto;
    aspect-ratio: 370 / 702;
    background-color: #fff7ea;
    border-radius: 0 min(calc(100vw * 8 / 1400), 8px) min(calc(100vw * 8 / 1400), 8px) 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#intro_area .inner .img_area li {
    overflow: hidden;
}
#intro_area .inner .img_area li:nth-child(1) {
    width: min(calc(100vw * 542 / 1400), 542px);
    height: auto;
    aspect-ratio: 542 / 337;
    position: absolute;
    top: min(calc(100vw * 115 / 1400), 115px);
    border-radius: 0 min(calc(100vw * 8 / 1400), 8px) min(calc(100vw * 8 / 1400), 8px) 0;
}
#intro_area .inner .img_area li:nth-child(2) {
    width: min(calc(100vw * 309 / 1400), 309px);
    height: auto;
    aspect-ratio: 309 / 205;
    position: absolute;
    top: min(calc(100vw * 415 / 1400), 415px);
    left: min(calc(100vw * 260 / 1400), 260px);
    border-radius: min(calc(100vw * 8 / 1400), 8px);
}
#intro_area .inner .img_area li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
#intro_area .inner .item {
    color: #806627;
}
#intro_area .inner .item h3 {
    font-size: min(calc(100vw * 35 / 1400), 3.5rem);
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: 1.8;
}
#intro_area .inner .item p {
    font-size: min(calc(100vw * 25 / 1400), 2.5rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 2.5;
    margin: min(calc(100vw * 35 / 1400), 35px) 0 0 0;
}
@media only screen and (max-width: 768px) {
    #intro_area {
        margin: 0;
        padding: 0 0 65px 0;
    }
    #intro_area .inner {
        display: block;
    }
    #intro_area .inner .img_area {
        position: relative;
        width: 100%;
        top: auto;
        padding: 65px 0 0 0;
    }
    #intro_area .inner .img_area::before {
        width: min(calc(100vw * 250 / 375), 250px);
        aspect-ratio: 250 / 126;
        border-radius: 0;
    }
    #intro_area .inner .img_area li:nth-child(1) {
       width: min(calc(100vw * 276 / 375), 276px);
       position: static;
       border-radius: 0 min(calc(100vw * 4 / 375), 4px) min(calc(100vw * 4 / 375), 4px) 0;
    }
    #intro_area .inner .img_area li:nth-child(2) {
        width: min(calc(100vw * 130 / 375), 130px);
        position: absolute;
        top: min(calc(100vw * 170 / 375), 170px);
        left: min(calc(100vw * 200 / 375), 200px);
        border-radius: min(calc(100vw * 4 / 375), 4px);
    }
    #intro_area .inner .item {
        width: 80vw;
        margin: 45px auto 0 auto;
    }
    #intro_area .inner .item h3 {
        font-size: min(calc(100vw * 24 / 375), 2.4rem);
    }
    #intro_area .inner .item p {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        line-height: 2;
        margin: min(calc(100vw * 25 / 375), 25px) 0 0 0;
    }
}
/* suggest_area */
#suggest_area {
    background-color: #fff7ea;
    padding: 125px 0;
}
#suggest_area .inner {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: min(calc(100vw * 70 / 1400), 70px);
}
#suggest_area .inner figure {
    width: min(calc(100vw * 628 / 1400), 628px);
    height: auto;
    aspect-ratio: 628 / 433;
    overflow: hidden;
    border-radius: min(calc(100vw * 8 / 1400), 8px) 0 0 min(calc(100vw * 8 / 1400), 8px);
    position: relative;
}
#suggest_area .inner figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
#suggest_area .inner .item {
    width: calc(
        100% -
        (
            min(calc(100vw * 628 / 1400), 628px) +
            min(calc(100vw * 70 / 1400), 70px) +
            ((100vw - min(calc(100vw * 1100 / 1400), 1100px)) / 2)
        )
    );
    color: #806627;
}
#suggest_area .inner .item h3 {
    font-size: min(calc(100vw * 22 / 1400), 2.2rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    position: relative;
    display: inline-block;
}
#suggest_area .inner .item h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #806627;
    position: absolute;
    bottom: -8px;
    left: 0;
}
#suggest_area .inner .item p {
    font-size: min(calc(100vw * 17 / 1400), 1.7rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 2;
    margin: min(calc(100vw * 30 / 1400), 30px) 0 0 0;
    text-align: justify;
}
@media only screen and (max-width: 768px) {
    #suggest_area {
        padding: 65px 0;
    }
    #suggest_area .inner {
        display: block;
        width: 80vw;
        margin: 0 auto;
    }
    #suggest_area .inner figure {
        width: 100%;
        border-radius: min(calc(100vw * 4 / 375), 4px);
    }
    #suggest_area .inner .item {
        width: 100%;
        margin: 35px 0 0 0;
    }
    #suggest_area .inner .item h3 {
        font-size: min(calc(100vw * 20 / 375), 2rem);
        left: 50%;
        transform: translateX(-50%);
    }
    #suggest_area .inner .item p {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        line-height: 1.8;
        margin: min(calc(100vw * 30 / 375), 30px) 0 0 0;
    }
}
/* reason_area*/
#reason_area {
    margin: 125px 0 0 0;
}
#reason_area .inner {
    color: #806627;
}
#reason_area .inner h3 {
    font-size: min(calc(100vw * 22 / 1400), 2.2rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
#reason_area .inner h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #806627;
    position: absolute;
    bottom: -8px;
    left: 0;
}
#reason_area .inner .list {
    margin: 85px 0 0 0;
    position: relative;
}
#reason_area .inner .list .slick-list .slick-track .slick-slide {
    padding: 0 min(calc(100vw * 32 / 1400), 32px);
    box-sizing: content-box;
}
#reason_area .slide_inner {
    width: 100%;
    max-width: 323px;
    margin: 0 auto;
}
#reason_area .inner .list .slick-list .slick-track .slick-slide figure {
    width: 100%;
    height: auto;
    aspect-ratio: 208 / 156;
    border-radius: min(calc(100vw * 8 / 1400), 8px);
    overflow: hidden;
}
#reason_area .inner .list .slick-list .slick-track .slick-slide figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
#reason_area .inner .list .slick-list .slick-track .slick-slide h4 {
    font-size: min(calc(100vw * 20 / 1400), 2rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    margin: min(calc(100vw * 20 / 1400), 20px) 0 0 0;
}
#reason_area .inner .list .slick-list .slick-track .slick-slide p {
    font-size: min(calc(100vw * 17 / 1400), 1.7rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    margin: min(calc(100vw * 10 / 1400), 10px) 0 0 0;
}
#reason_area .inner .list button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    position: absolute;
    top: calc(100vw * 130 / 1400);
    z-index: 10;
}
#reason_area .inner .list button:focus {
    outline: none;
    border: none;
}
#reason_area .inner .list button.slick-prev {
    left: 5.5vw;
}
#reason_area .inner .list button.slick-next {
    right: 5.5vw;
}
#reason_area .inner .list button svg {
    width: calc(100vw * 16 / 1400);
    height: auto;
    aspect-ratio: 16 / 28;
    color: #806627;
    transition: opacity .3s ease;
}
#reason_area .inner .list button svg:hover {
    opacity: .6;
}
@media only screen and (max-width: 768px) {
    #reason_area {
        margin: 65px 0 0 0;
    }
    #reason_area .inner h3 {
        font-size: min(calc(100vw * 20 / 375), 2rem);
    }
    #reason_area .inner .list {
        margin: 45px 0 0 0;
    }
    #reason_area .inner .list .slick-list .slick-track .slick-slide {
        padding: 0 min(calc(100vw * 20 / 375), 20px);
    }
    #reason_area .slide_inner {
        max-width: calc(100vw * 208 / 375);
    }
    #reason_area .inner .list .slick-list .slick-track .slick-slide figure {
        border-radius: min(calc(100vw * 4 / 375), 4px);
    }
    #reason_area .inner .list .slick-list .slick-track .slick-slide h4 {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        margin: min(calc(100vw * 20 / 375), 20px) 0 0 0;
    }
    #reason_area .inner .list .slick-list .slick-track .slick-slide p {
        font-size: min(calc(100vw * 14 / 375), 1.4rem);
        margin: min(calc(100vw * 10 / 375), 10px) 0 0 0;
    }
    #reason_area .inner .list button {
        top: calc(100vw * 90 / 375);
    }
    #reason_area .inner .list button.slick-prev {
        left: 7.5vw;
    }
    #reason_area .inner .list button.slick-next {
        right: 7.5vw;
    }
    #reason_area .inner .list button svg {
        width: calc(100vw * 13 / 375);
        transition: none;
    }
    #reason_area .inner .list button svg:hover {
        opacity: 1;
    }
}
/* cases_area */
#cases_area {
    margin: 125px 0 0 0;
    background-color: #d2ecfa;
    padding: 125px 0 0 0;
}
#cases_area .inner h3 {
    font-size: min(calc(100vw * 22 / 1400), 2.2rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    color: #806627;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
#cases_area .inner h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -8px;
    left: 0;
}
#cases_area .inner article {
    width: min(calc(100vw * 1100 / 1400), 1100px);
    margin: 65px auto 0 auto;
    padding: 0 0 125px 0;
}
#cases_area .inner article:nth-of-type(2) {
    background-color: #dff0eb;
    margin: 0 auto;
    padding: 125px 0;
    position: relative;
    z-index: 1;
}
#cases_area .inner article:nth-of-type(2)::before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: #dff0eb;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
#cases_area .inner article h4 {
    font-size: min(calc(100vw * 20 / 1400), 2rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    color: #806627;
    text-align: center;
}
#cases_area .inner article p.lead {
    margin: min(calc(100vw * 25 / 1400), 25px);
    font-size: min(calc(100vw * 17 / 1400), 1.7rem);
    letter-spacing: 0.15em;
    line-height: 1.6;
    color: #806627;
    text-align: center;
}
#cases_area .inner article .cases_container ul.cases_list {
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: min(calc(100vw * 45 / 1400), 45px) auto 0 auto;
    position: relative;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 {
    width: min(calc(100vw * 522 / 1400), 522px);
    height: auto;
    aspect-ratio: 1044 / 1828;
    background-image: url(../../images/content/zisu_guide/casesBg01.webp);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 {
    width: min(calc(100vw * 598 / 1400), 598px);
    height: auto;
    aspect-ratio: 1196 / 1776;
    background-image: url(../../images/content/zisu_guide/casesBg02.webp);
}
#cases_area .inner article .cases_container ul.cases_list li {
    position: absolute;
    width: min(calc(100vw * 70 / 1400), 7rem);
}
#cases_area .inner article .cases_container ul.cases_list li button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
}
#cases_area .inner article .cases_container ul.cases_list li button:focus {
    outline: none;
    border: none;
}
#cases_area .inner article .cases_container ul.cases_list li button .txt {
    font-size: min(calc(100vw * 13 / 1400), 1.3rem);
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: min(calc(100vw * 70 / 1400), 7rem);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    transition: transform .3s ease;
}
#cases_area .inner article .cases_container ul.cases_list li button:hover .txt {
    transform: translateY(-5px);
}
#cases_area .inner article .cases_container ul.cases_list li button .txt::before {
    content: "";
    width: min(calc(100vw * 15 / 1400), 15px);
    height: min(calc(100vw * 12 / 1400), 12px);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    position: absolute;
    bottom: calc(min(calc(100vw * 8 / 1400), 8px) * -1);
    left: 50%;
    transform: translateX(-50%);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(1) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(1) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(1) button p.icon {
    background-color: #a62126;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(2) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(2) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(2) button p.icon {
    background-color: #eb6d87;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(3) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(3) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(3) button p.icon {
    background-color: #f19963;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(4) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(4) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(4) button p.icon {
    background-color: #6a3906;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(1) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(1) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(1) button p.icon {
    background-color: #f5bcbf;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(2) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(2) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(2) button p.icon {
    background-color: #d2d2d3;
    color: #806627;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(3) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(3) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(3) button p.icon {
    background-color: #a1c3ce;
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(4) button .txt,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(4) button .txt::before,
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(4) button p.icon {
    background-color: #00356d;
}
#cases_area .inner article .cases_container ul.cases_list li button p.icon {
    position: relative;
    width: min(calc(100vw * 32 / 1400), 32px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: min(calc(100vw * 4 / 1400), 4px);
    left: 50%;
    transform: translateX(-50%);
    margin: 20px 0 0 0;
    transition: width .3s ease, height .3s ease;
}
#cases_area .inner article .cases_container ul.cases_list li button:hover p.icon {
    width: min(calc(100vw * 40 / 1400), 40px);
}
#cases_area .inner article .cases_container ul.cases_list li button p.icon::before,
#cases_area .inner article .cases_container ul.cases_list li button p.icon::after {
    content: "";
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#cases_area .inner article .cases_container ul.cases_list li button p.icon::before {
    width: min(calc(100vw * 20 / 1400), 20px);
    height: min(calc(100vw * 2 / 1400), 2px);
}
#cases_area .inner article .cases_container ul.cases_list li button p.icon::after {
    width: min(calc(100vw * 2 / 1400), 2px);
    height: min(calc(100vw * 20 / 1400), 20px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(1) {
    top: min(calc(100vw * 160 / 1400), 160px);
    right: min(calc(100vw * 90 / 1400), 90px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(2) {
    top: min(calc(100vw * 362 / 1400), 362px);
    left: min(calc(100vw * 145 / 1400), 145px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(3) {
    top: min(calc(100vw * 530 / 1400), 530px);
    right: min(calc(100vw * 90 / 1400), 90px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(4) {
    top: min(calc(100vw * 732 / 1400), 732px);
    left: min(calc(100vw * 186 / 1400), 186px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(1) {
    top: min(calc(100vw * 23 / 1400), 23px);
    left: min(calc(100vw * 226 / 1400), 226px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(2) {
    top: min(calc(100vw * 331 / 1400), 331px);
    right: min(calc(100vw * 122 / 1400), 122px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(3) {
    top: min(calc(100vw * 480 / 1400), 480px);
    left: min(calc(100vw * 25 / 1400), 25px);
}
#cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(4) {
    top: min(calc(100vw * 687 / 1400), 687px);
    left: min(calc(100vw * 275 / 1400), 275px);
}
#cases_area .inner .case_modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility .3s ease;
}
#cases_area .inner .case_modal.is-open {
    visibility: visible;
    opacity: 1;
}
#cases_area .inner .case_modal .case_modal_bg {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .6);
}
#cases_area .inner .case_modal .case_modal_inner {
    width: min(calc(100vw * 980 / 1400), 980px);
    overflow: visible;
    background: #fff;
    border-radius: min(calc(100vw * 20 / 1400), 20px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: min(calc(100vw * 50 / 1400), 50px);
    padding: min(calc(100vw * 50 / 1400), 50px);
    position: relative;
    transform: translateY(30px);
    z-index: 1;
    transition: transform .3s ease;
}
#cases_area .inner .case_modal.is-open .case_modal_inner {
    transform: translateY(0);
}
#cases_area .inner .case_modal .case_modal_inner button.case_modal_close {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 60px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    border: none;
    cursor: pointer;
    z-index: 10;
}
#cases_area .inner .case_modal .case_modal_inner button.case_modal_close::before,
#cases_area .inner .case_modal .case_modal_inner button.case_modal_close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background: #fff;
}
#cases_area .inner .case_modal .case_modal_inner button.case_modal_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#cases_area .inner .case_modal .case_modal_inner button.case_modal_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#cases_area .inner .case_modal .case_modal_inner figure {
    width: min(calc(100vw * 386 / 1400), 386px);
    height: auto;
    aspect-ratio: 386 / 373;
    border-radius: min(calc(100vw * 8 / 1400), 8px);
    overflow: hidden;
}
#cases_area .inner .case_modal .case_modal_inner figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
#cases_area .inner .case_modal .case_modal_inner .item {
    width: calc(100% - (min(calc(100vw * 386 / 1400), 386px) + min(calc(100vw * 50 / 1400), 50px)));
}
#cases_area .inner .case_modal .case_modal_inner .item p.sub {
    font-size: min(calc(100vw * 25 / 1400), 2.5rem);
    font-weight: 600;
    letter-spacing: 0.25em;
    line-height: 1.5;
}
#cases_area .inner .case_modal .case_modal_inner .item h5 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: min(calc(100vw * 20 / 1400), 2rem);
    font-weight: 600;
    letter-spacing: 0.25em;
    line-height: 1.5;
    color: #fff;
    padding: min(calc(100vw * 10 / 1400), 10px) min(calc(100vw * 20 / 1400), 20px);
    border-radius: min(calc(100vw * 10 / 1400), 10px);
    margin: min(calc(100vw * 20 / 1400), 20px) 0 0 0;
}
#cases_area .inner .case_modal .case_modal_inner .item h5 span {
    font-size: min(calc(100vw * 16 / 1400), 1.6rem);
}
#cases_area .inner .case_modal .case_modal_inner .item p.comment {
    font-size: min(calc(100vw * 17 / 1400), 1.7rem);
    letter-spacing: 0.15em;
    line-height: 1.6;
    text-align: justify;
    color: #806627;
    margin: min(calc(100vw * 20 / 1400), 20px) 0 0 0;
}
#cases_area .inner .case_modal .case_modal_inner .item p.close {
    margin: min(calc(100vw * 20 / 1400), 20px) 0 0 0;
    font-size: min(calc(100vw * 16 / 1400), 1.6rem);
    letter-spacing: 0.15em;
    background-color: #806627;
    color: #fff;
    padding: min(calc(100vw * 8 / 1400), 8px) min(calc(100vw * 12 / 1400), 12px);
    border-radius: min(calc(100vw * 5 / 1400), 5px);
    display: inline-flex;
    align-items: center;
    gap: min(calc(100vw * 10 / 1400), 10px);
    cursor: pointer;
    transition: opacity .3s ease;
}
#cases_area .inner .case_modal .case_modal_inner .item p.close:hover {
    opacity: .6;
}
#cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon {
    position: relative;
    top: 1px;
    display: block;
    width: min(calc(100vw * 16 / 1400), 16px);
    height: auto;
    aspect-ratio: 1 / 1;
}
#cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon::before,
#cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(100vw * 16 / 1400), 16px);
    height: min(calc(100vw * 2 / 1400), 2px);
    background: #fff;
}
#cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon:before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#cases_area .inner .case_modal#case01 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #a62126;
}
#cases_area .inner .case_modal#case01 .case_modal_inner .item p.sub {
    color: #a62126;
}
#cases_area .inner .case_modal#case01 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case01 .case_modal_inner .item h5 {
    background-color: #a62126;
}
#cases_area .inner .case_modal#case02 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #eb6d87;
}
#cases_area .inner .case_modal#case02 .case_modal_inner .item p.sub {
    color: #eb6d87;
}
#cases_area .inner .case_modal#case02 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case02 .case_modal_inner .item h5 {
    background-color: #eb6d87;
}
#cases_area .inner .case_modal#case03 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #f19963;
}
#cases_area .inner .case_modal#case03 .case_modal_inner .item p.sub {
    color: #f19963;
}
#cases_area .inner .case_modal#case03 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case03 .case_modal_inner .item h5 {
    background-color: #f19963;
}
#cases_area .inner .case_modal#case04 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #6a3906;
}
#cases_area .inner .case_modal#case04 .case_modal_inner .item p.sub {
    color: #6a3906;
}
#cases_area .inner .case_modal#case04 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case04 .case_modal_inner .item h5 {
    background-color: #6a3906;
}
#cases_area .inner .case_modal#case05 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #f5bcbf;
}
#cases_area .inner .case_modal#case05 .case_modal_inner .item p.sub {
    color: #f5bcbf;
}
#cases_area .inner .case_modal#case05 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case05 .case_modal_inner .item h5 {
    background-color: #f5bcbf;
}
#cases_area .inner .case_modal#case06 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #939393;
}
#cases_area .inner .case_modal#case06 .case_modal_inner .item p.sub {
    color: #939393;
}
#cases_area .inner .case_modal#case06 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case06 .case_modal_inner .item h5 {
    background-color: #939393;
}
#cases_area .inner .case_modal#case07 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #a1c3ce;
}
#cases_area .inner .case_modal#case07 .case_modal_inner .item p.sub {
    color: #a1c3ce;
}
#cases_area .inner .case_modal#case07 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case07 .case_modal_inner .item h5 {
    background-color: #a1c3ce;
}
#cases_area .inner .case_modal#case08 .case_modal_inner {
    border: min(calc(100vw * 3 / 1400), 3px) solid #00356d;
}
#cases_area .inner .case_modal#case08 .case_modal_inner .item p.sub {
    color: #00356d;
}
#cases_area .inner .case_modal#case08 .case_modal_inner button.case_modal_close,
#cases_area .inner .case_modal#case08 .case_modal_inner .item h5 {
    background-color: #00356d;
}
@media only screen and (max-width: 768px) {
    #cases_area {
        margin: 65px 0 0 0;
        padding: 65px 0 0 0;
    }
    #cases_area .inner h3 {
        font-size: min(calc(100vw * 20 / 375), 2rem);
    }
    #cases_area .inner article {
        width: 100%;
        margin: 45px auto 0 auto;
        padding: 0 0 65px 0;
    }
    #cases_area .inner article:nth-of-type(2) {
        padding: 65px 0;
    }
    #cases_area .inner article h4 {
        width: 80vw;
        margin: 0 auto;
        font-size: min(calc(100vw * 18 / 375), 1.8rem);
        text-align: justify;
    }
    #cases_area .inner article p.lead {
        width: 80vw;
        margin: min(calc(100vw * 10 / 375), 10px) auto 0 auto;
        font-size: min(calc(100vw * 14 / 375), 1.4rem);
        text-align: justify;
    }
    #cases_area .inner article .cases_container ul.cases_list {
        margin: min(calc(100vw * 45 / 375), 45px) auto 0 auto;
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list01 {
        width: min(calc(100vw * 331 / 375), 331px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list02 {
        width: min(calc(100vw * 305 / 375), 305px);
    }
    #cases_area .inner article .cases_container ul.cases_list li {
        width: min(calc(100vw * 70 / 375), 7rem);
    }
    #cases_area .inner article .cases_container ul.cases_list li button .txt {
        font-size: min(calc(100vw * 13 / 375), 1.3rem);
        width: min(calc(100vw * 70 / 375), 7rem);
        transition: none;
    }
    #cases_area .inner article .cases_container ul.cases_list li button:hover .txt {
        transform: translateY(0);
    }
    #cases_area .inner article .cases_container ul.cases_list li button .txt::before {
        width: min(calc(100vw * 15 / 375), 15px);
        height: min(calc(100vw * 12 / 375), 12px);
        bottom: calc(min(calc(100vw * 8 / 375), 8px) * -1);
    }
    #cases_area .inner article .cases_container ul.cases_list li button p.icon {
        width: min(calc(100vw * 32 / 375), 32px);
        border-radius: min(calc(100vw * 4 / 375), 4px);
        margin: 15px 0 0 0;
        transition: none;
    }
    #cases_area .inner article .cases_container ul.cases_list li button:hover p.icon {
        width: min(calc(100vw * 32 / 375), 32px);
    }
    #cases_area .inner article .cases_container ul.cases_list li button p.icon::before {
        width: min(calc(100vw * 20 / 375), 20px);
        height: min(calc(100vw * 2 / 375), 2px);
    }
    #cases_area .inner article .cases_container ul.cases_list li button p.icon::after {
        width: min(calc(100vw * 2 / 375), 2px);
        height: min(calc(100vw * 20 / 375), 20px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(1) {
        top: min(calc(100vw * 60 / 375), 60px);
        right: min(calc(100vw * 42 / 375), 42px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(2) {
        top: min(calc(100vw * 193 / 375), 193px);
        left: min(calc(100vw * 82 / 375), 82px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(3) {
        top: min(calc(100vw * 292 / 375), 292px);
        right: min(calc(100vw * 42 / 375), 42px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list01 li:nth-child(4) {
        top: min(calc(100vw * 436 / 375), 436px);
        left: min(calc(100vw * 111 / 375), 111px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(1) {
        top: min(calc(100vw * -4 / 375), -4px);
        left: min(calc(100vw * 66 / 375), 66px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(2) {
        top: min(calc(100vw * 113 / 375), 113px);
        right: min(calc(100vw * 48 / 375), 48px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(3) {
        top: min(calc(100vw * 190 / 375), 190px);
        left: min(calc(100vw * -10 / 375), -10px);
    }
    #cases_area .inner article .cases_container ul.cases_list.cases_list02 li:nth-child(4) {
        top: min(calc(100vw * 306 / 375), 306px);
        left: min(calc(100vw * 125 / 375), 125px);
    }
    #cases_area .inner .case_modal {
        overflow-y: auto;
        display: block;
        padding: 5vw 10vw;
    }
    #cases_area .inner .case_modal .case_modal_inner {
        width: 80vw;
        border-radius: min(calc(100vw * 20 / 375), 20px);
        display: block;
        padding: min(calc(100vw * 25 / 375), 25px);
    }
    #cases_area .inner .case_modal .case_modal_inner button.case_modal_close {
        top: -20px;
        right: -20px;
        width: 40px;
    }
    #cases_area .inner .case_modal .case_modal_inner button.case_modal_close::before,
    #cases_area .inner .case_modal .case_modal_inner button.case_modal_close::after {
        width: 20px;
    }
    #cases_area .inner .case_modal .case_modal_inner figure {
        width: 100%;
        border-radius: min(calc(100vw * 8 / 375), 8px);
    }
    #cases_area .inner .case_modal .case_modal_inner .item {
        width: 100%;
        margin: 20px 0 0 0;
    }
    #cases_area .inner .case_modal .case_modal_inner .item p.sub {
        font-size: min(calc(100vw * 20 / 375), 2rem);
    }
    #cases_area .inner .case_modal .case_modal_inner .item h5 {
        font-size: min(calc(100vw * 18 / 375), 1.8rem);
        padding: min(calc(100vw * 10 / 375), 10px) min(calc(100vw * 20 / 375), 20px);
        border-radius: min(calc(100vw * 6 / 375), 6px);
        margin: 10px 0 0 0
    }
    #cases_area .inner .case_modal .case_modal_inner .item h5 span {
        font-size: min(calc(100vw * 14 / 375), 1.4rem);
    }
    #cases_area .inner .case_modal .case_modal_inner .item p.comment {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        margin: 10px 0 0 0;
    }
    #cases_area .inner .case_modal .case_modal_inner .item p.close {
        margin: 30px 0 0 0;
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        padding: min(calc(100vw * 8 / 375), 8px) min(calc(100vw * 12 / 375), 12px);
        border-radius: min(calc(100vw * 5 / 375), 5px);
        gap: min(calc(100vw * 10 / 375), 10px);
        transition: none;
    }
    #cases_area .inner .case_modal .case_modal_inner .item p.close:hover {
        opacity: 1;
    }
    #cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon {
        width: min(calc(100vw * 16 / 375), 16px);
    }
    #cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon::before,
    #cases_area .inner .case_modal .case_modal_inner .item p.close .close_icon::after {
        width: min(calc(100vw * 16 / 375), 16px);
        height: min(calc(100vw * 2 / 375), 2px);
    }
    #cases_area .inner .case_modal#case01 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #a62126;
    }
    #cases_area .inner .case_modal#case02 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #eb6d87;
    }
    #cases_area .inner .case_modal#case03 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #f19963;
    }
    #cases_area .inner .case_modal#case04 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #6a3906;
    }
    #cases_area .inner .case_modal#case05 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #f5bcbf;
    }
    #cases_area .inner .case_modal#case06 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #939393;
    }
    #cases_area .inner .case_modal#case07 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #a1c3ce;
    }
    #cases_area .inner .case_modal#case08 .case_modal_inner {
        border: min(calc(100vw * 3 / 375), 3px) solid #00356d;
    }
}
/* voice_area */
#voice_area {
    padding: 125px 0;
    background-color: #fff7ea;
}
#voice_area .inner {
    width: min(calc(100vw * 1000 / 1400), 1000px);
    margin: 0 auto;
}
#voice_area .inner h3 {
    font-size: min(calc(100vw * 22 / 1400), 2.2rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    color: #806627;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
#voice_area .inner h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #806627;
    position: absolute;
    bottom: -8px;
    left: 0;
}
#voice_area .inner .voice_list {
    margin: 65px 0 0 0;
}
#voice_area .inner .voice_list article {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}
#voice_area .inner .voice_list article:not(:first-child) {
    margin: min(calc(100vw * 90 / 1400), 90px) 0 0 0;
}
#voice_area .inner .voice_list article img.icon {
    width: min(calc(100vw * 131 / 1400), 131px);
    position: relative;
    top: calc(min(calc(100vw * 25 / 1400), 25px) * -1);
}
#voice_area .inner .voice_list article .item {
    width: min(calc(100vw * 850 / 1400), 850px);
    border: 2px solid #806627;
    border-radius: min(calc(100vw * 10 / 1400), 10px);
    background: #fff;
    position: relative;
    z-index: 1;
}
#voice_area .inner .voice_list article .item::after {
    content: "";
    position: absolute;
    top: min(calc(100vw * 45 / 1400), 45px);
    left: calc(min(calc(100vw * 11 / 1400), 11px) * -1);
    width: min(calc(100vw * 20 / 1400), 20px);
    height: auto;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-left: 2px solid #8a6a16;
    border-bottom: 2px solid #8a6a16;
    transform: rotate(45deg);
    z-index: -1;
}
#voice_area .inner .voice_list article .item button.toggle_btn {
    width: 100%;
    min-height: min(calc(100vw * 110 / 1400), 110px);
    font-size: min(calc(100vw * 22 / 1400), 2.2rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #806627;
    padding: 0 min(calc(100vw * 30 / 1400), 30px);
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
#voice_area .inner .voice_list article .item .comment_area {
    display: none;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner {
    padding: min(calc(100vw * 45 / 1400), 45px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    gap: min(calc(100vw * 70 / 1400), 70px);
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .element {
    width: calc(100% - min(calc(100vw * 335 / 1400), 335px));
    position: relative;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .element::before {
    content: "";
    width: 1px;
    height: 100%;
    background-image: radial-gradient(
        circle,
        #806627 2px,
        transparent 2px
    );
    background-size: 4px 10px;
    background-repeat: repeat-y;
    background-position: left top;
    position: absolute;
    right: calc(min(calc(100vw * 35 / 1400), 35px) * -1);
    top: 50%;
    transform: translateY(-50%);
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info {
    width: min(calc(100vw * 265 / 1400), 265px);
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info figure {
    width: 100%;
    height: auto;
    aspect-ratio: 530 / 350;
    border-radius: min(calc(100vw * 8 / 1400), 8px);
    overflow: hidden;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl {
    margin: min(calc(100vw * 15 / 1400), 15px) 0 0 0;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl dt {
    font-size: min(calc(100vw * 16 / 1400), 1.6rem);
    letter-spacing: 0.1em;
    color: #806627;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: min(calc(100vw * 10 / 1400), 10px);
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl dd {
    margin: min(calc(100vw * 10 / 1400), 10px) 0 0 0;
    font-size: min(calc(100vw * 14 / 1400), 1.4rem);
    letter-spacing: 0.1em;
    color: #806627;
    line-height: 1.6;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl dt::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #806627;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .element p:nth-child(1) {
    font-size: min(calc(100vw * 17 / 1400), 1.7rem);
    letter-spacing: 0.1em;
    line-height: 2;
    text-align: justify;
    color: #806627;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .element p:nth-child(1) span {
    background:linear-gradient(transparent 60%, #fff000 60%);
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .element .old {
    text-align: right;
    margin: min(calc(100vw * 25 / 1400), 25px) 0 0 0;
}
#voice_area .inner .voice_list article .item .comment_area .comment_inner .element .old p {
    display: inline-block;
    margin: 0 0 0 auto;
    background-color: #806627;
    font-size: min(calc(100vw * 17 / 1400), 1.7rem);
    letter-spacing: 0.1em;
    padding: min(calc(100vw * 4 / 1400), 4px) min(calc(100vw * 12 / 1400), 12px);
    color: #fff;
    border-radius: min(calc(100vw * 4 / 1400), 4px);
}
#voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon {
    position: relative;
    display: block;
    width: min(calc(100vw * 37 / 1400), 37px);
    height: auto;
    aspect-ratio: 1 / 1;
}
#voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon::before,
#voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #806627;
    transition: transform .3s ease;
}
#voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon::before {
    width: min(calc(100vw * 37 / 1400), 37px);
    height: 4px;
    transform: translate(-50%, -50%);
}
#voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon::after {
    width: 4px;
    height: min(calc(100vw * 37 / 1400), 37px);
    transform: translate(-50%, -50%);
}
#voice_area .inner .voice_list article .item.is-open button.toggle_btn .toggle_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
@media only screen and (max-width: 768px) {
    #voice_area {
        padding: 65px 0;
    }
    #voice_area .inner {
        width: 80vw;
    }
    #voice_area .inner h3 {
        font-size: min(calc(100vw * 20 / 375), 2rem);
    }
    #voice_area .inner .voice_list {
        margin: 45px 0 0 0;
    }
    #voice_area .inner .voice_list article:not(:first-child) {
        margin: min(calc(100vw * 45 / 375), 45px) 0 0 0;
    }
    #voice_area .inner .voice_list article img.icon {
        width: min(calc(100vw * 59 / 375), 59px);
        top: calc(min(calc(100vw * 15 / 375), 15px) * -1);
    }
    #voice_area .inner .voice_list article .item {
        width: min(calc(100vw * 220 / 375), 220px);
        border-radius: min(calc(100vw * 6 / 375), 6px);
    }
    #voice_area .inner .voice_list article .item::after {
        top: min(calc(100vw * 26 / 375), 26px);
        left: calc(min(calc(100vw * 8 / 375), 8px) * -1);
        width: min(calc(100vw * 15 / 375), 15px);
    }
    #voice_area .inner .voice_list article .item button.toggle_btn {
        min-height: min(calc(100vw * 67 / 375), 67px);
        font-size: min(calc(100vw * 15 / 375), 1.5rem);
        padding: 0 min(calc(100vw * 20 / 375), 20px);
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner {
        padding: min(calc(100vw * 20 / 375), 20px);
        display: block;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .element {
        width: 100%;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .element::before {
        content: none;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .info {
        width: 100%;
        margin: 20px 0 0 0;
        border-top: 1px dashed #806627;
        padding: 20px 0 0 0;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .info figure {
        border-radius: min(calc(100vw * 4 / 375), 4px);
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl {
        margin: min(calc(100vw * 15 / 375), 15px) 0 0 0;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl dt {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        gap: min(calc(100vw * 10 / 375), 10px);
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .info dl dd {
        margin: min(calc(100vw * 10 / 375), 10px) 0 0 0;
        font-size: min(calc(100vw * 14 / 375), 1.4rem);
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .element p:nth-child(1) {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        line-height: 1.6;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .element .old {
        margin: min(calc(100vw * 25 / 375), 25px) 0 0 0;
    }
    #voice_area .inner .voice_list article .item .comment_area .comment_inner .element .old p {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        padding: min(calc(100vw * 4 / 375), 4px) min(calc(100vw * 12 / 375), 12px);
        border-radius: min(calc(100vw * 4 / 375), 4px);
    }
    #voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon {
        width: min(calc(100vw * 15 / 375), 15px);
    }
    #voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon::before {
        width: min(calc(100vw * 15 / 375), 15px);
        height: 2px;
    }
    #voice_area .inner .voice_list article .item button.toggle_btn .toggle_icon::after {
        width: 2px;
        height: min(calc(100vw * 15 / 375), 15px);
    }
}