@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 */
.middle-visual { margin-top: 96px; padding: 224px 0; position: relative; background: url('../images/web/sub/kids/kids_visual-bg.png')no-repeat center; }
.middle-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; }
.middle-visual h2 { width: fit-content; margin: 0 auto; color: #A445FF; font-size: 120px; font-family: 'GmarketSans'; font-weight: 700; line-height: 1; letter-spacing: -0.08em; text-align: center; }
.middle-visual > p { margin: 24px auto 28px; color: #fff; font-size: 28px; font-weight: 500; text-align: center; }
.middle-visual b { display: block; width: fit-content; margin: 0 auto; padding: 0 22px; background: #A445FF; color: #fff; 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: 180px; color: #fff; font-weight: 300; z-index: 2; }
.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% - 40px); transform: translateX(-50%); display: block; content:''; clear: both; width: 998px; height: 830px; background: url('../images/web/sub/kids/concern_bg-shadow.png')no-repeat bottom center; z-index: 0; }
.concern .bg img { position: relative; margin-right: 50px; 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: -15px; top: -100px; background: #222; color: #fff; z-index: 2; }
.concern .bg p:nth-of-type(1):after { position: absolute; bottom: -12px; right: 120px; 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: -14px; top: -22px; background: #fff; color: #333; z-index: 2; }
.concern .bg p:nth-of-type(2):after { position: absolute; bottom: -12px; right: 158px; 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; } 


/* learn */
.learn { position: relative; padding: 80px 0 128px; background: #F5F5F5; }
.learn: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; }
.learn: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; }  
.learn h5 { line-height: 2; font-weight: 300; } 
.learn h3 span { margin-bottom: 52px;  line-height: 1.28; }
.learn .instance { display: flex; flex-direction: column; grid-row-gap: 40px; width: 100%; max-width: 1196px; margin: 0 auto; }
.learn .instance li { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 440px; padding: 0 84px; background: #fff; border-radius: 24px; border: 1px solid #ddd; } 
.learn .instance li:nth-of-type(odd) { flex-direction: row; }
.learn .instance li:nth-of-type(2n) { flex-direction: row-reverse; }
.learn .instance li:nth-of-type(odd) .desc { display: flex; align-items: flex-start; } 
.learn .instance li:nth-of-type(2n) .desc { display: flex; align-items: flex-end; text-align: right;  }
.learn .instance li .desc { display: flex; flex-direction: column; }
.learn .instance li .desc .list-index { display: block; width: fit-content; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; } 
.learn .instance li .desc em { margin: 18px 0 12px; color: #292B3B; font-size: 40px; line-height: 1.4; font-weight: 700; } 
.learn .instance li .desc p { color: #777; font-size: 20px; line-height: 1.6; }



.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(3, 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; }

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

.tab-content { width: 100%; padding: 60px 46px; background: #fff; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; }
.tab-content ul li .list-index { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; } 
.tab-content ul li .title { display: block; width: fit-content; margin: 14px auto 6px; color: #333; font-size: 30px; line-height: 1.2; font-weight: 700; text-align: center; } 
.tab-content ul li p { margin: 0 auto; color: #777; font-size: 20px; line-height: 1.5; text-align: 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; }


.smartall { position: relative; padding: 80px 0 168px; background: #fff; }
.smartall: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; }
.smartall: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; }  

.smartall .tab-content ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 20px; width: 100%; background: #fff; border-radius: 16px; }
.smartall .tab-content ul li { display: flex; flex-direction: column; align-items: center; grid-row-gap: 24px; padding: 48px 0; background: #f5f5f5; border-radius: 16px; }  

.smartall .tab-content .content { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; width: 100%; background: #fff; border-radius: 16px; }
.smartall .tab-content .content em { display: block; margin: 0 auto 10px; color: #333; font-size: 28px; font-weight: 700; line-height: 1.2; text-align: center; }
.smartall .tab-content .system .title { display: flex; align-items: center; height: 72px; margin: 0 auto; }

.program { position: relative; padding: 80px 0 128px; background: #EFF6FE; }
.program: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; }
.program: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; }  
.program .tab-content ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; width: 100%; background: #fff; border-radius: 16px; }
.program .tab-content ul li { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 16px; } 

.program .tab-content .contents-inner:nth-of-type(1) ul li { grid-row-gap: 24px;  padding: 48px 0 20px; } 
.program .tab-content .contents-inner:nth-of-type(1) ul li .title { margin: 8px auto; line-height: 1.333; } 

.program .tab-content .report { display: flex; flex-wrap: wrap; flex-direction: column; grid-row-gap: 20px; align-items: center; }
.program .tab-content .subject { display: flex; flex-direction: column; grid-row-gap: 24px; width: 100%; padding: 48px 40px; background: #F5F5F5; border-radius: 16px; }
.program .tab-content .subject h6 { display: flex; align-items: center; justify-content: center; width: 100%; height: fit-content; margin: 0 auto; background: #fff; color: #1A73E8; font-size: 24px; font-weight: 700; line-height: 3.1667; box-shadow: none; text-align: center; border: 2px solid #1A73E8; border-radius: 16px; } 
.program .tab-content .subject ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 24px; background: #F5F5F5; }
.program .tab-content .subject ul li { padding: 40px 0 0; }
.program .tab-content .subject ul li em { font-size: 24px; line-height: 1.2; font-weight: 700; color: #1A73E8;  } 
.program .tab-content .subject ul li p { margin: 12px auto 32px; font-size: 20px; line-height: 1.6; color: #777; } 

.program .tab-content .subject ul li:nth-of-type(1) { background: #fff; } 

.program .tab-content .subject ul li:nth-of-type(2) { background: #CFE6FF; } 

.program .tab-content .subject ul li:nth-of-type(3) { background: #1A73E8; } 
.program .tab-content .subject ul li:nth-of-type(3) em { color: #fff; }
.program .tab-content .subject ul li:nth-of-type(3) p { color: #fff; }

.program .tab-content .schedule { display: flex; flex-direction: column; width: 100%; padding: 53px 40px; background: #E7F0FD; border-radius: 16px; }
.program .tab-content .schedule .day { display: grid; grid-template-columns: repeat(5, 1fr); grid-column-gap: 16px; background: #E7F0FD; }
.program .tab-content .schedule .day li { background: #aaa; color: #fff; font-size: 20px; line-height: 2.7; border-radius: 8px; } 
.program .tab-content .schedule .timetable { display: grid; grid-template-columns: 2fr 2fr 1fr; grid-column-gap: 16px; margin: 24px auto 40px; background: #E7F0FD; }
.program .tab-content .schedule .timetable li { position: relative; background: #fff; color: #1A73E8; font-size: 18px; line-height: 3; font-weight: 700; border: 1px solid #1A73E8; border-radius: 8px; }
.program .tab-content .schedule .timetable li:after { position: absolute; left: 50%; bottom: -38px; display: block; content:''; clear: both; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #1A73E8; border-bottom: 10px solid transparent; transform: translateX(-50%);  }
.program .tab-content .schedule h6 { display: flex; align-items: center; justify-content: center; width: 100%; height: fit-content; margin: 0 auto; background: #1A73E8; color: #fff; font-size: 24px; font-weight: 700; line-height: 3.1667; box-shadow: none; text-align: center; border-radius: 16px; }
.program .tab-content .schedule h6 span { display: contents; color: #FFEB00; }

.program .tab-content .contents-inner:nth-of-type(3) ul li { position: relative; grid-row-gap: 18px;  padding: 66px 0 40px; }
.program .tab-content .contents-inner:nth-of-type(3) ul li:nth-of-type(odd)::before { position: absolute; top: 50%; right: -45px; display: block; content:''; clear: both; width: 70px; height: 70px; background: #fff; border-radius: 100px; transform: translateY(-50%); z-index: 2; }
.program .tab-content .contents-inner:nth-of-type(3) ul li:nth-of-type(odd)::after { position: absolute; top: 50%; right: -35px; display: block; content:''; clear: both; width: 50px; height: 50px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" fill="none"><path fill="%23fff" fill-rule="evenodd" d="M.586 13.586 2 15l5.657-5.657L9.07 7.93 7.657 6.515 2 .858.586 2.272 6.243 7.93.586 13.586Z" clip-rule="evenodd"/></svg>')no-repeat center, #1A73E8; border-radius: 100px; transform: translateY(-50%); z-index: 2; }
.program .tab-content .contents-inner:nth-of-type(3) ul li .list-index { background: #999; } 
.program .tab-content .contents-inner:nth-of-type(3) ul li .title { margin: 8px auto 0; line-height: 1.333; } 

.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 { padding: 54px 62px 49px; background: #fff; border-radius: 16px; }

.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; }