@charset "UTF-8";

/* detail | ページ固有スタイル
--------------------------------------------------*/

.contents {
    margin: 40rem 0;
    background: white;
    padding: 30rem 60rem;
    border-radius: 10rem;
}

.badge {
    background: #003a94;
    color: white;
    padding: 10rem 30rem 10rem 50rem;
    font-size: 12rem;
    position: relative;
    margin-top: 10rem;
}

.studio-header img {
    position: absolute;
    width: 33rem;
    margin-top: -10rem;
    margin-left: 10rem;
    z-index: 1;
}

.studio-title {
    font-size: 26rem;
    font-weight: bold;
    color: #c90000;
    margin-top: 25rem;
}

.studio-content {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    max-width: 100%;
    width: 100%;
}

.slider-img {
    width: 100%;
    position: relative;
    text-align: center;
    margin-top: 40rem;
}

.slider-img img {
    width: -webkit-fill-available;
}

.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    color: #4b4b4b;
    border-color: #707070;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
}

.arrow-left::before {
    font: var(--fa-font-solid);
    content: "\f137";
    font-size: 40rem;
    position: absolute;
    left: 20rem;
    background-color: #ffffff;
    border-radius: 50%;
}

.arrow-right::before {
    font: var(--fa-font-solid);
    content: "\f138";
    font-size: 40rem;
    position: absolute;
    right: 20rem;
    background-color: #ffffff;
    border-radius: 50%;
}

.studio-info {
    text-align: left;
    display: flex;
}

.info-left {
    width: 40%;
    margin-top: 40rem;
}
.info-right {
    width: 60%;
    margin-top: 40rem;
}

.info-title {
    font-size: 12rem;
    font-weight: 400;
    margin-bottom: 10rem;
}

.tags1 {
    display: grid;
    grid-template-columns: repeat(5, 17%);
    grid-template-rows: repeat(4, 38rem);
    gap: 10rem;
    margin-bottom: 30rem;
}

.tags1-img1 {
    background-image: url(../img/common/break.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img2 {
    background-image: url(../img/common/hiphop.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img3 {
    background-image: url(../img/common/lock.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img4 {
    background-image: url(../img/common/pop.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img5 {
    background-image: url(../img/common/house.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img6 {
    background-image: url(../img/common/k-pop.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img7 {
    background-image: url(../img/common/jazz.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img8 {
    background-image: url(../img/common/girlshiphop.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img9 {
    background-image: url(../img/common/jazzhiphop.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img10 {
    background-image: url(../img/common/animation.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img11 {
    background-image: url(../img/common/soul.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img12 {
    background-image: url(../img/common/waack.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img13 {
    background-image: url(../img/common/punking.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img14 {
    background-image: url(../img/common/newjackswing.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img15 {
    background-image: url(../img/common/bebop.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img16 {
    background-image: url(../img/common/vogue.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img17 {
    background-image: url(../img/common/krump.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img18 {
    background-image: url(../img/common/contemporary.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img19 {
    background-image: url(../img/common/others.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2 {
    display: grid;
    grid-template-columns: repeat(4, 17%);
    grid-template-rows: repeat(2, 38rem);
    gap: 10rem;
    margin-bottom: 30rem;
}

.tags2-img1 {
    background-image: url(../img/common/number3.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2-img2 {
    background-image: url(../img/common/number5.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2-img3 {
    background-image: url(../img/common/number6.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2-img4 {
    background-image: url(../img/common/number9.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2-img5 {
    background-image: url(../img/common/number18.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2-img6 {
    background-image: url(../img/common/number60.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags2-img7 {
    background-image: url(../img/common/numberothers.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags3 {
    display: grid;
    grid-template-columns: repeat(3, 17%);
    grid-template-rows: repeat(2, 38rem);
    gap: 10rem;
    margin-bottom: 20rem;
}

.tags3-img1 {
    background-image: url(../img/common/money.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags3-img2 {
    background-image: url(../img/common/credit.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags3-img3 {
    background-image: url(../img/common/paypay.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags3-img4 {
    background-image: url(../img/common/docomo.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags3-img5 {
    background-image: url(../img/common/rakuten.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags3-img6 {
    background-image: url(../img/common/payothers.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.social-links {
    display: flex;
    margin-top: 45rem;
    margin-bottom: 40rem;
}

.social-links img {
    width: 50rem;
    margin: 0 5rem;
}

.studio-table1 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20rem;
}

.studio-table1 th,
.studio-table1 td {
    border: 1rem solid #cecece;
    padding: 10rem;
    text-align: left;
    font-size: 12rem;
    font-weight: 400;
}

.studio-table1 th {
    background-color: #f5f5f5;
    width: 30%;
}

.studio-table2 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20rem;
}

.studio-table2 th,
.studio-table2 td {
    border: 1rem solid #cecece;
    padding: 10rem;
    text-align: left;
    font-size: 12rem;
    font-weight: 400;
}

.studio-table2 th {
    background-color: #f5f5f5;
    width: 30%;
}

.tel a {
    color: #c90000;
    border-bottom: 1rem solid;
}

.studio-info-container {
    display: none;
}

.studio-message {
    font-size: 20rem;
    font-weight: bold;
    color: #c90000;
    margin-top: 30rem;
}

.message {
    font-size: 14rem;
    margin-top: 10rem;
}

.message-border {
    width: 100%;
    height: 1rem;
    background: #cecece;
    margin: 30rem 0;
}

@media screen and (max-width: 779px) {
    .contents {
        padding: 20rem 15rem;
        border-radius: 0;
    }

    .badge {
        background: #003a94;
        color: white;
        padding: 5rem 20rem 5rem 40rem;
        font-size: 10rem;
    }

    .studio-header img {
        width: 26rem;
        margin-top: -3rem;
        margin-left: 7rem;
    }

    .studio-title {
        font-size: 16rem;
        margin-top: 20rem;
    }

    .slider-img {
        width: 95%;
        margin-top: 20rem;
    }

    .slider-nav {
        position: absolute;
        top: 50%;
        width: 100%;
        display: flex;
        color: #4b4b4b;
        border-color: #707070;
        font-weight: bold;
        cursor: pointer;
    }

    .arrow-left::before {
        font-size: 30rem;
        left: 0;
    }

    .arrow-right::before {
        font-size: 30rem;
        right: 0;
    }

    .studio-info {
        flex-direction: column;
    }

    .info-left {
        width: 100%;
        margin-top: 20rem;
    }
    .info-right {
        width: 100%;
        margin-top: 20rem;
    }

    .info-title {
        margin-bottom: 10rem;
    }

    .tags1 {
        grid-template-columns: repeat(5, auto);
        gap: 5rem;
    }

    .tags2 {
        grid-template-columns: repeat(5, auto);
        gap: 5rem;
    }

    .tags3 {
        grid-template-columns: repeat(5, auto);
        gap: 5rem;
    }

    .social-links {
        display: flex;
        margin-top: 20rem;
        margin-bottom: 0;
        width: fit-content;
        margin: 0 auto;
    }

    .social-links img {
        width: 45rem;
        margin: 0 7rem;
    }

    .studio-info-container {
        display: block;
        background: white;
    }

    .table-item {
        padding: 10rem 0;
        border-bottom: 1rem solid #cecece;
    }

    .table-title {
        font-size: 14rem;
        font-weight: bold;
    }

    .table-text {
        font-size: 14rem;
        font-weight: 400;
    }

    .studio-table1 {
        display: none;
    }

    .studio-table2 {
        display: none;
    }

    .studio-message {
        font-size: 16rem;
        margin-top: 30rem;
    }

    .message {
        font-size: 12rem;
        margin-top: 10rem;
    }
}

.access {
    margin-top: 50rem;
}

.access-title {
    font-size: 20rem;
    font-weight: bold;
    color: #c90000;
    text-align: center;
}

.access iframe {
    height: 352rem;
    width: 100%;
    margin: 10rem 0;
}

.access-content {
    width: fit-content;
    margin: 8rem auto 50rem auto;
}

.access-detail {
    font-size: 12rem;
    font-weight: bold;
    margin-bottom: 5rem;
}

.access-way {
    font-size: 12rem;
    font-weight: 400;
}

.access-button {
    width: 70%;
    display: block;
    background: #c90000;
    color: white;
    text-align: center;
    padding: 20rem;
    margin: 20rem auto 60rem auto;
    border-radius: 8rem;
    font-size: 18rem;
    font-weight: bold;
    text-decoration: none;
}

.access-button:hover {
    background: #ff4040;
}

.access-icon::before {
    font: var(--fa-font-solid);
    content: "\f35d";
    font-size: 20rem;
    position: absolute;
    margin-left: 8%;
    margin-top: 4rem;
}

@media screen and (max-width: 779px) {
    .access {
        margin-top: 80rem;
    }

    .access-title {
        font-size: 16rem;
        text-align: left;
    }

    .access iframe {
        height: 150rem;
    }

    .access-content {
        width: 100%;
        margin: 0 auto 20rem auto;
    }

    .access-button {
        width: 100%;
        padding: 15rem;
        font-size: 16rem;
        margin: 0 auto 10rem auto;
    }

    .access-icon::before {
        font-size: 12rem;
        margin-left: 10%;
        margin-top: 6rem;
    }
}