@charset "UTF-8";

/* CONTENTS */
.inner {
  width: 102.4rem;
  max-width: 80%;
  margin: auto;
  position: relative;
  z-index: 0;
}

/* MV */
.mv {
  width: 100%;
  height: 180vw;
  position: relative;
  z-index: 0;
}

.mv-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-inner{
  background: url(../../asset/images/bg_sp_inner_mv.png) no-repeat top left / cover;
  width: 100%;
  height: 180vw;
  position: absolute;
  top: 0;
  left: 0;
}

.mv .mv-inner > img{
  position: absolute;
  top: 62vw;
  left: 10vw;
  width: 50vw;
  z-index: 4;
}

.mv .mv-inner .mv-slide {
  position: absolute;
  top: 55vw;
  right: 10vw;
  width: 75vw;
  z-index: 1;
}

.mv .mv-inner .mv-slide li > img{
  width: 100%;
}

.mv p {
  position: absolute;
  top: 24vw;
  left: 12vw;
  font-size: 5vw;
  letter-spacing: 0.5vw;
  color: #222855;
  line-height: 1.6;
  z-index: 2;
}

.mv p > span:nth-of-type(1) {
  font-size: 7vw;
}

.mv p > span:nth-of-type(2) {
  font-size: 2.6rem;
}

.slash-line {
  width: 8vw;
  height: 8vw;
  position: absolute;
  top: 50vw;
  left: 23vw;
  z-index: 3;
}

.slash-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 141%;
  background-color: #252840;
  transform: rotate(45deg);
  transform-origin: top left;
}

/* CONCEPT */
.concept {
  padding: 20vw 0 20vw;
}

.concept-inner {
  width: 102.4rem;
  height: max(105rem,210vw);
  max-width: 100%;
  margin: auto;
  position: relative;
  z-index: 0;
}

.concept > .concept-inner > img {
  width: min(56vw, 327px);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 12vw;
}

.concept__text-area {
  position: absolute;
  top: 30vw;
  right: 0;
  width: 100%;
  padding: 50vw 6.4vw 10vw;
  background: #fcf7fc;
  z-index: 1;
}

.concept__text-area > h2 > img {
  width: 24vw;
  margin: 0 0 5vw;
}

.concept__text-area > p {
  color: #3c3c3c;
}

.concept__text-area > p:first-of-type {
  font-size: max(1.8rem,3vw);
  line-height: 1.8;
  margin: 0 0 5vw;
  letter-spacing: 4.56px;
}

.concept__text-area > p:not(:first-of-type) {
  font-size: max(1.4rem,2.4vw);
  line-height: 1.8;
  margin: 0 0 5vw;
  letter-spacing: 1.65px;
}

.bt-view__concept{
  text-align: right;
}

.view-concept {
  position: relative;
  display: inline-block;
  font-size: 3.6vw;
  color: #b990e1;
  padding: 5.5vw;
  letter-spacing: 1px;
}

.circle {
  width: 4vw;
  height: 4vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

circle {
  fill: none;
  stroke-width: 1.5px;
  transform: rotate(20deg);
  transform-origin: center;
}

.bg {
  stroke: #e8d8f4;
}

.fg {
  stroke: #B990E1;
  stroke-dasharray: 365;
  stroke-dashoffset: 365;
  transition: stroke-dashoffset 0.3s linear;
}

.view-concept:hover .fg {
  stroke-dashoffset: 0;
}

.text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  top: 0;
  left: -0.7vw;
}

/* PICKUP HAIR STYLE */
.pickup-hairstyle {
  padding: 0 0 10vw 2rem;
}

.pickup-hairstyle-inner {
  width: 102.4rem;
  max-width: 100%;
  margin: auto;
  position: relative;
  z-index: 0;
}

.pickup-hairstyle-inner > h2 > img {
  width: 65vw;
  margin: 0 0 10vw;
}

.pickup-hairstyle-inner > p {
  font-size: max(1.1rem,1vw);
  line-height: 1.8;
  margin: 0 0 4vw;
  display: none;
  letter-spacing: 1.65px;
}

.pickup-hairstyle-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0 4rem;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.pickup-hairstyle-list li {
  width: 30%;
  flex: 0 0 80%;
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  .pickup-hairstyle-list {
    cursor: grab;
  }
  .pickup-hairstyle-list.dragging {
    cursor: grabbing;
  }
}

.pickup-hairstyle-list li > img {
  width: 100%;
  margin: 0 0 1rem;
  user-select: none;      /* テキスト選択防止 */
  -webkit-user-drag: none; /* 画像ドラッグ防止（Safari, Chrome） */
  pointer-events: none;
}

.pickup-hairstyle-list li > span {
  font-size: 4.4vw;
  color: #c6a4cf;
  text-align: center;
  display: block;
  letter-spacing: 2.04px;
}

.pickup-hairstyle-list::-webkit-scrollbar {
  display: none;
}

/* MENU */
.menu {
  padding: 0 0 15vw;
}

.menu-inner {
  width: 102.4rem;
  max-width: 90%;
  margin: auto;
  background: #f4fcff;
  padding: 10vw 5vw;
  position: relative;
}

.menu-inner > img{
  position: absolute;
  right: -4vw;
  bottom: -3vw;
  width: max(5.5rem,12vw);
}

.menu-inner > h2 > img {
  width: 21.3vw;
  margin: 0 0 10vw;
}

.menu-inner > p:nth-of-type(1){
  font-size: max(1.3rem,2.3vw);
  color: #494850;
  text-align: left;
  margin: 0 0 10vw;
  line-height: 1.5;
  letter-spacing: 1.5px;
}

.menu-inner > p:nth-of-type(2){
  font-size: max(1.4rem,2.4vw);
  color: #B98DE1;
  text-align: center;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1.95px;
}

.menu-slash-line {
  width: 3vw;
  height: 3vw;
  position: absolute;
  top: 6vw;
  left: 4.5vw;
}

.menu-slash-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 141%;
  background-color: #252840;
  transform: rotate(45deg);
  transform-origin: top left;
}

.menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto 10vw;
  gap: 15vw 0;
  flex-direction: column;
  letter-spacing: 1.5px;
}

.menu-list li {
  width: 100%;
  position: relative;
}

.menu-list li:nth-of-type(1) > img{width: 16.2vw;margin: 0 0 10vw;}
.menu-list li:nth-of-type(2) > img{width: 10vw;margin: 0 0 10vw;}
.menu-list li:nth-of-type(3) > img{width: 24.6vw;margin: 0 0 10vw;}
.menu-list li:nth-of-type(4) > img{width: 18.5vw;margin: 0 0 10vw;}
.menu-list li:nth-of-type(5) > img{width: 30.8vw;margin: 0 0 10vw;}
.menu-list li:nth-of-type(6) > img{width: 17.2vw;margin: 0 0 10vw;}

.menu-list__price {
  font-size: max(1.4rem,2.4vw);
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 4vw 0;
  color: #494850;
}

.menu-list__price dt {
  width: 65%;
  font-weight: normal;
}

.menu-list__price dd {
  width: 30%;
  text-align: right;
}

.bt-reservation{
  font-size: max(1.5rem,2.5vw);
  color: #B98DE1;
  background: #FFF;
  width: 45vw;
  box-shadow: 0 0 5px #EAEAEA;
  text-align: center;
  margin: 0 auto 1rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.5vw;
}

.bt-reservation:hover{
  opacity: 0.7;
}

.bt-reservation > a{
  display: block;
  padding: 5vw;
}

/* BLOG */
.blog{
  padding: 0 0 20vw;
}

.blog-inner{
  width: 102.4rem;
  max-width: 90%;
  margin: auto;
}

.blog-inner > h2 > img{
  width: 18vw;
  margin: 0 0 10vw;
}

.bt-view{
  width: 100%;
  text-align: right;
  padding: 0;
}

.view-all {
  position: relative;
  display: inline-block;
  font-size: 3.6vw;
  color: #b990e1;
  padding: 5vw;
  letter-spacing: 1px;
}

.circle {
  width: 15vw;
  height: 15vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

circle {
  fill: none;
  stroke-width: 1.5px;
  transform: rotate(20deg);
  transform-origin: center;
}

.bg {
  stroke: #e8d8f4;
}

.fg {
  stroke: #B990E1;
  stroke-dasharray: 365;
  stroke-dashoffset: 365;
  transition: stroke-dashoffset 0.3s linear;
}

.view-all:hover .fg {
  stroke-dashoffset: 0;
}

.text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  top: 0;
  left: 0;
}

.blog-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 10vw;
}

.blog-list li{
  width: 100%;
}

.blog-contents{
  width: 100%;
  font-size: max(1.7rem,2.7vw);
  color: #313131;
}

.blog-contents li{
  width: 100%;
  margin: 0 0 5vw;
  line-height: 1.5;
}

.blog-contents li:nth-of-type(2){
  letter-spacing: 2.04px;
}

.blog-contents li:nth-of-type(3){
  font-size: max(1.3rem,2.3vw);
  letter-spacing: 1.56px;
}

.blog-contents li:nth-of-type(4){
  letter-spacing: 3.84px;
}

.blog-contents li > a > img{
  width: 100%;
}

.blog-contents li > a{
  display: block;
  padding: 0 0 5px;
}

.blog-contents li > a > span{
  position: relative;
  color: #C6A4CF;
  display:block;
}

.blog-contents li > a > span::before{
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  background: #C6A4CF;
  bottom: -5px;
  left: 0;
  will-change: transform;
  transition:.3s;
}

.blog-contents li > a:hover > span::before{
  width: 100%;
}

/* SLIDE */
.slide {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 0 55vw;
}

.slider{
  display:flex;
  gap:1rem;
}

.slider img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.slider .slick-track {
  display: flex;
}

.slider .slick-slide {
  margin-right: 10px;
}

.slider .slick-slide:last-of-type {
  margin-right: 0;
}

.slick-track {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

.instagram{
  position: absolute;
  top: 55vw;
  right: 0;
  width: 100%;
  background: #FCFCFC;
  height: 100%;
  z-index: 1;
}

.instagram p:hover{
  color: #C6A4CF;
}

.instagram-inner{
  position: relative;
}

.instagram-inner > img{
  width: 60vw;
  position: absolute;
  top: 2vw;
  left: 50%;
  transform: translateX(-50%);
}

.instagram-inner > p{
  font-size: 4.5vw;
  color: #5A5A5A;
  position: absolute;
  top: 25vw;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 2.08px;
}

.instagram-slash-line {
  width: 6vw;
  height: 6vw;
  position: absolute;
  top: 15vw;
  left: 28vw;
}

.instagram-slash-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 141%;
  background-color: #252840;
  transform: rotate(45deg);
  transform-origin: top left;
}

/* ACCESS */
.access{
  padding: 0 0 10vw;
}

.access-inner{
  width: 102.4rem;
  max-width: 90%;
  margin: auto;
}

.access-inner > h2 > img{
  width: 24.8vw;
  margin: 0 0 7vw;
}

.access iframe {
  width: 100%;
  height: 70vw;
  aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
}

.access-box{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 7vw;
}

.access-box-map{
  width: 100%;
}

.access-box-detail{
  width: 100%;
  color: #313131;
  padding: 0 0 5rem;
}

.access-box-detail > h3:nth-of-type(2){
  font-size: max(1.6rem,2.6vw);
  margin: 0 0 3vw;
  letter-spacing: 1.95px;
}

.access-box-detail > h3 > img{
  width: 33vw;
  margin: 0 0 5vw;
}

.access-box-detail > h3 > span{
  border-bottom: 1px #313131 solid;
  padding: 0 0 0.2vw;
}

.access-box-detail > p:nth-of-type(1){
  font-size: max(1.4rem,2.4vw);
  line-height: 1.7;
  margin: 0 0 5vw;
  letter-spacing: 1.95px;
}

.access-box-detail > p:nth-of-type(2){
  font-size: max(1.3rem,2.3vw);
  line-height: 1.7;
  letter-spacing: 1.95px;
}

@media screen and (min-width: 769px){
  /* CONTENTS */
  .inner {
    width: 102.4rem;
    max-width: 80%;
    margin: auto;
    position: relative;
    z-index: 0;
  }

  /* MV */
  .mv {
    width: 100%;
    height: unset;
    padding-top: 56.25%;
    position: relative;
    z-index: 0;
  }

  .mv-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mv-inner{
    background: url(../../asset/images/bg_inner_mv.png) no-repeat top left / cover;
    width: 100%;
    height: unset;
    padding-top: 56.25%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .mv .mv-inner > img{
    position: absolute;
    top: 32vw;
    left: 25vw;
    width: 19.07vw;
    z-index: 1;
  }

  .mv .mv-inner .mv-slide {
    position: absolute;
    top: 5vw;
    right: 20vw;
    width: 32.227vw;
    z-index: 1;
  }

  .mv .mv-inner .mv-slide li > img{
    width: 100%;
  }

  .mv p {
    position: absolute;
    top: 15vw;
    left: 25vw;
    font-size: 2vw;
    letter-spacing: 0.5vw;
    color: #222855;
    line-height: 1.6;
    z-index: 2;
  }

  .mv p > span:nth-of-type(1) {
    font-size: 2.8vw;
  }

  .mv p > span:nth-of-type(2) {
    font-size: 2.8vw;
  }

  .slash-line {
    width: 3.5vw;
    height: 3.5vw;
    position: absolute;
    top: 26vw;
    left: 30vw;
  }

  .slash-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 141%;
    background-color: #252840;
    transform: rotate(45deg);
    transform-origin: top left;
  }

  /* CONCEPT */
  .concept {
    padding: 10vw 0 7vw;
  }

  .concept-inner {
    width: 102.4rem;
    height: max(55rem,50vw);
    max-width: 80%;
    margin: auto;
    position: relative;
    z-index: 0;
  }

  .concept > .concept-inner > img {
    width: min(26.5vw, 327px);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
  }

  .concept__text-area {
    position: absolute;
    top: 3vw;
    right: 0;
    width: min(55vw, 747px);
    padding: 2vw 6vw;
    background: #fcf7fc;
    z-index: 1;
  }

  .concept__text-area > h2 > img {
    width: 6vw;
    margin: 0 0 1.5vw;
  }

  .concept__text-area > p {
    color: #3c3c3c;
  }

  .concept__text-area > p:first-of-type {
    font-size: max(1.7rem,1.6vw);
    line-height: 1.8;
    margin: 0 0 1.5vw;
    letter-spacing: 4.56px;
  }

  .concept__text-area > p:not(:first-of-type) {
    font-size: max(1.1rem,1vw);
    line-height: 1.8;
    margin: 0 0 1.5vw;
    letter-spacing: 1.65px;
  }

  .bt-view__concept{
    text-align: left;
  }

  .view-concept {
    position: relative;
    display: inline-block;
    font-size: 1vw;
    color: #b990e1;
    padding: 2vw;
    letter-spacing: 1px;
  }

  .circle {
    width: 4vw;
    height: 4vw;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  circle {
    fill: none;
    stroke-width: 1.5px;
    transform: rotate(20deg);
    transform-origin: center;
  }

  .bg {
    stroke: #e8d8f4;
  }

  .fg {
    stroke: #B990E1;
    stroke-dasharray: 365;
    stroke-dashoffset: 365;
    transition: stroke-dashoffset 0.3s linear;
  }

  .view-concept:hover .fg {
    stroke-dashoffset: 0;
  }

  .text {
    position: relative;
    z-index: 2;
    white-space: nowrap;
    top: 0;
    left: -0.7vw;
  }

  /* PICKUP HAIR STYLE */
  .pickup-hairstyle {
    padding: 0 0 10vw;
  }

  .pickup-hairstyle-inner {
    width: 102.4rem;
    max-width: 80%;
    margin: auto;
    position: relative;
    z-index: 0;
  }

  .pickup-hairstyle-inner > h2 > img {
    width: 21.03vw;
    margin: 0 0 1vw;
  }

  .pickup-hairstyle-inner > p {
    font-size: max(1.1rem,1vw);
    line-height: 1.8;
    margin: 0 0 4vw;
    display: block;
    letter-spacing: 1.65px;
  }

  .pickup-hairstyle-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5vw 0;
    overflow: initial;
  }

  .pickup-hairstyle-list li {
    width: 30%;
    flex: initial;
  }

  .pickup-hairstyle-list li > img {
    width: 100%;
    margin: 0 0 1rem;
  }

  .pickup-hairstyle-list li > span {
    font-size: 1.2vw;
    color: #c6a4cf;
    text-align: center;
    display: block;
    letter-spacing: 2.04px;
  }

  /* MENU */
  .menu {
    padding: 0 0 10vw;
  }

  .menu-inner {
    width: 102.4rem;
    max-width: 80%;
    margin: auto;
    background: #f4fcff;
    padding: 5vw;
    position: relative;
  }

  .menu-inner > img{
    position: absolute;
    right: 1vw;
    bottom: 2vw;
    width: 6.5vw;
  }

  .menu-inner > h2 > img {
    width: 6.381vw;
    margin: 0 0 4vw;
  }

  .menu-inner > p:nth-of-type(1){
    font-size: max(1.1rem,1vw);
    color: #494850;
    text-align: center;
    margin: 0 0 3vw;
    letter-spacing: 1.5px;
  }

  .menu-inner > p:nth-of-type(2){
    font-size: max(1.1rem,1vw);
    color: #B98DE1;
    text-align: center;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 1.95px;
  }

  .menu-slash-line {
    width: 1vw;
    height: 1vw;
    position: absolute;
    top: 1.8vw;
    left: 1.3vw;
  }

  .menu-slash-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 141%;
    background-color: #252840;
    transform: rotate(45deg);
    transform-origin: top left;
  }

  .menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 87%;
    margin: 0 auto 5vw;
    gap: 5vw 0;
    flex-direction: row;
    letter-spacing: 1.5px;
  }

  .menu-list li {
    width: 45%;
    position: relative;
  }

  .menu-list li:nth-of-type(1) > img{ width: 4.558vw; margin: 0 0 3.5vw; }
  .menu-list li:nth-of-type(2) > img{width: 2.8vw;margin: 0 0 3.5vw;}
  .menu-list li:nth-of-type(3) > img{width: 7vw;margin: 0 0 3.5vw;}
  .menu-list li:nth-of-type(4) > img{width: 5.2vw;margin: 0 0 3.5vw;}
  .menu-list li:nth-of-type(5) > img{width: 8.7vw;margin: 0 0 3.5vw;}
  .menu-list li:nth-of-type(6) > img{width: 4.8vw;margin: 0 0 3.5vw;}

  .menu-list__price {
    font-size: max(1.1rem,1vw);
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 1vw 0;
    color: #494850;
  }

  .menu-list__price dt {
    width: 70%;
    font-weight: normal;
  }

  .menu-list__price dd {
    width: 30%;
    text-align: right;
  }

  .bt-reservation{
    font-size: 1.4rem;
    color: #B98DE1;
    background: #FFF;
    width: 20rem;
    box-shadow: 0 0 5px #EAEAEA;
    text-align: center;
    margin: 0 auto 1vw;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.23vw;
  }

  .bt-reservation > a{
    display: block;
    padding: 1.4rem;
  }

  /* BLOG */
  .blog{
    padding: 0 0 10vw;
  }

  .blog-inner{
    width: 102.4rem;
    max-width: 80%;
    margin: auto;
  }

  .blog-inner > h2 > img{
    width: 6.4vw;
    margin: 0 0 2vw;
  }

  .bt-view{
    width: 100%;
    text-align: right;
  }

  .view-all {
    position: relative;
    display: inline-block;
    font-size: 1vw;
    color: #b990e1;
    padding: 2vw 0 2vw 2vw;
    letter-spacing: 1px;
  }

  .circle {
    width: 4vw;
    height: 4vw;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  circle {
    fill: none;
    stroke-width: 1.5px;
    transform: rotate(20deg);
    transform-origin: center;
  }

  .bg {
    stroke: #e8d8f4;
  }

  .fg {
    stroke: #B990E1;
    stroke-dasharray: 365;
    stroke-dashoffset: 365;
    transition: stroke-dashoffset 0.3s linear;
  }

  .view-all:hover .fg {
    stroke-dashoffset: 0;
  }

  .text {
    position: relative;
    z-index: 2;
    white-space: nowrap;
    top: 0;
    left: -0.7vw;
  }

  .blog-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    gap: unset;
  }

  .blog-list li{
    width: 30%;
  }

  .blog-contents{
    width: 100%;
    font-size: max(1.1rem,1vw);
    color: #313131;
  }

  .blog-contents li{
    width: 100%;
    margin: 0 0 1vw;
    line-height: 1.5;
  }

  .blog-contents li:nth-of-type(2){
    letter-spacing: 2.04px;
  }

  .blog-contents li:nth-of-type(3){
    font-size: max(1rem,.9vw);
    letter-spacing: 1.56px;
  }

  .blog-contents li:nth-of-type(4){
    letter-spacing: 3.84px;
  }

  .blog-contents li > a > img{
    width: 100%;
  }

  .blog-contents li > a{
    display: block;
    padding: 0 0 5px;
  }

  .blog-contents li > a > span{
    position: relative;
    color: #C6A4CF;
    display:block;
  }

  .blog-contents li > a > span::before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    background: #C6A4CF;
    bottom: -5px;
    left: 0;
    will-change: transform;
    transition:.3s;
  }

  .blog-contents li > a:hover > span::before{
    width: 100%;
  }

  /* SLIDE */
  .slide {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 0 13vw;
  }

  .slider li img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  .slider .slick-track {
    display: flex;
  }

  .slider .slick-slide {
    margin-right: 10px;
  }

  .slider .slick-slide:last-of-type {
    margin-right: 0;
  }

  .slick-track {
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
  }

  .instagram{
    position: absolute;
    top: 0;
    right: 0;
    width: 39vw;
    background: #FCFCFC;
    height: 100%;
    z-index: 1;
  }

  .instagram-inner{
    position: relative;
  }

  .instagram-inner > img{
    width: 15.2vw;
    position: absolute;
    top: 2vw;
    left: 5vw;
    transform: unset;
  }

  .instagram-inner > p{
    font-size: 1.1vw;
    color: #5A5A5A;
    position: absolute;
    top: 10vw;
    left: 5vw;
    transform: unset;
    letter-spacing: 2.08px;
  }

  .instagram-slash-line {
    width: 2.5vw;
    height: 2.5vw;
    position: absolute;
    top: 6vw;
    left: 8vw;
  }

  .instagram-slash-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 141%;
    background-color: #252840;
    transform: rotate(45deg);
    transform-origin: top left;
  }

  /* ACCESS */
  .access{
    padding: 0 0 10vw;
  }

  .access-inner{
    width: 102.4rem;
    max-width: 70%;
    margin: auto;
  }

  .access-inner > h2 > img{
    width: 8.4vw;
    margin: 0 0 3vw;
  }

  .access iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
  }

  .access-box{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  .access-box-map{
    width: 47%;
  }

  .access-box-detail{
    width: 47%;
    color: #313131;
    padding: 0 0 5rem;
  }

  .access-box-detail > h3:nth-of-type(2){
    font-size: max(1.3rem,1.2vw);
    margin: 0 0 1.2vw;
    letter-spacing: 1.95px;
  }

  .access-box-detail > h3 > img{
    width: 10.55vw;
    margin: 0 0 1.5vw;
  }

  .access-box-detail > h3 > span{
    border-bottom: 1px #313131 solid;
    padding: 0 0 0.2vw;
  }

  .access-box-detail > p:nth-of-type(1){
    font-size: max(1.1rem,1vw);
    line-height: 1.7;
    margin: 0 0 1.5vw;
    letter-spacing: 1.95px;
  }

  .access-box-detail > p:nth-of-type(2){
    font-size: max(1.1rem,1vw);
    line-height: 1.7;
    letter-spacing: 1.95px;
  }
}