@charset "UTF-8";

/* ===== HERO ===== */
.top {
  position: relative;
  width: 100%;
  height: clamp(200px, 40vw, 793px);
  background-image: url('../img/hero.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.top .wrapper {
  display: none;
}

/* トップビュー画像に置き換えたためテキスト非表示 */
.top h1,
.top .eachTextAnime {
  display: none;
}

.eachTextAnime {
  font-size: clamp(11px, 1vw, 14px);
  color: #888;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  margin-top: 12px;
}

h2 .eachTextAnime {
  font-size: clamp(11px, 0.9vw, 13px);
  color: #888;
  letter-spacing: 0.2em;
  display: block;
  margin-top: 8px;
}

/* hero background */
.plofile {
  flex: 1;
  position: relative;
}

/* ===== ABOUT ===== */
.about-padd {
  position: relative;
}

.about-flex .about-button {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 2vw;
}

.about-flex,
.name-ja,
.works-button {
  width: 100%;
  margin-bottom: 2vw;
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.name-en {
  font-size: clamp(10px, 0.8vw, 13px);
  color: #888;
  font-weight: 400;
  letter-spacing: 0.2em;
  padding-left: 1vw;
  display: inline-block;
  margin-top: 4px;
}

/* ===== WORKS ===== */
.works {
  background-color: #fafafa;
}

.works-child {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.works-child li {
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
}

.works-child li a {
  color: var(--color-main);
  border-bottom: 1px solid var(--color-main);
  padding-bottom: 2px;
}

.website_list,
.graphic_list,
.banner_list {
  display: flex;
  gap: 2vw;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  padding-top: 1.5vw;
}

.category {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.15em;
  margin-top: 4px;
}

.website_list_item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.website_list_item:hover {
  transform: translateY(-4px);
}

.website_list_item a,
.banner_list li a {
  display: block;
}

.websiteimages {
  border-radius: 4px;
  display: block;
}

/* ===== BUTTON ===== */
.btnlinestretches4 {
  position: relative;
  color: var(--color-dark);
  padding: 0 0 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.btnlinestretches4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-main);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.btnlinestretches4:hover::after {
  transform: scaleX(1.1);
}

.more { font-size: clamp(12px, 1vw, 15px); }
.plus { font-size: clamp(14px, 1.1vw, 17px); color: var(--color-main); }

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
  .websiteimages {
    width: 26vw;
    max-width: 380px;
  }

  .about-padd {
    margin-right: 4.5vw;
    padding-left: 48.125vw;
    padding-bottom: 8vw;
    margin-top: 4vw;
  }

  .about-flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: -1vw;
    margin-left: -23.75vw;
  }

  .about-p1,
  .about-p2 {
    font-size: clamp(12px, 0.85vw, 14px);
    line-height: 2.2;
    letter-spacing: 0.04em;
    width: 23.75vw;
    padding-right: 3vw;
    padding-bottom: 24px;
  }

  .about_image2 {
    position: absolute;
    top: -3vw;
    left: 0;
    width: 24vw;
    border-radius: 4px;
  }

  .website-flex {
    margin: 0 auto;
  }

  .works li {
    max-width: 26vw;
  }

  .works-child { gap: 45px; }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .top .wrapper {
    display: none;
  }

  /* ABOUT */
  .about-padd {
    padding: 0 5vw 8vw;
  }

  .about-padd > div:first-child {
    text-align: center;
    margin-bottom: 6vw;
  }

  .about-padd > div:first-child img {
    width: 55vw;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .name-ja {
    font-size: 5vw;
    margin-top: 0;
  }

  .name-en {
    font-size: 3vw;
    display: block;
    padding-left: 0;
  }

  .about-p1,
  .about-p2 {
    width: 100%;
    padding-right: 0;
    margin-top: 4vw;
    font-size: 3.6vw;
    line-height: 2.1;
    letter-spacing: 0.04em;
  }

  /* WORKS */
  .websiteimages {
    width: 100%;
    max-width: 80vw;
  }

  .website_list,
  .graphic_list,
  .banner_list {
    flex-direction: column;
    align-items: center;
    gap: 8vw;
  }

  .more, .plus { font-size: 4.5vw; }
}