.logo_anime{
    width: 60%;
    margin: auto;
}
/* 正しいセレクタとレスポンシブな例 */
.logo_anime svg{
    /* デフォルト：コンテナ幅に合わせて横幅100%で縮尺 */
    width: 100%;
    height: auto; /* viewBoxがある場合に比率を保持 */
    display: block; /* imgと同じ挙動にする */
}

/* 固定サイズにしたい場合の例 */
.svg-fixed {
    width: 500px; /* 任意のpx指定 */
    height: 300px; /* 任意のpx指定 */
}

/* 高さだけ指定して幅を自動調整したい場合 */
.svg-height-only{
    width: auto;
    height: 200px;
}

/* 親要素の背景として使うSVG（外部ファイルをbackground-image等で読み込む場合） */
.svg-bg{
    background-size: contain; /* cover でも可 */
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 200px; /* コンテナの高さを指定 */
}

/* objectやimgタグで使う場合の例 */
.svg-img{
    width: 100%;
    height: auto;
    max-width: 600px; /* 最大幅の制限 */
}







/***************************************************
 * Generated by SVG Artista on 10/15/2025, 4:50:23 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 227.58932495117188px;
  stroke-dasharray: 227.58932495117188px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 455.17864990234375px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-2 {
  stroke-dashoffset: 116.75177001953125px;
  stroke-dasharray: 116.75177001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 233.5035400390625px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-3 {
  stroke-dashoffset: 197.37631225585938px;
  stroke-dasharray: 197.37631225585938px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 394.75262451171875px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-4 {
  stroke-dashoffset: 247.35443115234375px;
  stroke-dasharray: 247.35443115234375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 494.7088623046875px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-5 {
  stroke-dashoffset: 234.8216094970703px;
  stroke-dasharray: 234.8216094970703px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 469.6432189941406px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-6 {
  stroke-dashoffset: 206.3134307861328px;
  stroke-dasharray: 206.3134307861328px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 412.6268615722656px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-7 {
  stroke-dashoffset: 116.7518081665039px;
  stroke-dasharray: 116.7518081665039px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 233.5036163330078px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-8 {
  stroke-dashoffset: 205.28929138183594px;
  stroke-dasharray: 205.28929138183594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 410.5785827636719px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-9 {
  stroke-dashoffset: 147.25775146484375px;
  stroke-dasharray: 147.25775146484375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 294.5155029296875px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-10 {
  stroke-dashoffset: 32.728219985961914px;
  stroke-dasharray: 32.728219985961914px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 65.45643997192383px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-11 {
  stroke-dashoffset: 87.79998779296875px;
  stroke-dasharray: 87.79998779296875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 175.5999755859375px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-12 {
  stroke-dashoffset: 179.9730682373047px;
  stroke-dasharray: 179.9730682373047px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 359.9461364746094px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-13 {
  stroke-dashoffset: 189.31161499023438px;
  stroke-dasharray: 189.31161499023438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 378.62322998046875px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-14 {
  stroke-dashoffset: 169.91383361816406px;
  stroke-dasharray: 169.91383361816406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 339.8276672363281px;
  fill: rgb(62, 58, 57);
}

svg .svg-elem-15 {
  stroke-dashoffset: 1145.1273193359375px;
  stroke-dasharray: 1145.1273193359375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 2290.254638671875px;
  fill: rgb(62, 58, 57);
}