@charset "UTF-8";
/*==========================
main
==========================*/
/* mainVisual */
.article__header {
  margin-top: 120px;
}
.mainVisual {
  height: 350px;
  width: 89.7%;
  position: relative;
  margin: 0 auto;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  object-fit: contain;
  
  animation: image-switch-animation 25s infinite;
}

.src1 {
  background-image: url(../image/shop06.jpg);
}
.src2 {
  background-image: url(../image/design02.gif);
  background-position: 0% 81%;
}
.src3 {
  background-image: url(../image/design03.jpg);
  background-position: 0% 95%;
}
.src4 {
  background-image: url(../image/shop05.jpg);
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  15%{ opacity: 1;}
  25%{ opacity: 1;}
  40%{ opacity: 0;}
  100%{ opacity: 0;}
}

.mainVisual_copy {
  padding: 10px 0 0 0;
  margin: 0 auto;
  width: 89.7%;
  display: flex;
  align-items: center; 
  justify-content: space-between;
}

.mainVisual_copy p {
  color: var(--primary-gray);
  font-size: 1.2rem;
  font-weight: 400;
}

.mainCaption {
  margin: 0 auto;
  padding: 50px 5.1% 0;
}

.mainCaption__heading {
  color: var(--primary-black);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 1px;
}

.mainCaption__lead {
  margin-top: 10px;
  color: var(--primary-black);
  font-size: 1.8rem;
  font-weight: 100;
  letter-spacing: 2px;
}

.mainCaption__txt {
  margin-top: 20px;
  color: var(--primary-black);
  font-size: 1.2rem;
  line-height: 3;
  letter-spacing: 0.3px;
  font-weight: 400;
}

.pcBr {
  display: none;
}

/* .mainVisual pc */
@media screen and (min-width:769px) {
  .article__header {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0px;
  }
  
  .mainVisual_group {
    width: 100%;
    margin-top: 120px;
    padding: 0 7.5% 50px;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .mainVisual {
    width: 100%;
    height: 510px;
  }
  
  .mainVisual_copy {
    justify-content: flex-start;
    width: 100%;
    flex-direction: row-reverse;
  }
  
  .mainVisual_copy p {
    font-size: 1.4rem;
    font-weight: 300;
    margin-left: 40px;
  }

  .mainCaption {
    padding: 50px 2% 0 5.5%;
    margin: 0;
    display:flex;
    flex-flow: column;
    justify-content:flex-end;
    text-align: center;
  }

  .mainCaption__heading {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 3px;
  }

  .spBr {
    display: none;
  }

  .mainCaption__lead {
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 8px;
    margin-top: 10px;
  }

  .mainCaption__txt {
    margin-top: 56px;
    font-size: 1.5rem;
    line-height: 4.5;
    letter-spacing: 1px;
  }

  .pcBr {
    display: block;
  }

}/* pc 769px */

/* about */
.section--about {
  padding: 130px 5.1% 50px;
}

.area {
  display: flex;
  flex-direction: column-reverse;
}

.about_img {
  height: 145px;
  width: 100%;
  background-image: url(../image/top_about.gif);
  background-size: 100%;
  background-position: 0% 70%;
  object-fit: cover;
  object-position: 100% 100%;
}

.about__txt {
  color: var(--primary-black);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.btn--top1,
.btn--top2 {
  margin-top: 35px;
}

/* .about pc */
@media screen and (min-width:769px) {
  .section--about {
    padding: 50px 0 50px;
    text-align: center;
  }

  .area {
    flex-direction: column;
    padding: 0 10%;
  }

  .about__txt {
    font-size: 1.5rem;
    line-height: 4.5;
  }

  .about_img {
    /* margin-left: 6.9%; */
    margin-top: 50px;
    width: 800px;
    height: 350px;
  }

}/* pc 769px */

/* shopimage */
.shopimage {
  padding: 80px 0 0;
}

.shopimage {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.fadeInAnime1s {
  animation-name: shopimage_01;
}

.shopimage_01 {
  width: 57.7%;
  height: 39%;
  object-fit: cover;
  
  animation-delay: 1s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translateY(-50px);
  opacity: 0;
  object-position: 100% 100%;
}

@keyframes shopimage_01 {
  0% {
  }
  100% {
      transform: translateY(0);
      opacity: 1;
    }
}

.fadeInAnime500ms {
  animation-name: shopimage_02;
}
  
.shopimage_02 {
  width: 34.8%;
  height: 54.9%;
  object-fit: cover;
  
  animation-delay: 500ms;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translateY(50px);
  opacity: 0;
  object-position: 100% 100%;
}

@keyframes shopimage_02 {
  0% {
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

.fadeInAnime1500ms {
  animation-name: shopimage_03;
}

.shopimage_03 {
  display: block;
  margin: auto;
  width: 79.9%;
  height: 180px;
  object-fit: cover;
  object-position: 100% 25%;
  margin-top: 50px;
  
  animation-delay: 1500ms;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translateX(50px);
  opacity: 0;
}

@keyframes shopimage_03 {
  0% {
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

/* .shopimage pc */
@media screen and (min-width:769px) {
  .shopimage {
    padding: 80px 10% 0;
    display: flex;
    justify-content: space-between;
  }

  .shopimage_01,
  .shopimage_02,
  .shopimage_03 {
    width: 31.5%;
    height: 270px;
  }

  .shopimage_01,
  .shopimage_02 {
    object-position: 100% 90%;
  }

  .shopimage_03 {
    object-position: 0;
    margin-top: 0;
    margin: 0;
    object-position: 100% 8%;
  }

}/* pc 769px */

/* menu */
.section--menu {
  padding: 130px 5.1% 0;
}

.menu_img {
  height: 145px;
  width: 100%;
  background-image: url(../image/top_menu.jpg);
  background-size: 100%;
  background-position: 0% 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

.menu__txt {
  color: var(--primary-black);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.5px;
}

/* .menu pc */
@media screen and (min-width:769px) {
  .section--menu {
    padding: 30px 0 0;
    text-align: center;
  }

  .menu__txt {
    font-size: 1.5rem;
    line-height: 4.5;
  }

  .menu_img {
    /* margin-left: 6.9%; */
    margin-top: 50px;
    width: 800px;
    height: 350px;
  }

}/* pc 769px */

/* access */
.section--access {
  padding: 130px 5.1% 50px;
}

.inner {
  display: flex;
  flex-direction: column;
}

.access_img {
  height: 145px;
  width: 100%;
  background-image: url(../image/shop07.jpg);
  background-size: 100%;
  background-position: 0% 48%;
  object-fit: cover;
}

.access__row {
  margin-top: 25px;
}

.access__row:first-of-type {
  margin-top: 0;
}

.access__row:last-of-type {
  margin-bottom: 25px;
}

.access__title,
.access__desc {
  color: var(--primary-black);
  text-align: center;
  font-size: 1.2rem;
  line-height: 2.2;
  letter-spacing: 1px;
  text-align: left;
}

.access__title {
  border-bottom: 1px solid var(--primary-black);
  font-weight: 500;
}

.access__desc {
  margin-top: 5px;
  font-weight: 400;
}

.map {
  width: 100%;
  height: 200px;
  display: block;
  margin: auto;
}

/* .access pc */
@media screen and (min-width:769px) {
  .section--access {
    padding: 60px 0 0;
  }

  .access_img {
    display: none;
  }

  .inner {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    padding: 20px 10% 0;
  }

  .access_img_pc {
    height: 450px;
    width: 50%;
    background-image: url(../image/shop07.jpg);
    background-size: 100%;
    background-position: 0% 50%;
    object-fit: cover;
    object-position: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .access__title,
  .access__desc {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
  }
  
  .access__row {
    display: flex;
    align-items: baseline;
    width: 540px;
    border-bottom: 1px solid var(--primary-black);
    padding-bottom: 20px;
  }

  .access__title {
    border-bottom: none;
    width: 144px;
  }

  .access__desc {
    margin-left: 35px;
  }

  .address {
    margin-top: 50px;
  }
  
  .map {
    height: 300px;
  }

}/* pc 769px */