/***************************************
スライダー用スタイルシート
***************************************/
.slide-wrapper {
    --slide-background-color: transparent;
    --slide-view-height: 400px;
    position: relative;
    width: 100%;
    height: var(--slide-view-height);
    overflow: hidden;
    padding: 0 !important;
    margin-bottom: 2rem;
    margin-top: 1rem;
}
.slide-view {
    --slide-title-color: white;
    --slide-description-color: black;
    --slide-item-border-color: transparent;
    --slide-item-gap: 0.5rem;
    --slide-item-width: 300px;
    --slide-item-radius: 10px;
    position: absolute;
    display: -webkit-box;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    width: auto;
    height: var(--slide-view-height);
    background-color: var(--slide-background-color);
}
.slide-item {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 1fr 1fr auto auto;
    grid-template-rows: 1fr 1fr 1fr auto auto;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: var(--slide-item-width);
    border-left: 1px solid var(--slide-item-border-color);
    border-bottom: 1px solid var(--slide-item-border-color);
    padding: var(--slide-item-gap);
}
.slide-item > .slide-title,
.slide-item > .slide-description,
.slide-item > .slide-image {
    pointer-events: none;
}
.slide-item.anim > .slide-image > img {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
}
.slide-item p {
    margin: 0;
}
.slide-item a {
    margin-top: 0.5rem;
    text-decoration: underline;
    font-weight: 500;
    pointer-events: auto;
}
.slide-item a:hover, .slide-item a:focus, .slide-item a:active {
    color: #fa5151 !important;
}
.slide-item a > i {
    margin-right: 0.5rem;
}
.slide-item strong {
    font-weight: 1000;
}
@media screen and (min-width:768px) {
    .slide-view {
        --slide-view-height: 350px;
    }
    .slide-item {
        --slide-item-width: 500px;
        grid-template-rows: 1fr 1fr 1fr auto 40%;
    }
}
.slide-title {
    grid-column: 1 / 5;
    grid-row: 4;
    z-index: 2;
    padding: 0.3rem;
    border-bottom-left-radius: var(--slide-item-radius);
    border-bottom-right-radius: var(--slide-item-radius);
    color: var(--slide-title-color);
    -webkit-backdrop-filter: blur(5px) grayscale(50%) brightness(0.5);
            backdrop-filter: blur(5px) grayscale(50%) brightness(0.5);
}
.slide-title > h3 {
    font-size: 1.2rem !important;
    font-weight: bold;
    color: inherit;
    margin: 0;
}
.slide-title > h3::before {
    content: "【";
}
.slide-title > h3::after {
    content: "】";
}
.slide-description {
    grid-column: 1 / 5;
    grid-row: 5;
    z-index: 2;
    padding-top: 0.5rem;
    color: var(--slide-description-color);
}
.slide-description > p {
    font-weight: 500;
}
.slide-description > a {
    display: block;
}
.slide-image {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1/ 5;
    grid-column: 1 / 5;
    overflow: hidden;
    z-index: 1;
    border-radius: var(--slide-item-radius);
}
.slide-image > img {
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20stroke%3D%22%23000%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22%20fill%3D%22none%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Canimate%20attributeName%3D%22stroke-dasharray%22%20dur%3D%221.5s%22%20calcMode%3D%22spline%22%20values%3D%220%20150%3B42%20150%3B42%20150%3B42%20150%22%20keyTimes%3D%220%3B0.475%3B0.95%3B1%22%20keySplines%3D%220.42%2C0%2C0.58%2C1%3B0.42%2C0%2C0.58%2C1%3B0.42%2C0%2C0.58%2C1%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%221.5s%22%20calcMode%3D%22spline%22%20values%3D%220%3B-16%3B-59%3B-59%22%20keyTimes%3D%220%3B0.475%3B0.95%3B1%22%20keySplines%3D%220.42%2C0%2C0.58%2C1%3B0.42%2C0%2C0.58%2C1%3B0.42%2C0%2C0.58%2C1%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fcircle%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20dur%3D%222s%22%20values%3D%220%2012%2012%3B360%2012%2012%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    -webkit-transform: transrateX(50%) transrateY(50%);
        -ms-transform: transrateX(50%) transrateY(50%);
            transform: transrateX(50%) transrateY(50%);
    -webkit-filter: brightness(1);
            filter: brightness(1);
}
.slide-image > img::after {
    display: block;
    position: absolute;
    content: inherit;
}