@charset "UTF-8";
.info_bg{
    position: relative;
    box-sizing: border-box;
    width:100%;
    height: 400px;
    background: linear-gradient(120deg, var(--main_color) 70%, rgb(from var(--main_color) r g b /0.7) 30% );
    margin-bottom: 2rem;
}

.carousel_container{
    /*position: relative;*/
    display: flex;
    margin:0 auto;
    text-align: center;/*左右中央揃え*/
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    gap: 4vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-padding: 20px;
    /*padding:0 calc(50vw - 40vw);*/

    /*anchor-name: --my-carousel;*/
    scroll-marker-group: after;

    scroll-behavior: smooth;
  
}
.carousel_container::scroll-marker-group{
    position:absolute;
    bottom:7%;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    
    gap:15px;
}
.carousel::scroll-marker{
    content: "";
    width:16px;
    height: 16px;
    background-color: transparent;
    border: 2px solid var(--text);
    border-radius: 50%;
    transition: 0.5s;
}
.carousel::scroll-marker:hover{
    background-color: var(--text_white);
}
.carousel::scroll-marker:target-current{
    background-color: var(--text_h);
}

.carousel_container::scroll-button(*){
    box-sizing: border-box;
    position: absolute;
    width: 5rem;
    height: 97%;

    /*padding: 0.2rem 1rem 0.4rem 1rem;
    border-radius: 50%;*/
    background-color: var(--white05);

    backdrop-filter: blur(2px);/**/
    padding:10px;
    font-size: 3rem;
    font-weight: 600;
    
    color:var(--main_color);
    -webkit-text-stroke: 3px var(--text);

    cursor: pointer;
    pointer-events: auto;
    transition: 0.5s;

}



.carousel_container::scroll-button(*):hover,
.carousel_container::scroll-button(*):focus-visible{
    color:var(--text_h);
    /*-webkit-text-stroke: 1px var(--text_white);*/
}
.carousel_container::scroll-button(*):active{
    translate: 1px 1px;
}
.carousel_container::scroll-button(*):disabled{
    opacity: 0.1;
    cursor: unset;
}
.carousel_container::scroll-button(left){
    content: "◀";
    
    /*background: linear-gradient(to right, var(--main_color) , transparent);
    backdrop-filter: blur(2px);*/
    border: 0;
    /*width: 60px;
    height: 60px;
    background-color: var(--text);
    clip-path: polygon(100% 0,0 50%,100% 100%,100% 50%);左上を起点にX座標 Y座標, X座標 Y座標, X座標 Y座標...*/
    left:0;
    top: 47%;
    transform: translateY(-50%);
}

.carousel_container::scroll-button(right){
    content: "▶";
    /*background: linear-gradient(to left, var(--main_color), transparent);
    backdrop-filter: blur(2px);*/
    border: 0;

    /*width: 50px;
    height: 60px;
    background-color: var(--text);
    clip-path: polygon(0 0,0 100%,100% 50%);左上を起点にX座標 Y座標, X座標 Y座標, X座標 Y座標...*/

    right:0;
    top: 47%;
    transform: translateY(-50%);
}


.carousel{
    position: relative;
    list-style-type: none;
    flex: 0 0 60%;/*値を3つ指定: flex-grow:伸長 | flex-shrink:収縮 | flex-basis:初期の寸法*/
    height: 100%;
    scroll-snap-align: center;

    background-color: rgb(from var(--color1) r g b /0.8);
    /*clip-path: inset(0 10vw);*/
}

.carousel:first-of-type/*.carousel:first-child*/{
    margin-left: 20vw;
}
.carousel:last-of-type/*last-child*/{
    margin-right: 20vw;
}
.carousel_msg{
    position: absolute;
    top:45%;
    left:50%;
    transform: translate(-50%,-45% );
    width: 90%;
    text-align: center;/*左右中央揃え*/
    font-size:1.35em;
}
/*firefox用*/
input[type="radio"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
@supports selector(::scroll-marker){
    .fallback_markers{
        display: none;
    }
}
@supports not selector(::scroll-marker){
    .fallback_markers{
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        display: flex;
        position:absolute;
        bottom:7%;
        left:50%;
        transform: translateX(-50%);
        justify-content: center;
        
        gap:15px;
        z-index: 10;
    }
    /*.fallback_markers label{
        position: relative;
        display: inline-block;
        pointer-events: auto;
        cursor: pointer;
    }*/
    .fallback_markers #m1{
        background-color: var(--text_h);
    }
    .fallback_markers a{
        display: block;
        content: "";
        width:16px;
        height: 16px;
        background-color: transparent;/**/
        border: 2px solid var(--text);
        border-radius: 50%;
        transition: 0.5s;
        /*pointer-events: none;*/
        z-index: 2;
    }
    
    

    #info1:target ~ .fallback_markers a,
    #info2:target ~ .fallback_markers a{
        background-color: transparent;
    }
    
    #info1:target ~ .fallback_markers #m1,
    #info2:target ~ .fallback_markers #m2{/*マーカーを押したときの色*/
        background-color: var(--text_h);
    }
    .fallback_markers a:hover{
        background-color: var(--text_white);
    }
    

    /*.carousel_container::before,
    .carousel_container::after,
    .con_p, .con_n{
        position: absolute;
        top:47%;
        font-size: 3rem;
        font-weight: 600;
        -webkit-text-stroke: 2px var(--text);
        color: var(--main_color);
        pointer-events: auto;
        width: 5rem;
        height: 5rem;
        transform: translateY(-50%);
        z-index: 2;
    }
    .carousel_container::before{
        content: "◀";
        left: 10px;
    }

    .carousel_container::after{
        content: "▶";
        right: 10px;
    }*/
    

    /*.controller_box{
        
        position: absolute;
        width: 100%;
        height: 100%;
    }*/
    /*.con_p,
    .con_n{
        content: "";
        transition: 0.5s;
        z-index:10;
    }
    .con_p::before,
    .con_n::before{
        display: none;
    }
    .con_p{
        left: -20vw;
    }
    .con_n{
        right:-20vw;
    }*/
}

@media  (max-width: 1280px) {
    .carousel{
        flex:0 0 80%;
    }
    .carousel_msg{
        font-size: 1.1em;
    }
    .carousel_container::scroll-button(*){
    width:3rem;
    font-size: 2rem;
    }
    .carousel_container::scroll-marker-group{
        gap:10px;
    }
    .carousel::scroll-marker{
        width: 0.8rem;
        height: 0.8rem;
    }
    /*Firefox用*/
    .fallback_markers{
        gap:10px;
    }
    .fallback_markers a{
        width: 0.8rem;
        height: 0.8rem;
    }
    /*.carousel_container::before,
    .carousel_container::after,
    .con_p, .con_n{
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
    }
    .con_p{
        left: -10px;
    }
    .con_n{
        right:-10px;
    }*/
    
}
@media  (max-width: 767px) {
    .carousel_msg{
        font-size: 0.9em;
    }
}