/* **************************************************

  		　       　クラス一覧

************************************************** */
section#class_body {
    background:#000;
    padding-bottom:5rem;
}

/* **************************************************

  		　        　　タブ

************************************************** */
.class_tab {
    display:flex;
    flex-wrap:wrap;
    padding-top:2rem;
}
.class_tab > label {
    flex:1;
    order:-1;
    position:relative;
    padding:1.5rem 0.5rem;
    background-color:#f2f2f2;
    color:#999;
    font-size:3vw;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
    border-right:1px solid #000;
}

.class_tab label:has(:checked)::before {
    position:absolute;
    bottom:-8px;
    left:50%;
    transform:translateX(-50%);
    width:2rem;
    height:1rem;
    content:'';
    clip-path:polygon(0 0, 100% 0, 50% 100%);
}

/* HIPHOP */
.class_tab > label#hiphop_tab:hover,
.class_tab label#hiphop_tab:has(:checked) {
    background-color:#548ECD;
    color:#fff;
}
.class_tab label#hiphop_tab:has(:checked)::before {
    background-color:#548ECD;
}

/* K-POP */
.class_tab > label#kpop_tab:hover,
.class_tab label#kpop_tab:has(:checked) {
    background-color:#246047;
    color:#fff;
}
.class_tab label#kpop_tab:has(:checked)::before {
    background-color:#246047;
}

/* JAZZ */
.class_tab > label#jazz_tab:hover,
.class_tab label#jazz_tab:has(:checked) {
    background-color:#ff0020;
    color:#fff;
}
.class_tab label#jazz_tab:has(:checked)::before {
    background-color:#ff0020;
}

/* POP */
.class_tab > label#pop_tab:hover,
.class_tab label#pop_tab:has(:checked) {
    background-color:#c6c201;
    color:#fff;
}
.class_tab label#pop_tab:has(:checked)::before {
    background-color:#c6c201;
}


.class_tab input {
    display:none;
}
.class_tab > div {
    display:none;
    width:100%;
    padding:1.5em 0em;
    color:#fff;
}
.class_tab label:has(:checked) + div {
    display: block;
}
.tab_body {
    background:#000;
    margin:1.5rem 0 0;
}

/* **************************************************

  		　       無料体験・見学申し込み

************************************************** */
.tab_body_course {
    background:#000;
}

/* **************************************************

  		　            コース一覧

************************************************** */
.course_list {
    margin:3rem 0 0;
}
.course_list > li {
    width:100%;
    margin:0 auto 2rem;
    background:#fff;
    text-align:left;
    padding:1.5rem 0 1.5rem;
}

.course_list_inner {
    text-align:center;
    margin:0 1.5rem;
}

/* YouTube埋め込み */
.course_list > li iframe {
    width:100%;
    height:auto;
    aspect-ratio: 560 / 315;
    margin:auto;
}
.course_list > li video {
    width:100%;
    height:auto;
    aspect-ratio: 852 / 480;
    margin:auto;
}
/* コース名 */
.course_list > li h3 {
    text-align:left;
    color:#fff;
    display:inline-block;
    padding:0rem 1.5rem 0 1.5rem;
    font-weight:bold;
    font-size:1.1rem;
    line-height:2em;
    height:2em;
    margin:1rem 0 1.5rem;
    vertical-align:bottom;   
}

/* HIPHOP */
#hiphop_body .course_list > li h3 {
    background:#548ECD;
}
/* K-POP */
#kpop_body .course_list > li h3 {
    background:#246047;
}
/* JAZZ */
#jazz_body .course_list > li h3 {
    background:#ff0020;
}
/* POP */
#pop_body .course_list > li h3 {
    background:#c6c201;
}

.course_list_inner p {
    text-align:left;
    font-size:1rem;
    line-height:1.6em;
}
/* 対象年齢・レベル・受講時間 */
.course_list_inner dl {
    margin:2.5rem 0 0;
}
.course_list_inner dl > div {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:1rem;
}
.course_list_inner dl > div:last-child {
    margin-bottom:0rem;
}
.course_list_inner dl > div dt {
    display:flex;
    align-items:start;
    justify-content:start;
}
.course_list_inner dl > div dt span {
    border-radius:2rem;
    border:1px solid #000;
    width:5rem;
    font-weight:bold;
    font-size:0.8rem;
    line-height:2em;
    
}
.course_list_inner dl > div dd {
    width:calc(100% - 5rem);
    text-align:left;
    margin-left:auto;
    padding:0 0 0 1em;
    font-size:0.9rem;
    display:flex;
    align-items:center;
    /* border-bottom:1px dotted #ccc; */
}

/* -----------------------------------------------------
　　　　　　　　無料体験・見学のお申し込みボタン
----------------------------------------------------- */
.lesson_date dd {
    margin:0;
    padding:0;
    background:#fff;
}
.lesson_date dd ul {
}
.lesson_date dd ul li {
    background:#fff;
    position:relative;
    width:100%;
    background-color:#f0f0f0; /* メイン背景色 */
    overflow: hidden; /* 三角形がはみ出た場合に隠す */
    margin-bottom:0.5rem;
    padding:0.5rem;
    max-width:16rem;
}
.lesson_date dd ul li a {
    display:block;
    margin:0;
    padding:0;
}
.lesson_date dd ul li:last-child {
    margin-bottom:0;
}
.lesson_date dd ul li::before {
    content: '';
    position: absolute;
    top:0;
    right:0;
    width:8rem;
    height:8rem;
    background-color:#FF7700; /* 三角形の背景色 */
    clip-path: polygon(4rem 0, 8rem 0, 8rem 4rem);
}
span.trial_text {
    position: absolute;
    top: 1.0rem; /* 適宜調整 */
    right: 0.1rem; /* 適宜調整 */
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    transform: rotate(45deg); /* 斜めのテキスト配置 */
}

.card {
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    background:#EFEFEF;
}
.card_left {
}
.card_right {
    flex:1;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.card_left img {
    width:3rem;
    height:3rem;
    margin-right:1rem;
}
.card_right b {
    display:block;
    width:100%;
    font-weight:bold;
}
.card_right span {
    display:block;
    width:100%;
}