@charset "UTF-8";
/* --------------------
		setting
-------------------- */
:root {
  --c-txt: #333; }

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important; } }

/* --------------------
		content
-------------------- */
#content {
  overflow: hidden;
  position: relative;
  /* line-height: 1; */
  color: var(--c-txt); 
}
  #content img {
    width: 100%;
    height: auto; 
}

/* --------------------
		contents
-------------------- */
body {
  background-color: #fff; }

.lp-wrapper {
  position: relative;
  font-size: min(4.26667vw, 16px);
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  color: #1A1A1A;
  overflow: hidden;
  opacity: 0;
  transition: ease opacity 1.5s;
  transition-property: opacity,transform; }
  .lp-wrapper img {
    width: 100%;
    height: auto; }
  .is-init .lp-wrapper {
    opacity: 1; }
  .lp-wrapper.is-scroll {
    transition: ease opacity 0.3s;
    opacity: 0; }

.lp-u-wrap {
  padding-right: 8%;
  padding-left: 8%; }
  @media screen and (min-width: 768px) {
    .lp-u-wrap {
      padding-left: 1.83824%;
      padding-right: 1.83824%;
      margin-left: auto;
      margin-right: auto;
      width: 38.97059%;
      min-width: 530px;
      max-width: 650px; } }

.lp-u-block {
  padding-left: 7.46667vw;
  padding-right: 7.46667vw; }
  @media screen and (min-width: 768px) {
    .lp-u-block {
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.83824%;
      padding-right: 1.83824%;
      min-width: 530px;
      max-width: 38.97059%; } }
  .lp-u-block > :first-child {
    margin-top: 0; }

@media screen and (max-width: 767px) {
  .lp-u-show-pc {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .lp-u-show-sp {
    display: none !important; } }

.lp-u-bold {
  font-weight: bold !important; }

.lp-u-mt0 {
  margin-top: 0 !important; }

@media screen and (min-width: 768px) {
  .lp-u-hover {
    cursor: pointer;
    transition: ease opacity 0.3s; }
    .lp-u-hover:hover {
      opacity: 0.7; } }

.lp-u-miller {
  font-family: miller-banner, serif;
  font-style: normal; }

.lp-main img {
  width: 100%;
  height: auto; 
}
@media screen and (min-width: 768px) {
  .lp-main {
    min-width: 430px;
    position: relative;
    z-index: 10; } 
}
.lp-c-paragraph {
  line-height: 2.285;
  letter-spacing: 0.05em;
  font-size: min(1.27273vw, 14px); 
}
@media screen and (max-width: 767px) {
  .lp-c-paragraph {
    line-height: 2.1538;
    font-size: 3.46667vw; } 
  }

.animation-fadeup {
  opacity: 0;
  transform: translateY(10px); 
} */
.animation-fadeup.is-show {
  transition: ease-out all 1s;
  opacity: 1;
  transform: translateY(0px); 
}
.animation-fadein {
  opacity: 0; 
}
.animation-fadein.is-show {
  transition: ease-out opacity 1s;
  opacity: 1; 
}

@keyframes fade_filter {
  0% {
    filter: blur(10px);
    opacity: 0; }
  100% {
    opacity: 1;
    filter: blur(0); } }

.lp-mv {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  height: 300vh;
  height: 300svh;
  pointer-events: none;
  opacity: 0; 
}
@media screen and (max-width: 767px) {
  .lp-mv {
    max-width: 430px;
    height: 200vh;
  }
}

.lp-logo {
  position: fixed;
  z-index: 1000;
  top: 50px;
  left: 60px;
  width: 100px; }
  @media screen and (max-width: 767px) {
    .lp-logo {
      top: 5.33333vw;
      left: 37.33333vw;
      width: 25.33333vw; } }

.lp-mv__title {
  position: fixed;
  z-index: 10;
  /* top: 0;
  left: 1.83824vw;
  width: 96.76471vw; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  /* height: 100svh; */
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  color: #333333;
}
@media screen and (max-width: 767px) {
  .lp-mv__title {
    /* width: 100vw; */
  }
}

.lp-mv__maintitle {
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
  text-align: center;
  letter-spacing: 0.2em; 
  opacity: .2;
}
@media screen and (max-width: 767px) {
  .lp-mv__maintitle {
    display: block;
    position: absolute;
    /* top: 50%; */
    /* left: 50%;
    transform: translate(-50%, -50%); */
    bottom: 18.66667vw;
    left: 0;
    width: 100%; 
    font-size: 5.8vw;
  } 
}
.lp-mv__maintitle > span {
  display: block;
  overflow: hidden; 
  font-size: 6vw; 
  text-indent: 1em;
  letter-spacing: .1em;
}
@media screen and (max-width: 767px) {
  .lp-mv__maintitle > span {
    line-height: 0.9;
    font-size: 10vw; 
    letter-spacing: .1em;
    text-indent: 0.1em;
    /* color: #fff; */
  }
  .lp-mv__maintitle > span:nth-child(2) {
    text-align: center; 
  } 
}
.lp-mv__maintitle > span > span {
  display: block;
  opacity: 0;
  transform: translateY(100%); 
}
@media screen and (max-width: 767px) {
  .lp-mv__maintitle > span > span {
    display: block; 
  } 
}

.lp-mv-visual {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .lp-mv-visual {
    top: 95vw;
    /* left: 40vw;  */
  } 
}

.lp-mv-visual img {
  max-width: 700px;
  width: 70vw;
  display: block; 
}
@media screen and (max-width: 767px) {
  .lp-mv-visual img {
    max-width: 840px;
    width: 100vw; 
  } 
}

.lp-mv__scroll {
  position: fixed;
  z-index: 10;
  right: 9vw;
  bottom: 3vw;
  z-index: 1000; 
}
@media screen and (max-width: 767px) {
  .lp-mv__scroll {
    right: 9vw;
    bottom: 4vw;
  } 
}
.lp-mv__scroll .c-label {
  position: absolute;
  z-index: 2;
  top: -35%;
  left: -23px;
  line-height: 1;
  /* writing-mode: vertical-lr; */
  font-size: 15px;
  font-weight: 300; 
}
@media screen and (max-width: 767px) {
  .lp-mv__scroll .c-label {
    top: -26%;
    left: -20px;
    font-size: 15px; 
  } 
}
.lp-mv__scroll .c-arw {
  animation: arrowbottom 2.5s ease 0s infinite;
  width: 9px; 
}
  @media screen and (max-width: 767px) {
    .lp-mv__scroll .c-arw {
      width: 2.13333vw;
      left: calc(50% - 3px);
      animation: arrowbottom_sp 2.5s ease 0s infinite; 
    } 
}

@keyframes arrowbottom {
  0% {
    transform: translateY(0px); }
  10% {
    transform: translateY(10px); }
  20% {
    transform: translateY(0px); }
  30% {
    transform: translateY(10px); }
  40% {
    transform: translateY(0px); }
  100% {
    transform: translateY(0px); } }

@keyframes arrowbottom_sp {
  0% {
    transform: translateY(0px); }
  10% {
    transform: translateY(5px); }
  20% {
    transform: translateY(0px); }
  30% {
    transform: translateY(5px); }
  40% {
    transform: translateY(0px); }
  100% {
    transform: translateY(0px); } }

@keyframes rotate360 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

.lp-intro {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 51.47059vw;
  overflow: hidden; 
}
@media screen and (min-width: 768px) {
  .lp-intro {
    min-height: 73.52941vw;
    width: 100%;
    background-color: #fff;
  } 
}
  @media screen and (max-width: 767px) {
    .lp-intro {
      /* width: 100%; */
      min-height: 0;
      /* height: 146vw;  */
      background-color: #fff;
    } 
  }

.lp-intro__text {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: 450px;
  color: #fff;
  opacity: 0; }
  @media screen and (max-width: 767px) {
    .lp-intro__text {
      width: 74.6vw; } }

.lp-intro__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

@media screen and (max-width: 767px) {
  .lp-section-wrap {
    padding-bottom: 90px; }
}


