﻿
.about-sec{
 background: var(--main-c);
}
.about-sec .grow-row{
height:300vh;
}
.about-sec .pin-sec{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;

}
.about-sec .pin-sec .logo-con{
  position:relative;
  z-index:5;
}


.about-sec .pin-sec .logo-con .circle{
  position:relative;
  width:160px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--main-c);
  z-index:9;
  overflow:hidden;
  border-radius:50%;
  background-color:#000;
}
.about-sec .pin-sec .logo-con .circle .bg{
  position:absolute;
  width:100vw;
  height:100vh;
     top: 50%;
    left: 50%;
    margin-top: -50vh;
    background-color:#222;
    margin-left: -50vw;
    z-index:2
}

.about-sec .pin-sec .logo-con .circle .bg img{
  position:absolute;
  width:100%;
  height:100%;
 object-fit:cover;
     top: 0%;
    left: 0%;
    mix-blend-mode: overlay;
      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    
}


.about-sec .pin-sec .logo-con .circle .logo{
  width:60px;
  position:absolute;
  z-index:10;
}
.about-sec .pin-sec .logo-con .circle .logo img{
  width:100%;
}


.about-sec .txt-row{
position:relative;
z-index:10;

}
.about-sec .txt-row .txt-con{
    padding-bottom:75vh;
}
.about-sec .txt-row .txt-con .t-item{
margin:20vh 0;
color:#fff;
}
.about-sec .txt-row .txt-con .t-item:nth-child(2n+1) .t-con{
    padding-left:calc(50% + 60px)
}
.about-sec .txt-row .txt-con .t-item:nth-child(2n) .t-con{
    padding-right:calc(50% + 60px)
}

.about-sec .txt-row .txt-con .t-item .slogan{
    font-size:48px;
    font-weight:700
}
.about-sec .txt-row .txt-con .t-item .slogan span{
    font-weight:200
}
.about-sec .txt-row .txt-con .t-item .txt{
    font-size:20px;
    font-weight:200;
    line-height:1.9em;
}
.about-sec .txt-row .txt-con .t-item .ttl{
    font-size:20px;
    font-weight:700;
    margin:15px 0;
}
.about-text-sec{
    background-color:#333;
    display:flex;
    position:relative;
    z-index:15
}
.about-text-sec .img-col{
    flex:1 0 0;
    display:flex;
    max-width:50%;
}
.about-text-sec .img-col .img-con{
   aspect-ratio:2/2;
   position:relative;
   width:100%;
}
.about-text-sec .img-col .img-con img{
  position:absolute;
  width:100%;
  height:100%;
 object-fit:cover;
     top: 0%;
    left: 0%;
}

.about-text-sec .txt-col{
    flex:1 0 0;
        background: #000000;
    background: linear-gradient(190deg, rgba(0, 0, 0, 1) 30%, rgba(40, 40, 40, 1) 60%);
    margin-top:-120px;
    color:#fff;
}
.about-text-sec .txt-col .txt-con{
    padding:180px 45px 45px 291px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.about-text-sec .txt-col .txt-con .top-con{
    margin-bottom:120px;
}

.about-text-sec .txt-col .txt-con .head-con{
    margin-bottom:30px;
}

.about-text-sec .txt-col .txt-con .head-con .head{
        margin:0;
    color:#fff;
    font-weight:700;
    font-size:24px;
}
.about-text-sec .txt-col .txt-con .desc-con .desc{
       font-size:20px;
    font-weight:200;
    line-height:1.9em;
}
.about-text-sec .txt-col .txt-con .desc-con .desc2{
       font-size:14px;
    font-weight:200;
}
.about-text-sec .txt-col .txt-con .btn-con{
       margin-top:30px;
}

.contact-sec{
        margin-bottom:-1px;
    background: #000000;
background: linear-gradient(190deg, rgba(0, 0, 0, 1) 5%, rgba(48, 48, 48, 1) 50%);
  color:#fff;
}
.c-head-row{
    margin:60px 0;
}

.c-head-row .head-con .head{
    margin:0;
    color:#fff;
    font-weight:700;
    font-size:36px;
}

.c-head-row .head-con .head span{
    font-weight:200;
    display:block;
}
.contac-row{
    margin-bottom:90px;
}
.contac-row .contact-con{
   display:flex;
}
.contac-row .contact-con .txt-col{
   flex:1 0 0;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.contac-row .contact-con .txt-col .txt-con{
  margin-bottom:90px;
}
.contac-row .contact-con .txt-col .txt-con .c-item{
  margin-top:20px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .ttl{
 font-size:14px;
 font-weight:200;
 margin-bottom:5px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val{
 font-size:14px;
 font-weight:700;
 max-width:300px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val.val-1{
 font-size:28px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val.val-2{
 font-size:20px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val a{
color:#fff;
display:inline-block;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val a:hover{
color:var(--main-c);
}
.contac-row .contact-con .txt-col .sn-con{
           background: #000000;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
padding:60px 45px;
text-align:center;
}
.contac-row .contact-con .txt-col .sn-con .ttl{
 font-size:14px;
 font-weight:200;
 margin-bottom:5px;
}
.contac-row .contact-con .txt-col .sn-con ul{
 list-style:none;
 padding:0;
 margin:0;
}
.contac-row .contact-con .txt-col .sn-con ul li{
 margin-top:15px;
}
.contac-row .contact-con .txt-col .sn-con ul li a{
display:inline-block;
color:#fff;
font-size:18px;
font-weight:700;
}
.contac-row .contact-con .txt-col .sn-con ul li a:hover{
color:var(--main-c);
}
.contac-row .contact-con .form-col{
  flex:1 0 0;
         background: #111;
background: linear-gradient(180deg, rgba(60, 60, 60, 1) 0%, rgba(0, 0, 0, 0) 90%);
 
}
.contac-row .contact-con .form-col .form-con{
  padding:60px 45px;
}
.contac-row .contact-con .form-col .form-con .ttl{
  font-size:16px;
  font-weight:700;
  margin-bottom:45px;
}
.form-row .f-item{
    width:100%;
    margin-bottom:-1px;
}
.form-row .f-item input,
.form-row .f-item textarea
{
    width:100%;
   background-color:transparent;
   border:1px solid #fff;
   text-align:right;
   padding:15px;
   font-size:16px;
   font-weight:300;
   color:#fff;
   outline:0;
   resize:none;
}
.form-row .f-item .btn{
    display:inline-block;
    margin:15px 0;
    color:#fff;
    font-size:18px;
    font-weight:700;
}
.form-row .f-item .btn:hover{
    color:#000;
}
.stores-sec{
        margin-bottom:-1px;
    background: #111;
  color:#fff;
}
.stores-sec{
        margin-bottom:-1px;
    background: rgb(40,40,40);
  color:#fff;

}


.stores-sec .img-row{
height:33vw;
position:relative;
min-height:540px;

}
.stores-sec .img-row .img-con{
    width:100%;
    height:100%;
    position:relative;

}

.stores-sec .img-row .img-con img,
.stores-sec .img-row .img-con video{
    width:100%;
    height:100%;
    position:absolute;
   top:0%;
   left:0%;
   object-fit:cover;
}
.stores-sec .txt-row{
margin-top:-180px;
width:1180px;
position:relative;
z-index:10;
overflow:hidden;
  padding-bottom:90px;
}

.stores-sec .txt-row .bg{
    background: #000;
background: linear-gradient(264deg, rgba(20, 20, 20, 1) 19%, rgba(50, 50, 50, 1) 95%);
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
z-index:5
}
.stores-sec .txt-row .txt-con{
    padding:90px 0;
    position:relative;
    z-index:7
}
.stores-sec .txt-row .txt-con .head-con{
  margin-bottom:30px;
}
.stores-sec .txt-row .txt-con .head-con .head{
  display:inline-block;
  color:#fff;
  font-weight:700;
  margin:0;
  font-size:24px;
}
.stores-sec .txt-row .txt-con .desc-con{
  margin:45px 0;
}

.stores-sec .txt-row .txt-con .desc-con .desc {
    font-size: 18px;
    font-weight: 200;
    color: #fff;
}

@media(max-width:1499px){
    .about-text-sec .txt-col .txt-con{
    padding:180px 45px 45px 45px;

}
}
@media(max-width:1199px){
    .stores-sec .txt-row{
        width: calc(100% - 140px);
}
}
@media(max-width:991px){
    .about-sec .txt-row .txt-con .t-item:nth-child(2n+1) .t-con{
    padding-left:0
}
.about-sec .txt-row .txt-con .t-item:nth-child(2n) .t-con{
    padding-right:0
}

    .contac-row .contact-con .form-col .form-con {
    padding: 60px 20px;
}
}
@media(max-width:767px) {
  
.about-sec .pin-sec .logo-con .circle{

  width:90px;
  height:90px;

}
.about-sec .pin-sec .logo-con .circle .logo{
  width:36px;
}


.about-sec .txt-row{
position:relative;
z-index:10;

}
.about-sec .txt-row .txt-con{
    padding-bottom:75vh;
}
.about-sec .txt-row .txt-con .t-item{
margin:20vh 0;
}
.about-sec .txt-row .txt-con .t-item:nth-child(2n+1) .t-con{
    padding-left:0
}
.about-sec .txt-row .txt-con .t-item:nth-child(2n) .t-con{
    padding-right:0
}

.about-sec .txt-row .txt-con .t-item .slogan{
    font-size:36px;
}
.about-sec .txt-row .txt-con .t-item .txt{
    font-size:17px;

}
.about-sec .txt-row .txt-con .t-item .ttl{
    font-size:17px;
    margin:15px 0;
}
.about-text-sec{
    flex-direction:column-reverse;
}
.about-text-sec .img-col{
    max-width:100%;
}
.about-text-sec .txt-col{
  margin-top:0px;

}
.about-text-sec .txt-col .txt-con{
    padding:80px 20px 30px 20px;
  
}
.about-text-sec .txt-col .txt-con .top-con{
    margin-bottom:90px;
}

.about-text-sec .txt-col .txt-con .head-con{
    margin-bottom:20px;
}

.about-text-sec .txt-col .txt-con .head-con .head{

    font-size:21px;
}
.about-text-sec .txt-col .txt-con .desc-con .desc{
       font-size:17px;
}
.about-text-sec .txt-col .txt-con .desc-con .desc2{
       font-size:11px;
}
.about-text-sec .txt-col .txt-con .btn-con{
       margin-top:20px;
}

.c-head-row{
    margin:40px 0;
}

.c-head-row .head-con .head{

    font-size:29px;
}

.contac-row{
    margin-bottom:60px;
}
.contac-row .contact-con{
   flex-direction:column;
}
.contac-row .contact-con .txt-col .txt-con{
  margin-bottom:40px;
}
.contac-row .contact-con .txt-col .txt-con .c-item{
  margin-top:20px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .ttl{
 font-size:11px;
 margin-bottom:5px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val{
 font-size:11px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val.val-1{
 font-size:21px;
}
.contac-row .contact-con .txt-col .txt-con .c-item .val.val-2{
 font-size:17px;
}
.contac-row .contact-con .txt-col .sn-con{
padding:40px 20px;

}
.contac-row .contact-con .txt-col .sn-con .ttl{
 font-size:11px;
 margin-bottom:5px;
}
.contac-row .contact-con .txt-col .sn-con ul li{
 margin-top:15px;
}
.contac-row .contact-con .txt-col .sn-con ul li a{
font-size:15px;
}
.contac-row .contact-con .form-col{

background: linear-gradient(0deg, rgba(60, 60, 60, 1) 0%, rgba(0, 0, 0, 0) 90%);
 margin-top:40px
}
.contac-row .contact-con .form-col .form-con{
  padding:40px 20px;
}
.contac-row .contact-con .form-col .form-con .ttl{
  font-size:13px;
  margin-bottom:30px;
}
.form-row .f-item input,
.form-row .f-item textarea
{
   padding:15px;
   font-size:13px;
}
.form-row .f-item .btn{
    margin:15px 0;
    font-size:15px;
}
.form-row .f-item .btn:hover{
    color:#000;
}

    .stores-sec .img-row {
        height: 100vw;
        min-height: initial;
    }
.stores-sec .txt-row{
margin-top:-90px;
width:calc(100% - 60px);
  padding-bottom:90px;
}

.stores-sec .txt-row .txt-con{
    padding:60px 0;
}
.stores-sec .txt-row .txt-con .head-con{
  margin-bottom:20px;
}
.stores-sec .txt-row .txt-con .head-con .head{
  font-size:19px;
}
.stores-sec .txt-row .txt-con .desc-con{
  margin:30px 0;
}

.stores-sec .txt-row .txt-con .desc-con .desc {
    font-size: 13px;

}

}
