html {
    font-size: 62.5%;
}

body {
    background-color: #f0f0f0;
    color: #231815;
    font-family: 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 1.4rem;
    -webkit-font-smoothing: antialiased;
    line-height: 1.8;
    margin: 0;
}

@media (min-width: 768px) {
    body {
        font-size: 1.6rem;
    }
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

a {
    color: #231815;
    text-decoration: none;
}

a:hover, a:focus {
    color: #231815;
    text-decoration: none;
}

img {
    max-width: 100%;
    -webkit-user-drag: none;
            user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    vertical-align: bottom;
}

/* --------------------
 Utils
-------------------- */
@media (max-width: 639px) {
    .hidden-xxs {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .hidden-xs {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none;
    }
}

/* --------------------
 Layout
-------------------- */
.layout {
    position: relative;
}

.container {
    margin: auto;
    max-width: 1108px;
    width: 100%;
}

.container--colored {
    background-color: #ffffff;
}

/* --------------------
 Navigation
-------------------- */
.nav {
    background: #151515;
    font-family: 'Asap';
    left: 0;
    min-height: 60px;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: background .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: background .2s cubic-bezier(.645, .045, .355, 1);
            transition: background .2s cubic-bezier(.645, .045, .355, 1);
    width: auto;
    z-index: 10;
}

@media (min-width: 992px) {
    .nav {
        background: transparent;
        border-bottom: 1px solid #868686;
        padding-bottom: 20px;
        padding-top: 20px;
    }
}

.nav-container {
    padding: 0 15px;
}

@media (min-width: 992px) {
    .nav-container {
        -webkit-align-items: center;
                align-items: center;
        -webkit-box-align: center;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        -ms-flex-align: center;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
                justify-content: space-between;
        margin: auto;
        max-width: 1200px;
    }
}

.nav__logo {
    left: 15px;
    padding-right: 40px;
    position: absolute;
    text-align: left;
    top: 15px;
}

@media (min-width: 992px) {
    .nav__logo {
        padding-right: 0;
        position: static;
        width: 30%;
    }
}

.nav__logo__link {
    color: #ffffff;
    display: inline-block;
    font-weight: 300;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
}

.nav__logo__link__title {
    line-height: 1;
    margin: 0;
}

.nav__logo__link:hover, .nav__logo__link:focus {
    color: #ffffff;
    opacity: .75;
}

.nav__fb {
    display: none;
    text-align: right;
    width: 15%;
}

@media (min-width: 992px) {
    .nav__fb {
        display: block;
    }
}

.nav__fb__link {
    color: #ffffff;
    line-height: 1;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
}

.nav__fb__link:hover, .nav__fb__link:focus {
    color: #ffffff;
    opacity: .75;
}

.nav__list {
    display: none;
    line-height: 1;
    list-style: none;
    margin: 60px 0 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .nav__list {
        -webkit-align-items: center;
                align-items: center;
        background: transparent;
        -webkit-box-align: center;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        display: block;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        -ms-flex-align: center;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
                justify-content: center;
        margin-top: 0;
        text-align: center;
        width: 55%;
    }
}

.nav__list__item {
    -webkit-box-flex: 0;
    display: block;
    display: block;
    -webkit-flex-grow: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
    margin: 0 15px;
    opacity: 0;
    padding: 30px 0 0;
    -webkit-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}

.nav__list__item:first-child {
    padding-top: 0;
}

.nav__list__item:last-child {
    padding-bottom: 30px;
}

@media (min-width: 992px) {
    .nav__list__item {
        display: inline;
        margin-left: 40px;
        margin-right: 40px;
        opacity: 1;
        padding-bottom: 0;
        padding-top: 0;
    }

    .nav__list__item:first-child {
        margin-left: 0;
    }

    .nav__list__item:last-child {
        margin-right: 0;
        padding-bottom: 0;
    }
}

@media (min-width: 992px) {
    .nav__list__item--fb {
        display: none;
    }
}

.nav__list__item__link {
    color: #ffffff;
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
}

.nav__list__item__link:hover, .nav__list__item__link:focus {
    color: #ffffff;
    opacity: .75;
}

@media (max-width: 991px) {
    .nav__list.active .nav__list__item {
        opacity: 1;
    }
}

.nav__layer {
    bottom: 0;
    display: none;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 0;
}

@media (min-width: 992px) {
    .nav__layer {
        display: block;
    }
}

@media (min-width: 992px) {
    .nav--inverse {
        background: #151515;
    }
}

.nav--inverse .nav__list__item__link {
    color: #ffffff;
}

.nav--inverse .nav__list__item__link:hover, .nav--inverse .nav__list__item__link:focus {
    color: #ffffff;
}

@media (min-width: 992px) {
    .nav--inverse .nav__list__item__link {
        color: #ffffff;
    }

    .nav--inverse .nav__list__item__link:hover, .nav--inverse .nav__list__item__link:focus {
        color: #ffffff;
    }
}

/* --------------------
 Hero
-------------------- */
.hero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 550px;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .hero {
        height: 1024px;
    }
}

.hero__logo {
    -webkit-box-flex: 0;
    display: inline-block;
    -webkit-flex-grow: 0;
            flex-grow: 0;
    -ms-flex-negative: 1;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 1;
            flex-shrink: 1;
    margin: 0;
    padding: 0;
    width: 130px;
}

.hero__logo-container {
    -webkit-align-items: center;
            align-items: center;
    bottom: 0;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    -ms-flex-align: center;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero__logo {
        width: auto;
    }
}

.hero__title {
    color: #ffffff;
    font-family: 'Asap';
    font-size: 45px;
    font-weight: 400;
    left: 0;
    line-height: 1;
    margin: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 30%;
}

.hero__title-container {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero__title {
        font-size: 55px;
    }
}

@media (min-width: 992px) {
    .hero__title {
        font-size: 65px;
    }
}

.hero__title__content {
    display: inline;
    position: relative;
}

.hero__title__content:after {
    border-bottom: 3px solid #ffffff;
    bottom: 5px;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
}

@media (min-width: 992px) {
    .hero__title__content:after {
        bottom: 10px;
    }
}

.hero--front {
    background-image: url(../images/heroes/hero-01.jpg);
}

.hero--front__logo {
    bottom: 100px;
    line-height: 1;
    position: absolute;
    right: 30px;
    width: 140px;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero--front__logo {
        bottom: 150px;
        width: auto;
    }
}

.hero--brands {
    background-image: url(../images/heroes/hero-02.jpg);
    background-position-x: -200px;
}

@media (min-width: 415px) {
    .hero--brands {
        background-position-x: center;
    }
}

.hero--news {
    background-image: url(../images/heroes/hero-02.jpg);
    background-position-x: -200px;
}

@media (min-width: 415px) {
    .hero--news {
        background-position-x: center;
    }
}

.hero--contact {
    background-image: url(../images/heroes/hero-03.jpg);
}

/* --------------------
 Main
-------------------- */
.main-box {
    background-color: #ffffff;
    overflow: hidden;
    padding-bottom: 90px;
}

@media (min-width: 768px) {
    .main-box {
        padding-bottom: 180px;
    }
}

.main-nav {
    font-family: 'Asap';
}

.main-nav-container {
    background-color: #f0f0f0;
    margin-left: 15px;
    margin-right: 15px;
}

.main-nav__list {
    -webkit-align-items: center;
            align-items: center;
    border-bottom: 1px solid #868686;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    -ms-flex-align: center;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: center;
    height: 60px;
    -webkit-justify-content: center;
            justify-content: center;
    list-style: none;
    margin: 0;
    padding: 20px 0;
    text-align: center;
}

.main-nav__list__item {
    -webkit-box-flex: 0;
    display: block;
    -webkit-flex-grow: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
    margin: 0 15px;
    padding: 0;
}

@media (min-width: 640px) {
    .main-nav__list__item {
        margin-left: 40px;
        margin-right: 40px;
    }

    .main-nav__list__item:first-child {
        margin-left: 0;
    }

    .main-nav__list__item:last-child {
        margin-right: 0;
    }
}

.main-nav__list__item__link {
    font-size: 17px;
    line-height: 1;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
}

.main-nav__list__item__link:hover, .main-nav__list__item__link:focus {
    opacity: .75;
}

.main-news {
    background-color: #f0f0f0;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 60px;
    position: relative;
}

@media (min-width: 992px) {
    .main-news {
        min-height: 700px;
        padding-top: 120px;
    }
}

.main-news__content {
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    z-index: 3;
}

@media (min-width: 768px) {
    .main-news__content {
        padding-bottom: 30px;
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media (min-width: 992px) {
    .main-news__content {
        padding-bottom: 180px;
        padding-right: 130px;
        width: 55%;
    }
}

@media (min-width: 1200px) {
    .main-news__content {
        width: 50%;
    }
}

.main-news__content__title {
    font-family: 'Asap';
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 60px;
}

@media (min-width: 768px) {
    .main-news__content__title {
        font-size: 36px;
    }
}

@media (min-width: 992px) {
    .main-news__content__title {
        font-size: 41px;
    }
}

.main-news__content__title__content {
    display: inline;
    position: relative;
}

.main-news__content__title__content:after {
    border-bottom: 3px solid #231815;
    bottom: 3px;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
}

@media (min-width: 992px) {
    .main-news__content__title__content:after {
        bottom: 5px;
    }
}

.main-news__content__desc {
    margin: 0 0 60px 0;
    padding-bottom: 60px;
    position: relative;
    word-break: break-all;
}

@media (min-width: 768px) {
    .main-news__content__desc {
        margin-left: 30px;
    }
}

@media (min-width: 992px) {
    .main-news__content__desc {
        margin-left: 70px;
    }
}

.main-news__content__desc:after {
    border-bottom: 1px solid #231815;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 50%;
    z-index: 1;
}

.main-news__thumb {
    padding: 0 30px 30px;
    position: relative;
}

.main-news__thumb:after {
    clear: both;
    content: '';
    display: block;
}

@media (min-width: 992px) {
    .main-news__thumb {
        bottom: 0;
        height: 100%;
        left: auto;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        z-index: 0;
    }
}

.main-news__thumb__front {
    float: left;
    padding-right: 15px;
    width: 50%;
}

@media (min-width: 640px) {
    .main-news__thumb__front {
        float: none;
        padding-right: 0;
        width: auto;
    }
}

@media (min-width: 640px) {
    .main-news__thumb__front {
        bottom: 20px;
        position: absolute;
        right: 40%;
        z-index: 2;
    }
}

@media (min-width: 992px) {
    .main-news__thumb__front {
        left: 20px;
        right: auto;
    }
}

.main-news__thumb__back {
    float: left;
    padding-left: 15px;
    width: 50%;
}

@media (min-width: 640px) {
    .main-news__thumb__back {
        float: none;
        padding-left: 0;
        width: auto;
    }
}

@media (min-width: 640px) and (max-width: 991px) {
    .main-news__thumb__back {
        text-align: right;
    }

    .main-news__thumb__back img {
        margin-right: 10%;
    }
}

@media (min-width: 992px) {
    .main-news__thumb__back {
        position: absolute;
        right: -115px;
        top: 150px;
        z-index: 1;
    }
}

.main--front {
    left: 0;
    margin-top: -60px;
    position: absolute;
    right: 0;
    top: auto;
    z-index: 1;
}

.main--brand-detail {
    left: 0;
    position: absolute;
    right: 0;
    top: 350px;
}

@media (min-width: 768px) {
    .main--brand-detail {
        top: 710px;
    }
}

.main--contact {
    left: 0;
    margin-top: -60px;
    position: absolute;
    right: 0;
    top: auto;
    z-index: 1;
}

.main--news {
    left: 0;
    position: absolute;
    right: 0;
    top: 350px;
}

@media (min-width: 768px) {
    .main--news {
        top: 710px;
    }
}

/* --------------------
 Brands
-------------------- */
/* Brand introduction
-------------------- */
.brand-intro {
    font-family: 'Asap';
    padding: 60px 15px;
}

@media (min-width: 768px) {
    .brand-intro {
        padding-bottom: 150px;
        padding-top: 120px;
    }
}

.brand-intro__title {
    font-family: 'Asap';
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 60px 0;
}

@media (min-width: 768px) {
    .brand-intro__title {
        font-size: 36px;
        margin-left: 30px;
    }
}

@media (min-width: 992px) {
    .brand-intro__title {
        font-size: 41px;
        margin-left: 70px;
    }
}

.brand-intro__title__content {
    display: inline;
    position: relative;
}

.brand-intro__title__content:after {
    border-bottom: 3px solid #231815;
    bottom: 3px;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
}

@media (min-width: 992px) {
    .brand-intro__title__content:after {
        bottom: 5px;
    }
}

.brand-intro__anchor {
    display: block;
    margin: 0 0 60px;
    margin-left: 0;
    text-align: left;
}

@media (min-width: 768px) {
    .brand-intro__anchor {
        margin-left: 30px;
    }
}

@media (min-width: 992px) {
    .brand-intro__anchor {
        margin-left: 0;
        text-align: center;
    }
}

.brand-intro__anchor__link {
    font-size: 17px;
    font-weight: 300;
    margin: 0 30px 0 0;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .brand-intro__anchor__link:last-child {
        margin-right: 0;
    }
}

.brand-intro__anchor__link:hover, .brand-intro__anchor__link:focus {
    opacity: .75;
}

.brand-intro-list {
    list-style: none;
    margin: 0 -8px;
    padding: 0;
}

.brand-intro-list:after {
    clear: both;
    content: '';
    display: block;
}

.brand-intro-list__col {
    float: left;
    margin: 0;
    padding: 0 8px 30px 8px;
    width: 50%;
}

@media (min-width: 768px) {
    .brand-intro-list__col {
        width: 33.33333%;
    }
}

.brand-intro-list__col--main {
    width: 100%;
}

.brand-intro__item {
    background-color: #ffffff;
    display: block;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
}

.brand-intro__item__thumb {
    text-align: center;
}

.brand-intro__item-container {
    padding: 15px;
}

@media (min-width: 768px) {
    .brand-intro__item-container {
        padding: 30px;
    }
}

.brand-intro__item__tag {
    color: #bd5449;
    font-size: 16px;
    margin: 0 0 30px;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .brand-intro__item__tag {
        margin-bottom: 60px;
    }
}

.brand-intro__item__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 60px;
}

@media (min-width: 415px) {
    .brand-intro__item__title {
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    .brand-intro__item__title {
        font-size: 25px;
        margin-bottom: 120px;
    }
}

.brand-intro__item:hover {
    opacity: .75;
}

@media (max-width: 767px) {
    .brand-intro-list__col--main .brand-intro__item__thumb {
        height: 0;
        overflow: hidden;
        padding-top: 69.8324%;
        position: relative;
    }

    .brand-intro-list__col--main .brand-intro__item__thumb img {
        bottom: 0;
        height: 100%;
        left: -50%;
        margin: auto;
        max-width: none;
        position: absolute;
        right: -50%;
        top: 0;
        width: auto;
    }
}

.brand-intro--simple {
    padding-bottom: 120px;
}

.brand-intro--simple .brand-intro__title {
    margin-bottom: 30px;
}

.brand-intro--simple .brand-intro__anchor {
    margin-bottom: 0;
}

.brand-intro--white {
    background-color: #ffffff;
}

/* Brand list
-------------------- */
.brand-detail {
    padding-left: 15px;
    padding-right: 15px;
}

.brand-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brand-detail-list__col {
    margin: 0 0 25px;
    padding: 0;
}

.brand-detail-list__col:last-child {
    margin-bottom: 0;
}

.brand-detail-list__col--main {
    margin-bottom: 60px;
}

.brand-detail-item {
    background-color: #ffffff;
}

.brand-detail-item__content {
    padding: 15px 15px 0;
}

@media (min-width: 768px) {
    .brand-detail-item__content {
        padding: 25px;
    }
}

@media (min-width: 992px) {
    .brand-detail-item__content {
        -webkit-align-items: flex-start;
                align-items: flex-start;
        -webkit-box-align: start;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        -ms-flex-align: start;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
                justify-content: space-between;
    }
}

.brand-detail-item__content__thumb {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
}

@media (min-width: 992px) {
    .brand-detail-item__content__thumb {
        padding: 25px;
    }
}

.brand-detail-item__content__info {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
    -ms-flex-positive: 1;
    -webkit-flex-shrink: 1;
            flex-shrink: 1;
    padding: 25px 0;
}

@media (min-width: 768px) {
    .brand-detail-item__content__info {
        padding-right: 25px;
    }
}

.brand-detail-item__content__info__tag {
    color: #bd5449;
    font-size: 16px;
    margin: 0 0 30px;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .brand-detail-item__content__info__tag {
        margin-bottom: 60px;
    }
}

.brand-detail-item__content__info__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 25px;
}

@media (min-width: 415px) {
    .brand-detail-item__content__info__title {
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    .brand-detail-item__content__info__title {
        font-size: 25px;
    }
}

.brand-detail-item__content__info__desc {
    font-size: 14px;
    margin: 0;
}

@media (min-width: 768px) {
    .brand-detail-item__content__info__desc {
        font-size: 17px;
    }
}

.brand-detail-item__content__info__desc .trim:before {
    content: '...';
}

.brand-detail-item__content__info__desc .trim__content {
    display: none;
}

.brand-detail-item__hidden {
    display: none;
    padding: 0 15px 15px;
}

@media (min-width: 768px) {
    .brand-detail-item__hidden {
        padding: 0 25px 25px;
    }
}

.brand-detail-item__hidden__gallery {
    margin-left: -5px;
    margin-right: -5px;
    padding-bottom: 5px;
}

@media (min-width: 768px) {
    .brand-detail-item__hidden__gallery {
        margin-left: -10px;
        margin-right: -10px;
    }
}

.brand-detail-item__hidden__gallery:after {
    clear: both;
    content: '';
    display: block;
}

.brand-detail-item__hidden__gallery__item {
    float: left;
    margin-bottom: 20px;
    padding: 0 5px;
    text-align: center;
    width: 33.33333%;
}

@media (min-width: 768px) {
    .brand-detail-item__hidden__gallery__item {
        margin-bottom: 45px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.brand-detail-item__hidden__content {
    text-align: center;
}

.brand-detail-item__hidden__content__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 5px;
}

@media (min-width: 768px) {
    .brand-detail-item__hidden__content__title {
        font-size: 17px;
    }
}

.brand-detail-item__hidden__content__desc {
    font-size: 14px;
    margin: 0;
    text-align: left;
    text-align: justify;
    text-justify: inter-ideograph;
}

@media (min-width: 768px) {
    .brand-detail-item__hidden__content__desc {
        font-size: 17px;
    }
}

.brand-detail-item__hidden__content__desc--center {
    text-align: center;
}

.brand-detail-item__trigger {
    background-color: #848484;
    cursor: pointer;
    display: block;
    height: 45px;
    position: relative;
    width: 100%;
}

.brand-detail-item__trigger:after {
    background-image: url(../images/icons/icon-triangle-bottom.svg);
    bottom: 0;
    content: '';
    display: block;
    height: 14px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: -webkit-transform .15s linear;
         -o-transition:         transform .15s linear;
            transition: -webkit-transform .15s linear;
            transition:         transform .15s linear;
            transition:         transform .15s linear, -webkit-transform .15s linear;
    width: 28px;
    z-index: 1;
}

.brand-detail-item.open .brand-detail-item__trigger:after {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.brand-detail-item.open .brand-detail-item__content__info__desc .trim:before {
    display: none;
}

.brand-detail-item.open .brand-detail-item__content__info__desc .trim__content {
    display: inline;
}

.brand-detail-item--main .brand-detail-item__content {
    display: block;
}

.brand-detail-item--main .brand-detail-item__content__thumb {
    padding: 0;
}

@media (min-width: 768px) {
    .brand-detail-item--main .brand-detail-item__content__thumb {
        margin-bottom: 30px;
    }
}

.brand-detail-item--main .brand-detail-item__content__info {
    padding-bottom: 25px;
}

@media (min-width: 768px) {
    .brand-detail-item--main .brand-detail-item__content__info {
        padding-left: 25px;
    }
}

@media (min-width: 992px) {
    .brand-detail-item--main .brand-detail-item__content__info {
        padding-bottom: 60px;
    }
}

.brand-detail-item--main .brand-detail-item__content__info:after {
    clear: both;
    content: '';
    display: block;
}

@media (min-width: 992px) {
    .brand-detail-item--main .brand-detail-item__content__info__title {
        float: left;
        width: 330px;
    }
}

@media (min-width: 992px) {
    .brand-detail-item--main .brand-detail-item__content__info__desc {
        margin-left: 330px;
    }
}

/* --------------------
 Licensing Group List
-------------------- */
.group-intro {
    background-color: #ffffff;
    border-bottom: 1px solid #aa5524;
    font-family: 'Asap';
    padding: 60px 15px;
}

@media (min-width: 768px) {
    .group-intro {
        padding-bottom: 150px;
        padding-top: 120px;
    }
}

.group-intro-header {
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .group-intro-header {
        -webkit-align-items: flex-start;
                align-items: flex-start;
        -webkit-box-align: start;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        -ms-flex-align: start;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
                justify-content: space-between;
        margin-bottom: 120px;
    }
}

.group-intro-header__meta {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
    font-size: 30px;
    margin-bottom: 30px;
    padding-right: 50px;
}

@media (min-width: 768px) {
    .group-intro-header__meta {
        margin-bottom: 0;
    }
}

.group-intro-header__meta__title {
    font-family: 'Asap';
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 20px;
}

@media (min-width: 768px) {
    .group-intro-header__meta__title {
        font-size: 36px;
    }
}

@media (min-width: 992px) {
    .group-intro-header__meta__title {
        font-size: 41px;
    }
}

.group-intro-header__meta__title__content {
    display: inline;
    position: relative;
}

.group-intro-header__meta__title__content:after {
    border-bottom: 3px solid #231815;
    bottom: 3px;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
}

@media (min-width: 992px) {
    .group-intro-header__meta__title__content:after {
        bottom: 5px;
    }
}

.group-intro-header__meta__subtitle {
    font-size: 17px;
    font-weight: 400;
    margin: 0;
}

.group-intro-header__desc {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
    -ms-flex-positive: 1;
    -webkit-flex-shrink: 1;
            flex-shrink: 1;
    margin: 0;
    word-break: break-all;
}

.group-intro-list {
    list-style: none;
    margin: 0 -8px;
    padding: 0;
}

.group-intro-list:after {
    clear: both;
    content: '';
    display: block;
}

.group-intro-list__col {
    float: left;
    margin: 0;
    padding: 0 8px 30px 8px;
    width: 33.33333%;
}

.group-intro__item {
    display: block;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
}

.group-intro__item:hover {
    opacity: .75;
}

/* --------------------
 News
-------------------- */
.news {
    padding: 0 15px;
}

@media (min-width: 640px) {
    .news {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 992px) {
    .news {
        padding-left: 100px;
        padding-right: 100px;
    }
}

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-list__item {
    margin: 0;
    padding: 60px 0 0;
}

.news-list__item:last-child {
    padding-bottom: 60px;
}

.news-item__header {
    border-bottom: 1px solid #231815;
    font-size: 18px;
    margin: 0 0 30px;
}

@media (min-width: 992px) {
    .news-item__header {
        -webkit-align-items: flex-start;
                align-items: flex-start;
        -webkit-box-align: start;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        -ms-flex-align: start;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: justify;
        font-size: 25px;
        -webkit-justify-content: space-between;
                justify-content: space-between;
    }
}

.news-item__date {
    border-bottom: 8px solid #231815;
    -webkit-box-flex: 0;
    display: inline-block;
    -webkit-flex-grow: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
    font-family: 'Asap';
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 15px;
    max-width: 5em;
    width: auto;
}

@media (min-width: 992px) {
    .news-item__date {
        margin-bottom: 0;
    }
}

.news-item__title {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
    -ms-flex-positive: 1;
    -webkit-flex-shrink: 1;
            flex-shrink: 1;
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 3px;
    text-align: left;
}

@media (min-width: 992px) {
    .news-item__title {
        padding-left: 30px;
    }
}

@media (min-width: 992px) {
    .news-item__body {
        -webkit-align-items: flex-start;
                align-items: flex-start;
        -webkit-box-align: start;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        -ms-flex-align: start;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
                justify-content: space-between;
    }
}

.news-item__thumb {
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .news-item__thumb {
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
                flex-grow: 0;
        -ms-flex-negative: 0;
        -ms-flex-positive: 0;
        -webkit-flex-shrink: 0;
                flex-shrink: 0;
        margin-bottom: 0;
        width: 312px;
    }
}

@media (min-width: 992px) {
    .news-item__content {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
                flex-grow: 1;
        -ms-flex-negative: 1;
        -ms-flex-positive: 1;
        -webkit-flex-shrink: 1;
                flex-shrink: 1;
        padding-left: 30px;
    }
}

.news-item__content p {
    margin-bottom: 1em;
    margin-top: 0;
    word-break: break-all;
}

.news-item__content p:last-child {
    margin-bottom: 0;
}

/* --------------------
 Contact
-------------------- */
.contact {
    background-color: #f0f0f0;
    margin-left: 15px;
    margin-right: 15px;
    padding: 60px 15px 30px;
    position: relative;
}

@media (min-width: 768px) {
    .contact {
        padding-bottom: 60px;
        padding-left: 115px;
        padding-right: 115px;
    }
}

@media (min-width: 992px) {
    .contact {
        padding-top: 120px;
    }
}

.contact__title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 30px;
}

@media (min-width: 768px) {
    .contact__title {
        font-size: 25px;
    }
}

.contact__title__content {
    display: inline;
    position: relative;
}

.contact__title__content:after {
    border-bottom: 3px solid #231815;
    bottom: 0;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
}

@media (min-width: 992px) {
    .contact__title__content:after {
        bottom: 3px;
    }
}

.contact__item {
    margin-bottom: 10px;
}

.contact__item__field {
    border: none;
    border-radius: 0;
    height: 70px;
    line-height: 1.8;
    padding: 10px;
    width: 100%;
}

.contact__item__field::-webkit-input-placeholder {
    color: #595757;
}

.contact__item__field:-ms-input-placeholder {
    color: #595757;
}

.contact__item__field::-ms-input-placeholder {
    color: #595757;
}

.contact__item__field::placeholder {
    color: #595757;
}

.contact__item__field::-webkit-input-placeholder {
    color: #595757;
}

.contact__item__field::-moz-placeholder {
    color: #595757;
}

.contact__item__field:-ms-input-placeholder {
    color: #595757;
}

.contact__item__field:-moz-placeholder {
    color: #595757;
}

.contact__item__textarea {
    border: none;
    border-radius: 0;
    height: 200px;
    line-height: 1.8;
    padding: 10px;
    width: 100%;
}

.contact__item__textarea::-webkit-input-placeholder {
    color: #595757;
}

.contact__item__textarea:-ms-input-placeholder {
    color: #595757;
}

.contact__item__textarea::-ms-input-placeholder {
    color: #595757;
}

.contact__item__textarea::placeholder {
    color: #595757;
}

.contact__item__textarea::-webkit-input-placeholder {
    color: #595757;
}

.contact__item__textarea::-moz-placeholder {
    color: #595757;
}

.contact__item__textarea:-ms-input-placeholder {
    color: #595757;
}

.contact__item__textarea:-moz-placeholder {
    color: #595757;
}

.contact__item__submit {
    background: #e10012;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: background .2s linear;
         -o-transition: background .2s linear;
            transition: background .2s linear;
    width: 100%;
}

.contact__item__submit:hover, .contact__item__submit:focus {
    background: #c20111;
}

@media (min-width: 768px) {
    .contact__item__submit {
        font-size: 20px;
        height: 70px;
        line-height: 70px;
    }
}

/* --------------------
 Privacy policy
-------------------- */
.privacy {
    background-color: #ffffff;
    border-top: 1px solid #848484;
    padding: 60px 15px;
    position: relative;
}

@media (min-width: 768px) {
    .privacy {
        padding-bottom: 120px;
        padding-top: 120px;
    }
}

.privacy:after {
    border-bottom: 1px solid #848484;
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    left: 0;
    margin: auto;
    max-width: 1108px;
    position: absolute;
    right: 0;
    width: 100%;
}

.privacy__title {
    font-size: 25px;
    margin: 0 0 60px;
    text-align: center;
    text-decoration: underline;
}

.privacy__content__desc {
    margin-bottom: 1em;
}

.privacy__content__desc:last-child {
    margin-bottom: 0;
}

/* --------------------
 Profile
-------------------- */
.profile {
    background-color: #ffffff;
    padding: 60px 15px;
}

@media (min-width: 768px) {
    .profile {
        padding-bottom: 120px;
    }
}

.profile__title {
    font-size: 25px;
    margin: 0 0 10px;
    text-align: center;
    text-decoration: underline;
}

.profile__content__desc {
    margin-bottom: 2em;
    text-align: center;
}

.profile__content__desc:last-child {
    margin-bottom: 0;
}

/* --------------------
 Footer
-------------------- */
.footer {
    background-color: #ffffff;
    font-family: 'Asap';
}

.footer-container {
    margin: auto;
    max-width: 1600px;
    padding: 60px 15px;
}

@media (max-width: 1228px) {
    .footer-container {
        max-width: 1108px;
    }
}

@media (min-width: 1229px) {
    .footer-container {
        padding-bottom: 60px;
        padding-left: 60px;
        padding-right: 60px;
    }
}

.footer__logo {
    display: inline-block;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 60px;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
}

@media (min-width: 768px) {
    .footer__logo {
        font-size: 36px;
    }
}

@media (min-width: 992px) {
    .footer__logo {
        font-size: 41px;
    }
}

.footer__logo:hover, .footer__logo:focus {
    opacity: .75;
}

.footer__logo__content {
    display: inline;
    position: relative;
}

.footer__logo__content:after {
    border-bottom: 3px solid #231815;
    bottom: 3px;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
}

@media (min-width: 992px) {
    .footer__logo__content:after {
        bottom: 5px;
    }
}

.footer__menu {
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
}

.footer__menu__item {
    display: inline;
    margin: 0 30px 0 0;
}

@media (min-width: 640px) {
    .footer__menu__item {
        margin-right: 40px;
    }

    .footer__menu__item:last-child {
        margin-right: 0;
    }
}

.footer__menu__item__link {
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
    -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
            transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
}

.footer__menu__item__link:hover, .footer__menu__item__link:focus {
    opacity: .75;
}

.footer__company {
    margin-bottom: 100px;
}

.footer__company__name {
    font-size: 13px;
    font-weight: 700;
}

.footer__company__address {
    font-size: 12px;
}

.footer__copyright {
    font-size: 12px;
    text-align: center;
}

/* --------------------
 Burger menu
-------------------- */
.burger {
    bottom: auto;
    cursor: pointer;
    display: block;
    height: 18px;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    right: 15px;
    top: 21px;
    width: 22px;
    z-index: 10;
}

@media (min-width: 992px) {
    .burger {
        display: none;
    }
}

.burger__box {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    height: 18px;
    position: relative;
    width: 22px;
}

.burger__line, .burger__line:before, .burger__line:after {
    background-color: white;
    height: 2px;
    position: absolute;
    -webkit-transition: background-color .15s linear, -webkit-transform .15s ease;
         -o-transition: transform .15s ease, background-color .15s linear;
            transition: background-color .15s linear, -webkit-transform .15s ease;
            transition: transform .15s ease, background-color .15s linear;
            transition: transform .15s ease, background-color .15s linear, -webkit-transform .15s ease;
    width: 100%;
}

.burger:hover .burger__line, .burger:hover .burger__line:before, .burger:hover .burger__line:after, .burger:focus .burger__line, .burger:focus .burger__line:before, .burger:focus .burger__line:after {
    background-color: white;
}

.burger__line {
    display: block;
    top: 50%;
    -webkit-transition-duration: .22s;
         -o-transition-duration: .22s;
            transition-duration: .22s;
    -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19);
         -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19);
            transition-timing-function: cubic-bezier(.55, .055, .675, .19);
}

.burger__line:before, .burger__line:after {
    content: '';
    display: block;
}

.burger__line:before {
    top: -7px;
    -webkit-transition: top .1s ease-in .25s, opacity .1s ease-in, background-color .15s linear;
         -o-transition: top .1s ease-in .25s, opacity .1s ease-in, background-color .15s linear;
            transition: top .1s ease-in .25s, opacity .1s ease-in, background-color .15s linear;
}

.burger__line:after {
    bottom: -7px;
    -webkit-transition: bottom .1s ease-in .25s, background-color .15s linear, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19);
         -o-transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55, .055, .675, .19), background-color .15s linear;
            transition: bottom .1s ease-in .25s, background-color .15s linear, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19);
            transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55, .055, .675, .19), background-color .15s linear;
            transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55, .055, .675, .19), background-color .15s linear, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19);
}

.burger.active .burger__line, .burger.active .burger__line:before, .burger.active .burger__line:after {
    background-color: white;
}

.burger.active .burger__line {
    -webkit-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
            transform: rotate(225deg);
    -webkit-transition-delay: .12s;
         -o-transition-delay: .12s;
            transition-delay: .12s;
    -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
         -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
            transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

.burger.active .burger__line:before {
    opacity: 0;
    top: 0;
    -webkit-transition: top .1s ease-out, opacity .1s ease-out .12s;
         -o-transition: top .1s ease-out, opacity .1s ease-out .12s;
            transition: top .1s ease-out, opacity .1s ease-out .12s;
}

.burger.active .burger__line:after {
    bottom: 0;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transition: bottom .1s ease-out, -webkit-transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
         -o-transition: bottom .1s ease-out, transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
            transition: bottom .1s ease-out, -webkit-transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
            transition: bottom .1s ease-out, transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
            transition: bottom .1s ease-out, transform .22s cubic-bezier(.215, .61, .355, 1) .12s, -webkit-transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
}