@charset "utf-8";

/*==========================
article header
==========================*/

.mvPc {
  display: none;
}

/* article header PC */
@media screen and (min-width: 769px) {
  .mvSp {
    display: none;
  }

  .mvPc {
    display: block;
    width: 100%;
  }
}

/*==========================
about
==========================*/

.section__about {
  padding: 40px 0 120px;
}

.profile {
  transform: rotate(-9deg);
  width: 118px;
  display: block;
  margin: 40px auto 0;
  filter: drop-shadow(15px 15px 30px rgba(0, 0, 0, 0.25));
}

.about__nameE {
  color: rgba(255, 132, 132, 0.5);
  font-family: "Kapakana", serif;
  font-size: 6.4rem;
  text-align: center;
}

.about__nameJ {
  text-align: center;
  font-size: 2.4rem;
  margin-top: -70px;
}

.about__text {
  text-align: center;
  margin: 49px 7% 0;
}

.brPc {
  display: none;
}

.moreBtn {
  margin: 60px auto 0;
  display: flex;
  width: 200px;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border-bottom: 1px dashed var(--text, #430a13);
}

.moreBtn::after {
  content: "";
  background-image: url(../images/arrow.svg);
  position: relative;
  top: 0;
  right: -23px;
  background-repeat: no-repeat;
  background-size: cover;
  width: 20px;
  height: 17px;
}

/* about PC */
@media screen and (min-width: 769px) {
  .section__about {
    padding-top: 70px;
  }

  .about__frame {
    display: flex;
    justify-content: center;
  }

  .profile {
    width: 204px;
    margin: 71px 100px 0 70px;
  }

  .about__group {
    max-width: 600px;
  }

  .about__nameE {
    font-size: 9.6rem;
  }

  .about__nameJ {
    font-size: 3.2rem;
    margin-top: -80px;
    text-align: start;
  }

  .about__text {
    text-align: start;
    line-height: 2;
    margin: 50px 0 0;
  }

  .brPc {
    display: block;
  }

  .brSp {
    display: none;
  }

  .moreBtn {
    margin: 0 3% 0 65%;
transition:0.4s;
  }

  .moreBtn::after {
    content: "";
    background-image: url(../images/arrow.svg);
    position: relative;
    top: 0;
    right: -23px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 20px;
    height: 17px;
  }

 
.moreBtn:hover {
  letter-spacing: 0.5em;
transition:0.4s;
}
}

/*==========================
works
==========================*/

.section__works {
  padding-top: 40px;
}

.works__item {
  margin-top: 32px;
}

.mockup {
  margin: 0 auto;
  max-width: 350px;
}

.mockupSp {
  width: 105px;
  height: 153px;
  transform: rotate(-15.88deg);
  z-index: 10;
  margin: 0 0 0 10%;
}

.mockupPc {
  width: 284px;
  height: 172px;
  margin: -55px 0 0 21%;
}

.banner1 {
  width: 300px;
  height: 250px;
  display: block;
  margin: 0 auto;
}

.banner2 {
  width: 300px;
  height: 163px;
  display: block;
  margin: 0 auto;
}

.works__bg1 {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: -78px;
}

.works__bg2 {
  display: block;
  width: 100%;
  height: 20px;
  margin-top: 10px;
}

.works__bg3 {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 10px;
}

.mauve__bg {
  background-color: #faeef0;
}

.portfolio__bg {
  background: var(--red);
}

.bannerS__bg {
  background-color: #000000;
}

.bannerE__bg:first-of-type {
  background-color: #ffffa8;
}

.bannerE__bg:nth-of-type(2) {
  background-color: #ffa8a8;
}

.bannerE__bg:nth-of-type(3) {
  background-color: #d3ffa8;
}

.works__subtitle {
  text-align: center;
  margin-top: 13px;
}

.works__desc {
  text-align: center;
}

.custom-shape-divider-bottom-1731140490 {
  margin-top: 122px;
  transform: translateY(3px);
}

/* works PC */
@media screen and (min-width: 769px) {
  .section__works {
    padding: 80px 4% 0;
  }

  .works__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 59px 85px;
    margin-top: 63px;
  }

  .works__item {
    margin-top: 0;
    width: calc((100% - 85px) / 2);
    max-width: 800px;
transition:0.4s;
  }

 
.works__item:hover {
  transform: scale(0.9);
transition:0.4s;
}
 

  .mockup {
    max-width: 700px;
    max-width: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mockupSp {
    width: 141px;
    height: 205px;
    transform: rotate(0);
    margin: 0;
  }

  .mockupPc {
    width: 396px;
    height: 240px;
    margin: 0;
  }

  .banner {
    width: 333px;
    height: 277px;
  }

  .works__bg1 {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: -78px;
  }

  .works__subtitle {
    margin-top: 7px;
  }

  .banner2 {
    width: 458px;
    height: 250px;
    display: block;
    margin: 0 auto;
  }

  .custom-shape-divider-bottom-1731140490 {
    margin-top: 74px;
  }


}