/* hero */
#hero {
  position: relative;
  /*   max-height: 801px; */
  overflow: hidden;
}

#hero .bg {
  height: auto;
}

#hero .obj {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 27px;
  max-width: 1080px;
  width: 100%;
  z-index: 3;
}

#hero .obj.right {
  justify-content: flex-end;
}

#hero .obj.center {
  justify-content: center;
}

#hero .obj.right:before {
  transform: translate(calc(-45px - 470%), -126px);
}

#hero .obj.center:before {
  transform: translate(calc(-45px - 240%), -135px);
}

#hero .obj::before {
  content: "";
  position: absolute;
  width: 108px;
  height: 216px;
  opacity: .6;
  transform: translate(-45px, -144px);
  z-index: 1;
}

#hero .obj[num="01"]::before {
  background: url(../../assets/01.svg) no-repeat;
  background-size: 108px auto;
}

#hero .obj[num="02"]::before {
  background: url(../../assets/02.svg) no-repeat;
  background-size: 108px auto;
  filter: brightness(200%);
}

#hero .obj[num="03"]::before {
  background: url(../../assets/03.svg) no-repeat;
  background-size: 108px auto;
  filter: brightness(200%);
}


#hero .obj img {
  width: auto;
  max-height: 297px;
  object-fit: contain;
  z-index: 3;
}

/* main */
main {
  position: relative;
  padding: 72px 18px;
  overflow: hidden;
}

main .inner {
  margin: auto;
  max-width: 630px;
  width: 100%;
}

main .ttl {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.5;
}

main p {
  margin: 36px 0;
  font-size: 1.8rem;
  line-height: 2.4;
  letter-spacing: 0.06rem;
}

main a {
  display: inline;
  text-decoration: underline;
  color: #1d1d1f;
  /* color: #d84848; */
}

main img {
  margin: 54px auto 12px;
}

main .note {
  margin: auto;
  line-height: 1.8;
  font-size: 1.4rem;
  color: #606060;
}

main .bg-txt-1 {
  position: absolute;
  top: 18%;
  left: 0;
  width: 600px;
  height: auto;
  z-index: -1;
}

main .bg-txt-2 {
  position: absolute;
  top: 69%;
  right: 0;
  width: 600px;
  height: auto;
  z-index: -1;
}

.mt54 {
  margin-top: 54px !important;
}

/* profile */
#profile {
  margin: 72px 0;
  padding: 54px 18px;
  background: #F7F6EC;
}

#profile .tmb {
  margin: auto;
  max-width: 333px;
}

#profile .tmb img {
  margin: 0;
}

#profile .ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.1rem;
}

#profile .ttl::after {
  content: "サッキ・マウロ";
  margin: 0 0 0 12px;
  font-family: "Noto Sans JP", "メイリオ", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
}

#profile .txt {
  margin: auto;
  max-width: 333px;
  width: 100%;
  line-height: 1.8;
  letter-spacing: 0.12rem;
  font-size: 1.5rem;
  color: #4E4E4E;
}


/*  */
@media screen and (max-width: 630px) {

  #hero .obj[num="01"] img {
    height: 80% !important;
  }

  #hero .obj[num="02"] img {
    height: 70% !important;
  }

  #hero .obj[num="03"] img {
    height: 60% !important;
  }

  #hero .obj[num="01"]::before {
    display: none;
  }

  #hero .obj[num="02"]::before {
    display: none;
  }

  #hero .obj[num="03"]::before {
    display: none;
  }

  main {
    padding: 45px 18px;
  }

  main .ttl {
    font-size: 2.7rem;
  }

  main p {
    font-size: 1.6rem;
    line-height: 2.4;
  }
	
main .bg-txt-1 {
  top: 10%;
  left: 0;
  width: 100%;
}

main .bg-txt-2 {
  top: 69%;
  right: 0;
  width: 100%;
}

  /* profile */
  #profile {
    margin: 45px 0;
    padding: 36px 18px;
  }

  #profile .tmb {
    height: 297px;
  }

  #profile .txt {
    font-size: 1.4rem;
  }
}