:root {
    --tm-main-bg-color: rgba(200, 177, 255, .17);
    --tm-toddl-color: rgb(110, 200, 150);
    --tm-st-color: rgb(80, 80, 255);
    --tm-sc-color: rgb(248, 106, 37);
    --tm-sk-color: rgb(251, 0, 255);
    --tm-child-color: rgb(0, 106, 95);
    --tm-junir-color: rgb(240, 200, 100);
    --tm-adult-color: rgb(255, 106, 168);
    --tm-senir-color: rgb(142, 58, 239);
}

@font-face {
    font-family: "HMRFont";
    font-display: swap;
    src: url("../font/HannariMincho.woff2") format('woff2');
}

html {
    font-size: 20px;
    font-family: 'HMRFont', '游明朝 Medium', serif;
}

body {
    line-height: 1.7;
    min-height: 100vh;
    background-color: lavender;
    background-image: url(../img/back2.webp);
    background-attachment: fixed;
    background-repeat: repeat;
}

h1 {
    font-size: 1.5rem;
}
h2 {
    margin-top: 1.5rem;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.3em;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1.1em;
}

.middle-header {
    font-size: min(7vw, 1.5em);
    text-wrap: nowrap;
}

.card {
    background-color: var(--tm-main-bg-color);
}

.card-title {
    margin-bottom: 1.5rem;
    white-space: nowrap;
}

.b-example-divider {
    margin: 3rem 0;
    height: 0.3rem;
}

.b-example-divider:after {
    content: '';
    height: 0.3rem;
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--tm-main-bg-color);
}

.annotation {
    color: red;
}

.img-shadow {
    box-shadow: 1rem 0.5rem 2rem rgba(71, 67, 67, .71);
}

#header {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20px 0;
    text-align: center;
    background: linear-gradient(120deg, rgba(255, 255, 255, .45), rgb(255, 255, 255, .78)), url(../../assets/img/topbanner.webp);
    background-position: top;
    background-size: cover;
    height: 18vw;
}

#header_address {
    position: absolute;
    top: 20px;
    right: 20px;
    max-width: 300px;
}

#logo {
    position: relative;
    max-width: 750px;
}

#mbnav {
    display: none;
}

#mbnav .offcanvas {
    background-color: #efccfff7;
}

#mbnav .offcanvas-body ul li {
    padding: 16px 0;
    font-size: x-large;
    border-bottom: 1px solid lightsteelblue;
}

.contents {
    display: grid;
    justify-content: center;
    justify-self: center;
    text-align: center;
    text-wrap: balance;
}

.day-footer {
    text-wrap: wrap;
}

#contents_header {
    padding: 10px;
    margin-top: 5%;
    margin-bottom: 3rem;
    text-align: center;
    background: linear-gradient(320deg, rgba(0, 0, 0, 0), #a73abd5c, rgba(0, 0, 0, 0));
    font-size: 1.5rem;
    font-weight: bold;
}

#contents-body {
    margin: 0 auto 80px auto;
    /*width: 80%;*/
    max-width: 1200px;
    font-size: 1rem;
}

.contents_bh {
    font-size: 1.5em;
}

.contents_bh .bh-min {
    font-size: 0.65em;
}

.contents_bsh {
    font-size: 0.74em;
}

.contents_bd {
    font-size: 0.6em;
}

.title-deco {
    width: auto;
    height: 30px;
    align-self: center;
}

.contents-card {
    padding: 0px 3%;
}

.d-smmd-grid {
    margin: 10% 0;
}

.grid-text {
    display: grid;
    align-items: center;
}

#lesson-detail {
    margin-top: 25px;
    height: 5em;
    overflow: hidden;
    font-size: 1.5rem;
}

.contents .class-day {
    margin: 20px 10px;
    /*max-width: 800px;*/
    font-size: 0.9rem;
    table-layout: fixed;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    position: relative;
    background-clip: padding-box;
    border: 1px solid #be8cff;
    border-radius: 6px;
    outline: 0;
    --bs-table-bg: var(--tm-main-bg-color);
}

#class-breakdown div {
    padding-top: 6px;
    padding-bottom: 6px;
}

.contents .class-day tr {
    vertical-align: middle;
}
.contents .class-day td {
    padding: 0.8rem 0;
    text-align: -webkit-center;
}

.class-name {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: end;
    white-space: nowrap;
}


.class-border {
    border-top: 15px solid rgb(234, 237, 253);
}
.class-border-sub {
    border-top: 5px solid rgb(234, 237, 253);
}


.todd-text-color {
    color: var(--tm-toddl-color) !important;
}

.st-text-color {
    color: var(--tm-st-color) !important;
}

.sc-text-color {
    color: var(--tm-sc-color) !important;
}

.sk-text-color {
    color: var(--tm-sk-color) !important;
}

.child-text-color {
    color: var(--tm-child-color) !important;
}

.adult-text-color {
    color: var(--tm-adult-color) !important;
}

.senior-text-color {
    color: var(--tm-senir-color) !important;
}


.lesson-week a{
    text-decoration: none;
}
.lw-todd-text-color {
    border-bottom: 2px solid var(--tm-toddl-color);
}
.lw-st-text-color {
    border-bottom: 2px solid var(--tm-st-color);
}
.lw-sc-text-color {
    border-bottom: 2px solid var(--tm-sc-color);
}
.lw-sk-text-color {
    border-bottom: 2px solid var(--tm-sk-color);
}
.lw-child-text-color {
    border-bottom: 2px solid var(--tm-child-color);
}
.lw-adult-text-color {
    border-bottom: 2px solid var(--tm-adult-color);
}
.lw-senior-text-color {
    border-bottom: 2px solid var(--tm-senir-color);
}

#carouselGalleryIndicators,
.carousel-item img {
    display: inline;
    width: 100%;
    margin: auto;
}

#carouselGalleryIndicators .carousel-item img {
    margin-bottom: 50px;
    max-height: 550px;
    object-fit: cover;
}

.explanation {
    max-width: 1200px;
    margin: 5rem auto;
    text-align: left;
    font-size: 0.8rem;
}

.explanation button {
    font-size: 1em;
}

.mbdetail button {
    width: 100%;
    border-radius: 0;
}

.mbdetail .card {
    border-radius: 0 0 5px 5px;
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
}

.feature-icon img {
    width: inherit;
}

.mbdetail {
    display: none;
}

.detail-toddler-contents:before {
    content: 'バーレッスン～ストレッチ・ポールドブラ（手の動き）まで行い、曲に合わせて簡単な動きを練習し、楽しく続けられるレッスンをしています。';
}

.detail-child-contents:before {
    content: '基本の動きの練習に加えて、経験５年以上からトウシューズを履いてレッスンします。';
}

.detail-junia-contents:before {
    content: '基礎を会得した後、曲に合わせて様々な踊りが踊れるように指導します。';
}

.detail-adult-contents:before {
    content: '初心者は簡単な動きから練習をし、経験者の方は本格的なバレエレッスンをします。';
}

.detail-senior-contents:before {
    white-space: pre-wrap;
    content: 'ストレッチ２０分\a軽い動作からクールダウンまで２０分。ストレッチを重点的に、ケガの無いようゆっくり体を動かし、柔軟性を高めます。尚、バレエの動きを少し取り入れています。';
}


.list-group {
    width: 100%;
    max-width: 35%;
    margin-top: 2.5rem;
    margin-inline: 1.5rem;
    padding-right: 0;
}

.list-group p {
    font-size: 0.9rem;
    text-align: left;
    text-wrap: wrap;
}

/*.week-md {
    display: table;
    margin-top: 80px !important;
}*/

.week-mb {
    display: none;
    vertical-align: middle;
}

.week-mb tbody tr {
    height: 4rem;
}

.lesson-week {
    text-wrap: nowrap;
}

#footer {
    color: white;
    text-align: center;
}

#footer_menu {
    padding: 10px 0;
    background-color: #9562acdb;
    display: block;
    font-size: medium;
}

#footer_logo {
    padding: 5px 0 10px 0;
    background: linear-gradient(180deg, #9562acd9, #6f388c91);
    font-size: 0.875em;
}

#footer a {
    padding: 0 5px;
    color: white;
    text-decoration: none;
    font-size: large;
}

.footerPC {
    display: inline;
}

@media only screen and (max-width: 1700px) {
    #header {
        height: auto;
    }
}

@media only screen and (max-width: 600px) {
    html {
        font-size: 16px;
    }

    #menu {
        display: none;
    }

    #mbnav {
        display: block;
    }

    .mbdetail {
        display: block !important;
    }

    #lesson-detail,
    .detail-scrolllink {
        display: none !important;
    }

    .contents .table {
        margin: 20px 0;
    }

    .list-group {
        max-width: 450px;
    }

    .table th,
    .table td {
        padding: .5rem;
    }

    .class-name {
        font-size: 1rem;
    }

    .week-md {
        display: none;
    }

    /*    .week-mb {
        display: table;
    }*/

    #footer {
        padding: 0;
        position: static;
        z-index: 1;
    }

    #footer_menu {
        padding: 0;
    }

    .footerPC {
        display: none !important;
    }

    #footer a {
        padding: 20px 0;
        display: block;
        font-size: larger;
        border-bottom: 1px solid #dee2e6;
    }
}

/*433<=767*/
@media only screen and

/*(min-width:433px) and*/
(max-width:768px) {
    .d-smmd-grid {
        display: grid;
    }

    .grid-text {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        text-align: justify !important;
        margin-top: 1.6em;
        margin-bottom: 2em;
    }

    .grid-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }
}

/*最小285px*/
@media only screen and (max-width: 432px) {
    /*    #header {
        padding: 0 0;
        height: 200px;
    }*/

    .title-deco {
        height: 3vw;
    }

    #contents-body {
        width: 90%;
    }

    .contents .class-day {
        width: 100%;
        max-width: 480px;
        font-size: small !important;
    }

    .list-group {
        max-width: 280px;
    }


    .card-body {
        background-color: var(--tm-main-bg-color) !important;
    }

}