@charset "UTF-8";

/* index -------------------------------- */
.works-index-wrap {
	padding: 133px 0;
	@media only screen and (max-width: 1920px) {
		padding: 7vw 0;
	}
	@media only screen and (max-width: 767px) {
		padding: 10vw 0;
	}
}

.works-index-list {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	@media only screen and (max-width: 767px) {
		flex-wrap: wrap;
		gap: 1.9vw;
	}
}

.works-index-listitem {
	text-align: center;
	width: 20%;
	@media only screen and (max-width: 1366px) {
    width: 15.3vw;
	}
	@media only screen and (max-width: 767px) {
		width: calc(50% - 7.5px);
	}
}

.works-index-anchor {
	display: inline-block;
	background-color: #fff;
	border-bottom: 6px solid #E60012;
	width: 100%;
	height: 100%;
	@media only screen and (max-width: 1365px) {
		border-bottom: 0.6vw solid #E60012;
	}
	@media only screen and (max-width: 767px) {
		border-bottom: 1.1vw solid #E60012;
	}
}

.works-index-flex {
	@media only screen and (max-width: 767px) {
		display: flex;
		align-items: center;
		padding: 3.6vw 2.5vw 2.5vw 2.1vw;
	}
}

.works-index-icon {
	position: relative;
	border: 3px solid #E60012;
	border-radius: 100%;
	width: 124px;
	height: 124px;
  margin: 2vw auto 0 auto;
	@media only screen and (max-width: 1366px) {
		border: 0.3vw solid #E60012;
		width: 9vw;
		height: 9vw;
	}
	@media only screen and (max-width: 767px) {
    border: 0.5vw solid #E60012;
    width: 11vw;
    height: 11vw;
		margin: 0;
	}
}
.works-index-icon img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 52px;
	@media only screen and (max-width: 1365px) {
		width: 4.1vw;
	}
	@media only screen and (max-width: 767px) {
		width: 5vw;
	}
}
.works-index-icon img.seikei {
	width: 47px;
	@media only screen and (max-width: 1365px) {
		width: 3.4vw;
	}
	@media only screen and (max-width: 767px) {
		width: 4.7vw;
	}
}
.works-index-icon img.setsubi {
	width: 66px;
	@media only screen and (max-width: 1365px) {
		width: 5vw;
	}
	@media only screen and (max-width: 767px) {
		width: 6.2vw;
	}
}

.works-index-title-box {
	display: flex;
  align-items: center;
	justify-content: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin: 49px 0 38px 0;
  @media only screen and (max-width: 1365px) {
  	margin: 3.7vw 0 2.7vw 0;
  	font-size: 1.48vw;
	}
	@media only screen and (max-width: 767px) {
  	justify-content: space-between;
  	margin: 0 auto;
	  font-size: clamp(16px, calc(3.571vw + 2.61px), 30px);
  	letter-spacing: 0;
  	width: calc(100% - 11vw);
	}
	@media only screen and (max-width: 370px) {
	  font-size: 3.9vw;
	}
}

.works-index-title-box span {
	padding-right: 10px;
	@media only screen and (max-width: 1365px) {
		padding-right: 0.6vw;
	}
	@media only screen and (max-width: 767px) {
		text-align: left;
		padding-left: 1.8vw;
		padding-right: 0;
		line-height: clamp(20.6px, calc(4.694vw + 3px), 36px);
	}
}

.works-index-title-box .arrow {
	display: inline-block;
  background-color: #2E2E2E;
	border: 1px solid #2E2E2E;
  border-radius: 100%;
  width: 24px;
  height: 24px;
	padding: 5px;
  transition: .3s ease-out;
  transform: rotate(90deg);
  @media only screen and (max-width: 1365px) {
	 	width: 1.8vw;
	  height: 1.8vw;
  	padding: 2.4%;
	}
	@media only screen and (max-width: 767px) {
	 	width: 6vw;
	  height: 6vw;
  	padding: calc(1.964vw - 3.065px);
	}
}

.works-index-title-box .arrow path {
	fill: #fff;
}

@media (hover: hover) {
	.works-index-anchor:hover .works-index-title-box .arrow {
		background-color: transparent;
		border: 1px solid #E60012;
	}
	.works-index-anchor:hover .works-index-title-box .arrow path {
		fill: #E60012;
	}
}


/* contents -------------------------------- */
.works-contents-wrap {
	padding: 32.784px 0 129px 0;
	@media only screen and (max-width: 1920px) {
		padding: 32.784px 0 6.8vw 0;
	}
	@media only screen and (max-width: 1366px) {
		padding: 2.4vw 0 6.8vw 0;
	}
	@media only screen and (max-width: 767px) {
		padding: 4.1vw 0 15.9vw 0;
	}
}
.works-contents-wrap.with_bg {
	background-image: url('../images/works/contents_bg.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  @media only screen and (max-width: 767px) {
		background-image: url('../images/works/contents_bg_sp.png');
	}
}

.works-contents-wrap + .works-contents-wrap {
	padding: 98.352px 0 129px 0;
	@media only screen and (max-width: 1920px) {
		padding: 98.352px 0 6.8vw 0;
	}
	@media only screen and (max-width: 1366px) {
		padding: 7.2vw 0 6.8vw 0;
	}
	@media only screen and (max-width: 767px) {
		padding: 13vw 0 15.9vw 0;
	}
}

.js-works-contents-swiper .swiper-slide {
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	padding-top: 34.5%;
	@media only screen and (max-width: 767px) {
		padding-top: 44.5%;
	}
}

.swiper-pagination-bullets {
	position: static !important;
  margin-top: 1.25vw !important;
	@media only screen and (max-width: 767px) {
  	margin-top: 3.25vw !important;
  }
}

.swiper-pagination-bullet-active {
	background: #E60012;
}

.works-contents-lead-area {
	display: flex;
	align-items: center;
	padding-top: 50.542px;
	@media only screen and (max-width: 1366px) {
		padding-top: 3.7vw;
	}
	@media only screen and (max-width: 767px) {
		flex-wrap: wrap;
		padding-top: 28.875px;
	}
}

.works-contents-lead-icon-box {
	padding-right: 57px;
	@media only screen and (max-width: 1366px) {
		padding-right: 4.2vw;
	}
}

.works-contents-lead-icon {
	position: relative;
	background-color: #fff;
	border-radius: 100%;
	width: 346.71px;
	height: 346.71px;
	@media only screen and (max-width: 1920px) {
		width: 18.2vw;
		height: 18.2vw;
	}
	@media only screen and (max-width: 767px) {
		width: 32.2vw;
		height: 32.2vw;
	}
}
.works-contents-lead-icon.red {
	background-color: #E60012;
}

.works-contents-lead-icon-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	text-align: center;
	width: 100%;
}

.works-contents-lead-icon img {
	width: 95.25px;
  padding-bottom: 0.7vw;
  @media only screen and (max-width: 1920px) {
		width: 5vw;
	}
  @media only screen and (max-width: 767px) {
		width: 11vw;
	}
}
.works-contents-lead-icon.red img {
	filter: grayscale(1) brightness(1000%);
}
.works-contents-lead-icon img.icon-setsubi {
	width: 114.3px;
	margin-top: -2vw;
	@media only screen and (max-width: 1920px) {
		width: 6vw;
	}
  @media only screen and (max-width: 767px) {
		margin-top: -4.5vw;
		width: 12vw;
	}
}

.works-contents-lead-title {
	color: #E60012;
	font-size: 66.9607px;
	@media only screen and (max-width: 1920px) {
		font-size: 3.515vw;
	}
	@media only screen and (max-width: 767px) {
		font-size: 7.47vw;
	}
}
.works-contents-lead-title.font-small {
	font-size: 53.34px;
	@media only screen and (max-width: 1920px) {
		font-size: 2.8vw;
	}
	@media only screen and (max-width: 767px) {
		font-size: 4.87vw;
	}
}
.works-contents-lead-icon.red .works-contents-lead-title {
	color: #fff;
}

.works-contents-lead-desc-box {
	@media only screen and (max-width: 767px) {
		width: calc(100% - (32.2vw + 4.2vw));
	}
}
.works-contents-lead-desc-box.white,
.works-contents-lead-desc-box.white + .works-contents-lead-desc {
	color: #fff;
}

.works-contents-lead-desc-heading {
	font-size: 32px;
	font-weight: 700;
	padding-bottom: 45px;
	@media only screen and (max-width: 1365px) {
		font-size: 2.3vw;
		padding-bottom: 1.8vw;
	}
	@media only screen and (max-width: 767px) {
		font-size: 5.15vw;
	  line-height: 1.6;
	}
}

.works-contents-lead-desc {
	font-size: 20px;
	font-weight: 700;
  line-height: 2;
  @media only screen and (max-width: 1365px) {
		font-size: 1.47vw;
  	line-height: clamp(2.3vw, calc(3.896vw - 12.24px), 3vw);
	}
	@media only screen and (max-width: 767px) {
		font-size: clamp(16px, calc(0.510vw + 14.08px), 18px);
    line-height: 2.14;
    letter-spacing: 0.9px;
    width: 100%;
    padding-top: 5.8vw;
	}
}

.works-contents-list-area {
	display: flex;
	justify-content: space-between;
	padding-top: 72px;
	gap: 20px;
	@media only screen and (max-width: 1366px) {
		padding-top: 5.3vw;
		gap: 0;
	}
	@media only screen and (max-width: 767px) {
		flex-wrap: wrap;
		padding-top: 8.1vw;
		gap: 3vw;
	}
}

.works-contents-list-box {
	background-color: #fff;
	width: 19.7vw;
	@media only screen and (max-width: 767px) {
		width: 100%;
	}
}

.works-contents-list-heading {
	display: inline-block;
	-webkit-clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);
	background-color: #2E2E2E;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	min-width: 236px;
  padding: 24.7px 21px 24.7px 11.5px;
  @media only screen and (max-width: 1920px) {
		min-width: 12.4vw;
  	padding: 1.3vw 2.5vw 1.3vw 1.6vw;
	}
  @media only screen and (max-width: 1366px) {
  	font-size: 2.05vw;
	}
	@media only screen and (max-width: 767px) {
  	min-width: calc(0.1735 * 100vw + 58.69px);
		text-align: left;
  	font-size: clamp(19px, calc(1.0204vw + 15.17px), 23px);
  	padding: clamp(12px, calc(-0.314vw + 14.68px), 13.5px) 8vw clamp(12px, calc(-0.314vw + 14.68px), 13.5px) 18.75px;
	}
	@media only screen and (max-width: 374px) {
  	font-size: 5.1vw;
  	padding: clamp(12px, calc(-0.314vw + 14.68px), 13.5px) 8vw clamp(12px, calc(-0.314vw + 14.68px), 13.5px) 5vw;
	}
}

.works-contents-list-area.red .works-contents-list-heading {
	background-color: #E60012;
}

.works-contents-list-text {
  font-size: 16px;
  font-weight: 700;
  padding: 47.5px 40px;
  line-height: 1.95;
  @media only screen and (max-width: 1366px) {
  	font-size: 1.175vw;
  	padding: 2.5vw 2.1vw;
	}
	@media only screen and (max-width: 767px) {
  	font-size: clamp(14px, calc(0.5102vw + 12.087px), 16px);
    padding: 5.5vw 4.8vw 7.8vw 4.8vw;
    line-height: 1.95;
    letter-spacing: 0.2px;
	}
}

.works-contents-toList-btn-area {
	display: flex;
	justify-content: end;
}

.works-contents-toList-btn {
	display: flex;
  align-items: center;
	justify-content: end;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin-top: 59px;
  @media only screen and (max-width: 1365px) {
  	margin-top: 4.3vw;
  	font-size: 1.45vw;
	}
	@media only screen and (max-width: 767px) {
  	margin-top: 8vw;
  	font-size: clamp(14.06px, calc(1.793vw + 7.3385px), 21.09px);
  	letter-spacing: 0;
	}
}

.works-contents-toList-btn span {
	margin-right: 0.8vw;
	@media only screen and (max-width: 1365px) {
		margin-right: 0.8vw;
	}
	@media only screen and (max-width: 767px) {
		margin-right: 11.25px;
		line-height: 1.2;
    border-bottom: 1px solid #000;
	}
}

.works-contents-toList-btn .arrow {
	display: inline-block;
  background-color: #2E2E2E;
	border: 1px solid #2E2E2E;
  border-radius: 100%;
  width: 46px;
  height: 46px;
	padding: 13.66px;
  transition: .3s ease-out;
  transform: rotate(90deg);
  @media only screen and (max-width: 1366px) {
	 	width: 3.4vw;
	  height: 3.4vw;
  	padding: 1vw;
	}
	@media only screen and (max-width: 767px) {
    width: 6vw;
    height: 6vw;
    padding: calc(1.531vw - 1.24px);
	}
	@media only screen and (max-width: 374px) {
		width: 22.5px;
    height: 22.5px;
    padding: 5.7px;
	}
}

.works-contents-toList-btn .arrow path {
	fill: #fff;
}


.works-contents-toList-btn-area.white .works-contents-toList-btn {
	color: #fff;
}

.works-contents-toList-btn-area.white .works-contents-toList-btn .arrow {
	background-color: #E60012;
	border: #E60012;
}
.works-contents-toList-btn-area.white .works-contents-toList-btn span {
    border-bottom: 1px solid #fff;
}

@media (hover: hover) {
	.works-contents-toList-btn:hover .arrow {
		background-color: transparent;
		border: 1px solid #E60012;
	}
	.works-contents-toList-btn:hover .arrow path {
		fill: #E60012;
	}
	.works-contents-toList-btn-area.white .works-contents-toList-btn:hover .arrow {
		background-color: #fff;
	}
}

/* setsubi table */
.works-contents-setsubi-table-area {
	border-top: 1px solid #2E2E2E;
	border-bottom: 1px solid #2E2E2E;
	margin-top: 85px;
	@media only screen and (max-width: 1366px) {
		margin-top: 7vw;
	}
}

.works-contents-setsubi-table-area + .works-contents-setsubi-table-area {
	border-top: none;
	margin-top: 0;
}

.works-contents-setsubi-table-title {
	position: relative;
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	padding: 2.8vw 20px;
	@media only screen and (max-width: 1920px) {

	}
	@media only screen and (max-width: 1366px) {

	}
	@media only screen and (max-width: 767px) {
		font-size: clamp(20px, calc(0.03703 * 100vw + 6.114px), 34.515px);
		padding: 6.8vw 20px;
	}
	@media only screen and (max-width: 374px) {
		font-size: 5.7vw;
	}
}

.works-contents-setsubi-table-btn-box {
	position: absolute;
	top: 50%;
	right: 2.3vw;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	@media only screen and (max-width: 767px) {
		right: clamp(1.125px, calc(0.02256 * 100vw - 7.335px), 9.971px);
	}
}

.works-contents-setsubi-table-btn {
	position: relative;
	background-color: #2E2E2E;
	border-radius: 100%;
	width: 45px;
	height: 45px;
  @media only screen and (max-width: 374px) {
		width: 12vw;
	  height: 12vw;
	}
}
.works-contents-setsubi-table-btn::before {
  content: "";
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
  width: 2px;
  height: 15px;
  background: #fff;
	transform-origin: center center;
	transition: .3s ease;
	@media only screen and (max-width: 374px) {
  	height: 4vw;
	}
}
.works-contents-setsubi-table-btn::after {
  content: "";
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
  width: 15px;
  height: 2px;
  background: #fff;
  @media only screen and (max-width: 374px) {
  	width: 4vw;
	}
}
.works-contents-setsubi-table-btn.active::before {
	transform: translate(-50%, -50%) rotate(90deg);
	-webkit-transform: translate(-50%, -50%) rotate(90deg);
}
@media (hover: hover) {
	.works-contents-setsubi-table-btn:hover {
		cursor: pointer;
	}
}

.works-contents-setsubi-table-accordion {
	display: none;
	width: 82.2%;
  margin: 0 auto;
  padding-top: 1vw;
  @media only screen and (max-width: 767px) {
		width: 100%;
  	padding-top: 15.75px;
	}
}

.works-contents-setsubi-table-accordion .works-contents-setsubi-table-box:last-child {
	padding-bottom: 110.838px;
	@media only screen and (max-width: 1366px) {
		padding-bottom: 5.8vw;
	}
	@media only screen and (max-width: 767px) {
		padding-bottom: clamp(50px, calc(-2.551vw + 69.566px), 60px);
	}
}

.works-contents-setsubi-table-box + .works-contents-setsubi-table-box {
	padding-top: 85.995px;
	@media only screen and (max-width: 1366px) {
		padding-top: 4.5vw;
	}
	@media only screen and (max-width: 767px) {
		padding-top: 47.25px;
	}
}

.works-contents-setsubi-table-box h5 {
	font-size: 20px;
	font-weight: 700;
	padding-bottom: 23.222px;
	@media only screen and (max-width: 1366px) {
		padding-bottom: 1.7vw;
		font-size: 1.47vw;
	}
	@media only screen and (max-width: 767px) {
		padding-bottom: 4.7vw;
		font-size: 16px;
	}
}

.works-contents-setsubi-table-inner {
	position: relative;
	@media only screen and (max-width: 767px) {
		overflow-x: auto;
  	-webkit-overflow-scrolling: touch;
  	padding-bottom: 27px;
	}
}
.works-contents-setsubi-table-inner::-webkit-scrollbar {
    height: 4px;  /* スクロールバーの太さ */
  }
  .works-contents-setsubi-table-inner::-webkit-scrollbar-thumb {
    background: #E60012;   /* スクロールつまみ */
    border-radius: 4px;
  }
  .works-contents-setsubi-table-inner::-webkit-scrollbar-track {
    background: #BEBEBE;
  }

/* スマホ時 スクロール可能のポップアップ */
.works-contents-setsubi-table-scroll-hint {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 11px;
  width: 166px;
  height: 127px;
  pointer-events: none;
  transition: 0.2s;
  text-align: center;
  .icon-inner {
  	align-items: center;
  	position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		width: 100%;
  }
  .icon-hint {
  	width: auto;
  }
  span {
  	display: block;
    font-size: 14px;
    padding-top: 14px;
    font-weight: 400;
  }
}
.works-contents-setsubi-table-scroll-hint.scroll-hint-01 {
	@media only screen and (max-width: 716px) {
  	display: block;
  }
}
.works-contents-setsubi-table-scroll-hint.scroll-hint-02 {
	@media only screen and (max-width: 767px) {
  	display: block;
  }
}

table.setsubi_TablePattern_01 {
	width: 100%;

	tr {
		border-bottom: 1px solid #2E2E2E;
	}
	tr.tr_th {
		border-bottom: none;
	}

	th {
		background-color: #2E2E2E;
		vertical-align: middle;
		color: #fff;
		font-size: 20px;
		font-weight: 700;
		padding: 12.294px 13px;
	}
	th + th {
		border-left: 1px solid #fff;
	}
	th.th_01 {
		width: 33.5%;
	}
	th.th_02 {
		width: 26.6%;
	}
	th.th_03 {
		width: 23.3%;
	}
	th.th_04 {
		width: 16.6%;
	}

	td {
		background-color: #fff;
		vertical-align: middle;
		font-size: 20px;
		font-weight: 700;
    text-align: center;
    line-height: 1.2;
		letter-spacing: -0.8px;
		padding: 20.49px 13px;
		height: 68.1634px;
		span {
			font-size: 14px;
		}
	}

	@media only screen and (max-width: 1366px) {
		th {
			font-size: 1.47vw;
			padding: 0.9vw 1vw;
		}
		td {
		font-size: 1.47vw;
		padding: 1.5vw 1vw;
		height: 4.99vw;
			span {
				font-size: 0.95vw;
			}
		}
	}
	@media only screen and (max-width: 767px) {
		min-width: 677px;
  	th {
			font-size: 18px;
			padding: 2.6vw 10px;
		}
		td {
		font-size: 16px;
		padding: 17px 10px;
		height: 55.125px;
			span {
				display: block;
				font-size: 14px;
				line-height: 1.5;
			}
		}
	}
}

table.setsubi_TablePattern_02 {
	width: 100%;

	tr {
		border-bottom: 1px solid #2E2E2E;
	}
	tr.tr_th {
		border-bottom: none;
	}

	th {
		background-color: #2E2E2E;
		vertical-align: middle;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		padding: 13.66px 13px;
	}
	th + th {
		border-left: 1px solid #fff;
	}
	th.th_01 {
		width: 12.5%;
	}
	th.th_02 {
		width: 15.4%;
	}
	th.th_03 {
		width: 8.5%;
	}
	th.th_04 {
		width: 11.3%;
	}
	th.th_05 {
		width: 6.8%;
	}
	th.th_06 {
		width: 11.5%;
	}
	th.th_07 {
		width: 16.2%;
	}
	th.th_08 {
		width: 11.1%;
	}
	th.th_09 {
		width: 6.7%;
	}

	td {
		background-color: #fff;
		vertical-align: middle;
		font-size: 16px;
		font-weight: 700;
    text-align: center;
		line-height: 1.2;
		letter-spacing: -0.8px;
		padding: 20.49px 13px;
		height: 68.1634px;
		span {
			font-size: 14px;
		}
	}
	td.NoPadding {
		padding: 0;
	}

	@media only screen and (max-width: 1366px) {
		th {
      font-size: 1.1713vw;
      padding: 1vw 1vw;
		}
		td {
		font-size: 1.1713vw;
		padding: 1.5vw 1vw;
		height: 4.99vw;
			span {
				font-size: 0.95vw;
			}
		}
	}
	@media only screen and (max-width: 767px) {
		min-width: 1800px;
  	th {
			font-size: 18px;
			padding: 2.6vw 10px;
		}
		td {
		font-size: 16px;
		height: 55.125px;
			span {
				font-size: 13px;
			}
		}
	}
}

ul.setsubi_TablePattern_02_subList {
	width: 100%;
	li {
		padding: 16.8168px 6px;
		@media only screen and (max-width: 1366px) {
			padding: 0.88vw clamp(1px, calc(0.00836 * 100vw - 5.415px), 6px);
		}
		@media only screen and (max-width: 767px) {
			padding: 7.5px 6px;
		}
	}
	li +li {
		border-top: 1px solid #bfbfbf
	}
	li.subList_heading {
		text-align: left;
	}
}