@charset "UTF-8";


.section.archive-page, .section.single-page {
    margin-top: 120rem;
    margin-bottom: 0;
}

/* flame
--------------------------------------------------------------*/
.cnt-case {
  padding-left: 10rem;
  padding-right: 10rem;
}
.flame {
	position: relative;
  padding: 32rem 10rem 10rem;
  border-radius: 20rem;
}

.flame-inner {
  padding: 10rem 10rem 40rem;
  border-radius: 10rem;
}

.archive-page .flame-inner {
  padding-top: 40rem;
  padding-left: 0;
  padding-right: 0;
}
.single-page .flame-inner {
  padding-top: 60rem;
  padding-left: 0;
  padding-right: 0;
}
.cnt-case .flame .english-label.deco-top-left {
	top: 0;
	left: -5rem;
}
.archive .cnt-case .flame .english-label.deco-top-left,
.single .cnt-case .flame .english-label.deco-top-left {
	top: 0;
	left: -10rem;
}
.cnt-case .svg-icon__case svg {
  width: 42rem;
}
.cnt-case .content-title {
  margin-bottom: 10rem;
}
.list-card.grid-box.grid-3 {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 50rem 10rem;
}
.list-card li {
  position: relative;
    border-top-left-radius: 10rem;
    border-top-right-radius: 10rem;
}
.archive .taxonomy-child .card-item .card-title {
  height: 50rem;
  padding: 10rem 5rem 5rem;
  font-size: 14rem;
}
.card-item .card-title {
  height: 64rem;
  padding: 28rem 5rem 5rem;
  font-size: 14rem;
}
.card-item .card-category {
  padding: 3rem 6rem 1rem;
  font-size: 9rem;
  top: 6rem;
  left: 5rem;
}
.card-item .card-text {
  border-left-width: 7rem;
}
.card-item .card-text dt {
  width: auto;
  margin-right: 5rem;
  font-size: 12rem;
}
.card-item .card-text dd {
  font-size: 12rem;
}
/* アーカイブページ */
.filter-tabs {
  gap: 10rem;
  width: 70%;
}
.filter-tabs .button-round {
  height: 34rem;
  padding-left: 10rem;
  padding-right: 10rem;
  font-size: 14rem;
}
  .cnt-case .english-label{
    font-size: 44rem;
  }
@media screen and (min-width:601px) {
  .cnt-case {
    padding-left: 20rem;
    padding-right: 20rem;
  }

  .flame-inner {
    padding: 10rem 10rem 40rem;
    border-radius: 15rem;
  }
	.list-card.grid-box.grid-3 {
		grid-template-columns: repeat(2, minmax(240px, 1fr));
		gap: 30rem 10rem;
	}

}

@media screen and (min-width:769px) {
  .cnt-case {
    padding-left: 20rem;
    padding-right: 20rem;
  }
  .flame {
    padding: 140rem 40rem 40rem;
  	border-radius: 50rem;
  }
  .flame-inner {
    padding: 40rem 20rem 80rem;
    border-radius: 40rem;
  }
  .archive-page .flame-inner,
  .single-page .flame-inner {
    padding: 60rem 0rem 50rem;
  }
  .cnt-case .english-label{
    font-size: 120rem;
  }
  .single .cnt-case .flame .english-label.deco-top-left,
  .archive .cnt-case .flame .english-label.deco-top-left {
    top: 0;
    left: -25rem;
  }
  .cnt-case .svg-icon__case svg {
    width: 100rem;
  }
  .cnt-case .content-title {
    margin-bottom: 30rem;
  }
	.list-card.grid-box.grid-3 {
		grid-template-columns: repeat(3, minmax(215px, 1fr));
		gap: 50rem 20rem;
	}
  .list-card li {
      border-top-left-radius: 20rem;
      border-top-right-radius: 20rem;
  }
  .archive .taxonomy-child .card-item .card-title {
    height: 70rem;
    padding: 15rem 12rem 8rem;
    font-size: 18rem;
  }
	.card-item .card-title {
    height: 90rem;
    padding: 40rem 12rem 8rem;
    font-size: 18rem;
	}
  .card-item .card-category {
    padding: 5rem 10rem 3rem;;
    font-size: 11rem;
    top: 10rem;
    left: 10rem;
  }
  .card-item .card-text {
    border-left-width: 10rem;
  }
	.card-item .card-text dt {
    margin-right: 10rem;
		font-size: 15rem;
	}
	.card-item .card-text dd {
		font-size: 15rem;
	}
  /* アーカイブページ */
  .filter-tabs {
    width: 100%;
		grid-template-columns: repeat(3, minmax(215px, 1fr));
    gap: 20rem;
  }
  .filter-tabs .button-round {
    height: 50rem;
    padding-left: 10rem;
    padding-right: 10rem;
    font-size: 17rem;
  }

}
@media screen and (min-width: 1025px) {
  .flame{
    padding: 140rem 60rem 60rem;
  }
  .flame-inner {
    padding: 50rem 30rem 80rem;
    border-radius: 10rem;
  }
  .cnt-case .svg-icon__case svg {
    width: 140rem;
  }
	.list-card.grid-box.grid-3 {
		grid-template-columns: repeat(3, minmax(240px, 1fr));
		gap: 50rem 30rem;
	}
  .archive .taxonomy-child .card-item .card-title {
    height: 75rem;
    padding: 15rem 12rem 8rem;
    font-size: 20rem;
  }
  .card-item .card-title {
    height: 100rem;
    padding: 45rem 12rem 8rem;
		font-size: 20rem;
	}
  .card-item .card-category {
    padding: 5rem 10rem 2rem;;
    font-size: 14rem;
    top: 12rem;
    left: 12rem;
  }
  /* アーカイブページ */
  .filter-tabs {
		grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 30rem;
  }
   .filter-tabs .button-round {
    height: 60rem;
    padding-left: 30rem;
    padding-right: 30rem;
    font-size: 20rem;
   }


}
@media screen and (min-width:1280px) {
  .cnt-case {
    padding-left: 100rem;
    padding-right: 100rem;
  }
  .flame {
    padding: 140rem 70rem 80rem;
    border-radius: 50rem;
  }
  .flame-inner {
    padding: 40rem 40rem 80rem;
    border-radius: 20rem 30rem;
  }
  .single .cnt-case .flame .english-label.deco-top-left,
  .archive .cnt-case .flame .english-label.deco-top-left {
    top: 0;
    left: -105rem;
  }
	.list-card.grid-box.grid-3 {
		gap: 50rem 40rem;
	}
  /* アーカイブページ */
  .filter-tabs {
    gap: 30rem 40rem;
  }


}








/* icon__case 実績や実例の紹介
--------------------------------------------------------------*/
.cnt-case .content-title {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 3;
}

.cnt-case .svg-icon__case {
	margin-right: 15rem;
}



/* list-card 実績や実例の紹介
--------------------------------------------------------------*/



	.list-card li {
		width: 100%;
		overflow: hidden;
	}

	.card-item .card-title {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		color: var(--white);
		font-weight: 500;
		line-height: 1.3;
		text-align: left;

	}
  .card-item .card-title .text-box {
  display: -webkit-box !important;  /* 強制適用 */
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

    }
	.grid-3 .card-item .img-box {
    position: relative;
    overflow: hidden;
  }
	.grid-2 .card-item .img-box:before {
		padding-top: 52%;
	}

	.grid-3 .card-item .img-box:before {
		padding-top: 75%;
	}
  .card-item .card-category {
    line-height: 1;
    background: var(--white);
    border-radius: 75px;
    position: absolute;

  }

  .archive .taxonomy-child .card-category {
  display: none;
  }


	.card-item .card-text {
    min-height: 55rem;
		padding: 5rem 5rem 0 5rem;
		text-align: left;
		font-weight: 500;
  	border-left-style: solid;
	}

	.card-item .card-text dt {
		font-weight: 500;
		text-align: center;
	}






/* 実績一覧
--------------------------------------------------------------*/


/* 詳細ページ　詳細
--------------------------------------------------------------*/
.single-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--white);
  border-top-right-radius: 75rem;
  border-bottom-right-radius: 75rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 5rem 50rem 0 20rem;
  width: 100%;
  min-height: 70rem;
  margin-bottom: 40rem;
  margin-left: -10rem;
  font-size: 20rem;
}

.single-page .detail-text {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0;
}
.detail-text dt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rem;
  max-height: 28rem;
  padding: 7rem 10rem 4rem;
  color: var(--white);
  font-size: 16rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 75rem;
  margin-left: 10rem;
  margin-right: 10rem;
}
.single-page .detail-text dd {
  display: block;
  text-align: justify;
  padding: 10rem 10rem 30rem;
  font-size: 14rem;
}
.single-page .detail-text dd.has-strong {
  padding: 0 10rem;
}
.single-page .detail-text dd strong {
  display: inline-block;
  width: 100%;
  margin-bottom:20rem;
  font-size: 17rem;
  font-weight: 500;
}
.single-page .detail-text dd .bg-flame {
  width: 100%;
  padding: 20rem;
  text-align: center;
  border-radius: 20rem;
}
.single-page .detail-text dd .bg-flame .title {
  margin-bottom: 10rem;
  font-size:20rem;
  font-weight: 500;;
}

/* 画像 */
.single-page .detail-photo {
  display: flex;
  width: 100%;
  margin-bottom: 10rem;
}
.single-page .detail-photo img {
  width: 100%;
  object-fit: cover;
  border-radius: 10rem;
  overflow: hidden;
}
.single-page .detail-photo.size-half {
  display: flex;
  justify-content: space-between;
  gap: 10rem;
}

@media screen and (min-width:769px) {
.single-title {
  width: 1024rem;
  min-height: 100rem;
  margin-bottom: 70rem;
  margin-left: -110rem;
  padding: 5rem 50rem 0 140rem;
  font-size: 35rem;
}

.single-page .detail-text {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30rem 40rem;
}
.detail-text dt {
  max-height: 32rem;
  padding: 10rem 10rem 5rem;
  font-size: 18rem;
}
.single-page .detail-text dd {
  padding: 0;
  font-size: 16rem;
}
.single-page .detail-text dd strong {
  font-size: 22rem;
}
/* 画像 */
.single-page .detail-photo {
  margin-bottom: 40rem;
}
.single-page .detail-photo img {
  border-radius: 20rem;
}
.single-page .detail-photo.size-half {
  gap: 40rem;
}
}
@media screen and (min-width:1280px) {
.single-title {
  margin-left: -210rem;
  padding: 5rem 50rem 0 240rem;
}
}


/* 768pxまでに効かせる */
@media screen and (max-width:768px) {
.single .flame {
  padding: 0;
}
/* .single .flame-inner {
  padding: 0;
} */
}




/* 詳細ページ　装飾
--------------------------------------------------------------*/
.single .deco-svg.svg-circle-curve {
  display: block;
  aspect-ratio: 430 / 580;
  height: auto;
  right: 0;
  bottom: 0;
  width: 30%;
}
@media screen and (min-width:769px) {
/* .single .deco-svg.svg-circle-curve {
  width: 30%;
} */
}
@media screen and (min-width:1025px) {
.single .deco-svg.svg-circle-curve {
  width: 30%;
}
}

/* 詳細ページ　ページネーション
--------------------------------------------------------------*/
.single-page .single-pagination {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 90%;
}
.single-page .single-pagination .button-round {
  width: 150rem;
  height: 35rem;
}
.single-page .single-pagination .button-round::before {
  content: "";
  width: 20px;
  height: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background:
    linear-gradient(var(--white) 0 0) 0 0 / 8px 8px,
    linear-gradient(var(--white) 0 0) 100% 0 / 8px 8px,
    linear-gradient(var(--white) 0 0) 0 100% / 8px 8px,
    linear-gradient(var(--white) 0 0) 100% 100% / 8px 8px;
  background-repeat: no-repeat;
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width:769px) {
.single-page .single-pagination {
  max-width: 500rem;
}
.single-page .single-pagination .button-round {
  width: 250rem;
  height: 50rem;
}
}
@media screen and (min-width:1025px) {
.single-page .single-pagination {
  max-width: 600rem;
}
}

/* アーカイブページ　装飾
--------------------------------------------------------------*/
.archive .deco-svg.svg-circle-case {
  display: block;
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: -1;
  width: 230rem;
  right: -120rem;
  bottom: -150rem;
}

@media screen and (min-width:769px) {
.archive .deco-svg.svg-circle-case {
  width: 600rem;
  right: -310rem;
  bottom: -270rem;
}
}

/* アーカイブページ ページネーション
--------------------------------------------------------------*/
.custom-pagination {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0 0 60rem;
}

/* ラッパー */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 15rem;
  max-width: 90%;
  position: relative;
  margin: 0 auto;
}
.pagination-wrapper .arrow {
  width: 70rem;
  text-align: center;
}
.single-pagination .arrow {
    width: 70rem;
    text-align: center;
}
  .pagination-wrapper .arrow a,
  .pagination-wrapper .arrow span {
    width: 100%;
  }
/* 無効状態 */
.pagination-wrapper .arrow.disabled span {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ページ番号リスト */
.pagination-list {
display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.pagination-list li {
  display: flex;

}

/* ページ番号 */
.pagination-list a,
.pagination-list span {
display: flex;
    justify-content: center;
    align-items: center;
    min-width: 36rem;
    height: 36rem;
    padding: 0 10rem;
    font-size: 18rem;
border-radius: 5rem;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination-list li:last-child a,
.pagination-list li:last-child span {
  border-right: none;
}

/* ホバー */
.pagination-list a:hover {
  background: var(--c0);
  color: var(--white);
}

/* 現在のページ */
.pagination-list .current {
  background: var(--c0);
  color: var(--white);
  position: relative;
  z-index: 1;
}

/* 省略記号 */
.pagination-list .dots {
  background: var(--white);
  cursor: default;
  pointer-events: none;
}

/* レスポンシブ */



@media (min-width: 769px) {
  .pagination-wrapper {
    width: 100%;
    max-width: 600rem;
  }

}




/* ページネーション arrow 位置とカラー設定 */
.single-page .single-pagination .arrow.prev::before,
.archive-page + .custom-pagination .arrow.prev::before {
    top: -1rem;
    left: 0;
    right: unset;
    transform: rotate(225deg);
}
.single-page .single-pagination .arrow.next::before,
.archive-page + .custom-pagination .arrow.next::before {
    top: -1rem;
    right: 0;
    left: unset;
    transform: rotate(45deg);
}






/* カラー設定
--------------------------------------------------------------*/
/* list-card　タイトル横アイコン カラー */
.page-c0 .svg-icon__case circle {
	stroke: var(--c0);
}

.page-c1 .svg-icon__case circle {
	stroke: var(--c1);
}

.page-c2 .svg-icon__case circle {
	stroke: var(--c2);
}

.page-c3 .svg-icon__case circle {
	stroke: var(--c3);
}

.page-c4 .svg-icon__case circle {
	stroke: var(--c4);
}

.page-c5 .svg-icon__case circle {
	stroke: var(--c5);
}

/* list-card　タイトル・フレームカラー */
.page-c0 .flame {
	background: var(--c0);
}
.page-c0 .card-title {
	background: var(--c0);
  text-shadow: 0px 0px 7px rgb(237 157 34);
}

.page-c1 .flame,
.page-c1 .card-title {
	background: var(--c1);
}

.page-c2 .flame,
.page-c2 .card-title {
	background: var(--c2);
}

.page-c3 .flame,
.page-c3 .card-title {
	background: var(--c3);
}

.page-c4 .flame,
.page-c4 .card-title {
	background: var(--c4);
}

.page-c5 .flame,
.page-c5 .card-title {
	background: var(--c5);
}
.archive .flame,
.single .flame {
	background: none!important;
}


/* list-card　テキスト装飾 */
.page-c0 .card-item .card-text {
	border-left-color: var(--c0);
}
.page-c1 .card-item .card-text {
	border-left-color: var(--c1);
}
.page-c2 .card-item .card-text {
	border-left-color: var(--c2);
}
.page-c3 .card-item .card-text {
	border-left-color: var(--c3);
}
.page-c4 .card-item .card-text {
	border-left-color: var(--c4);
}
.page-c5 .card-item .card-text {
	border-left-color: var(--c5);
}


/* 詳細ページ　背景カラーとテキストカラー */
.single-page.page-c0 .single-title,
.single-page.page-c0 .detail-text dt
.single-page.page-c0 .detail-text strong {
  background:var(--c0);
}
.single-page.page-c1 .single-title,
.single-page.page-c1 .detail-text dt {
  background:var(--c1);
}
.single-page.page-c2 .single-title,
.single-page.page-c2 .detail-text dt {
  background:var(--c2);
}
.single-page.page-c3 .single-title,
.single-page.page-c3 .detail-text dt {
  background:var(--c3);
}
.single-page.page-c4 .single-title,
.single-page.page-c4 .detail-text dt {
  background:var(--c4);
}
.single-page.page-c5 .single-title,
.single-page.page-c5 .detail-text dt {
  background:var(--c5);
}
.single-page.page-c0 .detail-text strong  {
  color: var(--c0);
}
.single-page.page-c1 .detail-text strong {
  color: var(--c1);
}
.single-page.page-c2 .detail-text strong {
  color: var(--c2);
}
.single-page.page-c3 .detail-text strong {
  color: var(--c3);
}
.single-page.page-c4 .detail-text strong {
  color: var(--c4);
}
.single-page.page-c5 .detail-text strong {
  color: var(--c5);
}


/* アーカイブページ　カテゴリフィルタボタン */
.filter-tabs .button-round {
  width: 100%;
	background: var(--white);
}
.page-c0 .filter-tabs .button-round {
	color: var(--c0);
	border: 1px solid var(--c0);
}

.page-c1 .filter-tabs .button-round {
	color: var(--c1);
	border: 1px solid var(--c1);
}

.page-c2 .filter-tabs .button-round {
	color: var(--c2);
	border: 1px solid var(--c2);
}

.page-c3 .filter-tabs .button-round {
	color: var(--c3);
	border: 1px solid var(--c3);
}

.page-c4 .filter-tabs .button-round {
	color: var(--c4);
	border: 1px solid var(--c4);
}

.page-c5 .filter-tabs .button-round {
	color: var(--c5);
	border: 1px solid var(--c5);
}
.filter-tabs .button-round.active {
	color: var(--white);
}
.page-c0 .filter-tabs .button-round.active {
	background: var(--c0);
}

.page-c1 .filter-tabs .button-round.active {
	background: var(--c1);
}

.page-c2 .filter-tabs .button-round.active {
	background: var(--c2);
}

.page-c3 .filter-tabs .button-round.active {
	background: var(--c3);
}

.page-c4 .filter-tabs .button-round.active {
	background: var(--c4);
}

.page-c5 .filter-tabs .button-round.active {
	background: var(--c5);
}


/* ページネーション カラー */
.archive-page + .custom-pagination.page-c0 .arrow::before {
  border-top-color: var(--c0);
  border-right-color: var(--c0);
}
.single-page.page-c1 .single-pagination .arrow::before,
.archive-page + .custom-pagination.page-c1 .arrow::before {
  border-top-color: var(--c1);
  border-right-color: var(--c1);
}
.single-page.page-c2 .single-pagination .arrow::before,
.archive-page + .custom-pagination.page-c2 .arrow::before {
  border-top-color: var(--c2);
  border-right-color: var(--c2);
}
.single-page.page-c3 .single-pagination .arrow::before,
.archive-page + .custom-pagination.page-c3 .arrow.prev::before{
  border-top-color: var(--c3);
  border-right-color: var(--c3);
}
.single-page.page-c4 .single-pagination .arrow::before,
.archive-page + .custom-pagination.page-c4 .arrow::before {
  border-top-color: var(--c4);
  border-right-color: var(--c4);
}
.single-page.page-c5 .single-pagination .arrow::before,
.archive-page + .custom-pagination.page-c5 .arrow::before {
  border-top-color: var(--c5);
  border-right-color: var(--c5);
}
/* アーカイブ　ページネーション 一覧へボタン カラー */
.page-c1 .pagination-list .current,
.page-c1 .pagination-list a:hover {
  background-color: var(--c1);
  border-color: var(--c1);
}
.page-c2 .pagination-list .current,
.page-c2 .pagination-list a:hover {
  background-color: var(--c2);
  border-color: var(--c2);
}
.page-c3 .pagination-list .current,
.page-c3 .pagination-list a:hover {
  background-color: var(--c3);
  border-color: var(--c3);
}
.page-c4 .pagination-list .current,
.page-c4 .pagination-list a:hover {
  background-color: var(--c4);
  border-color: var(--c4);
}
.page-c5 .pagination-list .current,
.page-c5 .pagination-list a:hover {
  background-color: var(--c5);
  border-color: var(--c5);
}