@charset "UTF-8";
/* ==========================
learn-page
========================== */
@media screen and (min-width: 769px) {
  footer.ft {
    margin-top: 0;
  }
  .learn .page__h2 {
    text-align: center;
    font-size: 3.5rem;
  }
  .learn .page__h2 span {
    font-size: 4.6rem;
  }
  .learn .page__h2 span.small {
    font-size: 3.5rem;
  }
  .learn .page__h2 small.h2_small {
    font-size: 2.2rem;
  }
  .learn section .interview {
    margin: 60px auto;
    max-width: 860px;
    border: 3px solid;
    border-radius: 20px;
    padding: 25px 25px 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1020px) {
  .learn section .interview {
    padding: 25px;
  }
}

@media screen and (min-width: 769px) {
  .learn section .interview--blue {
    border-color: #00AEEB;
    background: #DEF1FB;
    margin: 20px auto 60px;
  }
  .learn section .interview--org {
    border-color: #EF8200;
    background: #FFFAD7;
  }
  .learn section .interview ul {
    display: flex;
    justify-content: space-between;
  }
  .learn section .interview li.LFT {
    width: 30%;
  }
  .learn section .interview li.RGT {
    width: 70%;
  }
  .learn section .interview li.RGT div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
  }
  .learn section .interview li.RGT div h3 {
    font-size: 2.2rem;
    font-weight: bold;
    white-space: nowrap;
  }
}

@media screen and (min-width: 769px) and (max-width: 1020px) {
  .learn section .interview li.RGT div h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 769px) {
  .learn section .interview li.RGT div p {
    font-size: 2.1rem;
    line-height: 1.4;
  }
  .learn section .interview li.RGT div p small {
    font-size: 1.7rem;
  }
  .learn section .interview li.RGT div p span {
    font-size: 1.7rem;
    display: block;
    text-align: center;
  }
}

@media screen and (min-width: 769px) and (max-width: 1020px) {
  .learn section .interview li.RGT div p {
    font-size: 1.6rem;
  }
  .learn section .interview li.RGT div p small {
    font-size: 1.6rem;
  }
  .learn section .interview li.RGT div p span {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 769px) {
  .learn .coach__top ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .learn .coach__top li {
    width: 349px;
    margin: 0 8px 30px;
  }
  .learn .coach__top__box {
    border-left: 5px solid;
    border-right: 5px solid;
    border-bottom: 5px solid;
    border-radius: 0 0 20px 20px;
    padding: 30px 0;
    letter-spacing: 0;
    text-align: center;
  }
  .learn .coach__top__box--blue {
    border-color: #00AEEB;
  }
  .learn .coach__top__box--grn {
    border-color: #8DC33E;
  }
  .learn .coach__top__box--pink {
    border-color: #E75297;
  }
  .learn .coach__top h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px;
  }
  .learn .coach__top h3 span {
    display: inline-block;
    background: linear-gradient(transparent 70%, #ff9 30%);
  }
  .learn .coach__top a {
    margin-top: 20px;
    background: #F5DA00;
    font-size: 1.5rem;
    padding: 3px 50px;
    display: inline-block;
  }
  .learn .coach__btm {
    margin-top: 120px;
  }
  .learn .coach__btm__ttl {
    position: relative;
  }
  .learn .coach__btm__ttl h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: bold;
  }
  .learn .coach__btm__ttl .calc_pop {
    position: absolute;
    top: 50%;
    right: -1%;
    transform: translate(0, -50%);
  }
  .learn .coach__btm__contents {
    border-left: 3px solid;
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-color: #EF821E;
    border-radius: 0 0 20px 20px;
    padding: 30px 7%;
  }
  .learn .coach__btm__contents ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .learn .coach__btm__contents ul li {
    width: 30%;
  }
  .learn .coach__btm__contents p {
    text-align: center;
    font-size: 1.4rem;
  }
  .learn .system__blk {
    max-width: 960px;
    margin: 70px auto 0;
  }
  .learn .system__blk ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .learn .system__blk li {
    width: 47%;
    margin-bottom: 25px;
  }
  .learn .system__blk li h3 {
    font-size: 2.9rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-right: 3%;
    margin-bottom: 20px;
    color: #EF8200;
    border-bottom: 3px solid #EF8200;
    letter-spacing: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1250px) {
  .learn .system__blk li h3 {
    font-size: 2rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 950px) {
  .learn .system__blk li h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 769px) {
  .learn .system__blk li div {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .learn .system__blk li div p:first-of-type {
    width: 52%;
  }
  .learn .system__blk li div p:last-of-type {
    width: 46%;
    text-align: justify;
  }
  .learn .system__surara {
    position: relative;
    margin-top: 10px;
  }
  .learn .voice {
    background: url(../img/jhs/feature/learn/voice_bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    margin-top: 110px;
  }
  .learn .voice h2 {
    color: #fff;
    margin-bottom: -10px;
  }
  .learn .voice h2 img {
    margin-bottom: 30px;
  }
  .learn .voice ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
  }
  .learn .voice li {
    width: 47%;
    margin-bottom: 40px;
  }
  .learn .voice li h3 {
    font-size: 2.2rem;
    color: #FFF000;
    line-height: 1.6;
    margin: 20px 0 30px;
    position: relative;
    white-space: nowrap;
    font-weight: bold;
  }
}

@media screen and (min-width: 769px) and (max-width: 1260px) {
  .learn .voice li h3 {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1080px) {
  .learn .voice li h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 769px) {
  .learn .voice li h3 img {
    position: absolute;
    top: -80px;
    right: 0;
  }
  .learn .voice li h3 img.voice_bg01 {
    top: -80px;
    width: 32%;
  }
  .learn .voice li h3 img.voice_bg02 {
    right: -3%;
    width: 25%;
  }
  .learn .voice li h3 img.voice_bg03 {
    right: 3%;
    width: 32%;
  }
  .learn .voice li h3 img.voice_bg04 {
    top: 20px;
    right: -3%;
    width: 32%;
  }
  .learn .voice li p {
    font-size: 1.7rem;
    color: #fff;
  }
}

@media screen and (min-width: 769px) and (max-width: 1080px) {
  .learn .voice li p {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 769px) {
  .learn .voice li .hidden {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*IE対策*/
    line-height: 1.8em;
    max-height: 5.4em;
  }
  .learn .voice li .hidden_btn {
    text-align: center;
  }
  .learn .voice li .hidden_btn div {
    cursor: pointer;
    display: inline-block;
    padding: 2px 35px;
    background: #F5DA00;
    font-size: 1.5rem;
    margin-top: 15px;
  }
  .learn .voice li .hidden_btn div:hover {
    opacity: 0.8;
  }
  .learn .voice li .df {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .learn .voice li .df h3 {
    margin-bottom: 10px;
    width: 68%;
  }
  .learn .voice li .df picture {
    width: 30%;
  }
  .learn .voice li .df picture img {
    height: 196px;
    width: auto;
  }
  .modal_contents, .modal_contents01 {
    position: relative;
  }
  .modal_contents .inline_close, .modal_contents01 .inline_close {
    position: absolute;
    top: -80px;
    right: 0;
  }
  .modal_contents .inline_close div, .modal_contents01 .inline_close div {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
  }
  .modal_contents .inline_close div span, .modal_contents01 .inline_close div span {
    position: absolute;
    top: 35px;
    left: -7px;
    width: 120%;
    height: 1px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .modal_contents .inline_close div span:nth-of-type(2), .modal_contents01 .inline_close div span:nth-of-type(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .modal_contents {
    position: relative;
    border: 4px solid;
    border-radius: 0 20px 20px 20px;
  }
  .modal_contents--blue {
    border-color: #00AEEB;
  }
  .modal_contents--grn {
    border-color: #8DC33E;
  }
  .modal_contents--pink {
    border-color: #E75297;
  }
  .modal_contents .tab {
    position: absolute;
    top: -72px;
    left: -4.5px;
  }
  .modal_contents .top {
    display: flex;
    justify-content: space-between;
  }
  .modal_contents .top li:first-of-type {
    width: 50%;
    position: relative;
    background: #fff;
  }
  .modal_contents .top li:first-of-type .img_deco {
    position: absolute;
    bottom: -18%;
    right: -18%;
  }
  .modal_contents .top li:last-of-type {
    width: 50%;
    padding-top: 60px;
  }
  .modal_contents .top li:last-of-type h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px;
    text-align: center;
  }
  .modal_contents .top li:last-of-type h3 span {
    background: linear-gradient(transparent 70%, #ff9 30%);
  }
  .modal_contents .top li:last-of-type .txt {
    text-align: center;
    margin-bottom: 20px;
  }
  .modal_contents .top li:last-of-type .kentei {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
  .modal_contents .top li:last-of-type .kentei span {
    color: #EF8200;
  }
  .modal_contents .top li:last-of-type .column_three {
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }
  .modal_contents .top li:last-of-type .column_three span {
    display: block;
    padding: 10px;
    margin: 0 5px;
    background: #F5DA01;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
    line-height: 1.4;
  }
  .modal_contents .top li:last-of-type .column_three span.one {
    padding: 18px 10px;
  }
  .modal_contents .btm {
    padding: 0 8% 50px;
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
  .modal_contents .btm {
    padding: 0 3% 50px;
  }
}

@media screen and (min-width: 769px) {
  .modal_contents .btm li {
    width: 31%;
    position: relative;
  }
  .modal_contents .btm li .floPct {
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 180px;
  }

  .modal_contents .btm li h3 {
    font-size: 1.9rem;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    text-align: center;
    line-height: 1.4;
  }
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
  .modal_contents .btm li h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_contents .btm li h3.blue {
    color: #00AEEB;
    border-color: #00AEEB;
  }
  .modal_contents .btm li h3.grn {
    color: #8DC33E;
    border-color: #8DC33E;
  }
  .modal_contents .btm li h3.pink {
    color: #E75297;
    border-color: #E75297;
  }
  .modal_contents .btm li p {
    text-align: justify;
  }
  .modal_contents01 .blk {
    width: 100%;
    background-image: url("../img/jhs/feature/learn/modal04_bg.png");
    background-position: center top;
    background-size: 100%;
    background-repeat: repeat-y;
    padding: 30px 60px;
  }
  .modal_contents01 .blk h3 {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
  }
  .modal_contents01 .blk ul {
    display: flex;
    justify-content: space-between;
  }
  .modal_contents01 .blk li {
    width: 31%;
  }
  .modal_contents01 .blk li h4 {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    color: #EF8200;
    margin: 20px 0;
    line-height: 1.4;
  }
  .modal_contents01 .blk li p {
    text-align: justify;
  }
}

@media only, screen and (max-width: 768px) {
  footer.ft {
    margin-top: 0;
  }
  .learn .page__h2 {
    text-align: center;
    font-size: 2rem;
  }
  .learn .page__h2 span {
    font-size: 2.6rem;
  }
  .learn .page__h2 span.small {
    font-size: 1.6rem;
  }
  .learn .page__h2 small.h2_small {
    font-size: 1.6rem;
  }
  .learn section .interview {
    margin: 30px auto;
    border: 2px solid;
    border-radius: 20px;
    padding: 25px 5%;
  }
  .learn section .interview--blue {
    border-color: #00AEEB;
    background: #DEF1FB;
  }
  .learn section .interview--org {
    border-color: #EF8200;
    background: #FFFAD7;
  }
  .learn section .interview li.LFT h3 {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
  }
  .learn section .interview li.LFT img {
    display: block;
    margin: 0 auto;
    max-width: 230px;
    height: auto;
  }
  .learn section .interview li.RGT div {
    margin-bottom: 15px;
  }
  .learn section .interview li.RGT div p {
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center;
    margin-top: 20px;
  }
  .learn section .interview li.RGT .txt {
    text-align: justify;
  }
  .learn .coach__top .tekisei_sp {
    width: 200px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .learn .coach__top li {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    padding: 30px 5%;
    margin-bottom: 50px;
  }
  .learn .coach__top li:first-of-type {
    background: #00AEEB;
  }
  .learn .coach__top li:nth-of-type(2) {
    background: #8DC33E;
  }
  .learn .coach__top li:last-of-type {
    background: #E75297;
  }
  .learn .coach__top li img {
    width: 100%;
    height: auto;
  }
  .learn .coach__top li p {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }
  .learn .coach__top__box {
    background: #fff;
    padding: 0 5% 30px;
    letter-spacing: 0;
    text-align: center;
    border-radius:0 0 10px 10px;
  }
  .learn .coach__top h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 10px;
  }
  .learn .coach__top h3 span {
    display: inline-block;
    background: linear-gradient(transparent 70%, #ff9 30%);
  }
  .learn .coach__top a {
    margin-top: 20px;
    background: #F5DA00;
    font-size: 1.5rem;
    padding: 15px 70px;
    display: inline-block;
  }
  .learn .coach__top a:focus-visible {
    outline: none !important;
  }
  .learn .coach__btm {
    margin-top: 60px;
  }
  .learn .coach__btm__ttl {
    position: relative;
  }
  .learn .coach__btm__ttl h3 {
    font-size: 1.8rem;
    font-weight: bold;
    background: url(../img/jhs/feature/learn/calc_topbg_sp.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 30px 0;
    text-align: center;
    line-height: 2;
  }
  .learn .coach__btm__ttl .calc_pop {
    display: block;
    margin: 0 auto;
    background: #EF8200;
  }
  .learn .coach__btm__contents ul {
    margin: 0 auto;
    padding: 0;
    overflow-x: scroll;
    /* 横スクロールの指定 */
    white-space: nowrap;
    /* 横スクロールの指定 */
    overflow-scrolling: touch;
    /* スクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;
    /* スクロールを滑らかにする */
  }
  .learn .coach__btm__contents ul li {
    display: inline-block;
    /* 横並びにする指定 */
    list-style: none;
    height: 300px;
    /* 横スクロールする範囲の高さを指定 */
    vertical-align: middle;
  }
  .learn .coach__btm__contents ul li img {
    width: 240px;
  }
  .learn .coach__btm__contents ul li p {
    margin-top: 20px;
  }
  .learn .coach__btm__contents ul li:first-of-type, .learn .coach__btm__contents ul li:last-of-type {
    padding-bottom: 44px;
  }
  .learn .coach__btm__contents ul li:nth-last-of-type(2) {
    margin-left: 10px;
    margin-right: 10px;
  }
  .learn .coach__btm__contents ul li:nth-last-of-type(2) img {
    display: block;
    margin: 0 auto;
  }
  .learn .coach__btm__contents p {
    text-align: center;
    font-size: 1.3rem;
  }
  .learn .system h2 {
    letter-spacing: 0;
    padding: 0;
  }
  .learn .system .top_img img {
    display: block;
    margin: 0 auto;
  }
  .learn .system__blk {
    margin: 40px auto 0;
  }
  .learn .system__blk li {
    margin-bottom: 40px;
  }
  .learn .system__blk li h3 {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    color: #EF8200;
  }
  .learn .system__blk li div p.img {
    width: 97vw;
    margin-left: calc(47.5% - 46vw);
  }
  .learn .system__blk li div p.img img {
    display: block;
    margin: 0 auto;
  }
  .learn .system__blk li div p:last-of-type {
    text-align: justify;
  }
  .learn .system__surara {
    position: relative;
    margin-top: 10px;
  }
  .learn .system__surara__box img {
    max-width: 400px;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }
  .learn .voice {
    background: url(../img/jhs/feature/learn/voice_bg_sp.png) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 30px 0;
    margin-top: 50px;
  }
  .learn .voice h2 {
    color: #fff;
    margin-bottom: -10px;
  }
  .learn .voice h2 img {
    margin-bottom: 30px;
  }
  .learn .voice li {
    margin-bottom: 40px;
  }
  .learn .voice li h3 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #FFF000;
    line-height: 1.6;
    margin: 10px 0;
  }
  .learn .voice li p {
    font-size: 1.4rem;
    color: #fff;
  }
  .learn .voice li p.stu_img {
    position: relative;
    display: inline-block;
  }
  .learn .voice li p.stu_img .img {
    height: 150px;
    width: auto;
  }
  .learn .voice li p.stu_img .voice_bg {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .learn .voice li p.stu_img .voice_bg.voice_bg01 {
    right: -15%;
    bottom: 55px;
    width: 20%;
  }
  .learn .voice li p.stu_img .voice_bg.voice_bg02 {
    bottom: 55px;
    width: 11%;
  }
  .learn .voice li p.stu_img .voice_bg.voice_bg03 {
    right: -8%;
    bottom: 25px;
    width: 20%;
  }
  .learn .voice li p.stu_img .voice_bg.voice_bg04 {
    right: -30%;
    bottom: 25px;
    width: 25%;
  }
  .learn .voice li .hidden {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*IE対策*/
    line-height: 1.8em;
    max-height: 5.4em;
  }
  .learn .voice li .hidden_btn {
    text-align: center;
  }
  .learn .voice li .hidden_btn div {
    cursor: pointer;
    display: inline-block;
    padding: 12px 65px;
    background: #F5DA00;
    font-size: 1.5rem;
    margin-top: 20px;
  }
  .learn .voice li .df {
    display: block;
    margin-bottom: 10px;
  }
  .learn .voice li .df p {
    max-width: 100px;
    text-align: center;
    margin: 0 auto 20px;
  }
  .learn .voice li .df p.txt_rgt {
    text-align: right;
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
  }
  .learn .voice li .df h3 {
    margin-bottom: 5px;
  }
  .modal_contents, .modal_contents01 {
    position: relative;
  }
  .modal_contents .inline_close, .modal_contents01 .inline_close {
    position: absolute;
    top: -80px;
    right: 0;
  }
  .modal_contents .inline_close div, .modal_contents01 .inline_close div {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
  }
  .modal_contents .inline_close div span, .modal_contents01 .inline_close div span {
    position: absolute;
    top: 35px;
    left: -7px;
    width: 120%;
    height: 1px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .modal_contents .inline_close div span:nth-of-type(2), .modal_contents01 .inline_close div span:nth-of-type(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .modal_contents {
    position: relative;
    border: 4px solid;
    border-radius: 20px 20px 20px 20px;
  }
  .modal_contents--blue {
    border-color: #00AEEB;
  }
  .modal_contents--grn {
    border-color: #8DC33E;
  }
  .modal_contents--pink {
    border-color: #E75297;
  }
  .modal_contents .box__ttl {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    line-height: 2;
    color: #fff;
    color: #fff;
    border-radius: 18px 18px 0 0;
    margin-top: -1px;
    width: 100%;
    margin-left: 0;
  }
  .modal_contents .box__ttl--blue {
    background: #00AEEB;
  }
  .modal_contents .box__ttl--grn {
    background: #8DC33E;
  }
  .modal_contents .box__ttl--pink {
    background: #E75297;
  }
  .modal_contents .top li:last-of-type {
    padding-top: 20px;
  }
  .modal_contents .top li:last-of-type h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 10px;
    text-align: center;
  }
  .modal_contents .top li:last-of-type h3 span {
    background: linear-gradient(transparent 70%, #ff9 30%);
  }
  .modal_contents .top li:last-of-type .txt {
    text-align: center;
    margin-bottom: 20px;
  }
  .modal_contents .top li:last-of-type .kentei {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
  .modal_contents .top li:last-of-type .kentei span {
    color: #EF8200;
  }
  .modal_contents .top li:last-of-type .column_three {
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }
  .modal_contents .top li:last-of-type .column_three span {
    display: block;
    padding: 10px 0;
    width: 85px;
    margin: 0 5px;
    background: #F5DA01;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
    line-height: 1.4;
  }
  .modal_contents .top li:last-of-type .column_three span.one {
    padding: 18px 0;
  }
  .modal_contents .btm {
    padding: 0 5%;
    margin-top: 30px;
  }
  .modal_contents .btm li {
    margin-bottom: 30px;
  }
  .modal_contents .btm li h3 {
    font-size: 1.6rem;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid;
    text-align: center;
  }
  .modal_contents .btm li h3.blue {
    color: #00AEEB;
    border-color: #00AEEB;
  }
  .modal_contents .btm li h3.grn {
    color: #8DC33E;
    border-color: #8DC33E;
  }
  .modal_contents .btm li h3.pink {
    color: #E75297;
    border-color: #E75297;
  }
  .modal_contents .btm li p {
    text-align: justify;
  }
  .modal_contents01 {
    background: #FFE45F;
    border-radius: 15px;
    padding: 30px 5%;
  }
  .modal_contents01 .tab {
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .modal_contents01 .blk {
    width: 100%;
    margin-top: 30px;
  }
  .modal_contents01 .blk h3 {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
  }
  .modal_contents01 .blk li {
    margin-bottom: 40px;
  }
  .modal_contents01 .blk li:last-of-type {
    margin-bottom: 0;
  }
  .modal_contents01 .blk li h4 {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    color: #EF8200;
    margin: 20px 0 10px;
  }
  .modal_contents01 .blk li p {
    text-align: justify;
  }
}


/*print*/
@media print{
  footer.ft {
    margin-top: 0;
  }
  .learn .page__h2 {
    text-align: center;
    font-size: 3.5rem;
  }
  .learn .page__h2 span {
    font-size: 4.6rem;
  }
  .learn .page__h2 span.small {
    font-size: 3.5rem;
  }
  .learn .page__h2 small.h2_small {
    font-size: 2.2rem;
  }
  .learn section .interview {
    margin: 60px auto;
    max-width: 860px;
    border: 3px solid;
    border-radius: 20px;
    padding: 25px 25px 0;
  }
  .learn section .interview--blue {
    border-color: #00AEEB;
    background: #DEF1FB;
    margin: 20px auto 60px;
  }
  .learn section .interview--org {
    border-color: #EF8200;
    background: #FFFAD7;
  }
  .learn section .interview ul {
    display: flex;
    justify-content: space-between;
  }
  .learn section .interview li.LFT {
    width: 30%;
  }
  .learn section .interview li.RGT {
    width: 70%;
  }
  .learn section .interview li.RGT div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
  }
  .learn section .interview li.RGT div h3 {
    font-size: 2.2rem;
    font-weight: bold;
    white-space: nowrap;
  }
  .learn section .interview li.RGT div p {
    font-size: 2.1rem;
    line-height: 1.4;
  }
  .learn section .interview li.RGT div p small {
    font-size: 1.7rem;
  }
  .learn section .interview li.RGT div p span {
    font-size: 1.7rem;
    display: block;
    text-align: center;
  }
  .learn .coach__top ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .learn .coach__top li {
    width: 349px;
    margin: 0 8px 30px;
  }
  .learn .coach__top__box {
    border-left: 5px solid;
    border-right: 5px solid;
    border-bottom: 5px solid;
    border-radius: 0 0 20px 20px;
    padding: 30px 0;
    letter-spacing: 0;
    text-align: center;
  }
  .learn .coach__top__box--blue {
    border-color: #00AEEB;
  }
  .learn .coach__top__box--grn {
    border-color: #8DC33E;
  }
  .learn .coach__top__box--pink {
    border-color: #E75297;
  }
  .learn .coach__top h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px;
  }
  .learn .coach__top h3 span {
    display: inline-block;
     background: linear-gradient(#FFF 0%, #FFF 69%,#FF9 70%, #FF9 100%);
  }
  .learn .coach__top a {
    margin-top: 20px;
    background: #F5DA00;
    font-size: 1.5rem;
    padding: 3px 50px;
    display: inline-block;
  }
  .learn .coach__btm {
    margin-top: 120px;
  }
  .learn .coach__btm__ttl {
    position: relative;
  }
  .learn .coach__btm__ttl h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: bold;
  }
  .learn .coach__btm__ttl .calc_pop {
    position: absolute;
    top: 50%;
    right: -1%;
    transform: translate(0, -50%);
  }
  .learn .coach__btm__contents {
    border-left: 3px solid;
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-color: #EF821E;
    border-radius: 0 0 20px 20px;
    padding: 30px 7%;
  }
  .learn .coach__btm__contents ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .learn .coach__btm__contents ul li {
    width: 30%;
  }
  .learn .coach__btm__contents p {
    text-align: center;
    font-size: 1.4rem;
  }
  .learn .system__blk {
    max-width: 960px;
    margin: 70px auto 0;
  }
  .learn .system__blk ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .learn .system__blk li {
    width: 47%;
    margin-bottom: 25px;
  }
  .learn .system__blk li h3 {
    font-size: 2.9rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-right: 3%;
    margin-bottom: 20px;
    color: #EF8200;
    border-bottom: 3px solid #EF8200;
    letter-spacing: 0;
  }
  .learn .system__blk li div {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .learn .system__blk li div p:first-of-type {
    width: 52%;
  }
  .learn .system__blk li div p:last-of-type {
    width: 46%;
    text-align: justify;
  }
  .learn .system__surara {
    position: relative;
    margin-top: 10px;
  }
  .learn .voice {
    background: url(../img/jhs/feature/learn/voice_bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    margin-top: 110px;
  }
  .learn .voice h2 {
    color: #fff;
    margin-bottom: -10px;
  }
  .learn .voice h2 img {
    margin-bottom: 30px;
  }
  .learn .voice ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
  }
  .learn .voice li {
    width: 47%;
    margin-bottom: 40px;
  }
  .learn .voice li h3 {
    font-size: 2.2rem;
    color: #FFF000;
    line-height: 1.6;
    margin: 20px 0 30px;
    position: relative;
    white-space: nowrap;
    font-weight: bold;
  }
  .learn .voice li h3 img {
    position: absolute;
    top: -80px;
    right: 0;
  }
  .learn .voice li h3 img.voice_bg01 {
    top: -80px;
    width: 32%;
  }
  .learn .voice li h3 img.voice_bg02 {
    right: -3%;
    width: 25%;
  }
  .learn .voice li h3 img.voice_bg03 {
    right: 3%;
    width: 32%;
  }
  .learn .voice li h3 img.voice_bg04 {
    top: 20px;
    right: -3%;
    width: 32%;
  }
  .learn .voice li p {
    font-size: 1.7rem;
    color: #fff;
  }
  .learn .voice li .hidden {
    display: block;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
    /*IE対策*/
    line-height: 1.8em;
    max-height: auto;
  }
  .learn .voice li .hidden_btn {
    text-align: center;
  }
  .learn .voice li .hidden_btn div {
    cursor: pointer;
    display: inline-block;
    padding: 2px 35px;
    background: #F5DA00;
    font-size: 1.5rem;
    margin-top: 15px;
	display: none;
  }
  .learn .voice li .hidden_btn div:hover {
    opacity: 0.8;
  }
  .learn .voice li .df {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .learn .voice li .df h3 {
    margin-bottom: 10px;
    width: 68%;
  }
  .learn .voice li .df picture {
    width: 30%;
  }
  .learn .voice li .df picture img {
    height: 196px;
    width: auto;
  }
  .modal_contents, .modal_contents01 {
    position: relative;
  }
  .modal_contents .inline_close, .modal_contents01 .inline_close {
    position: absolute;
    top: -80px;
    right: 0;
  }
  .modal_contents .inline_close div, .modal_contents01 .inline_close div {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
  }
  .modal_contents .inline_close div span, .modal_contents01 .inline_close div span {
    position: absolute;
    top: 35px;
    left: -7px;
    width: 120%;
    height: 1px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .modal_contents .inline_close div span:nth-of-type(2), .modal_contents01 .inline_close div span:nth-of-type(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .modal_contents {
    position: relative;
    border: 4px solid;
    border-radius: 0 20px 20px 20px;
  }
  .modal_contents--blue {
    border-color: #00AEEB;
  }
  .modal_contents--grn {
    border-color: #8DC33E;
  }
  .modal_contents--pink {
    border-color: #E75297;
  }
  .modal_contents .tab {
    position: absolute;
    top: -72px;
    left: -4.5px;
  }
  .modal_contents .top {
    display: flex;
    justify-content: space-between;
  }
  .modal_contents .top li:first-of-type {
    width: 50%;
    position: relative;
    background: #fff;
  }
  .modal_contents .top li:first-of-type .img_deco {
    position: absolute;
    bottom: -18%;
    right: -18%;
  }
  .modal_contents .top li:last-of-type {
    width: 50%;
    padding-top: 60px;
  }
  .modal_contents .top li:last-of-type h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px;
    text-align: center;
  }
  .modal_contents .top li:last-of-type h3 span {
    background: linear-gradient(#FFF 0%, #FFF 69%,#FF9 70%, #FF9 100%);
  }
  .modal_contents .top li:last-of-type .txt {
    text-align: center;
    margin-bottom: 20px;
  }
  .modal_contents .top li:last-of-type .kentei {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
  .modal_contents .top li:last-of-type .kentei span {
    color: #EF8200;
  }
  .modal_contents .top li:last-of-type .column_three {
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }
  .modal_contents .top li:last-of-type .column_three span {
    display: block;
    padding: 10px;
    margin: 0 5px;
    background: #F5DA01;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
    line-height: 1.4;
  }
  .modal_contents .top li:last-of-type .column_three span.one {
    padding: 18px 10px;
  }
  .modal_contents .btm {
    padding: 0 8% 50px;
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
  }


  .modal_contents .btm li {
    width: 31%;
    position: relative;
  }
  .modal_contents .btm li .floPct {
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 180px;
  }

  .modal_contents .btm li h3 {
    font-size: 1.9rem;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    text-align: center;
    line-height: 1.4;
  }


  .modal_contents .btm li h3.blue {
    color: #00AEEB;
    border-color: #00AEEB;
  }
  .modal_contents .btm li h3.grn {
    color: #8DC33E;
    border-color: #8DC33E;
  }
  .modal_contents .btm li h3.pink {
    color: #E75297;
    border-color: #E75297;
  }
  .modal_contents .btm li p {
    text-align: justify;
  }
  .modal_contents01 .blk {
    width: 100%;
    background-image: url("../img/jhs/feature/learn/modal04_bg.png");
    background-position: center top;
    background-size: 100%;
    background-repeat: repeat-y;
    padding: 30px 60px;
  }
  .modal_contents01 .blk h3 {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
  }
  .modal_contents01 .blk ul {
    display: flex;
    justify-content: space-between;
  }
  .modal_contents01 .blk li {
    width: 31%;
  }
  .modal_contents01 .blk li h4 {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    color: #EF8200;
    margin: 20px 0;
    line-height: 1.4;
  }
  .modal_contents01 .blk li p {
    text-align: justify;
  }
	
	#modal01, #modal02, #modal03, #modal04{
		display: block !important;
		margin-top: 80px;
	}
	
}