@charset "UTF-8";

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

.filter-container {
    margin: 62rem auto 40rem auto;
    padding: 40rem 0 27rem 0;
    background: white;
    border-radius: 10rem;
}

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

.filter-title {
    color: #c90000;
    font-size: 18rem;
    font-weight: bold;
    margin-bottom: 14rem;
}

.filter-all {
    width: 80%;
    margin: 20rem auto 0 auto;
}

.filter-checkbox {
    transform: scale(1.9);
    margin-right: 11rem;
}
.filter-media {
    margin-bottom: 15rem;
}
@media screen and (min-width: 780px) {
    .filter-media {
        display: flex;
        flex-wrap: wrap;
        gap: 12rem 16rem; /* row gap / column gap */
        margin-left: 7rem;
    }
    .filter-media label {
        white-space: nowrap;
        flex: 0 0 auto; /* 内容幅によってサイズ決定 */
        padding-right: 15rem;
    }
}

.filter2 {
    display: grid;
    grid-template-columns: repeat(7, auto);
    grid-template-rows: 37rem;
    margin-left: 7rem;
}

.filter1 label {
    white-space: nowrap;
    font-size: 14rem;
}

.filter11 label {
    white-space: nowrap;
    font-size: 14rem;
}

.filter2 label {
    white-space: nowrap;
    font-size: 14rem;
}

/* アコーディオン全体のスタイル */
.accordion {
    width: 100%;
    margin: 20rem auto 0 auto;
}

/* アコーディオンのヘッダー（ボタン部分） */
.accordion-header {
    background-color: #d9272e;
    color: white;
    padding: 19rem;
    text-align: center;
    font-size: 18rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8rem;
    position: relative;
}

.accordion-header:hover {
    background-color: #ef3636;
}

/* アイコン（▲） */
.accordion-header::before {
    content: "▼";
    position: absolute;
    left: 40%;
    font-size: 18rem;
    transition: transform 0.3s ease;
    color: #fb7878;
    top: 21rem;
}

.accordion-header::after {
    content: "▼";
    position: absolute;
    right: 40%;
    font-size: 18rem;
    transition: transform 0.3s ease;
    color: #fb7878;
    top: 21rem;
}

/* アコーディオンの内容（デフォルトは非表示） */
.accordion-content {
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    background: white;
    transition: max-height 0.3s ease-out;
    position: relative;
}

/* 開いたときのスタイル */
.accordion.active .accordion-content {
    max-height: fit-content;
    padding-left: 40rem;
}

/* アイコンの回転（開いたとき） */
.accordion.active .accordion-header::before {
    transform: rotate(180deg);
}
.accordion.active .accordion-header::after {
    transform: rotate(180deg);
}

.accordion-title {
    color: #1582cb;
    font-size: 16rem;
    font-weight: bold;
    margin-top: 10rem;
    margin-bottom: 10rem;
}
.accordion-title1 {
    color: #1582cb;
    font-size: 16rem;
    font-weight: bold;
    margin-bottom: 10rem;
    padding-top: 24rem;
}

.accordion-filter {
    display: grid;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: repeat(2, 45rem);
    margin-left: 7rem;
}

.accordion-filter1 {
    display: grid;
    grid-template-columns: 18% 18% 17% 17% 17% 13%;
    grid-template-rows: 40rem;
    margin-left: 7rem;
}

.accordion-filter2 {
    margin-left: 7rem;
    margin-bottom: 27rem;
}

.accordion-content label {
    white-space: nowrap;
    font-size: 14rem;
}

.accordion-boder {
    width: 100%;
    height: 1rem;
    background: #cecece;
    position: absolute;
    left: 0;
}

@media screen and (max-width: 779px) {
    .filter-container {
        margin: 50rem auto 27rem auto;
        padding: 23rem 0 20rem 0;
    }

    .title {
        font-size: 26rem;
    }

    .filter-title {
        color: #c90000;
        font-size: 18rem;
        margin-bottom: 0;
        margin-top: 10rem;
        margin-left: 13rem;
    }

    .filter-all {
        width: 100%;
        margin: 10rem auto 0 auto;
    }

    .filter1 {
        display: none;
    }
    .filter11 {
        display: none;
    }

    .filter-media {
        display: flex;
        flex-wrap: wrap;
        margin-left: 13rem;
    }

    .filter2 {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: 50rem;
        margin-left: 13rem;
    }

    .filter-media label {
        padding: 12rem 25rem 12rem 8rem;
    }

    .filter2 label {
        padding: 12rem 16rem 12rem 8rem;
    }

    /* アコーディオン全体のスタイル */
    .accordion {
        margin: 10rem auto 0 auto;
    }

    /* アコーディオンのヘッダー（ボタン部分） */
    .accordion-header {
        font-size: 16rem;
        padding: 13rem;
    }

    /* アイコン（▲） */
    .accordion-header::before {
        content: "▼";
        position: absolute;
        left: 25%;
        font-size: 15rem;
        transition: transform 0.3s ease;
        color: #fb7878;
        top: 13rem;
    }

    .accordion-header::after {
        content: "▼";
        position: absolute;
        right: 25%;
        font-size: 15rem;
        transition: transform 0.3s ease;
        color: #fb7878;
        top: 13rem;
    }

    /* 開いたときのスタイル */
    .accordion.active .accordion-content {
        padding-left: 0;
    }

    .accordion-title {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 13rem;
        margin-left: 13rem;
    }

    .accordion-title1 {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 14rem;
        margin-left: 13rem;
    }

    .accordion-boder {
        width: 90%;
        left: 5%;
    }

    .accordion-filter {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(5, 37rem);
        margin-bottom: 30rem;
        margin-left: 13rem;
    }

    .accordion-filter1 {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(2, 37rem);
        margin-left: 13rem;
        margin-bottom: 27rem;
    }

    .accordion-filter2 {
        margin-left: 13rem;
        margin-bottom: 20rem;
        margin-top: 13rem;
    }

    .accordion-content label {
        padding: 12rem 16rem 12rem 8rem;
    }
}

.map iframe {
    height: 605rem;
    width: 100%;
}

.results-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 28rem auto 35rem auto;
}

.numbertext {
    font-size: 20rem;
    margin-left: 10rem;
}

.count1 {
    color: #c90000;
    font-size: 40rem;
    font-weight: bold;
    text-align: end;
    margin-left: 5rem;
}
.count2 {
    color: #c90000;
    font-size: 40rem;
    font-weight: bold;
    text-align: end;
    margin-left: 30rem;
}

@media screen and (max-width: 779px) {
    .map iframe {
        height: 260rem;
    }

    .results-number {
        margin: 18rem auto 10rem auto;
    }

    .numbertext {
        font-size: 14rem;
    }
    .count1 {
        font-size: 30rem;
        margin-left: 10rem;
    }
    .count2 {
        font-size: 30rem;
        margin-left: 10rem;
    }
}

.sub-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--padding--rem);
    max-width: var(--container-max-width);
    --container-max-width: var(--container-width);
}

.contents {
    margin: 20rem auto 30rem auto;
    padding: 35rem 88rem 44rem 60rem;
    background: white;
    border-radius: 10rem;
}

.studio-header img {
    position: absolute;
    width: 25rem;
    margin-top: -5rem;
    margin-left: 5rem;
    z-index: 1;
}
.badge {
    background: #003a94;
    color: white;
    padding: 5rem 17rem 5rem 35rem;
    font-size: 12rem;
    position: relative;
}

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

.studio-contents {
    margin-top: 20rem;
}

.studio-box {
    display: flex;
}

.studio-image {
    width: 31%;
    height: 50%;
    margin-right: 32rem;
}

.studio-details {
    width: 69%;
}

.details-title {
    font-size: 12rem;
    margin-bottom: 10rem;
}

.tag-box {
    display: flex;
}

.tag-inner1 {
    width: 48%;
}

.tag-inner2 {
    width: 50%;
}

.tags1 {
    display: grid;
    grid-template-columns: repeat(9, 76rem);
    grid-template-rows: repeat(3, 39rem);
    gap: 7rem;
    margin-bottom: 10rem;
}

.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/popline.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img5 {
    background-image: url(../img/common/houseline.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/bebopline.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.tags1-img16 {
    background-image: url(../img/common/vogueline.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, 76rem);
    grid-template-rows: repeat(2, 39rem);
    gap: 10rem;
    margin-bottom: 10rem;
}

.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, 76rem);
    grid-template-rows: repeat(2, 39rem);
    gap: 10rem;
    margin-bottom: 5rem;
}

.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/docomoline.png);
    background-repeat: no-repeat;
    background-size: contain;
}

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

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

.studio-info1 {
    width: 94%;
    border-collapse: collapse;
    margin-top: 13rem;
    font-size: 14rem;
    font-weight: 400;
}

.studio-info2 {
    width: 94%;
    border-collapse: collapse;
    margin-top: 7rem;
    font-size: 14rem;
    font-weight: 400;
}

.studio-info1 th,
.studio-info1 td {
    border: 1rem solid #ddd;
    padding: 6rem 17rem;
    text-align: left;
}

.studio-info1 th {
    background-color: #f3f3f3;
    width: 23%;
    font-weight: 400;
}

.studio-info2 th,
.studio-info2 td {
    border: 1rem solid #ddd;
    padding: 6rem 17rem;
    text-align: left;
}

.studio-info2 th {
    background-color: #f3f3f3;
    width: 23%;
    font-weight: 400;
}

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

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

.detail-button {
    width: 63%;
    display: block;
    background: #c90000;
    color: white;
    text-align: center;
    padding: 22rem;
    margin: 20rem auto 0 auto;
    border-radius: 8rem;
    font-size: 16rem;
    font-weight: bold;
    text-decoration: none;
}

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

@media screen and (max-width: 779px) {
    .sub-container {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        max-width: 100%;
        --container-max-width: 100%;
    }

    .contents {
        margin: 0 auto 27rem auto;
        padding: 20rem 0;
        border-radius: 0;
    }

    .studio-contents {
        margin-top: 15rem;
    }

    .studio-header {
        margin-left: 15rem;
    }

    .studio-header img {
        width: 22rem;
        margin-top: -2rem;
        margin-left: 5rem;
    }

    .badge {
        padding: 5rem 15rem 5rem 30rem;
        font-size: 10rem;
    }

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

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

    .studio-image {
        width: 88%;
        margin-right: auto;
        margin-left: auto;
    }

    .studio-details {
        width: 100%;
        padding: 0 15rem;
    }

    .details-title {
        margin-top: 5rem;
    }

    .tags1 {
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: repeat(4, 35rem);
        gap: 5rem;
        margin-bottom: 10rem;
    }

    .tags2 {
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: repeat(2, 35rem);
        gap: 5rem;
        margin-bottom: 10rem;
    }

    .tags3 {
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: repeat(2, 35rem);
        gap: 5rem;
        margin-bottom: 10rem;
    }

    .tag-inner1 {
        width: 100%;
    }

    .tag-inner2 {
        width: 100%;
        margin-right: 0;
    }

    .tag-box {
        flex-flow: column;
    }

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

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

    .detail-button {
        width: 92%;
        padding: 13rem;
        margin: 35rem auto 0 auto;
    }

    .studio-info1 {
        display: none;
        font-size: 12rem;
    }

    .studio-info2 {
        display: none;
        font-size: 12rem;
    }
}

.end {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--padding--rem);
    max-width: var(--container-max-width);
    --container-max-width: var(--container-width);
}

.pagination-container {
    text-align: center;
    padding: 20rem;
    height: 93rem;
    background-color: white;
    margin-top: 50rem;
    margin-bottom: 100rem;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.pagination li {
    margin: 0;
    white-space: nowrap;
}

.pagination a {
    text-decoration: none;
    color: #000000;
    padding: 5rem 10rem;
    border: 0.5rem solid #000000;
    display: inline-block;
    font-size: 12rem;
}

.pagination .dots {
    padding: 10rem 12rem;
}

.kigoumae {
    display: none;
}

.pagination .prev {
    color: red;
    font-weight: bold;
    border: none;
    margin-left: 20rem;
    display: none;
}

.pagination .prev:hover {
    text-decoration: underline;
}

.pagination .next {
    color: red;
    font-weight: bold;
    border: none;
    margin-left: 20rem;
}

.pagination .next:hover {
    text-decoration: underline;
}

@media screen and (max-width: 779px) {
    .pagination-container {
        text-align: center;
        height: auto;
        background-color: white;
        margin-top: 0rem;
        margin-bottom: 100rem;
        margin-left: auto;
        margin-right: auto;
    }

    .pagination a {
        padding: 5rem 10rem;
    }

    .pagination .next {
        color: red;
        font-weight: bold;
        border: none;
        margin-left: 20rem;
        font-size: 14rem;
    }

    .pagination .none {
        display: none;
    }
}

.filter-button-wrapper {
    padding: 13rem 13rem 0;
}

.filter-button {
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8rem;
    color: #fff;
    background-color: #1582cb;
    font-size: 16rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8rem;
    width: 100%;
}

.filter-button img {
    width: 19rem;
}

@media screen and (min-width: 769px) {
    .filter-button-wrapper {
        padding-top: 32rem;
        max-width: 722rem;
        margin-left: auto;
        margin-right: auto;
    }

    .filter-button {
        height: 70rem;
    }
}