@charset "utf-8";

.top-new{
  position:relative;
  padding:10rem 0;
  margin: 100px 0;
}

.top-new-txt{
  max-width:500px;
  margin:0 auto 3rem;
      width: 55%;
  }

.top-new .btn {
    margin: 1rem auto 0;
    color: #433E3B;
    background: #fff;
    border-color: #fff;
}

.top-new .btn:hover {
    color: #EF7946;
    background: #FFF7E6;
    border-color: #EF7946;
}

.top-new .btn::before {
    color: rgb(67, 62, 59);
}

.top-new .btn:hover::before {
  color:#EF7946;
}

.top-new-bg{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  object-fit:cover;
      z-index: -1;
}

@media screen and (max-width: 767px) {
.top-new{
  padding:5rem 0;
  margin: 50px 0;
}
.top-new-txt{
  margin:0 auto 2rem;
      width: 70%;
  }
}

.top-about-text img{
  width:70%;
  margin: 0 auto 1rem;
}

.top-about-text:has(img) h2{
margin-bottom:0;
}

.reason-wrap-top2 .reason-item img{
    right: 0rem !important;
    top: -6rem !important;
    width: 160px !important;
}

@media screen and (max-width: 1400px) {
.reason-wrap-top2 .reason-item img{
    width: 140px !important;
}
}

@media screen and (max-width: 1024px) {
.reason-wrap-top2 .reason-item img{
    top: -4rem !important;
}
}

@media screen and (max-width: 767px) {
.reason-wrap-top2 .reason-item img{
    top: -3rem !important;
    width: 120px !important;
}
}

.fv-sky-whale{
     animation: moveLeft_rotate 30s linear infinite !important;
      width: 200px;
  position:absolute;
}

@keyframes  moveLeft_rotate{
  0% {
    right: 13%;
    top: 18%;
     transform:rotateY(0deg);
  }
  22.5%{
    top: 8%;
  }
  45% {
     right: calc(87% - 180px);
    top: 18%;
     transform:rotateY(0deg);
  }
50% {
     right: calc(87% - 180px);
    top: 18%;
  transform:rotateY(180deg);
  }
72.5%{
    top: 8%;
  }
  95% {
    right: 13%;
    top: 18%;
     transform:rotateY(180deg);
  }
  100% {
    right: 13%;
    top: 18%;
     transform:rotateY(0deg);
  }
}

.fv::before{
  content:"";
  position:absolute;
    top: -5%;
    left: 0;
    width: 100%;
    height: 100%;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250626142940271362.png) no-repeat center/cover;
}

.bounceIn{
  animation-duration:1.5s !important;
}

.gjs-dashed .loading {
  opacity: 1;
  visibility: visible;
  position: relative;
  bottom: auto;
}

body.gjs-dashed {
  opacity: 1;
  visibility: visible;
}

/* ローディング画面 */
.loading {
  position:fixed;
  width: 100%;
  height: 100vh;
  height:100svh;
  background-color:#FFF7E6;
  z-index: 9999;
  top: 0;
  left: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  animation-delay:0s;
  animation-duration:0s;
  overflow: hidden;
}
.loading.loaded {
  opacity: 0;
  visibility: hidden;
}

.load-sun {
  position:absolute;
  left: 5%;
  width: 14%;
  top: 10%;
}

.load-cloud {
  position:absolute;
  right: -5%;
  width: 32%;
  top: 10%;
}

.load-right {
  position: absolute;
  right: -6%;
  width: 33%;
  bottom: 3%;
  animation: floating-y 2s ease-in-out forwards;
}

.load-left {
  position: absolute;
  left: -8%;
  width: 41%;
  bottom: -3%;
  animation: floating-y2 2s  ease-in-out forwards;
}

@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  50% {
    transform: translateY(3%);
  }
  80% {
    opacity:1;
  }
  100% {
    transform: translateY(-3%);
    opacity:0;
    visibility: hidden;
  }
}

@keyframes floating-y2 {
  0% {
    transform: translateY(3%);
  }
  50% {
    transform: translateY(-3%);
  }
  90% {
    opacity:1;
  }
  100% {
    transform: translateY(3%);
    opacity:0;
    visibility: hidden;
  }
}

.load-main {
  width:55%;
  max-width:960px;
}

.fade-up {
  opacity: 0;
  animation-name: fadeinup;
  animation-duration: 1s;
  animation-delay: .4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadeinup {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading.first-class .load-main.fade-up{
  animation: fadeout 0.5s ease-in-out forwards;
}

@keyframes  fadeout  {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.load-main2 {
  width: 45%;
  opacity: 0;
  visibility: hidden;
  transition: none;
  position:absolute;
  max-width: 770px;
}

.load-main2 img:first-child{
  width: 50%;
  margin: 0 auto -8rem 35%;
  display: block;
  opacity: 0;
}

.loading.first-class .load-main2 img:first-child{
  animation-name: fadeinup;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.loading.first-class .load-main2 {
  animation: fadein-out 2.5s linear 0.2s forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes fadein-out {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
  }
  30% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  60%{
    opacity: 1;
    transform: translateY(0);
  }
  100%{
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
  }
}

@keyframes fadein-only {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadein-down {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes fadein-down {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}


@keyframes fadein-down-center {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translateY(-100px); 
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); 
  }
}

@keyframes fadein-down-logo {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0) translateY(-100px); 
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); 
  }
}


.load-cloud2{
  opacity: 0;
  visibility: hidden;
  transition: none;
  position:absolute;
  bottom:0;
  left:-5%;
  width:110%;
}

.loading.first-class .load-cloud2 {
  animation: fadein-out 2.25s linear 0s forwards;
}


.load-nizi{
  opacity: 0;
  visibility: hidden;
  transition: none;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}

.loading.third-class .load-nizi {
  animation: fadein-down  1s linear  forwards;
}


.load-whale3{
  opacity: 0;
  visibility: hidden;
  transition: none;
  position:absolute;
  top:7%;
  right:7%;
  width:18%;
}

.loading.third-class .load-whale3 {
  animation: fadein-only  1s linear  forwards;
}

.load-people{
  opacity: 0;
  visibility: hidden;
  transition: none;
  position:absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 57%;
}

.loading.third-class .load-people {
  animation: fadein-down-center  1s linear 0.5s forwards;
}

.load-logo{
  opacity: 0;
  visibility: hidden;
  transition: none;
  position:absolute;
  top: 12.5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: max-content;
  max-width:90%;
  text-align:center;
}

.load-logo img{
  width:280px;
  margin:0 auto 2.5rem;
}

.load-logo p{
  font-size:clamp(1.5rem, 0.773rem + 2.42vw, 3.5rem);
  color:#EF7946;
  line-height: 1.5;
}

.loading.third-class .load-logo {
  animation: fadein-down-logo  1s linear 1s forwards;
}



.fv{
  min-height:100vh;
  padding-top:2.5rem;
  overflow: hidden;
}

.fv-sky{
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
  margin-bottom:1.5rem;
}

.fv-sky img{
  position: absolute;
  top: 0;
  animation: moveLeft 16s linear infinite;
  /* アニメーション開始時に画面外（右）に配置 */
  left: 100%;
  width:180px;
  z-index:10;
}

/* アニメーション：右から左へ移動し、左に消えたら元に戻る */
@keyframes moveLeft {
  0% {
    left: 100%;
  }
  100% {
    left: -250px;
  }
}



.fv-h1,
.fv-h1-2{
  display:flex;
  gap: 2rem;
  justify-content: center;
}

.fv-h1{
  margin-bottom: 1.5rem;
}

.fv-h1 h1:first-child{
  animation-delay:10s !important;
}

.fv-h1 h1:last-child{
  animation-delay:11s !important;
}

.fv-h1-2 h1:first-child{
  animation-delay:12s !important;
}

.fv-h1-2 h1:last-child{
  animation-delay:13s !important;
}

.fv h1{
  font-size:clamp(1.5rem, 0.591rem + 3.03vw, 4rem);
  text-align: center;
  color: #EF7946;
  font-weight: 400;
}

@keyframes sample {
  0%{
    transform:scale(0);
    opacity:0;
  }
  40% {
    transform:scale(1.2);
    opacity:1;
  }
  55% {
    transform:scale(0.8);
    opacity:1;
  }
  70% {
    transform:scale(1.1);
    opacity:1;
  }
  85% {
    transform:scale(0.9);
    opacity:1;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }

}

@keyframes sample_fadeout {
  0%{
    transform:scale(0);
    opacity:0;
  }
  60% {
    transform:scale(1);
    opacity:1;
  }
  98% {
    transform:scale(1);
    opacity:0;
  }
  100% {
    transform:scale(1);
    opacity:0;
  }
}

@keyframes sample {
  0%{
    transform:scale(0);
    opacity:0;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}

.fv-text2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  width:100%;
}

.fv-text2 h1{
  width:100%;
  opacity:0;
  position:absolute;
}

.fv-text2 h1{
   animation:sample_fadeout  1.5s ease-in  forwards 10s;
}

.fv-text2 h1:nth-child(2){
   animation:sample_fadeout 1.5s ease-in  forwards 11.5s;
}

.fv-text2 h1:nth-child(3){
   animation:sample_fadeout  1.5s ease-in  forwards 13s;
}

.fv-text2 h1:nth-child(4){
   animation:sample_fadeout  1.5s ease-in  forwards 14.5s;
}

.fv-text{
  top:45%;
  opacity:0;
  animation:sample  1s ease-in  forwards 18s;
}

.fv h1 strong{
  font-weight: 900;
  font-family: fangsong;
}

.fv h1 span{
  // padding:3px 6px;
  //  background:#fff;
  //  border:2px solid #EF7946;
  border-radius:8px;
  //  margin:7px 2px;
  display:inline-block;
  //  width:clamp(2rem, 0.853rem + 2.35vw, 3.5rem);
  letter-spacing: 4px;
}
.fv h1.bounceIn {
  animation-name: bounceIn_new !important;
}

@keyframes bounceIn_new {
  0%, 20%, 40%, 60%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.3, 1.3, 1.3);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1); 
  }
}


.fv-main{
  width:95%;
  margin:0 auto 0;
  position:relative;
}



.fv-main::before{
  content:"";
  position:absolute;
left: 25%;
    bottom: 5%;
    z-index: 10;
    width: 4%;
  aspect-ratio:86/254;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250603085315658019.png) no-repeat center/contain;
}

.fv-main::after{
  content:"";
  position:absolute;
right: 20%;
    bottom: 5%;
    z-index: 10;
    width: 4%;
  aspect-ratio:86/254;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250603085315658019.png) no-repeat center/contain;
}

.fv-sea.bounceIn{
  animation-delay:8.5s !important;
}

.fv-people{
  position:absolute;
  width: 55%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
}

.fv-people .bounceIn{
  animation-delay:10s !important;
}

.fv-people .bounceIn.fv-house{
  animation-delay:9.5s !important;
}

.fv-main img,
.fv-main .fv-people {
  display:none !important;
}

.fv{
  background: #FCEFE3;
  position: relative;
  z-index: 0;
  padding-top:5rem;
}

.fv-main{
  width: 100%;
  margin: 0 auto 0;
  position: absolute;
  top: 0;
  height: 100%;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.fv-text{
  position: absolute;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width:100%;
}

.fv-whele{
  position: absolute;
  width: 13%;
  transform: rotateY(180deg);
  right: 10%;
  top: 15%;
}

.fv-main video{
  width: 100%;
  object-position: right bottom;
  height: 100%;
}


.fv-people .fv-house{
  position: absolute;
  width: 30%;
  position: absolute;
  top: -10%;
  left: 55%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  animation-name: bounceIn_center !important;
}

.fv-people .fv-house.buruburu{
  animation: buruburu 2.5s linear infinite !important;
  animation-delay: 2s  !important;
}

@keyframes bounceIn_center{
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
    animation-timing-function: cubic-bezier(.215,.61,.355,1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale3d(.3, .3, .3);
    transform: translateX(-50%) scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1);
    transform: translateX(-50%) scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: translateX(-50%) scale3d(.9, .9, .9);
    transform: translateX(-50%) scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale3d(1.03, 1.03, 1.03);
    transform: translateX(-50%) scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: translateX(-50%) scale3d(.97, .97, .97);
    transform: translateX(-50%) scale3d(.97, .97, .97);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
  }
}
@keyframes buruburu{

  0% {
    transform:  translateX(-50%) translateY(0%);
  }
  10% {
    transform:  translateX(-50%) translateY(-10%);
  }

  20% {
    transform:  translateX(-50%)  translateY(0%);
  }
  30% {
    transform:translateX(-50%)  translateY(-10%);
  }
  40% {
    transform:  translateX(-50%)  translateY(0%);
  }
  50% {
    transform:  translateX(-50%)   translateY(-10%);
  }
  60% {
    transform:  translateX(-50%)   translateY(0%);
  }
}

.top-about{
  margin:5rem auto;
  width:95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-about-left,
.top-about-right{
  width:30%;
}

.top-about-text{
  width:37%;
  text-align:center;
}

.top-about-text h2{
  color:#EF7946;
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  margin-bottom:3.5rem;
  text-align:center;
  line-height: 1.5;
}


.top-about-text .btn{
  margin-top:1.5rem;
}

.onayami{
  padding:5rem 5% 2.5rem;
  background:#fff;
  position:relative;
}

.onayami::before {
  content: "";
  position: absolute;
  aspect-ratio: 240 / 200;
  top: 1rem;
  right: 24%;
  width: 9%;
  background: url(https://family-fudosan.co.jp/system_panel/uploads/images/20250508103626968915.png) no-repeat center / contain;
}

.onayami h2{
  text-align:center;
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  padding:1rem 3rem;
  background:#EF7946;
  color:#fff;
  border-radius:2.5rem;
  width:fit-content;
  margin:0 auto;
  position:relative;
}

.onayami h2::before{
  content:"";
  position:absolute;
  width:29px;
  aspect-ratio:29/25;
  bottom:-24px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250508115553945375.png) no-repeat center/contain;
}

.onayami-wrap{
  display:flex;
  justify-content: space-between;
  margin:4rem 0;
}

.onayami-item{
  text-align:center;
  width:22.5%;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  font-weight:500;
}

.onayami-item p strong{
  position:relative;
  font-weight:500;
  z-index: 0;
}

.onayami-item p strong::before{
  content:"";
  position:absolute;
  width:100%;
  height:1rem;
  background:#FFF7E6;
  left:0;
  top: 1.5rem;
  z-index:-1;
}

.onayami-item:first-child{
  color:#EF7946;
}

.onayami-item:nth-child(2){
  color:#33B0BE;
  animation-delay:0.3s;
}

.onayami-item:nth-child(3){
  color:#57AA84;
  animation-delay:0.6s;
}

.onayami-item:nth-child(4){
  color:#0C5EA5;
  animation-delay:0.9s;
}

.onayami-item img{
  aspect-ratio:1/1;
  margin:3.5rem auto 0;
  width:80%;
}

.reason{
  padding:5rem 5% 7.5rem;
}

.reason-title{
  text-align:center;
  width:fit-content;
  margin:0 auto;
  display:flex;
  gap:2rem;
  align-items: center;
}

.reason-title strong{
  font-weight:bold;
}

.reason-title img{
  width:45px;
}

.reason-title h2{
  font-size:clamp(1.375rem, 1.148rem + 0.76vw, 2rem);
  width:fit-content;
  padding-bottom:1rem;
  border-bottom:4px solid #EF7946;
}


.reason-wrap{
  display:flex;
  justify-content: space-between;
  max-width:1350px;
  margin:100px auto 2rem;
}

.reason-item{
  width:calc((100% - 40px) /3);
  background:#fff;
  border-radius:20px;
  position:relative;
  padding:1.5rem;
}

.reason-item > p:first-of-type{
  display:flex;
  align-items:center;
  gap:8px;
  color:#33B0BE;
  margin-bottom:1rem;
}

.reason-item > p:first-of-type strong{
  display:block;
  padding:0px 8px;
  border-radius:8px;
  color:#fff;
  background:#33B0BE;
}

.reason-item > p:last-of-type{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  font-weight:500;
  line-height:1.3;
}

.reason-item > p:last-of-type strong{
  color:#33B0BE;
  font-weight:500;
}

.reason-item img{
  position:absolute;
  right:1rem;
  top:-3rem;
  width:105px;
}

.reason-item:first-child img{
  width:85px;
}

.reason-item:nth-child(2) img{
  width:140px;
}

.reason-item:nth-child(2) > p:first-of-type,
.reason-item:nth-child(2) > p:last-of-type strong{
  color:#0C5EA5;
}

.reason-item:nth-child(2)  > p:first-of-type strong {
  background:#0C5EA5;
}

.reason-item:nth-child(3) > p:first-of-type,
.reason-item:nth-child(3) > p:last-of-type strong{
  color:#C8DD4C;
}

.reason-item:nth-child(3)  > p:first-of-type strong {
  background:#C8DD4C;
}

.fv-text2 h1{
  font-size:clamp(2rem, 0.818rem + 3.94vw, 5.25rem);
}


.two-banner{
  display:flex;
  gap:2.5rem;
  width:90%;
  margin:250px auto 4rem;
  justify-content:center;
}

.two-banner a{
  display:flex;
  width: 50%;
  justify-content: space-between;
  align-items: center;
  padding: 7.5rem 5rem;
  border-radius: 20px;
  color:#fff;
  background:#33B0BE;
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  font-weight:500;
  position:relative;
}

.two-banner a::before{
  content:"";
  position:absolute;
  max-width:200px;
  width: 30%;
  aspect-ratio: 286 / 244;
  left: 1rem;
  top: -40%;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250602114140106885.png) no-repeat center/contain;
}

.two-banner a:last-child{
  background:#C8DD4C;
}

.two-banner a:last-child::before{
  top: -45%;
  aspect-ratio: 316/421;
  width:25%;
  max-width: 150px;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250530165156878703.png) no-repeat center/contain;
}


.two-banner a:hover::before{
  animation: buruburu1 2.5s linear infinite !important;
}

.two-banner a:hover .two-banner-img{
  width:12.5%;
}

.two-banner a{
  display:none;
}

@keyframes buruburu1{

  0% {
    transform:  translateY(0%);
  }
  10% {
    transform: translateY(-10%);
  }

  20% {
    transform:   translateY(0%);
  }
  30% {
    transform: translateY(-10%);
  }
  40% {
    transform:  translateY(0%);
  }
  50% {
    transform:    translateY(-10%);
  }
  60% {
    transform:   translateY(0%);
  }
}


@keyframes buruburu2{

  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-6deg);
  }

  20% {
    transform:   rotate(0);
  }
  30% {
    transform: rotate(6deg);
  }
  40% {
    transform:  rotate(0);
  }
  50% {
    transform:   rotate(-6deg);
  }
  60% {
    transform:   rotate(0);
  }
}


.two-banner-img{
  width:10%;
  aspect-ratio:1/1;
  background:#fff;
  border-radius:999vh;
  position:absolute;
  transition:0.3s;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.two-banner-img img{
  width:14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.flow{
  padding:10rem 5% 0;
  position:relative;
}

.flow::before{
  content:"";
  position:absolute;
  width: 35%;
  aspect-ratio: 1094 / 264;
  right: 5%;
  top: 5%;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250529125440678364.png) no-repeat center/contain;
}

.flow-wrap{
  display:flex;
  margin-top:4rem;
  justify-content: space-between;
}

.flow-item{
  width:calc((100% - 60px)/4);
  border-radius:20px;
  background:#fff;
  padding:2.5rem 1rem;
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.flow h2{
  font-size:clamp(1.375rem, 1.148rem + 0.76vw, 2rem);
  width:fit-content;
  padding-bottom: 1rem;
  border-bottom: 4px solid #EF7946;
}

.flow-item img{
  max-height:130px;
  width:60%;
  margin:0 auto;
  max-width:140px;
}

.flow-item:nth-child(2){
  animation-delay:0.3s;
}

.flow-item:nth-child(3){
  animation-delay:0.6s;
}

.flow-item:nth-child(4){
  animation-delay:0.9s;
}

.flow-item:nth-child(2) img,
.flow-item:nth-child(4) img{
  max-width:160px;
}

.flow-item h3{
  font-size:clamp(1rem, 0.636rem + 1.21vw, 2rem)
}

.flow-item div p{
  color:#EF7946;
  margin-bottom:1rem;
}

.flow-item div p strong{
  display:block;
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
  font-weight:bold;
  line-height: 1;
}

.voice{
  position:relative;
}

.voice::before{
  content:"";
  position:absolute;
  width: 6%;
  aspect-ratio: 100 / 225;
  right: 5%;
  top: -15%;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250509093527830367.png) no-repeat center/contain;
}

.voice-wrap{
  display:flex;
  margin:2.5rem 0;
  justify-content: space-between;
}

.voice-item{
  padding:2rem 1rem;
  background:#fff;
  border-radius:20px;
  width:calc((100% - 20px)/2);
}

.voice-item:nth-child(2){
  animation-delay:0.3s;
}

.voice-name{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom:2rem;
}

.voice-left{
  width:20%;
  text-align:center;
}

.voice-right{
  width:75%;
}

.voice-right h3{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  color:#57AA84;
  font-weight:bold;
  line-height: 1.5;
}

.voice-right h3 strong{
  font-weight:bold;
}

.voice-right div{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:0.5rem;
}

.voice-right div p:first-child{
  color:#fff;
  background:#57AA84;
  padding:4px 1.5rem;
  border-radius:1.5rem;
  font-weight:bold;
}

.voice-right div p strong{
  font-weight:bold;
  font-size:2.5rem;
  color:#57AA84;
  line-height: 1;
}

.voice-item:nth-child(2) .voice-right div p strong,
.voice-item:nth-child(2) .voice-right h3{
  color:#F07E2E;
}

.voice-item:nth-child(2) .voice-right div p:first-child{
  background:#F07E2E;
}


.voice .reason-title img{
  width: 180px;
}

.voice .reason-title{
  align-items: end;
}

.top-news{
  padding:10rem 10%;
  position:relative;
}

.top-news::before{
  content:"";
  position:absolute;
  width: 27%;
  aspect-ratio: 430 / 150;
  right: 10%;
  top: 5%;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250602132958390093.png) no-repeat center/contain;
}

.top-news::after{
  content:"";
  position:absolute;
  width: 8%;
  aspect-ratio: 136 / 240;
  left: 1%;
  top: 50%;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250509093214817730.png) no-repeat center/contain;
}

.top-news > h2{
  font-size: clamp(1.375rem, 1.148rem + 0.76vw, 2rem);
  width: fit-content;
  padding-bottom: 1rem;
  border-bottom: 4px solid #EF7946;
  position:relative;
}



.webgene-blog{
  display:flex;
  gap:2%;
  width: 90%;
  margin: 3rem auto 0;
}


.webgene-blog article{
  width:32%;
}

.webgene-blog h3{
  font-size:clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem);
}

.newsItemText{
  display:flex;
  gap:1rem;
  align-items:center;
  margin:1rem 0;
  font-size:14px;
}

.newsItemCate{
  color:#EF7946;
  padding:8px 1.5rem;
  border-radius:1rem;
  background:#fff;
}

.newsDetailImg{
  overflow:hidden;
}

.newsDetailImg img{
  transition:0.3s;
}

.webgene-blog article a:hover .newsDetailImg img{
  transform:scale(1.1);
}

@media screen and (max-width: 1600px) {
  .load-logo{
    top: 5%;
  }
  .onayami-item {
    width: 25%;
  }
  .onayami{
    padding: 5rem 2% 2.5rem;
  }
  .reason {
    padding: 5rem 2% 0rem;
  }
  .voice{
    padding: 5rem 5% 7.5rem;
  }
  .reason-item > p:last-of-type {
    font-size: clamp(1.25rem, 1.159rem + 0.3vw, 1.5rem);
  }
}

@media screen and (min-width: 1400px) and and (max-width: 1600px){
  @media screen and (max-height: 800px) {
    .load-main {
      width: 48%;
    }
    .load-logo{
      top: 1%;
    }
    .load-people{
      width: 48%;
    }
  }
}

@media screen and (max-width: 1400px) {
.fv-sky-whale{
      width: 180px;
}
  .onayami-item{
    font-size: 1rem;
  }
  .flow-wrap{
    flex-wrap: wrap;
    gap: 2rem 5%;
    justify-content: flex-start;
    max-width: 700px;
    margin: 4rem auto 0;
  }
  .flow-item img {
    max-height: 100px;
  }
  .flow-item {
    width:47.5%;
    padding: 1rem 1rem;
    gap: 1rem;
  }
}

@media screen and (max-width: 1280px)  and (min-width: 768px) {
  .load-people{
    top: 75%;
  }
  .load-logo {
    top: 10%;
  }
  @media screen and (max-height: 700px) {
    .load-logo {
      top: 7%;
    }
    .load-logo img {
      width: 250px;
      margin: 0 auto 0.5rem;
    }
  }
}

@media screen and (max-width: 1279px) {
  .fv {
    min-height: 800px;
    padding-top:5rem;
  }
}

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

  .fv-whele{
    width: 17%;
    right: 5%;
    top: 20%;
  }
  .reason-wrap{
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    margin: 50px auto 2rem;
  }
  .reason-item {
    width: 100%;
    max-width: 380px;
  }
  .reason-item img{
    top: -2rem;
    width: 80px;
  }
  .reason-item:first-child img {
    width: 65px;
  }
  .reason-item:nth-child(2) img{
    width: 100px;
  }
  .voice-wrap{
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .voice-item{
    width: 100%;
    max-width: 600px;
  }
  .top-news {
    padding: 10rem 5%;
  }
  .voice::before{
    right: 1%;
  }
  .top-news::after{
    width: 7%;
  }
  .two-banner a::before{
    top: -26%;
  }
  .two-banner a:last-child::before {
    top: -30%;
  }
  .fv::before{
    top:0;
  }
}

@media screen and (max-width: 1023px) {
  .onayami-wrap {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 2rem auto;
    gap: 3rem 5%;
    max-width: 500px;
  }
  .onayami-item {
    width: 47.5%;
  }
  .onayami-item img{
    margin: 1.5rem auto 0;
  }
  .webgene-blog {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .webgene-blog article {
    width: 100%;
    max-width: 450px;
  }
  .top-news::after{
    top: 15%;
  }
}

@media screen and (min-width: 768px)  and (max-width: 1280px) {
  @media screen and (min-height: 1000px) {
    .load-main {
      width: 80%;
    }
    .load-left{
      width: 50%;
    }
    .load-right{
      width: 45%;
    }
    .load-main2 {
      width: 70%;
    }
    .load-people{
      width: 75%;
    }
    .load-nizi{
      bottom: 12%;
    }
    .load-logo {
      top: 20%;
    }
    .load-logo img {
      width: 400px;
    }
  }
}

@keyframes  moveLeft_rotate_sp{
  0% {
    right: 0%;
    top: 17%;
     transform:rotateY(0deg);
  }
  22.5%{
    top: 12%;
  }
  45% {
     right: calc(100% - 130px);
    top: 17%;
     transform:rotateY(0deg);
  }
50% {
     right: calc(100% - 130px);
    top: 17%;
  transform:rotateY(180deg);
  }
72.5%{
    top: 12%;
  }
  95% {
    right: 0%;
    top: 17%;
     transform:rotateY(180deg);
  }
  100% {
    right: 0%;
    top: 17%;
     transform:rotateY(0deg);
  }
}

@media screen and (max-width: 767px) {
  .fv-main::before,
    .fv-main::after{
    width:20px;
    bottom:1rem;
  }
  .fv-sky-whale{
    width:130px;
        animation: moveLeft_rotate_sp 30s linear infinite !important;
  }
  .fv{
    min-height: 100vh;
  }
  .fv-whele {
    width: 23%;
    right: 2%;
    top: 21%;
  }
  .load-main{
    width:95%;
  }
  .load-left{
    width: 70%;
  }
  .load-right{
    width: 50%;
  }
  .load-main2 {
    width: 90%;
  }
  .load-people{
    width: 75%;
  }
  .load-main2 img:first-child{
    margin: 0 auto -4rem 35%;
  }
  .two-banner{
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    margin: 7.5rem auto 4rem;
  }
  .two-banner a{
    padding: 2.5rem 2rem;
    width: 100%;
  }
  .two-banner a::before {
    top: -50px;
    width: 80px;
  }
  .two-banner a:last-child::before {
    top: -60px;
    width: 60px;
  }
  .top-about{
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .top-about-left, .top-about-right,
  .top-about-text{
    width: 100%;
  }
  .reason-title{
    gap: 1rem;
  }
  .reason-title img {
    width: 25px;
  }
  .reason-title h2{
    font-size: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #EF7946;
  }
  .voice .reason-title img {
    width: 80px;
  }
  .voice .reason-title img:last-child {
    width: 70px;
  }
  .flow-wrap{
    gap: 1rem;
    margin: 2rem auto 0;
  }
  .flow {
    padding: 5rem 5% 0;
  }
  .flow-item,
  .onayami-item{
    width:100%;
  }
  .top-news::after,
  .voice::before{
    display:none;
  }
  .top-news::before {
    width: 150px;
    right: 0%;
    top: 0%;
  }
  .flow::before{
    width: 200px;
    top: 2%;
  }
  .voice {
    padding: 0rem 5% 3rem;
  }
  .flow h2{
    font-size: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #EF7946;
  }
  .top-news {
    padding: 5rem 5%;
  }
  .fv-h1, .fv-h1-2{
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }
  .fv-sky{
    height: 70px;
  }
  .fv-sky img{
    width: 130px;
  }
  .load-logo img {
    width: 200px;
    margin: 0 auto 0.5rem;
  }
  .load-logo {
    top: 25%;
  }
  .load-nizi{
    bottom: 10%;
  }
  .load-people {
    width: 85%;
    top: auto;
    bottom: 1%;
  }
  .load-sun{
    width: 75px;
    top: 8%;
  }
  .load-cloud{
    top: 5%;
  }
  .top-about-text h2{
    margin-bottom: 1.5rem;
  }
  .onayami::before{
    top: -2rem;
    right: 5%;
    width: 60px;
  }
  .onayami {
    padding: 2rem 2% 4rem;
  }
  .onayami-item img{
    max-width: 150px;
  }
  .onayami-wrap{
    gap: 2rem 5%;
  }
  .reason {
    padding: 4rem 5% 0rem;
  }
  .top-banner-bg{
    margin: 4rem 0 4rem;
  }
}