@import"https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap";

@import"https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap";

.table-responsive{
  width:100%;
  overflow-x:auto;_overflow:auto;
  background-color:#fff;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
  -webkit-overflow-scrolling:touch;
  margin:0 0 1em
}

.table-responsive::-webkit-scrollbar{
  width:6px;
  height:6px
}

.table-responsive::-webkit-scrollbar-thumb{
  background-color:#ced4da
}

.table-responsive:hover::-webkit-scrollbar-track{
  background-color:rgba(0,0,0,.05)
}

.table-responsive:hover::-webkit-scrollbar-thumb{
  background-color:#adb5bd
}

.table-responsive:hover::-webkit-scrollbar-thumb:hover{
  background-color:tomato
}

.table-responsive .text-nowrap{
  white-space:nowrap
}

.table-responsive .text-center{
  text-align:center
}

.table-responsive .text-right{
  text-align:right
}

.table-responsive .table,.table-responsive .text-wrap table{
  width:100%;
  max-width:100%;
  background-color:transparent
}

.table-responsive table tr{
  border-top:1px solid #dee2e6
}

.table-responsive table .tutor-img{
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  -o-border-radius:100px;
  -ms-border-radius:100px;
  border-radius:100px;
  width:50px
}

.table-responsive table .tutor-name{
  font-size:1em;
  margin-bottom:5px
}

.table-responsive table .lesson-title{
  font-size:.9em
}

.table-responsive table .lesson-title .lesson-img{
  width:1.2em;
  vertical-align:text-bottom
}

.table-responsive table tbody tr:hover{
  background-color:fadeout(#f1c40f, 90%)
}

.table-responsive table th,.table-responsive table td{
  vertical-align:middle;
  padding:5px 10px
}

.table-responsive table th{
  text-align:left;
  font-size:.9em;
  font-weight:600;
  padding:10px 10px
}

input[type=email],input[type=number],input[type=search],input[type=text],input[type=tel],input[type=url],input[type=password],textarea,select{
  height:38px;
  padding:6px 10px;
  background-color:#fff;
  border-radius:4px;
  box-shadow:none;
  box-sizing:border-box
}

input[type=email],input[type=number],input[type=search],input[type=text],input[type=tel],input[type=url],input[type=password],textarea{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none
}

textarea{
  min-height:65px;
  padding-top:6px;
  padding-bottom:6px
}

input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=text]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=password]:focus,textarea:focus,select:focus{
  outline:0
}

label,legend{
  display:block;
  margin-bottom:.5rem;
  font-weight:600
}

fieldset{
  padding:0;
  border-width:0
}

input[type=checkbox],input[type=radio]{
  display:inline
}

label>.label-body{
  display:inline-block;
  margin-left:.5rem;
  font-weight:normal
}

.u-full-width{
  width:100%;
  box-sizing:border-box
}

.u-max-full-width{
  max-width:100%;
  box-sizing:border-box
}

.u-pull-right{
  float:right
}

.u-pull-left{
  float:left
}

*{
  max-height:999999px
}

.homepage-content:lang(ja){
  font-feature-settings:"palt"
}

.homepage-content .slideshow{
  position:relative
}

.homepage-content .slideshow .title-image-slide-wrapper{
  background-color:#fff;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  min-height:300px;
  overflow:hidden;
  background-color:rgba(255,255,255,.6);
  background-blend-mode:screen;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center
}

@media only screen and (min-width: 0px)and (max-width: 599px){
  .homepage-content .slideshow .title-image-slide-wrapper{
    min-height:200px
  }
}

.homepage-content .slideshow .title-image-slide-wrapper h2{
  text-align:center
}

.homepage-content .slideshow .title-image-slide-wrapper h3{
  text-align:center
}

.homepage-content .slideshow .title-image-slide-wrapper .title-image-content-wrapper img{
  height:200px;
  filter:invert(100%) drop-shadow(0px 0px 5px rgba(1, 1, 1, 0.2))
}

@media only screen and (min-width: 0px)and (max-width: 599px){
  .homepage-content .slideshow .title-image-slide-wrapper .title-image-content-wrapper img{
    height:100px
  }
}

.homepage-content .title-image-responsive-wrapper img{
  width:100%;
  max-height:500px
}

@media only screen and (min-width: 0px)and (max-width: 414px){
  .homepage-content .title-image-responsive-wrapper img.title-image-big{
    display:none
  }

  .homepage-content .title-image-responsive-wrapper img.title-image-small{
    display:inline-block !important
  }
}

.homepage-content h2.category-title{
  font-size:1.875rem;
  line-height:2.25rem;
  font-family:"Caveat"
}

.homepage-content h2.category-title span{
  font-weight:300;
  font-size:1rem;
  line-height:1.5rem;
  font-style:italic
}

.homepage-content hr{
  margin:.3rem 0;
  padding:0;
  border-width:0;
  border-top:1px solid #f1f1f1;
  box-sizing:content-box;
  height:0;
  border-top:1px solid rgba(1,1,1,.2);
  width:80px
}

.homepage-content .grid-wrapper{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-gap:3rem;
  align-items:stretch
}

.homepage-content .content-wrapper{
  padding:0 20px 20px;
  overflow:hidden
}

.homepage-content .title-image{
  padding:2rem 0
}

.homepage-content .title-image .title-content-wrapper{
  text-align:center;
  padding:2rem 2rem 1px
}

@media only screen and (min-width: 0px)and (max-width: 414px){
  .homepage-content .title-image .title-content-wrapper{
    padding-top:2rem
  }
}

.homepage-content .title-image .title-content-wrapper .title-logo{
  max-width:200px
}

@media only screen and (min-width: 0px)and (max-width: 414px){
  .homepage-content .title-image .title-content-wrapper .title-logo{
    max-width:160px
  }
}

.homepage-content .title-image .title-content-wrapper h2{
  margin-top:2.5rem;
  margin-bottom:.5rem;
  text-align:center;
  color:#46403b;
  font-size:2rem;
  font-weight:600;
  -text-shadow:0px 0px 10px rgba(1,1,1,.8);
  line-height:1.3
}

.homepage-content .title-image .title-content-wrapper h2:lang(ko){
  font-weight:900
}

.homepage-content .title-image .title-content-wrapper h1{
  margin-top:.5rem;
  text-align:center;
  color:#46403b;
  font-size:3.5rem;
  font-weight:600;
  -text-shadow:0px 0px 10px rgba(1,1,1,.8);
  line-height:1.3
}

.homepage-content .goto-workspace-btn-wrapper{
  margin-top:3rem;
  margin-bottom:2rem
}

.homepage-content .goto-workspace-btn-wrapper a{
  font-family:'"Roboto"',inter,-apple-system,BlinkMacSystemFont,'"Segoe UI"',Helvetica,'"Apple Color Emoji"',Arial,'"Segoe UI Emoji"','"Segoe UI Symbol"','"Roboto"','"Lato"','"Open Sans"','"Helvetica"','"Myriad Pro"','"Lucida Grande"','"Lucida Sans Unicode"','"Lucida Sans"',"Geneva","Verdana",'"Hiragino Sans"','"Hiragino Kaku Gothic ProN"','"Hiragino Kaku Gothic Pro"','"Noto Sans JP"','"Hiragino Sans"','"Mplus 1p"','"Noto Sans JP"','"Hiragino Kaku Gothic ProN"','"Hiragino Kaku Gothic Pro"','"Kozuka Gothic Pro"','"Meiryo UI"','"MS PGothic"','"Noto Sans KR"','"Gothic A1"','"Noto Sans Korean"','"Apple SD Gothic Neo"','"Noto Sans KR"','"Gothic A1"','"Noto Sans Korean"','"Nanum Gothic"','"Apple SD Gothic Neo"','"AppleGothic"','"Malgun Gothic"','"Gulim"',sans-serif,system-ui;
  background-color:#000;
  border:0;
  color:#fff;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:20px;
  padding-right:20px;
  display:inline-block;
  outline:0;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  -o-border-radius:50px;
  -ms-border-radius:50px;
  border-radius:50px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-smoothing:antialiased;
  font-smooth:always;
  color:#fff;
  margin:0;
  padding:.7rem 1.5em .7rem;
  height:auto;
  line-height:1;
  text-transform:none;
  letter-spacing:0;
  background-color:#a0c8ce;
  cursor:pointer;
  font-size:1.2em;
  font-weight:600
}

.homepage-content .goto-workspace-btn-wrapper a:hover,.homepage-content .goto-workspace-btn-wrapper a:active{
  background-color:#eee;
  color:#777;
  text-decoration:none
}

.homepage-content .goto-workspace-btn-wrapper a:hover{
  color:#fff;
  background-color:#6eaab4
}

.homepage-content p{
  font-family:var(--sans-serif-font-family);
  font-size:1em
}

.homepage-content .code-test code{
  margin:1em 0;
  font-family:monospace
}

.homepage-content .code-test pre{
  font-family:monospace
}

.product-list-content{
  max-width:1024px;
  margin:5rem auto;
  padding:1px 2rem
}

@media only screen and (min-width: 0px)and (max-width: 768px){
  .product-list-content{
    margin:3rem auto;
    padding:1px 2rem
  }
}

@media only screen and (min-width: 0px)and (max-width: 599px){
  .product-list-content{
    margin:1.5rem auto 3rem;
    padding:1px 1rem
  }
}

.product-list-content .category-title .show-more-link{
  border-radius:9999px;
  font-size:0.875rem;
  line-height:1.25rem;
  padding-left:1rem;
  font-style:normal
}

.product-list-content .category-title .show-more-link svg{
  display:inline-block;
  width:.9rem;
  vertical-align:middle;
  position:relative;
  top:-2px
}

.product-list-content .category-title .show-more-link a{
  color:#999
}

@media only screen and (min-width: 0px)and (max-width: 599px){
  .product-list-content .category-title .show-more-link{
    display:none
  }
}

.product-list-content .show-more-btn-wrapper{
  text-align:center;
  margin-top:1.5rem;
  display:none
}

@media only screen and (min-width: 0px)and (max-width: 599px){
  .product-list-content .show-more-btn-wrapper{
    display:block
  }
}

.product-list-content .show-more-btn-wrapper a{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background-color:#8bd8d5;
  color:#fff;
  border-radius:100px;
  padding:.8rem;
  min-width:200px;
  font-size:1rem;
  font-weight:600
}