@charset "UTF-8";
@font-face {
  font-family: "mini";
  src: url("../fonts/mini-wakuwaku-maru.woff") format("woff"), url("../fonts/mini-wakuwaku-maru.otf") format("opentype");
}
/* CSS INFORMATION -====================================================
File name : works.css
Description : works、topics
===================================================================== */
/* =====================================================================
    一覧
======================================================================*/
.works {
  padding: 8rem 0 14rem;
}

.article_list li.is-hidden {
  display: none;
}

@media screen and (min-width: 768px) {
  .works {
    padding: 6rem 0 14rem;
  }
}
/* =====================================================================
    tag, category
======================================================================*/
.tag {
  position: relative;
  margin-bottom: 7rem;
  padding: 5rem 4rem;
}
.tag::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f9f9f9;
}

.tag_list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.tag_list li {
  margin: 0 2rem 2rem 0;
}
.tag_list li label {
  display: flex;
  align-items: center;
  padding: 0.1em 0.3em;
  font-size: 1.8rem;
  line-height: 1.3;
  color: #7e808e;
  transition: 0.3s ease;
}
.tag_list li label img {
  margin-right: 0.1em;
  width: 6.4rem;
}
.tag_list li label:hover {
  color: #2d3ee5;
}
.tag_list li input {
  display: none;
}
.tag_list li input:checked + label {
  box-shadow: 0 0 0 0.2rem #2d3ee5;
}
.tag_list li.all label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.4rem;
  height: 6.4rem;
  font-size: 1.7rem;
  line-height: 1;
  border: 1px solid;
  border-radius: 50%;
}
.tag_list li.all input:checked + label {
  background: #7e808e;
  color: #f9f9f9;
  box-shadow: none;
}

.category {
  position: relative;
  margin-bottom: 4rem;
  padding: 3rem 0 2rem;
}
.category::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background: #f9f9f9;
}

.category_list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.category_list li {
  margin: 0 2rem 1.4rem 0;
  display: flex;
  align-items: center;
  font-size: 2rem;
  line-height: 1.3;
  color: #7e808e;
  transition: 0.3s ease;
}
.category_list li img {
  margin-right: 0.1em;
  width: 6.6rem;
}

@media screen and (min-width: 768px) {
  .tag {
    padding: 4rem 0 2rem;
  }
  .tag::before {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
  .tag_list li {
    margin: 0 2.5rem 2rem 0;
  }
  .tag_list li label {
    font-size: 1.4rem;
  }
  .tag_list li label img {
    width: 5rem;
  }
  .tag_list li.all label {
    width: 5.4rem;
    height: 5.4rem;
    font-size: 1.4rem;
  }
  .category {
    margin-bottom: 2rem;
  }
  .category_list li {
    font-size: 1.4rem;
  }
  .category_list li img {
    width: 5rem;
  }
}
/* =====================================================================
    詳細
======================================================================*/
.works_desc {
  padding: 8rem 0 12rem;
}

@media screen and (min-width: 768px) {
  .works_desc {
    padding: 6rem 0 10rem;
  }
}
/* =====================================================================
    article
======================================================================*/
.article_ttl {
  margin-bottom: 3rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 3.4rem;
  font-weight: bold;
  line-height: 1.47;
}

.article_ttl span {
  color: red;
}

.article_img {
  margin-bottom: 4rem;
  border-radius: 1.6rem;
  overflow: hidden;
}

.article_date {
  display: flex;
  align-items: center;
  margin-bottom: 6rem;
}
.article_date dt {
  margin-right: 1em;
  padding: 0.5em 1.5em;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.35em;
  background: #2d3ee5;
}
.article_date dd {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  line-height: 1.2;
}

.article_head {
  margin-bottom: 24rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
.article_head dt {
  position: relative;
  margin-bottom: 2.7rem;
  padding-left: 1.5em;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2;
}
.article_head dt::before {
  content: "";
  position: absolute;
  display: block;
  top: 48%;
  left: 0;
  transform: translateY(-50%);
  width: 0.8em;
  height: 0.8em;
  background: url(../images/common/img_deco1.png) no-repeat center/contain;
}
.article_head dd {
  position: relative;
  padding: 5rem;
  padding-bottom: 19rem;
  line-height: 1.666;
  border-radius: 2rem;
  border: 0.2rem solid #282c4d;
}
.article_head dd::before {
  content: "";
  position: absolute;
  display: block;
  bottom: -15rem;
  left: 50%;
  transform: translateX(-50%);
  width: 23.2rem;
  height: 31.8rem;
  background: url(../images/common/img_shinoby1.png) no-repeat center/contain;
}

.article_content > *:not(h3) {
  margin-bottom: 3em;
}
.article_content h3 {
  margin-bottom: 8rem;
  padding-bottom: 2.8rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-bottom: 0.4rem solid;
}
.article_content p {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  line-height: 1.666;
}

.article_content_img li:not(:last-child) {
  margin-bottom: 1.5em;
}
@media screen and (min-width: 768px) {
  .article_ttl {
    margin-bottom: 1.5rem;
    font-size: 2.8rem;
  }
  .article_img {
    margin-bottom: 2rem;
    border-radius: 1rem;
  }
  .article_date {
    margin-bottom: 7rem;
  }
  .article_date dt {
    font-size: 1.2rem;
  }
  .article_date dd {
    font-size: 1.8rem;
  }
  .article_head {
    margin-bottom: 9rem;
  }
  .article_head dt {
    margin-bottom: 2rem;
    font-size: 1.8rem;
  }
  .article_head dd {
    padding: 4rem;
    padding-right: 20rem;
  }
  .article_head dd::before {
    bottom: -6.3rem;
    left: auto;
    right: 1.3rem;
    transform: translateX(0%);
    width: 16.9rem;
    height: 23.1rem;
  }
  .article_content h3 {
    margin-bottom: 3.5rem;
    padding-bottom: 1.2rem;
    font-size: 3rem;
    border-width: 0.2rem;
  }
  .article_content .btn1 {
    margin-left: auto;
    margin-right: auto;
    width: calc(440 / 1000 * 100%);
    background: #f9f9f9;
  }
  .article_content_img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .article_content_img.photo1 li {
    width: calc(640 / 1000 * 100%);
  }
  .article_content_img.photo2 li {
    margin-right: calc(32 / 1000 * 100%);
    width: calc(484 / 1000 * 100%);
  }
  .article_content_img.photo2 li:nth-child(2n), .article_content_img.photo2 li:last-child {
    margin-right: 0;
  }
  .article_content_img.photo2 li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
  .article_content_img.photo3 li {
    margin-right: calc(42 / 1000 * 100%);
    width: calc(305 / 1000 * 100%);
  }
  .article_content_img.photo3 li:nth-child(3n), .article_content_img.photo3 li:last-child {
    margin-right: 0;
  }
  .article_content_img.photo3 li:nth-last-child(-n+3) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1200px) {
  .article_ttl,
.article_img {
    margin-left: calc(-100 / 1000 * 100%);
    width: calc(1200 / 1000 * 100%);
  }
}
/* =====================================================================
    movie
======================================================================*/
.movie {
  padding: 8rem 0;
  background: #f9f9f9;
}
.movie::before {
  content: "";
  position: absolute;
  display: block;
  top: -8rem;
  left: 0;
  width: 100%;
  height: calc(8rem + 1px);
  background-color: #f9f9f9;
  border-radius: 6rem 6rem 0 0;
  z-index: 3;
}

.movie_ttl {
  margin-bottom: 8rem;
  text-align: center;
  font-family: "mini", serif;
  font-size: 8rem;
  letter-spacing: 0.1em;
}

.movie_list li {
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .movie {
    padding: 3rem 0;
  }
  .movie::before {
    top: -5rem;
    right: 0;
    margin: auto;
    width: 120rem;
    max-width: 90%;
    height: calc(5rem + 1px);
    border-radius: 4rem 4rem 0 0;
  }
  .movie_ttl {
    margin-bottom: 4rem;
    font-size: 6rem;
  }
  .movie_list {
    margin: 0 auto;
    width: calc(862 / 1000 * 100%);
  }
}/*# sourceMappingURL=works.css.map */