@charset "utf-8";
/* CSS Document */
main {
  padding: 6.4em 4em;
}
h1 {
  display: block;
  position: relative;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 20em;
  background: url(../img/sp_works_top.jpg) center center / cover no-repeat;
}
h1 > span {
  display: flex;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  flex-direction: column;
  font-size: 2em;
  font-weight: 600;
  text-shadow: #fff 0.06em 0.06em 0.33em;

}
h1 span span:nth-child(2) {
  font-size: 75%;
  font-family: 'Noto sans JP';
  font-weight: 400;
  padding: 0.5em 0 0 0.2em;
}


#section_categoryList {
  padding: 2.66em 0 4em;
  margin: 0 auto;
}
#section_categoryList h2 {
  font-size: 1.53em;
  font-weight: 600;
  text-align: center;
}
#section_categoryList nav {
  margin-top: 2em;
}
#section_categoryList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66em;
  font-weight: 600;
}
#section_categoryList li {
  width: 48%;
  margin-bottom: 0.66em;
  text-align: center;
}
#section_categoryList li:nth-child(14), #section_categoryList li:nth-child(15) {
  margin-bottom: 0;
}
#section_categoryList li > a {
  display: block;
  padding: 0.33em 0.66em;
  border: 0.06em #333 solid;
  border-radius: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#section_categoryList li:first-child {
  width: 100%;
}
#section_categoryList li:first-child > a {
  width: 48%;
  margin: 0 auto;
}
#section_categoryList a.selected {
  border: 0.06em #ef4573 solid;
  background-color: #ef4573;
  color: #fff;
}

#section_border {
  width: 100%;
  height: 0.06em;
  background: #ccc;
  margin: 0 auto;
}

#section_artworkList {
  padding: 2.66em 0;
}
#section_artworkList > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#section_artworkList li{
  margin-bottom: 2.66em;
}

#section_artworkList a img {
  display: block;
  width: 20em;
  height: 20em;
  margin-bottom: 0.66em;
  border: 0.33em #ededed solid;
  object-fit: cover;
}
#section_artworkList a > div {
  font-size: 1.33em;
  font-weight: 600;
}
#section_artworkList a > span {
  display: block;
  color: #ccc;
  font-size: 0.73em;
  font-weight: 600;
}
#section_artworkList a > span::before {
  content: "カテゴリー：";
  color: #ccc;
}
#section_artworkList nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  font-family: 'Noto Sans JP';
}
#section_artworkList nav li {
  margin: 0 0.66em;
}
#section_artworkList nav a {
  display: block;
  width: 1.33em;
  height: 1.33em;
}
#section_artworkList a.next {
  position: relative;
  border: 0.06em #333 solid;
  border-radius: 10%;
}
#section_artworkList a.next > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


main > div > p {
  display: inline-block;
  padding-bottom: 4em;
  text-align: center;
  line-height: 2.3;
}

/* ---- 360px ---- */

@media screen and (max-width:374px) {
  body {
    font-size: 4vw;
  }
}

/* ---- TAB ---- */

@media screen and (min-width:768px) {
  #section_categoryList ul {
    font-size: 0.8em;
    padding: 0 4em;
  }
  #section_categoryList li {
    width: 32%;
    margin-bottom: 0.8em;
  }
  #section_categoryList li:first-child {
    width: 32%;
  }
  #section_categoryList li:nth-child(n+13) {
    margin-bottom: 0;
  }
  #section_categoryList li > a {
	padding: 0.6em;
  }
  #section_categoryList li:first-child > a {
    width: 100%;
  }
  #section_artworkList > ul {
    flex-direction: row;
    flex-wrap: wrap;
	justify-content: space-between;
  }
  #section_artworkList > ul  li {
    margin-bottom: 2em;
    width: 32%;
  }
  #section_artworkList a img {
    width: 15em;
    height: 15em;
  }
}

/* ---- PC ---- */

@media screen and (min-width:1024px) {
  main > div  {
    width: 1000px;
    margin: 0 auto;
  }

  h1 {
    height: 450px;
  }
  h1 > span {
    left: 22%;
    font-size: 4em;
  }

  #section_categoryList ul {
    width: 1000px;
    font-size: 1em;
    padding: 0;
  }
  #section_categoryList li {
    width: 19%;
    margin-bottom: 0.8em;
  }
  #section_categoryList li:first-child {
    width: 19%;
  }
  #section_categoryList li:nth-child(n+11) {
    margin-bottom: 0;
  }
  #section_categoryList li > a {
    display: block;
    padding: 5px 0;
    border: 1px #333 solid;
    border-radius: 30px;
  }

  #section_border {
    width: 1200px;
  }

  #section_artworkList > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	justify-content: space-between;
    margin: 0 auto;
  }
  #section_artworkList > ul li {
    width: 19%;
  }
  #section_artworkList ul > li > a {
    display: block;
  }
  #section_artworkList a img {
    width: 190px;
    height: 190px;
    object-fit: cover;
  }
}