@charset "utf-8";

section h5 { color: #333; font-size: 32px; line-height: 1.2; font-weight: 500; text-align: center; }
section h3 { font-size: 50px; line-height: 1.2; font-weight: 300; text-align: center; }
section h3 span { display: inline-block; color: #1A73E8; font-weight: 800; box-shadow: inset 0 -12px 0 #1A73E833 } 
.subtitle { position: relative; width: fit-content; margin: 0 auto 24px; padding: 14px 28px; background: #fff; font-size: 22px; line-height: 1.2; box-shadow: 0px 4px 15px 0px #00000026; border-radius: 100px; }
.subtitle:after { position: absolute; bottom: -13px; left: 50%; display: block; content:''; clear: both; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid #fff; transform: translateX(-50%); }
.subtitle span { color: #1A73E8; font-weight: 700; }

/* visual */
.kids-visual { margin-top: 96px; padding: 224px 0; position: relative; background: url('../images/web/sub/kids/kids_visual-bg.png')no-repeat center; }
.kids-visual h4 { width: fit-content; margin: 0 auto 24px; color: #aaa; font-size: 50px; font-family: 'GmarketSans'; font-weight: 700; line-height: 1.15; letter-spacing: -0.08em; }
.kids-visual h2 { width: fit-content; margin: 0 auto; color: #05C3D5; font-size: 120px; font-family: 'GmarketSans'; font-weight: 700; line-height: 1; letter-spacing: -0.08em; }
.kids-visual > p { margin: 24px auto 28px; color: #fff; font-size: 28px; font-weight: 500; text-align: center; }
.kids-visual b { display: block; width: fit-content; margin: 0 auto; padding: 0 22px; background: #05C3D5; color: #333; font-size: 20px; font-weight: 800; line-height: 44px; box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.15); border-radius: 100px; } 


/* concern */
.concern { position: relative; padding-top: 120px; background: #4183FE; }
.concern h3 { position: relative; margin-bottom: 38px; color: #fff; font-weight: 300; z-index: 1; }
.concern h3 span { color: #FFEB00; font-weight: 800; box-shadow: inset 0 -12px 0 rgba(255,255,255,0.1) }
.concern:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #F5F5F5; border-radius: 0 100px 0 0; z-index: 2; }
.concern:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #F5F5F5; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.concern .bg { position: relative; width: fit-content; margin: 0 auto; text-align: center; z-index: 1;}
.concern .bg:before { position: absolute; bottom: 0; left: calc(50% - 82px); transform: translateX(-50%); display: block; content:''; clear: both; width: 998px; height: 840px; background: url('../images/web/sub/kids/concern_bg-shadow.png')no-repeat bottom center; z-index: 0; }
.concern .bg img { position: relative; margin-left: 60px; z-index: 1;}
.concern .bg p { position: absolute; width: fit-content; margin: 0 auto; padding: 16px 28px; font-size: 24px; font-weight: 700; line-height: 1.2; box-shadow: 0px 7.78px 18.68px 0px rgba(0,0,0,0.15); border-radius: 100px; } 
.concern .bg p:nth-of-type(1) { left: -62px; bottom: calc(0% + 204px); background: #222; color: #fff; transform: translateY(-50%); z-index: 2; }
.concern .bg p:nth-of-type(1):after { position: absolute; bottom: -12px; right: 168px; display: block; content:''; clear: both; width: 0; height: 0; border-top: 7px solid #222; border-right: 7px solid #222; border-bottom: 7px solid transparent; border-left: 7px solid transparent; } 
.concern .bg p:nth-of-type(2) { right: -20px; bottom: calc(0% + 116px); background: #fff; color: #333; transform: translateY(-50%); z-index: 2; }
.concern .bg p:nth-of-type(2):after { position: absolute; bottom: -12px; right: 74px; display: block; content:''; clear: both; width: 0; height: 0; border-top: 7px solid #fff; border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #fff; } 

/* learning */
.learning { position: relative; padding: 80px 0 168px; background: #F5F5F5; }
.learning:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; z-index: 2; }
.learning:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.learning h5 { line-height: 2; font-weight: 300; } 
.learning h3 span { margin-bottom: 52px;  line-height: 1.28; }
.learning .instance { display: flex; grid-column-gap: 24px; width: 100%; max-width: 1196px; margin: 0 auto; }
.learning .instance li { width: calc(50% - 12px); background: #fff; border-radius: 16px; } 
.learning .instance li .type { display: flex; align-items: center; justify-content: center; padding: 30px 0; border-radius: 16px 16px 0 0; }
.learning .instance li .type p { display: flex; grid-column-gap: 8px; align-items: center; color: #fff; font-size: 24px; line-height: 1.333; font-weight: 700; }
.learning .instance li .content { position: relative; display: flex; align-items: center; justify-content: center; padding: 42px 0; border-radius: 0 0 16px 16px; }
.learning .instance li .content::after { position: absolute; top: 50%; left: 50%; display: block; content:''; clear: both; width: 376px; height: 376px; background: #f1f1f1; border-radius: 100%; transform: translate(-50%, -50%); }
.learning .instance li .content > li { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 160px; padding: 0 32px; color: #fff; font-size: 20px; letter-spacing: -0.05em; line-height: 1.2; text-align: center; border-radius: 100%; z-index: 2; }


.learning .instance li:nth-of-type(1) .type { background: #999; }
.learning .instance li:nth-of-type(1) .type p:after { display: inline-flex; justify-content: center; align-items: center; content:''; clear: both; width: 32px; height: 32px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><mask id="a" width="25.456" height="25.456" x="-4.615" y="-4.728" fill="%23000" maskUnits="userSpaceOnUse"><path fill="%23fff" d="M-4.615-4.728h25.456v25.456H-4.615z"/><path fill-rule="evenodd" d="M3.085 1.714 1.828 2.97 6.858 8l-5.03 5.03 1.257 1.256 5.03-5.03 5.027 5.028 1.257-1.257L9.37 8 14.4 2.972l-1.257-1.257-5.028 5.028-5.029-5.03Z" clip-rule="evenodd"/></mask><path fill="%23888" fill-rule="evenodd" d="M3.085 1.714 1.828 2.97 6.858 8l-5.03 5.03 1.257 1.256 5.03-5.03 5.027 5.028 1.257-1.257L9.37 8 14.4 2.972l-1.257-1.257-5.028 5.028-5.029-5.03Z" clip-rule="evenodd"/><path fill="%23888" d="m1.828 2.97-.707-.706-.707.707.707.707.707-.707Zm1.257-1.256.707-.707-.707-.708-.707.708.707.707ZM6.857 8l.707.707L8.271 8l-.707-.707L6.857 8Zm-5.03 5.03-.706-.708-.707.707.707.707.707-.707Zm1.258 1.256-.707.707.707.707.707-.707-.707-.707Zm5.03-5.03.706-.706-.707-.707-.707.707.707.707Zm5.027 5.028-.707.707.707.708.707-.707-.707-.708Zm1.257-1.257.707.707.707-.707-.707-.707-.707.707ZM9.37 8l-.707-.707L7.957 8l.707.707L9.371 8ZM14.4 2.972l.707.708.707-.708-.707-.707-.707.707Zm-1.257-1.257.707-.707-.707-.707-.707.707.707.707ZM8.114 6.743l-.707.707.707.707.707-.707-.707-.707ZM2.535 3.678 3.792 2.42 2.378 1.007 1.121 2.264l1.414 1.414Zm5.03 3.615-5.03-5.03-1.414 1.415 5.03 5.029 1.413-1.414Zm-5.03 6.443 5.03-5.03L6.15 7.294l-5.03 5.029 1.415 1.414Zm1.257-.157-1.257-1.257-1.414 1.414 1.257 1.257 1.414-1.414Zm3.615-5.03-5.03 5.03 1.415 1.414 5.03-5.03L7.406 8.55Zm6.442 5.028L8.82 8.55 7.407 9.964l5.028 5.027 1.414-1.414Zm-.157-1.257-1.257 1.257 1.414 1.415 1.257-1.258-1.414-1.414ZM8.664 8.707l5.028 5.027 1.414-1.414-5.028-5.027-1.414 1.414Zm5.028-6.442L8.664 7.293l1.414 1.414 5.028-5.027-1.414-1.415Zm-1.258.157 1.258 1.258 1.414-1.415-1.257-1.257-1.415 1.414ZM8.822 7.45l5.028-5.028-1.415-1.414-5.027 5.028L8.821 7.45ZM2.378 2.42l5.03 5.03L8.82 6.036l-5.029-5.03-1.414 1.415Z" mask="url(%23a)"/></svg>')no-repeat center,#fff; border-radius: 100%; }
.learning .instance li:nth-of-type(1) .content { border: 1px solid #999; border-top: 0; }
.learning .instance li:nth-of-type(1) .content:before { position: relative; top: 50%; left: calc(50% - 292px); display: block; content:''; clear: both; width: 408px; height: 408px; border: 1px dashed #aaa; border-radius: 100%; }
.learning .instance li:nth-of-type(1) .content > li { position: absolute; background: #999; }
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(1) { top: 80px; left: 50%; transform: translateX(-50%); z-index: 3;} 
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(1):before { position: absolute; bottom: -33px; display: block; content:''; clear: both; width: 56px; height: 56px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="13" fill="none"><path fill="%23AAA" fill-rule="evenodd" d="M20 0H0v4h20V0Zm0 9H0v4h20V9Z" clip-rule="evenodd"/></svg>')no-repeat center, #fff; border: 2px solid #ddd;  border-radius: 100px;} 
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(2) { bottom: 120px; left: 138px; }
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(3) { bottom: 120px; right: 139px;}

.learning .instance li:nth-of-type(2) .type { background: #1A73E8; }
.learning .instance li:nth-of-type(2) .type p:after { display: inline-flex; justify-content: center; align-items: center; content:''; clear: both; width: 32px; height: 32px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none"><path fill="%231A73E8" stroke="%231A73E8" d="m3.642 7.38-.35-.344-.35.342L1.651 8.64l-.365.356.363.358 5.085 5.002.35.345.351-.345L18.351 3.618l.362-.356-.362-.357-1.283-1.261-.35-.345-.351.344-9.282 9.123L3.642 7.38Z"/></svg>')no-repeat center,#fff; border-radius: 100%; }
.learning .instance li:nth-of-type(2) .content { border: 1px solid #1A73E8; border-top: 0; }
.learning .instance li:nth-of-type(2) .content:before { position: relative; top: 50%; left: calc(50% - 292px); display: block; content:''; clear: both; width: 408px; height: 408px; border: 1px dashed #1A73E8; border-radius: 100%; }

.learning .instance li:nth-of-type(2) .content > li:nth-of-type(1) { left: 43px; background: #C9DBF2; color: #1A73E8; }
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(2) { background: #87B3EE; color: #fff; z-index: 3; }
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(2):before { position: absolute; left: -29px; display: block; content:''; clear: both; width: 48px; height: 48px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="22" fill="none"><path fill="%231A73E8" fill-rule="evenodd" d="M16.254 2.43 13.284.714l-2.968 5.143H.428v3.428h7.908l-1.98 3.429H.429v3.428h3.95l-2.236 3.872 2.97 1.714 3.224-5.586h9.235v-3.428h-7.255l1.98-3.429h5.275V5.858h-3.296l1.98-3.429Z" clip-rule="evenodd"/></svg>')no-repeat center, #fff; border: 2px solid #1A73E8;  border-radius: 100px; } 
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(2):after { position: absolute; right: -29px; display: block; content:''; clear: both; width: 48px; height: 48px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="22" fill="none"><path fill="%231A73E8" fill-rule="evenodd" d="M16.254 2.43 13.284.714l-2.968 5.143H.428v3.428h7.908l-1.98 3.429H.429v3.428h3.95l-2.236 3.872 2.97 1.714 3.224-5.586h9.235v-3.428h-7.255l1.98-3.429h5.275V5.858h-3.296l1.98-3.429Z" clip-rule="evenodd"/></svg>')no-repeat center, #fff; border: 2px solid #1A73E8;  border-radius: 100px; } 
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(3) { right: 43px; background: #1A73E8; color: #fff; }

/* habit */
.habit { position: relative; padding: 80px 0 170px; background: #fff; }
.habit:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #EFF6FE; border-radius: 0 100px 0 0; z-index: 2; }
.habit:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #EFF6FE; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.habit h5 { line-height: 2; font-weight: 700; } 

.habit h3 span { font-weight: 700; margin-bottom: 52px;  }
.habit .instance { display: flex; flex-direction: column; grid-row-gap: 40px; width: 100%; max-width: 1196px; margin: 0 auto; }
.habit .instance li { display: flex; justify-content: space-between; align-items: center; padding: 82px 84px; background: #F5F5F5; border-radius: 24px; border: 1px solid #ddd; } 
.habit .instance li h6 { width: fit-content; padding: 0 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 2.444; border-radius: 100px; }
.habit .instance li em { display: inline-block; margin: 18px 0 12px; color: #292B3B; font-size: 40px; line-height: 1.4; font-weight: 700; } 
.habit .instance li p { color: #777; font-size: 20px; line-height: 1.6; }


.course01 { position: relative; padding: 80px 0 168px; background: #EFF6FE; }
.course01:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; z-index: 2; }
.course01:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.course01 .tab-content { width: 100%; padding: 60px 46px; background: #fff; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; }
.course01 .tab-content ul { display: flex; justify-content: center; grid-column-gap: 50px; width: 100%; margin-bottom: 42px; padding: 73px 0; background: #EFF6FE; border-radius: 16px; }

.tab-inner { width: 100%; max-width: 1196px; margin: 52px auto 0; }
.tab-box-wrap { display: flex; justify-content: center; width: 100%; margin: 0 auto; }
.tab-box { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; align-items: flex-end; width: 100%; border-radius: 8px 8px 0 0; }
.tab-box li .tab-btn { display: flex; justify-content: center; align-items: center; width: 100%; background: #36384D; color: #fff; font-size: 24px; line-height: 3; }
.tab-box li:first-child .tab-btn { border-radius: 8px 0 0 0; }
.tab-box li:last-child .tab-btn { border-radius: 0 8px 0 0; }
.tab-box li { position: relative; width: 100%; height: 100%; }
.tab-box li .tab-btn.on { position: absolute; top: -18px; left: 0; background: #1a73e8; color: #fff; line-height: 90px; border-radius: 12px 12px 0 0;}
.tab-box li .tab-btn.on:after { position: absolute; bottom: 0; right: -32px; display: block; content:''; clear: both; width: 32px; height: 32px; background: url('../images/web/sub/kids/tab_subtract.png')no-repeat center; }
.tab-content h6 { display: block; width: fit-content; margin: 36px auto 16px; color: #1A73E8; font-size: 34px; line-height: 1.2; font-weight: 700; box-shadow: inset 0 -10px 0 #1A73E833 } 
.tab-content .tab-desc { margin: 0 auto; color: #777; font-size: 20px; line-height: 1.5; text-align: center; }
.tab-content .tab-desc b { color: #333; }


.contents-inner { display: none; width: 100%; }
.contents-inner.on { display: flex; flex-wrap: wrap; flex-direction: column;  }

.course02 { position: relative; padding: 80px 0 168px; background: #fff; }
.course02:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #36384C; border-radius: 0 100px 0 0; z-index: 2; }
.course02:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #36384C; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.course02 .tab-content { width: 100%; padding: 60px 46px; background: #f5f5f5; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; }
.course02 .tab-content ul { display: flex; justify-content: center; grid-column-gap: 20px; width: 100%; margin-bottom: 42px; border-radius: 16px; }
.course02 .tab-content ul li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; grid-row-gap: 16px; padding: 54px 62px 49px; background: #fff; border-radius: 16px; }
.course02 .tab-content ul li p { width: fit-content; padding: 10px 32px; background: #999; color: #fff; font-size: 20px; line-height: 1.5; border-radius: 100px; }
 
.academy { padding: 86px 0 120px; background: #36384C; }
.academy h5 { color: #fff; font-weight: 400; line-height: 2; }
.academy h3 span { position: relative; width: fit-content; margin: 0 auto; background: linear-gradient(45deg, #1A73E8 0%, #33D2BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.28; box-shadow: none; }
.academy h3 span:after { position: absolute; bottom: 4px; left: 0; display: block; content:''; clear: both; width: 100%;  height: 11px; background: linear-gradient(90deg, rgba(26, 115, 232, 0.2) 0%, rgba(51, 210, 191, 0.2) 100%);  }
.academy .academy-type { display: flex; justify-content: center; grid-column-gap: 28px; width: 100%; max-width: 1196px; margin: 52px auto 48px; }
.academy .academy-type > li { background: #fff; border-radius: 24px; box-shadow: 0px 7.78px 18.68px 0px #00000026; }
.academy .academy-type .type { display: flex; align-items: center; justify-content: center; padding: 28px 0; border-radius: 24px 24px 0 0; }
.academy .academy-type .type p { padding: 0 24px; font-size: 24px; line-height: 2.25; font-weight: 700; border-radius: 100px; }
.academy .academy-type > li:nth-of-type(1) .type { background: #05C3D5; }
.academy .academy-type > li:nth-of-type(1) .type p { background: #fff; color: #333; }
.academy .academy-type > li:nth-of-type(2) .type { background: #1A73E8; }
.academy .academy-type > li:nth-of-type(2) .type p { background: #0D4DA1; color: #fff; }
.academy .academy-type .content { display: flex; flex-direction: column; flex-wrap: wrap; padding: 50px 52px; }
.academy .academy-type .content p { margin: 38px auto 18px; color: #777; font-size: 22px; line-height: 1.4545; text-align: center; }
.academy .academy-type .content p b { color: #333; }
.academy .academy-type .content .tag { display: flex; justify-content: center; grid-column-gap: 8px; }
.academy .academy-type .content .tag li { padding: 0 18px; color: #777; font-size: 18px; line-height: 2.333; font-weight: 700; border: 1px solid #aaa; border-radius: 100px; } 
.academy a { display: flex; align-items: center; grid-column-gap: 12px; width: fit-content; margin: 0 auto; padding: 20px 64px; background: #777; color: #fff; font-size: 20px; line-height: 1.2; border-radius: 100px; }
.academy a:after { display: block; content:''; clear: both; width: 16px; height: 12px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none"><path fill="%23fff" fill-rule="evenodd" d="M12.172 7 8.59 10.59 10 12l6-6-6-6-1.41 1.41L12.172 5H0v2h12.172Z" clip-rule="evenodd"/></svg>')no-repeat center; }

.trial { width: 100%; padding: 134px 0; background: url('../images/web/sub/kids/course_trial-bg.png')no-repeat center; }
.trial h6 { width: fit-content; margin: 0 auto 12px; color: #fff; font-size: 26px; line-height: 1.2; } 
.trial h2 { width: fit-content; margin: 0 auto 32px; color: #fff; font-size: 60px; line-height: 1.2; font-weight: 800; } 
.trial a { display: flex; align-items: center; grid-column-gap: 12px; width: fit-content; margin: 0 auto; padding: 20px 64px; background: #1A73E8; color: #fff; font-size: 20px; line-height: 1.2; border-radius: 100px; }
.trial a:after { display: block; content:''; clear: both; width: 16px; height: 12px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none"><path fill="%23fff" fill-rule="evenodd" d="M12.172 7 8.59 10.59 10 12l6-6-6-6-1.41 1.41L12.172 5H0v2h12.172Z" clip-rule="evenodd"/></svg>')no-repeat center; }