@charset "utf-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1;
  background-color: #ffffff;
}

img {
    max-width: 100%;
}


/*test*/
/* svg {
    display: block;
    padding: 10px;
}

.cls-2{
  fill: none;
  stroke: #009944;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3px;
} */

/*ここからすくろー*/
.scroll-down{
    position: absolute;
    left: 8%;
    top: 70vh;
    height: 20px;
    text-shadow: 0 0 4px #5c5c5c,0 0 4px #3c3c3c;
}
  
.scroll-down span{
  position: absolute;
  left: -20px;
  top: 10px;
  color: rgba(255, 255, 255, 0.717);
  font-size: 18px;
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: ukisizumi 1.8s ease-in-out infinite;
}
  
.scroll-down ::after{
  content: "";
  position: absolute;
  transform-origin: top left;
  transform: rotate(90deg);
  width: 5px;
  height: 40px;
  border-radius: 3px;
  background-color: #ffffff5a;
  box-shadow: 0px 0 3px #333333;
  animation: pathmove 1.8s ease-in-out infinite;
  opacity: 1;
  top: 20px;
}

/* @keyframes pathmove{
    0%{
      height: 0px;
      right: -40px;
      opacity: 0;
    }
    30%{
      height: 80px;
      opacity: 1;
    }
    60%{
      height: 80px;
      opacity: 2;
    }
    100%{
      height: 80px;
      right:70px;
      opacity: 0;
    }
} */

@keyframes pathmove{
    0%{
      height: 0px;
      right: -50px;
      opacity: 0;
    }
    30%{
      height: 80px;
      opacity: 1;
    }
    60%{
      height: 80px;
      opacity: 2;
    }
    100%{
      height: 80px;
      right: 30px;
      opacity: 0;
    }
}
      
@keyframes ukisizumi{
    0%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    70%{
        opacity: 2;
    }
    100%{
        opacity: 0;
    }
}
/*すくろーここまで*/

/*マウスカーソル*/


/*デフォルトのマウスカーソルを非表示にする*/
html,
body,
a {
  cursor: none;
}

/*マウスカーソルを作成*/
.cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00994586;
  filter: drop-shadow(0 0 1px #434343);
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba(90, 90, 90, 0.5);
}


/*カーソルここまで*/





main{
    max-width: 450px;
    width: 100%;
    margin-left: 53%;
    position: relative;
    z-index: 999;
    background-color: #ffffff;
    border-left: #ffffff00 3px solid;
    border-right: #b9b9b900 3px solid;
    box-shadow: 3px 0 10px #d8d8d8, -3px 0 10px #d8d8d8;
}

.maincontents{
    padding-top: 10px;
}

.responcivelogo img{
    margin: 0 auto;
    padding-top: 10px;
    display: block;
    filter: invert(22%) sepia(70%) saturate(7085%) hue-rotate(128deg) brightness(100%) contrast(106%);
}

/* .maincontents{
    background-image: url(../img/resmain.jpeg);
    background-repeat: no-repeat;
    height: calc(100vh - 30px);
    position: relative;
    top: 0;
    z-index: 5;
} */


/*ハンバーガーナビ*/
/* .responcive-nav{
    display: none;
} */

.responcive-nav ul {
    display: block;
    text-align: center;
}

.humberger-open li {
    /* padding: 35px; */
    width: 100%;
    text-align: right;
    font-family: 'Hina Mincho', serif;
font-family: 'PT Serif', serif;
font-family: 'Shippori Mincho B1', serif;
font-family: 'Zilla Slab', serif;
    font-size: 2em;
    border-bottom: #444444 1px solid;
}

.humberger-open li a{
    display: block;
    width: 100%;
    height: 86px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 30px;
    font-weight: 400;
    /* padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 200px; */
    
}

.humberger-open li a:hover{
    background-color: #fff;
    color: #009944;
}


.humnav {
    position: fixed;
    top: 0;
    left: 53%;
    width: 75px;
    height: 75px;
    background-color: #ffffff97;
    z-index: 9999;
    border-bottom-right-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.responcive-nav{
    position: absolute;
    top: 0;
    right: 75px;
    width: 300px;
    color: #ffffff;
    background-color: #747474a5;
    padding-top: 3%;
    padding-bottom: 150px;
    display: none;
    pointer-events: none;
}

.responcive-nav{
    animation-name: fadeUpAnime;
    animation-duration:0.7s;
    animation-fill-mode:forwards;
    /* opacity: 0; */
}


.responcive-nav.is-show {
    display: block;
    pointer-events: auto;
}


.toggle-menu-button {
    display: block;
    width: 75px;
    height: 75px;
    background-image: url(../img/humbergernav.png);
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-bottom-right-radius: 20px;
    outline: none;
}





.toggle-menu-button.is-show{
    display: block;
    width: 75px;
    height: 75px;
    background-image: url(../img/navclose.png);
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-bottom-right-radius: 20px;
    outline: none;
    animation: fadeIn 1.3s;
}

@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/*ハンバーガーここまで*/




.first-view{
    background-image: url(../img/resmain.jpeg);
    background-repeat: no-repeat;
    height: calc(100vh - 25vh);
    margin-top: -10px;
}

.responcivemain{
    margin: 0 auto;
    height: calc(100vh - 118px
    );
}

.responcivemain{
    filter: drop-shadow(0 0 4px #fff);
    filter: drop-shadow(0 0 2px #fff);
}

.responcivemain img{
    padding-top: 40%;
    max-width: 90%;
    display: block;
    margin: 0 auto;
    fill: none;
    filter: drop-shadow(0 0 3px #fff);
}

.salon-name{
    text-align: center;
    margin-top: 20%;
}

.responcive-area{
    margin-top: 12%;
    /* margin-left: 11%; */
    /* width: 100%; */
}

.ukuri{
    position: relative;
    max-width: 450px;
    height: 738px;
    width: 100%;
    margin-left: 0;
    padding-left: 11.4%;
    /* text-align: left; */
    opacity: 0;
}

.ukuri img{
    max-width: 446px;
    width: 100%;
}


.ukuri .headline{
    width: 70%;
    height: 500px;
    background-color: #ffffff;
    position: absolute;
    top: 31.5%;
    padding-top: 5.4%;
    z-index: 1;
}

.ukuri00{
    font-family: 'Hina Mincho', serif;
font-family: 'PT Serif', serif;
font-family: 'Shippori Mincho B1', serif;
font-family: 'Zilla Slab', serif;
    font-size: 2em;
    letter-spacing: 0.12em;
}

.ukuri00::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -22px;
    left: 2px;
    height: 100px;
}/*修正*/

.btext01,.btext02{
    font-family: 'Hina Mincho', serif;
font-family: 'PT Serif', serif;
font-family: 'Shippori Mincho B1', serif;
font-size: 2.2em;
letter-spacing: 0.15em;
}

.btext01{
    margin-top: 17.5%;
    margin-bottom: 8%;
}

.ukuri .textbrock{
    position: absolute;
    top: 66.5%;
    z-index: 2;
    font-size: 1.06em;
    line-height: 1.9em;
}

.concept{
    /* margin-left: -48px; */
    max-width: 446px;
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 0%;
    margin-bottom: 2%;
    color: #ffffff;
    text-shadow: 0px 0px 2px #000000;
    text-shadow: 0px 0px 4px #000000;
    text-shadow: 0px 0px 6px #000000;
    opacity: 0;
}

.concept img{
    max-width: 446px;
    width: 100%;
}

.concept .headline{
    position: absolute;
    top: 12%;
    padding-left: 3.5%;
}

.concept00{
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-size: 2em;
    letter-spacing: 0.12em;
    padding-bottom: 7.2%;
}

.concept00::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -85px;
    left: 5%;
    height: 135px;
}/*修正*/


.concept .textbrock{
    position: absolute;
    top: 65%;
    /* z-index: 3; */
    left: 4%;
    font-size: 1.06em;
    line-height: 1.9em;
}

.stylegallery{
    padding-bottom: 2%;
    position: relative;
}

.stylegallery h3{
    margin-top: 20%;
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-size: 2rem;
    letter-spacing: 0.12em;
    padding-bottom: 7.2%;
    padding-top: 8%;
    text-align: center;
    display: block;
}

.stylegallery h3::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -11.8%;
    left: 23%;
    height: 230px;
}/*修正*/

.grid{
    width: 450px;
    max-width: 100%;
    min-width: 60%;
    margin: 0 auto;
    margin-top: 27px;
    display: grid;
    grid-template-columns: repeat(auto-fit,196px);
    column-gap: 15px;
    row-gap: 25px;
    justify-content: center;
}

.link-button{
    text-align: center;
    margin-top: 6%;
    margin-bottom: 6.5%;
}

.link-button a{
    padding: 10px 50px 10px 25px;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    border: #000000 1px solid;
    border-radius: 2px;
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-weight: 600;
    background-image: url(../img/instaicon.png);
    background-repeat: no-repeat;
    background-position: 85% 52%;
}

.link-button a:hover{
    background-color: #009944;
    color: #fff;
}

.salonmenu{
    position: relative;
    /* height: 680px; */
    width: 100%;
    /* margin-left: 11%; */
    /* text-align: left; */
    color: #ffffff;
    text-shadow: 0px 0px 2px #000000;
    text-shadow: 0px 0px 4px #000000;
    text-shadow: 0px 0px 6px #000000;
}

.salonmenu img{
    max-width: 320px;
    width: 90%;
    /* margin-left: 9.2%; */
    position: absolute;
    top: -15%;
    right: 0;
    z-index: 1;
}

.bggrey{
    background-color: #e1f1da;
    margin-top: 32.4%;
    max-width: 446px;
    width: 100%;
    height: 428px;
    position: relative;
}

.salontext{
    background-color: #bebebe;
    z-index: 10;
    position: absolute;
    top: 12%;
    padding-top: 10%;
    left: 4%;
    text-align: center;
    width: 92%;
    height: 377px;
}

.salonmenu00{
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-size: 2rem;
    letter-spacing: 0.12em;
    padding-bottom: 7.2%;
    text-align: center;
}

.salonmenu00::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -82px;
    left: 28%;
    height: 180px;
}/*修正*/

.salontext .text{
    position: absolute;
    top: 36%;
    /* z-index: 3; */
    left: 6%;
    font-size: 1.0em;
    line-height: 1.62em;
    text-align: left;
}

.menu-link-button{
    position: absolute;
    top: 82.5%;
    left: 33%;
    color: #000000;
    text-shadow: none;
}

.menu-link-button a{
    padding: 10px 50px 10px 25px;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    border: #000000 1px solid;
    border-radius: 2px;
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-weight: 600;
    background-image: url(../img/outlinkjump.png);
    background-repeat: no-repeat;
    background-position: 85% 52%;
}

.menu-link-button a:hover{
    background-color: #009944;
    color: #fff;
    background-image: url(../img/outlink.png);
    background-repeat: no-repeat;
    width: 80%;
    /* padding-bottom: 2%; */
    background-position: 92% 90%;
}


.instagram{
    margin-top: 15%;
    padding-top: 10%;
    position: relative;
}

.instagram .instatitle{
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-size: 2rem;
    letter-spacing: 0.12em;
    padding-bottom: 13.2%;
    text-align: center;
}

.instatitle::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -70px;
    left: 30%;
    height: 170px;
}/*修正*/


.instaimage-grid{
    width: 450px;
    max-width: 100%;
    min-width: 60%;
    margin: 0 auto;
    margin-left: 2%;
    display: grid;
    grid-template-columns: repeat(auto-fit,140px);
    column-gap: 2px;
    row-gap: 6px;
    justify-content: center;
}

.instagram .link-button{
    margin-top: 10%;
}


.calendar{
    margin-top: 15%;
    position: relative;
}

.calendar02{
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-size: 2em;
    letter-spacing: 0.12em;
    padding-bottom: 7.2%;
    text-align: center;
    padding-top: 10%;
    color: #ffffff;
    text-shadow: 0px 0px 2px #000000;
    text-shadow: 0px 0px 4px #000000;
    text-shadow: 0px 0px 6px #000000;
}

.calendar02::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -50px;
    left: 32%;
    height: 155px;
}/*修正*/

.calendar00{
    background-color: #bebebe;
}

.calendar00 img{
    max-width: 446px;
    width: 90%;
    padding-top: 7.5%;
    margin-left: 7.8%;
}

.textbrock01{
    margin-top: 8%;
    margin-left: 4%;
}

.textbrock02{
    margin-top: 4.5%;
    margin-left: 4%;
}

.calendarmidashi01,.calendarmidashi02{
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-size: 1rem;
}

.c-text01,.c-text02{
    padding-top: 4%;
    font-size: 0.81rem;
    line-height: 1.3rem;
}

.c-text02{
    padding-bottom: 10%;
}


iframe{
    filter: grayscale(1);
    max-width: 446px;
    width: 100%;
}

.access-text-area{
    margin-left: 4.8%;
    margin-bottom: 11.5%;
    position: relative;
}

.accessmidashi{
    font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
    font-size: 2em;
    letter-spacing: 0.12em;
    padding-bottom: 13%;
    padding-top: 8%;
}

.accessmidashi::after{
    content: "";
    position: absolute;
    border: #009944 1px solid;
    transform-origin: left bottom;
    transform: rotate(90deg);
    top: -28px;
    left: 0.5%;
    height: 110px;
}/*修正*/


.ukuri-access p{
    margin-top: 2.5%;
    font-size: 0.8rem;
}

.adress{
    margin-top: 9%;
    font-size: 0.8rem;
    margin-bottom: 7.3%;
}

.moyori{
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    line-height: 1.62em;
}

.tel-reserbe h3{
    font-size: 0.77em;
    text-align: center;
    font-weight: normal;
}

.tel-reserbe p{
    margin-top: 4%;
    font-size: 1.52em;
    text-align: center;
    color: #009944;
}

.outlink-reserbe{
    margin-top: 1.5%;
    background-color: #dbdbdb;
    height: 83px;
    text-align: center;
    font-size: 0.8rem;
}

.outlink-button{
    padding-top: 2.2%;
    /* padding-bottom: 5%; */
}

.outlink-button p{
    padding-top: 3%;
    padding-bottom: 3%;
    border: 1px #009944 solid;
    margin: 0 5% 0;
}

.outlink-button a:hover{
    background-color: #009944;
    color: #fff;
}

.move-frame{
    height: auto;
    background-image: url(../img/hair01.gif);
    background-repeat: no-repeat;
    max-width: 450px;
    width: 100%;
    padding-bottom: 3%;
    background-size: 100%;
    text-align: center;
}

.footerlogo img{
    margin-top: 4%;
}

.move-frame .link-button{
    margin-top: 11.5%;
}

@media (max-width: 950px) {/*767*/

    .maincontents{
        margin: 0 auto;
        font-size: 0.8rem;
        background-color: #ffffff;
    }

    .mainlogo{
        position: fixed;
        top: 25px;
        left: 2%;
        z-index: 10;
        width: 100px;
        height: auto;

    }
    
    .main02{
        position: fixed;
        top: 0;   
        left: 43%;
        z-index: -1;
        opacity: 0.7;
    }
    
    .main01{
        position: fixed;
        top: 130px;
        left: -80px;
        z-index: -2;
        opacity: 0.7;
    }
    
    .main00{
        position: fixed;
        top: 30%;
        left: 27%;
        width: 45%;
        text-align: center;
        opacity: 0.7;
    }
    
    .main03{
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 45%;
        opacity: 0.7;
    }
    
    .main04{
        position: fixed;
        bottom: 0;
        left: 45.5%;
        z-index: 2;
        opacity: 0.7;
    }
    
    .main05{
        position: fixed;
        top: 0;
        right: 0%;
        opacity: 0.7;
    }
    
    .main06{
        position: fixed;
        bottom: 3%;
        right: 0;
        width: 25%;
        text-align: right;
        opacity: 0.7;
    }



    .responcive-nav ul {
        display: block;
        text-align: center;
    }
    
    .humberger-open li {
        /* padding: 35px; */
        width: 100%;
        text-align: left;
        font-family: 'Hina Mincho', serif;
    font-family: 'PT Serif', serif;
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Zilla Slab', serif;
        font-size: 2em;
        border-bottom: #444444 1px solid;
    }
    
    .humberger-open li a{
        display: block;
        width: 100%;
        height: 86px;
        padding-top: 25px;
        padding-left: 20px;
        font-weight: 400;
        /* padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 200px; */
        
    }
    
    .humberger-open li a:hover{
        background-color: #fff;
        color: #009944;
    }
    
    
    .humnav {
        position: fixed;
        top: 0;
        left: 21%;
        width: 75px;
        height: 75px;
        background-color: #ffffff97;
        z-index: 9999;
        border-bottom-right-radius: 20px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    
    .responcive-nav{
        position: absolute;
        top: 100%;
        left: 0;
        width: 450px;
        color: #ffffff;
        background-color: #747474d0;
        padding-top: 3%;
        padding-bottom: 8%;
        display: none;
    }
    
    
    .responcive-nav.is-show {
        display: block;
    
    }
    
    
    .toggle-menu-button {
        display: block;
        width: 75px;
        height: 75px;
        background-image: url(../img/humbergernav.png);
        background-size: 65%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        border-bottom-right-radius: 20px;
        outline: none;
    }





    .first-view{
        background-image: url(../img/resmain.jpeg);
        background-repeat: no-repeat;
        height: calc(100vh - 15vh);
        margin-top: -10px;
    }




    .scroll-down{
        position: absolute;
        left: 50%;
        top: 65vh;
        height: 20px;
        text-shadow: 0 0 4px #5c5c5c,0 0 4px #3c3c3c;
    }
      
    .scroll-down span{
      position: absolute;
      left: -22px;
      top: 30px;
      color: rgba(255, 255, 255, 0.717);
      font-size: 18px;
      transform-origin: top left;
      transform: rotate(-90deg);
      animation: ukisizumi 1.8s ease-in-out infinite;
    }
      
    .scroll-down ::after{
      content: "";
      position: absolute;
      transform-origin: top left;
      transform: rotate(90deg);
      width: 10px;
      height: 40px;
      border-radius: 5px;
      background-color: #ffffff5a;
      box-shadow: 0px 0 3px #333333;
      animation: pathmove 1.8s ease-in-out infinite;
      opacity: 1;
      top: 25px;
    }
    
    @keyframes pathmove{
        0%{
          height: 0px;
          right: 70px;
          opacity: 0;
        }
        30%{
          height: 80px;
          opacity: 1;
        }
        60%{
          height: 80px;
          opacity: 2;
        }
        100%{
          height: 80px;
          right: 0px;
          opacity: 0;
        }
    }





    .ukuri,.stylegallery,.salonmenu,.instagram,.access-area{
        background-color: #fff;
    }

    .ukuri{
        margin-left: 0;
        padding-left: 11.4%;
    }


    /*デフォルトのマウスカーソルを非表示にする*/
html,
body,
a {
  cursor:auto
}

/*マウスカーソルを作成*/
.cursor {
  display: none;
}

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
  display: none;
}


/*カーソルここまで*/



}


@media (max-width: 461px) {
    .firstimage{
        display: none;
    }

    .maincontents{
        margin: 0 auto;
        font-size: 0.7rem;
    }
}

@media (max-width: 430px) {
    .style09{
        display: none;
    }

    .maincontents{
        margin: 0 auto;
        font-size: 0.7rem;
    }

    .humnav {
        position: fixed;
        top: 0;
        left: 0%;
        width: 75px;
        height: 75px;
        background-color: #ffffff97;
        z-index: 9999;
        border-bottom-right-radius: 20px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 430px) {

    .grid{
        width: 380px;
        max-width: 100%;
        /* min-width: 60%; */
        margin: 0 auto;
        margin-top: 27px;
        display: grid;
        grid-template-columns: repeat(auto-fit,140px);
        column-gap: 15px;
        row-gap: 25px;
        justify-content: center;
    }

    .ukuri00::after{
        margin-top: -4%;
        /* height: 70px; */
    }

    .stylegallery h3::after{
        margin-top: -3%;
        height: 200px;
    }

    .salonmenu00{
        margin-left: -3%;
        
    }

}