@charset "UTF-8";
/* ローディング画面のスタイル */
#loader {
    display: none; /* デフォルトでは非表示 */
    position: fixed; /* ビューポートに対して固定位置 */
    top: 50%; /* ビューポートの中央に垂直位置を設定 */
    left: 50%; /* ビューポートの中央に水平位置を設定 */
    transform: translate(-50%, -50%); /* 中央に配置するための変形 */
    z-index: 1000; /* 他の要素より前面に表示 */
}

#loader svg {
    max-width: 80vw; /* ビューポート幅の80%を最大幅に設定 */
    max-height: 80vh; /* ビューポート高さの80%を最大高さに設定 */
    width: auto; /* 自動調整 */
    height: auto; /* 自動調整 */
}

/* フェード効果のスタイル */
#fade {
    width: 100%; /* ビューポート全体の幅 */
    height: 100%; /* ビューポート全体の高さ */
    display: none; /* デフォルトでは非表示 */
    background-color: #fff; /* 背景色を白に設定 */
    position: fixed; /* ビューポートに対して固定位置 */
    top: 0; /* ビューポートの上端に配置 */
    left: 0; /* ビューポートの左端に配置 */
    z-index: 999; /* ローディング画面よりも後ろに表示 */
}




/***************************************************
 * Generated by SVG Artista on 7/24/2024, 10:02:26 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

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

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-2 {
  stroke-dashoffset: 877.6380004882812px;
  stroke-dasharray: 877.6380004882812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

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

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-4 {
  stroke-dashoffset: 1640.4833984375px;
  stroke-dasharray: 1640.4833984375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7000000000000001s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7000000000000001s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 1798.529296875px;
  stroke-dasharray: 1798.529296875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

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

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}