@charset "UTF-8";

/*******************************************************************************
	共通
 *******************************************************************************/
.breadcrumb {
	margin-bottom: 45px;
}
.single_work-header {
	display: flex;
	max-width: 1100px;
	margin: 0 auto;
	flex-direction: column;
}
.single_work-status {
	display: flex;
	flex-wrap: wrap;
	font-size: clamp(0.875rem, 0.506rem + 0.77vw, 1.063rem);
	column-gap: clamp(0.625rem, 0.01rem + 1.28vw, 0.938rem);
	align-items: center;
	row-gap: 10px;
}
.single_work-status time {
	margin-right: clamp(0rem, -0.615rem + 1.28vw, 0.313rem);
	font-weight: 500;
}
.single_work-pj {
	display: flex;
	min-width: clamp(5.625rem, 3.163rem + 5.13vw, 6.875rem);
	width: fit-content;
	min-height: clamp(1.563rem, 0.332rem + 2.56vw, 2.188rem);
	padding: 5px 15px;
	border-radius: clamp(0.781rem, 0.166rem + 1.28vw, 1.094rem);
	background-color: #969696;
	color: #ffffff;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}
.single_work-title {
	font-size: clamp(1.375rem, 0.637rem + 1.54vw, 1.75rem);
	line-height: clamp(2rem, 1.015rem + 2.05vw, 2.5rem);
	text-align: justify;
}
.work_compare-visual {
	display: flex;
	position: relative;
	width: 100%;
	column-gap: clamp(2.5rem, 0.492rem + 4.18vw, 4.375rem);
	justify-content: center;
}
.work_compare-item {
	display: flex;
	position: relative;
	max-width: 670px;
	color: #ffffff;
}
.work_compare-content {
	display: flex;
	width: 100%;
	padding: clamp(0.625rem, -0.044rem + 1.39vw, 1.25rem) clamp(1.25rem, -0.089rem + 2.79vw, 2.5rem) clamp(1.25rem, -0.089rem + 2.79vw, 2.5rem);
	border: 1px solid #ffffff;
	border-radius: 12px;
	flex-direction: column-reverse;

	row-gap: 20px;
}
.work_compare-title {
	display: flex;
	width: 100%;
	font-weight: 900;
	font-size: clamp(1rem, -0.205rem + 2.51vw, 2.125rem);
	word-break: keep-all;
	column-gap: clamp(0.938rem, 0.603rem + 0.7vw, 1.25rem);
	align-items: baseline;
}
.work_compare-title span:lang(en) {
	display: flex;
	width: 100%;
	font-size: clamp(0.438rem, -0.165rem + 1.26vw, 1rem);
	column-gap: clamp(0.938rem, 0.603rem + 0.7vw, 1.25rem);
	align-items: baseline;
}
.work_compare-title span:lang(en)::after {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ffffff;
	content: "";
}
.work_compare-img {
	max-width: 590px;
	width: 100%;

	aspect-ratio: 118/89;
}
.work_compare-img img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}
@media screen and (min-width: 601px) {
	.work_compare-visual::before , .work_compare-visual::after {
		position: absolute;
		top: 0;
		z-index: -1;
		width: 50%;
		height: 100%;
		content: "";
	}
	.work_compare-visual::before {
		left: 0;
		background-color: #0e68a0;
	}
	.work_compare-visual::after {
		right: 0;
		background-color: #16a080;
	}
	.work_compare-item {
		width: calc(50% - clamp(1.25rem, 0.246rem + 2.09vw, 2.188rem));
	}
	.work_compare-img {
		aspect-ratio: 118/89;
	}
}
@media screen and (max-width: 600px) {
	.work_compare-item {
		width: 100%;
		padding: 15px 20px;
	}
	.work_compare-item:nth-of-type(1) {
		background-color: #0e68a0;
	}
	.work_compare-item:nth-of-type(2) {
		background-color: #16a080;
	}
	.work_compare-img {
		aspect-ratio: 61/46;
	}
}
.work_slide-container {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	line-height: 1;
	column-gap: 2.5%;
}
.work_slide-content {
	display: flex !important;
	max-width: 380px;
	width: 31.6667%;
	flex-direction: column;
}
.work_slide-img {
	display: block;
	width: 100%;
	overflow: hidden;

	aspect-ratio: 4/3;
}
.work_slide-img img {
	width: 100%;
	object-fit: cover;
	object-position: center;
	height: 100%;
}
.work_slide-text {
	font-weight: 500;
	font-size: clamp(0.875rem, 0.778rem + 0.2vw, 0.938rem);
	line-height: clamp(1.375rem, 0.892rem + 1.01vw, 1.688rem);
	text-align: justify;
}
.work_arrow {
	position: absolute;
	width: 10px !important;
	height: auto !important;
	background-color: #a0a0a0 !important;
	pointer-events: all;
	cursor: pointer;

	clip-path: polygon(0 0, 0 100%, 100% 50%);
	aspect-ratio: 2/7;
}
.work_slide-container  .work_prev {
	right: calc(100% + 10px);
	transform: translateY(-50%) rotate(180deg);
}
.work_slide-container .work_next {
	left: calc(100% + 10px);
}
@media screen and (min-width: 768px) {
	.work_compare-content {
		row-gap: 20px;
	}
	.single_work-header {
		width: 95%;
		margin-bottom: 30px;

		row-gap: 20px;
	}
	.single_work-contents {
		margin-bottom: 80px;
	}
	.work_compare-visual {
		margin-bottom: 70px;
		padding: clamp(0.938rem, -0.736rem + 3.49vw, 2.5rem) 2.5% clamp(0.938rem, -0.401rem + 2.79vw, 2.188rem);
	}
	.work_slide-container {
		width: 95%;
		margin-bottom: 95px;
		flex-wrap: wrap;

		row-gap: 40px;
	}
	.work_slide-content {
		row-gap: 15px;
	}
}
@media screen and (max-width: 767px) {
	.work_compare-content {
		row-gap: 10px;
	}
	.single_work-contents {
		margin-bottom: 50px;
	}
	@media screen and (min-width: 601px) {
		.work_compare-visual {
			padding: 15px 20px;
		}
	}@media screen and (max-width: 600px) {
		.work_compare-visual {
			flex-direction: column;
		}
	}
	@media screen and (min-width: 401px) {
		.work_slide-content {
			width: 50%;
		}
		.work_slide-container .slick-slide {
			margin: 0 15px; /* 左右に余白を追加 */
		}

		.work_slide-container .slick-list {
			margin: 0 -15px; /* はみ出し防止でネガティブマージン */
		}
		.work_slide-container .work_arrow {
			top: calc(40% - 0.5em);
			transform: translateY(-40%);
		}
		.work_slide-container .work_prev {
			transform: translateY(-40%) rotate(180deg);
		}
	}
	@media screen and (max-width: 400px) {
		.work_slide-content {
			width: 100%;
		}
		.work_slide-container .slick-slide {
			margin: 0 10px; /* 左右に余白を追加 */
		}

		.work_slide-container .slick-list {
			margin: 0 -10px; /* はみ出し防止でネガティブマージン */
		}
		.work_slide-container .work_arrow {
			top: 45%;
			transform: translateY(-45%);
		}
		.work_slide-container .work_prev {
			transform: translateY(-45%) rotate(180deg);
		}
	}
	.single_work-header {
		width: calc(100% - 60px);
		margin-bottom: 25px;

		row-gap: 10px;
	}
	.work_compare-visual {
		margin-bottom: 45px;
	}
	.work_slide-container {
		width: calc(100% - 60px);
		margin-bottom: 35px;
	}
	.work_slide-content {
		row-gap: 5px;
	}
}
.work_issue-container {
	display: flex;
	max-width: 920px;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 65px;
	flex-direction: column;

	row-gap: 55px;
}
.work_issue-content {
	display: flex;
	max-width: 910px;
	width: 100%;
	justify-content: space-between;
	align-items: flex-end;
}
.work_issue-img {
	display: block;
}
#issue_challenge .work_issue-img {
	max-width: 130px;
	min-width: 80px;
	width: 14.2858%;

	aspect-ratio: 26/55;
}
#issue_suggestion .work_issue-img {
	max-width: 195px;
	min-width: 135px;
	width: 21.4286%;

	aspect-ratio: 3/4;
}
.work_issue-img img {
	width: 100%;
}
.work_issue-detail {
	display: flex;
	position: relative;
	border-radius: 20px;
	flex-direction: column;
}
.work_issue-detail::after {
	position: absolute;
	max-width: 50px;
	min-width: 20px;
	width: 7.2464%;
	content: "";

	mask-position: center top;
	-webkit-mask-position: center top;
	mask-image: url(../images1/work_issue-bubble.png);
	-webkit-mask-image: url(../images1/work_issue-bubble.png);
	mask-size: 100%;
	-webkit-mask-size: 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	aspect-ratio: 5/4;
}
#issue_challenge .work_issue-detail , #issue_challenge .work_issue-detail::after {
	background-color: rgba(14, 104, 160, 0.1);
}
#issue_suggestion .work_issue-detail , #issue_suggestion .work_issue-detail::after {
	background-color: rgba(22, 160, 128, 0.1);
}
.work_issue-detail * {
	text-align: justify;
}
.work_issue-detail h2 {
	font-size: clamp(1.375rem, 0.533rem + 1.75vw, 1.688rem);
	line-height: normal;
}
.work_issue-detail p {
	font-size: clamp(0.875rem, 0.538rem + 0.7vw, 1rem);
	line-height: clamp(1.5rem, 0.489rem + 2.11vw, 1.875rem);
}
@media screen and (min-width: 768px) {
	.work_issue-container {
		width: 95%;
		margin-bottom: 65px;

		row-gap: 55px;
	}
	.work_issue-content {
		justify-content: space-between;
		align-items: flex-end;
	}
	#issue_challenge {
		margin-left: auto;
		flex-direction: row-reverse;
	}
	.work_issue-detail {
		max-width: 690px;
		width: 75.8241%;
		min-height: 260px;
		padding: 35px 30px 30px 50px;

		row-gap: 20px;
	}
	.work_issue-detail::after {
		bottom: 30px;
		max-width: 50px;
		min-width: 20px;
		width: 7.2464%;

		mask-image: url(../images1/work_issue-bubblepc.png);
		-webkit-mask-image: url(../images1/work_issue-bubblepc.png);
		aspect-ratio: 5/4;
	}
	#issue_challenge .work_issue-detail::after {
		left: 100%;
		transform: rotateY(180deg);
	}
	#issue_suggestion .work_issue-detail::after {
		right: 100%;
	}
}
@media screen and (max-width: 767px) {
	.work_issue-container {
		width: calc(100% - 40px);
		margin-bottom: 30px;

		row-gap: 25px;
	}
	.work_issue-content {
		position: relative;
		padding-bottom: 40px;
		flex-direction: column-reverse;
	}
	.work_issue-img {
		position: absolute;
		bottom: 0;
		opacity: 0.05;
	}
	#issue_challenge .work_issue-img {
		right: 25px;
	}
	#issue_suggestion .work_issue-img {
		right: -15px;
	}
	.work_issue-detail {
		width: 100%;
		padding: 25px 20px 15px;

		row-gap: 15px;
	}
	.work_issue-detail::after {
		top: 100%;
		min-width: 20px;
		width: 75px;
		width: 7.2464%;

		mask-image: url(../images1/work_issue-bubblemb.png);
		-webkit-mask-image: url(../images1/work_issue-bubblemb.png);
		aspect-ratio: 5/4;
	}
	.work_issue-detail::after {
		right: 80px;
	}.work_issue-detail h2 {
		text-align: center;
	}
	@media screen and (min-width: 375px) {
	}
}

.works_guide-table {
	max-width: 1000px;
	margin: 0 auto;
}
.works_guide-title , .works_guide-text {
	border: 1px solid #707070;
	background-clip: padding-box;
}
.works_guide-title {
	background-color: #a5a5a5;
	color: #ffffff;
	font-weight: bold;
	font-size: clamp(1rem, 0.663rem + 0.7vw, 1.125rem);
	text-align: center;
}
.works_guide-text {
	width: 100%;
	font-weight: 500;
	font-size: clamp(0.875rem, 0.707rem + 0.35vw, 0.938rem);
	line-height: clamp(1.25rem, 1.082rem + 0.35vw, 1.313rem);
}
@media screen and (min-width: 768px) {
	.works_guide-table {
		width: 95%;
		margin-bottom: 55px;
		border-collapse: separate;
		border-spacing: 0 10px;
	}
	.works_guide-title , .works_guide-text {
		min-height: 45px;
	}
	.works_guide-title {
		max-width: 190px;
		min-width: 140px;
		width: 19%;
		padding: 8.5px 0;
	}
	.works_guide-text {
		padding: 10px 0;
		padding-right: 15px;
		padding-left: 3%;
		border-left: none !important;
	}
}
@media screen and (max-width: 767px) {
	.works_guide-table {
		width: calc(100% - 60px);
		margin-bottom: 40px;
		border-collapse: collapse;
		border-spacing: 0;
	}
	.works_guide-title , .works_guide-text {
		display: block;
		width: 100%;
	}
	.works_guide-title {
		padding: 7px 20px;
		border: none;
		text-align: justify;
	}
	.works_guide-text {
		padding: 4px 20px;
	}
}
.back_works-link {
	display: flex;
	max-width: 290px;
	width: 100%;
	margin: 0 auto;
	padding: 5.5px 0;
	border: 2px solid #3362c6;
	border-radius: 25px;
	background-color: #3362c6;
	color: #ffffff;
	font-weight: bold;
	font-size: 18px;
	column-gap: 20px;
	justify-content: center;
	align-items: center;
	transition: all 0.4s;
}
.back_works-link:hover {
	background-color: #ffffff;
	color: #3362c6;
}
.back_works-link i {
	font-size: 35px;
}


.extra_works-container {
	display: flex;
	flex-direction: column;
}
.extra_works-container > h2 {
	display: flex;
	overflow: hidden;
	max-width: 1000px;
	width: 95%;
	margin: 0 auto;
	font-weight: 500;
	font-size: clamp(1.25rem, 0.071rem + 2.46vw, 1.688rem);
	text-align: center;
	word-break: keep-all;
	column-gap: clamp(0.938rem, -4.115rem + 10.53vw, 2.813rem);
	justify-content: center;
	align-items: center;
}
.extra_works-container > h2::before , .extra_works-container > h2::after {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #707070;
	content: "";
}
@media screen and (min-width: 768px) {
	.extra_works-container {
		row-gap: 60px;
	}
	.extra_works-container > h2 {
		width: 95%;
	}.common_contact-link {
		margin-top: 115px;
	}
	.main_container {
		padding-bottom: 170px;
	}
}
@media screen and (max-width: 767px) {
	.extra_works-container {
		row-gap: 30px;
	}
	.common_works-nav {
		padding: 0 30px;
	}
	.extra_works-container > h2 {
		width: calc(100% - 40px);
	}
	.common_contact-link {
		margin-top: 60px;
	}
	.main_container {
		padding-bottom: 115px;
	}
}


/*.works_nav-slide .common_works-title {
	height: 3em;
}*/
.works_nav-slide .slick-slide {
	margin: 0 clamp(0.938rem, 0.486rem + 0.94vw, 1.25rem); /* 左右に余白を追加 */
}

.works_nav-slide .slick-list {
	margin: 0 -clamp(0.938rem, 0.486rem + 0.94vw, 1.25rem); /* はみ出し防止でネガティブマージン */
}
.works_nav-slide .work_arrow {
	top: calc(60%);
	transform: translateY(-60%);
	width: clamp(0.625rem, -0.277rem + 1.88vw, 1.25rem) !important;
}
.works_nav-slide .work_prev {
	right: calc(100% + clamp(0rem, -16.25rem + 20vw, 2.5rem));
	transform: translateY(-60%) rotate(180deg);
}
.works_nav-slide .work_next {
	left: calc(100% + clamp(0rem, -16.25rem + 20vw, 2.5rem));
}