@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 2;
  letter-spacing: 0.2px;
  font-size: 11px;
  transition: all 1.6s ease 0s;
  line-height: 1.9 !important;
  font-family: "eb-garamond", serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  body {
    margin: 0 auto !important;
  }
}

img {
  display: block;
  width: 100%;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

#bg-loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background: #fff;
  z-index: 99;
  transition: opacity 0.3s ease-out 0.1s;
}

#bg-loading.hide {
  opacity: 0;
  pointer-events: none;
}

#page-top {
  position: fixed;
  bottom: 3%;
  right: 3%;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  #page-top {
    right: 3%;
  }
}
#page-top img {
  width: 2.3611111111vw;
}
@media screen and (max-width: 768px) {
  #page-top img {
    width: 7.6vw;
  }
}

#page-top a {
  display: block;
  opacity: 0.9;
  transition: all 0.3s ease;
}

#page-top a:hover {
  opacity: 0.5;
}

#header {
  position: fixed; /*fixedを設定して固定*/
  z-index: 999; /*最前面へ*/
  top: 60px;
  width: 42.6666666667vw;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 769px) {
  #header {
    width: 200px;
    top: 60px;
  }
}

.inview-blur {
  opacity: 0;
  -moz-transition: -moz-transform 1s linear;
  -webkit-transition: -webkit-transform 1s linear;
  -o-transition: -o-transform 1s linear;
  -ms-transition: -ms-transform 1s linear;
  transition: transform 1s linear;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 1s;
}

@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
/* ------------------------
key
------------------------ */
.key {
  width: 100%;
  height: 100svh;
  position: relative;
  background-size: cover;
  background-position: top;
  top: 0;
  left: 0;
}
@media screen and (min-width: 769px) {
  .key {
    height: 55vw;
  }
}

.key .key-logo {
  position: absolute;
}

@media only screen and (min-width: 769px) {
  .key.type01 {
    background-image: url(../images/pc_fv_1.jpg);
  }
  .key.type01 .key-logo {
    top: 52%;
    left: 28%;
    transform: translate(-50%, -50%);
    width: 39.8611111111vw;
  }
  .key.type02 {
    background-image: url(../images/pc_fv_2.jpg);
  }
  .key.type02 .key-logo {
    top: 54%;
    left: 71.9%;
    transform: translate(-50%, -50%);
    width: 39.8611111111vw;
  }
}
@media only screen and (max-width: 768px) {
  .key-logo {
    width: 84vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8.2666666667vw;
  }
  .key.type01 {
    background-image: url(../images/sp_fv_1.jpg);
  }
  .key.type02 {
    background-image: url(../images/sp_fv_2.jpg);
  }
}
#header {
  position: fixed; /*fixedを設定して固定*/
  z-index: 999; /*最前面へ*/
  top: 60px;
  width: 42.6666666667vw;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 769px) {
  #header {
    width: 200px;
    top: 60px;
  }
}

a .price {
  text-decoration: underline;
}

.credit {
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  .credit {
    font-size: 0.9027777778vw;
  }
}
.credit .price {
  font-family: "eb-garamond", serif;
  font-weight: 400;
  font-style: normal;
  margin: 0 1vw;
}
@media screen and (min-width: 769px) {
  .credit .price {
    margin: 0 0.5vw;
  }
}

.m_15 {
  margin: 15px 0 0 15px;
}
@media screen and (min-width: 769px) {
  .m_15 {
    margin: 15px 0 0 0;
  }
}

.mt_15 {
  margin-top: 15px;
}

@media screen and (max-width: 768px) {
  .ml_120 {
    margin-left: 16vw;
    margin-top: 15px;
  }
}
.w_510 {
  width: 68vw;
}
@media screen and (min-width: 769px) {
  .w_510 {
    width: 26.3888888889vw;
  }
}

@media screen and (min-width: 769px) {
  .w_482 {
    width: 33.5229166667vw;
    margin: 0 auto;
  }
}

.img_1 {
  margin: 46vw auto 16vw;
}
@media screen and (min-width: 769px) {
  .img_1 {
    margin: 15.625vw auto 9.7222222222vw;
  }
}

.img_3 {
  margin: 26.6666666667vw auto 0;
}
@media screen and (min-width: 769px) {
  .img_3 {
    margin: 11.5972222222vw auto 11.5972222222vw;
  }
}

.img_4 {
  margin: 26.6666666667vw 0 16vw auto;
}

@media screen and (max-width: 768px) {
  .img_6 {
    margin: 26.6666666667vw 0 5px 0;
  }
}

.img_11 {
  margin: 0 auto 46vw;
}
@media screen and (min-width: 769px) {
  .img_11 {
    margin: 11.6666666667vw auto 16.875vw;
  }
}

.img_18 {
  margin: 26.6666666667vw 0 40vw 0;
}
@media screen and (min-width: 769px) {
  .img_18 {
    margin: 11.6666666667vw auto 0;
  }
}

.img_20 {
  margin: 26.6666666667vw 0 0 0;
}

.img_25 {
  margin: 26.6666666667vw 0 5px auto;
}

.img_26 {
  margin: 0 0 0 auto;
}

.img_30 {
  margin: 26.6666666667vw 0 0 auto;
}

.img_30_cre {
  margin: 0 0 0 auto;
}

.flex {
  display: flex;
  gap: 5px;
}
@media screen and (max-width: 768px) {
  .flex {
    width: 93.3333333333vw;
    margin: 16vw auto 46vw;
  }
  .flex div {
    width: 50%;
  }
}
@media screen and (min-width: 769px) {
  .flex {
    align-items: flex-start;
    justify-content: center;
    margin-top: 11.6666666667vw;
    gap: 20px;
  }
  .flex img {
    width: 26.3888888889vw;
  }
  .flex .credit {
    margin: 15px 0 0 -27.6vw;
  }
}

.stack {
  position: sticky;
  top: 0;
  padding-bottom: 40vw;
}
@media screen and (min-width: 769px) {
  .stack {
    padding-bottom: 20.8333333333vw;
  }
}

.container {
  position: sticky;
  z-index: 3;
  width: 100%;
  background-color: #D3CDBD;
}

footer {
  text-align: center;
  padding-bottom: 20px;
}
footer .btn {
  margin: 66.6666666667vw auto 36.2666666667vw;
}
@media screen and (min-width: 769px) {
  footer .btn {
    margin: 480px auto 200px;
  }
}
footer .btn a {
  display: contents;
  width: fit-content;
}
footer .btn a:nth-child(1) svg {
  border: 1px solid #000000;
  padding: 4vw 11vw;
  width: 61.3333333333vw;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  footer .btn a:nth-child(1) svg {
    width: 25.3409722222vw;
    padding: 2vw 6vw;
  }
}
footer .btn a:nth-child(2) svg {
  border: 1px solid #000000;
  padding: 4vw 8vw;
  width: 61.3333333333vw;
  display: block;
  margin: 12px auto;
}
@media screen and (min-width: 769px) {
  footer .btn a:nth-child(2) svg {
    width: 25.3409722222vw;
    padding: 1.2vw 5vw;
  }
}
footer .sta_cre {
  font-size: 12px;
}
@media screen and (min-width: 769px) {
  footer .sta_cre {
    font-size: 14px;
  }
}
footer .insta {
  width: 20px;
  margin: 110px auto 15px;
}
@media screen and (min-width: 769px) {
  footer .insta {
    width: 32px;
    margin: 170px auto 15px;
  }
}

@media screen and (min-width: 769px) {
  .img_2 {
    width: 57.7236111111vw;
    margin: 0 auto;
  }
  .pc_flex {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 11.6666666667vw;
    gap: 20px;
  }
  .pc_flex img {
    width: 26.3888888889vw;
  }
  .pc_flex .credit {
    margin: 15px 0 0 -27.6vw;
  }
  .pc_flex02 {
    display: flex;
    gap: 8.3333333333vw;
    flex-direction: row-reverse;
    margin-right: 19vw;
  }
  .pc_flex02 .credit {
    margin: 15px 0 0 0;
  }
  .pc_flex02 .slide {
    width: 22.2222222222vw;
    margin-top: 8vw;
  }
  .pc_flex02 .img_3 {
    margin: 0;
    width: 33.5416666667vw;
  }
  .pc_flex03 {
    margin-top: 15.625vw;
    margin-right: 14vw;
  }
  .pc_flex03 .credit {
    margin: 15px 0 0 0;
  }
  .pc_flex03 .slide {
    width: 22.2222222222vw !important;
    margin-top: 8vw !important;
  }
  .pc_flex03 .img_3 {
    margin: 0;
    width: 33.5416666667vw;
  }
  .img_19 {
    width: 33.5416666667vw;
    margin-left: 18.125vw;
  }
  .img_20 {
    width: 22.2222222222vw;
    margin: 8vw 0 0 0 !important;
  }
  .row {
    flex-direction: row;
  }
  .img_23 {
    margin: 11.5972222222vw auto 0;
  }
  .img_25 {
    margin: 11.5972222222vw auto 16.875vw;
  }
  .img_27 {
    width: 22.2222222222vw !important;
    margin-left: 15vw !important;
    margin-top: 8vw !important;
  }
  .img_29 {
    width: 57.7236111111vw;
  }
  .img_30 {
    margin: 11.5972222222vw auto 0;
  }
  .img_30_cre {
    margin: 15px 0 0 36.5vw;
  }
}/*# sourceMappingURL=style.css.map */