/*============================ START school.xhtml STYLE ==========================*/
body a {
    text-decoration: none;
    color: inherit;
}
.share-button .btn-o .btn i {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231l5.45-6.231Zm-1.161 17.52h1.833L7.045 4.126H5.078L17.044 19.77Z'/%3e%3c/svg%3e ");
}
.share-button .twitter-share-button {
    background-color: #000;
    color: #fff;
    width: 88px;
    height: 20px;
    font-size: 11.5px;
    border-radius: 1em;
    padding: 1px 12px;
    font-weight: 500;
}
.btn{
    background-color: #000;
}
.wrapper-twitter-share {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.wrapper-twitter-share .button-twitter-x {
    background-color: #000;
    color: #fff;
    width: 88px;
    height: 20px;
    font-size: 11.5px;
    border-radius: 1em;
    padding: 1px 12px;
    font-weight: 500;
    display: flex;
    cursor: pointer;
}
.wrapper-twitter-share iframe{
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 0;
}
.wrapper-twitter-share .button-twitter-x .icon {
    width: 11px;
    margin-right: 5px;
}
.mulberry {
    margin-bottom: 20px;
    padding: 0;
}
.mulberry h1.new-margin{
    margin-top: 0;
}
.no-padding-top-sm{
    padding-top: 0;
    padding-bottom: 0;
}
.about-teacher .margin-bottom-teacher{
    padding: 0.5em 0 1.5em 0;
}
.title-number .total-pref-wrap .prefecture-name.date {
    font-size: 16px;
}
.title-number .total-pref-wrap .total-prefecture.day {
    font-size: 12px;
    color: #1b1b1b;
}
.text-school-intro a:hover{
    color: #FB745C;
}
.prefecture-list-wrap{
    background-color: rgba(255, 255, 255, 0.5);
    width: calc(12.5% - 14px);
    margin: 7px;
    display: flex;
}
.color-box .level-bar button.active-level {
    color: #1b1b1b;
    background: #FFC804;
}
.title-number .sch .total-pref-wrap .prefecture-name date {
    font-size: 16px;
}
.title-number .sch .total-pref-wrap .total-prefecture day {
    font-size: 12px;
    color: #1b1b1b; 
}
.prefecture-list-wrap a{
    padding: 0 0 0 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #000;
    align-items: center;
}
.prefecture-list-wrap a:hover{
    color: #90BFC5;
}
.title-detail-course {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.total-pref-wrap{
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    background-color: #FDFDFD;
}
.sch-top-ttl span{
    color: #1B1B1B;
}
.sch-top-ttl a{
    color: #1B1B1B;
}
.sch-top-ttl a:hover{
    color: #f25e2a;
}
.address-map-link .map-link p:hover{
    color: #f25e2a;
}
.list-link-maps .map-link p:hover{
    color: #f25e2a;
}
.hover-sch-ttl .caption .name:hover{
    color: #f25e2a;
}
.title-space h1{
    margin-top: 0px;
}
/*.title span.ttl-tc {
    line-height: 2em;
}*/

.teacher-sns {
    margin-top: .5em;
    margin-bottom: 1em;
}

.list-link-maps li::marker {
    font-size: 16px;
    color: #E8472A;
}
.list-link-maps li {
    list-style-type: ">";
    margin-right: 1em;
}
.list-link-maps a {
    display: block;
}
a.map-link {
    display: flex;
    margin-top: 1.2em;
    align-items: center;
}
.address-map-link a.map-link {
    display: flex;
    margin-top: 0em;
    margin-left: 10.7em;
}
.disflex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.map-link .maps-arrow {
    max-width: 15px;
    height: 15px;
    margin-right: 0.4em;
}
.margin-bottom-loc a.map-link{
    margin-bottom: 0.7em;
}
.right-section .small-margin-top{
    margin-top: 1.5em;
}

.address .loc1 p:first-child, .address .loc2 p:first-child, .address .loc3 p:first-child {
    font-size: 16px;
}

.tag-icon{
    padding: 4px 4px 4px 0px;
    margin-right: 2px;
    width: 20px;
    height: auto;
}

.mulberry .tags{
    display: flex;
    align-items: flex-start;
    color: #FB745C;
    margin-bottom: 0.3em;
    margin-right: 0.9em;
}
.mulberry.hidden-line p{
    padding: 21px 0 0;
    border-bottom: none;
}
.wrap-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.3em;
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 1.4em;
}
.wrap-tags-sch {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.3em;
}
.mulberry.mulberry-no-border-btm{
    border-bottom: none;
    padding-bottom: 0em;
}
.margin-share-button-no-pad {
    margin-bottom: 0;
}
.mulberry.mulberry-margin-bottom{
    margin-bottom: 15px;
    padding: 5px 14px;
}
.mulberry.mulberry-margin-bottom.border-bottom-share{
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 1.4em;
    margin-bottom: 24px;
}
.mulberry.padding-top-p p{
    padding: 0;
}
.about-teacher .content, .news .content{
    padding: 5px 14px;
}
.news p.text-desc.content, .news p.article-wrapper-school.content{
    margin-top: 1em;
}
.colorBlack{
    width: 210px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
}
button.use-arrow.colorBlack::after{
    content: "";
    display: block;
    background-image: url(/resources/shashusho/img/arrow-white.png);
    position: absolute;
    transform: rotate(360deg)translateY(50%);
    top: 0%;
    width: 23px;
    background-size: contain;
    height: 16px;
    right: 10px;
}
.about-teacher .left p {
    padding: 0;
    margin: 0;
}
.ttl-tc {
    display: block;
    /*margin-top: 8px;*/
    line-height: 1.5;
    font-weight: bold;
}

.teacher-head {
    margin-bottom: 10px;
}
.about-class {
    margin-bottom: 5px;
}
.teacher-detail-page .wrap-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.teacher-detail-page .flex-control-thumbs li{
    color: white;
    border: 0px solid transparent;
    height: 0;
    padding-bottom: 16.5%;
    position: relative;
}
.teacher-detail-page .flex-control-thumbs li img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.workshop-slider {
    margin-bottom: 41px;
}
.workshop-content {
    margin-bottom: 90px;
}
.maps-address {
    margin-bottom: 0;
}
form.button-school {
    margin-top: 4em;
    display: block;
    width: 100%;
    float: left;
}
.address .loc3 a{
    word-break: break-all;
    color: #FB745C;
}
.address .loc3 a:hover{
    color: rgba(242, 94, 42, 1);
}
.school-page .about-teacher  .wrapper-school-teach:not(:first-of-type) .teacher-head .left h2 {
    display: none
}
.school-page .about-teacher .wrapper-school-teach:not(:first-of-type) .teacher-head .left {
    margin-top: 24px;
}
.school-page .about-teacher .wrapper-school-teach:not(:first-of-type) .teacher-head {
    margin-top: 14px;
}

/*add by dini (4/26)*/
.course-section {
    /*border-top: 1px solid #c1c1c1;*/
    padding-top: 0;
    margin-bottom: 65px;
}
.course-section .about-lesson h2.sub-title{
    margin: 15px 0 0;
}
.course-section .teacher-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 1em;
}
.course-section .teacher-name {
    font-size: 15px;
    padding: 1em 0;
    margin-left: -1em;
}
.course-section .teacher-org {
    font-size: 14px;
    display: block;
    color: #FB745C;
}
.course-section .about-lesson {
    margin-bottom: 50px;
}
.course-section .event-img-course {
    height: 14px;
    margin-right: 6px;
}
.course-section .course-event-label {
    font-size: 14px;
    display: flex;
    align-items: center;
    border: 1px solid #727272;
    border-radius: 4px;
    width: max-content;
    padding: 1px 8px;
    margin-left: 28px;
}
.course-section .course-ttl {
    width: 45px;
    margin-left: auto;
}
.course-section .course-ttl img {
    width: 52px;
}
.course-section .border-bottom-brown {
    display: grid;
}
.course-section .desc-course {
    flex: 1;
    display: flex;
    align-items: center;
    /*    margin-top: 11px;*/
}
/*.image-right-part .title-lesson hr {
    border-top: 1px solid #cacaca;
    margin: 2em auto 0;
}*/
.course-note hr{
    border-top: 1px solid #dadada;
    margin: .5em auto 25px;
}
.course-section .course-box-1 {
    border: 1px solid #BBBBBB;
    padding: 10px;
    margin-bottom: 20px;
}
.course-section .image-right-part {
    /*    padding-right: 2em;*/
    /*    width: 35%;*/
    min-width: 260px;
    display: flex;
    align-items: center;
    padding: 0 0.5em;
}
.image-right-part .teacher-profile-img{
    width: 35%;
}
.image-right-part .title-lesson{
    width: 65%;
    padding-left: 2em;
}
.image-lesson-course{
    width: 35%;
}
.image-lesson-course p.text-desc{
    margin-top: 1em;
}
.course-note{
    width: 65%;
    padding-left: 2em;
    padding-top: 0;
}
.course-section .text-left-part {
    flex: 1;
    display: flex;
    padding-top: 0;
}
.trial-label{
    background-color: #15993A;
    color: white;
    padding: 5px 10px;
}
.left-auto{
    margin-left: auto;
}
.course-section .course-item-content {
    margin-bottom: 1em;
}
.course-section .free-trial {
    width: 100%;
    background: #FB745C;
    height: 35px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 35px;
    position: absolute;
    top: 0;
    left: 0;
}
.course-section .school-studio-img {
    position: relative;
}
.course-section .time-course {
    padding-right: 35px;
}
/*end add by dini (4/26)*/

.other-prefectures-wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.other-prefectures {
    width: 16.6667%;
    padding-right: 1em;
    padding-bottom: 0.5em;
    display: inline;
}
.other-prefectures .badge-tc {
    min-height: unset;
    margin-top: 4px;
}
.other-prefectures .name {
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.other-prefectures .title {
    font-size: 12px;
    margin-top: 7px;
}
.other-prefectures .item-genre {
    margin-right: 5px;
}
.title-part-other {
    margin-bottom: 20px;
}
.separator-line {
    border: none;
    border-bottom: 1px solid #c1c1c1;
    margin-bottom: 50px;
    margin-top: 0;
}
.school-page .right-section {
    margin-bottom: 40px;
}
.inquiry {
    margin-bottom: 0;
}

/*add by dini (5/18)*/
.lesson-button-apply .button {
    width: calc(50% - 7px);
    margin-bottom: 0.5em;
    margin-top: 1.5em;
}
.lesson-button-apply form .button:nth-of-type(odd) {
    margin-right: 7px;
}
.lesson-button-apply form .button:nth-of-type(even) {
    margin-left: 7px;
}
.lesson-button-apply {
    padding-top: 0;
    padding-bottom: 0;
    padding: 0;
    margin-top: 2em;
}
/*end add by dini (5/18)*/

/* add by risma (5/24)*/
.school-page .about-class h2.sub-title span, .school-page .about-news h2.sub-title span,
.school-page .about-teacher h2.sub-title span, .school-page .about-lesson h2.sub-title span,
.ttl-class-course h2.sub-title span, .school-page .about-event h2.sub-title span {
    text-transform: capitalize;
}
/*============================ END school.xhtml STYLE ==========================*/



/*============================ START schoolList.xhtml STYLE ==========================*/
.count-genre{
    color: #F25E2A;
    margin: 8 auto 4px;
}
.genre.sch{
    background-color: rgba(255, 255, 255, 0.5);
    width: calc(12.5% - 14px);
    height: 124.25px;
    margin: 7px;
    display: flex;
}
.genre.sch .icon-fit{
    position: relative;
    width: 40%;
    height: 0;
    padding-bottom: 40%;
    margin: auto;
}
.genre.sch a{
    padding: 10px 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}
.genre.sch a:hover{
    background-color: rgba(242, 96, 42, 0.2);
}
.school-prefectures .genre.sch {
    height: 45px;
}
.school-prefectures .genre-name {
    font-size: 15px;
}
.padding-page-sm .hover-bc-school a{
    color: #1B1B1B;
}
.padding-page-sm .hover-bc-school a:hover{
    color: #f25e2a;
}
.item-list .hover-popular-class:hover{
    color: #F25E2A;
}
.item-list .hover-new-class:hover{
    color: #F25E2A;
}
.new-home-breadcrumb{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
/*.home-new{
    width: 32%;
    margin-left: -0.5em;
    margin-right: -0.2em;
    margin-bottom: 0.2em;
}
.home-new-tchr{
    width: 32%;
    margin-left: -0.5em;
    margin-right: -0.4em;
    margin-bottom: 0.2em;
}*/
/*.margin-right-breadcrumb{
    margin-right: -4.3em;
}*/
.margin-breadcrumb{
    margin-right: 0.5em;
}
.margin-breadcrumb-left{
    margin-left: 0.5em;
}
.margin-left-qualification{
    margin-left: auto;
}
.teacher-qualification-logo{
    display: flex;
    align-items: center;
}
.event-caption .event-ttl-wrap .event-ttl a:hover{
    color: #F25E2A;
}
.title-school-prefecture {
    font-weight: normal;
}
.title-school-popular {
    font-weight: normal;
}
.wrapper-list a.slider-item:hover img {
    transform: scale(1.1);
    transition: transform 1.5s;
}
.box-shadow-item:hover {
    border: 1px solid #000;
}

/*============================ END schoolList.xhtml STYLE ==========================*/

/*============================ START detail.xhtml STYLE ==========================*/
.mulberry .content{
    padding: 5px 14px;
}
.mulberry p.subtitle{
    font-size: 18px;
    font-weight: bold;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif, sans-serif;
    margin-bottom: 24px;
}
p.text-desc{
    font-size: 14px;
    font-weight: normal;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif, sans-serif;
}
.wrap-tags-sch a.tag-text{
    color:#20707A;
}
.teacher-sns{
    justify-content: flex-start;
}
.teacher-sns .icon{
    width: 28px;
}
.about-teacher p.title{
    font-size: 16px;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif, sans-serif;
    margin-left: 1em;
}
.box-shadow-item-prof {
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.2));
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid transparent;
    margin: 4px;
}
.box-shadow-item-prof.other-course{
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.2));
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid transparent;
    margin: 4px;
}
.school-course-wrapper .list-other-course .other-course{
    margin-right: 1em;
}
.article-part-course .slider-item .text {
    word-break: break-all;
}
.article-part-course .title-section{
    margin-top: 15px;
}
.article-part{
    padding-bottom: 2.5em;
}
.image-thumb .box-shadow-item-prof.courseimg-item{
    width: calc(50% - 8px);
}
.margin-bottom1{
    margin-bottom: 1em;
}
.margin-btn-top{
    margin-top: 2em;
}
.title-space h1{
    font-size: 20px;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif, sans-serif;
    font-weight: bold;
}
.lesson-desc1 p.text-desc{
    padding-top: 1em;
    padding-bottom: 1.5em;
    line-height: 150%;
}
.lesson-desc2 p.text-desc{
    padding-top: 0em;
    padding-bottom: 1em;
    padding-top: 8px;
}
.lesson-desc h2{
    font-size: 18px;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif, sans-serif;
    font-weight: bold;
}
.tabel-lesson .ui-g {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tabel-lesson .ui-panelgrid{
    background-color: #E5E5E5;
}
.tabel-lesson .data .ui-panelgrid .ui-panelgrid-cell{
    background-color: #E5E5E5;
    padding: 5px 11px;
}

tr.ui-widget-header {
    display: flex;
    background-color: #E5E5E5;
    justify-content: center;
}
body .ui-panelgrid .ui-panelgrid-cell.ui-widget-header {
    border: none;
    background-color: #E5E5E5;
    color: #1B1B1B;
    padding: 0.857em 1em 0;
    font-weight: 400;
    display: flex;
    justify-content: center;
    margin: 5px 5px 5px;
    min-width: 92px;
    align-items: center;
}
tr.ui-widget-content.ui-panelgrid-even {
    display: flex;
    background-color: transparent;
    color: #666666;
    padding: 0;
    font-weight: 700;
}
tr.ui-widget-content td.ui-panelgrid-cell p{
    padding: 5px;
}
div.bg-gray{
    background-color: #DADADA;
    padding: 5px;
}
div.bg-green{
    background-color: #E3FFCE;
    padding: 8px;
}
div.bg-pink{
    background-color: #FF9C8D;
    padding: 5px;
}
div.bg-yellow{
    background-color: #FEDE8D;
    padding: 5px;
}
div.bg-gray:hover{
    background-color: #AAAAAA;
    padding: 5px;
}
div.bg-pink:hover{
    background-color: #FF7858;
    padding: 5px;
}
div.bg-yellow:hover{
    background-color: #F9AA4E;
    padding: 5px;
}
div.bg-green:hover{
    background-color: #91C47C;
}
tr.ui-widget-content.ui-panelgrid-odd {
    display: flex;
    background-color: transparent;
    color: #666666;
    /*padding: 0.857 .5em;*/
    font-weight: 700;
    /*justify-content: center;*/
}
tr.ui-widget-content td.ui-panelgrid-cell.column{
    border: 1px solid #dadada;
    background-color: #ffffff;
    color: #666666;
    padding: 0;
    margin: 5px 3px;
    min-width: 12%;
    display: grid;
    text-align: center;
}
tr.ui-widget-content td.ui-panelgrid-cell.column.zonk{
    border: none;
    background-color: transparent;
}
.scroll-tbl{
    overflow-x: auto;
}
.studio-img{
    padding:1em 1em 0 1em;
}
.other-prefectures2 {
    width: 20%;
    padding-right: 1em;
    padding-bottom: 0.5em;
    display: inline;
}
.other-prefectures2 .caption{
    padding-top: 1em;
}
.course-note .more-button-index .regular-btn{
    margin: 0;
}
.course-note .more-button-index{
    justify-content: left
}
.course-note .more-button-index {
    margin: 20px 0 0;
}
.position-absolute{
    position: absolute
}
.tag-orange{
    background-color: #EB5640;
    display: grid;
    justify-content: center;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    position: absolute;
    left: 85%;
    top: -4em;
    align-items: center;
}
.text-center{
    font-weight: 700;
    font-size: 16px;
    color: #ffff;
}
.title-links-course {
    padding: 0.5em 0;
    margin-bottom: 1em;
    border-bottom: 4px solid #000;
    width: fit-content;
    font-weight: 600;
    font-size: 18px;
}
.borderList {
    border-bottom: 1px solid #000;
    margin-left: 0;
    margin-top: -1.3em;
    width: 250px;
}
.list-link-course {
    width: max-content;
    list-style-type: none;
    padding-inline-start: 0;
    line-height: 2;
    font-size: 14px;
}
.orange-tag-bg{
    background-color: #EA5640;
    color: #ffffff;
    font-weight: bold;
    margin-right: 5px;
    padding: 8px;
    display: inline-grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
}
.orange-tag-bg2 {
    background-color: #EA5640;
    color: #ffffff;
    font-weight: bold;
    margin-right: 5px;
    padding: 8px;
    display: inline-grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}
.orange-tag-bg h3{
    font-size: 16px;
    word-break: keep-all;
}
.orange-tag-bg2 h3 {
    font-size: 14px;
    word-break: keep-all;
}
.level-symbol img.icon{
    width: 34px;
}
.level-symbol2 img.icon{
    width: 26px;
}
.level-symbol2 {
    border: 1px solid #ADADAD;
    background-color: #ffffff;
    padding: 5px;
    display: flex;
    width: 50px;
    justify-content: center;
    height: 55px;
}
.level-symbol{
    border: 1px solid #ADADAD;
    background-color: #ffffff;
    padding: 5px;
    display: flex;
    width: 55px;
    justify-content: center;
    height: 55px;
}
.teacher-level{
    justify-content: flex-end;
    height: 55px;
    margin-top: 0;
    margin-bottom: 1em;
}
.teacher-level2{
    justify-content: flex-end;
    height: 45px;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
.subtitle{
    color: #EB5640;
    font-weight: bold;
    font-size: 18px;
}
.course-other-list .title-course .subtitle{
    color: #707070;
}
.title-course h1{
    font-weight: bold;
    font-size: 36px;
    line-height: 1;
}
.rating-info{
    margin-top: 2em;
    display: flex;
    align-items: center;
}
.rating-info .level-star{
    justify-content: flex-start;
    margin-left: 10px;
}
.box-rectangular{
    border: 1px solid #DADADA;
    align-items: center;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    height: 55px;
}
.box-rectangular-index{
    border: 1px solid #DADADA;
    align-items: center;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    height: 30px;
}
.box-square{
    border: 1px solid #929292;
    margin-right: 5px;
    /*min-width: 20%;*/
    width: 55px;
    height: 55px;
}
.display-grid{
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.display-grid.time-list {
    grid-template-columns: 1fr;
}
.box-rectangular p{
    margin: 0 5px;
}
.box-rectangular-index p{
    margin: 0 5px;
}
.box-rectangular p,
.box-square p{
    color: #707070;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 180%;
}
.box-rectangular-index p {
    color: #707070;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
}
.box-square p{
    padding: 0 3px;
    word-break: keep-all;
}
.box-rectangular h1{
    font-size: 32px;
    font-weight: bold;
    color: #000;
}
.box-rectangular h3{
    font-size: 20px;
    color: #000;
}
.box-rectangular-index h3{
    font-size: 16px;
    color: #000;
}
.box-square h3{
    font-size: 20px;
    font-weight: bold;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
}
.box-square h1{
    display: flex;
    align-items: center;
}
.box-square h1 p{
    margin-left: 5px;
}
.category button.rounded-button{
    background-color: #489EA9;
    color: #ffffff;
    font-size: 14px;
    border-radius: 20px;
    font-weight: 500;
    padding: 0 10px;
    margin-right: 1em;
    word-break: keep-all;
    height: 30px;
    width: max-content;
}
.rate-star{
    align-items: center;
    margin-top: .5em;
}
.other-course-part .rate-star{
    margin-top: 0;
}
.rate-star .right-line{
    border-right: 1px solid #929292;
}
.rate-star p.right{
    margin-right: 1em;
}
.rate-star p.left{
    margin-left: 1em;
}
.rate-star p{
    color: #929292;
    font-size: 12px;
}
.rate-star .ui-rating{
    margin-right: 0.5em;
}
.rate-star .ui-rating .ui-rating-star{
    margin-right: 5px;
}
.rate-star .ui-rating .ui-rating-star-on a{
    height: 1em;
    width: 1em;
    font-size: 18px;
    /*color: #F9D94E;*/
}
.rate-star .ui-rating .ui-rating-star a{
    height: 20px;
    width: 20px;
    font-size: 22px;
}
.rating-info .category form{
    margin-bottom: 0;
}
body .ui-rating .ui-rating-star a:before {
    font-weight: 200;
    position: relative;
    color: #FFC804;
}
.course-other-list .rating-star-SM form{
    margin-bottom: 0;
}
.course-other-list .rating-star-SM{
    width: fit-content;
}
p.grey-txt{
    color: #929292;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-right: .5em;
    word-break: keep-all;
}
.level-bar{
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-right: .5em;
}
.level-attend .level-bar.attend{
    margin-right: 0;
}
.level-bar .level{
    border: 4px solid #D9D9D9;
    margin-right: 5px;
    width: 25px;
}
.level-bar .level.active-level{
    border: 4px solid #F9D94E !important;
}
.entry{
    /*background: linear-gradient(0deg, #FFC804, #FFC804), linear-gradient(0deg, #EB5640, #EB5640), #489EA9;*/
    background: rgb(2,0,36); /*#7b7b7b*/
}
.middle{
    background: linear-gradient(0deg, #F9AA4E, #F9AA4E), linear-gradient(0deg, #EB5640, #EB5640), #489EA9;
}
.high{
    background: linear-gradient(0deg, #F96D4E, #F96D4E), linear-gradient(0deg, #EB5640, #EB5640), #489EA9;
}
.level-bar button.entry:hover{
    background: linear-gradient(0deg, #F9D94E, #F9D94E), linear-gradient(0deg, #EB5640, #EB5640), #489EA9;
    color: #707070;
    cursor: pointer;
}
.level-bar button.middle:hover{
    background: linear-gradient(0deg, #F9AA4E, #F9AA4E), linear-gradient(0deg, #EB5640, #EB5640), #489EA9;
    color: #707070;
    cursor: pointer;
}
.level-bar button.high:hover{
    background: linear-gradient(0deg, #F96D4E, #F96D4E), linear-gradient(0deg, #EB5640, #EB5640), #489EA9;
    color: #707070;
    cursor: pointer;
}
.level-bar button:-webkit-any-link {
    cursor: pointer;
}
.level-bar button.entry, 
.level-bar button.middle,
.level-bar button.high{
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 180%;
    width: 70px;
    height: 25px;
    text-align: center;
    padding: 3px;
    border: none;
}
.title-timezona form{
    margin: 0;
}
.level-bar button.active-level{
    color: #707070;
    /*border: none;*/
}
tr.ui-widget-header h3{
    font-size: 12px;
    margin-right: 5px;
}
.timetable-list-wrap .time-list button.total-prefecture.ui-button-flat{
    border: none;
    background-color: transparent;
    color: #000;
    display: flex;
    justify-content: center;
}
.time-list{
    width: 100%;
    background-color: #ffffff;
}
.timetable-list-wrap {
    width: calc(100% - 10px);
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
    box-shadow: 5px 6px 3px rgba(0, 0, 0, .2);
    /*filter: drop-shadow(6px 3px 6px rgba(0, 0, 0, .5));*/
    background-color: #ffffff;
}
.timetable-list-wrap.header{
    background-color: transparent;
    box-shadow: none;
}
.list-genre-wrapper {
    background-color: rgba(244, 244, 244, 1);
    padding: 15px;
}
.header .total-pref-wrap {
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    background-color: transparent;
}
.timetable-list-wrap.header p.prefecture-name{
    font-size: 16px;
}
.timetable-list-wrap.header p.total-prefecture{
    font-size: 16px;
    color: #707070;
}
.timetable-list-wrap.header p.total-prefectur.day{
    font-size: 16px;
}
.title-timezona{
    margin-bottom: 2em;
    justify-content: space-between;
    margin-top: 1.5em;
}
.tabel-lesson p.note-table{
    text-align: center;
    font-size: 12px;
    color: #707070;
    margin-bottom: 1em;
}
.tabel-lesson .scroll-tbl{
    background-color: #EFEFEF;
    position: relative;
}
.tabel-lesson .scroll-tbl .table-header-date{
    background-color: #F5E237;
    display: flex;
    justify-content: center;
    padding: 10px;
}
.tabel-lesson .scroll-tbl .table-header-date h2{
    color: #000;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 26px */
}
.tabel-lesson button.colorBlack{
    height: 36px;
}
.course-note #sch-table .tabel-lesson{
    padding-bottom: 2em;
}
button.colorBlack i.pi-chevron-right:before{
    position: relative;
    top: 0;
    left: 2.5em;
}
.time-list p {
    font-size: 13px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.time-list .symbol .ui-button.ui-button-text-only .ui-button-text{
    font-size: 21px;
}
.time-list .symbol{
    height:38px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    width: 100%;
}
.time-list .symbol .ui-button.ui-button-text-only.booked-text .ui-button-text {
    font-size: 14px;
}
.time-list .symbol .ui-button.ui-button-text-only.booked-text {
    padding: 0px;
}
.timetable-list-wrap.zonk{
    background-color: transparent;
}
.timetable-list-wrap.zonk .time-list{
    background-color: transparent;
}
.list-timetable-wrapper {
    width: 100%;
    padding: 5px 30px;
    /* margin-top: 2em; */
    display: flex;
    justify-content: center;
}
.list-timetable-wrapper.work-teacher{
    padding: 5px 10px;
}
.list-timetable-wrapper.work-teacher .list-genre-inner {
    justify-content: flex-start;
    width: 100%;
}
.scroll-tbl .button-arrow{
    position: absolute;
    display: flex;
    top: 50%;
}
.scroll-tbl .button-arrow button.button-prev-next{
    /*border: none;*/
    padding: 0;
}
.button-arrow button.carousel-control:before{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(225deg);
    transition: 500ms ease 0s;
}
.button-arrow button.carousel-control.right::before {
    transform: rotate(315deg);
    margin: 6px 6px;
}
.right.carousel-control{
    margin-left: 2em;
}
.button-arrow button.carousel-control.left::before {
    transform: rotate(130deg);
    margin: 7px 8px;
}
.button-arrow button.carousel-control span.ui-button-text.ui-c{
    display: none;
}
.right.carousel-control{
    box-shadow: none;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 25px;
    height: 25px;
    color: #008fde;
    border: 2px solid black;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #e2688f;
    opacity: 1;
    right: 1%;
}
.left.carousel-control {
    box-shadow: none;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 25px;
    height: 25px;
    color: #008fde;
    border: 2px solid black;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #e2688f;
    opacity: 1;
    left: 1%;
}
.note-right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.note-right{
    color: #606060;
    font-size: 12px;
}
.note-right p.information{
    font-size: 12px;
}
.note-right p.information span{
    font-size: 21px;
    vertical-align: middle;
}
.note-right p.information span.circle{
    font-size: 25px;
}
.note-right p.information span.triangle{
    font-size: 17px;
}
.bgnote-pink{
    background-color: #FFBDB3;
}
.bgnote-pink p{
    padding: 1em;
    color: black;
}
.teacher-sns.tc {
    margin: 20px auto 0;
}
.teacher-sns.tc a img {
    margin: 0 7px;
}
.icon {
    /*margin-right: 7px;*/
    width: 26px;
}
.tc-detail .profile-tc > img {
    margin-top: 0;
}
/*.tc-detail .profile-tc {
    width: 100%;
    padding-bottom: 100%;
}*/
.tc-detail {
    display: flex;
    flex-flow: column;
}
.teacher-name{
    display: flex;
    flex-flow: column;
}
.ttl-tc {
    display: block;
    line-height: 1.5;
    font-weight: bold;
}
.ttl-tc {
    font-size: 22px;
}
.course-list-wrap{
    background-color: rgba(255, 255, 255, 0.5);
    width: calc(15% - 22px);
    margin: 8px;
    display: flex;
    justify-content: center;
}
.teacher-prefec .course-list-wrap{
    height: 120px;
}
.course-list-wrap img{
    object-fit: cover;
}
.list-other-course:nth-child(1n){
    display: flex;
    flex-wrap: wrap;
    padding-right: 1em;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 14px;
}
.list-other-course:nth-child(2n){
    display: flex;
    flex-wrap: wrap;
    padding-left: 1em;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 14px;
}
.list-other-course2 {
    display: flex;
    flex-wrap: wrap;
    padding-right: 0;
    padding-top: 14px;
    padding-left: 2em;
    padding-bottom: 0;
}
.course-other-list{
    display: flex;
    align-items: flex-start;
    padding-bottom: 2em;
}
.right-margin{
    margin-right: 1em;
}
.title-course h2{
    font-size: 24px;
    font-weight: 500;
}
.course-note .title-course form#favoriteCourse{
    margin-bottom: 4px;
}
.line-bottom-gray{
    border-bottom: 1px solid #ECECEC;
}
.center-item{
    justify-content: center;
}
.image-thumb{
    margin-top: 1em;
    margin-bottom: 2em;
}
.top-margin1{
    margin-top: 1em;
}
.prefecture-name{
    padding-right: 4px;
}
h2.sub-title span {
    color: #FEDE8D;
    font-weight: normal;
    font-size: 16px;
}
.course-section .course-box-sameheight.school-course-wrapper .text-left-part{
    padding-left: 0;
    padding-right: 0;
}
.left-margin1{
    margin-left: 1em;
}
.disflex-center{
    display: flex;
    justify-content: center;
}

.list-course-inner {
    display: table-cell;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
    /* justify-content: center; */
}
.wrap-div{
    display: flex;
    flex-wrap: wrap;
}
.ui-steps ul {
    margin: auto;
}
.ui-steps {
    position: relative;
}
.ui-steps:before {
    content: " ";
    border-top: 1px solid #000000;
    width: 100%;
    top: 45%;
    left: 0;
    display: block;
    position: absolute;
}
.ui-steps ul {
    margin: auto;
}
.ui-steps .ui-steps-item {
    background-color: transparent;
    text-align: center;
}
.ui-steps .ui-steps-item .ui-menuitem-link {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    overflow: hidden;
}
.ui-steps .ui-steps-item.ui-state-default .step1.done .ui-steps-number {
    background-color: #90BFC5;
}
.ui-steps .ui-steps-item.ui-state-default .step1.done .ui-steps-title {
    font-weight: 500;
    font-size: 14px;
    /*color: #000000;*/
}
.ui-steps .ui-steps-item {
    background-color: transparent;
    text-align: center;
}
.ui-steps .ui-steps-item.ui-state-disabled {
    opacity: 1;
    filter: alpha(opacity=100);
}

body .ui-steps {
    position: relative;
    margin-bottom: 2em;
}
body .ui-steps .ui-steps-item {
    background-color: transparent;
    text-align: center;
}
body .ui-steps .ui-steps-item .ui-menuitem-link {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    overflow: hidden;
}
body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
    display: grid;
    align-items: center;
    margin: auto;
    background-color: #90BFC5;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 4px 9px;
    font-size: 24px;
    color: #ffffff;
    position: relative;
    top: 14px;
    margin-bottom: 12px;
    border: 1px solid #90BFC5;
    width: 2.5em;
    height: 2.5em;
}
body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-title {
    display: block;
    margin-top: 6px;
    /*color: #707070;*/
    font-size: 14px;
    font-weight: 500;
    padding-top: 12px;
}
body .ui-steps .ui-steps-item.ui-state-disabled {
    opacity: 1;
    filter: alpha(opacity=100);
}
body .ui-steps .ui-steps-item.ui-state-disabled .ui-steps-number {
    background-color: #DCDCDC;
    border-color: #DCDCDC;
    color: #4c566a;
}
body .ui-steps .ui-steps-item.ui-state-default .step1.done .ui-steps-number {
    background-color: #90BFC5;
}
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
    background-color: #489EA9;
    border-color: #489EA9;
}
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-title {
    font-weight: 500;
    color: #000000;
    font-size: 14px;
}
body .ui-steps .ui-steps-item.ui-state-default .step1.done .ui-steps-title {
    font-weight: 500;
    font-size: 14px;
    /*color: #000000;*/
}
body .ui-steps .ui-steps-item:last-child .ui-menuitem-link {
    display: block;
}
body .ui-steps:before {
    content: " ";
    border-top: 1px solid #000000;
    width: 100%;
    top: 45%;
    left: 0;
    display: block;
    position: absolute;
}
#message{
    margin: 0
}
#message .ui-messages{
    margin: 0
}
.list-application-table{
    width: 100%;
    margin: 1em 0 2em 0;
}
.list-application-table label,
.list-application-table td{
    font-size: 16px;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
}
p.freetrial{
    margin-top: 1em;
    text-align: center;
    font-size: 16px;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
}
table.ui-selectoneradio.freetrial-radio{
    margin: 10px auto 1em;
}
.list-application-table tr.ui-widget-content {
    border-bottom: 1px solid #ddd;
}
.line-grey{
    border-bottom: 1px solid #ddd;
}
.line-bottom-grey{
    border-bottom: 1px solid #ddd;
}
.list-application-table.ui-panelgrid .ui-panelgrid-cell {
    border: none;
    background-color: #ffffff;
    color: #000;
    padding: 1em;
}
.list-application-table.ui-panelgrid td.ui-panelgrid-cell label{
    display: flex;
    justify-content: flex-end;
}
.list-application-table.ui-panelgrid .ui-panelgrid-cell:nth-child(odd){
    width: 33%;
}
.list-application-table.ui-panelgrid .ui-panelgrid-cell:nth-child(even){
    font-weight: 700;
    color: #000;
    display: flex;
}
.button.colorBlack {
    width: 100%;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.select-date{
    display: flex;
}
.purchase-form .input-field{
    display: grid;
}
/*.button.colorBlack.next .pi-chevron-right:before{
    position: relative;
    top: 0;
    left: 11em;
    font-size: 14px;
}*/
.button.colorBlack{
    width: 250px;
    height: 36px;
}
.button-colorBlack.more-btn{
    margin: auto;
}
/*.complete-btn .button.colorBlack.next .pi-chevron-right:before{
    position: relative;
    top: 0;
    left: 10.5em;
    font-size: 14px;
}*/
.button.colorBlack.ui-button.ui-button-text-icon-left .ui-button-text {
    padding: 0.429em 1em 0.429em 1em;
}
.complete-btn .button.colorBlack.ui-button.ui-button-text-icon-left .ui-button-text {
    padding: 0.429em 0em 0.429em 0em;
}
.image-check img{
    width: 20%;
    margin: 3em 0;
}

.note-timecourse{
    border: 2px solid #479C25;
    background-color: transparent;
    text-align: center;
    padding: 2px;
    color: #479C25;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
}
.note-timecourse.time-minutes{
    word-break: keep-all;
    font-size: 16px;
    font-weight: 700;
    margin-right: 5px;
    padding: 0;
}
.note-timecourse.time-minutes p{
    padding: 17px 10px;
}
.title-schedule h2{
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
}
.popular-class .wrapper-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 3em;
}
.link-mypage-sya a.list-link-course{
    font-size: 16px;
}
.popup-other-course .ttl-popup-pp{
    left: 367.5px;
    top: 280px !important;
    text-align: center;
}
.pop-up .ui-dialog{
    top: 10% !important;
    box-shadow: none;
    max-height: 80vh;
    overflow: scroll;
}
.pop-up .ui-dialog .ui-dialog-titlebar {
    background-color: transparent; 
    color: #666666;
    font-weight: 400;
    border: 0 none;
    padding: 0em 1em 0em 1em;
    font-size: 24px;
}
.pop-up .ui-dialog .ui-dialog-content {
    background-color: transparent; 
    color: #666666;
    border: none; 
    padding: 0.571em 1em;
    line-height: 1.5;
    border-top: 0 none;
}
.pop-up .ui-dialog .ui-dialog-content img{
    width: 480px;
    height: 680px;
    object-fit: cover;
}
.pop-up .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon{
    color: #1B1B1B;
}
.box2 {
    width: 100%;
    margin: 17px auto;
    border: 1px solid #DADADA;
    padding: 0;
    text-align: center;
    font-weight: 900;
    color: #00bfb6;
    font-family: Noto Sans JP;
    position: relative;
    display: grid;
    justify-content: center;
}
.sb10:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid #DADADA;
    right: 91%;
    top: -21px;
}

.sb10:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid #fff;
    right: 91%;
    top: -19px;
}
.box2 p.grey-txt{
    color: #707070;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    margin: 0px 0 10px;
}
.normal-txt{
    font-weight: 400;
    text-align: center;
}
.purchase-form thead.ui-panelgrid-header{
    border-bottom: 1px solid #1b1b1b;
}
.purchase-form thead.ui-panelgrid-header tr{
    background-color: transparent;
    word-break: keep-all;
    justify-content: flex-start;
}
.purchase-form thead.ui-panelgrid-header tr td.ui-panelgrid-cell.ui-widget-header{
    width: 100%;
    margin: 0;
    padding: 0 0 8px;
    justify-content: flex-start;
    background-color: transparent;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}
.purchase-form .header{
    width: 100%;
    margin: 0;
    padding: 2.5em 0 8px;
    display: flex;
    justify-content: flex-start;
    background-color: transparent;
    border-bottom: 1px solid #1b1b1b;
}
.purchase-form  .header h2{
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif, "Noto Sans", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}
.purchase-form .ui-selectonemenu .ui-selectonemenu-trigger{
    background-color: transparent;
}
.purchase-form .list-application-table.ui-panelgrid td.ui-panelgrid-cell label{
    color: #1b1b1b;
    justify-content: flex-end;
}
.purchase-form .list-application-table.ui-panelgrid-header tr td.columnheader{
    justify-content: flex-start;
}
/*.purchase-form .list-application-table.ui-panelgrid .ui-panelgrid-cell:nth-child(odd) {
    width: 40%;
}*/
.grid-start{
    display: grid;
    justify-content: flex-start;
}
.flex-center{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.purchase-form img.w-50{
    width: 50%;
}
.purchase-form .label{
    text-align: right;
    padding: 0.571em 1em;
}
.purchase-form .item{
    text-align: left;
    padding: 0.571em 1em;
}
.item table.ui-selectoneradio.freetrial-radio{
    margin: 0
}
p.moon-year{
    padding: 0 .5em;
}
.ticket-purchase{
    margin-bottom: 2em;
}
.btn-application-form{
    margin-top: 3em;
}
.purchase-form .ui-radiobutton .ui-radiobutton-box.ui-state-active, 
.box2 .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border-color: #489EA9 !important;
    background-color: #ffffff !important;
}
.purchase-form .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet,
.box2 .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet{
    background-color: #489EA9; 
}
h5.normal-txt{
    margin-top: 2em;
}
.to-about.button.colorBlack{
    display: flex;
    align-items: center;
}
.genre-on-course{

}
.course-related{
    display: flex;
    justify-content: center;
}
.SM-only{
    display: none;
}
.ttl-tc.disflex-between button.love-teacher.rounded-button{
    background-color: transparent;
    border-radius: 100%;
    padding: 10px;
    border-color: #929292;
    color: #929292;
    display: flex;
    align-items: center;
    height: 100%;
    margin-top: 8px;
}
.ttl-tc.disflex-between button.love-teacher.loved{
    color: #1b1b1b;
    border-color: #929292;
}
.love-teacher span.ui-button-text.ui-c{
    padding-left: 20px;
}
.ttl-tc.disflex-between{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.ttl-tc.disflex-between .ui-button.ui-state-hover{
    color: #fff;
    /*border-color: #929292;*/
    background-color: #1b1b1b;
}

/*teacher list*/ 
.nickname-grey{
    text-align: left
}
.love-teacher.loved .pi-heart-fill:before{
    content: '';
    background-image: url(/resources/shashusho/img/heart.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 16px;
    display: block;
    height: 100%;
}
.teacher-profile-img.box-shadow-item{
    padding: 5px;
}
.border-rad100{
    border-radius: 100%;
}
.teacher-name, .Teacher-nick{
    text-align: center;
    padding-top: 1em;
}
.teacher-name h3, .Teacher-nick h3{
    font-weight: normal;
    line-height: 22px;
    margin-bottom: 9px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.teacherList-page{
    padding-bottom: 3em;
}
.card-can-use{
    display: flex;
    align-items: center;
}

/*.inview_re.courseimg-item:nth-child(odd){
    padding-right: 1em;
    padding-bottom: 1.5em;
    padding-left: 0;
}
.inview_re.courseimg-item:nth-child(even){
    padding-left: 1em;
    padding-bottom: 1.5em;
    padding-right: 0;
}*/
.title-sidebar-genre{
    margin-bottom: 13px;
    border-bottom: 1px solid #000;
}
.sidebar-course-top{
    /*width: 20%;*/
    padding-right: 18.5px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.sidebar-course-top .search-course{
    display: flex;
    padding-bottom: 16px;
    border-bottom: 1px solid #000;
}
.new-class{
    display: flex;
    justify-content: space-between;
}
.search-course .btn-search{
    background-color: transparent;
    border: none;
    color: #000;
    padding: 0;
    margin-right: 6px;
}
.search-course .ui-inputfield{
    border: none;
    color: #000;
    padding: 0;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
}
.sidebar-course-top .inputfield,
.sidebar-course-top .course-filter .ui-inputfield.hasDatepicker{
    margin-top: 16px;
    width: 95%;
    border-radius: 3px;
}
.button-arrow-down{
    margin-top: 16px;
}
.button-arrow-down .arrow-btn{
    width: 95%;
    margin: 0;
}
.course-filter .title-filter{
    /*display: flex;*/
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #000;
}
.course-filter .title-filter.PC-only{
    display: flex;
}
.course-filter .title-filter.SM-only{
    display: none;
}
.course-filter .title-filter .filter-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><rect x="0.5" y="1.04999" width="14.4444" height="12.9" stroke="black" style="stroke:black;stroke-opacity:1;"/><line x1="1" y1="4.94998" x2="15" y2="4.94998" stroke="%23263238" style="stroke:%23263238;stroke:color(display-p3 0.1490 0.1961 0.2196);stroke-opacity:1;"/></svg>');
    margin-right: 5px;
}
.course-filter .title-filter .filter-ttl{
    color: #000;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 20.8px */
    align-items: center;
    display: flex;
}
.course-filter .title-filter .filter-ttl.PC-only{
    display: flex;
}
.course-filter .title-filter .filter-ttl.SM-only{
    display: none;
}
.course-filter .filter-select{
    width: 95%;
    background-color: #ffffff;
    border-radius: 3px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.course-filter .filter-select.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 25 25" id="sort"><path fill="%23AEACAC" d="M11 7H5l3-4zM5 9h6l-3 4z"></path></svg>');
}
.course-filter .filter-select.ui-selectonemenu .ui-selectonemenu-trigger{
    background: transparent;
}
.course-filter .filter-select.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon{
    width: 1.5em;
    height: 1.5em;
}
.sidebar-course-top .button-cancel {
    min-width: 30px;
}
.sidebar-course-top .filter-date > span {
    display: flex;
    align-items: center;
}
.sidebar-course-top .filter-date button.ui-button {
    width: 54px;
    padding: 0px;
    margin-top: 16px;
    height: 35px;
    margin-left: -2px;
}
.field-group-time{
    display: flex;
    align-items: center;
}
.field-group-time .ui-selectonemenu .ui-selectonemenu-trigger{
    background: transparent;
}
.field-group-time .ui-selectonemenu{
    background-color: #ffffff;
    border-radius: 3px;
    margin-top: 16px;
}
.field-group-time p{
    margin-top: 16px;
    padding: 0 12px;
}
.course-genre .title-genre,
.course-fav .title-fav, 
.course-search .title-search,
.course-ticket .title-ticket,
.course-teacher .title-teacher,
.course-filter .title-filter{
    /*display: flex;*/
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #000;
}
.course-genre .title-genre.PC-only, .course-fav .title-fav.PC-only{
    display: flex;
}
.course-genre .title-genre.SM-only, .course-fav .title-fav.SM-only{
    display: none;
}
.course-filter .title-filter .filter-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><rect x="0.5" y="1.04999" width="14.4444" height="12.9" stroke="black" style="stroke:black;stroke-opacity:1;"/><line x1="1" y1="4.94998" x2="15" y2="4.94998" stroke="%23263238" style="stroke:%23263238;stroke:color(display-p3 0.1490 0.1961 0.2196);stroke-opacity:1;"/></svg>');
    margin-right: 5px;
}
.course-genre .title-genre .genre-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><rect x="0.5" y="5.33331" width="9.66667" height="8.6" stroke="black" style="stroke:black;stroke-opacity:1;"/><rect x="5.83301" y="1.06665" width="9.66667" height="8.6" stroke="black" style="stroke:black;stroke-opacity:1;"/></svg>');
    margin-right: 5px;
}
.course-fav .title-fav .fav-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><path d="M8 2.11803L9.32058 6.18237L9.43284 6.52786H9.79611H14.0696L10.6123 9.03976L10.3184 9.25329L10.4306 9.59878L11.7512 13.6631L8.29389 11.1512L8 10.9377L7.70611 11.1512L4.24877 13.6631L5.56936 9.59878L5.68162 9.25329L5.38772 9.03976L1.93039 6.52786H6.20389H6.56716L6.67942 6.18237L8 2.11803Z" stroke="black" style="stroke:black;stroke-opacity:1;"/></svg>');
    margin-right: 5px;
}
.course-search .title-search .search-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"><path d="M5.65263 11.6071C8.49835 11.6071 10.8053 9.28862 10.8053 6.42857C10.8053 3.56853 8.49835 1.25 5.65263 1.25C2.80691 1.25 0.5 3.56853 0.5 6.42857C0.5 9.28862 2.80691 11.6071 5.65263 11.6071Z" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.9998 15.75L9.25879 10.0536" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    margin-right: 5px;
}
.course-ticket .title-ticket .ticket-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="18" d="M366.05 146a46.7 46.7 0 0 1-2.42-63.42a3.87 3.87 0 0 0-.22-5.26l-44.13-44.18a3.89 3.89 0 0 0-5.5 0l-70.34 70.34a23.6 23.6 0 0 0-5.71 9.24a23.66 23.66 0 0 1-14.95 15a23.7 23.7 0 0 0-9.25 5.71L33.14 313.78a3.89 3.89 0 0 0 0 5.5l44.13 44.13a3.87 3.87 0 0 0 5.26.22a46.69 46.69 0 0 1 65.84 65.84a3.87 3.87 0 0 0 .22 5.26l44.13 44.13a3.89 3.89 0 0 0 5.5 0l180.4-180.39a23.7 23.7 0 0 0 5.71-9.25a23.66 23.66 0 0 1 14.95-15a23.6 23.6 0 0 0 9.24-5.71l70.34-70.34a3.89 3.89 0 0 0 0-5.5l-44.13-44.13a3.87 3.87 0 0 0-5.26-.22a46.7 46.7 0 0 1-63.42-2.32Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="15" d="m250.5 140.44l-16.51-16.51m60.53 60.53l-11.01-11m55.03 55.03l-11-11.01m60.53 60.53l-16.51-16.51"/></svg>');
    margin-right: 5px;
}
.course-teacher .title-teacher .teacher-ttl:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256"><path fill="currentColor" d="M216 42H40a14 14 0 0 0-14 14v144a14 14 0 0 0 14 14h13.39a6 6 0 0 0 5.42-3.43a50 50 0 0 1 90.38 0a6 6 0 0 0 5.42 3.43H216a14 14 0 0 0 14-14V56a14 14 0 0 0-14-14M78 144a26 26 0 1 1 26 26a26 26 0 0 1-26-26m140 56a2 2 0 0 1-2 2h-57.73a62.34 62.34 0 0 0-31.48-27.61a38 38 0 1 0-45.58 0A62.34 62.34 0 0 0 49.73 202H40a2 2 0 0 1-2-2V56a2 2 0 0 1 2-2h176a2 2 0 0 1 2 2ZM198 80v96a6 6 0 0 1-6 6h-16a6 6 0 0 1 0-12h10V86H70v10a6 6 0 0 1-12 0V80a6 6 0 0 1 6-6h128a6 6 0 0 1 6 6"/></svg>');
    margin-right: 5px;
}
.course-genre .title-genre .genre-ttl,
.course-fav .title-fav .fav-ttl,
.course-ticket .title-ticket .ticket-ttl,
.course-teacher .title-teacher .teacher-ttl,
.course-search .title-search .search-ttl{
    color: #000;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 20.8px */
    display: flex;
    align-items: center;
}
.course-genre .ui-selectmanycheckbox,
.course-fav .ui-selectmanycheckbox{
    margin-top: 20px;
}
.title-course-section.course-title{
    margin-bottom: 32px;
}
.title-course-section.course-title h1{
    margin: 0;
    font-family: "Inter";
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: left;
}
.sidebar-course-top .title-sidebar-time{
    margin-top: 16px;
}
.wrapper-noResult{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 111px;
}
.wrapper-noResult img{
    max-width: 226px;
    margin: auto;
}
.wrapper-noResult h2{
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 39px */
    margin-bottom: 53px;
}
.wrapper-noResult p{
    color: #616161;
    text-align: center;
    font-family: "Noto Sans JP", "Noto Sans", Roboto, Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 26px */
}
.flex-box{
    display: flex;
    align-items: center;
}
.field-group-time .button-cancel, .flex-box .button-cancel{
    margin-top: 16px;
    background-color: transparent;
    border-radius: 50%;
    padding: 0px;
    color: #000;
    margin-left: 20px;
}
.day-btn{
    display: flex;
    flex-wrap: wrap;
}
.day-btn button.btnTime{
    background: #000;
    color: #fff;
    font-size: 14px;
    margin-top: 2.5px;
    padding: 1px 5px;
    margin-right: 0;
    border: none;
}

.day-btn__inner {
    display: flex;
    flex-direction: column;
    margin-right: 2.5px;
}

.day-btn__inner p {
    text-align: center;
    color: #fff;
    background: #489EA9;
}

.timetable-list-wrap .time-list button.total-prefecture.ui-button-flat {
    padding: 1px 5px;
}
.more-button-index.go-to-inquiry {
    justify-content: flex-end;
}
/*============================ END detail.xhtml STYLE ==========================*/


.request-schedule-right-side {
    display: flex;
}



@media screen and (max-width: 1024px) {
    .prefecture-name {
        padding-right: 3px;
    }
    .list-other-course:nth-child(2n) {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        padding-top: 14px;
        padding-right: 0;
        padding-bottom: 0;
    }
    .list-other-course:nth-child(2n) {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        padding-top: 14px;
        padding-right: 0;
        padding-bottom: 0;
    }
    .time-list .symbol {
        height: 38px;
        align-items: center;
        justify-content: center;
        display: inline-flex;
        /*width: 67px;*/
    }
    .total-pref-wrap{
        width: 37px;
        height: 37px;
    }
    .genre.sch{
        width: calc(16.6667% - 14px);
    }
    .list-genre-wrapper{
        padding: 15px;
    }
    .school-page .about-teacher .teacher-head:not(:first-of-type) .left {
        margin-top: 0;
    }

    /*add by dini (4/26)*/
    .course-section .time-course {
        padding-right: 0;
    }
    /*end add by dini (4/26)*/
    .borderList {
        width: auto;
    }

    .category button.rounded-button {
        background-color: #489EA9;
        color: #ffffff;
        font-size: 14px;
        border-radius: 20px;
        font-weight: bold;
        padding: 5px 14px;
        margin-right: 0.5em;
    }
    p.grey-txt {
        color: #929292;
        font-size: 12px;
        display: flex;
        align-items: center;
        margin-right: 0.5em;
    }
    .level-bar .level {
        border: 4px solid #D9D9D9;
        margin-right: 5px;
        width: 20px;
    }
    .rate-star .ui-rating .ui-rating-star-on a {
        height: 1em;
        width: 1em;
        font-size: 20px;
        color: #F9D94E;
    }
    /*    .box-rectangular p {
            margin-right: 0px;
        }*/
    .box-square p {
        padding: 0;
    }
    .levelbar{
        display: flex;
        justify-content: flex-start;
        margin-top: 1em;
    }
    /*    .timetable-list-wrap {
            background-color: #ffffff;
            width: calc(18.5% - 34px);
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }*/
    
    .more-button-index.go-to-inquiry {
        justify-content: flex-start;
    }
}
/*ipad pro*/
@media screen and (max-width:820px){
    .list-course-inner {
        display: table-cell;
        flex-wrap: wrap;
        margin: 0;
        width: 23%;
        /* justify-content: center; */
    }
    .list-timetable-wrapper {
        width: 100%;
        padding: 5px 10px;
        /* margin-top: 2em; */
        display: flex;
        justify-content: center;
        overflow-x: auto;
        flex-wrap: wrap;
    }
    .time-list .symbol {
        width: 100%;
    }
    div.bg-gray {
        background-color: #DADADA;
        padding: 10px;
    }
    .course-list-wrap {
        width: calc(21% - 22px);
    }
    .course-list-wrap {
        width: calc(15.5% - 22px);
    }
    .teacher-prefec .course-list-wrap {
        height: 90px;
    }
    .left.carousel-control{
        left: 1%;
    }
    .right.carousel-control{
        right: 1%;
    }
}
@media screen and (max-width: 768px){
    .header .total-pref-wrap{
        display: grid;
        text-align: center;
    }
    .title-timezona.display-flex {
        display: flex;
        flex-wrap: wrap;
    }
    .time-list .symbol {
        height: 38px;
        align-items: center;
        justify-content: center;
        display: inline-flex;
        width: 100%;
    }
    .total-pref-wrap{
        width: 23px;
        height: 32px;
    }
    .prefecture-list-wrap{
        width: calc(13.14% - 6px);
    }
    .list-genre-wrapper{
        padding: 15 px;
    }
    .prefecture-list-wrap a{
        padding: 0 0 0 10px;
    }
    /*add by dini (4/26)*/
    .course-section .course-box-1 {
        flex-flow: column;
    }
    .course-section .image-right-part {
        min-width: unset;
    }
    /*end add by dini (4/26)*/

    .list-timetable-wrapper {
        width: 100%;
        padding: 5px 10px;
        /* margin-top: 2em; */
        display: flex;
        justify-content: center;
        overflow-x: auto;
        flex-wrap: wrap;
    }
    .right.carousel-control{
        right: 0%
    }
    .left.carousel-control{
        left: 0%
    }
    .teacher-prefec .course-list-wrap {
        height: 90px;
    }
    .list-genre-inner {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 100%;
        /* justify-content: center; */
    }
    .course-list-wrap {
        background-color: rgba(255, 255, 255, 0.5);
        width: calc(14.2% - 16px);
        margin: 8px;
        display: flex;
        justify-content: center;
    }
    /*    .scroll-tbl .button-arrow {
            display: none;
        }*/
    /*    .timetable-list-wrap {
            background-color: #ffffff;
            width: calc(13% - 5px);
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }*/
    .list-other-course2 {
        display: flex;
        flex-wrap: wrap;
        padding: 2em;
    }
    .list-other-course {
        display: flex;
        flex-wrap: wrap;
        padding: 2em;
    }
    .rating-info {
        margin-top: 2em;
        display: grid;
        align-items: center;
    }
    .rating-info .display-grid{
        display: grid;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }
    .rating-info .numb-box{
        margin-bottom: 1em;
    }
    .list-course-inner {
        display: table-cell;
        flex-wrap: wrap;
        margin: 0;
        width: 23%;
        /* justify-content: center; */
    }
    .title-timezona .note-right p{
        padding-top: 10px;
    }
    .title-timezona {
        margin-bottom: 1em;
    }
    .box-see-all.ipad-box {
        padding: 0 5px;
    }
}
@media screen and (max-width: 40.063em) {
    /*============================ START school.xhtml STYLE (max-width: 40.063em) ==========================*/
    .box-rectangular-index {
        height: 35px;
        padding-left: 6px;
    }
    .box-rectangular-index .ticket {
        display: none;
    }
    
    .SM-only {
        display: block;
    }
    .list-other-course:nth-child(1n){
        padding-bottom: 5px;
    }
    .list-other-course:nth-child(2n){
        padding-top: 0;
    }
    .wrap-tags-sch {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.3em;
        margin-top: 1em;
    }
    .school-page .border-btm-sm{
        border-bottom: 1px solid #c1c1c1;
    }
    .teacher-sns .icon{
        width: 29px;
    }
    .prefecture-list-wrap{
        width: calc(100% - 14px);
    }
    .prefecture-list-wrap a{
        padding: 10px;
        display: inline-grid;
        width: 85px;
        justify-content: center;
        justify-items: center;
    }
    .total-pref-wrap{
        height: 38px;
        width: 38px;
    }
    .address-map-link a.map-link {
        margin-left: 7.7em;
    }
    .profile-tc {
        float: left;
        /*width: 29%;*/
        /*padding-bottom: 29%;*/
        margin-right: 1em;
    }
    .about-teacher .left p {
        font-size: 14px;
        width: calc(71% - 1em);
        margin-right: 0;
        margin-left: auto;
    }
    .about-news {
        /*border-bottom: 1px solid #c1c1c1;*/
        padding: 0em 0 6px 0;
        margin-bottom: 10px;
    }
    .right-section{
        padding-left: 0;
        padding-top: 0;
    }
    .mulberry{
        padding: 0;
        margin-bottom: 0px;
        margin-top: 0;
    }
    .teacher-sns {
        width: calc(71% - 1em);
        margin-right: 0;
        margin-left: auto;
    }
    .school-prefectures .genre.sch .genre-name {
        font-size: 15px;
    }
    .school-page .about-teacher .teacher-head:not(:first-of-type) {
        margin-top: 0;
    }
    .school-page .about-teacher .teacher-head:not(:first-of-type) .left {
        margin-top: 7px;
    }
    .school-page .about-teacher p.p-line-height {
        padding: 0.5em 0 1em;
    }
    .school-page .about-teacher .wrapper-school-teach:not(:first-of-type) .teacher-head {
        margin-top: 0px;
    }
    .school-page .about-teacher .wrapper-school-teach:not(:first-of-type) .teacher-head .left {
        margin-top: 14px;
    }

    /*add by dini (4/26)*/
    .course-section .image-right-part {
        width: 100%;
        padding-right: .5em;
        display: block;
    }
    .image-right-part .teacher-profile-img{
        width: 100%;
    }
    .image-right-part .title-lesson{
        width: 100%;
        padding-left: .5em;
        position: relative;
    }
    .position-trial-sm{
        position: absolute;
        top: -45px;
    }
    .image-lesson-course{
        width: 100%;
        margin-top: 1em;
    }
    .course-section .desc-course {
        flex-flow: column;
        margin-top: 0;
        align-items: baseline;
    }
    .course-section .course-event-label {
        margin-left: 0;
        margin-top: 1em;
    }
    .course-section .course-ttl {
        /*      padding-right: 0;
                position: absolute;
                top: -9px;
                right: 0;*/
        margin-left: auto;
    }
    .course-note{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;

    }
    .course-section .course-ttl img {
        width: 45px;
    }
    .course-section .border-bottom-brown {
        position: relative;
    }
    .course-section .about-lesson {
        margin-bottom: 2px;
    }
    .course-section {
        padding-top: 11px;
        margin-bottom: 4.5em;
    }
    .course-section .text-left-part {
        padding-top: 0;
    }
    .course-section.m-bottom-sm{
        margin-bottom: 34px;
    }
    .centered-wrapper.sm-related-course{
        width: calc(100% + 10%);
        margin-left: -15px;
    }
    .article-part .slider-index.article-new-oncourse{
        width: calc(100% + 10%);
        margin-left: -15px;
    }
    /*end add by dini (4/26)*/
    .sliding-on-sm {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow: scroll;
        margin-left: 0;
        margin-right: 0;
    }
    .sliding-on-sm > a {
        width: 57vw;
        min-width: 57vw;
        padding: 0 2px;
    }
    .sliding-on-sm > a:first-child {
        margin-left: -2px;
    }
    .over-wrapper-sm {
        width: calc(100% + 30px);
        margin-left: -15px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .separator-line {
        margin-bottom: 25px;
    }
    .sliding-on-sm::-webkit-scrollbar {
        display: none;
    }
    .other-prefectures .caption {
        margin-left: 12px;
        margin-right: 12px;
    }
    .school-page .right-section {
        margin-bottom: 0;
    }
    .inquiry {
        margin-bottom: 1em;
    }

    /*add by dini (5/18)*/
    .lesson-button-apply .button {
        width: 100%;
        margin-bottom: 1em;
    }
    .lesson-button-apply form .button:nth-of-type(odd) {
        margin-right: 0;
    }
    .lesson-button-apply form .button:nth-of-type(even) {
        margin-left: 0;
        margin-top: 0;
    }
    /*end add by dini (5/18)*/
    /*============================ END school.xhtml STYLE (max-width: 40.063em) ==========================*/


    /*============================ START schoolList.xhtml STYLE (max-width: 40.063em) ==========================*/
    .genre.sch{
        /*        margin: 0;*/
        width: auto;
        height: 100.34px;
        background-color: rgba(255, 255, 255, 1);
    }
    .list-genre-inner.sch{
        grid-auto-flow: row;
        grid-template-columns: repeat(3, auto);
        width: 100%;
        grid-gap: 0px;
    }
    .genre.sch .genre-name{
        margin: auto;
        font-size: 70%;
        text-align: center;
        min-width: 50px;
    }
    .list-genre-wrapper.sch{
        overflow: hidden;
    }
    .genre.sch a{
        flex-direction: unset;
        flex-wrap: wrap;
    }
    .genre.sch .count-genre{
        margin: 8px 8px 4px 0px;
    }

    .list-genre-wrapper.second .genre.sch a{
        display: flex;
        flex-direction: unset;
        flex-wrap: unset;
        align-items: center;
    }
    .list-genre-wrapper.second .genre.sch{
        width: 100%;
        height: fit-content;
        margin: 0;
    }
    .list-genre-wrapper.second .list-genre-inner.sch{
        grid-template-columns: repeat(2, auto);
        grid-gap: 8px;
    }
    .list-genre-wrapper.second .genre .icon-fit{
        min-width: 15%;
        max-width: 15%;
        width: 15%;
        padding-bottom: 15%;
        float: left;
        margin: 0 5px 0 0;
    }
    .list-genre-wrapper.second .genre.sch .genre-name{
        margin: 0
    }
    .slider-index {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
        column-gap: 15px;
    }
    /*    .slick-track {
            left: 95px!important;
        }*/
    /*============================ END schoolList.xhtml STYLE (max-width: 40.063em) ==========================*/
    .borderList {
        width: auto;
    }
    .rating-info{
        margin-top: 2em;
        display: grid;
        align-items: center;
    }
    .timetable-list-wrap {
        background-color: #ffffff;
        width: 90%;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .list-genre-inner.sch {
        grid-auto-flow: row;
        grid-template-columns: repeat(7, auto);
        width: 100%;
        grid-gap: 0px;
        overflow: scroll;
    }
    .course-list-wrap {
        background-color: rgba(255, 255, 255, 0.5);
        width: 85%;
        margin: 3px;
        display: flex;
    }
    .list-timetable-wrapper {
        /*background-color: #D9D9D9;*/
        padding: 10px;
        margin-top: 2em;
        flex-flow: wrap;
    }
    .flex-SM{
        display: flex;
        align-items: flex-start;
    }
    .teacher-sns {
        width: calc(71% - 3em);
        margin-right: 0;
        margin-left: 0;
    }
    .list-timetable-wrapper.work-teacher {
        background-color: #D9D9D9;
        padding: 10px;
        margin-top: 0;
    }
    .course-list-wrap {
        background-color: rgba(255, 255, 255, 0.5);
        width: 31%;
        margin: 3px;
        display: flex;
    }
    .course-section .text-left-part.grid-sm{
        display: grid;
    }
    .rating-star-SM.category.display-flex{
        display: grid;
    }
    .course-other-list .title-course .subtitle{
        margin-bottom: 10px;
    }
    .category button.rounded-button {
        background-color: #489EA9;
        color: #ffffff;
        font-size: 14px;
        border-radius: 20px;
        font-weight: bold;
        padding: 5px 14px;
        margin-right: 0.5em;
        width: max-content;
        height: 35px
    }
    .right-bar-course .category button.rounded-button{
        width: fit-content;
        margin: 0 0em 0 0em;
        text-align: center;
    }
    .right-bar-course .category .level-SM.disflex-center{
        justify-content: flex-start;
    }
    .right-bar-course .category.display-grid-right{
        justify-content: left;
    }
    .right-bar-course .SM-only .box-shadow-item-prof{
        padding: 5px;
        margin: 0;
    }
    .course-other-list .rate-star{
        margin-top: 1em;
    }
    .list-timetable-wrapper.work-teacher .list-genre-inner {
        justify-content: flex-start;
    }
    .rating-info {
        margin-top: 2em;
        display: grid;
        align-items: center;
    }
    .rating-info .display-grid{
        display: grid;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }
    .rating-info .numb-box{
        margin-bottom: 5px;
    }
    .teacher-level {
        margin-top: 1em;
        justify-content: flex-start;
    }
    .rating-info .box-rectangular{
        width: 110px;
    }
    .teacher-level2 {
        margin-top: 1em;
        justify-content: flex-start;
    }
    .course-other-list {
        display: flex;
        align-items: flex-start;
        padding: 0;
        margin: 1em 0;
    }
    .time-list .symbol {
        height: 38px;
        align-items: center;
        justify-content: center;
        display: inline-flex;
        /*width: 17vw;*/
    }
    .teacher-prefec .course-list-wrap {
        height: 150px;
    }
    .list-course-inner {
        display: table-cell;
        flex-wrap: wrap;
        margin: 0;
        width: 22%;
        padding-bottom: 2em;
        /* justify-content: center; */
    }
    .course-related{
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
    }
    .prefecture-name {
        padding-right: 0px;
    }
    .title-timezona.display-flex{
        display: flex;
        flex-wrap: wrap;
    }
    .right.carousel-control{
        right: 0%
    }
    .left.carousel-control{
        left: 0%
    }
    .lesson-desc1 p.text-desc {
        padding-top: 1em;
        padding-bottom: 25px;
        line-height: 150%;
    }
    .course-section .text-left-part{
        display: grid;
    }
    .lesson-desc2 h2{
        margin-bottom: .5em;
    }
    .note-right{
        margin-top: 1em;
        justify-content: flex-start;
    }
    .disflex-center.SM-button{
        display: flex;
    }
    .list-application-table.ui-panelgrid .ui-panelgrid-cell:nth-child(odd) {
        width: 36%;
    }
    .list-application-table.ui-panelgrid .ui-panelgrid-cell {
        border: none;
        background-color: #ffffff;
        color: #000;
        padding: 1em 11px;
    }
    .SM-button{
        margin-top: 2em;
    }
    body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number{
        font-size: 18px;
    }
    .complete-btn button{
        margin: auto;
    }
    .ui-steps ul {
        margin: auto;
        display: flex;
        column-gap: 15px;
    }
    body .ui-steps .ui-steps-item {
        background-color: transparent;
        text-align: center;
        width: 60px;
        display: flex;
        justify-content: center;
    }
    .button.colorBlack.SM-button-course {
        width: 100%;
        height: 36px;
        padding: 1px 1.2em;
    }
    .margin-box-input{
        padding: .5em 0;
    }
    .freetrial-radio tr{
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .margin-bottom1SM{
        margin-bottom: 1em;
    }
    .top-space-sm{
        margin-top: 2px;
    }
    .box-message .marginBox{
        margin: .5em 0;
    }
    .box-message .marginBox .profile-icon{
        justify-content: center;
        padding: 0;
        width: 15%;
    }
    .popular-class .wrapper-list {
        width: 100%;
        margin-left: 0px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
        column-gap: 15px;
    }
    .image-thumb .box-shadow-item-prof.courseimg-item {
        width: calc(25% - 8px);
    }
    .image-thumb {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    #trial4 .sm-show.attention{
        margin-bottom: 2em;
    }

    .tabel-lesson button.colorBlack {
        height: 41px;
        width: 250px;
        font-size: 16px;
        padding: 0;
        margin-top: .5em;
    }
    .course-note .more-button-index{
        justify-content: center;
    }
    .course-section .teacher-name {
        font-size: 15px;
        padding: 0em 1em 0 0;
        margin-left: -1em;
    }
    .image-lesson-course p.text-desc{
        margin-top: 1em;
    }
    .sm-margin{
        margin-top: 1em;
    }
    .slider-index .slick-track{
        gap: 0;
        /*left: 50px!important;*/
    }
    .slick-initialized .slick-slide {
        padding: 0 13px;
    }
    .course-related.PC-only{
        display: none !important;
    }
    .course-note .rating-info{
        margin-top: 0;
    }
    .other-prefectures-wrap{
        justify-content: flex-start;
    }
    .levelbar.PC-only{
        display: none;
    }
    .margin-share-button.top-margin1{
        margin-bottom: 25px;
        margin-top: 20px;
    }
    .course-note hr{
        margin: 0 auto 25px
    }
    .course-note #sch-table .tabel-lesson {
        padding-bottom: 0;
    }
    .rating-info .level-star{
        margin-left: 0;
    }
    .new-class .title-section.course-title{
        margin-top: 0em;
    }
    .new-class{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .button-filter-sm{
        display: block;
        width: 100%;
        height: 34px;
        border-radius: 3px;
        border: 1px solid #D1D1D1;
        background: #FFF;
        padding: 7px 10px;
        margin-bottom: 20px;
    }
    .button-filter-sm span{
        display: flex;
        align-items: center;
        justify-content: left;
    }
    .button-filter-sm span:before{
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.7087 10H7.41283M3.77866 10H2.29199M3.77866 10C3.77866 9.5182 3.97006 9.05612 4.31075 8.71543C4.65144 8.37474 5.11352 8.18334 5.59533 8.18334C6.07714 8.18334 6.53921 8.37474 6.8799 8.71543C7.22059 9.05612 7.41199 9.5182 7.41199 10C7.41199 10.4818 7.22059 10.9439 6.8799 11.2846C6.53921 11.6253 6.07714 11.8167 5.59533 11.8167C5.11352 11.8167 4.65144 11.6253 4.31075 11.2846C3.97006 10.9439 3.77866 10.4818 3.77866 10ZM17.7087 15.5058H12.9187M12.9187 15.5058C12.9187 15.9878 12.7268 16.4504 12.386 16.7911C12.0453 17.1319 11.5831 17.3233 11.1012 17.3233C10.6193 17.3233 10.1573 17.1311 9.81658 16.7904C9.47589 16.4497 9.28449 15.9876 9.28449 15.5058M12.9187 15.5058C12.9187 15.0239 12.7268 14.5622 12.386 14.2214C12.0453 13.8806 11.5831 13.6892 11.1012 13.6892C10.6193 13.6892 10.1573 13.8806 9.81658 14.2213C9.47589 14.562 9.28449 15.024 9.28449 15.5058M9.28449 15.5058H2.29199M17.7087 4.49417H15.1212M11.487 4.49417H2.29199M11.487 4.49417C11.487 4.01236 11.6784 3.55029 12.0191 3.20959C12.3598 2.8689 12.8218 2.67751 13.3037 2.67751C13.5422 2.67751 13.7785 2.7245 13.9989 2.81579C14.2193 2.90709 14.4195 3.0409 14.5882 3.20959C14.7569 3.37829 14.8907 3.57856 14.982 3.79896C15.0733 4.01937 15.1203 4.2556 15.1203 4.49417C15.1203 4.73274 15.0733 4.96897 14.982 5.18938C14.8907 5.40979 14.7569 5.61006 14.5882 5.77875C14.4195 5.94744 14.2193 6.08126 13.9989 6.17255C13.7785 6.26385 13.5422 6.31084 13.3037 6.31084C12.8218 6.31084 12.3598 6.11944 12.0191 5.77875C11.6784 5.43806 11.487 4.97598 11.487 4.49417Z" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-miterlimit="10" stroke-linecap="round"/></svg>');
        margin-right: 5px;
    }
    .new-class{
        position: relative;
    }
    .menu-course-sm{
        display: none;
        position: absolute;
        background-color: #FFFFFF;
        z-index: 1;
        top: -5em;
        left: 0;
        overflow: scroll;
        height: 92vh;
        padding: 20px 15px 15px;
        box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    }
    .button-close-sm span{
        display: flex;
        gap: 5px;
        align-items: center;
        margin-bottom: 19px;
        justify-content: flex-start;
        flex-direction: row-reverse;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }
    .button-close-sm span:before{
        /*content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="31" viewBox="0 0 30 31" fill="none"><path d="M15.7223 21.8827C16.069 22.3126 16.6986 22.3801 17.1285 22.0334C17.5584 21.6867 17.6259 21.0571 17.2792 20.6272L15.7223 21.8827ZM12.0813 15.7749L11.3029 15.1471C11.0074 15.5135 11.0074 16.0363 11.3029 16.4026L12.0813 15.7749ZM17.2792 10.9225C17.6259 10.4926 17.5584 9.86304 17.1285 9.51634C16.6986 9.16964 16.069 9.23709 15.7223 9.667L17.2792 10.9225ZM17.2792 20.6272L12.8597 15.1471L11.3029 16.4026L15.7223 21.8827L17.2792 20.6272ZM12.8597 16.4026L17.2792 10.9225L15.7223 9.667L11.3029 15.1471L12.8597 16.4026ZM15 26.9C8.95552 26.9 4 21.8272 4 15.5L2 15.5C2 22.8695 7.78965 28.9 15 28.9L15 26.9ZM4 15.5C4 9.1728 8.95552 4.10001 15 4.10001L15 2.10001C7.78964 2.10001 2 8.13055 2 15.5L4 15.5ZM15 4.10001C21.0445 4.1 26 9.1728 26 15.5L28 15.5C28 8.13055 22.2104 2.1 15 2.10001L15 4.10001ZM26 15.5C26 21.8272 21.0445 26.9 15 26.9L15 28.9C22.2104 28.9 28 22.8695 28 15.5L26 15.5Z" fill="%23479C25" style="fill:%23479C25;fill:color(display-p3 0.2784 0.6118 0.1451);fill-opacity:1;"/><path d="M15.7223 21.8827C16.069 22.3126 16.6986 22.3801 17.1285 22.0334C17.5584 21.6867 17.6259 21.0571 17.2792 20.6272L15.7223 21.8827ZM12.0813 15.7749L11.3029 15.1471C11.0074 15.5135 11.0074 16.0363 11.3029 16.4026L12.0813 15.7749ZM17.2792 10.9225C17.6259 10.4926 17.5584 9.86304 17.1285 9.51634C16.6986 9.16964 16.069 9.23709 15.7223 9.667L17.2792 10.9225ZM17.2792 20.6272L12.8597 15.1471L11.3029 16.4026L15.7223 21.8827L17.2792 20.6272ZM12.8597 16.4026L17.2792 10.9225L15.7223 9.667L11.3029 15.1471L12.8597 16.4026ZM15 26.9C8.95552 26.9 4 21.8272 4 15.5L2 15.5C2 22.8695 7.78965 28.9 15 28.9L15 26.9ZM4 15.5C4 9.1728 8.95552 4.10001 15 4.10001L15 2.10001C7.78964 2.10001 2 8.13055 2 15.5L4 15.5ZM15 4.10001C21.0445 4.1 26 9.1728 26 15.5L28 15.5C28 8.13055 22.2104 2.1 15 2.10001L15 4.10001ZM26 15.5C26 21.8272 21.0445 26.9 15 26.9L15 28.9C22.2104 28.9 28 22.8695 28 15.5L26 15.5Z" fill="%23F9D94E" style="fill:%23F9D94E;fill:color(display-p3 0.9765 0.8510 0.3059);fill-opacity:1;"/><path d="M15.7223 21.8827C16.069 22.3126 16.6986 22.3801 17.1285 22.0334C17.5584 21.6867 17.6259 21.0571 17.2792 20.6272L15.7223 21.8827ZM12.0813 15.7749L11.3029 15.1471C11.0074 15.5135 11.0074 16.0363 11.3029 16.4026L12.0813 15.7749ZM17.2792 10.9225C17.6259 10.4926 17.5584 9.86304 17.1285 9.51634C16.6986 9.16964 16.069 9.23709 15.7223 9.667L17.2792 10.9225ZM17.2792 20.6272L12.8597 15.1471L11.3029 16.4026L15.7223 21.8827L17.2792 20.6272ZM12.8597 16.4026L17.2792 10.9225L15.7223 9.667L11.3029 15.1471L12.8597 16.4026ZM15 26.9C8.95552 26.9 4 21.8272 4 15.5L2 15.5C2 22.8695 7.78965 28.9 15 28.9L15 26.9ZM4 15.5C4 9.1728 8.95552 4.10001 15 4.10001L15 2.10001C7.78964 2.10001 2 8.13055 2 15.5L4 15.5ZM15 4.10001C21.0445 4.1 26 9.1728 26 15.5L28 15.5C28 8.13055 22.2104 2.1 15 2.10001L15 4.10001ZM26 15.5C26 21.8272 21.0445 26.9 15 26.9L15 28.9C22.2104 28.9 28 22.8695 28 15.5L26 15.5Z" fill="%23707070" style="fill:%23707070;fill:color(display-p3 0.4392 0.4392 0.4392);fill-opacity:1;"/><path d="M15.7223 21.8827C16.069 22.3126 16.6986 22.3801 17.1285 22.0334C17.5584 21.6867 17.6259 21.0571 17.2792 20.6272L15.7223 21.8827ZM12.0813 15.7749L11.3029 15.1471C11.0074 15.5135 11.0074 16.0363 11.3029 16.4026L12.0813 15.7749ZM17.2792 10.9225C17.6259 10.4926 17.5584 9.86304 17.1285 9.51634C16.6986 9.16964 16.069 9.23709 15.7223 9.667L17.2792 10.9225ZM17.2792 20.6272L12.8597 15.1471L11.3029 16.4026L15.7223 21.8827L17.2792 20.6272ZM12.8597 16.4026L17.2792 10.9225L15.7223 9.667L11.3029 15.1471L12.8597 16.4026ZM15 26.9C8.95552 26.9 4 21.8272 4 15.5L2 15.5C2 22.8695 7.78965 28.9 15 28.9L15 26.9ZM4 15.5C4 9.1728 8.95552 4.10001 15 4.10001L15 2.10001C7.78964 2.10001 2 8.13055 2 15.5L4 15.5ZM15 4.10001C21.0445 4.1 26 9.1728 26 15.5L28 15.5C28 8.13055 22.2104 2.1 15 2.10001L15 4.10001ZM26 15.5C26 21.8272 21.0445 26.9 15 26.9L15 28.9C22.2104 28.9 28 22.8695 28 15.5L26 15.5Z" fill="%231B1B1B" style="fill:%231B1B1B;fill:color(display-p3 0.1059 0.1059 0.1059);fill-opacity:1;"/></svg>');*/
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 30 31" fill="none"><path d="M5 5L25 25M25 5L5 25" stroke="%231B1B1B" stroke-width="2" stroke-linecap="round" /></svg>');
        margin-right: 5px;
        width: 20px;
        height: 20px;
    }
    .button-arrow-down .arrow-btn{
        margin: auto;
    }
    .sidebar-course-top{
        padding-right: 0;
    }
    .wrapper-noResult img{
        max-width: 135px;
        margin: auto;
    }
    .wrapper-noResult h2{
        font-size: 20px;
    }
    .wrapper-noResult p{
        font-size: 14px;
    }
    .course-filter .title-filter .filter-ttl.PC-only{
        display: none;
    }
    .course-filter .title-filter .filter-ttl.SM-only{
        display: flex;
    }
    .course-filter .title-filter.PC-only{
        display: none;
    }
    .course-filter .title-filter.SM-only,
    .course-search .title-search{
        display: flex;
        justify-content: space-between;
    }
    .course-genre .title-genre.PC-only, .course-fav .title-fav.PC-only{
        display: none;
    }
    .course-genre .title-genre, .course-fav .title-fav.SM-only{
        display: flex;
        justify-content: space-between;
    }
    .sidebar-course-top .dropdown-containerGenre .ui-selectmanycheckbox label{
        margin: 0 0 0 8px;
    }
    .time-list .symbol .ui-button.ui-button-text-only.booked-text .ui-button-text {
        font-size: 12px;
    }
    
    .request-schedule-wrapper {
        flex-wrap: wrap;
        border-bottom: 1px solid #dadada;
        padding: 0.5em 0px;
    }
    .request-schedule-right-side {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: -1em;
        flex-wrap: wrap;
        gap: 10px 0px;
    }
    body .ui-button.add-schedule {
        margin-top: 1.25em;
    }
    .more-button-index.go-to-inquiry {
        justify-content: center;
    }
}
@media screen and (max-width: 380px) {
    .borderList {
        width: auto;
    }
}

@media screen and (max-width: 320px) {
    .slick-track {
        left: 48px!important;
    }
    .borderList {
        width: 270px;
    }
}