@charset "UTF-8";
/* =============================================================================
Reset style
========================================================================== */
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html { color: #000; background: #FFF; font-size: 16px;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

a, a:hover, a:active, a:visited { text-decoration: none; outline: none; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 100%; }

legend { color: #000; }

#yui3-css-stamp.cssreset { display: none; }

*, *:before, *:after { -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

/* =============================================================================
Basic style
========================================================================== */

body { font-family: "Noto Sans JP", sans-serif; color: #333333; overflow-x: hidden; word-break: break-all;background-color: #f1f1f1;background-image: url("../img/bg.png"); }

a { display: block; color: #fff; transition: opacity .3s; }

a:hover { opacity: .7; }

img { display: block; vertical-align: bottom; max-width: 100%; width: auto; height: auto;}


/*==============================================================================
Media
============================================================================= */
@media screen and (min-width: 761px) { 
    .sp-only { display: none !important; }
 }

@media screen and (max-width: 760px) {
    html { font-size: 13.333333vw; }
    body { font-size: 0.3rem; }
    .pc-only { display: none !important; } }

/*==============================================================================
common
============================================================================= */

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

    .wrap{
        width: 980px;
        margin: 0 auto;
        overflow: hidden;
    }

    a.link{
        display:block;
        width: 80%;
        margin: 0 auto 20px;
        text-align: center;
    }

}

@media screen and (max-width: 980px) {

    .wrap{
        overflow: hidden;
    }

}

/*  header  */

@media screen and (min-width: 981px) { 
    .openbtn{display: none;}

    .header{
        position: fixed;
        top:20px;
        margin: 0;
        display: flex;
        width: 980px;
        z-index: 100;
    }
    .header h1{
        flex-grow: 4;
    }
    .header h1 img{
        width: 103px;
    }

    .header ul{
        display: flex;
        background-color: #fff;
        height: 64px;
        border-radius: 32px;
        align-items:center;
    }

    .header .gnavi li{
        margin:auto 25px;
    }
    .header .gnavi li img{
        height: 19px;
    }

    .fv-set{
        position: relative;
        height:750px;
    }
    #anime{
        position: absolute;
        top:-55px;
        left:20px;
        z-index: 1;
    }
    .fv-img{
        position: absolute;
        width: 310px;
        top:200px;
        right:200px;
        z-index: 1;
    }
    .scroll{
        position: absolute;
        bottom:50px;
        right:0;
        left:0;
        width: 104px;
        margin: auto;
    }
}

@media screen and (min-width: 761px) and (max-width: 980px) {
    .header{
        padding: 5vw;
        display: flex;
        width: 100%;
        z-index: 100;
    }
    .header h1{
        flex-grow: 4;
    }
    .header h1 img{
        width: 103px;
    }
    /* ボタン全体 */
    .openbtn {
    position: fixed;
    top:5vw;
    right:5vw;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001; /* メニューより手前に */
    }
    .fv-set{
        position: relative;
        display: flex;
        align-items: center;
        padding-bottom: 30vw;
    }
    #anime{}
    .fv-img{
        width: 50vw;
    }
    .scroll{
        position: absolute;
        bottom:10vw;
        left:0;
        right:0;
        margin: 0 auto;
        width: 10vw;
        margin: auto;
    }

    /* 3本線 */
    .openbtn span {
    position: absolute;
    left: 5px;
    right: 5px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
    }

    /* 線の位置 */
    .openbtn span:nth-of-type(1) {
    top: 10px;
    }
    .openbtn span:nth-of-type(2) {
    top: 18px;
    }
    .openbtn span:nth-of-type(3) {
    top: 26px;
    }

    /* ----- 開いたとき（バツ状態） ----- */
    .openbtn.active span:nth-of-type(1) {
    top: 18px;
    transform: rotate(45deg);
    }
    .openbtn.active span:nth-of-type(2) {
    opacity: 0;
    }
    .openbtn.active span:nth-of-type(3) {
    top: 18px;
    transform: rotate(-45deg);
    }

    /* ----- メニュー本体（例） ----- */
    .gnavi {
    position: fixed;
    inset: 0;              /* top/right/bottom/left: 0; と同じ */
    background: rgba(255, 255, 255, 0.95);

    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    padding-top: 20vw;
    }
    .gnavi li{
        display: block;
        text-align: center;
    }
    .gnavi li a{
        display: inline-block;
        text-align: center;
    }


    .gnavi li + li {
    margin-top: 16px;
    }

    .gnavi a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    }

    /* メニューの表示状態 */
    .gnavi.active {
    transform: translateX(0);
    }



}
@media screen and (max-width: 760px) {
    .header{
        padding: 5vw;
        display: flex;
        width: 100%;
        z-index: 100;
    }
    .header h1{
        flex-grow: 4;
    }
    .header h1 img{
        width: 103px;
    }
    /* ボタン全体 */
    .openbtn {
    position: fixed;
    top:5vw;
    right:5vw;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001; /* メニューより手前に */
    }
    .fv-set{
        position: relative;
        align-items: center;
        padding-bottom: 30vw;
    }
    #anime{margin: 0 auto;}
    .fv-img{
        width: 70vw;
        margin: 0 auto;
    }
    .scroll{
        position: absolute;
        bottom:10vw;
        left:0;
        right:0;
        margin: 0 auto;
        width: 10vw;
        margin: auto;
    }

    /* 3本線 */
    .openbtn span {
    position: absolute;
    left: 5px;
    right: 5px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
    }

    /* 線の位置 */
    .openbtn span:nth-of-type(1) {
    top: 10px;
    }
    .openbtn span:nth-of-type(2) {
    top: 18px;
    }
    .openbtn span:nth-of-type(3) {
    top: 26px;
    }

    /* ----- 開いたとき（バツ状態） ----- */
    .openbtn.active span:nth-of-type(1) {
    top: 18px;
    transform: rotate(45deg);
    }
    .openbtn.active span:nth-of-type(2) {
    opacity: 0;
    }
    .openbtn.active span:nth-of-type(3) {
    top: 18px;
    transform: rotate(-45deg);
    }

    /* ----- メニュー本体（例） ----- */
    .gnavi {
    position: fixed;
    inset: 0;              /* top/right/bottom/left: 0; と同じ */
    background: rgba(255, 255, 255, 0.95);

    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    padding-top: 20vw;
    }
    .gnavi li{
        display: block;
        text-align: center;
    }
    .gnavi li a{
        display: inline-block;
        text-align: center;
    }


    .gnavi li + li {
    margin-top: 16px;
    }

    .gnavi a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    }

    /* メニューの表示状態 */
    .gnavi.active {
    transform: translateX(0);
    }

}

/* mission */
@media screen and (min-width: 981px) { 
    .block-mission{
        display: flex;
        margin: 150px 0 150px;
        gap: 30px;
        position: relative;
    }

    .img-mission{
        width: 515px;
        box-shadow: -27px 27px 0px 0px rgba(230, 243, 255, 1);
        border-radius: 25px;
    }

    .block-mission h2{
        position: relative;
        left: -300px;
        top:10px;
        margin-bottom: 15px;
    }

     .block-mission h3{
        font-size: 20px;
        margin-bottom: 25px;
     }

    .block-mission h3{
        font-weight: bold;
        margin-bottom: 25px;
    }
}

@media screen and (min-width: 761px) and (max-width: 980px) {
    .block-mission{
        display: flex;
        margin: 10vw 5vw 20vw;
        gap: 30px;
        position: relative;
        align-items: flex-start;
    }

    .img-mission{
        width: 45vw;
        box-shadow: -27px 27px 0px 0px rgba(230, 243, 255, 1);
        border-radius: 25px;
        height: auto;
    }
 

    .block-mission h2{
        position: relative;
        left: -20vw;
        top:10px;
        margin-bottom: 15px;
    }

     .block-mission h3{
        font-size: 20px;
        margin-bottom: 25px;
     }

    .block-mission h3{
        font-weight: bold;
        margin-bottom: 25px;
    }
}

@media screen and (max-width: 760px) {
    .block-mission{
        margin: 10vw 5vw 20vw;
        position: relative;
        align-items: flex-start;
    }

    .img-mission{
        width: 90vw;
        box-shadow: -27px 27px 0px 0px rgba(230, 243, 255, 1);
        border-radius: 25px;
        height: auto;
        position:relative;
        right:-10vw;
    }

    .block-mission h2{
        position: relative;
        top:-10vw;
        margin-bottom: ;
    }

    .block-mission h2 img{
        height: 15vw;
    }

     .block-mission h3{
        font-size: 1.4em;
        margin-bottom: 25px;
     }

    .block-mission h3{
        font-weight: bold;
        margin-bottom: 25px;
    }
}

/* service */
@media screen and (min-width: 981px) { 
    .block-service {
        margin-bottom: 150px;
    }
    .block-service h2{
        text-align: right;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .block-service h2 img{
        display: inline-block;
        width: 382px;
    }
    .block-service h2 span{
        display: block;
    }
    .section-service01,
    .section-service03{
        position: relative;
        margin-bottom: 100px;
    }
    .section-service02{
         position: relative;
        margin-bottom: 50px;
    }
    .txt-service{
        position: absolute;
        background-color: #fff;
        border-radius: 25px;
        padding: 40px;
        width: 55%;
        height:400px;
    }
    .txt-service h3{
        font-weight: bold;
        margin-bottom: 25px;
    }
    .txt-service p{
        line-height: 1.5em;
    }

    .section-service01 .txt-service{
        bottom:-50px;
        right:0;
        z-index:10;
    }

    .section-service02 .txt-service{
        top:0px;
        left:0;
        z-index:10;
        text-align: left;
    }

    .section-service03 .txt-service{
        bottom:-50px;
        right:0;
        z-index:10;
    }

    .img-service01,
    .img-service02,
    .img-service03{
        width: 55%;
    }
    .img-service02{
        display: inline-block;
    }
    .section-service02{
        text-align: right;
        padding-top: 100px;
    }
}

@media screen and (min-width: 761px) and (max-width: 980px) {
    .block-service {
        margin:0 5vw 15vw;
    }
    .block-service h2{
        text-align: right;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .block-service h2 img{
        display: inline-block;
        width: 382px;
    }
    .block-service h2 span{
        display: block;
    }
    .section-service01{
        position: relative;
        margin-bottom: 25vw;
    }
    .section-service02{
         position: relative;
        margin-bottom: 5vw;
    }
    .section-service03{
        position: relative;
        margin-bottom: 20vw;
    }
    .txt-service{
        position: absolute;
        background-color: #fff;
        border-radius: 25px;
        padding: 40px;
        width: 55%;
        height:auto;
    }
    .txt-service h3{
        font-weight: bold;
        margin-bottom: 25px;
    }
    .txt-service p{
        line-height: 1.5em;
    }

    .section-service01 .txt-service{
        bottom:-20vw;
        right:0;
        z-index:10;
    }

    .section-service02 .txt-service{
        top:0px;
        left:0;
        z-index:10;
        text-align: left;
    }

    .section-service03 .txt-service{
        bottom:-50px;
        right:0;
        z-index:10;
    }

    .img-service01,
    .img-service02,
    .img-service03{
        width: 55vw;
    }
    .img-service02{
        display: inline-block;
    }
    .section-service02{
        text-align: right;
        padding-top: 100px;
    }
}

@media screen and (max-width: 760px) { 
    .block-service {
        margin:0 5vw 15vw;
    }
    .block-service h2{
        text-align: right;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .block-service h2 img{
        display: inline-block;
        height:15vw;
    }
    .block-service h2 span{
        display: block;
    }
    .section-service01,
    .section-service02,
    .section-service03{
        position: relative;
        margin-bottom: 10vw;
    }
    .txt-service{
        background-color: #fff;
        border-radius: 25px;
        padding: 10vw;
        margin-top: 3vw;
    }
    .txt-service h3{
        font-weight: 500;
        margin-bottom: 25px;
    }
    .txt-service p{
        line-height: 1.5em;
    }

    .section-service01 .txt-service{
        position: relative;
        left:-10vw;
        
    }

    .section-service02 .txt-service{
        position: relative;
        right:-10vw;
       

    }

    .section-service03 .txt-service{
        position: relative;
        left:-10vw;
        
    }
    .img-service01{
        position: relative;
        right: -10vw;
    }

    .img-service02{
        position: relative;
        left: -10vw;
    }

    .img-service03{
        position: relative;
        right: -10vw;
    }

    .img-service02{
        display: inline-block;
    }


}

/* member */
@media screen and (min-width: 981px) { 
    .block-member{
        margin-bottom: 150px;
    }
    .block-member h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-member h2 img{
        width: 378px;
        display: inline-block;
    }

    .section-member{
        background-color: #fff;
        border-radius: 25px;
        padding: 30px;
        display: flex;
        margin-bottom: 50px;
    }
    .img-member{
        border-radius: 15px;
        width: 335px;
        height: 202px;
    }
    .txt-member{
        padding-left: 30px;
    }

    .txt-member h3{
        font-weight: bold;
        font-size: 23px;
        margin-bottom: 20px;
    }
    .txt-member h3 span{
        font-size:14px;
        display: block;
    }
    .subinfo-member{
        margin-bottom: 30px;
    }

    .txt-member p{line-height: 1.6em;}

    

}

@media screen and (min-width: 761px) and (max-width: 980px) {
    .block-member{
        margin:0 5vw 20vw;
    }
    .block-member h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-member h2 img{
        width: 378px;
        display: inline-block;
    }

    .section-member{
        background-color: #fff;
        border-radius: 25px;
        padding: 30px;
        margin-bottom: 50px;
    }
    .img-member{
        border-radius: 15px;
        width: 100%;
        margin-bottom: 5vw;
    }

    .txt-member h3{
        font-weight: bold;
        font-size: 23px;
        margin-bottom: 20px;
    }
    .txt-member h3 span{
        font-size:14px;
        display: block;
    }
    .subinfo-member{
        margin-bottom: 30px;
    }

    .txt-member p{line-height: 1.6em;}
}

@media screen and (max-width: 760px) {
    .block-member{
        margin:0 5vw 20vw;
    }
    .block-member h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-member h2 img{
        display: inline-block;
        height:12vw;
    }

    .section-member{
        background-color: #fff;
        border-radius: 25px;
        padding: 30px;
        margin-bottom: 50px;
    }
    .img-member{
        border-radius: 15px;
        width: 100%;
        margin-bottom: 5vw;
    }

    .txt-member h3{
        font-weight: bold;
        font-size: 23px;
        margin-bottom: 20px;
    }
    .txt-member h3 span{
        font-size:14px;
        display: block;
    }
    .subinfo-member{
        margin-bottom: 30px;
    }

    .txt-member p{line-height: 1.6em;}
}





/* information */
@media screen and (min-width: 981px) {
    .block-information{
        margin-bottom: 150px;
    }
    .block-information h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-information h2 img{
        width: 630px;
        display: inline-block;
    }

        .block-information ul{
        background-color: #fff;
        padding: 50px 50px 0;
        border-radius: 25px;
    }

    .block-information ul li{
        padding-bottom: 50px;
        display: flex;
        gap: 50px;
        flex-direction: row;
    }
    .block-information ul li a:link,
    .block-information ul li a:visited{
        color:#333;
        text-decoration: none;
        text-align: left;
    }
    .block-information ul li a:hover{
        background-color: #e6f3ff;
        colof:#333;
    }
    .block-information ul li .info-date{
        width: 100px;
    }

     .block-information ul li .info-txt{
        flex: 1;
    }

}


@media screen and (min-width: 761px) and (max-width: 980px) {
    .block-information{
        margin:0 5vw 20vw;
    }
    .block-information h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-information h2 img{
        width: 630px;
        display: inline-block;
    }

        .block-information ul{
        background-color: #fff;
        padding: 50px 50px 0;
        border-radius: 25px;
    }

    .block-information ul li{
        padding-bottom: 50px;
        display: flex;
        gap: 50px;
        flex-direction: row;
    }
    .block-information ul li a:link,
    .block-information ul li a:visited{
        color:#333;
        text-decoration: none;
        text-align: left;
    }
    .block-information ul li a:hover{
        background-color: #e6f3ff;
        colof:#333;
    }
    .block-information ul li .info-date{
        width: 100px;
    }

     .block-information ul li .info-txt{
        flex: 1;
    }

}

@media screen and (max-width: 760px) {
    .block-information{
        margin:0 5vw 20vw;
    }
    .block-information h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-information h2 img{
        display: inline-block;
        height:12vw;
    }

    .block-information ul{
        background-color: #fff;
        padding: 5vw 5vw 0;
        border-radius: 25px;
    }

    .block-information ul li{
        padding-bottom: 50px;
        display: flex;
        gap: 50px;
        flex-direction: row;
    }
    .block-information ul li a:link,
    .block-information ul li a:visited{
        color:#333;
        text-decoration: none;
        text-align: left;
    }
    .block-information ul li a:hover{
        background-color: #e6f3ff;
        colof:#333;
    }
    .block-information ul li .info-date{
        width: 20vw;
    }

     .block-information ul li .info-txt{
        flex: 1;
    }

}



/* about */
@media screen and (min-width: 981px) {
    .block-about{
        margin-bottom: 150px;
    }
    .block-about h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-about h2 img{
        width: 297px;
        display: inline-block;
    }

    
    .block-about dl{
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;	
        width: 100%;
        border-top: 1px solid #fff;
        border-bottom: none;
    }
    .block-about dl dt{
        padding: 20px 50px ;
        width: 250px;
        border-bottom: 1px solid #fff;
    }
    .block-about dl dd{
        padding: 20px 50px;
        width: calc(100% - 250px);
        border-bottom: 1px solid #fff;
    }
    
}

@media screen and (min-width: 761px) and (max-width: 980px) {
    .block-about{
        margin:0 5vw 20vw;
    }
    .block-about h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-about h2 img{
        width: 297px;
        display: inline-block;
    }

    
    .block-about dl{
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;	
        width: 100%;
        border-top: 1px solid #fff;
        border-bottom: none;
    }
    .block-about dl dt{
        padding: 20px 50px ;
        width: 250px;
        border-bottom: 1px solid #fff;
    }
    .block-about dl dd{
        padding: 20px 50px;
        width: calc(100% - 250px);
        border-bottom: 1px solid #fff;
    }
    
}


@media screen and (max-width: 760px) {
    .block-about{
        margin:0 5vw 20vw;
    }
    .block-about h2{
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .block-about h2 img{
        display: inline-block;
        height:12vw;
    }

    
    .block-about dl{
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;	
        width: 100%;
        border-top: 1px solid #fff;
        border-bottom: none;
    }
    .block-about dl dt{
        padding: 2vw 5vw;
        width: 30vw;
        border-bottom: 1px solid #fff;
    }
    .block-about dl dd{
        padding: 2vw 5vw;
        width: calc(90vw - 35vw);
        border-bottom: 1px solid #fff;
    }
    
}


/* footer */
@media screen and (min-width: 981px) {
    .footer{
        padding: 60px;
        font-size: 14px;
        background-color: #333;
    }
    .footer .btm-logo{
        width: 104px;
    }
    .footer ul{
        width: 305px;
        float: right;

    }

    .footer ul li{
        display: inline-block;
        width: 150px;
        margin-bottom: 20px;
    }

    .footer ul li a:link{
        color: #fff;
    }
    footer{
        clear: both;
        color: #fff;
        text-align: center;
    }

    .pagetop{
        width: 70px;
        position: fixed;
        right:20px;
        bottom:20px;
    }
}
@media screen and (min-width: 761px) and (max-width: 980px) {
    .footer{
        padding: 60px;
        font-size: 14px;
        background-color: #333;
    }
    .footer .btm-logo{
        width: 104px;
    }
    .footer ul{
        width: 305px;
        float: right;

    }

    .footer ul li{
        display: inline-block;
        width: 150px;
        margin-bottom: 20px;
    }

    .footer ul li a:link{
        color: #fff;
    }
    footer{
        clear: both;
        color: #fff;
        text-align: center;
    }

    .pagetop{
        width: 70px;
        position: fixed;
        right:20px;
        bottom:20px;
    }
}
@media screen and (max-width: 761px) {
    .footer{
        padding: 5vw;
        font-size: 14px;
        background-color: #333;
    }
    .footer .btm-logo{
        width: 20vw;
    }
    .footer ul{
        width: 55vw;
        float: right;

    }

    .footer ul li{
        display: inline-block;
        width: 25vw;
        margin-bottom: 20px;
    }

    .footer ul li a:link{
        color: #fff;
    }
    footer{
        clear: both;
        color: #fff;
        text-align: center;
    }

    .pagetop{
        width: 70px;
        position: fixed;
        right:20px;
        bottom:20px;
    }
}



/* anime */
@media screen and (min-width: 981px) { 
    #anime{width: 403px;}
    .st0 {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 32px;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
    #svg-animation{
        max-width: 100%;
        height: auto;
    }

    .displayed.fadeup.is-animated {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    }
    
    @keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
    }



    .box-01.displayed{
    animation: fadeInLeft 1s forwards;
    }
    .box-02.displayed{
    animation: fadeInRight 1s forwards;
    }

    @keyframes fadeInLeft{
    0%{transform: translateX(-100px);}
    100%{transform: translateX(0);}
    }
    @keyframes fadeInRight{
    0%{transform: translateX(100px);}
    100%{transform: translateX(0);}
    }
}
@media screen and (min-width: 451px) and (max-width: 980px) {
    #anime{width: 40vw;}
    .st0 {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 32px;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
    #svg-animation{
        max-width: 100%;
        height: auto;
    }

    .displayed.fadeup.is-animated {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    }
    
    @keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
    }



    .box-01.displayed{
    animation: fadeInLeft 1s forwards;
    }
    .box-02.displayed{
    animation: fadeInRight 1s forwards;
    }

    @keyframes fadeInLeft{
    0%{transform: translateX(-100px);}
    100%{transform: translateX(0);}
    }
    @keyframes fadeInRight{
    0%{transform: translateX(100px);}
    100%{transform: translateX(0);}
    }
}

@media screen and (max-width: 760px) {
    #anime{width: 30vw;}
    .st0 {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 32px;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
    #svg-animation{
        max-width: 100%;
        height: auto;
    }

    .displayed.fadeup.is-animated {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    }
    
    @keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
    }



    .box-01.displayed{
    animation: fadeInLeft 1s forwards;
    }
    .box-02.displayed{
    animation: fadeInRight 1s forwards;
    }

    @keyframes fadeInLeft{
    0%{transform: translateX(-100px);}
    100%{transform: translateX(0);}
    }
    @keyframes fadeInRight{
    0%{transform: translateX(100px);}
    100%{transform: translateX(0);}
    }
}