*{
  margin:0;
  padding:0;
  list-style-type: none;
}

/* メインボックス */
.loading {
  position: fixed;
  z-index:9999999999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:#fff;
  background-size:cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mainbox 1.5s 8s forwards;
  opacity: 1;
  padding: 0;
}

@keyframes mainbox {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/* メインボックス */

/* ロゴ */
.loading__logo {
  opacity: 0;
  animation: logo_fade 2.2s 0.5s forwards;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 350px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
/* ロゴ */

/* 検索ボックス */
.loading_txt_box{
  max-width: 780px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.loading__box {
    opacity: 0;
    animation: box 1.0s 3.5s forwards;
    width: 100%;
}
@keyframes box {
  0% {
    opacity: 0;
  }


  100% {
    opacity: 1;

  }
}
/* 検索ボックス */

/* 文字列 */
.loading_txt_box_inner{
  position: relative;
  width:100%;
}





.font01,
.font02,
.font03,
.font04,
.font05,
.font06,
.font07,
.font08,
.font09,
.font10,
.font11,
.font12,
.font13{
  opacity: 0;
  max-width: 45px;
  position: absolute;
  top: 43%;
  left: 8%;
  transform: translate(-50%, 0);
  width: 5%;
}


.font01{
  animation: font01 0s 4.0s forwards;
  transform: translate(-70%, -30%);
}
@keyframes font01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.font02{
  animation: font02 0s 4.1s forwards;
  transform: translate(33%, -30%);
}
@keyframes font02 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font03{
  animation: font03 0s 4.2s forwards;
  transform: translate(136%, -30%);
}
@keyframes font03 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font04{
  animation: font04 0s 4.5s forwards;
  transform: translate(239%, -29%);
}
@keyframes font04 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font05{
  animation: font05 0s 4.6s forwards;
  transform: translate(342%, -29%);
}
@keyframes font05 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font06{
  animation: font06 0s 4.7s forwards;
  transform: translate(443%, -30%);
}
@keyframes font06 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font07{
  animation: font07 0s 5.0s forwards;
  transform: translate(542%, -30%);
}
@keyframes font07 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font08{
  animation: font08 0s 5.1s forwards;
  transform: translate(642%, -34%);
}
@keyframes font08 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font09{
  animation: font09 0s 5.5s forwards;
  transform: translate(733%, -31%);
}
@keyframes font09 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font10{
  animation: font10 0s 5.6s forwards;
  transform: translate(823%, -30%);
}
@keyframes font10 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font11{
  animation: font11 0s 5.7s forwards;
  transform: translate(918%, -30%);
}
@keyframes font11 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font12{
  animation: font12 0s 6.0s forwards;
  transform: translate(1005%, -30%);
}
@keyframes font12 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font13{
  animation: font13 0s 6.1s forwards;
  transform: translate(1073%, -30%);
}
@keyframes font13 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/**/
.font15,
.font16,
.font17,
.font18,
.font19,
.font20,
.font21,
.font22,
.font23,
.font24,
.font25,
.font26,
.font27,
.font28{
  opacity: 0;
  max-width: 45px;
  position: absolute;
  top: 43%;
  left: 8%;
  transform: translate(-50%, 0);
  width: 5%;
}



.font15{
  animation: font15 0s 4.0s forwards;
  transform: translate(-75%, -30%);
}
@keyframes font15 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.font16{
  animation: font16 0s 4.1s forwards;
  transform: translate(0%, -30%)
}
@keyframes font16 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font17{
  animation: font17 0s 4.2s forwards;
  transform: translate(68%, -30%);
}
@keyframes font17 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font18{
  animation: font18 0s 4.3s forwards;
  transform: translate(135%, -30%);
}
@keyframes font18 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.font19{
  animation: font19 0s 4.4s forwards;
  transform: translate(187%, -28%);
}
@keyframes font19 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font20{
  animation: font20 0s 4.7s forwards;
  transform: translate(270%, -30%);
}
@keyframes font20 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font21{
  animation: font21 0s 4.8s forwards;
  transform: translate(376%, -29%);
}
@keyframes font21 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font22{
  animation: font22 0s 5.2s forwards;
  transform: translate(482%, -30%);
}
@keyframes font22 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font23{
  animation: font23 0s 5.3s forwards;
  transform: translate(585%, -31%);
}
@keyframes font23 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font24{
  animation: font24 0s 5.4s forwards;
  transform: translate(691%, -30%);
}
@keyframes font24 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font25{
  animation: font25 0s 5.7s forwards;
  transform: translate(722%, -29%);
}
@keyframes font25 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font26{
  animation: font26 0s 6.0s forwards;
  transform: translate(825%, -30%);
}
@keyframes font26 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font27{
  animation: font27 0s 6.1s forwards;
  transform: translate(928%, -30%);
}
@keyframes font27 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.font28{
  animation: font28 0s 6.2s forwards;
  transform: translate(1032%, -30%);
}
@keyframes font28 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




/**/
/*
.txt_anime{
  opacity: 1;
  animation: txt_anime 1.0s 7.6s forwards;
}
@keyframes txt_anime {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
*/
.font14 {
    opacity: 0;
    max-width: 510px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
    width: 66%;
    animation: font14 1.0s 7.7s forwards;
}
@keyframes font14 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/* 文字列 */

/* 家族背景 */
.loading_inner {
  width:100%;
  height:100%;
  animation: fadeIn 1.0s 5.9s forwards;
  z-index:0;
  opacity: 0;
  background:url(https://www.kanachu-fudosan.jp/app/uploads/sites/899/2025/01/youkoudai_load.webp)no-repeat;
  background-size:cover;
  background-position:center;
}

@media (max-width: 768px) {
.loading_inner {
  background-position: 40% 0%;
}
}
@keyframes fadeIn{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/* 家族背景　*/


/* svg */


/***************************************************
 * Generated by SVG Artista on 10/19/2024, 11:00:52 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 165.697998046875px;
    stroke-dasharray: 165.697998046875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 165.697998046875px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 165.697998046875px;
    stroke-dasharray: 165.697998046875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 165.697998046875px;
  }
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 0.9s linear 0.3s both, animate-svg-fill-1 1s linear 1s both;
          animation: animate-svg-stroke-1 0.9s linear 0.3s both, animate-svg-fill-1 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 179.2323455810547px;
    stroke-dasharray: 179.2323455810547px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 179.2323455810547px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 179.2323455810547px;
    stroke-dasharray: 179.2323455810547px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 179.2323455810547px;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 0.9s linear 0.3s both, animate-svg-fill-2 1s linear 1s both;
          animation: animate-svg-stroke-2 0.9s linear 0.3s both, animate-svg-fill-2 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 131.5085906982422px;
    stroke-dasharray: 131.5085906982422px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 131.5085906982422px;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 131.5085906982422px;
    stroke-dasharray: 131.5085906982422px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 131.5085906982422px;
  }
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 0.9s linear 0.3s both, animate-svg-fill-3 1s linear 1s both;
          animation: animate-svg-stroke-3 0.9s linear 0.3s both, animate-svg-fill-3 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 1680.87890625px;
    stroke-dasharray: 1680.87890625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1680.87890625px;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 1680.87890625px;
    stroke-dasharray: 1680.87890625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1680.87890625px;
  }
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 0.9s linear 0.3s both, animate-svg-fill-4 1s linear 1s both;
          animation: animate-svg-stroke-4 0.9s linear 0.3s both, animate-svg-fill-4 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 422.8527526855469px;
    stroke-dasharray: 422.8527526855469px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 422.8527526855469px;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 422.8527526855469px;
    stroke-dasharray: 422.8527526855469px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 422.8527526855469px;
  }
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 0.9s linear 0.3s both, animate-svg-fill-5 1s linear 1s both;
          animation: animate-svg-stroke-5 0.9s linear 0.3s both, animate-svg-fill-5 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 235.9132080078125px;
    stroke-dasharray: 235.9132080078125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 235.9132080078125px;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 235.9132080078125px;
    stroke-dasharray: 235.9132080078125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 235.9132080078125px;
  }
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 0.9s linear 0.3s both, animate-svg-fill-6 1s linear 1s both;
          animation: animate-svg-stroke-6 0.9s linear 0.3s both, animate-svg-fill-6 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 386.0225524902344px;
    stroke-dasharray: 386.0225524902344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 386.0225524902344px;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 386.0225524902344px;
    stroke-dasharray: 386.0225524902344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 386.0225524902344px;
  }
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 0.9s linear 0.3s both, animate-svg-fill-7 1s linear 1s both;
          animation: animate-svg-stroke-7 0.9s linear 0.3s both, animate-svg-fill-7 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 312.3172912597656px;
    stroke-dasharray: 312.3172912597656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 312.3172912597656px;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 312.3172912597656px;
    stroke-dasharray: 312.3172912597656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 312.3172912597656px;
  }
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 0.9s linear 0.3s both, animate-svg-fill-8 1s linear 1s both;
          animation: animate-svg-stroke-8 0.9s linear 0.3s both, animate-svg-fill-8 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 394.2473449707031px;
    stroke-dasharray: 394.2473449707031px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 394.2473449707031px;
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 394.2473449707031px;
    stroke-dasharray: 394.2473449707031px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 394.2473449707031px;
  }
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 0.9s linear 0.3s both, animate-svg-fill-9 1s linear 1s both;
          animation: animate-svg-stroke-9 0.9s linear 0.3s both, animate-svg-fill-9 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 509.5774841308594px;
    stroke-dasharray: 509.5774841308594px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 509.5774841308594px;
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 509.5774841308594px;
    stroke-dasharray: 509.5774841308594px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 509.5774841308594px;
  }
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 0.9s linear 0.3s both,
                       animate-svg-fill-10 1s linear 1s both;
          animation: animate-svg-stroke-10 0.9s linear 0.3s both,
               animate-svg-fill-10 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 510.0119934082031px;
    stroke-dasharray: 510.0119934082031px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 510.0119934082031px;
  }
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 510.0119934082031px;
    stroke-dasharray: 510.0119934082031px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 510.0119934082031px;
  }
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 0.9s linear 0.3s both,
                       animate-svg-fill-11 1s linear 1s both;
          animation: animate-svg-stroke-11 0.9s linear 0.3s both,
               animate-svg-fill-11 1s linear 1s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 553.19580078125px;
    stroke-dasharray: 553.19580078125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 553.19580078125px;
  }
}

@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 553.19580078125px;
    stroke-dasharray: 553.19580078125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 553.19580078125px;
  }
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 0.9s linear 0.3s both,
                       animate-svg-fill-12 1s linear 1s both;
          animation: animate-svg-stroke-12 0.9s linear 0.3s both,
               animate-svg-fill-12 1s linear 1s both;
}
/* svg */