.research-wrap {background: url(../img/content/bg-results.jpg) center center / cover no-repeat;color: #fff;border-radius: 10px;padding: 75px 20px 79px;}
.research-wrap p.tit {font-size: 48px;line-height: 50px;font-weight: 800;text-align: center;text-transform: uppercase;margin-bottom: 100px;}

.research-wrap .icon-box {display: flex;gap: 15px;max-width: 1030px;margin: 0 auto;}
.research-wrap .icon-box > li {flex: 1;box-shadow: 0px 14px 40px 0px #00000021;backdrop-filter: blur(25px);-webkit-backdrop-filter: blur(25px);background: #0000004D;text-align: center;place-items: center;padding: 62px 30px 52px;position: relative;border-radius: 20px;    display: flex;flex-direction: column;align-items: center;}
.research-wrap .icon-box > li:before {
    content: "";position: absolute;inset: 0;padding: 0.7px;border-radius: 20px;
    background: linear-gradient(137.89deg, rgba(255, 255, 255, 0.2408) 21.88%, rgba(255, 255, 255, 0.043) 34.69%, rgba(255, 255, 255, 0.043) 67.27%, rgba(255, 255, 255, 0.2322) 77.41%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;
}

.research-wrap .icon-box > li .txt01 {font-size: 40px;letter-spacing: -0.02em;font-weight: 800;line-height: 1;margin-bottom: 15px;}
.research-wrap .icon-box > li .txt02 {background: url(../img/common/ico-results-mark.png) no-repeat center bottom;font-size: 19px;letter-spacing: -0.02em;font-weight: 500;line-height: 1.4;margin-bottom: 25px;padding-bottom: 33px;}
.research-wrap .icon-box > li .icons {width: 100px;height: 100px;border-radius: 50%;text-align: center;align-items: center;justify-content:center;display:flex;overflow: hidden;transition: all 0.7s ease;} 
.research-wrap .icon-box > li .icons img {transition: all 0.7s ease;max-width: 100%;height: auto;display: block;}
.research-wrap .icon-box > li:hover .icons img{transform: rotateY(180deg);}
.research-wrap .icon-box > li:nth-child(1) .icons {background: #43C1C3;}
.research-wrap .icon-box > li:nth-child(2) .icons {background: #004BAE;}
.research-wrap .icon-box > li:nth-child(3) .icons {background: #5D00AE;}


.wrap-tit {max-width: 1056px;height: 350px;margin: 0 auto;position: relative;box-sizing: border-box;text-align: center;align-content: center;}
.wrap-tit .txt01 {font-size: 40px;line-height: 1.1;letter-spacing: -0.02em;font-weight: 800;color: #001A54;position: relative;z-index: 2;margin-bottom: 29px;}
.wrap-tit .txt02 {font-size: 20px;line-height: 28px;letter-spacing: -0.01em;font-weight: 600;color: #333333;position: relative;z-index: 2;}

.wrap-tit .mark-inner {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;margin-top: 6px;}
.wrap-tit .mark-inner > p {color: rgb(247 247 247);font-family: Prompt;font-weight: 800;font-size: 200px;line-height: 0.75;letter-spacing: 0.01em;text-transform: uppercase;z-index: 0;}
.wrap-tit .mark-inner > p:nth-child(1) {text-align: start;}
.wrap-tit .mark-inner > p:nth-child(2) {text-align: end;}  
.wrap-tit .mark-inner > p span {margin-left: -45px;}


.wrap-list {position: relative;margin-top: 100px;}
.wrap-list:after {content: '';display: block;position: absolute;bottom: 100%;left: 50%;width: 16px;height: 100px;background: url(../img/content/ico-mark-bottom.png) no-repeat 0 0 / 100%;top: -169px;transform: translateX(-50%);}
.wrap-list > ul {display: flex;gap: 14px;}
.wrap-list > ul > li {flex: 1;padding: 20px 30px 32px;text-align: center;border-radius: 10px;color: #fff;box-sizing: border-box;align-content: center;min-height: 452px;position: relative;overflow: hidden;}
.wrap-list > ul > li .txt01 {font-size: 24px;font-weight: 800;line-height: 1.2;letter-spacing: -0.01em;margin-bottom: 26px;}
.wrap-list > ul > li .txt02 {font-size: 16px;font-weight: 500;line-height: 1.45;letter-spacing: -0.02em;}
.wrap-list > ul > li:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;transition: transform 0.5s ease;transform: scale(1);}
.wrap-list > ul > li:hover:after {transform: scale(1.06);}
.wrap-list > ul > li:nth-child(1):after {background: url(../img/content/img-results-list-01.jpg) no-repeat 0 0 / 100%;background-size: cover;}
.wrap-list > ul > li:nth-child(2):after {background: url(../img/content/img-results-list-02.jpg) no-repeat 0 0 / 100%;background-size: cover;}
.wrap-list > ul > li:nth-child(3):after {background: url(../img/content/img-results-list-03.jpg) no-repeat 0 0 / 100%;background-size: cover;}


.wrap-item > ul {display: grid;grid-template-columns: repeat(2, 1fr);gap: 8px;}
.wrap-item > ul > li a {display: flex;border-radius: 10px;background: #EFF3F6;padding: 25px 30px;align-items: center;justify-content: space-between;gap: 10px;}
.wrap-item > ul > li p {font-size: 18px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.4;color: #001A54;}
.wrap-item > ul > li .btns {width: 45px;height: 45px;background: #004BAE;border-radius: 50%;text-align: center;align-content: center;transition: transform 0.5s ease;flex: none;}
.wrap-item > ul > li:hover .btns {transform: rotate(-45deg);}
 
@media (max-width:1400px){
	.wrap-tit .mark-inner > p {font-size: calc(200 / 1400 * 100vw);}
	.wrap-list > ul > li .txt02 br {display: none;} 
}

@media (max-width:1024px){
	.research-wrap .icon-box > li {padding: 62px 20px 52px;}
	.wrap-tit {padding: 60px 0px 90px;height: unset;}
	.wrap-tit .mark-inner > p span {margin-left: -20px;}
	.wrap-list > ul > li {min-height: 400px;padding: 20px 20px 32px;}
	.wrap-item > ul > li a {padding: 20px 20px;}
	.wrap-item > ul > li .btns {width: 40px;height: 40px;}
	
}

@media (max-width:768px){
	.research-wrap {padding: 50px 20px 50px;}
	.research-wrap p.tit {font-size: 32px;margin-bottom: 30px;line-height: 1.2;}
	.research-wrap .icon-box {flex-direction: column;}
	.research-wrap .icon-box > li {padding: 40px 20px 36px;}
	.research-wrap .icon-box > li .icons {width: 80px;height: 80px;margin: auto;}
	.research-wrap .icon-box > li .icons img {width: 36px;}
	.research-wrap .icon-box > li .txt01 {font-size: 30px;}
	.research-wrap .icon-box > li .txt02 {font-size: 18px;margin-bottom: 20px;padding-bottom: 28px;}
	
	.wrap-list {margin-top: 80px;}
	.wrap-list:after {top: -145px;}
	
	.wrap-list > ul {flex-direction: column;}
	.wrap-list > ul > li {min-height: unset;padding: 50px 20px 32px;}
	.wrap-list > ul > li .txt02 br {display: block;}
	
	.wrap-item > ul {grid-template-columns: repeat(1, 1fr);}
	
	.wrap-tit .txt01 {font-size: 32px;}
	.wrap-tit .txt02 {font-size: 19px;}
	.wrap-tit .mark-inner > p span {margin-left: 0;}
}

@media (max-width:350px){
	.research-wrap p.tit {font-size: 30px;}
	.research-wrap .icon-box > li .txt01 {font-size: 28px;}
}