@charset "utf-8";

.sub-tab {margin-bottom:var(--space-60);}
.sub-tab ul {margin:calc(var(--space-5) * -1);}
.sub-tab ul li {flex:1; width:auto; padding:var(--space-5);}
.sub-tab ul li:last-child {margin-right:0;}
.sub-tab ul li a {text-align:center; padding:0 12px; display:flex; align-items:center; justify-content:center; height:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); background:#f1f1f1; border-radius:8px; font-weight:600; letter-spacing:-.03em; line-height:1.4em; color:#454545;}
.sub-tab ul li.active a {background:var(--color-primary); color:#fff;}

.s-head {margin-bottom:var(--space-35); position:relative; padding-left:30px; font-size:var(--font-size-34); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.s-head:before {content:''; position:absolute; left:0; top:0; width:10px; height:10px; background:var(--color-primary); border-radius:3px;}

.doc-cnt:not(:first-child) {border-top:1px solid #ddd; padding-top:var(--space-100); margin-top:var(--space-100);} 

.better {display:flex; align-items:center; gap:0 30px;}
.better .content {flex:1;}
.better .content h3 {margin-bottom:var(--space-20); font-size:var(--font-size-34); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.better .content h3 span {color:var(--color-primary);}
.better .content p {font-size:var(--font-size-18); font-weight:500; letter-spacing:-.03em; line-height:1.56em; color:#454545;}
.better .image {width:53.5%;}

.mission {display:flex; align-items:center; justify-content:center; gap:0 20px;}

.we-do {display:flex;}
.we-do .s-head {width:22%;}
.we-do .items {flex:1; display:grid; grid-template-columns:repeat(2, 1fr); gap:0 var(--space-40);}
.we-do .items .item {border-radius:20px; overflow:hidden; background:#f8f8f8;}
.we-do .items .img img {width:100%;}
.we-do .items .cnt {padding:var(--space-35) var(--space-20) var(--space-35) var(--space-30);}
.we-do .items .cnt .tit {margin-bottom:var(--space-15); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.we-do .items .cnt .list ul {display:flex; gap:7px 0; flex-wrap:wrap;}
.we-do .items .cnt .list ul li {padding-left:.5em; text-indent:-.5em; position:relative; width:50%; font-size:var(--font-size-14); font-weight:400; letter-spacing:-.03em; line-height:1.3em; color:#454545;}
.we-do .items .cnt .list ul li:before {content:'•';  margin-right:3px; color:var(--color-primary);}

.fable .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30) var(--space-40);}
.fable .items .item {border-radius:20px; overflow:hidden; padding:var(--space-25) var(--space-25) var(--space-35); background:#f5f7ff;}
.fable .items .ico img {height:clamp(40px, calc(72 / var(--inner) * 100vw), 72px);}
.fable .items .tit {margin:var(--space-30) 0 var(--space-20); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.fable .items .txt {font-size:var(--font-size-15); font-weight:400; line-height:1.6em; letter-spacing:-.03em; color:#454545;}

.esg {display:flex; align-items:center; gap:0 var(--space-150);}
.esg .image {width:40%; max-width:536px;}
.esg .content {flex:1;}
.esg .content .item {margin-bottom:var(--space-10); padding:var(--space-25) var(--space-30); border:1px solid #ddd; border-left-width:4px;}
.esg .content .item:last-child {margin-bottom:0;}
.esg .content .tit {margin-bottom:var(--space-15); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.esg .content .list ul {display:flex; gap:7px 0; flex-wrap:wrap;}
.esg .content .list ul li {padding-left:.5em; text-indent:-.5em; position:relative; width:50%; font-size:var(--font-size-14); font-weight:400; letter-spacing:-.03em; line-height:1.3em; color:#454545;}
.esg .content .list ul li:before {content:'•';  margin-right:3px; color:var(--color-primary);}
.esg .content .item1 {border-left-color:var(--color-primary);}
.esg .content .item2 {border-left-color:#7193fd;}
.esg .content .item3 {border-left-color:#a8bdff;}
.esg .content .item1 .tit {color:var(--color-primary);}
.esg .content .item2 .tit {color:#7193fd;}
.esg .content .item3 .tit {color:#a8bdff;}

.partners-title {margin-bottom:var(--space-60); font-size:var(--font-size-34); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.partners-title span {color:var(--color-primary);}

.partners ul {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-30);}
.partners ul li .img {border-radius:10px; overflow:hidden; border:1px solid #ddd; aspect-ratio:256/90;}
.partners ul li .img img {width: 100%; height: 100%; object-fit:contain;}

.biz-field .title {margin-bottom:var(--space-50); border-radius:20px; background:var(--color-primary); text-align:center; color:#fff; padding:var(--space-15) var(--space-30); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.biz-field .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-20);}
.biz-field .items .item {border-radius:20px; overflow:hidden; background:#f5f7ff;}
.biz-field .items .cnt {padding:var(--space-35) var(--space-25);}
.biz-field .items .cnt h4 {margin-bottom:var(--space-15); font-size:var(--font-size-22); font-weight:600; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.biz-field .items .cnt p {font-weight:400; color:#454545; line-height:1.63em;}

.management .item {display:flex; align-items:center; margin-bottom:var(--space-100);}
.management .item:last-child {margin-bottom:0;}
.management .image {width:50%;}
.management .content {flex:1; padding:0 var(--space-70);}
.management .content h3 {margin-bottom:var(--space-15); font-size:var(--font-size-30); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.management .content .list ul li {margin-bottom:3px; padding-left:.6em; text-indent:-.6em; position:relative; font-size:var(--font-size-18); font-weight:500; letter-spacing:-.03em; line-height:1.7em; color:#454545;}
.management .content .list ul li:last-child {margin-bottom:0;}
.management .content .list ul li:before {content:'•';  margin-right:3px; color:var(--color-primary);}
.management .content .txt {font-size:var(--font-size-18); font-weight:500; letter-spacing:-.03em; line-height:1.7em; color:#454545;}
.management .content .txt span {color:var(--color-primary);}
.management .content .desc {color:var(--color-primary); font-size:var(--font-size-18);}
.management .item:nth-child(even) {flex-direction:row-reverse;}
.management .item:nth-child(even) .content {display:flex; flex-direction:column; align-items:flex-end;}

.systematic .head {margin-bottom:var(--space-50); border-radius:20px; background:var(--color-primary); text-align:center; color:#fff; padding:var(--space-15) var(--space-30); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.systematic .items .item {padding-bottom:var(--space-100); margin-bottom:var(--space-100); border-bottom:1px solid #ddd; display:flex;}
.systematic .items .item:last-child {padding-bottom:0; margin-bottom:0; border-bottom:none;}
.systematic .items .title {display:flex; align-items:center; width:32.8%; font-size:var(--font-size-30); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.systematic .items .title span {margin-right:var(--space-25); font-size:2.93em; letter-spacing:-.03em; color:#e2e4ef;}
.systematic .items .content {flex:1; display:flex; gap:0 var(--space-40);}
.systematic .items .content .img {flex:1; position:relative;}
.systematic .items .content .img span {position:absolute; display:inline-block; left:var(--space-30); bottom:var(--space-30); color:#fff; font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em;}

.demand-0 {margin-bottom:var(--space-100); height:clamp(300px, calc(880 / var(--inner) * 100vw), 880px); position:relative;}
.demand-0 .inner {color:#fff; position:absolute; left:0; bottom:30%; width:100%;}
.demand-0 .contain {display:flex; flex-direction:column; align-items:flex-end;}
.demand-0 .inner h2 {margin-bottom:var(--space-20); font-size:var(--font-size-48); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.demand-0 .inner p {font-size:var(--font-size-18);}

.demand-1 {height:clamp(300px, calc(680 / var(--inner) * 100vw), 680px); display:flex; align-items:center; justify-content:center;}
.demand-1 .inner {padding:0 var(--space-30);}

.demand-2 {margin-bottom:var(--space-100); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-100); height:clamp(500px, calc(880 / var(--inner) * 100vw), 880px); position:relative; color:#fff;}
.demand-2 .logo {position:absolute; left:var(--space-50); top:var(--space-50);}
.demand-2 .text {padding:0 var(--space-30); text-align:center;}
.demand-2 .text h2 {font-size:var(--font-size-48); font-weight:400; letter-spacing:-.03em; line-height:1.2em;}
.demand-2 .circles {margin:var(--space-55) 0 var(--space-35); display:flex; justify-content:center;}
.demand-2 .circles .con {margin:0 -10px; width:clamp(130px, calc(240 / var(--inner) * 100vw), 240px); aspect-ratio:1/1; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:var(--font-size-24); font-weight:400; letter-spacing:-.03em; line-height:1.4em;}
.demand-2 .text p {margin-bottom:var(--space-45); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.demand-2 .text .label {border-radius:28px; display:inline-block; padding:var(--space-15) var(--space-20); font-size:var(--font-size-20); font-weight:400; letter-spacing:-.03em; line-height:1.4em; border:1px solid #fff;}

.demand-3 {height:clamp(300px, calc(680 / var(--inner) * 100vw), 680px); display:flex; align-items:center; justify-content:center;}
.demand-3 .inner {padding:0 var(--space-30);}

.demand-4 {height:clamp(300px, calc(680 / var(--inner) * 100vw), 680px); display:flex; align-items:center; justify-content:center; color:#fff;}
.demand-4 .inner {padding:0 var(--space-30);}
.demand-4 .inner p {text-align:center; font-size:var(--font-size-48); font-weight:600; letter-spacing:.02em;}

.kicademy-0 {height:clamp(300px, calc(880 / var(--inner) * 100vw), 880px); position:relative;}
.kicademy-0 .inner {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}

.kicademy-1 {height:880px; position:relative;}
.kicademy-1 .inner {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.kicademy-1 .inner .contain {display:flex; align-items:center; justify-content:space-between; gap:0 15px;}
.kicademy-1 .items {min-width:340px; padding:0 var(--space-40); border:1px solid #fb9097; background:#fff; border-radius:20px;}
.kicademy-1 .items .item {padding:var(--space-35) 0;}
.kicademy-1 .items .item + .item {border-top:1px solid #ddd;}
.kicademy-1 .items dl dt {margin-bottom:var(--space-15); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em; color:#ff5064;}
.kicademy-1 .items dl dd {font-weight:400; letter-spacing:-.03em; color:#454545;}
.kicademy-1 .items.items2 {border-color:#8baef3;}
.kicademy-1 .items.items2 dl dt {color:#4684ff;}

.zone-content {padding:var(--space-100) 0;}
.zone-content .group {display:flex; align-items:center;}
.zone-content .image {width:50%;}
.zone-content .text {flex:1; display:flex; align-items:center; justify-content:center; text-align:center;}
.zone-content .text p {font-size:var(--font-size-30); font-weight:700; letter-spacing:-.03em;}
.zone-content .group:nth-child(even) {flex-direction:row-reverse;}

.kicademy-2 {position:relative; height:clamp(300px, calc(880 / var(--inner) * 100vw), 880px);}
.kicademy-2:before {content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background:url('/images/sub/kicademy-2-acc.png') no-repeat center center / clamp(180px, calc(759 / var(--inner) * 100vw), 759px) auto;}
.kicademy-2 .inner {position:absolute; left:0; bottom:25%; width:100%; text-align:center;}

.kicademy-3 .content {padding:var(--space-110) 0 var(--space-30);}
.kicademy-3 .content .contain {display:flex; justify-content:space-between;}
.kicademy-3 .content .tit h2 {margin-bottom:var(--space-30); margin-top:var(--space-30); font-size:var(--font-size-40); font-weight:700; letter-spacing:.02em; line-height:1.4em;}
.kicademy-3 .content .txt {align-self:flex-end; font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; line-height:1.6em; color:#454545;}
.kicademy-3 .bg {height:clamp(200px, calc(660 / var(--inner) * 100vw), 660px);}

.field-0 {margin-bottom:var(--space-100); height:clamp(300px, calc(880 / var(--inner) * 100vw), 880px); display:flex; align-items:center; justify-content:center;}

.facility .group {display:flex; align-items:stretch;}
.facility .image {width:50%;}
.facility .text {background:url('/images/sub/facility-text.jpg') no-repeat center center / clamp(140px, calc(284 / var(--inner) * 100vw), 284px) auto; flex:1; display:flex; align-items:center; justify-content:center; text-align:center;} 
.facility .text p {font-size:var(--font-size-30); font-weight:700; letter-spacing:-.03em;}
.facility .group:nth-child(even) {flex-direction:row-reverse;}

.md {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-15);}
.md .item {height:clamp(200px, calc(600 / var(--inner) * 100vw), 600px); border-radius:20px; overflow:hidden; position:relative;}
.md .item .hover {opacity:0; transition:.3s; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--font-size-30); font-weight:600; letter-spacing:-.03em; line-height:1.4em;} 
.md .item:hover .hover {opacity:1;}

.concept .img {position:relative;}
.concept .img span {font-size:var(--font-size-30); font-weight:700; letter-spacing:-.03em; line-height:1.4em; display:inline-block; position:absolute; right:var(--space-25); bottom:var(--space-35);}

.ooozi-0 {margin-bottom:var(--space-100); height:clamp(500px, calc(880 / var(--inner) * 100vw), 880px); display:flex; align-items:center; justify-content:center;}

.marketing {display: flex; align-items: center; gap:0 var(--space-25);}
.marketing .item {box-shadow:0 17px 24px rgba(116,140,182,.2); height: clamp(200px, calc(315 / var(--inner) * 100vw), 315px); display: flex; flex-direction:column; align-items:center; justify-content: center; text-align:center; flex:1; border:1px solid var(--color-primary); border-radius:20px; padding:var(--space-30);}
.marketing .item .ico img {height:clamp(36px, calc(72 / var(--inner) * 100vw), 72px);}
.marketing .item h3 {margin:var(--space-25) 0 var(--space-15); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.marketing .item p {font-weight:400; letter-spacing:-.03em; line-height:1.6em; color: #454545;}
.marketing .plus img {height: clamp(30px, calc(51 / var(--inner) * 100vw), 51px);}

.pairings-1 {padding:var(--space-80) 0; background: url('/images/sub/pairings-bg1.jpg') no-repeat center center / cover; text-align:center; color: #fff;}
.pairings-1 h2 img {height:clamp(68px, calc(105 / var(--inner) * 100vw), 105px);}
.pairings-1 .text {margin:var(--space-90) 0 var(--space-50); font-size:var(--font-size-30); font-weight: 400; letter-spacing:-.03em; line-height: 1.33em;}
.pairings-1 .check-items {margin-bottom:var(--space-90); display: grid; grid-template-columns: repeat(2, 1fr); gap:var(--space-40);}
.pairings-1 .check-items .item {padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: clamp(140px, calc(200 / var(--inner) * 100vw), 200px); border:1px solid rgba(255,255,255,.5);}
.pairings-1 .check-items .item p {margin-top:var(--space-10); font-size:var(--font-size-18); font-weight: 400; letter-spacing:-.03em; line-height: 1.56em; color: #fff;}
.pairings-1 .biz h3 {margin-bottom:var(--space-30); font-size:var(--font-size-30); font-weight: 700; letter-spacing:-.03em; line-height: 1.4em;}
.pairings-1 .biz .items {display: flex; justify-content:center;}
.pairings-1 .biz .items .item {position: relative; padding: 0 var(--space-60);}
.pairings-1 .biz .items .item:not(:first-child):before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:85px; background:rgba(255,255,255,.3);}
.pairings-1 .biz .items .num {font-size:var(--font-size-18); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em; color: var(--color-primary);}
.pairings-1 .biz .items .tit {margin:var(--space-12) 0 var(--space-15); font-size:var(--font-size-22); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}
.pairings-1 .biz .items .txt {font-weight: 400; letter-spacing:-.03em; line-height: 1.4em;}

.pairings-2 {padding:var(--space-200) 30px; background: url('/images/sub/pairings-bg2.jpg') no-repeat center center / cover; text-align:center; color: #fff;}
.pairings-2 h2 {font-size:var(--font-size-34); font-weight: 600; letter-spacing:-.03em; line-height: 1.41em;}
.pairings-2 .bar {margin:var(--space-35) auto; width: 1px; height: clamp(30px, calc(90 / var(--inner) * 100vw), 90px); background: #fff;}
.pairings-2 p {font-size:var(--font-size-30); font-weight: 400; letter-spacing:-.03em; line-height: 1.4em;}

.pairings-3 {padding:var(--space-30) 0; display: block; background: url('/images/sub/pairings-bg3.jpg') no-repeat center center / cover; color: #fff;}
.pairings-3 .contain {height: clamp(130px, calc(640 / var(--inner) * 100vw), 640px); display: flex; align-items: flex-end;}
.pairings-3 p {text-decoration: underline; font-size:var(--font-size-20);}

.fable-intro {display: flex; align-items: center; gap:0 var(--space-40);}
.fable-intro .content {flex:1;}
.fable-intro .content h2 img {height:clamp(40px, calc(70 / var(--inner) * 100vw), 70px);}
.fable-intro .content .text {margin:var(--space-30) 0; font-size:var(--font-size-34); font-weight: 600; letter-spacing:-.03em; line-height: 1.35em;}
.fable-intro .content .desc ul li {margin-bottom:var(--space-15); padding-left: 35px; position: relative; font-size:var(--font-size-18); font-weight: 500; letter-spacing:-.03em; line-height: 1.4em; color: #454545;}
.fable-intro .content .desc ul li:last-child {margin-bottom:0;}
.fable-intro .content .desc ul li:before {content:''; position: absolute; left:0; top:.1em; width: 20px; height: 20px; background: url('/images/sub/desc-check.png') no-repeat center center / contain;}
.fable-intro .image {width: 50%;}

.work-process {display: grid; grid-template-columns: repeat(5, 1fr); gap:var(--space-20);}
.work-process .item {border-radius:20px; background: #f5f7ff; text-align:center; padding:var(--space-30) var(--space-30) var(--space-25);}
.work-process .item .num {margin:0 auto var(--space-15); border-radius:100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background: var(--color-primary); font-size:var(--font-size-18); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em; width: clamp(32px, calc(48 / var(--inner) * 100vw), 48px); height: clamp(32px, calc(48 / var(--inner) * 100vw), 48px);}
.work-process .item p {font-size:var(--font-size-22); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}

.why-fable {display: grid; grid-template-columns: repeat(3, 1fr); gap:0 var(--space-45); text-align:center;}
.why-fable .item p {margin-top:var(--space-30); font-size:var(--font-size-24); font-weight: 600; letter-spacing:-.03em; line-height: 1.42em;}

.strategy {display: flex; background: #ecf1ff; border-radius:20px; overflow: hidden;}
.strategy .text ul li {margin-bottom:var(--space-15); padding-left: clamp(20px, calc(35 / var(--inner) * 100vw), 35px); position: relative; font-size:var(--font-size-18); font-weight: 500; letter-spacing:-.03em; line-height: 1.4em; color: #454545;}
.strategy .text ul li:last-child {margin-bottom:0;}
.strategy .text ul li:before {content:''; position: absolute; left:0; top:.1em; width: clamp(16px, calc(20 / var(--inner) * 100vw), 20px); height: clamp(16px, calc(20 / var(--inner) * 100vw), 20px); background: url('/images/sub/desc-check.png') no-repeat center center / contain;}
.strategy .item {padding:var(--space-40); flex:1;}
.strategy .item .title {margin-bottom:var(--space-40); border-radius:20px; padding:var(--space-15); font-size:var(--font-size-24); font-weight: 600; letter-spacing:-.03em; line-height:1.33em; text-align:center; color: #fff; background: var(--color-primary);}
.strategy .item .text {padding-left:var(--space-60);}
.strategy .center {display: flex; justify-content: center; padding:var(--space-50) 0 var(--space-30); width:320px; border-radius:20px; overflow: hidden; background: #dfe7ff;}