@charset "utf-8";

/*================================
Layout
================================*/

@media all and (max-width:768px) {
    html,body {
        position: relative;
        overflow-x: hidden;
    }
}


/*================================
Common
================================*/
@media all and (max-width:768px) {
}


/*================================
Header
================================*/
@media all and (max-width:928px) {
    .h-nav {
        position: fixed;
        /* position: absolute; */
        top: 0;
        left: 0;
        transform: translate(0,0);
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 4.673vw 3.505vw 4.673vw 3.505vw;
    }

    .h-nav.down{
        animation: DownAnime 0.5s forwards;
    }

    @keyframes DownAnime{
      from {
        opacity: 1;
        transform: translate(0,0);
      }
      to {
        opacity: 0;
        transform: translate(0,-100px);
      }
    }

    .h-nav.up{
        animation: UpAnime 0.5s forwards;
        background: rgba(0,0,0,0.8);
    }
    @keyframes UpAnime{
      from {
          opacity: 0;
        transform: translate(0,-100px);
      }
      to {
          opacity: 1;
        transform: translate(0,0);
      }
    }

    .h-nav .inner {
        display: block;
    }

    .h-nav .inner .h-logo {
        width: 33.645vw;
        font-size: 0;
        line-height: 1;
    }

    .h-nav .inner .h-logo img {
        height: auto;
    }

    .h-nav .nav__open {
        position: absolute;
        top: 4vw;
        right: 3.505vw;
        width: 6.542vw;
        height: 6.542vw;
        display: flex!important;
        flex-wrap: wrap;
        justify-content: center;
        align-content: stretch;
        align-items: stretch;
        z-index: 1;
    }

    .h-nav .nav__open span {
        display: block;
        width: 100%;
        height: 2px;
        background: #FFF;
    }

    .h-nav nav {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        margin-left: 0;
        z-index: 9;
        background: rgba(51,51,51,0.9);
        padding: 11.682vw 0 0 0;
        transition: all 0.3s ease;
    }

    .h-nav nav.active {
        left: 0;
    }

    .h-nav nav .nav__close {
        display: block;
        position: absolute;
        top: 4.673vw;
        right: 3.505vw;
        width: 6.542vw;
        height: 6.542vw;
        border: 1px solid #FFF;
        background: none;
        cursor: pointer;
    }

    .h-nav nav .nav__close::before, .h-nav nav .nav__close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 4.607vw;
        background: #FFF;
    }

    .h-nav nav .nav__close::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .h-nav nav .nav__close::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .h-nav nav .h-gnav {
        display: block;
        width: 100%;
        order: 1;
    }

    .h-nav nav .h-gnav li {
        margin-top: 4.673vw;
        font-size: 3.972vw;
        line-height: 1.2;
        text-align: center;
    }

    .h-nav nav .h-gnav li a {
        text-shadow: none;
    }

    .h-nav nav .h-lang {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 7.477vw;
        margin-left: 0;
        order: 2;
    }

    .h-nav nav .h-lang li a {
        width: 14.953vw;
    }

    .h-nav nav .h-sns {
        justify-content: center;
        order: 3;
        gap: 0 4.673vw;
        width: 100%;
        margin-top: 7.477vw;
        margin-left: 0;
    }

    .h-nav nav .h-sns img {
        height: 6.308vw;
        width: auto;
    }

    .h-nav nav .h-shop {
        display: none;
    }
}


/*================================
Contents
================================*/

/* common */
@media all and (max-width:768px) {
    .section-header h2 {
        font-size: 7.009vw;
    }
    .section-header h2 > span {
        display: block;
        font-size: 3.271vw;
    }
}

/* m-mv */
@media all and (max-width:768px) {
    .m-mv {
        position: relative;
        width: 100%;
        /* height: 132.554vw; */
        /* padding-top: calc(16 / 9 * 100%); */
    }

    .m-mv video {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        width: 100%;
        height: 100%;
        /* height: 132.554vw; */
        aspect-ratio: 3/4;
    }
}


/* m-vision */
@media all and (max-width:768px) {
    .m-vision {
        padding: 11.682vw 0 0 0;
    }
    .m-vision .m-vision__2col {
        margin-top: 7.477vw;
    }
    .m-vision .m-vision__2col .m-vision__2col_item.image {
        width: 100%;
    }
    .m-vision .m-vision__2col .m-vision__2col_item.text {
        width: 100%;
        padding: 14.019vw 3.505vw 18.692vw 3.505vw;
    }
    .m-vision .m-vision__2col .m-vision__2col_item.text h3 {
        font-size: 4.673vw;
    }
    .m-vision .m-vision__2col .m-vision__2col_item.text p {
        margin-top: 7.477vw;
        font-size: 3.037vw;
        line-height: 2.2;
    }
}


/* m-brands */
@media all and (max-width:1140px) {
    .m-brands .m-brands__brands .m-brands__list {
        margin-inline: auto;
    }
}

@media all and (max-width:768px) {
    .m-brands {
        padding: 18.692vw 0 14.019vw 0;
    }
    .m-brands__caption {
        margin-top: 7.477vw;
        padding: 0 7.009vw;
    }

    .m-brands .m-brands__brands {
        margin-top: 8.645vw;
    }

    .m-brands .m-brands__brands.fitness {
        margin-top: 17.991vw;
    }
    .m-brands .m-brands__brands h3 {
        font-size: 3.972vw;
    }
    .m-brands .m-brands__brands .m-brands__list {
        justify-content: center;
        gap: 2.336vw;
        margin-top: 6.308vw;
    }

    .m-brands .m-brands__brands .m-brands__list .m-brands__list__item {
        cursor: pointer;
        max-width: 84.346vw;
        padding: 3.505vw 3.505vw 0 3.505vw;
        background: #FFF;
        transition: none;
    }

    .m-brands .m-brands__brands .m-brands__list .m-brands__list__item:hover {
        box-shadow: none;
        transform: none;
    }
    .m-brands .m-brands__brands .m-brands__list .m-brands__list__item .logo {
        height: 25.701vw;
    }

    .m-brands .m-brands__brands .m-brands__list .m-brands__list__item .logo img {
        max-height: 21.963vw;
    }

    .m-brands__popup .popup {
        width: 100%;
        max-width: calc(100% - 14.018vw);
        max-height: calc(100vh - 14.017vw);
        margin-inline: auto;
        overflow: auto;
    }
    .m-brands__popup .popup .popup__wrap {
        position: relative;
        width: 100%;
        margin-inline: auto;
        overflow: auto;
    }
    .m-brands__popup .popup .popup__contents {
        flex-direction: column;
        padding: 0;
        min-height: 100%;
    }

    .m-brands__popup .popup .popup__contents .image {
        width: 100%;
    }

    .m-brands__popup .popup .popup__contents .text {
        padding: 7.477vw 7.009vw;
        width: 100%;
    }

    .m-brands__popup .popup .popup__contents .text .logo {
        text-align: center;
    }

    .m-brands__popup .popup .popup__contents .text .logo img {
        width: 50%;
        height: auto;
    }

    .popup__close {
        position: fixed;
    }
}


/* m-about */
@media all and (max-width:768px) {
    .m-about {
        padding: 15.888vw 0 0 0;
    }

    .m-about .m-about__list {
        margin-top: 9.346vw;
        padding: 0 7.009vw;
    }

    .m-about .m-about__list dt,
    .m-about .m-about__list dd {
        margin-top: 7.477vw;
        font-size: 3.037vw;
        line-height: 1.4;
    }
}


/* m-location */
@media all and (max-width:768px) {
    .m-location {
        padding: 23.364vw 0 22.43vw 0;
    }

    .m-location .m-location__map {
        margin-top: 6.308vw;
    }

    .m-location .m-location__map .route {
        margin-top: 7.477vw;
        padding: 0 7.009vw;
    }
}


/* m-contact */
@media all and (max-width:768px) {
    .m-contact {
        padding: 0 0 3.972vw 0;
    }

    .m-contact .section-header {
        height: 51.636vw;
    }

    .m-contact .m-contact__form {
        margin: 7.009vw 0 0 0;
        padding: 0 7.009vw;
    }

    .m-contact .m-contact__form a.btn {
        margin: 8.645vw 0 0 0;
        padding: 5.374vw 16.355vw;
        font-size: 3.271vw;
    }

    .m-contact .m-contact__policy {
        margin: 29.439vw auto 0 auto;
        padding: 0 7.009vw;
    }

    .m-contact .m-contact__policy h3 {
        font-size: 7.009vw;
    }

    .m-contact .m-contact__policy h4 {
        margin-top: 13.318vw;
        font-size: 3.738vw;
    }

    .m-contact .m-contact__policy p {
        margin-top: 3.505vw;
        font-size: 3.271vw;
    }

    .m-contact .m-contact__policy p.caption {
        margin-top: 9.346vw;
    }

    .m-contact .m-contact__policy a:hover {
        text-decoration: none;
    }

    .m-contact .m-contact__policy dl,
    .m-contact .m-contact__policy ul {
        margin-top: 3.505vw;
        font-size: 3.271vw;
    }

    .m-contact .m-contact__policy ol {
        margin-top: 3.505vw;
        font-size: 3.271vw;
    }
    a.more {
        margin: 11.682vw auto 0 auto;
        padding: 3.972vw 19.626vw;
        font-size: 3.271vw;
    }
    
    a.more:hover {
        opacity: 0.5;
    }
    
    a.more span {
        position: relative;
    }
    
    a.more span:before {
        content: "＋";
        position: absolute;
        top: 50%;
        left: -36px;
        transform: translate(0,-50%);
        opacity: 0.5;
        font-size: 20px;
    }
    a.more.hide{
        display: none!important;
    }
}

/*================================
Footer
================================*/
@media all and (max-width:1140px) {
    .f-nav .f-nav__upper nav {
        flex-wrap: wrap;
    }
}

@media all and (max-width:768px) {
    footer .inner {
        margin: 23.364vw 0 0 0;
        padding: 13.318vw 0 8.178vw 0;
    }
    .f-nav .f-nav__upper nav .f-gnav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
        column-gap: 7.71vw;
        row-gap: 2.336vw;
    }
    .f-nav .f-nav__upper nav .f-gnav li a {
        font-size: 3.037vw;
    }
    .f-nav .f-nav__lower nav {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 14.953vw;
        column-gap: 5.374vw;
    }
    .f-nav .f-nav__lower nav .f-sns {
        margin-top: 0;
    }
    .f-nav .f-nav__lower nav .f-sns a img {
        height: 6.308vw;
        width: auto;
    }
    .f-nav .f-nav__lower nav .f-lang {
        display: flex;
        align-items: center;
    }
    .f-nav .f-nav__lower nav .f-lang li a {
        font-size: 3.271vw;
        font-family: 'Arial','Noto Sans JP',sans-serif;
        color: #000F45;
    }
    .f-nav .f-nav__lower nav .f-lang li:first-of-type:after {
        content: "|";
        display: inline-block;
        margin: 0 2px;
    }
    .f-logo {
        margin-top: 14.953vw;
    }
    .f-logo img {
        width: 40.888vw;
        height: auto;
    }
    .f-copyright p {
        font-size: 2.336vw;
    }
}

/*================================
404
================================*/
@media all and (max-width:768px) {
    .notfound .m-404 .section-header h2 span {
        margin-top: 1.333vw;
        font-size: 4.267vw;
    }

    .notfound .m-404 .m-404-box a {
        margin-top: 6.667vw;
    }
}