@charset "UTF-8";
/*----------------------------------------------

  WORKS SINGLEE PAGE CONTENTS

----------------------------------------------*/
.worksSinglePage-contents {
  display: grid;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 40px );
  max-width: 535px;
  width: 100%;
  margin: auto;
  /*---------------------------------------
   header
  ---------------------------------------*/
  /*---------------------------------------
   body
  ---------------------------------------*/
}
.worksSinglePage-contents__header {
  /* carousel
  ----------------------------------*/
  /* date
  ----------------------------------*/
  /* title
  ----------------------------------*/
  /* item-name
  ----------------------------------*/
  /* description
  ----------------------------------*/
  /* website
  ----------------------------------*/
}
.worksSinglePage-contents__header .carousel {
  margin-bottom: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
}
.worksSinglePage-contents__header .carousel .swiper {
  overflow: hidden;
}
.worksSinglePage-contents__header .carousel .swiper-wrap {
  display: flex;
}
.worksSinglePage-contents__header .carousel .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1;
  background-color: #f5f5f5;
}
.worksSinglePage-contents__header .carousel .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.worksSinglePage-contents__header .carousel .swiper-pager {
  display: flex;
  justify-content: center;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 20px );
  margin-top: min( calc( 10 / var(--screen-width) * 100vw ), 20px );
}
.worksSinglePage-contents__header .carousel .swiper-pager picture {
  display: block;
  aspect-ratio: 1;
  width: calc((100% - min( calc( 10 / var(--screen-width) * 100vw ), 20px ) * 3) / 4);
  cursor: pointer;
}
.worksSinglePage-contents__header .carousel .swiper-pager picture img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.worksSinglePage-contents__header .date {
  display: block;
  margin-bottom: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-size: min( calc( 16 / var(--screen-width) * 100vw ), 16px );
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
}
.worksSinglePage-contents__header .title {
  margin-bottom: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-size: min( calc( 18 / var(--screen-width) * 100vw ), 18px );
  line-height: 1.5;
  font-weight: bold;
  border-bottom: 1px solid var(--color__text);
  padding-bottom: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  margin-bottom: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
}
.worksSinglePage-contents__header .item-name {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  line-height: 1.5;
  font-weight: bold;
}
.worksSinglePage-contents__header .description {
  margin-top: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
}
.worksSinglePage-contents__header .website {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
  color: #fff;
  background-color: var(--color__text);
  font-weight: bold;
  padding: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  width: min( calc( 100 / var(--screen-width) * 100vw ), 100px );
  gap: 0.3em;
}
.worksSinglePage-contents__header .website:after {
  content: "";
  display: block;
  aspect-ratio: 1;
  width: 0.6em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}
.worksSinglePage-contents__body {
  display: grid;
  gap: min( calc( 50 / var(--screen-width) * 100vw ), 60px );
  /* block contents
  ----------------------------------*/
}
.worksSinglePage-contents__body .block-contents {
  display: grid;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 50px );
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
}

/*----------------------------------------------

  WORKS SINGLEE PAGE CONTENTS
  modal表示の際

----------------------------------------------*/
.mfp-wrap.modal-post .worksSinglePage-contents {
  padding: min( calc( 25 / var(--screen-width) * 100vw ), 35px );
  /*---------------------------------------
   header
  ---------------------------------------*/
}
.mfp-wrap.modal-post .worksSinglePage-contents__header {
  /* carousel
  ----------------------------------*/
}
.mfp-wrap.modal-post .worksSinglePage-contents__header .carousel {
  margin: max( calc( -25 / var(--screen-width) * 100vw ), -35px );
  margin-bottom: 0;
}
/*# sourceMappingURL=single-works.css.map */