/*footer 浮防止*/

body.page-id-162 {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

body.page-id-162 main {
    flex: 1 0 auto;
}

body.page-id-162 footer.site-footer {
    margin-top: auto;
}

/*footer 浮防止*/



.brand__container {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    padding: 150px 0 0;
}

@media (max-width: 1000px) {
    .brand__container {
        width: calc(100vw * 1000 / 1440);
        padding: calc(100vw * 150 / 1440) 0 0;
    }
}

@media (max-width: 750px) {
    .brand__container {
        width: calc(100vw * 670 / 750);
        padding: calc(100vw * 138.5 / 750) 0 0;
    }
}

.brand__title {
    font-size: 60px;
    font-family: "oswald", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1 !important;
    margin-bottom: 59px;
    display: inline-block;
    transform: translateX(-1px);
    letter-spacing: 0.05em;
}

@media (max-width: 1000px) {
    .brand__title {
        font-size: calc(100vw * 60 / 1440);
        margin-bottom: calc(100vw * 59 / 1440);
        transform: translateX(calc(100vw * -1 / 1440));
    }
}

@media (max-width: 750px) {
    .brand__title {
        font-size: calc(100vw * 80 / 750);
        margin-bottom: calc(100vw * 59 / 750);
        transform: translateX(calc(100vw * -4 / 750));
    }
}

.brand__eria {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    row-gap: 10px;
    column-gap: 11px;
    padding-bottom: 59.9px;
    border-bottom: 1px solid #E2E2E2;
}

@media (max-width: 1000px) {
    .brand__eria {
        row-gap: calc(100vw * 10 / 1440);
        column-gap: calc(100vw * 11 / 1440);
        padding-bottom: calc(100vw * 59.9 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__eria {
        justify-content: center;
        row-gap: calc(100vw * 10 / 750);
        column-gap: calc(100vw * 10 / 750);
        padding-bottom: calc(100vw * 20 / 750);
        grid-template-columns: calc(100vw * 310 / 750) calc(100vw * 310 / 750);
        border-bottom: initial;
        opacity: 0;
        transition: opacity .6s ease;
    }
}

.brand__eria.show {
    opacity: 1;
}

.brand__links {
    width: 242.01px;
    height: 40px;
    background-color: rgba(229, 238, 242, 1);
    border: 1px solid rgba(229, 238, 242, 1);
    transition: background-color .6s ease;
}

@media (max-width: 1000px) {
    .brand__links {
        width: calc(100vw * 242.01 / 1440);
        height: calc(100vw * 40 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__links {
        width: 100%;
        height: calc(100vw * 76 / 750);
        background-color: #ffffff;
    }
}

@media (hover: hover) and (pointer: fine) {
    .brand__links:hover {
        background-color: rgba(229, 238, 242, 0);
    }
}

.brand__links a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 16px;
    letter-spacing: 0.05em;
}

@media (max-width: 1000px) {
    .brand__links a {
        font-size: calc(100vw * 16 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__links a {
        font-size: calc(100vw * 22.1 / 750);
    }
}

.brand__item {
    display: flex;
    gap: 29.6px;
    padding-bottom: 40.5px;
    padding-top: 40.2px;
    border-top: 1px solid #E2E2E2;
}

@media (max-width: 1000px) {
    .brand__item {
        gap: calc(100vw * 29.6 / 1440);
        padding-bottom: calc(100vw * 40.5 / 1440);
        padding-top: calc(100vw * 40.2 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__item {
        flex-direction: column;
        gap: initial;
        padding-bottom: calc(100vw * 60 / 750);
        padding-top: calc(100vw * 60 / 750);
    }
}

.brand__item img {
    width: 570.12px;
}

@media (max-width: 1000px) {
    .brand__item img {
        width: calc(100vw * 570.12 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__item img {
        width: 100%;
        margin-bottom: calc(100vw * 31 / 750);
    }
}

.brand__item:last-child {
    /* border-bottom: 1px solid #E2E2E2; */
    border-bottom: initial;
}

.brand__meta {
    width: 400px;
    height: 257.76px;
}

@media (max-width: 1000px) {
    .brand__meta {
        width: calc(100vw * 400 / 1440);
        height: calc(100vw * 257.76 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__meta {
        width: 100%;
        height: auto;
        order: 2;
    }
}

.brand__meta h3 {
    font-size: 50px;
    font-family: "oswald", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1 !important;
    margin-bottom: 17px;
    transform: translateY(-7px);
    display: inline-block;
}

@media (max-width: 1000px) {
    .brand__meta h3 {
        font-size: calc(100vw * 50 / 1440);
        margin-bottom: calc(100vw * 17 / 1440);
        transform: translateY(calc(100vw * -7 / 1440));
    }
}

@media (max-width: 750px) {
    .brand__meta h3 {
        font-size: calc(100vw * 60 / 750);
        margin-bottom: calc(100vw * 29.8 / 750);
        transform: initial;
    }
}

.brand__meta p {
    font-size: 16px;
    line-height: 1.875 !important;
    letter-spacing: 0.05em;
    margin-bottom: 33px;
}

@media (max-width: 1000px) {
    .brand__meta p {
        font-size: calc(100vw * 16 / 1440);
        margin-bottom: calc(100vw * 33 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__meta p {
        line-height: 1.429 !important;
        font-size: calc(100vw * 28 / 750);
        margin-bottom: calc(100vw * 29.8 / 750);
    }
}

.brand__item .btn.btn--more {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(229, 238, 242, 1);
    border: 1px solid rgba(229, 238, 242, 1);
    transition: background-color .6s ease;
    color: #000;
    text-align: center;
    letter-spacing: 0.05em;
    font-size: 16px;
}

@media (hover: hover) and (pointer: fine) {
    .brand__item .btn.btn--more:hover {
        background-color: rgba(229, 238, 242, 0);
    }
}

@media (max-width: 1000px) {
    .brand__item .btn.btn--more {
        width: calc(100vw * 200 / 1440);
        height: calc(100vw * 50 / 1440);
        line-height: calc(100vw * 50 / 1440);
        font-size: calc(100vw * 16 / 1440);
    }
}

@media (max-width: 750px) {
    .brand__item .btn.btn--more {
        width: calc(100vw * 480 / 750);
        height: calc(100vw * 120 / 750);
        line-height: calc(100vw * 120 / 750);
        font-size: calc(100vw * 28 / 750);
        display: block;
        margin: 0 auto;
    }
}


/*パンくず (ブランドサイトだけ高さがある)*/

.breadcrumbs {
    margin: 100px auto 0 !important;
}

@media (max-width: 1000px) {
    .breadcrumbs {
        padding-top: calc(100vw * 15 / 1440);
        padding-bottom: calc(100vw * 16 / 1440);
        margin: calc(100vw * 100 / 1440) auto 0 !important;
    }
}

@media (max-width: 750px) {
    .breadcrumbs {
        padding-top: calc(100vw * 20 / 750);
        padding-bottom: calc(100vw * 20.5 / 750);
        margin: calc(100vw * 120 / 750) auto 0 !important;
    }
}










.accordion_container {
}

@media (max-width: 750px) {
    .accordion_container {
        width: 100%;
        margin: 0 auto calc(100vw * 61 / 750);
    }
}

.accordion_title {
    display: none;
    background-color: #E5EEF2;
    color: #000000;
    text-align: center;
    font-size: calc(100vw * 32 / 750);
    font-weight: bold;
    line-height: calc(100vw * 100 / 750);
    position: relative;
    width: 100%;
    height: calc(100vw * 100 / 750);
    letter-spacing: 0.05em;
    transition-duration: 0.2s;
}

@media (max-width: 750px) {
    .accordion_title {
        display: block;
    }
}


@media (max-width: 750px) {
    .icon_wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        right: calc(100vw * 26 / 750);
        width: calc(100vw * 60 / 750);
        height: calc(100vw * 60 / 750);
    }

    .icon {
        display: block;
        width: calc(100vw * 60 / 750);
        height: calc(100vw * 60 / 750);
        transform-origin: center center;
        position: relative;
    }

    .icon:before,
    .icon:after {
        display: flex;
        content: '';
        background-color: #000000;
        border-radius: 10px;
        width: calc(100vw * 60 / 750);
        height: calc(100vw * 2 / 750);
        position: absolute;
        top: calc(100vw * 29 / 750);
        left: 0;
        transform: rotate(0deg);
        transform-origin: center center;
        opacity: 1;
        transition-duration: 0.2s;
    }

    .icon:before {
        width: calc(100vw * 2 / 750);
        height: calc(100vw * 60 / 750);
        top: 0;
        left: calc(100vw * 29 / 750);
    }

    .accordion_title.open .icon:before {
        transform: rotate(-90deg);
    }

    .accordion_title.open .icon:after {
        opacity: 0;
    }

}


.brand_cover {
    display: block;
}

@media (max-width: 750px) {
    .brand_cover {
        display: none;
        background-color: #E5EEF2;
    }
}