@charset "utf-8";
/* CSS Document */
.section .cont-wrap>.title { margin-bottom: 30px; }
.section .cont-wrap .slogan { overflow: hidden; position: relative; height: 95px; background: linear-gradient(-45deg, #1652f0, #38BCEC, #23a6d5, #1652f0); background-size: 400% 400%; animation: gradient 5s ease infinite; }
@keyframes gradient {
    0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}
.section .cont-wrap .slogan .txt { padding: 30px 10px; text-align: center; font-size: 2.2rem; font-weight: 400; letter-spacing: -1px; position: absolute; z-index: 2; display: block; width: 100%; height: 100%; color: #fff; }
.section .cont-wrap .slogan:before { position: absolute; width: 150px; height: 150px; content: ''; background: #77D2FF; border-radius: 50%; left: -2%; bottom: 50px; z-index: 1; opacity: .3; }
.section .cont-wrap .slogan:after { position: absolute; width: 150px; height: 150px; content: ''; background: #77D2FF; border-radius: 50%; right: -2%; top: 50px; z-index: 1; opacity: .3; }

.section .cont-wrap .img { background: #f8f8f8; padding: 0 20px 50px; text-align: center; }
.section .cont-wrap .cont-text { background: #f8f8f8; padding: 50px 20px; text-align: center; }
.section01 .cont-wrap .cont-text h3 {font-size: 1.7rem; font-weight: 500; }

.section02 .cont-wrap img { padding: 50px 20px 0; }

.section03 .cont-wrap img { padding: 0 20px 0; }
.section03 .cont-wrap img.mg-t20{margin-top: 60px;}
.section03 .cont-wrap .cont-text h3 {font-size: 2rem; color: #122d56; letter-spacing: -0.5px; }


.section .cont-wrap .vision-intro { padding: 20px; border-radius: 5px; background: linear-gradient(-45deg, #1652f0, #38BCEC, #23a6d5, #1652f0); background-size: 400% 400%; animation: gradient 5s ease infinite; }
.section .cont-wrap .vision-intro .purpose { line-height: 1.6; color: #fff; font-size: 1.7rem; text-align: center; }

.section .cont-wrap .vision-work { margin-top: 10px; padding: 15px 20px; background: #f8f8f8; }
.section .cont-wrap .vision-work li { position: relative; padding-left: 14px; font-size: 1.4rem; line-height: 1.7; color: #333; }
.section .cont-wrap .vision-work li:not(:last-child) { margin-bottom: 5px; }
.section .cont-wrap .vision-work li:before { content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: #1652f0; }

.section03 .vision-block { display: flex; gap: 18px; align-items: stretch; margin-top: 10px; }
.section03 .vision-goals { position: relative; flex: 1; display: grid; gap: 10px; }
.section03 .vision-goals:after { content: '›'; position: absolute; right: -27px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; line-height: 40px; text-align: center; border-radius: 50%; background: linear-gradient(-45deg, #1652f0, #38BCEC, #23a6d5); border: 1px solid #cdd5db; color: #fff; font-weight: 900; font-size: 22px; z-index: 2; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.section03 .vision-goals li { display: flex; align-items: center; gap: 12px; background: #edf0f1; padding: 14px 16px; border-radius: 6px; }
.section03 .vision-goals .num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 30px; border-radius: 16px; font-weight: 700; color: #eaf3ff; background: #0a2a66; }
.section03 .vision-goals .txt { font-weight: 500; color: #111; letter-spacing: -0.3px; }

.section03 .vision-slogan { width: 400px; border: 3px solid transparent; border-radius: 8px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(-45deg, #1652f0, #38BCEC, #23a6d5, #1652f0) border-box; display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center; }
.section03 .vision-slogan p { font-size: 1.9rem; font-weight: 800; line-height: 1.5; letter-spacing: -1px; color: #0b2344; }

.section04 .tsp { background: #f8f8f8; padding: 50px; text-align: center; }
.section04 .tsp-lead { margin: 6px 0 14px; color: #2c2c2c; font-weight: 500; }
.section04 .tsp-badge { margin: 0 auto; max-width: 100%; width: 500px; padding: 10px 14px; background: #1c5bdc; color: #fff; font-weight: 700; text-align: center; border-radius: 22px; font-size: 1.6rem; }
.section04 .tsp-desc { margin-bottom: 18px; line-height: 1.75; color: #333; font-size: 1.6rem; padding: 20px 0 10px; font-weight: 500; }

.section04 .tsp-steps .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.section04 .tsp-steps .step { border-radius: 10px; padding: 14px 25px 12px; border: 1px solid #cfcfcf; background: #fff; position: relative; word-break: keep-all; }
.section04 .tsp-steps .step:after { content: '›'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; line-height: 22px; text-align: center; border-radius: 50%; background: #fff; border: 1px solid #cfcfcf; color: #666; font-weight: 700; z-index: 1; right: -22px; font-size: 25px; }
.section04 .tsp-steps .step:last-child:after { display: none; }
.section04 .tsp-steps .step-title { font-weight: 800; margin-bottom: 8px; color: #111; letter-spacing: -0.3px; }
.section04 .tsp-steps .step-list li { line-height: 1.6; color: #333; }
.section04 .tsp-steps .s1 { border-top: 6px solid #2a74ff; }
.section04 .tsp-steps .s2 { border-top: 6px solid #38bcec; }
.section04 .tsp-steps .s3 { border-top: 6px solid #7a4bd6; }
.section04 .tsp-steps .s4 { border-top: 6px solid #ff5b86; }

.section04 .tsp-flow { margin-top: 16px; }
.section04 .tsp-flow .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: center; }
.section04 .tsp-flow .flow li { border: 1px solid #cfcfcf; background: #fff; border-radius: 999px; padding: 10px 12px; text-align: center; font-weight: 600; color: #333; position: relative; }
.section04 .tsp-flow .flow li:after { content: '›'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; line-height: 25px; text-align: center; border-radius: 50%; background: #0a2a66; color: #fff; font-weight: 700; z-index: 1; right: -22px; font-size: 18px; }
.section04 .tsp-flow .flow li:last-child:after { display: none; }
.section04 .tsp-flow .flow li.highlight { background: #ff4f70; color: #fff; border-color: #ff4f70; }

@media all and (max-width: 650px) {
	.section .cont-wrap .slogan.fir-slogan { height: 115px;}
	.section .cont-wrap .slogan .txt {font-size: 1.7rem;}
	.section01 .cont-wrap .cont-text h3 {font-size: 1.5rem;}
	.section03 .cont-wrap img.mg-t20{margin-top: 30px;}
	.section .cont-wrap>.title {margin-bottom: 15px;}

	.section03 .vision-block { flex-direction: column-reverse; gap: 10px; }
	.section03 .vision-block br { display: none; }
	.section03 .vision-goals:after { display: none; }
	.section03 .vision-slogan { width: 100%; }
	.section03 .vision-slogan p { font-size: 1.7rem; }

	.section04 .tsp { padding: 30px 15px;}
	.section04 .tsp-steps .steps { grid-template-columns: 1fr; }
	.section04 .tsp-steps .step:after { transform: none; top: unset; bottom: -20px; right: 50%; transform: translateX(50%) rotate(90deg); }
	.section04 .tsp-flow .flow { grid-template-columns: 1fr; }
	.section04 .tsp-flow .flow li:after { transform: none; top: unset; bottom: -20px; right: 50%; transform: translateX(50%) rotate(90deg); background: #fff; color: #666; width: 25px; height: 25px; line-height: 20px; font-size: 16px; border: 1px solid #ddd; }
	.section04 .tsp-steps .s1 { padding: 15px 15px 25px;}
	.section04 .cont-wrap .slogan .txt { padding-top: 20px; font-size: 1.5rem; word-break: keep-all;}


	.section .cont-wrap .vision-intro .purpose {font-size: 1.5rem; word-break: keep-all;}
	.section .cont-wrap .vision-intro .purpose br { display: none; }
	.section .cont-wrap .vision-work li {font-size: 1.3rem; padding-left: 10px; word-break: keep-all;}
	.section .cont-wrap .vision-work li:before { top: 11px;}
	.section .cont-wrap .vision-goals li {font-size: 1.3rem;}
	.section .cont-wrap .vision-goals .num {font-size: 1.3rem;}
	.section .cont-wrap .vision-goals .txt {font-size: 1.3rem;}
	.section .cont-wrap .vision-slogan p {font-size: 1.5rem;}
	.section .cont-wrap .tsp-badge {font-size: 1.5rem;}
	.section .cont-wrap .tsp-desc {font-size: 1.3rem;}
	.section .cont-wrap .tsp-steps .step-title {font-size: 1.5rem;}
	.section .cont-wrap .tsp-steps .step-list li {font-size: 1.3rem;}
	.section .cont-wrap .tsp-flow .flow li {font-size: 1.3rem;}
}