@charset "UTF-8";


.bg-svg{
    min-height: 100vh;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

.svg-container{
    min-height: 100vh;
    width: 100%;
    height: auto;
    overflow-x: hidden;
}
.svg-container img{

    object-fit: contain;
    width: 200vw;
    height: 300vh;

}

/* アニメーションの種類を特定するためのクラス */
.anim-type-1 {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/01-circle-y.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;
    transform: scale(1);
}
.anim-type-1-A {
    position: absolute;
    z-index: -2;
    right: -20%;
    top: 10%;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/01-circle-w.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;
    transform: scale(.8);
    
}
.anim-type-2 {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/02-circle-y.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    transform: scale(1);
}
.anim-type-2-A {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0%;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/02-circle-w.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    transform: scale(1);
    
}
.anim-type-3 {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/03-circle-y.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    transform: scale(1);
}
.anim-type-3-A {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0%;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/03-circle-w.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;
    transform: scale(1);
    
}
.anim-type-4 {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/04-circle-y.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    transform: scale(1);
}
.anim-type-4-A {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0%;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/04-circle-w.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;
    transform: scale(1);
    
}

.anim-type-5 {
    position: absolute;
    z-index: -1;
    left: -50%;
    bottom: 0;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/05-circle-y.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;

}
.anim-type-5-A {
    position: absolute;
    z-index: -2;
    left:0;
    top: 0;
    /* width: 100vw; */
    height: 100%;
    background-image: url(/img/svg/05-circle-w.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;

    
}


.anm-image-container{
    width: 100%;

    position: relative;
}



.anm-image-01{
    position: absolute;
    left: -100%;

}
.anm-image-01.active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

}
.anm-image-01.active div.image-bg{

    background-image: url(/img/webp/01_02.webp);
     background-position: 40% 80%;
    background-size: 100%;
}
.anm-image-01 > div.anm-bar{
   
    position: relative;
          width: 40vw;
    height: 5vh;  
}

.anm-image-02{
    position: absolute;
    left: -100%;

}
.anm-image-02.active{
    position: absolute;
    top: 8vh;
    left: 0;
    z-index: 1;

}
.anm-image-02.active div.image-bg{

    background-image: url(/img/webp/01_02.webp);
    background-position: 40% 80%;
    background-size: 100%;
}
.anm-image-02 > div.anm-bar{

    position: relative;
          width: 20vw;
    height: 4vh;  
}

.anm-image-03{
    position: absolute;
    left: -100%;

}

.anm-image-03.active{
    position: absolute;
    top: 8vh;
    left: calc(20vw + 1rem);
    z-index: 1;

}
.anm-image-03.active div.image-bg{

    background-image: url(/img/webp/01_02.webp);
    background-position: 40% 80%;
    background-size: 100%;
}
.anm-image-03 > div.anm-bar{

    position: relative;
          width: 50vw;
    height: 15vh;  
}

.anm-image-04{
    position: absolute;
    left: -100%;

}

.anm-image-04.active{
    position: absolute;
    top: 10vh;
    left: 0;
    z-index: 1;

}

.anm-image-04 > div.anm-bar{

    position: relative;
          width: 55vw;
    height: 40vh;  
}
.anm-image-04.active div.image-bg{
    background-image: url(/img/webp/01_02.webp);
    background-position: 40% 40%;
    background-size: 150%;
}
.anm-image-05{
    position: absolute;
    right: -100%;

}
.anm-image-05.active{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

}

.anm-image-05.active div.image-bg{

    background-image: url(/img/webp/02_04.webp);
    background-position: 40% 60%;
    background-size: 150%;
}
.anm-image-05 > div.anm-bar{

    position: relative;
          width: 20vw;
    height: 38vh;  
}
.anm-image-06{
    position: absolute;
    right: -100%;

}
.anm-image-06.active{
    position: absolute;
    top: 42vh;
    right: 0;
    z-index: 1;
}

.anm-image-06.active div.image-bg{

    background-image: url(/img/webp/02_02.webp);
    background-position: 50% 50%;
    background-size: 110%;
}
.anm-image-06 > div.anm-bar{

    position: relative;
width: 30vw;
    height: 30vh;
}

.anm-image-07{
    position: absolute;
    left: -100%;

}
.anm-image-07.active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.anm-image-07.active div.image-bg{

    background-image: url(/img/webp/04_01.webp);
    background-position: 50% 50%;
    background-size: 150%;
}
.anm-image-07 > div.anm-bar{

    position: relative;  
    width: 15vw;
    height: 38vh; 

}
.anm-image-08{
    position: absolute;
    right: -100%;

}
.anm-image-08.active{
    position: absolute;
    top: 20vh;
    right: 0;
    z-index: 1;
}


.anm-image-08.active div.image-bg{

    background-image: url(/img/webp/02_03.webp);
    background-position: 50% 60%;
    background-size: 100%;
}
.anm-image-08 > div.anm-bar{

    position: relative;
    width: 55vw;
    height: 40vh;
}

.anm-image-09{
    position: absolute;
    left: -100%;

}
.anm-image-09.active{
    position: absolute;
    top: 42vh;
    left: 0;
    z-index: 1;
}

.anm-image-09.active div.image-bg{

    background-image: url(/img/webp/04_02.webp);
    background-position: 0 50%;
    background-size: 100%;
}
.anm-image-09 > div.anm-bar{

    position: relative;
    width: 36vw;
    height: 30vh;
}
.anm-image-10{
    position: absolute;
    right: -100%;

}

.anm-image-10.active{
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 1;
}


.anm-image-10.active div.image-bg{

    background-image: url(/img/webp/03_03.webp);
    background-position: 50% 60%;
    background-size: cover;
    background-repeat: no-repeat;
    
}
.anm-image-10 > div.anm-bar{

    position: relative;
          width: 50vw;
    height: 10rem;  
}

.anm-image-11{
    position: absolute;
    right: -100%;

}

.anm-image-11.active{
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 1;

}


.anm-image-11.active div.image-bg{

    background-image: url(/img/webp/03_01.webp);
    background-position: 50% 40%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(0.9);
}
.anm-image-11 > div.anm-bar{

    position: relative;
          width: 75vw;
    height: 50vh;  
}

/* about */

.anm-image-12{
    position: absolute;
    left: -100%;

}

.anm-image-12.active{
    position: absolute;
    top: 10vh;
    left: 0;
    z-index: 1;

}

.anm-image-12 > div.anm-bar{

    position: relative;
          width: 55vw;
    height: 40vh;  
}
.anm-image-12.active div.image-bg{
    background-image: url(/img/webp/03_03.webp);
    background-position: 50% 50%;
    background-size: cover;
        filter: saturate(0.8);
}
.anm-image-13{
    position: absolute;
    right: -100%;

}
.anm-image-13.active{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

}

.anm-image-13.active div.image-bg{

    background-image: url(/img/webp/03_02.webp);
    background-position: 40% 60%;
    background-size: 150%;
        filter: saturate(0.8);
}
.anm-image-13 > div.anm-bar{

    position: relative;
          width: 20vw;
    height: 38vh;  
}
.anm-image-14{
    position: absolute;
    right: -100%;

}
.anm-image-14.active{
    position: absolute;
    top: 42vh;
    right: 0;
    z-index: 1;
}

.anm-image-14.active div.image-bg{

    background-image: url(/img/webp/03_01.webp);
    background-position: 50% 40%;
    background-size: 110%;
        filter: saturate(0.8);
}
.anm-image-14 > div.anm-bar{

    position: relative;
width: 30vw;
    height: 30vh;
}

.anm-image-15{
    position: absolute;
    right: -100%;

}

.anm-image-15.active{
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 1;

}


.anm-image-15.active div.image-bg{

    background-image: url(/img/webp/04_01.webp);
    background-position: 50% 40%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(0.9);
}
.anm-image-15 > div.anm-bar{

    position: relative;
          width: 75vw;
    height: 50vh;  
}

/* about */

.anm-image-16{
    position: absolute;
    left: -100%;

}

.anm-image-16.active{
    position: absolute;
    top: 10vh;
    left: 0;
    z-index: 1;

}

.anm-image-16 > div.anm-bar{

    position: relative;
          width: 55vw;
    height: 40vh;  
}
.anm-image-16.active div.image-bg{
    background-image: url(/img/webp/04_02.webp);
    background-position: 50% 50%;
    background-size: cover;
        filter: saturate(0.8);
}
.anm-image-17{
    position: absolute;
    right: -100%;

}
.anm-image-17.active{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

}

.anm-image-17.active div.image-bg{

    background-image: url(/img/webp/04_03.webp);
    background-position: 40% 60%;
    background-size: 150%;
        filter: saturate(0.8);
}
.anm-image-17 > div.anm-bar{

    position: relative;
          width: 20vw;
    height: 38vh;  
}
.anm-image-18{
    position: absolute;
    right: -100%;

}
.anm-image-18.active{
    position: absolute;
    top: 42vh;
    right: 0;
    z-index: 1;
}

.anm-image-18.active div.image-bg{

    background-image: url(/img/webp/04_04.webp);
    background-position: 50% 40%;
    background-size: 110%;
        filter: saturate(0.8);
}
.anm-image-18 > div.anm-bar{

    position: relative;
width: 30vw;
    height: 30vh;
}


.anm-image-19{
    position: absolute;
    right: -100%;

}
.anm-image-19.active{
    position: absolute;
    top: 20vh;
    right: 0;
    z-index: 1;
}


.anm-image-19.active div.image-bg{

    background-image: url(/img/webp/04_05.webp);
    background-position: 50% 60%;
    background-size: 100%;
}
.anm-image-19 > div.anm-bar{

    position: relative;
    width: 55vw;
    height: 40vh;
}




.anm-image-20{
    position: absolute;
    left: -100%;

}
.anm-image-20.active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

}
.anm-image-20.active div.image-bg{

    background-image: url(/img/webp/02_03.webp);
     background-position: 40% 50%;
    background-size: 100%;
}
.anm-image-20 > div.anm-bar{
   
    position: relative;
          width: 40vw;
    height: 5vh;  
}

.anm-image-21{
    position: absolute;
    left: -100%;

}
.anm-image-21.active{
    position: absolute;
    top: 8vh;
    left: 0;
    z-index: 1;

}
.anm-image-21.active div.image-bg{

    background-image: url(/img/webp/02_03.webp);
    background-position: 0 55%;
    background-size: 100%;
}
.anm-image-21 > div.anm-bar{

    position: relative;
          width: 20vw;
    height: 4vh;  
}

.anm-image-22{
    position: absolute;
    left: -100%;

}

.anm-image-22.active{
    position: absolute;
    top: 8vh;
    left: calc(20vw + 1rem);
    z-index: 1;

}
.anm-image-22.active div.image-bg{

    background-image: url(/img/webp/02_03.webp);
    background-position: 40% 60%;
    background-size: 100%;
}
.anm-image-22 > div.anm-bar{

    position: relative;
          width: 50vw;
    height: 15vh;  
}



.anm-image-23{
    position: absolute;
    left: -100%;

}
.anm-image-23.active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.anm-image-23.active div.image-bg{

    background-image: url(/img/webp/01_02.webp);
    background-position: 50% 50%;
    background-size: 150%;
}
.anm-image-23 > div.anm-bar{

    position: relative;  
    width: 15vw;
    height: 38vh; 

}

.anm-image-24{
    position: absolute;
    left: -100%;

}
.anm-image-24.active{
    position: absolute;
    top: 42vh;
    left: 0;
    z-index: 1;
}

.anm-image-24.active div.image-bg{

    background-image: url(/img/webp/04_04.webp);
    background-position: 0 50%;
    background-size: 100%;
}
.anm-image-24 > div.anm-bar{

    position: relative;
    width: 36vw;
    height: 30vh;
}

.anm-image-25{
    position: absolute;
    left: -100%;

}
.anm-image-25.active{
    position: absolute;
    top: 15rem;
    left: 0;
    z-index: 1;
}

.anm-image-25.active div.image-bg{

    background-image: url(/img/webp/05_01.webp);
    background-position: 0 50%;
    background-size: cover;
}
.anm-image-25 > div.anm-bar{

    position: relative;
    width: 36vw;
    height: 70vh;
}




.anm-image-2026-04{
    position: absolute;
    left: -100%;

}

.anm-image-2026-04.active{
    position: absolute;
    top: 10vh;
    left: 0;
    z-index: 1;

}

.anm-image-2026-04 > div.anm-bar{

    position: relative;
          width: 35vw;
    height: 75vh;  
}
.anm-image-2026-04.active div.image-bg{
    background-image: url(/img/webp/2026_02_01.webp);
    background-position: 40% 40%;
    background-size: cover;
}
.anm-image-2026-05{
    position: absolute;
    right: -100%;

}
.anm-image-2026-05.active{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

}

.anm-image-2026-05.active div.image-bg{

    background-image: url(/img/webp/2026_02_02.webp);
    background-position: 40% 60%;
    background-size: 150%;
}
.anm-image-2026-05 > div.anm-bar{

    position: relative;
          width: 20vw;
    height: 38vh;  
}
.anm-image-2026-06{
    position: absolute;
    right: -100%;

}
.anm-image-2026-06.active{
    position: absolute;
    top: 42vh;
    right: 0;
    z-index: 1;
}

.anm-image-2026-06.active div.image-bg{

    background-image: url(/img/webp/2026_02_03.webp);
    background-position: 50% 50%;
    background-size: 110%;
}
.anm-image-2026-06 > div.anm-bar{

    position: relative;
width: 30vw;
    height: 30vh;
}

.anm-image-2026-07{
    position: absolute;
    left: -100%;

}
.anm-image-2026-07.active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.anm-image-2026-07.active div.image-bg{

    background-image: url(/img/webp/2026_02_04.webp);
    background-position: 50% 50%;
    background-size: cover;
}
.anm-image-2026-07 > div.anm-bar{

    position: relative;  
    width: 30vw;
    height: 50vh; 

}
.anm-image-2026-08{
    position: absolute;
    right: -100%;

}
.anm-image-2026-08.active{
    position: absolute;
    top: 20vh;
    right: 0;
    z-index: 1;
}


.anm-image-2026-08.active div.image-bg{

    background-image: url(/img/webp/2026_02_05.webp);
    background-position: 50% 60%;
    background-size: 100%;
}
.anm-image-2026-08 > div.anm-bar{

    position: relative;
    width: 55vw;
    height: 40vh;
}

.anm-image-2026-09{
    position: absolute;
    left: -100%;

}
.anm-image-2026-09.active{
    position: absolute;
    top: 62vh;
    left: 0;
    z-index: 1;
}

.anm-image-2026-09.active div.image-bg{

    background-image: url(/img/webp/2026_02_06.webp);
    background-position: 0 50%;
    background-size: 100%;
}
.anm-image-2026-09 > div.anm-bar{

    position: relative;
    width: 36vw;
    height: 30vh;
}




.anm-image-2026-03-01{
    position: absolute;
    left: -100%;

}

.anm-image-2026-03-01.active{
    position: absolute;
    top: 10vh;
    left: 0;
    z-index: 1;

}

.anm-image-2026-03-01 > div.anm-bar{

    position: relative;
          width: 35vw;
    height: 60vh;  
}
.anm-image-2026-03-01.active div.image-bg{
    background-image: url(/img/webp/2026_03_01.webp);
    background-position: 40% 40%;
    background-size: cover;
}


/* /comment */

.image-anm .bg-image-comment{
    position: absolute;
    z-index: 1;
    bottom: .5rem;
    left: 0.5rem;
        padding: .25rem .25rem;
}

.image-anm .bg-image-comment p{
    font-size: var(--fs-small);
    color: rgba(var(--color-yellow), 1);
    background-color: rgba(var(--color-black), 1);
    display: inline;

    line-height: 1.75rem;
}

.image-anm div.image-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
        filter: saturate(0.4);
}
.image-anm div.image-bg::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-yellow), .1);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    z-index: 2;
    background-image: radial-gradient(rgba(var(--color-black), .1) 50%, transparent 51%), radial-gradient(rgba(var(--color-black), .1) 50%, transparent 51%);
}


.image-anm.active{
            transition: ease-in-out .2s;
}
.image-anm > div.anm-bar{

    position: relative;
}

.image-anm > div.anm-bar::before{
    content: '';
    background-color: rgba(var(--color-yellow), 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
        z-index: 1;
}
.image-anm.active > div.anm-bar::before{
    content: '';
    background-color: rgba(var(--color-yellow), 1);
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
        width: 0px;
    height: 100%;
        transition: ease-in-out .5s;
}
.image_01_g{
    max-width: 215px;
    width: 100%;
}
.image_01_b{
    max-width: 100px;
    width: 100%;
}
.image_02_g{
    max-width: 215px;
    width: 100%;
}
.image_02_b{
    max-width: 100px;
    width: 100%;
}
.image_03_g{
    max-width: 215px;
    width: 100%;
}
.image_03_b{
    max-width: 90px;
    width: 100%;
}
.image_04_g{
    max-width: 215px;
    width: 100%;
}
.image_04_b{
    max-width: 120px;
    width: 100%;
}
.features-01-image{
       max-width: 640px;
    width: 100%; 
}
.features-02-image{
       max-width: 840px;
    width: 100%; 
}
.features-03-image{
        max-width: 840px;
    width: 100%;
}
.features-04-image{
    max-width: 640px;
    width: 100%;
    height: auto;

}
.features-05-image{
    max-width: 640px;
    width: 100%;
    height: auto;
    padding: 0 0 5rem;
}
.features-06-image{
width: 640px;
    max-width: 100%;
    height: auto;

}
.image-anm-svg{
    position: relative;
    top: -2rem;
    opacity: .75;
    transition: all .2s;
    filter: invert(1);
}
.image-anm-svg.active{
    position: relative;
    top: 0;
    opacity: 1;    
    transition: all .2s;
    filter: invert(0);

}
.machine-images .image-anm-svg.active{
    mix-blend-mode: multiply;

}

 img.anm-top{
    filter: blur(2rem);

    transition: ease-in .2s;
}
 img.anm-top.active{
   filter: blur(0);

    transition: ease-in .2s;
}
 img.anm-sub{
    filter: blur(10rem);

    transition: all .4s;
}
 img.anm-sub.active{
    filter: blur(0);

    transition: all .4s;
}

@media screen and (max-width: 1024px) {
    .anim-type-1{
        background-position: bottom left;
    }
    .anim-type-1.contact-bg{
        background-position: top left;
    }
    .anim-type-1-A.contact-bg{
    top: inherit;
    right: inherit;
    left: -50vw;
    bottom: 0;
    width: 200vw;
    background-position: bottom;
    }
    .anim-type-5{
            width: 200vw;
            left: 0;
            background-position: top right;
    }

    .anim-type-5-A{
            width: 200vw;
            left: 0;
            background-position: top right;
            top: -10%;
    }
        .anm-image-22 > div.anm-bar,
    .anm-image-10 > div.anm-bar,
    .anm-image-03 > div.anm-bar {

        width: 75vw;
    }

    .anm-image-05 > div.anm-bar{
            width: 30vw;
    }
        .anm-image-07 > div.anm-bar,
    .anm-image-23 > div.anm-bar,
    .anm-image-14 > div.anm-bar,
    .anm-image-13 > div.anm-bar {
        width: 30vw;

    }

        .anm-image-14.active div.image-bg,
        .anm-image-13.active div.image-bg{
                    background-size: cover;
        }

    .features-title span:first-child{
        color: rgba(var(--color-white), 1);
    }    

.anm-image-2026-04.active{
    top: 5vh;
}



.anm-image-2026-04 > div.anm-bar {

    width: 50vw;
    height: 60vh;
}

.anm-image-2026-08 > div.anm-bar {
    width: 35vw;
    height: 25vh;
}

.anm-image-2026-07 > div.anm-bar {
    width: 60vw;
    height: 50vh;
}

.anm-image-2026-09.active {
    left: inherit;
    right: 0;
}
.anm-image-2026-05 > div.anm-bar {
    width: 40vw;
    height: 38vh;
}

.anm-image-2026-03-01 > div.anm-bar {

    width: 50vw;
    height: 60vh;
}
.image-anm .bg-image-comment p{
    line-height: 0;
    font-size: var(--fs-x-small);
}

}