/* 体験クラス表 */
/*gridの中にvideoと表*/

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2つの列に分ける */
    gap: 10px; /* グリッドアイテムの間隔 */
}

.taiken-item {
    border: 1px solid #ccc;
    padding: 10px;
}

/* iPadサイズ以下の場合のスタイル */
@media (max-width: 770px) {
    .grid-container {
      grid-template-columns: 1fr; /* 1列に変更 */
    }
}

/* 選択肢のスタイリング */
.choices {
    display: flex;
    justify-content: space-around;
    margin: 0 40px 20px;
    border: #ccc 1px solid;
    background-color: #eddaf3;
    padding: 0 10px 8px 10px;
}

.choice_class {
    width: 100px;
    background-color: #3498db;
    cursor: pointer;
    color: #fff5ec;
    font-size: 12px;
    border-radius: 2px; /* すべての角を2pxの半径で丸くする */
    border: 1px solid #039dfa;
    box-shadow: 2px 2px 2px rgba(56, 113, 146, 0.38); /* 影を追加 */
    padding: 5px;
    margin: 5px 0 0 0;
}

.choice_class span {
    display: inline-block;
}

section.show {
    display: block;
    background-color: #eddaf3; /* 選択時の背景色 */
    color: #fff; /* 選択時のテキスト色 */
    padding-bottom: 30px;
}

.choice_class.selected {
    background-color: #fff; /* 選択時のボタン背景色 */
    color: #039dfa; /* 選択時のボタンテキスト色 */
    font-weight: bold;
    border: 1px solid #039dfa;
    box-shadow: 2px 2px 2px rgba(56, 113, 146, 0.38); /* 影を追加 */
}
/* 表のスタイリング */
    section {
    display: none;
    }

    section.show {
    display: block;
    }

    @media (max-width: 600px) {
        .choices {
            margin: 0;
            border: #ccc 1px solid;
            padding: 0 0 8px 0;
        }

        .choice_class {
            width: 70px;
            margin: 3px;
            padding: 5px 0;
            font-size: 10px;
            transform: none; /* 平行四辺形のエフェクトを追加 */
        }

        .choice_class span {
            transform: none; /* テキストの逆の歪みを追加 */
            display: inline-block;
        }
    }

.back-1{
    background-color: #8080c0;
    color: #fff;
    width: 100px;
    text-align: center;
    padding: 0.5em;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    transform: skew(-20deg); /* 平行四辺形のエフェクトを追加 */
    box-shadow: 2px 2px 2px rgba(56, 113, 146, 0.38); /* 影を追加 */
}

.kids-dance {
    background: url(https://studio-labra.net/images/class_kidsdance.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

.ribon-dance {
    background: url(https://studio-labra.net/images/class_ribon.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}
.princess {
    background: url(https://studio-labra.net/images/class_princess.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

.kids_jazz {
    background: url(https://studio-labra.net/images/class_kidsjazz2.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*kids*/
.jazz1 {
    background: url(https://studio-labra.net/images/class_jazz1.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em 0 0;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*teen*/
.jazz2 {
    background: url(https://studio-labra.net/images/class_jazz2.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em 0 0;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*under kids*/
.kids_hiphop {
    background: url(https://studio-labra.net/images/class_kidshiphop.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*kids*/
.kids_hiphop0 {
    background: url(https://studio-labra.net/images/class_kidshiphop0.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*under Junior*/
.hiphop0 {
    background: url(https://studio-labra.net/images/class_hiphop0.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*Junior*/
.hiphop1 {
    background: url(https://studio-labra.net/images/class_hiphop1.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*Teen*/
.hiphop2 {
    background: url(https://studio-labra.net/images/class_hiphop2.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*teen*/
.kpop2 {
    background: url(https://studio-labra.net/images/class_kpop1.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*junior*/
.kpop1 {
    background: url(https://studio-labra.net/images/class_kpop.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*kids*/
.kids_kpop {
    background: url(https://studio-labra.net/images/class_kidskpop.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*Junior*/
.jazz-hiphop1 {
    background: url(https://studio-labra.net/images/class_jazzhiphop1.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em 0 0;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}
/*teen*/
.jazz-hiphop2 {
    background: url(https://studio-labra.net/images/class_jazzhiphop2.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

/*teen*/
.breaking {
    background: url(https://studio-labra.net/images/class_breaking.png) no-repeat 10px center / 50px auto;
    background-size: contain; /* 背景サイズの指定方法。coverは画面全体を覆うように拡大縮小 */
    background-position: left; /* 画像の中央に配置 */
    background-color: #fff;
    text-align: left;
    padding: 0.5em;
    margin: 1px 20px 2px 20px;
    border-bottom: #fff0fb solid 1px;
}

hr {
    border: none;
    border-top: 1px solid #ccc; /* 水平線の色と太さ */
    width: 78.4%; /* 親要素の幅の78.4%に設定 */
    margin: 15px 10px; /* 水平線の上下のマージン */
}

.align-right-margin60px {
    display: block;
    text-align: right;
    margin-right: 60px;
}

/*画像を元の大きさ100%までで表示*/
img .width-100-margin20{
    max-width: 100%; /* 元の大きさ以上に表示しない */
    height: auto; /* アスペクト比を維持するための設定 */
}
@media (max-width: 770px) {
    img.width-100-margin20 {
        max-width: 100%;
        width: 100%;
        height: auto;
        margin: 20px 0; /* 上下のマージン */
    }
}

/*スタジオ画像*/
.class_time td.studio-jpg {
    margin: 0;
    padding: 0;
    text-align: center;
}
.studio-jpg {
    margin: 0;
    padding: 0;
}

.studio-jpg img{
    width: 160px;
    display: block;
    margin: 0 auto;
}
/* 携帯端末の画面サイズに対するメディアクエリ */
@media screen and (max-width: 767px) {
    .studio-jpg img {
        width: 100%; /* 画像の幅を100%に設定 */
        max-width: none; /* 最大幅を解除 */
        padding: 15px; /* 左側の余白を追加 */
    }
}

.subscription{
    display: grid;
    grid-template-columns: auto auto;
    font-size: 16px;
    margin-top: 30px;
}

.line-qr{
    margin-right: 10px;
    margin-left: auto;
    align-self: center;
    display: block; /* ブロック要素として扱う */
}

@media (max-width: 600px) {
    .subscription {
        font-size: 12px;
    }
    img.t-size{
        width: 144px;
    }
}

.subscription-contents {
    grid-column: 2 / span 1;
    grid-row: 1;
    margin-right: 10px;
}

.qcon-taiken {
    width: 150px;
}

.t-size{
    width: 144px;
}

.details-container {
    color: #666;
    padding: 45px 5px 45px 150px;
    font-size: 16px;
}

@media (max-width: 600px) {
    .details-container {
        padding: 45px 5px 45px 150px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .details-container {
        padding: 45px 5px 45px 140px;
        font-size: 12px;
    }
}

.details-container span{
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #039dfa;
}

/*受付中の点滅*/
@keyframes blink {
    0% { opacity: 1; } /* 最初の状態：不透明 */
    50% { opacity: 0; } /* 中間の状態：透明 */
    100% { opacity: 1; } /* 最後の状態：不透明 */
}

.blinking {
    animation: blink 3s infinite; /* アニメーションのプロパティ */
}

/*taiken font*/
.check {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
    color: #28406c;
}