body {
    margin: 0;
}

.home-tune .dropdown-menu,
.home-tune-fb .dropdown-menu {
    color: rgba(0, 0, 0, .8);
    background-color: rgba(0, 0, 0, 0);
    border: none
}

.bg-no-repeat,
.footer-image,
.talking-box-r {
    background-repeat: no-repeat !important
}

.article-hr b,
body {
    background-color: #f5e9d6
}

.class-select,
.default-card-hover td,
.default-card-hover th,
.summary td,
.summary th {
    vertical-align: middle
}

body {
    font-family: "Microsoft JhengHei";
    color: #343a40;
    background-position: 50% 100%;
    background-size: contain;
    background-repeat: no-repeat
}

img {
    max-width: 100%;
    height: auto
}

@font-face {
    font-family: SanafonMaru;
    src: url(../assets/SNsanafonmaru/SNsanafonmaru.ttf)
}

.font-sanafonmaru {
    font-family: SanafonMaru, Microsoft JhengHei
}

.close-card,
.cursor-pointer,
.home-course-toggle,
.home-side-btn-icon,
.nav-link {
    cursor: pointer
}

.nav-link {
    color: inherit;
}

.nav-link:hover,
.nav-link:active {
    color: inherit;
}

a {
    text-decoration: none;
}

a.nav-link-sp:hover,
a:hover {
    text-decoration: none
}

.article-green-bg,
.article-green-bg-sm-2,
.article-green-bg-xl,
.article-orange-bg,
.article-pink-bg,
.bg-center {
    background-position: center
}

@media only screen and (min-width:992px) {
    .footer-height {
        height: 55vw
    }

    .home-banner-height {
        height: 52.083333vw
    }

    .logo-place {
        left: 10vw;
        top: 1vw
    }

    .p-tune {
        padding: 15.9vw 26.6vw 7.5vw 20.4vw
    }
}


@media screen and (max-width:575.98px) and (min-width:450px) {
    .mb-just-footer {
        margin-bottom: 3vw
    }
}

@media screen and (max-width:991.98px) and (min-width:576px) {
    .footer-height {
        height: 64vw
    }

    .mb-just-footer {
        margin-bottom: calc(4vw - 1rem)
    }

    .home-banner-height {
        height: 90vw
    }
}

@media screen and (max-width:1199.98px) and (min-width:992px) {
    .mb-just-footer {
        margin-bottom: 1.8vw
    }
}

.home-btn-size {
    padding-top: 105%;
    transition: .3s
}

.home-btn-size:hover {
    box-shadow: .1rem .2rem 1rem rgba(0, 0, 0, .3) !important;
    transition: .3s
}

.boy-01:hover .def,
.boy-02:hover .def,
.girl-01:hover .def,
.girl-02:hover .def,
.girl-03:hover .def,
.home-side-btn-icon:hover .play-icon,
.home-tune [aria-expanded=false] i.fa-times,
.home-tune [aria-expanded=true] i.fa-align-justify,
.qa-collapse button[aria-expanded=false] i.fa-chevron-up,
.qa-collapse button[aria-expanded=true] i.fa-chevron-down,
button.navbar-toggler[aria-expanded=false] i.fa-times,
button.navbar-toggler[aria-expanded=true] i.fa-align-justify,
div.navbar-toggler-sys[aria-expanded=false] i.fa-chevron-up,
div.navbar-toggler-sys[aria-expanded=true] i.fa-chevron-down {
    display: none
}

.home-tune .dropdown-menu p,
.home-tune-fb .dropdown-menu p {
    margin-bottom: .6rem;
    text-align: center
}

.home-tune .dropdown-menu p a,
.home-tune-fb .dropdown-menu p a {
    color: rgba(0, 0, 0, .8);
    font-weight: 600;
    font-size: 1rem
}

.home-tune .dropdown-menu .home-tune-item {
    width: 17.5rem !important;
    padding-top: 163.254%;
    background-image: url(../webp/home/dream.webp)
}

.home-search-item,
.home-tune-fb .dropdown-menu .home-tune-item {
    padding-top: 84.81894%;
    background-image: url(../webp/home/dream-fb.webp)
}

.home-tune .dropdown-menu {
    padding: 1.5rem 0 0
}

.home-tune-fb .dropdown-menu .home-tune-item {
    width: 15rem
}

.home-tune-fb .dropdown-menu {
    padding: 2rem 0 0
}

.home-search,
section.parallaxcrolling {
    position: relative
}

.home-search-item {
    width: 22rem
}

.home-class-search {
    position: absolute;
    top: 35px;
    right: 35px
}

.home-side-btn-icon {
    width: 75px;
    height: 75px;
    border: 3px solid #fff
}

.home-side-btn-icon:hover {
    box-shadow: .1rem .2rem .5rem rgba(0, 0, 0, .3) !important
}

.home-side-btn-icon:hover .icon-info {
    display: inline-block !important
}

.course-click {
    height: 55vw
}

@media only screen and (min-width:1200px) {
    .mb-just-footer {
        margin-bottom: .5vw
    }

    .course-click {
        height: calc(35rem + 10vw)
    }

    .home-piano-size {
        bottom: 6vw;
        left: 2vw;
        right: -2vw
    }
}

.act,
.boy-01,
.boy-02,
.def,
.girl-01,
.girl-02,
.girl-03 {
    bottom: 0;
    right: 0;
    position: absolute
}

.boy-01:hover .act,
.boy-02:hover .act,
.girl-01:hover .act,
.girl-02:hover .act,
.girl-03:hover .act {
    display: block !important
}

.boy-01:hover .act+.talking-box-r,
.boy-02:hover .act+.talking-box-r,
.girl-01:hover .act+.talking-box-r,
.girl-02:hover .act+.talking-box-r,
.girl-03:hover .act+.talking-box-r {
    display: flex !important
}

.home-side-btn-icon .play-icon {
    padding: 1px 0 0 4px
}

.talking-box-r {
    position: absolute;
    background-image: url(../webp/talking-box-r.webp);
    background-size: contain !important;
    display: flex;
    z-index: 3;
    width: 130px;
    height: 64px;
    color: #9a764b
}

@media screen and (max-width:767.98px) {
    .talking-box-r {
        display: none !important
    }
}

.news-box {
    background-color: #fff;
    border: 3px solid #ffcc4f;
    padding: 1rem;
    position: relative
}

.news-news {
    padding: .3rem .8rem;
    border-radius: 5rem;
    background-color: #f8ca5e;
    color: #fff
}

.article-hr b,
.news-box .row:hover .news-data,
.news-box .row:hover .news-info,
.news-box .row:hover .news-news,
.text-default {
    color: #9a764b
}

.text-default:hover {
    color: #765732;
}

.news-box .row-bar:not(:first-child) [class*=col-] {
    border-top: 1px solid #f7d88f
}

.news-left-block,
.news-pencil,
.news-pins,
.news-right-block {
    position: absolute
}

.news-left-block {
    width: 7vw;
    left: 2vw;
    top: -6vw
}

.news-right-block {
    width: 9vw;
    right: 2vw;
    top: -6vw
}

.news-pins {
    width: 15vw;
    left: 0;
    bottom: -1vw
}

.news-pencil {
    width: 15vw;
    right: -3vw;
    bottom: -3vw
}

@media only screen and (min-width:1200px) {
    .news-left-block {
        width: 85px;
        left: 2vw;
        top: -80px
    }

    .news-right-block {
        width: 105px;
        top: -70px
    }

    .news-pins {
        width: 175px;
        bottom: -10px
    }

    .news-pencil {
        width: 175px;
        bottom: -30px;
        right: -20px
    }
}

@media only screen and (max-width:768px) {
    .news-left-block {
        width: 55px;
        left: 2vw;
        top: -52px
    }

    .news-right-block {
        width: 80px;
        top: -54px
    }

    .news-pins {
        width: 125px;
        bottom: -10px
    }

    .news-pencil {
        width: 115px;
        bottom: -20px;
        right: -15px
    }
}

.tvbox-indicators {
    bottom: calc(-6% - 1rem);
    margin: 0 !important
}

@media only screen and (min-width:1200px) {
    .tvbox-indicators {
        bottom: -11%
    }

    .tv-box-bg {
        background-image: url(../webp/home/tv-box-xl.webp);
        padding-top: 50.8%
    }

    .tv-box-place {
        margin: 15.6% 33% 12.3% 24.45%
    }
}

@media screen and (max-width:1199.98px) and (min-width:768px) {
    .tv-box-bg {
        background-image: url(../webp/home/tv-box-lg.webp);
        padding-top: 66.833333%
    }

    .tv-box-place {
        margin: 19.5% 24% 20.3% 24.5%
    }
}

.l-19 {
    left: -19%
}

.r-19 {
    right: -19%
}

.icon-circle {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex
}

.article-hr b,
.nav-link-sp {
    display: inline-block
}

.article-hr b {
    z-index: 990;
}

.icon-circle i {
    margin: auto !important
}

.navbar-toggler-header {
    font-size: 1rem;
    line-height: 1.5
}

/* 頁首樣式 */
#header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

/* 縮小時的樣式 */
.shrink {
    padding: 5px 0 !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 4px;
}

.shrink img {
    height: 36px;
    width: auto;
}

#headerNavbar .nav-item a,
.home-tune-item p a {
    position: relative;
    display: inline-block
}

#headerNavbar .side-icon,
.home-tune-item .side-icon {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../webp/nav-side-icon.webp);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 11px 20px
}

.home-tune-item .side-icon .bottom-line {
    display: block;
    border-bottom: 2px solid #ff923d;
    margin-right: .65rem;
    margin-left: .9rem;
    margin-bottom: -.1rem;
    width: 100%
}

.home-tune-item a {
    padding: 0 .65rem 0 .9rem
}

#headerNavbar .side-icon .bottom-line {
    display: block;
    border-bottom: 2px solid #ff923d;
    margin: auto .65rem 10px .9rem;
    width: 100%
}

#headerNavbar .nav-item:hover .side-icon,
.home-tune-item p:hover .side-icon {
    display: flex
}

#headerNavbar .nav-item:hover .bb-hover,
.home-tune-item p:hover .bb-hover {
    border-bottom: 2px solid #ff923d
}

.text-yamaha-purple {
    color: #572d81 !important;
}

.btn-yamaha-purple {
    background-color: #572d81;
    border: #572d81;
    color: #fff !important;
}

.btn-yamaha-purple:hover {
    background-color: #572d81;
    border: #572d81;
    color: #fff !important;
}

.btn-collapse {
    background-color: #ff923d;
    border: #ff923d;
    color: #fff
}

.btn-fb,
.btn-ig,
.btn-locate {
    color: #fff !important
}

.btn-collapse:active,
.btn-collapse:hover {
    background-color: #ff7d1a;
    border: #ff7d1a;
    color: #fff
}

.btn-collapse:focus,
.btn-ff923d:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 146, 61, .25)
}

.btn-fb {
    background-color: #4267b2;
    border: #4267b2
}

.btn-fb:active,
.btn-fb:hover {
    background-color: #375695;
    border: #375695;
    color: #fff
}

.btn-fb:focus {
    box-shadow: 0 0 0 .2rem rgba(66, 103, 178, .25)
}

.btn-ig {
    background-color: #f60a53;
    border: #f60a53
}

.btn-ig:active,
.btn-ig:hover {
    background-color: #ac063b;
    border: #ac063b;
    color: #fff
}

.btn-ig:focus {
    box-shadow: 0 0 0 .2rem rgba(66, 103, 178, .25)
}

.btn-locate {
    background-color: #00c7d0;
    border: #00c7d0
}

.btn-locate:active,
.btn-locate:hover {
    background-color: #00aab3;
    border: #00aab3;
    color: #fff
}

.qa-collapse .card,
.qa-collapse .card-header {
    border-bottom: 2px solid rgba(0, 0, 0, .2) !important
}

.btn-locate:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 199, 208, .25)
}


@media screen and (max-width:950px) and (min-width:650px) {
    .navbar-bg-image {
        background-image: url(../webp/header-bg/hair-cut.webp);
        padding-top: 32%
    }

    .mr-shift {
        margin-right: 5vw !important
    }

    .navlogo-width-and-place-yms {
        margin-left: 4vw
    }

    .navlogo-width-and-place {
        margin-left: 5vw
    }
}

@media only screen and (max-width:649.98px) {
    .navbar-bg-image {
        background-image: url(../webp/header-bg/hair-cut-very-much.webp);
        padding-top: 27%
    }
}

.nav-link-sp {
    font-weight: 700;
    color: #f8cf02 !important
}

#headerNavbar li a {
    color: #000;
    padding: 10px .65rem 15px .9rem
}

.navlogo-width-and-place-yms {
    height: 1.5vw
}

.brand-width {
    width: 105px
}

@media screen and (min-width:450px) {
    .brand-width {
        width: 120px
    }
}

@media screen and (min-width:1200px) {
    .brand-width {
        width: 9.5vw
    }
}

.navlogo-width-and-place {
    height: 2.5vw
}

@media screen and (max-width:1199.98px) and (min-width:440px) {
    .navlogo-width-and-place-yms {
        height: 20px
    }

    .navlogo-width-and-place {
        height: 32px
    }
}

@media only screen and (max-width:439.98px) {
    .navlogo-width-and-place-yms {
        height: 26.5px
    }

    .navlogo-width-and-place {
        height: 36.5px
    }
}

@media only screen and (max-width:1199.98px) {
    #headerNavbar .nav-item+li {
        border-top: .8px solid rgba(165, 114, 90, .5)
    }

    /*
    .navbar-drop-down {
        background-color: rgba(26, 26, 26, .8)
    }
    */

}

.banner-height {
    height: 40.833333vw
}

.course-banner-bg-img {
    /*
    background-image: url(../webp/banner/course-banner-1920.webp);
    */
    background-image: url(../webp/banner/course-banner-1920-20251204.webp);

}

.apple-banner-bg {
    background-image: url(../webp/banner/apple-1920.webp)
}

.course001-banner-bg {
    background-image: url(../webp/banner/course001-1920.webp)
}

.course002-banner-bg {
    background-image: url(../webp/banner/course002-1920.webp)
}

.course003-banner-bg {
    background-image: url(../webp/banner/course003-1920.webp)
}

.course004-banner-bg {
    background-image: url(../webp/banner/course004-1920.webp)
}

.special-banner-bg {
    background-image: url(../webp/banner/special-1920.webp)
}

.class-banner-bg {
    background-image: url(../webp/banner/class-1920.webp)
}

.system-banner-bg {
    background-image: url(../webp/banner/system-1920.webp)
}

.news-banner-bg {
    background-image: url(../webp/banner/news-1920.webp)
}

.activity-banner-bg {
    background-image: url(../webp/banner/activity-1920.webp)
}

.yamaha-stars-banner-bg {
    background-image: url(../webp/banner/yamaha-stars-1920.webp)
}

.video-banner-bg {
    background-image: url(../webp/banner/video-1920.webp)
}

.privacy-banner-bg {
    background-image: url(../webp/banner/privacy-1920.webp)
}

.copyright-banner-bg {
    background-image: url(../webp/banner/copyright-1920.webp)
}

.fb-specification-banner-bg {
    background-image: url(../webp/banner/fb-specification-1920.webp)
}

@media screen and (max-width:950px) and (min-width:500px) {
    .banner-height {
        height: 71.789473vw
    }

    .course-banner-bg-img {
        /*
        background-image: url(../webp/banner/course-banner-950.webp);
        */
        background-image: url(../webp/banner/course-banner-950-20251204.webp);

    }

    .apple-banner-bg {
        background-image: url(../webp/banner/apple-950.webp)
    }

    .course001-banner-bg {
        background-image: url(../webp/banner/course001-950.webp)
    }

    .course002-banner-bg {
        background-image: url(../webp/banner/course002-950.webp)
    }

    .course003-banner-bg {
        background-image: url(../webp/banner/course003-950.webp)
    }

    .course004-banner-bg {
        background-image: url(../webp/banner/course004-950.webp)
    }

    .special-banner-bg {
        background-image: url(../webp/banner/special-950.webp)
    }

    .class-banner-bg {
        background-image: url(../webp/banner/class-950.webp)
    }

    .system-banner-bg {
        background-image: url(../webp/banner/system-950.webp)
    }

    .news-banner-bg {
        background-image: url(../webp/banner/news-950.webp)
    }

    .activity-banner-bg {
        background-image: url(../webp/banner/activity-950.webp)
    }

    .yamaha-stars-banner-bg {
        background-image: url(../webp/banner/yamaha-stars-950.webp)
    }

    .video-banner-bg {
        background-image: url(../webp/banner/video-950.webp)
    }

    .privacy-banner-bg {
        background-image: url(../webp/banner/privacy-950.webp)
    }

    .copyright-banner-bg {
        background-image: url(../webp/banner/copyright-950.webp)
    }

    .fb-specification-banner-bg {
        background-image: url(../webp/banner/fb-specification-950.webp)
    }
}

@media only screen and (max-width:499.98px) {
    .banner-height {
        height: 94.153846vw
    }

    .course-banner-bg-img {
        background-image: url(../webp/banner/course-banner-650.webp)
    }

    .apple-banner-bg {
        background-image: url(../webp/banner/apple-650.webp)
    }

    .course001-banner-bg {
        background-image: url(../webp/banner/course001-650.webp)
    }

    .course002-banner-bg {
        background-image: url(../webp/banner/course002-650.webp)
    }

    .course003-banner-bg {
        background-image: url(../webp/banner/course003-650.webp)
    }

    .course004-banner-bg {
        background-image: url(../webp/banner/course004-650.webp)
    }

    .special-banner-bg {
        background-image: url(../webp/banner/special-650.webp)
    }

    .class-banner-bg {
        background-image: url(../webp/banner/class-650.webp)
    }

    .system-banner-bg {
        background-image: url(../webp/banner/system-650.webp)
    }

    .news-banner-bg {
        background-image: url(../webp/banner/news-650.webp)
    }

    .activity-banner-bg {
        background-image: url(../webp/banner/activity-650.webp)
    }

    .yamaha-stars-banner-bg {
        background-image: url(../webp/banner/yamaha-stars-650.webp)
    }

    .video-banner-bg {
        background-image: url(../webp/banner/video-650.webp)
    }

    .privacy-banner-bg {
        background-image: url(../webp/banner/privacy-650.webp)
    }

    .copyright-banner-bg {
        background-image: url(../webp/banner/copyright-650.webp)
    }

    .fb-specification-banner-bg {
        background-image: url(../webp/banner/fb-specification-650.webp)
    }
}

.article-text,
.font-1-2rem {
    font-size: 1.2rem
}

.article-hr+hr {
    margin: -28px 0 28px;
    border-top: 2px solid #9a764b;
    z-index: 0;
}

.article-green-bg {
    background-image: url(../webp/article-green-bg.webp);
    height: 104px;
    width: 481px
}

.article-green-bg-xl {
    background-image: url(../webp/article-green-bg-xl.webp);
    height: 103px;
    width: 720px
}

.article-green-bg-sm-2 {
    background-image: url(../webp/article-green-bg-sm.webp);
    height: 140px;
    width: 317px
}

.article-orange-bg {
    background-image: url(../webp/article-orange-bg.webp);
    height: 104px;
    width: 720px
}

.article-pink-bg {
    background-image: url(../webp/article-pink-bg.webp);
    height: 104px;
    width: 481px
}

.article-content {
    font-weight: 700;
    line-height: 1.4;
    padding-top: 1.3rem
}

.classes-head {
    padding: .3rem 3rem;
    border-radius: 100px 100px 0 0;
    text-align: center
}

.classes-head img {
    height: 36px;
    margin-right: .7rem
}

.classes-head span {
    font-size: 1.5rem;
    font-weight: 700
}

.default-card {
    position: relative;
    border-bottom: 4px solid #a1bd9c;
    background-color: #fffbf5;
    padding: 1rem;
    z-index: 2
}

.border-bottom-default {
    border-bottom: 5px solid #9a764b
}

.default-card-apple,
.default-card-hover,
.default-card-hover-apple {
    border-bottom: 4px solid #f87a77
}

.default-card-has-kids .default-card .card-contant,
.default-card-has-kids .default-card .card-contant p {
    font-size: 15px;
    color: #212121
}

.default-card-has-kids .default-card .card-contant-place {
    padding-left: 90px
}

@media screen and (max-width:1199.98px) and (min-width:992px) {
    .home-piano-size {
        bottom: 3vw;
        left: 5vw;
        right: 0
    }

    .default-card-has-kids .default-card .card-contant-place {
        padding-left: 80px
    }
}

@media screen and (max-width:767.98px) and (min-width:576px) {
    .tv-box-bg {
        background-image: url(../webp/home/tv-box-md.webp);
        padding-top: 68.8%
    }

    .tv-box-place {
        margin: 19.5% 24% 20.3% 22%
    }

    .article-green-bg-md {
        background-image: url(../webp/article-green-bg.webp);
        background-position: center;
        height: 104px;
        width: 481px
    }

    .article-orange-bg-md {
        background-image: url(../webp/article-orange-bg-md.webp);
        background-position: center;
        height: 124px;
        width: 662px
    }

    .article-orange-bg-md-2 {
        background-image: url(../webp/article-orange-bg-md-2.webp);
        background-position: center;
        height: 103px;
        width: 565px
    }

    .default-card-has-kids .default-card .card-contant-place {
        padding-left: 80px
    }
}

[class*=bottom-right-quarter-circle] {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 38px;
    width: 40px;
    display: flex;
    border-radius: 100% 0 0;
    z-index: 4;
    cursor: pointer
}

.default-card-has-kids .kids-place,
.talking-box {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 3
}

[class*=bottom-right-quarter-circle] i {
    margin: auto 10px 7px auto;
    font-size: 12px;
    color: #fff
}

.default-card-has-kids div[class*=col-] {
    margin-top: 60px;
    margin-bottom: 55px
}

.default-card-has-kids .kids-place {
    position: absolute;
    width: 70%;
    top: -2vw;
    left: -35px;
    bottom: -2vw
}

@media screen and (max-width:991.98px) and (min-width:768px) {
    .default-card-has-kids .kids-place {
        left: -15px
    }
}

.bus-img-position,
.clock-img-position,
.e-mail-img-position,
.locate-img-position,
.office-phone-img-position,
.phone-img-position,
.subway-img-position {
    position: relative;
    padding-left: 1.6rem
}

.locate-img-position img {
    position: absolute;
    height: 19px;
    left: 3px;
    top: 3px
}

.office-phone-img-position img,
.phone-img-position img {
    position: absolute;
    height: 18px;
    left: 0;
    top: 3px
}

.e-mail-img-position img {
    position: absolute;
    height: 14px;
    left: 1px;
    top: 6.5px
}

.clock-img-position img {
    position: absolute;
    height: 18px;
    left: 2px;
    top: 3px
}

.subway-img-position img {
    position: absolute;
    height: 21px;
    left: 2px;
    top: 2px
}

.bus-img-position img {
    position: absolute;
    height: 19px;
    left: 1px;
    top: 3px
}

.talking-box {
    position: absolute;
    background-image: url(../webp/talking-box.webp);
    display: flex;
    top: -70px;
    left: 100px;
    width: 130px;
    height: 64px
}

.talking-box .talking-box-text {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #b48c7a;
    margin: auto
}

.default-card-hover {
    position: absolute;
    background-color: #fffbf5;
    top: -60px;
    bottom: -20px;
    left: 12px;
    right: 12px;
    z-index: 10;
    display: none
}

[class*=btn-spy] {
    background-color: #fff;
    transition: .3s
}

nav[id*="-list"] {
    top: 0;
    z-index: 500
}

nav[id*="-list"] .nav-link {
    padding: .75rem;
    color: #3e3e3e;
    font-weight: 600;
    font-size: 17px;
    transition: .3s
}

[id*="-list-item-"] {
    padding-top: 4.5rem;
    margin-top: -3rem
}

nav[id*="-list"] .spyapple .nav-link:hover {
    background-color: rgba(255, 112, 114, .4);
    transition: .3s
}

nav[id*="-list"] .spyapple .nav-link.active {
    background-color: rgba(255, 112, 114, .6);
    transition: .3s
}

.default-card-001,
.default-card-hover-001 {
    border-bottom: 4px solid #f8ca5e
}

nav[id*="-list"] .spy001 .nav-link:hover {
    background-color: rgba(248, 202, 94, .4);
    transition: .3s
}

nav[id*="-list"] .spy001 .nav-link.active {
    background-color: rgba(248, 202, 94, .6);
    transition: .3s
}

.default-card-002,
.default-card-hover-002 {
    border-bottom: 4px solid #38af50
}

nav[id*="-list"] .spy002 .nav-link:hover {
    background-color: rgba(56, 175, 80, .4);
    transition: .3s
}

nav[id*="-list"] .spy002 .nav-link.active {
    background-color: rgba(56, 175, 80, .6);
    transition: .3s
}

.default-card-003,
.default-card-hover-003 {
    border-bottom: 4px solid #2ea7df
}

nav[id*="-list"] .spy003 .nav-link:hover {
    background-color: rgba(46, 167, 223, .4);
    transition: .3s
}

nav[id*="-list"] .spy003 .nav-link.active {
    background-color: rgba(46, 167, 223, .6);
    transition: .3s
}

.default-card-004,
.default-card-hover-004 {
    border-bottom: 4px solid #b45b4b
}

nav[id*="-list"] .spy004 .nav-link:hover {
    background-color: rgba(180, 91, 75, .4);
    transition: .3s
}

nav[id*="-list"] .spy004 .nav-link.active {
    background-color: rgba(180, 91, 75, .6);
    transition: .3s
}

.default-card-hover-special,
.default-card-special {
    border-bottom: 4px solid #cb904d
}

nav[id*="-list"] .spyspecial .nav-link:hover {
    background-color: rgba(203, 144, 77, .4);
    transition: .3s
}

nav[id*="-list"] .spyspecial .nav-link.active {
    background-color: rgba(203, 144, 77, .6);
    transition: .3s
}

.default-card-edae49 {
    border-bottom: 4px solid #edae49
}

.default-card-default {
    border-bottom: 4px solid #9a764b
}

div[class*=default-card-] tbody tr+tr {
    border-top: 1px solid #dee2e6
}

div[class*=default-card-] tbody td+td,
div[class*=default-card-] tbody td+th,
div[class*=default-card-] tbody th+td,
div[class*=default-card-] tbody th+th {
    border-left: 1px solid #dee2e6
}

.border-b-9a764b {
    border-bottom: 2px solid #9a764b
}

.border-b-f5e9d6 {
    border-bottom: 2px solid #f5e9d6
}

.h-33px {
    height: 33px
}

.mb-04rem {
    margin-bottom: .4rem !important
}

#footer {
    font-size: 15px;
}

#footer a {
    color: #606060;
}

#footer a:hover,
#footer a:active {
    color: #4b1e78;
}

img.footer-logo-size {
    height: 42px
}

.footer-font-size {
    font-size: 12px
}

@media only screen and (min-width:1300px) {
    .footer-font-size {
        font-size: .88vw
    }
}

.breadcrumb {
    background: 0 0
}

.bg-play-group,
.bg-play-group-1 {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 50px;
    display: flex
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #9a764b !important
}

.breadcrumb>li:last-child {
    font-weight: 600
}

.breadcrumb>li+li::before {
    padding: 0 5px;
    color: #9a764b !important;
    content: ">" !important;
    font-family: FontAwesome !important;
    font-weight: 500
}

.bg-play-group {
    background-image: url(../webp/play-group.webp);
    width: 182px;
    padding-left: 38px
}

.bg-play-group-1 {
    background-image: url(../webp/play-group-1.webp);
    width: 170px;
    padding-right: 20px
}

.carousel-indicators li {
    width: 15px !important;
    height: 15px !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    background-color: rgba(255, 255, 255, 0);
    border: 2.5px solid #fff !important;
    border-radius: 100% !important
}

.carousel-indicators .active {
    background-color: #ffcc4f !important
}

.carousel-indicators-classroom li {
    background-color: rgba(88, 88, 88, .8);
    border: 0 !important
}

.carousel-indicators-classroom .active {
    background-color: #585858 !important
}

.summary tr {
    border-bottom: .3rem solid #f5e9d6
}

.summary th {
    width: 100px;
    background-color: #ffeccb;
    color: #9a764b;
    font-size: 18px;
    text-align: center;
    font-weight: 700
}

.qa-collapse [id*=appleQa],
.summary td,
.summary-apple td {
    background-color: rgba(255, 112, 114, .1)
}

.font-16,
.summary td,
.summary-fb th {
    font-size: 16px
}

.summary td {
    color: #212121;
    font-weight: 700
}

.qa-collapse [id*=course001Qa],
.summary-course001 td {
    background-color: rgba(248, 202, 94, .1)
}

.qa-collapse [id*=course002Qa],
.summary-course002 td {
    background-color: rgba(56, 175, 80, .1)
}

.qa-collapse [id*=course003Qa],
.summary-course003 td {
    background-color: rgba(46, 167, 223, .1)
}

.qa-collapse [id*=course004Qa],
.summary-course004 td {
    background-color: rgba(180, 91, 75, .1)
}

.qa-collapse [id*=specialQa],
.summary-special td {
    background-color: rgba(203, 144, 77, .1)
}

.summary-fb td {
    background-color: rgba(161, 189, 156, .1)
}

@media screen and (min-width:576px) {
    .summary-fb th {
        width: 200px
    }
}

@media only screen and (min-width:992px) {
    #homeBanner .carousel-indicators {
        margin-bottom: -5rem;
        left: 7vw
    }

    .drop-home-tune {
        right: 22vw;
        top: 1vw
    }

    .home-banner-side-btn {
        bottom: 6vw;
        right: 22vw
    }

    .home-btn-size {
        width: 10vw
    }

    .home-btn-size span {
        font-size: 1.8vw
    }

    .briefs-s-place {
        margin-left: auto;
        margin-right: 2.5rem;
        margin-top: -60px
    }

    .briefs-s-place img {
        height: 209px;
        width: 212px
    }
}

@media screen and (max-width:991.98px) and (min-width:576px) {
    .logo-place {
        right: 22vw;
        top: 3vw
    }

    .p-tune {
        padding: 34.5vw 5.4vw 5.2vw 3vw
    }

    #homeBanner .carousel-indicators {
        margin-bottom: -5rem;
        left: 1rem
    }

    .drop-home-tune {
        right: 5vw;
        top: 4vw
    }

    .home-banner-side-btn {
        bottom: 2vw;
        right: 3vw
    }

    .home-btn-size {
        width: 14vw
    }

    .home-btn-size span {
        font-size: 2.6vw
    }

    .home-piano-size {
        bottom: 3vw;
        left: 4vw;
        right: -15px
    }

    .briefs-l-place,
    .briefs-s-place {
        margin-top: 2rem;
        margin-right: auto;
        margin-left: auto
    }

    .briefs-l-place img,
    .briefs-s-place img {
        height: 264px;
        width: 268px
    }
}

.group-head {
    font-size: 1.3rem;
    padding: .4rem .8rem
}

.qa-collapse .group-head {
    padding: .6rem 1.25rem;
    font-size: 1.1rem
}

.qa-collapse .accordion {
    margin-bottom: 2.5rem
}

.qa-collapse .card-header {
    padding: .75rem 1.25rem;
    margin-bottom: -2px !important;
    background-color: #f5e9d6 !important
}

.qa-collapse .card-header:hover {
    background-color: #f2e4ce !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.class-select,
.home-search .class-select:focus {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat #fff
}

.qa-collapse .card {
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: #0000;
    border-radius: 0 !important
}

.qa-collapse .btn {
    display: flex;
    width: 100%;
    color: #9a764b;
    padding: 0
}

.qa-collapse .card-header:hover .btn {
    color: #785c3b
}

.qa-collapse .btn .focus,
.qa-collapse .btn:focus {
    box-shadow: none
}

.qa-collapse i {
    line-height: 170%;
    margin-left: auto;
    font-size: 1.1rem;
    text-align: left
}

.qa-collapse .card-body p {
    margin-bottom: .6rem;
    font-size: 1rem
}

.class-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .15rem 1.75rem .15rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    border: 2px solid #ced4da;
    border-radius: 5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.bg-contain,
.bg-cover {
    background-repeat: no-repeat
}

.home-search .class-select {
    height: auto;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat #ffffff80
}

.btn-outline-417505 {
    color: #417505 !important;
    border: 2px solid rgba(65, 117, 5, .7)
}

.btn-outline-417505:active,
.btn-outline-417505:hover {
    color: #fff !important;
    background-color: #417505;
    border: 2px solid #417505
}

.btn-outline-417505:focus {
    box-shadow: 0 0 0 .2rem rgba(65, 117, 5, .25)
}

.btn-outline-default {
    color: #9a764b !important;
    border: 2px solid rgba(154, 118, 75, .7)
}

.btn-outline-default:active,
.btn-outline-default:hover {
    color: #fff !important;
    background-color: #9a764b;
    border: 2px solid #9a764b
}

.btn-outline-default:focus {
    box-shadow: 0 0 0 .2rem rgba(154, 118, 75, .25)
}

.btn-outline-purple {
    color: #604b9a !important;
    border: 2px solid rgba(96, 75, 154, .7)
}

.btn-outline-purple:active,
.btn-outline-purple:hover,
.btn-purple,
.btn-purple:active,
.btn-purple:hover {
    color: #fff !important;
    background-color: #604b9a;
    border: 2px solid #604b9a
}

.btn-outline-purple:focus {
    box-shadow: 0 0 0 .2rem rgba(96, 75, 154, .25)
}

.page-links {
    color: #a5adbb !important;
    padding: .25rem .8rem .1rem;
    margin: 0 .1rem;
    transition: .2s
}

.page-links:hover {
    color: #2d2f30 !important;
    font-weight: 600;
    border-bottom: 2.5px solid #2d2f30;
    transition: .2s
}

.class-carousel-control-next,
.class-carousel-control-prev {
    top: 35%;
    bottom: 35%;
    width: 10%;
    color: #000;
    background-color: #fff
}

.class-carousel-control-next:focus,
.class-carousel-control-next:hover,
.class-carousel-control-prev:focus,
.class-carousel-control-prev:hover,
.sys-learning-carousel-control-next:focus,
.sys-learning-carousel-control-next:hover,
.sys-learning-carousel-control-prev:focus,
.sys-learning-carousel-control-prev:hover {
    color: #000
}

.p-0-from-2nd-thd td~td,
.p-0-from-2nd-thd th~td,
.py-0-only-1st-thd td:first-child {
    padding: 0
}

[class*=classroom-td-] {
    color: #fff;
    border: .1rem solid #fff8ec !important;
    padding: .7rem .4rem;
    display: block;
    line-height: 120%;
}

.bg-01,
.bg-apple,
.classroom-td-01 {
    background-color: #f87a77 !important
}

.bg-02,
.bg-banana,
.classroom-td-02 {
    background-color: #f8ca5e !important
}

.bg-03,
.bg-lemon,
.classroom-td-03 {
    background-color: #38af50 !important
}

.bg-04,
.bg-ocean,
.classroom-td-04 {
    background-color: #2ea7df !important
}

.bg-05,
.bg-chestnut,
.classroom-td-05 {
    background-color: #b45b4b !important
}

.bg-06,
.bg-cb904d,
.bg-special,
.classroom-td-06 {
    background-color: #cb904d !important
}

.bg-08,
.classroom-td-08 {
    background-color: #40c7f4 !important
}

.bg-09,
.classroom-td-09 {
    background-color: #7d6bb0 !important
}

.btn-outline-sys-a1bd9c {
    color: #9a764b;
    font-weight: 600;
    border: 3px solid rgba(161, 189, 156, 0)
}

.btn-outline-sys-a1bd9c:active,
.btn-outline-sys-a1bd9c:hover {
    color: #fff;
    background-color: #a1bd9c;
    border: 3px solid #a1bd9c
}

.btn-outline-sys-a1bd9c:focus {
    box-shadow: 0 0 0 .2rem rgba(154, 118, 75, .1)
}

.active-tab {
    color: #fff !important;
    background-color: #a1bd9c !important;
    border: 3px solid #a1bd9c !important
}

.navbar-toggler-sys {
    padding: .2rem 0;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    color: #9a764b;
    background-color: #fff;
    border-top: 2px solid #ced4da;
    border-right: 2px solid #ced4da;
    border-left: 2px solid #ced4da;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

div.navbar-toggler-sys[aria-expanded=false] {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom: 2px solid #ced4da;
    transition-delay: 0.3s
}

div.navbar-toggler-sys[aria-expanded=true] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none
}

@media only screen and (max-width:991.98px) {

    div.navbar-toggler-sys+#systemNav,
    div.navbar-toggler-sys+#systemNav01 {
        background-color: #fff;
        text-align: center;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        border-right: 2px solid #ced4da;
        border-left: 2px solid #ced4da;
        border-bottom: 2px solid #ced4da
    }

    #systemNav .nav-item,
    #systemNav .nav-item+li {
        border-top: .8px solid rgba(165, 114, 90, .5)
    }
}

.timeline-btn p {
    position: relative;
    color: #a1bd9c;
    border: .15rem solid #9a764b;
    background-color: #a1bd9c;
    width: 1rem;
    height: 1rem;
    margin-bottom: 0
}

.timeline-date {
    position: absolute;
    top: 1.5rem;
    left: -.8rem;
    color: #9a764b
}

.sys-equipment-info,
.sys-merit-info {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: .3s;
    right: 0
}

.guide-btn,
.sys-merit-hover:hover .sys-merit-info {
    opacity: .9
}

.timeline {
    border-top: .15rem solid #9a764b;
    margin-top: -.7rem
}

@media screen and (max-width:575.98px) {
    .home-banner-height {
        height: 77.777777vw
    }

    .p-tune {
        padding: 15.5vw 5.4vw 11.8vw 3vw
    }

    #homeBanner .carousel-indicators {
        margin-bottom: -4rem;
        left: .75rem
    }

    .home-banner-side-btn {
        bottom: -10px;
        right: 15px
    }

    .home-btn-size {
        width: 95px
    }

    .home-btn-size span {
        font-size: 18px
    }

    .home-piano-size {
        bottom: 3vw;
        left: 2vw;
        right: -15px
    }

    .news-box .row-bar:not(:first-child) [class*=col-]:nth-child(2) {
        border-top: none
    }

    .article-green-bg-sm {
        background-image: url(../webp/article-green-bg-sm.webp);
        background-position: center;
        height: 140px;
        width: 317px
    }

    .article-orange-bg-sm {
        background-image: url(../webp/article-orange-bg-sm.webp);
        background-position: center;
        height: 112px;
        width: 317px
    }

    .article-pink-bg-sm {
        background-image: url(../webp/article-pink-bg-sm.webp);
        background-position: center;
        height: 214px;
        width: 320px
    }

    .article-contant {
        padding-top: 1rem;
        font-size: 3.6vw
    }

    .font-xs-stay-17 {
        font-size: 17px
    }

    .default-card-has-kids .default-card .card-contant-place {
        padding-left: 0
    }

    .default-card-has-kids div[class*=col-] {
        margin-top: 90px;
        margin-bottom: 40px
    }

    .default-card-has-kids .kids-place {
        top: -80px;
        left: -3px;
        bottom: 0;
        z-index: 1
    }

    .talking-box {
        top: -95px;
        left: 125px;
        width: 130px;
        height: 64px
    }

    .default-card-hover {
        top: -95px;
        bottom: -10px
    }

    .briefs-l-place img,
    .briefs-s-place img {
        width: 100%
    }

    [class*=classroom-td-] {
        padding: .3rem
    }

    .table-rwd-sm td,
    .table-rwd-sm th {
        padding: .3rem !important
    }

    .timeline-date {
        top: -.35rem;
        left: 2rem;
        color: #9a764b
    }

    .timeline {
        border-top: 0;
        border-left: .15rem solid #9a764b;
        margin-top: .5rem;
        margin-left: -.7rem;
        height: 95% !important
    }
}

@media only screen and (min-width:576px) {
    .l-sm-30 {
        left: -30%
    }

    .r-sm-30 {
        right: -30%
    }

    .article-sys-w {
        width: 90%
    }

    .font-sm-1-2rem {
        font-size: 1.2rem
    }

    .w-sm-auto {
        width: auto !important
    }

    .w-sm-75 {
        width: 75% !important
    }

    .w-sm-100 {
        width: 100% !important
    }

    .w-sm-90 {
        width: 90% !important
    }

    .h-sm-inherit {
        height: inherit !important
    }
}

@media only screen and (min-width:768px) {
    .article-sys-w {
        width: 75%
    }

    .beautify-merit .row>div:nth-child(2) {
        margin-top: 0
    }

    .w-md-default {
        width: inherit !important
    }

    .w-md-75 {
        width: 75% !important
    }

    .w-md-50 {
        width: 50% !important
    }

    .mx-md-6 {
        margin-left: 5rem !important;
        margin-right: 5rem !important
    }

    .table-md-base td,
    .table-md-base th {
        padding: .75rem
    }
}

.beautify-merit .row>div:not(:first-child) {
    margin-top: 2rem
}

.sys-merit-info {
    left: 0;
    background-color: #f8ca5e;
    color: rgba(0, 0, 0, .5);
    line-height: 175%;
    font-weight: 600
}

.sys-equipment-info {
    left: 0;
    background-color: rgba(255, 252, 247, .9);
    color: rgba(0, 0, 0, .9);
    display: flex;
    flex-direction: column
}

.radius-switch .carousel-inner,
.text-fbblue,
.text-linegreen {
    transition: .2s
}

.sys-equipment-hover:hover .sys-equipment-info {
    opacity: 1
}

.sys-learning-carousel-control-next,
.sys-learning-carousel-control-prev {
    top: 40%;
    bottom: 40%;
    width: 3%;
    color: #000;
    background-color: #fff
}

.guide-btn {
    background-color: #fff;
    padding: .4rem 2rem
}

.sys-learning-lead-icon {
    width: 13px;
    height: 35px;
    margin-right: 1rem
}

.radius-switch .carousel-inner:focus,
.radius-switch .carousel-inner:hover {
    box-shadow: 0 .2rem .4rem .1rem rgba(0, 0, 0, .3);
    transition: .2s
}

.radius-switch [id*=systemLearning-]:nth-of-type(odd) .no-gutters {
    flex-direction: row-reverse
}

.btn-pink {
    color: #fff;
    background-color: #f0a7a1;
    border-color: #f0a7a1;
}

.btn-pink:hover {
    color: #fff;
    background-color: #d6827a;
    border-color: #d6827a;
}

.th-fffcf7 th {
    background-color: #fffcf7;
    color: #9a764b
}

.test-carousel-control-next,
.test-carousel-control-prev {
    top: 35%;
    bottom: 35%;
    width: 30px;
    color: #000;
    background-color: #fff
}

.test-carousel-control-next:focus,
.test-carousel-control-next:hover,
.test-carousel-control-prev:focus,
.test-carousel-control-prev:hover,
.video-carousel-control-next:focus,
.video-carousel-control-next:hover,
.video-carousel-control-prev:focus,
.video-carousel-control-prev:hover {
    color: #1f1f1f
}

.video-carousel-control-next,
.video-carousel-control-prev {
    top: 20%;
    bottom: 40%;
    width: 20px;
    color: #000;
    background-color: #fff
}

@media only screen and (max-width:575.98px) {
    .footer-height {
        height: 125vw
    }

    .tv-box-bg {
        background-image: url(../webp/home/tv-box-sm.webp);
        padding: 68.8% 0 14px;
        margin: 0 -10px
    }

    .tv-box-place {
        margin: 17.6% 19% 14.3% 15.45%
    }

    .classes-head img {
        height: 31px;
        margin-right: .7rem
    }

    .classes-head span {
        font-size: 1.3rem;
        font-weight: 700
    }

    .summary th {
        width: 0;
        white-space: nowrap
    }

    .summary td,
    .summary th {
        padding-bottom: .6rem;
        padding-top: .6rem;
        line-height: 120%
    }

    .video-carousel-control-next,
    .video-carousel-control-prev {
        top: 40%;
        bottom: 30%
    }
}

.text-default-green {
    color: #a1bd9c
}

.text-red {
    color: red
}

.text-purple {
    color: #7266ba !important
}

.btn-ff923d,
.text-ff923d {
    color: #ff923d
}

.text-f5a623 {
    color: #f5a623
}

.text-edae49 {
    color: #edae49
}

.text-ffcc4f {
    color: #ffcc4f
}

.text-71b660 {
    color: #71b660
}

.text-5fac5b {
    color: #5fac5b
}

.text-313131 {
    color: #313131
}

.text-4381b4 {
    color: #4381b4
}

.text-417505 {
    color: #417505
}

.text-f1b01d {
    color: #f1b01d
}

.text-4ba3c3 {
    color: #4ba3c3
}

.text-ffab00 {
    color: #ffab00
}

.text-d6847e {
    color: #d6847e
}

.text-ff7272 {
    color: #ff7272
}

.text-d0514a {
    color: #d0514a
}

.text-38214a {
    color: #38214a
}

.text-b48c7a {
    color: #b48c7a
}

.text-a86050 {
    color: #a86050 !important
}

.text-91aa8c {
    color: #91aa8c
}

.text-01,
.text-apple {
    color: #f87a77
}

.text-001,
.text-02 {
    color: #f8ca5e
}

.text-002,
.text-03 {
    color: #38af50
}

.text-003,
.text-04 {
    color: #2ea7df
}

.text-004,
.text-05 {
    color: #b45b4b
}

.text-06,
.text-special {
    color: #cb904d
}

.text-new-toddler-class-11,
.text-course-008 {
    color: #40c7f4 !important;
}

.bg-new-toddler-class-11,
.bg-course-008 {
    background-color: #40c7f4 !important;
}

.text-new-toddler-class-21,
.text-course-009 {
    color: #7d6bb0 !important;
}

.bg-new-toddler-class-21,
.bg-course-009 {
    background-color: #7d6bb0 !important;
}

.text-line-color .fa-line,
.text-linegreen {
    color: #00c300
}

.text-linegreen:hover {
    color: #00b300;
    transform: translateY(-2px)
}

.text-facebook-color .fa-facebook-square,
.text-fbblue {
    color: #4267b2
}

.text-fbblue:hover {
    color: #375695;
    transform: translateY(-2px)
}

.color-bottomline-01 {
    display: block;
    color: #f87a77 !important;
    border-bottom: 2.5px solid #f87a77
}

.color-bottomline-02 {
    display: block;
    color: #f8ca5e !important;
    border-bottom: 2.5px solid #f8ca5e
}

.color-bottomline-03 {
    display: block;
    color: #38af50 !important;
    border-bottom: 2.5px solid #38af50
}

.color-bottomline-04 {
    display: block;
    color: #2ea7df !important;
    border-bottom: 2.5px solid #2ea7df
}

.color-bottomline-05 {
    display: block;
    color: #b45b4b !important;
    border-bottom: 2.5px solid #b45b4b
}

.color-bottomline-06 {
    display: block;
    color: #cb904d !important;
    border-bottom: 2.5px solid #cb904d
}

.color-bottomline-08 {
    display: block;
    color: #40c7f4 !important;
    border-bottom: 2.5px solid #40c7f4
}

.color-bottomline-09 {
    display: block;
    color: #7d6bb0 !important;
    border-bottom: 2.5px solid #7d6bb0
}

.bg-body {
    background-color: #f5e9d6 !important
}

.bg-default-green {
    background-color: #a1bd9c
}

.bg-default {
    background-color: #9a764b
}

.bg-f6dccb {
    background-color: #f6dccb
}

.bg-fff8ec {
    background-color: #fff8ec
}

.bg-d8d8d8 {
    background-color: #d8d8d8
}

.bg-e0e0e0 {
    background-color: #e0e0e0
}

.bg-edae49 {
    background-color: #edae49
}

.bg-00c7d0 {
    background-color: #00c7d0
}

.bg-c75146 {
    background-color: #c75146
}

.bg-pink {
    background-color: pink
}

.text-instagram-color .fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background-clip: text;
    -webkit-background-clip: text
}

.special-sign-up .btn-warning {
    color: #fff;
    background-color: #f5a623;
    border-color: #f5a623
}

.special-sign-up .btn-warning:active,
.special-sign-up .btn-warning:hover {
    color: #fff !important;
    background-color: #f49b0b !important;
    border-color: #f49b0b !important
}

.special-sign-up .form-control {
    border: 1.5px solid #9b9b9b;
    color: #9a764b;
    font-size: 14px;
    border-radius: .3rem
}

.special-sign-up ::placeholder {
    color: #9a764b;
    font-size: 14px
}

.special-sign-up .form-control:focus {
    background-color: #fff;
    border-color: #b37100;
    box-shadow: 0 0 0 .2rem rgba(179, 113, 0, .25)
}

.table-striped-special tbody tr:nth-of-type(odd),
.table-striped-special thead th:nth-of-type(2n) {
    background-color: rgba(0, 0, 0, .025)
}

.lead {
    font-weight: inherit
}

.font-1rem {
    font-size: 1rem
}

.font-1-1rem {
    font-size: 1.1rem
}

.font-1-4rem {
    font-size: 1.4rem
}

.font-13 {
    font-size: 13px
}

.font-13d5 {
    font-size: 13.5px
}

.font-14 {
    font-size: 14px
}

.font-15 {
    font-size: 15px !important
}

.font-17 {
    font-size: 17px
}

.font-18 {
    font-size: 18px
}

.font-19 {
    font-size: 19px
}

.font-21 {
    font-size: 21px
}

.font-22 {
    font-size: 22px
}

.font-24 {
    font-size: 24px
}

.font-28 {
    font-size: 28px
}

.font-30 {
    font-size: 30px
}

.font-32 {
    font-size: 32px
}

.font-42 {
    font-size: 42px
}

.font-52 {
    font-size: 52px
}

.font-72 {
    font-size: 72px
}

.font-75 {
    font-size: 75%
}

.font-1-8vw {
    font-size: 1.8vw
}

.ls-1 {
    letter-spacing: 1px
}

.ls-2 {
    letter-spacing: 2px
}

.ls-3 {
    letter-spacing: 3px
}

.ls-4 {
    letter-spacing: 4px
}

.ls-5 {
    letter-spacing: 5px
}

.border-radius-100 {
    border-radius: 100%
}

.trbl-trl-0 {
    right: 0;
    top: 0;
    left: 0
}

.trbl-rbl-0 {
    right: 0;
    bottom: 0;
    left: 0
}

.trbl-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.trbl-tr-0 {
    top: 0;
    right: 0
}

.trbl-tl-0 {
    top: 0;
    left: 0
}

.trbl-br-0 {
    right: 0;
    bottom: 0
}

.trbl-bl-0 {
    bottom: 0;
    left: 0
}

.top-0 {
    top: 0
}

.left-0 {
    left: 0
}

.sm-gutters {
    margin-left: -5px !important;
    margin-right: -5px !important
}

.sm-gutters>[class*=col-] {
    padding-left: 5px !important;
    padding-right: 5px !important
}

.row.no-gutters {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.row.gutters-1 {
    margin-right: -3px !important;
    margin-left: -3px !important
}

.row.gutters-1>.col,
.row.gutters-1>[class*=col-] {
    padding-right: 3px !important;
    padding-left: 3px !important
}

.row-sm-gutters [class*=col-],
.row.gutters-2>.col,
.row.gutters-2>[class*=col-] {
    padding-left: 6px !important;
    padding-right: 6px !important
}

.row.gutters-2 {
    margin-right: -6px !important;
    margin-left: -6px !important
}

@media all and (max-width:576px) {
    .row.gutters-xs-1 {
        margin-right: -3px !important;
        margin-left: -3px !important
    }

    .row.gutters-xs-1>.col,
    .row.gutters-xs-1>[class*=col-] {
        padding-right: 3px !important;
        padding-left: 3px !important
    }

    .row.gutters-xs-2 {
        margin-right: -6px !important;
        margin-left: -6px !important
    }

    .row.gutters-xs-2>.col,
    .row.gutters-xs-2>[class*=col-] {
        padding-right: 6px !important;
        padding-left: 6px !important
    }
}

.row.gutters-3 {
    margin-right: -9px !important;
    margin-left: -9px !important
}

.row.gutters-3>.col,
.row.gutters-3>[class*=col-] {
    padding-right: 9px !important;
    padding-left: 9px !important
}

.row.gutters-4 {
    margin-right: -12px !important;
    margin-left: -12px !important
}

.row.gutters-4>.col,
.row.gutters-4>[class*=col-] {
    padding-right: 12px !important;
    padding-left: 12px !important
}

.row.gutters-5 {
    margin-right: -15px !important;
    margin-left: -15px !important
}

.row.gutters-5>.col,
.row.gutters-5>[class*=col-] {
    padding-right: 15px !important;
    padding-left: 15px !important
}

.row.gutters-6 {
    margin-right: -18px !important;
    margin-left: -18px !important
}

.row.gutters-6>.col,
.row.gutters-6>[class*=col-] {
    padding-right: 18px !important;
    padding-left: 18px !important
}

.z--1 {
    z-index: -1
}

.w-2-5rem {
    width: 2.5rem;
    height: 2.5rem
}

.border-default-2px {
    border: 2px solid #9a764b
}

.w-90 {
    width: 90% !important
}

.w-85 {
    width: 85% !important
}

.w-20 {
    width: 20% !important
}

.w-320px {
    width: 320px !important
}

.w-50px {
    width: 50px !important
}

.w-12rem {
    width: 12rem
}

.pt-55,
.pt-55p {
    padding-top: 55%
}

.pt-75,
.pt-75p {
    padding-top: 75%
}

.pt-100,
.pt-100p {
    padding-top: 100%
}

.pt-150 {
    padding-top: 150%
}

.mb-5vw {
    margin-bottom: 5vw
}

.mx-30px {
    margin-left: 30px !important;
    margin-right: 30px !important
}

.px-10px {
    padding-left: 10px;
    padding-right: 10px
}

.px-30px {
    padding-left: 30px;
    padding-right: 30px
}

.py-01rem {
    padding-top: .1rem;
    padding-bottom: .1rem
}

.btn-default,
.btn-orange {
    font-weight: 600;
    color: #fff
}

.opacity-1 {
    opacity: 1 !important
}

.opacity-8 {
    opacity: .8
}

.opacity-5 {
    opacity: .5
}

.overflow-inherit {
    overflow: inherit
}

.l-h-120 {
    line-height: 120% !important
}

.l-h-170 {
    line-height: 170% !important
}

.l-h-150 {
    line-height: 150% !important
}

@media only screen and (min-width:575.98px) {
    .l-h-300-min-sm {
        line-height: 300% !important
    }

    .position-sm-sticky {
        position: -webkit-sticky !important;
        position: sticky !important
    }
}

.table-middle td,
.table-middle th,
.text-middle td,
.text-middle th {
    vertical-align: middle !important
}

.btn-default {
    background-color: #a1bd9c;
    border-color: #a1bd9c
}

.btn-default:active,
.btn-default:hover {
    color: #fff;
    background-color: #7ca375;
    border-color: #7ca375;
    text-decoration: none
}

.btn-default:focus {
    box-shadow: 0 0 0 .2rem rgba(161, 189, 156, .25)
}

.btn-orange {
    background-color: #f5a623;
    border-color: #f5a623
}

.btn-orange:active,
.btn-orange:hover {
    color: #fff;
    background-color: #db8b0a;
    border-color: #db8b0a;
    text-decoration: none
}

.btn-orange:focus {
    box-shadow: 0 0 0 .2rem rgba(245, 166, 35, .25)
}

.btn-d6837e {
    color: #fff !important;
    background-color: #d6837e;
    border-color: #d6837e
}

.btn-d6837e:active,
.btn-d6837e:hover {
    color: #fff !important;
    background-color: #ce6964;
    border-color: #ce6964;
    text-decoration: none
}

.btn-coffee {
    color: #fff;
    background-color: #9a764b;
    border-color: #9a764b
}

.btn-coffee:hover {
    color: #fff;
    background-color: #896743;
    border-color: #896743
}

.btn-coffee:focus {
    box-shadow: 0 0 0 .2rem rgba(120, 91, 59, .25)
}

.btn-ff923d:hover {
    color: #ff6f00
}

.radius-default-15px,
.radius-default-25px {
    border: 2px solid #9a764b;
    border-radius: 25px
}

.radius-left-20px {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px
}

.radius-20px {
    border-radius: 20px;
    overflow: hidden
}

.radius-15px {
    border-radius: 15px;
    overflow: hidden
}

.border-search {
    border: 2px solid #ced4da
}

.bg-bottom {
    background-position: bottom
}

.bg-cover {
    background-size: cover !important;
    background-position: 50% 50%
}

.bg-contain {
    background-size: contain !important
}

.space-nowrap {
    white-space: nowrap
}

.flex-nowrap {
    flex-wrap: nowrap
}

.position-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.position-x-center {
    left: 50%;
    transform: translate(-50%, 0)
}

.position-y-center {
    top: 50%;
    transform: translate(0, -50%)
}

.row-sm-gutters {
    margin-left: -6px !important;
    margin-right: -6px !important
}

@media only screen and (min-width:992px) {
    .article-sys-w {
        width: calc(50% + 10vw)
    }

    .guide-btn {
        opacity: 1;
        margin-left: 2rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem
    }

    .radius-switch [id*=systemLearning-]:nth-of-type(odd) .carousel-inner {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px
    }

    .radius-switch [id*=systemLearning-]:nth-of-type(2n) .carousel-inner {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px
    }

    .font-lg-1-1rem {
        font-size: 1.1rem
    }

    .radius-lg-15px {
        border-radius: 15px !important
    }

    .w-lg-inherit {
        width: inherit !important
    }
}

.nav-fill .nav-item,
.nav-fill>.nav-link {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center
}

section.parallaxcrolling img {
    position: fixed;
    z-index: 1000;
    object-fit: cover;
    pointer-events: none
}

.bird-home-news-place {
    width: 45px;
    top: calc(10vw - 36px);
    right: 15vw
}

@media screen and (max-width:767.98px) and (min-width:576px) {
    .bird-home-news-place {
        top: 4.5vw
    }
}

@media screen and (max-width:991.98px) and (min-width:768px) {
    .bird-home-news-place {
        top: 5.5vw
    }
}

@media screen and (max-width:1199.98px) and (min-width:992px) {
    .bird-home-news-place {
        top: 6.5vw
    }
}

@media only screen and (min-width:1200px) {
    img.footer-logo-size {
        height: 3.6vw
    }

    .article-sys-w {
        width: 50%
    }

    .font-xl-1vw {
        font-size: 1vw
    }

    .lg-flow-r {
        margin-left: auto !important;
        margin-right: 32px !important
    }

    .bird-home-news-place {
        top: 55px;
        right: 250px
    }
}

.article-hr-bird {
    width: 45px;
    bottom: 19px;
    right: 6vw;
    pointer-events: none
}

.table-bordered.table-bordered-white,
.table-bordered.table-bordered-white td,
.table-bordered.table-bordered-white th {
    border: 1px solid #fff !important
}

.nav-pills .nav-link.btn-outline-sys-a1bd9c.active,
.nav-pills .show>.nav-link.btn-outline-sys-a1bd9c {
    color: #fff;
    background-color: #a1bd9c !important;
    border: 3px solid #a1bd9c !important
}

.rounded-20px {
    border-radius: 20px !important
}

.card-body-flex-none {
    flex: none !important
}

ul.parsley-errors-list {
    margin: 0;
    padding: 0
}

.parsley-error {
    border-color: #ef4554 !important
}

.parsley-errors-list {
    display: none;
    margin: 0;
    padding: 0
}

.parsley-errors-list.filled {
    display: block
}

.parsley-errors-list>li {
    font-size: 13px;
    list-style: none;
    color: #f6504d
}

.opacity-100 {
    opacity: 100%
}

.opacity-75 {
    opacity: 75%
}

.opacity-50 {
    opacity: 50%
}

.opacity-25 {
    opacity: 25%
}

.opacity-0 {
    opacity: 0
}

#v-pills-tab .nav-link {
    padding: .3rem
}

section.parallaxcrolling img#fly-orange {
    left: 90%;
    width: 28px
}

section.parallaxcrolling img#fly-yellow {
    left: 10%;
    width: 24px
}

section.parallaxcrolling img#fly-red {
    left: 80%;
    width: 15px
}

section.parallaxcrolling img#fly-blue {
    left: 85%;
    width: 15px
}

section.parallaxcrolling img#fly-leaf {
    left: 95%;
    width: 16px
}

section.parallaxcrolling img#fly-pink {
    left: 15%;
    width: 20px
}

section.parallaxcrolling img#fly-green {
    left: 25%;
    width: 22px
}

section.parallaxcrolling img#fly-peach {
    left: 60%;
    width: 15px
}

/* bootstrap 5 */
.fw-bold {
    font-weight: bold;
}

.table-py-4 th,
.table-py-4 td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.table-py-5 th,
.table-py-5 td {
    padding-top: 5px;
    padding-bottom: 5px;
}

.table-py-6 th,
.table-py-6 td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* bg */
.bg-white-opacity {
    background-color: rgba(255, 255, 255, .8);
}

.bg-white-opacity-80 {
    background-color: rgba(255, 255, 255, .8);
}

.bg-white-opacity-90 {
    background-color: rgba(255, 255, 255, .9);
}

.opacity-60 {
    opacity: 60%;
}

.opacity-80 {
    opacity: 80%;
}

.opacity-90 {
    opacity: 90%;
}

.noto-sans-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* header */
.bg-black-opacity-90 {
    background-color: rgba(0, 0, 0, .9);
}

.bg-black-opacity-70 {
    background-color: rgba(0, 0, 0, .7);
}

/* footer */
@media only screen and (min-width:1200px) {
    body.bg-footer {
        background-image: url(../webp/footer/footer-1920-h.webp)
    }

    .footer-image {
        background-image: url(../webp/footer/footer-1920.webp);
        padding-top: 46%;
        background-position: 50% 100%;
        background-size: contain !important
    }
}

@media screen and (max-width:1199.98px) and (min-width:992px) {
    body.bg-footer {
        background-image: url(../webp/footer/footer-1200-h.webp)
    }
}

@media screen and (max-width:991.98px) and (min-width:576px) {
    body.bg-footer {
        background-image: url(../webp/footer/footer-992-h.webp)
    }
}

@media screen and (max-width:575.98px) and (min-width:450px) {
    body.bg-footer {
        background-image: url(../webp/footer/footer-576-h.webp)
    }
}

@media screen and (max-width:1199.98px) and (min-width:768px) {
    .footer-image {
        background-image: url(../webp/footer/footer-1200.webp);
        height: 515px;
        background-position: 50% 0;
        background-size: cover !important
    }
}

@media screen and (max-width:767.98px) and (min-width:450px) {
    .footer-image {
        background-image: url(../webp/footer/footer-768.webp);
        height: 400px;
        background-position: 50% 0;
        background-size: cover !important
    }
}

@media only screen and (min-width:992px) {
    .footer-height {
        height: 55vw
    }

    .home-banner-height {
        height: 52.083333vw
    }

    .logo-place {
        left: 10vw;
        top: 1vw
    }

    .p-tune {
        padding: 15.9vw 26.6vw 7.5vw 20.4vw
    }
}

@media only screen and (max-width:449.98px) {
    body.bg-footer {
        background-image: url(../webp/footer/footer-450-h.webp)
    }

    .footer-image {
        background-image: url(../webp/footer/footer-450.webp);
        padding-top: 96%;
        background-position: 50% 100%;
        background-size: contain !important
    }

    .mb-just-footer {
        margin-bottom: 5vw
    }
}

@media screen and (max-width:575.98px) and (min-width:450px) {
    .mb-just-footer {
        margin-bottom: 3vw
    }
}

@media screen and (max-width:991.98px) and (min-width:576px) {
    .footer-height {
        height: 64vw
    }

    .mb-just-footer {
        margin-bottom: calc(4vw - 1rem)
    }

    .home-banner-height {
        height: 90vw
    }
}

@media screen and (max-width:1199.98px) and (min-width:992px) {
    .mb-just-footer {
        margin-bottom: 1.8vw
    }
}

.text-blue {
    color: #0097d9 !important;
}

.btn-blue {
    background-color: #0097d9 !important;
    border-color: #0097d9 !important;
    color: #fff !important;
}

.btn-outline-blue {
    color: #0097d9 !important;
    border: 2px solid #0097d9;
}

.btn-outline-blue:active,
.btn-outline-blue:hover {
    color: #fff !important;
    background-color: #0097d9;
    border: 2px solid #0097d9;
}

.btn-light-blue {
    background-color: lightblue;
    border: lightblue;
}

.btn-light-blue:hover {
    background-color: lightblue;
    border: lightblue;
}

.btn-light-purple {
    background-color: #d5b7ec;
    border-color: #d5b7ec
}

.btn-light-purple:hover {
    background-color: #d5b7ec;
    border-color: #d5b7ec
}

.bg-blue {
    background-color: #0097d9 !important;
}

.bg-line-through {
    border-top-width: 1px;
    border-top-style: solid;
    position: relative;
    height: 30px;
}

.text-light-brown {
    color: #9a764b !important;
}

.border-light-brown {
    border-color: #9a764b !important;
}

.bg-line-through h2 {
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.bg-line-through-blue {
    border-top: solid 1px #0097d9;
    position: relative;
    height: 30px;
}

.bg-line-through-blue h4 {
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    text-align: center;
}

.chiron-goround-tc,
.chiron-goround-tc .btn {
    font-family: "Chiron GoRound TC", sans-serif;
}


.sub-page {
    background-image: url(https://school.jp.yamaha.com/music/assets/img/common/bg-ribon-right01.png), url(https://school.jp.yamaha.com/music/assets/img/common/bg-ribon-left01.png);
    background-repeat: repeat-y, repeat-y;
    background-position: right 584px, left 870px;
    background-size: 97px 1728px, 186px 1728px;
    overflow: hidden;
}

.bg-baby-blue {
    background-color: #e1edf5;
}

.text-blue,
.text-sky {
    color: #0097d9 !important
}

.btn-blue {
    background-color: #0097d9 !important;
    border-color: #0097d9 !important;
    color: #fff !important;
}

.btn-blue:hover {
    background-color: #027fb5 !important;
    border-color: #027fb5 !important;
    color: #fff !important;
}

.bg-blue {
    background-color: #0097d9 !important;
}

.bg-body {
    background-color: #f5e9d6 !important;
}

.border-dashed {
    border-style: dashed;
}

.border-blue {
    border-color: #0097d9 !important
}

.bg-highlight-blue {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.7;
    background: url(https://school.jp.yamaha.com/music/assets/img/common/bg-heading2.png) 0 1.1em no-repeat;
    background-position: 50% 100%;
    background-size: auto;
    background-size: 320px auto;
    padding-bottom: 16px;
    display: inline-block;
    color: #000;
    overflow: visible;
    min-width: 320px;
}

.underline-short-blue {
    font-size: 20px;
    font-weight: 600;
    position: relative;
    overflow: visible;
    margin-bottom: 40px;
    display: block;
}

.underline-short-blue::after {
    content: "";
    display: block;
    width: 25px;
    height: 4px;
    border-radius: 2px;
    background-color: #54c3f1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -60px;
    margin: auto;
    box-sizing: border-box;
}

.Heading3_heading3__wrap__kxc5B {
    background: url(https://school.jp.yamaha.com/music/assets/img/common/bg-heading3.svg) 100% 100% no-repeat;
    background-size: auto;
    background-size: auto 20px;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.Heading3_heading3__wrap__kxc5B h4 {
    line-height: 140%;
}

.Movies_Movies__item__gbkDd {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .1);
    padding: 24px 35px 48px 35px;
    position: relative;
    z-index: 1;
}

.breadcrumb {
    padding: 0;
    color: #572d81 !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #572d81 !important;
}

.breadcrumb>li:last-child {
    font-weight: normal;
}

.breadcrumb>li+li::before {
    padding: 0 5px;
    color: #572d81 !important;
    content: " / " !important;
    font-family: FontAwesome !important;
    font-weight: 200
}

.transform-scale-110 {
    transform: scale(1.1);
    /* 1.1 = 放大 10% */
    transform-origin: center center;
    /* 以中心放大，可依需求調整 */
}

.table> :not(caption)>*>* {
    background-color: transparent;
    color: inherit;
}

.text-white {
    color: #fff !important;
}