@charset "UTF-8";
/*--------------------------
Reset
--------------------------*/
#page-lp {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
#page-lp *, #page-lp ::before, #page-lp ::after {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  vertical-align: middle;
}
#page-lp main {
  display: block;
}
#page-lp span {
  vertical-align: top;
}
#page-lp p, #page-lp table, #page-lp blockquote, #page-lp address, #page-lp pre, #page-lp iframe, #page-lp form, #page-lp figure, #page-lp dl {
  margin: 0;
}
#page-lp h1, #page-lp h2, #page-lp h3, #page-lp h4, #page-lp h5, #page-lp h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
#page-lp ul, #page-lp ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#page-lp dt {
  font-weight: bold;
}
#page-lp dd {
  margin-left: 0;
}
#page-lp pre {
  font-family: monospace, monospace;
  font-size: inherit;
}
#page-lp address {
  font-style: inherit;
}
#page-lp a {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}
#page-lp abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
#page-lp b, #page-lp strong {
  font-weight: bolder;
}
#page-lp code, #page-lp kbd, #page-lp samp {
  font-family: monospace, monospace;
  font-size: inherit;
}
#page-lp small {
  font-size: 80%;
}
#page-lp sub, #page-lp sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
#page-lp sub {
  bottom: -0.25em;
}
#page-lp sup {
  top: -0.5em;
}
#page-lp svg, #page-lp img, #page-lp embed, #page-lp object, #page-lp iframe {
  vertical-align: bottom;
}
#page-lp button, #page-lp input, #page-lp optgroup, #page-lp select, #page-lp textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
  vertical-align: middle;
}
#page-lp [type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}
#page-lp [type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}
#page-lp button, #page-lp [type=button], #page-lp [type=reset], #page-lp [type=submit], #page-lp [role=button] {
  color: inherit;
  cursor: pointer;
}
#page-lp button:disabled, #page-lp [type=button]:disabled, #page-lp [type=reset]:disabled, #page-lp [type=submit]:disabled {
  cursor: default;
}
#page-lp :-moz-focusring {
  outline: auto;
}
#page-lp select:disabled {
  opacity: inherit;
}
#page-lp option {
  padding: 0;
}
#page-lp fieldset {
  margin: 0;
  min-width: 0;
  padding: 0;
}
#page-lp legend {
  padding: 0;
}
#page-lp progress {
  vertical-align: baseline;
}
#page-lp textarea {
  overflow: auto;
}
#page-lp [type=number]::-webkit-inner-spin-button, #page-lp [type=number]::-webkit-outer-spin-button {
  height: auto;
}
#page-lp [type=search] {
  outline-offset: -2px;
}
#page-lp [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
#page-lp ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
#page-lp label[for] {
  cursor: pointer;
}
#page-lp details {
  display: block;
}
#page-lp summary {
  display: list-item;
}
#page-lp [contenteditable]:focus {
  outline: auto;
}
#page-lp table {
  border-collapse: collapse;
  border-color: inherit;
  border-spacing: 0;
}
#page-lp caption {
  text-align: left;
}
#page-lp td, #page-lp th {
  padding: 0;
  vertical-align: top;
}
#page-lp th {
  font-weight: bold;
  text-align: left;
}

@media (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

/* 幅 */
.w10p {
  width: 10%;
}

.w20p {
  width: 20%;
}

.w30p {
  width: 30%;
}

.w40p {
  width: 40%;
}

.w50p {
  width: 50%;
}

.w60p {
  width: 60%;
}

.w70p {
  width: 70%;
}

.w80p {
  width: 80%;
}

.w90p {
  width: 90%;
}

.w100p {
  width: 100%;
}

/* /幅 */
/* 配置 */
.txt-r {
  text-align: right;
}

.txt-l {
  text-align: left;
}

.txt-c {
  text-align: center;
}

/* /配置 */
/*--------------------------
  Components
--------------------------*/
.animation-shake {
  animation: shake 1.5s infinite ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-48%);
  }
}
.animation-dokidoki {
  animation: dokidoki 1.5s ease-out infinite;
  opacity: 1;
}

@keyframes dokidoki {
  0%, 40%, 60%, 80% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
.js-mouse-scroll {
  cursor: grab;
}
.js-mouse-scroll:active {
  cursor: grabbing;
}

/* フェードイン表示******************************************************/
/* 画面外にいる状態 */
.fadein {
  opacity: 0;
  transition: all 2s;
}

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
}

/* 順番に */
.fadein:nth-of-type(2) {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}

.fadein:nth-of-type(3) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}

.fadein:nth-of-type(4) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}

.fadein:nth-of-type(5) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

/* 上移動＋フェードイン表示******************************************************/
/* 画面外にいる状態 */
.fadeup {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 1s;
}

/* 画面内に入った状態 */
.fadeup.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/* 順番に */
.fadeup:nth-of-type(2) {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}

.fadeup:nth-of-type(3) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}

.fadeup:nth-of-type(4) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}

.fadeup:nth-of-type(5) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

.fadeup:nth-of-type(6) {
  -moz-transition-delay: 1000ms;
  -webkit-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
}

.fadeup:nth-of-type(7) {
  -moz-transition-delay: 1200ms;
  -webkit-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
}

.fadeup:nth-of-type(8) {
  -moz-transition-delay: 1400ms;
  -webkit-transition-delay: 1400ms;
  -o-transition-delay: 1400ms;
  -ms-transition-delay: 1400ms;
}

/* 下移動＋フェードイン表示******************************************************/
/* 画面外にいる状態 */
.fadedown {
  opacity: 0.1;
  transform: translate(0, -50px);
  transition: all 0.5s;
}

/* 画面内に入った状態 */
.fadedown.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/* 順番に */
.fadedown:nth-of-type(2) {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}

.fadedown:nth-of-type(3) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}

.fadedown:nth-of-type(4) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}

.fadedown:nth-of-type(5) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

.fadedown:nth-of-type(6) {
  -moz-transition-delay: 1000ms;
  -webkit-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
}

.fadedown:nth-of-type(7) {
  -moz-transition-delay: 1200ms;
  -webkit-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
}

.fadedown:nth-of-type(8) {
  -moz-transition-delay: 1400ms;
  -webkit-transition-delay: 1400ms;
  -o-transition-delay: 1400ms;
  -ms-transition-delay: 1400ms;
}

/* ズームイン表示******************************************************/
/* 画面外にいる状態 */
.zoomin {
  opacity: 0;
  transition: 0.5s;
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}

/* 画面内に入った状態 */
.zoomin.scrollin {
  opacity: 1;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/* 順番に */
.zoomin:nth-of-type(2) {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}

.zoomin:nth-of-type(3) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}

.zoomin:nth-of-type(4) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}

.zoomin:nth-of-type(5) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

.zoomin:nth-of-type(6) {
  -moz-transition-delay: 1000ms;
  -webkit-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
}

.zoomin:nth-of-type(7) {
  -moz-transition-delay: 1200ms;
  -webkit-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
}

.zoomin:nth-of-type(8) {
  -moz-transition-delay: 1400ms;
  -webkit-transition-delay: 1400ms;
  -o-transition-delay: 1400ms;
  -ms-transition-delay: 1400ms;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

#page-lp img {
  height: auto;
  vertical-align: top;
  width: 100%;
}
@media (max-width: 767px) {
  #page-lp img {
    max-width: 100%;
  }
}
#page-lp a:hover {
  opacity: 0.7;
}
#page-lp .footer .f-logo {
  margin: 0 auto;
  width: 16.4vw;
}
@media (min-width: 500px) {
  #page-lp .footer .f-logo {
    width: 82px;
  }
}
#page-lp .footer .f-link {
  color: #fff;
  font-size: 2.9333333333vw;
  display: block;
  margin-top: 6.6666666667vw;
  text-decoration: underline;
}
@media (min-width: 500px) {
  #page-lp .footer .f-link {
    font-size: 14.6666666667px;
    margin-top: 33.3333333333px;
  }
}
#page-lp .footer .f-link:hover {
  text-decoration: none;
}
#page-lp .footer .f-copyright {
  font-size: 3.2vw;
  letter-spacing: 0.06em;
  margin-top: 20vw;
}
@media (min-width: 500px) {
  #page-lp .footer .f-copyright {
    font-size: 16px;
    margin-top: 100px;
  }
}

#page-lp {
  color: #101820;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 5.3333333333vw;
  font-style: normal;
  font-weight: 500;
}
@media (min-width: 500px) {
  #page-lp {
    background: #d97a8a url(../images/common/bg_1920.webp) no-repeat 0 0;
    background-size: cover;
    background-attachment: fixed;
    font-size: 26.6666666667px;
  }
}
@media (min-width: 2000px) {
  #page-lp {
    background: #d97a8a url(../images/common/bg_3000.webp) no-repeat 0 0;
    background-size: cover;
    background-attachment: fixed;
  }
}
#page-lp .header {
  position: relative;
  width: 100%;
}
@media (min-width: 500px) {
  #page-lp .header {
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    margin: 0 auto;
    max-width: 506px;
  }
}
#page-lp .header img {
  display: block;
  margin: 0 auto;
  max-width: 500px;
}
#page-lp .header .sales,
#page-lp .header .amazon-gift {
  position: relative;
  z-index: 2;
}
#page-lp .header .area-mv {
  position: relative;
  z-index: 1;
}
@media (min-width: 500px) {
  #page-lp .header .area-mv {
    margin: 0 auto;
    max-width: 500px;
  }
}
#page-lp .header .area-mv .mv-movie {
  left: 0;
  position: absolute;
  bottom: -13.75vw;
  max-width: 100vw;
  overflow-x: hidden;
  width: 100vw;
  z-index: -1;
}
@media (min-width: 500px) {
  #page-lp .header .area-mv .mv-movie {
    bottom: -68.75px;
    margin: 0 auto;
    max-width: 500px;
  }
}
#page-lp .header .area-mv .mv-movie video {
  width: 100vw;
}
@media (min-width: 500px) {
  #page-lp .header .area-mv .mv-movie video {
    max-width: 500px;
  }
}
#page-lp .header a {
  bottom: 12.5vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: 0.3s;
  width: 79.625vw;
  z-index: 3;
}
@media (min-width: 500px) {
  #page-lp .header a {
    bottom: 62.5px;
    width: 398.125px;
  }
}
#page-lp .header a:hover {
  opacity: 1;
  transform: translateX(-50%) scale(1.05);
}
#page-lp main {
  position: relative;
  margin: 0 auto;
  z-index: 9;
}
@media (min-width: 500px) {
  #page-lp main {
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    width: 506px;
  }
}
#page-lp main img {
  display: block;
  margin: 0 auto;
  max-width: 500px;
}
#page-lp main .movie01 {
  position: relative;
  z-index: -1;
}
#page-lp main .movie01 img {
  z-index: 2;
}
#page-lp main .movie01 video {
  right: 0;
  position: absolute;
  bottom: -37.5vw;
  width: 100vw;
  z-index: -1;
}
@media (min-width: 500px) {
  #page-lp main .movie01 video {
    bottom: -187.5px;
    width: 500px;
  }
}
#page-lp main .movie02 {
  overflow-y: hidden;
  position: relative;
  z-index: 2;
}
#page-lp main .movie02 img {
  z-index: 2;
}
#page-lp main .movie02 video {
  right: 2.5vw;
  position: absolute;
  top: -1.25vw;
  width: 31.25vw;
  z-index: -1;
}
@media (min-width: 500px) {
  #page-lp main .movie02 video {
    right: 12.5px;
    top: -6.25px;
    width: 156.25px;
  }
}
#page-lp main .movie03 {
  background: #000;
  overflow-y: hidden;
  position: relative;
  z-index: 2;
}
#page-lp main .movie03 img {
  z-index: 2;
}
#page-lp main .movie03 video {
  opacity: 0.7;
  right: 0vw;
  position: absolute;
  top: 0vw;
  width: 100vw;
  z-index: -1;
}
@media (min-width: 500px) {
  #page-lp main .movie03 video {
    right: 0px;
    top: 0px;
    width: 500px;
  }
}
#page-lp main .movie04 {
  background: #000;
  overflow-y: hidden;
  position: relative;
  z-index: 2;
}
#page-lp main .movie04 img {
  z-index: 2;
}
#page-lp main .movie04 video {
  left: 5vw;
  position: absolute;
  top: 50vw;
  width: 65.625vw;
  z-index: -1;
}
@media (min-width: 500px) {
  #page-lp main .movie04 video {
    left: 25px;
    top: 250px;
    width: 328.125px;
  }
}
#page-lp main .movie05 {
  position: relative;
}
#page-lp main .movie05 video {
  left: 50%;
  position: absolute;
  top: 33.625vw;
  transform: translateX(-50%);
  width: 50.75vw;
  z-index: 9;
}
@media (min-width: 500px) {
  #page-lp main .movie05 video {
    top: 168.125px;
    width: 253.75px;
  }
}
#page-lp main .movie06 {
  background: #000;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
#page-lp main .movie06 img {
  z-index: 2;
}
#page-lp main .movie06 video {
  opacity: 0.6;
  right: 0;
  position: absolute;
  bottom: 0vw;
  width: 150vw;
  z-index: -1;
}
@media (min-width: 500px) {
  #page-lp main .movie06 video {
    bottom: 0px;
    width: 750px;
  }
}
#page-lp main .btn-area01 {
  position: relative;
}
#page-lp main .btn-area01 .btn-1-sub {
  left: 50%;
  position: absolute;
  top: 8.75vw;
  transform: translateX(-50%);
  width: 86vw;
}
@media (min-width: 500px) {
  #page-lp main .btn-area01 .btn-1-sub {
    top: 43.75px;
    width: 430px;
  }
}
#page-lp main .btn-area01 .btn-2-sub {
  left: 50%;
  position: absolute;
  top: 78.125vw;
  transform: translateX(-50%);
  width: 86vw;
}
@media (min-width: 500px) {
  #page-lp main .btn-area01 .btn-2-sub {
    top: 390.625px;
    width: 430px;
  }
}
#page-lp main .btn-area02 {
  position: relative;
}
#page-lp main .btn-area02 .btn-2-omatome {
  left: 50%;
  position: absolute;
  top: 13.5vw;
  transform: translateX(-50%);
  width: 86vw;
}
@media (min-width: 500px) {
  #page-lp main .btn-area02 .btn-2-omatome {
    top: 67.5px;
    width: 430px;
  }
}
#page-lp main .btn-area02 .btn-3-omatome {
  left: 50%;
  position: absolute;
  top: 39.75vw;
  transform: translateX(-50%);
  width: 86vw;
}
@media (min-width: 500px) {
  #page-lp main .btn-area02 .btn-3-omatome {
    top: 198.75px;
    width: 430px;
  }
}
#page-lp main .floating {
  bottom: 0;
  position: fixed;
  max-width: 550px;
  width: 100%;
  inset: auto 0 0;
  margin: 0 auto;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  width: 87.5vw;
}
@media (min-width: 500px) {
  #page-lp main .floating {
    width: 437.5px;
  }
}
#page-lp main .floating.visible {
  opacity: 0.95;
  visibility: visible;
  pointer-events: auto;
}
#page-lp main .floating img {
  height: auto;
  width: 100%;
}