/*sitemap用*/
.site img {
    width: 50px;
    height: auto;
    margin: 10px auto;
}


/*Qcon用*/
.qcon {
    max-width: 200px;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 10px;
}

/*アクセススタジオ写真用*/
img.studio {
    max-width: 500px;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 10px;
}
@media (max-width: 1024px) {
    img.studio {
width: 100%;
margin-left: 0;
}
}

/*画像右用*/
.imgright img {
    float: right;
    max-width: 250px;
    margin-top: 0;
}
@media screen and (max-width: 767px) {
    .imgright img {
        float: right;
        width: 25%;
        height: auto;
        margin-top: 0;
    }
}

/*PC用menuの左寄せ*/
.codrops-demos {
    float: left;
}
.wide_100 {
    width: 100%;
}


/*グーグルマップ用*/
.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*グーグルマップ用終了*/

.demo-2 .sl-slider-wrapper {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}


/*topページ下の部分最大時の下の長さ*/
.demo-2 .sl-slider-wrapper_under {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin: 20px 20px 0 0;
    padding: 10px 20px 0 20px;
    box-sizing: border-box; /* パディングとボーダーを含む */
}
/*動画表紙*/


.movie_p{
    margin-top: 30px;
    font-weight: 400;
}

.movie_img {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 20px;
    }

    @media (max-width: 767px) {
        .movie_img {
    width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .container {
    max-width: 100%;
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .container {
    max-width: 1199px;
    }
}

/**** .demo-2 .sl-slider-wrapper2以降は下記にまとめ *****/

.sl-slider-wrapper {
    background: linear-gradient(135deg,  #959595 0%,#0d0d0d 24%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 93%,#1b1b1b 100%);
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin: 20px 20px 0 0;
    padding: 10px 20px 0 20px;
    box-sizing: border-box; /* パディングとボーダーを含む */
}

.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote,
.demo-2 .sl-slider_under h2,
.demo-2 .sl-slider_under blockquote {
    padding: 60px 20px 5px 20px;
    width: 80%;
    max-width: 100%;
    color: #fff;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    box-sizing: border-box; /* パディングとボーダーを含む */
}

.demo-2 .sl-slider h2,
.demo-2 .sl-slider_under h2 {
    font-size: 100px;
}

.demo-2 .sl-slider blockquote,
.demo-2 .sl-slider_under blockquote {
    font-size: 28px;
    padding-top: 10px;
    font-weight: normal;
}

.demo-2 .sl-slider blockquote cite {
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 5px;
    padding-top: 30px;
    display: inline-block;
}

.demo-2 .bg-img {
    padding: 200px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    top: -200px;
    left: -200px;
    width: 100%;
    height: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

/* Custom navigation arrows */

.nav-arrows span {
    position: absolute;
    z-index: 2000;
    top: 50%;
    width: 40px;
    height: 40px;
    border: 8px solid #ddd;
    border: 8px solid rgba(150, 150, 150, 0.4);
    text-indent: -90000px;
    margin-top: -40px;
    cursor: pointer;
    box-sizing: border-box; /* パディングとボーダーを含む */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-arrows span:hover {
    border-color: rgba(150, 150, 150, 0.9);
}

.nav-arrows span.nav-arrow-prev {
    left: 5%;
    border-right: none;
    border-top: none;
}

.nav-arrows span.nav-arrow-next {
    right: 5%;
    border-left: none;
    border-bottom: none;
}

/* Custom navigation dots */

.nav-dots {
    text-align: center;
    position: absolute;
    bottom: 2%;
    height: 30px;
    width: 100%;
    left: 0;
    z-index: 1000;
}

.nav-dots span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 3px;
    background: #ddd;
    background: rgba(150, 150, 150, 0.4);
    cursor: pointer;
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.demo-2 .nav-dots span {
    background: rgba(150, 150, 150, 0.1);
    margin: 6px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 1px 1px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(255, 255, 255, 0.5);
}

.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 1px 1px rgba(0, 0, 0, 0.1),
        0 0 0 5px rgba(255, 255, 255, 0.5);
}

.nav-dots span.nav-dot-current:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}


/* 元は5まで */

.demo-2 .bg-img-0 {
    background-image: url(../images/labra_long_logo.webp);
}

.demo-2 .bg-img-1 {
    background-image: url(../images/001.jpg);
}

.demo-2 .bg-img-2 {
    background-image: url(../images/002.jpg);
}

.demo-2 .bg-img-3 {
    background-image: url(../images/003.jpg);
}

.demo-2 .bg-img-4 {
    background-image: url(../images/004.jpg);
}

.demo-2 .bg-img-5 {
    background-image: url(../images/005.jpg);
}

.demo-2 .bg-img-6 {
    background-image: url(../images/006.jpg);
}

.demo-2 .bg-img-7 {
    background-image: url(../images/007.jpg);
}

.demo-2 .bg-img-8 {
    background-image: url(../images/008.jpg);
}

.demo-2 .bg-img-9 {
    background-image: url(../images/009.jpg);
}

.demo-2 .bg-img-10 {
    background-image: url(../images/010.jpg);
    max-width: 100%;
}

/* Animations for content elements */

.sl-trans-elems .deco {
    -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}

.sl-trans-elems h2 {
    -webkit-animation: moveUp 1s ease-in-out both;
    -moz-animation: moveUp 1s ease-in-out both;
    -o-animation: moveUp 1s ease-in-out both;
    -ms-animation: moveUp 1s ease-in-out both;
    animation: moveUp 1s ease-in-out both;
}

.sl-trans-elems blockquote {
    -webkit-animation: fadeIn 0.5s linear 0.5s both;
    -moz-animation: fadeIn 0.5s linear 0.5s both;
    -o-animation: fadeIn 0.5s linear 0.5s both;
    -ms-animation: fadeIn 0.5s linear 0.5s both;
    animation: fadeIn 0.5s linear 0.5s both;
}

.sl-trans-back-elems .deco {
    -webkit-animation: scaleDown 1s ease-in-out both;
    -moz-animation: scaleDown 1s ease-in-out both;
    -o-animation: scaleDown 1s ease-in-out both;
    -ms-animation: scaleDown 1s ease-in-out both;
    animation: scaleDown 1s ease-in-out both;
}

.sl-trans-back-elems h2 {
    -webkit-animation: fadeOut 1s ease-in-out both;
    -moz-animation: fadeOut 1s ease-in-out both;
    -o-animation: fadeOut 1s ease-in-out both;
    -ms-animation: fadeOut 1s ease-in-out both;
    animation: fadeOut 1s ease-in-out both;
}

.sl-trans-back-elems blockquote {
    -webkit-animation: fadeOut 1s linear both;
    -moz-animation: fadeOut 1s linear both;
    -o-animation: fadeOut 1s linear both;
    -ms-animation: fadeOut 1s linear both;
    animation: fadeOut 1s linear both;
}

@keyframes roll {
    0% {
        opacity: 0;
        -webkit-transform: translateX(500px) rotate(360deg);
        -moz-transform: translateX(500px) rotate(360deg);
        -o-transform: translateX(500px) rotate(360deg);
        transform: translateX(500px) rotate(360deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        -moz-transform: translateX(0px) rotate(0deg);
        -o-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes moveUp {
    0% {
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scaleDown {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
    }
}
@keyframes roll {
    0% {
        -webkit-transform: translateX(500px) rotate(360deg);
        transform: translateX(500px) rotate(360deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes moveUp {
    0% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scaleDown {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}
@keyframes roll {
    0% {
        -moz-transform: translateX(500px) rotate(360deg);
        -o-transform: translateX(500px) rotate(360deg);
        opacity: 0;
        transform: translateX(500px) rotate(360deg);
    }
    100% {
        -moz-transform: translateX(0px) rotate(0deg);
        -o-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes moveUp {
    0% {
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scaleDown {
    0% {
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
    }
}
@keyframes scaleDown {
    0% {
        -webkit-transform: scale(1); /* Safari 3.1 to 6.0 */
        -moz-transform: scale(1); /* Firefox 3.5 to 15 */
        -o-transform: scale(1); /* Opera 10.50 to 12.00 */
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5); /* Safari 3.1 to 6.0 */
        -moz-transform: scale(0.5); /* Firefox 3.5 to 15 */
        -o-transform: scale(0.5); /* Opera 10.50 to 12.00 */
        transform: scale(0.5);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

video {
    max-width: 860px;
}

/* Media Queries for custom slider */
/***** ラップトップサイズの調整 *****/
@media screen and (max-width: 768px) {

    .sl-slider-wrapper {
        height: 300px;
    }

    .sl-slider-wrapper2,
    .sl-slider-wrapper3,
    .sl-slider-wrapper4,
    .sl-slider-wrapper5,
    .sl-slider-wrapper6,
    .sl-slider-wrapper6pg,
    .sl-slider-wrapper6pg-2,
    .sl-slider-wrapper7,
    .sl-slider-wrapper8,
    .sl-slider-wrapper9 {
        height: 100%;
    }

    /***** ラップトップサイズの調整下の部分 *****/
    .sl-slider-wrapper_under {
        height: 100%;
    }

    .sl-slider h2 {
        font-size: 36px;
    }

    .clearfix h3 {
        font-size: 1em;
    }
     .sl-slider blockquote {
        font-size: 12px;
    }

    .sl-slider-wrapper6pg-2,
    .sl-slider-wrapper6pg {
        padding: 10%;
    }

    .sl-slider-wrapper6pg-2 h1 {
        font-size: 20px;
    }

    .sl-slider-wrapper6pg-2 h3 {
        font-size: 1em;
    }

    .sl-slider-wrapper6pg, h1 {
        font-size: 16px;
    }

    .sl-slider-wrapper6pg-2 .tm_red {
        font-size: 0.8em;
    }
    .sl-slider-wrapper6pg .tm_red {
        font-size: 1em;
    }

    .sl-slider-wrapper6pg-2, .blank20px {
        font-size: 0.6em;
    }

    .sl-slider-wrapper6pg, .blank20px {
        font-size: 14px;
    }

}

/* 以降、追加CSS */

/*INDEX下部分*/
.index_top2{
    background-color: #4897d8;
    margin: 0;
    padding: 0;
    width: 100%;
}

.index_top2 img{
    width: 100%;
    max-width: 1029px;
}

.back-top2{
    background-color: #4897d8;
    padding-bottom: 3em;
}

@media (max-width: 768px) {
    .back-top2 img.kid_title {
        width: 31%;
    }
}

.index_top3{
    background-color: #ebf0fb;
    margin: 0;
    padding: 0;
    width: 100%;
}

.index_top3 img{
    width: 100%;
    max-width: 1029px;
}

.back-top3{
    background-color: #ebf0fb;
    padding-bottom: 3em;
}

.back-top3 img{
    width: 165px;
}

/*what_labra設定*/
.comment_labra{
    width: 100%;
    background-color: #f0f8ff;
    box-sizing: border-box; /* パディングとボーダーを含む */
    padding: 1em 3em 1em 3em;
    margin: auto 0;
}

.labra {
    padding-bottom: 20px;
}

.labraright {
    background-color: #f0f8ff;
    padding-bottom: 20px;
    text-align: right;
}

.mayuko {
    width: 300px;
    max-width: 300px;
    height: auto;
}

.qr{
    width: auto;
    height: auto;
}

.qr-tel {
    padding: 15px 0 15px 0;
}


/*img全幅設定*/
.wide-all {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.wide-40 {
    width: 144px;
    max-width: 144px;
    height: auto;
}
.wide100 {
    width: 200px;
}

@media screen and (max-width: 600px) {
    .wide-40 {
        width: 30px;
        max-width: 30px;
        height: auto;
    }

    .wide-900c {
        width: 100%;
        max-width: 90%;
        height: auto;
        text-align: center;
    }
}

.demo-2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #fbfcfd;
}

/* instructor背景 */
.sl-slider-wrapper2 {
    color: midnightblue;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background:#dbffff;
}

.comment-box {
    border: 2px dashed #007bff;
    padding: 15px;
    margin-bottom: 20px;
}

/*<div class="photo-grid">のアニメーションscript=photo-grid*/
/* photo-gridの初期状態を白背景に設定 */
.photo-grid {
    background-color: white;
    padding: 100px;
    opacity: 0; /* 初期状態では透明にする */
    transition: opacity 5s ease-out; /* opacityの変化をアニメーション化 */
}

.fade-in {
    opacity: 1; /* フェードインさせる */
}

.sl-slider-wrapper3 {
    width: 100%;
    height: 100%;
    padding: 10px 50px 50px 50px;
    overflow: hidden;
    position: relative;
    background: #C9FFBF; /* Fallback color for older browsers */
    background: linear-gradient(to right, #FFAFBD, #C9FFBF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-sizing: border-box;
}

.blockd_in2 {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 10px 1em 0 1em;
}

/* challenge設定 (携帯パソコン共通)*/

.sl-slider-wrapper5 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #fbe386;
}
/* 料金表とクラス設定 */
.ryoukin {
    color: #0f5966;
    width: 100%;
    padding-bottom: 50px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
}

.ryoukin2{
    color: #0f5966;
}
.ryoukin3{
    color: #2988bc;
    margin-top: 130px;
    padding: 0;
    position: relative;
}

.sl-slider-wrapper6 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #fff;
}

/*New画像の差し替え*/
 /* 通常の画像 */
.new-image {
    display: block;
    max-width: 40px;
    height: auto;
}

  /* 画面幅が600px以下の場合の画像 */
@media screen and (max-width: 600px) {
    .new-image {
        content: url('../images/new2.png');
        margin: 0 auto;
    }
}

  /* 画面幅が601px以上の場合の画像 */
@media screen and (min-width: 601px) {
    .new-image {
        content: url('../images/new_big.png');
        margin: 0 auto;
    }
}

/* 体験設定 */
.taikenpg {
    width: 100%;
    padding-bottom: 50px;
    overflow: hidden;
    position: relative;
    background: #eedae0;
}

.sl-slider-wrapper6pg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #FFEEFF;
    padding-left: 5%;
    padding-right: 5%;
    color: #464646;
    box-sizing: border-box;
}

.sl-slider-wrapper6pg-2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #fff4ff;
    padding-left: 5%;
    padding-right: 5%;
    color: #464646;
    box-sizing: border-box;
}

/* Ｑ＆Ａ設定 */
.sl-slider-wrapper7 {
    width: 100%;
    height: 6500px;
    overflow: hidden;
    position: relative;
    background-color: #fff9ff;
    box-sizing: border-box;
}
  /* 画面幅が600px以下の場合の画像 */
  @media screen and (max-width: 600px) {
    .demo-2 .sl-slider-wrapper7 {
        height: 8400px;
        }
}

  /* 画面幅が375px以下の場合の画像 */
  @media screen and (max-width: 375px) {
    .demo-2 .sl-slider-wrapper7 {
        height: 9000px;
        }
}
  /* 画面幅が320px以下の場合の画像 */
  @media screen and (max-width: 320px) {
    .demo-2 .sl-slider-wrapper7 {
        height: 10000px;
        }
}

.question {
    cursor: pointer;
    margin: 0 15px 20px 0;
    background-color: #e0ffff; /* ライトブルー */
    color: #333;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
    }
    .question:hover {
    background-color: #d3e0ff; /* ライトブルーのホバー時の色 */
    }
    .answer {
    display: none; /* 初期状態ではＡを非表示にする */
    padding: 15px;
    border: 2px solid #e0ffff; /* ライトブルー */
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 10px 0 15px 30px; /* Qからのマージンを追加 */
    }

    .q_a_btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4CAF50; /* グリーン */
        color: white;
        text-align: center;
        text-decoration: none;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .btn:hover {
        background-color: #45a049; /* ダークグリーン */
    }

/* サイトマップ設定 */
.demo-2 .sl-slider-wrapper8 {
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 5px;
    color: #ffffcc;
    overflow: hidden;
    position: relative;
    background: #333 url(https://studio-labra.net/images/site1.jpg) center center / cover no-repeat;
    box-sizing: border-box;
}


.demo-2 .sl-slider-wrapper8 a {
    color: #ffffcc;
}

/* w_labra設定 */
.demo-2 .sl-slider-wrapper9 {
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    background: #F0F8FF;
    box-sizing: border-box;
}

/**** Access設定は、ggmapのみ ****/

/*クラス色分け*/
.demo-2 .sl-slider-wrapper4 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/***** クラス部品設定 ******/
.blank10px {
    margin-top: 10px;
}

div.blank10px p {
    margin: 25px 0;
    padding: 0 5% 0 0;}

div.blank10px span {
    margin: 30px 5px 30px 0;
    padding: 0 5% 0 0;}

.blank20px {
    margin-top: 20px;
    padding: 0 5% 0 0;
}

div.blank20px p {
    margin: 25px 0;
    padding: 0 5% 0 0;
}

div.blank20px span {
    margin: 10px 5px 10px 0;
}


/*テーブルスクロールバー設定*/
.table-container {
    overflow-x: auto;
}
/*テーブルスクロールバー設定終了*/

/*写真内にテキスト・黒背景30％設定*/
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2px 2px; /* 左右の余白を作成(白枠) */
    padding: 0.5%;
    background: #fff;	/*縁の部分の色*/
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);	/*写真につける影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.3は色が30%出た状態。*/
}

.photo-grid .photo-container {
    flex-basis: calc(80% / 3); /* 画面の大きさに合わせて、写真が3つ横並びになるように指定 */
    box-sizing: border-box;
}

.photo-container {
    position: relative
}

.photo-container img {
    display: block;
    max-width: 159px;
    height: auto;
    margin: 0; /* 右と下に5pxの余白を設定 */
}

.text-container {
    position: absolute;
    bottom: 0;
    width: 159px;
    height: 38.2%;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

.text-container .text1 {
    line-height: 1em;
    margin: 0;
    text-align: left;
    font-size: 20px;
}

.text-container .text2 {
    line-height: 1em;
    margin: 0;
    text-align: right;
    font-size: 1em;
}

/*写真内にテキスト設定・黒背景30％終了*/

/*クラス案内用写真内にテキスト・黒背景30％設定*/
.photo-grid2 {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    margin: 0 -5px; /* 左右の余白を作成 */
    max-width: 400px;
}

.photo-grid2 .photo-container2 {
    flex-basis: calc(80% / 4); /* 画面の大きさに合わせて、写真が2つ横並びになるように指定 */
    margin-bottom: 20px; /* 下に余白を設定 */
    box-sizing: border-box;
}

.photo-container2 {
    position: relative;
}

.photo-container2 img {
    display: block;
    max-width: 75px;
    height: auto;
    margin: 0 5px 5px 0; /* 右と下に5pxの余白を設定 */
}

.text-container2 {
    position: absolute;
    bottom: 0;
    width: 75px;
    height: 38.2%;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 5px;
    box-sizing: border-box;
}

.text-container2 .text2-1 {
    line-height: 1em;
    margin: 0;
    text-align: left;
    font-size: 14px;
}
.text-container2 .text2-2 {
    line-height: 1em;
    margin: 0;
    text-align: left;
    font-size: 12px;
}
/*クラス案内用写真内にテキスト設定・黒背景30％終了*/

/*余白設定*/

.blank_top_20px{
    margin-top: 20px;
}
.blank_padding_top_20px{
    padding-top: 20px;
}
.blank_left_10px {
    margin-left: 10px;
}

.blank_left_20px {
    margin-left: 10px;
}

.blank20_20px {
    padding: 0 5%;
}


/*クラスシャドウpadding設定*/
.kid,
.junior,
.general,
.open,
.mix,
.kid_title,
.junior_title,
.general_title,
.open_title,
.mix_title {
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
}

.kid,
.junior,
.general,
.open,
.mix {
    padding: 10px;
}

.kid,
.kid_title {
    background-color: #ffffd6;
    width: 150px;
}

.maru_kids{
    font-weight: bold;
    color: #ffffd6;
}


.junior,
.junior_title {
    background-color: #eaffd6;
}

.maru_junior{
    font-weight: bold;
    color: #eaffd6;
}

.general,
.general_title {
    background-color: #d6ffff;
}

.maru_general{
    font-weight: bold;
    color: #d6ffff;
}

.open,
.open_title {
    background-color: #d6d6ff;
}

.maru_open{
    font-weight: bold;
    color: #d6d6ff;
}

.maru_kids{
    font-weight: bold;
    color: #ffffd6;
}

.mix,
.mix_title {
    background-color: #ffd6ff;
}

/*クラスジャンル画像用*/
.classgenre {
    max-width: 120px;
    height: auto;
    margin: 0;
}

/*クラスジャンル画像用*/
.classgenre2 {
    max-width: 50px;
    height: auto;
    margin: 0;
}

/*クラスジャンル画像用*/
.back_kid{
    background: url(https://studio-labra.net/images/kidsclass.png) no-repeat 10px center / 50px auto;
    background-color: #ffffd6;
    padding: 10px 10px 10px 70px;
    border: 1px solid #333;
}

.back_junior{
    background: url(https://studio-labra.net/images/juniorsclass.png) no-repeat 10px center / 50px auto;
    background-color: #eaffd6;
    padding: 10px 10px 10px 70px;
    border: 1px solid #333;
}


.back_teen{
    background: url(https://studio-labra.net/images/teensclass.png) no-repeat 10px center / 50px auto;
    background-color: #d6ffff;
    padding: 10px 10px 10px 70px;
    border: 1px solid #333;
}


.back_mix{
    background: url(https://studio-labra.net/images/mixclass.png) no-repeat 10px center / 50px auto;
    background-color: #d6d6ff;
    padding: 10px 10px 10px 70px;
    border: 1px solid #333;
}

/*クラスcolor設定*/
.red {
    color: #ff0000;
    font-weight: bold;
}
.redpink {
    color: #d83473;
    font-weight: bold;
}
.cherrypink {
    color: #eb6ea0;
    font-weight: bold;
}
.pastelpink {
    color: #ffa3ff;
    font-weight: bold;
}
.orange  {
    color: #ff8000;
    font-weight: bold;
}

.skyblue {
    color: skyblue;
    font-weight: bold;
}

.cobaltblue {
    color: #0068b7;
    font-weight: bold;
}
.midnightblue{
    color: midnightblue;
}

.redpink0 {
    color: #d83473;
}

.white{
    color: #fff;
}

.purple {
    color: #d6b6fa;
}

.green {
    color: #34bf49;
}

.pastelpink0 {
    color: #ffa3ff;
}

.skyblue0 {
    color: skyblue;
}

.black-666{
    color: #666;
}

.kid1 {
    color: #34bf49;
    padding: 10px;
}

.jazz {
    color: #8e43e7;
    padding: 10px;
}

.kpop {
    color: #ea7500;
    padding: 10px;
}

.hiphop {
    color: #2C9F45;
    padding: 10px;
}

.rg {
    color: #d06da5;
    padding: 10px;
}

.mix1 {
    color: #832561;
    padding: 10px;
}

.white_bk {
    background-color: #fff;
}

.gray_bk {
    background-color: #f2f3f4;
}

/*****FONTstyle*****/
.futoji0 {
    font-weight: bold;
}

.futoji{
    font-weight: bold;
    font-size: 1.2em;
}
.marker-blue {
    background-image: linear-gradient(transparent 80%, lightblue 0%)
}
.marker-cornsilk {
    background-image: linear-gradient(transparent 80%, #fff8dc 0%)
}
.marker-Yellow {
    background-image: linear-gradient(transparent 80%, Yellow 0%)
}
.marker-green {
    background-image: linear-gradient(transparent 80%, #baf096 0%)
}
.marker-blue {
    background-image: linear-gradient(transparent 80%, #64c1dd 0%)
}
.marker-purple2 {
    background-image: linear-gradient(transparent 80%, #7701fd 0%)
}
.marker-purple {
    background-image: linear-gradient(transparent 80%, #d3affd 0%)
}
.marker-pink {
    background-image: linear-gradient(transparent 80%, rgb(248, 154, 252) 0%)
}
.marker-orange {
    background-image: linear-gradient(transparent 80%, rgb(255, 209, 123) 0%)
}
.marker-red {
    background-image: linear-gradient(transparent 80%, #832561 0%)
}

/*ライン設定*/
.futosen-yellow-under{
    border-bottom: 3px solid yellow;
}
.futosen-redpink-under{
    border-bottom: 5px solid #d83473;
}
.double-green{
    border: 3px double #34bf49;
}
.double-pink{
    border: 3px double #ff3d9e;
}
.double-blue{
    border: 3px double #0068b7;
    padding: 3px;
}
.border-plaster{
    border: 2px solid #F4EADE;
}

.fontback1-blue{
    background-image: linear-gradient(transparent 2%, #2989BC 0%)
}
.fontback1-sea{
    background-image: linear-gradient(transparent 2%, #2F496E 0%)
}
.fontback1-plaster{
    background-image: linear-gradient(transparent 2%, #F4EADE 0%)
}
.fontback1-coral{
    background-image: linear-gradient(transparent 2%, #ED8C72 0%)
}

.font-torikeshi {
    text-decoration: line-through red; /* 線の色を赤に指定 */
}

.fontback_kd {
    background-color: #ffffd6;
    padding: 1em 10px 1em 1em;
    border-right: 2px solid #fff;
}
.fontback_ju {
    background-color: #eaffd6;
    padding: 1em 10px 1em 1em;
    border-right: 2px solid #fff;
}
.fontback_gen {
    background-color: #d6ffff;
    padding: 1em 10px 1em 1em;
    border-right: 2px solid #fff;
}
.fontback_op {
    background-color: #d6d6ff;
    padding: 1em 10px 1em 1em;
    border-right: 2px solid #fff;
}

.dotted{
    border-bottom: 5px dotted yellow;
}

.dot_circle{
    border: 5px dotted yellow;
    background-color: #FFF;
}

.dot_circle_space{
    padding: 3px;
    margin-left: 1em;
    margin-top: 0;
    margin-bottom: 10px;
}

.fontbold{
    font-weight: bold;
}

.fontsize-1{
    font-size: 0.8em;
}

.fontsize-2{
    font-size: 0.6em;
}

.fontsize-10px{
    font-size: 10px;
}

.fontsize-1em{
    font-size: 1em;
}

.fontsize-1_38em{
    font-size: 1.38em;
}

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

.fontsize-16-12 {
    font-size: 16px;
}

.fontsize-14-12 {
    font-size: 14px;
}

.fontsize-14-10 {
    font-size: 14px;
}

.fontsize-12-10px {
    font-size: 12px;
}
@media screen and (max-width: 600px) {
    .fontsize-16-12 {
        font-size: 12px;
    }
    .fontsize-14-12 {
        font-size: 12px;
    }
    .fontsize-14-10 {
        font-size: 10px;
    }
    .fontsize-12-10px {
        font-size: 10px;
    }
}

.font-family1{
    font-family: Arial, Helvetica, sans-serif;}
.font-family2{
    font-family:Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,
    "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
.font-family3{
    font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Meiryo", sans-serif;
}

.genre-tp {
    color: #137182 ;
}

.padding_0{
    padding: 0;
}
.padding_top0_1em{
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
}
.padding_all_1em{
    padding: 1em;
}

/*****FONTstyle場所*****/

.bottom{
    vertical-align:bottom;
}

/*****以降、back to topボタンCSS*スマホで見た時*****/
#page_top {
    width: 90px;
    height: 90px;
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0.6;
}

#page_top a {
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #2e7bff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -40px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

#page_top a::after {
    content: 'PAGE TOP';
    font-size: 13px;
    color: #2e7bff;
    position: absolute;
    top: 45px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

/*youtube設定*/
.box-1 {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 のアスペクト比 */
}

.box-1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*左から出てくるリスト設定*/
.blockd_in {
    margin-top: 40px;
}


/*h1ライン*/
h1.info_dt_taiken {
    font-size: 18px;
    font-size: calc(1vw + 1vh + 0.5vmin); /* 任意のフォントサイズの計算式 */
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #6eb7ff;
    border-bottom: solid 4px #59acff;
    border-radius: 9px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
}

h1.info_dt_set1 {
    font-size: 18px;
    padding: 0.5em 1em;
    margin: 3em 0;
    background: #ffb7ff;
    border-bottom: solid 4px #ff99ff;
    border-radius: 9px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
}

h1.info_dt_set2 {
    font-size: 18px;
    padding: 0.5em 1em;
    margin: 3em 0;
    background: #a7e7b7;
    border-bottom: solid 4px #85de9b;
    border-radius: 9px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
}

h1.info_dt_set3 {
    font-size: 18px;
    padding: 0.5em 1em;
    margin: 3em 0;
    background: #ddbbff;
    border-bottom: solid 4px #cf9fff;
    border-radius: 9px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
}

h1.info_dt_set_topics {
    font-size: 18px;
    padding: 0.5em 1em;
    margin: 3em 0;
    background: #ffebbb;
    border-bottom: solid 4px #ffe89f;
    border-radius: 9px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
}

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

dt.info_dt_taiken {
    font-size: 16px;
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #6eb7ff;
    border-bottom: solid 6px #3f87ce;
    border-radius: 9px;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.0em;
}
dt.info_dt_ekimae {
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 0;
    padding-left: 1.0em;
}

dt.info_dt_ekimae2 {
    font-size: 1.25em;
    font-weight: bold;
    text-align: left;
    margin-top: 1.5em;
    margin-bottom: 0;
    padding-left: 1.0em;
}

dd.info_dd {
    line-height: 200%;
    text-align: left;
    margin-bottom: 1em;
    padding-left: 2em;
    font-size: 14px;
}

dd.info_dd_video {
    line-height: 200%;
    text-align: left;
    margin-bottom: 1em;
    padding-left: 0;
    font-size: 14px;
}
dd.info_dd_video_taiken {
    line-height: 200%;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 0;
    font-size: 14px;
    color: #28406c;
}

dd.info_dd_ekimae {
    font-size: 0.8em;
    font-weight: normal;
    line-height: 200%;
    text-align: left;
    margin-bottom: 1em;
    padding-left: 3.5em;
}

div.orikae{
    overflow-wrap: break-word;
    width: 90%;
}

.btn-square-pop {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;
    /*背景色*/
    border-bottom: solid 2px #d27d00;
    /*少し濃い目の色に*/
    border-radius: 4px;
    /*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}

.btn-square-pop:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.btn-square-pop2 {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    font-size: 0.8em;
    color: #FFF;
    background: #fd9535;
    /*背景色*/
    border-bottom: solid 2px #d27d00;
    /*少し濃い目の色に*/
    border-radius: 4px;
    /*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}

.btn-square-pop2:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.tm {
    padding: 0 0.5em;
}

.tm_red {
    padding: 0.5em 0;
    color: firebrick;
    font-size: 1.25em;
}

.tm_red2 {
    padding: 0.5em 0;
    color: firebrick;
}

.tm_mini {
    padding: 0;
    color:#126978;
    font-size: 0.5em;
}

.tm_mini2 {
    padding: 0;
    color:#f0f8ff;
    font-size: 0.5em;
}

.del {
    background-image: linear-gradient(#fe3464, #fe3464);
    background-position: 0 50%;
    background-size: 100% 2px;
    background-repeat: repeat-x;
    color: #888;
    margin: 0 0.4em;
    text-decoration: none;
}

/*cover_leftがfloat、margin取得、付箋エリア*/
dt.year {
    display: inline-block; /* インラインブロック要素として配置 */
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    margin-bottom: 1em;
    padding: 0.5em 2em 0.5em 2em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: double 1em #ffc06e;
    border-right: solid 2em #ffc06e;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    width: max-content; /* 文字と指定された余白分の長さに設定 */
    }


dd.cup {
    line-height: 200%;
    text-align: left;
    margin-bottom: 1em;
    padding-left: 1em;
}

/***********　MENUボタン設置　************/
header {
    padding: 10px 5px;
}
.codrops-top {
    display: none;
}

#nav-drawer {
    position: relative;
}


@media screen and (max-width: 600px) {
.codrops-top {
    display: block;
}
}


/*チェックボックス等は非表示に*/
.nav-unshown {
    display: none;
}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span,
#nav-open span:before,
#nav-open span:after {
    padding: 0 5px;
    position: fixed;
    top: 10px;
    left: 1em;/*線の太さ*/
    height: 30px;
    /*長さ*/
    width: 85px;
    border-top: double 5px #92aac7;
    border-bottom: double 5px #92aac7;
    color: #d0e1f9;
    background: #1e1f26;
    display: block;
    content: ' LABRA MENU ';
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

#nav-open span:before {
    bottom: -8px;
}

#nav-open span:after {
    bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;
    /*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;
    /*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
    margin-top: 5em;
    margin-bottom: 10px;
    padding: 10px 10px;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    /*最前面に*/
    width: 90%;
    /*右側に隙間を作る（閉じるカバーを表示）*/
    max-width: 200px;
    /*最大幅（調整してください）*/
    height: 600px;
    background: #000;
    background: rgba(0, 0, 0, 0.3);    /*背景色*/
    transition: .3s ease-in-out;
    /*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
    /*左に隠しておく*/
    box-sizing: border-box;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;
    /*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    /*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}

/* MANU内のデザイン設定*/
#nav-content a.menu1 {
    font-size: 1.5em;
    margin: 0 0 2px;
    padding: 5px 5px;
    font-weight: bold;
    text-align: left;
    width: 100%;
    color: #fff5ee;
    border-left: double 3px #4cb5f5;
    border-bottom: solid 1px #4cb5f5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

#nav-content a.menu2 {
    font-size: 1.5em;
    padding: 3px 5px;
    margin: 8px 0 8px 0;
    font-weight: bold;
    text-align: left;
    width: 100%;
    color: #ee693f;
    border-bottom: solid 1px #f69454;
    border-left: solid 3px #f69454;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/****** MENUの中の電話連絡用 ******/
#nav-content a.menu3 {
    font-size: 1.5em;
    padding: 3px 5px;
    margin: 8px 0 8px 0;
    font-weight: bold;
    text-align: left;
    width: 100%;
    color: #fff5ee;
    border-bottom: solid 1px #30be30;
    border-left: solid 3px #30be30;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}


/****** MENU表示設定終了 ******/

/****** 右寄せ ******/
div .end-right {
    width: auto;
    height: 100px;
    text-align: right;
    font-weight: bold;
    margin-right: 0.5%;
    box-sizing: border-box;
}

div .end-right2 {
    width: auto;
    height: 100px;
    text-align: right;
    font-weight: bold;
    margin-right: 100px;
    box-sizing: border-box;
}

/*****  上に戻るデザイン  *****/

.end {
    font-size: 0.8em;
    font-weight: bold;
    margin: 2em auto;
    padding: 1em;
    width: 90%;
    background-color: #f1f1f1;
    /* 背景色 */
    box-shadow: 0 0 5px 1px #ccc;
    box-sizing: border-box;
}

/**サイトマップ用**/
.end2 {
    font-size: 0.8em;
    font-weight: bold;
    margin: 2em auto;
    padding: 1em;
    width: 90%;
    background-color: #3399ff;
    /* 背景色 */
    box-shadow: 0 0 5px 1px #ccc;
    box-sizing: border-box;
}

/**     footerナビゲーションバー　**/
footer {
    margin-bottom: 48px;
    height: auto;
}

footer {
    display: none;
}

.global-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: rgba(51, 153, 255, 0.68);
}

.nav-list {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    list-style: none;
    text-align: center;
}

.nav-item {
    display: table-cell;
    border: solid 1px gray;
    padding: 4px 0;
}

.nav-item a {
    text-decoration: none;
}

.nav-item i {
    display: block;
    font-size: 30px;
}

.nav-item a span {
    display: block;
    font-size: 12px;
}

.nav-item2 {
    display: table-cell;
    border: solid 1px gray;
    padding: 4px 0;
}

.nav-item2 a {
    text-decoration: none;
}

.nav-item2 i {
    display: block;
    font-size: 30px;
}

.nav-item2 a span {
    display: block;
    font-size: 12px;
}

/****** footer設定終了 ******/

/*****　質問コーナーのボックス設定　*****/

.kotae {
    padding: 1em;
    margin: 0 0 4em 1em;
    background: -webkit-repeating-linear-gradient(-45deg, #fff3ee, #fff3ee 2px, #ffdced 2px, #ffdced 7px);
    background: repeating-linear-gradient(-45deg, #fff3ee, #fff3ee 2px, #ffdced 2px, #ffdced 12px);
    border: solid 3px #ffdced;
}

.kotae_bun{
    background-color: #ffdced;
    padding: 5px 3px;
}

.kotae p {
    margin: 0;
    padding: 0;
}

dt.mondai {
    position: relative;
    background-color: #fff;
    margin: 1em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}

dt.mondai .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

dt.mondai p {
    margin: 0;
    padding: 0;
}

/***** 電話設定 ******/
@media screen and (min-width: 667px) {
    a[href^="tel:0488383483"] {
        pointer-events: none;
    }
}

/***** /　電話設定終了 ******/

/*****INDEX表*******/

table.class_table {
    border-collapse:  collapse; /* セルの線を重ねる */
    width: 98%;
    background-color: #cdefff;  /* 背景色指定 */
    border: solid 3px #6d91d4;  /* 枠線指定 */
    box-sizing: border-box;
}

    table.class_table th{
        font-size: 16px;
        font-style: normal;
        color: #6d91d4;
        background-color: #cdefff;  /* 背景色指定 */
        border: solid 2px #aaa;  /* 枠線指定 */
    }

    table.class_table th,td {
        border: solid 2px #e6e6e6;  /* 枠線指定 */
        padding: 10px;      /* 余白指定 */
        }

    table.class_table td {
        font-size:12px;
        background-color: #fff;  /* 背景色指定 */
        border: solid 2px  #e6e6e6;  /* 枠線指定 */
        }

        .mini_font{
            font-size:10px;
        }


/***** /　INDEX表終了 ******/

/*****クラスページクラス表*******/

.h3-hr {
    background: url(../images/line3.png) no-repeat center;
    padding: 20px 10px;
    text-align: center;
}

.width_100-blank_top_bottom_20px {
    max-width: 100%;
    margin: 20px auto;
    display: flex; /* 親要素をフレックスボックスに設定 */
    justify-content: center; /* センタリング設定 */
}

/* クラス名が「class_time」のテーブルのスタイル */
.timetable .class_time {
    width: 100%;
    max-width: 1500px;
    border-collapse: collapse; /* セルの境界線が重ならないようにする */
    border-spacing: 0; /* セルの間隔を0に設定 */
    margin: 0 auto;
}

/* クラス名が「class_time」のテーブルの曜日見出しのスタイル */
.timetable .class_time th {
    background-color: #fce4ec; /* 上品なピンク色 */
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    width: 30px;
    font-family: Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,
    "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}

/* クラス名が「class_time」のテーブルの時間帯・科目のスタイル */
.timetable .class_time td {
    background-color: #fff; /* 白背景 */
    border-top: 1px solid #ddd; /* 上部の境界線 */
    border-bottom: 1px solid #ddd; /* 下部の境界線 */
    padding: 10px 0 10px 65px; /* 上下左右に10px のパディング */
    text-align: left;
    vertical-align: middle; /* 上下中央に揃える */
    position: relative; /* 相対位置指定 */
    height: 85px;
    font-family:  "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 12px;
    box-sizing: border-box;
}

/* 最終行のtdだけ上寄せ左寄せにする */
.timetable .class_time tr:last-child td {
    vertical-align: top; /* 上寄せ */
    text-align: left; /* 左寄せ */
    padding: 15px; /* 左側の余白を追加 */
}

/* 指定したtdのテキストを中央に配置する */
.timetable .class_time .center-text {
    text-align: center;
}

/* 携帯サイズの場合は上下のパディングを20pxに調整 */
@media screen and (max-width: 768px) {
    .timetable .class_time th {
        display: block;
        width: 100%;
    }
    .timetable .class_time th:not(:first-child) {
        display: none;
    }
    .timetable .class_time td {
        display: block;
        width: 100%;
        text-align: center;
    }
    .timetable .class_time td:first-child {
        text-align: left;
    }
    .timetable .class_time td {
        padding: 20px 0; /* 上下に20px、左右に0px のパディング */
        height: 100px;
        box-sizing: border-box;
    }
    .timetable .class_time td.studio-jpg {
        padding: 20px 0; /* 上下に20px、左右に0px のパディング */
        height: 100%;
        box-sizing: border-box;
    }
    /* 最終行のtdだけ上寄せ左寄せにする */
    .timetable .class_time tr:last-child td {
        height: 100%;
    }
}

/*年齢別クラス表（javascriptあり）*/
.age_contents > div {
    display: none;
}

.age_contents > div.show {
    display: block;
}

.age_contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* センタリング設定 */
    max-width: 1200px;
    margin: 0 auto;
}

.age_contents > div {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

/*年齢セレクターレイアウト調整*/
.age_selector {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* 横スクロールを可能にする */
    -webkit-overflow-scrolling: touch; /* iOSのスムーススクロールを有効にする */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: flex-start; /* 画像を上部に寄せる */
}

.age_selector img {
    width: 150px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .age_selector img {
        width: 100%;
    }
}

/*年齢ジャンル別表示のレイアウト調整*/

.age_contents img {
    height: auto;
    margin: 5px;
    box-sizing: border-box;
}

.age_contents img.instructor {
    width: 130px;
    margin: 5px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .age_contents img {
    width: 200px;
    }
}

@media (max-width: 767px) {
    .age_contents img {
    width: 80px;
    }
    .age_contents{
        font-size: 12px;
    }
    .age_contents img.instructor {
        width: 80px;
    }
}

@media screen and (max-width: 768px) {
    .age_contents > div {
    flex-basis: calc(33% - 20px);
    }
}

@media screen and (max-width: 480px) {
    .age_contents > div {
    flex-basis: calc(50% - 20px);
}
}

/* 最終行の要素に対して左寄せのマージンを設定 */
.age_contents > div:nth-last-child(-n+3) {
    margin-left: 0;
}

/*予約CSS*/
/* ボタンの基本スタイル */

  /* ボタンの基本スタイル */
a.call_contact {
    display: inline-block;
    padding: 10px 20px;
    background-color: #FF69B4; /* 紫ピンク系のレッド */
    color: #FFF; /* 白色 */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    margin: 0 10px;
}

  /* ホバー時のスタイル */
a.call_contact:hover {
    background-color: #FF1493; /* より濃い紫ピンク系のレッド */
    color: #fffd69; /* より濃いピンク系 */
}

@media screen and (max-width: 600px) {
    a.call_contact {
        margin: 0 0;
        font-size: 8px;
    }
}


.wide_250px {
    max-width: 250px;
}

/*クラス表整理後の部品*/
span.b {
    padding: 1px;
    font-weight: bold;
    border-bottom: solid 3px;
    border-color: #951d61;

}.txt2 {
    text-align: left;
    font-size: 0.85em;
}

.price {
    text-align: right;
    color: #167F92;
    font-weight: bold;
}

.non {
    background: #fff
}

.center {
    text-align: center;
}

.pat_left10px {
    text-align: left;
    padding-left: 10px;
}

.pat_left20px {
    text-align: left;
    padding-left: 20px;
}

/***ループ広告***/
.loop_wrap {
    display: flex;
    width: 100vw;
    height: 80px;
    overflow: hidden;
}

.loop_wrap ul {
    width: auto;
    height: 80px;
}

.loop_wrap ul {
    display: flex;
    width: auto;
    height: 80px;
}

.loop_wrap img {
    width: auto;
    height: 80px;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-600%);
    }
}
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-600%);
    }
}

.loop_wrap img:first-child {
    animation: loop 15s -25s linear infinite;
}
  
  .loop_wrap img:last-child {
    animation: loop2 15s linear infinite;
}
.loop_wrap:hover ul {
    animation-play-state: paused;
  }