@charset "UTF-8";
/*==============================================================================

 Japanese Teacher LP sass & CSS.
 lp/japanese_teacher/index.html

 - Reset & Default Setting CSS.
 - Font CSS.
 - Parts CSS.
 - Layout CSS.

==============================================================================*/
/*------------------------------------------------------------------------------
 Reset & Default Setting CSS.
------------------------------------------------------------------------------*/
.japanese_teacher a,
.japanese_teacher address,
.japanese_teacher article,
.japanese_teacher aside,
.japanese_teacher audio,
.japanese_teacher blockquote,
.japanese_teacher canvas,
.japanese_teacher caption,
.japanese_teacher code,
.japanese_teacher dd,
.japanese_teacher div,
.japanese_teacher dl,
.japanese_teacher dt,
.japanese_teacher footer,
.japanese_teacher form,
.japanese_teacher h1,
.japanese_teacher h2,
.japanese_teacher h3,
.japanese_teacher h4,
.japanese_teacher h5,
.japanese_teacher h6,
.japanese_teacher header,
.japanese_teacher hgroup,
.japanese_teacher iframe,
.japanese_teacher img,
.japanese_teacher input,
.japanese_teacher label,
.japanese_teacher li,
.japanese_teacher mark,
.japanese_teacher menu,
.japanese_teacher nav,
.japanese_teacher ol,
.japanese_teacher output,
.japanese_teacher p,
.japanese_teacher pre,
.japanese_teacher ruby,
.japanese_teacher section,
.japanese_teacher span,
.japanese_teacher summary,
.japanese_teacher table,
.japanese_teacher tbody,
.japanese_teacher td,
.japanese_teacher textarea,
.japanese_teacher th,
.japanese_teacher time,
.japanese_teacher tr,
.japanese_teacher ul,
.japanese_teacher video {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
}

/* Default Setting */
.japanese_teacher {
    position: relative;
    /* Smart Phone Smooth Scroll */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    letter-spacing: 0;
    color: #000;
    background: #fff;
    font-family: "Helvetica Neue", Helvetica, arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /* base font 16px */
    font-size: 100%;
    line-height: 1;
    /* iOS font automatic adjustment none. */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.japanese_teacher article,
.japanese_teacher aside,
.japanese_teacher details,
.japanese_teacher figcaption,
.japanese_teacher figure,
.japanese_teacher footer,
.japanese_teacher header,
.japanese_teacher hgroup,
.japanese_teacher menu,
.japanese_teacher nav,
.japanese_teacher section {
    display: block;
}

.japanese_teacher .clear {
    clear: both;
}

.japanese_teacher .clearfix:after,
.japanese_teacher .clearfix:before {
    display: block;
    clear: both;
    content: " ";
}

.japanese_teacher a {
    text-decoration: none;
    color: #000;
    background: transparent;
}

.japanese_teacher a:active,
.japanese_teacher a:hover,
.japanese_teacher a:link,
.japanese_teacher a:visited {
    text-decoration: none;
    color: #000;
}

.japanese_teacher a:hover {
    color: inherit;
    /*@include opacity(1);*/
}

.japanese_teacher img {
    vertical-align: middle;
}

.japanese_teacher li,
.japanese_teacher ol,
.japanese_teacher ul {
    list-style-type: none;
}

.japanese_teacher table {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

.japanese_teacher input[type="button"],
.japanese_teacher input[type="submit"],
.japanese_teacher input[type="text"] {
    border-radius: 0;
    -webkit-appearance: none;
}

.japanese_teacher textarea {
    resize: vertical;
    border-radius: 0;
    -webkit-appearance: none;
}

.japanese_teacher * {
    box-sizing: border-box;
    -ms-box-sizing: border-box;
}

.japanese_teacher ::-moz-selection {
    background: RGBa();
}

.japanese_teacher ::selection {
    background: RGBa();
}

.japanese_teacher ::-moz-selection {
    background: RGBa();
}

.japanese_teacher .displayPC {
    display: block !important;
}

.japanese_teacher .displaySP {
    display: none !important;
}

/*------------------------------------------------------------------------------
    Font CSS.
------------------------------------------------------------------------------*/
.japanese_teacher {
    color: #333 !important;
}

.japanese_teacher h2 {
    font-size: 25px;
    letter-spacing: 0.16em;
    text-align: center;
    line-height: 78px;
}

.japanese_teacher h3 {
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.16em;
    text-align: center;
}

.japanese_teacher #description p {
    font-size: 18px;
    letter-spacing: 0.16em;
    line-height: 1.86111111111111em;
    text-align: center;
}

.japanese_teacher #free_trial p {
    font-size: 20px;
    letter-spacing: 0.16em;
    color: #ff643a;
    text-align: center;
}

.japanese_teacher .thumbnail_box dl dt,
.japanese_teacher .user_voice_box dl dt {
    font-size: 20px;
    letter-spacing: 0.16em;
    text-align: center;
}

.japanese_teacher .thumbnail_box dl dd,
.japanese_teacher .user_voice_box dl dd {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-align: left;
    line-height: 1.5em;
}

.japanese_teacher #chart_wrap .chart_box dl dt {
    font-weight: bold;
    font-size: 19px;
    letter-spacing: 0.16em;
    color: #fff;
    text-align: center;
}

.japanese_teacher #chart_wrap .chart_box dl dt:after {
    font-size: 13px;
    color: #9be200;
    font-weight: bold;
    letter-spacing: 0.16em;
    line-height: 23px;
}

.japanese_teacher #chart_wrap .chart_box dl dd:first-of-type {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.16em;
    text-align: center;
}

.japanese_teacher #chart_wrap .chart_box dl dd:last-of-type {
    font-size: 13px;
    letter-spacing: 0.16em;
    line-height: 1.53846153846154em;
}

.japanese_teacher #chart_wrap .chart_box:first-of-type dl dt:after {
    content: "5分";
}

.japanese_teacher #chart_wrap .chart_box:nth-of-type(2) dl dt:after {
    content: "10分";
}

.japanese_teacher #chart_wrap .chart_box:last-of-type dl dt:after {
    content: "10分";
}

.japanese_teacher ul li {
    font-size: 13px;
    letter-spacing: 0.16em;
}

.japanese_teacher a.movie_btn {
    font-size: 18px;
    letter-spacing: 0.12em;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
}

.japanese_teacher a.schedule_btn {
    font-size: 23px;
    color: #fff;
    letter-spacing: 0.16em;
    font-weight: bold;
    line-height: 80px;
    text-align: center;
}

.japanese_teacher a.trial_btn {
    font-size: 28px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.16em;
    line-height: 80px;
    text-align: center;
}

.japanese_teacher .font_orange {
    color: #ff8b00 !important;
    font-weight: bold;
}

.japanese_teacher .user_voice_box strong {
    font-size: 14px;
    font-weight: bold;
    color: #ff8b00;
}

.japanese_teacher .user_voice_box .balloon p {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.16em;
    line-height: 1.375em;
}

/*------------------------------------------------------------------------------
    Parts CSS.
------------------------------------------------------------------------------*/
.japanese_teacher h2 {
    position: relative;
    height: 80px;
}

.japanese_teacher h2:before {
    content: " ";
    display: inline-block;
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/h1_icn.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 26px;
    height: 36px;
    vertical-align: middle;
}

.japanese_teacher h2:after {
    content: " ";
    display: inline-block;
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/h1_icn.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 26px;
    height: 36px;
    vertical-align: middle;
}

.japanese_teacher h2 span {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 2.5px;
    background-repeat: repeat-x;
}

.japanese_teacher h2 span:first-of-type {
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/stripe_04.png");
    top: 0;
    left: 0;
}

.japanese_teacher h2 span:last-of-type {
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/stripe_04.png");
    bottom: 2.5px;
    left: 0;
}

.japanese_teacher .chart_box {
    width: 302px;
    height: 345px;
    border-radius: 12.5px;
    border: solid 3px #9be200;
}

.japanese_teacher .chart_box dl dt:after {
    width: 51px;
    height: 23px;
    border-radius: 23px;
    background-color: #fdfabf;
    display: inline-block;
}

.japanese_teacher a.movie_btn {
    background-color: #f7ed00;
    width: 287px;
    height: 55px;
    border-radius: 27px;
    display: inline-block;
}

.japanese_teacher a.movie_btn:before {
    content: " ";
    display: inline-block;
    width: 30px;
    height: 22px;
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/icn_movie.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: sub;
    margin: 0 14px 0 -6px;
}

.japanese_teacher a.schedule_btn {
    display: block;
    width: 548px;
    height: 80px;
    border-radius: 10px;
    background-color: #ff9f29;
    border-bottom: 5px solid #ff8700;
    box-sizing: border-box;
}

.japanese_teacher a.trial_btn {
    display: block;
    margin: 0 auto;
    width: 548px;
    height: 80px;
    border-radius: 10px;
    background-color: #ff643a;
    border-bottom: 5px solid #ff3d09;
    box-sizing: border-box;
}

.japanese_teacher .user_voice_box .balloon {
    background-color: #fdfbcc;
    width: 282px;
    height: 97.5px;
    margin: 0 auto;
    padding: 0 20px;
    border-radius: 12.5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.japanese_teacher .user_voice_box .balloon:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 0 100px;
    border-color: #fdfbcc transparent transparent transparent;
    position: absolute;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: -1;
}

/*------------------------------------------------------------------------------
    Layout CSS.
------------------------------------------------------------------------------*/
.japanese_teacher {
    width: 100%;
}

.japanese_teacher #fv_wrap {
    width: 100%;
    height: 400px;
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/stripe_01.jpg");
    background-repeat: repeat-x;
    background-position: top left;
    overflow: hidden;
}

.japanese_teacher #fv_wrap #fv {
    width: 100%;
    max-width: 1200px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.japanese_teacher #fv_wrap #fv img#fv_des {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.japanese_teacher #description {
    padding: 48px 0 50px;
}

.japanese_teacher #recommended {
    padding: 50px 0;
    background-color: #fcfbed;
    background-image: url("http://image.eikaiwa.dmm.com/assets/p/general/eikaiwa/lp/japanese_teacher/stripe_05.jpg");
    background-repeat: repeat;
    text-align: center;
}

.japanese_teacher #recommended h2 {
    margin: 0 0 45px;
}

.japanese_teacher #recommended img {
    width: 970px;
}

.japanese_teacher #introduction {
    margin: 0 0 50px;
    padding: 50px 0 0;
}

.japanese_teacher #introduction #thumbnail_wrap {
    width: 968px;
    margin: 0 auto;
    padding: 48px 0 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box {
    width: 287px;
    text-align: center;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box img {
    width: 228px;
    margin: 0 0 22px;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box:nth-of-type(3n+2) {
    margin: 0 53px;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box:first-of-type {
    margin-bottom: 66px;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box:nth-of-type(2) {
    margin-bottom: 66px;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box:nth-of-type(3) {
    margin-bottom: 66px;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box dl dt {
    margin: 0 0 19px;
}

.japanese_teacher #introduction #thumbnail_wrap .thumbnail_box dl dd {
    height: 114px;
    margin: 0 0 20px;
}

.japanese_teacher #introduction a.schedule_btn {
    margin: 0 auto;
}

.japanese_teacher #flow {
    background-color: #f9ffeb;
    padding: 53px 0 59px;
    margin: 0 0 54px;
}

.japanese_teacher #flow #chart_wrap {
    width: 968px;
    margin: 0 auto;
    padding: 53px 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.japanese_teacher #flow #chart_wrap .chart_box {
    background-color: #fff;
}

.japanese_teacher #flow #chart_wrap .chart_box dl dt {
    background-color: #9be200;
    border-radius: 9px 9px 0 0;
    height: 49px;
    line-height: 49px;
    margin: 0 0 23px;
    position: relative;
}

.japanese_teacher #flow #chart_wrap .chart_box dl dt:after {
    position: absolute;
    top: 50%;
    right: 24px;
    margin-top: -11.5px;
}

.japanese_teacher #flow #chart_wrap .chart_box dl dd:first-of-type {
    margin: 0 0 19px;
}

.japanese_teacher #flow #chart_wrap .chart_box dl dd:nth-of-type(2) {
    text-align: center;
}

.japanese_teacher #flow #chart_wrap .chart_box dl dd:nth-of-type(2) img {
    width: 80px;
    margin: 0 0 19px;
}

.japanese_teacher #flow #chart_wrap .chart_box dl dd:last-of-type {
    width: 222px;
    margin: 0 auto 34px;
}

.japanese_teacher #flow #chart_wrap p {
    color: #9be200;
    margin: 0 8px;
}

.japanese_teacher #free_trial {
    padding: 45px 0 42px;
}

.japanese_teacher #free_trial p {
    margin: 0 0 17px;
}

.japanese_teacher #important_points {
    background-color: #f8f8f8;
    padding: 35px 0;
}

.japanese_teacher #important_points h3 {
    margin: 0 0 15px;
}

.japanese_teacher #important_points ul {
    width: 870px;
    margin: 0 auto;
}

.japanese_teacher #important_points ul li {
    margin: 0 0 9px;
}

.japanese_teacher a {
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.japanese_teacher a:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.japanese_teacher .flow_note {
    color: #666;
    font-size: 13px;
    text-align: right;
    width: 968px;
    margin: 10px auto auto;
}

.japanese_teacher .user_voice {
    width: 100%;
}

.japanese_teacher .user_voice_wrap {
    width: 968px;
    margin: 0 auto 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.japanese_teacher .user_voice h2 {
    margin: 0 0 49px;
}

.japanese_teacher .user_voice_box {
    width: 293.5px;
    overflow: hidden;
}

.japanese_teacher .user_voice_box .balloon {
    margin-bottom: 28px;
}

.japanese_teacher .user_voice_box .img_box {
    width: 228px;
    margin: 0 auto 31px;
}

.japanese_teacher .user_voice_box .img_box img {
    width: 100%;
}

.japanese_teacher .user_voice_box dt {
    margin: 0 0 28px;
}