@charset "utf-8";

/*--------------------------------------------------------------
  家族信託css
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  トップ
--------------------------------------------------------------*/

#family-trust-top {
  width: 100vw;
  height: 50vh;

  margin: 0;
  padding: 3rem 10% 3rem 10%;
}

/*--------------------------------------------------------------
  家族信託について
--------------------------------------------------------------*/
#family-trust {
  margin: 0;
  padding: 3rem 10% 3rem 10%;
}

#family-trust>h2 {
  margin: 3rem 0 3rem 0;
}

#family-trust h4 {
  margin: 3rem 0 0.5rem 0;
}

#family-trust h3 {
  margin: 1rem 0 0 0;
  font-family: "Noto Serif JP", "Tinos", serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.1rem;
  opacity: 0.5;
}

#family-trust h3::first-letter {
  font-size: 3em;
}

#family-trust h5 {
  margin: 0 0 3rem 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  opacity: 0.5;
}


#family-trust>.family-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 3rem;
  width: 100%;
}

#family-trust>.family-trust-grid div:first-child {
  order: 2;
  padding: 1rem;
  background-color: antiquewhite;
  border-radius: 1rem;
}

#family-trust>.family-trust-grid div:last-child {
  order: 1;
}

#family-trust>.family-trust-grid div:last-child>h4 {
  margin: 0 0 0.5rem 0;
}


@media (max-width: 767.98px) {

  /* sm 以下の画面サイズの場合のスタイル */
  #family-trust {
    padding: 3rem 1rem 3rem 1rem;
  }

  #family-trust>.family-trust-grid {
    grid-template-columns: 1fr;
  }

  #family-trust>.family-trust-grid div:first-child {
    order: 1;
  }

  #family-trust>.family-trust-grid div:last-child {
    order: 2;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {

  /* md の画面サイズの場合のスタイル */
  #family-trust {
    padding: 3rem 1rem 3rem 1rem;
  }

  #family-trust>.family-trust-grid {
    grid-template-columns: 1fr;
  }

  #family-trust>.family-trust-grid div:first-child {
    order: 1;
  }

  #family-trust>.family-trust-grid div:last-child {
    order: 2;
  }
}

@media (min-width: 992px) {
  /* lg 以上の画面サイズの場合のスタイル */
}


/*--------------------------------------------------------------
  親が認知症になってしまったら？
--------------------------------------------------------------*/

#family-dementia {
  width: 100%;

  margin: 0;
  padding: 3rem 10% 3rem 10%;
}

#family-dementia>h2 {
  margin: 0 0 0.5rem 0;
}

#family-dementia h4 {
  margin: 3rem 0 0.5rem 0;
}

#family-dementia h3 {
  margin: 1rem 0 0 0;
  font-family: "Noto Serif JP", "Tinos", serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.1rem;
  opacity: 0.5;
}

#family-dementia h3::first-letter {
  font-size: 3em;
}

#family-dementia h5 {
  margin: 0 0 3rem 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  opacity: 0.5;
}

#family-dementia>.family-dementia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 3rem;
}

#family-dementia>.family-dementia-grid h4 {
  margin: 3rem 0 0.5rem 0;
}



@media (max-width: 767.98px) {

  /* sm 以下の画面サイズの場合のスタイル */
  #family-dementia {
    padding: 3rem 1rem 3rem 1rem;
  }

  #family-dementia>.family-dementia-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {

  /* md の画面サイズの場合のスタイル */
  #family-dementia {
    padding: 3rem 1rem 3rem 1rem;
  }

  #family-dementia>.family-dementia-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {
  /* lg 以上の画面サイズの場合のスタイル */
}

/*--------------------------------------------------------------
  お気軽にお問い合わせ下さい
--------------------------------------------------------------*/
#family-contact {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3rem;

  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 3rem 10% 3rem 10%;
}

#family-contact>h2 {
  margin: 0 0 0.5rem 0;
}

#family-contact>p {
  margin: 0;
}

@media (max-width: 767.98px) {

  /* sm 以下の画面サイズの場合のスタイル */
  #family-contact {
    grid-template-columns: 1fr;
    padding: 3rem 1rem 3rem 1rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {

  /* md の画面サイズの場合のスタイル */
  #family-contact {
    grid-template-columns: 1fr;
    padding: 3rem 1rem 3rem 1rem;
  }
}

@media (min-width: 992px) {
  /* lg 以上の画面サイズの場合のスタイル */
}