@charset "UTF-8";
/*==============================================
brand
==============================================*/
.visual{
    width: 100%;
    height: 568px;
    background: url("../img/brand/visual01.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}

.visual::before{
    content: "";
    width: 100%;
    height: 79px;
    background: url("../img/common/bg01.svg") no-repeat center;
    background-size: 100% 79px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.visual h1{
    position: absolute;
    top: 330px;
    left: 10%;
}

.visual h1 span{
    font-size: 6.0rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    display: block;
}

.visual h1 small{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    display: block;
    margin-top: 11px;
}

.lead{
    width: 100%;
    background: #f7f6f6;
    padding: 100px 40px 135px;
}

.lead .txtArea{
    width: 100%;
    padding-bottom: 80px;
    border-bottom: 1px solid #cbc5c2;
}

.lead .txtArea p{
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 2;
}

.lead .imgArea{
    width: 100%;
    max-width: 1250px;
    margin: 116px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lead .imgArea img:nth-child(1){
    margin-left: 4%;
    width: 31.2%;
}

.lead .imgArea img:nth-child(2){
    width: 61.84%;
}

.concept{
    width: 100%;
    padding: 72px 40px 130px;
}

.concept .inner{
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.concept .inner .ttlArea h2{
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 88px;
}

.btn{
    font-size: 1.6rem;
    font-weight: bold;
    font-family: var(--fontfamily-sans-serif);
    line-height: 1;
    color: #634f45;
    text-decoration: none;
    display: table;
    height: 46px;
    padding: 15px 66px 15px 26px;
    border: 1px solid #b1a7a2;
    border-radius: 23px;
    margin: 0 0 22px;
    background: url("../img/common/icon01.svg") no-repeat center right 23px;
}

.sns{
    display: flex;
    align-items: center;
    gap: 15px;
}

.concept .inner p{
    width: 56.522%;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.25;
}

.other{
    width: 100%;
    background: #f7f6f6;
    padding: 110px 40px 130px;
}

.other .ttlArea{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

.other .ttlArea h2{
    margin: 0 0 55px 4%;
}

.other .ttlArea h2 span{
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1;
    display: block;
}

.other .ttlArea h2 small{
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-top: 16px;
}

.other .brandList{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.other .brandList .slide{
    width: 53.2%;
    margin-left: 4%;
}

.other .brandList .slide .slick-slide{
    width: 100%;
    background: #fff;
    padding: 50px;
}

.other .brandList .slide li .ttlArea{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #c5bdba;
    gap: 30px;
}

.other .brandList .slide li .ttlArea .imgArea{
    width: 170px;
}

.other .brandList .slide li .ttlArea .meta h3{
    font-size: 1.5rem;
    font-weight: 500;
    display: block;
    font-family: var(--fontfamily-sans-serif);
    margin-bottom: 40px;
    text-align: right;
}

.other .brandList .slide li .ttlArea .meta .btn{
    margin: 0 0 22px auto;
}

.other .brandList .slide li .ttlArea .meta .sns{
    justify-content: flex-end;
}

.other .brandList .slide li .txtArea{
    margin-top: 20px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.96875;
}

.other .brandList .slide li .txtArea img{
    margin-top: 24px;
    width: 100%;
}

.other .brandList .thumbnail{
    width: 40.56%;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.other .brandList .thumbnail li{
    width: calc((100% - 18px) / 3);
    position: relative;
    cursor: pointer;
}

.other .brandList .thumbnail li img:first-child{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.3s all ease;
}

.other .brandList .thumbnail li.active img:first-child,
.other .brandList .thumbnail li:hover img:first-child{
    opacity: 1;
}


@media screen and (max-width: 1024px) {

.visual{
    height: 82.133vw;
    background: url("../img/brand/sp/visual01.jpg") no-repeat center;
    background-size: cover;
}

.visual::before{
    height: 5.59895833vw;
    background: url("../img/common/sp/bg01.png") no-repeat center;
    background-size: 100% 5.59895833vw;
    bottom: -0.1302vw;
}

.visual h1{
    top: 54.6875vw;
    left: 5.46875vw;
}

.visual h1 span{
    font-size: 10.4167vw;
}

.visual h1 small{
    font-size: 3.515625vw;
    margin-top: 1.467vw;
}

.lead{
    padding: 15.7552vw 5.2vw 23.95833vw;
}

.lead .txtArea{
    padding-bottom: 11.979167vw;
}

.lead .txtArea p{
    font-size: 3.90625vw;
}

.lead .imgArea{
    margin: 13vw auto 0;
    flex-wrap: wrap;
}

.lead .imgArea img:nth-child(1){
    margin: 0 auto 5.20833vw;
    width: 50.78125vw;
}

.lead .imgArea img:nth-child(2){
    width: 89.71354167vw;
}

.concept{
    padding: 16.67vw 5.2vw 25.52vw;
}

.concept .inner{
    display: block;
}

.concept .inner .ttlArea h2{
    font-size: 6.8359375vw;
    margin-bottom: 11.1979167vw;
}

.btn{
    font-size: 3.609375vw;
    height: 10.15625vw;
    padding: 2.8645833vw 14.84375vw 2.8645833vw 6.25vw;
    border-radius: 5.078125vw;
    margin: 0 0 5.078125vw;
    background: url("../img/common/icon01.svg") no-repeat center right 5.20833vw;
    background-size: 4.167vw auto;
}

.sns{
    gap: 2vw;
}

.sns .insta{
    width: 7.16145833vw;
}

.sns .x{
    width: 6.5104167vw;
}

.sns .line{
    width: 7.16145833vw;
}

.sns .fb{
    width: 7.29167vw;
}

.sns .rakuten{
    width: 6.901vw;
}

.sns .zozo{
    width: 7.29167vw;
}

.sns .otherIcon{
    width: 7.29167vw;
}

.concept .inner p{
    width: 100%;
    font-size: 3.4vw;
    margin-bottom: 10.4167vw;
}

.other{
    padding: 16.145833vw 0 23.4375vw;
}

.other .ttlArea h2{
    margin: 0 5.2vw 15.3645833vw;
}

.other .ttlArea h2 span{
    font-size: 6.8359375vw;
}

.other .ttlArea h2 small{
    font-size: 3.90625vw;
    margin-top: 4.81770833vw;
}

.other .brandList{
    flex-direction: column-reverse;
}

.other .brandList .slide{
    width: 100%;
    margin-left: 0;
}

.other .brandList .slide .slick-slide{
    padding: 7.8125vw 5.20833vw;
}

.other .brandList .slide li .ttlArea{
    flex-wrap: wrap;
    padding-bottom: 3.645833vw;
    gap: 5.6vw;
}

.other .brandList .slide li .ttlArea .imgArea{
    width: 32.16145833vw;
}

.other .brandList .slide li .ttlArea .meta{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 3vw;
}

.other .brandList .slide li .ttlArea .meta h3{
    font-size: 2.8645833vw;
    margin-bottom: 5.2vw;
    width: 100%;
    text-align: left;
}

.other .brandList .slide li .ttlArea .meta .btn{
    font-size: 2.9895833vw;
    height: 8.33vw;
    padding: 2.8645833vw 10.4167vw 2.8645833vw 5.20833vw;
    line-height: 4.165vw;
    margin: 0;
    background: url(../img/common/icon01.svg) no-repeat center right 4.167vw;
    background-size: 3.515625vw auto;
}

.other .brandList .slide li .ttlArea .meta .sns{
    justify-content: flex-start;
}

.other .brandList .slide li .ttlArea .meta .sns .insta{
    width: 6.640625vw;
}

.other .brandList .slide li .ttlArea .meta .sns .x{
    width: 6.036932vw;
}

.other .brandList .slide li .ttlArea .meta .sns .line{
    width: 6.640625vw;
}

.other .brandList .slide li .ttlArea .meta .sns .fb{
    width: 6.76136673vw;
}

.other .brandList .slide li .ttlArea .meta .sns .rakuten{
    width: 6.39911vw;
}

.other .brandList .slide li .ttlArea .meta .sns .zozo{
    width: 6.76136673vw;
}

.other .brandList .slide li .txtArea{
    margin-top: 3.90625vw;
    font-size: 3.125vw;
}

.other .brandList .slide li .txtArea img{
    margin-top: 4.296875vw;
}

.other .brandList .thumbnail{
    width: 89.6vw;
    gap: 1.6927vw;
    margin: 0 auto 5.59895833vw;
}

.other .brandList .thumbnail li{
    width: calc((100% - 3.3854vw) / 3);
}

}