#work .flex,
#work1 .flex,
#work2 .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}

#work1 .flex-head,
#work2 .flex-head{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	max-width:1400px;
}

#work .flex-item{
	width:49%;
	padding:30px;
	background-color:rgba(0,0,0,.9);
	display: flex;
	flex-direction: column;
}

#work1 .flex-head-img, #work2 .flex-head-img{width:49%;}
#work1 .flex-head-txt, #work2 .flex-head-txt{width:49%;}

#work .flex-row1,
#work1 .flex-row1,
#work2 .flex-row1{row-gap:20px;}

#work .flex-row2,
#work1 .flex-row2,
#work2 .flex-row2{row-gap:5px;}

#work .work-omote{
	border:solid 1px var(--color-base);
}

#work .work-ura{
	border:solid 1px var(--color-green2);
}

#work .work-img,
#work1 .work-img, 
#work2 .work-img{width:49%;margin-bottom:20px;}

#work .work-img img,
#work1 .work-img img, 
#work2 .work-img img{width:100%;}

#work .work-icon,
#work1 .work-icon,
#work2 .work-icon{
	width:32.5%;
	background-color:var(--color-white);
	padding:8px 3px;
	text-align:center;
	font-size:14px;
	font-weight:700;
	color:var(--color-bk);
	border-radius:5px;
}

#work .work-title{
	font-size:25px;
	font-weight:700;
	line-height:1.5rem;
	text-align:left;
	margin-bottom:30px;
}

#work .work-title span{
	font-size:40px;
	font-style:italic;
}

#work .f-c1{color:var(--color-base);}
#work .f-c2{color:var(--color-green);}


#work .sub-title,
#work1 .sub-title,
#work2 .sub-title {
    display: flex;
    align-items: center;
	font-size:16px;
	font-weight:700;
	margin:20px 0 10px 0;
}

#work .sub-title-line1:before,
#work .sub-title-line1:after,
#work1 .sub-title-line1:before,
#work1 .sub-title-line1:after,
#work2 .sub-title-line1:before,
#work2 .sub-title-line1:after{
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--color-base);
}

#work .sub-title-line2:before,
#work .sub-title-line2:after,
#work1 .sub-title-line2:before,
#work1 .sub-title-line2:after,
#work2 .sub-title-line2:before,
#work2 .sub-title-line2:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--color-green);
}

#work .sub-title:before,
#work1 .sub-title:before,
#work2 .sub-title:before {
    margin-right: 1rem;
}

#work .sub-title:after,
#work1 .sub-title:after,
#work2 .sub-title:after {
    margin-left: 1rem;
}

#work .checklist,
#work1 .checklist,
#work2 .checklist{margin-bottom:20px;}

#work .checklist li,
#work1 .checklist li,
#work2 .checklist li {
  position: relative;
  font-size:16px;
  font-weight:800;
  color:var(--color-white);
  text-align:left;
  line-height: 1.8;
  padding:5px 0 5px 35px;
}


#work .checklist li::before,
#work .checklist li::after,
#work1 .checklist li::before,
#work1 .checklist li::after,
#work2 .checklist li::before,
#work2 .checklist li::after {
    position: absolute;
    top: 50%;
    height: 10px;
    content: '';
}
#work .checklist1 li::before,
#work1 .checklist1 li::before,
#work2 .checklist1 li::before {
    left: 0;
    transform: translateY(-50%);
    width:25px;
	height:25px;
	border-radius:5px;
    background-color: var(--color-base);
}
#work .checklist1 li::after,
#work1 .checklist1 li::after,
#work2 .checklist1 li::after {
    left: .6em;
    transform: translateY(-75%) rotate(45deg);
    width: 6px;
    border-bottom: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}

#work .checklist2 li::before,
#work1 .checklist2 li::before,
#work2 .checklist2 li::before {
    left: 0;
    transform: translateY(-50%);
    width:25px;
	height:25px;
	border-radius:5px;
    background-color: var(--color-green);
}
#work .checklist2 li::after,
#work1 .checklist2 li::after,
#work2 .checklist2 li::after {
    left: .6em;
    transform: translateY(-75%) rotate(45deg);
    width: 6px;
    border-bottom: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}

#work .btn-box{
	width:100%;
	margin-top: auto;
}



#work .point-flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	align-items:center;
	column-gap:15px;
	row-gap:15px;
	border-bottom:solid 1px var(--color-gray3);
	border-top:solid 1px var(--color-gray3);
	padding:15px 0;
	margin-bottom:30px;
}

#work .point-icon{width:100px;}
#work .point-icon img{width:100%;}
#work .point-txt{
	width:55%;
	text-align:left;
}

#work .point-img{
	position: absolute;
	bottom:0;
	right:0;
}
#work .point-img img{width:180px;}

#work1 .work-omote-img img, #work2 .work-omote-img img{width:100%;}

#work .work-info-title{
	font-size:25px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	margin:40px 0 15px 0;
}

#work .work-info-flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap:1em;
}

#work .work-info-flex-item{
	width:49%;
	padding:1em;
	border:solid 1px var(--color-base);
	border-radius:1em;
	text-align:left;
}

#work .work-info-flex-title{
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	margin-bottom:10px;
	color:var(--color-base);
}

#work .work-info-flex-item ul{list-style-type: disc;padding-left:1em;}
#work .work-info-flex-item ul li{padding-bottom:5px;font-size:14px;line-height:1.5em;}

#work .txt-box ul{list-style-type: disc;padding-left:1em;padding-top:15px;padding-bottom:15px;}
#work .txt-box span{font-weight:700;}


@media screen and (max-width:1100px){
#work .work-icon{width:49%;}
}

@media screen and (max-width:768px){
	#work .flex-item{width:100%;padding:25px 15px 15px 15px;}
	#work1 .flex-head, #work2 .flex-head{width:100%;}
	#work1 .flex-head-img, #work2 .flex-head-img{width:100%;}
	#work1 .flex-head-txt, #work2 .flex-head-txt{width:80%;margin-left:auto;margin-right:auto;}
	#work .work-title{font-size:20px;text-align:center;}
	#work .work-title span{font-size:30px;}
	#work .main__btn__txt{font-size:14px;}
	#work .point-flex{
		flex-direction: column;
	}
	#work .point-txt{
		width:100%;
		text-align:left;
		margin-bottom:180px;
	}
	#work .point-img{
		position: absolute;
		bottom:0;
		right:0;
		left:0;
	}
	#work .work-info-flex-item{width:100%;}
}

@media screen and (max-width:599px){
	#work1 .flex-head-txt, #work2 .flex-head-txt{width:90%;}
	#work .work-info-flex{row-gap:0.5em;}
}