@charset "UTF-8";

/* fv */
#fv {
  padding-bottom: 30px;
  margin: 0 calc(50% - 50vw);
  position: relative;
  background-color: rgb(0, 73, 126);
}
#fv h1 {
  display: flex;
  align-items: center;
  min-height: 11.4rem;
  font-family: var(--ZenKakuGothicNew);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgb(255, 255, 255);
  -webkit-clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0px);
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0px);
}
@media screen and (min-width: 768px) {
  #fv h1 {
    min-height: 24.5rem;
    font-size: 4.5rem;
  }
}
#fv h1 > span {
  padding-left: 3.2rem;
  position: fixed;
}
@media screen and (min-width: 768px) {
  #fv h1 > span {
    padding-left: calc(50vw - 55rem);
  }
}
#fv::after {
  content: "";
  display: block;
  padding-top: 30px;
  border-radius: 30px 30px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
}

/* category */
#category {
  padding: 4rem 0 5.6rem 0;
}
@media screen and (min-width: 768px) {
  #category {
    padding: 9.3rem 0 7.5rem 0;
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 80rem;
  }
}
#category ul {
  padding: 0.5rem 0;
  margin: 0 -0.5rem;
  display: flex;
  flex-wrap: wrap;
}
#category li {
  margin: 0.5rem;
  flex-basis: calc(50% - 1rem);
}
@media screen and (min-width: 768px) {
  #category li {
    flex-basis: auto;
  }
}
#category a {
  padding: 0 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 13rem;
  min-height: 4rem;
  border-radius: 5px;
  border: solid 1px;
  box-sizing: border-box;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: rgb(0, 161, 128);
  transition: 0.2s background-color ease-out;
}
@media screen and (min-width: 768px) {
  #category a {
    padding: 0 2.4rem;
  }
}
#category .current-cat a,
#category a:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 161, 128);
  border-color: rgb(0, 161, 128);
}
#category a:hover {
  opacity: 1;
}

/* artlist */
@media screen and (min-width: 768px) {
  #artlist {
    margin: 0 auto;
    width: 80rem;
  }
}
#artlist article {
  border-bottom: 2px solid rgb(219, 219, 219);
}
@media screen and (min-width: 768px) {
  #artlist article.new {
    position: relative;
  }
}
@media screen and (min-width: 768px) {
  #artlist article.new::before {
    content: "NEW";
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 4.2rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 2.2rem;
    border-radius: 3px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + 1rem);
    font-family: var(--Outfit);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(232, 56, 40);
  }
}
#artlist article a {
  display: grid;
  min-height: 10.3rem;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #artlist article a {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: 3.6rem 1fr;
  }
  #artlist article a h2 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    margin: auto 0;
  }
  #artlist article a time {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: auto 1.8rem 0 0;
  }
  #artlist article a .cat {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: auto 0 0 0;
  }
  #artlist article a::before {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    margin: auto 0 0 0.4rem;
  }
  #artlist article a::after {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    margin: auto 0;
  }
}
@media screen and (min-width: 768px) {
  #artlist article a {
    display: flex;
    align-items: center;
    min-height: 6.2rem;
  }
}
@media screen and (max-width: 767px) {
  #artlist article.new a::before {
    content: "NEW";
    display: flex;
    justify-content: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 4.2rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 2.2rem;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: var(--Outfit);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(232, 56, 40);
  }
}
#artlist article a::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  order: 20;
  display: inline-block;
  width: 3.2rem;
  height: 1.5rem;
  background: url(../images/ico_arrow_01.svg) no-repeat 100% 50% / contain;
}
@media screen and (min-width: 768px) {
  #artlist article a::after {
    width: 5.5rem;
    background-position: 50% 50%;
  }
}
#artlist article h2 {
  padding: 0.35em 0;
  margin: 0;
  order: 10;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  #artlist article h2 {
    padding: 0.3em 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
  }
}
#artlist article time {
  flex-shrink: 0;
  display: block;
  min-width: 7rem;
  font-family: var(--Outfit);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: calc(22 / 13 * 1em);
  color: rgb(112, 112, 112);
}
@media screen and (min-width: 768px) {
  #artlist article time {
    line-height: 1;
  }
}
#artlist article .cat {
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
  #artlist article .cat {
    padding: 0 1.5em;
    min-width: 14.6rem;
    box-sizing: border-box;
    font-size: 1.2rem;
  }
}
#artlist article .cat li {
  padding: 0 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.2rem;
  border: solid 1px;
  border-radius: 4px;
  box-sizing: border-box;
  font-weight: 600;
  line-height: 1;
  color: rgb(0, 161, 128);
  word-break: keep-all;
}
@media screen and (min-width: 768px) {
  #artlist article .cat li {
    min-width: 5.5em;
    min-height: 3rem;
  }
}
#artlist article .cat li + li {
  margin-left: 0.4rem;
}

/* pagination */
#pagination {
  padding: 5rem 0 10rem 0;
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  #pagination {
    padding: 8rem 0 9.8rem 0;
    margin: 0;
  }
}
#pagination > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
#pagination a,
#pagination span {
  margin: 0 0.5rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(0, 73, 126);
}
@media screen and (min-width: 768px) {
  #pagination a,
  #pagination span {
    margin: 0 1.25rem;
    width: 4.8rem;
    height: 4.8rem;
    font-size: 2rem;
  }
}
#pagination .current,
#pagination .page {
  font-family: var(--Outfit);
  border: solid 1px rgb(0, 73, 126);
}
#pagination .page {
  transition: 0.2s background-color ease-out;
}
#pagination .current,
#pagination .page:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 73, 126);
}
#pagination .page:hover {
  opacity: 1;
}
#pagination a[rel="prev"],
#pagination a[rel="next"] {
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
}
#pagination a[rel="prev"]::before,
#pagination a[rel="next"]::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 100%;
  height: 1.5rem;
  background: url(../images/ico_arrow_02.svg) no-repeat 50% 50% / contain;
}
#pagination a[rel="prev"]::before {
  scale: -1 1;
}