@charset "UTF-8";

#header{
  z-index: 9999;
}
/* ヘッダー分下げる */
.main{
  margin-top: 8rem;
}
/* タイトル部分 */
/* 作品名 */
.work-title{
  text-align: center;
  margin: 2rem auto 0 auto;
  font-weight: normal;
  font-size: clamp(1.5rem, 2vw, 3rem);
  text-shadow: -1px -1px 1px #000000, 1px 1px #ffffff;
}
/* 画像部分 */
.work-img{
  aspect-ratio: 4/3;
  width: 90vw;
  object-fit: contain;
  border: .2rem double var(--black);
  margin: 2rem auto 0 auto;
}

/* 背景灰色の他情報 */
/* 作品のタイプのタグの形状 */
.workscard-category{
  display: flex;
  width: 40svw;
  height: 10%;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  background-image: var(--gradient3);
  border-radius: 25%;
}
.work-info{
  display: grid;
  width: 80%;
  padding: 2rem;
  grid-template-columns: max-content 1fr; /* 左：ラベル、右：内容 */
  gap:  1rem;
  margin: 2rem auto 0 auto;
  justify-content: space-around;
  background-color: var(--base-color);
}

.work-info>dt{
  width: 20%;
  font-size: 2rem;
}
.work-info>dd{
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 1.5rem;
}
.original-link{
  text-decoration: underline;
}
.original-link:hover{
  text-shadow: var(--effect1);
  color:var(--main-color)
}

@media screen and (max-width: 767px) {
  .work-info{
    display: grid;
    width: 80%;
    padding: 1rem;
    grid-template-columns: 1fr;
    gap:  1rem;
    margin: 2rem auto 0 auto;
    justify-content: center;
    background-color: var(--base-color);
  }
  .work-info>dt{
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  }
  .work-info>dd>p{
    width: 100%;
    font-size: 1rem;
    text-align: left;
    margin: 0.5rem auto;
  }
}