@charset 'utf-8';
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0-ExcOPIDUg-g.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0aExcOPIDUg-g.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0yExcOPIDUg-g.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0KExcOPIDU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#why-japanese {
  display: flex;
  padding: 1em;
  flex-wrap: wrap;
}
#why-japanese .panel {
  font-size: 1.2em;
}
#why-japanese .panel-title {
  font-weight: 700;
  margin-left: 5em;
  margin-bottom: .5em;
}
#why-japanese .panel-content {
  margin: 0 0 2em;
  margin-left: 9em;
  line-height:1.8em;
}
#start-flow {
  margin-bottom: 50px;
  padding-bottom: 30px;
  background-color: #fdfbf3;
}
#details .details {
  margin-bottom: 50px;
  padding-bottom: 30px;
}
#start-flow .panel {
  font-size: 1.2em;
}
#start-flow .panel-title {
  font-weight: 700;
  margin-bottom: .5em;
}
#start-flow .panel-content {
  margin: 0 0 2em;
  color: #777777;
}
#start-flow .flow-icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-bottom: .5em;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}
#start-flow .flow-description {
  margin-left: 1em;
}
#start-flow .flow-description .flow-help li {
  margin-left: 1.2em;
  list-style-type: disc;
}
#start-flow .flow-description .flow-link {
  text-decoration: underline;
}
#feature {
  padding: 2em 2em 0;
}
#feature .panel {
  font-size: 1.2em;
}
#feature .panel-title {
  font-weight: 700;
  margin-bottom: .5em;
}
#feature .panel-content {
  margin: 0 0 2em;
  color: #777777;
  margin-bottom: 30px;
}
#feature .icon {
  height: 60px;
  margin-bottom: 10px;
}
#flow-icon-1 {
  background-image: url(../images/step-1.png);
}
#flow-icon-2 {
  background-image: url(../images/step-2.png);
}
#flow-icon-3 {
  background-image: url(../images/step-3.png);
}
#flow-icon-4 {
  background-image: url(../images/step-4.png);
}
#flow-icon-5 {
  background-image: url(../images/step-5.png);
}
.featured-item-row {
  padding: 20px 10px;
}
.featured-item-cell {
  display: block;
  min-height: 480px;
  margin: 0 0 1em;
  padding: 1em;
  color: #333322;
  border: 1px solid #ddd;
  background: #fafafa;
}
.featured-item-cell:hover {
  opacity: .9;
  color: #333322;
  background: #fff;
}
.featured-item .featured-item-image {
  display: block;
  width: 70%;
  max-width: 90px;
  max-height: 90px;
  margin: 0 auto;
}
.featured-item .featured-item-name {
  font-size: 1.2em;
  margin: .5em;
  text-align: center;
  color: #3498db;
}
.featured-item .featured-item-stats {
  margin-bottom: 1em;
}
.featured-item .featured-item-stats li {
  margin-left: 1em;
  list-style-type: disc;
}
.featured-feedback .featured-feedback-text {
  overflow: auto;
  height: 158px;
  margin: .5em 0;
  padding: .5em;
  background: #fff;
}
.featured-feedback .date {
  font-size: 85%;
  color: #777777;
}
.featured-lesson .featured-lesson-image {
  display: block;
  width: 100%;
  max-width: 150px;
  max-height: 150px;
  margin: 0 auto;
}
.featured-lesson .featured-item-name {
  font-size: 1.2em;
  margin: .5em 0;
}
.featured-lesson .lesson-tutor-details img {
  width: 30px;
  height: 30px;
}
.list-tags {
  margin: 1em;
  margin-bottom: 0;
}
.list-tags .tag-icon {
  width: 30px;
  height: 30px;
  margin-top: 6px;
}
.gd.japanese {
  padding: 2em;
  background-image: url(../images/japan-bg.png);
}
.gd.japanese .page-container {
  padding: 0 0 60px;
}
.gd.japanese .page-container hr.Cup {
  background: url(../images/hr-cup.png) center no-repeat;
}
.gd.japanese .page-container .title-bg {
  background: url(../images//title.jpg);
  margin: 1em;
}
.gd.japanese .page-container h1.title {
  font-size: 2em;
  /* margin: 1em 0 0; */
}
.gd.japanese .page-container h1.title .for-pc {
  display: none;
}
.gd.japanese .page-container .sub-title {
  font-size: 1.8em;
}
.gd.japanese .page-container p.description.title {
  font-size: 16px;
}
.gd.japanese .page-container h2 {
  font-size: 1.7em;
}
.gd.japanese #feature {
  padding: 1em;
}
.gd.japanese .btn {
  margin: 1em 0;
  white-space: inherit;
  border-radius: 0;
}
.off-canvas-wrap .page-grid.gd.japanese p.description {
  font-size: 16px;
  padding: 1em 0 3em;
}
.white-space span:not(.eccetto) {
  display: inline-block;
  white-space: nowrap;
}
@media screen and (min-width: 540px) {
  .gd.japanese [class*='column'] + [class*='column']:last-child {
    float: left;
  }
  .gd.japanese .page-container h1.title .for-mb {
    display: none;
  }
  .gd.japanese .page-container h1.title .for-pc {
    display: block;
  }
  .gd.japanese .btn {
    border-radius: 6px;
  }
  #why-japanese .panel {
    padding: .7em;
  }
  #start-flow .panel {
    padding: .7em;
  }
  #feature .panel {
    padding: .7em;
  }
}
@media screen and (min-width: 800px) {
  #start-flow .flow-icon {
    width: 80px;
    height: 80px;
  }
  .gd.japanese .page-container h1.title {
    font-size: 2.4em;
    margin: 0em 0 0;
  }
}
@media screen and (min-width: 1024px) {
  #start-flow .flow-icon {
    width: 80px;
    height: 80px;
  }
  .gd.japanese .page-container h1.title {
    font-size: 2.4em;
  }
}
.gd.japanese .page-container h1.title:after {
  content: '';
  width: 50%;
  height: 2px;
  display: block;
  background-color: #494d55;
  position: absolute;
  bottom: 6px;
  left: 25%;
}