/*====================================================
//// id detail
====================================================*/
.detail-head {
    letter-spacing: .05em;
    text-align: center;
}
.detail-link-rule {
    display: flex;
        justify-content: flex-end;
    margin-top: 1.5em;
}
.detail-link-rule a {
    color: var(--color_1);
    font-size: .8em;
    font-weight: 700;
}
.detail-link-rule a .arrow {
    width: 2em;
    height: 2em;
}

.detail-item-wrapper {
    display: grid;
        grid-gap: min(8vw, 65px);
}
.detail-item-text {
    border-radius: 15px;
    line-height: 1.4;
    padding: 1em 1.2em;
    position: relative;
}
.detail-item-q .detail-item-text {
    background-color: #E6E6E6;
}
.detail-item-a .detail-item-text {
    background-color: #F6F09E;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .detail-head {
        font-size: min(5.2vw, 2.5rem);
    }
    .detail-item-wrapper {
        margin-top: min(10vw, 30px);
    }
    .detail-item {
        display: grid;
            grid-gap: min(30vw, 150px);
        position: relative;
    }
    .detail-item-img {
        position: absolute;
        z-index: 10;
    }
    .detail-item-img-inner {
        width: 100%;
        height: 100%;
    }
    .detail-item-coverImg {
        height: 100%;
        padding-top: 0;
    }
    .detail-item-text {
        width: 90%;
    }
    .detail-item-text::before {
        content: '';
        display: block;
        margin: auto;
        position: absolute;
        width: 12px;
        height: 14px;
    }

    .detail-item-q .detail-item-img {
        top: calc(100% - 10px);
        left: 0;
        width: 35%;
        height: min(30vw, 150px);
    }
    .detail-item-q .detail-item-img img {
        object-position: top center;
    }
    .detail-item-q .detail-item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 19" preserveAspectRatio="none"><path fill="%23e6e6e6" d="M6.15,17.15L16,0H0v16.03c.02,1.02.5,2.01,1.36,2.51.53.31,1.13.46,1.73.46,1.19,0,2.39-.62,3.07-1.85Z" /></svg>') no-repeat top center;
        top: calc(100% - 1px);
        left: 40%;
        right: auto
    }

    .detail-item-a .detail-item-img {
        bottom: calc(100% - 10px);
        right: 0;
        width: 35%;
        height: min(30vw, 150px);
    }
    .detail-item-a .detail-item-img img {
        object-position: bottom center;
    }
    .detail-item-a .detail-item-text {
        margin: 0 0 0 auto;
    }
    .detail-item-a .detail-item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 19" preserveAspectRatio="none"><path fill="%23F6F09E" d="M6.15,17.15L16,0H0v16.03c.02,1.02.5,2.01,1.36,2.51.53.31,1.13.46,1.73.46,1.19,0,2.39-.62,3.07-1.85Z" /></svg>') no-repeat top center;
        bottom: calc(100% - 1px);
        right: 40%;
        left: auto;
        transform: rotate(180deg);
    }

    .detail-item-5 .detail-item-q .detail-item-img {
        width: 40%;
    }
    .detail-item-q .detail-item-text::before {
        left: 45%;
    }

}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .detail-head {
        font-size: min(2.7vw, 2.5rem);
    }
    .detail-item {
        display: grid;
            grid-gap: 25px;
        font-size: min(2.5vw, 2.5rem);
    }
    .detail-item-img {
        position: relative;
        width: 25%;
    }
    .detail-item-coverImg {
        padding-top: 220px;
    }
    .detail-item-text {
        flex: 1;
    }
    .detail-item-text::before {
        content: '';
        display: block;
        margin: auto;
        position: absolute;
            top: 0;
            bottom: 0;
        width: 16px;
        height: 24px;
    }

    .detail-item-q {
        display: flex;
            align-items: flex-end;
            gap: 20px;
    }
    .detail-item-q .detail-item-img img {
        object-position: left bottom;
    }
    .detail-item-q .detail-item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 24" preserveAspectRatio="none"><path fill="%23e6e6e6" d="M2.5,16.29l13.5,7.71V0L2.5,7.71c-1.67.95-2.5,2.62-2.5,4.29s.83,3.33,2.5,4.29Z" /></svg>') no-repeat center;
        right: calc(100% - 1px);
    }

    .detail-item-a {
        display: flex;
            align-items: flex-end;
            flex-direction: row-reverse;
            gap: 20px;
    }
    .detail-item-a .detail-item-img img {
        object-position: right bottom;
    }
    .detail-item-a .detail-item-img-inner {
        position: absolute;
            bottom: 0;
            left: 0;
        width: 100%;
    }
    .detail-item-a .detail-item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 24" preserveAspectRatio="none"><path fill="%23F6F09E" d="M2.5,16.29l13.5,7.71V0L2.5,7.71c-1.67.95-2.5,2.62-2.5,4.29s.83,3.33,2.5,4.29Z" /></svg>') no-repeat center;
        left: calc(100% - 1px);
        transform: scale(-1,1);
    }

    .detail-item-5 .detail-item-q .detail-item-img {
        width: 34%;
    }
    .detail-item-5 .detail-item-a .detail-item-img {
        bottom: -25px;
    }
}

@media screen and (min-width:1040px) {
}

@media (hover: hover) {}

/*====================================================
//// id xxx
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

@media screen and (min-width:1040px) {
}

@media (hover: hover) {}