@charset "UTF-8";
/************************************************
  LOWER COMMON
************************************************/

.sec-ttl {
  letter-spacing: 0.1em;
}

/************************************************
  PROFILE
************************************************/

/* 下層ページ初めレイアウト */
.sec-profile__layout {
  margin: 0 0 0 auto;
}

.sec-profile__lower {
  margin-top: 80px;
}

.sec-skills {
  padding-bottom: 5vw;
}

.sec-skills__container {
  margin-top: 60px;
}

.sec-skills__desc {
  letter-spacing: 0.1em;
  line-height: 3;
  padding-bottom: 30px;
  border-top: solid 1px #e5e5e5;
}

.lower-line {
  border-bottom: solid 1px #e5e5e5;
  padding-top: 20px;
}

.sec-skills-subttl {
  font-weight: 500;
  font-size: 2.4rem;
}

.sec-skills-app {
  padding-top: 30px;
  color: #d2ac12;
  font-weight: 700;
  font-size: 1.4rem;
}

/************************************************
  WORKS　一覧
************************************************/

.sec-works__content {
  display: grid;
  gap: 100px;
  padding: 50px;
}

.sec-works-lower__info {
  background-color: rgb(255, 255, 255);
  padding: 0px 0px 50px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 2px 10px 0px;
}

.sec-works-achievement {
  padding-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .sec-works__content {
    padding: 10px;
  }

  .sec-works-lower__info {
    padding: 0px 0px 50px 0px;
  }
}

/************************************************
  WORKS　個別ページ共通
************************************************/

.lower-top {
  background-image: url(../img/works/bg-works.webp);
  background-size: cover;
  margin-top: 80px;
  padding-bottom: 10vw;
}

/* works個別ページ各種、galleryページ共通 */
.sec-lower__ttl {
  padding: 10vw;
}

.sec-works__txt {
  text-align: center;
}

.sec-works-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 60px;
}

.sec-works__wrapper {
  display: flex;
  gap: 50px;
}

.sec-works-web-items {
  padding-top: 60px;
}

.web-page {
  display: flex;
  font-weight: 700;
  letter-spacing: 0.1rem;
}

.sec-works-web-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.web-img {
  box-shadow: rgba(0, 0, 0, 0.1) 3px 2px 10px 0px;
}

.sec-works-lower {
  padding-top: 10vw;
  padding-bottom: 10vw;
}

.sec-works__desc {
  letter-spacing: 0.1em;
  line-height: 3;
  padding-bottom: 30px;
  border-top: solid 1px #e5e5e5;
}

.sec-works-subttl {
  font-weight: 500;
  font-size: 2.4rem;
}

.sec-works-app {
  padding-top: 30px;
  color: #d2ac12;
  font-weight: 700;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .sec-works-img {
    display: grid;
    grid-template-columns: none;
    row-gap: 50px;
  }
  .sec-works-web-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sec-works__wrapper {
    display: block;
  }
  .sec-works-lower {
    padding-bottom: 20vw;
  }
}

/************************************************
  GALLERY
************************************************/

.lower-gallery-top {
  margin-top: 80px;
  padding-bottom: 10vw;
}

.gallery-item__ttl {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #b6b6b6;
  padding-left: 5px;
}

.sec-gallery inner {
  position: relative;
}

.sec-gallery__subttl {
  font-weight: 500;
  font-size: 2.4rem;
}

.sec-gallery__txt {
  margin: 70px;
}

.sec-gallery__list {
  width: 100%;
  display: grid;
  gap: 70px 3%;
  margin-top: 80px;
  margin-bottom: 40px;
  grid-template-columns: 1fr 1fr 1fr;
}

.sec-gallery__list__item {
  box-shadow: rgba(0, 0, 0, 0.1) 3px 2px 10px 0px;
}

@media screen and (max-width: 960px) {
  .sec-gallery__list {
    margin: auto;
    grid-template-columns: 1fr 1fr;
    gap: 50px 5%;
    margin-top: 30px;
  }
  .lower-gallery-top {
    padding-bottom: 23vw;
  }
}

@media screen and (max-width: 415px) {
  .sec-gallery__list {
    margin: auto;
    grid-template-columns: 1fr;
    gap: 50px 5%;
    margin-top: 30px;
  }
}

/************************************************
  CONTACT
************************************************/