/*================================================
  works
================================================*/
.page-header {
  background-image: url(../../image/works/page_header_bg.jpg);
}

/* .section-container {
    box-shadow: 10px 10px 30px rgba(var(--color-black-rgb), 0.1);
} */

.section-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}
.section-text span.emphasis {
  color: var(--primary-color);
}

@media print, screen and (min-width: 769px) {

  .section-inner {
    flex-direction: row;
  }
  .section-text {
    width: 50%;
  }
}


/*------------------------------------------------
area
------------------------------------------------*/
.area-container .content-label {
  margin-bottom: 0;
}
.area-container .section-text {
  text-align: center;
}
.area-container .section-text .emphasis {
  color: var(--primary-color);
  font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);
  margin-top: 1em;
}
.area-img {
  margin: 0 auto;
  max-width: 400px;
}
.area-img > img {
  mix-blend-mode: multiply;
}
.area-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.area-list > li {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.52rem + 0.4vw, 2rem);
  padding: 0 1.5em;
}
@media print, screen and (min-width: 769px) {
  .area-container .section-inner {
    background-image: url(../../image/works/area_img.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
  }

  .area-container .section-text {
    width: 55%;
    text-align: left;
  }
  .area-container .section-text .emphasis {
    font-size: 1.8rem;
  }
  .area-list {
    flex-direction: column;
    align-items: flex-start;
  }
  .area-list > li {
    font-size: 1.6rem;
    padding: 0;
  }
  .area-img {
    width: 45%;
  }
  .area-img > img {
    visibility: hidden;
  }
}

@media print, screen and (min-width: 960px) {
  .area-container .section-inner {
    padding-left: 1em;
  }
  .area-container .section-text .emphasis {
    font-size: 2.4rem;
  }
  .area-list > li {
    font-size: clamp(1.6rem, 1.44rem + 0.8vw, 2.4rem);
  }
}

@media print, screen and (min-width: 1200px) {
  .area-container .section-text {
    width: 65%;
  }

  .area-container .section-text .emphasis {
    font-size: clamp(1.8rem, 1.44rem + 1.8vw, 3.6rem);
  }
  .area-img {
    width: 35%;
  }
}


@media print, screen and (min-width: 1600px) {
  .area-container .section-text {
    padding-left: 1em;
    width: calc(100% - 645px);
  }
  .area-img {
    max-width: 645px;
    width: 645px;
  }
}

/*------------------------------------------------
works-item
------------------------------------------------*/

.works-item + .works-item {
  margin-top: calc(var(--layout-gap)*1.5);
}

.inner-group:not(:first-of-type) {
  margin-top: calc(var(--layout-gap)*1.5);
}
.works-item-detail-wrapper {
  margin-top: calc(var(--layout-gap)/4);
}
.works-item-detail {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.25;
}
.works-item-detail dt {
  width: 4em;
  margin-right: 1.5em;
  /* text-align-last: justify; */
}
.works-item-detail dt,
.works-item-detail dd {
  display: inline-block;
  margin-top: 0.5em;
}
.works-item-detail dd {
  width: calc(100% - 6em);
}
.works-item-detail dd > span {
  display: inline-block;
}
.works-item-pic img {
  box-shadow: 6px 6px 10px rgba(var(--color-black-rgb), 0.16);
}

/*parallel-1*/
.parallel-1 .works-item-pic > img + img {
  margin-top: calc(var(--layout-gap)/2);
}
/*parallel-3*/
.parallel-3 .works-item-pic > img + img {
  margin-top: calc(var(--layout-gap)/2);
}

/*parallel-4*/
.parallel-4 .works-item:nth-of-type(1) .works-item-pic {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(1),
.parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(2) {
  width: calc(50% - calc(var(--layout-gap)/4));
}
.parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(3) {
  margin-top: calc(var(--layout-gap)/2);
}

/*parallel-5*/

.parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(1),
.parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(2) {
  width: calc(50% - calc(var(--layout-gap)/4));
  margin-top: calc(var(--layout-gap)/2);
}

.parallel-5 .works-item:nth-of-type(2) .works-item-pic {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parallel-5 .works-item:nth-of-type(2) .works-item-pic > img:nth-of-type(1),
.parallel-5 .works-item:nth-of-type(2) .works-item-pic > img:nth-of-type(2) {
  width: calc(50% - calc(var(--layout-gap)/4));
}

/*parallel-6*/

.parallel-6 .works-item:nth-of-type(1) .works-item-pic-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parallel-6 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(1),
.parallel-6 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(2) {
  width: calc(50% - calc(var(--layout-gap)/4));
  margin-top: calc(var(--layout-gap)/2);
}

.parallel-6 .works-item:nth-of-type(2) .works-item-pic-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parallel-6 .works-item:nth-of-type(2) .works-item-pic-inner img:nth-of-type(1) {
  width: calc(70% - calc(var(--layout-gap)/4));
  margin-bottom: calc(var(--layout-gap)/2);
}
.parallel-6 .works-item:nth-of-type(2) .works-item-pic-inner img:nth-of-type(2) {
  width: calc(30% - calc(var(--layout-gap)/4));
  margin-bottom: calc(var(--layout-gap)/2);
}

/*parallel-7*/

.parallel-7 .works-item-pic-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parallel-7 .works-item-pic-inner img:nth-of-type(1),
.parallel-7 .works-item-pic-inner img:nth-of-type(2) {
  width: calc(50% - calc(var(--layout-gap)/4));
  margin-top: calc(var(--layout-gap)/2);
}

@media print, screen and (min-width: 480px) {

  /*parallel-3*/
  .parallel-3 .works-item-pic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .parallel-3 .works-item-pic > img {
    width: calc(100% / 3 - calc(var(--layout-gap)/4));
  }
  .parallel-3 .works-item-pic > img + img {
    margin-top: 0;
  }
}
@media print, screen and (min-width: 590px) {
  .works-item-detail-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .works-item-detail {
    width: 50%;
  }
  /*parallel-1*/
  .parallel-1 .works-item-pic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .parallel-1 .works-item-pic > img {
    width: calc(100% / 2 - calc(var(--layout-gap)/4));
  }
  .parallel-1 .works-item-pic > img + img {
    margin-top:inherit;
  }
}

@media print, screen and (min-width: 769px) {
  .works-item + .works-item {
    margin-top: calc(var(--layout-gap)*3);
  }
  .inner-group:not(:first-of-type) {
    margin-top: calc(var(--layout-gap)*3);
  }

  /*parallel-2*/
  .parallel-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .parallel-2 .works-item-detail-wrapper {
    display: block;
  }
  .parallel-2 .works-item-detail {
    width: 100%;
  }
  .parallel-2 .works-item:nth-of-type(1) {
    width: calc(40% - calc(var(--layout-gap)/2));
  }
  .parallel-2 .works-item:nth-of-type(2) {
    width: calc(60% - calc(var(--layout-gap)/2));
    margin-top: 0;
  }

  /*parallel-4*/
  .parallel-4 .works-item:nth-of-type(1) {
    position: relative;
  }
  .parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(2) {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(3) {
    position: absolute;
    width: 55%;
    top: 0;
    right: 0;
  }

  .parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(1),
  .parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(2) {
    width: calc(50% - calc(var(--layout-gap)/2.75));
  }
  .parallel-4 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(3) {
    margin-top: 0;
  }

  .parallel-4 .works-item:nth-of-type(1) .works-item-detail-wrapper {
    display: block;
  }


  /*parallel-5*/
  .parallel-5 .works-item:nth-of-type(1) .works-item-detail-wrapper {
    display: block;
    margin-top: -10%;
  }
  .parallel-5 .works-item:nth-of-type(1) .works-item-detail {
    width: 100%;
  }
  .parallel-5 .works-item:nth-of-type(1) .works-item-pic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .parallel-5 .works-item:nth-of-type(1) .works-item-pic > img:nth-of-type(1) {
    width: 60%;
    /* width: calc(62% - calc(var(--layout-gap) / 1.75)); */
  }
  .parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner {
    width: calc(40% - calc(var(--layout-gap)/2));
    /* width: calc(38% - calc(var(--layout-gap) / 1.75)); */
    display: block;
  }
  .parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(1),
  .parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(2) {
    margin-top: 0;
    width: 100%;
  }
  .parallel-5 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(2){
    margin-top: calc(var(--layout-gap)/2);
  }

  /*parallel-6*/
  .parallel-6 .works-item:nth-of-type(1),
  .parallel-6 .works-item:nth-of-type(2) {
    position: relative;
  }

  .parallel-6 .works-item:nth-of-type(1) .works-item-pic > img {
    width: 70%;
  }
  .parallel-6 .works-item:nth-of-type(1) .works-item-pic .works-item-pic-inner {
    display: block;
    width: 40%;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .parallel-6 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(1),
  .parallel-6 .works-item:nth-of-type(1) .works-item-pic-inner img:nth-of-type(2) {
    width: 100%;
  }

  .parallel-6 .works-item:nth-of-type(2) .works-item-pic-inner img:nth-of-type(1) {
    width: calc(70% - calc(var(--layout-gap)/4));
    margin-bottom: 0;
  }
  .parallel-6 .works-item:nth-of-type(2) .works-item-pic-inner img:nth-of-type(2) {
    width: calc(30% - calc(var(--layout-gap)/4));
    margin-bottom: 0;
  }
  .parallel-6 .works-item:nth-of-type(2) .works-item-pic > img {
    width: 50%;
    position: absolute;
    right: 0;
    margin-top: calc(var(--layout-gap)/2);
  }

  .parallel-6 .works-item-detail-wrapper {
    display: block;
  }
  .parallel-6 .works-item-detail-wrapper .works-item-detail {
    width: 100%;
  }

  /*parallel-7*/
  .parallel-7 .works-item-pic {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  .parallel-7 .works-item-pic > img {
    width: calc(67.5% - calc(var(--layout-gap)/4));
  }
  .parallel-7 .works-item-pic-inner {
    display: block;
    width: calc(32.5% - calc(var(--layout-gap)/4));
  }
  .parallel-7 .works-item-pic-inner img:nth-of-type(1),
  .parallel-7 .works-item-pic-inner img:nth-of-type(2) {
    width:100%;
  }
  .parallel-7 .works-item-pic-inner img:nth-of-type(1) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 1200px) {
  /*parallel-1*/
  .parallel-1 .works-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  }
  .parallel-1 .works-item-pic {
    width: calc(76% - calc(var(--layout-gap)/1.75));
  }
  .parallel-1 .works-item-detail-wrapper {
    width: 24%;
    display: block;
  }
  .parallel-1 .works-item-detail {
    width: 100%;
  }

  /*parallel-2*/
  .parallel-2 .works-item-detail-wrapper {
    display: flex;
  }
  .parallel-2 .works-item-detail {
    width: 50%;
  }
  .parallel-2 .works-item:nth-of-type(2) {
    width: calc(59% - calc(var(--layout-gap)/2));
  }

  /*parallel-3*/
  .parallel-3 .works-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  }
  .parallel-3 .works-item-pic {
    width: calc(100% - calc(100% / 4 - calc(var(--layout-gap)/2)));
  }
  .parallel-3 .works-item-pic > img {
    width: calc(100% / 3 - calc(var(--layout-gap)/3));
  }
  .parallel-3 .works-item-detail-wrapper {
    width: calc(100% / 4 - calc(var(--layout-gap)/1));
    display: block;
  }
  .parallel-3 .works-item-detail {
    width: 100%;
  }
  /*parallel-4*/
  .parallel-4 {
    display: flex;
    justify-content: space-between;
  }
  .parallel-4 .works-item {
    width: calc(50% - calc(var(--layout-gap)/1.5));
    max-width: 640px;
    margin-top: 0;
  }

  .parallel-4 .works-item-detail-wrapper {
    display: block;
  }
  .parallel-4 .works-item:nth-of-type(2) .works-item-detail {
    /* width: 22em;
    margin-left: auto; */
    width: 100%;
  }

  /*parallel-5*/
  .parallel-5 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .parallel-5 .works-item:nth-of-type(1) {
    width: 64.5%;
  }
  .parallel-5 .works-item:nth-of-type(2) {
    /* width: calc(35% - calc(var(--layout-gap)*1.5)); */
    width: calc(36% - calc(var(--layout-gap) * 1.75));
    position: relative;
  }

  .parallel-5 .works-item:nth-of-type(2) {
    /* margin-top: calc(var(--layout-gap)*4); */
    margin-top: 0;
  }
  .parallel-5 .works-item:nth-of-type(2) .works-item-pic {
    flex-direction: column;
    align-items: end;
  }
  .parallel-5 .works-item:nth-of-type(2) .works-item-pic > img:nth-of-type(1) {
    width: 100%;
  }
  .parallel-5 .works-item:nth-of-type(2) .works-item-pic > img:nth-of-type(2) {
    margin-top: calc(var(--layout-gap)/1.5);
    text-align: right;
    margin-right: 0;
  }
  .parallel-5 .works-item:nth-of-type(2) .works-item-detail-wrapper {
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 450px;
  }

  /*parallel-5*/
  .parallel-6 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .parallel-6 .works-item:nth-of-type(1) {
    width: calc(50% - calc(var(--layout-gap)/1.5));
  }
  .parallel-6 .works-item:nth-of-type(2) {
    width: calc(50% - calc(var(--layout-gap)/1.5));
  }

  .parallel-6 .works-item {
    margin-top: 0;
  }

  /*parallel-7*/
  .parallel-7 .works-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  }

  .parallel-7 .works-item-pic {
    width: calc(78% - calc(var(--layout-gap)/2));
  }
  .parallel-7 .works-item-detail-wrapper {
    width: calc(22% - calc(var(--layout-gap)/2));
    display: block;
  }
  .parallel-7 .works-item-detail {
    width: 100%;
  }
}

@media print, screen and (min-width: 1600px) {
  /*parallel-1*/
  .parallel-1 .works-item-pic {
    width: calc(72% - calc(var(--layout-gap)*1.25));
  }
  .parallel-1 .works-item-pic > img {
    /* width: 475px; */
    width: calc(100% / 2 - calc(var(--layout-gap) / 2.5));
  }
  .parallel-1 .works-item-detail-wrapper {
    width: 28%;
  }
  /*parallel-2*/
  .parallel-2 .works-item:nth-of-type(1) {
    width: calc(40% - calc(var(--layout-gap)/1.25));
  }
  .parallel-2 .works-item:nth-of-type(2) {
    width: calc(59% - calc(var(--layout-gap)/1.25));
  }

  /*parallel-3*/
  .parallel-3 .works-item-pic > img {
    width: calc(100% / 3 - calc(var(--layout-gap) / 2));
  }
  .parallel-3 .works-item-detail-wrapper {
    width: calc(100% / 4 - calc(var(--layout-gap) * 1.5));
  }

  /*parallel-4*/
  .parallel-4 .works-item {
    width: calc(50% - calc(var(--layout-gap)/1));
  }

  /*parallel-5*/
  .parallel-5 .works-item:nth-of-type(2) .works-item-detail-wrapper {
    width: 500px;
  }
  .parallel-5 .works-item:nth-of-type(2) {
    width: calc(35% - calc(var(--layout-gap) * 1.75));
  }
  /*parallel-6*/
  .parallel-6 .works-item:nth-of-type(1) {
    width: calc(50% - calc(var(--layout-gap)/1));
  }
  .parallel-6 .works-item:nth-of-type(2) {
    width: calc(50% - calc(var(--layout-gap)/1));
  }

  /*parallel-7*/
  .parallel-7 .works-item-pic > img {
    width: calc(67.25% - calc(var(--layout-gap)/4));
  }
  .parallel-7 .works-item-pic-inner {
    display: block;
    width: calc(32.75% - calc(var(--layout-gap)/4));
  }
}