@charset "UTF-8";
/*===============================
scss 変数ファイル
================================*/
/*
カラー
================================*/
/*
メディアクエリ
================================*/
#archive-portfolio .archive-portfolio__back {
 position: relative;
 height: 200px;
 background: #1a1414;
 margin-top: 65.06px;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .archive-portfolio__back {
  margin-top: 85.06px;
  height: 300px;
  background-size: 200% auto;
 }
}
@media screen and (min-width: 768px) {
 #archive-portfolio .archive-portfolio__back {
  height: 350px;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .archive-portfolio__back {
  background-size: 150% auto;
 }
}
#archive-portfolio .archive-portfolio__back__inner {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 30px 0;
 background-color: #fff;
 width: 85%;
 margin: auto;
 text-align: center;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
  rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 border-radius: 5px;
 max-width: 500px;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .archive-portfolio__back__inner {
  padding: 50px 0;
 }
}
#archive-portfolio .archive-portfolio__back__inner--heading {
 color: #1a1414;
 font-size: 2.4rem;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .archive-portfolio__back__inner--heading {
  font-size: 2.8rem;
 }
}
@media screen and (min-width: 768px) {
 #archive-portfolio .archive-portfolio__back__inner--heading {
  font-size: 3.2rem;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .archive-portfolio__back__inner--heading {
  font-size: 3.6rem;
 }
}
#archive-portfolio .archive-portfolio__back__inner--subHeading {
 font-weight: 900;
 margin-top: 5px;
 font-size: 2rem;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .archive-portfolio__back__inner--subHeading {
  margin-top: 8px;
 }
}
@media screen and (min-width: 768px) {
 #archive-portfolio .archive-portfolio__back__inner--subHeading {
  font-size: 2.4rem;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .archive-portfolio__back__inner--subHeading {
  margin-top: 10px;
  font-size: 2.8rem;
 }
}

@media screen and (min-width: 640px) {
 #archive-portfolio .p_archive-portfolio__list {
  display: flex;
  flex-wrap: wrap;
 }
}
#archive-portfolio .p_archive-portfolio__list .item {
 margin-top: 50px;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .p_archive-portfolio__list .item {
  width: calc(50% - 25px);
  margin-right: 50px;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .p_archive-portfolio__list .item {
  width: calc(33.3% - 33.3px);
 }
}
#archive-portfolio .p_archive-portfolio__list .item:first-child {
 margin-top: 0;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .p_archive-portfolio__list .item:nth-child(2) {
  margin-right: 0;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .p_archive-portfolio__list .item:nth-child(2) {
  margin-right: 50px;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .p_archive-portfolio__list .item:nth-child(3n) {
  margin-right: 0;
 }
}
@media screen and (min-width: 640px) {
 #archive-portfolio .p_archive-portfolio__list .item:nth-child(-n + 2) {
  margin-top: 0;
 }
}
@media screen and (min-width: 1024px) {
 #archive-portfolio .p_archive-portfolio__list .item:nth-child(-n + 3) {
  margin-top: 0;
 }
}
#archive-portfolio .p_archive-portfolio__list .item a {
 color: #000;
}
@media screen and (min-width: 1024px) {
 #archive-portfolio
  .p_archive-portfolio__list
  .item
  a
  .block:hover
  .block__img
  img {
  transform: translate(-50%, -50%) scale(1.1);
 }
 #archive-portfolio
  .p_archive-portfolio__list
  .item
  a
  .block:hover
  .block__text--heading {
  color: #1a1414;
 }
}
#archive-portfolio .p_archive-portfolio__list .item a .block__img {
 position: relative;
 overflow: hidden;
 padding-bottom: 56.25%;
}
#archive-portfolio .p_archive-portfolio__list .item a .block__img img {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 100%;
 min-height: 100%;
 object-fit: cover;
 font-family: "object-fit: cover;";
 transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#archive-portfolio .p_archive-portfolio__list .item a .block__text {
 margin-top: 20px;
}
#archive-portfolio .p_archive-portfolio__list .item a .block__text--client {
 font-size: 1.2rem;
 color: #ccc;
}
#archive-portfolio .p_archive-portfolio__list .item a .block__text--heading {
 margin-top: 10px;
 line-height: 1.6em;
 transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#archive-portfolio .p_archive-portfolio .notfound {
 font-size: 1.2rem;
 text-align: center;
}
@media screen and (min-width: 640px) {
 #archive-portfolio .p_archive-portfolio .notfound {
  font-size: 1.4rem;
 }
}

#single-portfolio .p_single-portfolio__back {
 margin-top: 65.06px;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 padding-bottom: 56.25%;
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio__back {
  margin-top: 85.06px;
 }
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio .p_single-portfolio__container {
  display: flex;
 }
}
#single-portfolio .p_single-portfolio .p_single-portfolio__container--heading {
 font-weight: 900;
 font-size: 2rem;
 line-height: 1.6em;
 margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio .p_single-portfolio__container--heading {
  font-size: 2.4rem;
  width: 300px;
  margin-right: 50px;
 }
}
@media screen and (min-width: 1024px) {
 #single-portfolio .p_single-portfolio .p_single-portfolio__container--heading {
  font-size: 2.8rem;
  width: 400px;
  margin-right: 80px;
 }
}
@media screen and (min-width: 1200px) {
 #single-portfolio .p_single-portfolio .p_single-portfolio__container--heading {
  width: 500px;
  margin-right: 100px;
 }
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio .p_single-portfolio__container__content {
  flex: 1;
 }
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content--description {
 line-height: 2em;
 margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
 #single-portfolio
  .p_single-portfolio
  .p_single-portfolio__container__content--description {
  margin-top: -9px;
 }
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content--description
 p:not(:first-child) {
 margin-top: 15px;
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview {
 font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
 #single-portfolio
  .p_single-portfolio
  .p_single-portfolio__container__content__overview {
  font-size: 1.6rem;
 }
}
@media screen and (min-width: 768px) {
 #single-portfolio
  .p_single-portfolio
  .p_single-portfolio__container__content__overview
  dl {
  display: flex;
 }
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl:not(:first-child) {
 margin-top: 30px;
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl
 dt,
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl
 dd {
 line-height: 1.6em;
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl
 dt {
 font-weight: bold;
}
@media screen and (min-width: 768px) {
 #single-portfolio
  .p_single-portfolio
  .p_single-portfolio__container__content__overview
  dl
  dt {
  width: 83.45px;
  margin-right: 50px;
 }
}
@media screen and (min-width: 1024px) {
 #single-portfolio
  .p_single-portfolio
  .p_single-portfolio__container__content__overview
  dl
  dt {
  width: 95.45px;
 }
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl
 dd {
 margin-top: 15px;
}
@media screen and (min-width: 768px) {
 #single-portfolio
  .p_single-portfolio
  .p_single-portfolio__container__content__overview
  dl
  dd {
  margin-top: 0;
  flex: 1;
 }
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl
 dd
 a {
 text-decoration: underline;
 font-weight: bold;
}
#single-portfolio
 .p_single-portfolio
 .p_single-portfolio__container__content__overview
 dl
 dd
 ul
 li:not(:first-child) {
 margin-top: 10px;
}
#single-portfolio .p_single-portfolio__freeSpace h1,
#single-portfolio .p_single-portfolio__freeSpace h2,
#single-portfolio .p_single-portfolio__freeSpace h3,
#single-portfolio .p_single-portfolio__freeSpace h4,
#single-portfolio .p_single-portfolio__freeSpace h5,
#single-portfolio .p_single-portfolio__freeSpace h6 {
 line-height: 1.6em;
 margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio__freeSpace h1,
 #single-portfolio .p_single-portfolio__freeSpace h2,
 #single-portfolio .p_single-portfolio__freeSpace h3,
 #single-portfolio .p_single-portfolio__freeSpace h4,
 #single-portfolio .p_single-portfolio__freeSpace h5,
 #single-portfolio .p_single-portfolio__freeSpace h6 {
  margin-bottom: 30px;
 }
}
@media screen and (min-width: 1024px) {
 #single-portfolio .p_single-portfolio__freeSpace h1,
 #single-portfolio .p_single-portfolio__freeSpace h2 {
  margin-bottom: 40px;
 }
}
#single-portfolio .p_single-portfolio__freeSpace h1 {
 font-weight: 900;
 font-size: 2.2rem;
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio__freeSpace h1 {
  font-size: 2.4rem;
 }
}
#single-portfolio .p_single-portfolio__freeSpace h2 {
 font-weight: 900;
 font-size: 2rem;
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio__freeSpace h2 {
  font-size: 2.2rem;
 }
}
#single-portfolio .p_single-portfolio__freeSpace h3 {
 font-size: 1.8rem;
}
#single-portfolio .p_single-portfolio__freeSpace h4 {
 font-size: 1.6rem;
}
#single-portfolio .p_single-portfolio__freeSpace h5 {
 font-size: 1.4rem;
}
#single-portfolio .p_single-portfolio__freeSpace h6 {
 font-size: 1.2rem;
}
#single-portfolio .p_single-portfolio__freeSpace p {
 line-height: 2em;
}
#single-portfolio .p_single-portfolio__freeSpace p:not(:last-child) {
 margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
 #single-portfolio .p_single-portfolio__freeSpace p:not(:last-child) {
  margin-bottom: 25px;
 }
}
@media screen and (min-width: 1024px) {
 #single-portfolio .p_single-portfolio__freeSpace p:not(:last-child) {
  margin-bottom: 35px;
 }
}
#single-portfolio .p_single-portfolio__freeSpace p a {
 color: #1a1414;
 font-weight: bold;
 text-decoration: underline;
}
@media screen and (min-width: 1024px) {
 #single-portfolio .p_single-portfolio__otherProjects .heading-style1 {
  writing-mode: horizontal-tb;
  margin-bottom: 40px;
 }
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-wrapper
 .swiper-slide
 a {
 color: #000;
}
@media screen and (min-width: 1024px) {
 #single-portfolio
  .p_single-portfolio__otherProjects
  .p_single-portfolio__otherProjects__slider
  .swiper-wrapper
  .swiper-slide
  a
  .block:hover
  .block__img
  img {
  transform: translate(-50%, -50%) scale(1.1);
 }
 #single-portfolio
  .p_single-portfolio__otherProjects
  .p_single-portfolio__otherProjects__slider
  .swiper-wrapper
  .swiper-slide
  a
  .block:hover
  .block__text--heading {
  color: #1a1414;
 }
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-wrapper
 .swiper-slide
 a
 .block__img {
 position: relative;
 overflow: hidden;
 padding-bottom: 56.25%;
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-wrapper
 .swiper-slide
 a
 .block__img
 img {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 100%;
 min-height: 100%;
 object-fit: cover;
 font-family: "object-fit: cover;";
 transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-wrapper
 .swiper-slide
 a
 .block__text {
 margin-top: 20px;
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-wrapper
 .swiper-slide
 a
 .block__text--client {
 font-size: 1.2rem;
 color: #ccc;
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-wrapper
 .swiper-slide
 a
 .block__text--heading {
 margin-top: 10px;
 line-height: 1.6em;
 transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-button-next,
#single-portfolio
 .p_single-portfolio__otherProjects
 .p_single-portfolio__otherProjects__slider
 .swiper-button-prev {
 top: 40%;
}