@charset "UTF-8";



.page-top .top-fv {
  display: flex;
  flex-direction: column;
  height: max(var(--vh) - var(--heightHeaderSp), 56.5rem);
}
.page-top .top-fv__image-area {
  flex: 1 1;
  display: grid;
  grid-template-columns: 15.4rem 1fr 11.5rem;
  grid-template-rows: 31.914894% 1fr 31.914894%;
}
.page-top .top-fv__image {
  position: relative;
}
.page-top .top-fv__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
.page-top .top-fv__image:nth-child(2) {
  animation-delay: 0.2s;
}
.page-top .top-fv__image:nth-child(3) {
  animation-delay: 0.4s;
}
.page-top .top-fv__image:nth-child(4) {
  animation-delay: 0.6s;
}
.page-top .top-fv__image:nth-child(5) {
  animation-delay: 0.8s;
}
.page-top .top-fv__image--01 {
  grid-area: 1/1/2/2;
}
.page-top .top-fv__image--02 {
  grid-area: 1/2/2/4;
}
.page-top .top-fv__image--03 {
  grid-area: 2/1/3/4;
}
.page-top .top-fv__image--04 {
  grid-area: 3/1/4/3;
}
.page-top .top-fv__image--05 {
  background: #999;
  grid-area: 3/3/4/4;
}
.page-top .top-fv.is-animate .top-fv__image {
  opacity: 1;
}
.page-top .top-fv__text-area {
  position: relative;
  animation-delay: 1.1s;
}
.page-top .top-fv__title {
  line-height: 1;
}
.page-top .top-fv__title__ja {
  color: var(--colorMain1);
  font-family: var(--fontMincho);
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}
.page-top .top-fv__title__en {
  display: block;
  color: var(--colorMain2);
  font-family: var(--fontEn);
  font-weight: 600;
}
.page-top .top-fv__scrolldown {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
  position: absolute;
  right: 2rem;
  bottom: 0;
  border: none;
  background: transparent;
}
.page-top .top-fv__scrolldown__text {
  white-space: pre;
  writing-mode: vertical-rl;
  display: inline-block;
  color: var(--colorText2);
  font-family: var(--fontEn);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 600;
}
.page-top .top-fv__scrolldown__line {
  display: block;
  position: relative;
  height: 3.6rem;
  margin-top: 0.8rem;
  overflow: hidden;
}
.page-top .top-fv__scrolldown__line::before, .page-top .top-fv__scrolldown__line::after {
  content: "";
  display: block;
  width: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -0.1rem;
}
.page-top .top-fv__scrolldown__line::before {
  height: 100%;
  background: var(--colorBorder1);
}
@keyframes topScrollDown {
  0% {
    top: 0;
    translate: 0 -100%;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    top: 100%;
    translate: 0 0;
    opacity: 1;
  }
}
.page-top .top-fv__scrolldown__line::after {
  height: 1.2rem;
  background: var(--colorMain2);
  animation: topScrollDown 1.5s ease-in-out infinite;
}
.page-top .top-about {
  background: #EDF3F5 url("/assets/img/top/about-bg_sp.webp") no-repeat center bottom/100% auto;
  padding: 5.3rem 3rem 10.6rem;
  overflow: hidden;
}
.page-top .top-about__title {
  text-align: center;
  color: var(--colorMain1);
  font-family: var(--fontEn);
  font-size: 3rem;
  line-height: 1.3;
  margin-bottom: 2rem;
}
.page-top .top-about__button {
  margin: 4rem auto 0;
}
.page-top .top-service__inner {
  padding-block: 5.5rem 5.8rem;
}
.page-top .top-service__title {
  margin-bottom: 3.8rem;
}
.page-top .top-service__title__main-text {
  font-family: var(--fontMincho);
  color: var(--colorMain1);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  display: block;
}
.page-top .top-service__title__sub-text {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  line-height: 1;
  margin-bottom: 1.7rem;
}
.page-top .top-service__title__sub-text__ja {
  color: var(--colorMain2);
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--fontMincho);
  display: inline-block;
}
.page-top .top-service__title__sub-text__en {
  color: var(--colorMain5);
  font-size: 1.3rem;
  font-family: var(--fontEn);
  position: relative;
  top: 0.1rem;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.page-top .top-service__title__sub-text__en::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.1rem;
  background: var(--colorMain2);
}
.page-top .top-service__image {
  filter: drop-shadow(0.8rem 0.8rem 2rem rgba(0, 0, 0, 0.1));
}
.page-top .top-service__description__text {
  display: inline-block;
  margin-bottom: 0.7em;
}
.page-top .top-service__description__text:last-child {
  margin-bottom: 0;
}
.page-top .top-service__button {
  margin: 4rem auto 0;
}
.page-top .top-users {
  padding-block: 5.8rem;
  background: var(--colorBg2);
}
.page-top .top-users__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.page-top .top-users__panel {
  filter: drop-shadow(0.8rem 0.8rem 1rem rgba(0, 0, 0, 0.1));
}
.page-top .top-users__panel a {
  display: block;
  text-decoration: none;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 1rem 1rem 0;
}
.page-top .top-users__panel a::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #666;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.page-top .top-users__panel--residents a::after {
  background: #59997F;
}
.page-top .top-users__panel--owners a::after {
  background: #817955;
}
.page-top .top-users__panel__image {
  overflow: hidden;
}
.page-top .top-users__panel__image img {
  transition: scale 0.2s ease-in-out;
}
.page-top .top-users__panel__heading {
  padding-block: 2.1rem;
  line-height: 1;
  position: relative;
  color: #fff;
}
.page-top .top-users__panel__heading::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 3.6rem;
  -webkit-mask: url("/assets/img/common/arrow-circle.svg") no-repeat 0 0/contain;
          mask: url("/assets/img/common/arrow-circle.svg") no-repeat 0 0/contain;
  background: #fff;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  translate: 0 -50%;
  transition: translate 0.2s ease-in-out;
}
.page-top .top-users__panel__heading__ja {
  font-family: var(--fontMincho);
  display: block;
  font-size: 2.7rem;
  font-weight: 500;
}
.page-top .top-users__panel__heading__en {
  font-family: var(--fontEn);
  display: block;
  font-size: 1.3rem;
  margin-top: 1rem;
}
.page-top .top-wide-image {
  height: 21rem;
}
.page-top .top-news {
  padding-block: 5.9rem 5.8rem;
}
.page-top .top-news__button {
  margin: 4.3rem auto 0;
}
.page-top .top-news__no-posts {
  margin-top: 1.5rem;
}
.page-top .top-blog {
  padding-block: 5.8rem;
  border-top: 1px solid var(--colorBorder1);
}
.page-top .top-blog__button {
  margin: 3.6rem auto 0;
}
.page-top .top-blog__no-posts {
  margin-top: 1.5rem;
}
.page-top .top-agents {
  padding-block: 4rem 2.4rem;
}
.page-top .top-agents__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  margin-inline: auto;
  padding-left: 2rem;
  width: calc(100% - var(--sidePaddingSp1) * 2);
  height: 19.9rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.page-top .top-agents__inner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #D43D6A 0%, #7A0C2D 100%);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: width 0.2s ease-in-out;
}
.page-top .top-agents__inner::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 4rem;
  -webkit-mask: url("/assets/img/common/arrow-circle-border.svg") no-repeat center center/contain;
          mask: url("/assets/img/common/arrow-circle-border.svg") no-repeat center center/contain;
  background: #fff;
  position: absolute;
  right: 2rem;
  top: 50%;
  translate: 0 -50%;
  transition: translate 0.2s ease-in-out;
}
.page-top .top-agents__description {
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
  margin-top: 2rem;
}
@media (min-width: 768px){
  .page-top .top-fv {
    height: max(var(--vh) - var(--heightHeaderPc), 60rem);
  }
  .page-top .top-fv__image-area {
    grid-template-columns: repeat(2, 28.571406%) 1fr 14.285703%;
    grid-template-rows: repeat(2, 1fr);
  }
  .page-top .top-fv__image--01 {
    grid-area: 1/1/3/2;
  }
  .page-top .top-fv__image--02 {
    grid-area: 1/2/3/3;
  }
  .page-top .top-fv__image--03 {
    grid-area: 1/3/2/5;
  }
  .page-top .top-fv__image--04 {
    grid-area: 2/3/3/4;
  }
  .page-top .top-fv__image--05 {
    grid-area: 2/4/3/5;
  }
  .page-top .top-fv__text-area {
    padding-block: 4rem 5.8rem;
    flex: none;
  }
  .page-top .top-fv__title__ja {
    font-size: 4rem;
  }
  .page-top .top-fv__title__en {
    font-size: 1.6rem;
    margin-top: 1rem;
  }
  .page-top .top-fv__scrolldown {
    right: 5rem;
  }
  .page-top .top-fv__scrolldown__text {
    font-size: 1.6rem;
  }
  .page-top .top-fv__scrolldown__line {
    height: 8rem;
  }
  .page-top .top-fv__scrolldown__line::after {
    height: 1.6rem;
  }
  .page-top .top-about {
    padding: 9rem var(--sidePaddingPc1) 23.3rem;
    background-image: url("/assets/img/top/about-bg.webp");
  }
  .page-top .top-about__title {
    margin-bottom: 1.6rem;
  }
  .page-top .top-about__text {
    text-align: center;
  }
  .page-top .top-about__button {
    margin-top: 4.8rem;
  }
  .page-top .top-service__inner {
    display: grid;
    grid-template-columns: 40.8rem 49.6rem;
    grid-template-rows: max-content max-content 1fr;
    justify-content: space-between;
    gap: 0 4rem;
    padding-block: 9.7rem 10rem;
  }
  .page-top .top-service__title {
    margin-bottom: 6.8rem;
    grid-area: 1/1/2/3;
  }
  .page-top .top-service__title__main-text {
    font-size: 3.2rem;
  }
  .page-top .top-service__title__sub-text {
    gap: 1.5rem;
    margin-bottom: 2.2rem;
  }
  .page-top .top-service__title__sub-text__ja {
    font-size: 1.6rem;
  }
  .page-top .top-service__title__sub-text__en {
    font-size: 1.4rem;
    gap: 1.6rem;
  }
  .page-top .top-service__title__sub-text__en::before {
    height: 1.2rem;
  }
  .page-top .top-service__image {
    grid-area: 2/1/4/2;
  }
  .page-top .top-service__description {
    grid-area: 2/2/3/3;
  }
  .page-top .top-service__button {
    grid-area: 3/2/4/3;
    margin: 4rem 0 0;
  }
  .page-top .top-users {
    padding-block: 10rem;
  }
  .page-top .top-users__list {
    flex-direction: row;
    gap: 3.2rem;
  }
  .page-top .top-users__panel a {
    padding: 1.6rem 1.6rem 0;
  }
  .page-top .top-users__panel__heading {
    padding-block: 2.8rem;
  }
  .page-top .top-users__panel__heading::after {
    width: 4rem;
    right: 0rem;
  }
  .page-top .top-users__panel__heading__ja {
    font-size: 2.8rem;
  }
  .page-top .top-users__panel__heading__en {
    font-size: 1.4rem;
    margin-top: 1.1rem;
  }
  .page-top .top-wide-image {
    height: auto;
    max-height: 32rem;
    aspect-ratio: 1280/320;
  }
  .page-top .top-news {
    padding-block: 10rem;
  }
  .page-top .top-news__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-top .top-news__list {
    width: 100%;
    max-width: 76rem;
  }
  .page-top .top-news__button {
    margin-top: 4.1rem;
  }
  .page-top .top-news__no-posts {
    align-self: center;
    flex-grow: 1;
    margin-left: 6rem;
  }
  .page-top .top-blog {
    padding-block: 10rem;
  }
  .page-top .top-blog__list {
    margin-top: 3.4rem;
  }
  .page-top .top-agents {
    padding-block: 10rem 4rem;
    border-top: 1px solid var(--colorBorder1);
  }
  .page-top .top-agents__inner {
    height: 18.4rem;
    width: min(var(--widthDefault), 100% - var(--sidePaddingPc1) * 2);
    padding-inline: 6.4rem;
  }
  .page-top .top-agents__inner::after {
    width: 6rem;
    right: 8.8rem;
  }
  .page-top .top-agents__description {
    margin-top: 1.6rem;
    font-size: 1.8rem;
  }
}
@media (min-width: 768px) and (orientation: portrait){
  .page-top .top-fv {
    max-height: 80rem;
  }
}
@media (max-width: 767px){
  .page-top .top-fv__text-area {
    padding-inline: var(--sidePaddingSp2);
    padding-block: 3rem 5rem;
  }
  .page-top .top-fv__title__en {
    font-size: 1.4rem;
    margin-top: 1.3rem;
  }
  .page-top .top-service__description {
    margin: 3rem 1rem 0;
  }
  .page-top .top-news__list {
    margin-top: 2.8rem;
  }
  .page-top .top-blog__list {
    margin-top: 3rem;
    overflow: auto;
    gap: 1rem;
    grid-template-columns: repeat(3, 32rem);
    margin-inline: calc(var(--sidePaddingSp1) * -1);
    padding-inline: var(--sidePaddingSp1);
  }
  .page-top .top-blog__list:has(.m-article-panel:only-child) {
    grid-template-columns: 1fr;
  }
  .page-top .top-blog__list:has(.m-article-panel:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 32rem);
  }
}
@media (any-hover: hover){
  .page-top .top-fv__scrolldown:hover {
    opacity: 1;
  }
  .page-top .top-users__panel a:hover {
    opacity: 1;
  }
  .page-top a:hover .top-users__panel__image img {
    scale: 1.05;
  }
  .page-top a:hover .top-users__panel__heading::after {
    translate: 0.3rem -50%;
  }
  .page-top .top-agents__inner:hover {
    opacity: 1;
  }
  .page-top .top-agents__inner:hover::before {
    width: 150%;
  }
  .page-top .top-agents__inner:hover::after {
    translate: 0.9rem -50%;
  }
}